/* The one design system for every page this server renders. * * Two layers: * * 1. Tokens (:root) — the palette, radii and font stacks. Global: the * interface (style.css, linked after this file) and every server-rendered * page (hub, join, sign-in, guide, scores, operator console, worker settings, * the saved report) take their colours from here. Change --accent and every * accent button everywhere follows. * * 2. Base components, scoped to `.themed` — the small shared vocabulary the * server-rendered pages are written in: .btn / .btn.secondary, .panel, * inputs, .muted, .hint, .dot (+ .ok / .warn / .bad), .err, pre/code, links. * Those pages set ``; the interface does not, so its * own style.css keeps full control of its elements (it has its own .panel, * .dot, button and code rules that differ from these). `:where()` keeps the * scope at zero specificity, so a page's own `.btn { … }` still wins. * * Server pages inline this file (server/theme.js) rather than linking it: a * hub without the web interface keeps /theme.css behind its operator password. */ /* The kit's web fonts, served from here (public/fonts, SIL OFL) rather than * Google Fonts: no third-party stylesheet blocking the first paint, one * origin, and a page that scores on PageSpeed. Latin subsets; Source Sans 3 * also gets latin-ext (members' names). Variable files where Google ships * them (Source Sans 3, JetBrains Mono), one file per weight for Poppins. */ @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/source-sans-3.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: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/source-sans-3-ext.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: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/poppins-400.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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/poppins-500.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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/poppins-600.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: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/poppins-700.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: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/jetbrains-mono.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; } :root { /* the Simhive kit palette (public/brand/): honey on ink */ --bg: #0D1117; /* Ink */ --panel: #161B22; --panel-2: #1F2630; --border: rgba(233, 237, 243, 0.14); --text: #E9EDF3; --muted: #9AA4B2; --accent: #F59E0B; /* Honey */ --accent-lt: #FFD166; /* Honey light — the gradient's start */ --accent-dim: #8A5A08; --accent-text: #0D1117; /* text on an accent-coloured button */ --brand-gradient: linear-gradient(135deg, #FFD166, #F59E0B); --green: #4caf7d; --green-glow: rgba(76, 175, 125, 0.7); /* the halo on an "online" dot */ --red: #e05f5f; --bar: #3d64a8; /* progress / score bars, the PTR switch */ --radius: 10px; /* panels, cards */ --radius-sm: 8px; /* buttons, inputs, pre */ --radius-xs: 5px; /* inline code, kbd */ --font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; } /* Headings everywhere (the interface too) set in the kit's display face. */ h1, h2, h3 { font-family: var(--font-display); } /* --- base components (server-rendered pages: ) --- */ :where(.themed) { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); } :where(.themed) a { color: var(--accent); } :where(.themed) .muted { color: var(--muted); } :where(.themed) .hint { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; } :where(.themed) .err { color: var(--red); } :where(.themed) .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; } :where(.themed) .btn { display: inline-block; background: var(--accent); color: var(--accent-text); text-decoration: none; border: 0; border-radius: var(--radius-sm); padding: 10px 18px; font-weight: 600; cursor: pointer; } :where(.themed) .btn.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); } :where(.themed) input[type=text], :where(.themed) input[type=password], :where(.themed) input[type=number], :where(.themed) select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 10px; font-size: 15px; } :where(.themed) pre { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; overflow-x: auto; font: 13px var(--mono); } :where(.themed) code { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 6px; font-size: 14px; } :where(.themed) pre code { background: none; border: 0; padding: 0; font-size: inherit; } :where(.themed) .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--muted); } :where(.themed) .dot.ok { background: var(--green); box-shadow: 0 0 6px var(--green-glow); } :where(.themed) .dot.warn { background: var(--accent); } :where(.themed) .dot.bad { background: var(--red); } /* the language links in the header of the server's pages (server/i18n.js langSwitch) */ .lang-switch { font-size: 13px; color: var(--muted); white-space: nowrap; } .lang-switch a { color: var(--muted); text-decoration: none; } .lang-switch a:hover, .lang-switch a:focus-visible { color: var(--text); text-decoration: underline; } .lang-switch b { color: var(--text); font-weight: 600; } .lang-switch a.lang-hint { color: var(--accent); font-weight: 600; margin-right: 6px; }