/* ========================================================================= Yapr — marketing site Aesthetic: calm editorial warmth. Warm paper, one deep-purple accent, General Sans, generous space. Linear/Stripe restraint — never a candy gradient, never purple-washed surfaces. Tokens mirror the app (design/mockups/tokens.css) so web ↔ app match. ========================================================================= */ /* General Sans is loaded via a in (parallel fetch — an @import here would chain behind this stylesheet and delay first text paint). */ :root { --paper:#FAFAF7; --paper-2:#F4F3EE; --paper-3:#E9E7DE; --hairline:#D9D6CB; --ink:#0E1116; --ink-2:#2B2F35; --ink-3:#6A6F76; --ink-4:#9CA0A7; --plum:#6B3FD4; --plum-deep:#4F2DA8; --plum-soft:#ECE6FB; --plum-edge:#D4C7F4; --vault:#1F5D52; --vault-soft:#DFEDE9; --success:#2E7D4F; --danger:#B33B3B; --font-sans:'General Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --track-tight:-0.02em; --track-tighter:-0.04em; --track-cap:0.10em; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:28px; --r-pill:9999px; --shadow-1:0 1px 0 rgba(14,17,22,.04), 0 1px 2px rgba(14,17,22,.04); --shadow-2:0 2px 8px rgba(14,17,22,.05), 0 18px 48px -16px rgba(14,17,22,.12); --shadow-mic:0 18px 40px -10px rgba(107,63,212,.30); --ease-out:cubic-bezier(.22,1,.36,1); --maxw:1140px; } [data-theme="dark"] { --paper:#0B0E13; --paper-2:#131822; --paper-3:#1B2230; --hairline:#232A38; --ink:#ECEAE2; --ink-2:#C3C0B6; --ink-3:#8C8E96; --ink-4:#5B5F69; --plum:#8A66E8; --plum-deep:#6B3FD4; --plum-soft:#1E1834; --plum-edge:#3B2F66; --vault:#6FB8A8; --vault-soft:#122620; --shadow-2:0 2px 8px rgba(0,0,0,.4), 0 18px 48px -16px rgba(0,0,0,.55); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} html,body{margin:0;padding:0;} body{ font-family:var(--font-sans); font-size:17px; line-height:1.5; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:"ss01","cv11"; overflow-x:hidden; } a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;} img,svg{display:block;} em{font-style:italic;} /* Grain overlay — barely-there warmth, not a gradient */ .grain{ position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.035; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } [data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.05;} /* ---------- Shared bits ---------- */ .eyebrow{ font-size:12px; font-weight:600; letter-spacing:var(--track-cap); text-transform:uppercase; color:var(--plum); margin:0 0 14px; } [data-theme="dark"] .eyebrow{color:var(--plum);} .btn{ display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:16px; letter-spacing:var(--track-tight); border:none; border-radius:var(--r-pill); padding:13px 22px; transition:transform .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out); white-space:nowrap; } .btn--primary{background:var(--plum); color:#fff; box-shadow:var(--shadow-mic);} .btn--primary:hover{background:var(--plum-deep); transform:translateY(-1px);} .btn--sm{padding:9px 16px; font-size:14px;} .section-head{max-width:660px; margin:0 auto 56px; text-align:center;} .section-head h2{ font-size:clamp(28px,4.4vw,46px); font-weight:600; line-height:1.08; letter-spacing:var(--track-tighter); margin:0; } .section-lede{margin:18px auto 0; color:var(--ink-3); font-size:18px; max-width:560px;} section{padding:clamp(72px,9vw,128px) 24px;} section > *{max-width:var(--maxw); margin-inline:auto;} /* ============================ NAV ============================ */ /* iOS 26 "Liquid Glass" floating pill — translucent, heavy blur, specular edges. Floating-pill structure with a glassy refractive surface (not a flat fill). */ /* Floating top bar: the nav pill + a separate floating language circle to its right. */ .topbar{ position:sticky; top:14px; z-index:100; display:flex; align-items:center; gap:12px; width:calc(100% - 32px); max-width:1140px; margin:14px auto 0; } .nav{ flex:1 1 auto; min-width:0; position:relative; display:flex; align-items:center; gap:16px; padding:7px 10px 7px 16px; border-radius:var(--r-pill); background:linear-gradient(180deg, color-mix(in srgb, var(--paper) 46%, transparent), color-mix(in srgb, var(--paper) 22%, transparent)); -webkit-backdrop-filter:blur(20px) saturate(185%); backdrop-filter:blur(20px) saturate(185%); border:1px solid color-mix(in srgb, #fff 55%, transparent); box-shadow: 0 8px 24px -10px rgba(14,17,22,.18), 0 30px 60px -28px rgba(14,17,22,.28), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -10px 22px -14px rgba(255,255,255,.5); } [data-theme="dark"] .nav{ background:linear-gradient(180deg, color-mix(in srgb, var(--paper-2) 58%, transparent), color-mix(in srgb, var(--paper-2) 30%, transparent)); border-color:color-mix(in srgb, #fff 14%, transparent); box-shadow: 0 8px 24px -10px rgba(0,0,0,.55), 0 30px 60px -28px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -10px 22px -14px rgba(255,255,255,.05); } .brand{display:inline-flex; align-items:center; gap:10px;} .brand__mark{display:grid; place-items:center;} .nav .brand__mark img{width:50px; height:50px;} .footer .brand__mark img{width:34px; height:34px;} .brand__word{font-weight:700; font-size:23px; letter-spacing:-0.04em;} .nav__links{display:flex; gap:22px; margin-inline:auto;} .nav__links a:not(.btn){ font-size:15px; color:var(--ink-3); position:relative; transition:color .18s var(--ease-out); } .nav__links a:not(.btn):hover{color:var(--ink);} .nav__links a:not(.btn)::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:2px; background:var(--plum); transform:scaleX(0); transform-origin:center; transition:transform .25s var(--ease-out); } .nav__links a:not(.btn):hover::after, .nav__links a:not(.btn).is-active::after{transform:scaleX(1);} .nav__actions{display:flex; align-items:center; gap:10px;} .theme-toggle{ width:38px; height:38px; border-radius:var(--r-pill); border:1px solid var(--hairline); background:var(--paper-2); display:grid; place-items:center; font-size:15px; color:var(--ink-2); transition:border-color .2s, transform .2s; } .theme-toggle:hover{border-color:var(--plum-edge); transform:rotate(-8deg);} .theme-toggle__moon{display:none;} [data-theme="dark"] .theme-toggle__sun{display:none;} [data-theme="dark"] .theme-toggle__moon{display:inline;} /* ============================ HERO ============================ */ .hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; padding-top:clamp(56px,8vw,104px); padding-bottom:clamp(64px,8vw,112px); } .hero__title{ font-size:clamp(40px,6.6vw,76px); font-weight:600; line-height:1.02; letter-spacing:var(--track-tighter); margin:0 0 22px; } .hero__title em{color:var(--plum); font-style:italic;} .hero__sub{font-size:clamp(17px,1.6vw,20px); color:var(--ink-3); max-width:520px; margin:0 0 30px;} .hero__sub em{color:var(--ink-2); font-style:italic;} .hero__cta-note{font-size:13px; color:var(--ink-4); margin:14px 0 0;} .waitlist-inline{display:flex; gap:8px; max-width:460px; flex-wrap:wrap;} .waitlist-inline input{ flex:1 1 220px; min-width:0; font-family:inherit; font-size:16px; padding:13px 16px; border-radius:var(--r-pill); border:1px solid var(--hairline); background:var(--paper-2); color:var(--ink); transition:border-color .2s, box-shadow .2s; } .waitlist-inline input::placeholder{color:var(--ink-4);} .waitlist-inline input:focus{outline:none; border-color:var(--plum); box-shadow:0 0 0 4px var(--plum-soft);} /* Demand-signal checkbox: wraps to its own row inside .waitlist-inline (flex-wrap). */ .waitlist-extra{ flex-basis:100%; display:inline-flex; gap:8px; align-items:center; font-size:13px; color:var(--ink-3); cursor:pointer; user-select:none; } /* Conversation demo card */ .hero__demo{display:flex; justify-content:center;} .convo{ width:100%; max-width:420px; background:var(--paper-2); border:1px solid var(--hairline); border-radius:var(--r-2xl); padding:22px; box-shadow:var(--shadow-2); transform:rotate(.6deg); } .convo__head{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:18px;} .chip{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-pill); padding:7px 13px; } .flag{font-size:15px;} .convo__swap{color:var(--ink-4); font-size:16px;} .bubble{border-radius:var(--r-lg); padding:14px 16px; margin-bottom:12px;} .bubble__label{display:block; font-size:11px; font-weight:600; letter-spacing:var(--track-cap); text-transform:uppercase; color:var(--ink-4); margin-bottom:6px;} .bubble p{margin:0; font-size:16px;} .bubble--you{background:var(--paper); border:1px solid var(--hairline);} .bubble--them{background:var(--plum-soft); border:1px solid var(--plum-edge);} .bubble--them p{color:var(--ink); font-weight:500;} .your-voice{color:var(--plum); font-weight:600;} [data-theme="dark"] .your-voice{color:var(--plum);} .wave{display:flex; align-items:flex-end; gap:3px; height:22px; margin-top:10px;} .wave span{ width:3px; height:30%; background:var(--plum); border-radius:2px; animation:wave 1s var(--ease-out) infinite; } .wave span:nth-child(2){animation-delay:.1s} .wave span:nth-child(3){animation-delay:.2s} .wave span:nth-child(4){animation-delay:.3s} .wave span:nth-child(5){animation-delay:.15s} .wave span:nth-child(6){animation-delay:.25s} .wave span:nth-child(7){animation-delay:.05s} .wave span:nth-child(8){animation-delay:.35s} .wave span:nth-child(9){animation-delay:.2s} .wave span:nth-child(10){animation-delay:.1s} @keyframes wave{0%,100%{height:25%}50%{height:100%}} .convo__foot{display:flex; justify-content:space-between; align-items:center; margin-top:6px; font-size:12px; color:var(--ink-4);} .convo__foot .lock{color:var(--vault); font-weight:500;} /* ============================ TRUST ============================ */ .trust{text-align:center; padding-top:0;} .trust p{font-size:12px; letter-spacing:var(--track-cap); text-transform:uppercase; color:var(--ink-4); margin:0 0 16px;} .trust ul{list-style:none; margin:0; padding:0; display:flex; gap:14px 36px; justify-content:center; flex-wrap:wrap; color:var(--ink-3); font-size:15px;} .trust strong{color:var(--ink);} /* ============================ HOW ============================ */ .steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); } .step{position:relative; padding-top:22px; border-top:2px solid var(--hairline); text-align:center;} .step__num{font-size:40px; font-weight:600; color:var(--plum); letter-spacing:var(--track-tight); font-feature-settings:"tnum"; display:block; margin-bottom:14px;} .step h3{font-size:21px; font-weight:600; margin:0 0 10px; letter-spacing:var(--track-tight);} .step h3 em{color:var(--plum);} .step p{color:var(--ink-3); margin:0 auto; font-size:16px; max-width:32ch;} /* ============================ MODES ============================ */ .mode-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;} .mode-card{ background:var(--paper-2); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:28px; transition:transform .35s var(--ease-out), border-color .3s var(--ease-out), box-shadow .35s var(--ease-out); } .mode-card:hover{transform:translateY(-4px); border-color:var(--plum-edge); box-shadow:var(--shadow-2);} .mode-card__icon{font-size:26px; display:inline-block; margin-bottom:16px; line-height:1;} .mode-card__icon[data-tone="plum"]{color:var(--plum);} .mode-card__icon[data-tone="ink"]{color:var(--ink-2);} .mode-card__icon[data-tone="danger"]{color:var(--danger);} .mode-card h3{font-size:22px; font-weight:600; margin:0 0 10px; letter-spacing:var(--track-tight);} .mode-card p{color:var(--ink-3); margin:0; font-size:15.5px;} /* ============================ PRIVACY ============================ */ .privacy-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;} .priv-card{ background:var(--paper-2); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:30px; } .priv-card--strict{background:var(--vault-soft); border-color:color-mix(in srgb,var(--vault) 28%, transparent);} .priv-card header{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px;} .priv-card__tag{font-weight:600; font-size:20px; letter-spacing:var(--track-tight);} .priv-card__tag--vault{color:var(--vault);} .priv-card__hint{font-size:13px; color:var(--ink-4);} .priv-card__lead{margin:0 0 18px; color:var(--ink-2); font-size:16px;} .ticks{list-style:none; margin:0; padding:0; display:grid; gap:11px;} .ticks li{position:relative; padding-left:28px; color:var(--ink-3); font-size:15px;} .ticks li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--plum); font-weight:700; } .ticks--vault li::before{color:var(--vault);} .privacy__foot{text-align:center; max-width:600px; margin:40px auto 0; color:var(--ink-4); font-size:15px;} /* ============================ CASES ============================ */ .case-rows{display:grid; gap:0;} .case{ display:grid; grid-template-columns:200px 1fr; gap:clamp(20px,4vw,56px); padding:34px 0; border-top:1px solid var(--hairline); align-items:start; } .case:last-child{border-bottom:1px solid var(--hairline);} .case__kicker{font-size:13px; font-weight:600; letter-spacing:var(--track-cap); text-transform:uppercase; color:var(--plum); padding-top:6px;} .case h3{font-size:clamp(20px,2.3vw,26px); font-weight:600; margin:0 0 10px; letter-spacing:var(--track-tight);} .case p{color:var(--ink-3); margin:0; font-size:16.5px; max-width:620px;} /* ============================ FAQ ============================ */ .faq-list{max-width:780px; margin-inline:auto;} .faq-list details{border-bottom:1px solid var(--hairline);} .faq-list summary{ list-style:none; cursor:pointer; padding:22px 0; font-size:18px; font-weight:500; letter-spacing:var(--track-tight); display:flex; justify-content:space-between; align-items:center; gap:20px; } .faq-list summary::-webkit-details-marker{display:none;} .faq__plus{position:relative; width:16px; height:16px; flex:0 0 auto;} .faq__plus::before,.faq__plus::after{ content:""; position:absolute; background:var(--plum); border-radius:2px; transition:transform .25s var(--ease-out); } .faq__plus::before{top:7px; left:0; width:16px; height:2px;} .faq__plus::after{top:0; left:7px; width:2px; height:16px;} details[open] .faq__plus::after{transform:rotate(90deg); opacity:0;} .faq-list details p{margin:0; padding-bottom:22px; color:var(--ink-3); font-size:16px; max-width:660px;} @keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1}} /* ============================ CTA ============================ */ .cta{padding-block:clamp(80px,10vw,140px);} .cta__inner{ max-width:680px; text-align:center; background:var(--plum-soft); border:1px solid var(--plum-edge); border-radius:var(--r-2xl); padding:clamp(40px,6vw,72px) clamp(24px,5vw,56px); } [data-theme="dark"] .cta__inner{background:var(--paper-2); border-color:var(--plum-edge);} .cta__mark{display:inline-block; margin-bottom:18px;} .cta__inner h2{font-size:clamp(28px,4vw,42px); font-weight:600; letter-spacing:var(--track-tighter); margin:0 0 14px; line-height:1.06;} .cta__inner > p{color:var(--ink-2); font-size:18px; margin:0 0 28px;} .waitlist-inline--lg{max-width:480px; margin-inline:auto;} .cta__success{margin:18px 0 0; color:var(--success); font-weight:600;} /* ============================ FOOTER ============================ */ .footer{ border-top:1px solid var(--hairline); padding:clamp(48px,6vw,72px) clamp(24px,4vw,40px) 40px; display:grid; grid-template-columns:1.4fr 2fr; gap:40px; max-width:var(--maxw); margin-inline:auto; } .footer__brand p{color:var(--ink-4); font-size:15px; margin:14px 0 0; max-width:260px;} .footer__cols{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;} .footer__cols h4{font-size:12px; letter-spacing:var(--track-cap); text-transform:uppercase; color:var(--ink-4); margin:0 0 14px;} .footer__cols a{display:block; color:var(--ink-3); font-size:15px; padding:5px 0; transition:color .15s;} .footer__cols a:hover{color:var(--plum);} .footer__legal{grid-column:1/-1; border-top:1px solid var(--hairline); padding-top:24px; margin:8px 0 0; color:var(--ink-4); font-size:13px; line-height:1.6;} /* ============================ REVEAL ============================ */ .reveal{opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);} .reveal.in{opacity:1; transform:none;} /* ============================ RESPONSIVE ============================ */ @media (max-width:900px){ .hero{grid-template-columns:1fr; text-align:left;} .hero__demo{margin-top:8px;} .steps{grid-template-columns:1fr; gap:0;} .step{border-top:1px solid var(--hairline); padding:26px 0;} .step__num{font-size:32px; margin-bottom:8px;} .mode-grid{grid-template-columns:1fr;} .privacy-grid{grid-template-columns:1fr;} .case{grid-template-columns:1fr; gap:8px; padding:28px 0;} .footer{grid-template-columns:1fr; gap:32px;} .nav__links{display:none;} } @media (max-width:480px){ .footer__cols{grid-template-columns:1fr 1fr;} } /* Respect reduced motion */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important; transition:none !important;} .reveal{opacity:1; transform:none;} html{scroll-behavior:auto;} } /* ========================================================================= VOICE RIBBON HERO — the warm, energetic upgrade. A secondary amber accent + a soft hero aura add warmth without a purple wash. The 3D ribbon lives in .hero__stage; the .hero__stage-fallback card shows whenever WebGL is off (default state until ribbon.js opts in). ========================================================================= */ :root{ --amber:#E8842B; --amber-soft:#FAE7D4; --amber-deep:#C2660C; } [data-theme="dark"]{ --amber:#F2A35A; --amber-soft:#241910; } /* Two-column hero: copy on the left, the orb visual on the right. */ .hero{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); align-items:center; gap:clamp(20px,3vw,52px); min-height:clamp(500px,72vh,680px); } .hero > *{position:relative;} /* Copy in the left column, left-aligned (no overlap with the orbs anymore). */ .hero__copy{position:relative; z-index:3; text-align:left; min-width:0;} /* Language + phrase controls. position+z-index lifts the voicebar (and its open dropdown) above the later hero blocks, which the entrance-blur turns into their own stacking contexts — otherwise the menu opens *behind* the waitlist. */ .voicebar{margin:4px 0 26px; max-width:540px; position:relative; z-index:5;} .voicebar__langs{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;} .vchip{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--hairline); border-radius:var(--r-pill); padding:8px 14px; } .vchip b{font-weight:600; color:var(--ink);} .dot{width:8px; height:8px; border-radius:50%; display:inline-block; flex:0 0 auto;} .dot--you{background:var(--plum); box-shadow:0 0 0 3px color-mix(in srgb,var(--plum) 20%, transparent);} .dot--them{background:var(--amber); box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 22%, transparent);} .vchip__swap{ width:36px; height:36px; border-radius:var(--r-pill); border:1px solid var(--hairline); background:var(--paper); color:var(--plum); font-size:16px; display:grid; place-items:center; transition:transform .35s var(--ease-out), border-color .2s, background .2s; } .vchip__swap:hover{border-color:var(--plum-edge); background:var(--plum-soft); transform:rotate(180deg);} .phrasebar{display:flex; flex-wrap:wrap; gap:8px;} .phrase{ font-size:14px; font-weight:500; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--hairline); border-radius:var(--r-pill); padding:9px 15px; transition:border-color .2s var(--ease-out), background .2s, color .2s, transform .15s, box-shadow .2s; } .phrase:hover{border-color:var(--plum-edge); color:var(--ink); transform:translateY(-1px);} .phrase.is-active{background:var(--plum); color:#fff; border-color:var(--plum); box-shadow:var(--shadow-mic);} .phrase:focus-visible,.vchip__swap:focus-visible{outline:none; box-shadow:0 0 0 4px var(--plum-soft);} .voicebar__hint{font-size:13px; color:var(--ink-4); margin:14px 0 0; transition:opacity .3s var(--ease-out);} /* The stage holds the WebGL canvas + the 2D fallback */ .hero__stage{ position:relative; min-height:clamp(320px,42vw,460px); display:flex; align-items:center; justify-content:center; } /* When the orbs are live, the stage is a full-bleed background; the orbs sit on the right. max-width:none overrides the site-wide `section > * { max-width:1140 }` cap, or the canvas would be a left-aligned 1140px box on wide screens and the orbs would land mid-screen. */ .hero__stage.has-ribbon{ position:absolute; inset:0; width:100%; height:100%; max-width:none; min-height:0; margin:0; z-index:0; display:block; } /* Light scrim on the far-left so the copy stays crisp over the background. */ .hero__stage.has-ribbon::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg, var(--paper) 6%, transparent 36%); } .ribbon-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; opacity:0; transition:opacity .9s var(--ease-out); touch-action:manipulation; } .hero__stage.has-ribbon .ribbon-canvas{opacity:1;} /* Soft two-lobe glow (plum + amber) behind the orbs — composites over the page. */ .hero__stage.has-ribbon::before{ content:""; position:absolute; left:50%; top:50%; width:80%; aspect-ratio:1.4; transform:translate(-50%,-50%); z-index:0; pointer-events:none; background: radial-gradient(40% 60% at 32% 50%, color-mix(in srgb,var(--plum) 30%, transparent), transparent 70%), radial-gradient(40% 60% at 68% 50%, color-mix(in srgb,var(--amber) 24%, transparent), transparent 70%); filter:blur(26px); } [data-theme="dark"] .hero__stage.has-ribbon::before{ background: radial-gradient(42% 62% at 32% 50%, color-mix(in srgb,var(--plum) 60%, transparent), transparent 72%), radial-gradient(42% 62% at 68% 50%, color-mix(in srgb,var(--amber) 46%, transparent), transparent 72%); filter:blur(34px); } .hero__stage.has-ribbon .hero__stage-fallback{opacity:0; pointer-events:none; transition:opacity .4s var(--ease-out);} /* One caption per orb, centered under it, shown only while that orb speaks. */ .ribbon-caption{ position:absolute; bottom:5%; margin:0; padding:11px 16px; text-align:left; z-index:4; width:max-content; max-width:30%; font-size:14px; font-weight:500; line-height:1.5; color:var(--ink-2); pointer-events:none; background:color-mix(in srgb,var(--paper) 80%, transparent); border:1px solid var(--hairline); border-radius:var(--r-lg); backdrop-filter:saturate(140%) blur(8px); opacity:0; transform:translateX(-50%) translateY(8px); transition:opacity .4s var(--ease-out), transform .4s var(--ease-out); } .ribbon-caption.show{opacity:1; transform:translateX(-50%) translateY(0);} .ribbon-caption--you{ left:64%; border-color:color-mix(in srgb,var(--plum) 40%, var(--hairline)); } .ribbon-caption--them{ left:84%; border-color:color-mix(in srgb,var(--amber) 44%, var(--hairline)); } .ribbon-caption .cap-who{font-weight:700; margin-right:5px;} .ribbon-caption--you .cap-who{ color:var(--plum); } .ribbon-caption--them .cap-who{ color:var(--amber-deep); } [data-theme="dark"] .ribbon-caption--them .cap-who{ color:var(--amber); } .ribbon-caption .cap-arrow{color:var(--ink-4); font-weight:500; margin-right:4px;} .hero__stage-fallback{width:100%; display:flex; justify-content:center;} @media (max-width:900px){ /* Stack cleanly on mobile: copy on top, orbs as a band below (no overlap). */ .hero{display:block; min-height:0;} .hero__copy{max-width:none;} .hero__stage, .hero__stage.has-ribbon{ position:relative; inset:auto; width:auto; height:auto; min-height:330px; margin-top:10px; z-index:0; display:flex; align-items:center; justify-content:center; } .hero__stage.has-ribbon::after{display:none;} /* Narrow band: only one orb speaks at a time, so center the active caption. */ .ribbon-caption{bottom:3%; font-size:12.5px; padding:9px 13px;} .ribbon-caption--you, .ribbon-caption--them{left:50%; max-width:90%;} .voicebar{max-width:none;} } /* ========================================================================= SITE POLISH — stats strip, iconography, micro-interactions, motion. ========================================================================= */ /* ---- Stats / trust strip ---- */ .trust{text-align:center;} .stats{ list-style:none; margin:0 auto 18px; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:18px 52px; max-width:780px; } .stats li{display:flex; flex-direction:column; align-items:center; gap:3px;} .stats b{ font-size:clamp(28px,3.6vw,42px); font-weight:600; letter-spacing:var(--track-tighter); color:var(--plum); line-height:1; font-feature-settings:"tnum"; } .stats span{font-size:12.5px; letter-spacing:var(--track-cap); text-transform:uppercase; color:var(--ink-4);} .trust__by{font-size:14px; color:var(--ink-4); margin:0; max-width:640px; margin-inline:auto;} .trust__by strong{color:var(--ink-3); font-weight:600;} /* ---- Mode card icons (chips) + hover accent ---- */ .mode-card{position:relative; overflow:hidden;} .mode-card__icon{ display:grid; place-items:center; width:52px; height:52px; margin-bottom:18px; line-height:0; border-radius:var(--r-lg); background:var(--paper); border:1px solid var(--hairline); color:var(--ink-2); transition:transform .25s var(--ease-out), background .25s, color .25s, border-color .25s; } .mode-card__icon svg{width:26px; height:26px;} .mode-card[data-tone="plum"] .mode-card__icon{color:var(--plum); background:var(--plum-soft); border-color:var(--plum-edge);} .mode-card[data-tone="ink"] .mode-card__icon{color:var(--ink); background:var(--paper-3);} .mode-card[data-tone="danger"] .mode-card__icon{color:var(--danger); background:color-mix(in srgb,var(--danger) 12%, transparent); border-color:color-mix(in srgb,var(--danger) 26%, transparent);} .mode-card:hover .mode-card__icon{transform:translateY(-2px) scale(1.06);} .mode-card::after{ content:""; position:absolute; right:-28%; top:-42%; width:62%; height:82%; border-radius:50%; pointer-events:none; background:radial-gradient(circle, color-mix(in srgb,var(--plum) 13%, transparent), transparent 70%); opacity:0; transition:opacity .3s var(--ease-out); } .mode-card[data-tone="danger"]::after{background:radial-gradient(circle, color-mix(in srgb,var(--danger) 12%, transparent), transparent 70%);} .mode-card:hover::after{opacity:1;} /* ---- Privacy card icons + hover ---- */ .priv-card header{display:flex; align-items:center; justify-content:flex-start; gap:12px;} .priv-card__tag{margin-right:auto;} .priv-card__icon{ display:grid; place-items:center; width:40px; height:40px; flex:0 0 auto; line-height:0; border-radius:var(--r-md); background:var(--plum-soft); color:var(--plum); border:1px solid var(--plum-edge); } .priv-card__icon svg{width:22px; height:22px;} .priv-card__icon--vault{background:var(--vault-soft); color:var(--vault); border-color:color-mix(in srgb,var(--vault) 28%, transparent);} .priv-card{transition:transform .35s var(--ease-out), border-color .3s var(--ease-out), box-shadow .35s var(--ease-out);} .priv-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-2);} .priv-card__icon{transition:transform .35s var(--ease-out);} .priv-card:hover .priv-card__icon{transform:translateY(-2px) scale(1.06);} /* ---- Primary button gets a nudging arrow ---- */ .btn--primary{gap:8px;} .btn--primary::after{content:"→"; font-size:1.02em; line-height:1; transition:transform .2s var(--ease-out);} .btn--primary:hover::after{transform:translateX(3px);} /* ---- Nav: scroll shadow + link underline grow ---- */ .nav{transition:box-shadow .25s var(--ease-out), background .25s var(--ease-out);} .nav--scrolled{ background:color-mix(in srgb, var(--paper-2) 92%, transparent); box-shadow:0 3px 12px -2px rgba(14,17,22,.12), 0 26px 50px -24px rgba(14,17,22,.30); } [data-theme="dark"] .nav--scrolled{box-shadow:0 3px 12px -2px rgba(0,0,0,.55), 0 26px 50px -24px rgba(0,0,0,.75);} /* Active link = animated plum underline (dialed down from the lozenge). */ .nav__links a:not(.btn).is-active{color:var(--ink);} /* ---- Steps + case rows: hover micro-interactions ---- */ .step{transition:transform .35s var(--ease-out), border-top-color .3s var(--ease-out);} .step:hover{transform:translateY(-3px); border-top-color:var(--plum-edge);} /* Smooth row hover: a soft panel eases in + content glides over — no layout reflow. (The old version animated padding, which reflowed the text and looked jittery.) */ .case{position:relative;} .case > *{position:relative; z-index:1; transition:transform .45s var(--ease-out), color .3s var(--ease-out);} .case::before{ content:""; position:absolute; inset:-4px -20px; z-index:0; pointer-events:none; background:var(--paper-2); border-radius:var(--r-xl); opacity:0; transform:scale(.98); transition:opacity .45s var(--ease-out), transform .45s var(--ease-out); } .case:hover::before{opacity:1; transform:scale(1);} .case:hover > *{transform:translateX(7px);} .case:hover .case__kicker{color:var(--plum-deep);} /* Fix grid auto-flow: keep headline + body together in the wide column (desktop only). */ @media (min-width:901px){ .case h3, .case p{grid-column:2;} } /* ---- Entrance: blur-fade-rise (on top of the existing reveal) ---- */ .reveal{filter:blur(8px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out);} .reveal.in{filter:blur(0);} @media (max-width:560px){ .stats{gap:14px 30px;} } @media (prefers-reduced-motion:reduce){ .reveal{filter:none;} } /* ---- Languages section (flag grid) ---- */ .langs .section-head{margin-bottom:44px;} .lang-grid{ list-style:none; margin:0 auto; padding:0; max-width:940px; display:grid; grid-template-columns:repeat(auto-fit, minmax(128px, 1fr)); gap:14px; } .lang{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; padding:18px 12px; border-radius:var(--r-lg); background:var(--paper-2); border:1px solid var(--hairline); transition:transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s var(--ease-out); } .lang:hover{transform:translateY(-4px); border-color:var(--plum-edge); box-shadow:var(--shadow-2); background:var(--paper);} .lang__flag{ width:42px; height:auto; display:block; border-radius:4px; box-shadow:0 1px 3px rgba(14,17,22,.2); outline:1px solid color-mix(in srgb,var(--ink) 8%, transparent); outline-offset:-1px; } .lang__name{font-size:14px; font-weight:500; color:var(--ink-2);} .langs__more{text-align:center; margin:34px auto 0; color:var(--ink-3); font-size:17px;} .langs__more strong{color:var(--plum); font-weight:600;} @media (max-width:560px){ .lang-grid{grid-template-columns:repeat(auto-fit, minmax(98px,1fr)); gap:10px;} .lang{padding:14px 8px;} .lang__flag{width:34px;} } /* Flag images in hero chips + pills (emoji flags don't render on Windows/Chromium) */ .vchip img.flag, .phrase img.flag{ width:20px; height:auto; border-radius:2px; display:inline-block; box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 12%, transparent); } .phrase{display:inline-flex; align-items:center; gap:7px;} .phrase img.flag{width:18px;} /* ---- "Hear it" sound toggle ---- */ .sound-toggle{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; background:var(--paper-2); border:1px solid var(--hairline); border-radius:var(--r-pill); padding:8px 15px; transition:border-color .2s var(--ease-out), background .2s, color .2s, transform .15s, box-shadow .2s; } .sound-toggle:hover{border-color:var(--plum-edge); color:var(--ink); transform:translateY(-1px);} .sound-toggle:focus-visible{outline:none; box-shadow:0 0 0 4px var(--plum-soft);} .sound-toggle.is-on{background:var(--plum); color:#fff; border-color:var(--plum); box-shadow:var(--shadow-mic);} .sound-toggle__icon{font-size:14px; line-height:1;} /* ---- Scenario tabs ---- */ .scenariobar{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px;} .scenario{ font-size:13px; font-weight:500; color:var(--ink-3); cursor:pointer; background:transparent; border:1px solid var(--hairline); border-radius:var(--r-pill); padding:6px 13px; transition:border-color .2s var(--ease-out), background .2s, color .2s, transform .15s; } .scenario:hover{border-color:var(--plum-edge); color:var(--ink); transform:translateY(-1px);} .scenario:focus-visible{outline:none; box-shadow:0 0 0 4px var(--plum-soft);} .scenario.is-active{background:var(--plum-soft); color:var(--plum); border-color:var(--plum-edge); font-weight:600;} /* ---- Flag language dropdowns ---- */ .langpick{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;} .lang-select{position:relative;} .lang-select__btn{ display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--ink); cursor:pointer; background:var(--paper-2); border:1px solid var(--hairline); border-radius:var(--r-pill); padding:9px 14px; transition:border-color .2s var(--ease-out), background .2s, box-shadow .2s; } .lang-select__btn:hover{border-color:var(--plum-edge);} .lang-select__btn:focus-visible{outline:none; box-shadow:0 0 0 4px var(--plum-soft);} .lang-select.open .lang-select__btn{border-color:var(--plum-edge); box-shadow:var(--shadow-2);} .lang-select__cur{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;} .lang-select__cur b{font-weight:600;} .lang-select__chev{color:var(--ink-4); font-size:11px; transition:transform .2s var(--ease-out);} .lang-select.open .lang-select__chev{transform:rotate(180deg);} .lang-select__menu{ list-style:none; margin:8px 0 0; padding:6px; position:absolute; z-index:30; left:0; top:100%; min-width:200px; max-height:300px; overflow-y:auto; background:color-mix(in srgb, var(--paper) 80%, transparent); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); border:1px solid color-mix(in srgb,#fff 50%, transparent); border-radius:var(--r-xl); box-shadow:0 18px 48px -16px rgba(14,17,22,.3), inset 0 1px 0 rgba(255,255,255,.7); } [data-theme="dark"] .lang-select__menu{ background:color-mix(in srgb, var(--paper-2) 78%, transparent); border-color:color-mix(in srgb,#fff 14%, transparent); box-shadow:0 18px 48px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); } .lang-opt{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; font-size:14px; color:var(--ink-2); background:none; border:none; border-radius:var(--r-md); padding:8px 10px; cursor:pointer; } .lang-opt:hover, .lang-opt:focus-visible{background:var(--paper-2); color:var(--ink); outline:none;} .lang-opt.is-sel{background:var(--plum-soft); color:var(--plum); font-weight:600;} .langpick__swap{ width:36px; height:36px; flex:0 0 auto; border-radius:var(--r-pill); border:1px solid var(--hairline); background:var(--paper); color:var(--plum); font-size:16px; display:grid; place-items:center; cursor:pointer; transition:transform .35s var(--ease-out), border-color .2s, background .2s; } .langpick__swap:hover{border-color:var(--plum-edge); background:var(--plum-soft); transform:rotate(180deg);} .langpick__swap:focus-visible{outline:none; box-shadow:0 0 0 4px var(--plum-soft);} .lang-select .flag, .lang-opt .flag{width:20px; height:auto; border-radius:2px; box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 12%, transparent);} /* ========================================================================= COMPONENT POLISH PASS v13 — informed by Mobbin refs (Arcade/Lovable/Dialpad announcement pills, Hers/Claude card accents, Chatbase trusted-by, OpenTable/ Kickstarter footers). Brand-true: warm paper, one plum accent, no candy wash. ========================================================================= */ /* ---- Announcement badge (replaces the plain hero eyebrow) ---- */ .badge{ display:inline-flex; align-items:center; gap:9px; margin:0 0 22px; padding:6px 7px 6px 13px; border-radius:var(--r-pill); background:var(--paper-2); border:1px solid var(--hairline); box-shadow:var(--shadow-1); font-size:13px; font-weight:600; color:var(--ink-2); letter-spacing:var(--track-tight); transition:border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out); } .badge:hover{border-color:var(--plum-edge); transform:translateY(-1px); box-shadow:var(--shadow-2);} .badge:focus-visible{outline:none; box-shadow:0 0 0 4px var(--plum-soft);} .badge__dot{ width:8px; height:8px; border-radius:50%; background:var(--plum); flex:0 0 auto; animation:badgePulse 2.6s var(--ease-out) infinite; } @keyframes badgePulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--plum) 55%, transparent);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} } .badge__arrow{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--plum-soft); color:var(--plum); font-size:12px; flex:0 0 auto; transition:transform .2s var(--ease-out); } .badge:hover .badge__arrow{transform:translateX(2px);} @media (prefers-reduced-motion:reduce){ .badge__dot{animation:none;} } /* ---- Secondary / ghost button + shared button polish ---- */ .btn--ghost{background:var(--paper-2); color:var(--ink); border:1px solid var(--hairline); box-shadow:none;} .btn--ghost:hover{border-color:var(--plum-edge); background:var(--paper); transform:translateY(-1px);} .btn--ghost::after{content:none;} .btn:active{transform:translateY(0) scale(.985);} .btn:focus-visible{outline:none; box-shadow:0 0 0 4px var(--plum-soft);} /* ---- Nav: mobile burger + slide-down panel + desktop/mobile CTA swap ---- */ .nav{position:sticky;} /* (already sticky — kept explicit so the mobile panel anchors here) */ .nav__links-cta{display:none;} /* shown only inside the mobile panel */ .nav__burger{ display:none; width:40px; height:40px; flex:0 0 auto; position:relative; border:1px solid var(--hairline); border-radius:var(--r-md); background:var(--paper-2); transition:border-color .2s var(--ease-out); } .nav__burger:hover{border-color:var(--plum-edge);} .nav__burger:focus-visible{outline:none; box-shadow:0 0 0 4px var(--plum-soft);} .nav__burger span{ position:absolute; left:50%; width:18px; height:2px; border-radius:2px; background:var(--ink-2); transform:translateX(-50%); transition:transform .25s var(--ease-out), opacity .2s var(--ease-out); } .nav__burger span:nth-child(1){top:13px;} .nav__burger span:nth-child(2){top:19px;} .nav__burger span:nth-child(3){top:25px;} .nav.menu-open .nav__burger span:nth-child(1){transform:translateX(-50%) translateY(6px) rotate(45deg);} .nav.menu-open .nav__burger span:nth-child(2){opacity:0;} .nav.menu-open .nav__burger span:nth-child(3){transform:translateX(-50%) translateY(-6px) rotate(-45deg);} /* ---- Mode cards: tone-colored top accent (Hers/Claude) ---- */ .mode-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:1; opacity:.5; transition:opacity .25s var(--ease-out); } .mode-card[data-tone="plum"]::before{background:var(--plum);} .mode-card[data-tone="ink"]::before{background:var(--ink-2);} .mode-card[data-tone="danger"]::before{background:var(--danger);} .mode-card:hover::before{opacity:1;} /* ---- Trust strip: "Powered by" wordmark row ---- */ .trust__by{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 16px; margin:0; } .trust__by-label{font-size:12px; letter-spacing:var(--track-cap); text-transform:uppercase; color:var(--ink-4);} .wordmark{font-size:15px; font-weight:600; color:var(--ink-2); letter-spacing:var(--track-tight);} .wordmark--muted{font-weight:500; color:var(--ink-4);} .trust__by-sep{width:4px; height:4px; border-radius:50%; background:var(--ink-4); opacity:.45; flex:0 0 auto;} /* ---- Footer: utility bottom bar + back-to-top ---- */ .footer__bar{ grid-column:1/-1; border-top:1px solid var(--hairline); padding-top:22px; margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .footer__legal{margin:0; padding:0; border:none; color:var(--ink-4); font-size:13px; line-height:1.6; max-width:none;} .footer__top{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; font-size:13px; font-weight:600; color:var(--ink-3); border:1px solid var(--hairline); border-radius:var(--r-pill); padding:8px 14px; transition:border-color .2s var(--ease-out), color .2s, transform .2s var(--ease-out); } .footer__top:hover{border-color:var(--plum-edge); color:var(--plum); transform:translateY(-1px);} .footer__top:focus-visible{outline:none; box-shadow:0 0 0 4px var(--plum-soft);} /* ---- Mobile nav (overrides the earlier `.nav__links{display:none}`) ---- */ @media (max-width:900px){ .nav__cta{display:none;} .nav__burger{display:block;} .nav__actions{margin-left:auto;} /* links go out of flow here, so push actions to the right */ /* Mobile menu: its own floating rounded card just below the pill. */ .nav__links{ display:flex; flex-direction:column; align-items:stretch; gap:2px; position:absolute; top:calc(100% + 8px); left:0; right:0; margin:0; padding:10px; background:color-mix(in srgb, var(--paper-2) 96%, transparent); backdrop-filter:saturate(150%) blur(16px); border:1px solid var(--hairline); border-radius:var(--r-xl); box-shadow:var(--shadow-2); opacity:0; transform:translateY(-10px); pointer-events:none; transition:opacity .25s var(--ease-out), transform .25s var(--ease-out); } .nav.menu-open .nav__links{opacity:1; transform:none; pointer-events:auto;} .nav__links a:not(.btn){font-size:16px; padding:13px 14px; color:var(--ink-2);} .nav__links a:not(.btn)::after{display:none;} .nav__links a:not(.btn).is-active{color:var(--plum);} .nav__links-cta{display:inline-flex; justify-content:center; margin-top:8px;} } /* ========================================================================= LIQUID GLASS (iOS 26) — glassy nav controls + bulbous glossy buttons. ========================================================================= */ .nav .theme-toggle, .nav .nav__burger, .nav .lang-globe__btn{ background:linear-gradient(180deg, color-mix(in srgb,#fff 42%, transparent), color-mix(in srgb,#fff 20%, transparent)); border:1px solid color-mix(in srgb,#fff 50%, transparent); -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%); box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 2px 6px -2px rgba(14,17,22,.16); } .nav .theme-toggle:hover, .nav .nav__burger:hover, .nav .lang-globe__btn:hover{border-color:color-mix(in srgb,#fff 72%, transparent);} [data-theme="dark"] .nav .theme-toggle, [data-theme="dark"] .nav .nav__burger, [data-theme="dark"] .nav .lang-globe__btn{ background:linear-gradient(180deg, color-mix(in srgb,#fff 12%, transparent), color-mix(in srgb,#fff 5%, transparent)); border-color:color-mix(in srgb,#fff 16%, transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 2px 6px -2px rgba(0,0,0,.5); } /* ---- Nav language globe: circular glass flag picker (matches the nav surface) ---- */ .lang-globe{position:relative; flex:0 0 auto;} .lang-globe__btn{ width:54px; height:54px; border-radius:50%; padding:0; cursor:pointer; display:grid; place-items:center; background:linear-gradient(180deg, color-mix(in srgb, var(--paper) 46%, transparent), color-mix(in srgb, var(--paper) 22%, transparent)); -webkit-backdrop-filter:blur(20px) saturate(185%); backdrop-filter:blur(20px) saturate(185%); border:1px solid color-mix(in srgb,#fff 55%, transparent); box-shadow:0 8px 24px -10px rgba(14,17,22,.18), 0 30px 60px -28px rgba(14,17,22,.28), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -10px 22px -14px rgba(255,255,255,.5); transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out); } .lang-globe__btn:hover{transform:translateY(-1px);} .lang-globe__btn:focus-visible{outline:none; box-shadow:0 0 0 4px var(--plum-soft);} [data-theme="dark"] .lang-globe__btn{ background:linear-gradient(180deg, color-mix(in srgb, var(--paper-2) 58%, transparent), color-mix(in srgb, var(--paper-2) 30%, transparent)); border-color:color-mix(in srgb,#fff 14%, transparent); box-shadow:0 8px 24px -10px rgba(0,0,0,.55), 0 30px 60px -28px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.16); } .lang-globe__flag{ width:34px; height:34px; border-radius:50%; object-fit:cover; display:block; box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 14%, transparent), inset 0 1px 1px rgba(255,255,255,.4); } @media (max-width:900px){ .topbar{gap:10px;} .lang-globe__btn{width:46px; height:46px;} .lang-globe__flag{width:28px; height:28px;} } /* ---- Small, soft scrollbar for the dropdown menus (keeps all corners rounded) ---- The thumb floats inside a transparent track (3px transparent border + padding-box), so it never squares off the menu's rounded corners. */ .lang-globe__menu, .lang-select__menu{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--ink) 26%, transparent) transparent; overscroll-behavior:contain; } .lang-globe__menu::-webkit-scrollbar, .lang-select__menu::-webkit-scrollbar{width:11px;} /* Kill the up/down arrow buttons at the ends of the scrollbar (Chromium shows them by default). */ .lang-globe__menu::-webkit-scrollbar-button, .lang-select__menu::-webkit-scrollbar-button{display:none; width:0; height:0;} .lang-globe__menu::-webkit-scrollbar-track, .lang-select__menu::-webkit-scrollbar-track{background:transparent; margin:6px 0;} .lang-globe__menu::-webkit-scrollbar-thumb, .lang-select__menu::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--ink) 26%, transparent); border-radius:var(--r-pill); border:3px solid transparent; background-clip:padding-box; min-height:28px; } .lang-globe__menu::-webkit-scrollbar-thumb:hover, .lang-select__menu::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--ink) 40%, transparent); background-clip:padding-box; } /* Round checkboxes — no square boxes in a soft, round UI. */ .waitlist-extra input[type="checkbox"]{ appearance:none; -webkit-appearance:none; position:relative; box-sizing:border-box; width:19px; height:19px; flex:0 0 19px; aspect-ratio:1/1; min-width:0; border-radius:50%; border:1.5px solid var(--hairline); background:var(--paper-2); margin:0; padding:0; cursor:pointer; transition:background .15s var(--ease-out), border-color .15s var(--ease-out); } .waitlist-extra input[type="checkbox"]:hover{border-color:var(--plum-edge);} .waitlist-extra input[type="checkbox"]:checked{background:var(--plum); border-color:var(--plum);} .waitlist-extra input[type="checkbox"]:checked::after{ content:""; position:absolute; left:50%; top:46%; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:translate(-50%,-50%) rotate(45deg); } .waitlist-extra input[type="checkbox"]:focus-visible{outline:none; box-shadow:0 0 0 4px var(--plum-soft);} .lang-globe__menu{ position:absolute; right:0; top:calc(100% + 12px); z-index:60; margin:0; padding:6px; list-style:none; min-width:184px; max-height:340px; overflow:auto; background:color-mix(in srgb, var(--paper) 80%, transparent); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); border:1px solid color-mix(in srgb,#fff 50%, transparent); border-radius:var(--r-xl); box-shadow:0 18px 48px -16px rgba(14,17,22,.3), inset 0 1px 0 rgba(255,255,255,.7); opacity:0; transform:translateY(-8px) scale(.98); transform-origin:top right; pointer-events:none; transition:opacity .22s var(--ease-out), transform .22s var(--ease-out); } .lang-globe.open .lang-globe__menu{opacity:1; transform:none; pointer-events:auto;} [data-theme="dark"] .lang-globe__menu{ background:color-mix(in srgb, var(--paper-2) 78%, transparent); border-color:color-mix(in srgb,#fff 14%, transparent); box-shadow:0 18px 48px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); } .lang-globe__opt{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer; font-size:14px; color:var(--ink-2); background:none; border:none; border-radius:var(--r-md); padding:8px 10px; transition:background .15s var(--ease-out), color .15s var(--ease-out); } .lang-globe__opt:hover, .lang-globe__opt:focus-visible{background:color-mix(in srgb,var(--ink) 6%, transparent); color:var(--ink); outline:none;} .lang-globe__opt.is-sel{background:var(--plum-soft); color:var(--plum); font-weight:600;} .lang-globe__opt img{width:22px; height:15px; border-radius:3px; box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 12%, transparent);} /* ---- Smooth FAQ expand/collapse (JS-driven height; .js gates the collapsed state) ---- */ .js .faq-list details p{ height:0; overflow:hidden; opacity:0; transition:height .34s var(--ease-out), opacity .3s var(--ease-out); } .faq-list details p{margin:0; padding-bottom:22px;} .faq__plus::before, .faq__plus::after{transition:transform .3s var(--ease-out), opacity .3s var(--ease-out);} /* Bulbous "liquid" sheen on primary buttons — top specular + soft bottom depth. */ .btn--primary{ background:linear-gradient(180deg, color-mix(in srgb,var(--plum) 86%, #fff), var(--plum) 52%, var(--plum-deep)); box-shadow:var(--shadow-mic), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -7px 14px -9px rgba(0,0,0,.28); } .btn--primary:hover{background:linear-gradient(180deg, color-mix(in srgb,var(--plum) 78%, #fff), var(--plum-deep));} /* ===================== ENTRANCE ANIMATION ===================== */ /* While the overlay is up, lock scroll so the page can't peek underneath. */ html.intro-lock, html.intro-lock body { overflow: hidden; } /* Repeat visits / reduced-motion: never mount the overlay at all (no flash). */ html.intro-skip .intro { display: none !important; } .intro { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #fff; opacity: 1; transition: opacity .65s ease; } .intro.is-leaving { opacity: 0; pointer-events: none; } .intro__video { width: min(80vmin, 660px); height: min(80vmin, 660px); object-fit: cover; /* Feather the 1:1 square edges into the white background — radial fade-out. */ -webkit-mask-image: radial-gradient(circle at center, #000 54%, rgba(0,0,0,0) 73%); mask-image: radial-gradient(circle at center, #000 54%, rgba(0,0,0,0) 73%); } .intro__skip { position: absolute; bottom: clamp(20px, 5vh, 48px); left: 50%; transform: translateX(-50%); padding: 9px 20px; font: 500 13px/1 var(--font-sans, system-ui, sans-serif); letter-spacing: .02em; color: color-mix(in srgb, var(--ink, #1c1726) 56%, transparent); background: color-mix(in srgb, var(--ink, #1c1726) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ink, #1c1726) 12%, transparent); border-radius: 999px; cursor: pointer; opacity: 0; transition: opacity .4s ease .9s, background .2s ease, color .2s ease; } .intro__skip:hover { color: var(--ink, #1c1726); background: color-mix(in srgb, var(--ink, #1c1726) 10%, transparent); } .intro:not(.is-leaving) .intro__skip { opacity: 1; } /* ========================================================================= v26 — Atmosphere & 3D. The "voices crossing the world" layer: hello marquee, voice globe, card tilt + glare, CTA aurora, split-word headlines, magnetic CTAs. Everything here is decorative — the page reads identically with all of it stripped (reduced motion / no WebGL). ========================================================================= */ /* ---- Hero headline: "cross over." carries a slow plum sheen ---- */ .hero__title em{ background:linear-gradient(105deg, var(--plum) 0%, var(--plum-deep) 34%, #B493F0 50%, var(--plum) 66%, var(--plum) 100%); background-size:240% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:em-sheen 7.5s var(--ease-out) infinite; } @keyframes em-sheen{0%,100%{background-position:0% 0;} 55%{background-position:100% 0;}} /* ---- Split-word headline reveal (spans injected by main.js) ---- */ h2.split .w{display:inline-block; overflow:hidden; vertical-align:bottom;} h2.split .w__i{ display:inline-block; transform:translateY(118%); transition:transform .85s var(--ease-out); transition-delay:calc(var(--wi, 0) * 60ms); } .reveal.in h2.split .w__i{transform:none;} /* ---- Hello marquee — two ghost ribbons of greetings drifting past each other ---- */ .hellos{ position:relative; overflow:hidden; pointer-events:none; user-select:none; padding:clamp(6px,1.4vw,14px) 0; margin:clamp(-8px,-1vw,0px) 0 clamp(-18px,-2vw,-6px); display:grid; gap:0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); } .hellos__row{ display:flex; width:max-content; white-space:nowrap; font-size:clamp(30px,5vw,54px); font-weight:600; letter-spacing:var(--track-tight); line-height:1.25; } .hellos__track{padding-right:.7em;} .hellos__track i{font-style:normal; color:color-mix(in srgb,var(--plum) 50%, transparent); -webkit-text-stroke:0; font-weight:300; font-size:.6em; vertical-align:.12em; padding:0 .25em;} .hellos__row--a{ color:transparent; -webkit-text-stroke:1px color-mix(in srgb,var(--ink) 34%, transparent); transform:rotate(.5deg); animation:hellos-drift 58s linear infinite; } .hellos__row--b{ color:color-mix(in srgb,var(--plum) 38%, transparent); transform:rotate(-.5deg); margin-top:-.55em; animation:hellos-drift 76s linear infinite reverse; } [data-theme="dark"] .hellos__row--a{-webkit-text-stroke-color:color-mix(in srgb,var(--ink) 26%, transparent);} [data-theme="dark"] .hellos__row--b{color:color-mix(in srgb,var(--plum) 44%, transparent);} @keyframes hellos-drift{to{transform:rotate(var(--tilt,.5deg)) translateX(-50%);}} .hellos__row--a{--tilt:.5deg;} .hellos__row--b{--tilt:-.5deg;} /* ---- Languages: copy + flag grid left, voice globe right ---- */ .langs__wrap{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,44px); align-items:center; max-width:var(--maxw); margin-inline:auto; } .langs .section-head--left{margin:0 0 36px; text-align:left;} .langs .section-head--left .section-lede{margin-left:0; margin-right:0;} .langs__copy .lang-grid{max-width:none;} .langs__copy .langs__more{text-align:left;} .langs__globe{ position:relative; width:100%; max-width:480px; aspect-ratio:1/1; margin-inline:auto; touch-action:pan-y; } .langs__globe::before{ /* soft halo so the globe sits in atmosphere, not on flat paper */ content:""; position:absolute; inset:15%; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--plum) 13%, transparent) 0%, color-mix(in srgb,var(--plum) 5%, transparent) 48%, transparent 72%); filter:blur(8px); } .langs__globe canvas{position:relative; width:100%; height:100%; display:block; cursor:grab;} .langs__globe canvas:active{cursor:grabbing;} .langs__globe.is-fallback{display:none;} @media (min-width:980px){ .langs__wrap{grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px);} .langs__globe{max-width:640px;} } /* ---- How-it-works: the top rule draws itself in, step by step ---- */ .step::after{ content:""; position:absolute; top:-2px; left:0; height:2px; width:100%; background:linear-gradient(90deg, var(--plum), color-mix(in srgb,var(--plum) 35%, transparent)); transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease-out); } .step.in::after{transform:scaleX(1);} .step[data-delay="1"].in::after{transition-delay:.28s;} .step[data-delay="2"].in::after{transition-delay:.56s;} @media (max-width:900px){ .step::after{top:-1px; height:1.5px;} } /* ---- Card tilt + pointer glare (mode & privacy cards; JS sets the vars) ---- */ .tiltable{ position:relative; transform:perspective(950px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .18s ease-out, border-color .3s var(--ease-out), box-shadow .35s var(--ease-out), background .3s var(--ease-out); } .tiltable:hover{ transform:perspective(950px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px); } .tiltable .glare{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,#fff 22%, transparent), transparent 58%); transition:opacity .3s var(--ease-out); } [data-theme="dark"] .tiltable .glare{ background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,#fff 9%, transparent), transparent 58%); } .tiltable:hover .glare{opacity:1;} /* ---- Primary buttons: a quiet lift on hover (no mouse-follow) ---- */ .btn--primary:hover{transform:translateY(-1px);} /* ---- CTA finale: slow aurora drifting behind the card ---- */ .cta__inner{position:relative; overflow:hidden;} .cta__inner > *{position:relative; z-index:1;} .cta__aurora{position:absolute; inset:-22%; z-index:0; pointer-events:none; filter:blur(48px); opacity:.6;} [data-theme="dark"] .cta__aurora{opacity:.5;} .cta__aurora i{position:absolute; border-radius:50%;} .cta__aurora i:nth-child(1){ width:52%; height:52%; left:-4%; top:-6%; background:radial-gradient(circle, color-mix(in srgb,var(--plum) 36%, transparent), transparent 70%); animation:aur-a 17s ease-in-out infinite alternate; } .cta__aurora i:nth-child(2){ width:46%; height:46%; right:-2%; bottom:-8%; background:radial-gradient(circle, color-mix(in srgb,#E7A95C 30%, transparent), transparent 70%); animation:aur-b 21s ease-in-out infinite alternate; } .cta__aurora i:nth-child(3){ width:36%; height:36%; left:36%; top:42%; background:radial-gradient(circle, color-mix(in srgb,var(--plum-deep) 26%, transparent), transparent 70%); animation:aur-c 25s ease-in-out infinite alternate; } @keyframes aur-a{from{transform:translate(0,0) scale(1);} to{transform:translate(26%,18%) scale(1.18);}} @keyframes aur-b{from{transform:translate(0,0) scale(1.1);} to{transform:translate(-22%,-16%) scale(.92);}} @keyframes aur-c{from{transform:translate(-8%,6%) scale(.9);} to{transform:translate(14%,-12%) scale(1.22);}} /* ---- Reduced motion: strip the decorative layer entirely ---- */ @media (prefers-reduced-motion:reduce){ .hero__title em{animation:none;} .hellos__row--a, .hellos__row--b{animation:none;} .cta__aurora i{animation:none;} .step::after{transition:none; transform:scaleX(1);} h2.split .w__i{transition:none; transform:none;} .tiltable{transform:none;} .btn--primary, .btn--primary:hover{transform:none;} }