/* ========================================================================== Northeast Discount Transmission — pitch site Rebuilt from the kafka-law-firm Framer reference (dossier 2026-08-04). Canvas: ~84% white; two near-black framing bands (hero + CTA/footer). Type: Newsreader (display) + Golos Text (body). Accent #8A2438 oxblood — only in the dossier's listed slots. Everything square except the single 99px nav pill. ========================================================================== */ :root { --ink: #101010; --ink-soft: rgba(16, 16, 16, 0.78); --ink-faint: rgba(16, 16, 16, 0.55); --paper: #ffffff; --dark: #101010; --hero: #0a0a0a; --accent: #8A2438; --accent-rgb: 138, 36, 56; --font-display: "Newsreader", Georgia, serif; --font-body: "Golos Text", system-ui, sans-serif; /* contact wizard tokens (palette-agnostic shared component) */ --wz-backdrop: rgba(10, 10, 10, 0.66); --wz-surface: #ffffff; --wz-line: #e4e2df; --wz-ink: #101010; --wz-ink-soft: #5f5d5a; --wz-accent: #8A2438; --wz-accent-strong: #6d1c2d; --wz-accent-tint: rgba(138, 36, 56, 0.06); --wz-hover-line: #8A2438; --wz-font-ui: "Golos Text", system-ui, sans-serif; --wz-radius: 2px; } * { box-sizing: border-box; } html { scroll-behavior: auto; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, p, blockquote { margin: 0; } button { font-family: inherit; } ul { margin: 0; padding: 0; list-style: none; } /* Single grouped nowrap rule for every pill / button label */ .site-header__cta, .wizard-nav .button, .nav-overlay__links .site-header__cta { white-space: nowrap; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- layout wrapper (gutter reproduced, never hardcoded) ---------- */ .wrap { width: 100%; max-width: 1368px; margin-inline: auto; padding-inline: max(24px, calc((100% - 1368px) / 2)); } /* ---------- shared type ---------- */ .eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #000000; } /* oxblood tick mark — eyebrow accent slot */ .eyebrow::before { content: ""; flex: 0 0 auto; width: 14px; height: 2px; background: var(--accent); } .eyebrow--on-dark { color: rgba(255, 255, 255, 0.85); } .section-title { font-family: var(--font-display); font-size: 48px; font-weight: 400; /* 1.1 packs a 48px serif tight enough that descenders meet the next line's ascenders on any two-line heading. */ line-height: 1.22; letter-spacing: -0.02em; color: var(--ink); margin-top: 18px; } .text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink); } .text-link .arrow { flex: 0 0 auto; transition: transform 0.2s ease; } .text-link:hover { color: var(--ink); } /* ---------- header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 91px; /* Translucent, never frosted. backdrop-filter would make this element the containing block for position:fixed descendants, and .nav-overlay is one of them - the mobile menu would size against the 91px header instead of the viewport and collapse. If a frosted look is ever wanted, #nav-toggle AND .nav-overlay must both move out to first, because the menu is driven by the sibling selector .nav-toggle-input:checked ~ .nav-overlay. */ background: rgba(10, 10, 10, 0.76); transition: background 0.3s ease; } .site-header.is-scrolled { /* Opaque, not 0.94: at that alpha the hero's own CTA reads through the bar and collides with the nav labels. */ background: var(--hero); } .site-header__inner { height: 100%; max-width: 1368px; margin-inline: auto; padding-inline: max(24px, calc((100% - 1368px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* Both brands live in the bar on both pages; the active one is marked, never the inactive one dimmed. Greying the Northeast mark would push a 71%-white logo into its failing contrast range. */ .site-header__brands { display: flex; align-items: stretch; align-self: stretch; flex: 0 0 auto; } .brand-slot { display: flex; align-items: center; padding-inline: 20px; position: relative; text-decoration: none; } /* Sized by WIDTH, not height. The Northeast mark is a 2.43:1 arched wordmark whose strokes are already thin; matching the Hay script's height shrinks it to ~83px wide and it reads as a smudge. Its original slot was 126px. */ .brand-slot__mark { width: 126px; height: auto; display: block; } /* The Hay & Sons script is navy ink and measures 1.21:1 on the dark bar, so it sits on a paper plate spanning the bar's full height. The plate is the reason no reversed white version of their mark had to be invented. */ .brand-slot--hay { background: var(--paper); } /* The script is 1.62:1 and much heavier per unit height, so it holds its own against the wordmark at a smaller width. */ .brand-slot__mark--hay { width: 84px; } .brand-slot.is-active::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; background: var(--accent-on-dark); } /* Inside the paper plate the on-dark accent measures 3.72:1 and reads washed out; the base accent measures 8.79:1 there. One marker, one token per canvas. */ .brand-slot--hay.is-active::after { left: 0; right: 0; background: var(--accent); } .site-header__nav { display: flex; align-items: center; gap: 36px; } .site-header__nav > a { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; transition: color 0.2s ease; } /* The header used to turn PAPER on scroll, so every control inverted to ink. It is now dark in both states — it only deepens from 0.76 to 0.94 — so those inversions would paint ink on near-black. Measured at 1.07:1 before removal. The top-state colours are correct in both states; there is nothing to swap. */ /* the single 99px pill — structural, not an accent slot */ .site-header__cta { display: inline-flex; align-items: center; justify-content: center; height: 43px; padding: 0 28px; border-radius: 99px; background: #ffffff; color: var(--ink); font-size: 15px; font-weight: 500; transition: background 0.4s ease; } .site-header__cta:hover { background: rgba(255, 255, 255, 0.8); } /* The pill kept its white fill in both states for the same reason as the nav links above: inverted to var(--ink) it becomes a dark pill on a dark bar and stops reading as a button at all. */ /* mobile toggle + overlay */ .nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; /* The 44px above is a hint, not a floor. This is a flex item in the header row, and flex-shrink defaults to 1 — with the two brand plates and the nav competing for a 390px line, the box was being squeezed to 28px wide while keeping its full height, so it measured "44px tall" and passed a glance. The menu button is the only way into navigation on a phone. */ flex: 0 0 auto; color: #ffffff; cursor: pointer; } .nav-overlay { display: none; } /* ---------- hero ---------- */ .hero { position: relative; background: var(--hero); color: #ffffff; overflow: clip; } /* The reference hero is a FULL-BLEED 1440x900