@gemboss/website-ui 0.2.0 → 0.4.0

package/css/header.css

@@ -1,5 +1,6 @@
 /* header: announcement, a flat 64px bar with one hairline, mega menu, mobile menu below 1080px.
-   Not a floating pill: no radius, no blur, no shadow on the bar. Nothing tucks under it. */
+   Not a floating pill: no radius, no blur, no shadow on the bar. Nothing tucks under it. A brand may choose the one
+   other shape, .gw-header--float (an inset card from 1080px, at the end of this file). */
 .gw-announce {
   padding: 8px var(--gw-gutter);
   border-bottom: 1px solid var(--gw-line);
@@ -83,9 +84,9 @@
   text-underline-offset: 8px;
 }
 
-/* mega menu: a floating card centred under the bar, as on gemboss.ai (Chris 24/10/2026): one hairline, radius 20,
-   the raised shadow (it is a popover), 32px inside. The bridge (::before) keeps the pointer inside while it crosses
-   the 8px gap from the trigger. */
+/* mega menu: a floating card centred under the bar, as on gemboss.ai (Chris 24/10/2026): one hairline, the popover
+   radius of the site's profile (20, 24 in soft), the raised shadow (it is a popover), 32px inside. The bridge
+   (::before) keeps the pointer inside while it crosses the 8px gap from the trigger. */
 .gw-mega {
   position: absolute;
   top: calc(100% + 8px);
@@ -95,7 +96,7 @@
   overflow-y: auto;
   transform: translateX(-50%);
   border: 1px solid var(--gw-line);
-  border-radius: 20px;
+  border-radius: var(--gw-radius-popover);
   background: var(--gw-surface);
   box-shadow: var(--gw-shadow-raised);
 }
@@ -229,3 +230,34 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
 @media (max-width: 768px), (pointer: coarse) {
   .gw-theme-toggle, .gw-menu-toggle { width: var(--gw-tap-min); height: var(--gw-tap-min); }
 }
+
+/* floating header (0.3.0), a brand's header profile: <header class="gw-header gw-header--float">. The same bar, mega
+   menu and script, drawn from 1080px as an inset card: the panel radius of the site's profile (16, 24 in soft), the
+   surface at 85% over a 10px blur, one hairline, the raised shadow, a 16px gap above it and when it sticks. It is
+   wrap + 2 x 24px + its border wide, so the bar's content lines up with the page's from 1170px. Below 1080px it is
+   the flat bar, so the phone menu is unchanged. Solid for a visitor who asks for less transparency, and where the
+   browser cannot blur. No other floating or blurred header: it is a profile, not a style to copy. */
+@media (min-width: 1080px) {
+  .gw-header--float {
+    top: var(--gw-header-gap);
+    width: min(100% - 32px, var(--gw-wrap) + 50px);
+    margin: var(--gw-header-gap) auto 0;
+    border: 1px solid var(--gw-line);
+    border-radius: var(--gw-radius-panel);
+    background: color-mix(in srgb, var(--gw-surface) var(--gw-header-surface), transparent);
+    -webkit-backdrop-filter: blur(var(--gw-header-blur));
+    backdrop-filter: blur(var(--gw-header-blur));
+    box-shadow: var(--gw-shadow-raised);
+  }
+  .gw-header--float.is-scrolled { border-color: var(--gw-line-strong); }
+  .gw-header--float > .gw-header__bar { width: auto; padding-inline: 24px; }
+  .gw-header--float .gw-mega { max-height: calc(100vh - var(--gw-header-height) - var(--gw-header-gap) - 24px); }
+  /* an anchor lands below the card, not under it */
+  :root:has(.gw-header--float) [id] { scroll-margin-top: calc(var(--gw-header-height) + var(--gw-header-gap) + 18px); }
+}
+@media (min-width: 1080px) and (prefers-reduced-transparency: reduce) {
+  .gw-header--float { background: var(--gw-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .gw-header--float { background: var(--gw-surface); }
+}

package/css/prose.css

@@ -59,7 +59,8 @@
 :where(.gw-prose) > hr { height: 0; border: 0; border-top: 1px solid var(--gw-line); }
 :where(.gw-prose) :is(sup, sub) { line-height: 0; }
 
-/* code: inline, a tint chip that wraps on a phone; a block scrolls inside its own box */
+/* code: inline, a tint chip that wraps on a phone (radius 6 in every profile: it follows the text, not the shapes);
+   a block scrolls inside its own box */
 :where(.gw-prose) :is(pre, code, kbd, samp) { font-family: var(--gw-font-mono); }
 :where(.gw-prose) code {
   padding: 2px 6px;
@@ -87,7 +88,7 @@
   line-height: 1.6;
   tab-size: 2;
 }
-:where(.gw-prose) pre code { padding: 0; border-radius: 0; background: none; font-size: inherit; overflow-wrap: normal; }
+:where(.gw-prose) pre code { padding: 0; border-radius: var(--gw-radius-0); background: none; font-size: inherit; overflow-wrap: normal; }
 
 /* images and captions (an image inside a .gw-window keeps the window's square edges) */
 :where(.gw-prose) > :is(img, video),

package/css/tokens.css

@@ -46,11 +46,13 @@
   --gw-radius-12: 12px;
   --gw-radius-16: 16px;
   --gw-radius-20: 20px;
+  --gw-radius-24: 24px;
   --gw-radius-999: 999px;
   --gw-radius-action: 8px;
   --gw-radius-chip: 999px;
   --gw-radius-card: 12px;
   --gw-radius-panel: 16px;
+  --gw-radius-popover: 20px;
   --gw-shadow: 0 1px 2px rgba(31,30,29,.04), 0 2px 6px rgba(31,30,29,.06);
   --gw-shadow-sm: 0 1px 2px rgba(31,30,29,.04);
   --gw-shadow-raised: 0 4px 16px rgba(31,30,29,.10);
@@ -58,6 +60,9 @@
   --gw-wrap-narrow: 780px;
   --gw-gutter: 22px;
   --gw-header-height: 64px;
+  --gw-header-gap: 16px;
+  --gw-header-surface: 85%;
+  --gw-header-blur: 10px;
   --gw-button-height: 40px;
   --gw-tap-min: 44px;
   --gw-ease: cubic-bezier(.22,1,.36,1);
@@ -198,3 +203,17 @@
   --gw-success-soft: #132a22;
   --gw-warning: #e0b341;
 }
+/* action profile "accent": data-gw-action="accent" on <html>. In night bands too, where the dark palette applies. */
+:root[data-gw-action="accent"],
+:root[data-gw-action="accent"] :is(.gw-band--night, .gw-showcase) {
+  --gw-action: var(--gw-accent);
+  --gw-action-hover: var(--gw-accent-strong);
+  --gw-on-action: var(--gw-on-accent);
+}
+/* radius profile "soft": data-gw-radius="soft" on <html> */
+:root[data-gw-radius="soft"] {
+  --gw-radius-action: 12px;
+  --gw-radius-card: 20px;
+  --gw-radius-panel: 24px;
+  --gw-radius-popover: 24px;
+}

package/demo/brand-profiles.html

@@ -0,0 +1,199 @@
+<!doctype html>
+<!-- Kit demo: one brand that chose all three profiles (docs/theming.md). The profiles are two attributes on <html> and
+     one class on the header; the only CSS of the brand is the accent family below. Sample text, not a brand's copy. -->
+<html lang="en" data-gw-action="accent" data-gw-radius="soft">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>GemPages-style example · website UI kit</title>
+  <meta name="description" content="A kit demo with all three brand profiles on: the accent action, soft corners and the floating header, with a GemPages-style blue.">
+  <script>try{var t=localStorage.getItem('gw-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t)}catch(e){}</script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700&display=swap">
+  <link rel="stylesheet" href="../website.css">
+  <style>
+    /* The brand's whole CSS: the accent family, light and dark, in one :root block (docs/theming.md).
+       Light: #3c67ff fills the primary button, white words on it are 4.58:1 (6.36:1 on the hover #2f52d6).
+       #2f52d6 as accent-strong is an EXAMPLE, not confirmed by the GemPages team: accent text needs it, because
+       #3c67ff is 4.13:1 on --gw-bg-soft; #2f52d6 is 6.36:1 on white, 5.73:1 on --gw-bg-soft, 5.54:1 on its tint.
+       Dark and night bands: #7c9bff is 7.37:1 on the dark page, and #0d0d12 words on it are 7.37:1. */
+    :root {
+      --gw-accent-light: #3c67ff;
+      --gw-accent-strong-light: #2f52d6;
+      --gw-accent-soft-light: #eaefff;
+      --gw-on-accent-light: #ffffff;
+      --gw-accent-dark: #7c9bff;
+      --gw-accent-strong-dark: #a9beff;
+      --gw-accent-soft-dark: #16213d;
+      --gw-on-accent-dark: #0d0d12;
+    }
+  </style>
+</head>
+<body class="gw-page">
+  <a class="gw-skip" href="#main">Skip to content</a>
+
+  <div class="gw-announce" role="region" aria-label="Announcement">Kit demo: a GemPages-style brand with all three profiles on. Sample text, not a brand's page. <a href="index.html">Back to the full demo</a></div>
+  <header class="gw-header gw-header--float" data-gw-header>
+    <div class="gw-wrap gw-header__bar">
+      <a class="gw-brand" href="brand-profiles.html"><svg class="gw-brand__mark" viewBox="0 0 26 26" aria-hidden="true"><rect width="26" height="26" rx="7" style="fill:var(--gw-accent)"/><path d="M8 9h10M8 13h10M8 17h6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/></svg><span class="gw-brand__name">Example brand</span></a>
+      <nav class="gw-nav" aria-label="Main">
+        <ul class="gw-nav__list">
+          <li class="gw-nav__item">
+            <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-kit" data-gw-mega="gw-mega-kit">The kit</button>
+            <div class="gw-mega" id="gw-mega-kit" hidden>
+              <div class="gw-wrap gw-mega__grid">
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">See it</p>
+                  <a class="gw-mega__link" href="index.html#components-h"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></svg></span><span><b>Components</b><i>Buttons, chips, cards, tables</i></span></a>
+                  <a class="gw-mega__link" href="index.html#features-h"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span><span><b>Sections</b><i>Hero, features, pricing, FAQ</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Brands</p>
+                  <a class="gw-mega__link" href="theme-example.html"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z"/></svg></span><span><b>Accent only</b><i>A brand that changed one colour</i></span></a>
+                  <a class="gw-mega__link" href="#profiles"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h10M18 7h2M4 17h2M10 17h10"/><circle cx="16" cy="7" r="2"/><circle cx="8" cy="17" r="2"/></svg></span><span><b>All three profiles</b><i>This page</i></span></a>
+                </div>
+                <a class="gw-mega__feature" href="#profiles"><b>Three named choices</b><i>Action colour, corners and header. Chosen once per site.</i><span class="gw-link gw-link--arrow">See the profiles</span></a>
+              </div>
+            </div>
+          </li>
+          <li class="gw-nav__item"><a class="gw-nav__link" href="index.html">Default demo</a></li>
+          <li class="gw-nav__item"><a class="gw-nav__link" href="theme-example.html">Accent only</a></li>
+        </ul>
+      </nav>
+      <div class="gw-header__actions">
+        <button class="gw-theme-toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
+        <a class="gw-btn gw-btn--secondary gw-btn--sm" href="index.html">Default demo</a>
+        <a class="gw-btn gw-btn--sm" href="#profiles">See the profiles</a>
+        <button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
+      </div>
+    </div>
+    <div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
+      <nav class="gw-wrap" aria-label="Main, mobile">
+        <details class="gw-mobile-menu__group">
+          <summary>The kit</summary>
+          <ul class="gw-mobile-menu__list">
+            <li><a class="gw-mobile-menu__link" href="index.html#components-h">Components</a></li>
+            <li><a class="gw-mobile-menu__link" href="index.html#features-h">Sections</a></li>
+            <li><a class="gw-mobile-menu__link" href="#profiles">All three profiles</a></li>
+          </ul>
+        </details>
+        <a class="gw-mobile-menu__top" href="index.html">Default demo</a>
+        <a class="gw-mobile-menu__top" href="theme-example.html">Accent only</a>
+        <div class="gw-mobile-menu__actions">
+          <a class="gw-btn gw-btn--block" href="#profiles">See the profiles</a>
+          <a class="gw-btn gw-btn--secondary gw-btn--block" href="index.html">Default demo</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main">
+    <section class="gw-hero" aria-labelledby="hero-h">
+      <div class="gw-hero__wash" aria-hidden="true"></div>
+      <div class="gw-wrap">
+        <p class="gw-label">Brand profiles</p>
+        <h1 id="hero-h"><span class="gw-dim">The same kit, three named choices.</span> Still one family.</h1>
+        <p class="gw-lead">This brand fills its primary button with its accent, rounds its corners one step and floats its header as a card. Everything else is the kit as it ships.</p>
+        <div class="gw-actions">
+          <a class="gw-btn" href="#profiles">See the three profiles</a>
+          <a class="gw-btn gw-btn--secondary" href="index.html">Open the default demo</a>
+        </div>
+      </div>
+    </section>
+
+    <section class="gw-section gw-section--soft" id="profiles" aria-labelledby="profiles-h">
+      <div class="gw-wrap">
+        <div class="gw-section__head">
+          <p class="gw-label">Three knobs</p>
+          <h2 id="profiles-h"><span class="gw-dim">Set once for the site.</span> Every component follows.</h2>
+          <p class="gw-lead">Each knob is a named profile, not a free value. A brand picks one of each, and the kit does the rest.</p>
+        </div>
+        <div class="gw-grid--3">
+          <div class="gw-card">
+            <h3>Action colour</h3>
+            <p>The primary button takes the accent. Its label must reach 4.5:1 on the fill in light and dark, or the check fails.</p>
+          </div>
+          <div class="gw-card">
+            <h3>Soft corners</h3>
+            <p>Actions 12px, cards 20px, panels 24px. Chips stay pills, and nothing else is allowed in between.</p>
+          </div>
+          <div class="gw-card">
+            <h3>Floating header</h3>
+            <p>An inset card over a light blur, from 1080px. The same bar and mega menu; phones keep the flat bar.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="gw-section" aria-labelledby="shapes-h">
+      <div class="gw-wrap gw-split">
+        <div>
+          <p class="gw-label">Radius profiles</p>
+          <h2 id="shapes-h">Two sets of corners, nothing in between.</h2>
+          <p class="gw-lead">Tight is the default. Soft rounds every action, card and panel by one step.</p>
+          <div class="gw-actions">
+            <button class="gw-chip" type="button" aria-pressed="false">Tight</button>
+            <button class="gw-chip" type="button" aria-pressed="true">Soft</button>
+            <span class="gw-badge gw-badge--accent">Chosen on the page</span>
+          </div>
+          <div class="gw-actions">
+            <a class="gw-btn" href="#rules-h">See what stays fixed</a>
+            <a class="gw-btn gw-btn--ghost" href="theme-example.html">Accent only</a>
+          </div>
+        </div>
+        <div class="gw-table" role="region" aria-labelledby="shapes-h" tabindex="0">
+          <table>
+            <thead><tr><th scope="col">Profile</th><th scope="col">Action</th><th scope="col">Card</th><th scope="col">Panel</th></tr></thead>
+            <tbody>
+              <tr><th scope="row">Tight, the default</th><td>8px</td><td>12px</td><td>16px</td></tr>
+              <tr><th scope="row">Soft</th><td>12px</td><td>20px</td><td>24px</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+
+    <section class="gw-section gw-section--soft" aria-labelledby="rules-h">
+      <div class="gw-wrap gw-wrap--narrow">
+        <div class="gw-section__head">
+          <p class="gw-label">Still fixed</p>
+          <h2 id="rules-h"><span class="gw-dim">Three knobs, no more.</span> The rest is the kit's.</h2>
+        </div>
+        <div class="gw-faq">
+          <details class="gw-faq__item"><summary>Can a brand choose its own radius?</summary><p>No. It picks tight or soft. A radius of its own, or a token it redefines, is reported by the check.</p></details>
+          <details class="gw-faq__item"><summary>Can a heading use the accent?</summary><p>No. Words in a heading stay ink or muted, never the accent or a gradient. Bands are white, soft grey or night, never the accent. Labels stay in sentence case.</p></details>
+          <details class="gw-faq__item"><summary>What changes on a phone?</summary><p>Nothing. Below 1080px the floating header is the flat bar, and the menu opens the same way.</p></details>
+          <details class="gw-faq__item"><summary>What if a visitor turns transparency off?</summary><p>The header becomes a solid card. A browser that cannot blur gets the same solid card.</p></details>
+        </div>
+      </div>
+    </section>
+
+    <section class="gw-section gw-band--night" aria-labelledby="cta-h">
+      <div class="gw-wrap gw-cta">
+        <p class="gw-label">Night band</p>
+        <h2 id="cta-h">The accent button keeps its contrast at night.</h2>
+        <p class="gw-lead">In a night band and in dark mode it takes the dark accent with dark words, also checked at 4.5:1.</p>
+        <div class="gw-actions">
+          <a class="gw-btn" href="theme-example.html">Open the accent example</a>
+          <a class="gw-btn gw-btn--secondary" href="index.html">Open the default demo</a>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="gw-footer">
+    <div class="gw-wrap">
+      <div class="gw-footer__bottom">
+        <span>Website UI kit demo. Sample text.</span>
+        <ul aria-label="Demo pages">
+          <li><a href="index.html">Default demo</a></li>
+          <li><a href="theme-example.html">Accent only</a></li>
+        </ul>
+      </div>
+    </div>
+  </footer>
+
+  <script src="../js/website.js" defer></script>
+</body>
+</html>

package/docs/components.md

@@ -8,6 +8,10 @@ Conventions: kit classes start with `gw-`, variants are `--name`, parts are `__n
 `is-*`. Never style a `.gw-*` class in your site's CSS: if the kit's version is wrong for you, that is a gap
 (`AGENTS.md` section 9).
 
+Radii and the button fill follow the site's brand profiles (`docs/theming.md`): below, "radius 8 / 12 / 16" is the
+default `tight` profile, and `soft` makes them 12 / 20 / 24; "ink fill" is the default `ink` action profile, and
+`data-gw-action="accent"` makes it the accent.
+
 Spacing between the children of text blocks is automatic: inside `.gw-section__head`, the hero, a split column,
 `.gw-cta`, `.gw-card`, `.gw-feature` and `.gw-plan`, each child is 16px below the previous one, a `.gw-actions` row
 32px, a `.gw-list--check` 24px. Do not add margins to fix rhythm; reorder or remove content instead.
@@ -28,6 +32,30 @@ Spacing between the children of text blocks is automatic: inside `.gw-section__h
 
 Don't remove the skip link, and don't leave out `id="main"`.
 
+## Script
+
+`js/website.js` (a `<script defer>`) or `js/website.mjs` (an `import`) wires every part that moves: the mega menu,
+the mobile menu, the theme toggle, reveal, the header's scroll state, the current page, the segmented control and
+the busy button. Markup that arrives after the page loaded (a client-side route change, a builder block, a CMS
+preview) is wired by calling `init` on it, as often as needed: an element is wired once.
+
+```js
+// a page with the classic script, after it inserted kit markup
+slot.innerHTML = html;
+gwWebsite.init(slot);
+```
+
+```js
+// an app: import the ESM entry, call init() in an effect after each route change
+import { init } from '@gemboss/website-ui/website.mjs';
+```
+
+`destroy(root)` takes it back when a framework unmounts. The Next.js recipe, the `data-gw-ready` mark and the
+events (`gw:mega`, `gw:theme`, `gw:segmented`) are in `docs/markup-contract.md`, "Script".
+
+Don't: wire a kit part with your own script (a click handler on a trigger, a class toggled by hand), or load two
+copies of the script and expect both to work (the first owns the page).
+
 ## Type and text
 
 | class | for |
@@ -86,7 +114,8 @@ Don't: more than three night bands on a page (the closing CTA does not count), o
 
 ### Buttons `.gw-btn`
 
-40px tall, radius 8, 14px/600, sentence case, ink fill. Variants: `--secondary` (hairline, transparent), `--ghost`
+40px tall, the action radius (8, 12 in `soft`), 14px/600, sentence case, the action colour as fill: ink, or the
+brand's accent with `--gw-on-accent` words under `data-gw-action="accent"` (one colour on the whole site). Variants: `--secondary` (hairline, transparent), `--ghost`
 (no frame), `--on-night` (light fill for a dark surface that is not a `.gw-band--night`), `--sm` (36px, with a 44px
 hit area), `--lg` (48px, 16px type), `--block` (full width). On touch screens every button is at least 44px tall and
 its label may wrap. Inside a night band the default button turns light by itself.
@@ -98,7 +127,8 @@ its label may wrap. Inside a night band the default button turns light by itself
 </div>
 ```
 
-Pressed (`:active`): the ink one step darker (the hover ink), and nothing moves; `--secondary` takes the soft tint and
+Pressed (`:active`): the fill one step stronger (the hover fill: the darker ink, or `--gw-accent-strong`), and
+nothing moves; `--secondary` takes the soft tint and
 `--ghost` the hairline tint.
 
 **Loading.** While a `<button>` waits on the network (a form sent, an audit started), set `aria-busy="true"` on it and
@@ -116,7 +146,8 @@ button.setAttribute('aria-busy', 'true');   // the request leaves
 button.removeAttribute('aria-busy');        // the answer came
 ```
 
-Don't: an accent, gradient or wash fill; pill-shaped buttons; uppercase; two filled buttons side by side (one
+Don't: a fill of your own (the accent comes only from the action profile, set on `<html>`), a gradient or a wash; a
+raised or inset shadow; pill-shaped buttons; uppercase; two filled buttons side by side (one
 `.gw-btn` per view, the second is `--secondary` or a link); a `<div>` with a click handler instead of `<a>`/`<button>`;
 a loading class, your own spinner or `disabled` on a waiting button (`check` reports `busy-button`: `disabled` throws
 the keyboard focus to the top of the page); a "Loading…" label in place of the real one.
@@ -136,7 +167,7 @@ Don't: use a chip as the page's action; square it; more than about six in a row.
 
 One choice out of two to four, shown as one group: Monthly / Yearly on a pricing page, Run it yourself / We run it for
 you. It is a radio group: one Tab stop, the arrow keys (and Home, End) move and choose, a click or Space chooses. The
-look is the dashboard's (`@gemboss/ui` `.ui-seg`): one hairline group, radius 8, a hairline between options, the chosen
+look is the dashboard's (`@gemboss/ui` `.ui-seg`): one hairline group, the action radius, a hairline between options, the chosen
 option on the accent tint, so it follows a brand's accent. 40px tall; on touch screens every option is at least 44px
 and its label may wrap. `--block` stretches it to the row and shares the width equally.
 
@@ -176,7 +207,7 @@ Don't: make a badge clickable; write a sentence in it; use success or warning fo
 
 ### Cards `.gw-card`
 
-A white box with a 1px hairline, radius 12, the resting shadow `--gw-shadow` (as the dashboard's cards), 24px padding
+A white box with a 1px hairline, the card radius (12, 20 in `soft`), the resting shadow `--gw-shadow` (as the dashboard's cards), 24px padding
 (32px from 768px). It sits: no hover lift. `--soft` is a tint and has no shadow.
 Variants: `--soft` (on `--gw-bg-soft`), `--link` (the whole card is one `<a>`; the border darkens on hover).
 
@@ -188,8 +219,8 @@ Variants: `--soft` (on `--gw-bg-soft`), `--link` (the whole card is one `<a>`; t
 </a>
 ```
 
-Don't: put links or buttons inside a `--link` card (one card, one destination); a bigger shadow or a hover lift; radius
-other than 12 (16 is for large panels: plans, quote).
+Don't: put links or buttons inside a `--link` card (one card, one destination); a bigger shadow or a hover lift; a
+radius of your own (cards take the card radius, plans and the quote the panel radius, both from the profile).
 
 ### Window `.gw-window`
 
@@ -238,7 +269,7 @@ Don't: more than five or six items; full paragraphs as items.
 
 ### Table `.gw-table`
 
-A wrapper around a plain `<table>`: hairline, radius 12, and it scrolls inside its own box when the table is wider
+A wrapper around a plain `<table>`: hairline, the card radius, and it scrolls inside its own box when the table is wider
 than the screen. `--compare`: centred values, a 640px minimum width and a sticky first column, for plan comparisons.
 Give the wrapper `role="region"`, an accessible name and `tabindex="0"` so keyboard users can scroll it.
 
@@ -275,10 +306,11 @@ Don't: hide content a reader needs to decide (prices, terms) only inside a close
 |---|---|
 | `.gw-announce` | optional one-sentence bar above the header, with one link |
 | `.gw-header` (`data-gw-header`) | the sticky, flat 64px bar with one hairline; `.is-scrolled` darkens the hairline |
+| `.gw-header--float` | with `.gw-header`, a brand's header profile: from 1080px the same bar as an inset card (panel radius, the surface at 85% over a blur, one hairline, the raised shadow, 16px from the top); the flat bar below 1080px; solid under `prefers-reduced-transparency` |
 | `.gw-header__bar` | the row inside (`.gw-wrap gw-header__bar`) |
 | `.gw-brand`, `__mark`, `__name` | logo (26px) and name, linking home |
 | `.gw-nav`, `__list`, `__item`, `__trigger`, `__link` | the desktop nav (from 1080px); `__trigger` opens a mega panel, `__link` is a plain link; `aria-current="page"` underlines it in the accent |
-| `.gw-mega`, `__grid`, `__col`, `__heading`, `__link`, `__icon`, `__feature` | a floating card centred under the bar (radius 20, raised shadow, as on gemboss.ai): columns of links with an icon and one line each, and at most one feature card |
+| `.gw-mega`, `__grid`, `__col`, `__heading`, `__link`, `__icon`, `__feature` | a floating card centred under the bar (the popover radius: 20, 24 in `soft`; raised shadow, as on gemboss.ai): columns of links with an icon and one line each, and at most one feature card |
 | `.gw-header__actions` | theme toggle, Sign in, Book a demo, Start free, menu button |
 | `.gw-header__signin` | with `.gw-nav__link`: hidden below 1080px (it moves into the mobile menu) |
 | `.gw-theme-toggle` | icon button (`data-gw-theme-toggle`), 40px, 44px on touch |
@@ -292,7 +324,8 @@ Don't: hide content a reader needs to decide (prices, terms) only inside a close
 Header buttons: the secondary one shows from 768px, the primary one from 480px; below that they live in the mobile
 menu. Full markup: `templates/header.html`.
 
-Don't: a floating, rounded or blurred header; more than five top-level items; a second filled button in the bar; a
+Don't: a floating, rounded or blurred header of your own (the one floating header is `.gw-header--float`, chosen
+for the whole site); more than five top-level items; a second filled button in the bar; a
 hero pulled up under the header.
 
 ## Footer
@@ -361,7 +394,7 @@ The HTML a CMS or a markdown renderer writes needs no classes. Inside `.gw-prose
 | `code` | a tint chip in `--gw-font-mono` (16px, 14px in `--sm`) that wraps on a phone; in a table it stays whole |
 | `pre` | a soft box, 14px mono, that scrolls sideways inside itself |
 | `table` | as a direct child: the `.gw-table` look, and it scrolls inside its own box when it is wider than the column |
-| `img`, `figure`, `figcaption` | images radius 12; a caption 14px muted, 12px under its figure |
+| `img`, `figure`, `figcaption` | images take the card radius; a caption 14px muted, 12px under its figure |
 | `hr`, `a` | a hairline with 32px of air; links in the accent, underlined |
 
 Kit components inside the prose keep their own look (`.gw-table`, `.gw-window`, `.gw-list--check`, `.gw-quote`,
@@ -394,6 +427,18 @@ them in order); a page without `.gw-prose` that styles its articles in site CSS
 Put it on a block (a grid, a list, a window), not on each card in a grid. Don't use it on the hero or anything in
 the first screen, and don't animate anything but `transform` and `opacity`.
 
+## Additions to the markup contract in 0.4.0
+
+The script: `init(root)` and `destroy(root)` (`window.gwWebsite`, or `js/website.mjs`), the `data-gw-ready` mark on
+what it wired, and the events `gw:mega` (`{ id, open }`) and `gw:theme` (`{ theme }`) next to `gw:segmented`. No
+markup or class of 0.3.0 changes.
+
+## Additions to the markup contract in 0.3.0
+
+The brand profiles: `data-gw-action="ink|accent"` and `data-gw-radius="tight|soft"` on `<html>`, and
+`.gw-header--float` on the header (`docs/theming.md`). Tokens: `--gw-radius-popover` (the mega menu), `--gw-radius-24`,
+`--gw-header-gap`, `--gw-header-surface`, `--gw-header-blur`. No markup of 0.2.0 changes.
+
 ## Additions to the markup contract in 0.2.0
 
 The button states (`:active`, `[aria-busy="true"]`), `.gw-segmented` (+ `--block`) with its `data-gw-segmented` /