/* ============================================================ SND — Saudi National Day theme ("عزّنا بطبعنا") Palette from the official SND brand guideline: deep green #002727 · primary #01894B · lime #5ABA1B · dark teal #01333A Applied only when has class "snd" (set by snd-theme.js). Remove the snd-theme.* includes from the pages to retire the theme. ============================================================ */ html.snd { --teal: #01894B; --teal-dark: #016B3A; --navy: #013A30; --navy-dark: #002727; --mint: #5ABA1B; --light: #E4F3EA; --lemon: #5ABA1B; --bg-soft: #F2F8F4; --line: #DCEAE1; } /* Real woven Sadu backdrop from the official identity */ html.snd .hero { background: url('../img/snd/sadu-hero.webp') center/cover no-repeat #002727; } html.snd .hero::before { background: linear-gradient(180deg, rgba(0, 30, 28, .72) 0%, rgba(0, 39, 39, .45) 55%, rgba(0, 30, 28, .78) 100%); } html.snd .page-hero { background: url('../img/snd/sadu-hero.webp') center/cover no-repeat #002727; } html.snd .page-hero > .container { position: relative; z-index: 1; } html.snd .page-hero::after { background: rgba(0, 39, 39, .55); width: auto; height: auto; border-radius: 0; inset: 0; top: 0; } html.snd .stats { background: linear-gradient(140deg, #002727 0%, #016B3A 100%); } html.snd .cta-band { background: linear-gradient(140deg, #002727, #01894B); } /* Woven Sadu band edging the hero and the footer */ html.snd .hero::after, html.snd .page-hero::before { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 26px; z-index: 2; background: url('../img/snd/sadu-band.webp') center / auto 100% repeat-x; } html.snd .footer { border-top: 26px solid transparent; border-image: url('../img/snd/sadu-band.webp') 30 0 fill / 26px 0 repeat; border-inline: 0; border-bottom: 0; } /* ---------- Countdown (hero, injected by snd-theme.js) ---------- */ .snd-count { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 34px; flex-wrap: wrap; } .snd-count .cell { min-width: 86px; padding: 14px 10px 10px; border-radius: 14px; background: rgba(0, 39, 39, .55); border: 1px solid rgba(90, 186, 27, .45); backdrop-filter: blur(6px); text-align: center; } .snd-count .cell b { display: block; font-size: 2rem; line-height: 1.1; color: #5ABA1B; } .snd-count .cell span { font-size: .8rem; opacity: .85; } .snd-count .snd-greet { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 800; color: #5ABA1B; background: rgba(0, 39, 39, .55); border: 1px solid rgba(90, 186, 27, .45); border-radius: 999px; padding: 12px 30px; } .snd-hero-logo { height: clamp(54px, 8vw, 88px); width: auto; margin: 0 auto 18px; } /* ---------- Values band (injected on the home pages) ---------- */ .snd-values { position: relative; } .snd-values .grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; } .snd-value { background: #fff; border-radius: var(--radius, 16px); padding: 16px 12px 18px; text-align: center; box-shadow: var(--shadow, 0 6px 24px rgba(0, 39, 39, .08)); transition: transform .3s, box-shadow .3s; } .snd-value:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0, 39, 39, .18); } .snd-value img { width: 100%; max-width: 120px; margin: 0 auto 10px; border-radius: 10px; } .snd-value b { display: block; font-size: .95rem; } .snd-value[data-c="gold"] b { color: #7B5D21; } .snd-value[data-c="olive"] b { color: #607B4E; } .snd-value[data-c="magenta"] b { color: #961A4C; } .snd-value[data-c="lime"] b { color: #3F8A0F; } .snd-value[data-c="blue"] b { color: #0050AF; } .snd-value[data-c="violet"] b { color: #6565DF; } @media (max-width: 991px) { .snd-values .grid-6 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .snd-values .grid-6 { grid-template-columns: repeat(2, 1fr); } } /* ---------- Celebration strip ---------- */ .snd-strip { position: fixed; inset-inline: 0; top: 0; z-index: 1100; height: 46px; display: flex; align-items: center; justify-content: center; gap: 14px; color: #fff; background: #002727; overflow: hidden; } .snd-strip::before, .snd-strip::after { content: ''; position: absolute; inset-inline: 0; height: 6px; background: linear-gradient(135deg, #01894B 3px, transparent 0) 0 0 / 6px 6px repeat-x, linear-gradient(225deg, #01894B 3px, transparent 0) 0 0 / 6px 6px repeat-x; } .snd-strip::before { top: 0; transform: scaleY(-1); } .snd-strip::after { bottom: 0; } .snd-strip img { height: 26px; width: auto; } .snd-strip .snd-text { font-weight: 700; font-size: .95rem; white-space: nowrap; } .snd-strip .snd-text .lime { color: #5ABA1B; } .snd-close { position: absolute; inset-inline-end: 12px; background: none; border: 0; color: rgba(255, 255, 255, .7); font-size: 1rem; cursor: pointer; padding: 6px; } .snd-close:hover { color: #fff; } /* push the fixed navbar (and anchored scrolling) below the strip */ html.snd-strip-on { scroll-padding-top: 136px; } html.snd-strip-on .navbar { top: 46px; } html.snd-strip-on .hero { padding-top: 46px; } html.snd-strip-on .page-hero { padding-top: 216px; } @media (max-width: 640px) { .snd-strip .snd-text { font-size: .8rem; } .snd-strip img { height: 20px; } } /* ---------- Floating theme toggle (both themes) ---------- */ #themeToggle { position: fixed; bottom: 26px; inset-inline-start: 26px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px; font-family: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; color: #fff; background: linear-gradient(135deg, #002727, #01894B); box-shadow: 0 8px 24px rgba(0, 39, 39, .35); transition: transform .25s, box-shadow .25s; } html.snd #themeToggle { background: linear-gradient(135deg, #164076, #0b92a2); box-shadow: 0 8px 24px rgba(22, 64, 118, .35); } #themeToggle:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); } @media (max-width: 640px) { #themeToggle { bottom: 20px; inset-inline-start: 16px; padding: 9px 14px; font-size: .8rem; } }