/* ========================================================================== COMPONENTS — MVP inventory (docs/ANALYSIS §3) Every rule references theme tokens only (PRINCIPLES §2). One section per component; split into files when this grows painful. ========================================================================== */ /* -------------------------------------------------------------------- Surfaces — background roles for blocks (ANALYSIS §4.1 rule 2) Applied on the block wrapper by the page composition, never nth-child. -------------------------------------------------------------------- */ .surface-base { background: var(--color-surface); color: var(--color-text); } .surface-alt { background: var(--color-surface-alt); color: var(--color-text); } .surface-brand { background: var(--color-primary); color: var(--color-text-on-primary); } .surface-inverse { background: var(--color-surface-inverse); color: var(--color-text-on-inverse); } /* -------------------------------------------------------------------- Eyebrow — the small pill label above a section heading. Cheap to render, disproportionately effective: it tells the reader "a new topic starts here" before they read a word. -------------------------------------------------------------------- */ /* The chrome is tokenised because the eyebrow is pure identity: same markup, same slot above every heading, but whether it arrives as a bordered chip with a dot (drga) or as a bare tracked-out word (ingrade) is a theme's voice, not a structural fact. Defaults are the chip, so themes that say nothing keep it. */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--eyebrow-padding, var(--space-1) var(--space-3)); border: var(--eyebrow-border-width, var(--border-width)) solid var(--color-border); border-radius: var(--radius-full); background: var(--eyebrow-surface, var(--color-surface)); font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--eyebrow-tracking, 0.04em); text-transform: uppercase; color: var(--eyebrow-ink, var(--color-primary-700)); line-height: var(--leading-ui, inherit); } /* The dot is the smallest place a second brand colour can show itself, and it appears above nearly every block — so a two-colour brand reads as two-colour from the first screen. `display`, not size, turns it off: a zero-width dot still occupies a flex slot and keeps its share of the gap, which reads as a typo-sized indent before the word. */ .eyebrow::before { content: ""; display: var(--eyebrow-dot, inline-block); width: 0.4em; height: 0.4em; border-radius: var(--radius-full); background: var(--color-secondary); } /* A lead is muted against the page, which on a coloured slab means a muted brown *on* brown — it measured 1.09, all but invisible, on both CTA bands. There is no muted counterpart to `-on-primary` and inventing one would be a token that passes in some themes and not others, so on these surfaces the lead simply takes the surface's own text colour. Its size already does the work of setting it below the heading. */ .surface-brand .lead, .surface-inverse .lead { color: inherit; } /* Both dark surfaces, and `.surface-inverse` has to be here rather than above. It used to sit at the top of the `.lead` selector list — a comment had been inserted between it and the rest of that list, which is invisible when reading and left the selector attached to the wrong rule. So the inverse eyebrow took `color: inherit` and nothing else, keeping the light `--color-surface` pill from the base rule underneath near-white text: measured 1.12, which is not a contrast failure so much as a blank pill. On `surface-brand`, which was in the right rule, the same component measured 21. *A selector list is one statement. A comment placed inside one does not split it, and the eye reads it as though it does.* */ /* Slotted for the same reason the button grew --btn-brand-*: this override was written for the DEFAULT eyebrow, an outlined chip, and turning that into a currentColor outline on a dark slab is right. A theme whose eyebrow is a filled chip with no border (vitarent) fell through it to a bare word — border gone by the theme's hand, background gone by this rule's. Such a theme states what its chip does on a brand or inverse slab; everyone else keeps the outline. */ .surface-brand .eyebrow, .surface-inverse .eyebrow { background: var(--eyebrow-brand-surface, transparent); border-color: color-mix(in srgb, currentColor 25%, transparent); color: var(--eyebrow-brand-ink, inherit); } .surface-inverse .eyebrow::before, .surface-brand .eyebrow::before { background: currentColor; } /* -------------------------------------------------------------------- Carousel — a row you page through Still the same cards in the same skeleton; the only new thing is that more of them fit than the screen shows. Testimonials are the case it was built for: nobody puts six on a homepage, but a client with six wants all six reachable. A scroll container first, buttons second. Without JS it is a row that scrolls — a touch screen swipes it, a trackpad flicks it, a keyboard tabs through the cards and the browser scrolls to each. The buttons are an affordance for a mouse, which is the one input with no native gesture for horizontal scroll, and they are added by the script rather than sitting in the markup doing nothing. -------------------------------------------------------------------- */ .carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--space-6); overflow-x: auto; /* Spelled out, because it does not stay `visible` on its own: when one axis is a scrolling value, `visible` on the other computes to `auto`. So a row asking only to scroll sideways silently gained a vertical scroll as well, and anything a pixel too tall inside it — an unrevealed card still carrying its 24px offset — became a drag nobody wrote. Nothing legitimately overflows this box vertically, so clipping it costs nothing and stops the next such thing from getting through. */ overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* The page must not start scrolling sideways when the track runs out. */ overscroll-behavior-x: contain; /* The bar would sit under the cards and count as content height, moving the block every time the count changes. The buttons and the snap say the row scrolls; a scrollbar saying it again is noise. */ scrollbar-width: none; /* Cards lift 4px on hover and cast a shadow — an overflow container clips both without this. */ padding-block: var(--space-2); } .carousel__track::-webkit-scrollbar { display: none; } .carousel__track > * { scroll-snap-align: start; } /* Drag to scroll. The cursor is the only thing that announces the row can be pushed, so it is shown to the pointer that needs telling — a thumb and a trackpad already know, and neither has a cursor to show it to. `is-draggable` follows the same measurement that decides whether the buttons exist, so a row with nowhere to go never offers the grip. */ @media (hover: hover) and (pointer: fine) { .carousel.is-draggable .carousel__track { cursor: grab; } } /* Not in the query above: the class is only ever set for a mouse, and a touchscreen laptop with a mouse plugged in would otherwise drag with snap still fighting it. */ .carousel.is-dragging .carousel__track { cursor: grabbing; /* Snap would pull the row to the nearest card under the hand — right at the end of a gesture, wrong during one. Off while dragging, and putting it back is what settles the row where it was let go. */ scroll-snap-type: none; /* Every frame of a 1:1 drag would otherwise start an animation towards somewhere the hand has already moved on from. */ scroll-behavior: auto; user-select: none; } @media (min-width: 48rem) { /* Two per view, exactly filling the row: the block looks identical to the plain pair it replaced whenever there are only two. */ .carousel__track { grid-auto-columns: calc((100% - var(--space-6)) / 2); } } /* Below the row and flush left, where the cards and the heading start. Overlaid on the sides was the other option and it loses: these cards are text, so a button parked at their vertical centre sits on top of a sentence — which is the one thing an image carousel does not have to worry about. */ .carousel__nav { display: flex; gap: var(--space-2); margin-block-start: var(--space-6); /* The controls sit under the row's leading edge by default, where the eye returns after reading. A theme built on a centre line puts them on it instead — the same decision as `--card-align`, and for the same reason: one axis or none. */ justify-content: var(--carousel-nav-align, flex-start); } .carousel__btn { width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); cursor: pointer; transition: border-color var(--motion-duration) var(--ease-out-expo), color var(--motion-duration) var(--ease-out-expo), opacity var(--motion-duration) var(--ease-out-expo); } .carousel__btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); } /* Dimmed rather than hidden at the ends: a control that disappears takes its neighbour's position with it, and the pair would shuffle sideways every time the reader reached an edge. */ .carousel__btn:disabled { opacity: 0.35; cursor: default; } .carousel__btn .icon { width: 1.25rem; height: 1.25rem; } /* -------------------------------------------------------------------- Quote dialog — the whole review, and the ones either side of it The card shows six lines; this is where the rest of them live. A native `` rather than a hand-built overlay: focus trapping, Escape, inertness of the page behind and the backdrop all come with it, and every one of those is a thing this file would otherwise get subtly wrong. It pages, because a reader who opened one review to finish it is the reader most likely to want the next — and having got here they should not have to go back to the row to keep reading. -------------------------------------------------------------------- */ .quote-dialog { width: min(42rem, calc(100vw - var(--space-8))); padding: var(--space-8); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); /* A modal dialog is centred by the browser's own `margin: auto` against an `inset: 0` box. The reset in base.css zeroes every margin, which takes that with it — the dialog opened flush in the top-left corner and looked like a panel that had failed to position rather than a modal. Nothing in this file asked for that, which is what makes it worth stating: a reset can switch off behaviour nobody wrote. Centred across, pinned down the page. Vertical centring looks right until you page: reviews are 290px and 514px tall, so the box re-centred on every step and its top edge moved by up to 112px — the reader's eye is on the first line, and the first line kept walking away. Anchored, only the foot moves, and the words you are reading stay where you left them. */ margin-inline: auto; margin-block: 8svh auto; /* A review with no ceiling on it is the reason this dialog exists, so the long ones have to be able to run past the screen and scroll rather than push their own foot out of reach. */ max-height: min(80svh, 40rem); overflow-y: auto; /* The close button is pinned to this box, so it must be the containing block for it. */ position: fixed; } /* ---- Opening and closing ------------------------------------------ A dialog goes from `display: none` to shown, and a transition has nothing to run from across that — which is why it snapped in and out. Three pieces make it move, and all three are needed: `allow-discrete` lets `display` and `overlay` take part in a transition instead of switching instantly; without it the box would vanish on `close()` before its fade had a frame. `@starting-style` supplies the state to animate *from* on the way in, since the element has no previous computed style to interpolate against. And the fade has to live on `[open]` rather than on a class, so the browser's own open and close drive it and nothing here has to time a removal. Unsupported anywhere it is unsupported: the dialog simply appears, which is exactly what it did before. Nothing is lost, so nothing needs a fallback. */ .quote-dialog, .quote-dialog::backdrop { opacity: 0; transition: opacity var(--motion-duration) var(--ease-out-expo), translate var(--motion-duration) var(--ease-out-expo), overlay var(--motion-duration) allow-discrete, display var(--motion-duration) allow-discrete; } .quote-dialog { /* The same short rise every block on the site arrives with. */ translate: 0 var(--reveal-distance); } .quote-dialog[open], .quote-dialog[open]::backdrop { opacity: 1; } .quote-dialog[open] { translate: none; } @starting-style { .quote-dialog[open], .quote-dialog[open]::backdrop { opacity: 0; } .quote-dialog[open] { translate: 0 var(--reveal-distance); } } .quote-dialog::backdrop { background: color-mix(in srgb, var(--color-surface-inverse) 55%, transparent); } /* Quote and author move together — they are one review, and changing the words while the name sat still would read as two things happening at different times. A reveal, not a slide. The lightbox throws a photograph out sideways because the picture *is* the thing being navigated; here the box stays put and only its contents change, so sending the whole card travelling made the dialog look like it was being dragged around. This is the same short rise and fade every block on the site arrives with — the page's own motion, applied to a swap. */ .quote-dialog__body { transition: translate var(--motion-duration-slow) var(--ease-out-expo), opacity var(--motion-duration) var(--ease-out-expo); } /* Leaving: fades where it stands. Travel on the way out would be the sideways drag again, in miniature. */ .quote-dialog__body.is-leaving { opacity: 0; } /* Arriving: from just below, exactly as `data-reveal="up"` does. */ .quote-dialog__body.is-entering { opacity: 0; translate: 0 var(--reveal-distance); } /* Placed at the start state without animating into it — see the two frames in scripts/testimonials.js. */ .quote-dialog__body.no-anim { transition: none; } .quote-dialog__quote { font-size: var(--text-lg); line-height: var(--leading-normal); /* The reason the dialog exists — never clamped here. */ margin-block-end: var(--space-6); } @media (prefers-reduced-motion: reduce) { .quote-dialog__body { transition: none; } } /* Its own band at the top, not a button floating over the corner. Over the corner it sat on the first lines of a long review — which is the one case this dialog exists for — and it scrolled out of reach with the text the moment the review was long enough to need scrolling. Sticky, so it stays reachable at the bottom of a long one. The dialog scrolls, so the bar carries the surface colour with it or the words pass visibly underneath. Its inline padding matches the dialog's own, and its negative top margin pulls it back up into the dialog's padding so the band costs no height. It carries the paging as well as the close, which is why it is `space-between` rather than `flex-end`. The arrows used to sit in a foot below the review, where their position was a function of how much the reviewer wrote: page from a two-line quote to a ten-line one and the button you just pressed had moved down the screen. Here they are fixed — sticky at the top, in front of the text instead of after it — and pressing "next" five times means pressing the same place five times. */ .quote-dialog__bar { position: sticky; inset-block-start: calc(var(--space-8) * -1); z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-block-start: calc(var(--space-8) * -1); margin-inline: calc(var(--space-8) * -1); padding: var(--space-3) var(--space-3) var(--space-2); background: var(--color-surface); } /* Arrows and counter as one object: the number says what the arrows are doing, so it travels with them rather than sitting across the bar. */ .quote-dialog__paging { display: flex; align-items: center; gap: var(--space-3); } /* `.carousel__nav` is written for a row of cards, where it opens a gap above itself and answers the theme's centre-line token. Neither applies inside a bar that is already positioned. */ .quote-dialog__nav { margin-block-start: 0; justify-content: flex-start; } .quote-dialog__count { font-size: var(--text-sm); color: var(--color-text-muted); } /* -------------------------------------------------------------------- Section header — eyebrow + display heading + lead. The recurring opening of most blocks. -------------------------------------------------------------------- */ /* The gap under a section's heading. It was 48px, which floated the heading away from the thing it introduces — the two read as separate items rather than as a label and its content, which is the whole job of a section header. Now 32px, two steps down. Every value tried was a step already in the scale: 48 → 40 → 32, never a number invented in between. A spacing scale earns its keep by being the only set of numbers in play (PRINCIPLES §5), and "a bit less" is exactly the request that quietly introduces a 44 nobody can account for later. Shared on purpose, and it shows up everywhere a block opens with a heading — services, references, testimonials, blog, FAQ, contact, the listings. The relationship between a heading and its content is one decision, not a per-block preference. One exception exists and it is not this rule's doing: the About block carries an inline `--space-6` on its own instance, so it keeps its tighter 24px and does not follow this. */ .section-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 44rem; margin-block-end: var(--space-8); } .section-header--center { align-items: center; text-align: center; margin-inline: auto; } /* A centred header can open with a rule of light — the thin glowing hairline the reference language hangs above its section titles. Gated on `display`, so themes that never ask for it pay nothing: not even the flex gap, which a zero-height pseudo would still claim. */ .section-header--center::before { content: ""; display: var(--heading-rule-display, none); height: 2px; width: min(11rem, 60%); border-radius: var(--radius-full); background: var(--heading-rule, none); box-shadow: var(--heading-rule-glow, none); } /* Headings can take a gradient, per theme. Two tokens because the effect is two declarations that only work as a pair: the gradient is painted as a background clipped to the glyphs, and the glyphs themselves have to go transparent for it to show. The defaults dismantle both — `none` paints nothing and `currentColor` is the colour the heading already had — so a theme that says nothing gets the page it always had. `.reveal-line > span` is on the list because of how the hero title is built: the glyphs live in the innermost spans, and a background clipped to text on the parent paints nothing for a child's glyphs. Without that selector a gradient theme's hero headline is simply invisible — the parent has the gradient and no text, the spans have the text and transparent ink. Each line restarts the gradient, so keep the sweep mostly horizontal and it reads as intent rather than as a seam. (`currentColor` as the fallback, not `inherit`: CSS-wide keywords are invalid inside `var()`, and for `color` the two do the same job.) */ .display, .section-header h2, .reveal-line > span { background-image: var(--gradient-heading, none); -webkit-background-clip: text; background-clip: text; color: var(--heading-ink, currentColor); } /* A heading whose glyphs live in reveal lines must NOT paint its own gradient, and this is a real bug rather than a tidiness rule: the ancestor's background layer is clipped to the text of everything painted inside it, so it draws a second copy of the same words — and because that layer belongs to the heading, not to the line, the `overflow: hidden` on `.reveal-line` does not clip it. On load the animated copy then slides over a static one that should not exist. `:has(.reveal-line)` rather than a class pairing, because the condition is structural: the glyphs are delegated to the line spans, which paint the gradient themselves. Higher specificity than the rule above, so source order cannot undo it. */ .display:has(.reveal-line), .section-header h2:has(.reveal-line) { background-image: none; } /* The brand slab keeps its own ink. A light-to-dim gradient is drawn for the page's dark or light background, and on the one surface that is neither — the solid brand colour — it lands unreadable. Same shape as the statistics' surface overrides in blocks.css: legibility outranks the effect, using a token every theme has already verified against exactly this surface. */ .surface-brand .display, .surface-brand .section-header h2, .surface-brand .reveal-line > span { background-image: none; color: var(--color-text-on-primary); } .section-header__title { letter-spacing: var(--tracking-tight); } /* -------------------------------------------------------------------- Section — vertical rhythm owned by the block itself (PRINCIPLES §3) -------------------------------------------------------------------- */ .section { padding-block: var(--section-space); } /* A section arrived at by anchor skips most of its own opening rhythm. That rhythm exists to separate the block from the one above it — and when a menu item brings you here, there is no block above it on screen for it to separate from. It was pure empty page: measured at 1440x700, 148px between the bottom of the bar and the heading, a fifth of the screen, and worse the shorter the screen gets. The maths is the point. The browser lands the target at `scroll-padding` plus this margin, and the section's content sits one `--section-space` below that — so pulling back by exactly that rhythm and adding a fixed gap cancels the clamp, and the result no longer depends on how wide the screen is. Measured after: 32px of clearance under the bar on a 1440 desktop, 38px on a 375 phone, where before it was 118px and grew with the viewport. (The two differ by six because the floating pill sits a little lower on a phone than its 64px would suggest. The rule is doing the same thing in both; the bar is not in the same place.) Negative on purpose, and only on sections that are targets — `[id]` is what makes one. It assumes the standard `.section` padding, so a `.section--slim` given an id would need its own value; none has one today, and the selector says which rule to look at when one does. */ .section[id] { scroll-margin-block-start: calc(var(--space-12) - var(--section-space)); } /* A page that opens with a breadcrumb does not need the landing-page overture. `main` already opens the clearance the floating header needs; a full block rhythm on top of that left 131px of nothing above a 12px line of navigation — air that reads as deliberate above a hero and as a hole above a breadcrumb. The bottom stays full: the block below still needs its rhythm. Only the opening of a subpage is different, so only that is changed. */ .section--subpage { padding-block-start: var(--space-16); } /* Panel — an inset, rounded slab instead of a full-bleed stripe. Full-bleed colour bands make a page read like a stack of documents; inset panels make each block read as its own object with the page showing through around it. Use it for blocks that carry a background (alt / brand / inverse); leave base-surface blocks flat so the page still breathes between panels. Inset stays on the 4px grid at both sizes (PRINCIPLES §5). */ .section--panel { /* `--panel-inset` is the whole panel language in one optional token. The default keeps the inset slabs; a theme that sets it to 0 (with `--radius-panel: 0`) turns every panel into a full-bleed band — edge to edge, flush against its neighbours, which is a genuinely different page from the same skeleton. One token because the side inset, the gap where two panels meet and the gap against the footer are one measure: the page showing around a panel. Zero any of them alone and the others read as mistakes. */ margin-inline: var(--panel-inset, var(--space-3)); border-radius: var(--radius-panel); /* Deliberately NOT `overflow: hidden`. Content sits inside .container with padding, so it never reaches the rounded corners and there is nothing to clip — but clipping here would silently amputate any dropdown, tooltip or sticky element a block later contains. */ } @media (min-width: 48rem) { .section--panel { margin-inline: var(--panel-inset, var(--space-6)); } } /* Panels that meet but do not merge must not touch. Two different surfaces flush against each other read as a mistake — and once a panel carries a photo, a hard edge against the next one looks broken. The gap matches the side inset, so the page background reads as one even gutter around every panel rather than a margin on three sides. */ /* The breadcrumb strip is the second thing a panel can meet, and it needs the same answer: the trail is a line of text, so a slab starting flush under it reads as the trail's own background rather than as a block. Corpse chain for the same reason the handover above has one. */ .section--panel + .section--panel, .block-crumbs:not(.pv-off) + .section--panel, .block-crumbs:not(.pv-off) + .pv-off + .section--panel, .block-crumbs:not(.pv-off) + .pv-off + .pv-off + .section--panel, .block-crumbs:not(.pv-off) + .pv-off + .pv-off + .pv-off + .section--panel { margin-block-start: var(--panel-inset, var(--space-3)); } @media (min-width: 48rem) { .section--panel + .section--panel, .block-crumbs:not(.pv-off) + .section--panel, .block-crumbs:not(.pv-off) + .pv-off + .section--panel, .block-crumbs:not(.pv-off) + .pv-off + .pv-off + .section--panel, .block-crumbs:not(.pv-off) + .pv-off + .pv-off + .pv-off + .section--panel { margin-block-start: var(--panel-inset, var(--space-6)); } } /* A panel that ends the page needs its gutter against the footer as much as against another panel. Without it the inset slab runs straight into the footer and the inset reads as a mistake on three sides. Written as "no visible section after me" rather than `:last-child`, so hiding the final block in the preview hands the gutter to whatever now ends the page (same reasoning as the merge rules below). */ main > .section--panel:not(.pv-off):not(:has(~ .section:not(.pv-off))) { margin-block-end: var(--panel-inset, var(--space-3)); } @media (min-width: 48rem) { main > .section--panel:not(.pv-off):not(:has(~ .section:not(.pv-off))) { margin-block-end: var(--panel-inset, var(--space-6)); } } /* Two panels of the same surface stacked together are one slab, not two. Left alone they each round their own corners and the join pinches inward — a seam that looks like a rendering fault. Square only the touching corners; the outer ones stay round. `:not(.pv-off)` keeps this honest in the preview: a hidden neighbour must not square the corners of a panel that now ends the run. In production the class never exists, so the check costs nothing. */ .section--panel.surface-alt:not(.pv-off):has(+ .section--panel.surface-alt:not(.pv-off)), .section--panel.surface-brand:not(.pv-off):has(+ .section--panel.surface-brand:not(.pv-off)), .section--panel.surface-inverse:not(.pv-off):has(+ .section--panel.surface-inverse:not(.pv-off)) { border-end-start-radius: 0; border-end-end-radius: 0; } .section--panel.surface-alt:not(.pv-off) + .section--panel.surface-alt:not(.pv-off), .section--panel.surface-brand:not(.pv-off) + .section--panel.surface-brand:not(.pv-off), .section--panel.surface-inverse:not(.pv-off) + .section--panel.surface-inverse:not(.pv-off) { border-start-start-radius: 0; border-start-end-radius: 0; /* Merging means becoming one slab: close the gap the rule above opens for panels that only meet, and drop the doubled inner padding that would otherwise stack at an invisible join. */ margin-block-start: 0; padding-block-start: 0; } /* Two flat blocks on the same surface stack their rhythms without anything between them to say so. The merge rule above states this for panels; nobody had stated it for blocks that carry no panel, because in the shipped composition a panel always sat between two of them. Turn the panels off — which the client is entitled to do, and which is how this was found — and every gap doubles: 142px of the first block's rhythm against 142px of the second's, measured at 283px of undifferentiated page. **Half, not closed up, and the number is not a new one.** The article's coda hit exactly this and answered it first: `.block-next` in `article.css` trims its top to `--section-space / 2` against the article's full rhythm below, having measured 237px of the same emptiness. Its reasoning generalises word for word — the gap is doing a real job, which is to say one block is over before the next one starts, so it wants trimming rather than deleting. Zeroing it was tried here and gives 142px, the figure two *merged* panels get; but merged panels are one slab with a border around the pair saying so, and two flat blocks have nothing. They are neighbours, not one object. That the two rules agree is what keeps the article page unchanged: both land on the same value there, so the block that already solved this privately now simply matches the system. `.block-next` stays, because on the reference page a panel sits above it and this rule correctly does not fire. `--slim` stays out, in both positions. Its tighter rhythm is the whole of what it is — the partner strip is meant to sit close — and trimming the block after it as well put a heading 32px under a row of logos. The `.pv-off` chain is one question asked four times, once per number of hidden neighbours the preview may have left lying between two blocks. A disabled block is absent from the real page, so `+` is the truth there and the first clause is the only one that can ever match; in the preview the block stays in the DOM under `display: none`, where `+` looks straight at it and concludes the two are not adjacent. Four covers hiding every panel on the longest page we have; past that the gap stays doubled, which is visibly wrong rather than quietly wrong, and that is the right way round for an artefact of the preview. */ .section.surface-base:not(.section--panel, .section--slim, .pv-off) + .section.surface-base:not(.section--panel, .section--slim, .pv-off), .section.surface-base:not(.section--panel, .section--slim, .pv-off) + .pv-off + .section.surface-base:not(.section--panel, .section--slim, .pv-off), .section.surface-base:not(.section--panel, .section--slim, .pv-off) + .pv-off + .pv-off + .section.surface-base:not(.section--panel, .section--slim, .pv-off), .section.surface-base:not(.section--panel, .section--slim, .pv-off) + .pv-off + .pv-off + .pv-off + .section.surface-base:not(.section--panel, .section--slim, .pv-off) { padding-block-start: calc(var(--section-space) / 2); } /* -------------------------------------------------------------------- Button -------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); /* Split like the tag's, and for the same reason: a label centred on its line box is not centred on its letters. The box reserves descent under the baseline whether the words use it or not, so the capitals ride high — 1.5px of it on the large button, which is what a reader actually sees. `--btn-label-shift` moves the WORD without moving the button: what is added on top comes off the bottom. In `em`, so one value serves every size (PRINCIPLES §6 allows optical nudges there). */ padding-block: calc(var(--space-3) + var(--btn-label-shift, 0px)) calc(var(--space-3) - var(--btn-label-shift, 0px)); padding-inline: var(--space-6); border: var(--border-width) solid transparent; /* Buttons get their own radius slot because `--radius-md` is shared with things that cannot go round — the textarea, the testimonial card, code blocks. A pill-button theme sets this to `--radius-full` and everything else keeps its corners. The inputs deliberately do NOT follow: a pill textarea is broken, and a form where only the multiline field has corners looks assembled from two kits — so the whole form stays on `--radius-md` and the pill is the button's own voice. */ border-radius: var(--radius-button, var(--radius-md)); /* Buttons speak in whatever voice the theme assigns the role, not the body font by default. A theme that points `--font-button` at its display face turns every button into a small brand moment; one that leaves it on the body font keeps them plainly functional. Nav links are not `.btn`, so they stay in the body font regardless. */ font-family: var(--font-button); font-weight: var(--font-weight-bold); font-size: var(--text-base); /* A label's leading is a typographic choice like any other, so the theme owns it — and there is a second, less obvious reason it cannot be a constant. Half-leading is split evenly above and below the glyphs, so the label only lands on the button's centre line when the line box is an EVEN number of pixels. At 16px, 1.2 gives 19.2 and the label sits 0.6px high; 1.25 gives 20 and it is exact. At 20px the two swap places — 24 is clean, 25 is not — so no single value is right for every step of the scale, and the honest thing is to let each theme tune it for the size its buttons are actually read at. Measured, not eyeballed: the header CTA went from 13.4/14.6 to 14/14. */ line-height: var(--btn-line-height, 1.2); text-decoration: none; cursor: pointer; /* One transition, because `transition` is a single property — a second `.btn { transition }` elsewhere would replace this wholesale, not add to it. Colour and border snap on the quick curve; the hover lift and its shadow ride the slower expo the cards and footer pills use, so every raised surface rises the same way. The hover/active target values live in motion.css. */ transition: background-color var(--motion-duration) var(--motion-easing), border-color var(--motion-duration) var(--motion-easing), color var(--motion-duration) var(--motion-easing), box-shadow var(--motion-duration-slow) var(--ease-out-expo), translate var(--motion-duration-slow) var(--ease-out-expo); } /* An icon in a button tracks the label rather than the global 1.5rem, so it reads as part of the word and scales with the button — 1.25em is 20px next to base text and grows with `.btn--lg`. */ .btn .icon { width: 1.25em; height: 1.25em; } /* The filled button, and every value in it is a slot with the old behaviour as its default — a theme that sets none of them gets the solid brand fill this has always been. **`--btn-surface` and `--btn-ink` exist because a filled button is not always a `--color-primary` surface.** The moment a theme makes the button translucent — glass with a brand tint over whatever the page is showing — the fill stops being the brand colour and the label stops being the ink that was contrast-checked against it. Those are two different questions from "what is the brand", and `--color-text-on-primary` still answers the original one for every badge and notice that really does sit on a solid primary fill. Reusing it here would have tied a button's legibility to a token four other components depend on. `--btn-filter` is the backdrop, and it is the whole of what makes glass glass: without it a translucent fill is just a weak colour. Same slot shape as `--card-filter` and `--glass-filter`, and like them it defaults to `none` so nothing pays for a filter it does not use. */ .btn--primary { background: var(--btn-surface, var(--color-primary)); color: var(--btn-ink, var(--color-text-on-primary)); /* Two optional layers a theme can switch on, both defaulting to what the button has always been: `--btn-sheen` is a background-image laid over the colour — a highlight that fades from the top, which is what makes a flat fill read as a lit surface. It is an image, so the hover's colour change happens *under* it and the sheen never has to be redeclared per state. `--shadow-button` is the button's resting glow. The hover/active shadows live in motion.css with everything else that answers the pointer — see the note there for why the fallback chain matters. An `inset` layer in here is also how a glass button draws its own edge, which is why no border slot was added: the button already has a transparent border for layout, and a hairline drawn by the shadow lands inside it without changing a single measurement. */ background-image: var(--btn-sheen, none); box-shadow: var(--shadow-button, none); backdrop-filter: var(--btn-filter, none); } .btn--primary:hover { background-color: var(--btn-hover-surface, var(--color-primary-700)); color: var(--btn-hover-ink, var(--btn-ink, var(--color-text-on-primary))); /* Shadow and lift are centralised on `.btn:hover` now, so the variant only owns its colour shift — `background-color`, not the `background` shorthand, or this state would wipe the sheen the rule above laid on. The ink chain falls back through the resting ink before the original token, so a theme that recolours the label once does not have to say it twice. */ } .btn--secondary { background: transparent; border-color: var(--color-primary); color: var(--color-primary); } /* The hover is carried by the tint, not by a second ink. `primary-50` under `primary-700` was a light-page assumption twice over: on a dark theme the pair painted a near-white pad under a dark-gold word, and the word that was legible at rest (2.6:1 after the swap) stopped being legible exactly while the reader was pointing at it. The tint now mixes into the page's own surface and the label simply stays the brand colour — a hover that changes one thing rather than two, and the only version that survives a theme going dark. */ .btn--secondary:hover { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); } .btn--ghost { background: transparent; color: var(--color-primary); } /* The quietest button, and the one with the most room to answer a pointer: it has no resting surface to change, so a theme may light its edge instead. Three slots, all defaulting to the tint this has always used — the surface, the border the base leaves transparent for layout, and the label. A theme that wants a lit ring sets the border and the shadow slot in motion.css; one that wants nothing new keeps the tint and cannot tell these exist. The border is the point of the middle one. `.btn` already carries `var(--border-width) solid transparent`, so a ghost button is exactly the same size as a filled one and colouring that border on hover moves nothing — a ring that appeared by *adding* a border would shift the label by two pixels on the way in. */ .btn--ghost:hover { background: var(--btn-ghost-hover-surface, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface))); border-color: var(--btn-ghost-hover-border, transparent); color: var(--btn-ghost-hover-ink, var(--color-primary)); } .btn--sm { padding-block: calc(var(--space-2) + var(--btn-label-shift, 0px)) calc(var(--space-2) - var(--btn-label-shift, 0px)); padding-inline: var(--space-4); font-size: var(--text-sm); } .btn--lg { padding-block: calc(var(--space-4) + var(--btn-label-shift, 0px)) calc(var(--space-4) - var(--btn-label-shift, 0px)); padding-inline: var(--space-8); font-size: var(--text-lg); } .btn:disabled, .btn.is-disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* Loading state — spinner replaces the label's leading space */ .btn.is-loading { position: relative; color: transparent; pointer-events: none; } .btn.is-loading::after { content: ""; position: absolute; width: 1em; height: 1em; border: 2px solid var(--color-text-on-primary); border-block-start-color: transparent; border-radius: var(--radius-full); animation: btn-spin 0.7s linear infinite; } @keyframes btn-spin { to { transform: rotate(1turn); } } /* -------------------------------------------------------------------- Links -------------------------------------------------------------------- */ .link-arrow { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--font-weight-bold); text-decoration: none; } .link-arrow::after { content: "→"; transition: translate var(--motion-duration) var(--motion-easing); } .link-arrow:hover::after { translate: 4px 0; } /* -------------------------------------------------------------------- Tag / label -------------------------------------------------------------------- */ .tag { display: inline-block; /* The vertical halves are split so a theme can move the WORD inside the badge without moving the badge: whatever is added on top comes off the bottom, so the height never changes. See `--label-ink-shift` below. */ padding-block: calc(var(--space-1) + var(--label-ink-shift, 0px)) calc(var(--space-1) - var(--label-ink-shift, 0px)); padding-inline: var(--space-3); /* Four slots, all defaulting to the filled badge this has always been. A tag is the same kind of object the eyebrow turned out to be: a made thing with an edge, which is one voice among several rather than the only way to label something. On a light page a pale filled badge is quiet — it is a tint of the page. Invert the page and the identical token becomes the brightest element in the card, louder than the heading it sits above, because `primary-100` is a near-white in every ramp. The eyebrow met this exact problem and got `--eyebrow-*`; this is the same argument for the same reason, and it is a token set rather than a fix in one theme because any dark theme will need it. `--tag-edge` is an inset shadow rather than a border, for the reason `--media-edge` is: a transparent border still takes space, so adding one would move every badge on every site to buy a line one theme draws. */ border-radius: var(--tag-radius, var(--radius-sm)); background: var(--tag-surface, var(--color-primary-100)); color: var(--tag-ink, var(--color-primary-800)); box-shadow: inset 0 0 0 var(--border-width) var(--tag-edge, transparent); font-size: var(--text-xs); font-weight: var(--tag-weight, var(--font-weight-bold)); letter-spacing: var(--tag-tracking, inherit); text-transform: var(--tag-transform, none); text-decoration: none; white-space: nowrap; /* A label in a box does not want prose leading. Unset it inherits the body's, which is written for paragraphs and — at this size — rarely lands on an even number of pixels: half-leading is split above and below the glyphs, so an odd fraction puts the word off the badge's centre line. At 12px a body leading of 1.7 gives 20.4 and the text sits 0.7px high; 1.5 gives 18 and it is level. Third time this arithmetic has come up — see `--btn-line-height` and `--nav-line-height`. They stay separate tokens rather than one, because the value that makes a box even depends on the font size the component is set at, and these three are set at three different ones. ⚠ And an even box is only half of it here, which is worth knowing before anyone chases the other half with line-height again. A badge holds UPPERCASE text: the ink has no descender, but the font still reserves descent below the baseline, so the word sits high by roughly (descent − 0) / 2 no matter how the leading is set. Measured in Industry at 12px: 4.5px of air above the ink against 9.46 below — 2.5px high, five times the line-box error. `--label-ink-shift` is the optical correction for that, and it belongs to the theme because it is a property of the face, not of the component. Expressed in `em` so it scales with the label (PRINCIPLES §6 allows exactly this). */ line-height: var(--leading-ui, inherit); } /* -------------------------------------------------------------------- Notice — the component the feedback state tokens exist for. `.notice--success | --warning | --error | --info` -------------------------------------------------------------------- */ .notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border-inline-start: 4px solid var(--notice-line); background: var(--notice-soft); color: var(--notice-strong); font-size: var(--text-sm); } .notice .icon { flex-shrink: 0; color: var(--notice-line); } .notice--success { --notice-line: var(--color-success); --notice-soft: var(--color-success-soft); --notice-strong: var(--color-success-strong); } .notice--warning { --notice-line: var(--color-warning); --notice-soft: var(--color-warning-soft); --notice-strong: var(--color-warning-strong); } .notice--error { --notice-line: var(--color-error); --notice-soft: var(--color-error-soft); --notice-strong: var(--color-error-strong); } .notice--info { --notice-line: var(--color-info); --notice-soft: var(--color-info-soft); --notice-strong: var(--color-info-strong); } /* Solid badge — the only place `-on` is used, and the reason it exists: text on a solid state colour is where amber quietly fails. */ .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-weight-bold); background: var(--badge-bg); color: var(--badge-on); } .badge--success { --badge-bg: var(--color-success); --badge-on: var(--color-success-on); } .badge--warning { --badge-bg: var(--color-warning); --badge-on: var(--color-warning-on); } .badge--error { --badge-bg: var(--color-error); --badge-on: var(--color-error-on); } .badge--info { --badge-bg: var(--color-info); --badge-on: var(--color-info-on); } /* -------------------------------------------------------------------- Divider -------------------------------------------------------------------- */ .divider { border: 0; border-block-start: var(--border-width) solid var(--color-border); } /* -------------------------------------------------------------------- Icon — slot for an SVG from the chosen theme set (ANALYSIS §7a) -------------------------------------------------------------------- */ .icon { display: inline-flex; width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .icon svg { width: 100%; height: 100%; } .icon--lg { width: 2.5rem; height: 2.5rem; } /* -------------------------------------------------------------------- Image frame — fixed aspect ratios + no-photo fallback -------------------------------------------------------------------- */ .img-frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface-alt); } /* `--media-edge`: a hairline round any picture, for the theme that needs one. A photograph on a light page cuts its own edge — there is nowhere for it to go. On a dark one it does not: a dim interior shot against a black page has no boundary at all on two or three sides, so the picture stops being an object and becomes a lighter patch of page. Which sides depends on the photograph, so it cannot be fixed by cropping or by choosing better pictures. Default `transparent`, so every existing theme renders exactly as it did. **A pseudo-element, and not a `border`.** A transparent border still occupies space, so putting one here would move every image on every site by a pixel a side to buy a line that only one theme draws. An `outline` with a negative offset would do it without the layout cost, but it is the focus ring's property and the gallery item is a button — a resting outline there is a fight with `:focus-visible` waiting to happen. A pseudo paints over the picture, follows the corner radius by inheriting it, and costs nothing when the colour is transparent. `.embed` is in the list because a video poster is a photograph and has the same problem — a dark thumbnail against a dark page has no edge. The map is excluded: it carries a real border already, for the opposite reason (it is pale and lands on a pale panel), and two lines would read as a mistake. */ /* Not inside a card, and this is the same argument as excluding the map. A card already draws its own boundary — a border, or a surface that steps away from the page. The hairline exists to tell a reader where a picture stops, and inside a card the card has already said it: a second line a few pixels in from the first reads as a mistake rather than as an edge. It is most obvious on a listing, where nine cards each show the doubling nine times. Written as the token rather than as `box-shadow: none` on a longer selector, so it stays a decision a theme can still reach: a card variant that genuinely wants an inner edge sets `--media-edge` back on itself. */ .card, .next-item { --media-edge: transparent; } .img-frame::after, .gallery__item::after, .embed:not(.embed--map)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--border-width) var(--media-edge, transparent); pointer-events: none; /* Above the poster and the facade, below nothing that takes a click — the facade is the button, and this must not eat its pointer events. */ z-index: 1; } /* The gallery item is a `