/* WEB-JUNCTION-COHERENCE (2026-07-23): the root palette IS the app's warm identity — every hex mirrors design/DESIGN.md § Warm light (the same token set as css/tavvi-web.css and the CF landing chrome). The old indigo default (#6366F1 on slate) is gone, along with the unmeasured coral/blue homepage randomizer — one brand, one voice. text-soft deliberately equals text-muted: hierarchy comes from size + weight per the Inter-only doctrine, not from a third gray. brand-soft is the one derived shade (pressed/hover, one step deeper than primary). */ :root { --color-brand: #C96B58; --color-brand-soft: #B25B48; --color-bg: #FAF5EF; --color-bg-tint: #EFE2D2; --color-surface: #FFFCF8; --color-text: #271F1B; --color-text-muted: #65564C; --color-text-soft: #65564C; --color-border: #D6CCC4; --color-border-strong: #A39282; --color-accent-bg: #FDDDD6; --color-pill-bg: #FDDDD6; --color-pill-text: #3B1106; --color-footer-bg: #171110; --color-footer-text: #F5F0ED; --color-footer-muted: #A39890; --color-overlay: rgba(39, 31, 27, 0.06); --color-nav-bg: rgba(255, 252, 248, 0.78); --color-nav-border: rgba(39, 31, 27, 0.08); --color-shadow-soft: 0 1px 3px rgba(39, 31, 27, 0.04), 0 4px 12px rgba(39, 31, 27, 0.04); --color-shadow-card: 0 1px 2px rgba(39, 31, 27, 0.04), 0 8px 24px rgba(39, 31, 27, 0.06); --color-gradient-hero: radial-gradient(ellipse 900px 540px at 50% -10%, rgba(201, 107, 88, 0.14), transparent 70%); } /* App-driven dark mode. The in-app webview (embedded_web_sheet.dart) injects `theme-dark`/`theme-light` on so a page opened inside the app follows the APP's light/dark, not the device OS. Only the app sets these classes, so the public marketing site is unaffected; this themes the in-app legal pages (terms/privacy/aup, which link this stylesheet). Warm-toned to match the app's dark identity + the guides. */ :root.theme-dark { --color-brand: #DA8168; --color-brand-soft: #E2937D; --color-bg: #171110; --color-bg-tint: #1A1412; --color-surface: #2B2320; --color-text: #F5F0ED; --color-text-muted: #A39890; --color-text-soft: #A39890; --color-border: #3D352F; --color-border-strong: #524640; --color-accent-bg: #5C2E20; --color-pill-bg: #5C2E20; --color-pill-text: #FDDDD6; --color-footer-bg: #0A0604; --color-footer-text: #F5F0ED; --color-footer-muted: #A39890; --color-overlay: rgba(0, 0, 0, 0.30); --color-nav-bg: rgba(23, 17, 16, 0.82); --color-nav-border: rgba(245, 240, 237, 0.10); --color-shadow-soft: none; --color-shadow-card: none; --color-gradient-hero: radial-gradient(ellipse 800px 500px at 50% -20%, rgba(218, 129, 104, 0.10), transparent 70%); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); font-feature-settings: 'ss01', 'cv02', 'cv11'; } img { max-width: 100%; height: auto; display: block; } .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } a { color: var(--color-brand); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--color-brand-soft); } .skip-link { position: absolute; left: -9999px; top: 12px; background: var(--color-text); color: var(--color-surface); padding: 10px 16px; border-radius: 8px; font-size: 0.875rem; font-weight: 600; z-index: 2000; } .skip-link:focus { left: 12px; color: var(--color-surface); } /* === Navbar (translucent + theme-aware) === */ .navbar { position: fixed; top: 0; width: 100%; background: var(--color-nav-bg); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--color-nav-border); z-index: 1000; } .nav-container { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; height: 60px; } .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text); } .nav-logo { width: 28px; height: 28px; border-radius: 7px; } .brand-text { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.015em; color: var(--color-text); } .nav-right { display: flex; align-items: center; gap: 20px; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { color: var(--color-text-muted); font-weight: 500; font-size: 0.875rem; letter-spacing: -0.005em; } .nav-links a:hover { color: var(--color-text); } .nav-cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--color-text); color: var(--color-surface) !important; border-radius: 999px; font-weight: 600; font-size: 0.8125rem; letter-spacing: -0.005em; transition: opacity 0.15s ease; } .nav-cta:hover { opacity: 0.88; color: var(--color-surface) !important; } .hamburger { display: none; width: 34px; height: 34px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); cursor: pointer; align-items: center; justify-content: center; color: var(--color-text); } .hamburger svg { width: 18px; height: 18px; } .mobile-menu { display: none; position: fixed; top: 60px; left: 0; right: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 12px 24px 20px; z-index: 999; box-shadow: var(--color-shadow-soft); } .mobile-menu.open { display: block; } .mobile-menu a { display: block; padding: 12px 0; color: var(--color-text); text-decoration: none; font-weight: 500; font-size: 1rem; border-bottom: 1px solid var(--color-border); } .mobile-menu a:last-of-type { border-bottom: none; } .mobile-menu .mobile-cta { margin-top: 12px; padding: 12px 18px; background: var(--color-text); color: var(--color-surface); border-radius: 999px; text-align: center; font-weight: 600; border: none; } /* === Hero === */ .hero { position: relative; padding: 130px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: var(--color-gradient-hero); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 64px; align-items: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--color-pill-bg); color: var(--color-pill-text); border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 20px; } .hero-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); } .hero-title { font-size: 3.5rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--color-text); margin-bottom: 20px; text-wrap: balance; } .hero-title em { font-style: normal; color: var(--color-brand); } .hero-subtitle { font-size: 1.1875rem; color: var(--color-text-muted); margin-bottom: 32px; line-height: 1.55; max-width: 560px; letter-spacing: -0.005em; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .hero-pricing-note { font-size: 0.875rem; color: var(--color-text-soft); margin-top: 24px; letter-spacing: 0.005em; line-height: 1.55; } .hero-pricing-note strong { color: var(--color-text-muted); font-weight: 600; } /* === Store buttons (CTAs) === */ .store-buttons { display: flex; gap: 10px; flex-wrap: wrap; } .store-button { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 12px; font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.005em; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease; } .store-button:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12); } .store-button svg { width: 18px; height: 18px; } .store-button.ios { background: var(--color-text); color: var(--color-surface); } .store-button.android { background: var(--color-brand); color: #FFFFFF; } .store-button.android:hover { color: #FFFFFF; background: var(--color-brand-soft); } /* === Hero phone mockup === */ .hero-visual { position: relative; display: flex; justify-content: center; align-items: center; } .hero-screenshot { display: block; width: 100%; max-width: 320px; height: auto; border-radius: 28px; box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.35), 0 12px 28px -8px rgba(15, 23, 42, 0.18); } /* === Section primitives === */ .section { padding: 96px 0; } .section.tint { background: var(--color-bg-tint); } .section.surface { background: var(--color-surface); } .section-header { text-align: center; margin-bottom: 56px; max-width: 720px; margin-left: auto; margin-right: auto; } .section-eyebrow { display: inline-block; padding: 4px 12px; background: var(--color-pill-bg); color: var(--color-pill-text); border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 16px; text-transform: uppercase; } .section-header h2 { font-size: 2.25rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.025em; margin-bottom: 14px; line-height: 1.15; text-wrap: balance; } .section-header p { font-size: 1.0625rem; color: var(--color-text-muted); line-height: 1.55; letter-spacing: -0.005em; } /* === How It Works (3 linear steps) === */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; } .step { position: relative; padding: 32px 28px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--color-shadow-soft); } .step-number { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-text); color: var(--color-surface); font-weight: 700; font-size: 0.9375rem; margin-bottom: 18px; letter-spacing: -0.01em; } .step h3 { font-size: 1.1875rem; font-weight: 600; color: var(--color-text); margin-bottom: 10px; letter-spacing: -0.015em; } .step p { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.6; } /* === Feature grid (real features) === */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .feature { padding: 28px 26px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .feature:hover { transform: translateY(-2px); box-shadow: var(--color-shadow-card); border-color: var(--color-border-strong); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--color-accent-bg); color: var(--color-brand); margin-bottom: 18px; } .feature-icon svg { width: 22px; height: 22px; } .feature h3 { font-size: 1.0625rem; font-weight: 600; color: var(--color-text); margin-bottom: 8px; letter-spacing: -0.015em; } .feature p { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.55; } /* === Industries (who Tavvi is for) === */ .industries-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .industry { padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .industry:hover { border-color: var(--color-border-strong); box-shadow: var(--color-shadow-soft); } .industry-icon { width: 32px; height: 32px; color: var(--color-brand); } .industry-icon svg { width: 32px; height: 32px; } .industry h3 { font-size: 1rem; font-weight: 600; color: var(--color-text); letter-spacing: -0.01em; } .industry p { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.55; margin-top: -4px; } .industry-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; } .industry-tag { font-size: 0.6875rem; font-weight: 500; color: var(--color-text-soft); padding: 3px 8px; background: var(--color-bg-tint); border-radius: 999px; letter-spacing: 0.005em; } .industries-footer { margin-top: 40px; text-align: center; padding: 24px 32px; background: var(--color-accent-bg); border-radius: 16px; max-width: 760px; margin-left: auto; margin-right: auto; } .industries-footer p { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.55; } .industries-footer strong { color: var(--color-text); font-weight: 600; } /* === Comparison (vs Linktree, vs Square) === */ .compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .compare { padding: 32px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; display: flex; gap: 20px; align-items: flex-start; } .compare-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--color-accent-bg); color: var(--color-brand); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .compare-icon svg { width: 24px; height: 24px; } .compare-text h3 { font-size: 1.125rem; font-weight: 600; color: var(--color-text); margin-bottom: 8px; letter-spacing: -0.015em; } .compare-text p { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.6; } /* === Pricing / CTA === */ .cta-section { padding: 96px 0; background: var(--color-surface); text-align: center; } .cta-card { max-width: 720px; margin: 0 auto; padding: 56px 40px; background: linear-gradient(180deg, var(--color-accent-bg) 0%, var(--color-surface) 100%); border: 1px solid var(--color-border); border-radius: 24px; box-shadow: var(--color-shadow-card); } .cta-card h2 { font-size: 2rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.025em; margin-bottom: 14px; line-height: 1.15; text-wrap: balance; } .cta-card .cta-lead { font-size: 1.0625rem; color: var(--color-text-muted); margin-bottom: 28px; line-height: 1.55; max-width: 560px; margin-left: auto; margin-right: auto; } .cta-card .store-buttons { justify-content: center; } .cta-fineprint { font-size: 0.875rem; color: var(--color-text-soft); margin-top: 24px; line-height: 1.6; } .cta-fineprint a { color: var(--color-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* === Footer === */ .footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding: 64px 0 28px; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer-brand { max-width: 320px; } .footer-brand .brand-text { color: #FFFFFF; font-size: 1.125rem; display: inline-block; margin-bottom: 12px; } .footer-tagline { font-size: 0.875rem; color: var(--color-footer-muted); line-height: 1.55; } .footer-col h4 { color: #FFFFFF; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; } .footer-col a { display: block; color: var(--color-footer-muted); text-decoration: none; font-size: 0.875rem; font-weight: 500; padding: 6px 0; transition: color 0.15s ease; } .footer-col a:hover { color: #FFFFFF; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.08); flex-wrap: wrap; gap: 12px; } .footer-bottom p { font-size: 0.8125rem; color: var(--color-footer-muted); } .footer-store-links { display: flex; gap: 18px; } .footer-store-links a { color: var(--color-footer-muted); font-size: 0.8125rem; text-decoration: none; font-weight: 500; } .footer-store-links a:hover { color: #FFFFFF; } /* === Reduced motion === */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* === Responsive === */ @media (max-width: 980px) { .hero { padding: 110px 0 60px; } .hero-grid { grid-template-columns: 1fr; gap: 48px; text-align: center; } .hero-title { font-size: 3rem; } .hero-subtitle { margin-left: auto; margin-right: auto; } .hero-cta-row { justify-content: center; } .hero-visual { min-height: auto; } .industries-grid { grid-template-columns: repeat(2, 1fr); } .feature-grid { grid-template-columns: repeat(2, 1fr); } .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 720px) { .nav-links { display: none; } .nav-cta { display: none; } .hamburger { display: inline-flex; } .hero { padding: 96px 0 56px; } .hero-title { font-size: 2.375rem; } .hero-subtitle { font-size: 1.0625rem; } .section { padding: 72px 0; } .section-header h2 { font-size: 1.875rem; } .steps, .feature-grid, .compare-grid { grid-template-columns: 1fr; } .industries-grid { grid-template-columns: 1fr; } .cta-card { padding: 40px 24px; } .cta-card h2 { font-size: 1.75rem; } .footer-top { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { justify-content: center; text-align: center; } .store-buttons { width: 100%; } .store-button { flex: 1; justify-content: center; min-width: 140px; } .hero-screenshot { max-width: 260px; } } @media (max-width: 420px) { .hero-title { font-size: 2rem; } .section-header h2 { font-size: 1.625rem; } .industry { padding: 20px; } .container { padding: 0 20px; } }