/* ============================================================ PACY — DESIGN TOKENS ------------------------------------------------------------ The shell is stadium-at-night; content sits on pale surfaces. That inversion is deliberate: scores read fastest on light panels, while dark chrome keeps the eye off navigation. ============================================================ */ :root { /* --- brand ------------------------------------------------ */ --midnight: #071B33; --deep-navy: #0A2A52; --med-blue: #174A7E; --electric: #2563EB; --soft-white: #F7FAFF; --white: #FFFFFF; /* Derived steps. Kept as explicit values rather than computed so every surface in the app is a named decision. */ --navy-900: #04101F; --navy-800: var(--midnight); --navy-700: #08223F; --navy-600: var(--deep-navy); --navy-500: #10375F; --navy-400: var(--med-blue); --navy-300: #2A6099; --blue-600: #1D4FD8; --blue-500: var(--electric); --blue-400: #4E7FF3; --blue-300: #7FA5F8; --blue-100: #DCE7FD; --blue-050: #EEF3FE; /* --- semantic surfaces ------------------------------------ */ /* The shell is the app frame — header, footer, page background and the backdrop the scores float on. In LIGHT theme it is light, so switching themes actually whitens the whole page; the dark values live in the [data-theme="dark"] block. Anything painting a shell surface must use these tokens (or --shell-strong / --shell-hover) rather than a raw navy, or it will stay dark in light theme. */ --shell: var(--soft-white); --shell-raised: var(--white); --shell-strong: var(--white); /* solid header / footer bars */ --shell-line: #E2E9F5; --shell-hover: rgba(11, 27, 48, .05); /* subtle overlay on the shell */ --shell-hover-2: rgba(11, 27, 48, .09); /* stronger overlay / active */ --surface: var(--white); --surface-sunk: var(--soft-white); --surface-line: #E2E9F5; --surface-line-strong: #CBD7EA; /* --- text ------------------------------------------------- */ --ink: #0B1B30; --ink-mid: #48607F; --ink-soft: #6B819D; --ink-faint: #93A4BC; /* On a light shell, "on-shell" text is simply the page ink. */ --on-shell: var(--ink); --on-shell-mid: var(--ink-mid); --on-shell-soft: var(--ink-soft); /* Text for surfaces that are ALWAYS dark regardless of theme — the news masthead, the desk panel, the dark feature cards. These never flip, so their text cannot use --on-shell (which now follows the theme). */ --on-dark: #EAF1FB; --on-dark-mid: #9DB2CE; --on-dark-soft: #6D849F; /* --- status ----------------------------------------------- */ --live: #E5352B; --live-soft: #FDECEA; --upcoming: var(--med-blue); --upcoming-soft:#EAF0F9; --finished: #52708F; --finished-soft:#EDF1F7; --warn: #B25E00; --warn-soft: #FFF3E4; --danger: #B3261E; --good: #0E7C55; --good-soft: #E6F5EF; /* --- typography ------------------------------------------- */ --font-display: "Sora", "Manrope", system-ui, -apple-system, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* Fluid scale. Floors respect the brief's minimums: body never below 16px, metadata never below 14px. */ --t-score: clamp(2.5rem, 1.6rem + 3.4vw, 4rem); /* 40 → 64 */ --t-score-sm: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); --t-h1: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); --t-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); /* 24 → 36 */ --t-h3: clamp(1.125rem, 1rem + .5vw, 1.375rem); --t-team: clamp(1.125rem, 1rem + .6vw, 1.375rem); /* 18 → 22 */ --t-body: 1rem; /* 16 */ --t-meta: .875rem; /* 14 */ --t-micro: .75rem; /* uppercase labels only, never prose */ --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.55; --track-tight: -.02em; --track-label: .09em; /* --- space ------------------------------------------------ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-11: 96px; /* --- shape ------------------------------------------------ */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* Minimum interactive size (WCAG 2.2 target size). */ --tap: 44px; /* --- elevation -------------------------------------------- */ --sh-1: 0 1px 2px rgba(7, 27, 51, .06), 0 1px 3px rgba(7, 27, 51, .04); --sh-2: 0 2px 4px rgba(7, 27, 51, .05), 0 6px 16px rgba(7, 27, 51, .07); --sh-3: 0 4px 8px rgba(7, 27, 51, .06), 0 16px 40px rgba(7, 27, 51, .12); --sh-shell: 0 8px 32px rgba(4, 16, 31, .45); /* --- motion ----------------------------------------------- */ /* Lightning is two-toned: an electric blue core with a warm amber edge. A single blue reads as a UI outline; the warm second tone is what makes it read as a strike. */ --bolt-core: #7FC4FF; --bolt-hot: #FFB020; --bolt-deep: var(--electric); --ease-out: cubic-bezier(.22, .8, .3, 1); --ease-in-out: cubic-bezier(.6, 0, .3, 1); --ease-spring: cubic-bezier(.2, .9, .3, 1.35); --d-fast: 140ms; --d-med: 240ms; --d-slow: 420ms; /* Lightning Reveal total budget — brief specifies 700–1000ms. */ --d-reveal: 900ms; --d-pulse: 620ms; /* --- layout ----------------------------------------------- */ --page-max: 1360px; --content-max: 1080px; --header-h: 64px; --controls-h: 116px; --bottomnav-h: 62px; } /* ============================================================ THE FACET MOTIF ------------------------------------------------------------ The logo is a square cut into triangular planes at different blue values. Rather than reproduce it literally, the planes become a surface treatment: two hard-edged diagonal gradients that read as folded geometry rather than a soft glow. Used only on: page headers, skeletons, selected nav, empty states, and card detail edges. Not a general background. ============================================================ */ .facet { position: relative; isolation: isolate; background-color: var(--shell); background-image: linear-gradient(148deg, rgba(37, 99, 235, .30) 0%, rgba(37, 99, 235, .30) 26%, transparent 26.4%), linear-gradient(214deg, rgba(23, 74, 126, .55) 0%, rgba(23, 74, 126, .55) 42%, transparent 42.4%), linear-gradient(28deg, rgba(10, 42, 82, .70) 0%, rgba(10, 42, 82, .70) 34%, transparent 34.4%); } /* A single lightning bolt cut, matching the logo's negative space. Applied as a mask-friendly clip path on decorative elements. */ .bolt-clip { clip-path: polygon(58% 0%, 22% 52%, 46% 52%, 34% 100%, 78% 42%, 52% 42%); } /* ============================================================ DARK CONTENT THEME Content surfaces invert; the shell is already dark. ============================================================ */ [data-theme="dark"] { /* The shell returns to navy in dark theme; every shell token flips back so the frame, overlays and on-shell text stay legible on a dark bar. */ --shell: var(--navy-800); --shell-raised: var(--navy-700); --shell-strong: var(--navy-900); --shell-line: rgba(255, 255, 255, .10); --shell-hover: rgba(255, 255, 255, .07); --shell-hover-2: rgba(255, 255, 255, .12); --on-shell: #EAF1FB; --on-shell-mid: #9DB2CE; --on-shell-soft: #6D849F; --surface: #0D2340; --surface-sunk: #0A1C33; --surface-line: rgba(255, 255, 255, .10); --surface-line-strong: rgba(255, 255, 255, .18); --ink: #EAF1FB; --ink-mid: #A9BDD8; --ink-soft: #8299B7; --ink-faint: #62789A; --live-soft: rgba(229, 53, 43, .16); --upcoming-soft: rgba(23, 74, 126, .34); --finished-soft: rgba(82, 112, 143, .20); --warn-soft: rgba(178, 94, 0, .20); --good-soft: rgba(14, 124, 85, .20); --blue-050: rgba(37, 99, 235, .14); --blue-100: rgba(37, 99, 235, .26); --sh-1: 0 1px 2px rgba(0, 0, 0, .35); --sh-2: 0 2px 6px rgba(0, 0, 0, .38), 0 8px 22px rgba(0, 0, 0, .30); --sh-3: 0 8px 20px rgba(0, 0, 0, .45), 0 24px 60px rgba(0, 0, 0, .40); }