@fluid-theme/core 0.4.3 → 2.1.0

package/src/sections/footer.css

@@ -64,108 +64,86 @@
 
   /* ========================================
      BASE FOOTER
+     Its own grammar, not another tinted band: the page colour under a
+     thick ink rule (a tinted section above it no longer runs into it),
+     the brand in the heading face like the nav's. Content on the
+     .container edges. Links in the text colour, no underline at rest;
+     hover and aria-current underline them.
      ======================================== */
 
   .site-footer {
-    --_footer-bg: var(--color-surface);
-    --_footer-text: var(--color-text-muted);
-    --_footer-border: var(--color-border-subtle);
-    --_footer-padding: var(--space-10);
+    --_footer-border: var(--color-border);
+    --_footer-padding: var(--space-xl);
 
-    background-color: var(--_footer-bg);
-    color: var(--_footer-text);
+    background-color: var(--_footer-bg, var(--color-background));
+    color: var(--color-text-muted);
     padding-block: var(--_footer-padding);
-    padding-inline: var(--space-5);
-    border-block-start: var(--border-width) solid var(--_footer-border);
+    padding-inline: max(var(--page-edge), (100% - var(--container-content)) / 2);
+    border-block-start: var(--border-width-thick) solid var(--_footer-rule, var(--color-border-strong));
+    font-size: var(--step--1);
   }
 
