/** * site.css — the public marketing site's only stylesheet. * * ── WHAT THIS FILE MAY AND MAY NOT DO ─────────────────────────────────────── * * MAY: own marketing layout — the nav, the hero, section bands, card grids, * the logo marquee, the footer. None of that exists in the SDK and none of it * should: the SDK is the vocabulary of the authenticated application, and a * mega-menu is not part of that vocabulary. * * MAY: read any design token. That is the integration point, and the reason the * Brand Switcher repaints this site and the application together from one * source. * * MAY NOT: redefine a design token at :root. Brands are owned by * branding/tokens.css and nothing else. If this file set --accent it would * silently defeat the switcher for whichever pages loaded it. * * MAY NOT: reference an SDK internal class name. Same contract every other * consumer is held to — it is what keeps SDK internals free to change. * * ── THE MARKETING TYPE SCALE IS LOCAL, ON PURPOSE ─────────────────────────── * * A marketing headline is 5rem. The largest token in the SDK's scale, --fs-5xl, * is sized for an application heading and is nowhere near that. The temptation * is to redefine --fs-* here so the numbers come out bigger. * * That would be wrong twice: tokens.css's own header forbids touching the type * scale without SDK-owner sign-off (it is component-internal and there is no * visual-regression tooling to catch a mistake — ND-46/47), and this stylesheet * shares a document with sdk.css, so a bigger --fs-lg would resize anything the * SDK rendered on the same page. * * So the marketing scale lives in its own --site-* namespace below. It borrows * the brand's --font and --fw-* weights, which is the part that must match, and * keeps its own sizes, which is the part that must not. * * ── STRUCTURAL DEBT WORTH NAMING ──────────────────────────────────────────── * * Everything here is scoped under `body.site`. sdk.css styles `body` directly, * and this document loads both. Scoping means this file always wins on * specificity without either stylesheet needing to know about the other, but it * is a guard, not a boundary — if the SDK ever adds a `body.site` rule these * will collide. Unlikely enough to accept, worth writing down. */ /* ══════════════════════════════════════════════════════════════════════════ 1. Marketing type + rhythm scale (local namespace — see header) ══════════════════════════════════════════════════════════════════════════ */ body.site { /* Sizes mirror OneShield's own scale, which is where the visual match comes from: display 7rem, h1 5rem, h3 3rem, h4 2rem, h2 2.25rem. Their h2/h3 ordering is inverted relative to what you would expect — that is a quirk of their Webflow setup and is NOT reproduced here, because inheriting someone else's tooling artefact is not the same as matching their design. */ --site-display: clamp(2.75rem, 8vw, 7rem); --site-h1: clamp(2.25rem, 6vw, 5rem); --site-h2: clamp(1.75rem, 3.5vw, 3rem); --site-h3: clamp(1.375rem, 2.4vw, 2rem); --site-h4: clamp(1.125rem, 1.6vw, 1.375rem); --site-lead: clamp(1.0625rem, 1.4vw, 1.3125rem); --site-body: 1.0625rem; --site-small: 0.9375rem; --site-micro: 0.8125rem; /* Headings are 800 and line-height 1.1 — the single most recognisable part of the OneShield look after the accent colour. */ --site-heading-weight: 800; --site-heading-lh: 1.06; --site-heading-tracking: -0.022em; /* Vertical rhythm. Marketing bands are far taller than application panels, so these are independent of --spacing-*. */ --site-band-y: clamp(3.5rem, 8vw, 7.5rem); --site-gap: clamp(1.25rem, 2.5vw, 2rem); --site-max: 1240px; --site-max-narrow: 760px; /* Marketing surfaces derive from brand tokens so every brand gets them free. color-mix rather than a hardcoded rgba(): a fixed alpha over an unknown brand background is how a "subtle" tint becomes invisible on one brand and muddy on another. */ --site-hairline: color-mix(in srgb, var(--border) 70%, transparent); --site-glass: color-mix(in srgb, var(--bg) 82%, transparent); --site-tile-veil: color-mix(in srgb, var(--bg) 55%, transparent); } /* ══════════════════════════════════════════════════════════════════════════ 2. Base ══════════════════════════════════════════════════════════════════════════ */ body.site { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--site-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body.site *, body.site *::before, body.site *::after { box-sizing: border-box; } body.site h1, body.site h2, body.site h3, body.site h4 { margin: 0; font-weight: var(--site-heading-weight); line-height: var(--site-heading-lh); letter-spacing: var(--site-heading-tracking); text-wrap: balance; } body.site h1 { font-size: var(--site-h1); } body.site h2 { font-size: var(--site-h2); } body.site h3 { font-size: var(--site-h3); } body.site h4 { font-size: var(--site-h4); letter-spacing: -0.01em; } body.site p { margin: 0; text-wrap: pretty; } body.site img, body.site svg { max-width: 100%; } body.site ul, body.site ol { margin: 0; padding: 0 0 0 1.15em; } body.site li + li { margin-top: 0.4em; } /* ── THE LINK RESET, AND THE BUG IT CAUSED THREE TIMES ────────────────────── This was `body.site a { color: inherit; text-decoration: none; }`, and that one declaration silently broke every component that is an : body.site a (0,1,2) ← two type selectors + one class .btn-primary (0,1,0) (0,1,2) beats (0,1,0), so `.btn-primary { color: var(--text-on-accent) }` never applied to a CTA rendered as a link. The hero and header "Get a quote" buttons are anchors; the quote-bar "Start" is a