@sarimarcus/content-sites-ui 0.15.0 → 0.16.0

package/src/navigation/navigation.ts

@@ -0,0 +1,155 @@
+// Site header controller: dropdowns (click, hover with a close delay, ArrowDown/ArrowUp/Escape, outside click,
+// focus leaving), the mobile menu (toggle, Escape from anywhere, focus into the panel on open), the single-open
+// mobile accordion and the Ctrl/Cmd+K search shortcut. Every root is bound once; document listeners are bound once
+// per page however many headers it holds, so re-running it on astro:page-load is safe.
+
+const CLOSE_DELAY = 150;
+let documentBound = false;
+
+const roots = () => Array.from(document.querySelectorAll<HTMLElement>('[data-site-nav]'));
+const dropdownButtons = (scope: ParentNode = document) =>
+  Array.from(scope.querySelectorAll<HTMLButtonElement>('[data-nav-dropdown-button]'));
+const controlled = (el: Element) => {
+  const id = el.getAttribute('aria-controls');
+  return id ? document.getElementById(id) : null;
+};
+
+function setDropdown(button: HTMLButtonElement, open: boolean): void {
+  if (open) dropdownButtons().forEach((other) => other !== button && other.setAttribute('aria-expanded', 'false'));
+  button.setAttribute('aria-expanded', String(open));
+}
+
+function setMobileMenu(root: HTMLElement, toggle: HTMLButtonElement, open: boolean, focus: boolean): void {
+  const panel = controlled(toggle);
+  if (!panel) return;
+  toggle.setAttribute('aria-expanded', String(open));
+  toggle.setAttribute('aria-label', (open ? toggle.dataset.closeLabel : toggle.dataset.openLabel) ?? '');
+  panel.classList.toggle('hidden', !open);
+  root.classList.toggle('mobile-menu-open', open);
+  document.body.classList.toggle('mobile-menu-open', open);
+  if (!focus) return;
+  if (open) panel.querySelector<HTMLElement>('button, a')?.focus();
+  else toggle.focus();
+}
+
+function bindDropdown(dropdown: HTMLElement): void {
+  const button = dropdown.querySelector<HTMLButtonElement>('[data-nav-dropdown-button]');
+  const menu = button && controlled(button);
+  if (!button || !menu) return;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  // A pointer that hovered the dropdown open then clicks the trigger means "open", not "toggle closed".
+  let openedByHover = false;
+
+  button.addEventListener('click', () => {
+    const open = openedByHover || button.getAttribute('aria-expanded') !== 'true';
+    openedByHover = false;
+    setDropdown(button, open);
+  });
+  button.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      setDropdown(button, false);
+      button.focus();
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      setDropdown(button, true);
+      menu.querySelector<HTMLElement>('a')?.focus();
+    }
+  });
+  menu.addEventListener('keydown', (event) => {
+    const links = Array.from(menu.querySelectorAll<HTMLElement>('a'));
+    const index = links.indexOf(document.activeElement as HTMLElement);
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      (links[index + 1] ?? links[0])?.focus();
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (index <= 0) button.focus();
+      else links[index - 1]?.focus();
+    } else if (event.key === 'Escape') {
+      setDropdown(button, false);
+      button.focus();
+    }
+  });
+  dropdown.addEventListener('mouseenter', () => {
+    clearTimeout(timer);
+    openedByHover = button.getAttribute('aria-expanded') !== 'true';
+    setDropdown(button, true);
+  });
+  dropdown.addEventListener('mouseleave', () => {
+    openedByHover = false;
+    timer = setTimeout(() => setDropdown(button, false), CLOSE_DELAY);
+  });
+  dropdown.addEventListener('focusout', (event) => {
+    const next = event.relatedTarget;
+    if (next instanceof Node && dropdown.contains(next)) return;
+    button.setAttribute('aria-expanded', 'false');
+  });
+}
+
+function bindAccordion(panel: HTMLElement): void {
+  const buttons = Array.from(panel.querySelectorAll<HTMLButtonElement>('[data-mobile-section-button]'));
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => {
+      const open = button.getAttribute('aria-expanded') !== 'true';
+      if (open) {
+        buttons.forEach((other) => {
+          if (other === button) return;
+          other.setAttribute('aria-expanded', 'false');
+          controlled(other)?.classList.add('hidden');
+        });
+      }
+      button.setAttribute('aria-expanded', String(open));
+      controlled(button)?.classList.toggle('hidden', !open);
+    });
+  });
+}
+
+function searchPathOf(root: HTMLElement): string | null {
+  const path = root.dataset.searchPath;
+  if (!path) return null;
+  const compiled = (root.dataset.searchBase ?? '/').replace(/\/$/, '');
+  return (window.location.pathname.indexOf(compiled) === 0 ? compiled : '') + path;
+}
+
+function bindDocument(): void {
+  if (documentBound) return;
+  documentBound = true;
+
+  document.addEventListener('click', (event) => {
+    const target = event.target;
+    if (!(target instanceof Element) || target.closest('[data-nav-dropdown]')) return;
+    dropdownButtons().forEach((button) => button.setAttribute('aria-expanded', 'false'));
+  });
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      roots().forEach((root) => {
+        const toggle = root.querySelector<HTMLButtonElement>('[data-mobile-menu-toggle]');
+        if (toggle?.getAttribute('aria-expanded') === 'true') setMobileMenu(root, toggle, false, true);
+      });
+      return;
+    }
+    if (!(event.metaKey || event.ctrlKey) || event.key !== 'k') return;
+    const searchPath = roots().map(searchPathOf).find(Boolean);
+    if (!searchPath) return;
+    // On the search page itself the page input owns the shortcut.
+    const current = window.location.pathname;
+    if (current === searchPath || current === `${searchPath}/`) return;
+    event.preventDefault();
+    window.location.assign(`${searchPath}?focus=1`);
+  });
+}
+
+export function initNavigation(): void {
+  bindDocument();
+  roots().forEach((root) => {
+    if (root.hasAttribute('data-site-nav-ready')) return;
+    root.setAttribute('data-site-nav-ready', '');
+    root.querySelectorAll<HTMLElement>('[data-nav-dropdown]').forEach(bindDropdown);
+    const toggle = root.querySelector<HTMLButtonElement>('[data-mobile-menu-toggle]');
+    const panel = toggle && controlled(toggle);
+    if (!toggle || !panel) return;
+    toggle.addEventListener('click', () => setMobileMenu(root, toggle, toggle.getAttribute('aria-expanded') !== 'true', true));
+    bindAccordion(panel);
+  });
+}

package/src/navigation/tones.ts

@@ -0,0 +1,33 @@
+import type { NavTone } from './types.ts';
+
+// Literal class strings per tone, so Tailwind's scanner sees every utility the navigation components emit.
+export const TONES: Record<NavTone, {
+  text: string;
+  hoverText: string;
+  groupHoverText: string;
+  strongHover: string;
+  groupStrongHover: string;
+  ring: string;
+  icon: string;
+  iconDim: string;
+  tile: string;
+}> = {
+  primary: {
+    text: 'text-primary', hoverText: 'hover:text-primary', groupHoverText: 'group-hover:text-primary',
+    strongHover: 'hover:text-primary-strong', groupStrongHover: 'group-hover:text-primary-strong',
+    ring: 'focus-visible:ring-primary', icon: 'text-primary', iconDim: 'text-primary/60',
+    tile: 'bg-primary/10 group-hover:bg-primary/20',
+  },
+  secondary: {
+    text: 'text-secondary', hoverText: 'hover:text-secondary', groupHoverText: 'group-hover:text-secondary',
+    strongHover: 'hover:text-secondary-strong', groupStrongHover: 'group-hover:text-secondary-strong',
+    ring: 'focus-visible:ring-secondary', icon: 'text-secondary', iconDim: 'text-secondary/60',
+    tile: 'bg-secondary/10 group-hover:bg-secondary/20',
+  },
+  accent: {
+    text: 'text-accent', hoverText: 'hover:text-accent', groupHoverText: 'group-hover:text-accent',
+    strongHover: 'hover:text-accent-strong', groupStrongHover: 'group-hover:text-accent-strong',
+    ring: 'focus-visible:ring-accent', icon: 'text-accent', iconDim: 'text-accent/60',
+    tile: 'bg-accent/10 group-hover:bg-accent/20',
+  },
+};

package/src/navigation/types.ts

