/* Import Onest from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800;900&display=swap');
/* ===============================
Moonlit Night (Pro)
=============================== */
:root {
--bg-primary: #0b0d17;
--bg-page: linear-gradient(180deg,#0d0f23 0%, #060710 100%);
--card: #1a1c2a;
--muted: #a1a8c3;
--text: #e0e6f1;
--accent: #7f8aff;
--accent-2: #5a4fc0;
--glass: rgba(255,255,255,0.03);
--radius: 12px;
--small-radius: 12px;
--gap: 14px;
--max-width: 720px;
--border: rgba(255, 255, 255, 0.048);
}
/* ===============================
LIGHT THEME: Root Vibe (Neutral White)
=============================== */
body.theme-light {
--bg-primary: #0b0d17; /* same as root for that deep base vibe */
--bg-page: linear-gradient(180deg, #0d0f23 0%, #060710 100%); /* mimic root gradient */
--card: #1a1c2a; /* card color like root */
--muted: #a1a8c3; /* soft muted text */
--text: #e0e6f1; /* root-style readable off-white */
--accent: #ffffff; /* replace violet/blue with neutral white accent */
--accent-2: #cfd6e0; /* lighter companion accent for gradients/buttons */
--glass: rgba(255,255,255,0.05); /* subtle glass overlay */
--radius: 12px;
--small-radius: 12px;
--gap: 14px;
--max-width: 720px;
--btn-text-light: #e0e6f1; /* button text */
}
/* ===============================
VERY DARK THEME: Eclipse Pro
=============================== */
body.theme-eclipse {
--bg-primary: #000000;
--bg-page: linear-gradient(180deg,#0a0a0a 0%, #050505 100%);
--card: #111111;
--muted: #777777;
--text: #f0f0f0;
--accent: #ff4f7c;
--accent-2: #ff1f8c;
--glass: rgba(255,255,255,0.06);
--radius: 12px;
--small-radius: 12px;
--gap: 14px;
--max-width: 720px;
}
/* Mystery Falls – Gravity Falls Inspired (Forest Mystery, Journal Vibe) */
body.theme-mystery-falls {
/* Deep mysterious forest night with purple undertones */
--bg-primary: #1a1423;
/* Gradient from warm sunset purple to deep forest */
--bg-page: linear-gradient(180deg, #2d1b3a 0%, #1a1423 50%, #0f1419 100%);
/* Cards: Slightly lighter, mysterious wood/shack feel */
--card: #221a2e;
/* Muted text: Dusty pine green / sage */
--muted: #8b9a8b;
/* Main text: Warm parchment / old paper */
--text: #f0e6d2;
/* Primary accent: Glowing sunset pink-purple (like the sky in the images) */
--accent: #d86fff;
/* Secondary accent: Deeper mystery purple */
--accent-2: #9f4fd8;
/* Glass effect: Subtle magical glow */
--glass: rgba(216, 111, 255, 0.08);
/* Optional: Slightly warmer borders */
--border: rgba(255, 255, 255, 0.08);
}
/* Warrior Clash – Clash of Clans Inspired (Village Battle Energy) */
body.theme-warrior-clash {
/* Deep fiery sunset orange — base of the village at battle hour */
--bg-primary: #ff8c00;
/* Gradient from bright gold sky to deep fiery orange ground */
--bg-page: linear-gradient(180deg, #ffd700 0%, #ff8c00 50%, #cc6f00 100%);
/* Cards: Rich golden-brown panels (wooden structures feel) */
--card: #cc6f00;
/* Muted text: Deep gold for secondary elements */
--muted: #b8860b;
/* Main text: Bright white for strong readability on warm background */
--text: #ffffff;
/* Primary accent: Iconic Clash gold (trophies, logo, resources) */
--accent: #ffd700;
/* Secondary accent: Fiery red-orange (arrows, fire, attack energy) */
--accent-2: #ff4500;
/* Glass: Warm golden glow */
--glass: rgba(255, 215, 0, 0.15);
/* Borders: Golden outline */
--border: rgba(255, 215, 0, 0.2);
}
body.theme-winter-wonder {
/* Deep midnight blue — cold winter night sky */
--bg-primary: #0f172a;
/* Gradient from aurora purple-blue to deep frozen night */
--bg-page: linear-gradient(180deg, #1e293b 0%, #0f172a 60%, #0a1020 100%);
/* Cards: Frosted dark slate with subtle blue tint */
--card: #1e293b;
/* Muted text: Cool icy blue-gray */
--muted: #94a3b8;
/* Main text: Crisp snow white */
--text: #f0f9ff;
/* Primary accent: Aurora blue (northern lights glow) */
--accent: #60a5fa;
/* Secondary accent: Deeper aurora purple-blue */
--accent-2: #3b82f6;
/* Glass: Subtle frosted glow with aurora hint */
--glass: rgba(96, 165, 250, 0.08);
/* Borders: Soft icy edge */
--border: rgba(96, 165, 250, 0.15);
}
body.theme-cosmic-bird {
/* Deep cosmic void — rich navy purple */
--bg-primary: #0f172a;
/* Gradient from cosmic purple to deep space blue */
--bg-page: linear-gradient(180deg, #1e293b 0%, #0f172a 60%, #020617 100%);
/* Cards: Slightly lighter nebula panels */
--card: #1e293b;
/* Muted text: Soft cosmic blue-gray */
--muted: #94a3b8;
/* Main text: Bright stellar white */
--text: #f0f9ff;
/* Primary accent: Electric cyan (like black hole jets / aurora) */
--accent: #22d3ee;
/* Secondary accent: Vibrant purple (nebula glow) */
--accent-2: #a78bfa;
/* Glass: Subtle cosmic glow */
--glass: rgba(34, 211, 238, 0.08);
/* Borders: Faint stellar edge */
--border: rgba(34, 211, 238, 0.15);
}
body.theme-portal-chaos {
/* Deep interdimensional void purple */
--bg-primary: #0a001f;
/* Gradient from toxic portal green to chaotic purple */
--bg-page: linear-gradient(180deg, #1a0033 0%, #0a001f 50%, #050011 100%);
/* Cards: Dark purple portal-rimmed panels */
--card: #1a0033;
/* Muted text: Sickly green-gray (like alien skin) */
--muted: #66ffaa;
/* Main text: Bright toxic white */
--text: #e0fffa;
/* Primary accent: Iconic portal green */
--accent: #00ff9d;
/* Secondary accent: Neon magenta (portal edges, chaos) */
--accent-2: #ff00ff;
/* Glass: Electric portal glow */
--glass: rgba(0, 255, 157, 0.12);
/* Borders: Pulsing portal edge */
--border: rgba(0, 255, 157, 0.2);
}
/* Subtle portal swirl in background */
body.theme-portal-chaos::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 30% 50%, rgba(0,255,157,0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 30%, rgba(255,0,255,0.08) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
animation: portal-swirl 20s linear infinite;
}
@keyframes portal-swirl {
0% { transform: rotate(0deg) scale(1); }
100% { transform: rotate(360deg) scale(1.1); }
}
/* Acidic button gradients */
.theme-portal-chaos .btn.primary {
background: linear-gradient(135deg, #00ff9d, #ff00ff);
color: #0a001f;
font-weight: 700;
text-shadow: 0 0 10px rgba(0,255,157,0.6);
}
body.theme-upside-down-glow {
/* Deep dark void — night in Hawkins with red sky glow */
--bg-primary: #0a0014;
/* Gradient from blood-red Mind Flayer sky to deep void */
--bg-page: linear-gradient(180deg, #1a0022 0%, #0a0014 50%, #05000a 100%);
/* Cards: Darker, shadowy panels (like the Upside Down) */
--card: #1a0022;
/* Muted text: Cold electric blue-gray */
--muted: #66ccff;
/* Main text: Crisp white for contrast */
--text: #e0f0ff;
/* Primary accent: Electric neon blue (Eleven's power, Christmas lights) */
--accent: #00e1ff;
/* Secondary accent: Blood red (Demogorgon, Mind Flayer, danger) */
--accent-2: #ff0033;
/* Glass: Pulsing red-blue glow */
--glass: rgba(0, 225, 255, 0.08);
/* Borders: Subtle red edge */
--border: rgba(255, 0, 51, 0.15);
}
/* Subtle red fog overlay */
body.theme-upside-down-glow::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 50% 20%, rgba(255,0,51,0.1) 0%, transparent 50%),
radial-gradient(circle at 30% 70%, rgba(0,225,255,0.05) 0%, transparent 40%);
pointer-events: none;
z-index: -1;
}
/* Red neon button style for danger actions */
.theme-upside-down-glow .btn.danger {
background: linear-gradient(135deg, #ff0033, #cc0022);
color: white;
box-shadow: 0 0 20px rgba(255,0,51,0.5);
}
body.theme-eternal-luxe {
/* Ultra-deep cosmic black with purple undertone */
--bg-primary: #0a0014;
/* Rich gradient: void black → deep purple → subtle gold shimmer */
--bg-page: linear-gradient(180deg, #1a0022 0%, #0a0014 50%, #05000a 100%);
/* Cards: Luxurious black marble feel */
--card: #110022;
/* Muted text: Soft antique gold */
--muted: #a89968;
/* Main text: Crisp platinum white */
--text: #f5f5f5;
/* Primary accent: Pure molten gold */
--accent: #ffd700;
/* Secondary accent: Warm glowing amber-gold */
--accent-2: #ffaa00;
/* Glass: Subtle golden frost */
--glass: rgba(255, 215, 0, 0.08);
/* Borders: Elegant gold edge */
--border: rgba(255, 215, 0, 0.25);
}
/* Epic golden marble overlay + subtle particle glow */
body.theme-eternal-luxe::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.12) 0%, transparent 30%),
radial-gradient(circle at 80% 20%, rgba(255, 170, 0, 0.1) 0%, transparent 30%),
radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.06) 0%, transparent 40%);
pointer-events: none;
z-index: -1;
animation: luxe-pulse 15s ease-in-out infinite alternate;
}
@keyframes luxe-pulse {
0% { opacity: 0.6; transform: scale(1); }
100% { opacity: 1; transform: scale(1.05); }
}
/* Golden buttons with black text */
.theme-eternal-luxe .btn.primary {
background: linear-gradient(135deg, #ffd700, #ffaa00);
color: #000;
font-weight: 800;
text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/* Profile preview gets royal treatment */
.theme-eternal-luxe #profile-preview-box {
border: 3px solid #ffd700;
box-shadow: 0 20px 50px rgba(255, 215, 0, 0.3),
inset 0 0 40px rgba(255, 215, 0, 0.1);
}
/* Theme tag gets golden shine */
.theme-eternal-luxe .preview-tag .tag-preview {
box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}
body.theme-weirdmageddon {
/* Deep interdimensional purple void — the rift itself */
--bg-primary: #0f001f;
/* Gradient: chaos portal purple → electric pink → golden apocalypse glow */
--bg-page: linear-gradient(180deg, #1a0033 0%, #0f001f 40%, #1a001a 70%, #2a0014 100%);
/* Cards: Dark rift-edged panels with subtle pink glow */
--card: #1a0033;
/* Muted text: Eerie cyan-gray (like possessed eyes) */
--muted: #a0a0ff;
/* Main text: Bright chaotic white */
--text: #f0e6ff;
/* Primary accent: Iconic neon magenta (Bill's chaos energy) */
--accent: #ff00ff;
/* Secondary accent: Hot electric pink (portal edges, weirdness waves) */
--accent-2: #ff66cc;
/* Tertiary: Forbidden golden glow (Bill Cipher triangle hints) */
--accent-3: #ffd700;
/* Glass: Pulsing portal shimmer */
--glass: rgba(255, 0, 255, 0.1);
/* Borders: Electric pink rift */
--border: rgba(255, 0, 255, 0.25);
}
/* Epic chaos overlay — swirling rifts + golden triangle hints */
body.theme-weirdmageddon::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 20% 70%, rgba(255, 0, 255, 0.15) 0%, transparent 35%),
radial-gradient(circle at 80% 30%, rgba(255, 102, 204, 0.12) 0%, transparent 35%),
radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.08) 0%, transparent 40%);
pointer-events: none;
z-index: -1;
animation: weird-swirl 25s linear infinite;
}
@keyframes weird-swirl {
0% { transform: rotate(0deg) scale(1); opacity: 0.8; }
50% { transform: rotate(180deg) scale(1.1); opacity: 1; }
100% { transform: rotate(360deg) scale(1); opacity: 0.8; }
}
/* Chaos buttons — gradient from magenta to pink with gold text shadow */
.theme-weirdmageddon .btn.primary {
background: linear-gradient(135deg, #ff00ff, #ff66cc);
color: #000;
font-weight: 800;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
box-shadow: 0 0 30px rgba(255, 0, 255, 0.7);
}
/* Profile box — rift portal frame */
.theme-weirdmageddon #profile-preview-box {
border: 4px solid #ff00ff;
box-shadow: 0 20px 60px rgba(255, 0, 255, 0.4),
inset 0 0 50px rgba(255, 215, 0, 0.15);
}
/* Theme tag — ultimate chaos shine */
.theme-weirdmageddon .preview-tag .tag-preview {
box-shadow: 0 0 30px rgba(255, 0, 255, 0.8);
animation: weird-pulse 3s infinite;
}
@keyframes weird-pulse {
0%, 100% { box-shadow: 0 0 30px rgba(255, 0, 255, 0.8); }
50% { box-shadow: 0 0 50px rgba(255, 0, 255, 1), 0 0 80px rgba(255, 102, 204, 0.6); }
}
body.theme-portal-fluid {
/* Deep garage lab void — dark navy blue-black */
--bg-primary: #0a001a;
/* Gradient: lab shadows to deep blue with cyan fluid undertone */
--bg-page: linear-gradient(180deg, #001133 0%, #0a001a 50%, #000011 100%);
/* Cards: Dark lab metal panels */
--card: #0f1a2e;
/* Muted text: Cool lab gray */
--muted: #88aacc;
/* Main text: Crisp cyan-white */
--text: #e0ffff;
/* Primary accent: Bright cyan portal fluid glow */
--accent: #00ffff;
/* Secondary accent: Lighter cyan-teal swirl */
--accent-2: #00ffcc;
/* Glass: Fluid shimmer */
--glass: rgba(0, 255, 255, 0.1);
/* Borders: Electric cyan edge */
--border: rgba(0, 255, 255, 0.25);
}
/* Swirling portal fluid overlay — subtle blue-cyan waves */
body.theme-portal-fluid::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 30% 70%, rgba(0, 255, 255, 0.15) 0%, transparent 40%),
radial-gradient(circle at 70% 30%, rgba(0, 255, 204, 0.1) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.08) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
animation: fluid-swirl 18s ease-in-out infinite alternate;
}
@keyframes fluid-swirl {
0% { transform: rotate(0deg) scale(1); opacity: 0.7; }
100% { transform: rotate(10deg) scale(1.08); opacity: 1; }
}
/* Fluid buttons — cyan gradient */
.theme-portal-fluid .btn.primary {
background: linear-gradient(135deg, #00ffff, #00ffcc);
color: #000;
font-weight: 800;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
}
/* Preview box — glowing fluid frame */
.theme-portal-fluid #profile-preview-box {
border: 3px solid #00ffff;
box-shadow: 0 15px 50px rgba(0, 255, 255, 0.3),
inset 0 0 40px rgba(0, 255, 204, 0.1);
}
/* Tag shine */
.theme-portal-fluid .preview-tag .tag-preview {
box-shadow: 0 0 25px rgba(0, 255, 255, 0.7);
}
body.theme-rainbow-after-rain {
/* Deep stormy sky base fading to rainbow glow */
--bg-primary: #1a0033;
/* Epic rainbow gradient — like a real post-rain sky */
--bg-page: linear-gradient(180deg, #1a0033 0%, #2a0066 30%, #440099 50%, #6600cc 70%, #8800ff 100%);
/* Cards: Soft rainbow-tinted glass */
--card: rgba(255, 255, 255, 0.08);
/* Muted text: Soft pastel gray */
--muted: #cccccc;
/* Main text: Bright white for pop */
--text: #ffffff;
/* Accents: Full rainbow cycle */
--accent: #ff0000; /* Red */
--accent-2: #ff8800; /* Orange */
--accent-3: #ffff00; /* Yellow */
--accent-4: #00ff00; /* Green */
--accent-5: #0088ff; /* Blue */
--accent-6: #ff00ff; /* Purple */
/* Glass: Rainbow shimmer */
--glass: rgba(255, 255, 255, 0.15);
/* Borders: Rainbow glow edge */
--border: rgba(255, 255, 255, 0.3);
}
/* Insane rainbow pulse + subtle rain sparkle animation */
body.theme-rainbow-after-rain::before {
content: '';
position: fixed;
inset: 0;
background:
linear-gradient(135deg,
rgba(255,0,0,0.1) 0%,
rgba(255,136,0,0.1) 15%,
rgba(255,255,0,0.1) 30%,
rgba(0,255,0,0.1) 45%,
rgba(0,136,255,0.1) 60%,
rgba(255,0,255,0.1) 75%,
rgba(255,0,0,0.1) 100%);
pointer-events: none;
z-index: -1;
animation: rainbow-shift 20s linear infinite;
opacity: 0.6;
}
body.theme-rainbow-after-rain::after {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 50% 20%, rgba(255,255,255,0.15) 0%, transparent 5%),
radial-gradient(circle at 30% 80%, rgba(255,255,255,0.1) 0%, transparent 4%),
radial-gradient(circle at 70% 60%, rgba(255,255,255,0.12) 0%, transparent 5%);
pointer-events: none;
z-index: -1;
animation: rain-sparkle 10s ease-in-out infinite;
}
@keyframes rainbow-shift {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}
@keyframes rain-sparkle {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); }
}
@keyframes rainbow-border {
0% { border-color: #ff0000; }
16% { border-color: #ff8800; }
33% { border-color: #ffff00; }
50% { border-color: #00ff00; }
66% { border-color: #0088ff; }
83% { border-color: #ff00ff; }
100% { border-color: #ff0000; }
}
/* Rainbow buttons — cycling gradient */
.theme-rainbow-after-rain .btn.primary {
background: linear-gradient(135deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #ff00ff);
background-size: 300% 300%;
animation: rainbow-bg 8s ease infinite;
color: #000;
font-weight: 800;
}
@keyframes rainbow-bg {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Preview box — ultimate rainbow frame */
.theme-rainbow-after-rain #profile-preview-box {
border: 5px solid #ffffff;
box-shadow: 0 20px 60px rgba(255, 255, 255, 0.4),
inset 0 0 60px rgba(255, 0, 255, 0.2);
animation: rainbow-border 5s linear infinite;
}
/* Tag — blinding rainbow shine */
.theme-rainbow-after-rain .preview-tag .tag-preview {
box-shadow: 0 0 50px rgba(255, 255, 255, 1);
animation: rainbow-pulse 3s infinite;
}
@keyframes rainbow-pulse {
0%, 100% { box-shadow: 0 0 50px rgba(255, 255, 255, 1); }
50% { box-shadow: 0 0 80px rgba(255, 255, 255, 1), 0 0 120px rgba(255, 0, 255, 0.8); }
}
/* Base state: very faint, very slow rainbow that is always there but almost invisible */
.theme-rainbow-after-rain .link-item {
position: relative;
display: block;
padding: 0.75rem 1.1rem;
color: var(--text);
text-decoration: none;
background: linear-gradient(
90deg,
rgba(255, 0, 85, 0.03) 0%,
rgba(255, 136, 0, 0.03) 20%,
rgba(221, 255, 0, 0.025) 40%,
rgba(0, 255, 136, 0.025) 60%,
rgba(0, 153, 255, 0.03) 80%,
rgba(204, 0, 255, 0.03) 100%
);
background-size: 300% 300%;
animation: slow-rainbow-drift 28s ease-in-out infinite; /* always slowly moving, very calm */
border: none !important;
box-shadow: none !important;
border-radius: 8px;
transition:
opacity 1.2s ease, /* main fade in/out duration — feels smooth */
background-opacity 1.2s ease,
color 0.9s ease,
transform 0.4s ease;
overflow: hidden;
}
/* On hover: just make the rainbow clearly visible + tiny lift */
.theme-rainbow-after-rain .link-item:hover {
background: linear-gradient( /* same gradient, but we override opacity via variable or directly */
90deg,
rgba(255, 0, 85, 0.14) 0%,
rgba(255, 136, 0, 0.14) 20%,
rgba(221, 255, 0, 0.12) 40%,
rgba(0, 255, 136, 0.12) 60%,
rgba(0, 153, 255, 0.14) 80%,
rgba(204, 0, 255, 0.14) 100%
);
/* We keep the same animation — no restart */
color: #f0f0ff;
transform: translateY(-1px);
}
/* When not hovered anymore → the opacity slowly drops back over 1.2 seconds */
.theme-rainbow-after-rain .link-item:not(:hover) {
/* The background is already set in base → it just fades down naturally via transition */
}
/* Optional: if you want even gentler hover response, slow the animation a tiny bit more on hover */
.theme-rainbow-after-rain .link-item:hover {
animation-duration: 24s; /* slightly faster when looked at — feels more alive, still calm */
}
/* The always-running slow drift */
@keyframes slow-rainbow-drift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Optional gentle shine (still very subtle) */
.theme-rainbow-after-rain .link-item::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,0.06) 45%,
transparent 100%
);
transform: translateX(-120%);
transition: transform 3s ease;
pointer-events: none;
opacity: 0;
}
.theme-rainbow-after-rain .link-item:hover::after {
transform: translateX(120%);
opacity: 1;
}
body.theme-executive-platinum {
/* Pure white primary background */
--bg-primary: #ffffff;
/* Very light gray page gradient for depth (almost white) */
--bg-page: linear-gradient(180deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
/* Cards: Soft light gray with subtle shadow */
--card: #ffffff;
/* Extra card variant for depth */
--card-secondary: #f8f9fa;
/* Muted text: Medium gray */
--muted: #6c757d;
/* Main text: Dark professional gray */
--text: #343a40;
/* Primary accent: Deep navy blue (trust, authority) */
--accent: #0d47a1;
/* Secondary accent: Steel blue-gray */
--accent-2: #495057;
/* Tertiary: Platinum silver for highlights */
--accent-3: #adb5bd;
/* Glass: Very subtle frost (keeps it clean) */
--glass: rgba(255, 255, 255, 0.6);
/* Borders: Light professional gray */
--border: #dee2e6;
}
/* Clean navy buttons */
.theme-executive-platinum .btn.primary {
background: linear-gradient(135deg, #0d47a1, #1565c0);
color: #ffffff;
font-weight: 600;
}
/* Preview box — elegant navy frame */
.theme-executive-platinum #profile-preview-box {
border: 3px solid #0d47a1;
box-shadow: 0 15px 40px rgba(13, 71, 161, 0.1);
}
/* Tag — subtle professional shine */
.theme-executive-platinum .preview-tag .tag-preview {
box-shadow: 0 0 15px rgba(13, 71, 161, 0.2);
}
/* Cards get refined shadow */
.theme-executive-platinum .card {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #dee2e6;
}
body.theme-executive-onyx {
/* Deep onyx black primary background */
--bg-primary: #0a0a0f;
/* Subtle dark gradient for depth */
--bg-page: linear-gradient(180deg, #111116 0%, #0a0a0f 50%, #050508 100%);
/* Cards: Dark slate gray with soft elevation */
--card: #111116;
/* Muted text: Medium cool gray */
--muted: #718096;
/* Main text: Light platinum gray */
--text: #e2e8f0;
/* Primary accent: Deep corporate navy */
--accent: #1e40af;
/* Secondary accent: Steel blue-gray */
--accent-2: #2d3748;
/* Tertiary: Platinum silver highlights */
--accent-3: #a0aec0;
/* Glass: Subtle dark frost */
--glass: rgba(30, 64, 175, 0.08);
/* Borders: Soft dark edge */
--border: #2d3748;
}
/* Elegant navy buttons */
.theme-executive-onyx .btn.primary {
background: linear-gradient(135deg, #1e40af, #2563eb);
color: #ffffff;
font-weight: 600;
}
/* Preview box — refined navy frame */
.theme-executive-onyx #profile-preview-box {
border: 3px solid #1e40af;
box-shadow: 0 15px 50px rgba(30, 64, 175, 0.15);
}
/* Tag — subtle professional glow */
.theme-executive-onyx .preview-tag .tag-preview {
box-shadow: 0 0 20px rgba(30, 64, 175, 0.25);
}
/* Cards get sophisticated elevation */
.theme-executive-onyx .card {
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
border: 1px solid #2d3748;
}
body.theme-autobot-prime {
/* Deep cyber dark void — Autobot command base */
--bg-primary: #0a0014;
/* Gradient: dark navy to red-tinted void */
--bg-page: linear-gradient(180deg, #001122 0%, #0a0014 50%, #140000 100%);
/* Cards: Metallic dark panels */
--card: #111122;
/* Muted text: Cool silver-gray */
--muted: #a0a0c0;
/* Main text: Bright matrix white */
--text: #e0e8ff;
/* Primary accent: Iconic Autobot red */
--accent: #ff0000;
/* Secondary accent: Electric blue energy (matrix, eyes) */
--accent-2: #00aaff;
/* Tertiary: Metallic silver armor */
--accent-3: #c0c0c0;
/* Glass: Subtle energy shimmer */
--glass: rgba(0, 170, 255, 0.1);
/* Borders: Red alert edge */
--border: rgba(255, 0, 0, 0.25);
}
/* Glowing Autobot energy overlay — matrix pulses + red symbol hints */
body.theme-autobot-prime::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 30% 70%, rgba(0, 170, 255, 0.15) 0%, transparent 40%),
radial-gradient(circle at 70% 30%, rgba(255, 0, 0, 0.12) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(192, 192, 192, 0.08) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
animation: matrix-pulse 15s ease-in-out infinite;
}
@keyframes matrix-pulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); }
}
/* Autobot buttons — red to blue gradient */
.theme-autobot-prime .btn.primary {
background: linear-gradient(135deg, #ff0000, #00aaff);
color: #ffffff;
font-weight: 800;
text-shadow: 0 0 10px rgba(0, 170, 255, 0.6);
}
/* Preview box — matrix energy frame */
.theme-autobot-prime #profile-preview-box {
border: 4px solid #ff0000;
box-shadow: 0 20px 60px rgba(255, 0, 0, 0.4),
inset 0 0 50px rgba(0, 170, 255, 0.15);
}
/* Tag — heroic glow */
.theme-autobot-prime .preview-tag .tag-preview {
box-shadow: 0 0 30px rgba(255, 0, 0, 0.7);
}
body.theme-digital-rain {
--bg-primary: #000000;
--bg-page: #000000;
--card: #0a0f0a;
--muted: #004400;
--text: #00ff00;
--accent: #00ff00;
--accent-2: #00cc00;
--glass: rgba(0, 255, 0, 0.08);
--border: rgba(0, 255, 0, 0.2);
}
/* Digital rain animation */
body.theme-digital-rain::before {
content: '';
position: fixed;
inset: 0;
background: linear-gradient(transparent, rgba(0,255,0,0.05));
pointer-events: none;
z-index: -1;
animation: matrix-rain 10s linear infinite;
opacity: 0.8;
}
@keyframes matrix-rain {
0% { background-position: 0 0; }
100% { background-position: 0 1000px; }
}
body.theme-digital-rain::after {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(90deg, transparent 0px, rgba(0,255,0,0.03) 1px, transparent 2px);
pointer-events: none;
z-index: -1;
animation: scan-lines 8s linear infinite;
}
@keyframes scan-lines {
0% { transform: translateY(0); }
100% { transform: translateY(10px); }
}
body.theme-springfield-sunset {
--bg-primary: #da70d6;
--bg-page: linear-gradient(180deg, #87ceeb 0%, #da70d6 50%, #ff69b4 100%);
--card: rgba(255, 255, 255, 0.9);
--muted: #666666;
--text: #333333;
--accent: #ffd700; /* Simpsons yellow */
--accent-2: #ff69b4; /* Pink sky */
--glass: rgba(255, 255, 255, 0.7);
--border: #ffffff;
}
/* Subtle drifting clouds */
body.theme-springfield-sunset::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4) 0%, transparent 20%),
radial-gradient(circle at 70% 50%, rgba(255,255,255,0.3) 0%, transparent 25%);
pointer-events: none;
z-index: -1;
animation: clouds-drift 40s linear infinite;
}
@keyframes clouds-drift {
0% { transform: translateX(-100px); }
100% { transform: translateX(100px); }
}
/* Yellow accents glow */
.theme-springfield-sunset .btn.primary {
background: linear-gradient(135deg, #ffd700, #ffaa00);
color: #000;
}
body.theme-hackerman-elite {
/* Pure black hacker void */
--bg-primary: #000000;
/* Solid black page for max contrast */
--bg-page: #000000;
/* Cards: Dark green-tinted screens */
--card: #0a140a;
/* Muted text: Dim green */
--muted: #006600;
/* Main text: Bright green code */
--text: #00ff00;
/* Primary accent: Intense green */
--accent: #00ff00;
/* Secondary: Deeper green glow */
--accent-2: #00cc00;
/* Glass: Green terminal frost */
--glass: rgba(0, 255, 0, 0.08);
/* Borders: Green edge */
--border: rgba(0, 255, 0, 0.3);
}
/* Classic falling digital rain animation */
body.theme-hackerman-elite::before {
content: '';
position: fixed;
inset: 0;
background: linear-gradient(transparent, rgba(0,255,0,0.1));
pointer-events: none;
z-index: -1;
animation: hackerman-rain 12s linear infinite;
opacity: 0.9;
}
@keyframes hackerman-rain {
0% { background-position: 0 0; }
100% { background-position: 0 2000px; }
}
/* Subtle scan lines + flicker for old CRT feel */
body.theme-hackerman-elite::after {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(0deg, transparent 0px, rgba(0,255,0,0.05) 2px, transparent 4px);
pointer-events: none;
z-index: -1;
animation: scan-flicker 8s linear infinite;
}
@keyframes scan-flicker {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
10%, 30%, 70% { opacity: 0.6; } /* Hackerman flicker energy */
}
/* Hackerman buttons — pure green */
.theme-hackerman-elite .btn.primary {
background: linear-gradient(135deg, #00ff00, #00cc00);
color: #000;
font-weight: 800;
text-shadow: 0 0 15px rgba(0, 255, 0, 0.8);
}
/* Preview box — glowing terminal screen */
.theme-hackerman-elite #profile-preview-box {
border: 4px solid #00ff00;
box-shadow: 0 20px 60px rgba(0, 255, 0, 0.5),
inset 0 0 50px rgba(0, 204, 0, 0.2);
}
/* Tag — blinding green shine */
.theme-hackerman-elite .preview-tag .tag-preview {
box-shadow: 0 0 40px rgba(0, 255, 0, 1);
animation: hackerman-pulse 2s infinite;
}
@keyframes hackerman-pulse {
0%, 100% { box-shadow: 0 0 40px rgba(0, 255, 0, 1); }
50% { box-shadow: 0 0 70px rgba(0, 255, 0, 1), 0 0 100px rgba(0, 204, 0, 0.8); }
}
body.theme-hackerman {
/* Deep purple-black cyber void */
--bg-primary: #0a0014;
/* Gradient: violet funk madness */
--bg-page: linear-gradient(180deg, #110022 0%, #0a0014 50%, #05000a 100%);
/* Cards: Dark violet panels */
--card: #1a0a2a;
/* Muted text: Soft purple-gray */
--muted: #9966cc;
/* Main text: Bright violet white */
--text: #e6ccff;
/* Primary accent: Dark violet (classic cyber) */
--accent: #8a2be2;
/* Secondary accent: Orchid purple funk */
--accent-2: #9932cc;
/* Tertiary: Hot pink-purple glow */
--accent-3: #da70d6;
/* Glass: Violet shimmer */
--glass: rgba(138, 43, 226, 0.12);
/* Borders: Neon violet edge */
--border: rgba(138, 43, 226, 0.3);
}
/* Violet code rain animation — funky cascading glow */
body.theme-hackerman::before {
content: '';
position: fixed;
inset: 0;
background: linear-gradient(transparent, rgba(138, 43, 226, 0.1));
pointer-events: none;
z-index: -1;
animation: violet-rain 15s linear infinite;
opacity: 0.8;
}
@keyframes violet-rain {
0% { background-position: 0 0; }
100% { background-position: 0 2000px; }
}
/* Subtle scan lines + purple flicker */
body.theme-hackerman::after {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(90deg, transparent 0px, rgba(138, 43, 226, 0.05) 1px, transparent 2px);
pointer-events: none;
z-index: -1;
animation: violet-flicker 10s linear infinite;
}
@keyframes violet-flicker {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
15%, 35%, 75% { opacity: 0.5; } /* Funky Hackerman flicker */
}
/* Funky violet buttons */
.theme-hackerman .btn.primary {
background: linear-gradient(135deg, #8a2be2, #da70d6);
color: #000;
font-weight: 800;
text-shadow: 0 0 15px rgba(138, 43, 226, 0.8);
}
/* Preview box — violet terminal glow */
.theme-hackerman #profile-preview-box {
border: 4px solid #8a2be2;
box-shadow: 0 20px 60px rgba(138, 43, 226, 0.5),
inset 0 0 50px rgba(218, 112, 214, 0.15);
}
/* Tag — blinding violet shine */
.theme-hackerman .preview-tag .tag-preview {
box-shadow: 0 0 40px rgba(138, 43, 226, 1);
animation: violet-pulse 2.5s infinite;
}
@keyframes violet-pulse {
0%, 100% { box-shadow: 0 0 40px rgba(138, 43, 226, 1); }
50% { box-shadow: 0 0 70px rgba(138, 43, 226, 1), 0 0 100px rgba(218, 112, 214, 0.8); }
}
body.theme-carcosa-shadows {
/* Existing variables unchanged */
--bg-primary: #0a140a;
--bg-page: linear-gradient(180deg, #1a2d1a 0%, #0a140a 50%, #050a05 100%);
--card: #1a2d1a;
--muted: #556b2f;
--text: #d4d4aa;
--accent: #2d3f2d;
--accent-2: #8b8000;
--glass: rgba(139, 128, 0, 0.08);
--border: rgba(139, 128, 0, 0.15);
}
/* Existing fog glow */
body.theme-carcosa-shadows::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 20% 80%, rgba(139, 128, 0, 0.1) 0%, transparent 30%),
radial-gradient(circle at 80% 20%, rgba(85, 107, 47, 0.08) 0%, transparent 30%),
radial-gradient(circle at 50% 50%, rgba(139, 128, 0, 0.06) 0%, transparent 40%);
pointer-events: none;
z-index: -1;
animation: carcosa-fog 35s ease-in-out infinite alternate;
opacity: 0.7;
}
/* NEW: Subtle floating Carcosa spirals */
body.theme-carcosa-shadows::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 C70 30, 90 50, 70 70 C50 90, 30 70, 10 50 C30 30, 50 50, 70 30 C90 10, 70 30, 50 50 C30 70, 50 90, 70 70 C90 50, 70 30, 50 10' fill='none' stroke='%238b8000' stroke-width='1.5' opacity='0.15'/%3E%3C/svg%3E") center/300px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 C70 30, 90 50, 70 70 C50 90, 30 70, 10 50 C30 30, 50 50, 70 30 C90 10, 70 30, 50 50 C30 70, 50 90, 70 70 C90 50, 70 30, 50 10' fill='none' stroke='%238b8000' stroke-width='1.5' opacity='0.1'/%3E%3C/svg%3E") 20% 70%/250px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 C70 30, 90 50, 70 70 C50 90, 30 70, 10 50 C30 30, 50 50, 70 30 C90 10, 70 30, 50 50 C30 70, 50 90, 70 70 C90 50, 70 30, 50 10' fill='none' stroke='%238b8000' stroke-width='1.5' opacity='0.12'/%3E%3C/svg%3E") 80% 30%/280px no-repeat;
animation: spiral-drift 60s linear infinite;
opacity: 0.6;
}
@keyframes carcosa-fog {
0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
100% { transform: translate(30px, 20px) scale(1.05); opacity: 0.8; }
}
@keyframes spiral-drift {
0% {
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 0.5;
}
50% {
transform: translate(40px, -30px) rotate(180deg) scale(1.1);
opacity: 0.7;
}
100% {
transform: translate(0, 0) rotate(360deg) scale(1);
opacity: 0.5;
}
}
@keyframes spiral-pulse {
0%, 100% { box-shadow: 0 0 35px rgba(139, 128, 0, 0.5); }
50% { box-shadow: 0 0 50px rgba(139, 128, 0, 0.7); }
}
body.theme-winter-aurora {
--bg-primary: #0f172a;
--bg-page: linear-gradient(180deg, #1e293b 0%, #0f172a 60%, #020617 100%);
--card: #1e293b;
--muted: #94a3b8;
--text: #f0f9ff;
--accent: #fbbf24;
--accent-2: #60a5fa;
--glass: rgba(96, 165, 250, 0.08);
--border: rgba(96, 165, 250, 0.15);
}
/* Vibrant Aurora Borealis — glowing and majestic */
body.theme-winter-aurora::before {
content: '';
position: fixed;
inset: 0;
top: -60%;
height: 160%;
pointer-events: none;
z-index: -1;
background:
linear-gradient(90deg,
transparent 0%,
rgba(72, 187, 120, 0.3) 15%,
rgba(147, 51, 234, 0.35) 35%,
rgba(34, 211, 238, 0.3) 55%,
rgba(147, 51, 234, 0.25) 75%,
transparent 100%);
animation: aurora-flow 45s ease-in-out infinite;
opacity: 0.7;
filter: blur(60px);
}
@keyframes aurora-flow {
0% { transform: translateX(-30%) skewX(-8deg); opacity: 0.6; }
50% { transform: translateX(30%) skewX(8deg); opacity: 0.9; }
100% { transform: translateX(-30%) skewX(-8deg); opacity: 0.6; }
}
/* More frequent, realistic snowfall — gentle but steady, natural drift */
body.theme-winter-aurora::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
/* 14 soft, scattered flakes — more frequent but still calm and random */
radial-gradient(circle, rgba(255,255,255,0.95) 2.5px, transparent 2.5px) 5% 8%/180px 180px no-repeat,
radial-gradient(circle, rgba(240,249,255,0.9) 3px, transparent 3px) 75% 12%/220px 220px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.85) 2px, transparent 2px) 30% 20%/160px 160px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.9) 2.8px, transparent 2.8px) 90% 35%/200px 200px no-repeat,
radial-gradient(circle, rgba(240,249,255,0.8) 2.2px, transparent 2.2px) 15% 50%/170px 170px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.75) 1.8px, transparent 1.8px) 60% 65%/150px 150px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.9) 2.4px, transparent 2.4px) 45% 15%/190px 190px no-repeat,
radial-gradient(circle, rgba(240,249,255,0.85) 2.6px, transparent 2.6px) 80% 75%/210px 210px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.8) 2.1px, transparent 2.1px) 25% 30%/175px 175px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.85) 2.7px, transparent 2.7px) 55% 85%/195px 195px no-repeat,
radial-gradient(circle, rgba(240,249,255,0.75) 2px, transparent 2px) 70% 55%/165px 165px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.9) 2.3px, transparent 2.3px) 10% 70%/185px 185px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.8) 2.5px, transparent 2.5px) 85% 90%/205px 205px no-repeat,
radial-gradient(circle, rgba(240,249,255,0.85) 2.2px, transparent 2.2px) 40% 95%/180px 180px no-repeat;
opacity: 0.65; /* Slightly higher for better visibility */
animation:
snowfall-gentle 35s linear infinite,
snowfall-sway 16s ease-in-out infinite;
}
/* Slightly faster fall for more frequency feel */
@keyframes snowfall-gentle {
0% {
background-position:
5% -180px, 75% -220px, 30% -160px, 90% -200px,
15% -170px, 60% -150px, 45% -190px, 80% -210px,
25% -175px, 55% -195px, 70% -165px, 10% -185px,
85% -205px, 40% -180px;
}
100% {
background-position:
5% 1200px, 75% 1250px, 30% 1180px, 90% 1220px,
15% 1190px, 60% 1170px, 45% 1210px, 80% 1230px,
25% 1195px, 55% 1215px, 70% 1185px, 10% 1205px,
85% 1225px, 40% 1200px;
}
}
/* Natural, flowing sway */
@keyframes snowfall-sway {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(30px); }
35% { transform: translateX(-25px); }
55% { transform: translateX(20px); }
75% { transform: translateX(-30px); }
90% { transform: translateX(15px); }
}
/* Twinkling stars — gentle random sparkle */
body.theme-winter-aurora .stars {
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 15% 20%, #ffffff 0.5px, transparent 1px),
radial-gradient(circle at 35% 10%, #ffffff 0.8px, transparent 1px),
radial-gradient(circle at 60% 30%, #ffffff 0.6px, transparent 1px),
radial-gradient(circle at 80% 15%, #ffffff 1px, transparent 1px),
radial-gradient(circle at 25% 60%, #ffffff 0.7px, transparent 1px),
radial-gradient(circle at 50% 80%, #ffffff 0.9px, transparent 1px),
radial-gradient(circle at 70% 70%, #ffffff 0.5px, transparent 1px),
radial-gradient(circle at 90% 50%, #ffffff 0.8px, transparent 1px),
radial-gradient(circle at 45% 25%, #ffffff 0.6px, transparent 1px),
radial-gradient(circle at 10% 75%, #ffffff 0.7px, transparent 1px);
background-size: 300px 300px;
opacity: 0.8;
animation: twinkle 10s ease-in-out infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
.theme-winter-aurora .btn.primary {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #1e293b;
font-weight: 700;
}
.theme-winter-aurora #profile-preview-box {
border: 3px solid #fbbf24;
box-shadow: 0 15px 50px rgba(251, 191, 36, 0.3),
inset 0 0 40px rgba(96, 165, 250, 0.08);
}
.theme-winter-aurora .preview-tag .tag-preview {
box-shadow: 0 0 25px rgba(251, 191, 36, 0.6);
}
body.theme-tactical-eclipse {
--bg-primary: #0a0a14;
--bg-page: linear-gradient(180deg, #001122 0%, #0a0a14 60%, #000005 100%);
--card: #111122;
--muted: #6688aa;
--text: #d0e0ff;
--accent: #00aaff; /* HUD blue */
--accent-2: #ff3333; /* Alert red */
--glass: rgba(0, 170, 255, 0.08);
--border: rgba(0, 170, 255, 0.2);
}
body.theme-tactical-eclipse::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 30% 70%, rgba(0, 170, 255, 0.15) 0%, transparent 40%),
radial-gradient(circle at 70% 30%, rgba(255, 51, 51, 0.1) 0%, transparent 40%);
pointer-events: none;
z-index: -1;
animation: tactical-scan 20s linear infinite;
}
@keyframes tactical-scan {
0% { transform: translateY(0); opacity: 0.7; }
100% { transform: translateY(20px); opacity: 1; }
}
.theme-tactical-eclipse .btn.primary {
background: linear-gradient(135deg, #00aaff, #0066cc);
color: #fff;
}
body.theme-bikini-bottom-flowers {
/* Soft sky blue base — classic SpongeBob sky */
--bg-primary: #87ceeb;
/* Gentle gradient: light sky blue to deeper blue */
--bg-page: linear-gradient(180deg, #b0e0ff 0%, #87ceeb 50%, #add8e6 100%);
/* Cards: Very light semi-transparent white */
--card: rgba(255, 255, 255, 0.85);
/* Muted text: Soft gray */
--muted: #666666;
/* Main text: Dark for readability */
--text: #333333;
/* Primary accent: Pale green flower */
--accent: #98fb98;
/* Secondary: Yellow flower */
--accent-2: #ffd700;
/* Tertiary: Purple/pink flowers */
--accent-3: #da70d6;
/* Glass: Clean */
--glass: rgba(255, 255, 255, 0.7);
/* Borders: Soft white */
--border: #ffffff;
}
/* Floating SpongeBob-style flowers — slow drift, gentle rotation, random positions */
body.theme-bikini-bottom-flowers::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
/* Large pale green flower */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 20 Q65 5, 80 20 Q95 35, 80 50 Q95 65, 80 80 Q65 95, 50 80 Q35 95, 20 80 Q5 65, 20 50 Q5 35, 20 20 Q35 5, 50 20 Z M50 35 A15 15 0 1 1 50 65 A15 15 0 1 1 50 35' fill='%2398fb98'/%3E%3Ccircle cx='50' cy='50' r='10' fill='%2370c070'/%3E%3C/svg%3E") 15% 20%/120px no-repeat,
/* Yellow flower */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 20 Q65 5, 80 20 Q95 35, 80 50 Q95 65, 80 80 Q65 95, 50 80 Q35 95, 20 80 Q5 65, 20 50 Q5 35, 20 20 Q35 5, 50 20 Z M50 35 A15 15 0 1 1 50 65 A15 15 0 1 1 50 35' fill='%23ffd700'/%3E%3Ccircle cx='50' cy='50' r='10' fill='%23ccaa00'/%3E%3C/svg%3E") 70% 30%/100px no-repeat,
/* Purple flower */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 20 Q65 5, 80 20 Q95 35, 80 50 Q95 65, 80 80 Q65 95, 50 80 Q35 95, 20 80 Q5 65, 20 50 Q5 35, 20 20 Q35 5, 50 20 Z M50 35 A15 15 0 1 1 50 65 A15 15 0 1 1 50 35' fill='%23da70d6'/%3E%3Ccircle cx='50' cy='50' r='10' fill='%23aa4499'/%3E%3C/svg%3E") 40% 60%/110px no-repeat,
/* Pink flower */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 20 Q65 5, 80 20 Q95 35, 80 50 Q95 65, 80 80 Q65 95, 50 80 Q35 95, 20 80 Q5 65, 20 50 Q5 35, 20 20 Q35 5, 50 20 Z M50 35 A15 15 0 1 1 50 65 A15 15 0 1 1 50 35' fill='%23ff69b4'/%3E%3Ccircle cx='50' cy='50' r='10' fill='%23cc5588'/%3E%3C/svg%3E") 85% 15%/130px no-repeat,
/* Small teal flower */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 20 Q65 5, 80 20 Q95 35, 80 50 Q95 65, 80 80 Q65 95, 50 80 Q35 95, 20 80 Q5 65, 20 50 Q5 35, 20 20 Q35 5, 50 20 Z M50 35 A15 15 0 1 1 50 65 A15 15 0 1 1 50 35' fill='%2388ddff'/%3E%3Ccircle cx='50' cy='50' r='10' fill='%2366bbdd'/%3E%3C/svg%3E") 30% 80%/90px no-repeat;
animation: flowers-drift 80s linear infinite;
opacity: 0.9;
}
@keyframes flowers-drift {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-100vh) rotate(360deg); }
}
/* Gentle flower sway */
body.theme-bikini-bottom-flowers::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: inherit;
animation: flower-sway 20s ease-in-out infinite;
}
@keyframes flower-sway {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(30px); }
75% { transform: translateX(-30px); }
}
/* Sunny buttons */
.theme-bikini-bottom-flowers .btn.primary {
background: linear-gradient(135deg, #ffd700, #98fb98);
color: #333333;
font-weight: 700;
}
/* Preview box — soft sky frame */
.theme-bikini-bottom-flowers #profile-preview-box {
border: 3px solid #ffffff;
box-shadow: 0 15px 40px rgba(255, 255, 255, 0.2);
}
/* Tag — gentle glow */
.theme-bikini-bottom-flowers .preview-tag .tag-preview {
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
body.theme-patricks-paradise {
/* Soft Patrick pink base — under the rock feel */
--bg-primary: #ff69b4;
/* Gradient: hot pink to light pink misty */
--bg-page: linear-gradient(180deg, #ffccdd 0%, #ff69b4 40%, #da70d6 100%);
/* Cards: Light misty pink */
--card: rgba(255, 255, 255, 0.85);
/* Muted text: Sandy beige */
--muted: #f0e68c;
/* Main text: Dark for readability */
--text: #333333;
/* Primary accent: Patrick hot pink */
--accent: #ff69b4;
/* Secondary: Purple rock shadow */
--accent-2: #da70d6;
/* Tertiary: Ice cream vanilla */
--accent-3: #ffe4e1;
/* Glass: Soft */
--glass: rgba(255, 255, 255, 0.7);
/* Borders: Light pink */
--border: #ffffff;
}
/* Slow drifting jellyfish + floating starfish particles */
body.theme-patricks-paradise::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
/* Lazy jellyfish (pink glowing) */
radial-gradient(circle at 20% 30%, rgba(255, 105, 180, 0.3) 10px, transparent 20px),
radial-gradient(circle at 70% 50%, rgba(218, 112, 214, 0.25) 12px, transparent 22px),
radial-gradient(circle at 45% 80%, rgba(255, 105, 180, 0.2) 8px, transparent 18px),
/* Starfish particles */
radial-gradient(circle at 10% 60%, rgba(240, 230, 140, 0.3) 6px, transparent 12px),
radial-gradient(circle at 80% 20%, rgba(240, 230, 140, 0.25) 7px, transparent 14px);
animation: patrick-drift 60s linear infinite;
opacity: 0.6;
}
@keyframes patrick-drift {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-800px) rotate(15deg); }
}
/* Gentle sway for extra laziness */
body.theme-patricks-paradise::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: inherit;
animation: patrick-sway 25s ease-in-out infinite;
}
@keyframes patrick-sway {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(40px); }
75% { transform: translateX(-40px); }
}
/* Ice cream buttons — pink to vanilla */
.theme-patricks-paradise .btn.primary {
background: linear-gradient(135deg, #ff69b4, #ffe4e1);
color: #333333;
font-weight: 700;
}
/* Preview box — rock glow */
.theme-patricks-paradise #profile-preview-box {
border: 3px solid #ff69b4;
box-shadow: 0 15px 40px rgba(255, 105, 180, 0.3);
}
/* Tag — soft pink shine */
.theme-patricks-paradise .preview-tag .tag-preview {
box-shadow: 0 0 20px rgba(255, 105, 180, 0.6);
}
body.theme-gargantua-void {
/* Pure black cosmic void */
--bg-primary: #000000;
/* Subtle gradient for depth (black to faint blue void) */
--bg-page: linear-gradient(180deg, #0a0014 0%, #000000 50%, #000005 100%);
/* Cards: Dark void panels */
--card: #0f0a1a;
/* Muted text: Dusty cosmic gray */
--muted: #556677;
/* Main text: Bright star white */
--text: #e0e8ff;
/* Primary accent: Orange accretion disk fire */
--accent: #ff8800;
/* Secondary accent: Blue wormhole/matrix glow */
--accent-2: #00aaff;
/* Glass: Subtle cosmic haze */
--glass: rgba(0, 170, 255, 0.08);
/* Borders: Faint orange edge */
--border: rgba(255, 136, 0, 0.2);
}
/* Swirling accretion disk glow + drifting cosmic dust */
body.theme-gargantua-void::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 30% 70%, rgba(255, 136, 0, 0.2) 0%, transparent 40%),
radial-gradient(circle at 70% 30%, rgba(0, 170, 255, 0.15) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
animation: disk-swirl 60s linear infinite;
opacity: 0.7;
filter: blur(40px);
}
@keyframes disk-swirl {
0% { transform: rotate(0deg) scale(1); }
100% { transform: rotate(360deg) scale(1.05); }
}
/* Subtle drifting cosmic dust particles */
body.theme-gargantua-void::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,255,255,0.6) 1px, transparent 1px) 10% 20%/150px 150px no-repeat,
radial-gradient(circle, rgba(255,136,0,0.5) 1.2px, transparent 1.2px) 60% 40%/180px 180px no-repeat,
radial-gradient(circle, rgba(0,170,255,0.4) 0.8px, transparent 0.8px) 80% 70%/120px 120px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1px) 30% 80%/140px 140px no-repeat,
radial-gradient(circle, rgba(255,136,0,0.4) 1.1px, transparent 1.1px) 50% 10%/160px 160px no-repeat;
animation: dust-drift 50s linear infinite;
opacity: 0.5;
}
@keyframes dust-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1000px); }
}
/* Orange-blue buttons — accretion disk gradient */
.theme-gargantua-void .btn.primary {
background: linear-gradient(135deg, #ff8800, #00aaff);
color: #000000;
font-weight: 700;
}
/* Preview box — black hole event horizon frame */
.theme-gargantua-void #profile-preview-box {
border: 4px solid #ff8800;
box-shadow: 0 20px 60px rgba(255, 136, 0, 0.4),
inset 0 0 50px rgba(0, 170, 255, 0.1);
}
/* Tag — cosmic shine */
.theme-gargantua-void .preview-tag .tag-preview {
box-shadow: 0 0 30px rgba(255, 136, 0, 0.7);
}
body.theme-tesseract-interior {
--bg-primary: #000011;
--bg-page: linear-gradient(180deg, #0a1422 0%, #000011 50%, #000005 100%);
--card: rgba(10, 20, 40, 0.8);
--muted: #a0c0ff;
--text: #e0f0ff;
--accent: #ffffff; /* Pure light */
--accent-2: #a0c0ff; /* Soft blue grid */
--glass: rgba(224, 240, 255, 0.1);
--border: rgba(224, 240, 255, 0.2);
}
/* Infinite grid lines — tesseract structure */
body.theme-tesseract-interior::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(224, 240, 255, 0.08) 50px, rgba(224, 240, 255, 0.08) 51px),
repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(224, 240, 255, 0.08) 50px, rgba(224, 240, 255, 0.08) 51px);
animation: grid-pulse 20s ease-in-out infinite;
opacity: 0.4;
}
@keyframes grid-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
/* Floating bookshelf fragments */
body.theme-tesseract-interior::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
linear-gradient(90deg, rgba(224, 240, 255, 0.15) 2px, transparent 2px) 20% 30%/200px 100px no-repeat,
linear-gradient(90deg, rgba(224, 240, 255, 0.15) 2px, transparent 2px) 70% 60%/180px 80px no-repeat,
linear-gradient(90deg, rgba(224, 240, 255, 0.1) 2px, transparent 2px) 40% 80%/220px 120px no-repeat;
animation: bookshelf-float 40s linear infinite;
}
@keyframes bookshelf-float {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-1000px) rotate(5deg); }
}
body.theme-millers-planet {
--bg-primary: #001122;
--bg-page: linear-gradient(180deg, #334455 0%, #002233 60%, #001122 100%);
--card: rgba(0, 34, 51, 0.7);
--muted: #556677;
--text: #88aabb;
--accent: #ffffff; /* Wave foam */
--accent-2: #334455;
--glass: rgba(136, 170, 187, 0.1);
--border: rgba(136, 170, 187, 0.2);
}
/* Looming tidal wave horizon + drifting mist */
body.theme-millers-planet::before {
content: '';
position: fixed;
inset: 0;
bottom: 40%;
height: 60%;
pointer-events: none;
z-index: -1;
background: linear-gradient(to top, rgba(0,34,51,0.8), transparent);
animation: wave-loom 30s ease-in-out infinite;
}
@keyframes wave-loom {
0%, 100% { transform: translateY(0); opacity: 0.8; }
50% { transform: translateY(-20px); opacity: 1; }
}
/* Gentle mist drift */
body.theme-millers-planet::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 20% 50%, rgba(136,170,187,0.1) 0%, transparent 40%),
radial-gradient(circle at 80% 60%, rgba(136,170,187,0.08) 0%, transparent 40%);
animation: mist-drift 40s linear infinite;
}
@keyframes mist-drift {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
body.theme-gargantua-horizon {
/* Absolute black void base */
--bg-primary: #000000;
/* Subtle dark gradient for depth */
--bg-page: linear-gradient(180deg, #0a0014 0%, #000000 50%, #000005 100%);
/* Cards: Very dark void panels */
--card: #0a0a14;
/* Muted text: Faint cosmic gray */
--muted: #445566;
/* Main text: Bright star white */
--text: #d0e0ff;
/* Primary accent: Orange accretion fire */
--accent: #ff8800;
/* Secondary accent: Blue lensing glow */
--accent-2: #00aaff;
/* Glass: Subtle cosmic haze */
--glass: rgba(0, 170, 255, 0.08);
/* Borders: Orange disk edge */
--border: rgba(255, 136, 0, 0.2);
}
/* Swirling accretion disk — orange-blue glow around center */
body.theme-gargantua-horizon::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at center, transparent 20%, rgba(255, 136, 0, 0.3) 35%, rgba(0, 170, 255, 0.2) 50%, transparent 60%);
animation: disk-spin 60s linear infinite;
opacity: 0.8;
filter: blur(30px);
}
@keyframes disk-spin {
0% { transform: rotate(0deg) scale(1); }
100% { transform: rotate(360deg) scale(1.02); }
}
/* Drifting cosmic dust + faint stars */
body.theme-gargantua-horizon::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,255,255,0.4) 0.5px, transparent 1px) 15% 20%/200px 200px no-repeat,
radial-gradient(circle, rgba(255,136,0,0.3) 1px, transparent 1px) 70% 40%/250px 250px no-repeat,
radial-gradient(circle, rgba(0,170,255,0.2) 0.8px, transparent 0.8px) 40% 70%/180px 180px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.5) 0.6px, transparent 0.6px) 85% 15%/150px 150px no-repeat;
animation: dust-drift 50s linear infinite;
opacity: 0.4;
}
@keyframes dust-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
/* Disk gradient buttons */
.theme-gargantua-horizon .btn.primary {
background: linear-gradient(135deg, #ff8800, #00aaff);
color: #000000;
font-weight: 800;
}
/* Preview box — event horizon frame */
.theme-gargantua-horizon #profile-preview-box {
border: 5px solid #ff8800;
box-shadow: 0 20px 70px rgba(255, 136, 0, 0.5),
inset 0 0 60px rgba(0, 170, 255, 0.15);
}
/* Tag — intense disk shine */
.theme-gargantua-horizon .preview-tag .tag-preview {
box-shadow: 0 0 40px rgba(255, 136, 0, 0.8);
}
body.theme-google-classic {
--bg-primary: #64624a;
--bg-page: linear-gradient(180deg, #5881aa 0%, #e6dcb5 40%, #7b8da4 100%);
--card: #000;
--muted: #5f6368;
--text: white;
--accent: #4285f4;
--accent-2: #ea4335;
--accent-3: #fbbc05;
--accent-4: #34a853;
--glass: rgba(255, 255, 255, 0.8);
}
/* Subtle floating colorful dots — like Google loading animation */
body.theme-google-classic::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 15% 20%, #4285f4 8px, transparent 10px),
radial-gradient(circle at 70% 30%, #ea4335 8px, transparent 10px),
radial-gradient(circle at 40% 60%, #fbbc05 8px, transparent 10px),
radial-gradient(circle at 85% 15%, #34a853 8px, transparent 10px),
radial-gradient(circle at 30% 80%, #4285f4 6px, transparent 8px),
radial-gradient(circle at 60% 50%, #ea4335 6px, transparent 8px);
animation: google-dots 30s linear infinite;
opacity: 0.6;
}
@keyframes google-dots {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-100vh) rotate(360deg); }
}
/* Gentle wave overlay for Material Design feel */
body.theme-google-classic::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
linear-gradient(135deg, rgba(66,133,244,0.05) 0%, transparent 50%),
linear-gradient(45deg, rgba(234,67,53,0.05) 0%, transparent 50%);
animation: wave-pulse 20s ease-in-out infinite;
opacity: 0.4;
}
@keyframes wave-pulse {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.02); }
}
/* Google-style buttons */
.theme-google-classic .btn.primary {
background: linear-gradient(135deg, #4285f4, #34a853);
color: #ffffff;
font-weight: 600;
}
/* Preview box — clean Google frame */
.theme-google-classic #profile-preview-box {
border: 3px solid #4285f4;
box-shadow: 0 10px 30px rgba(66, 133, 244, 0.15);
}
/* Tag — subtle blue shine */
.theme-google-classic .preview-tag .tag-preview {
box-shadow: 0 0 15px rgba(66, 133, 244, 0.4);
}
body.theme-atomic-dawn {
/* Deep blood-red void — post-bomb sky */
--bg-primary: #1a0000;
/* Gradient: mushroom cloud orange to radioactive haze */
--bg-page: linear-gradient(180deg, #330000 0%, #1a0000 40%, #0a0000 100%);
/* Cards: Ash-gray ruins */
--card: #1a0f0f;
/* Muted text: Dusty fallout gray */
--muted: #556655;
/* Main text: Pale radioactive glow */
--text: #ccffcc;
/* Primary accent: Nuclear orange fire */
--accent: #ff6600;
/* Secondary accent: Radioactive green */
--accent-2: #00ff33;
/* Glass: Toxic haze */
--glass: rgba(0, 255, 51, 0.08);
/* Borders: Ember edge */
--border: rgba(255, 102, 0, 0.2);
}
/* Glowing mushroom cloud horizon + drifting ash embers */
body.theme-atomic-dawn::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 50% 30%, rgba(255, 102, 0, 0.4) 0%, transparent 40%),
radial-gradient(circle at 30% 50%, rgba(255, 51, 0, 0.3) 0%, transparent 40%),
radial-gradient(circle at 70% 50%, rgba(255, 102, 0, 0.25) 0%, transparent 40%);
animation: cloud-pulse 40s ease-in-out infinite;
opacity: 0.7;
filter: blur(50px);
}
@keyframes cloud-pulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 0.9; transform: scale(1.05); }
}
/* Slow drifting ash embers + radioactive particles */
body.theme-atomic-dawn::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255, 102, 0, 0.8) 2px, transparent 2px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(0, 255, 51, 0.6) 1.5px, transparent 1.5px) 70% 50%/180px 180px no-repeat,
radial-gradient(circle, rgba(255, 51, 0, 0.7) 2px, transparent 2px) 40% 70%/220px 220px no-repeat,
radial-gradient(circle, rgba(255, 102, 0, 0.5) 1.8px, transparent 1.8px) 85% 20%/160px 160px no-repeat,
radial-gradient(circle, rgba(0, 255, 51, 0.4) 1.2px, transparent 1.2px) 30% 80%/150px 150px no-repeat;
animation: embers-drift 60s linear infinite;
opacity: 0.6;
}
@keyframes embers-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
/* Fire buttons */
.theme-atomic-dawn .btn.primary {
background: linear-gradient(135deg, #ff6600, #ff3300);
color: #000000;
font-weight: 800;
}
/* Preview box — nuclear glow frame */
.theme-atomic-dawn #profile-preview-box {
border: 4px solid #ff6600;
box-shadow: 0 20px 60px rgba(255, 102, 0, 0.5),
inset 0 0 50px rgba(0, 255, 51, 0.15);
}
/* Tag — toxic shine */
.theme-atomic-dawn .preview-tag .tag-preview {
box-shadow: 0 0 35px rgba(255, 102, 0, 0.8);
}
body.theme-duck-privacy-dark {
--bg-primary: #0d1117;
--bg-page: linear-gradient(180deg, #161b22 0%, #0d1117 50%, #010409 100%);
--card: #161b22;
--muted: #8b949e;
--text: #f0f6fc;
--accent: #de5833; /* Duck orange */
--accent-2: #ff8800; /* Brighter orange glow */
--glass: rgba(255, 136, 51, 0.08);
--border: #30363d;
}
/* Slow privacy shield ripple — orange waves spreading outward */
body.theme-duck-privacy-dark::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 30% 50%, rgba(222, 88, 51, 0.2) 0%, transparent 40%),
radial-gradient(circle at 70% 40%, rgba(255, 136, 51, 0.15) 0%, transparent 40%);
animation: shield-ripple 35s ease-in-out infinite;
opacity: 0.6;
filter: blur(60px);
}
@keyframes shield-ripple {
0% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.3); opacity: 0.8; }
100% { transform: scale(1); opacity: 0.5; }
}
/* Duck orange buttons */
.theme-duck-privacy-dark .btn.primary {
background: linear-gradient(135deg, #de5833, #ff8800);
color: #ffffff;
font-weight: 600;
}
/* Preview box — orange frame */
.theme-duck-privacy-dark #profile-preview-box {
border: 3px solid #de5833;
box-shadow: 0 10px 30px rgba(222, 88, 51, 0.2);
}
/* Tag — orange shine */
.theme-duck-privacy-dark .preview-tag .tag-preview {
box-shadow: 0 0 15px rgba(222, 88, 51, 0.4);
}
body.theme-crimson-stream {
--bg-primary: #000000;
--bg-page: linear-gradient(180deg, #0f0000 0%, #000000 60%, #000000 100%);
--card: #0f0000;
--muted: #666666;
--text: #ffffff;
--accent: #e50914; /* Netflix red */
--accent-2: #b20710;
--glass: rgba(229, 9, 20, 0.08);
--border: rgba(229, 9, 20, 0.2);
}
/* Subtle red pulse glow */
body.theme-crimson-stream::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(229, 9, 20, 0.15) 0%, transparent 60%);
animation: netflix-pulse 20s ease-in-out infinite;
opacity: 0.6;
filter: blur(50px);
}
@keyframes netflix-pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}
/* Film grain overlay */
body.theme-crimson-stream::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: url('data:image/svg+xml;utf8,');
opacity: 0.3;
animation: grain-move 8s steps(10) infinite;
}
@keyframes grain-move {
0% { transform: translate(0, 0); }
100% { transform: translate(10px, 10px); }
}
.theme-crimson-stream .btn.primary {
background: linear-gradient(135deg, #e50914, #b20710);
color: #ffffff;
}
body.theme-magic-kingdom {
--bg-primary: #1e3a8a;
--bg-page: linear-gradient(180deg, #4c1d95 0%, #1e3a8a 50%, #0f172a 100%);
--card: rgba(30, 58, 138, 0.8);
--muted: #94a3b8;
--text: #e0e7ff;
--accent: #fbbf24; /* Magic gold */
--accent-2: #ffffff;
--glass: rgba(251, 191, 36, 0.1);
--border: rgba(251, 191, 36, 0.2);
}
/* Floating magic dust particles */
body.theme-magic-kingdom::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(251, 191, 36, 0.4) 1px, transparent 1px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(255, 255, 255, 0.3) 0.8px, transparent 0.8px) 70% 50%/180px 180px no-repeat,
radial-gradient(circle, rgba(251, 191, 36, 0.35) 1.2px, transparent 1.2px) 45% 80%/220px 220px no-repeat;
animation: magic-dust 40s linear infinite;
opacity: 0.6;
}
@keyframes magic-dust {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
/* Sparkle pulse */
body.theme-magic-kingdom::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(251, 191, 36, 0.1) 0%, transparent 60%);
animation: sparkle-pulse 15s ease-in-out infinite;
opacity: 0.4;
}
@keyframes sparkle-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-magic-kingdom .btn.primary {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #1e3a8a;
}
body.theme-kiras-requiem {
--bg-primary: #05050a; /* Deepest obsidian void */
--bg-page: linear-gradient(180deg, #0a0a0f 0%, #05050a 50%, #000000 100%);
--card: #0f0f14; /* Slightly raised shadowy cards */
--muted: #5a5a66; /* Cold, desaturated gray text */
--text: #e8e8f0; /* Pale, almost ghostly readable text */
--accent: #a80000; /* Blood-red — the notebook, the sin */
--accent-2: #d00000; /* Brighter crimson glow / alerts */
--accent-3: #ff1a1a; /* Intense highlight / active state */
--glass: rgba(168, 0, 0, 0.07); /* Subtle bloody translucent glass */
--border: rgba(168, 0, 0, 0.18); /* Faint red-edged borders */
}
/* Slow floating Death Note runes / kanji particles (very subtle, premium feel) */
body.theme-kiras-requiem::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 20% 30%, rgba(200, 0, 0, 0.12) 1.5px, transparent 2px) 0 0 / 180px 180px,
radial-gradient(circle at 60% 70%, rgba(168, 0, 0, 0.09) 1.2px, transparent 1.8px) 40px 60px / 220px 220px,
radial-gradient(circle at 80% 20%, rgba(220, 20, 20, 0.11) 1px, transparent 1.5px) 80px 120px / 160px 160px;
animation: rune-float 90s linear infinite;
opacity: 0.55;
filter: blur(1px);
}
@keyframes rune-float {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-1400px) rotate(360deg); }
}
/* Dripping blood/ink trails + very slow heartbeat pulse glow */
body.theme-kiras-requiem::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
/* Very faint vertical blood drips */
linear-gradient(transparent 0%, rgba(200, 0, 0, 0.06) 2%, transparent 4%) 10% 0 / 2px 400vh,
linear-gradient(transparent 0%, rgba(180, 0, 0, 0.05) 3%, transparent 6%) 30% 0 / 1.5px 400vh,
linear-gradient(transparent 0%, rgba(220, 20, 0, 0.07) 1.5%, transparent 3.5%) 70% 0 / 2.5px 400vh;
animation:
drip-slow 120s linear infinite,
heartbeat-pulse 8s ease-in-out infinite;
opacity: 0.4;
}
@keyframes drip-slow {
0% { transform: translateY(0); }
100% { transform: translateY(1200px); }
}
@keyframes heartbeat-pulse {
0%, 100% { opacity: 0.35; transform: scale(1); }
10% { opacity: 0.7; transform: scale(1.015); }
20% { opacity: 0.4; transform: scale(1); }
}
/* Premium blood-red buttons with subtle glow */
.theme-kiras-requiem .btn.primary {
background: linear-gradient(135deg, #a80000, #d00000);
color: #ffffff;
font-weight: 700;
text-shadow: 0 0 8px rgba(200, 0, 0, 0.6);
box-shadow: 0 6px 20px rgba(168, 0, 0, 0.4);
transition: all 0.4s ease;
}
.theme-kiras-requiem .btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(208, 0, 0, 0.7);
}
/* Profile preview — glowing red notebook frame */
.theme-kiras-requiem #profile-preview-box {
border: 3px solid #a80000;
box-shadow: 0 15px 50px rgba(168, 0, 0, 0.45),
inset 0 0 60px rgba(200, 0, 0, 0.12);
background: rgba(10, 10, 15, 0.92);
}
/* Tag shine — crimson death aura */
.theme-kiras-requiem .preview-tag .tag-preview {
box-shadow: 0 0 30px rgba(200, 0, 0, 0.6);
border: 1px solid rgba(168, 0, 0, 0.5);
}
body.theme-l-surveillance {
--bg-primary: #000814;
--bg-page: linear-gradient(180deg, #001122 0%, #000814 60%, #000000 100%);
--card: #0a1a2f;
--muted: #6b8299;
--text: #d8e8ff;
--accent: #00b7ff; /* L's signature cyan */
--accent-2: #40c0ff;
--accent-3: #80d4ff;
--glass: rgba(0, 183, 255, 0.055);
--border: rgba(0, 183, 255, 0.14);
}
/* === Floating data fragments / sugar-cube-like particles — more natural drift === */
body.theme-l-surveillance::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
/* Varied particle sizes & positions for organic feel */
radial-gradient(circle at 15% 25%, rgba(64, 192, 255, 0.18) 1px, transparent 2.5px) 10% 15%/280px 280px,
radial-gradient(circle at 45% 55%, rgba(0, 183, 255, 0.14) 0.9px, transparent 2px) 60% 40%/220px 220px,
radial-gradient(circle at 75% 35%, rgba(128, 212, 255, 0.12) 1.3px, transparent 2.8px) 30% 70%/260px 260px,
radial-gradient(circle at 85% 80%, rgba(0, 183, 255, 0.1) 0.8px, transparent 1.8px) 80% 20%/200px 200px;
animation: natural-drift 140s linear infinite;
opacity: 0.48;
filter: blur(1.2px);
}
@keyframes natural-drift {
0% { transform: translate(0, 0) rotate(0deg); }
100% { transform: translate(-80px, -1800px) rotate(90deg); } /* Gentle diagonal + rotation for realism */
}
/* === Slow vertical holographic scan sweep (more natural than horizontal) === */
body.theme-l-surveillance::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
/* Soft vertical scan bar with fade edges */
linear-gradient(to bottom, transparent 40%, rgba(0, 183, 255, 0.09) 45%, rgba(0, 183, 255, 0.18) 50%, rgba(0, 183, 255, 0.09) 55%, transparent 60%);
animation:
scan-sweep 45s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
breathing-glow 18s cubic-bezier(0.4, 0, 0.6, 1) infinite;
opacity: 0.0;
filter: blur(2px);
}
@keyframes scan-sweep {
0% { transform: translateY(-120%); opacity: 0; }
10% { opacity: 0.7; }
50% { transform: translateY(120%); opacity: 0.35; }
100% { transform: translateY(120%); opacity: 0; }
}
@keyframes breathing-glow {
0%, 100% { opacity: 0.32; transform: scale(1); }
50% { opacity: 0.58; transform: scale(1.03); }
}
/* Gentle monitor flicker — very subtle, irregular for realism */
.theme-l-surveillance .flicker-layer {
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: rgba(0, 183, 255, 0.02);
animation: micro-flicker 9s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
mix-blend-mode: screen;
}
@keyframes micro-flicker {
0%, 100% { opacity: 0; }
4% { opacity: 0.15; }
8% { opacity: 0; }
42% { opacity: 0.08; }
46% { opacity: 0; }
88% { opacity: 0.12; }
92% { opacity: 0; }
}
/* Premium buttons — smoother hover with scale + glow */
.theme-l-surveillance .btn.primary {
background: linear-gradient(135deg, #00b7ff, #40c0ff);
color: #000814;
font-weight: 700;
text-shadow: 0 0 5px rgba(0, 183, 255, 0.45);
box-shadow: 0 5px 18px rgba(0, 183, 255, 0.3);
transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot for natural bounce */
}
.theme-l-surveillance .btn.primary:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 14px 45px rgba(64, 192, 255, 0.55);
}
/* Profile preview — enhanced cyan frame with inner scan */
.theme-l-surveillance #profile-preview-box {
border: 3px solid #00b7ff;
box-shadow: 0 18px 55px rgba(0, 183, 255, 0.38),
inset 0 0 70px rgba(64, 192, 255, 0.08);
background: rgba(0, 8, 20, 0.95);
position: relative;
overflow: hidden;
}
.theme-l-surveillance #profile-preview-box::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(transparent 0%, transparent 1.5px, rgba(0, 183, 255, 0.035) 1.5px, transparent 3px);
pointer-events: none;
opacity: 0.25;
animation: gentle-scan 28s linear infinite;
}
@keyframes gentle-scan {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
/* Tag — sharper cyan aura */
.theme-l-surveillance .preview-tag .tag-preview {
box-shadow: 0 0 32px rgba(0, 183, 255, 0.5);
border: 1px solid rgba(0, 183, 255, 0.35);
}
body.theme-groove-wave {
--bg-primary: #000000;
--bg-page: #121212;
--card: #181818;
--muted: #b3b3b3;
--text: #ffffff;
--accent: #1db954; /* Spotify green */
--accent-2: #1ed760;
--glass: rgba(29, 185, 84, 0.1);
--border: rgba(29, 185, 84, 0.2);
}
/* Pulsing sound wave circles */
body.theme-groove-wave::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 50% 50%, rgba(29, 185, 84, 0.2) 0%, transparent 50%);
animation: wave-pulse 15s ease-in-out infinite;
opacity: 0.5;
filter: blur(40px);
}
@keyframes wave-pulse {
0%, 100% { transform: scale(1); opacity: 0.4; }
50% { transform: scale(1.2); opacity: 0.7; }
}
/* Subtle wave bars */
body.theme-groove-wave::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: repeating-linear-gradient(90deg, transparent 0%, rgba(29, 185, 84, 0.1) 50%, transparent 100%);
background-size: 200% 100%;
animation: sound-bars 20s linear infinite;
opacity: 0.3;
}
@keyframes sound-bars {
0% { background-position: 0 0; }
100% { background-position: 200% 0; }
}
.theme-groove-wave .btn.primary {
background: linear-gradient(135deg, #1db954, #1ed760);
color: #000000;
}
body.theme-prime-horizon {
--bg-primary: #ffffff;
--bg-page: linear-gradient(180deg, #f8f9fa 0%, #ffffff 50%, #f1f3f4 100%);
--card: #ffffff;
--muted: #5f6368;
--text: #232f3e;
--accent: #ff9900; /* Amazon orange */
--accent-2: #146eb4; /* Amazon blue */
--glass: rgba(255, 153, 0, 0.08);
--border: #dadce0;
}
/* Floating package/box glows */
body.theme-prime-horizon::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 20% 30%, rgba(255, 153, 0, 0.3) 8px, transparent 12px),
radial-gradient(circle at 70% 50%, rgba(20, 110, 180, 0.2) 10px, transparent 14px),
radial-gradient(circle at 45% 80%, rgba(255, 153, 0, 0.25) 7px, transparent 11px);
animation: package-drift 40s linear infinite;
opacity: 0.6;
}
@keyframes package-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-prime-horizon .btn.primary {
background: linear-gradient(135deg, #ff9900, #146eb4);
color: #ffffff;
}
body.theme-valve-vault {
--bg-primary: #171a21;
--bg-page: #000000;
--card: #1b2838;
--muted: #66c0f4;
--text: #c6d4df;
--accent: #66c0f4; /* Steam blue */
--accent-2: #000000;
--glass: rgba(102, 192, 244, 0.08);
--border: #2a475e;
}
/* Rising steam particles */
body.theme-valve-vault::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(102, 192, 244, 0.3) 5px, transparent 5px) 30% 90%/80px 80px no-repeat,
radial-gradient(circle, rgba(102, 192, 244, 0.25) 7px, transparent 7px) 70% 85%/100px 100px no-repeat,
radial-gradient(circle, rgba(102, 192, 244, 0.2) 6px, transparent 6px) 50% 95%/90px 90px no-repeat;
animation: steam-rise 30s linear infinite;
opacity: 0.5;
}
@keyframes steam-rise {
0% { background-position: 30% 120%, 70% 120%, 50% 120%; }
100% { background-position: 30% -200px, 70% -300px, 50% -250px; }
}
.theme-valve-vault .btn.primary {
background: linear-gradient(135deg, #66c0f4, #1b2838);
color: #ffffff;
}
body.theme-satoshi-gold {
--bg-primary: #000000;
--bg-page: #000000;
--card: #0a0a14;
--muted: #888888;
--text: #ffffff;
--accent: #f7931a; /* Bitcoin orange */
--accent-2: #ffaa33;
--glass: rgba(247, 147, 26, 0.1);
--border: rgba(247, 147, 26, 0.2);
}
/* Glowing Bitcoin symbol + drifting coins */
body.theme-satoshi-gold::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 50% 50%, rgba(247, 147, 26, 0.3) 0%, transparent 60%);
animation: coin-pulse 20s ease-in-out infinite;
opacity: 0.6;
filter: blur(40px);
}
@keyframes coin-pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}
/* Blockchain grid lines */
body.theme-satoshi-gold::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(247, 147, 26, 0.05) 50px, rgba(247, 147, 26, 0.05) 51px),
repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(247, 147, 26, 0.05) 50px, rgba(247, 147, 26, 0.05) 51px);
opacity: 0.3;
}
.theme-satoshi-gold .btn.primary {
background: linear-gradient(135deg, #f7931a, #ffaa33);
color: #000000;
}
body.theme-inferno-blaze {
--bg-primary: #000000;
--bg-page: linear-gradient(180deg, #1a0000 0%, #000000 60%, #000000 100%);
--card: #1a0000;
--muted: #ff9966;
--text: #ffccaa;
--accent: #ff3300;
--accent-2: #ff6600;
--glass: rgba(255, 51, 0, 0.1);
--border: rgba(255, 102, 0, 0.3);
}
/* Rising embers + heat haze */
body.theme-inferno-blaze::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255, 51, 0, 0.6) 3px, transparent 3px) 30% 90%/100px 100px no-repeat,
radial-gradient(circle, rgba(255, 102, 0, 0.5) 4px, transparent 4px) 70% 85%/120px 120px no-repeat,
radial-gradient(circle, rgba(255, 153, 0, 0.4) 2.5px, transparent 2.5px) 50% 95%/90px 90px no-repeat;
animation: embers-rise 25s linear infinite;
opacity: 0.7;
}
@keyframes embers-rise {
0% { background-position: 30% 120%, 70% 120%, 50% 120%; }
100% { background-position: 30% -300px, 70% -400px, 50% -350px; }
}
/* Flickering fire glow */
body.theme-inferno-blaze::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(255, 51, 0, 0.2) 0%, transparent 60%);
animation: fire-flicker 8s ease-in-out infinite;
opacity: 0.6;
filter: blur(40px);
}
@keyframes fire-flicker {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.8; }
}
.theme-inferno-blaze .btn.primary {
background: linear-gradient(135deg, #ff3300, #ff6600);
color: #000000;
}
body.theme-outbreak-shadow {
--bg-primary: #001a1a;
--bg-page: linear-gradient(180deg, #003333 0%, #001a1a 60%, #000011 100%);
--card: #002222;
--muted: #00cc99;
--text: #ffffff;
--accent: #00cc99; /* Medical green */
--accent-2: #cc0000; /* Alert red */
--glass: rgba(0, 204, 153, 0.08);
--border: rgba(204, 0, 0, 0.2);
}
/* Glowing virus particles */
body.theme-outbreak-shadow::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 30% 50%, rgba(0, 204, 153, 0.3) 8px, transparent 12px),
radial-gradient(circle at 70% 40%, rgba(204, 0, 0, 0.25) 10px, transparent 14px),
radial-gradient(circle at 50% 70%, rgba(0, 204, 153, 0.2) 7px, transparent 11px);
animation: virus-drift 40s linear infinite;
opacity: 0.6;
}
@keyframes virus-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1000px); }
}
/* Red alert pulse */
body.theme-outbreak-shadow::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(204, 0, 0, 0.1) 0%, transparent 60%);
animation: alert-pulse 15s ease-in-out infinite;
opacity: 0.4;
}
@keyframes alert-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-outbreak-shadow .btn.primary {
background: linear-gradient(135deg, #00cc99, #cc0000);
color: #000000;
}
body.theme-viral-strain {
--bg-primary: #001133;
--bg-page: linear-gradient(180deg, #003366 0%, #001133 60%, #000011 100%);
--card: #002244;
--muted: #00ccff;
--text: #ffffff;
--accent: #00ccff; /* Spike blue */
--accent-2: #ff3366; /* Red warning */
--glass: rgba(0, 204, 255, 0.08);
--border: rgba(255, 51, 102, 0.2);
}
/* Glowing spike proteins */
body.theme-viral-strain::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 25% 40%, rgba(0, 204, 255, 0.3) 10px, transparent 15px),
radial-gradient(circle at 75% 60%, rgba(255, 51, 102, 0.25) 12px, transparent 18px),
radial-gradient(circle at 50% 20%, rgba(0, 204, 255, 0.2) 8px, transparent 12px);
animation: spike-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes spike-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1500px); }
}
/* Red warning pulse */
body.theme-viral-strain::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(255, 51, 102, 0.1) 0%, transparent 60%);
animation: warning-pulse 20s ease-in-out infinite;
opacity: 0.4;
}
@keyframes warning-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-viral-strain .btn.primary {
background: linear-gradient(135deg, #00ccff, #ff3366);
color: #000000;
}
body.theme-gladius-eternal {
--bg-primary: #1a0000;
--bg-page: linear-gradient(180deg, #330000 0%, #1a0000 50%, #0a0000 100%);
--card: #2a0000;
--muted: #aa6666;
--text: #ffcccc;
--accent: #ff3300; /* Gladiator red */
--accent-2: #ffd700; /* Imperial gold */
--glass: rgba(255, 51, 0, 0.08);
--border: rgba(255, 215, 0, 0.2);
}
/* Drifting arena sand dust + faint eagle shadow */
body.theme-gladius-eternal::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255, 51, 0, 0.3) 2px, transparent 2px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(255, 215, 0, 0.2) 3px, transparent 3px) 70% 60%/250px 250px no-repeat,
radial-gradient(circle, rgba(255, 51, 0, 0.25) 1.8px, transparent 1.8px) 45% 80%/180px 180px no-repeat;
animation: sand-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes sand-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
/* Subtle eagle glow pulse */
body.theme-gladius-eternal::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(255, 215, 0, 0.1) 0%, transparent 60%);
animation: eagle-pulse 30s ease-in-out infinite;
opacity: 0.4;
}
@keyframes eagle-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-gladius-eternal .btn.primary {
background: linear-gradient(135deg, #ff3300, #ffd700);
color: #000000;
}
body.theme-purple-palatine {
--bg-primary: #2d004d;
--bg-page: linear-gradient(180deg, #4b0082 0%, #2d004d 50%, #1a002d 100%);
--card: #3a0066;
--muted: #aa88cc;
--text: #ffffff;
--accent: #ffd700; /* Byzantine gold */
--accent-2: #c0c0c0; /* Silver icons */
--glass: rgba(255, 215, 0, 0.08);
--border: rgba(255, 215, 0, 0.2);
}
/* Drifting incense smoke + glowing mosaic particles */
body.theme-purple-palatine::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255, 215, 0, 0.3) 3px, transparent 3px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(255, 255, 255, 0.2) 2px, transparent 2px) 70% 50%/180px 180px no-repeat,
radial-gradient(circle, rgba(255, 215, 0, 0.25) 2.5px, transparent 2.5px) 45% 80%/220px 220px no-repeat;
animation: incense-drift 60s linear infinite;
opacity: 0.6;
}
@keyframes incense-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
/* Subtle mosaic glow pulse */
body.theme-purple-palatine::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(255, 215, 0, 0.1) 0%, transparent 60%);
animation: mosaic-pulse 30s ease-in-out infinite;
opacity: 0.4;
}
@keyframes mosaic-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-purple-palatine .btn.primary {
background: linear-gradient(135deg, #ffd700, #c0c0c0);
color: #2d004d;
}
body.theme-force-eternal {
--bg-primary: #000000;
--bg-page: #000000;
--card: #0a0a14;
--muted: #556677;
--text: #e0f0ff;
--accent: #00aaff; /* Lightsaber blue */
--accent-2: #ffd700; /* Jedi gold */
--glass: rgba(0, 170, 255, 0.08);
--border: rgba(255, 215, 0, 0.2);
}
/* Drifting starfield + hyperspace streaks */
body.theme-force-eternal::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,255,255,0.6) 0.5px, transparent 1px) 20% 30%/300px 300px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.5) 0.8px, transparent 1px) 70% 50%/250px 250px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.4) 0.6px, transparent 0.6px) 45% 80%/200px 200px no-repeat;
animation: stars-drift 60s linear infinite;
opacity: 0.7;
}
@keyframes stars-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1500px); }
}
/* Lightsaber glow pulse + hyperspace flash */
body.theme-force-eternal::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
linear-gradient(90deg, transparent 45%, rgba(0, 170, 255, 0.3) 50%, transparent 55%),
linear-gradient(90deg, transparent 45%, rgba(255, 215, 0, 0.2) 50%, transparent 55%);
background-size: 100% 100px;
animation: hyperspace-flash 20s linear infinite;
opacity: 0.4;
filter: blur(20px);
}
@keyframes hyperspace-flash {
0%, 100% { opacity: 0.3; transform: translateX(0); }
50% { opacity: 0.6; transform: translateX(50px); }
}
.theme-force-eternal .btn.primary {
background: linear-gradient(135deg, #00aaff, #ffd700);
color: #000000;
}
body.theme-beskar-creed {
--bg-primary: #111111;
--bg-page: linear-gradient(180deg, #222222 0%, #111111 60%, #000000 100%);
--card: #1a1a1a;
--muted: #888888;
--text: #c0c0c0;
--accent: #ff6600; /* Blaster orange */
--accent-2: #00aaff; /* T-visor blue */
--glass: rgba(255, 102, 0, 0.08);
--border: rgba(192, 192, 192, 0.2);
}
/* Drifting dust + faint blaster flashes */
body.theme-beskar-creed::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255, 102, 0, 0.3) 2px, transparent 2px) 30% 40%/200px 200px no-repeat,
radial-gradient(circle, rgba(0, 170, 255, 0.2) 1.5px, transparent 1.5px) 70% 60%/180px 180px no-repeat,
radial-gradient(circle, rgba(255, 102, 0, 0.25) 2px, transparent 2px) 50% 80%/220px 220px no-repeat;
animation: dust-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes dust-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
/* Subtle T-visor blue pulse */
body.theme-beskar-creed::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(0, 170, 255, 0.1) 0%, transparent 60%);
animation: visor-pulse 25s ease-in-out infinite;
opacity: 0.4;
}
@keyframes visor-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-beskar-creed .btn.primary {
background: linear-gradient(135deg, #ff6600, #00aaff);
color: #000000;
}
body.theme-grogus-force {
--bg-primary: #1a2a1a;
--bg-page: linear-gradient(180deg, #2d3f2d 0%, #1a2a1a 60%, #0a140a 100%);
--card: #2d3f2d;
--muted: #88ccaa;
--text: #ffffff;
--accent: #00ff88; /* Grogu green glow */
--accent-2: #8b5a2b; /* Cradle brown */
--glass: rgba(0, 255, 136, 0.1);
--border: rgba(0, 255, 136, 0.2);
}
/* Gentle floating pram particles + soft Force glow */
body.theme-grogus-force::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(0, 255, 136, 0.3) 5px, transparent 8px) 20% 30%/150px 150px no-repeat,
radial-gradient(circle, rgba(0, 255, 136, 0.25) 6px, transparent 9px) 70% 50%/180px 180px no-repeat,
radial-gradient(circle, rgba(139, 90, 43, 0.2) 4px, transparent 7px) 45% 80%/140px 140px no-repeat;
animation: grogu-float 40s linear infinite;
opacity: 0.6;
}
@keyframes grogu-float {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-800px) rotate(10deg); }
}
/* Soft Force pulse */
body.theme-grogus-force::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(0, 255, 136, 0.1) 0%, transparent 60%);
animation: force-pulse 20s ease-in-out infinite;
opacity: 0.5;
}
@keyframes force-pulse {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.05); }
}
.theme-grogus-force .btn.primary {
background: linear-gradient(135deg, #00ff88, #8b5a2b);
color: #000000;
}
body.theme-arrakis-eternal {
--bg-primary: #1a0f00;
--bg-page: linear-gradient(180deg, #001133 0%, #2d1a00 50%, #1a0f00 100%);
--card: #2d1a00;
--muted: #aa8855;
--text: #ffddaa;
--accent: #ff8800; /* Spice orange */
--accent-2: #ffaa33;
--glass: rgba(255, 136, 0, 0.1);
--border: rgba(255, 170, 51, 0.2);
}
/* Drifting sand particles + spice glow */
body.theme-arrakis-eternal::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255, 136, 0, 0.3) 2px, transparent 2px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(255, 170, 51, 0.25) 2.5px, transparent 2.5px) 70% 50%/220px 220px no-repeat,
radial-gradient(circle, rgba(255, 136, 0, 0.2) 1.8px, transparent 1.8px) 45% 80%/180px 180px no-repeat;
animation: sand-drift 60s linear infinite;
opacity: 0.6;
}
@keyframes sand-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
/* Subtle spice glow pulse */
body.theme-arrakis-eternal::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(255, 136, 0, 0.1) 0%, transparent 60%);
animation: spice-pulse 30s ease-in-out infinite;
opacity: 0.5;
}
@keyframes spice-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
.theme-arrakis-eternal .btn.primary {
background: linear-gradient(135deg, #ff8800, #ffaa33);
color: #000000;
}
body.theme-super-saiyan-power {
--bg-primary: #000000;
--bg-page: linear-gradient(180deg, #0a0014 0%, #000000 60%, #000005 100%);
--card: #0a0a1a;
--muted: #556677;
--text: #ffffff;
--accent: #ffd700; /* Golden aura */
--accent-2: #00aaff; /* Blue ki */
--glass: rgba(255, 215, 0, 0.1);
--border: rgba(255, 170, 0, 0.2);
}
/* Glowing aura pulse + drifting ki particles */
body.theme-super-saiyan-power::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(255, 215, 0, 0.3) 0%, transparent 60%);
animation: aura-pulse 20s ease-in-out infinite;
opacity: 0.7;
filter: blur(40px);
}
@keyframes aura-pulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 0.9; transform: scale(1.05); }
}
body.theme-super-saiyan-power::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(0, 170, 255, 0.3) 2px, transparent 2px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(255, 170, 0, 0.25) 2.5px, transparent 2.5px) 70% 50%/220px 220px no-repeat;
animation: ki-drift 40s linear infinite;
opacity: 0.5;
}
@keyframes ki-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1000px); }
}
.theme-super-saiyan-power .btn.primary {
background: linear-gradient(135deg, #ffd700, #00aaff);
color: #000000;
}
body.theme-hidden-leaf-legacy {
--bg-primary: #003300;
--bg-page: linear-gradient(180deg, #006633 0%, #003300 60%, #001a00 100%);
--card: #004d33;
--muted: #88aa88;
--text: #ffffff;
--accent: #ff6600; /* Orange sunset */
--accent-2: #00aaff; /* Blue sky */
--glass: rgba(255, 102, 0, 0.08);
--border: rgba(0, 170, 255, 0.2);
}
/* Drifting leaves + sunset pulse */
body.theme-hidden-leaf-legacy::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255, 102, 0, 0.3) 4px, transparent 4px) 20% 30%/150px 150px no-repeat,
radial-gradient(circle, rgba(0, 170, 255, 0.2) 3px, transparent 3px) 70% 50%/180px 180px no-repeat;
animation: leaves-drift 40s linear infinite;
opacity: 0.6;
}
@keyframes leaves-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1000px); }
}
/* Sunset glow */
body.theme-hidden-leaf-legacy::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at top center, rgba(255, 102, 0, 0.2) 0%, transparent 60%);
animation: sunset-pulse 25s ease-in-out infinite;
opacity: 0.5;
}
@keyframes sunset-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
.theme-hidden-leaf-legacy .btn.primary {
background: linear-gradient(135deg, #ff6600, #00aaff);
color: #000000;
}
body.theme-walls-of-freedom {
--bg-primary: #1a1a1a;
--bg-page: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 60%, #0a0a0a 100%);
--card: #2d2d2d;
--muted: #666666;
--text: #ffffff;
--accent: #cc0000; /* Blood red */
--accent-2: #006633; /* Scout green */
--glass: rgba(204, 0, 0, 0.08);
--border: rgba(204, 0, 0, 0.2);
}
/* Drifting ash + titan steam */
body.theme-walls-of-freedom::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(204, 0, 0, 0.3) 3px, transparent 3px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(0, 102, 51, 0.25) 2.5px, transparent 2.5px) 70% 50%/180px 180px no-repeat;
animation: ash-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes ash-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
/* Red alert pulse */
body.theme-walls-of-freedom::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(204, 0, 0, 0.1) 0%, transparent 60%);
animation: alert-pulse 25s ease-in-out infinite;
opacity: 0.4;
}
@keyframes alert-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-walls-of-freedom .btn.primary {
background: linear-gradient(135deg, #cc0000, #006633);
color: #ffffff;
}
body.theme-pac-man-fever {
--bg-primary: #000000;
--bg-page: #000000;
--card: #000011;
--muted: #aaaaaa;
--text: #ffffff;
--accent: #ffff00; /* Yellow Pac-Man */
--accent-2: #ff0000; /* Red ghost */
--glass: rgba(255, 255, 0, 0.1);
--border: rgba(255, 255, 0, 0.3);
}
/* Drifting dots + ghost glows */
body.theme-pac-man-fever::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255, 255, 0, 0.8) 4px, transparent 4px) 20% 30%/150px 150px no-repeat,
radial-gradient(circle, rgba(255, 0, 0, 0.4) 5px, transparent 5px) 70% 50%/180px 180px no-repeat,
radial-gradient(circle, rgba(0, 255, 255, 0.4) 4px, transparent 4px) 40% 80%/160px 160px no-repeat,
radial-gradient(circle, rgba(255, 105, 180, 0.4) 5px, transparent 5px) 85% 20%/170px 170px no-repeat;
animation: dots-drift 30s linear infinite;
opacity: 0.7;
}
@keyframes dots-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1000px); }
}
/* Yellow pulse */
body.theme-pac-man-fever::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(255, 255, 0, 0.2) 0%, transparent 60%);
animation: pac-pulse 15s ease-in-out infinite;
opacity: 0.5;
}
@keyframes pac-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
.theme-pac-man-fever .btn.primary {
background: linear-gradient(135deg, #ffff00, #ff8800);
color: #000000;
}
body.theme-encoded-liminal {
--bg-primary: #000814;
--bg-page: linear-gradient(180deg, #000814 0%, #001233 40%, #000000 100%);
--card: rgba(0, 29, 61, 0.4);
--text: #a5b4fc;
--muted: #64748b;
--accent: #6366f1;
--glass: rgba(99, 102, 241, 0.06);
--border: rgba(99, 102, 241, 0.12);
}
/* Liminal pool hum + very faint water caustics */
body.theme-encoded-liminal::before {
content: '';
position: fixed;
inset: 0;
background: radial-gradient(circle at 50% 30%, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
animation: liminal-hum 18s ease-in-out infinite;
pointer-events: none;
z-index: -1;
}
@keyframes liminal-hum {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.03); }
}
/* Very subtle old water caustics overlay */
body.theme-encoded-liminal::after {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 20% 40%, rgba(165, 180, 252, 0.04) 2px, transparent 3px),
radial-gradient(circle at 80% 60%, rgba(99, 102, 241, 0.03) 1.5px, transparent 2.5px);
background-size: 120px 120px;
animation: caustic-drift 60s linear infinite;
opacity: 0.3;
pointer-events: none;
z-index: -1;
}
@keyframes caustic-drift {
0% { transform: translate(0, 0); }
100% { transform: translate(-40px, -60px); }
}
body.theme-morphin-legacy {
--bg-primary: #000033;
--bg-page: linear-gradient(180deg, #330066 0%, #000033 60%, #000011 100%);
--card: #1a0033;
--muted: #8888ff;
--text: #ffffff;
--accent: #ff0000; /* Red Ranger */
--accent-2: #0000ff; /* Blue */
--accent-3: #ffff00; /* Yellow */
--accent-4: #ff69b4; /* Pink */
--accent-5: #00ff00; /* Green */
--glass: rgba(255, 255, 255, 0.1);
--border: rgba(255, 255, 255, 0.2);
}
/* Glowing morphing grid + rainbow energy pulse */
body.theme-morphin-legacy::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(255,255,255,0.05) 20px, rgba(255,255,255,0.05) 21px),
repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(255,255,255,0.05) 20px, rgba(255,255,255,0.05) 21px);
animation: grid-pulse 15s ease-in-out infinite;
opacity: 0.4;
}
@keyframes grid-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
/* Rainbow morphing energy waves */
body.theme-morphin-legacy::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
linear-gradient(135deg, rgba(255,0,0,0.2), rgba(0,0,255,0.2), rgba(255,255,0,0.2), rgba(255,105,180,0.2), rgba(0,255,0,0.2));
background-size: 400% 400%;
animation: rainbow-wave 20s ease infinite;
opacity: 0.5;
filter: blur(40px);
}
@keyframes rainbow-wave {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.theme-morphin-legacy .btn.primary {
background: linear-gradient(135deg, #ff0000, #0000ff, #ffff00);
color: #ffffff;
}
body.theme-fury-vortex {
--bg-primary: #1a1a1a;
--bg-page: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 60%, #0a0a0a 100%);
--card: #2d2d2d;
--muted: #666666;
--text: #ffffff;
--accent: #00ff33; /* Green lightning */
--accent-2: #00cc00;
--glass: rgba(0, 255, 51, 0.08);
--border: rgba(0, 255, 51, 0.2);
}
/* Slow rotating tornado funnel */
body.theme-fury-vortex::before {
content: '';
position: fixed;
left: 50%;
top: 50%;
width: 60vw;
height: 100vh;
margin-left: -30vw;
background: linear-gradient(to bottom, transparent 40%, rgba(0, 255, 51, 0.3) 50%, transparent 60%);
pointer-events: none;
z-index: -1;
animation: tornado-spin 60s linear infinite;
filter: blur(30px);
opacity: 0.6;
}
@keyframes tornado-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Drifting debris + lightning flashes */
body.theme-fury-vortex::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(0, 255, 51, 0.4) 2px, transparent 2px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(255, 255, 255, 0.3) 1.5px, transparent 1.5px) 70% 50%/180px 180px no-repeat;
animation: debris-drift 40s linear infinite;
opacity: 0.5;
}
@keyframes debris-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-fury-vortex .btn.primary {
background: linear-gradient(135deg, #00ff33, #00cc00);
color: #000000;
}
body.theme-pharaohs-eternity {
--bg-primary: #1a0f00;
--bg-page: linear-gradient(180deg, #2d1a00 0%, #1a0f00 60%, #0a0500 100%);
--card: #2d1a00;
--muted: #aa8855;
--text: #ffddaa;
--accent: #ffd700; /* Pharaoh gold */
--accent-2: #00ccaa; /* Nile turquoise */
--glass: rgba(255, 215, 0, 0.08);
--border: rgba(255, 215, 0, 0.2);
}
/* Drifting scarab beetles + faint hieroglyph glow */
body.theme-pharaohs-eternity::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255, 215, 0, 0.3) 3px, transparent 3px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(0, 204, 170, 0.25) 2.5px, transparent 2.5px) 70% 50%/180px 180px no-repeat,
radial-gradient(circle, rgba(255, 215, 0, 0.2) 2px, transparent 2px) 45% 80%/160px 160px no-repeat;
animation: scarab-drift 60s linear infinite;
opacity: 0.6;
}
@keyframes scarab-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
/* Subtle golden pulse — like sun god Ra */
body.theme-pharaohs-eternity::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(255, 215, 0, 0.1) 0%, transparent 60%);
animation: ra-pulse 40s ease-in-out infinite;
opacity: 0.5;
}
@keyframes ra-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
.theme-pharaohs-eternity .btn.primary {
background: linear-gradient(135deg, #ffd700, #00ccaa);
color: #000000;
}
body.theme-extraterrestrial-signal {
--bg-primary: #000000;
--bg-page: #000000;
--card: #001122;
--muted: #556677;
--text: #ffffff;
--accent: #00ff88; /* Alien green */
--accent-2: #00aaff; /* Beam blue */
--glass: rgba(0, 255, 136, 0.08);
--border: rgba(0, 170, 255, 0.2);
}
/* Glowing saucer lights + abduction beam */
body.theme-extraterrestrial-signal::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 30% 20%, rgba(0, 255, 136, 0.3) 10px, transparent 20px),
radial-gradient(circle at 70% 30%, rgba(0, 170, 255, 0.25) 12px, transparent 22px),
linear-gradient(to bottom, transparent 60%, rgba(0, 170, 255, 0.4) 70%, transparent 80%) center bottom/100% 300px no-repeat;
animation: ufo-pulse 30s ease-in-out infinite;
opacity: 0.6;
filter: blur(30px);
}
@keyframes ufo-pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}
/* Floating alien symbols */
body.theme-extraterrestrial-signal::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(0, 255, 136, 0.2) 2px, transparent 2px) 20% 40%/200px 200px no-repeat,
radial-gradient(circle, rgba(0, 170, 255, 0.15) 1.8px, transparent 1.8px) 70% 60%/180px 180px no-repeat;
animation: symbols-drift 50s linear infinite;
opacity: 0.4;
}
@keyframes symbols-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-extraterrestrial-signal .btn.primary {
background: linear-gradient(135deg, #00ff88, #00aaff);
color: #000000;
}
body.theme-knights-valor {
--bg-primary: #1a1a1a;
--bg-page: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 60%, #0a0a0a 100%);
--card: #2d2d2d;
--muted: #888888;
--text: #ffffff;
--accent: #c0c0c0; /* Silver steel */
--accent-2: #ff3300; /* Crimson banner */
--glass: rgba(192, 192, 192, 0.08);
--border: rgba(192, 192, 192, 0.2);
}
/* Drifting shields + sword glow */
body.theme-knights-valor::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(192, 192, 192, 0.3) 8px, transparent 12px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(255, 51, 0, 0.25) 10px, transparent 14px) 70% 50%/220px 220px no-repeat,
radial-gradient(circle, rgba(192, 192, 192, 0.2) 7px, transparent 11px) 45% 80%/180px 180px no-repeat;
animation: shield-drift 60s linear infinite;
opacity: 0.6;
}
@keyframes shield-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
/* Subtle sword shine pulse */
body.theme-knights-valor::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(192, 192, 192, 0.1) 0%, transparent 60%);
animation: sword-pulse 30s ease-in-out infinite;
opacity: 0.4;
}
@keyframes sword-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-knights-valor .btn.primary {
background: linear-gradient(135deg, #c0c0c0, #ff3300);
color: #000000;
}
body.theme-telegram-aero {
--bg-primary: #ffffff;
--bg-page: linear-gradient(180deg, #f0f8ff 0%, #ffffff 100%);
--card: #ffffff;
--muted: #888888;
--text: #000000;
--accent: #0088cc; /* Telegram blue */
--accent-2: #ffffff;
--glass: rgba(255, 255, 255, 0.9);
--border: #e0e0e0;
}
/* Drifting paper planes */
body.theme-telegram-aero::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(0,136,204,0.3) 6px, transparent 8px) 20% 30%/150px 150px no-repeat,
radial-gradient(circle, rgba(0,136,204,0.2) 5px, transparent 7px) 70% 50%/130px 130px no-repeat;
animation: plane-drift 40s linear infinite;
opacity: 0.5;
}
@keyframes plane-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-telegram-aero .btn.primary {
background: linear-gradient(135deg, #0088cc, #0066aa);
color: #ffffff;
}
body.theme-meta-horizon {
--bg-primary: #ffffff;
--bg-page: #f0f2f5;
--card: #ffffff;
--muted: #65676b;
--text: #1c1e21;
--accent: #1877f2; /* Facebook blue */
--accent-2: #ffffff;
--glass: rgba(255, 255, 255, 0.9);
--border: #e4e6eb;
}
/* Subtle friend glow pulse */
body.theme-meta-horizon::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(24,119,242,0.1) 0%, transparent 60%);
animation: fb-pulse 25s ease-in-out infinite;
opacity: 0.4;
}
@keyframes fb-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.5; }
}
.theme-meta-horizon .btn.primary {
background: #1877f2;
color: #ffffff;
}
body.theme-signal-secure {
--bg-primary: #0d1117;
--bg-page: linear-gradient(180deg, #161b22 0%, #0d1117 100%);
--card: #161b22;
--muted: #8b949e;
--text: #f0f6fc;
--accent: #0066ff; /* Signal blue */
--accent-2: #0099ff;
--glass: rgba(0, 102, 255, 0.08);
--border: #30363d;
}
/* Subtle lock pulse */
body.theme-signal-secure::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(0,102,255,0.15) 0%, transparent 60%);
animation: signal-pulse 20s ease-in-out infinite;
opacity: 0.5;
}
@keyframes signal-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
.theme-signal-secure .btn.primary {
background: linear-gradient(135deg, #0066ff, #0099ff);
color: #ffffff;
}
body.theme-flappy-fever {
--bg-primary: #71c5ef;
--bg-page: linear-gradient(180deg, #5ec8ef 0%, #71c5ef 100%);
--card: rgba(255,255,255,0.9);
--muted: #000000;
--text: #000000;
--accent: #ffcc00; /* Bird yellow */
--accent-2: #00ff00; /* Pipes green */
--glass: rgba(255,255,255,0.8);
--border: #ffffff;
}
/* Drifting clouds + pipe hints */
body.theme-flappy-fever::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,255,255,0.6) 20px, transparent 20px) 20% 30%/300px 300px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.5) 25px, transparent 25px) 70% 50%/350px 350px no-repeat;
animation: clouds-drift 40s linear infinite;
opacity: 0.7;
}
@keyframes clouds-drift {
0% { transform: translateX(-100px); }
100% { transform: translateX(100vw); }
}
.theme-flappy-fever .btn.primary {
background: linear-gradient(135deg, #ffcc00, #00ff00);
color: #000000;
}
body.theme-playstation-legacy {
--bg-primary: #000000;
--bg-page: #000000;
--card: #0a0a1a;
--muted: #aaaaaa;
--text: #ffffff;
--accent: #0070d1; /* PS blue */
--accent-2: #003087;
--glass: rgba(0, 112, 209, 0.08);
--border: rgba(0, 112, 209, 0.2);
}
/* Glowing controller symbols pulse */
body.theme-playstation-legacy::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(0,112,209,0.2) 0%, transparent 60%);
animation: ps-pulse 20s ease-in-out infinite;
opacity: 0.5;
}
@keyframes ps-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
.theme-playstation-legacy .btn.primary {
background: linear-gradient(135deg, #0070d1, #003087);
color: #ffffff;
}
body.theme-xbox-arena {
--bg-primary: #000000;
--bg-page: #000000;
--card: #0a0a0a;
--muted: #aaaaaa;
--text: #ffffff;
--accent: #107c10; /* Xbox green */
--accent-2: #0f7b0f;
--glass: rgba(16, 124, 16, 0.08);
--border: rgba(16, 124, 16, 0.2);
}
/* Glowing green ring pulse */
body.theme-xbox-arena::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(16,124,16,0.3) 0%, transparent 60%);
animation: xbox-pulse 20s ease-in-out infinite;
opacity: 0.6;
}
@keyframes xbox-pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}
.theme-xbox-arena .btn.primary {
background: linear-gradient(135deg, #107c10, #0f7b0f);
color: #ffffff;
}
body.theme-lego-builder {
--bg-primary: #ffffff;
--bg-page: linear-gradient(180deg, #f0f8ff 0%, #ffffff 100%);
--card: #ffffff;
--muted: #666666;
--text: #000000;
--accent: #ff0000; /* Red brick */
--accent-2: #ffff00; /* Yellow */
--accent-3: #0000ff; /* Blue */
--accent-4: #00ff00; /* Green */
--glass: rgba(255,255,255,0.9);
--border: #e0e0e0;
}
/* Floating colorful bricks */
body.theme-lego-builder::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,0,0,0.8) 8px, transparent 10px) 20% 30%/150px 150px no-repeat,
radial-gradient(circle, rgba(255,255,0,0.8) 8px, transparent 10px) 70% 50%/150px 150px no-repeat,
radial-gradient(circle, rgba(0,0,255,0.8) 8px, transparent 10px) 40% 80%/150px 150px no-repeat,
radial-gradient(circle, rgba(0,255,0,0.8) 8px, transparent 10px) 85% 20%/150px 150px no-repeat;
animation: bricks-float 40s linear infinite;
opacity: 0.7;
}
@keyframes bricks-float {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-100vh) rotate(360deg); }
}
.theme-lego-builder .btn.primary {
background: linear-gradient(135deg, #ff0000, #ffff00, #0000ff, #00ff00);
background-size: 300% 300%;
animation: rainbow-bg 10s ease infinite;
color: #000000;
}
@keyframes rainbow-bg {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
body.theme-wiki-neutral {
--bg-primary: #ffffff;
--bg-page: #f8f9fa;
--card: #ffffff;
--muted: #54595d;
--text: #000000;
--accent: #0645ad; /* Wiki blue links */
--accent-2: #3366cc;
--glass: rgba(255,255,255,0.95);
--border: #a2a9b1;
}
/* Subtle page glow */
body.theme-wiki-neutral::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(6,69,173,0.05) 0%, transparent 60%);
animation: wiki-pulse 30s ease-in-out infinite;
opacity: 0.4;
}
@keyframes wiki-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.5; }
}
.theme-wiki-neutral .btn.primary {
background: #3366cc;
color: #ffffff;
}
body.theme-discord-void {
--bg-primary: #18181b;
--bg-page: linear-gradient(180deg, #0e0e1a 0%, #18181b 100%);
--card: #1e1f22;
--muted: #949ba4;
--text: #ffffff;
--accent: #5865f2; /* Blurple */
--accent-2: #7289da;
--glass: rgba(88,101,242,0.08);
--border: #303338;
}
/* Blurple pulse */
body.theme-discord-void::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(88,101,242,0.15) 0%, transparent 60%);
animation: discord-pulse 25s ease-in-out infinite;
opacity: 0.5;
}
@keyframes discord-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
.theme-discord-void .btn.primary {
background: linear-gradient(135deg, #5865f2, #7289da);
color: #ffffff;
}
body.theme-twitch-stream {
--bg-primary: #0e0c1a;
--bg-page: linear-gradient(180deg, #181326 0%, #0e0c1a 60%, #05020f 100%);
--card: #181326;
--muted: #adadb8;
--text: #ffffff;
--accent: #9146ff; /* Twitch purple */
--accent-2: #a970ff;
--glass: rgba(145,70,255,0.08);
--border: rgba(145,70,255,0.2);
}
/* Drifting emotes + neon pulse */
body.theme-twitch-stream::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(145,70,255,0.3) 4px, transparent 4px) 20% 30%/150px 150px no-repeat,
radial-gradient(circle, rgba(169,112,255,0.25) 5px, transparent 5px) 70% 50%/180px 180px no-repeat;
animation: emote-drift 40s linear infinite;
opacity: 0.6;
}
@keyframes emote-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1000px); }
}
.theme-twitch-stream .btn.primary {
background: linear-gradient(135deg, #9146ff, #a970ff);
color: #ffffff;
}
body.theme-womens-day-empower {
--bg-primary: #2a1a3d; /* Deep purple base for elegance */
--bg-page: linear-gradient(135deg, #3a1f5c 0%, #1e2f2f 100%); /* Purple to soft green-tinged dark */
--card: rgba(60, 40, 90, 0.75); /* Semi-transparent purple cards */
--muted: #b0a8c0; /* Soft lavender gray */
--text: #f0e8ff; /* Very light lavender-white for readability */
--accent: #9333ea; /* Vibrant purple (justice + modern) */
--accent-2: #10b981; /* Hopeful emerald green */
--accent-3: #ec4899; /* Warm magenta/pink accent for flowers & highlights */
--glass: rgba(147, 51, 234, 0.12); /* Purple glass effect */
--border: rgba(147, 51, 234, 0.25);
}
/* Animated background: subtle radial pulse + floating soft petals/particles */
body.theme-womens-day-empower::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -2;
background:
radial-gradient(circle at 20% 30%, rgba(147, 51, 234, 0.18) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.08) 0%, transparent 60%);
animation: empower-pulse 18s ease-in-out infinite;
opacity: 0.7;
}
@keyframes empower-pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.85; transform: scale(1.04); }
}
/* Floating petal-like particles (soft circles in theme colors) */
body.theme-womens-day-empower::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle 6px at 15% 20%, rgba(236, 72, 153, 0.7), transparent 70%) 0% 0% / 180px 180px,
radial-gradient(circle 8px at 65% 45%, rgba(147, 51, 234, 0.6), transparent 70%) 30% 40% / 220px 220px,
radial-gradient(circle 7px at 40% 75%, rgba(16, 185, 129, 0.65), transparent 70%) 70% 60% / 200px 200px,
radial-gradient(circle 5px at 85% 15%, rgba(236, 72, 153, 0.55), transparent 70%) 90% 80% / 160px 160px;
animation: petals-float 50s linear infinite;
opacity: 0.6;
}
@keyframes petals-float {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-120vh) rotate(180deg); }
}
.theme-womens-day-empower .btn.primary {
background: linear-gradient(135deg, #9333ea, #ec4899, #10b981);
background-size: 200% 200%;
animation: gradient-flow 12s ease infinite;
color: #ffffff;
border: none;
}
@keyframes gradient-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
body.theme-little-saint-eclipse {
--bg-primary: #001122; /* Deep ocean midnight base */
--bg-page: linear-gradient(180deg, #0a1f3d 0%, #001122 50%, #111111 100%); /* Twilight ocean to black sand */
--card: rgba(10, 31, 61, 0.82);
--muted: #8a9bb5;
--text: #f5f6f5;
--accent: #d4af37;
--accent-2: #c0e4ff;
--accent-3: #ff4500;
--glass: rgba(192, 228, 255, 0.12);
--border: rgba(212, 175, 55, 0.25);
overflow: hidden; /* Clip any overflow from animations */
position: relative;
}
/* Layer 1: Slow rippling twilight water reflection + subtle golden glint shift */
body.theme-little-saint-eclipse::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: -2;
background:
linear-gradient(to bottom, rgba(10, 31, 61, 0.4) 0%, transparent 40%),
linear-gradient(45deg, rgba(192, 228, 255, 0.08) 0%, transparent 50%) 0% 0% / 200% 200%,
radial-gradient(ellipse at 50% 80%, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
animation:
water-ripple 40s ease-in-out infinite,
glint-shift 60s linear infinite;
opacity: 0.85;
mix-blend-mode: screen; /* Blends nicely with the dark base for glow */
}
@keyframes water-ripple {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
50% { transform: translateY(-15px) scale(1.02); opacity: 0.95; }
}
@keyframes glint-shift {
0% { background-position: 0% 0%; }
100% { background-position: 200% 200%; }
}
/* Layer 2: Gentle swaying palm fronds/shadows in breeze (elongated gradients, no circles/particles) */
body.theme-little-saint-eclipse::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
background:
/* Left palm cluster - slow sway left/right */
linear-gradient(135deg, transparent 40%, rgba(212, 175, 55, 0.12) 45%, transparent 50%) 15% 20% / 80px 400px,
linear-gradient(45deg, transparent 40%, rgba(192, 228, 255, 0.1) 45%, transparent 50%) 18% 25% / 70px 380px,
/* Right palm cluster */
linear-gradient(225deg, transparent 40%, rgba(212, 175, 55, 0.15) 45%, transparent 50%) 80% 30% / 90px 420px,
linear-gradient(315deg, transparent 40%, rgba(255, 69, 0, 0.08) 45%, transparent 50%) 82% 35% / 75px 400px;
background-repeat: no-repeat;
animation: palm-sway 90s ease-in-out infinite;
opacity: 0.7;
}
@keyframes palm-sway {
0%, 100% { transform: translateX(0) skewX(0deg); }
25% { transform: translateX(-8px) skewX(2deg); }
75% { transform: translateX(8px) skewX(-2deg); }
}
/* Keep your existing button gradient flow — it fits perfectly */
.theme-little-saint-eclipse .btn.primary {
background: linear-gradient(135deg, #d4af37, #c0e4ff, #ff4500, #001122);
background-size: 400% 400%;
animation: luxury-flow 25s ease infinite;
color: #111111;
font-weight: 700;
border: 1px solid rgba(212, 175, 55, 0.6);
text-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
}
@keyframes luxury-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
body.theme-spring-awakening-glow {
--bg-primary: #2e8b57; /* Rich spring green base for nature feel */
--bg-page: linear-gradient(135deg, #a7d8de 0%, #d7f1e3 50%, #fffaf0 100%); /* Sky blue → mint → creamy dawn */
--accent: #fde68a; /* Golden sunny yellow glow */
--accent-2: #f4b5d5; /* Lilac flower accent */
--accent-3: #f8e1e9; /* Softest pink */
--glass: rgba(167, 216, 222, 0.18); /* Robin's egg glass mist */
}
/* Smooth, slow color-shifting background (no clouds, no floating eggs/petals/particles) */
body.theme-spring-awakening-glow {
background: var(--bg-page);
background-size: 400% 400%;
animation: smooth-dawn-shift 35s ease infinite;
}
@keyframes smooth-dawn-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Smooth flowing gradient button */
.theme-spring-awakening-glow .btn.primary {
background: linear-gradient(135deg, #fde68a, #f4b5d5, #a7d8de, #d7f1e3);
background-size: 300% 300%;
animation: spring-flow 18s ease infinite;
color: #1a2e1f;
border: none;
font-weight: 600;
}
@keyframes spring-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
body.theme-thunder-strike {
--bg-primary: #1a1a1a;
--bg-page: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 60%, #0a0a0a 100%);
--card: #2d2d2d;
--muted: #888888;
--text: #ffffff;
--accent: #ff6600; /* Explosion orange */
--accent-2: #00aaff; /* Tracer blue */
--glass: rgba(255,102,0,0.08);
--border: rgba(0,170,255,0.2);
}
/* Drifting smoke + explosion flashes */
body.theme-thunder-strike::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,102,0,0.4) 5px, transparent 5px) 30% 40%/200px 200px no-repeat,
radial-gradient(circle, rgba(0,170,255,0.3) 4px, transparent 4px) 70% 60%/180px 180px no-repeat;
animation: smoke-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes smoke-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-thunder-strike .btn.primary {
background: linear-gradient(135deg, #ff6600, #00aaff);
color: #000000;
}
body.theme-duty-call {
--bg-primary: #000000;
--bg-page: linear-gradient(180deg, #0a140a 0%, #000000 60%, #000005 100%);
--card: #0a140a;
--muted: #556655;
--text: #ffffff;
--accent: #00ff33; /* Night vision green */
--accent-2: #ff6600; /* Muzzle orange */
--glass: rgba(0,255,51,0.08);
--border: rgba(255,102,0,0.2);
}
/* Drifting smoke + muzzle flashes */
body.theme-duty-call::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(0,255,51,0.3) 4px, transparent 4px) 30% 40%/200px 200px no-repeat,
radial-gradient(circle, rgba(255,102,0,0.4) 5px, transparent 5px) 70% 60%/220px 220px no-repeat;
animation: smoke-drift 45s linear infinite;
opacity: 0.6;
}
@keyframes smoke-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-duty-call .btn.primary {
background: linear-gradient(135deg, #00ff33, #ff6600);
color: #000000;
}
body.theme-upvote-glow {
--bg-primary: #0a0a0a;
--bg-page: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
--card: #1a1a1a;
--muted: #888888;
--text: #ffffff;
--accent: #ff4500; /* Reddit orange */
--accent-2: #ff6600;
--glass: rgba(255, 69, 0, 0.08);
--border: #333333;
}
/* Drifting snoo/orange particles */
body.theme-upvote-glow::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255, 69, 0, 0.3) 5px, transparent 5px) 20% 30%/150px 150px no-repeat,
radial-gradient(circle, rgba(255, 102, 0, 0.25) 6px, transparent 6px) 70% 50%/180px 180px no-repeat;
animation: snoo-drift 40s linear infinite;
opacity: 0.6;
}
@keyframes snoo-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-upvote-glow .btn.primary {
background: linear-gradient(135deg, #ff4500, #ff6600);
color: #ffffff;
}
body.theme-blocky-horizon {
--bg-primary: #212324;
--bg-page: linear-gradient(180deg, #87ceeb 0%, #5a4636 100%);
--accent: #3c6e3c; /* Grass green */
--accent-2: #00ff00;
--glass: rgba(255,255,255,0.8);
--border: #5a4636;
}
/* Drifting blocks + pixel particles */
body.theme-blocky-horizon::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(square, rgba(60,110,60,0.8) 10px, transparent 10px) 20% 30%/80px 80px no-repeat,
radial-gradient(square, rgba(90,70,54,0.8) 12px, transparent 12px) 70% 50%/100px 100px no-repeat;
animation: blocks-drift 50s linear infinite;
opacity: 0.7;
}
@keyframes blocks-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-blocky-horizon .btn.primary {
background: linear-gradient(135deg, #3c6e3c, #00ff00);
color: #ffffff;
}
body.theme-red-legacy {
--bg-primary: #cc0000;
--bg-page: linear-gradient(180deg, #990000 0%, #cc0000 60%, #660000 100%);
--card: #990000;
--muted: #aa8888;
--text: #ffffff;
--accent: #ffd700; /* Gold sickle */
--accent-2: #ffffff;
--glass: rgba(255, 215, 0, 0.08);
--border: rgba(255, 255, 255, 0.2);
}
/* Drifting red stars + gold hammer glow */
body.theme-red-legacy::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255, 215, 0, 0.3) 8px, transparent 10px) 30% 40%/200px 200px no-repeat,
radial-gradient(circle, rgba(255, 255, 255, 0.25) 6px, transparent 8px) 70% 60%/180px 180px no-repeat;
animation: star-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes star-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-red-legacy .btn.primary {
background: linear-gradient(135deg, #cc0000, #ffd700);
color: #ffffff;
}
body.theme-bird-void {
--bg-primary: #000000;
--bg-page: #000000;
--card: #0f0f0f;
--muted: #71767b;
--text: #e7e9ea;
--accent: #ffffff; /* X bird */
--accent-2: #1da1f2; /* Old blue hint */
--glass: rgba(255,255,255,0.08);
--border: #2f3336;
}
/* Drifting tweet/bird particles */
body.theme-bird-void::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,255,255,0.3) 5px, transparent 5px) 20% 30%/150px 150px no-repeat,
radial-gradient(circle, rgba(29,161,242,0.2) 4px, transparent 4px) 70% 50%/130px 130px no-repeat;
animation: tweet-drift 40s linear infinite;
opacity: 0.5;
}
@keyframes tweet-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-bird-void .btn.primary {
background: #ffffff;
color: #000000;
}
body.theme-pin-board {
--bg-primary: #ffffff;
--bg-page: #996169;
--card: #996169;
--muted: #666666;
--text: white;
--accent: #e60023; /* Pinterest red */
--accent-2: #bd081c;
--glass: rgba(255,255,255,0.9);
--border: #e0e0e0;
}
/* Drifting pin/moodboard glows */
body.theme-pin-board::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(230, 0, 35, 0.3) 8px, transparent 10px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(189, 8, 28, 0.25) 7px, transparent 9px) 70% 50%/180px 180px no-repeat;
animation: pin-drift 45s linear infinite;
opacity: 0.6;
}
@keyframes pin-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-pin-board .btn.primary {
background: linear-gradient(135deg, #e60023, #bd081c);
color: #ffffff;
}
body.theme-belt-drift {
--bg-primary: #000000;
--bg-page: #000000;
--card: #1a1a1a;
--muted: #666666;
--text: #ffffff;
--accent: #808080; /* Rock gray */
--accent-2: #ff8800; /* Impact glow */
--glass: rgba(255, 136, 0, 0.08);
--border: #333333;
}
/* Drifting asteroids + impact glows */
body.theme-belt-drift::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(128,128,128,0.4) 10px, transparent 12px) 20% 30%/250px 250px no-repeat,
radial-gradient(circle, rgba(255,136,0,0.3) 8px, transparent 10px) 70% 50%/200px 200px no-repeat,
radial-gradient(circle, rgba(128,128,128,0.35) 12px, transparent 14px) 45% 80%/280px 280px no-repeat;
animation: asteroid-drift 80s linear infinite;
opacity: 0.6;
}
@keyframes asteroid-drift {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-1500px) rotate(360deg); }
}
.theme-belt-drift .btn.primary {
background: linear-gradient(135deg, #808080, #ff8800);
color: #ffffff;
}
body.theme-neural-void {
--bg-primary: #000011;
--bg-page: linear-gradient(180deg, #0a1422 0%, #000011 60%, #000005 100%);
--card: #0a1422;
--muted: #556688;
--text: #e0f0ff;
--accent: #00ffff; /* Cyan AI glow */
--accent-2: #00ccff;
--glass: rgba(0, 255, 255, 0.08);
--border: rgba(0, 255, 255, 0.2);
}
/* Pulsing neural connections */
body.theme-neural-void::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(0,255,255,0.3) 3px, transparent 3px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(0,204,255,0.25) 4px, transparent 4px) 70% 50%/220px 220px no-repeat;
animation: neural-pulse 30s ease-in-out infinite;
opacity: 0.6;
}
@keyframes neural-pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}
.theme-neural-void .btn.primary {
background: linear-gradient(135deg, #00ffff, #00ccff);
color: #000000;
}
body.theme-grok-cosmos {
--bg-primary: #000000;
--bg-page: linear-gradient(180deg, #0a0014 0%, #000000 60%, #000005 100%);
--card: #0a0a14;
--muted: #556677;
--text: #e0f0ff;
--accent: #00ffff; /* Grok cyan */
--accent-2: #00ccff;
--glass: rgba(0, 255, 255, 0.08);
--border: rgba(0, 255, 255, 0.2);
}
/* Drifting stars + cyan pulse */
body.theme-grok-cosmos::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(0,255,255,0.3) 1px, transparent 1px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.4) 0.8px, transparent 0.8px) 70% 50%/180px 180px no-repeat;
animation: stars-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes stars-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-grok-cosmos .btn.primary {
background: linear-gradient(135deg, #00ffff, #00ccff);
color: #000000;
}
body.theme-chatgpt-glow {
--bg-primary: #ffffff;
--bg-page: #f7f7f8;
--card: #ffffff;
--muted: #6b7280;
--text: #111111;
--accent: #10a37f; /* ChatGPT green */
--accent-2: #0d8a67;
--glass: rgba(16,163,127,0.08);
--border: #e5e7eb;
}
/* Subtle neural pulse */
body.theme-chatgpt-glow::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(16,163,127,0.1) 0%, transparent 60%);
animation: neural-pulse 25s ease-in-out infinite;
opacity: 0.4;
}
@keyframes neural-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-chatgpt-glow .btn.primary {
background: linear-gradient(135deg, #10a37f, #0d8a67);
color: #ffffff;
}
body.theme-pixel-grid {
--bg-primary: #000000;
--bg-page: #000000;
--card: #111111;
--muted: #888888;
--text: #ffffff;
--accent: #ff00ff;
--accent-2: #00ffff;
--glass: rgba(255,0,255,0.08);
--border: #333333;
}
/* Pixel grid + drifting particles */
body.theme-pixel-grid::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 11px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 11px);
opacity: 0.3;
}
body.theme-pixel-grid::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(square, rgba(255,0,255,0.6) 4px, transparent 4px) 20% 30%/100px 100px no-repeat,
radial-gradient(square, rgba(0,255,255,0.6) 4px, transparent 4px) 70% 50%/100px 100px no-repeat;
animation: pixel-drift 40s linear infinite;
opacity: 0.7;
}
@keyframes pixel-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1000px); }
}
.theme-pixel-grid .btn.primary {
background: linear-gradient(135deg, #ff00ff, #00ffff);
color: #000000;
}
body.theme-tux-terminal {
--bg-primary: #000000;
--bg-page: #000000;
--card: #0a0a0a;
--muted: #006600;
--text: #00ff00;
--accent: #00ff00;
--accent-2: #00cc00;
--glass: rgba(0,255,0,0.08);
--border: rgba(0,255,0,0.2);
}
/* Green terminal glow + command particles */
body.theme-tux-terminal::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(0,255,0,0.15) 0%, transparent 60%);
animation: terminal-pulse 20s ease-in-out infinite;
opacity: 0.5;
}
@keyframes terminal-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
/* Drifting command particles */
body.theme-tux-terminal::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(0,255,0,0.4) 2px, transparent 2px) 20% 30%/150px 150px no-repeat,
radial-gradient(circle, rgba(0,204,0,0.35) 2.5px, transparent 2.5px) 70% 50%/180px 180px no-repeat;
animation: command-drift 40s linear infinite;
opacity: 0.5;
}
@keyframes command-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1000px); }
}
.theme-tux-terminal .btn.primary {
background: linear-gradient(135deg, #00ff00, #00cc00);
color: #000000;
}
body.theme-windows-horizon {
--bg-primary: #0078d7;
--bg-page: linear-gradient(180deg, #005a9e 0%, #0078d7 60%, #003366 100%);
--card: rgba(255,255,255,0.9);
--muted: #666666;
--accent: #ffffff;
--accent-2: #0078d7;
--glass: rgba(255,255,255,0.8);
--border: #cccccc;
--text: white;
}
/* Drifting window particles */
body.theme-windows-horizon::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,255,255,0.6) 8px, transparent 10px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(0,120,215,0.4) 7px, transparent 9px) 70% 50%/180px 180px no-repeat;
animation: window-drift 40s linear infinite;
opacity: 0.6;
}
@keyframes window-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1000px); }
}
.theme-windows-horizon .btn.primary {
background: linear-gradient(135deg, #0078d7, #005a9e);
color: #ffffff;
}
body.theme-macos-ventura {
--bg-primary: #fff;
--bg-page: linear-gradient(180deg, #273373 0%, #f5f5f7 100%);
--card: #2d3757;
--muted: #666666;
--text: #bbc2d7;
--accent: #007aff;
--accent-2: #ff3b30;
--glass: rgba(255,255,255,0.9);
--border: #e0e0e0;
}
/* Floating dock glow */
body.theme-macos-ventura::before {
content: '';
position: fixed;
inset: 0;
bottom: 0;
height: 100px;
pointer-events: none;
z-index: -1;
background: linear-gradient(to top, rgba(255,255,255,0.8), transparent);
animation: dock-glow 20s ease-in-out infinite;
opacity: 0.5;
}
@keyframes dock-glow {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
.theme-macos-ventura .btn.primary {
background: linear-gradient(135deg, #007aff, #005ecb);
color: #ffffff;
}
body.theme-undead-horizon {
--bg-primary: #0a140a;
--bg-page: linear-gradient(180deg, #1a2d1a 0%, #0a140a 60%, #000000 100%);
--card: #1a2d1a;
--muted: #556655;
--text: #ccffcc;
--accent: #cc0000; /* Blood red */
--accent-2: #006600; /* Toxic green */
--glass: rgba(204, 0, 0, 0.08);
--border: rgba(0, 102, 0, 0.2);
}
/* Drifting ash + red eye glows */
body.theme-undead-horizon::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(204, 0, 0, 0.3) 4px, transparent 4px) 30% 40%/200px 200px no-repeat,
radial-gradient(circle, rgba(0, 102, 0, 0.25) 3px, transparent 3px) 70% 60%/180px 180px no-repeat;
animation: ash-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes ash-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-undead-horizon .btn.primary {
background: linear-gradient(135deg, #cc0000, #006600);
color: #ffffff;
}
body.theme-tesla-horizon {
--bg-primary: #000000;
--bg-page: linear-gradient(180deg, #0a1422 0%, #000000 60%, #000005 100%);
--card: #0a1422;
--muted: #556677;
--text: #ffffff;
--accent: #00ccff; /* Tesla cyan-blue */
--accent-2: #e82127; /* Tesla red */
--glass: rgba(0, 204, 255, 0.08);
--border: rgba(0, 204, 255, 0.2);
}
/* Lightning energy pulse */
body.theme-tesla-horizon::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(0,204,255,0.2) 0%, transparent 60%);
animation: tesla-pulse 25s ease-in-out infinite;
opacity: 0.5;
}
@keyframes tesla-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
.theme-tesla-horizon .btn.primary {
background: linear-gradient(135deg, #00ccff, #e82127);
color: #000000;
}
body.theme-falcon-void {
--bg-primary: #000000;
--bg-page: #000000;
--card: #1a0000;
--muted: #556677;
--text: #ffffff;
--accent: #ff6600; /* Rocket flame */
--accent-2: #00aaff; /* Engine blue */
--glass: rgba(255, 102, 0, 0.08);
--border: rgba(0, 170, 255, 0.2);
}
/* Drifting rocket exhaust particles */
body.theme-falcon-void::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,102,0,0.4) 4px, transparent 4px) 30% 80%/200px 200px no-repeat,
radial-gradient(circle, rgba(0,170,255,0.3) 3px, transparent 3px) 70% 70%/180px 180px no-repeat;
animation: exhaust-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes exhaust-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-falcon-void .btn.primary {
background: linear-gradient(135deg, #ff6600, #00aaff);
color: #000000;
}
body.theme-nasa-horizon {
--bg-primary: #0b1d3a;
--bg-page: linear-gradient(180deg, #1e3a8a 0%, #0b1d3a 60%, #000011 100%);
--card: #1e3a8a;
--muted: #94a3b8;
--text: #e0e7ff;
--accent: #ffffff; /* NASA white */
--accent-2: #dc143c; /* NASA red */
--glass: rgba(255,255,255,0.08);
--border: rgba(220,20,60,0.2);
}
/* Drifting stars + mission glow */
body.theme-nasa-horizon::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(220,20,60,0.2) 2px, transparent 2px) 70% 50%/180px 180px no-repeat;
animation: stars-drift 60s linear infinite;
opacity: 0.6;
}
@keyframes stars-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-nasa-horizon .btn.primary {
background: linear-gradient(135deg, #ffffff, #dc143c);
color: #000000;
}
body.theme-area51-files {
--bg-primary: #000011;
--bg-page: linear-gradient(180deg, #001122 0%, #000011 60%, #000005 100%);
--card: #001122;
--muted: #556677;
--text: #ffffff;
--accent: #00ff33; /* Radar green */
--accent-2: #00aaff; /* UFO blue */
--glass: rgba(0,255,51,0.08);
--border: rgba(0,170,255,0.2);
}
/* Drifting radar pings + UFO beams */
body.theme-area51-files::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(0,255,51,0.4) 4px, transparent 4px) 30% 40%/200px 200px no-repeat,
radial-gradient(circle, rgba(0,170,255,0.3) 5px, transparent 5px) 70% 60%/220px 220px no-repeat;
animation: radar-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes radar-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-area51-files .btn.primary {
background: linear-gradient(135deg, #00ff33, #00aaff);
color: #000000;
}
body.theme-zero-gravity {
--bg-primary: #000000;
--bg-page: #000000;
--card: #0a0014;
--muted: #556677;
--text: #ffffff;
--accent: #00aaff; /* Visor blue */
--accent-2: #ff8800; /* Suit orange */
--glass: rgba(0,170,255,0.08);
--border: rgba(255,136,0,0.2);
}
/* Drifting oxygen bubbles */
body.theme-zero-gravity::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,255,255,0.6) 5px, transparent 5px) 20% 30%/150px 150px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.5) 7px, transparent 7px) 70% 50%/180px 180px no-repeat;
animation: bubbles-float 50s linear infinite;
opacity: 0.6;
}
@keyframes bubbles-float {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-zero-gravity .btn.primary {
background: linear-gradient(135deg, #00aaff, #ff8800);
color: #000000;
}
body.theme-stars-stripes-glory {
--bg-primary: #002868;
--bg-page: linear-gradient(180deg, #002868 0%, #000000 100%);
--card: rgba(0, 40, 104, 0.8);
--muted: #aaaaaa;
--text: #ffffff;
--accent: #bf0a30; /* Red stripes */
--accent-2: #ffffff;
--glass: rgba(255,255,255,0.1);
--border: rgba(191,10,48,0.2);
}
/* Drifting stars + eagle glow */
body.theme-stars-stripes-glory::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,255,255,0.6) 1px, transparent 1px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(191,10,48,0.3) 3px, transparent 3px) 70% 50%/220px 220px no-repeat;
animation: stars-drift 50s linear infinite;
opacity: 0.7;
}
@keyframes stars-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
/* Red pulse */
body.theme-stars-stripes-glory::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(191,10,48,0.1) 0%, transparent 60%);
animation: stripe-pulse 25s ease-in-out infinite;
opacity: 0.4;
}
@keyframes stripe-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-stars-stripes-glory .btn.primary {
background: linear-gradient(135deg, #bf0a30, #ffffff);
color: #000000;
}
body.theme-bears-might {
--bg-primary: #cc0000;
--bg-page: linear-gradient(180deg, #990000 0%, #cc0000 60%, #660000 100%);
--card: #990000;
--muted: #aa8888;
--text: #ffffff;
--accent: #ffd700; /* Gold eagle */
--accent-2: #ffffff;
--glass: rgba(255,215,0,0.08);
--border: rgba(255,255,255,0.2);
}
/* Drifting stars + eagle glow */
body.theme-bears-might::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,215,0,0.3) 5px, transparent 5px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.25) 4px, transparent 4px) 70% 50%/180px 180px no-repeat;
animation: stars-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes stars-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
/* Red/gold pulse */
body.theme-bears-might::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(255,215,0,0.1) 0%, transparent 60%);
animation: eagle-pulse 30s ease-in-out infinite;
opacity: 0.4;
}
@keyframes eagle-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-bears-might .btn.primary {
background: linear-gradient(135deg, #cc0000, #ffd700);
color: #ffffff;
}
body.theme-eagles-honor {
--bg-primary: #000000;
--bg-page: linear-gradient(180deg, #dd0000 0%, #000000 33%, #ffce00 66%, #000000 100%);
--card: #1a1a1a;
--muted: #aaaaaa;
--text: #ffffff;
--accent: #ffce00; /* Gold */
--accent-2: #dd0000; /* Red */
--glass: rgba(255,206,0,0.08);
--border: rgba(221,0,0,0.2);
}
/* Drifting eagle + gate glow */
body.theme-eagles-honor::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,206,0,0.3) 6px, transparent 8px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(221,0,0,0.25) 5px, transparent 7px) 70% 50%/180px 180px no-repeat;
animation: eagle-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes eagle-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
/* Gold/red pulse */
body.theme-eagles-honor::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(255,206,0,0.1) 0%, transparent 60%);
animation: gate-pulse 30s ease-in-out infinite;
opacity: 0.4;
}
@keyframes gate-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-eagles-honor .btn.primary {
background: linear-gradient(135deg, #ffce00, #dd0000);
color: #000000;
}
body.theme-liberte-glow {
--bg-primary: #002395;
--bg-page: linear-gradient(180deg, #002395 0%, #ffffff 50%, #ed2939 100%);
--card: rgba(255,255,255,0.9);
--muted: #666666;
--accent: #ed2939; /* Red */
--accent-2: #002395; /* Blue */
--glass: rgba(255,255,255,0.8);
--border: #ffffff;
}
/* Drifting fleur-de-lis + tower glow */
body.theme-liberte-glow::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(237,41,57,0.3) 6px, transparent 8px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(0,35,149,0.25) 5px, transparent 7px) 70% 50%/180px 180px no-repeat;
animation: lis-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes lis-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
/* Tricolor pulse */
body.theme-liberte-glow::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: linear-gradient(135deg, rgba(0,35,149,0.1), rgba(237,41,57,0.1));
animation: france-pulse 30s ease-in-out infinite;
opacity: 0.4;
}
@keyframes france-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-liberte-glow .btn.primary {
background: linear-gradient(135deg, #002395, #ed2939);
color: #ffffff;
}
body.theme-nordic-cross-blue {
--bg-primary: #004b87;
--bg-page: linear-gradient(180deg, #004b87 0%, #002b4f 100%);
--card: rgba(255,255,255,0.9);
--muted: #666666;
--text: #000000;
--accent: #fecc00; /* Yellow cross */
--accent-2: #004b87;
--glass: rgba(255,255,255,0.8);
--border: #ffffff;
}
/* Drifting snow + aurora hint */
body.theme-nordic-cross-blue::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(254,204,0,0.3) 5px, transparent 5px) 20% 30%/180px 180px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.4) 3px, transparent 3px) 70% 50%/160px 160px no-repeat;
animation: snow-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes snow-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-nordic-cross-blue .btn.primary {
background: linear-gradient(135deg, #fecc00, #004b87);
color: #000000;
}
body.theme-viking-fjords {
--bg-primary: #00205b;
--bg-page: linear-gradient(180deg, #00205b 0%, #001133 60%, #000011 100%);
--card: #001133;
--muted: #556677;
--text: #ffffff;
--accent: #ef2b2d; /* Red cross */
--accent-2: #ffffff;
--glass: rgba(239,43,45,0.08);
--border: rgba(255,255,255,0.2);
}
/* Drifting mist + aurora hint */
body.theme-viking-fjords::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(239,43,45,0.3) 5px, transparent 5px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.25) 4px, transparent 4px) 70% 50%/180px 180px no-repeat;
animation: mist-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes mist-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-viking-fjords .btn.primary {
background: linear-gradient(135deg, #ef2b2d, #ffffff);
color: #000000;
}
body.theme-sisu-eternal {
--bg-primary: #ffffff;
--bg-page: linear-gradient(180deg, #ffffff 0%, #e0f0ff 100%);
--card: #ffffff;
--muted: #666666;
--text: #000000;
--accent: #002f6c; /* Finnish blue */
--accent-2: #ffffff;
--glass: rgba(255,255,255,0.9);
--border: #002f6c;
}
/* Drifting snow + aurora hint */
body.theme-sisu-eternal::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(0,47,108,0.3) 5px, transparent 5px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.4) 4px, transparent 4px) 70% 50%/180px 180px no-repeat;
animation: snow-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes snow-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-sisu-eternal .btn.primary {
background: #002f6c;
color: #ffffff;
}
body.theme-iceberg-depths {
/* Surface level — clean white */
--bg-primary: #ffffff;
/* Gradient: surface white → mid cyan → deep black void */
--bg-page: linear-gradient(180deg, #e0f2fe 0%, #60a5fa 40%, #1e293b 70%, #000000 100%);
/* Cards: Soft white fading to dark */
--card: rgba(255, 255, 255, 0.9);
/* Muted text: Cool gray */
--muted: #64748b;
/* Main text: Dark for readability */
--text: #1e293b;
/* Primary accent: Mid-tier cyan glow */
--accent: #60a5fa;
/* Secondary accent: Bottom-tier forbidden red */
--accent-2: #dc2626;
/* Glass: Subtle frost */
--glass: rgba(96, 165, 250, 0.08);
/* Borders: Deep shadow */
--border: #1e293b;
}
/* Drifting forbidden symbols + deep glow (bottom of iceberg) */
body.theme-iceberg-depths::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 20% 70%, rgba(96, 165, 250, 0.25) 0%, transparent 40%),
radial-gradient(circle at 70% 80%, rgba(220, 38, 38, 0.2) 0%, transparent 40%),
radial-gradient(circle at 50% 90%, rgba(220, 38, 38, 0.15) 0%, transparent 50%);
animation: deep-drift 60s linear infinite;
opacity: 0.6;
filter: blur(30px);
}
@keyframes deep-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1000px); }
}
/* Subtle surface ripple + red warning pulse at bottom */
body.theme-iceberg-depths::after {
content: '';
position: fixed;
inset: 0;
bottom: 0;
height: 60%;
pointer-events: none;
z-index: -1;
background: linear-gradient(to top, rgba(220, 38, 38, 0.1), transparent);
animation: warning-pulse 25s ease-in-out infinite;
opacity: 0.4;
}
@keyframes warning-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
/* Dual gradient buttons — surface to deep */
.theme-iceberg-depths .btn.primary {
background: linear-gradient(135deg, #60a5fa, #dc2626);
color: #ffffff;
font-weight: 700;
}
/* Preview box — layered depth frame */
.theme-iceberg-depths #profile-preview-box {
border: 4px solid #60a5fa;
box-shadow: 0 15px 50px rgba(96, 165, 250, 0.3),
inset 0 0 40px rgba(220, 38, 38, 0.1);
}
/* Tag — mysterious glow */
.theme-iceberg-depths .preview-tag .tag-preview {
box-shadow: 0 0 25px rgba(96, 165, 250, 0.6);
}
body.theme-mandela-glitch {
/* Deep distorted void — like fractured reality */
--bg-primary: #0a0014;
/* Gradient: purple void with memory shift */
--bg-page: linear-gradient(180deg, #1a002a 0%, #0a0014 50%, #000005 100%);
/* Cards: Semi-transparent with glitch overlay */
--card: rgba(26, 0, 42, 0.8);
/* Muted text: Faint distorted gray */
--muted: #7777aa;
/* Main text: Bright white with occasional flicker */
--text: #ffffff;
/* Primary accent: Magenta glitch */
--accent: #ff00ff;
/* Secondary: Cyan alternate memory */
--accent-2: #00ffff;
/* Tertiary: Yellow confusion */
--accent-3: #ffff00;
/* Glass: Warped transparency */
--glass: rgba(255, 0, 255, 0.08);
/* Borders: Flickering edge */
--border: rgba(0, 255, 255, 0.2);
}
/* Slow reality glitch overlay — double vision shift */
body.theme-mandela-glitch::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
linear-gradient(90deg, transparent 48%, rgba(255,0,255,0.1) 50%, transparent 52%),
linear-gradient(0deg, transparent 48%, rgba(0,255,255,0.1) 50%, transparent 52%);
animation: memory-glitch 20s ease-in-out infinite;
opacity: 0.5;
filter: blur(1px);
}
@keyframes memory-glitch {
0%, 100% { transform: translate(0,0); opacity: 0.4; }
20% { transform: translate(5px, -3px); opacity: 0.7; }
40% { transform: translate(-4px, 6px); opacity: 0.5; }
60% { transform: translate(3px, -5px); opacity: 0.8; }
80% { transform: translate(-6px, 4px); opacity: 0.6; }
}
/* Drifting "alternate memory" particles — like confused thoughts */
body.theme-mandela-glitch::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,0,255,0.3) 3px, transparent 3px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(0,255,255,0.25) 4px, transparent 4px) 70% 50%/220px 220px no-repeat,
radial-gradient(circle, rgba(255,255,0,0.2) 2.5px, transparent 2.5px) 45% 80%/180px 180px no-repeat;
animation: confusion-drift 50s linear infinite;
opacity: 0.5;
}
@keyframes confusion-drift {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-1200px) rotate(360deg); }
}
@keyframes glitch-flicker {
0%, 100% { box-shadow: 0 0 40px rgba(255,0,255,0.6), 0 0 60px rgba(0,255,255,0.4); }
50% { box-shadow: 0 0 60px rgba(255,0,255,0.9), 0 0 80px rgba(0,255,255,0.7); }
}
/* Magenta-cyan buttons — reality shift */
.theme-mandela-glitch .btn.primary {
background: linear-gradient(135deg, #ff00ff, #00ffff);
color: #000000;
font-weight: 800;
}
/* Preview box — warped reality frame */
.theme-mandela-glitch #profile-preview-box {
border: 4px solid #ff00ff;
box-shadow: 0 20px 60px rgba(255,0,255,0.5),
inset 0 0 50px rgba(0,255,255,0.15);
animation: reality-shift 15s ease-in-out infinite;
}
@keyframes reality-shift {
0%, 100% { transform: translate(0,0); }
50% { transform: translate(5px, -5px); }
}
/* Tag — intense glitch shine */
.theme-mandela-glitch .preview-tag .tag-preview {
box-shadow: 0 0 40px rgba(255,0,255,0.9);
animation: memory-flicker 3s infinite;
}
@keyframes memory-flicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
body.theme-parallel-echo {
/* Deep multiverse void */
--bg-primary: #0a0014;
/* Gradient: purple void with reality shift */
--bg-page: linear-gradient(180deg, #1a002a 0%, #0a0014 50%, #000005 100%);
/* Cards: Semi-transparent with mirror overlay */
--card: rgba(26, 0, 42, 0.8);
/* Muted text: Faint inverted gray */
--muted: #aa88cc;
/* Main text: Bright echo white */
--text: #ffffff;
/* Primary accent: Cyan mirror glow */
--accent: #00ffff;
/* Secondary: Magenta alternate reality */
--accent-2: #ff00ff;
/* Tertiary: Yellow confusion shift */
--accent-3: #ffff00;
/* Glass: Warped echo */
--glass: rgba(0, 255, 255, 0.08);
/* Borders: Distorted edge */
--border: rgba(255, 0, 255, 0.2);
}
/* Slow mirror echo overlay — double reality shift */
body.theme-parallel-echo::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
linear-gradient(90deg, transparent 48%, rgba(0,255,255,0.15) 50%, transparent 52%),
linear-gradient(0deg, transparent 48%, rgba(255,0,255,0.1) 50%, transparent 52%);
animation: reality-echo 30s ease-in-out infinite;
opacity: 0.5;
filter: blur(2px);
}
@keyframes reality-echo {
0%, 100% { transform: translate(0,0) scale(1); opacity: 0.4; }
25% { transform: translate(10px, -8px) scale(1.02); opacity: 0.7; }
50% { transform: translate(-12px, 10px) scale(0.98); opacity: 0.6; }
75% { transform: translate(8px, 12px) scale(1.01); opacity: 0.8; }
}
/* Drifting "alternate" particles — like bleeding realities */
body.theme-parallel-echo::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(0,255,255,0.3) 3px, transparent 3px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(255,0,255,0.25) 4px, transparent 4px) 70% 50%/220px 220px no-repeat,
radial-gradient(circle, rgba(255,255,0,0.2) 2.5px, transparent 2.5px) 45% 80%/180px 180px no-repeat;
animation: echo-drift 60s linear infinite;
opacity: 0.5;
}
@keyframes echo-drift {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-1200px) rotate(360deg); }
}
@keyframes mirror-flicker {
0%, 100% { box-shadow: 0 0 50px rgba(0,255,255,0.6), 0 0 80px rgba(255,0,255,0.4); }
50% { box-shadow: 0 0 70px rgba(0,255,255,0.9), 0 0 100px rgba(255,0,255,0.7); }
}
/* Cyan-magenta buttons — reality flip */
.theme-parallel-echo .btn.primary {
background: linear-gradient(135deg, #00ffff, #ff00ff);
color: #000000;
font-weight: 800;
}
/* Preview box — warped mirror frame */
.theme-parallel-echo #profile-preview-box {
border: 4px solid #00ffff;
box-shadow: 0 20px 60px rgba(0,255,255,0.5),
inset 0 0 50px rgba(255,0,255,0.15);
animation: dimension-shift 20s ease-in-out infinite;
}
@keyframes dimension-shift {
0%, 100% { transform: translate(0,0); }
50% { transform: translate(8px, -8px); }
}
/* Tag — intense echo shine */
.theme-parallel-echo .preview-tag .tag-preview {
box-shadow: 0 0 40px rgba(0,255,255,0.9);
animation: echo-pulse 4s infinite;
}
@keyframes echo-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
body.theme-chronos-flux {
/* Deep temporal void — dark blue-black */
--bg-primary: #001122;
/* Gradient: past sepia to future neon */
--bg-page: linear-gradient(180deg, #003366 0%, #001122 50%, #000011 100%);
/* Cards: Semi-transparent temporal glass */
--card: rgba(0, 51, 102, 0.8);
/* Muted text: Faint timeline gray */
--muted: #6688aa;
/* Main text: Bright chronal white */
--text: #ffffff;
/* Primary accent: Temporal blue energy */
--accent: #00ccff;
/* Secondary: Past sepia glow */
--accent-2: #ffccaa;
/* Glass: Warped time */
--glass: rgba(0, 204, 255, 0.1);
/* Borders: Glowing edge */
--border: rgba(0, 204, 255, 0.25);
}
/* Swirling temporal vortex + drifting hourglass sand */
body.theme-chronos-flux::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at center, rgba(0,204,255,0.3) 0%, transparent 60%);
animation: time-vortex 60s linear infinite;
opacity: 0.7;
filter: blur(40px);
}
@keyframes time-vortex {
0% { transform: rotate(0deg) scale(1); }
100% { transform: rotate(360deg) scale(1.05); }
}
/* Drifting hourglass sand + clock gear particles */
body.theme-chronos-flux::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,204,170,0.4) 2px, transparent 2px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(0,204,255,0.3) 3px, transparent 3px) 70% 50%/220px 220px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.25) 1.8px, transparent 1.8px) 45% 80%/180px 180px no-repeat;
animation: sand-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes sand-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
/* Blue-sepia buttons — past/future shift */
.theme-chronos-flux .btn.primary {
background: linear-gradient(135deg, #00ccff, #ffccaa);
color: #000000;
font-weight: 800;
}
/* Preview box — time warp frame */
.theme-chronos-flux #profile-preview-box {
border: 4px solid #00ccff;
box-shadow: 0 20px 60px rgba(0,204,255,0.5),
inset 0 0 50px rgba(255,204,170,0.15);
}
/* Tag — chronal shine */
.theme-chronos-flux .preview-tag .tag-preview {
box-shadow: 0 0 40px rgba(0,204,255,0.9);
}
body.theme-lunar-eclipse {
--bg-primary: #000000;
--bg-page: #000000;
--card: #0a0000;
--muted: #556677;
--text: #ffffff;
--accent: #ff3300; /* Corona orange-red */
--accent-2: #00aaff; /* Earthshine blue */
--glass: rgba(255, 51, 0, 0.08);
--border: rgba(0, 170, 255, 0.2);
}
/* Glowing corona ring around central void */
body.theme-lunar-eclipse::before {
content: '';
position: fixed;
left: 50%;
top: 50%;
width: 70vw;
height: 70vw;
max-width: 900px;
max-height: 900px;
margin-left: -35vw;
margin-top: -35vw;
background: radial-gradient(circle, transparent 30%, rgba(255,51,0,0.6) 45%, rgba(255,102,0,0.4) 60%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
animation: corona-pulse 40s ease-in-out infinite;
filter: blur(40px);
opacity: 0.8;
}
@keyframes corona-pulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 0.9; transform: scale(1.03); }
}
/* Drifting umbra shadows + blue earthshine */
body.theme-lunar-eclipse::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(0,170,255,0.2) 3px, transparent 3px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(255,51,0,0.25) 4px, transparent 4px) 70% 50%/220px 220px no-repeat;
animation: shadow-drift 60s linear infinite;
opacity: 0.5;
}
@keyframes shadow-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-lunar-eclipse .btn.primary {
background: linear-gradient(135deg, #ff3300, #00aaff);
color: #000000;
}
body.theme-nordic-aurora {
--bg-primary: #0f172a;
--bg-page: linear-gradient(180deg, #1e293b 0%, #0f172a 60%, #020617 100%);
--card: #1e293b;
--muted: #94a3b8;
--text: #f0f9ff;
--accent: #34d399; /* Aurora green */
--accent-2: #a78bfa; /* Purple aurora */
--glass: rgba(52, 211, 153, 0.08);
--border: rgba(167, 139, 250, 0.15);
}
/* Vibrant aurora waves */
body.theme-nordic-aurora::before {
content: '';
position: fixed;
inset: 0;
top: -50%;
height: 150%;
pointer-events: none;
z-index: -1;
background:
linear-gradient(90deg,
transparent 0%,
rgba(52, 211, 153, 0.3) 20%,
rgba(167, 139, 250, 0.35) 40%,
rgba(52, 211, 153, 0.3) 60%,
transparent 100%);
animation: aurora-dance 50s ease-in-out infinite;
opacity: 0.7;
filter: blur(60px);
}
@keyframes aurora-dance {
0% { transform: translateX(-20%) skewX(-10deg); opacity: 0.6; }
50% { transform: translateX(20%) skewX(10deg); opacity: 0.9; }
100% { transform: translateX(-20%) skewX(-10deg); opacity: 0.6; }
}
/* Gentle snow drift */
body.theme-nordic-aurora::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(240,249,255,0.8) 2px, transparent 2px) 15% 10%/200px 200px no-repeat,
radial-gradient(circle, rgba(240,249,255,0.7) 2.5px, transparent 2.5px) 70% 20%/250px 250px no-repeat,
radial-gradient(circle, rgba(240,249,255,0.6) 1.8px, transparent 1.8px) 40% 50%/180px 180px no-repeat;
animation: snow-fall 60s linear infinite;
opacity: 0.5;
}
@keyframes snow-fall {
0% { transform: translateY(0); }
100% { transform: translateY(1200px); }
}
.theme-nordic-aurora .btn.primary {
background: linear-gradient(135deg, #34d399, #a78bfa);
color: #000000;
}
body.theme-cosmic-nebula {
--bg-primary: #0a0014;
--bg-page: linear-gradient(180deg, #1a002a 0%, #0a0014 50%, #000005 100%);
--card: rgba(26, 0, 42, 0.7);
--muted: #a78bfa;
--text: #e0e7ff;
--accent: #ec4899; /* Pink nebula core */
--accent-2: #8b5cf6; /* Purple gas */
--accent-3: #f59e0b; /* Orange star birth */
--glass: rgba(236, 72, 153, 0.08);
--border: rgba(139, 92, 246, 0.2);
}
/* Slow drifting nebula clouds */
body.theme-cosmic-nebula::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 20% 30%, rgba(236,72,153,0.3) 0%, transparent 40%),
radial-gradient(circle at 70% 50%, rgba(139,92,246,0.25) 0%, transparent 40%),
radial-gradient(circle at 45% 80%, rgba(245,158,11,0.2) 0%, transparent 40%);
animation: nebula-drift 80s ease-in-out infinite;
opacity: 0.7;
filter: blur(50px);
}
@keyframes nebula-drift {
0% { transform: translate(0,0) scale(1); }
50% { transform: translate(50px, -40px) scale(1.05); }
100% { transform: translate(0,0) scale(1); }
}
/* Subtle star/glow pulse */
body.theme-cosmic-nebula::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(139,92,246,0.1) 0%, transparent 60%);
animation: star-pulse 40s ease-in-out infinite;
opacity: 0.4;
}
@keyframes star-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-cosmic-nebula .btn.primary {
background: linear-gradient(135deg, #ec4899, #8b5cf6);
color: #000000;
}
body.theme-radar-sweep {
--bg-primary: #000000;
--bg-page: #000000;
--card: #001a00;
--muted: #006600;
--text: #00ff00;
--accent: #00ff00;
--accent-2: #00cc00;
--glass: rgba(0,255,0,0.08);
--border: rgba(0,255,0,0.2);
}
/* Rotating radar sweep */
body.theme-radar-sweep::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: conic-gradient(from 0deg at center, transparent 0%, rgba(0,255,0,0.3) 5%, transparent 10%);
animation: radar-rotate 20s linear infinite;
opacity: 0.6;
}
@keyframes radar-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Pulsing blips */
body.theme-radar-sweep::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(0,255,0,0.8) 3px, transparent 3px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(0,255,0,0.6) 4px, transparent 4px) 70% 50%/220px 220px no-repeat;
animation: blip-pulse 15s ease-in-out infinite;
opacity: 0.7;
}
@keyframes blip-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.9; }
}
.theme-radar-sweep .btn.primary {
background: linear-gradient(135deg, #00ff00, #00cc00);
color: #000000;
}
body.theme-void-emptiness {
--bg-primary: #000000;
--bg-page: #000000;
--card: #0a0a0a;
--muted: #333333;
--text: #ffffff;
--accent: #ffffff;
--accent-2: #333333;
--glass: rgba(255,255,255,0.02);
--border: #1a1a1a;
}
/* Very faint distant stars */
body.theme-void-emptiness::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,255,255,0.3) 0.5px, transparent 1px) 15% 20%/400px 400px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.2) 0.4px, transparent 0.8px) 60% 40%/350px 350px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.25) 0.6px, transparent 1px) 80% 70%/380px 380px no-repeat;
opacity: 0.4;
}
/* Subtle breathing pulse — like emptiness expanding */
body.theme-void-emptiness::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, transparent 80%);
animation: void-breath 40s ease-in-out infinite;
opacity: 0.3;
}
@keyframes void-breath {
0%, 100% { transform: scale(1); opacity: 0.2; }
50% { transform: scale(1.05); opacity: 0.4; }
}
.theme-void-emptiness .btn.primary {
background: #ffffff;
color: #000000;
}
body.theme-blue-hour-serenity {
--bg-primary: #1e3a8a;
--bg-page: linear-gradient(180deg, #312e81 0%, #1e3a8a 60%, #0f172a 100%);
--card: rgba(30, 58, 138, 0.8);
--muted: #94a3b8;
--text: #e0e7ff;
--accent: #fbbf24; /* Horizon gold */
--accent-2: #ffffff;
--glass: rgba(251,191,36,0.08);
--border: rgba(255,255,255,0.2);
}
/* Drifting twilight mist */
body.theme-blue-hour-serenity::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 50% 80%, rgba(251,191,36,0.2) 0%, transparent 40%),
radial-gradient(circle at 30% 60%, rgba(255,255,255,0.1) 0%, transparent 40%);
animation: mist-drift 60s ease-in-out infinite;
opacity: 0.5;
filter: blur(40px);
}
@keyframes mist-drift {
0% { transform: translateX(-50px); }
50% { transform: translateX(50px); }
100% { transform: translateX(-50px); }
}
/* Golden horizon glow */
body.theme-blue-hour-serenity::after {
content: '';
position: fixed;
inset: 0;
bottom: 0;
height: 40%;
pointer-events: none;
z-index: -1;
background: linear-gradient(to top, rgba(251,191,36,0.3), transparent);
animation: horizon-pulse 30s ease-in-out infinite;
opacity: 0.4;
}
@keyframes horizon-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-blue-hour-serenity .btn.primary {
background: linear-gradient(135deg, #fbbf24, #1e3a8a);
color: #000000;
}
body.theme-toy-story-adventure {
--bg-primary: #87ceeb;
--bg-page: linear-gradient(180deg, #ffffff 0%, #87ceeb 60%, #5f9ea0 100%);
--card: rgba(255,255,255,0.95);
--muted: #666666;
--text: #000000;
--accent: #ffcc00; /* Woody yellow */
--accent-2: #ff3300; /* Jessie red */
--accent-3: #00cc66; /* Army green */
--glass: rgba(255,255,255,0.8);
--border: #ffffff;
}
/* Drifting toys + fluffy clouds */
body.theme-toy-story-adventure::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(ellipse, rgba(255,255,255,0.8) 20px, transparent 30px) 20% 20%/300px 150px no-repeat,
radial-gradient(ellipse, rgba(255,255,255,0.7) 25px, transparent 35px) 70% 40%/350px 180px no-repeat,
radial-gradient(circle, rgba(255,204,0,0.4) 8px, transparent 10px) 30% 70%/150px 150px no-repeat,
radial-gradient(circle, rgba(255,51,0,0.3) 7px, transparent 9px) 80% 60%/140px 140px no-repeat;
animation: toys-float 60s linear infinite;
opacity: 0.7;
}
@keyframes toys-float {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-1200px) rotate(360deg); }
}
/* Sunny glow */
body.theme-toy-story-adventure::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at center, rgba(255,204,0,0.1) 0%, transparent 60%);
animation: friendship-pulse 25s ease-in-out infinite;
opacity: 0.4;
}
@keyframes friendship-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.theme-toy-story-adventure .btn.primary {
background: linear-gradient(135deg, #ffcc00, #ff3300);
color: #000000;
}
body.theme-up-adventure {
--bg-primary: #ffccaa;
--bg-page: linear-gradient(180deg, #ffaa88 0%, #ffccaa 40%, #ffffff 100%);
--card: rgba(255,255,255,0.9);
--muted: #666666;
--text: #000000;
--accent: #ff8888; /* Red balloons */
--accent-2: #ffff88; /* Yellow */
--accent-3: #88ccff; /* Blue */
--glass: rgba(255,255,255,0.8);
--border: #ffffff;
}
/* Drifting colorful balloons + house */
body.theme-up-adventure::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,136,136,0.6) 10px, transparent 12px) 20% 20%/200px 200px no-repeat,
radial-gradient(circle, rgba(255,255,136,0.6) 12px, transparent 14px) 70% 30%/220px 220px no-repeat,
radial-gradient(circle, rgba(136,204,255,0.5) 9px, transparent 11px) 45% 60%/180px 180px no-repeat,
radial-gradient(ellipse, rgba(255,255,255,0.4) 15px 25px, transparent 20px) 50% 80%/150px 200px no-repeat; /* House */
animation: balloons-float 70s linear infinite;
opacity: 0.7;
}
@keyframes balloons-float {
0% { transform: translateY(100vh); }
100% { transform: translateY(-200px); }
}
/* Sunrise glow */
body.theme-up-adventure::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at bottom center, rgba(255,170,136,0.3) 0%, transparent 60%);
animation: sunrise-pulse 40s ease-in-out infinite;
opacity: 0.5;
}
@keyframes sunrise-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
.theme-up-adventure .btn.primary {
background: linear-gradient(135deg, #ff8888, #ffff88);
color: #000000;
}
body.theme-checkmate-realm {
--bg-primary: #000000;
--bg-page: repeating-linear-gradient(45deg, #000000 0px, #000000 25px, #ffffff 25px, #ffffff 50px);
--card: #ffffff;
--muted: #808080;
--text: #000000;
--accent: #d4af37; /* Gold pieces */
--accent-2: #c0c0c0; /* Silver pieces */
--glass: rgba(255,255,255,0.9);
--border: #000000;
}
/* Drifting chess pieces */
body.theme-checkmate-realm::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(212,175,55,0.4) 8px, transparent 10px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(192,192,192,0.35) 7px, transparent 9px) 70% 50%/180px 180px no-repeat;
animation: pieces-drift 60s linear infinite;
opacity: 0.6;
}
@keyframes pieces-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-checkmate-realm .btn.primary {
background: linear-gradient(135deg, #d4af37, #c0c0c0);
color: #000000;
}
body.theme-jungle-canopy {
--bg-primary: #003300;
--bg-page: linear-gradient(180deg, #006633 0%, #003300 60%, #001a00 100%);
--card: rgba(0, 102, 51, 0.8);
--muted: #88aa88;
--text: #ffffff;
--accent: #00cc66; /* Emerald glow */
--accent-2: #ffcc00; /* Sunlight */
--glass: rgba(0,204,102,0.08);
--border: rgba(255,204,0,0.2);
}
/* Drifting leaves + vines */
body.theme-jungle-canopy::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(ellipse, rgba(0,204,102,0.4) 10px 20px, transparent 20px) 20% 30%/200px 200px no-repeat,
radial-gradient(ellipse, rgba(255,204,0,0.3) 8px 15px, transparent 15px) 70% 50%/180px 180px no-repeat;
animation: leaves-drift 50s linear infinite;
opacity: 0.6;
}
@keyframes leaves-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-jungle-canopy .btn.primary {
background: linear-gradient(135deg, #00cc66, #ffcc00);
color: #000000;
}
body.theme-agrabah-nights {
--bg-primary: #2d004d;
--bg-page: linear-gradient(180deg, #4b0082 0%, #2d004d 60%, #1a002d 100%);
--card: rgba(75, 0, 130, 0.8);
--muted: #aa88cc;
--text: #ffffff;
--accent: #ffd700; /* Gold lamp */
--accent-2: #00ccaa; /* Turquoise carpet */
--glass: rgba(255,215,0,0.08);
--border: rgba(0,204,170,0.2);
}
/* Drifting genie smoke + magic carpet glow */
body.theme-agrabah-nights::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(255,215,0,0.3) 8px, transparent 10px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(0,204,170,0.25) 10px, transparent 12px) 70% 50%/220px 220px no-repeat;
animation: smoke-drift 60s linear infinite;
opacity: 0.6;
}
@keyframes smoke-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-agrabah-nights .btn.primary {
background: linear-gradient(135deg, #ffd700, #00ccaa);
color: #000000;
}
body.theme-infinite-horizon {
--bg-primary: #0a001f;
--bg-page: linear-gradient(180deg, #001133 0%, #0a001f 50%, #000011 100%);
--card: #1a0a33;
--muted: #a0a0ff;
--text: #e0ffff;
--accent: #ff00ff; /* Nebula magenta */
--accent-2: #00ffff; /* Cyan stars */
--accent-3: #ffaa00; /* Orange planets */
--glass: rgba(255, 0, 255, 0.1);
--border: rgba(0, 255, 255, 0.2);
}
body.theme-infinite-horizon::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 20% 80%, rgba(255, 0, 255, 0.15) 0%, transparent 35%),
radial-gradient(circle at 80% 20%, rgba(0, 255, 255, 0.12) 0%, transparent 35%),
radial-gradient(circle at 50% 50%, rgba(255, 170, 0, 0.1) 0%, transparent 40%);
pointer-events: none;
z-index: -1;
animation: cosmic-drift 25s ease-in-out infinite;
}
@keyframes cosmic-drift {
0% { transform: rotate(0deg) scale(1); }
100% { transform: rotate(8deg) scale(1.05); }
}
body.theme-neon-gamer {
--bg-primary: #0a0014;
--bg-page: linear-gradient(180deg, #110022 0%, #0a0014 60%, #000005 100%);
--card: #1a0a2a;
--muted: #88aaff;
--text: #e0e0ff;
--accent: #ff00ff; /* Neon pink */
--accent-2: #00ffff; /* Cyan RGB */
--accent-3: #ff0066; /* Hot red */
--glass: rgba(255, 0, 255, 0.12);
--border: rgba(0, 255, 255, 0.3);
}
body.theme-neon-gamer::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 30% 70%, rgba(255, 0, 255, 0.18) 0%, transparent 40%),
radial-gradient(circle at 70% 30%, rgba(0, 255, 255, 0.15) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(255, 0, 102, 0.1) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
animation: rgb-pulse 15s ease-in-out infinite;
}
@keyframes rgb-pulse {
0% { opacity: 0.8; }
50% { opacity: 1; }
100% { opacity: 0.8; }
}
body.theme-neon-arcade-fever {
/* Deep dark arcade room base */
--bg-primary: #0a0014;
/* Gradient: subtle purple-black void with neon undertone */
--bg-page: linear-gradient(180deg, #110022 0%, #0a0014 60%, #000005 100%);
/* Cards: Dark cabinet panels */
--card: #1a0a2a;
/* Muted text: Soft neon gray */
--muted: #88aaff;
/* Main text: Bright screen white */
--text: #e0e0ff;
/* Primary accent: Hot neon pink */
--accent: #ff00ff;
/* Secondary accent: Electric cyan */
--accent-2: #00ffff;
/* Tertiary: Alert red */
--accent-3: #ff0066;
/* Glass: Neon glow frost */
--glass: rgba(255, 0, 255, 0.12);
/* Borders: Vibrant neon edge */
--border: rgba(0, 255, 255, 0.3);
}
/* Flickering neon cabinet glows + subtle scan lines animation */
body.theme-neon-arcade-fever::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 20% 70%, rgba(255, 0, 255, 0.18) 0%, transparent 35%),
radial-gradient(circle at 80% 30%, rgba(0, 255, 255, 0.15) 0%, transparent 35%),
radial-gradient(circle at 50% 50%, rgba(255, 0, 102, 0.12) 0%, transparent 45%);
pointer-events: none;
z-index: -1;
animation: arcade-flicker 12s ease-in-out infinite;
}
body.theme-neon-arcade-fever::after {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 255, 255, 0.03) 2px,
rgba(0, 255, 255, 0.03) 4px
);
pointer-events: none;
z-index: -1;
opacity: 0.4;
animation: scan-lines 8s linear infinite;
}
@keyframes arcade-flicker {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
10%, 30%, 70% { opacity: 0.6; } /* subtle flicker like old neon signs */
}
@keyframes scan-lines {
0% { transform: translateY(0); }
100% { transform: translateY(4px); }
}
/* Arcade buttons — pink to cyan gradient */
.theme-neon-arcade-fever .btn.primary {
background: linear-gradient(135deg, #ff00ff, #00ffff);
color: #000;
font-weight: 800;
text-shadow: 0 0 15px rgba(255, 0, 255, 0.8);
}
/* Preview box — glowing cabinet screen */
.theme-neon-arcade-fever #profile-preview-box {
border: 4px solid #ff00ff;
box-shadow: 0 20px 60px rgba(255, 0, 255, 0.5),
inset 0 0 50px rgba(0, 255, 255, 0.15);
}
/* Tag — intense neon shine */
.theme-neon-arcade-fever .preview-tag .tag-preview {
box-shadow: 0 0 40px rgba(255, 0, 255, 0.9);
animation: neon-pulse 2s infinite;
}
@keyframes neon-pulse {
0%, 100% { box-shadow: 0 0 40px rgba(255, 0, 255, 0.9); }
50% { box-shadow: 0 0 60px rgba(255, 0, 255, 1), 0 0 100px rgba(0, 255, 255, 0.6); }
}
body.theme-shmerulian-glitter {
/* Deep forbidden void — dark blue-purple black */
--bg-primary: #0a0033;
/* Gradient: interdimensional blue madness swirling deeper */
--bg-page: linear-gradient(180deg, #001144 0%, #0a0033 50%, #05001a 100%);
/* Cards: Slightly lighter blue void with glitter edge */
--card: #0f0a44;
/* Muted text: Soft mad cyan-gray */
--muted: #88ccff;
/* Main text: Bright glitter white */
--text: #e6ffff;
/* Primary accent: Pure Shmerulian cyan glitter */
--accent: #00ffff;
/* Secondary accent: Vibrant teal-cyan wave */
--accent-2: #00ffea;
/* Tertiary: Subtle purple madness */
--accent-3: #a0a0ff;
/* Glass: Hypnotic glitter frost */
--glass: rgba(0, 255, 255, 0.12);
/* Borders: Electric cyan madness edge */
--border: rgba(0, 255, 255, 0.3);
}
/* Insane glitter particle overlay — swirling forbidden sparkles */
body.theme-shmerulian-glitter::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 20% 70%, rgba(0, 255, 255, 0.2) 0%, transparent 30%),
radial-gradient(circle at 80% 30%, rgba(0, 255, 234, 0.15) 0%, transparent 30%),
radial-gradient(circle at 50% 50%, rgba(160, 160, 255, 0.1) 0%, transparent 40%),
radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.08) 0%, transparent 25%);
pointer-events: none;
z-index: -1;
animation: shmerulian-madness 20s ease-in-out infinite alternate;
}
@keyframes shmerulian-madness {
0% { transform: rotate(0deg) scale(1); opacity: 0.8; }
50% { transform: rotate(5deg) scale(1.1); opacity: 1; }
100% { transform: rotate(-5deg) scale(1); opacity: 0.9; }
}
/* Glitter buttons — cyan to teal gradient */
.theme-shmerulian-glitter .btn.primary {
background: linear-gradient(135deg, #00ffff, #00ffea);
color: #000;
font-weight: 800;
text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
}
/* Preview box — forbidden glow frame */
.theme-shmerulian-glitter #profile-preview-box {
border: 4px solid #00ffff;
box-shadow: 0 20px 60px rgba(0, 255, 255, 0.5),
inset 0 0 50px rgba(160, 160, 255, 0.15);
}
/* Tag — ultimate glitter shine */
.theme-shmerulian-glitter .preview-tag .tag-preview {
box-shadow: 0 0 35px rgba(0, 255, 255, 0.9);
animation: glitter-pulse 2.5s infinite;
}
@keyframes glitter-pulse {
0%, 100% { box-shadow: 0 0 35px rgba(0, 255, 255, 0.9); }
50% { box-shadow: 0 0 60px rgba(0, 255, 255, 1), 0 0 100px rgba(0, 255, 234, 0.6); }
}
body.theme-midnight-wilderness {
/* Deep midnight blue — calm night sky */
--bg-primary: #0a0f1a;
/* Gradient from dark navy to deeper void */
--bg-page: linear-gradient(180deg, #1a2332 0%, #0a0f1a 60%, #05070f 100%);
/* Cards: Slate gray — like moonlit rocks */
--card: #1a2332;
/* Muted text: Cool misty gray */
--muted: #718096;
/* Main text: Soft starlight white */
--text: #e2e8f0;
/* Primary accent: Gentle moon blue */
--accent: #60a5fa;
/* Secondary accent: Warm distant light (like cabin windows) */
--accent-2: #fbbf24;
/* Glass: Subtle misty glow */
--glass: rgba(96, 165, 250, 0.06);
/* Borders: Soft moonlight edge */
--border: rgba(96, 165, 250, 0.1);
}
body.theme-i-want-to-believe {
/* Deep mysterious teal-blue night sky */
--bg-primary: #0f1a2a;
/* Gradient from darker void to misty horizon */
--bg-page: linear-gradient(180deg, #1e3a5f 0%, #0f1a2a 60%, #0a1422 100%);
/* Cards: Dark shadowy panels (like FBI files) */
--card: #1a2a44;
/* Muted text: Cool alien green-gray */
--muted: #66ccaa;
/* Main text: Stark white (like the poster text) */
--text: #ffffff;
/* Primary accent: Electric alien green (UFO glow) */
--accent: #00ffaa;
/* Secondary accent: Deep conspiracy blue */
--accent-2: #113355;
/* Glass: Subtle UFO glow */
--glass: rgba(0, 255, 170, 0.08);
/* Borders: Faint green edge */
--border: rgba(0, 255, 170, 0.15);
}
/* Subtle UFO green glow overlay */
body.theme-i-want-to-believe::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 50% 30%, rgba(0,255,170,0.08) 0%, transparent 50%),
radial-gradient(circle at 20% 70%, rgba(0,255,170,0.05) 0%, transparent 40%);
pointer-events: none;
z-index: -1;
}
/* Bold white buttons with black outline (like poster text) */
.theme-i-want-to-believe .btn.primary {
background: transparent;
color: white;
border: 2px solid white;
font-weight: 800;
text-shadow: 2px 2px 4px black;
}
.theme-i-want-to-believe .btn.primary:hover {
background: rgba(0,255,170,0.1);
color: #00ffaa;
border-color: #00ffaa;
}
body.theme-summer-pines {
/* Deep mysterious purple dusk — like summer nights in the forest */
--bg-primary: #1a0f2a;
/* Gradient from warm sunset pink-purple to deep forest night */
--bg-page: linear-gradient(180deg, #2d1b3a 0%, #1a0f2a 50%, #0f0a1a 100%);
/* Cards: Dark wood panels (like the Shack) */
--card: #221533;
/* Muted text: Dusty pine green */
--muted: #94a3b8;
/* Main text: Warm parchment glow */
--text: #f0e6ff;
/* Primary accent: Electric violet (Bill Cipher energy, mystery glow) */
--accent: #8b5cf6;
/* Secondary accent: Hot pink-purple (sunset sky, weirdness) */
--accent-2: #d946ef;
/* Glass: Magical purple-pink shimmer */
--glass: rgba(139, 92, 246, 0.08);
/* Borders: Subtle glowing edge */
--border: rgba(139, 92, 246, 0.15);
}
body.theme-christmas-magic {
/* Deep festive evergreen base — like a Christmas tree at night */
--bg-primary: #0f1a0f;
/* Beautiful holiday gradient: dark green → deep red → golden glow */
--bg-page: linear-gradient(
180deg,
#0f1a0f 0%,
#1a0f0f 30%,
#2d1a1a 60%,
#331a0f 100%
);
/* Cards: Cozy dark red-green with golden undertone (like ornaments on tree) */
--card: #1a2d1a;
/* Muted text: Soft snowy gray */
--muted: #a8b5a8;
/* Main text: Warm ivory white — like fresh snow in candlelight */
--text: #f5f5e8;
/* Primary accent: Classic Christmas red (bright & joyful) */
--accent: #ff1a1a;
/* Secondary accent: Rich Christmas green */
--accent-2: #00cc00;
/* Tertiary accent: Sparkling gold for stars & lights */
--accent-3: #ffd700;
/* Glass/frosted elements: Subtle frosted glass with golden shimmer */
--glass: rgba(255, 215, 0, 0.08);
/* Borders: Gentle golden-green glow */
--border: rgba(255, 215, 0, 0.2);
/* Optional: Add subtle sparkle overlay (uncomment if you want extra magic) */
/* background-image:
radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.1) 0%, transparent 20%),
radial-gradient(circle at 80% 20%, rgba(255, 26, 26, 0.1) 0%, transparent 20%),
radial-gradient(circle at 50% 50%, rgba(0, 204, 0, 0.05) 0%, transparent 30%); */
}
/* Optional enhancements for extra holiday feel */
/* Buttons get festive glow on hover */
body.theme-christmas-magic .btn.primary {
box-shadow: 0 4px 15px rgba(255, 26, 26, 0.3);
transition: all 0.3s ease;
}
body.theme-christmas-magic .btn.primary:hover {
box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
transform: translateY(-2px);
}
/* Profile preview box gets golden border */
body.theme-christmas-magic #profile-preview-box {
border: 2px solid rgba(255, 215, 0, 0.4);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
0 0 20px rgba(255, 215, 0, 0.15);
}
/* Theme tags in preview get festive shine */
body.theme-christmas-magic .preview-tag .tag-preview {
box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
/* Shop items (owned themes) get a little star glow */
body.theme-christmas-magic .theme-shop-item.owned::after {
content: '✨';
position: absolute;
top: 8px;
right: 8px;
font-size: 1.4rem;
animation: sparkle 2s infinite;
}
@keyframes sparkle {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
/* ===============================
BLUE AMBIENT DARK: Deep Ocean Pro
=============================== */
body.theme-blue {
--bg-primary: #0b1c2d;
--bg-page: linear-gradient(180deg,#081c34 0%, #06172a 100%);
--card: #0f2c45;
--muted: #89bfff;
--text: #cde7ff;
--accent: #3bb0ff;
--accent-2: #0099ff;
--glass: rgba(255,255,255,0.07);
--radius: 12px;
--small-radius: 12px;
--gap: 14px;
--max-width: 720px;
}
/* ===============================
VIOLET AMBIENT DARK: Twilight Pro (Subtle Violet)
=============================== */
body.theme-violet {
--bg-primary: #0a070f; /* deep, nearly black base */
--bg-page: linear-gradient(180deg, #0c0812 0%, #07050b 100%); /* dark neutral gradient */
--card: #12101a; /* slightly lighter than background, subtle contrast */
--muted: #8f88aa; /* muted violet hints, soft and subtle */
--text: #e0dfff; /* readable off-white */
--accent: #7a5fff; /* only gentle violet accent */
--accent-2: #5241c7; /* deeper blue-violet for secondary accents */
--glass: rgba(255,255,255,0.03); /* soft glass effect */
--radius: 12px;
--small-radius: 12px;
--gap: 14px;
--max-width: 720px;
}
/* ===============================
RED AMBIENT DARK: Crimson Pro
=============================== */
body.theme-red {
--bg-primary: #0b0202; /* deep, nearly black with red undertone */
--bg-page: linear-gradient(180deg, #120003 0%, #060101 100%); /* subtle crimson gradient */
--card: #1a0404; /* card slightly lighter than bg for contrast */
--muted: #a04c4c; /* muted crimson for secondary text */
--text: #e0dcdc; /* readable off-white text */
--accent: #ff1a1a; /* vivid crimson accent for highlights */
--accent-2: #990000; /* deep crimson secondary accent */
--glass: rgba(255,255,255,0.03); /* subtle glass overlay */
--radius: 12px;
--small-radius: 12px;
--gap: 14px;
--max-width: 720px;
}
/* ===============================
YELLOW STARRY DARK: Starfall Pro
=============================== */
body.theme-yellow {
--bg-primary: #0a0802; /* very dark base with warm undertones */
--bg-page: linear-gradient(180deg, #1c1403 0%, #0a0802 100%); /* subtle starry gradient feel */
--card: #1d1503; /* slightly lighter card for contrast */
--muted: #d6c28a; /* muted golden text */
--text: #fff9e8; /* soft off-white for readability */
--accent: #ffd700; /* bright yellow star accent */
--accent-2: #ffb700; /* deeper gold for secondary accents */
--glass: rgba(255, 255, 255, 0.04); /* soft glass overlay */
--radius: 12px;
--small-radius: 12px;
--gap: 14px;
--max-width: 720px;
}
/* ===============================
GREEN AMBIENT DARK: Forest Glow Pro
=============================== */
body.theme-green {
--bg-primary: #030a03; /* very dark base with green undertones */
--bg-page: linear-gradient(180deg, #062006 0%, #030a03 100%); /* subtle dark forest gradient */
--card: #0b1a0b; /* slightly lighter than bg for contrast */
--muted: #88c099; /* muted green for secondary text */
--text: #dff2e6; /* readable off-white */
--accent: #3aff6c; /* vivid green accent for highlights */
--accent-2: #00b35f; /* darker green for secondary accents */
--glass: rgba(255, 255, 255, 0.03); /* subtle glass overlay */
--radius: 12px;
--small-radius: 12px;
--gap: 14px;
--max-width: 720px;
}
/* ===============================
YIN & YANG AMBIENT: Balance Pro (Eye-Friendly)
=============================== */
body.theme-yinyang {
--bg-primary: #0f0f0f; /* softer dark base instead of pure black */
--bg-page: linear-gradient(180deg, #0f0f0f 0%, #f5f5f5 100%); /* smooth gradient from dark to soft off-white */
--card: #1a1a1a; /* dark card, softer than pure black */
--muted: #888888; /* gentle muted text for balance */
--text: #f0f0f0; /* slightly off-white, easier on eyes */
--accent: #ffffff; /* white accents, but less harsh */
--accent-2: #e0e0e0; /* light gray secondary accent for buttons/hover states */
--glass: rgba(255, 255, 255, 0.06); /* soft glass overlay for cards/buttons */
--radius: 12px;
--small-radius: 12px;
--gap: 14px;
--max-width: 720px;
}
/* Optional subtle hover effects for Yin & Yang cards/buttons */
body.theme-yinyang .card,
body.theme-yinyang .primary-cta,
body.theme-yinyang .secondary-cta {
transition: background 250ms ease, color 250ms ease, box-shadow 300ms ease, border-color 250ms ease;
}
body.theme-yinyang .primary-cta:hover {
background: linear-gradient(90deg, #ffffff, #e0e0e0);
color: #0f0f0f;
}
/* ===============================
OLD PAPER / VINTAGE AMBIENT: Sepia Pro
=============================== */
body.theme-vintage {
--bg-primary: #3e2c1c; /* dark sepia base */
--bg-page: linear-gradient(180deg, #5a3e2a 0%, #3e2c1c 100%); /* gentle sepia gradient */
--card: #503c28; /* slightly lighter than background for card contrast */
--muted: #bfa47c; /* muted warm text */
--text: #f6e6d9; /* soft off-white for readability */
--accent: #d4a373; /* warm accent for highlights */
--accent-2: #a96e43; /* darker accent for secondary buttons or highlights */
--glass: rgba(255, 255, 255, 0.03); /* subtle glass overlay */
--radius: 12px;
--small-radius: 12px;
--gap: 14px;
--max-width: 720px;
}
/* ===============================
PINK AMBIENT DARK: Rosé Pro
=============================== */
body.theme-pink {
--bg-primary: #1b0b1f; /* dark pinkish base */
--bg-page: linear-gradient(180deg, #2d0f3d 0%, #120416 100%); /* soft pink gradient */
--card: #2a0d2e; /* card slightly lighter */
--muted: #e0a1c6; /* soft pink muted text */
--text: #ffd6ea; /* readable pinkish off-white */
--accent: #ff69b4; /* bright pink accent */
--accent-2: #ff1493; /* deeper pink secondary accent */
--glass: rgba(255, 182, 193, 0.05); /* subtle glass overlay */
--radius: 12px;
--small-radius: 12px;
--gap: 14px;
--max-width: 720px;
}
/* ===============================
WATER & FIRE AMBIENT DARK: Aqua Blaze Pro
=============================== */
body.theme-waterfire {
--bg-primary: #0a1b2f; /* deep water-blue base */
--bg-page: linear-gradient(180deg, #0a1b2f 0%, #2f0a0a 100%); /* top water, bottom fire */
--card: #1c1620; /* dark card neutral */
--muted: #89cfff; /* water-like muted text */
--text: #ffb37f; /* fiery readable off-white */
--accent: #00bfff; /* water accent */
--accent-2: #ff4500; /* fire accent */
--glass: rgba(255, 255, 255, 0.05); /* subtle glass overlay */
--radius: 12px;
--small-radius: 12px;
--gap: 14px;
--max-width: 720px;
}
/* ===============================
VALENTINE'S DAY AMBIENT DARK: Love Glow Pro
=============================== */
body.theme-valentine {
--bg-primary: #2a0b1e; /* deep romantic base */
--bg-page: linear-gradient(180deg, #3d0f2c 0%, #120312 100%); /* soft pink/red gradient */
--card: #3a0c28; /* slightly lighter than bg */
--muted: #f7a1b7; /* muted pink text */
--text: #ffccd5; /* readable soft pinkish off-white */
--accent: #ff4f79; /* bright love pink accent */
--accent-2: #ff1a55; /* deeper pink/red secondary accent */
--glass: rgba(255, 182, 193, 0.06); /* soft glass overlay */
--radius: 12px;
--small-radius: 12px;
--gap: 14px;
--max-width: 720px;
}
/* ===============================
MOON AMBIENT DARK: Lunar Pro
=============================== */
body.theme-moon {
--bg-primary: #0b0d17; /* very dark base */
--bg-page: linear-gradient(180deg, #1a1c2a 0%, #060710 100%); /* night sky gradient */
--card: #1e2030; /* slightly lighter than bg */
--muted: #a1a8c3; /* soft grayish text like moonlight */
--text: #e0e6f1; /* readable off-white */
--accent: #cfd6e0; /* subtle moon glow accent */
--accent-2: #7f8aff; /* secondary cool accent */
--glass: rgba(255,255,255,0.03); /* soft glass overlay */
--radius: 12px;
--small-radius: 12px;
--gap: 14px;
--max-width: 720px;
}
/* ------------------------
NINJA THEME
------------------------- */
.theme-ninja {
--bg: #0a0a0c; /* ultra dark background */
--card-bg: #111317; /* card contrast */
--text: #e5e5e5; /* light text */
--muted: #7a7d85; /* muted gray */
--accent: #d72638; /* ninja red */
--accent-2: #ff4757; /* hover red */
--border: rgba(255,255,255,0.08);
--link: #2a9d8f; /* teal highlight for links */
--link-hover: #38c6b2;
}
.theme-ninja body {
background: var(--bg);
color: var(--text);
}
.theme-ninja .card {
background: var(--card-bg);
border: 1px solid var(--border);
box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.theme-ninja .primary-cta {
background: var(--accent);
color: #fff;
}
.theme-ninja .primary-cta:hover {
background: var(--accent-hover);
}
.theme-ninja .s-btn {
background: rgba(255,255,255,0.05);
border: 1px solid var(--border);
color: var(--text);
}
.theme-ninja .s-btn:hover {
background: rgba(255,255,255,0.12);
}
.theme-ninja a {
color: var(--link);
}
.theme-ninja a:hover {
color: var(--link-hover);
}
/* ------------------------
DREAM THEME
------------------------- */
.theme-dream {
--bg: linear-gradient(160deg, #e0c3fc, #8ec5fc); /* pastel gradient */
--card-bg: rgba(255, 255, 255, 0.15);
--text: #ffffff;
--muted: #e0e0e0;
--accent: #ff9ff3; /* pink accent */
--accent-2: #f368e0;
--border: rgba(255,255,255,0.25);
--link: #c56cf0; /* lavender links */
--link-hover: #a29bfe;
}
/* ------------------------
MINECRAFT THEME
------------------------- */
.theme-minecraft {
--bg: #3c6e3c; /* grassy green */
--card-bg: #5a4636; /* dirt brown */
--text: #f0e6d2; /* parchment-like text */
--muted: #d9c9a3;
--accent: #8bac0f; /* limey green like Minecraft UI */
--accent-2: #b2e40f;
--border: #2d2d2d;
--link: #5e9b34; /* link green */
--link-hover: #9bd770;
}
/* ------------------------
CYBERPUNK THEME
------------------------- */
.theme-cyberpunk {
--bg: #0d0d0d;
--card-bg: #1a1a1f;
--text: #e0e0e0;
--muted: #a3a3a3;
--accent: #ff009c; /* neon pink */
--accent-2: #ff3ecf;
--border: #0ff0fc; /* neon cyan */
--link: #0ff0fc;
--link-hover: #6fffff;
}
.theme-cyberpunk body {
background: radial-gradient(circle at top, #1a002a, #0d0d0d);
color: var(--text);
font-family: "Orbitron", sans-serif;
}
.theme-cyberpunk .card {
background: var(--card-bg);
border: 2px solid var(--border);
box-shadow: 0 0 12px var(--accent);
}
.theme-cyberpunk .primary-cta {
background: var(--accent);
color: #000;
}
.theme-cyberpunk .primary-cta:hover {
background: var(--accent-hover);
}
.theme-cyberpunk .s-btn {
background: rgba(255,255,255,0.05);
border: 1px solid var(--border);
color: var(--text);
}
.theme-cyberpunk .s-btn:hover {
background: rgba(255,0,156,0.2);
}
/* ------------------------
TROPICAL THEME
------------------------- */
.theme-tropical {
--bg: linear-gradient(160deg, #fce38a, #f38181, #eaffd0, #95e1d3);
--card-bg: rgba(255,255,255,0.85);
--text: #949292;
--muted: #555;
--accent: #f38181;
--accent-2: #f05454;
--border: rgba(0,0,0,0.1);
--link: #00a896;
--link-hover: #028090;
}
/* ------------------------
INFERNO THEME
------------------------- */
.theme-inferno {
--bg: radial-gradient(circle at center, #330000, #0a0000);
--card-bg: #1a0a0a;
--text: #ffe6e6;
--muted: #ffbaba;
--accent: #ff4500; /* fire orange */
--accent-2: #ff6347;
--border: #ff0000;
--link: #ff7518;
--link-hover: #ffb347;
}
/* ------------------------
NOCTYRNAL THEME (Darker Blue Crimson Vibes)
------------------------ */
.theme-noctyrnal {
--bg: radial-gradient(circle at top, #05172b, #02080f); /* almost black deep blue */
--card-bg: #061122; /* darker, rich blue card */
--text: #b8c9e1; /* soft, slightly muted blue-white text */
--muted: #4f5f7a; /* deep bluish-gray */
--accent: #0f3c66; /* strong deep blue accent */
--accent-2: #0c3357; /* hover darker, crimson-ish blue feel */
--border: #081f3a; /* very dark navy border */
--link: #0f3c66; /* links same as accent */
--link-hover: #1a5ea0; /* bright cyan-blue hover */
}
.theme-noctyrnal body {
background: var(--bg);
color: var(--text);
}
.theme-noctyrnal .card {
background: var(--card-bg);
border: 1px solid var(--border);
box-shadow: 0 0 28px rgba(15, 60, 102, 0.5); /* darker glowing blue aura */
}
.theme-noctyrnal .primary-cta {
background: var(--accent);
color: #fff;
font-weight: 600;
}
.theme-noctyrnal .primary-cta:hover {
background: var(--accent-hover);
}
.theme-noctyrnal .s-btn {
background: rgba(15, 60, 102, 0.05); /* subtle dark blue tint */
border: 1px solid var(--border);
color: var(--text);
}
.theme-noctyrnal .s-btn:hover {
background: rgba(15, 60, 102, 0.3); /* stronger glow on hover */
}
/* ------------------------
ESCAPE REALITY THEME
------------------------ */
.theme-escape-reality {
--bg: linear-gradient(180deg, #0d1a26 0%, #001018 100%);
--card-bg: #101e2b;
--text: #dcefff;
--muted: #90b3c8;
--accent: #2db6d9; /* soft cyan-blue */
--accent-2: #49d8f7;
--border: #163848;
--link: #2db6d9;
--link-hover: #6ae4ff;
}
.theme-escape-reality body {
background: var(--bg);
color: var(--text);
}
.theme-escape-reality .card {
background: var(--card-bg);
border: 1px solid var(--border);
box-shadow: 0 0 14px rgba(45, 182, 217, 0.25);
}
.theme-escape-reality .primary-cta {
background: var(--accent);
color: #000;
}
.theme-escape-reality .primary-cta:hover {
background: var(--accent-hover);
}
.theme-escape-reality .s-btn {
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
color: var(--text);
}
.theme-escape-reality .s-btn:hover {
background: rgba(45,182,217,0.15);
}
/* ------------------------
PREMIUM THEME (Lux Gold Vibes)
------------------------ */
.theme-premium {
--bg: linear-gradient(180deg, #080808 0%, #000000 100%); /* deeper, richer black gradient */
--card-bg: #1a1a1a; /* slightly lighter card for contrast */
--text: #fefefe; /* bright off-white for readability */
--muted: #c5b779; /* richer gold-muted text */
--accent: #ffd700; /* vivid gold accent */
--accent-2: #ffe75c; /* brighter, warm hover gold */
--border: #8c7a3c; /* metallic gold border */
--link: #ffd700;
--link-hover: #fff17a; /* subtle golden glow on hover */
--glass: rgba(255, 215, 0, 0.05); /* faint glassy gold overlay */
}
.theme-premium body {
background: var(--bg);
color: var(--text);
}
.theme-premium .card {
background: var(--card-bg);
border: 1px solid var(--border);
box-shadow: 0 0 28px rgba(255, 215, 0, 0.35); /* soft gold glow around cards */
backdrop-filter: blur(6px); /* adds subtle glassy effect */
}
.theme-premium .primary-cta {
background: var(--accent);
color: #000;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* slight text shadow for depth */
}
.theme-premium .primary-cta:hover {
background: var(--accent-hover);
box-shadow: 0 0 12px rgba(255, 215, 0, 0.5); /* glowing hover effect */
}
.theme-premium .s-btn {
background: var(--glass);
border: 1px solid var(--border);
color: var(--text);
transition: all 0.25s ease;
}
.theme-premium .s-btn:hover {
background: rgba(255, 215, 0, 0.12); /* gentle gold glow on hover */
box-shadow: 0 0 8px rgba(255, 215, 0, 0.25);
}
.theme-premium a {
color: var(--link);
transition: color 0.25s ease, text-shadow 0.25s ease;
}
.theme-premium a:hover {
color: var(--link-hover);
text-shadow: 0 0 6px rgba(255, 223, 0, 0.6); /* subtle glow on links */
}
/* ------------------------
CHRISTMAS THEME (Darker)
------------------------ */
.theme-christmas {
--bg: linear-gradient(180deg, #040804 0%, #020302 100%); /* ultra dark forest green base */
--card-bg: #0b130b; /* darker card for strong contrast */
--text: #fff9e8; /* warm off-white */
--muted: #6b8a5a; /* darker green accent */
--accent: #ff1a1a; /* bold Christmas red */
--accent-2: #ff3a3a; /* secondary red */
--border: #1a2d1a; /* darker border for contour */
--link: #ff1a1a;
--link-hover: #ff4f4f;
}
.theme-christmas body {
background: var(--bg);
color: var(--text);
}
.theme-christmas .card {
background: var(--card-bg);
border: 1px solid var(--border);
box-shadow: 0 0 28px rgba(255, 26, 26, 0.4); /* stronger glow */
}
.theme-christmas .primary-cta {
background: var(--accent);
color: #fff;
font-weight: 600;
box-shadow: 0 0 12px rgba(255, 26, 26, 0.6);
}
.theme-christmas .primary-cta:hover {
background: var(--accent-2);
box-shadow: 0 0 16px rgba(255, 26, 26, 0.8);
}
.theme-christmas .s-btn {
background: rgba(255,26,26,0.05);
border: 1px solid var(--border);
color: var(--text);
}
.theme-christmas .s-btn:hover {
background: rgba(255,26,26,0.2);
}
/* ------------------------
NEW YEAR THEME (Darker)
------------------------ */
.theme-new-year {
--bg: linear-gradient(180deg, #000000 0%, #0a0a0a 100%); /* ultra dark elegant base */
--card-bg: #111111; /* darker card for stronger contour */
--text: #fefefe;
--muted: #888888; /* dimmed secondary text */
--accent: #ffd700; /* golden fireworks vibe */
--accent-2: #ffea70;
--border: #333333; /* darker border */
--link: #ffd700;
--link-hover: #fff17a;
}
.theme-new-year body {
background: var(--bg);
color: var(--text);
}
.theme-new-year .card {
background: var(--card-bg);
border: 1px solid var(--border);
box-shadow: 0 0 28px rgba(255, 215, 0, 0.35); /* stronger golden glow */
}
.theme-new-year .primary-cta {
background: var(--accent);
color: #000;
font-weight: 600;
box-shadow: 0 0 14px rgba(255, 215, 0, 0.6);
}
.theme-new-year .primary-cta:hover {
background: var(--accent-2);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.85);
}
.theme-new-year .s-btn {
background: rgba(255,215,0,0.05);
border: 1px solid var(--border);
color: var(--text);
}
.theme-new-year .s-btn:hover {
background: rgba(255,215,0,0.2);
}
/* ------------------------
GHOSTS THEME
------------------------ */
.theme-ghosts {
--bg: linear-gradient(180deg, #05050a 0%, #0a0a14 100%); /* deep night base */
--card-bg: #0f0f1a; /* dark, semi-transparent card */
--text: #e6f0ff; /* pale ghostly text */
--muted: #7a8499; /* misty gray accent */
--accent: #9bf6ff; /* eerie cyan glow */
--accent-2: #6fefff;
--border: #1a1a28; /* subtle border for cards */
--link: #9bf6ff;
--link-hover: #c0f9ff;
}
.theme-ghosts body {
background: var(--bg);
color: var(--text);
}
.theme-ghosts .card {
background: var(--card-bg);
border: 1px solid var(--border);
box-shadow: 0 0 22px rgba(155, 246, 255, 0.3); /* ghostly glow */
}
.theme-ghosts .primary-cta {
background: var(--accent);
color: #000;
font-weight: 600;
box-shadow: 0 0 12px rgba(155, 246, 255, 0.6);
}
.theme-ghosts .primary-cta:hover {
background: var(--accent-hover);
box-shadow: 0 0 18px rgba(155, 246, 255, 0.85);
}
.theme-ghosts .s-btn {
background: rgba(155,246,255,0.05);
border: 1px solid var(--border);
color: var(--text);
}
.theme-ghosts .s-btn:hover {
background: rgba(155,246,255,0.2);
}
.theme-ghosts a {
color: var(--link);
}
.theme-ghosts a:hover {
color: var(--link-hover);
}
body.theme-vault-dweller {
--bg-primary: #001a00;
--bg-page: linear-gradient(180deg, #003300 0%, #001a00 60%, #000000 100%);
--card: #002200;
--muted: #66aa66;
--text: #ccffcc;
--accent: #00cc66; /* Pip-Boy green */
--accent-2: #ffcc00; /* Nuka-Cola yellow */
--glass: rgba(0, 204, 102, 0.08);
--border: rgba(255, 204, 0, 0.2);
}
/* Retro CRT scanlines + green glow */
body.theme-vault-dweller::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.3) 2px, rgba(0,0,0,0.3) 4px),
radial-gradient(circle at center, rgba(0,204,102,0.15) 0%, transparent 60%);
opacity: 0.6;
}
/* Drifting radiation particles + Nuka caps */
body.theme-vault-dweller::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle, rgba(0,204,102,0.4) 2px, transparent 2px) 20% 30%/200px 200px no-repeat,
radial-gradient(circle, rgba(255,204,0,0.3) 3px, transparent 3px) 70% 50%/180px 180px no-repeat;
animation: fallout-drift 60s linear infinite;
opacity: 0.6;
}
@keyframes fallout-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-1200px); }
}
.theme-vault-dweller .btn.primary {
background: linear-gradient(135deg, #00cc66, #ffcc00);
color: #000000;
}
body.theme-ethereal-prism {
--bg-primary: #0a0014;
--bg-page: linear-gradient(180deg, #1a002a 0%, #0a0014 50%, #000005 100%);
--card: rgba(26, 0, 42, 0.7);
--muted: #aa88cc;
--text: #f0e6ff;
--accent: #ffffff;
--glass: rgba(255, 255, 255, 0.05);
--border: rgba(255, 255, 255, 0.1);
overflow: hidden; /* Important for floating shards */
}
/* Layer 1: Slow floating crystalline shards (large, distant) */
body.theme-ethereal-prism::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -3;
background:
radial-gradient(ellipse 80px 160px at 20% 30%, rgba(255,0,255,0.15) 0%, transparent 50%),
radial-gradient(ellipse 100px 200px at 80% 70%, rgba(0,255,255,0.12) 0%, transparent 50%),
radial-gradient(ellipse 90px 180px at 50% 50%, rgba(255,255,0,0.1) 0%, transparent 50%);
animation: prism-float-deep 120s linear infinite;
opacity: 0.8;
filter: blur(40px);
}
/* Layer 2: Mid-depth shards + rainbow refractions */
body.theme-ethereal-prism::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -2;
background:
radial-gradient(circle at 30% 40%, rgba(255,0,255,0.25) 0%, transparent 40%),
radial-gradient(circle at 70% 60%, rgba(0,255,255,0.2) 0%, transparent 40%),
radial-gradient(circle at 50% 20%, rgba(255,255,51,0.18) 0%, transparent 40%);
animation: prism-float-mid 80s ease-in-out infinite;
opacity: 0.7;
filter: blur(20px);
}
/* Layer 3: Foreground floating shards (closest, sharpest) */
body.theme-ethereal-prism .prism-foreground {
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(ellipse 60px 120px at 15% 50%, rgba(255,255,255,0.3) 0%, transparent 50%),
radial-gradient(ellipse 70px 140px at 85% 30%, rgba(255,0,255,0.25) 0%, transparent 50%),
radial-gradient(circle at 50% 80%, rgba(0,255,255,0.2) 0%, transparent 50%);
animation: prism-float-fore 60s linear infinite;
opacity: 0.6;
filter: blur(10px);
}
/* Deep float (slowest, farthest) */
@keyframes prism-float-deep {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
50% { transform: translate(100px, -80px) rotate(180deg) scale(1.1); }
100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}
/* Mid float */
@keyframes prism-float-mid {
0% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(-60px, 50px) rotate(120deg); }
66% { transform: translate(80px, -40px) rotate(240deg); }
100% { transform: translate(0, 0) rotate(360deg); }
}
/* Foreground float (fastest) */
@keyframes prism-float-fore {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(40px, -30px) rotate(90deg); }
50% { transform: translate(-50px, 40px) rotate(180deg); }
75% { transform: translate(30px, -50px) rotate(270deg); }
100% { transform: translate(0, 0) rotate(360deg); }
}
/* Subtle lens flare pulse */
body.theme-ethereal-prism .lens-flare {
position: fixed;
top: 20%;
left: 50%;
width: 600px;
height: 600px;
margin-left: -300px;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
pointer-events: none;
z-index: -1;
animation: flare-pulse 30s ease-in-out infinite;
opacity: 0.4;
}
@keyframes flare-pulse {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.05); }
}
.theme-ethereal-prism .btn.primary {
background: linear-gradient(135deg, #ff00ff, #00ffff, #ffff33);
background-size: 300% 300%;
animation: rainbow-shift 15s ease infinite;
color: #000;
font-weight: 800;
border: 2px solid rgba(255,255,255,0.3);
}
@keyframes rainbow-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
body.theme-sky-captain {
--bg-primary: #87ceeb;
--bg-page: linear-gradient(180deg, #191970 0%, #4682b4 40%, #87ceeb 80%, #ffffff 100%);
--card: rgba(255,255,255,0.92);
--muted: #666666;
--text: white;
--accent: #ffd700; /* Cockpit gold instruments */
--accent-2: #ffffff;
--glass: rgba(255,255,255,0.85);
--border: rgba(70,130,180,0.3);
overflow: hidden;
}
/* Deep space to sky gradient with subtle cloud layer below */
body.theme-sky-captain::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -3;
background: linear-gradient(180deg, #191970 0%, transparent 30%);
opacity: 0.8;
}
/* Drifting clouds far below (slow, distant) */
body.theme-sky-captain::after {
content: '';
position: fixed;
inset: 0;
bottom: -200px;
pointer-events: none;
z-index: -2;
background:
radial-gradient(ellipse 600px 200px at 20% 100%, rgba(255,255,255,0.9) 0%, transparent 50%),
radial-gradient(ellipse 800px 250px at 80% 100%, rgba(255,255,255,0.8) 0%, transparent 50%),
radial-gradient(ellipse 500px 180px at 50% 100%, rgba(255,255,255,0.7) 0%, transparent 50%);
animation: clouds-drift-slow 120s linear infinite;
opacity: 0.9;
filter: blur(20px);
}
@keyframes clouds-drift-slow {
0% { transform: translateX(-200px); }
100% { transform: translateX(200px); }
}
/* Subtle contrails + high-altitude haze */
body.theme-sky-captain .contrails {
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
linear-gradient(90deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%),
linear-gradient(120deg, transparent 45%, rgba(255,255,255,0.1) 55%, transparent 65%);
animation: contrails-move 80s linear infinite;
opacity: 0.4;
}
@keyframes contrails-move {
0% { transform: translateX(-100%) translateY(-50px); }
100% { transform: translateX(100%) translateY(50px); }
}
.theme-sky-captain .btn.primary {
background: linear-gradient(135deg, #ffd700, #4682b4);
color: #000000;
font-weight: 700;
}
/* Profile preview — window frame like airplane window */
.theme-sky-captain #profile-preview-box {
border: 8px solid #ffffff;
border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
box-shadow:
inset 0 0 60px rgba(135,206,235,0.4),
0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}
body.theme-ignition-liftoff {
--bg-primary: #000033;
--bg-page: linear-gradient(180deg, #001144 0%, #000033 50%, #000011 100%);
--card: rgba(0, 17, 68, 0.8);
--muted: #6688aa;
--text: #ffffff;
--accent: #ff6600; /* Engine flame */
--accent-2: #ffcc00; /* Exhaust glow */
--glass: rgba(255, 102, 0, 0.08);
--border: rgba(255, 204, 0, 0.2);
overflow: hidden;
}
/* Massive flame & smoke plume rising from bottom */
body.theme-ignition-liftoff::before {
content: '';
position: fixed;
left: 50%;
bottom: -30%;
width: 80vw;
height: 140vh;
margin-left: -40vw;
background:
radial-gradient(circle at 50% 100%, rgba(255,102,0,0.9) 0%, transparent 30%),
radial-gradient(circle at 50% 80%, rgba(255,204,0,0.7) 0%, transparent 40%),
radial-gradient(ellipse 60% 80% at 50% 70%, rgba(255,255,255,0.4) 0%, transparent 50%);
animation: launch-flame 60s linear infinite;
opacity: 0.9;
filter: blur(40px);
transform-origin: center bottom;
}
@keyframes launch-flame {
0% { transform: scaleY(1) translateY(0); opacity: 0.9; }
20% { transform: scaleY(1.2) translateY(-100px); opacity: 1; }
80% { transform: scaleY(1.1) translateY(-300px); opacity: 0.7; }
100% { transform: scaleY(1) translateY(-500px); opacity: 0.4; }
}
/* Billowing smoke clouds spreading upward */
body.theme-ignition-liftoff::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 40% 70%, rgba(255,255,255,0.4) 0%, transparent 40%),
radial-gradient(circle at 60% 60%, rgba(255,255,255,0.35) 0%, transparent 40%),
radial-gradient(circle at 50% 80%, rgba(255,102,0,0.25) 0%, transparent 40%);
animation: smoke-rise 50s linear infinite;
opacity: 0.7;
filter: blur(60px);
}
@keyframes smoke-rise {
0% { transform: translateY(100vh); opacity: 0.3; }
100% { transform: translateY(-50vh); opacity: 0.8; }
}
@keyframes engine-vibe {
0%, 100% { transform: translate(0,0); }
50% { transform: translate(2px, -2px); }
}
/* Profile preview — shuttle window frame */
.theme-ignition-liftoff #profile-preview-box {
border: 8px solid #ffcc00;
border-radius: 20px;
box-shadow:
inset 0 0 80px rgba(255,102,0,0.4),
0 20px 60px rgba(255,102,0,0.3);
overflow: hidden;
}
body.theme-crime-scene-alpha {
--bg-primary: #000000;
--bg-page: linear-gradient(180deg, #0a0a1a 0%, #000000 100%);
--card: rgba(10, 10, 26, 0.92);
--muted: #444466;
--text: #e0e0ff;
--accent: #ffff00;
--accent-2: #ff0000;
--accent-3: #0000ff;
--glass: rgba(255, 0, 0, 0.1);
--border: rgba(255, 0, 0, 0.3);
overflow: hidden;
position: relative;
}
/* FULL-SCREEN erratic red/blue police lights overlay */
body.theme-crime-scene-alpha::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 20% 30%, rgba(255,0,0,0.35) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(0,0,255,0.35) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(255,0,0,0.25) 0%, transparent 50%),
radial-gradient(circle at 30% 80%, rgba(0,0,255,0.3) 0%, transparent 50%),
radial-gradient(circle at 70% 20%, rgba(255,0,0,0.28) 0%, transparent 50%);
animation: police-lights-flash 2.5s infinite;
opacity: 0.7;
mix-blend-mode: screen; /* Makes flashes brighter and more cinematic */
}
@keyframes police-lights-flash {
0% { opacity: 0.4; transform: scale(1); }
20% { opacity: 0.9; transform: scale(1.05); }
40% { opacity: 0.5; transform: scale(0.98); }
60% { opacity: 0.85; transform: scale(1.03); }
80% { opacity: 0.6; transform: scale(1); }
100% { opacity: 0.4; transform: scale(1); }
}
/* Distant shadowy agents approaching (from sides, slow & menacing) */
body.theme-crime-scene-alpha::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -2;
background:
url('data:image/svg+xml;utf8,') repeat-x left,
url('data:image/svg+xml;utf8,') repeat-x right;
animation: agents-approach 120s linear infinite;
opacity: 0.5;
filter: blur(12px);
}
@keyframes agents-approach {
0% { transform: translateX(-150%); }
100% { transform: translateX(150%); }
}
/* Sweeping white police spotlight (now stronger & slower) */
.lantern-sweep {
position: fixed;
top: -60%;
left: 50%;
width: 800px;
height: 1600px;
margin-left: -400px;
background: radial-gradient(ellipse at 50% 20%, rgba(255,255,255,0.5) 0%, transparent 70%);
pointer-events: none;
z-index: -1;
animation: lantern-sweep 20s linear infinite;
opacity: 0.7;
filter: blur(50px);
}
@keyframes lantern-sweep {
0% { transform: translateX(-200%) rotate(-20deg); }
50% { transform: translateX(200%) rotate(20deg); }
100% { transform: translateX(-200%) rotate(-20deg); }
}
/* Evidence markers appearing/fading (random, like fresh tags) */
.evidence-marker {
position: absolute;
width: 44px;
height: 44px;
background: #ffff00;
color: #000;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 1.3rem;
box-shadow: 0 0 25px rgba(255,255,0,0.6);
animation: marker-flash 10s infinite;
opacity: 0;
}
/* Random positions */
.evidence-marker:nth-child(1) { top: 25%; left: 15%; animation-delay: 0s; }
.evidence-marker:nth-child(2) { top: 40%; left: 75%; animation-delay: 1.5s; }
.evidence-marker:nth-child(3) { top: 65%; left: 30%; animation-delay: 3s; }
.evidence-marker:nth-child(4) { top: 15%; left: 60%; animation-delay: 4.5s; }
.evidence-marker:nth-child(5) { top: 80%; left: 20%; animation-delay: 6s; }
@keyframes marker-flash {
0% { opacity: 0; transform: scale(0.6); }
10% { opacity: 1; transform: scale(1.3); }
25% { opacity: 1; transform: scale(1); }
80% { opacity: 1; }
90% { opacity: 0.3; transform: scale(0.8); }
100% { opacity: 0; }
}
/* Profile box as wet window with rain + spotlight reflection */
.theme-crime-scene-alpha #profile-preview-box {
position: relative;
border: 8px solid #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: inset 0 0 80px rgba(0,0,0,0.8);
background: rgba(10,10,26,0.9);
}
/* Rain streaks + spotlight reflection on window */
.theme-crime-scene-alpha #profile-preview-box::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(transparent 0%, rgba(255,255,255,0.2) 8%, transparent 16%),
linear-gradient(transparent 30%, rgba(255,255,255,0.15) 38%, transparent 46%);
animation: rain-streaks 8s linear infinite;
pointer-events: none;
opacity: 0.6;
}
/* Spotlight reflection inside window */
.theme-crime-scene-alpha #profile-preview-box::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 0%, transparent 70%);
animation: spotlight-reflect 20s linear infinite;
opacity: 0;
pointer-events: none;
}
@keyframes rain-streaks {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
@keyframes spotlight-reflect {
0% { opacity: 0; transform: translate(-150%, -100%); }
50% { opacity: 0.6; transform: translate(150%, 100%); }
100% { opacity: 0; transform: translate(-150%, -100%); }
}
body.theme-nostalgic-void {
--bg-primary: #0a001f;
--bg-page: linear-gradient(180deg, #0a001f 0%, #1a0033 50%, #0a001f 100%);
--card: rgba(26, 0, 51, 0.6);
--text: #d4c2ff;
--muted: #8a6aff;
--accent: #a78bfa;
--glass: rgba(167, 139, 250, 0.08);
--border: rgba(167, 139, 250, 0.15);
}
/* Subtle old CRT scanlines + faint glow */
body.theme-nostalgic-void::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 2px,
rgba(0,0,0,0.08) 2px,
rgba(0,0,0,0.08) 4px
);
opacity: 0.4;
z-index: 9999;
}
/* Very faint vignette */
body.theme-nostalgic-void::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 120px rgba(0,0,0,0.8);
z-index: 9998;
}
body.theme-nods-tango {
--bg-primary: #001100;
--bg-page: #001100;
--card: #002200;
--muted: #004400;
--text: #00ff00;
--accent: #00ff00; /* Core phosphor green */
--accent-2: #00cc00; /* Dim green */
--glass: rgba(0, 255, 0, 0.06);
--border: rgba(0, 255, 0, 0.12);
filter: brightness(1.15) contrast(1.35) hue-rotate(90deg) saturate(0.35);
image-rendering: pixelated;
overflow: hidden;
}
/* Heavy realistic grain/noise (like actual tube noise) */
body.theme-nods-tango::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
background:
url('data:image/svg+xml;utf8,') repeat;
opacity: 0.45;
mix-blend-mode: screen;
}
/* Faint phosphor scanlines (horizontal tube refresh) */
body.theme-nods-tango::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9998;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 1px,
rgba(0,255,0,0.08) 1px,
rgba(0,255,0,0.08) 2px
);
opacity: 0.6;
}
/* Drifting tactical reticle shapes (HUD-like overlays) */
.theme-nods-tango .nv-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9997;
background:
radial-gradient(circle at center, transparent 40%, rgba(0,255,0,0.06) 41%, transparent 42%),
conic-gradient(from 0deg at center, transparent 0deg 89deg, rgba(0,255,0,0.08) 90deg 91deg, transparent 92deg 179deg);
animation: reticle-drift 40s linear infinite;
opacity: 0.35;
}
@keyframes reticle-drift {
0% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(30px, -20px) rotate(180deg); }
100% { transform: translate(0, 0) rotate(360deg); }
}
@keyframes nv-bloom {
0%, 100% { box-shadow: 0 0 50px #00ff00, 0 0 80px #00cc00; }
50% { box-shadow: 0 0 70px #00ff00, 0 0 100px #00cc00; }
}
/* Profile preview – like looking through NVGs with tube edge */
.theme-nods-tango #profile-preview-box {
filter: brightness(1.25) contrast(1.4) sepia(0.05) hue-rotate(90deg);
border: 6px solid #00ff00;
border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
box-shadow: inset 0 0 80px #00ff00;
background: #001100;
}
/* ===============================
GLOBAL
=============================== */
* { box-sizing: border-box; }
html, body {
height: 100%;
margin: 0;
font-family: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
line-height: 1.35;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ===============================
GLOBAL - BODY WITH FALLBACK
=============================== */
body {
/* Default solid background (your original) */
background: var(--bg-page);
color: var(--text);
/* These properties will be overridden by inline style when you want a wallpaper */
background-image: none;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* Dark overlay — only visible when a background image exists */
body::before {
content: "";
position: fixed;
inset: 0;
background: rgba(11, 13, 23, 0.78);
z-index: 1;
pointer-events: none;
/* Hide overlay when no background image is set */
opacity: 0;
transition: opacity 0.4s ease;
}
/* When body actually has a background image → show overlay */
body[style*="background-image"]::before {
opacity: 1;
}
/* ===============================
PAGE & SHELL
=============================== */
.page {
background: var(--bg-page); /* this will now act as fallback when no image */
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
position: relative;
z-index: 2;
/* Add these for smooth transitions */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
transition: background-image 0.8s ease-in-out;
}
.shell {
width: 100%;
max-width: var(--max-width);
display: flex;
flex-direction: column;
gap: var(--gap);
align-items: center;
position: relative;
}
/* ===============================
CARD
=============================== */
.card {
width: 100%;
background: #0b0d17; /* kept your original dark card background */
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 70vh;
max-height: 92vh;
position: relative;
z-index: 2; /* ensures card is above the overlay too */
}
/* ===============================
PERFECT FIXED START FOR LINKS LIST
=============================== */
.card {
display: grid;
grid-template-rows: auto 1fr auto; /* banner (with meta overlay) | links | footer */
min-height: 70vh;
max-height: 92vh;
}
.links-list {
margin-top: 0 !important; /* kill the old margin */
padding: 0 18px 18px 18px; /* keep horizontal padding only */
overflow-y: auto;
}
/* ===================================
DISABLE ALL IMAGE INTERACTIONS
=============================== */
img,
.avatar img,
#banner-img,
#profile-pic,
.preview-card img,
#preview-avatar {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
user-drag: none;
pointer-events: none; /* ← kills clicks, right-clicks, long-press */
-webkit-touch-callout: none; /* disables iOS long-press menu */
-khtml-user-select: none; /* old Safari */
/* optional: tiny visual hint that it's not clickable */
cursor: default;
}
/* If you ever put an img inside a link and still want the link to work,
re-enable pointer-events only on the parent */
.link-item a {
pointer-events: auto !important;
}
/* ===============================
FEATURES (LEARN & PROMO)
=============================== */
.learn-features, .promo-features {
display: flex;
flex-direction: column;
gap: 16px;
margin: 50px 0;
text-align: start;
}
.feature {
display: flex;
align-items: center;
gap: 14px;
}
.feature i {
font-size: 1.3rem;
color: var(--accent);
min-width: 30px;
}
.feature-text {
font-size: 0.95rem;
color: var(--text);
}
.modal-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 20px;
}
.accent-icon {
color: var(--accent);
margin-right: 8px;
}
.promo-preview .preview-card {
display: flex;
gap: 16px;
align-items: center;
margin-top: 16px;
background: var(--glass);
padding: 16px;
border-radius: 16px;
transition: transform 0.2s ease;
}
.promo-preview .preview-card:hover {
transform: translateY(-3px) scale(1.001);
}
.preview-card img {
width: 72px;
height: 72px;
border-radius: 12px;
object-fit: cover;
flex-shrink: 0;
}
.preview-text { display: flex; flex-direction: column; gap: 4px; text-align: start; }
.preview-title { font-weight: 700; font-size: 1rem; }
.preview-sub { font-size: 0.85rem; color: var(--muted); }
/* =========================================================
BANNER – PROFILE LAYOUT (ON BANNER, INVISIBLE BOX STYLE)
========================================================= */
.banner {
position: relative;
height: 340px;
overflow: hidden;
}
.banner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: contrast(1.05) saturate(1.05);
}
/* Banner overlay */
.banner::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(5,7,18,0.25),
rgba(5,7,18,0.85)
);
z-index: 1;
}
/* Optional: keep your existing subtle bottom fade */
.banner::before {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 80px; /* increased a bit for smoother fade */
background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
z-index: 2;
pointer-events: none;
}
.banner-actions {
position: absolute;
top: 12px; left: 12px; right: 12px;
display: flex;
justify-content: space-between;
gap: 12px;
z-index: 3;
}
.banner-button {
height: 32px; min-width: 32px; padding: 6px; /* Made smaller as requested */
border-radius: 50px; /* Softer corners */
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
cursor: pointer;
color: var(--text);
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.03);
transition: transform .18s ease, background .18s ease;
backdrop-filter: blur(6px);
}
.banner-button:hover { transform: scale(1.06); background: rgba(0,0,0,0.48); }
.banner-button:active { transform: scale(.98); }
/* ===============================
PROFILE META
=============================== */
.profile-meta {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
padding: 16px 32px 70px 22px;
display: flex;
gap: 12px;
align-items: flex-start;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 100px); /* Smooth gradient for minimal overlap look */
}
.avatar {
width: 90px; height: 90px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--card); /* Thinner border */
background: linear-gradient(180deg,#0b1220,#111827);
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(4,7,15,0.5); /* Softer shadow */
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meta-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px; /* Tighter spacing for minimal look */
align-items: flex-start;
margin-left: 5px;
}
.handle { font-weight: 600; font-size: 1rem; letter-spacing: 0.1px; } /* Slightly smaller and lighter */
.artist { color: var(--muted); font-weight: 500; font-size: 0.9rem; }
/* Theme description – truncate long text nicely */
.desc {
color: var(--muted);
font-size: 0.85rem;
line-height: 1.3;
width: 95%;
/* Auto-truncate with ellipsis after 2–3 lines */
display: -webkit-box;
-webkit-line-clamp: 3; /* Change to 2 if you want stricter */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* Prevent weird wrapping on very long words */
word-break: break-word;
hyphens: auto;
}
/* Optional: subtle "read more" feel for truncated text */
.desc:hover {
-webkit-line-clamp: unset; /* Expand on hover (optional) */
cursor: pointer;
}
.social-row {
margin-top: 5px;
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.s-btn {
width: 24px; /* exactly like your example */
height: 24px; /* exactly like your example */
border-radius: 50px; /* perfect circle pill */
display: flex;
align-items: center;
justify-content: center;
background: transparent; /* matches your .social-pill */
color: var(--accent);
text-decoration: none;
border: 1px solid var(--border); /* matches your example */
cursor: pointer;
font-size: 11px; /* tiny crisp icon size */
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.s-btn i {
flex-shrink: 0;
transition: transform 0.25s ease;
}
.s-btn:hover {
transform: translateY(-2px) scale(1.1);
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.28);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}
.s-btn.dragging {
opacity: 0.6;
transform: scale(0.95);
}
/* ===============================
LINKS LIST
=============================== */
.links-list {
padding: 16px;
overflow-y: auto;
/*display: flex;*/
flex-direction: column;
gap: 2px; /* Tighter spacing for modern look */
}
/* Modern minimal link */
.link-item {
padding: 12px 14px;
border-radius: 10px;
background: rgba(255,255,255,0.03);
display: flex;
align-items: center;
transition: transform 0.15s ease, background 0.15s ease;
}
.link-item:hover {
transform: translateY(-2px);
background: rgba(255,255,255,0.03);
}
/* Link icon */
.link-icon {
width: 36px;
height: 36px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
color: var(--accent);
background: rgba(255, 255, 255, 0.04);
}
/* Link text */
.link-title {
font-size: 0.9rem;
font-weight: 600;
}
.link-sub {
font-size: 0.75rem;
color: var(--muted);
}
.link-text { flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left; }
/* ===============================
HOVER EFFECTS FOR LINK ICONS
=============================== */
.link-icon i,
.link-share-btn i,
.fa-arrow-up-right-from-square {
transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
/* Hover for the arrow icon */
.fa-arrow-up-right-from-square:hover {
color: var(--accent); /* theme accent color */
opacity: 0.9;
}
.link-share-btn {
background: transparent;
color: var(--muted);
font-size: 0.9rem;
border: none;
}
/* Hover for the share button icon */
.link-share-btn:hover i {
color: var(--accent-2); /* secondary accent color */
opacity: 0.9;
}
/* ================================================
BANNER + ULTRA-MINIMAL MOBILE COLLAPSE
================================================ */
/* Full banner – always visible on desktop/tablet */
.banner {
position: relative;
height: 340px;
overflow: hidden;
transition:
height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), /* bouncy smooth */
opacity 0.5s ease,
transform 0.5s ease;
will-change: height, transform, opacity;
transform-origin: top center;
}
/* Collapsed mode: only centered avatar + top-right buttons on blurred bg */
.banner.mini-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 56px !important; /* ultra compact */
z-index: 1000;
background: rgba(6,6,10,0.94);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
box-shadow: 0 6px 28px rgba(0,0,0,0.5);
overflow: hidden;
opacity: 1;
transform: translateY(0) scale(1);
}
/* Blurred banner image as background */
.banner.mini-header #banner-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(28px) brightness(0.5) saturate(0.65);
transform: scale(1.25);
opacity: 0.9;
}
/* Hide ALL text/content in mini mode */
.banner.mini-header .profile-meta,
.banner.mini-header .meta-text,
.banner.mini-header .handle,
.banner.mini-header .artist,
.banner.mini-header .desc,
.banner.mini-header .social-row {
display: none !important;
}
/* Avatar – perfectly centered orb */
.banner.mini-header .avatar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 46px;
height: 46px;
border: 2.5px solid rgba(255,255,255,0.25);
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
z-index: 5;
}
/* Banner actions – stay top-right, unchanged size/position */
.banner-actions {
position: absolute;
top: 8px;
right: 8px;
display: flex;
gap: 8px;
z-index: 10;
transition: opacity 0.4s ease;
}
.banner.mini-header .banner-actions {
opacity: 1; /* always visible */
}
/* Push page content down when fixed */
body.mini-header-active .page {
padding-top: 56px;
transition: padding-top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Super smooth collapse/expand animation */
.banner.mini-header {
animation: collapseUltra 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes collapseUltra {
from {
height: 340px;
transform: scale(1.015) translateY(-20px);
opacity: 1;
}
to {
height: 56px;
transform: scale(1) translateY(0);
opacity: 1;
}
}
.banner:not(.mini-header) {
animation: expandUltra 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes expandUltra {
from {
height: 56px;
transform: scale(0.985) translateY(10px);
opacity: 0.97;
}
to {
height: 340px;
transform: scale(1) translateY(0);
opacity: 1;
}
}
/* Mobile-only collapse – disable on desktop/tablet */
@media (min-width: 769px) {
.banner.mini-header {
height: 340px !important; /* force full height on larger screens */
}
body.mini-header-active .page {
padding-top: 0 !important;
}
}
/* In .banner.mini-header */
.banner.mini-header {
will-change: height, transform; /* already have some, but be explicit */
transition: height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.4s ease;
}
/* Force GPU acceleration on mobile */
.banner {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* Reduce chance of reflow when padding-top changes */
body.mini-header-active .page {
transition: padding-top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Preview text block – prevent overflow */
.preview-text {
overflow: hidden; /* Contain children */
}
/* Username – single line truncate */
.preview-title {
font-weight: 700;
font-size: 1.1rem;
white-space: nowrap; /* Force single line */
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%; /* Respect container width */
}
/* Description – multi-line truncate with ellipsis */
.preview-sub {
font-size: 0.9rem;
color: var(--muted);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 3; /* Max 3 lines – change to 2 if stricter */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Optional: subtle "more" indicator on hover (if truncated) */
.preview-sub:hover {
-webkit-line-clamp: unset; /* Expand on hover – optional */
cursor: default;
}
/* Fallback for non-webkit browsers (Firefox, etc.) */
.preview-sub {
max-height: 3.9em; /* Approx 3 lines height */
overflow: hidden;
position: relative;
}
/* Optional fade-out gradient for very long text (non-webkit friendly) */
.preview-sub::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1.5em;
background: linear-gradient(to bottom, transparent, var(--bg-primary));
pointer-events: none;
display: none; /* Only show if needed – use JS to toggle */
}
/* ====================== PUBLIC STATUS DOT ====================== */
.avatar-wrapper {
position: relative;
display: inline-block;
}
.status-dot {
position: absolute;
bottom: 4px;
right: 4px;
width: 24px;
height: 24px;
border-radius: 50%;
border: 3.5px solid #0b0d17;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
pointer-events: none;
z-index: 9122;
transition: transform 0.25s ease;
cursor: default;
}
/* Status colors */
.status-dot[data-status="online"] { background: #22c55e; }
.status-dot[data-status="idle"] { background: #eab308; }
.status-dot[data-status="dnd"] { background: #ef4444; }
.status-dot[data-status="offline"] { background: #6b7280; }
/* Hover scale effect */
.status-dot:hover {
transform: scale(1.15);
}
/* Subtle ring for online status */
.status-dot[data-status="online"] {
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35),
0 2px 10px rgba(0, 0, 0, 0.6);
}
/* ====================== MODERN TOOLTIP BELOW DOT ====================== */
.status-dot:hover {
transform: scale(1.18);
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.25);
}
/* Sleek tooltip - positioned BELOW the dot */
.status-dot::after {
content: attr(data-tooltip);
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
margin-top: 10px;
background: rgba(15, 17, 25, 0.96);
color: #ffffff;
font-size: 0.61rem;
font-weight: 500;
padding: 6px 8px;
border-radius: 10px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: all 0.28s cubic-bezier(0.4, 0.0, 0.2, 1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.07);
letter-spacing: 0.2px;
z-index: 200;
}
/* Small arrow pointing UP to the dot (from below) */
.status-dot::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-6px);
margin-top: 6px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid rgba(15, 17, 25, 0.96);
opacity: 0;
visibility: hidden;
transition: all 0.28s cubic-bezier(0.4, 0.0, 0.2, 1);
z-index: 200;
}
/* Hover animation - smooth pop-up from below */
.status-dot:hover::after,
.status-dot:hover::before {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(4px);
}
/* ===============================
CARD FOOTER & BUTTONS
=============================== */
.card-footer {
margin-top: auto;
padding: 12px 16px; /* Minimal padding */
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgba(255,255,255,0.02);
background: rgba(0,0,0,0.3); /* Minimal transparency */
}
.cta-row { display: flex; gap: 8px; align-items: center; }
.primary-cta {
color: #061321;
padding: 8px 14px; /* Smaller for minimal */
border-radius: 6px; /* Softer */
border: none;
cursor: pointer;
font-weight: 600; /* Lighter weight */
transition: background 0.6s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.primary-cta:hover { transform: scale(1.02); } /* Subtler scale */
.primary-cta:active { transform: scale(0.98); box-shadow: 0 4px 16px rgba(107,83,255,0.15); } /* Softer active */
.secondary-cta {
background: transparent;
border: 1px solid rgba(255,255,255,0.03);
color: var(--muted);
padding: 6px 10px; /* Smaller */
border-radius: 8px;
cursor: pointer;
font-weight: 500;
}
/* QR Code - Show ONLY on large screens (≥1024px) */
#mobile-qrcode {
position: fixed;
bottom: 36px;
right: 36px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
z-index: 999;
pointer-events: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
opacity: 0;
transition: opacity 0.4s ease;
}
#mobile-qrcode.visible {
opacity: 1;
}
#mobile-qrcode .qrcode-label {
font-size: 0.84rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
text-shadow: 0 1px 6px rgba(0,0,0,0.7);
letter-spacing: 0.3px;
}
#qrcode-box-dense {
width: 122px;
height: 122px;
overflow: hidden;
pointer-events: auto;
border-radius: 4px;
transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1);
}
#qrcode-box-dense svg {
width: 100% !important;
height: 100% !important;
display: block;
}
#qrcode-box-dense svg path[fill="#ffffff"] {
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.7));
transform: translateY(-2px);
transition: all 0.5s cubic-bezier(0.2, 0, 0.2, 1);
}
#mobile-qrcode:hover #qrcode-box-dense svg path[fill="#ffffff"] {
filter: drop-shadow(0 8px 20px rgba(0,0,0,0.85));
transform: translateY(-6px);
}
/* HIDE QR CODE ON MOBILE & TABLET — EVEN IN LANDSCAPE */
@media (max-width: 1024px) {
#mobile-qrcode {
display: none !important;
}
}
@media (max-width: 1279px) {
#mobile-qrcode { display: none !important; }
}
/* ===============================
MODALS
=============================== */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: flex-end;
justify-content: center;
z-index: 1000;
transition: background 0.35s ease;
}
.modal {
width: 100%;
max-width: var(--max-width);
max-height: 90vh;
border-radius: 20px 20px 0 0;
background: linear-gradient(180deg,var(--bg-primary), var(--card));
padding: 24px 28px;
border: 1px solid rgba(255,255,255,0.03);
transform: translateY(120%);
transition: transform 0.35s ease, opacity 0.35s ease;
overflow-y: auto;
text-align: center;
}
.modal::before {
content: "";
display: block;
width: 60px; height: 6px;
border-radius: 3px;
background: rgba(255,255,255,0.2);
margin: 0 auto 20px auto;
}
.modal-backdrop.show .modal { transform: translateY(0); }
.modal h4 { font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; }
.modal p { line-height: 1.6; font-size: 0.95rem; color: var(--muted); }
.modal .modal-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; justify-content: center; }
.modal .s-btn2 { display: flex; border: none; align-items: center; gap: 8px; padding: 6px 10px; font-weight: 600; border-radius: 50px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.04); color: var(--text); transition: transform 0.18s ease, box-shadow 0.18s ease; cursor: pointer; }
.modal .s-btn2:hover { transform: translateY(-2px); }
#share-input {
flex: 1;
padding: 12px 14px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text);
/* Prevent unwanted changes on click/focus */
outline: none; /* Remove default blue outline */
box-shadow: none; /* Make sure no shadow jumps in */
/* Optional: subtle focus state that doesn't feel "jumpy" */
transition: border-color 0.2s ease, background 0.2s ease;
}
/* Very gentle focus state (recommended) */
#share-input:focus {
border: 1px solid rgba(255, 255, 255, 0.08);
/* NO box-shadow here → prevents the "popping" effect */
}
/* Optional: even more controlled version (if you want almost no change) */
#share-input:active,
#share-input:focus-visible {
outline: none;
}
/* For people who use keyboard navigation (accessibility) */
#share-input:focus-visible {
outline: none; /* visible only on keyboard focus */
}
/* ===============================
MODALS - Smooth Professional Animations
=============================== */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.modal-backdrop.show {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.modal {
width: 100%;
max-width: var(--max-width);
max-height: 90vh;
border-radius: 20px 20px 0 0;
background: linear-gradient(180deg, var(--bg-primary), var(--card));
padding: 24px 28px;
border: 1px solid rgba(255,255,255,0.03);
/* Starting state for smooth open */
transform: translateY(115%) scale(0.95);
opacity: 0;
/* Premium easing with a tiny "pop" feel */
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: transform, opacity;
box-shadow: 0 10px 40px -15px rgba(0, 0, 0, 0.4);
overflow-y: auto;
text-align: center;
}
.modal-backdrop.show .modal {
transform: translateY(0) scale(1);
opacity: 1;
}
/* Drag handle (kept exactly as before) */
.modal::before {
content: "";
display: block;
width: 60px;
height: 6px;
border-radius: 3px;
background: rgba(255,255,255,0.25);
margin: 0 auto 22px auto;
}
/* QR container – no background, no heavy shadow, just clean */
#share-qr-container {
border-radius: 8px; /* gentle rounding – looks premium */
overflow: hidden;
background: transparent; /* ← removed! no more grey */
box-shadow: 0 4px 16px rgba(0,0,0,0.4); /* soft lift, not harsh */
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#share-qr-container:hover {
transform: scale(1.05);
box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}
/* Make QR razor-sharp */
#share-qr-container svg {
width: 100% !important;
height: 100% !important;
image-rendering: pixelated; /* ← important for crisp pixels on SVG */
}
/* White dots – strong contrast, subtle glow only */
#share-qr-container svg path[fill="#ffffff"] {
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.7));
}
.copy-btn {
width: 42px;
height: 42px;
border-radius: 50%; /* Perfect circle */
background: rgba(255, 255, 255, 0.08);
color: #a0aebd;
border: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.15rem; /* Icon size */
backdrop-filter: blur(10px); /* Modern glass effect */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.copy-btn:hover {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
transform: scale(1.08) translateY(-1px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.copy-btn:active {
transform: scale(0.95);
transition: transform 0.1s ease;
}
.copy-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Success & Error states (used in your JS) */
.copy-btn.success {
background: #10b981 !important;
color: white !important;
}
.copy-btn.error {
background: #ef4444 !important;
color: white !important;
}
/* ===============================
TEXT
=============================== */
.muted { color: var(--muted); }
/* ===============================
STATUS BOXES
=============================== */
.status-box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 20px;
max-width: 90%;
width: 360px;
margin: 50px auto;
border-radius: 16px;
box-sizing: border-box;
height: fit-content;
}
.status-box img.status-logo { width: 48px; margin-bottom: 16px; opacity: 0.8; }
.status-box h2 { margin-bottom: 10px; font-size: 1.5rem; }
.status-box p.muted { margin-bottom: 15px; font-size: 0.95rem; line-height: 1.4; }
.status-box p.small-text { font-size: 0.85rem; }
.error-box, .server-box { box-sizing: border-box; border-radius: 16px; padding: 30px 20px; max-width: 90%; width: 360px; margin: 50px auto; height: fit-content; }
.error-box { background: var(--glass);}
.server-box { background: rgba(255,0,0,0.03); }
.server-box button#retry-server-btn, .status-box.error-box button#go-home-btn {
padding: 12px 24px;
border: none;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 1rem;
}
.server-box button#retry-server-btn { background: #ff4c4c; color: white; margin-bottom: 12px; width: 80%; max-width: 200px; }
.status-box.error-box button#go-home-btn { background: #1b2772; color: white; transition: background 0.3s; }
.status-box.error-box button#go-home-btn:hover { background: #1b2772b1; }
/* Status Boxes – Shared Base */
.status-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 48px 32px;
max-width: 420px;
width: 90%;
margin: 40px auto;
background: var(--card);
border-radius: 20px;
box-shadow: 0 12px 40px rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.06);
animation: fadeIn 0.6s ease-out;
}
.status-icon {
width: 90px;
height: 90px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
font-size: 40px;
color: white;
}
.status-icon {
background: rgba(255,255,255,0.08);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.error-box .status-icon {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
.server-box .status-icon.error {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.private-box .status-icon.private {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.status-box h2 {
font-size: 1.8rem;
font-weight: 700;
margin: 0 0 16px 0;
color: var(--text);
}
.status-box p.muted {
font-size: 1rem;
line-height: 1.6;
margin: 0 0 28px 0;
color: var(--muted);
}
.status-box .small-text {
font-size: 0.88rem;
margin-top: 16px;
}
.status-box .btn.primary {
padding: 14px 32px;
border-radius: 14px;
font-size: 1rem;
font-weight: 600;
background: var(--accent);
color: #000;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.status-box .btn.primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}
.status-box .btn.primary:active {
transform: translateY(0);
}
/* Fade in animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile Optimization */
@media (max-width: 480px) {
.status-box {
padding: 40px 24px;
margin: 20px auto;
border-radius: 16px;
}
.status-icon {
width: 80px;
height: 80px;
font-size: 36px;
}
.status-box h2 {
font-size: 1.6rem;
}
.status-box p.muted {
font-size: 0.95rem;
}
.status-box .btn.primary {
padding: 12px 28px;
font-size: 0.95rem;
}
}
/* ===============================
MODERN STATUS CARDS
=============================== */
.status-card {
width: 100%;
max-width: 340px;
margin: 60px auto;
padding: 28px 24px;
border-radius: 18px;
background: #0f1120;
border: 1px solid rgba(255,255,255,0.06);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
animation: fadeUp 0.4s ease;
}
/* Icon */
.status-icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
font-size: 20px;
background: rgba(255,255,255,0.05);
color: var(--text);
}
/* Variants */
.status-card.error .status-icon {
color: #ef4444;
}
.status-card.warning .status-icon {
color: #f59e0b;
}
.status-card.neutral .status-icon {
color: #8b5cf6;
}
/* Title */
.status-card h3 {
font-size: 1.05rem;
font-weight: 600;
margin-bottom: 8px;
color: var(--text);
}
/* Description */
.status-card p {
font-size: 0.92rem;
color: var(--muted);
line-height: 1.5;
margin-bottom: 18px;
}
/* Small text */
.status-card small {
font-size: 0.8rem;
color: var(--muted);
margin-top: 12px;
}
/* Button */
.status-card .btn {
padding: 10px 18px;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 500;
background: var(--accent);
color: #000;
border: none;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration-line: none;
}
.status-card .btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.status-card .btn:active {
transform: translateY(0);
}
/* ICON — centered logo style */
.status-icon {
width: 64px;
height: 64px;
border-radius: 16px;
display: grid;
place-items: center;
margin: 0 auto 20px auto;
font-size: 22px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
backdrop-filter: blur(6px);
transition: transform 0.2s ease;
}
/* Subtle hover animation */
.status-card:hover .status-icon {
transform: translateY(-2px);
}
/* Animation */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile */
@media (max-width: 480px) {
.status-card {
margin: 30px auto;
padding: 22px 18px;
}
}
/* ---------- JOIN BUTTON ---------- */
#join-btn i { margin-right:6px; }
/* ---------- SHARE PREVIEW ---------- */
#share-preview .preview-card {
display:flex; align-items:center; gap:12px;
background:transparent; padding:12px; border-radius:12px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
#share-preview img { flex-shrink:0; }
#share-preview .preview-title { font-weight:700; }
#share-preview .preview-sub { font-size:0.85rem; color:var(--muted); }
/* ---------- REPORT / BOOKMARK feedback ---------- */
.s-btn.bookmarked { color:var(--accent); }
.s-btn.reported { color:#ff4f4c; }
/* -------------------------------------------------
LEARN-MORE MODAL – center feature list on desktop
------------------------------------------------- */
@media (min-width: 768px) {
.learn-features {
display: flex;
flex-direction: column;
align-items: center; /* <-- centers the */
gap: 18px;
max-width: 460px;
margin: 0 auto;
}
.learn-features .feature {
width: 100%;
max-width: 380px;
text-align: left; /* keep text left-aligned inside the centered box */
}
}
#username {
display: inline-flex;
align-items: center;
/* gap: 3px; space between @username and badge */
line-height: 1; /* consistent height */
}
#username-text {
font-weight: 600;
}
#verified-badge {
display: none;
font-size: 0.94em; /* slightly smaller than text */
line-height: 1;
transform: translateY(-0.5px); /* tiny nudge for pixel-perfect alignment */
color: #1d9bf0;
user-select: none;
}
/* Only OUR code can make it visible */
#verified-badge.verified-by-server {
display: inline-flex !important;
align-items: center;
}
/* Block all fakes */
#verified-badge:not(.verified-by-server) {
display: none !important;
}
/* Tiny inline badges – no circles, no borders, just the icon */
.badges-row {
display: flex;
flex-wrap: wrap;
gap: 9px; /* smaller gap */
margin-top: 10px;
align-items: center;
}
.badge {
width: auto; /* no fixed size */
height: auto;
padding: 4px 7px; /* tiny pill-like padding */
border-radius: 8px; /* soft corners */
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.92rem; /* small icons */
background: rgba(255,255,255,0.06);
backdrop-filter: blur(8px);
transition: all 0.22s ease;
cursor: default;
}
/* Hover glow – subtle but premium */
.badge:hover {
transform: translateY(-1px);
background: rgba(255,255,255,0.12);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
/* Tooltip – same as before, but smaller */
.badge::before {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 8px;
background: rgba(15,20,25,0.97);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 7px 11px;
font-size: 0.78rem;
color: #fff;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease;
pointer-events: none;
z-index: 9999;
}
.badge::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-top-color: rgba(15,20,25,0.97);
opacity: 0;
transition: opacity 0.2s ease;
}
.badge:hover::before,
.badge:hover::after {
opacity: 1;
visibility: visible;
}
/* Individual badge colors – pure icon tint, no border */
.badge.premium { color: #ffd700; background: #ffd70018; }
.badge.vip { color: #b9f2ff; background: #b9f2ff18; }
.badge.founder { color: #c0ff80; background: #c0ff8018; }
.badge.moderator { color: #6c5ce7; background: #6c5ce718; }
.badge.top-creator { color: #ff4500; background: #ff450018; }
.badge.early-supporter { color: #00d4ff; background: #00d4ff18; }
.badge.crypto { color: #f7931a; background: #f7931a18; }
.badge.valentine-2025 { color: #ff69b4; background: #ff69b418; }
.badge.halloween { color: #9bf6ff; background: #9bf6ff18; }
.badge.christmas { color: #ff1a1a; background: #ff1a1a18; }
.promo-features .feature {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.95rem;
margin-bottom: 12px;
}
.promo-features .feature i {
font-size: 0.9rem;
width: 20px;
text-align: center;
}
/* Hide promo button when data attribute says so */
#promo-btn[data-visible="false"],
#promo-btn[data-visible="null"] {
display: none !important;
}
/* Collapse footer to inline/inline-block when there's no promo button */
.card-footer[data-promo="false"],
.card-footer[data-promo="null"] {
display: block; /* or inline-block / grid / whatever fits your design */
padding: 14px 18px;
text-align: center; /* optional – centers the remaining text */
}
/* If you still want a tiny bit of flex for the remaining meta text only */
.card-footer[data-promo="false"] .cta-row,
.card-footer[data-promo="null"] .cta-row {
justify-content: center;
width: 100%;
}
/* ===============================
RESPONSIVE
=============================== */
@media (max-width: 520px) {
.page { padding: 0; align-items: stretch; justify-content: stretch; }
.shell { max-width: 100%; border-radius: 0; }
.card { border-radius: 0; box-shadow: none; min-height: auto; max-height: none; height: 100vh;}
.banner { height: 420px; }
.avatar { width: 88px; height: 88px; border-radius: 50px; }
.handle { font-size: 1rem; }
.artist { font-size: 0.85rem; }
.desc { font-size: 0.8rem; }
.social-row { justify-content: center; }
.links-list { padding: 10px; gap: 10px; }
.link-item { padding: 10px; font-size: 0.85rem; }
.link-title { font-size: 0.9rem; }
.link-sub { font-size: 0.75rem; }
.banner-button { height: 34px; min-width: 34px; border-radius: 50px; }
.card-footer { flex-direction: column; align-items: stretch; gap: 10px; }
.cta-row { width: 100%; justify-content: center; flex-wrap: wrap; }
.meta-text { align-items: center; }
.primary-cta, .secondary-cta { flex: 1; text-align: center; font-size: 0.9rem; }
}
/* VERIFIED BADGE — NEVER TOUCHED, stays exactly as you love it */
#verified-badge {
pointer-events: auto !important;
cursor: pointer;
width: 22px;
height: 22px;
font-size: 1em;
color: #1d9bf0;
}
/* Ultra subtle dark badge */
.username-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 23px;
height: 23px;
min-width: 23px;
padding: 4px;
border-radius: 50px;
font-size: 0.70em;
color: inherit;
background: rgba(30, 30, 30, 0.44);
border: 1px solid rgba(255, 255, 255, 0.04);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.25s ease;
vertical-align: middle;
margin-left: 5px;
}
.username-badge:hover {
background: rgba(35, 35, 35, 0.85);
border-color: rgba(255, 255, 255, 0.09);
transform: scale(1.08);
}
/* Desktop: verified + other badges in one line */
#username-badges {
display: inline-flex;
gap: 6px;
align-items: center;
}
/* Mobile: smaller + much more compact badges */
@media (max-width: 640px) {
.username-badge {
width: 19px; /* ← bit smaller */
height: 19px;
min-width: 19px;
padding: 3px; /* tighter padding */
font-size: 0.64em; /* slightly smaller icons/text */
margin-left: 4px; /* less spacing after username */
}
#username-badges {
display: flex;
gap: 4px; /* compacter gap between badges */
}
#username {
/*flex-direction: column;
gap: 8px;*/
}
#username-text {
display: block;
}
#verified-badge {
margin-left: 0 !important;
}
}
/* Shared tooltip for ALL badges (verified + others) */
#melodreams-badge-tooltip,
#melodreams-verified-tooltip {
position: fixed !important;
transform: translateX(-50%) scale(0.94);
background: rgba(11,13,23,0.98);
color: #e7e9ea;
padding: 9px 13px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.7);
backdrop-filter: blur(16px);
font-size: 0.82rem;
text-align: center;
width: 178px;
opacity: 0;
visibility: hidden;
transition: all 0.22s ease;
z-index: 2144;
contain: none !important;
pointer-events: auto !important;
}
#melodreams-badge-tooltip::before,
#melodreams-verified-tooltip::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -7px;
border: 7px solid transparent;
border-bottom-color: rgba(29,155,240,0.55);
}
#melodreams-badge-tooltip::after,
#melodreams-verified-tooltip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -6px;
border: 6px solid transparent;
border-bottom-color: rgba(11,13,23,0.98);
}
.category-container {
margin-bottom: 16px;
}
.category-header {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--background-secondary);
border-radius: 4px;
}
.category-title {
font-weight: bold;
font-size: 16px;
}
.placeholder-box {
text-align: center;
padding: 32px;
border: 2px dashed var(--muted);
border-radius: 12px;
background: linear-gradient(135deg, var(--background-secondary), var(--background));
max-width: 500px;
margin: 28px auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.placeholder-box i {
font-size: 40px;
color: var(--primary);
margin-bottom: 20px;
display: block;
}
.placeholder-box h3 {
margin: 0 0 16px 0;
font-size: 1.6rem;
font-weight: 600;
color: var(--text);
}
.placeholder-box p {
margin: 0 0 20px 0;
font-size: 1.1rem;
line-height: 1.5;
color: var(--muted);
}
.placeholder-box .primary-cta {
background: var(--primary);
color: #fff;
border: none;
border-radius: 8px;
padding: 12px 24px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s;
}
.placeholder-box .primary-cta:hover {
background: color-mix(in srgb, var(--primary), #000 20%);
}
/* Standard content (your original) */
.link-item .standard-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
gap: 12px;
}
/* Embed wrapper */
.link-item .embed-wrapper {
position: relative;
width: 100%;
height: fit-content;
}
.link-item .embed-wrapper iframe {
width: 100%;
height: 100%;
border: none;
}
/* Play overlay */
.link-item .play-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.45);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
color: white;
font-size: 36px;
}
.link-item:hover .play-overlay {
opacity: 1;
}
/* Text below embed */
.link-item .embed-text {
padding: 14px 16px;
}
/* Event content */
.link-item .event-content {
padding: 20px;
}
/* Event button */
.link-item .event-btn {
margin-top: 16px;
padding: 10px;
width: 100%;
background: var(--accent);
color: #000;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
}
/* Force profile content to be visible – no hidden inline styles */
.profile-content {
display: block !important;
opacity: 1 !important;
}
.links-list {
padding: 0 18px 18px 18px;
overflow-y: auto;
}
/* When background image is active → show overlay */
body.has-bg-image::after {
opacity: 1;
}
/* ────────────────────────────────────────────────
Private Profile Screen – Modern & Responsive
───────────────────────────────────────────────── */
.private-screen {
position: fixed;
inset: 0;
background: var(--bg-primary, #0a0a0f);
color: var(--text-primary, #ffffff);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
padding: 1.5rem;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.private-content {
background: var(--background-secondary, rgba(20, 20, 30, 0.85));
border-radius: 20px;
padding: 2.5rem 2rem;
max-width: 480px;
width: 100%;
text-align: center;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border: 1px solid var(--border, rgba(255,255,255,0.08));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: transform 0.3s ease, opacity 0.4s ease;
}
.private-icon {
font-size: 4.5rem;
color: var(--accent, #a78bfa);
margin-bottom: 1.5rem;
opacity: 0.9;
}
.private-content h2 {
font-size: clamp(1.6rem, 5vw, 2.1rem);
margin: 0 0 1rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.private-content p {
font-size: clamp(1rem, 3.5vw, 1.1rem);
line-height: 1.6;
margin: 0 0 2rem;
color: var(--text-secondary, #a0a0c0);
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.private-actions {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.join-btn {
padding: 0.9rem 2.2rem;
font-size: 1.05rem;
font-weight: 600;
border-radius: 12px;
background: var(--primary, #7c3aed);
color: white;
border: none;
transition: all 0.25s ease;
}
.join-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(124, 58, 237, 0.35);
background: var(--primary-hover, #9333ea);
}
/* Mobile adjustments */
@media (max-width: 640px) {
.private-content {
padding: 2rem 1.5rem;
border-radius: 16px;
}
.private-icon {
font-size: 3.8rem;
margin-bottom: 1.2rem;
}
.join-btn {
width: 100%;
max-width: 280px;
}
}
/* When shown via JS – subtle entrance */
.private-screen[style*="display: flex"],
.private-screen.show {
opacity: 1;
transition: opacity 0.4s ease;
}
/* =========================================================================
MOBILE PROFILE META – Vertical stacking
========================================================================= */
@media (max-width: 520px) {
/* Main meta container – switch to column + center most things */
.profile-meta {
flex-direction: column;
align-items: center;
text-align: center;
padding: 36px 16px 80px 16px;
gap: 12px;
margin-top: 20px;
top: 12px;
}
/* Avatar – bigger + centered */
.avatar {
width: 86px;
height: 86px;
margin-bottom: 8px; /* breathing room below avatar */
}
/* Text block – center everything */
.meta-text {
align-items: center;
text-align: center;
margin-left: 0; /* kill desktop margin */
gap: 6px;
max-width: 90%;
width: 900px;
}
.handle {
font-size: 1.15rem; /* slightly bigger for mobile readability */
}
.artist,
.desc {
font-size: 0.9rem;
max-width: 90%; /* prevent very long lines */
}
/* Social icons – centered row, allow wrap if many */
.social-row {
margin-top: 10px;
justify-content: center;
gap: 5px; /* bit more space between icons */
width: 100%;
max-width: 320px;
}
/* Optional: make sure badges row also centers nicely */
.badges-row,
#username-badges {
justify-content: center;
}
}
/* Extra safety for very small phones (≤ 380px wide) */
@media (max-width: 380px) {
.avatar {
width: 84px;
height: 84px;
}
.handle {
font-size: 1.05rem;
}
.social-row {
gap: 10px;
}
.s-btn {
font-size: 0.62rem;
}
}
/* === WAITING CONTAINER STYLING === */
#waiting {
display: flex;
flex-direction: column; /* stack status boxes vertically */
gap: 8px; /* space between status boxes */
padding: 16px; /* inner spacing */
margin: 16px 0; /* spacing from other content */
width: 100%; /* responsive */
box-sizing: border-box;
transition: background-color 0.2s ease;
overflow-y: auto;
}
/* === MODERN PROFILE STATUS BOXES === */
.profile-status {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin: 6px 0;
border-radius: 8px;
font-size: 0.875rem; /* slightly smaller */
font-weight: 500;
border-left: 3px solid transparent;
background-color: #f5f5f5; /* light neutral background */
color: #333; /* default text color */
transition: transform 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* ICON STYLING */
.profile-status i {
flex-shrink: 0;
font-size: 1rem;
}
/* === STATUS TYPES === */
.profile-status--banned {
border-left-color: #e74c3c;
background-color: #ffe6e6;
color: #c0392b;
}
.profile-status--hacked {
border-left-color: #c0392b;
background-color: #ffe6e6;
color: #922b21;
}
.profile-status--attention {
border-left-color: #f39c12;
background-color: #fff4e6;
color: #d35400;
}
.profile-status--suspicious {
border-left-color: #9b59b6;
background-color: #f3e6fa;
color: #7d3c98;
}
/* === MYSTERIOUS HOST STATUS (DARK THEME) === */
.profile-status--host {
background-color: transparent; /* Dark, almost charcoal background */
color: #16a085; /* Brighter green for the text */
padding: 6px 10px;
margin: 4px 0;
font-size: 0.875rem; /* Compact size */
font-weight: 400;
border-radius: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.profile-status--host span {
font-style: italic;
color: #575e6d;
letter-spacing: 0.05rem;
max-width: 100%; /* Ensures the text stays within the container */
display: block; /* Makes the span a block element so it obeys width restrictions */
overflow-wrap: break-word; /* Allows text to break into the next line if it's too long */
word-wrap: break-word; /* Helps long words or URLs break and stay within the box */
white-space: normal; /* Ensures text wraps normally */
}
.profile-status--host .encrypted-message {
font-family: 'Courier New', monospace;
color: #1abc9c;
font-weight: bold;
letter-spacing: 0.1rem;
}
.card-footer .muted a {
color: var(--muted);
text-decoration: none;
transition: color 0.2s ease;
}
.card-footer .muted a:hover {
color: var(--text);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--accent);
text-decoration-thickness: 1.5px;
}
.locked-profile {
background: linear-gradient(135deg, #0f1217, #1a1f2e) !important;
overflow: hidden !important;
}
.access-modal {
width: 90%;
max-width: 420px;
background: rgba(15, 17, 23, 0.95);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
color: white;
padding: 32px 28px;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#current-theme-text {
padding: 0;
background: none;
}
.current-theme-card {
display: flex;
gap: 20px; /* Nice balanced gap */
align-items: flex-start;
max-width: 440px;
margin: 0 auto; /* Centers nicely in modal */
padding: 20px 10px; /* Reduced padding for cleaner look */
}
/* Preview Box with strong, clean border */
.theme-preview-box {
width: 72px;
height: 72px;
border-radius: 50px;
flex-shrink: 0;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
background-clip: padding-box;
overflow: hidden;
}
.theme-info {
flex: 1;
text-align: left;
padding-top: 4px; /* Slight alignment tweak */
}
.theme-name {
font-size: 1.52rem;
font-weight: 700;
letter-spacing: -0.025em;
margin-bottom: 7px;
line-height: 1.1;
}
.theme-desc {
font-size: 0.94rem;
line-height: 1.5;
opacity: 0.84;
}
/* Mobile - stack vertically */
@media (max-width: 520px) {
.current-theme-card {
flex-direction: column;
gap: 18px;
align-items: center;
text-align: center;
max-width: 100%;
padding: 20px 0;
}
.theme-preview-box {
width: 92px;
height: 92px;
}
.theme-info {
text-align: center;
}
}
.report-header {
text-align: center;
margin-bottom: 28px;
}
.report-icon {
width: 64px;
height: 64px;
background: rgba(248, 113, 113, 0.15);
color: #f87171;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
font-size: 1.8rem;
border: 3px solid rgba(248, 113, 113, 0.25);
}
.report-header h4 {
font-size: 1.55rem;
margin: 0 0 8px 0;
letter-spacing: -0.02em;
}
.report-description {
text-align: center;
line-height: 1.55;
opacity: 0.9;
margin-bottom: 24px;
}
.report-info-card {
background: rgba(255, 255, 255, 0.06);
border-radius: 16px;
padding: 24px;
margin-bottom: 28px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.report-steps {
display: flex;
gap: 18px;
}
.step {
display: flex;
gap: 16px;
align-items: flex-start;
}
.step-number {
width: 28px;
height: 28px;
background: rgba(139, 92, 246, 0.2);
color: #c4b5fd;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.95rem;
flex-shrink: 0;
}
.step strong {
display: block;
margin-bottom: 3px;
font-size: 1.02rem;
}
.step small {
opacity: 0.75;
font-size: 0.9rem;
}
.highlight {
color: #a5b4fc;
font-weight: 500;
}
/* Action Buttons */
.report-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.discord-btn {
background: #5865F2;
color: white;
font-weight: 600;
padding: 14px 20px;
border-radius: 12px;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
}
.discord-btn:hover {
background: #4752c4;
transform: translateY(-1px);
}
.discord-btn i {
font-size: 1.3rem;
}
/* Secondary button styling */
.s-btn.secondary {
background: transparent;
border: 1px solid rgba(255,255,255,0.2);
color: #ccc;
}
.s-btn.secondary:hover {
background: rgba(255,255,255,0.08);
color: white;
}
.modal-icon {
width: 58px;
height: 58px;
background: rgba(165, 243, 252, 0.15);
color: var(--accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
font-size: 1.65rem;
border: 3px solid var(--accent);
}
.info-box {
background: rgba(255,255,255,0.05);
border-radius: 14px;
padding: 20px;
margin-bottom: 24px;
border: 1px solid rgba(255,255,255,0.08);
}
.info-item {
padding: 15px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.info-item:last-child {
border-bottom: none;
}
.info-item i {
font-size: 1.4rem;
color: var(--accent);
width: 32px;
}
.info-item strong {
display: block;
margin-bottom: 2px;
}
.privacy-note {
display: flex;
gap: 16px;
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 12px;
padding: 18px;
color: #6ee7b7;
}
.privacy-note i {
font-size: 1.5rem;
margin-top: 2px;
}
.privacy-note p {
margin: 0;
line-height: 1.5;
opacity: 0.95;
}
#profile-container { display: none; }