/* TriData Observatory — the whole design system, hand-authored. * * IMPLEMENTS docs/design-tokens.md. That document is precedent: if this file * and it disagree, this file is the bug. No colour, spacing step, radius, * shadow or breakpoint appears here that is not in its tables. * * Read by scripts/site_css.py at import time, hashed, and written to * /assets/tdo..css. It is never minified: the hash is the cache key, the * bytes are the source, and a build step that rewrites CSS is a build step * that can silently change what ships. * * SENTINELS. Three spans are extracted verbatim by scripts/site_css.py so that * other code reuses these bytes instead of restating them: * * @tokens both themes' custom properties * @critical the resilience shell inlined in * @embed what the chrome-less /embed/ page needs on a third-party site * * The sentinel comments are load-bearing. Do not renumber, reorder or delete * them, and do not let a span's braces straddle its end marker. */ /* ========================================================================== * CRITICAL — the resilience shell * -------------------------------------------------------------------------- * Inlined into every . Its ONE job is that a page whose stylesheet did * not arrive — a 404 in the hash window between deploy and cache expiry, a * blocked CDN, a dead connection mid-load — is still a readable document on a * correct background, not black-on-white unstyled text at full window width. * * It is a FALLBACK, not "critical CSS". Do not grow it into an above-the-fold * optimisation: a test asserts it stays under 1200 bytes, and that ceiling is * the point. Every byte here is paid 3411 times. * * It therefore DUPLICATES the handful of tokens it uses, deliberately. A * fallback that resolves its variables from the file it is the fallback for is * not a fallback — every var() would be empty in exactly the case this block * exists for. tests/test_site_markup.py asserts these duplicated values are * identical to the ones in the @tokens span below, so the copy cannot drift. * ======================================================================== */ /* @critical:start */ :root { color-scheme: light dark; --bg: #f7f8fa; --text: #10151f; --accent: #2a5db0; --sp-2: 1rem; --sp-3: 1.5rem; --sp-6: 4rem; --fs-200: 1rem; --fs-500: 1.728rem; --lh-body: 1.65; --lh-tight: 1.25; --w-prose: 720px; --w-wide: 1100px; --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { --bg: #0e1117; --text: #e8ecf4; --accent: #7aa5e8; } } :root[data-theme="dark"] { --bg: #0e1117; --text: #e8ecf4; --accent: #7aa5e8; } *, ::before, ::after { box-sizing: border-box; } /* Author display rules outrank the UA sheet, so the attribute needs this to mean anything. See test_the_hidden_attribute_actually_hides. */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs-200)/var(--lh-body) var(--font-sans); } .wrap { max-width: var(--w-prose); margin: 0 auto; padding: var(--sp-3) var(--sp-2) var(--sp-6); } body.w-wide .wrap { max-width: var(--w-wide); } a { color: var(--accent); } h1 { font-size: var(--fs-500); line-height: var(--lh-tight); margin: 0 0 var(--sp-2); } /* @critical:end */ /* ========================================================================== * TOKENS — docs/design-tokens.md §14 * -------------------------------------------------------------------------- * The dark values are written TWICE, identically, and that is mandatory, not * duplication awaiting a refactor: the media block serves a no-JS visitor on a * dark OS, the [data-theme="dark"] block serves the manual toggle. DRYing them * into one selector list breaks the toggle. A test asserts the two blocks * declare an identical token set with identical values (RULE T2). * * :where(:not([data-theme="light"])) contributes ZERO specificity, so the * media block stays at (0,1,0) and loses to :root[data-theme="dark"] at * (0,1,1). A bare :not() would be (0,2,0) and would outrank the explicit * toggle — the manual choice would lose to the OS, on some machines only. * * RULE T1: every token has its value on bare :root. None is defined only * inside a media query or a [data-theme] block. * ======================================================================== */ /* @tokens:start */ :root { color-scheme: light dark; /* surfaces — the only three grounds a token's contrast is guaranteed on */ --bg: #f7f8fa; --surface: #ffffff; --surface-2: #eef1f6; /* --border is a DECORATIVE SEPARATOR ONLY (1.11:1). It may never bound an interactive control; --border-strong (3.21:1) is the only token that may. See docs/design-tokens.md §4, RULES B1/B2. */ --border: #e2e6ed; --border-strong: #7d8797; --text: #10151f; --text-muted: #59637a; --accent: #2a5db0; /* FROZEN: also hardcoded in FAVICON_SVG and in _favicon_png's (42,93,176,255). Changing it here without those two ships a mismatched favicon that no test catches. docs/design-tokens.md §3. */ --on-accent: #ffffff; /* text ON an --accent fill. NEVER a literal #fff: white on the dark accent is 2.51:1. §6.1 */ --focus: #1f4f9c; --success: #12703a; --warning: #8a5300; --danger: #b42318; /* categorical slots — assigned IN ORDER from 1, never skipped for looks. The order is the colour-blind safety mechanism (§7), not a preference. */ --cat-1: #2a78d6; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #eda100; --cat-5: #e87ba4; --cat-6: #008300; /* elevation — light shadows are tinted with the --text hue, never black */ --elev-1: 0 1px 2px rgba(16,21,31,.06), 0 1px 1px rgba(16,21,31,.04); --elev-2: 0 4px 12px rgba(16,21,31,.10), 0 1px 3px rgba(16,21,31,.06); /* --- theme-independent scales: declared once, here ------------------- */ --sp-0: 0.25rem; /* half-step: icon/label gaps INSIDE a control only */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --fs-100: 0.833rem; /* the FLOOR. There is no step below this. */ --fs-200: 1rem; --fs-300: 1.2rem; --fs-400: 1.44rem; --fs-500: 1.728rem; --fs-600: 2.074rem; --fs-700: 2.488rem; --lh-tight: 1.25; --lh-body: 1.65; --r-sm: 0.25rem; --r-md: 0.5rem; --r-lg: 0.75rem; --r-pill: 999px; --w-prose: 720px; --w-wide: 1100px; --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { --bg: #0e1117; --surface: #161b23; --surface-2: #1e2530; --border: #2b3441; --border-strong: #697487; --text: #e8ecf4; --text-muted: #a2adbf; --accent: #7aa5e8; --on-accent: #0e1117; --focus: #8fb8f0; --success: #4cc47c; --warning: #e0a03c; --danger: #f2807a; --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300; --elev-1: 0 1px 2px rgba(0,0,0,.55); --elev-2: 0 4px 14px rgba(0,0,0,.65); } } /* color-scheme must be restated here: on bare :root it says "follow the OS", so a forced theme left UA control internals painting for the OTHER one (1.11:1). See test_forced_themes_restate_color_scheme. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1117; --surface: #161b23; --surface-2: #1e2530; --border: #2b3441; --border-strong: #697487; --text: #e8ecf4; --text-muted: #a2adbf; --accent: #7aa5e8; --on-accent: #0e1117; --focus: #8fb8f0; --success: #4cc47c; --warning: #e0a03c; --danger: #f2807a; --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300; --elev-1: 0 1px 2px rgba(0,0,0,.55); --elev-2: 0 4px 14px rgba(0,0,0,.65); } /* @tokens:end */ /* ========================================================================== * RESET + BASE TYPE * ======================================================================== */ img, svg, video { max-width: 100%; } h1, h2, h3, h4, p, ul, ol, figure, table { margin: 0; } /* German, Swedish and Dutch compounds are single unbreakable words wider than a 320px viewport: 81 localized pages scrolled sideways, 0 English. See test_long_words_cannot_push_a_page_sideways. */ h1, h2, h3, h4, th, td, a, caption, legend, label { overflow-wrap: break-word; hyphens: auto; } ul, ol { padding-left: var(--sp-3); } h1 { font-size: var(--fs-500); line-height: var(--lh-tight); letter-spacing: -0.01em; margin: 0 0 var(--sp-2); } h2 { font-size: var(--fs-400); line-height: var(--lh-tight); margin: var(--sp-4) 0 var(--sp-1); } h3 { font-size: var(--fs-300); line-height: var(--lh-tight); margin: 0 0 var(--sp-0); } p { margin: 0 0 var(--sp-2); } p:last-child { margin-bottom: 0; } strong { font-weight: 650; } code, kbd, samp { font-family: var(--font-mono); font-size: var(--fs-100); } a:hover { text-decoration: none; } /* One focus treatment, everywhere, no exceptions (§13). Never removed, never replaced by a box-shadow, never narrowed to :focus. The offset is what keeps the ring visible on a control that already has a --border-strong edge. */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* The site has no animation to disable today. This block exists so that the first person to add one inherits the honest default instead of shipping motion to a visitor who asked for none. */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== * LAYOUT + PAGE CHROME * ======================================================================== */ /* Width comes from a class on , set per page by head(width=...). It is NOT state on the Site object: two pages rendered in one build must never be able to leak a width into each other. */ body.w-prose .wrap { max-width: var(--w-prose); } main { display: block; } /* Skip link: off-screen until focused, then a real, visible control. */ .skip { position: absolute; left: var(--sp-1); top: -100%; z-index: 10; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: var(--sp-1) var(--sp-2); text-decoration: none; font-weight: 600; } .skip:focus { top: var(--sp-1); } /* Visually hidden but still announced. NOT display:none — the theme toggle's accessible name lives in one of these, and display:none would delete it. */ .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } header.site { display: flex; align-items: flex-start; gap: var(--sp-2); border-bottom: 1px solid var(--border); padding-bottom: var(--sp-1); margin-bottom: var(--sp-4); } header.site .brand { flex: 1; min-width: 0; } header.site a.home { color: inherit; text-decoration: none; font-weight: 700; font-size: var(--fs-300); } header.site .tag { color: var(--text-muted); font-size: var(--fs-100); } /* Theme toggle. Hidden without [data-js] so a visitor whose JS never ran is never shown a control that cannot work. The button is rendered by the server on every page; this is what keeps it honest. */ .theme-toggle { display: none; } :root[data-js] .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; padding: 0; /* WCAG 2.5.8: 44x44 */ background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-md); cursor: pointer; } .theme-toggle:hover { background: var(--surface-2); } .theme-toggle svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Two icons in the markup, one shown: the swap is CSS, so it costs no JS and cannot desynchronise from the theme the page is actually painted in. */ .theme-toggle .i-moon { display: none; } :root[data-theme="dark"] .theme-toggle .i-sun { display: none; } :root[data-theme="dark"] .theme-toggle .i-moon { display: inline; } .site-foot { margin-top: var(--sp-5); border-top: 1px solid var(--border); padding-top: var(--sp-2); color: var(--text-muted); font-size: var(--fs-100); } /* Language switcher. The inner markup is pinned byte-for-byte by a frozen test, so this styles the wrapper only. */ .langbar { margin-top: var(--sp-3); } .langbar .note { margin: 0; } .langbar [aria-current] { color: var(--text); } /* ========================================================================== * COMPONENTS * ======================================================================== */ .meta { color: var(--text-muted); font-size: var(--fs-100); margin: 0 0 var(--sp-3); } .note { color: var(--text-muted); font-size: var(--fs-100); } .card { background: var(--surface); border: 1px solid var(--border); /* not clickable as a whole -> RULE B1 */ border-radius: var(--r-lg); box-shadow: var(--elev-1); padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; } .card h3 { margin: 0 0 var(--sp-0); font-size: var(--fs-300); } .card h3 a { text-decoration: none; } /* The ratified card-heading grammar (Phase 3 wave B consolidation): card titles are

— the outline under a page h1 is h1 -> h2, no skip — drawn at the same weight .card h3 has always had. line-height and font-size are explicit so the 1024px h2 upscale never applies inside a card. .card h3 stays styled for the transition and for JS-rendered legacy markup. / .card h2 { margin: 0 0 var(--sp-0); font-size: var(--fs-300); line-height: var(--lh-tight); } .card h2 a { text-decoration: none; } .card p { margin: var(--sp-1) 0 0; color: var(--text-muted); } .card p:last-child { margin-bottom: 0; } / Responsive card grid for listing/home card lists. Opt-in wrapper: the cards keep their own look; the grid only takes over their vertical margins (gap owns the spacing, or every row is sp-2 + sp-2 tall). minmax(0,1fr) lets a long unbroken title shrink instead of forcing a page scroll at 320px. / .card-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin: var(--sp-2) 0; } .card-grid > .card { margin: 0; } .pill { display: inline-block; padding: 0 var(--sp-1); border-radius: var(--r-pill); font-size: var(--fs-100); border: 1px solid var(--border); color: var(--text-muted); margin: 0 var(--sp-0) var(--sp-0) 0; } .pill-accent { border-color: var(--accent); color: var(--accent); } table { width: 100%; border-collapse: collapse; font-size: var(--fs-200); } th, td { text-align: left; padding: var(--sp-1); border-bottom: 1px solid var(--border); vertical-align: top; } th { color: var(--text-muted); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .04em; } / Table-to-card (promoted from the W-TOOLS page-scoped block, byte-identical values): a `.tw.tcard` wrapper renders card-per-row below 768px and a plain table from 768px up. The hidden header row's text reappears per cell as a ::before label. Everything about that label EXCEPT its text lives here; the text is translated content, so each page ships a three-rule content-only style block generated from the SAME translated th_ and dh_ header strings its own thead uses (zero i18n keys, and the two can never drift — and note for editors: never write those two key globs joined by a slash in this file, the star-slash pair terminates a CSS comment and silently truncates the whole stylesheet from this point on; a browser check caught exactly that). ::before renders nothing until a page rule supplies content, so these rules are inert elsewhere. Column 1 (the row's own title) gets no label. NOTE for page rules: scope them @media (max-width: 767.98px) — their :nth-of-type selectors outweigh any content:none reset this file could stage against them. / .tcard table, .tcard tbody { display: block; } .tcard thead { display: none; } .tcard tr { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--elev-1); padding: var(--sp-1) var(--sp-2); margin: 0 0 var(--sp-2); } .tcard td { display: block; border: 0; padding: var(--sp-0) 0; } .tcard td::before { display: block; color: var(--text-muted); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .04em; } / 44px floor: .cta renders for the first time the night a thesis publishes, so it has never been seen on the live site. It measured 227x42. / .cta { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; background: var(--accent); color: var(--on-accent); / NEVER #fff — see §6.1 / padding: var(--sp-1) var(--sp-3); border-radius: var(--r-md); text-decoration: none; font-weight: 600; margin-top: var(--sp-1); } .cta:hover { opacity: .92; } / ========================================================================== * EMBED SPAN * -------------------------------------------------------------------------- * Everything from here to @embed:end is ALSO shipped inside the chrome-less * /tools/log-volume-calculator/embed/ page, as a self-contained