/* ============================================================ Type — Times New Roman everywhere (founder's call). A system face: zero font downloads, zero third-party requests, instant first paint on every device. ============================================================ */ /* ============================================================ Vanta Haven — design system Dark by default. [data-theme="light"] on flips it. Spacing is an 8pt scale. Type is a fixed ramp. ============================================================ */ :root{ color-scheme:dark; --bg:#07100F; --bg-2:#0B1817; --surface:#0E1E1C; --surface-2:#122523; --line:rgb(226 242 239 / .09); --line-2:rgb(226 242 239 / .17); --fg:#E9F1EF; --fg-2:#A7BAB6; --fg-3:#8CA09C; --accent:#4FD1B9; --accent-ink:#062B27; --accent-soft:rgb(79 209 185 / .13); --accent-line:rgb(79 209 185 / .32); --sand:#E5BB6E; --glow-a:rgb(79 209 185 / .13); --glow-b:rgb(20 118 108 / .20); --glow-c:rgb(229 187 110 / .07); --vignette:rgb(2 8 8 / .55); --shadow-1:0 2px 8px -2px rgb(2 10 9 / .5); --shadow-2:0 18px 40px -20px rgb(2 10 9 / .8), 0 2px 6px -3px rgb(2 10 9 / .6); --shadow-3:0 40px 80px -32px rgb(2 10 9 / .9), 0 4px 12px -6px rgb(2 10 9 / .7); --chat-canvas:#0C1A19; --chat-in:#152524; --chat-out:#123B34; --chat-fg:#D2ECE0; --chat-meta:#93B5A9; --chat-bar:#0B2A26; /* 8pt scale */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px; --s8:48px; --s9:64px; --s10:80px; --s11:96px; --s12:128px; --sect:clamp(80px,9vw,128px); --wrap:1200px; --gut:clamp(20px,4vw,48px); --r1:8px; --r2:12px; --r3:16px; --r4:24px; --r5:32px; --disp:'Times New Roman',Times,'Liberation Serif',Georgia,serif; --sans:'Times New Roman',Times,'Liberation Serif',Georgia,serif; --t-xs:.8125rem; --t-sm:.9375rem; --t-base:1.0625rem; --t-md:1.1875rem; --t-lg:1.375rem; --t-xl:1.75rem; --t-2xl:clamp(2rem,1.5rem + 2vw,2.75rem); --t-3xl:clamp(2.4rem,1.55rem + 3.4vw,3.9rem); --t-4xl:clamp(2.9rem,1.7rem + 4.9vw,5.1rem); --out:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.32,.72,0,1); --ease:cubic-bezier(.4,0,.2,1); } [data-theme="light"]{ color-scheme:light; --bg:#FBFAF8; --bg-2:#F5F3EE; --surface:#FFFFFF; --surface-2:#F7F5F0; --line:rgb(11 31 42 / .11); --line-2:rgb(11 31 42 / .20); --fg:#0B1F2A; --fg-2:#42535C; --fg-3:#5C6B72; --accent:#0C6B63; --accent-ink:#FFFFFF; --accent-soft:rgb(12 107 99 / .09); --accent-line:rgb(12 107 99 / .26); --sand:#8A6516; --glow-a:rgb(12 107 99 / .10); --glow-b:rgb(12 107 99 / .07); --glow-c:rgb(217 164 65 / .10); --vignette:rgb(11 31 42 / .05); --shadow-1:0 2px 6px -2px rgb(11 31 42 / .10); --shadow-2:0 16px 34px -18px rgb(11 31 42 / .22), 0 2px 5px -3px rgb(11 31 42 / .12); --shadow-3:0 36px 72px -30px rgb(11 31 42 / .28), 0 4px 10px -6px rgb(11 31 42 / .14); --chat-canvas:#ECE5DD; --chat-in:#FFFFFF; --chat-out:#D9FDD3; --chat-fg:#111B21; --chat-meta:#54636A; --chat-bar:#075E54; } /* ---------- reset + browser surfaces ---------- */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; scrollbar-color:var(--line-2) transparent; } body{ margin:0; min-height:100vh; min-height:100dvh; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:var(--t-base); line-height:1.65; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; caret-color:var(--accent); /* hidden is the fallback — clip avoids creating a scroll container */ overflow-x:hidden; overflow-x:clip; } body::before{ content:""; position:fixed; inset:-10%; z-index:-2; pointer-events:none; background: radial-gradient(52% 44% at 82% -4%,var(--glow-a),transparent 64%), radial-gradient(46% 52% at 4% 18%,var(--glow-b),transparent 66%), radial-gradient(40% 40% at 92% 74%,var(--glow-c),transparent 64%), radial-gradient(44% 48% at 24% 104%,var(--glow-b),transparent 66%); } body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(128% 92% at 50% 34%,transparent 46%,var(--vignette) 100%); } ::selection{background:var(--accent-soft);color:var(--fg)} ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid var(--bg)} ::-webkit-scrollbar-thumb:hover{background:var(--fg-3)} img,svg{display:block;max-width:100%;height:auto} a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px} button{font:inherit;color:inherit;cursor:pointer;border:0;background:none} ul,ol{margin:0;padding:0;list-style:none} p{margin:0;text-wrap:pretty} /* author display rules must never defeat the hidden attribute (this exact class of bug shipped once already — keep the guard) */ [hidden]{display:none!important} h1,h2,h3,h4{ margin:0; font-family:var(--disp); font-weight:400; /* Times runs tighter than a humanist sans — ease off the tracking */ letter-spacing:-.01em; line-height:1.08; text-wrap:balance; } :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} .skip{ position:absolute;left:-9999px;top:0;z-index:60; background:var(--accent);color:var(--accent-ink); padding:var(--s3) var(--s5);border-radius:0 0 var(--r1) 0; font-weight:600;font-size:var(--t-sm);text-decoration:none; } .skip:focus{left:0} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- tooltips ---------- opt-in via data-tip="…"; shows on hover AND keyboard focus. Ink-on-paper chip inverts per theme automatically. */ [data-tip]{position:relative} [data-tip]::after{ content:attr(data-tip); position:absolute;bottom:calc(100% + 10px);left:50%; transform:translate(-50%,3px); background:var(--fg);color:var(--bg); font-family:var(--sans);font-size:.75rem;line-height:1; padding:7px 10px;border-radius:8px;white-space:nowrap; opacity:0;pointer-events:none;z-index:50;box-shadow:var(--shadow-2); transition:opacity .25s var(--ease),transform .3s var(--spring); } [data-tip]::before{ content:"";position:absolute;bottom:calc(100% + 5px);left:50%; transform:translate(-50%,3px); border:5px solid transparent;border-top-color:var(--fg); opacity:0;pointer-events:none;z-index:50; transition:opacity .25s var(--ease),transform .3s var(--spring); } [data-tip]:hover::after,[data-tip]:focus-visible::after, [data-tip]:hover::before,[data-tip]:focus-visible::before{ opacity:1;transform:translate(-50%,0); } /* ---------- layout ---------- */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)} .section{padding-block:var(--sect);position:relative} .section + .section{border-top:1px solid var(--line)} .shead{max-width:34rem} .shead h2{font-size:var(--t-3xl);margin-bottom:var(--s5)} .shead p{color:var(--fg-2);max-width:46ch} .section > .wrap > .shead + *{margin-top:var(--s9)} /* head on the left, content on the right, filling the width */ .split{display:grid;gap:var(--s8) var(--s10);align-items:start} @media (min-width:900px){ .split{grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:var(--s9) clamp(48px,6vw,96px)} .split > .shead{position:sticky;top:112px} } /* ---------- wordmark ---------- */ /* Poppins, self-hosted and subset to the six glyphs the wordmark uses (V A N T H E, both cases). 1.1 KB per weight. Self-hosted on purpose: _headers sets font-src 'self' and style-src 'self', so a Google Fonts link would be BLOCKED and fall back to system-ui with no error anywhere — and the README's "no third-party requests at runtime" still holds. */ @font-face{ font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap; src:url('fonts/poppins-300.woff2') format('woff2'); } @font-face{ font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/poppins-600.woff2') format('woff2'); } /* A3 — the standard logo. Hollow diamond carrying the mint-to-sand ramp on its edge, then VANTA light, then HAVEN with the same ramp filling the letterforms. The lock-up degrades in two steps as space runs out: .wordmark A3 full ◇ VANTA HAVEN .wordmark.is-mono C3 monogram ◇ VH .wordmark.is-mark C4 mark ◇ Both narrower states animate from the one before rather than swapping, so a resize reads as the logo folding up, not as a different logo. */ .wordmark{ font-family:'Poppins',var(--sans); font-weight:300;font-size:1.36rem;line-height:1; letter-spacing:.2em;text-transform:uppercase; color:var(--fg);text-decoration:none;white-space:nowrap; display:inline-flex;align-items:center; } /* the diamond: a rotated square, so it stays crisp at any size and needs no SVG. The gradient sits on the BORDER via a mask, which is the only way to ramp an outline in CSS. */ .wordmark__mark{ flex:none;display:inline-block; width:.56em;height:.56em;margin-right:.5em; transform:rotate(45deg); border:.09em solid transparent; background:linear-gradient(135deg,var(--accent),var(--sand)) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; transition:width .34s cubic-bezier(.4,0,.2,1),height .34s cubic-bezier(.4,0,.2,1), margin .34s cubic-bezier(.4,0,.2,1); } /* "VANTA" — plain, and the part that collapses first */ .wordmark__v{ font-weight:300; display:inline-block;overflow:hidden; max-width:8em;opacity:1; transition:max-width .34s cubic-bezier(.4,0,.2,1),margin .34s cubic-bezier(.4,0,.2,1),opacity .2s ease .06s; } /* "HAVEN" — the gradient. background-clip:text needs a transparent colour, which is why any glow on this has to be filter:drop-shadow and never text-shadow (a text-shadow paints behind the glyphs and shows through). */ .wordmark__h{ font-weight:600; /* letter-spacing alone left VANTAHAVEN reading as a single word */ margin-left:.34em; background:linear-gradient(96deg,var(--accent) 10%,var(--sand) 92%); -webkit-background-clip:text;background-clip:text;color:transparent; display:inline-block;overflow:hidden; max-width:8em;opacity:1; transition:max-width .34s cubic-bezier(.4,0,.2,1),margin .34s cubic-bezier(.4,0,.2,1),opacity .2s ease .06s; } /* the monogram's "H" — present in the DOM at all times so the transition has something to animate to; zero-width until the mono state calls for it */ .wordmark__mono{ font-weight:600; margin-left:.08em; background:linear-gradient(96deg,var(--accent) 10%,var(--sand) 92%); -webkit-background-clip:text;background-clip:text;color:transparent; display:inline-block;overflow:hidden; max-width:0;opacity:0; transition:max-width .34s cubic-bezier(.4,0,.2,1),opacity .2s ease; } /* C3 — monogram. VANTA collapses to its V, HAVEN collapses away, the mono H opens. Result: a gradient VH beside the mark. */ .wordmark.is-mono .wordmark__v{max-width:.86em;} .wordmark.is-mono .wordmark__h{max-width:0;opacity:0;margin-left:0;} .wordmark.is-mono .wordmark__mono{max-width:1.2em;opacity:1;} /* C4 — mark alone. Everything but the diamond folds away and the diamond grows to hold the same optical weight. */ .wordmark.is-mark .wordmark__v, .wordmark.is-mark .wordmark__h, .wordmark.is-mark .wordmark__mono{max-width:0;opacity:0;margin-left:0;} .wordmark.is-mark .wordmark__mark{width:.86em;height:.86em;margin-right:0;} /* Motion is decoration here — the states must still be reachable without it */ @media (prefers-reduced-motion:reduce){ .wordmark__mark,.wordmark__v,.wordmark__h,.wordmark__mono{transition:none;} } /* Light ground: the ramp darkens to hold contrast on white. Print gets the same treatment — a mint-to-sand ramp on paper is close to invisible. */ @media print{ .wordmark__h,.wordmark__mono{ background:none;-webkit-text-fill-color:#0B1817;color:#0B1817; } .wordmark__mark{background:none;border-color:#0B1817;} } .rule{height:1px;width:88px;background:var(--accent-line);position:relative;margin-block:var(--s5)} .rule::after{content:"";position:absolute;right:0;top:0;height:1px;width:28%;background:var(--sand)} /* ---------- header ---------- */ .site-header{position:sticky;top:0;z-index:40} .site-header::before{ content:"";position:absolute;inset:0; background:color-mix(in srgb,var(--bg) 82%,transparent); -webkit-backdrop-filter:saturate(150%) blur(14px); backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid var(--line); opacity:0;transition:opacity .4s var(--spring); } .site-header[data-stuck="true"]::before{opacity:1} .nav{position:relative;display:flex;align-items:center;gap:var(--s5);min-height:80px} .nav__links{display:none;gap:var(--s6);margin-inline-start:auto;font-size:var(--t-sm)} .nav__links a{ color:var(--fg-2);text-decoration:none;padding-block:var(--s1); position:relative;transition:color .24s var(--ease); } .nav__links a::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent); transform:scaleX(0);transform-origin:left;transition:transform .4s var(--spring); } .nav__links a:hover{color:var(--fg)} .nav__links a:hover::after{transform:scaleX(1)} .nav__end{display:flex;align-items:center;gap:var(--s2);margin-inline-start:auto} @media (min-width:960px){.nav__end{margin-inline-start:var(--s5)}} .nav .nav__cta{display:none} .theme{ width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r1); color:var(--fg-2);border:1px solid transparent; transition:color .24s var(--ease),background .24s var(--ease),border-color .24s var(--ease); } .theme:hover{color:var(--fg);background:var(--surface);border-color:var(--line)} .theme svg{width:19px;height:19px;transition:transform .6s var(--spring)} .theme:hover svg{transform:rotate(-32deg)} .nav__toggle{ width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r1); border:1px solid var(--line-2);background:var(--surface); } .nav__toggle .bar{display:block;width:16px;height:1.5px;background:var(--fg);border-radius:2px;position:relative} .nav__toggle .bar::before,.nav__toggle .bar::after{ content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--fg);border-radius:2px; transition:transform .45s var(--spring),top .45s var(--spring); } .nav__toggle .bar::before{top:-5px} .nav__toggle .bar::after{top:5px} .nav__toggle[aria-expanded="true"] .bar{background:transparent} .nav__toggle[aria-expanded="true"] .bar::before{top:0;transform:rotate(45deg)} .nav__toggle[aria-expanded="true"] .bar::after{top:0;transform:rotate(-45deg)} .nav__drawer{ position:relative;display:none;padding-block:var(--s2) var(--s6); border-top:1px solid var(--line); background:color-mix(in srgb,var(--bg) 92%,transparent); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); } .nav__drawer[data-open="true"]{display:block} .nav__drawer a:not(.btn){ display:block;padding:var(--s4) var(--s1);text-decoration:none; border-bottom:1px solid var(--line);color:var(--fg); } .nav__drawer a.btn{margin-top:var(--s5);width:100%} /* without JS the drawer never opens — show it inline instead so no-JS mobile visitors still get full navigation */ html:not(.js) .nav__drawer{display:block} .js .nav__drawer[data-open="true"] > *{opacity:0;transform:translateY(10px);animation:drawerIn .5s var(--out) forwards} .js .nav__drawer[data-open="true"] > *:nth-child(1){animation-delay:.02s} .js .nav__drawer[data-open="true"] > *:nth-child(2){animation-delay:.06s} .js .nav__drawer[data-open="true"] > *:nth-child(3){animation-delay:.1s} .js .nav__drawer[data-open="true"] > *:nth-child(4){animation-delay:.14s} .js .nav__drawer[data-open="true"] > *:nth-child(5){animation-delay:.18s} @keyframes drawerIn{to{opacity:1;transform:none}} @media (min-width:960px){ .nav__links{display:flex} .nav .nav__cta{display:inline-flex} .nav__toggle{display:none} .nav__drawer{display:none!important} } /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); padding:var(--s3) var(--s5);border-radius:999px;border:1px solid transparent; font-size:var(--t-sm);font-weight:600;text-decoration:none;white-space:nowrap; transition:background .3s var(--ease),color .3s var(--ease), border-color .3s var(--ease),transform .3s var(--spring), box-shadow .3s var(--ease); } .btn:active{transform:scale(.975)} .btn--primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-1)} .btn--primary:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)} .btn--primary:active{transform:scale(.975)} .btn--ghost{border-color:var(--line-2);color:var(--fg)} .btn--ghost:hover{border-color:var(--accent-line);background:var(--accent-soft)} .btn--lg{padding:var(--s3) var(--s3) var(--s3) var(--s6);font-size:var(--t-base)} .btn--block{width:100%} /* trailing icon nested in its own disc */ .btn__disc{ width:30px;height:30px;flex:none;border-radius:999px;display:grid;place-items:center; background:rgb(0 0 0 / .16); transition:transform .45s var(--spring),background .3s var(--ease); } .btn--ghost .btn__disc{background:var(--accent-soft)} .btn__disc svg{width:13px;height:13px;stroke-width:1.6} .btn:hover .btn__disc{transform:translate(2px,-2px) scale(1.06)} .btn[aria-busy="true"]{opacity:.66;pointer-events:none} /* ---------- hero ---------- */ .hero{position:relative;padding-block:clamp(48px,7vw,96px) clamp(64px,8vw,112px);overflow:hidden} .hero__aura{ position:absolute;inset:-30% -10% auto;height:150%;z-index:-1;pointer-events:none; background: radial-gradient(38% 44% at 68% 22%,var(--glow-a),transparent 62%), radial-gradient(34% 40% at 22% 68%,var(--glow-b),transparent 64%); filter:blur(10px); } .js .hero__aura{animation:drift 34s var(--ease) infinite alternate} @keyframes drift{ 0%{transform:translate3d(-2%,0,0) scale(1)} 50%{transform:translate3d(3%,2%,0) scale(1.08)} 100%{transform:translate3d(-1%,-2%,0) scale(1.03)} } .hero__grid{display:grid;gap:clamp(48px,6vw,80px);align-items:center} @media (min-width:1000px){.hero__grid{grid-template-columns:1.05fr .95fr}} .hero h1{font-size:var(--t-4xl);letter-spacing:-.015em;margin-bottom:var(--s5)} .hero h1 em{font-style:italic;color:var(--accent)} .hero__lead{font-size:var(--t-md);color:var(--fg-2);max-width:34rem;margin-bottom:var(--s7)} .hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3)} @media (max-width:560px){.hero__actions .btn{flex:1 1 100%}} .hero__where{ font-size:var(--t-xs);color:var(--fg-3);margin-top:var(--s6); display:flex;align-items:center;gap:var(--s2); } .hero__where::before{content:"";width:24px;height:1px;background:var(--line-2);flex:none} /* ---------- the phone ---------- */ .demo{justify-self:center;width:min(100%,392px)} @media (max-width:420px){.demo__phone{min-height:400px}} .demo__tray{ padding:10px;border-radius:var(--r5); background:linear-gradient(160deg,rgb(255 255 255 / .07),rgb(255 255 255 / .02)); box-shadow:var(--shadow-3); } [data-theme="light"] .demo__tray{background:linear-gradient(160deg,rgb(11 31 42 / .07),rgb(11 31 42 / .03))} .demo__phone{ border-radius:calc(var(--r5) - 10px);overflow:hidden; background:var(--chat-canvas); display:flex;flex-direction:column;min-height:452px; box-shadow:inset 0 1px 0 rgb(255 255 255 / .1); } .demo__bar{ background:var(--chat-bar);color:#fff;padding:var(--s3) var(--s4); display:flex;align-items:center;gap:var(--s3);flex:none; } .demo__av{ width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--accent-ink); flex:none;display:grid;place-items:center;font-family:var(--disp);font-size:1rem; } .demo__who{flex:1;min-width:0;line-height:1.35} .demo__who b{display:block;font-size:var(--t-sm);font-weight:600} .demo__who span{display:flex;align-items:center;gap:var(--s1);font-size:.6875rem;color:rgb(255 255 255 / .78)} .demo__who i{width:5px;height:5px;border-radius:50%;background:#5FE39F;display:block;flex:none} .demo__body{flex:1;padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s2);overflow:hidden} .demo__stamp{ align-self:center;background:var(--chat-in);font-size:.6875rem;color:var(--chat-meta); padding:var(--s1) var(--s3);border-radius:var(--r1);margin-bottom:var(--s1); } .msg{ max-width:84%;padding:var(--s2) var(--s3);font-size:var(--t-sm);line-height:1.5; border-radius:var(--r2);color:var(--chat-fg);box-shadow:var(--shadow-1); } .msg--in{background:var(--chat-in);align-self:flex-start;border-bottom-left-radius:var(--s1)} .msg--out{background:var(--chat-out);align-self:flex-end;border-bottom-right-radius:var(--s1)} .msg time{display:block;font-size:.6875rem;color:var(--chat-meta);text-align:right;margin-top:2px} .typing{ align-self:flex-start;background:var(--chat-in);border-radius:var(--r2); border-bottom-left-radius:var(--s1);padding:var(--s3); display:flex;gap:var(--s1);box-shadow:var(--shadow-1); } .typing i{width:5px;height:5px;border-radius:50%;background:var(--chat-meta);display:block} .demo__caption{margin-top:var(--s5);text-align:center;font-size:var(--t-xs);color:var(--fg-3)} .demo__caption b{color:var(--accent);font-weight:600} .demo__replay{ display:flex;align-items:center;justify-content:center;gap:var(--s2);margin:var(--s2) auto 0; font-size:var(--t-xs);color:var(--fg-3);transition:color .3s var(--ease); } .demo__replay:hover{color:var(--accent)} .demo__replay svg{width:13px;height:13px;stroke-width:1.5;transition:transform .6s var(--spring)} .demo__replay:hover svg{transform:rotate(-180deg)} /* the one authored motion moment */ .js .demo__body [data-seq]{opacity:0;transform:translateY(12px) scale(.985);filter:blur(3px)} .js .demo__body [data-seq].is-in{animation:seq .62s var(--out) forwards} @keyframes seq{to{opacity:1;transform:none;filter:blur(0)}} .js .typing{display:none} .js .typing.is-on{display:flex} .typing.is-on i{animation:blink 1.3s infinite} .typing.is-on i:nth-child(2){animation-delay:.16s} .typing.is-on i:nth-child(3){animation-delay:.32s} @keyframes blink{0%,62%,100%{opacity:.3;transform:translateY(0)}31%{opacity:1;transform:translateY(-3px)}} /* ---------- assurance band ---------- */ .band{border-block:1px solid var(--line);background:var(--bg-2)} .band ul{display:grid;gap:var(--s4);padding-block:var(--s5)} @media (min-width:820px){.band ul{grid-template-columns:repeat(3,1fr);gap:var(--s8)}} .band li{display:flex;align-items:flex-start;gap:var(--s3);font-size:var(--t-sm);color:var(--fg-2)} .band b{color:var(--fg);font-weight:600} .band svg{width:16px;height:16px;stroke-width:1.5;color:var(--accent);flex:none;margin-top:3px} /* ---------- services ---------- */ .svc{border-top:1px solid var(--line);padding-block:var(--s9);display:grid;gap:var(--s6) var(--s10)} .svc:first-of-type{border-top:0;padding-top:0} @media (min-width:900px){.svc{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}} .svc__mark{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);color:var(--accent)} .svc__mark svg{width:22px;height:22px;stroke-width:1.35;flex:none} .svc__mark span{font-size:var(--t-xs);color:var(--fg-3);letter-spacing:.02em} .svc h3{font-size:var(--t-2xl);margin-bottom:var(--s4)} .svc__lede{color:var(--fg-2);max-width:38ch} .svc__list{columns:2;column-gap:var(--s7)} @media (max-width:640px){.svc__list{columns:1}} .svc__list li{ position:relative;padding-inline-start:var(--s6);margin-bottom:var(--s4); font-size:var(--t-sm);color:var(--fg-2);break-inside:avoid; } .svc__list li::before{ content:"";position:absolute;left:0;top:.42em;width:10px;height:5px; border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent); transform:rotate(-45deg); } /* ---------- what it answers ---------- */ .ask{display:grid} .ask__row{ display:grid;gap:var(--s4) var(--s8);align-items:start; padding-block:var(--s7);border-top:1px solid var(--line); } .ask__row:first-child{border-top:0;padding-top:0} @media (min-width:820px){.ask__row{grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:var(--s4) var(--s9)}} .ask__who h3{font-size:var(--t-lg);margin-bottom:var(--s2)} .ask__who p{font-size:var(--t-xs);color:var(--fg-3)} .ask__chips{display:flex;flex-wrap:wrap;gap:var(--s2)} .ask__chips li{ font-size:var(--t-sm);color:var(--fg-2); padding:var(--s2) var(--s4);border-radius:999px; background:var(--surface);border:1px solid var(--line); transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--spring); } .ask__chips li:hover{color:var(--fg);border-color:var(--accent-line);transform:translateY(-2px)} .ask__note{ margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line); font-size:var(--t-sm);color:var(--fg-3);max-width:62ch; } /* ---------- the refusal ---------- */ .honest{display:grid;gap:clamp(40px,5vw,72px);align-items:center} @media (min-width:940px){.honest{grid-template-columns:1fr 1fr}} .proof{background:var(--chat-canvas);border-radius:var(--r4);padding:var(--s5);box-shadow:var(--shadow-2)} .proof .msg{max-width:88%;font-size:var(--t-sm)} .proof .msg + .msg{margin-top:var(--s2)} .proof__foot{ display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s5); padding-top:var(--s4);border-top:1px solid var(--line-2); font-size:var(--t-xs);color:var(--chat-meta); } .proof__foot svg{width:16px;height:16px;stroke-width:1.4;color:var(--accent);flex:none;margin-top:2px} .wont{margin-top:var(--s7)} .wont li{position:relative;padding-inline-start:var(--s6);margin-bottom:var(--s4);color:var(--fg-2)} .wont li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:1px;background:var(--accent-line)} .wont b{color:var(--fg);font-weight:600} /* ---------- how it works ---------- */ .steps{display:grid;gap:var(--s6)} @media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:var(--s8)}} .split .steps{grid-template-columns:1fr;gap:var(--s7)} .split .step p{max-width:52ch} .step{position:relative;padding-top:var(--s6);border-top:1px solid var(--line)} .step::after{ content:"";position:absolute;top:-1px;left:0;width:38%;height:1px;background:var(--accent); transform:scaleX(0);transform-origin:left;transition:transform .8s var(--spring); } .step.is-in::after{transform:scaleX(1)} .step:nth-child(2)::after{transition-delay:.12s} .step:nth-child(3)::after{transition-delay:.24s} .step h3{font-family:var(--sans);font-size:var(--t-base);font-weight:600;letter-spacing:0;margin-bottom:var(--s2)} .step p{color:var(--fg-2);font-size:var(--t-sm);max-width:34ch} /* ---------- faq ---------- */ .faq{display:grid;gap:var(--s7) var(--s10)} @media (min-width:900px){.faq{grid-template-columns:1fr 1fr}} .faq h3{font-family:var(--sans);font-size:var(--t-base);font-weight:600;letter-spacing:0;margin-bottom:var(--s3);color:var(--fg)} .faq p{color:var(--fg-2);font-size:var(--t-sm);max-width:52ch} .faq__item{position:relative;padding-inline-start:var(--s5)} .faq__item::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--accent-line)} .faq__more{ grid-column:1/-1;margin-top:var(--s2);padding-top:var(--s5);border-top:1px solid var(--line); font-size:var(--t-sm);color:var(--fg-3); } .faq__more a{color:var(--accent);font-weight:600} /* ---------- contact ---------- */ .contact{display:grid;gap:var(--s8)} @media (min-width:960px){.contact{grid-template-columns:minmax(0,1fr) 21rem;gap:clamp(48px,5vw,80px);align-items:start}} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .field{margin-bottom:var(--s4)} .field label{display:block;font-size:var(--t-xs);font-weight:600;margin-bottom:var(--s2);color:var(--fg-2)} .field input,.field textarea{ width:100%;font:inherit; /* 16px+ stops iOS Safari zooming the field on focus */ font-size:1rem;color:var(--fg); background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r2); padding:var(--s3) var(--s4); transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease); } .field input::placeholder,.field textarea::placeholder{color:var(--fg-3)} .field input:focus,.field textarea:focus{ outline:none;border-color:var(--accent);background:var(--surface-2); box-shadow:0 0 0 3px var(--accent-soft); } .field textarea{min-height:112px;resize:vertical} .form__note{font-size:var(--t-xs);color:var(--fg-3);margin-top:var(--s4);text-align:center} .form__status{margin-top:var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r2);font-size:var(--t-sm);display:none} .form__status[data-state="ok"]{display:block;background:var(--accent-soft);color:var(--accent)} .form__status[data-state="err"]{display:block;background:rgb(229 187 110 / .12);color:var(--sand)} .details{background:var(--surface);border-radius:var(--r3);padding:var(--s5)} .details h3{font-family:var(--sans);font-size:var(--t-xs);color:var(--fg-3);font-weight:600;margin-bottom:var(--s4);letter-spacing:0} .details dl{margin:0} .details .row{ display:flex;justify-content:space-between;gap:var(--s4); padding-block:var(--s3);border-bottom:1px solid var(--line);font-size:var(--t-sm); } .details .row:last-child{border-bottom:0;padding-bottom:0} .details dt{color:var(--fg-3);flex:none} .details dd{margin:0;text-align:right;font-weight:600;word-break:break-word;color:var(--fg)} .details a{color:var(--accent)} /* ---------- footer ---------- */ .site-footer{border-top:1px solid var(--line);background:var(--bg-2);padding-block:var(--s10) var(--s6)} .footer__top{display:grid;gap:var(--s8);padding-bottom:var(--s8)} @media (min-width:820px){.footer__top{grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:var(--s10)}} .footer__blurb p{color:var(--fg-2);max-width:34ch;font-size:var(--t-sm)} .footer__blurb .wordmark{font-size:2rem} .footer__nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s6);align-content:start} .footer__nav a{ display:block;color:var(--fg-2);text-decoration:none;font-size:var(--t-sm); padding-block:var(--s1);transition:color .3s var(--ease); } .footer__nav a:hover{color:var(--accent)} .footer__bottom{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3); padding-top:var(--s5);border-top:1px solid var(--line); font-size:var(--t-xs);color:var(--fg-3); } /* ---------- legal pages ---------- */ .legal{max-width:42rem} .legal h1{font-size:var(--t-3xl);margin-bottom:var(--s2)} .legal .updated{color:var(--fg-3);font-size:var(--t-sm);margin-bottom:var(--s9)} .legal h2{font-size:var(--t-xl);margin:var(--s9) 0 var(--s4)} .legal h3{font-family:var(--sans);font-size:var(--t-base);font-weight:600;letter-spacing:0;margin:var(--s6) 0 var(--s2);color:var(--fg)} .legal p,.legal li{color:var(--fg-2)} .legal p{margin-bottom:var(--s4);max-width:68ch} .legal ul{list-style:disc;padding-inline-start:var(--s5);margin-bottom:var(--s4)} .legal li{margin-bottom:var(--s2);max-width:66ch} .legal a{color:var(--accent)} .legal .summary{background:var(--surface);border-radius:var(--r3);padding:var(--s5) var(--s6);margin-bottom:var(--s8)} .legal .summary p{margin-bottom:0;color:var(--fg)} .legal .cta-row{margin-top:var(--s8)} /* ---------- authored motion ---------- Everything here is doubly gated: html.js (no-JS visitors see a static page) AND prefers-reduced-motion (motion opt-outs see it too). Nothing below runs unless both boxes are ticked. */ @media (prefers-reduced-motion:no-preference){ /* hero copy rises in on first paint */ .js .hero [data-rise]{opacity:0;transform:translateY(22px);animation:heroRise .9s var(--out) forwards} .js .hero [data-rise="2"]{animation-delay:.1s} .js .hero [data-rise="3"]{animation-delay:.2s} .js .hero [data-rise="4"]{animation-delay:.3s} /* the phone breathes */ .js .demo__phone{animation:float 7s ease-in-out 1.2s infinite alternate} /* scroll reveals */ .js [data-reveal]{ opacity:0;transform:translateY(20px); transition:opacity .75s var(--out),transform .75s var(--out); transition-delay:var(--rd,0ms); } .js [data-reveal].is-in{opacity:1;transform:none} .js [data-reveal-group] > *{ opacity:0;transform:translateY(14px); transition:opacity .65s var(--out),transform .65s var(--out); } .js [data-reveal-group].is-in > *{opacity:1;transform:none} .js [data-reveal-group].is-in > *:nth-child(1){transition-delay:0s} .js [data-reveal-group].is-in > *:nth-child(2){transition-delay:.07s} .js [data-reveal-group].is-in > *:nth-child(3){transition-delay:.14s} .js [data-reveal-group].is-in > *:nth-child(4){transition-delay:.21s} .js [data-reveal-group].is-in > *:nth-child(5){transition-delay:.28s} .js [data-reveal-group].is-in > *:nth-child(6){transition-delay:.35s} .js [data-reveal-group].is-in > *:nth-child(7){transition-delay:.42s} .js [data-reveal-group].is-in > *:nth-child(8){transition-delay:.49s} .js [data-reveal-group].is-in > *:nth-child(9){transition-delay:.56s} .js [data-reveal-group].is-in > *:nth-child(n+10){transition-delay:.63s} } @keyframes heroRise{to{opacity:1;transform:none}} @keyframes float{from{transform:translateY(0)}to{transform:translateY(-8px)}} /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important; } .js .demo__body [data-seq]{opacity:1;transform:none;filter:none} .js .typing{display:none!important} .js .hero__aura{animation:none} .step::after{transform:scaleX(1)} /* motion additions: land everything in its final state */ .js .hero [data-rise]{opacity:1;transform:none;animation:none} .js .demo__phone{animation:none} .js [data-reveal], .js [data-reveal-group] > *{opacity:1!important;transform:none!important;transition:none!important} }