:root { --teal:#17807E; --teal-deep:#126664; --mint:#63E6C6; --mint-deep:#2FBFA6; --orange:#F07830; --amber:#FFC15E; --orange-lift:#FF8A3D; --cream:#FFF9F0; --ink:#1D160F; --muted:#5A4E40; --muted-soft:#8A7E70; --page:#F5EFE4; --page-strong:#F0E3C9; --surface:#FFFAF0; --night-top:#1D2027; --night-bottom:#06070A; --tile-top:#17181C; --tile-bottom:#07080A; --font-display:Georgia, 'Times New Roman', serif; --font-ui:'Avenir Next', 'Segoe UI', 'Helvetica Neue', sans-serif; --wrap:1180px; --r-lg:26px; --r-md:18px; --r-sm:12px; /* Text on night grounds. Every value here clears 4.5:1 on --night-top. */ --on-night:#c6bfb5; --on-night-soft:#a49c92; --on-night-faint:#9a9287; } * { box-sizing:border-box; } html { scroll-behavior:smooth; overflow-x:clip; } body { margin:0; font-family:var(--font-ui); line-height:1.6; background:var(--page); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:clip; } .wrap { width:min(calc(100% - 2.5rem), var(--wrap)); margin:0 auto; } a { color:inherit; } h1,h2,h3 { font-family:var(--font-display); font-weight:700; letter-spacing:-.015em; } img { max-width:100%; height:auto; } /* ---------- Focus. The browser default ring is ~2.2:1 on the hero. ---------- */ :focus-visible { outline:3px solid var(--mint); outline-offset:3px; } .band-cream :focus-visible { outline-color:var(--teal-deep); } .skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--mint); color:#08312a; padding:.75rem 1.25rem; border-radius:0 0 var(--r-sm) 0; font-weight:700; text-decoration:none; } .skip:focus { left:0; } /* ---------- Bands ---------- */ .band-night { position:relative; color:var(--cream); background: radial-gradient(1100px 520px at 82% -12%, rgba(240,120,48,.18), transparent 62%), radial-gradient(820px 460px at 6% 16%, rgba(99,230,198,.10), transparent 60%), linear-gradient(168deg, var(--night-top), var(--night-bottom)); } .band-cream { background:linear-gradient(180deg,#fcf8ef,var(--page) 46%,var(--page-strong)); color:var(--ink); } .band-night + .band-cream, .band-cream + .band-night { border-top:1px solid rgba(99,230,198,.16); } .band-night-flat { background:linear-gradient(168deg,#141821,#08090c); } /* ---------- Buttons ---------- */ .btn { display:inline-flex; align-items:center; gap:.55rem; border:0; cursor:pointer; font:inherit; font-weight:600; text-decoration:none; border-radius:999px; padding:.85rem 1.6rem; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; } .btn-primary { background:linear-gradient(135deg,var(--orange),var(--amber)); color:#211407; box-shadow:0 12px 34px rgba(240,120,48,.30); } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 18px 44px rgba(240,120,48,.40); } .btn-ghost { background:rgba(255,255,255,.07); color:var(--cream); border:1px solid rgba(255,255,255,.22); } .btn-ghost:hover { background:rgba(255,255,255,.13); } .btn-sm { padding:.55rem 1.15rem; font-size:.9rem; } .arrow { transition:transform .16s ease; } .btn:hover .arrow { transform:translateX(3px); } /* ---------- Topbar. Opaque: a translucent bar composites over the cream at scroll 0, not over the hero. ---------- */ header.top { position:sticky; top:0; z-index:40; background:#0a0c10; border-bottom:1px solid rgba(255,255,255,.09); transition:padding .2s ease; } @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)) { header.top { background:rgba(10,12,16,.88); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); } } .top .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; } .top nav { display:flex; gap:1.7rem; align-items:center; font-size:.93rem; } .top nav a { text-decoration:none; color:var(--on-night); transition:color .15s ease; } .top nav a:hover { color:var(--cream); } .brand-link { display:inline-flex; align-items:center; text-decoration:none; } .brand-link svg { display:block; } /* Mobile menu: a native disclosure, so it needs no JS and is keyboard operable. */ .menu { display:none; } .menu > summary { list-style:none; cursor:pointer; display:inline-flex; gap:.5rem; align-items:center; padding:.5rem .9rem; border-radius:999px; border:1px solid rgba(255,255,255,.22); color:var(--cream); font-size:.9rem; font-weight:600; } .menu > summary::-webkit-details-marker { display:none; } .menu[open] > summary { background:rgba(255,255,255,.10); } .menu-panel { position:absolute; left:0; right:0; background:#0a0c10; border-bottom:1px solid rgba(255,255,255,.10); padding:.6rem 0 1rem; } .menu-panel a { display:block; padding:.75rem 1.25rem; text-decoration:none; color:var(--on-night); font-size:1rem; } /* ---------- Hero ---------- */ /* 1.3/0.7 rather than a near-even split: the headline needs ~730px to break on its sentence boundary at full size, and the device column only needs ~355px. */ .hero .wrap { display:grid; grid-template-columns:1.3fr .7fr; gap:3rem; align-items:center; padding:5.5rem 0 5rem; } .eyebrow { display:inline-flex; align-items:center; gap:.6rem; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mint); margin:0 0 1.3rem; font-weight:700; } .eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 14px var(--mint); flex:0 0 auto; } /* One flowing sentence, so text-wrap:balance is the right tool here -- it evens the line lengths instead of stranding a short last line. (It fought the previous two-sentence headline, which needed an explicit break instead.) */ h1 { margin:0 0 1.3rem; font-size:clamp(2.3rem,3.7vw,3.15rem); line-height:1.09; text-wrap:balance; } /* Solid, not a gradient. The wordmark rule is "let the icon carry the colour"; a mint-to-amber ramp across an 8-letter word passes through the same washed midpoint that rules the gradient wordmark out. */ h1 em { font-style:normal; color:var(--mint); } .lede { font-size:1.12rem; color:var(--on-night); max-width:48ch; margin:0 0 2.1rem; } .cta-row { display:flex; gap:.85rem; flex-wrap:wrap; align-items:center; } .cta-note { font-size:.9rem; color:var(--on-night-soft); margin:1.2rem 0 0; max-width:46ch; } .hero-art { position:relative; display:flex; justify-content:center; align-items:center; } /* Viewport-relative: a fixed 460px halo overflowed every mobile width. */ .halo { position:absolute; width:min(460px,86vw); height:min(460px,86vw); border-radius:50%; filter:blur(70px); top:10px; pointer-events:none; background:radial-gradient(circle,rgba(240,120,48,.26),transparent 68%); } .device { position:relative; border-radius:40px; padding:9px; background:linear-gradient(158deg,#2c2f36,#0c0e11); box-shadow:0 46px 100px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.08); } /* Full screen, not cropped. Legibility comes from width -- 268px made every card unreadable, 322px does not -- and any crop tight enough to shorten the block also cut the tab bar or the swipe row mid-element, which reads as a bug. */ .device .screen { display:block; overflow:hidden; border-radius:32px; } /* height:auto is required: the images carry width/height attributes for CLS, and without it the attribute height wins over the scaled width. */ .device .screen img { display:block; width:100%; height:auto; } /* Two devices, composed inside a fixed-width stack so the pair can never be sliced by the viewport edge. An earlier version positioned the back device with a negative `right`, which pushed it outside the wrap and got it clipped at 1280. */ .stack { position:relative; width:348px; max-width:100%; } .device-main { position:relative; width:296px; z-index:2; will-change:transform; } /* right:26px, not 0. The 5deg rotation widens the bounding box by about 20px per side (height x sin 5deg), which pushed the back device past the viewport edge at 1024px when it sat flush right. */ .device-back { position:absolute; width:244px; right:26px; top:-26px; z-index:1; opacity:.8; transform:rotate(5deg); will-change:transform; } /* ---------- Trust strip ---------- */ .strip .wrap { display:flex; gap:2.5rem; flex-wrap:wrap; justify-content:center; padding:1.4rem 0; font-size:.9rem; color:var(--on-night-faint); } .strip span { display:inline-flex; align-items:center; gap:.55rem; } .strip .tick { color:var(--mint); font-weight:700; } /* ---------- Sections ---------- */ section { position:relative; } .pad { padding:5rem 0; } .section-head { max-width:64ch; margin:0 auto 3rem; text-align:center; } .kicker { font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-deep); font-weight:700; margin:0 0 .8rem; } .band-night .kicker { color:var(--mint); } .section-head h2 { font-size:clamp(1.8rem,3.3vw,2.6rem); margin:0 0 .8rem; line-height:1.14; } .section-head .sub { color:var(--muted); margin:0; font-size:1.05rem; } .band-night .section-head .sub { color:var(--on-night-soft); } /* ---------- Two pillars ---------- */ .grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem; } .pillar { border:1px solid rgba(29,22,15,.09); border-radius:var(--r-lg); padding:2.4rem 2.2rem; background:var(--surface); box-shadow:0 20px 44px rgba(42,31,19,.06); } /* A rule rather than an icon: two identical app tiles side by side read as placeholder art. At 44px the first version read as a stray dash, so it is wide enough now to be clearly deliberate. */ .pillar .rule { display:block; width:76px; height:4px; border-radius:2px; background:linear-gradient(90deg,var(--teal-deep),var(--orange)); margin-bottom:1.6rem; } .pillar h3 { font-size:1.34rem; margin:0 0 .7rem; line-height:1.25; } .pillar p { color:var(--muted); margin:0; font-size:1rem; } /* ---------- Feed vs Whim ---------- */ .versus { display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:stretch; } .vs-col { border-radius:var(--r-lg); padding:1.9rem 1.8rem; border:1px solid; } .vs-them { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.10); } .vs-us { background:linear-gradient(160deg,rgba(99,230,198,.10),rgba(240,120,48,.07)); border-color:rgba(99,230,198,.30); } .vs-col h3 { font-size:1.08rem; margin:0 0 1.1rem; letter-spacing:.02em; } .vs-them h3 { color:var(--on-night-soft); } .vs-us h3 { color:var(--mint); } .vs-col ul { list-style:none; margin:0; padding:0; } .vs-col li { display:flex; gap:.7rem; padding:.55rem 0; font-size:.98rem; color:var(--on-night); } /* Hyphen, not an en or em dash: no dashes anywhere, including as list markers. */ .vs-col li::before { content:"-"; color:var(--on-night-faint); flex:0 0 auto; } .vs-us li { color:var(--cream); } .vs-us li::before { content:"\2713"; color:var(--mint); font-weight:700; } .vs-div { display:flex; align-items:center; justify-content:center; color:var(--on-night-faint); font-family:var(--font-display); font-size:1.1rem; } /* ---------- Steps: Discover / Decide / Go ---------- */ .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .step { position:relative; background:var(--surface); border:1px solid rgba(29,22,15,.09); border-radius:var(--r-lg); padding:1.9rem 1.7rem; box-shadow:0 20px 44px rgba(42,31,19,.07); } /* Solid, not a gradient: white on the amber end of a teal->orange ramp is 2.82:1. */ .step .num { display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 .85rem; border-radius:999px; font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.15rem; color:var(--cream); background:var(--teal-deep); } .step h3 { font-size:1.18rem; margin:0 0 .55rem; } .step p { color:var(--muted); font-size:.98rem; margin:0; } /* ---------- Screens ---------- */ .shots { display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; justify-items:center; } .phone { margin:0; text-align:center; width:100%; max-width:288px; } .phone .screen { display:block; overflow:hidden; border-radius:28px; box-shadow:0 34px 76px rgba(0,0,0,.48), 0 0 0 9px #14161a, 0 0 0 10px rgba(255,255,255,.07); } .phone .screen img { width:100%; height:auto; display:block; } .phone figcaption { margin-top:1.1rem; font-size:.82rem; color:var(--on-night-soft); letter-spacing:.07em; text-transform:uppercase; } /* ---------- Won't do ---------- */ .promises { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; } .promise { border-left:3px solid var(--mint); border-radius:0 var(--r-md) var(--r-md) 0; padding:1.3rem 1.6rem; background:rgba(255,255,255,.04); } .promise h3 { font-size:1.08rem; margin:0 0 .45rem; color:var(--cream); font-family:var(--font-ui); font-weight:700; } .promise p { margin:0; color:var(--on-night); font-size:.97rem; } /* ---------- FAQ ---------- */ .faq { max-width:74ch; margin:0 auto; } .faq details { border-bottom:1px solid rgba(29,22,15,.12); } .faq summary { cursor:pointer; list-style:none; padding:1.15rem 2rem 1.15rem 0; font-weight:700; font-size:1.04rem; position:relative; font-family:var(--font-display); } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:"+"; position:absolute; right:.2rem; top:1rem; font-size:1.4rem; font-weight:400; color:var(--teal-deep); font-family:var(--font-ui); } .faq details[open] summary::after { content:"\2212"; } .faq p { margin:0 0 1.3rem; color:var(--muted); font-size:1rem; max-width:66ch; } /* ---------- Signup ---------- */ .signup-card { position:relative; overflow:hidden; border-radius:32px; text-align:center; padding:3.6rem clamp(1.5rem,4vw,3.6rem); border:1px solid rgba(99,230,198,.22); background: radial-gradient(700px 300px at 78% -20%, rgba(240,120,48,.22), transparent 60%), linear-gradient(155deg,#1a1e24,#090b0f); } .signup-card .tile { width:64px; height:64px; border-radius:16px; overflow:hidden; margin:0 auto 1.4rem; display:block; } .signup-card .tile svg { width:100%; height:100%; display:block; } .signup-card h2 { font-size:clamp(1.9rem,3.6vw,2.6rem); margin:0 0 .9rem; color:var(--cream); } .signup-card .sub { color:var(--on-night-soft); max-width:54ch; margin:0 auto 2rem; } .field { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; } .field input { font:inherit; padding:.88rem 1.2rem; border-radius:999px; width:min(320px,100%); border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.07); color:var(--cream); } .field input::placeholder { color:var(--on-night-faint); } .perks { list-style:none; margin:1.8rem 0 0; padding:0; display:flex; gap:1.75rem; flex-wrap:wrap; justify-content:center; font-size:.9rem; color:var(--on-night-soft); } .perks li { display:inline-flex; gap:.5rem; align-items:center; } .perks .tick { color:var(--mint); font-weight:700; } .fineprint { font-size:.86rem; color:var(--on-night-faint); margin:1.4rem 0 0; } .fineprint a { color:var(--on-night); text-underline-offset:.18em; } /* Empty until the form reports something, so it takes no space at rest. */ .form-status { margin:1.1rem 0 0; font-size:.95rem; min-height:1.4em; } .form-status.is-ok { color:var(--mint); } .form-status.is-error { color:#FFC15E; } #signup-submit[disabled] { opacity:.65; cursor:progress; } .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ---------- Footer ---------- */ footer { padding:3.5rem 0 3rem; } .foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:3rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.10); } .foot-grid p { color:var(--on-night-soft); font-size:.95rem; max-width:42ch; margin:0; } /* Needs to outrank `.foot-grid p` (0,1,1), so it is scoped rather than bare: this is the one place "Add a little Whim to your life" appears and it should read as display type, not as another paragraph. */ .foot-grid p.foot-sig { color:var(--cream); font-family:var(--font-display); font-size:1.4rem; line-height:1.3; margin:1.4rem 0 .7rem; max-width:22ch; } .foot-col h2 { font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-night-faint); margin:.3rem 0 1rem; font-family:var(--font-ui); font-weight:700; } .foot-col a { display:block; text-decoration:none; color:var(--on-night); font-size:.95rem; padding:.3rem 0; } .foot-col a:hover { color:var(--cream); } .foot-base { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.6rem; font-size:.86rem; color:var(--on-night-faint); } /* ---------- Reveal on scroll ---------- */ .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); } .reveal.in { opacity:1; transform:none; } @media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } .btn, .arrow, .top nav a { transition:none; } .btn-primary:hover { transform:none; } } /* Gradient text vanishes in forced-colors mode; restore a real colour. */ @media (forced-colors:active) { h1 em { background:none; color:CanvasText; -webkit-text-fill-color:CanvasText; } .btn { border:1px solid CanvasText; } .promise { border-left-color:CanvasText; } } @media (max-width:960px) { .hero .wrap { grid-template-columns:1fr; padding:3.5rem 0; } .hero-art { min-height:400px; } .device-back { display:none; } .grid-3, .grid-2, .shots, .foot-grid, .promises { grid-template-columns:1fr; } .versus { grid-template-columns:1fr; } .vs-div { display:none; } .top nav.nav-desktop { display:none; } .menu { display:block; } .pad { padding:3.5rem 0; } }