/* * Design tokens (CSS custom properties) + the page-wide reset. * * Palette: "Midnight Slate" — blue-grey neutrals with a blue signal accent. * See /style-guide/STYLEGUIDE.md at the project root for the full palette * reference (hex values, nearest Pantone matches, usage guidelines). * * Light mode is a re-tuned companion palette (same hues, different * lightness/saturation for contrast on a light ground), not a different * theme — toggled by setting data-theme="light" on , via the * theme-init snippet in each page's plus assets/js/site-header.js. */ :root { --bg: #181b21; --panel: #262b37; --line: #3e4657; --line-dim: #1f232c; --text: #e2eaeb; --muted: #8699ab; --muted-dim: #515c6b; --signal: #6ea2d5; --signal-ink: #101115; --sky: #6ea2d5; --sky-ink: #101115; --gold: #d99a3d; --olive: #7f8a6a; --rust: #b85c34; --mono: 'JetBrains Mono Text', ui-monospace, Consolas, monospace; --display: 'Fraunces Display', Georgia, serif; --text-face: 'JetBrains Mono Text', ui-monospace, Consolas, monospace; } :root[data-theme="light"] { --bg: #e7ecf6; --panel: #f8faff; --line: #b8c3d9; --line-dim: #d2daec; --text: #1a2324; --muted: #54626f; --muted-dim: #8594a8; --signal: #2d6093; --signal-ink: #eef1fb; --sky: #2d6093; --sky-ink: #eef1fb; --gold: #a66f1f; --olive: #5f6b4e; --rust: #954a29; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); min-height: 100%; } body { font-family: var(--text-face); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } /* picture defaults to inline in most UA stylesheets, which leaves a phantom gap under the image (baseline alignment) wherever it isn't blockified for free by a flex/grid parent - block everywhere instead of relying on that. */ picture { display: block; } .skip-link { position: absolute; top: -100%; left: 8px; z-index: 100; background: var(--panel); color: var(--text); border: 1px solid var(--line); padding: 10px 16px; font-family: var(--mono); font-size: 13px; } .skip-link:focus { top: 8px; } /* * Custom elements (site-header, site-footer, security-audit) have no * built-in styling, so without this they'd default to `display: inline` * and break the pane grid. This is boilerplate any custom element on the * page needs, regardless of which page it's used on. */ site-header, site-footer, security-audit, related-posts, site-services { display: block; } /* * Custom elements only get their real content once their defining script * runs and calls customElements.define() (see assets/js/*.js, all loaded * at the bottom of ) — until then, hide them to avoid a flash of * bare unstyled tags. In practice this upgrade happens immediately since * the scripts are plain, render-blocking classic scripts, not deferred. */ site-header:not(:defined), site-footer:not(:defined), security-audit:not(:defined), related-posts:not(:defined), site-services:not(:defined) { visibility: hidden; }