/* ============================================================ $TKN247 -- shared style tokens ------------------------------------------------------------ The era colours and the type, in one file, so every page on the site draws from the same phosphor: the terminal (index.html), the public status page (/status) and the rendered disclosures. Link it before any page styles: Everything else about a page's look stays in that page. ============================================================ */ /* The fonts, self-hosted from Google Fonts (SIL Open Font License). Served from our own origin: no third-party request on page load, no visitor IP sent to Google, and nothing extra for the Content-Security-Policy to allow. Only the latin and latin-ext subsets are kept; unicode-range means a visitor downloads latin-ext only if the page actually uses a character from it. The urls are relative to this file, so they resolve to /fonts/ from any page that links /tokens.css. */ @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-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:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600-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:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600-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:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/libre-caslon-display-400-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:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/libre-caslon-display-400-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:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/vt323-400-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:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/vt323-400-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;} /* the three faces, by job: the terminal's text, the tube's big readouts, and the serif of the headlines */ :root{ --font-mono: "IBM Plex Mono", ui-monospace, monospace; --font-crt: "VT323", ui-monospace, monospace; --font-serif: "Libre Caslon Display", "Times New Roman", serif; } /* the colours: phosphor on black. two eras, one machine. */ :root{ --void: #030604; --void-2: #060b08; --panel: #07100b; --panel-2: #0a1710; --grid: #0f2c1d; --line: #163a26; --p-hot: #7dffc0; /* phosphor highlight */ --p: #3bf58f; /* phosphor base */ --p-mid: #1f9f5d; --p-dim: #0f5733; --p-ghost: rgba(59,245,143,.10); --warm: #ffb347; --warm-dim: #8a5c22; --red: #ff5747; --paper: #d7ffe9; --paper-dim: #6f9d84; --glow-s: 0 0 6px rgba(59,245,143,.55); --glow-m: 0 0 14px rgba(59,245,143,.45), 0 0 34px rgba(59,245,143,.18); --glow-l: 0 0 26px rgba(59,245,143,.55), 0 0 70px rgba(59,245,143,.25); --era-tint: rgba(59,245,143,.04); } /* --- 1973: the machine remembers amber --- */ :root[data-era="past"]{ --p-hot: #ffd79a; --p: #ffb347; --p-mid: #c07c22; --p-dim: #63400f; --p-ghost: rgba(255,179,71,.10); --grid: #3a2611; --line: #4a3216; --paper: #ffe9c9; --paper-dim: #a8865a; --panel: #120b04; --panel-2: #1a1108; --void: #070502; --void-2: #0c0805; --glow-s: 0 0 6px rgba(255,179,71,.55); --glow-m: 0 0 14px rgba(255,179,71,.45), 0 0 34px rgba(255,179,71,.18); --glow-l: 0 0 26px rgba(255,179,71,.55), 0 0 70px rgba(255,179,71,.25); --era-tint: rgba(255,179,71,.05); }