@gemboss/website-ui 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -4,6 +4,56 @@ 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.10.0 (2026-10-26)
+
+The footer, 1:1 with gemboss.ai. 0.7.0 drew the footer "as gemboss.ai has it", but not to the pixel: when gemboss.ai
+moved onto the kit (site PR #76) its footer changed in about a dozen places (the gaps, the bottom row, the logo, the
+wordmark, the widths where the columns fold). Chris asked for it identical, with nothing missed, and for the values to
+live in the kit, so every site that uses it inherits them (26/10/2026). 0.10.0 takes every value from the site's own
+footer before #76 and was measured against it in Chromium: part by part (position, size, type, colour of every word)
+and pixel by pixel, at 14 widths from 320 to 1920px, light and dark, folded and open, every part hovered and focused
+from the keyboard, on every page of the site. All of it is pixel-identical but one thing, on purpose: at 320px
+gemboss.ai squeezed the chevron of its longest row to 7.3px, and the kit keeps it 8px.
+
+A minor version: a footer that already uses the kit changes to these values. Nothing to change in its markup.
+
+- Widths: the columns fold up to 620px and stand open from 621px (were 767 and 768), in the CSS and in `website.js`
+  (`matchMedia('(min-width: 621px)')`); the footer is one row from 1081px (was 1080px); two columns between (was three
+  from 768px). The wordmark shows from 621px (was 480px), its gap 16px up to 640px.
+- The footer: 64px above and 32px below (was 40px), no ground of its own (`background: transparent`, was `--gw-bg`), 32px
+  between columns (24px x 20px up to 620px).
+- The brand block: the mark 34px with 8px corners (`--gw-radius-8`), the row 34px tall, as wide as the block (44px on
+  touch); its sentence 30 characters a line at most, 22px lines (was 320px wide). The block keeps its width beside the
+  Ask AI row; the 0.7.0 rules that widened it are gone.
+- Headings: 12px over their links (was 8px), 1.6 line height, balanced, whatever the page's `h2` rule says (a site's
+  `h2` gave them its display face, and balance on some pages, not on others).
+- The face: the brand's name, the headings and the wordmark are set in `--gw-font` whatever the page's body says (a
+  page in Chinese puts PingFang first; gemboss.ai keeps Inter for these three). A brand sets its face with the token.
+- Links in a column: 44px rows up to 768px and on touch (gemboss.ai's), 20px lines.
+- The bottom row: 32px under the columns (was 48px), 12px x 24px between its parts, 16px between its links (8px x 16px on
+  touch); no 24px minimum size on a desktop link; a social link at least 44px wide on touch.
+- Folds up to 620px: each column's hairline on top, the last column's and each family row's below; a 52px row without
+  padding (was 44px padded to 52px); the chevron is two 2px borders, 8px, turned 45deg and 225deg open, at once (it
+  eased 0.18s); a focused row draws 2px of accent 2px out with 6px corners.
+- Family rows: four items a line from 621px, 44px items from 621 to 768px, the list pulled 12px left only from 1081px;
+  each item fills its cell.
+- `.gw-footer__ext` takes the glyph: `<span class="gw-footer__ext" aria-hidden="true">↗</span>`, set muted at weight
+  400, as gemboss.ai writes it. An empty one is still drawn (the 12px mask).
+- The Ask AI label has 22px lines; a hovered Ask AI link takes the browser's own underline (was 1px, 4px under).
+- The theme toggle: on hover its hairline turns ink and its icon the accent, its ground stays (colour only, 0.15s; was
+  the soft ground). Two icons: `.gw-theme-toggle__moon` shows in light, `.gw-theme-toggle__sun` in dark (a new section
+  at the end of `header.css`, for any `.gw-theme-toggle`); a toggle with one plain `<svg>` stays as it was.
+- The wordmark: weight 800 (added to `type.weights`, its one use), 48px above and nothing under but the footer's 32px
+  (was 24px), the mark 7vw wide (40 to 96px; was 0.9em tall). Its `<svg>` may carry `width` and `height` for its shape:
+  gemboss.ai's gem says `width="86" height="100"`.
+- Token: light `--gw-muted` is `#6a6d73` (was `#686b71`), gemboss.ai's: 5.18:1 on white, 4.67:1 on the soft ground
+  (were 5.34 and 4.81), both above 4.5:1.
+- `templates/footer.html` follows: the ↗ glyph, the two toggle icons, a 34px mark, the new widths in its notes.
+- Docs: `components.md` (Footer) and `markup-contract.md` (the folds' widths, the ↗, the toggle's icons, the
+  wordmark's mark).
+- Tests: `test/run.mjs` holds the base rules byte for byte again from this version (their hash, renewed once on purpose)
+  and pins the values above; the fold tests read 620/621px.
+
 ## 0.9.0 (2026-10-25)
 
 The spotlight, a named hover effect for the things you click (Chris, 25/10/2026, chosen over a heading that glows

package/README.md

@@ -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.9.0/website.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.10.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.9.0/js/website.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.10.0/js/website.js" defer></script>
 ```
 
 Chèn markup của kit sau khi trang đã tải (block của builder, bản xem trước CMS): gọi `gwWebsite.init(phầnMới)` ngay

package/css/footer.css

@@ -1,19 +1,23 @@
 /* footer: brand block, link columns, bottom row. One hairline on top, white like the page. */
 .gw-footer {
-  padding-block: 64px 40px;
+  padding-block: 64px 32px;
   border-top: 1px solid var(--gw-line);
-  background: var(--gw-bg);
+  background: transparent;
   color: var(--gw-ink);
   font-size: 14px;
 }
 .gw-footer__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 32px 24px;
-}
-.gw-footer__brand { grid-column: 1 / -1; max-width: 320px; }
-.gw-footer__brand p { margin-top: 16px; color: var(--gw-muted); }
-.gw-footer__heading { margin: 0 0 8px; color: var(--gw-ink); font-size: 13px; font-weight: 600; letter-spacing: 0; }
+  gap: 32px;
+}
+.gw-footer__brand p { max-width: 30ch; margin-top: 16px; color: var(--gw-muted); line-height: 22px; }
+.gw-footer__brand .gw-brand { display: flex; min-height: 34px; font-family: var(--gw-font); line-height: 1.6; }
+.gw-footer__brand .gw-brand__mark { width: 34px; height: 34px; border-radius: var(--gw-radius-8); }
+/* the brand's name, the column headings and the wordmark are set in the kit's face (--gw-font), whatever the page
+   does to its body or its h2 (a page in Chinese puts PingFang first; gemboss.ai keeps Inter for these three); a
+   heading is balanced, like gemboss.ai's main pages */
+.gw-footer__heading { margin: 0 0 12px; color: var(--gw-ink); font-family: var(--gw-font); font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1.6; text-wrap: balance; }
 /* an optional newsletter form in the brand block (0.6.0): label, the inline row (field and button), a note on what the
    reader agrees to; only when the form is wired to a list that keeps the address */
 .gw-footer__newsletter { margin-top: 24px; }
@@ -26,33 +30,35 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 8px 24px;
-  margin-top: 48px;
+  gap: 12px 24px;
+  margin-top: 32px;
   padding-top: 24px;
   border-top: 1px solid var(--gw-line);
   color: var(--gw-muted);
   font-size: 13px;
 }
 .gw-footer__bottom:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
-.gw-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0; padding: 0; list-style: none; }
+.gw-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
 .gw-footer__bottom a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 24px;
-  min-height: 24px;
   color: var(--gw-muted);
 }
 .gw-footer__bottom a:hover { color: var(--gw-ink); }
-@media (min-width: 768px) {
-  .gw-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+@media (max-width: 620px) {
+  .gw-footer__grid { gap: 24px 20px; }
+  .gw-footer__brand { grid-column: 1 / -1; }
 }
-@media (min-width: 1080px) {
-  .gw-footer__grid { grid-auto-flow: column; grid-template-columns: minmax(0, 1.6fr); grid-auto-columns: minmax(0, 1fr); }
-  .gw-footer__brand { grid-column: auto; }
+@media (min-width: 1081px) {
+  .gw-footer__grid { grid-auto-flow: column; grid-template-columns: minmax(0, 1.6fr); grid-auto-columns: minmax(0, 1fr); gap: 32px 24px; }
 }
 @media (max-width: 768px), (pointer: coarse) {
+  .gw-footer__brand .gw-brand { min-height: var(--gw-tap-min); }
+  .gw-footer__col a { display: flex; align-items: center; min-height: var(--gw-tap-min); padding-block: 0; }
   .gw-footer__bottom a { min-height: var(--gw-tap-min); }
+  .gw-footer__bottom ul:last-child a { min-width: var(--gw-tap-min); }
+  .gw-footer__bottom ul:not(:last-child) { gap: 8px 16px; }
 }
 
 /* ---- 0.7.0: the footer as gemboss.ai has it (issue #71) ---------------------------------------------------------------
@@ -66,16 +72,14 @@
    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 > .gw-footer__ask-label { margin: 0; color: var(--gw-muted); font-size: 13px; line-height: 22px; }
 .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; }
+.gw-footer__ask a:hover { text-decoration: underline; }
 
 /* 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 {
+.gw-footer__ext:empty {
   display: inline-block;
   width: 12px;
   height: 12px;
@@ -85,6 +89,7 @@
   -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;
 }
+.gw-footer__ext:not(:empty) { color: var(--gw-muted); font-weight: 400; }
 
 /* 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
@@ -93,48 +98,52 @@
    (::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 .gw-footer__heading { margin: 0; }
 .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) {
+@media (min-width: 621px) {
   .gw-footer__fold > summary { display: contents; }
   .gw-footer__col > .gw-footer__fold .gw-footer__heading { margin-bottom: 12px; }
 }
-@media (min-width: 768px) {
+@media (min-width: 621px) {
   .gw-footer__fold::details-content { content-visibility: visible; }
 }
-@media (max-width: 767px) {
+@media (max-width: 620px) {
   .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),
+  /* a column's hairline on top, the last column's below too, a family row's below (gemboss.ai's order: a focused
+     row's ring passes under the next row's line) */
+  .gw-footer__col:has(> .gw-footer__fold) { border-top: 1px solid var(--gw-line); }
+  .gw-footer__col:has(> .gw-footer__fold):last-child,
   .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;
+    min-height: 52px;
+    padding: 0;
     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);
+    width: 8px;
+    height: 8px;
+    margin-right: 4px;
+    border-right: 2px solid var(--gw-muted);
+    border-bottom: 2px solid var(--gw-muted);
+    rotate: 45deg;
+    translate: 0 -2px;
   }
-  .gw-footer__fold[open] > summary::after { transform: rotate(180deg); }
+  .gw-footer__fold[open] > summary::after { rotate: 225deg; translate: 0 2px; }
+  .gw-footer__fold > summary:focus-visible { outline: 2px solid var(--gw-accent); outline-offset: 2px; border-radius: var(--gw-radius-6); }
   .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) {
+@media (min-width: 1081px) {
   .gw-footer__grid:has(> .gw-footer__col > .gw-footer__fold) { grid-template-columns: minmax(0, calc((100% - 120px) * 6 / 31)); }
 }
 
@@ -144,6 +153,8 @@
    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 .gw-footer__fold > ul > li { display: flex; }
+.gw-footer__family .gw-footer__fold > ul > li > a { flex: 1 1 auto; }
 .gw-footer__family a {
   display: flex;
   flex-direction: column;
@@ -157,14 +168,18 @@
 .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) {
+@media (min-width: 621px) {
   .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 .gw-footer__fold > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; }
   .gw-footer__family a { min-height: 0; padding: 8px 12px; }
   .gw-footer__family + .gw-footer__bottom { margin-top: 32px; }
 }
-@media (min-width: 1080px) {
+@media (min-width: 621px) and (max-width: 768px) {
+  .gw-footer__family a { min-height: var(--gw-tap-min); }
+}
+@media (min-width: 1081px) {
+  .gw-footer__family .gw-footer__fold > ul { margin-left: -12px; }
   .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); }
@@ -172,7 +187,7 @@
 
 /* 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. */
+   Up to 620px the copyright and the toggle share the first line, legal and social links the second. */
 .gw-footer__toggle {
   position: relative;
   width: 32px;
@@ -183,12 +198,15 @@
 }
 .gw-footer__toggle::after { content: ""; position: absolute; inset: -5px; }
 .gw-footer__toggle svg { width: 18px; height: 18px; }
+/* on hover the hairline turns ink and the icon the accent, the ground stays (gemboss.ai's); colour only, 0.15s */
+.gw-footer__toggle { transition: border-color 0.15s, color 0.15s; }
+.gw-footer__toggle:hover { border-color: var(--gw-ink); background: var(--gw-surface); color: var(--gw-accent); }
 @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); }
+@media (max-width: 620px) {
+  .gw-footer__bottom:has(> .gw-footer__toggle) { gap: 8px 16px; }
+  .gw-footer__bottom:has(> .gw-footer__toggle) > :first-child { flex: 1 1 calc(100% - 64px); }
   .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,
@@ -198,37 +216,35 @@
 /* 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). */
+   <img> mark keeps its own colours, so leave it out and keep the name. Values are gemboss.ai's, 1:1 (Chris 26/10/2026):
+   weight 800, 48px above, nothing below but the footer's own 32px, the mark 7vw wide (40–96px), hidden up to 620px.
+   The footer is not painted (transparent on the page), so the breathing gate reads it as part of the page. */
 .gw-footer__wordmark {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 24px;
-  padding-block: 48px 24px;
+  padding-block: 48px 0;
   color: color-mix(in srgb, var(--gw-ink) 10%, transparent);
+  font-family: var(--gw-font);
   font-size: var(--gw-display-wordmark);
-  font-weight: 700;
+  font-weight: 800;
   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 > img { flex: none; width: clamp(40px, 7vw, 96px); height: auto; }
 .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: 640px) { .gw-footer__wordmark { gap: 16px; } }
+@media (max-width: 620px) { .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; }
+  .gw-footer__ext:empty { forced-color-adjust: none; background: CanvasText; }
+  .gw-footer__fold > summary::after { border-color: CanvasText; }
 }

package/css/header.css

@@ -437,3 +437,15 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
 @media (min-width: 1080px) {
   .gw-header__actions > .gw-lang { display: block; }
 }
+
+/* ---- 0.10.0: the theme toggle's two icons ---------------------------------------------------------------------------
+   A toggle may hold two icons: .gw-theme-toggle__moon, shown in light, and .gw-theme-toggle__sun, shown in dark, as
+   gemboss.ai draws them. The theme in force picks one: data-theme on <html>, else the system's. A toggle with one plain
+   <svg> stays as it is. */
+.gw-theme-toggle__sun { display: none; }
+:root[data-theme="dark"] .gw-theme-toggle__sun { display: block; }
+:root[data-theme="dark"] .gw-theme-toggle__moon { display: none; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .gw-theme-toggle__sun { display: block; }
+  :root:not([data-theme="light"]) .gw-theme-toggle__moon { display: none; }
+}

package/css/tokens.css

@@ -94,7 +94,7 @@
   --gw-surface: #ffffff;
   --gw-ink: #1b1c1e;
   --gw-ink-2: #3b3d42;
-  --gw-muted: #686b71;
+  --gw-muted: #6a6d73;
   --gw-line: #e5e7ea;
   --gw-line-strong: #d5d8dd;
   --gw-line-control: #85888e;
@@ -186,7 +186,7 @@
   --gw-surface: #ffffff;
   --gw-ink: #1b1c1e;
   --gw-ink-2: #3b3d42;
-  --gw-muted: #686b71;
+  --gw-muted: #6a6d73;
   --gw-line: #e5e7ea;
   --gw-line-strong: #d5d8dd;
   --gw-line-control: #85888e;

package/demo/footer.html

@@ -312,7 +312,7 @@
           <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:gemboss"><svg width="86" height="100" viewBox="0 0 100 116"><polygon points="26,14 74,14 66,50 34,50" fill="currentColor"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="6" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="3.8" stroke-linejoin="round"/></svg><span>GemBoss</span></div>
       <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>

package/docs/components.md

@@ -415,19 +415,24 @@ The footer of gemboss.ai (0.7.0): one per site, the same on every page, from `te
 its rows (its columns, its family, its words) and deletes the optional parts it does not use; it never adds a footer
 part of its own. See it in `demo/footer.html`, with a switch to the same footer for a GemPages-style brand.
 
+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
+by part and pixel by pixel, at 14 widths from 320 to 1920px, light and dark, folded and open, hovered and focused from
+the keyboard. Its widths are the site's: folds up to 620px, columns open from 621px, one row from 1081px. A brand
+changes what it fills in and the tokens (colours, the radius profile), never these values.
+
 | class | for |
 |---|---|
-| `.gw-footer` | the footer: one hairline on top, white like the page |
-| `.gw-footer__grid` | brand block and link columns: 2 columns on phones, 3 from 768px, one row from 1080px. With folding columns (0.7.0): one track of rows below 768px, and from 1080px the brand's track as on gemboss.ai (193.5px beside 1120px), the columns sharing the rest: three to six |
-| `.gw-footer__brand` | the brand and one sentence, full width on phones |
-| `.gw-footer__col`, `__heading` | a `<nav>` column: a sentence-case heading and a `<ul>` of links |
-| `.gw-footer__fold` | 0.7.0: the column's `<details>`, its `<summary>` holding the `__heading`. Below 768px a 52px row with a chevron, folded until tapped (44px links); from 768px the open column, the summary only its heading (no box, no Tab stop). Works without the script |
+| `.gw-footer` | the footer: one hairline on top, on the page's own ground (transparent), 64px above and 32px below |
+| `.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 |
+| `.gw-footer__brand` | the brand (a 34px mark) and one sentence of 30 characters a line at most |
+| `.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` |
+| `.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 |
 | `.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 |
-| `.gw-footer__family` | 0.7.0, optional, after the grid: a `<nav>` row of products, a fold whose heading is its label, a list of `<a><b>Name</b> <i>One line</i></a>`; two a line on phones, four from 768px, from 1080px the label beside the items. Repeat it for a second family |
-| `.gw-footer__ext` | 0.7.0: the drawn ↗ after a link that leaves the site, `aria-hidden="true"` |
+| `.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 |
+| `.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 |
 | `.gw-footer__bottom` | copyright, legal links, social links; alone (no grid above), it drops its top rule |
-| `.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 |
-| `.gw-footer__wordmark` | 0.7.0, optional, last: the brand's mark (inline SVG in `currentColor`) and name, ink at 10%, `--gw-display-wordmark`; `aria-hidden="true"`; not on phones |
+| `.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 |
+| `.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 |
 | `.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 |
 | `.gw-visually-hidden` | 0.7.0, anywhere: words for a screen reader only, " (opens in a new tab)" in a link with `target="_blank"` |
 

package/docs/markup-contract.md

@@ -44,7 +44,7 @@ the spotlight (0.9.0). It comes in two entries built from one source
   to the page (Escape, the outside click, the busy-button guard, the system theme, the scroll) are installed once.
 - **`destroy(root = document)`** takes back what `init` wired under `root`: its listeners and its marks. An open
   mega menu or mobile menu is closed first, so an unmounted menu cannot leave the page locked.
-- **`version`**: `'0.9.0'`. The classic script exposes the three as `window.gwWebsite`.
+- **`version`**: `'0.10.0'`. The classic script exposes the three as `window.gwWebsite`.
 - **`data-gw-ready`**: on each wired element, the parts wired on it (`mega`, `menu`, `lang`, `theme`, `reveal`,
   `header`, `segmented`, `toc`, `table`, `fold`, `spot`). A drill-down menu is wired with its toggle (`menu`). It is a mark for people and tests, not a switch: markup copied from a live page, attribute and all,
   is still wired.
@@ -282,26 +282,31 @@ top-level links and the actions are children of the sheet's `<nav>`.
       <details class="gw-footer__fold">
         <summary><h2 class="gw-footer__heading">More from Brand</h2></summary>
         <ul><li><a href="…"><b>Name<span class="gw-footer__ext" aria-hidden="true"></span>?</b> <i>One line</i></a></li> …</ul>
+        <!-- the ↗: empty, the kit draws it (a 12px mask); or the glyph itself, <span class="gw-footer__ext" aria-hidden="true">↗</span>,
+             set in the muted colour at weight 400, as gemboss.ai writes it (0.10.0) -->
       </details>
     </nav>
     <div class="gw-footer__bottom">
       <span>© …</span><ul aria-label="Legal">…</ul>
       <button class="gw-theme-toggle gw-footer__toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme">svg</button>   <!-- optional -->
+      <!-- or two icons (0.10.0), the one for the theme in force shown: <svg class="gw-theme-toggle__moon" …>…</svg><svg class="gw-theme-toggle__sun" …>…</svg> -->
       <ul aria-label="Social">…</ul>
     </div>
     <div class="gw-footer__wordmark" aria-hidden="true"><svg viewBox="…">…currentColor…</svg><span>Brand</span></div>   <!-- optional -->
+    <!-- the mark is 7vw wide (40-96px), its height from its width and height attributes when it has them, else from
+         its viewBox: gemboss.ai's gem says width="86" height="100" -->
   </div>
 </footer>
 ```
 
 - **Folds** (`.gw-footer__fold`, a `<details>` whose `<summary>` holds the `.gw-footer__heading`): the CSS folds them
-  below 768px (52px rows, the browser opens and closes them) and draws the open column from 768px, where the summary
+  up to 620px (52px rows, the browser opens and closes them) and draws the open column from 621px, where the summary
   is `display: contents` and the list shows even while the `<details>` is closed (`::details-content`). The script,
   for each fold with a summary:
-  - from 768px (`matchMedia('(min-width: 768px)')`) sets `open`, puts `tabindex="-1"` on the summary and cancels a
+  - from 621px (`matchMedia('(min-width: 621px)')`) sets `open`, puts `tabindex="-1"` on the summary and cancels a
     click on it (`preventDefault`), so a heading never folds its column away, in a browser without
     `::details-content` too;
-  - below 768px gives back the markup's state: `open` as the markup had it (folded unless it said `open`), the
+  - up to 620px gives back the markup's state: `open` as the markup had it (folded unless it said `open`), the
     summary's own `tabindex` (none, usually); again on every change of width;
   - `destroy`: the markup's state, its listener and the `fold` mark go. No event.
 - **Theme toggle**: a `[data-gw-theme-toggle]` in the bottom row is wired like the header's (above); with both on the

package/js/website.js

@@ -1,9 +1,9 @@
-/*! @gemboss/website-ui 0.9.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
+/*! @gemboss/website-ui 0.10.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
 (function () {
 'use strict';
 if (window.gwWebsite) return;
 
-var version = '0.9.0';
+var version = '0.10.0';
 var api = { version: version, init: init, destroy: destroy };
 var doc, root, mine, fine, sys, wide, mid, live = [], megaOpen = null, megaTimer = 0, queued = false;
 var still, lights;
@@ -428,7 +428,7 @@ function install() {
   fine = mq('(hover: hover) and (pointer: fine)'); sys = mq('(prefers-color-scheme: dark)');
   var stored = null;
   wide = mq('(min-width: 1080px)');
-  mid = mq('(min-width: 768px)');
+  mid = mq('(min-width: 621px)');
   on(doc, 'click', function (e) { if (megaOpen && !inside(megaOpen, e.target)) hideMega(); });
   on(doc, 'keydown', function (e) { if (megaOpen && esc(e)) hideMega(inside(megaOpen, doc.activeElement) || megaOpen.mode === 'click'); });
   on(doc, 'keydown', function (e) { if (esc(e)) closeMenus(true); });

package/js/website.mjs

@@ -6,7 +6,7 @@
 // the export line and the // comments, plus auto-init): edit this file, then run the build. Keep comments on lines of
 // their own, so the build can leave them out.
 
-var version = '0.9.0';
+var version = '0.10.0';
 var api = { version: version, init: init, destroy: destroy };
 // Page state. Set up by the first init(), never at import: a server can import this file.
 var doc, root, mine, fine, sys, wide, mid, live = [], megaOpen = null, megaTimer = 0, queued = false;
@@ -425,11 +425,11 @@ function tables(ctx) {
   });
 }
 
-// Footer folds (0.7.0, gap #40): each <details class="gw-footer__fold"> (a column, a family row). Below 768px it keeps
-// the markup's own state (folded unless the markup says open) and the browser opens and closes it. From 768px it is a
+// Footer folds (0.7.0, gap #40): each <details class="gw-footer__fold"> (a column, a family row). Up to 620px it keeps
+// the markup's own state (folded unless the markup says open) and the browser opens and closes it. From 621px it is a
 // plain column: the script sets `open`, takes the <summary> out of the Tab order (tabindex="-1") and ignores a click on
 // it, so the heading cannot fold the list away. Again on every change of width; destroy gives back the markup's state.
-// The CSS shows the list from 768px without the script too (::details-content), so this is for state and for browsers
+// The CSS shows the list from 621px without the script too (::details-content), so this is for state and for browsers
 // without that.
 function folds(ctx) {
   each(ctx, '.gw-footer__fold', 'fold', function (d, on) {
@@ -510,8 +510,8 @@ function install() {
   var stored = null;
   // 1080px, the kit's desktop width: the header shows its nav, the contents sit beside the article
   wide = mq('(min-width: 1080px)');
-  // 768px: the footer's columns stand open from here, and fold below it
-  mid = mq('(min-width: 768px)');
+  // 621px: the footer's columns stand open from here, and fold up to 620px, as on gemboss.ai (1:1, 26/10/2026)
+  mid = mq('(min-width: 621px)');
   on(doc, 'click', function (e) { if (megaOpen && !inside(megaOpen, e.target)) hideMega(); });
   on(doc, 'keydown', function (e) { if (megaOpen && esc(e)) hideMega(inside(megaOpen, doc.activeElement) || megaOpen.mode === 'click'); });
   on(doc, 'keydown', function (e) { if (esc(e)) closeMenus(true); });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/website-ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "The GemBoss website kit: tokens, header, footer, sections and the rules (AGENTS.md) that GemCommerce public websites share, plus a CLI that checks a site, reports kit gaps and upgrades.",
   "license": "UNLICENSED",
   "type": "module",

package/system.json

@@ -8,7 +8,7 @@
       "surface": "#ffffff",
       "ink": "#1b1c1e",
       "ink-2": "#3b3d42",
-      "muted": "#686b71",
+      "muted": "#6a6d73",
       "line": "#e5e7ea",
       "line-strong": "#d5d8dd",
       "line-control": "#85888e",
@@ -89,14 +89,14 @@
   "type": {
     "family": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
     "mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-    "weights": [400, 500, 600, 650, 700],
+    "weights": [400, 500, 600, 650, 700, 800],
     "scale": [11, 12, 13, 14, 16, 18, 20, 22, 24, 30],
     "display_above": 30,
     "display": {
       "h1": "clamp(40px, 4.6vw, 68px)",
       "h2": "clamp(32px, 3.4vw, 52px)",
       "wordmark": "clamp(40px, 9vw, 128px)",
-      "$comment": "wordmark (0.7.0): the footer's last line on gemboss.ai, the brand's name, faint, at the end of the page. Decoration only, never a heading.",
+      "$comment": "wordmark (0.7.0): the footer's last line on gemboss.ai, the brand's name, faint, at the end of the page. Decoration only, never a heading. Weight 800 (0.10.0, as gemboss.ai draws it): the one use of 800 in the kit.",
       "weight": 600,
       "tracking": "-0.03em"
     },