/* ========================================================================== 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} } @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} }