@gemboss/website-ui 0.6.0 → 0.7.0

package/AGENTS.md

@@ -10,15 +10,17 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
 | file | what it is |
 |---|---|
 | `website.css` | the whole kit, one file (tokens, base, layout, components, sections) |
-| `js/website.js` | header, mega menu, mobile menu, theme toggle, scroll reveal, segmented control, busy buttons, an article's contents and its tables' scroll box; no dependencies; `window.gwWebsite.init(root)` |
+| `js/website.js` | header, mega menu, mobile menu, theme toggle, scroll reveal, segmented control, busy buttons, an article's contents and its tables' scroll box, the footer's folds; no dependencies; `window.gwWebsite.init(root)` |
 | `js/website.mjs` | the same script as an ES module for apps: `import { init, destroy } from '@gemboss/website-ui/website.mjs'` |
 | `system.json` | every value of the system: colours, spacing, type, radii, shadows, widths |
 | `templates/page.html` | the page skeleton: start every new page from it |
+| `templates/footer.html` | the footer of every site (the footer of gemboss.ai): fill it once, in the site's shared partial |
 | `templates/sections/*.html` | ready sections: hero, features, split, showcase, logos, stats, steps, pricing, FAQ, CTA, prose, article, post list, a short form, testimonials… |
 | `demo/index.html` | every component on one page: open it to see what exists before you build anything |
 | `demo/brand-profiles.html` | a GemPages-style brand: its accent, the accent button, soft corners, the floating header |
 | `demo/article.html`, `demo/blog.html` | a whole blog post (breadcrumbs, meta, contents, prose, callouts, FAQ) and the blog index (post list, pagination) |
 | `demo/forms.html` | fields in every state, choices, the footer newsletter, a short form, stars, the testimonial wall and the rating badge |
+| `demo/footer.html` | the full footer (Ask AI, columns that fold on phones, family rows, theme toggle, wordmark), and the same for a GemPages-style brand |
 | `docs/components.md` | every class, what it is for, its variants |
 | `docs/theming.md` | what a brand other than GemBoss chooses (accent, wash, logo, three named profiles), and what it must not change |
 
@@ -57,6 +59,9 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
 
 1. Copy `templates/page.html` into the site. It links `website.css` and `website.js`, has the skip link, the
    header, the `<main>` and the footer. Fill the header and footer once (they are the same on every page).
+   **The footer comes from `templates/footer.html`.** A brand fills its rows (the columns, the family rows, the
+   words) and deletes the optional parts it does not use (Ask AI, newsletter, family rows, theme toggle, wordmark);
+   it never invents a footer part (a logo strip, badges, a map, a second bottom row). Something missing is a gap.
 2. Pick sections from `templates/sections/` in the order the page needs. A typical page: hero → proof (logos or
    stats) → 2 to 4 feature sections → one showcase or split → FAQ → final CTA. Not every page needs every section;
    fewer, clearer sections beat more. A page that is read rather than scanned (a blog post, docs, terms, privacy) is
@@ -92,6 +97,10 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
   button in a row `.gw-form-inline`, a short form `.gw-form`. Ask as little as you can: one field beats a form, and a
   form keeps two or three fields (`templates/sections/form.html`). A field in error is `aria-invalid="true"` plus its
   `.gw-field__error` in words; the page decides when, the kit draws it.
+- **Footer** (0.7.0): `templates/footer.html`. Columns are `<details class="gw-footer__fold">` with the heading in the
+  `<summary>`: rows that fold on phones, open columns from 768px, no script needed. A link that leaves the site gets the
+  ↗ (`.gw-footer__ext`); one with `target="_blank"` also `<span class="gw-visually-hidden"> (opens in a new tab)</span>`.
+  The wordmark is `aria-hidden="true"`.
 - **Ratings** (0.6.0): stars `.gw-stars` (`role="img"`, `aria-label="4.9 out of 5"`, `style="--gw-stars: 4.9"`), the
   wall `.gw-testimonials` of `.gw-card.gw-testimonial`, the badge `.gw-rating-badge` (`templates/sections/testimonials.html`).
 - **One choice out of two to four** (Monthly / Yearly) is `.gw-segmented`, a radio group; what each option shows
@@ -138,6 +147,9 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
 - Don't make a callout whose kind only its colour tells: `.gw-callout` starts with its `.gw-callout__label` in words.
 - Don't type separators (›, /, >) between breadcrumbs, and don't build a contents list whose links point at ids the
   page does not have: build it from the article's own h2s.
