@gemboss/website-ui 0.8.0 → 0.10.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 (22) hide show
  1. package/AGENTS.md +8 -3
  2. package/CHANGELOG.md +110 -0
  3. package/README.md +5 -5
  4. package/bin/lib/check.mjs +19 -0
  5. package/css/effects.css +71 -0
  6. package/css/footer.css +74 -58
  7. package/css/header.css +12 -0
  8. package/css/tokens.css +9 -2
  9. package/demo/footer.html +1 -1
  10. package/demo/index.html +1 -0
  11. package/demo/spotlight.html +291 -0
  12. package/docs/components.md +62 -10
  13. package/docs/markup-contract.md +45 -7
  14. package/docs/theming.md +6 -0
  15. package/js/website.js +54 -4
  16. package/js/website.mjs +70 -7
  17. package/package.json +1 -1
  18. package/skill/SKILL.md +2 -0
  19. package/system.json +16 -4
  20. package/templates/footer.html +11 -9
  21. package/website.css +168 -61
  22. package/website.min.css +1 -1
package/css/tokens.css CHANGED
@@ -69,6 +69,13 @@
69
69
  --gw-ease: cubic-bezier(.22,1,.36,1);
70
70
  --gw-reveal-ms: 700ms;
71
71
  --gw-spin-ms: 700ms;
72
+ --gw-spot-radius: 260px;
73
+ --gw-spot-radius-action: 120px;
74
+ --gw-spot-strength: 22%;
75
+ --gw-spot-strength-action: 38%;
76
+ --gw-spot-strength-stage: 40%;
77
+ --gw-spot-ms: 550ms;
78
+ --gw-spot-ease: cubic-bezier(.16,1,.3,1);
72
79
  --gw-wash-pink: #ff6f5e;
73
80
  --gw-wash-violet: #7c8af7;
74
81
  --gw-wash-sky: #43b0ff;
@@ -87,7 +94,7 @@
87
94
  --gw-surface: #ffffff;
88
95
  --gw-ink: #1b1c1e;
89
96
  --gw-ink-2: #3b3d42;
90
- --gw-muted: #686b71;
97
+ --gw-muted: #6a6d73;
91
98
  --gw-line: #e5e7ea;
92
99
  --gw-line-strong: #d5d8dd;
93
100
  --gw-line-control: #85888e;
@@ -179,7 +186,7 @@
179
186
  --gw-surface: #ffffff;
180
187
  --gw-ink: #1b1c1e;
181
188
  --gw-ink-2: #3b3d42;
182
- --gw-muted: #686b71;
189
+ --gw-muted: #6a6d73;
183
190
  --gw-line: #e5e7ea;
184
191
  --gw-line-strong: #d5d8dd;
185
192
  --gw-line-control: #85888e;
package/demo/footer.html CHANGED
@@ -312,7 +312,7 @@
312
312
  <li><a href="https://www.gempages.net" target="_blank" rel="noopener">GemPages<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
313
313
  </ul>
314
314
  </div>
315
- <div class="gw-footer__wordmark" aria-hidden="true" data-gw-show="brand:gemboss"><svg viewBox="0 0 100 116"><polygon points="26,14 74,14 66,50 34,50" fill="currentColor"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="6" 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="3.8" stroke-linejoin="round"/></svg><span>GemBoss</span></div>
315
+ <div class="gw-footer__wordmark" aria-hidden="true" data-gw-show="brand:gemboss"><svg width="86" height="100" viewBox="0 0 100 116"><polygon points="26,14 74,14 66,50 34,50" fill="currentColor"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="6" 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="3.8" stroke-linejoin="round"/></svg><span>GemBoss</span></div>
316
316
  <div class="gw-footer__wordmark" aria-hidden="true" data-gw-show="brand:gempages" hidden><svg viewBox="0 0 26 26"><rect x="1" y="1" width="24" height="24" rx="6" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8 9h10M8 13h10M8 17h6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg><span>Example brand</span></div>
317
317
  </div>
318
318
  </footer>
package/demo/index.html CHANGED
@@ -587,6 +587,7 @@ npx gemboss-website check --fix-list</code></pre>
587
587
  <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>
588
588
  <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>
589
589
  <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>
590
+ <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>
590
591
  </div>
591
592
  </section>
592
593
 
