/* Site Kit — the ONE stylesheet (the loader appends the generated piece * rules — tonalities, themes, entrances — to this sheet; see * src/site-kit/lib/pieces.ts). * * SELF-CONTAINMENT (SITE-KIT.md): this kit depends on NOTHING * outside src/site-kit/ — the design system is the --kit-* tokens at the * top of the root block, and nowhere else. A workspace brand.css injected * into a served page is deliberately INERT here: nothing in this sheet reads * its variables, and the typography is scoped to outrank its bare * [data-text-style] rules. * * THE INK INDIRECTION (the tone axis): kit CSS never reads a --kit-* token * at a use site — it reads the --sk-* ink vars defined on [data-sk]. The * `data-tone` axis (default | surface | inverted | accent) REMAPS that whole * set on the carrying element, and the readable pairings are designed into * the token set, so every tone stays legible. * * Every kit class is sk-prefixed and every selector is anchored to one (or a * kit data attribute), so this sheet can never restyle hand-authored markup * around it. */ /* ── Kit roots ─────────────────────────────────────────────────────────── */ [data-sk] { font-family: var(--kit-font-sans); box-sizing: border-box; /* The kit's glyph rendering posture — antialiased, like every editorial * canvas this kit targets; without it macOS subpixel rendering reads a * full weight step heavier than the design. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* THE CASA TOKENS — the kit's own design system. Palette: six roles — * background, surface, foreground, muted, accent, divider (DERIVED from * muted by default, so a theme overrides it only to tune hairlines). * Type: three faces (sans, display, mono — every theme re-voices BOTH * sans and display). Scale: six spacing steps plus shape (radius, * card-radius, media-radius) and the border axis's width. ONLY this block and the tone * remaps below read these; * everything else reads the --sk-* indirections, and a THEME * (pieces/themes/, stamped data-theme) re-declares exactly these tokens. */ --kit-background: #fdfdfc; --kit-surface: #f4f2ee; --kit-foreground: #1c1a17; --kit-muted: #6e6a62; --kit-accent: #9a5b34; /* The DANGER role — the one "something is wrong" color (a field's error * state, base.css's form vocabulary). A palette role like accent, so a * theme re-voices it; never used for emphasis or decoration. */ --kit-danger: #c4453c; --kit-divider: color-mix(in srgb, var(--kit-muted) 30%, transparent); --kit-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --kit-font-display: var(--kit-font-sans); --kit-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* THE OVERLAY WHITES — the fixed near-white ink set for copy on a dark * photographic base (the on-media contract's remap, the header's float * ink). CONSTANTS, deliberately not theme roles: they sit on the fixed * dark veil, never the board's palette — tokens only so the two * consumers can't drift (they already had, before this home). Sections * with a DOCUMENTED deviation (the gallery's spine, the quote's softer * muted) keep their own literals beside a note. */ --sk-overlay-ink: rgba(255, 255, 255, 0.97); --sk-overlay-ink-muted: rgba(255, 255, 255, 0.85); --sk-overlay-stroke: rgba(255, 255, 255, 0.32); --kit-space-1: 0.35rem; --kit-space-2: 0.65rem; --kit-space-3: 1rem; --kit-space-4: 1.5rem; --kit-space-5: 3rem; --kit-space-6: 4.5rem; /* ── THE BREAKPOINT SCALE — the kit's ONLY sanctioned widths ──────────── * Five rungs, and every responsive rule in the kit picks one. Which rung a * section chooses is its own decision (a two-column band and a six-up grid * have no business collapsing at the same width); WHICH WIDTHS EXIST is not, * because per-section magic numbers are how a design system stops being one. * The census that prompted this found 900 beside 960, and 640 beside 719 and * 559 — three pairs meaning the same thing, none of them agreeing, and no way * to reason about the set. * * `md` is load-bearing beyond its number: Forma's preview pane is ~850px * on a laptop with the rail and chat open, so anything that collapses ABOVE * this rung shows every author a mobile layout while they work. * * These are DECLARED here and written as literals in `@media` conditions, * because a media query can't read a custom property — the var is the record * and the documentation, and `site-kit.test.ts` rejects any breakpoint in kit * CSS that isn't one of these. That test is what makes the scale real. */ --kit-bp-xl: 1440px; --kit-bp-lg: 1200px; --kit-bp-md: 900px; --kit-bp-sm: 640px; --kit-bp-xs: 560px; --kit-radius: 6px; --kit-card-radius: 0px; /* Media corner (photos, video, tiles): shape-posture role; unthemed fallback. */ --kit-media-radius: 0px; --kit-border-width: 1px; /* THE SIZING SYSTEM — BODY IS 1; every element is a ×-body multiplier of * --kit-type-base (authoritative: SITE-KIT-PRINCIPLES.md §3). The * heading family derives from the ONE title dial on FIBONACCI powers * (r = title^⅕; h4 = ×r, h3 = ×r², h2 = ×r³, h1 = ×r⁵, display = ×r⁸ * — 1, 2, 3, 5, 8). GAPS phrase the lockup's beat — one dial per * ADJACENCY (badge→eyebrow, eyebrow→title, title→body, body→actions; * 1 = the plain beat). VOICE dials: per-element WEIGHT and TRACKING (the heading * family rides weight-title/track-title through structural offsets: * weight display +50 / h2 −10 / h3 −20 / h4 −30; track × 1.5/1/0.5 for * display/h1/h2 — every offset × the RAMP-CONTRAST dial below, so a theme * can flatten the family to ONE voice) plus caps-button, a text-transform * keyword for the button/link register. Overlay FRAME dials: air-frame is the inset * between an overlay lockup's copy and the * frame's edges, ×-body like every spacing dial (SITE-KIT-PRINCIPLES.md: * ratios, not px) — the resting end of the --sk-lockup-pad axis family, * so per-side section overrides still win — and size-stage is the * overlay STAGE's height (raw px — band GEOMETRY, a listed exception; * SITE-KIT.md "Flagged"): a MIN-HEIGHT guarantee, not padding, so the * anchors stay exactly air-frame from their edges (a pad floor would * push an anchored box toward center). Mobile compression, the beat * magnitude, and the band breathing are structure, derived below, never * knobs. */ --kit-type-base: 1.05rem; --kit-size-badge: 0.75; --kit-size-eyebrow: 0.75; /* The DETAIL level — the kit's quiet second label voice (row metas, the * read link, catalog numbers, captions, field labels): one step under * the eyebrow, with its own weight and tracking so a theme can soften * row furniture without touching the section eyebrows. Defaults MATCH * the eyebrow dials (one voice until a theme splits them) — as literal * numbers, not var() refs: a dial IS a bare number (the rack's discovery * contract; a reference would hide the knob). */ --kit-size-detail: 0.75; --kit-weight-detail: 500; --kit-track-detail: 0.14; --kit-size-title: 3.44; --kit-size-button: 0.9; --kit-gap-badge: 1; --kit-gap-eyebrow: 0.5; --kit-gap-title: 1; --kit-gap-actions: 1.5; --kit-air-frame: 2.86; /* The EDITORIAL ROW AIR — the block breathing of a ruled list row (a * journal entry, a catalog row), ×-body like every air dial. The demo * bar: field-standard's journal breathes 2.5 body-widths a side. */ --kit-air-row: 1.5; /* The DATA ROW AIR — a label/value row (a facts list, a spec table, a * details block) is a DIFFERENT density from an editorial row: the ruled * journal row wants to breathe, a table of numbers wants to be scannable, and * one dial for both meant a look that opened its journal also blew its facts * list to twice the height it needs. Defaults to the editorial dial, so a * theme setting only --kit-air-row behaves exactly as before. */ --kit-air-data-row: var(--kit-air-row); /* The BAND AIR — how much a section breathes above and below its content * (resolved as --sk-band-pad below; the section-head margin rides it at * ×0.66). ×-body like every air dial. */ --kit-air-band: 4.3; /* The ACTIONS AIR — the HORIZONTAL gap between the buttons in an actions * row (×-body, resolved as --sk-actions-gap). The kit's air dials were all * vertical, so a look's breathing opened its bands and rows while its CTA * pair stayed pinned at one fixed space-scale step however airy or dense * the rest was — density had no horizontal dimension at all. The default * reproduces the --kit-space-2 it replaced (0.62 × 1.05rem ≈ 0.65rem). * A naked-LINK row derives ×2.3 from this one dial rather than carrying a * second: links need more air than padded buttons (button chrome is what * makes the tighter gap read as separation), and that RELATIONSHIP is * structure — one knob moves both. */ --kit-air-actions: 0.62; /* The SITEMAP AIR — the footer link columns' breathing (×-body), one * dial per AXIS: -x is the column-to-column gap, -y the gap between * STACKED GROUPS in one column ("Research" over "Safety") and between * wrap rows. Defaults keep the space-4/space-6 proportion they replaced * (1.43/4.29 × the 1.05rem basis = 1.5rem/4.5rem). Within-group pitch * (heading→links, link→link) stays on the space scale — type rhythm, * not group breathing. */ --kit-air-sitemap-x: 4.29; --kit-air-sitemap-y: 1.43; --kit-size-stage: 560; /* The PLATE RATIO — the aspect a STACKED lockup's media band keeps (the * split-t/split-b letterbox plate), a bare width÷height number. In a stack * the media has no band height to fill, so this ratio IS its designed * size — but only the DEFAULT: a photo that declares its own data-aspect * wins through --sk-image-aspect (the image atom's context pattern). */ --kit-aspect-plate: 2.4; --kit-weight-title: 650; --kit-weight-body: 400; --kit-weight-eyebrow: 620; --kit-weight-badge: 600; --kit-weight-button: 600; --kit-track-title: -0.02; --kit-track-body: 0; --kit-track-eyebrow: 0.14; --kit-track-badge: 0.02; --kit-track-button: 0; --kit-caps-button: none; /* THE RAMP CONTRAST — how much the heading FAMILY diverges per step. The * structural offsets (weight display +50 / h2 −10 / h3 −20 / h4 −30; * lead display −0.16 / h2 +0.07 / h3 +0.14 / h4 +0.22; track × 1.5/0.5 * at the ends) all multiply by this dial: 1 = the kit's full * differentiation, 0 = a UNIFORM family — every step at weight-title / * lead-title / track-title exactly (the flat editorial voice * field-standard's source demo uses). A ratio dial like the gaps: sizes * still ladder; only the VOICE spread flattens. */ --kit-ramp-contrast: 1; /* THE FLUID SLOPE — a unitless multiplier on every heading step's vw term * (resolved as --sk-type-slope in the scale below): 1 = the kit's own slope, * >1 reaches the size-title ceiling at a narrower viewport, <1 holds type * smaller for longer. The one knob for "how big are the headlines actually, * at the width people read this on" — the ceiling alone doesn't answer that, * because the slope is what gets there. Floor and ceiling stay the ratio * system's, so a theme can never outgrow its own scale. */ --kit-type-slope: 1; /* THE EFFECT INTENSITY DIALS — signed unitless multipliers (1 = the * catalogs' authored strength; the parsers enforce the composition): * anim durations divide by the magnitude, travel multiplies by the * signed value (negative reverses the entrance direction); tone filter * amounts interpolate from identity, wash alphas multiply; SHAPE corners * and DENSITY air both multiply. Ordinary kit tokens, so a THEME dials * them like any other. Bridged to the kit-neutral --sk-* seam below. */ --kit-anim-intensity: 1; --kit-tone-intensity: 1; /* The SHAPE dial — every corner in a shape piece multiplies by it, so one * token softens or hardens a look's whole corner posture without leaving * the picked shape (0 squares everything off). */ --kit-shape-intensity: 1; /* The BORDER dial — the border piece's width multiplies by it, so one * token thins or thickens a look's whole stroke without leaving the * picked border (functional edges still floor at 1px downstream). */ --kit-border-intensity: 1; /* The DENSITY dial — every air/gap ratio in a density piece multiplies by * it: one token opens or tightens the whole page's breathing while the * picked density keeps the PROPORTIONS between its dials. */ --kit-density-intensity: 1; /* THE TWO HALVES OF A TONALITY, separately dialable. A tonality does two * different jobs with one look: the FILTER treats the photograph (how far * imagery recedes from the page), and the WASH is the legibility floor under * overlay copy (§4 — legibility is carried by the kit, never the photo). * Those are not the same decision. A look that wants BRIGHT, untreated * photography still needs a real scrim wherever type sits on an image, and * one dial forced a choice between washed-out photos and illegible overlays. * Each half defaults to the shared dial, so a theme that sets only * --kit-tone-intensity behaves exactly as before. */ --kit-tone-filter-intensity: var(--kit-tone-intensity); --kit-tone-wash-intensity: var(--kit-tone-intensity); /* The CASCADE BEAT — the gap between one entrance and the next inside a * reveal phrase, in ms as a bare number so it dials. Every stagger the * engine assigns is `slot × this beat`, and the beat divides by the * intensity dial's magnitude — faster entrances tighten the layering * with them. */ --kit-cascade-beat: 90; /* THE CHROME VOICE — the BRAND wordmark and the NAV LINK register (one * chrome vocabulary shared by header and footer links). Same grammar as * every element: ×-body size, CSS weight, bare-em tracking, and a * keyword caps dial. */ --kit-size-brand: 1; --kit-weight-brand: 600; --kit-track-brand: 0.01; /* The wordmark's FACE and CASE. The brand voice had size, weight, and * tracking but no face ref and no caps dial, so every theme's wordmark was * locked to the sans workhorse in sentence case — on a display-face look * that makes the single most brand-carrying piece of type on the site the * one piece that can't wear the brand's own face. A face REF like every * other element voice, defaulting to the sans face so no existing theme * moves. */ --kit-font-brand: var(--kit-font-sans); --kit-caps-brand: none; /* THE CONTROL BOUNDARY — how much of the muted ink a boxed control's resting * border carries, as a PERCENT mixed toward the band it sits on. 100 is the * kit's own strength; lower softens the box toward a hairline. * * WHY A DIAL AND NOT A COLOUR: the shared rule's comment calls this border a * "hairline" but it was written as the full --sk-ink-muted, a mid-tone — the * boxes read heavier than every other line in the kit. The reason NOT to just * point it at --sk-stroke is ACCESSIBILITY: a control boundary needs 3:1 * non-text contrast (WCAG 1.4.11), and a true hairline on a light page is * ~1.3:1. So the softening is bounded and deliberate — mixing toward the * band keeps it correct on every tone (both terms are tone-resolved at the * use site), and a theme going too low is making a legibility choice it can * see named. Around 85 holds ~3.5:1 on a light page. */ --kit-control-stroke-mix: 100; --kit-size-nav: 0.75; --kit-weight-nav: 500; --kit-track-nav: 0.08; --kit-caps-nav: uppercase; /* THE ELEMENT VOICE GRID — one token per (family × element) for the five * elements the Dressing Room edits (badge / eyebrow / title / body / * button). The NAMING CONVENTION is the contract: * --kit-- — per-element editors write EXACTLY these * tokens, which is what lets an element edit save into a theme's vars (a * theme may only re-declare tokens). Families: font (a face REF to one * of the three faces above, so theme face overrides keep flowing), slant, * lead (lead-title is the h1 leading; the heading family follows through * offsets display −0.16 / h2 +0.07 / h3 +0.14 / h4 +0.22), caps, edge + * edge-style * (per-side-capable border-width shorthand and its style; border COLOR * stays the design system's — stroke on the badge, the button pair on * buttons, currentColor elsewhere), round, pad. size / weight / track * live with the dials above. Lengths default "0px", never bare 0 — a * unitless numeric would read as a ratio dial. */ --kit-font-badge: var(--kit-font-sans); --kit-font-eyebrow: var(--kit-font-sans); --kit-font-title: var(--kit-font-display); --kit-font-body: var(--kit-font-sans); --kit-font-button: var(--kit-font-sans); --kit-slant-badge: normal; --kit-slant-eyebrow: normal; --kit-slant-title: normal; --kit-slant-body: normal; --kit-slant-button: normal; --kit-lead-badge: normal; --kit-lead-eyebrow: normal; --kit-lead-title: 1.08; --kit-lead-body: 1.65; --kit-lead-button: 1.2; --kit-caps-badge: none; --kit-caps-eyebrow: uppercase; --kit-caps-title: none; --kit-caps-body: none; --kit-edge-badge: var(--sk-border-width-min); --kit-edge-eyebrow: 0px; --kit-edge-title: 0px; --kit-edge-body: 0px; --kit-edge-button: var(--sk-border-width-min); --kit-edge-style-badge: solid; --kit-edge-style-eyebrow: solid; --kit-edge-style-title: solid; --kit-edge-style-body: solid; --kit-edge-style-button: solid; /* Badge tracks the CONTROL corner, tightened a touch (× 0.65): a badge sits * inside cards/media, so a neat tuck wants a corner slightly under the * surface around it. Control not card, on purpose: `full` still clamps to a * pill (0.65 × 999 is still a pill on a small box), `tailored` keeps a * rounded badge on square cards, `sharp` stays square, and it stays * single-valued so leaf's multi-value card corner can't break the math. */ --kit-round-badge: calc(var(--kit-radius) * 0.65); --kit-round-eyebrow: 0px; --kit-round-title: 0px; --kit-round-body: 0px; /* The ACTION's corner rides the kit radius RAW — no cap. The old * `min(…, 1.2em)` existed to keep a big CARD radius from ballooning * buttons, back when one token served both; `--kit-card-radius` is its own * axis now (see the shape catalog, SITE-KIT.md rule 10), so the guard * protected against a conflation that no longer exists — and it made the * `full` posture IMPOSSIBLE: 1.2em of the button's own type resolves to * ~18px while a full lozenge on this padding needs ~22px, so "fully round" * rendered 4px off `rounded` and read as neither. Raw is also self-limiting * — CSS clamps border-radius to half the box, so 999px IS a perfect pill at * any size and a moderate value stays exactly itself. BOXED controls keep * the cap (--sk-control-radius): a text field must never become a capsule. */ --kit-round-button: var(--kit-radius); --kit-pad-badge: 0.4em 0.95em; --kit-pad-eyebrow: 0px; --kit-pad-title: 0px; --kit-pad-body: 0px; --kit-pad-button: 0.8rem 1.6rem; /* The icon glyph box (× body) — icon rows, the cart glyph. */ --kit-size-icon: 1.05; /* THE CHROME GEOMETRY DIALS — the bar's own shape (raw px for designed * lengths). bar-height is a MIN-HEIGHT (content can never be cramped); * bar-pad-x the side gutters; bar-gap the gap BETWEEN zones; zone-gap * the gap between elements WITHIN a zone; bar-divider the bottom * hairline's width (0 = none). */ --kit-bar-height: 64; --kit-bar-pad-x: 24; /* The bar's VERTICAL padding — its own dial, like the horizontal one. It was * hardcoded to the space scale (--kit-space-2, 0.65rem = 10.4px) while the * side gutters were dialable, so a look could widen the bar but never make it * BREATHE: min-height is a floor, not air, and the moment the bar's content * grew past it (a display-face wordmark) the strip went tight with no way to * open it. The default IS that former hardcoded value, so no existing theme * shifts by a pixel. */ --kit-bar-pad-y: 10.4; --kit-bar-gap: 24; --kit-zone-gap: 16; --kit-bar-divider: 0; /* THE DROPDOWN PANEL DIALS — the nav flyout surface: radius + padding * (raw px) and elevation (a shadow alpha, 0..1 — 0 = flat). The panel * PAINTS from the ink set, so a theme darkens it by tone (data-tone via * --kit-panel-tone; see the nav element rules), not authored colors. */ --kit-panel-radius: 10; --kit-panel-pad: 20; --kit-panel-shadow: 0.14; /* THE PAGE GUTTER — the page-level side inset (raw px: page GEOMETRY, * same designed-length category as the bar dials; SITE-KIT.md * "Flagged"): the ONE distance a content band's internal side gutter * and the data-inset axis pull in from the viewport edges, resolved to * --sk-page-pad-x. Defaults MATCH bar-pad-x — one shared page edge for * chrome and bands until a theme splits them — as a literal number, not * a var() ref: a dial IS a bare number (the rack's discovery contract; * a reference would hide the knob). The PAGE CAP is its sibling fact but * an AXIS, not a dial: a theme picks a page-width piece * (pieces/page-widths/ — SITE-KIT.md rule 10) and the generated theme * sheet emits the LENGTH onto body (--sk-page-max — pieces.ts * themeSheetCss, the canvas rule's posture; body sits outside this token * scope), which the RAIL sites consume per band (the band-gutter home's * doctrine — a content-rail cap, paint keeps the viewport). * --kit-page-max is the pick's hand-tune var (same raw-px geometry * category, no declaration here). */ --kit-page-gutter: 24; /* The INK set — every color a kit element paints, indirected so the tone * axis can remap them wholesale. */ --sk-ink: var(--kit-foreground); --sk-ink-muted: var(--kit-muted); /* THE DERIVED SIZES — the dials resolved into what use sites read; all * structure, no knobs (SITE-KIT.md §3). The heading family * interpolates from the title dial (r = title^⅕); mobile compression is * the same family at ~55% of the step's excess, and the vw slopes here * are the ONE place fluid type is written — shared by the ramp's * font-sizes and the lockup's beat calcs so type and rhythm compress * together. The ×-body element dials sit below the fluid floor and stay * steady. */ --sk-type-r: pow(var(--kit-size-title), 0.2); --sk-type-r-min: calc(1 + (var(--sk-type-r) - 1) * 0.55); --sk-text-badge-size: calc(var(--kit-type-base) * var(--kit-size-badge)); --sk-text-eyebrow-size: calc(var(--kit-type-base) * var(--kit-size-eyebrow)); /* Caption, tags, field labels, row metas — the detail level resolved * (its own dial; defaults ride the eyebrow's). */ --sk-text-detail-size: calc(var(--kit-type-base) * var(--kit-size-detail)); --sk-text-btn-size: calc(var(--kit-type-base) * var(--kit-size-button)); /* The chrome registers resolved — the brand wordmark, the nav-link * second voice (header + footer), and the icon glyph box. */ --sk-text-brand-size: calc(var(--kit-type-base) * var(--kit-size-brand)); --sk-text-nav-size: calc(var(--kit-type-base) * var(--kit-size-nav)); --sk-icon-size: calc(var(--kit-type-base) * var(--kit-size-icon)); /* The chrome geometry resolved. */ --sk-bar-height: calc(var(--kit-bar-height) * 1px); --sk-bar-pad-x: calc(var(--kit-bar-pad-x) * 1px); --sk-bar-pad-y: calc(var(--kit-bar-pad-y) * 1px); --sk-bar-gap: calc(var(--kit-bar-gap) * 1px); --sk-zone-gap: calc(var(--kit-zone-gap) * 1px); /* THE CHROME SCRIM — §4 applied to the BAR: a floating bar carries its own * contrast floor instead of borrowing the hero's. FIXED values, like the * overlay inks they hold up (a theme may retune the tonality wash — that * dial must never be able to make the chrome unreadable), in the quiet * default tonality's own wash ink (ash, pieces/image-tonalities/ash.json). * It fades out over --sk-chrome-scrim-fade past the bar's bottom edge so * there is no visible band edge on the photo. */ --sk-chrome-scrim: linear-gradient(rgba(16, 15, 14, 0.55), rgba(16, 15, 14, 0)); --sk-chrome-scrim-fade: 2rem; /* The page gutter resolved — content-band side gutters and the * data-inset axis read this, never the bar's own dial. */ --sk-page-pad-x: calc(var(--kit-page-gutter) * 1px); --sk-panel-radius: calc(var(--kit-panel-radius) * 1px); --sk-panel-pad: calc(var(--kit-panel-pad) * 1px); /* The panel ELEVATION resolved — the ONE popover/sheet shadow every * panel-posture surface wears (nav flyout, date calendar, menu sheet, the * library's cookie and newsletter cards); the alpha dial is the knob. */ --sk-panel-shadow: 0 18px 40px -12px rgba(0, 0, 0, var(--kit-panel-shadow)); /* The heading ladder rides FIBONACCI powers of r (1, 2, 3, 5, 8): h4 = * ×r (the labeling step — below the fluid floor, steady), h3 = ×r² (the * editorial-row step: a journal title, a tile heading), h2 = ×r³, h1 = * ×r⁵, display = ×r⁸. */ /* THE FLUID SLOPE (--kit-type-slope) — a multiplier on every heading step's * vw term, so a theme can decide how HOT its headlines run between the floor * and the ceiling without touching the ratio system. It matters more than it * looks: the ceiling (--kit-size-title) is only reached once the slope gets * there, so two themes with the same size-title can render very differently * sized headlines at the same viewport. 1 = the kit's own slope; >1 reaches * the ceiling sooner (the display-face editorial posture), <1 holds type * smaller for longer. Only the SLOPES scale — the floor and ceiling stay the * ratio system's, so no theme can outgrow its own scale. */ --sk-type-slope: var(--kit-type-slope, 1); --sk-text-h4-size: calc(var(--kit-type-base) * var(--sk-type-r)); --sk-text-h3-size: clamp( calc(var(--kit-type-base) * pow(var(--sk-type-r-min), 2)), calc(2.25vw * var(--sk-type-slope)), calc(var(--kit-type-base) * pow(var(--sk-type-r), 2)) ); --sk-text-h2-size: clamp( calc(var(--kit-type-base) * pow(var(--sk-type-r-min), 3)), calc(3vw * var(--sk-type-slope)), calc(var(--kit-type-base) * pow(var(--sk-type-r), 3)) ); --sk-text-h1-size: clamp( calc(var(--kit-type-base) * pow(var(--sk-type-r-min), 5)), calc(5vw * var(--sk-type-slope)), calc(var(--kit-type-base) * var(--kit-size-title)) ); --sk-text-display-size: clamp( calc(var(--kit-type-base) * pow(var(--sk-type-r-min), 8)), calc(7.75vw * var(--sk-type-slope)), calc(var(--kit-type-base) * pow(var(--sk-type-r), 8)) ); /* The LEDE volume — the emphasized intro paragraph under a hero * headline: one scale step above body (never a heading step), so the * headline keeps its hierarchy on every theme. Sections read this ONE * knob (font-size: var(--sk-lede-size)) instead of hand-rolling a clamp. */ --sk-lede-size: clamp(var(--kit-type-base), 1.5vw, var(--sk-text-h4-size)); /* The MEASURE — the one readable line-length cap for lockup running copy * (descs and ledes), a ratio dial in ch (--kit-measure) so a theme sets * its own prose column. Prose must never ride the 90%-viewport container * width (100ch+ is unreadable). Sections never re-cap (or un-cap) copy * with their own max-width; they inherit this knob. */ --kit-measure: 46; --sk-measure: calc(var(--kit-measure) * 1ch); /* THE HEADLINE MEASURE — the same idea, one register up, in the SAME * currency: characters. A measure is a count of CHARACTERS per line, and * `ch` resolves against the element's own font-size, so one number holds * at every register and under any theme title dial. A headline takes far * fewer than running copy — the line is a phrase to be taken in at a * glance, not a paragraph to be read along. * * 20 is chosen so a DISPLAY headline spans a normal desktop band (~1445px * at the display step on a 1440 viewport — full width, as a poster should * be) while still catching an ultra-wide screen, where an uncapped * headline would set twenty words to the line and read as a mistake. */ --kit-measure-title: 20; --sk-measure-title: calc(var(--kit-measure-title) * 1ch); /* The RHYTHM factors — the per-adjacency gap dials as multiples of the * lockup's beat. The lockup's calc()s read these, so the phrasing keeps * one owner. */ --sk-rhythm-badge: var(--kit-gap-badge); --sk-rhythm-label: var(--kit-gap-eyebrow); --sk-rhythm-title: var(--kit-gap-title); --sk-rhythm-departure: var(--kit-gap-actions); /* The FRAME INSET — the air-frame dial resolved to a length (×-body: * the overlay inset breathes with the type basis, like the band air). * The innermost fallback of the --sk-lockup-pad axis family, so any * per-side var a section sets still beats it. */ --sk-frame-pad: calc(var(--kit-air-frame) * var(--kit-type-base)); /* The ROW AIR resolved — the ruled container's default block padding * (×-body). Sections stop hand-picking --sk-ruled-pad from the space * scale; the dial owns list breathing kit-wide. */ --sk-ruled-pad: calc(var(--kit-air-row) * var(--kit-type-base)); --sk-data-row-pad: calc(var(--kit-air-data-row) * var(--kit-type-base)); /* The ACTIONS AIR resolved — the one horizontal element gap density moves * (button ↔ button in an actions row; the naked-link row derives ×2.3). */ --sk-actions-gap: calc(var(--kit-air-actions) * var(--kit-type-base)); /* The SITEMAP AIR resolved — the column gap (x) and the * group-stack/wrap-row gap (y). */ --sk-sitemap-gap-x: calc(var(--kit-air-sitemap-x) * var(--kit-type-base)); --sk-sitemap-gap-y: calc(var(--kit-air-sitemap-y) * var(--kit-type-base)); /* The STAGE HEIGHT — the size-stage dial resolved: the overlay lockup's * resting min-height. A plain px length, deliberately NOT vh-capped: a * cap silently eats the dial, and a fixed length keeps a self-sizing * preview frame convergent. Sections override through --sk-lockup-min-h * (a full-bleed hero sets 100svh via the height axis). */ --sk-stage-h: calc(var(--kit-size-stage) * 1px); /* The BAND AIR — the one section-breathing value scaffolding reads * (.sk-section padding-block; the section-head margin at ×0.66). ×-body, * riding the type-base dial, and now riding a THEME DIAL too * (--kit-air-band): how generously a look breathes between bands is a * per-look decision, not a constant. It was hardcoded at 4.3, which made * every theme's vertical rhythm identical however airy or dense its type * was — the one structural value a designer most wants to move. */ --sk-band-pad: calc(var(--kit-type-base) * var(--kit-air-band)); --sk-accent: var(--kit-accent); --sk-bg: var(--kit-background); --sk-surface: var(--kit-surface); /* Card fill — surface on the default tone so cards tint against the page; * tones remap it so cards keep reading as cards on any band. */ --sk-card: var(--kit-surface); /* Form-control fill (inputs, textareas). */ --sk-field: var(--kit-background); /* The DANGER pair — the error banner's fill and its ink. The ink is a * FIXED near-white (§4's overlay-ink rule applied to the danger fill: * the banner must stay readable on every theme's danger red), never a * theme token. */ --sk-danger: var(--kit-danger); --sk-danger-ink: #fffdfc; /* Filled buttons pair the foreground fill with background-color text — * the one readable pairing the token set guarantees. Tones remap the * pair. */ --sk-btn-bg: var(--kit-foreground); --sk-btn-ink: var(--kit-background); color: var(--sk-ink); /* The SHAPE tokens. The stroke reads the divider role (muted ink at low * alpha by default), so hairlines are always quieter than text. */ --sk-stroke: var(--kit-divider); --sk-radius: var(--kit-radius); /* Form-control rounding — the kit radius CAPPED, resolved ONCE for every * boxed control (input, textarea, select, file, the picker button, the * error banner). The em resolves at each use site, so the cap follows the * control's own type size. Unlike the ACTION (which is now raw, so `full` * can be a real lozenge), a boxed field keeps the cap on purpose: a * capsule-shaped text input reads as a pill-shaped BUTTON and stops * announcing that you can type in it. */ --sk-control-radius: min(var(--kit-radius), 1.2em); /* Media corner (shape-posture role). Full-bleed bands zero it at their own * seam (boundary rule: a corner belongs to the bounded surface). */ --sk-media-radius: var(--kit-media-radius); /* The raised card's corners — reads the card-radius posture role. */ --sk-card-radius: var(--kit-card-radius); /* Decorative borders (card edges, hairlines, image frames) ride this raw — * 0 means a genuinely borderless site. FUNCTIONAL borders (buttons, inputs) * floor at 1px via max(): an affordance may thin, never vanish. The width * itself is the BORDER axis (pieces/borders/ — its own theme facet, split * out of shape), consumed through exactly these two tiers. */ --sk-border-width: var(--kit-border-width); --sk-border-width-min: max(var(--kit-border-width), 1px); /* ICON stroke — glyph geometry (the faq +/- marker, the pricing check), * deliberately OFF the border dial: a heavier rule posture must thicken * edges, never fatten drawn glyphs. */ --sk-icon-stroke: 1px; } [data-sk] *, [data-sk] *::before, [data-sk] *::after { box-sizing: inherit; } /* `hidden` WINS, unconditionally. The UA's [hidden] { display: none } is * UA-origin, so ANY author `display` on the same element silently defeats * it — the newsletter overlay's root (display: grid to center its card) * shipped as a full-viewport click shield while "hidden". In this kit the * attribute is a LIFECYCLE statement, never a style: overlay roots rest * hidden until their script mounts them (scripts-off they never exist) and * every entrance rides data-open on an un-hidden root, so nothing here may * out-rank it. !important is the point — no section sheet, at any * specificity, can reintroduce the class of bug. */ [data-sk][hidden], [data-sk] [hidden] { display: none !important; } /* ── The tone axis (data-tone) ──────────────────────────────────── * Stamped by a section's `tone` prop on its root (or by a template on an * inner panel). Each tone remaps the ink set and paints itself, so every * descendant use site follows for free. `default` has no rule. These * selectors sit AFTER the root block on purpose: same specificity, later in * the sheet, so the remap wins on an element carrying both [data-sk] and * [data-tone]. */ [data-tone="surface"] { --sk-bg: var(--kit-surface); --sk-card: var(--kit-background); --sk-field: var(--kit-background); background-color: var(--sk-bg); } /* Inverted: the foreground role as the band, background-role ink on it. */ [data-tone="inverted"] { --sk-bg: var(--kit-foreground); --sk-ink: var(--kit-background); --sk-ink-muted: color-mix(in srgb, var(--kit-background) 62%, transparent); /* Accent lightened toward the background to stay legible on the dark * band. */ --sk-accent: color-mix(in srgb, var(--kit-accent) 55%, var(--kit-background)); --sk-surface: color-mix(in srgb, var(--kit-background) 8%, transparent); --sk-card: color-mix(in srgb, var(--kit-background) 7%, transparent); --sk-field: color-mix(in srgb, var(--kit-background) 8%, transparent); --sk-stroke: color-mix(in srgb, var(--kit-background) 22%, transparent); --sk-btn-bg: var(--kit-background); --sk-btn-ink: var(--kit-foreground); background-color: var(--sk-bg); color: var(--sk-ink); } /* Accent: the loud band (the CTA look). Background-role ink everywhere. */ [data-tone="accent"] { --sk-bg: var(--kit-accent); --sk-ink: var(--kit-background); --sk-ink-muted: color-mix(in srgb, var(--kit-background) 78%, transparent); --sk-accent: var(--kit-background); --sk-surface: color-mix(in srgb, var(--kit-background) 12%, transparent); --sk-card: color-mix(in srgb, var(--kit-background) 10%, transparent); --sk-field: color-mix(in srgb, var(--kit-background) 12%, transparent); --sk-stroke: color-mix(in srgb, var(--kit-background) 30%, transparent); --sk-btn-bg: var(--kit-background); --sk-btn-ink: var(--kit-accent); background-color: var(--sk-bg); color: var(--sk-ink); } /* ── The ANIMATION FRAMEWORK (data-anim) ────────────────────── * The site-wide entrance system — none | rise | fade | zoom — declared by * EVERY section's `anim` prop (chrome included — all kit components * understand the animation system; SITE-KIT-PRINCIPLES.md) and stamped as * data-anim on its root (a stance-global axis: pick ONE framework * site-wide). The SECTION is the reveal unit; chrome DEFAULTS to `none` — * an overridable posture, not a structural inability. * * The ENGINE is the kit's base.js — an IntersectionObserver stamps `sk-in` * on each unit as it enters, as a RE-RUNNABLE idempotent pass (a * MutationObserver re-decorates late fetch-repeater rows; SPACES.md * "Loading rows from a fetched source"). The frameworks are CATALOG * material: each is a piece (pieces/animation-frameworks/.json), and * the machinery generates the ARMED rules into this kit's base.css * (animationFrameworkCss in lib/pieces.ts, appended by the loader) — a new * entrance is a new JSON, never hand-authored CSS here. Every entry composes pace and travel * from --sk-anim-intensity (durations divide by its magnitude, offsets * multiply by the signed value — the parser enforces it). This sheet keeps * only the shared halves: the ease token and the REVEALED rule below. * The tagging vocabulary, all optional beyond the root stamp: * * data-anim="" the section root — the default reveal unit * data-sk-reveal an INNER element that reveals on its own; when * a section carries any, the ROOT DELEGATES its * entrance to them, so entrances never stack * data-sk-reveal-group a container whose CHILDREN become units * (base.js stamps data-sk-reveal on them); their * --sk-reveal-delay is assigned at REVEAL time, * batch-relative — see base.js * data-sk-reveal-scope a container whose inner units are ARMED but * never observed: the section plays them itself * (window.__skReveal, base.js) when its own state * changes. The container stays a normal unit; an * UNCLAIMED scope is played by the engine rather * than left armed. * data-sk-cascade the LAYERED entrance: the unit delegates its * travel to its CHILDREN — the armed rules hide * them, not it; base.js stamps a per-child * --sk-reveal-delay (its batch base + * slot × beat) so one observed unit plays * its parts a beat apart * data-sk-layer "background" | "foreground" — the LAYER a THEME * dresses; a stamped theme's generated rules * (themeCss) re-dress each layer at (0,3,1), * between the framework's inner armed rule and * the revealed rule below * * DEGRADATION IS STRUCTURAL: the armed (hidden) state exists only under * html[data-sk-js] — set by the one inline script in chrome/head.html, so * scripts-off/print/headless render static — AND inside * @media (prefers-reduced-motion: no-preference), so reduced motion never * even arms (late-hydrated rows included). `none` has no rules: it IS the * static rendering, and every framework degrades to it. */ [data-sk] { --sk-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* The intensity bridge — generated catalog rules read the kit-neutral * --sk-* vars; only this block reads the kit dials. */ --sk-anim-intensity: var(--kit-anim-intensity); --sk-tone-intensity: var(--kit-tone-intensity); --sk-shape-intensity: var(--kit-shape-intensity); --sk-border-intensity: var(--kit-border-intensity); --sk-density-intensity: var(--kit-density-intensity); /* The per-half tone dials (see the kit block): a tonality's `filter` step * composes from the first, its `wash` step from the second, so a look can * hold a bright photograph AND a legible overlay. */ --sk-tone-filter-intensity: var(--kit-tone-filter-intensity); --sk-tone-wash-intensity: var(--kit-tone-wash-intensity); /* The cascade beat resolved to a length the engine's stamped delays read * (`calc( * var(--sk-cascade-beat))`): the dial × 1ms ÷ the * intensity's magnitude, so one dial re-paces pace AND phrasing. */ --sk-cascade-beat: calc( var(--kit-cascade-beat) * 1ms / max(abs(var(--sk-anim-intensity, 1)), 0.1) ); } @media (prefers-reduced-motion: no-preference) { /* Revealed. The generated ARMED rules are appended AFTER this sheet, so * this must win by SPECIFICITY, not order: the generator wraps its root * delegation and inner target in :where(), holding every armed rule below * this one. (A group container is authored statically, so a root with one * delegates from FIRST PAINT — no arm-then-unarm flicker.) A CASCADE * unit's `.sk-in` reveals its CHILDREN, each riding its own stamped * --sk-reveal-delay. */ html[data-sk-js] [data-anim].sk-in, html[data-sk-js] [data-anim] [data-sk-reveal].sk-in, html[data-sk-js] [data-anim] [data-sk-cascade].sk-in > * { opacity: 1; transform: none; } } /* ── PAGE TRANSITIONS — the site moves as one document ────────────────── * Cross-document view transitions give every page change a soft lift, and * the CHROME HOLDS STILL — header and footer carry view-transition-names, * so they stay pinned while the content swaps beneath them. Pure CSS: no * script, so scripts-off pages keep the lift, and reduced motion collapses * the swap to an instant (also neutralizing the UA's default crossfade). * The ease literals match --sk-ease-out — a ::view-transition * pseudo-element sits on the document root, outside the [data-sk] token * scope, so the token cannot flow here. */ @view-transition { navigation: auto; } .sk-header { view-transition-name: sk-header; } .sk-footer { view-transition-name: sk-footer; } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation: sk-vt-out 0.26s ease both; } ::view-transition-new(root) { animation: sk-vt-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(*) { animation: none; } } @keyframes sk-vt-out { to { opacity: 0; transform: translateY(-10px); } } @keyframes sk-vt-in { from { opacity: 0; transform: translateY(14px); } } /* ── Section scaffolding — FLOW SPACING ─────────────────── * Flow gets margins, objects get padding, regions get authored — and * PAGE AIR BELONGS TO CONTENT ALONE. A band is one of two kinds, read * off its face stamp (data-sk-face — declared by every band template, * pinned stamp↔markup by the catalog test) and its tone: * * - CONTENT (flat + default tone): copy in the page flow. Paints nothing * — the page wears the theme's canvas (the generated theme sheets * carry a body[data-theme] background rule) — pads nothing, and owes * ONE band-pad of margin ABOVE itself: the page's air, keeping copy * off whatever came before. * - A THING (everything else stamped): a toned or inset flat band — * background/gutter + padding INSIDE the paint, local facts it owns — * a backdrop (quote: pad is band air INSIDE its photo), a figure or * construct (photo, map, gallery / lockup: flush, the media edge IS * the boundary). THINGS CARRY NO PAGE AIR OF THEIR OWN: their padding * inside their paint is their air, so things DOCK — against each * other, against the header, against the footer (surface band meets * quote meets photo meets footer edge-to-edge; page-colored strips * between painted/flush edges read as cracks in the composition, the * class both live audits caught). A thing takes margin in exactly one * case: AFTER CONTENT (or after a frame row, whose trailing pane may * be content) — copy must never butt an edge. * - UNSTAMPED bands (markup the kit never authored): the padded-object * scaffold below and NO margins — the old posture, standalone-safe. * * Air is SINGLE-SIDED (an element owes air ABOVE itself; the page owes * the closing air before the footer, content endings only) so no seam * needs simultaneous facts from both sides beyond the one lookup, and * no wrapper can hide one — the flex-proof restatement of margin * collapsing (the kit's document skeleton is a flex column, where * margins never collapse). This scaffold RETIRED the pairwise seam * machinery — the four-tone collapse matrix, the frame-row pane * restore, the figure rule, the diptych exception, and both row-top * crossing matrices (SITE-KIT.md §1, the 2026-08-10 working notes). * Every remaining conditional is a STAMP LOOKUP; a rule here reading * data-tone beside a sibling combinator means the matrix is growing * back. * * Ranks: content rides :where() to tie the object scaffold at (0,1,0) * and win by source order, below every section sheet and the inset axis * (0,3,0); the after-content rule sits at (0,2,0), where the frame * block's pane-flush rule (also (0,2,0), later) can silence it inside * wrappers. */ .sk-section { padding-block: var(--sk-band-pad); background-color: var(--sk-bg); } .sk-section:where( [data-sk-face="flat"]:not( [data-tone="surface"], [data-tone="inverted"], [data-tone="accent"], [data-inset="page"] ) ) { margin-top: var(--sk-band-pad); background-color: transparent; padding-block: 0; } /* The one lookup: a thing takes page air only after content. A frame ROW * is NOT a content predecessor — followers dock a row exactly as they'd * dock the thing pane ending it (the casa row-bottom audit: the lockup * must touch the quote pane's paint); the copy in a row's content pane * protects ITSELF with its own bottom air (the frame block's pane * padding), because one follower margin cannot serve two panes' different * natures. The after-content margin restates the same value on a content * follower — harmless — so the predecessor arm needs no thing/content * split. */ :where( .sk-section[data-sk-face="flat"]:not( [data-tone="surface"], [data-tone="inverted"], [data-tone="accent"], [data-inset="page"] ) ) + .sk-section[data-sk-face] { margin-top: var(--sk-band-pad); } /* The page's closing air — content endings only; a thing (and a row, * whose content panes carry their own bottom air) docks the footer. */ body > .sk-section:where( [data-sk-face="flat"]:not( [data-tone="surface"], [data-tone="inverted"], [data-tone="accent"], [data-inset="page"] ) ):where(:has(+ .sk-footer)) { margin-bottom: var(--sk-band-pad); } .sk-container { /* Token-driven measure: 100% minus a gutter each side, capped at 90% of * the viewport once there's room (never binding below the 40rem floor, * so phones keep full-width-minus-gutter). Both knobs are custom props, * so a section can restate ONE value (the header widens to hug the * edges) without re-deriving the formula. */ width: 100%; max-width: min( 100% - var(--sk-container-gutter, var(--kit-space-4)) * 2, var(--sk-container-max, max(90%, 40rem)) ); margin-inline: auto; } /* ── The PAGE FRAME — page-level arrangement vocabulary ────────────────── * A PAGE arranges its sections; no section owns the arrangement. The * resting arrangement is the plain stack (bare include lines in body flow * — no wrapper, no cost). When a page wants bands SIDE BY SIDE it wraps * ordinary {.include} lines in a frame ROW; a pane that stacks several * bands wraps them in a frame COLUMN. Each pane hosts a WHOLE section — * its own tone, gutters, posture, AND its own air (flow spacing: the * wrapper is transparent — every pane behaves as if the other weren't * there, deriving its air from the row's predecessor) — and the DATA * STAYS FLAT: * every pane section keeps its own top-level sidecar slice; the wrappers * are pure geometry, carrying no scope, no surface, no copy. A row holds * ONE or TWO panes (the model's deliberate cap — a third squeezes bands * past the width their design survives): equal panes need no attribute * (auto-flow columns split evenly); a weighted pair names its split via * data-ratio. Below the md rung a row rejoins the plain stack in source * order. (This vocabulary REPLACED the splitter composite — a section * hosting sections under nested slot keys; SITE-KIT.md, the 2026-07-31 * page-frame note.) * * ON A CAPPED PAGE (the page-width axis — a theme's pick or a site's own * override) the frame is UNTOUCHED BY CONSTRUCTION: the cap is a * CONTENT-RAIL width (the band-gutter home), so rows and panes keep the * viewport like every painted edge, and each pane band's own rail formula * self-corrects to the gutter (its 100% is the pane's width — the margin * term goes negative and the floor wins). Pane rails stay one gutter, the * seam stays two, the pane rungs keep measuring the pane's real width. * The spec is rendered geometry: tests/e2e/page-cap.e2e.test.ts. */ .sk-frame-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } .sk-frame-row[data-ratio="60/40"] { grid-template-columns: 3fr 2fr; } .sk-frame-row[data-ratio="40/60"] { grid-template-columns: 2fr 3fr; } /* Panes are grid cells: min-width 0 so a pane section's own media can't * blow its column out; the default cell stretch is what makes a shorter * band's paint fill the row beside a taller neighbour (the HEIGHT MATCH * block below passes that stretch into inner-painted bands and column * panes, where the cell stretch alone stops at the box). */ .sk-frame-row > * { min-width: 0; /* Every pane is a NAMED inline-size container — the cell grid's PANE * RUNGS (the fit ladder's @container twin) key on the band's own width, * so a squeezed band drops columns instead of keeping its wide posture * on a wide screen. Named so the query skips the kit's other containers * (.sk-media's size box, the coordinated grid's measuring entries). */ container: sk-pane / inline-size; } /* FLOW SPACING at the frame: THE WRAPPER IS TRANSPARENT TO AIR, both * edges. A row carries no margin of its own — each pane derives its OWN * air exactly as if it stood alone in the stack, so side-by-side bands * behave as if the other weren't there. At the row's TOP: a content pane * breathes its unconditional 1× INSIDE its cell (the margin pushes its * box down; cell stretch keeps a painted neighbour filling to the row's * edges) while a thing pane docks whatever precedes the row — dark quote * touching the lockup above, beside a text pane floating 1× below the * same edge (the casa row-top audit). At the row's BOTTOM, the mirrored * fact with one twist: a follower is ONE element and cannot serve two * panes' different natures, so followers DOCK the row (lockup touching * the quote pane's paint — the casa row-bottom audit) and a content * pane protects its OWN copy with padding-bottom — page-colored air, an * unpainted box, visually identical to margin — granted only while the * row's follower isn't content (a content follower's unconditional * margin already serves both columns; both airs would be 2×). * * The width regimes: * - UNSCOPED first-pane arms — the pane that touches the row's * predecessor at EVERY rung takes the stack's after-content lookup. * - ROW MODE (width > 900px) — the sibling-lookup SUPPRESSOR (a pane * beside is not a pane above; without it a thing pane takes 1× from * the content pane NEXT to it), the every-pane re-grants (all panes * sit on the predecessor's edge), and the content panes' guarded * bottom air. * - STACK MODE (≤ 900px, the rejoin below) — panes meet as plain * siblings under the scaffold's own seams; the wrapper-crossing * boundaries (a row's neighbours can't see its inner panes) take the * CONSERVATIVE 1× — protecting copy wins when the fact is unknowable * from outside. * Inside a COLUMN members are plain siblings — the scaffold rules apply * verbatim; the column authors no air. */ :where( .sk-section[data-sk-face="flat"]:not( [data-tone="surface"], [data-tone="inverted"], [data-tone="accent"], [data-inset="page"] ) ) + .sk-frame-row > .sk-section[data-sk-face]:where(:first-child), :where( .sk-section[data-sk-face="flat"]:not( [data-tone="surface"], [data-tone="inverted"], [data-tone="accent"], [data-inset="page"] ) ) + .sk-frame-row > :where(.sk-frame-col:first-child) > .sk-section[data-sk-face]:where(:first-child) { margin-top: var(--sk-band-pad); } @media (width > 900px) { /* The sibling-lookup suppressor — (0,3,0), re-granted just below by * the predecessor arms (same rank, later in source). Content panes are * untouched: their 1× is unconditional whatever precedes. */ .sk-frame-row > .sk-section[data-sk-face]:where( :not([data-sk-face="flat"]), [data-tone="surface"], [data-tone="inverted"], [data-tone="accent"], [data-inset="page"] ) { margin-top: 0; } :where( .sk-section[data-sk-face="flat"]:not( [data-tone="surface"], [data-tone="inverted"], [data-tone="accent"], [data-inset="page"] ) ) + .sk-frame-row > .sk-section[data-sk-face], :where( .sk-section[data-sk-face="flat"]:not( [data-tone="surface"], [data-tone="inverted"], [data-tone="accent"], [data-inset="page"] ) ) + .sk-frame-row > :where(.sk-frame-col) > .sk-section[data-sk-face]:where(:first-child) { margin-top: var(--sk-band-pad); } /* A content pane's own bottom air — self-protection at the row's * bottom edge (followers dock the row), granted only while the row's * follower isn't content. Unpainted box: the padding reads as page * air. (0,2,0) beats the scaffold's content padding-block zero at * (0,1,0) by rank. */ .sk-frame-row:where( :not( :has( + .sk-section[data-sk-face="flat"]:not( [data-tone="surface"], [data-tone="inverted"], [data-tone="accent"], [data-inset="page"] ) ) ) ) > .sk-section:where( [data-sk-face="flat"]:not( [data-tone="surface"], [data-tone="inverted"], [data-tone="accent"], [data-inset="page"] ) ), .sk-frame-row:where( :not( :has( + .sk-section[data-sk-face="flat"]:not( [data-tone="surface"], [data-tone="inverted"], [data-tone="accent"], [data-inset="page"] ) ) ) ) > :where(.sk-frame-col) > .sk-section:where( [data-sk-face="flat"]:not( [data-tone="surface"], [data-tone="inverted"], [data-tone="accent"], [data-inset="page"] ):last-child ) { padding-bottom: var(--sk-band-pad); } } /* A column pane — several whole sections sharing one pane, stacked in * plain flex order at natural heights; their seams are ordinary sibling * seams (the scaffold's own rules), so the column authors no air. */ .sk-frame-col { display: flex; flex-direction: column; } .sk-frame-col > * { min-width: 0; } /* HEIGHT MATCH — side-by-side panes always meet the row's full height. * The cell stretch already sizes every pane BOX to the tallest * neighbour; these rules pass the stretch into the two places it * stopped at the box (a shorter pane left a page-colored strip under * its band beside the taller one): * - a band whose PAINT lives on an inner box — a construct's stage * (lockup) or a figure's plate (photo, map, gallery) — kept its * natural height inside the stretched section, so those pane sections * become flex columns and the payload grows (grow-only: the row is * never shorter than the band's own height). Root-painted faces * (toned flats, the quote backdrop) need nothing — the cell stretch * IS their fill. * - a COLUMN pane's members stack at natural heights, opening spare * pane height after the last band — the LAST member grows, and when * it's inner-painted the payload rule passes the stretch on. * Row mode only: in the stack rejoin every band rests at its natural * height. */ @media (width > 900px) { .sk-frame-row :where(.sk-section[data-sk-face="construct"], .sk-section[data-sk-face="figure"]) { display: flex; flex-direction: column; } .sk-frame-row :where(.sk-section[data-sk-face="construct"], .sk-section[data-sk-face="figure"]) > * { flex: 1 0 auto; } .sk-frame-col > :last-child { flex-grow: 1; } } @media (max-width: 900px) { /* md — the row rejoins the plain stack; panes meet as siblings under * the scaffold's own seams. The wrapper-crossing BOUNDARIES — a row's * neighbours can't see its inner panes from outside — take the * conservative 1×: a thing after a row (its last pane may be content), * a row's first thing pane after another row, a second-pane column's * first band after the content pane above it, and the row before the * footer. */ .sk-frame-row { grid-auto-flow: row; grid-template-columns: 1fr; } :where(.sk-frame-row) + .sk-section[data-sk-face], :where(.sk-frame-row) + .sk-frame-row > .sk-section[data-sk-face]:where(:first-child), :where(.sk-frame-row) + .sk-frame-row > :where(.sk-frame-col:first-child) > .sk-section[data-sk-face]:where(:first-child), .sk-section:where( [data-sk-face="flat"]:not( [data-tone="surface"], [data-tone="inverted"], [data-tone="accent"], [data-inset="page"] ) ) + :where(.sk-frame-col) > .sk-section[data-sk-face]:where(:first-child) { margin-top: var(--sk-band-pad); } body > :where(.sk-frame-row:has(+ .sk-footer)) { margin-bottom: var(--sk-band-pad); } } /* ── Typography ──────────────────────────────────────────────────────────────── * The kit OWNS its type ramp. Selectors are deliberately scoped under * [data-sk] (not bare) so an injected workspace brand.css — which emits BARE * [data-text-style] rules at head-end — can never outrank them * (SITE-KIT.md, self-containment). * * SIZES and heading WEIGHTS are never authored here — every step reads the * derived type scale and the weight-* / track-* dials (spaced: a bare * asterisk-slash would END this comment early and the garbage would eat the * next rule), so the whole ramp re-derives from the scale knobs. Only each * register's VOICE (face, leading, tracking) is authored per step. */ /* The DISPLAY register — the ramp's statement step, above heading-1: short * authored statements (2–6 words) at architectural scale. The crushed * leading and tight tracking ARE the register. */ /* The heading family's voice rides the TITLE element tokens: face REF, * slant, and caps apply family-wide; LEADING interpolates from the one * lead-title dial through structural offsets — display −0.16, h2 +0.07, * h3 +0.14, h4 +0.22. Every offset (weight, lead, and the track spread * around ×1) multiplies by the RAMP-CONTRAST dial (--kit-ramp-contrast): * 1 = the kit's full per-step differentiation, 0 = one uniform family voice * (weight-title / lead-title / track-title at every step — the flat * editorial ramp). */ [data-sk] [data-text-style="display"] { font-family: var(--kit-font-title); font-style: var(--kit-slant-title); text-transform: var(--kit-caps-title); font-size: var(--sk-text-display-size); line-height: calc(var(--kit-lead-title) - 0.16 * var(--kit-ramp-contrast)); font-weight: calc(var(--kit-weight-title) + 50 * var(--kit-ramp-contrast)); letter-spacing: calc(var(--kit-track-title) * (1 + 0.5 * var(--kit-ramp-contrast)) * 1em); margin: 0; } [data-sk] [data-text-style="heading-1"] { font-family: var(--kit-font-title); font-style: var(--kit-slant-title); text-transform: var(--kit-caps-title); font-size: var(--sk-text-h1-size); line-height: var(--kit-lead-title); font-weight: var(--kit-weight-title); letter-spacing: calc(var(--kit-track-title) * 1em); margin: 0; } [data-sk] [data-text-style="heading-2"] { font-family: var(--kit-font-title); font-style: var(--kit-slant-title); text-transform: var(--kit-caps-title); font-size: var(--sk-text-h2-size); line-height: calc(var(--kit-lead-title) + 0.07 * var(--kit-ramp-contrast)); font-weight: calc(var(--kit-weight-title) - 10 * var(--kit-ramp-contrast)); letter-spacing: calc(var(--kit-track-title) * (1 - 0.5 * var(--kit-ramp-contrast)) * 1em); margin: 0; } [data-sk] [data-text-style="heading-3"] { font-family: var(--kit-font-title); font-style: var(--kit-slant-title); text-transform: var(--kit-caps-title); font-size: var(--sk-text-h3-size); line-height: calc(var(--kit-lead-title) + 0.14 * var(--kit-ramp-contrast)); font-weight: calc(var(--kit-weight-title) - 20 * var(--kit-ramp-contrast)); letter-spacing: calc(var(--kit-track-title) * (1 - 0.5 * var(--kit-ramp-contrast)) * 1em); margin: 0; } [data-sk] [data-text-style="heading-4"] { font-family: var(--kit-font-title); font-style: var(--kit-slant-title); text-transform: var(--kit-caps-title); font-size: var(--sk-text-h4-size); line-height: calc(var(--kit-lead-title) + 0.22 * var(--kit-ramp-contrast)); font-weight: calc(var(--kit-weight-title) - 30 * var(--kit-ramp-contrast)); letter-spacing: calc(var(--kit-track-title) * (1 - 0.5 * var(--kit-ramp-contrast)) * 1em); margin: 0; } [data-sk] [data-text-style="body"] { font-family: var(--kit-font-body); font-style: var(--kit-slant-body); text-transform: var(--kit-caps-body); font-size: var(--kit-type-base); line-height: var(--kit-lead-body); font-weight: var(--kit-weight-body); letter-spacing: calc(var(--kit-track-body) * 1em); } /* Inline emphasis is a VOICE SWAP, not just a slant: emphasized words step * into the title face, a touch enlarged so the two faces' x-heights meet. * A theme's face pair carries through automatically. */ [data-sk] [data-text-style="body"] em { font-family: var(--kit-font-title); font-size: 1.08em; } [data-sk] [data-text-style="caption"] { font-size: var(--sk-text-detail-size); line-height: 1.5; font-weight: var(--kit-weight-detail); } /* RICH TEXT — the trope a `richtext` prop's fragment renders inside (the * pristine rich-text grammar: p/h1–h3/lists/blockquote/pre/hr + inline * marks, substituted `{…|raw}`). The fragment's tags carry no * data-text-style stamps, so the ramp re-states itself here PER TAG, * token-for-token with the [data-text-style] rules above (heading voice, * ramp-contrast modulation and all) — keep the two in lockstep. Rhythm is * set on the CHILDREN (entry-detail's own prose rule, hoisted): authored * markup carries no classes we control. */ [data-sk] .sk-richtext > * { margin: 0; } [data-sk] .sk-richtext > * + * { margin-top: var(--kit-space-3); } /* A heading opens a new movement — one extra step of air above it. */ [data-sk] .sk-richtext > * + :is(h1, h2, h3) { margin-top: var(--kit-space-4); } [data-sk] .sk-richtext :is(h1, h2, h3) { font-family: var(--kit-font-title); font-style: var(--kit-slant-title); text-transform: var(--kit-caps-title); } [data-sk] .sk-richtext h1 { font-size: var(--sk-text-h1-size); line-height: var(--kit-lead-title); font-weight: var(--kit-weight-title); letter-spacing: calc(var(--kit-track-title) * 1em); } [data-sk] .sk-richtext h2 { font-size: var(--sk-text-h2-size); line-height: calc(var(--kit-lead-title) + 0.07 * var(--kit-ramp-contrast)); font-weight: calc(var(--kit-weight-title) - 10 * var(--kit-ramp-contrast)); letter-spacing: calc(var(--kit-track-title) * (1 - 0.5 * var(--kit-ramp-contrast)) * 1em); } [data-sk] .sk-richtext h3 { font-size: var(--sk-text-h3-size); line-height: calc(var(--kit-lead-title) + 0.14 * var(--kit-ramp-contrast)); font-weight: calc(var(--kit-weight-title) - 20 * var(--kit-ramp-contrast)); letter-spacing: calc(var(--kit-track-title) * (1 - 0.5 * var(--kit-ramp-contrast)) * 1em); } [data-sk] .sk-richtext :is(ul, ol) { padding-inline-start: var(--kit-space-4); } [data-sk] .sk-richtext blockquote { padding-inline-start: var(--kit-space-4); border-inline-start: var(--sk-border-width) solid var(--sk-accent); color: var(--sk-ink-muted); } [data-sk] .sk-richtext hr { border: 0; border-top: var(--sk-border-width) solid var(--sk-stroke); } [data-sk] .sk-richtext :is(pre, code) { font-family: var(--kit-font-mono); font-size: calc(var(--sk-text-detail-size) * 0.88); } [data-sk] .sk-richtext pre { overflow-x: auto; } [data-sk] .sk-richtext img { max-width: 100%; height: auto; border-radius: var(--sk-media-radius); } [data-sk] .sk-richtext a { color: inherit; text-underline-offset: 0.2em; } /* ── Shared vocabulary ──────────────────────────────────────── */ /* Scoped under [data-sk] deliberately: a composed eyebrow also carries * data-text-style="caption", and the caption ramp step matches at (0,2,0) — * the eyebrow's OWN voice must win that tie, which this rule does by source * order. */ [data-sk] .sk-eyebrow { margin: 0 0 var(--kit-space-3); font-family: var(--kit-font-eyebrow); font-style: var(--kit-slant-eyebrow); line-height: var(--kit-lead-eyebrow); text-transform: var(--kit-caps-eyebrow); letter-spacing: calc(var(--kit-track-eyebrow) * 1em); font-size: var(--sk-text-eyebrow-size); font-weight: var(--kit-weight-eyebrow); border-width: var(--kit-edge-eyebrow); border-style: var(--kit-edge-style-eyebrow); border-color: currentcolor; border-radius: var(--kit-round-eyebrow); padding: var(--kit-pad-eyebrow); color: var(--sk-accent); } /* The DETAIL label trope — the kit's quiet SANS label voice: row metas * (a journal dateline), catalog numbers, list furniture. The detail level * in tracked caps and MUTED ink — quieter than the accent eyebrow (which * kicks a section), warmer than the mono micro (which labels technically). * Voice from the detail dials, so a theme softens row furniture without * touching its eyebrows. */ .sk-detail { margin: 0; font-family: var(--kit-font-sans); font-size: var(--sk-text-detail-size); font-weight: var(--kit-weight-detail); letter-spacing: calc(var(--kit-track-detail) * 1em); text-transform: var(--kit-caps-eyebrow); line-height: 1.5; color: var(--sk-ink-muted); } /* Hairline rules as STRUCTURE. Both ride --sk-border-width × --sk-stroke, * so "ruled vs borderless" stays a BOARD decision (border-width 0 silences * every decorative rule site-wide). Decorative by definition: functional * borders (inputs, buttons) stay on --sk-border-width-min and never ride * these. * * .sk-ruled the ruled CONTAINER: every direct child opens with a * top hairline + block padding (tune with * --sk-ruled-pad; 0 when rows pad themselves, e.g. the * FAQ's
). data-cap closes the last row with * a terminal rule. Narrow-viewport behavior belongs * to the section. */ .sk-ruled > * { border-top: var(--sk-border-width) solid var(--sk-stroke); /* Row breathing is the air-row DIAL (resolved in the token block) — a * container tunes it only by re-declaring --sk-ruled-pad (e.g. 0 when * rows pad themselves). */ padding-block: var(--sk-ruled-pad); margin: 0; } .sk-ruled[data-cap] > :last-child { border-bottom: var(--sk-border-width) solid var(--sk-stroke); } /* ── The CELL GRID — the shared count-aware FIT LADDER ───────────────── * ONE grid for every "cells in a band" section (features-grid, product-grid, * team, pricing, stats, process, article-list, menu — and the multicol twin * for testimonials' wall). It used to be hand-copied per sheet, which is how * ladders drift; now the vocabulary lives here and a section contributes * only its stamps and its tuning. * * THE DIAL IS A CEILING, NOT A PROMISE. Four caps meet, the smallest wins: * • the CELL COUNT — `--sk-cell-count`, stamped inline at compose time * from the list length ({rows|count}), so fewer cells than the dial * still span the full row; * • the DIAL — `--sk-columns`, stamped from the section's `columns` prop * (a section without a dial stamps its design cap); * • what actually FITS — `--sk-columns-fit`, the ladder below. Each rung * is a ceiling on the dial, never a floor: a section set to 2 stays 2 * all the way down, and one set to 6 steps 4 → 3 → 2 → 1 as the band * narrows. Rungs are measure-driven — the width where a column gets too * narrow for the type ramp to read — not device names. * • what the PANE allows — `--sk-pane-fit`, the same rungs re-spoken as * @container queries on the page frame's sk-pane container (the pane * rungs, after the media ladder below): inside a frame pane a band * renders at a FRACTION of the viewport, so the media rungs read the * wrong measure. Outside a pane no sk-pane container exists, the * queries never match, and the cap rests on its neutral fallback * (the dial). * * A section TIGHTENS the ladder by re-declaring `--sk-columns-fit` at one * of the sanctioned rungs in its own sheet (a menu's name-to-price row * wants a wider measure than a stat figure); it NEVER hard-sets the track * count inside a media query — that overrides the dial instead of capping * it, so a 2-up * and a 6-up collapse identically (the old shape this replaced; a kit test * rejects it in every sheet). * * .sk-cell-grid tracks from the four caps + the kit cell gap. * .sk-cell-flow the MULTICOL twin (masonry walls): same dial, same * ladder, column-count instead of tracks — no count cap, * because multicol balances short rosters itself. */ .sk-cell-grid { display: grid; --sk-columns-fit: var(--sk-columns, 3); --sk-active-columns: min( var(--sk-cell-count, var(--sk-columns, 3)), var(--sk-columns, 3), var(--sk-columns-fit), var(--sk-pane-fit, var(--sk-columns, 3)) ); grid-template-columns: repeat(var(--sk-active-columns), minmax(0, 1fr)); gap: var(--kit-space-5) var(--kit-space-4); } .sk-cell-flow { --sk-columns-fit: var(--sk-columns, 3); column-count: min( var(--sk-columns, 3), var(--sk-columns-fit), var(--sk-pane-fit, var(--sk-columns, 3)) ); column-gap: var(--kit-space-4); } @media (max-width: 1440px) { .sk-cell-grid, .sk-cell-flow { --sk-columns-fit: 4; } } @media (max-width: 1200px) { .sk-cell-grid, .sk-cell-flow { --sk-columns-fit: 3; } } @media (max-width: 900px) { .sk-cell-grid, .sk-cell-flow { --sk-columns-fit: 2; } .sk-cell-grid { gap: var(--kit-space-4); } } @media (max-width: 560px) { .sk-cell-grid, .sk-cell-flow { --sk-columns-fit: 1; } } /* THE PANE RUNGS — the same ladder keyed on the band's OWN width. Inside a * page-frame pane (the sk-pane container, page frame above) the band is a * fraction of the viewport and the media rungs read the wrong measure — a * squeezed stats strip kept three display-scale figures and the numerals * overlapped. The pane cap moves as a FOURTH value in the min() rather * than re-declaring --sk-columns-fit, so min() settles it: a section's * own (0,2,0) fit tighten can't out-cascade the pane's ceiling. The rung * widths are the media ladder's own — for a full-width single-pane row * both ladders resolve identically. */ @container sk-pane (max-width: 1440px) { .sk-cell-grid, .sk-cell-flow { --sk-pane-fit: 4; } } @container sk-pane (max-width: 1200px) { .sk-cell-grid, .sk-cell-flow { --sk-pane-fit: 3; } } @container sk-pane (max-width: 900px) { .sk-cell-grid, .sk-cell-flow { --sk-pane-fit: 2; } .sk-cell-grid { gap: var(--kit-space-4); } } @container sk-pane (max-width: 560px) { .sk-cell-grid, .sk-cell-flow { --sk-pane-fit: 1; } } /* ── THE BAND GUTTER — one home ────────────────────────────── * Every content band's inner column stands on the page's ONE horizontal * rail (--sk-page-pad-x — the same edge the chrome bars use). Seventeen * sheets hand-copied this single declaration (five with the same "band * owns its inset" comment); now a new section adds its arm HERE. Every * arm is (0,1,0), the sheets' old rank, so a section's own override (the * coverflow marquee's flush lanes at (0,2,0)) still wins from its sheet. * * THE PAGE CAP lives in this padding — the page-width axis is a * CONTENT-RAIL width, never a composition box: a capped page's body * carries only the LENGTH (--sk-page-max, the theme sheet's page rule / * the dress override's), the band's PAINT keeps the viewport, and this * rail grows from the gutter to the centering margin the moment the band * is wider than the cap. The % resolves PER BAND (the max()'s use site), * which is what keeps frame panes safe with no pane machinery: a pane * band's 100% is its own width, the margin term goes negative, and the * gutter floor wins. The 200vw fallback is the beyond-any-viewport * sentinel — an uncapped page rests exactly on the gutter (and full's * override EMITS 200vw to cancel a capped theme). The same formula, on * their own gutter floors: the chrome bars (site-header/site-footer * sheets), the inset axis, and the lockup's no-photo rail below. */ .sk-article-list-inner, .sk-blog-list-inner, .sk-coverflow-inner, .sk-entry-detail-inner, .sk-faq-inner, .sk-features-grid-inner, .sk-form-inner, .sk-gallery-wall-inner, .sk-hours-location-inner, .sk-logo-wall-inner, .sk-menu-inner, .sk-pricing-inner, .sk-product-grid-inner, .sk-quote-inner, .sk-stats-inner, .sk-testimonials-inner, .sk-text-inner { padding-inline: max(var(--sk-page-pad-x), calc((100% - var(--sk-page-max, 200vw)) / 2)); } /* ── THE FLUSH-CONSTRUCT RAIL — the page cap on bleed media ────────── * The constructs whose MEDIA respects the page width (the human's roster: * the accordion gallery, the slideshow — gallery-wall already rides the * band-gutter home above through its inner). Same per-band % as the rail * home, but with a ZERO floor instead of the gutter: at rest these bleed — * below the cap and on uncapped pages the term is negative and the flush * posture stays byte-identical — and on a capped page the whole stage * pulls in to the content rail, the canvas showing in the margins. An * authored data-inset="page" still wins (the axis's (0,3,0) over this * (0,2,0)) — an inset construct reads the full inset rail, gutter floor * included. Photo, map, coverflow, and image-trail stay full-bleed on * purpose: a photo band IS the bleed. */ .sk-section[data-sk="gallery"], .sk-section[data-sk="slideshow"] { padding-inline: max(0px, calc((100% - var(--sk-page-max, 200vw)) / 2)); } /* ── THE CELL LINK — one home ───────────────────────────────────── * A media tile that IS an anchor: block posture, no underline, ambient * ink, and the kit's focus ring. Arms comma-listed verbatim (each keeps * its (0,1,0)/(0,1,1) rank). The ring offset is a seam: coverflow pulls * it INSIDE (-2px — its cells sit flush in a clipped lane, an outside * ring would be cropped); the gallery's own over-ink ring (gallery.css) * is deliberately different and stays local. */ .sk-gallery-wall-cell, .sk-collection-tile, .sk-coverflow-cell { display: block; position: relative; text-decoration: none; color: inherit; } .sk-gallery-wall-cell:focus-visible, .sk-collection-tile:focus-visible, .sk-coverflow-cell:focus-visible, .sk-newsletter-signup-close:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: var(--sk-cell-ring-offset, 2px); } /* ── THE CARD SURFACE — one home ───────────────────────────────── * The `data-card="true"` panel skeleton — wash fill, hairline, card radius, * inset — spelled ONCE (it was hand-copied in eight sheets and had already * drifted: three copies lost their ink). Consumers are comma-listed with * their own sheets' selectors (each arm keeps its own rank — the on-media * contract's pattern); every sheet keeps only its own geometry extras * beside a pointer comment. The inset is the --sk-card-pad seam (default * space-5; testimonials/menu take space-4, the faq zeroes it and pads its * q/a rows instead). Two deliberate non-verbatim arms: * — features-grid's card opt-in carries its :has() content scope (the * chrome is for text+image lockup entries only). * — stats rides `… .sk-stats-list .sk-stats-figure` — one rank UP from * its old spelling, because its sheet's 560px stacked-rung rules tie * the old (0,3,0) and now load AFTER this home; the bump keeps the * card's fill/border/padding beating the rung without leaning on * source order. */ .sk-features-grid[data-card="true"] .sk-feature-entry:has(.sk-lockup-title, .sk-lockup-desc):has( .sk-feature-media .sk-image:not([src=""]) ), .sk-pricing[data-card="true"] .sk-pricing-tier, .sk-stats[data-card="true"] .sk-stats-list .sk-stats-figure, .sk-testimonials[data-card="true"] .sk-testimonial, .sk-menu[data-card="true"] .sk-menu-item, .sk-faq[data-card="true"] .sk-faq-item, .sk-hours-location[data-card="true"] .sk-hours-location-panes, .sk-quote[data-card="true"] .sk-quote-inner { background-color: var(--sk-card); color: var(--sk-ink); border: var(--sk-border-width) solid var(--sk-stroke); border-radius: var(--sk-card-radius); padding: var(--sk-card-pad, var(--kit-space-5)); } /* The announcement pill — a quiet hairline capsule with an accent dot, for * kickers above a headline. Sits where an eyebrow would (first in a lockup * box). */ .sk-badge { display: inline-flex; align-items: center; gap: 0.5em; margin: 0; padding: var(--kit-pad-badge); border-width: var(--kit-edge-badge); border-style: var(--kit-edge-style-badge); border-color: var(--sk-stroke); border-radius: var(--kit-round-badge); font-family: var(--kit-font-badge); font-style: var(--kit-slant-badge); line-height: var(--kit-lead-badge); text-transform: var(--kit-caps-badge); font-size: var(--sk-text-badge-size); font-weight: var(--kit-weight-badge); letter-spacing: calc(var(--kit-track-badge) * 1em); color: var(--sk-ink-muted); } .sk-badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sk-accent); } /* ── The ACTION part ────────────────────────────────────────────────────────────────── * The button registers, a modeled sub-component (SITE-KIT.md * "Sub-components", lint.ts part grammar) — EVERY action affordance is one * of these three, wherever it renders: * * .sk-btn the filled PRIMARY — rides the --sk-btn pair (tones * remap it) * .sk-btn-outline the outline SECONDARY — inherits ink; never stacked with * .sk-btn (one register class per action, lint holds it) * .sk-link the quiet link register (defined with the data-action * remap below — one look, one place) * * data-size="s" is the COMPACT register: structure, not a knob — the inset * derives from the button's own type size (em), so every voice dial keeps * flowing through. Voice and shape read the element grid dials * (--kit-*-button); no section restyles a button in its own CSS. */ .sk-btn, .sk-btn-outline { display: inline-block; padding: var(--kit-pad-button); border-radius: var(--kit-round-button); border-width: var(--kit-edge-button); border-style: var(--kit-edge-style-button); font-family: var(--kit-font-button); font-style: var(--kit-slant-button); font-size: var(--sk-text-btn-size); font-weight: var(--kit-weight-button); letter-spacing: calc(var(--kit-track-button) * 1em); text-transform: var(--kit-caps-button); line-height: var(--kit-lead-button); text-decoration: none; cursor: pointer; transition: opacity 140ms ease, background-color 140ms ease, color 140ms ease, border-color 140ms ease; } /* Hover INVERTS the register: the filled primary empties to its outline * posture, the outline secondary fills to the primary pair. Both swaps ride * the guaranteed token pairs, so every tone and theme keeps a readable * hover for free. */ .sk-btn { background: var(--sk-btn-bg); color: var(--sk-btn-ink); border-color: var(--sk-btn-bg); } .sk-btn:hover { background: transparent; color: var(--sk-ink); border-color: currentColor; } .sk-btn-outline { background: transparent; color: var(--sk-ink); border-color: var(--sk-ink); } .sk-btn-outline:hover { background: var(--sk-btn-bg); color: var(--sk-btn-ink); border-color: var(--sk-btn-bg); } /* THE FOCUS REGISTER — the kit's ONE outline for every borderless * affordance (buttons, links, icons, nav, subscribe, sitemap). Boxed * controls opt out (their border IS the focus paint — see the form * baseline); the native check keeps its own tighter offset. */ .sk-btn:focus-visible, .sk-btn-outline:focus-visible, .sk-link:focus-visible, .sk-icon:focus-visible, .sk-el-nav-link:focus-visible, .sk-el-subscribe-btn:focus-visible, .sk-el-sitemap-link:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; } .sk-btn[data-size="s"], .sk-btn-outline[data-size="s"] { padding: 0.5em 1.2em; } /* A CTA's small trailing glyph ("Contact Sales →") — spaced off the label, * inheriting the register's ink. */ .sk-el-btn-glyph { display: inline-block; margin-left: 0.35em; line-height: 1; } .sk-el-btn-glyph > svg { width: 1em; height: 1em; vertical-align: -0.125em; } /* Form baseline (contact-form and friends build on these) — and the FORM * PART vocabulary (form-parts//, the kit's second element family): * every part composes from these atoms, so a hand-authored form and a * zone-staged one read identically. * * .sk-form-part the family marker every part's root carries * .sk-field one labeled control (label + control + hint + error) * .sk-field-label the label — the quiet DETAIL voice, like row metas * .sk-field-req the required mark beside a label * .sk-field-hint the helper line under a control (muted) * .sk-field-error the ERROR BANNER's animated housing — a grid row * (0fr ↔ 1fr) + opacity that tweens the banner open and * closed as the part's data-invalid state flips (the * pristine DialogField gesture, authored kit-natively) * .sk-field-error-inner the overflow-hidden middle the grid row squeezes * .sk-field-error-banner the banner itself — a danger-filled strip with an * × glyph and the message, ATTACHED under a boxed control * (the control squares its bottom corners, the banner * its top — one shape); free-standing (a choice group) * it keeps its full radius. Painted by the danger pair. * .sk-select(-wrap) the dropdown — input chrome + the kit's own caret * .sk-date-wrap the date control — input chrome + the kit's own * calendar button (.sk-date-btn) and popover panel * (.sk-date-cal, built by base.js job 2c); the UA's * picker indicator hides under html[data-sk-js] * .sk-file the upload control — input chrome, quiet button * .sk-choice-list a fieldset of checkbox/radio rows (.sk-check each) * .sk-check one checkbox/radio row — control + label * .sk-form-note an intro/legend copy block between fields * .sk-form-success the post-submit confirmation — an accent-washed * message row (optional catalog glyph beside or above) * .sk-form-error the submission-failure notice — success's danger twin, * for WHOLE-FORM failures (an unwired action, a backend * error naming no field); field-level rejections keep * the attached .sk-field-error banner * .sk-form-outcome the engine-outcome housing (+ -inner) — base.js seats * engine-built success/error parts here so insertion * tweens open with the field-error gesture * .sk-form-actions the submit row — a filled button + a quiet note */ .sk-field { display: block; margin-bottom: var(--kit-space-3); } /* A form's field container (the `form` band's fields) * lays out on a TWO-COLUMN grid: a field spans the whole row by default, and * ADJACENT stackable fields (data-sk-stack — a name's first/last, a city/state * pair) pack side by side. Adjacency is the sibling selectors' business — a * LONE stackable has no stackable neighbor, so it keeps the full row and never * strands a half-empty one. The grid gap owns the rhythm, so parts drop their * own margin. */ [data-sk-form-fields] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kit-space-4); align-items: end; } [data-sk-form-fields] > .sk-form-part { grid-column: 1 / -1; margin-bottom: 0; } [data-sk-form-fields] > .sk-form-part[data-sk-stack]:has(+ .sk-form-part[data-sk-stack]), [data-sk-form-fields] > .sk-form-part[data-sk-stack] + .sk-form-part[data-sk-stack] { grid-column: auto / span 1; } @media (max-width: 560px) { [data-sk-form-fields] { grid-template-columns: 1fr; } } .sk-field-label { display: block; margin-bottom: var(--kit-space-1); /* The DETAIL register — the same tracked, cased, muted label voice every * other small label in the kit rides (a visit-detail dt, a row meta, a * caption). It was the one label set in bold sentence case, which read as a * heavier, blunter thing than the labels beside it. */ font-size: var(--sk-text-detail-size); font-weight: var(--kit-weight-eyebrow); letter-spacing: calc(var(--kit-track-eyebrow) * 1em); text-transform: var(--kit-caps-eyebrow); color: var(--sk-ink-muted); } .sk-field-req { color: var(--sk-accent); margin-left: 0.25em; } /* The shared BOXED-CONTROL chrome — one rule for the field paint (ink, * fill, hairline, the control radius); each control keeps only its own * padding/appearance below. The transition is the error-state tween: the * danger recolor and corner squaring ride the kit's hover clock so the * banner's grid reveal and the control's docking read as ONE gesture * (border-WIDTH stays instant — focus must never smear). */ .sk-input, .sk-textarea, .sk-select, .sk-file { /* Block, not the default inline: an inline control baseline-aligns in its * line box, which reserves descender space BELOW it — a visible sliver of * page between the control and its attached error banner (worst on * textarea). Block-level kills the line box entirely. */ display: block; width: 100%; font: inherit; color: var(--sk-ink); background: var(--sk-field); border: var(--sk-border-width-min) solid color-mix(in srgb, var(--sk-ink-muted) calc(var(--kit-control-stroke-mix) * 1%), var(--sk-bg)); border-radius: var(--sk-control-radius); transition: border-color 140ms ease, border-radius 150ms ease; } .sk-input, .sk-textarea { padding: 0.7rem 0.9rem; } .sk-input::placeholder, .sk-textarea::placeholder { color: var(--sk-ink-muted); } /* FOCUS on a BOXED control recolors ITS OWN BORDER — never an outline. A * boxed control already wears a border; adding an outline on top draws a * double ring. The border steps to the accent, thickened to 2px INWARD * (the growth comes out of the padding via --sk-focus-grow, so the box * and its text hold perfectly still); the outline is suppressed for * exactly these controls — outline focus remains the rule for everything * borderless (buttons, links, checks). */ :is(.sk-input, .sk-textarea, .sk-select, .sk-file):focus-visible { --sk-focus-grow: calc(max(var(--kit-border-width), 2px) - var(--sk-border-width-min)); outline: none; border-color: var(--sk-accent); border-width: max(var(--kit-border-width), 2px); } :is(.sk-input, .sk-textarea):focus-visible { padding: calc(0.7rem - var(--sk-focus-grow)) calc(0.9rem - var(--sk-focus-grow)); } .sk-select:focus-visible { padding: calc(0.7rem - var(--sk-focus-grow)) calc(2.4rem - var(--sk-focus-grow)) calc(0.7rem - var(--sk-focus-grow)) calc(0.9rem - var(--sk-focus-grow)); } .sk-file:focus-visible { padding: calc(0.55rem - var(--sk-focus-grow)) calc(0.9rem - var(--sk-focus-grow)); } .sk-field-hint { margin: var(--kit-space-1) 0 0; font-size: var(--sk-text-detail-size); color: var(--sk-ink-muted); } /* The SELECT — the input chrome with the kit's own caret (appearance:none * so the UA's arrow never fights the theme). */ .sk-select-wrap { position: relative; display: block; } .sk-select { appearance: none; padding: 0.7rem 2.4rem 0.7rem 0.9rem; } .sk-select-caret { position: absolute; right: 0.9rem; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--sk-ink-muted); } /* The FILE control — input chrome; the picker button rides the detail * voice so it stays quieter than the form's real submit. */ .sk-file { padding: 0.55rem 0.9rem; font-size: var(--sk-text-detail-size); } .sk-file::file-selector-button { margin-right: 0.9em; padding: 0.25em 0.9em; font: inherit; font-size: var(--sk-text-detail-size); color: var(--sk-ink); background: none; border: var(--sk-border-width-min) solid var(--sk-ink-muted); border-radius: var(--sk-control-radius); cursor: pointer; } /* The DATE control — input chrome plus the kit's OWN calendar. The UA's * dropdown calendar is never kit design (the validation-bubble doctrine, * job 2b's sibling): under html[data-sk-js] the native picker indicator * hides (the -webkit- pseudo is the seam WebKit/Blink give; elsewhere the * native icon simply remains) and .sk-date-btn takes its place, opening * the engine-built .sk-date-cal (base.js job 2c) — the nav panel's * popover posture (page fill, hairline, panel radius + shadow) over a * seven-column month grid in the detail voice. Scripts-off the button * never shows and the native picker stays — structural degradation, like * every enhancement. */ .sk-date-wrap { position: relative; display: block; } .sk-date-btn { display: none; } html[data-sk-js] .sk-date-input { padding-right: 2.6rem; } html[data-sk-js] .sk-date-input:focus-visible { padding: calc(0.7rem - var(--sk-focus-grow)) calc(2.6rem - var(--sk-focus-grow)) calc(0.7rem - var(--sk-focus-grow)) calc(0.9rem - var(--sk-focus-grow)); } html[data-sk-js] .sk-date-input::-webkit-calendar-picker-indicator { display: none; } html[data-sk-js] .sk-date-btn { display: flex; align-items: center; justify-content: center; position: absolute; right: 0.45rem; top: 50%; translate: 0 -50%; width: 2em; height: 2em; padding: 0; border: 0; /* The FIELD fill, not transparent: engines with no indicator seam * (Firefox) keep their native icon in this corner — the button sits * over it and must cover, never blend. */ background: var(--sk-field); color: var(--sk-ink-muted); border-radius: var(--sk-control-radius); cursor: pointer; } html[data-sk-js] .sk-date-btn:hover { color: var(--sk-ink); background: var(--sk-surface); } .sk-date-cal { position: absolute; z-index: 40; top: calc(100% + var(--kit-space-1)); right: 0; min-width: 17rem; padding: calc(var(--sk-panel-pad) * 0.75); background: var(--sk-bg); color: var(--sk-ink); border: var(--sk-border-width-min) solid var(--sk-stroke); border-radius: var(--sk-panel-radius); box-shadow: var(--sk-panel-shadow); } .sk-date-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--kit-space-2); margin-bottom: var(--kit-space-2); } .sk-date-cal-label { font-size: var(--sk-text-detail-size); font-weight: 600; } .sk-date-nav { display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; padding: 0; border: 0; background: none; color: var(--sk-ink-muted); border-radius: var(--sk-control-radius); cursor: pointer; } .sk-date-nav:hover { color: var(--sk-ink); background: var(--sk-surface); } .sk-date-btn:focus-visible, .sk-date-nav:focus-visible, .sk-date-day:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 1px; } .sk-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .sk-date-dow { display: flex; align-items: center; justify-content: center; height: 2em; font-size: var(--sk-text-detail-size); font-weight: var(--kit-weight-detail); color: var(--sk-ink-muted); } .sk-date-day { display: flex; align-items: center; justify-content: center; height: 2.2em; padding: 0; border: 0; background: none; font: inherit; font-size: var(--sk-text-detail-size); color: var(--sk-ink); border-radius: var(--sk-control-radius); cursor: pointer; } .sk-date-day:hover { background: var(--sk-surface); } .sk-date-day[data-today="true"] { box-shadow: inset 0 0 0 var(--sk-border-width-min) var(--sk-stroke); } /* Selected-day ink is --sk-btn-ink, not --sk-bg — same doctrine as the * badge chips: the §4 ink remaps move the accent fill but not --sk-bg. */ .sk-date-day[data-selected="true"] { background: var(--sk-accent); color: var(--sk-btn-ink); font-weight: 600; } .sk-date-day:disabled { color: var(--sk-ink-muted); opacity: 0.45; cursor: default; background: none; } /* CHECKBOX / RADIO rows — the native control on the accent, a baseline- * aligned label. A group is a chromeless fieldset (.sk-choice-list) whose * legend rides the field-label voice. The reset zeroes only what the UA * adds (inline margins, fieldset padding, the border) — the group KEEPS * the field rhythm below it (.sk-field's margin-bottom; this rule is * later in source, so it must restate it), and the legend sheds its UA * padding-inline so the group label aligns with every other label. */ .sk-choice-list { margin: 0 0 var(--kit-space-3); padding: 0; border: 0; min-width: 0; } .sk-choice-list > legend { padding: 0; } .sk-choice-list .sk-check + .sk-check { margin-top: var(--kit-space-2); } .sk-check { display: flex; align-items: flex-start; gap: 0.6em; cursor: pointer; } .sk-check-input { flex: none; width: 1.05em; height: 1.05em; margin: 0.2em 0 0; accent-color: var(--sk-accent); } .sk-check-input:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 1px; } /* The ERROR STATE — stamped data-invalid="true" on the part root when its * row carries an `error` message (the data-active idiom: the {.exists} * gate leaves the attribute EMPTY when clean, so only the ="true" form * matches). The control's border turns danger; the banner ATTACHES under * a boxed control (shared corner, one shape — the control squares its * bottom corners, the banner its top); a group's banner stands alone with * its full radius. The message rides the danger pair — fixed near-white * ink on the danger fill, readable on every theme. */ /* The boxed controls' danger recolor — the tween lives with the shared * chrome above. */ .sk-field[data-invalid="true"] :is(.sk-input, .sk-textarea, .sk-select, .sk-file) { border-color: var(--sk-danger); } .sk-field[data-invalid="true"] :is(.sk-input, .sk-textarea, .sk-file):has(+ .sk-field-error), .sk-field[data-invalid="true"] .sk-select-wrap:has(+ .sk-field-error) .sk-select, .sk-field[data-invalid="true"] .sk-date-wrap:has(+ .sk-field-error) .sk-input { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* The HOUSING animates: a grid row (0fr ↔ 1fr) + opacity tween the banner * open and closed without measuring — the pristine DialogField gesture. * The open state rides data-invalid on the part root, so a server-rendered * error paints open from the first frame (transitions never fire on * initial style) while the ENGINE's flips (base.js job 2b) tween both * ways. A cleared banner STAYS MOUNTED, its last message intact, so the * exit never empties mid-collapse. */ .sk-field-error { display: grid; grid-template-rows: 0fr; opacity: 0; margin: 0; transition: grid-template-rows 150ms ease, opacity 150ms ease, margin-top 150ms ease; } .sk-field[data-invalid="true"] .sk-field-error { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 180ms var(--sk-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), opacity 180ms var(--sk-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), margin-top 180ms var(--sk-ease-out, cubic-bezier(0.22, 1, 0.36, 1)); } .sk-field-error-inner { display: block; overflow: hidden; min-height: 0; } .sk-field-error-banner { display: flex; align-items: center; gap: 0.65em; padding: 0.6rem 0.9rem; background: var(--sk-danger); color: var(--sk-danger-ink); border-radius: var(--sk-control-radius); /* The DETAIL voice — an error message is field furniture (the label's * register), never body copy: it must read at a glance without * outshouting the control it annotates. */ font-size: var(--sk-text-detail-size); font-weight: 600; } .sk-field :is(.sk-input, .sk-textarea, .sk-file, .sk-select-wrap, .sk-date-wrap) + .sk-field-error .sk-field-error-banner { border-top-left-radius: 0; border-top-right-radius: 0; } /* A free-standing banner (after a choice row — nothing boxed to attach * to) breathes off the row instead; the margin is part of the open state * (and the transition) so a collapsed banner leaves no phantom gap. */ .sk-field[data-invalid="true"] .sk-check + .sk-field-error { margin-top: var(--kit-space-2); } .sk-field-error-x { flex: none; width: 0.8em; height: 0.8em; } /* The form NOTE — an intro/legend copy block staged between fields. */ .sk-form-note { margin: var(--kit-space-2) 0 var(--kit-space-3); } .sk-form-note-title { margin: 0 0 var(--kit-space-1); } .sk-form-note-body { margin: 0; color: var(--sk-ink-muted); max-width: var(--sk-measure); } /* The SUCCESS message — the styled post-submit confirmation. Borderless by * design (the pristine InlineMessage wash, spoken in kit tokens): the site * accent mixed toward the page fills the whole row — no card stroke. The * glyph rides the icon catalog (data-icon) tinted with an accent-toward-ink * mix, so it reads as a state marker yet stays legible on the wash whatever * hue the theme's accent lands on. data-layout: `beside` seats the glyph * against the TOP of the message — centered on the first text line, never * on the wrapped block (the inline-notice posture); `above` stacks it over * the copy at a larger size, everything left-aligned (the macOS dialog * posture, flush to the kit's reading edge). */ .sk-form-success { --sk-form-success-ink: color-mix(in srgb, var(--sk-accent) 60%, var(--sk-ink)); display: flex; align-items: flex-start; gap: var(--kit-space-2); padding: 0.8rem 1rem; border-radius: var(--sk-control-radius); background: color-mix(in srgb, var(--sk-accent) 12%, var(--sk-bg)); } .sk-form-success-icon { flex: none; color: var(--sk-form-success-ink); /* Centre the glyph on the FIRST text line (half the leading's slack over * the icon box), so a wrapping message keeps it pinned to the top. The * calc speaks EXPLICIT body metrics — the same pair pinned on the text * below — never `1em`: the icon's em is its INHERITED size, while the * message once inherited ambient leading, and the two drifted apart on * any theme whose context wasn't the body voice. */ margin-top: calc((var(--kit-type-base) * var(--kit-lead-body) - var(--sk-icon-size)) / 2); } .sk-form-success-text { margin: 0; max-width: var(--sk-measure); /* The body voice's GEOMETRY, pinned — the icon calc above assumes this * first-line height, so it must be set here, not inherited. */ font-size: var(--kit-type-base); line-height: var(--kit-lead-body); } .sk-form-success[data-layout="above"] { flex-direction: column; gap: var(--kit-space-1); padding: var(--kit-space-3) 1rem; } .sk-form-success[data-layout="above"] .sk-form-success-icon { width: calc(var(--sk-icon-size) * 1.8); height: calc(var(--sk-icon-size) * 1.8); margin-top: 0; } /* The ERROR message — the success row's danger twin: the same borderless * inline-notice wash, spoken in the danger channel (the danger fill mixed * toward the page; the glyph mixed toward ink so it reads as a state * marker on the wash whatever hue the theme's danger lands on). Carries * WHOLE-FORM failures — the engine's submit pass (base.js job 2) builds * one for an unwired action or a backend error that names no field — * while field-level rejections keep the attached .sk-field-error banner. */ .sk-form-error { --sk-form-error-ink: color-mix(in srgb, var(--sk-danger) 60%, var(--sk-ink)); display: flex; align-items: flex-start; gap: var(--kit-space-2); padding: 0.8rem 1rem; border-radius: var(--sk-control-radius); background: color-mix(in srgb, var(--sk-danger) 12%, var(--sk-bg)); } .sk-form-error-icon { flex: none; color: var(--sk-form-error-ink); /* Centre the glyph on the FIRST text line — explicit body metrics, never * `1em`; see .sk-form-success-icon. */ margin-top: calc((var(--kit-type-base) * var(--kit-lead-body) - var(--sk-icon-size)) / 2); } .sk-form-error-text { margin: 0; max-width: var(--sk-measure); /* Pinned body geometry — the icon calc's assumption; see success twin. */ font-size: var(--kit-type-base); line-height: var(--kit-lead-body); } .sk-form-error[data-layout="above"] { flex-direction: column; gap: var(--kit-space-1); padding: var(--kit-space-3) 1rem; } .sk-form-error[data-layout="above"] .sk-form-error-icon { width: calc(var(--sk-icon-size) * 1.8); height: calc(var(--sk-icon-size) * 1.8); margin-top: 0; } /* The engine-outcome HOUSING — base.js (job 2) seats each engine-built * success/error part here so its ARRIVAL animates with the field-error * banner's own gesture: the 0fr↔1fr grid row + opacity + margin tween. * Transitions never fire on initial style, so an inserted row needs * @starting-style to tween open (the nav panel's idiom); an engine * without it SNAPS — exactly the prior posture. The housing also carries * the outcome's air: an engine part lands after the actions row, OUTSIDE * the fields grid, so no grid gap spaces it — the margin opens with the * row rather than jumping in ahead of it. Zone-staged parts ride the * grid's own gap and never wear this housing. */ .sk-form-outcome { display: grid; grid-template-rows: 1fr; opacity: 1; margin-top: var(--kit-space-3); transition: grid-template-rows 180ms var(--sk-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), opacity 180ms var(--sk-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), margin-top 180ms var(--sk-ease-out, cubic-bezier(0.22, 1, 0.36, 1)); } @starting-style { .sk-form-outcome { grid-template-rows: 0fr; opacity: 0; margin-top: 0; } } .sk-form-outcome-inner { overflow: hidden; min-height: 0; } /* The engine's ANNOUNCE-ONLY posture for a form's [role="status"] line: * once an engine-built success part carries the VISIBLE message (base.js * job 2), the live region still needs the text to SPEAK it — but hiding it * (hidden / display:none) silences a live region, so it clips off-screen * instead. */ .sk-announce-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* The SUBMIT row — the filled action plus a quiet trailing note. */ .sk-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kit-space-3); margin-top: var(--kit-space-1); } /* After a fields GRID the actions row rides the grid's own gap: the grid * zeroes its parts' margin-bottom, so the space-1 above (sized for flow * where the last .sk-field still contributes space-3) would crowd the * submit row against the last field while the fields breathe space-4. */ [data-sk-form-fields] + .sk-form-actions { margin-top: var(--kit-space-4); } .sk-form-actions-note { font-size: var(--sk-text-detail-size); color: var(--sk-ink-muted); } /* ── The PENDING vocabulary — what "not yet" looks like, kit-carried ───── * A fetch repeater's skeleton rows ({.exists skeleton} — SPACES.md) paint * .sk-skeleton bars — surface tint, kit radius, a quiet pulse — so a * loading band is designed on every theme. Sections size their own bars; * this atom owns the look and the pulse. The reduced-motion floor at the * bottom of this sheet stills it. */ .sk-skeleton { display: block; background: var(--sk-surface); border-radius: var(--sk-radius); animation: sk-skeleton-pulse 1.4s ease-in-out infinite; } @keyframes sk-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* ── ELEMENT vocabulary (the kit's sub-components) ────────────────────── * The chrome element ATOMS (SITE-HEADER-PLAN.md "sub-components"). Each is * a closed part: ONE markup source at the kit root * (header-footer//.html — lib/load.ts), stable classes here (this * block is the styling contract), voice from the dials, paint from the ink * vars only — so tones and themes restyle every part for free. Sections * render them through typed repeats (`elements` refs); hand-authored * copies are a lint error — one source per element. * * .sk-el-logo the brand wordmark — the brand voice dials * .sk-el-nav a row of quiet links; .sk-el-nav-link is one link (also the * standalone `link` element), the nav-register voice * .sk-icons a row of small icon affordances (.sk-icon children) * .sk-icon one icon button/anchor — inline SVG glyph riding * currentColor; COLOR MUST INHERIT (a UA