+- Don't add a footer part the template does not have, and don't build footer columns that fold with your own script:
+  fill `templates/footer.html` (its family rows take another brand's siblings: GemBoss, GemX, GemUpsells on a
+  GemPages site). Don't put the assistants' logos in the Ask AI row.
 - Don't animate layout properties (width, height, top, margin), and don't autoplay motion that cannot be stopped.
 - Don't ship a page you have not seen at 320px.
 - Don't write CSS that overrides a `.gw-*` class to change how it looks. If the kit's version is wrong for you,
@@ -250,7 +262,8 @@ a waiting button not marked with `aria-busy`, a segmented control without its ra
 with numbers and no caption, an unknown brand profile or one set off `<html>`, `.gw-header--float` off the header,
 words on the accent button below 4.5:1, breadcrumbs without their markup, a contents link to an id that is not on
 the page, a callout without its label, stars without their value in words, a rating or a testimonial without a link to
-its source, and patterns that repeat across pages (likely gaps). It does not replace looking at the page at 320px and 1366px.
+its source, a footer fold without its heading in the summary or a wordmark a screen reader reads, and patterns that
+repeat across pages (likely gaps). It does not replace looking at the page at 320px and 1366px.
 
 ## 11. Upgrading the kit
 

package/CHANGELOG.md

@@ -4,6 +4,67 @@ Every release lists what changed for a site that uses the kit. A release that ad
 says so with `Closes gap #N` (the GitHub issue number), so `npx gemboss-website upgrade` can tell that site which
 stopgap (`kitgap-*`) it can now delete.
 
