/** * Design tokens — Customer site theme ("Charged") * * The customer-facing brand layer (Frontend Stage 1, 2026-10-01). Loaded * by EC_Frontend only — never by HQ — and every semantic override is * additionally scoped to `body.ec-site` (layout.php), so HQ's own * appearance is untouched even if this file were ever loaded there. * * Direction: premium navy/near-black foundations, Essential Comps * cyan/teal as the single primary energy accent, warm Fire as a * secondary treatment (unchanged — colors.css/materials.css own it), * magenta as a controlled tertiary accent for special promotion * contexts only. The website carries the same visual DNA as the * marketing artwork at a deliberately lower intensity. * * The customer site is dark by design, not by OS preference — the * semantic tokens below replace colors.css's light defaults for every * descendant of `.ec-site`, whatever the visitor's colour scheme * (EC-DESIGN.md, Light & Dark, amended 2026-10-01). Values that locked * components resolve through (glass, elevation) deliberately mirror * those components' existing dark-mode values exactly, so the Design * Locks (Competition Card; Water/Fire) render precisely as they already * do under a dark OS preference. Fire's tokens are never redefined here * (EC-DESIGN-SYSTEM.md, Design Lock — "known dependency"). */ /* Manrope — self-hosted variable font (SIL OFL 1.1, assets/fonts/ manrope/OFL.txt). Latin + Latin Extended subsets only; the browser downloads a subset only once a glyph inside its range is used. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../../fonts/manrope/manrope-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../../fonts/manrope/manrope-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Raw palette — brand additions. Raw values only; components consume the semantic layer below, never these directly. */ :root { /* Navy foundations, deepest first */ --ec-color-navy-1000: #03070d; --ec-color-navy-950: #060c16; --ec-color-navy-900: #0a1424; --ec-color-navy-850: #0e1b2f; --ec-color-navy-800: #13233a; --ec-color-navy-700: #1c3150; --ec-color-navy-600: #2a4568; /* Energy — Essential Comps cyan/teal, the primary accent */ --ec-color-energy-100: #d8fbfd; --ec-color-energy-200: #a6f2f8; --ec-color-energy-300: #67e6f0; --ec-color-energy-400: #2cd5e3; --ec-color-energy-500: #10b6c8; --ec-color-energy-600: #0b8fa0; --ec-color-energy-700: #0a6878; /* Magenta — controlled tertiary accent (special promotion / Instant Win contexts only). Never a second primary. */ --ec-color-magenta-300: #f8a6e2; --ec-color-magenta-400: #f060c8; --ec-color-magenta-500: #d238a6; } .ec-site { /* Canvas + surfaces, back to front */ --ec-color-canvas: var(--ec-color-navy-950); --ec-color-surface: var(--ec-color-navy-900); --ec-color-surface-elevated: var(--ec-color-navy-850); --ec-color-surface-raised: var(--ec-color-navy-800); --ec-color-surface-sunken: var(--ec-color-navy-1000); /* Text */ --ec-color-text-primary: #edf5fb; --ec-color-text-secondary: #a5b7cb; --ec-color-text-tertiary: #7489a1; --ec-color-text-on-accent: #03141a; /* Borders — cool, low-contrast hairlines; strong for interactive edges */ --ec-color-border: rgba(150, 192, 228, 0.12); --ec-color-border-strong: rgba(150, 192, 228, 0.24); /* Accent — the one primary energy colour */ --ec-color-accent: var(--ec-color-energy-400); --ec-color-accent-strong: var(--ec-color-energy-300); --ec-color-accent-muted: var(--ec-color-energy-600); --ec-color-accent-soft: rgba(44, 213, 227, 0.12); /* Tertiary promo accent + warm secondary (Fire's raw palette, read-only) */ --ec-color-promo: var(--ec-color-magenta-400); --ec-color-promo-soft: rgba(240, 96, 200, 0.14); --ec-color-warm: var(--ec-color-fire-300); --ec-color-warm-soft: rgba(226, 113, 47, 0.16); /* Glow — light emitted by energy, used sparingly (state, focus, active indicator), never as ambient decoration on every surface. */ --ec-glow-accent-sm: 0 0 10px rgba(44, 213, 227, 0.32); --ec-glow-accent-md: 0 0 2px rgba(44, 213, 227, 0.55), 0 0 22px rgba(44, 213, 227, 0.22); --ec-charge-line: linear-gradient(90deg, rgba(44, 213, 227, 0) 0%, rgba(44, 213, 227, 0.5) 50%, rgba(44, 213, 227, 0) 100%); /* Focus — one ring everywhere: a canvas-coloured gap, then accent */ --ec-focus-ring: 0 0 0 2px var(--ec-color-canvas), 0 0 0 4px var(--ec-color-accent); /* Elevation — mirrors elevation.css's dark values exactly (see header) */ --ec-elevation-1: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px rgba(0, 0, 0, 0.28); --ec-elevation-2: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 4px 8px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.24); --ec-elevation-3: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 12px 24px rgba(0, 0, 0, 0.36), 0 4px 8px rgba(0, 0, 0, 0.28); /* Glass (neutral) — mirrors glass.css's dark value exactly */ --ec-glass-surface: rgba(15, 23, 42, 0.72); --ec-glass-border: rgba(255, 255, 255, 0.08); /* Typography refinements — the size scale itself is unchanged (typography.css, fixed at every breakpoint) */ --ec-letter-spacing-tight: -0.02em; --ec-letter-spacing-normal: 0; --ec-letter-spacing-wide: 0.08em; /* Layout — matches .ec-section (1440px max, 16px/24px gutters) so the header, sections and footer share one edge */ --ec-container-max: 1440px; --ec-gutter: var(--ec-space-4); --ec-header-height: 4rem; /* 64px */ /* Motion — overlays (drawers, menus) enter decelerating, exit accelerating; durations still come from timing.css */ --ec-ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --ec-ease-exit: cubic-bezier(0.4, 0, 1, 1); } @media (min-width: 640px) { .ec-site { --ec-gutter: var(--ec-space-5); } } @media (min-width: 1024px) { .ec-site { --ec-header-height: 4.5rem; /* 72px */ } } /* Re-resolution of materials.css's theme-dependent chains. A custom property whose value is var(--other) is resolved where it's declared — these are declared at :root, so at :root they captured colors.css/elevation.css's *light* values, and descendants inherit that already-resolved result regardless of the overrides above. Re-declaring the identical expressions on .ec-site makes them resolve against the site's dark values instead — the same result they already produce under a dark OS preference. Expressions are copied verbatim from materials.css and must stay in step with it; the alias layer's neutral entries are repeated for the same reason (`:root, [data-material='neutral']` in materials.css). */ .ec-site { --ec-material-neutral-color: var(--ec-color-text-primary); --ec-material-neutral-color-strong: var(--ec-color-text-primary); --ec-material-neutral-elevation: var(--ec-elevation-1); --ec-material-water-elevation: inset 0 1px 0 0 rgba(255, 255, 255, 0.7), inset 0 -1px 1px 0 rgba(10, 60, 68, 0.12), 0 6px 16px rgba(18, 179, 191, 0.16), var(--ec-elevation-1); --ec-material-fire-elevation: inset 0 2px 4px 0 rgba(255, 224, 196, 0.4), 0 5px 12px rgba(226, 113, 47, 0.1), var(--ec-elevation-2); --ec-material-color: var(--ec-material-neutral-color); --ec-material-color-strong: var(--ec-material-neutral-color-strong); --ec-material-elevation: var(--ec-material-neutral-elevation); } /* Material glass — mirrors glass.css's dark values exactly, so the locked Competition Card's Draw Badge/+10 glass is unchanged from its existing dark rendering. */ .ec-site [data-material='water'] { --ec-glass-surface: rgba(15, 55, 60, 0.5); --ec-glass-border: rgba(255, 255, 255, 0.24); } .ec-site [data-material='fire'] { --ec-glass-surface: rgba(74, 42, 22, 0.6); --ec-glass-border: rgba(255, 180, 120, 0.22); }