/* ========================================================================== figma-site.css — site-wide text styling (everything EXCEPT the home page) -------------------------------------------------------------------------- WHAT THIS IS FOR The inner pages are policy / guide pages: prose, no Figma frame to match. They only need to READ like the home page — same typeface mapping, same text colours, same type scale, same spacing rhythm, same content width. There is no layout to reproduce here, so this file deliberately sets typography and rhythm only, and leaves each page's structure alone. THE HOME PAGE IS NOT TOUCHED Every selector is scoped to `body:not(.home)`. The home page cannot match any rule in this file, so its rendering is provably unchanged. Home keeps its own sheet, figma-home.css, which is unmodified. COLOURED BANDS ARE EXCLUDED Several pages carry bands with light text on a dark/green background: .policy-content green band on the privacy & terms pages .cards green band on setup-guide / thank-you .thankyouSection hero on thank-you Body-copy colour rules skip anything inside those, so white text on green stays white. Only the neutral prose areas are recoloured. SCALE Shares the home page's proportional unit so the two stay in step: --u : one Figma pixel, 1/1920th of the artboard `calc(18 * var(--u))` is the same 18px the home page uses, and it scales with the viewport the same way. Type keeps the same `max(floor, …)` readability floors. ========================================================================== */ /* ========================================================================== 00 · TOKENS + FONT MAPPING -------------------------------------------------------------------------- The three SF Pro Display OTFs are registered by the PureWL cart CSS as three separate FAMILIES, each declared `normal` (400) — see figma-home.css for the full explanation. Asking for font-weight 600/700 therefore selects no heavier file; Chrome fakes one by smearing glyphs, on top of whichever face is already active. On these pages that was doubling up: h3 sits on Sf-Pro-Family-bold AND asks for weight 700, so it rendered a fake-bolded real bold. Synthesis is turned off and the FAMILY carries the weight. ========================================================================== */ body:not(.home) { --u: clamp(0.6666667px, 0.05208333vw, 1px); --fg-green: #009949; /* links, eyebrow */ --fg-green-deep: #005a2e; /* page title */ --fg-ink: #1a1919; /* headings */ --fg-muted: #6d6d6d; /* body copy */ --fg-container: calc(1456 * var(--u)); --fg-band: calc(120 * var(--u)); } body:not(.home), body:not(.home) *, body:not(.home) *::before, body:not(.home) *::after { font-synthesis-weight: none !important; } /* Headings and emphasis → Medium (there is no semibold file) */ body:not(.home) .all-content h1, body:not(.home) .all-content h2, body:not(.home) .all-content h3, body:not(.home) .all-content h4, body:not(.home) .all-content h5, body:not(.home) .all-content h6, body:not(.home) .all-content strong, body:not(.home) .all-content b, body:not(.home) .all-content th, body:not(.home) .all-content a { font-family: 'Sf-Pro-Family-Medium', sans-serif !important; font-weight: normal !important; } /* Prose → Regular */ body:not(.home) .all-content p, body:not(.home) .all-content li, body:not(.home) .all-content td { font-family: 'Sf-Pro-Family-Regular', sans-serif !important; font-weight: normal !important; } /* Page title → real Bold, as the home H1 is */ body:not(.home) .section_one .cta-text { font-family: 'Sf-Pro-Family-bold', sans-serif !important; font-weight: normal !important; } /* The policy pages ship their own `section.spacer.padder.all-content h3 { font-family: Sf-Pro-Family-bold !important }`, which out-ranks the grouped rule above on specificity. Home sets its headings in Medium, so the selector shape is matched here to bring these in line. Delete this block to let the pages keep their bolder headings. */ body:not(.home) section.spacer.padder.all-content h1, body:not(.home) section.spacer.padder.all-content h2, body:not(.home) section.spacer.padder.all-content h3, body:not(.home) section.spacer.padder.all-content h4 { font-family: 'Sf-Pro-Family-Medium', sans-serif !important; font-weight: normal !important; } /* ========================================================================== 01 · CONTENT WIDTH + BAND RHYTHM Matches the home page: 1432px of content + 24px gutter, 120px bands. Was: Bootstrap's 1320px container. ========================================================================== */ body:not(.home) .container, body:not(.home) .container-lg { max-width: var(--fg-container) !important; } body:not(.home) .padder { padding-top: var(--fg-band) !important; padding-bottom: var(--fg-band) !important; } /* ========================================================================== 02 · PAGE HERO (.section_one — the eyebrow + title block) Mirrors the home hero's type, which these pages already echo loosely. ========================================================================== */ /* Eyebrow — home: 22px / lh 0.818 / #009949 · was 20px/30px */ body:not(.home) .section_one .green-text { font-size: max(16px, calc(22 * var(--u))) !important; line-height: 0.818 !important; color: var(--fg-green) !important; display: block !important; margin-bottom: calc(20 * var(--u)) !important; } /* Title — home: 66px / lh 1.235 / #005a2e · was 64px/80px on the Regular face */ body:not(.home) .section_one .cta-text { font-size: max(40px, calc(66 * var(--u))) !important; line-height: 1.235 !important; color: var(--fg-green-deep) !important; display: block !important; } /* ========================================================================== 03 · PROSE (.all-content — the main body of every policy page) -------------------------------------------------------------------------- Type and colour taken straight from the home page: headings 26px / lh 1.231 / #1a1919 (home's card-title style) body 18px / lh 1.556 / #6d6d6d (home's body-copy style) Was: headings 27px double-bolded #212529 · body 16px/24 #212529. ========================================================================== */ body:not(.home) .all-content h1, body:not(.home) .all-content h2, body:not(.home) .all-content h3 { font-size: max(19px, calc(26 * var(--u))) !important; line-height: 1.231 !important; color: var(--fg-ink) !important; margin-top: calc(48 * var(--u)) !important; margin-bottom: calc(20 * var(--u)) !important; } body:not(.home) .all-content h4, body:not(.home) .all-content h5, body:not(.home) .all-content h6 { font-size: max(16px, calc(20 * var(--u))) !important; line-height: 1.3 !important; color: var(--fg-ink) !important; margin-top: calc(32 * var(--u)) !important; margin-bottom: calc(14 * var(--u)) !important; } /* First heading in the band shouldn't push the band's own padding open */ body:not(.home) .all-content > .container > *:first-child, body:not(.home) .all-content h1:first-child, body:not(.home) .all-content h2:first-child, body:not(.home) .all-content h3:first-child { margin-top: 0 !important; } body:not(.home) .all-content p { font-size: max(14px, calc(18 * var(--u))) !important; line-height: 1.556 !important; color: var(--fg-muted) !important; margin-top: 0 !important; margin-bottom: calc(20 * var(--u)) !important; } body:not(.home) .all-content ul, body:not(.home) .all-content ol { margin-top: 0 !important; margin-bottom: calc(20 * var(--u)) !important; padding-left: calc(24 * var(--u)) !important; } body:not(.home) .all-content li { font-size: max(14px, calc(18 * var(--u))) !important; line-height: 1.556 !important; color: var(--fg-muted) !important; margin-bottom: calc(10 * var(--u)) !important; } body:not(.home) .all-content li:last-child { margin-bottom: 0 !important; } /* Emphasis keeps the surrounding colour — only the face changes. The clause numbers ("1.1.", "3.1.", "3.2." …) are inside their paragraph, so forcing an ink colour here made them darker than the sentence they belong to. Inheriting keeps them the same colour as the body text and lets the Medium face do the emphasising. */ body:not(.home) .all-content strong, body:not(.home) .all-content b { color: inherit !important; } /* Links — brand green, was Bootstrap blue / plain black */ body:not(.home) .all-content a { color: var(--fg-green) !important; text-decoration: underline !important; text-underline-offset: 2px !important; } body:not(.home) .all-content a:hover, body:not(.home) .all-content a:focus { color: var(--fg-green-deep) !important; } /* Tables read as prose on these pages */ body:not(.home) .all-content table { width: 100% !important; margin-bottom: calc(24 * var(--u)) !important; } body:not(.home) .all-content th, body:not(.home) .all-content td { font-size: max(14px, calc(16 * var(--u))) !important; line-height: 1.5 !important; padding: calc(12 * var(--u)) calc(14 * var(--u)) !important; border: 1px solid #e6e6e6 !important; vertical-align: top !important; } body:not(.home) .all-content th { color: var(--fg-ink) !important; background: #f6f6f6 !important; text-align: left !important; } body:not(.home) .all-content td { color: var(--fg-muted) !important; } /* ========================================================================== 04 · COLOURED BANDS — keep their light text -------------------------------------------------------------------------- .policy-content (green), .cards (green) and .thankyouSection carry light text on a dark ground. Nothing above recolours them, because every prose rule is scoped inside .all-content — these rules only fix the typeface so the bands stop rendering a synthetic bold, and pin the light colour so a later edit can't darken it. ========================================================================== */ body:not(.home) .policy-content h1, body:not(.home) .policy-content h2, body:not(.home) .policy-content h3, body:not(.home) .cards h2, body:not(.home) .cards h3, body:not(.home) .cards h4, body:not(.home) .thankyouSection h1, body:not(.home) .thankyouSection h2 { font-family: 'Sf-Pro-Family-Medium', sans-serif !important; font-weight: normal !important; } body:not(.home) .policy-content p, body:not(.home) .policy-content li, body:not(.home) .cards p, body:not(.home) .thankyouSection p { font-family: 'Sf-Pro-Family-Regular', sans-serif !important; font-weight: normal !important; font-size: max(14px, calc(18 * var(--u))) !important; line-height: 1.556 !important; } body:not(.home) .policy-content li { margin-bottom: calc(10 * var(--u)) !important; } /* ========================================================================== 05 · TABLET / MOBILE Below the desktop range --u is already floored, so only the band rhythm and the container need relaxing. ========================================================================== */ @media (max-width: 1279.98px) { body:not(.home) .container, body:not(.home) .container-lg { max-width: 100% !important; padding-left: 32px !important; padding-right: 32px !important; } } @media (max-width: 991.98px) { body:not(.home) .padder { padding-top: 60px !important; padding-bottom: 60px !important; } body:not(.home) .section_one .cta-text { font-size: 34px !important; line-height: 1.24 !important; } body:not(.home) .all-content h1, body:not(.home) .all-content h2, body:not(.home) .all-content h3 { font-size: 22px !important; margin-top: 32px !important; } }