/* 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 --- */ .landing-nav { background: var(--lp-navy); padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; } .landing-nav-brand { display: flex; align-items: center; gap: 10px; } /* Wordmark (2026-07-29): "Snap" + "Receipt" + an "AI" pill badge — the nav sits on the dark navy bar, so "Snap" is white here (the reference wordmark's dark-ink version is for light backgrounds — see .landing-wordmark--dark below for the light-bg contexts). */ .landing-wordmark { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 19px; letter-spacing: -.01em; line-height: 1; } .landing-wordmark-snap { color: #fff; } .landing-wordmark-receipt { color: var(--lp-blue); } .landing-wordmark-badge { background: var(--lp-blue); color: #fff; font-size: 12px; font-weight: 800; border-radius: 6px; padding: 3px 7px; letter-spacing: 0; } /* Light-background variant (e.g. inside onboarding/dashboard headers) — "Snap" switches to ink instead of white so it stays readable on white/paper. */ .landing-wordmark--dark .landing-wordmark-snap { color: var(--lp-ink); } .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; } .landing-nav-btn--login { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); } .landing-nav-btn--login:hover { border-color: #fff; } .landing-nav-btn--register { background: transparent; color: #b9c2d4; border: none; } .landing-nav-btn--register:hover { color: #fff; } /* --- 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; } .landing-btn--primary { background: var(--lp-blue); color: #fff; border: none; } .landing-btn--primary:hover { background: var(--lp-blue-strong); } .landing-btn--secondary { background: transparent; color: var(--lp-ink); border: 1px solid var(--lp-line); } .landing-btn--secondary:hover { border-color: #c7cdd5; } /* --- Telegram chat window (the signature element) — a recreation of the real bot conversation: dark header, avatar, bot name/subtitle, a sent receipt photo (an original illustration, not a copy of any real photographed receipt), then the bot's replies. --- */ .landing-hero-visual { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; } .tg-window { width: 320px; background: #0e1621; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(16, 24, 38, .45); } .tg-header { background: #17212b; padding: 10px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); } .tg-header-avatar { width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0; background: linear-gradient(135deg, #ff9a52, #ef5d6a); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; } .tg-header-info { flex: 1; min-width: 0; } .tg-header-name { color: #fff; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tg-header-sub { color: #7d8b99; font-size: 11.5px; margin-top: 1px; } .tg-header-icons { display: flex; gap: 14px; flex-shrink: 0; } .tg-body { background: #0e1621; background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 16px 16px; padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 10px; } .tg-msg-row { display: flex; } .tg-msg-row--sent { justify-content: flex-end; } .tg-photo-mock { width: 168px; background: #f4f1ea; border-radius: 12px 12px 4px 12px; padding: 14px 12px 24px; position: relative; overflow: hidden; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4); } .tg-photo-line { height: 6px; background: #c9c2ae; border-radius: 2px; margin-bottom: 7px; } .tg-photo-line--total { height: 8px; background: #8a8267; margin-top: 3px; } .tg-photo-corner { position: absolute; left: 10px; bottom: 8px; width: 12px; height: 12px; border-left: 2px solid rgba(0, 0, 0, .35); border-bottom: 2px solid rgba(0, 0, 0, .35); border-radius: 0 0 0 3px; } .tg-photo-meta { position: absolute; right: 10px; bottom: 8px; font-size: 9.5px; color: #7a745f; display: flex; align-items: center; gap: 3px; } /* the "analyze" animation — a scan-line sweeping down the sent photo, looping, so the bot visibly "reads" it rather than the process being invisible. */ .tg-scan-line { position: absolute; left: 0; right: 0; height: 26px; top: -26px; z-index: 2; background: linear-gradient(180deg, transparent, rgba(37, 99, 235, .22) 40%, rgba(37, 99, 235, .4) 50%, rgba(37, 99, 235, .22) 60%, transparent); box-shadow: 0 0 14px 2px rgba(37, 99, 235, .35); animation: tg-scan 3s ease-in-out infinite; pointer-events: none; } @keyframes tg-scan { 0% { top: -26px; } 55% { top: 100%; } 100% { top: 100%; } } /* "bot is typing" indicator — pairs with the scan-line so the analysis reads as one continuous action: photo scans -> bot is composing -> reply lands. */ .tg-typing { background: #182533; border-radius: 4px 14px 14px 14px; padding: 12px 16px; display: flex; gap: 4px; align-items: center; } .tg-typing-dot { width: 6px; height: 6px; border-radius: 999px; background: #7d8b99; animation: tg-typing-bounce 1.2s ease-in-out infinite; } .tg-typing-dot:nth-child(2) { animation-delay: .15s; } .tg-typing-dot:nth-child(3) { animation-delay: .3s; } @keyframes tg-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } /* bot reply bubbles — incoming (left-aligned) */ .tg-msg { max-width: 230px; background: #182533; color: #dfe7ee; border-radius: 4px 14px 14px 14px; padding: 10px 12px; font-size: 13px; line-height: 1.5; } .tg-msg--success { border-left: 3px solid var(--lp-mint); padding-left: 9px; } .tg-msg-icon { margin-right: 2px; } .tg-msg-time { font-size: 10px; color: #5b6b7a; margin-top: 6px; text-align: right; } .landing-hero-caption { text-align: center; font-size: 12px; color: var(--lp-thermal); margin-top: 16px; } /* --- how it works strip --- */ .landing-steps { background: var(--lp-paper-2); border-top: 1px solid var(--lp-line); padding: 64px 32px; } .landing-steps-title { margin: 0 auto 32px; max-width: 1120px; font-size: 22px; font-weight: 800; color: var(--lp-ink); text-align: center; } .landing-steps-list { max-width: 1120px; margin: 0 auto; display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; } .landing-step-card { flex: 1 1 260px; max-width: 320px; background: var(--lp-paper); border: 1px solid var(--lp-line); padding: 20px; } .landing-step-num { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--lp-blue); font-size: 13px; margin-bottom: 10px; } .landing-step-title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--lp-ink); } .landing-step-desc { margin: 0; font-size: 13px; color: var(--lp-thermal); line-height: 1.5; } @media (max-width: 760px) { .landing-hero { padding: 56px 20px; gap: 36px; } .landing-hero-title { font-size: 34px; } }