/* ========================================================================== Winnable Grants v2 — the single stylesheet. Source of truth: the v2 Design Bible. Page-builders may not edit this file. Fonts are @font-face'd inline in each page's (Ford pattern); this file assumes 'Fraunces' and 'Inter' are declared there. ========================================================================== */ /* ============ 1. TOKENS ============ */ :root{ --ink:#1b2d44; --ink-deep:#152538; --muted:#55606e; --paper:#f7f4ed; --paper-bright:#fffdf9; --hairline:rgba(27,45,68,0.18); --hairline-strong:rgba(27,45,68,0.34); --hairline-on-ink:rgba(247,244,237,0.16); --green:#1e5741; --green-tint:#eef4f0; --green-ping:#43c98d; --ochre:#8a6516; --ochre-tint:#faf4e4; --skip:#5d6660; --skip-tint:#f0f1ef; --gold:#8a6516; /* AA: 5.01:1 on paper, 5.31:1 on white (was #a87b1f, 3.59:1 - failed small-text AA) */ --gold-rule:#c9962e; --serif:'Fraunces', Georgia, 'Times New Roman', serif; --sans:'Inter', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:160px; --space-section:clamp(4.5rem, 9vw, 10rem); --space-half:clamp(2.5rem, 5vw, 5rem); --container:1200px; --prose:640px; --gutter:var(--s-6); } @media(max-width:640px){ :root{ --gutter:var(--s-5); } } /* ============ 2. RESET / BASE ============ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:400; font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{display:block;max-width:100%} ul,ol{list-style-position:outside} a{color:inherit} :focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* ink: >=3:1 on every ground (was gold-rule, 2.42:1 on paper) */ /* ============ 3. TYPE ROLES — nine, no strays ============ */ .t-display{ font-family:var(--serif); font-weight:600; font-size:clamp(2.75rem, 1.6rem + 4.4vw, 5.25rem); line-height:1.04; letter-spacing:-0.018em; } .t-title{ font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem, 1.38rem + 2vw, 3.1rem); line-height:1.12; letter-spacing:-0.012em; } .t-subtitle{ font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem, 1.16rem + 0.55vw, 1.55rem); line-height:1.25; letter-spacing:0; } .t-figure{ font-family:var(--serif); font-weight:600; font-size:clamp(2.9rem, 1.9rem + 3.8vw, 5.5rem); line-height:1; letter-spacing:-0.02em; font-variant-numeric:lining-nums tabular-nums; } .t-dek{ font-family:var(--sans); font-weight:400; font-size:clamp(1.125rem, 1.06rem + 0.35vw, 1.3125rem); line-height:1.55; letter-spacing:0; color:var(--muted); max-width:58ch; } .t-quote{ font-family:var(--serif); font-weight:400; font-style:italic; font-size:clamp(1.35rem, 1.1rem + 1vw, 1.7rem); line-height:1.35; letter-spacing:0; } .t-label{ font-family:var(--sans); font-weight:600; font-size:0.75rem; line-height:1.4; letter-spacing:0.14em; text-transform:uppercase; font-feature-settings:"tnum" 1; } .t-fine{ font-family:var(--sans); font-weight:400; font-size:0.8125rem; line-height:1.5; color:var(--muted); } @media(max-width:640px){ .t-display{letter-spacing:-0.008em} } /* Prose — measure capped, Fraunces italic is the emphasis register */ .prose{max-width:var(--prose)} .prose p + p{margin-top:1.15em} .prose em, .t-dek em, .t-title em, .t-display em{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.05em; } .prose ul, .prose ol{padding-left:1.25em} .prose li + li{margin-top:0.6em} .prose strong{font-weight:600} /* Drop cap — About opener only */ .dropcap::first-letter{ font-family:var(--serif); font-weight:600; font-size:3.4em; line-height:0.82; float:left; padding:0.02em 0.14em 0 0; } /* Pull-quote — italic Fraunces between a gold rule and a hairline */ .pullquote{ border-top:2px solid var(--gold-rule); border-bottom:1px solid var(--hairline); padding:var(--s-6) 0; max-width:var(--prose); font-family:var(--serif); font-weight:400; font-style:italic; font-size:clamp(1.35rem, 1.1rem + 1vw, 1.7rem); line-height:1.35; } .pullquote cite{ display:block; margin-top:var(--s-4); font-style:normal; color:var(--muted); font-family:var(--sans); font-weight:600; font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; line-height:1.4; } /* ============ 4. LINKS — the one designed interaction ============ */ .link, .prose a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(27,45,68,0.35); transition:text-decoration-color 150ms ease, text-decoration-thickness 150ms ease; } .link:hover, .prose a:hover{ text-decoration-color:var(--gold); text-decoration-thickness:2px; } .link svg{display:inline-block;vertical-align:-2px;margin-left:0.4rem} /* ============ 5. THE ONE BUTTON ============ */ .btn{ display:inline-flex; align-items:center; gap:0.65rem; background:var(--ink); color:var(--paper); border:0; border-radius:2px; font-family:var(--sans); font-weight:500; font-size:0.9375rem; line-height:1; padding:14px 26px; text-decoration:none; cursor:pointer; transition:background-color 150ms ease; } .btn svg{transition:transform 150ms ease;flex:none} .btn:hover{background:var(--ink-deep)} .btn:hover svg{transform:translateX(4px)} .btn--inverse{background:var(--paper); color:var(--ink)} .btn--inverse:hover{background:var(--paper-bright)} /* ============ 6. LAYOUT ============ */ .wrap{max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter)} section{padding:var(--space-section) 0} .section--half{padding:var(--space-half) 0} .rule{border:0; border-top:1px solid var(--hairline)} /* canonical splits: 7/5 and 4/8. No 6/6 anywhere. */ .split-75{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s-6)} .split-75 > .lead{grid-column:1 / span 7} .split-75 > .side{grid-column:8 / span 5} .split-48{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s-6)} .split-48 > .rail{grid-column:1 / span 4} .split-48 > .main{grid-column:5 / span 8; min-width:0} /* min-width:0 lets .table-scroll contain a min-width table inside the grid */ @media(max-width:900px){ .split-75, .split-48{grid-template-columns:1fr} .split-75 > .lead, .split-75 > .side, .split-48 > .rail, .split-48 > .main{grid-column:1 / -1} } /* headline measures */ .split-48 .main .t-title{max-width:20ch} .split-48 .main .t-dek{margin-top:1.4rem} .split-48 .main .prose{margin-top:2rem} /* ruled rows + fine print inside the 8-column main hold the prose measure, not the full 8 columns */ .split-48 .main .guarantee, .split-48 .main .t-fine{max-width:var(--prose)} /* the sweep divider — hairline · arc glyph · hairline. Budget: max 2 per page. */ .sweep{display:flex; align-items:center; gap:var(--s-4)} .sweep .ln{flex:1; height:1px; background:var(--hairline)} .sweep svg{flex:none} /* ============ 7. FOLIO — the section-opening device ============ */ .folio{display:flex; flex-direction:column; gap:0.85rem} .folio::before{content:""; width:28px; height:2px; background:var(--gold-rule)} .folio .t-label{color:var(--muted)} /* ping-dot variant (hero): the mark's ping glyph replaces the tick */ .folio--ping{flex-direction:row; align-items:center; gap:0.7rem} .folio--ping::before{content:none} .folio--ping svg{flex:none} /* ============ 8. MASTHEAD / NAV ============ */ .masthead{ position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:2px solid var(--hairline-strong); } .nav{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); height:4.75rem; display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); } .lockup{display:inline-flex; align-items:center; gap:0.7rem; text-decoration:none; color:var(--ink)} .lockup svg{flex:none} .lockup .word{ font-family:var(--serif); font-weight:600; font-size:1.35rem; letter-spacing:-0.01em; line-height:1; white-space:nowrap; } .nav-links{display:flex; align-items:center; gap:var(--s-5)} .nav-links a:not(.btn){ font-family:var(--sans); font-weight:600; font-size:0.875rem; letter-spacing:0.14em; text-transform:uppercase; line-height:1.4; font-feature-settings:"tnum" 1; color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color 150ms ease; } .nav-links a:not(.btn):hover, .nav-links a[aria-current]{border-bottom-color:var(--gold)} .nav-links .btn{padding:11px 18px; font-size:0.875rem} .nav-toggle{display:none} .nav-burger{display:none} @media(max-width:900px){ .nav-links a:not(.btn){letter-spacing:0.1em} .nav-burger{display:block; cursor:pointer; color:var(--ink); padding:var(--s-2) 0} .nav-links{ display:none; position:absolute; top:calc(4.75rem + 2px); left:0; right:0; background:var(--paper); border-bottom:1px solid var(--hairline); flex-direction:column; align-items:stretch; gap:0; padding:0 var(--gutter) var(--s-5); } .nav-toggle:checked ~ .nav-links{display:flex} .nav-links a:not(.btn){ padding:var(--s-4) 0; border-bottom:1px solid var(--hairline); } .nav-links a:not(.btn):hover, .nav-links a[aria-current]{border-bottom-color:var(--hairline)} .nav-links .btn{margin-top:var(--s-5); justify-content:center; width:100%} } /* ============ 9. HEROES ============ */ /* Home hero — 7/5, paper, type-dominant; instrument in the right rail */ .hero-home{padding:var(--space-section) 0} .hero-home .lead .t-display{max-width:19ch; margin-top:clamp(1.5rem,3vw,2.5rem)} .hero-home .lead .t-dek{margin-top:clamp(1.75rem,3.5vw,2.75rem)} .cta-row{display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-6) } .hero-home .cta-row{margin-top:clamp(2rem,4vw,3rem)} .hero-home .reassure{margin-top:var(--s-5)} .hero-home .side{display:flex; align-items:center; justify-content:flex-end} /* Interior hero — type only, no instrument */ .hero-interior{padding:var(--space-half) 0 var(--space-section)} .hero-interior .t-display{max-width:16ch; margin-top:clamp(1.5rem,3vw,2.5rem)} .hero-interior .t-dek{margin-top:clamp(1.5rem,3vw,2.25rem)} /* Cold open (About, Privacy): no folio — headline first */ .hero-cold{padding:var(--space-half) 0 var(--space-section)} .hero-cold .t-display{max-width:16ch} .hero-cold .t-dek{margin-top:clamp(1.5rem,3vw,2.25rem)} /* Compact hero (404) */ .hero-compact{padding:var(--space-half) 0 var(--s-9)} .hero-compact .t-display{max-width:16ch; margin-top:clamp(1.25rem,2.5vw,2rem)} .hero-compact .t-dek{margin-top:1.4rem} .hero-compact .cta-row{margin-top:var(--s-6)} .hero-compact .t-fine{margin-top:var(--s-5)} /* ============ 10. THE FLORIDA FIELD — the brand's set-piece ============ */ .field{width:100%; max-width:480px; justify-self:end} .field svg{width:100%; height:auto} .hero-home .field{margin-top:calc(-1 * var(--s-7))} .map-label{ font-family:var(--sans); font-weight:600; font-size:9.5px; letter-spacing:0.16em; fill:var(--muted); } /* on ink (the Rural Health band-mounted instrument, §7.3): invert labels for legibility */ .band .map-label{fill:rgba(247,244,237,0.62)} /* the ONE living element: the ping rings */ .pinggrp .ring{ fill:none; stroke:var(--green-ping); stroke-width:1.25; transform-box:fill-box; transform-origin:center; animation:radar-ping 4.8s cubic-bezier(0.2,0.6,0.4,1) infinite; } /* stagger: home field, 6 pings (first ping fires at 0s, the animation-delay initial value) */ .pinggrp:nth-of-type(2) .ring{animation-delay:.9s} .pinggrp:nth-of-type(3) .ring{animation-delay:1.7s} .pinggrp:nth-of-type(4) .ring{animation-delay:2.6s} .pinggrp:nth-of-type(5) .ring{animation-delay:3.4s} .pinggrp:nth-of-type(6) .ring{animation-delay:4.1s} /* stagger: Rural Health band field, 7 pings — the Panhandle pair leads at 0s and .5s */ .band .pinggrp:nth-of-type(2) .ring{animation-delay:.5s} .band .pinggrp:nth-of-type(3) .ring{animation-delay:.9s} .band .pinggrp:nth-of-type(4) .ring{animation-delay:1.7s} .band .pinggrp:nth-of-type(5) .ring{animation-delay:2.6s} .band .pinggrp:nth-of-type(6) .ring{animation-delay:3.4s} .band .pinggrp:nth-of-type(7) .ring{animation-delay:4.1s} @keyframes radar-ping{ 0% {transform:scale(1); opacity:0.9} 70% {transform:scale(4); opacity:0} 100% {transform:scale(4); opacity:0} } /* ---- scroll-driven sweep (home hero only) ---------------------------------- The beam rotates COUNTER-CLOCKWISE through a full revolution over the first 80vh of scroll, and each ping throws a contact flare as the beam crosses its azimuth. Entirely CSS: the CSP forbids inline script, and v2 ships no JS. Because the animation is scroll-LINKED rather than time-based, each ping's flare can ride the same timeline at a fixed offset and stay in sync permanently — no timers, nothing to drift. The flare offsets below are DERIVED, not eyeballed. Each ping's bearing B was measured from the sweep origin (285,195) in SVG coords (y down). The beam's leading edge rests at -11.9deg (the drawn edge, L451 160) and, sweeping counter-clockwise, its angle DECREASES. So a ping at bearing B is crossed at p = ((-(B + 11.9)) mod 360) / 360 -> offset = p * 80vh Firing order therefore runs counter-clockwise from rest: mid-peninsula, north pair, Panhandle, Tampa Bay, lower peninsula, South Florida last. !! Reversing the sweep direction or moving a ping changes every offset. Do not just flip the sign on the rotation — recompute, or the flares fire off-beam. Unsupported browsers fall through to the frozen sweep + ambient pulse, which is exactly the pre-existing design — there is no broken intermediate state. */ @supports (animation-timeline: scroll()){ /* --- shared: what animates, and how ------------------------------------- */ .hero-home .sweep{ transform-box:view-box; transform-origin:285px 195px; animation:sweep-ccw linear both; } @keyframes sweep-ccw{ to{ transform:rotate(-360deg) } } .hero-home .pinggrp .hit{ fill:none; stroke:var(--green-ping); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; animation:beam-hit linear both; } @keyframes beam-hit{ 0% {transform:scale(1); opacity:0} 14% {transform:scale(1.25); opacity:1} 100% {transform:scale(6); opacity:0} } /* --- DESKTOP: drive from document scroll -------------------------------- Side-by-side hero, so the map is visible at load and sits near the top of the document (measured 2752x962: top 403px, clears the viewport at 828px = 86vh). Document-scroll offsets are therefore meaningful: progress 0 at load, 1 exactly as the map leaves. Flare offsets = fraction-of-sweep x 86vh. */ .hero-home .sweep{ animation-timeline:scroll(root block); animation-range:0 86vh; } .hero-home .pinggrp .hit{animation-timeline:scroll(root block)} .hero-home .pinggrp:nth-of-type(3) .hit{animation-range: 4.9vh 11.4vh} /* .057 mid-peninsula */ .hero-home .pinggrp:nth-of-type(2) .hit{animation-range:18.7vh 25.1vh} /* .217 due north */ .hero-home .pinggrp:nth-of-type(1) .hit{animation-range:31.9vh 38.4vh} /* .371 Panhandle */ .hero-home .pinggrp:nth-of-type(4) .hit{animation-range:47.7vh 54.2vh} /* .555 Tampa Bay */ .hero-home .pinggrp:nth-of-type(5) .hit{animation-range:60.2vh 66.6vh} /* .700 lower penin. */ .hero-home .pinggrp:nth-of-type(6) .hit{animation-range:67.9vh 74.4vh} /* .790 South Florida */ /* --- MOBILE: drive from the MAP'S OWN view progress ---------------------- The hero stacks, so the map falls BELOW the fold (measured 390x844: top at 894px = 106vh, clears the viewport at 1200px = 142vh). Document-scroll offsets are meaningless there — a 0-80vh sweep burned its whole revolution ~524px before the map even finished arriving, landing back on its rest angle while still onscreen. That was the bug: a 360deg turn ends where it started, so it read as "frozen", not "stopped". Binding to the map's own view-timeline fixes it at ANY viewport size: the sweep starts as the map enters and completes exactly as it leaves. Flares are percentages OF THE COVER RANGE, so they stay locked to the beam regardless of scroll distance. (A view-timeline can't be used on desktop too: the map is already 40% through its cover range at load there, which would silently eat the first three flares.) */ @media(max-width:900px){ .hero-home .field{view-timeline:--radar block} .hero-home .sweep{ animation-timeline:--radar; animation-range:cover 0% cover 100%; } .hero-home .pinggrp .hit{animation-timeline:--radar} .hero-home .pinggrp:nth-of-type(3) .hit{animation-range:cover 5.7% cover 13.2%} .hero-home .pinggrp:nth-of-type(2) .hit{animation-range:cover 21.7% cover 29.2%} .hero-home .pinggrp:nth-of-type(1) .hit{animation-range:cover 37.1% cover 44.6%} .hero-home .pinggrp:nth-of-type(4) .hit{animation-range:cover 55.5% cover 63.0%} .hero-home .pinggrp:nth-of-type(5) .hit{animation-range:cover 70.0% cover 77.5%} .hero-home .pinggrp:nth-of-type(6) .hit{animation-range:cover 79.0% cover 86.5%} } } /* Scroll-driven animations ignore animation-duration, so the global reduced-motion damper (§ bottom of file) does not stop them. Kill explicitly. */ @media(prefers-reduced-motion: reduce){ .hero-home .sweep, .hero-home .pinggrp .hit{animation:none} } @media(max-width:900px){ .hero-home .field{margin-top:0; justify-self:start} } @media(max-width:640px){ .field{max-width:min(100%, 420px)} .map-label, .xhair{display:none} } /* ============ 11. HOW-IT-WORKS — ruled editorial columns ============ */ .method{ border-top:1px solid var(--hairline); margin-top:var(--space-half); display:grid; grid-template-columns:1fr 1fr 1fr; } .method > div{padding:clamp(1.75rem,3vw,2.75rem) clamp(1.25rem,2.5vw,2.5rem) 0 0} .method > div + div{border-left:1px solid var(--hairline); padding-left:clamp(1.25rem,2.5vw,2.5rem)} .method .numeral{ display:block; font-family:var(--serif); font-weight:600; font-size:clamp(2.9rem, 1.9rem + 3.8vw, 5.5rem); line-height:1; letter-spacing:-0.02em; font-variant-numeric:lining-nums tabular-nums; } .method .numeral::after{content:""; display:block; width:28px; height:2px; background:var(--gold-rule); margin-top:0.85rem} .method .t-subtitle{margin:1.4rem 0 0.7rem} .method p{color:var(--muted); font-size:1rem} /* label-led variant: a --t-label opener ("Free" / "Flat fee") when the columns are offers, not sequential steps */ .method .t-label{color:var(--muted); display:block} @media(max-width:900px){ .method{grid-template-columns:1fr} .method > div{padding:var(--s-6) 0} .method > div + div{border-left:0; border-top:1px solid var(--hairline); padding-left:0} } /* ============ 12. REPORT LIST — ruled editorial list, hanging numerals ============ */ /* Bible §7.6: what's-in-the-report rows with hanging serif numerals — never four cards */ .report-list{border-top:1px solid var(--hairline); margin-top:var(--space-half)} .report-list > div{ display:grid; grid-template-columns:3.2rem 1fr; gap:var(--s-5); padding:1.75rem 0; border-bottom:1px solid var(--hairline); } .report-list .no{ font-family:var(--serif); font-weight:600; font-size:1.45rem; line-height:1.3; font-variant-numeric:lining-nums tabular-nums; } .report-list .no::after{content:""; display:block; width:20px; height:2px; background:var(--gold-rule); margin-top:0.5rem} .report-list h3{margin-bottom:0.55rem} .report-list .item > p{color:var(--muted); font-size:1rem; max-width:62ch} .report-list .item > p + p{margin-top:0.8em} .report-list .ledger{max-width:62ch} @media(max-width:640px){ .report-list > div{grid-template-columns:2.2rem 1fr; gap:var(--s-4)} } /* ============ 13. VERDICT STAMPS + LEDGER ROWS ============ */ .stamp{ display:inline-block; font-family:var(--sans); font-weight:600; font-size:0.6875rem; letter-spacing:0.1em; text-transform:uppercase; line-height:1; font-feature-settings:"tnum" 1; padding:3px 7px; border:1px solid; border-radius:2px; white-space:nowrap; } .stamp--hi{color:var(--green); border-color:var(--green); background:var(--green-tint)} .stamp--mid{color:var(--ochre); border-color:var(--ochre); background:var(--ochre-tint)} .stamp--lo{color:var(--skip); border-color:var(--skip); background:var(--skip-tint)} /* a stamp never appears without its reason on the same ruled row */ .ledger{border-top:1px solid var(--hairline); margin-top:1.4rem} .ledger .row{ display:flex; gap:0.9rem; align-items:baseline; padding:0.85rem 0; border-bottom:1px solid var(--hairline); font-size:0.9375rem; color:var(--muted); } .ledger .row .stamp{flex:none; position:relative; top:-1px} @media(max-width:640px){ .ledger .row{flex-direction:column; gap:0.55rem} } /* ============ 14. THE ISSUE-MOCK OBJECT ============ */ /* the ONE shadow on the site: hard offset, print-registration, never blurred */ .artifact{ background:var(--paper-bright); border:1px solid var(--hairline); box-shadow:8px 8px 0 rgba(27,45,68,0.10); } .artifact .chrome{padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--hairline)} .artifact .sender{display:flex; align-items:center; gap:0.7rem; padding-bottom:var(--s-3)} .artifact .sender svg{flex:none} .artifact .sender .who{font-weight:600; font-size:0.9375rem} .artifact .sender .when{font-size:0.8125rem; color:var(--muted); margin-left:auto; white-space:nowrap} .artifact .chrome .line{ display:flex; gap:0.6rem; font-size:0.8125rem; color:var(--muted); padding-top:var(--s-2); border-top:1px solid var(--hairline); } .artifact .chrome .line b{ font-weight:600; color:var(--ink); flex:none; width:4.2rem; font-size:0.6875rem; letter-spacing:0.06em; text-transform:uppercase; line-height:1.8; } .artifact .body{padding:1.6rem var(--s-5) 1.75rem} .artifact .sect{ font-family:var(--sans); font-weight:600; font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; line-height:1.4; color:var(--gold); margin:1.6rem 0 0.8rem; display:flex; align-items:center; gap:0.7rem; } .artifact .sect::after{content:""; flex:1; height:1px; background:var(--hairline)} .artifact .sect:first-child{margin-top:0} .artifact .entry{display:flex; gap:0.85rem; align-items:baseline; padding:0.7rem 0; font-size:0.9375rem; line-height:1.55} .artifact .entry + .entry{border-top:1px solid var(--hairline)} .artifact .entry .stamp{flex:none; position:relative; top:-1px} .artifact .entry .why{color:var(--muted)} .artifact .colophon{ margin-top:1.6rem; padding-top:var(--s-4); border-top:1px solid var(--hairline); font-family:var(--serif); font-style:italic; font-size:0.875rem; color:var(--muted); } @media(max-width:640px){ .artifact .entry{flex-direction:column; gap:0.55rem} } /* annotation rail beside the artifact — holds the prose measure when reused full-width (services INCLUDED rows, About how-we-work rows); a no-op inside the 4-column rail */ .inside-list{border-top:1px solid var(--hairline); max-width:var(--prose)} .inside-list > div{padding:1.35rem 0; border-bottom:1px solid var(--hairline)} .inside-list b{display:block; font-family:var(--serif); font-weight:600; font-size:1.125rem; margin-bottom:0.3rem} .inside-list p{font-size:0.9375rem; color:var(--muted)} .rail-note{margin-top:1.75rem; max-width:var(--prose)} .rail-note p{font-size:0.9375rem; color:var(--muted)} .rail-note p + p{margin-top:1.05em} /* ============ 15. STAT STRIP — the receipts ============ */ .stats{ position:relative; padding:0; border-top:2px solid var(--hairline-strong); border-bottom:2px solid var(--hairline-strong); } .stats::before{ content:""; position:absolute; top:-2px; height:3px; width:56px; background:var(--gold-rule); left:max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); } .stats .cells{display:grid; grid-template-columns:1fr 1fr 1fr} .stats .cell{padding:var(--s-8) clamp(1.25rem,2.5vw,2.75rem)} .stats .cell + .cell{border-left:1px solid var(--hairline)} .stats .cell:first-child{padding-left:0} .stats .cell:last-child{padding-right:0} .stats .t-label{color:var(--gold); display:block; margin-bottom:1.1rem} .stats .t-figure{display:block} .stats .t-figure::after{content:""; display:block; width:28px; height:2px; background:var(--gold); margin-top:1rem} .stats .cell p{margin-top:1rem; font-size:0.9375rem; color:var(--muted); max-width:34ch} @media(max-width:900px){ .stats .cells{grid-template-columns:1fr} .stats .cell{display:grid; grid-template-columns:auto 1fr; column-gap:var(--s-5); align-items:start; padding:var(--s-5) 0} .stats .cell + .cell{border-left:0; border-top:1px solid var(--hairline)} .stats .cell .t-figure{grid-row:1 / span 2; font-size:2.9rem} .stats .cell .t-figure::after{content:none} .stats .t-label{margin-bottom:0.35rem} .stats .cell p{margin-top:0.25rem} } /* ============ 16. INK BANDS — subscribe (+ footer below) ============ */ .band{background:var(--ink-deep); color:var(--paper); padding:var(--space-section) 0} .band .t-title{color:var(--paper)} .band .t-dek{color:var(--paper); opacity:0.75} .band .t-fine{color:var(--paper); opacity:0.62} .band .rule{border-top-color:var(--hairline-on-ink)} .band .folio .t-label{color:var(--paper); opacity:0.62} .band a:not(.btn){ color:var(--paper); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--hairline-on-ink); transition:text-decoration-color 150ms ease; } .band a:not(.btn):hover{text-decoration-color:var(--gold-rule)} /* band-mounted instrument (Rural Health, §7.3): center it in the side rail */ .band .side{display:flex; align-items:center; justify-content:center} /* band figure group: --t-figure knockouts under gold labels with fine-print notes (§7.3) */ .band-figs .t-label{color:var(--gold-rule)} .band-figs .t-figure{display:block; margin-top:0.9rem} .band-figs .t-fine{margin-top:0.8rem; max-width:36ch} .band-figs > div + div{margin-top:var(--s-7)} /* centered is acceptable here and only here */ .band--center{text-align:center} .band--center .band-inner{max-width:var(--prose); margin:0 auto; display:flex; flex-direction:column; align-items:center} .band--center .t-dek{margin-top:1.4rem} .band--center .btn{margin-top:2.25rem} .band--center .t-fine{margin-top:var(--s-5)} .band--center .t-fine + .t-fine{margin-top:var(--s-2)} /* ============ 17. GUARANTEE ROWS + SERVICES BRIDGE ============ */ .bridge{ display:grid; grid-template-columns:7fr 5fr; gap:0; border-top:1px solid var(--hairline); margin-top:var(--space-half); } .bridge > div{padding:clamp(2rem,4vw,3.25rem) clamp(1.5rem,3vw,3rem) clamp(1.5rem,2.5vw,2.5rem) 0} .bridge > div + div{border-left:1px solid var(--hairline); padding-left:clamp(1.5rem,3vw,3rem); padding-right:0} .bridge .t-label{color:var(--muted); display:block; margin-bottom:1rem} .bridge .t-subtitle{margin-bottom:0.8rem} .bridge p{color:var(--muted); font-size:1rem; max-width:52ch} .bridge .link{display:inline-flex; align-items:center; margin-top:1.4rem; font-weight:500; font-size:0.9375rem} @media(max-width:900px){ .bridge{grid-template-columns:1fr} .bridge > div{padding:var(--s-6) 0} .bridge > div + div{border-left:0; border-top:1px solid var(--hairline); padding-left:0} } /* guarantee treatment: check-icon ruled rows, never a boxed callout */ .guarantee{border-top:1px solid var(--hairline)} .guarantee .g-row{ display:flex; gap:0.9rem; align-items:baseline; padding:0.9rem 0; border-bottom:1px solid var(--hairline); font-size:0.9375rem; } .guarantee .g-row svg{flex:none; position:relative; top:3px} /* ============ 18. FOOTER — sitemap + colophon on ink ============ */ .footer{ background:var(--ink-deep); color:var(--paper); border-top:1px solid var(--hairline-on-ink); padding:var(--space-half) 0 var(--s-6); } .footer .cols{display:grid; grid-template-columns:5fr 2.3fr 2.3fr 2.4fr; gap:var(--s-7) var(--s-6); padding-bottom:var(--space-half)} .footer .lockup{color:var(--paper)} .footer .colophon{margin-top:1.2rem; font-size:0.9rem; line-height:1.7; max-width:34ch; opacity:0.75} .footer .t-label{color:var(--paper); opacity:0.55; display:block; margin-bottom:1.1rem} .footer ul{list-style:none; padding:0} .footer li{margin-bottom:0.65rem} .footer li a, .footer .colophon a{ font-size:0.9375rem; color:var(--paper); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--hairline-on-ink); transition:text-decoration-color 150ms ease; } .footer li a:hover, .footer .colophon a:hover{text-decoration-color:var(--gold-rule)} .footer .standing{font-size:0.875rem; line-height:1.6; opacity:0.75; margin-top:var(--s-4); max-width:26ch} .footer .legal{ border-top:1px solid var(--hairline-on-ink); padding-top:var(--s-5); display:flex; justify-content:space-between; gap:var(--s-5); flex-wrap:wrap; font-size:0.8125rem; opacity:0.62; } @media(max-width:900px){ .footer .cols{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .footer .cols{grid-template-columns:1fr} } /* ============ 19. RULED TABLE (engagement tiers etc.) ============ */ .table-ruled{width:100%; border-collapse:collapse; font-size:0.9375rem} .table-ruled th{ font-family:var(--sans); font-weight:600; font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; line-height:1.4; font-feature-settings:"tnum" 1; color:var(--muted); text-align:left; padding:0 var(--s-4) var(--s-3) 0; border-bottom:2px solid var(--hairline-strong); } .table-ruled td{ padding:var(--s-4) var(--s-4) var(--s-4) 0; vertical-align:top; border-bottom:1px solid var(--hairline); font-variant-numeric:lining-nums tabular-nums; } .table-ruled td.tier{font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,1.16rem + 0.55vw,1.55rem); line-height:1.25} .table-ruled .num{font-feature-settings:"tnum" 1; white-space:nowrap} @media(max-width:640px){ .table-scroll{overflow-x:auto} .table-ruled{min-width:560px} } /* ============ 20. FAQ — ruled disclosure rows, no JS ============ */ /* grouped lists: the questions stack under three folio-opened groups (§7.5) */ .faq-group + .faq-group{margin-top:var(--space-half)} .faq-group .folio{margin-bottom:1.5rem} .faq-list{border-top:1px solid var(--hairline)} .faq-list details{border-bottom:1px solid var(--hairline)} .faq-list summary{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-5); padding:1.4rem 0; cursor:pointer; list-style:none; font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem, 1.16rem + 0.55vw, 1.55rem); line-height:1.25; } .faq-list summary::-webkit-details-marker{display:none} .faq-list summary svg{flex:none; position:relative; top:4px; color:var(--muted)} .faq-list details[open] summary svg{transform:rotate(180deg)} .faq-list .faq-a{max-width:var(--prose); padding:0 0 1.6rem; color:var(--ink)} .faq-list .faq-a p + p{margin-top:1.05em} /* rail-less FAQ: one column of grouped disclosure rows, left-anchored to the same gutter as the hero (no centering — keeps the page's left rhythm) */ .faq-solo{max-width:760px} /* ============ 21. POLICY — prose sections under running heads (privacy) ============ */ /* Bible §7.7: ≤640px prose blocks opened by --t-label running heads over hairlines */ .policy{max-width:var(--prose)} .policy .psec{border-top:1px solid var(--hairline); padding:1.6rem 0 2.4rem} .policy .psec .t-label{color:var(--gold); display:block; margin-bottom:1rem} /* label-accent role, matching .artifact .sect */ .policy .psec p + p{margin-top:1.15em} .policy .updated{margin-top:var(--s-4)} /* ============ 22. FORMS (ESP retrofit needs no new CSS) ============ */ .form-field{max-width:var(--prose)} .form-field + .form-field{margin-top:var(--s-5)} .form-field label{ display:block; margin-bottom:var(--s-2); font-family:var(--sans); font-weight:600; font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; line-height:1.4; color:var(--muted); } input[type="text"], input[type="email"], select, textarea{ width:100%; border:1px solid var(--hairline); border-radius:0; background:var(--paper-bright); color:var(--ink); font-family:var(--sans); font-weight:400; font-size:1.0625rem; line-height:1.65; padding:var(--s-3); } input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; /* ink: >=3:1 on every ground */ } .form-error{ font-size:0.8125rem; line-height:1.5; color:var(--skip); border-left:1px solid var(--skip); padding-left:var(--s-3); margin-top:var(--s-2); } /* ============ 23. UTILITIES (budgeted) ============ */ .mt-half{margin-top:var(--space-half)} .mt-6{margin-top:var(--s-6)} .mt-5{margin-top:var(--s-5)} section[id], [id^="q-"], details[id]{scroll-margin-top:5.5rem} /* clear the sticky masthead on anchor jumps (details[id] = the FAQ's legacy question anchors) */ .visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; } /* ============ 24. MOTION DISCIPLINE ============ */ @media(prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:0.01ms; animation-iteration-count:1; transition-duration:0.01ms; } .pinggrp .ring{animation:none; transform:scale(1.9); opacity:0.35} .btn:hover svg{transform:none} } /* ============ 25. PRINT ============ */ @media print{ .masthead{display:none} body{background:#fff} .band, .footer{background:none; color:var(--ink); border:0} .band .t-title, .band .t-dek, .band .t-fine, .band a:not(.btn), .footer .t-label, .footer li a, .footer .colophon a, .footer .lockup{color:var(--ink)} .band a:not(.btn), .footer li a{text-decoration-color:var(--hairline)} .artifact{box-shadow:none} .pinggrp .ring{animation:none; opacity:0.35} .btn{background:none; color:var(--ink); border:1px solid var(--ink)} .field{max-width:380px} }