/* Umbrella — shared design system. * * Brand kit (docs/umbrella/BRAND.md): Deep Slate + Tech Blue on white, an 8px * spacing scale, 4px radius, hairline borders. "Engineered, not decorated" — * no gradients, no shadows, no illustration, no rounded pills. * * Two deliberate departures from the previous version, both taken from the * brand doc rather than around it: * * Type is Geist, not Inter. BRAND.md names "Geist, fallback Inter" and the * site had been shipping the fallback. Geist Mono replaces JetBrains Mono for * the same reason plus one more: on this site the monospace is carrying * CONTENT — domains, filenames, response headers — not captions, so it should * come from the same family as the text it sits beside. * * One dark surface exists, `--source`. It is used for exactly one thing: the * blocks that show real files and real command output. Source is read on a * dark surface in every tool this audience uses, and confining the darkness * to those blocks keeps it a signal rather than a style. */ /* ── Type ─────────────────────────────────────────────────────────────────── Self-hosted, not loaded from Google Fonts. Hotlinking fonts.googleapis.com sends every visitor's IP address to a third party on every page view — a disclosure this site would then have to make in its own privacy policy, and one German courts have already ruled on. Serving four files from our own origin removes the disclosure, the two preconnects and a render-blocking cross-origin request in a single change. Geist and Geist Mono are variable fonts covering 400-600, so one @font-face per family per subset is the whole set: three weight-specific rules fetched the same bytes three times. Licence: SIL Open Font License 1.1, see fonts/LICENSE.md. */ @font-face{font-family:'Geist';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/geist-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:'Geist';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/geist-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:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/geist-mono-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:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/geist-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} :root{ --slate:#182B4D; --blue:#1769FF; --blue-press:#0F52D9; --bg:#fff; --neutral:#F5F7FA; --border:#E4E7EC; --ink:#182B4D; --muted:#5A6478; --source:#0B1524; --source-ink:#C9D5E8; --source-dim:#6B7C99; --source-rule:#1E2C44; --ok:#16A34A; --warn:#F59E0B; --bad:#DC2626; /* Text-safe variants. --ok/--bad stay for rules, borders and glyphs that sit beside a text label carrying the meaning; anything where the COLOURED TEXT IS the message uses these. Measured against AA's 4.5:1 body-text floor: --ok on white is 3.30:1 and --bad on the dark page is 3.72:1, both short. The dark red reuses the salmon already in the source panels rather than introducing a second red. */ --ok-text:#15803D; --bad-text:#DC2626; /* Link text, separate from --blue. --blue is the BUTTON colour, where the contrast that matters is white-on-blue; as link text on the dark-mode page it measures 3.84:1 and on the dark neutral 3.52:1, both under AA's 4.5:1. Lighthouse reported three links, but the defect was every prose link on every page in dark mode. The light value is --blue-press rather than --blue for the same reason one step down: #1769FF clears 4.5:1 on white (4.66) but not on --neutral (4.35), and links sit on that surface inside every .note and .reassure panel. A link colour that passes on one of the two surfaces it is used on is not a passing link colour. This one measures 6.50:1 on white and 6.05:1 on the neutral, and is a value the palette already had. */ --link:#0F52D9; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s10:80px; --s12:96px; --sans:Geist, Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --wrap:1100px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.65 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--s3)} .narrow{max-width:720px} /* A 1100px column on a 2560px display is a ribbon in the middle of a white field, with the window's scrollbar stranded a long way from anything it scrolls. Prose still stops at its own readable measure — that is what the 68ch caps are for — but the structural elements (header, source panels, tables, plan cards, the editorial grid) get more of the display, so the page reads as laid out for the screen rather than ignoring it. */ @media (min-width:1500px){ :root{ --wrap:1280px } } @media (min-width:1900px){ :root{ --wrap:1400px } } a{color:var(--link); text-decoration:none} a:hover{text-decoration:underline} /* WCAG 1.4.1: a link inside a block of text must be distinguishable by something other than colour. This site had `text-decoration:none` on every link and an underline only on hover, so in prose the colour was the only signal — which is nothing at all to a reader who cannot separate the two. Nav and footer link LISTS are deliberately exempt and stay undecorated: the requirement is about links EMBEDDED in text, and a list of links needs no underline to be recognised as one. Thin, offset, and drawn at 45% so it reads as a considered underline on a page with no other decoration rather than a default browser hyperlink. If color-mix is unsupported the declaration drops and the underline falls back to the link's own colour, which is a weaker result and still a passing one. */ p a:not(.btn), li a:not(.btn), dd a:not(.btn){ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; text-decoration-color:color-mix(in srgb, var(--link) 45%, transparent); } p a:not(.btn):hover, li a:not(.btn):hover, dd a:not(.btn):hover{ text-decoration-color:var(--link); } /* Link lists, not prose. Also the table of contents, whose items are `li a`. */ header nav a, footer a, .toc a{text-decoration:none} /* Focus is visible everywhere and never removed. The offset keeps the ring off the glyphs on a hairline-bordered page where 1px is meaningful. */ a:focus-visible,button:focus-visible,summary:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:2px; } h1,h2,h3{margin:0; font-weight:600; line-height:1.12; letter-spacing:-0.026em} p{margin:0} .eyebrow{ font:500 12px/1 var(--sans); letter-spacing:.15em; text-transform:uppercase; color:var(--muted); } code,.mono{font-family:var(--mono); font-size:.9em; letter-spacing:-0.01em} /* ── Header ─────────────────────────────────────────────────────────────── */ header{border-bottom:1px solid var(--border)} header .wrap{display:flex; align-items:center; justify-content:space-between; height:72px; gap:var(--s3)} .brand{display:flex; align-items:center; gap:10px; color:inherit} .brand:hover{text-decoration:none} .brand svg{display:block; flex:none} .brand .name{font-weight:600; letter-spacing:-0.03em; color:var(--slate); font-size:20px; display:block} .brand .sub{color:var(--muted); font-size:11.5px; letter-spacing:.02em; display:block; margin-top:1px} /* Scoped to the header. Unscoped, this rule reached the table-of-contents