@gemboss/website-ui 0.8.0 → 0.9.0

package/docs/components.md

@@ -36,7 +36,7 @@ Don't remove the skip link, and don't leave out `id="main"`.
 
 `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, the
-busy button, an article's contents list and the scroll box of its tables (0.5.0), the footer's folds (0.7.0), and the mobile menu's drill-down and the language switcher (0.8.0). Markup that arrives after the page loaded (a client-side route change, a builder block, a CMS
+busy button, an article's contents list and the scroll box of its tables (0.5.0), the footer's folds (0.7.0), the mobile menu's drill-down and the language switcher (0.8.0), and the spotlight (0.9.0). 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
@@ -833,6 +833,53 @@ not make public with the review; masonry or a carousel that moves by itself.
 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`.
 
+### Spotlight `data-gw-spot` (0.9.0)
+
+A soft light in the brand's accent that follows a mouse over a thing you click (Chris, 25/10/2026). Put
+`data-gw-spot` on the `<a href>` or the `<button>` itself, or on a card that holds exactly one of them, and nowhere
+else:
+
+| where | markup |
+|---|---|
+| a plan card (its one `.gw-btn` is the action) | `<div class="gw-plan" data-gw-spot>…<a class="gw-btn" href="/signup">…</a>…</div>` |
+| a link card | `<a class="gw-card gw-card--link" href="/mcp" data-gw-spot>…</a>` |
+| the mega menu's feature card (the Stage) | `<a class="gw-mega__feature" href="/engine" data-gw-spot>…</a>` |
+| the primary button of a night band | `<a class="gw-btn" href="/signup" data-gw-spot>Start free</a>` inside `.gw-band--night` |
+| an inner element only (the art of a card) | `<a class="gw-card gw-card--link" href="/engine" data-gw-spot=".gp-card-art"><span class="gp-card-art" aria-hidden="true"></span>…</a>` |
+
+What it does: on hover the light grows from where the pointer comes in (0.55s, an expo-out ease), then trails the
+pointer a little (18% of the way each frame) and goes out when it leaves. It sits under the words, in the element's own
+corners, and moves nothing. It is `--gw-accent` (22% on a card, 38% on a button, 40% on the Stage's night ground), the
+`-dark` family in dark mode and night bands, so another brand's page lights in its own accent by itself. While a thing
+is lit, its muted words read `--gw-ink-2`, so they keep 4.5:1 at the light's middle; they turn back once the light has
+gone. Nothing moves for it, and nothing in your markup changes.
+
+- Opt-in, element by element: a page without `data-gw-spot` does not change. Use it on the parts above, and more only
+  where it is a link or a button; one lit thing per card.
+- Pointer devices only: nothing changes on a phone or a tablet without a mouse.
+- Keyboard focus shows the same light in the middle, as large as on hover: on the focused link or button, and on a card
+  whose one action has the focus.
+- Reduced motion: the light stands still in the middle and appears at once (the muted words with it); the script
+  follows no pointer.
+- A browser without `@property` or `color-mix()` shows no light at all (nothing half drawn).
+- The script wires it like every other part (`data-gw-ready="spot"`, `init`/`destroy`) and puts `.gw-spot` on the
+  element that carries the light, with the pointer's place in `--gw-spot-x` and `--gw-spot-y`. No event. Its values are
+  tokens (`system.json` `motion.spot`: `--gw-spot-radius`, `-radius-action`, `-strength`, `-strength-action`,
+  `-strength-stage`, `-ms`, `-ease`).
+
+Don't: put it on a heading, a paragraph, a list of text or a section (`check` reports `spot-target`), or on a card
+with no action or with two; light words, or a heading, with a gradient or the accent (still forbidden: a heading
+that glows under the pointer was looked at and turned down); a light of more than one colour, or a colour of your own;
+write `.gw-spot` or `--gw-spot-*` yourself, or follow the pointer with your own script.
+
+## Additions to the markup contract in 0.9.0
+
+The spotlight: the `data-gw-spot` hook (empty, or a selector for an inner element), the script's `spot` part
+(`data-gw-ready="spot"`) and its `.gw-spot` class on the element that carries the light, with `--gw-spot-x` and
+`--gw-spot-y` on it. Tokens: `--gw-spot-radius`, `--gw-spot-radius-action`, `--gw-spot-strength`,
+`--gw-spot-strength-action`, `--gw-spot-strength-stage`, `--gw-spot-ms`, `--gw-spot-ease`. No event. No markup or
+class of 0.8.0 changes.
+
 ## Additions to the markup contract in 0.8.0
 
 The drill-down mobile menu: `data-gw-menu="drill"` on `.gw-mobile-menu`, `.gw-mobile-menu__head` (`__back`, `__title`),

package/docs/markup-contract.md

@@ -28,8 +28,8 @@ BEM-ish: `.gw-block`, `.gw-block__part`, `.gw-block--variant`.
 
 One script wires every part below: the mega menu, the mobile menu, the theme toggle, reveal, the header's scroll
 state, the current page, the segmented control, the busy button, an article's contents list and the scroll box of its
-prose tables (0.5.0), the footer's folds (0.7.0), and the mobile menu's drill-down and the language switcher (0.8.0).
-It comes in two entries built from one source
+prose tables (0.5.0), the footer's folds (0.7.0), the mobile menu's drill-down and the language switcher (0.8.0), and
+the spotlight (0.9.0). It comes in two entries built from one source
 (`js/website.mjs`; `scripts/build.mjs` writes `js/website.js` from it and `--check` fails when they differ):
 
 | entry | file | how it starts |
@@ -44,9 +44,9 @@ It comes in two entries built from one source
   to the page (Escape, the outside click, the busy-button guard, the system theme, the scroll) are installed once.
 - **`destroy(root = document)`** takes back what `init` wired under `root`: its listeners and its marks. An open
   mega menu or mobile menu is closed first, so an unmounted menu cannot leave the page locked.
-- **`version`**: `'0.8.0'`. The classic script exposes the three as `window.gwWebsite`.
+- **`version`**: `'0.9.0'`. The classic script exposes the three as `window.gwWebsite`.
 - **`data-gw-ready`**: on each wired element, the parts wired on it (`mega`, `menu`, `lang`, `theme`, `reveal`,
-  `header`, `segmented`, `toc`, `table`, `fold`). A drill-down menu is wired with its toggle (`menu`). It is a mark for people and tests, not a switch: markup copied from a live page, attribute and all,
+  `header`, `segmented`, `toc`, `table`, `fold`, `spot`). A drill-down menu is wired with its toggle (`menu`). It is a mark for people and tests, not a switch: markup copied from a live page, attribute and all,
   is still wired.
 - **One copy per page.** The first copy that runs owns the page (`window.gwWebsite`); another one (the classic
   script next to a bundle, two bundles) hands its calls to it, so nothing is wired twice.
