/* ============================================================
Go360 Live — Bootstrap 5 Theme (CSS Custom Properties)
============================================================
Drop-in CSS file for Bootstrap 5.3+.
Usage:
Light mode: (default)
Dark mode:
============================================================ */
/* ── Brand Palette Tokens ──────────────────────────────────── */
:root {
/* Core brand colors — always available regardless of mode */
--go360-teal: #22B2A3;
--go360-deep-teal: #006C6F;
--go360-midnight: #083049;
--go360-aqua: #7FF3E8;
--go360-live-red: #E91F2F;
--go360-amber: #F5A623;
--go360-green: #27AE60;
--go360-error: #DC2626;
--go360-info: #3B82F6;
/* Teal ramp */
--go360-teal-50: #E0F7F4;
--go360-teal-100: #B2EDE6;
--go360-teal-200: #6DD8CC;
--go360-teal-300: #40C9B8;
--go360-teal-400: #22B2A3;
--go360-teal-500: #1A9A8E;
--go360-teal-600: #006C6F;
--go360-teal-700: #005A5C;
--go360-teal-800: #004D4F;
--go360-teal-900: #003B3D;
/* Navy ramp */
--go360-navy-50: #E8EEF3;
--go360-navy-100: #C5D3E0;
--go360-navy-200: #8BA7C1;
--go360-navy-300: #4C83B0;
--go360-navy-400: #1B5A87;
--go360-navy-500: #0F4268;
--go360-navy-600: #083049;
--go360-navy-700: #06253A;
--go360-navy-800: #041B2B;
--go360-navy-900: #02111C;
/* Typography */
--go360-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--go360-font-mono: "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--go360-font-display: "Montserrat", "Inter", system-ui, sans-serif;
}
/* ── Light Mode (default) ──────────────────────────────────── */
[data-bs-theme="light"],
:root {
/* Bootstrap semantic overrides */
--bs-primary: var(--go360-teal);
--bs-primary-rgb: 34, 178, 163;
--bs-secondary: var(--go360-midnight);
--bs-secondary-rgb: 8, 48, 73;
--bs-success: var(--go360-green);
--bs-success-rgb: 39, 174, 96;
--bs-info: var(--go360-info);
--bs-info-rgb: 59, 130, 246;
--bs-warning: var(--go360-amber);
--bs-warning-rgb: 245, 166, 35;
--bs-danger: var(--go360-live-red);
--bs-danger-rgb: 233, 31, 47;
/* Surfaces */
--bs-body-bg: #F8FAFC;
--bs-body-bg-rgb: 248, 250, 252;
--bs-body-color: #475569;
--bs-body-color-rgb: 71, 85, 105;
/* Headings */
--bs-heading-color: var(--go360-midnight);
/* Links */
--bs-link-color: var(--go360-teal);
--bs-link-color-rgb: 34, 178, 163;
--bs-link-hover-color: var(--go360-deep-teal);
--bs-link-hover-color-rgb: 0, 108, 111;
/* Borders */
--bs-border-color: #CBD5E1;
--bs-border-color-translucent: rgba(8, 48, 73, 0.12);
/* Card */
--bs-card-bg: #FFFFFF;
--bs-card-border-color: #CBD5E1;
--bs-card-cap-bg: transparent;
/* Code */
--bs-code-color: var(--go360-deep-teal);
/* Focus ring */
--bs-focus-ring-color: rgba(34, 178, 163, 0.25);
/* Emphasis / muted */
--bs-emphasis-color: var(--go360-midnight);
--bs-secondary-color: rgba(71, 85, 105, 0.75);
--bs-tertiary-color: rgba(71, 85, 105, 0.5);
--bs-tertiary-bg: #E8EDEF;
/* Semantic surface tokens */
--go360-surface: #FFFFFF;
--go360-surface-raised: #FFFFFF;
--go360-surface-sunken: #F1F5F4;
--go360-surface-overlay: rgba(8, 48, 73, 0.04);
--go360-text-primary: #083049;
--go360-text-secondary: #475569;
--go360-text-muted: #94A3B8;
--go360-text-on-primary: #FFFFFF;
--go360-border: #CBD5E1;
--go360-border-subtle: #E8EDEF;
--go360-shadow-color: rgba(8, 48, 73, 0.08);
}
/* ── Dark Mode ─────────────────────────────────────────────── */
[data-bs-theme="dark"] {
/* Bootstrap semantic overrides */
--bs-primary: var(--go360-teal);
--bs-primary-rgb: 34, 178, 163;
--bs-secondary: var(--go360-navy-300);
--bs-secondary-rgb: 76, 131, 176;
--bs-success: #34D399;
--bs-success-rgb: 52, 211, 153;
--bs-info: #60A5FA;
--bs-info-rgb: 96, 165, 250;
--bs-warning: #FBBF24;
--bs-warning-rgb: 251, 191, 36;
--bs-danger: #F87171;
--bs-danger-rgb: 248, 113, 113;
/* Surfaces */
--bs-body-bg: #041B2B;
--bs-body-bg-rgb: 4, 27, 43;
--bs-body-color: #C5D3E0;
--bs-body-color-rgb: 197, 211, 224;
/* Headings */
--bs-heading-color: #E8EEF3;
/* Links */
--bs-link-color: var(--go360-teal-200);
--bs-link-color-rgb: 109, 216, 204;
--bs-link-hover-color: var(--go360-aqua);
--bs-link-hover-color-rgb: 127, 243, 232;
/* Borders */
--bs-border-color: #1B3A52;
--bs-border-color-translucent: rgba(34, 178, 163, 0.15);
/* Card */
--bs-card-bg: #06253A;
--bs-card-border-color: #1B3A52;
--bs-card-cap-bg: rgba(34, 178, 163, 0.06);
/* Code */
--bs-code-color: var(--go360-aqua);
/* Focus ring */
--bs-focus-ring-color: rgba(34, 178, 163, 0.4);
/* Emphasis / muted */
--bs-emphasis-color: #E8EEF3;
--bs-secondary-color: rgba(197, 211, 224, 0.75);
--bs-tertiary-color: rgba(197, 211, 224, 0.5);
--bs-tertiary-bg: #0F4268;
/* Semantic surface tokens */
--go360-surface: #06253A;
--go360-surface-raised: #0F3450;
--go360-surface-sunken: #02111C;
--go360-surface-overlay: rgba(34, 178, 163, 0.06);
--go360-text-primary: #E8EEF3;
--go360-text-secondary: #C5D3E0;
--go360-text-muted: #8BA7C1;
--go360-text-on-primary: #FFFFFF;
--go360-border: #1B3A52;
--go360-border-subtle: #0F3450;
--go360-shadow-color: rgba(0, 0, 0, 0.3);
/* Component-specific dark adjustments */
--bs-table-bg: transparent;
--bs-table-striped-bg: rgba(34, 178, 163, 0.04);
--bs-table-hover-bg: rgba(34, 178, 163, 0.08);
--bs-table-border-color: #1B3A52;
}
/* ── Bootstrap Component Overrides ─────────────────────────── */
/* Typography */
body {
font-family: var(--go360-font-sans);
}
/* Buttons — primary */
.btn-primary {
--bs-btn-bg: var(--go360-teal);
--bs-btn-border-color: var(--go360-teal);
--bs-btn-hover-bg: var(--go360-deep-teal);
--bs-btn-hover-border-color: var(--go360-deep-teal);
--bs-btn-active-bg: var(--go360-teal-700);
--bs-btn-active-border-color: var(--go360-teal-700);
--bs-btn-disabled-bg: var(--go360-teal-200);
--bs-btn-disabled-border-color: var(--go360-teal-200);
font-weight: 600;
}
.btn-outline-primary {
--bs-btn-color: var(--go360-teal);
--bs-btn-border-color: var(--go360-teal);
--bs-btn-hover-bg: var(--go360-teal);
--bs-btn-hover-border-color: var(--go360-teal);
--bs-btn-active-bg: var(--go360-deep-teal);
--bs-btn-active-border-color: var(--go360-deep-teal);
font-weight: 600;
}
/* Buttons — secondary (navy) */
.btn-secondary {
--bs-btn-bg: var(--go360-midnight);
--bs-btn-border-color: var(--go360-midnight);
--bs-btn-hover-bg: var(--go360-navy-700);
--bs-btn-hover-border-color: var(--go360-navy-700);
--bs-btn-active-bg: var(--go360-navy-800);
font-weight: 600;
}
/* Buttons — danger / LIVE */
.btn-danger {
--bs-btn-bg: var(--go360-live-red);
--bs-btn-border-color: var(--go360-live-red);
font-weight: 600;
}
/* Navbar dark (navy) */
.navbar-go360,
.navbar[data-bs-theme="dark"] {
--bs-navbar-bg: var(--go360-midnight);
--bs-navbar-color: rgba(255, 255, 255, 0.85);
--bs-navbar-hover-color: #FFFFFF;
--bs-navbar-active-color: var(--go360-aqua);
--bs-navbar-brand-color: #FFFFFF;
background-color: var(--go360-midnight) !important;
}
/* Cards */
.card {
--bs-card-border-radius: 0.75rem;
--bs-card-spacer-y: 1.25rem;
--bs-card-spacer-x: 1.25rem;
}
/* Form controls */
.form-control:focus,
.form-select:focus {
border-color: var(--go360-teal);
box-shadow: 0 0 0 0.2rem rgba(34, 178, 163, 0.25);
}
/* Badges */
.badge.bg-primary {
background-color: var(--go360-teal) !important;
}
/* Tables */
.table {
--bs-table-bg: transparent;
}
/* Progress bars */
.progress-bar {
background-color: var(--go360-teal);
}
/* Alerts */
.alert-primary {
--bs-alert-bg: var(--go360-teal-50);
--bs-alert-color: var(--go360-teal-800);
--bs-alert-border-color: var(--go360-teal-100);
}
[data-bs-theme="dark"] .alert-primary {
--bs-alert-bg: rgba(34, 178, 163, 0.12);
--bs-alert-color: var(--go360-teal-200);
--bs-alert-border-color: rgba(34, 178, 163, 0.25);
}
/* Pagination */
.page-link {
color: var(--go360-teal);
}
.page-item.active .page-link {
background-color: var(--go360-teal);
border-color: var(--go360-teal);
}
/* Nav tabs / pills */
.nav-pills .nav-link.active {
background-color: var(--go360-teal);
}
.nav-link {
color: var(--go360-teal);
}
.nav-link:hover {
color: var(--go360-deep-teal);
}
/* Dropdown */
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--go360-teal);
}
/* List group */
.list-group-item.active {
background-color: var(--go360-teal);
border-color: var(--go360-teal);
}
/* Accordion */
.accordion-button:not(.collapsed) {
background-color: var(--go360-teal-50);
color: var(--go360-teal-800);
}
.accordion-button:focus {
box-shadow: 0 0 0 0.2rem rgba(34, 178, 163, 0.25);
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
background-color: rgba(34, 178, 163, 0.12);
color: var(--go360-teal-200);
}
/* ── Go360-Specific Utility Classes ────────────────────────── */
/* Surface utilities */
.bg-go360-surface { background-color: var(--go360-surface) !important; }
.bg-go360-surface-raised { background-color: var(--go360-surface-raised) !important; }
.bg-go360-surface-sunken { background-color: var(--go360-surface-sunken) !important; }
/* Text utilities */
.text-go360-primary { color: var(--go360-text-primary) !important; }
.text-go360-secondary { color: var(--go360-text-secondary) !important; }
.text-go360-muted { color: var(--go360-text-muted) !important; }
/* Brand color backgrounds */
.bg-go360-teal { background-color: var(--go360-teal) !important; color: #FFFFFF; }
.bg-go360-midnight { background-color: var(--go360-midnight) !important; color: #FFFFFF; }
.bg-go360-deep-teal { background-color: var(--go360-deep-teal) !important; color: #FFFFFF; }
.bg-go360-aqua { background-color: var(--go360-aqua) !important; color: var(--go360-midnight); }
.bg-go360-live { background-color: var(--go360-live-red) !important; color: #FFFFFF; }
/* Brand color text */
.text-go360-teal { color: var(--go360-teal) !important; }
.text-go360-midnight { color: var(--go360-midnight) !important; }
.text-go360-deep-teal { color: var(--go360-deep-teal) !important; }
.text-go360-aqua { color: var(--go360-aqua) !important; }
.text-go360-live { color: var(--go360-live-red) !important; }
/* Brand border */
.border-go360-teal { border-color: var(--go360-teal) !important; }
.border-go360-midnight { border-color: var(--go360-midnight) !important; }
/* LIVE badge */
.badge-live {
display: inline-flex;
align-items: center;
gap: 0.375rem;
background-color: var(--go360-live-red);
color: #FFFFFF;
font-weight: 600;
font-size: 0.6875rem;
padding: 0.25rem 0.625rem;
border-radius: 50rem;
letter-spacing: 0.04em;
}
.badge-live::before {
content: "";
width: 0.4375rem;
height: 0.4375rem;
border-radius: 50%;
background: #FFFFFF;
animation: go360-live-pulse 1.4s ease-in-out infinite;
}
@keyframes go360-live-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.65); }
}
/* Status badges */
.badge-streaming {
background-color: var(--go360-teal-50);
color: var(--go360-teal-800);
border: 1px solid var(--go360-teal-100);
font-weight: 500;
}
[data-bs-theme="dark"] .badge-streaming {
background-color: rgba(34, 178, 163, 0.15);
color: var(--go360-teal-200);
border-color: rgba(34, 178, 163, 0.25);
}
.badge-connected {
background-color: #E8F8EE;
color: #1A6B3A;
border: 1px solid #A3E4B8;
font-weight: 500;
}
[data-bs-theme="dark"] .badge-connected {
background-color: rgba(39, 174, 96, 0.15);
color: #6EE7A0;
border-color: rgba(39, 174, 96, 0.25);
}
.badge-recording {
background-color: #FEF3E0;
color: #854F0B;
border: 1px solid #FAC775;
font-weight: 500;
}
[data-bs-theme="dark"] .badge-recording {
background-color: rgba(245, 166, 35, 0.15);
color: #FCD780;
border-color: rgba(245, 166, 35, 0.25);
}
/* Session card (dark panel) */
.card-session {
background-color: var(--go360-midnight);
border: none;
color: #FFFFFF;
border-radius: 0.75rem;
}
.card-session .card-subtitle {
color: var(--go360-teal-200);
font-size: 0.6875rem;
letter-spacing: 0.06em;
}
.card-session .text-muted {
color: #8BA7C1 !important;
}
/* Shadow utilities */
.shadow-go360-sm { box-shadow: 0 1px 3px var(--go360-shadow-color); }
.shadow-go360 { box-shadow: 0 4px 12px var(--go360-shadow-color); }
.shadow-go360-lg { box-shadow: 0 8px 24px var(--go360-shadow-color); }