/* ========================================================================== Closed Door Marketing — design tokens Long-form direct-response landing page. Mobile-first. Mechanics extracted from kingkong.co landing-page-agency / conversion-rate-optimization-agency; aesthetic is our own. ========================================================================== */ :root { /* ---------------------------------------------------------------- palette */ --paper: #F4F1EA; /* page base */ --paper-tint: #E8E4DA; /* alternating band */ --ink: #0B0D10; /* one dark band only (Gurpreet) */ --text: #1A1D22; /* body on paper 15.1:1 on paper AAA */ --text-2: #4A4640; /* secondary on paper 8.1:1 on paper AAA */ --cta: #8A6C31; /* primary button fill, paper text */ --brass: #C69749; /* hairlines, diamonds, the single highlight */ --brass-lo: #6B5327; /* hairlines on ink */ /* Derived tokens. The palette above is untouched; these exist only so every text-on-background pair clears WCAG AA. Adjust these, never the palette. AUDIT text on paper 15.1:1 AAA text on paper-tint 14.0:1 AAA text-2 on paper 8.1:1 AAA text-2 on paper-tint 7.5:1 AAA paper on ink 17.0:1 AAA text-ink-2 on ink 7.6:1 AAA brass on ink 7.2:1 AAA (mono caps, marquee) paper on cta 4.4:1 AA-large only -> CTA label is locked to >=18px/700, which qualifies. paper on cta-strong 5.3:1 AA -> use for any CTA-coloured text below 18px, links, inline accents. brass on paper 2.4:1 FAIL -> brass is never text on paper. Decoration only: hairlines, diamonds, and the highlight fill (which carries ink text at 8.2:1). brass-lo on ink 2.7:1 FAIL -> hairlines only, never text. */ --cta-strong: #7A5E28; /* CTA colour usable as small text on paper */ --cta-press: #6F5626; /* button :active / pressed */ --text-ink: #F4F1EA; /* body on ink (= paper) */ --text-ink-2: #A9A296; /* secondary on ink */ --hair: rgba(198,151,73,.42); /* brass hairline between bands */ --hair-ink: rgba(107,83,39,.85); /* hairline on ink */ --field: #FBFAF6; /* form input fill on ink */ --field-line: rgba(198,151,73,.34); /* ------------------------------------------------------------ typography */ /* REFERENCE TYPE SYSTEM (kingkong.co/landing-page-agency + /conversion- rate-optimization-agency), as identified visually — their stylesheets are not publicly fetchable, so treat this as a high-confidence read, not a quote from their CSS: Display Sofia Pro Black (900) / Bold (700), Title Case, tight tracking, line-height ~1.05. Mostardesign, served via Adobe Typekit. COMMERCIALLY LICENSED. Body Sofia Pro Regular 400 / Medium 500, Bold 700 for inline emphasis, Italic 400 for asides. Same family as display — the whole page is one sans. Label Same family at 700, ALL CAPS, wide tracking (~0.1em) for eyebrows, the BREAKING NEWS strip, the WARNING bar and the micro-proof under each CTA. SUBSTITUTIONS (Google Fonts, since Sofia Pro cannot be licensed here): Sofia Pro -> Figtree. Same geometric-humanist skeleton, same unusually high x-height (the thing that makes Sofia hold up at 17-18px on a phone), and a true Black at 800. Chosen over Poppins — the usual "closest free alternative" — because Poppins' perfectly circular, wide capitals fall apart in the Title-Case display setting this page depends on, and it is overexposed. Label face -> Archivo 600 caps. Sofia's own caps go slack at 0.18em tracking; Archivo's tighter grotesque caps hold the eyebrow, marquee and micro-proof strip. One accent family, labels only, never body. */ --font-display: "Anton", "Futura PT Cond Extra Bold", "Arial Narrow", Impact, sans-serif; --font-body: "Figtree", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-label: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-hand: "Kalam", "Comic Sans MS", "Segoe Print", cursive; /* sketch annotations only */ /* Weights actually loaded: Figtree 400, 500, 700, 800 + 400 italic; Archivo 600. Nothing else. All @font-face use font-display: swap. */ /* Type scale — MOBILE (390px base) Headline:body ratio at mobile = 38 / 18 = 2.11x Nothing below 17px. Body is 18px; inputs are 18px so iOS never zooms. */ --m-eyebrow: 12px; --m-micro: 12px; /* micro-proof strip under every CTA */ --m-caption: 14px; --m-small: 18px; /* absolute floor */ --m-body: 22px; /* was 18; scaled up after the reference page */ --m-letter: 22px; /* was 19 */ /* long-form letter paragraphs run one step larger */ --m-lead: 21px; /* hero subhead */ --m-h3: 22px; --m-h2: 32px; --m-h1: 44px; --m-numeral: 54px; /* Reason One–Four numerals */ /* Type scale — DESKTOP (>=1024px) Headline:body ratio at desktop = 72 / 20 = 3.60x The ratio widens with the viewport: that jump from 2.11x to 3.60x is the single most King-Kong mechanic on the page. */ --d-eyebrow: 13px; --d-micro: 13px; --d-caption: 15px; --d-small: 19px; --d-body: 26px; /* was 20; ratio is now 3.0x, not the documented 3.60x */ --d-letter: 26px; /* was 21 */ --d-lead: 26px; --d-h3: 30px; --d-h2: 74px; /* the CRO page's section headings, exactly */ --d-h1: 81px; /* measured off the CRO reference page: 81/76/-0.08em */ --d-numeral: 104px; /* Line-height — three distinct regimes, deliberately not one scale */ --lh-h1: 1.02; /* display headlines. Anton needs more than the reference's 0.94 */ --lh-h2: 1.04; --lh-h3: 1.22; --lh-body: 1.55; /* standard body / UI copy */ --lh-letter: 1.78; /* long-form letter paragraphs — the loosest thing on the page; it is what makes 900 words of one-sentence paragraphs readable on a phone */ --lh-lead: 1.34; --lh-mono: 1.30; /* Tracking */ --ls-h1: 0.014em; --ls-h2: 0.014em; --ls-eyebrow: 0.18em; /* mono caps */ --ls-micro: 0.06em; --ls-btn: 0.04em; /* Weights */ --w-body: 400; /* letter paragraphs */ --w-med: 500; /* UI copy, captions */ --w-bold: 700; /* inline emphasis, H3, button label */ --w-black: 800; /* H1, H2 — the Sofia Pro Black position */ --w-label: 600; /* Archivo caps */ /* Measure — characters, not px. The letter is the constraint. */ --measure-letter: 62ch; /* long-form letter: 62 characters */ --measure-body: 68ch; /* standard body blocks */ --measure-lead: 34ch; /* hero subhead, short lines */ --measure-h1: 22ch; /* headline wraps every ~3 words */ /* ------------------------------------------------- vertical spacing scale Base unit 4px. Four rhythms, largest to smallest: section > band-inset > headline-to-body > paragraph-to-paragraph Within a paragraph, spacing IS the line-height (never margin). */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; --gap-para-m: 26px; /* between letter paragraphs, mobile (1.37em) */ --gap-para-d: 32px; /* desktop (1.52em) */ --gap-head-body-m: 20px; /* headline -> body, mobile */ --gap-head-body-d: 28px; --gap-eyebrow-m: 14px; /* eyebrow -> headline */ --gap-eyebrow-d: 18px; --gap-block-m: 48px; /* between blocks inside a section */ --gap-block-d: 72px; --pad-section-m: 72px; /* section top/bottom, mobile */ --pad-section-d: 128px; --pad-gutter-m: 22px; /* horizontal gutter, mobile */ --pad-gutter-d: 64px; /* --------------------------------------------------------------- buttons One button, repeated four times, never restyled. */ --btn-h-m: 60px; --btn-h-d: 68px; --btn-pad-m: 20px 26px; --btn-pad-d: 22px 46px; --btn-radius: 6px; --btn-size-m: 18px; --btn-size-d: 19px; --btn-weight: 700; --btn-width-m: 100%; /* full-bleed on mobile */ --btn-width-d: auto; --btn-shadow: 0 2px 0 var(--cta-press); --btn-gap-proof: 14px; /* button -> micro-proof strip */ /* micro-proof strip beneath every CTA */ --proof-size-m: 12px; --proof-size-d: 13px; --proof-gap: 10px; /* between proof items and their diamonds */ /* ----------------------------------------------------------- decoration */ --hair-w: 1px; --diamond: 6px; /* brass ◆ separator */ --sticker-d: 72px; /* sticker, desktop */ --sticker-m: 48px; /* sticker, mobile */ --marquee-h-d: 40px; --marquee-h-m: 34px; --marquee-dur: 40s; --msg-blur: 3.4px; /* WhatsApp message obscuring */ --radius-card: 4px; --radius-phone: 26px; /* --------------------------------------------------------------- motion */ --ease-settle: cubic-bezier(.22,1.08,.36,1); --ease-out: cubic-bezier(.16,.84,.44,1); --dur-settle: 560ms; --dur-reveal: 900ms; --dur-drift: 26s; } /* --------------------------------------------------------------- semantic Author against these. They resolve to the mobile value by default and are remapped wholesale in the desktop query below — every mobile token has a desktop counterpart, no exceptions. */ :root { --eyebrow: var(--m-eyebrow); --micro: var(--m-micro); --caption: var(--m-caption); --small: var(--m-small); --body: var(--m-body); --letter: var(--m-letter); --lead: var(--m-lead); --h3: var(--m-h3); --h2: var(--m-h2); --h1: var(--m-h1); --numeral: var(--m-numeral); --gap-para: var(--gap-para-m); --gap-head-body: var(--gap-head-body-m); --gap-eyebrow: var(--gap-eyebrow-m); --gap-block: var(--gap-block-m); --pad-section: var(--pad-section-m); --pad-gutter: var(--pad-gutter-m); --btn-h: var(--btn-h-m); --btn-pad: var(--btn-pad-m); --btn-size: var(--btn-size-m); --btn-width: var(--btn-width-m); --proof-size: var(--proof-size-m); --sticker: var(--sticker-m); --marquee-h: var(--marquee-h-m); } @media (min-width: 1024px) { :root { --eyebrow: var(--d-eyebrow); --micro: var(--d-micro); --caption: var(--d-caption); --small: var(--d-small); --body: var(--d-body); --letter: var(--d-letter); --lead: var(--d-lead); --h3: var(--d-h3); --h2: var(--d-h2); --h1: var(--d-h1); --numeral: var(--d-numeral); --gap-para: var(--gap-para-d); --gap-head-body: var(--gap-head-body-d); --gap-eyebrow: var(--gap-eyebrow-d); --gap-block: var(--gap-block-d); --pad-section: var(--pad-section-d); --pad-gutter: var(--pad-gutter-d); --btn-h: var(--btn-h-d); --btn-pad: var(--btn-pad-d); --btn-size: var(--btn-size-d); --btn-width: var(--btn-width-d); --proof-size: var(--proof-size-d); --sticker: var(--sticker-d); --marquee-h: var(--marquee-h-d); } } @media (prefers-reduced-motion: reduce) { :root { --dur-settle: 1ms; --dur-reveal: 1ms; --dur-drift: 0s; } } /* ========================================================================== ACCENT EXTENSION — added on instruction, after the reference page. The audited palette above is untouched. These two are additive and are the only colours on the page that are not ink, paper or brass. Both are used as FILLS carrying high-contrast text, never as text on paper. paper on alert 5.1:1 AA ink on pop 11.4:1 AAA alert on ink 4.8:1 AA (the dot and the chip edge only) To pull the page back to brass-only, set --alert and --pop to var(--cta) and var(--brass); nothing else needs to change. ========================================================================== */ :root { --alert: #C8321F; /* the live dot and the chip in the pill eyebrow */ /* Brass, taken up to the brightness the reference gets from its lime, and kept in our own family. Used as a fill under ink, never as text. */ --pop: #F0B429; /* the full-width CTA bar, and the wedge edges */ --pop-deep: #D19A18; /* The hero's own ink: charcoal pulled toward brown, not the page's blue-black and not the reference's grey. Three stops top to bottom; the last one is what the letter band's wedge is cut from. */ --hero-ink-top: #15131A; --hero-ink: #1E1A19; --hero-ink-end: #2A2420; --hero-alert: #E24A32; /* --alert lifted one step so it holds on ink */ --hero-text-2: rgba(244, 241, 234, .86); --hero-text-3: rgba(244, 241, 234, .66); /* pressed state for anything filled with --pop */ --cta-w: min(100%, 560px); /* every CTA, every placement */ --wedge-h-m: 44px; --wedge-h-d: 88px; --wedge-h: var(--wedge-h-m); /* Header over the hero: mark alone on phones, mark plus a line each side up. */ --header-h-m: 64px; --header-h-d: 84px; --header-h: var(--header-h-m); /* Space between the header and the hero's first line. 160px total on desktop with the 84px header; scaled by the section-padding ratio below. */ --hero-top-m: 44px; --hero-top-d: 76px; --hero-top: var(--hero-top-m); } @media (min-width: 1024px) { :root { --wedge-h: var(--wedge-h-d); --header-h: var(--header-h-d); --hero-top: var(--hero-top-d); } }