@gemboss/website-ui 0.9.0 → 0.11.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.
- package/CHANGELOG.md +109 -0
- package/README.md +2 -2
- package/bin/lib/check.mjs +6 -2
- package/css/base.css +2 -1
- package/css/effects.css +1 -1
- package/css/footer.css +74 -58
- package/css/header.css +347 -115
- package/css/tokens.css +24 -5
- package/demo/article.html +58 -70
- package/demo/blog.html +58 -70
- package/demo/brand-profiles.html +57 -27
- package/demo/footer.html +59 -71
- package/demo/forms.html +58 -70
- package/demo/header.html +58 -108
- package/demo/index.html +58 -70
- package/demo/spotlight.html +58 -71
- package/demo/theme-example.html +1 -1
- package/docs/components.md +31 -21
- package/docs/markup-contract.md +53 -22
- package/js/website.js +285 -42
- package/js/website.mjs +319 -47
- package/package.json +1 -1
- package/system.json +23 -8
- package/templates/footer.html +11 -9
- package/templates/header.html +47 -24
- package/templates/page.html +54 -20
- package/website.css +449 -181
- package/website.min.css +1 -1
package/demo/index.html
CHANGED
|
@@ -32,80 +32,35 @@
|
|
|
32
32
|
|
|
33
33
|
<div class="gw-announce" role="region" aria-label="Announcement">GemBoss is built by the team behind GemPages. <a href="https://feedback.gemboss.ai/changelog" rel="noopener">What's new on the changelog</a></div>
|
|
34
34
|
<header class="gw-header" data-gw-header>
|
|
35
|
-
<div class="gw-
|
|
35
|
+
<div class="gw-header__bar">
|
|
36
36
|
<a class="gw-brand" href="https://gemboss.ai/"><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>
|
|
37
|
-
<nav class="gw-nav" aria-label="
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
<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 & agents</b><i>Claude and Codex</i></span></a>
|
|
59
|
-
<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>
|
|
60
|
-
</div>
|
|
61
|
-
<a class="gw-mega__feature" 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>
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
</li>
|
|
65
|
-
<li class="gw-nav__item">
|
|
66
|
-
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-usecases" data-gw-mega="gw-mega-usecases">Use cases</button>
|
|
67
|
-
<div class="gw-mega" id="gw-mega-usecases" hidden>
|
|
68
|
-
<div class="gw-wrap gw-mega__grid">
|
|
69
|
-
<div class="gw-mega__col">
|
|
70
|
-
<p class="gw-mega__heading">Adaptive funnels</p>
|
|
71
|
-
<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 & TikTok ads</b><i>A funnel for every ad angle</i></span></a>
|
|
72
|
-
<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>
|
|
73
|
-
</div>
|
|
74
|
-
<div class="gw-mega__col">
|
|
75
|
-
<p class="gw-mega__heading">Adaptive storefront</p>
|
|
76
|
-
<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>
|
|
77
|
-
<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 & AI search</b><i>Readable by AI, shoppable by agents</i></span></a>
|
|
78
|
-
</div>
|
|
79
|
-
<a class="gw-mega__feature" 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>
|
|
80
|
-
</div>
|
|
81
|
-
</div>
|
|
82
|
-
</li>
|
|
83
|
-
<li class="gw-nav__item"><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
|
|
84
|
-
<li class="gw-nav__item">
|
|
85
|
-
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-resources" data-gw-mega="gw-mega-resources">Resources</button>
|
|
86
|
-
<div class="gw-mega" id="gw-mega-resources" hidden>
|
|
87
|
-
<div class="gw-wrap gw-mega__grid">
|
|
88
|
-
<div class="gw-mega__col">
|
|
89
|
-
<p class="gw-mega__heading">Learn</p>
|
|
90
|
-
<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>
|
|
91
|
-
<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>
|
|
92
|
-
</div>
|
|
93
|
-
<div class="gw-mega__col">
|
|
94
|
-
<p class="gw-mega__heading">Company</p>
|
|
95
|
-
<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>
|
|
96
|
-
<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>
|
|
97
|
-
</div>
|
|
98
|
-
</div>
|
|
99
|
-
</div>
|
|
100
|
-
</li>
|
|
101
|
-
</ul>
|
|
102
|
-
</nav>
|
|
37
|
+
<nav class="gw-nav" aria-label="Primary">
|
|
38
|
+
<ul class="gw-nav__list">
|
|
39
|
+
<li class="gw-nav__item">
|
|
40
|
+
<a class="gw-nav__trigger" href="https://gemboss.ai/product" aria-expanded="false" aria-controls="gw-mega-product">Product <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
|
|
41
|
+
<div class="gw-mega" id="gw-mega-product" style="--gw-mega-w:1120px;--gw-mega-pv:380px" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">Build</span><a class="gw-mega__link" href="https://gemboss.ai/funnel" data-gw-preview="gw-pv-funnel"><span><b>Funnel builder</b><i>Angles, advertorials, offers</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder" data-gw-preview="gw-pv-store"><span><b>Storefront builder</b><i>Headless, on your Shopify</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/page-builder" data-gw-preview="gw-pv-page"><span><b>Page builder</b><i>Ask, watch, publish</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/custom-theme" data-gw-preview="gw-pv-sections"><span><b>Custom theme</b><i>60 sections that convert</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Grow</span><a class="gw-mega__link" href="https://gemboss.ai/ab-testing" data-gw-preview="gw-pv-ab"><span><b>Tests & personalization</b><i>You promote the winner</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/offers" data-gw-preview="gw-pv-offer"><span><b>Offers & upsells</b><i>Bundles, gifts, bumps</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/data" data-gw-preview="gw-pv-chart"><span><b>Analytics & data</b><i>First-party, yours</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/product" data-gw-preview="gw-pv-ops"><span><b>Operator</b><i>What to change next</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Connect</span><a class="gw-mega__link" href="https://gemboss.ai/integrations" data-gw-preview="gw-pv-integrations"><span><b>Integrations</b><i>Klaviyo, Meta, Google</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/mcp" data-gw-preview="gw-pv-mcp"><span><b>MCP & agents</b><i>Claude and Codex</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/agent-ready" data-gw-preview="gw-pv-robot"><span><b>Agent-ready storefront</b><i>Ready for AI shoppers</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/ai-visibility" data-gw-preview="gw-pv-answer"><span><b>AI search visibility</b><i>Be in the answer</i></span></a></div></div><div class="gw-mega__aside"><a class="gw-mega__card" href="https://gemboss.ai/engine"><span class="gw-mega__art"><img src="assets/post-headless.svg" alt="" decoding="async"></span><span class="gw-mega__card-text"><b>How the engine works</b><i>Six stages, one loop. Nothing ships without you.</i><span class="gw-mega__go">See the engine →</span></span></a></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://feedback.gemboss.ai/changelog" rel="noopener"><span class="gw-mega__new">New</span> What's new on the changelog <span aria-hidden="true">↗</span></a><a href="https://gemboss.ai/product">Everything in the product</a></div><div class="gw-mega__foot-end"><a class="gw-mega__cta" href="https://gemboss.ai/contact">Book a demo <span aria-hidden="true">→</span></a></div></div></div>
|
|
42
|
+
</li>
|
|
43
|
+
<li class="gw-nav__item">
|
|
44
|
+
<a class="gw-nav__trigger" href="https://gemboss.ai/meta-ads" aria-expanded="false" aria-controls="gw-mega-usecases">Use cases <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
|
|
45
|
+
<div class="gw-mega" id="gw-mega-usecases" style="--gw-mega-w:1000px;--gw-mega-pv:400px;--gw-mega-cols:2" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">Adaptive funnels</span><a class="gw-mega__link" href="https://gemboss.ai/meta-ads" data-gw-preview="feature"><span><b>Meta, Google & 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" data-gw-preview="gw-pv-email"><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><a class="gw-mega__link" href="https://gemboss.ai/affiliate-landing-pages" data-gw-preview="gw-pv-creator"><span><b>Affiliates & creators <span class="gw-badge gw-badge--warning">Early access</span></b><i>Put the creator on the page</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Adaptive storefront</span><a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder" data-gw-preview="gw-pv-store"><span><b>Headless storefront </b><i>Your whole Shopify store, on GemBoss</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/#personalize" data-gw-preview="gw-pv-ab"><span><b>Personalized by audience </b><i>Sections by source, device, returning</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/agent-ready" data-gw-preview="gw-pv-robot"><span><b>AI agents & AI search </b><i>Readable by AI, shoppable by agents</i></span></a></div></div><div class="gw-mega__aside"><a class="gw-mega__card" href="https://gemboss.ai/meta-ads"><span class="gw-mega__art"><img src="assets/post-motion.svg" alt="" decoding="async"></span><span class="gw-mega__card-text"><b>Every ad gets its own page</b><i>The page keeps the promise the ad made.</i><span class="gw-mega__go">See the ad-to-page path →</span></span></a></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://gemboss.ai/engine">How the engine works</a></div><div class="gw-mega__foot-end"><a class="gw-mega__cta" href="https://gemboss.ai/contact">Book a demo <span aria-hidden="true">→</span></a></div></div></div>
|
|
46
|
+
</li>
|
|
47
|
+
<li class="gw-nav__item">
|
|
48
|
+
<a class="gw-nav__trigger" href="https://gemboss.ai/solutions" aria-expanded="false" aria-controls="gw-mega-solutions">Solutions <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
|
|
49
|
+
<div class="gw-mega" id="gw-mega-solutions" style="--gw-mega-w:1120px;--gw-mega-pv:380px" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">By industry</span><a class="gw-mega__link" href="https://gemboss.ai/beauty-skincare" data-gw-preview="gw-pv-beauty"><img src="/assets/img/thumbs/th-menu-beauty.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Beauty & skincare</b><i>Ingredients and routines</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/wellness-supplements" data-gw-preview="gw-pv-wellness"><img src="/assets/img/thumbs/th-menu-wellness.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Wellness & supplements</b><i>Claims done right</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/fashion-apparel" data-gw-preview="gw-pv-fashion"><img src="/assets/img/thumbs/th-menu-fashion.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Fashion & apparel</b><i>Fit, drops, returns</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/home-food" data-gw-preview="gw-pv-food"><img src="/assets/img/thumbs/th-menu-food.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Home & food</b><i>Taste and texture</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/electronics" data-gw-preview="gw-pv-electronics"><img src="/assets/img/thumbs/th-menu-electronics.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Consumer electronics</b><i>Specs that sell</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">By team</span><a class="gw-mega__link" href="https://gemboss.ai/solutions#teams" data-gw-preview="gw-pv-founders"><span><b>Founders</b><i>No dev team needed</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/solutions#teams" data-gw-preview="gw-pv-ab"><span><b>Growth leads</b><i>Test more, guess less</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/partners" data-gw-preview="gw-pv-stores"><span><b>Media buyers & agencies</b><i>Bring your clients</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/klaviyo-agencies" data-gw-preview="gw-pv-email"><span><b>Email & Klaviyo agencies</b><i>Own the page after the send</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">For bigger brands</span><a class="gw-mega__link" href="https://gemboss.ai/enterprise" data-gw-preview="gw-pv-mosaic"><span><b>Enterprise</b><i>More stores, more control</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/managed" data-gw-preview="gw-pv-tasks"><span><b>Managed service</b><i>A team runs it for you</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/contact" data-gw-preview="gw-pv-chat"><span><b>Talk to sales</b><i>A build and a test plan, not a deck</i></span></a></div></div><div class="gw-mega__aside" aria-hidden="true"></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://gemboss.ai/solutions">See all solutions</a></div><div class="gw-mega__foot-end"><a class="gw-mega__cta" href="https://gemboss.ai/contact">Talk to sales <span aria-hidden="true">→</span></a></div></div></div>
|
|
50
|
+
</li>
|
|
51
|
+
<li><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
|
|
52
|
+
<li class="gw-nav__item">
|
|
53
|
+
<a class="gw-nav__trigger" href="https://gemboss.ai/blog" aria-expanded="false" aria-controls="gw-mega-resources">Resources <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
|
|
54
|
+
<div class="gw-mega" id="gw-mega-resources" style="--gw-mega-w:920px;--gw-mega-pv:400px;--gw-mega-cols:2" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">Learn</span><a class="gw-mega__link" href="https://gemboss.ai/blog" data-gw-preview="gw-pv-posts"><span><b>Blog</b><i>Playbooks and guides</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/docs" data-gw-preview="gw-pv-docs"><span><b>Docs</b><i>Guides and MCP tools</i></span></a><a class="gw-mega__link" href="https://community.gemboss.ai" rel="noopener" data-gw-preview="gw-pv-community"><span><b>Community <span class="ext" aria-hidden="true">↗</span></b><i>Brands building with GemBoss</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/download" data-gw-preview="gw-pv-window"><span><b>Desktop app</b><i>GemBoss on your Mac</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Company</span><a class="gw-mega__link" href="https://gemboss.ai/company" data-gw-preview="gw-pv-about"><span><b>About</b><i>Why we build it</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/careers" data-gw-preview="gw-pv-careers"><span><b>Careers</b><i>Join the team</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/company#security" data-gw-preview="gw-pv-shield"><span><b>Security</b><i>How data stays safe</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/affiliates" data-gw-preview="gw-pv-payout"><span><b>Affiliate program</b><i>Earn on the stores you bring</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/contact" data-gw-preview="gw-pv-chat"><span><b>Contact</b><i>Talk to a human</i></span></a></div></div><div class="gw-mega__aside"><a class="gw-mega__card" href="https://news.gemboss.ai/ext" rel="noopener"><span class="gw-mega__art"><img src="assets/post-output.svg" alt="" decoding="async"></span><span class="gw-mega__card-text"><b>Shopify and AI news, every new tab</b><i>A free daily briefing for DTC brands. No account needed.</i><span class="gw-mega__go">Get the extension ↗</span></span></a></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://feedback.gemboss.ai/changelog" rel="noopener"><span class="gw-mega__new">New</span> What's new on the changelog <span aria-hidden="true">↗</span></a></div><div class="gw-mega__foot-end"></div></div></div>
|
|
55
|
+
</li>
|
|
56
|
+
</ul>
|
|
57
|
+
</nav>
|
|
103
58
|
<div class="gw-header__actions">
|
|
104
59
|
<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>
|
|
105
60
|
<a class="gw-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
|
|
106
|
-
<a class="gw-
|
|
61
|
+
<a class="gw-nav__link gw-header__link" href="https://gemboss.ai/contact">Book a demo</a>
|
|
107
62
|
<a class="gw-btn gw-btn--sm" href="https://admin.gemboss.ai/signup">Start free</a>
|
|
108
|
-
<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="
|
|
63
|
+
<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="2" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
|
|
109
64
|
</div>
|
|
110
65
|
</div>
|
|
111
66
|
<div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
|
|
@@ -145,7 +100,40 @@
|
|
|
145
100
|
</div>
|
|
146
101
|
</nav>
|
|
147
102
|
</div>
|
|
148
|
-
|
|
103
|
+
<!-- the menu rows' previews (data-gw-preview), cloned by the script on desktop -->
|
|
104
|
+
<template id="gw-pv-ab"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
105
|
+
<template id="gw-pv-about"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
106
|
+
<template id="gw-pv-answer"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
107
|
+
<template id="gw-pv-beauty"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
108
|
+
<template id="gw-pv-careers"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
109
|
+
<template id="gw-pv-chart"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
110
|
+
<template id="gw-pv-chat"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
111
|
+
<template id="gw-pv-community"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
112
|
+
<template id="gw-pv-creator"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
113
|
+
<template id="gw-pv-docs"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
114
|
+
<template id="gw-pv-electronics"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
115
|
+
<template id="gw-pv-email"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
116
|
+
<template id="gw-pv-fashion"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
117
|
+
<template id="gw-pv-food"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
118
|
+
<template id="gw-pv-founders"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
119
|
+
<template id="gw-pv-funnel"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
120
|
+
<template id="gw-pv-integrations"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
121
|
+
<template id="gw-pv-mcp"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
122
|
+
<template id="gw-pv-mosaic"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
123
|
+
<template id="gw-pv-offer"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
124
|
+
<template id="gw-pv-ops"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
125
|
+
<template id="gw-pv-page"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
126
|
+
<template id="gw-pv-payout"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
127
|
+
<template id="gw-pv-posts"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
128
|
+
<template id="gw-pv-robot"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
129
|
+
<template id="gw-pv-sections"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
130
|
+
<template id="gw-pv-shield"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
131
|
+
<template id="gw-pv-store"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
132
|
+
<template id="gw-pv-stores"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
133
|
+
<template id="gw-pv-tasks"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
134
|
+
<template id="gw-pv-wellness"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
135
|
+
<template id="gw-pv-window"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
136
|
+
</header>
|
|
149
137
|
|
|
150
138
|
<main id="main">
|
|
151
139
|
<!-- hero -->
|
package/demo/spotlight.html
CHANGED
|
@@ -35,80 +35,35 @@
|
|
|
35
35
|
|
|
36
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
37
|
<header class="gw-header" data-gw-header>
|
|
38
|
-
<div class="gw-
|
|
38
|
+
<div class="gw-header__bar">
|
|
39
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="
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
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 & 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 & 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 & 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>
|
|
40
|
+
<nav class="gw-nav" aria-label="Primary">
|
|
41
|
+
<ul class="gw-nav__list">
|
|
42
|
+
<li class="gw-nav__item">
|
|
43
|
+
<a class="gw-nav__trigger" href="https://gemboss.ai/product" aria-expanded="false" aria-controls="gw-mega-product">Product <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
|
|
44
|
+
<div class="gw-mega" id="gw-mega-product" style="--gw-mega-w:1120px;--gw-mega-pv:380px" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">Build</span><a class="gw-mega__link" href="https://gemboss.ai/funnel" data-gw-preview="gw-pv-funnel"><span><b>Funnel builder</b><i>Angles, advertorials, offers</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder" data-gw-preview="gw-pv-store"><span><b>Storefront builder</b><i>Headless, on your Shopify</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/page-builder" data-gw-preview="gw-pv-page"><span><b>Page builder</b><i>Ask, watch, publish</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/custom-theme" data-gw-preview="gw-pv-sections"><span><b>Custom theme</b><i>60 sections that convert</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Grow</span><a class="gw-mega__link" href="https://gemboss.ai/ab-testing" data-gw-preview="gw-pv-ab"><span><b>Tests & personalization</b><i>You promote the winner</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/offers" data-gw-preview="gw-pv-offer"><span><b>Offers & upsells</b><i>Bundles, gifts, bumps</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/data" data-gw-preview="gw-pv-chart"><span><b>Analytics & data</b><i>First-party, yours</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/product" data-gw-preview="gw-pv-ops"><span><b>Operator</b><i>What to change next</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Connect</span><a class="gw-mega__link" href="https://gemboss.ai/integrations" data-gw-preview="gw-pv-integrations"><span><b>Integrations</b><i>Klaviyo, Meta, Google</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/mcp" data-gw-preview="gw-pv-mcp"><span><b>MCP & agents</b><i>Claude and Codex</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/agent-ready" data-gw-preview="gw-pv-robot"><span><b>Agent-ready storefront</b><i>Ready for AI shoppers</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/ai-visibility" data-gw-preview="gw-pv-answer"><span><b>AI search visibility</b><i>Be in the answer</i></span></a></div></div><div class="gw-mega__aside"><a class="gw-mega__card" href="https://gemboss.ai/engine" data-gw-spot=".gw-mega__art"><span class="gw-mega__art"><img src="assets/post-headless.svg" alt="" decoding="async"></span><span class="gw-mega__card-text"><b>How the engine works</b><i>Six stages, one loop. Nothing ships without you.</i><span class="gw-mega__go">See the engine →</span></span></a></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://feedback.gemboss.ai/changelog" rel="noopener"><span class="gw-mega__new">New</span> What's new on the changelog <span aria-hidden="true">↗</span></a><a href="https://gemboss.ai/product">Everything in the product</a></div><div class="gw-mega__foot-end"><a class="gw-mega__cta" href="https://gemboss.ai/contact">Book a demo <span aria-hidden="true">→</span></a></div></div></div>
|
|
45
|
+
</li>
|
|
46
|
+
<li class="gw-nav__item">
|
|
47
|
+
<a class="gw-nav__trigger" href="https://gemboss.ai/meta-ads" aria-expanded="false" aria-controls="gw-mega-usecases">Use cases <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
|
|
48
|
+
<div class="gw-mega" id="gw-mega-usecases" style="--gw-mega-w:1000px;--gw-mega-pv:400px;--gw-mega-cols:2" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">Adaptive funnels</span><a class="gw-mega__link" href="https://gemboss.ai/meta-ads" data-gw-preview="feature"><span><b>Meta, Google & 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" data-gw-preview="gw-pv-email"><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><a class="gw-mega__link" href="https://gemboss.ai/affiliate-landing-pages" data-gw-preview="gw-pv-creator"><span><b>Affiliates & creators <span class="gw-badge gw-badge--warning">Early access</span></b><i>Put the creator on the page</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Adaptive storefront</span><a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder" data-gw-preview="gw-pv-store"><span><b>Headless storefront </b><i>Your whole Shopify store, on GemBoss</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/#personalize" data-gw-preview="gw-pv-ab"><span><b>Personalized by audience </b><i>Sections by source, device, returning</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/agent-ready" data-gw-preview="gw-pv-robot"><span><b>AI agents & AI search </b><i>Readable by AI, shoppable by agents</i></span></a></div></div><div class="gw-mega__aside"><a class="gw-mega__card" href="https://gemboss.ai/meta-ads" data-gw-spot=".gw-mega__art"><span class="gw-mega__art"><img src="assets/post-motion.svg" alt="" decoding="async"></span><span class="gw-mega__card-text"><b>Every ad gets its own page</b><i>The page keeps the promise the ad made.</i><span class="gw-mega__go">See the ad-to-page path →</span></span></a></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://gemboss.ai/engine">How the engine works</a></div><div class="gw-mega__foot-end"><a class="gw-mega__cta" href="https://gemboss.ai/contact">Book a demo <span aria-hidden="true">→</span></a></div></div></div>
|
|
49
|
+
</li>
|
|
50
|
+
<li class="gw-nav__item">
|
|
51
|
+
<a class="gw-nav__trigger" href="https://gemboss.ai/solutions" aria-expanded="false" aria-controls="gw-mega-solutions">Solutions <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
|
|
52
|
+
<div class="gw-mega" id="gw-mega-solutions" style="--gw-mega-w:1120px;--gw-mega-pv:380px" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">By industry</span><a class="gw-mega__link" href="https://gemboss.ai/beauty-skincare" data-gw-preview="gw-pv-beauty"><img src="/assets/img/thumbs/th-menu-beauty.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Beauty & skincare</b><i>Ingredients and routines</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/wellness-supplements" data-gw-preview="gw-pv-wellness"><img src="/assets/img/thumbs/th-menu-wellness.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Wellness & supplements</b><i>Claims done right</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/fashion-apparel" data-gw-preview="gw-pv-fashion"><img src="/assets/img/thumbs/th-menu-fashion.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Fashion & apparel</b><i>Fit, drops, returns</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/home-food" data-gw-preview="gw-pv-food"><img src="/assets/img/thumbs/th-menu-food.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Home & food</b><i>Taste and texture</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/electronics" data-gw-preview="gw-pv-electronics"><img src="/assets/img/thumbs/th-menu-electronics.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Consumer electronics</b><i>Specs that sell</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">By team</span><a class="gw-mega__link" href="https://gemboss.ai/solutions#teams" data-gw-preview="gw-pv-founders"><span><b>Founders</b><i>No dev team needed</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/solutions#teams" data-gw-preview="gw-pv-ab"><span><b>Growth leads</b><i>Test more, guess less</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/partners" data-gw-preview="gw-pv-stores"><span><b>Media buyers & agencies</b><i>Bring your clients</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/klaviyo-agencies" data-gw-preview="gw-pv-email"><span><b>Email & Klaviyo agencies</b><i>Own the page after the send</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">For bigger brands</span><a class="gw-mega__link" href="https://gemboss.ai/enterprise" data-gw-preview="gw-pv-mosaic"><span><b>Enterprise</b><i>More stores, more control</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/managed" data-gw-preview="gw-pv-tasks"><span><b>Managed service</b><i>A team runs it for you</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/contact" data-gw-preview="gw-pv-chat"><span><b>Talk to sales</b><i>A build and a test plan, not a deck</i></span></a></div></div><div class="gw-mega__aside" aria-hidden="true"></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://gemboss.ai/solutions">See all solutions</a></div><div class="gw-mega__foot-end"><a class="gw-mega__cta" href="https://gemboss.ai/contact">Talk to sales <span aria-hidden="true">→</span></a></div></div></div>
|
|
53
|
+
</li>
|
|
54
|
+
<li><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
|
|
55
|
+
<li class="gw-nav__item">
|
|
56
|
+
<a class="gw-nav__trigger" href="https://gemboss.ai/blog" aria-expanded="false" aria-controls="gw-mega-resources">Resources <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
|
|
57
|
+
<div class="gw-mega" id="gw-mega-resources" style="--gw-mega-w:920px;--gw-mega-pv:400px;--gw-mega-cols:2" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">Learn</span><a class="gw-mega__link" href="https://gemboss.ai/blog" data-gw-preview="gw-pv-posts"><span><b>Blog</b><i>Playbooks and guides</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/docs" data-gw-preview="gw-pv-docs"><span><b>Docs</b><i>Guides and MCP tools</i></span></a><a class="gw-mega__link" href="https://community.gemboss.ai" rel="noopener" data-gw-preview="gw-pv-community"><span><b>Community <span class="ext" aria-hidden="true">↗</span></b><i>Brands building with GemBoss</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/download" data-gw-preview="gw-pv-window"><span><b>Desktop app</b><i>GemBoss on your Mac</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Company</span><a class="gw-mega__link" href="https://gemboss.ai/company" data-gw-preview="gw-pv-about"><span><b>About</b><i>Why we build it</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/careers" data-gw-preview="gw-pv-careers"><span><b>Careers</b><i>Join the team</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/company#security" data-gw-preview="gw-pv-shield"><span><b>Security</b><i>How data stays safe</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/affiliates" data-gw-preview="gw-pv-payout"><span><b>Affiliate program</b><i>Earn on the stores you bring</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/contact" data-gw-preview="gw-pv-chat"><span><b>Contact</b><i>Talk to a human</i></span></a></div></div><div class="gw-mega__aside"><a class="gw-mega__card" href="https://news.gemboss.ai/ext" rel="noopener"><span class="gw-mega__art"><img src="assets/post-output.svg" alt="" decoding="async"></span><span class="gw-mega__card-text"><b>Shopify and AI news, every new tab</b><i>A free daily briefing for DTC brands. No account needed.</i><span class="gw-mega__go">Get the extension ↗</span></span></a></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://feedback.gemboss.ai/changelog" rel="noopener"><span class="gw-mega__new">New</span> What's new on the changelog <span aria-hidden="true">↗</span></a></div><div class="gw-mega__foot-end"></div></div></div>
|
|
58
|
+
</li>
|
|
59
|
+
</ul>
|
|
60
|
+
</nav>
|
|
106
61
|
<div class="gw-header__actions">
|
|
107
62
|
<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
63
|
<a class="gw-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
|
|
109
|
-
<a class="gw-
|
|
64
|
+
<a class="gw-nav__link gw-header__link" href="https://gemboss.ai/contact">Book a demo</a>
|
|
110
65
|
<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="
|
|
66
|
+
<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="2" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
|
|
112
67
|
</div>
|
|
113
68
|
</div>
|
|
114
69
|
<div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
|
|
@@ -148,7 +103,40 @@
|
|
|
148
103
|
</div>
|
|
149
104
|
</nav>
|
|
150
105
|
</div>
|
|
151
|
-
|
|
106
|
+
<!-- the menu rows' previews (data-gw-preview), cloned by the script on desktop -->
|
|
107
|
+
<template id="gw-pv-ab"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
108
|
+
<template id="gw-pv-about"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
109
|
+
<template id="gw-pv-answer"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
110
|
+
<template id="gw-pv-beauty"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
111
|
+
<template id="gw-pv-careers"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
112
|
+
<template id="gw-pv-chart"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
113
|
+
<template id="gw-pv-chat"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
114
|
+
<template id="gw-pv-community"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
115
|
+
<template id="gw-pv-creator"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
116
|
+
<template id="gw-pv-docs"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
117
|
+
<template id="gw-pv-electronics"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
118
|
+
<template id="gw-pv-email"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
119
|
+
<template id="gw-pv-fashion"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
120
|
+
<template id="gw-pv-food"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
121
|
+
<template id="gw-pv-founders"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
122
|
+
<template id="gw-pv-funnel"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
123
|
+
<template id="gw-pv-integrations"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
124
|
+
<template id="gw-pv-mcp"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
125
|
+
<template id="gw-pv-mosaic"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
126
|
+
<template id="gw-pv-offer"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
127
|
+
<template id="gw-pv-ops"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
128
|
+
<template id="gw-pv-page"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
129
|
+
<template id="gw-pv-payout"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
130
|
+
<template id="gw-pv-posts"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
131
|
+
<template id="gw-pv-robot"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
132
|
+
<template id="gw-pv-sections"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
133
|
+
<template id="gw-pv-shield"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
134
|
+
<template id="gw-pv-store"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
135
|
+
<template id="gw-pv-stores"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
136
|
+
<template id="gw-pv-tasks"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
137
|
+
<template id="gw-pv-wellness"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
138
|
+
<template id="gw-pv-window"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
139
|
+
</header>
|
|
152
140
|
|
|
153
141
|
<main id="main">
|
|
154
142
|
<section class="gw-section" aria-labelledby="spot-h">
|
|
@@ -239,7 +227,6 @@
|
|
|
239
227
|
<p>A headless storefront on the Shopify you already run.</p>
|
|
240
228
|
<span class="gw-link gw-link--arrow">See the storefront builder</span>
|
|
241
229
|
</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
230
|
</div>
|
|
244
231
|
</div>
|
|
245
232
|
</section>
|
package/demo/theme-example.html
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
<a class="gw-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
|
|
43
43
|
<a class="gw-btn gw-btn--secondary gw-btn--sm" href="https://gemboss.ai/contact">Book a demo</a>
|
|
44
44
|
<a class="gw-btn gw-btn--sm" href="https://admin.gemboss.ai/signup">Start free</a>
|
|
45
|
-
<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="
|
|
45
|
+
<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="2" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
|
|
46
46
|
</div>
|
|
47
47
|
</div>
|
|
48
48
|
<div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
|
package/docs/components.md
CHANGED
|
@@ -326,19 +326,24 @@ Don't: hide content a reader needs to decide (prices, terms) only inside a close
|
|
|
326
326
|
|
|
327
327
|
## Header
|
|
328
328
|
|
|
329
|
+
Since 0.11.0 the header is gemboss.ai's, 1:1: every value and every motion measured against the live site, pixel by
|
|
330
|
+
pixel, at 320 to 1920px, light and dark, every menu open, rows hovered, the keyboard's focus, the phone menu at each
|
|
331
|
+
level. A brand changes what it fills in and the tokens (colours, the Stage, the radius profile), never these values.
|
|
332
|
+
|
|
329
333
|
| class | for |
|
|
330
334
|
|---|---|
|
|
331
335
|
| `.gw-announce` | optional one-sentence bar above the header, with one link |
|
|
332
336
|
| `.gw-header` (`data-gw-header`) | the sticky, flat 64px bar with one hairline; `.is-scrolled` darkens the hairline |
|
|
333
|
-
| `.gw-header--float` | with `.gw-header`, a brand's header profile: from
|
|
334
|
-
| `.gw-header__bar` | the row inside
|
|
335
|
-
| `.gw-brand`, `__mark`, `__name` | logo (
|
|
336
|
-
| `.gw-nav`, `__list`, `__item`, `__trigger`, `__link` | the desktop nav (from
|
|
337
|
-
| `.gw-mega`, `__grid`, `__col`, `__heading`, `__link`, `
|
|
338
|
-
| `.gw-header__actions` |
|
|
339
|
-
| `.gw-header__signin` | with `.gw-nav__link`:
|
|
337
|
+
| `.gw-header--float` | with `.gw-header`, a brand's header profile: from 1081px the same bar as an inset card (panel radius, the surface at 85% over a blur, one hairline, the raised shadow, 16px from the top); the flat bar up to 1080px; solid under `prefers-reduced-transparency` |
|
|
338
|
+
| `.gw-header__bar` | the row inside: the page's wrap + 12px (1132px on GemBoss), 24px inside (6px up to 640px), 32px between its parts |
|
|
339
|
+
| `.gw-brand`, `__mark`, `__name` | logo (34px, its corners clipped at 8px) and name, linking home; a 44px row up to 768px |
|
|
340
|
+
| `.gw-nav`, `__list`, `__item`, `__trigger`, `__chev`, `__link` | the desktop nav (from 1081px), 14px weight 500, 0.005em tighter; `__trigger` is a section's link that opens its mega panel (its 12px `__chev` turns while open), `__link` a plain link; the current page (`aria-current="page"`) or section (`aria-current` on a trigger) in the accent's strong ink, weight 600 |
|
|
341
|
+
| `.gw-mega` (`--gw-mega-w`, `--gw-mega-pv`, `--gw-mega-cols`), `__body`, `__grid`, `__col`, `__heading`, `__link`, `__aside`, `__card`, `__art`, `__card-text`, `__go`, `__foot`, `__foot-start`, `__foot-end`, `__cta`, `__new` | 0.11.0, gemboss.ai's mega menu: a panel on one surface that morphs between panels (the popover radius, raised shadow), a caret at the open name, a pill under the hovered name, a highlight under the hovered row; columns of rows (a name and one line), the pictures beside them (`__aside`: the panel's own `__card`, a row's preview from its `<template>`), each picture on the Stage (`__art`: the deep iris ground, `--gw-stage-*`); an optional strip under it. The page behind dims and blurs (`.gw-scrim`). Script: `docs/markup-contract.md` |
|
|
342
|
+
| `.gw-header__actions` | Sign in, a second text action, Start free, the menu button (4px apart; the button 8px further) |
|
|
343
|
+
| `.gw-header__signin` | with `.gw-nav__link`: shown from 1081px (it moves into the mobile menu) |
|
|
344
|
+
| `.gw-header__link` | 0.11.0: with `.gw-nav__link`, a second text action (Book a demo), shown from 1181px, the first to go when the bar is tight |
|
|
340
345
|
| `.gw-theme-toggle` | icon button (`data-gw-theme-toggle`), 40px, 44px on touch |
|
|
341
|
-
| `.gw-menu-toggle`, `__open`, `__close` | the menu button
|
|
346
|
+
| `.gw-menu-toggle`, `__open`, `__close` | the menu button up to 1080px: 42px (44px on touch), one strong hairline on the surface, the card radius of the profile, ink while open; it shows `__open` or `__close` from `aria-expanded` |
|
|
342
347
|
| `.gw-mobile-menu` | the full-height sheet under the bar (`hidden` until opened); `html.is-menu-open` locks the page |
|
|
343
348
|
| `.gw-mobile-menu__group` | a `<details>` group with a `<summary>` row |
|
|
344
349
|
| `.gw-mobile-menu__list`, `__link` | the links inside a group, 44px rows |
|
|
@@ -349,8 +354,8 @@ Don't: hide content a reader needs to decide (prices, terms) only inside a close
|
|
|
349
354
|
| `.gw-mobile-menu__heading`, `__icon`, `__all` | 0.8.0, optional in a level: a muted heading over a run of links; a 32px icon tile before a link's `<b>` name and `<i>` line; the last link, to the section's own page, in the accent with its arrow |
|
|
350
355
|
| `.gw-lang` (`data-gw-lang`, `hidden`), `__btn`, `__short`, `__menu`, `__link` | 0.8.0, optional: the language switcher (below): a ghost button with the globe and the current language's code, its list of the other languages |
|
|
351
356
|
|
|
352
|
-
Header
|
|
353
|
-
menu. Full markup: `templates/header.html`. See both 0.8.0 options in `demo/header.html`.
|
|
357
|
+
Header actions: the primary button shows from 561px, the second text action from 1181px, Sign in from 1081px; below
|
|
358
|
+
that they live in the mobile menu. Full markup: `templates/header.html`. See both 0.8.0 options in `demo/header.html`.
|
|
354
359
|
|
|
355
360
|
### Drill-down mobile menu (0.8.0)
|
|
356
361
|
|
|
@@ -395,7 +400,7 @@ it shows only where the page has another language and stays hidden everywhere el
|
|
|
395
400
|
</div>
|
|
396
401
|
```
|
|
397
402
|
|
|
398
|
-
- Two copies: one in `.gw-header__actions` (drawn from
|
|
403
|
+
- Two copies: one in `.gw-header__actions` (drawn from 1081px), one in the mobile menu's actions (its list opens
|
|
399
404
|
upward), each with its own list `id`. Keep `hidden` on both and the list empty: the script fills them.
|
|
400
405
|
- The head is the source: one `<link rel="alternate" hreflang="…" href="…">` per language the page has (its own
|
|
401
406
|
included), and `x-default` if you like (it is not listed). A `title` on a link names that language in the list.
|
|
@@ -415,19 +420,24 @@ The footer of gemboss.ai (0.7.0): one per site, the same on every page, from `te
|
|
|
415
420
|
its rows (its columns, its family, its words) and deletes the optional parts it does not use; it never adds a footer
|
|
416
421
|
part of its own. See it in `demo/footer.html`, with a switch to the same footer for a GemPages-style brand.
|
|
417
422
|
|
|
423
|
+
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
|
|
424
|
+
by part and pixel by pixel, at 14 widths from 320 to 1920px, light and dark, folded and open, hovered and focused from
|
|
425
|
+
the keyboard. Its widths are the site's: folds up to 620px, columns open from 621px, one row from 1081px. A brand
|
|
426
|
+
changes what it fills in and the tokens (colours, the radius profile), never these values.
|
|
427
|
+
|
|
418
428
|
| class | for |
|
|
419
429
|
|---|---|
|
|
420
|
-
| `.gw-footer` | the footer: one hairline on top,
|
|
421
|
-
| `.gw-footer__grid` | brand block and link columns: 2 columns
|
|
422
|
-
| `.gw-footer__brand` | the brand and one sentence
|
|
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`.
|
|
430
|
+
| `.gw-footer` | the footer: one hairline on top, on the page's own ground (transparent), 64px above and 32px below |
|
|
431
|
+
| `.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 |
|
|
432
|
+
| `.gw-footer__brand` | the brand (a 34px mark) and one sentence of 30 characters a line at most |
|
|
433
|
+
| `.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` |
|
|
434
|
+
| `.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
435
|
| `.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
|
|
427
|
-
| `.gw-footer__ext` | 0.7.0: the
|
|
436
|
+
| `.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 |
|
|
437
|
+
| `.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
438
|
| `.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
|
|
439
|
+
| `.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 |
|
|
440
|
+
| `.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
441
|
| `.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
442
|
| `.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
443
|
|
|
@@ -843,7 +853,7 @@ else:
|
|
|
843
853
|
|---|---|
|
|
844
854
|
| 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>` |
|
|
845
855
|
| a link card | `<a class="gw-card gw-card--link" href="/mcp" data-gw-spot>…</a>` |
|
|
846
|
-
|
|
|
856
|
+
| a mega menu's card (its Stage lights) | `<a class="gw-mega__card" href="/engine" data-gw-spot=".gw-mega__art">…</a>` |
|
|
847
857
|
| the primary button of a night band | `<a class="gw-btn" href="/signup" data-gw-spot>Start free</a>` inside `.gw-band--night` |
|
|
848
858
|
| 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>` |
|
|
849
859
|
|