/* ========================================================================== Boundless -------------------------------------------------------------------------- The palette is sampled from the app icon: a glowing infinity mark over a diagonal indigo, violet, blue, teal wash. Every gradient on this site traces back to those four stops so the site and the app read as one thing. Dark is the default because the app is a reader and readers live in dark rooms. Light is a full peer, not an afterthought. ========================================================================== */ /* Self-hosted, not linked from Google's own CDN: this site's CSP pins font-src to 'self', so this typeface has to be served from here or not exist at all. One file, a variable font covering the full weight axis (confirmed by Google's own CSS serving the identical file for every weight from 400 through 800, just re-labelled), a single @font-face with a weight range registers all of it under one family name, rather than needing a separate file and rule per weight actually used. */ @font-face { font-family: 'Boundless Display'; /* ?v=1: server.js's static-asset middleware only sends the long-lived immutable cache header to requests carrying a ?v= query string, so this rarely-changing file needs one by hand. Whoever replaces the actual .woff2 file in the future has to bump this number too, or returning visitors keep getting served the old cached font for up to a year. */ src: url('/fonts/BricolageGrotesque-Variable.woff2?v=1') format('woff2-variations'); font-weight: 300 800; font-style: normal; font-display: swap; } :root { /* The Boundless stops, held on aliases so the four values are written down exactly once. Two things need to read them: the site default immediately below, and a profile that has chosen the Boundless accent, which needs its own [data-accent='boundless'] row further down for the same reason the other nine palettes need theirs. Nothing else changes: with data-palette unset, --indigo and friends resolve to precisely what they always did. */ --boundless-indigo: #241d57; --boundless-violet: #4b3aed; --boundless-blue: #3d6fe0; --boundless-teal: #17aacb; --indigo: var(--boundless-indigo); --violet: var(--boundless-violet); --blue: var(--boundless-blue); --teal: var(--boundless-teal); --brand-gradient: linear-gradient(135deg, var(--indigo), var(--violet), var(--blue), var(--teal)); --accent-gradient: linear-gradient(135deg, var(--violet), var(--teal)); --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-xl: 28px; --shell: 1200px; --reading: 720px; /* The whole site's body/UI type, not just the wordmark: one bespoke family (see the @font-face above) instead of the system UI stack everywhere the wordmark doesn't reach, so nav, buttons, forms, and prose read as the same considered typeface the hero introduces rather than falling back to generic system chrome around it. Self-hosted, variable weight (300-800 in the one file), falls back to the same system-font stack if it ever fails to load. */ --font: 'Boundless Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Display type for headlines, kept separate from body copy on purpose -- a serif/sans pairing is what makes a page read as considered rather than templated. `ui-serif` resolves to New York on every platform Boundless actually ships on, so this costs nothing: no font file, no request, no CSP exception, just a system font stack that happens to be a genuine match for an Apple-only reader app. */ --font-display: ui-serif, 'New York', 'Iowan Old Style', Georgia, 'Times New Roman', serif; /* Alias kept for the wordmark rules that already reference it by this name. Same family as --font now, not a second typeface. */ --font-modern: var(--font); /* The exact stops and angle of #boundless-stroke (see head.ejs), as a reusable CSS gradient, so the wordmark's fill and the mark's own stroke are provably the same gradient, not two hand-matched ones that can drift apart later. */ --mark-gradient: linear-gradient(135deg, var(--violet), var(--blue), var(--teal)); /* The hero fabric shader's own tint, kept on its own custom properties instead of reading --indigo/--violet/--blue/--teal directly, so this one layer can be retinted, per theme or otherwise, by editing only the eight lines below, without ever touching the JS that reads them or the GLSL that consumes them. The defaults still lean on the brand palette (mixed toward black, white, or each other) so the shader matches the site out of the box, but nothing here requires that to stay true. */ --fabric-color-deep: color-mix(in srgb, color-mix(in srgb, var(--indigo), var(--blue)) 30%, black); --fabric-color-mid: color-mix(in srgb, color-mix(in srgb, var(--blue), var(--teal)) 45%, black); /* The white-blend percentages here are a floor as much as a tint: some palettes (Mono most of all, whose own --teal is literal white and --blue a mid grey) already sit close to white before this mix ever touches them, and the previous, heavier white percentages pushed those particular stops close enough to the page background that the hero wordmark sitting on top of them lost most of its contrast. Keeping more of the underlying blue/teal mix and less added white holds every palette's own strength (still confirmed against Boundless and Void, the two that were already correct) while giving Mono specifically enough room to stay legible instead of mixing all the way to near-white. */ --fabric-color-light: color-mix(in srgb, color-mix(in srgb, var(--blue), var(--teal)) 80%, white); --fabric-color-highlight: color-mix(in srgb, var(--blue) 12%, white); --fabric-speed: 1; --fabric-sheen: 1; --fabric-ao-strength: 0.55; --fabric-ridge-brighten: 0.2; /* Strength of the shader's slow exposure "breath", a very slow rise and fall in overall light of about eight percent at 1. Read by initFabricShader the same way --fabric-sheen is; 0 holds the exposure perfectly steady. */ --fabric-breathe: 1; /* Opacity of the acrylic pane's own grain in the hero. A flat 0.05 read fine on the colourful palettes but all but vanished on the two that have no hue to carry texture, so Mono and Void each lift it below. */ --hero-grain: 0.05; /* The hero word grid's two inks (see initWordGrid in site.js), read through the same live-colour probe the fabric shader uses for its own tints, so they follow the palette instead of the fixed grey-blue the grid used to carry. The ordinary letters are a dim, cool ink derived from the palette's blue over the theme's soft text; the seeded words glow in near-white leaning toward --teal. Light theme flips both toward the palette's indigo, since the grid multiplies there rather than screens. */ --words-ink: color-mix(in srgb, var(--blue) 30%, var(--text-soft)); --words-glow: color-mix(in srgb, var(--teal) 25%, white); /* The type scale. Every font-size on the site resolves to one of these steps so that neighbouring elements land on the same few sizes rather than on whichever rem value each rule happened to be written with. The steps are, at a phone and at a desktop width: --step--2 11.6 to 12.2px caps labels, pills, chips, tags, th --step--1 13.3 to 14.4px meta, hints, captions, rail and toc links --step-0s 14.9 to 15.4px small body: card copy, buttons, inputs, notes --step-0 16 to 17px body and prose --step-0l 18.1 to 19.2px sans component titles (card h3, panel h2) --step-1 19.2 to 22.4px ledes and serif card titles --step-2 24 to 32px page h1s, prose h2, compact section heads --step-3 30 to 45px section and doc heads --step-4 37 to 56px reserved for display The two half steps around the body size exist because the site's components genuinely need them: card copy wants to sit just under the prose, and a card title just over it, without either jumping a whole step. The wordmarks, the 404 code and the auth poster keep their own clamps; they are display pieces, not running text. */ --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.76rem); --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem); --step-0s: clamp(0.92rem, 0.88rem + 0.2vw, 0.96rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.06rem); --step-0l: clamp(1.12rem, 1.06rem + 0.3vw, 1.2rem); --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem); --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem); --step-3: clamp(1.9rem, 1.5rem + 2vw, 2.8rem); --step-4: clamp(2.3rem, 1.7rem + 2.6vw, 3.5rem); /* One tracking for every uppercase label (eyebrows, rail headings, table headers, kind chips). Caps at --step--2 need air between the letters to read; 0.11em is the value most of them had already settled on. */ --track-caps: 0.11em; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); color-scheme: dark; } /* Dark tokens are the default so a page paints correctly before any script has run. Light overrides them wholesale on the root element. */ :root { --bg: #0a0b11; --bg-soft: #0f111a; --surface: rgba(255, 255, 255, 0.035); --surface-solid: #14161f; --surface-raised: #1a1d29; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); --text: #e9ebf5; --text-soft: #b6bccf; --text-muted: #868da5; /* Was a flat hardcoded hex, so every non-default palette left inline text links stuck on Boundless's own blue-violet no matter what was actually selected. color-mix reads the live --violet role stop instead, the same derivation --glow and --mark just below already use, so a link retints the instant a palette changes with no per-palette override needed here. */ --link: color-mix(in srgb, var(--violet) 70%, white); --shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8); /* Foreground colour for text/icons that sit directly on the fixed brand gradient (.site-header, .site-footer) or the accent gradient's small "keycap" badges (.card-icon, .avatar, .theme-toggle-thumb, .tag.is-active, .period-tab.is-active). Surfaces that are deliberately NOT themed, so they can't fall back to --text/--text-soft/--text-muted the way everything else on the page does. White reads fine against every one of these ten accent palettes' gradients once the dark scrims below (.site-header::before, .site-footer, and the badge backgrounds themselves) are applied. Verified per palette against the gradient colour actually sampled at each real element's on-screen position, not just the raw stop colours, see the contrast numbers in the git history for this change. No palette needed a darker override once the scrims were tuned, so these three stay one flat definition with no :root[data-palette='...'] overrides. If a future palette is added, re-run that same per-position check before assuming white still holds. */ --on-brand: #fff; --on-brand-soft: rgba(255, 255, 255, 0.78); --on-brand-muted: rgba(255, 255, 255, 0.6); /* Both of these were a hardcoded rgba(75, 58, 237, ...), the hex value of the default Boundless palette's own --violet, baked in before this site had a colour-theme picker. color-mix keeps the same alpha blend but reads the live custom property, so a chosen palette's own violet-role stop shows up in the primary button's glow and in text selection instead of every palette still glowing Boundless-blue-violet regardless of what is actually selected. */ --glow: 0 0 40px -8px color-mix(in srgb, var(--violet) 55%, transparent); --code-bg: #0d0f18; --mark: color-mix(in srgb, var(--violet) 28%, transparent); } :root[data-theme='light'] { color-scheme: light; /* No --on-brand override here: --indigo/--violet/--blue/--teal (and so --brand-gradient/--accent-gradient) are set once on the bare :root above and are never redefined per theme, only per data-palette. Confirmed by grep, light theme only re-tints --fabric-color-*, --link, --shadow and --glow. So the header/footer gradient and the badge gradients render byte-identical in light and dark theme, and the same --on-brand values already cover both. */ --bg: #f6f7fc; --bg-soft: #ffffff; --surface: rgba(255, 255, 255, 0.75); --surface-solid: #ffffff; --surface-raised: #ffffff; --border: rgba(20, 22, 40, 0.1); --border-strong: rgba(20, 22, 40, 0.18); --text: #14161f; --text-soft: #414659; --text-muted: #666d84; /* Same derivation as the dark default above, mixed toward black instead of white since this sits on a light page: still the live --violet role stop, not a fixed hex, so light-theme links retint per palette too. */ --link: color-mix(in srgb, var(--violet) 85%, black); --shadow: 0 18px 40px -22px rgba(24, 26, 48, 0.4); --glow: 0 0 40px -14px color-mix(in srgb, var(--violet) 40%, transparent); --code-bg: #f2f3fa; --mark: color-mix(in srgb, var(--violet) 16%, transparent); /* A touch brighter than the dark defaults above, the same restraint already applied to .hero-atmosphere-base and .hero-atmosphere-sheen elsewhere in this file, but nowhere near as diluted as a first pass here tried: pushing the mid/light stops most of the way to white left the cloth reading as a flat pale wash with barely any colour in it, confirmed by screenshot, so this keeps most of the same brand-colour strength as the dark tokens and only lifts the very deepest shadow. */ --fabric-color-deep: color-mix(in srgb, color-mix(in srgb, var(--indigo), var(--blue)) 34%, black); --fabric-color-mid: color-mix(in srgb, color-mix(in srgb, var(--blue), var(--teal)) 60%, black); /* Same floor as the dark tokens above, tuned down from a heavier white percentage for the same reason: keeps Mono's already-light blue/teal stops from mixing all the way to near-white here too. */ --fabric-color-light: color-mix(in srgb, color-mix(in srgb, var(--blue), var(--teal)) 82%, white); --fabric-color-highlight: color-mix(in srgb, var(--blue) 10%, white); /* Multiply-blended over a near-white fabric here, so the grid needs dark ink to show at all: indigo-derived rather than the dark theme's pale screen inks above. */ --words-ink: color-mix(in srgb, var(--indigo) 60%, var(--text-soft)); --words-glow: color-mix(in srgb, var(--indigo) 80%, var(--violet)); } /* The site's other nine accent themes. There is no visible control for these left in the footer any more, the picker now lives as a hidden easter egg behind the home page's Appearance swatch-row (see home.ejs and site.js), found by clicking rather than labelled as a control, but the palettes themselves and this whole mechanism are unchanged either way. Each block only ever touches the same four source-of-truth stops the bare :root default above uses, --indigo, --violet, --blue, --teal, so every gradient built from them, --brand-gradient, --accent-gradient, --mark-gradient, the fabric shader's --fabric-color-* mixes, the lot, retints for free with no further overrides needed here. Boundless itself gets no block: it is already those bare :root values, so leaving data-palette unset is what "Boundless" means. Void is the one exception to the family's usual dark-to-light climb, staying dark at every stop on purpose, see the swatch-row comment in home.ejs for why. */ /* Each line carries a second selector, [data-accent='...'], which is how a public profile wears a palette of its owner's choosing (see the profile block near the bottom of this file). The values are untouched: only the selector lists are longer, so there is still exactly one copy of every hex in this file. data-accent sits on the profile card, a descendant of , so it always wins for its own subtree whatever data-palette says, with no specificity fight and no !important. */ :root[data-palette='nova'], [data-accent='nova'] { --indigo: #3A1808; --violet: #E8732A; --blue: #F2954A; --teal: #FFC66D; } :root[data-palette='ink'], [data-accent='ink'] { --indigo: #0D0D12; --violet: #5C6472; --blue: #8B93A1; --teal: #D3D9E1; } :root[data-palette='mono'], [data-accent='mono'] { --indigo: #000000; --violet: #5A5A5C; --blue: #9B9B9E; --teal: #FFFFFF; } :root[data-palette='reverse'], [data-accent='reverse'] { --indigo: #241D57; --violet: #5B4FE0; --blue: #9FB8E8; --teal: #F5F8FC; } :root[data-palette='blossom'], [data-accent='blossom'] { --indigo: #4A0E2E; --violet: #E0447B; --blue: #F2789F; --teal: #FFD6E8; } :root[data-palette='ember'], [data-accent='ember'] { --indigo: #1A0800; --violet: #D62828; --blue: #FF6B1A; --teal: #FFC93F; } :root[data-palette='mint'], [data-accent='mint'] { --indigo: #052E26; --violet: #12A37E; --blue: #4DDBAB; --teal: #CFF7E7; } :root[data-palette='royal'], [data-accent='royal'] { --indigo: #1F0A33; --violet: #8A3FE8; --blue: #C08AF2; --teal: #F0C674; } :root[data-palette='void'], [data-accent='void'] { --indigo: #000000; --violet: #0D0B14; --blue: #241F33; --teal: #4A3F66; } /* Boundless needs a row here for the same reason the other nine do, even though it is also the bare :root default: an accent is the profile owner's choice and must not change with the palette the *visitor* happens to have picked. A profile is a page you hand out; it should not have a different identity in somebody else's browser. It reads the --boundless-* aliases on :root, so this adds no eleventh copy of those four values. */ [data-accent='boundless'] { --indigo: var(--boundless-indigo); --violet: var(--boundless-violet); --blue: var(--boundless-blue); --teal: var(--boundless-teal); } /* The two palettes with no hue to speak of lean on the hero's grain instead, see --hero-grain on the bare :root above. */ :root[data-palette='mono'] { --hero-grain: 0.09; } :root[data-palette='void'] { --hero-grain: 0.08; } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* No scroll-behavior: smooth here any more. Set on html it also applied to a deep link arriving from another page, which glided thousands of pixels down a doc on load instead of opening on the linked section; site.js now scrolls in-page clicks (TOC, heading anchors, the chapter rail) smoothly itself and leaves everything else instant. */ /* Anchor links land under the sticky header without this offset: the header is 62px and the floating pill sits 12px below the top edge, so 84px clears the pill with a little air. This is the one and only offset, the .prose headings used to add a scroll-margin-top of their own on top of it, and the two stacked to ~180px of dead space. */ scroll-padding-top: 84px; } body { margin: 0; font-family: var(--font); font-size: var(--step-0); line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative; } /* A faint grain over the whole page, the difference between a flat colour fill and a surface with texture, at an opacity too low to notice except as "this feels a little more physical than most sites." Drawn as an inline SVG filter, not an image asset, so it costs one style rule and no request -- consistent with this site shipping no third-party fonts or scripts. */ body::before { content: ''; position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } :root[data-theme='light'] body::before { opacity: 0.02; mix-blend-mode: multiply; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); text-underline-offset: 3px; transition: color 0.15s var(--ease), text-decoration-color 0.15s var(--ease); } a:hover { text-decoration-color: currentColor; } img, svg, video { max-width: 100%; height: auto; display: block; } hr { border: 0; height: 1px; background: var(--border); margin: 2.5rem 0; } ::selection { background: var(--mark); color: var(--text); } :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 12px; z-index: 200; background: var(--surface-raised); color: var(--text); padding: 12px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); } .skip-link:focus { top: 12px; } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: clamp(18px, 4vw, 32px); } /* ========================================================================== Brand marks ========================================================================== */ /* A default width matters: an SVG with no intrinsic size stretches to fill whatever container it lands in, which is how a 30px logo becomes a full-width one. Every context that needs a different size overrides it. */ .mark { display: block; width: 32px; aspect-ratio: 1; } .mark-bg { fill: url(#boundless-stroke); } .mark-path { fill: none; stroke: #fff; stroke-width: 4.6; stroke-linecap: round; } /* The #boundless-stroke gradient's own stops (see head.ejs), driving the icon's background fill everywhere the mark appears. stop-color is a real CSS property on SVG elements, and custom properties cascade into inline SVG the same as anywhere else in the document, so these four rules are what makes the icon retint the instant --indigo/--violet/ --blue/--teal change, whether from the palette switcher or the data-palette attribute it sets, with no JS of its own needed here. */ .stop-indigo { stop-color: var(--indigo); } .stop-violet { stop-color: var(--violet); } .stop-blue { stop-color: var(--blue); } .stop-teal { stop-color: var(--teal); } .wordmark { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-family: var(--font-modern); font-weight: 700; font-size: var(--step-0s); letter-spacing: -0.01em; text-decoration: none; } .wordmark span { white-space: nowrap; /* Plain white, not a gradient clip: the header itself is the brand gradient now (see .site-header below), and gradient text over its own gradient background is the same near-vanishing problem the footer's sign-off had. Fixed the same way, by making the text the one flat colour that reads against all four stops at once. */ color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); } /* A thin ring keeps the mark a distinct badge instead of blending into the identical gradient now sitting behind it, the same fix the footer's much larger repeat of this same mark needed. */ .wordmark .mark { width: 30px; border-radius: 22%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3); } /* As the header gets tight. Before it collapses all the way to the hamburger at 860px, the wordmark sheds its text and keeps just the mark, not the other way round. The infinity glyph alone is the actual brand icon and stays recognisable on its own; the word "Boundless" next to it is the part that can go first. Width-based, not page-based, so it is identical on every page rather than depending on which one you happen to be looking at. 1120px, not a rounder number: the .search box reappears at 1000px (see its own min-width comment) and needs everything up to about 1113px to still be tight enough that, without this, the header actions would get pushed a few pixels past the header's own right edge. */ @media (max-width: 1120px) { .wordmark span { display: none; } } /* ========================================================================== Header ========================================================================== */ /* The header sits on the same four-stop gradient as the footer and the app icon itself, full strength rather than a spilled tint, so, like the footer, everything inside it (wordmark, nav, search, buttons) is styled against a fixed, saturated backdrop rather than the theme's ordinary tokens, which is why so many rules below are scoped under .site-header specifically instead of just inheriting the page's light/dark colours. */ /* Flat and edge-to-edge at rest, then on the very first pixel of scroll (see .is-stuck in site.js. window.scrollY > 8) it lifts into an inset, rounded, floating card. The gradient itself lives on a ::before, not on .site-header directly: a sticky element's own margin does not reliably open a gap above it (confirmed against the real rendered box. Margin-top was accepted but the element's top edge stayed pinned to the viewport edge regardless, which read as the top corners rounding against nothing, not floating), while an absolutely-positioned layer inset from 0 to a real gap on all three open sides has no such ambiguity. .site-header itself stays a plain, transparent, always-full-bleed sticky shell; only its ::before's inset/radius/shadow transitions. */ .site-header { position: sticky; top: 0; z-index: 100; isolation: isolate; } .site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; /* A flat dark scrim under the brand gradient, not just the gradient on its own, with 10 accent palettes climbing to very different lightest stops (mono's --teal is literal white; Boundless's own teal alone gave white text only ~2.75:1), no fixed white/dark foreground could clear AA against all of them at full gradient strength. .48 was landed on by computing real WCAG contrast for --on-brand white text at each of these elements' actual on-screen positions along the gradient (not the bare 0%/100% stops) for every one of the 10 data-palette values, the worst case (Mint, at the "Sign in" button's position) still clears 4.5:1 with margin at this strength, and it's the lightest scrim that does. Also why no per-palette --on-brand override was needed after all: the scrim alone, tuned against the real render, was enough. */ background: linear-gradient(rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.48)), var(--brand-gradient); border-radius: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); transition: inset 0.45s var(--ease-out), border-radius 0.4s var(--ease-out), box-shadow 0.4s var(--ease); } .site-header.is-stuck::before { inset: 12px clamp(12px, 3vw, 28px) 0; border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 48px -24px rgba(0, 0, 0, 0.6), 0 4px 16px -4px rgba(0, 0, 0, 0.35); } .header-inner { position: relative; display: flex; align-items: center; gap: 20px; height: 62px; transition: padding-inline 0.45s var(--ease-out), padding-top 0.45s var(--ease-out); } /* The pill (.site-header.is-stuck::before) is inset 12px from the top but flush (0) at the bottom, since it floats away from the viewport's top edge but stays flush with the content that starts right below it, so its own visual centre sits 6px lower than .header-inner's full 62px box. align-items:center alone would keep centring on that full box and read as everything sitting too high once the pill no longer fills it evenly; matching the pill's own top inset here shrinks the flex box's content area by the same 12px from the top, so centring happens against the pill's actual band instead of the taller box around it. */ .site-header.is-stuck .header-inner { padding-top: 12px; } /* .header-inner's own .shell padding (clamp 18-32px) and the pill's own inset (see .site-header.is-stuck::before) are measured from two different edges, the header's full-bleed box vs the now-inset pill -- and left just ~4px between the pill's rounded corner and whatever sits closest to it. That was symmetric on paper (identical clamp on both sides) but not in practice: the wide, equally-rounded "Create account" pill crowds its corner far more visibly at 4px than the small square mark does at its corner, which is what actually read as lopsided. Widening the content's own inset specifically while stuck, rather than just shrinking the pill further, is what gives every corner a real, consistent gap regardless of what happens to be sitting in it. */ .site-header.is-stuck .header-inner { padding-inline: clamp(28px, 6vw, 48px); } /* The pill carried across a page navigation. theme.js puts .header-carry on before first paint when the page being left had its header in pill form (site.js writes that flag on pageswap), so the new page paints with the pill already formed rather than hard-cutting to the flat bar while everything else crossfades. Every value here mirrors .is-stuck exactly; the only difference is transition: none, so nothing animates into this state, it is simply the state the page opens in. site.js removes the class once the transition has finished, at which point the ordinary .site-header::before transition takes over and the pill relaxes into the bar if the new page is at the top. */ .header-carry .site-header::before { inset: 12px clamp(12px, 3vw, 28px) 0; border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 48px -24px rgba(0, 0, 0, 0.6), 0 4px 16px -4px rgba(0, 0, 0, 0.35); transition: none; } .header-carry .header-inner { padding-top: 12px; padding-inline: clamp(28px, 6vw, 48px); transition: none; } /* Reading progress along the pill's bottom edge, on a single doc or blog post only (head.ejs decides). The pill is inset from the viewport's sides and rounded by --radius-lg at its bottom corners, so the line is inset by the same side gap plus the radius: it runs between the two corner curves, never through them. Same violet-to-teal ramp as .rank-progress-bar, the site's existing progress idiom, derived from the palette so it retints with everything else. Hidden while the header is the flat bar (nothing has been read yet at scrollY 0 anyway) and only shown once the pill has formed. */ .read-progress { position: absolute; left: calc(clamp(12px, 3vw, 28px) + var(--radius-lg)); right: calc(clamp(12px, 3vw, 28px) + var(--radius-lg)); bottom: 0; height: 2px; border-radius: 2px; pointer-events: none; transform-origin: left center; transform: scaleX(var(--progress, 0)); background: linear-gradient(90deg, color-mix(in srgb, var(--violet) 90%, transparent), color-mix(in srgb, var(--teal) 90%, transparent)); opacity: 0; transition: opacity 0.3s var(--ease); } .site-header.is-stuck .read-progress, .header-carry .site-header .read-progress { opacity: 1; } /* Scroll-driven where the browser can do it without script: the line's scaleX tracks the root scroller from 0 at the top of the page to 1 at the bottom. animation-timeline has to come after the animation shorthand, which would otherwise reset it. site.js only sets --progress in browsers that lack this. */ @supports (animation-timeline: scroll()) { .read-progress { transform: scaleX(0); animation: read-progress-grow linear both; animation-timeline: scroll(root); } } @keyframes read-progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .site-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; } /* White rather than the theme's --text-soft/--text tokens: .site-nav lives inside .site-header at every width, whether laid out inline in the gradient bar or, below 860px, as the dropdown panel further down this file, and that panel is a solid brand-indigo surface for the same reason, so plain white text is correct in both of its shapes. */ .site-nav a { position: relative; overflow: hidden; display: inline-block; height: 38px; color: var(--on-brand-soft); text-decoration: none; font-size: var(--step-0s); font-weight: 500; border-radius: var(--radius-sm); transition: color 0.15s var(--ease), background 0.15s var(--ease); } .site-nav a:hover { color: var(--on-brand); } .site-nav a[aria-current='page'] { color: var(--on-brand); background: rgba(255, 255, 255, 0.14); } /* Solid white, not the usual --accent-gradient ramp: a colour-on-colour underline would only read against some of the four stops behind it, not all of them. */ .site-nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: #fff; transform: scaleX(0); transition: transform 0.25s var(--ease-out); } .site-nav a:focus-visible::after, .site-nav a[aria-current='page']::after { transform: scaleX(1); } /* The label flips up and out on hover, a second copy of the same text sliding up from underneath to land in its place. Two real, identically- sized rows rather than one row plus a %-based ::after clone: a percentage transform is relative to the row's own content height, which does not equal the link's height once padding enters into it, and leaves a sliver of the old row still in view (confirmed while building this, a translateY(-100%) landed a few pixels short every time). Two rows of a fixed height, shifted by that same fixed height, has no such gap since both numbers are literally the same value. */ .nav-flip { display: block; transition: transform 0.4s var(--ease-out); } .nav-flip-row { display: flex; align-items: center; height: 38px; padding: 0 12px; } .site-nav a:hover .nav-flip, .site-nav a:focus-visible .nav-flip { transform: translateY(-38px); } @media (prefers-reduced-motion: reduce) { .nav-flip { transition: none; } } /* Sign in lives in the header at every width where the header has room for it. This copy inside the nav panel only exists for the narrow widths where the header button is hidden, so it stays out of the way until then rather than appearing twice. */ .site-nav .nav-account { display: none; } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* Fixed white-based tones rather than the --border/--surface/--text-soft theme tokens: both .icon-button (the hamburger) and .theme-toggle below live only inside .site-header, which no longer follows the page theme itself, so neither should the controls sitting on it. */ .icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.12); color: var(--on-brand-soft); cursor: pointer; padding: 0; transition: color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease); } .icon-button:hover { color: var(--on-brand); border-color: rgba(255, 255, 255, 0.4); } .icon-button:active { transform: scale(0.94); } .icon-button svg { width: 17px; height: 17px; } /* A real glass switch, not an icon button: a frosted pill track with a gradient thumb that physically slides, matching the toggle pattern used for the theme control elsewhere in this kind of interface, the button shows the theme you would switch TO, on the thumb, not the current one. */ .theme-toggle { position: relative; display: block; width: 52px; height: 30px; padding: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.12); cursor: pointer; transition: background 0.15s var(--ease), border-color 0.15s var(--ease); } .theme-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; /* Same two-stop --accent-gradient every other "keycap" badge on the page uses (.card-icon, .avatar, .tag.is-active, .period-tab.is-active), so it needs the same scrim those get below, a centred icon/glyph sits at the gradient's exact midpoint (CSS gradients guarantee the box centre is the 50% stop regardless of box size or aspect ratio), and at that midpoint the raw violet/teal mix fails 3:1 for white in 8 of the 10 palettes (as low as 1.9:1 for Mint). This accent gradient is far more saturated at its middle than the four-stop brand gradient above ever gets, so it needed its own, separately-tuned scrim rather than inheriting the header/footer's .48. */ background: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)), var(--accent-gradient); color: var(--on-brand); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); transition: transform 0.3s var(--ease-out); } :root[data-theme='light'] .theme-toggle-thumb { transform: translateX(24px); } .theme-toggle-thumb svg { width: 13px; height: 13px; } .theme-toggle-thumb .icon-moon { display: none; } :root[data-theme='light'] .theme-toggle-thumb .icon-moon { display: block; } :root[data-theme='light'] .theme-toggle-thumb .icon-sun { display: none; } .nav-toggle { display: none; } /* The hamburger morphs into an X rather than just swapping icons, each bar is its own line so it can rotate/fade independently, driven purely by the aria-expanded state the click handler already sets. */ .nav-toggle-line { transform-box: fill-box; transform-origin: center; transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease); } .nav-toggle[aria-expanded='true'] .nav-toggle-line-top { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded='true'] .nav-toggle-line-mid { opacity: 0; transform: scaleX(0); } .nav-toggle[aria-expanded='true'] .nav-toggle-line-bottom { transform: translateY(-6px) rotate(-45deg); } /* ========================================================================== Search ========================================================================== */ .search { position: relative; flex: 0 1 260px; /* Flex items shrink toward 0 by default with nothing stopping them, so without a floor the nav links and header buttons were squeezing this down to a sliver too narrow for its own placeholder text to fit, "Search docs" was rendering as "Sear" cut off mid-word. This keeps it at a genuinely usable width instead; see the 1000px breakpoint below for how it stays out of the way once there truly isn't room for it alongside the nav links, which don't collapse until 860px. */ min-width: 150px; margin-left: auto; } /* Below 1000px there isn't reliably enough room left over for a 150px search box once the full inline nav (still showing every link down to its own 860px collapse) and the header buttons take their share -- between 860 and 1000px specifically the min-width above would otherwise win the fight and push the sign-in/account buttons past the header's own edge. Hiding search here, ahead of that fight rather than after losing it, is the same width-based degradation the wordmark text uses just above. */ @media (max-width: 1000px) { .search { display: none; } } /* Fixed white-based tones, same reasoning as .icon-button/.theme-toggle above, var(--bg)/var(--text) would swap between a dark and a light chip depending on site theme, when the header itself no longer does. */ .search-input { width: 100%; height: 36px; padding: 0 12px 0 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); color: #fff; font-family: inherit; font-size: var(--step--1); transition: border-color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease); } .search-input::placeholder { color: var(--on-brand-muted); } .search-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 3px rgba(255, 255, 255, 0.16); } .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: rgba(255, 255, 255, 0.65); pointer-events: none; } .search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 320px; /* This one floats over page content, not another blurred surface, so a real backdrop-filter is the right call here (unlike .search-input). */ background: color-mix(in srgb, var(--surface-raised) 80%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow), inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); overflow: hidden; z-index: 120; max-height: 420px; overflow-y: auto; } .search-results:empty { display: none; } .search-result { display: block; padding: 11px 14px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); } .search-result:last-child { border-bottom: 0; } .search-result:hover, .search-result.is-active { background: var(--surface); } .search-result-title { font-weight: 600; font-size: var(--step-0s); margin-bottom: 2px; display: flex; align-items: center; gap: 8px; } .search-result-kind { font-size: var(--step--2); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--text-muted); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-weight: 600; flex-shrink: 0; } .search-result-excerpt { font-size: var(--step--1); color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .search-empty { padding: 16px; color: var(--text-muted); font-size: var(--step--1); text-align: center; } /* The "/" shortcut hint, a small keycap at the field's right edge. Built from --on-brand mixes rather than the theme's --border/--surface for the same reason as the field itself: it sits on the fixed header gradient and must not flip between a light and a dark chip with the site theme. It disappears once the field has focus or text (the hint has been taken) and never renders on touch devices, where there is no key to press. */ .search-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--on-brand) 28%, transparent); background: color-mix(in srgb, var(--on-brand) 10%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-brand) 18%, transparent), inset 0 -1px 0 rgba(0, 0, 0, 0.2); color: var(--on-brand-muted); font-family: var(--mono); font-size: var(--step--2); line-height: 1; pointer-events: none; transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); } .search-input:focus ~ .search-kbd, .search-input:not(:placeholder-shown) ~ .search-kbd { opacity: 0; transform: translateY(-50%) scale(0.9); } @media (hover: none) { .search-kbd { display: none; } } /* Busy state. site.js sets aria-busy on the input from the first keystroke until the lookup renders, and this turns it into a 1px light travelling along the field's bottom edge, violet into teal, the site's own accent run as motion. Inset to sit inside the field's rounded corners. */ .search::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px; border-radius: 1px; background: linear-gradient(90deg, transparent, var(--violet) 30%, var(--teal) 70%, transparent); background-size: 60% 100%; background-repeat: no-repeat; background-position: -150% 0; opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease); } .search:has(.search-input[aria-busy='true'])::after { opacity: 1; animation: search-shimmer 1.1s linear infinite; } @keyframes search-shimmer { from { background-position: -150% 0; } to { background-position: 250% 0; } } /* Entrance. The panel itself fades up 4px (the .reveal vocabulary), and each row inside it settles in 30ms after the one above, --i being the row index site.js writes inline, using the same settle keyframes the feature cards use. :empty toggles display, so the panel animation runs once per open, not once per keystroke. */ .search-results:not(:empty) { animation: menu-in 0.18s var(--ease-out) both; } @keyframes menu-in { from { opacity: 0; transform: translateY(4px); } } .search-result { animation: settle 0.28s var(--ease-out) both; animation-delay: calc(30ms * var(--i, 0)); } /* The keyboard-highlighted row carries the docs sidebar's hairline (a 2px inset rule in violet over a violet wash) instead of the 3.5% white --surface hover tint, which was close to invisible on arrow-key travel. */ .search-result.is-active { box-shadow: inset 2px 0 0 var(--violet); background: color-mix(in srgb, var(--violet) 10%, transparent); } /* The closing "All results" row: a link-coloured line with the card-link arrow, quieter than a result but clearly a way onward. It is one more .search-result so the arrow keys reach it, see site.js. */ .search-result-all { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 10px; background: color-mix(in srgb, var(--violet) 5%, transparent); } .search-result-all .search-result-title { margin: 0; font-size: var(--step--1); color: var(--link); } .search-result-all svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--link); transition: transform 0.2s var(--ease); } .search-result-all:hover svg, .search-result-all.is-active svg { transform: translateX(3px); } /* Term hits inside an excerpt, on both search surfaces. --mark is the palette-aware selection tint, so a highlighted word and a selected word are the same colour, which is the right association. */ .search-result-excerpt mark, .result-item mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 0.12em; margin: 0 -0.04em; } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: var(--step-0s); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.15s var(--ease); } .btn:active { transform: translateY(1px); } .btn svg { width: 17px; height: 17px; flex-shrink: 0; } .btn-primary, .btn-secondary { position: relative; overflow: hidden; } .btn-primary { background: var(--accent-gradient); color: #fff; /* The inset highlight is a hairline of light along the top edge, like a button that catches light rather than a flat colour chip, a small, physical-feeling detail that reads as considered rather than default. */ box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.12); } /* A diagonal sweep of light on hover, the glass catching a highlight as it passes, rather than a flat colour swap. */ .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 45%, transparent 60%); transform: translateX(-120%); transition: transform 0.6s var(--ease-out); } .btn-primary:hover::after, .btn-primary:focus-visible::after { transform: translateX(120%); } .btn-primary:hover { color: #fff; transform: translateY(-2px); /* Was a hardcoded rgba(75, 58, 237, ...), Boundless's own --violet, baked in before the colour-theme picker existed: color-mix keeps the same glow shape but follows whichever palette's violet-role stop is actually active, instead of staying purple under, say, Mono or Mint. */ box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--violet) 55%, transparent), 0 0 46px -6px color-mix(in srgb, var(--violet) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.12); filter: brightness(1.07); } /* The lift undoes itself the instant a press starts, so hover -> active reads as one continuous gesture (rise, then compress) rather than two states fighting for the same transform. */ .btn-primary:active, .btn-secondary:active { transform: scale(0.97) translateY(1px); } .btn-secondary { background: color-mix(in srgb, var(--bg) 35%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); color: var(--text); border-color: color-mix(in srgb, #fff 22%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent), inset 0 -1px 1px color-mix(in srgb, #000 15%, transparent); } .btn-secondary:hover { background: color-mix(in srgb, var(--bg) 50%, transparent); border-color: color-mix(in srgb, var(--violet) 55%, transparent); color: var(--text); transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.45), inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent), inset 0 -1px 1px color-mix(in srgb, #000 15%, transparent); } :root[data-theme='light'] .btn-secondary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(20, 22, 40, 0.06); border-color: color-mix(in srgb, var(--indigo) 12%, transparent); } .btn-ghost { background: transparent; color: var(--text-soft); } .btn-ghost:hover { color: var(--text); background: var(--surface); } /* .footer-col and .site-header both sit on the fixed brand gradient rather than the page's own theme, so the "Sign in"/"Sign out" ghost buttons and the signed-in account pill living in each need the same fixed-white override every other themed token in those two regions gets. Full --on-brand, not the --soft variant plain nav links use: this text sits at the header's right edge, close to the gradient's most saturated midpoint, where the .78-alpha soft token measured under 4.5:1 against three of the ten palettes (Mono 4.19, Reverse 3.85, Mint 3.80). Opaque clears all ten with room to spare. */ .footer-col .btn-ghost, .site-header .btn-ghost { color: var(--on-brand); } /* The footer's sign-out control is a form button that has to read as one more link in its column, so it drops the button padding and weight and takes the column's link size; the ghost hover wash above still applies. */ .footer-col .btn-ghost { padding: 0; font-size: var(--step--1); font-weight: 400; } .footer-col .btn-ghost:hover, .site-header .btn-ghost:hover { color: var(--on-brand); background: rgba(255, 255, 255, 0.14); } .site-header .btn-secondary { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.26); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); } .site-header .btn-secondary:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.4); color: #fff; } /* The primary CTA stays legible against its own colour family by inverting to solid white rather than trying to out-saturate the gradient behind it, the one place in the header that reads as a control to press rather than more of the brand surface. */ .site-header .btn-primary { background: #fff; color: var(--indigo); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } .site-header .btn-primary:hover { color: var(--indigo); background: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); filter: none; } .site-header .btn-primary::after { display: none; } .btn-danger { background: #d1344b; color: #fff; border-color: transparent; } .btn-danger:hover { background: #b92a3f; color: #fff; } .btn-block { width: 100%; } .btn-sm { padding: 8px 14px; font-size: var(--step--1); } .btn-lg { padding: 14px 26px; font-size: var(--step-0); } /* The global focus ring is a violet outline, which on the primary button means a violet ring on a violet gradient: technically present, barely visible. Two box-shadow rings instead, a gap in the page background and then a pale violet, so the ring separates from the fill the way the secondary button's already does. The outline stays, made transparent, because forced-colours mode drops box-shadows and paints transparent outlines in the system highlight colour: the ring survives there too. Placed after :hover so a focused, hovered button keeps its ring rather than its glow. */ .btn-primary:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--violet) 80%, var(--on-brand)); } :root[data-theme='light'] .btn-primary:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--indigo); } /* The copied state shared by every copy control (the [data-copy] buttons beside a repository URL and the .copy-button on code blocks, both wired in site.js). Teal is the site's "done" colour, the checklist tick's, so the label turns teal and a 12px tick draws itself in beside it, the same stroke-dashoffset trick the checklist rows use. The animation is what makes it read as a confirmation rather than a label that changed while you blinked; reduced motion collapses it to an instant tick. Written as .btn.is-copied so it outranks .btn-secondary's own colour and border. */ .btn.is-copied, .btn.is-copied:hover, .copy-button.is-copied, .copy-button.is-copied:hover { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 60%, transparent); } .copy-tick, .btn .copy-tick { width: 12px; height: 12px; flex-shrink: 0; } .copy-tick path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: copy-tick-draw 0.3s var(--ease-out) forwards; } @keyframes copy-tick-draw { to { stroke-dashoffset: 0; } } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; overflow: hidden; isolation: isolate; /* The fluid background is the entrance view, it should be the only thing on screen before anyone scrolls, not a text-height band with the next section's edge already creeping into view. dvh over vh: on a phone browser the address bar changes how much of a plain vh is actually visible, dvh tracks the real visible area instead. */ min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; padding: clamp(72px, 12vw, 128px) 0 clamp(56px, 8vw, 88px); background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg) 35%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 60%, var(--bg) 100%), /* ?v=1: same reasoning as the @font-face src above. server.js's static-asset middleware only grants the long-lived immutable cache header to a request carrying ?v=, and this asset is rarely replaced. Bump this number when the actual /img/hero.webp file is ever replaced, or returning visitors keep the old cached image for up to a year. */ url("/img/hero.webp?v=1"); background-size: cover; background-position: center; background-repeat: no-repeat; } /* A layered atmosphere behind the wordmark: four large blurred colour blobs drifting independently (the CSS stand-in for a slow ambient video loop, no video asset, same idea of continuous, never-repeating- looking motion), a glass "sheen", a highlight and diagonal reflection drifting on top the way light moves across a pane of glass. The page-wide grain overlay above does the rest of the texture work. Every layer is slow (21-40s cycles) and stops under prefers-reduced-motion, same as the app. */ .hero-atmosphere { position: absolute; inset: 0; z-index: -1; } /* The depth layers (blobs, fabric, acrylic, word grid) share one wrapper that is 28% taller than the hero, hanging that extra height off the top edge, and slides down as the page scrolls so the whole stack reads as sitting behind the page rather than glued to it: the fade, the precipitation and the sheen stay pinned, which is what makes the difference read as depth instead of the entire hero moving. Driven by the scroll position itself, not a clock, so the motion is exactly as fast as the reader's own scroll and never a beat behind it. 22% of the wrapper's own height is the same distance as that 28% of the hero, so by the time the hero has fully scrolled away the top edge has just arrived at the hero's own, nothing ever shows through above it. Browsers without scroll-driven animations skip the @supports block and keep the layers still, which is what they had before. */ .hero-atmosphere-depth { position: absolute; inset: -28% 0 0; } @supports (animation-timeline: scroll()) { .hero-atmosphere-depth { animation: hero-depth linear both; animation-timeline: scroll(root); animation-range: 0 100vh; } } @keyframes hero-depth { to { transform: translate3d(0, 22%, 0); filter: brightness(0.82); } } .hero-atmosphere-base { position: absolute; inset: -25% -10%; overflow: hidden; filter: blur(70px); mask-image: linear-gradient(#000 0%, #000 46%, rgba(0, 0, 0, 0.85) 66%, transparent 100%); -webkit-mask-image: linear-gradient(#000 0%, #000 46%, rgba(0, 0, 0, 0.85) 66%, transparent 100%); } :root[data-theme='light'] .hero-atmosphere-base { opacity: 0.55; } .atmo-blob { position: absolute; border-radius: 50%; will-change: transform; } .atmo-blob-a { top: 6%; left: 10%; width: 56%; height: 56%; background: radial-gradient(circle, color-mix(in srgb, var(--violet) 55%, transparent), transparent 70%); animation: atmo-drift-a 34s ease-in-out infinite alternate; } .atmo-blob-b { top: 8%; right: 6%; width: 50%; height: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--teal) 46%, transparent), transparent 70%); animation: atmo-drift-b 27s ease-in-out infinite alternate; } .atmo-blob-c { bottom: -12%; left: 26%; width: 62%; height: 62%; background: radial-gradient(circle, color-mix(in srgb, var(--blue) 44%, transparent), transparent 70%); animation: atmo-drift-c 40s ease-in-out infinite alternate; } .atmo-blob-d { top: 28%; left: 42%; width: 38%; height: 38%; /* Was a plain white highlight blob: the one of the four that did not follow the palette. A teal-leaning near-white keeps the same job (a bright pool the others drift around) while warming or cooling with whatever --teal currently is. */ background: radial-gradient(circle, color-mix(in srgb, color-mix(in srgb, var(--teal) 40%, white) 34%, transparent), transparent 70%); animation: atmo-drift-d 21s ease-in-out infinite alternate; } @keyframes atmo-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(7%, 9%) scale(1.14); } } @keyframes atmo-drift-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(-9%, 7%) scale(0.9); } } @keyframes atmo-drift-c { from { transform: translate(0, 0) scale(1); } to { transform: translate(6%, -7%) scale(1.1); } } @keyframes atmo-drift-d { from { transform: translate(0, 0) scale(1); } to { transform: translate(-7%, -9%) scale(1.18); } } .hero-atmosphere-sheen { position: absolute; inset: 0; /* The highlight stops were pure white, which read as a neutral glare laid over Ember and Mono rather than light passing through them; tinting them a touch toward --teal keeps the glass reflection in the palette's own family. The hotspot also moved down from 4% to 16%: at 4% the brightest point on the whole hero sat directly behind the fixed header, lighting the one thing that is not the hero. */ --hero-sheen-white: color-mix(in srgb, var(--teal) 55%, white); background: radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--hero-sheen-white) 50%, transparent), transparent 46%), linear-gradient(116deg, transparent 18%, color-mix(in srgb, var(--hero-sheen-white) 20%, transparent) 37%, transparent 51%), repeating-linear-gradient(112deg, transparent 0px, transparent 16px, color-mix(in srgb, var(--hero-sheen-white) 2%, transparent) 17px, color-mix(in srgb, var(--hero-sheen-white) 2%, transparent) 18px); mix-blend-mode: soft-light; opacity: 0.72; animation: hero-sheen 16s ease-in-out infinite alternate; } :root[data-theme='light'] .hero-atmosphere-sheen { mix-blend-mode: overlay; opacity: 0.45; } @keyframes hero-sheen { from { transform: translate3d(-4%, 0, 0) scale(1.04); } to { transform: translate3d(5%, 1%, 0) scale(1.1); } } /* .hero-fabric and .hero-words sit in the same slot as the CSS blobs above, later in DOM order so they paint over them, but they answer to two different questions rather than one shared switch. The fabric shader is the real replacement for the blobs: it fades in for good and hides them underneath it the moment script confirms a WebGL frame actually rendered (is-fabric-active), the same "invisible until proven working" contract the old WebGL noise shader used, never gated on the mouse. The word grid is a separate, smaller texture detail that additionally needs is-atmosphere-revealed, toggled by mouse movement in site.js, on top of that. If WebGL is unavailable or the shader fails to compile, is-fabric-active never lands and the blobs alone keep doing the job, unblurred CSS, zero JS required, exactly like before. */ .hero-fabric, .hero-words { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.1s var(--ease); } /* Rack focus on first paint: the fabric arrives soft and pulls sharp over 1.8s while its opacity fade runs, so the swap from the blurred CSS blobs underneath reads as one image coming into focus rather than two different pictures crossfading (the blobs are blurred at 70px, the shader is crisp, and with opacity alone the two identities were plainly visible swapping for the whole 1.1s). Ends at none, not blur(0), so no filter layer is left sitting on a canvas that repaints every frame. */ .hero-fabric { filter: blur(22px); transition: opacity 1.1s var(--ease), filter 1.8s var(--ease-out); } .hero.is-fabric-active .hero-fabric { opacity: 1; filter: none; } /* Was display:none, flipped the instant the class landed, but the fabric canvas above it is still only partway through its own 1.1s opacity fade-in at that exact moment (this class and the canvas's opacity both key off the same is-fabric-active add), so for that whole window neither layer was at full strength: the blobs gone already, the shader not yet opaque. Every fresh run of this init (a normal first load, or a tab-discard reload after switching away and back) showed it as a pale, washed-out hero and header that "fixed itself" once the fade finished -- not a one-off glitch, the same gap every single time. Fading these out in step with the canvas fading in, instead of yanking them out instantly, means there is always something at full strength covering this layer's slot, blobs or shader, never a moment of neither. */ .hero.is-fabric-active .hero-atmosphere-base { opacity: 0; transition: opacity 1.1s var(--ease); pointer-events: none; } /* A frosted, acrylic-style pane between the fabric shader and everything above it: a real backdrop-filter blur (not a filter on the fabric canvas itself, so the shader keeps rendering at full detail underneath, only the composited result reads as soft/frosted) plus a translucent tint and a touch of the page's own grain technique, scaled up here since this is meant to read as a distinct material, not just page texture. Sits below .hero-words on purpose: the letter grid stays crisp on top of the frost, the way text sits legibly on a frosted-glass panel rather than being frosted along with it. */ .hero-atmosphere-acrylic { position: absolute; inset: 0; /* Light enough to still make out the fold detail underneath, not a full frost: this is a soft haze over the fabric, not glass thick enough to hide it. */ backdrop-filter: blur(9px) saturate(1.2); -webkit-backdrop-filter: blur(9px) saturate(1.2); /* A radial mask so the frost is a soft disc behind the title rather than a uniform haze over the whole hero: full strength where the wordmark sits, thinning out toward the edges so the fold detail of the fabric is left legible around it. Centred a little above the middle, where the wordmark actually sits in the hero's own layout. The wrapper this lives in hangs 28% above the hero (see .hero-atmosphere-depth), so the centre is placed against that taller box, not the hero. */ mask-image: radial-gradient(ellipse 75% 60% at 50% 58%, #000 0%, #000 35%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0.12) 100%); -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 58%, #000 0%, #000 35%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0.12) 100%); /* Tinted with the same diagonal the mark's own gradient uses (indigo through violet and blue to teal), not a neutral --bg wash, so the frosted pane itself reads as "the logo's blue" rather than plain frosted glass that happens to sit over blue content. */ background: linear-gradient( 135deg, color-mix(in srgb, var(--indigo) 22%, transparent), color-mix(in srgb, var(--violet) 18%, transparent), color-mix(in srgb, var(--blue) 20%, transparent), color-mix(in srgb, var(--teal) 14%, transparent) ); } :root[data-theme='light'] .hero-atmosphere-acrylic { backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1); background: linear-gradient( 135deg, color-mix(in srgb, var(--indigo) 14%, transparent), color-mix(in srgb, var(--violet) 12%, transparent), color-mix(in srgb, var(--blue) 14%, transparent), color-mix(in srgb, var(--teal) 10%, transparent) ); } .hero-atmosphere-acrylic::before { content: ''; position: absolute; inset: 0; opacity: var(--hero-grain); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Same 0.6 ratio to the dark value as before (0.03 against 0.05), kept as a calc so the per-palette --hero-grain lifts carry into light theme. */ :root[data-theme='light'] .hero-atmosphere-acrylic::before { opacity: calc(var(--hero-grain) * 0.6); mix-blend-mode: multiply; } /* The letter grid is a texture detail, not a headline: screen blend and a modest opacity keep it reading as ambient noise with a few findable words in it, not a loud callout. No z-index anywhere in this stack, on purpose: every layer here is position:absolute with z-index left at its default, so paint order just follows DOM order alone. */ .hero-words { mix-blend-mode: screen; opacity: 0; /* Shorter than the 1.1s the fabric takes: the grid types itself in diagonally on the canvas (see initWordGrid in site.js), and a long opacity fade on top of that would hide most of the typing. */ transition-duration: 0.4s; } .hero.is-atmosphere-revealed .hero-words { opacity: 0.5; } /* Screen over a near-white fabric adds nothing, the grid was simply invisible in light theme. Multiply with the indigo-derived inks (see --words-ink on :root[data-theme='light']) is the same idea in reverse. */ :root[data-theme='light'] .hero-words { mix-blend-mode: multiply; } :root[data-theme='light'] .hero.is-atmosphere-revealed .hero-words { opacity: 0.42; } /* Nothing above fades itself out toward the bottom of the hero the way the old shader did in its own fragment shader, blending straight to --bg was the only way to avoid a visible seam against the page below (an actual screenshot-confirmed lesson from that version). This shared overlay reuses the same easing shape as .hero-atmosphere-base's own mask-image so the whole stack still closes cleanly into the page. */ .hero-atmosphere-fade { position: absolute; inset: 0; /* A short top vignette under the header, then the bottom fade: the floating header pill had nothing to sit on, its glass edge landing on whichever bright fold happened to be under it, and 90px of the page colour thinning to nothing gives it a consistent ground on every palette without darkening the hero itself. */ background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 90px), linear-gradient(180deg, transparent 0%, transparent 46%, color-mix(in srgb, var(--bg) 60%, transparent) 66%, var(--bg) 100%); pointer-events: none; } /* Snow or rain (see initHeroAtmosphere/initPrecipitation in site.js), sitting after the fade layer above rather than down with .hero-fabric and .hero-words: this is what keeps precipitation reading as in front of the atmosphere, crisp rather than sitting under the acrylic blur, and it still lets the fade layer's own gradient close the falling particles out toward the bottom of the hero the same way it already does for everything under it, instead of the streaks stopping dead at a visible edge the fade never got a chance to touch. The sheen after this one stays on top either way, the same glass reflection over the falling particles as over everything else in the hero. Draws nothing when no effect is selected, so an idle canvas here costs nothing. */ .hero-effect { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-centered { max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; } /* The page says its own name once here, at full size, and once more at the very end in the footer, the same device used deliberately at the two structural bookends, not sprinkled in wherever the brand mark was handy. */ .hero-wordmark { position: relative; margin: 0 0 0.3em; font-size: clamp(3rem, 9vw, 6.5rem); line-height: 1; } /* A pseudo-element vignette behind the mark (a discrete blurred shape, dark-theme only) used to carry this contrast job. It worked, but at the strength needed it read as its own thing, a dark cloud sitting behind the wordmark, not a lighting effect, and looked worse than the low- contrast problem it was solving. A halo hugging the letterforms themselves (below, in the shared .hero-wordmark rule) has no shape of its own to be visible as one: it can only ever look like the text having depth, in both themes, with nothing extra to remove for light theme. */ .hero-tagline { font-size: var(--step-1); color: var(--text-soft); max-width: 40ch; margin: 0 0 1.8em; line-height: 1.5; text-wrap: pretty; /* .hero-wordmark's own shadow just above is what actually keeps that text legible over the moving fabric shader underneath; --text-soft's contrast is tuned against a flat page background, not a shader that drifts through its own bright patches, so this needed the identical fix, just scaled down for how much smaller this text is. Caught on /download, where the tagline sits over a brighter stretch of the animation than it happens to on the homepage, the homepage was never actually safe either, just luckier. */ text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5); } :root[data-theme='light'] .hero-tagline { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); } /* The marker-highlight device, a solid colour block behind key words on a poster. Redone as a translucent glass chip instead of a flat fill, so the emphasis reads as this site's own material rather than a marker. */ .glass-highlight { /* Inline, not inline-block: an inline-block cannot break across lines, so a long phrase ("public-domain and openly licensed" on /sources) dropped whole to its own line and orphaned the words before it. box-decoration-break: clone gives each line fragment its own full chip, rounded corners, border and rim included, instead of one chip sliced open at the line break. */ display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0.05em 0.45em; line-height: 1.35; /* Copy always runs a comma or period right up against the closing tag (no source whitespace to lean on), which otherwise lands the mark tucked into the pill's own rounded corner. */ margin-right: 0.14em; border-radius: 8px; color: var(--text); font-weight: 600; /* No backdrop-filter here any more, deliberately: a filter on an inline element is applied to the union of its line fragments, so the moment the chip wrapped, the blur covered the whole width between the two fragments and smeared the words before it. The tint is a shade stronger than the blurred version needed (40%, was 30%) so the text stays legible over the hero fabric without it. */ background: color-mix(in srgb, var(--bg) 40%, transparent); border: 1px solid color-mix(in srgb, #fff 22%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent); } :root[data-theme='light'] .glass-highlight { border-color: color-mix(in srgb, var(--indigo) 12%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; margin-bottom: 26px; } .hero-shot { display: flex; justify-content: center; } /* This one screenshot now carries its own figcaption, matching every other shot on the page, but it deliberately does not take the .shot class: .shot .feature-card sets width to 100 percent, which would fight the 480 pixel cap .feature-card-hero wants to keep, on specificity alone. So the figure and caption get their own small rule here instead, styled to look identical to .shot's. */ .hero-shot figure { margin: 0; } .hero-shot figcaption { margin-top: 14px; font-size: var(--step--1); color: var(--text-muted); line-height: 1.5; text-align: center; } .hero-shot figcaption strong { display: block; color: var(--text); font-weight: 650; margin-bottom: 2px; } /* The second action is a fact, not a competing offer. Weight (a filled button vs. plain text) says which one matters, so neither needs a label announcing it as "primary". */ .text-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; font-weight: 600; color: var(--text-soft); text-decoration: none; padding-bottom: 2px; background-image: var(--accent-gradient); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 2px; transition: color 0.2s var(--ease), background-size 0.3s var(--ease-out); } .text-link svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); } .text-link:hover, .text-link:focus-visible { color: var(--text); background-size: 100% 2px; } .text-link:hover svg, .text-link:focus-visible svg { transform: translateX(3px); } .hero-facts { color: var(--text-muted); font-size: 0.87rem; margin: 0; } .hero-facts span { margin: 0 9px; opacity: 0.6; } /* ========================================================================== Feature cards. Empty placeholders. Real screenshots go here at release; until then this is deliberately just a slot, not a piece of finished design, so a plain dashed frame and a generic image glyph rather than the colour-washed icon illustration these used to carry. ========================================================================== */ .feature-card { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-xl); min-height: 260px; display: flex; align-items: center; justify-content: center; background: var(--surface); /* var(--border-strong) computes to only ~1.5:1 against --bg here, well under the 3:1 non-text minimum, in both themes, a plain dashed frame around an intentionally-empty slot needs to actually read as a frame. A dedicated, more opaque rgba (2px, not 1.5px) rather than reaching for --border-strong itself: that token is reused all over the page at its current, deliberately-subtle opacity, and this is the one place asking for a stronger version of it. 0.4/0.55 alpha computed to ~3.8:1 (dark) and ~3.9:1 (light) against --bg. */ border: 2px dashed rgba(255, 255, 255, 0.4); animation: settle 0.9s var(--ease-out) both; } :root[data-theme='light'] .feature-card { border-color: rgba(20, 22, 40, 0.55); } @keyframes settle { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* opacity: 0.5 on top of --text-muted computed to ~2.3:1 against --bg in dark theme (under 3:1) and ~2.0:1 in light. Confirmed the same way as the border above. 0.8 clears 3:1 in both themes (~4.2:1 dark, ~3.3:1 light) while still reading as a muted placeholder glyph rather than full body-text weight. */ .feature-card-placeholder-icon { width: 15%; min-width: 34px; max-width: 56px; aspect-ratio: 1; color: var(--text-muted); opacity: 0.8; } .feature-card-placeholder-icon svg { width: 100%; height: 100%; } /* ========================================================================== Screenshots ========================================================================== */ .shot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(16px, 3vw, 32px); align-items: start; } .shot figure { margin: 0; } /* A feature card fills its column. Unlike a phone screenshot, a wide card is exactly the right shape here, not something to cap and centre. */ .shot .feature-card { width: 100%; box-shadow: var(--shadow); } .feature-card-hero { width: min(480px, 100%); margin-inline: auto; } .shot figcaption { margin-top: 14px; font-size: var(--step--1); color: var(--text-muted); line-height: 1.5; text-align: center; } .shot figcaption strong { display: block; color: var(--text); font-weight: 650; margin-bottom: 2px; } /* Staggered vertical offsets so a row of three does not read as a filmstrip. Dropped on narrow screens where the grid is a single column. */ @media (min-width: 861px) { .shot-grid.stagger .shot:nth-child(even) { transform: translateY(26px); } } /* Screenshots inside documentation prose. */ .prose img { width: 100%; max-width: 300px; border-radius: 18px; border: 1px solid var(--border-strong); box-shadow: var(--shadow); margin: 1.6em 0; display: block; } /* ========================================================================== Sections ========================================================================== */ .section { padding: clamp(48px, 8vw, 88px) 0; } .section-tight { padding: clamp(36px, 5vw, 56px) 0; } /* Marks "01 The idea" as the page's high point, the first full beat after the hero, with a soft radial wash bleeding down from the top of the section rather than the flat background every other section sits on. Kept faint on purpose: it should read as an echo of the hero fading in above it, not a second hero competing for attention. */ .section-feature { position: relative; isolation: isolate; } .section-feature::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.4; background: radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 70%); } /* A full bleed surface tint rather than another section on the flat page background, so "05 A look inside" (the screenshots and the platform row together) reads as its own distinct chapter, the page's proof section, instead of blending into the sections above and below it. */ .section-surface { position: relative; background: var(--bg-soft); /* The one big breath on the home page. Every other section pairs .section with .section-tight, so the gap between any two of them came out identical (88 + 56 either way round) and the page read as a metronome; the proof chapter gets a visibly larger gap on both sides so arriving at it feels like turning to a new part of the document. */ padding-block: clamp(72px, 10vw, 128px); } /* A single centred hairline at the top edge of the surface, the only "rule" moment above the footer. Teal because it is the accent this site uses for a considered detail (the eyebrow, the tick), and at 55% so it reads as a printer's mark rather than a divider. */ .section-surface::before { content: ''; position: absolute; top: 0; left: 50%; width: 48px; height: 1px; transform: translateX(-50%); background: color-mix(in srgb, var(--teal) 55%, transparent); } /* Two tight sections in a row (02 Sources into 03 Reading into 04 Appearance, the split rows) read as one run of chapters, so the seam between them closes further than a tight section's own padding. */ .section-tight + .section-tight { padding-top: clamp(24px, 3vw, 36px); } .section-head { max-width: 620px; margin-bottom: clamp(28px, 4vw, 44px); } .section-head.center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--step--2); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--teal); margin-bottom: 12px; } /* An editorial numeral before the label. "01" rather than a bullet or an icon. Borrowed from print section markers. Optional: plain eyebrows with no index still line up correctly without one. */ .eyebrow-index { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--step-0); text-transform: none; letter-spacing: 0; color: var(--text-muted); } /* The one eyebrow that is also a button, revealing the ambient-effect row in the Appearance section (see .effect-row and site.js). Only the browser's own button chrome gets reset here, background, border, padding, the button element's own font-family and line-height, so the .eyebrow rule above still supplies every typographic property that actually needs to match the other, non-interactive eyebrows on the page: no font shorthand here, which would reset those back to the button default instead of inheriting them. */ .eyebrow-trigger { background: none; border: 0; padding: 0; margin: 0; font-family: inherit; line-height: inherit; text-align: inherit; cursor: pointer; } .section-head h2, .section-head h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); letter-spacing: -0.01em; margin-bottom: 0.35em; } .section-head p { color: var(--text-soft); font-size: var(--step-1); line-height: 1.55; margin: 0; } /* The same device one step down the scale, for a heading that groups a card grid inside a utility page (the platform groups on /download) rather than opening a chapter of the home page: eyebrow-index and serif h2 intact, but at --step-2 with a shorter drop to the grid below, so the page's own first-run head further down still outranks it. */ .section-head-compact { margin-bottom: clamp(18px, 2.5vw, 26px); } .section-head-compact h2 { font-size: var(--step-2); margin-bottom: 0.25em; } .section-head-compact p { font-size: var(--step-0); max-width: 56ch; } /* Two steps down: an eyebrow with a serif label under it, for a titled group inside a page that already has its h1 (the badge row on a profile). Left-aligned and unconstrained, since it sits in a column rather than opening a chapter. */ .section-head-minor { margin-top: 36px; margin-bottom: 14px; text-align: left; max-width: none; } .section-head-minor h2 { font-size: var(--step-0l); margin-bottom: 0; } /* The date line on /terms and /privacy used to sit in the lede slot at --step-1, as if "Last updated" were the page's summary. It is metadata, so it borrows the docs header's .doc-meta row, left-aligned under the real lede rather than centred the way the docs header runs it. */ .section-head .doc-meta { justify-content: flex-start; margin: 18px 0 0; } /* ========================================================================== Cards ========================================================================== */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(14px, 2vw, 20px); } .card { position: relative; padding: 26px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease); overflow: hidden; --spot-x: 50%; --spot-y: 50%; } /* A one pixel gradient hairline along the top edge, revealed on hover. It is the same trick the app uses on its cards. */ .card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--accent-gradient); opacity: 0; transition: opacity 0.25s var(--ease); z-index: 1; } /* A soft light that follows the cursor, set via --spot-x/--spot-y in site.js. Absent on touch devices (see the hover:hover guard there), where a fixed position would just look like an off-centre smudge. */ .card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(360px circle at var(--spot-x) var(--spot-y), color-mix(in srgb, var(--violet) 14%, transparent), transparent 70%); opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; } .card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.5); } .card:hover::before { opacity: 1; } .card:hover::after { opacity: 1; } .card > * { position: relative; z-index: 2; } .card h3 { font-size: var(--step-0l); margin-bottom: 0.42em; } .card p { color: var(--text-soft); font-size: var(--step-0s); margin: 0; } .card .pill, .doc-card-body .pill { margin-bottom: 10px; } /* A glossy "keycap" rather than a flat gradient chip: bigger, tilted a few degrees via a local perspective, a highlight overlay standing in for a curved glass/plastic top catching light, and a layered shadow for real depth instead of one flat glow. Stands upright and lifts on card hover. */ .card-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; /* Scrimmed the same way and for the same reason as .theme-toggle-thumb above, see its comment for the actual per-palette numbers. */ background: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)), var(--accent-gradient); color: var(--on-brand); margin-bottom: 20px; position: relative; isolation: isolate; transform: perspective(600px) rotateX(6deg); transform-origin: bottom center; box-shadow: 0 20px 40px -16px color-mix(in srgb, var(--violet) 55%, transparent), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.25); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } .card-icon::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 35%, transparent 60%); pointer-events: none; } .card-icon svg { width: 28px; height: 28px; position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); } .card:hover .card-icon { transform: perspective(600px) rotateX(0deg) translateY(-4px); box-shadow: 0 28px 50px -16px color-mix(in srgb, var(--violet) 65%, transparent), inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 6px rgba(0, 0, 0, 0.25); } a.card { text-decoration: none; color: inherit; display: block; } /* A plain variant, keeping the icon, heading, and paragraph but dropping the boxed background, border, and hover glow. Used for the platform row in "05 A look inside", which sits right under a screenshot grid and reads better as a quiet caption strip than as a second set of boxed cards this soon after the ones in "01 The idea". */ .card-plain { background: none; border: none; padding: 0; box-shadow: none; } .card-plain::before, .card-plain::after { display: none; } .card-plain:hover { transform: none; box-shadow: none; } .card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: var(--step--1); font-weight: 600; color: var(--link); padding-bottom: 2px; background-image: var(--accent-gradient); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 2px; transition: background-size 0.3s var(--ease-out); } .card:hover .card-link, .card-link:hover, .card-link:focus-visible { background-size: 100% 2px; } .card-link svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); } .card:hover .card-link svg { transform: translateX(3px); } /* ========================================================================== Feature split rows ========================================================================== */ .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 5vw, 64px); align-items: center; } .split + .split { margin-top: clamp(48px, 7vw, 84px); } .split.reverse > *:first-child { order: 2; } .split h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); letter-spacing: -0.01em; margin-bottom: 0.5em; } .split p { color: var(--text-soft); font-size: var(--step-0); } /* A quieter sub-heading for a block nested inside a bigger section, the platform row inside "05 A look inside" being the one case so far. Giving it the full .section-head treatment would just repeat the eyebrow and h2 pattern used two paragraphs above it on the same page, so this is sized down instead, off .split's own h3 scale rather than .section-head's. */ .subhead { max-width: 560px; margin-bottom: 24px; } .subhead h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); letter-spacing: -0.01em; margin-bottom: 0.3em; } .subhead p { color: var(--text-soft); font-size: var(--step-0); margin: 0; } .checklist { list-style: none; padding: 0; margin: 1.2em 0 0; display: grid; gap: 11px; } .checklist li { display: flex; gap: 11px; align-items: flex-start; color: var(--text-soft); font-size: var(--step-0s); line-height: 1.5; } .checklist svg { width: 18px; height: 18px; color: var(--teal); flex-shrink: 0; margin-top: 3px; } /* The ticks draw themselves as each row arrives, instead of sitting pre-drawn on a row that is still rising in. The row's own reveal delay (the nth-child stagger in the Reveal block) is mirrored here as --reveal-delay, so the tick lands 0.2s after its own row rather than after the first one. Gated on .has-js like .reveal itself: without the script nothing would ever add .is-visible, and the ticks must not be left undrawn on a page that never animates. */ .has-js .checklist svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.35s var(--ease-out); transition-delay: calc(var(--reveal-delay, 0s) + 0.2s); } .has-js .checklist .reveal.is-visible svg path { stroke-dashoffset: 0; } .checklist li:nth-child(2) { --reveal-delay: 0.09s; } .checklist li:nth-child(3) { --reveal-delay: 0.18s; } .checklist li:nth-child(4) { --reveal-delay: 0.27s; } /* Swatch strip used to show the accent themes, and, now that the footer's own colour theme control is gone, the real thing itself: each swatch is a real button underneath (see site.js), but every rule here is written to keep it looking exactly like the plain decorative strip it always was, no background colour, padding, or line-height left over from the browser's own button chrome, and no hover state stronger than the lift this row already had before any swatch did anything. Finding out these are clickable at all is meant to be the discovery, so nothing here is allowed to give that away first. */ .swatches { display: flex; flex-wrap: wrap; gap: 12px; } .swatch { width: 54px; height: 54px; border-radius: 16px; border: 1px solid var(--border-strong); background-color: transparent; padding: 0; margin: 0; font-family: inherit; line-height: inherit; position: relative; transition: transform 0.2s var(--ease-out); cursor: pointer; } .swatch:hover { transform: translateY(-4px) scale(1.06); } .swatch span { position: absolute; /* Wider than the swatch on both sides: at --step--2 the longer names ("Boundless", "Blossom") are wider than the 54px square, and a label box the swatch's own width would start-align the overflow and sit the name off centre. Only one label shows at a time, so the boxes may overlap. */ inset: auto -14px -22px; text-align: center; white-space: nowrap; font-size: var(--step--2); color: var(--text-muted); opacity: 0; transition: opacity 0.2s var(--ease); } .swatch:hover span, .swatch:focus-visible span { opacity: 1; } .swatch-row { margin-bottom: 26px; } /* The account page's profile-accent picker. Same swatch treatment as the row above, and deliberately not a new control: what changes is only what a swatch *is* here, a real radio input inside the profile form rather than a button that runs script, so choosing an accent saves through the same POST as the display name and the bio and works with scripting off. The gradient is not repeated as ten more hex triples: each swatch carries data-accent, which the palette table near the top of this file uses to re-declare the four stops for that one element, so this single rule paints all ten from the same values everything else reads. */ .accent-field { border: 0; padding: 0; margin-bottom: 22px; min-width: 0; } .accent-field legend { display: block; padding: 0; font-size: var(--step--1); font-weight: 600; color: var(--text); margin-bottom: 10px; } /* A wider row gap than the showcase strip uses. Its labels only appear on hover, one at a time, so they may overlap the row below; the checked one here is visible permanently, and it hangs 22px under its swatch. A fixed five-column grid rather than a wrapping flex row: ten swatches flex-wrapped in the panel's width landed as nine and an orphan, and 5 + 5 is the only split that reads as deliberate. The panel is never narrower than five swatches and four gutters (318px), so it never needs to wrap. */ .accent-swatches { display: grid; grid-template-columns: repeat(5, 54px); gap: 30px 12px; margin-bottom: 24px; } .accent-swatch { display: block; background-image: linear-gradient(145deg, var(--indigo), var(--violet), var(--blue), var(--teal)); cursor: pointer; } /* The input is the control, so it is kept in the layout and in the tab order rather than display: none, and only made invisible. Focus is drawn on the label around it by the :has() rule below. */ .accent-swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } /* The chosen one wears a ring in the page's own ink rather than a tick glyph on top: several of these palettes are near-black or near-white at one stop, and a mark drawn on the swatch itself would disappear into one of them. */ .accent-swatch:has(input:checked) { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); } .accent-swatch:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 3px; } /* The showcase row hides its labels until hover, because finding out those are clickable is the point there. Here they are form controls, so the chosen one keeps its name visible at all times and the rest still appear on hover and on focus. */ .accent-swatch:has(input:checked) span, .accent-swatch:has(input:focus-visible) span { opacity: 1; } /* The account page's profile-picture control, sitting next to the banner's because the two controls sit next to each other on the page. */ .avatar-field { margin-bottom: 22px; } /* Deliberately not a round copy of .banner-preview, and the two differences are both forced by the code behind them rather than chosen for looks. The disc is an opaque surface instead of the accent gradient because there is no no-image state for a gradient to show through. lib/avatars.js always returns a URL, and when nobody has uploaded anything that URL is this app's own default picture rather than a file on the storage host, so this frame is never sitting behind an empty src the way the banner's is before a first upload. A gradient here would only ever be a rim nobody sees. And the frame is a circle because it is a circle on the public profile. Someone choosing a picture is choosing what a centred square crop of it looks like, so they should be shown the shape they are actually going to get rather than a rounded rectangle that quietly loses its corners one page later. */ .avatar-preview { position: relative; width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--border); overflow: hidden; background: var(--surface-solid); margin-bottom: 14px; } .avatar-preview-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /* The account page's profile-banner control. Sits under the accent picker because that is what it layers over: the box below always paints the accent gradient, and the uploaded image, when there is one, covers it. With no image the box is simply the accent, which is exactly what the profile shows. Two stops written out here rather than var(--accent-gradient), which looks like it would do the same thing and does not. A custom property's own var() references are substituted where the property is *declared*, and --accent-gradient is declared once on :root, so its --violet and --teal resolve against :root and what inherits down is an already-finished gradient in the *visitor's* palette. Setting data-accent on this element redefines --violet and --teal here, far too late to change it. Caught by reading the computed background of a nova preview and finding royal in it, the palette this browser happened to be set to. Naming the stops in this rule is what makes the substitution happen on the element that carries the accent, which is the whole requirement: a profile's colour is its owner's choice and must not follow whoever is looking at it. Still only two stops, not .profile-card's four-stop recipe. This is a control showing a crop, not a facsimile of the card, and duplicating that recipe would create a second place to keep in step with the first. */ .banner-field { margin-bottom: 22px; } /* The same label a or a