/* ============================================ Livo landing — foundation Tokens, themes (playful/vibrant × light/dark), responsive layout, header, hero, footer. ============================================ */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } img, svg { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; } a { color: inherit; text-decoration: none; } input, button, select, textarea { font: inherit; color: inherit; } ul { list-style: none; } /* Cross-device polish: kill the grey/blue tap flash on Android/Samsung, and offset every in-page scroll target so the fixed header doesn't eat the section title (Samsung/Pixel/iPhone all honour scroll-margin-top). */ * { -webkit-tap-highlight-color: transparent; } #hero, #features, #how-it-works, #gamification, #quotes, #roadmap, #mid-cta, #faq, #pains, #social-proof { scroll-margin-top: calc(var(--header-height) + var(--space-3)); } /* ---------- Tokens ---------- */ :root { --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 9999px; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.10); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.20); --container-max: 1200px; --header-height: 64px; --mobile-cta-height: 64px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 150ms; --duration-base: 300ms; } /* ---------- Themes ---------- */ /* Defaults = playful light. Stored attributes on override. */ :root, [data-theme='playful'][data-scheme='light'] { --bg: #FAFAFA; --surface: #FFFFFF; --card: #FFFFFF; --text: #2D3748; --text-secondary: #718096; --border: #E2E8F0; --primary: #58CC02; --primary-dark: #4CAF50; --primary-text: #2D7A0A; /* Dark text on bright Duolingo-green: ~10:1 contrast, matches the app's own theme spec (playful.ts onPrimary = #000000). White-on-green only reaches 2.1:1 and fails WCAG AA. */ --on-primary: #0A1A05; --secondary: #FF9500; --secondary-text: #B35C00; --on-secondary: #1A1A1A; --accent: #00BCD4; --success: #48BB78; --warning: #ED8936; --error: #C53030; --primary-glow: rgba(88, 204, 2, 0.25); --primary-tint: rgba(88, 204, 2, 0.08); --hero-bg-start: #FFFEF7; --hero-bg-end: #EAF8DA; } [data-theme='playful'][data-scheme='dark'] { --bg: #1A202C; --surface: #2D3748; --card: #2D3748; --text: #F7FAFC; --text-secondary: #A0AEC0; --border: #4A5568; --primary: #58CC02; --primary-dark: #4CAF50; --primary-text: #86E62A; --on-primary: #0A1A05; --secondary: #FF9500; --secondary-text: #FFB74D; --on-secondary: #1A1100; --accent: #00BCD4; --success: #48BB78; --warning: #ED8936; --error: #F56565; --primary-glow: rgba(88, 204, 2, 0.30); --primary-tint: rgba(88, 204, 2, 0.12); --hero-bg-start: #1A202C; --hero-bg-end: #24364A; } [data-theme='vibrant'][data-scheme='light'] { --bg: #F8F9FA; --surface: #FFFFFF; --card: #FFFFFF; --text: #1D1D1F; --text-secondary: #6E6E73; --border: #D1D1D6; --primary: #007AFF; --primary-dark: #0051D5; --primary-text: #0055B3; --on-primary: #FFFFFF; --secondary: #FF2D92; --secondary-text: #C4006A; --on-secondary: #FFFFFF; --accent: #FFD60A; --success: #30D158; --warning: #FF9F0A; --error: #FF3B30; --primary-glow: rgba(0, 122, 255, 0.25); --primary-tint: rgba(0, 122, 255, 0.08); --hero-bg-start: #F0F7FF; --hero-bg-end: #FFE8F3; } [data-theme='vibrant'][data-scheme='dark'] { --bg: #000000; --surface: #1C1C1E; --card: #1C1C1E; --text: #FFFFFF; --text-secondary: #98989D; --border: #38383A; --primary: #0A84FF; --primary-dark: #0051D5; --primary-text: #4DA8FF; --on-primary: #FFFFFF; --secondary: #FF2D92; --secondary-text: #FF6CB1; --on-secondary: #FFFFFF; --accent: #FFD60A; --success: #30D158; --warning: #FF9F0A; --error: #FF453A; --primary-glow: rgba(10, 132, 255, 0.30); --primary-tint: rgba(10, 132, 255, 0.12); --hero-bg-start: #0F0F12; --hero-bg-end: #1A1626; } /* ---------- Base ---------- */ body { font-family: var(--font); font-size: 17px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; overflow-x: hidden; padding-bottom: calc(var(--mobile-cta-height) + var(--space-3)); transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); } :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); } .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; } .skip-link { position: absolute; top: -100px; left: var(--space-3); background: var(--primary); color: var(--on-primary); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: 700; z-index: 9999; } .skip-link:focus { top: var(--space-3); } .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-3); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 14px var(--space-4); min-height: 48px; border-radius: var(--radius-md); font-weight: 700; font-size: 16px; text-align: center; white-space: nowrap; transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--primary-dark); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .btn-ghost { background: transparent; color: var(--text); border: 2px solid var(--border); } .btn-ghost:hover { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-text); } .btn-sm { min-height: 44px; padding: 10px var(--space-3); font-size: 14px; } /* ---------- Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; transition: background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), backdrop-filter var(--duration-base) var(--ease-out); } .site-header.is-scrolled { background: var(--surface); box-shadow: var(--shadow-sm); } @supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) { .site-header.is-scrolled { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } [data-scheme='dark'] .site-header.is-scrolled { background: rgba(28, 32, 44, 0.85); } } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); max-width: var(--container-max); margin-inline: auto; padding: var(--space-2) var(--space-3); min-height: var(--header-height); } .brand { display: inline-flex; align-items: center; gap: var(--space-2); } .brand-logo { width: 36px; height: 36px; border-radius: var(--radius-sm); } .brand-name { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--text); } .primary-nav { display: none; gap: var(--space-4); align-items: center; } .primary-nav a { font-weight: 600; color: var(--text-secondary); padding: var(--space-2) 0; transition: color var(--duration-fast) var(--ease-out); } .primary-nav a:hover { color: var(--primary-text); } .header-controls { display: flex; align-items: center; gap: var(--space-2); } .lang-switcher { position: relative; display: inline-block; } .lang-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-full); font-weight: 700; font-size: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); min-height: 36px; cursor: pointer; user-select: none; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .lang-pill:hover { border-color: var(--primary); background: var(--primary-tint); } .lang-pill[aria-expanded='true'] { border-color: var(--primary); background: var(--primary-tint); } .lang-chevron { font-size: 10px; transition: transform var(--duration-fast) var(--ease-out); } .lang-pill[aria-expanded='true'] .lang-chevron { transform: rotate(180deg); } .lang-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 160px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 4px; z-index: 150; list-style: none; margin: 0; } .lang-menu[hidden] { display: none; } .lang-option { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--radius-sm); font-weight: 600; color: var(--text); cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .lang-option:hover { background: var(--primary-tint); color: var(--primary-text); } .lang-option[aria-checked='true'] { background: var(--primary-tint); color: var(--primary-text); font-weight: 800; } .lang-option[aria-checked='true']::after { content: ' ✓'; font-weight: 800; } /* Footer lang menu: opens upward (doesn't fall off the page) and anchors to the LEFT on mobile (footer-controls sits on the left there), then flips back to right on tablet+ where footer-controls is in the right column. */ .site-footer .lang-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; } @media (min-width: 768px) { .site-footer .lang-menu { left: auto; right: 0; } } /* Header theme toggle — slightly smaller than footer version, fits mobile chrome. */ .theme-toggle--header { width: 36px; height: 36px; font-size: 15px; } .header-cta { display: none; } /* Classic hamburger — three solid lines, the universally recognised menu icon. No X-animation on open: the menu state is communicated via the drawer itself (and aria-expanded for screen readers), which keeps the icon shape predictable across cultures + ages. */ .nav-toggle { width: 44px; height: 44px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background var(--duration-fast) var(--ease-out); } .nav-toggle:hover { background: var(--primary-tint); } .nav-toggle span { display: block; width: 24px; height: 3px; background: var(--text); border-radius: 2px; } .nav-toggle span + span { margin-top: 5px; } /* Mobile nav drawer — fixed-position panel that sits flush below the header. Using position:fixed (not nested inside the header's flow) avoids stacking- context surprises and works reliably across iOS/Android browsers. When the drawer is open we also force the header to its solid surface so the transparent-on-hero header doesn't disconnect visually from the panel. */ .mobile-nav { position: fixed; top: var(--header-height); left: 0; right: 0; display: flex; flex-direction: column; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--space-2) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow-md); z-index: 99; /* dvh respects the collapsing URL bar on iOS Safari/Samsung Internet so the drawer never sits taller than the actually-visible viewport. */ max-height: calc(100dvh - var(--header-height)); overflow-y: auto; } .mobile-nav[hidden] { display: none; } .mobile-nav a { padding: 14px 4px; font-weight: 700; font-size: 16px; color: var(--text); border-bottom: 1px solid var(--border); min-height: 48px; display: flex; align-items: center; } .mobile-nav a:nth-last-child(2) { border-bottom: none; } .mobile-nav-cta { margin-top: var(--space-3); justify-content: center; text-align: center; border-bottom: none !important; } /* When the mobile nav is open, give the header a solid surface so the transparent-hero state doesn't bleed into the menu panel below it. */ body.is-mobile-nav-open .site-header { background: var(--surface); box-shadow: var(--shadow-sm); } /* ---------- Hero ---------- */ .hero { position: relative; padding: calc(var(--header-height) + var(--space-5)) var(--space-3) var(--space-6); background: linear-gradient(180deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%); } .hero-inner { max-width: var(--container-max); margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: center; } .hero-copy { display: flex; flex-direction: column; gap: var(--space-3); text-align: center; align-items: center; } .hero-title { font-size: clamp(2rem, 7vw, 4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; } .wave-emoji { display: inline-block; transform-origin: 70% 70%; animation: wave 2.8s var(--ease-out) infinite; } @keyframes wave { 0%, 60%, 100% { transform: rotate(0deg); } 10%, 30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } } .hero-sub { font-size: clamp(1rem, 2.6vw, 1.2rem); color: var(--text-secondary); max-width: 560px; } .hero-chip-row { display: flex; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--border); font-size: 14px; font-weight: 700; color: var(--text); box-shadow: var(--shadow-sm); } .chip-flag { background: var(--primary-tint); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); } .hero-visual { order: -1; display: flex; justify-content: center; } .hero-logo { width: clamp(160px, 50vw, 360px); height: auto; animation: bob 3s ease-in-out infinite; filter: drop-shadow(var(--shadow-lg)); } @keyframes bob { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } } .hero-logo:hover { animation-play-state: paused; } /* ---------- Signup form ---------- */ /* Sizing hierarchy: - Device pills 48px (tertiary — picks an option) - Email + Submit 56px (primary action duo, visually aligned, chunky) - Row gap 12px so labels and rows breathe without floating apart */ .signup-form { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-2); width: 100%; max-width: 560px; } .signup-email { width: 100%; padding: 16px 18px; border-radius: var(--radius-md); border: 2px solid var(--border); background: var(--surface); color: var(--text); font-size: 17px; min-height: 56px; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .signup-email:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); outline: none; } .signup-email::placeholder { color: var(--text-secondary); opacity: 0.75; } .signup-submit { width: 100%; min-height: 56px; padding: 16px 28px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; } .signup-microcopy { font-size: 14px; color: var(--text-secondary); line-height: 1.45; } .form-message { font-size: 14px; min-height: 1.2em; margin-top: 2px; } .form-message[data-state='error'] { color: var(--error); font-weight: 600; } .form-message[data-state='success'] { color: var(--primary-text); font-weight: 700; } /* ---------- Honeypot (invisible to humans, bot trap) ---------- */ .signup-form .hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* ---------- Signup confirmation card ---------- */ .signup-confirmation { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: var(--space-2); width: 100%; max-width: 560px; padding: var(--space-4) var(--space-3); background: var(--surface); border: 2px solid var(--primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); text-align: center; animation: signup-confirmation-in var(--duration-base) var(--ease-out) both; } .signup-confirmation[data-status='duplicate'] { border-color: var(--border); } .signup-confirmation[data-status='waiting_list'] { border-color: var(--secondary, var(--primary)); } .signup-confirmation-icon { font-size: 2.25rem; line-height: 1; } .signup-confirmation-heading { font-size: clamp(1.15rem, 3vw, 1.4rem); font-weight: 800; color: var(--primary-text); margin: 0; outline: none; } .signup-confirmation-heading:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: var(--radius-sm); } .signup-confirmation-body { font-size: 15px; color: var(--text-secondary); line-height: 1.55; margin: 0; } .signup-confirmation-microcopy { font-size: 13px; color: var(--text-secondary); opacity: 0.85; margin: 0; } @keyframes signup-confirmation-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .signup-confirmation { animation: none; } } /* ---------- WhatsApp CTA ---------- */ .whatsapp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; min-height: 56px; width: 100%; border-radius: var(--radius-md); background: #25D366; color: #FFFFFF; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .whatsapp-btn:hover { background: #1EBE5C; box-shadow: var(--shadow-md); transform: translateY(-1px); color: #FFFFFF; } .whatsapp-btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .whatsapp-btn:focus-visible { outline: 3px solid #128C7E; outline-offset: 2px; } .whatsapp-btn-icon { display: inline-flex; width: 22px; height: 22px; color: currentColor; flex-shrink: 0; } .whatsapp-btn-icon svg { width: 100%; height: 100%; display: block; } /* ---------- "Use a different email" escape hatch ---------- */ .use-different-email { background: transparent; border: none; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; font-family: inherit; cursor: pointer; padding: var(--space-2); margin: 0 auto; } .use-different-email:hover { color: var(--primary-text); } .use-different-email:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---------- Signed-up page state — hide all "become a beta tester" affordances ---------- */ body.is-signed-up .header-cta, body.is-signed-up .mobile-nav-cta, body.is-signed-up .mobile-cta, body.is-signed-up a.btn-ghost[href='#hero-form'] { display: none !important; } /* ---------- Beta-tester CTA bits ---------- */ .hero-cta-headline { font-weight: 800; font-size: clamp(1rem, 2.6vw, 1.2rem); color: var(--primary-text); margin-top: var(--space-2); } .device-toggle { border: none; padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-2); width: 100%; } .device-toggle-label { flex-basis: 100%; font-weight: 800; font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; } .device-option { cursor: pointer; display: block; flex: 1; min-width: 130px; } .device-option input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .device-option-pill { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface); border: 2px solid var(--border); font-weight: 700; font-size: 15px; color: var(--text); min-height: 48px; transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .device-option:hover .device-option-pill { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .device-option input:checked + .device-option-pill { border-color: var(--primary); background: var(--primary-tint); color: var(--primary-text); box-shadow: var(--shadow-sm); } .device-option input:focus-visible + .device-option-pill { outline: 3px solid var(--primary); outline-offset: 2px; } .device-icon { width: 22px; height: 22px; flex-shrink: 0; } .device-icon--apple { color: var(--text); } [data-scheme='dark'] .device-icon--apple { color: var(--text); } /* ---------- Store chips ---------- Larger, fully-opaque text (was failing AA at 0.7 opacity × 11px). Dashed border communicates "coming soon / future state" without dimming the text. When state flips to live the chip drops the dashed border. */ .store-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--border); width: 100%; max-width: 560px; } .store-chip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface); border: 1.5px solid var(--border); font-size: 14px; color: var(--text); min-height: 56px; transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .store-chip.is-pending { border-style: dashed; cursor: default; } [data-launch-state='pre'] .store-chip { pointer-events: none; } .store-chip-icon { font-size: 22px; line-height: 1; width: 28px; height: 28px; flex-shrink: 0; } .store-chip-icon--apple { color: var(--text); } .store-chip-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; } .store-chip-status { font-size: 12px; font-weight: 600; color: var(--text-secondary); } .store-chip-name { font-weight: 800; font-size: 15px; } /* ---------- Social proof ---------- */ .social-proof { padding: var(--space-5) var(--space-3); background: var(--bg); border-bottom: 1px solid var(--border); } .social-proof-inner { max-width: var(--container-max); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; } .trust-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); } .trust-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--border); font-weight: 700; font-size: 14px; box-shadow: var(--shadow-sm); } .signup-counter { font-size: 14px; color: var(--text-secondary); } .signup-counter-number { color: var(--primary-text); font-weight: 800; } /* ===== Section bands (wireframe layouts) ===== */ .section-band { padding: var(--space-6) var(--space-3); border-bottom: 1px solid var(--border); } .section-band--alt { background: var(--surface); } .section-band-inner { max-width: var(--container-max); margin-inline: auto; } .section-head { text-align: center; margin-bottom: var(--space-4); } .section-head--mt { margin-top: var(--space-6); } .section-title { font-size: clamp(1.5rem, 4.5vw, 2.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-align: center; color: var(--text); text-wrap: balance; margin-bottom: var(--space-3); } .section-subtitle { color: var(--text-secondary); text-align: center; font-size: clamp(0.95rem, 2vw, 1.1rem); margin-bottom: var(--space-5); max-width: 680px; margin-inline: auto; } .section-bridge { text-align: center; font-size: clamp(1rem, 2.4vw, 1.25rem); font-weight: 700; color: var(--primary-text); margin-top: var(--space-4); } .section-cta-row { text-align: center; margin-top: var(--space-4); } /* Asset placeholder (dashed box where real illustration / mockup / map goes) */ .asset-placeholder { border: 2px dashed color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--primary-tint); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 13px; font-weight: 700; color: var(--primary-text); padding: var(--space-3); min-height: 140px; line-height: 1.3; } .asset-placeholder small { display: block; font-weight: 500; font-size: 11px; margin-top: 4px; opacity: 0.8; } .asset-placeholder--sm { min-height: 100px; padding: var(--space-2); font-size: 12px; } .asset-placeholder--wide { min-height: 180px; margin: var(--space-4) 0; } /* Real kawaii illustration slot (replaces dashed placeholder for ported SVGs). Uniform soft radial spotlight behind every illustration so the kawaii has the same visual base whether or not the SVG used to carry its own colored disc. Theme-aware via --primary-tint. */ .feature-illust { display: flex; align-items: center; justify-content: center; min-height: 140px; padding: var(--space-2); background: radial-gradient( ellipse at center, var(--primary-tint) 0%, transparent 62% ); border-radius: var(--radius-md); } .feature-illust img { display: block; width: 100%; max-width: 140px; max-height: 130px; height: auto; transition: transform var(--duration-base) var(--ease-out); } .feature-card:hover .feature-illust img { transform: scale(1.06) rotate(-2deg); } .feature-illust--sm { min-height: 88px; } .feature-illust--sm img { max-width: 84px; max-height: 84px; } /* Pain cards */ .pain-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-4); } .pain-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-sm); } .pain-quote { font-size: 1.05rem; font-weight: 600; color: var(--text); line-height: 1.4; } /* Feature cards (Tier 1 and 2) */ .feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-2); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .feature-card-title { font-size: clamp(1.05rem, 2.4vw, 1.25rem); font-weight: 800; } .feature-card p { color: var(--text-secondary); } /* Tier chips */ .tier-chip { align-self: flex-start; display: inline-flex; padding: 3px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } .tier-chip--live { background: var(--primary-tint); color: var(--primary-text); } .tier-chip--soon { background: rgba(237, 137, 54, 0.18); color: #B45309; } .tier-chip--vote { background: rgba(168, 85, 247, 0.15); color: #6B21A8; } [data-scheme='dark'] .tier-chip--soon { background: rgba(237, 137, 54, 0.25); color: #FFB74D; } [data-scheme='dark'] .tier-chip--vote { background: rgba(168, 85, 247, 0.25); color: #D8B4FE; } /* Tier 3 voting candidates */ .tier3-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--space-1) var(--space-3); margin: 0 calc(var(--space-3) * -1); padding-inline: var(--space-3); } .tier3-card { scroll-snap-align: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); text-align: center; display: flex; flex-direction: column; gap: var(--space-2); align-items: center; } .tier3-label { font-weight: 800; } .tier3-vote { color: var(--text-secondary); font-size: 11px; } /* How it works */ .steps-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); counter-reset: step; } .step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); } .step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: 24px; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); flex-shrink: 0; } .step-title { font-size: 1.1rem; font-weight: 800; } .step p { color: var(--text-secondary); } /* Gamification spotlight */ .spotlight { background: linear-gradient(180deg, var(--primary-tint) 0%, var(--surface) 100%); } .spotlight-mockup { margin: var(--space-4) auto; max-width: 280px; aspect-ratio: 9 / 19; border-radius: var(--radius-lg); border: 4px solid var(--text); background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 13px; font-weight: 700; text-align: center; padding: var(--space-3); line-height: 1.4; } .spotlight-mockup small { font-weight: 500; opacity: 0.8; } /* When the mockup contains a real SVG that already has a phone frame, drop the outer dark border so we don't end up with a double frame. */ .spotlight-mockup--filled { border: none; background: transparent; aspect-ratio: auto; max-width: 240px; padding: 0; display: block; } .spotlight-mockup--filled img { display: block; width: 100%; height: auto; filter: drop-shadow(var(--shadow-lg)); } /* Mockup row under the Tier 1 cards — 3 angled phone screenshots */ .mockup-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); justify-items: center; } .mockup { display: block; width: 100%; max-width: 180px; height: auto; filter: drop-shadow(var(--shadow-md)); transition: transform var(--duration-base) var(--ease-out); } .mockup--center { z-index: 2; } .mockup:hover { transform: translateY(-4px) scale(1.03); } /* Map strip — Mozambique roadmap. Inline SVG so element fills can resolve CSS variables and adapt to light/dark themes. */ .map-strip { margin: var(--space-4) 0 var(--space-3); display: flex; justify-content: center; overflow: hidden; } .map-strip svg { display: block; width: 100%; max-width: 640px; height: auto; } .map-strip .map-dot { fill: var(--surface); stroke: var(--text); } .map-strip .map-label { fill: var(--text); } .map-strip .map-pulse { fill: var(--primary); opacity: 0.25; } .map-strip .map-dot-active { fill: var(--primary); stroke: var(--text); } .map-strip .map-dot-active-eye { fill: var(--surface); } .map-strip .map-label-active { fill: var(--primary-text); } .spotlight-honest { text-align: center; color: var(--text-secondary); max-width: 600px; margin-inline: auto; } /* Quotes */ .quotes-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-4); } .quote-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-sm); align-items: flex-start; } .quote-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--primary-tint); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; filter: blur(2px); } .quote-text { font-size: 1.05rem; font-style: italic; font-weight: 600; color: var(--text); } .quote-microcopy { font-size: 13px; color: var(--text-secondary); } /* Cities strip */ .cities-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin: var(--space-4) 0; } .city-dot { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--border); font-weight: 700; font-size: 14px; color: var(--text-secondary); } .city-dot small { font-weight: 500; opacity: 0.7; } .city-dot--now { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .city-dot--now small { color: rgba(10, 26, 5, 0.75); opacity: 1; } /* Mid-page CTA band — dark text on bright green to meet WCAG AA (white on #58CC02 = 2.1:1, fails AA even for large text). Form fields stay white so the contrast inside reads cleanly. */ .cta-band { background: var(--primary); color: #0A1A05; text-align: center; border-bottom: none; } .cta-band-inner { max-width: 720px; } .cta-band-title { font-size: clamp(1.6rem, 5vw, 2.5rem); font-weight: 800; line-height: 1.15; margin-bottom: var(--space-2); color: #0A1A05; text-wrap: balance; } .cta-band-sub { color: rgba(10, 26, 5, 0.85); margin-bottom: var(--space-4); font-size: clamp(1rem, 2vw, 1.1rem); } .cta-band .signup-form { margin-inline: auto; } .cta-band .signup-email { background: #FFFFFF; color: #1A1A1A; border-color: rgba(10, 26, 5, 0.25); } .cta-band .signup-email:focus { border-color: #0A1A05; box-shadow: 0 0 0 4px rgba(10, 26, 5, 0.25); } .cta-band .signup-submit { background: #FFFFFF; color: var(--primary-text); } .cta-band .signup-submit:hover { background: #F4F4F4; } .cta-band .form-message[data-state='success'] { color: #0A1A05; font-weight: 800; } .cta-band .form-message[data-state='error'] { color: #5C0000; font-weight: 700; } /* Device-toggle pills inverted to read on green band */ .cta-band .device-toggle-label { color: rgba(10, 26, 5, 0.78); } .cta-band .device-option-pill { background: rgba(255, 255, 255, 0.95); border-color: rgba(10, 26, 5, 0.25); color: #1A3A1A; } .cta-band .device-option:hover .device-option-pill { border-color: #0A1A05; } .cta-band .device-option input:checked + .device-option-pill { background: #FFFFFF; border-color: #0A1A05; color: var(--primary-text); box-shadow: var(--shadow-md); } /* Confirmation card inverted to read on green band */ .cta-band .signup-confirmation { background: #FFFFFF; border-color: rgba(10, 26, 5, 0.25); margin-inline: auto; } .cta-band .signup-confirmation[data-status='duplicate'] { border-color: rgba(10, 26, 5, 0.18); } .cta-band .signup-confirmation[data-status='waiting_list'] { border-color: rgba(10, 26, 5, 0.35); } .cta-band .signup-confirmation-heading { color: var(--primary-text); } .cta-band .signup-confirmation-body, .cta-band .signup-confirmation-microcopy { color: rgba(10, 26, 5, 0.78); } .cta-band .whatsapp-btn { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6), var(--shadow-sm); } .cta-band .use-different-email { color: rgba(10, 26, 5, 0.7); } .cta-band .use-different-email:hover { color: #0A1A05; } /* FAQ */ .faq-list { max-width: 800px; margin-inline: auto; } .faq-item { border-bottom: 1px solid var(--border); } .faq-item summary { padding: var(--space-3) 0; font-weight: 700; font-size: 1rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); color: var(--text); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 24px; color: var(--primary-text); font-weight: 800; flex-shrink: 0; transition: transform var(--duration-fast) var(--ease-out); } .faq-item[open] summary::after { content: '−'; } .faq-item summary:hover { color: var(--primary-text); } .faq-item p { padding: 0 0 var(--space-3); color: var(--text-secondary); font-size: 15px; line-height: 1.55; } .faq-item a { color: var(--primary-text); text-decoration: underline; } /* ---------- Footer ---------- */ .site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: var(--space-5) var(--space-3) var(--space-4); } .footer-inner { max-width: var(--container-max); margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: var(--space-4); } .footer-brand { display: flex; align-items: center; gap: var(--space-2); } .footer-logo { width: 56px; height: 56px; border-radius: var(--radius-sm); } .footer-wordmark { font-weight: 800; font-size: 28px; color: var(--text); letter-spacing: -0.02em; } .footer-nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); } .footer-nav a, .footer-nav-btn { font-weight: 600; font-size: 1rem; color: var(--text-secondary); transition: color var(--duration-fast) var(--ease-out); min-height: 44px; display: inline-flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; } .footer-nav a:hover, .footer-nav-btn:hover { color: var(--primary-text); } .footer-controls { display: flex; gap: var(--space-2); align-items: center; } .theme-toggle { width: 44px; height: 44px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .theme-toggle:hover { border-color: var(--primary); background: var(--primary-tint); } /* Show what the click will CHANGE TO, not what mode we're currently in. Light mode → render moon (click switches to dark). Dark mode → render sun (click switches to light). */ .theme-toggle-sun { display: none; } .theme-toggle-moon { display: inline; } [data-scheme='dark'] .theme-toggle-sun { display: inline; } [data-scheme='dark'] .theme-toggle-moon { display: none; } .footer-contacts { display: flex; flex-direction: column; gap: var(--space-1); } .footer-contacts a { color: var(--text-secondary); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; } .footer-contacts a:hover { color: var(--primary-text); } .footer-credit { font-size: 13px; color: var(--text-secondary); padding-top: var(--space-3); border-top: 1px solid var(--border); } /* ---------- Sticky mobile CTA ---------- */ .mobile-cta { position: fixed; left: var(--space-3); right: var(--space-3); /* env() respects the iPhone home indicator so the CTA doesn't sit under it. */ bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: center; height: 52px; border-radius: var(--radius-md); background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: 16px; box-shadow: var(--shadow-lg); z-index: 90; transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); } .mobile-cta:hover { background: var(--primary-dark); } /* The sticky CTA hides whenever showing it would be redundant or in the way: - is-hero-visible: hero form is on screen (user has the real CTA right there) - is-cta-hidden: footer is entering view (page is ending) - has-cookie-banner: cookie banner is up (cookie choice should win attention) - is-mobile-nav-open: hamburger drawer is open (don't double-stack actions) */ body.is-hero-visible .mobile-cta, body.is-cta-hidden .mobile-cta, body.has-cookie-banner .mobile-cta, body.is-mobile-nav-open .mobile-cta { transform: translateY(140%); opacity: 0; pointer-events: none; } /* ---------- Contact sheet (modal-style) ---------- */ .contact-sheet { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; padding: var(--space-3); } .contact-sheet[hidden] { display: none; } .contact-sheet-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .contact-sheet-card { position: relative; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-5) var(--space-4); max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: var(--space-3); } .contact-sheet-close { position: absolute; top: var(--space-2); right: var(--space-2); width: 36px; height: 36px; border-radius: var(--radius-full); font-size: 20px; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; } .contact-sheet-close:hover { background: var(--primary-tint); color: var(--text); } .contact-sheet-title { font-weight: 800; font-size: 1.25rem; color: var(--text); } .contact-sheet-subject { font-size: 14px; color: var(--text-secondary); } .contact-sheet-subject::before { content: 'Subject: '; font-weight: 700; color: var(--text); } .contact-sheet-email-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--primary-tint); border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); } .contact-sheet-email { flex: 1; font-family: 'Nunito', monospace; font-weight: 700; font-size: 14px; color: var(--primary-text); word-break: break-all; } .contact-sheet-mailto { align-self: flex-start; } /* ---------- Cookie banner ---------- */ .cookie-banner { position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-3); z-index: 200; } .cookie-banner[hidden] { display: none; } .cookie-banner-inner { display: flex; flex-direction: column; gap: var(--space-3); } .cookie-text strong { display: block; margin-bottom: 4px; font-weight: 800; } .cookie-text span { font-size: 14px; color: var(--text-secondary); } .cookie-actions { display: flex; gap: var(--space-2); } .cookie-actions .btn { flex: 1; } /* ---------- Breakpoints (mobile-first) ---------- */ /* Form rows stay stacked + full-width at every breakpoint so the device pills, email input and submit button all share one column edge. Cleaner hierarchy for a multi-step signup than the newsletter-style inline pattern. */ /* Tablet+ : mobile CTA gone, multi-column sections, footer 2 rows. Note: header inline nav + CTA now wait until 1024px so tablets still use the hamburger — at 768px the four-link nav was wrapping on cramped viewports. */ @media (min-width: 768px) { body { padding-bottom: 0; } .mobile-cta { display: none; } .cookie-banner { bottom: var(--space-3); left: auto; right: var(--space-4); max-width: 420px; } .hero { padding: calc(var(--header-height) + var(--space-6)) var(--space-4) var(--space-7); } .hero-copy { text-align: left; align-items: flex-start; } .store-chips { justify-content: flex-start; } .section-band { padding: var(--space-7) var(--space-4); } .pain-grid { grid-template-columns: repeat(3, 1fr); } .feature-grid--3 { grid-template-columns: repeat(3, 1fr); } .feature-grid--2 { grid-template-columns: repeat(2, 1fr); } .steps-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } .quotes-grid { grid-template-columns: repeat(2, 1fr); } .mockup-row { grid-template-columns: repeat(3, 1fr); align-items: end; gap: var(--space-2); } .mockup { max-width: 200px; transform: rotate(-4deg); } .mockup--center { transform: rotate(0deg) translateY(-12px); max-width: 220px; } .mockup-row .mockup:last-child { transform: rotate(4deg); } .mockup-row .mockup:hover { transform: rotate(-4deg) translateY(-8px) scale(1.04); } .mockup-row .mockup--center:hover { transform: rotate(0deg) translateY(-20px) scale(1.04); } .mockup-row .mockup:last-child:hover { transform: rotate(4deg) translateY(-8px) scale(1.04); } .footer-inner { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav controls" "contacts contacts contacts" "credit credit credit"; align-items: center; column-gap: var(--space-4); } .footer-brand { grid-area: brand; } .footer-nav { grid-area: nav; justify-content: center; } .footer-controls { grid-area: controls; } .footer-contacts { grid-area: contacts; flex-direction: row; flex-wrap: wrap; gap: var(--space-4); } .footer-credit { grid-area: credit; } } /* Desktop : 2-column hero, logo right, inline nav + header CTA appear here */ @media (min-width: 1024px) { .hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-7); } .hero-visual { order: 0; } .hero-logo { width: clamp(280px, 32vw, 380px); } .header-inner { padding: var(--space-3) var(--space-4); } .brand-logo { width: 40px; height: 40px; } .brand-name { font-size: 24px; } /* Inline desktop nav appears here; hamburger + mobile drawer go away. */ .primary-nav { display: flex; } .header-cta { display: inline-flex; } .nav-toggle { display: none; } .mobile-nav { display: none !important; } .steps-grid { grid-template-columns: repeat(4, 1fr); } .tier3-grid { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); grid-auto-columns: auto; overflow-x: visible; margin-inline: 0; padding-inline: 0; } } /* Large desktop : breathing room */ @media (min-width: 1440px) { .hero { padding-top: calc(var(--header-height) + var(--space-7)); } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .hero-logo, .wave-emoji { animation: none !important; } } /* ---------- Print ---------- */ @media print { .site-header, .mobile-cta, .cookie-banner { display: none !important; } body { padding: 0; } }