/* Soltura marketing + legal pages (/, /pricing, /terms, /privacy, /refunds). Standalone stylesheet — these pages ship a tiny theme script, not the app bundle. The site DEFAULTS TO LIGHT on first open regardless of OS; a moon/sun toggle in the top bar flips to dark and the choice is remembered in localStorage. Dark is applied only when is set (never via prefers-color-scheme). Palette matches the app (web/src/styles.css → ios AppColors.swift): warm coral primary, teal secondary. Note: dark keeps the SAME orange primary (#ff6b35) as light — deliberately not the washed-out salmon the Material dark scheme would use. */ :root { color-scheme: light; --bg: #fffbff; --surface: #ffffff; --surface-variant: #f3edf7; --ink: #1c1b1f; --dim: #5f5c66; --outline: #dad5de; --primary: #ff6b35; --on-primary: #ffffff; --primary-container: #ffdbcc; --on-primary-container: #3a0b00; --secondary: #00bfa5; --on-secondary-container: #005141; --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06); } :root[data-theme="dark"] { color-scheme: dark; --bg: #141317; --surface: #1c1b1f; --surface-variant: #2b2930; --ink: #e6e1e5; --dim: #c9c5d0; --outline: #3c3a40; /* Keep the light-mode orange in dark mode (Tim: no pink night-orange). White text on it, same as light, so buttons/brand dot read identically in both themes. */ --primary: #ff6b35; --on-primary: #ffffff; --primary-container: #7f2b00; --on-primary-container: #ffdbcc; --secondary: #5dfdd4; --on-secondary-container: #c8fff4; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- Top bar ---- */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; /* Top pad clears the iOS status bar / notch when the page is opened as an installed (standalone) PWA — otherwise the bar sits under the status bar and its buttons can't be tapped. In a normal browser tab env(safe-area-inset-top) is 0, so this is just 14px. */ padding: calc(14px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--outline); } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; letter-spacing: 0.2px; color: var(--ink); } .brand:hover { text-decoration: none; } .brand .dot { width: 26px; height: 26px; border-radius: 8px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-size: 16px; font-weight: 800; } .topbar nav { display: flex; align-items: center; gap: 22px; } .topbar nav a.navlink { color: var(--dim); font-size: 15px; font-weight: 600; } @media (max-width: 620px) { .topbar nav a.navlink { display: none; } .topbar nav { gap: 12px; } } /* ---- Light/dark toggle (moon in light mode → tap for dark; sun in dark → tap for light) ---- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 999px; border: 1px solid var(--outline); background: transparent; color: var(--ink); cursor: pointer; flex: none; } .theme-toggle:hover { background: var(--surface-variant); } .theme-toggle svg { width: 19px; height: 19px; } .theme-toggle .i-sun { display: none; } :root[data-theme="dark"] .theme-toggle .i-moon { display: none; } :root[data-theme="dark"] .theme-toggle .i-sun { display: inline; } /* On legal pages there's no top bar — float the toggle in the top-right corner. */ .theme-toggle.floating { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 20; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(140%) blur(12px); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 16px; border: 1px solid transparent; cursor: pointer; } .btn:hover { text-decoration: none; } .btn.primary { background: var(--primary); color: var(--on-primary); } .btn.primary:hover { filter: brightness(1.05); } .btn.ghost { background: transparent; color: var(--ink); border-color: var(--outline); } .btn.ghost:hover { background: var(--surface-variant); } .btn.sm { padding: 9px 16px; font-size: 15px; } /* ---- Layout ---- */ .container { max-width: 960px; margin: 0 auto; padding: 0 20px; } section { padding: 64px 0; } .section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; } .section-head h2 { font-size: 30px; margin: 0 0 10px; letter-spacing: -0.2px; } .section-head p { color: var(--dim); margin: 0; font-size: 18px; } /* ---- Hero ---- */ /* Hero copy uses the same 640px measure as .section-head so the top of the page doesn't read wider than the feature / languages / FAQ headings below. Only set vertical padding here — the shorthand would wipe .container's 20px side padding and let hero copy bleed to the viewport edges. */ .hero { text-align: center; padding-top: 72px; padding-bottom: 40px; } .hero .eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--surface-variant); color: var(--on-primary-container); font-size: 14px; font-weight: 700; margin-bottom: 22px; } .hero h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.08; letter-spacing: -0.5px; margin: 0 auto 18px; max-width: 640px; } /* Used by the hero headline and by the /pricing "No subscription." heading. */ .accent { color: var(--primary); } .hero .lede { font-size: 20px; color: var(--dim); max-width: 640px; margin: 0 auto 30px; } .hero .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hero .fineprint { max-width: 640px; margin: 16px auto 0; color: var(--dim); font-size: 14px; } /* ---- Trust badges (hero + pricing) ---- The three objections a person actually has about talking to an AI, answered before they scroll. Every one of them is a promise written out in full on /privacy — if a fourth is ever added here, it has to be documented there first, or this row turns from a summary into marketing. Teal rather than coral: the coral is the buy button, and these must not compete with it. */ .trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 720px; margin: 26px auto 0; } .trust span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: var(--surface); border: 1px solid var(--outline); color: var(--ink); font-size: 14px; font-weight: 600; } .trust svg { width: 17px; height: 17px; flex: none; color: var(--secondary); } /* Dark mode's --secondary is a bright mint that vibrates against the surface at icon size; the container tone is the same hue, calmed down. */ :root[data-theme="dark"] .trust svg { color: var(--on-secondary-container); } @media (max-width: 560px) { .trust { flex-direction: column; align-items: stretch; } .trust span { justify-content: flex-start; } } /* On /pricing the row sits between the heading and the plan cards, so it needs the gap underneath that .section-head's own margin would otherwise have provided. */ .pricing .trust { margin: 0 auto 34px; } /* ---- Features ---- */ .features .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (max-width: 620px) { .features .grid { grid-template-columns: 1fr; } } .card { background: var(--surface); border: 1px solid var(--outline); border-radius: 18px; padding: 26px; box-shadow: var(--shadow); } .card .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-container); color: var(--on-primary-container); display: grid; place-items: center; font-size: 22px; margin-bottom: 16px; } .card h3 { margin: 0 0 8px; font-size: 19px; } .card p { margin: 0; color: var(--dim); } /* ---- Languages strip ---- */ .langs { text-align: center; } .langs .chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 760px; margin: 0 auto; } .chip { background: var(--surface-variant); border-radius: 999px; padding: 8px 15px; font-size: 15px; font-weight: 600; } .langs-note { color: var(--dim); font-size: 15px; max-width: 640px; margin: 28px auto 0; line-height: 1.5; } .langs-note strong { color: var(--ink); } /* ---- Pricing ---- */ .pricing .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 720px; margin: 0 auto; } @media (max-width: 620px) { .pricing .grid { grid-template-columns: 1fr; } } .plan { position: relative; background: var(--surface); border: 1px solid var(--outline); border-radius: 20px; padding: 28px; box-shadow: var(--shadow); } .plan.best { border-color: var(--primary); border-width: 2px; } .plan .tag { position: absolute; top: -12px; left: 24px; background: var(--primary); color: var(--on-primary); font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; } .plan .price { font-size: 40px; font-weight: 800; letter-spacing: -1px; } .plan .price span { font-size: 17px; font-weight: 600; color: var(--dim); } .plan .sub { color: var(--dim); margin: 4px 0 18px; } .plan .plan-name { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dim); margin: 0 0 8px; } .plan ul { list-style: none; padding: 0; margin: 4px 0 22px; display: flex; flex-direction: column; gap: 10px; } .plan ul li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.4; } .plan ul li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--secondary); font-weight: 800; } /* Free plan is the hero of /pricing — full width above the two paid cards. */ .plan.free { max-width: 720px; margin: 0 auto 18px; border-color: var(--secondary); } /* `.plan.later` (the single "nothing is for sale yet" card) went with the 2026-08-13 launch — there are two real cards in the grid again. */ .pricing .note { text-align: center; color: var(--dim); margin: 24px auto 0; max-width: 640px; font-size: 15px; } .pricing .note + .note { margin-top: 14px; } /* The indicative USD/CAD/NZD line. One step smaller and lighter than the surrounding notes on purpose: it must be findable by the US buyer who is squinting at "A$59.99", and skippable by everyone else. It is a reassurance, not part of the decision, so it must not compete with the two cards above it — hence no border, no background, and a full stop below the fold of the choice rather than inside the cards where six extra numbers would wreck them. */ .pricing .fx-note { font-size: 13.5px; line-height: 1.55; opacity: 0.85; } .pricing .fx-note strong { color: var(--ink); font-weight: 700; } .pricing .fx-note [data-fx-date] { white-space: nowrap; } /* The fair-use asterisk on "Unlimited". Superscript and dimmed so it qualifies the claim without shouting over it — but still a real link, so tapping it lands on the footnote rather than leaving someone hunting for what the star meant. `scroll-margin-top` keeps the target clear of the sticky top bar. */ .fnref { font-size: 0.7em; vertical-align: super; line-height: 0; text-decoration: none; color: inherit; opacity: 0.75; } .fnref:hover, .fnref:focus-visible { opacity: 1; text-decoration: underline; } #fair-use { scroll-margin-top: 90px; } /* ---- FAQ ---- */ .faq .list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq details { background: var(--surface); border: 1px solid var(--outline); border-radius: 14px; padding: 6px 20px; } .faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; float: right; color: var(--primary); font-weight: 800; } .faq details[open] summary::after { content: "\2013"; } .faq details p { margin: 0 0 16px; color: var(--dim); } /* ---- Footer ---- */ footer { border-top: 1px solid var(--outline); padding: 40px 20px calc(40px + env(safe-area-inset-bottom, 0px)); color: var(--dim); } footer .inner { max-width: 960px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; } footer nav { display: flex; flex-wrap: wrap; gap: 18px; } footer nav a { color: var(--dim); font-weight: 600; font-size: 15px; } footer .copy { font-size: 14px; } /* ---- Legal pages (/terms /privacy /refunds) ---- */ /* Top pad clears the iOS status bar in a standalone PWA (these pages are reached from the app's Settings links, which open in the installed app's own web view) so the "← Back" link isn't tucked under the status bar / notch where it's hard to tap. 0 inset in a browser tab. */ .legal { max-width: 760px; margin: 0 auto; padding: calc(56px + env(safe-area-inset-top, 0px)) 20px 72px; } .legal .back { display: inline-block; margin-bottom: 24px; font-weight: 600; font-size: 15px; } .legal h1 { font-size: 34px; letter-spacing: -0.3px; margin: 0 0 6px; } .legal .meta { color: var(--dim); margin: 0 0 32px; font-size: 15px; } .legal h2 { font-size: 21px; margin: 34px 0 10px; } .legal h3 { font-size: 17px; margin: 22px 0 8px; } .legal p, .legal li { color: var(--ink); } .legal .dim, .legal .dim * { color: var(--dim); } .legal ul { padding-left: 22px; } .legal li { margin: 6px 0; } .legal strong { font-weight: 700; } .legal hr { border: none; border-top: 1px solid var(--outline); margin: 40px 0; } .legal a { font-weight: 600; }