/* ============================================================= Testimony Adegoke — Cinematic Scroll Landing Brand: White · Deep Teal (#065758) · Muted Coral (#C46960) Dependency-free. Base layout = readable static page (mobile / reduced-motion / no-JS). `body.motion` upgrades it into the pinned, scroll-scrubbed cinematic experience. ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Anton&family=Sacramento&display=swap'); :root { --teal: #065758; --teal-deep: #06403f; --coral: #c46960; --coral-deep: #a34a48; --bg-dark: #06100f; --bg-light: #f3f1ec; --ink: #f5f3ee; /* JS-driven: adapts light↔dark */ --ink-soft: rgba(245,243,238,.66); --line: rgba(245,243,238,.14); --accent: #c46960; --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --sig: 'Sacramento', 'Segoe Script', cursive; --logo-face: 'Anton', 'Oswald', 'Arial Narrow', Impact, sans-serif; /* Logo lockup — variant 1 (primary): maroon wordmark, white script. On dark surfaces this flips to variant 4: cream wordmark, maroon script. */ --logo-maroon: #8b3a3e; --logo-cream: #f4f2ed; --logo-word: var(--logo-maroon); --logo-script: #ffffff; --ease: cubic-bezier(.22,.61,.36,1); } * { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x lives on (the root scroller) so window scroll still drives progress. Putting it on makes the body a scroll container and decouples it from window.scrollY. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: var(--font); background: var(--bg-light); color: var(--teal); line-height: 1.5; min-height: 100svh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* height:auto so the width/height attributes (kept for CLS) act as a ratio hint instead of a fixed pixel height — otherwise they override `aspect-ratio` and stretch the image. */ img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--coral); color: #fff; } .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; } :focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; } /* ---------- Chrome: nav, progress, loader ------------------ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: clamp(14px, 2.2vw, 26px) clamp(18px, 4vw, 46px); pointer-events: none; } .nav > * { pointer-events: auto; } /* Logo lockup: heavy condensed "TESTIMONY" with the "Adegoke" script laid across it. Built in type so it stays crisp at any size and can recolor per surface. Scale the whole mark with font-size on .logo. */ .brand { display: inline-block; line-height: 1; white-space: nowrap; transition: color .6s var(--ease); } .logo { position: relative; display: inline-block; line-height: 1; font-size: clamp(20px, 2.3vw, 28px); /* master scale for the lockup */ } .logo-word { display: block; font-family: var(--logo-face); font-weight: 400; font-size: 1em; letter-spacing: .012em; color: var(--logo-word); transition: color .6s var(--ease); } .logo-script { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--sig); font-size: 1.05em; /* ≈74% of the wordmark width, as in the artwork */ line-height: 1; color: var(--logo-script); transform: translateY(6%); /* crosses the caps mid-height, tails below */ pointer-events: none; transition: color .6s var(--ease); } /* Variant 4 (cream wordmark / maroon script) on dark surfaces. The landing page starts dark, so it defaults to variant 4; the scroll engine then interpolates these two tokens on as the world turns to light, landing on variant 1. The loader and footer stay dark always. */ body:not(.page), .loader, .site-footer { --logo-word: var(--logo-cream); --logo-script: var(--logo-maroon); } /* Static landing (mobile / reduced-motion / no-JS): the nav is fixed and its cream mark would vanish over the light sections below the hero, so give it a backdrop. In motion mode the engine recolors the mark instead. */ body:not(.page):not(.motion) .nav { background: rgba(6, 16, 15, .72); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); } .brand small { display: block; font-family: var(--font); font-size: 9px; letter-spacing: .42em; text-transform: uppercase; color: var(--ink-soft); margin-top: 7px; /* clears the script's descenders */ padding-left: 3px; transition: color .6s var(--ease); } .nav-cta { font-size: 13px; font-weight: 600; letter-spacing: .01em; padding: 10px 20px; border-radius: 999px; color: var(--ink); border: 1px solid var(--line); background: rgba(255,255,255,.04); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .3s var(--ease), background .4s var(--ease), color .5s var(--ease), border-color .5s var(--ease); } .nav-cta:hover { transform: translateY(-2px); background: var(--coral); color: #fff; border-color: var(--coral); } .progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--teal), var(--coral)); z-index: 50; display: none; } .loader { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-dark); gap: 26px; transition: opacity .9s var(--ease), visibility .9s; } .loader.gone { opacity: 0; visibility: hidden; } .loader .brand { font-size: clamp(38px, 7vw, 64px); } .loader-track { width: min(240px, 60vw); height: 2px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; } .loader-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--teal), var(--coral)); transition: width .3s linear; } .loader-pct { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(245,243,238,.55); } /* ---------- Stage (canvas / poster) ------------------------ */ #scroll { position: relative; } .stage { position: relative; width: 100%; height: 100svh; overflow: hidden; background: var(--bg-dark); } .stage-bg, .veil { display: none; } .stage canvas { display: none; } .stage .poster { width: 100%; height: 100%; object-fit: cover; } .stage .poster-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,16,15,.55) 0%, rgba(6,16,15,.15) 40%, rgba(6,16,15,.75) 100%); } .stage-lead { position: absolute; inset: auto 0 0 0; padding: 0 6vw 12vh; text-align: center; color: #fff; } .stage-lead .kicker { color: #fff; } .stage-lead h2 { font-family: var(--sig); font-weight: 400; font-size: clamp(38px, 7vw, 84px); line-height: 1; max-width: 100%; } .stage-lead p { color: rgba(255,255,255,.8); margin-top: 10px; font-size: 15px; letter-spacing: .04em; max-width: 34ch; margin-left: auto; margin-right: auto; } /* ---------- Beats (content) -------------------------------- */ #beats { position: relative; z-index: 5; } .beat { position: relative; min-height: auto; padding: clamp(70px, 12vh, 150px) clamp(22px, 6vw, 90px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .kicker { font-size: 12px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .display { font-weight: 800; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(34px, 6.4vw, 88px); max-width: 15ch; color: var(--ink); } .display.smaller { font-size: clamp(30px, 5vw, 66px); max-width: 18ch; } .lead-sub { margin-top: 22px; font-size: clamp(15px, 1.6vw, 19px); color: var(--ink-soft); max-width: 46ch; letter-spacing: .01em; } .wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; } .btn { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: .01em; padding: 15px 30px; border-radius: 999px; margin-top: 30px; background: var(--coral); color: #fff; box-shadow: 0 16px 40px -14px rgba(196,105,96,.7); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } .btn:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -14px rgba(196,105,96,.85); background: var(--coral-deep); } .btn .arrow { transition: transform .3s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; } .btn-ghost:hover { background: rgba(255,255,255,.06); transform: translateY(-3px); } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } /* ---------- Trust stripe ----------------------------------- */ .trust-logos { display: flex; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; justify-content: center; margin-top: 40px; } .trust-card { display: flex; align-items: center; gap: 16px; padding: 22px 30px; border-radius: 18px; min-width: 240px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 20px 50px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .4s var(--ease), border-color .4s var(--ease); } .trust-card:hover { transform: translateY(-4px); border-color: rgba(196,105,96,.6); } .trust-glyph { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(140deg, rgba(6,87,88,.5), rgba(196,105,96,.35)); border: 1px solid rgba(255,255,255,.18); color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -.02em; } .trust-glyph svg { width: 24px; height: 24px; } .trust-name { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; } .trust-role { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; } /* ---------- Reveal name + Cards ---------------------------- */ .name-block { text-align: center; } .name-block .kicker { margin-bottom: 12px; } .name-block h2 { font-weight: 800; letter-spacing: -.03em; line-height: 1; font-size: clamp(40px, 7vw, 96px); color: var(--ink); } .name-block .titles { margin-top: 16px; font-size: clamp(13px, 1.4vw, 16px); letter-spacing: .06em; color: var(--ink-soft); } .cards-beat { display: block; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; max-width: 1100px; margin: 40px auto 0; } .card { padding: 24px 26px; border-radius: 22px; text-align: left; background: linear-gradient(158deg, rgba(255,255,255,.78), rgba(255,255,255,.54)); border: 1px solid rgba(6,87,88,.18); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 30px 64px -28px rgba(6,64,63,.42), 0 6px 18px -8px rgba(6,64,63,.16), inset 0 1px 0 rgba(255,255,255,.85); color: var(--teal); } .card h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--teal-deep); display: flex; align-items: center; gap: 10px; } .card h3 .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex: none; } .card p { font-size: 14.5px; line-height: 1.55; color: rgba(6,64,63,.78); margin-top: 12px; } .card .card-kicker { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--coral); font-weight: 600; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .chip { font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: rgba(6,87,88,.08); color: var(--teal); border: 1px solid rgba(6,87,88,.12); } .stat-rows { margin-top: 14px; display: grid; gap: 12px; } .stat-row { display: flex; align-items: baseline; gap: 12px; } .stat-num { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--teal-deep); line-height: 1; min-width: 84px; } .stat-lbl { font-size: 12.5px; color: rgba(6,64,63,.72); } .card-cta { background: linear-gradient(150deg, rgba(6,87,88,.92), rgba(6,64,63,.96)); border-color: rgba(255,255,255,.14); } .card-cta h3 { color: #fff; } .card-cta p { color: rgba(255,255,255,.78); } .card-cta .btn { margin-top: 18px; } /* ---------- Footer ----------------------------------------- */ .foot { position: relative; z-index: 5; padding: 60px clamp(22px,6vw,90px) 46px; text-align: center; color: var(--teal); } .foot .brand { color: var(--accent); margin-bottom: 14px; } .foot-links { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin: 18px 0; font-size: 13px; letter-spacing: .04em; } .foot-links a { color: rgba(6,64,63,.7); transition: color .3s var(--ease); } .foot-links a:hover { color: var(--coral); } .foot small { font-size: 12px; color: rgba(6,64,63,.5); } /* ---------- Scroll hint ------------------------------------ */ .scroll-hint { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 30; display: none; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; transition: opacity .6s var(--ease); } .scroll-hint .mouse { width: 22px; height: 34px; border: 1.5px solid currentColor; border-radius: 12px; position: relative; } .scroll-hint .mouse::after { content:''; position:absolute; top:6px; left:50%; width:3px; height:6px; border-radius:2px; background: currentColor; transform: translateX(-50%); animation: wheel 1.6s var(--ease) infinite; } @keyframes wheel { 0%{opacity:0; transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0; transform:translate(-50%,10px)} } /* Cursor spotlight (desktop cards act) */ .spotlight { position: fixed; inset: 0; z-index: 4; pointer-events: none; display: none; opacity: 0; background: radial-gradient(340px 340px at var(--mx,50%) var(--my,50%), rgba(6,87,88,.10), transparent 70%); transition: opacity .6s var(--ease); } /* ============================================================= MOTION MODE — pinned cinematic upgrade ============================================================= */ body.motion .progress { display: block; } body.motion .loader { display: flex; } body.motion .scroll-hint { display: flex; } body.motion #scroll { height: 780svh; } body.motion .stage { position: fixed; inset: 0; height: 100svh; } body.motion .stage-bg { display: block; position: absolute; inset: 0; z-index: 0; background: var(--bg-dark); } body.motion .stage canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } body.motion .stage .poster, body.motion .stage .poster-scrim, body.motion .stage-lead { display: none; } body.motion .veil { display: block; position: absolute; inset: 0; z-index: 2; background: var(--bg-dark); opacity: 0; } body.motion #beats { position: fixed; inset: 0; z-index: 5; pointer-events: none; } body.motion #beats a, body.motion #beats button { pointer-events: auto; } body.motion .beat { position: absolute; inset: 0; padding: clamp(24px,7vh,90px) clamp(22px,6vw,90px); opacity: 0; will-change: opacity, transform; background: none; } body.motion .poster-inline { display: none; } /* Adaptive scrim: darkens behind text over dark video scenes, fades to nothing as the world turns to light. Keeps the footage visible. */ body.motion .beat::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 78% 62% at 50% 48%, var(--scrim, transparent), transparent 72%); } /* beat alignment variants (motion) */ body.motion .beat.align-top { justify-content: flex-start; padding-top: 15vh; } body.motion .beat.align-bottom { justify-content: flex-end; padding-bottom: 12vh; } /* Reveal caption: a light cinematic caption over the emerging figure */ body.motion .beat.reveal-intro .display { color: #fff; } body.motion .beat.reveal-intro::before { background: radial-gradient(ellipse 72% 55% at 50% 40%, rgba(5,12,11,.62), transparent 70%); } /* Cards: absolutely framed around the man */ body.motion .cards-beat { padding: 0; opacity: 1; } body.motion .cards-grid { display: contents; } body.motion .card { position: absolute; width: min(340px, 30vw); margin: 0; opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .8s var(--ease), transform .8s var(--ease); } body.motion .card.in { opacity: 1; transform: translateY(0) scale(1); } body.cap .card { transition: none !important; } body.motion .card.pos-tl { top: 13vh; left: 3.5vw; } body.motion .card.pos-tr { top: 13vh; right: 3.5vw; } body.motion .card.pos-bl { bottom: 6vh; left: 3.5vw; } body.motion .card.pos-br { bottom: 6vh; right: 3.5vw; } body.motion .cards-beat::before { content: none; } body.motion .card.pos-bc { bottom: 4.5vh; left: 50%; width: min(560px, 48vw); transform: translate(-50%, 26px) scale(.98); } body.motion .card.pos-bc.in { transform: translate(-50%, 0) scale(1); } /* Nameplate — the reveal payoff, a lower-third focal card */ .nameplate { text-align: center; padding: 22px 30px 26px; } .nameplate .card-kicker { display: block; color: var(--coral); letter-spacing: .28em; } .nameplate h2 { font-weight: 800; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(28px, 3vw, 44px); color: var(--teal-deep); margin-top: 8px; } .nameplate .titles { margin-top: 10px; font-size: 13px; letter-spacing: .04em; color: rgba(6,64,63,.78); } .nameplate .btn { margin-top: 18px; } body.motion .nameplate { background: linear-gradient(158deg, rgba(255,255,255,.82), rgba(255,255,255,.64)); box-shadow: 0 36px 80px -30px rgba(6,64,63,.45), inset 0 1px 0 rgba(255,255,255,.85); } body.motion .foot { display: none; } body.motion .spotlight { display: block; } /* larger screens: give cards a touch more room */ @media (min-width: 1500px) { body.motion .card { width: min(360px, 24vw); } } /* ============================================================= BASE / STATIC polish (mobile · reduced-motion · no-JS) ============================================================= */ /* alternating soft section tints so the static flow reads as chapters. Scoped to :not(.motion) — in the cinematic build the canvas is the background and beats stay transparent. */ body:not(.motion) .beat.tone-dark { background: var(--bg-dark); } body:not(.motion) .beat.tone-dark .display, body:not(.motion) .beat.tone-dark .kicker + * { color: #fff; } body:not(.motion) .beat.tone-dark .lead-sub { color: rgba(245,243,238,.7); } body:not(.motion) .beat.tone-dark .kicker { color: var(--coral); } body:not(.motion) .beat.trust-beat { background: linear-gradient(160deg, #06100f, #0a1e1c); } body:not(.motion) .beat.trust-beat .display, body:not(.motion) .beat.trust-beat .trust-name { color: #fff; } body:not(.motion) .beat.trust-beat .trust-role, body:not(.motion) .beat.trust-beat .lead-sub { color: rgba(245,243,238,.66); } body:not(.motion) .beat.reveal-intro { background: #0b1a19; } body:not(.motion) .beat.reveal-intro .display { color: #fff; } /* journey lines: white on the dark world in the cinematic build; deep teal on the light static page. */ body:not(.motion) .beat.j-beat .display { color: var(--teal-deep); } .beat.cards-beat { color: var(--teal); } /* base: give the poster a name overlay so mobile hero feels intentional */ @media (max-width: 767px) { .stage { height: 78svh; } .nav { padding: 11px 16px; } /* the condensed lockup fits on a phone, so it stays whole */ .nav .logo { font-size: 17px; } .brand small { display: none; } .nav-cta { padding: 8px 14px; font-size: 12px; } .stage-lead { padding: 0 18px 9vh; } .stage-lead h2 { font-size: clamp(26px, 7.4vw, 40px); } .stage-lead p { font-size: 12.5px; } .display { font-size: clamp(29px, 8.4vw, 46px); } .display.smaller { font-size: clamp(26px, 7.6vw, 42px); } .beat { padding: 64px 20px; } .kicker { font-size: 11px; letter-spacing: .26em; } .trust-card { min-width: 0; width: 100%; } .card { padding: 22px; } } /* ============================================================= Reduced motion — content arrives instantly, never hidden ============================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .beat, .card, .trust-card, .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .scroll-hint .mouse::after { animation: none; } }