/* ================================================================ Bellyful — Pre-launch Landing Page Design spec in CSS for designer handoff to Figma. Tokens mirror frontend-expo/src/theme/designTokens.ts exactly. Mobile-first, modern CSS (Grid, Flexbox, clamp, :focus-visible). ================================================================ */ /* ========================================================= DESIGN TOKENS — light theme (default) Change values here; never hardcode elsewhere. ========================================================= */ :root { /* Color — brand */ --color-primary: #4285f4; --color-primary-light: #d6def9; --color-primary-dark: #25368a; --color-secondary: #a643e1; --color-secondary-light: #edd9f9; --color-secondary-dark: #642887; --color-success: #34a853; --color-warning: #fbbc04; --color-error: #d93025; --color-error-tint: rgba(217, 48, 37, 0.06); /* Color — text */ --color-text-primary: #202124; --color-text-secondary: #5f6368; --color-text-tertiary: #757575; --color-text-on-primary: #ffffff; /* Color — backgrounds */ --color-bg-primary: #ffffff; --color-bg-secondary: #f5f5f5; --color-bg-tertiary: #fafafa; --color-surface: #f8f9fa; --color-border: #e0e0e0; /* Glass tokens (light) */ --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(255, 255, 255, 0.20); --glass-blur: 20px; /* Typography */ --font-display: 'Comfortaa', sans-serif; --font-ui: 'Quicksand', sans-serif; --font-body: 'Nunito', sans-serif; /* Font sizes */ --size-xs: 12px; --size-sm: 14px; --size-md: 16px; --size-lg: 18px; --size-xl: 20px; --size-2xl: 24px; --size-3xl: 30px; --size-4xl: 36px; --size-wordmark: 42px; /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Spacing scale — 8px base */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15); --shadow-modal: 0 16px 32px rgba(0, 0, 0, 0.25); /* Motion */ --motion-fast: 150ms; --motion-standard: 250ms; --motion-slow: 350ms; --easing-standard: cubic-bezier(0.33, 1, 0.68, 1); --easing-entrance: cubic-bezier(0, 0, 0.2, 1); --easing-exit: cubic-bezier(0.4, 0, 1, 1); /* Derived — gradient for wordmark + primary fills */ --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); /* Layout */ --container-max: 1200px; --container-padding: var(--space-lg); /* Section vertical rhythm — single source of truth for inter-section padding. One knob. Change here to tighten or loosen the whole page. */ --space-section: var(--space-3xl); /* Accent color — warm editorial punctuation (em-dashes, dividers, rare highlights). Used very sparingly. Terracotta reads as food-warm without competing with the primary blue/purple brand. */ --color-accent: #d96e3c; --color-accent-tint: rgba(217, 110, 60, 0.12); } /* ========================================================= DESIGN TOKENS — dark theme overrides Not an invert: opacity + shadow values are re-tuned per spec. ========================================================= */ /* Dark theme — applied via [data-theme="dark"] on . Toggle script in index.html sets this attribute pre-paint based on localStorage + system preference, so first paint is in the correct theme (no flash). */ :root[data-theme="dark"] { --color-text-primary: #f5f5f5; --color-text-secondary: #e0e0e0; --color-text-tertiary: #b0b0b0; --color-bg-primary: #212121; --color-bg-secondary: #303030; --color-bg-tertiary: #2a2a2a; --color-surface: #2a2a2a; --color-border: rgba(255, 255, 255, 0.10); --glass-bg: rgba(18, 18, 18, 0.75); --glass-border: rgba(255, 255, 255, 0.10); --glass-blur: 25px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.45); --shadow-modal: 0 16px 32px rgba(0, 0, 0, 0.55); /* Error tokens get dark-mode overrides. The default tint at 6% opacity is barely perceptible against the dark surface (#2a2a2a); this lifts it to ~14% so the error background is visibly distinct. The lighter foreground (#f87171 vs #d93025) stays above 4.5:1 contrast on dark surfaces while reading less aggressive than full saturation. */ --color-error: #f87171; --color-error-tint: rgba(248, 113, 113, 0.14); } /* ========================================================= RESET + BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); font-size: var(--size-md); line-height: 1.55; color: var(--color-text-primary); background: var(--color-bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3 { margin: 0; font-family: var(--font-ui); font-weight: var(--weight-semibold); line-height: 1.2; color: var(--color-text-primary); } p { margin: 0; } ul { list-style: none; margin: 0; padding: 0; } a { color: var(--color-primary); text-decoration: none; transition: color var(--motion-fast) var(--easing-standard); } a:hover { color: var(--color-primary-dark); } /* Keyboard focus — visible on every focusable */ :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } /* ========================================================= SKIP LINK — accessible keyboard navigation ========================================================= */ .skip-link { position: absolute; top: -40px; left: var(--space-sm); background: var(--color-primary); color: var(--color-text-on-primary); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); z-index: 1000; font-weight: var(--weight-semibold); transition: top var(--motion-fast) var(--easing-entrance); } .skip-link:focus { top: var(--space-sm); color: var(--color-text-on-primary); } /* ========================================================= LAYOUT PRIMITIVES — shared section container ========================================================= */ .section__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); width: 100%; } .section__heading { font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: clamp(var(--size-2xl), 3.2vw, var(--size-3xl)); color: var(--color-text-primary); margin-bottom: var(--space-xl); text-align: center; letter-spacing: -0.015em; } .section__heading--left { text-align: left; } .section__heading--center { text-align: center; } /* ========================================================= BUTTONS ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--size-md); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-full); border: none; cursor: pointer; min-height: 48px; /* touch target */ text-align: center; transition: transform var(--motion-fast) var(--easing-standard), box-shadow var(--motion-standard) var(--easing-standard), background var(--motion-standard) var(--easing-standard); will-change: transform; } .btn--primary { background: var(--gradient-brand); color: var(--color-text-on-primary); box-shadow: var(--shadow-md); } .btn--primary:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); color: var(--color-text-on-primary); } .btn--primary:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-sm); } .btn__arrow { display: inline-block; transition: transform var(--motion-fast) var(--easing-standard); } .btn:hover .btn__arrow { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .btn, .btn__arrow { transition: none; } .btn--primary:hover, .btn--primary:active { transform: none; } } /* ========================================================= SECTION 1: Hero ========================================================= */ .hero { position: relative; overflow: hidden; padding: var(--space-2xl) 0 var(--space-xl); background: radial-gradient(1200px 600px at 80% -10%, var(--color-primary-light) 0%, transparent 60%), radial-gradient(900px 500px at 0% 110%, var(--color-secondary-light) 0%, transparent 60%), var(--color-bg-primary); } [data-theme="dark"] .hero { background: radial-gradient(1200px 600px at 80% -10%, rgba(66, 133, 244, 0.12) 0%, transparent 60%), radial-gradient(900px 500px at 0% 110%, rgba(166, 67, 225, 0.12) 0%, transparent 60%), var(--color-bg-primary); } .hero__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: center; position: relative; z-index: 1; } .hero__copy { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); } /* ================================================================ Theme toggle — fixed floating button, top-right Shows sun icon in light mode, moon icon in dark mode. Background uses glass tokens so it visually matches section cards. ================================================================ */ .theme-toggle { position: fixed; top: var(--space-lg); right: var(--space-lg); width: 44px; height: 44px; border-radius: var(--radius-full); border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); color: var(--color-text-primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: background var(--motion-standard) var(--easing-standard), box-shadow var(--motion-standard) var(--easing-standard), transform var(--motion-fast) var(--easing-standard); z-index: 100; } .theme-toggle:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .theme-toggle__icon { display: block; } /* Icon visibility keyed to theme attribute. Show sun when light (click to go dark), moon when dark (click to go light). */ :root[data-theme="dark"] .theme-toggle__icon--sun { display: none; } :root[data-theme="light"] .theme-toggle__icon--moon { display: none; } :root:not([data-theme]) .theme-toggle__icon--moon { display: none; } @media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle:hover { transition: none; transform: none; } } @media (max-width: 480px) { .theme-toggle { top: var(--space-md); right: var(--space-md); } } /* Gradient wordmark — Comfortaa, primary→secondary */ .wordmark { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(40px, 7vw, 72px); line-height: 1; letter-spacing: -0.02em; letter-spacing: -0.02em; margin: 0; } .wordmark__text { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 200%; animation: shimmer 6s ease-in-out infinite; display: inline-block; } /* .ai TLD — extends the wordmark gradient's endpoint color so the suffix reads as a natural continuation, not a separate accent. Sized smaller than main wordmark. (Brand guide originally spec'd accent green, but that was from a placeholder palette; the shipping tokens are blue -> purple.) */ .wordmark__tld { color: var(--color-secondary); font-family: var(--font-display); font-size: 0.42em; font-weight: var(--weight-regular); letter-spacing: 0; vertical-align: baseline; margin-left: 0.02em; display: inline-block; /* Do not inherit the gradient text-clip from parent — render as solid color */ background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; animation: none; } @keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .wordmark__text { animation: none; } } .tagline { font-family: var(--font-ui); font-weight: var(--weight-medium); font-size: clamp(var(--size-xl), 3vw, var(--size-3xl)); color: var(--color-text-secondary); letter-spacing: 0.01em; } .hook { font-family: var(--font-body); font-size: clamp(var(--size-md), 2vw, var(--size-lg)); color: var(--color-text-secondary); max-width: 460px; margin: 0 auto; } .hero__visual { display: flex; justify-content: center; align-items: center; } /* Hippo imagery — soft pastel halo so background is never "busy" */ .hippo { width: 100%; max-width: 320px; height: auto; filter: drop-shadow(0 12px 24px rgba(38, 54, 138, 0.15)); animation: float 7s ease-in-out infinite; } .hippo--hero { max-width: 420px; } .hippo--small { max-width: 260px; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .hippo { animation: none; } } /* Confetti — CSS-only decorative particles */ .confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .confetti-dot { position: absolute; width: 10px; height: 10px; border-radius: var(--radius-full); opacity: 0.08; animation: drift 12s linear infinite; } /* Randomized positions + colors — using the brand palette */ .confetti-dot--1 { top: 10%; left: 8%; background: var(--color-primary); animation-delay: 0s; } .confetti-dot--2 { top: 22%; left: 78%; background: var(--color-secondary); animation-delay: -2s; width: 14px; height: 14px; } .confetti-dot--3 { top: 65%; left: 12%; background: var(--color-secondary); animation-delay: -4s; } .confetti-dot--4 { top: 80%; left: 85%; background: var(--color-primary); animation-delay: -6s; width: 8px; height: 8px; } .confetti-dot--5 { top: 45%; left: 48%; background: var(--color-warning); animation-delay: -1s; opacity: 0.06; } .confetti-dot--6 { top: 15%; left: 55%; background: var(--color-success); animation-delay: -3s; opacity: 0.06; width: 12px; height: 12px; } .confetti-dot--7 { top: 55%; left: 92%; background: var(--color-primary); animation-delay: -5s; } .confetti-dot--8 { top: 90%; left: 35%; background: var(--color-secondary); animation-delay: -7s; } .confetti-dot--9 { top: 35%; left: 20%; background: var(--color-primary); animation-delay: -8s; opacity: 0.06; } .confetti-dot--10 { top: 5%; left: 40%; background: var(--color-secondary); animation-delay: -9s; width: 16px; height: 16px; opacity: 0.07; } .confetti-dot--11 { top: 72%; left: 60%; background: var(--color-primary); animation-delay: -10s; } .confetti-dot--12 { top: 28%; left: 30%; background: var(--color-warning); animation-delay: -11s; opacity: 0.07; } @keyframes drift { 0% { transform: translate(0, 0); } 50% { transform: translate(10px, -14px); } 100% { transform: translate(0, 0); } } @media (prefers-reduced-motion: reduce) { .confetti-dot { animation: none; } } /* ========================================================= SECTION 2: The pain ========================================================= */ .pain { padding: var(--space-section) 0; background: var(--color-bg-primary); } /* Editorial list — not a grid of boxes. Each pain vignette sits on a thin rule line, leading with a warm accent em-dash. Reads like a magazine strip rather than four feature cards. */ .pain__grid { display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; list-style: none; padding: 0; } .pain__item { padding: var(--space-md) var(--space-sm); font-family: var(--font-ui); font-weight: var(--weight-medium); font-size: clamp(var(--size-md), 1.8vw, var(--size-lg)); color: var(--color-text-primary); line-height: 1.5; border-top: 1px solid var(--color-border); transition: background var(--motion-standard) var(--easing-standard); } .pain__item:last-child { border-bottom: 1px solid var(--color-border); } .pain__item:hover { background: var(--color-accent-tint); } @media (prefers-reduced-motion: reduce) { .pain__item { transition: none; } } /* ========================================================= SECTION 3: The promise — glass cards Glass treatment: translucent bg + backdrop-filter blur + subtle border. ========================================================= */ .promise { position: relative; padding: var(--space-section) 0; background: radial-gradient(800px 400px at 20% 30%, var(--color-primary-light) 0%, transparent 55%), radial-gradient(800px 400px at 80% 70%, var(--color-secondary-light) 0%, transparent 55%), var(--color-bg-secondary); } [data-theme="dark"] .promise { background: radial-gradient(800px 400px at 20% 30%, rgba(66, 133, 244, 0.10) 0%, transparent 55%), radial-gradient(800px 400px at 80% 70%, rgba(166, 67, 225, 0.10) 0%, transparent 55%), var(--color-bg-secondary); } /* Auto-fit so the grid adapts to card count without hardcoded breakpoints. Stacks 1-col on narrow, 2×2 on tablet, 3–4 across on wide desktop. */ .promise__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-md); } .glass-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-md); /* Top highlight — light source cue for glass */ position: relative; overflow: hidden; transition: transform var(--motion-standard) var(--easing-standard), box-shadow var(--motion-standard) var(--easing-standard); } .glass-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100% ); pointer-events: none; } [data-theme="dark"] .glass-card::before { background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.30) 50%, transparent 100% ); } .glass-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .glass-card__title { font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--size-xl); color: var(--color-text-primary); margin-bottom: var(--space-xs); letter-spacing: -0.01em; } .glass-card__body { font-family: var(--font-body); font-size: var(--size-md); line-height: 1.6; color: var(--color-text-secondary); } @media (prefers-reduced-motion: reduce) { .glass-card, .glass-card:hover { transition: none; transform: none; } } /* ========================================================= SECTION 4: Founding hosts ========================================================= */ .founding { padding: var(--space-section) 0; background: var(--color-bg-primary); } .founding__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: center; } .founding__copy .section__heading { margin-bottom: var(--space-md); } .founding__lede { font-family: var(--font-body); font-size: var(--size-lg); color: var(--color-text-secondary); margin-bottom: var(--space-lg); } .founding__perks { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-xl); } .founding__perks li { position: relative; padding-left: var(--space-xl); font-family: var(--font-body); font-size: var(--size-md); color: var(--color-text-primary); line-height: 1.5; } .founding__perks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--gradient-brand); } .founding__visual { display: flex; justify-content: center; align-items: center; } /* ========================================================= Waitlist form Shared between section 4 (founding) and section 5 (final). Placeholder only — action="#" — no backend. ========================================================= */ .waitlist-form { width: 100%; } .waitlist-form__label { display: block; font-family: var(--font-ui); font-weight: var(--weight-medium); font-size: var(--size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-sm); } .waitlist-form__row { display: flex; flex-direction: column; gap: var(--space-sm); } .waitlist-form__input { flex: 1; min-height: 48px; padding: var(--space-md) var(--space-lg); font-family: var(--font-body); font-size: var(--size-md); color: var(--color-text-primary); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); transition: border-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard); } .waitlist-form__input::placeholder { color: var(--color-text-tertiary); } .waitlist-form__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } [data-theme="dark"] .waitlist-form__input:focus { box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.25); } .waitlist-form__submit { white-space: nowrap; } /* Honeypot — visually hidden, off-screen, not tabbable */ .waitlist-form__honeypot { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; left: -9999px; } .waitlist-form__hint { margin-top: var(--space-sm); font-size: var(--size-sm); color: var(--color-text-tertiary); } .waitlist-form--centered { max-width: 560px; margin: 0 auto; } .waitlist-form--centered .waitlist-form__label { text-align: left; } /* ========================================================= SECTION 5: Final CTA + footer ========================================================= */ .final { padding: var(--space-xl) 0 var(--space-lg); background: var(--color-bg-secondary); } .final__inner { max-width: 720px; margin: 0 auto; padding: 0 var(--container-padding); text-align: center; } .final__inner .section__heading { margin-bottom: var(--space-xl); } .credibility { margin: 0 auto; font-family: var(--font-body); font-size: var(--size-sm); color: var(--color-text-tertiary); line-height: 1.6; max-width: 580px; text-wrap: balance; } /* Hero inline email capture — primary conversion surface. Lays out as input + button, with a small secondary anchor link below. Reuses .waitlist-form; this selector just fine-tunes widths. */ .hero__capture { width: 100%; max-width: 460px; margin-top: var(--space-md); } .hero__capture .waitlist-form__hint { margin-top: var(--space-xs); } /* Secondary "see founding perks" anchor under the hero email field. Intentionally quiet — a text-link, not a second button. */ .hero__secondary { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); font-family: var(--font-ui); font-weight: var(--weight-medium); font-size: var(--size-sm); color: var(--color-text-secondary); text-decoration: none; border-bottom: 1px dashed var(--color-text-tertiary); padding-bottom: 1px; transition: color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard); } .hero__secondary:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); } .hero__secondary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 2px; } /* Footer */ .site-footer { padding: var(--space-xl) 0 var(--space-2xl); background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); } .site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); text-align: center; } .site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: center; } .site-footer__nav a { font-family: var(--font-ui); font-size: var(--size-sm); color: var(--color-text-secondary); font-weight: var(--weight-medium); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); min-height: 44px; display: inline-flex; align-items: center; } .site-footer__nav a:hover { color: var(--color-primary); } .site-footer__copy { font-family: var(--font-body); font-size: var(--size-sm); color: var(--color-text-tertiary); } /* ========================================================= RESPONSIVE — tablet (≥768px) ========================================================= */ @media (min-width: 768px) { :root { --container-padding: var(--space-2xl); } .section__inner { padding: 0 var(--space-2xl); } /* Hero — two columns. Tightened from var(--space-4xl) to a single rhythm token so tuning happens in one place. */ .hero { padding: var(--space-section) 0 var(--space-2xl); } .hero__inner { grid-template-columns: 1.1fr 1fr; gap: var(--space-2xl); } .hero__copy { text-align: left; align-items: flex-start; } .hook { margin: 0; } .hippo--hero { max-width: 380px; } /* Pain — editorial list stays single-column even on desktop; max-width keeps line length readable. Do NOT restore the 2x2 card grid. */ .pain { padding: var(--space-section) 0; } /* Promise — 3 columns */ .promise { padding: var(--space-section) 0; } /* Desktop gap — grid template stays auto-fit from the base rule so it adapts to however many cards are in the section (3, 4, or more). */ .promise__grid { gap: var(--space-md); } /* Founding — text + visual side-by-side */ .founding { padding: var(--space-section) 0; } .founding__inner { grid-template-columns: 1.3fr 1fr; gap: var(--space-2xl); } .waitlist-form__row { flex-direction: row; align-items: stretch; } .waitlist-form__submit { flex-shrink: 0; } /* Final — credibility-line only, no form. Compact strip above footer. */ .final { padding: var(--space-xl) 0 var(--space-lg); } /* Footer */ .site-footer__inner { flex-direction: row; justify-content: space-between; text-align: left; } } /* ========================================================= RESPONSIVE — desktop (≥1280px) ========================================================= */ @media (min-width: 1280px) { .hero { padding: var(--space-section) 0 var(--space-2xl); } .hippo--hero { max-width: 420px; } .hippo--small { max-width: 260px; } } /* ========================================================= FORM VALIDATION — inline error states for email + general inputs. Progressive enhancement: HTML5 type="email" + required still apply when JS is unavailable; this layer adds nicer UX when JS is present (forms set noValidate to suppress the HTML5 popover). ========================================================= */ .waitlist-form__input[aria-invalid="true"], .contact-form__input[aria-invalid="true"], .contact-form__select[aria-invalid="true"], .contact-form__textarea[aria-invalid="true"] { border-color: var(--color-error); background-color: var(--color-error-tint); } .form-error { margin: var(--space-xs) 0 0; font-family: var(--font-ui); font-size: var(--size-sm); font-weight: var(--weight-medium); color: var(--color-error); line-height: 1.4; } .form-error[hidden] { display: none; } /* The waitlist forms switched away from `hidden` toggling on the error region: the
. Opinionated: one column, balanced rhythm, no fancy drop caps, no columns. Designed to print cleanly and to read on mobile. ========================================================= */ .prose { font-family: var(--font-body); font-size: var(--size-md); line-height: 1.7; color: var(--color-text-primary); } .prose > * + * { margin-top: var(--space-lg); } .prose h2 { font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--size-2xl); line-height: 1.3; color: var(--color-text-primary); letter-spacing: -0.005em; margin-top: var(--space-2xl); margin-bottom: var(--space-md); } .prose h3 { font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--size-lg); line-height: 1.3; color: var(--color-text-primary); margin-top: var(--space-xl); margin-bottom: var(--space-sm); } /* Reset the generic sibling-spacing rule where it collides with heading rules above. Headings own their own top margins. */ .prose > h2 + *, .prose > h3 + * { margin-top: var(--space-md); } .prose p { margin: 0; } .prose ul, .prose ol { padding-left: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { padding-left: var(--space-xs); line-height: 1.7; } .prose li::marker { color: var(--color-primary); } .prose strong { color: var(--color-text-primary); font-weight: var(--weight-semibold); } .prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .prose a:hover { color: var(--color-primary-dark); text-decoration-thickness: 2px; } [data-theme="dark"] .prose a:hover { color: var(--color-primary-light); } .prose blockquote { margin: 0; padding: var(--space-md) var(--space-lg); border-left: 3px solid var(--color-primary); background: var(--color-surface); border-radius: var(--radius-md); color: var(--color-text-secondary); font-style: italic; } /* ========================================================= CONTACT FORM Used on contact.html. Reuses .glass-card base for the form container (matches Promise section visual language) plus its own field-level rules. Labels sit above inputs (vertical), different from the waitlist form, where a short email input sits next to its submit on a row. ========================================================= */ .contact-form { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-xl); } .contact-form__field { display: flex; flex-direction: column; gap: var(--space-sm); } .contact-form__label { font-family: var(--font-ui); font-weight: var(--weight-medium); font-size: var(--size-sm); color: var(--color-text-secondary); } /* Shared input/select/textarea styling. Inherits from waitlist form tokens for consistency but uses the medium radius (not pill) because multi-line textareas and selects look wrong with a fully rounded corner at this height. */ .contact-form__input, .contact-form__select, .contact-form__textarea { min-height: 48px; padding: var(--space-md) var(--space-lg); font-family: var(--font-body); font-size: var(--size-md); line-height: 1.5; color: var(--color-text-primary); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard); width: 100%; box-sizing: border-box; } .contact-form__input::placeholder, .contact-form__textarea::placeholder { color: var(--color-text-tertiary); } .contact-form__textarea { resize: vertical; min-height: 140px; font-family: var(--font-body); } /* Native select arrow indicator (subtle, token-driven). Keeps platform accessibility + keyboard handling intact. */ .contact-form__select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right var(--space-lg) center; padding-right: var(--space-2xl); } [data-theme="dark"] .contact-form__select { background-image: url("data:image/svg+xml;utf8,"); } .contact-form__input:focus, .contact-form__select:focus, .contact-form__textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } [data-theme="dark"] .contact-form__input:focus, [data-theme="dark"] .contact-form__select:focus, [data-theme="dark"] .contact-form__textarea:focus { box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.25); } /* Honeypot: off-screen, not tabbable, invisible to AT. Bots that fill every field will trip this; legit users never see it. */ .contact-form__honeypot { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; left: -9999px; } .contact-form__submit { align-self: flex-start; margin-top: var(--space-sm); } .contact-form__hint { font-family: var(--font-body); font-size: var(--size-sm); color: var(--color-text-tertiary); margin: 0; } /* Prefill caption shown only when the contact email is auto-filled from a prior waitlist signup. Slightly nudged up against the input and `[hidden]` defeats the bare class display so JS can show/hide reliably (cf. .waitlist-form__row[hidden] above). */ .contact-form__prefill-hint { margin-top: var(--space-xs); } .contact-form__prefill-hint[hidden] { display: none; } /* ========================================================= RESPONSIVE: subpages at tablet+ (min-width 768px) ========================================================= */ @media (min-width: 768px) { .subpage { padding: var(--space-3xl) var(--space-2xl) var(--space-4xl); } .subpage__header { margin-bottom: var(--space-3xl); } .contact-form { padding: var(--space-2xl); } .contact-form__submit { align-self: flex-start; } }