:root { --myers-gold: #F5B021; --myers-gold-dim: #c98f18; --ink: #17181c; --ink-soft: #23252b; --paper: #ffffff; --muted: #6b6b6b; --border: #e9e7e2; --bg: #faf9f7; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 9px; --shadow-soft: 0 1px 2px rgba(23,24,28,0.04), 0 8px 24px rgba(23,24,28,0.06); --shadow-lift: 0 4px 10px rgba(23,24,28,0.06), 0 16px 40px rgba(23,24,28,0.10); /* Refined type-scale tokens, per Josh, 2026-07-06 (approved mockup: "that looks incredible") -- tabular numbers, tracked-out uppercase micro-labels in a lighter warm muted than body --muted, and a mid-tone ink for de-emphasized rows (e.g. Rankings #2/#3) so hierarchy comes from color depth as well as weight. Rolled out to Rankings, the admin dashboard cards, and My Myers together so all three stay in lockstep -- see rankings/.card/.income-stat-row rules below. */ --muted-soft: #a19d92; --ink-mid: #3a3833; } /* A dark "shell" theme (near-black + gold diamond pattern + a literal checkered-flag strip) shipped and was reverted same day, per Josh, 2026-07-04: it read as cheap / "vibe coded," not the sophisticated brokerage-portal look this needs. Back to the plain light theme below -- no --shell-* vars, no pattern backgrounds. If a racing nod comes back later, it should be a restrained detail (e.g. a single thin gold line), not a background texture. */ * { box-sizing: border-box; } body { margin: 0; font-family: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); } .hidden { display: none !important; } .wordmark { font-weight: 800; letter-spacing: 0.04em; font-size: 28px; } .wordmark span { color: var(--myers-gold); } .wordmark.small { font-size: 17px; } /* Myers Cloud logo: hexagon icon (myers-cloud-icon.png) paired with live "Myers/Cloud" text in Poppins (loaded via Google Fonts in index.html , falls back to Avenir Next/system sans if that request is ever blocked). Switched from a single flattened PNG to live text per Josh, 2026-07-04, specifically so "Cloud" can be bolded independently of "Myers" -- see .brand-logo-text b below. */ .brand-logo-lockup { display: inline-flex; align-items: center; gap: 8px; } .brand-logo-icon { height: 44px; width: auto; display: block; } .brand-logo-text { font-family: "Poppins", "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 32px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); } .brand-logo-text b { font-weight: 700; } /* 1.75x per Josh, 2026-07-04 (34px/24px -> 59.5px/42px) -- topbar logo needed more presence */ .brand-logo-lockup.small .brand-logo-icon { height: 59.5px; } .brand-logo-lockup.small .brand-logo-text { font-size: 42px; } /* Login screen -- clean and centered, on the same paper background as the rest of the app. No gradients or dark mode theatrics; this should feel like a brokerage portal, not an AI demo. */ #login-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--bg); } .login-card { background: var(--paper); padding: 48px 44px; border-radius: var(--radius-lg); width: 100%; max-width: 380px; text-align: center; box-shadow: var(--shadow-lift); border: 1px solid var(--border); } .tagline { color: var(--muted); font-size: 14.5px; margin: 10px 0 26px; font-weight: 500; } .google-signin-section { display: flex; flex-direction: column; align-items: center; margin-bottom: 22px; } .google-signin-section > div:first-child { display: flex; justify-content: center; width: 100%; } .login-divider { display: flex; align-items: center; width: 100%; margin: 20px 0 4px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .login-divider span { padding: 0 12px; } #login-form label { display: block; text-align: left; font-size: 13px; color: var(--muted); margin-bottom: 6px; } #login-form input { width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 15px; margin-bottom: 16px; transition: border-color 0.15s ease; } #login-form input:focus { outline: none; border-color: var(--myers-gold); } #login-form button { width: 100%; padding: 13px; border: none; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--myers-gold), var(--myers-gold-dim)); color: var(--ink); font-weight: 800; font-size: 15px; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.15s ease; box-shadow: 0 8px 20px rgba(245,176,33,0.35); } #login-form button:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(245,176,33,0.45); } #login-form button:active { transform: translateY(0); } .error { color: #e0574a; font-size: 13px; margin-top: 12px; } .login-powered-by { color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; } /* App shell */ #app-screen { min-height: 100vh; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 24px 16px; background: rgba(250,249,247,0.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .topbar .wordmark { font-size: 22px; } .tabs { display: flex; gap: 2px; background: #f0eee9; padding: 4px; border-radius: 999px; width: fit-content; margin: 0 auto; } .tab-btn { border: none; background: transparent; padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .tab-btn:hover:not(.active) { color: var(--ink); } .tab-btn.active { background: var(--myers-gold); color: var(--ink); box-shadow: var(--shadow-soft); } .topbar-actions { position: absolute; top: 20px; right: 24px; display: flex; align-items: center; gap: 8px; } /* Myers U / Incognito / Log out / My Myers share one sizing recipe (height + inline-flex centering) so all four render as identically-sized pills regardless of content -- emoji glyphs (Myers U, Incognito) have taller line-box metrics than plain text at the same font-size, which without a fixed height made those two a hair taller. Per Josh, 2026-07-04: "button sizes are even for myers u, logout, incognito". */ .logout-btn, .myers-u-link, .incognito-toggle, .my-myers-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 34px; border: 1px solid var(--border); background: var(--paper); padding: 0 15px; border-radius: 999px; font-size: 12.5px; line-height: 1; cursor: pointer; color: var(--muted); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .logout-btn:hover, .myers-u-link:hover, .incognito-toggle:hover, .my-myers-btn:hover { border-color: var(--myers-gold-dim); color: var(--ink); } .myers-u-link, .incognito-toggle, .my-myers-btn { font-weight: 600; } .incognito-toggle.active { background: var(--ink); border-color: var(--ink); color: #fff; } /* Incognito floats directly under the My Myers button (right edge aligned with the action cluster), below the top-right row. Mike tab only -- app.js removes .hidden there. Per Josh, 2026-07-05. The action row sits at top:20px, pills are 34px tall, so 62px clears it. */ .incognito-toggle { position: absolute; top: 62px; right: 24px; } /* One-time (per browser) disclaimer that agent activity is visible to admins. */ .usage-disclaimer { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 10px 24px; background: #fbf3df; border-bottom: 1px solid var(--border); font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); text-align: center; } .usage-disclaimer button { border: 1px solid var(--ink); background: var(--ink); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; } main { flex: 1; padding: 32px 24px; max-width: 900px; margin: 0 auto; width: 100%; } .tab-panel { display: none; } .tab-panel.active { display: block; animation: fade-in 0.18s ease; } @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Footer -- the real, unaltered Myers Home Buyers logo lives here per brand rules */ .app-footer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 24px 26px; border-top: 1px solid var(--border); } .app-footer-brand { display: flex; align-items: center; gap: 10px; } .footer-logo { height: 26px; width: auto; } .footer-fallback { display: none; font-weight: 800; letter-spacing: 0.06em; font-size: 13px; color: var(--ink); } .footer-tagline { font-size: 12px; color: var(--muted); } .footer-tagline::before { content: "\2014"; margin-right: 10px; color: var(--border); } .app-footer-links { display: flex; align-items: center; gap: 16px; } .app-footer-links a { font-size: 12px; color: var(--muted); text-decoration: none; } .app-footer-links a:hover { color: var(--myers-gold-dim); text-decoration: underline; } /* Admin dashboard -- styled as an actual pill button (not a plain text link like its siblings above) so it reads as a distinct, deliberate action. Per Josh, 2026-07-04. */ .admin-panel-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted) !important; text-decoration: none !important; } .admin-panel-btn:hover { border-color: var(--myers-gold-dim); color: var(--ink) !important; } /* Add to Home Screen -- mobile-only prompt in the footer (shown/hidden by app.js). Gold outline pill matching .parcel-lookup-btn's treatment; the iOS instruction line is quiet muted text. Per Josh, 2026-07-05. */ .a2hs { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; } .a2hs-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 1.5px solid var(--myers-gold); border-radius: 999px; background: transparent; color: var(--ink); font-family: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: background 0.15s ease; } .a2hs-btn:hover { background: #fdf6e6; } .a2hs-ios { max-width: 340px; margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); text-align: center; } /* Chat */ .chat-log { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; min-height: 400px; max-height: 60vh; overflow-y: auto; margin-bottom: 16px; box-shadow: var(--shadow-soft); } .msg { padding: 11px 15px; border-radius: var(--radius-sm); margin-bottom: 12px; max-width: 80%; line-height: 1.5; font-size: 14.5px; white-space: pre-wrap; } .msg.assistant { background: #f3efe6; } .msg.user { background: var(--myers-gold); margin-left: auto; } .msg-files { margin-top: 6px; font-size: 12.5px; opacity: 0.75; } .msg-sources { margin-top: 8px; font-size: 12px; opacity: 0.8; } .msg-sources a { color: var(--ink); text-decoration: underline; } .msg-sources a:hover { color: var(--myers-gold-dim); } .attachments-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .file-chip { display: flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--border); border-radius: 999px; padding: 6px 8px 6px 12px; font-size: 13px; } .file-chip-remove { border: none; background: var(--border); color: var(--ink); width: 20px; height: 20px; border-radius: 50%; line-height: 1; cursor: pointer; font-size: 14px; } .file-chip-remove:hover { background: #d8d8d8; } .chat-form { display: flex; gap: 10px; align-items: center; } /* Chat composer -- input, attach, and Send share one 48px control height so the row reads as a single unit. Previously Send/attach were shorter than the text field (awkward mismatch), per Josh 2026-07-05. */ .chat-form input[type="text"] { flex: 1; height: 48px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 15px; transition: border-color 0.15s ease; } .chat-form input[type="text"]:focus { outline: none; border-color: var(--myers-gold); } .attach-btn { flex: none; width: 48px; height: 48px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper); font-size: 18px; cursor: pointer; } .attach-btn:hover { background: #f3efe6; } .chat-form button[type="submit"] { height: 48px; padding: 0 24px; border: none; border-radius: var(--radius-sm); background: var(--ink); color: var(--paper); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: opacity 0.15s ease; } .chat-form button[type="submit"]:hover { opacity: 0.85; } /* Deal Evaluator CSS removed per Josh, 2026-07-06 (feature pulled from the UI, see app.js) */ .disclaimer { color: var(--muted); font-size: 12px; margin-top: 16px; } h2 { font-size: 16px; margin: 0 0 16px; text-transform: none; } /* Rankings -- refined type scale per Josh, 2026-07-06 (approved mockup). Header splits into a title/period-label row (baseline-aligned, period tracked-out uppercase) plus a muted "Updated ..." line, replacing the old single combined sentence -- see #rankings-period-label / #rankings-updated in index.html and loadRankings() in app.js. */ .rankings-wrap { max-width: 640px; margin: 0 auto; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: var(--shadow-soft); } .rankings-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 2px; } .rankings-head h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .rankings-period-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-soft); white-space: nowrap; } .rankings-updated { font-size: 12.5px; color: var(--muted-soft); margin: 2px 0 20px; } .rankings-table { width: 100%; border-collapse: collapse; } .rankings-table th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-soft); border-bottom: none; padding: 0 6px 8px; } .rankings-table th:last-child, .rankings-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; } .rankings-table td { padding: 11px 6px; border-top: 1px solid var(--border); border-bottom: none; color: var(--ink-mid); } .rankings-table tr:first-child td { font-weight: 600; color: var(--ink); } .rankings-table tr:first-child td:first-child { color: var(--myers-gold-dim); font-weight: 700; } .rankings-table td:first-child { color: var(--muted-soft); font-weight: 500; } /* Top 5 Pending (open pipeline, not yet Closed Won) */ .pending-rankings { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); } .pending-rankings h2 { margin-bottom: 4px; } .pending-rankings .disclaimer { margin-top: 0; margin-bottom: 16px; } .pending-rankings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .pending-rankings-col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 8px; } .pending-list { list-style: none; margin: 0; padding: 0; } .pending-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .pending-list li:last-child { border-bottom: none; } .pending-rank { color: var(--myers-gold); font-weight: 700; width: 16px; flex-shrink: 0; } .pending-name { flex: 1; } .pending-count { color: var(--muted); font-size: 12.5px; } /* My Income CSS removed per Josh, 2026-07-06 (feature pulled from the UI, see app.js) */ /* Contract Drafter -- one dynamic form, sectioned, fields show/hide by deal side */ .contract-form { max-width: 640px; margin: 0 auto; } .form-section { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 26px; margin-bottom: 16px; box-shadow: var(--shadow-soft); } .form-section h2 { font-size: 15px; margin: 0 0 16px; } .form-section label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 14px; } .form-section label:last-child { margin-bottom: 0; } .form-section input[type="text"], .form-section input[type="number"], .form-section input[type="email"], .form-section input[type="tel"], .form-section input[type="date"], .form-section select, .form-section textarea { width: 100%; padding: 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 15px; margin-top: 6px; font-family: inherit; background: var(--paper); } .form-section input:disabled { background: #f3f1ec; color: var(--muted); } .form-section input:focus, .form-section select:focus, .form-section textarea:focus { outline: none; border-color: var(--myers-gold); } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .form-row-5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 640px) { .form-row-5 { grid-template-columns: repeat(2, 1fr); } } .radio-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; } .radio-row-compact { margin-bottom: 12px; } .radio-card { flex: 1; min-width: 200px; border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color 0.15s ease, background 0.15s ease; } .radio-card input { position: absolute; opacity: 0; pointer-events: none; } .radio-card:has(input:checked) { border-color: var(--myers-gold); background: #fdf6e6; } .radio-card-title { font-weight: 700; font-size: 14.5px; color: var(--ink); } .radio-card-sub { font-size: 12.5px; color: var(--muted); } .radio-pill { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; font-size: 13px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .radio-pill:has(input:checked) { border-color: var(--myers-gold); background: #fdf6e6; font-weight: 600; } .radio-pill input { margin: 0; accent-color: var(--myers-gold-dim); } .inline-days { max-width: 160px; } .address-lookup-row { display: flex; gap: 10px; align-items: flex-start; } /* Input + "Look up" share a 44px height so the button doesn't sit shorter than the field it's attached to, per Josh 2026-07-05. */ .address-lookup-row input { flex: 1; margin-top: 6px; height: 44px; } .address-lookup-row-suggest { position: relative; } .address-suggestions { position: absolute; top: 100%; left: 0; right: 130px; /* clears the Look up button so the dropdown doesn't sit under it */ margin: 2px 0 0; padding: 4px 0; list-style: none; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); z-index: 20; max-height: 220px; overflow-y: auto; } .address-suggestions li { padding: 9px 14px; font-size: 13.5px; cursor: pointer; } .address-suggestions li:hover, .address-suggestions li.highlighted { background: #fdf6e6; } @media (max-width: 640px) { .address-suggestions { right: 0; } } .parcel-lookup-btn { margin-top: 6px; height: 44px; padding: 0 18px; border: 1.5px solid var(--myers-gold); border-radius: var(--radius-sm); background: transparent; color: var(--ink); font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; transition: background 0.15s ease; } .parcel-lookup-btn:hover { background: #fdf6e6; } .parcel-lookup-btn:disabled { opacity: 0.6; cursor: not-allowed; } .parcel-lookup-status { font-size: 12.5px; margin-top: 6px; } .parcel-lookup-status.ok { color: #2f8f4e; } .parcel-lookup-status.warn { color: #b8860b; } .parcel-lookup-status.error { color: #e0574a; } .hoa-details { margin: 4px 0 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fdfbf6; } .hoa-details .disclaimer { margin-top: 0; margin-bottom: 12px; } .lead-paint-unsure-label { display: flex !important; align-items: center; gap: 8px; align-self: end; margin-bottom: 14px !important; } .lead-paint-unsure-label input[type="checkbox"] { margin: 0; width: 16px; height: 16px; accent-color: var(--myers-gold-dim); } .contract-submit-btn { display: block; width: 100%; padding: 15px; border: none; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--myers-gold), var(--myers-gold-dim)); color: var(--ink); font-weight: 800; font-size: 15.5px; cursor: pointer; box-shadow: 0 8px 20px rgba(245,176,33,0.32); transition: transform 0.1s ease; } .contract-submit-btn:hover { transform: translateY(-1px); } .contract-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Offer Engine wizard -- one question group visible at a time (see WIZARD_STEPS in app.js). .wizard-step reuses .form-section for its card look; only display is different. */ .wizard-step { display: none; } .wizard-step.active { display: block; animation: fade-in 0.18s ease; } .wizard-progress { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 12px; font-weight: 700; } .wizard-nav { display: flex; gap: 10px; } .wizard-nav .contract-submit-btn { flex: 1; margin: 0; } .wizard-back-btn { flex: none; padding: 0 22px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer; transition: border-color 0.15s ease; } .wizard-back-btn:hover { border-color: var(--myers-gold-dim); } .link-btn { border: none; background: none; color: var(--myers-gold-dim); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 0; text-decoration: underline; } .parcel-summary-text { margin: 0 0 8px; font-size: 13.5px; color: var(--ink); font-weight: 600; } .quiz-restart-btn { margin-top: 18px; padding: 13px 32px; border: none; border-radius: 999px; background: linear-gradient(135deg, var(--myers-gold), var(--myers-gold-dim)); color: var(--ink); font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 0 8px 20px rgba(245,176,33,0.32); transition: transform 0.1s ease; } .quiz-restart-btn:hover { transform: translateY(-1px); } .quiz-done { max-width: 520px; margin: 30px auto; text-align: center; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 32px; box-shadow: var(--shadow-soft); } .quiz-done-check { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: #e3f3e6; color: #1e6b32; font-size: 28px; display: flex; align-items: center; justify-content: center; font-weight: 800; } .quiz-downloads { display: flex; flex-direction: column; gap: 10px; align-items: center; margin: 20px 0 10px; } /* Contract drafter download button */ .download-btn { display: block; width: fit-content; margin-top: 8px; padding: 8px 14px; background: var(--myers-gold); color: var(--ink); font-weight: 700; font-size: 13px; border-radius: 6px; text-decoration: none; } /* HUD Checker */ .hud-dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--paper); border: 2px dashed var(--border); border-radius: 12px; padding: 32px 20px; text-align: center; cursor: pointer; margin-bottom: 8px; transition: border-color 0.15s, background 0.15s; } .hud-dropzone:hover, .hud-dropzone:focus-visible { border-color: var(--myers-gold); background: #fbf7ee; outline: none; } .hud-dropzone.dragover { border-color: var(--myers-gold); background: #f7efdc; } .hud-dropzone.has-files { border-style: solid; border-color: var(--myers-gold); } .hud-dropzone-title { font-weight: 700; font-size: 15px; } .hud-dropzone-sub { font-size: 13px; color: var(--muted); max-width: 460px; } .hud-file-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .hud-file-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fbf7ee; border: 1px solid var(--myers-gold); border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--ink); } .hud-file-remove { border: none; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; } .hud-file-remove:hover { color: var(--ink); } .hud-compare-btn { display: block; width: 100%; margin: 8px 0 20px; padding: 14px; border: none; border-radius: 10px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 15px; cursor: pointer; } .hud-compare-btn:disabled { opacity: 0.5; cursor: not-allowed; } .hud-findings-table { width: 100%; border-collapse: collapse; margin: 10px 0 6px; font-size: 13.5px; } .hud-findings-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 2px solid var(--border); padding: 6px; } .hud-findings-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: top; } .hud-flag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; white-space: nowrap; } .hud-flag-error { background: #fbe2e0; color: #a1281c; } .hud-flag-warning { background: #fdf1d6; color: #8a6116; } .hud-flag-info { background: #e6eefc; color: #1f4e96; } .hud-flag-ok { background: #e3f3e6; color: #1e6b32; } .hud-summary-line { font-size: 13px; color: var(--muted); margin: 0 0 4px; } /* Feedback flag -- fixed to the viewport (not the topbar) so it's visible on every module regardless of scroll position, per Josh, 2026-07-04. Faint by design: 0.35 opacity at rest, full color + a slight lift on hover, so it reads as a quiet utility rather than competing with the real tools for attention. Emoji glyph matches the existing icon convention already used in the topbar (Myers U, Incognito, attach), not a one-off SVG. */ .feedback-flag-btn { position: fixed; top: 96px; right: 28px; z-index: 20; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: none; font-size: 18px; line-height: 1; opacity: 0.35; cursor: pointer; transition: opacity 0.15s ease, transform 0.15s ease; } .feedback-flag-btn:hover { opacity: 0.9; transform: translateY(-1px); } .feedback-modal-overlay { position: fixed; inset: 0; z-index: 30; background: rgba(23,24,28,0.32); display: flex; align-items: center; justify-content: center; padding: 24px; } .feedback-modal { width: 100%; max-width: 440px; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: 24px; } .feedback-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .feedback-modal-head h2 { margin: 0; font-size: 18px; } .feedback-modal-close { border: none; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 0 0 12px; } .feedback-modal-close:hover { color: var(--ink); } .feedback-modal textarea { width: 100%; margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; resize: vertical; } .feedback-modal textarea:focus { outline: none; border-color: var(--myers-gold); } .feedback-modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 14px; } .feedback-modal-submit { padding: 10px 20px; border: none; border-radius: var(--radius-sm); background: var(--myers-gold); color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer; } .feedback-modal-submit:disabled { opacity: 0.5; cursor: not-allowed; } .feedback-modal-submit.sent { background: #e3f3e6; color: #1e6b32; } /* Next Week -- same card shell as .rankings-wrap (reuses .rankings-head/-period-label directly, see index.html) so the two "quiet list" tabs feel like one design language. Per Josh, 2026-07-04: simple, not overbearing -- no per-row icons, just a plain text "Add to your calendar" link built client-side (see app.js) from a Google Calendar template URL. */ .upcoming-wrap { max-width: 640px; margin: 0 auto; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: var(--shadow-soft); } .upcoming-list { margin-top: 18px; } .upcoming-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); } .upcoming-row:last-child { border-bottom: none; } .upcoming-when { flex-shrink: 0; width: 96px; font-size: 12.5px; font-weight: 600; color: var(--muted-soft); font-variant-numeric: tabular-nums; } .upcoming-main { flex: 1; min-width: 0; } .upcoming-title { font-size: 14.5px; font-weight: 600; color: var(--ink); } .upcoming-location { font-size: 12.5px; color: var(--muted); margin-top: 1px; } /* Join webcast -- shown under the event title/location when the event has a Google Meet link (per Josh, 2026-07-05). Inline-flex pill so it sits under the meeting, not in the right-hand "Add to calendar" column. */ .upcoming-join { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 10px; border: 1px solid var(--myers-gold-dim); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none; } .upcoming-join:hover { background: var(--myers-gold); border-color: var(--myers-gold); } .upcoming-add { flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--myers-gold-dim); text-decoration: none; white-space: nowrap; } .upcoming-add:hover { text-decoration: underline; } .upcoming-empty { font-size: 13.5px; color: var(--muted); padding: 12px 0; } /* Paycheck calculator -- agent payout / revenue-share illustration. Reuses .form-section cards, .radio-pill toggles, and .rankings-table so it reads as the same design language as Offer Engine / Rankings. Light theme throughout -- gold is a precision accent only (the "you" figures, the split bar's "you" segment), never a fill or texture. Deliberately NOT the dark statement-panel look of the mock: the dark shell was reverted 2026-07-04 as reading "cheap / vibe coded," so the payout summary is a light card like everything else. */ .paycheck-wrap { max-width: 860px; margin: 0 auto; } /* align-items: stretch (not start) so the two cards match height on the 2-col layout -- per Josh, the uneven boxes were driving him nuts. Single-column (mobile) is unaffected. */ .paycheck-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; } @media (min-width: 780px) { .paycheck-grid { grid-template-columns: 1fr 1fr; } } .paycheck-wrap .form-section h2 { font-size: 16px; } .pc-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--myers-gold-dim); margin: 0 0 4px; } .pc-intro { font-size: 13px; color: var(--muted); margin: -4px 0 16px; line-height: 1.5; } .pc-full { grid-column: 1 / -1; } /* Money input -- oversized so the spread reads as the headline of section 1 */ .pc-money { position: relative; margin: 6px 0 16px; } .pc-money .pc-cur { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-weight: 800; font-size: 19px; color: var(--muted); } .pc-money input { width: 100%; font-family: inherit; font-weight: 800; font-size: 23px; letter-spacing: -0.01em; padding: 12px 14px 12px 30px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-variant-numeric: tabular-nums; } .pc-money input:focus { outline: none; border-color: var(--myers-gold); } /* Negotiated-split slider (advanced) */ .pc-adv { margin-top: 6px; border-top: 1px dashed var(--border); padding-top: 12px; } .pc-adv summary { cursor: pointer; font-weight: 700; font-size: 12.5px; color: var(--muted); list-style: none; } .pc-adv summary::-webkit-details-marker { display: none; } .pc-adv summary::before { content: "+ "; color: var(--myers-gold-dim); font-weight: 800; } .pc-adv[open] summary::before { content: "\2212 "; } .pc-slider-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .pc-slider-row input[type="range"] { flex: 1; accent-color: var(--myers-gold-dim); cursor: pointer; } .pc-slider-row output { font-weight: 800; font-size: 13px; min-width: 128px; text-align: right; font-variant-numeric: tabular-nums; } /* Payout statement (light card) */ .pc-statement-label { font-size: 12px; font-weight: 700; color: var(--muted); margin: 0; } .pc-bignum { font-weight: 800; font-size: clamp(32px, 6vw, 44px); letter-spacing: -0.02em; color: var(--myers-gold-dim); line-height: 1.05; margin: 2px 0; font-variant-numeric: tabular-nums; } .pc-role-line { font-size: 13px; color: var(--muted); margin: 0 0 16px; } .pc-role-line b { color: var(--ink); } .pc-bar { display: flex; width: 100%; height: 28px; border-radius: 8px; overflow: hidden; margin: 4px 0 14px; background: #f0eee9; } .pc-bar span { height: 100%; min-width: 0; transition: width 0.35s cubic-bezier(.22,1,.36,1); } .pc-bar span + span { border-left: 2px solid var(--paper); } .pc-s-you { background: var(--myers-gold); } .pc-s-a { background: #d9c48a; } .pc-s-b { background: #b9c6dd; } .pc-s-c { background: #d7d4cc; } .pc-rows { border-top: 1px solid var(--border); } .pc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .pc-row .pc-name { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 13px; color: var(--ink-mid); } .pc-row .pc-name .pc-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; } .pc-row .pc-name em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 11.5px; } .pc-row .pc-pct { font-weight: 700; font-size: 11.5px; color: var(--muted); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; } .pc-row .pc-val { font-weight: 700; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 74px; text-align: right; } .pc-row.you .pc-name { color: var(--ink); font-weight: 700; } .pc-row.you .pc-val { color: var(--myers-gold-dim); } .pc-net { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 2px solid var(--myers-gold); } .pc-net .pc-net-lab { font-weight: 700; font-size: 12.5px; color: var(--ink-mid); } .pc-net .pc-net-lab b { display: block; color: var(--muted); font-size: 11.5px; font-weight: 500; margin-top: 2px; } .pc-net .pc-net-amt { font-weight: 800; font-size: clamp(22px, 4vw, 28px); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; } /* Rev-share level table */ .pc-rev-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 4px; } @media (max-width: 520px) { .pc-rev-controls { grid-template-columns: 1fr; } } .pc-levels { margin: 14px 0 4px; } .pc-levels td { vertical-align: middle; } .pc-levels th:nth-child(2), .pc-levels td:nth-child(2), .pc-levels th:nth-child(3), .pc-levels td:nth-child(3) { text-align: center; } .pc-levels th:last-child, .pc-levels td:last-child { text-align: right; } .pc-levels input[type="number"] { width: 72px; padding: 7px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; text-align: center; font-variant-numeric: tabular-nums; background: var(--paper); } .pc-levels input[type="number"]:focus { outline: none; border-color: var(--myers-gold); } .pc-level-name { font-weight: 700; color: var(--ink); } .pc-level-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; } .pc-level-eff { color: var(--myers-gold-dim); font-weight: 700; font-variant-numeric: tabular-nums; } .pc-level-earn { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); } .pc-row-locked { opacity: 0.5; } .pc-row-locked .pc-level-earn { color: var(--muted); } .pc-lock-note { font-size: 11px; color: var(--myers-gold-dim); font-weight: 700; } .pc-rev-total { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding: 16px 18px; background: #fdf6e6; border: 1px solid #f3e6c2; border-radius: var(--radius-md); } .pc-rev-total .pc-rt-lab { font-weight: 700; font-size: 12.5px; color: var(--ink-mid); } .pc-rev-total .pc-rt-amt { font-weight: 800; font-size: clamp(24px, 5vw, 30px); color: var(--myers-gold-dim); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .pc-rev-total .pc-rt-yr { font-weight: 600; font-size: 12px; color: var(--muted); width: 100%; text-align: right; font-variant-numeric: tabular-nums; } .pc-rev-total .pc-rt-yr b { color: var(--ink); } .pc-note { font-size: 12px; color: var(--muted); margin-top: 14px; padding-left: 12px; border-left: 3px solid var(--myers-gold); line-height: 1.5; } /* ===================================================================== Mobile (<= 720px). Two things genuinely break on a phone and get fixed here: (1) the 6-tab pill row overflows the viewport -- made horizontally scrollable, keeping the pill look; (2) .topbar-actions is absolutely positioned for desktop and collides with the centered logo -- on mobile it drops into normal flow below the tabs and wraps/centers. Everything else just gets tightened padding and full-width so nothing overflows. ===================================================================== */ @media (max-width: 720px) { main { padding: 20px 14px; } .topbar { padding: 16px 14px 12px; gap: 12px; } .brand-logo-lockup.small .brand-logo-icon { height: 46px; } .brand-logo-lockup.small .brand-logo-text { font-size: 32px; } /* Tabs: scroll sideways instead of overflowing off-screen */ .tabs { width: 100%; max-width: 100%; margin: 0; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab-btn { flex: 0 0 auto; } /* Action pills: out of absolute positioning, into the flow, centered + wrapping */ .topbar-actions { position: static; top: auto; right: auto; flex-wrap: wrap; justify-content: center; width: 100%; } /* On mobile the action pills are in normal flow -- drop Incognito back into flow too (centered under the cluster) instead of floating it absolutely. */ .incognito-toggle { position: static; top: auto; right: auto; } /* Feedback flag: move clear of the taller stacked topbar */ .feedback-flag-btn { top: auto; bottom: 18px; right: 16px; } /* Cards: tighter gutters so content isn't cramped against the edges */ .form-section, .rankings-wrap, .upcoming-wrap { padding: 20px 16px; } .rankings-wrap, .upcoming-wrap { border-radius: var(--radius-md); } /* Usage disclaimer: stack text above the button */ .usage-disclaimer { flex-direction: column; gap: 10px; padding: 12px 16px; } /* Chat bubbles can run a touch wider on a narrow screen */ .msg { max-width: 90%; } } /* Extra-narrow phones (<= 380px): keep the Paycheck level table from overflowing */ @media (max-width: 380px) { .pc-levels th, .pc-levels td { padding: 8px 3px; font-size: 12px; } .pc-levels input[type="number"] { width: 56px; } .rankings-table th, .rankings-table td { padding-left: 3px; padding-right: 3px; } } /* --- My Stats (per-agent production) --- 2026-07-05. Card grid follows the same paper/ border/radius language as .rankings-wrap; gold is used only as a thin precision accent on the hero value + role percentages, per the standing visual-design rule (no textures, restraint over motif). */ .mystats-wrap { max-width: 720px; margin: 0 auto; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: var(--shadow-soft); } .mystats-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 2px; } .mystats-head h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .mystats-empty { padding: 28px 4px; color: var(--muted); font-size: 14.5px; line-height: 1.55; } .mystats-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; } .mystats-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; background: var(--bg); } .mystats-card-hero { grid-column: 1 / -1; border-left: 3px solid var(--myers-gold); } .mystats-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-soft); } .mystats-hero-value { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; color: var(--myers-gold-dim); line-height: 1.05; } .mystats-value { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1.1; } .mystats-sub { font-size: 12.5px; color: var(--muted); } .mystats-roles { margin-top: 24px; } .mystats-roles h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ink-mid); } .mystats-role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .mystats-role { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; } .mystats-role-name { font-size: 12.5px; font-weight: 600; color: var(--ink); } .mystats-role-pct { color: var(--myers-gold-dim); font-weight: 700; } .mystats-role-value { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; } @media (max-width: 560px) { .mystats-cards, .mystats-role-grid { grid-template-columns: 1fr; } .mystats-hero-value { font-size: 34px; } } /* Separate-book note (JT's wholesale-book view) -- muted caption under the header. */ .mystats-note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }