ferst-core 0.4.0 → 0.4.2

package/components/CalendarEmbed.astro

@@ -84,20 +84,15 @@ const safe = isSafeEmbedUrl(finalEmbedUrl);
 
   const embeds = document.querySelectorAll<HTMLElement>('.b-calendar__embed');
 
-  // Best-effort theme blend: Google Calendar embeds expose only `bgcolor` (the
-  // surround), not a real dark mode — the grid stays Google's own light. We match
-  // the surround to the current theme surface so the frame doesn't sit as a hard
-  // block. Resolved from --bg-surface at load (a later theme toggle keeps it).
-  function themedCalendarUrl(url: string): string {
+  // Google Calendar embeds render light-only — `bgcolor` recolours just the
+  // surround, never the grid, so matching it to a dark surface still left a white
+  // calendar sitting in the dark page. Instead we force a deterministic WHITE
+  // surround here (independent of the theme at load) and, in dark mode, invert the
+  // whole frame in CSS (below). The invert is keyed on the site's [data-theme], so
+  // it also flips live when the visitor toggles the theme.
+  function calendarUrl(url: string): string {
     if (!/google\.com\/calendar|calendar\.google\.com/.test(url)) return url;
-    const probe = document.createElement('span');
-    probe.style.cssText = 'display:none;background:var(--bg-surface)';
-    document.body.appendChild(probe);
-    const m = getComputedStyle(probe).backgroundColor.match(/\d+/g);
-    probe.remove();
-    if (!m) return url;
-    const hex = m.slice(0, 3).map((n) => (+n).toString(16).padStart(2, '0')).join('');
-    return url + (url.includes('?') ? '&' : '?') + 'bgcolor=%23' + hex;
+    return url + (url.includes('?') ? '&' : '?') + 'bgcolor=%23ffffff';
   }
 
   function load(el: HTMLElement) {
@@ -106,7 +101,7 @@ const safe = isSafeEmbedUrl(finalEmbedUrl);
     const frameSlot = el.querySelector<HTMLElement>('.b-calendar__frame');
     if (!url || !frameSlot) return;
     const frame = document.createElement('iframe');
-    frame.src = themedCalendarUrl(url);
+    frame.src = calendarUrl(url);
     frame.title = el.dataset.title || 'Calendar';
     frame.loading = 'lazy';
     frame.style.width = '100%';
@@ -151,7 +146,13 @@ const safe = isSafeEmbedUrl(finalEmbedUrl);
     display: block;
     border: var(--card-border);
     border-radius: var(--radius);
-    background: var(--bg-surface);
+    background: #fff;
+  }
+  /* Google Calendar is light-only; in dark mode invert the frame so it reads as a
+     dark calendar (hue-rotate keeps event colours roughly true). Keyed on the
+     site's [data-theme] so it also flips live on a theme toggle. */
+  :global([data-theme='dark']) .b-calendar__frame :global(iframe) {
+    filter: invert(1) hue-rotate(180deg);
   }
   /* Consent card stands in for the calendar until the visitor opts in. */
   .b-calendar__consent {

package/components/CookieBanner.astro

@@ -48,6 +48,16 @@ const { policyHref = '/cookie-policy/' } = Astro.props;
 </script>
 
 <style is:global>
+  /* `display: flex` below is an author rule and would beat the UA `[hidden] {
+     display: none }`, so the banner would stay in the layout while dismissed (or
+     for returning visitors, where it starts hidden) — an invisible opacity:0
+     fixed bar that still INTERCEPTS pointer events over whatever sits at the
+     viewport bottom (e.g. the footer's later links). This explicit rule makes
+     `hidden` truly remove it. Must come before `.cookie-banner` so specificity,
+     not order, decides — (0,1,1) beats (0,1,0). */
+  .cookie-banner[hidden] {
+    display: none;
+  }
   .cookie-banner {
     position: fixed;
     left: 20px;

package/components/SiteFooter.astro

@@ -190,11 +190,17 @@ const year = new Date().getFullYear();
     text-align: center;
     gap: 0.6rem 1.5rem;
   }
+  /* Tight gap: each link carries its own inline padding (below), so the visible
+     hit target is a clear region *centred on its label* — no wide dead gap between
+     labels where a hover lands on nothing (and the browser keeps showing the
+     previous link's URL, which reads as an off-by-one). The negative inline margin
+     cancels the first/last item's padding so the row still edge-aligns. */
   .site-footer .footer-nav {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: 0.3rem 1rem;
+    gap: 0.15rem 0.15rem;
+    margin-inline: -0.55rem;
   }
   .site-footer .footer-nav a,
   .site-footer .footer-nav button {
@@ -208,13 +214,32 @@ const year = new Date().getFullYear();
     color: var(--accent);
     background: none;
     border: none;
-    padding: 0;
+    border-radius: var(--radius-sm, 6px);
+    padding: 0 0.55rem;
     cursor: pointer;
+    text-decoration: none;
+    transition: background 0.15s ease, color 0.15s ease;
+  }
+  /* Visible hover/focus affordance: makes each link's boundary unmistakable, so
+     it's always clear which one you're on. */
+  .site-footer .footer-nav a:hover,
+  .site-footer .footer-nav button:hover,
+  .site-footer .footer-nav a:focus-visible,
+  .site-footer .footer-nav button:focus-visible {
+    background: color-mix(in srgb, var(--accent) 12%, transparent);
+    text-decoration: underline;
+    text-underline-offset: 3px;
   }
   [data-theme="dark"] .site-footer .footer-nav a,
   [data-theme="dark"] .site-footer .footer-nav button {
     color: var(--gold);
   }
+  [data-theme="dark"] .site-footer .footer-nav a:hover,
+  [data-theme="dark"] .site-footer .footer-nav button:hover,
+  [data-theme="dark"] .site-footer .footer-nav a:focus-visible,
+  [data-theme="dark"] .site-footer .footer-nav button:focus-visible {
+    background: color-mix(in srgb, var(--gold) 16%, transparent);
+  }
   .site-footer .footer-copy {
     margin: 0;
     font-family: var(--font-body);

package/components/recipes/ContactCard.astro

@@ -1,14 +1,18 @@
 ---
 /**
- * ContactCard — a Level-2 recipe: a rich, branded "get in touch" band. A gradient
- * panel (anchored on --ink so it stays a deep, warm brand tone in BOTH themes)
- * carries a display-type title + a subtitle on the left, the contact channels as
- * tappable pills on the right, and a closing note across the bottom. For a contact
- * or find-us page — the polished alternative to a plain notice box.
+ * ContactCard — a Level-2 recipe: a rich, branded "get in touch" band. A display-
+ * type title + subtitle on the left, the contact channels as tappable tiles on the
+ * right, and a closing note across the bottom. For a contact or find-us page — the
+ * polished alternative to a plain notice box.
  *
- * Token-driven: the gradient is --ink → brand-tinted, pills are translucent
- * recesses on it, icons + hovers use --gold, so a CMS colour change recolours the
- * whole band. Whole pill links when `href` is set.
+ * Fully THEME-ADAPTIVE (composes in light AND dark): the panel is `--bg-section`
+ * with a soft `--gold` corner wash for brand presence, text is `--fg`/`--accent`/
+ * `--muted`, tiles are `--bg-surface` recesses, icons + hovers use `--gold`. Every
+ * one of those tokens flips per theme, so the band re-composes correctly in each
+ * mode (never the old always-dark band) and a CMS colour change recolours it.
+ * Contrast-safe: brand gold is used only decoratively (wash, rule, icons, hovers),
+ * never as body/label text — those use the ink/text tokens that meet AA on the
+ * panel in both themes. Whole tile links when `href` is set.
  */
 import Icon from '../Icon.astro';
 import { isIconKey } from '../../lib/icons';
@@ -72,27 +76,48 @@ const target = (href?: string) => (href && /^https?:\/\//.test(href) ? '_blank'
     margin-inline: auto;
     padding-inline: 1rem;
   }
-  /* Anchored on --ink (a source colour that stays dark in both themes) so the band
-     reads as a deep, warm brand panel regardless of light/dark. */
+  /* Adaptive panel: a section surface that flips light↔dark with the theme, lifted
+     off the page by a border + shadow, with a soft brand-gold wash for presence. */
   .b-contact__panel {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
     display: grid;
     grid-template-columns: 1fr;
     gap: 1.5rem 2.5rem;
     padding: clamp(1.75rem, 4vw, 3rem);
     border-radius: var(--radius);
-    background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--gold) 26%, var(--ink)));
-    color: var(--text-light);
+    background: var(--bg-section);
+    color: var(--fg);
+    border: 1px solid var(--border);
     box-shadow: var(--shadow-md);
   }
