/** * skylark-theme.css — Global SkylarkOS Design System * Owns: CSS token layer, data-theme variants (standard / institutional / admin), * global shared UI patterns (buttons, cards, inputs, badges, nav, ticker). * Does NOT own: page-specific layout, chart config, density/motion passes. * * Usage: * Standard pages: (default) * Institutional pages: * Admin pages: * * Load order: skylark-theme.css → density-pass.css → motion-pass.css → page styles */ /* ══════════════════════════════════════════════════════════════════════════════ * GOOGLE FONTS (shared across all pages — load in tags in ) * Font stack: Space Grotesk (UI/body) + DM Mono (data/labels/mono) * ══════════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════════ * STANDARD THEME — Default (all public / member / admin-light pages) * Palette: 70% deep black/charcoal, 20% cyan/blue accents, 10% gold highlights * ══════════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="standard"] { /* ── Background layers ───────────────────────────────────────────── */ --sk-bg-primary: #05070c; --sk-bg-secondary: #07111d; --sk-bg-panel: #0b1020; --sk-bg-panel-soft: #0d1628; --sk-bg-surface: #0f1118; --sk-bg-card: #111420; --sk-bg-elevated: #161926; --sk-bg-hover: #1a1d2c; /* ── Text ────────────────────────────────────────────────────────── */ --sk-text-primary: #f4f7fb; --sk-text-secondary: #9aa6bd; --sk-text-muted: #5f6b82; --sk-text-ultra-muted: #3e4560; /* ── Cyan / Blue accents (20%) ───────────────────────────────────── */ --sk-cyan: #00f5d4; --sk-cyan-dim: rgba(0, 245, 212, 0.12); --sk-cyan-glow: rgba(0, 245, 212, 0.18); --sk-blue: #0ea5ff; --sk-blue-dim: rgba(14, 165, 255, 0.12); --sk-blue-glow: rgba(14, 165, 255, 0.18); --sk-deep-blue: #061a2f; --sk-blue-soft: #7c93ee; --sk-purple-soft: #a78bfa; /* ── Gold / Warm accents (10%) ───────────────────────────────────── */ --sk-gold: #f5b82e; --sk-gold-dim: rgba(245, 184, 46, 0.12); --sk-gold-glow: rgba(245, 184, 46, 0.22); --sk-amber: #ff9f1c; --sk-warm-glow: rgba(245, 184, 46, 0.25); /* ── Semantic regime colors (preserved — financial meaning) ──────── */ --sk-go: #00e5a0; --sk-caution: #f5b82e; --sk-stop: #ff5f57; --sk-positive: #4db87a; --sk-negative: #e55050; /* ── Borders ─────────────────────────────────────────────────────── */ --sk-border: rgba(255, 255, 255, 0.07); --sk-border-soft: rgba(255, 255, 255, 0.04); --sk-border-blue: rgba(14, 165, 255, 0.22); --sk-border-gold: rgba(245, 184, 46, 0.32); --sk-border-cyan: rgba(0, 245, 212, 0.22); --sk-grid-line: rgba(255, 255, 255, 0.028); /* ── Primary accent — standard uses blue/cyan ────────────────────── */ --sk-accent: #f5b82e; --sk-accent-dim: rgba(245, 184, 46, 0.12); --sk-accent-glow: rgba(245, 184, 46, 0.22); --sk-accent-border: rgba(245, 184, 46, 0.32); --sk-accent-cool: #0ea5ff; /* ── Legacy var aliases (backward compat with existing page styles) ─ */ --accent: var(--sk-gold); --accent-dim: var(--sk-gold-dim); --accent-glow: var(--sk-gold-glow); --gold: var(--sk-gold); --gold-dim: var(--sk-gold-dim); --gold-glow: var(--sk-gold-glow); --bg-deep: var(--sk-bg-primary); --bg-card: var(--sk-bg-card); --bg-elevated: var(--sk-bg-elevated); --bg-hover: var(--sk-bg-hover); --text-primary: var(--sk-text-primary); --text-secondary: var(--sk-text-secondary); --text-muted: var(--sk-text-muted); --border: var(--sk-border); --border-gold: var(--sk-border-gold); --grid-line: var(--sk-grid-line); --blue: var(--sk-blue-soft); --purple: var(--sk-purple-soft); --red: var(--sk-stop); --green: #30d158; --go: var(--sk-go); --caution: var(--sk-caution); --stop: var(--sk-stop); } /* ══════════════════════════════════════════════════════════════════════════════ * INSTITUTIONAL THEME — Deep navy + gold premium layer * Applied: on institutional-* pages * Palette: midnight blue base, gold primary, blue/cyan as secondary depth * ══════════════════════════════════════════════════════════════════════════════ */ [data-theme="institutional"] { /* ── Institutional backgrounds — deep navy ───────────────────────── */ --sk-bg-primary: #030914; --sk-bg-secondary: #061426; --sk-bg-panel: #07182d; --sk-bg-panel-soft: #0a1d35; --sk-bg-surface: #081628; --sk-bg-card: #091e38; --sk-bg-elevated: #0d2444; --sk-bg-hover: #102a4c; /* ── Text (same as standard, slightly crisper) ───────────────────── */ --sk-text-primary: #f0f4fc; --sk-text-secondary: #8fa4c0; --sk-text-muted: #4e6a88; --sk-text-ultra-muted: #2e4a68; /* ── Gold as primary accent ──────────────────────────────────────── */ --sk-gold: #f5b82e; --sk-gold-dim: rgba(245, 184, 46, 0.12); --sk-gold-glow: rgba(245, 184, 46, 0.25); --sk-amber: #d89b22; --sk-warm-glow: rgba(245, 184, 46, 0.30); /* ── Cyan/Blue as secondary accents ──────────────────────────────── */ --sk-cyan: #0ea5ff; --sk-cyan-dim: rgba(14, 165, 255, 0.10); --sk-cyan-glow: rgba(14, 165, 255, 0.18); --sk-blue: #0ea5ff; --sk-blue-dim: rgba(14, 165, 255, 0.10); --sk-blue-glow: rgba(14, 165, 255, 0.18); --sk-deep-blue: #02070f; --sk-blue-soft: #5b8bc4; /* ── Borders — stronger gold presence ───────────────────────────── */ --sk-border: rgba(255, 255, 255, 0.06); --sk-border-soft: rgba(255, 255, 255, 0.035); --sk-border-blue: rgba(14, 165, 255, 0.20); --sk-border-gold: rgba(245, 184, 46, 0.38); --sk-border-cyan: rgba(14, 165, 255, 0.20); --sk-grid-line: rgba(14, 165, 255, 0.04); /* ── Primary accent = gold ───────────────────────────────────────── */ --sk-accent: #f5b82e; --sk-accent-dim: rgba(245, 184, 46, 0.12); --sk-accent-glow: rgba(245, 184, 46, 0.25); --sk-accent-border: rgba(245, 184, 46, 0.38); --sk-accent-cool: #0ea5ff; /* ── Legacy var aliases ──────────────────────────────────────────── */ --accent: var(--sk-gold); --accent-dim: var(--sk-gold-dim); --accent-glow: var(--sk-gold-glow); --gold: var(--sk-gold); --gold-dim: var(--sk-gold-dim); --gold-glow: var(--sk-gold-glow); --bg-deep: var(--sk-bg-primary); --bg-card: var(--sk-bg-card); --bg-elevated: var(--sk-bg-elevated); --bg-hover: var(--sk-bg-hover); --text-primary: var(--sk-text-primary); --text-secondary: var(--sk-text-secondary); --text-muted: var(--sk-text-muted); --border: var(--sk-border); --border-gold: var(--sk-border-gold); --grid-line: var(--sk-grid-line); } /* ── Institutional background override (critical path) ─────────────────────── */ [data-theme="institutional"] html, [data-theme="institutional"] body, html[data-theme="institutional"], html[data-theme="institutional"] body { background: #030914 !important; background-color: #030914 !important; } /* ── Institutional grid bg — subtle blue tint ──────────────────────────────── */ [data-theme="institutional"] .grid-bg, html[data-theme="institutional"] .grid-bg { background-image: linear-gradient(rgba(14, 165, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 165, 255, 0.04) 1px, transparent 1px); background-size: 64px 64px; } /* ── Institutional glow orbs — gold with blue undertone ────────────────────── */ [data-theme="institutional"] .glow-orb, html[data-theme="institutional"] .glow-orb { background: radial-gradient(circle, rgba(245, 184, 46, 0.10) 0%, transparent 70%); } /* ══════════════════════════════════════════════════════════════════════════════ * ADMIN THEME — same as standard but with slight admin indicator * ══════════════════════════════════════════════════════════════════════════════ */ [data-theme="admin"] { /* Inherits standard, overrides accent to subtle purple */ --sk-accent: #a78bfa; --sk-accent-dim: rgba(167, 139, 250, 0.12); --sk-accent-glow: rgba(167, 139, 250, 0.20); --sk-accent-border: rgba(167, 139, 250, 0.30); --accent: #a78bfa; --accent-dim: rgba(167, 139, 250, 0.12); --accent-glow: rgba(167, 139, 250, 0.20); --bg-deep: #06060e; --bg-card: #0f0f18; --sk-bg-primary: #06060e; --sk-bg-card: #0f0f18; } /* ══════════════════════════════════════════════════════════════════════════════ * GLOBAL BASE RESETS * ══════════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background: var(--sk-bg-primary); color: var(--sk-text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ══════════════════════════════════════════════════════════════════════════════ * TYPOGRAPHY SYSTEM * ══════════════════════════════════════════════════════════════════════════════ */ .sk-mono { font-family: 'DM Mono', 'Courier New', monospace; } .sk-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--sk-accent); letter-spacing: 3px; text-transform: uppercase; display: flex; align-items: center; gap: 12px; } .sk-eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: var(--sk-accent); flex-shrink: 0; } .sk-label { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--sk-text-muted); letter-spacing: 2px; text-transform: uppercase; } .sk-label-gold { color: var(--sk-accent); } /* ══════════════════════════════════════════════════════════════════════════════ * BUTTON SYSTEM * ══════════════════════════════════════════════════════════════════════════════ */ /* Primary action — gold fill */ .sk-btn, .sk-btn-primary, .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--sk-accent); color: #030914; font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; padding: 12px 24px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; letter-spacing: 0.2px; transition: background 150ms ease-out, transform 120ms ease-out, box-shadow 150ms ease-out; white-space: nowrap; } .sk-btn:hover, .sk-btn-primary:hover, .btn-primary:hover { background: #ffc940; transform: translateY(-1px); box-shadow: 0 6px 20px var(--sk-gold-glow); color: #030914; } /* Institutional gold button (same, stronger glow) */ [data-theme="institutional"] .btn-primary:hover, html[data-theme="institutional"] .btn-primary:hover { background: #ffc940; box-shadow: 0 6px 24px rgba(245, 184, 46, 0.35); } /* Outline button — bordered */ .sk-btn-outline, .btn-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--sk-accent); font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 500; padding: 11px 22px; border-radius: 8px; border: 1px solid var(--sk-accent-border); cursor: pointer; text-decoration: none; letter-spacing: 0.2px; transition: background 150ms ease-out, border-color 150ms ease-out, transform 120ms ease-out; white-space: nowrap; } .sk-btn-outline:hover, .btn-outline:hover { background: var(--sk-accent-dim); border-color: var(--sk-accent); transform: translateY(-1px); } /* Ghost button — subtle */ .sk-btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--sk-text-secondary); font-family: 'DM Mono', monospace; font-size: 12px; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--sk-border); cursor: pointer; text-decoration: none; letter-spacing: 0.5px; transition: color 150ms ease-out, border-color 150ms ease-out; } .sk-btn-ghost:hover { color: var(--sk-text-primary); border-color: rgba(255, 255, 255, 0.18); } /* Cyan/blue action (live/data context) */ .sk-btn-blue { display: inline-flex; align-items: center; gap: 8px; background: var(--sk-blue-dim); color: var(--sk-blue); font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--sk-border-blue); cursor: pointer; text-decoration: none; letter-spacing: 0.5px; transition: background 150ms ease-out, border-color 150ms ease-out; } .sk-btn-blue:hover { background: rgba(14, 165, 255, 0.18); border-color: rgba(14, 165, 255, 0.38); } /* ══════════════════════════════════════════════════════════════════════════════ * CARD SYSTEM * ══════════════════════════════════════════════════════════════════════════════ */ .sk-card { background: var(--sk-bg-card); border: 1px solid var(--sk-border); border-radius: 12px; padding: 24px; position: relative; overflow: hidden; transition: border-color 150ms ease-out, box-shadow 150ms ease-out; } .sk-card:hover { border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); } /* Gold-accented card top border */ .sk-card-gold { border-color: var(--sk-border-gold); } .sk-card-gold::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--sk-gold) 0%, transparent 75%); } /* Blue-accented card top border */ .sk-card-blue::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--sk-blue) 0%, transparent 75%); } /* Institutional card — deeper navy interior */ [data-theme="institutional"] .sk-card, html[data-theme="institutional"] .sk-card { background: var(--sk-bg-card); border-color: rgba(14, 165, 255, 0.08); } [data-theme="institutional"] .sk-card:hover, html[data-theme="institutional"] .sk-card:hover { border-color: rgba(245, 184, 46, 0.20); box-shadow: 0 4px 28px rgba(14, 165, 255, 0.08); } /* ══════════════════════════════════════════════════════════════════════════════ * FORM INPUTS * ══════════════════════════════════════════════════════════════════════════════ */ .sk-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], select, textarea { background: var(--sk-bg-surface); border: 1px solid var(--sk-border); border-radius: 8px; color: var(--sk-text-primary); font-family: 'Space Grotesk', sans-serif; font-size: 14px; padding: 10px 14px; width: 100%; transition: border-color 150ms ease-out, box-shadow 150ms ease-out; outline: none; -webkit-appearance: none; } .sk-input:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus, select:focus, textarea:focus { border-color: rgba(245, 184, 46, 0.40); box-shadow: 0 0 0 2px rgba(245, 184, 46, 0.10); } .sk-input::placeholder, input::placeholder, textarea::placeholder { color: var(--sk-text-muted); } select option { background: var(--sk-bg-card); color: var(--sk-text-primary); } /* ══════════════════════════════════════════════════════════════════════════════ * BADGE / CHIP SYSTEM * ══════════════════════════════════════════════════════════════════════════════ */ .sk-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 100px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; } .sk-badge-gold { background: var(--sk-gold-dim); color: var(--sk-gold); border: 1px solid rgba(245, 184, 46, 0.22); } .sk-badge-blue { background: var(--sk-blue-dim); color: var(--sk-blue); border: 1px solid var(--sk-border-blue); } .sk-badge-cyan { background: var(--sk-cyan-dim); color: var(--sk-cyan); border: 1px solid var(--sk-border-cyan); } .sk-badge-live { background: rgba(0, 229, 160, 0.10); color: #00e5a0; border: 1px solid rgba(0, 229, 160, 0.20); } .sk-badge-muted { background: rgba(95, 107, 130, 0.12); color: var(--sk-text-muted); border: 1px solid var(--sk-border); } /* ══════════════════════════════════════════════════════════════════════════════ * STATUS INDICATORS * ══════════════════════════════════════════════════════════════════════════════ */ .sk-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sk-accent); display: inline-block; flex-shrink: 0; } /* Subtle pulse animation for live dots */ @keyframes sk-pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 var(--sk-accent-glow); } 50% { box-shadow: 0 0 0 4px transparent; } } .sk-live-dot.pulsing { animation: sk-pulse-dot 2.5s ease-in-out infinite; } /* ══════════════════════════════════════════════════════════════════════════════ * DIVIDERS / SEPARATORS * ══════════════════════════════════════════════════════════════════════════════ */ .sk-divider { border: none; border-top: 1px solid var(--sk-border); margin: 24px 0; } .sk-divider-gold { border-top-color: rgba(245, 184, 46, 0.20); } .sk-section-label { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--sk-accent); letter-spacing: 3px; text-transform: uppercase; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .sk-section-label::after { content: ''; flex: 1; height: 1px; background: var(--sk-border); } /* ══════════════════════════════════════════════════════════════════════════════ * SCROLLBAR STYLING * ══════════════════════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--sk-bg-primary); } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); } /* ══════════════════════════════════════════════════════════════════════════════ * TOOLTIP * ══════════════════════════════════════════════════════════════════════════════ */ .sk-tooltip { background: var(--sk-bg-elevated); border: 1px solid var(--sk-border); border-radius: 6px; padding: 8px 12px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--sk-text-secondary); line-height: 1.5; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); pointer-events: none; } /* ══════════════════════════════════════════════════════════════════════════════ * TABLES * ══════════════════════════════════════════════════════════════════════════════ */ .sk-table { width: 100%; border-collapse: collapse; font-size: 13px; } .sk-table th { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sk-text-muted); padding: 10px 14px; border-bottom: 1px solid var(--sk-border); text-align: left; font-weight: 500; } .sk-table td { padding: 10px 14px; border-bottom: 1px solid var(--sk-border-soft); color: var(--sk-text-secondary); } .sk-table tr:hover td { background: var(--sk-bg-hover); color: var(--sk-text-primary); } /* ══════════════════════════════════════════════════════════════════════════════ * LOADING / SKELETON STATES * ══════════════════════════════════════════════════════════════════════════════ */ @keyframes sk-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } .sk-skeleton { background: linear-gradient( 90deg, var(--sk-bg-elevated) 25%, var(--sk-bg-hover) 37%, var(--sk-bg-elevated) 63% ); background-size: 400% 100%; animation: sk-shimmer 1.4s ease-in-out infinite; border-radius: 4px; } /* ══════════════════════════════════════════════════════════════════════════════ * NAV OVERRIDES — Institutional blue/gold nav variant * ══════════════════════════════════════════════════════════════════════════════ */ [data-theme="institutional"] #sky-nav, html[data-theme="institutional"] #sky-nav { border-bottom-color: rgba(245, 184, 46, 0.12) !important; background: rgba(3, 9, 20, 0.95) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [data-theme="institutional"] .sky-nav-logo, html[data-theme="institutional"] .sky-nav-logo { color: var(--sk-gold) !important; } /* ══════════════════════════════════════════════════════════════════════════════ * STATUS STRIP OVERRIDES — Institutional blue tint * ══════════════════════════════════════════════════════════════════════════════ */ [data-theme="institutional"] #sky-system-status, html[data-theme="institutional"] #sky-system-status { background: rgba(6, 20, 38, 0.96) !important; border-bottom-color: rgba(14, 165, 255, 0.15) !important; } /* ══════════════════════════════════════════════════════════════════════════════ * INTEL RAIL OVERRIDES — Institutional deeper navy * ══════════════════════════════════════════════════════════════════════════════ */ [data-theme="institutional"] #sky-intel-rail, html[data-theme="institutional"] #sky-intel-rail { background: rgba(3, 9, 20, 0.97) !important; border-left-color: rgba(245, 184, 46, 0.15) !important; } [data-theme="institutional"] #sky-intel-rail-panel, html[data-theme="institutional"] #sky-intel-rail-panel { background: rgba(3, 9, 20, 0.98) !important; border-left-color: rgba(245, 184, 46, 0.15) !important; } /* ══════════════════════════════════════════════════════════════════════════════ * TICKER OVERRIDES — Institutional * ══════════════════════════════════════════════════════════════════════════════ */ [data-theme="institutional"] #sky-market-ticker, html[data-theme="institutional"] #sky-market-ticker { background: #030914 !important; border-bottom-color: rgba(14, 165, 255, 0.12) !important; } /* ══════════════════════════════════════════════════════════════════════════════ * FOCUS STATES — Consistent gold ring * ══════════════════════════════════════════════════════════════════════════════ */ :focus-visible { outline: 2px solid rgba(245, 184, 46, 0.60); outline-offset: 2px; } /* ══════════════════════════════════════════════════════════════════════════════ * SELECTION * ══════════════════════════════════════════════════════════════════════════════ */ ::selection { background: var(--sk-gold-dim); color: var(--sk-text-primary); } /* ══════════════════════════════════════════════════════════════════════════════ * UTILITY CLASSES * ══════════════════════════════════════════════════════════════════════════════ */ .sk-text-gold { color: var(--sk-gold) !important; } .sk-text-blue { color: var(--sk-blue) !important; } .sk-text-cyan { color: var(--sk-cyan) !important; } .sk-text-muted { color: var(--sk-text-muted) !important; } .sk-text-secondary { color: var(--sk-text-secondary) !important; } .sk-text-primary { color: var(--sk-text-primary) !important; } .sk-bg-card { background: var(--sk-bg-card) !important; } .sk-bg-surface { background: var(--sk-bg-surface) !important; } .sk-bg-panel { background: var(--sk-bg-panel) !important; } .sk-border-gold { border-color: var(--sk-border-gold) !important; } .sk-border-blue { border-color: var(--sk-border-blue) !important; } .sk-mono { font-family: 'DM Mono', monospace !important; } .sk-uppercase { text-transform: uppercase !important; } .sk-tracking-wide { letter-spacing: 2px !important; } /* ══════════════════════════════════════════════════════════════════════════════ * INSTITUTIONAL PAGE DEEP NAVY OVERRIDES * Ensures all standard dark card colors become proper deep navy on institutional * ══════════════════════════════════════════════════════════════════════════════ */ html[data-theme="institutional"] .chart-card, html[data-theme="institutional"] .nowcast-card, html[data-theme="institutional"] .info-card, html[data-theme="institutional"] .data-card, html[data-theme="institutional"] .module-card, html[data-theme="institutional"] .analysis-card, html[data-theme="institutional"] .indicator-card, html[data-theme="institutional"] .trust-item, html[data-theme="institutional"] .plan-card, html[data-theme="institutional"] .inst-module, html[data-theme="institutional"] .scatter-card, html[data-theme="institutional"] .gbc-card, html[data-theme="institutional"] .gfc-card, html[data-theme="institutional"] .flp-card, html[data-theme="institutional"] .bmi-card, html[data-theme="institutional"] .report-section, html[data-theme="institutional"] .access-card, html[data-theme="institutional"] .timeline-item, html[data-theme="institutional"] .metric-box { background: var(--sk-bg-card) !important; border-color: rgba(14, 165, 255, 0.09) !important; } html[data-theme="institutional"] .chart-card:hover, html[data-theme="institutional"] .nowcast-card:hover, html[data-theme="institutional"] .info-card:hover, html[data-theme="institutional"] .data-card:hover, html[data-theme="institutional"] .indicator-card:hover { border-color: rgba(245, 184, 46, 0.22) !important; box-shadow: 0 4px 24px rgba(14, 165, 255, 0.08) !important; } /* Institutional page body / wrapper override */ html[data-theme="institutional"] body, html[data-theme="institutional"] .page, html[data-theme="institutional"] .dashboard, html[data-theme="institutional"] .dashboard-content { background: var(--sk-bg-primary) !important; } /* Institutional section accent lines — gold top border */ html[data-theme="institutional"] .nowcast-card::before, html[data-theme="institutional"] .chart-card::before { background: linear-gradient(90deg, var(--sk-gold) 0%, transparent 75%) !important; } /* ══════════════════════════════════════════════════════════════════════════════ * MEDIA: Print / Reduced Motion * ══════════════════════════════════════════════════════════════════════════════ */ @media print { /* Dark theme preserved for institutional PDF exports — see public/print.css */ body { background: #030914 !important; color: #f0f4fc !important; } } @media (prefers-color-scheme: light) { /* SkylarkOS is intentionally always dark — no light mode override */ }