@@ -0,0 +1,33 @@
+// Public contracts for site chrome. Sites own every value: labels, hrefs, icons, logos and copy.
+
+/** Who the site is, as the header, footer and copyright line name it. */
+export interface SiteIdentity {
+  name: string;
+  tagline?: string;
+  homeHref?: string;
+}
+
+export interface NavLink {
+  label: string;
+  href: string;
+  description?: string;
+  /** Lucide icon name for the ui Icon primitive. */
+  icon?: string;
+}
+
+export interface NavGroup {
+  id: string;
+  label: string;
+  icon?: string;
+  links: NavLink[];
+}
+
+export interface FooterSection {
+  title: string;
+  /** Lucide icon name shown before the heading. */
+  icon?: string;
+  links: NavLink[];
+}
+
+/** The colour role a navigation item is tinted with. */
+export type NavTone = 'primary' | 'secondary' | 'accent';

package/src/search/SearchSuggestions.astro

@@ -0,0 +1,26 @@
+---
+/** The empty-state suggestion chips of a search page; each button carries the query it runs (data-search-suggest). */
+interface Props {
+  label: string;
+  suggestions: { label: string; query: string }[];
+}
+
+const { label, suggestions } = Astro.props;
+---
+
+<p class="search-suggestions__label">{label}</p>
+<ul class="search-suggestions">
+  {
+    suggestions.map((s) => (
+      <li>
+        <button
+          type="button"
+          class="search-chip search-chip--suggest"
+          data-search-suggest={s.query}
+        >
+          {s.label}
+        </button>
+      </li>
+    ))
+  }
+</ul>

package/src/search/index.ts

@@ -0,0 +1,5 @@
+// Public surface of @sarimarcus/content-sites-ui/search: search-page building blocks. The site keeps its page, its
+// type taxonomy, its copy and its Pagefind index.
+export { default as SearchSuggestions } from './SearchSuggestions.astro';
+export { appendResults } from './renderResult.ts';
+export type { PagefindResultFragment, SearchTaxonomy, SearchTypeMeta } from './renderResult.ts';

package/src/search/renderResult.ts

