/* Fifths — marketing site. Shared styles across all 5 landings. Token parity with the app (src/tokens.css) and the brand kit at public/brand/brand-kit.html. */ :root { --page: #fff8ef; --page-2: #fef1dd; --page-3: #fde6c4; --card: #ffffff; --ink-1: #2a1d3a; --ink-2: #54466b; --ink-3: #8a7b9d; --ink-4: #b7acc4; --ink-5: #e4dbed; --hairline: #ebe1ef; --coral: #ff8a6b; --coral-ink: #c64632; --coral-soft: #ffe1d4; --mint: #b6e5cd; --mint-ink: #2f7a5a; --mint-soft: #d5f0e1; --lav: #c8b8ff; --lav-ink: #5b3fb3; --lav-soft: #e4daff; --butter: #ffd768; --butter-ink: #9a6f00; --butter-soft:#fff0c1; --sky: #a8d5ff; --sky-ink: #2867b2; --sky-soft: #dcecff; --accent: var(--coral); --accent-ink: var(--coral-ink); --accent-soft: var(--coral-soft); --ui: 'Outfit', system-ui, sans-serif; --disp: 'DM Serif Display', Georgia, serif; --mono: ui-monospace, 'JetBrains Mono', monospace; --r-sm: 10px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --sh-sm: 0 1px 2px rgba(42,29,58,0.06), 0 2px 6px rgba(42,29,58,0.05); --sh-md: 0 4px 14px rgba(42,29,58,0.10), 0 2px 5px rgba(42,29,58,0.06); --sh-lg: 0 16px 40px rgba(42,29,58,0.14), 0 6px 12px rgba(42,29,58,0.08); } /* Dark mode — opt-in via . Mirrors the app / brand kit. */ html[data-theme="dark"] { --page: #15101c; --page-2: #1e1729; --page-3: #271e37; --card: #1e1729; --ink-1: #f5eefa; --ink-2: #cfc1dd; --ink-3: #938099; --ink-4: #5b4d6c; --ink-5: #352a44; --hairline: #302740; --coral: #ff8a6b; --coral-ink: #ffcebd; --coral-soft: #3a1f17; --mint: #2f7a5a; --mint-ink: #b6e5cd; --mint-soft: #1e3b2c; --lav: #6d52c9; --lav-ink: #e4daff; --lav-soft: #24173d; --butter: #9a6f00; --butter-ink: #ffe49b; --butter-soft:#2d2108; --sky: #2867b2; --sky-ink: #cce1ff; --sky-soft: #0f2538; --sh-sm: 0 1px 2px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.18); --sh-md: 0 4px 14px rgba(0,0,0,0.35), 0 2px 5px rgba(0,0,0,0.20); --sh-lg: 0 16px 40px rgba(0,0,0,0.45), 0 6px 12px rgba(0,0,0,0.25); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--page); color: var(--ink-1); font-family: var(--ui); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } button, input, textarea, select { font: inherit; color: inherit; } a { color: var(--coral-ink); text-decoration: none; } a:hover { text-decoration: underline; } /* ─── Layout ─── */ .wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; } /* ─── Brand ─── */ .brand { display: flex; align-items: center; gap: 8px; font-family: var(--disp); font-style: italic; font-weight: 600; font-size: 20px; color: var(--ink-1); } .brand svg, .brand img { width: 28px; height: 28px; display: block; } header.nav { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: rgba(255, 248, 239, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color 160ms; } header.nav.scrolled { border-bottom-color: var(--hairline); } header.nav .nav-links { display: flex; gap: 20px; font-size: 14px; color: var(--ink-2); } /* ─── Pills + buttons ─── */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; background: var(--coral-soft); color: var(--coral-ink); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 999px; } .pill.mint { background: var(--mint-soft); color: var(--mint-ink); } .pill.lav { background: var(--lav-soft); color: var(--lav-ink); } .pill.butter{ background: var(--butter-soft); color: var(--butter-ink); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 999px; border: 1.5px solid transparent; font-weight: 600; font-size: 15px; letter-spacing: -0.005em; cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease; white-space: nowrap; text-decoration: none; } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn-coral { background: var(--coral); color: #fff; border-color: var(--coral); box-shadow: 0 6px 16px rgba(255,138,107,0.30), 0 2px 4px rgba(198,70,50,0.12); } .btn-ink { background: var(--ink-1); color: var(--page); border-color: var(--ink-1); box-shadow: var(--sh-md); } .btn-soft { background: var(--card); color: var(--ink-1); border-color: var(--hairline); box-shadow: var(--sh-sm); } .btn-sm { padding: 9px 18px; font-size: 13px; } /* ─── Hero ─── */ .hero { padding: 48px 0 64px; position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; } .hero h1 { font-family: var(--disp); font-weight: 600; font-size: 68px; line-height: 0.98; letter-spacing: -0.025em; margin: 18px 0 22px; } .hero h1 em { font-style: italic; } .hero h1 .coral { color: var(--coral-ink); font-style: italic; } .hero h1 .lav { color: var(--lav-ink); font-style: italic; } .hero .lede { font-size: 18px; color: var(--ink-2); max-width: 520px; margin: 0 0 28px; line-height: 1.5; } .hero-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; } .hero-form input[type=email] { flex: 1; min-width: 240px; padding: 14px 18px; border: 1.5px solid var(--hairline); border-radius: 999px; background: var(--card); font-size: 15px; } .hero-form input[type=email]:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(255,138,107,0.15); } .hero .trust { margin-top: 14px; font-size: 13px; color: var(--ink-3); } /* ─── Hero card: warm gradient backdrop + Fable mascot + product peek ─── */ /* Fable = onboarding character per brand kit. Always the hero-scene mascot. */ .hero-card { aspect-ratio: 1 / 1; background: linear-gradient(140deg, var(--butter-soft), var(--butter) 40%, var(--coral) 92%); border-radius: var(--r-xl); padding: 28px; position: relative; overflow: hidden; box-shadow: var(--sh-md); } .hero-card .tag { font-family: var(--mono); font-size: 11px; background: rgba(255,255,255,0.55); color: var(--ink-1); padding: 5px 12px; border-radius: 999px; display: inline-block; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .hero-card .kicker { font-family: var(--disp); font-style: italic; font-weight: 400; font-size: 44px; line-height: 1.02; color: var(--ink-1); margin: 14px 0 0; max-width: 72%; text-shadow: 0 1px 0 rgba(255,255,255,0.35); } .hero-card .kicker em { font-style: italic; color: var(--coral-ink); } /* Fable takes the lower half; scarf pops the coral */ .hero-card .mascot { position: absolute; bottom: -6%; left: 50%; width: 68%; height: auto; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 8px 20px rgba(42,29,58,0.18)); } /* Product peek: scale-banner + degree chips + play — brand kit components */ .product-peek { position: absolute; top: 58%; right: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; z-index: 2; } .scale-banner-mini { background: linear-gradient(90deg, var(--lav), var(--sky)); border-radius: 999px; padding: 6px 14px 6px 6px; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--sh-sm); font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--ink-1); } .scale-banner-mini .root { width: 26px; height: 26px; border-radius: 50%; background: var(--card); display: inline-flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 400; font-size: 13px; color: var(--lav-ink); } .chip-row { display: inline-flex; gap: 6px; } .deg-chip { min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-family: var(--disp); font-weight: 400; font-size: 16px; background: var(--card); color: var(--ink-1); border: 1.5px solid transparent; box-shadow: var(--sh-sm); } .deg-chip.tonic { background: var(--ink-1); color: var(--page); } .deg-chip.dom { background: var(--coral); color: #fff; border-color: var(--coral); } .play-btn-mini { width: 54px; height: 54px; border-radius: 50%; background: var(--coral); color: #fff; border: 2.5px solid var(--ink-1); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 5px 0 var(--coral-ink), 0 10px 24px rgba(255,138,107,0.35); } /* ─── Section mascot companion (Major, Noir, Pulse in context sections) ─── */ /* Per brand kit: "one at a time, always". Each section gets at most one. */ .section-mascot { display: inline-block; vertical-align: middle; } .section-mascot img { width: 100%; max-width: 160px; height: auto; display: block; } .section-mascot.bg-butter { background: var(--butter-soft); border-radius: var(--r-lg); padding: 12px; } .section-mascot.bg-mint { background: var(--mint-soft); border-radius: var(--r-lg); padding: 12px; } .section-mascot.bg-sky { background: var(--sky-soft); border-radius: var(--r-lg); padding: 12px; } .section-mascot.bg-coral { background: var(--coral-soft); border-radius: var(--r-lg); padding: 12px; } /* Dashboard section layout: mascot sits beside the data card */ .preview-grid { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; max-width: 960px; margin: 0 auto; } /* ─── Nav brand (horizontal logo) ─── */ header.nav a.brand { font-size: 0; display: flex; align-items: center; } header.nav a.brand img { width: auto; height: 28px; display: block; } /* ─── Lifetime counter (urgency pill — composed from brand streak pattern) ─── */ .lifetime-counter { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--coral-soft); color: var(--coral-ink); border-radius: 999px; font-family: var(--ui); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; margin-top: 16px; } .lifetime-counter .flame { font-size: 15px; line-height: 1; } .lifetime-counter .count { font-family: var(--disp); font-weight: 400; font-size: 16px; color: var(--coral-ink); } .lifetime-counter .count em { font-style: normal; opacity: 0.65; font-size: 13px; } /* Bottom CTA gets Pulse (streak/habit character) */ .cta-bottom .cta-mascot { width: 110px; height: auto; display: block; margin: 0 auto 12px; filter: drop-shadow(0 6px 16px rgba(42,29,58,0.12)); } /* ─── Footer upgrades: wordmark + contact + legal ─── */ footer { padding: 36px 24px 28px; border-top: 1px solid var(--hairline); text-align: center; font-size: 12px; font-family: var(--mono); color: var(--ink-3); } footer .footer-mark { height: 24px; width: auto; margin-bottom: 14px; opacity: 0.8; } footer .footer-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 8px 0; } footer .footer-links a { color: var(--ink-3); } footer .wedge-links { margin-top: 10px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } footer .wedge-links a { color: var(--ink-3); } /* Dashboard mockup card */ .dash { margin-top: 24px; background: var(--card); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-md); } .dash .insight { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--coral-soft); border-left: 3px solid var(--coral-ink); border-radius: var(--r-sm); margin-bottom: 16px; } .dash .insight strong { display: block; color: var(--ink-1); font-size: 14px; font-weight: 600; line-height: 1.4; } .dash .insight .sub { font-size: 12px; color: var(--ink-2); margin-top: 4px; } .dash .heatmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-bottom: 14px; } .dash .heatmap div { aspect-ratio: 1; border-radius: 3px; background: var(--ink-5); } .dash .bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 60px; align-items: end; } .dash .bars div { background: var(--lav); border-radius: 4px 4px 2px 2px; } /* ─── Section shared ─── */ section { padding: 64px 0; } section h2 { font-family: var(--disp); font-style: italic; font-weight: 600; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; text-align: center; margin: 0 0 12px; } section h2 em { color: var(--coral-ink); } section .section-intro { text-align: center; max-width: 620px; margin: 0 auto 40px; font-size: 16px; color: var(--ink-2); line-height: 1.55; } /* ─── How it works ─── */ .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .how-step { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 24px; } .how-step .num { font-family: var(--disp); font-weight: 600; font-size: 28px; color: var(--coral-ink); margin-bottom: 8px; } .how-step h3 { font-family: var(--disp); font-style: italic; font-weight: 600; font-size: 18px; margin: 0 0 8px; } .how-step p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.55; } /* ─── Features ─── */ .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .feature { background: var(--card); border-radius: var(--r-lg); padding: 22px 20px; box-shadow: var(--sh-sm); } .feature.mint { background: var(--mint); } .feature.lav { background: var(--lav); } .feature.butter { background: var(--butter); } .feature.coral { background: var(--coral); color: #fff; } .feature .icon { font-size: 26px; margin-bottom: 10px; } .feature h3 { font-family: var(--disp); font-style: italic; font-weight: 600; font-size: 17px; margin: 0 0 6px; letter-spacing: -0.01em; } .feature p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(42,29,58,0.8); } .feature.coral p { color: rgba(255,255,255,0.92); } /* ─── Compare table ─── */ .compare-table { background: var(--card); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); } .compare-table table { width: 100%; border-collapse: collapse; } .compare-table th, .compare-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--hairline); font-size: 14px; } .compare-table thead th { font-family: var(--disp); font-style: italic; font-weight: 600; font-size: 15px; background: var(--page-2); color: var(--ink-1); } .compare-table thead th.ours { color: var(--coral-ink); } .compare-table td.ours { background: var(--coral-soft); font-weight: 600; } .compare-table tr:last-child td { border-bottom: 0; } .compare-table td.muted { color: var(--ink-3); } /* ─── FAQ ─── */ .faq-list { max-width: 740px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .faq-item { background: var(--card); border-radius: var(--r-md); border: 1px solid var(--hairline); padding: 16px 20px; } .faq-item summary { font-family: var(--disp); font-style: italic; font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq-item summary::after { content: '+'; font-family: var(--mono); color: var(--ink-3); transition: transform 160ms; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.6; } /* ─── Bottom CTA ─── */ .cta-bottom { background: linear-gradient(135deg, var(--page-2), var(--page-3)); border-radius: var(--r-xl); padding: 48px 32px; margin: 48px 0 64px; text-align: center; } .cta-bottom h2 { margin-bottom: 10px; } .cta-bottom p { max-width: 500px; margin: 0 auto 24px; color: var(--ink-2); font-size: 16px; } .cta-bottom form { max-width: 520px; margin: 0 auto; } /* ─── Footer ─── */ footer { padding: 32px 24px; border-top: 1px solid var(--hairline); text-align: center; font-size: 12px; font-family: var(--mono); color: var(--ink-3); } /* ─── Survey modal ─── */ .modal { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(42,29,58,0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); align-items: center; justify-content: center; padding: 20px; } .modal.open { display: flex; } .modal .card { background: var(--card); border-radius: var(--r-xl); max-width: 480px; width: 100%; padding: 28px; box-shadow: var(--sh-lg); max-height: calc(100vh - 40px); overflow: auto; } .modal h3 { font-family: var(--disp); font-weight: 600; font-style: italic; font-size: 24px; margin: 6px 0 6px; letter-spacing: -0.015em; } .modal .sub { font-size: 13.5px; color: var(--ink-2); margin-bottom: 18px; } .modal label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-1); margin: 14px 0 6px; } .modal select, .modal textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--hairline); border-radius: var(--r-sm); background: var(--card); font-size: 14.5px; font-family: var(--ui); } .modal textarea { min-height: 80px; resize: vertical; } .modal select:focus, .modal textarea:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,138,107,0.15); } .modal .row { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; gap: 10px; } .modal .ghost { background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 14px; } /* Thank-you confirmation state */ .modal.thanks .card .thanks-ui { display: block; } .modal.thanks .card .survey-ui { display: none; } .thanks-ui { display: none; text-align: center; padding: 12px 0 4px; } .thanks-ui h3 { margin-bottom: 8px; } /* ─── Responsive ─── */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 52px; } .how-grid { grid-template-columns: 1fr; } .features-grid { grid-template-columns: 1fr 1fr; } section h2 { font-size: 32px; } .compare-table { font-size: 13px; } .compare-table th, .compare-table td { padding: 10px 12px; font-size: 13px; } } @media (max-width: 540px) { .hero h1 { font-size: 42px; } .hero { padding: 24px 0 36px; } section { padding: 40px 0; } .features-grid { grid-template-columns: 1fr; } header.nav .nav-links { display: none; } .compare-table th:nth-child(2), .compare-table td:nth-child(2) { display: none; } /* hide one competitor col */ } @media (max-width: 900px) { .preview-grid { grid-template-columns: 1fr; } .preview-grid .section-mascot { max-width: 160px; margin: 0 auto; } .hero-card .kicker { font-size: 34px; max-width: 60%; } .hero-card .mascot { width: 55%; bottom: 4%; } .product-peek { top: 50%; } }