/* ============================================================ TierUp · Cockpit bridge Maps TierUp's existing design system (tu-* classes + --tu-* tokens) onto the BizBot Cockpit look, keeping TierUp's PURPLE brand accent. Scoped under `.cockpit` and loaded ONLY on app / dashboard pages — never on marketing pages (which keep the light tierup-design.css). Load order on the page: 1. /css/tierup-design.css (base design system) 2. /css/tierup-cockpit.css (this file — wins via .cockpit scope) And add class="cockpit" to . ============================================================ */ @import url('/css/bizbot-cockpit.css'); /* ── Token remap: flip TierUp's light tokens to cockpit-dark ── Inline styles + JS-injected markup throughout the app reference these vars, so re-pointing them re-themes that content for free. Brand purple is preserved (lifted slightly for legibility on near-black); the ambient glow uses the true brand purple. */ body.cockpit{ --bbc-accent:#6D28D9; /* TierUp brand purple — drives the ambient backdrop */ --bbc-accent-2:#F59E0B; /* TierUp gold — gradient partner */ --tu-bg:#06080D; --tu-bg-elev:#0E1320; /* cards / panels */ --tu-surface:#111828; /* nested surfaces */ --tu-ink:#E7EEF7; --tu-ink-2:#CDD6E2; --tu-ink-3:#8A98AC; /* muted */ --tu-ink-4:#536074; /* dim */ --tu-ink-soft:#CDD6E2; --tu-line:rgba(255,255,255,.07); --tu-line-2:rgba(255,255,255,.12); --tu-purple:#8B5CF6; /* lifted from #6D28D9 for on-dark legibility (same hue) */ --tu-purple-dark:#7C3AED; --tu-purple-soft:color-mix(in srgb,#8B5CF6 15%,transparent); --tu-gold-soft:color-mix(in srgb,var(--tu-gold) 16%,transparent); --tu-shadow-sm:0 2px 8px rgba(0,0,0,.4); --tu-shadow:0 12px 30px rgba(0,0,0,.5); --tu-shadow-purple:0 8px 24px color-mix(in srgb,#8B5CF6 30%,transparent); /* adopt cockpit typography across TierUp's own components */ --tu-font-sans:var(--bbc-sans); --tu-font-display:var(--bbc-sans); } /* ── Top nav → dark glassy topbar ─────────────────────────── */ .cockpit .tu-nav{ background:color-mix(in srgb,var(--bbc-surface) 80%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--bbc-border);position:sticky;top:0;z-index:50; } .cockpit .tu-nav-logo{color:var(--bbc-text)} .cockpit .tu-nav-logo .accent{color:var(--bbc-accent-text)} .cockpit .tu-nav-links a{color:var(--bbc-muted)} .cockpit .tu-nav-links a:hover{color:var(--bbc-text)} /* ── Panels / cards ───────────────────────────────────────── */ .cockpit .tu-panel{ background:var(--bbc-card);border:1px solid var(--bbc-border);box-shadow:var(--bb-elev-1); } .cockpit .tu-panel h3{color:var(--bbc-text)} /* clickable panels (e.g. the Monthly Review link) get the hover-lift */ .cockpit a.tu-panel{transition:transform .16s ease,border-color .16s,box-shadow .16s} .cockpit a.tu-panel:hover{transform:translateY(-2px);border-color:var(--bbc-border-2);box-shadow:0 12px 30px rgba(0,0,0,.35)} /* ── KPI stat tiles ───────────────────────────────────────── */ .cockpit .tu-stat{ background:var(--bbc-card);border:1px solid var(--bbc-border); border-top:3px solid var(--bbc-accent-text);box-shadow:var(--bb-elev-1); } .cockpit .tu-stat:nth-child(4){border-top-color:var(--bbc-cyan)} .cockpit .tu-stat:hover{box-shadow:0 14px 34px rgba(0,0,0,.45)} .cockpit .tu-stat-l{color:var(--bbc-dim);font-family:var(--bbc-mono);font-size:11px;letter-spacing:.04em} /* ── Tables ───────────────────────────────────────────────── */ .cockpit .tu-table th{ color:var(--bbc-dim);font-family:var(--bbc-mono);font-size:9px;letter-spacing:.1em; border-bottom:1px solid var(--bbc-border); } .cockpit .tu-table td{border-bottom:1px solid var(--bbc-hair)} .cockpit .tu-table tr:hover td{background:rgba(255,255,255,.02)} /* ── Rank ladder ──────────────────────────────────────────── */ .cockpit .tu-rank{background:var(--bbc-card-2)} .cockpit .tu-rank.current{ background:linear-gradient(90deg,var(--tu-purple-soft),transparent); border:1px solid var(--bbc-accent-line);box-shadow:0 0 22px var(--bbc-accent-glow); } .cockpit .tu-rank-name{color:var(--bbc-text)} .cockpit .tu-rank-pv{color:var(--bbc-muted);font-family:var(--bbc-mono)} .cockpit .tu-rank-medal{background:var(--tu-gold-soft);color:var(--tu-gold)} .cockpit .tu-rank.current .tu-rank-medal{background:var(--tu-purple);color:#fff} /* ── Form fields (rank modal) ─────────────────────────────── */ .cockpit .tu-field label{color:var(--bbc-dim)} .cockpit .tu-field input,.cockpit .tu-field select,.cockpit .tu-field textarea{ background:var(--bbc-bg-2);border:1px solid var(--bbc-border-2);color:var(--bbc-text); } .cockpit .tu-field input:focus,.cockpit .tu-field select:focus,.cockpit .tu-field textarea:focus{ border-color:var(--bbc-accent-line); } /* ── Buttons ──────────────────────────────────────────────── */ .cockpit .tu-btn-ghost{color:var(--bbc-text);border:1px solid var(--bbc-border-2);background:transparent} .cockpit .tu-btn-ghost:hover{background:rgba(255,255,255,.05);border-color:var(--bbc-accent-line);color:var(--bbc-accent-text)} /* ── Modal (rank ladder) — inline style sets background:#fff ── */ .cockpit .modal{background:var(--bbc-raised)!important;border:1px solid var(--bbc-border-2)} /* ── Content-prompt eyebrow uses inline color:var(--tu-purple-dark); lift it for contrast on the dark purple tint ────────────── */ .cockpit #contentPrompt > div:first-child{color:var(--bbc-accent-text)!important} /* gentle entrance for the dashboard body */ .cockpit .tu-dash-wrap{animation:bbcDriftUp .35s ease both} /* ════════════════════════════════════════════════════════════ APP-PAGE COMPONENTS — pipeline / scripts / content / compliance / fast-start / planner / review each define their own page-local classes (often with hardcoded #fff). Re-skin them here so the whole TierUp app is consistent. ════════════════════════════════════════════════════════════ */ /* text-like form controls anywhere in the app default to white when no background is set (review .mbr-field input, compliance .cc-ta, etc.) */ .cockpit input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), .cockpit textarea,.cockpit select{ background:var(--bbc-bg-2);color:var(--bbc-text);border-color:var(--bbc-border-2); } .cockpit input:focus,.cockpit textarea:focus,.cockpit select:focus{border-color:var(--bbc-accent-line)!important} /* pipeline (kanban) */ .cockpit .ccard{background:var(--bbc-card-2);border-color:var(--bbc-border)} .cockpit .pipe-empty{background:var(--bbc-card);border-color:var(--bbc-border);box-shadow:none} /* scripts */ .cockpit .chip{background:var(--bbc-bg-2);border-color:var(--bbc-border-2);color:var(--bbc-muted)} .cockpit .script{background:var(--bbc-card);border-color:var(--bbc-border)} .cockpit .sc-toolbar{background:var(--bbc-card);border-color:var(--bbc-border);box-shadow:none} .cockpit .tag{color:var(--bbc-accent-text)} .cockpit .sc-fill{color:var(--tu-gold)} .cockpit .ph{background:rgba(255,255,255,.08);color:var(--bbc-muted)} /* content calendar */ .cockpit .day{background:var(--bbc-card-2);border-color:var(--bbc-border)} .cockpit .day.posted{background:color-mix(in srgb,var(--tu-success) 14%,transparent);border-color:color-mix(in srgb,var(--tu-success) 40%,transparent)} .cockpit .day-tag{color:var(--bbc-accent-text)} .cockpit .modal .meta{color:var(--bbc-accent-text)} /* compliance — invert the inline highlighter + status flags for dark */ .cockpit code.cc-c{background:var(--bbc-bg-2);border-color:var(--bbc-border);color:var(--bbc-text)} .cockpit .cc-preview{background:var(--bbc-bg-2);border-color:var(--bbc-border);color:var(--bbc-text)} .cockpit .cc-hl.high{background:color-mix(in srgb,var(--bbc-red) 22%,transparent);box-shadow:inset 0 -2px 0 var(--bbc-red);color:#fff} .cockpit .cc-hl.med{background:color-mix(in srgb,var(--bbc-amber) 22%,transparent);box-shadow:inset 0 -2px 0 var(--bbc-amber);color:#fff} .cockpit .cc-hl.low{background:rgba(255,255,255,.10);box-shadow:inset 0 -2px 0 var(--bbc-dim);color:var(--bbc-text)} .cockpit .cc-count{background:rgba(255,255,255,.08);color:var(--bbc-dim)} .cockpit .cc-flag{background:var(--bbc-card-2)!important} .cockpit .cc-flag > div:nth-child(2),.cockpit .cc-flag > div:nth-child(3){color:var(--bbc-muted)!important} .cockpit .cc-flag strong{color:var(--bbc-text)} .cockpit #cc-ids-helper{background:var(--bbc-accent-soft)!important;border-color:var(--bbc-accent-line)!important;color:var(--bbc-text)!important} .cockpit #cc-ids-helper a{color:var(--bbc-accent-text)!important} /* fast-start */ .cockpit .fs-prog-wrap{background:var(--bbc-card);border-color:var(--bbc-border)} .cockpit .fs-phase{background:var(--bbc-card);border-color:var(--bbc-border)} .cockpit .fs-phase .sub{color:var(--bbc-accent-text)} /* planner — .pl-result is already a dark hero; fix the gold callout text */ .cockpit .pl-sustain{color:var(--bbc-text)} .cockpit .pl-sustain b{color:var(--tu-gold)}