/* quartermaster.dev: the marketing/docs site. * * Palette is lifted verbatim from the app (ui-svelte/src/index.css) so the page * and the screenshots on it are the same object: warm charcoal + orange in dark, * brown on cream in light. Dark is the default; light follows the OS and the * header toggle overrides both via [data-theme] on . * * Hand-written, no framework: the whole site is ~10 static pages and Tailwind's * build step would only exist to be configured. */ :root, :root[data-theme="dark"] { --bg: rgb(34 32 30); --surface: rgb(44 42 38); --surface-2: rgb(56 53 48); --text: rgb(237 237 238); --muted: rgb(161 161 166 / 0.85); --primary: rgb(255 106 43); --primary-hover: rgb(255 130 69); /* The header mark's second tone. The mark draws its bright parts in currentColor (.brand svg takes --primary), so only the deep one needs stating; on the light ground it tracks --primary down rather than keeping the app's bright orange, which washes out on cream. */ --mark-deep: rgb(184 65 14); --on-primary: rgb(255 250 245); --border: rgb(168 168 176 / 0.2); --border-soft: rgb(168 168 176 / 0.11); --dot: rgb(180 180 190 / 0.09); --shadow: 0 24px 60px -20px rgb(0 0 0 / 0.6); --glow: rgb(255 106 43 / 0.16); /* The app's own inference ramp (STREAM_HEAT in InferenceFeedback.svelte): dim ember -> red -> orange -> amber -> hot yellow. Tail to tip along a streak, so the leading edge is the hot end. */ --ember-tail: rgb(185 28 28); --ember-core: rgb(234 88 12); --ember-tip: rgb(251 191 36); --ember-hot: rgb(253 224 71); /* One dial for the whole effect, so the light theme can pull it back without restating every colour. */ --ember-a: 1; color-scheme: dark; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: rgb(240 230 214); --surface: rgb(248 240 226); --surface-2: rgb(253 249 241); --text: rgb(26 23 20); --muted: rgb(107 98 89); --primary: rgb(120 72 40); --primary-hover: rgb(96 56 28); --mark-deep: rgb(86 44 13); --on-primary: rgb(250 246 238); --border: rgb(40 30 20 / 0.18); --border-soft: rgb(40 30 20 / 0.1); --dot: rgb(40 30 20 / 0.06); --shadow: 0 24px 60px -24px rgb(60 40 20 / 0.28); --glow: rgb(199 88 18 / 0.14); /* Deeper on parchment: the dark theme's yellows read as smudges on a light ground, and the whole effect needs about half the strength to sit at the same visual weight. */ --ember-tail: rgb(153 27 27); --ember-core: rgb(194 65 12); --ember-tip: rgb(217 119 6); --ember-hot: rgb(234 158 11); --ember-a: 0.55; color-scheme: light; } } :root[data-theme="light"] { --bg: rgb(240 230 214); --surface: rgb(248 240 226); --surface-2: rgb(253 249 241); --text: rgb(26 23 20); --muted: rgb(107 98 89); --primary: rgb(120 72 40); --primary-hover: rgb(96 56 28); --mark-deep: rgb(86 44 13); --on-primary: rgb(250 246 238); --border: rgb(40 30 20 / 0.18); --border-soft: rgb(40 30 20 / 0.1); --dot: rgb(40 30 20 / 0.06); --shadow: 0 24px 60px -24px rgb(60 40 20 / 0.28); --glow: rgb(199 88 18 / 0.14); /* Deeper on parchment: the dark theme's yellows read as smudges on a light ground, and the whole effect needs about half the strength to sit at the same visual weight. */ --ember-tail: rgb(153 27 27); --ember-core: rgb(194 65 12); --ember-tip: rgb(217 119 6); --ember-hot: rgb(234 158 11); --ember-a: 0.55; color-scheme: light; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-400.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-500.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/jetbrains-mono-700.woff2") format("woff2"); } /* Mono for headings and every bit of chrome (nav, buttons, labels, tabs); Inter * for anything you actually read a paragraph of. The app is a console for a * machine (its typography should say so), but a docs page set in mono is a * docs page nobody finishes. */ :root { --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Anchors land below the sticky header rather than under it. */ scroll-padding-top: 5.5rem; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* The dotted ground the app uses on its own empty states, at page scale. * * A fixed element under scrolling content is repainted with the scroll unless * it owns a compositor layer, and a 22px gradient tile across the viewport is * not a cheap repaint. translateZ promotes it once; after that the scroll is a * matrix change on the layers above it and this one is never touched. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; transform: translateZ(0); } a { color: inherit; text-decoration: none; } code, kbd, pre { font-family: var(--mono); } h1, h2, h3, .brand, .btn, .eyebrow, .pills li, .docs-nav h4, .site-nav, .shot-bar span, .cta-note { font-family: var(--mono); } .wrap { width: min(100% - 2.5rem, 1120px); margin-inline: auto; } /* ── Header ──────────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 20; /* No backdrop-filter. A frosted header re-blurs whatever is beneath it on * every single scrolled frame, and what scrolls beneath this one is a * full-bleed screenshot: the most expensive backdrop there is. A nearly * opaque bar reads the same at a glance and costs one composite. */ background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid var(--border-soft); } .site-header .wrap { display: flex; align-items: center; gap: 1.5rem; height: 4rem; } .brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem; } .brand svg { color: var(--primary); } .site-nav { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; font-size: 0.8rem; color: var(--muted); } .site-nav a:hover { color: var(--text); } .icon-btn { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.5rem; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; } .icon-btn:hover { color: var(--text); background: var(--surface); } /* The toggle shows the theme you'd switch TO, so exactly one glyph is live. */ .icon-btn .moon { display: none; } :root[data-theme="light"] .icon-btn .moon { display: block; } :root[data-theme="light"] .icon-btn .sun { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .icon-btn .moon { display: block; } :root:not([data-theme="dark"]) .icon-btn .sun { display: none; } } /* ── Buttons ─────────────────────────────────────────────────────────────── */ /* `display` on a class beats the hidden attribute, and the hero renders one download button per platform with all but the matching one hidden. */ [hidden] { display: none !important; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.25rem; border-radius: 0.7rem; border: 1px solid transparent; font-weight: 500; font-size: 0.85rem; letter-spacing: -0.01em; line-height: 1.2; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 24px -10px var(--primary); } .btn-primary:hover { background: var(--primary-hover); } .btn-ghost { border-color: var(--border); color: var(--text); } .btn-ghost:hover { background: var(--surface); } /* ── Hero ────────────────────────────────────────────────────────────────── */ .hero { position: relative; padding: clamp(3.5rem, 9vw, 7rem) 0 3rem; text-align: center; overflow: clip; } /* Ember streaks: the hero's one piece of decoration, in the colours the app * paints while a model is decoding. Markup comes from renderEmbers() in * build.mjs, which hands each streak its own --top/--w/--h/--dur/--delay/--peak. * * `contain: strict` needs an explicit size, which the fixed height gives it; it * is what keeps seven animating children from invalidating layout anywhere else * on the page. */ .embers { position: absolute; z-index: -1; inset: 0 0 auto; height: 44rem; overflow: hidden; pointer-events: none; contain: strict; } /* Two elements per streak on purpose. The wrapper does nothing but translate -- * a matrix change the compositor handles by itself -- while the blurred trail * and the crisp filament are painted ONCE into that layer and never * re-rasterized. Blurring the animated element itself, or scaling it, would redo * the blur every frame: the same trap the .mesh comment below describes. */ .embers i { position: absolute; top: var(--top); left: 0; width: var(--w); height: var(--h); opacity: 0; will-change: transform, opacity; animation: ember-run var(--dur) linear var(--delay) infinite; } .embers i::before, .embers i::after { content: ""; position: absolute; inset: 0; } /* The trail: soft, wide, and hotter toward the leading (right) edge. */ .embers i::before { background: linear-gradient( 90deg, transparent 0%, var(--ember-tail) 34%, var(--ember-core) 68%, var(--ember-tip) 88%, transparent 100% ); filter: blur(5px); } /* The filament: a hairline of the hot end of the ramp, only near the head, so a * streak has a definite front instead of fading out at both ends. */ .embers i::after { top: 50%; height: 1px; translate: 0 -50%; background: linear-gradient(90deg, transparent 55%, var(--ember-hot) 92%, transparent 100%); opacity: 0.7; } /* Only the first third of the cycle is flight; the rest is parked offscreen at * zero opacity. Seven streaks with different durations and negative delays then * arrive at intervals that never line up, and typically one to three are in * frame -- an irregular rhythm out of nothing but staggered CSS timing. */ @keyframes ember-run { 0% { transform: translate3d(calc(-1 * (var(--w) + 6rem)), 0, 0); opacity: 0; } 4% { opacity: calc(var(--peak) * var(--ember-a)); } 26% { opacity: calc(var(--peak) * var(--ember-a)); } 33%, 100% { transform: translate3d(calc(100vw + 6rem), 0, 0); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .embers { display: none; } } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; } .eyebrow b { color: var(--primary); font-weight: 700; } /* Mono runs wide, so the display sizes come down a notch from the Inter-era * values and the tracking backs off: negative tracking that flatters a * grotesque just smears a monospace face. */ h1 { margin: 1.4rem auto 0; max-width: 17ch; font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; } h1 .accent { background: linear-gradient(100deg, var(--primary), var(--primary-hover)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lede { margin: 1.25rem auto 0; max-width: 62ch; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.15rem); } .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; } /* The five things someone scans for before reading anything. */ .pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 1.6rem 0 0; padding: 0; list-style: none; } .pills li { padding: 0.28rem 0.7rem; border-radius: 999px; border: 1px solid var(--border-soft); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--muted); font-size: 0.72rem; letter-spacing: -0.01em; } .pills li::before { content: "▪ "; color: var(--primary); } .cta-note { margin-top: 0.9rem; color: var(--muted); font-size: 0.75rem; } /* Three soft blobs on long, offset drifts: a gradient mesh made of three divs * and two keyframes. * * The softness is a radial-gradient that fades to transparent, NOT filter: * blur(), and the container has no mask. Both of those are per-frame GPU work * on a layer that overlaps the sticky header and the hero screenshot, and that * showed up as stutter in the first screen of scrolling. A gradient is painted * once into a texture and then only translated. */ .mesh { position: absolute; z-index: -1; inset: -10% -5% auto; height: 46rem; overflow: hidden; pointer-events: none; contain: strict; } /* Dimmer than it was: with the ember streaks carrying the hero, the mesh is now the ambient ground they cross rather than the effect itself. */ .mesh i { position: absolute; display: block; opacity: 0.45; will-change: transform; } .mesh i:nth-child(1) { top: -6%; left: 14%; width: 46rem; height: 36rem; background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 34%, transparent), transparent); animation: drift-a 26s ease-in-out infinite alternate; } .mesh i:nth-child(2) { top: 8%; right: 6%; width: 42rem; height: 34rem; background: radial-gradient(closest-side, color-mix(in srgb, var(--primary-hover) 26%, transparent), transparent); animation: drift-b 34s ease-in-out infinite alternate; } .mesh i:nth-child(3) { top: 22%; left: 38%; width: 36rem; height: 28rem; background: radial-gradient(closest-side, color-mix(in srgb, var(--text) 10%, transparent), transparent); animation: drift-a 41s ease-in-out infinite alternate-reverse; } /* Translation only. Scaling a blurred layer makes the compositor re-rasterize * the blur every frame, which is exactly the kind of work that shows up as a * stutter the moment you start scrolling; moving one is a matrix change and * costs nothing. */ @keyframes drift-a { from { transform: translate3d(-7%, -5%, 0); } to { transform: translate3d(9%, 7%, 0); } } @keyframes drift-b { from { transform: translate3d(6%, 4%, 0); } to { transform: translate3d(-8%, -6%, 0); } } @media (prefers-reduced-motion: reduce) { .mesh i { animation: none; } } .cta-note code { padding: 0.1rem 0.3rem; border-radius: 0.25rem; background: var(--surface); border: 1px solid var(--border); color: var(--text); user-select: all; } .cta-note a { text-decoration: underline; text-underline-offset: 3px; } /* ── Screenshot frame ────────────────────────────────────────────────────── */ .shot { margin-top: 3.5rem; border-radius: 0.9rem; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; } .shot-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border-soft); background: var(--surface); } .shot-bar i { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--border); } .shot-bar span { margin-left: 0.5rem; color: var(--muted); font-size: 0.72rem; font-family: "JetBrains Mono", monospace; } .shot img { display: block; width: 100%; height: auto; } /* A cropped modal is taller than it is wide. Stretched across the full column * it renders about twice its captured size - soft, and too tall to take in at * a glance - so the frame hugs it at roughly the width it was shot at instead * of the width the column offers. */ .shot.portrait { width: min(100%, 32rem); margin-inline: auto; } /* ── Sections ────────────────────────────────────────────────────────────── */ section { padding: clamp(3rem, 7vw, 5.5rem) 0; } /* Centred mastheads: eyebrow, heading, sub-lede. Centring is what makes a long * page read as a sequence of chapters rather than one column of left-aligned * text that never announces a new subject. */ .section-head { max-width: 62ch; margin: 0 auto 2.75rem; text-align: center; } .section-head .eyebrow { margin-bottom: 1rem; padding: 0.22rem 0.7rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); border-color: color-mix(in srgb, var(--primary) 28%, transparent); } .section-head .eyebrow svg { opacity: 0.85; } .section-head h2 { margin: 0; font-size: clamp(1.45rem, 2.9vw, 1.95rem); letter-spacing: -0.02em; line-height: 1.2; } .section-head p { margin: 0.85rem auto 0; max-width: 58ch; color: var(--muted); font-size: 0.95rem; } /* Scroll reveals. The hidden state only exists once JS has added `.reveal`, so * a page with JS off, a crawler, or a screenshotter that never fires the * observer all see the finished page, and the animation can only ever be the * difference between "arrives" and "was already there". */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms); } .reveal.in { opacity: 1; transform: none; } .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Cards stretch to a common height per row. Ragged bottoms read as broken * layout even when the copy lengths honestly differ. */ align-items: stretch; } .card { display: flex; flex-direction: column; padding: 1.4rem; border-radius: 0.85rem; border: 1px solid var(--border-soft); background: var(--surface); transition: border-color 0.15s, transform 0.15s; } .card:hover { border-color: var(--border); transform: translateY(-2px); } .card h3 { margin: 0.9rem 0 0.4rem; font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; } .card p { margin: 0; color: var(--muted); font-size: 0.9rem; } /* Flex, not a single grid cell: a card may carry two marks (Linux + Apple are one download), and the badge grows sideways to hold them instead of stacking the second one out of the box. min-width keeps the single-mark case square. */ .card .ico { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: fit-content; min-width: 2.25rem; height: 2.25rem; padding-inline: 0.45rem; border-radius: 0.6rem; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); } /* ── Install ─────────────────────────────────────────────────────────────── */ #install .card { display: flex; flex-direction: column; gap: 0.9rem; } #install .card p { flex: 1; } .install-note { margin: 1.25rem 0 0; text-align: center; font-size: 0.88rem; color: var(--muted); } .install-note a { color: var(--primary); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); } .install-note a:hover { border-bottom-color: var(--primary); } pre { margin: 0; padding: 0.8rem 0.9rem; border-radius: 0.6rem; border: 1px solid var(--border-soft); background: var(--surface-2); overflow-x: auto; font-size: 0.78rem; line-height: 1.6; } /* ── Terminal blocks ─────────────────────────────────────────────────────── */ .term { border-radius: 0.65rem; border: 1px solid var(--border-soft); background: var(--surface-2); overflow: hidden; } .term-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border-soft); background: color-mix(in srgb, var(--surface) 60%, transparent); } .term-bar i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--border); } .term-bar > span { margin-left: 0.35rem; color: var(--muted); font-family: var(--mono); font-size: 0.68rem; } .copy { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; padding: 0.2rem 0.45rem; border-radius: 0.35rem; border: 1px solid var(--border-soft); background: transparent; color: var(--muted); font-family: var(--mono); font-size: 0.66rem; cursor: pointer; } .copy:hover { color: var(--text); border-color: var(--border); } /* Confirmation lives on the button that was clicked: no toast, no layout * shift, and it says the same thing whether the async clipboard API was * available or the textarea fallback ran. */ .copy.ok { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); } .copy.ok b::after { content: "ied"; } .term pre { border: 0; border-radius: 0; background: transparent; padding: 0.7rem 0.85rem; font-size: 0.73rem; } /* An install command must be readable at a glance, not discovered by scrolling * a box sideways, so these wrap. Code inside a docs article keeps `pre` * (config YAML relies on its columns). */ .term .ln { display: block; padding-left: 1.1rem; text-indent: -1.1rem; white-space: pre-wrap; overflow-wrap: anywhere; } /* The prompt is markup, never text: `data-copy` holds the raw command, so the * clipboard never picks up a `$` you'd have to delete. */ .term .ln::before { content: "$ "; color: var(--primary); opacity: 0.75; } .term .ln.cont::before { content: " "; } .term .cm { color: var(--muted); opacity: 0.75; } /* ── Story ───────────────────────────────────────────────────────────────── */ .wrap.narrow { width: min(100% - 2.5rem, 720px); } .story { position: relative; padding-left: 1.4rem; border-left: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); } .story p { margin: 0 0 1.1rem; color: var(--muted); font-size: 1.02rem; } .story p:first-child { color: var(--text); } .story p:last-child { margin-bottom: 0; color: var(--text); font-weight: 600; } .story a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } /* ── Showcase sections ───────────────────────────────────────────────────── */ /* Four claims that earn a picture, each its own scroll-into block. The rhythm * comes from alternating which side the screenshot lands on; a section whose * shots need the full width (a gallery) breaks that rhythm on purpose, which is * what keeps eight screens of page from reading as one long list. */ .sc { padding: clamp(2.5rem, 5.5vw, 4.5rem) 0; } /* The masthead already introduced the run, so the first block does not need to * restate the gap between them. */ #features + .sc { padding-top: 0; } .sc-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); } /* Flipped by DOM order, not by direction: `order` keeps the copy first in the * source, so a screen reader and the keyboard still meet the claim before the * evidence on every block. */ .sc-split.is-flipped .sc-copy { order: 2; } .sc-copy h3 { margin: 0.75rem 0 0.6rem; font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .sc-copy > p { margin: 0; max-width: 54ch; color: var(--muted); font-size: 0.98rem; } /* Centred copy: a gallery section leads with it above the full-width frame, and * a section whose shots are not captured yet falls back to the same shape so a * missing screenshot reads as a paragraph rather than as a hole. */ .sc-wide .sc-copy, .sc-bare .sc-copy { max-width: 62ch; margin: 0 auto 2.5rem; text-align: center; } .sc-bare .sc-copy { margin-bottom: 0; } .sc-wide .sc-copy > p, .sc-bare .sc-copy > p { margin: 0 auto; } .sc-points { margin: 1.35rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; text-align: left; } .sc-wide .sc-points, .sc-bare .sc-points { max-width: 58ch; margin-inline: auto; } .sc-points li { display: flex; gap: 0.6rem; align-items: start; color: var(--muted); font-size: 0.9rem; line-height: 1.55; } .sc-points svg { flex: none; margin-top: 0.28rem; color: var(--primary); } /* The frame carries its own top margin for the hero, where it hangs below the * CTAs; inside a showcase it is already in a grid cell. */ .sc-media .shot, .gal-panel .shot { margin-top: 0; } .gal-caption { margin: 0.9rem 0 0; color: var(--muted); font-size: 0.86rem; } .gal-caption b { display: block; color: var(--text); font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; } .sc-wide .gal-caption { text-align: center; } /* ── Screenshot gallery ──────────────────────────────────────────────────── */ /* One frame at a time with a labelled tab per shot. Panels are all in the * markup and hidden with the `hidden` attribute rather than built on demand, so * the section is a screenshot with a caption before any script runs. */ .gal-stage { position: relative; } .gal-panel[hidden] { display: none; } .gal-panel.is-current { animation: gal-in 0.35s ease both; } @keyframes gal-in { from { opacity: 0; transform: translateY(6px); } } /* Only advertise the click once the script that handles it is running. */ .shot.is-clickable { cursor: pointer; } .gal-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; } .gal-tab { display: flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.85rem 0.42rem 0.5rem; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--surface); color: var(--muted); font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.01em; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; } .gal-tab:hover { color: var(--text); border-color: var(--border); } .gal-tab.is-current { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, transparent); background: color-mix(in srgb, var(--primary) 10%, transparent); } .gal-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .gal-n { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); font-size: 0.68rem; } .gal-tab.is-current .gal-n { background: color-mix(in srgb, var(--primary) 22%, transparent); } @media (prefers-reduced-motion: reduce) { .gal-panel.is-current { animation: none; } } /* Side by side needs two columns' worth of room. Below that the screenshot goes * under the copy it illustrates, which is the order it is already in. */ @media (max-width: 900px) { .sc-row { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } .sc-split.is-flipped .sc-copy { order: 0; } } /* ── Docs teaser + footer ────────────────────────────────────────────────── */ .topic-list { margin: 0.9rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; } .topic-list a { display: inline-block; padding: 0.25rem 0.6rem; border-radius: 0.45rem; border: 1px solid var(--border-soft); color: var(--muted); font-size: 0.82rem; } .topic-list a:hover { color: var(--primary); border-color: var(--primary); } .site-footer { border-top: 1px solid var(--border-soft); padding: 2.5rem 0; color: var(--muted); font-size: 0.85rem; } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; } .site-footer a { text-decoration: underline; text-underline-offset: 3px; } .site-footer .spacer { margin-left: auto; } /* ── Docs pages ──────────────────────────────────────────────────────────── */ .docs-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 3rem; align-items: start; padding: 3rem 0 5rem; } .docs-nav { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; font-size: 0.88rem; } .docs-nav h4 { margin: 1.4rem 0 0.5rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); } .docs-nav h4:first-child { margin-top: 0; } .docs-nav ul { margin: 0; padding: 0; list-style: none; } .docs-nav a { display: block; padding: 0.28rem 0.6rem; margin-left: -0.6rem; border-radius: 0.4rem; color: var(--muted); } .docs-nav a:hover { color: var(--text); background: var(--surface); } .docs-nav a[aria-current="page"] { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); font-weight: 600; } .prose { max-width: 74ch; } .prose h1 { margin: 0 0 1.5rem; max-width: none; font-size: clamp(1.9rem, 4vw, 2.5rem); text-align: left; } .prose h2 { margin: 2.4rem 0 0.8rem; font-size: 1.3rem; letter-spacing: -0.02em; } .prose h3 { margin: 1.8rem 0 0.6rem; font-size: 1.05rem; } .prose p, .prose li { color: var(--muted); } .prose strong { color: var(--text); font-weight: 600; } .prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .prose ul, .prose ol { padding-left: 1.3rem; } .prose li { margin: 0.35rem 0; } .prose :not(pre) > code { padding: 0.12em 0.38em; border-radius: 0.35rem; background: var(--surface-2); border: 1px solid var(--border-soft); font-size: 0.86em; color: var(--text); } .prose pre { margin: 1.2rem 0; padding: 1rem 1.1rem; font-size: 0.82rem; } .prose table { width: 100%; margin: 1.2rem 0; border-collapse: collapse; font-size: 0.9rem; } .prose th, .prose td { padding: 0.5rem 0.7rem; border: 1px solid var(--border-soft); text-align: left; color: var(--muted); } .prose th { background: var(--surface); color: var(--text); font-weight: 600; } .prose blockquote { margin: 1.2rem 0; padding: 0.2rem 0 0.2rem 1rem; border-left: 3px solid var(--primary); color: var(--muted); } .prose hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--border-soft); } /* Anchor links appear on heading hover, never in the tab order or the a11y * tree, since the heading text right next to them already says where you are. */ .prose .anchor { margin-left: 0.4rem; color: var(--muted); opacity: 0; text-decoration: none; font-weight: 400; } .prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; } .docs-foot { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-soft); color: var(--muted); font-size: 0.85rem; } @media (max-width: 900px) { .docs-layout { grid-template-columns: 1fr; gap: 2rem; } .docs-nav { position: static; max-height: none; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-soft); } .site-nav .hide-sm { display: none; } }