-  .site-footer a {
-    color: var(--_footer-text);
-    text-decoration: none;
-    transition: color var(--duration-fast) var(--ease-fluid);
+  .site-footer :is(nav:not(.nav), .site-footer__links) a { color: var(--color-text); }
+
+  .site-footer a:not(.nav *) {
+    color: inherit;
+    text-decoration-line: none;
   }
 
-  .site-footer a:hover {
+  .site-footer a:not(.nav *):is(:hover, [aria-current]) {
     color: var(--color-text);
+    text-decoration-line: underline;
   }
 
   .site-footer a:focus-visible {
-    outline: 2px solid var(--color-focus);
+    outline: var(--focus-ring-width) solid var(--color-focus);
     outline-offset: 2px;
-    border-radius: var(--radius-sm);
   }
 
-
-  /* ========================================
-     SIMPLE (default)
-     Copyright + horizontal links
-     ======================================== */
-
+  /* Simple (default): copyright + a row of links */
   .site-footer__inner {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
-    gap: var(--space-4);
-    max-inline-size: var(--container-xl);
-    margin-inline: auto;
+    gap: var(--space-s) var(--space-m);
   }
 
-  .site-footer__copyright {
-    font-size: var(--font-size-sm);
-    margin: 0;
-  }
+  .site-footer__copyright { margin: 0; }
 
   .site-footer:not([data-type]) .site-footer__links {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--space-5);
-    font-size: var(--font-size-sm);
+    gap: var(--space-s) var(--space-m);
   }
 
-
-  /* ========================================
-     STANDARD
-     Multi-column grid with bottom bar
-     ======================================== */
-
-  .site-footer[data-type="standard"],
-  .site-footer[data-type="mega"] {
-    --_footer-padding: var(--space-16);
-  }
+  /* Standard and mega: columns over a bottom bar */
+  .site-footer:is([data-type="standard"], [data-type="mega"]) { --_footer-padding: var(--space-2xl) var(--space-xl); }
 
   .site-footer__grid {
     display: grid;
-    gap: var(--space-8);
-    grid-template-columns: repeat(
-      auto-fit,
-      minmax(min(100%, 12rem), 1fr)
-    );
-    max-inline-size: var(--container-xl);
-    margin-inline: auto;
+    gap: var(--space-l) var(--space-m);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
   }
 
   .site-footer__column {
     display: flex;
     flex-direction: column;
-    gap: var(--space-3);
+    gap: var(--space-s);
   }
 
   .site-footer__title {
-    font-size: var(--font-size-sm);
-    font-weight: var(--weight-semibold, 600);
-    color: var(--color-text);
+    font: calc(600 + var(--_dark-weight)) var(--step--2) / 1.2 var(--font-body);
     text-transform: uppercase;
-    letter-spacing: var(--tracking-wider);
+    letter-spacing: var(--tracking-caps);
+    color: var(--color-text);
     margin: 0;
-    margin-block-end: var(--space-2);
   }
 
   .site-footer__column .site-footer__links {
     display: flex;
     flex-direction: column;
-    gap: var(--space-2);
-    font-size: var(--font-size-sm);
+    gap: var(--space-xs);
   }
 
   .site-footer__bottom {
@@ -173,71 +151,42 @@
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
-    gap: var(--space-4);
-    max-inline-size: var(--container-xl);
-    margin-inline: auto;
-    margin-block-start: var(--space-10);
-    padding-block-start: var(--space-6);
+    gap: var(--space-s) var(--space-m);
+    margin-block-start: var(--space-xl);
+    padding-block-start: var(--space-m);
     border-block-start: var(--border-width) solid var(--_footer-border);
-    font-size: var(--font-size-sm);
-  }
-
-
-  /* ========================================
-     MEGA FOOTER
-     Brand section + columns + bottom bar
-     ======================================== */
-
-  .site-footer__brand {
-    max-inline-size: 20rem;
-    margin-inline: auto;
-    margin-block-end: var(--space-10);
   }
 
-  .site-footer[data-type="mega"] .site-footer__brand {
-    max-inline-size: var(--container-xl);
-    margin-inline: auto;
-    margin-block-end: var(--space-10);
-  }
+  .site-footer__brand:not(.site-footer__column) { margin-block-end: var(--space-xl); }
 
-  .site-footer__brand h2 {
-    font-size: var(--font-size-xl);
-    font-weight: var(--weight-bold);
+  /* The brand, as the nav sets it (a column can be the brand too:
+     <div class="site-footer__column site-footer__brand">). */
+  .site-footer__brand :is(h2, .site-footer__title) {
+    font: calc(500 + var(--_dark-weight)) var(--step-1) / 1.2 var(--font-heading);
+    text-transform: none;
+    letter-spacing: var(--tracking-heading);
     color: var(--color-text);
-    margin: 0;
-    margin-block-end: var(--space-2);
+    margin: 0; margin-block-end: var(--space-xs);
   }
 
   .site-footer__brand p {
-    font-size: var(--font-size-sm);
     color: var(--color-text-muted);
-    margin: 0;
-    margin-block-end: var(--space-4);
-    max-inline-size: 20rem;
+    margin: 0; margin-block-end: var(--space-s);
+    max-inline-size: 28rem;
   }
 
   .site-footer__social {
     display: flex;
-    gap: var(--space-3);
+    gap: var(--space-1);
+    margin-inline-start: -0.75rem;
   }
 
   .site-footer__social a {
     display: flex;
     align-items: center;
     justify-content: center;
-    inline-size: 2.25rem;
-    block-size: 2.25rem;
-    border-radius: var(--radius-full);
-    color: var(--color-text-muted);
-    background-color: color-mix(in oklch, var(--color-text) 8%, transparent);
-    transition:
-      color var(--duration-fast) var(--ease-fluid),
-      background-color var(--duration-fast) var(--ease-fluid);
-  }
-
-  .site-footer__social a:hover {
-    color: var(--white);
-    background-color: var(--accent);
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
   }
 
   .site-footer__social svg {
@@ -245,39 +194,9 @@
     block-size: 1.125rem;
   }
 
-
-  /* ========================================
-     DARK VARIANT
-     Darker background for contrast with page
-     ======================================== */
-
+  /* Dark: a dark band. Its roles re-resolve dark (tokens.css role scope). */
   .site-footer[data-dark] {
-    --_footer-bg: var(--theme-dark, var(--gray-15));
-    --_footer-text: var(--gray-60);
-    --_footer-border: var(--gray-20);
-  }
-
-  .site-footer[data-dark] a:hover {
-    color: var(--white);
-  }
-
-  .site-footer[data-dark] .site-footer__title {
-    color: var(--gray-80);
-  }
-
-  .site-footer[data-dark] .site-footer__brand h2 {
-    color: var(--white);
-  }
-
-
-  /* ========================================
-     ACCESSIBILITY
-     ======================================== */
-
-  @media (prefers-reduced-motion: reduce) {
-    .site-footer a,
-    .site-footer__social a {
-      transition: none;
-    }
+    --_footer-bg: var(--band-inverse);
+    --_footer-rule: transparent;
   }
 }

package/src/sections/stats.css

@@ -32,203 +32,90 @@
  */
 
 @layer components {
+  /* The band's padding and edges, and the header (a section head), are in
+     src/fluid.css (layouts). */
 
-  /* ========================================
-     BASE STATS SECTION
-     ======================================== */
-
-  .stats {
-    padding-block: var(--space-16);
-    padding-inline: var(--space-5);
-    max-inline-size: var(--container-xl);
-    margin-inline: auto;
-  }
-
-  .stats__header {
-    text-align: center;
-    max-inline-size: var(--container-md);
-    margin-inline: auto;
-    margin-block-end: var(--space-12);
-  }
-
-  .stats__header h2 {
-    font-size: var(--font-size-3xl);
-    font-weight: var(--weight-bold);
-    color: var(--color-text);
-    margin-block-end: var(--space-3);
-  }
-
-  .stats__header p {
-    font-size: var(--font-size-lg);
-    color: var(--color-text-muted);
-  }
-
-
-  /* ========================================
-     STATS GRID
-     ======================================== */
+  .stats__header p:not(.eyebrow, .lede) { color: var(--color-text-muted); }   /* the label voice owns the eyebrow's colour */
 
   .stats__grid {
     display: grid;
-    gap: var(--space-6);
-    grid-template-columns: repeat(
-      auto-fit,
-      minmax(min(100%, 10rem), 1fr)
-    );
+    gap: var(--space-l) var(--space-m);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
     margin: 0;
     padding: 0;
   }
 
 
   /* ========================================
-     INDIVIDUAL STAT
+     STAT: a serif numeral under a 2px ink rule, the label beneath. No tile.
      ======================================== */
 
   .stat {
-    --_stat-padding: var(--space-6);
-    --_stat-bg: var(--color-surface);
-    --_stat-border: var(--color-border-subtle);
-    --_stat-radius: var(--radius-lg);
-
     display: flex;
     flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: var(--space-2);
-    padding: var(--_stat-padding);
-    background-color: var(--_stat-bg);
-    border: var(--border-width) solid var(--_stat-border);
-    border-radius: var(--_stat-radius);
+    gap: var(--space-xs);
+    padding-block-start: var(--space-s);
+    border-block-start: var(--border-width-thick) solid var(--_stat-border, var(--color-border-strong));
   }
 
   .stat__value {
-    font-size: var(--font-size-4xl);
-    font-weight: var(--weight-bold);
-    color: var(--accent);
-    line-height: 1.1;
+    order: -1;
+    font-family: var(--font-heading);
+    font-size: var(--step-4);
+    font-weight: calc(var(--weight-display) + var(--_dark-weight));
+    line-height: 1;
+    letter-spacing: var(--tracking-heading);
+    font-variant-numeric: lining-nums tabular-nums;
+    color: var(--color-text);
     margin: 0;
   }
 
   .stat__label {
-    font-size: var(--font-size-sm);
+    font-size: var(--step--1);
+    font-weight: 500;
     color: var(--color-text-muted);
-    font-weight: var(--weight-medium, 500);
   }
 
   .stat__icon {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--accent);
-    font-size: var(--font-size-xl);
-    margin-block-end: var(--space-2);
+    color: var(--accent-ink);
+    margin-block-end: var(--space-xs);
   }
 
   .stat__icon svg {
-    inline-size: 1.5em;
-    block-size: 1.5em;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
     stroke: currentColor;
-    stroke-width: 2;
-  }
-
-
-  /* ========================================
-     BORDERLESS VARIANT
-     Minimal stat blocks without cards
-     ======================================== */
-
-  .stats[data-variant="borderless"] .stat {
-    --_stat-bg: transparent;
-    --_stat-border: transparent;
+    stroke-width: 1.5;
   }
 
-  .stats[data-variant="borderless"] .stat__value {
-    font-size: var(--font-size-5xl);
-  }
-
-
-  /* ========================================
-     DIVIDER VARIANT
-     Stats separated by vertical lines
-     ======================================== */
-
-  .stats[data-variant="divider"] .stats__grid {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 0;
-  }
+  /* Borderless: no rule, a larger numeral. */
+  .stats[data-variant="borderless"] .stat { --_stat-border: transparent; }
+  .stats[data-variant="borderless"] .stat__value { font-size: var(--step-5); }
 
+  /* Divider: hairlines between the stats instead of rules above them. */
   .stats[data-variant="divider"] .stat {
-    --_stat-bg: transparent;
-    --_stat-border: transparent;
-    border-radius: 0;
-    padding-inline: var(--space-8);
-    border-inline-end: var(--border-width) solid var(--color-border-subtle);
-  }
-
-  .stats[data-variant="divider"] .stat:last-child {
-    border-inline-end: none;
+    border-block-start: 0;
+    padding-block-start: 0;
+    padding-inline-end: var(--space-m);
+    border-inline-end: var(--border-width) solid var(--color-border);
   }
 
-  @media (max-width: 40rem) {
-    .stats[data-variant="divider"] .stat {
-      border-inline-end: none;
-      border-block-end: var(--border-width) solid var(--color-border-subtle);
-      padding-inline: var(--space-6);
-      padding-block: var(--space-4);
-    }
-
-    .stats[data-variant="divider"] .stat:last-child {
-      border-block-end: none;
-    }
-  }
+  .stats[data-variant="divider"] .stat:last-child { border-inline-end: 0; }
 
 
   /* ========================================
-     COUNT-UP ANIMATION
-     Plays once when section enters viewport
+     ENTRANCE (opt-in: data-animate). A short rise and fade, once.
      ======================================== */
 
   @keyframes stat-fade-up {
-    from {
-      opacity: 0;
-      transform: translateY(1rem);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  .stats[data-animate] .stat {
-    animation: stat-fade-up var(--duration-slow) var(--ease-settle) both;
+    from { opacity: 0; translate: 0 12px; }
   }
 
-  .stats[data-animate] .stat:nth-child(2) {
-    animation-delay: 100ms;
-  }
-
-  .stats[data-animate] .stat:nth-child(3) {
-    animation-delay: 200ms;
-  }
-
-  .stats[data-animate] .stat:nth-child(4) {
-    animation-delay: 300ms;
-  }
-
-  .stats[data-animate] .stat:nth-child(5) {
-    animation-delay: 400ms;
-  }
-
-
-  /* ========================================
-     ACCESSIBILITY
-     ======================================== */
-
-  @media (prefers-reduced-motion: reduce) {
-    .stats[data-animate] .stat {
-      animation: none;
-    }
+  @media (prefers-reduced-motion: no-preference) {
+    .stats[data-animate] .stat { animation: stat-fade-up var(--duration-slow) var(--ease-settle) both; }
+    .stats[data-animate] .stat:nth-child(2) { animation-delay: 100ms; }
+    .stats[data-animate] .stat:nth-child(3) { animation-delay: 200ms; }
+    .stats[data-animate] .stat:nth-child(4) { animation-delay: 300ms; }
   }
 }