@gemboss/website-ui 0.11.0 → 0.13.0

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 */
@@ -258,6 +266,13 @@
 }
 .gw-window__body:has(> img:only-child) + .gw-window__caption { padding-top: 12px; }
 
+/* figure (0.13.0, Gemians): a photo and its caption where a section shows one outside the prose (beside words in a
+   split, under a hero's actions): the picture at the card radius, the caption 14px, muted, 12px under it, as a figure
+   in .gw-prose. A screen of the product goes in .gw-window instead. */
+.gw-figure > :is(img, video, picture) { display: block; width: 100%; height: auto; border-radius: var(--gw-radius-card); }
+.gw-figure > picture > img { display: block; width: 100%; height: auto; border-radius: inherit; }
+.gw-figure > figcaption { margin-top: 12px; color: var(--gw-muted); font-size: 14px; line-height: 1.5; }
+
 /* icon: 20px inline stroke SVG (1.7 to 2px stroke, currentColor) */
 .gw-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; }
 .gw-icon svg { width: 20px; height: 20px; }
@@ -334,16 +349,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;
@@ -669,3 +703,16 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   :root:not([data-theme="light"]) .gw-theme-toggle__sun { display: block; }
   :root:not([data-theme="light"]) .gw-theme-toggle__moon { display: none; }
 }
+
+/* ---- 0.13.0: the brand's logo as one drawing (Gemians): the mark and the wordmark in one file, in place of the mark and
+   the name, 26px tall, its width the file's. Its alt is the brand's name. A logo drawn for dark grounds only (a white
+   wordmark) comes as a second file, .gw-brand__logo--dark, right after the first: it shows in dark (the system's or the
+   toggle's) and the first one hides, the toggle icons' rule. One file that reads on both: no --dark. */
+.gw-brand__logo { display: block; flex: none; width: auto; height: 26px; }
+.gw-brand__logo--dark { display: none; }
+:root[data-theme="dark"] .gw-brand__logo--dark { display: block; }
+:root[data-theme="dark"] .gw-brand__logo:has(+ .gw-brand__logo--dark) { display: none; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .gw-brand__logo--dark { display: block; }
+  :root:not([data-theme="light"]) .gw-brand__logo:has(+ .gw-brand__logo--dark) { display: none; }
+}

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/ratings.css

@@ -26,7 +26,6 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 16px;
-  margin: 0;
   padding: 0;
   list-style: none;
 }

package/css/sections.css

@@ -13,7 +13,7 @@
     radial-gradient(420px 320px at 52% 118%, color-mix(in srgb, var(--gw-wash-mint) 10%, transparent), transparent 62%);
 }
 .gw-hero h1 .gw-dim { display: block; }
-.gw-hero > .gw-wrap > .gw-window { margin-top: 48px; }
+.gw-hero > .gw-wrap > :is(.gw-window, .gw-figure) { margin-top: 48px; }
 .gw-hero--center { text-align: center; }
 .gw-hero--center > .gw-wrap > * { margin-inline: auto; }
 .gw-hero--center .gw-actions { justify-content: center; }
@@ -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 */
@@ -46,7 +46,7 @@
 .gw-logos img { width: auto; height: 28px; }
 
 /* stats: three or four facts, each with its source */
-.gw-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
+.gw-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0; list-style: none; }
 .gw-stats__value { font-size: var(--gw-display-h2); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
 .gw-stats__label { margin-top: 8px; max-width: 28ch; color: var(--gw-muted); font-size: 14px; }
 .gw-stats__source { margin-top: 8px; color: var(--gw-muted); font-size: 12px; }
@@ -79,7 +79,6 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 32px 24px;
-  margin: 0;
   padding: 0;
   list-style: none;
   counter-reset: gw-step;

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">
@@ -270,6 +274,24 @@ the mock-up shows a demo brand ("Vital Glow is a GemBoss demo brand."). Under re
 Don't: put interactive controls inside a mock-up; show made-up numbers without the caption; write the caption in
 other words ("Sample", "Demo numbers") or leave it in English on a translated page.
 
+### Figure `.gw-figure`
+
+0.13.0 (Gemians): a photo and its caption outside the prose, where a section shows one: beside the words of a split,
+under a hero's actions (48px below, as a window). The picture takes the card radius; the `<figcaption>` is 14px,
+muted, 12px under it, the look of a figure inside `.gw-prose`. A screen of the product goes in `.gw-window`; a photo
+of people, a place or a product goes here.
+
+```html
+<figure class="gw-figure">
+  <img src="/img/team-2025.webp" alt="The team together in the office, 2025" width="1000" height="471" loading="lazy">
+  <figcaption>The GemCommerce team, 2025.</figcaption>
+</figure>
+```
+
+Don't: a photo of people without their permission, or of another brand without its; a caption that repeats the alt
+word for word (the alt says what is in the picture, the caption says what it is); a frame, a shadow or a radius of
+your own.
+
 ### Icon `.gw-icon`
 
 A 20px box for an inline stroke SVG (1.7–2px stroke, `currentColor`, `aria-hidden="true"`). Inside `.gw-feature` it
@@ -332,11 +354,12 @@ 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 |
 | `.gw-brand`, `__mark`, `__name` | logo (34px, its corners clipped at 8px) and name, linking home; a 44px row up to 768px |
+| `.gw-brand__logo`, `--dark` | 0.13.0: a brand's logo drawn as one file (mark and wordmark), 26px tall, in place of `__mark` and `__name`, `alt` the brand's name; `--dark` a second file shown in dark only, right after the first (docs/theming.md) |
 | `.gw-nav`, `__list`, `__item`, `__trigger`, `__chev`, `__link` | the desktop nav (from 1081px), 14px weight 500, 0.005em tighter; `__trigger` is a section's link that opens its mega panel (its 12px `__chev` turns while open), `__link` a plain link; the current page (`aria-current="page"`) or section (`aria-current` on a trigger) in the accent's strong ink, weight 600 |
 | `.gw-mega` (`--gw-mega-w`, `--gw-mega-pv`, `--gw-mega-cols`), `__body`, `__grid`, `__col`, `__heading`, `__link`, `__aside`, `__card`, `__art`, `__card-text`, `__go`, `__foot`, `__foot-start`, `__foot-end`, `__cta`, `__new` | 0.11.0, gemboss.ai's mega menu: a panel on one surface that morphs between panels (the popover radius, raised shadow), a caret at the open name, a pill under the hovered name, a highlight under the hovered row; columns of rows (a name and one line), the pictures beside them (`__aside`: the panel's own `__card`, a row's preview from its `<template>`), each picture on the Stage (`__art`: the deep iris ground, `--gw-stage-*`); an optional strip under it. The page behind dims and blurs (`.gw-scrim`). Script: `docs/markup-contract.md` |
 | `.gw-header__actions` | Sign in, a second text action, Start free, the menu button (4px apart; the button 8px further) |
@@ -838,10 +861,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

@@ -3,8 +3,9 @@
 A GemCommerce brand (GemPages, Gemians…) uses the kit as it is and chooses six things, **and nothing else**:
 
 1. **the accent variables** (eight, light and dark),
-2. **the wash hues** (only if the brand has its own),
-3. **the logo** (and the favicon),
+2. **the wash hues** (only if the brand has its own), and the colours of its **announcement bar** and **Stage** (0.13.0,
+   only if it uses them and wants its own),
+3. **the logo** (and the favicon): a mark beside the name, or one drawing of both (0.13.0),
 4. **the action colour mode**: `data-gw-action="ink|accent"` on `<html>`,
 5. **the radius profile**: `data-gw-radius="tight|soft"` on `<html>`,
 6. **the header style**: the flat bar, or `.gw-header--float`.
@@ -46,9 +47,30 @@ brand's page lights in the brand's own colour, in light, in dark and in night ba
 takes the corners of the element it lights, so both radius profiles hold. A brand does not choose its colour, its
 strength or its size (they are tokens), and never a second colour.
 
-The logo and the favicon are files, not variables: the `<img class="gw-brand__mark">` (26×26, SVG preferred, with
-`alt=""` because the name is written next to it) and the `<span class="gw-brand__name">` in the header and footer
-partials, and `<link rel="icon">` in the page head.
+The logo and the favicon are files, not variables, in the header and footer partials and `<link rel="icon">` in the
+page head. The logo is one of two shapes:
+
+- **a mark beside the name** (GemBoss): `<img class="gw-brand__mark">` (34×34, SVG preferred, `alt=""` because the name
+  is written next to it) and `<span class="gw-brand__name">`;
+- **one drawing of both** (0.13.0, Gemians: the mark and the wordmark in one file): `<img class="gw-brand__logo">`, 26px
+  tall, its width the file's, its `alt` the brand's name. A logo that only works on a dark ground (a white wordmark)
+  comes with a second file in ink for the light theme, or the other way round: the file for light grounds first, then
+  the file for dark grounds as `class="gw-brand__logo gw-brand__logo--dark"`. The kit shows one per theme (the system's
+  setting or the toggle). Keep the brand's own drawing: recolour the wordmark, never redraw it in the kit's type.
+
+```html
+<a class="gw-brand" href="/"><img class="gw-brand__logo" src="/assets/img/logo.png" alt="Gemians" width="150" height="26"><img class="gw-brand__logo gw-brand__logo--dark" src="/assets/img/logo-on-dark.png" alt="Gemians" width="150" height="26"></a>
+```
+
+`check` reports a logo without its name in `alt`, without `width` and `height`, or a dark file without the light one
+right before it (`brand-markup`).
+
+**The announcement bar and the Stage** (0.13.0). The bar over the header (`--gw-announce-*`, `system.json`
+`color.announce`) and the Stage the mega menu's pictures sit on (`--gw-stage-*`, `color.stage`) are GemBoss's iris by
+default. A brand that shows them may set its own in the same `:root` block: the bar's `bg`, `ink`, `line`, `tag`,
+`tag-ink`, `link`, `link-line`; the Stage's `glow`, `glow-2`, `top`, `bottom`, `dot`, `ink`. Both stay the same in
+light and dark. `check` computes the bar's words and link on its ground and the Stage's words on both ends of its
+gradient, and fails below 4.5:1 (`brand-contrast`).
 
 The footer (0.7.0, `templates/footer.html`) is the same for every brand; a brand fills it. Its family row lists the
 brand's siblings (a GemPages site: GemBoss, GemX, GemUpsells), its Ask AI row asks about the brand, and its wordmark
@@ -98,7 +120,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
@@ -106,8 +128,9 @@ button filled from site CSS (`accent-button`).
 
 `check` also reports: colours outside the tokens, a redefined kit token (`token-redefined`, including the radius and
 action tokens), overrides of `.gw-*` classes, an unknown profile or one set on another element than `<html>`
-(`profile-unknown`), `.gw-header--float` anywhere but the header itself (`header-float-markup`), and, on a page with
-`data-gw-action="accent"`, accent button words below 4.5:1 (`action-contrast`).
+(`profile-unknown`), `.gw-header--float` anywhere but the header itself (`header-float-markup`), on a page with
+`data-gw-action="accent"`, accent button words below 4.5:1 (`action-contrast`), a brand's own announcement bar or
+Stage with words below 4.5:1 (`brand-contrast`), and a one-file logo without its markup (`brand-markup`).
 
 ## A full example
 
@@ -136,7 +159,7 @@ action tokens), overrides of `.gw-*` classes, an unknown profile or one set on a
 …
 <header class="gw-header gw-header--float" data-gw-header>
   <div class="gw-wrap gw-header__bar">
-    <a class="gw-brand" href="/"><img class="gw-brand__mark" src="/logo-mark.svg" alt="" width="26" height="26"><span class="gw-brand__name">GemPages</span></a>
+    <a class="gw-brand" href="/"><img class="gw-brand__mark" src="/logo-mark.svg" alt="" width="34" height="34"><span class="gw-brand__name">GemPages</span></a>
 ```
 
 ## Check the contrast before you ship
@@ -145,8 +168,10 @@ The accent family is read as text: the kit draws links, step numbers, active men
 `--gw-accent-strong`, and the label square, focus ring, check marks and the featured plan's hairline in `--gw-accent`.
 So:
 
-1. **Accent text on white at least 4.5:1**: `--gw-accent-light` and `--gw-accent-strong-light` on `#ffffff`.
-   Check `--gw-accent-strong-light` on `--gw-bg-soft` (`#f2f3f5`) too, where links sit in soft sections.
+1. **Accent text on white at least 4.5:1**: `--gw-accent-strong-light` on `#ffffff` and on `--gw-bg-soft`
+   (`#f2f3f5`), where links sit in soft sections. The plain `--gw-accent-light` is never text (icons, marks, the focus
+   ring, the featured plan's hairline): **3:1** on `#ffffff` is enough (WCAG 1.4.11), so a gold or a light green can
+   stay bright there (0.13.0; this line asked 4.5:1 of it before, which no gold passes).
 2. `--gw-accent-strong-light` on `--gw-accent-soft-light`: at least 4.5:1 (the accent badge, the active chip and the
    chosen option of a segmented control).
 3. `--gw-accent-dark` and `--gw-accent-strong-dark` on `#0d0d12` (dark page) and on `#0c0e14` (night band): at
@@ -158,7 +183,9 @@ So:
    build does the same for its own colours.
 
 Any WCAG contrast checker works (paste the two hex values). A bright brand colour (yellow, light green, cyan) almost
-never passes on white: darken it for `-light` and keep the bright one for `-dark`. If you cannot get 4.5:1 without
+never passes as text on white: darken it for `-strong-light`, keep it near the brand for `-light` (3:1) and bright
+for `-dark`. A colour that needs dark words on it (gold, yellow) cannot be the button's fill and its text colour at
+once: keep the ink button (Gemians does). If you cannot get 4.5:1 without
 changing the brand colour beyond recognition, keep the kit's accent and use the brand colour only in the logo and
 illustrations, and keep the ink button.
 

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.13.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.13.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() {