/* ============================================================ Radiance · Cockpit bridge Maps Radiance's design system (r-* classes + --rose/--plum/etc. tokens) onto the BizBot Cockpit look, keeping Radiance's ROSE brand accent. Scoped under `.cockpit`, loaded ONLY on app / dashboard pages — never marketing (which keeps light radiance-design.css). Page wiring: 1. /css/radiance-design.css (base) 2. /css/radiance-cockpit.css (this file — wins via .cockpit scope) + ============================================================ */ @import url('/css/bizbot-cockpit.css'); body.cockpit{ --bbc-accent:#E8B4B8; /* Radiance rose — drives ambient backdrop + accents */ --bbc-accent-2:#D89599; /* flip Radiance's light tokens to cockpit-dark (inline + JS markup re-themes for free) */ --bg:#06080D; --ink:#E7EEF7; --gray:#8A98AC; --border:rgba(255,255,255,.07); --rose:#E8B4B8; /* accent (legible on dark) */ --rose-dark:#D89599; --plum:#EAC2D8; /* lifted orchid — was #4A1942 (invisible on dark); used as text + titles */ /* --plum-deep stays dark (#2E0E29): it's text ON light rose buttons */ --shadow:0 12px 30px rgba(0,0,0,.5); --bg-elev:var(--bbc-card); /* for pages that inline-style cards via var(--bg-elev,#fff) */ } /* ── Marketing/app top nav → dark glassy ─────────────────── */ .cockpit .r-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); } /* ── Dashboard shell ─────────────────────────────────────── */ .cockpit .r-dash{background:var(--bbc-bg)} .cockpit .r-dash-header, .cockpit .r-topbar{ background:color-mix(in srgb,var(--bbc-surface) 82%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--bbc-border); } /* ── Cards / panels / metrics / stats ────────────────────── */ .cockpit .r-card, .cockpit .r-panel, .cockpit .r-metric, .cockpit .r-stat{background:var(--bbc-card);border:1px solid var(--bbc-border);box-shadow:var(--bb-elev-1)} .cockpit .r-card[href],.cockpit a.r-card{transition:transform .16s ease,border-color .16s,box-shadow .16s} .cockpit .r-card[href]:hover,.cockpit a.r-card:hover{transform:translateY(-2px);border-color:var(--bbc-border-2);box-shadow:0 12px 30px rgba(0,0,0,.35)} .cockpit .r-card-icon{background:linear-gradient(135deg,var(--bbc-accent),color-mix(in srgb,var(--bbc-accent) 45%,transparent))} .cockpit .r-stat-label,.cockpit .r-dash-sub{color:var(--bbc-dim)} .cockpit .r-stats{background:transparent;border-color:var(--bbc-border)} /* ── Quick-action buttons (dashboard) ────────────────────── */ .cockpit .r-qa-btn{background:var(--bbc-card-2);border:1px solid var(--bbc-border);color:var(--bbc-text)} .cockpit .r-qa-btn:hover{border-color:var(--bbc-accent-line);color:var(--bbc-accent-text)} /* ── Buttons ─────────────────────────────────────────────── */ .cockpit .r-btn-primary{background:var(--rose);color:var(--plum-deep)} /* rose fill, deep-plum text (high contrast) */ .cockpit .r-btn-ghost{background:transparent;color:var(--bbc-text);border:1px solid var(--bbc-border-2)} .cockpit .r-btn-ghost:hover{border-color:var(--bbc-accent-line);color:var(--bbc-accent-text)} /* ── Tables ──────────────────────────────────────────────── */ .cockpit .r-table th{color:var(--bbc-dim);font-family:var(--bbc-mono);font-size:10px;letter-spacing:.08em; text-transform:uppercase;border-bottom:1px solid var(--bbc-border)} .cockpit .r-table td{border-bottom:1px solid var(--bbc-hair)} .cockpit .r-table tr:hover td{background:rgba(255,255,255,.02)} /* ── Status chips → translucent dark tints w/ light text ─── */ .cockpit .r-chip-confirmed{background:color-mix(in srgb,#10B981 16%,transparent);color:#34D399} .cockpit .r-chip-pending{background:color-mix(in srgb,var(--bbc-amber) 16%,transparent);color:var(--bbc-amber)} .cockpit .r-chip-new{background:color-mix(in srgb,var(--bbc-accent) 18%,transparent);color:var(--bbc-accent-text)} .cockpit .r-chip-checkedin{background:color-mix(in srgb,var(--bbc-cyan) 16%,transparent);color:var(--bbc-cyan)} .cockpit .r-chip-done{background:rgba(255,255,255,.08);color:var(--bbc-muted)} /* ── Alerts ──────────────────────────────────────────────── */ .cockpit .r-alert-warn{background:color-mix(in srgb,var(--bbc-amber) 10%,transparent); border:1px solid color-mix(in srgb,var(--bbc-amber) 35%,transparent);color:#F8D77A} .cockpit .r-alert-info{background:color-mix(in srgb,var(--bbc-cyan) 10%,transparent); border:1px solid color-mix(in srgb,var(--bbc-cyan) 30%,transparent);color:#A9E3F0} .cockpit .r-alert-rose{background:var(--bbc-accent-soft); border:1px solid var(--bbc-accent-line);color:var(--bbc-accent-text)} /* ── Quick-action icon tiles → dark tile + rose icon (cockpit style) ─ */ .cockpit .r-qa-icon{background:var(--bbc-card-2);border:1px solid var(--bbc-border)} .cockpit .r-qa-icon .bbi{color:var(--bbc-accent-text)} /* gentle entrance */ .cockpit .r-dash-main{animation:bbcDriftUp .35s ease both} /* ════════════════════════════════════════════════════════════ APP-PAGE COMPONENTS — clients / appointments / photos / treatments each define bespoke page-local classes (most with hardcoded #fff). Re-skin them for the dark cockpit. ════════════════════════════════════════════════════════════ */ /* card-like surfaces (modals, photo/tx/package cards, tabs, tiles, zones) */ .cockpit .r-modal, .cockpit .r-photo-card,.cockpit .r-tx-card,.cockpit .r-pkg-item, .cockpit .r-seg-tab,.cockpit .r-cat-tab, .cockpit .r-status-step,.cockpit .r-prep-tag, .cockpit .r-photo-action-btn,.cockpit .r-share-opt,.cockpit .r-upload-zone, .cockpit .r-photo-placeholder{ background:var(--bbc-card-2);border-color:var(--bbc-border);color:var(--bbc-text) } .cockpit .r-modal{background:var(--bbc-raised);border:1px solid var(--bbc-border-2)} /* active tabs → accent */ .cockpit .r-seg-tab.active,.cockpit .r-cat-tab.active{ background:var(--bbc-accent-soft);border-color:var(--bbc-accent-line);color:var(--bbc-accent-text) } /* subtle hover / today / upsell / AI surfaces */ .cockpit .r-client-row:hover{background:rgba(255,255,255,.03)} .cockpit .r-photo-action-btn:hover,.cockpit .r-share-opt:hover, .cockpit .r-upload-zone:hover{background:rgba(255,255,255,.05);border-color:var(--bbc-accent-line)} .cockpit .r-cal-cell.today-col,.cockpit .r-cal-day-header.today, .cockpit .r-tx-upsell,.cockpit .r-ai-box{ background:var(--bbc-accent-soft);border-color:var(--bbc-accent-line) } /* avatars / photo thumbs → rose-tinted accent tiles */ .cockpit .r-client-avatar,.cockpit .r-client-photo{ background:var(--bbc-accent-soft);color:var(--bbc-accent-text) } /* extra status chips → translucent dark tints + light text */ .cockpit .r-chip-active{background:color-mix(in srgb,#10B981 16%,transparent);color:#34D399} .cockpit .r-chip-vip{background:var(--bbc-accent-soft);color:var(--bbc-accent-text)} .cockpit .r-chip-lapsed,.cockpit .r-allergy-tag{ background:color-mix(in srgb,var(--bbc-red) 16%,transparent);color:#FF8A93 } /* consent status badges (photos) */ .cockpit .r-consent-check.consent-ok{background:color-mix(in srgb,#10B981 16%,transparent);color:#34D399} .cockpit .r-consent-check.consent-warn{background:color-mix(in srgb,var(--bbc-amber) 16%,transparent);color:var(--bbc-amber)} /* treatment category badges → translucent hue tints (keep colour-coding) */ .cockpit .badge-injectables{background:var(--bbc-accent-soft);color:var(--bbc-accent-text)} .cockpit .badge-laser{background:color-mix(in srgb,var(--bbc-cyan) 16%,transparent);color:var(--bbc-cyan)} .cockpit .badge-facials{background:color-mix(in srgb,#10B981 16%,transparent);color:#34D399} .cockpit .badge-body{background:color-mix(in srgb,var(--bbc-amber) 16%,transparent);color:var(--bbc-amber)} .cockpit .badge-wellness{background:color-mix(in srgb,var(--bbc-violet) 18%,transparent);color:#B7A9FF} /* ── Recessed/inset surfaces authored with background:var(--bg) (clients profile fields + comms log, appointments calendar gutters + prep list). --bg remaps to the page bg (#06080D) on dark → they rendered near-black- on-black. Map to the raised inset tier so depth/grouping reads. ───────── */ .cockpit .r-profile-field,.cockpit .r-comm-item, .cockpit .r-cal-corner,.cockpit .r-cal-day-header,.cockpit .r-cal-time-col, .cockpit .r-prep-item{background:var(--bbc-card-2)} /* ── Dashboard revenue bars: pale plum→rose gradient washed out on dark → rose accent with depth + legible value labels. ───────────────────────── */ .cockpit .r-bar{background:linear-gradient(to top,var(--bbc-accent-2,#D89599),var(--bbc-accent))} .cockpit .r-bar-val{color:var(--bbc-accent-text)}