+  /* Brand wash — a gold glow in the top-right, behind the content (z-index below the
+     panel's own children via isolation). Adds brand presence in both themes without
+     tinting the text ground, so contrast is never at risk. */
+  .b-contact__panel::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: radial-gradient(115% 130% at 100% 0%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 62%);
+    pointer-events: none;
+  }
   @media (min-width: 48rem) {
-    .b-contact__panel { grid-template-columns: 1.25fr 1fr; align-items: center; }
+    .b-contact__panel { grid-template-columns: 1.2fr 1fr; align-items: center; }
   }
   .b-contact__head { display: flex; flex-direction: column; gap: 0.5rem; }
   .b-contact__eyebrow {
     margin: 0;
+    display: inline-flex; align-items: center; gap: 0.6rem;
     font-family: var(--font-heading);
     font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
-    color: color-mix(in srgb, var(--text-light) 70%, transparent);
+    color: var(--accent);
+  }
+  /* Short gold rule carries the brand into the eyebrow without colouring the text. */
+  .b-contact__eyebrow::before {
+    content: ''; flex: 0 0 auto; width: 1.5rem; height: 2px; border-radius: 2px;
+    background: var(--gold);
   }
   .b-contact__title {
     margin: 0;
@@ -100,13 +125,13 @@ const target = (href?: string) => (href && /^https?:\/\//.test(href) ? '_blank'
     font-size: clamp(1.9rem, 4vw, 2.8rem);
     line-height: 1.05;
     text-wrap: balance;
-    color: var(--text-light);
+    color: var(--fg);
   }
   .b-contact__subtitle {
     margin: 0.15rem 0 0;
     font-family: var(--font-heading);
     font-weight: 600;
-    color: var(--gold);
+    color: var(--accent);
   }
   .b-contact__items {
     list-style: none;
@@ -117,9 +142,9 @@ const target = (href?: string) => (href && /^https?:\/\//.test(href) ? '_blank'
     display: flex; align-items: center; gap: 0.75rem;
     padding: 0.7rem 1rem;
     border-radius: var(--radius-sm);
-    background: color-mix(in srgb, #000 22%, transparent);
-    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
-    color: var(--text-light);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    color: var(--fg);
     font-family: var(--font-heading);
     font-weight: 600;
     font-size: 0.95rem;
@@ -128,7 +153,7 @@ const target = (href?: string) => (href && /^https?:\/\//.test(href) ? '_blank'
   }
   a.b-contact__item:hover {
     border-color: var(--gold);
-    background: color-mix(in srgb, #000 12%, transparent);
+    background: color-mix(in srgb, var(--gold) 8%, var(--bg-surface));
   }
   a.b-contact__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
   .b-contact__icon { display: inline-flex; color: var(--gold); flex: 0 0 auto; }
@@ -137,8 +162,8 @@ const target = (href?: string) => (href && /^https?:\/\//.test(href) ? '_blank'
     grid-column: 1 / -1;
     margin: 0;
     padding-top: 1.25rem;
-    border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
-    color: color-mix(in srgb, var(--text-light) 78%, transparent);
+    border-top: 1px solid var(--border);
+    color: var(--muted);
     font-size: 0.9rem;
     line-height: 1.6;
   }

package/components/recipes/Locations.astro

@@ -123,10 +123,17 @@ const { title, intro, columns = 2, provider = 'Google Maps', items = [] } = Astr
   /* Map region — uniform ratio; the consent card fills it until the iframe loads. */
   .b-locations__map { position: relative; aspect-ratio: 4 / 3; background: var(--bg-section); }
   .b-loc-map, .b-loc-map__frame, .b-loc-map__consent, .b-loc-map__fallback { position: absolute; inset: 0; }
+  /* The frame slot sits AFTER the consent card (both inset:0), so while it's empty
+     it would paint on top and swallow clicks meant for the "Show map" button. Keep
+     an empty slot click-through; once the iframe is injected it's no longer :empty
+     and becomes interactive. The consent card is also lifted above it as a belt-
+     and-braces guard while it's visible. */
+  .b-loc-map__frame:empty { pointer-events: none; }
   .b-loc-map__frame :global(iframe) { display: block; }
   .b-loc-map__consent {
     display: flex; flex-direction: column; align-items: center; justify-content: center;
     gap: 0.75rem; padding: 1.5rem; text-align: center;
+    z-index: 1;
   }
   .b-loc-map__consent[hidden] { display: none; }
   .b-loc-map__text { margin: 0; color: var(--muted); font-size: 0.9rem; max-width: 32ch; }

package/components/recipes/Stats.astro

@@ -1,6 +1,13 @@
 ---
 /** Stats — a Level-2 recipe: a band of headline numbers over an optional
- *  heading/intro. Composes the Heading primitive; numbers use the brand accent. */
+ *  heading/intro. Composes the Heading primitive; numbers use the brand accent.
+ *
+ *  Self-composing: the grid never reserves more columns than there are stats, so
+ *  a single item centres as a feature instead of stranding an empty half-band
+ *  (the "£10 pinned to one side" bug); each stat is a token-driven tile (radius/
+ *  surface/stroke/shadow knobs, like every Card), so it reads as a designed unit
+ *  at any count and in either theme. Labels are width-capped so a long caption
+ *  wraps to a tidy block rather than a full-width line. */
 import Heading from '../blocks/Heading.astro';
 
 interface Item { value: string; label: string; description?: string }
@@ -12,6 +19,9 @@ interface Props {
   items?: Item[];
 }
 const { title, intro, background = 'muted', columns = 3, items = [] } = Astro.props;
+// Cap the column count at the item count — one stat should never sit in a
+// two-column grid (half empty). Falls back to 1 for an empty list.
+const cols = Math.min(columns, Math.max(items.length, 1)) as 1 | 2 | 3 | 4;
 ---
 
 <section class="b-stats" data-bg={background}>
@@ -22,11 +32,11 @@ const { title, intro, background = 'muted', columns = 3, items = [] } = Astro.pr
         {intro && <p class="b-stats__intro">{intro}</p>}
       </div>
     )}
-    <div class="b-stats__grid" data-cols={columns}>
+    <div class="b-stats__grid" data-cols={cols}>
       {items.map((item) => (
         <div class="b-stats__item">
           <span class="b-stats__value">{item.value}</span>
-          <span class="b-stats__label">{item.label}</span>
+          {item.label && <span class="b-stats__label">{item.label}</span>}
           {item.description && <span class="b-stats__desc">{item.description}</span>}
         </div>
       ))}
@@ -58,21 +68,35 @@ const { title, intro, background = 'muted', columns = 3, items = [] } = Astro.pr
   .b-stats__grid {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 1.5rem 2rem;
+    gap: 1.25rem;
+    width: 100%;
+    margin-inline: auto;
   }
   @media (min-width: 40em) {
-    .b-stats__grid { grid-template-columns: repeat(2, 1fr); }
+    .b-stats__grid[data-cols='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .b-stats__grid[data-cols='3'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .b-stats__grid[data-cols='4'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }
   @media (min-width: 60em) {
-    .b-stats__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
-    .b-stats__grid[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
+    .b-stats__grid[data-cols='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .b-stats__grid[data-cols='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
   }
+  /* A lone stat is a centred feature, not a full-width slab. */
+  .b-stats__grid[data-cols='1'] { max-width: 30rem; }
+  /* Token-driven tile: the same radius / surface / stroke / shadow knobs as every
+     Card, so it stays consistent and theme-correct. On the muted band the tile's
+     --bg-surface sits a step above --bg-section, giving depth in both themes. */
   .b-stats__item {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
-    gap: 0.35rem;
+    gap: 0.5rem;
+    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 1.75rem);
+    border-radius: var(--radius);
+    background: var(--bg-surface);
+    border: var(--card-border);
+    box-shadow: var(--shadow-md);
   }
   .b-stats__value {
     font-family: var(--font-heading);
@@ -81,8 +105,8 @@ const { title, intro, background = 'muted', columns = 3, items = [] } = Astro.pr
     line-height: 1;
     color: var(--gold);
   }
-  .b-stats__label { font-weight: 600; color: var(--fg); }
-  .b-stats__desc { font-size: 0.875rem; color: var(--muted); line-height: 1.5; }
+  .b-stats__label { font-weight: 600; color: var(--fg); line-height: 1.4; max-width: 30ch; }
+  .b-stats__desc { font-size: 0.875rem; color: var(--muted); line-height: 1.5; max-width: 32ch; }
 </style>
 
 <script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "type": "module",
   "description": "Ferst Core — the shared, brand-agnostic client-site system: Astro components, layouts, content schemas, the layered config resolver, and a neutral styling architecture that every client overrides.",
   "license": "BUSL-1.1",