/* --------------------------------------------------------------------------- moxlade.com — the design system, shared with buyer.moxlade.com. Ported 2026-09-13 from the product site's app/tokens.css, which itself is the Claude Design project "Design system for technical websites" (tokens/*.css) with the kit's components as CSS. The values are the design's, unchanged; the one departure is the two @font-face rules below, because a static site has no next/font. Re-sync = diff this file against the product's tokens.css. ONE identity, two papers: the product site sets data-surface="product" (light paper); this umbrella runs the same surface so the two read as one family. data-surface="operator" (dark paper) is kept in the tokens and switches the whole site with one attribute on . --------------------------------------------------------------------------- */ @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/space-grotesk-var.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("fonts/jetbrains-var.woff2") format("woff2"); } /* --- tokens/typography.css ------------------------------------------------ */ :root { /* families. Space Grotesk carries display AND body — one grotesque doing both jobs, which is what gives the family its voice. JetBrains Mono is the matched mono: every label, key, value and command. Faces come from next/font in layout.tsx; the roles below are the design system's, unchanged. */ --font-grotesk: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-sans: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-body: var(--font-sans); --font-display: var(--font-grotesk); --font-code: var(--font-mono); --font-label: var(--font-mono); --font-data: var(--font-mono); /* size scale — technical, tight, no jumps above 1.3x in body range */ --text-2xs: 10.5px; --text-xs: 11.5px; --text-sm: 13px; --text-base: 14.5px; --text-md: 16px; --text-lg: 18.5px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 46px; --text-5xl: 62px; /* weights — 450 is the body weight; 600 is the heaviest used */ --weight-light: 300; --weight-regular: 400; --weight-body: 450; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --leading-flat: 1; --leading-tight: 1.15; --leading-snug: 1.3; --leading-body: 1.55; --leading-loose: 1.7; --tracking-display: -0.03em; --tracking-tight: -0.012em; --tracking-normal: 0em; --tracking-label: 0.06em; --tracking-label-wide: 0.11em; /* composed roles */ --type-display: var(--weight-semi) var(--text-5xl) / 0.98 var(--font-display); --type-title: var(--weight-semi) var(--text-2xl) / 1.2 var(--font-display); --type-heading: var(--weight-medium) var(--text-lg) / var(--leading-snug) var(--font-sans); --type-body: var(--weight-body) var(--text-base) / var(--leading-body) var(--font-body); --type-body-sm: var(--weight-body) var(--text-sm) / var(--leading-body) var(--font-body); --type-code: var(--weight-regular) var(--text-sm) / var(--leading-loose) var(--font-code); --type-label: var(--weight-medium) var(--text-xs) / var(--leading-flat) var(--font-label); --type-data: var(--weight-regular) var(--text-sm) / var(--leading-snug) var(--font-data); } /* --- tokens/colors.css ---------------------------------------------------- */ :root { /* paper — warm-neutral, chroma held under 0.008 */ --paper-0: oklch(0.988 0.003 120); --paper-1: oklch(0.968 0.004 120); --paper-2: oklch(0.940 0.005 120); --paper-3: oklch(0.912 0.006 120); --paper-inverse: oklch(0.205 0.008 130); /* ink */ --ink-0: oklch(0.205 0.010 130); --ink-1: oklch(0.420 0.009 130); --ink-2: oklch(0.580 0.008 130); --ink-3: oklch(0.715 0.007 130); --ink-inverse: oklch(0.965 0.004 120); /* rules — the system's main structural device */ --rule: oklch(0.885 0.006 130); --rule-soft: oklch(0.925 0.005 130); --rule-strong: oklch(0.780 0.007 130); --rule-ink: oklch(0.205 0.010 130); /* accents — equal chroma + lightness, hue varied only */ --accent-1: oklch(0.62 0.13 255); /* verified slate-blue */ --accent-2: oklch(0.62 0.13 75); /* pending amber */ --accent-1-tint: oklch(0.955 0.032 255); --accent-2-tint: oklch(0.958 0.034 75); --accent-1-line: oklch(0.855 0.062 255); --accent-2-line: oklch(0.860 0.064 75); /* semantic surfaces + text */ --surface-page: var(--paper-0); --surface-card: var(--paper-0); --surface-raised: var(--paper-1); --surface-sunken: var(--paper-2); --surface-code: var(--paper-inverse); --surface-hover: oklch(0.955 0.004 120); --surface-selected: var(--accent-1-tint); --text-primary: var(--ink-0); --text-secondary: var(--ink-1); --text-meta: var(--ink-2); --text-faint: var(--ink-3); --text-on-code: oklch(0.905 0.006 120); --text-accent: oklch(0.50 0.11 255); --text-value: var(--ink-0); /* records print in ink on every surface */ --text-link: var(--ink-0); --text-link-hover: oklch(0.50 0.11 255); /* data states — a null is "unread", never a number */ --state-known: var(--accent-1); --state-partial: var(--accent-2); --state-unknown: var(--ink-3); --state-refused: oklch(0.58 0.15 27); --state-refused-tint: oklch(0.955 0.030 27); --focus-ring: oklch(0.62 0.13 255); } /* --- tokens/space.css ----------------------------------------------------- */ :root { --space-0: 0px; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 24px; --space-9: 32px; --space-10: 40px; --space-11: 56px; --space-12: 80px; --space-13: 120px; --space-14: 160px; --measure-prose: 66ch; --measure-narrow: 48ch; --page-max: 1140px; --page-wide: 1320px; --page-gutter: var(--space-8); --section-gap: var(--space-13); --section-gap-tight: var(--space-11); --grid-columns: 12; --grid-gap: var(--space-8); --control-height: 32px; --control-height-lg: 40px; } /* --- tokens/borders.css --------------------------------------------------- */ :root { --hairline: 1px; --border-hairline: var(--hairline) solid var(--rule); --border-soft: var(--hairline) solid var(--rule-soft); --border-strong: var(--hairline) solid var(--rule-strong); --border-ink: var(--hairline) solid var(--rule-ink); --border-dashed: var(--hairline) dashed var(--rule-strong); /* corners stay square; 2px is the only softening allowed on controls */ --radius-0: 0px; --radius-1: 2px; --radius-2: 4px; --radius-pill: 999px; /* elevation is drawn, not blurred — one real shadow, for overlays only */ --shadow-none: none; --shadow-soft: 0 1px 2px oklch(0.205 0.01 130 / 0.05), 0 18px 40px -20px oklch(0.205 0.01 130 / 0.18); --shadow-overlay: 0 1px 0 0 var(--rule), 0 32px 64px -32px oklch(0.205 0.01 130 / 0.28); /* shape aliases — a surface mode re-points these, components never hardcode */ --control-radius: var(--radius-1); --card-radius: var(--radius-1); --shadow-card: var(--shadow-none); --inset-hairline: inset 0 0 0 1px var(--rule); --focus-shadow: 0 0 0 2px var(--surface-page), 0 0 0 3px var(--focus-ring); } /* --- tokens/motion.css ---------------------------------------------------- */ :root { --duration-instant: 80ms; --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 260ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --transition-control: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); } @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } } /* --- tokens/surfaces.css -------------------------------------------------- */ /* Surface modes. ONE identity, two papers. Shared across both, always: the type system, pill controls, 14px cards with the soft shadow, hairline rules, the slate accent, the record format, motion. Light vs dark paper is the only visual difference. [data-surface="product"] — a product's own site (BuyerIntel): light paper. [data-surface="operator"] — the umbrella (Moxlade): dark paper. Kept here although this app only ever sets "product", because dropping half a token system is how the two surfaces drift apart. */ :root { --control-radius: var(--radius-pill); --card-radius: 14px; --shadow-card: var(--shadow-soft); } [data-surface="product"] { --surface-page: var(--paper-0); } [data-surface="operator"] { --paper-0: oklch(0.168 0.008 200); --paper-1: oklch(0.205 0.009 200); --paper-2: oklch(0.240 0.009 200); --paper-3: oklch(0.285 0.010 200); --paper-inverse: oklch(0.945 0.006 90); --ink-0: oklch(0.945 0.006 90); --ink-1: oklch(0.790 0.007 90); --ink-2: oklch(0.640 0.008 100); --ink-3: oklch(0.480 0.009 120); --ink-inverse: oklch(0.168 0.008 200); --rule: oklch(0.300 0.010 200); --rule-soft: oklch(0.240 0.009 200); --rule-strong: oklch(0.400 0.011 200); --rule-ink: oklch(0.945 0.006 90); --accent-1: oklch(0.74 0.13 255); --accent-2: oklch(0.80 0.12 78); --accent-1-tint: oklch(0.265 0.045 255); --accent-2-tint: oklch(0.270 0.045 78); --accent-1-line: oklch(0.400 0.070 255); --accent-2-line: oklch(0.405 0.070 78); --surface-code: oklch(0.128 0.007 200); --surface-hover: oklch(0.220 0.009 200); --text-accent: oklch(0.82 0.12 255); --text-link-hover: oklch(0.82 0.12 255); --text-on-code: oklch(0.880 0.006 90); --state-refused: oklch(0.68 0.16 27); --state-refused-tint: oklch(0.270 0.050 27); --focus-ring: oklch(0.74 0.13 255); --shadow-card: var(--shadow-none); --shadow-soft: none; } /* --- tokens/base.css ------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--surface-page); color: var(--text-primary); font: var(--type-body); letter-spacing: var(--tracking-normal); text-wrap: pretty; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; } /* Prose links. Both the exclusion and the :where() around it are load-bearing. * * WHY THE EXCLUSION. This is a bare element selector and it is UNLAYERED, while * Tailwind's utilities live in @layer utilities — and an unlayered rule beats a * layered one whatever its specificity. So `a { color }` silently overrode * `text-primary-foreground` on every anchor rendered as a Button, which put * near-black text on a near-black pill: the label in the DOM, correct, and * invisible. * * WHY :where() AND NOT A BARE :not(). `:not()` takes the specificity of its * argument, so `a:not([data-slot="button"])` scores 0,1,1 — which then beat * `.ds-btn-primary { color: var(--ink-inverse) }` at 0,1,0 and produced the * SAME black-on-black bug across the whole marketing site, in a different * button system. Fixing one system by raising a global selector is how you * break the other. `:where()` contributes zero specificity, so this stays at * 0,0,1 — exactly what a bare `a` was — and loses to every class-based button * rule as it always did. */ a:not(:where([data-slot="button"], .ds-btn)) { color: var(--text-link); text-decoration: none; border-bottom: 1px solid var(--rule-strong); transition: var(--transition-control); } a:not(:where([data-slot="button"], .ds-btn)):hover { color: var(--text-link-hover); border-bottom-color: currentColor; } code, pre, kbd, samp { font-family: var(--font-code); } ::selection { background: var(--accent-1-tint); color: var(--text-primary); } :focus-visible { outline: none; box-shadow: var(--focus-shadow); } h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); } p { margin: 0; } hr { border: 0; border-top: var(--border-hairline); margin: 0; } /* The design's `a` rule underlines every link with a rule, which is right for prose and wrong for a nav item or a card that happens to be a link. Structural links opt out; they carry their own affordance. */ /* `.plain` removes the prose underline from an anchor that is not prose. It * does that by making the bottom border transparent — which is right for a link * and wrong for a BUTTON, where that same border is one side of the outline. * * At 0,1,1 this beat `.ds-btn-secondary { border-color }` at 0,1,0, so every * outline button rendered as an had three sides and * a gap: a pill visibly cut off along the bottom. It has been that way since the * UI kit landed. The :where() keeps this at 0,1,1 rather than raising it — the * mistake made two commits ago, in the other direction. */ a.plain:not(:where(.ds-btn, [data-slot="button"])), a.plain:not(:where(.ds-btn, [data-slot="button"])):hover { border-bottom-color: transparent; } /* --------------------------------------------------------------------------- Responsive helpers. The design kit branches on a JS `useNarrow()` because its preview host can resize a frame without firing resize events. In a server-rendered app that same branch is a hydration mismatch: the server has no viewport, so it renders the wide layout and a phone repaints on the first client frame. So every LAYOUT decision the kit makes with `narrow ? a : b` is a media query here instead, and `useNarrow` survives only for the one thing that is genuinely behavioural — whether the nav shows a menu button. The breakpoint is the kit's: 760px. --------------------------------------------------------------------------- */ .ds-page { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--page-gutter); } .ds-page-wide { max-width: var(--page-wide); margin: 0 auto; padding-inline: var(--page-gutter); } /* two columns that become one */ .ds-split { display: grid; gap: var(--space-10); align-items: start; } .ds-split-tools { display: grid; gap: var(--space-10); align-items: start; } /* Every track below is minmax(0, …), never a bare `1fr`. A bare `1fr` is minmax(AUTO, 1fr), so the track can never be narrower than its widest child's max-content — one long code line or URL silently widens the track and every sibling sharing it. That is what pushed the hero 25px off a phone and stretched the account cards to 588px inside a 358px box. */ .ds-cols-2, .ds-cols-3, .ds-cols-4, .ds-cols-5 { display: grid; } .ds-cols-2, .ds-cols-3 { grid-template-columns: minmax(0, 1fr); gap: var(--space-9) var(--space-10); } .ds-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-cols-5 { grid-template-columns: minmax(0, 1fr); } .ds-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .ds-hero-actions { display: flex; gap: var(--space-6); align-items: center; flex-direction: column; width: 100%; } .ds-hero-actions > * { width: 100%; } .ds-closing-actions { display: flex; gap: var(--space-5); flex-direction: column; width: 100%; } .ds-section { padding-top: var(--space-11); } .ds-section-hero { padding-top: var(--space-11); /* minmax(0, …) or the track sizes to the WIDEST child's max-content. The hero's meta line ("15 tools over MCP, stateless, spec 2026-07-28") is nowrap and 395px wide, which on a 386px phone set the track and dragged the headline, the paragraph and both buttons out with it — the whole page scrolled 25px sideways and the h1 looked cropped. It was never the h1. */ grid-template-columns: minmax(0, 1fr); } /* The meta line stops being one line when there is no room for one. */ .ds-hero-meta { white-space: nowrap; } @media (max-width: 759px) { .ds-hero-meta { white-space: normal; row-gap: var(--space-2); justify-content: center; } .ds-hero-meta .ds-hero-meta-arrow { display: none; } } .ds-nav-links { display: none; } /* .ds-btn (later in the file) also sets display, so the nav pill needs the extra specificity to stay hidden on a phone. */ .ds-nav-desktop-only, .ds-btn.ds-nav-desktop-only { display: none; } .ds-toolrow-indent { padding: 0 var(--space-2) var(--space-7); } .ds-sidebar { position: static; display: grid; gap: var(--space-6); } @media (min-width: 760px) { .ds-page, .ds-page-wide { padding-inline: var(--page-gutter); } .ds-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .ds-split-tools { grid-template-columns: 210px minmax(0, 1fr); } .ds-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-9) var(--space-9); } .ds-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ds-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ds-row { grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: var(--space-8); } .ds-hero-actions { flex-direction: row; width: auto; } .ds-hero-actions > * { width: auto; } .ds-closing-actions { flex-direction: row; width: auto; margin-left: auto; } .ds-section { padding-top: var(--space-13); } .ds-nav-links { display: flex; gap: var(--space-9); margin: 0 auto; } .ds-nav-desktop-only, .ds-btn.ds-nav-desktop-only { display: inline-flex; } .ds-nav-menu-btn { display: none !important; } .ds-toolrow-indent { padding: 0 var(--space-2) var(--space-7) calc(220px + var(--space-8)); } /* The sidebar carries the page's own contents now, so it can outgrow the viewport — a sticky column taller than the screen hides its own bottom with no way to reach it. Scroll inside itself instead. */ .ds-sidebar { position: sticky; top: 88px; max-height: calc(100vh - 88px - var(--space-6)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } } @media (max-width: 759px) { .ds-page, .ds-page-wide { padding-inline: var(--space-6); } } /* --- docs prose, on the design's type scale ------------------------------- */ /* The four long-form doc pages are plain HTML inside this class. Restyling it is how they join the design system without each one being rewritten. */ .docs-prose { max-width: var(--measure-prose); color: var(--text-secondary); font: var(--type-body); } .docs-prose h2 { font: var(--type-heading); color: var(--text-primary); margin: var(--space-10) 0 var(--space-5); padding-top: var(--space-6); border-top: var(--border-hairline); } .docs-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .docs-prose h3 { font: var(--type-body); font-weight: var(--weight-medium); color: var(--text-primary); margin: var(--space-8) 0 var(--space-4); } .docs-prose p { margin: 0 0 var(--space-6); } .docs-prose ul, .docs-prose ol { margin: 0 0 var(--space-6); padding-left: var(--space-7); } .docs-prose li { margin-bottom: var(--space-4); } .docs-prose li::marker { color: var(--text-faint); } .docs-prose strong { color: var(--text-primary); font-weight: var(--weight-medium); } .docs-prose code { font-family: var(--font-code); font-size: 0.9em; color: var(--text-primary); } .docs-prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-7); font-size: var(--text-sm); } .docs-prose th, .docs-prose td { text-align: left; padding: var(--space-4) var(--space-5) var(--space-4) 0; border-bottom: var(--border-soft); vertical-align: top; } .docs-prose th { font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-meta); } /* --- colour, used to mean something --------------------------------------- The kit already carries two accents and the docs never touched them, so these pages were ink on paper with the structure carried entirely by rules and weight. What follows spends the accents the way the rest of the product does — accent-1 for what is settled, accent-2 for what needs care — rather than adding a third colour for decoration. -------------------------------------------------------------------------- */ /* A section heading now carries the accent as a short leading rule instead of a full-width hairline above it: the eye finds the group faster, and the horizontal line is doing less work now that there is one per tool group. */ .docs-prose h2 { position: relative; } .docs-prose h2::before { content: ""; position: absolute; top: calc(var(--space-6) - var(--hairline)); left: 0; width: var(--space-8); border-top: 2px solid var(--accent-1); } .docs-prose h2:first-child::before { display: none; } /* Tables: a tinted header band and an accent baseline, so the head reads as a head at a glance in a page that has fourteen of them. */ .docs-prose thead th { background: var(--accent-1-tint); border-bottom: var(--hairline) solid var(--accent-1-line); padding-left: var(--space-4); padding-right: var(--space-4); } .docs-prose thead th:first-child { border-top-left-radius: var(--radius-sm, 3px); } .docs-prose thead th:last-child { border-top-right-radius: var(--radius-sm, 3px); } .docs-prose tbody td { padding-left: var(--space-4); padding-right: var(--space-4); } .docs-prose tbody tr:hover td { background: var(--surface-raised); } /* An argument name is the thing you came to the table for. */ .docs-prose td:first-child code { color: var(--accent-1); font-weight: var(--weight-medium); } /* Required vs optional, said in colour as well as in a word — the column is otherwise a wall of yes/no that all reads the same. */ .docs-prose .req { color: var(--accent-1); font-weight: var(--weight-medium); } .docs-prose .opt { color: var(--text-faint); } /* An identifier lifted out of a docstring. Tinted so `next_cursor` in a paragraph is visibly the same kind of thing as next_cursor in the table. */ .docs-prose code.tick { background: var(--accent-1-tint); border: var(--hairline) solid var(--accent-1-line); border-radius: 3px; padding: 0.05em 0.32em; color: var(--text-primary); white-space: nowrap; } /* Chips on the meta line. Amber is the product's "needs care" accent, so it carries the plan gate, the untrusted-data marker and the write flag; a destructive tool gets the same amber with a filled dot, because it is the one thing on this page a person should stop and read. */ .docs-prose .chip { display: inline-block; font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-label); padding: 0.15em 0.5em; border-radius: 3px; border: var(--hairline) solid var(--accent-2-line); background: var(--accent-2-tint); color: var(--ink-1); white-space: nowrap; } .docs-prose .chip-quiet { border-color: var(--rule); background: var(--surface-sunken); color: var(--text-meta); } .docs-prose .chip-danger { border-color: var(--accent-2); font-weight: var(--weight-medium); } .docs-prose .chip + .chip { margin-left: var(--space-3); } /* --- the expanded section list, nested under the page you are on ----------- Each docs entry is its own route, so "the current one is open" IS the accordion: navigating to another collapses this and opens that, with no state to keep and no JavaScript to ship. The indent and the accent rule are what say "these belong to the item above" rather than a heading would. */ .ds-toc { display: grid; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4) var(--space-4); padding-left: var(--space-4); border-left: 2px solid var(--accent-1-line); } .ds-toc a { display: block; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-secondary); padding: 2px 0; text-decoration: none; } .ds-toc a:hover { color: var(--text-primary); } .ds-toc .ds-toc-top { color: var(--text-primary); font-weight: var(--weight-medium); } /* The accent rule ties a group here to the same rule on its heading. */ .ds-toc-sub { display: grid; margin: 2px 0 var(--space-3); padding-left: var(--space-4); border-left: var(--hairline) solid var(--rule); } .ds-toc-sub a { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-meta); } .ds-toc-sub a:hover { color: var(--accent-1); } /* --------------------------------------------------------------------------- Components. The design kit carries hover state in React (`const [h, setH] = useState`) because a preview host cannot ship CSS per component. Here they are CSS pseudo-classes, so a button is a server component and the page ships no JavaScript for a colour change. Values are the kit's. --------------------------------------------------------------------------- */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); height: var(--control-height); padding: 0 var(--space-6); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-normal); border-radius: var(--control-radius); border: 1px solid transparent; background: transparent; color: var(--text-primary); cursor: pointer; text-decoration: none; white-space: nowrap; box-sizing: border-box; transition: var(--transition-control); } .ds-btn-md { height: var(--control-height-lg); padding: 0 var(--space-7); font-size: var(--text-md); } .ds-btn-lg { height: 48px; padding: 0 var(--space-8); font-size: var(--text-md); } .ds-btn-mono { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; } .ds-btn-full { width: 100%; } .ds-btn-primary { background: var(--paper-inverse); color: var(--ink-inverse); border-color: var(--paper-inverse); } .ds-btn-primary:hover { opacity: 0.86; } .ds-btn-secondary { border-color: var(--rule-strong); } .ds-btn-secondary:hover { border-color: var(--rule-ink); } .ds-btn-soft { background: var(--paper-1); } .ds-btn-soft:hover { background: var(--paper-2); } .ds-btn-ghost { color: var(--text-secondary); } .ds-btn-ghost:hover { color: var(--text-primary); } /* a row in the tool reference: the whole row lifts on hover, the summary opens */ .ds-toolrow { border-top: var(--border-soft); transition: var(--transition-control); } .ds-toolrow:hover { background: var(--surface-hover); } .ds-toolrow > summary { list-style: none; cursor: pointer; } .ds-toolrow > summary::-webkit-details-marker { display: none; } .ds-toolrow > summary::marker { content: ""; } .ds-toolrow[open] .ds-toolrow-sign::before { content: "−"; } .ds-toolrow .ds-toolrow-sign::before { content: "+"; } /* tabs and sidebar entries share the underline/selected treatment */ .ds-tab { all: unset; cursor: pointer; padding: 0 0 var(--space-5); margin-bottom: -1px; font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-meta); border-bottom: 1px solid transparent; transition: var(--transition-control); display: inline-flex; align-items: center; gap: var(--space-4); } .ds-tab:hover { color: var(--text-primary); } .ds-tab[data-on="true"] { color: var(--text-primary); border-bottom-color: var(--rule-ink); } .ds-pick { all: unset; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5); padding: var(--space-4) 0; border-bottom: var(--border-soft); font: var(--type-body-sm); color: var(--text-meta); transition: var(--transition-control); } .ds-pick:hover { color: var(--text-primary); } .ds-pick[data-on="true"] { color: var(--text-primary); } /* the resource row and other card-links: no prose underline */ .ds-cardlink { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); border-bottom: var(--border-hairline); } .ds-cardlink:hover { background: var(--surface-hover); } @media (min-width: 760px) { .ds-cardlink { border-left: var(--border-soft); } .ds-cardlink:first-child { border-left: none; padding-left: 0; } } /* The footer's six columns: wordmark plus five link stacks on a wide screen, two columns on a phone. */ .ds-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } @media (min-width: 760px) { /* Three columns since 2026-09-04, wider because the rows are longer now. */ .ds-footer-grid { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 190px)); } } /* The FAQ, one
per question. `[open]` drives the sign, so the same .ds-toolrow-sign rule serves both this and the tool rows. */ .ds-faq { border-top: var(--border-hairline); } .ds-faq > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--space-6); padding: var(--space-6) 0; } .ds-faq > summary::-webkit-details-marker { display: none; } .ds-faq > summary::marker { content: ""; } .ds-faq[open] .ds-toolrow-sign::before { content: "−"; } /* --------------------------------------------------------------------------- Shapes this static site draws that the product draws as components. Values are the kit's (components/ds/*.tsx), written once here as classes. --------------------------------------------------------------------------- */ /* --- colour, used to mean something (moxlade's application of the system) --- Slate (--accent-1, "verified") on every figure that was read from a table or a run; amber (--accent-2, "pending") on what is being watched and not yet a corpus; the mark's rust on ordinals — the mark's newest stratum is the one written in colour, and an ordinal is the line being written. Nothing else on the page carries colour. */ :root { --brand-rust: #A8402C; } [data-surface="operator"] { --brand-rust: oklch(0.72 0.14 30); } .ordinal { color: var(--brand-rust); } .figure { color: var(--text-accent); } /* Badge (kit Badge, tones known / partial) */ .badge { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; border: 1px solid var(--rule); border-radius: var(--control-radius); padding: 4px var(--space-5); white-space: nowrap; color: var(--text-meta); } .badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--ink-3); flex: none; } .badge.known { color: var(--text-accent); border-color: var(--accent-1-line); background: var(--accent-1-tint); } .badge.known::before { background: var(--accent-1); } .badge.partial { color: var(--text-secondary); border-color: var(--accent-2-line); background: var(--accent-2-tint); } .badge.partial::before { background: var(--accent-2); } /* the kit's shared style objects */ .lbl { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-meta); } .data { font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-primary); } .body { font: var(--type-body); color: var(--text-secondary); } .body-sm { font: var(--type-body-sm); color: var(--text-secondary); } .heading { font: var(--type-heading); } .faint { color: var(--text-faint); } .meta { color: var(--text-meta); } /* nav (ProductNav) */ .nav { position: sticky; top: 0; z-index: 30; background: color-mix(in oklab, var(--surface-page) 90%, transparent); backdrop-filter: blur(10px); border-bottom: var(--border-hairline); } .nav-inner { padding: var(--space-5) var(--page-gutter); display: flex; align-items: center; gap: var(--space-6); } .brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); letter-spacing: -0.025em; color: var(--text-primary); } .brand svg { display: block; flex-shrink: 0; } .ds-nav-links a { font-size: var(--text-sm); font-family: var(--font-sans); color: var(--text-meta); transition: var(--transition-control); } .ds-nav-links a:hover, .ds-nav-links a[aria-current="page"] { color: var(--text-primary); } .nav-right { margin-left: auto; display: flex; gap: var(--space-4); align-items: center; } .ds-mobile-nav { display: none; border-top: var(--border-hairline); } .ds-mobile-nav a { display: block; padding: var(--space-6); border-bottom: var(--border-soft); font-size: var(--text-md); color: var(--text-primary); } .nav:has(#menu:checked) .ds-mobile-nav { display: grid; } #menu { display: none; } .ds-nav-menu-btn { cursor: pointer; } /* hero (Landing.jsx) */ .hero { display: grid; justify-items: center; gap: var(--space-9); text-align: center; } .hero h1 { font: var(--type-display); letter-spacing: var(--tracking-display); font-size: clamp(var(--text-3xl), 5.4vw, var(--text-5xl)); max-width: 17ch; text-wrap: balance; } .hero .lede { font: var(--type-body); font-size: var(--text-lg); line-height: 1.5; color: var(--text-meta); max-width: 58ch; } .hero .lede b { font-weight: var(--weight-semi); color: var(--text-primary); } .rule-col .body-sm b { font-weight: var(--weight-medium); color: var(--text-primary); } .hero-meta { display: inline-flex; align-items: baseline; gap: var(--space-5); flex-wrap: wrap; } .hero-meta b { font-family: var(--font-display); font-weight: var(--weight-semi); font-size: var(--text-md); letter-spacing: -0.01em; color: var(--text-accent); } .hero-meta span { font-family: var(--font-sans); font-size: var(--text-md); color: var(--text-meta); } /* Section */ .section-head { display: grid; gap: var(--space-5); padding-bottom: var(--space-9); border-bottom: var(--border-ink); } .section-head.center { border-bottom: none; justify-items: center; text-align: center; } .section-head h2 { font: var(--type-title); letter-spacing: var(--tracking-tight); } .section-head p { font: var(--type-body); color: var(--text-secondary); max-width: var(--measure-prose); } /* StatGrid */ .stats { border-top: var(--border-hairline); } .stats > div { padding: var(--space-6); border-bottom: var(--border-hairline); display: grid; gap: var(--space-3); align-content: start; } .stats .value { font-family: var(--font-mono); font-size: var(--text-xl); line-height: var(--leading-tight); color: var(--text-accent); } /* numbered rule columns (the "rules" block) */ .rule-col { display: grid; gap: var(--space-5); align-content: start; padding-top: var(--space-6); border-top: var(--border-hairline); } /* Card */ .card .title { display: flex; align-items: baseline; gap: var(--space-5); flex-wrap: wrap; justify-content: space-between; } .card { border: var(--border-hairline); border-radius: var(--card-radius); background: var(--surface-card); padding: var(--space-9); display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; box-shadow: var(--shadow-card); } /* KeyValue record */ .kv { margin: 0; min-width: 0; display: grid; gap: 0 var(--space-9); } .kv > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--space-6); padding: var(--space-4) 0; border-bottom: var(--border-soft); } .kv dt { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1; letter-spacing: var(--tracking-label); color: var(--text-meta); white-space: nowrap; } .kv dd { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-value); text-align: right; min-width: 0; overflow-wrap: anywhere; } .kv dd b { font-weight: var(--weight-medium); color: var(--text-accent); } .kv dd.null { color: var(--text-faint); } .kv.left dd { text-align: left; } .kv.left > div { grid-template-columns: 11rem minmax(0, 1fr); } /* the register: an entry is a ds-row with a number in the label column */ .register { border-top: var(--border-hairline); } .entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-8) 0; border-bottom: var(--border-hairline); } .entry .no { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); color: var(--text-faint); line-height: 1.6; display: grid; gap: var(--space-4); align-content: start; justify-items: start; } .entry .no .ordinal { font-size: var(--text-sm); } .entry h3 { font: var(--type-heading); font-size: var(--text-xl); letter-spacing: var(--tracking-tight); } .entry h3 a { border-bottom-color: var(--rule-strong); } .entry-body { display: grid; gap: var(--space-5); min-width: 0; } .entry-body .title { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; } .entry .actions { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; } .entry.blank { opacity: 0.55; padding: var(--space-6) 0; } @media (min-width: 760px) { .entry { grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: var(--space-8); } } /* Callout */ .callout { display: grid; gap: var(--space-4); padding: var(--space-6) 0 var(--space-6) var(--space-7); border-left: 2px solid var(--rule-strong); } .callout.known { border-left-color: var(--accent-1-line); } .callout .body-sm { max-width: var(--measure-prose); } /* CodeBlock, paper variant */ .code { background: var(--paper-1); border: 1px solid var(--rule-soft); border-radius: var(--card-radius); box-shadow: var(--shadow-card); overflow: hidden; } .code .code-head { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-7); border-bottom: 1px solid var(--rule-soft); } .code pre { margin: 0; padding: var(--space-7); background: transparent; color: var(--text-primary); font: var(--type-code); overflow-x: auto; } .code .comment { color: var(--text-faint); } .code .accent { color: var(--text-accent); } .code.ink { background: var(--surface-code); border-color: var(--paper-inverse); box-shadow: none; } .code.ink pre { color: var(--text-on-code); } .code.ink .code-head { border-bottom-color: rgba(255,255,255,0.10); } .code.ink .comment { color: var(--ink-3); } /* footer (Footer) */ .footer { margin-top: var(--space-13); border-top: var(--border-hairline); } .footer-grid { padding: var(--space-10) var(--page-gutter) var(--space-11); display: grid; gap: var(--space-9); } .footer-col { display: grid; gap: var(--space-5); align-content: start; } .footer-col a { font: var(--type-body-sm); color: var(--text-meta); } .footer-bar { border-top: var(--border-soft); } .footer-bar-inner { padding: var(--space-6) var(--page-gutter); display: flex; gap: var(--space-8); flex-wrap: wrap; } .footer-bar-inner .disclaimer { font: var(--type-body-sm); color: var(--text-faint); max-width: 80ch; } .footer-bar-inner .copy { margin-left: auto; } .skip { position: absolute; left: -9999px; } .skip:focus { left: var(--page-gutter); top: var(--space-4); z-index: 40; background: var(--surface-card); border: var(--border-hairline); padding: var(--space-4) var(--space-6); font: var(--type-label); } /* the guides — prose on the design's type scale (mirrors .docs-prose) */ .guide { padding-top: var(--space-11); max-width: var(--page-max); margin: 0 auto; padding-inline: var(--page-gutter); } .guide-head { max-width: var(--measure-prose); display: grid; gap: var(--space-6); padding-bottom: var(--space-9); border-bottom: var(--border-ink); } .guide-head h1 { font: var(--type-title); font-size: clamp(var(--text-2xl), 3.2vw, var(--text-3xl)); letter-spacing: var(--tracking-tight); text-wrap: balance; } .guide-head .lede { font: var(--type-body); font-size: var(--text-md); color: var(--text-secondary); } .guide-head .lede em, .guide em { font-style: normal; color: var(--text-primary); font-weight: var(--weight-medium); } .prose { max-width: var(--measure-prose); } .prose h2 { font: var(--type-heading); font-size: var(--text-xl); letter-spacing: var(--tracking-tight); margin: var(--space-12) 0 var(--space-6); padding-top: var(--space-7); border-top: var(--border-hairline); } .prose h3 { font: var(--type-heading); margin: var(--space-9) 0 var(--space-5); } .prose p, .prose li { font: var(--type-body); color: var(--text-secondary); } .prose p { margin: 0 0 var(--space-6); } .prose ul, .prose ol { margin: 0 0 var(--space-6); padding-left: var(--space-8); } .prose li { margin-bottom: var(--space-4); } .prose li::marker { color: var(--text-faint); } .prose strong { color: var(--text-primary); font-weight: var(--weight-medium); } .prose code { font: var(--type-code); font-size: 0.92em; color: var(--text-primary); background: var(--paper-1); padding: 1px 4px; border-radius: var(--radius-1); } .prose pre { margin: 0 0 var(--space-7); padding: var(--space-7); background: var(--surface-code); color: var(--text-on-code); border-radius: var(--card-radius); font: var(--type-code); overflow-x: auto; } .prose pre code { background: none; padding: 0; color: inherit; font-size: inherit; } .prose .fig { font-family: var(--font-mono); font-size: 0.92em; color: var(--text-accent); font-variant-numeric: tabular-nums; } .prose .record { margin: var(--space-8) 0; } .prose .record > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; gap: var(--space-6); padding: var(--space-4) 0; border-bottom: var(--border-soft); } .prose .record dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); color: var(--text-meta); } .prose .record dd { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-value); overflow-wrap: anywhere; } .prose .record dd b { color: var(--text-accent); font-weight: var(--weight-medium); } .prose .disclosure { margin: var(--space-8) 0 0; padding: var(--space-6) 0 var(--space-6) var(--space-7); border-left: 2px solid var(--accent-2-line); font: var(--type-body-sm); color: var(--text-secondary); max-width: var(--measure-prose); } .tablewrap { margin: 0 0 var(--space-7); overflow-x: auto; -webkit-overflow-scrolling: touch; } .prose table { border-collapse: collapse; width: 100%; min-width: 40rem; font: var(--type-data); font-size: var(--text-xs); } .prose th, .prose td { text-align: left; vertical-align: top; padding: var(--space-4) var(--space-6) var(--space-4) 0; border-bottom: var(--border-soft); color: var(--text-secondary); } .prose th { font: var(--type-label); text-transform: none; color: var(--text-meta); border-bottom: var(--border-hairline); } .prose td b { color: var(--text-accent); font-weight: var(--weight-medium); } .prose td strong { color: var(--text-primary); } .prose tr.ours td { color: var(--text-primary); } .prose caption { caption-side: bottom; text-align: left; padding-top: var(--space-4); font: var(--type-body-sm); font-size: var(--text-xs); color: var(--text-meta); } .prose .cta { margin: var(--space-10) 0 0; } .prose .cta .go { margin-top: var(--space-2); } .prose .cta .price { display: block; margin-top: var(--space-5); font: var(--type-label); text-transform: none; letter-spacing: 0; color: var(--text-meta); } .prose .faq { margin: 0; } .prose .faq dt { font: var(--type-heading); color: var(--text-primary); margin: var(--space-8) 0 var(--space-4); } .prose .faq dd { margin: 0; font: var(--type-body-sm); color: var(--text-secondary); max-width: var(--measure-prose); } .crumbs { font: var(--type-label); text-transform: none; letter-spacing: 0; color: var(--text-meta); margin: 0 0 var(--space-8); } .crumbs a { color: inherit; } .crumbs span { margin-inline: var(--space-3); color: var(--text-faint); } .updated { font: var(--type-label); text-transform: none; letter-spacing: 0; color: var(--text-faint); } .guide-list { list-style: none; margin: 0; padding: 0; border-top: var(--border-ink); } .guide-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-7) 0; border-bottom: var(--border-hairline); } .guide-list h3 { font: var(--type-heading); } .guide-list p { font: var(--type-body-sm); color: var(--text-meta); } @media (min-width: 760px) { .guide-list li { grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: var(--space-8); } .guide-list li > div { display: grid; gap: var(--space-3); } } @media (max-width: 759px) { .prose .record > div, .kv.left > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } } /* the legal pages */ .legal { padding-top: var(--space-11); max-width: var(--page-max); margin: 0 auto; padding-inline: var(--page-gutter); } .legal h1 { font: var(--type-title); font-size: clamp(var(--text-2xl), 3.2vw, var(--text-3xl)); letter-spacing: var(--tracking-tight); } .legal .updated { margin-top: var(--space-4); display: block; } .legal-lede { max-width: var(--measure-prose); margin-top: var(--space-8); padding-top: var(--space-8); border-top: var(--border-ink); font: var(--type-body); font-size: var(--text-md); color: var(--text-primary); } .legal h2 { font: var(--type-heading); margin: var(--space-10) 0 var(--space-5); } .legal p, .legal li { max-width: var(--measure-prose); font: var(--type-body); color: var(--text-secondary); } .legal p { margin: 0 0 var(--space-6); } .legal ul { margin: 0 0 var(--space-6); padding-left: var(--space-8); } .legal li { margin-bottom: var(--space-4); } .legal li::marker { color: var(--text-faint); } .legal strong { color: var(--text-primary); font-weight: var(--weight-medium); } .legal code { font: var(--type-code); font-size: 0.92em; color: var(--text-primary); }