npm - @gemboss/website-ui - Versions diffs - 0.8.0 → 0.9.0 - Mend

@gemboss/website-ui 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/AGENTS.md CHANGED Viewed

@@ -10,7 +10,7 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
 | file | what it is |
 |---|---|
 | `website.css` | the whole kit, one file (tokens, base, layout, components, sections) |
-| `js/website.js` | header, mega menu, mobile menu (and its drill-down), language switcher, theme toggle, scroll reveal, segmented control, busy buttons, an article's contents and its tables' scroll box, the footer's folds; no dependencies; `window.gwWebsite.init(root)` |
+| `js/website.js` | header, mega menu, mobile menu (and its drill-down), language switcher, theme toggle, scroll reveal, segmented control, busy buttons, an article's contents and its tables' scroll box, the footer's folds, the spotlight; no dependencies; `window.gwWebsite.init(root)` |
 | `js/website.mjs` | the same script as an ES module for apps: `import { init, destroy } from '@gemboss/website-ui/website.mjs'` |
 | `system.json` | every value of the system: colours, spacing, type, radii, shadows, widths |
 | `templates/page.html` | the page skeleton: start every new page from it |
@@ -23,6 +23,7 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
 | `demo/forms.html` | fields in every state, choices, the footer newsletter, a short form, stars, the testimonial wall and the rating badge |
 | `demo/footer.html` | the full footer (Ask AI, columns that fold on phones, family rows, theme toggle, wordmark), and the same for a GemPages-style brand |
 | `demo/header.html` | the header of gemboss.ai: the mobile menu that drills down with its bar of actions, and the language switcher, and the same for a GemPages-style brand |
+| `demo/spotlight.html` | the spotlight on plan cards, link cards, the feature card and a night band's button, and the same for a GemPages-style brand |
 | `docs/components.md` | every class, what it is for, its variants |
 | `docs/theming.md` | what a brand other than GemBoss chooses (accent, wash, logo, three named profiles), and what it must not change |
@@ -122,6 +123,9 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
   else on white or `--gw-bg-soft`.
 - **Motion**: only `transform` and `opacity`, the kit's ease, nothing moves under `prefers-reduced-motion`. Scroll
   reveal is `.gw-reveal` (the JS adds `.is-in`, and a failsafe shows it anyway).
+- **Spotlight** (0.9.0): `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). The kit draws the light in the accent; never on a
+  heading or text, never in another colour, never your own script.
 ## 4. Don't (each of these has happened, and each one made a page look cheap or broke it)
@@ -272,8 +276,9 @@ with numbers and no caption, an unknown brand profile or one set off `<html>`, `
 words on the accent button below 4.5:1, breadcrumbs without their markup, a contents link to an id that is not on
 the page, a callout without its label, stars without their value in words, a rating or a testimonial without a link to
 its source, a footer fold without its heading in the summary or a wordmark a screen reader reads, a drill-down level
-without its Back or its title, a language switcher shown by the markup or a translation without `hreflang`, and
-patterns that repeat across pages (likely gaps). It does not replace looking at the page at 320px and 1366px.
+without its Back or its title, a language switcher shown by the markup or a translation without `hreflang`, a
+spotlight on a heading or on something that is not one action, and patterns that repeat across pages (likely gaps). It
+does not replace looking at the page at 320px and 1366px.
 ## 11. Upgrading the kit

package/CHANGELOG.md CHANGED Viewed

@@ -4,6 +4,66 @@ Every release lists what changed for a site that uses the kit. A release that ad
 says so with `Closes gap #N` (the GitHub issue number), so `npx gemboss-website upgrade` can tell that site which
 stopgap (`kitgap-*`) it can now delete.
