:root {
--bg: #0f172a;
--panel: #1e293b;
--panel-2: #334155;
--text: #e2e8f0;
--muted: #94a3b8;
--accent: #38bdf8;
--accent-2: #0ea5e9;
--ok: #22c55e;
--err: #ef4444;
--border: #334155;
}
/* THEME_100X_LIGHT_v1 — opt-in light, LinkedIn-style theme for the 100x
recruiter platform. Scoped to html.theme-100x so it overrides the dark
:root variables on recruiter pages ONLY. The MyZipApply seeker pages
also link this stylesheet but never get this class, so they are
completely unaffected. To convert a page, add class="theme-100x" to its
tag. */
html.theme-100x {
--bg: #f4f2ee;
--panel: #ffffff;
--panel-2: #f3f6f9;
--text: #1d2226;
--muted: #666666;
--accent: #0a66c2;
--accent-2: #004182;
--ok: #0a7d33;
--err: #b91c1c;
--border: #e0dfdc;
}
html.theme-100x body { background: var(--bg); color: var(--text); }
/* white cards get the same soft border + faint shadow as the Projects cards */
html.theme-100x .panel,
html.theme-100x .card,
html.theme-100x .box,
html.theme-100x table {
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
/* Default .btn keeps dark text on its light-gray fill (var--text); only the
accent-backed elements need light text. The dark-theme hardcoded hover
(#475569) would go dark on a light page, so soften it. */
html.theme-100x .btn:hover { background: #e8eef3; }
html.theme-100x .btn.primary { color: #ffffff; }
html.theme-100x .account-chip .initials { color: #ffffff; }
/* toast keeps a dark pill (readable on a light page) with light text */
html.theme-100x .toast { background: #1d2226; color: #ffffff; }
* { box-sizing: border-box; }
html, body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.5;
}
.wrap {
max-width: 860px;
margin: 0 auto;
padding: 2rem 1.25rem 4rem;
}
header h1 {
margin: 0 0 0.25rem;
font-size: 1.75rem;
}
header .sub { color: var(--muted); margin: 0 0 1.5rem; }
.arrow { color: var(--accent); }
.page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
/* PAGE_HEADER_WRAP_v1: was unreadable on /leads etc. because the
nav had flex-shrink:0 and ~8 buttons, so the title block was
forced down to a ~150px column where the sub-line broke per-word
("Hiring / managers / who / said / they're / interested,").
Now: header wraps the nav to a second line when space is tight,
and the title block holds at least 320px so the sub-line reads
as one paragraph. */
flex-wrap: wrap;
}
.page-header > div:first-child {
flex: 1 1 320px;
min-width: 280px;
}
.page-header .top-nav {
display: flex;
gap: 0.5rem;
flex-shrink: 1; /* was 0 — allow the nav to shrink before squishing the title */
flex-wrap: wrap;
justify-content: flex-end;
}
.page-header .top-nav .btn { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.page-header .sub { line-height: 1.45; }
/* My-account chip in the top-right */
.account-chip {
position: relative;
display: inline-flex; align-items: center; gap: 0.5rem;
background: var(--panel-2); border: 1px solid var(--border);
border-radius: 999px;
padding: 0.3rem 0.6rem 0.3rem 0.3rem;
cursor: pointer; user-select: none;
font-size: 0.85rem;
transition: border-color 0.1s ease;
}
.account-chip:hover { border-color: var(--accent); }
.account-chip .initials {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: var(--accent-2); color: #001018;
border-radius: 999px; font-weight: 700;
font-size: 0.78rem;
}
.account-chip .name { color: var(--text); }
.account-chip .caret { color: var(--muted); font-size: 0.7rem; }
.account-menu {
position: absolute; right: 0; top: calc(100% + 0.4rem);
min-width: 220px; padding: 0.5rem;
background: var(--panel); border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 12px 30px rgba(0,0,0,0.4);
z-index: 50;
display: none;
}
.account-menu.open { display: block; }
.account-menu .info {
padding: 0.4rem 0.6rem 0.6rem;
border-bottom: 1px solid var(--border);
margin-bottom: 0.35rem;
}
.account-menu .info .full { font-weight: 600; color: var(--text); }
.account-menu .info .email { color: var(--muted); font-size: 0.78rem; }
.account-menu .info .role-pill {
display: inline-block; margin-top: 0.25rem;
padding: 0.05rem 0.45rem; border-radius: 999px;
font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
background: rgba(56,189,248,0.15); color: var(--accent);
border: 1px solid var(--accent);
}
.account-menu a, .account-menu button {
display: block; width: 100%; text-align: left;
padding: 0.45rem 0.6rem; border-radius: 6px;
color: var(--text); font-size: 0.88rem;
background: transparent; border: 0; cursor: pointer;
text-decoration: none;
}
.account-menu a:hover, .account-menu button:hover {
background: var(--panel-2);
}
.account-menu .danger { color: #fecaca; }
.card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.25rem;
}
h2 { margin-top: 0; }
h3 { margin-top: 1.25rem; margin-bottom: 0.5rem; color: var(--accent); }
.hidden { display: none; }
.row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 1rem;
}
.row.three {
grid-template-columns: 110px 1fr 1fr;
}
label {
display: block;
color: var(--muted);
font-size: 0.9rem;
}
input[type="text"], textarea {
width: 100%;
background: var(--panel-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.6rem 0.75rem;
font-size: 0.95rem;
font-family: inherit;
margin-top: 0.25rem;
}
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
.dropzone {
border: 2px dashed var(--border);
border-radius: 10px;
padding: 2rem;
text-align: center;
margin: 1rem 0;
transition: all 0.15s ease;
}
.dropzone.drag {
border-color: var(--accent);
background: rgba(56, 189, 248, 0.06);
}
.dropzone p { margin: 0.25rem 0; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.btn {
display: inline-block;
background: var(--panel-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.6rem 1.1rem;
font-size: 0.95rem;
cursor: pointer;
text-decoration: none;
}
.btn:hover { background: #475569; }
.btn.primary {
background: var(--accent-2);
border-color: var(--accent);
color: #001018;
font-weight: 600;
}
.btn.primary:hover { background: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Inline spinner usable inside a button: */
.spinner {
display: inline-block;
width: 0.85em; height: 0.85em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
vertical-align: -0.15em;
margin-right: 0.4em;
animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Indeterminate progress bar: */
.progress-bar {
width: 100%; height: 4px;
background: rgba(56, 189, 248, 0.15);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.progress-bar > div {
position: absolute; top: 0; left: 0; bottom: 0;
width: 35%;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
animation: progress-slide 1.1s ease-in-out infinite;
}
@keyframes progress-slide {
0% { left: -35%; }
100% { left: 100%; }
}
.file-label { margin-top: 0.75rem; color: var(--accent); font-weight: 500; }
.summary {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.4rem 1rem;
background: var(--panel-2);
border-radius: 8px;
padding: 0.9rem 1rem;
font-size: 0.9rem;
}
.summary dt { color: var(--muted); }
.summary dd { margin: 0; }
.subjects {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.actions {
display: flex;
gap: 0.75rem;
margin-top: 1.25rem;
}
.toast {
position: fixed;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
background: #111827;
border: 1px solid var(--border);
color: var(--text);
padding: 0.7rem 1rem;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
max-width: 90%;
}
.toast.err { border-color: var(--err); color: #fecaca; }
.toast.ok { border-color: var(--ok); color: #bbf7d0; }
#done_body a {
color: var(--accent);
word-break: break-all;
}
.target-profile {
background: var(--panel-2);
border-radius: 8px;
padding: 1rem 1.1rem;
font-size: 0.9rem;
display: grid;
gap: 0.85rem;
}
.target-profile h4 {
margin: 0 0 0.35rem;
color: var(--accent);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.target-profile .chips {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.target-profile .chip {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.25rem 0.7rem;
font-size: 0.82rem;
}
.target-profile .copy-btn {
background: transparent;
color: var(--accent);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.2rem 0.55rem;
cursor: pointer;
font-size: 0.78rem;
margin-left: 0.5rem;
}
.target-profile .copy-btn:hover { background: var(--panel); }
.target-profile .notes {
line-height: 1.5;
color: var(--text);
}
.sanitize-note {
margin: -0.25rem 0 0.5rem;
padding: 0.4rem 0.65rem;
background: rgba(251, 191, 36, 0.08);
border-left: 3px solid #fbbf24;
border-radius: 4px;
}
.co-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.co-table thead th {
text-align: left;
color: var(--muted);
font-weight: 500;
padding: 0.35rem 0.5rem;
border-bottom: 1px solid var(--border);
}
.co-table tbody td {
padding: 0.4rem 0.5rem;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.co-table tbody tr:last-child td { border-bottom: none; }
.co-table .co-name { font-weight: 600; color: var(--text); white-space: nowrap; }
.co-table .co-name a { color: var(--accent); text-decoration: none; }
.co-table .co-name a:hover { text-decoration: underline; }
.co-table .co-industry { color: var(--accent); white-space: nowrap; }
.co-table .co-context { color: var(--muted); }
.co-table .row-num {
color: var(--muted); font-variant-numeric: tabular-nums;
text-align: right; padding-right: 0.4rem; font-size: 0.85rem;
}
.co-table .title-cell {
max-width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--accent);
}
.co-table .social-cell { white-space: nowrap; }
.co-table .social-cell a {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
margin: 0 0.1rem; border-radius: 5px;
background: var(--panel-2); color: var(--accent);
text-decoration: none; font-size: 0.72rem; font-weight: 700;
border: 1px solid var(--border);
}
.co-table .social-cell a:hover {
background: var(--accent-2); color: #001018; border-color: var(--accent);
}
/* Quick-lookup icon row next to company names — Google, Glassdoor, News */
.lookup-icons {
display: inline-flex; align-items: center; gap: 0.25rem;
margin-left: 0.4rem; vertical-align: middle;
}
.lookup-icons a {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
border-radius: 4px;
background: var(--panel-2);
border: 1px solid var(--border);
text-decoration: none;
transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.lookup-icons a:hover {
background: var(--panel);
border-color: var(--accent);
transform: translateY(-1px);
}
.lookup-icons img {
width: 14px; height: 14px;
display: block;
background: white;
border-radius: 2px;
}
.lookup-icons .news-icon {
font-size: 0.78rem; line-height: 1;
}
.co-table .avatar {
display: inline-block; vertical-align: middle;
width: 26px; height: 26px;
border-radius: 999px;
object-fit: cover;
background: var(--panel-2);
border: 1px solid var(--border);
margin-right: 0.3rem;
}
.co-table .avatar-fallback {
display: inline-flex; align-items: center; justify-content: center;
color: var(--accent); font-weight: 700; font-size: 0.7rem;
}
.co-table .logo {
width: 20px; height: 20px;
border-radius: 4px;
background: white; padding: 1px;
object-fit: contain;
border: 1px solid var(--border);
vertical-align: middle;
margin-right: 0.3rem;
}
.co-table .name-with-avatar { white-space: nowrap; }
.jobs-results {
margin-top: 0.5rem;
padding: 0.5rem 0 0 0;
}
.jobs-results table { margin-top: 0.5rem; }
.jobs-results a { color: var(--accent); }
.industry-picker {
margin-top: 0.75rem;
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.75rem 0.9rem;
}
.industry-controls {
display: flex; gap: 0.5rem; margin-bottom: 0.6rem;
}
.industry-controls .btn.small {
padding: 0.25rem 0.6rem; font-size: 0.78rem;
}
.industry-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.25rem 0.75rem;
max-height: 280px;
overflow-y: auto;
padding-right: 0.5rem;
}
.industry-item {
display: flex; align-items: center; gap: 0.4rem;
font-size: 0.85rem; color: var(--text);
cursor: pointer;
padding: 0.15rem 0;
}
.industry-item input { margin: 0; }
.industry-item:hover { color: var(--accent); }
.industry-item.is-suggested { color: var(--accent); font-weight: 500; }
.industry-group-header {
margin: 0 0 0.4rem; font-size: 0.78rem;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--muted);
}
.search-row {
display: flex; gap: 0.75rem; flex-wrap: wrap;
margin: 0.75rem 0;
}
.search-row label {
display: flex; flex-direction: column;
color: var(--muted); font-size: 0.85rem;
flex: 0 1 220px;
}
.search-row label.grow { flex: 1 1 320px; }
.search-row .search-input {
background: var(--panel-2); color: var(--text);
border: 1px solid var(--border); border-radius: 6px;
padding: 0.45rem 0.65rem; font-size: 0.9rem;
margin-top: 0.25rem;
}
.search-row .checkbox-inline {
flex-direction: row; align-items: center; gap: 0.4rem;
flex: 0 0 auto; padding-top: 1.2rem;
color: var(--text); font-size: 0.9rem;
}
.size-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 0.3rem 0.6rem;
margin-top: 0.3rem;
background: var(--panel-2);
padding: 0.5rem 0.7rem;
border: 1px solid var(--border);
border-radius: 6px;
}
.size-grid label {
flex-direction: row !important;
align-items: center; gap: 0.35rem;
color: var(--text); font-size: 0.85rem;
flex: 0 0 auto !important; margin: 0 !important;
}
.size-grid input { margin: 0; }
.clickable-chip {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.25rem 0.7rem;
font-size: 0.82rem;
color: var(--text);
cursor: pointer;
transition: all 0.1s ease;
font-family: inherit;
}
.clickable-chip:hover {
background: var(--panel-2);
border-color: var(--accent);
}
/* Default-off chips look more muted when inactive so users see they're
* "opt-in" categories like Staffing, Non-Profit, Government. */
.clickable-chip.default-off:not(.active) {
background: transparent;
color: var(--muted);
border-style: dashed;
font-style: italic;
opacity: 0.7;
}
.clickable-chip.default-off:not(.active):hover {
opacity: 1;
border-style: solid;
}
/* Active chip styling — matches the .btn.primary used by
* "Open Smartlead campaigns" / "Push to Smartlead" / "Find hiring managers".
* Deeper blue bg, sky-blue border, dark navy text. */
.clickable-chip.active,
button.clickable-chip.active {
background: var(--accent-2) !important;
background-color: var(--accent-2) !important;
border: 1px solid var(--accent) !important;
color: #001018 !important;
font-weight: 600;
}
button.clickable-chip.active:hover {
background: var(--accent) !important;
background-color: var(--accent) !important;
}
/* CHIP_CONTRAST_v2: on the light 100x theme --accent-2 is a DARK navy
(#004182), so the #001018 text above is dark-on-dark and unreadable.
Force white text for active chips on the light theme only — the dark
theme keeps its readable dark text on light-blue. */
html.theme-100x .clickable-chip.active,
html.theme-100x button.clickable-chip.active,
html.theme-100x button.clickable-chip.active:hover {
color: #ffffff !important;
}
.chip-row.clickable-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* ================== Mobile responsive (< 768px) ================== */
@media (max-width: 768px) {
.wrap {
padding: 1rem 0.75rem 3rem;
}
header h1, .page-header h1 {
font-size: 1.35rem;
}
.page-header {
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
}
.page-header .top-nav {
flex-wrap: wrap;
gap: 0.3rem;
}
.page-header .top-nav .btn {
padding: 0.5rem 0.7rem;
font-size: 0.85rem;
}
/* Global search becomes full-width on mobile */
.global-search { flex: 1 1 100%; margin-right: 0 !important; }
.global-search input { width: 100% !important; }
.global-search #global_search_results {
width: 100% !important; right: 0 !important; left: 0 !important;
}
/* Account chip shows just initials on mobile to save room */
.account-chip .name { display: none; }
/* Card padding tightens up */
.card { padding: 0.85rem 0.85rem; margin-bottom: 0.85rem; }
/* Tables — let them scroll horizontally rather than overflow */
table { display: block; overflow-x: auto; max-width: 100%; }
thead, tbody { display: table; width: 100%; }
/* Larger touch targets on mobile */
.btn, button, input[type="text"], input[type="email"], input[type="password"], select {
min-height: 38px;
}
/* Toolbars stack */
.dir-toolbar, .co-toolbar, .search-row, .btn-row {
flex-direction: column;
align-items: stretch;
}
.dir-toolbar input, .dir-toolbar select,
.co-toolbar input, .co-toolbar select {
width: 100%;
}
.dir-toolbar input.search { flex: 1 1 100% !important; }
/* CRM grid collapses to one column */
.crm-grid {
grid-template-columns: 1fr !important;
gap: 0.6rem !important;
}
.crm-row { display: block; margin-bottom: 0.5rem; }
.crm-row .crm-label { display: block; font-size: 0.78rem; }
/* Snapshot header shrinks logo, stacks meta */
.snap-header {
flex-direction: column;
align-items: center;
text-align: center;
}
.snap-meta {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Modals get more breathing room */
.modal { width: 96% !important; padding: 1rem !important; }
/* MPC drag-and-drop area */
.drop-zone { padding: 1.5rem 1rem !important; font-size: 0.95rem; }
}
/* Smaller phones */
@media (max-width: 420px) {
.page-header .top-nav .btn { padding: 0.45rem 0.6rem; font-size: 0.78rem; }
.snap-meta { grid-template-columns: 1fr !important; }
h1 { font-size: 1.2rem !important; }
}
/* APOLLO_VERIFIED_UI_v1: give the contacts results table breathing room.
Phase 6B share page also opts into the same widening so the
sanitized candidate brief uses the full available canvas on large
monitors instead of staying boxed at 920px. */
@media (min-width: 1280px) {
body .wrap,
body .share-wrap { max-width: min(1600px, 95vw) !important; }
}
.contacts-results { overflow-x: auto; }
.contacts-results table { min-width: 100%; font-size: 0.85rem; }
.contacts-results th, .contacts-results td { white-space: nowrap; padding: 0.4rem 0.55rem; }
.contacts-results td:nth-child(2), /* Company */
.contacts-results td:nth-child(5), /* Title */
.contacts-results td:nth-child(11) { /* Location */
white-space: normal;
max-width: 220px;
}
.apollo-verified-banner {
margin: 0.6rem 0 0.4rem;
padding: 0.5rem 0.85rem;
background: linear-gradient(135deg, #1f5a3a, #2c7a4e);
color: #fff;
border-radius: 6px;
font-size: 0.88rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.apollo-verified-banner::before {
content: "\2713";
font-weight: bold;
font-size: 1.05rem;
}