@charset "UTF-8"; /* ============================================================ Funnel Opt-in Tracker — monochrome instrument panel ============================================================ */ /* ── Theming ────────────────────────────────────────────────────────────────── :root IS dark — the default, and what an anonymous / signed-out visitor always gets. Light is an opt-in override keyed off ``, stamped by the inline script in index.html (before first paint, so a reload never flashes) and toggled from the rail. Signing out clears the key → back to dark. ⚠️ Every colour a rule needs MUST come from a token below, in BOTH blocks. A literal hex/rgba in a rule is a dark-only value that silently survives the theme flip — that's why the "on accent fill" / wash / hairline tokens exist rather than inline rgba(255,255,255,…): white-on-white is invisible, and nothing warns you. */ :root { /* Tell the browser which way native popups (select dropdowns, confirm() dialogs, date inputs, scrollbars, autofill) should render — the light block flips it. */ color-scheme: dark; /* Black-and-white base, colored accents. The canvas, surfaces and BUTTONS are pure neutral grays (mono); color is reserved for accents that carry meaning — white for active/key-metric, green for cash, red for danger, violet tag. */ --bg: #0a0a0a; /* near-black canvas */ --surface: #161616; /* card */ --surface-2: #1e1e1e; /* elevated (card header / chips) */ --line: #2e2e2e; /* hairline */ --line-soft: #202020; /* faint internal divider */ --ink: #ffffff; /* white — headings + headline numbers */ --text: #d6d6d6; /* body */ --muted: #8a8a8a; /* secondary text */ --faint: #5a5a5a; /* eyebrow labels, faintest */ --accent: #ffffff; /* white accent — active nav, key metrics, focus, links */ --accent-dim:#cfcfcf; /* dimmed white */ --accent-soft:rgba(255,255,255,0.10); --accent-ink:#0a0a0a; /* dark text on white fills */ --accent-edge:rgba(255,255,255,0.55); /* the lit top edge of the one accent tile */ --violet: #c4b5fd; /* masterclass tag */ --violet-line:rgba(196,181,253,0.35); --good: #58cc9a; /* positive — cash / ROAS / best-in-column (green) */ --warn: #e5645e; /* error / danger (red) */ --link: #e0e0e0; /* inline links (bright neutral) */ /* Text/fills that sit ON an accent-filled surface (white pill in dark, near-black pill in light) — they invert with the theme, opposite to --text & friends. */ --on-accent-2: rgba(10,10,10,0.62); /* secondary text on an accent fill */ --on-accent-3: rgba(10,10,10,0.5); /* faintest text on an accent fill */ --on-accent-strong:#3a3a3a; /* badge text on an accent fill */ --on-accent-wash: rgba(0,0,0,0.06); /* badge fill on an accent fill */ --on-accent-line: rgba(0,0,0,0.14); /* hairline / disc on an accent fill */ /* Translucent neutrals for the pill controls — ink-coloured, so they invert. */ --wash-1: rgba(255,255,255,0.05); /* button hover fill */ --wash-2: rgba(255,255,255,0.08); /* disc fill / data-bar */ --wash-3: rgba(255,255,255,0.10); /* pressed segment fill */ --hair-1: rgba(255,255,255,0.16); /* resting pill border */ --hair-2: rgba(255,255,255,0.20); /* date-picker control border */ --hair-3: rgba(255,255,255,0.30); /* hovered pill border */ --hair-4: rgba(255,255,255,0.40); /* pressed segment border */ /* Speed-to-lead buckets, best → worst. A ramp, not five arbitrary hues: the bar is an ordered distribution, so the colour has to carry the order or it's just decoration. */ --spd-1: #58cc9a; --spd-2: #93cf85; --spd-3: #cfc177; --spd-4: #e0975c; --spd-5: #e5645e; --menu-bg: #1c1e22; /* native — the choice carries a real consequence (admins can grant access), so it should be visible, not hidden in a menu. */ .set-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .set-role { cursor: pointer; } .set-role input { position: absolute; opacity: 0; pointer-events: none; } .set-role-box { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; height: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color .14s var(--ease), background .14s var(--ease); } .set-role:hover .set-role-box { border-color: var(--accent-dim); } .set-role input:checked + .set-role-box { border-color: var(--accent); background: var(--accent-soft); } .set-role input:focus-visible + .set-role-box { outline: 2px solid var(--accent); outline-offset: 2px; } .set-role-t { font-size: 0.82rem; font-weight: 600; color: var(--text); } .set-role input:checked + .set-role-box .set-role-t { color: var(--ink); } .set-role-s { font-size: 0.66rem; color: var(--faint); line-height: 1.3; } .set-addbtn { width: 100%; padding: 9px 14px; cursor: pointer; background: var(--ink); color: var(--accent-ink); border: 1px solid var(--ink); border-radius: var(--r-md); font-family: var(--font); font-size: 0.85rem; font-weight: 600; transition: opacity .14s var(--ease); } .set-addbtn:hover { opacity: 0.88; } .set-addbtn:disabled { opacity: 0.5; cursor: default; } .set-addbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .set-msg { font-size: 0.76rem; color: var(--good); margin-top: calc(-1 * var(--space-2)); } .set-msg.is-bad { color: var(--warn); } /* People list. */ .set-list { margin-top: calc(-1 * var(--space-2)); max-height: 220px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: var(--r-md); } .set-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); } .set-row:last-child { border-bottom: 0; } .set-em { flex: 1; min-width: 0; font-size: 0.79rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .set-tag { flex-shrink: 0; font-family: var(--mono); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; } .set-tag.is-admin { color: var(--violet); border-color: var(--violet-line); } .set-tag.is-locked { color: var(--faint); } .set-rm { flex-shrink: 0; cursor: pointer; padding: 3px 9px; background: transparent; color: var(--faint); border: 1px solid var(--line); border-radius: var(--r-sm, 7px); font-family: var(--font); font-size: 0.7rem; transition: color .14s var(--ease), border-color .14s var(--ease); } .set-rm:hover { color: var(--warn); border-color: rgba(229,100,94,0.45); } .set-rm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .set-empty { padding: 14px 10px; font-size: 0.76rem; color: var(--faint); text-align: center; }