/* numero — website * Theme tokens mirrored from android/app/.../core/theme/Color.kt: * Classic (dark / poker-night): ink #0E0E14, paper #F7F4EC, amber #F4B254 * Daylight (cream / paper): paper #FAF6EA, ink #1F2A4A, amber #F4B254 * Switch via [data-theme="classic" | "daylight"] on . */ :root { --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif; --font-mono: "SF Mono", Menlo, Monaco, "Courier New", monospace; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-soft: 0 4px 24px rgba(0,0,0,0.06); --shadow-strong: 0 12px 48px rgba(0,0,0,0.18); --transition: 200ms ease; } /* ── Classic (default — dark, Poker Night) ────────────────────────── */ :root, [data-theme="classic"] { --bg: #0E0E14; --bg-raised: #16161D; --bg-elevated: #1E1E27; --text: #F7F4EC; --text-dim: #C0BCB0; --text-mute: #7E7E92; --accent: #F4B254; --accent-deep: #E08A3D; --accent-soft: rgba(244, 178, 84, 0.16); --hairline: rgba(247, 244, 236, 0.08); --hairline-strong: rgba(247, 244, 236, 0.18); --hero-grad-start: #3C2F1B; --hero-grad-end: #15151C; --on-accent: #0E0E14; } /* ── Daylight (light, cream paper) ────────────────────────────────── */ [data-theme="daylight"] { --bg: #FAF6EA; --bg-raised: #F1EAD3; --bg-elevated: #E5DBC1; --text: #1F2A4A; --text-dim: #4A5777; --text-mute: #7882A1; --accent: #F4B254; --accent-deep: #E08A3D; --accent-soft: rgba(244, 178, 84, 0.22); --hairline: rgba(31, 42, 74, 0.10); --hairline-strong: rgba(31, 42, 74, 0.22); --hero-grad-start: #F4D689; --hero-grad-end: #FAF6EA; --on-accent: #1F2A4A; } /* ── Reset + base ─────────────────────────────────────────────────── */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-display); background: var(--bg); color: var(--text); line-height: 1.6; font-size: 16px; transition: background var(--transition), color var(--transition); min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-deep); } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } /* ── Header / nav ─────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid var(--hairline); } .site-header-inner { max-width: 1100px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 16px; } .brand-mark { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--text); } .brand-mark .icon-sq { width: 32px; height: 32px; background: var(--accent); border-radius: 8px; display: grid; place-items: center; color: var(--on-accent); font-weight: 900; font-size: 18px; } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 22px; } .nav-links a { color: var(--text-dim); font-size: 14px; font-weight: 500; } .nav-links a:hover { color: var(--text); } .theme-toggle { background: var(--bg-raised); border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 14px; color: var(--text-dim); font-size: 13px; font-family: var(--font-mono); } .theme-toggle:hover { color: var(--text); border-color: var(--hairline-strong); } /* ── Hero ─────────────────────────────────────────────────────────── */ .hero { position: relative; padding: 80px 24px 60px; text-align: center; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top, var(--hero-grad-start), var(--hero-grad-end) 70%); opacity: 0.7; z-index: 0; pointer-events: none; } .hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .hero-icon { width: 96px; height: 96px; margin: 0 auto 24px; border-radius: 22px; box-shadow: var(--shadow-strong); } .hero h1 { font-size: clamp(40px, 7vw, 72px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 18px; } .hero h1 .accent { color: var(--accent); } .hero p.tagline { font-size: clamp(17px, 2.2vw, 21px); color: var(--text-dim); max-width: 560px; margin: 0 auto 36px; } .cta-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .cta-primary, .cta-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-weight: 700; font-size: 15px; border: none; transition: transform var(--transition), background var(--transition); } .cta-primary { background: var(--accent); color: var(--on-accent); } .cta-primary:hover { background: var(--accent-deep); transform: translateY(-1px); color: var(--on-accent); } .cta-secondary { background: transparent; border: 1.5px solid var(--hairline-strong); color: var(--text); } .cta-secondary:hover { border-color: var(--accent); color: var(--accent); } /* ── Section ──────────────────────────────────────────────────────── */ section.content { padding: 60px 24px; } .section-inner { max-width: 1000px; margin: 0 auto; } .eyebrow { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 14px; } .section-h { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 18px; line-height: 1.15; } .section-sub { color: var(--text-dim); font-size: 17px; max-width: 640px; margin-bottom: 40px; } /* ── Feature grid ─────────────────────────────────────────────────── */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .feature-card { background: var(--bg-raised); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 24px; transition: transform var(--transition), border-color var(--transition); } .feature-card:hover { border-color: var(--accent); transform: translateY(-2px); } .feature-card .ico { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 20px; margin-bottom: 14px; } .feature-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; color: var(--text); } .feature-card p { font-size: 14px; color: var(--text-dim); line-height: 1.55; } /* ── How it works (numbered steps) ────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .step { position: relative; padding: 22px 22px 22px 70px; background: var(--bg-raised); border: 1px solid var(--hairline); border-radius: var(--radius-md); } .step .num { position: absolute; left: 18px; top: 18px; width: 36px; height: 36px; border-radius: 999px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 800; font-family: var(--font-mono); font-size: 16px; } .step h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; } .step p { font-size: 14px; color: var(--text-dim); } /* ── Match-style preview cards ────────────────────────────────────── */ .style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .style-card { background: var(--bg-raised); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 20px; text-align: center; } .style-card .style-tag { display: inline-block; padding: 3px 10px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.12em; border-radius: 999px; margin-bottom: 12px; } .style-card h3 { font-size: 17px; margin-bottom: 6px; } .style-card p { font-size: 13px; color: var(--text-dim); } /* ── CTA banner ───────────────────────────────────────────────────── */ .cta-banner { background: var(--accent); color: var(--on-accent); border-radius: var(--radius-lg); padding: 48px 32px; text-align: center; margin-top: 40px; } .cta-banner h2 { font-size: clamp(24px, 4vw, 36px); font-weight: 800; margin-bottom: 10px; } .cta-banner p { font-size: 16px; opacity: 0.85; max-width: 480px; margin: 0 auto 22px; } .cta-banner .cta-primary { background: var(--on-accent); color: var(--accent); } .cta-banner .cta-primary:hover { background: var(--bg-elevated); color: var(--accent); } /* ── Footer ───────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--hairline); padding: 40px 24px 30px; margin-top: 40px; } .footer-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; } .footer-inner .brand-mark { font-size: 16px; } .footer-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 22px; } .footer-links a { color: var(--text-mute); font-size: 13px; } .footer-links a:hover { color: var(--text); } .footer-meta { max-width: 1100px; margin: 22px auto 0; font-size: 12px; color: var(--text-mute); font-family: var(--font-mono); } /* ── Doc pages (privacy / terms / delete-account) ─────────────────── */ .doc-page { padding: 60px 24px; } .doc-inner { max-width: 760px; margin: 0 auto; } .doc-inner h1 { font-size: clamp(32px, 5vw, 44px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; } .doc-inner .doc-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); margin-bottom: 36px; } .doc-inner h2 { font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 32px 0 14px; } .doc-inner h3 { font-size: 18px; font-weight: 700; margin: 22px 0 8px; } .doc-inner p, .doc-inner ul, .doc-inner ol { color: var(--text-dim); margin-bottom: 14px; font-size: 15.5px; } .doc-inner ul, .doc-inner ol { padding-left: 22px; } .doc-inner li { margin-bottom: 6px; } .doc-inner strong { color: var(--text); } /* ── Delete-account specific ──────────────────────────────────────── */ .warn-box { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text); padding: 18px 20px; border-radius: var(--radius-md); margin: 22px 0; font-size: 14.5px; } .warn-box strong { color: var(--accent); } .email-box { background: var(--bg-raised); border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); padding: 20px; margin: 16px 0 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .email-box code { font-family: var(--font-mono); font-size: 15px; color: var(--accent); background: var(--bg); padding: 6px 12px; border-radius: 6px; } .email-box a.cta-primary { margin-left: auto; } /* ── Responsive tweaks ────────────────────────────────────────────── */ @media (max-width: 640px) { .nav-links { gap: 14px; } .nav-links a:not(.theme-toggle) { display: none; } .hero { padding: 56px 20px 44px; } .footer-inner { flex-direction: column; align-items: flex-start; } .footer-links { margin-left: 0; } }