/* landing.css — marketing entry screen. Own small palette (ink navy / paper white / signal blue), separate from the Treehouse (onboarding) and Ocean (dashboard) themes — this is a marketing surface, not a themed app view, so it doesn't hook into --bg/--accent etc. 2026-07-28: "The Receipt, Transformed" — replaces the earlier dark-navbar + donut-chart hero (Barat: "change layout and color... give me idea" -> reviewed a standalone preview at public/landing-preview.html/.css -> "make it live"). The signature element is a recreation of Barat's real Telegram screenshot of the bot (see .tg-window below), not an abstract stat card — it tells "send a photo -> get structured data" as one visual instead of a headline. */ /* Full-bleed: cancel app.css's persistent chrome (.app-header/.app-main padding + centered max-width, the parchment body backdrop) only while landing.js has this class on — every other screen is completely unaffected. */ body.landing-mode { background: #fbfaf7; } body.landing-mode::before, body.landing-mode::after { display: none; } body.landing-mode .app-header, body.landing-mode .app-footer { padding: 0; } body.landing-mode .app-main { padding: 0; max-width: none; margin: 0; } .landing-root { --lp-ink: #101826; --lp-navy: #101826; --lp-paper: #fbfaf7; --lp-paper-2: #f3f1ea; --lp-thermal: #6b7280; --lp-line: #e4e1d6; --lp-blue: #2563eb; --lp-blue-strong: #1d4ed8; --lp-mint: #10b981; min-height: 100vh; background: var(--lp-paper); color: var(--lp-ink); font-family: 'Inter', var(--font-body, system-ui, sans-serif); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; } .landing-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } /* --- nav --- */ /* 2026-08-14 (Barat: exact reference screenshot — plain white bar, ink "Snap", blue "Receipt"/AI badge, no navy): was var(--lp-navy) (dark). A light nav needs its own bottom border since the page body is ALSO --lp-paper — without one the nav would have no visible edge at all. */ .landing-nav { background: var(--lp-paper); border-bottom: 1px solid var(--lp-line); padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; } .landing-nav-brand { display: flex; align-items: center; gap: 10px; } /* Shared brand asset: the supplied Snap Receipt AI wordmark is an SVG so it stays crisp across desktop, mobile, and downloadable marketing surfaces. */ .landing-wordmark { display: block; width: 184px; height: auto; } .landing-nav-actions { display: flex; align-items: center; gap: 10px; } .landing-nav-btn { font: inherit; cursor: pointer; border-radius: 6px; padding: 8px 16px; font-weight: 600; font-size: 14px; } /* 2026-08-14: flipped for the light nav (were white-on-transparent, for the old navy bar — invisible against light paper). */ .landing-nav-btn--login { background: transparent; color: var(--lp-ink); border: 1px solid var(--lp-line); } .landing-nav-btn--login:hover { border-color: var(--lp-ink); } .landing-nav-btn--register { background: transparent; color: var(--lp-thermal); border: none; } .landing-nav-btn--register:hover { color: var(--lp-ink); } /* 2026-08-25: nav-sized version of .landing-btn--primary (the hero "Try for Free" solid-blue look) — used by the "Download App" nav link so it stands out as the primary nav action instead of blending in with the plain outlined Login button. */ .landing-nav-btn--primary { background: var(--lp-blue); color: #fff; border: 1px solid var(--lp-blue); } .landing-nav-btn--primary:hover { background: var(--lp-blue-strong); border-color: var(--lp-blue-strong); } /* --- hero --- */ .landing-hero { flex: 1; display: flex; align-items: center; justify-content: center; gap: 64px; flex-wrap: wrap; padding: 88px 32px 64px; max-width: 1120px; margin: 0 auto; width: 100%; box-sizing: border-box; } .landing-hero-copy { max-width: 480px; } .landing-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .06em; color: var(--lp-blue); text-transform: uppercase; margin-bottom: 18px; } .landing-eyebrow::before { content: ''; width: 16px; height: 1px; background: var(--lp-blue); } .landing-hero-title { margin: 0 0 18px; font-family: 'Inter', var(--font-display, sans-serif); font-weight: 800; font-size: 46px; line-height: 1.08; color: var(--lp-ink); letter-spacing: -.02em; } .landing-hero-title em { font-style: normal; color: var(--lp-blue); } .landing-hero-sub { margin: 0 0 30px; color: var(--lp-thermal); font-size: 16px; line-height: 1.6; } .landing-cta-row { display: flex; gap: 12px; flex-wrap: wrap; } .landing-btn { font: inherit; cursor: pointer; border-radius: 8px; padding: 13px 24px; font-weight: 700; font-size: 15px; /* 2026-08-25: .landing-btn is also used on the Download button (an anchor, not a