/* Design tokens ported from web-app/src/index.css so the landing page matches the app's look. Light is the default; `[data-theme='dark']` on flips the chrome, following the OS preference here (the landing page has no theme toggle of its own). */ :root { color-scheme: light; --font-ui: 'Instrument Sans', system-ui, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --surface-page: #eef1ee; --surface-panel: #ffffff; --surface-panel-alt: #f2f6f4; --ink-primary: #16302a; --ink-secondary: #4a5f58; --ink-muted: #85978f; --border-hairline: rgba(22, 48, 42, 0.1); /* glacier teal — the one signal colour */ --accent: #0f8f86; --accent-strong: #0b6f68; --accent-ink: #ffffff; --accent-soft: rgba(15, 143, 134, 0.12); --accent-line: rgba(15, 143, 134, 0.28); /* floating glass panels, same recipe as the app's header/rail chrome */ --surface-glass: rgba(255, 255, 255, 0.72); --surface-glass-strong: rgba(255, 255, 255, 0.86); --border-glass: rgba(255, 255, 255, 0.85); --shadow-glass: 0 18px 50px -12px rgba(20, 40, 36, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.9); --blur-glass: blur(20px) saturate(140%); /* page background: soft mist over the page surface, not a saturated gradient */ --bg-grad: linear-gradient(160deg, #f5f8f4 0%, #eef1ee 45%, #eef6f4 100%); --radius-panel: 18px; --radius-card: 14px; --radius-control: 11px; --radius-chip: 999px; } :root[data-theme='dark'] { color-scheme: dark; --surface-page: #12191a; --surface-panel: #16211f; --surface-panel-alt: #1c2826; --ink-primary: #eef6f4; --ink-secondary: #c9d9d6; --ink-muted: #7d918d; --border-hairline: rgba(255, 255, 255, 0.1); --accent: #5fd6cb; --accent-strong: #8ae5dc; --accent-ink: #06231f; --accent-soft: rgba(95, 214, 203, 0.16); --accent-line: rgba(95, 214, 203, 0.35); --surface-glass: rgba(16, 24, 26, 0.66); --surface-glass-strong: rgba(16, 24, 26, 0.84); --border-glass: rgba(255, 255, 255, 0.09); --shadow-glass: 0 18px 50px -12px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07); --blur-glass: blur(20px) saturate(130%); --bg-grad: linear-gradient(160deg, #12191a 0%, #0f1516 55%, #12211f 100%); } * { box-sizing: border-box; } body { margin: 0; font: 15px/145% var(--font-ui); background: var(--bg-grad) fixed; color: var(--ink-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } a:hover { color: var(--accent-strong); } .site-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; margin: 1rem; border-radius: var(--radius-panel); background: var(--surface-glass); border: 1px solid var(--border-glass); box-shadow: var(--shadow-glass); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); } .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink-primary); } .brand-mark { display: block; width: 100%; height: 100%; } .logo-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 22%; background: var(--surface-glass-strong); border: 1px solid var(--border-glass); box-shadow: var(--shadow-glass); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); } .brand-tile { width: 36px; height: 36px; } .site-header .logo { font-weight: 700; font-size: 1.25rem; } .hero { max-width: 640px; margin: 0 auto; padding: 4.5rem 1.5rem 3rem; text-align: center; } .hero-mark { display: block; width: 100%; height: 100%; } .hero-tile { width: 84px; height: 84px; margin-bottom: 1.5rem; } .hero h1 { font-size: 2.25rem; margin-bottom: 0.75rem; color: var(--ink-primary); } .hero p { color: var(--ink-secondary); font-size: 1.1rem; margin-bottom: 2rem; } .cta { display: inline-block; background: var(--accent); color: var(--accent-ink); padding: 0.75rem 1.75rem; border-radius: var(--radius-chip); text-decoration: none; font-weight: 600; border: 1px solid var(--border-glass); box-shadow: var(--shadow-glass); transition: background-color 0.15s ease, transform 0.15s ease; } .cta:hover { background: var(--accent-strong); color: var(--accent-ink); transform: translateY(-1px); } .store-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .store-badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem; border-radius: var(--radius-control); background: var(--surface-glass); border: 1px solid var(--border-hairline); color: var(--ink-muted); cursor: default; opacity: 0.75; } .store-badge-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; } .store-badge-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; } .store-badge-store { font-size: 0.9rem; font-weight: 600; color: var(--ink-secondary); } .features { padding: 3.5rem 1.5rem; } .features h2 { text-align: center; font-size: 1.5rem; max-width: 900px; margin: 0 auto 2.5rem; color: var(--ink-primary); } .feature-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; } .feature { background: var(--surface-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-panel); padding: 1.5rem; box-shadow: var(--shadow-glass); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent); margin-bottom: 0.9rem; } .feature h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--ink-primary); } .feature p { margin: 0; color: var(--ink-secondary); font-size: 0.95rem; line-height: 1.5; } .about { max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem 5rem; } .about h2 { font-size: 1.5rem; color: var(--ink-primary); } .about p { color: var(--ink-secondary); line-height: 1.6; } .about h3 { font-size: 1.1rem; margin: 2rem 0 0.5rem; color: var(--ink-primary); } .about ul { color: var(--ink-secondary); line-height: 1.6; padding-left: 1.25rem; } .legal-updated { color: var(--ink-muted); font-size: 0.9rem; margin-top: -0.5rem; } .site-footer { text-align: center; padding: 2rem; color: var(--ink-muted); font-size: 0.9rem; } .site-footer a { color: var(--ink-muted); }