/* Honza IRL design tokens (phase W2, design approved 3 Oct 2026, docs/design/blueprint.md). * One file for the web, the map, admin and the OBS widgets, served at /design/tokens.css on * every host. Only fonts and custom properties live here, nothing that draws, so the widgets * can load it without breaking the OBS rules (no filter / shadow, tests/test_layout.py). * * Palettes: * default "Tram and asphalt" (web, map) * data-palette=admin "Tram and asphalt", admin variant (white text for the sun) * data-palette=signal "Overlay signal" (widgets, OBS overlay) * Text contrast >= 4.5:1 everywhere (tests/test_design.py checks the pairs below). */ /* Silkscreen (headings, buttons) and Pixelify Sans (body), digits in Departure Mono (below). SIL OFL 1.1, Fontsource * 5.3.0, latin + latin-ext (Czech names in chat), see fonts/OFL-*.txt. Bundled because the CSP * allows no foreign servers and OBS must work without the internet. */ @font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/silkscreen-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/silkscreen-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/silkscreen-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/silkscreen-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/pixelify-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/pixelify-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/pixelify-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/pixelify-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Departure Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/departure-mono-400-normal.woff2") format("woff2"); } /* Every digit on every page and widget in Departure Mono (owner 8 Oct 2026: Silkscreen draws 0 = O, 2 = Z, * 5 = S). The same file under a second name for the digits 0-9 only, first in --font-pixel and --font-body: * letters stay Silkscreen / Pixelify Sans, numbers can never be forgotten. One weight for 400 and 700 (no fake * bold). size-adjust is the knob if the digits look too big or small next to the letters. */ @font-face { font-family: "Departure Digits"; font-style: normal; font-weight: 400 700; font-display: swap; size-adjust: 100%; unicode-range: U+0030-0039; src: url("fonts/departure-mono-400-normal.woff2") format("woff2"); } /* "Tram and asphalt": web and map */ :root { --font-pixel: "Departure Digits", "Silkscreen", "Courier New", monospace; --font-body: "Departure Digits", "Pixelify Sans", "Courier New", monospace; --font-num: "Departure Mono", "Courier New", monospace; /* numbers and amounts: every digit unambiguous */ --bg: #1A1C20; /* page */ --card: #272A30; /* cards, tiles */ --card-hover: #30343B; --text: #F4F3EE; --muted: #B8BCC4; /* second text */ --accent: #FFD23F; /* tram yellow: logo, headings, main buttons */ --button: #FFD23F; --button-text: #1A1C20; --live: #FF3B30; /* only the LIVE / REC dot */ --focus: #5BC8FF; /* dashed focus frame */ --line: #3A3E46; /* card frames */ --shadow: #000000; /* hard shadows, never blurred */ --px: 4px; /* one "pixel" of the notched frame */ --shadow-offset: 6px; --tap: 44px; /* smallest touch target */ } /* "Tram and asphalt", admin: white text and lighter second text for the sun */ [data-palette="admin"] { --bg: #151619; --text: #FFFFFF; --muted: #C9CDD4; --tap: 56px; } /* "Overlay signal": widgets and the OBS overlay */ [data-palette="signal"] { --bg: #0D1115; /* areas */ --surface: rgba(13, 17, 21, 0.8); /* areas over the camera picture */ --card: #1A2129; /* inner areas, empty bars */ --text: #FFFFFF; --muted: #C9D2DB; --accent: #4DFF91; /* chat votes, active widget */ --button: #FFE14D; /* challenge, holder bonus */ --button-text: #0D1115; --holder: #FFE14D; --live: #FF2D2D; /* only the LIVE dot and FAILED */ --focus: #FFFFFF; --line: #2E3A46; }