/* ========================================================================= FORM FOLLOWS BRAND — landing page Built on the Adaptitude OS design system. Canonical tokens come from tokens.css (linked first in ). This file adds only what's specific to the landing page. ========================================================================= */ /* Archivo thin weights (100/200) for the hero headline — additive over the canonical import, which only ships 300–700. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@100;200&display=swap'); :root { /* surface aliases — short names used throughout this page, mapped to the canonical elevation tokens */ --bg-1:var(--bg-elev-1); --bg-2:var(--bg-elev-2); /* signature gradient (matches the book cover) — landing-only */ --grad:linear-gradient(105deg,#FF5E86 0%,var(--cerise) 38%,var(--brick) 100%); /* layout */ --gutter:clamp(24px,6vw,128px); --maxw:1280px; } /* accent-variant overrides set on */ body[data-accent="brick"]{ --accent:var(--brick); --grad:linear-gradient(105deg,#E8714F 0%,var(--brick) 55%,var(--brick-deep) 100%); } body[data-accent="cerise"]{ --accent:var(--cerise); --grad:linear-gradient(105deg,var(--cerise) 0%,var(--cerise) 100%); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:108px; } body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } ::selection{ background:rgb(237 64 107 / 0.30); } a{ color:inherit; text-decoration:none; } img{ display:block; max-width:100%; } /* ---------- shared type ---------- */ .eyebrow{ font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-muted); display:inline-flex; align-items:center; gap:var(--s-3); line-height:1.2; } .eyebrow .rule{ width:32px; height:1px; background:var(--border-strong); display:inline-block; } .eyebrow .hot{ color:var(--accent); } .display{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:-0.02em; line-height:0.86; color:var(--fg-strong); margin:0; } .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .lead{ font-size:clamp(18px,2vw,22px); line-height:1.45; color:var(--mist); font-weight:400; } .section-kicker{ font-family:var(--font-display); text-transform:uppercase; } .mono{ font-family:var(--font-mono); } /* ---------- layout ---------- */ .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); } section{ position:relative; } /* ---------- topbar ---------- */ .topbar{ position:fixed; top:0; left:0; right:0; z-index:50; height:88px; display:flex; align-items:center; justify-content:space-between; padding-inline:var(--gutter); background:rgb(24 25 27 / 0.72); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid transparent; transition:border-color .2s, background .2s; } .topbar.scrolled{ border-bottom-color:var(--border-subtle); background:rgb(24 25 27 / 0.86); } .brandmark{ font-family:var(--font-display); font-size:18px; letter-spacing:0.01em; text-transform:uppercase; color:var(--fg-strong); display:flex; align-items:center; gap:9px; } .brand-chip{ display:inline-flex; align-items:center; background:transparent; padding:0; transition:opacity .15s var(--ease-out); } .brand-chip:hover{ opacity:0.82; } .brand-chip img{ height:42px; width:auto; display:block; } .foot-chip img{ height:32px; } .brandmark .dot{ width:9px; height:9px; border-radius:999px; background:var(--grad); box-shadow:0 0 0 0 rgb(237 64 107 / 0.5); animation:pulse 1.4s var(--ease-out) infinite; } @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgb(237 64 107 / .45);} 70%{box-shadow:0 0 0 7px rgb(237 64 107 / 0);} 100%{box-shadow:0 0 0 0 rgb(237 64 107 / 0);} } .topnav{ display:flex; align-items:center; gap:var(--s-7); } .topnav a.navlink{ font-size:13px; color:var(--fg-muted); transition:color .12s; } .topnav a.navlink:hover{ color:var(--fg-strong); } @media(max-width:860px){ .topnav .navlink{ display:none; } } /* ---------- buttons ---------- */ .btn{ font-family:var(--font-sans); font-size:14px; font-weight:600; letter-spacing:0.01em; border:none; border-radius:2px; padding:0 var(--s-5); height:44px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .08s var(--ease-out), filter .15s, background .15s; } .btn:active{ transform:scale(0.98); } .btn-accent{ background:var(--accent); color:#fff; } .btn-accent:hover{ filter:brightness(1.08); } .btn-grad{ background:var(--grad); color:#fff; } .btn-grad:hover{ filter:brightness(1.06); } .btn-ghost{ background:transparent; color:var(--fg-strong); border:1px solid var(--border-strong); } .btn-ghost:hover{ background:var(--bg-1); border-color:var(--fg-muted); } .btn-sm{ height:38px; font-size:13px; padding:0 18px; } /* ---------- hero shared ---------- */ .hero{ padding-top:140px; padding-bottom:var(--s-10); } body[data-hero="a"] #hero-b{ display:none; } body[data-hero="b"] #hero-a{ display:none; } /* HERO A — split / cover-forward */ .hero-a-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(40px,6vw,96px); align-items:center; } .hero-a-head{ font-family:var(--font-sans); font-weight:200; text-transform:none; letter-spacing:-0.025em; line-height:0.98; font-size:clamp(44px,7vw,104px); color:var(--fg-strong); } .hero-a-head .grad{ font-weight:300; } .hero-a-head span{ display:block; } .hero-a .lead{ max-width:30em; margin-top:var(--s-6); } .hero-cover-stage{ position:relative; display:flex; justify-content:center; align-items:center; overflow:visible; isolation:isolate; } .hero-cover{ position:relative; z-index:2; width:min(100%,420px); aspect-ratio:861/1232; border-radius:3px; box-shadow:0 2px 1px rgb(0 0 0 /.4), 0 40px 80px -30px rgb(0 0 0 /.85), 0 0 0 1px rgb(255 255 255 /.04); transform:rotate(-2.5deg); transition:transform .4s var(--ease-out); } .hero-cover-stage:hover .hero-cover{ transform:rotate(0deg) translateY(-6px); } .hero-cover-glow{ position:absolute; inset:-22% -28%; filter:blur(110px); opacity:.62; z-index:1; pointer-events:none; background:radial-gradient(58% 56% at 52% 46%, #FF6E92 0%, var(--cerise) 30%, var(--brick) 58%, transparent 78%); } .hero-cover-glow::after{ content:""; position:absolute; inset:18% 10% 4%; filter:blur(60px); opacity:.7; background:radial-gradient(50% 50% at 50% 50%, var(--cerise) 0%, transparent 72%); } .cover-badge{ position:absolute; top:6%; right:-2%; background:var(--bg); border:1px solid var(--border-strong); border-radius:999px; padding:8px 16px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-strong); display:flex; align-items:center; gap:8px; transform:rotate(4deg); } .cover-badge .live{ width:7px; height:7px; border-radius:999px; background:var(--accent); animation:pulse 1.4s var(--ease-out) infinite; } /* HERO B — manifesto / mega type */ .hero-b{ padding-top:160px; } .hero-b-mega{ font-family:var(--font-sans); font-weight:200; text-transform:none; font-size:clamp(46px,9vw,132px); letter-spacing:-0.03em; line-height:0.96; color:var(--fg-strong); } .hero-b-mega .grad{ font-weight:300; } .hero-b-mega span{ display:block; } .hero-b-lower{ display:grid; grid-template-columns:1.4fr 0.6fr; gap:clamp(32px,5vw,80px); align-items:end; margin-top:var(--s-8); border-top:1px solid var(--border-subtle); padding-top:var(--s-7); } .hero-b-coverwrap{ display:flex; justify-content:flex-end; } .hero-b-cover{ width:min(100%,260px); aspect-ratio:861/1232; border-radius:3px; box-shadow:0 30px 60px -28px rgb(0 0 0 /.8), 0 0 0 1px rgb(255 255 255 /.05); } /* ---------- email capture ---------- */ .capture{ margin-top:var(--s-7); max-width:520px; } .capture-form{ display:flex; gap:10px; align-items:stretch; } .capture input[type=email]{ flex:1; height:52px; background:var(--bg-1); border:1px solid var(--border-subtle); border-radius:2px; color:var(--fg-strong); font-family:var(--font-sans); font-size:15px; padding:0 16px; transition:border-color .15s; min-width:0; } .capture input::placeholder{ color:var(--fg-subtle); } .capture input:focus{ outline:none; border-color:var(--accent); } .capture .btn{ height:52px; white-space:nowrap; } .capture-note{ margin-top:12px; font-size:12px; color:var(--fg-subtle); display:flex; align-items:center; gap:8px; } .capture.is-sent .capture-form{ display:none; } .capture-success{ display:none; align-items:center; gap:14px; background:var(--bg-1); border:1px solid var(--border-subtle); border-left:3px solid var(--accent); border-radius:2px; padding:18px 20px; } .capture.is-sent .capture-success{ display:flex; } .capture-success .check{ width:34px; height:34px; flex:none; border-radius:999px; background:var(--accent); display:grid; place-items:center; color:#fff; } .capture-success strong{ color:var(--fg-strong); font-weight:600; display:block; font-size:15px; } .capture-success span{ font-size:13px; color:var(--fg-muted); } @media(max-width:560px){ .capture-form{ flex-direction:column; } } /* ---------- section frame ---------- */ .band{ padding-block:clamp(72px,10vw,148px); } .band.alt{ background:var(--bg-1); border-block:1px solid var(--border-subtle); } .sec-eyebrow{ margin-bottom:var(--s-5); } .sec-head{ font-size:clamp(30px,4.4vw,58px); max-width:16ch; text-wrap:balance; } .sec-head.wide{ max-width:20ch; } /* ---------- thesis ---------- */ .thesis-grid{ display:grid; grid-template-columns:1.22fr 0.78fr; gap:clamp(36px,5vw,72px); align-items:start; } .thesis-main{ display:flex; flex-direction:column; gap:var(--s-6); } @media(max-width:900px){ .thesis-grid{ grid-template-columns:1fr; } } .thesis-statement{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:-0.015em; line-height:0.94; font-size:clamp(28px,3.8vw,52px); color:var(--fg-strong); max-width:none; white-space:nowrap; } .thesis-body{ max-width:34em; } .thesis-body p{ font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:var(--mist); margin:0 0 var(--s-5); } .thesis-body p strong{ color:var(--fg-strong); font-weight:600; } /* big-idea pull quote */ .idea-quote{ margin:0; padding-left:26px; border-left:2px solid var(--accent); align-self:center; } .idea-quote-mark{ font-family:var(--font-display); font-size:60px; line-height:0.5; display:block; margin-bottom:8px; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .idea-quote p{ font-family:var(--font-sans); font-weight:300; font-size:clamp(19px,1.6vw,25px); line-height:1.42; color:var(--fg-strong); margin:0 0 18px; text-wrap:pretty; } .idea-quote cite{ font-style:normal; display:flex; flex-direction:column; gap:3px; } .idea-quote cite b{ font-weight:600; color:var(--fg); font-size:15px; } .idea-quote cite span{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:600; } /* ---------- formats / non-fiction strip ---------- */ .formats{ background:var(--bg-1); border-block:1px solid var(--border-subtle); padding-block:clamp(28px,4vw,44px); } .formats-row{ display:flex; align-items:center; justify-content:space-between; gap:clamp(28px,5vw,64px); flex-wrap:wrap; } .formats-text{ font-family:var(--font-sans); font-weight:300; font-size:clamp(20px,2.2vw,28px); color:var(--fg-strong); margin:12px 0 0; letter-spacing:-0.01em; } .formats-list{ list-style:none; display:flex; gap:clamp(20px,3vw,44px); margin:0; padding:0; flex-wrap:wrap; } .fmt{ display:flex; align-items:center; gap:13px; } .fmt-ic{ width:42px; height:42px; flex:none; border:1px solid var(--border-subtle); border-radius:4px; display:grid; place-items:center; color:var(--accent); background:var(--bg); } .fmt-ic svg{ width:21px; height:21px; } .fmt-label{ font-weight:600; color:var(--fg-strong); font-size:17px; letter-spacing:0.01em; } @media(max-width:560px){ .formats-list{ gap:18px; } .fmt-label{ font-size:15px; } } /* forces */ .forces{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); border-radius:3px; overflow:hidden; margin-top:var(--s-9); } .force{ background:var(--bg); padding:clamp(28px,3vw,40px); } .band.alt .force{ background:var(--bg-1); } .force-num{ font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:.1em; } .force h3{ font-family:var(--font-display); text-transform:uppercase; font-weight:400; letter-spacing:-0.01em; font-size:clamp(24px,2.4vw,32px); margin:18px 0 12px; color:var(--fg-strong); line-height:1; text-wrap:balance; } .force p{ font-size:15px; line-height:1.55; color:var(--fg-muted); margin:0; } @media(max-width:820px){ .forces{ grid-template-columns:1fr; } } /* ---------- what you'll learn ---------- */ .learn-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); border-radius:3px; overflow:hidden; margin-top:var(--s-8); } .learn-card{ background:var(--bg-1); padding:clamp(28px,3vw,44px); display:flex; flex-direction:column; gap:14px; transition:background .18s; position:relative; } .learn-card:hover{ background:var(--bg-2); } .learn-tool{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); } .learn-card h3{ font-family:var(--font-display); text-transform:uppercase; font-weight:400; letter-spacing:-0.01em; font-size:clamp(23px,2.2vw,31px); line-height:0.98; color:var(--fg-strong); margin:0; text-wrap:balance; } .learn-card p{ font-size:15.5px; line-height:1.6; color:var(--fg-muted); margin:0; max-width:38ch; } .learn-idx{ position:absolute; top:clamp(20px,2.5vw,32px); right:clamp(20px,2.5vw,32px); font-family:var(--font-mono); font-size:12px; color:var(--fg-subtle); } @media(max-width:760px){ .learn-grid{ grid-template-columns:1fr; } } /* ---------- who it's for ---------- */ .audience{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); margin-top:var(--s-8); } .aud-card{ border:1px solid var(--border-subtle); border-radius:3px; padding:clamp(30px,3.4vw,48px); background:var(--bg); position:relative; overflow:hidden; } .aud-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); } .aud-role{ font-family:var(--font-display); text-transform:uppercase; font-weight:400; letter-spacing:-0.01em; font-size:clamp(26px,2.6vw,36px); color:var(--fg-strong); line-height:0.95; margin:0 0 6px; text-wrap:balance; } .aud-sub{ font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:22px; } .aud-card p{ color:var(--mist); font-size:16px; line-height:1.6; margin:0 0 var(--s-5); } .aud-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; } .aud-list li{ display:flex; gap:12px; font-size:15px; color:var(--fg); line-height:1.45; } .aud-list li .mk{ color:var(--accent); font-family:var(--font-mono); flex:none; } @media(max-width:760px){ .audience{ grid-template-columns:1fr; } } /* ---------- about author ---------- */ .author-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:center; } .author-photo-frame{ position:relative; border-radius:3px; overflow:hidden; border:1px solid var(--border-subtle); } .author-photo-frame img{ width:100%; aspect-ratio:1/1; object-fit:cover; filter:grayscale(0.35) contrast(1.02) brightness(0.94); } .author-photo-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgb(24 25 27 /.5)); pointer-events:none; } .author-name{ font-family:var(--font-display); text-transform:uppercase; font-weight:400; letter-spacing:-0.01em; font-size:clamp(34px,3.6vw,52px); color:var(--fg-strong); line-height:0.92; margin:0 0 6px; } .author-title{ font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:var(--s-6); } .author-grid p{ color:var(--mist); font-size:clamp(16px,1.5vw,18px); line-height:1.65; margin:0 0 var(--s-5); max-width:42ch; } .author-creds{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s-6); } .cred{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-muted); border:1px solid var(--border-subtle); border-radius:999px; padding:7px 14px; } @media(max-width:760px){ .author-grid{ grid-template-columns:1fr; } .author-photo-frame img{ aspect-ratio:4/3; } } /* ---------- final CTA ---------- */ .final{ text-align:center; padding-block:clamp(90px,12vw,180px); position:relative; overflow:hidden; } .final-glow{ position:absolute; left:50%; top:40%; width:84vw; max-width:980px; height:480px; transform:translate(-50%,-50%); background:var(--grad); filter:blur(120px); opacity:.34; z-index:0; border-radius:50%; } .final .inner{ position:relative; z-index:1; } .final h2{ font-size:clamp(34px,5vw,76px); max-width:16ch; margin:0 auto var(--s-6); } .final .lead{ max-width:32em; margin:0 auto var(--s-7); } .final .capture{ margin-inline:auto; } .final .capture-form input{ background:var(--bg-2); } .final .capture-note{ justify-content:center; } /* ---------- footer ---------- */ .foot{ border-top:1px solid var(--border-subtle); padding-block:var(--s-7); } .foot-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .foot .brandmark{ font-size:15px; } .foot small{ color:var(--fg-subtle); font-size:12px; } .foot .by{ font-size:12px; color:var(--fg-muted); display:flex; align-items:center; gap:8px; } .foot .by img{ height:13px; width:auto; opacity:.8; } /* ---------- scroll reveal ---------- */ .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); } .reveal.is-in{ opacity:1; transform:none; } .reveal.d1{ transition-delay:.06s; } .reveal.d2{ transition-delay:.12s; } .reveal.d3{ transition-delay:.18s; } .reveal.d4{ transition-delay:.24s; } @media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{scroll-behavior:auto;} } @media(max-width:900px){ .hero-a-grid{ grid-template-columns:1fr; } .hero-cover-stage{ order:-1; } .hero-cover{ width:min(72%,320px); } .hero-b-lower{ grid-template-columns:1fr; } .hero-b-coverwrap{ justify-content:flex-start; } }