/* * theme.css — Rasa Collective global theme variables * Applied via [data-theme="dark"] / [data-theme="light"] on * Set by theme.js before first paint (no flash). */ /* ── Global background image (dark theme, matches rasac project) ──── */ html, body { background-image: url("assets/background.jpg"); background-size: cover; background-position: center top; background-attachment: fixed; background-repeat: no-repeat; background-color: #0c0c08; } /* ── DARK THEME (default) ────────────────────────────────────────── */ [data-theme="dark"] { --bg: #0A0908; --bg-card: #14110F; --bg-sidebar: #0D0B09; --bg-row: #0F0D0B; --text: #EDE6DA; --text-soft: #DDD8D2; --text-muted: #BFB8B0; --rule: rgba(237,230,218,0.10); --rule-strong: rgba(237,230,218,0.18); --gold: #ffffff; --coral: #E55C44; --blue: #6B8FB8; --green: #6BAA8E; --grad-warm: linear-gradient(135deg, #E55C44 0%, #F08C44 45%, #ffffff 100%); --grad-rainbow:linear-gradient(90deg, #E55C44 0%, #F08C44 25%, #ffffff 50%, #6B8FB8 75%, #8E6BB8 100%); } /* ── LIGHT THEME ─────────────────────────────────────────────────── */ [data-theme="light"] { --bg: #F4EFE6; /* warm parchment page bg */ --bg-card: #FFFEFB; /* warm near-white for cards */ --bg-sidebar: #EDE8DE; /* slightly deeper parchment for alt areas */ --bg-row: #F8F5EF; /* table/row alternates */ --text: #17110A; --text-soft: #2C2016; --text-muted: #5C4A3A; --rule: rgba(70,45,15,0.09); --rule-strong: rgba(70,45,15,0.17); --gold: #B87A0E; /* real warm amber-gold */ --coral: #C73E28; --blue: #2E5F9A; --green: #27735A; --grad-warm: linear-gradient(135deg, #C73E28 0%, #D9682A 45%, #B87A0E 100%); --grad-rainbow:linear-gradient(90deg, #C73E28 0%, #D9682A 25%, #B87A0E 50%, #2E5F9A 75%, #7A4FA8 100%); } /* ── SMOOTH TRANSITIONS when theme changes ───────────────────────── */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.30s ease, color 0.30s ease, border-color 0.25s ease, box-shadow 0.25s ease !important; } /* ═══════════════════════════════════════════════════════════════════ FLOATING GLASS TOGGLE (#rasaGlassToggle — injected by theme.js) ═══════════════════════════════════════════════════════════════════ */ #rasaGlassToggle { position: fixed; bottom: 28px; right: 28px; z-index: 99999; border: none; padding: 0; cursor: pointer; background: none; outline: none; -webkit-tap-highlight-color: transparent; /* Size matches the pill */ width: 70px; height: 36px; } /* ── Track (the pill) ─────────────────────────────────────────────── */ .rg-track { position: relative; width: 70px; height: 36px; border-radius: 18px; display: block; overflow: visible; transition: background 0.4s ease, box-shadow 0.4s ease; } /* Dark mode track */ [data-theme="dark"] .rg-track { background: linear-gradient(160deg, #1c1c26 0%, #111118 60%, #0d0d14 100%); box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 2px 4px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.4); } /* Light mode track — bright metallic silver glass */ [data-theme="light"] .rg-track { background: linear-gradient(160deg, #f0f0f0 0%, #d8d8d8 50%, #c8c8c8 100%); box-shadow: 0 0 0 1px rgba(255,255,255,0.70), 0 2px 4px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.90), inset 0 -1px 0 rgba(0,0,0,0.08); } /* ── Ambient outer glow ──────────────────────────────────────────── */ .rg-glow { position: absolute; inset: -4px; border-radius: 22px; pointer-events:none; transition: opacity 0.4s ease, box-shadow 0.4s ease; border: 1px solid transparent; } /* Dark: subtle blue-white rim */ [data-theme="dark"] .rg-glow { border-color: rgba(180,200,255,0.18); box-shadow: 0 0 16px rgba(120,160,255,0.12); } /* Light: bright white halo (like the video) */ [data-theme="light"] .rg-glow { border-color: rgba(255,255,255,0.85); box-shadow: 0 0 20px rgba(255,255,255,0.55), 0 0 40px rgba(255,255,255,0.25); } /* ── Thumb (the sliding circle) ──────────────────────────────────── */ .rg-thumb { position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.38s cubic-bezier(0.34, 1.20, 0.64, 1), background 0.38s ease, box-shadow 0.38s ease; } /* Dark mode thumb — dark glass, glowing teal moon */ [data-theme="dark"] .rg-thumb { transform: translateX(0); background: radial-gradient(circle at 38% 38%, #2a2a38, #111118); box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 12px rgba(80,200,220,0.70), 0 0 28px rgba(80,200,220,0.35), 0 2px 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12); } /* Light mode thumb — bright, warm sun glow, slides right */ [data-theme="light"] .rg-thumb { transform: translateX(34px); background: radial-gradient(circle at 35% 35%, #ffffff, #e8e8e0); box-shadow: 0 0 0 1px rgba(255,255,255,0.80), 0 0 12px rgba(255,200,60,0.55), 0 0 28px rgba(255,200,60,0.25), 0 2px 6px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.95); } /* ── Icon inside thumb ────────────────────────────────────────────── */ .rg-icon { display: flex; align-items: center; justify-content: center; line-height: 1; transition: color 0.3s ease, opacity 0.3s ease; } /* Dark: icon colour = glowing teal/cyan */ [data-theme="dark"] .rg-icon { color: #88e4f0; filter: drop-shadow(0 0 4px rgba(80,220,240,0.8)); } /* Light: icon colour = warm gold */ [data-theme="light"] .rg-icon { color: #b87800; filter: drop-shadow(0 0 3px rgba(255,190,40,0.6)); } /* ── Hover / press ────────────────────────────────────────────────── */ #rasaGlassToggle:hover .rg-track { filter: brightness(1.08); } #rasaGlassToggle:active .rg-thumb { transform: translateX(0) scale(0.92); } [data-theme="light"] #rasaGlassToggle:active .rg-thumb { transform: translateX(34px) scale(0.92); } /* ── Sidebar inline toggle (Dark / Light labels) — kept for future use */ .rasa-theme-toggle { display: flex; align-items:center; gap: 8px; background: none; border: none; padding: 0; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; } .tt-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); transition: color 0.25s; user-select: none; font-family: inherit; } [data-theme="dark"] .rasa-theme-toggle .tt-label-dark, [data-theme="light"] .rasa-theme-toggle .tt-label-light { color: var(--text-soft); font-weight: 600; } .tt-track { width:44px; height:24px; border-radius:12px; background:var(--rule-strong); border:1px solid var(--rule-strong); transition: background 0.28s, border-color 0.28s; flex-shrink:0; position:relative; } [data-theme="light"] .tt-track { background:rgba(168,110,0,0.15); border-color:rgba(168,110,0,0.25); } .tt-thumb { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--bg-card); box-shadow:0 1px 4px rgba(0,0,0,0.3); transition:transform 0.28s cubic-bezier(.4,0,.2,1), background 0.28s; display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1; } [data-theme="light"] .tt-thumb { transform:translateX(20px); }