/* ============================================================ BizBot Cockpit — reusable "mission-control" design system Extracted from the admin-ceo OS (/os/base.css + app.css) and made themeable so any vertical's APP / DASHBOARD surfaces can adopt the same dark, living-system look while keeping their own brand accent. HOW TO USE (per vertical): 1. on the app/dashboard page. 2. Set the brand accent once, e.g.: (or in a per-vertical bridge stylesheet — see tierup-cockpit.css). 3. Link this file, then the per-vertical bridge that maps the vertical's existing component classes onto the cockpit look. SCOPING: every rule is gated under `.cockpit`, so linking this file on a page does NOTHING until the opt-in class is present. Marketing pages are never affected. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* ── Design tokens ─────────────────────────────────────────── --bbc-accent is the ONLY value a vertical needs to override. Soft/dim/glow variants are derived from it via color-mix(), so the whole surface re-tints from one variable. */ .cockpit{ /* surfaces */ --bbc-bg:#06080D; --bbc-bg-2:#080B12; --bbc-surface:#0B0F18; --bbc-card:#0E1320; --bbc-card-2:#111828; --bbc-raised:#141C2E; --bbc-border:rgba(255,255,255,.07); --bbc-border-2:rgba(255,255,255,.12); --bbc-hair:rgba(255,255,255,.045); /* elevation (app design-uplift L1) — shared 2-step dark shadow ladder. Cards use box-shadow:var(--bb-elev-1) at rest; raise to -2 on hover. */ --bb-elev-1:0 1px 2px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.045); --bb-elev-2:0 10px 28px -8px rgba(0,0,0,.60), 0 3px 8px -2px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); /* brand accent (override per vertical) — default = BizBot green */ --bbc-accent:#00E87A; --bbc-accent-2:var(--bbc-accent); /* gradient end; verticals may override */ --bbc-accent-soft:color-mix(in srgb, var(--bbc-accent) 12%, transparent); --bbc-accent-line:color-mix(in srgb, var(--bbc-accent) 32%, transparent); --bbc-accent-text:color-mix(in srgb, var(--bbc-accent) 72%, #ffffff); /* lifted for legibility on dark */ --bbc-accent-glow:color-mix(in srgb, var(--bbc-accent) 26%, transparent); /* fixed signal palette — status semantics, independent of brand */ --bbc-cyan:#1FC8E8; --bbc-violet:#8B7CFF; --bbc-amber:#F5B100; --bbc-red:#FF4F5E; /* text */ --bbc-text:#E7EEF7; --bbc-muted:#8A98AC; --bbc-dim:#536074; --bbc-r:14px; --bbc-r-sm:9px; --bbc-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --bbc-sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; background:var(--bbc-bg); color:var(--bbc-text); font-family:var(--bbc-sans); min-height:100vh; position:relative; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } html:has(> body.cockpit), html:has(body.cockpit){background:var(--bbc-bg,#06080D);} /* ── Ambient backdrop (no extra markup needed) ─────────────── */ .cockpit::before{ content:'';position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(1200px 700px at 78% -10%, var(--bbc-accent-soft), transparent 60%), radial-gradient(900px 600px at 8% 110%, color-mix(in srgb, var(--bbc-violet) 7%, transparent), transparent 55%), radial-gradient(700px 500px at 50% 50%, color-mix(in srgb, var(--bbc-cyan) 4%, transparent), transparent 70%); } .cockpit::after{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 85%); mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 85%); } /* ── Thin scrollbars ───────────────────────────────────────── */ .cockpit *::-webkit-scrollbar{width:9px;height:9px} .cockpit *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:9px} .cockpit *::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16)} .cockpit *::-webkit-scrollbar-track{background:transparent} /* ════════════════════════════════════════════════════════════ GENERIC ATOMS — for verticals building app pages from scratch. (Verticals with an existing design system instead map their own classes onto these treatments in a per-vertical bridge.) ════════════════════════════════════════════════════════════ */ .cockpit .ck-eyebrow{ font-family:var(--bbc-mono);font-size:10px;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:var(--bbc-dim); } /* live status dot */ .cockpit .ck-livedot{ display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--bbc-accent); box-shadow:0 0 0 0 var(--bbc-accent-glow);animation:bbcPulse 2.4s infinite;flex:none; } @keyframes bbcPulse{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} /* chip / pill */ .cockpit .ck-chip{ display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px; font-family:var(--bbc-mono);font-size:10.5px;font-weight:600;letter-spacing:.04em; border:1px solid var(--bbc-border-2);color:var(--bbc-muted);white-space:nowrap; } .cockpit .ck-chip.accent{color:var(--bbc-accent-text);border-color:var(--bbc-accent-line);background:var(--bbc-accent-soft)} .cockpit .ck-chip.amber{color:var(--bbc-amber);border-color:color-mix(in srgb,var(--bbc-amber) 30%,transparent);background:color-mix(in srgb,var(--bbc-amber) 8%,transparent)} .cockpit .ck-chip.red{color:var(--bbc-red);border-color:color-mix(in srgb,var(--bbc-red) 30%,transparent);background:color-mix(in srgb,var(--bbc-red) 8%,transparent)} /* card */ .cockpit .ck-card{background:var(--bbc-card);border:1px solid var(--bbc-border);border-radius:var(--bbc-r)} .cockpit .ck-card.pad{padding:18px} /* hover-lift for clickable cards */ .cockpit .ck-lift,.cockpit [data-lift]{transition:transform .16s ease,border-color .16s,box-shadow .16s} .cockpit .ck-lift:hover,.cockpit [data-lift]:hover{transform:translateY(-2px);border-color:var(--bbc-border-2);box-shadow:0 12px 30px rgba(0,0,0,.35)} /* KPI strip */ .cockpit .ck-kstrip{display:grid;gap:1px;background:var(--bbc-border);border:1px solid var(--bbc-border); border-radius:var(--bbc-r);overflow:hidden} .cockpit .ck-kstrip .k{background:var(--bbc-card);padding:15px 16px;position:relative} .cockpit .ck-kstrip .k .l{font-family:var(--bbc-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--bbc-dim)} .cockpit .ck-kstrip .k .v{font-family:var(--bbc-mono);font-size:23px;font-weight:700;letter-spacing:-.02em;margin-top:7px;line-height:1} /* button */ .cockpit .ck-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:8px; font-family:var(--bbc-mono);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer; border:1px solid var(--bbc-border-2);background:transparent;color:var(--bbc-muted);transition:.15s;text-decoration:none} .cockpit .ck-btn:hover{border-color:var(--bbc-border-2);color:var(--bbc-text);background:rgba(255,255,255,.03)} .cockpit .ck-btn.go{background:var(--bbc-accent-soft);border-color:var(--bbc-accent-line);color:var(--bbc-accent-text)} .cockpit .ck-btn.go:hover{background:color-mix(in srgb,var(--bbc-accent) 20%,transparent)} /* table */ .cockpit .ck-table{width:100%;border-collapse:collapse;font-size:13px} .cockpit .ck-table th{text-align:left;padding:11px 14px;font-family:var(--bbc-mono);font-size:9px;letter-spacing:.1em; text-transform:uppercase;color:var(--bbc-dim);border-bottom:1px solid var(--bbc-border);font-weight:600} .cockpit .ck-table td{padding:13px 14px;border-bottom:1px solid var(--bbc-hair);vertical-align:middle} .cockpit .ck-table tr:last-child td{border-bottom:none} .cockpit .ck-table tr:hover td{background:rgba(255,255,255,.018)} /* text-like form controls default to white when no bg is set — dark them everywhere */ .cockpit input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]), .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)} .cockpit ::placeholder{color:var(--bbc-dim)} /* ── interaction polish (accessibility) ───────────────────── */ .cockpit a:focus-visible,.cockpit button:focus-visible, .cockpit .ck-btn:focus-visible,.cockpit [tabindex]:focus-visible{ outline:2px solid color-mix(in srgb,var(--bbc-cyan) 60%,transparent);outline-offset:2px;border-radius:6px} .cockpit input:focus-visible,.cockpit textarea:focus-visible,.cockpit select:focus-visible{ outline:2px solid color-mix(in srgb,var(--bbc-cyan) 60%,transparent);outline-offset:2px} /* entrance + alive motion (respect reduced-motion) */ @keyframes bbcDriftUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} .cockpit .ck-drift{animation:bbcDriftUp .35s ease both} @media(prefers-reduced-motion:reduce){ .cockpit *,.cockpit *::before,.cockpit *::after{ animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} }