/* * voth.ca shared stylesheet ("Rack"). * Master copy. The INCOSE quiz inlines this file at build time. * * Contract (agreed with the quiz): * - Tokens are --vc-*; components are .vc-*. * - Bare-element rules are limited to *, html, body, a, * :focus-visible and reduced motion. Never style bare header, * footer, h1, or the quiz's .btn, .status and .score here. * * Theme: dark first. Light follows the OS setting, and * [data-theme="light"|"dark"] on overrides both. */ /* ---------- fonts ---------- * Self-hosted, so pages make no requests to Google and work offline. * Variable fonts: one file per subset covers every weight. * SIL Open Font License; see css/fonts/OFL-*.txt. */ @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/css/fonts/schibsted-grotesk-latin.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: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/css/fonts/schibsted-grotesk-latin-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: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/css/fonts/jetbrains-mono-latin.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: 400 500; font-display: swap; src: url("/css/fonts/jetbrains-mono-latin-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; } /* ---------- tokens ---------- */ :root { color-scheme: dark; --vc-bg: #0e1417; /* page */ --vc-s1: #151d21; /* surface: cards, bars */ --vc-s2: #1c262b; /* raised: hover, tracks */ --vc-line: #27343b; --vc-tx: #dce5e9; /* text */ --vc-mut: #8c9ca5; /* secondary text */ --vc-acc: #5ec4e0; /* accent */ --vc-on-acc: #0e1417; /* text on accent */ --vc-ok: #57c28f; --vc-warn: #e3b04b; --vc-bad: #ef7466; --vc-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --vc-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* status tints, derived so both themes stay in step */ --vc-ok-bg: color-mix(in srgb, var(--vc-ok) 12%, var(--vc-s1)); --vc-warn-bg: color-mix(in srgb, var(--vc-warn) 12%, var(--vc-s1)); --vc-bad-bg: color-mix(in srgb, var(--vc-bad) 12%, var(--vc-s1)); --vc-r: 10px; /* card radius */ --vc-r-sm: 6px; /* control radius */ --vc-gap: 12px; --vc-pad: clamp(16px, 3vw, 28px); --vc-read: 42rem; /* reading column */ } /* Light palette. Written twice (OS setting, then explicit override) because CSS can't share one block between the two. Keep them identical. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --vc-bg: #edf1f3; --vc-s1: #ffffff; --vc-s2: #e5ebee; --vc-line: #d2dbe0; --vc-tx: #142026; --vc-mut: #56666f; --vc-acc: #0a7493; --vc-on-acc: #ffffff; --vc-ok: #1b8653; --vc-warn: #946608; --vc-bad: #b3372b; } } :root[data-theme="light"] { /* must match the block above */ color-scheme: light; --vc-bg: #edf1f3; --vc-s1: #ffffff; --vc-s2: #e5ebee; --vc-line: #d2dbe0; --vc-tx: #142026; --vc-mut: #56666f; --vc-acc: #0a7493; --vc-on-acc: #ffffff; --vc-ok: #1b8653; --vc-warn: #946608; --vc-bad: #b3372b; } /* ---------- base (the only bare-element rules) ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--vc-bg); color: var(--vc-tx); font: 400 15px/1.5 var(--vc-sans); } a { color: var(--vc-acc); } :focus-visible { outline: 2px solid var(--vc-acc); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- top bar ---------- */ .vc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 14px var(--vc-pad); background: var(--vc-s1); border-bottom: 1px solid var(--vc-line); } .vc-brand { display: flex; align-items: center; gap: 12px; } .vc-brand a { color: inherit; text-decoration: none; } .vc-mark { width: 30px; height: 30px; color: var(--vc-acc); flex: none; } .vc-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; } .vc-sub { font-size: 13px; color: var(--vc-mut); } /* page tabs and breadcrumbs share one look */ .vc-tabs { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 14px; } .vc-tabs a, .vc-tabs .vc-here { padding: 6px 11px; border-radius: var(--vc-r-sm); color: var(--vc-mut); text-decoration: none; } .vc-tabs a:hover, .vc-tabs .vc-here { background: var(--vc-s2); color: var(--vc-tx); } .vc-tabs .vc-sep { color: var(--vc-line); } /* theme switch (see css/theme.js) */ .vc-theme { font: 500 13px var(--vc-sans); padding: 6px 11px; border-radius: var(--vc-r-sm); border: 1px solid var(--vc-line); background: none; color: var(--vc-mut); cursor: pointer; } .vc-theme:hover { color: var(--vc-tx); border-color: var(--vc-acc); } /* ---------- page structure ---------- */ .vc-main { padding: var(--vc-pad); display: grid; gap: 28px; } .vc-read { width: 100%; max-width: var(--vc-read); margin: 0 auto; display: grid; gap: 18px; } .vc-h { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--vc-mut); } .vc-foot { padding: 0 var(--vc-pad) 20px; font-size: 12.5px; color: var(--vc-mut); } /* ---------- surfaces ---------- */ .vc-card { background: var(--vc-s1); border: 1px solid var(--vc-line); border-radius: var(--vc-r); padding: 14px 16px; } /* card with a status edge: add .is-ok, .is-warn or .is-bad */ .vc-card.is-ok { border-left: 4px solid var(--vc-ok); } .vc-card.is-warn { border-left: 4px solid var(--vc-warn); } .vc-card.is-bad { border-left: 4px solid var(--vc-bad); } /* ---------- stat tiles ---------- */ .vc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--vc-gap); } .vc-k { font-size: 12.5px; color: var(--vc-mut); } .vc-v { margin-top: 2px; font: 500 26px/1.25 var(--vc-mono); font-variant-numeric: tabular-nums; } .vc-v small { font-size: 14px; color: var(--vc-mut); } /* horizontal meter: .vc-meter > label, .vc-track > .vc-fill, value */ .vc-meters { display: grid; gap: 7px; margin-top: 8px; } .vc-meter { display: grid; grid-template-columns: 34px minmax(0, 1fr) 42px; gap: 10px; align-items: center; font: 12.5px var(--vc-mono); color: var(--vc-mut); } .vc-meter b { font-weight: 500; color: var(--vc-tx); text-align: right; font-variant-numeric: tabular-nums; } .vc-track { height: 6px; border-radius: 3px; background: var(--vc-s2); overflow: hidden; } .vc-fill { height: 100%; min-width: 3px; border-radius: 3px; background: var(--vc-acc); } /* columns of cards, for grouped link lists */ .vc-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px var(--vc-gap); align-items: start; } .vc-lede { margin: 0; color: var(--vc-mut); max-width: 60ch; } /* ---------- link tiles ---------- */ .vc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: var(--vc-gap); } .vc-tile { display: grid; gap: 4px; padding: 14px 16px; background: var(--vc-s1); border: 1px solid var(--vc-line); border-radius: var(--vc-r); color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .vc-tile:hover { border-color: var(--vc-acc); transform: translateY(-1px); } .vc-tile-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .vc-tile-name { font-weight: 600; font-size: 16px; } .vc-tile-note { font-size: 13px; color: var(--vc-mut); } .vc-addr { font: 12.5px/1.4 var(--vc-mono); color: var(--vc-mut); overflow-wrap: anywhere; } /* ---------- chips ---------- */ .vc-chip { font: 500 11px/1 var(--vc-mono); letter-spacing: .03em; padding: 4px 6px; border-radius: 4px; color: var(--vc-mut); background: var(--vc-s2); } .vc-chip.is-ok { color: var(--vc-ok); background: color-mix(in srgb, var(--vc-ok) 15%, transparent); } .vc-chip.is-warn { color: var(--vc-warn); background: color-mix(in srgb, var(--vc-warn) 16%, transparent); } .vc-chip.is-bad { color: var(--vc-bad); background: color-mix(in srgb, var(--vc-bad) 15%, transparent); } /* ---------- lists: rows inside a card ---------- */ .vc-list { padding-block: 6px; } .vc-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; color: inherit; text-decoration: none; border-top: 1px solid var(--vc-line); } .vc-row:first-child { border-top: 0; } .vc-row > :first-child { min-width: 0; } .vc-row:hover > :first-child { color: var(--vc-acc); } .vc-row > :last-child { font: 12.5px var(--vc-mono); color: var(--vc-mut); white-space: nowrap; } /* ---------- buttons ---------- */ .vc-btn { font: 600 14px var(--vc-sans); padding: 9px 16px; border-radius: 8px; border: 1px solid var(--vc-line); background: var(--vc-s1); color: var(--vc-tx); cursor: pointer; text-decoration: none; display: inline-block; } .vc-btn:hover { border-color: var(--vc-acc); } .vc-btn.is-primary { background: var(--vc-acc); border-color: var(--vc-acc); color: var(--vc-on-acc); } /* ---------- text ---------- */ .vc-mono { font-family: var(--vc-mono); } .vc-pre { margin: 0; font: 13px/1.5 var(--vc-mono); white-space: pre-wrap; overflow-wrap: anywhere; } /* ---------- narrow screens ---------- */ @media (max-width: 760px) { /* one row that scrolls sideways, instead of wrapping into a tall bar */ .vc-tabs { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .vc-tabs a, .vc-tabs .vc-here { flex: none; } /* brand and theme switch share the first row; tabs take the second */ .vc-brand { flex: 1; min-width: 0; } .vc-theme { order: 1; } .vc-tabs { order: 2; } }