/* ========================================================================== SkyAirways - Theme CSS Variable Architecture Foundation file imported by all other stylesheets. Authoritative palette per J-9F-C Phase A 4.1 (extracted from rb-logo.svg): --rb-yellow #1BB8F5 primary bright yellow (tail-sign, CTAs) --rb-navy #103A63 primary navy (wordmark, dark surfaces) --rb-off-white #FFFFFF light-on-dark wordmark variant --rb-gold #C9A84C Royal-Skies loyalty accent (gold card) ONLY --rb-silver #C0C5CE Royal-Skies loyalty accent (silver card) ONLY Legacy aliases (--rb-accent, --rb-gold) remain so unaudited CSS keeps compiling; they resolve to the authentic yellow except on Royal-Skies loyalty surfaces where the gold accent is deliberate. ========================================================================== */ :root { /* --- Authoritative brand palette --- */ --rb-yellow: #1BB8F5; --rb-yellow-hover: #4FC8F8; --rb-yellow-soft: #B8E9FC; --rb-navy: #103A63; --rb-navy-deep: #092443; --rb-navy-soft: #1F4E7E; --rb-off-white: #FFFFFF; /* --- Loyalty-only accents (SkyClub surfaces) --- At :root the gold alias resolves to the authentic brand yellow so that unaudited `var(--rb-gold)` usages elsewhere in the stylesheet cascade to a palette-compliant colour. The authentic #C9A84C gold only appears inside a [data-skyclub] subtree (see override below). --- */ --rb-gold: var(--rb-yellow); --rb-gold-hover: var(--rb-yellow-hover); --rb-silver: #C0C5CE; /* --- Surfaces --- */ --rb-bg: #FFFFFF; --rb-surface: #F5F7FA; --rb-surface-alt: #FAFAF7; --rb-card: #FFFFFF; --rb-text: #103A63; --rb-text-secondary: #5B6779; --rb-text-muted: #8A94A6; --rb-border: #E5E7EB; --rb-border-strong: #CBD2DC; /* --- Primary accent (alias to yellow for CTAs) --- */ --rb-accent: var(--rb-yellow); --rb-accent-hover: var(--rb-yellow-hover); --rb-accent-contrast: var(--rb-navy); /* --- Header / footer --- */ --rb-header-bg: #FFFFFF; --rb-header-text: var(--rb-navy); --rb-footer-bg: var(--rb-navy); --rb-footer-text: var(--rb-off-white); --rb-footer-muted: rgba(255, 255, 255, 0.72); /* --- Elevation / transitions --- */ --rb-shadow-sm: 0 1px 3px rgba(16, 58, 99, 0.06); --rb-shadow: 0 2px 8px rgba(16, 58, 99, 0.09); --rb-shadow-lg: 0 12px 32px rgba(16, 58, 99, 0.14); --rb-radius: 8px; --rb-radius-lg: 16px; --rb-radius-pill: 999px; --rb-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --rb-transition-fast: 0.18s ease; /* Stacking order, single source of truth. Consumers must reference these rather than inventing a larger number, which is how the channel drawer ended up painting over its own launcher. Note: the channel pages do not load this file, so usages carry the same value as a var() fallback. Keep the two in step. */ --z-header: 1000; --z-widget: 9000; /* chat FAB; panel sits one above */ --z-nav: 9998; /* channel switcher root */ --z-drawer-overlay: 9998; /* dimming overlay, inside the nav root */ --z-drawer: 9999; /* drawer surface, above the overlay */ --z-launcher: 10000; /* launcher stays reachable above its own drawer */ --z-modal: 10010; } /* -------------------------------------------------------------------------- SkyClub loyalty scope - the only place the authentic #C9A84C gold is permitted to render. Any element inside a [data-skyclub] subtree receives the loyalty palette; CG-35 Gate A whitelists this same subtree. -------------------------------------------------------------------------- */ [data-skyclub] { --rb-gold: #C9A84C; --rb-gold-hover: #B8962F; } /* -------------------------------------------------------------------------- Dark Theme (explicit) Brand yellow and navy-deep carry through; surfaces darken. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- Explicit LIGHT theme -------------------------------------------------------------------------- :root already holds the light values, so for a whole page this block is redundant. It exists for SUBTREES that opt out of an ancestor's theme. The chat widget is the case that matters: it carries its own theme under rb_widget_theme and sets data-theme on its own panel, independently of the page. Custom properties inherit, so with the dark values are already resolved on the root and a panel marked data-theme="light" matched NO rule at all - it kept inheriting dark and the widget's own light/dark button appeared to do nothing. Re-declaring the light values here gives that panel something to win with. Keep this list in step with the dark block below: any property one sets, the other must set too, or a themed subtree inherits half a palette. -------------------------------------------------------------------------- */ [data-theme="light"] { --rb-bg: #FFFFFF; --rb-surface: #F5F7FA; --rb-surface-alt: #FAFAF7; --rb-card: #FFFFFF; --rb-text: #103A63; --rb-text-secondary: #5B6779; --rb-text-muted: #8A94A6; --rb-border: #E5E7EB; --rb-border-strong: #CBD2DC; --rb-header-bg: #FFFFFF; --rb-header-text: var(--rb-navy); --rb-footer-bg: var(--rb-navy); --rb-footer-text: var(--rb-off-white); --rb-footer-muted: rgba(255, 255, 255, 0.72); --rb-shadow-sm: 0 1px 3px rgba(16, 58, 99, 0.06); --rb-shadow: 0 2px 8px rgba(16, 58, 99, 0.09); --rb-shadow-lg: 0 12px 32px rgba(16, 58, 99, 0.14); } [data-theme="dark"] { --rb-bg: #0A1220; --rb-surface: #11203A; --rb-surface-alt: #162743; --rb-card: #18284A; --rb-text: #FFFFFF; --rb-text-secondary: #A7B3C5; --rb-text-muted: #6B7892; --rb-border: #22355A; --rb-border-strong: #2F4A7A; --rb-header-bg: #092443; --rb-header-text: var(--rb-off-white); --rb-footer-bg: #050B16; --rb-footer-text: #BCC3D1; --rb-footer-muted: rgba(188, 195, 209, 0.6); --rb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --rb-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --rb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); } /* -------------------------------------------------------------------------- Auto-detection fallback - applied only when has no data-theme. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --rb-bg: #0A1220; --rb-surface: #11203A; --rb-surface-alt: #162743; --rb-card: #18284A; --rb-text: #FFFFFF; --rb-text-secondary: #A7B3C5; --rb-text-muted: #6B7892; --rb-border: #22355A; --rb-border-strong: #2F4A7A; --rb-header-bg: #092443; --rb-header-text: var(--rb-off-white); --rb-footer-bg: #050B16; --rb-footer-text: #BCC3D1; --rb-footer-muted: rgba(188, 195, 209, 0.6); --rb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --rb-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --rb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); } }