/* ========================================================================== No Site Yet — stylesheet Themes: light by default, dark via prefers-color-scheme, and both overridable by a [data-theme] attribute the toggle button sets on . Every colour is a token on :root — restyle the app by editing the tokens in the three blocks below and nothing else. ========================================================================== */ :root{ /* surfaces + text */ --bg:#f4f2ee; --surface:#ffffff; --surface-2:#ebe8e1; --border:#dcd7cc; --ink:#20211f; --ink-dim:#6b6a62; --ink-faint:#9a988e; /* brand accent (primary buttons) */ --accent:#d9531f; --accent-ink:#fff8f3; --accent-soft:#fbe4d6; /* focus ring + links */ --focus:#1c6e6e; /* pipeline stages — semantic, deliberately separate from the accent */ --stage-new:#54648c; --stage-new-soft:#e4e8f1; --stage-contacted:#7c5cb8; --stage-contacted-soft:#ece5f6; --stage-interested:#b8811a; --stage-interested-soft:#f6ecd6; --stage-building:#1c8484; --stage-building-soft:#dcf0ee; --stage-won:#2f8f52; --stage-won-soft:#e0f1e4; --stage-lost:#af463c; --stage-lost-soft:#f5e2df; --shadow:0 8px 24px rgba(30,26,20,0.10); --shadow-sm:0 2px 6px rgba(30,26,20,0.08); --font-head:'Archivo',system-ui,sans-serif; --font-body:'IBM Plex Sans',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace; color-scheme: light; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } /* Dark, when the OS asks for it and the user hasn't explicitly chosen light. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#181916; --surface:#211f1c; --surface-2:#2a2824; --border:#3a372f; --ink:#f1efe9; --ink-dim:#a8a498; --ink-faint:#77746a; --accent:#ef6b3a; --accent-ink:#1a0e07; --accent-soft:#3a2318; --focus:#4fb8b8; --stage-new:#8b9bcf; --stage-new-soft:#2a2f45; --stage-contacted:#b298e0; --stage-contacted-soft:#332a45; --stage-interested:#e0b256; --stage-interested-soft:#3a331e; --stage-building:#4fcfcf; --stage-building-soft:#1e3838; --stage-won:#6bcf8e; --stage-won-soft:#1e3527; --stage-lost:#e08278; --stage-lost-soft:#3a2420; --shadow:0 8px 28px rgba(0,0,0,0.45); --shadow-sm:0 2px 8px rgba(0,0,0,0.35); color-scheme: dark; } } /* Dark, chosen explicitly with the toggle — wins over a light OS setting. */ :root[data-theme="dark"]{ --bg:#181916; --surface:#211f1c; --surface-2:#2a2824; --border:#3a372f; --ink:#f1efe9; --ink-dim:#a8a498; --ink-faint:#77746a; --accent:#ef6b3a; --accent-ink:#1a0e07; --accent-soft:#3a2318; --focus:#4fb8b8; --stage-new:#8b9bcf; --stage-new-soft:#2a2f45; --stage-contacted:#b298e0; --stage-contacted-soft:#332a45; --stage-interested:#e0b256; --stage-interested-soft:#3a331e; --stage-building:#4fcfcf; --stage-building-soft:#1e3838; --stage-won:#6bcf8e; --stage-won-soft:#1e3527; --stage-lost:#e08278; --stage-lost-soft:#3a2420; --shadow:0 8px 28px rgba(0,0,0,0.45); --shadow-sm:0 2px 8px rgba(0,0,0,0.35); color-scheme: dark; } *{box-sizing:border-box;} html,body{height:100%;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } img{max-width:100%;} [hidden]{display:none !important;} a{color:var(--focus);} button{font-family:inherit;} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);} .app{ max-width:1180px; margin:0 auto; padding-inline:20px; padding-block:24px 64px; } /* ---- header ---- */ .topbar{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; } .brand h1{ font-family:var(--font-head); font-size:26px; font-weight:800; letter-spacing:-0.01em; margin:0; } .brand p{ margin:4px 0 0; color:var(--ink-dim); font-size:13px; } .topbar-actions{ display:flex; gap:10px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:600; padding:9px 14px; border-radius:8px; cursor:pointer; transition:transform .08s ease, box-shadow .12s ease, background .12s ease; } .btn:hover{box-shadow:var(--shadow-sm);} .btn:active{transform:translateY(1px);} .btn:focus-visible{outline:2px solid var(--focus); outline-offset:2px;} .btn svg{width:15px;height:15px;flex:none;} .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .btn-ghost{background:transparent;border-color:transparent;} .btn-danger{ color:var(--stage-lost); border-color:var(--stage-lost-soft); background:var(--stage-lost-soft); } .btn-sm{padding:6px 10px;font-size:12.5px;} .btn[disabled]{opacity:.55;cursor:not-allowed;} .btn-icon{padding:9px;} .btn-icon svg{width:16px;height:16px;} /* Theme toggle icon swap: sun shows while dark is active (click = go light). */ .icon-sun{display:none;} .icon-moon{display:block;} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .icon-sun{display:block;} :root:not([data-theme="light"]) .icon-moon{display:none;} } :root[data-theme="dark"] .icon-sun{display:block;} :root[data-theme="dark"] .icon-moon{display:none;} :root[data-theme="light"] .icon-sun{display:none;} :root[data-theme="light"] .icon-moon{display:block;} /* ---- stage chips ---- */ .stats-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; } .chip{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:7px 12px; border-radius:100px; border:1px solid var(--border); background:var(--surface); color:var(--ink-dim); cursor:pointer; white-space:nowrap; } .chip .dot{width:8px;height:8px;border-radius:50%;flex:none;} .chip .count{font-family:var(--font-mono);font-weight:500;color:var(--ink-faint);} .chip[aria-pressed="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); } .chip[aria-pressed="true"] .count{color:var(--bg);opacity:.7;} /* ---- toolbar ---- */ .toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; } .search-wrap{ position:relative; flex:1 1 220px; max-width:340px; } .search-wrap svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px;height:15px; color:var(--ink-faint); } .search-wrap input{ width:100%; padding:9px 10px 9px 32px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:13.5px; } .search-wrap input:focus-visible{outline:2px solid var(--focus);outline-offset:1px;} .sort-select{ padding:9px 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink-dim); font-size:13px; font-weight:500; } .result-count{ color:var(--ink-faint); font-size:12.5px; margin-left:auto; } /* ---- table ---- */ .table-shell{ background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; } .table-scroll{position:relative;overflow-x:auto;} table{width:100%;border-collapse:collapse;min-width:820px;} thead th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:600; padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap; } tbody td{ padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:top; } tbody tr:last-child td{border-bottom:none;} tbody tr{cursor:pointer;transition:background .1s ease;} tbody tr:hover{background:var(--surface-2);} tbody tr:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;} .cell-name{font-weight:600;font-family:var(--font-head);font-size:14px;} .cell-sub{color:var(--ink-dim);font-size:12.5px;margin-top:2px;} .cell-mono{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-dim);white-space:nowrap;} .maps-link{ display:inline-flex;align-items:center;gap:5px; color:var(--focus);font-weight:600;font-size:12.5px;text-decoration:none; } .maps-link svg{width:13px;height:13px;} .maps-link:hover{text-decoration:underline;} .no-link{color:var(--ink-faint);font-size:12.5px;} .stage-pill{ display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:600; padding:4px 10px;border-radius:100px; white-space:nowrap; } .stage-pill .dot{width:7px;height:7px;border-radius:50%;} .notes-preview{ max-width:220px; color:var(--ink-dim); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } th.col-actions,td.col-actions{width:34px;} /* Keep long imported text inside its column and details within reach. */ #leadsTable{table-layout:fixed;min-width:960px;} #leadsTable th:nth-child(1){width:calc(40% - 200px);} #leadsTable th:nth-child(2){width:calc(20% - 100px);} #leadsTable th:nth-child(3){width:calc(40% - 200px);} #leadsTable th:nth-child(4){width:140px;} #leadsTable th:nth-child(5){width:72px;} #leadsTable th:nth-child(6){width:128px;} #leadsTable th:nth-child(7){width:108px;} #leadsTable td{overflow-wrap:anywhere;} #leadsTable .cell-mono{white-space:normal;} #leadsTable .col-actions{ width:52px; padding:8px 10px; position:sticky; right:0; z-index:1; background:var(--surface); box-shadow:-1px 0 0 var(--border); } #leadsTable tr:hover .col-actions{background:var(--surface-2);} #leadsTable .row-menu-btn{width:32px;height:32px;align-items:center;justify-content:center;} .row-menu-btn{ background:none;border:none;color:var(--ink-faint);cursor:pointer; padding:4px;border-radius:6px;display:inline-flex; } .row-menu-btn:hover{background:var(--surface-2);color:var(--ink);} .row-menu-btn svg{width:16px;height:16px;} /* ---- empty state ---- */ .empty{ padding:52px 20px; text-align:center; color:var(--ink-dim); } .empty svg{width:36px;height:36px;color:var(--ink-faint);margin-bottom:10px;} .empty h3{margin:0 0 6px;font-family:var(--font-head);font-size:16px;color:var(--ink);} .empty p{margin:0 0 14px;font-size:13px;max-width:360px;margin-inline:auto;} /* ---- modals ---- */ .overlay{ position:fixed;inset:0; background:rgba(15,13,10,0.45); display:flex;align-items:center;justify-content:center; padding:20px; z-index:40; } .overlay[hidden]{display:none;} .modal{ background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); width:100%; max-width:480px; max-height:88vh; overflow-y:auto; padding:22px; } .modal.modal-wide{max-width:640px;} .modal-head{ display:flex;align-items:flex-start;justify-content:space-between; gap:12px;margin-bottom:16px; } .modal-head h2{font-family:var(--font-head);font-size:18px;margin:0;font-weight:700;} .modal-head p{margin:4px 0 0;color:var(--ink-dim);font-size:12.5px;} .icon-btn{ background:none;border:none;color:var(--ink-faint);cursor:pointer; padding:4px;border-radius:6px;flex:none; } .icon-btn:hover{background:var(--surface-2);color:var(--ink);} .icon-btn svg{width:18px;height:18px;display:block;} .field{margin-bottom:14px;} .field label{ display:block;font-size:12.5px;font-weight:600;color:var(--ink-dim);margin-bottom:5px; } .field input,.field select,.field textarea{ width:100%; padding:9px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--ink); font-size:13.5px; font-family:inherit; } .field textarea{resize:vertical;min-height:64px;} .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:2px solid var(--focus);outline-offset:1px; } .field-row{display:flex;gap:10px;} .field-row .field{flex:1;} .modal-actions{ display:flex;justify-content:flex-end;gap:8px;margin-top:18px; padding-top:14px;border-top:1px solid var(--border); } .form-hint{font-size:11.5px;color:var(--ink-faint);margin-top:4px;} .required{color:var(--accent);} /* bulk import */ textarea.bulk-input{ width:100%;min-height:150px; font-family:var(--font-mono);font-size:12.5px; padding:10px;border-radius:8px;border:1px solid var(--border); background:var(--bg);color:var(--ink);resize:vertical; } .format-hint{ background:var(--surface-2);border-radius:8px;padding:10px 12px; font-size:12px;color:var(--ink-dim);margin-top:10px;line-height:1.6; } .format-hint code{ background:var(--surface);border:1px solid var(--border);border-radius:4px; padding:1px 5px;font-family:var(--font-mono);font-size:11.5px; } .preview-table-wrap{ margin-top:14px;max-height:260px;overflow:auto; border:1px solid var(--border);border-radius:8px; } .preview-table-wrap table{min-width:0;} .preview-table-wrap th,.preview-table-wrap td{ padding:7px 10px;font-size:12px;border-bottom:1px solid var(--border); } .warn-box{ margin-top:10px;background:var(--stage-lost-soft);color:var(--stage-lost); border-radius:8px;padding:9px 11px;font-size:12px; } .import-summary{font-size:12.5px;color:var(--ink-dim);margin-top:10px;} /* ---- detail drawer ---- */ .drawer-overlay{ position:fixed;inset:0;background:rgba(15,13,10,0.4); z-index:40; } .drawer-overlay[hidden]{display:none;} .drawer{ position:fixed;top:0;right:0;bottom:0; width:min(420px,100vw); background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--shadow); padding:22px; overflow-y:auto; padding-top:calc(22px + env(safe-area-inset-top,0px)); z-index:41; } .drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:4px;} .drawer-head>div{min-width:0;overflow-wrap:anywhere;} .drawer-head>.icon-btn{flex-shrink:0;} .drawer-head h2{font-family:var(--font-head);font-size:19px;margin:0;font-weight:700;} .drawer-sub{color:var(--ink-dim);font-size:12.5px;margin-bottom:18px;} .drawer .field label{color:var(--ink-faint);} .drawer-meta{ display:flex;justify-content:space-between;color:var(--ink-faint);font-size:11.5px; margin-top:16px;padding-top:12px;border-top:1px solid var(--border); font-family:var(--font-mono); } /* ---- toast + banner ---- */ .toast{ position:fixed;bottom:20px;left:50%;transform:translateX(-50%); background:var(--ink);color:var(--bg); padding:10px 16px;border-radius:8px;font-size:13px;font-weight:500; box-shadow:var(--shadow);z-index:60; opacity:0;transition:opacity .2s ease; pointer-events:none; } .toast.show{opacity:1;} .db-banner{ display:flex;align-items:center;gap:8px; background:var(--stage-interested-soft);color:var(--stage-interested); border-radius:8px;padding:8px 12px;font-size:12.5px;margin-bottom:14px; } .db-banner[hidden]{display:none;} .db-banner svg{width:15px;height:15px;flex:none;} @media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important;} } @media (max-width:640px){ table{min-width:640px;} .result-count{display:none;} } /* Discovery uses the same quiet surfaces and orange action accent as the pipeline. */ .discovery-banner{display:block;width:100%;margin:0 0 18px;padding:12px 16px;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;background:var(--surface);color:var(--ink-dim);text-align:left;font:500 13px var(--font-body);cursor:pointer;} .discovery-banner.is-running{border-left-color:var(--focus);} .discovery-explainer{padding:12px 14px;border-radius:8px;background:var(--surface-2);color:var(--ink-dim);font-size:12.5px;line-height:1.65;} .search-history{margin-top:26px;border-top:1px solid var(--border);padding-top:16px;} .search-history h3,.lead-evidence h3{margin:0 0 10px;font-family:var(--font-head);font-size:13px;} .search-job{padding:13px 0;border-bottom:1px solid var(--border);} .search-job:last-child{border-bottom:0;} .job-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;} .job-status{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;color:var(--focus);} .job-failed .job-status,.job-failed p{color:var(--stage-lost);} .search-job p{font-size:12.5px;margin:5px 0;color:var(--ink-dim);overflow-wrap:anywhere;} .search-job small,.history-empty{font-size:12px;color:var(--ink-dim);} .lead-evidence{margin-top:22px;padding:14px;background:var(--surface-2);border-radius:8px;overflow-wrap:anywhere;} .lead-evidence p{margin:6px 0;font-size:12.5px;color:var(--ink-dim);white-space:pre-wrap;} .lead-evidence a{font-size:12.5px;font-weight:600;} .website-status{max-width:210px;font-size:11px;} :where(button,select,a):focus-visible{outline:2px solid var(--focus);outline-offset:3px;} .toast{max-width:calc(100vw - 32px);width:max-content;overflow-wrap:anywhere;} @media(max-width:640px){ .app{padding-inline:14px;} .topbar-actions{gap:7px;} .field-row{flex-direction:column;gap:0;} .modal{padding:18px;} .overlay{padding:12px;} .job-title{align-items:flex-start;} } /* Business type combobox: the existing field becomes a searchable menu. */ .category-picker{position:relative;} .category-input-wrap{position:relative;} .category-input-wrap input{padding-right:46px;} .category-input-wrap input::-webkit-search-cancel-button{display:none;} .category-toggle{position:absolute;right:5px;top:5px;bottom:5px;width:32px;border:0;border-radius:5px;background:var(--surface-2);color:var(--ink-dim);cursor:pointer;font-size:17px;} .category-options{position:absolute;z-index:55;left:0;right:0;top:calc(100% + 5px);max-height:280px;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);padding:5px;} .category-group{padding:11px 10px 5px;color:var(--ink-faint);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;} .category-option{padding:9px 10px;border-radius:5px;font-size:13px;cursor:pointer;overflow-wrap:anywhere;} .category-option:hover,.category-option[aria-selected="true"]{background:var(--surface-2);color:var(--accent);} .business-type-field .form-hint{margin:7px 0 0;font-size:11.5px;line-height:1.5;}