/* * 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; } } /* ====================================================================== * randomelectrons.com layer, on top of Rack (above, copied from voth.ca). * Rack classes are .vc-*; this site's are .re-*. * ====================================================================== */ /* Accent: the logo red instead of Rack's cyan, in both themes. */ :root { --re-red: #ff5d47; --vc-acc: #ff6a55; --vc-on-acc: #0e1417; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --re-red: #d2231a; --vc-acc: #c8210f; --vc-on-acc: #ffffff; } } :root[data-theme="light"] { --re-red: #d2231a; --vc-acc: #c8210f; --vc-on-acc: #ffffff; } .re-mark { width: 34px; height: 34px; flex: none; } .re-mark .r { fill: var(--vc-tx); } .re-mark .e { fill: var(--re-red); } /* Home page banner */ .re-hero { display: grid; gap: 14px; padding: clamp(22px, 5vw, 44px); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--re-red) 16%, transparent), transparent 60%), var(--vc-s1); border: 1px solid var(--vc-line); border-radius: var(--vc-r); } .re-hero h1 { margin: 0; font-size: clamp(26px, 4.5vw, 40px); line-height: 1.1; letter-spacing: -0.02em; } .re-hero p { margin: 0; max-width: 60ch; color: var(--vc-mut); font-size: 16px; } .re-hero .re-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .re-wide { width: 100%; max-width: 72rem; margin: 0 auto; display: grid; gap: 28px; } /* Post cards: thumbnail, date, title, excerpt. */ .re-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; } .re-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; 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; } .re-card:hover { border-color: var(--vc-acc); transform: translateY(-2px); } .re-thumb { aspect-ratio: 16 / 9; background: var(--vc-s2); display: grid; place-items: center; overflow: hidden; } .re-thumb img { width: 100%; height: 100%; object-fit: cover; } .re-thumb .re-mark { width: 56px; height: 56px; opacity: .5; } .re-card-body { display: grid; gap: 6px; align-content: start; padding: 14px 16px 16px; } .re-card-title { font-weight: 600; font-size: 17px; line-height: 1.25; } .re-card-note { font-size: 13.5px; color: var(--vc-mut); } .re-date { font: 12px var(--vc-mono); color: var(--vc-mut); letter-spacing: .02em; } /* Post and page text. Block flow, not Rack's grid, so margins set the rhythm. */ .re-prose { display: block; font-size: 16px; line-height: 1.65; } .re-prose > * { margin: 0 0 1em; } .re-prose h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .4em; } .re-prose h2 { font-size: 22px; margin-top: 1.6em; } .re-prose h3 { font-size: 18px; margin-top: 1.4em; } .re-prose img, .re-prose video { max-width: 100%; height: auto; border-radius: var(--vc-r-sm); border: 1px solid var(--vc-line); } .re-prose figure { margin: 1.4em 0; } .re-prose figcaption { margin-top: 6px; font-size: 13px; color: var(--vc-mut); } .re-prose blockquote { margin: 1.2em 0; padding: 10px 16px; border-left: 3px solid var(--vc-acc); background: var(--vc-s1); border-radius: 0 var(--vc-r-sm) var(--vc-r-sm) 0; } .re-prose blockquote > :last-child { margin-bottom: 0; } .re-prose code, .re-prose pre { font-family: var(--vc-mono); font-size: 14px; } .re-prose hr { border: 0; border-top: 1px solid var(--vc-line); margin: 1.6em 0; } .re-prose ul, .re-prose ol { padding-left: 1.4em; } .re-prose li { margin: .25em 0; } .re-post-head { display: grid; gap: 8px; margin-bottom: 8px; } .re-back { font-size: 14px; text-decoration: none; } .re-back:hover { text-decoration: underline; } /* The old theme's centred titles and buttons, mapped onto Rack. */ .re-title { margin-top: 0; } .re-btn { font: 600 14px var(--vc-sans); padding: 9px 16px; border-radius: 8px; background: var(--vc-acc); color: var(--vc-on-acc); text-decoration: none; display: inline-block; } /* Centred pull-quote, from the old theme's [blockquote type="center"]. */ .re-prose .re-pull { margin: 1.4em auto; max-width: 34ch; text-align: center; font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--vc-tx); } .re-prose .re-pull::before, .re-prose .re-pull::after { content: ""; display: block; width: 48px; height: 2px; margin: 12px auto; background: var(--vc-acc); } /* Two images side by side, from [block_grid type="two-up"]. */ .re-prose .re-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; } .re-prose .re-grid2 img { width: 100%; }