/* ═══════════════════════════════════════════════════════════════ InboxScout — Shared Stylesheet styles.css — single source of truth for all pages ═══════════════════════════════════════════════════════════════ */ /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Design Tokens ── */ :root { /* ── App chrome (topbar + sidebar) ── */ --chrome-bg: #1c2e38; --chrome-surface: #243a46; --chrome-deep: #162430; --text-chrome: #fffbfe; --text2-chrome: #a8c8d4; --text3-chrome: #5a8898; --border-chrome: rgba(255,255,255,0.08); /* ── App content (deal cards, main area) ── */ --content-bg: #e4eaef; --content-surface: #edf1f4; --content-surface2: #dde4ea; --text-content: #1a2830; --text2-content: #3a5060; --text3-content: #6a8898; --border-content: rgba(26,40,48,0.08); /* ── Legacy aliases (used by inner-page components) ── */ --bg: var(--content-bg); --surface: var(--content-surface); --surface2: var(--content-surface2); --sidebar-bg: var(--chrome-deep); --stat-bg: var(--content-surface2); --border: var(--border-content); --border-strong: rgba(26,40,48,0.16); --text: var(--text-content); --text2: var(--text2-content); --text3: var(--text3-content); /* ── Brand accent ── */ --pink: #fe1945; --pink-bg: rgba(254,25,69,0.08); --periwinkle: #b9d7fb; --navy: #1a2830; /* ── Legacy orange (kept for landing page backward compat) ── */ --orange: #fe1945; --orange-bg: rgba(254,25,69,0.06); /* ── Functional colors ── */ /* On dark chrome surfaces */ --green: #3dd68c; --green-bg: rgba(61,214,140,0.12); /* On light content surfaces */ --green-content: #147a45; --green-content-bg: #edf7f2; --amber: #f0a832; --amber-bg: rgba(240,168,50,0.12); --amber-content: #9a6010; --amber-content-bg: #fef3e2; --red: #dc2626; --red-bg: #fdf0f0; --blue: #185FA5; --blue-bg: #e8f1fb; --purple: #534AB7; --purple-bg: #efedfd; --error: #dc2626; --error-bg: #fdecea; --info: var(--periwinkle); --info-bg: rgba(185,215,251,0.15); /* ── Radius ── */ --radius: 12px; --radius-sm: 8px; } /* ── Base ── */ /* S37: kill the white/light flash in the topbar strip during page navigation. On reload the browser paints the page background before the fixed topbar renders; the light --content-bg was flashing through the top 56px. Fix: paint ONLY the top 56px of dark via a hard-stop gradient (dark up to 56px, then the normal light page bg below). This covers the topbar strip during the pre-paint instant without risking a full-page dark flash (which a solid dark html bg could cause if body paints late). body sits on top with its own --bg once it renders. */ html { background: linear-gradient(var(--chrome-bg) 0, var(--chrome-bg) 56px, var(--content-bg) 56px); background-repeat: no-repeat; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; scrollbar-gutter: stable; } /* ── Typography ── */ h1, h2, h3, .heading { font-family: 'Syne', sans-serif; } /* ── Topbar ── */ /* S37: the topbar is injected by shared-topbar.js after page load, so on every navigation the container is briefly empty → flicker. This rule makes the EMPTY #app-topbar container render as a correctly-sized, correctly-colored fixed bar from first paint, so only the logo/links fill in a beat later — no bar-appearing pop, no color flash. The :empty scope means once the JS injects the real .topbar, this placeholder styling drops away and doesn't double up. Must live here (loads with the page) not in the injected JS, which can't run early enough to help. */ #app-topbar:empty { display: block; height: 56px; background: var(--chrome-bg); border-bottom: 1px solid var(--border-chrome); position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .topbar { background: var(--chrome-bg); border-bottom: 1px solid var(--border-chrome); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; height: 56px; position: fixed; top: 0; left: 0; right: 0; z-index: 100; box-shadow: 0 2px 16px rgba(0,0,0,0.28); } .topbar-left { display: flex; align-items: center; gap: 0; } .topbar-logo { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; color: var(--text-chrome); } .topbar-logo span { color: var(--pink); } .topbar-logo img { height: 28px; width: auto; display: block; } .topbar-actions { display: flex; align-items: center; gap: 10px; } /* ── User menu ── */ .user-menu-wrap { position: relative; } .user-menu-btn { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-sm); border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-chrome); cursor: pointer; transition: all 0.15s; } .user-menu-btn:hover { background: var(--chrome-surface); } .user-menu-chevron { transition: transform 0.2s; opacity: 0.6; } .user-menu-wrap.open .user-menu-chevron { transform: rotate(180deg); } .user-menu-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--content-surface); border: 1px solid var(--border-strong); border-radius: var(--radius); min-width: 220px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 200; padding: 6px 0; } .user-menu-wrap.open .user-menu-dropdown { display: block; } .user-menu-logged-in { font-size: 11px; color: var(--text3-content); padding: 8px 14px 2px; font-family: inherit; } .user-menu-email { font-size: 12px; color: var(--text3-content); padding: 6px 14px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-menu-divider { border-top: 1px solid var(--border-content); margin: 4px 0; } .user-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--text2-content); background: none; border: none; cursor: pointer; font-family: inherit; text-decoration: none; transition: background 0.1s; } .user-menu-item:hover { background: var(--content-bg); color: var(--text-content); } .user-menu-logout { color: var(--pink) !important; } /* ── Back button ── */ .btn-back { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--periwinkle); background: transparent; border: 1px solid var(--periwinkle); border-radius: var(--radius-sm); padding: 7px 14px; cursor: pointer; font-family: inherit; text-decoration: none; transition: all 0.15s; } .btn-back:hover { background: rgba(185,215,251,0.1); } /* ── Buttons ── */ .btn-primary { background: var(--orange); color: white; border: none; border-radius: var(--radius-sm); padding: 8px 18px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .btn-primary:hover { opacity: 0.85; } .btn-secondary { background: none; color: var(--text2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 18px; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.1s; } .btn-secondary:hover { background: var(--surface2); } .btn-danger { background: none; color: var(--red); border: 1px solid var(--red); border-radius: var(--radius-sm); padding: 8px 18px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.1s; } .btn-danger:hover { background: var(--red-bg); } .btn-pink { background: var(--pink); color: white; border: none; border-radius: var(--radius-sm); padding: 8px 18px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; text-decoration: none; display: inline-flex; align-items: center; } .btn-pink:hover { opacity: 0.88; } /* ── Form elements ── */ .field { margin-bottom: 1rem; } .field:last-child { margin-bottom: 0; } .field label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 5px; } .field input { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 12px; font-family: inherit; font-size: 13px; background: var(--surface2); color: var(--text); } .field input:focus { outline: none; border-color: var(--pink); background: var(--surface); } .field input:disabled { opacity: 0.6; cursor: not-allowed; } .field-row { display: flex; gap: 8px; align-items: flex-end; } .field-row .field { flex: 1; margin-bottom: 0; } .input-text { font-size: 13px; font-family: inherit; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 7px 10px; background: var(--surface2); color: var(--text); } .input-text:focus { outline: none; border-color: var(--blue); } /* ── Section cards ── */ .section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.25rem; overflow: hidden; } .section-header { padding: 1.1rem 1.5rem; border-bottom: 2px solid var(--border-content); background: var(--content-surface2); } .section-title { font-size: 14px; font-weight: 600; } .section-desc { font-size: 12px; color: var(--text3); margin-top: 2px; } .section-body { padding: 1.5rem 1.75rem; } /* ── Page title ── */ .page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.25rem; } .page-sub { font-size: 13px; color: var(--text3); margin-bottom: 2rem; } /* ── Toast ── */ /* .toast is defined once, below (single source of truth). The old duplicate here set bottom + the other set top, which stretched the toast full-height. */ /* ── Modal ── */ .modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 500; align-items: center; justify-content: center; } .modal-bg.open { display: flex; } .modal { background: var(--surface); border-radius: var(--radius); padding: 2rem; max-width: 420px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.2); } .modal-title { font-size: 16px; font-weight: 700; margin-bottom: 0.5rem; } .modal-body { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 1.5rem; } .modal-body strong { color: var(--text); } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; } /* ── Auth pages (login, signup, forgot, reset, verified) ── */ .auth-body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem 1rem; } .auth-card { background: var(--surface); border-radius: 16px; padding: 40px; width: 100%; max-width: 400px; box-shadow: 0 4px 24px rgba(0,0,0,0.07); } .auth-icon { width: 32px; height: 32px; background: var(--pink); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; margin-bottom: 1rem; } .auth-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.25rem; } .auth-subtitle { font-size: 14px; color: var(--text2); margin-bottom: 28px; line-height: 1.5; } /* ── Toggles ── */ .toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-track { position: absolute; inset: 0; background: var(--border-strong); border-radius: 20px; cursor: pointer; transition: background 0.2s; } .toggle input:checked + .toggle-track { background: var(--periwinkle); } .toggle-track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; background: white; border-radius: 50%; transition: transform 0.2s; } .toggle input:checked + .toggle-track::after { transform: translateX(16px); } /* ── Sidebar left-nav pattern (settings, account, help) ── */ .sidebar-nav-title { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; padding: 0 12px; margin-bottom: 6px; } .sidebar-nav-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--text2); background: none; border: none; cursor: pointer; font-family: inherit; transition: all 0.12s; } .sidebar-nav-item:hover { background: var(--surface2); color: var(--text); } .sidebar-nav-item.active { background: rgba(254,25,69,0.08); color: var(--text-content); border-left: 2px solid var(--pink); margin-left: -2px; } /* ── Toast notifications (shared across all pages) ── */ .toast { position: fixed; top: 68px; left: 50%; transform: translateX(-50%) translateY(-8px); background: var(--navy); color: white; border-radius: var(--radius-sm); padding: 10px 16px; font-size: 13px; font-weight: 500; line-height: 1.4; max-width: min(90vw, 360px); text-align: center; opacity: 0; transition: all 0.2s; pointer-events: none; z-index: 999; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .toast.toast-undo { background: var(--orange); } /* ── Inner page layout (account, settings, help) ── */ .inner-page-wrap { flex: 1; display: flex; flex-direction: column; min-height: calc(100vh - 56px); } .inner-main { max-width: 860px; margin: 0 auto; padding: 2.5rem 1.5rem; width: 100%; } .page-header { margin-bottom: 1.5rem; } .page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.2rem; font-family: 'Syne', sans-serif; color: #5566ee; } .page-sub { font-size: 13px; color: var(--text3); } .page-body { display: flex; gap: 0; align-items: flex-start; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.05); overflow: hidden; } /* ── Inner nav (left sidebar) ── */ .inner-nav { width: 200px; flex-shrink: 0; position: sticky; top: 72px; padding: 8px; border-right: 1px solid var(--border); background: var(--content-surface); align-self: stretch; } .inner-nav-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--text2); background: none; border: none; cursor: pointer; font-family: inherit; transition: all 0.12s; text-decoration: none; } .inner-nav-item:hover { background: var(--surface2); color: var(--text); } .inner-nav-item.active { background: var(--content-bg); color: var(--text); font-weight: 600; } /* ── Inner panel (right content) ── */ .inner-panel { flex: 1; min-width: 0; padding: 2rem; } .inner-panel .section { display: none; background: none; border: none; border-radius: 0; margin-bottom: 2rem; overflow: visible; } .inner-panel .section.active { display: block; } .inner-panel .section:last-child { margin-bottom: 0; } .inner-panel .section-header { padding: 0 0 0.75rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; background: none; } .inner-panel .section-title { font-size: 15px; font-weight: 600; color: #5566ee; font-family: 'Syne', sans-serif; } .inner-panel .section-desc { font-size: 12px; color: var(--text3); margin-top: 2px; } .inner-panel .section-body { padding: 0; background: none; } /* ── Form elements ── */ .field { margin-bottom: 1rem; } .field:last-child { margin-bottom: 0; } .field label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 5px; } .field input { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 12px; font-family: inherit; font-size: 13px; background: var(--content-surface); color: var(--text); } .field input:focus { outline: none; border-color: var(--pink); } .field input:disabled { opacity: 0.6; cursor: not-allowed; } .field-row { display: flex; gap: 8px; align-items: flex-end; } .field-row .field { flex: 1; margin-bottom: 0; } /* ── Buttons (inner pages) ── */ .btn-primary { background: var(--pink); color: white; border: 1px solid var(--pink); border-radius: var(--radius-sm); padding: 8px 18px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; display: inline-flex; align-items: center; gap: 6px; } .btn-primary:hover { opacity: 0.85; } .btn-secondary { background: none; color: var(--text2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 18px; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.1s; display: inline-flex; align-items: center; gap: 6px; } .btn-secondary:hover { background: var(--surface2); } .btn-danger { background: none; color: var(--red); border: 1px solid var(--red); border-radius: var(--radius-sm); padding: 8px 18px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.1s; } .btn-danger:hover { background: var(--red-bg); } /* ── Info rows ── */ .info-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .info-row:last-child { border-bottom: none; padding-bottom: 0; } .info-row-label { color: var(--text2); font-weight: 500; } .info-row-value { color: var(--text); font-weight: 500; } .plan-badge { font-size: 13px; font-weight: 500; color: var(--text); } /* ── Confirm modal (delete account etc) ── */ .confirm-modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 500; align-items: center; justify-content: center; } .confirm-modal-bg.open { display: flex; } .confirm-modal { background: #ffffff; border-radius: var(--radius); padding: 2rem; max-width: 420px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.2); } .confirm-modal-title { font-size: 16px; font-weight: 700; margin-bottom: 0.5rem; color: var(--text); } .confirm-modal-body { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 1.5rem; } .confirm-modal-body strong { color: var(--text); } .confirm-modal-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .confirm-modal-input { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 12px; font-family: inherit; font-size: 13px; margin-bottom: 1rem; background: var(--content-surface); } .confirm-modal-input:focus { outline: none; border-color: var(--red); }