@riverbankcms/sdk 0.104.1 → 0.104.3

package/dist/styles/index.css

@@ -64,8 +64,12 @@
     text-transform: uppercase;
   }
 
-  /* Eyebrow text - small uppercase labels for section introductions */
+  /* Eyebrow text - small uppercase labels for section introductions.
+     font-family resolves to the optional eyebrow/mono font role, falling back
+     to the body font when the theme sets none (so existing themes are
+     unchanged). */
   .rb-eyebrow {
+    font-family: var(--font-eyebrow, var(--font-body));
     font-size: 0.875rem;
     font-weight: 600;
     letter-spacing: 0.025em;
@@ -80,11 +84,11 @@
     width: fit-content;
     align-items: center;
     justify-content: center;
-    border: 1px solid color-mix(in srgb, var(--section-text-color, rgb(var(--tb-text))) 46%, transparent);
+    border: 1px solid color-mix(in srgb, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 46%, transparent);
     border-radius: 9999px;
-    background: color-mix(in srgb, var(--section-text-color, rgb(var(--tb-text))) 14%, transparent);
+    background: color-mix(in srgb, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 14%, transparent);
     padding: 0.5rem 1rem;
-    color: var(--section-text-color, rgb(var(--tb-text)));
+    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
     line-height: 1;
   }
   .rb-eyebrow-treatment-pill.rb-eyebrow-treatment-accent {
@@ -576,6 +580,50 @@
     }
   }
 
+  /*
+   * Responsive fractional grid tracks (rb-grid-tracks).
+   *
+   * Asymmetric AND responsive grid-template-columns, driven by inline custom
+   * properties the Grid primitive sets per breakpoint from string track
+   * templates:
+   *   --rb-gtc-base / --rb-gtc-sm / --rb-gtc-md / --rb-gtc-lg / --rb-gtc-xl
+   * Each breakpoint falls back to the next smaller one, so only the breakpoints
+   * an author actually sets take effect (e.g. base '1fr' + lg '1fr 0.9fr'
+   * collapses to a single column below lg). Authored here (not per node) so the
+   * @media -> @container conversion (container responsive mode) applies too.
+   */
+  .rb-grid-tracks {
+    grid-template-columns: var(--rb-gtc-base, 1fr);
+  }
+  @media (min-width: 640px) {
+    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-grid-tracks {
+        grid-template-columns: var(--rb-gtc-sm, var(--rb-gtc-base, 1fr));
+      }
+    }
+  }
+  @media (min-width: 768px) {
+    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-grid-tracks {
+        grid-template-columns: var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr)));
+      }
+    }
+  }
+  @media (min-width: 1024px) {
+    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-grid-tracks {
+        grid-template-columns: var(--rb-gtc-lg, var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr))));
+      }
+    }
+  }
+  @media (min-width: 1280px) {
+    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-grid-tracks {
+        grid-template-columns: var(--rb-gtc-xl, var(--rb-gtc-lg, var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr)))));
+      }
+    }
+  }
+
   /* Alignment */
   .rb-items-start {
     align-items: flex-start;
@@ -1761,6 +1809,11 @@
   :where(.theme-scope) .rb-modal {
     width: min(var(--rb-modal-max-width, 560px), 100%);
     background: var(--rb-modal-bg, rgb(var(--tb-surface)));
+    color: var(--rb-modal-text, rgb(var(--tb-text, 17 24 39)));
+    --rb-surface-text-color: var(--rb-modal-text, rgb(var(--tb-text, 17 24 39)));
+    --rb-surface-heading-color: var(--rb-modal-heading, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));
+    --rb-surface-link-color: var(--rb-modal-link, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));
+    --rb-surface-supporting-color: var(--rb-modal-supporting, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));
     border: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));
     border-radius: var(--rb-modal-radius, var(--radius-card));
     box-shadow: var(--rb-modal-shadow, var(--shadow-lg, var(--shadow-elev)));
@@ -1780,7 +1833,7 @@
     font-family: var(--font-heading);
     font-size: 1.0625rem;
     font-weight: 600;
-    color: rgb(var(--tb-text));
+    color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))));
   }
 
   :where(.theme-scope) .rb-modal__close {
@@ -1790,7 +1843,7 @@
     height: 2.25rem;
     padding: 0;
     line-height: 1;
-    color: rgb(var(--tb-mutedText));
+    color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));
     cursor: pointer;
     display: grid;
     place-items: center;
@@ -1798,7 +1851,7 @@
   }
 
   :where(.theme-scope) .rb-modal__close:hover {
-    color: rgb(var(--tb-text));
+    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
     background: rgba(var(--tb-border), 0.2);
   }
 
@@ -1809,7 +1862,7 @@
 
   :where(.theme-scope) .rb-modal__body {
     padding: 0.875rem 1rem 1rem;
-    color: rgb(var(--tb-text));
+    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
     font-size: 0.9375rem;
     line-height: 1.45;
   }
@@ -1969,7 +2022,7 @@
     & h6 {
       font-family: var(--font-heading);
       /* Color is set by generateTypographyCss.ts with full cascade:
-       --section-heading-color -> --section-text-color -> --hc-hN -> --hc-heading -> inherit */
+       --rb-surface-heading-color -> --rb-surface-text-color -> --hc-hN -> --hc-heading -> global text */
       font-weight: var(--font-weight-heading);
       text-transform: var(--tt-heading);
       font-variant-caps: var(--fv-heading);
@@ -2115,7 +2168,7 @@
 
   /* Neutral prose uses theme text color by default */
   :where(.theme-scope) .rb-prose-neutral {
-    color: var(--section-text-color, rgb(var(--tb-text)));
+    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
   }
 
   :where(.theme-scope) .rb-prose p,
@@ -2149,8 +2202,14 @@
 
   :where(.theme-scope) .rb-prose a {
     --rb-prose-effective-link-color: var(
-      --section-link-color,
-      var(--rb-prose-link-color, rgb(var(--tb-primary)))
+      --rb-surface-link-color,
+      var(
+        --rb-surface-text-color,
+        var(
+          --rb-prose-link-color,
+          rgb(var(--tb-primary, var(--tb-text, 17 24 39)))
+        )
+      )
     );
     color: var(--rb-prose-effective-link-color);
     text-decoration-line: var(--rb-prose-link-decoration-line, underline);
@@ -2161,14 +2220,11 @@
     );
     text-underline-offset: var(--rb-prose-link-underline-offset, 0.14em);
     text-decoration-color: var(
-      --section-link-decoration-color,
-      var(
-        --rb-prose-link-decoration-color,
-        color-mix(
-          in srgb,
-          var(--rb-prose-effective-link-color) 35%,
-          transparent
-        )
+      --rb-prose-link-decoration-color,
+      color-mix(
+        in srgb,
+        var(--rb-prose-effective-link-color) 35%,
+        transparent
       )
     );
     transition:
@@ -2192,7 +2248,7 @@
 
   :where(.theme-scope) .rb-prose blockquote {
     /* Blockquotes use muted text color */
-    color: var(--section-supporting-color, rgb(var(--tb-mutedText)));
+    color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));
     border-left-color: rgb(var(--tb-border));
   }
 
@@ -3216,6 +3272,10 @@
   :where(.theme-scope) .card-surface {
     background: rgb(var(--tb-surface));
     color: rgb(var(--tb-onSurface, var(--tb-text)));
+    --rb-surface-text-color: rgb(var(--tb-onSurface, var(--tb-text)));
+    --rb-surface-heading-color: rgb(var(--tb-onSurface, var(--tb-text)));
+    --rb-surface-link-color: rgb(var(--tb-onSurface, var(--tb-text)));
+    --rb-surface-supporting-color: rgb(var(--tb-onSurface, var(--tb-text)));
     border: 1px solid rgb(var(--tb-border));
     border-radius: var(--radius-card);
     box-shadow: var(--shadow-elev);
@@ -3353,6 +3413,10 @@
   padding: clamp(1rem, 2vw, 1.5rem);
   background: var(--rb-reg-surface-bg, rgb(var(--tb-surface, 248 250 252)));
   color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  --rb-surface-text-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  --rb-surface-heading-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  --rb-surface-link-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  --rb-surface-supporting-color: var(--rb-reg-on-surface-muted, var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)))));
   transition: border-color var(--rb-block-transition, 150ms) ease;
   width: 100%;
   max-width: 800px;
