/* ============================================================ Flint landing — light theme, matched to the iOS app's onboarding. Palette, orbs, and the cream bloom below are ports of the app's light onboarding chrome (Flint/Onboarding/OnboardingLightChrome.swift + design/onboarding/flint.css) — not an interpretation. Token map: bg #ffffff · surface #f5f6f8 · surface2 #eef0f4 · surface3 #e3e6ec line #e6e8ee · text #101014 · text2 #5f5f68 · text3 #93939c accent #4f8ef7 · accentDeep #2f6fe0 · accentSoft #e8f0fe tints: blue #f2f6fe · pink #fef2f6 · violet #f5f2fe ============================================================ */ :root{ /* Surfaces — the app's light appearances */ --bg: #ffffff; --surface: #f5f6f8; --surface-2: #eef0f4; --surface-3: #e3e6ec; --line: #e6e8ee; --border2: #dcdfe8; /* Ink */ --ink: #101014; --text-2: #5f5f68; --text-3: #93939c; --text-4: #c3c3cb; --body: #3a3a44; /* Accent + onboarding hues */ --accent: #4f8ef7; --accent-deep: #2f6fe0; --accent-soft: #e8f0fe; --accent-line: rgba(79,142,247,0.30); --mint: #2fbf8f; --violet: #7a5cff; --pink: #f2568c; /* Screen tints (per onboarding screen) */ --tint-blue: #f2f6fe; --tint-pink: #fef2f6; --tint-violet: #f5f2fe; --positive: #1fa457; --negative: #e5484d; /* No webfont is loaded, so every name here must be one the OS already has. The old stack named 'SF Pro Text', 'SF Pro Display' and 'Inter' — none of which are installed on Windows or Android, and none of which we ship — so those visitors fell through to Arial. -apple-system already resolves to SF on Apple platforms; system-ui/Segoe UI/Roboto cover the rest natively. */ --font: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Two durations for interface feedback. The demo choreography (card dim, row cascade) is timed by hand and deliberately does not use these. */ --t-quick: .2s; --t-ease: .28s; --curve: cubic-bezier(.2,.7,.3,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--bg);color:var(--body);font-family:var(--font); font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased; /* `clip`, not `hidden`: the ambient orbs deliberately bleed past their section (each section clips them itself), and nothing here actually overflows the viewport. `overflow:hidden` on html/body would make them scroll containers, which is what silently breaks `position:sticky` on the inner-page nav. */ overflow-x:clip; } ::selection{background:rgba(79,142,247,0.22)} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-deep)} img{max-width:100%;display:block} button,input,select,textarea{font-family:var(--font)} button{background:none;border:none;color:inherit;cursor:pointer} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:6px; } .wrap{max-width:1120px;margin:0 auto;padding:0 52px} .icon-stroke{stroke:var(--body);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round} /* ============================================================ AMBIENT ART — exact port of the onboarding blooms flint.css `.orb` + the welcome/done cream bloom. ============================================================ */ .orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(2px)} .orb-blue {background:radial-gradient(circle at 35% 30%,rgba(79,142,247,.28),rgba(79,142,247,.06) 70%)} .orb-teal {background:radial-gradient(circle at 35% 30%,rgba(24,166,160,.26),rgba(24,166,160,.05) 70%)} .orb-violet{background:radial-gradient(circle at 35% 30%,rgba(122,92,255,.24),rgba(122,92,255,.05) 70%)} .orb-pink {background:radial-gradient(circle at 35% 30%,rgba(242,86,140,.22),rgba(242,86,140,.05) 70%)} /* Soft cream bloom (welcome + done backdrop): four layered radial gradients, box inset left/right -20% and bottom -24% at 70% height, blur 64. */ .cream-bloom{position:absolute;left:-20%;right:-20%;bottom:-24%;height:70%; pointer-events:none;z-index:0;filter:blur(64px); background: radial-gradient(58% 70% at 24% 78%,rgba(79,142,247,.2) 0%,transparent 68%), radial-gradient(52% 62% at 70% 88%,rgba(130,178,250,.24) 0%,transparent 66%), radial-gradient(46% 55% at 46% 100%,rgba(178,207,252,.34) 0%,transparent 70%), radial-gradient(70% 60% at 55% 110%,rgba(224,237,254,.7) 0%,transparent 78%)} /* ---- MOTION ---- */ @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Only runs while the hero line is typing; JS removes the caret once it settles. */ @keyframes blink{0%,45%{opacity:1}50%,100%{opacity:0}} .reveal{opacity:0;transform:translateY(24px); transition:opacity .7s var(--curve),transform .7s var(--curve)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s} /* ---- NAV (scoped to #nav so it never leaks onto other