/** * SAGORA Analytics — Centralized Theme System * * Single source of truth for all design tokens (colors, typography, glass, * shadows, radii, surfaces). Two themes: * - Light (default — lavender glassmorphism) * - Dark (obsidian — deep navy) * * Theme is toggled via `data-sa-theme` attribute on . * The switcher UI lives in sagora-bg.js. */ /* ================================================================ A. RESET & BASE ================================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Wix Madefor Text', system-ui, sans-serif; background: var(--bg); color: var(--text-primary); -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; } /* ================================================================ B. LIGHT THEME (default — lavande) ================================================================ */ :root { /* --- Palette --- */ --navy: #273268; --navy-deep: #1a2248; --navy-rgb: 39,50,104; --mauve: #757cbb; --mauve-light: #9298d0; --mauve-pale: #c8cbe5; --mauve-rgb: 117,124,187; --teal: #4cb1a5; --teal-dark: #3a9a8f; --teal-light: #6dc4ba; --teal-pale: #d4f0ec; --teal-rgb: 76,177,165; --amber: #e8a840; --amber-pale: #fdf3dc; --red: #e25555; --red-pale: #fde8e8; /* --- Backgrounds --- */ --bg: #F7F8FC; --bg-white: #ffffff; --hub-bg: #1a2248; /* --- Text --- */ --text-primary: #1a2248; --text-secondary: #3a4580; --text-muted: #7a82a0; --text-dim: #a8b0c8; /* --- Glassmorphism --- */ --glass-bg: rgba(255,255,255,0.65); --glass-bg-strong: rgba(255,255,255,0.72); --glass-bg-subtle: rgba(255,255,255,0.45); --glass-border: rgba(var(--mauve-rgb),0.1); --glass-border-active: rgba(var(--mauve-rgb),0.2); --glass-blur: 20px; /* --- Surfaces --- */ --surface-nav: rgba(255,255,255,0.75); --surface-nav-border: rgba(117,124,187,0.08); --surface-elevated: rgba(26,34,72,0.92); --surface-elevated-border: rgba(117,124,187,0.2); --input-bg: rgba(255,255,255,0.5); --input-border: rgba(117,124,187,0.15); --modal-bg: rgba(255,255,255,0.85); --modal-border: rgba(117,124,187,0.15); --table-header-bg: rgba(255,255,255,0.5); --table-border: rgba(117,124,187,0.08); /* --- Shadows --- */ --shadow-sm: 0 2px 8px rgba(var(--navy-rgb),0.04); --shadow-md: 0 8px 30px rgba(var(--navy-rgb),0.06); --shadow-lg: 0 20px 60px rgba(var(--navy-rgb),0.08); --shadow-xl: 0 30px 80px rgba(var(--navy-rgb),0.1); /* --- Radii --- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 100px; /* --- Typography tokens --- */ --font-display: 'Wix Madefor Display', sans-serif; --font-body: 'Wix Madefor Text', sans-serif; --font-mono: 'Space Mono', monospace; /* --- Skeleton / Hero --- */ --hero-fade: #F7F8FC; --skeleton-bg: rgba(117,124,187,0.08); --skeleton-btn: rgba(117,124,187,0.12); /* --- Sidebar --- */ --sb-bg: rgba(240,241,248,0.92); --sb-border: rgba(117,124,187,0.12); --sb-text: rgba(26,34,72,0.55); --sb-text-bright: #1a2248; --sb-section: rgba(117,124,187,0.50); --sb-plans-bg: rgba(26,34,72,0.05); --sb-plans-border: rgba(117,124,187,0.15); --sb-hamburger-bg: rgba(240,241,248,0.90); --sb-hamburger-border: rgba(117,124,187,0.15); --sb-hamburger-line: rgba(26,34,72,0.6); /* --- Buttons --- */ --btn-primary-bg: #1a2248; --btn-primary-text: #ffffff; --btn-gradient: linear-gradient(135deg,#273268,#757cbb); /* --- Switcher --- */ --switcher-bg: rgba(26,34,72,0.5); --switcher-border: rgba(117,124,187,0.2); /* --- Index-specific (used by landing page) --- */ --dot-close: #ff5f57; --dot-minimize: #ffbd2e; --dot-maximize: #28c840; } /* ================================================================ C. DARK THEME (obsidian) ================================================================ */ html[data-sa-theme="dark"] { background: #080a18 !important; } html[data-sa-theme="dark"] body { background: #0f1223 !important; color: #e8eaf0 !important; } html[data-sa-theme="dark"] { --bg: #0f1223; --bg-white: #1a1e35; --hub-bg: #080a18; --text-primary: #e8eaf0; --text-secondary: #b0b8d0; --text-muted: #6a7090; --text-dim: #4a5070; --glass-bg: rgba(20,24,50,0.65); --glass-bg-strong: rgba(20,24,50,0.72); --glass-bg-subtle: rgba(20,24,50,0.45); --glass-border: rgba(100,110,180,0.15); --glass-border-active: rgba(100,110,180,0.3); --glass-blur: 20px; --shadow-sm: 0 2px 8px rgba(0,0,0,0.2); --shadow-md: 0 8px 30px rgba(0,0,0,0.3); --shadow-lg: 0 20px 60px rgba(0,0,0,0.25); --shadow-xl: 0 30px 80px rgba(0,0,0,0.3); --teal: #5cc8bb; --teal-dark: #4cb1a5; --teal-light: #7ad8cc; --teal-pale: rgba(92,200,187,0.12); --teal-rgb: 92,200,187; --mauve: #8a92d0; --mauve-light: #a0a8e0; --mauve-pale: rgba(138,146,208,0.15); --mauve-rgb: 138,146,208; --navy: #c0c8e0; --navy-deep: #e0e4f0; --navy-rgb: 192,200,224; --amber: #f0b850; --amber-pale: rgba(240,184,80,0.15); --red: #f06060; --red-pale: rgba(240,96,96,0.15); --surface-nav: rgba(15,18,35,0.85); --surface-nav-border: rgba(100,110,180,0.1); --surface-elevated: rgba(8,10,24,0.92); --surface-elevated-border: rgba(100,110,180,0.15); --input-bg: rgba(20,24,50,0.5); --input-border: rgba(100,110,180,0.15); --modal-bg: rgba(20,24,50,0.92); --modal-border: rgba(100,110,180,0.15); --table-header-bg: rgba(20,24,50,0.8); --table-border: rgba(100,110,180,0.08); --hero-fade: #0f1223; --skeleton-bg: rgba(20,24,50,0.65); --skeleton-btn: rgba(100,110,180,0.12); --switcher-bg: rgba(20,24,50,0.7); --switcher-border: rgba(100,110,180,0.15); --sb-bg: rgba(8,10,24,0.96); --sb-border: rgba(100,110,180,0.08); --sb-text: rgba(200,210,230,0.60); --sb-text-bright: #e8eaf0; --sb-section: rgba(100,110,180,0.45); --sb-plans-bg: rgba(20,24,50,0.5); --sb-plans-border: rgba(100,110,180,0.12); --sb-hamburger-bg: rgba(8,10,24,0.90); --sb-hamburger-border: rgba(100,110,180,0.12); --sb-hamburger-line: rgba(200,210,230,0.7); --btn-primary-bg: rgba(20,24,50,0.9); --btn-primary-text: #e8eaf0; --btn-gradient: linear-gradient(135deg,rgba(20,24,50,0.9),#8a92d0); } /* ================================================================ D. SCROLLBAR ================================================================ */ * { scrollbar-width: thin; scrollbar-color: rgba(var(--mauve-rgb),0.15) transparent; } *::-webkit-scrollbar { width: 5px; height: 5px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(var(--mauve-rgb),0.15); border-radius: 3px; } /* ================================================================ F. UTILITY ANIMATIONS ================================================================ */ @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.7); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } /* ================================================================ Z. SKIP LINK (accessibility) ================================================================ */ .sa-skip-link { position: fixed; top: -100%; left: 16px; z-index: 100000; padding: 12px 24px; background: var(--navy, #273268); color: #fff; font-family: 'Wix Madefor Display', sans-serif; font-weight: 700; font-size: 14px; border-radius: 0 0 var(--radius-sm, 8px) var(--radius-sm, 8px); text-decoration: none; opacity: 0; transition: top 0.15s, opacity 0.15s; } .sa-skip-link:focus { top: 0; opacity: 1; outline: 2px solid var(--teal, #4cb1a5); outline-offset: 2px; }