/* Theme tokens. These dark Obsidia defaults are overridden per tenant at
runtime (theme.js sets inline custom properties on ) — every themable
color in this file must ride a token, never a literal. --accent-rgb is the
accent as a bare r,g,b triplet for rgba() tints/glows. */
:root {
--page-width: 1100px;
--bg: #070707;
--bg-inset: #0a0a0a;
--card: #161616;
--card-hover: #1e1e1e;
--topbar-bg: rgba(7, 7, 7, 0.85);
--text: #e5e7eb;
--muted: #a3a3a3;
--accent: #d4af37;
--accent-rgb: 212, 175, 55;
--accent-hover: #e6c75a;
--on-accent: #2b230e;
--border: #2a2a2a;
--border-subtle: #242424;
--border-hover: #3a3a3a;
--error: #f87171;
--ok: #4ade80;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Base link colors for the dark theme — class-styled links (.nav-link,
.type-tab, chips, …) override these; this covers the unstyled contexts
(detail panels, mailto/join links) and keeps :visited readable. */
a { color: var(--accent); }
a:visited { color: var(--accent); }
a:hover { color: var(--accent-hover); }
/* ------------------------------------------------------------- top nav */
.topbar {
position: sticky;
top: 0;
z-index: 10;
background: var(--topbar-bg);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--card);
}
.topbar-inner {
max-width: var(--page-width);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
}
.brand {
font-weight: 700;
font-size: 1.05rem;
color: var(--text);
text-decoration: none;
white-space: nowrap;
}
.nav { display: flex; gap: 0.35rem; }
.nav-link {
color: var(--muted);
text-decoration: none;
font-size: 0.9rem;
padding: 0.35rem 0.7rem;
border-radius: 8px;
white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: var(--card); }
.nav-link.active { color: var(--accent); background: var(--card); }
/* company type sub-nav (pills) */
.type-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.type-tab {
font-size: 0.85rem; color: var(--muted); text-decoration: none;
padding: 0.35rem 0.75rem; border-radius: 999px;
border: 1px solid var(--border); background: var(--card); white-space: nowrap;
}
.type-tab:hover { color: var(--text); }
.type-tab.active {
color: var(--on-accent); background: var(--accent);
border-color: var(--accent); font-weight: 600;
}
/* ---------------------------------------------------------- page body */
.container { max-width: var(--page-width); margin: 0 auto; padding: 2rem 1rem 4rem; }
h1 { font-size: 1.7rem; margin: 0 0 0.25rem; }
.subtitle { color: var(--muted); margin: 0 0 1.5rem; }
.card {
background: var(--card);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
form { display: flex; gap: 0.75rem; }
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
flex: 1;
padding: 0.65rem 0.85rem;
border-radius: 8px;
border: 1px solid var(--border-hover);
background: var(--bg);
color: var(--text);
font-size: 0.95rem;
font-family: inherit;
}
textarea { resize: vertical; }
/* native selects ignore background-color on macOS unless appearance is reset */
select {
appearance: none;
-webkit-appearance: none;
padding-right: 1.9rem;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.65rem center;
}
select option { background: var(--bg); color: var(--text); }
form.form-stack { flex-direction: column; align-items: stretch; }
.entity-add { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.entity-add input { flex: 1; }
.entity-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; }
.entity-kind { color: var(--muted); font-size: 0.75rem; }
.hypo-desc { color: var(--text); margin: 0 0 0.5rem; line-height: 1.5; }
.hypo-desc.placeholder { color: var(--muted); font-style: italic; }
.hypo-title { cursor: text; }
.rich-edit {
min-height: 3.2rem; padding: 0.55rem 0.7rem;
border: 1px solid var(--accent); border-radius: 8px;
background: var(--bg-inset); color: var(--text); line-height: 1.5;
}
.rich-edit-inline {
display: block; min-height: auto; font-weight: 700; font-size: 1rem;
}
.edit-hint { color: var(--muted); font-size: 0.72rem; margin: 0.2rem 0 0.6rem; }
.cls-head {
display: flex; align-items: center; justify-content: space-between;
gap: 0.6rem; margin: 0.9rem 0 0.35rem;
}
.cls-head .detail-heading { margin: 0; }
.add-toggle {
flex: none; background: none; border: 1px solid var(--border); color: var(--accent);
border-radius: 6px; width: 1.8rem; height: 1.8rem; padding: 0;
font-size: 1.15rem; line-height: 1; font-weight: 600; cursor: pointer;
}
.add-toggle:hover { background: var(--card); }
.add-toggle.is-open { color: var(--error); border-color: var(--error); }
.hidden { display: none !important; }
/* add-classification modal */
.modal-overlay {
position: fixed; inset: 0; z-index: 100;
background: rgba(0, 0, 0, 0.7);
display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal {
background: var(--card); border: 1px solid var(--border); border-radius: 12px;
padding: 1.25rem; width: 100%; max-width: 420px;
}
.modal-title { margin: 0 0 1rem; font-size: 1.05rem; }
.modal-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.7rem; }
.modal-label { font-size: 0.78rem; color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.4rem; }
.btn-secondary { background: var(--border); color: var(--text); }
.modal-error { color: var(--error); font-size: 0.85rem; min-height: 1.1rem; }
.cls-item { padding: 0.3rem 0; }
.cls-criteria { color: var(--muted); font-size: 0.82rem; margin-top: 0.1rem; }
.cls-add { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.55rem; }
.cls-add input, .cls-add select { flex: 1; min-width: 8rem; }
.cls-row {
display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0;
}
.cls-badge {
display: inline-block; font-size: 0.72rem; color: var(--muted);
background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
padding: 0.1rem 0.5rem;
}
.cls-role { color: var(--text); }
/* gov entities filter bar */
.gov-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gov-filters input, .gov-filters select { flex: 1; min-width: 8rem; }
.gov-filters .multi-dropdown { flex: 1; min-width: 10rem; }
/* multi-select checkbox dropdown */
.multi-dropdown { position: relative; }
.multi-btn {
width: 100%; text-align: left; background: var(--bg); color: var(--text);
border: 1px solid var(--border); font-weight: 400; padding: 0.65rem 0.85rem;
}
.multi-btn:hover { background: var(--bg); }
.multi-panel {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
width: min(640px, 92vw);
background: var(--card); border: 1px solid var(--border); border-radius: 8px;
padding: 0.5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.multi-search { width: 100%; margin-bottom: 0.5rem; }
.multi-list { max-height: 300px; overflow-y: auto; overflow-x: hidden; }
.multi-item {
display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem;
border-radius: 6px; cursor: pointer; font-size: 0.88rem; white-space: nowrap;
}
.multi-item::before {
content: "✓"; flex: none; width: 1em; color: transparent; font-weight: 700;
}
.multi-item:hover { background: var(--bg); }
.multi-item.selected { background: rgba(var(--accent-rgb), 0.14); }
.multi-item.selected::before { color: var(--accent); }
.multi-item .code { color: var(--accent); font-variant-numeric: tabular-nums; }
.multi-item .title { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.multi-item.selected .code { font-weight: 700; }
.multi-empty { color: var(--muted); font-size: 0.85rem; padding: 0.4rem; }
.gov-filters button { flex: none; }
.gov-live { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.7rem; color: var(--muted); font-size: 0.85rem; }
.gov-live input { flex: none; width: auto; }
#gov-pager { margin-top: 0.8rem; }
#gov-pager button { width: 100%; }
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus { outline: 2px solid var(--accent); border-color: transparent; }
button {
padding: 0.65rem 1.1rem;
border: none;
border-radius: 8px;
background: var(--accent);
color: var(--on-accent);
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: wait; }
.form-status { min-height: 1.4rem; margin: 0.75rem 0 0; font-size: 0.9rem; }
.form-status.error { color: var(--error); }
.form-status.ok { color: var(--ok); }
/* ------------------------------------------------------------- lists */
ul { list-style: none; padding: 0; margin: 0; }
li.champion, li.empty { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
li:last-child { border-bottom: none; }
.champion-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.champion-row > * { min-width: 0; }
/* flex: 1 so a three-child row (logo, info, meta — companies page) keeps the
info hugging the logo instead of space-between centering it. */
.champion-info { min-width: 0; flex: 1; }
.champion-row.clickable { cursor: pointer; }
li a { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
li a.url { word-break: break-all; }
li a:hover { text-decoration: underline; }
li time { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.champion-info { display: flex; flex-direction: column; gap: 0.15rem; }
.champion-meta { display: flex; align-items: center; gap: 0.4rem; }
.delete-btn {
background: none; border: none; padding: 0.15rem 0.3rem;
font-size: 0.95rem; line-height: 1; cursor: pointer;
opacity: 0.45; filter: grayscale(1);
}
.delete-btn:hover { opacity: 1; filter: none; }
.delete-btn:disabled { opacity: 0.2; cursor: wait; }
.chevron { color: var(--muted); font-size: 0.85rem; user-select: none; }
/* ------------------------------------------------------- detail panel */
/* CHILD combinators on purpose: rows nest now (contact rows inside an open
company panel), and a descendant `.open .details` match through the OUTER
li kept inner collapsed rows' details visible. */
li.champion > .details { display: none; }
li.champion.open > .details {
display: block;
margin-top: 0.75rem;
padding: 0.85rem 1rem;
background: var(--bg);
border-radius: 8px;
font-size: 0.88rem;
}
.detail-headline { color: var(--text); font-weight: 600; margin-bottom: 0.15rem; }
.detail-location { color: var(--muted); margin-bottom: 0.25rem; }
.detail-footer {
display: flex; gap: 1rem; flex-wrap: wrap;
margin-top: 0.9rem; padding-top: 0.6rem;
border-top: 1px solid var(--card); color: var(--muted); font-size: 0.78rem;
}
.detail-heading {
font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--accent); margin: 0.9rem 0 0.35rem;
}
.detail-heading:first-child { margin-top: 0; }
.detail-about { margin: 0; color: var(--text); white-space: pre-line; }
.exp-entry { margin-bottom: 0.7rem; }
.exp-entry:last-of-type { margin-bottom: 0; }
.exp-head { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.exp-company { color: var(--text); }
.exp-dates { color: var(--muted); font-size: 0.8rem; margin-left: auto; white-space: nowrap; }
.exp-desc { margin: 0.25rem 0 0; color: var(--muted); white-space: pre-line; }
.edu-entry { color: var(--text); margin-bottom: 0.3rem; }
/* ------------------------------------------------------- connections */
.conn-box {
max-height: 280px; overflow-y: auto;
border: 1px solid var(--card); border-radius: 6px; padding: 0.4rem 0.6rem;
}
.conn-row { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.conn-row:last-child { border-bottom: none; }
.conn-who { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.conn-degree { color: var(--muted); font-size: 0.75rem; }
.conn-sub { color: var(--muted); font-size: 0.8rem; margin-top: 0.1rem; overflow-wrap: anywhere; }
/* ----------------------------------------------------------- runner */
.runner-status { font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.runner-status .headline-line { color: var(--text); }
.dot {
display: inline-block; width: 9px; height: 9px; border-radius: 50%;
margin-right: 0.35rem; vertical-align: baseline;
}
.dot-green { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.dot-red { background: var(--error); }
.dot-gray { background: var(--muted); }
.runner-error { color: var(--error); word-break: break-word; white-space: pre-line; }
/* ---------------------------------------------------------- companies */
.company-logo {
width: 40px; height: 40px; border-radius: 8px; object-fit: cover;
background: var(--bg); flex-shrink: 0;
}
.sub { color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.company-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.company-tag {
font-size: 0.72rem; color: var(--muted);
background: var(--bg); border: 1px solid var(--border);
border-radius: 999px; padding: 0.1rem 0.5rem;
}
.headline { color: var(--muted); font-size: 0.85rem; }
.badge-pending { color: #fbbf24; }
.badge-failed { color: var(--error); }
.empty { color: var(--muted); }
/* Session chip injected into the topbar by common.js */
.user-chip {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--muted, var(--muted));
}
/* Log out is the last item INSIDE the profile menu — a button styled as a
menu link, separated by a rule so it reads as the terminal action. */
.user-menu-logout {
display: block;
width: 100%;
text-align: left;
background: none;
border: 0;
border-top: 1px solid var(--border-subtle);
border-radius: 0;
margin-top: 0.25rem;
padding-top: 0.5rem;
font: inherit;
font-size: 0.9rem;
cursor: pointer;
}
/* Admin page */
.user-sub { color: var(--muted); font-size: 0.85rem; }
.admin-badge {
display: inline-block; width: fit-content;
margin-left: 8px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--accent); border: 1px solid var(--accent);
border-radius: 999px; padding: 0.1rem 0.5rem; vertical-align: middle;
}
.small-btn {
background: var(--card); border: 1px solid var(--border); color: var(--muted);
border-radius: 8px; padding: 0.3rem 0.7rem; font-size: 0.8rem; cursor: pointer;
}
.small-btn:hover { color: var(--text); border-color: var(--border-hover); }
.checkbox-label {
display: inline-flex; align-items: center; gap: 0.4rem;
color: var(--muted); font-size: 0.9rem; margin: 0 0.5rem;
}
.checkbox-label input { width: auto; }
/* Connection enrichment (people table) */
.enrich-line { display: flex; align-items: center; gap: 0.75rem; margin: 0.4rem 0 0.6rem; }
.conn-enriched {
font-size: 0.68rem; color: var(--accent); border: 1px solid var(--accent);
border-radius: 999px; padding: 0.05rem 0.45rem; white-space: nowrap;
}
.conn-enriched.failed { color: var(--muted); border-color: var(--border); }
.conn-sub a { color: var(--accent); }
/* Grouped dropdown navigation (rendered by common.js) */
.nav-group { position: relative; }
.nav-group-btn {
/* override the global accent button style */
background: none; border: none; cursor: pointer;
color: var(--muted); font-size: 0.9rem; font-family: inherit;
padding: 0.35rem 0.7rem; border-radius: 8px;
white-space: nowrap;
}
.nav-group-btn:hover { color: var(--text); background: var(--card); }
.nav-group-btn.active { color: var(--accent); background: var(--card); }
.nav-caret { font-size: 0.65rem; opacity: 0.7; }
.nav-panel {
display: none;
position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
min-width: 10rem; max-width: 92vw;
background: var(--card); border: 1px solid var(--border); border-radius: 10px;
padding: 0.35rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.nav-group:last-of-type .nav-panel { left: auto; right: 0; }
.nav-group.open .nav-panel { display: block; }
.nav-panel .nav-link { display: block; white-space: nowrap; }
/* Per-row contact enrichment */
.conn-enrich-btn {
background: none; border: 1px solid var(--border); color: var(--muted);
border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.68rem;
cursor: pointer; white-space: nowrap; margin-left: auto;
}
.conn-enrich-btn:hover { color: var(--accent); border-color: var(--accent); }
.conn-enrich-btn:disabled { cursor: default; opacity: 0.7; }
/* ------------------------------------------------ UX review: focus & mobile */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rich-edit:focus-visible { outline-offset: 0; }
.api-banner { color: var(--error); font-size: 0.8rem; white-space: nowrap; }
/* Companies list: source filter + count line above the list */
.company-list-filters { align-items: center; margin-bottom: 0.6rem; }
.company-list-filters select { flex: 0 1 auto; min-width: 11rem; }
.company-list-filters .form-status { margin: 0; flex: 1; text-align: right; }
/* Intro emails (champions page settings + GTM hypothesis settings) */
.intro-block { margin-top: 0.6rem; }
.intro-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.intro-grid input[type="email"] { flex: 1; min-width: 12rem; }
.intro-grid .intro-max { width: 4.2rem; flex: none; }
.intro-grid select { flex: none; }
.intro-settings { margin: 0.6rem 0; }
.intro-settings-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.intro-settings-row .checkbox-label { margin: 0; }
.hypo-guidance { color: var(--muted); font-size: 0.9rem; white-space: pre-wrap; cursor: text; }
.hypo-guidance.placeholder { font-style: italic; }
.guidance-edit { width: 100%; }
.match-box { margin-top: 0.6rem; max-height: 22rem; overflow-y: auto; }
/* Admin: the add-user form wraps inside its card instead of overflowing */
#user-form { flex-wrap: wrap; }
#user-form input[type="text"] { flex: 1 1 9rem; }
#user-form input[type="email"] { flex: 2 1 13rem; }
#user-form select { flex: 1 1 auto; min-width: 11rem; }
#user-form button { flex: none; }
/* Admin: user rows as a stable grid — name | email | role | actions */
.user-edit-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) 9rem auto;
gap: 0.5rem;
align-items: center;
}
.user-edit-fields { display: contents; }
.user-edit-row input, .user-edit-row select { min-width: 0; width: 100%; }
.user-edit-row .champion-meta { display: flex; gap: 0.4rem; align-items: center; }
.user-edit-sub { padding: 0.3rem 0 0.8rem; }
@media (max-width: 640px) {
.user-edit-row { grid-template-columns: 1fr; }
.user-edit-row .champion-meta { justify-content: flex-start; }
}
.section-title { font-size: 1.15rem; margin: 1.8rem 0 0.25rem; }
.user-groups { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; padding: 0.15rem 0 0.4rem; }
.user-groups .checkbox-label { font-size: 0.8rem; color: var(--muted); }
.group-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.group-row input[type="text"] { flex: 1 1 200px; min-width: 0; }
.perm-matrix { border-collapse: collapse; margin: 0.5rem 0 0.9rem; }
.perm-matrix th, .perm-matrix td { text-align: left; padding: 0.2rem 1.1rem 0.2rem 0; font-size: 0.85rem; }
.perm-matrix th { color: var(--muted); font-weight: 500; }
.perm-matrix td:nth-child(n + 2), .perm-matrix th:nth-child(n + 2) { text-align: center; }
.install-card h2 { margin-top: 0; }
.install-ctas { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.7rem 0; }
.install-cta {
display: inline-block; padding: 0.55rem 1.1rem; border-radius: 8px;
background: var(--accent); color: var(--bg-inset); font-weight: 600;
text-decoration: none;
}
.install-cta:hover { filter: brightness(1.1); color: var(--bg-inset); }
.install-cta-alt { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.install-cta-alt:hover { color: var(--accent); }
.conn-toggle { margin-top: 0.5rem; }
.conn-box-bubble {
border: 1px solid var(--border-hover); border-radius: 8px; padding: 0.6rem 0.8rem;
margin-top: 0.5rem; background: var(--bg-inset);
}
.tier-select {
background: var(--card-hover); color: var(--accent); border: 1px solid var(--border-hover);
border-radius: 999px; font-size: 0.72rem; padding: 0.1rem 0.4rem;
cursor: pointer;
}
.custom-limits { margin: 0.4rem 0 0.4rem 0.5rem; }
.custom-limits.hidden { display: none; }
.zi-row { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.25rem 0; }
.zi-row .modal-label { min-width: 5.5rem; }
.zi-dnc { margin-left: 0.5rem; color: var(--error); border-color: var(--error); }
.api-access { margin-top: 0.9rem; }
.api-access-row { align-items: center; gap: 0.5rem; }
.api-access-row .modal-label { min-width: 8.5rem; }
.api-limit-input { width: 5.5rem; }
/* Directory advanced-filter builder: "+ filter" pickers + active editors. */
.dir-adv { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.dir-adv-pickers { display: inline-flex; gap: 0.4rem; }
.dir-adv-chips { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dir-adv-item {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.15rem 0.3rem; border: 1px solid var(--border-subtle);
border-radius: 8px; background: var(--bg-inset);
}
.dir-adv-range { display: inline-flex; align-items: center; gap: 0.3rem; }
.dir-adv-range input { width: 7.5rem; }
.dir-adv-remove { font-size: 0.75rem; }
/* Native color swatches in the platform theme editor — the global input
sizing flattens them to a sliver otherwise. */
.api-access input[type="color"] {
width: 64px;
height: 30px;
padding: 2px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--card);
cursor: pointer;
}
.perm-matrix-band td {
padding-top: 0.85rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
text-align: left;
}
/* Contacts page: detail expansion (email editor + Outlook correspondence) */
.conn-row.clickable { cursor: pointer; }
.conn-row .chevron { float: right; }
.contact-email-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.4rem 0 0.6rem; }
.contact-email-row input { flex: 1 1 220px; min-width: 0; max-width: 320px; }
.contact-email-row .form-status { margin: 0; flex-basis: auto; }
.contact-mail-bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.contact-mail-bar .form-status { margin: 0; }
.mail-item { border-top: 1px solid var(--border); padding: 0.45rem 0; }
.mail-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.mail-date { color: var(--muted); font-size: 0.75rem; margin-left: auto; }
.mail-dir { font-size: 0.72rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.5rem; white-space: nowrap; }
.mail-dir.from-contact { color: var(--accent); border-color: var(--accent); }
.mail-preview { color: var(--muted); font-size: 0.8rem; margin-top: 0.2rem; overflow-wrap: anywhere; }
.mailbox-add-form { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.mailbox-add-form input { font-size: 0.8rem; padding: 0.25rem 0.5rem; max-width: 200px; }
.mailbox-add-form .form-status { margin: 0; }
.mailbox-nocontact { display: inline-flex; align-items: center; gap: 0.4rem; }
/* Active-investor pipeline management */
.pipeline-item { padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.pipeline-item:last-child { border-bottom: none; }
.pipeline-item.closed { opacity: 0.55; }
.pipeline-row {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 0.9fr auto auto;
gap: 0.5rem;
align-items: center;
}
.pipeline-row input, .pipeline-row select { min-width: 0; width: 100%; }
.pipeline-row2 { grid-template-columns: 1fr 1.3fr auto auto; margin-top: 0.4rem; }
.pipeline-view { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pipeline-view .conn-sub { margin-top: 0; }
.pipeline-actions { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.pipeline-actions .form-status { margin: 0; }
.company-tag.tag-active { color: var(--accent); border-color: var(--accent); }
.pipeline-view.clickable { cursor: pointer; }
.pipeline-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.pipeline-head .form-status { margin: 0; }
#pipeline-add-toggle { font-size: 1rem; line-height: 1; padding: 0.25rem 0.6rem; }
/* Avatars (list rows + profile card) */
.avatar { border-radius: 50%; object-fit: cover; background: var(--card); flex: none; }
.avatar-sm { width: 34px; height: 34px; font-size: 0.75rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; }
.avatar-fallback {
display: flex; align-items: center; justify-content: center;
color: var(--muted); font-weight: 600; border: 1px solid var(--border);
}
/* List rows as a grid: chevron | avatar | content, actions pinned right */
.conn-grid {
display: grid;
grid-template-columns: 1rem 34px minmax(0, 1fr);
column-gap: 0.6rem;
row-gap: 0.15rem;
align-items: start;
padding: 0.5rem 0;
}
.conn-grid .chevron { float: none; grid-column: 1; grid-row: 1; align-self: center; }
.conn-grid .avatar { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.conn-grid .conn-who, .conn-grid .conn-sub, .conn-grid .company-tags { grid-column: 3; }
.conn-grid .company-tags { margin-top: 0.15rem; }
.conn-actions { display: inline-flex; gap: 0.35rem; margin-left: auto; align-items: center; }
.enrich-control { display: inline-flex; gap: 0.4rem; align-items: center; }
.enrich-control .form-status { margin: 0; }
/* Profile card header in the detail panel */
.profile-card { display: flex; gap: 0.9rem; align-items: flex-start; margin-bottom: 0.9rem; }
.profile-main { min-width: 0; flex: 1; }
.profile-name { font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.profile-headline { color: var(--muted); font-size: 0.85rem; margin-top: 0.1rem; }
.profile-links { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin-top: 0.4rem; font-size: 0.8rem; align-items: center; }
.profile-link-missing {
background: none; border: 1px dashed var(--border); color: var(--muted);
border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.72rem; cursor: pointer;
}
.profile-link-missing:hover { color: var(--accent); border-color: var(--accent); }
.profile-stats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.stat-chip {
font-size: 0.72rem; color: var(--muted); background: var(--card);
border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.55rem;
white-space: nowrap;
}
.stat-chip b { color: var(--text); font-weight: 600; margin-right: 0.25rem; }
.stat-chip.stat-accent { color: var(--accent); border-color: var(--accent); }
.profile-actions { margin-left: auto; display: flex; gap: 0.4rem; flex: none; }
/* Collapsed editor (email + social URLs + enrich) */
.contact-edit-panel {
border: 1px solid var(--border); border-radius: 8px;
padding: 0.35rem 0.8rem 0.55rem; margin-bottom: 0.9rem; background: var(--bg-inset);
}
/* Instagram tab mini profile card */
.ig-head { display: flex; gap: 0.9rem; align-items: flex-start; margin: 0.5rem 0 0.75rem; }
.mail-item .profile-stats { margin-top: 0.3rem; }
/* Curated LinkedIn tab */
.li-activity-row {
display: flex; align-items: baseline; gap: 0.5rem;
padding: 0.25rem 0; border-top: 1px solid var(--border-subtle);
font-size: 0.82rem; overflow-wrap: anywhere;
}
.li-activity-row:first-of-type { border-top: none; }
.show-more-btn { margin-top: 0.35rem; }
@media (max-width: 640px) {
.profile-card { gap: 0.6rem; }
.avatar-lg { width: 48px; height: 48px; }
.profile-actions { margin-left: 0; }
}
/* Contact data tabs (profile / enrichment sources / emails) + drill-in tree */
.contact-tab-bar { margin: 0.7rem 0 0.5rem; }
.contact-tab-body { padding-bottom: 0.4rem; }
.tree-child { margin-left: 0.5rem; border-left: 1px solid var(--border); padding-left: 0.7rem; }
.tree-row { font-size: 0.82rem; padding: 0.06rem 0; overflow-wrap: anywhere; }
.tree-key { color: var(--accent); margin-right: 0.45rem; }
.tree-key.tree-branch { cursor: pointer; }
.tree-leaf { color: var(--muted); }
.tree-head { cursor: pointer; user-select: none; }
.tree-toggle {
background: none; border: none; color: var(--muted);
cursor: pointer; padding: 0 0.35rem 0 0; font-size: 0.8rem;
}
@media (max-width: 720px) {
.pipeline-row { grid-template-columns: 1fr 1fr; }
}
/* Meetings page */
.container.wide { max-width: 1000px; }
.meeting-toolbar { align-items: center; margin-bottom: 0.6rem; }
.meeting-toolbar .type-tabs { margin-bottom: 0; flex: 0 1 auto; }
.meeting-toolbar .form-status { margin: 0; flex-basis: 100%; }
.meeting-nav { display: flex; align-items: center; gap: 0.35rem; }
.meeting-nav button { flex: none; padding: 0.3rem 0.7rem; }
.meeting-range { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
/* Calendar grids (week + month) */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
background: var(--bg); border: 1px solid var(--border-subtle); border-radius: 8px;
padding: 0.35rem; min-height: 7rem; display: flex; flex-direction: column;
gap: 3px; overflow: hidden;
}
.cal-month .cal-cell { min-height: 5.4rem; }
.cal-today { border-color: var(--accent); }
.cal-out { opacity: 0.45; }
.cal-day-head, .cal-dow {
color: var(--muted); font-size: 0.72rem; text-transform: uppercase;
letter-spacing: 0.05em; padding-bottom: 2px;
}
.cal-dow { text-align: center; }
.cal-daynum { color: var(--muted); font-size: 0.75rem; }
.cal-today .cal-daynum, .cal-today .cal-day-head { color: var(--accent); font-weight: 600; }
.cal-chip {
display: block; width: 100%; text-align: left; background: var(--card);
border: 1px solid var(--border); border-left: 3px solid var(--border);
color: var(--text); border-radius: 5px;
padding: 2px 5px; font-size: 0.72rem; line-height: 1.25; cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.meeting-filters {
flex-basis: 100%; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
}
.meeting-filters select { flex: 0 1 auto; min-width: 9rem; }
.meeting-filters input[type="text"] { flex: 1 1 12rem; }
.meeting-filters .checkbox-label { margin: 0; white-space: nowrap; flex: none; display: inline-flex; }
/* The toolbar is a .gov-filters, whose `input { min-width: 8rem }` would
inflate the checkbox's layout box and strand its label 100px away. */
.meeting-filters .checkbox-label input { flex: none; margin: 0; min-width: 0; width: auto; }
.cal-chip:hover { border-color: var(--border-hover); }
.cal-chip.selected { border-color: var(--accent); color: var(--accent); }
.cal-chip-canceled { text-decoration: line-through; color: var(--muted); }
.cal-more { color: var(--muted); background: transparent; border-style: dashed; }
.meeting-detail-panel {
border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.9rem;
margin: 0.7rem 0;
}
.meeting-detail-panel .details { display: block; }
@media (max-width: 720px) {
.cal-grid { grid-template-columns: 1fr; }
.cal-month .cal-dow { display: none; }
.cal-cell { min-height: auto; }
.cal-out { display: none; }
}
.meeting-day {
list-style: none; color: var(--muted); font-size: 0.8rem; text-transform: uppercase;
letter-spacing: 0.06em; padding: 0.9rem 0 0.3rem; border-bottom: 1px solid var(--border-subtle);
}
.meeting-time { color: var(--muted); font-size: 0.85rem; margin-right: 0.5rem; }
.meeting-invitee { padding: 0.45rem 0; border-top: 1px solid var(--border-subtle); }
.meeting-invitee:first-of-type { border-top: none; }
/* Intro Queue review page */
.intro-group { margin-bottom: 1.5rem; }
.intro-group-head {
display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
border-bottom: 1px solid var(--border); padding-bottom: 0.35rem; margin-bottom: 0.5rem;
}
.sugg-row { padding: 0.6rem 0; border-bottom: 1px solid var(--border-subtle); }
.sugg-row:last-child { border-bottom: none; }
.sugg-msg { width: 100%; margin-top: 0.45rem; font-size: 0.9rem; }
.sugg-msg[readonly] { color: var(--muted); }
.sugg-actions { display: flex; gap: 0.5rem; margin-top: 0.4rem; align-items: center; }
@media (max-width: 640px) {
.topbar-inner { flex-wrap: wrap; justify-content: center; row-gap: 0.15rem; }
.nav { flex-wrap: wrap; justify-content: center; }
form { flex-wrap: wrap; }
form button { flex: none; }
.nav-panel { max-width: calc(100vw - 2rem); }
.user-chip { margin-left: 0; }
}
/* ---------------------------------------------------- sales dashboard */
/* Single-hue magnitude bars (one series — the accent), values as direct
labels in text ink, thin rounded data-end marks on a recessive track. */
.stat-tiles { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.stat-tile { flex: 1 1 7rem; background: var(--bg); border-radius: 8px; padding: 0.7rem 0.9rem; }
.stat-tile-value { font-size: 1.5rem; font-weight: 700; }
.stat-tile-label { color: var(--muted); font-size: 0.8rem; }
.funnel-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.22rem 0; }
.funnel-label { flex: 0 0 9rem; color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funnel-track { flex: 1; background: var(--bg); border-radius: 4px; height: 14px; overflow: hidden; }
.funnel-bar { height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.funnel-value { flex: 0 0 2.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.funnel-head { color: var(--muted); font-size: 0.8rem; }
.rep-cols { flex: 1; display: flex; gap: 0.4rem; justify-content: flex-end; }
.rep-col { flex: 0 0 4.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.funnel-head .rep-col { color: var(--muted); }
/* Admin "view as" banner — visible on every page while impersonating. */
.impersonation-banner {
position: sticky; top: 0; z-index: 60;
display: flex; align-items: center; justify-content: center; gap: 0.8rem;
background: #7c2d12; color: #fed7aa;
padding: 0.45rem 1rem; font-size: 0.9rem;
}
/* Admin flag leads the permissions row, visually set off from the groups. */
.admin-checkbox { font-weight: 600; padding-right: 0.8rem; margin-right: 0.4rem; border-right: 1px solid var(--border); }
/* ---------------------------------------------------- cohorts */
.cohort-class-line { padding: 0.15rem 0 0.35rem 2.4rem; }
.cohort-class-chips { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.class-chip { cursor: pointer; opacity: 0.55; border: none; }
.class-chip.tag-active { opacity: 1; }
.class-chip:disabled { cursor: default; }
.cohort-picker-results, .cohort-members { list-style: none; margin: 0.4rem 0; padding: 0; }
.cohort-composer textarea, .cohort-composer input[type="text"] { width: 100%; margin: 0.3rem 0; }
.cohort-vars { display: inline-flex; gap: 0.3rem; margin-right: 0.6rem; }
.cohort-vars .company-tag { cursor: pointer; border: none; }
.cohort-compose-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.3rem; }
.cohort-roster-paste textarea { width: 100%; margin: 0.3rem 0; }
/* ---- Cohort UX: quiet deletes, toolbars, grouping, wide-screen grid ---- */
.cohort-members .delete-btn {
opacity: 0;
transition: opacity 0.15s;
}
.cohort-members li:hover .delete-btn,
.cohort-members li:focus-within .delete-btn {
opacity: 1;
}
.cohort-members-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 10px 0 6px;
}
.cohort-members-toolbar input[type="search"] {
flex: 1 1 220px;
min-width: 180px;
}
.cohort-bulk-bar {
display: flex;
gap: 8px;
align-items: center;
margin: 4px 0 8px;
padding: 6px 10px;
border: 1px dashed var(--border);
border-radius: 8px;
}
.cohort-group-heading {
margin: 14px 0 2px;
font-size: 0.85rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent, var(--accent));
}
.small-btn.active {
outline: 1px solid var(--accent, var(--accent));
}
.small-btn.class-toggle {
opacity: 0.65;
font-size: 0.75rem;
}
.small-btn.class-toggle:hover {
opacity: 1;
}
.cohort-select-box {
width: 16px;
height: 16px;
accent-color: var(--accent, var(--accent));
}
.cohort-tab-bar {
margin: 12px 0 8px;
}
/* Entity lists are single-column on purpose — full row width everywhere. */
/* Group-by-company headings render as full-width list items so grouped lists
stay ONE . */
li.group-heading {
list-style: none;
margin-top: 0.5rem;
}
li.group-heading .cohort-group-heading {
margin: 0 0 0.25rem;
}
/* ---- Obsidia brand: wordmark logo in the topbar ---- */
.brand {
display: flex;
align-items: center;
gap: 0.5rem;
}
.brand-logo {
height: 22px;
width: auto;
filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.28));
}
.brand-suffix {
color: var(--accent);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.14em;
}
/* ---- Cohort snapshot strip, notes, replies, Slack thread ---- */
.cohort-snapshot {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 12px 0 4px;
padding: 10px 12px;
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: 10px;
}
.cohort-stat strong {
font-size: 1.05rem;
color: var(--accent);
}
.chip-muted {
opacity: 0.55;
}
.cohort-note-editor {
display: flex;
gap: 6px;
align-items: flex-start;
flex-basis: 100%;
margin-top: 4px;
}
.cohort-note-editor textarea {
flex: 1;
font-size: 0.85rem;
}
.cohort-prov {
margin-left: auto;
font-size: 0.72rem;
opacity: 0.6;
}
.cohort-selection-pill {
display: flex;
gap: 10px;
align-items: center;
margin: 6px 0 10px;
padding: 8px 12px;
border: 1px solid var(--accent);
border-radius: 999px;
background: rgba(var(--accent-rgb), 0.14);
font-size: 0.85rem;
}
.cohort-recipient-table {
margin: 6px 0 2px;
border-left: 2px solid var(--border);
padding-left: 10px;
}
.cohort-recipient-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 2px 0;
font-size: 0.85rem;
}
.cohort-reply div:nth-child(2) {
margin-top: 2px;
padding: 6px 10px;
background: var(--card);
border-radius: 8px;
display: inline-block;
}
.slack-thread {
display: flex;
flex-direction: column;
gap: 6px;
margin: 8px 0;
max-height: 320px;
overflow-y: auto;
}
.slack-bubble {
max-width: 78%;
padding: 7px 11px;
border-radius: 12px;
font-size: 0.9rem;
}
.slack-bubble.theirs {
background: var(--card);
align-self: flex-start;
border-bottom-left-radius: 3px;
}
.slack-bubble.mine {
background: var(--on-accent);
align-self: flex-end;
border-bottom-right-radius: 3px;
}
.slack-bubble .mail-date {
font-size: 0.68rem;
opacity: 0.55;
margin-top: 2px;
}
/* User-chip menu: right-aligned dropdown with the companion installers */
.user-menu {
position: relative;
}
.user-menu .nav-panel {
right: 0;
left: auto;
min-width: 230px;
}
.user-menu .nav-group-btn {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---- Single-identity expansion: the row becomes the panel header ---- */
li.champion.open > .conn-row .avatar-sm {
width: 56px;
height: 56px;
font-size: 1.1rem;
transition: width 0.15s ease, height 0.15s ease;
}
/* The grid reserves a 34px avatar column — widen it with the promoted avatar
so the image never overlaps the text column. */
li.champion.open > .conn-row.conn-grid {
grid-template-columns: 1rem 56px minmax(0, 1fr);
}
li.champion.open > .conn-row .conn-who a,
li.champion.open > .conn-row .conn-who .conn-name {
font-size: 1.15rem;
font-weight: 700;
}
/* Chips that repeat what the embedded panel's channel strip shows — child
scope, so nested collapsed rows inside an open panel keep their chips */
li.champion.open > .conn-row .chip-dup {
display: none;
}
.channel-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
padding: 2px 0 8px;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 8px;
}
.channel-strip .profile-links,
.channel-strip .profile-stats {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
}
.channel-strip .strip-edit {
margin-left: auto;
}
/* Meetings: matched invitees use the shared contact row/panel */
.meeting-contact-list {
list-style: none;
margin: 6px 0;
padding: 0;
}
/* Slack DM quick-action chip in the channel strip */
.profile-link-slack {
color: var(--accent);
border-color: var(--accent);
opacity: 0.9;
}
/* ---- Campaigns ---- */
.campaign-stage {
margin: 14px 0 18px;
padding: 12px 14px;
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: 10px;
}
.campaign-stage .modal-label {
display: block;
margin: 10px 0 4px;
}
.campaign-preview {
margin-top: 10px;
}
.campaign-sample li .conn-row {
cursor: default;
}
#content-form textarea,
#content-form input {
width: 100%;
margin-bottom: 8px;
}
/* ---- Shared company modal + universal company links ---- */
.company-link {
all: unset;
color: var(--accent);
cursor: pointer;
}
.company-link:hover {
color: var(--accent-hover);
text-decoration: underline;
}
.company-link.company-tag {
all: unset;
cursor: pointer;
display: inline-block;
padding: 2px 10px;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 0.78rem;
color: var(--accent);
}
.company-link.company-tag:hover {
border-color: var(--accent);
}
.company-modal {
max-width: 760px;
width: min(760px, 92vw);
max-height: 84vh;
overflow-y: auto;
position: relative;
}
.company-modal-close {
position: absolute;
top: 10px;
right: 12px;
}
.company-modal-head {
margin-bottom: 10px;
padding-right: 44px;
}
.company-modal-head .profile-links,
.company-modal-head .profile-stats {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
}
/* Contact-name links keep the row's name weight */
.company-link.conn-name {
all: unset;
color: var(--accent);
font-weight: 600;
cursor: pointer;
}
.company-link.conn-name:hover {
color: var(--accent-hover);
text-decoration: underline;
}
/* CSP: style-src has no 'unsafe-inline', so style="" attributes never render —
these classes replaced the last of them (champions.html, extension.html). */
.panel-title { margin-top: 0; font-size: 1.05rem; }
.doc-list { padding-left: 1.15rem; display: grid; gap: 0.5rem; }
ul.doc-list { list-style: disc; }
.spaced-top { margin: 1rem 0 0; }
/* Facepile — overlapping avatar bubble of a company's connected people. */
.facepile { display: flex; align-items: center; margin: 0.4rem 0; }
.facepile-face { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.facepile-face + .facepile-face { margin-left: -10px; }
.facepile-face .avatar { border: 2px solid var(--bg); display: block; }
.facepile-face:hover { transform: translateY(-2px); position: relative; z-index: 2; }
.facepile-more { margin-left: 0.5rem; color: var(--accent); font-size: 0.85rem; }
/* ------------------------------------------------- public pricing page */
/* /pricing.html is signed-out marketing chrome on the app's own stylesheet:
no nav, a brand-only topbar, and link-shaped CTAs. Every rule here is
prefixed .pricing- / .tier- / .faq- so nothing leaks into the app pages.
NOTE: the base `a:visited { color: var(--accent) }` outranks a bare class
selector, so every link-as-button class repeats itself with :visited. */
.pricing-page { max-width: 1160px; }
/* Topbar: no nav on a public page, just a way in. */
.pricing-topbar-link,
.pricing-topbar-link:visited {
margin-left: auto;
color: var(--muted);
text-decoration: none;
font-size: 0.9rem;
padding: 0.35rem 0.8rem;
border: 1px solid var(--border);
border-radius: 8px;
white-space: nowrap;
}
.pricing-topbar-link:hover { color: var(--accent); border-color: var(--accent); }
/* ------------------------------------------------------ link-as-button */
.pricing-btn,
.pricing-btn:visited {
display: inline-block;
padding: 0.7rem 1.35rem;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 600;
text-align: center;
text-decoration: none;
border: 1px solid transparent;
}
.pricing-btn-primary,
.pricing-btn-primary:visited { background: var(--accent); color: var(--on-accent); }
.pricing-btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.pricing-btn-ghost,
.pricing-btn-ghost:visited { background: transparent; color: var(--text); border-color: var(--border); }
.pricing-btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
/* Set by pricing.js while the billing API is still unbuilt. */
.pricing-btn-disabled,
.pricing-btn-disabled:visited { opacity: 0.5; cursor: default; pointer-events: none; }
.pricing-cta-row {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
justify-content: center;
}
/* ------------------------------------------------------------ hero */
.pricing-hero {
text-align: center;
padding: 1.6rem 0 2.6rem;
background: radial-gradient(120% 90% at 50% 0%, rgba(var(--accent-rgb), 0.09), transparent 62%);
}
.pricing-title {
font-size: clamp(1.95rem, 4.6vw, 2.85rem);
line-height: 1.14;
letter-spacing: -0.015em;
margin: 0 0 0.85rem;
}
.pricing-lede {
color: var(--muted);
font-size: 1.02rem;
line-height: 1.65;
max-width: 46rem;
margin: 0 auto 1.35rem;
}
.pricing-lede em { color: var(--text); font-style: normal; font-weight: 600; }
.pricing-stats {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
justify-content: center;
margin-bottom: 1.5rem;
}
.pricing-section-title { font-size: 1.35rem; margin: 2.6rem 0 0.3rem; }
.pricing-section-sub { color: var(--muted); font-size: 0.92rem; margin: 0 0 1.1rem; }
/* ------------------------------------------------------------ tiers */
.tier-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.1rem;
align-items: stretch;
}
@media (max-width: 960px) {
.tier-grid { grid-template-columns: 1fr; }
}
.tier-card {
position: relative;
display: flex;
flex-direction: column;
margin-bottom: 0;
border: 1px solid var(--border);
}
.tier-featured {
border-color: var(--accent);
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--card)) 0%, var(--card) 55%);
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.28), 0 18px 44px rgba(0, 0, 0, 0.45);
}
.tier-badge {
position: absolute;
top: -0.65rem;
left: 1.5rem;
background: var(--accent);
color: var(--on-accent);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
padding: 0.15rem 0.6rem;
border-radius: 999px;
white-space: nowrap;
}
.tier-name {
color: var(--accent);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.tier-price {
font-size: 2.1rem;
font-weight: 700;
line-height: 1.2;
margin-top: 0.25rem;
}
.tier-price-unit {
color: var(--muted);
font-size: 0.85rem;
font-weight: 500;
margin-left: 0.3rem;
}
.tier-tagline {
color: var(--muted);
font-size: 0.88rem;
line-height: 1.5;
margin: 0.5rem 0 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-subtle);
}
.tier-features { margin-bottom: 1.2rem; }
.tier-features li {
position: relative;
padding: 0.33rem 0 0.33rem 1.45rem;
font-size: 0.88rem;
line-height: 1.45;
}
.tier-features li::before {
content: "✓";
position: absolute;
left: 0;
top: 0.33rem;
color: var(--accent);
font-size: 0.85rem;
}
/* Pins every card's CTA to the bottom edge regardless of feature count. */
.tier-cta { margin-top: auto; }
/* -------------------------------------------------- credits explainer */
.pricing-credits {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 1.6rem;
align-items: start;
}
@media (max-width: 800px) {
.pricing-credits { grid-template-columns: 1fr; gap: 1.1rem; }
}
.pricing-caption {
text-align: left;
color: var(--accent);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.09em;
padding-bottom: 0.4rem;
}
.pricing-credit-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.pricing-credit-table td { padding: 0.4rem 0; border-bottom: 1px solid var(--border-subtle); }
.pricing-credit-table tr:last-child td { border-bottom: none; }
.pricing-credit-table td:last-child {
text-align: right;
color: var(--accent);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.pricing-note {
margin: 0 0 0.8rem;
padding: 0.65rem 0.9rem;
background: rgba(var(--accent-rgb), 0.09);
border-left: 2px solid var(--accent);
border-radius: 0 8px 8px 0;
font-size: 0.92rem;
line-height: 1.55;
}
.pricing-credit-copy {
margin: 0;
color: var(--muted);
font-size: 0.87rem;
line-height: 1.6;
}
/* ------------------------------------------------- comparison table */
.pricing-compare { margin: 1.4rem 0 0.5rem; }
.pricing-compare-toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
list-style: none;
cursor: pointer;
padding: 0.55rem 1.1rem;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
font-size: 0.9rem;
font-weight: 600;
}
.pricing-compare-toggle::-webkit-details-marker { display: none; }
.pricing-compare-toggle::after { content: "▾"; color: var(--accent); font-size: 0.7rem; }
.pricing-compare[open] .pricing-compare-toggle::after { content: "▴"; }
.pricing-compare-toggle:hover { border-color: var(--accent); color: var(--accent); }
.pricing-table-wrap {
overflow-x: auto;
margin-top: 1rem;
border: 1px solid var(--border-subtle);
border-radius: 10px;
background: var(--card);
}
.pricing-table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 0.86rem; }
.pricing-table th,
.pricing-table td {
padding: 0.5rem 0.8rem;
text-align: left;
border-bottom: 1px solid var(--border-subtle);
vertical-align: top;
}
.pricing-table thead th {
color: var(--muted);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
border-bottom-color: var(--border);
}
.pricing-table tbody th { font-weight: 400; color: var(--text); }
.pricing-table th + th,
.pricing-table td { text-align: center; }
.pricing-table tbody th:first-child { text-align: left; }
.pricing-table thead th:first-child { text-align: left; }
.pricing-table tr:last-child th,
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-table-section td {
color: var(--accent);
font-size: 0.71rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: left;
padding-top: 1.1rem;
border-bottom-color: var(--border);
}
.pricing-col-team { background: rgba(var(--accent-rgb), 0.05); }
.pricing-yes { color: var(--ok); }
.pricing-no { color: #4d4d4d; }
/* --------------------------------------------------------------- faq */
.faq-list { display: grid; gap: 0.5rem; }
.faq-item {
background: var(--card);
border: 1px solid var(--border-subtle);
border-radius: 10px;
padding: 0 1rem;
}
.faq-item > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
list-style: none;
cursor: pointer;
padding: 0.8rem 0;
font-size: 0.95rem;
font-weight: 600;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
content: "+";
flex: none;
color: var(--accent);
font-size: 1.15rem;
line-height: 1;
}
.faq-item[open] > summary::after { content: "–"; }
.faq-item > summary:hover { color: var(--accent); }
.faq-answer {
margin: 0 0 0.9rem;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.65;
max-width: 54rem;
}
/* ------------------------------------------------------- closing CTA */
.pricing-final {
margin-top: 2.6rem;
text-align: center;
padding: 2rem 1.5rem;
border: 1px solid var(--border);
background:
radial-gradient(120% 150% at 50% 0%, rgba(var(--accent-rgb), 0.11), transparent 62%),
var(--card);
}
.pricing-final-title { font-size: 1.4rem; margin: 0 0 0.5rem; }
.pricing-final-sub {
color: var(--muted);
font-size: 0.93rem;
line-height: 1.6;
max-width: 38rem;
margin: 0 auto 1.2rem;
}
.pricing-fineprint {
color: var(--muted);
font-size: 0.78rem;
text-align: center;
margin: 1.3rem 0 0;
}
/* Login signup toggle */
.login-org-hidden { display: none; }
.linklike { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; }
.linklike:hover { text-decoration: underline; }
/* =====================================================================
Billing & plan (web/billing.html + billing.js) and the platform-admin
Workspaces section (admin.html + admin.js). Append to web/styles.css.
Notes for whoever merges this in:
- No inline styles anywhere: the meters are native