/* giftwaves_next — one shared sheet, Giftwaves' warm paper language, Serenade's one-thing-per-screen simplicity. */ :root{ /* The pages are light, and they say so. Without this a phone set to dark paints the UA's own chrome dark inside them — the caret, the selection, the autofill wash on the checkout's email field — and Stripe's Payment Element inherits it and comes up dark inside a white card. */ color-scheme: light; --paper:#f4efe6; --card:#ffffff; --card-2:#faf7f1; /* Grey text, measured on the page it actually sits on (the paper, not white: #857d6e was 3.56 there and --faint was 2.26 — both carried real words, "Step 4 of 5", the section notes, the captions). These pass AA on paper AND on a card, and this audience skews older, which is the whole reason the mobile type goes up rather than down. */ --ink:#1a1814; --ink-2:#4a443c; --muted:#6b6459; --faint:#736b5d; --line:#e9e1d3; /* Two oranges, one job each. --accent is the brand's orange and stays the colour of links, icons and hover borders. --accent-btn is the same orange dark enough to carry WHITE TEXT: 16px bold is not "large text" under WCAG, so on #e2683a (3.35:1) every primary button in the product failed. Filled controls and selected states use the button orange; everything drawn on light keeps the bright one. */ --accent:#e2683a; --accent-press:#cf5a2f; --accent-ring:rgba(226,104,58,.28); --accent-btn:#c5501c; --accent-btn-press:#b4491a; /* the free/confirm green carried white text at 4.04:1 — same fix, one token */ --ok:#28794c; --ok-soft:#e7f1ea; --err:#c0432a; --err-soft:#fbeae5; --display:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; --body:"Manrope",system-ui,-apple-system,sans-serif; --r:12px; } *{box-sizing:border-box;margin:0;padding:0;} html{-webkit-text-size-adjust:100%;scroll-padding-bottom:170px;} body{font-family:var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.5;} h1,h2,h3,.disp{font-family:var(--display);letter-spacing:-.02em;} a{color:var(--accent);text-decoration:none;} a:hover{text-decoration:underline;} img{max-width:100%;display:block;} button{font-family:var(--body);} /* box chrome */ .back-home{display:none!important;position:fixed;top:16px;left:16px;z-index:50;display:inline-flex;align-items:center;gap:7px; padding:9px 16px;border-radius:999px;background:rgba(13,19,32,.72);border:1px solid rgba(61,114,201,.35); color:#b0a98e;text-decoration:none;font:600 14px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); transition:color .15s ease,border-color .15s ease,transform .15s ease;} .back-home:hover{color:#ede7d8;border-color:#3d72c9;transform:translateX(-2px);} /* header — FLAT EVERYWHERE BUT HOME (Mav, 16 Sept 2026). Through the funnel the wordmark simply sits at the top of the page, on the page's own background: no glass panel, no hairline under it, and no sticky bar sliding down the screen as you scroll. The homepage is the one place that still wants a real nav bar (it carries Sign in and a long scroll), so it opts back in with . */ header.top{position:relative;top:auto;z-index:40;background:transparent; -webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:none;} body.navbar header.top{position:sticky;top:0;background:rgba(244,239,230,.86); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);} .top-in{position:relative;height:56px;max-width:1060px;margin:0 auto;display:flex;align-items:center;justify-content:center;padding:0 20px;} .brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink);} .brand .mk{width:26px;height:26px;display:grid;place-items:center;flex:none;} .brand .mk img{width:100%;height:100%;object-fit:contain;} .top-right{position:absolute;right:20px;display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);font-weight:600;} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer; border-radius:999px;background:var(--accent-btn);color:#fff;font:800 16px var(--display);padding:14px 30px; transition:background .15s,transform .15s;text-decoration:none;} .btn:hover{background:var(--accent-btn-press);transform:translateY(-1px);text-decoration:none;} .btn.big{font-size:18px;padding:17px 40px;} .btn.ghost{background:transparent;color:var(--ink-2);border:1.5px solid var(--line);font-weight:700;} .btn.ghost:hover{background:var(--card);border-color:var(--faint);} /* soft = secondary action: the palette's sand gold — clearly a button, a supporting color so it never competes with the orange primary */ .btn.soft{background:#f3c98b;color:#4a3216;border:none;font-weight:800;box-shadow:0 2px 8px rgba(226,168,80,.28);} .btn.soft:hover{background:#eebd72;color:#3a2710;transform:translateY(-1px);} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;} .btn.free{background:var(--ok);} /* cards + fields */ .card{background:var(--card);border:1px solid var(--line);border-radius:16px;} .in{width:100%;border:1.5px solid var(--line);border-radius:var(--r);padding:13px 15px;font:600 16px var(--body);color:var(--ink);background:var(--card);} .in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);} textarea.in{min-height:120px;resize:vertical;line-height:1.55;} .lbl{display:block;font-weight:700;font-size:13.5px;margin-bottom:6px;} .other-in{max-width:420px;margin:18px auto 0;text-align:left;animation:fadeUp .35s ease both;} .hint{color:var(--muted);font-size:12.5px;margin-top:5px;} /* chips */ .chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;} .chip{border:1.5px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:999px; padding:10px 18px;font:700 15px var(--body);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s;} .chip:hover{border-color:var(--accent);} .chip.on{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff;box-shadow:0 4px 12px rgba(226,104,58,.35);transform:translateY(-1px);} /* emoji card grid (relationship / occasion) */ .egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;max-width:640px;margin:0 auto;} .ecard{border:1.5px solid var(--line);background:var(--card);border-radius:14px;padding:18px 8px 14px;text-align:center; cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;} .ecard .em{font-size:28px;display:block;} .ecard .t{font:700 14px var(--body);color:var(--ink-2);margin-top:6px;display:block;} .ecard:hover{border-color:var(--accent);} .ecard.on{border-color:var(--accent-btn);box-shadow:0 0 0 3px var(--accent-ring);transform:translateY(-2px);} .ecard.on .t{color:var(--ink);} /* wizard shell */ .wiz{max-width:660px;margin:0 auto;padding:40px 20px 200px;text-align:center;} .step-tag{font:800 12px var(--display);letter-spacing:.14em;color:var(--faint);} .wiz h1{font-size:clamp(26px,5vw,36px);margin:10px 0 6px;} .wiz .sub{color:var(--muted);font-size:15.5px;margin-bottom:28px;} .wiz section{margin:26px 0;text-align:center;} .wiz .sec-h{font:800 15px var(--display);margin-bottom:12px;} .wiz .sec-note{color:var(--faint);font-size:12.5px;margin-top:-8px;margin-bottom:12px;} .dots{display:flex;gap:8px;justify-content:center;margin-top:14px;} .dots i{width:8px;height:8px;border-radius:50%;background:var(--line);} .dots i.done{background:var(--accent);} /* back rides in the same row as continue — nothing can overlap, and the back target is a real 44px+ touch area */ .wiz-nav{pointer-events:none;position:fixed;left:0;right:0;bottom:0;background:linear-gradient(transparent,var(--paper) 40%);padding:26px 20px 22px;z-index:30;display:flex;align-items:center;justify-content:center;gap:16px;} .wiz-nav > *{pointer-events:auto;} .wiz-back{color:var(--muted);font:700 15px var(--body);background:none;border:none;cursor:pointer;padding:12px 14px;} .wiz-back:hover{color:var(--ink-2);} /* Continue is the only thing every wizard step is asking for, so it gets a big, unmissable target — wide, tall, thumb-sized (Mav, 2026-09-15). */ .wiz-nav .btn{min-width:340px;font-size:19px;padding:19px 44px;} @media(max-width:560px){ .wiz-nav{gap:8px;padding:26px 16px 20px;} .wiz-back{padding:12px 8px;font-size:14px;} .wiz-nav .btn{min-width:0;flex:1;max-width:none;font-size:18px;padding:18px 20px;} } /* gentle motion */ @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .rise{animation:fadeUp .5s ease both;} .rise2{animation:fadeUp .5s .12s ease both;} .rise3{animation:fadeUp .5s .24s ease both;} @keyframes floaty{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(5deg)}} .note-float{display:inline-block;animation:floaty 3.4s ease-in-out infinite;color:var(--accent);opacity:.75;} @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} .pulse{animation:pulse 2.4s ease-in-out infinite;} /* audio row */ .take{display:flex;align-items:center;gap:14px;padding:16px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);text-align:left;} .take .play{width:44px;height:44px;border-radius:50%;border:none;background:var(--accent-btn);color:#fff;font-size:16px;cursor:pointer;flex:none;display:grid;place-items:center;} .take .play:hover{background:var(--accent-btn-press);} .take .meta{flex:1;min-width:0;} .take .t1{font:800 15px var(--display);} .take .t2{color:var(--muted);font-size:12.5px;} .take .bar{height:5px;border-radius:99px;background:var(--card-2);border:1px solid var(--line);margin-top:8px;overflow:hidden;} .take .bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;} .take .unlockb{border:none;border-radius:999px;background:var(--card-2);border:1.5px solid var(--line);color:var(--ink-2);font:800 13.5px var(--display);padding:10px 16px;cursor:pointer;flex:none;transition:all .15s;} .take .unlockb:hover{border-color:var(--accent);color:var(--accent);} .take.played .unlockb{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff;} /* toast */ .toast{position:fixed;top:18px;left:50%;transform:translateX(-50%) translateY(-140%);z-index:80;background:var(--ink);color:#fff; padding:12px 20px;border-radius:12px;font:700 14px var(--body);transition:transform .3s ease;max-width:90vw;text-align:center;} .toast.show{transform:translateX(-50%) translateY(0);} /* footer */ footer.foot{border-top:1px solid var(--line);padding:26px 20px;text-align:center;color:var(--muted);font-size:13px;margin-top:60px;} /* ---------- flair layer: color, depth, and the waterfall feel ---------- */ :root{ --gold:#f3c98b; --gold-soft:#faf0dc; --rose:#e88ca0; --rose-soft:#f9e6e4; --sage:#7fb08a; --sage-soft:#e7f1ea; --sky:#3d72c9; --sky-soft:#e2ebf8; --lav:#9c7fd4; --lav-soft:#ece5f7; --shadow-1:0 1px 2px rgba(26,24,20,.05),0 6px 18px rgba(26,24,20,.06); --shadow-2:0 2px 4px rgba(26,24,20,.06),0 14px 34px rgba(226,104,58,.13); } /* backdrop rides a fixed viewport-sized layer so it can never tile or seam, whatever the page's content height */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background: radial-gradient(900px 420px at 85% -60px, rgba(243,201,139,.35), transparent 65%), radial-gradient(700px 380px at -60px 30%, rgba(232,140,160,.14), transparent 60%), var(--paper);} .card{box-shadow:var(--shadow-1);} .btn{box-shadow:0 6px 16px rgba(226,104,58,.32);} .btn.ghost{box-shadow:none;} .btn.big{box-shadow:0 10px 26px rgba(226,104,58,.36);} /* waterfall rail — one thin stream filling as they slide down the funnel */ .rail{display:none;} /* off with the bar it hung from — 16 Sept 2026 */ body.navbar .rail{display:block;position:sticky;top:56px;z-index:39;height:4px;background:rgba(233,225,211,.6);} .rail i{display:block;height:100%;width:0;border-radius:0 99px 99px 0; background:linear-gradient(90deg,var(--gold),var(--accent) 60%,var(--rose)); box-shadow:0 0 10px rgba(226,104,58,.45); transition:width .7s cubic-bezier(.22,.9,.34,1);} /* page pours in / drains out */ main, .stage{animation:pourIn .42s cubic-bezier(.22,.9,.34,1) both;} @keyframes pourIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} body.leave main, body.leave .stage{animation:drainOut .24s ease-in both;} @keyframes drainOut{to{opacity:0;transform:translateY(-22px)}} /* emoji cards: each carries its own soft color, like the house occasion cards */ .ecard{box-shadow:var(--shadow-1);border-width:1.5px;} .ecard:nth-child(5n+1){background:linear-gradient(180deg,var(--gold-soft),var(--card));} .ecard:nth-child(5n+2){background:linear-gradient(180deg,var(--rose-soft),var(--card));} .ecard:nth-child(5n+3){background:linear-gradient(180deg,var(--sage-soft),var(--card));} .ecard:nth-child(5n+4){background:linear-gradient(180deg,var(--sky-soft),var(--card));} .ecard:nth-child(5n+5){background:linear-gradient(180deg,var(--lav-soft),var(--card));} .ecard.on{box-shadow:var(--shadow-2);} .chip{box-shadow:var(--shadow-1);} .chip.on{background:var(--accent-btn);} /* step tag gets the accent, headers get a touch more presence */ .step-tag{color:var(--accent);} .wiz h1{text-shadow:0 1px 0 #fff;} /* pastel badge strip (landing) */ .badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px;} .badge-p{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line); border-radius:999px;padding:8px 16px;font:700 13px var(--body);color:var(--ink-2);box-shadow:var(--shadow-1);} .badge-p .bi{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;flex:none;} .bi.gold{background:var(--gold-soft);} .bi.rose{background:var(--rose-soft);} .bi.sage{background:var(--sage-soft);} .bi.sky{background:var(--sky-soft);} /* how-it-works numbers in the family colors */ .how .st:nth-child(1) .n{background:var(--gold);color:#7a5218;} .how .st:nth-child(2) .n{background:var(--rose);} .how .st:nth-child(3) .n{background:var(--sage);} .how .st:nth-child(4) .n{background:var(--accent-btn);} .how .st{box-shadow:var(--shadow-1);transition:transform .2s ease,box-shadow .2s ease;} .how .st:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);} .exc{transition:transform .2s ease,box-shadow .2s ease;} .exc:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);} /* dark closing band — the house "ready to make their day" moment */ .dark-band{background:linear-gradient(135deg,#2a2018,#3a2a1c 60%,#4a3020);border-radius:22px; max-width:920px;margin:50px auto 0;padding:46px 24px;text-align:center;color:#f4efe6;} .dark-band h2{font-size:clamp(24px,4vw,32px);color:#fff;} .dark-band p{color:#cbbfa8;font-size:14.5px;margin:10px 0 20px;} /* instrument checklist on the brew screen */ .instr{display:flex;gap:14px;justify-content:center;margin:18px 0 4px;flex-wrap:wrap;} .instr span{display:inline-flex;align-items:center;gap:5px;font-size:18px;opacity:0;animation:fadeUp .4s ease forwards;} .instr span b{font-size:12px;color:var(--ok);font-weight:800;} .instr span:nth-child(1){animation-delay:.4s}.instr span:nth-child(2){animation-delay:1.4s} .instr span:nth-child(3){animation-delay:2.4s}.instr span:nth-child(4){animation-delay:3.4s} .instr span:nth-child(5){animation-delay:4.4s}.instr span:nth-child(6){animation-delay:5.4s} /* review takes get cover art + lift */ .take{box-shadow:var(--shadow-1);transition:transform .15s ease,box-shadow .15s ease;} .take:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);} .take .cover{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none;box-shadow:var(--shadow-1);} .take .unlockb{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff;box-shadow:0 4px 12px rgba(226,104,58,.3);} .take .unlockb:hover{background:var(--accent-btn-press);color:#fff;} /* ---------- magic layer ---------- */ /* dancing equalizer */ .eq{display:inline-flex;gap:4px;align-items:flex-end;height:34px;margin:10px auto 0;} .eq i{width:6px;border-radius:3px;background:linear-gradient(180deg,var(--rose),var(--accent));animation:eqb 1s ease-in-out infinite;} .eq i:nth-child(1){height:40%;animation-delay:0s} .eq i:nth-child(2){height:90%;animation-delay:.15s} .eq i:nth-child(3){height:60%;animation-delay:.3s} .eq i:nth-child(4){height:100%;animation-delay:.45s} .eq i:nth-child(5){height:50%;animation-delay:.6s} .eq i:nth-child(6){height:80%;animation-delay:.75s} .eq i:nth-child(7){height:35%;animation-delay:.9s} .eq i:nth-child(8){height:70%;animation-delay:1.05s} .eq i:nth-child(9){height:45%;animation-delay:1.2s} @keyframes eqb{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}} /* cycling studio whispers */ .whisper-line{min-height:22px;color:var(--muted);font-size:14px;font-style:italic;transition:opacity .4s ease;} .whisper-line.fade{opacity:0;} /* twinkling sparkles */ .sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;} .sparkles span{position:absolute;font-size:19px;opacity:0;animation:twinkle 3.2s ease-in-out infinite;text-shadow:0 0 8px rgba(232,161,58,.35);} @keyframes twinkle{0%,100%{opacity:0;transform:scale(.6) rotate(0deg)}50%{opacity:.85;transform:scale(1.15) rotate(18deg)}} /* confetti burst */ .confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden;} .confetti i{position:absolute;top:-4vh;width:9px;height:14px;border-radius:2px;opacity:.95;animation:confall linear forwards;} @keyframes confall{to{transform:translateY(110vh) rotate(720deg);opacity:.8}} /* shimmer sweep on hero CTAs */ .btn.shimmer{position:relative;overflow:hidden;} .btn.shimmer::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent); animation:sweep 3.2s ease-in-out infinite;} @keyframes sweep{0%,60%{left:-70%}100%{left:130%}} /* a little life on hover */ .ecard:hover .em{animation:bounceEm .45s ease;} @keyframes bounceEm{30%{transform:translateY(-6px) scale(1.15)}100%{transform:none}} .hero{position:relative;} /* mobile readability — the audience skews older, so words get BIGGER on phones, never smaller */ @media(max-width:560px){ body{font-size:16.5px;} .lbl{font-size:15.5px;} .chip{font-size:16px;padding:12px 20px;} .wiz .sub{font-size:16.5px;} .wiz .sec-h{font-size:16.5px;} .wiz .sec-note{font-size:13.5px;} } /* step progress lives in ONE place: a segmented bar right under the step label at the top (the old bottom dots are removed by funnel.js) */ .step-tag.stepper{display:flex;flex-direction:column;align-items:center;gap:8px;} .seg-row{display:flex;gap:10px;} .seg-row i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center; font:800 12.5px var(--display);color:var(--faint);background:var(--card);border:1.5px solid var(--line);} /* completed steps all check off in the house orange — solid, white check (the button orange: a white numeral on the bright one is 3.35:1) */ .seg-row i.done{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff;} .seg-row i.cur{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff;box-shadow:0 0 0 3px var(--accent-ring);} .seg-lbl{font:800 12px var(--display);letter-spacing:.14em;color:var(--faint);} /* phones: option grids go compact (3-up) so a full step fits one screen — Serenade's chip density, our card look */ @media(max-width:560px){ .egrid{grid-template-columns:repeat(3,1fr);gap:8px;} .ecard{padding:12px 4px 10px;} .ecard .em{font-size:22px;} .ecard .t{font-size:12.5px;margin-top:4px;} .wiz{padding-bottom:180px;} }