@gemboss/website-ui 0.11.0 → 0.13.0

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.13.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 */
@@ -712,6 +740,13 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 }
 .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; }
@@ -788,16 +823,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 +845,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;
@@ -1474,6 +1548,19 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   :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; }
+}
+
 /* footer: brand block, link columns, bottom row. One hairline on top, white like the page. */
 .gw-footer {
   padding-block: 64px 32px;
@@ -1740,7 +1827,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
     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; }
@@ -1753,7 +1840,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 */
@@ -1773,7 +1860,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
 .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; }
@@ -1806,7 +1893,6 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 32px 24px;
-  margin: 0;
   padding: 0;
   list-style: none;
   counter-reset: gw-step;
@@ -2238,7 +2324,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
    .gw-card__media first, a .gw-label for the category, the title (its link covers the card, so the card is one target
    and the link's name is the title alone), one or two lines of excerpt and a .gw-article-meta row at the foot. One
    column on phones, two from 768px, three from 1080px. --compact: one column of rows, no card and no picture. */
-.gw-post-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
+.gw-post-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0; list-style: none; }
 .gw-post-list > li { display: flex; min-width: 0; }
 .gw-post { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
 .gw-post:hover { border-color: var(--gw-line-strong); }
@@ -2407,7 +2493,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%; }
 }
@@ -2454,7 +2540,6 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 16px;
-  margin: 0;
   padding: 0;
   list-style: none;
 }