/* ============================================================================ ZipScore design system — appearance is a sticky USER choice (#1845). Ported from the Claude Design handoff (ZipScore Redesign.html). Two surfaces, selected by the user's theme preference (resolved once in scoring/theme_service.py and applied to via the base template). The default is LIGHT for everyone: - (default / light) Legacy light surface under the dark XGrab topbar. - body.dark XGrab Motion dark shell (#0a0d14 canvas, #6694fa accent, translucent cards, mono tracked labels). The former high-contrast ``body.sheet-mode`` score-sheet surface was retired in #1845 (folded into light/dark) — it was never applied to any page. ========================================================================= */ :root { /* Declare that the app handles BOTH schemes itself so the browser's "auto dark mode for web contents" (Chrome force-dark) and OS color-scheme heuristics don't re-tint the page on top of our own light/dark shell (#1930). Declaring `light dark` (not just `light`) is what makes force-dark back off even when the OS preference is dark. */ color-scheme: light dark; /* ---- dark shell (XGrab Motion brand) ---- */ --bg: #0a0d14; --glow: rgba(36, 56, 107, 0.7); --accent: #6694fa; --accent-strong: #4f7ef0; --d-text: #ffffff; --d-mid: rgba(255, 255, 255, 0.6); --d-dim: rgba(255, 255, 255, 0.42); --d-faint: rgba(255, 255, 255, 0.3); --d-card: rgba(255, 255, 255, 0.04); --d-card-2: rgba(255, 255, 255, 0.06); --d-field: rgba(255, 255, 255, 0.03); --d-stroke: rgba(255, 255, 255, 0.08); --d-stroke-soft: rgba(255, 255, 255, 0.05); /* status (shared vocabulary, Motion sync pills) */ --green: #30d158; --amber: #ff9f0a; --red: #ff453a; --blue: #0a84ff; /* ---- light score surface (sunlight, max contrast) ---- */ --paper: #eef1f6; --sheet: #ffffff; --ink: #0a1020; --ink-mid: #44506a; --ink-dim: #6b7689; --line: #d3dae6; --line-strong: #aab4c6; --accent-ink: #1f51c8; /* AA on white */ --good: #15803d; --good-bg: #e7f6ec; --good-line: #5cb277; --bad: #c81e1e; --bad-bg: #fdebeb; --bad-line: #e88; --warn: #8a5a00; --warn-bg: #fbf1d4; --warn-line: #d8b25a; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --rounded: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; --sans: system-ui, -apple-system, "Segoe UI", sans-serif; /* ---- semantic CONTENT tokens — flip with the user's theme (#1930) ---- The chrome (.topbar / nav / account menu) is ALWAYS dark and keeps using the raw --d-* tokens above. Everything in the content area below the topbar must read on whichever surface the user chose, so it uses these tokens instead. Defined LIGHT here; the body.dark block overrides them to the exact --d-* values so the dark shell is byte-for-byte unchanged. This replaces the broken pattern where "ported screen" components hard-wired the white --d-* tokens in bare selectors and only looked right under a forced `body_class=dark` (retired in #1845 → white-on-white in light). */ --surface: #ffffff; /* card / panel fill (dark: --d-card) */ --surface-2: #f2f5fa; /* raised / hover / field-on-card (dark: --d-card-2) */ --field-bg: #fafbfc; /* input + translucent field (dark: --d-field) */ --hover: rgba(15, 52, 96, 0.06); /* generic hover wash (dark: white 6%) */ --stroke: #d3dae6; /* card / divider border (dark: --d-stroke) */ --stroke-soft: #e8ecf0; /* faint inner divider (dark: --d-stroke-soft) */ --text: #1a1a2e; /* primary body text (dark: --d-text) */ --text-mid: #44506a; /* secondary text (dark: --d-mid) */ --text-dim: #6b7689; /* tertiary / muted text (dark: --d-dim) */ --text-faint: #8793a6; /* labels / hints (AA on white) (dark: --d-faint) */ --accent-text: #1f51c8; /* accent used AS TEXT (AA on white) (dark: --accent) */ /* status text on a content surface — AA-on-white by default, brightened for dark */ --st-ok: #15803d; /* (dark: #6ee094) */ --st-bad: #c81e1e; /* (dark: #ff8079) */ --st-warn: #8a5a00; /* (dark: #ffc24d) */ --st-info: #1f51c8; /* (dark: #8fb4ff) */ /* Competition pipeline round cards + gender/mode tags (#1930). These surface in inline styles in competition_detail.html, so they must flip with the theme too. Light keeps the existing pastel palette; dark uses translucent Motion tints over the dark canvas. */ --round-bg: #fafafa; /* regular round card body */ --round-head: #f1f5f9; /* regular round card header */ --finals-bg: #f5f3ff; /* finals round card body */ --finals-head: #ede9fe; /* finals round card header */ --finals-line: #c7d2fe; /* finals card border */ --tag-women: #fce4ec; /* Women gender pill bg */ --tag-women-ink: #9d2463; /* Women gender pill text */ --tag-men: #e3f2fd; /* Men gender pill bg */ --tag-men-ink: #1e40af; /* Men gender pill text */ --tag-info: #dbeafe; /* gender/discipline pill */ --tag-neutral: #e8eaf6; /* score-mode / discipline pill */ --tag-warn-bg: #fef3c7; /* "Top N advance" badge */ --tag-warn-line: #fcd34d; } /* Dark shell: flip the semantic content tokens to the XGrab Motion values. The raw --d-* tokens are unchanged; these just make the content tokens resolve to the same dark palette, so every ported component renders exactly as it did when the page forced `body_class=dark` (#1930). */ body.dark { color-scheme: dark; --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.06); --field-bg: rgba(255, 255, 255, 0.03); --hover: rgba(255, 255, 255, 0.06); --stroke: rgba(255, 255, 255, 0.08); --stroke-soft: rgba(255, 255, 255, 0.05); --text: #ffffff; --text-mid: rgba(255, 255, 255, 0.6); --text-dim: rgba(255, 255, 255, 0.42); --text-faint: rgba(255, 255, 255, 0.3); --accent-text: var(--accent); --st-ok: #6ee094; --st-bad: #ff8079; --st-warn: #ffc24d; --st-info: #8fb4ff; --round-bg: rgba(255, 255, 255, 0.03); --round-head: rgba(255, 255, 255, 0.06); --finals-bg: rgba(102, 148, 250, 0.10); --finals-head: rgba(102, 148, 250, 0.18); --finals-line: rgba(102, 148, 250, 0.45); --tag-women: rgba(244, 143, 177, 0.18); --tag-women-ink: #f7a8cb; --tag-men: rgba(102, 148, 250, 0.20); --tag-men-ink: #9bc0ff; --tag-info: rgba(102, 148, 250, 0.20); --tag-neutral: rgba(255, 255, 255, 0.08); --tag-warn-bg: rgba(255, 159, 10, 0.16); --tag-warn-line: rgba(255, 159, 10, 0.45); } /* ===================== reset & base (legacy light default) ===================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: var(--sans); background: #f4f6f9; color: #1a1a2e; min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ===================== shared atoms ===================== */ .mono { font-family: var(--mono); } .tnum { font-variant-numeric: tabular-nums; } .logo { font-family: var(--rounded); font-weight: 800; line-height: 1; letter-spacing: -0.015em; } .logo .zip { color: var(--accent); } /* The "Score" half flips with the theme so it reads on the login/brand panel, which sits on the content surface. In the always-dark topbar it is forced white again below (.topbar .logo .score). (#1930) */ .logo .score { color: var(--text); } .ulabel { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); } /* status pill — Motion sync-pill vocabulary, repurposed as scoring status */ .pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; } .pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .pill.done { color: var(--st-ok); background: rgba(48, 209, 88, 0.12); } .pill.prog { color: var(--st-warn); background: rgba(255, 159, 10, 0.13); } .pill.idle { color: var(--text-dim); background: var(--field-bg); } .pill.live { color: var(--st-info); background: rgba(102, 148, 250, 0.14); } .pill.fail { color: var(--st-bad); background: rgba(255, 69, 58, 0.13); } .ping { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; } .ping.amber { background: var(--amber); } .ping.rec { background: var(--red); animation: ping-pulse 1.6s ease-in-out infinite; } @keyframes ping-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(255, 69, 58, 0); } } .chip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; background: var(--surface-2); border: 1px solid var(--stroke); border-radius: 999px; padding: 3px 9px; color: var(--text-mid); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .crumb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent-text); text-decoration: none; display: inline-block; margin-bottom: 8px; white-space: nowrap; } .crumb:hover { text-decoration: underline; } /* ===================== topbar (dark, on every surface) ===================== */ .topbar { display: flex; align-items: center; gap: 18px; padding: 8px 22px; min-height: 58px; border-bottom: 1px solid var(--d-stroke); background: rgba(10, 13, 20, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 30; flex-wrap: wrap; } .topbar .brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; } .topbar .logo { font-size: 21px; } /* Topbar is always dark, so keep the "Score" half white here regardless of theme. */ .topbar .logo .score { color: var(--d-text); } .topbar .tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.32em; color: var(--d-faint); text-transform: uppercase; } .topnav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } /* The account/status toggle lives in .topbar .right, not .topnav, so it must be named here explicitly — otherwise it falls back to bare