@getvitops/generator 8.3.0-alpha.3 → 8.3.0-alpha.5

package/CHANGELOG.md

@@ -1,5 +1,80 @@
 # @getvitops/generator
 
+## 8.3.0-alpha.5
+
+### Minor Changes
+
+- bb61a35: **Call tracking numbers: show an ad visitor a number that attributes the phone call.** Two additive config blocks, no CSS, no breaking change — all formats unaffected.
+
+  - **`site.ads.google.callTracking`** — Google Ads _website call conversions_. `{ label, number, cache? }` makes the consent-gated Google tag fetch a Google forwarding number (Canada supported) and swap it in for visitors who arrived from a Google ad. Google replaces text only, so the capture script also rewrites the matching `tel:` href. Needs `pixelId` and `site.tracking.enabled`; rejected on any other platform (only Google can put a number on the website — Microsoft's exist only inside the ad, in the US/UK/AU).
+  - **`site.tracking.phoneNumbers`** — per-platform numbers for every other platform: the real `number`, `sources` keyed by `site.ads` platform (plus `default-paid`), and an informational `provider`. You provision the numbers with a call-tracking service (Twilio, CallRail, …). The landing URL decides first, then the `_ac` cookie, so a visitor who declines `marketing` sees a tracking number on the landing page only. An organic visitor is never swapped, and the server-rendered HTML always carries the real number.
+  - The `tel:` tap beacon now carries which number was shown (`phoneSource`), and the conversion notification says so.
+  - `vitops ads lint` flags a call-tracking provider that is not in `site.legal.privacyPolicy.processors`, and notes that `callTracking` plus `conversionLabel.call` can count one call twice (make one secondary in Google Ads).
+  - `@getvitops/utils/tracking` exports the pure `selectPhoneNumber()` and helpers; the capture script mirrors it and `tracking.test.ts` pins the two.
+  - `@getvitops/skills` gains a **`vitops-ads`** skill (overview plus a `call-tracking.md` topic). The templates gitignore synced skills by prefix (`vitops-*`, `emdash-*`), so it needs no `.gitignore` line of its own.
+
+  `@getvitops/core`, `@getvitops/vite` and `@getvitops/emdash` — no consumer-facing change in these packages.
+
+- 4d94c8b: **Added: `site.chrome` — a configurable masthead and nav behaviour.** Non-breaking.
+
+  - `site.chrome.masthead` (new `@getvitops/config` schema): `position` (`static|sticky|fixed`), `behavior` (`always|hide-on-scroll`), `surface` (`solid|glass|transparent|transparent-until-scrolled`), `tone` (a `colors.roles` key), `layout` (`full|inset|floating`), `width`, `elevation` (`shadow`, `border`, `onScroll`), `height` and `inset`. `height` and `inset` take fluid lengths (`calc()`, `clamp()`, `min()`, `max()`, with `cqi`/`vw`/… units), checked against a closed grammar because they are written into CSS. `validateConfig` rejects a `tone` or `shadow` the design system does not define (only when the default theme states them directly, not via `extends`).
+  - `site.chrome.nav`: `compact` (`drawer|dropdown`), `drawerSide`, `breakpoint`/`mobileBreakpoint`/`megaBreakpoint`, `depth`, `megaDepth`.
+  - `<Masthead config={site}>` (`@getvitops/astro`, slots `brand`/default/`actions`) and `resolveMasthead()` / `resolveNavOptions()`. A prop overrides one field per layout. The key is `chrome`/`masthead` on purpose: `<header>` is valid in any section and `banner` already means the announcement bar and the landmark role.
+  - `<SiteNav>` gains `compact="dropdown"` (a columnar panel anchored under the toggle), `drawerSide` (previously hardcoded to the end edge in Astro), `megaDepth` and `megaPanel`. `.sitenav--mega` now styles second-level items as column headings and has an optional featured column.
+  - `@getvitops/emdash`: `VitopsMegaPanel` fills that column from the widget area `mega-<item url slug>` (or a `mega-area:<name>` class on the menu item). No area means no column.
+  - `@getvitops/create` (emdash template): the layout renders through `<Masthead>`; `site.json` ships a sticky glass masthead with a shadow once scrolled. The hand-written `.navbar { block-size: 64px }` is gone (use `masthead.height`).
+  - CSS (`patterns/masthead.css`, `patterns/sitenav.css`): **all formats**, including tailwind, where the patterns are inlined into `@layer components`. Hide-on-scroll and the `*-on-scroll` states are `scroll-state()` container queries that only subtract from a settled (solid, elevated, visible) bar, so a browser without them (Firefox today) shows that bar rather than a transparent one. A sticky or fixed masthead sets `--header-offset` / `--top-offset` so anchors land below it.
+  - `@getvitops/generator`: new `TIERS.masthead`; `TIERS.sitenav` documents the new props.
+
+### Patch Changes
+
+- Updated dependencies [785b8b3]
+- Updated dependencies [bb61a35]
+- Updated dependencies [4d94c8b]
+  - @getvitops/config@8.3.0-alpha.5
+  - @getvitops/utils@8.3.0-alpha.5
+
+## 8.3.0-alpha.4
+
+### Minor Changes
+
+- 99e66a2: Fixes from the vitops.ca build (alpha.3 findings 1–5, 19, 29).
+
+  - **Scaffold patterns.** Both templates now define `cta`, `link` and `details` in `patterns.items` (a `content` group too), and a `ui-accent` role. `.cta` had no CSS at all, so every hero, card and callout button rendered as plain text; a test now fails if a template omits a pattern the blocks emit. `vitops_accordion` renders a sprite chevron like `vitops_details`, and `details.css` styles an `.accordion` group (a divider and padded summaries from the `details` pattern tokens) — all formats.
+  - **Tone paints only on surfaces.** `.tone` now sets colour variables and `border-color`; the background comes from `.tone--tint` (callout, panel card, hero card, toned section/hero/nav/reviews, `theme`) or `.tone--solid`. A steps, stats or form block with a tone is no longer turned into a band. `ResolvedTone` gains `surface` (`tone tone--tint`). **If you styled `.tone` directly,** add `tone--tint` where you want the background. A `.cta` inside a tinted or filled tone takes the tone's solid. all formats.
+  - **`colors.tint: { mix: "8%" }`** derives the tint from the role's solid (`--tone-tint`) instead of its `muted` step, which turns brown for amber on a dark page. Off by default; not covered by the contrast contract.
+  - **Per-card backdrop.** `vitops_cards` and `vitops_hero` rows take a `theme` (tint or fill of a site colour), so one card of a pair can be tinted.
+  - **`colors.roles.<r>.acknowledgeContrast`**: a number of Lc a pairing may miss its APCA bar by and still only warn (e.g. pine's solid at Lc 59.5 against 60). A larger miss still fails.
+  - **Select:** where `appearance: base-select` is supported the wrapper's own chevron is hidden, so a select no longer shows two arrows, and the wrapper and control fill the field (`.custom-select` is `display: block`; add `display: inline-block` if you used it inline). all formats.
+
+- d64fb20: Layout and spacing fixes from the vitops.ca build (findings 6–9).
+
+  - **`vitops_section` is the page opener.** New fields `cta_label`/`cta_href`/`secondary_label`/`secondary_href` (a `.cta` and a `.link` in the head), `*accent*` runs in the heading, and `stack: rhythm`, which puts `.rhythm` on `.section__inner` so head and body use the vertical-rhythm scale. With level 1 it replaces nesting a `vitops_hero` in a section, which rendered `section > .centered > … > section > .centered`. `vitops_hero` stays for a stand-alone hero with option cards. A plain (`stack: grid`) section also puts a gap between head and body now (`--section-gap`, default 2rem) instead of sitting flush. css/bricks/tailwind.
+  - **`.rhythm` spaces blocks.** A card row (`wc-cards`, classed `ul`/`ol`), accordion, `details`, form, table, figure or `.section__body` directly under a `.rhythm` is `--rhythm-block` (2) apart, not a paragraph apart; a button row (`p.cluster`) is `--rhythm-block-action` (1.6). Classless lists stay prose and a form's own field spacing is unchanged. A bare `<a>` that is a direct child of `.rhythm` is now `display: block; inline-size: fit-content`, since an inline box ignored `margin-top` and sat flush under the paragraph above (`.cta` and `.btn` are unaffected). all formats.
+  - **`rhythm-flex`** utility: an opt-in flex-column stack for the case the margin stack does not suit; margins apply to any child. all formats (`@utility` in tailwind).
+
+- 322dd6a: Block fixes from the vitops.ca build (findings 11–13, 15, 17, 18, 21).
+
+  - **Steps.** The marker is an outlined disc in the tone (number and ring in `--tone-solid`, falling back to `currentColor`), so a steps block with no tone no longer shows black discs with no number. Items keep `align-content: start` and no `.rhythm li + li` margin, so markers in a row line up. Two modifiers through the block's `className`: `steps--cards` (each step in a card) and `steps--animated` (the connector draws and the marker fills as each step scrolls in; static under reduced motion or without scroll-driven animations). `steps` is now a config pattern: `patterns.items.steps` in `site.json` owns the card geometry (`content` group tokens) and the marker size (`--steps-marker-size`, `--steps-line-width`); both templates and the reference config ship an entry. all formats.
+  - **Stats.** `<wc-counter>` leaves a figure it cannot count as authored (`"1 in 6"`, `"24/7"`, `"—"`) instead of counting down from zero to a wrong value. `animate: false` on the block still turns the count-up off for a whole block.
+  - **Logos.** `vitops_logos` takes an optional `kicker`, `note` and `linkLabel`/`linkHref`; with any of them set, the row is wrapped in `.logos-block`. The list keeps the block's attributes either way.
+  - **Pricing.** Plans take `yearly` (a second price line) and `note` (under the plan name).
+  - **`<SiteFooter>`** has a `brand` named slot, rendered as the first column (`.sitefooter__brand`) in the site's own markup.
+
+### Patch Changes
+
+- 322dd6a: Tooling fixes from the vitops.ca build (findings 14, 23, 24, 25).
+
+  - **`vitops emdash form-template --from <seed.json | export.json> [--name contact] [--site site.json] [--dry]`** copies a `vitops_form` block into `site.templates` with the renderer's own field resolver, so the generated privacy policy and `check-prerender` know what the form collects. A re-run is a no-op, and the result is validated before it is written.
+  - `site.templates` form fields accept `checkboxes` (the block's spelling), and the template union now discriminates on `type`, so a bad entry is reported at its path instead of as a bare "Invalid input".
+  - **`prepare-db` fails fast and says why.** It validates `site.json` before starting the dev server, writes the server's output to `.vitops/prepare-db.log`, stops waiting as soon as the log shows an error, and prints the log's tail on failure, instead of waiting out a five-minute timeout with nothing to read.
+  - **`check-prerender`** skips the toolkit's own assets under `vitops/` (no more "0 h1" for the theme-editor page) and warns when the sitemap lists URLs the build produced no page for (a collection with no `urlPattern` is listed as `/<collection>/<slug>` while the site serves `/<slug>`).
+  - The emdash template ignores the duplicate `pnpm-@getvitops+skills-*` links `skills experimental_sync` leaves beside each skill; the `content-and-deploys` skill explains the sitemap warning.
+
+- Updated dependencies [00a9d86]
+  - @getvitops/utils@8.3.0-alpha.4
+  - @getvitops/config@8.3.0-alpha.4
+
 ## 8.3.0-alpha.3
 
 ### Patch Changes

package/assets/css/index.css

@@ -40,6 +40,7 @@
 /* navbar before sitenav: sitenav's wide state composes it. */
 @import './patterns/navbar.css';
 @import './patterns/sitenav.css';
+@import './patterns/masthead.css';
 /* After sitenav (the nav family stays contiguous) and after drawer.css, whose
    panel surface navshell's desktop block has to undo. */
 @import './patterns/navshell.css';

package/assets/css/layout-utilities.css

@@ -283,6 +283,19 @@
   margin-top: 0;
 }
 
+/* Opt-in second stack: add `rhythm-flex` beside `rhythm` (a block's `className`) where the margin
+   stack fails. Flex items are blockified, so margins apply to every child, bare links included.
+   No `gap`: the `.rhythm` pair rules still decide the spacing. */
+.rhythm-flex {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.rhythm-flex
+  > :is(wc-cards, ul[class], ol[class], details, form, table, figure, .accordion, .section__body) {
+  align-self: stretch;
+}
+
 /* ── Flex direction (display + direction; tiered classes set both) ── */
 .flex {
   display: flex;

package/assets/css/layout.css

@@ -36,6 +36,8 @@
   --rhythm-li-li: 0.3;
   --rhythm-text-media: 1.2;
   --rhythm-media-text: 1.2;
+  --rhythm-block: 2; /* a card row, list, accordion or form under prose */
+  --rhythm-block-action: 1.6; /* a button row after the lead */
 }
 
 /* .rhythm establishes a flow-root: contains child top-margins (no collapse-out)
@@ -174,6 +176,27 @@
   margin-top: calc(var(--rhythm-base) * var(--rhythm-media-text));
 }
 
+/* Block-level children are a block gap apart, not a paragraph apart: a card row, a stats list, an
+   accordion or a form under a lead sat flush at the prose spacing. `:is()` takes its most specific
+   argument (0-1-1), so this beats the paragraph-to-list pairs above (0-1-2 would not tie it).
+   Classless `ul`/`ol` stay prose. A form's own `.rhythm` holds `div` fields, which are not listed,
+   so its tight field spacing is untouched. */
+.rhythm
+  > *
+  + :is(wc-cards, ul[class], ol[class], details, form, table, figure, .accordion, .section__body) {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-block));
+}
+/* A row of buttons after the lead. */
+.rhythm > * + p.cluster {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-block-action));
+}
+/* A bare link is inline, and an inline box ignores `margin-top`, so it sat flush under the
+   paragraph above. Buttons (`.cta`, `.btn`) are inline-flex and already space. */
+.rhythm > :where(a:not(.cta, .btn)) {
+  display: block;
+  inline-size: fit-content;
+}
+
 /* ═══════════════════════════════════════════════════════════════════════════
    4. CENTERED SECTIONS — named-track grid
    Put .centered on a Div. Children default to the measure (reading) track;

package/assets/css/patterns/carousel.css

@@ -529,13 +529,20 @@ wc-carousel {
   margin: var(--carousel-hint-inset, 0.5rem);
   z-index: var(--z-tier-raised);
   pointer-events: none;
-  color: var(--color-text-surface-x-muted);
+  /* `muted`, not `x-muted`: the hint is visible text, and `x-muted` is the placeholder tier the
+     contrast contract exempts (axe flagged it at 1.34:1). */
+  color: var(--color-text-surface-muted);
   transition: opacity 0.3s ease;
 }
 
