/* web/theme.css — the ONE design system. Every page in the product links this file: the site, the dashboard, the director's remote, every game's TV and phone page. Game pages add layout only; they never define colors or fonts. The token values mirror platform/brand.js exactly (scripts/test-brand.js asserts it). Design intent: warm, high-contrast, light. This is read on daytime common-room TVs from across a room and on phones by people who may hold them at arm's length. Base type is 18px on phones and scales up on the TV. */ :root { --bg: #fbf7ef; --bg2: #f3ecdd; --panel: #ffffff; --panel2: #f8f3e8; --line: #e3dac8; --ink: #1f2a44; --muted: #5b6478; --faint: #8a92a6; --accent: #b8860b; --accent2: #2b5d8f; --ok: #2e7d4f; --stop: #b23a3a; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --shadow: 0 2px 10px rgba(31, 42, 68, 0.08); --font: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fs-base: 18px; --maxw: 1120px; } /* TVs: everything grows. Applied by game TV pages with . */ html[data-surface="tv"] { --fs-base: 32px; --r-md: 24px; --r-lg: 36px; } * { box-sizing: border-box; } html { font-size: var(--fs-base); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.45; -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; font-weight: 700; } h1 { font-size: 2.2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.2rem; } p { margin: 0 0 1em; } a { color: var(--accent2); } a:focus-visible, button:focus-visible, input:focus-visible { outline: 4px solid var(--accent2); outline-offset: 3px; } .muted { color: var(--muted); } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.2rem; } /* buttons — big by default; a director's thumb and a resident's finger both need it */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 3.2rem; padding: 0.7rem 1.4rem; border: 2px solid var(--accent2); border-radius: var(--r-md); background: var(--accent2); color: #fff; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; text-decoration: none; } .btn:hover { filter: brightness(1.08); } .btn.gold { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.ghost { background: transparent; color: var(--accent2); } .btn.stop { background: var(--stop); border-color: var(--stop); } .btn.big { min-height: 4.4rem; font-size: 1.4rem; padding: 1rem 2.2rem; } .btn:disabled { opacity: 0.5; cursor: default; } /* cards */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 1.4rem; } .card.soft { background: var(--panel2); box-shadow: none; } /* forms */ label { display: block; font-weight: 700; margin-bottom: 0.3rem; } input, select, textarea { font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: var(--r-sm); padding: 0.7rem 0.9rem; width: 100%; min-height: 3rem; } input:focus, select:focus, textarea:focus { border-color: var(--accent2); } .field { margin-bottom: 1.1rem; } .help { color: var(--muted); font-size: 0.92rem; margin-top: 0.3rem; } /* banners */ .banner { border-radius: var(--r-md); padding: 0.9rem 1.2rem; border: 1px solid var(--line); background: var(--panel2); } .banner.ok { border-color: var(--ok); } .banner.stop { border-color: var(--stop); } /* the sponsor line: one strip, footer, never louder than this */ .sponsor-line { display: flex; align-items: center; justify-content: center; gap: 0.7em; color: var(--muted); font-size: 0.95rem; padding: 0.6rem 1rem; border-top: 1px solid var(--line); background: var(--panel2); } .sponsor-line img { height: 1.6em; width: auto; } html[data-surface="tv"] .sponsor-line { font-size: 0.8rem; } /* the join badge on a TV: code and QR, always visible */ .join { display: inline-flex; align-items: center; gap: 1rem; background: var(--panel); border: 2px solid var(--line); border-radius: var(--r-lg); padding: 0.8rem 1.2rem; } .join .code { font-size: 1.6em; font-weight: 700; letter-spacing: 0.12em; color: var(--accent2); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }