@fluid-theme/core 0.4.3 → 2.1.0

package/themes/fonts/bodoni.css

@@ -0,0 +1,35 @@
+/* Bodoni Moda (opsz 6-96, wght 400-900) over Hanken Grotesk (wght 100-900),
+   latin, SIL OFL 1.1 (OFL-*.txt). The "gallery" pairing: spec
+   _docs/plans/base-v2.md §16. Italics load only when used. */
+@font-face {
+  font-family: "Bodoni Moda Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400 900;
+  src: url("./bodoni-moda-latin-opsz-normal.woff2") format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Bodoni Moda Variable";
+  font-style: italic;
+  font-display: swap;
+  font-weight: 400 900;
+  src: url("./bodoni-moda-latin-opsz-italic.woff2") format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Hanken Grotesk Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("./hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Hanken Grotesk Variable";
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("./hanken-grotesk-latin-wght-italic.woff2") format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/themes/gallery.css

@@ -0,0 +1,105 @@
+/* "gallery": an alternate child theme on the Fluid base v2
+   (spec _docs/plans/base-v2.md §16). A Didone display over a quiet grotesk;
+   the images carry the colour, the accent is kept for actions. Fonts:
+   themes/fonts/bodoni.css (or dist/fluid-fonts-bodoni.min.css). Link after
+   the base: fluid.min.css, then this file. Dark mode adds 30 to heading
+   weights (base), but the lede's light weight (350) sits under Bodoni Moda's
+   400 floor, so it never reached the lede: the low-resolution rule at the end
+   sets it (680, a token). */
+@layer reset, tokens, base, layouts, components, themes, utilities;
+
+@layer themes {
+  :root {
+    --font-heading: "Bodoni Moda Variable", Didot, "Bodoni MT", "Noto Serif Display", P052, Georgia, serif;
+    --font-body: "Hanken Grotesk Variable", "Helvetica Neue", "Segoe UI Variable Text", "Segoe UI", Roboto, Arial, sans-serif;
+    --accent: oklch(46% 0.22 266);          /* ultramarine (Klein); white on it ≈ 7.6:1 */
+    --neutral-tint: oklch(50% 0.006 85);    /* gallery white: a breath of warmth so photos read true */
+    --display-max: 12rem;
+    --measure: 62ch;
+    --container-content: 90rem;
+    --space-section: clamp(5rem, 3rem + 8.889vi, 11rem);         /* 80 → 176 */
+    --space-gutter: clamp(2.5rem, 0.667rem + 8.148vi, 8rem);   /* both sides: 20 → 64px a side */
+    --toc-font: var(--font-body);
+    --toc-dock-font: var(--font-body);
+    /* Nav links tracked like the labels; on a narrow bar the base squeezes
+       the tracking down to the minimum before the links wrap. */
+    --nav-tracking: 0.12em;
+    --nav-tracking-min: 0.04em;
+  }
+
+  .eyebrow { color: var(--color-text-muted); }   /* one label voice; the accent is kept for actions */
+
+  /* The label voice reaches the UI. */
+  :is(button, .button), :is(.nav__link, .nav__dropdown-link), .toc a {
+    font-size: var(--step--2);
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+  :is(button, .button), .toc a { letter-spacing: 0.12em; }   /* nav links: --nav-tracking above */
+  /* The compact nav's panel (fluid-nav.min.css) sets its links in the
+     reading size; this file's label size above would win over it. */
+  @supports selector(:popover-open) {
+    @container nav (max-width: 40rem) {
+      .nav[data-nav~="compact"] .nav__panel .nav__link { font-size: var(--step-1); }
+    }
+  }
+
+  blockquote {
+    font: italic 400 var(--step-3) / 1.15 var(--font-display);
+    border: 0;
+    padding: 0;
+    text-indent: -0.42em;
+  }
+  /* The hanging open quote goes on the first paragraph, so it hangs in the
+     margin instead of standing on a line of its own; the testimonial adds
+     its own quote marks. */
+  blockquote:not(.testimonial__quote) > :first-child::before { content: "\201C"; }
+
+  .hero__headline, .display { line-height: 0.92; letter-spacing: -0.02em; }
+  /* Bodoni's long descender (~0.25em) hangs below a 0.92 line: room under it. */
+  .hero__headline, .display { padding-block-end: 0.12em; }
+
+  /* The dock's two rows differ by face and size, not only by position. */
+  .toc[data-toc-mode="dock"] .toc__fold > ol > li > a {
+    font: 400 var(--step-0) / 1.2 var(--font-display);
+    text-transform: none;
+    letter-spacing: 0;
+  }
+  figcaption { max-inline-size: 48ch; }
+
+  /* Bodoni Moda's display cut (opsz 72) loses its hairlines on 1x (non-Retina)
+     screens and at phone sizes: there, the font's own sturdier optical sizes
+     and heavier weights. Retina desktops keep the fine display cut. Neil,
+     2026-10-29, on a 27" 2560x1440 LED Cinema Display: two steps heavier than
+     the first fix ("err on the side of readable; a site can go lighter").
+     A site goes lighter by setting the two weights lower (floor 400). */
+  :root {
+    --gallery-lowres-weight: 650;        /* headlines and section heads */
+    --gallery-lowres-lede-weight: 680;   /* lede, pull quote, blockquote */
+  }
+  @media (max-resolution: 1.5dppx), (max-width: 40rem) {
+    :root { --weight-display: var(--gallery-lowres-weight); }   /* h3 +100; +30 in dark */
+    .display, .hero__headline { font-variation-settings: "opsz" 14; }
+    h2, h3 { font-variation-settings: "opsz" 9; }
+    :is(.lede, .pullquote) {
+      font-weight: calc(var(--gallery-lowres-lede-weight) + var(--_dark-weight));
+      font-variation-settings: "opsz" 6;
+    }
+    blockquote {
+      font-weight: calc(var(--gallery-lowres-lede-weight) + var(--_dark-weight));
+      font-variation-settings: "opsz" 9;
+    }
+    /* The low optical sizes are spaced for small text: tighten them back
+       (Neil: "too much white space between the letters"). */
+    .display, .hero__headline { letter-spacing: -0.045em; }
+    h2 { letter-spacing: -0.035em; }
+    h3 { letter-spacing: -0.03em; }
+    :is(.lede, .pullquote), blockquote { letter-spacing: -0.03em; }
+    /* The wordmark set in the display face gets the same sturdier cut. */
+    .nav__brand {
+      font-weight: calc(var(--gallery-lowres-weight) + var(--_dark-weight));
+      font-variation-settings: "opsz" 9;
+      letter-spacing: -0.025em;
+    }
+  }
+}

package/themes/swiss.css

@@ -0,0 +1,53 @@
+/* "swiss": an alternate child theme on the Fluid base v2
+   (spec _docs/plans/base-v2.md §15). One grotesk family, a heavy display
+   over a light lede, an off-centre column with a start-side rail, ink
+   labels instead of accent eyebrows. Fonts: themes/fonts/archivo.css (or
+   dist/fluid-fonts-archivo.min.css). Link after the base: fluid.min.css,
+   then this file. */
+@layer reset, tokens, base, layouts, components, themes, utilities;
+
+@layer themes {
+  :root {
+    --font-heading: "Archivo Variable", "Helvetica Neue", "Nimbus Sans", Arial, sans-serif;
+    --font-body: var(--font-heading);
+    --accent: oklch(47% 0.21 264);          /* ultramarine; white on it ≈ 6.8:1 */
+    --neutral-tint: oklch(50% 0.006 85);
+    --type-ratio: 1.5;                      /* h1 ≈ 5× body on desktop */
+    --weight-display: 760;
+    --display-max: 11rem;
+    --measure: 65ch;
+    --container-content: 90rem;
+    --space-section: clamp(4.5rem, 2.613rem + 8.387vi, 11rem);   /* 72 → 176 */
+    --space-gutter: clamp(2.5rem, 0.9032rem + 7.097vi, 8rem);   /* both sides: 20 → 64px a side */
+    --rail: 13rem;                          /* the column sits off-centre; the rail is free for labels */
+    --toc-marker: decimal-leading-zero;
+    --toc-dock-font: var(--font-body);
+  }
+
+  .display, .hero__headline {
+    line-height: 0.92;
+    letter-spacing: -0.045em;
+    font-variation-settings: "wdth" 92;
+  }
+  h1 { letter-spacing: -0.04em; }
+  h2 { font-weight: 700; letter-spacing: -0.03em; }
+  h3 { font-weight: 600; }
+
+  :is(.eyebrow, h5, h6, thead th, .toc__label) {
+    color: var(--color-text);
+    letter-spacing: 0.1em;
+    font-variation-settings: "wdth" 112;
+  }
+
+  .lede { font-family: var(--font-body); font-weight: 300; }
+
+  /* No italic in the display: emphasis by weight. */
+  blockquote, :is(h1, h2, h3, .display) em { font-style: normal; }
+  :is(h1, h2, h3, .display) em { font-weight: 400; }
+
+  .section__head { --section-rule: 3px; }
+
+  /* At ratio 1.5 step 4 is ~100px: heavy numerals that wide overrun a
+     four-column stats row, so they step down one. */
+  .stat__value { font-size: var(--step-3); }
+}

package/src/components/scroll-progress.css

@@ -1,104 +0,0 @@
-/**
- * Scroll Progress Indicator
- *
- * A thin bar showing page scroll position.
- * Position and animation direction matches the motion style.
- *
- * Usage: Add {% include scroll-progress.html %} to your layout
- *
- * Data attributes:
- *   data-position="top" | "bottom" | "left" | "right"
- *   data-hidden - Hide the indicator
- */
-
-@layer components {
-  .scroll-progress {
-    --_progress: 0;
-    --_size: 3px;
-
-    position: fixed;
-    z-index: var(--z-sticky);
-    background-color: var(--accent);
-    pointer-events: none;
-    opacity: 0.8;
-    transition: opacity var(--duration-normal) var(--ease-fluid);
-  }
-
-  /* Hide when at top of page or when disabled */
-  .scroll-progress[data-hidden],
-  .scroll-progress[data-progress="0"] {
-    opacity: 0;
-  }
-
-  /* Top position (default) - horizontal bar */
-  .scroll-progress,
-  .scroll-progress[data-position="top"] {
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    block-size: var(--_size);
-    inline-size: calc(var(--_progress) * 100%);
-  }
-
-  /* Bottom position - horizontal bar */
-  .scroll-progress[data-position="bottom"] {
-    inset-block-end: 0;
-    inset-block-start: auto;
-    inset-inline-start: 0;
-    block-size: var(--_size);
-    inline-size: calc(var(--_progress) * 100%);
-  }
-
-  /* Left position - vertical bar */
-  .scroll-progress[data-position="left"] {
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    inline-size: var(--_size);
-    block-size: calc(var(--_progress) * 100%);
-  }
-
-  /* Right position - vertical bar */
-  .scroll-progress[data-position="right"] {
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    inset-inline-start: auto;
-    inline-size: var(--_size);
-    block-size: calc(var(--_progress) * 100%);
-  }
-
-  /* Motion style adjustments */
-  /* Still: No progress bar by default */
-  [data-motion="still"] .scroll-progress {
-    display: none;
-  }
-
-  /* Serene/Stream: Very thin, subtle */
-  [data-motion="serene"] .scroll-progress,
-  [data-motion="stream"] .scroll-progress {
-    --_size: 2px;
-    opacity: 0.5;
-  }
-
-  /* Flowing: Standard */
-  [data-motion="flowing"] .scroll-progress {
-    --_size: 3px;
-  }
-
-  /* Cascade: Slightly thicker */
-  [data-motion="cascade"] .scroll-progress {
-    --_size: 4px;
-  }
-
-  /* Rapids/Tsunami: Bold */
-  [data-motion="rapids"] .scroll-progress,
-  [data-motion="tsunami"] .scroll-progress {
-    --_size: 5px;
-    opacity: 0.9;
-  }
-
-  /* Reduced motion: instant updates */
-  @media (prefers-reduced-motion: reduce) {
-    .scroll-progress {
-      transition: none;
-    }
-  }
-}