@@ -6425,6 +6489,344 @@
   }
 }
 
+/* -----------------------------------------------------------------------------
+ * Week Board View
+ * Compact "class day-board": day columns side by side, one card per class,
+ * three-state availability (available / filling / waitlist), and a footer CTA.
+ * ----------------------------------------------------------------------------- */
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board {
+  /* Status accent tokens — map the three availability states onto theme colours.
+   * available -> secondary, filling -> accent, waitlist -> muted text. */
+  --ec-status-available: rgb(var(--tb-secondary));
+  --ec-status-filling: rgb(var(--tb-accent));
+  --ec-status-waitlist: rgba(var(--tb-text), 0.4);
+  --event-week-board-cols: 7;
+
+  border: 1px solid var(--ec-border);
+  border-radius: var(--rb-block-radius);
+  background-color: var(--ec-surface);
+  color: var(--ec-text);
+  overflow: hidden;
+  box-shadow: 0 14px 34px -24px rgba(var(--tb-text), 0.35);
+}
+
+/* Top bar: title + legend */
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 1.1rem 1.5rem;
+  background-color: var(--ec-header-bg);
+  border-bottom: 1px solid var(--ec-border-subtle);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: rgb(var(--tb-primary));
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend {
+  display: flex;
+  align-items: center;
+  gap: 1.1rem;
+  flex-wrap: wrap;
+  font-size: 0.6875rem;
+  letter-spacing: 0.03em;
+  opacity: 0.75;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend-dot {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend-dot[data-status="available"] {
+  background-color: var(--ec-status-available);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend-dot[data-status="filling"] {
+  background-color: var(--ec-status-filling);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend-dot[data-status="waitlist"] {
+  background-color: var(--ec-status-waitlist);
+}
+
+/* Day columns grid */
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--event-week-board-cols), minmax(0, 1fr));
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day {
+  display: flex;
+  flex-direction: column;
+  min-height: 15rem;
+  /* Tabular column rule. Driven by the theme border tokens so borderless site
+   * styles (border.width: 'none' -> --rb-border-width: 0) render no grid at all,
+   * while hairline/thin/thick themes get a crisp full-strength divider. */
+  border-right: var(--rb-border-width, 1px) solid rgb(var(--tb-border));
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day:last-child {
+  border-right: none;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  padding: 0.9rem 0.9rem 0.65rem;
+  /* Header-row underline — same border-token gating as the column rules. */
+  border-bottom: var(--rb-border-width, 1px) solid rgb(var(--tb-border));
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day--today .event-week-board-day-head {
+  background-color: var(--ec-today-bg);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-abbr {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  opacity: 0.65;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day--today .event-week-board-day-abbr {
+  opacity: 1;
+  color: var(--ec-today-text);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-num {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  opacity: 0.5;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  padding: 0.9rem;
+  flex: 1;
+}
+
+/* Class card */
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  padding: 0.8rem 0.85rem;
+  border: 1px solid var(--ec-border-subtle);
+  border-left: 3px solid var(--ec-status-available);
+  border-radius: calc(var(--rb-block-radius) / 1.5);
+  background-color: var(--ec-surface);
+  color: inherit;
+  text-decoration: none;
+  transition:
+    transform var(--rb-block-transition) ease,
+    box-shadow var(--rb-block-transition) ease,
+    border-color var(--rb-block-transition) ease;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card[data-status="filling"] {
+  border-left-color: var(--ec-status-filling);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card[data-status="waitlist"] {
+  border-left-color: var(--ec-status-waitlist);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px -8px rgba(var(--tb-text), 0.28);
+  border-color: rgba(var(--tb-primary), 0.4);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card:focus-visible {
+  outline: 2px solid rgb(var(--tb-primary));
+  outline-offset: 2px;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card-title {
+  font-family: var(--font-heading, inherit);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card-time {
+  font-size: 0.75rem;
+  letter-spacing: 0.01em;
+  opacity: 0.7;
+}
+
+/* Capacity pill */
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card-pill {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.15rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  /* Available (default): a calm neutral/muted pill — not a coloured outline.
+   * Filling -> amber and waitlist -> muted outline are handled by the
+   * data-status overrides below. */
+  border: 1px solid var(--ec-border);
+  background-color: rgba(var(--tb-text), 0.06);
+  color: rgba(var(--tb-text), 0.62);
+  border-color: var(--ec-border);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card-pill[data-status="filling"] {
+  background-color: rgba(var(--tb-accent), 0.14);
+  color: var(--ec-status-filling);
+  border-color: rgba(var(--tb-accent), 0.32);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card-pill[data-status="waitlist"] {
+  background-color: transparent;
+  color: rgba(var(--tb-text), 0.6);
+  border-color: var(--ec-border);
+}
+
+/* Footer */
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 1.1rem 1.5rem;
+  background-color: var(--ec-header-bg);
+  border-top: 1px solid var(--ec-border-subtle);
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-foot-note {
+  margin: 0;
+  font-size: 0.875rem;
+  opacity: 0.75;
+}
+
+/* Responsive: collapse day columns to a stacked list on narrow viewports */
+@media (max-width: 1023px) {
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-grid {
+    grid-template-columns: 1fr;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day {
+    min-height: 0;
+    border-right: none;
+    border-bottom: var(--rb-border-width, 1px) solid rgb(var(--tb-border));
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day:last-child {
+    border-bottom: none;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day--empty {
+    display: none;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-head {
+    border-bottom: none;
+    padding-bottom: 0.25rem;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-day-body {
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding-top: 0.35rem;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card {
+    flex: 1 1 14rem;
+  }
+}
+
+@media (max-width: 639px) {
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-legend {
+    display: none;
+  }
+
+  :where(.theme-scope) :where([data-block="event-calendar"]) .event-week-board-card {
+    flex: 1 1 100%;
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Week-board section band
+ * Give the whole week-board section (head + panel) a subtle surface band so it
+ * reads as a distinct zone from the page — the "testimonials band" pattern.
+ * Painted as a pseudo-element above the section's fallback background layer
+ * (z-index -10) but behind the content, so no block-content wiring is needed.
+ * Surface + hairline rules are token-referenced: on a borderless site style
+ * (--rb-border-width: 0) the band keeps its surface tint but drops the rules.
+ * ----------------------------------------------------------------------------- */
+:where(.theme-scope) [data-slot="section"]:has(.event-calendar--week-board)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -9;
+  background-color: rgb(var(--tb-surfaceAlt));
+  border-block: var(--rb-border-width, 1px) solid rgb(var(--tb-border));
+  pointer-events: none;
+}
+
+/* -----------------------------------------------------------------------------
+ * Event section head — split (heading left, intro right)
+ * Rendered by the block frame (outside [data-block="event-calendar"]) via
+ * eventSectionHeaderLayoutNodes({ splitClassName }). Lays the heading and its
+ * supporting intro out as a two-column head on wide viewports, stacking on
+ * narrow ones. The section band above provides the distinct background.
+ * ----------------------------------------------------------------------------- */
+:where(.theme-scope) .event-section-head--split {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: clamp(1.5rem, 4vw, 3.5rem);
+  flex-wrap: wrap;
+}
+
+:where(.theme-scope) .event-section-head--split > :where(h1, h2, h3) {
+  margin: 0;
+}
+
+:where(.theme-scope) .event-section-head--split > .rb-prose {
+  flex: 1 1 22rem;
+  max-width: 34rem;
+  margin: 0;
+}
+
+@media (max-width: 767px) {
+  :where(.theme-scope) .event-section-head--split {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  :where(.theme-scope) .event-section-head--split > .rb-prose {
+    flex-basis: auto;
+  }
+}
+
 /* -----------------------------------------------------------------------------
  * Event Calendar Modals
  * Modal overlays for event details and day events list
@@ -6854,7 +7256,7 @@
 }
 
 :where(.theme-scope) .rb-inline-text-accent-contrast {
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
 }
 
 :where(.theme-scope) .rb-inline-text-highlight {
@@ -6865,7 +7267,7 @@
 }
 
 :where(.theme-scope) .rb-inline-text-highlight-soft {
-  background: color-mix(in oklab, var(--section-text-color, rgb(var(--tb-text))) 14%, transparent);
+  background: color-mix(in oklab, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 14%, transparent);
 }
 
 :where(.theme-scope) .rb-inline-text-highlight-accent {
@@ -6886,7 +7288,7 @@
 
 /* Eyebrow - color only (typography via .rb-eyebrow) */
 :where(.theme-scope) :where([data-block="hero"]) .hero-eyebrow:not(.rb-eyebrow-treatment-accent) {
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
 }
 
 /* Subheadline - supporting text below headline */
@@ -6896,7 +7298,7 @@
 
 :where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
   font-size: 1.125rem;
-  color: var(--section-supporting-color, var(--section-text-color, rgb(var(--tb-text))));
+  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));
 }
 
 @media (min-width: 640px) {
@@ -6985,7 +7387,7 @@
 
 /* CTA content/body text */
 :where(.theme-scope) :where([data-block="cta-full"]) .cta-content {
-  color: var(--section-supporting-color, rgb(var(--tb-mutedText)));
+  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));
 }
 
 /* CTA button row container */
@@ -7087,7 +7489,7 @@
 /* Form intro text */
 :where(.theme-scope) :where([data-block="form"]) .form-copy-intro {
   font-size: 1rem;
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
 }
 
 /* =============================================================================
@@ -7448,6 +7850,10 @@
   --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);
   --rb-modal-shadow: var(--shadow-lg, var(--shadow-elev));
   --rb-modal-z-index: 20000;
+  --rb-modal-text: rgb(var(--tb-text, 17 24 39));
+  --rb-modal-heading: rgb(var(--tb-text, 17 24 39));
+  --rb-modal-link: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));
+  --rb-modal-supporting: rgb(var(--tb-mutedText, 100 116 139));
   --shop-card-radius: var(--rb-block-radius, var(--radius-card, 0.75rem));
   --shop-control-radius: var(--rb-input-radius, var(--radius-control, 0.375rem));
 }
@@ -7505,6 +7911,11 @@
 /* Product card */
 :where(.theme-scope) .shop__card {
   background: rgb(var(--tb-surface));
+  color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-text-color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-heading-color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-link-color: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));
+  --rb-surface-supporting-color: rgb(var(--tb-mutedText, 100 116 139));
   border: 1px solid rgb(var(--tb-border));
   border-radius: var(--shop-card-radius);
   padding: 1.5rem;
@@ -7657,6 +8068,11 @@
   border: 1px solid rgb(var(--tb-border));
   border-radius: var(--shop-card-radius);
   background: rgb(var(--tb-surface));
+  color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-text-color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-heading-color: rgb(var(--tb-text, 17 24 39));
+  --rb-surface-link-color: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));
+  --rb-surface-supporting-color: rgb(var(--tb-mutedText, 100 116 139));
 }
 
 :where(.theme-scope) :where([data-block="shop"]) .rb-state-icon--success {
@@ -7729,6 +8145,11 @@
   margin: 0 auto;
   padding: 2rem;
   background: var(--cp-card-bg);
+  color: var(--cp-text);
+  --rb-surface-text-color: var(--cp-text);
+  --rb-surface-heading-color: var(--cp-text);
+  --rb-surface-link-color: var(--cp-primary);
+  --rb-surface-supporting-color: var(--cp-muted);
   border: 1px solid var(--cp-card-border);
   border-radius: var(--cp-card-radius);
 }
@@ -7857,6 +8278,11 @@
   padding: 3rem 2rem;
   text-align: center;
   background: var(--cp-card-bg);
+  color: var(--cp-text);
+  --rb-surface-text-color: var(--cp-text);
+  --rb-surface-heading-color: var(--cp-text);
+  --rb-surface-link-color: var(--cp-primary);
+  --rb-surface-supporting-color: var(--cp-muted);
   border: 1px dashed var(--cp-card-border);
   border-radius: var(--cp-card-radius);
 }
@@ -7869,6 +8295,11 @@
 /* Card */
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-card {
   background: var(--cp-card-bg);
+  color: var(--cp-text);
+  --rb-surface-text-color: var(--cp-text);
+  --rb-surface-heading-color: var(--cp-text);
+  --rb-surface-link-color: var(--cp-primary);
+  --rb-surface-supporting-color: var(--cp-muted);
   border: 1px solid var(--cp-card-border);
   border-radius: var(--cp-card-radius);
   padding: 1.25rem;
@@ -8033,6 +8464,11 @@
 /* Table */
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-table-wrap {
   background: var(--cp-card-bg);
+  color: var(--cp-text);
+  --rb-surface-text-color: var(--cp-text);
+  --rb-surface-heading-color: var(--cp-text);
+  --rb-surface-link-color: var(--cp-primary);
+  --rb-surface-supporting-color: var(--cp-muted);
   border: 1px solid var(--cp-card-border);
   border-radius: var(--cp-card-radius);
 }
@@ -8594,6 +9030,139 @@
 }
 
 
+/* =============================================================================
+ * Variant: featured-editorial
+ *
+ * An asymmetric layout: a large featured (spruce-ink) quote card beside a
+ * column of stacked white cards. Renders NO avatars. Colours are palette
+ * tokens only. Node structure is built in testimonialsCarousel.ts.
+ * ============================================================================= */
+
+/* Section head: heading left, lead-in line to the right; stacks on mobile. */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-head {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.875rem;
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-leadin {
+  max-width: 30rem;
+}
+
+@media (min-width: 768px) {
+  :where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-head {
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 1.5rem;
+  }
+}
+
+/* Card grid: featured (wider) beside the stacked column. Single column on
+ * small screens. */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1.25rem;
+  align-items: stretch;
+}
+
+@media (min-width: 1024px) {
+  :where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-grid {
+    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
+  }
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-col {
+  display: grid;
+  gap: 1.25rem;
+  align-content: start;
+}
+
+/* Base card (white surface) */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-radius: var(--rb-block-radius);
+  padding: 1.875rem 1.875rem 1.625rem;
+  background: rgb(var(--tb-surface));
+  border: 1px solid rgba(var(--tb-border), 0.9);
+  box-shadow: 0 1px 2px rgba(var(--tb-shadow, 0 0 0), 0.05);
+}
+
+/* Featured (spruce-ink) card */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-card--feature {
+  padding: 2.5rem;
+  background: rgb(var(--tb-primary));
+  border-color: transparent;
+  color: rgb(var(--tb-onPrimary));
+}
+
+/* Amber quote mark, oversized serif */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-qmark {
+  display: block;
+  height: 1.6rem;
+  font-family: var(--font-heading, Georgia, serif);
+  font-style: italic;
+  font-size: 3.375rem;
+  line-height: 0.6;
+  color: rgb(var(--tb-secondary));
+}
+
+/* Quote body. The inner <p> is targeted directly (not via :where) so the
+ * serif display font and sizing win over the theme's base paragraph rule. */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-quote {
+  flex: 1 1 auto;
+  margin-top: 1.25rem;
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-quote p {
+  margin: 0;
+  font-family: var(--font-heading, Georgia, serif);
+  font-size: 1.15rem;
+  line-height: 1.5;
+  color: rgb(var(--tb-text));
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-card--feature .rb-testimonials-fe-quote p {
+  color: rgb(var(--tb-onPrimary));
+  font-size: clamp(1.375rem, 2.4vw, 1.6875rem);
+  line-height: 1.42;
+  letter-spacing: -0.01em;
+}
+
+/* Attribution: name (bold) + context line, no avatar */
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 1.625rem;
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-name {
+  font-weight: 600;
+  font-size: 0.97rem;
+  color: rgb(var(--tb-text));
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-context {
+  font-size: 0.78rem;
+  letter-spacing: 0.02em;
+  color: rgb(var(--tb-mutedText));
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-card--feature .rb-testimonials-fe-name {
+  color: rgb(var(--tb-onPrimary));
+}
+
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-fe-card--feature .rb-testimonials-fe-context {
+  color: rgb(var(--tb-onPrimary));
+  opacity: 0.7;
+}
+
+
 /* Testimonials carousel tweaks: arrow styling + gutters + equal-height cards */
 :where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn {
   height: var(--rb-testimonial-carousel-arrow-size);
@@ -9737,7 +10306,7 @@
 
 :where(.theme-scope) :where([data-block="newsletter-signup"]) .newsletter-copy-subtitle {
   font-size: 1rem;
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
   opacity: 0.85;
 }
 
@@ -9786,7 +10355,7 @@
   margin-top: 0.75rem;
   font-size: 1rem;
   line-height: 1.6;
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
   text-align: center;
 }
 
@@ -9867,7 +10436,7 @@
 
 :where(.theme-scope) :where([data-block="contact-newsletter"]) .form-copy-intro,
 :where(.theme-scope) :where([data-block="contact-newsletter"]) .newsletter-copy-subtitle {
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
 }
 
 :where(.theme-scope) :where([data-block="contact-newsletter"]) .contact-newsletter-info {
@@ -10264,7 +10833,7 @@
 
 :where(.theme-scope) .event-compact-row-title {
   margin: 0;
-  color: var(--section-heading-color, rgb(var(--tb-primary, 0 0 0)));
+  color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-primary, var(--tb-text, 17 24 39)))));
   font-family: var(--font-heading, var(--font-body, inherit));
   font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
   font-weight: 400;
@@ -10930,27 +11499,41 @@
   background: rgb(var(--tb-surface));
 }
 :where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 1) {
+  background: rgb(var(--tb-surface));
   color: rgb(var(--tb-onSurface));
+  --rb-surface-text-color: rgb(var(--tb-onSurface));
+  --rb-surface-heading-color: rgb(var(--tb-onSurface));
+  --rb-surface-link-color: rgb(var(--tb-onSurface));
+  --rb-surface-supporting-color: rgb(var(--tb-onSurface));
 }
 
 :where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) > .rb-bg-surface {
   background: rgb(var(--tb-secondary));
 }
 :where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) {
+  background: rgb(var(--tb-secondary));
   color: rgb(var(--tb-onSecondary));
+  --rb-surface-text-color: rgb(var(--tb-onSecondary));
+  --rb-surface-heading-color: rgb(var(--tb-onSecondary));
+  --rb-surface-link-color: rgb(var(--tb-onSecondary));
+  --rb-surface-supporting-color: rgb(var(--tb-onSecondary));
 }
 
 :where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) > .rb-bg-surface {
   background: rgb(var(--tb-primary));
 }
 :where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) {
+  background: rgb(var(--tb-primary));
   color: rgb(var(--tb-onPrimary));
+  --rb-surface-text-color: rgb(var(--tb-onPrimary));
+  --rb-surface-heading-color: rgb(var(--tb-onPrimary));
+  --rb-surface-link-color: rgb(var(--tb-onPrimary));
+  --rb-surface-supporting-color: rgb(var(--tb-onPrimary));
 }
 
-/* Body copy carries an inline muted colour from the block; force it to the
- * card's on-colour so it reads on every block (inline style needs !important). */
+/* Keep the intended visual hierarchy; the body color itself now resolves via
+ * the nearest surface provider instead of requiring an inline override. */
 :where(.theme-scope) .rb-card-treatment-color-blocked .rb-feature-card-body {
-  color: inherit !important;
   opacity: 0.9;
 }