+## 0.9.0 (2026-10-25)
+The spotlight, a named hover effect for the things you click (Chris, 25/10/2026, chosen over a heading that glows
+under the pointer): a soft light in the brand's accent follows the pointer over a plan card, a link card, the mega menu's
+feature card or the primary button of a night band. Opt-in per element: a page without `data-gw-spot` looks exactly
+as before. The demo index (without its new link), `brand-profiles.html`, `article.html`, `blog.html`, `forms.html`,
+`footer.html`, `header.html` and `theme-example.html` are pixel-identical to 0.8.0 at 390 and 1366px, light and dark.
+Closes #74
+- `data-gw-spot` on an `<a href>`, a `<button>`, or a card (`<div>`, `<article>`, `<li>`) that holds exactly one of
+  them: a `.gw-plan` with its one `.gw-btn`, a `.gw-card--link`, the `.gw-mega__feature`, the `.gw-btn` of a
+  `.gw-band--night`. `data-gw-spot="<selector>"` lights the first element the selector names inside it instead (the art
+  of a card). Never on a heading or running text: the script refuses a heading, and the kit still forbids gradient or
+  accent-coloured words in a heading, and lights of more than one colour.
+- The light: a radial gradient on the `::before` of the element that carries it, under its words, in its own corners
+  (`border-radius: inherit`, so both radius profiles hold), no layout change. One colour, `--gw-accent` mixed with
+  `color-mix()`: 22% on a card, 38% on a button, 40% on the Stage's night ground; the `-dark` family in dark mode and in
+  night bands, the brand's own accent everywhere (a GemPages-style page lights blue). Its radius, a registered
+  `@property --gw-spot-r` that inherits, grows to 260px (120px on a button) in 0.55s with `cubic-bezier(.16,1,.3,1)`:
+  the one animated property that is neither transform nor opacity (`system.json` `motion` says so).
+- The motion, as Chris asked after the prototype: the light starts where the pointer comes in, then trails it, going
+  18% of the way that is left on each frame (one `requestAnimationFrame` loop per element, stopped within 0.3px), so a
+  jump of the pointer is followed over several frames, never snapped.
+- Pointer devices only: the CSS is all inside `(hover: hover) and (pointer: fine)`, and `website.js` adds no listener
+  without a fine pointer (again on every change). Keyboard focus shows the same light, centred and as large, on the
+  focused host or on a card whose one action has the focus (`:has(:focus-visible)`, in a rule of its own). Reduced
+  motion: no listener, a still light in the middle that appears without a transition.
+- Fallback: without `@property` or `color-mix()` the script wires nothing, so nothing is drawn, not half a light.
+- Tokens (`system.json` `motion.spot`): `--gw-spot-radius`, `--gw-spot-radius-action`, `--gw-spot-strength`,
+  `--gw-spot-strength-action`, `--gw-spot-strength-stage`, `--gw-spot-ms`, `--gw-spot-ease`; the trail and the settle
+  distance are the script's, held equal to `motion.spot.trail` and `.settle` by the tests.
+- CSS: `css/effects.css`, last in `website.css`. Every rule of it selects a wired spot (`data-gw-ready~="spot"`) or the
+  element carrying its light (`.gw-spot`, set by the script), so no page without the attribute can change.
+- `website.js`: the `spot` part in the `init(root)`/`destroy(root)` registry (`data-gw-ready="spot"`), a
+  `pointerenter` and a `pointermove` listener per element, `--gw-spot-x` and `--gw-spot-y` on the element that carries
+  the light, nothing else and no event. `destroy` takes the listeners, the frame, the class and the place back.
+- `check`: `spot-target` (an error): `data-gw-spot` on a heading, with a selector that names a heading, on running text
+  or a section, on an `<a>` without `href`, or on a card with no link or button or with more than one.
+- Words under the light: while a thing is lit (hover, keyboard focus), its muted words read `--gw-ink-2`: the host sets
+  `--gw-muted: var(--gw-ink-2)`, so every part that uses the muted token follows, with no class of its own. Muted would
+  dip to 4.0:1 at the light's middle on a white card (5.3:1 at rest); ink-2 there is 8.2:1 measured in Chromium (7.6:1
+  in dark), and 4.5:1 or more on every ground by the tokens (a card, a soft card, a night band). The words turn ink-2 at
+  once and turn back only once the light has gone (a colour that waits 0.55s, no movement; at once under reduced
+  motion). Ink keeps 10:1 or more and a button's words 4.5:1 in every profile, light and dark.
+- Demo: `demo/spotlight.html`, plan cards, link cards, the feature card (also in the Product menu) and the night band's
+  CTA, with a switch to a GemPages-style brand (`data-gw-action="accent"`, `data-gw-radius="soft"`, `#3c67ff`), linked
+  from `demo/index.html`. No other demo page opts in.
+- Budget: `js/website.js` is 23.1 KB unminified, 7.1 KB gzipped (0.8.0: 20.8 KB, 6.4 KB); the test's budget is now
+  24 KB and 8 KB. `website.min.css` is 73.8 KB, 12.7 KB gzipped (0.8.0: 71.8 KB, 12.3 KB).
+- Tests: `test/run.mjs` holds the CSS (every rule opt-in, fine pointer only, the accent only, the reduced-motion and
+  focus rules, the tokens), the contrast under the light, the script in its fake DOM (entry point, trailing frame by
+  frame, settling, touch, inner element, init twice, destroy, media changes, no `@property`, no `color-mix()`) and the
+  check rule; `test/browser.mjs` drives `demo/spotlight.html` in Chromium (the radius read on the `::before` while
+  hovering, the light following a jump over several frames, no layout shift, the Stage and the night band, Tab to a
+  card and to a plan's button, reduced motion, a touch screen with no listener counted by DevTools and the same
+  pixels after a tap, no `@property` or `color-mix()`, init twice and destroy counted by DevTools, a heading refused
+  by the script and flagged by `check`, the GemPages-style accent and corners, light and dark, and a muted line at the
+  light's middle measured on the drawn pixel: 4.5:1 or more, light and dark, ink-2 while the light fades, muted after).
 ## 0.8.0 (2026-10-25)
 The header of gemboss.ai on a phone, so the site's header can move onto the kit: a mobile menu that drills down into

package/README.md CHANGED Viewed

@@ -12,11 +12,11 @@ it. Made so that a team working with Claude Code, even without a designer, ships
 | | |
 |---|---|
-| `website.css`, `website.min.css` | toàn bộ kit trong một tệp (khoảng 101 KB, 72 KB bản min, 12,2 KB khi nén gzip): token sáng và tối, chữ, bố cục, nút (cả trạng thái nhấn, đang chờ và nút xoá), link, nhãn, chip, segmented control, badge, card (kèm ảnh trên đầu thẻ), khung cửa sổ kèm chú thích "Illustrative data.", bảng, FAQ, chữ bài dài (`.gw-prose`), bộ khung bài blog (breadcrumb, dòng tác giả và ngày, mục lục dính, hộp lưu ý, danh sách bài, phân trang), ô nhập và trạng thái lỗi (ô chữ, danh sách chọn, ô nhiều dòng, checkbox, radio, hàng một ô một nút cho newsletter), sao đánh giá, tường review, huy hiệu điểm App Store, header + mega menu + menu điện thoại (tuỳ chọn đi sâu từng mục kèm thanh nút dính đáy, như gemboss.ai) + nút đổi ngôn ngữ, footer như gemboss.ai (cột gập lại trên điện thoại, hàng Ask AI, hàng sản phẩm cùng nhà, nút sáng/tối, wordmark; ô newsletter tuỳ chọn), 16 section, 3 hồ sơ thương hiệu |
-| `js/website.js`, `js/website.mjs` | mega menu, menu điện thoại (kể cả bản đi sâu từng mục: Back, giữ focus trong menu, sự kiện `gw:menu`), nút đổi ngôn ngữ (đọc `<link rel="alternate" hreflang>` của trang, ẩn khi trang chỉ có một ngôn ngữ), đổi giao diện sáng/tối, hiện dần khi cuộn, đánh dấu trang hiện tại, segmented control, chặn bấm lần hai khi nút đang chờ, đánh dấu mục đang đọc trong mục lục bài viết, khung cuộn cho bảng trong bài, cột footer gập/mở theo khổ màn; không phụ thuộc thư viện nào, khoảng 6,4 KB khi nén gzip. `website.js` là script thường (tự chạy khi trang tải xong), `website.mjs` là bản ES module cho app; cả hai có `init(root)` để gắn lại phần markup chèn sau (`docs/markup-contract.md`, mục "Script") |
+| `website.css`, `website.min.css` | toàn bộ kit trong một tệp (khoảng 107 KB, 74 KB bản min, 12,7 KB khi nén gzip): token sáng và tối, chữ, bố cục, nút (cả trạng thái nhấn, đang chờ và nút xoá), link, nhãn, chip, segmented control, badge, card (kèm ảnh trên đầu thẻ), khung cửa sổ kèm chú thích "Illustrative data.", bảng, FAQ, chữ bài dài (`.gw-prose`), bộ khung bài blog (breadcrumb, dòng tác giả và ngày, mục lục dính, hộp lưu ý, danh sách bài, phân trang), ô nhập và trạng thái lỗi (ô chữ, danh sách chọn, ô nhiều dòng, checkbox, radio, hàng một ô một nút cho newsletter), sao đánh giá, tường review, huy hiệu điểm App Store, header + mega menu + menu điện thoại (tuỳ chọn đi sâu từng mục kèm thanh nút dính đáy, như gemboss.ai) + nút đổi ngôn ngữ, footer như gemboss.ai (cột gập lại trên điện thoại, hàng Ask AI, hàng sản phẩm cùng nhà, nút sáng/tối, wordmark; ô newsletter tuỳ chọn), đốm sáng theo con trỏ trên thứ bấm được (`data-gw-spot`, bật từng chỗ), 16 section, 3 hồ sơ thương hiệu |
+| `js/website.js`, `js/website.mjs` | mega menu, menu điện thoại (kể cả bản đi sâu từng mục: Back, giữ focus trong menu, sự kiện `gw:menu`), nút đổi ngôn ngữ (đọc `<link rel="alternate" hreflang>` của trang, ẩn khi trang chỉ có một ngôn ngữ), đổi giao diện sáng/tối, hiện dần khi cuộn, đánh dấu trang hiện tại, segmented control, chặn bấm lần hai khi nút đang chờ, đánh dấu mục đang đọc trong mục lục bài viết, khung cuộn cho bảng trong bài, cột footer gập/mở theo khổ màn, đốm sáng theo con trỏ; không phụ thuộc thư viện nào, khoảng 7,1 KB khi nén gzip. `website.js` là script thường (tự chạy khi trang tải xong), `website.mjs` là bản ES module cho app; cả hai có `init(root)` để gắn lại phần markup chèn sau (`docs/markup-contract.md`, mục "Script") |
 | `AGENTS.md` | luật mà Claude Code (và người) phải theo: 10 luật, cách dựng trang, điều cấm, chữ, khả năng truy cập, đổi thương hiệu, khi kit thiếu |
 | `templates/` | khung một trang, header (`header.html`: hai tuỳ chọn, menu điện thoại đi sâu và nút ngôn ngữ), footer (`footer.html`: footer của gemboss.ai, mọi phần tuỳ chọn đều ghi rõ) và 16 section (hero, logos, stats, features, split, showcase, steps, quote, pricing, faq, cta, prose, article, post-list, form, testimonials) |
-| `demo/` | mọi thành phần trên một trang; `theme-example.html` cho thấy một thương hiệu khác đổi màu nhấn; `brand-profiles.html` là một thương hiệu kiểu GemPages bật cả 3 hồ sơ; `article.html` là một bài blog trọn vẹn, `blog.html` là trang danh sách bài; `forms.html` là mọi trạng thái của ô nhập, newsletter ở footer, tường review và huy hiệu điểm (dữ liệu mẫu); `footer.html` là footer đầy đủ như gemboss.ai, kèm nút chuyển sang bản kiểu GemPages; `header.html` là header của gemboss.ai trên điện thoại (menu đi sâu từng mục, thanh nút dính đáy, nút đổi ngôn ngữ với ba ngôn ngữ), cũng có bản kiểu GemPages |
+| `demo/` | mọi thành phần trên một trang; `theme-example.html` cho thấy một thương hiệu khác đổi màu nhấn; `brand-profiles.html` là một thương hiệu kiểu GemPages bật cả 3 hồ sơ; `article.html` là một bài blog trọn vẹn, `blog.html` là trang danh sách bài; `forms.html` là mọi trạng thái của ô nhập, newsletter ở footer, tường review và huy hiệu điểm (dữ liệu mẫu); `footer.html` là footer đầy đủ như gemboss.ai, kèm nút chuyển sang bản kiểu GemPages; `header.html` là header của gemboss.ai trên điện thoại (menu đi sâu từng mục, thanh nút dính đáy, nút đổi ngôn ngữ với ba ngôn ngữ), cũng có bản kiểu GemPages; `spotlight.html` là đốm sáng trên thẻ gói giá, thẻ link, thẻ nổi bật của mega menu và nút trong dải tối, cũng có bản kiểu GemPages |
 | `docs/` | danh mục class (`components.md`), đổi thương hiệu (`theming.md`), triết lý (`philosophy.md`), hợp đồng markup |
 | `system.json` | mọi giá trị của hệ thống (màu, khoảng cách, chữ, bo góc, bóng, khung): nguồn duy nhất |
 | CLI `gemboss-website` | `init`, `check`, `gap`, `upgrade` |
@@ -40,9 +40,9 @@ nó đọc `AGENTS.md` của kit trước, dựng từ mẫu, và chạy `check`
 **Site HTML tĩnh hoặc không có bước build:** dùng CDN của npm, ghim đúng phiên bản.
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.8.0/website.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.9.0/website.min.css">
 <link rel="stylesheet" href="/site.css">   <!-- CSS riêng của site, luôn SAU kit -->
-<script src="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.8.0/js/website.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.9.0/js/website.js" defer></script>
 ```
 Chèn markup của kit sau khi trang đã tải (block của builder, bản xem trước CMS): gọi `gwWebsite.init(phầnMới)` ngay

package/bin/lib/check.mjs CHANGED Viewed

@@ -159,6 +159,11 @@ export const RULES = {
     why: "website.js fills .gw-lang from the page's <link rel=\"alternate\" hreflang href> and shows it only when there is another language: it starts hidden, its button (.gw-lang__btn) names its list with aria-controls and says aria-expanded, and the list is empty in the markup. A switcher shown by the markup is an empty button on a page with one language; links typed into the list are replaced; a translation's <link rel=\"alternate\"> without hreflang is one the switcher (and search engines) cannot list.",
     fix: "Copy the switcher from templates/header.html: <div class=\"gw-lang\" data-gw-lang hidden><button class=\"gw-lang__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"gw-lang-menu\">…</button><ul class=\"gw-lang__menu\" id=\"gw-lang-menu\" hidden></ul></div>, and give each translation <link rel=\"alternate\" hreflang=\"vi\" href=\"…\"> in <head>.",
   },
+  "spot-target": {
+    level: "error", title: "Spotlight on something that is not one action",
+    why: "data-gw-spot lights what you can click: the light says \"this goes somewhere\". On a heading or running text it promises a link that is not there (and a heading stays ink: no gradient, no accent words, no light); on a box with no action, or several, the light cannot say which one it means.",
+    fix: "Put data-gw-spot on the <a href> or the <button> itself, or on a card (a <div>, <article> or <li>) that holds exactly one of them, such as a .gw-plan with its one .gw-btn. Never on a heading, a paragraph or a section, and never with a selector that names a heading (docs/components.md, Spotlight).",
+  },
   "uppercase-text": {
     level: "warning", title: "Uppercase text",
     why: "Headings, buttons, labels and menu items are sentence case.",
@@ -509,6 +514,9 @@ function elementEnd(text, start, tag) {
   }
   return -1;
 }
+// The spotlight (0.9.0): a card lit as a whole is one of these, holding exactly one link or button.
+const SPOT_BOX = new Set(["div", "article", "li"]);
+const HEADING_SEL = /(?:^|[\s>+~,(])h[1-6](?![\w-])/i;
 const LOADING_CLASS = /^(?:is-)?(?:loading|busy)$|--(?:loading|busy)$/;
 const SPINNER_CLASS = /\bclass\s*=\s*["'][^"']*(?:spinner|loader|loading)/i;
@@ -692,6 +700,17 @@ function analyzeHtml(file, text, out) {
       if (missing.length) add("lang-markup", where(`${m[0].replace(/\s+/g, " ").slice(0, 80)}  missing: ${missing.join(", ")}`));
     }
     if (tag === "link" && /(?:^|\s)alternate(?:\s|$)/i.test(a.rel || "") && !a.type) alts.push({ a, where: where() });
+    if ("data-gw-spot" in a) {
+      const sel = (a["data-gw-spot"] || "").trim();
+      const acts = (inner().match(/<a\b[^>]*\bhref\s*=|<button\b/gi) || []).length;
+      const why = /^h[1-6]$/.test(tag) ? `on a heading (<${tag}>)`
+        : HEADING_SEL.test(sel) ? `its selector names a heading (data-gw-spot="${sel}")`
+        : (tag === "a" && "href" in a) || tag === "button" ? ""
+        : tag === "a" ? "on an <a> without href"
+        : !SPOT_BOX.has(tag) ? `on a <${tag}>, which is not a link, a button or a card`
+        : acts !== 1 ? `on a <${tag}> that holds ${acts} links or buttons, not exactly one` : "";
+      if (why) add("spot-target", where(`${m[0].replace(/\s+/g, " ").slice(0, 80)}  ${why}`));
+    }
     if (cls.includes("gw-rating-badge") || cls.includes("gw-testimonial")) {
       const linked = (tag === "a" && "href" in a) || /<a\b[^>]*\bhref\s*=/i.test(inner());
       if (!linked) add("rating-source", where(`${m[0].replace(/\s+/g, " ").slice(0, 80)} ${decode(visible.slice(m.index, elementEnd(scanText, m.index, tag))).replace(/\s+/g, " ").trim().slice(0, 60)}`));

package/css/effects.css ADDED Viewed

@@ -0,0 +1,71 @@
+/* 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; }
+}

package/css/tokens.css CHANGED Viewed

@@ -69,6 +69,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;

package/demo/index.html CHANGED Viewed

@@ -587,6 +587,7 @@ npx gemboss-website check --fix-list</code></pre>
         <p class="demo-mt">Fields in every state, the footer newsletter, a testimonial wall and the rating badge: <a href="forms.html">forms and ratings</a>.</p>
         <p class="demo-mt">The footer as gemboss.ai has it, with Ask AI links, columns that fold on a phone, family rows and the wordmark: <a href="footer.html">the full footer</a>.</p>
         <p class="demo-mt">The header as gemboss.ai has it on a phone, with a menu that drills down into each section and the language switch: <a href="header.html">the header</a>.</p>
+        <p class="demo-mt">A light in the accent that follows the pointer on plan cards, link cards, the feature card and the button of a night band: <a href="spotlight.html">the spotlight</a>.</p>
       </div>
     </section>

package/demo/spotlight.html ADDED Viewed

@@ -0,0 +1,291 @@
+<!doctype html>
+<!-- Kit demo (0.9.0): the spotlight, data-gw-spot (docs/components.md, Spotlight), on what it is for: plan cards, link
+     cards, the mega menu's feature card (open Product, or see it below) and the primary button of a night band. Move a
+     mouse over them; on a phone nothing changes. The switch shows the same page for a GemPages-style brand: soft corners,
+     the accent button and the GemPages accent of docs/theming.md, so the light turns blue by itself. A real site picks
+     its profiles once, on <html> (docs/theming.md); here a small demo script sets them when the switch moves. Words and
+     prices from gemboss.ai; "Example brand" is not GemPages. -->
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Spotlight · website UI kit</title>
+  <meta name="description" content="The kit's spotlight: a soft light in the brand's accent that follows the pointer on plan cards, link cards, the feature card and the button of a night band.">
+  <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">
+  <!-- the GemPages-style brand's whole CSS (docs/theming.md, "A full example"); on only while the switch says so -->
+  <style id="demo-gempages" media="not all">
+    :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: the spotlight, a light that follows the pointer on what you can click. <a href="index.html">Back to the full demo</a></div>
+  <header class="gw-header" data-gw-header>
+    <div class="gw-wrap gw-header__bar">
+      <a class="gw-brand" href="https://gemboss.ai/" data-gw-show="brand:gemboss"><svg class="gw-brand__mark" viewBox="0 0 100 116" aria-hidden="true"><polygon points="26,14 74,14 66,50 34,50" style="fill:var(--gw-accent)"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="9" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.6" stroke-linejoin="round"/></svg><span class="gw-brand__name">GemBoss</span></a><a class="gw-brand" href="spotlight.html#gempages" data-gw-show="brand:gempages" hidden><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-product" data-gw-mega="gw-mega-product">Product</button>
+            <div class="gw-mega" id="gw-mega-product" hidden>
+              <div class="gw-wrap gw-mega__grid">
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Build</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/funnel"><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="M3 4h18l-7 8v6l-4 2v-8z"/></svg></span><span><b>Funnel builder</b><i>Angles, advertorials, offers</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder"><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="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg></span><span><b>Storefront builder</b><i>Headless, on your Shopify</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/gempages"><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>Page builder</b><i>Ask, watch, publish</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Grow</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/gemx"><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 4v16M20 4v16M4 9h16M4 15h16"/></svg></span><span><b>Tests &amp; personalization</b><i>You promote the winner</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/gemoffers"><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="M20 12l-8 8-9-9V3h8z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg></span><span><b>Offers &amp; upsells</b><i>Bundles, gifts, bumps</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/data"><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="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg></span><span><b>Analytics &amp; data</b><i>First-party, yours</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Connect</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/integrations"><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="M9 3v6M15 3v6M6 9h12v3a6 6 0 0 1-12 0z"/><path d="M12 18v3"/></svg></span><span><b>Integrations</b><i>Klaviyo, Meta, Google</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/mcp"><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="m8 9-4 3 4 3"/><path d="m16 9 4 3-4 3"/><path d="m14 5-4 14"/></svg></span><span><b>MCP &amp; agents</b><i>Claude and Codex</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/agent-ready"><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="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4"/><circle cx="9.5" cy="13.5" r="1"/><circle cx="14.5" cy="13.5" r="1"/></svg></span><span><b>Agent-ready storefront</b><i>Ready for AI shoppers</i></span></a>
+                </div>
+                <a class="gw-mega__feature" data-gw-spot href="https://gemboss.ai/engine"><b>How the engine works</b><i>Six stages, one loop. Nothing ships without you.</i><span class="gw-link gw-link--arrow">See the engine</span></a>
+              </div>
+            </div>
+          </li>
+          <li class="gw-nav__item">
+            <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-usecases" data-gw-mega="gw-mega-usecases">Use cases</button>
+            <div class="gw-mega" id="gw-mega-usecases" hidden>
+              <div class="gw-wrap gw-mega__grid">
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Adaptive funnels</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/meta-ads"><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="M3 11v2a1 1 0 0 0 1 1h3l5 4V6L7 10H4a1 1 0 0 0-1 1z"/><path d="M16 9a4 4 0 0 1 0 6"/></svg></span><span><b>Meta, Google &amp; TikTok ads</b><i>A funnel for every ad angle</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/klaviyo-personalized-landing-pages"><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="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span><b>Klaviyo email <span class="gw-badge gw-badge--warning">Early access</span></b><i>A page per recipient, after the click</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Adaptive storefront</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder"><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="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg></span><span><b>Headless storefront</b><i>Your whole Shopify store, on GemBoss</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/agent-ready"><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="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4"/><circle cx="9.5" cy="13.5" r="1"/><circle cx="14.5" cy="13.5" r="1"/></svg></span><span><b>AI agents &amp; AI search</b><i>Readable by AI, shoppable by agents</i></span></a>
+                </div>
+                <a class="gw-mega__feature" data-gw-spot href="https://gemboss.ai/meta-ads"><b>Every ad gets its own page</b><i>The page keeps the promise the ad made.</i><span class="gw-link gw-link--arrow">See the ad-to-page path</span></a>
+              </div>
+            </div>
+          </li>
+          <li class="gw-nav__item"><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
+          <li class="gw-nav__item">
+            <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-resources" data-gw-mega="gw-mega-resources">Resources</button>
+            <div class="gw-mega" id="gw-mega-resources" hidden>
+              <div class="gw-wrap gw-mega__grid">
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Learn</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/blog"><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 4h11a2 2 0 0 1 2 2v14H6a2 2 0 0 1-2-2z"/><path d="M8 8h7M8 12h7"/></svg></span><span><b>Blog</b><i>Playbooks and guides</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/docs"><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="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg></span><span><b>Docs</b><i>Guides and MCP tools</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Company</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/company"><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="9"/><path d="M12 11v5M12 8h.01"/></svg></span><span><b>About</b><i>Why we build it</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/contact"><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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span><span><b>Contact</b><i>Talk to a human</i></span></a>
+                </div>
+              </div>
+            </div>
+          </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-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
+        <a class="gw-btn gw-btn--secondary gw-btn--sm" href="https://gemboss.ai/contact">Book a demo</a>
+        <a class="gw-btn gw-btn--sm" href="https://admin.gemboss.ai/signup">Start free</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>Product</summary>
+          <ul class="gw-mobile-menu__list">
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/funnel">Funnel builder</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder">Storefront builder</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/gemx">Tests &amp; personalization</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/gemoffers">Offers &amp; upsells</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/integrations">Integrations</a></li>
+          </ul>
+        </details>
+        <details class="gw-mobile-menu__group">
+          <summary>Use cases</summary>
+          <ul class="gw-mobile-menu__list">
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/meta-ads">Meta, Google &amp; TikTok ads</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder">Headless storefront</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/agent-ready">AI agents &amp; AI search</a></li>
+          </ul>
+        </details>
+        <a class="gw-mobile-menu__top" href="https://gemboss.ai/pricing">Pricing</a>
+        <details class="gw-mobile-menu__group">
+          <summary>Resources</summary>
+          <ul class="gw-mobile-menu__list">
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/blog">Blog</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/docs">Docs</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/company">About</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/contact">Contact</a></li>
+          </ul>
+        </details>
+        <div class="gw-mobile-menu__actions">
+          <a class="gw-btn gw-btn--block" href="https://admin.gemboss.ai/signup">Start free</a>
+          <a class="gw-btn gw-btn--secondary gw-btn--block" href="https://gemboss.ai/contact">Book a demo</a>
+          <a class="gw-mobile-menu__link" href="https://admin.gemboss.ai/login">Sign in</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  <main id="main">
+    <section class="gw-section" aria-labelledby="spot-h">
+      <div class="gw-wrap">
+        <div class="gw-section__head">
+          <p class="gw-label">Spotlight, 0.9.0</p>
+          <h1 id="spot-h"><span class="gw-dim">A light where you can click.</span> Nowhere else.</h1>
+          <p class="gw-lead">Move a mouse over a plan, a card or the button at the end: a soft light in the brand's accent follows it. Headings and words stay still. On a phone nothing changes, and with reduced motion the light stays in the middle.</p>
+        </div>
+        <div class="gw-segmented" role="radiogroup" aria-label="Brand" data-gw-segmented="brand">
+          <button type="button" role="radio" aria-checked="true" value="gemboss">GemBoss</button>
+          <button type="button" role="radio" aria-checked="false" value="gempages">GemPages-style</button>
+        </div>
+        <p class="gw-note" data-gw-show="brand:gemboss">GemBoss: tight corners, the ink button, the iris accent. The words and prices are gemboss.ai's.</p>
+        <p class="gw-note" data-gw-show="brand:gempages" hidden>A GemPages-style brand: soft corners, the accent button and GemPages' blue. The light is the brand's accent, so it turns blue by itself. Example brand, not GemPages' page.</p>
+      </div>
+    </section>
+    <!-- plan cards: each a card with one action, lit as a whole -->
+    <section class="gw-section gw-section--soft" aria-labelledby="plans-h">
+      <div class="gw-wrap">
+        <div class="gw-section__head">
+          <p class="gw-label">Plan cards</p>
+          <h2 id="plans-h"><span class="gw-dim">One plan, one action.</span> The whole card lights.</h2>
+          <p class="gw-lead">Each card holds exactly one button, so the light on the card points at it.</p>
+        </div>
+        <div class="gw-pricing">
+          <div class="gw-plan" data-gw-spot>
+            <h3>Starter</h3>
+            <p>Find your first winning angle.</p>
+            <p class="gw-plan__price">$49 <small>/ month</small></p>
+            <p>Billed monthly through Shopify</p>
+            <a class="gw-btn gw-btn--secondary gw-btn--block" href="https://admin.gemboss.ai/signup">Start 14-day free trial</a>
+            <ul class="gw-list--check">
+              <li>10,000 funnel sessions a month</li>
+              <li>3 funnels live at once</li>
+              <li>2 A/B tests at once</li>
+              <li>50 AI credits a month</li>
+            </ul>
+          </div>
+          <div class="gw-plan gw-plan--featured" data-gw-spot>
+            <span class="gw-badge gw-badge--accent">Recommended for $10k–50k</span>
+            <h3>Growth</h3>
+            <p>Test new angles every week.</p>
+            <p class="gw-plan__price">$149 <small>/ month</small></p>
+            <p>Billed monthly through Shopify</p>
+            <a class="gw-btn gw-btn--block" href="https://admin.gemboss.ai/signup">Start 14-day free trial</a>
+            <ul class="gw-list--check">
+              <li>50,000 funnel sessions a month</li>
+              <li>15 funnels live at once</li>
+              <li>5 A/B tests at once</li>
+              <li>200 AI credits a month</li>
+            </ul>
+          </div>
+          <div class="gw-plan" data-gw-spot>
+            <h3>Scale</h3>
+            <p>Run many angles at once.</p>
+            <p class="gw-plan__price">$399 <small>/ month</small></p>
+            <p>Billed monthly through Shopify</p>
+            <a class="gw-btn gw-btn--secondary gw-btn--block" href="https://admin.gemboss.ai/signup">Start 14-day free trial</a>
+            <ul class="gw-list--check">
+              <li>200,000 funnel sessions a month</li>
+              <li>Unlimited funnels live at once</li>
+              <li>20 A/B tests at once</li>
+              <li>500 AI credits a month</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- link cards and the mega menu's feature card: each one link -->
+    <section class="gw-section" aria-labelledby="cards-h">
+      <div class="gw-wrap">
+        <div class="gw-section__head">
+          <p class="gw-label">Cards</p>
+          <h2 id="cards-h"><span class="gw-dim">A card that is one link.</span> The light says so.</h2>
+          <p class="gw-lead">Two link cards, and the feature card of the Product menu: the Stage, a night ground where the light is stronger.</p>
+        </div>
+        <div class="gw-grid--3">
+          <a class="gw-card gw-card--link" href="https://gemboss.ai/funnel" data-gw-spot>
+            <h3>Funnel builder</h3>
+            <p>A funnel for every angle, from the ad to the second order.</p>
+            <span class="gw-link gw-link--arrow">See the funnel builder</span>
+          </a>
+          <a class="gw-card gw-card--link" href="https://gemboss.ai/ai-store-builder" data-gw-spot>
+            <h3>Storefront builder</h3>
+            <p>A headless storefront on the Shopify you already run.</p>
+            <span class="gw-link gw-link--arrow">See the storefront builder</span>
+          </a>
+          <a class="gw-mega__feature" href="https://gemboss.ai/engine" data-gw-spot><b>How the engine works</b><i>Six stages, one loop. Nothing ships without you.</i><span class="gw-link gw-link--arrow">See the engine</span></a>
+        </div>
+      </div>
+    </section>
+    <!-- night band: only the primary button lights -->
+    <section class="gw-section gw-band--night" aria-labelledby="cta-h">
+      <div class="gw-wrap gw-cta">
+        <h2 id="cta-h">Put the engine to work on your next launch.</h2>
+        <p class="gw-lead">Start with one product. GemBoss drafts the angles, the pages and the first test, and waits for your OK.</p>
+        <div class="gw-actions">
+          <a class="gw-btn" href="https://admin.gemboss.ai/signup" data-gw-spot>Start free</a>
+          <a class="gw-btn gw-btn--secondary" href="https://gemboss.ai/contact">Book a demo</a>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer class="gw-footer">
+    <div class="gw-wrap">
+      <div class="gw-footer__bottom">
+        <span><span data-gw-show="brand:gemboss">© 2026 GemBoss. All rights reserved.</span><span data-gw-show="brand:gempages" hidden>© 2026 Example brand. Sample text.</span></span>
+        <ul aria-label="Legal">
+          <li><a href="https://gemboss.ai/privacy">Privacy</a></li>
+          <li><a href="https://gemboss.ai/terms">Terms</a></li>
+        </ul>
+      </div>
+    </div>
+  </footer>
+  <script src="../js/website.js" defer></script>
+  <script>
+    // demo only: the switch above picks a brand. A real site sets its profiles once, in the markup of <html>, and its
+    // accent in site.css (docs/theming.md); this page flips them so one file can show both. #gempages opens it so.
+    (function () {
+      var root = document.documentElement, accent = document.getElementById('demo-gempages');
+      function brand(b) {
+        var gp = b === 'gempages';
+        if (gp) { root.setAttribute('data-gw-radius', 'soft'); root.setAttribute('data-gw-action', 'accent'); }
+        else { root.removeAttribute('data-gw-radius'); root.removeAttribute('data-gw-action'); }
+        accent.media = gp ? 'all' : 'not all';
+      }
+      document.addEventListener('gw:segmented', function (e) { if (e.detail.name === 'brand') brand(e.detail.value); });
+      document.addEventListener('DOMContentLoaded', function () {
+        if (location.hash === '#gempages') { var o = document.querySelector('[data-gw-segmented="brand"] [value="gempages"]'); if (o) o.click(); }
+      });
+    })();
+  </script>
+</body>
+</html>