/* ── Izuke waitlist (join.izuke.app) ───────────────────────────────────────── Tokens, type scale and component idioms mirror landing_page/izuke-styles.css so the two pages read as one brand. Kept standalone (no shared import) so this page can deploy independently of the main site. ────────────────────────────────────────────────────────────────────────── */ /* DARK IS THE SHIPPED THEME — index.html hardcodes . This :root block is the light palette, kept intact and deliberately unused so the design can be brought back by flipping that one attribute to "light". Every colour on the page resolves through a token in these two blocks, so neither theme needs a single per-component override. */ :root{ color-scheme: light; --ink:#1D1416; --red:#D62223; /* fills: buttons, logo mark, badges */ --red-ink:#D62223; /* red as TEXT — needs to lighten in dark */ --red-dark:#A81A1B; /* error text */ --river:#6B8F8C; --gold:#CB9C48; --blush:#F7DCD9; /* eyebrow pill background */ --paper:#FBF3EC; --card:#FFFFFF; --line: rgba(29,20,22,0.09); --on-red:#FFFFFF; /* Text ramp */ --text-2: rgba(29,20,22,0.65); /* body / secondary */ --text-3: rgba(29,20,22,0.5); /* notes, captions */ --text-4: rgba(29,20,22,0.38); /* placeholder */ --wordmark: rgba(29,20,22,0.05); --shadow: 29,20,22; /* rgb triplet for box-shadows */ --header-bg: rgba(251,243,236,0.85); --outline-hover-bg: rgba(255,255,255,0.6); /* Hero atmosphere */ --hero-wash: radial-gradient(64% 58% at 50% -12%, #F4D6A6 0%, rgba(244,214,166,0.34) 38%, rgba(244,214,166,0) 66%); --blob-op:.5; --blob-3-op:.34; --blob-1-bg: radial-gradient(circle, #F4D6A6 0%, rgba(244,214,166,0) 70%); --blob-2-bg: radial-gradient(circle, #F7DCD9 0%, rgba(247,220,217,0) 70%); --blob-3-bg: radial-gradient(circle, rgba(107,143,140,.5) 0%, rgba(107,143,140,0) 70%); } /* ── Dark (active) ─────────────────────────────────────────────────────────── A WARM near-black, not the app's #0E0E16. The app's dark palette pairs with its navy/pink light theme; this page is the izuke.app cream/red/Fraunces system, and a cool blue-black under warm gold and blush accents makes both look muddy. Same brand, different neutral spine. */ :root[data-theme="dark"]{ color-scheme: dark; --ink:#F3EBE4; --red:#DD3A33; --red-ink:#FF8177; --red-dark:#FF8D82; --river:#8FB3AF; --blush: rgba(214,34,35,0.17); --paper:#141010; --card:#1E1817; --line: rgba(243,235,228,0.11); --on-red:#FFFFFF; --text-2: rgba(243,235,228,0.68); --text-3: rgba(243,235,228,0.5); --text-4: rgba(243,235,228,0.34); --wordmark: rgba(243,235,228,0.05); --shadow: 0,0,0; --header-bg: rgba(20,16,16,0.82); --outline-hover-bg: rgba(255,255,255,0.05); --hero-wash: radial-gradient(64% 58% at 50% -12%, rgba(203,156,72,0.20) 0%, rgba(203,156,72,0.07) 38%, rgba(203,156,72,0) 66%); --blob-op:.32; --blob-3-op:.24; --blob-1-bg: radial-gradient(circle, rgba(203,156,72,.55) 0%, rgba(203,156,72,0) 70%); --blob-2-bg: radial-gradient(circle, rgba(214,34,35,.45) 0%, rgba(214,34,35,0) 70%); --blob-3-bg: radial-gradient(circle, rgba(107,143,140,.45) 0%, rgba(107,143,140,0) 70%); } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ background:var(--paper); color:var(--ink); font-family:'Work Sans', sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; /* The page is short — pin the footer to the bottom on tall screens. */ min-height:100vh; display:flex; flex-direction:column; } main{flex:1;} h1,h2,h3,.display{ font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.015em; } a{color:inherit; text-decoration:none;} img,svg{max-width:100%; display:block;} .wrap{max-width:1240px; margin:0 auto; padding:0 32px;} .rule{ height:1px; background:var(--line); max-width:1240px; margin:0 auto; } .rule.wrap-inset{ margin:0 32px; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--red); color:var(--on-red); padding:15px 28px; border-radius:100px; font-family:'Work Sans', sans-serif; font-weight:700; font-size:15px; border:none; cursor:pointer; white-space:nowrap; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; box-shadow:0 8px 20px rgba(214,34,35,0.28); } .btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(214,34,35,0.35); } .btn:focus-visible{ outline:2.5px solid var(--river); outline-offset:3px; } .btn:disabled{ opacity:.62; cursor:not-allowed; transform:none; box-shadow:none; } .btn-outline{ display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:100px; padding:11px 20px; font-family:'Work Sans', sans-serif; font-weight:600; font-size:13.5px; cursor:pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; } .btn-outline:hover{ border-color:rgba(214,34,35,0.4); color:var(--red-ink); background:var(--outline-hover-bg); } .btn-outline:focus-visible{ outline:2.5px solid var(--river); outline-offset:3px; } .eyebrow{ font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:var(--red-ink); } /* ── Header ───────────────────────────────────────────────────────────────── */ header{ position:sticky; top:0; z-index:50; background:var(--header-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; } .logo{ display:flex; align-items:center; gap:10px; } /* The mark is the interlocking chain on its own — no container, no fill behind. Lifted slightly in dark mode: brand red on a near-black page reads muddy at logo scale, and a flat-colour PNG can't follow the --red token. */ .logo-mark{ display:flex; align-items:center; justify-content:center; flex-shrink:0; } .logo-mark img{ width:42px; height:auto; } :root[data-theme="dark"] .logo-mark img{ filter:brightness(1.22) saturate(1.02); } .logo-word{ font-family:'Fraunces', serif; font-size:20px; font-weight:600; } /* ── Hero ─────────────────────────────────────────────────────────────────── */ .hero{ padding:88px 0 72px; position:relative; overflow:hidden; /* Same warm gold wash as izuke.app, re-centred for a single-column page. */ background:var(--hero-wash); } .hero-inner{ max-width:720px; text-align:center; position:relative; z-index:2; } /* ── Flowing hero background ──────────────────────────────────────────────── */ /* Everything here animates transform/opacity only, so it stays on the compositor and never triggers layout. */ .hero-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; } .blob{ position:absolute; display:block; border-radius:50%; filter:blur(70px); opacity:var(--blob-op); will-change:transform; } .blob-1{ width:620px; height:620px; top:-320px; left:-140px; background:var(--blob-1-bg); animation:drift-1 26s ease-in-out infinite; } .blob-2{ width:520px; height:520px; top:-180px; right:-160px; background:var(--blob-2-bg); animation:drift-2 32s ease-in-out infinite; } .blob-3{ width:460px; height:460px; bottom:-260px; left:38%; background:var(--blob-3-bg); animation:drift-3 38s ease-in-out infinite; opacity:var(--blob-3-op); } @keyframes drift-1{ 0%,100%{ transform:translate(0,0) scale(1); } 50% { transform:translate(90px,60px) scale(1.14); } } @keyframes drift-2{ 0%,100%{ transform:translate(0,0) scale(1); } 50% { transform:translate(-80px,80px) scale(1.1); } } @keyframes drift-3{ 0%,100%{ transform:translate(0,0) scale(1); } 50% { transform:translate(-110px,-50px) scale(1.18); } } /* GPS route that draws itself, with a runner-dot travelling the line. --len is the path's true length, measured in app.js so the line stays exactly in step with the dot (both run linearly over the same 14s). The literal here is only a fallback for the no-JS case. */ .route{ --len:1500; --route-op:.16; position:absolute; inset:0; width:100%; height:100%; color:var(--red-ink); /* Fading the whole layer in and out each cycle hides the loop restart. */ animation:route-cycle 14s linear infinite; } @keyframes route-cycle{ 0%{ opacity:0; } 9%{ opacity:var(--route-op); } 91%{ opacity:var(--route-op); } 100%{ opacity:0; } } .route-line{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:draw-route 14s linear infinite; } @keyframes draw-route{ from{ stroke-dashoffset:var(--len); } to { stroke-dashoffset:0; } } .route-dot{ opacity:.9; } /* ── Entrance ─────────────────────────────────────────────────────────────── */ /* --d staggers each element; set inline in the markup. */ .fade-in{ opacity:0; animation:fade-up .7s cubic-bezier(.22,.7,.28,1) both; animation-delay:var(--d,0s); } @keyframes fade-up{ from{ opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } } /* ── Scroll reveal (same idiom as izuke.app) ──────────────────────────────── */ .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; transition-delay:var(--d,0s); } .reveal.in{ opacity:1; transform:translateY(0); } .eyebrow-pill{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--red-ink); background:var(--blush); padding:7px 14px; border-radius:100px; margin-bottom:26px; } .eyebrow-pill .dot{ width:6px; height:6px; border-radius:50%; background:#3FB65F; animation:pulse 1.6s infinite; } @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} } .hero h1{ font-size:clamp(40px,5.4vw,62px); line-height:1.04; margin-bottom:20px; } .hero h1 em{ font-style:italic; color:var(--red-ink); } .lede{ font-size:17.5px; color:var(--text-2); max-width:520px; margin:0 auto 38px; } /* ── The form ─────────────────────────────────────────────────────────────── */ .join{ max-width:540px; margin:0 auto; } /* Input + button share one pill so the whole thing reads as a single control. */ .join-field{ display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:100px; padding:7px 7px 7px 24px; box-shadow:0 18px 40px -22px rgba(var(--shadow),0.42); transition: border-color .2s ease, box-shadow .2s ease; } .join-field:focus-within{ border-color:rgba(214,34,35,0.45); box-shadow:0 20px 44px -20px rgba(214,34,35,0.38); } .join-field input[type="email"]{ flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:'Work Sans', sans-serif; font-size:16px; color:var(--ink); padding:12px 0; } .join-field input[type="email"]::placeholder{ color:var(--text-4); } /* Honeypot — off-screen, never focusable. */ .cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; } .turnstile-holder{ display:flex; justify-content:center; margin-top:14px; } .turnstile-holder:empty{ margin:0; } .join-feedback{ min-height:20px; margin-top:12px; font-size:13.5px; font-weight:700; color:var(--red-dark); } .join-feedback:empty{ min-height:0; margin-top:0; } .join-note{ margin-top:16px; font-size:13px; color:var(--text-3); } /* ── Waitlist counter ─────────────────────────────────────────────────────── */ .count{ margin-top:24px; display:flex; align-items:center; justify-content:center; gap:11px; } /* An author `display` beats the UA's [hidden]{display:none}, so anything toggled via the hidden attribute needs this said explicitly. */ .count[hidden], .btn-outline[hidden]{ display:none; } .count-avatars{ display:flex; } .count-avatars span{ width:27px; height:27px; border-radius:50%; border:2px solid var(--paper); margin-left:-9px; display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-weight:600; font-size:11px; color:#fff; } .count-avatars span:first-child{ margin-left:0; } .av-river{ background:var(--river); } .av-gold { background:var(--gold); } .av-red { background:var(--red); } .count-text{ font-size:13.5px; color:var(--text-2); } .count-text b{ font-family:'Fraunces', serif; font-weight:600; font-size:16px; color:var(--ink); /* Fixed-width digits — otherwise the line jitters as the number counts up. */ font-variant-numeric:tabular-nums; display:inline-block; } /* Small settle when the count lands, and again on the +1 after signup. */ .count-text b.pop{ animation:count-pop .42s cubic-bezier(.3,1.4,.5,1); } @keyframes count-pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.16); } 100%{ transform:scale(1); } } /* ── Success state (replaces the form in place) ───────────────────────────── */ .join-success{ animation:rise .5s ease both; } @keyframes rise{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} } .success-mark{ width:56px; height:56px; border-radius:50%; background:var(--river); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; box-shadow:0 12px 26px -12px rgba(107,143,140,0.8); /* The tick follows the disc: white on the darker light-mode teal, near-black on the lighter dark-mode teal. */ color:#FFFFFF; } :root[data-theme="dark"] .success-mark{ color:#17110F; } .success-mark svg{ width:28px; height:28px; } .join-success h2{ font-size:30px; margin-bottom:10px; } .success-copy{ font-size:16px; color:var(--text-2); max-width:400px; margin:0 auto; } .success-copy strong{ color:var(--ink); font-weight:600; } .success-share{ margin-top:32px; padding-top:26px; border-top:1px solid var(--line); } .share-label{ display:block; font-family:'Fraunces', serif; font-style:italic; font-size:15px; color:var(--text-3); margin-bottom:14px; } .share-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } /* ── Proof row ────────────────────────────────────────────────────────────── */ .proof{ list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:12px 26px; margin-top:44px; } .proof li{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--text-2); } .proof svg{ width:17px; height:17px; color:var(--river); flex-shrink:0; } /* ── What happens next ────────────────────────────────────────────────────── */ .next{ padding:64px 0 72px; } .next .eyebrow{ display:block; text-align:center; margin-bottom:36px; } .steps{ list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; max-width:1000px; margin:0 auto; } .steps li{ background:var(--card); border:1px solid var(--line); border-radius:24px; padding:30px 28px; box-shadow:0 14px 32px -18px rgba(var(--shadow),0.18); } .step-num{ display:block; font-family:'Fraunces', serif; font-weight:600; font-size:15px; color:var(--red-ink); letter-spacing:0.04em; margin-bottom:14px; } .steps h3{ font-size:19px; margin-bottom:8px; } .steps p{ font-size:14.5px; color:var(--text-2); } /* ── Store badges ─────────────────────────────────────────────────────────── */ .store-badges{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:44px; } .store-badge{ display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:11px 18px 11px 14px; cursor:default; position:relative; box-shadow:0 10px 24px -16px rgba(var(--shadow),0.25); } .store-badge svg{ width:22px; height:22px; flex-shrink:0; } .store-badge .txt{ text-align:left; line-height:1.15; } .store-badge .txt .small{ font-size:10px; color:var(--text-3); display:block; } .store-badge .txt .big{ font-size:14.5px; font-weight:700; color:var(--ink); } .store-badge .soon-tag{ position:absolute; top:-9px; right:-8px; background:var(--red); color:var(--on-red); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; padding:3px 7px; border-radius:100px; } /* ── Footer ───────────────────────────────────────────────────────────────── */ footer{ background:var(--paper); color:var(--ink); padding:56px 0 0; overflow:hidden; border-top:1px solid var(--line); } .footer-row{ display:flex; justify-content:space-between; align-items:center; padding-bottom:36px; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:20px; } .footer-links{ display:flex; gap:26px; font-size:13.5px; flex-wrap:wrap; } .footer-links a{ opacity:0.6; } .footer-links a:hover{ opacity:1; color:var(--red-ink); } .footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:22px 0 8px; font-size:12.5px; color:var(--text-3); } .footer-wordmark{ font-family:'Fraunces', serif; font-weight:600; font-size:min(19vw,220px); line-height:0.8; color:var(--wordmark); text-align:center; margin-top:10px; user-select:none; letter-spacing:-0.02em; } /* ── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width:860px){ .steps{ grid-template-columns:1fr; } .steps li{ padding:24px 24px; } } @media (max-width:620px){ .wrap{ padding:0 20px; } /* Big blur radii are the expensive part on low-end phones — shrink the fields, drop the third, and let the route carry the motion. */ .blob{ filter:blur(50px); } .blob-1{ width:400px; height:400px; top:-220px; left:-120px; } .blob-2{ width:340px; height:340px; top:-140px; right:-120px; } .blob-3{ display:none; } .route{ --route-op:.12; } .rule.wrap-inset{ margin:0 20px; } .hero{ padding:56px 0 56px; } .hero h1{ font-size:clamp(34px,9vw,44px); } .lede{ font-size:16px; margin-bottom:30px; } /* Stack the composite field — full-width button is far easier to hit. */ .join-field{ flex-direction:column; align-items:stretch; gap:6px; border-radius:24px; padding:10px; } .join-field input[type="email"]{ padding:14px 16px; text-align:center; } .join-field .btn{ width:100%; padding:15px 20px; } .proof{ flex-direction:column; align-items:center; gap:12px; margin-top:36px; } .next{ padding:48px 0 56px; } .footer-row{ flex-direction:column; align-items:flex-start; } .footer-bottom{ flex-direction:column; gap:6px; } } /* ── Motion preferences ───────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .btn:hover{ transform:none; } /* Keep the colour fields as a static wash; drop the moving route entirely. (The SMIL dot is stopped in app.js — CSS can't reach it.) */ .route{ display:none; } .fade-in{ opacity:1; } }