+## 0.7.0 (2026-10-25)
+
+The footer as gemboss.ai has it today (gap #71): the kit's footer, built on 24/10 from gemboss.ai, had fallen behind
+the site's. Every new part is optional, per site, and selects only its own markup: a page with the 0.6.0 footer looks
+exactly as before. The demo index (without its new link), `brand-profiles.html`, `article.html`, `blog.html`,
+`forms.html` and `theme-example.html` are pixel-identical to 0.6.0 at 390 and 1366px, light and dark.
+
+Closes #71
+
+- Ask AI `.gw-footer__ask` (+ `__ask-label`) in the brand block: "Ask AI about [Brand]" and four links (ChatGPT,
+  Claude, Perplexity, Google AI Mode) that open the assistant with one neutral question already typed, URL-encoded
+  after `?q=` (Google: `search?udm=50&q=`), as gemboss.ai builds them. Words, not the assistants' logos. 28px rows,
+  44px on touch; the row may run wider than the brand's sentence (four names on one line at 390px).
+- Columns that fold: each `.gw-footer__col` holds a `<details class="gw-footer__fold">` whose `<summary>` is the
+  column's `<h2 class="gw-footer__heading">`. Below 768px the columns are one track of 52px rows with a chevron,
+  folded, and the browser opens and closes them (no script needed); the open list's links are 44px. From 768px they
+  are the columns as before: the summary is only its heading (`display: contents`: no box, no Tab stop) and the list
+  shows even while the `<details>` is closed (`::details-content`, in a rule of its own so an older browser drops only
+  it). `website.js` sets `open` from 768px, takes the summary out of the Tab order there and ignores a click on it,
+  gives back the markup's state below 768px (again on every change of width), and is wired like every other part
+  (`data-gw-ready="fold"`, `init` once per element, `destroy` takes it back). From 1080px the brand's track is as
+  wide as gemboss.ai draws it beside five columns (193.5px at 1120px), whatever the number of columns, and the columns
+  share the rest: three to six fit. With the fold markup only; the 0.6.0 columns keep their 1.6fr.
+  Closes gap #40 (footer accordion on phones)
+- Product family `.gw-footer__family`: a `<nav aria-label>` holding a fold whose heading is the row's label, and a
+  list of products, name and one line each (`<b>` and `<i>`, a space between). Repeat it for a second family ("More
+  from GemBoss", "From the same team, on the Shopify App Store"). Two items a line on phones (one more folded row),
+  four from 768px, and from 1080px the label in the brand's track and the items starting where the first column
+  starts. Items take the action radius (12px in `soft`) and the soft ground on hover.
+- External links: `.gw-footer__ext`, a drawn ↗ after a link that leaves the site (aria-hidden). A link with
+  `target="_blank"` also carries `<span class="gw-visually-hidden"> (opens in a new tab)</span>`; one without it does
+  not. `.gw-visually-hidden` is new in `base.css`: words a screen reader hears and the page does not show.
+- Theme toggle in the bottom row: `.gw-theme-toggle.gw-footer__toggle` with `data-gw-theme-toggle`, wired by
+  `website.js` like the header's (both relabel together). A 32px square with one hairline and the action radius, a
+  40px hit area, 44px on touch; it pushes itself and the social links to the right. Below 768px the copyright and the
+  toggle share the first line, the legal and social links the second.
+- Wordmark `.gw-footer__wordmark` (`aria-hidden="true"`): the brand's mark (an inline SVG in `currentColor`) and name,
+  ink at 10%, at `--gw-display-wordmark` (`clamp(40px, 9vw, 128px)`, new in `system.json` `type.display`), the
+  display tracking, weight 700, centred, 48px under the bottom row. A name too long for the line is cut, never a
+  sideways scroll. Not shown below 480px, as gemboss.ai hides it on phones.
+- Spacing as measured on gemboss.ai and on the kit's scale: family rows 48px apart with 32px under their hairline,
+  32px from the last family row to the bottom row (24px on phones), headings 12px above their links, 32px link rows.
+- Templates: `templates/footer.html` is now the full footer, every optional part marked (Ask AI, the 0.6.0
+  newsletter, the family row, the toggle, the wordmark), five columns; `templates/page.html` uses the folding columns.
+  Demo: `demo/footer.html`, the gemboss.ai footer with gemboss.ai's words, and a switch to the same footer for a
+  GemPages-style brand (`data-gw-radius="soft"`, `data-gw-action="accent"`, the GemPages accent of
+  `docs/theming.md`, a family row listing GemBoss, GemX and GemUpsells, the newsletter instead of Ask AI), linked
+  from `demo/index.html`.
+- `check`: `footer-markup` (an error): a `.gw-footer__fold` that is not a `<details>`, has no `<summary>`, or whose
+  summary does not hold the `.gw-footer__heading`; a `.gw-footer__wordmark` without `aria-hidden="true"`.
+- `AGENTS.md`, the skill and the docs: the footer comes from `templates/footer.html`; a brand fills its rows and
+  never invents a footer part.
+- Budget: `website.min.css` is 65.8 KB, 11.4 KB gzipped (0.6.0: 59.3 KB, 10.5 KB), most of it the three drawn icons'
+  masks. `js/website.js` is 14.5 KB unminified, 4.7 KB gzipped (0.6.0: 13.8 KB, 4.5 KB), under the test's 15 KB and
+  5 KB.
+- Tests: `test/run.mjs` holds the 0.6.0 rules of `footer.css` byte for byte and every 0.7.0 rule to a 0.7.0 part, and
+  covers the folds in its fake DOM and the new rule; `test/browser.mjs` drives `demo/footer.html` in Chromium (folded
+  at 390px, open at 1366px, Tab, Enter and Space, a click on a desktop heading, resizing both ways, without the
+  script, the wordmark out of the accessibility tree, no sideways scroll at 320 and 390px, the toggle, the
+  GemPages-style switch light and dark, and the column widths measured on gemboss.ai).
+
 ## 0.6.0 (2026-10-25)
 
 Forms and ratings: the fields a contact page, a sign-up or a footer newsletter needs, with their error state, and the

package/README.md

@@ -12,11 +12,11 @@ it. Made so that a team working with Claude Code, even without a designer, ships
 
 | | |
 |---|---|
-| `website.css`, `website.min.css` | toàn bộ kit trong một tệp (khoảng 82 KB, 59 KB bản min, 10,5 KB khi nén gzip): token sáng và tối, chữ, bố cục, nút (cả trạng thái nhấn, đang chờ và nút xoá), link, nhãn, chip, segmented control, badge, card (kèm ảnh trên đầu thẻ), khung cửa sổ kèm chú thích "Illustrative data.", bảng, FAQ, chữ bài dài (`.gw-prose`), bộ khung bài blog (breadcrumb, dòng tác giả và ngày, mục lục dính, hộp lưu ý, danh sách bài, phân trang), ô nhập và trạng thái lỗi (ô chữ, danh sách chọn, ô nhiều dòng, checkbox, radio, hàng một ô một nút cho newsletter), sao đánh giá, tường review, huy hiệu điểm App Store, header + mega menu + menu điện thoại, footer (kèm ô newsletter tuỳ chọn), 16 section, 3 hồ sơ thương hiệu |
-| `js/website.js`, `js/website.mjs` | mega menu, menu điện thoại, đổi giao diện sáng/tối, hiện dần khi cuộn, đánh dấu trang hiện tại, segmented control, chặn bấm lần hai khi nút đang chờ, đánh dấu mục đang đọc trong mục lục bài viết, khung cuộn cho bảng trong bài; không phụ thuộc thư viện nào, khoảng 4,5 KB khi nén gzip. `website.js` là script thường (tự chạy khi trang tải xong), `website.mjs` là bản ES module cho app; cả hai có `init(root)` để gắn lại phần markup chèn sau (`docs/markup-contract.md`, mục "Script") |
+| `website.css`, `website.min.css` | toàn bộ kit trong một tệp (khoảng 92 KB, 66 KB bản min, 11,4 KB khi nén gzip): token sáng và tối, chữ, bố cục, nút (cả trạng thái nhấn, đang chờ và nút xoá), link, nhãn, chip, segmented control, badge, card (kèm ảnh trên đầu thẻ), khung cửa sổ kèm chú thích "Illustrative data.", bảng, FAQ, chữ bài dài (`.gw-prose`), bộ khung bài blog (breadcrumb, dòng tác giả và ngày, mục lục dính, hộp lưu ý, danh sách bài, phân trang), ô nhập và trạng thái lỗi (ô chữ, danh sách chọn, ô nhiều dòng, checkbox, radio, hàng một ô một nút cho newsletter), sao đánh giá, tường review, huy hiệu điểm App Store, header + mega menu + menu điện thoại, footer như gemboss.ai (cột gập lại trên điện thoại, hàng Ask AI, hàng sản phẩm cùng nhà, nút sáng/tối, wordmark; ô newsletter tuỳ chọn), 16 section, 3 hồ sơ thương hiệu |
+| `js/website.js`, `js/website.mjs` | mega menu, menu điện thoại, đổi giao diện sáng/tối, hiện dần khi cuộn, đánh dấu trang hiện tại, segmented control, chặn bấm lần hai khi nút đang chờ, đánh dấu mục đang đọc trong mục lục bài viết, khung cuộn cho bảng trong bài, cột footer gập/mở theo khổ màn; không phụ thuộc thư viện nào, khoảng 4,7 KB khi nén gzip. `website.js` là script thường (tự chạy khi trang tải xong), `website.mjs` là bản ES module cho app; cả hai có `init(root)` để gắn lại phần markup chèn sau (`docs/markup-contract.md`, mục "Script") |
 | `AGENTS.md` | luật mà Claude Code (và người) phải theo: 10 luật, cách dựng trang, điều cấm, chữ, khả năng truy cập, đổi thương hiệu, khi kit thiếu |
-| `templates/` | khung một trang và 16 section (hero, logos, stats, features, split, showcase, steps, quote, pricing, faq, cta, prose, article, post-list, form, testimonials) |
-| `demo/` | mọi thành phần trên một trang; `theme-example.html` cho thấy một thương hiệu khác đổi màu nhấn; `brand-profiles.html` là một thương hiệu kiểu GemPages bật cả 3 hồ sơ; `article.html` là một bài blog trọn vẹn, `blog.html` là trang danh sách bài; `forms.html` là mọi trạng thái của ô nhập, newsletter ở footer, tường review và huy hiệu điểm (dữ liệu mẫu) |
+| `templates/` | khung một trang, header, footer (`footer.html`: footer của gemboss.ai, mọi phần tuỳ chọn đều ghi rõ) và 16 section (hero, logos, stats, features, split, showcase, steps, quote, pricing, faq, cta, prose, article, post-list, form, testimonials) |
+| `demo/` | mọi thành phần trên một trang; `theme-example.html` cho thấy một thương hiệu khác đổi màu nhấn; `brand-profiles.html` là một thương hiệu kiểu GemPages bật cả 3 hồ sơ; `article.html` là một bài blog trọn vẹn, `blog.html` là trang danh sách bài; `forms.html` là mọi trạng thái của ô nhập, newsletter ở footer, tường review và huy hiệu điểm (dữ liệu mẫu); `footer.html` là footer đầy đủ như gemboss.ai, kèm nút chuyển sang bản kiểu GemPages |
 | `docs/` | danh mục class (`components.md`), đổi thương hiệu (`theming.md`), triết lý (`philosophy.md`), hợp đồng markup |
 | `system.json` | mọi giá trị của hệ thống (màu, khoảng cách, chữ, bo góc, bóng, khung): nguồn duy nhất |
 | CLI `gemboss-website` | `init`, `check`, `gap`, `upgrade` |
@@ -40,9 +40,9 @@ nó đọc `AGENTS.md` của kit trước, dựng từ mẫu, và chạy `check`
 **Site HTML tĩnh hoặc không có bước build:** dùng CDN của npm, ghim đúng phiên bản.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.6.0/website.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.7.0/website.min.css">
 <link rel="stylesheet" href="/site.css">   <!-- CSS riêng của site, luôn SAU kit -->
-<script src="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.6.0/js/website.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.7.0/js/website.js" defer></script>
 ```
 
 Chèn markup của kit sau khi trang đã tải (block của builder, bản xem trước CMS): gọi `gwWebsite.init(phầnMới)` ngay
@@ -113,7 +113,7 @@ viết hoa vẫn cấm. Công thức và các phép kiểm tương phản: `docs
 | lệnh | làm gì |
 |---|---|
 | `npx gemboss-website init` | nối luật của kit vào Claude Code của dự án (CLAUDE.md + skill) |
-| `npx gemboss-website check` | kiểm mọi `.html` và `.css` của site: màu, khoảng cách, chữ, bo góc ngoài thang, bóng, nút tự tô màu, nhãn viết hoa giãn chữ, đè class `gw-`, đổi token của kit, hồ sơ thương hiệu sai tên hoặc sai chỗ, chữ trên nút màu nhấn dưới 4,5:1, dấu gạch dài, ảnh thiếu `alt`, link mơ hồ, sao thiếu giá trị bằng chữ, điểm hay review không có link nguồn… và gợi ý chỗ kit có thể đang thiếu |
+| `npx gemboss-website check` | kiểm mọi `.html` và `.css` của site: màu, khoảng cách, chữ, bo góc ngoài thang, bóng, nút tự tô màu, nhãn viết hoa giãn chữ, đè class `gw-`, đổi token của kit, hồ sơ thương hiệu sai tên hoặc sai chỗ, chữ trên nút màu nhấn dưới 4,5:1, dấu gạch dài, ảnh thiếu `alt`, link mơ hồ, sao thiếu giá trị bằng chữ, điểm hay review không có link nguồn, cột footer gập thiếu tiêu đề trong summary, wordmark không ẩn với trình đọc màn hình… và gợi ý chỗ kit có thể đang thiếu |
 | `npx gemboss-website gap` | báo một chỗ kit còn thiếu: mở GitHub Issue ở repo của kit (nếu `gh` đã đăng nhập và có quyền), không thì ghi `kit-gaps/<tên>.md` để gửi |
 | `npx gemboss-website upgrade` | so bản đang dùng với bản mới nhất, in thay đổi, gap đã có trong kit, và lệnh nâng cấp |
 
@@ -141,7 +141,7 @@ gemboss-www; mọi thay đổi đi qua PR, giá trị của hệ thống chỉ s
 cd packages/website-ui
 node scripts/build.mjs        # sinh css/tokens.css từ system.json, ghép website.css và website.min.css, sinh js/website.js từ js/website.mjs
 node test/run.mjs             # tự kiểm CLI, CSS và website.js (DOM giả)
-node test/browser.mjs         # demo trong Chromium thật: bài viết (cuộn, Tab, mục lục, bảng) và form, sao, review (cần .ci của repo)
+node test/browser.mjs         # demo trong Chromium thật: bài viết (cuộn, Tab, mục lục, bảng), form, sao, review và footer (gập, Tab, nút sáng/tối) (cần .ci của repo)
 node scripts/gate-demo.mjs    # cổng thị giác và khoảng thở của gemboss.ai trên demo (cần .ci của repo)
 ```
 

package/bin/lib/check.mjs

@@ -144,6 +144,11 @@ export const RULES = {
     why: "The kit draws .gw-stars from style=\"--gw-stars: N\" (a number from 0 to 5), and a screen reader hears only its name: role=\"img\" and aria-label=\"N out of 5\". Without them the stars are empty or silent, and a label that names another number than the drawing says two things at once.",
     fix: "Write <span class=\"gw-stars\" role=\"img\" aria-label=\"4.9 out of 5\" style=\"--gw-stars: 4.9\"></span>: the same number in the style and in the label, from 0 to 5 (docs/components.md, Ratings).",
   },
+  "footer-markup": {
+    level: "error", title: "Footer fold or wordmark without its markup",
+    why: "A footer column folds on phones as a <details class=\"gw-footer__fold\"> whose <summary> holds the column's heading (<h2 class=\"gw-footer__heading\">): the summary is the row a reader taps, and a screen reader names the row by that heading. The wordmark (.gw-footer__wordmark) repeats the brand's name as decoration; without aria-hidden=\"true\" a screen reader reads the name a second time.",
+    fix: "Copy the markup from templates/footer.html: <details class=\"gw-footer__fold\"><summary><h2 class=\"gw-footer__heading\">Product</h2></summary><ul>…</ul></details>, and <div class=\"gw-footer__wordmark\" aria-hidden=\"true\">.",
+  },
   "uppercase-text": {
     level: "warning", title: "Uppercase text",
     why: "Headings, buttons, labels and menu items are sentence case.",
@@ -630,6 +635,18 @@ function analyzeHtml(file, text, out) {
       ].filter(Boolean);
       if (missing.length) add("stars-markup", where(`${m[0].replace(/\s+/g, " ").slice(0, 100)}  missing: ${missing.join(", ")}`));
     }
+    if (cls.includes("gw-footer__wordmark") && (a["aria-hidden"] || "").trim() !== "true") {
+      add("footer-markup", where(`${m[0].replace(/\s+/g, " ").slice(0, 80)}  missing: aria-hidden="true" (the wordmark is decoration)`));
+    }
+    if (cls.includes("gw-footer__fold")) {
+      const sum = /<summary\b[^>]*>([\s\S]*?)<\/summary\s*>/i.exec(inner());
+      const missing = [
+        tag !== "details" && `a <details> (the class is on <${tag}>)`,
+        !sum && "a <summary> as its first child",
+        sum && !/\bclass\s*=\s*["'][^"']*\bgw-footer__heading\b/i.test(sum[1]) && "the column's heading inside the <summary> (<h2 class=\"gw-footer__heading\">)",
+      ].filter(Boolean);
+      if (missing.length) add("footer-markup", where(`${m[0].replace(/\s+/g, " ").slice(0, 80)}  missing: ${missing.join(", ")}`));
+    }
     if (cls.includes("gw-rating-badge") || cls.includes("gw-testimonial")) {
       const linked = (tag === "a" && "href" in a) || /<a\b[^>]*\bhref\s*=/i.test(inner());
       if (!linked) add("rating-source", where(`${m[0].replace(/\s+/g, " ").slice(0, 80)} ${decode(visible.slice(m.index, elementEnd(scanText, m.index, tag))).replace(/\s+/g, " ").trim().slice(0, 60)}`));

package/css/base.css

@@ -91,6 +91,18 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 }
 .gw-skip:focus { left: 16px; }
 
+/* words for a screen reader only (0.7.0): " (opens in a new tab)" in a link with target="_blank" */
+.gw-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* scroll reveal: the script adds .is-in; the animation is a failsafe that shows it anyway after 2.5s */
 .gw-reveal {
   opacity: 0;

package/css/footer.css

@@ -54,3 +54,181 @@
 @media (max-width: 768px), (pointer: coarse) {
   .gw-footer__bottom a { min-height: var(--gw-tap-min); }
 }
+
+/* ---- 0.7.0: the footer as gemboss.ai has it (issue #71) ---------------------------------------------------------------
+   Every part below is optional, per site, and styles only its own markup: a 0.6.0 footer looks exactly as before.
+   In page order: the Ask AI row in the brand block, columns that fold on phones (gap #40), product-family rows, the
+   theme toggle in the bottom row, and the wordmark at the very end. Values measured on gemboss.ai on 25/10/2026 and
+   put on the kit's scales; the full markup is templates/footer.html. */
+
+/* Ask AI: a label and links that open an assistant with one neutral question already typed (a URL-encoded ?q=), so
+   the answer comes from what the web says, not from a claim the brand wrote. Words, not logos. 28px rows, 44px on
+   touch. */
+.gw-footer__ask { margin-top: 24px; }
+/* the row may run wider than the brand's sentence (four names on one line at 390px) */
+.gw-footer__brand:has(> .gw-footer__ask) { max-width: none; }
+.gw-footer__brand:has(> .gw-footer__ask) > :not(.gw-footer__ask) { max-width: 320px; }
+.gw-footer__ask > .gw-footer__ask-label { margin: 0; color: var(--gw-muted); font-size: 13px; }
+.gw-footer__ask > ul { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 4px 0 0; padding: 0; list-style: none; }
+.gw-footer__ask a { display: block; padding-block: 4px; color: var(--gw-ink); line-height: 20px; }
+.gw-footer__ask a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
+
+/* the mark after a link that leaves the site (↗, drawn), aria-hidden; the words "(opens in a new tab)" are a separate
+   .gw-visually-hidden span, only when the link has target="_blank" */
+.gw-footer__ext {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-left: 4px;
+  vertical-align: -1px;
+  background: var(--gw-muted);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 8.5l5-5M4.5 3.5h4v4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 8.5l5-5M4.5 3.5h4v4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
+}
+
+/* Folds: <details class="gw-footer__fold"> inside a .gw-footer__col (or a .gw-footer__family), its <summary> holding the
+   .gw-footer__heading, then the <ul>. Below 768px each is a 52px row with a chevron, folded unless the markup says
+   `open`; the browser opens and closes it, no script needed. From 768px it is the column as before: the summary is
+   only the heading (display: contents: no box, no Tab stop), and the list shows even while the <details> is closed
+   (::details-content; website.js also sets `open` there, for browsers without it). */
+.gw-footer__fold > summary { list-style: none; }
+.gw-footer__fold > summary::-webkit-details-marker { display: none; }
+.gw-footer__fold .gw-footer__heading { margin: 0; line-height: 20px; }
+.gw-footer__fold > ul { margin: 0; padding: 0; list-style: none; }
+.gw-footer__col > .gw-footer__fold a { line-height: 20px; }
+@media (min-width: 768px) {
+  .gw-footer__fold > summary { display: contents; }
+  .gw-footer__col > .gw-footer__fold .gw-footer__heading { margin-bottom: 12px; }
+}
+@media (min-width: 768px) {
+  .gw-footer__fold::details-content { content-visibility: visible; }
+}
+@media (max-width: 767px) {
+  .gw-footer__grid:has(> .gw-footer__col > .gw-footer__fold) { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
+  .gw-footer__grid:has(> .gw-footer__col > .gw-footer__fold) > .gw-footer__brand { padding-bottom: 24px; }
+  .gw-footer__col:has(> .gw-footer__fold),
+  .gw-footer__family { border-bottom: 1px solid var(--gw-line); }
+  .gw-footer__brand + .gw-footer__col:has(> .gw-footer__fold) { border-top: 1px solid var(--gw-line); }
+  .gw-footer__fold > summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    min-height: var(--gw-tap-min);
+    padding-block: 16px;
+    cursor: pointer;
+  }
+  .gw-footer__fold > summary::after {
+    content: "";
+    flex: none;
+    width: 16px;
+    height: 16px;
+    background: var(--gw-muted);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 5.5L8 11l5.5-5.5' 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 16 16'%3E%3Cpath d='M2.5 5.5L8 11l5.5-5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
+    transition: transform 0.18s var(--gw-ease);
+  }
+  .gw-footer__fold[open] > summary::after { transform: rotate(180deg); }
+  .gw-footer__fold > ul { padding-bottom: 12px; }
+  .gw-footer__col > .gw-footer__fold a { display: flex; align-items: center; min-height: var(--gw-tap-min); }
+}
+/* desktop: the brand's track is as wide as gemboss.ai draws it beside five columns (1.2 parts of 6.2, after five 24px
+   gaps), whatever the number of columns, so a family row can line up with it; the columns share the rest */
+@media (min-width: 1080px) {
+  .gw-footer__grid:has(> .gw-footer__col > .gw-footer__fold) { grid-template-columns: minmax(0, calc((100% - 120px) * 6 / 31)); }
+}
+
+/* Product family: a labelled row of products, name and one line each (<b> and <i>), as many rows as the brand needs
+   ("More from GemBoss", "From the same team, on the Shopify App Store"). A <nav aria-label> holding a fold whose
+   heading is the label. Two items a row on phones, four from 768px; from 1080px the label sits in the brand's track and
+   the items start where the first column starts. */
+.gw-footer__family .gw-footer__heading { color: var(--gw-muted); font-weight: 500; }
+.gw-footer__family .gw-footer__fold > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.gw-footer__family a {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  min-height: var(--gw-tap-min);
+  padding: 8px 12px 8px 0;
+  border-radius: var(--gw-radius-action);
+  color: var(--gw-ink);
+}
+.gw-footer__family a:hover { background: var(--gw-bg-soft); }
+.gw-footer__family b { font-size: 14px; font-weight: 600; line-height: 20px; }
+.gw-footer__family i { color: var(--gw-muted); font-size: 13px; font-style: normal; line-height: 18px; }
+@media (min-width: 768px) {
+  .gw-footer__family { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gw-line); }
+  .gw-footer__family .gw-footer__heading { margin-bottom: 12px; }
+  .gw-footer__family .gw-footer__fold > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; margin-left: -12px; }
+  .gw-footer__family a { min-height: 0; padding: 8px 12px; }
+  .gw-footer__family + .gw-footer__bottom { margin-top: 32px; }
+}
+@media (min-width: 1080px) {
+  .gw-footer__family { display: flow-root; }
+  .gw-footer__family .gw-footer__heading { float: left; width: calc((100% - 120px) * 6 / 31); margin: 8px 0 0; }
+  .gw-footer__family .gw-footer__fold > ul { margin-left: calc((100% - 120px) * 6 / 31 + 12px); }
+}
+
+/* The theme toggle in the bottom row (.gw-theme-toggle with data-gw-theme-toggle, wired like the header's): a 32px
+   square with one hairline, its hit area 40px, 44px on touch. It pushes itself and the social links to the right.
+   Below 768px the copyright and the toggle share the first line, legal and social links the second. */
+.gw-footer__toggle {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  margin-inline: auto 16px;
+  border: 1px solid var(--gw-line-strong);
+  background: var(--gw-surface);
+}
+.gw-footer__toggle::after { content: ""; position: absolute; inset: -5px; }
+.gw-footer__toggle svg { width: 18px; height: 18px; }
+@media (max-width: 768px), (pointer: coarse) {
+  .gw-footer__toggle { width: var(--gw-tap-min); height: var(--gw-tap-min); }
+}
+@media (max-width: 767px) {
+  .gw-footer__bottom:has(> .gw-footer__toggle) { column-gap: 16px; }
+  .gw-footer__bottom:has(> .gw-footer__toggle) > :first-child { flex: 1 1 calc(100% - var(--gw-tap-min) - 16px); }
+  .gw-footer__bottom > .gw-footer__toggle { order: 1; margin: 0; }
+  .gw-footer__bottom:has(> .gw-footer__toggle) > ul { order: 2; }
+  .gw-footer__family + .gw-footer__bottom,
+  .gw-footer__grid:has(> .gw-footer__col > .gw-footer__fold) + .gw-footer__bottom { margin-top: 24px; }
+}
+
+/* The wordmark: the brand's mark and name, large and faint, the footer's last line. Decoration (aria-hidden="true"):
+   the name is already in the brand block. Its size follows the viewport (--gw-display-wordmark) and it never makes the
+   page scroll sideways: a name too long for the line is cut. The mark is drawn in currentColor (an inline SVG); an
+   <img> mark keeps its own colours, so leave it out and keep the name. Not on phones, as on gemboss.ai. 24px more room
+   under it than gemboss.ai gives: the kit's footer is a painted band (white like the page), and the breathing gate
+   wants half the letters' size between them and its edge (67px under 123px letters at 1366px). */
+.gw-footer__wordmark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding-block: 48px 24px;
+  color: color-mix(in srgb, var(--gw-ink) 10%, transparent);
+  font-size: var(--gw-display-wordmark);
+  font-weight: 700;
+  letter-spacing: var(--gw-display-tracking);
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+}
+.gw-footer__wordmark > svg,
+.gw-footer__wordmark > img { flex: none; width: auto; height: 0.9em; }
+.gw-footer__wordmark > span { min-width: 0; overflow-x: clip; }
+@media (max-width: 767px) { .gw-footer__wordmark { gap: 16px; } }
+@media (max-width: 479px) { .gw-footer__wordmark { display: none; } }
+
+@media (max-width: 768px), (pointer: coarse) {
+  .gw-footer__ask a { display: flex; align-items: center; min-height: var(--gw-tap-min); padding-block: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .gw-footer__fold > summary::after { transition: none; }
+}
+/* a forced-colours screen drops backgrounds: draw the chevron and the ↗ in its text colour */
+@media (forced-colors: active) {
+  .gw-footer__ext,
+  .gw-footer__fold > summary::after { forced-color-adjust: none; background: CanvasText; }
+}

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;