/* ============================================================================= Beey Live Subtitling — player page theme (override) ----------------------------------------------------------------------------- Pure reskin of the live-subtitling player pages (e.g. /8phiGT, /xkVxzN) into the Beey design system. NO markup or JavaScript changes required. INSTALL — load this file AFTER the existing /files/site.css on the player pages. Add as the LAST stylesheet in : It is written to win regardless of insertion order (brand colors via CSS variables that site.css already consumes, plus a few targeted !important rules for the hard-coded Bootstrap/player values). Design tokens match the Beey microsite + footer: primary #FFAE43 dark surface #1a1a2e fonts Dosis + Open Sans ========================================================================== */ /* Beey fonts — the player page currently loads Outfit + Space Mono only. */ @import url('https://fonts.googleapis.com/css2?family=Dosis:wght@500;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap'); /* 1 — Brand tokens. Most of site.css is driven by these, so remapping them reskins the honeycomb background, accents, borders and gradients. */ :root { --newton-orange: #FFAE43; /* Beey primary */ --newton-dark-orange: #E8962E; /* Beey primary-dark */ --honey-gold: #FFD4A0; /* Beey primary-light */ --deep-navy: #1a1a2e; /* Beey dark surface */ --dark-blue: #24243a; /* lighter navy panel */ --text-light: #ECECEC; --text-light-muted: rgba(255, 255, 255, 0.72); --glass: rgba(36, 36, 58, 0.60); --border: rgba(255, 174, 67, 0.20); --shadow: rgba(255, 174, 67, 0.25); } /* 1b — Dark mode. The player page is dark but never sets `data-bs-theme="dark"`, and an attribute can't be added from CSS. So we (a) tell the browser the page is dark (native scrollbars, form controls, autofill render dark) and (b) remap Bootstrap's own variables to a Beey-navy dark palette, so ANY Bootstrap component renders dark — not just the themed buttons. */ :root { color-scheme: dark; --bs-body-bg: #1a1a2e; --bs-body-color: #ECECEC; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: rgba(255, 255, 255, 0.70); --bs-secondary-bg: #24243a; --bs-tertiary-color: rgba(255, 255, 255, 0.50); --bs-tertiary-bg: #1f1f33; --bs-border-color: rgba(255, 174, 67, 0.18); --bs-border-color-translucent: rgba(255, 255, 255, 0.12); --bs-link-color: #FFAE43; --bs-link-color-rgb: 255, 174, 67; --bs-link-hover-color: #FFD4A0; --bs-link-hover-color-rgb: 255, 212, 160; --bs-heading-color: #ECECEC; --bs-primary: #FFAE43; --bs-primary-rgb: 255, 174, 67; } /* 2 — Typography: Dosis (headings) + Open Sans (body). */ body { font-family: 'Open Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } h1, h2, h3, h4, h5, h6, .channel-plain-title { font-family: 'Dosis', sans-serif; letter-spacing: -0.01em; } /* 3 — Channel header: home logo + channel name. Logo stays static (no float). */ .channel-plain-title .bee-icon { animation: none; } .channel-plain-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; color: var(--text-light); } /* 4 — Player frame → Beey navy glass. */ .playerWrap { background: rgba(26, 26, 46, 0.60) !important; border: 1px solid rgba(255, 174, 67, 0.18) !important; border-radius: 16px; } .playerControls { background: rgba(26, 26, 46, 0.78) !important; border-top: 1px solid rgba(255, 174, 67, 0.18) !important; } .playerStatus { background: rgba(26, 26, 46, 0.60) !important; border-color: rgba(255, 174, 67, 0.18) !important; } /* 5 — Control buttons → Beey style. */ .playerControls .btn { border-radius: 10px; font-weight: 600; } .btn-outline-secondary { border-color: rgba(255, 174, 67, 0.40) !important; color: rgba(255, 255, 255, 0.85) !important; } .btn-outline-secondary:hover, .btn-outline-secondary:focus { background: rgba(255, 174, 67, 0.14) !important; border-color: #FFAE43 !important; color: #ffffff !important; } /* 6 — Subtitle overlay: keep maximum legibility, warm the backdrop slightly. */ .playerSubtitleInner { background: rgba(10, 10, 20, 0.66); border-radius: 12px; } /* 7 — Discreet Beey signature (CSS-injected, no markup change). */ .pageRoot::after { content: "Powered by Beey AI"; display: block; text-align: center; font-family: 'Dosis', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: rgba(255, 255, 255, 0.42); padding: 1.75rem 1rem 2.5rem; }