@@ -412,6 +412,39 @@ CSS only: the script does not touch a form. The page (or its server) owns valida
   carry the same number (`stars-markup`), and a `.gw-rating-badge` or `.gw-testimonial` without an `<a href>`
   (`rating-source`, a warning).
 
+## Spotlight (0.9.0)
+
+```html
+<div class="gw-plan" data-gw-spot> … <a class="gw-btn" href="/signup">Start free</a> … </div>
+<a class="gw-card gw-card--link" href="/mcp" data-gw-spot> … </a>
+<a class="gw-mega__feature" href="/engine" data-gw-spot> … </a>
+<a class="gw-btn" href="/signup" data-gw-spot>Start free</a>                       <!-- inside .gw-band--night -->
+<a class="gw-card gw-card--link" href="/engine" data-gw-spot=".gp-card-art"> <span class="gp-card-art"></span> … </a>
+```
+
+- Markup: `data-gw-spot` on an `<a href>`, a `<button>`, or a `<div>`, `<article>` or `<li>` that holds exactly one
+  link or button. Empty, the host carries the light; a selector (`data-gw-spot=".gp-card-art"`) names the inner
+  element that carries it instead (the first match). Never a heading, as the host or as the selector's match. `check`
+  reports anything else (`spot-target`).
+- Script behaviour (`spot`): in a browser with `@property` and `color-mix()` (else nothing is wired), each host is
+  wired once (`data-gw-ready="spot"`), and the element that carries the light gets `.gw-spot` (kept on `destroy` when
+  the markup wrote it). On a fine pointer (`(hover: hover) and (pointer: fine)`) without reduced motion, and again on
+  every change of either, the host has a `pointerenter` and a `pointermove` listener: entering writes the pointer's
+  place at once, in px from the padding box of the element that carries the light, as `--gw-spot-x` and
+  `--gw-spot-y` on it; a move asks for one animation frame, and each frame moves the place 18% of the way to the
+  pointer until it is within 0.3px (`system.json` `motion.spot.trail`, `.settle`). A touch pointer is ignored.
+  `destroy` removes the listeners, cancels the frame, takes `.gw-spot` and the two properties away. No event.
+- CSS (`css/effects.css`, all of it under `(hover: hover) and (pointer: fine)`): the host's `--gw-spot-r` (a registered,
+  inherited length) is 0 at rest and `--gw-spot-radius` on hover, on `:focus-visible` and while a descendant has
+  `:focus-visible` (`--gw-spot-radius-action` on a `.gw-btn`); the `::before` of `.gw-spot` draws a radial gradient of
+  `--gw-accent` at that radius and place, under the words, with `border-radius: inherit`, and transitions the radius
+  (`--gw-spot-ms`, `--gw-spot-ease`). Keyboard focus and reduced motion put the light in the middle (on the
+  `::before`, so the script's place does not count); reduced motion also drops the transition. Not on a busy button
+  (its `::before` is the ring). While the host is lit (hover, `:focus-visible`, a descendant with `:focus-visible`) it
+  sets `--gw-muted: var(--gw-ink-2)`, so muted words inside it keep 4.5:1 at the light's middle; descendants take back
+  the muted colour only once the light has gone (`transition: color 0s` with the light's time as delay, in `:where()`,
+  so a part's own transition wins; none under reduced motion).
+
 ## Brand profiles (0.3.0)
 
 - `data-gw-action` and `data-gw-radius` sit on `<html>` only, with a name from `system.json` `profiles` (`ink` or

package/docs/theming.md

@@ -41,6 +41,11 @@ Why the `-light` / `-dark` names and not `--gw-accent` itself: the kit sets `--g
 band. Override the eight primitives once and all of them follow. Overriding `--gw-accent` directly works only until
 someone presses the theme toggle.
 
+The spotlight (0.9.0, `data-gw-spot`) is the accent too: its light is `--gw-accent` mixed over what it lights, so a
+brand's page lights in the brand's own colour, in light, in dark and in night bands, with nothing to set. The light
+takes the corners of the element it lights, so both radius profiles hold. A brand does not choose its colour, its
+strength or its size (they are tokens), and never a second colour.
+
 The logo and the favicon are files, not variables: the `<img class="gw-brand__mark">` (26×26, SVG preferred, with
 `alt=""` because the name is written next to it) and the `<span class="gw-brand__name">` in the header and footer
 partials, and `<link rel="icon">` in the page head.
@@ -94,6 +99,7 @@ the panels; in `tight` that is the 16px the header was designed with.
 - **Accent-coloured section bands.** A section is white, `--gw-bg-soft` or a night band; the accent only lights a
   night band's top edge.
 - **All-caps labels.** Labels are sentence case, muted, led by the 8px accent square.
+- **A light on a heading, or in more than one colour.** The spotlight lights things you click, in the accent only.
 
 These make a page louder without making it clearer, and `check` reports the last one (`uppercase-label`) and any
 button filled from site CSS (`accent-button`).

package/js/website.js

@@ -1,11 +1,12 @@
-/*! @gemboss/website-ui 0.8.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
+/*! @gemboss/website-ui 0.9.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
 (function () {
 'use strict';
 if (window.gwWebsite) return;
 
-var version = '0.8.0';
+var version = '0.9.0';
 var api = { version: version, init: init, destroy: destroy };
 var doc, root, mine, fine, sys, wide, mid, live = [], megaOpen = null, megaTimer = 0, queued = false;
+var still, lights;
 var READY = 'data-gw-ready';
 
 function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
@@ -377,6 +378,51 @@ function folds(ctx) {
   });
 }
 
+var TRAIL = 0.18, SETTLE = 0.3, HEADING = /^H[1-6]$/;
+function spot(ctx) {
+  if (lights) each(ctx, '[data-gw-spot]', 'spot', function (el) {
+    var sel = attr(el, 'data-gw-spot', ''), t = el;
+    if (sel) { try { t = el.querySelector(sel); } catch (e) { t = null; } }
+    if (!t || HEADING.test(t.tagName) || HEADING.test(el.tagName)) return;
+    var had = t.classList.contains('gw-spot'), x = 0, y = 0, px = 0, py = 0, raf = 0, heard = false;
+    function put(nx, ny) {
+      x = nx; y = ny;
+      t.style.setProperty('--gw-spot-x', x.toFixed(1) + 'px');
+      t.style.setProperty('--gw-spot-y', y.toFixed(1) + 'px');
+    }
+    function note(e) { if (e.pointerType === 'touch') return false; px = e.clientX; py = e.clientY; return true; }
+    function aim() { var b = t.getBoundingClientRect(); return [px - b.left - (t.clientLeft || 0), py - b.top - (t.clientTop || 0)]; }
+    function step() {
+      var a = aim(), nx = x + (a[0] - x) * TRAIL, ny = y + (a[1] - y) * TRAIL, done = Math.abs(a[0] - nx) < SETTLE && Math.abs(a[1] - ny) < SETTLE;
+      if (done) put(a[0], a[1]); else put(nx, ny);
+      raf = done ? 0 : requestAnimationFrame(step);
+    }
+    function halt() { cancelAnimationFrame(raf); raf = 0; }
+    function enter(e) { if (note(e)) { halt(); put.apply(null, aim()); } }
+    function move(e) { if (note(e) && !raf) raf = requestAnimationFrame(step); }
+    function listen(want) {
+      if (want === heard) return;
+      heard = want;
+      [['pointerenter', enter], ['pointermove', move]].forEach(function (l) {
+        if (want) el.addEventListener(l[0], l[1]); else el.removeEventListener(l[0], l[1]);
+      });
+      if (!want) halt();
+    }
+    var r = {
+      fit: function () { listen(fine.matches && !still.matches); },
+      stop: function () {
+        listen(false);
+        if (!had) t.classList.remove('gw-spot');
+        t.style.removeProperty('--gw-spot-x');
+        t.style.removeProperty('--gw-spot-y');
+      }
+    };
+    t.classList.add('gw-spot');
+    r.fit();
+    return r;
+  });
+}
+
 function install() {
   doc = document; root = doc.documentElement; mine = new WeakSet();
   fine = mq('(hover: hover) and (pointer: fine)'); sys = mq('(prefers-color-scheme: dark)');
@@ -390,6 +436,10 @@ function install() {
   on(doc, 'click', function (e) { records('lang', function (r) { if (r.open() && !r.el.contains(e.target)) r.set(false); }); });
   watch(wide, function () { if (wide.matches) closeMenus(); records('toc', function (r) { r.fit(); }); });
   watch(mid, function () { records('fold', function (r) { r.fit(); }); });
+  still = mq('(prefers-reduced-motion: reduce)');
+  var css = window.CSS;
+  lights = !!(css && css.registerProperty && css.supports && css.supports('color', 'color-mix(in srgb, red 50%, blue)'));
+  [fine, still].forEach(function (m) { watch(m, function () { records('spot', function (r) { r.fit(); }); }); });
   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);
@@ -414,7 +464,7 @@ function init(ctx) {
   window.gwWebsite = api;
   if (!doc) run([install]);
   live.slice().forEach(function (r) { if (r.el.isConnected === false) drop(r); });
-  run([mega, mobile, lang, theme, reveal, header, current, segmented, toc, tables, folds], ctx && ctx.querySelectorAll ? ctx : doc);
+  run([mega, mobile, lang, theme, reveal, header, current, segmented, toc, tables, folds, spot], ctx && ctx.querySelectorAll ? ctx : doc);
 }
 
 /** Takes back what init() wired under root (default: the whole document): listeners and data-gw-ready marks. */

package/js/website.mjs

@@ -6,10 +6,11 @@
 // 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.8.0';
+var version = '0.9.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, wide, mid, live = [], megaOpen = null, megaTimer = 0, queued = false;
+var still, lights;
 var READY = 'data-gw-ready';
 
 function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
@@ -445,6 +446,63 @@ function folds(ctx) {
   });
 }
 
+// Spotlight (0.9.0, issue #74): data-gw-spot on an <a href>, a <button>, or a card that holds exactly one of them. A
+// light in the accent follows the pointer over it (css/effects.css draws it). The element that carries the light, the
+// host or the first one its data-gw-spot="<selector>" names inside it (never a heading), gets .gw-spot and the
+// pointer's place on it, in px from its padding box, as --gw-spot-x and --gw-spot-y. The light trails the pointer: on
+// each frame it goes TRAIL of the way that is left (one requestAnimationFrame loop per element, stopped once it is
+// within SETTLE px), and it starts where the pointer comes in, never sliding in from the middle. A move only notes
+// where the pointer is; the element is measured once a frame, in the loop. The two listeners are there only on a fine
+// pointer and without reduced motion (where the CSS keeps the light still, in the middle), again on every change of
+// either. Nothing is wired without @property and color-mix() (lights), so nothing is drawn. TRAIL and SETTLE are
+// system.json's motion.spot.trail and .settle (the tests hold them equal). No event.
+var TRAIL = 0.18, SETTLE = 0.3, HEADING = /^H[1-6]$/;
+function spot(ctx) {
+  if (lights) each(ctx, '[data-gw-spot]', 'spot', function (el) {
+    var sel = attr(el, 'data-gw-spot', ''), t = el;
+    if (sel) { try { t = el.querySelector(sel); } catch (e) { t = null; } }
+    if (!t || HEADING.test(t.tagName) || HEADING.test(el.tagName)) return;
+    var had = t.classList.contains('gw-spot'), x = 0, y = 0, px = 0, py = 0, raf = 0, heard = false;
+    function put(nx, ny) {
+      x = nx; y = ny;
+      t.style.setProperty('--gw-spot-x', x.toFixed(1) + 'px');
+      t.style.setProperty('--gw-spot-y', y.toFixed(1) + 'px');
+    }
+    // where the pointer is (a mouse or a pen; never a finger)
+    function note(e) { if (e.pointerType === 'touch') return false; px = e.clientX; py = e.clientY; return true; }
+    // the pointer's place on the element that carries the light, measured now
+    function aim() { var b = t.getBoundingClientRect(); return [px - b.left - (t.clientLeft || 0), py - b.top - (t.clientTop || 0)]; }
+    function step() {
+      var a = aim(), nx = x + (a[0] - x) * TRAIL, ny = y + (a[1] - y) * TRAIL, done = Math.abs(a[0] - nx) < SETTLE && Math.abs(a[1] - ny) < SETTLE;
+      if (done) put(a[0], a[1]); else put(nx, ny);
+      raf = done ? 0 : requestAnimationFrame(step);
+    }
+    function halt() { cancelAnimationFrame(raf); raf = 0; }
+    function enter(e) { if (note(e)) { halt(); put.apply(null, aim()); } }
+    function move(e) { if (note(e) && !raf) raf = requestAnimationFrame(step); }
+    function listen(want) {
+      if (want === heard) return;
+      heard = want;
+      [['pointerenter', enter], ['pointermove', move]].forEach(function (l) {
+        if (want) el.addEventListener(l[0], l[1]); else el.removeEventListener(l[0], l[1]);
+      });
+      if (!want) halt();
+    }
+    var r = {
+      fit: function () { listen(fine.matches && !still.matches); },
+      stop: function () {
+        listen(false);
+        if (!had) t.classList.remove('gw-spot');
+        t.style.removeProperty('--gw-spot-x');
+        t.style.removeProperty('--gw-spot-y');
+      }
+    };
+    t.classList.add('gw-spot');
+    r.fit();
+    return r;
+  });
+}
+
 // 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();
@@ -462,6 +520,11 @@ function install() {
   on(doc, 'click', function (e) { records('lang', function (r) { if (r.open() && !r.el.contains(e.target)) r.set(false); }); });
   watch(wide, function () { if (wide.matches) closeMenus(); records('toc', function (r) { r.fit(); }); });
   watch(mid, function () { records('fold', function (r) { r.fit(); }); });
+  // the spotlight: a fine pointer, motion welcome, and a browser that can draw the light (@property, color-mix)
+  still = mq('(prefers-reduced-motion: reduce)');
+  var css = window.CSS;
+  lights = !!(css && css.registerProperty && css.supports && css.supports('color', 'color-mix(in srgb, red 50%, blue)'));
+  [fine, still].forEach(function (m) { watch(m, function () { records('spot', function (r) { r.fit(); }); }); });
   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);
@@ -492,7 +555,7 @@ function init(ctx) {
   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, lang, theme, reveal, header, current, segmented, toc, tables, folds], ctx && ctx.querySelectorAll ? ctx : doc);
+  run([mega, mobile, lang, theme, reveal, header, current, segmented, toc, tables, folds, spot], ctx && ctx.querySelectorAll ? ctx : doc);
 }
 
 /** Takes back what init() wired under root (default: the whole document): listeners and data-gw-ready marks. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/website-ui",
-  "version": "0.8.0",
+  "version": "0.9.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",

package/skill/SKILL.md

@@ -32,6 +32,8 @@ the kit and its rules are how the page ends up looking designed. Compose from th
      uses its drill-down mobile menu (`data-gw-menu="drill"`, a head with Back and the title in each group); a site in
      more than one language keeps its language switcher (`.gw-lang`, `hidden`, empty) and gives every page its
      `<link rel="alternate" hreflang>`: the switcher lists those, and stays hidden on a page in one language.
+   - Spotlight (`data-gw-spot`): only on a link, a button or a card with exactly one action (a plan, a link card, the
+     mega menu's feature card, a night band's primary button). Never on a heading or text; the kit draws it.
    - 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`.

package/system.json

@@ -154,6 +154,18 @@
     "ease": "cubic-bezier(.22,1,.36,1)",
     "reveal_ms": 700,
     "spin_ms": 700,
-    "$comment": "Animate transform and opacity only. Everything is still under prefers-reduced-motion (a busy button's ring turns once every spin_ms, as the dashboard's spinner, and stands still as an ellipsis)."
+    "$comment": "Animate transform and opacity only. Everything is still under prefers-reduced-motion (a busy button's ring turns once every spin_ms, as the dashboard's spinner, and stands still as an ellipsis). One exception, the spotlight (spot): its light is one painted layer of one element, so its radius may grow.",
+    "spot": {
+      "$comment": "The spotlight (0.9.0, Chris 25/10/2026, issue #74): data-gw-spot on a link, a button or a card with one action. A light in the accent follows a fine pointer: each frame it goes trail of the way that is left, and stops within settle px. Its radius grows to radius in ms with ease; its middle is strength percent of the accent over the element's own fill. A .gw-btn takes radius_action and strength_action (a small, filled thing), the night ground of the mega menu's feature card (the Stage) strength_stage. Under reduced motion it stands still, centred, and does not grow.",
+      "radius": 260,
+      "radius_action": 120,
+      "strength": 22,
+      "strength_action": 38,
+      "strength_stage": 40,
+      "ms": 550,
+      "ease": "cubic-bezier(.16,1,.3,1)",
+      "trail": 0.18,
+      "settle": 0.3
+    }
   }
 }

package/website.css

@@ -1,4 +1,4 @@
-/*! @gemboss/website-ui 0.8.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
+/*! @gemboss/website-ui 0.9.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;
@@ -70,6 +70,13 @@
   --gw-ease: cubic-bezier(.22,1,.36,1);
   --gw-reveal-ms: 700ms;
   --gw-spin-ms: 700ms;
+  --gw-spot-radius: 260px;
+  --gw-spot-radius-action: 120px;
+  --gw-spot-strength: 22%;
+  --gw-spot-strength-action: 38%;
+  --gw-spot-strength-stage: 40%;
+  --gw-spot-ms: 550ms;
+  --gw-spot-ease: cubic-bezier(.16,1,.3,1);
   --gw-wash-pink: #ff6f5e;
   --gw-wash-violet: #7c8af7;
   --gw-wash-sky: #43b0ff;
@@ -2229,3 +2236,75 @@ a.gw-rating-badge:hover { border-color: var(--gw-line-strong); }
 .gw-rating-badge__body { display: grid; gap: 2px; min-width: 0; }
 .gw-rating-badge__score { display: flex; align-items: center; gap: 8px; color: var(--gw-ink); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
 .gw-rating-badge__count { color: var(--gw-muted); }
+
+/* effects: the spotlight (0.9.0, Chris 25/10/2026, issue #74), a named hover effect for the things you click.
+   data-gw-spot on an <a href>, a <button>, or a card that holds exactly one of them (a plan card, the mega menu's
+   feature card, the primary button of a night band, a .gw-card--link): a soft light in the brand's accent follows the
+   pointer over it. Opt-in per element: a page without the attribute does not change.
+   website.js wires the host (data-gw-ready="spot") and puts .gw-spot on the element that carries the light: the host,
+   or the one its data-gw-spot="<selector>" names inside it. It writes the pointer's place there (--gw-spot-x,
+   --gw-spot-y, trailing it a little every frame); this file draws the light on its ::before, under its words, in its
+   own corners (border-radius: inherit, so the radius profile holds), and grows the light's radius on hover.
+   - Pointer devices only: nothing here applies without (hover: hover) and (pointer: fine).
+   - Keyboard focus (on the host, or on the one action of a card) shows the same light, centred.
+   - Reduced motion: the light stands still, centred, and appears without a transition.
+   - Words under the light: while a thing is lit, its muted words read --gw-ink-2 (the token, set as --gw-muted on the
+     host), so they keep 4.5:1 at the light's middle; they turn back once the light has gone. A colour, no movement.
+   - Without @property or color-mix(), website.js puts .gw-spot nowhere: no light at all, nothing half drawn.
+   - One colour, the accent family, as the page has it (the -dark family in dark mode and in night bands). Never on a
+     heading or running text: a heading stays ink, with no gradient and no accent words (check: spot-target).
+   The radius is the one animated property that is neither transform nor opacity: it repaints one layer of one
+   element. Registered, so it can transition; inherited, so the ::before (and an inner element) reads the host's. */
+@property --gw-spot-r {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  /* the host: no light at rest (a lit card does not light a lit button inside it), the light's size on hover and focus */
+  [data-gw-ready~="spot"] { --gw-spot-r: 0px; }
+  [data-gw-ready~="spot"]:is(:hover, :focus-visible) { --gw-spot-r: var(--gw-spot-radius); --gw-muted: var(--gw-ink-2); }
+  /* a card whose one action has the keyboard focus; a rule of its own, so a browser without :has() drops only it */
+  [data-gw-ready~="spot"]:has(:focus-visible) { --gw-spot-r: var(--gw-spot-radius); --gw-muted: var(--gw-ink-2); }
+  .gw-btn[data-gw-ready~="spot"]:is(:hover, :focus-visible) { --gw-spot-r: var(--gw-spot-radius-action); }
+
+  /* the element that carries the light: positioned for its layer, isolated so the layer sits under its words.
+     :where(), so a site's own position for an inner element wins. */
+  :where(.gw-spot) { position: relative; isolation: isolate; }
+  /* the light. Not on a busy button: its ::before is the ring. */
+  .gw-spot:not([aria-busy="true"])::before {
+    --gw-spot-mix: var(--gw-spot-strength);
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    background: radial-gradient(circle var(--gw-spot-r) at var(--gw-spot-x, 50%) var(--gw-spot-y, 50%), color-mix(in srgb, var(--gw-accent) var(--gw-spot-mix), transparent), transparent 70%);
+    pointer-events: none;
+    transition: --gw-spot-r var(--gw-spot-ms) var(--gw-spot-ease);
+  }
+  /* a button is small and filled: a stronger light. Its words keep their contrast: the light is the accent over the
+     button's fill, so under the accent action profile it lies between the accent and the accent-strong, the two fills
+     the build checks the words on. */
+  .gw-btn.gw-spot:not([aria-busy="true"])::before { --gw-spot-mix: var(--gw-spot-strength-action); }
+  /* the mega menu's feature card is the Stage, a night ground: a stronger light, or it would not show */
+  .gw-mega__feature.gw-spot:not([aria-busy="true"])::before { --gw-spot-mix: var(--gw-spot-strength-stage); }
+
+  /* words under the light: lit, muted words are ink-2 at once (rules above); back to muted only once the light has gone
+     out (a colour that waits the light's time, no movement). :where(), so a part's own transition wins. */
+  :where([data-gw-ready~="spot"] *) { transition: color 0s linear var(--gw-spot-ms); }
+  :where([data-gw-ready~="spot"]:is(:hover, :focus-visible) *) { transition-delay: 0s; }
+  :where([data-gw-ready~="spot"]:has(:focus-visible) *) { transition-delay: 0s; }
+
+  /* keyboard focus: the light in the middle, so focus is never weaker than hover */
+  :is([data-gw-ready~="spot"]:focus-visible, [data-gw-ready~="spot"]:focus-visible *).gw-spot::before { --gw-spot-x: 50%; --gw-spot-y: 50%; }
+  :is([data-gw-ready~="spot"]:has(:focus-visible), [data-gw-ready~="spot"]:has(:focus-visible) *).gw-spot::before { --gw-spot-x: 50%; --gw-spot-y: 50%; }
+}
+
+/* reduced motion: a still light in the middle, there at once and gone at once, the words with it (website.js follows
+   no pointer then) */
+@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
+  .gw-spot:not([aria-busy="true"])::before { --gw-spot-x: 50%; --gw-spot-y: 50%; transition: none; }
+  :where([data-gw-ready~="spot"] *) { transition: none; }
+}