/* Foreweave marketing site — Meadow design system (doc 13 ADR-M2). * Merged from the accepted "Thousand Futures" prototype pages; the app's * Midnight Indigo/Daybreak tokens (web/src/styles.css) are deliberately NOT * shared — only the brand mark and the display face are (brand/). * * NFR-303 deviation (approved): three *-text tokens darken small-type uses of * moss/gold/clay, whose prototype values sat below 4.5:1 on Meadow surfaces * (moss #3e7a55 ≈ 4.0:1 on #f3f5ec; gold #b78a2e ≈ 2.9:1 on #fcfdf8; * clay #c2562f ≈ 4.0:1). Display-size and decorative uses keep the originals. */ /* Self-hosted display face (NFR-302) — same @fontsource package the SPA uses. */ @font-face { font-family: "Bricolage Grotesque Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bricolage Grotesque Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/assets/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root{ --bg:#f3f5ec; --surface:#fcfdf8; --ink:#1b2a1f; --muted:#5c6e5f; --line:#dde4d4; --moss:#3e7a55; --moss-deep:#26543a; --bloom:#9cc24e; --bloom-soft:#d6e7b0; --clay:#c2562f; --gold:#b78a2e; --glow:rgba(62,122,85,.22); /* Accessibility text variants. --clay-text was #a8431f, which passes contrast (5.47:1 on sage paper) but measures ΔE00 1.54 from --gold-text under simulated deuteranopia: perceptually the same colour. The doc-12 §8 A-8 amendment tested one axis and not the other. frontend/02 §6 hedged that it might not matter unless the two ever encode distinct meanings in one view — they do, twice in this file: .fan-read .p50/.p80 are two percentiles in one component, and .pill.warn/.pill.late sit side by side. Deepened to #8f2408: ΔE00 7.39 worst-case across normal vision and all three dichromacies, 7.87:1 on paper (AC-VL6). Verified by brand/scripts/palette-audit.mjs. */ --moss-text:#2f6044; --gold-text:#7e611c; --clay-text:#8f2408; --font-display:'Bricolage Grotesque Variable','Bricolage Grotesque','Avenir Next',system-ui,sans-serif; --font-body:'Avenir Next','Segoe UI',system-ui,sans-serif; --font-mono:ui-monospace,'SF Mono',Menlo,monospace; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* overflow-x stays on body, NOT on html: the root element's overflow propagates to the viewport, so `html{overflow-x:hidden}` can suppress viewport scrolling and break position:sticky outright. */ body{background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.65;overflow-x:hidden} ::selection{background:var(--bloom-soft)} .wrap{max-width:1140px;margin:0 auto;padding:0 24px} /* grain atmosphere */ body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:1; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")} /* a11y helpers */ .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--moss-deep);color:#fff;padding:10px 18px;border-radius:0 0 12px 0} .skip-link:focus{left:0} header{position:sticky;top:0;z-index:60;background:rgba(243,245,236,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} /* Scoped to the header bar. As a bare `nav{}` this hit every