/* ============================================================ MastersFit — Marketing site Built on the MastersFit design system tokens (../styles.css). Monochrome-first; theme-aware via [data-theme] on . ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text-primary); font-size: var(--text-lg); /* 17px reading body for the 40+ audience */ line-height: var(--leading-relaxed); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font-family: inherit; } /* ---- Layout primitives ------------------------------------ */ .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; } .section { padding: clamp(72px, 9vw, 128px) 0; } .section--tight { padding: clamp(48px, 6vw, 80px) 0; } .section--surface { background: var(--surface); } .section--dark { background: var(--primary); color: var(--on-primary); } .section--dark .eyebrow { color: color-mix(in oklab, var(--on-primary) 64%, transparent); } .section--dark .lede { color: color-mix(in oklab, var(--on-primary) 80%, transparent); } .eyebrow { font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin: 0 0 18px; } .section-head { max-width: 720px; } .section-head--center { margin: 0 auto; text-align: center; } h1, h2, h3 { margin: 0; font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); } .h-display { font-size: clamp(44px, 6.4vw, 82px); font-weight: var(--weight-extrabold); letter-spacing: -0.035em; line-height: 1.02; } .h-section { font-size: clamp(32px, 4.2vw, 52px); letter-spacing: -0.03em; } .h-card { font-size: var(--text-2xl); letter-spacing: var(--tracking-snug); } .lede { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; color: var(--text-secondary); margin: 22px 0 0; max-width: 56ch; text-wrap: pretty; } /* ---- Buttons (extend mf-btn) ------------------------------ */ .btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* ---- App store download badges ---------------------------------------- */ .store-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } .final .store-badges { justify-content: center; } .store-badge { display: inline-flex; align-items: center; gap: 12px; padding: 11px 20px; min-width: 200px; border-radius: 14px; background: var(--text-primary); color: var(--bg); text-decoration: none; transition: transform 0.15s ease, opacity 0.15s ease; } .store-badge:hover { transform: translateY(-2px); opacity: 0.92; } .store-badge__logo { width: 26px; height: 26px; fill: currentColor; flex: none; } .store-badge__text { display: flex; flex-direction: column; line-height: 1.12; text-align: left; } .store-badge__text small { font-size: 11px; font-weight: var(--weight-medium); opacity: 0.86; } .store-badge__text strong { font-size: 18px; font-weight: var(--weight-bold); letter-spacing: -0.01em; } /* Invert on the dark (primary) band so badges stay legible */ .section--dark .store-badge { background: var(--on-primary); color: var(--primary); } /* ---- Coming-soon modal ------------------------------------------------- */ .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; } .modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); animation: modal-fade 0.18s ease; } .modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 420px; text-align: center; background: var(--bg); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); padding: 40px 32px 28px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5); animation: modal-pop 0.2s cubic-bezier(0.2, 0.8, 0.3, 1); } .modal__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; } .modal__close:hover { background: var(--surface); color: var(--text-primary); } .modal__mark { width: 52px; height: 52px; margin: 0 auto 16px; display: block; } .modal__mark path { stroke: var(--primary); } .modal__title { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: -0.01em; line-height: var(--leading-tight); margin: 0; } .modal__body { font-size: var(--text-base); line-height: 1.55; color: var(--text-secondary); margin: 10px auto 24px; max-width: 34ch; } .modal__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } .mf-btn--lg { padding: 18px 28px; font-size: var(--text-lg); border-radius: var(--radius-sm); } .section--dark .mf-btn--primary { background: var(--on-primary); color: var(--primary); } .section--dark .mf-btn--primary:hover { background: color-mix(in oklab, var(--on-primary) 88%, #000); } .section--dark .mf-btn--outline { color: var(--on-primary); border-color: color-mix(in oklab, var(--on-primary) 45%, transparent); } .section--dark .mf-btn--outline:hover { background: color-mix(in oklab, var(--on-primary) 12%, transparent); } .btn-note { font-size: var(--text-sm); color: var(--text-muted); margin: 14px 0 0; } .section--dark .btn-note { color: color-mix(in oklab, var(--on-primary) 64%, transparent); } /* ============================================================ Header ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border-subtle); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand__mark { width: 34px; height: 34px; display: block; } .brand__mark path { stroke: var(--primary); } .brand__name { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: -0.02em; } .nav { display: flex; align-items: center; gap: 4px; } .nav a { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-secondary); padding: 10px 14px; border-radius: var(--radius-sm); white-space: nowrap; transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .nav a:hover { color: var(--text-primary); background: var(--surface); } .header-cta { display: flex; align-items: center; gap: 10px; } /* Hamburger toggle (shown on mobile only) */ .menu-toggle { display: none; width: 40px; height: 40px; place-items: center; border: none; border-radius: 50%; background: transparent; color: var(--text-primary); cursor: pointer; } .menu-toggle:hover { background: var(--surface); } .menu-toggle .ico-close { display: none; } .menu-toggle[aria-expanded="true"] .ico-open { display: none; } .menu-toggle[aria-expanded="true"] .ico-close { display: block; } /* Mobile menu overlay (sits below the sticky header, which stays clickable) */ .mobile-menu { display: none; position: fixed; inset: 0; z-index: 40; } .mobile-menu.open { display: block; } .mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); animation: modal-fade 0.18s ease; } .mobile-menu__panel { position: absolute; top: 76px; left: 0; right: 0; display: flex; flex-direction: column; gap: 2px; background: var(--bg); border-bottom: 1px solid var(--border-subtle); box-shadow: 0 24px 48px -20px rgba(0,0,0,0.35); padding: 12px 24px 24px; animation: menu-drop 0.2s ease; } .mobile-menu__panel .m-link { font-size: 17px; font-weight: var(--weight-semibold); color: var(--text-primary); text-decoration: none; padding: 15px 6px; border-bottom: 1px solid var(--border-subtle); } .mobile-menu__panel .m-link:active { color: var(--text-muted); } .mobile-menu__panel .m-download { margin-top: 18px; justify-content: center; } @keyframes menu-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (max-width: 940px) { .nav, .header-cta .mf-btn--primary, .header-cta .mf-btn--ghost { display: none; } .menu-toggle { display: grid; } } @media (min-width: 941px) { .mobile-menu { display: none !important; } } /* ============================================================ Hero ============================================================ */ .hero { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 104px); overflow: hidden; } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero__copy { max-width: 600px; } .pill { display: inline-flex; align-items: center; gap: 9px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border-subtle); white-space: nowrap; padding: 7px 14px 7px 11px; border-radius: var(--radius-full); margin-bottom: 28px; } .pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); } /* In dark mode --border-subtle collapses to near-black on the dark bg, so the pill outline disappears. Use a translucent light edge (same pattern as the dark-band store chips) so it stays visible. */ [data-theme-mode="dark"] .pill { border-color: color-mix(in oklab, var(--text-primary) 26%, transparent); } .hero h1 { margin-bottom: 0; } .hero .lede { margin-bottom: 36px; } .hero .btn-row { margin-top: 4px; } .hero__trust { display: flex; align-items: center; gap: 18px; margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--border-subtle); } .avatars { display: flex; } .avatars span { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--bg); background: var(--n-medium-1); margin-left: -10px; display: grid; place-items: center; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-secondary); } .avatars span:first-child { margin-left: 0; } .hero__trust-text { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.4; } .hero__trust-text strong { color: var(--text-primary); font-weight: var(--weight-bold); } .hero__device { display: flex; justify-content: center; position: relative; } .hero__device::before { content: ""; position: absolute; inset: -8% -4% -4%; z-index: 0; background: radial-gradient(60% 55% at 60% 38%, color-mix(in oklab, var(--primary) 9%, transparent), transparent 70%); } /* ============================================================ Phone frame + app screens ============================================================ */ .phone { position: relative; z-index: 1; width: 300px; flex: none; background: #0b0b0c; border-radius: 46px; padding: 11px; box-shadow: 0 40px 80px -28px rgba(0,0,0,0.45), 0 8px 24px -8px rgba(0,0,0,0.25); } .phone__screen { position: relative; border-radius: 36px; overflow: hidden; background: var(--bg); aspect-ratio: 300 / 640; color: var(--text-primary); } .phone__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 130px; height: 26px; background: #0b0b0c; border-radius: 0 0 16px 16px; z-index: 5; } /* Real app screenshots inside the phone frame (light/dark swap follows the site theme via [data-theme-mode="dark"]). The screenshots already include the device status bar + dynamic island, so these phones have no CSS notch. */ .phone--shot .phone__screen { background: #0b0b0c; } .phone--shot .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .phone--shot .shot--dark { display: none; } [data-theme-mode="dark"] .phone--shot .shot--light { display: none; } [data-theme-mode="dark"] .phone--shot .shot--dark { display: block; } /* In dark mode the page (#0A0A0A) and the bezel (#0b0b0c) are nearly the same black, so the phone disappears. Lift it: a device-grey bezel, a crisp hairline rim, and a faint ambient glow to separate it from the background. */ [data-theme-mode="dark"] .phone--shot { background: #1c1c1e; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 80px -28px rgba(0, 0, 0, 0.9), 0 0 70px -18px rgba(255, 255, 255, 0.06); } [data-theme-mode="dark"] .phone--shot .phone__screen { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .app { display: flex; flex-direction: column; height: 100%; font-size: 13px; line-height: 1.4; } .app__status { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px 4px; font-size: 12px; font-weight: var(--weight-bold); } .app__status .dots { display: flex; gap: 4px; align-items: center; color: var(--text-primary); } .app__head { padding: 10px 18px 14px; display: flex; align-items: flex-start; justify-content: space-between; } .app__head h4 { font-size: 19px; font-weight: var(--weight-bold); letter-spacing: -0.02em; margin: 0; } .app__head .date { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .app__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: var(--text-secondary); } .app__body { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; } .appcard { background: var(--surface); border-radius: var(--radius-2xl); padding: 16px; border: 1px solid var(--border-subtle); } .appcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .appcard__top span { font-size: 13px; font-weight: var(--weight-semibold); } .appcard__main { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .app-media { width: 46px; height: 46px; border-radius: 14px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; flex: none; } .appcard__main .t { font-size: 14px; font-weight: var(--weight-bold); } .appcard__main .s { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .app-btn { display: block; width: 100%; text-align: center; background: var(--primary); color: var(--on-primary); font-size: 13px; font-weight: var(--weight-semibold); padding: 12px; border-radius: var(--radius-sm); border: none; } .app-seclabel { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; } .app-seclabel .l { font-size: 14px; font-weight: var(--weight-bold); } .app-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: var(--weight-bold); padding: 4px 9px; border-radius: var(--radius-full); background: color-mix(in oklab, var(--primary) 13%, transparent); color: var(--primary); } .bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: 92px; } .bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; } .bars .track { width: 100%; flex: 1; display: flex; align-items: flex-end; } .bars .fill { width: 100%; border-radius: 5px; background: var(--primary); } .bars .d { font-size: 9.5px; color: var(--text-muted); font-weight: var(--weight-medium); } .statrow { display: flex; gap: 8px; } .statrow .s { flex: 1; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 12px 10px; text-align: center; } .statrow .s .v { font-size: 16px; font-weight: var(--weight-bold); } .statrow .s .k { font-size: 10px; color: var(--text-muted); margin-top: 1px; } .statrow .s svg { margin: 0 auto 5px; display: block; color: var(--text-secondary); } .app__tabs { margin-top: auto; display: flex; justify-content: space-around; padding: 12px 24px calc(12px + 6px); border-top: 1px solid var(--border-subtle); background: var(--bg); } .app__tabs span { color: var(--text-muted); } .app__tabs span.on { color: var(--primary); } .app__home { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 110px; height: 5px; border-radius: 3px; background: var(--text-primary); opacity: 0.25; } /* generation timeline screen */ .gen { padding: 14px 18px; display: flex; flex-direction: column; gap: 0; } .gen__title { font-size: 17px; font-weight: var(--weight-bold); letter-spacing: -0.02em; } .gen__sub { font-size: 12px; color: var(--text-muted); margin: 3px 0 20px; } .gen__rail { display: flex; flex-direction: column; } .gen__step { display: flex; gap: 13px; } .gen__mark { display: flex; flex-direction: column; align-items: center; } .gen__dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 2px solid var(--border); color: var(--text-muted); background: var(--bg); } .gen__dot--done { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .gen__dot--active { border-color: var(--primary); color: var(--primary); } .gen__line { width: 2px; flex: 1; background: var(--border-subtle); min-height: 22px; } .gen__line--done { background: var(--primary); } .gen__content { padding-bottom: 20px; } .gen__d { font-size: 13.5px; font-weight: var(--weight-semibold); } .gen__m { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .gen__content--active .gen__d { font-weight: var(--weight-bold); } /* ============================================================ Trust strip ============================================================ */ .trust-strip { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .trust-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; } .trust-strip__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); } .trust-strip__items { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; } .trust-strip__item { display: flex; align-items: center; gap: 10px; font-weight: var(--weight-semibold); color: var(--text-secondary); font-size: var(--text-base); } .trust-strip__item svg { color: var(--primary); } /* ============================================================ Feature grid (Why) ============================================================ */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; } .feature { background: var(--bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); padding: 32px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .section--surface .feature { background: var(--bg); } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .feature__icon { width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--primary); color: var(--on-primary); display: grid; place-items: center; margin-bottom: 22px; } .feature h3 { margin-bottom: 10px; } .feature p { margin: 0; font-size: var(--text-base); color: var(--text-secondary); line-height: 1.6; } /* ============================================================ How it works (steps) ============================================================ */ .how__grid { display: grid; grid-template-columns: 1fr 360px; gap: clamp(40px, 6vw, 96px); align-items: center; margin-top: 56px; } .steps { display: flex; flex-direction: column; gap: 4px; } .step { display: flex; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--border-subtle); } .step:last-child { border-bottom: none; } .step__num { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--primary); color: var(--primary); display: grid; place-items: center; font-size: var(--text-lg); font-weight: var(--weight-bold); } .step h3 { margin-bottom: 8px; } .step p { margin: 0; font-size: var(--text-base); color: var(--text-secondary); } .how__device { display: flex; justify-content: center; } /* ============================================================ Product showcase (dark band) ============================================================ */ .showcase__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(40px, 6vw, 80px); align-items: center; margin-top: 8px; } .checklist { display: flex; flex-direction: column; gap: 26px; margin-top: 40px; } .checklist li { list-style: none; display: flex; gap: 16px; } .checklist .ck { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--on-primary); color: var(--primary); display: grid; place-items: center; margin-top: 2px; } .checklist h4 { margin: 0 0 5px; font-size: var(--text-lg); font-weight: var(--weight-bold); } .checklist p { margin: 0; font-size: var(--text-base); color: color-mix(in oklab, var(--on-primary) 76%, transparent); } .showcase__devices { display: flex; justify-content: center; gap: 18px; } .showcase__devices .phone:nth-child(2) { margin-top: 48px; } @media (max-width: 880px) { .showcase__devices .phone:nth-child(2) { display: none; } } /* ============================================================ Testimonials ============================================================ */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; } .quote { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); padding: 30px; display: flex; flex-direction: column; } .quote__stars { display: flex; gap: 3px; color: var(--primary); margin-bottom: 18px; } .quote p { margin: 0 0 24px; font-size: var(--text-lg); line-height: 1.55; color: var(--text-primary); text-wrap: pretty; } .quote__by { display: flex; align-items: center; gap: 12px; margin-top: auto; } .quote__by .av { width: 44px; height: 44px; border-radius: 50%; background: var(--n-medium-1); display: grid; place-items: center; font-weight: var(--weight-bold); color: var(--text-secondary); } .quote__by .nm { font-weight: var(--weight-bold); font-size: var(--text-base); } .quote__by .mt { font-size: var(--text-sm); color: var(--text-muted); } /* ============================================================ Beta / pricing ============================================================ */ .beta__card { max-width: 760px; margin: 56px auto 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-card); display: grid; grid-template-columns: 1.1fr 1fr; } .beta__left { padding: 44px; } .beta__price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; } .beta__price .amt { font-size: clamp(40px, 6vw, 60px); font-weight: var(--weight-extrabold); letter-spacing: -0.04em; line-height: 1; } .beta__price .per { font-size: var(--text-lg); color: var(--text-muted); font-weight: var(--weight-medium); } .beta__left .tag { font-size: var(--text-sm); color: var(--text-muted); } .beta__incl { padding: 44px; background: var(--surface); border-left: 1px solid var(--border-subtle); } .beta__incl h4 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); margin: 0 0 18px; font-weight: var(--weight-bold); } .beta__incl ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .beta__incl li { list-style: none; display: flex; gap: 11px; font-size: var(--text-base); color: var(--text-secondary); align-items: flex-start; } .beta__incl li svg { color: var(--primary); flex: none; margin-top: 3px; } /* ============================================================ FAQ ============================================================ */ .faq { max-width: 800px; margin: 48px auto 0; } .faq details { border-bottom: 1px solid var(--border-subtle); } .faq summary { list-style: none; cursor: pointer; padding: 26px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: -0.01em; } .faq summary::-webkit-details-marker { display: none; } .faq summary .ico { flex: none; width: 28px; height: 28px; position: relative; transition: transform var(--dur-base) var(--ease-out); } .faq summary .ico::before, .faq summary .ico::after { content: ""; position: absolute; background: var(--primary); border-radius: 2px; } .faq summary .ico::before { left: 4px; right: 4px; top: 13px; height: 2px; } .faq summary .ico::after { top: 4px; bottom: 4px; left: 13px; width: 2px; transition: opacity var(--dur-base) var(--ease-out); } .faq details[open] summary .ico::after { opacity: 0; } .faq p { margin: 0 0 26px; font-size: var(--text-lg); color: var(--text-secondary); line-height: 1.6; max-width: 68ch; } /* ============================================================ Final CTA ============================================================ */ .final { text-align: center; } .final .mark { width: 72px; height: 72px; margin: 0 auto 28px; display: block; } .final .mark path { stroke: var(--on-primary); } .final h2 { max-width: 16ch; margin: 0 auto; } .final .lede { margin-left: auto; margin-right: auto; } .final .btn-row { justify-content: center; margin-top: 40px; } /* ============================================================ Footer ============================================================ */ .footer { background: var(--primary); color: var(--on-primary); padding: 72px 0 40px; } .footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } .footer .brand__name { color: var(--on-primary); } .footer .brand__mark path { stroke: var(--on-primary); } .footer__tag { margin: 18px 0 0; font-size: var(--text-base); color: color-mix(in oklab, var(--on-primary) 70%, transparent); max-width: 32ch; } .footer h5 { margin: 0 0 16px; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: color-mix(in oklab, var(--on-primary) 74%, transparent); font-weight: var(--weight-bold); } .footer__col a { display: block; padding: 7px 0; color: color-mix(in oklab, var(--on-primary) 90%, transparent); font-size: var(--text-base); } .footer__col a:hover { color: var(--on-primary); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 56px; padding-top: 28px; border-top: 1px solid color-mix(in oklab, var(--on-primary) 18%, transparent); font-size: var(--text-sm); color: color-mix(in oklab, var(--on-primary) 60%, transparent); } /* ============================================================ Entrance animation — transform-only slide-up that always keeps content visible (opacity stays 1), so no render path can blank the page. Gated by .js; reduced-motion shows everything static. ============================================================ */ @keyframes mfReveal { from { transform: translateY(20px); } to { transform: none; } } .js .reveal { animation: mfReveal 0.6s var(--ease-out) both; } .js .reveal:nth-child(2) { animation-delay: 0.07s; } .js .reveal:nth-child(3) { animation-delay: 0.14s; } @media (prefers-reduced-motion: reduce) { .js .reveal { animation: none; } } /* Phone mockups hold high-res screenshots. The transform-based reveal composites the wrapper onto a GPU layer that browsers rasterize at 1x CSS pixels (~278px) then upscale on retina — softening the screenshot. Opt phone wrappers out of the transform reveal so the shots render at full device resolution. */ .js .reveal:has(.phone--shot) { animation: none; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; text-align: left; } .hero__device { margin-top: 24px; order: 2; } .hero__copy { order: 1; max-width: none; } .how__grid { grid-template-columns: 1fr; } .how__device { order: -1; } .showcase__grid { grid-template-columns: 1fr; } .grid-3, .quotes { grid-template-columns: 1fr; } .beta__card { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .wrap { padding: 0 20px; } .beta__left, .beta__incl { padding: 32px 28px; } .footer__grid { grid-template-columns: 1fr; } .hero__trust { flex-direction: column; align-items: flex-start; } } /* ============================================================ Header theme toggle ============================================================ */ .theme-toggle { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: var(--radius-full); border: 1px solid var(--border-subtle); background: transparent; color: var(--text-primary); cursor: pointer; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .theme-toggle:hover { background: var(--surface); } .theme-toggle .ico-sun { display: none; } .theme-toggle .ico-moon { display: block; } .theme-toggle[aria-pressed="true"] .ico-sun { display: block; } .theme-toggle[aria-pressed="true"] .ico-moon { display: none; } /* ============================================================ AI trust chip (hero trust) ============================================================ */ .ai-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); background: var(--surface); border: 1px solid var(--border-subtle); padding: 8px 14px; border-radius: var(--radius-full); } .ai-chip svg { color: var(--primary); } /* ============================================================ Who It's For — persona grid ============================================================ */ .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; } .persona { background: var(--bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); padding: 28px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .persona:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .persona__icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--surface); color: var(--primary); display: grid; place-items: center; margin-bottom: 18px; border: 1px solid var(--border-subtle); } .persona h3 { font-size: var(--text-xl); margin-bottom: 10px; } .persona p { margin: 0; font-size: var(--text-base); color: var(--text-secondary); line-height: 1.55; } .who-note, .pricing-note { text-align: center; max-width: 64ch; margin: 44px auto 0; font-size: var(--text-base); color: var(--text-muted); line-height: 1.6; text-wrap: pretty; } /* ============================================================ Pricing tiers ============================================================ */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; align-items: stretch; } .tier { background: var(--bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); padding: 32px; display: flex; flex-direction: column; } .tier--feature { border: 2px solid var(--primary); position: relative; box-shadow: var(--shadow-card); } .tier__badge { position: absolute; top: -13px; left: 32px; background: var(--primary); color: var(--on-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-full); white-space: nowrap; } .tier__name { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-secondary); } .tier__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 12px 0 6px; } .tier__price .per { white-space: nowrap; } .tier__price .amt { font-size: clamp(34px, 4vw, 46px); font-weight: var(--weight-extrabold); letter-spacing: -0.03em; line-height: 1; } .tier__price .per { font-size: var(--text-base); color: var(--text-muted); font-weight: var(--weight-medium); } .tier__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 24px; min-height: 38px; line-height: 1.5; } .tier .mf-btn { margin-top: auto; } /* ============================================================ Footer contact ============================================================ */ .footer__contact { margin: 18px 0 0; font-size: var(--text-sm); color: color-mix(in oklab, var(--on-primary) 74%, transparent); line-height: 1.8; } .footer__contact a { color: color-mix(in oklab, var(--on-primary) 90%, transparent); text-decoration: underline; text-underline-offset: 2px; } .footer__contact a:hover { color: var(--on-primary); } @media (max-width: 980px) { .grid-4 { grid-template-columns: 1fr 1fr; } .tiers { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } } @media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } } /* hide tweak panel mount until React fills it */ #tweaks-root:empty { display: none; } /* ============================================================ Waitlist (email capture) + coming-soon chips ============================================================ */ .waitlist { max-width: 480px; } .hero .waitlist { margin-top: 4px; } .waitlist__form { margin: 0; } .waitlist__row { display: flex; gap: 10px; align-items: stretch; } .waitlist__row .mf-input { flex: 1; min-width: 0; height: 56px; } .waitlist__row .mf-btn { flex: none; white-space: nowrap; } .waitlist__note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: var(--text-sm); color: var(--text-muted); } .waitlist__note svg { color: var(--primary); flex: none; } .waitlist__err { margin: 10px 0 0; font-size: var(--text-sm); color: var(--danger); } .waitlist__err:empty { margin: 0; } .waitlist__alt { margin: 16px 0 0; font-size: var(--text-base); } .waitlist__alt a { color: var(--text-secondary); } /* optional iPhone / Android toggle */ .wl-seg { display: flex; align-items: center; gap: 10px; border: 0; padding: 0; margin: 14px 0 0; flex-wrap: wrap; } .wl-seg__q { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; } .wl-seg__opt { position: relative; display: inline-flex; } .wl-seg__opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; } .wl-seg__opt span { display: inline-block; padding: 7px 15px; border-radius: var(--radius-full); border: 1px solid var(--border); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .wl-seg__opt input:checked + span { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .wl-seg__opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; } /* success state */ .waitlist__done { display: none; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); padding: 22px 24px; align-items: flex-start; gap: 16px; text-align: left; } .waitlist.is-done .waitlist__form { display: none; } .waitlist.is-done .waitlist__done { display: flex; } .waitlist.is-done + .waitlist__alt { display: none; } .waitlist__check { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; } .waitlist__done h4 { margin: 2px 0 4px; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); } .waitlist__done p { margin: 0; font-size: var(--text-base); color: var(--text-secondary); line-height: 1.5; } .waitlist__done a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; } /* stacked variant (modal + final CTA) */ .waitlist--stack .waitlist__row { flex-direction: column; } .waitlist--stack .waitlist__row .mf-btn { width: 100%; } /* coming-soon platform chips (replaces dead store badges) */ .store-soon { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; } .final .store-soon { justify-content: center; } .store-chip { display: inline-flex; align-items: center; gap: 11px; padding: 11px 18px; border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--surface); cursor: default; } .store-chip svg { flex: none; width: 24px; height: 24px; color: var(--text-primary); } .store-chip .lbl { display: flex; flex-direction: column; line-height: 1.14; text-align: left; } .store-chip .lbl b { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); letter-spacing: -0.01em; } .store-chip .lbl span { font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--weight-semibold); } .section--dark .store-chip { background: color-mix(in oklab, var(--on-primary) 10%, transparent); border-color: color-mix(in oklab, var(--on-primary) 22%, transparent); } .section--dark .store-chip svg, .section--dark .store-chip .lbl b { color: var(--on-primary); } .section--dark .store-chip .lbl span { color: color-mix(in oklab, var(--on-primary) 64%, transparent); } /* waitlist on the dark final band */ .section--dark .waitlist__note { color: color-mix(in oklab, var(--on-primary) 70%, transparent); } .section--dark .waitlist__note svg { color: var(--on-primary); } .section--dark .wl-seg__q { color: color-mix(in oklab, var(--on-primary) 70%, transparent); } .section--dark .wl-seg__opt span { color: color-mix(in oklab, var(--on-primary) 82%, transparent); border-color: color-mix(in oklab, var(--on-primary) 40%, transparent); } .section--dark .wl-seg__opt input:checked + span { background: var(--on-primary); color: var(--primary); border-color: var(--on-primary); } @media (max-width: 480px) { .waitlist__row { flex-direction: column; } .waitlist__row .mf-btn { width: 100%; } } /* modal waitlist tweaks */ .modal .waitlist { max-width: 100%; } .modal__subtitle { font-size: var(--text-base); line-height: 1.55; color: var(--text-secondary); margin: 8px auto 22px; max-width: 34ch; } /* ============================================================ Lifestyle photography ============================================================ */ .hero__photo { display: flex; justify-content: center; align-items: center; position: relative; } .hero__photo::before { content: ""; position: absolute; inset: -4% 0 0; z-index: 0; background: radial-gradient(56% 54% at 58% 44%, color-mix(in oklab, var(--primary) 11%, transparent), transparent 70%); } .hero__photo img { position: relative; z-index: 1; width: min(480px, 100%); height: auto; filter: drop-shadow(0 28px 52px rgba(0, 0, 0, 0.22)); } .mission__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .mission__photo { border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); } .mission__photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .mission .mf-btn { margin-top: 30px; } @media (max-width: 900px) { .mission__grid { grid-template-columns: 1fr; } .mission__photo { order: -1; } } @media (max-width: 980px) { .hero__photo { order: 2; margin-top: 16px; } .hero__photo img { width: min(360px, 78%); } }