/* 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, paper stock, flat ruled boxes. The paper used to sit at yellow hue with the inks up at C 0.030, which reads as staining rather than warmth. It is still warm -- newsprint should be -- but the tint is now orange at C 0.004-0.015, and the red masthead accent carries the character instead of the neutrals. */ 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: #f4f1ee; --surface: #fbf9f7; --surface-2: #fbf9f7; --border: #ded7d2; --border-soft: #e9e3df; --ink: #1a1614; --ink-2: #4b433f; --ink-3: #6d6460; --accent: #b3261e; --accent-dim: #8f1c16; --accent-ink: #ffffff; --series-qso: #d95926; --series-pts: #199e70; --mode-cw: #d95926; --mode-ssb: #199e70; --mode-digi: #2a78d6; --axis: rgba(26, 22, 20, 0.16); --map-grat: rgba(26, 22, 20, 0.08); --track-bg: #e9e3df; } body[data-theme="broadsheet"][data-mode="dark"] { --bg: #131110; --surface: #1b1817; --surface-2: #1b1817; --border: #332d2b; --border-soft: #241f1e; --ink: #f2ecea; --ink-2: #c0b5b1; --ink-3: #8a7f7b; --accent: #e06a5e; --accent-dim: #b3261e; --accent-ink: #16110b; --series-qso: #d95926; --series-pts: #199e70; --mode-cw: #d95926; --mode-ssb: #199e70; --mode-digi: #3987e5; --axis: rgba(242, 236, 234, 0.14); --map-grat: rgba(242, 236, 234, 0.07); --track-bg: #241f1e; } /* ================================================================== 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; } /* The panel was khaki -- ink-2 sat at C 0.044, all of it at yellow hue, which made the whole instrument look tobacco-stained. Real gear is graphite with an amber readout, so the neutrals are now cool (C 0.003-0.020, blue hue) and the amber is left to do the glowing on its own. */ body[data-theme="signal"][data-mode="light"] { --bg: #ebecee; --surface: #f5f6f8; --surface-2: #f5f6f8; --border: #c9ccd1; --border-soft: #d9dbe0; --ink: #15171a; --ink-2: #454a51; --ink-3: #697079; --accent: #c9760f; --accent-dim: #a5610b; --accent-ink: #ffffff; --series-qso: #d95926; --series-pts: #199e70; --mode-cw: #d95926; --mode-ssb: #199e70; --mode-digi: #2a78d6; --axis: rgba(21, 23, 26, 0.16); --map-grat: rgba(21, 23, 26, 0.07); --track-bg: #dfe1e5; --card-border: 2px solid #2b3037; } body[data-theme="signal"][data-mode="dark"] { --bg: #0d0f11; --surface: #15181c; --surface-2: #15181c; --border: #2b3037; --border-soft: #1e2227; --ink: #eef1f4; --ink-2: #a7b0ba; --ink-3: #6f7883; --accent: #f5a742; --accent-dim: #c9760f; --accent-ink: #140f06; --series-qso: #d95926; --series-pts: #199e70; --mode-cw: #d95926; --mode-ssb: #199e70; --mode-digi: #3987e5; --axis: rgba(238, 241, 244, 0.14); --map-grat: rgba(238, 241, 244, 0.07); --track-bg: #0a0c0e; --card-border: 2px solid #39404a; } /* ===================================================================== mono */ /* No colour at all: neutrals at exactly C 0.000, and the three modes told apart by lightness instead of hue. That is a deliberate exception to the categorical rules everything else here follows -- a grayscale palette fails the chroma floor by definition, and the lightness band with it. What it does clear, and what matters when hue is gone, is separation: adjacent steps sit at dE 16.5 light / 18.9 dark against a floor of 15, and every one of them clears 3:1 on its surface. Lightness is also the one channel every kind of colour blindness keeps, so this is the most legible theme here, not the most compromised. The bars carry their numbers and the legend its words either way. */ body[data-theme="mono"] { --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: 6px; --radius-sm: 3px; --card-shadow: none; } body[data-theme="mono"][data-mode="light"] { --bg: #efefef; --surface: #f8f8f8; --surface-2: #f8f8f8; --border: #d0d0d0; --border-soft: #e0e0e0; --ink: #141414; --ink-2: #4a4a4a; --ink-3: #6e6e6e; --accent: #1c1c1c; --accent-dim: #3d3d3d; --accent-ink: #ffffff; --series-qso: #2e2e2e; --series-pts: #8e8e8e; --mode-cw: #2e2e2e; --mode-ssb: #5e5e5e; --mode-digi: #8e8e8e; --axis: rgba(20, 20, 20, 0.16); --map-grat: rgba(20, 20, 20, 0.08); --track-bg: #e0e0e0; } /* the mark keeps its fixed brand colours in every other theme; here it would be the one coloured thing on the screen, which rather defeats the point */ body[data-theme="mono"] .hexmark { filter: grayscale(1); } body[data-theme="mono"][data-mode="dark"] { --bg: #0e0e0e; --surface: #171717; --surface-2: #171717; --border: #2e2e2e; --border-soft: #222222; --ink: #f0f0f0; --ink-2: #ababab; --ink-3: #737373; --accent: #f0f0f0; --accent-dim: #b8b8b8; --accent-ink: #0e0e0e; --series-qso: #ededed; --series-pts: #767676; --mode-cw: #ededed; --mode-ssb: #b0b0b0; --mode-digi: #767676; --axis: rgba(240, 240, 240, 0.14); --map-grat: rgba(240, 240, 240, 0.07); --track-bg: #0a0a0a; }