/* Arcade scoreboard styling for the static pages (privacy / terms / support). These files are served straight out of public/ — no Angular, no Tailwind, no spartan — so the design system is restated here by hand. Keep the token VALUES in sync with src/styles.css and the motifs in sync with docs/ui-system.md §5 (J1 jumbotron, J2 hero numeral, the three type voices). Fonts are self-hosted from public/fonts/ rather than a webfont CDN: the app is offline-safe for the store builds and these pages ship inside the native WebView shells, where a remote font request would simply fail. */ /* ── Type voices (ui-system.md §3) ───────────────────────────────────────── */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/anton-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/barlow-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/barlow-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); } /* ── Tokens (mirror of src/styles.css :root) ─────────────────────────────── */ :root { color-scheme: light; --background: #edf4fa; --foreground: #0d1b2a; --card: #ffffff; --border: #d7e4ef; --muted: #e9f1f8; --muted-foreground: #5b7282; --primary: #2c6e9b; --gold: #9a7a12; --ice-line: rgba(13, 27, 42, 0.035); --font-sans: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Anton', 'Arial Black', Impact, sans-serif; --font-condensed: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; } /* Theme: the app stores the user's choice under hockey-quiz-theme-v1 and the inline script stamps data-theme from it, so a reader who picked dark in the game keeps dark here. With no stored choice the OS decides. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --background: #0d1b2a; --foreground: #e9f2f8; --card: #14263a; --border: #23405b; --muted: #182c42; --muted-foreground: #93aabe; --primary: #4fa0ce; --gold: #e3b341; --ice-line: rgba(140, 190, 230, 0.05); } } :root[data-theme='dark'] { color-scheme: dark; --background: #0d1b2a; --foreground: #e9f2f8; --card: #14263a; --border: #23405b; --muted: #182c42; --muted-foreground: #93aabe; --primary: #4fa0ce; --gold: #e3b341; --ice-line: rgba(140, 190, 230, 0.05); } /* ── Page ground: the rink ice, with the scoreboard ice-lines ────────────── */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; background-color: var(--background); background-image: repeating-linear-gradient(180deg, var(--ice-line) 0 1px, transparent 1px 30px); color: var(--foreground); -webkit-font-smoothing: antialiased; } /* J1 — the jumbotron. Same construction as the app: a dark dot-matrix band that re-declares the palette locally, so anything inside reads correctly against it in BOTH themes without a variant of its own. */ .band { --foreground: #e9f2f8; --muted-foreground: #9db4c6; --primary: #6fc3e8; --border: #2a4a66; --gold: #e3b341; color: var(--foreground); background-color: #0d1b2a; background-image: radial-gradient(rgba(111, 195, 232, 0.14) 1px, transparent 1.2px); background-size: 9px 9px; border-bottom: 1px solid var(--border); } :root[data-theme='dark'] .band { background-color: #07121d; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .band { background-color: #07121d; } } /* J1b — the lit rail along the bottom of a band. */ .band--rail { box-shadow: inset 0 -3px 0 0 var(--primary); } .wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; } /* ── Arena chrome: the site header, matching the app's ───────────────────── */ .masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 13px; padding-bottom: 13px; } .wordmark { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; line-height: 1; letter-spacing: 0.01em; color: var(--foreground); text-decoration: none; } /* The gap separates the trophy from the wordmark only — "Hockey" and "Test" must stay one unbroken word, so the text lives in a single flex child. */ .wordmark-text span { color: #ff8080; } .wordmark svg { flex: 0 0 auto; } .back { font-family: var(--font-condensed); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--primary); text-decoration: none; white-space: nowrap; } .back:hover { text-decoration: underline; } /* ── The title band: kicker → Anton headline → meta (motif M0) ───────────── */ .titleband .wrap { padding-top: 26px; padding-bottom: 28px; } .kicker { display: block; font-family: var(--font-condensed); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--primary); margin-bottom: 8px; } h1 { font-family: var(--font-display); font-size: 40px; line-height: 1.02; font-weight: 400; letter-spacing: 0.01em; margin: 0; text-wrap: balance; } .meta { margin: 10px 0 0; font-family: var(--font-condensed); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); } /* ── Content: one card on the ice, the way every app screen is built ─────── */ main { padding: 24px 0 40px; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 24px 22px 26px; } .card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; } /* Section headings are label voice: condensed caps over a short primary rule — the same underline the active tab wears in the app, so a heading here reads as "the selected section" rather than as a generic accented box. */ h2 { font-family: var(--font-condensed); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.16em; margin: 32px 0 12px; padding-bottom: 8px; line-height: 1.3; position: relative; } h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; background: var(--primary); } p, li { font-size: 15.5px; margin: 0 0 12px; } ul { margin: 0 0 12px; padding-left: 20px; } li { margin-bottom: 8px; } li::marker { color: var(--primary); } strong { font-weight: 600; } a { color: var(--primary); } a:hover { color: color-mix(in srgb, var(--primary) 75%, var(--foreground)); } /* The "in short" lead paragraph reads as a scoreboard callout, not body copy. */ .lede { border-radius: 8px; border: 1px solid var(--border); background: var(--muted); padding: 14px 16px; margin-bottom: 4px; } .lede p { margin: 0; } /* ── Footer: quiet, matching the app's ──────────────────────────────────── */ footer { border-top: 1px solid var(--border); background: var(--card); } footer .wrap { padding-top: 18px; padding-bottom: calc(env(safe-area-inset-bottom) + 22px); } footer p { margin: 0 0 6px; font-size: 13px; color: var(--muted-foreground); } .footlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-family: var(--font-condensed); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; } .footlinks a { text-decoration: none; } .footlinks a:hover { text-decoration: underline; } .footlinks .spacer { margin-left: auto; color: var(--muted-foreground); } @media (max-width: 480px) { h1 { font-size: 32px; } .card { padding: 20px 16px 22px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }