@gemboss/website-ui 0.2.0 → 0.4.0

package/js/website.mjs

@@ -0,0 +1,269 @@
+/*! @gemboss/website-ui website.mjs | spec: docs/markup-contract.md */
+// The ESM entry: import { init, destroy, version } from '@gemboss/website-ui/website.mjs'. Importing it does nothing;
+// call init() once the markup is in the page, and again after every route change or insert. No dependencies.
+//
+// js/website.js, the classic script, is GENERATED from this file by scripts/build.mjs (this code in an IIFE, without
+// the export line and the // comments, plus auto-init): edit this file, then run the build. Keep comments on lines of
+// their own, so the build can leave them out.
+
+var version = '0.4.0';
+var api = { version: version, init: init, destroy: destroy };
+// Page state. Set up by the first init(), never at import: a server can import this file.
+var doc, root, mine, fine, sys, live = [], megaOpen = null, megaTimer = 0, queued = false;
+var READY = 'data-gw-ready';
+
+function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
+function watch(m, fn) { if (m.addEventListener) m.addEventListener('change', fn); }
+function all(sel, ctx) { return [].slice.call((ctx || doc).querySelectorAll(sel)); }
+// Like all(), and ctx itself when it matches: init(header) wires the header it is given.
+function within(sel, ctx) { var l = all(sel, ctx); if (ctx.matches && ctx.matches(sel)) l.unshift(ctx); return l; }
+function on(el, type, fn, opt) { el.addEventListener(type, fn, opt || false); }
+function attr(el, name, dflt) { return el.getAttribute(name) || dflt; }
+function esc(e) { return e.key === 'Escape'; }
+function link(e) { return e.target.closest('a[href]'); }
+function emit(el, type, detail) { if (window.CustomEvent) el.dispatchEvent(new CustomEvent(type, { bubbles: true, detail: detail })); }
+
+// Wiring. Each element under ctx that matches sel is wired once as `kind`: fn(el, on) adds the element's listeners
+// with the `on` it is given (so destroy can remove them) and returns a record, or nothing when the element cannot be
+// wired yet (the next init tries again). Records live in `live`. data-gw-ready lists the kinds wired on an element;
+// the record, not the attribute, decides, so markup copied from a live page, attribute and all, is still wired.
+function each(ctx, sel, kind, fn) {
+  within(sel, ctx).forEach(function (el) {
+    if (live.some(function (r) { return r.el === el && r.kind === kind; })) return;
+    var offs = [], r = fn(el, function (t, type, f, opt) {
+      on(t, type, f, opt);
+      offs.push(function () { t.removeEventListener(type, f, opt || false); });
+    });
+    if (!r) return offs.forEach(function (f) { f(); });
+    r.el = el; r.kind = kind; r.offs = offs;
+    mark(el, kind, true);
+    live.push(r);
+  });
+}
+function mark(el, kind, add) {
+  var l = attr(el, READY, '').split(' ').filter(function (k) { return k && k !== kind; });
+  if (add) l.push(kind);
+  if (l.length) el.setAttribute(READY, l.join(' ')); else el.removeAttribute(READY);
+}
+function drop(r) {
+  if (r.stop) r.stop();
+  r.offs.forEach(function (f) { f(); });
+  mark(r.el, r.kind);
+  live.splice(live.indexOf(r), 1);
+}
+function records(kind, fn) { live.slice().forEach(function (r) { if (r.kind === kind) fn(r); }); }
+
+// Mega menu. Opened by hover then clicked, a panel stays open: the click meant "open". One open on the page, across
+// every header init() wired. Each change fires gw:mega on the trigger.
+function setMega(m, show, mode) {
+  m.p.hidden = !show;
+  m.t.setAttribute('aria-expanded', String(show));
+  m.item.classList.toggle('is-open', show);
+  m.mode = mode;
+  megaOpen = show ? m : megaOpen === m ? null : megaOpen;
+  emit(m.t, 'gw:mega', { id: m.p.id, open: show });
+}
+function showMega(m, mode) {
+  clearTimeout(megaTimer);
+  if (megaOpen === m) { if (mode === 'click') m.mode = mode; return; }
+  if (megaOpen) setMega(megaOpen, false);
+  setMega(m, true, mode);
+}
+function hideMega(focus) {
+  var m = megaOpen;
+  clearTimeout(megaTimer);
+  if (!m) return;
+  setMega(m, false);
+  if (focus === true) m.t.focus();
+}
+function inside(m, el) { return !!el && (m.item.contains(el) || m.p.contains(el)); }
+function mega(ctx) {
+  each(ctx, '[data-gw-mega]', 'mega', function (t, on) {
+    var p = doc.getElementById(attr(t, 'data-gw-mega', attr(t, 'aria-controls', '')));
+    if (!p) return;
+    var m = { t: t, p: p, item: t.closest('.gw-nav__item') || t.parentNode };
+    on(t, 'click', function () { if (megaOpen === m && m.mode !== 'hover') hideMega(); else showMega(m, 'click'); });
+    (m.item.contains(p) ? [m.item] : [m.item, p]).forEach(function (el) {
+      on(el, 'mouseenter', function () {
+        if (fine.matches) { clearTimeout(megaTimer); if (megaOpen !== m) megaTimer = setTimeout(function () { showMega(m, 'hover'); }, 80); }
+      });
+      on(el, 'mouseleave', function () {
+        if (fine.matches) { clearTimeout(megaTimer); if (megaOpen === m && m.mode === 'hover') megaTimer = setTimeout(hideMega, 160); }
+      });
+    });
+    on(m.item, 'focusout', function (e) { if (megaOpen === m && e.relatedTarget && !inside(m, e.relatedTarget)) hideMega(); });
+    on(p, 'click', function (e) { if (link(e)) hideMega(); });
+    m.stop = function () { if (megaOpen === m) hideMega(); };
+    return m;
+  });
+}
+
+// Mobile menu. Labels: data-gw-label-open/-close, else the markup's aria-label, else English. A link inside closes it
+// (same-page anchors do not reload). Taken back while open, it closes first: it must not keep the page locked.
+function mobile(ctx) {
+  each(ctx, '[data-gw-menu-toggle]', 'menu', function (btn, on) {
+    var menu = doc.getElementById(attr(btn, 'aria-controls', 'gw-mobile-menu'));
+    if (!menu) return;
+    var label = [attr(btn, 'data-gw-label-open', attr(btn, 'aria-label', 'Open menu')), attr(btn, 'data-gw-label-close', 'Close menu')];
+    var r = {
+      open: function () { return !menu.hidden; },
+      set: function (o, focus) {
+        menu.hidden = !o;
+        btn.setAttribute('aria-expanded', String(o));
+        btn.setAttribute('aria-label', label[+o]);
+        root.classList.toggle('is-menu-open', o);
+        if (focus) btn.focus();
+      },
+      stop: function () { if (r.open()) r.set(false); }
+    };
+    on(btn, 'click', function () { r.set(!r.open()); });
+    on(menu, 'click', function (e) { if (link(e)) r.set(false); });
+    return r;
+  });
+}
+function closeMenus(focus) { records('menu', function (r) { if (r.open()) r.set(false, focus); }); }
+
+// Theme toggle. Labels: data-gw-label-dark/-light, else the markup's aria-label, else English. A press fires gw:theme
+// on <html>; so does a change of the system's scheme while the page follows it.
+function dark() { var t = root.getAttribute('data-theme'); return t ? t === 'dark' : sys.matches; }
+function relabel() { records('theme', function (r) { r.el.setAttribute('aria-label', r.labels[+dark()]); }); }
+function theme(ctx) {
+  each(ctx, '[data-gw-theme-toggle]', 'theme', function (b, on) {
+    var r = { labels: [attr(b, 'data-gw-label-dark', attr(b, 'aria-label', 'Switch to dark theme')), attr(b, 'data-gw-label-light', 'Switch to light theme')] };
+    on(b, 'click', function () {
+      var next = dark() ? 'light' : 'dark';
+      root.setAttribute('data-theme', next);
+      try { localStorage.setItem('gw-theme', next); } catch (e) { /* blocked */ }
+      relabel();
+      emit(root, 'gw:theme', { theme: next });
+    });
+    // taken back: the markup's own label again, so a later init reads the same words
+    r.stop = function () { b.setAttribute('aria-label', r.labels[0]); };
+    return r;
+  });
+  relabel();
+}
+
+// Reveal at 15% visible, once. Failsafe: shown 2.5s after the init that found them, or at once without
+// IntersectionObserver or under reduced motion.
+function reveal(ctx) {
+  var els = [], io = null;
+  each(ctx, '.gw-reveal', 'reveal', function (el) { els.push(el); return { stop: function () { if (io) io.unobserve(el); } }; });
+  function showAll() { els.forEach(function (el) { el.classList.add('is-in'); }); if (io) io.disconnect(); }
+  if (!els.length) return;
+  if (!window.IntersectionObserver || mq('(prefers-reduced-motion: reduce)').matches) return showAll();
+  io = new IntersectionObserver(function (list) {
+    list.forEach(function (en) { if (en.isIntersecting) { en.target.classList.add('is-in'); io.unobserve(en.target); } });
+  }, { threshold: 0.15 });
+  els.forEach(function (el) { io.observe(el); });
+  setTimeout(showAll, 2500);
+}
+
+// Header: .is-scrolled past 8px, read once per frame (one scroll listener for every header).
+function scrolled() {
+  var s = window.scrollY > 8;
+  queued = false;
+  records('header', function (r) { if (r.s !== s) r.el.classList.toggle('is-scrolled', (r.s = s)); });
+}
+function header(ctx) {
+  each(ctx, '[data-gw-header]', 'header', function (h) { return { s: false, stop: function () { h.classList.remove('is-scrolled'); } }; });
+  scrolled();
+}
+
+// aria-current="page" on nav links to this path, unless the markup marked one. The script's own marks are taken
+// back first, so an init() after a client-side navigation moves them.
+function current(ctx) {
+  var links = within('.gw-nav__link[href], .gw-mega__link[href]', ctx);
+  within('#gw-mobile-menu, .gw-mobile-menu', ctx).forEach(function (m) { links = links.concat(all('a[href]', m)); });
+  function norm(p) { return p.replace(/\/index\.html?$/, '/').replace(/\.html?$/, '').replace(/\/+$/, '') || '/'; }
+  links.forEach(function (a) { if (mine.has(a)) { mine.delete(a); a.removeAttribute('aria-current'); } });
+  if (links.some(function (a) { return a.hasAttribute('aria-current'); })) return;
+  links.forEach(function (a) {
+    if (a.classList.contains('gw-btn') || a.hash || a.host !== location.host) return;
+    if (norm(a.pathname) === norm(location.pathname)) { a.setAttribute('aria-current', 'page'); mine.add(a); }
+  });
+}
+
+// Segmented control: a radio group, one Tab stop; arrows (Home, End) move and choose. What one option shows carries
+// data-gw-show="group:value" and is hidden unless that option is chosen; without the script the markup's own choice
+// shows. A choice made by the reader fires gw:segmented on the group; wiring it does not.
+function segmented(ctx) {
+  each(ctx, '[data-gw-segmented]', 'segmented', function (g, on) {
+    var name = attr(g, 'data-gw-segmented', ''), opts = all('[role="radio"]', g);
+    if (!opts.length) return;
+    function pick(o, focus, said) {
+      var v = attr(o, 'value', '');
+      opts.forEach(function (x) { x.setAttribute('aria-checked', String(x === o)); x.setAttribute('tabindex', x === o ? '0' : '-1'); });
+      if (focus) o.focus();
+      all('[data-gw-show]').forEach(function (el) {
+        var own = attr(el, 'data-gw-show', '').split(/\s+/).filter(function (t) { return t.split(':')[0] === name; });
+        if (own.length) el.hidden = own.indexOf(name + ':' + v) < 0;
+      });
+      if (said) emit(g, 'gw:segmented', { name: name, value: v });
+    }
+    opts.forEach(function (o, i) {
+      on(o, 'click', function () { pick(o, false, true); });
+      on(o, 'keydown', function (e) {
+        var n = opts.length, k = { ArrowRight: i + 1, ArrowDown: i + 1, ArrowLeft: i - 1 + n, ArrowUp: i - 1 + n, Home: 0, End: n - 1 }[e.key];
+        if (k === undefined || e.altKey || e.ctrlKey || e.metaKey) return;
+        e.preventDefault();
+        pick(opts[k % n], true, true);
+      });
+    });
+    pick(opts.filter(function (o) { return attr(o, 'aria-checked', '') === 'true'; })[0] || opts[0]);
+    return {};
+  });
+}
+
+// Once per page: what belongs to the document, the window or a media query rather than to one element.
+function install() {
+  doc = document; root = doc.documentElement; mine = new WeakSet();
+  fine = mq('(hover: hover) and (pointer: fine)'); sys = mq('(prefers-color-scheme: dark)');
+  var wide = mq('(min-width: 1080px)'), stored = null;
+  on(doc, 'click', function (e) { if (megaOpen && !inside(megaOpen, e.target)) hideMega(); });
+  on(doc, 'keydown', function (e) { if (megaOpen && esc(e)) hideMega(inside(megaOpen, doc.activeElement) || megaOpen.mode === 'click'); });
+  on(doc, 'keydown', function (e) { if (esc(e)) closeMenus(true); });
+  watch(wide, function () { if (wide.matches) closeMenus(); });
+  on(window, 'pageshow', function (e) { if (e.persisted) closeMenus(); });
+  try { stored = localStorage.getItem('gw-theme'); } catch (e) { /* blocked */ }
+  if (!root.hasAttribute('data-theme') && /^(light|dark)$/.test(stored)) root.setAttribute('data-theme', stored);
+  watch(sys, function () { relabel(); if (!root.hasAttribute('data-theme')) emit(root, 'gw:theme', { theme: dark() ? 'dark' : 'light' }); });
+  on(window, 'scroll', function () { if (!queued) { queued = true; requestAnimationFrame(scrolled); } }, { passive: true });
+  // A busy button (aria-busy="true") ignores presses, by mouse or keyboard: no double submit. It keeps its focus and
+  // name. One listener on the document, in the capture phase, so it covers buttons inserted later too.
+  on(doc, 'click', function (e) {
+    var b = e.target.closest && e.target.closest('.gw-btn[aria-busy="true"]');
+    if (b) { e.preventDefault(); e.stopPropagation(); }
+  }, true);
+}
+
+function run(fns, ctx) {
+  fns.forEach(function (f) { try { f(ctx); } catch (e) { console.error('[gw-website]', e); } });
+}
+// One copy of the kit owns a page (window.gwWebsite). When another one got there first (the classic script, a second
+// bundle), it does the work, so nothing is wired twice.
+function other() { var g = typeof window != 'undefined' && window.gwWebsite; return g && g !== api && g; }
+
+/** Wires the kit's markup under root (default: the whole document). Safe to call again: wires only what is new. */
+function init(ctx) {
+  // server rendering: nothing to wire
+  if (typeof document == 'undefined') return;
+  var g = other();
+  if (g) return g.init && g.init(ctx);
+  window.gwWebsite = api;
+  if (!doc) run([install]);
+  // an element removed from the page since the last init is let go
+  live.slice().forEach(function (r) { if (r.el.isConnected === false) drop(r); });
+  run([mega, mobile, theme, reveal, header, current, segmented], ctx && ctx.querySelectorAll ? ctx : doc);
+}
+
+/** Takes back what init() wired under root (default: the whole document): listeners and data-gw-ready marks. */
+function destroy(ctx) {
+  var g = other();
+  if (g) return g.destroy && g.destroy(ctx);
+  if (!doc) return;
+  ctx = ctx && ctx.querySelectorAll ? ctx : doc;
+  live.slice().forEach(function (r) { if (ctx === doc || ctx.contains(r.el)) drop(r); });
+}
+
+export { version, init, destroy };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/website-ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "The GemBoss website kit: tokens, header, footer, sections and the rules (AGENTS.md) that GemCommerce public websites share, plus a CLI that checks a site, reports kit gaps and upgrades.",
   "license": "UNLICENSED",
   "type": "module",
@@ -23,6 +23,7 @@
     "./website.css": "./website.css",
     "./website.min.css": "./website.min.css",
     "./website.js": "./js/website.js",
+    "./website.mjs": "./js/website.mjs",
     "./system.json": "./system.json",
     "./css/*": "./css/*",
     "./package.json": "./package.json"

package/skill/SKILL.md

@@ -20,7 +20,11 @@ the kit and its rules are how the page ends up looking designed. Compose from th
    - Changed page: keep its kit classes; change words, order and choice of sections.
    - Site CSS only for what the kit cannot know (an illustration, a product mock-up), with the kit's tokens and
      scales, classes in the site's own prefix. Never style a `.gw-*` class, never edit `node_modules`.
-   - Another brand: change only the accent family, wash hues, logo and favicon (`KIT/docs/theming.md`).
+   - No JS of your own for kit parts: markup inserted after load (a route change, a block) gets
+     `gwWebsite.init(root)`, or `init(root)` from `website.mjs` (`KIT/docs/markup-contract.md`, "Script").
+   - Another brand: choose only the accent family, wash hues, logo and favicon, and the three named profiles
+     (`data-gw-action` and `data-gw-radius` on `<html>`, `.gw-header--float`), never free values
+     (`KIT/docs/theming.md`).
 4. **Words**: real facts only. A missing price, number, name or date becomes a visible `[PLACEHOLDER]` and a
    question to the person. Made-up numbers in a drawn mock-up get `<p class="gw-window__caption">Illustrative
    data.</p>` in its window. No em dash in visible text, no "Learn more" as a whole link.

package/system.json

@@ -1,6 +1,6 @@
 {
   "$comment": "The GemBoss website system in one file. css/tokens.css, the docs and `gemboss-website check` all read these values: change a value here, never in one of them alone. Values measured on gemboss.ai and the GemBoss dashboard (DESIGN-LANGUAGE.md of gemboss-www, 15/10/2026).",
-  "version": 1,
+  "version": 2,
   "color": {
     "light": {
       "bg": "#ffffff",
@@ -58,18 +58,16 @@
       "mint": "#1fcf9f"
     },
     "roles": {
-      "action": "The thing you click. Ink, not the accent.",
-      "accent": "Links, focus rings, active state, a chart line, the 8px label square. Never a button fill, never body text.",
+      "action": "The thing you click: ink, or the brand's accent when the site chose the accent action profile (profiles.action).",
+      "accent": "Links, focus rings, active state, a chart line, the 8px label square; the primary button only through the accent action profile. Never body text, never words in a heading, never a section band.",
       "success/warning": "State only.",
       "wash": "The hero wash and illustrations only."
     }
   },
   "radius": {
-    "scale": [0, 4, 6, 8, 12, 16, 20, 999],
-    "action": 8,
+    "scale": [0, 4, 6, 8, 12, 16, 20, 24, 999],
     "chip": 999,
-    "card": 12,
-    "panel": 16
+    "$comment": "Chips stay pills in every profile. The radii of actions, cards, panels and popovers come from the site's radius profile (profiles.radius): components read --gw-radius-action|card|panel|popover, never a number."
   },
   "shadow": {
     "rest": "0 1px 2px rgba(31,30,29,.04), 0 2px 6px rgba(31,30,29,.06)",
@@ -112,6 +110,32 @@
     "button_height": 40,
     "tap_target_min": 44
   },
+  "profiles": {
+    "$comment": "A brand's three knobs (Chris 25/10/2026, issue #61): each one a named profile, chosen once per site, never free values. The first option is the default and needs no markup. A brand chooses these, its accent family, its wash hues and its logo, and nothing else (docs/theming.md); check reports an unknown name.",
+    "action": {
+      "$comment": "What fills the primary .gw-btn: data-gw-action on <html>. A mapping of roles, not a colour: accent fills the button with the brand's own accent family. The build (with the kit's colours) and check (with the brand's) require on-action to reach 4.5:1 on action and on action-hover, in light and in dark.",
+      "attribute": "data-gw-action",
+      "options": {
+        "ink": { "$comment": "GemBoss, as its dashboard: the thing you click is ink", "action": "action", "action-hover": "action-hover", "on-action": "on-action" },
+        "accent": { "$comment": "a brand whose product's primary buttons are its accent (GemPages)", "action": "accent", "action-hover": "accent-strong", "on-action": "on-accent" }
+      }
+    },
+    "radius": {
+      "$comment": "The shapes: data-gw-radius on <html>. popover is the mega menu, the one floating card under the bar.",
+      "attribute": "data-gw-radius",
+      "options": {
+        "tight": { "$comment": "GemBoss, as its dashboard", "action": 8, "card": 12, "panel": 16, "popover": 20 },
+        "soft": { "$comment": "GemPages (gempages.net measured 25/10/2026: buttons 12, cards 16 to 24, panels 24)", "action": 12, "card": 20, "panel": 24, "popover": 24 }
+      }
+    },
+    "header": {
+      "$comment": "The header's shape: a class next to gw-header on the <header>. float is an inset card from 1080px (the panel radius of the site's profile, the surface at `surface` percent over a `blur` px blur, one hairline, the raised shadow, `gap` px from the top); below 1080px, and so for the phone menu, it is the flat bar. Solid under prefers-reduced-transparency and where the browser cannot blur.",
+      "options": {
+        "flat": { "$comment": "a flat 64px bar with one hairline", "class": "gw-header" },
+        "float": { "class": "gw-header--float", "gap": 16, "surface": 85, "blur": 10 }
+      }
+    }
+  },
   "motion": {
     "properties": ["transform", "opacity"],
     "ease": "cubic-bezier(.22,1,.36,1)",

package/templates/header.html

@@ -1,6 +1,8 @@
 <!--
   Header: one per site, the same on every page. Keep it in one partial or component, never copied per page.
-  A flat 64px bar with one hairline. Below 1080px the nav and Sign in hide and the menu button opens #gw-mobile-menu,
+  A flat 64px bar with one hairline. A brand that chose the floating header adds one class to the <header>:
+  class="gw-header gw-header--float" (an inset card from 1080px, docs/theming.md); nothing else changes.
+  Below 1080px the nav and Sign in hide and the menu button opens #gw-mobile-menu,
   which repeats the same links. website.js runs the mega menus, the mobile menu and the theme toggle.
   Limits: at most five top-level items, one .gw-btn (the primary action), one .gw-btn--secondary. Each mega panel:
   two or three columns of four or five links, at most one feature card. The announcement bar is optional: one sentence.

package/templates/page.html

@@ -5,6 +5,8 @@
   then link the site's own CSS after the kit. Fill the header and footer once, in a shared partial.
   One <h1> per page (in the hero), sections in the order the page needs, then delete every unused part.
   Replace every [bracketed] placeholder. No lorem ipsum, no invented facts.
+  A brand other than GemBoss may add its profiles to <html>, once, here: data-gw-action="accent" (the primary button
+  takes the accent) and data-gw-radius="soft" (rounder corners). See docs/theming.md.
 -->
 <html lang="en">
 <head>

package/website.css

@@ -1,4 +1,4 @@
-/*! @gemboss/website-ui 0.2.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
+/*! @gemboss/website-ui 0.4.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
 /* @gemboss/website-ui tokens. GENERATED from system.json by scripts/build.mjs: do not edit by hand. */
 :root {
   color-scheme: light;
@@ -47,11 +47,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);
@@ -59,6 +61,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);
@@ -199,6 +204,20 @@
   --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;
+}
 
 /* base: reset, type, links, focus, skip link, reveal. Colours, radii and shadows only from tokens. */
 *, *::before, *::after { box-sizing: border-box; }
@@ -370,7 +389,9 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 
 /* components: buttons, links, chips, badges, cards, windows, icons, lists, tables, FAQ. */
 
-/* actions are rectangles: 40px, radius 8, 14px/600, sentence case, ink fill (never the accent) */
+/* actions are rectangles: 40px, the action radius of the site's profile (8, 12 in soft), 14px/600, sentence case.
+   The fill is the action colour: ink, or the brand's accent under data-gw-action="accent" (tokens.css). Never a
+   gradient, a wash hue or a shadow. */
 .gw-btn {
   position: relative;
   display: inline-flex;
@@ -434,7 +455,7 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 @media (prefers-reduced-motion: reduce) {
   .gw-btn[aria-busy="true"]::before {
     border: 0;
-    border-radius: 0;
+    border-radius: var(--gw-radius-0);
     background:
       radial-gradient(circle at 3px 50%, currentColor 1.5px, transparent 2px),
       radial-gradient(circle at 8px 50%, currentColor 1.5px, transparent 2px),
@@ -480,8 +501,8 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 }
 
 /* segmented control: one choice out of two to four (Monthly / Yearly), a radio group of buttons. The dashboard's look
-   (@gemboss/ui .ui-seg): one hairline group, radius 8, a hairline between options, the chosen one on the accent tint,
-   so it follows a brand's accent. The weight never changes with the choice: the labels do not move. */
+   (@gemboss/ui .ui-seg): one hairline group, the action radius, a hairline between options, the chosen one on the
+   accent tint, so it follows a brand's accent. The weight never changes with the choice: the labels do not move. */
 .gw-segmented {
   display: inline-flex;
   max-width: 100%;
@@ -540,8 +561,8 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 .gw-badge--success::before, .gw-badge--warning::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--gw-radius-chip); background: var(--gw-success); }
 .gw-badge--warning::before { background: var(--gw-warning); }
 
-/* cards sit: white, 1px hairline, radius 12, the dashboard's resting shadow (Chris 24/10/2026: one language with the
-   app); no hover lift. A soft card is a tint and carries no shadow. */
+/* cards sit: white, 1px hairline, the card radius of the site's profile (12, 20 in soft), the dashboard's resting
+   shadow (Chris 24/10/2026: one language with the app); no hover lift. A soft card is a tint and carries no shadow. */
 .gw-card {
   padding: 24px;
   border: 1px solid var(--gw-line);
@@ -694,7 +715,8 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 }
 
 /* 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);
@@ -778,9 +800,9 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
   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);
@@ -790,7 +812,7 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
   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);
 }
@@ -925,6 +947,37 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
   .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); }
+}
+
 /* footer: brand block, link columns, bottom row. One hairline on top, white like the page. */
 .gw-footer {
   padding-block: 64px 40px;
@@ -1214,7 +1267,8 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
 :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;
@@ -1242,7 +1296,7 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
   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),