/* px-lms design system. Lifted from the approved concept (docs/mockup-americas-number-1-hater.html) and turned into tokens, so a second promotion re-themes by overriding the custom properties in promotion.json rather than forking this file. */ :root { /* Tokens are named for the JOB they do, not the colour they happen to be. The three colour-named tokens at the bottom are aliases kept so the ~110 call sites below — and both shipped promotion.json theme blocks — did not all have to change in one commit. New code should use the semantic names. ROLES, and why they are three different hues rather than one: accent — brand chrome. The red names the product; it never names a state. positive — alive / survived / won / current round / your pick / verified. danger — eliminated / busted / burned / locked / error / warning. Red cannot carry both "brand" and "alive": if it did, an alive entrant and an eliminated one would render in the same colour in the leaderboard. And danger cannot be red either — the brand red against the ember red this file used to use measures 1.34:1, i.e. the same colour to the eye, so a red danger state would be indistinguishable from a red button. Amber is. */ /* Brand. #E93A3A is the operator's stated primary and is not up for nudging; everything else here moved to make it work. */ --accent: #E93A3A; --accent-bright: #FF5A5A; --accent-rgb: 233 58 58; /* Label on a filled accent surface. Black is 5.13:1 there; every white, #FFFFFF included, is under 4.5. */ --on-accent: #000000; /* Same story on a filled positive surface, at 9.70:1. */ --on-positive: #000000; /* Positive states keep the mint family they already had. */ --positive: #00C896; --positive-bright: #00E5AA; --positive-rgb: 0 200 150; /* Danger/warning. Already in this file as an unnamed literal at .result-warn. */ --danger: #FFB020; --danger-rgb: 255 176 32; --warning: var(--danger); /* Grounds. #000000 is the operator's stated secondary, and also the only ground the brand red clears AA on: on the old #0A1520 navy it measured 4.50:1, a hair under. On black it is 5.13:1. The raised surfaces are near-black rather than black so a panel still reads as lifted. */ --bg-deep: #000000; --bg-panel: #0B0B0B; --bg-panel-2: #151515; /* The ground as a channel triple, for the translucent header/menu scrims. */ --bg-deep-rgb: 0 0 0; --white: #F5F7FA; --muted: #8A94A6; /* 0.08 over the old navy read as 1.23:1; over black the same 0.08 is 1.14:1, which loses the hairline. 0.12 puts it back at 1.27:1. */ --line: rgba(255, 255, 255, 0.12); --radius: 10px; --wrap: 1180px; /* Aliases. --navy and --teal-light are gone: nothing referenced either. */ --teal: var(--accent); --teal-alt: var(--accent-bright); --ember: var(--danger); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg-deep); color: var(--white); font-family: 'Inter', system-ui, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } .display { font-family: 'Anton', sans-serif; font-weight: 400; letter-spacing: 0.01em; } a { color: inherit; text-decoration: none; } [hidden] { display: none !important; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; } :where(button, a, input, [tabindex]):focus-visible { outline: 2px solid var(--teal-alt); outline-offset: 2px; } /* ── Nav ──────────────────────────────────────────────────────────────── */ header { position: sticky; top: 0; z-index: 50; background: rgb(var(--bg-deep-rgb) / 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 32px; max-width: var(--wrap); margin: 0 auto; } /* Only the header's nav, because `.admin-tabs` is a