/* ------- Design tokens ------- */ :root { --bg: #ffffff; --bg-elev: #f5f5f7; --card: #ffffff; --text: #1d1d1f; --text-muted: #6e6e73; --border: #e3e3e6; --accent: #0071e3; /* overridden per-app on */ --accent-ink: #ffffff; --shadow: 0 1px 3px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.05); --radius: 20px; --maxw: 1040px; --pad: clamp(1.25rem, 5vw, 2rem); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg: #000000; --bg-elev: #101012; --card: #16161a; --text: #f5f5f7; --text-muted: #98989d; --border: #2a2a2e; --shadow: 0 1px 3px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.4); } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); } /* ------- Header ------- */ .site-header { position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid var(--border); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 48px; } .brand { font-weight: 600; letter-spacing: -.01em; color: var(--text); font-size: 1.05rem; } .brand:hover { text-decoration: none; opacity: .7; } .site-header nav a { color: var(--text-muted); font-size: .95rem; margin-left: 1.5rem; } .site-header nav a:hover { color: var(--text); text-decoration: none; } /* ------- Buttons ------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.4rem; border-radius: 980px; font-size: 1rem; font-weight: 500; background: var(--accent); color: var(--accent-ink); transition: transform .15s ease, opacity .15s ease; } .btn:hover { text-decoration: none; opacity: .9; transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); } /* ------- Hero ------- */ .hero { text-align: center; padding: clamp(3.5rem, 10vw, 7rem) 0 clamp(2rem, 5vw, 3rem); } .hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 1rem; font-weight: 600; } .hero .lede { font-size: clamp(1.15rem, 2.5vw, 1.5rem); color: var(--text-muted); max-width: 34ch; margin: 0 auto; line-height: 1.4; } /* ------- App cards (landing) ------- */ .apps { list-style: none; margin: 0; padding: 0; padding-block: clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .apps > li { display: flex; } .app-card { position: relative; overflow: hidden; flex: 1; display: flex; flex-direction: column; gap: 1rem; padding: 2rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; } .app-card:hover { text-decoration: none; transform: translateY(-4px); } .app-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); } .app-card .row { display: flex; align-items: center; gap: 1rem; } .app-card img { width: 68px; height: 68px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.12); } .app-card h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; color: var(--text); } .app-card .tagline { margin: 0; color: var(--text-muted); } .app-card .desc { margin: 0; color: var(--text-muted); } .app-card .more { margin-top: auto; color: var(--accent); font-weight: 500; font-size: .95rem; } /* ------- App page hero ------- */ .app-hero { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(1.5rem, 4vw, 2.5rem); } .app-hero img.icon { width: 108px; height: 108px; border-radius: 24px; box-shadow: 0 4px 16px rgba(0,0,0,.15); } .app-hero h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.03em; margin: 0 0 .35rem; font-weight: 600; } .app-hero .tagline { font-size: 1.25rem; color: var(--text-muted); margin: 0 0 1.25rem; } .intro { font-size: 1.2rem; line-height: 1.5; max-width: 60ch; color: var(--text); margin: 0 0 2.5rem; } /* ------- Device / screenshot strip ------- */ .shots { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1rem calc(var(--pad)) 2.5rem; margin-inline: calc(-1 * var(--pad)); scrollbar-width: none; } .shots::-webkit-scrollbar { display: none; } .device { flex: 0 0 auto; scroll-snap-align: center; width: 250px; aspect-ratio: 9 / 19.5; padding: 10px; border-radius: 44px; background: linear-gradient(160deg, #2a2a2e, #0c0c0e); box-shadow: var(--shadow); margin: 0; } .device-screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 22%, var(--card)), var(--card)); } .device-screen::before { /* dynamic island */ content: ""; position: absolute; top: 12px; width: 78px; height: 22px; border-radius: 12px; background: #000; } .device-screen img { width: 100%; height: 100%; object-fit: cover; } .device-label { color: var(--text-muted); font-size: .9rem; font-weight: 500; letter-spacing: .02em; } /* ------- Features ------- */ .section { padding-block: clamp(2rem, 5vw, 3.5rem); } .section > h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); letter-spacing: -.02em; text-align: center; margin: 0 0 2.5rem; font-weight: 600; } .features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; } .feature { padding: 1.75rem; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--border); } .feature h3 { margin: 0 0 .5rem; font-size: 1.15rem; letter-spacing: -.01em; display: flex; align-items: baseline; gap: .5rem; } .feature h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; transform: translateY(-1px); } .feature p { margin: 0; color: var(--text-muted); font-size: .98rem; } /* ------- CTA band ------- */ .cta { text-align: center; padding-block: clamp(2.5rem, 6vw, 4rem); } .cta .privacy-note { margin-top: 1rem; color: var(--text-muted); font-size: .95rem; } /* ------- Footer ------- */ .site-footer { border-top: 1px solid var(--border); margin-top: 2rem; padding-block: 2.5rem; color: var(--text-muted); font-size: .9rem; } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; } .site-footer a { color: var(--text-muted); } .site-footer a:hover { color: var(--text); } .site-footer nav a { margin-left: 1.5rem; } .site-footer nav a:first-child { margin-left: 0; } /* ------- Policy pages ------- */ .policy { max-width: 720px; padding-block: clamp(2.5rem, 6vw, 4rem); } .policy h1 { font-size: clamp(1.9rem, 5vw, 2.5rem); letter-spacing: -.03em; margin: 0 0 .25rem; font-weight: 600; } .policy .updated { color: var(--text-muted); font-size: .95rem; margin: 0 0 2rem; } .policy h2 { font-size: 1.35rem; letter-spacing: -.01em; margin: 2.5rem 0 .75rem; } .policy ul { padding-left: 1.25rem; } .policy li { margin-bottom: .5rem; } .policy table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .95rem; } .policy th, .policy td { text-align: left; padding: .65rem .85rem; border: 1px solid var(--border); vertical-align: top; } .policy th { background: var(--bg-elev); font-weight: 600; } .policy code { background: var(--bg-elev); padding: .1rem .35rem; border-radius: 6px; font-size: .9em; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }