/* ============================================================ QUANTUM ATTUNEMENT™ — Design Tokens Foundation to Wellness Single source of truth — imported by every page Theme system: data-theme="dark" (default) | "light" | "custom" ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap'); :root { /* ── Backgrounds ───────────────────────────────────────── */ --bg: #04040E; --bg2: #080818; --bg3: #0C0C22; --surface: rgba(255,255,255,0.04); --surface2: rgba(255,255,255,0.07); --surface3: rgba(255,255,255,0.10); /* ── Borders ───────────────────────────────────────────── */ --border: rgba(255,255,255,0.08); --border2: rgba(255,255,255,0.14); --border3: rgba(255,255,255,0.22); /* ── Brand Accent ──────────────────────────────────────── */ --accent: #00D4B8; /* Teal — primary brand */ --accent-dim: rgba(0,212,184,0.12); --accent2: #7B5CF0; /* Purple — secondary */ --accent2-dim: rgba(123,92,240,0.12); --gold: #E8C46A; /* Gold — scores, highlights */ /* ── Text (Dark Mode — significantly brightened) ───────── */ --text: #F8F6FF; /* Primary — bright near-white */ --text2: #E4E0FF; /* Secondary — clearly readable lavender */ --text3: #C4BFEA; /* Tertiary — visible labels (was too dim) */ --text4: #9490C0; /* Quaternary — subtle only */ /* ── Chakra Colours ────────────────────────────────────── */ --c-root: #C0392B; --c-sacral: #E05C20; --c-solar: #E8A020; --c-heart: #27AE60; --c-throat: #2980B9; --c-thirdeye: #5B4CF5; --c-crown: #9B59B6; /* ── Typography ────────────────────────────────────────── */ --font-display: 'Cinzel', 'Georgia', serif; --font-body: 'Raleway', 'Segoe UI', sans-serif; /* ── Radius ────────────────────────────────────────────── */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 6px; /* was 9999px pill — now rect with soft radius */ /* ── Transitions ───────────────────────────────────────── */ --ease: 0.25s ease; --ease-slow: 0.5s ease; /* ── Layout ────────────────────────────────────────────── */ --max-width: 820px; --nav-height: 64px; } /* ============================================================ LIGHT MODE — off-white/grey palette, accents unchanged Applied via: ============================================================ */ [data-theme="light"] { /* ── Page backgrounds — warm grey, not white ───────────── */ --bg: #E9E8F0; /* page background */ --bg2: #DFDDE9; /* inset / code bg */ --bg3: #D4D1E2; /* deep inset */ /* ── Card / surface — solid white so cards pop off the bg ─ */ --surface: rgba(255,255,255,0.82); --surface2: rgba(255,255,255,0.95); --surface3: rgba(255,255,255,1.0); /* ── Borders — more visible than before ─────────────────── */ --border: rgba(0,0,0,0.13); --border2: rgba(0,0,0,0.22); --border3: rgba(0,0,0,0.33); /* ── Accent dims — slightly richer tint on white ────────── */ --accent-dim: rgba(0,180,160,0.13); --accent2-dim: rgba(100,72,210,0.11); /* ── Text — deeper, fully readable ──────────────────────── */ --text: #12102A; /* near-black headings */ --text2: #28264A; /* body text */ --text3: #48446A; /* labels, meta — was too washed */ --text4: #706C96; /* subtle only */ } /* ── Light mode: page bg — very subtle gradient for depth ─── */ [data-theme="light"] body { background: linear-gradient(160deg, #ECEAF4 0%, #E4E2EF 50%, #DDDBE8 100%); } /* ── Light mode: cosmic overlay — barely visible ──────────── */ [data-theme="light"] body::before { opacity: 0.12; background: radial-gradient(ellipse 60% 40% at 10% 5%, rgba(100,72,210,0.10) 0%, transparent 70%), radial-gradient(ellipse 50% 50% at 90% 90%, rgba(0,180,160,0.08) 0%, transparent 70%); } /* ── Light mode: nav ──────────────────────────────────────── */ [data-theme="light"] .qa-nav { background: rgba(235,233,244,0.97); border-bottom: 1px solid rgba(0,0,0,0.12); box-shadow: 0 1px 8px rgba(0,0,0,0.07); } /* Nav brand text — needs to be visible on light bg */ [data-theme="light"] .qa-nav-brand .wordmark { color: var(--text); } [data-theme="light"] .qa-nav-brand .wordmark span { color: var(--accent); } [data-theme="light"] .qa-nav-brand .sub { color: var(--text3); } [data-theme="light"] .qa-nav-back { color: var(--text3); } [data-theme="light"] .qa-nav-back:hover { color: var(--accent); } /* ── Light mode: panels — white card on grey bg ───────────── */ [data-theme="light"] .qa-panel { background: rgba(255,255,255,0.88); border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 2px 12px rgba(0,0,0,0.06); } [data-theme="light"] .qa-panel-sm { background: rgba(255,255,255,0.70); border: 1px solid rgba(0,0,0,0.10); } /* ── Light mode: hub module cards ─────────────────────────── */ [data-theme="light"] .hub-module { background: rgba(255,255,255,0.90); border-color: rgba(0,0,0,0.12); box-shadow: 0 2px 10px rgba(0,0,0,0.06); } [data-theme="light"] .hub-module:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.10); border-color: rgba(0,0,0,0.20); } [data-theme="light"] .hub-module h3 { color: var(--text); } [data-theme="light"] .hub-module p { color: var(--text3); } /* Hub admin panel */ [data-theme="light"] .hub-admin-panel { background: rgba(0,180,160,0.05); border-color: rgba(0,180,160,0.25); } [data-theme="light"] .hub-admin-action { background: rgba(255,255,255,0.85); border-color: rgba(0,0,0,0.11); } [data-theme="light"] .hub-admin-action:hover { border-color: var(--accent); background: rgba(0,180,160,0.07); } [data-theme="light"] .hub-admin-action-label { color: var(--text2); } /* Hub sources / tier cards */ [data-theme="light"] .hub-sources { background: rgba(255,255,255,0.80); border-color: rgba(0,0,0,0.11); } [data-theme="light"] .hub-source-item { background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08); } [data-theme="light"] .hub-source-desc { color: var(--text3); } /* ── Light mode: labels / badges ──────────────────────────── */ [data-theme="light"] .qa-label { color: var(--text3); letter-spacing: 0.14em; } [data-theme="light"] .qa-tier { opacity: 0.85; } /* Phase live badge */ [data-theme="light"] .hub-module-phase.live { background: rgba(0,160,100,0.10); border-color: rgba(0,160,100,0.30); color: #007A50; } /* ── Light mode: select / input / textarea ─────────────────── */ [data-theme="light"] select { background: rgba(255,255,255,0.90); color: var(--text2); border-color: rgba(0,0,0,0.16); } [data-theme="light"] select option { background: #E4E2EC; color: #28264A; } [data-theme="light"] input, [data-theme="light"] textarea { background: rgba(255,255,255,0.90) !important; color: var(--text) !important; border-color: rgba(0,0,0,0.16) !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--text4) !important; } /* ── Light mode: page header ───────────────────────────────── */ [data-theme="light"] .qa-page-header h1 { color: var(--text); } [data-theme="light"] .qa-page-header h1 span { color: var(--accent); } [data-theme="light"] .qa-brand-label { color: var(--text3); } [data-theme="light"] .page-subtitle { color: var(--text3); } [data-theme="light"] .qa-divider { background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.55; } /* ── Light mode: status dot / text ────────────────────────── */ [data-theme="light"] .qa-status-text { color: var(--text2); } /* ── Light mode: metrics ──────────────────────────────────── */ [data-theme="light"] .qa-metric { background: rgba(255,255,255,0.75); border-color: rgba(0,0,0,0.10); } [data-theme="light"] .qa-metric-label { color: var(--text3); } /* ── Light mode: hamburger menu drawer ─────────────────────── */ [data-theme="light"] .qa-menu-drawer { background: #ECEAF4; border-left-color: rgba(0,0,0,0.12); box-shadow: -4px 0 24px rgba(0,0,0,0.10); } [data-theme="light"] .qa-menu-header { background: #E4E2EF; border-bottom-color: rgba(0,0,0,0.10); } [data-theme="light"] .qa-menu-header-title { color: var(--text2); } [data-theme="light"] .qa-menu-section { border-bottom-color: rgba(0,0,0,0.08); } [data-theme="light"] .qa-menu-section-title{ color: var(--text3); } [data-theme="light"] .qa-menu-text { color: var(--text3); } [data-theme="light"] .qa-menu-version { color: var(--text4); } /* ── Light mode: report guide drawer ──────────────────────── */ [data-theme="light"] .qa-rg-drawer { background: #ECEAF4; border-left-color: rgba(0,0,0,0.12); } [data-theme="light"] .qa-rg-header { background: #E4E2EF; border-bottom-color: rgba(0,0,0,0.10); } [data-theme="light"] .qa-rg-title { color: var(--text); } [data-theme="light"] .qa-rg-body p { color: var(--text3); } /* ── Light mode: disclaimer ────────────────────────────────── */ [data-theme="light"] .qa-disclaimer { color: var(--text4); } /* ── Light mode: btn — bordered style stays teal ──────────── */ [data-theme="light"] .qa-btn { color: var(--accent); border-color: rgba(0,180,160,0.50); } [data-theme="light"] .qa-btn:hover:not(:disabled) { background: rgba(0,180,160,0.10); border-color: var(--accent); box-shadow: 0 0 16px rgba(0,180,160,0.15); } [data-theme="light"] .qa-btn.muted { color: var(--text3); border-color: rgba(0,0,0,0.16); } [data-theme="light"] .qa-btn.muted:hover:not(:disabled) { border-color: rgba(0,0,0,0.28); color: var(--text2); background: rgba(0,0,0,0.05); } /* ── Light mode: user bar ──────────────────────────────────── */ [data-theme="light"] .qa-user-name { color: var(--text2); } [data-theme="light"] .qa-user-role { color: var(--text3); }