/* â”€â”€ Font Awesome overrides (must come before universal selector) â”€â”€ */ .fa-solid { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } .fa-regular { font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; } .fa-brands { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; } [class^="fa-"], [class*=" fa-"] { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } /* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• LeadMax Design System â€” Clean Light â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */ :root { --primary: #2563EB; --primary-dark: #2563EB; --primary-light: #EFF6FF; --accent: #2F6BFF; --success: #16A34A; --warning: #D97706; --danger: #DC2626; --purple: #7C3AED; --n100: #FFFFFF; --n200: #F8FAFC; --n300: #D1D5DB; --n500: #6B7280; --n900: #111827; /* Clean-Light theme layer (additive; the section-accent map below flips --accent). */ --ink: #171A26; --muted: #9097A8; --hairline: #EEF0F4; --surface: #FFFFFF; --gold: #F5A623; --ok: #15A66B; --ok-tint: #E6F6EF; --bad: #E5484D; --bad-tint: #FCEAEA; --warn: #C7820B; --warn-tint: #FBF1DE; --card-radius: 18px; --card-shadow: 0 1px 2px rgba(23,26,38,.05), 0 6px 18px rgba(23,26,38,.045); --card-border: 1px solid var(--hairline); --accent-soft: #EAF1FF; /* faint accent chip fill (default = Home blue) */ --page-wash: #FAFBFF; /* near-white page background with a faint accent wash */ } /* Section-accent map — one class on flips --accent + --page-wash app-wide. Explicit hand-picked --page-wash hexes (not color-mix) for mobile-webview reliability. */ body.section-home { --accent: #3E63DD; --page-wash: #EFF3FD; } body.section-saleshub { --accent: #0E9C84; --page-wash: #F2FAF8; } body.section-academy { --accent: #6D5BD0; --page-wash: #F8F6FE; } body.section-record { --accent: #E0654A; --page-wash: #FCF1EC; } body.section-calendar { --accent: #5B61E8; --page-wash: #E8E9F6; } /* The section wash is ONE continuous page background, top to bottom (down to the bottom nav). Headers/tab-strips/content wrappers sit transparently ON it; only genuine work surfaces (cards, panels) lift off. Untinted pages keep the legacy grey via the base `body` rule below. */ body.section-home, body.section-saleshub, body.section-academy, body.section-record, body.section-calendar { background: var(--page-wash); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { background-color: #2563EB; } body, input, textarea, select, button { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #F1F5F9; min-height: 100vh; color: var(--n900); line-height: 1.6; } /* â”€â”€ Topbar (home + login only) â”€â”€ */ .topbar { background: #FFFFFF; height: 56px; padding: 0 1.25rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #D1D5DB; } .logo { display: flex; align-items: center; gap: 8px; } .logo-monogram { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #2563EB; border-radius: 8px; color: #FFFFFF; font-size: 13px; font-weight: 500; letter-spacing: -0.5px; flex-shrink: 0; } .logo-text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 500; color: #111827; letter-spacing: -0.3px; } .topbar-right { display: flex; align-items: center; gap: 10px; } .nav-user { font-size: 13px; font-weight: 500; color: #6B7280; } .btn-logout { padding: 6px 14px; background: transparent; color: #374151; border: 1px solid #D1D5DB; border-radius: 20px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background 0.2s; font-family: inherit; } .btn-logout:hover { background: #F8FAFC; } /* â”€â”€ Page Layout â”€â”€ */ .page-content { max-width: 480px; margin: 0 auto; padding: 0 16px 2rem; background: transparent; } /* â”€â”€ Score Badges â€” shared pill style across all screens â”€â”€ */ .score-badge { display: inline-flex; align-items: center; border-radius: 20px; padding: 3px 8px; font-size: 11px; font-weight: 500; white-space: nowrap; } .score-badge.high { background: #DCFCE7; color: #166534; } .score-badge.mid { background: #FEF9C3; color: #854D0E; } .score-badge.low { background: #FEE2E2; color: #991B1B; } .score-badge.empty { background: #F3F4F6; color: #6B7280; } .page-header { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; margin-bottom: 20px; } .page-title { font-size: 28px; font-weight: 500; color: var(--n900); } /* â”€â”€ Buttons â”€â”€ */ .btn-add { padding: 8px 18px; background: #2563EB; color: white; border: none; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.2s; } .btn-add:hover { background: #1D4ED8; } .btn-submit { width: 100%; padding: 12px 16px; background: #2563EB; color: white; border: none; border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; margin-bottom: 10px; transition: background 0.2s; } .btn-submit:hover { background: #1D4ED8; } .btn-cancel { width: 100%; padding: 12px 16px; background: transparent; color: #374151; border: 1px solid #D1D5DB; border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; } /* â”€â”€ Form Fields â”€â”€ */ .field-label { font-size: 11px; font-weight: 500; color: #6B7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; display: block; } .field-input, .field-textarea { width: 100%; padding: 10px 12px; font-family: inherit; font-size: 15px; color: #111827; background: #FFFFFF; border: 1px solid #D1D5DB; border-radius: 8px; outline: none; margin-bottom: 1.25rem; transition: border-color 0.2s, box-shadow 0.2s; } .field-input:focus, .field-textarea:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); background: white; } .field-textarea { resize: vertical; min-height: 90px; } /* â”€â”€ Modal â”€â”€ */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(17,24,39,0.45); z-index: 300; align-items: flex-end; justify-content: center; } .modal-overlay.open { display: flex; } .modal { background: var(--n100); border-radius: 16px 16px 0 0; border: 1px solid #D1D5DB; border-bottom: none; padding: 1.75rem 1.5rem; width: 100%; max-width: 480px; padding-bottom: 100px; } .modal-handle { width: 40px; height: 4px; background: var(--n300); border-radius: 2px; margin: 0 auto 1.5rem; } .modal-title { font-size: 20px; font-weight: 500; color: var(--n900); margin-bottom: 1.5rem; } /* â”€â”€ Empty State â”€â”€ */ .empty-state { text-align: center; padding: 3rem 2rem; background: #F8FAFC; border: 1px solid #D1D5DB; border-radius: 12px; } .empty-icon { font-size: 40px; margin-bottom: 0.75rem; } .empty-text { font-size: 15px; color: var(--n900); font-weight: 500; margin-bottom: 0.25rem; } .empty-sub { font-size: 13px; color: var(--n500); } /* â”€â”€ Status Badges â”€â”€ */ .status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.2px; } .status-in_progress { background: #EFF6FF; color: #1D4ED8; } .status-sold { background: #DCFCE7; color: #166534; } .status-not_sold { background: #F3F4F6; color: #6B7280; } .status-dead { background: #FEE2E2; color: #991B1B; } /* â”€â”€ Likelihood Badges â”€â”€ */ .likelihood-badge { font-size: 12px; font-weight: 500; letter-spacing: 0.2px; } .likelihood-high { color: var(--success); } .likelihood-mid { color: var(--warning); } .likelihood-low { color: var(--danger); } /* â”€â”€ Accent Square â”€â”€ */ .accent-sq { width: 40px; height: 40px; border-radius: 12px; background: #2563EB; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; font-weight: 500; flex-shrink: 0; letter-spacing: -0.3px; } /* â”€â”€ Avatar Circle â”€â”€ */ .avatar-circle { width: 40px; height: 40px; border-radius: 50%; background: #2563EB; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; font-weight: 500; flex-shrink: 0; } /* â”€â”€ Bottom Nav â”€â”€ */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: 480px; margin: 0 auto; background: var(--surface); display: flex; z-index: 100; align-items: center; justify-content: space-around; height: 72px; padding: 0 12px; padding-bottom: env(safe-area-inset-bottom); } .nav-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px; text-decoration: none; color: #1E293B; font-size: 10px; font-weight: 500; gap: 3px; transition: color 0.2s; position: relative; } .nav-tab:hover { color: #1E293B; } .nav-tab.active { color: var(--accent); } .nav-tab.active::after { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-top: 2px; } .nav-tab .tab-icon { font-size: 27px; } .nav-tab svg.tab-icon { width: 1em; height: 1em; } .nav-tab-record { display: flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; padding: 0 8px; position: relative; top: -12px; } .nav-record-fab { width: 56px; height: 56px; border-radius: 50%; background: #DC2626; color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(220,38,38,0.35); transition: box-shadow 0.2s; } .nav-record-fab:hover { box-shadow: 0 6px 24px rgba(220,38,38,0.45); } /* â”€â”€ LM Monogram Nav Icon â”€â”€ */ .nav-lm-icon { font-size: 16px; font-weight: 500; letter-spacing: -1px; line-height: 1; display: inline-block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .nav-lm-icon .nl { color: #111827 !important; } .nav-lm-icon .nm { color: #2563EB !important; } /* â”€â”€ Tabler icon sizing in nav â”€â”€ */ .nav-tab .ti { font-size: 27px; line-height: 1; } /* â”€â”€ Pill Tab Strip â”€â”€ */ .pill-tab-strip { display: flex; background: #F8FAFC; border: 1px solid #D1D5DB; border-radius: 10px; padding: 3px; gap: 3px; margin-bottom: 16px; } .pill-tab-btn { flex: 1; padding: 8px 12px; background: transparent; color: #6B7280; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.2s; text-align: center; } .pill-tab-btn.active { background: #2563EB; color: #FFFFFF; } /* â”€â”€ Briefing Cards â”€â”€ */ .briefing-item { background: #F8FAFC; border: 1px solid #D1D5DB; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; border-left: 4px solid #D1D5DB; } .briefing-item.commitment { border-left-color: #DC2626; } .briefing-item.appointment { border-left-color: #D97706; } .briefing-item.ai_task { border-left-color: #2563EB; } .briefing-item.ai_followup { border-left-color: #7C3AED; } .briefing-item.important { border-left-color: #2563EB; } .briefing-item-title { font-size: 14px; font-weight: 500; color: #111827; margin-bottom: 2px; } .briefing-item-reason { font-size: 13px; color: #6B7280; line-height: 1.5; } .briefing-item-prospect { font-size: 12px; font-weight: 500; color: #2563EB; margin-top: 4px; } .briefing-section-header { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 10px; } .briefing-section-header.urgent { color: #DC2626; } .briefing-section-header.important { color: #2563EB; } .briefing-narrative { background: #EFF6FF; border: 1px solid #D1D5DB; border-left: 3px solid #93C5FD; border-radius: 12px; padding: 18px 20px; color: #111827; font-size: 14px; line-height: 1.7; margin-top: 20px; font-style: italic; } /* â”€â”€ Top Bar â”€â”€ */ .top-bar { position: fixed; top: 0; left: 0; right: 0; height: 52px; background: var(--page-wash); z-index: 100; display: flex; justify-content: center; } .top-bar-inner { width: 100%; max-width: 480px; height: 52px; display: flex; align-items: center; padding: 0 8px; position: relative; } .top-bar-logo { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; } .top-bar-back { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--ink); font-size: 22px; flex-shrink: 0; } .top-bar-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 500; color: var(--ink); white-space: nowrap; pointer-events: none; user-select: none; } .top-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .top-bar-icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--muted); font-size: 22px; border-radius: 10px; transition: color 0.15s, opacity 0.15s; -webkit-tap-highlight-color: transparent; } .top-bar-icon-btn.active, .top-bar-icon-btn:hover { color: var(--accent); opacity: 1; } /* â”€â”€ Top Bar: mode toggle on light background â”€â”€ */ .top-bar .mode-toggle-pill { background: #EAEDF5; border: 1px solid #E1E5F0; border-radius: 999px; padding: 3px; } .top-bar .mode-btn { color: #7C8090; font-weight: 500; padding: 6px 13px; border-radius: 999px; } .top-bar .mode-btn.active { background: var(--accent); color: #FFFFFF; font-weight: 600; padding: 6px 14px; } /* No CSS filters applied to logos â€” raw files used as-is. */ /* â”€â”€ LeadMax full logo: global size constraint â”€â”€ Catches any leadmaxfull-logo reference in pages that load this stylesheet (i.e. pages extending base.html). Standalone pages set sizes via their own CSS. At 32px height the 2000Ã—400 image scales proportionally to 160px wide. */ img[src*="leadmaxfull-logo"] { height: 32px; width: auto; max-width: 160px; display: block; object-fit: contain; } /* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• RESPONSIVE LAYOUT â€” Sidebar nav for tablet (600px+) and desktop (1024px+) All rules below are gated behind min-width media queries so the mobile (<600px) experience is 100% unchanged. â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */ /* Sidebar is hidden on mobile (default). It is a sibling of .top-bar in base.html. */ .lm-sidebar { display: none; } @media (min-width: 600px) { /* â”€â”€ Sidebar shell â”€â”€ */ .lm-sidebar { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: 48px; /* tablet: icon-only rail */ background: #FFFFFF; border-right: 1px solid #E5E7EB; z-index: 150; padding: 10px 0 14px; overflow: hidden; transition: width 0.18s ease; } /* Tablet: expand on hover to reveal labels */ .lm-sidebar:hover { width: 220px; box-shadow: 2px 0 16px rgba(0,0,0,0.08); } /* Emulation banners (36px) push the sidebar down */ body.lm-emulating .lm-sidebar { top: 36px; } /* â”€â”€ Logo block â”€â”€ */ .lm-sidebar-logo { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; margin-bottom: 8px; text-decoration: none; flex-shrink: 0; overflow: hidden; white-space: nowrap; } .lm-sidebar-logo img { height: 28px; width: 28px; object-fit: contain; flex-shrink: 0; } .lm-sidebar-logo .lm-sidebar-wordmark { font-size: 18px; font-weight: 600; color: #111827; letter-spacing: -0.3px; opacity: 0; transition: opacity 0.15s; } .lm-sidebar:hover .lm-sidebar-wordmark { opacity: 1; } /* â”€â”€ Mode toggle (admins) inside sidebar â”€â”€ */ .lm-sidebar-mode { padding: 0 8px 8px; flex-shrink: 0; } .lm-sidebar-mode .mode-toggle-pill { width: 100%; justify-content: center; overflow: hidden; } /* On the collapsed rail, hide the labels' text via narrow buttons */ .lm-sidebar:not(:hover) .lm-sidebar-mode { display: none; } /* â”€â”€ Nav items â”€â”€ */ .lm-sidebar-nav { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; flex: 1; overflow-y: auto; } .lm-side-tab { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 9px; border-radius: 10px; text-decoration: none; color: #1E293B; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: background 0.12s; } .lm-side-tab i { font-size: 27px; width: 27px; text-align: center; flex-shrink: 0; } .lm-side-tab svg { font-size: 27px; width: 1em; height: 1em; flex-shrink: 0; } .lm-side-tab .lm-side-label { opacity: 0; transition: opacity 0.15s; } .lm-sidebar:hover .lm-side-tab .lm-side-label { opacity: 1; } .lm-side-tab:hover { background: #F1F5F9; } .lm-side-tab.active { background: #2563EB; color: #FFFFFF; } .lm-side-tab.active:hover { background: #2563EB; } /* Notification badge on the sidebar Home item */ .lm-side-tab { position: relative; } .lm-side-badge { position: absolute; top: 6px; left: 26px; background: #DC2626; color: #fff; min-width: 16px; height: 16px; border-radius: 8px; font-size: 9px; font-weight: 600; display: none; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; border: 2px solid #FFFFFF; box-sizing: border-box; } .lm-side-badge.show { display: flex; } /* â”€â”€ New Recording button â”€â”€ */ .lm-sidebar-record { padding: 8px; flex-shrink: 0; } .lm-side-record-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 10px; background: #2563EB; color: #FFFFFF; text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; border: none; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; } .lm-side-record-btn:hover { background: #1D4ED8; } .lm-side-record-btn.disabled { background: #E5E7EB; color: #6B7280; cursor: not-allowed; } .lm-side-record-btn i { font-size: 16px; flex-shrink: 0; } .lm-side-record-btn .lm-side-label { opacity: 0; transition: opacity 0.15s; } .lm-sidebar:hover .lm-side-record-btn .lm-side-label { opacity: 1; } /* â”€â”€ Hide bottom nav, reclaim its space â”€â”€ */ .bottom-nav { display: none !important; } body { padding-bottom: 24px !important; } /* â”€â”€ Shift content area to the right of the rail (tablet = 48px) â”€â”€ */ body { margin-left: 48px; } /* â”€â”€ Top bar spans only the content area & restyle for light content â”€â”€ */ .top-bar { left: 48px; justify-content: flex-end; /* push actions to the right of content */ background: #FFFFFF; box-shadow: 0 1px 0 #E5E7EB; } .top-bar-inner { max-width: none; width: 100%; padding: 0 20px; justify-content: flex-end; } /* Page title sits left within the content top bar */ .top-bar-title { left: 20px; transform: none; color: #111827; } .top-bar-icon-btn { color: var(--muted); } .top-bar-icon-btn.active, .top-bar-icon-btn:hover { color: var(--accent); } /* Mode toggle now lives in the sidebar â€” hide the top-bar copy on 600px+ */ .top-bar .mode-toggle-pill { display: none; } .bell-dot { border-color: #FFFFFF; } /* Emulation banner spans the content area only, sits above top bar */ body.lm-emulating .top-bar { top: 36px; } .lm-emu-banner { left: 48px !important; } /* Coach fixed pane respects the rail */ .coach-wrap { left: 48px; } /* Bottom-anchored fixed elements: clear the (now-hidden) bottom nav and offset left edge past the sidebar rail. */ .job-bar { left: 48px; bottom: 0; } .lm-toast { left: calc(50% + 24px); bottom: 24px; } /* +half rail to recenter */ } /* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• DESKTOP (1024px+) â€” flex layout shell + navy rail Sidebar and main are real flex siblings. One variable (--lm-rail) holds the rail width; main is flex:1 so the content width is always derived from the actual rail width. Collapsing only changes the variable, so the whole layout reflows with no overlap and no body margin-left hack. â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */ @media (min-width: 1024px) { /* Shared desktop proportions — every screen reuses these (no per-screen sizing) */ :root { --lm-rail: 62px; /* resting (icon-only) rail width — what the page lays out against */ --lm-rail-open: 248px; /* hover-expanded rail width — OVERLAYS content, never reflows it */ --lm-gap: 1rem; /* grid / card gap */ --lm-gutter: 1.75rem; /* page side + top padding */ --lm-content-max: none; /* full-width content lane (fills the area beside the rail) */ --lm-read-max: 52rem; /* readable column cap for form/text pages (Settings, wizard) */ --lm-card-min: 18rem; /* min card width before the grid wraps */ } body { margin-left: 0; } /* drop the old offset hack (tablet uses 48px) */ .lm-shell { display: flex; align-items: flex-start; min-height: 100vh; } .lm-main { flex: 1 1 auto; margin-left: var(--lm-rail); /* reserve the collapsed-rail footprint; the rail is position:fixed (out of flow) and overlays on hover */ min-width: 0; /* allow content to shrink instead of overflowing */ min-height: 100vh; /* fill the viewport so pages can flex to full height */ display: flex; flex-direction: column; padding-top: 52px; /* clear the fixed top bar */ } /* ── Shared desktop primitives (single source of proportions) ── .lm-page centered content lane that flex-fills the viewport height .lm-card-grid responsive, equal-height card grid (3â€“4 across at desktop widths) .lm-fill a region that grows to fill remaining height, its grid filling it */ .lm-page { width: 100%; max-width: var(--lm-content-max); margin: 0 auto; padding: var(--lm-gutter); flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--lm-gap); } .lm-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--lm-card-min), 1fr)); gap: var(--lm-gap); align-items: stretch; } .lm-card-grid > * { height: 100%; margin: 0; } /* Density modifier: fewer, wider cards (2â€“3 across) for denser content */ .lm-card-grid--wide { --lm-card-min: 22rem; } /* Readable-column modifier: caps + centers a form/text column inside the lane. width:100% so it fills up to the cap inside the flex-column .lm-main (margin auto alone would shrink it to content width). */ .lm-page--read { width: 100%; max-width: var(--lm-read-max); margin-left: auto; margin-right: auto; } .lm-fill { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } /* Cards size to content; rows pack to the top. Per-row equal height comes from align-items:stretch — never inflate rows to fill leftover viewport height. */ .lm-fill > .lm-card-grid { align-content: start; } /* Fixed overlays clear the rail via the same variable (stay in sync on collapse) */ .top-bar { left: var(--lm-rail); transition: left 0.2s ease; } .coach-wrap { left: var(--lm-rail); } .lm-emu-banner { left: var(--lm-rail) !important; } .job-bar { left: var(--lm-rail); } .lm-toast { left: calc(50% + (var(--lm-rail) / 2)); } /* â”€â”€ Navy rail â€” hover-expand OVERLAY â”€â”€ Rests at the collapsed width (--lm-rail, 62px) on every load; no toggle, no memory. position:fixed takes it out of flow so expanding to --lm-rail-open (248px) on hover FLOATS over the page (content is laid out against the 62px footprint and never shifts). Anti-flicker: expand is instant on hover/focus, but collapse waits out a short transition-delay buffer — skimming the edge or briefly leaving won't strobe, and re-entering within the buffer cancels the collapse. */ .lm-sidebar { position: fixed; top: 0; left: 0; bottom: auto; width: var(--lm-rail); height: 100vh; flex-shrink: 0; z-index: 250; /* above content + top-bar(100) + emu-banner(200); below modals(300)/job-bar(1000)/toasts(9999) */ overflow-y: auto; overflow-x: hidden; background: #003A99; /* brand navy */ border-right: none; padding: 16px 0 18px; transition: width 0.18s ease 0.22s; /* collapse only after a 0.22s hover-intent buffer */ } .lm-sidebar:hover, .lm-sidebar:focus-within { width: var(--lm-rail-open); transition-delay: 0s; /* expand immediately */ box-shadow: 6px 0 28px rgba(16,24,40,.22); } body.lm-emulating .lm-sidebar { top: 36px; height: calc(100vh - 36px); } /* ── Rest state = icon-only rail; hover/focus-within = expanded overlay. ── Labels + wordmark are hidden at rest (so icons center in the 62px rail) and fade in when the rail expands. Everything below is authored "collapsed-first", with `.lm-sidebar:hover, .lm-sidebar:focus-within` restoring the full look. */ .lm-side-label, .lm-sidebar-wordmark { display: none; } .lm-sidebar:hover .lm-side-label, .lm-sidebar:hover .lm-sidebar-wordmark, .lm-sidebar:focus-within .lm-side-label, .lm-sidebar:focus-within .lm-sidebar-wordmark { display: inline; animation: lm-rail-fade 0.16s ease both; } @keyframes lm-rail-fade { from { opacity: 0; } to { opacity: 1; } } /* Logo — centered "M" at rest; left-aligned with wordmark when expanded */ .lm-sidebar-logo { height: 44px; padding: 0; margin-bottom: 18px; gap: 12px; justify-content: center; } .lm-sidebar-logo img { height: 30px; width: 30px; } .lm-sidebar-logo .lm-sidebar-wordmark { color: #FFFFFF; font-size: 20px; } .lm-sidebar:hover .lm-sidebar-logo, .lm-sidebar:focus-within .lm-sidebar-logo { justify-content: flex-start; padding: 0 18px; } /* Nav items — flex:0 so the stack packs at the top with even rhythm (no bottom-pin). Rest: icon centered in a 42px pill. Expand: icon + label, left-aligned. */ .lm-sidebar-nav { gap: 6px; padding: 6px 10px; flex: 0 0 auto; } .lm-side-tab { height: 48px; padding: 0; gap: 0; justify-content: center; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.85); border-radius: 12px; } .lm-side-tab:hover { background: rgba(255,255,255,0.12); color: #FFFFFF; } .lm-side-tab.active, .lm-side-tab.active:hover { background: rgba(245,166,35,0.16); /* gold-tint pill reads as active even icon-only */ color: #F5A623; /* gold accent icon */ font-weight: 600; } .lm-side-badge { border-color: #003A99; } /* blend the cutout into the navy rail */ .lm-sidebar:hover .lm-sidebar-nav, .lm-sidebar:focus-within .lm-sidebar-nav { padding: 6px 14px; } .lm-sidebar:hover .lm-side-tab, .lm-sidebar:focus-within .lm-side-tab { justify-content: flex-start; padding: 0 14px; gap: 14px; } .lm-sidebar:hover .lm-side-tab.active, .lm-sidebar:focus-within .lm-side-tab.active { box-shadow: inset 3px 0 0 #F5A623; } /* New Recording — gold mic icon as a peer of the nav icons at rest; full gold button (icon + label) when expanded. Sits in the icon stack, NOT bottom-pinned. */ .lm-sidebar-record { padding: 4px 10px; flex: 0 0 auto; } .lm-side-record-btn { height: 48px; font-size: 15px; border-radius: 12px; background: transparent; /* rest: just the gold mic, no pill */ color: #F5A623; justify-content: center; gap: 0; padding: 0; } .lm-side-record-btn i { font-size: 23px; } .lm-sidebar:hover .lm-sidebar-record, .lm-sidebar:focus-within .lm-sidebar-record { padding: 8px 14px 4px; } .lm-sidebar:hover .lm-side-record-btn, .lm-sidebar:focus-within .lm-side-record-btn { background: #F5A623; color: #003A99; justify-content: flex-start; gap: 14px; padding: 0 14px; } .lm-sidebar:hover .lm-side-record-btn i, .lm-sidebar:focus-within .lm-side-record-btn i { font-size: 18px; } .lm-sidebar:hover .lm-side-record-btn:hover, .lm-sidebar:focus-within .lm-side-record-btn:hover { background: #E0941A; } /* Trial-expired: stay muted, never gold (rest icon + expanded pill) */ .lm-side-record-btn.disabled, .lm-sidebar:hover .lm-side-record-btn.disabled, .lm-sidebar:focus-within .lm-side-record-btn.disabled { background: transparent; color: rgba(255,255,255,0.4); } /* Rep/Manager mode (admins) — single click-to-flip icon showing the CURRENT mode at rest; the two-button Rep|Manager pill when expanded. */ .lm-sidebar-mode { display: none; padding: 4px 14px 4px; } /* pill hidden at rest */ .lm-sidebar-mode .mode-toggle-pill { border-color: rgba(255,255,255,0.25); } .lm-sidebar-mode .mode-btn { color: rgba(255,255,255,0.72); } .lm-sidebar-mode .mode-btn.active { background: #F5A623; color: #003A99; } .lm-sidebar:hover .lm-sidebar-mode, .lm-sidebar:focus-within .lm-sidebar-mode { display: block; } .lm-sidebar-mode-icon { display: flex; /* single mode icon shown at rest */ align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; margin: 2px auto 0; padding: 0; background: transparent; color: rgba(255,255,255,0.72); border: none; cursor: pointer; font-size: 20px; } .lm-sidebar-mode-icon:hover { background: rgba(255,255,255,0.12); color: #FFFFFF; } .lm-sidebar:hover .lm-sidebar-mode-icon, .lm-sidebar:focus-within .lm-sidebar-mode-icon { display: none; } /* Content lane — width:100% so it fills the lane inside the flex-column .lm-main (margin:auto alone would shrink a flex item to its content width) */ .page-content { width: 100%; max-width: var(--lm-content-max); margin: 0 auto; padding: 0 var(--lm-gutter) 2rem; } } /* â”€â”€ Status badge colors by ROLE (3b) â€” single source of truth. Text shows the configured status NAME; the color comes from its role. â”€â”€ */ [class].status-role-won { background: #E7F4EC; color: #15803D; } [class].status-role-lost { background: #FBEAE8; color: #C5453B; } [class].status-role-uncounted { background: #EAF1FF; color: #2E5FD0; } [class].status-role-pending { background: #EAF1FF; color: #2E5FD0; } /* legacy */ [class].status-role-no_demo { background: #F1F2F6; color: #6B7280; } [class].status-role-dead { background: #F1F2F6; color: #6B7280; } /* ── Job progress bubble (top-bar, active recordings only) ── */ .job-bubble { position: relative; width: 36px; height: 36px; display: none; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; opacity: 1; transition: opacity 0.6s ease; } .job-bubble.fading { opacity: 0; } .job-bubble svg { position: absolute; top: 0; left: 0; pointer-events: none; } #jobBubblePct { position: relative; z-index: 1; color: #ffffff; font-size: 9px; font-weight: 700; line-height: 1; pointer-events: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -0.3px; } .job-bubble-complete #jobBubblePct { font-size: 0; } .job-bubble-complete #jobBubblePct::after { content: '✓'; display: block; font-size: 13px; line-height: 1; color: #F5A623; } @keyframes lm-job-bubble-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(245, 166, 35, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); } } .job-bubble-complete { animation: lm-job-bubble-pulse 0.7s ease-out; } /* ── Heat: rule-based, prospect-level WARMTH indicator (V1). Computed on read by FollowUp.heat_display, DECOUPLED from the close-rate calc. DISTINCT from Recording.buy_probability (the AI's per-call estimate). Bands: green >=50, yellow 25-49, red <25 (🔥 + %), gold=won (🔥 Sold), gray=dead (❄ Cold, no %). A lost-but-not-dead status like 'Demoed not sold' is NOT terminal — it runs the formula and reads as a warm follow-up target, never a flat 'Lost'. Brand palette via --lm-heat-* vars; reads at 480px and carries to desktop. ── */ :root { --lm-heat-red: #DE350B; --lm-heat-yellow: #FF8B00; --lm-heat-green: #00875A; --lm-heat-gold: #F5A623; --lm-heat-gray: #9CA3AF; } .heat-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; color: #6B7280; white-space: nowrap; flex-shrink: 0; } /* Softened temperature pills (display-only recolor; bands/computation unchanged): the warmth band class maps to a temperature tone — green=hottest, red=coldest. */ .heat-pill.heat-red { background: #ECF1F7; color: #5B6B82; } /* cold (<25) */ .heat-pill.heat-yellow { background: #FBF4E2; color: #B7791F; } /* warm (25-49) */ .heat-pill.heat-green { background: #FBEEE4; color: #C2630E; } /* hot (>=50) */ .heat-pill.heat-won { background: #E7F4EC; color: #15803D; } /* dead = terminal/cold lead: muted gray, snowflake, NO percentage. Replaces the old misleading gray 'Lost' badge (which fired on any calc=lost status). */ .heat-pill.heat-dead { background: #F1F2F6; color: #6B7280; font-weight: 600; } /* none = not enough data yet (no buy_probability, no lead score): muted gray, shows "Heat: —" instead of a number. Never prints None. */ .heat-pill.heat-none { background: #F1F2F6; color: #6B7280; font-weight: 600; } /* Heat % is the primary triage number; the freshness sub-line ("last contact N days ago") is its quiet secondary context. Mobile-first, muted, ~12px. */ .heat-wrap { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .heat-fresh { font-size: 12px; font-weight: 500; color: #6B778C; line-height: 1.3; white-space: nowrap; } /* ── First-run guided tour (Driver.js) — brand polish + mobile-first sizing. Driver.css supplies the spotlight/overlay; these tune the popover to the LeadMax look and keep it readable at 480px (caps width to the viewport). ── */ .lm-tour-pop.driver-popover { max-width: min(20rem, calc(100vw - 32px)); border-radius: 14px; padding: 16px 16px 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.22); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .lm-tour-pop .driver-popover-title { font-size: 16px; font-weight: 600; color: #111827; } .lm-tour-pop .driver-popover-description { font-size: 14px; line-height: 1.5; color: #374151; } .lm-tour-pop .driver-popover-footer { margin-top: 12px; gap: 8px; flex-wrap: wrap; row-gap: 8px; } .lm-tour-pop .driver-popover-next-btn, .lm-tour-pop .driver-popover-prev-btn { background: #2563EB; color: #FFFFFF; border: none; text-shadow: none; border-radius: 20px; padding: 9px 16px; font-size: 13px; font-weight: 600; min-height: 40px; cursor: pointer; } .lm-tour-pop .driver-popover-next-btn:hover { background: #1D4ED8; } /* Visible Skip on every step (injected by tour.js into the footer button row) */ .lm-tour-pop .lm-tour-skip { background: transparent; color: #6B7280; border: none; border-radius: 20px; padding: 9px 12px; font-size: 13px; font-weight: 500; min-height: 40px; cursor: pointer; margin-right: auto; } .lm-tour-pop .lm-tour-skip:hover { color: #111827; text-decoration: underline; } /* Back button (injected alongside Next) — secondary pill, aligned with Next, 480-safe */ .lm-tour-pop .lm-tour-back { background: #FFFFFF; color: #1D4ED8; border: 1.5px solid #C7D2FE; border-radius: 20px; padding: 9px 14px; font-size: 13px; font-weight: 600; min-height: 40px; cursor: pointer; } .lm-tour-pop .lm-tour-back:hover { background: #EEF2FF; } /* Step-counter removed from the tour entirely (showProgress:false) — hard-hide as a backstop */ .lm-tour-pop .driver-popover-progress-text { display: none !important; } /* During the toggle handoff, force the top-bar mode toggle visible at ALL widths (it's CSS-hidden on desktop), so the spotlight lands on a real, clickable target there too — the sidebar toggle is hover-gated and unreliable to anchor. */ body.lm-tour-handoff .top-bar .mode-toggle-pill { display: flex !important; } /* ── Welcome "▶ Start" primary button (replaces Next on the Welcome step until the audio-unlock gesture fires). On-brand navy → gold, 44px tap target. ── */ .lm-tour-pop .lm-tour-start { background: #003A99; color: #FFFFFF; border: none; text-shadow: none; border-radius: 22px; padding: 11px 20px; font-size: 14px; font-weight: 700; min-height: 44px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,58,153,0.28); } .lm-tour-pop .lm-tour-start:hover { background: #00337F; } .lm-tour-pop .lm-tour-start:disabled { opacity: 0.75; cursor: default; } /* ── Highlights groups (Training + Film Room) ─────────────────────────────── */ .hl-header { margin-bottom: 0.75rem; } .hl-title { font-size: 16px; font-weight: 500; color: #111827; } .hl-group { margin-bottom: 1.25rem; } .hl-group:last-child { margin-bottom: 0; } .hl-group-header { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6B7280; margin: 0 0 0.5rem 2px; } .hl-list { background: white; border-radius: 18px; border: 1px solid #ECE7F6; box-shadow: 0 1px 2px rgba(40,30,70,.05), 0 14px 32px -14px rgba(60,40,120,.2); overflow: hidden; } /* ── Highlights accordion: each group is ONE lifted card; title moves inside a tappable header; body collapsed by default. ── */ .hl-group.hl-acc { margin-bottom: 1rem; background: white; border-radius: 18px; border: 1px solid #ECE7F6; box-shadow: 0 1px 2px rgba(40,30,70,.05), 0 14px 32px -14px rgba(60,40,120,.2); overflow: hidden; } .hl-grp-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; background: transparent; border: none; cursor: pointer; font-family: inherit; text-align: left; -webkit-tap-highlight-color: transparent; } .hl-grp-head-left { flex: 1 1 auto; min-width: 0; } .hl-grp-title { font-size: 15px; font-weight: 600; color: #1A1C22; line-height: 1.2; } .hl-grp-count { font-size: 11px; color: #6B7280; margin-top: 2px; } .hl-grp-avg { flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; line-height: 1.3; white-space: nowrap; } .hl-grp-chevron { color: #9AA0AE; font-size: 12px; flex-shrink: 0; transition: transform 0.2s ease; } .hl-group.hl-acc.expanded .hl-grp-chevron { transform: rotate(180deg); } .hl-grp-body { display: none; } .hl-group.hl-acc.expanded .hl-grp-body { display: block; } /* Inside the accordion the row list is no longer its own card — it's the body. */ .hl-acc .hl-list { background: transparent; border: none; border-radius: 0; box-shadow: none; overflow: visible; border-top: 1px solid #F0ECF9; } .hl-row-wrap { border-bottom: 1px solid #F8FAFC; } .hl-row-wrap:last-child { border-bottom: none; } .hl-row { display: flex; align-items: center; gap: 8px; padding: 12px 14px; width: 100%; background: transparent; border: none; cursor: pointer; font-family: inherit; text-align: left; -webkit-tap-highlight-color: transparent; } .hl-row-left { flex: 0 0 auto; min-width: 0; width: 110px; } .hl-cat-label { font-size: 13px; font-weight: 500; color: #111827; line-height: 1.2; } .hl-weight { font-size: 10px; color: #6B7280; margin-top: 2px; } .hl-bar-wrap { flex: 1; } .hl-bar-track { background: #E5E7EB; border-radius: 4px; height: 7px; overflow: hidden; } .hl-bar-fill { height: 100%; border-radius: 4px; transition: width 0.35s ease; } .hl-row-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 44px; } .hl-score { font-size: 13px; font-weight: 500; line-height: 1; } .hl-rank-badge { font-size: 10px; font-weight: 500; color: white; padding: 2px 6px; border-radius: 20px; line-height: 1.3; } .hl-chevron { color: #6B7280; font-size: 11px; flex-shrink: 0; transition: transform 0.2s ease; } .hl-row-wrap.expanded .hl-chevron { transform: rotate(90deg); } .hl-expanded { display: none; padding: 0 14px 14px 14px; } .hl-row-wrap.expanded .hl-expanded { display: block; } .hl-team-avg { font-size: 12px; color: #6B7280; margin-bottom: 10px; } .hl-learn-header { font-size: 11px; font-weight: 500; color: #111827; margin-bottom: 8px; } .hl-rep-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #F8FAFC; } .hl-rep-row:last-child { border-bottom: none; } .hl-rep-rank { width: 24px; flex-shrink: 0; text-align: center; font-size: 13px; font-weight: 500; color: var(--accent); line-height: 1; } .hl-rep-avatar { width: 27px; height: 27px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: white; flex-shrink: 0; } .hl-rep-info { flex: 1; min-width: 0; } .hl-rep-name { font-size: 13px; font-weight: 500; color: #111827; } .hl-rep-cr { font-size: 11px; color: #6B7280; margin-top: 1px; } .hl-rep-score { font-size: 13px; font-weight: 500; flex-shrink: 0; } .hl-listen-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--accent); border: 1px solid var(--accent); border-radius: 20px; padding: 4px 10px; text-decoration: none; flex-shrink: 0; white-space: nowrap; } .hl-no-data { font-size: 12px; color: #6B7280; font-style: italic; } .hl-rep-selector-row { display: flex; align-items: center; gap: 8px; margin-bottom: 0.75rem; } .hl-rep-selector-label { font-size: 12px; font-weight: 500; color: #6B7280; white-space: nowrap; } .hl-rep-selector { flex: 1; font-size: 13px; font-weight: 500; color: #111827; background: white; border: 1px solid #E5E7EB; border-radius: 12px; padding: 8px 12px; font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B778C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } /* ── Clips modal (Training + Film Room) ─────────────────────────────────────── */ .clips-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: none; align-items: flex-end; justify-content: center; } .clips-overlay.open { display: flex; } .clips-modal { background: white; border-radius: 20px 20px 0 0; width: 100%; max-width: 480px; max-height: 80vh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.28s ease; } .clips-overlay.open .clips-modal { transform: translateY(0); } .clips-modal-header { display: flex; align-items: center; justify-content: space-between; background: #FFFFFF; padding: 16px 16px 14px; border-bottom: 1px solid #E5E7EB; border-radius: 20px 20px 0 0; flex-shrink: 0; } .clips-modal-title { font-size: 14px; font-weight: 500; color: #111827; flex: 1; line-height: 1.3; } .clips-modal-close { width: 27px; height: 27px; border-radius: 50%; background: #F3F4F6; border: none; color: #6B7280; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 10px; -webkit-tap-highlight-color: transparent; } .clips-modal-body { overflow-y: auto; padding: 14px; flex: 1; } .clip-card { background: #F8FAFC; border-radius: 12px; padding: 12px; margin-bottom: 10px; } .clip-card:last-child { margin-bottom: 0; } .clip-card-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } .clip-client { font-size: 14px; font-weight: 500; color: #111827; flex: 1; margin-right: 8px; } .clip-date { font-size: 11px; color: #6B7280; white-space: nowrap; } .clip-score-badge { font-size: 12px; font-weight: 500; color: white; padding: 3px 8px; border-radius: 20px; display: inline-block; margin-bottom: 6px; } .clip-notes { font-size: 13px; color: #6B7280; font-style: italic; line-height: 1.45; margin-bottom: 8px; } .clip-link { font-size: 12px; font-weight: 500; color: #2563EB; text-decoration: none; } .clips-empty { font-size: 13px; color: #6B7280; text-align: center; padding: 24px 0; } .clips-loading { font-size: 13px; color: #6B7280; text-align: center; padding: 24px 0; } /* ─── Terms of Service: click-wrap gate (/accept-terms) + public page (/terms). Mobile-first (480px). White branded header with logo, scrollable terms card, and a sticky action bar always visible at the bottom. Navy/gold brand. ── */ .tos-page { margin: 0; background: #F4F5F7; color: #172B4D; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .tos-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 480px; margin: 0 auto; background: #F4F5F7; } /* Header: white surface so the logo renders correctly */ .tos-head { flex: 0 0 auto; padding: 14px 20px; background: #FFFFFF; display: flex; align-items: center; gap: 14px; border-bottom: 3px solid #003A99; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .tos-head-logo { height: 30px; width: auto; display: block; flex: 0 0 auto; } .tos-head-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tos-head-title { font-size: 16px; font-weight: 700; color: #003A99; line-height: 1.2; } .tos-head-sub { font-size: 12px; color: #6B778C; line-height: 1.3; } .tos-back { font-size: 13px; font-weight: 600; color: #003A99; text-decoration: none; white-space: nowrap; } /* Scroll wrapper: takes remaining height between header and footer */ .tos-scroll-wrap { flex: 1 1 auto; overflow: hidden; padding: 12px 12px 0; display: flex; flex-direction: column; } /* Scrollable terms card */ .tos-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 20px 24px; border: 1.5px solid #EBECF0; border-radius: 12px; background: #FFFFFF; font-size: 16px; line-height: 1.6; box-shadow: inset 0 -12px 16px -8px rgba(0,0,0,0.06); } .tos-scroll:focus { outline: 2px solid #003A99; outline-offset: 2px; } /* Sticky acceptance footer — always visible, never scrolls away */ .tos-foot { flex: 0 0 auto; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); background: #FFFFFF; border-top: 2px solid #EBECF0; box-shadow: 0 -4px 20px rgba(0,0,0,0.10); } .tos-error { background: #FFEBE6; color: #BF2600; border-radius: 8px; padding: 10px 14px; font-size: 14px; font-weight: 500; margin-bottom: 14px; } .tos-check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.4; cursor: pointer; margin-bottom: 14px; color: #172B4D; font-weight: 500; } .tos-check input[type="checkbox"] { width: 24px; height: 24px; min-width: 24px; margin-top: 1px; accent-color: #003A99; cursor: pointer; } /* Primary agree button */ .tos-btn { display: block; width: 100%; min-height: 52px; border: none; border-radius: 26px; background: #003A99; color: #FFFFFF; font-size: 17px; font-weight: 700; font-family: inherit; cursor: pointer; letter-spacing: 0.01em; transition: background 0.15s, opacity 0.15s; } .tos-btn:disabled { background: #C1C7D0; color: #8993A4; cursor: not-allowed; } .tos-btn:not(:disabled):active { opacity: 0.88; } .tos-decline { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: #6B778C; text-decoration: none; } /* Desktop: widen the ToS column to a comfortable reading width */ @media (min-width: 1024px) { .tos-shell { max-width: 68rem; } .tos-doc { max-width: 68rem; } } /* Public /terms page: natural document scroll, no bounded box */ .tos-shell-public { height: auto; min-height: 100vh; background: #FFFFFF; } .tos-doc { padding: 20px 20px 56px; font-size: 16px; line-height: 1.6; max-width: 480px; margin: 0 auto; } /* Shared typography for the generated terms HTML (both contexts) */ .tos-scroll h1, .tos-doc h1 { font-size: 22px; font-weight: 700; color: #003A99; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #F5A623; } .tos-scroll h2, .tos-doc h2 { font-size: 17px; font-weight: 700; color: #003A99; margin: 28px 0 8px; } .tos-scroll h3, .tos-doc h3 { font-size: 15px; font-weight: 700; color: #172B4D; margin: 18px 0 6px; } .tos-scroll p, .tos-doc p { margin: 0 0 14px; } .tos-scroll ul, .tos-doc ul { margin: 0 0 14px; padding-left: 22px; } .tos-scroll li, .tos-doc li { margin-bottom: 7px; } .tos-scroll hr, .tos-doc hr { border: none; border-top: 1px solid #EBECF0; margin: 20px 0; } .tos-scroll a, .tos-doc a { color: #0052CC; word-break: break-word; } .tos-scroll strong, .tos-doc strong { font-weight: 700; color: #172B4D; } .tos-scroll blockquote, .tos-doc blockquote { margin: 14px 0; padding: 14px 16px; background: #F4F7FF; border-left: 3px solid #003A99; border-radius: 10px; font-size: 15px; color: #172B4D; line-height: 1.5; } /* Persistent app footer (authenticated pages) — Terms link for app-store / legal reachability. Sits at the end of content; body padding-bottom clears the nav. */ .lm-app-footer { text-align: center; padding: 20px 0 8px; } .lm-app-footer a { font-size: 12px; color: #6B778C; text-decoration: none; } .lm-app-footer a:hover { text-decoration: underline; } /* ─── Consent gate (Layer 3) start-recording modal ───────────────────────────── Blocks recording until the rep affirms all-party consent. Navy/gold, mobile-first, large tap targets. Shown/hidden by toggling [hidden] on .consent-overlay. ── */ .consent-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 12, 10, 0.45); display: flex; align-items: center; justify-content: center; padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); } .consent-overlay[hidden] { display: none; } .consent-modal { width: 100%; max-width: 420px; background: #FFFFFF; border-radius: 22px; box-shadow: 0 -10px 40px -12px rgba(40,20,14,0.3), 0 12px 40px rgba(40,20,14,0.18); overflow: hidden; } .consent-modal-head { padding: 22px 22px 0; } .consent-modal-title { font-size: 19px; font-weight: 700; color: #1A1C22; margin: 0 0 10px; display: flex; align-items: center; justify-content: center; gap: 8px; } .consent-modal-body { padding: 0 22px 4px; font-size: 15px; line-height: 1.5; color: #3A3E4A; } .consent-script { display: block; margin: 12px 0 4px; padding: 14px 16px; background: #FCF1EC; border: 1px solid #F4E2DA; border-radius: 14px; font-size: 14.5px; font-style: italic; color: #3A3E4A; line-height: 1.5; font-weight: 500; } .consent-actions { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 22px; } .consent-btn { display: block; width: 100%; min-height: 50px; border-radius: 12px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; padding: 0 18px; } .consent-btn-primary { background: var(--accent); color: #FFFFFF; } .consent-btn-primary:active { opacity: 0.88; } .consent-btn-secondary { background: #FFFFFF; color: #5B6071; border: 1px solid #E7DAD4; } .consent-btn-secondary:active { background: #FBF6F3; } /* ─── Disclosure obligation reminder (Layer 1) — manager admin area ───────────── Short persistent static notice. Gold-accented info card, matches brand. ── */ .disclosure-reminder { background: #FFF8EC; border: 1.5px solid #F5D08A; border-left: 4px solid #F5A623; border-radius: 12px; padding: 14px 16px; margin: 16px 0; } .disclosure-reminder-title { font-size: 14px; font-weight: 700; color: #8a5a00; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; } /* ─── Pre-signup shell — shared by login / demo / book_call / signup ─────────── Public, unauthenticated pages. One shell: page background, logo header, subtitle, card container, and desktop width. Keep these four in sync. ── */ .presignup-body { background: #FFFFFF; display: flex; align-items: center; justify-content: center; min-height: 100vh; } .presignup-wrapper { width: 100%; max-width: 640px; padding: 1.5rem; box-sizing: border-box; } .presignup-header { text-align: center; margin-bottom: 2rem; } .presignup-logo { height: 48px; width: auto; margin-bottom: 16px; display: block; } .presignup-tagline { font-size: 12px; color: #6B7280; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; } .presignup-card { background: #F8FAFC; border: 1px solid #E5E7EB; border-radius: 16px; padding: 2.25rem 2rem; } @media (max-width: 480px) { .presignup-card { padding: 2rem 1.5rem; } } .disclosure-reminder-text { font-size: 13px; line-height: 1.5; color: #6b4e1f; margin: 0; }