/* ============================================================ The LongVol Report — rebuild Every colour in this file is a token. The live scheme is "Petrol & Gold" (work/palettes.css holds the alternates; swap with apply_palette.py), so changing scheme means changing the block below, never a rule. Two accents, split by job so the page is not one hue throughout: --acc gold — money, action, emphasis --acc-alt teal — labels, meta, data ============================================================ */ :root{ /* -- ground ------------------------------------------------ */ --ink: #07141A; /* page ground */ --ink-rgb: 7,20,26; /* same, for scrims */ --ink-0: #040D12; /* footer, deepest */ --ink-2: #0B1E27; /* raised panel */ --ink-3: #133039; /* hairline on dark */ --ink-hover: #0F2731; /* row hover */ /* -- brand (the saturated mid-dark) ------------------------ */ --brand: #0E3A47; --brand-2: #0A2C37; --brand-3: #061C24; --brand-4: #0C3140; --brand-deep: #08222C; --brand-panel: #0F3542; --brand-slate: #15303A; --brand-slate-2:#08171E; --brand-line: #1E6B7E; --line-2: #244855; /* -- accent: money + action, nothing else ------------------ */ --acc: #E8B23A; --acc-hi: #F5C518; --acc-ink: #8A6714; /* the accent, legible on paper */ --acc-alt: #35C4BC; /* labels, meta, data */ --on-acc: #14100A; /* type sitting on the accent */ /* -- paper -------------------------------------------------- */ --paper: #F7F5F0; --paper-2: #EFEBE2; --paper-line: #DCD6CA; /* -- type --------------------------------------------------- */ --text: #E6EFF2; --text-hi: #F1F7F9; --text-q: #D8E5EA; --text-src: #C2D5DC; --text-2: #BFD2D9; --text-3: #AFC7D0; --text-mut: #8DA5AF; --text-dim2:#7F949D; --text-ph: #667C85; --text-dim: #5F757E; --text-dk: #161D20; --text-dkm: #536166; --text-dk2: #2C3639; --text-dk3: #455257; --serif: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --wrap: 1180px; --r: 4px; /* tight radius — this is a research product, not an app */ --ease: cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--ink); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; display:block; } a{ color:inherit; } h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.08; } p{ margin:0 0 1em; } .wrap{ width:min(var(--wrap), calc(100% - 48px)); margin-inline:auto; } .sr,.skip{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .skip:focus{ position:fixed; top:10px; left:10px; width:auto; height:auto; clip:auto; z-index:200; background:var(--acc); color:var(--on-acc); padding:10px 16px; border-radius:var(--r); } /* ---------- reveal ---------- Content is visible by DEFAULT. It is only hidden under .js, which the inline script sets, so a page whose JavaScript never arrives still reads as a finished site instead of an empty dark page. */ .js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } } /* ---------- type helpers ---------- */ .kicker{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--acc-alt); margin:0 0 14px; } .eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--acc-alt); margin:0 0 22px; } .sechead{ max-width:720px; margin:0 0 54px; } .sechead h2{ font-family:var(--serif); font-size:clamp(30px,4vw,46px); font-weight:500; } .sechead__sub{ margin-top:18px; color:var(--text-mut); font-size:17px; max-width:60ch; } .sechead--row{ max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:-.01em; padding:14px 26px; border-radius:var(--r); border:1px solid transparent; text-decoration:none; cursor:pointer; white-space:nowrap; transition:transform .18s var(--ease), background .2s, color .2s, border-color .2s; } .btn:active{ transform:translateY(1px); } .btn--gold{ background:var(--acc); color:var(--on-acc); } .btn--gold:hover{ background:var(--acc-hi); } .btn--ghost{ background:transparent; color:var(--text); border-color:var(--line-2); } .btn--ghost:hover{ border-color:var(--acc); color:var(--acc); } .btn--sm{ padding:10px 18px; font-size:14px; } .lnk-quiet{ color:var(--text-mut); text-decoration:none; font-size:14px; } .lnk-quiet:hover{ color:var(--text); } .lnk-arrow{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-size:15px; font-weight:500; color:var(--acc); white-space:nowrap; } .lnk-arrow::after{ content:"→"; transition:transform .22s var(--ease); } .lnk-arrow:hover::after{ transform:translateX(5px); } /* ============================================================ NAV */ .nav{ position:fixed; inset:0 0 auto 0; z-index:100; height:66px; background:rgba(var(--ink-rgb),0); border-bottom:1px solid transparent; transition:background .3s, border-color .3s, backdrop-filter .3s; } .nav.is-stuck{ background:rgba(var(--ink-rgb),.86); backdrop-filter:blur(14px); border-bottom-color:var(--ink-3); } .nav__in{ width:min(var(--wrap), calc(100% - 48px)); margin-inline:auto; height:100%; display:flex; align-items:center; gap:34px; } .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; } .brand__mark{ width:26px; height:26px; color:var(--acc); } .brand__mark svg{ width:100%; height:100%; } .brand__type{ font-size:17px; letter-spacing:-.02em; } .brand__type b{ font-weight:700; } .brand__type i{ font-style:normal; font-weight:400; color:var(--text-mut); margin-left:5px; } .nav__links{ display:flex; gap:26px; margin-left:auto; } .nav__links a{ text-decoration:none; font-size:14.5px; color:var(--text-mut); transition:color .2s; } .nav__links a:hover{ color:var(--text); } .nav__cta{ display:flex; align-items:center; gap:18px; flex:none; } .nav__burger{ display:none; } /* ============================================================ HERO */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:120px 0 90px; overflow:hidden; } .hero__viz{ position:absolute; inset:0; z-index:0; } .hero__viz svg{ width:100%; height:100%; opacity:1; } .viz__grid line{ opacity:.55; } /* The curve must survive the scrim — it IS the subject. So the darkening is weighted to the left, under the type, and lets the right-hand half breathe. */ .hero__vig{ position:absolute; inset:0; background: linear-gradient(100deg, rgba(var(--ink-rgb),.97) 0%, rgba(var(--ink-rgb),.92) 32%, rgba(var(--ink-rgb),.55) 60%, rgba(var(--ink-rgb),.18) 100%), linear-gradient(to bottom, rgba(var(--ink-rgb),.85) 0%, rgba(var(--ink-rgb),.10) 34%, rgba(var(--ink-rgb),.55) 82%, var(--ink) 100%); } .hero__in{ position:relative; z-index:1; width:min(var(--wrap), calc(100% - 48px)); margin-inline:auto; } .hero h1{ font-family:var(--serif); font-weight:500; /* 20ch, not 15: the headline is longer than the one this scale was set for, and at 15ch the italic second line wrapped to four total lines and pushed the signup below the fold. */ font-size:clamp(40px,6.1vw,76px); line-height:1.04; letter-spacing:-.03em; max-width:20ch; margin-bottom:26px; text-wrap:balance; /* otherwise line 1 leaves "noise." alone on its own line */ } .hero h1 em{ font-style:italic; color:var(--acc); } .hero__sub{ max-width:56ch; color:var(--text-2); font-size:clamp(17px,1.5vw,19.5px); margin-bottom:36px; } .sub{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; max-width:560px; position:relative; } .sub input{ flex:1 1 260px; min-width:0; padding:15px 18px; font-family:var(--sans); font-size:16px; color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--line-2); border-radius:var(--r); transition:border-color .2s, background .2s; } .sub input::placeholder{ color:var(--text-ph); } .sub input:focus{ outline:none; border-color:var(--acc); background:rgba(255,255,255,.08); } .sub__note{ flex:1 0 100%; margin:12px 0 0; font-size:13.5px; color:var(--text-mut); } .sub.is-ok .sub__note{ color:var(--acc); } .sub--wide{ max-width:620px; margin-inline:auto; justify-content:center; } .trust{ display:flex; gap:44px; flex-wrap:wrap; list-style:none; padding:0; margin:56px 0 0; } .trust li{ display:flex; flex-direction:column; gap:2px; } .trust .num{ font-family:var(--mono); font-size:30px; font-weight:700; color:var(--text); letter-spacing:-.02em; } .trust span{ font-size:13px; color:var(--text-mut); letter-spacing:.02em; } .trust__press{ padding-left:44px; border-left:1px solid var(--ink-3); justify-content:center; } .trust__press span{ font-size:11px; font-family:var(--mono); letter-spacing:.16em; text-transform:uppercase; margin-bottom:4px; } .trust__press b{ font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:.04em; color:var(--text-2); } .hero__scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:1; width:22px; height:36px; border:1px solid var(--line-2); border-radius:12px; display:grid; place-items:start center; padding-top:7px; } .hero__scroll span{ width:3px; height:7px; border-radius:2px; background:var(--acc); animation:sc 1.9s var(--ease) infinite; } @keyframes sc{ 0%,100%{ transform:translateY(0); opacity:1 } 55%{ transform:translateY(10px); opacity:.1 } } /* ============================================================ PRESS */ .press{ background:var(--ink-2); border-block:1px solid var(--ink-3); padding:92px 0; } .press__q{ margin:0 0 26px; max-width:900px; } .press__q p{ font-family:var(--serif); font-size:clamp(28px,4.2vw,50px); font-weight:400; font-style:italic; line-height:1.16; letter-spacing:-.02em; margin:0 0 24px; color:var(--text-hi); } .press__q .hl{ color:var(--acc); font-style:normal; font-weight:500; } .press__q footer{ display:flex; flex-direction:column; gap:3px; } .press__who{ font-weight:600; font-size:15px; } .press__where{ font-size:14px; color:var(--text-mut); } .press__where b{ color:var(--text-2); letter-spacing:.03em; } .press__ctx{ max-width:62ch; color:var(--text-mut); border-left:2px solid var(--acc); padding-left:20px; } .press__wall{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:56px; background:var(--ink-3); border:1px solid var(--ink-3); border-radius:var(--r); overflow:hidden; } .pw{ background:var(--ink); padding:28px 26px 30px; transition:background .3s; } .pw:hover{ background:var(--ink-hover); } .pw__src{ display:block; font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-src); margin-bottom:5px; } .pw time{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--text-dim); margin-bottom:16px; } .pw p{ margin:0; font-size:14.5px; line-height:1.62; color:var(--text-mut); } .pw p b{ color:var(--acc); font-weight:500; } .press__note{ margin:30px 0 0; font-size:14.5px; color:var(--text-dim); max-width:70ch; } .press__note em{ color:var(--text-mut); font-family:var(--serif); font-size:16px; } /* ============================================================ WHAT YOU GET */ .letter{ padding:104px 0; } .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink-3); border:1px solid var(--ink-3); border-radius:var(--r); overflow:hidden; } .card{ background:var(--ink); padding:34px 28px 38px; transition:background .3s; } .card:hover{ background:var(--ink-2); } .card__n{ font-family:var(--mono); font-size:12px; color:var(--acc-alt); letter-spacing:.1em; } .card h3{ font-size:20px; margin:16px 0 12px; letter-spacing:-.02em; } .card p{ margin:0; font-size:15px; color:var(--text-mut); line-height:1.62; } /* ============================================================ DAN */ .dan{ background:var(--paper); color:var(--text-dk); padding:104px 0; } .dan__in{ display:grid; grid-template-columns:390px 1fr; gap:72px; align-items:start; } .dan__media{ position:sticky; top:104px; } .dan__media img{ width:100%; border-radius:var(--r); background:var(--paper-2); } .dan__media figcaption{ margin-top:20px; padding-top:20px; border-top:1px solid var(--paper-line); display:flex; flex-direction:column; gap:7px; } .dan__media figcaption b{ font-size:16px; } .dan__media figcaption span{ font-size:13.5px; color:var(--text-dkm); line-height:1.55; } .dan .kicker{ color:var(--acc-ink); } .dan h2{ font-family:var(--serif); font-size:clamp(30px,3.8vw,46px); font-weight:500; margin-bottom:26px; } .dan .lede{ font-size:19px; line-height:1.6; } .dan p{ color:var(--text-dk2); max-width:62ch; } .tenets{ list-style:none; counter-reset:t; padding:0; margin:44px 0 0; } .tenets li{ counter-increment:t; padding:26px 0 26px 62px; border-top:1px solid var(--paper-line); position:relative; } .tenets li::before{ content:counter(t,decimal-leading-zero); position:absolute; left:0; top:28px; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--acc-ink); letter-spacing:.08em; } .tenets h3{ font-size:19px; margin-bottom:8px; letter-spacing:-.02em; } .tenets p{ margin:0; font-size:15.5px; color:var(--text-dk3); } .sig{ margin-top:44px; font-family:var(--serif); font-style:italic; font-size:18px; color:var(--text-dk2); } .sig b{ font-style:normal; font-weight:600; } /* ============================================================ INCOME */ .income{ background:var(--brand); padding:96px 0; background-image:linear-gradient(150deg, var(--brand) 0%, var(--brand-2) 62%, var(--brand-3) 100%); } .income__in{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; } .income h2{ font-family:var(--serif); font-size:clamp(28px,3.4vw,42px); font-weight:500; margin-bottom:22px; } .income__copy p{ color:var(--text-3); max-width:52ch; } .income__why{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); overflow:hidden; } .income__why li{ background:var(--brand-panel); padding:22px 26px; font-size:15.5px; color:var(--text-3); line-height:1.6; } .income__why b{ color:var(--text-hi); font-weight:600; } /* ============================================================ LETTERS */ .letters{ padding:104px 0; } .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .post{ text-decoration:none; display:flex; flex-direction:column; } .post__art{ aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; margin-bottom:18px; background:var(--ink-2); border:1px solid var(--ink-3); display:grid; place-items:center; position:relative; transition:border-color .3s; } .post__art img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .post:hover .post__art{ border-color:var(--line-2); } .post:hover .post__art img{ transform:scale(1.04); } /* designed fallbacks — the live site leaves these cells blank */ .post__art--tickers{ background:linear-gradient(140deg,var(--brand),var(--brand-deep)); gap:10px; flex-direction:column; } .post__art--tickers .tk{ font-family:var(--mono); font-weight:700; font-size:clamp(15px,2.1vw,22px); color:var(--acc-alt); letter-spacing:.02em; line-height:1.35; } .post__art--pod{ background:linear-gradient(140deg,var(--brand-slate),var(--brand-slate-2)); color:var(--acc); } .post__art--pod svg{ width:46px; height:46px; } .post__tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc-alt); margin-bottom:8px; } .post__tag--lite{ color:var(--acc); } .post__tag--free{ color:var(--text-dim2); } .post time{ font-family:var(--mono); font-size:12px; color:var(--text-mut); margin-bottom:9px; } .post h3{ font-size:19px; line-height:1.28; margin-bottom:9px; transition:color .2s; } .post:hover h3{ color:var(--acc); } .post__iss{ display:block; font-size:13px; font-weight:400; color:var(--text-mut); margin-top:4px; font-family:var(--mono); letter-spacing:.04em; } .post p{ margin:0; font-size:14.5px; color:var(--text-mut); line-height:1.6; } /* ============================================================ READERS */ .readers{ background:var(--ink-2); border-block:1px solid var(--ink-3); padding:104px 0; } .quotes{ columns:3; column-gap:30px; } .q{ break-inside:avoid; margin:0 0 30px; padding:30px 28px; background:var(--ink); border:1px solid var(--ink-3); border-radius:var(--r); } .q blockquote{ margin:0 0 20px; font-family:var(--serif); font-size:17px; line-height:1.56; color:var(--text-q); font-weight:400; } .q blockquote::before{ content:"“"; color:var(--acc); font-size:30px; line-height:0; vertical-align:-6px; margin-right:3px; } .q figcaption{ display:flex; flex-direction:column; gap:2px; padding-top:16px; border-top:1px solid var(--ink-3); } .q figcaption b{ font-size:14.5px; font-weight:600; } .q figcaption span{ font-size:13px; color:var(--text-mut); } /* ============================================================ PRICING */ /* ── Feature showcase, directly under the plans ───────────────────────────── The product shots arrive at four different aspect ratios (3:2, 1:1, 16:9 and a 2:3 portrait), so the frame -- not the file -- has to hold the shape. Each sits centred on a paper panel of fixed height and is contained inside it, which is why a tall board and a wide chart pair read as one row rather than one row and a tower. */ /* Round 2 moved this section up to sit directly under the hero, which put it immediately above .press -- two raised ink-2 panels back to back, reading as one long slab with a stray hairline through the middle. The panels are what separate the sections, so this one drops to the page ground: the hero's vignette already resolves to --ink, so it now flows straight into the first product row, and .press keeps the raised panel that sets it apart again. */ .feats{ padding:104px 0 96px; } /* Wide enough that the longer header lands on three lines rather than four with "sees." orphaned on its own. */ .feats__head{ max-width:1040px; margin-bottom:76px; } .feats__head h2{ font-size:clamp(25px,3vw,38px); line-height:1.3; } .feats__head em{ font-style:italic; color:var(--acc); } .feat{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding:60px 0; border-top:1px solid var(--ink-3); } .feat:first-of-type{ border-top:0; padding-top:0; } .feat:last-of-type{ padding-bottom:0; } /* Odd rows put the picture first, even rows put it second. Grid `order` does the swap so the source order stays copy-after-picture for a screen reader. */ .feat--flip .feat__media{ order:2; } /* White, not paper: the shots are white sheets, so any letterboxing left by `contain` has to be invisible or the frame reads as a mistake on the one landscape image among three portraits. */ .feat__media{ margin:0; background:#fff; border:1px solid var(--paper-line); border-radius:var(--r); padding:22px; height:480px; display:flex; align-items:center; justify-content:center; } .feat__media img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:2px; } .feat__label{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:700; color:var(--acc-alt); margin-bottom:14px; } .feat__copy h3{ font-family:var(--serif); font-weight:500; font-size:clamp(23px,2.5vw,31px); line-height:1.26; margin-bottom:18px; } .feat__copy p{ color:var(--text-3); max-width:52ch; } .feat__copy p + p{ margin-top:14px; } .pricing{ padding:104px 0; } .plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; } .plan{ background:var(--ink-2); border:1px solid var(--ink-3); border-radius:var(--r); padding:34px 30px 36px; display:flex; flex-direction:column; position:relative; } .plan--hero{ background:linear-gradient(170deg,var(--brand) 0%,var(--brand-4) 100%); border-color:var(--brand-line); } .plan__flag{ position:absolute; top:-1px; right:22px; transform:translateY(-50%); background:var(--acc); color:var(--on-acc); font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; border-radius:2px; } .plan h3{ font-size:20px; margin-bottom:8px; } .plan__for{ font-size:14px; color:var(--text-mut); margin-bottom:24px; min-height:2.9em; } .plan__price{ display:flex; align-items:baseline; gap:5px; margin:0 0 16px; } .plan__price .amt{ font-family:var(--mono); font-size:40px; font-weight:700; letter-spacing:-.03em; } .plan__price .per{ font-size:14px; color:var(--text-mut); } .toggle{ display:inline-flex; padding:3px; background:rgba(255,255,255,.05); border:1px solid var(--ink-3); border-radius:var(--r); margin-bottom:16px; align-self:flex-start; } .toggle button{ font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--text-mut); background:none; border:0; padding:6px 14px; border-radius:2px; cursor:pointer; transition:.2s; } .toggle button.is-on{ background:var(--acc); color:var(--on-acc); font-weight:600; } .plan__trial{ font-size:13.5px; color:var(--text-mut); margin:0 0 22px; } .plan__trial b{ color:var(--acc); } .plan__trial--save b{ color:var(--acc); } .plan__f{ list-style:none; padding:0; margin:0 0 30px; display:flex; flex-direction:column; gap:13px; flex:1; } .plan__f li{ position:relative; padding-left:26px; font-size:14.5px; color:var(--text-2); line-height:1.55; } .plan__f li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--acc); font-size:13px; font-weight:700; } .plan__f li b{ color:var(--text-hi); font-weight:600; } .plan__f li em{ font-style:normal; color:var(--text-mut); font-size:13px; } .plan__f li.is-year{ display:none; } .plan.is-year .plan__f li.is-year{ display:block; } .plan .btn{ width:100%; } .plans__note{ margin:28px 0 0; text-align:center; font-size:13.5px; color:var(--text-mut); } /* ============================================================ CTA */ .cta{ padding:104px 0 112px; border-top:1px solid var(--ink-3); background:radial-gradient(80% 130% at 50% 0%, var(--brand) 0%, var(--ink) 62%); } .cta__in{ text-align:center; max-width:720px; } .cta h2{ font-family:var(--serif); font-size:clamp(30px,4.2vw,48px); font-weight:500; margin-bottom:16px; } .cta p{ color:var(--text-mut); margin-bottom:32px; } /* ============================================================ FOOTER */ .foot{ background:var(--ink-0); border-top:1px solid var(--ink-3); padding:66px 0 30px; } .foot__in{ display:grid; grid-template-columns:1.4fr 2fr; gap:56px; padding-bottom:48px; } .foot__brand p{ margin:16px 0 20px; font-size:14px; color:var(--text-mut); max-width:38ch; line-height:1.6; } .foot__social{ display:flex; gap:18px; } .foot__social a{ font-size:13.5px; color:var(--text-mut); text-decoration:none; transition:color .2s; } .foot__social a:hover{ color:var(--acc); } .foot__nav{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; } .foot__nav h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text); margin-bottom:16px; font-weight:500; } .foot__nav a{ display:block; font-size:14px; color:var(--text-mut); text-decoration:none; margin-bottom:11px; transition:color .2s; } .foot__nav a:hover{ color:var(--acc); } .foot__base{ border-top:1px solid var(--ink-3); padding-top:26px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; } .foot__base p{ margin:0; font-size:12.5px; color:var(--text-dim); } .foot__disc{ max-width:60ch; text-align:right; } /* ============================================================ RESPONSIVE */ @media (max-width:1080px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .quotes{ columns:2; } .dan__in{ grid-template-columns:320px 1fr; gap:48px; } } @media (max-width:900px){ /* The mobile menu was wired but never built: the links were hidden here, the burger was hidden everywhere, and app.js toggled an `is-open` class no rule matched. On a phone the whole nav was one logo and one button, with all five destinations unreachable. */ .nav__links{ display:none; } .nav__cta{ margin-left:auto; } .nav__cta .lnk-quiet{ display:none; } /* The desktop 34px gap does not survive three items on a phone: brand + CTA + burger needs 327px of content, and the bar is 354px at 390 and 324px at 360. */ .nav__in{ gap:12px; } .nav__burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:0 8px; flex:none; background:none; border:0; cursor:pointer; } .nav__burger span{ display:block; height:1.5px; background:var(--text); transition:transform .3s var(--ease, ease), opacity .3s; } .nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); } .nav__links.is-open{ display:flex; position:fixed; inset:0; width:100vw; min-height:100dvh; z-index:1; flex-direction:column; justify-content:center; align-items:center; gap:30px; margin-left:0; padding-block:calc(66px + 16px); overflow-y:auto; background:var(--ink); /* opaque: never let the page read through the sheet */ } .nav__links.is-open a{ font-size:19px; color:var(--text); } /* `backdrop-filter` on the stuck bar makes it the containing block for its own position:fixed children, which would shrink this sheet to the height of the bar. Drop the filter while the menu is open -- the opaque sheet hides the bar anyway. */ .nav.is-open, .nav.is-open.is-stuck{ backdrop-filter:none; -webkit-backdrop-filter:none; } /* ...and keep the close button and logo above the sheet, or the menu is a trap. */ .nav.is-open .brand, .nav.is-open .nav__cta, .nav.is-open .nav__burger{ position:relative; z-index:2; } .plans{ grid-template-columns:1fr; } .plan__for{ min-height:0; } .grid-3{ grid-template-columns:repeat(2,1fr); } .income__in{ grid-template-columns:1fr; gap:44px; } /* One column: the `order` swap has to go too, or the flipped rows put their picture below the copy while the others put it above. */ .feat{ grid-template-columns:1fr; gap:34px; padding:44px 0; } .feat--flip .feat__media{ order:0; } .feat__media{ height:340px; padding:18px; } .feats__head{ margin-bottom:52px; } .dan__in{ grid-template-columns:1fr; gap:44px; } .dan__media{ position:static; max-width:320px; } .foot__in{ grid-template-columns:1fr; gap:44px; } } @media (max-width:680px){ body{ font-size:16px; } /* Keeps the trial button in the bar on a 360px phone instead of pushing the burger off the right edge, which is where it was landing. */ .nav__cta .btn--sm{ padding:9px 13px; font-size:13px; } .brand__type{ font-size:15.5px; } .wrap,.nav__in,.hero__in{ width:calc(100% - 36px); } .hero{ min-height:auto; padding:110px 0 72px; } .trust{ gap:26px 34px; margin-top:42px; } .trust__press{ padding-left:0; border-left:0; flex-basis:100%; } .grid-4,.grid-3{ grid-template-columns:1fr; } .quotes{ columns:1; } .letter,.letters,.readers,.pricing,.dan,.income,.cta{ padding:72px 0; } .foot__nav{ grid-template-columns:repeat(2,1fr); } .foot__disc{ text-align:left; } .press{ padding:72px 0; } }