/* 3a token layer. STRUCTURAL tokens are fixed constants (not customizer-editable). PALETTE tokens alias the app's existing customizer-fed vars so /customize still drives them. */ :root { /* structural — fixed 3a identity */ --fD: 'Bricolage Grotesque', system-ui, sans-serif; --fB: 'Figtree', system-ui, sans-serif; --fM: 'IBM Plex Mono', monospace; --lh: 1.55; --rad: 20px; --pillShadow: 0 12px 26px -12px rgba(21,120,92,.5); /* palette — alias 3a names onto the app's customizer-fed vars */ --panel: var(--surface); --text: var(--ink); --teal: var(--accent); --err: var(--warning); /* --sub, --hair, --tint, --onTeal, --accentText are config-fed by applyTheme() from the theme/themeDark palette (see themeVarMap in app.js). 3a fallbacks for reference — light: --sub:#4C574F --hair:#E3DFD4 --tint:#EEE9DF --onTeal:#F7F5EF --accentText:#15785c; dark: --sub:#B4BAB2 --hair:#26332E --tint:#1E2A25 --onTeal:#0E1714 --accentText:#8FBFB0. */ } [data-theme="dark"] { --pillShadow: 0 0 22px -10px rgba(95,184,158,.4); } /* ── SYSTEMIC 3a palette fallback ──────────────────────────────────────────── Pages WITH applyTheme() (Home via landing.js, the flow via app.js) set every palette var INLINE on — inline styles always win, so those pages are UNCHANGED by the blocks below. Pages WITHOUT applyTheme (payment-return, account) never get those inline vars, so their base palette would otherwise fall through to styles.css's OLD :root defaults and the 5 new tokens (--sub/--hair/--tint/--onTeal/--accentText) would be undefined. These static blocks define the FULL 3a palette (exact hex reused from app.js's default theme/themeDark) so those standalone pages render correct 3a colours. Selector note: styles.css ALSO ships `:root[data-theme="dark"]` (spec 0,2,0) and it is loaded AFTER this file, so an equal-specificity block here would lose the source-order tiebreak. `html:root[data-theme="…"]` (spec 0,2,1) beats styles.css's base-palette rules yet still loses to applyTheme's inline style — exactly the desired precedence. */ html:root[data-theme="light"] { --bg: #F7F5EF; --surface: #FFFFFF; --surface-alt: #EEE9DF; --line: #EDEAE1; --accent: #15785c; --accent-strong: #15785c; --accent-soft: #EEE9DF; --ink: #1E2A26; --muted: #8A9089; --warning: #B4342A; --sub: #4C574F; --hair: #E3DFD4; --tint: #EEE9DF; --onTeal: #F7F5EF; --accentText: #15785c; --startover-bg: #2A1A1A; --startover-text: #ffffff; --startover-icon: #ffffff; } /* Dark statics = the DEFAULT dark preset (teal-aura). Only reached when a page has no applyTheme AND no boot config; otherwise the boot script / applyTheme stamp the admin-chosen preset's colours inline on and win. */ html:root[data-theme="dark"] { --bg: #121614; --surface: #1A211E; --surface-alt: #212B27; --line: #222B27; --accent: #5FB89E; --accent-strong: #5FB89E; --accent-soft: #212B27; --ink: #E8E4D9; --muted: #88968E; --warning: #FF9B8A; --sub: #B4BAB2; --hair: #2A332E; --tint: #212B27; --onTeal: #0E1714; --accentText: #8FBFB0; --startover-bg: #2A1A1A; --startover-text: #ffffff; --startover-icon: #ffffff; } /* ── Dark preset background treatments ─────────────────────────────────────── Colours flow through config; TREATMENTS are CSS and stay here. The boot script on each public page stamps data-dark-preset="" on next to data-theme, which selects one of the blocks below. --bg-image is the single token the page-background rules consume instead of --bg. Its :root base is var(--bg), so light mode and the three FLAT presets (warm-charcoal / cool-graphite / deep-ink) paint the plain background colour and need no block of their own — --bg-image always resolves, so nothing can render bare. Only the two treated presets override it. Gradient stops and the glow colour are declared as tokens and consumed via var(), consistent with how the static palette blocks above carry hex. Both blocks are scoped to [data-theme="dark"], and this file is loaded only by the public pages (admin loads admin-panel.css), so neither treatment can leak into light mode or into /admin. */ :root { --bg-image: var(--bg); } /* Vertical wash. `fixed` pins the stops to the viewport → a stable viewport-height gradient. Without it the stops stretch across the entire scroll height and the effect washes out on a long page. */ html:root[data-theme="dark"][data-dark-preset="dusk-gradient"] { --bgTop: #21302A; --bgMid: #151E1A; --bgBottom: #0D1310; --bg-image: linear-gradient(180deg, var(--bgTop) 0%, var(--bgMid) 46%, var(--bgBottom) 100%) fixed; } /* Radial teal glow behind the hero. Deliberately NOT `fixed`: the glow is anchored to the top of the painting box and scrolls away with the document rather than following the viewport. Layered over the flat --bg, which is the final background layer. */ html:root[data-theme="dark"][data-dark-preset="teal-aura"] { --glowNear: rgba(95, 184, 158, .16); --glowMid: rgba(95, 184, 158, .045); --glowEdge: rgba(18, 22, 20, 0); --bg-image: radial-gradient(130% 78% at 50% -12%, var(--glowNear), var(--glowMid) 42%, var(--glowEdge) 66%) top center / 100% 900px no-repeat, var(--bg); } [lang="ar"] { --fD: 'Cairo', system-ui, sans-serif; --fB: 'Cairo', system-ui, sans-serif; --lh: 1.9; } /* 3a is a FLAT background. Kill the old neo-glass decorative blobs (body::before/::after) so the flat --bg shows through. Scoped here in tokens-3a.css, which ONLY the public pages load — admin loads admin-panel.css, not this file, so admin is unaffected. */ body::before, body::after { content: none !important; background: none !important; display: none !important; } /* 3a is a FLAT background. The neo-glass preset also paints a decorative grid/photo overlay via the .bg-grid element on every public page. Kill it here (public-only file — admin loads admin-panel.css, not this) so the flat --bg shows through. */ .bg-grid { display: none !important; } /* ── UN-SHADOW THE 3a PALETTE ON ────────────────────────────────────── applyTheme() stamps the config palette INLINE on , and the static blocks above cover the pages that have no applyTheme. Both target :root — but styles.css ALSO ships neo-glass palette overrides scoped to the BODY of every public page: :root[data-ui-preset="neo-glass"] body.landing-page, … (0,3,1) :root[data-ui-preset="neo-glass"][data-theme="light"] body.… (0,4,1) and the boot script ALWAYS sets data-ui-preset="neo-glass". A rule on beats an inherited value from no matter how the html value was set, so every component inside was resolving the LEGACY neo-glass palette, not 3a: --surface #1A211E -> rgba(15, 28, 33, .76) (translucent blue-grey) --accent #5FB89E -> #51dfb9 --ink #E8E4D9 -> #eaf5f2 That is why panels looked faintly "glassy" in dark mode: the chosen dark preset's surface colour never reached a single component. Verified on / and /services, both themes. `inherit` — not a hardcoded hex — is the fix on purpose: it makes take the value already has, so the palette stays CONFIG-DRIVEN (customizer + the dark preset picker keep working) rather than being frozen into this file. Only the keys that themeVarMap actually stamps are reset. Neo-glass extras it owns alone (--surface-muted/--shadow/--scrollbar-thumb/--warning-soft/--warning-line/ --hero-overlay-opacity) are deliberately left alone: `inherit` would resolve to nothing on and break them. Specificity: the `html` prefix lifts these to (0,4,2)/(0,3,2), just past the styles.css rules above. Public-only file — /admin never loads it. */ html:root[data-ui-preset="neo-glass"] body:is(.landing-page, [data-booking-mode="services"], [data-booking-mode="products"], .payment-return-page, .account-page), html:root[data-ui-preset="neo-glass"][data-theme="light"] body:is(.landing-page, [data-booking-mode="services"], [data-booking-mode="products"], .payment-return-page, .account-page), html:root[data-ui-preset="neo-glass"][data-theme="dark"] body:is(.landing-page, [data-booking-mode="services"], [data-booking-mode="products"], .payment-return-page, .account-page) { --surface: inherit; --surface-alt: inherit; --line: inherit; --ink: inherit; --muted: inherit; --accent: inherit; --accent-strong: inherit; --accent-soft: inherit; --warning: inherit; }