/* National Day 96 — Hayyak skin. Targets the existing hayyak markup only (.nds-banner-section, section.container, footer). Remove the two lines to end the event. */ @font-face{font-family:"Saudi";font-weight:300 400;font-display:swap;src:local("Saudi"),local("SaudiWeb-Regular"),url(fonts/SaudiWeb-Regular.woff2) format("woff2")} @font-face{font-family:"Saudi";font-weight:600 700;font-display:swap;src:local("Saudi Bold"),local("SaudiWeb-Bold"),url(fonts/SaudiWeb-Bold.woff2) format("woff2")} @keyframes nd96-caret{50%{opacity:0}} body{overflow-x:clip} /* ── Hero ─────────────────────────────────────────────── */ .nds-banner-section{ --nd96-from:#211501;--nd96-to:#7c5d21;--nd96-word:#d8b67a; --nd96-angle:270deg; --nd96-card:491px;--nd96-strip:40px;--nd96-n:6; --nd96-deck-w:calc(var(--nd96-card) + (var(--nd96-n) - 1) * var(--nd96-strip)); --nd96-motion:.6s ease; background-image:linear-gradient(var(--nd96-angle),var(--nd96-from),var(--nd96-to)); overflow:hidden; } /* contrast scrim under the text column (deep side), on top of the gradient + pattern */ .nds-banner-section .banner-text::before{content:"";position:absolute;inset:-40px calc(50% - 50vw);background:linear-gradient(var(--nd96-angle),rgba(0,0,0,.45),rgba(0,0,0,.2) 45%,transparent 70%);z-index:-1;pointer-events:none} .nds-banner-section[dir="ltr"]{--nd96-angle:90deg;direction:ltr} .nds-banner-section[dir="ltr"] .nd96-arrow i{transform:scaleX(-1)} .nds-banner-section.nd96-heritage{--nd96-from:#01572b;--nd96-to:#5aba1c;--nd96-word:#ebffe6} .nds-banner-section.nd96-courage{--nd96-from:#1b2613;--nd96-to:#607c4f;--nd96-word:#c9e0bb} .nds-banner-section.nd96-ambition{--nd96-from:#340117;--nd96-to:#971a4d;--nd96-word:#ff85c7} .nds-banner-section.nd96-generosity{--nd96-from:#312d6e;--nd96-to:#6565e0;--nd96-word:#ded8f7} .nds-banner-section.nd96-kindness{--nd96-from:#011d3a;--nd96-to:#0050af;--nd96-word:#07b9ff} .nds-banner-section.nd96-vision{--nd96-from:#211501;--nd96-to:#7c5d21;--nd96-word:#d8b67a} .nds-banner-section>img{display:none} /* outgoing gradient, faded out by the script on each change */ .nds-banner-section::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--nd96-angle),var(--nd96-prev-from,transparent),var(--nd96-prev-to,transparent));opacity:0;pointer-events:none} /* campaign pattern */ .nds-banner-section::after{content:"";position:absolute;inset:0;background:url(nd96_pattern.svg) repeat;opacity:.4;pointer-events:none} .nds-banner-section .banner-text{position:relative;z-index:2} .nds-banner-section .nd96-eyebrow{display:block;color:#fff;font-size:16px;line-height:24px;font-weight:500;margin-bottom:12px} .nds-banner-section .banner-text h1,.nds-banner-section .banner-text p{color:#fff} .nds-banner-section .banner-text h1{font-family:"Saudi","IBM Plex Sans Arabic",sans-serif;font-weight:700;font-size:clamp(40px,4.6vw,72px);line-height:1.15;margin-bottom:16px} .nds-banner-section .nd96-typed{color:var(--nd96-word);transition:color var(--nd96-motion)} .nds-banner-section .nd96-typed::after{content:"";display:inline-block;width:2px;height:.9em;margin-inline-start:.1em;vertical-align:-.1em;background:currentColor;animation:nd96-caret 1s steps(1) infinite} .nds-banner-section .banner-text p{width:100%;max-width:640px;margin-bottom:24px} .nds-banner-section .nd96-short{display:none} /* nav row: arrows + dots */ .nd96-nav{display:flex;align-items:center;gap:12px;margin-top:24px} .nd96-arrow{width:40px;height:40px;border-radius:4px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.15);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:background var(--nd96-motion)} .nd96-arrow:hover{background:rgba(255,255,255,.25)} .nd96-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px} .nd96-dots{display:flex;gap:8px;padding:0 4px} .nd96-dot{width:12px;height:12px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.6);cursor:pointer;transition:background var(--nd96-motion),transform var(--nd96-motion)} .nd96-dot[aria-selected="true"]{background:#fff;transform:scale(1.2)} .nd96-dot:focus-visible{outline:2px solid #fff;outline-offset:2px} /* deck of six cards */ .nd96-deck{position:absolute;z-index:1;touch-action:pan-y;user-select:none;-webkit-user-select:none} .nd96-card{position:absolute;padding:0;border:0;background:none;overflow:hidden;cursor:pointer;z-index:calc(20 - var(--rel,1));transition:transform var(--nd96-motion),opacity var(--nd96-motion)} .nd96-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--nd96-motion);-webkit-user-drag:none;pointer-events:none} .nd96-card:focus-visible{outline:2px solid #fff;outline-offset:-4px} @media (min-width:992px){ .nds-banner-section{--nd96-card:340px;--nd96-dir:-1} .nds-banner-section[dir="ltr"]{--nd96-dir:1} .nds-banner-section .banner-text{padding-left:calc(var(--nd96-deck-w) + 24px)} .nds-banner-section[dir="ltr"] .banner-text{padding-left:var(--bs-gutter-x,.75rem);padding-right:calc(var(--nd96-deck-w) + 24px)} .nd96-deck{inset-block:0;left:0;width:var(--nd96-deck-w)} .nds-banner-section[dir="ltr"] .nd96-deck{left:auto;right:0} .nd96-card{top:calc((100% - var(--nd96-card)) / 2);inset-inline-start:0;width:var(--nd96-card);height:var(--nd96-card);transform:translateX(calc(var(--drag,0px) + var(--nd96-dir) * var(--rel,1) * var(--nd96-strip)))} .nd96-card.is-active{transform:translateX(var(--drag,0px));cursor:default;transition:transform var(--nd96-motion),z-index 0s .6s} .nd96-card img{transform:translateX(calc(var(--nd96-dir) * (var(--nd96-card) - var(--nd96-strip))))} .nd96-card.is-active img{transform:none} } @media (min-width:1200px){.nds-banner-section{--nd96-card:400px}} @media (min-width:1400px){.nds-banner-section{--nd96-card:491px}} @media (max-width:991.98px){ .nds-banner-section,.nds-banner-section[dir="ltr"]{--nd96-angle:0deg;height:auto;flex-direction:column;padding:40px 16px 32px;gap:24px} .nds-banner-section .banner-text::before{inset:auto calc(50% - 50vw) -32px;height:75%;background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,.2) 60%,transparent)} .nds-banner-section[dir="ltr"] .banner-text{padding-right:var(--bs-gutter-x,.75rem)} .nds-banner-section .banner-text{text-align:center;display:flex;flex-direction:column;align-items:center} .nds-banner-section .banner-text p{display:none} .nds-banner-section .nd96-short{display:block} .nd96-nav{justify-content:center} .nd96-deck{position:relative;order:-1;width:100%;max-width:651px;aspect-ratio:430/324} .nd96-card{top:0;height:100%;width:75.35%;inset-inline-start:12.33%;opacity:0;z-index:1;transform:translateX(calc(var(--drag,0px) + var(--nd96-dir,-1) * var(--srel,1) * 91.8%)) scale(.73)} .nds-banner-section[dir="ltr"] .nd96-card{--nd96-dir:1} .nd96-card.is-near{opacity:1} .nd96-card.is-active{opacity:1;z-index:2;transform:translateX(var(--drag,0px))} } .nd96-deck.is-dragging .nd96-card{transition:none} /* ── Section chrome ───────────────────────────────────── */ .nd96-section{position:relative} .nd96-section::after{content:"";position:absolute;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);height:24px;background:url(section_bar1.svg) repeat-x bottom center;background-size:auto 24px;pointer-events:none} .nd96-bar-2::after{background-image:url(section_bar2.svg)} .nd96-bar-3::after{background-image:url(section_bar3.svg)} .nd96-vector::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);min-width:1280px;background:url(section_vector.svg) no-repeat bottom left;background-size:contain;opacity:.6;pointer-events:none} .nd96-vector::after{content:none} .nd96-section>*{position:relative;z-index:1} /* ── Footer ───────────────────────────────────────────── */ footer{background-image:url(footer_bar.svg);background-repeat:repeat-x;background-position:bottom center;background-size:auto 60px;padding-bottom:100px} .nd96-footer-logo{height:40px;width:auto} /* ── Theme toggle (NDS dark mode: html[data-theme="dark"]) ───── */ .nd96-theme--icon{padding-inline:8px} .nd96-theme--icon .header-menu__item-arrow{margin:0} .nd96-theme--icon i{font-size:22px} .nd96-theme:focus-visible{outline:2px solid var(--text-default);outline-offset:-2px} html[data-theme="dark"]{ color-scheme:dark; --colors-neutral-25:#0c111b;--colors-neutral-50:#111927;--colors-neutral-100:#1f2a37;--colors-neutral-200:#2d3541;--colors-neutral-300:#384250;--colors-neutral-400:#4d5761;--colors-neutral-500:#6c737f;--colors-neutral-600:#9da4ae;--colors-neutral-700:#d2d6db;--colors-neutral-800:#e5e7eb;--colors-neutral-900:#f3f4f6;--colors-neutral-950:#f9fafb; --background-body:#0c111b;--background-white:#161b26;--background-menu:#161b26;--background-card:#161b26; --text-default:#f3f4f6;--text-primary-paragraph:#d2d6db;--text-secondary-paragraph:#9da4ae;--icon-default:#d2d6db; --border-neutral-primary:#384250;--border-neutral-secondary:#2d3541;--border-neutral-tertiary:#1f2a37; --button-background-neutral-hovered:#1f2a37;--button-background-neutral-default:#1f2a37; --link-primary:#54c08a;--link-primary-hovered:#7ad19f; } html[data-theme="dark"] body{background:#0c111b;color:#f3f4f6} html[data-theme="dark"] .digital-stamp-card{background:#111927} html[data-theme="dark"] .digital-stamp-card h6,html[data-theme="dark"] .digital-stamp-card p{color:#f3f4f6} html[data-theme="dark"] .digital-stamp-body .box,html[data-theme="dark"] .digital-stamp-body .stamp-link-box{background:#161b26;color:#f3f4f6;border-color:#384250} html[data-theme="dark"] .digital-stamp-body .img-border-rounded{background:#1f2a37} html[data-theme="dark"] .header,html[data-theme="dark"] .offcanvas{background-color:#161b26;color:#f3f4f6} html[data-theme="dark"] .header-menu__item,html[data-theme="dark"] .header-aside-menu__item,html[data-theme="dark"] .header-menu__item-arrow,html[data-theme="dark"] .header-menu__item-label{color:#f3f4f6} html[data-theme="dark"] .header__logo img{filter:brightness(0) invert(1)} html[data-theme="dark"] .btn-close{filter:invert(1)} html[data-theme="dark"] .title,html[data-theme="dark"] h3,html[data-theme="dark"] .uj-card h3,html[data-theme="dark"] .uj-static-card .uj-static-card-title{color:#f3f4f6} html[data-theme="dark"] .uj-card p{color:#d2d6db} html[data-theme="dark"] .uj-card.bg-white,html[data-theme="dark"] .uj-card{background-color:#161b26!important;border-color:#384250!important} html[data-theme="dark"] .bg-white{background-color:#161b26!important} html[data-theme="dark"] .bg-green{background-color:rgba(27,131,84,.15)!important} html[data-theme="dark"] .uj-btn--primary,html[data-theme="dark"] .uj-btn--primary:hover{color:#fff} html[data-theme="dark"] .uj-static-card-icon,html[data-theme="dark"] .uj-card .uj-card-icon{background-color:rgba(27,131,84,.2);color:#7ad19f} html[data-theme="dark"] .uj-static-card .uj-static-card-number{color:#7ad19f} html[data-theme="dark"] .uj-card-link i{background-color:#1f2a37;color:#f3f4f6} html[data-theme="dark"] .uj-card-link i:hover{background-color:#2d3541;color:#fff} html[data-theme="dark"] .uj-btn--primary-neutral--on-color{background-color:#f9fafb;color:#0c111b} html[data-theme="dark"] .nd96-section::after{filter:brightness(.7)} html[data-theme="dark"] .nd96-vector::before{filter:invert(1);opacity:.35} html[data-theme="dark"] footer{background-color:#0c111b} html[data-theme="dark"] .cookie-box{background:#161b26;color:#f3f4f6} /* ── Language (html[dir="ltr"]) ───────────────────────────────── */ html[dir="ltr"] body,html[dir="ltr"] .nds-banner-section,html[dir="ltr"] .stamp-ar{direction:ltr} html[dir="ltr"] .uj-static-wrap{direction:ltr} html[dir="ltr"] .offcanvas-end{right:0;left:auto} html[dir="ltr"] .footer-img-log img{margin-left:0;margin-right:10px} html[dir="ltr"] .uj-card-link i{transform:scaleX(-1)} html[dir="ltr"] .digital-stamp-card .digital-stamp-header,html[dir="ltr"] .digital-stamp-body .box{direction:ltr} @media (prefers-reduced-motion:reduce){ .nds-banner-section .nd96-typed::after{animation:none} .nd96-card,.nd96-card img,.nd96-dot,.nd96-arrow{transition:none} }