/* ============================================================================ Nureli — marketing site Design tokens mapped 1:1 from the app's live DesignSystem.swift (NOT the stale PALETTE_EXTRACTED.md, which predates the warm reskin). One calm world: warm cream ground (#FFF8EF), dusty-rose accent (#C56A86 family), warm plum ink, soft peach/honey/lavender pastels, dusk-plum dark mode. PINNED TO LIGHT: the site always uses the warm cream theme regardless of OS appearance. The dusk-plum dark register is kept but OPT-IN — enable by setting . ========================================================================== */ /* ---------------------------------- Tokens -------------------------------- */ :root { /* Type */ --font-sans: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: -apple-system, "SF Pro Rounded", ui-rounded, "SF Pro Display", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Color — warm light world, mapped 1:1 from the app's DesignSystem.swift (bg #FFF8EF cream · accent rose · ink warm plum #4A3F46). */ --bg: #FFF8EF; /* warm cream paper (app `bg`/`creamBg`) */ --bg-alt: #F7EDDF; /* warm cream tint section (≈ app surfaceAlt) */ --bg-tint: #FBEEEA; /* faint blush wash chapter */ --surface: #FFFCF6; /* card — a hair lighter than bg for soft lift */ --surface-2: #F6ECDE; /* inset / chips (app surfaceAlt) */ --ink: #4A3F46; /* warm plum-gray (app inkPrimary), ~9:1 on cream */ --ink-2: #8A7E84; /* warm taupe (app inkSecondary) */ --ink-3: #B3A6AC; /* non-essential only */ --hairline: rgba(74, 63, 70, 0.10); --hairline-2: rgba(74, 63, 70, 0.14); /* Rose accent — uses the app's deeper rose member for AA-safe text on cream; the app's lighter ember rose (#E08CA6) lives in --accent-soft for glows. */ --accent: #B0567A; /* deep rose — ~4.5:1 on cream; white-on-it ~4.7:1 */ --accent-hover: #9A4A69; --accent-soft: #EFB9C8; /* blush — glow / fill only (app accentSoft) */ --accent-wash: #FBEAF0; /* soft rose wash (icon tiles, chips) */ --on-accent: #FFFFFF; /* white on deep rose */ /* Pastel illustration tints (app petal / sunlight family — warm) */ --lav: #E6DEF7; /* petalLavender */ --peach: #FCE6D6; /* petalPeach */ --honey: #FBEFC9; /* petalHoney */ --blush: #F6D6E1; /* soft blush */ --sky: #E6DEF7; /* warm world has no cool sky → reuse lavender */ --mint: #DCE7D2; /* soft sage (Mirror gratitude family) */ --butter: #FBEFC9; --shadow-sm: 0 2px 10px rgba(74, 56, 60, 0.05); /* warm plum shadow */ --shadow-md: 0 14px 40px rgba(74, 56, 60, 0.08); --shadow-lg: 0 24px 70px rgba(74, 56, 60, 0.10); --shadow-xl: 0 40px 110px rgba(74, 56, 60, 0.13); /* Radius */ --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-device: 44px; --r-pill: 999px; /* Icons — one family (Lucide geometry), one weight, one size set */ --icon-sm: 20px; --icon-md: 24px; --icon-lg: 26px; --tile: 52px; /* Space (8px base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px; --s-40: 160px; /* Layout */ --container: 1120px; --text-col: 720px; --section-pad: clamp(96px, 13vw, 176px); /* Motion */ --ease-ui: cubic-bezier(0.4, 0, 0.2, 1); --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 240ms; --dur-enter: 800ms; --glass-blur: blur(20px) saturate(160%); --glass-fill: rgba(255, 252, 246, 0.72); /* warm cream glass */ --header-fill: rgba(255, 248, 239, 0.72); } /* Dark register — OPT-IN only: set to enable. The site is pinned to light by default, so the OS appearance no longer flips it. */ :root[data-theme="dark"] { /* Dusk-plum dark world, mapped from the app (soulDark #2A2330 / soulWarm #372E40, Mirror dark text #F3E7DD / #C9BBC0). */ --bg: #211C28; /* dusk plum base */ --bg-alt: #2A2330; /* app soulDark */ --bg-tint: #2E2638; /* faint plum wash */ --surface: #372E40; /* app soulWarm card */ --surface-2: #41384C; --ink: #F3E7DD; /* warm cream text */ --ink-2: #C9BBC0; /* dusk mauve */ --ink-3: #8E8189; --hairline: rgba(255, 255, 255, 0.10); --hairline-2:rgba(255, 255, 255, 0.16); --accent: #E89AB1; /* soft rose — high contrast on dusk plum */ --accent-hover: #F0AEC1; --accent-soft: #EFB9C8; --accent-wash: rgba(232, 154, 177, 0.16); --on-accent: #2A2330; /* dark plum on light rose fill */ --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-md: 0 16px 44px rgba(0, 0, 0, 0.45); --shadow-lg: 0 26px 72px rgba(0, 0, 0, 0.55); --shadow-xl: 0 40px 110px rgba(0, 0, 0, 0.6); --glass-fill: rgba(55, 46, 64, 0.66); --header-fill: rgba(33, 27, 40, 0.7); } /* ---------------------------------- Reset -------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; } body { font-family: var(--font-sans); font-size: 17px; line-height: 1.6; color: var(--ink); /* Atmospheric base — soft ambient blooms over warm cream (not a flat fill). Echoes the app's layered tab backgrounds; attachment:fixed keeps it as a quiet atmosphere on desktop (iOS gracefully treats it as scroll). */ background: radial-gradient(48% 36% at 82% 3%, color-mix(in srgb, var(--honey) 42%, transparent), transparent 60%), radial-gradient(46% 40% at 5% 20%, color-mix(in srgb, var(--lav) 34%, transparent), transparent 58%), radial-gradient(62% 46% at 50% 103%, color-mix(in srgb, var(--blush) 26%, transparent), transparent 60%), var(--bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Warm paper grain — a faint, neutral speckle so surfaces read as paper, not flat screen. Ports the app's .paperGrain() (~3.5% multiply, app-wide). Decorative. */ body::after { content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 150px 150px; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 200; padding: 10px 18px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-weight: 600; transform: translateY(-150%); transition: transform var(--dur-micro) var(--ease-ui); } .skip-link:focus { transform: translateY(0); } /* --------------------------------- Layout -------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); } /* --------------------------------- Type ---------------------------------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); } h1 { font-size: clamp(40px, 6.5vw, 88px); line-height: 1.08; letter-spacing: -0.02em; } h2 { font-size: clamp(30px, 4.5vw, 60px); line-height: 1.1; letter-spacing: -0.015em; } h3 { font-size: clamp(20px, 3vw, 28px); line-height: 1.18; letter-spacing: -0.01em; } .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-4); } .lede, .feature-lede, .benefit-lede, .section-sub, .cta-lede { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: var(--text-col); } .center { margin-inline: auto; text-align: center; } /* -------------------------------- Buttons -------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 28px; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 600; font-size: 17px; transition: transform var(--dur-micro) var(--ease-ui), background-color var(--dur-micro) var(--ease-ui), box-shadow var(--dur-micro) var(--ease-ui); will-change: transform; } .btn--sm { padding: 10px 20px; font-size: 15px; } .btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 28px rgba(176, 86, 122, 0.30); } .btn--primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 14px 36px rgba(176, 86, 122, 0.36); } .btn--primary:active { transform: translateY(0); } .btn--text { color: var(--accent); padding-inline: 10px; } .btn--text:hover { color: var(--accent-hover); } .btn--text span { transition: transform var(--dur-micro) var(--ease-ui); } .btn--text:hover span { transform: translateX(3px); } /* -------------------------------- Header --------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: transparent; transition: background-color var(--dur-micro) var(--ease-ui), box-shadow var(--dur-micro) var(--ease-ui), border-color var(--dur-micro) var(--ease-ui); border-bottom: 1px solid transparent; } .site-header[data-scrolled] { background: var(--header-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom-color: var(--hairline); } .nav { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: var(--s-6); } .brand { display: inline-flex; align-items: center; gap: 10px; } .brand-mark { display: inline-flex; } .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; } /* Header wordmark — "nureli." in bold SF (Apple) display type, no logo mark. */ .brand-wordmark { font-weight: 700; font-size: 27px; letter-spacing: -0.03em; color: var(--ink); } .brand-wordmark .brand-dot { color: var(--accent); } /* rose period — "nureli." */ .nav-links { display: flex; gap: clamp(8px, 2vw, 28px); } .nav-links a { font-size: 15px; font-weight: 500; color: var(--ink-2); padding: 8px 4px; position: relative; transition: color var(--dur-micro) var(--ease-ui); } .nav-links a:hover { color: var(--ink); } .nav-links a[aria-current="true"] { color: var(--accent); } .nav-links a[aria-current="true"]::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); } .nav-actions { display: flex; align-items: center; gap: var(--s-3); } .nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform var(--dur-micro) var(--ease-ui), opacity var(--dur-micro) var(--ease-ui); } .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); } /* Mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: 90; background: var(--header-fill); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease-ui); display: grid; place-items: center; } .mobile-menu[data-open] { opacity: 1; pointer-events: auto; } .mobile-menu-inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); } .mobile-menu-inner a { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--ink); opacity: 0; transform: translateY(14px); } .mobile-menu[data-open] .mobile-menu-inner a { animation: menuIn 480ms var(--ease-enter) forwards; } .mobile-menu-inner a:nth-child(1) { animation-delay: 60ms; } .mobile-menu-inner a:nth-child(2) { animation-delay: 120ms; } .mobile-menu-inner a:nth-child(3) { animation-delay: 180ms; } .mobile-menu-inner a:nth-child(4) { animation-delay: 240ms; } .mobile-menu-inner a:nth-child(5) { animation-delay: 300ms; } .mobile-menu-inner .btn { margin-top: var(--s-4); color: var(--on-accent); } @keyframes menuIn { to { opacity: 1; transform: translateY(0); } } /* ------------------------------- Breathing ------------------------------- */ /* The signature: a soft orb that expands and contracts like a guided breath. */ .breathing-orb { position: absolute; z-index: 0; pointer-events: none; width: clamp(420px, 60vw, 760px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-soft) 55%, transparent) 0%, color-mix(in srgb, var(--lav) 32%, transparent) 38%, transparent 70%); filter: blur(20px); opacity: 0.5; top: -12%; left: 50%; transform: translate(-50%, 0) scale(0.92); animation: breathe 9s var(--ease-ui) infinite; } .breathing-orb--ambient { top: 50%; opacity: 0.4; transform: translate(-50%, -50%) scale(0.92); animation: breathe-centered 10s var(--ease-ui) infinite; } @keyframes breathe { 0%, 100% { transform: translate(-50%, 0) scale(0.92); opacity: 0.42; } 50% { transform: translate(-50%, 0) scale(1.08); opacity: 0.6; } } @keyframes breathe-centered { 0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.32; } 50% { transform: translate(-50%, -50%) scale(1.06); opacity: 0.5; } } /* --------------------------------- Hero ---------------------------------- */ .hero { position: relative; overflow: hidden; padding-top: clamp(56px, 9vw, 110px); padding-bottom: var(--section-pad); } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero-copy { max-width: 600px; } .hero h1 { margin-bottom: var(--s-6); } .hero .lede { margin-bottom: var(--s-8); } .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); } .hero-note { font-size: 14px; color: var(--ink-3); } .hero-visual { position: relative; display: grid; place-items: center; } /* ------------------------------- Devices --------------------------------- */ /* Realistic, themeable iPhone frame — vector-crisp at any size, light/dark aware. ANIMATION-READY: the body transform reads only from CSS variables, so any driver (CSS keyframes now; scroll / GSAP / Framer later) can write to them with no markup change. Motion is gated by [data-animate="on"] on an ancestor (default off → ships static) AND prefers-reduced-motion. This is the vanilla port of the component — prop ↔ class/variable map documented in README.md. */ .device { position: relative; } .device--iphone { --dev-w: clamp(232px, 26vw, 300px); /* the size everything scales from */ --bezel: calc(var(--dev-w) * 0.034); /* thin, even bezel */ --screen-r: calc(var(--dev-w) * 0.123); /* concentric with the body radius */ /* theme tokens (overridden for dark below) */ --device-body: linear-gradient(155deg, #45444e 0%, #26252e 46%, #131218 100%); --device-bezel-color: #08080b; --device-rim: inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 1.6px 1px rgba(255, 255, 255, 0.45), inset 0 -2px 3px rgba(0, 0, 0, 0.5); --device-drop: 0 calc(var(--dev-w) * 0.13) calc(var(--dev-w) * 0.26) calc(var(--dev-w) * -0.06) rgba(74, 56, 60, 0.4), 0 calc(var(--dev-w) * 0.018) calc(var(--dev-w) * 0.05) rgba(74, 56, 60, 0.22); position: relative; width: var(--dev-w); aspect-ratio: 0.465; /* true iPhone Pro proportions */ padding: var(--bezel); border-radius: calc(var(--dev-w) * 0.16); /* squircle-ish body corner */ background: var(--device-body); box-shadow: var(--device-rim), var(--device-drop); /* the one transform — static pose (--dev-*) composes with pointer tilt (--tilt-*) */ transform: perspective(1400px) rotateX(calc(var(--dev-rx, 0deg) + var(--tilt-rx, 0deg))) rotateY(calc(var(--dev-ry, 0deg) + var(--tilt-ry, 0deg))) rotateZ(var(--dev-rz, 0deg)) scale(var(--dev-scale, 1)); transform-style: preserve-3d; transition: transform 0.5s var(--ease-enter); } [data-theme="dark"] .device--iphone { --device-body: linear-gradient(155deg, #4c4b58 0%, #2b2a36 46%, #17161e 100%); --device-rim: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1.6px 1px rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0.6); --device-drop: 0 calc(var(--dev-w) * 0.13) calc(var(--dev-w) * 0.28) calc(var(--dev-w) * -0.06) rgba(0, 0, 0, 0.6), 0 calc(var(--dev-w) * 0.018) calc(var(--dev-w) * 0.05) rgba(0, 0, 0, 0.4); } /* glass glare — faint diagonal light over the screen (decorative). z-index lifts it above the screenshot even though ::before paints early. */ .device--iphone::before { content: ""; position: absolute; z-index: 5; pointer-events: none; inset: var(--bezel); border-radius: var(--screen-r); background: linear-gradient(133deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 24%, rgba(255, 255, 255, 0) 44%); } /* Dynamic Island — pill with a faint camera lens (decorative) */ .device--iphone::after { content: ""; position: absolute; z-index: 6; top: calc(var(--dev-w) * 0.072); left: 50%; transform: translateX(-50%); width: calc(var(--dev-w) * 0.30); height: calc(var(--dev-w) * 0.084); border-radius: var(--r-pill); background: radial-gradient(circle at 74% 50%, rgba(86, 96, 140, 0.55) 0 calc(var(--dev-w) * 0.007), rgba(16, 18, 28, 0.95) calc(var(--dev-w) * 0.009) calc(var(--dev-w) * 0.016), transparent calc(var(--dev-w) * 0.017)), #000; } .device--floating { margin-top: var(--s-12); margin-inline: auto; } /* soft brand-accent aura behind the device (decorative). Used sparingly — most sections already carry a breathing orb. */ .device--glow { filter: drop-shadow(0 calc(var(--dev-w, 280px) * 0.06) calc(var(--dev-w, 280px) * 0.12) color-mix(in srgb, var(--accent) 28%, transparent)); } /* MOTION LAYER — ready to wire; inert until an ancestor sets data-animate="on". */ [data-animate="on"] .device--iphone.is-float { animation: device-float 8s var(--ease-ui) infinite; } @keyframes device-float { /* uses the independent `translate`/`rotate` props so it composes with the pose transform */ 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 calc(var(--dev-w) * -0.02); rotate: 0.35deg; } } /* ------------------------------ Placeholders ----------------------------- */ .ph { position: relative; display: grid; place-items: center; background: radial-gradient(120% 80% at 50% 0%, var(--surface-2), transparent 60%), var(--accent-wash); color: var(--ink-3); overflow: hidden; } .ph--screen { width: 100%; height: 100%; border-radius: var(--screen-r); /* even black bezel (works for the placeholder div AND a swapped-in ) + a subtle inset so the screen seats under glass */ box-shadow: 0 0 0 calc(var(--dev-w) * 0.025) var(--device-bezel-color), inset 0 0 calc(var(--dev-w) * 0.03) rgba(0, 0, 0, 0.45); } .ph--screen::before { /* soft botanical wash, calm + hopeful (warm app palette) */ content: ""; position: absolute; inset: 0; background: radial-gradient(50% 30% at 26% 18%, color-mix(in srgb, var(--lav) 70%, transparent), transparent 70%), radial-gradient(46% 26% at 78% 30%, color-mix(in srgb, var(--peach) 65%, transparent), transparent 72%), radial-gradient(60% 34% at 50% 92%, color-mix(in srgb, var(--honey) 60%, transparent), transparent 70%); opacity: 0.85; } .ph--calm::before { background: radial-gradient(60% 50% at 50% 42%, color-mix(in srgb, var(--accent-soft) 50%, transparent), transparent 70%), radial-gradient(70% 40% at 50% 100%, color-mix(in srgb, var(--lav) 50%, transparent), transparent 72%); } .ph-label { position: relative; z-index: 1; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); background: var(--glass-fill); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 7px 14px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); } /* Floating hero cards */ .float-card { position: absolute; z-index: 4; background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 14px 16px; font-size: 14.5px; line-height: 1.45; color: var(--ink); will-change: transform; } .float-card--a { max-width: 250px; top: 8%; left: -4%; animation: floatY 7s var(--ease-ui) infinite; } .float-card--a p { margin: 0; } .float-card--a em { color: var(--accent); font-style: normal; font-weight: 600; } .float-card--b { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; bottom: 12%; right: -2%; animation: floatY 8s var(--ease-ui) infinite reverse; } .float-ember, .float-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: radial-gradient(circle, var(--accent), var(--accent-soft)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); } .float-ember { margin-bottom: 6px; } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* -------------------------------- Sections ------------------------------- */ .feature { padding-block: var(--section-pad); } .feature--alt { background: var(--bg-alt); } .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .feature-grid--reverse .feature-visual { order: -1; } .feature-copy { max-width: 540px; } .feature h2 { margin-bottom: var(--s-6); } .feature-lede { margin-bottom: var(--s-8); } .feature-visual { display: grid; place-items: center; } .bullets { display: grid; gap: var(--s-4); } .bullets li { position: relative; padding-left: 30px; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); } .bullets li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); } .bullets strong { color: var(--ink); font-weight: 600; } /* Cinematic full-bleed */ .feature--cinematic { position: relative; overflow: hidden; text-align: center; background: radial-gradient(120% 80% at 50% -10%, var(--bg-tint), transparent 60%), var(--bg); } .cinematic-inner { position: relative; z-index: 1; display: grid; justify-items: center; } .feature--cinematic h2 { margin-bottom: var(--s-6); } .feature--cinematic .feature-lede { margin-bottom: 0; } /* ----------------------------- Section heads ----------------------------- */ .section-head { text-align: center; max-width: 760px; margin-inline: auto; margin-bottom: var(--s-16); } .section-head .section-sub { margin-inline: auto; margin-top: var(--s-4); } /* ------------------------------ How it works ----------------------------- */ .how { padding-block: var(--section-pad); background: var(--bg-alt); } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); } .step { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-8); box-shadow: var(--shadow-sm); } .step-icon { width: 46px; height: 46px; margin-bottom: var(--s-4); } /* tile styles inherited above */ .step-kicker { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-2); } .step h3 { margin-bottom: var(--s-3); } .step p { color: var(--ink-2); font-size: 16px; } /* -------------------------------- Carousel ------------------------------- */ .screens { padding-block: var(--section-pad); overflow: hidden; } .carousel { position: relative; display: flex; align-items: center; gap: var(--s-3); } .carousel-track { display: flex; gap: clamp(20px, 3vw, 40px); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s-6) clamp(20px, 5vw, 40px) var(--s-8); scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } .carousel-track::-webkit-scrollbar { display: none; } .carousel-item { flex: 0 0 auto; scroll-snap-align: center; } .carousel-arrow { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: var(--ink); background: var(--glass-fill); border: 1px solid var(--hairline); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-md); transition: transform var(--dur-micro) var(--ease-ui), opacity var(--dur-micro) var(--ease-ui); } .carousel-arrow:hover { transform: translateY(-50%) scale(1.06); } .carousel-arrow--prev { left: clamp(8px, 3vw, 32px); } .carousel-arrow--next { right: clamp(8px, 3vw, 32px); } .carousel-arrow[disabled] { opacity: 0.35; cursor: default; } .carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: var(--s-4); } .carousel-dots button { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline-2); transition: background-color var(--dur-micro) var(--ease-ui), transform var(--dur-micro) var(--ease-ui); } .carousel-dots button[aria-selected="true"] { background: var(--accent); transform: scale(1.25); } /* -------------------------------- Benefits ------------------------------- */ .benefit { min-height: 92vh; display: grid; align-items: center; padding-block: var(--section-pad); position: relative; overflow: hidden; } .benefit--overwhelm { background: radial-gradient(90% 70% at 80% 10%, color-mix(in srgb, var(--peach) 30%, transparent), transparent 60%), radial-gradient(80% 60% at 12% 90%, color-mix(in srgb, var(--lav) 34%, transparent), transparent 60%), var(--bg); text-align: center; } .benefit--privacy { background: var(--bg-alt); } .benefit-inner { display: grid; justify-items: center; } .benefit--overwhelm .benefit-inner { max-width: 820px; margin-inline: auto; } .benefit h2 { margin-bottom: var(--s-6); } .benefit-lede { margin-bottom: var(--s-8); } .benefit--privacy .benefit-inner { justify-items: start; max-width: var(--container); } .benefit--privacy .benefit-lede { margin-bottom: var(--s-12); } .privacy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); width: 100%; } .privacy-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-8); box-shadow: var(--shadow-sm); } /* ---- Icon system (one Lucide family, one stroke; brand glyphs filled) ---- */ .icon { width: var(--icon-md); height: var(--icon-md); flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .icon-brand { width: var(--icon-sm); height: var(--icon-sm); flex: none; display: block; fill: currentColor; stroke: none; } /* icons inside buttons / badges */ .btn .icon { width: 18px; height: 18px; } .btn--sm .icon { width: 16px; height: 16px; } .btn--text .icon { width: 17px; height: 17px; } .badge .icon { width: 20px; height: 20px; } /* Premium iOS/Settings-style squircle tile — shared by feature, privacy & step cards. */ .privacy-icon, .bento-icon, .step-icon { display: grid; place-items: center; width: var(--tile); height: var(--tile); border-radius: 28%; /* squircle feel */ margin-bottom: var(--s-6); color: var(--accent); background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent-soft) 18%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent), 0 8px 20px -10px color-mix(in srgb, var(--accent) 55%, transparent); transition: transform var(--dur-micro) var(--ease-ui); } /* gentle calm hover cue (no bounce) */ .bento-card:hover .bento-icon, .privacy-card:hover .privacy-icon { transform: scale(1.04); } .privacy-card h3 { font-size: 19px; margin-bottom: var(--s-3); } .privacy-card p { color: var(--ink-2); font-size: 15.5px; } /* --------------------------------- Bento --------------------------------- */ .bento-section { padding-block: var(--section-pad); } .bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: clamp(16px, 2.2vw, 24px); } .bento-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-sm); transition: transform var(--dur-micro) var(--ease-ui), box-shadow var(--dur-micro) var(--ease-ui); will-change: transform; } .bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .bento-card--wide { grid-column: span 2; } .bento-card--tall { grid-row: span 2; } .bento-card.glass { background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } .bento-card h3 { font-size: 22px; margin-bottom: var(--s-3); } .bento-card p { color: var(--ink-2); font-size: 16px; } .bento-card--wide h3 { font-size: 26px; } /* --------------------------------- Stats --------------------------------- */ .stats { padding-block: var(--section-pad); } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); text-align: center; } .stat { display: grid; gap: var(--s-3); } .stat-figure { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 5.5vw, 64px); line-height: 1; color: var(--accent); letter-spacing: -0.02em; } .stat-label { color: var(--ink-2); font-size: 16px; max-width: 300px; margin-inline: auto; } /* ------------------------------- Final CTA ------------------------------- */ .final-cta { position: relative; overflow: hidden; text-align: center; padding-block: clamp(120px, 16vw, 200px); background: radial-gradient(100% 70% at 50% 0%, var(--bg-tint), transparent 55%), var(--bg); } .final-cta-inner { position: relative; z-index: 1; display: grid; justify-items: center; } .app-icon { margin-bottom: var(--s-8); filter: drop-shadow(var(--shadow-lg)); border-radius: 24px; } .final-cta h2 { margin-bottom: var(--s-6); } .cta-lede { margin-bottom: var(--s-8); } .badges { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; } .badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: var(--r-md); background: var(--ink); color: var(--bg); transition: transform var(--dur-micro) var(--ease-ui); } .badge:hover { transform: translateY(-2px); } .badge-label { font-size: 13px; line-height: 1.15; text-align: left; } .badge-label strong { display: block; font-size: 18px; font-weight: 600; } .cta-disclaimer { margin-top: var(--s-8); font-size: 14px; color: var(--ink-3); max-width: 460px; } /* --------------------------------- Footer -------------------------------- */ .site-footer { background: var(--bg-alt); border-top: 1px solid var(--hairline); padding-top: var(--s-16); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-8); padding-bottom: var(--s-12); } .footer-brand { max-width: 320px; } .footer-brand .brand { margin-bottom: var(--s-4); } .footer-tagline { color: var(--ink-2); font-size: 15px; margin-bottom: var(--s-6); } .footer-care { font-size: 14px; color: var(--ink-2); background: var(--accent-wash); border-radius: var(--r-md); padding: 12px 16px; } .footer-care a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .footer-col h2 { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-4); } .footer-col { display: flex; flex-direction: column; gap: var(--s-3); } .footer-col a { color: var(--ink-2); font-size: 15px; transition: color var(--dur-micro) var(--ease-ui); } .footer-col a:hover { color: var(--ink); } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); padding-block: var(--s-8); border-top: 1px solid var(--hairline); } .footer-disclaimer { font-size: 13px; color: var(--ink-3); max-width: 640px; } .footer-social { display: flex; gap: var(--s-3); } .social { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); border: 1px solid var(--hairline); transition: color var(--dur-micro) var(--ease-ui), border-color var(--dur-micro) var(--ease-ui); } .social:hover { color: var(--accent); border-color: var(--accent); } /* ------------------------------ Scroll reveal ---------------------------- */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter); } .reveal.is-in { opacity: 1; transform: none; } /* ---------------------------- Chapter atmosphere ------------------------- */ /* Soft pastel blooms so the alternating sections read as layered atmosphere, not flat fills (echoes the app's gradient + motif-ambient backgrounds). Placed after the section rules so it composes over their --bg-alt base. Calm, low-saturation. */ .feature--alt, .how, .benefit--privacy, .site-footer { background: radial-gradient(46% 38% at 8% 0%, color-mix(in srgb, var(--lav) 30%, transparent), transparent 56%), radial-gradient(52% 42% at 97% 64%, color-mix(in srgb, var(--peach) 28%, transparent), transparent 60%), var(--bg-alt); } /* lift the existing radial chapters a touch so their glow reads on warm cream */ .feature--cinematic, .final-cta { background: radial-gradient(110% 78% at 50% -8%, color-mix(in srgb, var(--lav) 40%, transparent), transparent 56%), radial-gradient(80% 50% at 50% 108%, color-mix(in srgb, var(--blush) 30%, transparent), transparent 60%), var(--bg); } /* ------------------------------- Responsive ------------------------------ */ @media (max-width: 1024px) { .bento-card--wide { grid-column: span 3; } .bento-card--tall { grid-row: span 1; } } @media (max-width: 860px) { .nav-links { display: none; } .nav-actions .btn--primary { display: none; } .nav-toggle { display: flex; } .hero-grid { grid-template-columns: 1fr; text-align: center; gap: var(--s-12); } .hero-copy { margin-inline: auto; } .hero .lede { margin-inline: auto; } .hero-cta { justify-content: center; } .float-card--a { left: 0; top: 2%; } .float-card--b { right: 0; } .feature-grid { grid-template-columns: 1fr; gap: var(--s-12); text-align: center; } .feature-grid--reverse .feature-visual { order: 0; } .feature-copy { margin-inline: auto; } .feature-lede { margin-inline: auto; } .bullets { text-align: left; max-width: 460px; margin-inline: auto; } .steps { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } .privacy-grid { grid-template-columns: 1fr; max-width: 460px; } .benefit--privacy .benefit-inner { justify-items: center; text-align: center; } .benefit--privacy .benefit-lede { margin-inline: auto; } .bento { grid-template-columns: 1fr; } .bento-card--wide { grid-column: span 1; } .stats-grid { grid-template-columns: 1fr; gap: var(--s-12); } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; max-width: none; } } @media (max-width: 480px) { body { font-size: 16px; } .carousel-arrow { display: none; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column-reverse; align-items: flex-start; } } /* --------------------------- Reduced motion ------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .breathing-orb { animation: none; } .float-card { animation: none; } .device--iphone { animation: none !important; translate: none !important; rotate: none !important; } .reveal { opacity: 1; transform: none; } .carousel-track { scroll-behavior: auto; } } /* ============================ Legal / document pages =========================== */ /* Privacy, Terms, Support — quiet long-form reading on the same warm paper. */ .doc-header { position: sticky; top: 0; z-index: 100; background: var(--header-fill, rgba(255,248,239,0.82)); -webkit-backdrop-filter: var(--glass-blur, blur(14px)); backdrop-filter: var(--glass-blur, blur(14px)); border-bottom: 1px solid var(--hairline); } .doc-header .nav { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: var(--s-6); } .doc-back { color: var(--ink-2); font-size: 15px; display: inline-flex; align-items: center; gap: 7px; } .doc-back:hover { color: var(--ink); } .doc-back .icon { width: 16px; height: 16px; } .legal { padding-block: clamp(48px, 8vw, 96px) clamp(64px, 10vw, 120px); } .legal-doc { max-width: 760px; margin-inline: auto; } .legal-doc .eyebrow { margin-bottom: 10px; } .legal-doc h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(32px, 5vw, 46px); line-height: 1.08; color: var(--ink); margin-bottom: 14px; } .legal-meta { color: var(--ink-3); font-size: 14px; margin-bottom: 8px; } .legal-lede { color: var(--ink-2); font-size: 17.5px; line-height: 1.6; margin-bottom: 12px; } .legal-doc h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; font-size: clamp(21px, 2.6vw, 25px); color: var(--ink); margin-top: 44px; margin-bottom: 12px; padding-top: 20px; border-top: 1px solid var(--hairline); } .legal-doc h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin-top: 24px; margin-bottom: 8px; } .legal-doc p, .legal-doc li { color: var(--ink-2); font-size: 16px; line-height: 1.72; } .legal-doc p { margin-bottom: 14px; } .legal-doc ul, .legal-doc ol { margin: 0 0 16px 0; padding-left: 22px; display: grid; gap: 8px; } .legal-doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .legal-doc a:hover { color: var(--accent-hover); } .legal-doc strong { color: var(--ink); font-weight: 600; } .legal-note { background: var(--accent-wash); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 18px 20px; margin: 22px 0; } .legal-note p:last-child { margin-bottom: 0; } .legal-entity { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 18px 20px; margin-top: 28px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); } .legal-entity strong { display: block; color: var(--ink); margin-bottom: 4px; } .footer-legal { font-size: 13px; color: var(--ink-3); margin-top: 10px; line-height: 1.6; }