@@ -0,0 +1,117 @@
+// Pagefind result cards for a site's search page. The site owns its type taxonomy (labels, icons) and passes it in;
+// the icons themselves are server-rendered by the site into <template id="search-type-icons">.
+import { normalizePagePath } from '@sarimarcus/content-sites-core/url';
+
+export interface SearchTypeMeta {
+  label: string;
+  pluralLabel?: string;
+  iconName?: string;
+}
+
+export interface SearchTaxonomy<T extends string> {
+  types: Record<T, SearchTypeMeta>;
+  resolveType: (meta: Record<string, string> | undefined) => T | null;
+  /** Title shown when a result has none. */
+  untitled?: string;
+}
+
+export interface PagefindResultFragment {
+  url: string;
+  raw_url?: string;
+  excerpt: string;
+  meta?: Record<string, string>;
+  sub_results?: Array<{ title?: string; url?: string; excerpt?: string }>;
+}
+
+// Type-icon SVGs are server-rendered into <template id="search-type-icons">
+// (one Lucide icon per type) and cloned at render time. No emojis in code.
+let parser: DOMParser | undefined;
+const iconCache = new Map<string, Element>();
+function getTypeIcon(type: string): Element | null {
+  const cached = iconCache.get(type);
+  if (cached) return cached.cloneNode(true) as Element;
+  const tpl = document.getElementById('search-type-icons') as HTMLTemplateElement | null;
+  const source = tpl?.content.querySelector(`[data-icon-for="${type}"] > *`);
+  if (!source) return null;
+  iconCache.set(type, source);
+  return source.cloneNode(true) as Element;
+}
+
+// Pagefind generates excerpts at build time from indexed content, wrapping
+// matched terms in <mark>. We parse into a detached document so any unsafe
+// nodes (script/style/iframe) and on* event handlers are stripped before
+// reaching the live DOM.
+function setExcerptHtml(target: HTMLElement, html: string): void {
+  const doc = (parser ??= new DOMParser()).parseFromString(`<div>${html}</div>`, 'text/html');
+  const root = doc.body.firstElementChild;
+  if (!root) {
+    target.textContent = '';
+    return;
+  }
+  root.querySelectorAll('script, style, iframe, object, embed').forEach((n) => n.remove());
+  root.querySelectorAll('*').forEach((n) => {
+    [...n.attributes].forEach((attr) => {
+      if (attr.name.startsWith('on')) n.removeAttribute(attr.name);
+    });
+  });
+  target.replaceChildren(
+    ...Array.from(root.childNodes).map((n) => target.ownerDocument.importNode(n, true)),
+  );
+}
+
+function renderResultElement<T extends string>(fragment: PagefindResultFragment, index: number, taxonomy: SearchTaxonomy<T>): HTMLLIElement {
+  const meta = fragment.meta ?? {};
+  const title = meta.title ?? taxonomy.untitled ?? 'Untitled';
+  const url = normalizePagePath(fragment.url);
+  const type = taxonomy.resolveType(meta);
+  const typeMeta = type ? taxonomy.types[type] : null;
+
+  const li = document.createElement('li');
+  li.className = 'search-card';
+  li.dataset.type = type ?? 'unknown';
+  li.dataset.index = String(index);
+
+  const link = document.createElement('a');
+  link.className = 'search-card__link';
+  link.href = url;
+  link.dataset.searchResultLink = '';
+  li.appendChild(link);
+
+  const body = document.createElement('div');
+  body.className = 'search-card__body';
+  link.appendChild(body);
+
+  if (type && typeMeta) {
+    const badge = document.createElement('span');
+    badge.className = 'search-card__badge';
+    const iconNode = getTypeIcon(type);
+    if (iconNode) badge.appendChild(iconNode);
+    badge.appendChild(document.createTextNode(typeMeta.label));
+    body.appendChild(badge);
+  }
+
+  const titleEl = document.createElement('h3');
+  titleEl.className = 'search-card__title';
+  titleEl.textContent = title;
+  body.appendChild(titleEl);
+
+  const excerptEl = document.createElement('p');
+  excerptEl.className = 'search-card__excerpt';
+  setExcerptHtml(excerptEl, fragment.excerpt);
+  body.appendChild(excerptEl);
+
+  return li;
+}
+
+export function appendResults<T extends string>(
+  container: HTMLElement,
+  fragments: PagefindResultFragment[],
+  startIndex: number,
+  taxonomy: SearchTaxonomy<T>,
+): void {
+  const frag = document.createDocumentFragment();
+  fragments.forEach((f, i) => {
+    frag.appendChild(renderResultElement(f, startIndex + i, taxonomy));
+  });
+  container.appendChild(frag);
+}

package/src/styles/consent.css

@@ -0,0 +1,274 @@
+/* Silktide Consent Manager overrides, shared by every site. Colours come from the semantic theme roles; a site tunes
+   the few surfaces that differ through these optional hooks (defaults in brackets):
+   --consent-surface [--background]       banner, modal, secondary buttons, toggle thumb
+   --consent-surface-hover [surface]       secondary button hover
+   --consent-border [accent 20%]           banner/modal border, fieldset and row separators
+   --consent-backdrop [overlay 60%]        modal backdrop
+   --consent-shadow [overlay 15%]          banner/modal shadow
+   --consent-thumb-shadow [overlay 30%]    toggle thumb shadow
+   --consent-link / -hover [secondary / secondary-strong]  the preferences link
+   --consent-toggle-off [muted-foreground 35% on surface]  off toggle track
+   --consent-toggle-border [transparent]   off toggle track outline */
+
+/* CLS fix: keep wrapper out of document flow so it never causes layout shift */
+#stcm-wrapper {
+  position: fixed !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  z-index: 9999 !important;
+}
+
+/* Hide floating re-open button (all possible selectors) */
+#stcm-icon,
+[id^="stcm-icon"],
+.stcm-icon {
+  display: none !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+}
+
+/* Backdrop — blur only on capable devices to avoid mobile jank */
+#stcm-backdrop {
+  background: var(--consent-backdrop, color-mix(in oklch, var(--overlay) 60%, transparent)) !important;
+}
+@media (hover: hover) {
+  #stcm-backdrop {
+    backdrop-filter: blur(2px) !important;
+  }
+}
+
+/* Outer container — strip any default border/outline */
+#stcm-container,
+[id^="stcm-container"],
+.stcm-container {
+  border: none !important;
+  outline: none !important;
+}
+
+/* Banner & Modal container — compact */
+#stcm-banner,
+#stcm-modal {
+  background: var(--consent-surface, var(--background)) !important;
+  color: var(--foreground) !important;
+  border-radius: 0.75rem !important;
+  border: 1px solid var(--consent-border, color-mix(in oklch, var(--accent) 20%, transparent)) !important;
+  box-shadow: 0 8px 32px var(--consent-shadow, color-mix(in oklch, var(--overlay) 15%, transparent)) !important;
+  font-family: var(--font-body) !important;
+  max-width: 480px !important;
+  padding: 1rem 1.25rem !important;
+  outline: none !important;
+}
+
+/* Type hierarchy: title > category legend > body (Dark Skies 5d13f8a — the legend used to inherit the title's size) */
+#stcm-banner h1, #stcm-banner h2, #stcm-banner h3,
+#stcm-modal h1, #stcm-modal h2, #stcm-modal h3 {
+  font-family: var(--font-display) !important;
+  color: var(--foreground) !important;
+  font-size: 1.0625rem !important;
+  line-height: 1.3 !important;
+  margin-bottom: 0.25rem !important;
+}
+
+/* Category fieldsets — reset browser default groove border */
+#stcm-modal fieldset,
+#stcm-banner fieldset {
+  border: none !important;
+  border-top: 1px solid var(--consent-border, color-mix(in oklch, var(--accent) 20%, transparent)) !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* Category labels (Essential / Analytics / Marketing) — <legend> elements */
+#stcm-modal legend,
+#stcm-banner legend {
+  color: var(--foreground) !important;
+  font-family: var(--font-display) !important;
+  font-weight: 600 !important;
+  font-size: 0.875rem !important;
+  line-height: 1.3 !important;
+}
+
+/* Body text — compact */
+#stcm-banner p, #stcm-modal p,
+#stcm-banner a, #stcm-modal a {
+  color: var(--muted-foreground) !important;
+  font-family: var(--font-body) !important;
+  font-size: 0.8125rem !important;
+  line-height: 1.4 !important;
+  margin-bottom: 0.5rem !important;
+}
+
+/* Actions block — tighter than Silktide's 24px margin-top: on short, hero-heavy mobile viewports the banner reached
+   into above-the-fold controls (SLA-2290). */
+#stcm-banner .stcm-actions {
+  margin-top: 0.75rem !important;
+}
+
+/* Buttons — base */
+.stcm-button {
+  border: none !important;
+  outline: none !important;
+  border-radius: 0.5rem !important;
+  font-family: var(--font-body) !important;
+  font-size: 0.8125rem !important;
+  font-weight: 500 !important;
+  padding: 0.5rem 1rem !important;
+  cursor: pointer !important;
+  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
+}
+
+/* Override Silktide default black box-shadow on button focus (#050505 ring) */
+#stcm-wrapper #stcm-banner button:focus,
+#stcm-wrapper #stcm-modal button:focus,
+#stcm-wrapper #stcm-icon:focus {
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+/* Accessible focus styles — keyboard only */
+.stcm-button:focus-visible,
+.stcm-preferences-button:focus-visible,
+.stcm-modal-close:focus-visible {
+  outline: 2px solid var(--primary) !important;
+  outline-offset: 2px !important;
+  box-shadow: none !important;
+}
+
+/* Primary button (Save / Accept) */
+.stcm-button-primary {
+  background: var(--primary) !important;
+  color: var(--primary-foreground) !important;
+  border: none !important;
+}
+.stcm-button-primary:hover {
+  background: var(--primary-strong) !important;
+}
+
+/* Secondary button (Reject / Manage) */
+.stcm-button-secondary,
+.stcm-reject-all {
+  background: var(--consent-surface, var(--background)) !important;
+  color: var(--primary) !important;
+  border: 1px solid color-mix(in oklch, var(--primary) 40%, transparent) !important;
+}
+.stcm-button-secondary:hover,
+.stcm-reject-all:hover {
+  background: var(--consent-surface-hover, var(--consent-surface, var(--background))) !important;
+  border-color: color-mix(in oklch, var(--primary) 70%, transparent) !important;
+}
+
+/* Preferences/settings button */
+.stcm-preferences-button {
+  background: transparent !important;
+  color: var(--consent-link, var(--secondary)) !important;
+  border: none !important;
+  text-decoration: underline !important;
+  font-size: 0.8125rem !important;
+  padding: 0 !important;
+}
+.stcm-preferences-button:hover {
+  color: var(--consent-link-hover, var(--secondary-strong)) !important;
+}
+
+/* Toggle — track (off): must clear 3:1 non-text contrast against the modal surface */
+.stcm-toggle-track {
+  background: var(--consent-toggle-off, color-mix(in oklch, var(--muted-foreground) 35%, var(--consent-surface, var(--background)))) !important;
+  box-shadow: inset 0 0 0 1px var(--consent-toggle-border, transparent) !important;
+  border-radius: 9999px !important;
+}
+
+/* Toggle — on state. `.stcm-toggle-on` is the sibling "ON" label, not an ancestor of the track, so target the
+   checked input instead (Dark Skies 5d13f8a). */
+.stcm-toggle input:checked + .stcm-toggle-track {
+  background: var(--primary) !important;
+  border-color: var(--primary) !important;
+}
+
+/* Toggle — thumb */
+.stcm-toggle-thumb {
+  background: var(--consent-surface, var(--background)) !important;
+  box-shadow: 0 1px 3px var(--consent-thumb-shadow, color-mix(in oklch, var(--overlay) 30%, transparent)) !important;
+}
+
+/* Consent row separator */
+.stcm-consent-row {
+  border-color: var(--consent-border, color-mix(in oklch, var(--accent) 20%, transparent)) !important;
+}
+
+/* Close button */
+.stcm-modal-close {
+  color: var(--primary) !important;
+  background: transparent !important;
+  border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent) !important;
+  border-radius: 0.5rem !important;
+}
+.stcm-modal-close svg,
+.stcm-modal-close svg * {
+  stroke: var(--primary) !important;
+  fill: var(--primary) !important;
+}
+.stcm-modal-close:hover {
+  color: var(--primary-strong) !important;
+  border-color: color-mix(in oklch, var(--primary) 60%, transparent) !important;
+}
+.stcm-modal-close:hover svg,
+.stcm-modal-close:hover svg * {
+  stroke: var(--primary-strong) !important;
+  fill: var(--primary-strong) !important;
+}
+
+/* Silktide credit link, brand badge, logo — hide */
+.stcm-credit-link,
+.stcm-logo,
+.stcm-brand,
+[class*="stcm-brand"],
+[class*="stcm-credit"] {
+  display: none !important;
+}
+
+/* Suppress browser focus outline on auto-focused containers */
+#stcm-banner:focus,
+#stcm-modal:focus,
+#stcm-banner:focus-visible,
+#stcm-modal:focus-visible,
+#stcm-container:focus,
+#stcm-container:focus-visible,
+[id^="stcm"]:focus,
+[id^="stcm"]:focus-visible {
+  outline: none !important;
+  box-shadow: 0 8px 32px var(--consent-shadow, color-mix(in oklch, var(--overlay) 15%, transparent)) !important;
+}
+
+/* Mobile — even more compact */
+@media (max-width: 640px) {
+  #stcm-banner,
+  #stcm-modal {
+    max-width: calc(100vw - 1.5rem) !important;
+    padding: 0.75rem 1rem !important;
+    margin: 0.75rem !important;
+    border-radius: 0.625rem !important;
+  }
+  #stcm-banner h1, #stcm-banner h2, #stcm-banner h3 {
+    font-size: 0.9375rem !important;
+  }
+  #stcm-banner p, #stcm-modal p {
+    font-size: 0.75rem !important;
+    margin-bottom: 0.375rem !important;
+  }
+  .stcm-button {
+    font-size: 0.75rem !important;
+    padding: 0.4375rem 0.875rem !important;
+  }
+  /* SLA-2290: keep the two primary actions side by side on mobile too — Silktide stacks them below 600px, and one
+     line materially shrinks how far the banner reaches into the fold. */
+  #stcm-banner .stcm-actions {
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    gap: 0.5rem !important;
+    margin-top: 0.5rem !important;
+  }
+  #stcm-banner .stcm-actions .stcm-button {
+    flex: 1 1 auto !important;
+  }
+}