/* ═══════════════════════════════════════════════════════════════════════════════ Seasonal themes — the customer pages' colour layer. See README «Seasonal themes». Each page owns its normal look in its own :root. This file only adds overrides SCOPED under html[data-theme=""], so with no theme active every rule here is inert. The attribute is set by the inline bootstrap in each page's before first paint (that is what stops a themed page flashing the normal look on a repeat visit) and confirmed by /theme.js against /api/theme. Adding a theme = one block at the bottom of this file + one registry entry in /theme.js. A theme changes colour, never layout: no size, spacing or typography of the pages lives here. The whole surface is tokens — page, cards, borders, text, glass, shadows, the gift-card face — so a theme block that sets every token is a complete look, dark or light. ═══════════════════════════════════════════════════════════════════════════════ */ /* ── The greeting banner. Theme-agnostic: every colour in it is a token the theme sets: --nt-bg (panel), --nt-border, --nt-ink / --nt-ink-rgb (text and the dismiss button), --nt-accent (the hashtag), --nt-band (the woven edge tile), --nt-diamonds (the divider row). ── */ #themeStrip { display: none; } /* Reserve the height as soon as a theme is on, before the script fills it, so nothing shifts. BOTH hide conditions are folded into this ONE selector deliberately. Written the obvious way — a later `html[data-strip="off"] #themeStrip, body.in-funnel #themeStrip { display: none }` — they are dead on arrival: those selectors score (1,1,1) against this rule's (1,2,1), so source order never gets a say, the إخفاء button does nothing and the banner rides through the booking wizard. Verified in Chrome before the fix: dismissed and in-funnel both computed display:block. When a condition fails this rule simply stops matching and the base display:none above wins. */ html[data-theme]:not([data-theme=""]):not([data-strip="off"]) body:not(.in-funnel) #themeStrip { display: block; min-height: 96px; margin: 0 0 14px; } /* On /menu the slot is a direct child of , outside the page's padded wrap: give it the page gutter itself. Nested slots (inside a hero or a card wrap) inherit their container's. */ body > #themeStrip { padding: 16px 16px 0; margin: 0; } .nt-strip { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; max-width: 480px; margin: 0 auto; padding: 18px 52px 14px; background: var(--nt-bg, var(--gold-dark)); color: var(--nt-ink, #fff); border: 1px solid var(--nt-border, transparent); border-radius: 14px; box-shadow: 0 4px 14px var(--shadow); overflow: hidden; font-family: inherit; } /* The woven Sadu band along the top and bottom edges — the guideline's frame, as one tile. */ .nt-strip::before, .nt-strip::after { content: ''; position: absolute; left: 0; right: 0; height: 8px; background: var(--nt-band, repeating-linear-gradient(90deg, var(--gold) 0 10px, var(--gold-light) 10px 14px, var(--gold) 14px 24px, transparent 24px 28px)) center / auto 8px repeat-x; } .nt-strip::before { top: 0; } .nt-strip::after { bottom: 0; } .nt-emblem { display: flex; align-items: center; justify-content: center; flex: none; color: var(--nt-accent, var(--gold-light)); } /* The official lockup is shown exactly as delivered: no filter, no colour, its own proportions. */ .nt-logo { display: block; height: 44px; width: auto; max-width: 100%; } .nt-diamonds { width: 88px; height: 16px; } .nt-text { text-align: center; min-width: 0; } .nt-slogan { font-weight: 800; font-size: 15px; line-height: 1.3; } .nt-slogan:empty { display: none; } .nt-sub { font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--nt-accent, var(--nt-ink, #fff)); opacity: .95; } .nt-x { position: absolute; top: 50%; inset-inline-start: 10px; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; padding: 0; background: rgba(var(--nt-ink-rgb, 255,255,255),.1); color: var(--nt-ink, #fff); cursor: pointer; display: flex; align-items: center; justify-content: center; } .nt-x .nico { width: 16px; height: 16px; } .nt-strip .nico { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ═══ snd2026 — Saudi National Day 2026, «عزّنا بطبعنا» ═══════════════════════════ The identity is a deep-green world: the foundation green #00343a as the ground, the brand green #00894a for fills and lines, the bright green #06a72c for accents and type, white for text. So this is a dark theme: page, cards, borders and glass all move to the greens, the gold accents become the two greens, and the ink turns light. Nothing keeps a gold value. */ html[data-theme="snd2026"] { --gold: #00894a; /* brand green: filled buttons, borders, icons */ --gold-light: #06a72c; /* bright green: gradient sheen, progress fills */ --gold-dark: #06a72c; /* bright green: accent type on the dark ground, gradient start */ --gold-rgb: 0,137,74; --gold-dark-rgb: 6,167,44; --on-gold: #fff; /* white on green, as the identity sets its own type */ --on-accent: #fff; /* ink on a flat brand-green fill */ --cream: #00272c; /* page */ --cream2: #0b434a; /* pills, inputs, tracks */ --cream3: #1b5a60; /* borders */ --white: #00363c; /* cards */ --white2: #00363c; /* the home page's warm-white hover and featured rows */ --cream-rgb: 0,39,44; --text: #f2f7f4; --text2: #c9dcd3; --muted: #8fb5a7; --muted2: #6d978a; --ink: #f2f7f4; --glass-rgb: 0,54,60; /* the floating top bar and its menu */ --shadow: rgba(0,0,0,.35); /* Dark-to-mid, like the gold face it replaces (#2a2118 → #6b5636). Run it to the bright green and the white code, the copy button and the watermark all wash out at the far corner. */ --gift-card: linear-gradient(135deg, #00272c 0%, #00343a 55%, #00894a 100%); --muted-deep: var(--muted); /* index.html's chip and blog-subtitle ink */ --muted-soft: var(--muted2); /* index.html's SEO frame */ --muted-mid: var(--muted2); /* index.html's SEO paragraph */ --ok: #3ddc84; /* readable on the dark card; #1f7a44 disappears into it */ --bad: #ff9a8a; --star-empty: #14484e; /* an unearned star must read as empty, not as filled */ --nt-bg: #00343a; --nt-ink: #fff; --nt-ink-rgb: 255,255,255; --nt-border: rgba(6,167,44,.35); --nt-accent: #06a72c; --nt-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M12 0l4 4-4 4-4-4z' fill='%2306a72c'/%3E%3Cpath d='M12 2l2 2-2 2-2-2z' fill='%2300343a'/%3E%3Cpath d='M0 0l3 4-3 4zM24 0l-3 4 3 4z' fill='%2300894a'/%3E%3C/svg%3E"); --nt-diamonds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='12' viewBox='0 0 88 12'%3E%3Cpath fill='%2300894a' d='M8 3l3 3-3 3-3-3zM26 3l3 3-3 3-3-3zM62 3l3 3-3 3-3-3zM80 3l3 3-3 3-3-3z'/%3E%3Cpath fill='%2306a72c' d='M44 1l5 5-5 5-5-5z'/%3E%3C/svg%3E"); } /* The guideline's faint drafting grid on the deep-green ground. */ html[data-theme="snd2026"] body { background-color: var(--cream); background-image: linear-gradient(rgba(6,167,44,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(6,167,44,.07) 1px, transparent 1px); background-size: 40px 40px; } /* The hairline dividers become the identity's row of diamonds, drawn over the same 2px box. */ html[data-theme="snd2026"] .divider, html[data-theme="snd2026"] .lc-divider { position: relative; background: transparent; } html[data-theme="snd2026"] .divider::after, html[data-theme="snd2026"] .lc-divider::after { content: ''; position: absolute; top: 50%; left: 50%; width: 88px; height: 12px; margin: -6px 0 0 -44px; background: var(--nt-diamonds) center / contain no-repeat; } /* The home page's pastel icon tiles are one-off tints with no token; on the dark ground they become a green-glass tile and the icons keep their own colour. */ html[data-theme="snd2026"] .action-btn .btn-icon { background: rgba(6,167,44,.14); } /* The floating top bar's glass has no visible edge on a dark page; give it a green one. */ html[data-theme="snd2026"] .apt-topbar, html[data-theme="snd2026"] .apt-menu { border-color: rgba(6,167,44,.3); } /* The switch knob is the card colour, which on a dark theme is darker than its own track: the control stops looking like a switch. It stays light here, as it is on the gold look. */ html[data-theme="snd2026"] .apt-switch span { background: #dff0e6; }