/* ========================================================================== themes.css — alternate skins for the whole app -------------------------------------------------------------------------- Loaded AFTER styles.css. Nothing here changes structure; every theme is a token block plus the component overrides that tokens alone cannot express (type, borders, radius, and the handful of rgba() overlays in styles.css that were tuned for a dark ground). How it works applies a theme no attribute (or "classic") leaves the original look untouched theme-switch.js sets the attribute before first paint and persists the choice in localStorage under `dd:theme`. Fonts are SELF-HOSTED in /fonts. That is not a preference: public/_headers ships a CSP with no 'unsafe-inline' and exactly one external origin (accounts.google.com), chosen so no third party learns who is browsing. Linking fonts.googleapis.com would have needed both style-src and font-src opened to Google and would have leaked the same signal the avatar decision deliberately withheld. All four faces are OFL-licensed. Adding a theme: copy a block, keep the same token names, and only add component rules for what tokens cannot reach. ========================================================================== */ /* ---------- self-hosted faces (latin subset) ---------- */ @font-face { font-family: 'Archivo'; src: url('/fonts/archivo-var.woff2') format('woff2-variations'); font-weight: 100 900; /* one variable file covers 500–900 */ font-style: normal; font-display: swap; } @font-face { font-family: 'Anton'; src: url('/fonts/anton-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow Condensed'; src: url('/fonts/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow Condensed'; src: url('/fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================================== THEME: TERRACE — Swiss grid as stadium wayfinding White ground, black rules, one red, oversized numerals as graphic objects. Radius 0, no shadows, no gradients: the grid is the decoration. ========================================================================== */ html[data-dd-theme="terrace"] { --bg: #fdfdfb; --panel: #ffffff; --panel-2: #f1f1ee; --border: #111111; --text: #111111; --muted: #6b6b6b; --accent: #e10600; --accent-dim: #c00500; --warn: #9a6700; --danger: #c0261e; --pick-me: #1a4fb4; --radius: 0px; --dd-font-ui: Archivo, "Helvetica Neue", Arial, sans-serif; --dd-font-num: Archivo, "Helvetica Neue", Arial, sans-serif; --dd-rule: 2px; color-scheme: light; } html[data-dd-theme="terrace"] body { font-family: var(--dd-font-ui); font-variant-numeric: tabular-nums; } html[data-dd-theme="terrace"] h1 { font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; } html[data-dd-theme="terrace"] h2 { font-weight: 700; letter-spacing: 0.14em; color: var(--muted); } html[data-dd-theme="terrace"] .hero h1 { letter-spacing: -0.04em; } /* Panels are fields on a grid, not floating cards. */ html[data-dd-theme="terrace"] .card, html[data-dd-theme="terrace"] .panel, html[data-dd-theme="terrace"] .league-card, html[data-dd-theme="terrace"] .team-card, html[data-dd-theme="terrace"] .stat-tile, html[data-dd-theme="terrace"] .mini-matchup, html[data-dd-theme="terrace"] .matchup, html[data-dd-theme="terrace"] .trade-item, html[data-dd-theme="terrace"] .claim-item, html[data-dd-theme="terrace"] .bracket .game, html[data-dd-theme="terrace"] .mu-side { border-radius: 0; border-color: var(--border); box-shadow: none; } html[data-dd-theme="terrace"] .team-card.mine { box-shadow: inset 0 0 0 2px var(--accent); } /* Controls: hard-edged, uppercase, no rounding anywhere. */ html[data-dd-theme="terrace"] button, html[data-dd-theme="terrace"] .btnlink, html[data-dd-theme="terrace"] input, html[data-dd-theme="terrace"] select { border-radius: 0; border: 2px solid var(--border); font-family: var(--dd-font-ui); } html[data-dd-theme="terrace"] button, html[data-dd-theme="terrace"] .btnlink { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--panel); color: var(--text); } html[data-dd-theme="terrace"] button:hover, html[data-dd-theme="terrace"] .btnlink:hover { background: var(--panel-2); } html[data-dd-theme="terrace"] button.primary, html[data-dd-theme="terrace"] .btnlink.primary { background: var(--accent); border-color: var(--accent); color: #fff; } html[data-dd-theme="terrace"] button.primary:hover, html[data-dd-theme="terrace"] .btnlink.primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); } html[data-dd-theme="terrace"] button.ghost { border-color: var(--border); background: transparent; } html[data-dd-theme="terrace"] input:focus, html[data-dd-theme="terrace"] select:focus, html[data-dd-theme="terrace"] button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } /* Tabs stop being pills and become a rule with a block on the active cell. */ html[data-dd-theme="terrace"] .tabs { border-radius: 0; border: 0; border-bottom: var(--dd-rule) solid var(--border); background: transparent; padding: 0; gap: 0; } html[data-dd-theme="terrace"] .tab { border-radius: 0; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; color: var(--muted); } html[data-dd-theme="terrace"] .tab.active { background: var(--accent); color: #fff; } html[data-dd-theme="terrace"] .tab:not(.active):hover { background: var(--panel-2); } /* Tables get the agate treatment: heavy top rule, hairline rows. */ html[data-dd-theme="terrace"] .standings th, html[data-dd-theme="terrace"] .roster-table th { color: var(--text); font-weight: 700; letter-spacing: 0.12em; border-bottom: var(--dd-rule) solid var(--border); } html[data-dd-theme="terrace"] .standings tr.mine td { color: #fff; background: var(--accent); } html[data-dd-theme="terrace"] .roster-table td { border-bottom: 1px solid #d9d9d4; } html[data-dd-theme="terrace"] .roster-table tr.starting td { background: #fdeceb; } html[data-dd-theme="terrace"] .start-flag { color: var(--accent); } /* Overlays in styles.css were mixed for a dark ground; restate them on white. */ html[data-dd-theme="terrace"] .board td.current { background: #fdeceb; outline-color: var(--accent); } html[data-dd-theme="terrace"] .board td.mine { background: #e8eefb; } html[data-dd-theme="terrace"] .board th { background: var(--panel-2); } html[data-dd-theme="terrace"] .board th.me { color: var(--accent); } html[data-dd-theme="terrace"] .champion { background: #fdeceb; border-color: var(--accent); } html[data-dd-theme="terrace"] .danger-btn:hover { background: #fbe9e8; } html[data-dd-theme="terrace"] .toast { box-shadow: 4px 4px 0 0 var(--border); border-radius: 0; } html[data-dd-theme="terrace"] .avatar { border-radius: 0; background: var(--accent); } html[data-dd-theme="terrace"] .team-avatar { border-radius: 0; } html[data-dd-theme="terrace"] .pos-badge { border-radius: 0; } html[data-dd-theme="terrace"] .pos-filters button { border-radius: 0; } html[data-dd-theme="terrace"] .pos-filters button.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* The clock is the page. Oversized numeral, flush left, red only when low. */ html[data-dd-theme="terrace"] .time { font-family: var(--dd-font-num); font-weight: 900; font-size: 2.6rem; letter-spacing: -0.04em; line-height: 0.95; } /* Three clock states have to be distinguishable at a glance under six seconds. "Yours" and "low" are both red in this palette, so low escalates by INVERTING into a block instead of shifting to a second, similar red. */ html[data-dd-theme="terrace"] .time.mine { color: var(--accent); } html[data-dd-theme="terrace"] .time.low { color: #fff; background: var(--danger); padding: 0 0.18em; } html[data-dd-theme="terrace"] .auc-bid { font-family: var(--dd-font-num); font-weight: 900; font-size: 2.4rem; letter-spacing: -0.04em; color: var(--text); } html[data-dd-theme="terrace"] .mu-score, html[data-dd-theme="terrace"] .stat-value { font-weight: 900; letter-spacing: -0.03em; } html[data-dd-theme="terrace"] .auc-team { border-radius: 0; } html[data-dd-theme="terrace"] .auc-team.leading { border-color: var(--accent); border-width: 2px; } html[data-dd-theme="terrace"] .share code { border-radius: 0; color: var(--accent); background: var(--panel-2); } /* ========================================================================== THEME: BROADCAST '97 — the score bug Gold on navy, condensed caps, two-stop bevels, hard black edges. Anton carries every number; Barlow Condensed carries every label. ========================================================================== */ html[data-dd-theme="broadcast"] { --bg: #061024; --panel: #0d1f3f; --panel-2: #12264d; --border: #1e3560; --text: #ffffff; --muted: #9fb2d4; --accent: #ffb612; --accent-dim: #d99400; --warn: #ff8c1a; --danger: #ff4d43; --pick-me: #4a9eff; --radius: 0px; --dd-font-ui: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; --dd-font-num: Anton, "Arial Black", Impact, sans-serif; /* Gold is bright: text ON gold is navy, never white (10:1 vs 1.8:1). */ --dd-on-accent: #061024; color-scheme: dark; } html[data-dd-theme="broadcast"] body { font-family: var(--dd-font-ui); font-size: 1.05rem; /* condensed faces run small; buy it back */ } html[data-dd-theme="broadcast"] h1 { font-family: var(--dd-font-num); font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase; } html[data-dd-theme="broadcast"] h2 { font-weight: 700; letter-spacing: 0.18em; color: var(--accent); } html[data-dd-theme="broadcast"] .card, html[data-dd-theme="broadcast"] .panel, html[data-dd-theme="broadcast"] .league-card, html[data-dd-theme="broadcast"] .team-card, html[data-dd-theme="broadcast"] .stat-tile, html[data-dd-theme="broadcast"] .mini-matchup, html[data-dd-theme="broadcast"] .matchup, html[data-dd-theme="broadcast"] .trade-item, html[data-dd-theme="broadcast"] .claim-item, html[data-dd-theme="broadcast"] .bracket .game, html[data-dd-theme="broadcast"] .mu-side { border-radius: 0; background: linear-gradient(180deg, var(--panel-2), var(--panel)); } html[data-dd-theme="broadcast"] button, html[data-dd-theme="broadcast"] .btnlink, html[data-dd-theme="broadcast"] input, html[data-dd-theme="broadcast"] select { border-radius: 0; font-family: var(--dd-font-ui); } html[data-dd-theme="broadcast"] button, html[data-dd-theme="broadcast"] .btnlink { border: 2px solid #000; background: linear-gradient(180deg, #243b5e, #16294a); color: #fff; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } html[data-dd-theme="broadcast"] button:hover, html[data-dd-theme="broadcast"] .btnlink:hover { background: linear-gradient(180deg, #2d4874, #1c3358); } html[data-dd-theme="broadcast"] button.primary, html[data-dd-theme="broadcast"] .btnlink.primary { background: linear-gradient(180deg, #ffc63f, #d99400); border-color: #000; color: var(--dd-on-accent); } html[data-dd-theme="broadcast"] button.primary:hover, html[data-dd-theme="broadcast"] .btnlink.primary:hover { background: linear-gradient(180deg, #ffd469, #e8a30c); } html[data-dd-theme="broadcast"] button.ghost { background: transparent; border-color: var(--border); } html[data-dd-theme="broadcast"] input, html[data-dd-theme="broadcast"] select { border: 1px solid var(--border); background: #050d1c; } html[data-dd-theme="broadcast"] input:focus, html[data-dd-theme="broadcast"] select:focus, html[data-dd-theme="broadcast"] button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } html[data-dd-theme="broadcast"] .tabs { border-radius: 0; border: 2px solid #000; padding: 0; gap: 0; background: linear-gradient(180deg, #12264d, #0a1a37); } html[data-dd-theme="broadcast"] .tab { border-radius: 0; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } html[data-dd-theme="broadcast"] .tab.active { background: linear-gradient(180deg, #ffc63f, #d99400); color: var(--dd-on-accent); } html[data-dd-theme="broadcast"] .tab:not(.active):hover { background: #1a3057; } /* Every number is Anton. This is the theme's whole personality. */ html[data-dd-theme="broadcast"] .time, html[data-dd-theme="broadcast"] .auc-bid, html[data-dd-theme="broadcast"] .mu-score, html[data-dd-theme="broadcast"] .stat-value, html[data-dd-theme="broadcast"] .mini-score { font-family: var(--dd-font-num); font-weight: 400; letter-spacing: 0.02em; } /* White by default so "yours" (gold) is a real signal, not the resting state. */ html[data-dd-theme="broadcast"] .time { font-size: 2.2rem; color: var(--text); } html[data-dd-theme="broadcast"] .time.mine { color: var(--accent); } html[data-dd-theme="broadcast"] .time.low { color: var(--danger); } html[data-dd-theme="broadcast"] .auc-bid { font-size: 2.3rem; color: var(--accent); } /* The auction panel IS the score bug: black edges, two-stop bevel, gold rule. */ html[data-dd-theme="broadcast"] .auction-panel { border: 2px solid #000; border-bottom: 2px solid var(--accent); background: linear-gradient(180deg, #12264d, #0a1a37); } html[data-dd-theme="broadcast"] .auc-player { font-family: var(--dd-font-num); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.02em; text-transform: uppercase; } html[data-dd-theme="broadcast"] .auc-team { border-radius: 0; border-color: #000; background: #0a1a37; } html[data-dd-theme="broadcast"] .auc-team.leading { border-color: var(--accent); } html[data-dd-theme="broadcast"] .standings th, html[data-dd-theme="broadcast"] .roster-table th { color: var(--accent); font-weight: 700; letter-spacing: 0.16em; border-bottom: 2px solid var(--border); } html[data-dd-theme="broadcast"] .standings tr.mine td { color: var(--accent); } html[data-dd-theme="broadcast"] .roster-table tr.starting td { background: rgba(255, 182, 18, 0.10); } html[data-dd-theme="broadcast"] .start-flag { color: var(--accent); } html[data-dd-theme="broadcast"] .board td.current { background: rgba(255, 182, 18, 0.12); outline-color: var(--accent); } html[data-dd-theme="broadcast"] .board td.mine { background: rgba(74, 158, 255, 0.14); } html[data-dd-theme="broadcast"] .champion { background: rgba(255, 182, 18, 0.12); border-color: var(--accent); color: var(--accent); } html[data-dd-theme="broadcast"] .avatar { background: linear-gradient(180deg, #ffc63f, #d99400); color: var(--dd-on-accent); } html[data-dd-theme="broadcast"] .pos-badge { border-radius: 0; } html[data-dd-theme="broadcast"] .pos-filters button { border-radius: 0; } html[data-dd-theme="broadcast"] .pos-filters button.active { background: linear-gradient(180deg, #ffc63f, #d99400); border-color: #000; color: var(--dd-on-accent); } html[data-dd-theme="broadcast"] .toast { border-radius: 0; border-color: #000; } html[data-dd-theme="broadcast"] .share code { border-radius: 0; } html[data-dd-theme="broadcast"] .matchup .mteam.winner { color: var(--accent); } html[data-dd-theme="broadcast"] .mu-side.leading .mu-score { color: var(--accent); } /* ========================================================================== Draft room at desk / iPad width -------------------------------------------------------------------------- The draft room is a desktop + tablet surface (Eric, 2026-08-23) — nobody drafts on a phone. From iPad portrait up, both themes get a denser board and a bigger clock than the shared base allows. The phone rules in styles.css stay as a graceful fallback; they are simply no longer the design target. ========================================================================== */ @media (min-width: 768px) { html[data-dd-theme="terrace"] .time { font-size: 3.2rem; } html[data-dd-theme="broadcast"] .time { font-size: 2.6rem; } html[data-dd-theme="terrace"] .auc-bid, html[data-dd-theme="broadcast"] .auc-bid { font-size: 3rem; } html[data-dd-theme="terrace"] .board table, html[data-dd-theme="broadcast"] .board table { font-size: 0.8rem; } html[data-dd-theme="terrace"] .auc-player { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; } html[data-dd-theme="broadcast"] .auc-player { font-size: 1.7rem; } } /* ========================================================================== The switcher (experiment-only chrome) Injected by theme-switch.js. Deliberately NOT themed: it must stay recognisable while you are flipping between looks. Delete this block, the script tag and the two theme blocks above to remove the experiment. ========================================================================== */ .dd-switch { position: fixed; left: 12px; bottom: 12px; z-index: 40; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 10px; background: rgba(18, 20, 24, 0.92); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); font: 600 11px/1 ui-sans-serif, system-ui, "Segoe UI", sans-serif; color: #cfd6e0; } .dd-switch > span { padding: 0 4px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; } .dd-switch button { font: inherit; cursor: pointer; color: #cfd6e0; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; padding: 6px 10px; min-height: 30px; letter-spacing: 0.04em; text-transform: none; font-weight: 600; } .dd-switch button:hover { background: rgba(255, 255, 255, 0.14); } .dd-switch button[aria-pressed="true"] { background: #e6edf3; color: #12161c; border-color: #e6edf3; } .dd-switch button:focus-visible { outline: 2px solid #6ea8fe; outline-offset: 2px; } @media (max-width: 700px) { .dd-switch { left: 8px; bottom: 8px; padding: 4px; } } @media print { .dd-switch { display: none; } }