elements that should read as waypoint stops on │ │ a trail. │ └────────────────────────────────────────────────────────────────────────┘ */ .stigmergy-rail { position: relative; padding-left: var(--space-3); } .stigmergy-rail::before { content: ""; position: absolute; top: var(--space-3); bottom: var(--space-3); left: 3px; width: 1px; background: linear-gradient(to bottom, var(--trail-stroke), transparent 92%); pointer-events: none; } .stigmergy-rail__waypoint { position: absolute; top: 0; left: 0; width: 7px; height: 22px; opacity: 0.85; pointer-events: none; } /* ┌────────────────────────────────────────────────────────────────────────┐ │ .stigmergy-divider-strong — Primitive 4 wrapper. Centred, sized to │ │ editorial column. Strong section-boundary marker. │ └────────────────────────────────────────────────────────────────────────┘ */ .stigmergy-divider-strong { display: block; width: 240px; height: 38px; margin: var(--space-5) auto; } @media (min-width: 768px) { .stigmergy-divider-strong { margin: var(--space-6) auto; } } /* ┌────────────────────────────────────────────────────────────────────────┐ │ .stigmergy-divider-soft — Primitive 5 wrapper. Smaller envelope than │ │ strong, less vertical breathing. Thought-pause marker between │ │ paragraph blocks. Render box (200×40) is ~1.67× the 120×24 viewBox so │ │ the dots + rule actually read at scroll-reading distance. │ └────────────────────────────────────────────────────────────────────────┘ */ .stigmergy-divider-soft { display: block; width: 200px; height: 40px; margin: var(--space-3) auto; } @media (min-width: 768px) { .stigmergy-divider-soft { margin: var(--space-4) auto; } } } /* Landing-page supplements to the foundation */ /* ────────────────────────────────────────────────────────────────────────── site-chrome.css — landing-page header chrome + hero-reveal state machine. Renamed 2026-05-29 from layout-base.css. The substrate + body type + ::selection + .skip-link primitives that used to live alongside this chrome now ship from @myrmid/design-system/foundation/layout-base.css. This file is the landing-page-specific supplement: header markup, the hero-reveal coordination with public/js/hero-reveal.js, and the #lucie-root substrate suppression. Sticky positioning per UX spec §Section Nav line 2123 ("Locale-aware; sticky"). z-index pins above page content but stays below the Lucie widget root (which manages its own stacking inside #lucie-root). `contain: layout` keeps the sticky element from triggering layout recalculation in the surrounding content (CLS = 0 invariant per AC). ────────────────────────────────────────────────────────────────────────── */ header.site { position: sticky; top: 0; z-index: 30; padding: var(--space-3) 0; background: var(--surface-page); border-bottom: 1px solid var(--rule-quiet); contain: layout; transition: opacity var(--motion-duration-base) var(--motion-easing-base), transform var(--motion-duration-base) var(--motion-easing-base); } /* ┌────────────────────────────────────────────────────────────────────────┐ │ Hero-reveal state machine — coordinated with │ │ public/js/hero-reveal.js + templates/layouts/base-layout.eta inline │ │ bootstrap. While the visitor is reading the hero (data-hero-mode= │ │ "initial"), header.site and the floating Lucie button are hidden so │ │ the hero owns the viewport. On first scroll input, JS flips the body │ │ to data-hero-mode="scrolled" — chrome fades back in and stays. │ │ │ │ Progressive enhancement: if JS is disabled the body attribute is set │ │ by the inline

so humans can see exactly what an LLM ingestion fetcher receives. Goals: monospace, soft wrap (no horizontal scroll for long lines), readable measure, comfortable padding, inherits the substrate colour tokens from layout-base.css. ────────────────────────────────────────────────────────────────────────── */ pre.llm-markdown { width: 100%; max-width: 56rem; margin: 0 auto; padding: var(--space-5) var(--space-3) var(--space-7); color: var(--ink-primary); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 0.875rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; background: transparent; } /* LLM locale — markdown viewer (pre.llm-markdown inside the HTML wrapper served at /llm/{slug}/index.html) */ /* Cross-surface hover affordance — gentle scale + left→right shine on every button-shape CTA. Imported LAST (after every per-surface base style). NB: under the brand layer this ships in @layer myrmid.foundation, so unlayered per-surface CSS wins regardless of import order — that is fine because the per-surface hover colour-flips it used to compete with were already removed (the AR-6 cascade-regression gate). */ @layer myrmid.foundation { /* ────────────────────────────────────────────────────────────────────────── tokens/cta-interaction.css — shared hover affordance for every button. Two stacked effects, applied on :hover and :focus-visible: 1. Gentle scale (1.03) — smooth grow/shrink, --motion-base (200ms). 2. Left→right shine — a low-alpha white band sweeps across the surface, looping while the pointer / keyboard focus stays on the button. Color rule: filled CTAs STAY filled on hover. The per-surface :hover blocks that used to invert fill/text colours (or darken via filter) have been removed from their respective files. Scale + shine are now the sole hover signal across every button-shape CTA on the site. In scope (every button-shape CTA — text-link CTAs intentionally untouched since they have no surface for a shine to traverse): .cta-lucie (hero) .product-cta-button (products + partners) .pricing-tier-card__cta (pricing tier cards) .pricing-enterprise__cta.pricing-cta-button (pricing enterprise) .lucie-cta (floating widget) .consent-button (cookie accept / reject) .consent-trigger (consent withdrawal) Out of scope: .nav-lucie-btn — the header chat affordance is a quiet chrome control (mirrors .locale-switcher-summary), not a CTA. Its hover treatment is owned by widget.css (border-color + colour lift). Reduced motion: motion-tokens.css installs a global prefers-reduced-motion: reduce override that zeroes transition / animation durations and clamps iteration count to 1. No extra guard needed here. ────────────────────────────────────────────────────────────────────────── */ /* ── Base: clip the shine, declare the scale transition ─────────────────── */ .cta-lucie, .product-cta-button, .pricing-tier-card__cta, .pricing-enterprise__cta.pricing-cta-button, .pricing-cta-button, .lucie-cta, .consent-button, .consent-trigger { overflow: hidden; transition: transform var(--motion-base) var(--easing); } /* Story 4.7: `.cta-lucie` is now an (was