@gemboss/website-ui 0.11.0 → 0.12.0

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.11.0';
+var version = '0.12.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, desk, mid, live = [], queued = false;
@@ -554,19 +554,46 @@ function theme(ctx) {
   relabel();
 }
 
-// Reveal at 15% visible, once. Failsafe: shown 2.5s after the init that found them, or at once without
-// IntersectionObserver or under reduced motion.
+// Reveal (0.12.0, as gemboss.ai; system.json motion.reveal): once, when 12% of it is in view with the bottom 6% of the
+// view taken off. Each .gw-reveal after the first among its .gw-reveal siblings waits 70ms more (at most 380ms), so a
+// grid cascades. A [data-gw-count] number inside counts up from 0 when its reveal shows. Failsafe: all shown 1.6s after
+// the init that found them, or at once without IntersectionObserver or under reduced motion (and then nothing counts).
+var REVEAL = { threshold: 0.12, margin: '0px 0px -6% 0px', stagger: 70, staggerMax: 380, failsafe: 1600, count: 1100 };
+// the number in the element's first words: "$1,200+" counts from 0 to 1,200 with its sign, grouping and decimals kept
+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);
 }
 
 // Header: .is-scrolled past 8px, read once per frame (one scroll listener for every header).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/website-ui",
-  "version": "0.11.0",
+  "version": "0.12.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

@@ -78,6 +78,16 @@
       "dot": "rgba(255, 255, 255, 0.1)",
       "ink": "#ffffff"
     },
+    "announce": {
+      "$comment": "The announcement bar (0.12.0): one sentence over the header, as gemboss.ai draws it, the same in light and dark. bg its ground, ink its words, line its hairline at the bottom; tag and tag-ink the small pill before the sentence; link the link's words and link-line their underline. A brand sets its own bar here.",
+      "bg": "#171a38",
+      "ink": "#b9beda",
+      "line": "rgba(255, 255, 255, 0.06)",
+      "tag": "rgba(122, 132, 255, 0.2)",
+      "tag-ink": "#a7aeff",
+      "link": "#ffffff",
+      "link-line": "rgba(255, 255, 255, 0.28)"
+    },
     "roles": {
       "action": "The thing you click: ink, or the brand's accent when the site chose the accent action profile (profiles.action).",
       "accent": "Links, focus rings, active state, a chart line, the 8px label square; the primary button only through the accent action profile. Never body text, never words in a heading, never a section band.",
@@ -85,7 +95,8 @@
       "line-control": "The border of a form control (a field, a checkbox, a radio), 0.6.0: it must reach 3:1 on bg, bg-soft and surface, light and dark, where line and line-strong are hairlines that do not. Like the dashboard's --gemboss-field-line.",
       "wash": "The hero wash and illustrations only.",
       "scrim": "The veil over the page while a mega menu is open (0.11.0): a dim and a 4px blur, as gemboss.ai.",
-      "stage": "The ground of a mega menu's pictures and nothing else (0.11.0)."
+      "stage": "The ground of a mega menu's pictures and nothing else (0.11.0).",
+      "announce": "The announcement bar over the header and nothing else (0.12.0)."
     }
   },
   "radius": {
@@ -113,13 +124,16 @@
       "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. Weight 800 (0.10.0, as gemboss.ai draws it): the one use of 800 in the kit.",
       "weight": 600,
-      "tracking": "-0.03em"
+      "tracking": "-0.03em",
+      "h1_leading": 1.1,
+      "$comment_leading": "1.1 and 1.06 (0.12.0, gemboss.ai's): at 1.02 the descenders of a first line touched the capitals of the second (Chris, 15/10/2026).",
+      "h2_leading": 1.06
     },
     "heading": { "weight": 650, "tracking": "-0.022em", "line_height": 1.08 },
     "subhead": { "weight": 600 },
     "body": { "size": 18, "line_height": 1.6 },
-    "label": { "size": 13, "weight": 500, "case": "sentence", "$comment": "muted, led by the 8px accent square; never uppercase tracking" },
-    "button": { "size": 14, "weight": 600, "case": "sentence" }
+    "label": { "size": 13, "weight": 500, "case": "sentence", "$comment": "muted, led by the 8px square in ink (0.12.0, as gemboss.ai; the input --gw-label-mark paints it another colour); never uppercase tracking" },
+    "button": { "size": 14, "weight": 600, "case": "sentence", "family": "Inter", "$comment": "family (0.12.0): a button names the brand face alone, as gemboss.ai does. A glyph the face does not carry (the arrow → is not in Inter's web subset) is then drawn by the system's own fallback, the width gemboss.ai's buttons have (with the full stack it is a different face, 1px narrower, and a pair of buttons fits where gemboss.ai wraps it)." }
   },
   "space": {
     "scale": [0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 120],
@@ -168,6 +182,16 @@
     "properties": ["transform", "opacity"],
     "ease": "cubic-bezier(.22,1,.36,1)",
     "reveal_ms": 700,
+    "reveal": {
+      "$comment": "Scroll reveal (0.12.0, as gemboss.ai): a .gw-reveal rises distance px and fades in over reveal_ms when threshold of it is in view, the bottom margin of the view taken off; each one after the first among its .gw-reveal siblings waits stagger_ms more (at most stagger_max_ms); all are shown failsafe_ms after the script starts. A [data-gw-count] number inside counts up from 0 over count_ms when its reveal shows. The script's numbers are held equal to these by the tests.",
+      "distance": 20,
+      "threshold": 0.12,
+      "margin": "0px 0px -6% 0px",
+      "stagger_ms": 70,
+      "stagger_max_ms": 380,
+      "failsafe_ms": 1600,
+      "count_ms": 1100
+    },
     "spin_ms": 700,
     "$comment": "Animate transform and opacity only. Everything is still under prefers-reduced-motion (a busy button's ring turns once every spin_ms, as the dashboard's spinner, and stands still as an ellipsis). One exception, the spotlight (spot): its light is one painted layer of one element, so its radius may grow.",
     "spot": {

package/templates/header.html

@@ -11,7 +11,8 @@
   the panel's (--gw-mega-w, --gw-mega-pv; 1000 and 320 when it says nothing), its columns too (--gw-mega-cols, 3).
   Limits: at most five top-level items, one .gw-btn (the primary action), one second text action (.gw-header__link).
   Each panel: two or three columns of four or five rows, at most one card, three links in its strip. The announcement
-  bar is optional: one sentence.
+  bar is optional: one sentence, one link, a small pill before it if you like (.gw-announce__tag, one word); its
+  colours are the brand's (system.json color.announce), the same in light and dark.
   Two options (0.8.0):
   - The mobile menu drills down (data-gw-menu="drill" on #gw-mobile-menu, as gemboss.ai's phone menu): the top level
     lists the sections, a tap on one shows its level alone with Back and its title, and the actions stay in a bar at
@@ -25,7 +26,7 @@
     never be translated. Put the word for "Language" in the page's language in data-gw-label-language.
   Replace every [bracketed] placeholder; delete what you do not use.
 -->
-<div class="gw-announce" role="region" aria-label="Announcement">[One sentence of news.] <a href="[link]">[Where the link goes]</a></div>
+<div class="gw-announce" role="region" aria-label="Announcement"><span class="gw-announce__tag">[New]</span> [One sentence of news.] <a href="[link]">[Where the link goes]</a></div>
 <header class="gw-header" data-gw-header>
   <div class="gw-header__bar">
     <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="34" height="34"><span class="gw-brand__name">[Brand]</span></a>

package/templates/page.html

@@ -26,7 +26,7 @@
 <body class="gw-page">
   <a class="gw-skip" href="#main">Skip to content</a>
 
-  <div class="gw-announce" role="region" aria-label="Announcement">[One sentence of news.] <a href="[link]">[Where the link goes]</a></div>
+  <div class="gw-announce" role="region" aria-label="Announcement"><span class="gw-announce__tag">[New]</span> [One sentence of news.] <a href="[link]">[Where the link goes]</a></div>
   <header class="gw-header" data-gw-header>
     <div class="gw-header__bar">
       <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="34" height="34"><span class="gw-brand__name">[Brand]</span></a>

package/website.css

@@ -1,9 +1,10 @@
-/*! @gemboss/website-ui 0.11.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
+/*! @gemboss/website-ui 0.12.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
 /* @gemboss/website-ui tokens. GENERATED from system.json by scripts/build.mjs: do not edit by hand. */
 :root {
   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;
@@ -19,6 +20,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;
@@ -71,6 +74,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;
@@ -89,6 +93,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;
@@ -305,33 +316,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 */
@@ -351,19 +363,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 {
@@ -377,10 +392,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;
 }
@@ -406,15 +422,19 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 @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; }
@@ -456,12 +476,12 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 
 /* 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);
@@ -470,26 +490,34 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
   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 */
@@ -788,16 +816,21 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 .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; }
 }
@@ -805,16 +838,50 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 /* 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;
@@ -1753,7 +1820,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   .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 */
@@ -2407,7 +2474,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
    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%; }
 }