/* Themes for the Basalt dashboard. The look is picked by data-theme + data-mode on . style.css styles every component through tokens; here we (1) declare the bundled faces, (2) give each theme its typography + shape, and (3) set the colour tokens for each theme x mode. "basalt" dark is the :root fallback in style.css, so only basalt-light needs a block here. Theme/mode resolution lives in config.py; a ?theme=&mode= query overrides the configured default (see routes.py). Weight ranges on @font-face keep the browser from faux-bolding a face we only ship a couple of weights of. Font files are self-hosted (offline). */ @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 550; font-display: swap; src: url("vendor/fonts/space-grotesk-500.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("vendor/fonts/space-grotesk-700.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400 550; font-display: swap; src: url("vendor/fonts/space-mono-400.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("vendor/fonts/space-mono-700.woff2") format("woff2"); } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 550; font-display: swap; src: url("vendor/fonts/fraunces-400.woff2") format("woff2"); } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("vendor/fonts/fraunces-600.woff2") format("woff2"); } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("vendor/fonts/fraunces-600-italic.woff2") format("woff2"); } @font-face { font-family: "Anton"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("vendor/fonts/anton-400.woff2") format("woff2"); } /* =========================================================== basalt (light) */ /* dark is the :root default in style.css; this restores the old OS-light look */ body[data-theme="basalt"][data-mode="light"] { --bg: #e9edf2; --surface: #ffffff; --surface-2: #f3f6fa; --border: #cfd8e2; --border-soft: #dee5ec; --ink: #141b24; --ink-2: #4a5b6b; --ink-3: #7d8b99; --accent: #b8690f; --accent-dim: #9a5709; --accent-ink: #ffffff; --series-qso: #d06c14; --series-pts: #14987c; --mode-cw: #d06c14; --mode-ssb: #14987c; --mode-digi: #4457bb; --axis: rgba(74, 91, 107, 0.18); --map-grat: rgba(74, 91, 107, 0.10); --track-bg: var(--border-soft); --card-shadow: none; } /* =============================================================== scoreboard */ /* clean broadcast: floating white cards, red headline number, Space Grotesk */ body[data-theme="scoreboard"] { --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace; --radius: 12px; --radius-sm: 5px; } body[data-theme="scoreboard"][data-mode="light"] { --bg: #eef0ea; --surface: #ffffff; --surface-2: #ffffff; --border: #e0e2da; --border-soft: #e7e9e2; --ink: #16181c; --ink-2: #3b4048; --ink-3: #5f6459; --accent: #e0332b; --accent-dim: #b3261e; --accent-ink: #ffffff; --series-qso: #c9760f; --series-pts: #0c8f63; --mode-cw: #c9760f; --mode-ssb: #0c8f63; --mode-digi: #3b3ad1; --axis: rgba(22, 24, 28, 0.12); --map-grat: rgba(22, 24, 28, 0.06); --track-bg: #e7e9e2; --card-shadow: 0 1px 0 rgba(20, 24, 18, 0.04), 0 10px 26px rgba(20, 24, 18, 0.09); } body[data-theme="scoreboard"][data-mode="dark"] { --bg: #0e1013; --surface: #171a1f; --surface-2: #171a1f; --border: #262b31; --border-soft: #1e2228; --ink: #f2f4ef; --ink-2: #9aa094; --ink-3: #6f756b; --accent: #ff5b52; --accent-dim: #e0332b; --accent-ink: #10120f; --series-qso: #f2a53c; --series-pts: #2fca92; --mode-cw: #f2a53c; --mode-ssb: #2fca92; --mode-digi: #8b7cff; --axis: rgba(242, 244, 239, 0.14); --map-grat: rgba(242, 244, 239, 0.07); --track-bg: #0a0c0e; --card-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); } /* =============================================================== broadsheet */ /* editorial newspaper: Fraunces serif, warm paper, flat ruled boxes */ body[data-theme="broadsheet"] { --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-sans: "Fraunces", Georgia, "Times New Roman", serif; --font-mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace; --radius: 4px; --radius-sm: 3px; --card-shadow: none; } body[data-theme="broadsheet"][data-mode="light"] { --bg: #f4f0e7; --surface: #faf7ef; --surface-2: #faf7ef; --border: #d8d2c4; --border-soft: #e5dfd1; --ink: #1a1611; --ink-2: #4a4335; --ink-3: #6b6357; --accent: #b3261e; --accent-dim: #8f1c16; --accent-ink: #ffffff; --series-qso: #a8641a; --series-pts: #2f6d4f; --mode-cw: #a8641a; --mode-ssb: #2f6d4f; --mode-digi: #45418f; --axis: rgba(26, 22, 17, 0.16); --map-grat: rgba(26, 22, 17, 0.08); --track-bg: #e5dfd1; } body[data-theme="broadsheet"][data-mode="dark"] { --bg: #14110c; --surface: #1c1811; --surface-2: #1c1811; --border: #342d20; --border-soft: #251f16; --ink: #f2ece0; --ink-2: #c3b8a4; --ink-3: #8a7f6c; --accent: #e06a5e; --accent-dim: #b3261e; --accent-ink: #16110b; --series-qso: #d69a4a; --series-pts: #6fae7f; --mode-cw: #d69a4a; --mode-ssb: #6fae7f; --mode-digi: #9a92e0; --axis: rgba(242, 236, 224, 0.14); --map-grat: rgba(242, 236, 224, 0.07); --track-bg: #251f16; } /* ================================================================== stadium */ /* jumbotron: Anton condensed, green accent, borderless floating blocks */ body[data-theme="stadium"] { --font-display: "Anton", "Arial Narrow", sans-serif; --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace; --radius: 10px; --radius-sm: 5px; --card-border: 0; } body[data-theme="stadium"][data-mode="light"] { --bg: #e9ebee; --surface: #ffffff; --surface-2: #f2f4f6; --border: #d4d8dd; --border-soft: #e2e5e9; --ink: #14161a; --ink-2: #3f454d; --ink-3: #6b7078; --accent: #0f9d58; --accent-dim: #0c7d46; --accent-ink: #ffffff; --series-qso: #e8871e; --series-pts: #0f9d58; --mode-cw: #e8871e; --mode-ssb: #0f9d58; --mode-digi: #3f47c9; --axis: rgba(20, 22, 26, 0.12); --map-grat: rgba(20, 22, 26, 0.06); --track-bg: #e2e5e9; --card-shadow: 0 8px 24px rgba(20, 22, 26, 0.10); } body[data-theme="stadium"][data-mode="dark"] { --bg: #0c0e11; --surface: #15181c; --surface-2: #15181c; --border: #262a30; --border-soft: #1d2126; --ink: #f2f4f6; --ink-2: #a8aeb6; --ink-3: #6f757d; --accent: #23c46e; --accent-dim: #0f9d58; --accent-ink: #08120b; --series-qso: #f2a53c; --series-pts: #23c46e; --mode-cw: #f2a53c; --mode-ssb: #23c46e; --mode-digi: #7c86ff; --axis: rgba(242, 244, 246, 0.14); --map-grat: rgba(242, 244, 246, 0.07); --track-bg: #0a0c0e; --card-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); } /* ==================================================================== swiss */ /* International style: sharp corners, hairlines, one red accent, lots of air */ body[data-theme="swiss"] { --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace; --radius: 0; --radius-sm: 0; --card-shadow: none; } body[data-theme="swiss"][data-mode="light"] { --bg: #f7f7f4; --surface: #ffffff; --surface-2: #ffffff; --border: #deded9; --border-soft: #ebebe6; --ink: #111111; --ink-2: #444444; --ink-3: #7a7a72; --accent: #e2231a; --accent-dim: #b81c15; --accent-ink: #ffffff; --series-qso: #111111; --series-pts: #e2231a; --mode-cw: #111111; --mode-ssb: #8a8a82; --mode-digi: #e2231a; --axis: rgba(17, 17, 17, 0.14); --map-grat: rgba(17, 17, 17, 0.07); --track-bg: #ebebe6; } body[data-theme="swiss"][data-mode="dark"] { --bg: #0f0f0e; --surface: #171716; --surface-2: #171716; --border: #2b2b28; --border-soft: #201f1d; --ink: #f4f4f0; --ink-2: #b8b8b0; --ink-3: #82827a; --accent: #ff4a3d; --accent-dim: #e2231a; --accent-ink: #120a09; --series-qso: #f4f4f0; --series-pts: #ff4a3d; --mode-cw: #f4f4f0; --mode-ssb: #8a8a82; --mode-digi: #ff4a3d; --axis: rgba(244, 244, 240, 0.14); --map-grat: rgba(244, 244, 240, 0.07); --track-bg: #201f1d; } /* =================================================================== signal */ /* light take on the radio instrument: amber readout, engraved 2px panels */ body[data-theme="signal"] { --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace; --radius: 8px; --radius-sm: 3px; --card-shadow: none; } body[data-theme="signal"][data-mode="light"] { --bg: #efeee7; --surface: #f6f5ef; --surface-2: #f6f5ef; --border: #cfccbe; --border-soft: #dbd7c7; --ink: #1b1a16; --ink-2: #4a473c; --ink-3: #6d6a5f; --accent: #c9760f; --accent-dim: #a5610b; --accent-ink: #ffffff; --series-qso: #c9760f; --series-pts: #0c8f63; --mode-cw: #c9760f; --mode-ssb: #0c8f63; --mode-digi: #3b3ad1; --axis: rgba(27, 26, 22, 0.16); --map-grat: rgba(27, 26, 22, 0.07); --track-bg: #e4e2d7; --card-border: 2px solid #2a281f; } body[data-theme="signal"][data-mode="dark"] { --bg: #100f0b; --surface: #17150f; --surface-2: #17150f; --border: #322e22; --border-soft: #241f16; --ink: #f2eee0; --ink-2: #bcae90; --ink-3: #857a62; --accent: #f5a742; --accent-dim: #c9760f; --accent-ink: #140f06; --series-qso: #f5a742; --series-pts: #2fca92; --mode-cw: #f5a742; --mode-ssb: #2fca92; --mode-digi: #8b7cff; --axis: rgba(242, 238, 224, 0.14); --map-grat: rgba(242, 238, 224, 0.07); --track-bg: #0d0c08; --card-border: 2px solid #4a4433; }