@gemboss/website-ui 0.6.0 → 0.8.0

package/css/header.css

@@ -261,3 +261,179 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .gw-header--float { background: var(--gw-surface); }
 }
+
+/* ---- 0.8.0: the drill-down mobile menu (gap #41) and the language switcher (gap #29) --------------------------------
+   Every rule below selects a part 0.7.0 does not have (data-gw-menu="drill", the script's .is-drill, the menu's
+   __head, __back, __title, __heading and __icon, .gw-lang), so a 0.7.0 header looks and works exactly as before. */
+
+/* The drill-down menu, as gemboss.ai's phone menu (v4, approved 15/10/2026), opt-in on the sheet:
+   <div class="gw-mobile-menu" data-gw-menu="drill">. Its look needs only the attribute: top-level rows of 64px with
+   24px words and one hairline each, a level's links with an optional icon and line, and the actions in a bar that
+   stays at the bottom of the sheet while the list scrolls (the sheet has no bottom padding, so nothing peeks out under
+   the bar; nor sideways while a level slides in). Without the script the groups are the 0.7.0 <details> that open in
+   place, their chevron pointing down. */
+.gw-mobile-menu[data-gw-menu="drill"] { display: flex; flex-direction: column; overflow-x: hidden; padding-bottom: 0; }
+.gw-mobile-menu[data-gw-menu="drill"] > nav { display: flex; flex: 1 0 auto; flex-direction: column; }
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__group > summary,
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__top { min-height: 64px; font-size: 24px; letter-spacing: -0.01em; }
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__group > summary::after { width: 20px; height: 20px; -webkit-mask-size: 20px; mask-size: 20px; }
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__list { padding: 0; }
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__list .gw-mobile-menu__link {
+  gap: 12px;
+  min-height: 56px;
+  padding-block: 12px;
+  border-bottom: 1px solid var(--gw-line);
+  color: var(--gw-ink);
+  font-weight: 500;
+}
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__link b { display: block; font-size: 16px; font-weight: 500; line-height: 20px; }
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__link i { display: block; margin-top: 2px; color: var(--gw-muted); font-size: 13px; font-style: normal; line-height: 18px; }
+/* a level's optional parts: a muted heading over a run of links, a 32px icon tile before a link's words */
+.gw-mobile-menu__heading { padding: 16px 0 8px; color: var(--gw-muted); font-size: 12px; font-weight: 500; line-height: 1.5; }
+.gw-mobile-menu__icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--gw-line);
+  border-radius: var(--gw-radius-action);
+  color: var(--gw-muted);
+}
+.gw-mobile-menu__icon svg { width: 16px; height: 16px; }
+/* a level's last link, to the section's own page: its row opens the level instead of going there */
+.gw-mobile-menu__all { display: flex; align-items: center; gap: 6px; min-height: 56px; color: var(--gw-accent-strong); font-size: 16px; font-weight: 500; }
+.gw-mobile-menu__all::after { content: "\2192"; }
+/* the action bar: what is not a button (Sign in, the language) on the first line, the last one on the right; the
+   buttons side by side under it (gw-btn--lg: 48px, as gemboss.ai) */
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  align-items: center;
+  gap: 8px 16px;
+  margin-top: auto;
+  padding-block: 12px calc(12px + env(safe-area-inset-bottom));
+  border-top: 1px solid var(--gw-line);
+  background: var(--gw-bg);
+}
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > .gw-btn { grid-row: 2; }
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > :not(.gw-btn) { grid-row: 1; }
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > :not(.gw-btn):last-child { grid-column: 2; justify-self: end; }
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > .gw-mobile-menu__link { color: var(--gw-ink); font-weight: 500; }
+
+/* Wired (.is-drill, set by website.js): a group's row points right and opens its level, which shows alone
+   (.is-drilled) under its head: Back on the left, the level's title in the middle. The sheet starts where the header
+   ends (--gw-menu-top, measured by the script) and the header stays in place, so an announcement bar above it does not
+   jump away. */
+.gw-mobile-menu.is-drill { top: var(--gw-menu-top, calc(var(--gw-header-height) + 1px)); }
+html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky; }
+.gw-mobile-menu.is-drill .gw-mobile-menu__group > summary::after { transform: rotate(-90deg); transition: none; }
+.gw-mobile-menu.is-drilled > nav > :not([open], .gw-mobile-menu__actions),
+.gw-mobile-menu.is-drilled .gw-mobile-menu__group[open] > summary { display: none; }
+.gw-mobile-menu__head { display: none; }
+.gw-mobile-menu.is-drilled .gw-mobile-menu__group[open] > .gw-mobile-menu__head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  min-height: 56px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid var(--gw-line);
+}
+.gw-mobile-menu__back {
+  display: inline-flex;
+  align-items: center;
+  justify-self: start;
+  gap: 4px;
+  min-height: var(--gw-tap-min);
+  padding: 0 8px 0 0;
+  border: 0;
+  background: transparent;
+  color: var(--gw-muted);
+  font-size: 16px;
+  line-height: 1.5;
+}
+.gw-mobile-menu__back:hover { color: var(--gw-ink); }
+.gw-mobile-menu__back::before {
+  content: "";
+  flex: none;
+  width: 16px;
+  height: 16px;
+  background: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
+}
+.gw-mobile-menu__title { color: var(--gw-ink); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.5; text-align: center; }
+/* a level slides in from the right, the top level back in from the left; under reduced motion they just switch */
+@media (prefers-reduced-motion: no-preference) {
+  .gw-mobile-menu.is-drilled .gw-mobile-menu__group[open] { animation: gw-drill-in 0.24s var(--gw-ease); }
+  .gw-mobile-menu.is-back > nav > :not(.gw-mobile-menu__actions) { animation: gw-drill-back 0.24s var(--gw-ease); }
+}
+@keyframes gw-drill-in { from { opacity: 0; transform: translateX(32px); } }
+@keyframes gw-drill-back { from { opacity: 0; transform: translateX(-32px); } }
+
+/* The language switcher: <div class="gw-lang" data-gw-lang hidden>, a ghost button with the globe and the current
+   language's short code, and its list of the other languages, a small popover card (the card radius of the site's
+   profile, one hairline, the raised shadow). website.js fills the list from the page's <link rel="alternate" hreflang>
+   and takes `hidden` away when there is another language. In the header's actions it shows from 1080px, where the nav
+   is; below that a second one sits in the mobile menu's action bar, and its list opens upward. */
+.gw-lang { position: relative; flex: none; }
+.gw-header__actions > .gw-lang { display: none; }
+.gw-lang__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 40px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--gw-radius-action);
+  background: transparent;
+  color: var(--gw-ink-2);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+.gw-lang__btn:hover,
+.gw-lang__btn[aria-expanded="true"] { background: var(--gw-bg-soft); color: var(--gw-ink); }
+.gw-lang__btn svg { flex: none; width: 18px; height: 18px; }
+.gw-lang__menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 1;
+  display: grid;
+  gap: 2px;
+  min-width: 200px;
+  margin: 0;
+  padding: 8px;
+  list-style: none;
+  border: 1px solid var(--gw-line);
+  border-radius: var(--gw-radius-card);
+  background: var(--gw-surface);
+  box-shadow: var(--gw-shadow-raised);
+}
+.gw-lang__link {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 0 12px;
+  border-radius: var(--gw-radius-action);
+  color: var(--gw-ink);
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.gw-lang__link:hover { background: var(--gw-bg-soft); }
+.gw-mobile-menu .gw-lang__btn { padding: 0 8px 0 0; color: var(--gw-muted); font-size: 16px; }
+.gw-mobile-menu .gw-lang__btn:hover,
+.gw-mobile-menu .gw-lang__btn[aria-expanded="true"] { background: transparent; color: var(--gw-ink); }
+.gw-mobile-menu .gw-lang__menu { top: auto; right: auto; bottom: calc(100% + 8px); left: 0; }
+@media (max-width: 768px), (pointer: coarse) {
+  .gw-lang__btn, .gw-lang__link { min-height: var(--gw-tap-min); }
+}
+@media (min-width: 1080px) {
+  .gw-header__actions > .gw-lang { display: block; }
+}

package/css/tokens.css

@@ -15,6 +15,7 @@
   --gw-text-30: 30px;
   --gw-display-h1: clamp(40px, 4.6vw, 68px);
   --gw-display-h2: clamp(32px, 3.4vw, 52px);
+  --gw-display-wordmark: clamp(40px, 9vw, 128px);
   --gw-display-weight: 600;
   --gw-display-tracking: -0.03em;
   --gw-heading-weight: 650;

package/demo/footer.html

@@ -0,0 +1,339 @@
+<!doctype html>
+<!-- Kit demo (0.7.0): the footer of gemboss.ai built from templates/footer.html, every optional part on. The switch on
+     the page shows the same footer for a GemPages-style brand: soft corners, the accent button, the GemPages accent of
+     docs/theming.md, and its own family row. A real site picks its profiles once, on <html> (docs/theming.md); here a
+     small demo script sets them when the switch moves. Sample text from gemboss.ai; "Example brand" is not GemPages. -->
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Footer · GemBoss</title>
+  <meta name="description" content="The kit's footer as gemboss.ai has it: Ask AI links, five columns that fold on a phone, product-family rows, the theme toggle and the wordmark.">
+  <script>try{var t=localStorage.getItem('gw-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t)}catch(e){}</script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700&display=swap">
+  <link rel="stylesheet" href="../website.css">
+  <!-- the GemPages-style brand's whole CSS (docs/theming.md, "A full example"); on only while the switch says so -->
+  <style id="demo-gempages" media="not all">
+    :root {
+      --gw-accent-light: #3c67ff;
+      --gw-accent-strong-light: #2f52d6;
+      --gw-accent-soft-light: #eaefff;
+      --gw-on-accent-light: #ffffff;
+      --gw-accent-dark: #7c9bff;
+      --gw-accent-strong-dark: #a9beff;
+      --gw-accent-soft-dark: #16213d;
+      --gw-on-accent-dark: #0d0d12;
+    }
+  </style>
+</head>
+<body class="gw-page">
+  <a class="gw-skip" href="#main">Skip to content</a>
+
+  <header class="gw-header" data-gw-header>
+    <div class="gw-wrap gw-header__bar">
+      <a class="gw-brand" href="https://gemboss.ai/" data-gw-show="brand:gemboss"><svg class="gw-brand__mark" viewBox="0 0 100 116" aria-hidden="true"><polygon points="26,14 74,14 66,50 34,50" style="fill:var(--gw-accent)"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="9" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.6" stroke-linejoin="round"/></svg><span class="gw-brand__name">GemBoss</span></a><a class="gw-brand" href="footer.html#gempages" data-gw-show="brand:gempages" hidden><svg class="gw-brand__mark" viewBox="0 0 26 26" aria-hidden="true"><rect width="26" height="26" rx="7" style="fill:var(--gw-accent)"/><path d="M8 9h10M8 13h10M8 17h6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/></svg><span class="gw-brand__name">Example brand</span></a>
+      <nav class="gw-nav" aria-label="Main">
+        <ul class="gw-nav__list">
+          <li class="gw-nav__item">
+            <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-product" data-gw-mega="gw-mega-product">Product</button>
+            <div class="gw-mega" id="gw-mega-product" hidden>
+              <div class="gw-wrap gw-mega__grid">
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Build</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/funnel"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h18l-7 8v6l-4 2v-8z"/></svg></span><span><b>Funnel builder</b><i>Angles, advertorials, offers</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg></span><span><b>Storefront builder</b><i>Headless, on your Shopify</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/gempages"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span><span><b>Page builder</b><i>Ask, watch, publish</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Grow</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/gemx"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16M20 4v16M4 9h16M4 15h16"/></svg></span><span><b>Tests &amp; personalization</b><i>You promote the winner</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/gemoffers"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12l-8 8-9-9V3h8z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg></span><span><b>Offers &amp; upsells</b><i>Bundles, gifts, bumps</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/data"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg></span><span><b>Analytics &amp; data</b><i>First-party, yours</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Connect</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/integrations"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v6M15 3v6M6 9h12v3a6 6 0 0 1-12 0z"/><path d="M12 18v3"/></svg></span><span><b>Integrations</b><i>Klaviyo, Meta, Google</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/mcp"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="m8 9-4 3 4 3"/><path d="m16 9 4 3-4 3"/><path d="m14 5-4 14"/></svg></span><span><b>MCP &amp; agents</b><i>Claude and Codex</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/agent-ready"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4"/><circle cx="9.5" cy="13.5" r="1"/><circle cx="14.5" cy="13.5" r="1"/></svg></span><span><b>Agent-ready storefront</b><i>Ready for AI shoppers</i></span></a>
+                </div>
+                <a class="gw-mega__feature" href="https://gemboss.ai/engine"><b>How the engine works</b><i>Six stages, one loop. Nothing ships without you.</i><span class="gw-link gw-link--arrow">See the engine</span></a>
+              </div>
+            </div>
+          </li>
+          <li class="gw-nav__item">
+            <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-usecases" data-gw-mega="gw-mega-usecases">Use cases</button>
+            <div class="gw-mega" id="gw-mega-usecases" hidden>
+              <div class="gw-wrap gw-mega__grid">
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Adaptive funnels</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/meta-ads"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11v2a1 1 0 0 0 1 1h3l5 4V6L7 10H4a1 1 0 0 0-1 1z"/><path d="M16 9a4 4 0 0 1 0 6"/></svg></span><span><b>Meta, Google &amp; TikTok ads</b><i>A funnel for every ad angle</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/klaviyo-personalized-landing-pages"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span><b>Klaviyo email <span class="gw-badge gw-badge--warning">Early access</span></b><i>A page per recipient, after the click</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Adaptive storefront</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg></span><span><b>Headless storefront</b><i>Your whole Shopify store, on GemBoss</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/agent-ready"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4"/><circle cx="9.5" cy="13.5" r="1"/><circle cx="14.5" cy="13.5" r="1"/></svg></span><span><b>AI agents &amp; AI search</b><i>Readable by AI, shoppable by agents</i></span></a>
+                </div>
+                <a class="gw-mega__feature" href="https://gemboss.ai/meta-ads"><b>Every ad gets its own page</b><i>The page keeps the promise the ad made.</i><span class="gw-link gw-link--arrow">See the ad-to-page path</span></a>
+              </div>
+            </div>
+          </li>
+          <li class="gw-nav__item"><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
+          <li class="gw-nav__item">
+            <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-resources" data-gw-mega="gw-mega-resources">Resources</button>
+            <div class="gw-mega" id="gw-mega-resources" hidden>
+              <div class="gw-wrap gw-mega__grid">
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Learn</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/blog"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h11a2 2 0 0 1 2 2v14H6a2 2 0 0 1-2-2z"/><path d="M8 8h7M8 12h7"/></svg></span><span><b>Blog</b><i>Playbooks and guides</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/docs"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg></span><span><b>Docs</b><i>Guides and MCP tools</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Company</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/company"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></span><span><b>About</b><i>Why we build it</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/contact"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span><span><b>Contact</b><i>Talk to a human</i></span></a>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </nav>
+      <div class="gw-header__actions">
+        <button class="gw-theme-toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
+        <a class="gw-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
+        <a class="gw-btn gw-btn--secondary gw-btn--sm" href="https://gemboss.ai/contact">Book a demo</a>
+        <a class="gw-btn gw-btn--sm" href="https://admin.gemboss.ai/signup">Start free</a>
+        <button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
+      </div>
+    </div>
+    <div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
+      <nav class="gw-wrap" aria-label="Main, mobile">
+        <details class="gw-mobile-menu__group">
+          <summary>Product</summary>
+          <ul class="gw-mobile-menu__list">
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/funnel">Funnel builder</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder">Storefront builder</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/gemx">Tests &amp; personalization</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/gemoffers">Offers &amp; upsells</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/integrations">Integrations</a></li>
+          </ul>
+        </details>
+        <details class="gw-mobile-menu__group">
+          <summary>Use cases</summary>
+          <ul class="gw-mobile-menu__list">
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/meta-ads">Meta, Google &amp; TikTok ads</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder">Headless storefront</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/agent-ready">AI agents &amp; AI search</a></li>
+          </ul>
+        </details>
+        <a class="gw-mobile-menu__top" href="https://gemboss.ai/pricing">Pricing</a>
+        <details class="gw-mobile-menu__group">
+          <summary>Resources</summary>
+          <ul class="gw-mobile-menu__list">
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/blog">Blog</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/docs">Docs</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/company">About</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/contact">Contact</a></li>
+          </ul>
+        </details>
+        <div class="gw-mobile-menu__actions">
+          <a class="gw-btn gw-btn--block" href="https://admin.gemboss.ai/signup">Start free</a>
+          <a class="gw-btn gw-btn--secondary gw-btn--block" href="https://gemboss.ai/contact">Book a demo</a>
+          <a class="gw-mobile-menu__link" href="https://admin.gemboss.ai/login">Sign in</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main">
+    <section class="gw-section">
+      <div class="gw-wrap">
+        <div class="gw-section__head">
+          <p class="gw-label">Footer, 0.7.0</p>
+          <h1><span class="gw-dim">The footer of gemboss.ai.</span> Now one template for every brand.</h1>
+          <p class="gw-lead">Ask AI links, five columns that fold into rows on a phone, product-family rows, a theme toggle and the wordmark. Each part is optional. Scroll down, or narrow the window below 768px.</p>
+        </div>
+        <div class="gw-segmented" role="radiogroup" aria-label="Footer of" data-gw-segmented="brand">
+          <button type="button" role="radio" aria-checked="true" value="gemboss">GemBoss</button>
+          <button type="button" role="radio" aria-checked="false" value="gempages">GemPages-style</button>
+        </div>
+        <p class="gw-note demo-mt" data-gw-show="brand:gemboss">GemBoss: tight corners, the ink button, two family rows. The words are gemboss.ai's.</p>
+        <p class="gw-note demo-mt" data-gw-show="brand:gempages" hidden>A GemPages-style brand: soft corners, the accent button and GemPages' blue, its own family row (GemBoss, GemX, GemUpsells), the newsletter instead of Ask AI. Example brand, not GemPages' page.</p>
+        <div class="gw-actions">
+          <a class="gw-btn" href="#footer">See the footer</a>
+          <a class="gw-btn gw-btn--secondary" href="https://gemboss.ai/">Compare with gemboss.ai</a>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="gw-footer" id="footer">
+    <div class="gw-wrap">
+      <div class="gw-footer__grid">
+        <div class="gw-footer__brand">
+          <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="footer.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>
+          <p data-gw-show="brand:gemboss">The AI Conversion Engine for Shopify. Build a brand-true store, ship it blazing fast, and see what to change to sell more.</p>
+          <p data-gw-show="brand:gempages" hidden>One sentence on what the brand does for the reader. Sample text for the demo.</p>
+          <div class="gw-footer__ask" data-gw-show="brand:gemboss">
+            <p class="gw-footer__ask-label" id="footer-ask">Ask AI about GemBoss</p>
+            <ul aria-labelledby="footer-ask">
+              <li><a href="https://chatgpt.com/?q=What%20is%20GemBoss%20%28gemboss.ai%29%2C%20and%20how%20does%20it%20help%20Shopify%20brands%20turn%20ad%20clicks%20into%20sales%3F" target="_blank" rel="noopener">ChatGPT<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+              <li><a href="https://claude.ai/new?q=What%20is%20GemBoss%20%28gemboss.ai%29%2C%20and%20how%20does%20it%20help%20Shopify%20brands%20turn%20ad%20clicks%20into%20sales%3F" target="_blank" rel="noopener">Claude<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+              <li><a href="https://www.perplexity.ai/search/new?q=What%20is%20GemBoss%20%28gemboss.ai%29%2C%20and%20how%20does%20it%20help%20Shopify%20brands%20turn%20ad%20clicks%20into%20sales%3F" target="_blank" rel="noopener">Perplexity<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+              <li><a href="https://www.google.com/search?udm=50&amp;q=What%20is%20GemBoss%20%28gemboss.ai%29%2C%20and%20how%20does%20it%20help%20Shopify%20brands%20turn%20ad%20clicks%20into%20sales%3F" target="_blank" rel="noopener">Google AI Mode<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+            </ul>
+          </div>
+          <form class="gw-footer__newsletter" action="#footer" method="post" novalidate data-gw-show="brand:gempages" hidden>
+            <div class="gw-field">
+              <label class="gw-field__label" for="footer-email">Product news by email</label>
+              <div class="gw-form-inline">
+                <input class="gw-input" id="footer-email" name="email" type="email" autocomplete="email" required aria-describedby="footer-email-error footer-email-note">
+                <button class="gw-btn gw-btn--secondary" type="submit">Subscribe</button>
+              </div>
+              <p class="gw-field__error" id="footer-email-error"></p>
+              <p class="gw-field__hint" id="footer-email-note">One email a month. Unsubscribe in one click. <a href="https://gemboss.ai/privacy">Privacy policy</a></p>
+            </div>
+          </form>
+        </div>
+        <nav class="gw-footer__col" aria-label="Product">
+          <details class="gw-footer__fold">
+            <summary><h2 class="gw-footer__heading">Product</h2></summary>
+            <ul>
+              <li><a href="https://gemboss.ai/funnel">Funnel builder</a></li>
+              <li><a href="https://gemboss.ai/ai-store-builder">Storefront builder</a></li>
+              <li><a href="https://gemboss.ai/ab-testing">Tests &amp; personalization</a></li>
+              <li><a href="https://gemboss.ai/offers">Offers &amp; upsells</a></li>
+              <li><a href="https://gemboss.ai/data">Analytics &amp; data</a></li>
+              <li><a href="https://gemboss.ai/integrations">Integrations</a></li>
+              <li><a href="https://gemboss.ai/pricing">Pricing</a></li>
+            </ul>
+          </details>
+        </nav>
+        <nav class="gw-footer__col" aria-label="Use cases">
+          <details class="gw-footer__fold">
+            <summary><h2 class="gw-footer__heading">Use cases</h2></summary>
+            <ul>
+              <li><a href="https://gemboss.ai/meta-ads">Meta, Google &amp; TikTok ads</a></li>
+              <li><a href="https://gemboss.ai/klaviyo-personalized-landing-pages">Klaviyo landing pages</a></li>
+              <li><a href="https://gemboss.ai/affiliate-landing-pages">Affiliate pages</a></li>
+              <li><a href="https://gemboss.ai/ai-store-builder">Headless storefront</a></li>
+              <li><a href="https://gemboss.ai/agent-ready">AI agents &amp; AI search</a></li>
+            </ul>
+          </details>
+        </nav>
+        <nav class="gw-footer__col" aria-label="Solutions">
+          <details class="gw-footer__fold">
+            <summary><h2 class="gw-footer__heading">Solutions</h2></summary>
+            <ul>
+              <li><a href="https://gemboss.ai/beauty-skincare">Beauty &amp; skincare</a></li>
+              <li><a href="https://gemboss.ai/wellness-supplements">Wellness</a></li>
+              <li><a href="https://gemboss.ai/fashion-apparel">Fashion</a></li>
+              <li><a href="https://gemboss.ai/home-food">Home &amp; food</a></li>
+              <li><a href="https://gemboss.ai/electronics">Consumer electronics</a></li>
+              <li><a href="https://gemboss.ai/enterprise">Enterprise</a></li>
+              <li><a href="https://gemboss.ai/managed">Managed service</a></li>
+            </ul>
+          </details>
+        </nav>
+        <nav class="gw-footer__col" aria-label="Resources">
+          <details class="gw-footer__fold">
+            <summary><h2 class="gw-footer__heading">Resources</h2></summary>
+            <ul>
+              <li><a href="https://gemboss.ai/audit">Free store audit</a></li>
+              <li><a href="https://gemboss.ai/shopify-store-setup">Shopify store setup</a></li>
+              <li><a href="https://gemboss.ai/blog">Blog</a></li>
+              <li><a href="https://gemboss.ai/docs">Docs</a></li>
+              <li><a href="https://gemboss.ai/mcp">MCP for AI agents</a></li>
+              <li><a href="https://feedback.gemboss.ai/changelog" rel="noopener">Changelog<span class="gw-footer__ext" aria-hidden="true"></span></a></li>
+            </ul>
+          </details>
+        </nav>
+        <nav class="gw-footer__col" aria-label="Company">
+          <details class="gw-footer__fold">
+            <summary><h2 class="gw-footer__heading">Company</h2></summary>
+            <ul>
+              <li><a href="https://gemboss.ai/company">About</a></li>
+              <li><a href="https://gemboss.ai/careers">Careers</a></li>
+              <li><a href="https://gemboss.ai/company#security">Security</a></li>
+              <li><a href="https://gemboss.ai/partners">Partners</a></li>
+              <li><a href="https://gemboss.ai/affiliates">Affiliates</a></li>
+              <li><a href="https://gemboss.ai/klaviyo-agencies">Klaviyo agencies</a></li>
+              <li><a href="https://gemboss.ai/contact">Contact</a></li>
+            </ul>
+          </details>
+        </nav>
+      </div>
+      <nav class="gw-footer__family" aria-label="More from GemBoss" data-gw-show="brand:gemboss">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">More from GemBoss</h2></summary>
+          <ul>
+            <li><a href="https://gemboss.ai/custom-theme"><b>GemThemes</b> <i>Custom theme</i></a></li>
+            <li><a href="https://gemboss.ai/product#plugins"><b>Plugins</b> <i>Reviews, quiz, popups</i></a></li>
+            <li><a href="https://gemboss.ai/download"><b>Desktop app</b> <i>macOS &amp; Windows</i></a></li>
+            <li><a href="https://community.gemboss.ai" rel="noopener"><b>Community<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>Brands building with GemBoss</i></a></li>
+            <li><a href="https://news.gemboss.ai/ext" rel="noopener"><b>News for Chrome<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>Daily briefing</i></a></li>
+          </ul>
+        </details>
+      </nav>
+      <nav class="gw-footer__family" aria-label="From the same team, on the Shopify App Store" data-gw-show="brand:gemboss">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">From the same team, on the Shopify App Store</h2></summary>
+          <ul>
+            <li><a href="https://gemboss.ai/shopify-apps#gempages"><b>GemPages</b> <i>Landing page builder</i></a></li>
+            <li><a href="https://gemboss.ai/shopify-apps#gemx"><b>GemX</b> <i>CRO &amp; A/B testing</i></a></li>
+            <li><a href="https://gemboss.ai/shopify-apps#gemupsells"><b>GemUpsells</b> <i>Journey builder</i></a></li>
+            <li><a href="https://gemboss.ai/shopify-apps"><b>All three apps</b> <i>And how GemBoss differs</i></a></li>
+          </ul>
+        </details>
+      </nav>
+      <nav class="gw-footer__family" aria-label="From the same team" data-gw-show="brand:gempages" hidden>
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">From the same team</h2></summary>
+          <ul>
+            <li><a href="https://gemboss.ai/" target="_blank" rel="noopener"><b>GemBoss<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>The AI Conversion Engine for Shopify</i><span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+            <li><a href="https://gemboss.ai/shopify-apps#gemx" rel="noopener"><b>GemX<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>CRO &amp; A/B testing</i></a></li>
+            <li><a href="https://gemboss.ai/shopify-apps#gemupsells" rel="noopener"><b>GemUpsells<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>Journey builder</i></a></li>
+          </ul>
+        </details>
+      </nav>
+      <div class="gw-footer__bottom">
+        <span><span data-gw-show="brand:gemboss">© 2026 GemBoss. All rights reserved.</span><span data-gw-show="brand:gempages" hidden>© 2026 Example brand. Sample text.</span></span>
+        <ul aria-label="Legal">
+          <li><a href="https://gemboss.ai/privacy">Privacy</a></li>
+          <li><a href="https://gemboss.ai/terms">Terms</a></li>
+        </ul>
+        <button class="gw-theme-toggle gw-footer__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>
+        <ul aria-label="Social">
+          <li><a href="https://www.linkedin.com/company/gempages" target="_blank" rel="noopener">LinkedIn<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+          <li><a href="https://x.com/gempages" target="_blank" rel="noopener">X<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+          <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>
+        </ul>
+      </div>
+      <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>
+      <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>
+    </div>
+  </footer>
+
+  <script src="../js/website.js" defer></script>
+  <script>
+    // demo only: the switch above picks a brand. A real site sets its profiles once, in the markup of <html>, and its
+    // accent in site.css (docs/theming.md); this page flips them so one file can show both. #gempages opens it so.
+    (function () {
+      var root = document.documentElement, accent = document.getElementById('demo-gempages');
+      function brand(b) {
+        var gp = b === 'gempages';
+        if (gp) { root.setAttribute('data-gw-radius', 'soft'); root.setAttribute('data-gw-action', 'accent'); }
+        else { root.removeAttribute('data-gw-radius'); root.removeAttribute('data-gw-action'); }
+        accent.media = gp ? 'all' : 'not all';
+      }
+      document.addEventListener('gw:segmented', function (e) { if (e.detail.name === 'brand') brand(e.detail.value); });
+      document.addEventListener('DOMContentLoaded', function () {
+        if (location.hash === '#gempages') { var o = document.querySelector('[data-gw-segmented="brand"] [value="gempages"]'); if (o) o.click(); }
+      });
+    })();
+  </script>
+</body>
+</html>