+/* The hint fades out over the first 12% of scroll and is then hidden outright: an element left at
+   0.2 opacity is still text to an audit (axe reported 1.34:1), and once the visitor has scrolled it
+   has nothing left to say. `visibility` flips only at the end of the range, so the fade still shows.
+   Set --carousel-hint-dimmed above 0 to keep a ghost of it instead. */
 @keyframes carousel-hint-dim {
   to {
-    opacity: var(--carousel-hint-dimmed, 0.2);
+    opacity: var(--carousel-hint-dimmed, 0);
+    visibility: hidden;
   }
 }
 

package/assets/css/patterns/details.css

@@ -116,3 +116,17 @@ details,
     rotate: none;
   }
 }
+
+/* ── Accordion group (`vitops_accordion`) ───────────────────────────────────
+   A stack of `<details>`: a divider between items and padded summaries, both from the
+   `details` pattern's group tokens so a site restyles them through `patterns.items.details`. */
+.accordion {
+  > details + details {
+    border-block-start: var(--b-details-group, var(--b-default, 1px solid currentColor));
+  }
+
+  > details > summary {
+    padding-block: var(--p-details-group, var(--p-default, 1rem));
+    gap: 0.75rem;
+  }
+}

package/assets/css/patterns/forms.css

@@ -333,7 +333,7 @@ input[type='color'] {
  * `select` (`select.custom-select`); style both so the control radius applies. */
 .custom-select {
   position: relative;
-  display: inline-block;
+  display: block;
 
   &::after {
     content: '';
@@ -349,6 +349,19 @@ input[type='color'] {
     pointer-events: none;
     opacity: 0.5;
   }
+
+  /* The wrapper fills its field, and so does the control inside it. */
+  > select {
+    inline-size: 100%;
+  }
+}
+
+/* `appearance: base-select` draws its own arrow (`::picker-icon`); the wrapper's would be a second
+   chevron at the far edge. It only stands in where base-select is unsupported. */
+@supports (appearance: base-select) {
+  .custom-select:has(> select)::after {
+    content: none;
+  }
 }
 
 .custom-select select,

package/assets/css/patterns/logos.css

@@ -63,3 +63,17 @@
     opacity: 1;
   }
 }
