/* ============================================================ Delight - Daylight-style scroll marketing site Warm, cinematic, editorial. Vanilla CSS, no build. ============================================================ */ :root { --cream: #FBF3E7; --cream-2: #F4EAD8; --card: #EFE6D6; --ink: #1C1A17; --body: #5A5347; --orange: #D5501E; --orange-deep: #C6421B; --orange-glow: #E8992E; --amber: #E0A11A; --sage: #8C877B; --storm: #3B3A33; --purple: #B7A6F0; --purple-deep: #7B5BE0; --hair: rgba(28, 26, 23, 0.12); --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-serif: "Fraunces", Georgia, "Times New Roman", serif; --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --wrap: 1240px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } /* overflow-x lives on , not : putting it on body makes body a scroll container and silently breaks scrollIntoView / anchor scrolling (the scorecard result and #anchor links wouldn't scroll into view). */ html { scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.015em; line-height: 1.05; } p { margin: 0; } a { color: inherit; text-decoration: none; } /* ---------- shared ---------- */ .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--body); margin: 0 0 20px; } .eyebrow--light { color: rgba(255, 255, 255, 0.82); } .serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; } .btn { display: inline-block; font-family: var(--font-sans); font-size: 15px; font-weight: 500; padding: 14px 24px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--dark { background: var(--ink); color: var(--cream); } .btn--dark:hover { background: #000; } .btn--light { background: #fff; color: var(--ink); } .btn--light:hover { background: #f0e9dc; } .btn--orange { background: var(--orange); color: #fff; } .btn--orange:hover { background: var(--orange-deep); } .btn--outline { background: transparent; color: var(--ink); border-color: rgba(28, 26, 23, 0.35); } .btn--outline:hover { border-color: var(--ink); } .btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); } .btn--ghost-light:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; } .btn--lg { padding: 16px 28px; font-size: 16px; } /* ---------- reveal ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal-lines .word { display: inline-block; opacity: 0; transform: translateY(0.5em); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal-lines.in .word { opacity: 1; transform: none; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 20px 40px; transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); } .nav.scrolled { background: rgba(251, 243, 231, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--hair); } .nav-brand { display: flex; align-items: center; gap: 10px; color: #fff; transition: color 0.3s var(--ease); } .nav.scrolled .nav-brand { color: var(--ink); } .nav-mark { width: 30px; height: auto; } .wordmark { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .nav-links { display: flex; gap: 28px; margin-left: auto; } .nav-links a { font-size: 14px; color: #fff; opacity: 0.92; transition: color 0.3s var(--ease); } .nav.scrolled .nav-links a { color: var(--ink); } .nav-links a:hover { opacity: 1; } .nav-cta { padding: 10px 18px; font-size: 14px; } /* ============================================================ 1 · HERO - full-bleed dusk, headline bottom-left, orange card ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; padding: 116px 40px 8vh; color: #fff; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(120% 80% at 80% 0%, rgba(255, 214, 150, 0.55) 0%, rgba(255, 214, 150, 0) 55%), linear-gradient(180deg, #7a3f1e 0%, #a24a1f 42%, #cf5a22 74%, #e08a34 100%); } .hero-bg::before { /* silhouetted horizon so the dusk feels photographic */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(20, 12, 8, 0) 0%, rgba(20, 12, 8, 0.55) 100%); } .hero-bg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.04) 0 2px, rgba(0, 0, 0, 0.03) 60px 120px); mix-blend-mode: soft-light; } .hero-content { position: relative; max-width: 760px; } .hero-eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); margin: 0 0 22px; } .hero-title { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 500; letter-spacing: -0.03em; } .hero-lede { margin: 16px 0 0; font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: clamp(1.4rem, 3vw, 2.3rem); color: #fff; letter-spacing: -0.01em; line-height: 1.15; } .hero-sub { max-width: 560px; margin: 22px 0 0; font-size: clamp(1rem, 1.4vw, 1.18rem); color: rgba(255, 255, 255, 0.9); } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } .hero-fine { margin: 18px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.72); } /* ============================================================ 2 · THE LEAK - bordered grid, promise/delivery gap ============================================================ */ .features { border-top: 1px solid var(--hair); background: var(--cream); } .frow { display: grid; border-bottom: 1px solid var(--hair); } .frow--intro { grid-template-columns: 1fr; } .frow--three { grid-template-columns: repeat(3, 1fr); } .fcell { border-right: 1px solid var(--hair); } .fcell:last-child { border-right: none; } .fhead { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 92px 36px 84px; } .fhead h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 500; line-height: 1.08; } .fhead-sub { max-width: 52ch; margin: 24px auto 0; color: var(--body); font-size: 1.08rem; } .fstage { padding: 54px 40px 60px; min-height: 300px; display: flex; flex-direction: column; } .fstage .eyebrow { margin-bottom: 16px; } .fstage h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 500; line-height: 1.12; } .fstage p { margin-top: 16px; color: var(--body); } /* ============================================================ 3/6/8 · EDITORIAL - big serif over gradient/photo-style backdrops ============================================================ */ .editorial { display: flex; align-items: center; justify-content: center; text-align: center; padding: 20vh 24px; color: #fff; position: relative; } .editorial-inner { max-width: 1000px; position: relative; } .editorial h2 { font-size: clamp(2.2rem, 5.6vw, 5rem); font-weight: 400; } .editorial-lead { max-width: 600px; margin: 30px auto 0; font-size: clamp(1.02rem, 1.5vw, 1.28rem); color: rgba(255, 255, 255, 0.9); font-family: var(--font-sans); } .editorial .btn { margin-top: 32px; } .editorial--sunrise { background: radial-gradient(120% 120% at 50% 120%, #F6D08A 0%, #C98A2E 45%, #9A6B28 100%); } .editorial--storm { background: linear-gradient(180deg, #4b4a43 0%, #2b2a25 100%); } .editorial--sunset { background: linear-gradient(180deg, #7a4a3a 0%, #b5642f 55%, #e08a34 120%); } /* ============================================================ 4 · STEPS ============================================================ */ .steps { background: var(--cream-2); } .step { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: var(--wrap); margin: 0 auto; padding: 11vh 40px; } .step + .step { border-top: 1px solid var(--hair); } .step--reverse .step-copy { order: 2; } .step--reverse .step-visual { order: 1; } .step-copy h3 { font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 500; margin-bottom: 20px; } .mono-sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--body); margin-bottom: 16px; } .step-copy p { color: var(--body); max-width: 42ch; } .step-copy .btn { margin-top: 26px; } .ticks { list-style: none; padding: 0; margin: 20px 0 0; } .ticks li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--body); } .ticks li::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 7px; border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(-45deg); } .step-visual { display: flex; align-items: center; justify-content: center; } .brief-card { width: 100%; max-width: 380px; background: var(--cream); border: 1px solid var(--hair); border-radius: 22px; padding: 22px; box-shadow: 0 30px 70px rgba(28, 26, 23, 0.14); } .brief-top { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); } .brief-mark { width: 26px; height: 26px; color: var(--orange); } .brief-top span { font-weight: 600; font-size: 16px; } .brief-badge { font-style: normal; margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-deep); background: rgba(213, 80, 30, 0.1); padding: 4px 9px; border-radius: 20px; } .brief-list { list-style: none; margin: 8px 0 0; padding: 0; } .brief-list li { display: flex; align-items: center; gap: 12px; padding: 13px 4px; font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--hair); } .brief-list li:last-child { border-bottom: none; } .brief-list li em { font-style: normal; margin-left: auto; font-size: 12px; color: var(--sage); font-family: var(--font-mono); letter-spacing: 0.04em; } .brief-li--active { color: var(--ink); font-weight: 500; } .brief-li--active em { color: var(--orange-deep); } .brief-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--sage); flex: none; } .brief-dot--done { background: var(--orange); border-color: var(--orange); } .brief-dot--active { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 4px rgba(213, 80, 30, 0.16); } .brief-foot { margin-top: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); text-align: center; } .iso { width: 100%; max-width: 400px; } .iso-svg { width: 100%; height: auto; } .chart-card { width: 100%; max-width: 430px; background: var(--cream); border-radius: 20px; padding: 26px; box-shadow: 0 24px 60px rgba(28, 26, 23, 0.14); } .chart-tabs { display: flex; gap: 20px; font-size: 15px; color: var(--body); margin-bottom: 18px; } .chart-tabs .active { color: var(--ink); font-weight: 600; } .chart-metric { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; } .chart-metric b { font-family: var(--font-serif); font-size: 50px; font-weight: 400; } .chart-metric i { font-style: normal; color: var(--body); font-size: 14px; } .chart { width: 100%; height: 150px; } .chart-guide { stroke: var(--hair); stroke-width: 1.5; } .chart-line { fill: none; stroke: var(--orange); stroke-width: 3.5; stroke-linecap: round; } .chart-days { display: flex; justify-content: space-between; font-size: 11px; font-family: var(--font-mono); color: var(--sage); margin-top: 10px; } .chart-days .active { color: var(--ink); } /* ============================================================ SCORECARD - lead magnet + capture ============================================================ */ .scorecard { background: var(--cream-2); border-top: 1px solid var(--hair); } .sc-inner { max-width: 780px; margin: 0 auto; padding: 13vh 40px; } .sc-head { text-align: center; margin-bottom: 44px; } .sc-head h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); font-weight: 500; } .sc-lead { max-width: 56ch; margin: 22px auto 0; color: var(--body); font-size: 1.08rem; } .sc-card { background: var(--cream); border: 1px solid var(--hair); border-radius: 24px; padding: clamp(24px, 4vw, 44px); box-shadow: 0 30px 70px rgba(28, 26, 23, 0.10); } .sc-questions { list-style: none; margin: 0; padding: 0; counter-reset: q; } .sc-q { padding: 22px 0; border-bottom: 1px solid var(--hair); } .sc-q:first-child { padding-top: 0; } .sc-q-text { font-size: 1.06rem; font-weight: 500; color: var(--ink); margin-bottom: 14px; display: flex; gap: 10px; align-items: baseline; } .sc-q-num { font-family: var(--font-mono); font-size: 12px; color: var(--orange-deep); flex: none; } .sc-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .sc-scale label { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: 11px 8px; border: 1px solid var(--hair); border-radius: 10px; font-size: 13px; color: var(--body); cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); } .sc-scale input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .sc-scale label:hover { border-color: rgba(213, 80, 30, 0.5); } .sc-scale label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--cream); } .sc-scale label:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; } .sc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; } .sc-field { display: flex; flex-direction: column; gap: 7px; } .sc-field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body); } .sc-field input { font-family: var(--font-sans); font-size: 16px; padding: 13px 15px; border: 1px solid var(--hair); border-radius: 10px; background: var(--cream-2); color: var(--ink); transition: border-color 0.2s var(--ease); } .sc-field input:focus { outline: none; border-color: var(--orange); } .sc-error { color: var(--orange-deep); font-size: 14px; margin-top: 16px; } .sc-submit { margin-top: 22px; width: 100%; } .sc-fine { text-align: center; margin-top: 14px; font-size: 13px; color: var(--sage); } .sc-result { background: var(--cream); border: 1px solid rgba(213, 80, 30, 0.3); border-radius: 24px; padding: clamp(28px, 4vw, 48px); box-shadow: 0 30px 70px rgba(213, 80, 30, 0.12); animation: sc-rise 0.6s var(--ease) both; } @keyframes sc-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .sc-result-stage { font-family: var(--font-serif); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 400; line-height: 1; margin-bottom: 18px; } .sc-result-copy { color: var(--body); font-size: 1.1rem; max-width: 56ch; } .sc-ranking { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .sc-ranking li { display: flex; align-items: center; gap: 14px; } .sc-ranking .rk-name { width: 116px; flex: none; font-weight: 500; font-size: 14px; } .sc-ranking .rk-track { flex: 1; height: 8px; background: var(--card); border-radius: 20px; overflow: hidden; } .sc-ranking .rk-fill { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--orange), var(--amber)); } .sc-ranking .rk-val { width: 44px; flex: none; text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--sage); } .sc-ranking li.rk-weak .rk-name { color: var(--orange-deep); } .sc-result-sent { margin-top: 26px; padding: 14px 16px; background: var(--cream-2); border-radius: 12px; font-size: 14px; color: var(--body); } .sc-result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* ============================================================ PROCESS - Listen → Map → Design → Ship → Refine ============================================================ */ .process { max-width: var(--wrap); margin: 0 auto; padding: 13vh 40px; } .process-head { text-align: center; margin-bottom: 60px; } .process-head h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); font-weight: 500; } .process-lead { max-width: 60ch; margin: 22px auto 0; color: var(--body); font-size: 1.08rem; } .process-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); } .process-step { display: grid; grid-template-columns: 92px 1fr; gap: 32px; padding: 40px 8px; border-bottom: 1px solid var(--hair); align-items: start; } .ps-num { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3rem); color: var(--orange); line-height: 0.9; } .ps-body h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; } .ps-body > p { color: var(--body); max-width: 54ch; margin-top: 12px; } .ps-outcome { margin-top: 16px !important; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; color: var(--ink) !important; font-weight: 500; } .ps-out-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-deep); border: 1px solid rgba(213, 80, 30, 0.35); border-radius: 20px; padding: 3px 10px; } /* ============================================================ PROOF - first-30-days teardown ============================================================ */ .proof { background: var(--cream-2); border-top: 1px solid var(--hair); } .proof-head { max-width: var(--wrap); margin: 0 auto; padding: 13vh 40px 0; text-align: center; } .proof-head h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); font-weight: 500; } .proof-lead { max-width: 62ch; margin: 22px auto 0; color: var(--body); font-size: 1.08rem; } .proof-grid { max-width: var(--wrap); margin: 0 auto; padding: 56px 40px 13vh; display: grid; grid-template-columns: 1.2fr 0.9fr; gap: 56px; align-items: start; } .timeline { list-style: none; margin: 0; padding: 0; } .tl-item { position: relative; padding: 0 0 34px 30px; border-left: 2px solid var(--hair); } .tl-item:last-child { padding-bottom: 0; } .tl-item::before { content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--cream-2); } .tl-week { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--orange-deep); margin-bottom: 8px; } .tl-item h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 500; } .tl-item p { margin-top: 10px; color: var(--body); } .proof-visual { position: sticky; top: 100px; } .proof-note { margin-top: 16px; font-size: 13px; color: var(--sage); font-style: italic; } .proof-metrics { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .proof-metrics li { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; border-left: 2px solid var(--orange); } .proof-metrics b { font-size: 15px; } .proof-metrics span { font-size: 13px; color: var(--body); } /* ============================================================ 5 · PRICING ============================================================ */ .pricing { max-width: var(--wrap); margin: 0 auto; padding: 12vh 40px; } .pricing-head { text-align: center; margin-bottom: 48px; } .pricing-head h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); font-weight: 500; } .pricing-clarity { max-width: 46ch; margin: 20px auto 0; color: var(--body); } .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 900px; margin: 0 auto; } .card { background: var(--card); border-radius: 22px; padding: 38px; display: flex; flex-direction: column; border: 1px solid var(--hair); } .card--featured { background: linear-gradient(170deg, #F6E9D2, #EFDFC3); border-color: rgba(213, 80, 30, 0.35); box-shadow: 0 24px 60px rgba(213, 80, 30, 0.12); } .card-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--body); margin-bottom: 22px; } .price { font-family: var(--font-serif); font-size: clamp(2.3rem, 4vw, 3.2rem); font-weight: 400; line-height: 1; } .price span { font-family: var(--font-sans); font-size: 1rem; color: var(--body); } .price--word { font-style: italic; } .card-body { color: var(--body); margin: 18px 0 8px; } .card-fine { color: var(--sage); font-size: 14px; } .card-btn { margin-top: auto; align-self: flex-start; } .card:not(.card--featured) .card-btn { margin-top: 22px; } .fit { max-width: 900px; margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .fit-col { background: var(--card); border: 1px solid var(--hair); border-radius: 18px; padding: 28px 30px; } .fit-col--yes { background: linear-gradient(170deg, #F6E9D2, #EFDFC3); border-color: rgba(213, 80, 30, 0.28); } .fit-h { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; } .fit-col--no .fit-h { color: var(--sage); } .fit-ic { width: 17px; height: 17px; color: var(--orange); flex: none; } .fit-col p:not(.fit-h) { color: var(--body); font-size: 0.98rem; } /* ============================================================ 9 · NETWORK SECTION ============================================================ */ .network-sec { max-width: 1000px; margin: 0 auto; padding: 14vh 40px; text-align: center; } .network-sec h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 400; } .network-lead { max-width: 560px; margin: 26px auto 0; color: var(--body); font-size: 1.12rem; } .network-sec .btn { margin-top: 30px; } .network { margin: 56px 0 0; } .rings-svg { width: 100%; max-width: 720px; height: auto; margin: 0 auto; display: block; } .rings-arcs path { stroke-dasharray: 1600; stroke-dashoffset: 1600; } .network.in .rings-arcs path { animation: draw 2s var(--ease) forwards; } .rings-arcs path:nth-child(1) { animation-delay: 0.45s; } .rings-arcs path:nth-child(2) { animation-delay: 0.3s; } .rings-arcs path:nth-child(3) { animation-delay: 0.15s; } .rings-arcs path:nth-child(4) { animation-delay: 0s; } @keyframes draw { to { stroke-dashoffset: 0; } } .rings-sun { opacity: 0; transform-origin: 450px 280px; } .network.in .rings-sun { animation: pop 0.6s var(--ease) forwards 0.9s; } @keyframes pop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } } .net-labels { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; margin-top: 36px; } .net-labels span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); border: 1px solid var(--hair); border-radius: 20px; padding: 5px 12px; } /* ============================================================ 10 · CTA - purple split ============================================================ */ .cta { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; background: linear-gradient(150deg, #FBEFD7 0%, #F5D9A6 55%, #EFC078 100%); min-height: 68vh; } .cta-copy { padding: 12vh 40px 12vh 8vw; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; max-width: 620px; } .cta-mark { width: 52px; height: auto; color: var(--ink); margin-bottom: 24px; } .cta-copy h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 500; } .cta-copy p { color: rgba(28, 26, 23, 0.72); margin-top: 18px; max-width: 40ch; } .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .cta-fine { font-size: 14px; margin-top: 16px; } .cta-fine a { text-decoration: underline; text-underline-offset: 2px; } .cta-visual { position: relative; background: linear-gradient(150deg, #E8A24A 0%, #C6421B 100%); overflow: hidden; } .cta-calendly { position: relative; z-index: 2; width: 100%; height: 100%; min-height: 700px; } .cta-calendly:empty { display: none; } .cta-card { position: absolute; top: 18%; left: 14%; width: 46%; aspect-ratio: 4 / 3; border-radius: 12px; background: linear-gradient(150deg, #FBEFD7, #F0B24A); box-shadow: 0 24px 60px rgba(28, 26, 23, 0.25); } /* Scorecard-result preview - the real deliverable, shown as a product shot */ .cta-mock { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 6% 8%; } .mock-card { width: 100%; max-width: 400px; background: var(--cream); border: 1px solid rgba(28, 26, 23, 0.08); border-radius: 20px; padding: 26px 26px 22px; box-shadow: 0 40px 90px rgba(28, 26, 23, 0.32), 0 8px 24px rgba(28, 26, 23, 0.18); transform: rotate(-2.2deg); transition: transform 0.5s var(--ease); } .cta-visual:hover .mock-card { transform: rotate(0deg); } .mock-top { display: flex; align-items: center; gap: 9px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); } .mock-mark { width: 24px; height: 24px; color: var(--orange); } .mock-name { font-weight: 600; font-size: 15px; color: var(--ink); } .mock-badge { font-style: normal; margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-deep); background: rgba(213, 80, 30, 0.1); padding: 4px 9px; border-radius: 20px; } .mock-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); margin: 18px 0 6px; } .mock-stage { font-family: var(--font-serif); font-size: 2.1rem; font-weight: 400; line-height: 1; color: var(--ink); } .mock-sub { color: var(--body); font-size: 13.5px; line-height: 1.5; margin-top: 10px; } .mock-bars { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .mock-bars li { display: flex; align-items: center; gap: 12px; } .mb-name { width: 82px; flex: none; font-size: 13px; font-weight: 500; color: var(--ink); } .mb-track { flex: 1; height: 7px; background: var(--card); border-radius: 20px; overflow: hidden; } .mb-fill { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--orange), var(--amber)); } .mb-val { width: 44px; flex: none; text-align: right; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sage); } .mock-bars li.mb-weak .mb-name { color: var(--orange-deep); } .mock-bars li.mb-weak .mb-fill { background: var(--orange-deep); } .mock-bars li.mb-weak .mb-val { color: var(--orange-deep); } .mock-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage); text-align: center; } /* Leaky funnel - supporting visual under the "used, not loved" statement */ .leak-funnel { margin: 64px auto 0; max-width: 720px; } .lf-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; height: 220px; } .lf-step { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; } .lf-bar { width: 100%; height: 0; border-radius: 12px 12px 3px 3px; background: linear-gradient(180deg, rgba(251, 243, 231, 0.32), rgba(251, 243, 231, 0.14)); border: 1px solid rgba(251, 243, 231, 0.16); transition: height 1s var(--ease); order: 2; } .reveal.in .lf-bar { height: var(--h); } .lf-drop .lf-bar { background: linear-gradient(180deg, rgba(232, 153, 46, 0.55), rgba(213, 80, 30, 0.32)); border-color: rgba(232, 153, 46, 0.4); } .lf-worst .lf-bar { background: linear-gradient(180deg, var(--orange-glow), var(--orange-deep)); border-color: var(--orange-glow); box-shadow: 0 12px 40px rgba(213, 80, 30, 0.4); } .lf-val { order: 1; font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fff; line-height: 1; margin-bottom: 10px; } .lf-worst .lf-val { color: var(--orange-glow); } .lf-label { order: 3; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); margin-top: 12px; text-align: center; min-height: 2.4em; } .lf-caption { margin: 26px auto 0; font-size: 14px; color: rgba(255, 255, 255, 0.66); text-align: center; } .cta-visual.has-calendly { background: var(--cream); } .cta-visual.has-calendly::after { display: none; } .cta-visual::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(150deg, rgba(255, 255, 255, 0.06) 0 3px, transparent 3px 80px); mix-blend-mode: soft-light; } /* ============================================================ 11 · FOOTER ============================================================ */ .footer { background: #211812; color: var(--cream); padding: 84px 40px 28px; } .footer-inner { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 2fr; gap: 60px; } .footer-lead { max-width: 320px; } .footer-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--cream); } .footer-brand .footer-mark { width: 30px; height: 30px; color: var(--orange-glow); } .footer-brand .wordmark { font-size: 26px; } .footer-tag { margin: 18px 0 24px; color: rgba(251, 243, 231, 0.62); font-size: 15px; line-height: 1.5; } .footer-social { display: flex; gap: 12px; } .footer-social a { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(251, 243, 231, 0.08); color: var(--cream); transition: background 0.25s var(--ease), transform 0.25s var(--ease); } .footer-social a:hover { background: var(--orange); transform: translateY(-2px); } .footer-social svg { width: 17px; height: 17px; } .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .footer-col { display: flex; flex-direction: column; gap: 13px; align-items: flex-start; } .footer-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(251, 243, 231, 0.5); margin-bottom: 4px; } .footer-col a:not(.btn) { font-size: 15px; color: rgba(251, 243, 231, 0.82); transition: color 0.2s var(--ease); } .footer-col a:not(.btn):hover { color: var(--cream); } .footer-cta-copy { font-size: 15px; color: rgba(251, 243, 231, 0.62); line-height: 1.5; margin-bottom: 4px; } .footer-col--cta .btn { background: var(--orange); color: #fff; } .footer-col--cta .btn:hover { background: var(--orange-deep); } .footer-bar { max-width: var(--wrap); margin: 64px auto 0; padding-top: 28px; border-top: 1px solid rgba(251, 243, 231, 0.12); display: flex; align-items: center; justify-content: space-between; gap: 18px; } .footer-copy { font-size: 13px; color: rgba(251, 243, 231, 0.5); } .footer-legal { display: flex; gap: 26px; } .footer-legal a { font-size: 13px; color: rgba(251, 243, 231, 0.55); } .footer-legal a:hover { color: var(--cream); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .nav { padding: 16px 20px; } .nav-links { display: none; } .hero { padding: 0 22px 8vh; } .frow--three { grid-template-columns: 1fr; } .fcell { border-right: none; } .fstage { border-bottom: 1px solid var(--hair); min-height: auto; padding: 44px 24px 48px; } .frow--three .fcell:last-child .fstage, .frow--three .fstage:last-child { border-bottom: none; } .fhead { padding: 66px 24px 58px; } .process-step { grid-template-columns: 60px 1fr; gap: 20px; padding: 32px 4px; } .proof-grid { grid-template-columns: 1fr; gap: 40px; padding: 48px 22px 10vh; } .proof-visual { position: static; } .proof-head { padding: 11vh 22px 0; } .sc-inner, .process { padding-left: 22px; padding-right: 22px; } .cards { grid-template-columns: 1fr; } .fit { grid-template-columns: 1fr; } .cta { grid-template-columns: 1fr; } .cta-copy { padding: 12vh 22px; max-width: none; } .cta-visual { min-height: 440px; } .cta-calendly { min-height: 1040px; } .cta-mock { padding: 40px 24px; } .leak-funnel { margin-top: 48px; } .lf-track { height: 180px; gap: 8px; } .footer { padding: 56px 22px 28px; } .footer-inner { grid-template-columns: 1fr; gap: 44px; } .footer-lead { max-width: none; } .footer-cols { gap: 32px; } .footer-bar { margin-top: 44px; flex-wrap: wrap; } } @media (max-width: 560px) { body { font-size: 16px; } .nav-cta { display: none; } .hero-actions .btn { width: 100%; text-align: center; } .sc-scale { grid-template-columns: 1fr 1fr; } .sc-fields { grid-template-columns: 1fr; } .sc-ranking .rk-name { width: 92px; font-size: 13px; } .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; } .footer-col--cta { grid-column: 1 / -1; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .reveal-lines .word { opacity: 1 !important; transform: none !important; transition: none !important; } .rings-arcs path { stroke-dashoffset: 0 !important; animation: none !important; } .rings-sun { opacity: 1 !important; animation: none !important; } .sc-result { animation: none !important; } .lf-bar { transition: none !important; } .reveal.in .lf-bar { height: var(--h); } .mock-card { transform: none !important; } } /* ============================================================ ABOUT PAGE (/about/) + solid nav for non-hero pages ============================================================ */ .nav--solid { background: rgba(251, 243, 231, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--hair); } .nav--solid .nav-brand { color: var(--ink); } .nav--solid .nav-links a { color: var(--ink); } .nav-links a[aria-current="page"] { opacity: 1; color: var(--orange-deep); } .about-hero { background: var(--cream); padding: 180px 40px 64px; } .about-inner { max-width: var(--wrap); margin: 0 auto; } .about-title { font-size: clamp(2.6rem, 6.4vw, 5.2rem); font-weight: 400; line-height: 1.02; } .about-lede { max-width: 42ch; margin: 30px 0 0; font-size: clamp(1.15rem, 1.9vw, 1.5rem); color: var(--body); } .about-note { background: var(--cream); padding: 56px 40px 120px; border-bottom: 1px solid var(--hair); } .about-note-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 360px 1fr; gap: 72px; align-items: start; } .about-portrait { margin: 0; position: sticky; top: 110px; } .about-portrait img { width: 100%; max-width: 360px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 22px; border: 1px solid var(--hair); box-shadow: 0 34px 80px rgba(28, 26, 23, 0.18); background: var(--card); display: block; } .about-portrait figcaption { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--body); } .about-note-body p { color: var(--body); font-size: 1.12rem; line-height: 1.7; max-width: 62ch; } .about-note-body p + p { margin-top: 22px; } .about-note-body p:first-of-type { color: var(--ink); font-size: clamp(1.3rem, 2vw, 1.6rem); font-family: var(--font-serif); line-height: 1.4; letter-spacing: -0.01em; } .about-sign { margin-top: 36px !important; display: flex; flex-direction: column; gap: 3px; } .about-sign-name { font-family: var(--font-serif); font-size: 1.6rem; color: var(--ink); } .about-sign-role { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); } .beliefs { background: var(--cream-2); border-top: 1px solid var(--hair); } .beliefs-inner { max-width: var(--wrap); margin: 0 auto; padding: 12vh 40px; } .beliefs-h { font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 500; margin-bottom: 48px; } .belief-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .belief { background: var(--cream); border: 1px solid var(--hair); border-radius: 20px; padding: 34px 34px 36px; position: relative; } .belief::before { content: ""; position: absolute; top: 34px; left: 0; width: 3px; height: 26px; background: linear-gradient(180deg, var(--orange), var(--amber)); border-radius: 0 3px 3px 0; } .belief h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 500; line-height: 1.16; } .belief p { margin-top: 14px; color: var(--body); } .about-cta { background: linear-gradient(150deg, #FBEFD7 0%, #F5D9A6 55%, #EFC078 100%); } .about-cta-inner { max-width: 820px; margin: 0 auto; padding: 14vh 40px; text-align: center; display: flex; flex-direction: column; align-items: center; } .about-cta .cta-mark { width: 52px; height: auto; color: var(--ink); margin-bottom: 22px; } .about-cta h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); font-weight: 400; line-height: 1.08; } .about-cta p { margin-top: 18px; color: rgba(28, 26, 23, 0.72); max-width: 48ch; } .about-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; } @media (max-width: 900px) { .about-hero { padding: 132px 22px 40px; } .about-note { padding: 40px 22px 80px; } .about-note-grid { grid-template-columns: 1fr; gap: 36px; } .about-portrait { position: static; } .about-portrait img { max-width: 280px; } .beliefs-inner { padding: 10vh 22px; } .belief-list { grid-template-columns: 1fr; } .about-cta-inner { padding: 12vh 22px; } }