/* ========================================================================== Evan Carmichael — Application Direct VSL Landing Dark palette. Governed by funnel-builder references/dark-palette-mode.md: one deep base the whole way down, a page-level COOL light layer, cards carry the hierarchy, exactly two paper moments (the application form panel and the founder letter), CTA colour as light and never as non-CTA fill. Tokens derived from inputs/brand.json on 2026-09-06 by the DARK_DEFAULTS procedure in scripts/build.py, with the near-black ladder re-derived WARM from colors.background #171000 (the shipped defaults are cool-neutral and came from a cool-blue brand). Every derived value is a ruling owed and is listed in page-spec.md → "Builder defaults in effect". Mobile-first. No 100vh. No fixed positioning. ========================================================================== */ /* ---------- Tokens ---------- */ :root { --font-body: "Montserrat", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; --font-heading: "Montserrat", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; --font: var(--font-body); /* warm near-black ladder, derived from colors.background */ --bg-deep: #0D0900; --bg-base: #171000; --bg-elevated: #251D0C; --bg-overlay: #2E2614; --bg-raised: #3C331F; /* Elevated surfaces are COOL VIOLET while the ground stays warm (Round 3, Nic's differentiation note F-031). Warm floor + cool cards is a two- temperature system; the named competitor (viralcoach.com) is warm-on-warm with a card ground of #331C00 — within a hair of our old #322917. */ --bg-card: #221C2E; --card-top: #282133; --card-bottom: #1A1523; /* text — warm neutrals, all AA-verified on base, bg-card and card-top */ --text-1: #F8F4EC; --text-1-rgb: 248, 244, 236; --text-2: #C2B8A8; --text-3: #A09687; --text-em: #EFE8DB; /* Round 14 (F-093): skim emphasis — between body and headline white */ --text-3-rgb: 160, 150, 135; /* CTA: the one exclusive fill. Used elsewhere only as light (lift/cast). */ --cta: #F96E00; --cta-rgb: 249, 110, 0; --cta-hover: #D05C00; --cta-text: #171000; /* The button SURFACE only. --cta above stays #F96E00 and remains the brand orange everywhere it acts as light (glows, halos, accents). White on #F96E00 is 2.89:1 and fails AA; on these it is 4.60:1 (top) and 5.93:1 (bottom). Round 3, F-030. */ --cta-fill-top: #C25400; --cta-fill-bottom: #A84600; /* second accent (GLOBAL sparse-palette rule) — non-CTA emphasis only */ --gold: #FBAB06; --gold-rgb: 251, 171, 6; /* non-CTA neutral accent — VSL caption bars, markers, rules */ --accent-neutral: #7641A3; --accent-neutral-rgb: 118, 65, 163; /* the page light. COOL only (dark-palette-mode.md §1). Re-hued from indigo to brand violet at Nic's request (Round 3, F-028) — the yellow was overpowering, so the ambient variation carries purple instead. which has no surface role on this page precisely because it is too dark to pass contrast as fill — as light it never has to. */ --light-hue-rgb: 118, 65, 163; --light-c: rgba(129, 86, 208, 0.19); --light-pointer: rgba(140, 96, 214, 0.15); /* paper: the two light moments */ --paper-top: #FBFAF7; --paper: #F7F5F0; --paper-2: #ECE9E1; --ink: #151109; --ink-rgb: 21, 17, 9; --ink-2: #4C463B; --ink-3: #6D6658; --border: rgba(248, 244, 236, 0.16); --border-subtle: rgba(248, 244, 236, 0.08); --border-card: rgba(206, 190, 240, 0.15); --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px rgba(0,0,0,0.5); --lift: 0 1px 0 rgba(255,255,255,0.07) inset, 0 18px 40px rgba(0,0,0,0.55), 0 10px 44px rgba(var(--cta-rgb), 0.13); --lift-hover: 0 1px 0 rgba(255,255,255,0.09) inset, 0 24px 52px rgba(0,0,0,0.6), 0 16px 56px rgba(var(--cta-rgb), 0.24); --container: 1120px; --measure: 720px; --section-pad: 64px; --overlap: 56px; --gap: 20px; } @media (min-width: 768px) { :root { --section-pad: 88px; --overlap: 72px; --gap: 24px; } } @media (min-width: 1024px) { :root { --section-pad: 104px; --overlap: 90px; --gap: 28px; } } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { margin: 0; /* Required. .light-layer is position:absolute; inset:0 — without a positioned body it resolves against the INITIAL CONTAINING BLOCK (viewport-sized) and overflow:hidden clips every light below the fold. That is why the ambient and pointer light died just past the press bar. Round 3, F-035 — and this is also what delivers F-028. */ position: relative; background: var(--bg-base); color: var(--text-1); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } @media (min-width: 768px) { body { font-size: 17px; } } img, svg, video, iframe { max-width: 100%; display: block; } a { color: inherit; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; } strong { font-weight: 700; } h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; } @media (min-width: 768px) { .container { padding: 0 32px; } } .container--wide { max-width: 1280px; } .measure { max-width: var(--measure); } .center.measure { max-width: 800px; } .center { margin-left: auto; margin-right: auto; text-align: center; } .section { padding: var(--section-pad) 0; position: relative; z-index: 1; } .section--tight { padding-top: calc(var(--section-pad) * 0.6); } /* ---------- Type roles ---------- */ .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; } .kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(var(--gold-rgb), 0.34); border-radius: 999px; padding: 7px 14px; margin: 0 0 18px; } .h-hero { font-size: clamp(25px, 4.6vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -0.018em; text-wrap: balance; margin: 0 0 14px; } .h-section { font-size: clamp(21px, 3.3vw, 34px); font-weight: 800; line-height: 1.2; letter-spacing: -0.012em; text-wrap: balance; margin: 0 0 16px; } .h-card { font-size: clamp(18px, 2.1vw, 21px); font-weight: 700; line-height: 1.28; letter-spacing: -0.006em; margin: 0 0 10px; } .em { color: var(--gold); } .sub { font-size: clamp(16px, 2.1vw, 19px); font-weight: 400; line-height: 1.5; color: var(--text-2); text-wrap: pretty; margin: 0; } .sub--hero { font-size: clamp(15.5px, 1.9vw, 18px); } .body { color: var(--text-2); line-height: 1.62; } .lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--text-1); line-height: 1.5; } .small { font-size: 14px; line-height: 1.55; } .muted { color: var(--text-3); } /* FTC / disclaimers — legible, recessive */ .buffer { font-size: 13px; line-height: 1.6; color: var(--text-3); max-width: 760px; margin: 28px auto 0; text-align: center; } .disclaimer { font-size: 13px; line-height: 1.6; color: var(--text-3); margin: 18px 0 0; font-style: italic; } /* ---------- Light layer (page-level, cool, ambient) ---------- */ .light-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .light { position: absolute; left: 0; top: 0; width: 1100px; height: 820px; margin: -410px 0 0 -550px; border-radius: 50%; background: radial-gradient(closest-side, var(--light-c), transparent 72%); animation: glow-drift 28s ease-in-out infinite alternate; will-change: transform; } .light--big { width: 1600px; height: 1000px; margin: -500px 0 0 -800px; } .light--pointer { width: 720px; height: 720px; margin: -360px 0 0 -360px; background: radial-gradient(closest-side, var(--light-pointer), transparent 70%); animation: none; opacity: 0; transition: opacity 0.5s ease; } .light--pointer.is-on { opacity: 1; } @keyframes glow-drift { from { transform: translate3d(-40px, -26px, 0) scale(1); } to { transform: translate3d(46px, 30px, 0) scale(1.13); } } @media (max-width: 767px) { .light { width: 760px; height: 600px; margin: -300px 0 0 -380px; } .light--big { width: 1000px; height: 760px; margin: -380px 0 0 -500px; } } /* Trusted-by band: the marquee's own section after it left the hero (Round 3, F-029). Tighter than a full section — it is a band, not a beat. */ .section--band { padding-top: calc(var(--section-pad) * 0.45); padding-bottom: calc(var(--section-pad) * 0.45); } .section--band .marquee { margin-top: 0; } /* ---------- Cards: four tiers (Round 4, F-040) ---------- 24 identical elevated cards is what made the page read as "so much elevated purple". Elevation now means something: tier 0 no card at all — content sits on the page ground (hero stat trio) tier 1 .card--flat — inventory and secondary columns; no lift tier 2 .card — the default tier 3 .card--raised — the page's primary proof (endorser cards) -------------------------------------------------------------------------- */ .card { background: linear-gradient(180deg, var(--card-top), var(--card-bottom)); border: 1px solid var(--border-card); border-radius: var(--radius-lg); box-shadow: var(--lift); padding: 24px; } @media (min-width: 768px) { .card { padding: 30px; } } .card--flat { background: rgba(206, 190, 240, 0.035); border-color: var(--border-subtle); box-shadow: none; } .card--raised { background: linear-gradient(180deg, #2E2740, var(--card-bottom)); border-color: rgba(206, 190, 240, 0.22); box-shadow: 0 1px 0 rgba(255,255,255,0.09) inset, 0 26px 60px rgba(0,0,0,0.62), 0 14px 50px rgba(var(--cta-rgb), 0.10); } /* ========================================================================== Instruments (Round 3, F-036). UI and diagrams drawn in code for the five slots Nic cannot photograph. Pattern ported from the trainwell Recruiting build (video-submission page): one quiet 12s loop, gold = ignition only, completed state held static under prefers-reduced-motion. ========================================================================== */ .inst { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--border-card); background: linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%); box-shadow: var(--lift); padding: 14px 14px 10px; } .inst__label { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; } .inst svg { width: 100%; height: auto; display: block; overflow: visible; } .inst text { font-family: var(--font); } .inst [class*="x-"] { transform-box: fill-box; transform-origin: center; } .x-axis { stroke: rgba(248,244,236,0.12); } .x-grid { stroke: rgba(248,244,236,0.06); } .x-lbl { fill: var(--text-3); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; } .x-val { fill: var(--text-2); font-size: 10px; font-weight: 700; } /* --- 1. revenue, not views (Round 6, Nic's two-videos concept, F-048) --- Two videos, no time axis. Left: the views bar runs off the end and every booking dot stays hollow. Right: a modest views bar and the dots fill gold. */ .x-bar { transform-origin: left center !important; transform: scaleX(0); animation: x-bar 12s ease-out infinite; } .x-bar-g { animation-name: x-bar-g; } @keyframes x-bar { 0%,6% { transform: scaleX(0); } 30%,92% { transform: scaleX(1); } 99%,100% { transform: scaleX(0); } } @keyframes x-bar-g { 0%,10% { transform: scaleX(0); } 26%,92% { transform: scaleX(1); } 99%,100% { transform: scaleX(0); } } .x-more { opacity: 0; animation: x-more 12s ease-out infinite; } @keyframes x-more { 0%,30% { opacity: 0; } 34%,92% { opacity: 1; } 99%,100% { opacity: 0; } } /* dots fill WHILE the right-hand bar fills (10→26%) and reset with it at 99%. animation-delay would have shifted their reset earlier than the bar's (F-064). */ .x-d1 { animation: x-d1 12s linear infinite; } @keyframes x-d1 { 0%,10% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } 12%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } } .x-d2 { animation: x-d2 12s linear infinite; } @keyframes x-d2 { 0%,12% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } 14%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } } .x-d3 { animation: x-d3 12s linear infinite; } @keyframes x-d3 { 0%,14% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } 16%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } } .x-d4 { animation: x-d4 12s linear infinite; } @keyframes x-d4 { 0%,16% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } 18%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } } .x-d5 { animation: x-d5 12s linear infinite; } @keyframes x-d5 { 0%,18% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } 20%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } } .x-d6 { animation: x-d6 12s linear infinite; } @keyframes x-d6 { 0%,20% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } 22%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } } .x-d7 { animation: x-d7 12s linear infinite; } @keyframes x-d7 { 0%,22% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } 24%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } } .x-c1 { animation: x-c1 12s linear infinite; } @keyframes x-c1 { 0%,15% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } 17%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } } .x-c2 { animation: x-c2 12s linear infinite; } @keyframes x-c2 { 0%,19% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } 21%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } } .x-c3 { animation: x-c3 12s linear infinite; } @keyframes x-c3 { 0%,24% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } 26%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } } /* --- 2. bigger vision, exact steps (Round 6: two goalposts, F-048) --- */ .x-halo { transform-origin: 340px 52px; animation: x-halo 12s ease-in-out infinite; } @keyframes x-halo { 0%,56% { opacity: 0; transform: scale(0.5); } 60%,74% { opacity: 0.35; transform: scale(0.85); } 78% { opacity: 1; transform: scale(1.18); } 82% { opacity: 0.5; transform: scale(0.95); } 86% { opacity: 1; transform: scale(1.14); } 92% { opacity: 0.7; transform: scale(1); } 99%,100% { opacity: 0; transform: scale(0.5); } } .x-arc { stroke-dasharray: 340; stroke-dashoffset: 340; animation: x-arc 12s ease-out infinite; } .x-ygoal { opacity: 0; animation: x-ygoal 12s ease-out infinite; } @keyframes x-ygoal { 0%,16% { opacity: 0; } 20%,92% { opacity: 1; } 99%,100% { opacity: 0; } } .x-yglow { transform-origin: 208px 106px; opacity: 0; animation: x-yglow 12s ease-in-out infinite; } @keyframes x-yglow { 0%,40% { opacity: 0; transform: scale(0.5); } 44% { opacity: 1; transform: scale(1.15); } 48% { opacity: 0.55; transform: scale(1); } 52% { opacity: 1; transform: scale(1.1); } 60%,92% { opacity: 0.45; transform: scale(1); } 99%,100% { opacity: 0; transform: scale(0.5); } } .x-ext { stroke-dasharray: 150; stroke-dashoffset: 150; animation: x-ext 12s ease-out infinite; } @keyframes x-ext { 0%,46% { stroke-dashoffset: 150; } 58%,92% { stroke-dashoffset: 0; } 99%,100% { stroke-dashoffset: 150; } } .x-ogoal { opacity: 0; animation: x-ogoal 12s ease-out infinite; } @keyframes x-ogoal { 0%,54% { opacity: 0; transform: translateY(6px); } 60%,92% { opacity: 1; transform: none; } 99%,100% { opacity: 0; } } .x-num { fill: var(--text-1); font-size: 8.5px; font-weight: 800; } @keyframes x-arc { 0%,4% { stroke-dashoffset: 340; } 18%,92% { stroke-dashoffset: 0; } 99%,100% { stroke-dashoffset: 340; } } .x-tread { opacity: 0.18; animation: x-tread 12s linear infinite; } .x-tread .x-node { fill: rgba(248,244,236,0.10); stroke: rgba(248,244,236,0.24); animation: x-tnode 12s linear infinite; } .x-t2 { animation-name: x-tread2; } .x-t2 .x-node { animation-name: x-tnode2; } .x-t3 { animation-name: x-tread3; } .x-t3 .x-node { animation-name: x-tnode3; } .x-t4 { animation-name: x-tread4; } .x-t4 .x-node { animation-name: x-tnode4; } .x-t5 { animation-name: x-tread5; } .x-t5 .x-node { animation-name: x-tnode5; } @keyframes x-tread { 0%,20% { opacity: 0.18; } 24%,92% { opacity: 1; } 99%,100% { opacity: 0.18; } } @keyframes x-tread2 { 0%,26% { opacity: 0.18; } 30%,92% { opacity: 1; } 99%,100% { opacity: 0.18; } } @keyframes x-tread3 { 0%,32% { opacity: 0.18; } 36%,92% { opacity: 1; } 99%,100% { opacity: 0.18; } } @keyframes x-tread4 { 0%,38% { opacity: 0.18; } 42%,92% { opacity: 1; } 99%,100% { opacity: 0.18; } } @keyframes x-tread5 { 0%,60% { opacity: 0.18; } 64%,92% { opacity: 1; } 99%,100% { opacity: 0.18; } } @keyframes x-tnode { 0%,20% { fill: rgba(248,244,236,0.10); stroke: rgba(248,244,236,0.24); } 24%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.10); stroke: rgba(248,244,236,0.24); } } @keyframes x-tnode2 { 0%,26% { fill: rgba(248,244,236,0.10); stroke: rgba(248,244,236,0.24); } 30%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.10); stroke: rgba(248,244,236,0.24); } } @keyframes x-tnode3 { 0%,32% { fill: rgba(248,244,236,0.10); stroke: rgba(248,244,236,0.24); } 36%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.10); stroke: rgba(248,244,236,0.24); } } @keyframes x-tnode4 { 0%,38% { fill: rgba(248,244,236,0.10); stroke: rgba(248,244,236,0.24); } 42%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.10); stroke: rgba(248,244,236,0.24); } } @keyframes x-tnode5 { 0%,60% { fill: rgba(248,244,236,0.10); stroke: rgba(248,244,236,0.24); } 64%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.10); stroke: rgba(248,244,236,0.24); } } .x-t6 { animation-name: x-tread6; } .x-t6 .x-node { animation-name: x-tnode6; } @keyframes x-tread6 { 0%,66% { opacity: 0.18; } 70%,92% { opacity: 1; } 99%,100% { opacity: 0.18; } } @keyframes x-tnode6 { 0%,66% { fill: rgba(248,244,236,0.10); stroke: rgba(248,244,236,0.24); } 70%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.10); stroke: rgba(248,244,236,0.24); } } .x-t7 { animation-name: x-tread7; } .x-t7 .x-node { animation-name: x-tnode7; } @keyframes x-tread7 { 0%,72% { opacity: 0.18; } 76%,92% { opacity: 1; } 99%,100% { opacity: 0.18; } } @keyframes x-tnode7 { 0%,72% { fill: rgba(248,244,236,0.10); stroke: rgba(248,244,236,0.24); } 76%,92% { fill: var(--gold); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.10); stroke: rgba(248,244,236,0.24); } } /* --- 3. strategist: the org chart (Round 6, Nic's concept, F-054) --- Strategist in gold at the top, lines down to founder / editor / social manager, and a data review on the right that feeds back into the strategist. */ .x-strat { opacity: 0; animation: x-strat 12s cubic-bezier(0.2,0.7,0.2,1) infinite; } @keyframes x-strat { 0%,4% { opacity: 0; transform: translateY(-10px) scale(0.7); } 14%,92% { opacity: 1; transform: none; } 99%,100% { opacity: 0; transform: translateY(-10px) scale(0.7); } } .x-link { stroke-dasharray: 140; stroke-dashoffset: 140; animation: x-link 12s ease-out infinite; } .x-k2 { animation-delay: -11.3s; } .x-k3 { animation-delay: -10.6s; } @keyframes x-link { 0%,14% { stroke-dashoffset: 140; } 30%,92% { stroke-dashoffset: 0; } 99%,100% { stroke-dashoffset: 140; } } .x-data { opacity: 0.3; animation: x-data 12s ease-out infinite; } @keyframes x-data { 0%,44% { opacity: 0.3; } 50%,92% { opacity: 1; } 99%,100% { opacity: 0.3; } } .x-ret { stroke-dasharray: 130; stroke-dashoffset: 130; animation: x-ret 12s ease-out infinite; } .x-ret2 { animation-name: x-ret2; } @keyframes x-ret { 0%,40% { stroke-dashoffset: 130; } 54%,92% { stroke-dashoffset: 0; } 99%,100% { stroke-dashoffset: 130; } } @keyframes x-ret2 { 0%,54% { stroke-dashoffset: 130; } 68%,92% { stroke-dashoffset: 0; } 99%,100% { stroke-dashoffset: 130; } } .x-arrow { opacity: 0; animation: x-arrow 12s ease-out infinite; } @keyframes x-arrow { 0%,64% { opacity: 0; } 70%,92% { opacity: 1; } 99%,100% { opacity: 0; } } /* --- 4. the production board (Round 6, F-054) --- Three cards, one per content type, travel IDEA → FILMED → PUBLISHED → DID ITS JOB (96px per stage) and turn gold with a tick when they get there. */ .x-card { animation: x-card 12s cubic-bezier(0.4,0,0.2,1) infinite; } .x-cd2 { animation-delay: -10.8s; } .x-cd3 { animation-delay: -9.6s; } @keyframes x-card { 0%,8% { transform: translateX(0); } 18%,26% { transform: translateX(96px); } 36%,44% { transform: translateX(192px); } 54%,92% { transform: translateX(282px); } 99%,100% { transform: translateX(0); } } .x-card rect { animation: x-cardfill 12s linear infinite; } .x-cd2 rect { animation-delay: -10.8s; } .x-cd3 rect { animation-delay: -9.6s; } @keyframes x-cardfill { 0%,52% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } 58%,92% { fill: rgba(251,171,6,0.16); stroke: var(--gold); } 99%,100% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.22); } } .x-tag { fill: var(--text-2); font-size: 7px; font-weight: 700; letter-spacing: 0.05em; } .x-tick { opacity: 0; animation: x-tick 12s linear infinite; } .x-cd2 .x-tick { animation-delay: -10.8s; } .x-cd3 .x-tick { animation-delay: -9.6s; } @keyframes x-tick { 0%,56% { opacity: 0; } 60%,92% { opacity: 1; } 99%,100% { opacity: 0; } } /* --- 5. the clinic + library (Round 6 redraw; keeps the ring / say / mod loops) --- */ .x-live { animation: x-live 1.6s ease-in-out infinite; } @keyframes x-live { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } } .x-ring { stroke-dasharray: 200; stroke-dashoffset: 200; animation: x-ring 12s ease-in-out infinite; } @keyframes x-ring { 0%,10% { stroke-dashoffset: 200; } 30%,88% { stroke-dashoffset: 0; } 97%,100% { stroke-dashoffset: 200; } } .x-mod { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.14); animation: x-mod 12s linear infinite; } .x-m2 { animation-delay: -11.5s; } .x-m3 { animation-delay: -11.2s; } .x-m4 { animation-delay: -10.9s; } .x-m5 { animation-delay: -10.6s; } .x-m6 { animation-delay: -10.3s; } @keyframes x-mod { 0%,36% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.14); } 50%,92% { fill: rgba(251,171,6,0.14); stroke: rgba(251,171,6,0.55); } 99%,100% { fill: rgba(248,244,236,0.06); stroke: rgba(248,244,236,0.14); } } .x-say { opacity: 0; animation: x-say 12s ease-out infinite; } @keyframes x-say { 0%,18% { opacity: 0; transform: translateY(6px); } 30%,88% { opacity: 1; transform: translateY(0); } 97%,100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .inst [class*="x-"] { animation: none !important; } .x-arc, .x-ext, .x-link, .x-ret, .x-ring { stroke-dashoffset: 0; } .x-strat, .x-say, .x-ygoal, .x-ogoal, .x-more, .x-tick, .x-data, .x-arrow { opacity: 1; transform: none; } .x-bar { transform: scaleX(1); } .x-don { fill: var(--gold); stroke: var(--gold); animation: none !important; } .x-card { transform: translateX(282px); } .x-card rect { fill: rgba(251,171,6,0.16); stroke: var(--gold); } .x-halo { opacity: 0.7; } .x-yglow { opacity: 0.45; transform: none; } .x-tread { opacity: 1; } .x-tread .x-node { fill: var(--gold); stroke: var(--gold); } .x-lane .x-tile { stroke: var(--gold); fill: rgba(251,171,6,0.13); } .x-lane .x-chip { opacity: 1; } .x-mod { fill: rgba(251,171,6,0.14); stroke: rgba(251,171,6,0.55); } .x-wk { fill: var(--gold); } } /* ========================================================================== Ported from variant B (Round 4, F-039). Variant B is retired; these are the deltas that survived the merge. The two that did NOT come across are the gold->purple accent swap (B deltas 2 and 3): Round 3 made violet the page's structural surface colour, so a violet accent would now collapse figure into ground, and gold is doing real work as the ignition colour in five instruments. ========================================================================== */ /* --- B2. Section rhythm. All 15 sections shared one padding value. --------- */ .section--air { padding: calc(var(--section-pad) * 1.35) 0; } .section--quiet { padding: calc(var(--section-pad) * 0.72) 0; } /* --- B3. Asymmetric header, to break a run of nine identical centred blocks - */ .head-split { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 900px) { .head-split { grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: end; } .head-split .sub { padding-bottom: 6px; } } .head-split .h-section { margin-bottom: 0; } /* --- B4. Headline emphasis 10 -> 3. ----------------------------------------- `.em` keeps the full accent for the hero, Marshall's $13M and the final CTA. The other seven take a soft gold wash. Variant B used a 2px underline, which Nic flagged as reading like a hyperlink (O-010) — a wash carries the same emphasis with none of that ambiguity, and the text colour never changes. */ .em--sub { color: inherit; /* a marker swipe across the lower third, not a full-height block (which read as a selection highlight) and not a rule (which read as a hyperlink, O-010) */ background-image: linear-gradient(rgba(var(--gold-rgb), 0.30), rgba(var(--gold-rgb), 0.30)); background-repeat: no-repeat; background-size: 100% 34%; background-position: 0 86%; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.12em; margin: 0 -0.04em; } /* --- B5. Milestones: a wall, not a product grid ---------------------------- */ .bleed { width: 100%; max-width: none; padding-left: 20px; padding-right: 20px; } @media (min-width: 768px) { .bleed { padding-left: 32px; padding-right: 32px; } } /* NOTE the doubled class. `.wall` is defined further down this file, so at equal specificity it would win grid-template-columns and the wall would silently stay 2-up. `.wall.wall--dense` makes source order irrelevant. */ .wall.wall--dense { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 34px; } @media (min-width: 620px) { .wall.wall--dense { grid-template-columns: repeat(4, 1fr); gap: 10px; } } @media (min-width: 1100px) { .wall.wall--dense { grid-template-columns: repeat(6, 1fr); gap: 12px; } .wall.wall--dense .tile--wide { grid-column: span 2; } } /* A double-width tile is twice as tall if its artifact keeps a fixed 4:3, which stretches every 1-up tile in the same row and opens dead space under its meta. In the wall the artifact FILLS whatever height the row settles on instead. */ .wall.wall--dense .tile { display: flex; flex-direction: column; } .wall.wall--dense .tile .ph { aspect-ratio: auto; flex: 1 1 auto; min-height: 128px; } .wall.wall--dense .tile .media-img { flex: 1 1 auto; width: 100%; min-height: 0; object-fit: cover; } .wall.wall--dense .tile__meta { padding: 10px 10px 12px; } .wall.wall--dense .tile__fig { font-size: clamp(15px, 1.7vw, 18px); } .wall.wall--dense .tile__label { font-size: 11.5px; margin-top: 3px; } /* --- B6. Two Approaches: make the argument visible ------------------------- */ @media (min-width: 860px) { .approach--weighted { grid-template-columns: 0.88fr 1.12fr; align-items: stretch; } } .approach__col--neg.card--flat { position: relative; overflow: hidden; opacity: 0.82; } .approach__col--neg.card--flat::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( -45deg, rgba(var(--text-3-rgb), 0.05) 0, rgba(var(--text-3-rgb), 0.05) 1px, transparent 1px, transparent 13px); } .approach__col--pos { border-left: 3px solid var(--gold); } .approach__col--pos .approach__title { font-size: clamp(21px, 2.8vw, 27px); } /* --- B7. CTA hierarchy: the close outweighs the mid-page ramps ------------- */ .btn--lg { min-height: 66px; padding: 17px 40px; } .btn--lg .btn__main { font-size: clamp(17px, 2.3vw, 21px); } .btn--lg .btn__sub { font-size: 14px; } .tile.card--flat .ph { background-color: rgba(255,255,255,0.012); } /* ---------- Placeholders ---------- */ .ph { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 150px; padding: 22px 18px; border: 2px dashed rgba(var(--text-3-rgb), 0.5); border-radius: var(--radius); background-image: repeating-linear-gradient( 135deg, rgba(var(--text-3-rgb), 0.055) 0, rgba(var(--text-3-rgb), 0.055) 10px, transparent 10px, transparent 20px ); color: var(--text-3); } .ph__id { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } .ph__title { font-size: 15px; font-weight: 700; color: var(--text-2); } .ph__meta { font-size: 12.5px; line-height: 1.5; max-width: 46ch; color: var(--text-3); } .ph--ratio { aspect-ratio: 16 / 9; min-height: 0; } .ph--portrait { aspect-ratio: 4 / 5; min-height: 0; } .ph--wide { aspect-ratio: 21 / 9; min-height: 0; } .ph--bar { min-height: 74px; padding: 16px; } .ph--tall { min-height: 420px; } /* placeholders on paper */ .ph--paper { border-color: rgba(21, 17, 9, 0.28); background-image: repeating-linear-gradient( 135deg, rgba(21, 17, 9, 0.05) 0, rgba(21, 17, 9, 0.05) 10px, transparent 10px, transparent 20px ); color: var(--ink-3); } .ph--paper .ph__title { color: var(--ink-2); } .ph--paper .ph__meta { color: var(--ink-3); } .ph--paper .ph__id { color: #8A5A00; } .media-img { width: 100%; height: auto; display: block; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); } .tile .media-img { border-radius: 0; border: 0; } .letter__portrait .media-img { border-radius: var(--radius); } /* ---------- CTA ---------- */ .cta-block { text-align: center; } .cta-block--spaced { margin-top: 46px; } .btn { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-height: 56px; padding: 14px 30px; background: linear-gradient(180deg, var(--cta-fill-top) 0%, var(--cta-fill-bottom) 100%); color: #FFFFFF; border: 0; border-radius: 999px; text-decoration: none; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 -1px 0 rgba(0, 0, 0, 0.20) inset, 0 10px 30px rgba(var(--cta-rgb), 0.30); transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; max-width: 100%; } .btn:hover, .btn:focus-visible { /* the fill does NOT lighten on hover — it would drop white below 4.5:1. The brand orange intensifies as LIGHT around the button instead. */ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) inset, 0 -1px 0 rgba(0, 0, 0, 0.20) inset, 0 16px 44px rgba(var(--cta-rgb), 0.48); transform: translateY(-1px); } .btn__main { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(15px, 2vw, 18px); font-weight: 800; line-height: 1.15; letter-spacing: 0.015em; text-wrap: balance; text-shadow: 0 1px 2px rgba(74, 30, 0, 0.45); } .btn__main svg { flex: 0 0 auto; } .btn__sub { font-size: 13px; font-weight: 500; line-height: 1.3; color: #FFFFFF; /* solid, not alpha — alpha would drop it under 4.5:1 */ text-shadow: 0 1px 2px rgba(74, 30, 0, 0.40); } .cta-note { margin: 14px 0 0; font-size: 13.5px; color: var(--text-3); } /* ---------- Callout bar ---------- */ .callout { background: var(--bg-deep); border-bottom: 1px solid var(--border-subtle); padding: 11px 0; position: relative; z-index: 1; } .callout__inner { display: flex; align-items: center; justify-content: center; gap: 12px; } .callout__mark { flex: 0 0 auto; color: var(--gold); opacity: 0.85; } .callout p { margin: 0; text-align: center; font-size: 14.5px; font-weight: 600; line-height: 1.4; /* Round 12 (F-084): +2px */ letter-spacing: 0.055em; text-transform: uppercase; color: var(--text-2); } @media (min-width: 768px) { .callout p { font-size: 15.5px; } } .callout strong { color: var(--text-1); font-weight: 800; } /* ---------- Hero region ---------- */ /* The hero region carries headline → VSL → CTA → press bar → stats → marquee, and takes the extra bottom padding that the application overlap eats. */ .hero { padding-top: 30px; padding-bottom: calc(var(--overlap) + 60px); position: relative; z-index: 1; } @media (min-width: 768px) { .hero { padding-top: 26px; } } .hero__head { max-width: 100%; margin: 0 auto; text-align: center; } .hero__sub { max-width: 660px; margin: 0 auto; } /* VSL: caption bars butt flush to the player, rounded to match */ .vsl { max-width: 672px; margin: 22px auto 0; } .vsl__bar { background: var(--accent-neutral); color: var(--text-1); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; padding: 8px 16px; line-height: 1.3; } @media (min-width: 768px) { .vsl__bar { font-size: 13.5px; } } .vsl__bar--top { border-radius: var(--radius) var(--radius) 0 0; } .vsl__bar--bottom { border-radius: 0 0 var(--radius) var(--radius); } .vsl__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-deep); border-left: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); box-shadow: 0 26px 60px rgba(0,0,0,0.6), 0 0 60px rgba(var(--cta-rgb), 0.1); } .vsl__frame iframe, .vsl__frame > .ph { width: 100%; height: 100%; border: 0; } .vsl__frame > .ph { border-radius: 0; border-left: 0; border-right: 0; } .hero__cta { margin-top: 22px; } /* press bar — static, monotone, inside the hero region */ .press { margin-top: 52px; text-align: center; } .press__label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin: 0 0 16px; } .press__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 30px; } .press__logo { display: inline-flex; align-items: center; height: 32px; font-size: 15px; font-weight: 700; letter-spacing: 0.03em; color: var(--text-2); opacity: 0.66; transition: opacity 0.2s ease; filter: grayscale(1) brightness(1.7); } .press__logo img { max-height: 28px; max-width: 132px; width: auto; object-fit: contain; } .press__logo:hover { opacity: 1; } @media (min-width: 768px) { .press__logo { font-size: 17px; } } /* glanceable social proof */ /* Three across at EVERY width (Round 5, F-042). Stacked, the trio ran 421px on a 390px screen — you could see one and a half facts at a time, which is the one thing a section called "glanceable social proof" must not do. The card chrome was doing two jobs; dropping it (D-050) fixed the elevation but left the GROUPING unreplaced, and a horizontal rule between stacked items separates where a card contained. Across, the divider groups them again. */ .stats { /* Round 26 (F-124): still three stats — "Featured / By YouTube itself" was REPLACED by "200+ Industries helped", not joined by it. minmax(0,1fr) rather than 1fr so a long label can never take width from its neighbours. */ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 40px; } @media (min-width: 640px) { .stats { gap: var(--gap); margin-top: 46px; } } /* tier 0 — no card. Three numbers on the page ground, divided by hairlines. They sat in the same violet card material as the application panel directly below them, so the hero read as cards-on-a-card (Round 4, F-040). */ .stat { text-align: center; padding: 14px 6px; position: relative; } .stat + .stat::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: var(--border-subtle); } @media (min-width: 640px) { .stat { padding: 20px 16px; } } .stat__icon { color: var(--gold); margin: 0 auto 8px; width: 21px; height: 21px; } @media (min-width: 640px) { .stat__icon { margin-bottom: 10px; width: 26px; height: 26px; } } .stat__num { font-size: clamp(20px, 5.2vw, 38px); font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; color: var(--text-1); } .stat__label { margin-top: 7px; font-size: 11.5px; color: var(--text-3); line-height: 1.35; text-wrap: balance; } @media (min-width: 640px) { .stat__label { margin-top: 8px; font-size: 13.5px; } } /* brand slider — continuous marquee */ .marquee { margin-top: 46px; } .marquee__label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); text-align: center; margin: 0 0 18px; } .marquee__viewport { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .marquee__track { display: flex; width: max-content; animation: marquee-scroll 42s linear infinite; } .marquee__viewport:hover .marquee__track { animation-play-state: paused; } .marquee__group { display: flex; align-items: center; gap: 44px; padding-right: 44px; flex: 0 0 auto; } .marquee__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 56px; min-width: 132px; color: var(--text-2); opacity: 0.6; font-size: 15px; font-weight: 700; letter-spacing: 0.03em; filter: grayscale(1) brightness(1.7); } /* cap BOTH axes — a wide wordmark (Lewis Howes is 400x37) otherwise renders several times the optical size of a stacked mark like Genius Network. */ .marquee__item img { max-height: 44px; max-width: 172px; width: auto; object-fit: contain; } @keyframes marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none !important; } .marquee__viewport { -webkit-mask-image: none; mask-image: none; overflow-x: auto; } } /* Logos that did not arrive as clean transparent art (Round 4, F-038). The row's own `grayscale(1) brightness(1.7)` is the default; these three override it. `screen` drops a baked BLACK background against the dark page; `invert` flips dark artwork so it is visible at all; together they rescue a light-background screenshot. Set per logo via `fx` on the config entry. */ .logo--invert img, .logo--invert-screen img { filter: grayscale(1) invert(1) brightness(1.18) contrast(1.05); } .logo--screen, .logo--invert-screen { mix-blend-mode: screen; } .logo--screen img { filter: grayscale(1) brightness(1.5); } /* ---------- Application (overlaps the hero) ---------- */ .apply-wrap { position: relative; z-index: 2; margin-top: calc(var(--overlap) * -1); } /* The destination surface. It used a recipe byte-identical to .card, so with the stat cards sitting on top of it the hero read as cards nested in a card. It is now the single elevated thing in this region, and it carries a CTA-coloured top edge as LIGHT (never as fill) to mark it as the action surface. */ .apply { background: linear-gradient(180deg, #2C2540, #1B1626 62%, var(--card-bottom)); border: 1px solid rgba(206, 190, 240, 0.20); border-radius: var(--radius-lg); box-shadow: 0 -1px 0 rgba(var(--cta-rgb), 0.42) inset, 0 1px 0 rgba(255,255,255,0.07) inset, 0 34px 80px rgba(0,0,0,0.66), 0 18px 60px rgba(var(--cta-rgb), 0.11); padding: 30px 20px; } @media (min-width: 768px) { .apply { padding: 44px 40px; } } .apply__head { text-align: center; max-width: 640px; margin: 0 auto 30px; } .apply__grid { display: grid; grid-template-columns: 1fr; gap: 30px; } @media (min-width: 900px) { .apply__grid { grid-template-columns: 0.92fr 1.08fr; gap: 44px; align-items: start; } } .steps { display: flex; flex-direction: column; gap: 24px; } .step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; } .step__num { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: var(--gold); background: rgba(var(--gold-rgb), 0.1); border: 1px solid rgba(var(--gold-rgb), 0.34); } .step__title { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 8px 0 6px; color: var(--text-1); } .step__body { font-size: 15px; line-height: 1.55; color: var(--text-2); margin: 0; } /* paper moment 1 — the form panel */ .form-panel { background: linear-gradient(180deg, var(--paper-top), var(--paper)); border-radius: var(--radius); padding: 22px 18px; color: var(--ink); box-shadow: 0 20px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); position: relative; } @media (min-width: 768px) { .form-panel { padding: 28px 26px; } } .form-panel__title { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 16px; text-align: center; } .form-slot { min-height: 300px; } .form-slot iframe { width: 100%; border: 0; min-height: 460px; } .form-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; font-style: italic; color: var(--ink-3); text-align: center; } .apply__cta { margin-top: 30px; } /* ---------- Endorser grid (social proof) ---------- */ .endorsers { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: 34px; } @media (min-width: 700px) { .endorsers { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .endorsers { grid-template-columns: repeat(3, 1fr); } } /* Endorsers — Round 6, D-057 / Nic's ruling: Variant 1, editorial portraits. The photo IS the card. No violet surface: D-050 stopped cards sitting ON .apply but three card--raised sat right AFTER it, so violet ran twice in a row. The quote sits on a scrim at the foot of each frame, the name in gold. 4:5 from 700px; 4:3 below it so three stacked frames do not run 1,500px on a phone. */ .endorser { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-deep); } @media (min-width: 700px) { .endorser { aspect-ratio: 4 / 5; } } .endorser__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 10%; display: block; } @media (min-width: 700px) { .endorser__photo { object-position: center 22%; } } .endorser::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(13,9,0,0) 34%, rgba(13,9,0,0.50) 58%, rgba(13,9,0,0.95) 100%); } .endorser__txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; z-index: 1; } .endorser__quote { margin: 0; padding: 0; font-size: 16.5px; line-height: 1.5; color: var(--text-1); text-wrap: pretty; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } .endorser__name { margin-top: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold); } /* ---------- Alternating proof rows (why_us, what_we_do) ---------- */ .rows { display: flex; flex-direction: column; gap: 44px; margin-top: 40px; } @media (min-width: 900px) { .rows { gap: 64px; } } .row { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; } @media (min-width: 900px) { .row { grid-template-columns: 1fr 1fr; gap: 52px; } .row--flip .row__media { order: 2; } .row--flip .row__body { order: 1; } } .row__media { position: relative; } .row__media .ph { border-radius: var(--radius-lg); } .row__index { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; } .row__body p { color: var(--text-2); } .row__body p:first-of-type { color: var(--text-2); } /* two-up stance cards (why_us reasons 3–4 fallback / what_we_do bullets) */ .bullets { margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; } .bullets li { position: relative; padding-left: 26px; color: var(--text-2); line-height: 1.55; } .bullets li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 2px; background: var(--gold); opacity: 0.9; } /* ---------- Phase spine (what_we_do) ---------- */ .spine { margin-top: 52px; } .spine__title { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 0 0 26px; } .spine__track { display: grid; grid-template-columns: 1fr; gap: 22px; position: relative; } @media (min-width: 820px) { .spine__track { grid-template-columns: repeat(3, 1fr); gap: 30px; } .spine__track::before { content: ""; position: absolute; left: 12%; right: 12%; top: 27px; height: 2px; background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.12), rgba(var(--gold-rgb), 0.55), rgba(var(--gold-rgb), 0.12)); } } .phase { text-align: center; position: relative; } .phase__dot { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: var(--gold); background: var(--bg-card); border: 2px solid rgba(var(--gold-rgb), 0.5); box-shadow: 0 0 0 6px rgba(23, 16, 0, 0.9); position: relative; z-index: 1; } .phase__stage { font-size: 11.5px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--gold); margin: 0 0 5px; } .phase__name { font-size: 18px; font-weight: 700; color: var(--text-1); margin: 0 0 6px; } .phase__why { font-size: 14.5px; color: var(--text-2); margin: 0; line-height: 1.5; } .spine__payoff { max-width: 620px; margin: 40px auto 0; text-align: center; font-size: clamp(19px, 2.7vw, 25px); font-weight: 700; line-height: 1.35; color: var(--text-1); text-wrap: balance; } /* ---------- Case studies ---------- */ .ph--footer { max-width: 560px; margin: 0 auto 24px; } .cs { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 38px; align-items: start; } @media (min-width: 900px) { .cs { grid-template-columns: 1.05fr 0.95fr; gap: 52px; } .cs--flip .cs__media { order: 2; } .cs--flip .cs__body { order: 1; } } .cs--tight { margin-top: 8px; } .cs__body p { color: var(--text-2); } .cs__media .ph { border-radius: var(--radius-lg); } /* Dr John — testimony register */ .quote { border-left: 3px solid var(--gold); padding-left: 22px; margin: 0 0 22px; } .quote__text { font-size: clamp(23px, 3.6vw, 34px); font-weight: 700; line-height: 1.24; letter-spacing: -0.012em; color: var(--text-1); margin: 0 0 10px; text-wrap: balance; } .quote__attr { font-size: 14px; color: var(--text-3); margin: 0; } .cs__lead { font-size: clamp(17px, 2.1vw, 19px); color: var(--text-1); line-height: 1.5; } /* Anna — arc register */ .arc { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 24px 0 0; } .arc--flush { margin-top: 0; } @media (min-width: 560px) { .arc { grid-template-columns: 1fr auto 1fr; align-items: center; } } .arc__cell { background: linear-gradient(180deg, var(--card-top), var(--card-bottom)); border: 1px solid var(--border-card); border-radius: var(--radius); padding: 18px; text-align: center; } .arc__stage { font-size: 11.5px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; } .arc__fig { font-size: clamp(20px, 3vw, 26px); font-weight: 900; line-height: 1.1; color: var(--text-1); } .arc__note { font-size: 13px; color: var(--text-3); margin: 8px 0 0; line-height: 1.45; } .arc__link { display: flex; align-items: center; justify-content: center; color: var(--gold); } @media (max-width: 559px) { .arc__link { transform: rotate(90deg); padding: 4px 0; } } /* ---------- Stat cards (why_youtube 3x2) ---------- */ .yt-lead { max-width: 760px; margin: 30px auto 0; text-align: center; } .statcards { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: 34px; } @media (min-width: 640px) { .statcards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .statcards { grid-template-columns: repeat(3, 1fr); } } .statcard { text-align: center; transition: box-shadow 0.2s ease, transform 0.2s ease; } .statcard:hover { box-shadow: var(--lift-hover); transform: translateY(-2px); } .statcard__icon { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--gold); background: rgba(var(--gold-rgb), 0.1); border: 1px solid rgba(var(--gold-rgb), 0.3); } .statcard__fig { font-size: clamp(24px, 3.4vw, 32px); font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; } .statcard__label { margin-top: 7px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold); } .statcard__body { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); } .yt-close { max-width: 760px; margin: 38px auto 0; text-align: center; color: var(--text-2); } /* ---------- Milestones wall ---------- */ .wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 38px; } @media (min-width: 700px) { .wall { grid-template-columns: repeat(4, 1fr); gap: var(--gap); } } .tile { padding: 0; overflow: hidden; } .tile .ph { border: 0; border-radius: 0; min-height: 0; aspect-ratio: 4 / 3; padding: 14px 10px; } .tile__meta { padding: 14px 12px 16px; text-align: center; } .tile__fig { font-size: clamp(17px, 2.3vw, 21px); font-weight: 900; line-height: 1.1; color: var(--text-1); letter-spacing: -0.015em; } .tile__label { margin-top: 5px; font-size: 12.5px; color: var(--text-3); line-height: 1.35; } .wins { margin-top: 46px; } .wins__title { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 0 0 22px; } .wins__list { display: flex; flex-direction: column; max-width: 900px; margin: 0 auto; } .wins__item { padding: 15px 0 15px 26px; position: relative; border-top: 1px solid var(--border-subtle); color: var(--text-2); font-size: 15.5px; line-height: 1.5; } .wins__list .wins__item:last-child { border-bottom: 1px solid var(--border-subtle); } .wins__item::before { content: ""; position: absolute; left: 4px; top: 1.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } .wins__item b { color: var(--text-1); font-weight: 700; } /* ---------- Two approaches ---------- */ .approach { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: 38px; } @media (min-width: 860px) { .approach { grid-template-columns: repeat(2, 1fr); gap: 26px; } } .approach__col { display: flex; flex-direction: column; } .approach__icon { width: 54px; height: 54px; border-radius: 13px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; } .approach__col--neg .approach__icon { color: var(--text-3); background: rgba(var(--text-3-rgb), 0.1); border: 1px solid rgba(var(--text-3-rgb), 0.28); } .approach__col--pos .approach__icon { color: var(--gold); background: rgba(var(--gold-rgb), 0.1); border: 1px solid rgba(var(--gold-rgb), 0.34); } .approach__col--neg { opacity: 0.9; } .approach__col--pos { box-shadow: var(--lift-hover); } .approach__title { font-size: clamp(20px, 2.6vw, 25px); font-weight: 800; line-height: 1.22; margin: 0 0 12px; } .approach__col--neg .approach__title { color: var(--text-2); } .approach__col--pos .approach__title { color: var(--text-1); } /* ---------- Who this is for ---------- */ .whofor { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: 38px; } @media (min-width: 860px) { .whofor { grid-template-columns: repeat(2, 1fr); gap: 26px; } } .whofor__title { font-size: clamp(19px, 2.4vw, 22px); font-weight: 800; margin: 0 0 18px; display: flex; align-items: center; gap: 11px; } .whofor__mark { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .whofor--yes .whofor__mark { color: var(--gold); background: rgba(var(--gold-rgb), 0.12); border: 1px solid rgba(var(--gold-rgb), 0.36); } .whofor--no .whofor__mark { color: var(--text-3); background: rgba(var(--text-3-rgb), 0.12); border: 1px solid rgba(var(--text-3-rgb), 0.3); } .whofor__list { display: flex; flex-direction: column; gap: 15px; } .whofor__list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--text-2); line-height: 1.55; } .whofor__list svg { margin-top: 4px; } .whofor--yes .whofor__list svg { color: var(--gold); } .whofor--no .whofor__list svg { color: var(--text-3); } /* ---------- Relational equity (paper moment 2) ---------- */ .letter { background: linear-gradient(180deg, var(--paper-top), var(--paper)); border-radius: var(--radius-lg); color: var(--ink); padding: 30px 22px; box-shadow: 0 26px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); } @media (min-width: 768px) { .letter { padding: 48px 44px; } } .letter__grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; } @media (min-width: 900px) { .letter__grid { grid-template-columns: 0.62fr 1.38fr; gap: 48px; } } .letter__portrait { border-radius: var(--radius); overflow: hidden; } .letter__portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; } .letter__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: #8A5A00; margin: 0 0 12px; } .letter__h { font-size: clamp(25px, 4vw, 38px); font-weight: 800; line-height: 1.16; letter-spacing: -0.014em; color: var(--ink); margin: 0 0 14px; text-wrap: balance; } .letter__sub { font-size: clamp(16px, 2vw, 18px); color: var(--ink-2); line-height: 1.5; margin: 0 0 22px; } .letter__body p { color: var(--ink-2); line-height: 1.68; } .letter__sign { margin-top: 26px; color: var(--ink); } /* Signature (D-078, re-ruled Round 13 → Mr Dafoe): Google Fonts, set as a signed name — large, tilted a hair, weight from the face not the render */ .letter__sig { display: inline-block; font-family: 'Mr Dafoe', 'Brush Script MT', cursive; font-weight: 400; font-size: clamp(38px, 4.4vw, 46px); line-height: 1; transform: rotate(-3deg); transform-origin: left bottom; margin: 0 0 6px 2px; } .letter__role { display: block; font-size: 13px; font-weight: 500; color: var(--ink-3); margin-top: 4px; } .letter__sign .letter__role { margin-top: 4px; } /* ---------- FAQ ---------- */ .faq { max-width: 860px; margin: 38px auto 0; } .faq__item { border-bottom: 1px solid var(--border-subtle); } .faq__item:first-child { border-top: 1px solid var(--border-subtle); } .faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; width: 100%; padding: 20px 4px; cursor: pointer; font-size: clamp(16px, 2.1vw, 18.5px); font-weight: 700; line-height: 1.4; color: var(--text-1); list-style: none; min-height: 44px; } .faq__q::-webkit-details-marker { display: none; } .faq__q:hover { color: var(--gold); } .faq__icon { flex: 0 0 auto; color: var(--gold); margin-top: 3px; transition: transform 0.22s ease; } .faq__item[open] .faq__icon { transform: rotate(45deg); } .faq__a { padding: 0 4px 22px; color: var(--text-2); line-height: 1.62; max-width: 74ch; } /* ---------- Final CTA ---------- */ .final { text-align: center; } .final .h-section { max-width: 900px; margin-left: auto; margin-right: auto; } .final .sub { max-width: 720px; margin: 0 auto 32px; } /* ---------- Footer ---------- */ .footer { background: var(--bg-deep); border-top: 1px solid var(--border-subtle); padding: 46px 0 40px; position: relative; z-index: 1; } .footer__brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; } .footer__brand img { height: 64px; width: auto; } /* stacked lockup (Round 6) */ .footer__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin-bottom: 18px; } .footer__links a { color: var(--text-2); text-decoration: none; font-size: 14px; border-bottom: 1px solid transparent; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; } .footer__links a:hover { color: var(--text-1); border-bottom-color: var(--border); } .footer__legal { text-align: center; font-size: 13px; color: var(--text-3); margin: 0 0 16px; } .footer__compliance { max-width: 820px; margin: 0 auto; text-align: left; font-size: 12px; line-height: 1.6; color: var(--text-3); } .footer__compliance p { margin: 0 0 12px; } .footer__compliance p:last-child { margin-bottom: 0; } .footer .ph { max-width: 620px; margin: 0 auto; } /* ---------- Utilities ---------- */ .mt-0 { margin-top: 0; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .tc { text-align: center; } /* ========================================================================== Round 6 (F-049…F-055): real press marks, accolade laurels, plaque wall, rapid-fire wins as evidence cards, stacked footer lockup. ========================================================================== */ /* A5 — the seven marks arrived as one strip; sliced and recoloured white at source. Two are stacked lockups (NYT, WSJ), so HEIGHT is the governing cap and the wide marks are held by max-width instead. The old grayscale filter is gone: the art is already white, so opacity alone does the muting. */ .press__logo { height: 44px; filter: none; opacity: 0.74; } .press__logo img { max-height: 44px; max-width: 150px; } @media (max-width: 767px) { .press__row { gap: 16px 22px; } .press__logo { height: 34px; } .press__logo img { max-height: 34px; max-width: 116px; } } /* A5b — accolade laurels beneath the press row. Objects on the ground, no chrome. */ .accolades { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 60px; margin-top: 42px; } .accolade { display: inline-flex; opacity: 0.8; } .accolade img { height: 132px; width: auto; } @media (max-width: 767px) { .accolades { gap: 18px 26px; margin-top: 30px; } .accolade img { height: 100px; } } /* A9 — the artifacts are plaques: transparent shields. A 4:3 photo tile would crop or float them, so the wall drops the card and shows each as an object with a ground shadow and a caption beneath. Wide tiles no longer mean anything. */ .wall.wall--dense.wall--plaques { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; } @media (min-width: 620px) { .wall.wall--dense.wall--plaques { grid-template-columns: repeat(4, 1fr); gap: 24px 18px; } } @media (min-width: 1100px) { .wall.wall--dense.wall--plaques { grid-template-columns: repeat(4, 1fr); gap: 28px 26px; } .wall.wall--dense.wall--plaques .tile--wide { grid-column: auto; } } .plaque { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; padding: 0; } .wall.wall--dense .plaque .media-img { flex: 0 0 auto; width: 76%; margin: 0 auto; min-height: 0; aspect-ratio: 516 / 587; object-fit: contain; border-radius: 0; filter: drop-shadow(0 24px 24px rgba(0,0,0,0.55)); } .wall.wall--dense .plaque .ph { width: 76%; margin: 0 auto; min-height: 0; aspect-ratio: 516 / 587; flex: 0 0 auto; border-radius: var(--radius-lg); } .plaque .tile__meta { padding: 16px 6px 0; } .wall.wall--dense .plaque .tile__fig { font-size: clamp(15px, 1.6vw, 17px); } /* A14 — rapid-fire wins, each backed by the channel it happened on. Six flat cards, three-across: screenshot on top, the win beneath. The wall above is now chromeless, so the flat tint here does grouping, not elevation. */ .wins__grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1120px; display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .wins__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (min-width: 1000px) { .wins__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } } .win { margin: 0; display: flex; flex-direction: column; background: rgba(206, 190, 240, 0.035); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; } .win__media .media-img { display: block; width: 100%; aspect-ratio: 16 / 6; object-fit: cover; object-position: top; border-radius: 0; border: 0; border-bottom: 1px solid var(--border-subtle); } .win__media .ph { border-radius: 0; border-width: 0 0 2px; min-height: 0; aspect-ratio: 16 / 6; } .win__text { margin: 0; padding: 16px 18px 18px; font-size: 15px; line-height: 1.5; color: var(--text-2); } .win__text b { color: var(--text-1); font-weight: 700; } /* ========================================================================== Round 8 (F-064…F-071): §10 anchors + supports, §10b versus ledger, the YouTube case study as a document with click-to-enlarge. ========================================================================== */ /* §10 — two anchors carry the argument; four supports in a quieter register */ .anchors { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: 34px; } @media (min-width: 760px) { .anchors { grid-template-columns: 1fr 1fr; } } .anchor { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 30px 30px 26px; } .anchor__fig { font-size: clamp(40px, 5.6vw, 58px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: var(--text-1); } .anchor__label { font-size: 13.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold); margin-top: 6px; } .anchor__vs { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 10px 6px 8px; border-radius: 999px; background: rgba(var(--text-3-rgb), 0.08); border: 1px solid rgba(var(--text-3-rgb), 0.24); font-size: 12.5px; color: var(--text-3); width: fit-content; } .anchor__vs b { color: var(--text-2); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; } .anchor__so { margin: 16px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-1); text-wrap: pretty; } .anchor__body { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); } .support { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } @media (min-width: 900px) { .support { grid-template-columns: repeat(4, 1fr); gap: var(--gap); } } .sup { padding: 20px 20px 18px; } .sup__fig { font-size: clamp(22px, 2.6vw, 28px); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; } .sup__label { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold); line-height: 1.35; } .sup__so { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); } .sources { max-width: 900px; margin: 26px auto 0; font-size: 12px; line-height: 1.6; color: var(--text-3); text-align: center; } .sources b { color: var(--text-2); font-weight: 700; } /* §10b — the versus ledger. Dimension rows, hamster wheel dim, engine gold. No cards. */ .vs { max-width: 920px; margin: 38px auto 0; } .vs__head, .vs__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; } @media (min-width: 720px) { .vs__head, .vs__row { grid-template-columns: 150px 1fr 1fr; } } .vs__head { padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); } .vs__dim { display: none; } @media (min-width: 720px) { .vs__dim { display: block; } } .vs__t { font-size: clamp(15px, 1.8vw, 18px); font-weight: 800; line-height: 1.25; display: flex; align-items: center; gap: 10px; } .vs__t--neg { color: var(--text-3); } .vs__t--pos { color: var(--text-1); } .vs__t svg { flex: 0 0 auto; } .vs__t--neg svg { color: var(--text-3); } .vs__t--pos svg { color: var(--gold); } .vs__row { padding: 18px 0; border-bottom: 1px solid var(--border-subtle); align-items: start; } .vs__dim { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; } .vs__dim-m { grid-column: 1 / -1; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; } @media (min-width: 720px) { .vs__dim-m { display: none; } } .vs__neg { color: var(--text-3); font-size: 15px; line-height: 1.5; opacity: 0.9; } .vs__pos { color: var(--text-1); font-size: 15.5px; line-height: 1.5; font-weight: 500; position: relative; padding-left: 14px; } .vs__pos::before { content: ""; position: absolute; left: 0; top: 0.35em; bottom: 0.35em; width: 3px; border-radius: 2px; background: var(--gold); } .vs__foot { margin: 26px auto 0; max-width: 720px; text-align: center; font-size: clamp(17px, 2vw, 20px); font-weight: 700; line-height: 1.4; color: var(--text-1); } /* Reason 02 — the case study as a document on the ground. Portrait page cropped to its head at 4:3; click, Enter or Space opens the whole page. */ .doc { margin: 0; cursor: zoom-in; outline: none; } .doc__frame { border-radius: var(--radius-lg); overflow: hidden; background: #FFFFFF; box-shadow: var(--lift); border: 1px solid rgba(255,255,255,0.14); transition: transform 0.2s ease, box-shadow 0.2s ease; } .doc:hover .doc__frame, .doc:focus-visible .doc__frame { transform: translateY(-2px); box-shadow: var(--lift-hover); } .doc__frame .media-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: 0; border: 0; } .doc__frame .ph { border-radius: 0; } .doc__cap { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); } /* ---------- Why YouTube receipts (Round 20, D-092): source clippings, one figure + so-what each ---------- */ .receipts { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 34px; } @media (min-width: 900px) { .receipts--2 { grid-template-columns: 1fr 1fr; gap: 30px; } .receipts--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; } } @media (min-width: 640px) and (max-width: 899px) { .receipts--4 { grid-template-columns: 1fr 1fr; } } .receipt { display: flex; flex-direction: column; } .receipt__clip { position: relative; margin: 0; cursor: zoom-in; transform: rotate(var(--tilt, 0deg)); transition: transform 0.2s ease; } .receipt__clip img { display: block; width: 100%; height: auto; border-radius: 10px; background: #FFFFFF; border: 1px solid rgba(255,255,255,0.16); box-shadow: var(--lift); transition: box-shadow 0.2s ease; } .receipt__clip:hover, .receipt__clip:focus-visible { transform: rotate(var(--tilt, 0deg)) translateY(-3px); outline: none; } .receipt__clip:hover img, .receipt__clip:focus-visible img { box-shadow: var(--lift-hover); } .receipt:nth-child(odd) .receipt__clip { --tilt: -0.8deg; } .receipt:nth-child(even) .receipt__clip { --tilt: 0.8deg; } .receipt__tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 4px; position: relative; top: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(13,9,0,0.86); border: 1px solid rgba(255,255,255,0.12); color: var(--text-1); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .receipt__tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } .receipt__body { padding: 22px 6px 0; } .receipt__fig { font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; line-height: 1.05; color: var(--text-1); letter-spacing: -0.02em; } .receipts--4 .receipt__fig { font-size: clamp(22px, 2.2vw, 28px); } .receipt__label { margin: 6px 0 0; font-size: 15px; color: var(--text-2); line-height: 1.45; } .receipts--4 .receipt__label { font-size: 13.5px; } .receipt__so { margin: 10px 0 0; font-size: 14px; color: var(--text-em); line-height: 1.5; } .receipt__src { margin: 8px 0 0; font-size: 12px; color: var(--text-3); } .receipt__src b { color: var(--text-2); font-weight: 700; } .receipt--pair .receipt__clip + .receipt__clip { width: 54%; margin: -14px 0 0 auto; --tilt: 1.4deg; z-index: 2; } .fund-title { margin: 44px 0 0; text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .support--3 { margin-top: 16px; } @media (min-width: 760px) { .support--3 { grid-template-columns: repeat(3, 1fr); } } /* ---------- Native application form (Round 17, D-090) — on the paper panel ---------- */ .app-form { display: grid; gap: 14px; } .app-form__row { display: grid; gap: 14px; } .app-form__field { display: grid; gap: 6px; } .app-form__label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } .app-form__input { width: 100%; min-height: 48px; padding: 12px 14px; font: 500 16px/1.3 var(--font); color: var(--ink); background: #FFFFFF; border: 1px solid rgba(21,17,9,0.18); border-radius: 10px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .app-form__input:focus { border-color: var(--cta); box-shadow: 0 0 0 3px rgba(var(--cta-rgb), 0.22); } .app-form__input[aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179,38,30,0.16); } .app-form__fieldset { margin: 2px 0 0; padding: 0; border: 0; display: grid; gap: 8px; } .app-form__radios { display: grid; gap: 8px; } @media (min-width: 560px) { .app-form__radios { grid-template-columns: 1fr 1fr; } } .app-form__radio { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 14px; background: #FFFFFF; border: 1px solid rgba(21,17,9,0.18); border-radius: 10px; cursor: pointer; font: 500 15px/1.3 var(--font); color: var(--ink); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .app-form__radio input { position: absolute; opacity: 0; width: 1px; height: 1px; } .app-form__radio::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(21,17,9,0.35); flex: 0 0 auto; box-sizing: border-box; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .app-form__radio:has(input:checked) { border-color: var(--cta); background: #FFF7F0; } .app-form__radio:has(input:checked)::before { border-color: var(--cta); background: var(--cta); box-shadow: 0 0 0 3px #FFFFFF inset; } .app-form__radio:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(var(--cta-rgb), 0.22); } .app-form__radios[aria-invalid="true"] .app-form__radio { border-color: #B3261E; } .app-form__hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } .app-form__submit { width: 100%; margin-top: 6px; } .app-form__submit[disabled] { opacity: 0.7; cursor: progress; transform: none; } .app-form__status { margin: 0; font-size: 13.5px; line-height: 1.45; color: #B3261E; text-align: center; } .app-form__status.is-ok { color: var(--ink-2); } /* ---------- Milestones, interim layout (Round 16, D-089): wins row → four badges → wins row ---------- */ /* Round 26 (F-126, Change 13): §7's head is centred. .head-stack is used by the milestones section alone, so this reaches nothing else; the idiom matches .hero__head / .apply__head / .book__head. Design only, no copy change. */ .head-stack { max-width: 720px; margin-inline: auto; text-align: center; text-wrap: balance; } .head-stack .h-section { margin-bottom: 12px; } .head-stack .sub { margin: 0; } .wins__grid--a { margin-top: 34px; } .wall.wall--dense.wall--plaques.wall--four { max-width: 980px; margin: 30px auto 0; grid-template-columns: repeat(2, 1fr); gap: 18px 14px; } @media (min-width: 620px) { .wall.wall--dense.wall--plaques.wall--four { grid-template-columns: repeat(4, 1fr); gap: 20px 22px; } } .wall--four .plaque .media-img, .wall--four .plaque .ph { width: 64%; } .wall--four .plaque .tile__meta { padding-top: 12px; } .wins__grid--b { margin-top: 30px; } .wins__grid + .buffer { margin-top: 26px; } /* ---------- Content Clinics photo collage (Round 15, D-087): Evan at the plaque wall, three breakdowns beneath ---------- */ .inst--photo { padding-bottom: 14px; } .clinic { display: grid; grid-template-columns: 1fr; } .clinic__hero, .clinic__shot { display: block; width: 100%; padding: 0; border: 1px solid rgba(255,255,255,0.14); background: #0F0F0F; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; box-shadow: var(--lift); transition: transform 0.2s ease, box-shadow 0.2s ease; } .clinic__hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%; } .clinic__hero { z-index: 1; } .clinic__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: -22px 8px 0; position: relative; z-index: 2; } .clinic__shot { --tilt: 0deg; transform: rotate(var(--tilt)); } .clinic__shot:nth-child(1) { --tilt: -1.6deg; } .clinic__shot:nth-child(3) { --tilt: 1.6deg; } .clinic__shot img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: right bottom; } .clinic__shot--tr img { object-position: right top; } .clinic__hero:hover, .clinic__hero:focus-visible { transform: translateY(-2px); box-shadow: var(--lift-hover); outline: none; } .clinic__shot:hover, .clinic__shot:focus-visible { transform: rotate(var(--tilt)) translateY(-3px); box-shadow: var(--lift-hover); outline: none; z-index: 3; } @media (max-width: 559px) { .clinic__row { margin: -14px 4px 0; gap: 6px; } } /* Skim emphasis (Round 14, D-086): Nic's bold-italic phrases lift off the body grey */ strong > em, em > strong { color: var(--text-em); } .letter strong > em, .letter em > strong { color: inherit; } /* ---------- evidence stacks (Round 11, D-081): real screenshots, overlapped, each a lightbox trigger ---------- */ .stack { display: grid; grid-template-columns: 1fr; align-items: start; padding-bottom: 6px; } .stack__item { --tilt: 0deg; display: block; width: 100%; padding: 0; border: 1px solid rgba(255,255,255,0.14); background: #0F0F0F; border-radius: var(--radius); overflow: hidden; box-shadow: var(--lift); cursor: zoom-in; transform: rotate(var(--tilt)); transform-origin: center; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; } .stack__item img { display: block; width: 100%; height: auto; } .stack__item:hover, .stack__item:focus-visible { transform: rotate(var(--tilt)) translateY(-3px); box-shadow: var(--lift-hover); outline: none; z-index: 3; } .stack__item:focus-visible { border-color: rgba(var(--gold-rgb), 0.7); } .stack__item + .stack__item { margin-top: -9%; } .stack__item--l { --tilt: -1.4deg; width: 84%; justify-self: start; z-index: 1; } .stack__item--r { --tilt: 1.6deg; width: 78%; justify-self: end; z-index: 2; } .stack__item--sm { width: 44%; margin-top: -7% !important; } .stack__item--wide { width: 92%; margin-top: -4% !important; } .stack--one .stack__item { cursor: zoom-in; } .doc--wide { margin-top: 40px; } .doc--wide .doc__frame .media-img, .doc--free .doc__frame .media-img { aspect-ratio: auto; object-fit: unset; } @media (min-width: 900px) { .doc--wide { margin-top: 52px; } .cs__media:has(.stack) { align-self: center; } } .lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); max-height: 94vh; overflow: auto; } .lightbox::backdrop { background: rgba(13, 9, 0, 0.88); } .lightbox__img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: #FFFFFF; } .lightbox__close { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(13,9,0,0.7); color: var(--text-1); display: flex; align-items: center; justify-content: center; cursor: pointer; } .lightbox__close:hover { background: rgba(13,9,0,0.95); } /* §11 — who-for as mirror rows (Round 9, F-073: Option C with Option E's weight). Each "for" line sits beside the line it rules out. The "for" column is wider, gold-edged and lifted; the "isn't" column is flat, dimmer and a step smaller. */ .mirror { max-width: 1000px; margin: 38px auto 0; } .mirror__head { display: none; grid-template-columns: 1.12fr 0.88fr; gap: 0 18px; margin-bottom: 12px; } @media (min-width: 760px) { .mirror__head { display: grid; } } .mirror__t { margin: 0; } .mirror__t--no { color: var(--text-2); } .mirror__t--yes .whofor__mark { color: var(--gold); background: rgba(var(--gold-rgb), 0.12); border: 1px solid rgba(var(--gold-rgb), 0.36); } .mirror__t--no .whofor__mark { color: var(--text-3); background: rgba(var(--text-3-rgb), 0.12); border: 1px solid rgba(var(--text-3-rgb), 0.3); } .mirror__row { display: grid; grid-template-columns: 1fr; margin-top: 12px; } @media (min-width: 760px) { .mirror__row { grid-template-columns: 1.12fr 0.88fr; gap: 0 18px; align-items: start; } } .mirror__yes, .mirror__no { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; line-height: 1.55; } .mirror__yes { padding: 20px 24px; font-size: 16px; color: var(--text-1); background: linear-gradient(180deg, var(--card-top), var(--card-bottom)); border: 1px solid var(--border-card); border-left: 3px solid var(--gold); border-radius: var(--radius-lg); box-shadow: var(--lift-hover); } .mirror__no { padding: 18px 22px; font-size: 14.5px; color: var(--text-3); background: rgba(206, 190, 240, 0.03); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); opacity: 0.9; } @media (max-width: 759px) { .mirror__no { margin-top: 6px; } } .mirror__yes svg { color: var(--gold); margin-top: 4px; } .mirror__no svg { color: var(--text-3); margin-top: 4px; } /* Reason 01 — the authority composite (Round 9, F-074). The stage photo is the frame; three typed platform chips overlap its foot and open the real screenshot as the receipt; three book covers fan out of the lower-right corner. The screenshots themselves would render their counts at ~4px in this column. */ .authority { margin: 0 0 28px; position: relative; } .authority__frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--lift); border: 1px solid rgba(255,255,255,0.10); background: var(--bg-deep); } .authority__frame .media-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 40%; border: 0; border-radius: 0; } .authority__rail { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } @media (min-width: 560px) { .authority__rail { position: absolute; left: 14px; right: 14px; bottom: -18px; margin: 0; flex-wrap: nowrap; } } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px 7px 9px; white-space: nowrap; border-radius: 999px; cursor: zoom-in; font: inherit; background: rgba(13, 9, 0, 0.82); color: var(--text-1); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 10px 24px rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color 0.2s ease, transform 0.2s ease; } .chip:hover, .chip:focus-visible { border-color: rgba(var(--gold-rgb), 0.6); transform: translateY(-1px); outline: none; } .chip svg { color: var(--gold); flex: 0 0 auto; } .chip b { font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; } .chip span { font-size: 11px; color: var(--text-2); } @media (min-width: 560px) and (max-width: 1099px) { .chip span { display: none; } } .authority__books { position: absolute; right: 12px; top: -14px; display: flex; align-items: flex-start; pointer-events: none; } .authority__books img { width: 54px; height: auto; border-radius: 3px; box-shadow: 0 12px 24px rgba(0,0,0,0.6); transform-origin: top center; } .authority__books img:nth-child(1) { transform: rotate(-8deg) translate(12px, 4px); } .authority__books img:nth-child(2) { transform: rotate(0deg); z-index: 1; width: 58px; } .authority__books img:nth-child(3) { transform: rotate(8deg) translate(-12px, 4px); } @media (min-width: 560px) { .authority__books img { width: 60px; } .authority__books img:nth-child(2) { width: 64px; } } .authority { margin-top: 10px; } @media (max-width: 559px) { .authority { margin-bottom: 0; margin-top: 0; } .authority__books { position: static; justify-content: flex-end; margin-top: 10px; align-items: flex-end; } .authority__books img { transform-origin: bottom center; } } /* ========================================================================== Round 21 — Calendar page (calendar.html, served at /bookyourcall and /bookacall). Same tokens, same components; only what the page adds is here. ========================================================================== */ /* progress indicator: one compact row, three EQUAL pills, sharing the hero ground */ .steps-bar { list-style: none; margin: 0 auto 30px; padding: 0; display: flex; gap: 8px; max-width: 780px; } .steps-bar__step { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; text-align: center; color: var(--text-3); background: rgba(206, 190, 240, 0.035); border: 1px solid var(--border-subtle); } .steps-bar__mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; line-height: 1; border: 1px solid rgba(var(--text-3-rgb), 0.4); color: var(--text-3); } .steps-bar__step--done { color: var(--text-2); border-color: var(--border); } .steps-bar__step--done .steps-bar__mark { color: var(--gold); border-color: rgba(var(--gold-rgb), 0.5); background: rgba(var(--gold-rgb), 0.12); } .steps-bar__step--now { color: #FFFFFF; border: 0; background: linear-gradient(180deg, var(--cta-fill-top) 0%, var(--cta-fill-bottom) 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 -1px 0 rgba(0,0,0,0.2) inset, 0 10px 28px rgba(var(--cta-rgb), 0.28); text-shadow: 0 1px 2px rgba(74, 30, 0, 0.45); } .steps-bar__step--now .steps-bar__mark { color: #FFFFFF; border-color: rgba(255,255,255,0.7); box-shadow: 0 0 0 3px rgba(255,255,255,0.16); text-shadow: none; } @media (max-width: 559px) { .steps-bar { gap: 6px; margin-bottom: 24px; } .steps-bar__step { flex-direction: column; gap: 6px; padding: 9px 6px 8px; font-size: 11px; line-height: 1.15; } .steps-bar__mark { width: 20px; height: 20px; font-size: 10.5px; } } /* booking hero: no VSL, no overlap below — the calendar is the fold */ .book { padding-top: 26px; padding-bottom: calc(var(--section-pad) * 0.9); } @media (min-width: 768px) { .book { padding-top: 30px; } } .book__head { text-align: center; max-width: 880px; margin: 0 auto; } .book__head .h-hero { max-width: 27ch; margin-left: auto; margin-right: auto; } .book__head .kicker { margin-bottom: 16px; } /* the calendar on paper: same material as the application panel on page 1 */ .cal-panel { /* Round 25 (F-114): 1080 (the container's usable width) so the widget iframe gets 1048px; GHL's Neo widget goes two-column (details left, picker right) from 990px of frame width. */ max-width: 1080px; margin: 30px auto 0; background: linear-gradient(180deg, var(--paper-top), var(--paper)); border-radius: var(--radius-lg); padding: 12px; color: var(--ink); box-shadow: 0 -1px 0 rgba(var(--cta-rgb), 0.42) inset, 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06), 0 18px 60px rgba(var(--cta-rgb), 0.10); scroll-margin-top: 18px; } @media (min-width: 768px) { .cal-panel { margin-top: 36px; padding: 16px; } } /* Round 26 (F-117): availability reassurance on the paper plate, above the widget. Ink-on-paper like the rest of the panel, one step down in size and weight so it reads as a note rather than a second headline. */ .cal-note { max-width: 74ch; margin: 4px auto 12px; padding: 0 6px; font-size: 13px; font-style: italic; line-height: 1.5; color: var(--ink-2); text-align: center; text-wrap: pretty; } @media (min-width: 768px) { .cal-note { margin: 6px auto 14px; padding: 0 10px; font-size: 13.5px; } } .cal-slot { min-height: 520px; border-radius: var(--radius); overflow: hidden; background: #FFFFFF; } .cal-slot > .ph { min-height: 520px; border-radius: var(--radius); } .cal-slot iframe { display: block; width: 100%; border: 0; min-height: 720px; background: #FFFFFF; } /* .cal-caps / .cal-cap removed Round 22 (F-104): the caption block under the calendar is off the page */ .book .marquee { margin-top: 48px; } /* results: three result cards, end-result register. Title = the outcome, one line of context, and a two-receipt mini stack pinned to the card foot. */ .results-sec { padding-top: calc(var(--section-pad) * 0.95); } .results { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: 34px; } @media (min-width: 680px) and (max-width: 1019px) { .results { grid-template-columns: 1fr 1fr; } .results .result:last-child { grid-column: 1 / -1; max-width: 560px; width: 100%; justify-self: center; } } @media (min-width: 1020px) { .results { grid-template-columns: repeat(3, 1fr); gap: var(--gap); } } .result { display: flex; flex-direction: column; padding: 24px 22px 22px; } @media (min-width: 768px) { .result { padding: 28px 26px 24px; } } .result__who { margin: 0 0 12px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); line-height: 1.4; } .result__title { margin: 0; font-size: clamp(19px, 2.1vw, 22px); font-weight: 800; line-height: 1.25; letter-spacing: -0.008em; color: var(--text-1); text-wrap: balance; } .result__line { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); } .stack--mini { margin-top: auto; padding-top: 24px; padding-bottom: 8px; } .stack--mini .stack__item + .stack__item { margin-top: -11%; } .stack--mini .stack__item--r { width: 60%; } .stack--mini .stack__item--l { width: 74%; } .stack--mini .stack__item--mini-sm { --tilt: 1.8deg; } .stack--mini .stack__item--mini-wide { width: 82%; --tilt: -1.3deg; } .stack__item--crop img { width: 100%; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; object-position: var(--pos, center top); } .buffer--tight { margin-top: 10px; } .results-sec .cta-block--spaced { margin-top: 40px; } /* ========================================================================== Round 22 — Pre-Call Assignment page (callassignment.html). Show-up page: alert → hero + E5 → three steps → arrow → E6 (dark) → Google card (overlapping) → what happens on the call → proof by volume → footer. ========================================================================== */ /* 1. tentatively-scheduled alert: attention, not CTA. Violet bar, gold mark. */ .alert { background: var(--accent-neutral); color: var(--text-1); padding: 11px 0; position: relative; z-index: 1; } .alert__inner { display: flex; align-items: center; justify-content: center; gap: 12px; } .alert__mark { flex: 0 0 auto; color: var(--gold); } .alert p { margin: 0; text-align: center; font-size: 14.5px; font-weight: 700; line-height: 1.35; letter-spacing: 0.055em; text-transform: uppercase; } @media (min-width: 768px) { .alert p { font-size: 15.5px; } } /* 2. hero: lean; the video is the fold */ .pca-hero { padding-top: 34px; padding-bottom: calc(var(--section-pad) * 0.8); } @media (min-width: 768px) { .pca-hero { padding-top: 44px; } } .pca-hero .h-hero { max-width: 34ch; margin-left: auto; margin-right: auto; } .pca-hero .vsl { margin-top: 26px; } /* 3. next steps: three columns, a drawn instrument at the top of each (same .inst as the landing page), Step 1 carries the buttons. Round 23: cards keep their natural heights; the arrow measures the Step 3 card and starts at its bottom edge (site.js). */ .nsteps { position: relative; padding-bottom: calc(var(--section-pad) * 0.9); } .nsteps__grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: 34px; } @media (min-width: 900px) { .nsteps__grid { grid-template-columns: repeat(3, 1fr); align-items: start; } } .nstep { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .nstep__media { padding: 14px 14px 0; } .nstep__media .inst { box-shadow: none; } .nstep__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; } .nstep__label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } .nstep__label i { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11.5px; background: rgba(var(--gold-rgb), 0.12); border: 1px solid rgba(var(--gold-rgb), 0.4); } .nstep__title { margin: 0; font-size: clamp(18px, 2vw, 21px); font-weight: 800; line-height: 1.25; color: var(--text-1); } .nstep__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); } .nstep__btns { display: grid; gap: 10px; margin-top: 8px; } .nstep__btns .btn { width: 100%; min-height: 52px; padding: 12px 18px; } .nstep__btns .btn__main { font-size: 15px; } .btn--ghost { background: transparent; color: var(--text-1); border: 1px solid var(--border); box-shadow: none; } .btn--ghost:hover, .btn--ghost:focus-visible { box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.5), 0 10px 30px rgba(0,0,0,0.35); border-color: rgba(var(--gold-rgb), 0.6); transform: translateY(-1px); } .btn--ghost .btn__main { text-shadow: none; } .btn.is-inert { opacity: 0.55; pointer-events: none; } .nstep__note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-3); font-style: italic; } .nstep--now { box-shadow: var(--lift-hover); border-color: rgba(var(--gold-rgb), 0.35); } .before { max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--text-2); } .before b { color: var(--text-1); font-weight: 700; } /* the flow arrow: leaves the Step 3 card's bottom edge, lands on the video below (same section, same ground) */ .flow { position: relative; height: 110px; margin: 0; z-index: 3; pointer-events: none; } .flow svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .flow__track { fill: none; stroke: rgba(var(--accent-neutral-rgb), 0.45); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .flow__draw { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.9; } .flow.is-on .flow__draw { animation: flow-draw 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards, flow-settle 1.2s ease 1.8s forwards; } .flow__head { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } .flow.is-on .flow__head { animation: flow-head 0.4s ease 1.5s forwards; } .flow__spark { fill: var(--gold); opacity: 0; filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.9)); } .flow.is-on .flow__spark { opacity: 1; } .flow__bloom { fill: rgba(var(--gold-rgb), 0.35); opacity: 0; transform-box: fill-box; transform-origin: center; } .flow.is-on .flow__bloom { animation: flow-bloom 1.1s ease-out 1.5s forwards; } @keyframes flow-draw { to { stroke-dashoffset: 0; } } @keyframes flow-settle { to { opacity: 0.45; } } @keyframes flow-head { to { opacity: 1; } } @keyframes flow-bloom { 0% { opacity: 0.8; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.6); } } .flow--m { display: block; } .flow--d { display: none; } @media (min-width: 900px) { .flow--m { display: none; } .flow--d { display: block; } .flow { height: 150px; } } .vsl--domino { margin-top: 0; } @media (prefers-reduced-motion: reduce) { .flow__draw { stroke-dashoffset: 0; opacity: 0.6; } .flow__head { opacity: 1; } .flow__spark { display: none; } } /* 4. (Round 23) the video sits in the steps section on the same ground; the dark band and the overlap are retired (dark-palette-mode: on one continuous base there is no boundary to straddle; the paper surface + halo does the job). */ .gsec { padding-top: 0; padding-bottom: calc(var(--section-pad) * 0.9); } .gcard { max-width: 860px; margin: 0 auto; position: relative; z-index: 2; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 -1px 0 rgba(var(--cta-rgb), 0.42) inset, 0 30px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08), 0 18px 60px rgba(var(--cta-rgb), 0.10); } .gcard__bar { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--accent-neutral); color: var(--text-1); padding: 11px 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; line-height: 1.3; } .gcard__bar svg { flex: 0 0 auto; } .gcard__body { background: linear-gradient(180deg, var(--paper-top), var(--paper)); color: var(--ink); padding: 24px 22px 26px; } @media (min-width: 768px) { .gcard__body { padding: 30px 34px 32px; } } .gcard__text { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); } .gcard__text b { color: var(--ink); } .gcard__shot { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(21,17,9,0.14); box-shadow: 0 14px 34px rgba(0,0,0,0.18); background: #FFFFFF; } .gcard__shot img { display: block; width: 100%; height: auto; } /* 6. what happens on the call: five beats on a spine, then two outcomes */ .beats { max-width: 820px; margin: 34px auto 0; } .beats .steps { gap: 20px; position: relative; } .beats .step { grid-template-columns: 48px 1fr; gap: 18px; padding: 20px 22px; border-radius: var(--radius-lg); background: rgba(206, 190, 240, 0.035); border: 1px solid var(--border-subtle); } .beats .step__num { width: 40px; height: 40px; font-size: 15px; margin-top: 2px; } .beats .step__title { margin: 6px 0 6px; font-size: clamp(16.5px, 1.9vw, 19px); } .outcomes { display: grid; grid-template-columns: 1fr; gap: var(--gap); max-width: 920px; margin: 34px auto 0; } @media (min-width: 720px) { .outcomes { grid-template-columns: 1fr 1fr; } } .outcome { padding: 24px 24px 22px; } .outcome--fit { border-left: 3px solid var(--gold); } .outcome__lead { margin: 0 0 8px; font-size: 16px; font-weight: 800; line-height: 1.35; color: var(--text-1); } .outcome__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); } .after-title { max-width: 820px; margin: 40px auto 0; text-align: center; font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; color: var(--text-1); } .signoff { max-width: 720px; margin: 34px auto 0; text-align: center; color: var(--text-2); font-size: 16px; line-height: 1.6; } .signoff__believe { display: block; margin-top: 14px; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } /* 7. proof by volume: bonus line, headline, endorsers, badges, plaques */ .bonus { max-width: 720px; margin: 0 auto 14px; font-size: 14px; line-height: 1.55; color: var(--text-3); font-style: italic; text-align: center; } .proof-intro { max-width: 760px; margin: 14px auto 0; text-align: center; color: var(--text-2); } .proof-title { margin: 44px 0 0; text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .proof-title + .endorsers { margin-top: 18px; } .badges { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 620px) { .badges { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .badges { grid-template-columns: 1fr 1fr 1fr; gap: 12px; } } .badge { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--radius); background: rgba(206, 190, 240, 0.035); border: 1px solid var(--border-subtle); font-size: 14px; line-height: 1.5; color: var(--text-2); } .badge svg { color: var(--gold); margin-top: 3px; } .badge b { color: var(--text-1); font-weight: 700; } .proof-title + .wall { margin-top: 18px; } .proof-lede { max-width: 760px; margin: 0 auto; text-align: center; font-size: 15px; line-height: 1.55; color: var(--text-2); } .proof .disclaimer { text-align: center; max-width: 760px; margin: 40px auto 0; } /* Round 24: follows the last wins row directly now the plaques are off */ .proof .buffer { margin-top: 10px; } /* ========================================================================== Round 23 — pre-call page, Nic's notes A–G. ========================================================================== */ /* A. the three step instruments, in the landing page's 12s loop grammar (gold = ignition) */ /* Round 24: the tilt lives here, not in an SVG transform attribute; the shared transform-box: fill-box rule read rotate(-6 108 120) against the ellipse's own box and swung the ring ~8px off the date cell (F-107 A). */ .x-pring { stroke-dasharray: 130; stroke-dashoffset: 130; transform: rotate(-6deg); animation: x-pring 12s ease-out infinite; } @keyframes x-pring { 0%,8% { stroke-dashoffset: 130; } 24%,92% { stroke-dashoffset: 0; } 99%,100% { stroke-dashoffset: 130; } } .x-pcell { animation: x-pcell 12s ease-out infinite; } @keyframes x-pcell { 0%,20% { fill: rgba(251,171,6,0); } 26%,92% { fill: rgba(251,171,6,0.22); } 99%,100% { fill: rgba(251,171,6,0); } } .x-pcheck { opacity: 0; transform: scale(0.4); animation: x-pcheck 12s cubic-bezier(0.2,0.8,0.2,1.2) infinite; } @keyframes x-pcheck { 0%,26% { opacity: 0; transform: scale(0.4); } 31%,92% { opacity: 1; transform: scale(1); } 99%,100% { opacity: 0; transform: scale(0.4); } } .x-ptime { opacity: 0; transform: translateX(-8px); animation: x-ptime 12s ease-out infinite; } @keyframes x-ptime { 0%,30% { opacity: 0; transform: translateX(-8px); } 36%,92% { opacity: 1; transform: translateX(0); } 99%,100% { opacity: 0; transform: translateX(-8px); } } .x-pmsg1 { opacity: 0; transform: translateY(10px); animation: x-pmsg1 12s ease-out infinite; } @keyframes x-pmsg1 { 0%,6% { opacity: 0; transform: translateY(10px); } 12%,92% { opacity: 1; transform: translateY(0); } 99%,100% { opacity: 0; transform: translateY(10px); } } .x-pmsg2 { opacity: 0; transform: translateY(10px); animation: x-pmsg2 12s ease-out infinite; } @keyframes x-pmsg2 { 0%,34% { opacity: 0; transform: translateY(10px); } 40%,92% { opacity: 1; transform: translateY(0); } 99%,100% { opacity: 0; transform: translateY(10px); } } .x-pdone { opacity: 0; transform: scale(0.4); animation: x-pdone 12s cubic-bezier(0.2,0.8,0.2,1.2) infinite; } @keyframes x-pdone { 0%,48% { opacity: 0; transform: scale(0.4); } 54%,92% { opacity: 1; transform: scale(1); } 99%,100% { opacity: 0; transform: scale(0.4); } } .x-phalo { animation: x-phalo 2.4s ease-in-out infinite; } @keyframes x-phalo { 0%,100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.35); opacity: 0; } } .x-pprog { transform-origin: left center !important; transform: scaleX(0); animation: x-pprog 12s linear infinite; } @keyframes x-pprog { 0%,10% { transform: scaleX(0); } 88%,94% { transform: scaleX(1); } 99%,100% { transform: scaleX(0); } } .x-ptag { opacity: 0; animation: x-ptag 12s ease-out infinite; } @keyframes x-ptag { 0%,14% { opacity: 0; } 20%,92% { opacity: 1; } 99%,100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .x-pring { stroke-dashoffset: 0; } .x-pcell { fill: rgba(251,171,6,0.22); } .x-pcheck, .x-pdone { opacity: 1; transform: none; } .x-ptime, .x-pmsg1, .x-pmsg2, .x-ptag { opacity: 1; transform: none; } .x-pprog { transform: scaleX(0.7); } .x-phalo { opacity: 0.3; } } /* G. proof rhythm: vignette → videos → wins, twice, then the plaques */ .endorsers--vig { margin-top: 34px; } .endorsers--vig .endorser { aspect-ratio: 16 / 9; } @media (min-width: 700px) { .endorsers--vig .endorser { aspect-ratio: 3 / 2; } } .endorsers--vig .endorser__photo { object-position: center 18%; } .endorsers--vig .endorser__photo--mid { object-position: center 40%; } /* Round 24 (F-109): faces mid-frame in the Brendon portrait; 18% cut them at the card edge */ .endorsers--vig .endorser__txt { padding: 16px 18px; } .endorsers--vig .endorser__quote { font-size: 14px; line-height: 1.45; } .endorsers--vig .endorser__name { margin-top: 8px; font-size: 12px; } .vids { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: var(--gap); } @media (min-width: 700px) { .vids { grid-template-columns: repeat(3, 1fr); } } .vid { display: flex; flex-direction: column; background: linear-gradient(180deg, var(--card-top), var(--card-bottom)); border: 1px solid var(--border-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--lift); } .vid__frame { position: relative; aspect-ratio: 16 / 9; background: var(--bg-deep); overflow: hidden; } .vid__frame > .ph { position: absolute; inset: 0; min-height: 0; border-radius: 0; border-width: 0 0 1px; } .vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .vid__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; display: block; } .vid__play img { display: block; width: 100%; height: 100%; object-fit: cover; } .vid__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,9,0,0) 50%, rgba(13,9,0,0.55) 100%); } .vid__play i { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(13,9,0,0.7); border: 2px solid var(--gold); box-shadow: 0 0 0 8px rgba(var(--gold-rgb), 0.16), 0 14px 34px rgba(0,0,0,0.5); z-index: 1; transition: transform 0.2s ease, box-shadow 0.2s ease; } .vid__play i::before { content: ""; position: absolute; left: 25px; top: 19px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--gold); } .vid__play:hover i, .vid__play:focus-visible i { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(var(--gold-rgb), 0.22), 0 18px 40px rgba(0,0,0,0.55); } .vid__take { margin: 0; padding: 16px 18px 0; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--text-1); } .vid__who { margin: 0; padding: 8px 18px 18px; font-size: 13px; line-height: 1.45; color: var(--text-3); } .vid__who b { color: var(--gold); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; margin-right: 6px; } /* Round 24: the click-pop player (F-108). Native ; ::backdrop dims the page; Esc, the X and the backdrop close it. The iframe src is set on open and cleared on close so the audio stops with the box. */ .vidbox { border: 0; padding: 0; background: transparent; width: min(92vw, 1100px); max-width: none; max-height: none; overflow: visible; } .vidbox::backdrop { background: rgba(13, 9, 0, 0.9); } .vidbox__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.35), 0 40px 120px rgba(0,0,0,0.7), 0 0 80px rgba(var(--gold-rgb), 0.12); } .vidbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .vidbox__cap { margin: 14px 4px 0; font-size: 14px; line-height: 1.45; color: var(--text-2); text-align: center; } .vidbox__cap b { color: var(--gold); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; margin-right: 8px; } .vidbox__cap:empty, .vidbox__cap b:empty + span:empty { display: none; } @media (max-width: 700px) { .vidbox { width: 100vw; } .vidbox__frame { border-radius: 0; } .vidbox__cap { padding: 0 16px; } } .proof .wins__grid { margin-top: var(--gap); } .proof .wall--plaques { margin-top: 44px; max-width: 1000px; margin-left: auto; margin-right: auto; }