package/demo/spotlight.html ADDED
@@ -0,0 +1,291 @@
1
+ <!doctype html>
2
+ <!-- Kit demo (0.9.0): the spotlight, data-gw-spot (docs/components.md, Spotlight), on what it is for: plan cards, link
3
+ cards, the mega menu's feature card (open Product, or see it below) and the primary button of a night band. Move a
4
+ mouse over them; on a phone nothing changes. The switch shows the same page for a GemPages-style brand: soft corners,
5
+ the accent button and the GemPages accent of docs/theming.md, so the light turns blue by itself. A real site picks
6
+ its profiles once, on <html> (docs/theming.md); here a small demo script sets them when the switch moves. Words and
7
+ prices from gemboss.ai; "Example brand" is not GemPages. -->
8
+ <html lang="en">
9
+ <head>
10
+ <meta charset="utf-8">
11
+ <meta name="viewport" content="width=device-width, initial-scale=1">
12
+ <title>Spotlight · website UI kit</title>
13
+ <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.">
14
+ <script>try{var t=localStorage.getItem('gw-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t)}catch(e){}</script>
15
+ <link rel="preconnect" href="https://fonts.googleapis.com">
16
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700&display=swap">
18
+ <link rel="stylesheet" href="../website.css">
19
+ <!-- the GemPages-style brand's whole CSS (docs/theming.md, "A full example"); on only while the switch says so -->
20
+ <style id="demo-gempages" media="not all">
21
+ :root {
22
+ --gw-accent-light: #3c67ff;
23
+ --gw-accent-strong-light: #2f52d6;
24
+ --gw-accent-soft-light: #eaefff;
25
+ --gw-on-accent-light: #ffffff;
26
+ --gw-accent-dark: #7c9bff;
27
+ --gw-accent-strong-dark: #a9beff;
28
+ --gw-accent-soft-dark: #16213d;
29
+ --gw-on-accent-dark: #0d0d12;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="gw-page">
34
+ <a class="gw-skip" href="#main">Skip to content</a>
35
+
36
+ <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>
37
+ <header class="gw-header" data-gw-header>
38
+ <div class="gw-wrap gw-header__bar">
39
+ <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>
40
+ <nav class="gw-nav" aria-label="Main">
41
+ <ul class="gw-nav__list">
42
+ <li class="gw-nav__item">
43
+ <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-product" data-gw-mega="gw-mega-product">Product</button>
44
+ <div class="gw-mega" id="gw-mega-product" hidden>
45
+ <div class="gw-wrap gw-mega__grid">
46
+ <div class="gw-mega__col">
47
+ <p class="gw-mega__heading">Build</p>
48
+ <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>
49
+ <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>
50
+ <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>
51
+ </div>
52
+ <div class="gw-mega__col">
53
+ <p class="gw-mega__heading">Grow</p>
54
+ <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>
55
+ <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>
56
+ <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>
57
+ </div>
58
+ <div class="gw-mega__col">
59
+ <p class="gw-mega__heading">Connect</p>
60
+ <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>
61
+ <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>
62
+ <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>
63
+ </div>
64
+ <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>
65
+ </div>
66
+ </div>
67
+ </li>
68
+ <li class="gw-nav__item">
69
+ <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-usecases" data-gw-mega="gw-mega-usecases">Use cases</button>
70
+ <div class="gw-mega" id="gw-mega-usecases" hidden>
71
+ <div class="gw-wrap gw-mega__grid">
72
+ <div class="gw-mega__col">
73
+ <p class="gw-mega__heading">Adaptive funnels</p>
74
+ <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>
75
+ <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>
76
+ </div>
77
+ <div class="gw-mega__col">
78
+ <p class="gw-mega__heading">Adaptive storefront</p>
79
+ <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>
80
+ <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>
81
+ </div>
82
+ <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>
83
+ </div>
84
+ </div>
85
+ </li>
86
+ <li class="gw-nav__item"><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
87
+ <li class="gw-nav__item">
88
+ <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-resources" data-gw-mega="gw-mega-resources">Resources</button>
89
+ <div class="gw-mega" id="gw-mega-resources" hidden>
90
+ <div class="gw-wrap gw-mega__grid">
91
+ <div class="gw-mega__col">
92
+ <p class="gw-mega__heading">Learn</p>
93
+ <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>
94
+ <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>
95
+ </div>
96
+ <div class="gw-mega__col">
97
+ <p class="gw-mega__heading">Company</p>
98
+ <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>
99
+ <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>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </li>
104
+ </ul>
105
+ </nav>
106
+ <div class="gw-header__actions">
107
+ <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>
108
+ <a class="gw-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
109
+ <a class="gw-btn gw-btn--secondary gw-btn--sm" href="https://gemboss.ai/contact">Book a demo</a>
110
+ <a class="gw-btn gw-btn--sm" href="https://admin.gemboss.ai/signup">Start free</a>
111
+ <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>
112
+ </div>
113
+ </div>
114
+ <div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
115
+ <nav class="gw-wrap" aria-label="Main, mobile">
116
+ <details class="gw-mobile-menu__group">
117
+ <summary>Product</summary>
118
+ <ul class="gw-mobile-menu__list">
119
+ <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/funnel">Funnel builder</a></li>
120
+ <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder">Storefront builder</a></li>
121
+ <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/gemx">Tests &amp; personalization</a></li>
122
+ <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/gemoffers">Offers &amp; upsells</a></li>
123
+ <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/integrations">Integrations</a></li>
124
+ </ul>
125
+ </details>
126
+ <details class="gw-mobile-menu__group">
127
+ <summary>Use cases</summary>
128
+ <ul class="gw-mobile-menu__list">
129
+ <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/meta-ads">Meta, Google &amp; TikTok ads</a></li>
130
+ <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder">Headless storefront</a></li>
131
+ <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/agent-ready">AI agents &amp; AI search</a></li>
132
+ </ul>
133
+ </details>
134
+ <a class="gw-mobile-menu__top" href="https://gemboss.ai/pricing">Pricing</a>
135
+ <details class="gw-mobile-menu__group">
136
+ <summary>Resources</summary>
137
+ <ul class="gw-mobile-menu__list">
138
+ <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/blog">Blog</a></li>
139
+ <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/docs">Docs</a></li>
140
+ <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/company">About</a></li>
141
+ <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/contact">Contact</a></li>
142
+ </ul>
143
+ </details>
144
+ <div class="gw-mobile-menu__actions">
145
+ <a class="gw-btn gw-btn--block" href="https://admin.gemboss.ai/signup">Start free</a>
146
+ <a class="gw-btn gw-btn--secondary gw-btn--block" href="https://gemboss.ai/contact">Book a demo</a>
147
+ <a class="gw-mobile-menu__link" href="https://admin.gemboss.ai/login">Sign in</a>
148
+ </div>
149
+ </nav>
150
+ </div>
151
+ </header>
152
+
153
+ <main id="main">
154
+ <section class="gw-section" aria-labelledby="spot-h">
155
+ <div class="gw-wrap">
156
+ <div class="gw-section__head">
157
+ <p class="gw-label">Spotlight, 0.9.0</p>
158
+ <h1 id="spot-h"><span class="gw-dim">A light where you can click.</span> Nowhere else.</h1>
159
+ <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>
160
+ </div>
161
+ <div class="gw-segmented" role="radiogroup" aria-label="Brand" data-gw-segmented="brand">
162
+ <button type="button" role="radio" aria-checked="true" value="gemboss">GemBoss</button>
163
+ <button type="button" role="radio" aria-checked="false" value="gempages">GemPages-style</button>
164
+ </div>
165
+ <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>
166
+ <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>
167
+ </div>
168
+ </section>
169
+
170
+ <!-- plan cards: each a card with one action, lit as a whole -->
171
+ <section class="gw-section gw-section--soft" aria-labelledby="plans-h">
172
+ <div class="gw-wrap">
173
+ <div class="gw-section__head">
174
+ <p class="gw-label">Plan cards</p>
175
+ <h2 id="plans-h"><span class="gw-dim">One plan, one action.</span> The whole card lights.</h2>
176
+ <p class="gw-lead">Each card holds exactly one button, so the light on the card points at it.</p>
177
+ </div>
178
+ <div class="gw-pricing">
179
+ <div class="gw-plan" data-gw-spot>
180
+ <h3>Starter</h3>
181
+ <p>Find your first winning angle.</p>
182
+ <p class="gw-plan__price">$49 <small>/ month</small></p>
183
+ <p>Billed monthly through Shopify</p>
184
+ <a class="gw-btn gw-btn--secondary gw-btn--block" href="https://admin.gemboss.ai/signup">Start 14-day free trial</a>
185
+ <ul class="gw-list--check">
186
+ <li>10,000 funnel sessions a month</li>
187
+ <li>3 funnels live at once</li>
188
+ <li>2 A/B tests at once</li>
189
+ <li>50 AI credits a month</li>
190
+ </ul>
191
+ </div>
192
+ <div class="gw-plan gw-plan--featured" data-gw-spot>
193
+ <span class="gw-badge gw-badge--accent">Recommended for $10k–50k</span>
194
+ <h3>Growth</h3>
195
+ <p>Test new angles every week.</p>
196
+ <p class="gw-plan__price">$149 <small>/ month</small></p>
197
+ <p>Billed monthly through Shopify</p>
198
+ <a class="gw-btn gw-btn--block" href="https://admin.gemboss.ai/signup">Start 14-day free trial</a>
199
+ <ul class="gw-list--check">
200
+ <li>50,000 funnel sessions a month</li>
201
+ <li>15 funnels live at once</li>
202
+ <li>5 A/B tests at once</li>
203
+ <li>200 AI credits a month</li>
204
+ </ul>
205
+ </div>
206
+ <div class="gw-plan" data-gw-spot>
207
+ <h3>Scale</h3>
208
+ <p>Run many angles at once.</p>
209
+ <p class="gw-plan__price">$399 <small>/ month</small></p>
210
+ <p>Billed monthly through Shopify</p>
211
+ <a class="gw-btn gw-btn--secondary gw-btn--block" href="https://admin.gemboss.ai/signup">Start 14-day free trial</a>
212
+ <ul class="gw-list--check">
213
+ <li>200,000 funnel sessions a month</li>
214
+ <li>Unlimited funnels live at once</li>
215
+ <li>20 A/B tests at once</li>
216
+ <li>500 AI credits a month</li>
217
+ </ul>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </section>
222
+
223
+ <!-- link cards and the mega menu's feature card: each one link -->
224
+ <section class="gw-section" aria-labelledby="cards-h">
225
+ <div class="gw-wrap">
226
+ <div class="gw-section__head">
227
+ <p class="gw-label">Cards</p>
228
+ <h2 id="cards-h"><span class="gw-dim">A card that is one link.</span> The light says so.</h2>
229
+ <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>
230
+ </div>
231
+ <div class="gw-grid--3">
232
+ <a class="gw-card gw-card--link" href="https://gemboss.ai/funnel" data-gw-spot>
233
+ <h3>Funnel builder</h3>
234
+ <p>A funnel for every angle, from the ad to the second order.</p>
235
+ <span class="gw-link gw-link--arrow">See the funnel builder</span>
236
+ </a>
237
+ <a class="gw-card gw-card--link" href="https://gemboss.ai/ai-store-builder" data-gw-spot>
238
+ <h3>Storefront builder</h3>
239
+ <p>A headless storefront on the Shopify you already run.</p>
240
+ <span class="gw-link gw-link--arrow">See the storefront builder</span>
241
+ </a>
242
+ <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>
243
+ </div>
244
+ </div>
245
+ </section>
246
+
247
+ <!-- night band: only the primary button lights -->
248
+ <section class="gw-section gw-band--night" aria-labelledby="cta-h">
249
+ <div class="gw-wrap gw-cta">
250
+ <h2 id="cta-h">Put the engine to work on your next launch.</h2>
251
+ <p class="gw-lead">Start with one product. GemBoss drafts the angles, the pages and the first test, and waits for your OK.</p>
252
+ <div class="gw-actions">
253
+ <a class="gw-btn" href="https://admin.gemboss.ai/signup" data-gw-spot>Start free</a>
254
+ <a class="gw-btn gw-btn--secondary" href="https://gemboss.ai/contact">Book a demo</a>
255
+ </div>
256
+ </div>
257
+ </section>
258
+ </main>
259
+
260
+ <footer class="gw-footer">
261
+ <div class="gw-wrap">
262
+ <div class="gw-footer__bottom">
263
+ <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>
264
+ <ul aria-label="Legal">
265
+ <li><a href="https://gemboss.ai/privacy">Privacy</a></li>
266
+ <li><a href="https://gemboss.ai/terms">Terms</a></li>
267
+ </ul>
268
+ </div>
269
+ </div>
270
+ </footer>
271
+
272
+ <script src="../js/website.js" defer></script>
273
+ <script>
274
+ // demo only: the switch above picks a brand. A real site sets its profiles once, in the markup of <html>, and its
275
+ // accent in site.css (docs/theming.md); this page flips them so one file can show both. #gempages opens it so.
276
+ (function () {
277
+ var root = document.documentElement, accent = document.getElementById('demo-gempages');
278
+ function brand(b) {
279
+ var gp = b === 'gempages';
280
+ if (gp) { root.setAttribute('data-gw-radius', 'soft'); root.setAttribute('data-gw-action', 'accent'); }
281
+ else { root.removeAttribute('data-gw-radius'); root.removeAttribute('data-gw-action'); }
282
+ accent.media = gp ? 'all' : 'not all';
283
+ }
284
+ document.addEventListener('gw:segmented', function (e) { if (e.detail.name === 'brand') brand(e.detail.value); });
285
+ document.addEventListener('DOMContentLoaded', function () {
286
+ if (location.hash === '#gempages') { var o = document.querySelector('[data-gw-segmented="brand"] [value="gempages"]'); if (o) o.click(); }
287
+ });
288
+ })();
289
+ </script>
290
+ </body>
291
+ </html>
package/docs/components.md CHANGED
@@ -36,7 +36,7 @@ Don't remove the skip link, and don't leave out `id="main"`.
36
36
 
37
37
  `js/website.js` (a `<script defer>`) or `js/website.mjs` (an `import`) wires every part that moves: the mega menu,
38
38
  the mobile menu, the theme toggle, reveal, the header's scroll state, the current page, the segmented control, the
39
- 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
39
+ 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
40
40
  preview) is wired by calling `init` on it, as often as needed: an element is wired once.
41
41
 
42
42
  ```js
@@ -415,19 +415,24 @@ The footer of gemboss.ai (0.7.0): one per site, the same on every page, from `te
415
415
  its rows (its columns, its family, its words) and deletes the optional parts it does not use; it never adds a footer
416
416
  part of its own. See it in `demo/footer.html`, with a switch to the same footer for a GemPages-style brand.
417
417
 
418
+ Since 0.10.0 every value is gemboss.ai's, 1:1: measured against the site's own footer before it moved to the kit, part
419
+ by part and pixel by pixel, at 14 widths from 320 to 1920px, light and dark, folded and open, hovered and focused from
420
+ the keyboard. Its widths are the site's: folds up to 620px, columns open from 621px, one row from 1081px. A brand
421
+ changes what it fills in and the tokens (colours, the radius profile), never these values.
422
+
418
423
  | class | for |
419
424
  |---|---|
420
- | `.gw-footer` | the footer: one hairline on top, white like the page |
421
- | `.gw-footer__grid` | brand block and link columns: 2 columns on phones, 3 from 768px, one row from 1080px. With folding columns (0.7.0): one track of rows below 768px, and from 1080px the brand's track as on gemboss.ai (193.5px beside 1120px), the columns sharing the rest: three to six |
422
- | `.gw-footer__brand` | the brand and one sentence, full width on phones |
423
- | `.gw-footer__col`, `__heading` | a `<nav>` column: a sentence-case heading and a `<ul>` of links |
424
- | `.gw-footer__fold` | 0.7.0: the column's `<details>`, its `<summary>` holding the `__heading`. Below 768px a 52px row with a chevron, folded until tapped (44px links); from 768px the open column, the summary only its heading (no box, no Tab stop). Works without the script |
425
+ | `.gw-footer` | the footer: one hairline on top, on the page's own ground (transparent), 64px above and 32px below |
426
+ | `.gw-footer__grid` | brand block and link columns: 2 columns up to 1080px (the brand block full width up to 620px), one row from 1081px. With folding columns (0.7.0): one track of rows up to 620px, and from 1081px the brand's track as on gemboss.ai (193.5px beside 1120px), the columns sharing the rest: three to six |
427
+ | `.gw-footer__brand` | the brand (a 34px mark) and one sentence of 30 characters a line at most |
428
+ | `.gw-footer__col`, `__heading` | a `<nav>` column: a sentence-case heading and a `<ul>` of links (44px rows up to 768px and on touch). The heading is set in `--gw-font` and balanced, whatever the page does to its body or its `h2` |
429
+ | `.gw-footer__fold` | 0.7.0: the column's `<details>`, its `<summary>` holding the `__heading`. Up to 620px a 52px row with a drawn chevron that turns at once, folded until tapped; from 621px the open column, the summary only its heading (no box, no Tab stop). Works without the script |
425
430
  | `.gw-footer__ask`, `__ask-label` | 0.7.0, optional, in the brand block: "Ask AI about [Brand]" and links that open ChatGPT, Claude, Perplexity and Google AI Mode with one neutral question typed in |
426
- | `.gw-footer__family` | 0.7.0, optional, after the grid: a `<nav>` row of products, a fold whose heading is its label, a list of `<a><b>Name</b> <i>One line</i></a>`; two a line on phones, four from 768px, from 1080px the label beside the items. Repeat it for a second family |
427
- | `.gw-footer__ext` | 0.7.0: the drawn ↗ after a link that leaves the site, `aria-hidden="true"` |
431
+ | `.gw-footer__family` | 0.7.0, optional, after the grid: a `<nav>` row of products, a fold whose heading is its label, a list of `<a><b>Name</b> <i>One line</i></a>`; two a line on phones, four from 621px, from 1081px the label beside the items. Repeat it for a second family |
432
+ | `.gw-footer__ext` | 0.7.0: the ↗ after a link that leaves the site, `aria-hidden="true"`: empty, the kit draws it; holding the glyph `↗` (0.10.0, as gemboss.ai writes it), it is set muted at weight 400 |
428
433
  | `.gw-footer__bottom` | copyright, legal links, social links; alone (no grid above), it drops its top rule |
429
- | `.gw-footer__toggle` | 0.7.0, optional: with `.gw-theme-toggle` and `data-gw-theme-toggle`, the theme toggle in the bottom row, a 32px square with one hairline (44px on touch), before the social links |
430
- | `.gw-footer__wordmark` | 0.7.0, optional, last: the brand's mark (inline SVG in `currentColor`) and name, ink at 10%, `--gw-display-wordmark`; `aria-hidden="true"`; not on phones |
434
+ | `.gw-footer__toggle` | 0.7.0, optional: with `.gw-theme-toggle` and `data-gw-theme-toggle`, the theme toggle in the bottom row, a 32px square with one hairline (44px on touch), before the social links. On hover its hairline turns ink and its icon the accent. Two icons (0.10.0): `.gw-theme-toggle__moon` shows in light, `.gw-theme-toggle__sun` in dark |
435
+ | `.gw-footer__wordmark` | 0.7.0, optional, last: the brand's mark (inline SVG in `currentColor`, 7vw wide) and name (weight 800), ink at 10%, `--gw-display-wordmark`; `aria-hidden="true"`; not up to 620px |
431
436
  | `.gw-footer__newsletter` | 0.6.0, optional: a `<form>` in the brand block, 24px under its sentence: a `.gw-field` with its label, a `.gw-form-inline` row (the email field and a `--secondary` button) and the note |
432
437
  | `.gw-visually-hidden` | 0.7.0, anywhere: words for a screen reader only, " (opens in a new tab)" in a link with `target="_blank"` |
433
438
 
@@ -833,6 +838,53 @@ not make public with the review; masonry or a carousel that moves by itself.
833
838
  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
834
839
  the first screen, and don't animate anything but `transform` and `opacity`.
835
840
 
841
+ ### Spotlight `data-gw-spot` (0.9.0)
842
+
843
+ A soft light in the brand's accent that follows a mouse over a thing you click (Chris, 25/10/2026). Put
844
+ `data-gw-spot` on the `<a href>` or the `<button>` itself, or on a card that holds exactly one of them, and nowhere
845
+ else:
846
+
847
+ | where | markup |
848
+ |---|---|
849
+ | 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>` |
850
+ | a link card | `<a class="gw-card gw-card--link" href="/mcp" data-gw-spot>…</a>` |
851
+ | the mega menu's feature card (the Stage) | `<a class="gw-mega__feature" href="/engine" data-gw-spot>…</a>` |
852
+ | the primary button of a night band | `<a class="gw-btn" href="/signup" data-gw-spot>Start free</a>` inside `.gw-band--night` |
853
+ | 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>` |
854
+
855
+ What it does: on hover the light grows from where the pointer comes in (0.55s, an expo-out ease), then trails the
856
+ 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
857
+ corners, and moves nothing. It is `--gw-accent` (22% on a card, 38% on a button, 40% on the Stage's night ground), the
858
+ `-dark` family in dark mode and night bands, so another brand's page lights in its own accent by itself. While a thing
859
+ 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
860
+ gone. Nothing moves for it, and nothing in your markup changes.
861
+
862
+ - Opt-in, element by element: a page without `data-gw-spot` does not change. Use it on the parts above, and more only
863
+ where it is a link or a button; one lit thing per card.
864
+ - Pointer devices only: nothing changes on a phone or a tablet without a mouse.
865
+ - Keyboard focus shows the same light in the middle, as large as on hover: on the focused link or button, and on a card
866
+ whose one action has the focus.
867
+ - Reduced motion: the light stands still in the middle and appears at once (the muted words with it); the script
868
+ follows no pointer.
869
+ - A browser without `@property` or `color-mix()` shows no light at all (nothing half drawn).
870
+ - The script wires it like every other part (`data-gw-ready="spot"`, `init`/`destroy`) and puts `.gw-spot` on the
871
+ element that carries the light, with the pointer's place in `--gw-spot-x` and `--gw-spot-y`. No event. Its values are
872
+ tokens (`system.json` `motion.spot`: `--gw-spot-radius`, `-radius-action`, `-strength`, `-strength-action`,
873
+ `-strength-stage`, `-ms`, `-ease`).
874
+
875
+ Don't: put it on a heading, a paragraph, a list of text or a section (`check` reports `spot-target`), or on a card
876
+ with no action or with two; light words, or a heading, with a gradient or the accent (still forbidden: a heading
877
+ that glows under the pointer was looked at and turned down); a light of more than one colour, or a colour of your own;
878
+ write `.gw-spot` or `--gw-spot-*` yourself, or follow the pointer with your own script.
879
+
880
+ ## Additions to the markup contract in 0.9.0
881
+
882
+ The spotlight: the `data-gw-spot` hook (empty, or a selector for an inner element), the script's `spot` part
883
+ (`data-gw-ready="spot"`) and its `.gw-spot` class on the element that carries the light, with `--gw-spot-x` and
884
+ `--gw-spot-y` on it. Tokens: `--gw-spot-radius`, `--gw-spot-radius-action`, `--gw-spot-strength`,
885
+ `--gw-spot-strength-action`, `--gw-spot-strength-stage`, `--gw-spot-ms`, `--gw-spot-ease`. No event. No markup or
886
+ class of 0.8.0 changes.
887
+
836
888
  ## Additions to the markup contract in 0.8.0
837
889
 
838
890
  The drill-down mobile menu: `data-gw-menu="drill"` on `.gw-mobile-menu`, `.gw-mobile-menu__head` (`__back`, `__title`),
package/docs/markup-contract.md CHANGED
@@ -28,8 +28,8 @@ BEM-ish: `.gw-block`, `.gw-block__part`, `.gw-block--variant`.
28
28
 
29
29
  One script wires every part below: the mega menu, the mobile menu, the theme toggle, reveal, the header's scroll
30
30
  state, the current page, the segmented control, the busy button, an article's contents list and the scroll box of its
31
- 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).
32
- It comes in two entries built from one source
31
+ 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
32
+ the spotlight (0.9.0). It comes in two entries built from one source
33
33
  (`js/website.mjs`; `scripts/build.mjs` writes `js/website.js` from it and `--check` fails when they differ):
34
34
 
35
35
  | entry | file | how it starts |
@@ -44,9 +44,9 @@ It comes in two entries built from one source
44
44
  to the page (Escape, the outside click, the busy-button guard, the system theme, the scroll) are installed once.
45
45
  - **`destroy(root = document)`** takes back what `init` wired under `root`: its listeners and its marks. An open
46
46
  mega menu or mobile menu is closed first, so an unmounted menu cannot leave the page locked.
47
- - **`version`**: `'0.8.0'`. The classic script exposes the three as `window.gwWebsite`.
47
+ - **`version`**: `'0.10.0'`. The classic script exposes the three as `window.gwWebsite`.
48
48
  - **`data-gw-ready`**: on each wired element, the parts wired on it (`mega`, `menu`, `lang`, `theme`, `reveal`,
49
- `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,
49
+ `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,
50
50
  is still wired.
51
51
  - **One copy per page.** The first copy that runs owns the page (`window.gwWebsite`); another one (the classic
52
52
  script next to a bundle, two bundles) hands its calls to it, so nothing is wired twice.
@@ -282,26 +282,31 @@ top-level links and the actions are children of the sheet's `<nav>`.
282
282
  <details class="gw-footer__fold">
283
283
  <summary><h2 class="gw-footer__heading">More from Brand</h2></summary>
284
284
  <ul><li><a href="…"><b>Name<span class="gw-footer__ext" aria-hidden="true"></span>?</b> <i>One line</i></a></li> …</ul>
285
+ <!-- the ↗: empty, the kit draws it (a 12px mask); or the glyph itself, <span class="gw-footer__ext" aria-hidden="true">↗</span>,
286
+ set in the muted colour at weight 400, as gemboss.ai writes it (0.10.0) -->
285
287
  </details>
286
288
  </nav>
287
289
  <div class="gw-footer__bottom">
288
290
  <span>© …</span><ul aria-label="Legal">…</ul>
289
291
  <button class="gw-theme-toggle gw-footer__toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme">svg</button> <!-- optional -->
292
+ <!-- or two icons (0.10.0), the one for the theme in force shown: <svg class="gw-theme-toggle__moon" …>…</svg><svg class="gw-theme-toggle__sun" …>…</svg> -->
290
293
  <ul aria-label="Social">…</ul>
291
294
  </div>
292
295
  <div class="gw-footer__wordmark" aria-hidden="true"><svg viewBox="…">…currentColor…</svg><span>Brand</span></div> <!-- optional -->
296
+ <!-- the mark is 7vw wide (40-96px), its height from its width and height attributes when it has them, else from
297
+ its viewBox: gemboss.ai's gem says width="86" height="100" -->
293
298
  </div>
294
299
  </footer>
295
300
  ```
296
301
 
297
302
  - **Folds** (`.gw-footer__fold`, a `<details>` whose `<summary>` holds the `.gw-footer__heading`): the CSS folds them
298
- below 768px (52px rows, the browser opens and closes them) and draws the open column from 768px, where the summary
303
+ up to 620px (52px rows, the browser opens and closes them) and draws the open column from 621px, where the summary
299
304
  is `display: contents` and the list shows even while the `<details>` is closed (`::details-content`). The script,
300
305
  for each fold with a summary:
301
- - from 768px (`matchMedia('(min-width: 768px)')`) sets `open`, puts `tabindex="-1"` on the summary and cancels a
306
+ - from 621px (`matchMedia('(min-width: 621px)')`) sets `open`, puts `tabindex="-1"` on the summary and cancels a
302
307
  click on it (`preventDefault`), so a heading never folds its column away, in a browser without
303
308
  `::details-content` too;
304
- - below 768px gives back the markup's state: `open` as the markup had it (folded unless it said `open`), the
309
+ - up to 620px gives back the markup's state: `open` as the markup had it (folded unless it said `open`), the
305
310
  summary's own `tabindex` (none, usually); again on every change of width;
306
311
  - `destroy`: the markup's state, its listener and the `fold` mark go. No event.
307
312
  - **Theme toggle**: a `[data-gw-theme-toggle]` in the bottom row is wired like the header's (above); with both on the
@@ -412,6 +417,39 @@ CSS only: the script does not touch a form. The page (or its server) owns valida
412
417
  carry the same number (`stars-markup`), and a `.gw-rating-badge` or `.gw-testimonial` without an `<a href>`
413
418
  (`rating-source`, a warning).
414
419
 
420
+ ## Spotlight (0.9.0)
421
+
422
+ ```html
423
+ <div class="gw-plan" data-gw-spot> … <a class="gw-btn" href="/signup">Start free</a> … </div>
424
+ <a class="gw-card gw-card--link" href="/mcp" data-gw-spot> … </a>
425
+ <a class="gw-mega__feature" href="/engine" data-gw-spot> … </a>
426
+ <a class="gw-btn" href="/signup" data-gw-spot>Start free</a> <!-- inside .gw-band--night -->
427
+ <a class="gw-card gw-card--link" href="/engine" data-gw-spot=".gp-card-art"> <span class="gp-card-art"></span> … </a>
428
+ ```
429
+
430
+ - Markup: `data-gw-spot` on an `<a href>`, a `<button>`, or a `<div>`, `<article>` or `<li>` that holds exactly one
431
+ link or button. Empty, the host carries the light; a selector (`data-gw-spot=".gp-card-art"`) names the inner
432
+ element that carries it instead (the first match). Never a heading, as the host or as the selector's match. `check`
433
+ reports anything else (`spot-target`).
434
+ - Script behaviour (`spot`): in a browser with `@property` and `color-mix()` (else nothing is wired), each host is
435
+ wired once (`data-gw-ready="spot"`), and the element that carries the light gets `.gw-spot` (kept on `destroy` when
436
+ the markup wrote it). On a fine pointer (`(hover: hover) and (pointer: fine)`) without reduced motion, and again on
437
+ every change of either, the host has a `pointerenter` and a `pointermove` listener: entering writes the pointer's
438
+ place at once, in px from the padding box of the element that carries the light, as `--gw-spot-x` and
439
+ `--gw-spot-y` on it; a move asks for one animation frame, and each frame moves the place 18% of the way to the
440
+ pointer until it is within 0.3px (`system.json` `motion.spot.trail`, `.settle`). A touch pointer is ignored.
441
+ `destroy` removes the listeners, cancels the frame, takes `.gw-spot` and the two properties away. No event.
442
+ - CSS (`css/effects.css`, all of it under `(hover: hover) and (pointer: fine)`): the host's `--gw-spot-r` (a registered,
443
+ inherited length) is 0 at rest and `--gw-spot-radius` on hover, on `:focus-visible` and while a descendant has
444
+ `:focus-visible` (`--gw-spot-radius-action` on a `.gw-btn`); the `::before` of `.gw-spot` draws a radial gradient of
445
+ `--gw-accent` at that radius and place, under the words, with `border-radius: inherit`, and transitions the radius
446
+ (`--gw-spot-ms`, `--gw-spot-ease`). Keyboard focus and reduced motion put the light in the middle (on the
447
+ `::before`, so the script's place does not count); reduced motion also drops the transition. Not on a busy button
448
+ (its `::before` is the ring). While the host is lit (hover, `:focus-visible`, a descendant with `:focus-visible`) it
449
+ sets `--gw-muted: var(--gw-ink-2)`, so muted words inside it keep 4.5:1 at the light's middle; descendants take back
450
+ the muted colour only once the light has gone (`transition: color 0s` with the light's time as delay, in `:where()`,
451
+ so a part's own transition wins; none under reduced motion).
452
+
415
453
  ## Brand profiles (0.3.0)
416
454
 
417
455
  - `data-gw-action` and `data-gw-radius` sit on `<html>` only, with a name from `system.json` `profiles` (`ink` or
package/docs/theming.md CHANGED
@@ -41,6 +41,11 @@ Why the `-light` / `-dark` names and not `--gw-accent` itself: the kit sets `--g
41
41
  band. Override the eight primitives once and all of them follow. Overriding `--gw-accent` directly works only until
42
42
  someone presses the theme toggle.
43
43
 
44
+ The spotlight (0.9.0, `data-gw-spot`) is the accent too: its light is `--gw-accent` mixed over what it lights, so a
45
+ brand's page lights in the brand's own colour, in light, in dark and in night bands, with nothing to set. The light
46
+ takes the corners of the element it lights, so both radius profiles hold. A brand does not choose its colour, its
47
+ strength or its size (they are tokens), and never a second colour.
48
+
44
49
  The logo and the favicon are files, not variables: the `<img class="gw-brand__mark">` (26×26, SVG preferred, with
45
50
  `alt=""` because the name is written next to it) and the `<span class="gw-brand__name">` in the header and footer
46
51
  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.
94
99
  - **Accent-coloured section bands.** A section is white, `--gw-bg-soft` or a night band; the accent only lights a
95
100
  night band's top edge.
96
101
  - **All-caps labels.** Labels are sentence case, muted, led by the 8px accent square.
102
+ - **A light on a heading, or in more than one colour.** The spotlight lights things you click, in the accent only.
97
103
 
98
104
  These make a page louder without making it clearer, and `check` reports the last one (`uppercase-label`) and any
99
105
  button filled from site CSS (`accent-button`).