@gemboss/website-ui 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -4,6 +4,46 @@ 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.12.0 (2026-10-26)
+
+The grammar of every page, 1:1 with gemboss.ai: the announcement bar, the skip link, the button, the type (headings,
+lead, label, the dim first sentence), a section, its head, the wrap, and the scroll reveal. After the footer (0.10.0)
+and the header (0.11.0), this is the first step of the pages' own bodies onto the kit (Chris, 26/10/2026: every value in
+the kit, so that GemPages, Gemians and GemX inherit them). gemboss.ai's 83 pages now draw these parts with the kit's
+classes, and were measured against the pages before, in Chromium: the computed style of every one of these parts (2,300
+of them) at 320, 390, 768, 1080, 1366 and 1920px, light and dark, and every page pixel by pixel at 390 and 1366px; the
+reveal's delays and counts, a hovered button, the focused skip link.
+
+A minor version: a site on 0.11.0 sees these values change (below), none of the markup.
+
+- The announcement bar (`.gw-announce`): gemboss.ai's, on its own ground in both themes, from the new tokens
+  `--gw-announce-*` (`system.json` `color.announce`: ground, words, hairline, the pill, the link and its underline). A
+  small pill may lead the sentence (`.gw-announce__tag`, new); the link's underline is a hairline that brightens on
+  hover. 12px words in a slimmer bar up to 520px.
+- The skip link (`.gw-skip`): an accent tab out of the top left corner (was an ink button 8px in).
+- The button (`.gw-btn`): on hover the filled one rises 1px onto the rest shadow (was a darker fill); a framed or
+  frameless one does not move. Its face is the new `--gw-font-action` (`type.button.family`, the brand face alone, as
+  gemboss.ai names it: a glyph Inter's web subset lacks, the arrow, is then the system's own, the width gemboss.ai's
+  buttons have). Its line height is its surroundings'. A label wider than needed stays at the start (centred only in
+  `--block`, a phone's row of actions in a hero or CTA, an inline form). An arrow after the label is
+  `.gw-btn__arrow` (new): 3px further on hover. Up to 768px every button is at least 44px tall, by the width only (it was
+  also by a coarse pointer); a label wraps only up to 480px and only in `<main>`, at 1.35 lines (was up to 768px,
+  balanced).
+- Type: h1 at line height 1.1 and h2 at 1.06 (new tokens `--gw-display-h1-leading`, `--gw-display-h2-leading`; at 1.02
+  the descenders of a first line touched the capitals of the second). h3 and `.gw-h3` 20px / 600, tracking −0.02em,
+  1.2 lines, as every h3 on gemboss.ai (was 24px / 650). The lead at most 58ch (was 60ch). The label's square is ink
+  with 2px corners (was the accent, square) and its line height its surroundings'; the input `--gw-label-mark` (new, on
+  the label or anything around it) paints the square another colour, a gradient too.
+- A section's head (`.gw-section__head`) up to 760px (was 660px). A lead under a heading 20px below it (in a head, a
+  split column, a CTA; 16px in the hero). What follows a head starts 40px below it, 48px from 768px, as a top margin
+  of the next thing at no specificity, so a block that brings its own keeps it (was the head's bottom margin).
+- The scroll reveal: 20px (new token `--gw-reveal-distance`, was 24px), once 12% of it is in view with the bottom 6% of
+  the view not counting (was 15%); each `.gw-reveal` after the first among its siblings waits 70ms more, at most 380ms;
+  a `[data-gw-count]` number inside counts up from 0 over 1.1s (new); the script's failsafe at 1.6s (was 2.5s). The
+  values are `system.json` `motion.reveal`.
+- `check`: `--gw-label-mark` is an input, like a mega panel's widths.
+- `website.js` is 10.4 KB gzipped (the budget is 10.5 KB, was 10 KB: the reveal's stagger and count-up).
+
 ## 0.11.0 (2026-10-26)
 
 The header, 1:1 with gemboss.ai. Since the footer (0.10.0), the header was the last part of gemboss.ai not drawn by

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.11.0/website.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.12.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.11.0/js/website.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.12.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/bin/lib/check.mjs

@@ -336,8 +336,9 @@ const ATTR_THEME = String.raw`\[\s*data-theme(?:\s*[~|^$*]?=\s*(?:"[^"]*"|'[^']*
 const ROOTISH = new RegExp(`^(?::root|html)?(?:${ATTR_THEME}|:not\\(\\s*${ATTR_THEME}\\s*\\))*$`, "i");
 const isRootish = (sel) => splitTop(sel).every((s) => s && ROOTISH.test(s));
 // set on one element in the markup, read by the kit's CSS: the stars' value (style="--gw-stars: 4.9"); a mega panel's width,
-// its pictures' width and its columns (0.11.0: style="--gw-mega-w: 1120px; --gw-mega-pv: 380px; --gw-mega-cols: 2")
-const INPUTS = new Set(["--gw-stars", "--gw-mega-w", "--gw-mega-pv", "--gw-mega-cols"]);
+// its pictures' width and its columns (0.11.0: style="--gw-mega-w: 1120px; --gw-mega-pv: 380px; --gw-mega-cols: 2"); the colour of
+// a label's square (0.12.0: --gw-label-mark, on the label or around it)
+const INPUTS = new Set(["--gw-stars", "--gw-mega-w", "--gw-mega-pv", "--gw-mega-cols", "--gw-label-mark"]);
 const THEMABLE = /^--gw-(?:accent(?:-[\w-]+)?|on-accent(?:-(?:light|dark))?|wash(?:-[\w-]+)?)$/; // docs/theming.md: the eight accent variables (-light/-dark) + wash
 
 const COLOR_PROPS = /^(?:color|background(?:-color|-image)?|border(?:-(?:top|right|bottom|left|block|inline)(?:-(?:start|end))?)?(?:-color)?|outline(?:-color)?|fill|stroke|text-decoration(?:-color)?|caret-color|accent-color|column-rule(?:-color)?|text-emphasis(?:-color)?|-webkit-text-fill-color|-webkit-text-stroke(?:-color)?|scrollbar-color|stop-color|flood-color|lighting-color)$/;

package/css/base.css

@@ -32,33 +32,34 @@ h1, h2, h3, h4, h5, h6, .gw-h1, .gw-h2, .gw-h3, .gw-h4 {
   text-wrap: balance;
 }
 h1, .gw-h1, h2, .gw-h2 { font-weight: var(--gw-display-weight); letter-spacing: var(--gw-display-tracking); }
-h1, .gw-h1 { font-size: var(--gw-display-h1); }
-h2, .gw-h2 { font-size: var(--gw-display-h2); }
-h3, .gw-h3 { font-size: 24px; }
+h1, .gw-h1 { font-size: var(--gw-display-h1); line-height: var(--gw-display-h1-leading); }
+h2, .gw-h2 { font-size: var(--gw-display-h2); line-height: var(--gw-display-h2-leading); }
+/* h3 (0.12.0): 20px/600, as every h3 on gemboss.ai */
+h3, .gw-h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
 h4, .gw-h4 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
 h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 
-.gw-lead { font-size: 18px; line-height: 1.55; color: var(--gw-muted); max-width: 60ch; }
+.gw-lead { font-size: 18px; line-height: 1.55; color: var(--gw-muted); max-width: 58ch; }
 .gw-note { font-size: 14px; color: var(--gw-muted); }
 .gw-dim { color: var(--gw-muted); }
 
-/* the label above a heading: sentence case, muted, led by the 8px accent square */
+/* the label above a heading: sentence case, muted, led by the 8px square, ink by default (0.12.0, as gemboss.ai). The
+   input --gw-label-mark paints the square another colour (a product's own, say): set it on the label or on anything
+   around it, e.g. style="--gw-label-mark: var(--gw-accent)". */
 .gw-label {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   font-weight: 500;
-  line-height: 1.4;
   color: var(--gw-muted);
 }
 .gw-label::before {
   content: "";
-  flex: none;
   width: 8px;
   height: 8px;
-  border-radius: var(--gw-radius-0);
-  background: var(--gw-accent);
+  border-radius: var(--gw-radius-2);
+  background: var(--gw-label-mark, var(--gw-ink));
 }
 
 /* links inside running text (and anywhere in .gw-prose) get a visible link style; everything else opts in with .gw-link */
@@ -78,19 +79,22 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 :focus-visible { border-radius: var(--gw-radius-4); outline: 2px solid var(--gw-accent); outline-offset: 3px; }
 [id] { scroll-margin-top: calc(var(--gw-header-height) + 16px); }
 
+/* the skip link (0.12.0, gemboss.ai's): the accent tab in the top left corner, shown while it has the focus */
 .gw-skip {
   position: absolute;
   left: -9999px;
-  top: 8px;
-  z-index: 100;
-  padding: 12px 16px;
-  border-radius: var(--gw-radius-action);
-  background: var(--gw-action);
-  color: var(--gw-on-action);
+  top: 0;
+  z-index: 200;
+  padding: 12px 20px;
+  border-radius: 0 0 var(--gw-radius-card) 0;
+  background: var(--gw-accent);
+  color: var(--gw-on-accent);
+  box-shadow: var(--gw-shadow);
   font-size: 14px;
   font-weight: 600;
 }
-.gw-skip:focus { left: 16px; }
+/* its corner again with the focus: a page's own :focus-visible corners, loaded after the kit, must not round the tab */
+.gw-skip:focus { left: 0; border-radius: 0 0 var(--gw-radius-card) 0; }
 
 /* words for a screen reader only (0.7.0): " (opens in a new tab)" in a link with target="_blank" */
 .gw-visually-hidden {
@@ -104,10 +108,11 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
   border: 0;
 }
 
-/* scroll reveal: the script adds .is-in; the animation is a failsafe that shows it anyway after 2.5s */
+/* scroll reveal: the script adds .is-in (system.json motion.reveal: when, the stagger, the failsafe); the animation is
+   a second failsafe, for a page whose script never ran, that shows it anyway after 2.5s */
 .gw-reveal {
   opacity: 0;
-  transform: translateY(24px);
+  transform: translateY(var(--gw-reveal-distance));
   transition: opacity var(--gw-reveal-ms) var(--gw-ease), transform var(--gw-reveal-ms) var(--gw-ease);
   animation: gw-reveal-failsafe 1ms linear 2.5s forwards;
 }

package/css/components.css

@@ -2,12 +2,12 @@
 
 /* actions are rectangles: 40px, the action radius of the site's profile (8, 12 in soft), 14px/600, sentence case.
    The fill is the action colour: ink, or the brand's accent under data-gw-action="accent" (tokens.css). Never a
-   gradient, a wash hue or a shadow. */
+   gradient or a wash hue. On hover (0.12.0, as gemboss.ai) the filled button rises 1px onto the rest shadow; the framed
+   and frameless ones only change their frame or tint. Phones: see "touch" below. */
 .gw-btn {
   position: relative;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   gap: 8px;
   max-width: 100%;
   height: var(--gw-button-height);
@@ -16,26 +16,34 @@
   border-radius: var(--gw-radius-action);
   background: var(--gw-action);
   color: var(--gw-on-action);
+  font-family: var(--gw-font-action);
   font-size: 14px;
   font-weight: 600;
-  line-height: 1.4;
   letter-spacing: 0;
   text-align: center;
   white-space: nowrap;
   cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
 }
-.gw-btn:hover { background: var(--gw-action-hover); }
+.gw-btn:hover { transform: translateY(-1px); box-shadow: var(--gw-shadow); }
 .gw-btn svg { flex: none; width: 16px; height: 16px; }
 .gw-btn--secondary { background: transparent; border-color: var(--gw-line-strong); color: var(--gw-ink); }
 .gw-btn--secondary:hover { background: transparent; border-color: var(--gw-ink); }
 .gw-btn--ghost { background: transparent; color: var(--gw-ink); }
 .gw-btn--ghost:hover { background: var(--gw-bg-soft); }
+.gw-btn:is(.gw-btn--secondary, .gw-btn--ghost):hover { transform: none; box-shadow: none; }
+/* an arrow after the label (→), nudged 3px on hover */
+.gw-btn__arrow { letter-spacing: 0; transition: transform 0.18s ease; }
+.gw-btn:hover .gw-btn__arrow { transform: translateX(3px); }
+
 .gw-btn--on-night { background: var(--gw-on-night); color: var(--gw-night); }
 .gw-btn--on-night:hover { background: var(--gw-on-night); opacity: 0.88; }
 .gw-btn--sm { height: 36px; padding: 0 16px; }
 .gw-btn--sm::after { content: ""; position: absolute; top: -6px; right: 0; bottom: -6px; left: 0; }
 .gw-btn--lg { height: 48px; padding: 0 24px; font-size: 16px; }
-.gw-btn--block { display: flex; width: 100%; }
+/* a button wider than its label keeps the label at its start (as gemboss.ai), unless it is made wide on purpose: full
+   width (--block), a phone's row of actions, an inline form */
+.gw-btn--block { display: flex; width: 100%; justify-content: center; }
 .gw-btn:disabled, .gw-btn[aria-disabled="true"] { opacity: 0.48; cursor: not-allowed; pointer-events: none; }
 /* pressed: the ink one step darker (the hover ink, as the dashboard's primary), nothing moves; the frameless variants
    take one more step of tint */
@@ -334,16 +342,21 @@
 .gw-faq__item[open] > summary::after { transform: rotate(45deg); }
 .gw-faq__item > :not(summary) { margin: 0 0 20px; max-width: 68ch; color: var(--gw-muted); font-size: 16px; }
 
-/* touch: every control is at least 44px tall, labels may wrap */
-@media (max-width: 768px), (pointer: coarse) {
+/* touch: every control is at least 44px tall. A button up to 768px (0.12.0, as gemboss.ai: by the width, not the
+   pointer), its label wrapping (and tighter) from 480px down in the page's <main>, so a long one never pushes the page
+   sideways (a header or an overlay outside <main> keeps its one line) */
+@media (max-width: 768px) {
   .gw-btn, .gw-btn--sm, .gw-btn--lg {
     height: auto;
     min-height: var(--gw-tap-min);
     padding-block: 8px;
-    white-space: normal;
-    text-wrap: balance;
   }
   .gw-btn--lg { min-height: 48px; }
+}
+@media (max-width: 480px) {
+  :where(main) .gw-btn { white-space: normal; line-height: 1.35; }
+}
+@media (max-width: 768px), (pointer: coarse) {
   :is(a, button, label).gw-chip { min-height: var(--gw-tap-min); }
   .gw-segmented > button { height: auto; min-height: var(--gw-tap-min); padding-block: 8px; white-space: normal; text-wrap: balance; }
 }

package/css/forms.css

@@ -134,7 +134,7 @@
    room; below 480px, and in a box too narrow for both, the field and the button each take a full line. */
 .gw-form-inline { display: flex; flex-wrap: wrap; gap: 8px; }
 .gw-form-inline > :not(.gw-btn) { flex: 999 1 160px; min-width: 0; }
-.gw-form-inline > .gw-btn { flex: 1 0 auto; }
+.gw-form-inline > .gw-btn { flex: 1 0 auto; justify-content: center; }
 @media (max-width: 479px) {
   .gw-form-inline > :not(.gw-btn) { flex-basis: 100%; }
 }

package/css/header.css

@@ -1,16 +1,50 @@
 /* header: announcement, a flat 64px bar with one hairline, mega menu, mobile menu up to 1080px.
    Not a floating pill: no radius, no blur, no shadow on the bar. Nothing tucks under it. A brand may choose the one
    other shape, .gw-header--float (an inset card from 1081px, at the end of this file). */
+/* the announcement bar (0.12.0, gemboss.ai's): one sentence on its own ground over the header, the same in both themes
+   (system.json color.announce). A small pill may lead it (.gw-announce__tag); its link is light, underlined by a hairline
+   that brightens on hover. From 520px down, 12px words and a slimmer bar. */
 .gw-announce {
-  padding: 8px var(--gw-gutter);
-  border-bottom: 1px solid var(--gw-line);
-  background: var(--gw-bg-soft);
-  color: var(--gw-ink-2);
+  position: relative;
+  z-index: 60;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--gw-announce-line);
+  background: var(--gw-announce-bg);
+  color: var(--gw-announce-ink);
   font-size: 13px;
+  font-weight: 500;
   line-height: 1.5;
+  letter-spacing: 0.005em;
   text-align: center;
 }
-.gw-announce a { color: var(--gw-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
+/* 2.5px above and below, as gemboss.ai draws the pill (21.5px tall): the one half pixel in the kit */
+.gw-announce__tag {
+  display: inline-block;
+  margin-right: 12px;
+  padding: 2.5px 8px;
+  border-radius: var(--gw-radius-chip);
+  background: var(--gw-announce-tag);
+  color: var(--gw-announce-tag-ink);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  vertical-align: 1px;
+}
+.gw-announce a {
+  margin-left: 8px;
+  padding-bottom: 2px;
+  border-bottom: 1px solid var(--gw-announce-link-line);
+  color: var(--gw-announce-link);
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: border-color 0.18s;
+}
+.gw-announce a:hover { border-bottom-color: var(--gw-announce-link); }
+@media (max-width: 520px) {
+  .gw-announce { padding: 8px 12px; font-size: 12px; }
+  .gw-announce__tag { margin-right: 6px; }
+}
 
 .gw-header {
   position: sticky;

package/css/layout.css

@@ -12,15 +12,19 @@
 @media (min-width: 768px) { .gw-section--tight { padding-block: 64px; } }
 
 /* label + h2 + one or two lines; the vertical flow of every text block in the kit */
-.gw-section__head { max-width: 660px; }
+.gw-section__head { max-width: 760px; }
 .gw-section__head--center { margin-inline: auto; text-align: center; }
 .gw-section__head--center .gw-lead { margin-inline: auto; }
-.gw-section__head:not(:last-child) { margin-bottom: 40px; }
-@media (min-width: 768px) { .gw-section__head:not(:last-child) { margin-bottom: 48px; } }
+/* what follows a head starts 40px under it, 48px from 768px (0.12.0): a top margin on the next thing, at no
+   specificity, so a block that brings its own (a FAQ's 40px, say) keeps it */
+:where(.gw-section__head) + * { margin-top: 40px; }
+@media (min-width: 768px) { :where(.gw-section__head) + * { margin-top: 48px; } }
 
 :where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-feature, .gw-plan) > * + * { margin-top: 16px; }
 :where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-plan) > :is(.gw-actions, .gw-segmented) { margin-top: 32px; }
 :where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-plan) > .gw-list--check { margin-top: 24px; }
+/* a lead under a heading: 20px (0.12.0, as gemboss.ai); in a hero it keeps the 16px of the flow */
+:where(.gw-section__head, .gw-split > :not(.gw-window), .gw-cta) > :where(* + .gw-lead) { margin-top: 20px; }
 
 /* a row of actions: one .gw-btn, then a secondary or a link */
 .gw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

package/css/sections.css

@@ -26,7 +26,7 @@
   .gw-hero > .gw-wrap > .gw-window { margin-top: 64px; }
 }
 @media (max-width: 479px) {
-  :is(.gw-hero, .gw-cta) .gw-actions > .gw-btn { flex: 1 1 100%; }
+  :is(.gw-hero, .gw-cta) .gw-actions > .gw-btn { flex: 1 1 100%; justify-content: center; }
 }
 
 /* logos: a proof strip of real logos or wordmarks */

package/css/tokens.css

@@ -3,6 +3,7 @@
   color-scheme: light;
   --gw-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --gw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --gw-font-action: Inter;
   --gw-text-11: 11px;
   --gw-text-12: 12px;
   --gw-text-13: 13px;
@@ -18,6 +19,8 @@
   --gw-display-wordmark: clamp(40px, 9vw, 128px);
   --gw-display-weight: 600;
   --gw-display-tracking: -0.03em;
+  --gw-display-h1-leading: 1.1;
+  --gw-display-h2-leading: 1.06;
   --gw-heading-weight: 650;
   --gw-heading-tracking: -0.022em;
   --gw-heading-leading: 1.08;
@@ -70,6 +73,7 @@
   --gw-tap-min: 44px;
   --gw-ease: cubic-bezier(.22,1,.36,1);
   --gw-reveal-ms: 700ms;
+  --gw-reveal-distance: 20px;
   --gw-spin-ms: 700ms;
   --gw-spot-radius: 260px;
   --gw-spot-radius-action: 120px;
@@ -88,6 +92,13 @@
   --gw-stage-bottom: #0d0f2e;
   --gw-stage-dot: rgba(255, 255, 255, 0.1);
   --gw-stage-ink: #ffffff;
+  --gw-announce-bg: #171a38;
+  --gw-announce-ink: #b9beda;
+  --gw-announce-line: rgba(255, 255, 255, 0.06);
+  --gw-announce-tag: rgba(122, 132, 255, 0.2);
+  --gw-announce-tag-ink: #a7aeff;
+  --gw-announce-link: #ffffff;
+  --gw-announce-link-line: rgba(255, 255, 255, 0.28);
   /* accent primitives: the only colours a brand overrides (docs/theming.md) */
   --gw-accent-light: #5661f5;
   --gw-accent-strong-light: #3a44de;

package/demo/header.html

@@ -44,7 +44,7 @@
 <body class="gw-page">
   <a class="gw-skip" href="#main">Skip to content</a>
 
-  <div class="gw-announce" role="region" aria-label="Announcement">The GemBoss community is live. <a href="https://community.gemboss.ai">Join founders building brand-true stores</a></div>
+  <div class="gw-announce" role="region" aria-label="Announcement"><span class="gw-announce__tag">NEW</span> The GemBoss community is live. <a href="https://community.gemboss.ai">Join founders building brand-true stores &rarr;</a></div>
   <header class="gw-header" data-gw-header>
     <div class="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="header.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>

package/docs/components.md

@@ -13,15 +13,16 @@ default `tight` profile, and `soft` makes them 12 / 20 / 24; "ink fill" is the d
 `data-gw-action="accent"` makes it the accent.
 
 Spacing between the children of text blocks is automatic: inside `.gw-section__head`, the hero, a split column,
-`.gw-cta`, `.gw-card`, `.gw-feature` and `.gw-plan`, each child is 16px below the previous one, a `.gw-actions` row
-32px, a `.gw-list--check` 24px. Do not add margins to fix rhythm; reorder or remove content instead.
+`.gw-cta`, `.gw-card`, `.gw-feature` and `.gw-plan`, each child is 16px below the previous one, a `.gw-lead` under a
+heading 20px (16px in the hero), a `.gw-actions` row 32px, a `.gw-list--check` 24px. Do not add margins to fix rhythm;
+reorder or remove content instead.
 
 ## Page
 
 | class | for |
 |---|---|
 | `.gw-page` | on `<body>`: the footer stays at the bottom of a short page |
-| `.gw-skip` | the first element in `<body>`: "Skip to content", visible only on keyboard focus |
+| `.gw-skip` | the first element in `<body>`: "Skip to content", visible only on keyboard focus (an accent tab from the top left corner) |
 
 ```html
 <body class="gw-page">
@@ -60,11 +61,11 @@ copies of the script and expect both to work (the first owns the page).
 
 | class | for |
 |---|---|
-| `h1`, `h2` (and `.gw-h1`, `.gw-h2`) | display sizes: h1 `clamp(40px, 4.6vw, 68px)`, h2 `clamp(32px, 3.4vw, 52px)`, weight 600, tracking −0.03em |
-| `h3`, `h4` (and `.gw-h3`, `.gw-h4`) | 24px / 650 and 20px / 600 |
+| `h1`, `h2` (and `.gw-h1`, `.gw-h2`) | display sizes: h1 `clamp(40px, 4.6vw, 68px)` at line height 1.1, h2 `clamp(32px, 3.4vw, 52px)` at 1.06, weight 600, tracking −0.03em |
+| `h3`, `h4` (and `.gw-h3`, `.gw-h4`) | 20px / 600 (tracking −0.02em, line height 1.2, every h3 on gemboss.ai) and 20px / 600 |
 | `.gw-dim` | the muted first sentence of the house headline shape |
-| `.gw-label` | the label above a heading: 13px, muted, led by the 8px accent square |
-| `.gw-lead` | the one or two lines under a heading (18px, 20px in the hero, muted, max 60ch) |
+| `.gw-label` | the label above a heading: 13px, muted, led by the 8px square in ink; `--gw-label-mark` paints the square (a product's own colour): `style="--gw-label-mark: var(--gw-accent)"` on the label or around it |
+| `.gw-lead` | the one or two lines under a heading (18px, 20px in the hero, muted, max 58ch) |
 | `.gw-note` | a short reassurance under actions (14px, muted) |
 | `.gw-link` | an inline link in the accent, underlined |
 | `.gw-link--arrow` | a standalone "go there" link with a → that moves 2px on hover |
@@ -92,7 +93,7 @@ Don't: uppercase or letter-spaced labels; a label longer than a few words; the a
 | `.gw-section` | a section's vertical rhythm (`--gw-space-section`) |
 | `.gw-section--soft` | on `--gw-bg-soft`, to separate a section without a line |
 | `.gw-section--tight` | less padding (40px, 64px from 768px), for proof strips and follow-on tables |
-| `.gw-section__head` | label + h2 + lead, max 660px; 40–48px above the content |
+| `.gw-section__head` | label + h2 + lead, max 760px; the content after it starts 40px below (48px from 768px), unless it brings its own top margin |
 | `.gw-section__head--center` | the same, centred |
 | `.gw-grid`, `.gw-grid--2`, `.gw-grid--3`, `.gw-grid--4` | equal columns: one on phones; 2 and 3 from 768px; 4 is 2 from 480px and 4 from 1080px |
 | `.gw-actions` | a row of actions that wraps; on phones the hero and CTA buttons go full width |
@@ -118,8 +119,11 @@ Don't: more than three night bands on a page (the closing CTA does not count), o
 brand's accent with `--gw-on-accent` words under `data-gw-action="accent"` (one colour on the whole site). Variants: `--secondary` (hairline, transparent), `--ghost`
 (no frame), `--on-night` (light fill for a dark surface that is not a `.gw-band--night`), `--danger` (0.6.0: the
 danger fill with `--gw-on-danger` words, for the action of a page that destroys something: delete a workspace, erase
-my data), `--sm` (36px, with a 44px hit area), `--lg` (48px, 16px type), `--block` (full width). On touch screens every button is at least 44px tall and
-its label may wrap. Inside a night band the default button turns light by itself.
+my data), `--sm` (36px, with a 44px hit area), `--lg` (48px, 16px type), `--block` (full width). On hover (0.12.0, as
+gemboss.ai) the filled button rises 1px onto the rest shadow, a framed one darkens its frame; an arrow after the label
+(`<span class="gw-btn__arrow">→</span>`) moves 3px. Up to 768px every button is at least 44px tall; up to 480px a label
+in `<main>` may wrap. The face is `--gw-font-action` (the brand face alone, `system.json` `type.button.family`). Inside a
+night band the default button turns light by itself.
 
 ```html
 <div class="gw-actions">
@@ -332,7 +336,7 @@ level. A brand changes what it fills in and the tokens (colours, the Stage, the
 
 | class | for |
 |---|---|
-| `.gw-announce` | optional one-sentence bar above the header, with one link |
+| `.gw-announce` | optional one-sentence bar above the header, with one link, on its own ground in both themes (`color.announce`); `.gw-announce__tag` a small pill before the sentence ("New") |
 | `.gw-header` (`data-gw-header`) | the sticky, flat 64px bar with one hairline; `.is-scrolled` darkens the hairline |
 | `.gw-header--float` | with `.gw-header`, a brand's header profile: from 1081px the same bar as an inset card (panel radius, the surface at 85% over a blur, one hairline, the raised shadow, 16px from the top); the flat bar up to 1080px; solid under `prefers-reduced-transparency` |
 | `.gw-header__bar` | the row inside: the page's wrap + 12px (1132px on GemBoss), 24px inside (6px up to 640px), 32px between its parts |
@@ -838,10 +842,12 @@ not make public with the review; masonry or a carousel that moves by itself.
 
 | class | for |
 |---|---|
-| `.gw-reveal` | fades and rises 24px into place when 15% visible (the script adds `.is-in`); shown anyway after 2.5s, and still under `prefers-reduced-motion` |
+| `.gw-reveal` | fades and rises 20px into place once 12% of it is in view (the script adds `.is-in`); each one after the first among its siblings waits 70ms more (at most 380ms); shown anyway after 1.6s, and still under `prefers-reduced-motion` |
+| `[data-gw-count]` | inside a `.gw-reveal`: its number counts up from 0 when the reveal shows (`<span data-gw-count>$1,200+</span>`) |
 
-Put it on a block (a grid, a list, a window), not on each card in a grid. Don't use it on the hero or anything in
-the first screen, and don't animate anything but `transform` and `opacity`.
+Put it on a block (a grid, a list, a window), or on each card of one grid to cascade them. Don't use it on the hero
+or anything in the first screen, and don't animate anything but `transform` and `opacity`. A count is for a number
+that is a measure (a total, a percentage), never for a step's ordinal ("01").
 
 ### Spotlight `data-gw-spot` (0.9.0)
 

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.11.0'`. The classic script exposes the three as `window.gwWebsite`.
+- **`version`**: `'0.12.0'`. The classic script exposes the three as `window.gwWebsite`.
 - **`data-gw-ready`**: on each wired element, the parts wired on it (`mega`, on the `.gw-header` since 0.11.0, `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.
@@ -170,9 +170,13 @@ Script behaviour:
   (`gw-theme`, every access in try/catch), updates `aria-label` on every toggle, fires `gw:theme`. On load, a stored
   choice is applied before paint by a one-line inline script in `<head>` that the template carries
   (`templates/page.html`).
-- **Reveal**: elements with `.gw-reveal` get `.is-in` when 15% visible (IntersectionObserver, once). Failsafe: 2.5s
-  after the `init` that found them, or at once if IntersectionObserver is missing, they get `.is-in`. Under
-  `prefers-reduced-motion` the CSS shows them without motion.
+- **Reveal** (0.12.0, as gemboss.ai): elements with `.gw-reveal` get `.is-in` once 12% of them is in view, the bottom
+  6% of the view not counting (IntersectionObserver, once). Each `.gw-reveal` after the first among its `.gw-reveal`
+  siblings waits 70ms more (at most 380ms), so a grid of them cascades. A number in a `[data-gw-count]` element inside
+  counts up from 0 to itself over 1.1s when its reveal shows (its first words: `$1,200+` keeps the sign, the grouping
+  and the decimals). Failsafe: 1.6s after the `init` that found them, or at once if IntersectionObserver is missing,
+  they get `.is-in`. Under `prefers-reduced-motion` the CSS shows them without motion, at once, and nothing counts.
+  The values are `system.json` `motion.reveal`.
 - **Header**: `.is-scrolled` on `[data-gw-header]` once the page scrolled more than 8px (the CSS may use it for the
   hairline only; the bar does not change height or colour). The floating header needs nothing more from the script:
   it is the same element with one more class.
@@ -521,7 +525,7 @@ CSS only: the script does not touch a form. The page (or its server) owns valida
 |---|---|
 | `.gw-btn` (+ `--secondary`, `--ghost`, `--on-night`, `--danger` (0.6.0), `--sm`, `--lg`, `--block`) | actions; a rectangle with the action radius, the action colour as fill (ink, or the accent under `data-gw-action="accent"`); `:active` pressed, `[aria-busy="true"]` loading (script above) |
 | `.gw-link` (+ `--arrow`) | inline text link in the accent; `--arrow` adds → that moves 2px on hover |
-| `.gw-label` | the label above a heading: 13px muted, 8px accent square before it |
+| `.gw-label` | the label above a heading: 13px muted, the 8px square before it in ink; `--gw-label-mark` (on it or around it) paints the square |
 | `.gw-dim` | the muted first sentence inside a headline |
 | `.gw-chip` (+ `.is-active`) | selectable token, pill |
 | `.gw-segmented` (+ `--block`) | one choice out of two to four (script above) |
@@ -553,7 +557,7 @@ CSS only: the script does not touch a form. The page (or its server) owns valida
 |---|---|
 | `.gw-section` (+ `--soft`, `--tight`) | vertical rhythm; `--soft` on `--gw-bg-soft` |
 | `.gw-band--night` | a dark band (max three per page plus the closing CTA, never adjacent) |
-| `.gw-section__head` (+ `--center`) | label + h2 + one or two lines, max 660px |
+| `.gw-section__head` (+ `--center`) | label + h2 + one or two lines, max 760px |
 | `.gw-hero` (+ `__wash`, `--center`, `--compact`) | first screen; `__wash` is the soft colour wash behind it |
 | `.gw-logos` | proof strip of customer or partner logos (real ones only) |
 | `.gw-stats` (`__item`, `__value`, `__label`) | 3–4 facts in a row, each with its source |

package/docs/theming.md

@@ -98,7 +98,7 @@ the panels; in `tight` that is the 16px the header was designed with.
 - **Gradient or accent-coloured words in a heading.** A heading is ink, with a muted first sentence (`.gw-dim`).
 - **Accent-coloured section bands.** A section is white, `--gw-bg-soft` or a night band; the accent only lights a
   night band's top edge.
-- **All-caps labels.** Labels are sentence case, muted, led by the 8px accent square.
+- **All-caps labels.** Labels are sentence case, muted, led by the 8px square (ink, or the colour `--gw-label-mark` gives it).
 - **A light on a heading, or in more than one colour.** The spotlight lights things you click, in the accent only.
 
 These make a page louder without making it clearer, and `check` reports the last one (`uppercase-label`) and any

package/js/website.js

@@ -1,9 +1,9 @@
-/*! @gemboss/website-ui 0.11.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.12.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.11.0';
+var version = '0.12.0';
 var api = { version: version, init: init, destroy: destroy };
 var doc, root, mine, fine, sys, wide, desk, mid, live = [], queued = false;
 var still, lights;
@@ -483,17 +483,41 @@ function theme(ctx) {
   relabel();
 }
 
+var REVEAL = { threshold: 0.12, margin: '0px 0px -6% 0px', stagger: 70, staggerMax: 380, failsafe: 1600, count: 1100 };
+function countUp(el) {
+  var n = el.firstChild, m = n && n.nodeType === 3 && /^(\s*\D*?)(\d[\d,]*(?:\.\d+)?)(.*)$/.exec(n.nodeValue), t0;
+  if (!m) return;
+  var num = m[2].replace(/,/g, ''), dec = (num.split('.')[1] || '').length;
+  function fmt(v) { v = v.toFixed(dec); return m[1] + (num !== m[2] ? Number(v).toLocaleString('en-US') : v) + m[3]; }
+  n.nodeValue = fmt(0);
+  requestAnimationFrame(function step(ts) {
+    var p = Math.min((ts - (t0 = t0 || ts)) / REVEAL.count, 1);
+    n.nodeValue = fmt(p < 1 ? num * (1 - Math.pow(1 - p, 3)) : +num);
+    if (p < 1) requestAnimationFrame(step);
+  });
+}
 function reveal(ctx) {
-  var els = [], io = null;
-  each(ctx, '.gw-reveal', 'reveal', function (el) { els.push(el); return { stop: function () { if (io) io.unobserve(el); } }; });
-  function showAll() { els.forEach(function (el) { el.classList.add('is-in'); }); if (io) io.disconnect(); }
+  var els = [], io, calm = still.matches;
+  each(ctx, '.gw-reveal', 'reveal', function (el) {
+    els.push(el);
+    return { stop: function () { if (io) io.unobserve(el); el.style.transitionDelay = ''; } };
+  });
+  function show(el) {
+    if (el.classList.contains('is-in')) return;
+    el.classList.add('is-in');
+    if (!calm) [].forEach.call(el.querySelectorAll('[data-gw-count]'), countUp);
+  }
   if (!els.length) return;
-  if (!window.IntersectionObserver || mq('(prefers-reduced-motion: reduce)').matches) return showAll();
+  if (!window.IntersectionObserver || calm) return els.forEach(show);
+  els.forEach(function (el) {
+    var i = [].filter.call(el.parentNode.children, function (c) { return c.classList.contains('gw-reveal'); }).indexOf(el);
+    if (i > 0) el.style.transitionDelay = Math.min(i * REVEAL.stagger, REVEAL.staggerMax) + 'ms';
+  });
   io = new IntersectionObserver(function (list) {
-    list.forEach(function (en) { if (en.isIntersecting) { en.target.classList.add('is-in'); io.unobserve(en.target); } });
-  }, { threshold: 0.15 });
+    list.forEach(function (en) { if (en.isIntersecting) { show(en.target); io.unobserve(en.target); } });
+  }, { threshold: REVEAL.threshold, rootMargin: REVEAL.margin });
   els.forEach(function (el) { io.observe(el); });
-  setTimeout(showAll, 2500);
+  setTimeout(function () { els.forEach(show); io.disconnect(); }, REVEAL.failsafe);
 }
 
 function scrolled() {