+
+/* The optional frame: a line above the row, and a closing note and link below it. */
+.logos-block {
+  display: grid;
+  justify-items: center;
+  gap: var(--logos-block-gap, 1.25rem);
+  text-align: center;
+
+  .logos__kicker,
+  .logos__note,
+  .logos__link {
+    margin: 0;
+  }
+}

package/assets/css/patterns/masthead.css

@@ -0,0 +1,201 @@
+/**
+ * Masthead — the site's top bar: brand, navigation, actions. Pure CSS (tier 1); `<Masthead>`
+ * (`@getvitops/astro`) only emits the classes below from `site.chrome.masthead`.
+ *
+ *   <header class="masthead masthead--sticky masthead--glass masthead--shadow-on-scroll">
+ *     <div class="masthead__row navbar centered">brand · nav · actions</div>
+ *   </header>
+ *
+ * Named "masthead", not "header"/"banner": `<header>` is valid in any section, and `.banner` is
+ * the announcement bar. The element is a plain `<header>` with no explicit `role`.
+ *
+ * ── SAFE BASE, SUBTRACTIVE ENHANCEMENTS ──
+ * The un-modified rule is the settled state: visible, solid (or glass), elevated, in flow.
+ * Scroll behaviour is layered on with `scroll-state()` container queries that only ever
+ * SUBTRACT from it — `*-on-scroll` clears the surface/shadow/border while the page is at the
+ * top; `hide-on-scroll` slides the bar away. Where the query is unsupported (Firefox today)
+ * nothing subtracts, so the bar stays visible, solid and elevated: a query can change how the
+ * bar looks, never leave it unreadable or take the nav away. (Writing these the other way
+ * round — base clear, query reveals — leaves an unsupporting browser with a transparent bar
+ * over body text forever.)
+ *
+ * Hooks (all optional custom properties): `--masthead-height`, `--masthead-bg`, `--masthead-fg`,
+ * `--masthead-blur`, `--masthead-glass-opacity`, `--masthead-inset`, `--masthead-shadow`,
+ * `--masthead-border`. `site.chrome.masthead` sets `--masthead-height` and `--masthead-inset`
+ * on `:root` (see `mastheadRootCss()`), so a clamp()/cqi length there reaches `--header-offset`.
+ */
+
+/* Zero-specificity colour defaults, so a `.tone` (or any class) on the element wins. */
+:where(.masthead) {
+  --_masthead-base: var(--tone-bg, var(--color-bg-surface));
+
+  background-color: var(--masthead-bg, var(--_masthead-base));
+  color: var(--masthead-fg, var(--tone-fg, var(--color-text-surface)));
+}
+
+.masthead {
+  --_masthead-h: var(--masthead-height, 4rem);
+  --_masthead-inset: 0px;
+
+  position: relative;
+  z-index: var(--z-tier-sticky);
+  display: block;
+  box-sizing: border-box;
+  transition:
+    translate 0.25s ease,
+    background-color 0.25s ease,
+    box-shadow 0.25s ease,
+    backdrop-filter 0.25s ease;
+}
+
+.masthead__row {
+  display: block;
+}
+
+/* The row's flex child carries the height; `.centered` (when used) is the grid around it. */
+.masthead__row > .navbar {
+  min-block-size: var(--_masthead-h);
+}
+
+/* `width: full` has no track to supply a gutter. */
+.masthead__row:not(.centered) > .navbar {
+  padding-inline: var(--masthead-gutter, 1rem);
+}
+
+/* ── Position ──────────────────────────────────────────────────────────────── */
+.masthead--sticky {
+  position: sticky;
+  inset-block-start: var(--_masthead-inset);
+}
+
+/* Out of flow: overlays the first section. Pair with `--transparent*`. */
+.masthead--fixed {
+  position: fixed;
+  inset-block-start: var(--_masthead-inset);
+  inset-inline: 0;
+}
+
+/* Anchors and `scroll-padding` land below a pinned masthead. Sticky keeps its space in
+   flow, fixed does not, but both cover the top of the viewport. */
+:root:has(.masthead--sticky, .masthead--fixed) {
+  --header-offset: calc(var(--masthead-height, 4rem) + var(--masthead-inset, 0px));
+  --top-offset: var(--header-offset);
+}
+
+/* ── Surface ───────────────────────────────────────────────────────────────── */
+.masthead--glass {
+  background-color: color-mix(
+    in oklch,
+    var(--masthead-bg, var(--_masthead-base)) var(--masthead-glass-opacity, 72%),
+    transparent
+  );
+  backdrop-filter: blur(var(--masthead-blur, 12px));
+  -webkit-backdrop-filter: blur(var(--masthead-blur, 12px));
+}
+
+/* A browser without backdrop-filter would show page content through a tint. Go solid. */
+@supports not (backdrop-filter: blur(1px)) {
+  .masthead--glass {
+    background-color: var(--masthead-bg, var(--_masthead-base));
+  }
+}
+
+.masthead--transparent {
+  background-color: transparent;
+}
+
+/* ── Layout ────────────────────────────────────────────────────────────────── */
+.masthead--inset,
+.masthead--floating {
+  --_masthead-inset: var(--masthead-inset, 0.75rem);
+
+  margin-inline: var(--_masthead-inset);
+  margin-block-start: var(--_masthead-inset);
+}
+
+/* `fixed` has no flow to margin against: pin the box in by its insets instead. */
+.masthead--fixed.masthead--inset,
+.masthead--fixed.masthead--floating {
+  margin: 0;
+  inset-inline: var(--_masthead-inset);
+}
+
+.masthead--inset {
+  border-radius: var(--br-control, 0.375rem);
+}
+
+.masthead--floating {
+  border-radius: var(--br-panel, 1rem);
+  overflow: clip;
+}
+
+/* ── Elevation ─────────────────────────────────────────────────────────────── */
+.masthead--shadow {
+  box-shadow: var(--masthead-shadow, var(--shadow-sm));
+}
+
+.masthead--border {
+  border-block-end: var(
+    --masthead-border,
+    1px solid var(--tone-border, var(--color-border-surface))
+  );
+}
+
+/* A full outline once the masthead is detached from the viewport edge. */
+.masthead--border:is(.masthead--inset, .masthead--floating) {
+  border: var(--masthead-border, 1px solid var(--tone-border, var(--color-border-surface)));
+}
+
+/* ── Scroll behaviour ───────────────────────────────────────────────────────
+   The page is the scroll-state container. Only when a masthead asks for one, so a
+   site that uses none pays nothing. */
+:root:has(
+  .masthead--hide-on-scroll,
+  .masthead--transparent-until-scrolled,
+  .masthead--shadow-on-scroll,
+  .masthead--border-on-scroll
+) {
+  container: masthead-page / scroll-state;
+}
+
+/* At the top of the page, the *-on-scroll modifiers subtract their settled look. `not
+   scroll-state(scrollable: top)` is "nothing above the viewport", i.e. scrollY = 0. */
+@container masthead-page not scroll-state(scrollable: top) {
+  .masthead--transparent-until-scrolled {
+    background-color: transparent;
+    /* A glass bar would otherwise blur the hero behind an otherwise clear bar. */
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+  .masthead--shadow-on-scroll {
+    box-shadow: none;
+  }
+  .masthead--border-on-scroll {
+    border-color: transparent;
+  }
+}
+
+/* Slide away while the last scroll was downward; back when it reverses. Never while the
+   visitor is inside it: focus, an open popover or an open disclosure keeps it on screen. */
+@container masthead-page scroll-state(scrolled: block-end) {
+  .masthead--hide-on-scroll:not(:focus-within, :has(:popover-open, details[open])) {
+    translate: 0 calc(-100% - var(--_masthead-inset) - 1px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .masthead {
+    transition: none;
+  }
+}
+
+/* Shadows and tints disappear in forced-colors; keep a real edge. */
+@media (forced-colors: active) {
+  .masthead {
+    border-block-end: 1px solid CanvasText;
+  }
+  .masthead--inset,
+  .masthead--floating {
+    border: 1px solid CanvasText;
+  }
+}

package/assets/css/patterns/section.css

@@ -59,3 +59,13 @@
 .block-anchor {
   scroll-margin-top: var(--header-offset, 5rem);
 }
+
+/* Head and body of a plain (stack) section sit a gap apart; split already has a grid gap and a
+   `rhythm` stack its own scale. */
+.section:not(.section--split) .section__inner:not(.rhythm) > .section__head + .section__body {
+  margin-block-start: var(--section-gap, 2rem);
+}
+
+.section .section__actions {
+  align-items: center;
+}

package/assets/css/patterns/sitenav.css

@@ -179,6 +179,77 @@
   }
 }
 
+/* ── Compact dropdown — NARROW ONLY ─────────────────────────────────────────
+   `compact: 'dropdown'` swaps the edge drawer for a panel anchored under the toggle,
+   laid out as columns (each top-level item a column, its sub-links beneath). Same
+   markup; `navClass` emits `sitenav--panel-dropdown` INSTEAD of a `drawer-*` class,
+   so nothing here competes with the drawer's equal-specificity edge rules. Scoped to
+   the narrow state for the reason the whole file is (see "TWO BRANCHES"). */
+.sitenav--panel-dropdown {
+  anchor-scope: --sitenav-toggle;
+}
+.sitenav--panel-dropdown > .sitenav__toggle {
+  anchor-name: --sitenav-toggle;
+}
+
+@container style(--_sitenav-wide: 0) {
+  .sitenav--panel-dropdown .sitenav__panel {
+    position-anchor: --sitenav-toggle;
+    position-area: block-end span-inline-start;
+    inset: auto;
+    margin: var(--sitenav-dropdown-gap, 0.5rem) 0;
+    inline-size: min(calc(100dvw - 1.5rem), var(--sitenav-dropdown-size, 36rem));
+    max-block-size: calc(100dvh - 6rem);
+    padding: 1.25rem;
+    border: var(--b-panel);
+    border-radius: var(--br-panel);
+    box-shadow: var(--ds-panel);
+    translate: 0 -0.5rem;
+  }
+  .sitenav--panel-dropdown .sitenav__panel:popover-open {
+    translate: 0 0;
+  }
+  @starting-style {
+    .sitenav--panel-dropdown .sitenav__panel:popover-open {
+      opacity: 0;
+      translate: 0 -0.5rem;
+    }
+  }
+  /* The dropdown is anchored, not modal: no close button, no dimmed page. */
+  .sitenav--panel-dropdown .sitenav__close {
+    display: none;
+  }
+  .sitenav--panel-dropdown .sitenav__panel {
+    padding-block-start: 1.25rem;
+  }
+  .sitenav--panel-dropdown .sitenav__panel::backdrop {
+    background: transparent;
+  }
+  .sitenav--panel-dropdown .sitenav__panel:popover-open::backdrop {
+    background: transparent;
+  }
+  .sitenav--panel-dropdown .sitenav__list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    gap: 1rem 1.5rem;
+    align-items: start;
+  }
+  /* Columns, not accordions: every sub-list is open, so the caret has nothing to do. */
+  .sitenav--panel-dropdown .sitenav__item--branch {
+    display: block;
+  }
+  .sitenav--panel-dropdown .sitenav__item--branch > .sitenav__submenu {
+    overflow: visible;
+    padding-inline-start: 0;
+  }
+  .sitenav--panel-dropdown .sitenav__disclosure {
+    display: none;
+  }
+  .sitenav--panel-dropdown .sitenav__list > .sitenav__item--branch > .sitenav__link {
+    font-weight: 600;
+  }
+}
+
 /* ── Lists + links ─────────────────────────────────────────────────────────── */
 .sitenav__list,
 .sitenav__submenu {
@@ -534,6 +605,38 @@
   .sitenav--mega .sitenav__submenu .sitenav__disclosure {
     display: none;
   }
+  /* Second level reads as a column heading; its description (`titleAttr`) stays. */
+  .sitenav--mega
+    .sitenav__list
+    > .sitenav__item--branch
+    > .sitenav__submenu
+    > .sitenav__item--branch
+    > .sitenav__link {
+    font-weight: 600;
+    padding-inline: 0;
+  }
+  .sitenav--mega .sitenav__submenu .sitenav__item--branch > .sitenav__submenu {
+    padding-inline: 0;
+  }
+  /* Optional featured column (EmDash widget area via `megaPanel`). */
+  .sitenav--mega .sitenav__mega-extra {
+    flex: 1 1 14rem;
+    margin-inline-start: auto;
+    max-inline-size: 22rem;
+    padding-inline-start: 1.5rem;
+    border-inline-start: 1px solid var(--color-border-surface, currentColor);
+  }
+  .sitenav--mega .sitenav__mega-extra:empty {
+    display: none;
+  }
+}
+
+/* Extra column is a wide-mega feature: in a drawer (a mega menu that is the only tier) it
+   would be an unlabelled block between accordions. Empty (no widget area) shows nothing. */
+@container style(--_sitenav-wide: 0) {
+  .sitenav__mega-extra {
+    display: none;
+  }
 }
 
 /* ── In-page menu (`vitops_nav` block) ─────────────────────────────────────────
@@ -638,6 +741,14 @@
   justify-content: space-between;
 }
 
+.sitefooter__brand {
+  flex: 1 1 16rem;
+  max-inline-size: 26rem;
+  display: grid;
+  gap: 0.75rem;
+  align-content: start;
+}
+
 .sitefooter__list {
   list-style: none;
   margin: 0;