to convert one band at a time. =========================================================================== */ @layer vds.base { .vds, .vds *, .vds *::before, .vds *::after { box-sizing: border-box; } .vds { font-family: var(--vds-font-sans); font-size: var(--vds-text-body); line-height: var(--vds-leading-body); letter-spacing: var(--vds-tracking-body); color: var(--vds-text-primary); background-color: var(--vds-surface-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Fragment Mono ships one weight. Without this, any font-weight:600 on a mono element gets a smeared synthetic bold that is obvious at 11px uppercase. Turning synthesis off makes the mistake visible instead. */ font-synthesis-weight: none; } /* --- OVERFLOW MADE IMPOSSIBLE ------------------------------------------ Four rules that between them prevent almost every "text overflowing the grid on mobile" report. They are in the base layer deliberately: a component author should not have to remember any of them. 1. min-width:0 on flex and grid children. A flex/grid item's default min-width is `auto`, which means it refuses to shrink below its content. One long unbroken string — an API path, a key, a German compound — then pushes the whole track wider than the viewport. This single missing declaration is the most common cause of horizontal scroll on a mobile page, and it is fixed here once. 2. Media never exceeds its box. 3. Long unbroken strings wrap rather than extend. 4. The page itself may not scroll sideways. */ .vds :where(.vds-grid, .vds-row, .vds-stack, .vds-cluster) > * { min-width: 0; } .vds :where(img, svg, video, canvas, iframe, picture) { max-width: 100%; height: auto; } .vds :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, td, th, figcaption) { overflow-wrap: break-word; } .vds :where(pre, code, kbd, samp, .vds-mono) { overflow-wrap: break-word; } .vds { overflow-x: clip; } /* --- TAP TARGET FLOOR -------------------------------------------------- WCAG 2.2 AA 2.5.8. Applied structurally so no component can ship below it, including ones written later by someone who has not read this file. :where() keeps specificity at zero so a component can still set a larger size without a fight. */ .vds :where(a[href], button, [role="button"], input, select, textarea, summary) { min-height: var(--vds-tap-min); } /* --- one focus ring for the whole system ------------------------------- */ .vds :focus-visible { outline: var(--vds-focus-width) solid var(--vds-accent-primary); outline-offset: var(--vds-focus-offset); } .vds :focus:not(:focus-visible) { outline: none; } /* forms inherit the system's type instead of the UA's */ .vds :where(input, select, textarea, button) { font: inherit; color: inherit; } } /* =========================================================================== THE DUST BLOOM — a component-level material --------------------------------------------------------------------------- ONE implementation, opted into by any component: a button, a card, a grid cell, a section header. It is the same construction as css/vedika-sheet-css.css, so a bloom inside a capsule and a bloom on a full-bleed poster are visibly the same material. * GAUSSIAN FALLOFF, NOT A CONE. Eight stops approximating exp(-3.4t^2). A two-stop radial-gradient is a linear ramp and the eye reads the kink in its first derivative as a hard disc. This is the whole difference between "airbrush" and "CSS gradient". * SUBTRACTIVE ON LIGHT, ADDITIVE ON DARK. On white the blooms are inks and composite with multiply, so magenta over gold really becomes red rather than going grey. On near-black they are light and composite with screen. --vds-bloom-mode carries this and lives in the token file. * THE CLEARING IS THE BLEND IDENTITY. Layer 0 of the stack is a wash in --vds-bloom-null — white under multiply, black under screen, i.e. exactly the identity element of the active blend mode. Where that wash is opaque the ink is ERASED and raw surface shows through. That is what holds label text off the bloom, and it is why the measured contrast numbers survive. It is not decoration. Do not remove it. * GRAIN IS A DITHER, NOT A TEXTURE. Zero-mean feTurbulence composited with overlay, whose identity IS mid-grey. It breaks the 8-bit quantiser without moving the average pixel, and it is what makes the bloom read as granular dust rather than a smooth ramp. It is masked to the bloom's own region so a flat surface never picks up noise. COST — read this before adding a bloom to a repeated element. The bloom is TWO extra paint layers with a blend mode. Static, that is cheap: it rasterises once and is then just a composited texture. ANIMATED, it invalidates and repaints every frame, and background-position/size animation cannot run on the compositor. So the default is STATIC and the animation is opt-in per element via `.vds-bloom--drift`. Never put --drift on anything that repeats. The budget is stated in DESIGN-SYSTEM.md and measured in tools/bloom-perf.mjs. =========================================================================== */ @layer vds.components { .vds-bloom-host { /* geometry, as fractions of the element. Defaults put the bloom in the right third and bleed it leftward — the reference component. */ /* Three SEPARATE fronds in the right third, not one merged wash. The radii are deliberately small and the centres are spread across x and y so the blooms overlap only partially -- that partial overlap is what produces the feathered, dispersing edge instead of a left-to-right ramp. Wide radii merge the three into a single smooth gradient, which is the exact thing this is not supposed to look like. */ --vds-b1-x: 84%; --vds-b1-y: 58%; --vds-b1-rx: 30%; --vds-b1-ry: 116%; --vds-b2-x: 99%; --vds-b2-y: 96%; --vds-b2-rx: 27%; --vds-b2-ry: 104%; --vds-b3-x: 72%; --vds-b3-y: 2%; --vds-b3-rx: 27%; --vds-b3-ry: 122%; --vds-bloom-alpha: 0.62; --vds-bloom-clear: 1; --vds-bloom-clear-width: 58%; /* the dither carries the "dust" reading; too low and the bloom collapses into a plain CSS gradient */ --vds-bloom-grain: 0.5; position: relative; /* REQUIRED. Without it the multiply reaches through to the page behind instead of stopping at this element's own background. */ isolation: isolate; } /* --- the ink layer ------------------------------------------------------ z-index:-1 places it above the element's own background and below its inline content, so no wrapper element is needed and text is never blended into the bloom. */ .vds-bloom-host.vds-bloom::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; mix-blend-mode: var(--vds-bloom-mode); /* layer 0 (the clearing) composites normally ON TOP of the three inks, which multiply among themselves. */ background-blend-mode: normal, multiply, multiply; background-repeat: no-repeat; background-size: 132% 132%; background-position: 50% 50%; background-image: linear-gradient(to right in oklab, rgb(var(--vds-bloom-null) / var(--vds-bloom-clear)) 0%, rgb(var(--vds-bloom-null) / calc(var(--vds-bloom-clear) * var(--vds-k1))) calc(var(--vds-bloom-clear-width) * 0.14), rgb(var(--vds-bloom-null) / calc(var(--vds-bloom-clear) * var(--vds-k2))) calc(var(--vds-bloom-clear-width) * 0.28), rgb(var(--vds-bloom-null) / calc(var(--vds-bloom-clear) * var(--vds-k3))) calc(var(--vds-bloom-clear-width) * 0.43), rgb(var(--vds-bloom-null) / calc(var(--vds-bloom-clear) * var(--vds-k4))) calc(var(--vds-bloom-clear-width) * 0.58), rgb(var(--vds-bloom-null) / calc(var(--vds-bloom-clear) * var(--vds-k5))) calc(var(--vds-bloom-clear-width) * 0.72), rgb(var(--vds-bloom-null) / calc(var(--vds-bloom-clear) * var(--vds-k6))) calc(var(--vds-bloom-clear-width) * 0.86), rgb(var(--vds-bloom-null) / 0) var(--vds-bloom-clear-width)), radial-gradient(var(--vds-b1-rx) var(--vds-b1-ry) at var(--vds-b1-x) var(--vds-b1-y) in oklab, color-mix(in oklab, var(--vds-bloom-ink-1) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k0) * 100%), transparent) var(--vds-s0), color-mix(in oklab, var(--vds-bloom-ink-1) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k1) * 100%), transparent) var(--vds-s1), color-mix(in oklab, var(--vds-bloom-ink-1) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k2) * 100%), transparent) var(--vds-s2), color-mix(in oklab, var(--vds-bloom-ink-1) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k3) * 100%), transparent) var(--vds-s3), color-mix(in oklab, var(--vds-bloom-ink-1) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k4) * 100%), transparent) var(--vds-s4), color-mix(in oklab, var(--vds-bloom-ink-1) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k5) * 100%), transparent) var(--vds-s5), color-mix(in oklab, var(--vds-bloom-ink-1) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k6) * 100%), transparent) var(--vds-s6), transparent 100%), radial-gradient(var(--vds-b2-rx) var(--vds-b2-ry) at var(--vds-b2-x) var(--vds-b2-y) in oklab, color-mix(in oklab, var(--vds-bloom-ink-2) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k0) * 100%), transparent) var(--vds-s0), color-mix(in oklab, var(--vds-bloom-ink-2) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k1) * 100%), transparent) var(--vds-s1), color-mix(in oklab, var(--vds-bloom-ink-2) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k2) * 100%), transparent) var(--vds-s2), color-mix(in oklab, var(--vds-bloom-ink-2) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k3) * 100%), transparent) var(--vds-s3), color-mix(in oklab, var(--vds-bloom-ink-2) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k4) * 100%), transparent) var(--vds-s4), color-mix(in oklab, var(--vds-bloom-ink-2) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k5) * 100%), transparent) var(--vds-s5), color-mix(in oklab, var(--vds-bloom-ink-2) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k6) * 100%), transparent) var(--vds-s6), transparent 100%), radial-gradient(var(--vds-b3-rx) var(--vds-b3-ry) at var(--vds-b3-x) var(--vds-b3-y) in oklab, color-mix(in oklab, var(--vds-bloom-ink-3) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k0) * 100%), transparent) var(--vds-s0), color-mix(in oklab, var(--vds-bloom-ink-3) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k1) * 100%), transparent) var(--vds-s1), color-mix(in oklab, var(--vds-bloom-ink-3) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k2) * 100%), transparent) var(--vds-s2), color-mix(in oklab, var(--vds-bloom-ink-3) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k3) * 100%), transparent) var(--vds-s3), color-mix(in oklab, var(--vds-bloom-ink-3) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k4) * 100%), transparent) var(--vds-s4), color-mix(in oklab, var(--vds-bloom-ink-3) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k5) * 100%), transparent) var(--vds-s5), color-mix(in oklab, var(--vds-bloom-ink-3) calc(var(--vds-bloom-alpha) * var(--vds-bloom-strength) * var(--vds-k6) * 100%), transparent) var(--vds-s6), transparent 100%); } /* --- the dither --------------------------------------------------------- */ .vds-bloom-host.vds-bloom::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; mix-blend-mode: overlay; opacity: var(--vds-bloom-grain); background-repeat: repeat; background-size: var(--vds-grain-tile) var(--vds-grain-tile); background-image: var(--vds-grain-image); -webkit-mask-image: linear-gradient(to right, transparent 0%, rgb(var(--vds-rgb-black) / 0.25) calc(var(--vds-bloom-clear-width) * 0.55), rgb(var(--vds-rgb-black) / 0.8) calc(var(--vds-bloom-clear-width) * 0.95), rgb(var(--vds-rgb-black) / 1) 100%); mask-image: linear-gradient(to right, transparent 0%, rgb(var(--vds-rgb-black) / 0.25) calc(var(--vds-bloom-clear-width) * 0.55), rgb(var(--vds-rgb-black) / 0.8) calc(var(--vds-bloom-clear-width) * 0.95), rgb(var(--vds-rgb-black) / 1) 100%); } /* --- drift: OPT-IN, hero moments only ---------------------------------- Two irrational periods on background-position and background-size. The layer is oversized to 132% so its own edges are never exposed and it never needs translating. NEVER apply this to a repeated element — see COST. */ /* Travel widened 2026-07-29. The old cycle moved 9 percentage points of position and 14 of size over 26s — roughly 0.4%/s, which is under the threshold at which the eye registers movement at all, so the surface read as a static gradient. Three keyframes also meant the motion retraced its own path exactly, which reads as a pulse rather than a drift. Four asymmetric stops on a non-repeating loop, with the two axes moving out of phase, is what makes it read as pigment in water rather than a panning gradient. Still `background-position`/`-size` rather than a transform: a transform on the ::before would move the CLEARING as well as the bloom, and that clearing is what holds the label's contrast. */ @keyframes vds-drift { 0% { background-position: 42% 56%; background-size: 130% 134%; } 27% { background-position: 58% 43%; background-size: 152% 140%; } 58% { background-position: 47% 61%; background-size: 138% 156%; } 81% { background-position: 61% 49%; background-size: 148% 132%; } 100% { background-position: 42% 56%; background-size: 130% 134%; } } .vds-bloom-host.vds-bloom.vds-bloom--drift::before { animation: vds-drift var(--vds-duration-bloom) var(--vds-ease-soft) infinite; } /* --- geometry presets, so nobody hand-writes six percentages ------------ */ .vds-bloom-at--right { --vds-b1-x: 84%; --vds-b2-x: 99%; --vds-b3-x: 72%; --vds-bloom-clear-width: 58%; } .vds-bloom-at--corner { --vds-b1-x: 94%; --vds-b1-y: 4%; --vds-b1-rx: 40%; --vds-b1-ry: 74%; --vds-b2-x: 108%; --vds-b2-y: 26%; --vds-b2-rx: 34%; --vds-b2-ry: 66%; --vds-b3-x: 80%; --vds-b3-y: -20%; --vds-b3-rx: 34%; --vds-b3-ry: 78%; --vds-bloom-clear-width: 76%; } .vds-bloom-at--base { --vds-b1-x: 50%; --vds-b1-y: 118%; --vds-b1-rx: 78%; --vds-b1-ry: 90%; --vds-b2-x: 78%; --vds-b2-y: 128%; --vds-b2-rx: 64%; --vds-b2-ry: 80%; --vds-b3-x: 24%; --vds-b3-y: 124%; --vds-b3-rx: 70%; --vds-b3-ry: 86%; --vds-bloom-clear: 0; } /* strength presets — the taste dial */ .vds-bloom--faint { --vds-bloom-alpha: 0.22; --vds-bloom-grain: 0.26; } .vds-bloom--full { --vds-bloom-alpha: 0.62; } /* =========================================================================== TYPE --------------------------------------------------------------------------- This is the ONLY type authority in the system. No page may set its own font-family or a font-size outside this scale. =========================================================================== */ .vds-display { font-size: var(--vds-text-display); line-height: var(--vds-leading-tight); letter-spacing: var(--vds-tracking-display); font-weight: var(--vds-weight-black); margin: 0; text-wrap: balance; } .vds-h1 { font-size: var(--vds-text-h1); line-height: var(--vds-leading-head); letter-spacing: var(--vds-tracking-head); font-weight: var(--vds-weight-bold); margin: 0; text-wrap: balance; } .vds-h2 { font-size: var(--vds-text-h2); line-height: var(--vds-leading-head); letter-spacing: var(--vds-tracking-head); font-weight: var(--vds-weight-bold); margin: 0; text-wrap: balance; } .vds-h3 { font-size: var(--vds-text-h3); line-height: var(--vds-leading-snug); font-weight: var(--vds-weight-semi); margin: 0; } .vds-h4 { font-size: var(--vds-text-h4); line-height: var(--vds-leading-snug); font-weight: var(--vds-weight-semi); margin: 0; } .vds-lede { font-size: var(--vds-text-h4); line-height: var(--vds-leading-body); color: var(--vds-text-secondary); margin: 0; max-width: var(--vds-measure); } .vds-body { font-size: var(--vds-text-body); line-height: var(--vds-leading-body); color: var(--vds-text-secondary); margin: 0; max-width: var(--vds-measure); } .vds-small { font-size: var(--vds-text-sm); line-height: var(--vds-leading-snug); color: var(--vds-text-secondary); margin: 0; } /* --- the mono voice. Weight stays 400; SIZE + TRACKING do the work. ----- */ .vds-eyebrow { font-family: var(--vds-font-mono); font-weight: var(--vds-weight-regular); font-size: var(--vds-text-micro); line-height: var(--vds-leading-snug); letter-spacing: var(--vds-tracking-caps-xs); text-transform: uppercase; color: var(--vds-text-tertiary); margin: 0; inline-size: fit-content; max-inline-size: 100%; } .vds-label { font-family: var(--vds-font-mono); font-weight: var(--vds-weight-regular); font-size: var(--vds-text-xs); line-height: var(--vds-leading-snug); letter-spacing: var(--vds-tracking-caps); text-transform: uppercase; color: var(--vds-text-primary); margin: 0; inline-size: fit-content; max-inline-size: 100%; } .vds-caps { font-family: var(--vds-font-mono); font-weight: var(--vds-weight-regular); font-size: var(--vds-text-micro); line-height: var(--vds-leading-snug); letter-spacing: var(--vds-tracking-caps-sm); text-transform: uppercase; color: var(--vds-text-tertiary); margin: 0; inline-size: fit-content; max-inline-size: 100%; } .vds-mono { font-family: var(--vds-font-mono); font-size: 0.9em; letter-spacing: 0; } .vds-accent-text { color: var(--vds-accent-text); } .vds-code { font-family: var(--vds-font-mono); font-size: var(--vds-text-xs); line-height: var(--vds-leading-snug); letter-spacing: 0; background: var(--vds-surface-well); color: var(--vds-text-primary); border-radius: var(--vds-radius-xs); padding: 0.15em 0.42em; } pre.vds-code { display: block; padding: var(--vds-space-4); overflow-x: auto; border: var(--vds-hairline) solid var(--vds-border-subtle); border-radius: var(--vds-radius-sm); background: var(--vds-surface-sunken); } /* =========================================================================== THE PILL — the reference component --------------------------------------------------------------------------- GET API KEYS NO CARD REQUIRED `vds-bloom-host` is REQUIRED alongside `vds-bloom` and is easy to miss: the ink layer is selected as `.vds-bloom-host.vds-bloom::before`, and the bloom GEOMETRY (--vds-b1-x .. --vds-b3-ry) is declared on `.vds-bloom-host` only. Omit it and the pill still renders, correctly sized and coloured, with no bloom and no error anywhere — a silent failure. This example was missing the class until 2026-07-29; anyone who copied it shipped a flat capsule. Both spans are optional; a pill with bare text works and sets it as the label. Two spans give the stacked label+subtitle of the reference. The bloom is a MODIFIER (`.vds-bloom`), never baked in. A page where every button blooms is worse than one where a single one does. =========================================================================== */ .vds-pill { --vds-pill-bg: var(--vds-surface); --vds-pill-fg: var(--vds-text-primary); --vds-pill-bd: var(--vds-border); --vds-pill-sub: var(--vds-text-tertiary); --vds-pill-shadow: var(--vds-shadow-float); position: relative; isolation: isolate; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--vds-space-1); min-height: var(--vds-tap-comfortable); padding-block: var(--vds-space-2); padding-inline: var(--vds-space-5); border: var(--vds-hairline) solid var(--vds-pill-bd); border-radius: var(--vds-radius-pill); background-color: var(--vds-pill-bg); color: var(--vds-pill-fg); box-shadow: var(--vds-pill-shadow), var(--vds-shadow-edge); font-family: var(--vds-font-mono-display); font-weight: var(--vds-weight-regular); font-size: var(--vds-text-xs); line-height: var(--vds-leading-snug); letter-spacing: var(--vds-tracking-caps); text-transform: uppercase; text-decoration: none; text-align: left; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; /* a long label wraps inside the capsule instead of widening past its container — the capsule is never the thing that causes a sideways scroll on a 390px screen */ max-width: 100%; transition: transform var(--vds-duration-2) var(--vds-ease), box-shadow var(--vds-duration-2) var(--vds-ease), background-color var(--vds-duration-1) linear, border-color var(--vds-duration-1) linear, color var(--vds-duration-1) linear; } .vds-pill__label { display: block; font: inherit; color: inherit; inline-size: fit-content; max-inline-size: 100%; } .vds-pill__sub { display: block; /* the box hugs the glyphs, so it can never extend into the bloom */ inline-size: fit-content; max-inline-size: 100%; font-family: var(--vds-font-mono); font-weight: var(--vds-weight-regular); font-size: var(--vds-text-micro); letter-spacing: var(--vds-tracking-caps-sm); line-height: var(--vds-leading-snug); text-transform: uppercase; color: var(--vds-pill-sub); } .vds-pill__row { display: flex; align-items: center; gap: var(--vds-space-2); } .vds-pill :where(svg) { flex: none; inline-size: 1em; block-size: 1em; } /* --- variants ----------------------------------------------------------- */ .vds-pill--primary { --vds-pill-bg: var(--vds-surface-inverse); --vds-pill-fg: var(--vds-text-inverse); --vds-pill-bd: transparent; --vds-pill-sub: color-mix(in oklab, var(--vds-text-inverse) 78%, transparent); /* The capsule's own surface is the INVERSE of the page, so the bloom's blend identity must invert with it — the ink lands on the capsule, not on the page. This is the one place these two tokens are legitimately set outside the token file, and they are still set together. */ --vds-bloom-mode: screen; --vds-bloom-null: var(--vds-rgb-black); --vds-bloom-alpha: 0.58; } :where([data-vds-theme="dark"], .vds-dark) .vds-pill--primary { --vds-bloom-mode: multiply; --vds-bloom-null: var(--vds-rgb-white); --vds-bloom-alpha: 0.5; } .vds-pill--secondary { --vds-pill-bg: var(--vds-surface); --vds-pill-fg: var(--vds-text-primary); --vds-pill-bd: var(--vds-border); /* --text-secondary, not --text-tertiary: a bloom LIFTS the backdrop under the subtitle, and tertiary measured 3.91:1 against a solar bloom on a dark capsule. One step up holds AA across every colourway. */ --vds-pill-sub: var(--vds-text-secondary); } .vds-pill--ghost { --vds-pill-bg: transparent; --vds-pill-fg: var(--vds-text-secondary); --vds-pill-bd: var(--vds-border); --vds-pill-shadow: var(--vds-shadow-none); box-shadow: var(--vds-shadow-none); } /* --- sizes -------------------------------------------------------------- */ .vds-pill--sm { min-height: var(--vds-tap-comfortable); padding-inline: var(--vds-space-4); font-size: var(--vds-text-micro); letter-spacing: var(--vds-tracking-caps-sm); } .vds-pill--lg { min-height: calc(var(--vds-tap-comfortable) + var(--vds-space-5)); padding-inline: var(--vds-space-6); font-size: var(--vds-text-sm); } .vds-pill--block { display: flex; inline-size: 100%; align-items: flex-start; /* A full-width capsule holds ~3x the text of an inline one, so its label sits deep into the gaussian clearing where only ~40% of the ink has been erased. Measured 3.75:1 there at the inline defaults. Lower ink is the right lever - the bloom still reads at the right edge, which is where there is no text. */ --vds-bloom-clear-width: 74%; --vds-bloom-alpha: 0.5; } /* --- states ------------------------------------------------------------- */ .vds-pill:hover { transform: translateY(-1px); box-shadow: var(--vds-shadow-lift), var(--vds-shadow-edge); } .vds-pill--secondary:hover { --vds-pill-bd: var(--vds-border-strong); } .vds-pill--ghost:hover { --vds-pill-bg: var(--vds-accent-soft); --vds-pill-bd: var(--vds-accent-border); --vds-pill-fg: var(--vds-text-primary); transform: none; box-shadow: var(--vds-shadow-none); } .vds-pill:active { transform: translateY(0) scale(0.985); box-shadow: var(--vds-shadow-1), var(--vds-shadow-edge); transition-duration: var(--vds-duration-1); } .vds-pill:focus-visible { outline: var(--vds-focus-width) solid var(--vds-accent-primary); outline-offset: var(--vds-focus-offset); } .vds-pill:disabled, .vds-pill[aria-disabled="true"] { cursor: not-allowed; transform: none; /* never fade the label out of AA — recolour instead of reducing opacity */ opacity: 1; --vds-pill-bg: var(--vds-surface-well); --vds-pill-fg: var(--vds-text-tertiary); --vds-pill-bd: var(--vds-border-subtle); --vds-pill-sub: var(--vds-text-tertiary); box-shadow: var(--vds-shadow-none); } .vds-pill:disabled::before, .vds-pill:disabled::after, .vds-pill[aria-disabled="true"]::before, .vds-pill[aria-disabled="true"]::after { opacity: 0; } /* a two-line capsule is taller, so the ink drops slightly to hold the same measured contrast as the one-line case */ .vds-pill.vds-bloom:has(.vds-pill__sub) { --vds-bloom-alpha: 0.52; } /* =========================================================================== PANEL — the sheet --------------------------------------------------------------------------- `container-type: inline-size` is what makes a panel correct in a sidebar, a grid cell and a full-bleed section with no breakpoint anywhere. =========================================================================== */ .vds-panel { container-type: inline-size; container-name: vds-panel; position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--vds-space-3); padding: var(--vds-space-5); border: var(--vds-hairline) solid var(--vds-border-subtle); border-radius: var(--vds-radius-lg); background-color: var(--vds-surface); color: var(--vds-text-primary); box-shadow: var(--vds-shadow-1); min-width: 0; transition: border-color var(--vds-duration-2) var(--vds-ease), box-shadow var(--vds-duration-2) var(--vds-ease), transform var(--vds-duration-2) var(--vds-ease); } .vds-panel--raised { box-shadow: var(--vds-shadow-3); border-color: transparent; } .vds-panel--inset { background-color: var(--vds-surface-sunken); box-shadow: var(--vds-shadow-none); } .vds-panel--flush { padding: 0; overflow: hidden; } .vds-panel--tight { padding: var(--vds-space-4); } .vds-panel--roomy { padding: var(--vds-space-6); } .vds-panel--featured { border-color: var(--vds-accent-border); box-shadow: var(--vds-shadow-3); } /* a panel in a narrow container tightens its own padding. No @media, no mobile file — it is correct wherever it is placed. */ @container vds-panel (max-width: 24rem) { .vds-panel { padding: var(--vds-space-4); } } /* interactive panels only — a static card must not move under the cursor */ :where(a, button).vds-panel:hover, .vds-panel--interactive:hover { border-color: var(--vds-accent-border); box-shadow: var(--vds-shadow-2); transform: translateY(-2px); } :where(a, button).vds-panel:focus-visible, .vds-panel--interactive:focus-visible { outline: var(--vds-focus-width) solid var(--vds-accent-primary); outline-offset: var(--vds-focus-offset); } /* the panel that carries colour. Much lower ink than a pill: this sits BEHIND body copy, and the ink is a wash, not the subject. */ .vds-panel.vds-bloom { --vds-bloom-alpha: 0.20; --vds-bloom-clear: 1; --vds-bloom-clear-width: 82%; --vds-bloom-grain: 0.28; } .vds-panel__flag { position: absolute; top: 0; left: var(--vds-space-5); transform: translateY(-50%); font-family: var(--vds-font-mono); font-size: var(--vds-text-micro); letter-spacing: var(--vds-tracking-caps-sm); text-transform: uppercase; padding: var(--vds-space-1) var(--vds-space-3); border-radius: var(--vds-radius-pill); background: var(--vds-surface-inverse); color: var(--vds-text-inverse); } /* =========================================================================== LATTICE — the grid / structural background --------------------------------------------------------------------------- Two hairlines on a 32px pitch, masked with a gaussian so it has no edge. It is structure, not decoration: a floor for the eye under a hero or a pricing grid. Never a full-page tile. =========================================================================== */ .vds-lattice { position: relative; isolation: isolate; --vds-lattice-pitch: 32px; } .vds-lattice > * { position: relative; z-index: 1; } .vds-lattice::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to bottom, var(--vds-lattice-line) var(--vds-hairline), transparent var(--vds-hairline)), linear-gradient(to right, var(--vds-lattice-line) var(--vds-hairline), transparent var(--vds-hairline)); background-size: var(--vds-lattice-pitch) var(--vds-lattice-pitch); background-position: center center; -webkit-mask-image: radial-gradient(72% 62% at 50% 42%, rgb(var(--vds-rgb-black) / 1) 0%, rgb(var(--vds-rgb-black) / 0.55) 46%, rgb(var(--vds-rgb-black) / 0.16) 74%, transparent 100%); mask-image: radial-gradient(72% 62% at 50% 42%, rgb(var(--vds-rgb-black) / 1) 0%, rgb(var(--vds-rgb-black) / 0.55) 46%, rgb(var(--vds-rgb-black) / 0.16) 74%, transparent 100%); } .vds-lattice--fine { --vds-lattice-pitch: 20px; } .vds-lattice--wide { --vds-lattice-pitch: 56px; } .vds-lattice--top::before { -webkit-mask-image: linear-gradient(to bottom, rgb(var(--vds-rgb-black) / 1) 0%, rgb(var(--vds-rgb-black) / 0.4) 52%, transparent 100%); mask-image: linear-gradient(to bottom, rgb(var(--vds-rgb-black) / 1) 0%, rgb(var(--vds-rgb-black) / 0.4) 52%, transparent 100%); } /* =========================================================================== SECTION HEADER · STAT · BADGE · CHIP · TABLE · FIELD =========================================================================== */ .vds-sec { display: flex; flex-direction: column; gap: var(--vds-space-3); margin-block-end: var(--vds-space-6); } .vds-sec__eyebrow { font-family: var(--vds-font-mono); font-size: var(--vds-text-micro); letter-spacing: var(--vds-tracking-caps-xs); text-transform: uppercase; color: var(--vds-accent-text); margin: 0; display: flex; align-items: center; gap: var(--vds-space-2); } .vds-sec__eyebrow::before { content: ""; inline-size: var(--vds-space-5); block-size: var(--vds-hairline); flex: none; background: var(--vds-accent-border); } .vds-sec__title { font-size: var(--vds-text-h2); line-height: var(--vds-leading-head); letter-spacing: var(--vds-tracking-head); font-weight: var(--vds-weight-bold); margin: 0; text-wrap: balance; } .vds-sec__lede { font-size: var(--vds-text-h4); line-height: var(--vds-leading-body); color: var(--vds-text-secondary); margin: 0; max-width: var(--vds-measure); } .vds-sec--center { align-items: center; text-align: center; } .vds-sec--center .vds-sec__lede { margin-inline: auto; } .vds-stat { display: flex; flex-direction: column; gap: var(--vds-space-1); min-width: 0; } .vds-stat__value { font-family: var(--vds-font-mono-display); font-weight: var(--vds-weight-regular); font-size: var(--vds-text-stat); line-height: var(--vds-leading-tight); letter-spacing: var(--vds-tracking-head); color: var(--vds-text-primary); font-variant-numeric: tabular-nums; } .vds-stat__label { font-family: var(--vds-font-mono); font-size: var(--vds-text-micro); letter-spacing: var(--vds-tracking-caps-sm); text-transform: uppercase; color: var(--vds-text-tertiary); inline-size: fit-content; max-inline-size: 100%; } .vds-stat__delta { font-family: var(--vds-font-mono); font-size: var(--vds-text-micro); letter-spacing: var(--vds-tracking-caps-sm); text-transform: uppercase; } .vds-stat__delta--up { color: var(--vds-status-ok); } .vds-stat__delta--down { color: var(--vds-status-error); } .vds-badge { display: inline-flex; align-items: center; gap: var(--vds-space-1); padding: var(--vds-space-1) var(--vds-space-3); border-radius: var(--vds-radius-pill); border: var(--vds-hairline) solid var(--vds-border); background: var(--vds-surface-sunken); color: var(--vds-text-secondary); font-family: var(--vds-font-mono); font-size: var(--vds-text-micro); letter-spacing: var(--vds-tracking-caps-sm); text-transform: uppercase; line-height: var(--vds-leading-snug); white-space: nowrap; } .vds-badge--accent { background: var(--vds-accent-soft); border-color: var(--vds-accent-border); color: var(--vds-accent-text); } .vds-badge--ok { background: var(--vds-status-ok-bg); border-color: transparent; color: var(--vds-status-ok); } .vds-badge--warn { background: var(--vds-status-warn-bg); border-color: transparent; color: var(--vds-status-warn); } .vds-badge--error { background: var(--vds-status-error-bg); border-color: transparent; color: var(--vds-status-error); } .vds-badge--info { background: var(--vds-status-info-bg); border-color: transparent; color: var(--vds-status-info); } .vds-badge--solid { background: var(--vds-surface-inverse); border-color: transparent; color: var(--vds-text-inverse); } .vds-badge__dot { inline-size: var(--vds-space-2); block-size: var(--vds-space-2); border-radius: var(--vds-radius-circle); background: currentColor; flex: none; } .vds-chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--vds-space-1); min-height: var(--vds-tap-comfortable); padding: var(--vds-space-2) var(--vds-space-4); border-radius: var(--vds-radius-pill); border: var(--vds-hairline) solid var(--vds-border); background: transparent; color: var(--vds-text-secondary); cursor: pointer; font-family: var(--vds-font-mono); font-size: var(--vds-text-micro); letter-spacing: var(--vds-tracking-caps-sm); text-transform: uppercase; line-height: var(--vds-leading-snug); white-space: nowrap; transition: background-color var(--vds-duration-1) linear, border-color var(--vds-duration-1) linear, color var(--vds-duration-1) linear; } .vds-chip:hover { border-color: var(--vds-border-strong); color: var(--vds-text-primary); } .vds-chip:focus-visible { outline: var(--vds-focus-width) solid var(--vds-accent-primary); outline-offset: var(--vds-focus-offset); } .vds-chip[aria-pressed="true"], .vds-chip[aria-selected="true"] { background: var(--vds-surface-inverse); border-color: transparent; color: var(--vds-text-inverse); } .vds-chip:disabled { cursor: not-allowed; color: var(--vds-text-tertiary); border-color: var(--vds-border-subtle); background: var(--vds-surface-well); } /* the wrapper is what stops a wide table from scrolling the whole page */ .vds-table-wrap { inline-size: 100%; max-inline-size: 100%; overflow-x: auto; border: var(--vds-hairline) solid var(--vds-border-subtle); border-radius: var(--vds-radius-md); background: var(--vds-surface); -webkit-overflow-scrolling: touch; } .vds-table { inline-size: 100%; border-collapse: collapse; font-size: var(--vds-text-sm); color: var(--vds-text-primary); } .vds-table caption { text-align: left; padding: var(--vds-space-4) var(--vds-space-4) 0; font-family: var(--vds-font-mono); font-size: var(--vds-text-micro); letter-spacing: var(--vds-tracking-caps-sm); text-transform: uppercase; color: var(--vds-text-tertiary); } .vds-table th { text-align: left; font-weight: var(--vds-weight-regular); font-family: var(--vds-font-mono); font-size: var(--vds-text-micro); letter-spacing: var(--vds-tracking-caps-sm); text-transform: uppercase; color: var(--vds-text-tertiary); padding: var(--vds-space-3) var(--vds-space-4); border-bottom: var(--vds-hairline) solid var(--vds-border); white-space: nowrap; background: var(--vds-surface-sunken); } .vds-table td { padding: var(--vds-space-3) var(--vds-space-4); border-bottom: var(--vds-hairline) solid var(--vds-border-subtle); vertical-align: top; } .vds-table tbody tr:last-child td { border-bottom: 0; } .vds-table--hover tbody tr { transition: background-color var(--vds-duration-1) linear; } .vds-table--hover tbody tr:hover { background: var(--vds-surface-sunken); } .vds-table__num { font-family: var(--vds-font-mono); font-variant-numeric: tabular-nums; } .vds-field { display: flex; flex-direction: column; gap: var(--vds-space-2); min-width: 0; } .vds-field__label { font-family: var(--vds-font-mono); font-size: var(--vds-text-micro); letter-spacing: var(--vds-tracking-caps-sm); text-transform: uppercase; color: var(--vds-text-tertiary); } .vds-field__req { color: var(--vds-status-error); } .vds-input, .vds-select, .vds-textarea { inline-size: 100%; max-inline-size: 100%; min-height: var(--vds-tap-comfortable); font-family: var(--vds-font-sans); font-size: var(--vds-text-body); line-height: var(--vds-leading-snug); color: var(--vds-text-primary); background: var(--vds-surface); border: var(--vds-hairline) solid var(--vds-border); border-radius: var(--vds-radius-sm); padding: var(--vds-space-3) var(--vds-space-4); transition: border-color var(--vds-duration-1) linear, box-shadow var(--vds-duration-1) linear; -webkit-appearance: none; appearance: none; } .vds-textarea { min-height: calc(var(--vds-space-9) + var(--vds-space-2)); resize: vertical; } .vds-select { padding-inline-end: var(--vds-space-8); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 19px) center, calc(100% - 14px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .vds-input::placeholder, .vds-textarea::placeholder { color: var(--vds-text-tertiary); opacity: 1; } .vds-input:hover, .vds-select:hover, .vds-textarea:hover { border-color: var(--vds-border-strong); } .vds-input:focus-visible, .vds-select:focus-visible, .vds-textarea:focus-visible { outline: none; border-color: var(--vds-accent-primary); box-shadow: 0 0 0 3px var(--vds-accent-soft); } .vds-input:disabled, .vds-select:disabled, .vds-textarea:disabled { background: var(--vds-surface-well); color: var(--vds-text-tertiary); cursor: not-allowed; border-color: var(--vds-border-subtle); } .vds-input[aria-invalid="true"], .vds-textarea[aria-invalid="true"], .vds-select[aria-invalid="true"] { border-color: var(--vds-status-error); } .vds-field__hint { font-size: var(--vds-text-xs); color: var(--vds-text-tertiary); } .vds-field__error { font-size: var(--vds-text-xs); color: var(--vds-status-error); display: flex; align-items: center; gap: var(--vds-space-1); } .vds-field__mono { font-family: var(--vds-font-mono); letter-spacing: 0; } /* =========================================================================== NAV + MOBILE DRAWER --------------------------------------------------------------------------- One component, one behaviour, everywhere. See DESIGN-SYSTEM.md: the nav is duplicated with drift across the site (65 distinct structural shapes in a 754-page sample), so styling alone cannot converge it — it must be RENDERED from one place. These are the styles that single renderer targets. THE STUCK-DRAWER FIX IS STRUCTURAL. The reported "hamburger always remains" is a stuck open-state that survives a resize: state lives in a class on an injected node and nothing clears it when the viewport grows. Rather than adding another JS listener that can also fail, the desktop rule below FORCES the drawer closed and the scrim away above the nav breakpoint, whatever the state attribute says. CSS wins, so a stuck attribute cannot produce a stuck overlay. Regression is impossible rather than merely discouraged. This and prefers-reduced-motion are the ONLY viewport @media in the system. The nav is page chrome; it has no container to query. =========================================================================== */ .vds-nav { display: flex; align-items: center; gap: var(--vds-space-1); flex-wrap: wrap; } .vds-nav__item { position: relative; display: inline-flex; align-items: center; gap: var(--vds-space-2); min-height: var(--vds-tap-comfortable); padding: var(--vds-space-2) var(--vds-space-3); border-radius: var(--vds-radius-sm); color: var(--vds-text-secondary); text-decoration: none; font-family: var(--vds-font-sans); font-size: var(--vds-text-sm); font-weight: var(--vds-weight-medium); letter-spacing: var(--vds-tracking-body); background: transparent; border: 0; cursor: pointer; transition: color var(--vds-duration-1) linear, background-color var(--vds-duration-1) linear; } .vds-nav__item:hover { color: var(--vds-text-primary); background: var(--vds-surface-sunken); } .vds-nav__item:focus-visible { outline: var(--vds-focus-width) solid var(--vds-accent-primary); outline-offset: var(--vds-focus-offset); } .vds-nav__item[aria-current="page"] { color: var(--vds-text-primary); background: var(--vds-surface-sunken); } .vds-nav__item[aria-current="page"]::after { content: ""; position: absolute; inset-inline: var(--vds-space-3); inset-block-end: var(--vds-space-1); block-size: 2px; border-radius: var(--vds-radius-xs); background: var(--vds-accent-primary); } .vds-nav--tabs { gap: 0; border-bottom: var(--vds-hairline) solid var(--vds-border-subtle); overflow-x: auto; flex-wrap: nowrap; } .vds-nav--tabs .vds-nav__item { border-radius: 0; padding: var(--vds-space-3) var(--vds-space-4); font-family: var(--vds-font-mono); font-size: var(--vds-text-micro); font-weight: var(--vds-weight-regular); letter-spacing: var(--vds-tracking-caps-sm); text-transform: uppercase; white-space: nowrap; } .vds-nav--tabs .vds-nav__item:hover { background: transparent; } .vds-nav--tabs .vds-nav__item::after { display: none; } .vds-nav--tabs .vds-nav__item[aria-selected="true"], .vds-nav--tabs .vds-nav__item[aria-current="page"] { background: transparent; color: var(--vds-text-primary); box-shadow: inset 0 -2px 0 var(--vds-accent-primary); } /* --- the bar ------------------------------------------------------------ */ .vds-topnav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--vds-space-4); min-height: calc(var(--vds-tap-comfortable) + var(--vds-space-4)); padding-inline: var(--vds-space-gutter); background: color-mix(in oklab, var(--vds-surface) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: var(--vds-hairline) solid var(--vds-border-subtle); } .vds-topnav__brand { display: inline-flex; align-items: center; gap: var(--vds-space-2); font-family: var(--vds-font-mono); font-size: var(--vds-text-xs); letter-spacing: var(--vds-tracking-caps); text-transform: uppercase; color: var(--vds-text-primary); text-decoration: none; flex: none; } .vds-topnav__spacer { flex: 1 1 auto; min-width: 0; } .vds-topnav__desktop { display: none; } .vds-topnav__actions { display: flex; align-items: center; gap: var(--vds-space-2); } /* --- the hamburger ------------------------------------------------------ */ .vds-burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; inline-size: var(--vds-tap-comfortable); block-size: var(--vds-tap-comfortable); flex: none; padding: 0; border: var(--vds-hairline) solid var(--vds-border); border-radius: var(--vds-radius-sm); background: transparent; color: var(--vds-text-primary); cursor: pointer; } .vds-burger__bar { display: block; inline-size: 16px; block-size: 1.5px; border-radius: var(--vds-radius-xs); background: currentColor; transition: transform var(--vds-duration-2) var(--vds-ease), opacity var(--vds-duration-1) linear; } .vds-burger:focus-visible { outline: var(--vds-focus-width) solid var(--vds-accent-primary); outline-offset: var(--vds-focus-offset); } [data-vds-nav="open"] .vds-burger__bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } [data-vds-nav="open"] .vds-burger__bar:nth-child(2) { opacity: 0; } [data-vds-nav="open"] .vds-burger__bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } /* --- the drawer --------------------------------------------------------- `visibility: hidden` while closed is REQUIRED, not a content-hiding hack: without it the off-screen links stay in the tab order and are announced by a screen reader while invisible. It is paired with `inert` on the element in the renderer. Content is never display:none. */ .vds-drawer { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60; inline-size: min(20rem, 86vw); max-inline-size: 100%; display: flex; flex-direction: column; gap: var(--vds-space-4); padding: var(--vds-space-5) var(--vds-space-4); background: var(--vds-surface); border-inline-end: var(--vds-hairline) solid var(--vds-border-subtle); box-shadow: var(--vds-shadow-3); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); visibility: hidden; transition: transform var(--vds-duration-3) var(--vds-ease), visibility 0s linear var(--vds-duration-3); } .vds-drawer__scrim { position: fixed; inset: 0; z-index: 55; background: rgb(var(--vds-rgb-black) / 0.45); opacity: 0; visibility: hidden; transition: opacity var(--vds-duration-3) var(--vds-ease), visibility 0s linear var(--vds-duration-3); } [data-vds-nav="open"] .vds-drawer { transform: translateX(0); visibility: visible; transition: transform var(--vds-duration-3) var(--vds-ease-out), visibility 0s; } [data-vds-nav="open"] .vds-drawer__scrim { opacity: 1; visibility: visible; transition: opacity var(--vds-duration-3) var(--vds-ease-out), visibility 0s; } .vds-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--vds-space-3); } .vds-drawer__nav { display: flex; flex-direction: column; gap: var(--vds-space-1); } .vds-drawer__nav .vds-nav__item { inline-size: 100%; } /* THE STRUCTURAL FIX. Above the nav breakpoint the drawer and scrim are forced away and the desktop nav is forced on, whatever [data-vds-nav] says. A stuck attribute therefore cannot produce a stuck overlay. */ @media (min-width: 60rem) { .vds-topnav__desktop { display: flex; align-items: center; gap: var(--vds-space-1); } .vds-burger { display: none; } .vds-drawer, [data-vds-nav="open"] .vds-drawer { transform: translateX(-100%); visibility: hidden; transition: none; } .vds-drawer__scrim, [data-vds-nav="open"] .vds-drawer__scrim { opacity: 0; visibility: hidden; transition: none; } } } /* ----------------------------------------------------------------------- UNLAYERED OVERRIDE — restores .vds-pill's own padding on