:root{ /* default mode is clean */ } /* Mode classes live on (via body_class) */ .rt-mode-clean{ /* crisp + minimal */ --rt-header-bg: color-mix(in srgb, var(--rt-surface) 92%, transparent); --rt-card-bg: var(--rt-surface); --rt-card-border: var(--rt-border); --rt-surface-blur: 10px; --rt-card-radius: 14px; --rt-btn-radius: 12px; --rt-chip-radius: 9999px; } /* Big, obvious vibe differences (safe overlays – no layout impact) */ body.rt-mode-clean::before, body.rt-mode-glass::before, body.rt-mode-neon::before, body.rt-mode-retro::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; } body > *{ position:relative; z-index:1; } body.rt-mode-clean::before{ background: radial-gradient(1200px 700px at 20% -10%, color-mix(in srgb, var(--rt-accent) 18%, transparent), transparent 65%), radial-gradient(1000px 700px at 90% 110%, color-mix(in srgb, var(--rt-accent-2) 16%, transparent), transparent 60%); opacity:.38; } .rt-mode-glass{ --rt-header-bg:rgba(255,255,255,.08); --rt-search-bg:rgba(255,255,255,.07); --rt-card-bg:rgba(255,255,255,.06); --rt-card-border:rgba(255,255,255,.22); --rt-card-shadow:0 14px 44px rgba(0,0,0,.45); --rt-search-border:rgba(255,255,255,.26); --rt-chip-bg:rgba(255,255,255,.07); --rt-surface-blur:28px; --rt-card-radius: 18px; --rt-btn-radius: 14px; --rt-chip-radius: 9999px; } /* Glass gets true frosted cards */ body.rt-mode-glass .rt-video-card{ backdrop-filter: blur(var(--rt-surface-blur)); } body.rt-mode-glass::before{ background: radial-gradient(900px 500px at 10% 0%, rgba(255,255,255,0.10), transparent 70%), radial-gradient(1000px 700px at 100% 20%, color-mix(in srgb, var(--rt-accent-2) 18%, transparent), transparent 65%), linear-gradient(180deg, rgba(255,255,255,0.06), transparent 35%); opacity:.92; } .rt-mode-neon{ --rt-header-bg:color-mix(in srgb, var(--rt-surface) 70%, transparent); --rt-card-bg: color-mix(in srgb, var(--rt-surface) 88%, #000); --rt-card-border: color-mix(in srgb, var(--rt-accent-2) 22%, var(--rt-border)); --rt-chip-bg: color-mix(in srgb, var(--rt-accent) 16%, transparent); --rt-search-border: color-mix(in srgb, var(--rt-accent-2) 28%, transparent); --rt-search-glow:var(--rt-glow-accent); --rt-chip-active-glow:var(--rt-glow-accent); --rt-card-hover-glow:var(--rt-glow-accent); --rt-btn-shadow:var(--rt-glow-accent); --rt-card-glow:46px; --rt-surface-blur: 16px; --rt-card-radius: 16px; --rt-btn-radius: 10px; --rt-chip-radius: 9999px; } /* Neon: stronger outer glow on cards even at rest */ body.rt-mode-neon .rt-video-card{ box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 calc(26px * var(--rt-glow-strength)) color-mix(in srgb, var(--rt-accent-2) 28%, transparent); } body.rt-mode-neon::before{ background: radial-gradient(900px 520px at 18% -10%, color-mix(in srgb, var(--rt-accent) 30%, transparent), transparent 65%), radial-gradient(950px 620px at 90% 110%, color-mix(in srgb, var(--rt-accent-2) 28%, transparent), transparent 62%), repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 3px); opacity:1; mix-blend-mode: screen; } .rt-mode-retro{ --rt-link:color-mix(in srgb, var(--rt-accent-2) 70%, #fff); --rt-header-bg:rgba(0,0,0,.35); --rt-card-bg:rgba(0,0,0,.18); --rt-card-border:rgba(255,255,255,.28); --rt-card-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.55); --rt-radius:6px; --rt-surface-blur: 6px; --rt-card-radius: 6px; --rt-btn-radius: 6px; --rt-chip-radius: 12px; } /* Retro: harder separators */ body.rt-mode-retro .rt-video-card{ border-width: 2px; } body.rt-mode-retro::before{ background: radial-gradient(1100px 700px at 0% 20%, rgba(255,209,102,0.10), transparent 62%), radial-gradient(1000px 650px at 100% 80%, rgba(255,61,129,0.12), transparent 60%), repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 7px), repeating-linear-gradient(180deg, rgba(0,0,0,0.22) 0, rgba(0,0,0,0.22) 2px, transparent 2px, transparent 6px); opacity:.95; }