/* ===============================
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;
}
/* ===============================
LIGHT THEME: Root Vibe (Neutral White)
=============================== */
#profile-preview-box.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
=============================== */
#profile-preview-box.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;
}
/* ===============================
BLUE AMBIENT DARK: Deep Ocean Pro
=============================== */
#profile-preview-box.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)
=============================== */
#profile-preview-box.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
=============================== */
#profile-preview-box.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
=============================== */
#profile-preview-box.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
=============================== */
#profile-preview-box.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)
=============================== */
#profile-preview-box.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;
}
/* ===============================
OLD PAPER / VINTAGE AMBIENT: Sepia Pro
=============================== */
#profile-preview-box.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
=============================== */
#profile-preview-box.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
=============================== */
#profile-preview-box.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
=============================== */
#profile-preview-box.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
=============================== */
#profile-preview-box.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
------------------------- */
#profile-preview-box.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;
}
/* ------------------------
DREAM THEME
------------------------- */
#profile-preview-box.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;
--link: #c56cf0; /* lavender links */
--link-hover: #a29bfe;
}
/* ------------------------
MINECRAFT THEME
------------------------- */
#profile-preview-box.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
------------------------- */
#profile-preview-box.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;
}
/* ------------------------
TROPICAL THEME
------------------------- */
#profile-preview-box.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
------------------------- */
#profile-preview-box.theme-inferno {
--bg: radial-gradient(circle at center, #330000, #0a0000);
--card-bg: #1a0a0a;
--text: #ffe6e6;
--muted: #ffbaba;
--accent: #ff4500; /* fire orange */
--accent-2: #ff6347;
--link: #ff7518;
--link-hover: #ffb347;
}
/* ------------------------
NOCTYRNAL THEME (Darker Blue Crimson Vibes)
------------------------ */
#profile-preview-box.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 */
}
/* ------------------------
ESCAPE REALITY THEME
------------------------ */
#profile-preview-box.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;
}
/* ------------------------
PREMIUM THEME (Lux Gold Vibes)
------------------------ */
#profile-preview-box.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 */
}
/* ------------------------
CHRISTMAS THEME (Darker)
------------------------ */
#profile-preview-box.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;
}
/* ------------------------
NEW YEAR THEME (Darker)
------------------------ */
#profile-preview-box.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;
}
/* ------------------------
GHOSTS THEME
------------------------ */
#profile-preview-box.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;
}
/* Mystery Falls – Gravity Falls Inspired (Forest Mystery, Journal Vibe) */
#profile-preview-box.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) */
#profile-preview-box.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);
}
#profile-preview-box.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);
}
#profile-preview-box.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);
}
#profile-preview-box.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);
}
#profile-preview-box.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);
}
#profile-preview-box.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);
}
#profile-preview-box.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);
}
#profile-preview-box.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);
}
#profile-preview-box.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%); */
}
#profile-preview-box.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 */
#profile-preview-box.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);
}
#profile-preview-box.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);
}
#profile-preview-box.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; }
}
#profile-preview-box.theme-tactical-eclipse .btn.primary {
background: linear-gradient(135deg, #00aaff, #0066cc);
color: #fff;
}
#profile-preview-box.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);
}
#profile-preview-box.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); }
}
#profile-preview-box.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);
}
#profile-preview-box.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; }
}
#profile-preview-box.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 */
#profile-preview-box.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;
}
#profile-preview-box.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); }
}
#profile-preview-box.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 */
#profile-preview-box.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;
}
#profile-preview-box.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 */
#profile-preview-box.theme-rainbow-after-rain #profile-preview-box.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); }
}
#profile-preview-box.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);
}
/* 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;
}
#profile-preview-box.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;
}
#profile-preview-box.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 */
#profile-preview-box.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);
}
#profile-preview-box.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 */
#profile-preview-box.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; }
}
#profile-preview-box.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); }
}
/* Green glow */
.theme-digital-rain .btn.primary,
.theme-digital-rain .card:hover {
box-shadow: 0 0 30px rgba(0, 255, 0, 0.6);
}
#profile-preview-box.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);
}
/* Subtle drifting clouds */
#profile-preview-box.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;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Very subtle, realistic snowfall — few flakes, natural drift, irregular */
#profile-preview-box.theme-winter-aurora::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
/* Very few large soft flakes — scattered randomly */
radial-gradient(circle, rgba(255,255,255,0.9) 2px, transparent 2px) 10% 5%/200px 200px no-repeat,
radial-gradient(circle, rgba(240,249,255,0.8) 2.5px, transparent 2.5px) 70% 15%/250px 250px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.7) 1.8px, transparent 1.8px) 40% 40%/180px 180px no-repeat,
radial-gradient(circle, rgba(255,255,255,0.6) 2px, transparent 2px) 85% 60%/220px 220px no-repeat,
radial-gradient(circle, rgba(240,249,255,0.5) 1.5px, transparent 1.5px) 25% 80%/160px 160px no-repeat;
opacity: 0.5;
animation:
snowfall-gentle 40s linear infinite,
snowfall-sway 18s ease-in-out infinite;
}
/* Slow natural fall + gentle random sway */
@keyframes snowfall-gentle {
0% {
background-position:
10% -200px, 70% -250px, 40% -180px, 85% -220px, 25% -160px;
}
100% {
background-position:
10% 1200px, 70% 1250px, 40% 1180px, 85% 1220px, 25% 1160px;
}
}
@keyframes snowfall-sway {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(20px); }
40% { transform: translateX(-15px); }
60% { transform: translateX(25px); }
80% { transform: translateX(-10px); }
}
/* Twinkling stars — gentle random sparkle */
#profile-preview-box.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);
}
#profile-preview-box.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;
/* 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);
}
/* Floating SpongeBob-style flowers — slow drift, gentle rotation, random positions */
#profile-preview-box.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 */
#profile-preview-box.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);
}
#profile-preview-box.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);
}
/* Slow drifting jellyfish + floating starfish particles */
#profile-preview-box.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 */
#profile-preview-box.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);
}
#profile-preview-box.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%; }
}
#profile-preview-box.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 */
--card: rgba(248, 225, 233, 0.78); /* Semi-transparent blush/mint card */
--text: #1a2e1f; /* Deep forest green-gray for contrast & readability */
--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 */
--border: rgba(167, 216, 222, 0.35);
}
/* Smooth, slow color-shifting background (no clouds, no floating eggs/petals/particles) */
#profile-preview-box.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 */
#profile-preview-box.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%; }
}
#profile-preview-box.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 */
#profile-preview-box.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) */
#profile-preview-box.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); }
}
/* Glow effects on interactive elements */
#profile-preview-box.theme-womens-day-empower .btn.primary,
.theme-womens-day-empower .card:hover {
box-shadow: 0 0 35px rgba(147, 51, 234, 0.5), 0 0 60px rgba(16, 185, 129, 0.3);
transition: box-shadow 0.4s ease;
}
#profile-preview-box.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%; }
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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);
}
#profile-preview-box.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);
}
/* Infinite grid lines — tesseract structure */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Pure light glow */
.theme-tesseract-interior .btn.primary,
.theme-tesseract-interior .card:hover {
box-shadow: 0 0 40px rgba(224, 240, 255, 0.6);
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Wave glow on elements */
.theme-millers-planet .btn.primary,
.theme-millers-planet .card:hover {
box-shadow: 0 0 30px rgba(136, 170, 187, 0.4);
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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);
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Red glow on elements */
.theme-crimson-stream .btn.primary,
.theme-crimson-stream .card:hover {
box-shadow: 0 0 40px rgba(229, 9, 20, 0.6);
}
.theme-crimson-stream .btn.primary {
background: linear-gradient(135deg, #e50914, #b20710);
color: #ffffff;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Golden magic glow */
.theme-magic-kingdom .btn.primary,
.theme-magic-kingdom .card:hover {
box-shadow: 0 0 40px rgba(251, 191, 36, 0.6);
}
.theme-magic-kingdom .btn.primary {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #1e3a8a;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Green glow */
.theme-groove-wave .btn.primary,
.theme-groove-wave .card:hover {
box-shadow: 0 0 40px rgba(29, 185, 84, 0.6);
}
.theme-groove-wave .btn.primary {
background: linear-gradient(135deg, #1db954, #1ed760);
color: #000000;
}
#profile-preview-box.theme-prime-horizon {
--bg-primary: #ffffff;
--bg-page: linear-gradient(180deg, #f8f9fa 0%, #ffffff 50%, #f1f3f4 100%);
--card: #ffffff;
--muted: #5f6368;
--accent: #ff9900; /* Amazon orange */
--accent-2: #146eb4; /* Amazon blue */
--glass: rgba(255, 153, 0, 0.08);
}
/* Floating package/box glows */
#profile-preview-box.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); }
}
/* Orange glow */
.theme-prime-horizon .btn.primary,
.theme-prime-horizon .card:hover {
box-shadow: 0 0 30px rgba(255, 153, 0, 0.5);
}
.theme-prime-horizon .btn.primary {
background: linear-gradient(135deg, #ff9900, #146eb4);
color: #ffffff;
}
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Blue glow */
.theme-valve-vault .btn.primary,
.theme-valve-vault .card:hover {
box-shadow: 0 0 40px rgba(102, 192, 244, 0.5);
}
.theme-valve-vault .btn.primary {
background: linear-gradient(135deg, #66c0f4, #1b2838);
color: #ffffff;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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;
}
/* Orange glow */
.theme-satoshi-gold .btn.primary,
.theme-satoshi-gold .card:hover {
box-shadow: 0 0 50px rgba(247, 147, 26, 0.7);
}
.theme-satoshi-gold .btn.primary {
background: linear-gradient(135deg, #f7931a, #ffaa33);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Fire glow */
.theme-inferno-blaze .btn.primary,
.theme-inferno-blaze .card:hover {
box-shadow: 0 0 50px rgba(255, 51, 0, 0.8);
}
.theme-inferno-blaze .btn.primary {
background: linear-gradient(135deg, #ff3300, #ff6600);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Medical glow */
.theme-outbreak-shadow .btn.primary,
.theme-outbreak-shadow .card:hover {
box-shadow: 0 0 40px rgba(0, 204, 153, 0.5);
}
.theme-outbreak-shadow .btn.primary {
background: linear-gradient(135deg, #00cc99, #cc0000);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Virus glow */
.theme-viral-strain .btn.primary,
.theme-viral-strain .card:hover {
box-shadow: 0 0 40px rgba(0, 204, 255, 0.5);
}
.theme-viral-strain .btn.primary {
background: linear-gradient(135deg, #00ccff, #ff3366);
color: #000000;
}
#profile-preview-box.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);
}
/* Drifting arena sand dust + faint eagle shadow */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Red/gold glow */
.theme-gladius-eternal .btn.primary,
.theme-gladius-eternal .card:hover {
box-shadow: 0 0 40px rgba(255, 51, 0, 0.6);
}
.theme-gladius-eternal .btn.primary {
background: linear-gradient(135deg, #ff3300, #ffd700);
color: #000000;
}
#profile-preview-box.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);
}
/* Drifting incense smoke + glowing mosaic particles */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Gold glow */
.theme-purple-palatine .btn.primary,
.theme-purple-palatine .card:hover {
box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
}
.theme-purple-palatine .btn.primary {
background: linear-gradient(135deg, #ffd700, #c0c0c0);
color: #2d004d;
}
#profile-preview-box.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);
}
/* Drifting starfield + hyperspace streaks */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Blue/gold glow */
.theme-force-eternal .btn.primary,
.theme-force-eternal .card:hover {
box-shadow: 0 0 50px rgba(0, 170, 255, 0.6);
}
.theme-force-eternal .btn.primary {
background: linear-gradient(135deg, #00aaff, #ffd700);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Orange/blue glow */
.theme-beskar-creed .btn.primary,
.theme-beskar-creed .card:hover {
box-shadow: 0 0 40px rgba(255, 102, 0, 0.6);
}
.theme-beskar-creed .btn.primary {
background: linear-gradient(135deg, #ff6600, #00aaff);
color: #000000;
}
#profile-preview-box.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);
}
/* Slow privacy shield ripple — orange waves spreading outward */
#profile-preview-box.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);
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Green glow */
.theme-grogus-force .btn.primary,
.theme-grogus-force .card:hover {
box-shadow: 0 0 40px rgba(0, 255, 136, 0.6);
}
.theme-grogus-force .btn.primary {
background: linear-gradient(135deg, #00ff88, #8b5a2b);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Spice glow */
.theme-arrakis-eternal .btn.primary,
.theme-arrakis-eternal .card:hover {
box-shadow: 0 0 40px rgba(255, 136, 0, 0.6);
}
.theme-arrakis-eternal .btn.primary {
background: linear-gradient(135deg, #ff8800, #ffaa33);
color: #000000;
}
#profile-preview-box.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);
}
/* Drifting leaves + sunset pulse */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Orange/blue glow */
.theme-hidden-leaf-legacy .btn.primary,
.theme-hidden-leaf-legacy .card:hover {
box-shadow: 0 0 40px rgba(255, 102, 0, 0.6);
}
.theme-hidden-leaf-legacy .btn.primary {
background: linear-gradient(135deg, #ff6600, #00aaff);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Red/green glow */
.theme-walls-of-freedom .btn.primary,
.theme-walls-of-freedom .card:hover {
box-shadow: 0 0 40px rgba(204, 0, 0, 0.6);
}
.theme-walls-of-freedom .btn.primary {
background: linear-gradient(135deg, #cc0000, #006633);
color: #ffffff;
}
#profile-preview-box.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);
}
/* Drifting dots + ghost glows */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Yellow glow */
.theme-pac-man-fever .btn.primary,
.theme-pac-man-fever .card:hover {
box-shadow: 0 0 40px rgba(255, 255, 0, 0.7);
}
.theme-pac-man-fever .btn.primary {
background: linear-gradient(135deg, #ffff00, #ff8800);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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%; }
}
/* Rainbow glow */
.theme-morphin-legacy .btn.primary,
.theme-morphin-legacy .card:hover {
box-shadow: 0 0 40px rgba(255, 255, 255, 0.7);
}
.theme-morphin-legacy .btn.primary {
background: linear-gradient(135deg, #ff0000, #0000ff, #ffff00);
color: #ffffff;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Green lightning glow */
.theme-fury-vortex .btn.primary,
.theme-fury-vortex .card:hover {
box-shadow: 0 0 40px rgba(0, 255, 51, 0.7);
}
.theme-fury-vortex .btn.primary {
background: linear-gradient(135deg, #00ff33, #00cc00);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Gold/turquoise glow */
.theme-pharaohs-eternity .btn.primary,
.theme-pharaohs-eternity .card:hover {
box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
}
.theme-pharaohs-eternity .btn.primary {
background: linear-gradient(135deg, #ffd700, #00ccaa);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Green/blue glow */
.theme-extraterrestrial-signal .btn.primary,
.theme-extraterrestrial-signal .card:hover {
box-shadow: 0 0 40px rgba(0, 255, 136, 0.6);
}
.theme-extraterrestrial-signal .btn.primary {
background: linear-gradient(135deg, #00ff88, #00aaff);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Silver/red glow */
.theme-knights-valor .btn.primary,
.theme-knights-valor .card:hover {
box-shadow: 0 0 40px rgba(192, 192, 192, 0.6);
}
.theme-knights-valor .btn.primary {
background: linear-gradient(135deg, #c0c0c0, #ff3300);
color: #000000;
}
#profile-preview-box.theme-telegram-aero {
--bg-primary: #ffffff;
--bg-page: linear-gradient(180deg, #f0f8ff 0%, #ffffff 100%);
--card: #ffffff;
--muted: #888888;
--accent: #0088cc; /* Telegram blue */
--accent-2: #ffffff;
--glass: rgba(255, 255, 255, 0.9);
}
/* Drifting paper planes */
#profile-preview-box.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); }
}
/* Blue glow */
.theme-telegram-aero .btn.primary,
.theme-telegram-aero .card:hover {
box-shadow: 0 0 30px rgba(0,136,204,0.5);
}
.theme-telegram-aero .btn.primary {
background: linear-gradient(135deg, #0088cc, #0066aa);
color: #ffffff;
}
#profile-preview-box.theme-meta-horizon {
--bg-primary: #ffffff;
--bg-page: #f0f2f5;
--card: #ffffff;
--muted: #65676b;
--accent: #1877f2; /* Facebook blue */
--accent-2: #ffffff;
--glass: rgba(255, 255, 255, 0.9);
}
/* Subtle friend glow pulse */
#profile-preview-box.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; }
}
/* Blue glow */
.theme-meta-horizon .btn.primary,
.theme-meta-horizon .card:hover {
box-shadow: 0 0 30px rgba(24,119,242,0.4);
}
.theme-meta-horizon .btn.primary {
background: #1877f2;
color: #ffffff;
}
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Blue glow */
.theme-signal-secure .btn.primary,
.theme-signal-secure .card:hover {
box-shadow: 0 0 30px rgba(0,102,255,0.5);
}
.theme-signal-secure .btn.primary {
background: linear-gradient(135deg, #0066ff, #0099ff);
color: #ffffff;
}
#profile-preview-box.theme-flappy-fever {
--bg-primary: #71c5ef;
--bg-page: linear-gradient(180deg, #5ec8ef 0%, #71c5ef 100%);
--card: rgba(255,255,255,0.9);
--accent: #ffcc00; /* Bird yellow */
--accent-2: #00ff00; /* Pipes green */
--glass: rgba(255,255,255,0.8);
}
/* Drifting clouds + pipe hints */
#profile-preview-box.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); }
}
/* Yellow glow */
.theme-flappy-fever .btn.primary,
.theme-flappy-fever .card:hover {
box-shadow: 0 0 30px rgba(255, 204, 0, 0.6);
}
.theme-flappy-fever .btn.primary {
background: linear-gradient(135deg, #ffcc00, #00ff00);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Blue glow */
.theme-playstation-legacy .btn.primary,
.theme-playstation-legacy .card:hover {
box-shadow: 0 0 40px rgba(0,112,209,0.6);
}
.theme-playstation-legacy .btn.primary {
background: linear-gradient(135deg, #0070d1, #003087);
color: #ffffff;
}
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Green glow */
.theme-xbox-arena .btn.primary,
.theme-xbox-arena .card:hover {
box-shadow: 0 0 40px rgba(16,124,16,0.6);
}
.theme-xbox-arena .btn.primary {
background: linear-gradient(135deg, #107c10, #0f7b0f);
color: #ffffff;
}
#profile-preview-box.theme-lego-builder {
--bg-primary: #ffffff;
--bg-page: linear-gradient(180deg, #f0f8ff 0%, #ffffff 100%);
--card: #ffffff;
--muted: #666666;
--text: white;
--accent: #ff0000; /* Red brick */
--accent-2: #ffff00; /* Yellow */
--accent-3: #0000ff; /* Blue */
--accent-4: #00ff00; /* Green */
--glass: rgba(255,255,255,0.9);
}
/* Floating colorful bricks */
#profile-preview-box.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); }
}
/* Rainbow glow */
.theme-lego-builder .btn.primary,
.theme-lego-builder .card:hover {
box-shadow: 0 0 30px rgba(255, 0, 0, 0.4);
}
.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%; }
}
#profile-preview-box.theme-wiki-neutral {
--bg-primary: #ffffff;
--bg-page: #f8f9fa;
--card: #ffffff;
--muted: #54595d;
--accent: #0645ad; /* Wiki blue links */
--accent-2: #3366cc;
--glass: rgba(255,255,255,0.95);
}
/* Subtle page glow */
#profile-preview-box.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; }
}
/* Blue link glow */
.theme-wiki-neutral .btn.primary,
.theme-wiki-neutral .card:hover {
box-shadow: 0 0 20px rgba(6,69,173,0.3);
}
.theme-wiki-neutral .btn.primary {
background: #3366cc;
color: #ffffff;
}
#profile-preview-box.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);
}
/* Blurple pulse */
#profile-preview-box.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; }
}
/* Blurple glow */
.theme-discord-void .btn.primary,
.theme-discord-void .card:hover {
box-shadow: 0 0 40px rgba(88,101,242,0.6);
}
.theme-discord-void .btn.primary {
background: linear-gradient(135deg, #5865f2, #7289da);
color: #ffffff;
}
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Purple glow */
.theme-twitch-stream .btn.primary,
.theme-twitch-stream .card:hover {
box-shadow: 0 0 40px rgba(145,70,255,0.6);
}
.theme-twitch-stream .btn.primary {
background: linear-gradient(135deg, #9146ff, #a970ff);
color: #ffffff;
}
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Orange/blue glow */
.theme-thunder-strike .btn.primary,
.theme-thunder-strike .card:hover {
box-shadow: 0 0 40px rgba(255,102,0,0.6);
}
.theme-thunder-strike .btn.primary {
background: linear-gradient(135deg, #ff6600, #00aaff);
color: #000000;
}
#profile-preview-box.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);
}
/* Drifting smoke + muzzle flashes */
#profile-preview-box.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); }
}
/* Green/orange glow */
.theme-duty-call .btn.primary,
.theme-duty-call .card:hover {
box-shadow: 0 0 40px rgba(0,255,51,0.6);
}
.theme-duty-call .btn.primary {
background: linear-gradient(135deg, #00ff33, #ff6600);
color: #000000;
}
#profile-preview-box.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);
}
/* Drifting snoo/orange particles */
#profile-preview-box.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); }
}
/* Orange glow */
.theme-upvote-glow .btn.primary,
.theme-upvote-glow .card:hover {
box-shadow: 0 0 40px rgba(255, 69, 0, 0.6);
}
.theme-upvote-glow .btn.primary {
background: linear-gradient(135deg, #ff4500, #ff6600);
color: #ffffff;
}
#profile-preview-box.theme-blocky-horizon {
--bg-primary: #87ceeb;
--bg-page: linear-gradient(180deg, #87ceeb 0%, #5a4636 100%);
--card: rgba(255,255,255,0.9);
--accent: #3c6e3c; /* Grass green */
--accent-2: #00ff00;
--glass: rgba(255,255,255,0.8);
}
/* Drifting blocks + pixel particles */
#profile-preview-box.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); }
}
/* Green glow */
.theme-blocky-horizon .btn.primary,
.theme-blocky-horizon .card:hover {
box-shadow: 0 0 40px rgba(60,110,60,0.6);
}
.theme-blocky-horizon .btn.primary {
background: linear-gradient(135deg, #3c6e3c, #00ff00);
color: #ffffff;
}
#profile-preview-box.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);
}
/* Drifting red stars + gold hammer glow */
#profile-preview-box.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); }
}
/* Gold/red glow */
.theme-red-legacy .btn.primary,
.theme-red-legacy .card:hover {
box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
}
.theme-red-legacy .btn.primary {
background: linear-gradient(135deg, #cc0000, #ffd700);
color: #ffffff;
}
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* White glow */
.theme-bird-void .btn.primary,
.theme-bird-void .card:hover {
box-shadow: 0 0 40px rgba(255,255,255,0.6);
}
.theme-bird-void .btn.primary {
background: #ffffff;
color: #000000;
}
#profile-preview-box.theme-pin-board {
--bg-primary: #ffffff;
--bg-page: #f8f9fa;
--card: #ffffff;
--muted: #666666;
--accent: #e60023; /* Pinterest red */
--accent-2: #bd081c;
--glass: rgba(255,255,255,0.9);
}
/* Drifting pin/moodboard glows */
#profile-preview-box.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); }
}
/* Red glow */
.theme-pin-board .btn.primary,
.theme-pin-board .card:hover {
box-shadow: 0 0 40px rgba(230, 0, 35, 0.5);
}
.theme-pin-board .btn.primary {
background: linear-gradient(135deg, #e60023, #bd081c);
color: #ffffff;
}
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Gray/orange glow */
.theme-belt-drift .btn.primary,
.theme-belt-drift .card:hover {
box-shadow: 0 0 40px rgba(255,136,0,0.5);
}
.theme-belt-drift .btn.primary {
background: linear-gradient(135deg, #808080, #ff8800);
color: #ffffff;
}
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Cyan glow */
.theme-neural-void .btn.primary,
.theme-neural-void .card:hover {
box-shadow: 0 0 50px rgba(0,255,255,0.7);
}
.theme-neural-void .btn.primary {
background: linear-gradient(135deg, #00ffff, #00ccff);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Cyan glow */
.theme-grok-cosmos .btn.primary,
.theme-grok-cosmos .card:hover {
box-shadow: 0 0 40px rgba(0,255,255,0.6);
}
.theme-grok-cosmos .btn.primary {
background: linear-gradient(135deg, #00ffff, #00ccff);
color: #000000;
}
#profile-preview-box.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);
}
/* Subtle neural pulse */
#profile-preview-box.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; }
}
/* Green glow */
.theme-chatgpt-glow .btn.primary,
.theme-chatgpt-glow .card:hover {
box-shadow: 0 0 30px rgba(16,163,127,0.5);
}
.theme-chatgpt-glow .btn.primary {
background: linear-gradient(135deg, #10a37f, #0d8a67);
color: #ffffff;
}
#profile-preview-box.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 */
#profile-preview-box.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;
}
#profile-preview-box.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); }
}
/* Pixel glow */
.theme-pixel-grid .btn.primary,
.theme-pixel-grid .card:hover {
box-shadow: 0 0 30px rgba(255,0,255,0.6);
}
.theme-pixel-grid .btn.primary {
background: linear-gradient(135deg, #ff00ff, #00ffff);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Green glow */
.theme-tux-terminal .btn.primary,
.theme-tux-terminal .card:hover {
box-shadow: 0 0 40px rgba(0,255,0,0.6);
}
.theme-tux-terminal .btn.primary {
background: linear-gradient(135deg, #00ff00, #00cc00);
color: #000000;
}
#profile-preview-box.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);
}
/* Drifting window particles */
#profile-preview-box.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); }
}
/* Blue glow */
.theme-windows-horizon .btn.primary,
.theme-windows-horizon .card:hover {
box-shadow: 0 0 30px rgba(0,120,215,0.5);
}
.theme-windows-horizon .btn.primary {
background: linear-gradient(135deg, #0078d7, #005a9e);
color: #ffffff;
}
#profile-preview-box.theme-macos-ventura {
--bg-primary: #f5f5f7;
--bg-page: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
--card: #ffffff;
--muted: #666666;
--accent: #007aff; /* Apple blue */
--accent-2: #ff3b30; /* Red */
--glass: rgba(255,255,255,0.9);
}
/* Floating dock glow */
#profile-preview-box.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; }
}
/* Blue glow */
.theme-macos-ventura .btn.primary,
.theme-macos-ventura .card:hover {
box-shadow: 0 0 30px rgba(0,122,255,0.4);
}
.theme-macos-ventura .btn.primary {
background: linear-gradient(135deg, #007aff, #005ecb);
color: #ffffff;
}
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Red/green glow */
.theme-undead-horizon .btn.primary,
.theme-undead-horizon .card:hover {
box-shadow: 0 0 40px rgba(204, 0, 0, 0.6);
}
.theme-undead-horizon .btn.primary {
background: linear-gradient(135deg, #cc0000, #006600);
color: #ffffff;
}
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Blue/red glow */
.theme-tesla-horizon .btn.primary,
.theme-tesla-horizon .card:hover {
box-shadow: 0 0 40px rgba(0,204,255,0.6);
}
.theme-tesla-horizon .btn.primary {
background: linear-gradient(135deg, #00ccff, #e82127);
color: #000000;
}
#profile-preview-box.theme-falcon-void {
--bg-primary: #000000;
--bg-page: #000000;
--card: #1a0000;
--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 */
#profile-preview-box.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); }
}
/* Flame glow */
.theme-falcon-void .btn.primary,
.theme-falcon-void .card:hover {
box-shadow: 0 0 50px rgba(255,102,0,0.7);
}
.theme-falcon-void .btn.primary {
background: linear-gradient(135deg, #ff6600, #00aaff);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* White/red glow */
.theme-nasa-horizon .btn.primary,
.theme-nasa-horizon .card:hover {
box-shadow: 0 0 40px rgba(255,255,255,0.6);
}
.theme-nasa-horizon .btn.primary {
background: linear-gradient(135deg, #ffffff, #dc143c);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Green/blue glow */
.theme-area51-files .btn.primary,
.theme-area51-files .card:hover {
box-shadow: 0 0 40px rgba(0,255,51,0.6);
}
.theme-area51-files .btn.primary {
background: linear-gradient(135deg, #00ff33, #00aaff);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Blue/orange glow */
.theme-zero-gravity .btn.primary,
.theme-zero-gravity .card:hover {
box-shadow: 0 0 40px rgba(0,170,255,0.6);
}
.theme-zero-gravity .btn.primary {
background: linear-gradient(135deg, #00aaff, #ff8800);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Red/white glow */
.theme-stars-stripes-glory .btn.primary,
.theme-stars-stripes-glory .card:hover {
box-shadow: 0 0 40px rgba(191,10,48,0.6);
}
.theme-stars-stripes-glory .btn.primary {
background: linear-gradient(135deg, #bf0a30, #ffffff);
color: #000000;
}
#profile-preview-box.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);
}
/* Drifting stars + eagle glow */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Gold glow */
.theme-bears-might .btn.primary,
.theme-bears-might .card:hover {
box-shadow: 0 0 40px rgba(255,215,0,0.6);
}
.theme-bears-might .btn.primary {
background: linear-gradient(135deg, #cc0000, #ffd700);
color: #ffffff;
}
#profile-preview-box.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);
}
/* Drifting eagle + gate glow */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Gold glow */
.theme-eagles-honor .btn.primary,
.theme-eagles-honor .card:hover {
box-shadow: 0 0 40px rgba(255,206,0,0.6);
}
.theme-eagles-honor .btn.primary {
background: linear-gradient(135deg, #ffce00, #dd0000);
color: #000000;
}
#profile-preview-box.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);
}
/* Drifting fleur-de-lis + tower glow */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Red/blue glow */
.theme-liberte-glow .btn.primary,
.theme-liberte-glow .card:hover {
box-shadow: 0 0 40px rgba(237,41,57,0.6);
}
.theme-liberte-glow .btn.primary {
background: linear-gradient(135deg, #002395, #ed2939);
color: #ffffff;
}
#profile-preview-box.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;
--accent: #fecc00; /* Yellow cross */
--accent-2: #004b87;
--glass: rgba(255,255,255,0.8);
}
/* Drifting snow + aurora hint */
#profile-preview-box.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); }
}
/* Yellow glow */
.theme-nordic-cross-blue .btn.primary,
.theme-nordic-cross-blue .card:hover {
box-shadow: 0 0 40px rgba(254,204,0,0.6);
}
.theme-nordic-cross-blue .btn.primary {
background: linear-gradient(135deg, #fecc00, #004b87);
color: #000000;
}
#profile-preview-box.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);
}
/* Drifting mist + aurora hint */
#profile-preview-box.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); }
}
/* Red/white glow */
.theme-viking-fjords .btn.primary,
.theme-viking-fjords .card:hover {
box-shadow: 0 0 40px rgba(239,43,45,0.6);
}
.theme-viking-fjords .btn.primary {
background: linear-gradient(135deg, #ef2b2d, #ffffff);
color: #000000;
}
#profile-preview-box.theme-sisu-eternal {
--bg-primary: #ffffff;
--bg-page: linear-gradient(180deg, #ffffff 0%, #e0f0ff 100%);
--card: #ffffff;
--muted: #666666;
--accent: #002f6c; /* Finnish blue */
--accent-2: #ffffff;
--glass: rgba(255,255,255,0.9);
--border: #002f6c;
}
/* Drifting snow + aurora hint */
#profile-preview-box.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); }
}
/* Blue glow */
.theme-sisu-eternal .btn.primary,
.theme-sisu-eternal .card:hover {
box-shadow: 0 0 40px rgba(0,47,108,0.5);
}
.theme-sisu-eternal .btn.primary {
background: #002f6c;
color: #ffffff;
}
#profile-preview-box.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) */
#profile-preview-box.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 */
#profile-preview-box.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);
}
#profile-preview-box.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);
}
/* Slow reality glitch overlay — double vision shift */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
#profile-preview-box.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);
}
/* Slow mirror echo overlay — double reality shift */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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);
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Corona glow */
.theme-lunar-eclipse .btn.primary,
.theme-lunar-eclipse .card:hover {
box-shadow: 0 0 50px rgba(255,51,0,0.7);
}
.theme-lunar-eclipse .btn.primary {
background: linear-gradient(135deg, #ff3300, #00aaff);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Nebula glow */
.theme-cosmic-nebula .btn.primary,
.theme-cosmic-nebula .card:hover {
box-shadow: 0 0 50px rgba(236,72,153,0.6);
}
.theme-cosmic-nebula .btn.primary {
background: linear-gradient(135deg, #ec4899, #8b5cf6);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Green glow */
.theme-radar-sweep .btn.primary,
.theme-radar-sweep .card:hover {
box-shadow: 0 0 40px rgba(0,255,0,0.7);
}
.theme-radar-sweep .btn.primary {
background: linear-gradient(135deg, #00ff00, #00cc00);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Minimal glow */
.theme-void-emptiness .btn.primary,
.theme-void-emptiness .card:hover {
box-shadow: 0 0 20px rgba(255,255,255,0.3);
}
.theme-void-emptiness .btn.primary {
background: #ffffff;
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Golden glow */
.theme-blue-hour-serenity .btn.primary,
.theme-blue-hour-serenity .card:hover {
box-shadow: 0 0 40px rgba(251,191,36,0.5);
}
.theme-blue-hour-serenity .btn.primary {
background: linear-gradient(135deg, #fbbf24, #1e3a8a);
color: #000000;
}
#profile-preview-box.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;
--accent: #ffcc00; /* Woody yellow */
--accent-2: #ff3300; /* Jessie red */
--accent-3: #00cc66; /* Army green */
--glass: rgba(255,255,255,0.8);
}
/* Drifting toys + fluffy clouds */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Colorful glow */
.theme-toy-story-adventure .btn.primary,
.theme-toy-story-adventure .card:hover {
box-shadow: 0 0 40px rgba(255,204,0,0.6);
}
.theme-toy-story-adventure .btn.primary {
background: linear-gradient(135deg, #ffcc00, #ff3300);
color: #000000;
}
#profile-preview-box.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;
--accent: #ff8888; /* Red balloons */
--accent-2: #ffff88; /* Yellow */
--accent-3: #88ccff; /* Blue */
--glass: rgba(255,255,255,0.8);
}
/* Drifting colorful balloons + house */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Colorful balloon glow */
.theme-up-adventure .btn.primary,
.theme-up-adventure .card:hover {
box-shadow: 0 0 40px rgba(255,136,136,0.6);
}
.theme-up-adventure .btn.primary {
background: linear-gradient(135deg, #ff8888, #ffff88);
color: #000000;
}
#profile-preview-box.theme-checkmate-realm {
--bg-primary: #000000;
--bg-page: repeating-linear-gradient(45deg, #000000 0px, #000000 25px, #ffffff 25px, #ffffff 50px);
--card: #ffffff;
--muted: #808080;
--accent: #d4af37; /* Gold pieces */
--accent-2: #c0c0c0; /* Silver pieces */
--glass: rgba(255,255,255,0.9);
}
/* Drifting chess pieces */
#profile-preview-box.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); }
}
/* Checkmate glow */
.theme-checkmate-realm .btn.primary,
.theme-checkmate-realm .card:hover {
box-shadow: 0 0 40px rgba(212,175,55,0.6);
}
.theme-checkmate-realm .btn.primary {
background: linear-gradient(135deg, #d4af37, #c0c0c0);
color: #000000;
}
#profile-preview-box.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);
}
/* Drifting leaves + vines */
#profile-preview-box.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); }
}
/* Emerald glow */
.theme-jungle-canopy .btn.primary,
.theme-jungle-canopy .card:hover {
box-shadow: 0 0 40px rgba(0,204,102,0.6);
}
.theme-jungle-canopy .btn.primary {
background: linear-gradient(135deg, #00cc66, #ffcc00);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Gold/turquoise glow */
.theme-agrabah-nights .btn.primary,
.theme-agrabah-nights .card:hover {
box-shadow: 0 0 40px rgba(255,215,0,0.6);
}
.theme-agrabah-nights .btn.primary {
background: linear-gradient(135deg, #ffd700, #00ccaa);
color: #000000;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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);
}
#profile-preview-box.theme-google-classic {
/* Clean white base — like Google homepage */
--bg-primary: #ffffff;
/* Subtle light gradient for depth */
--bg-page: linear-gradient(180deg, #f8f9fa 0%, #ffffff 40%, #f1f3f4 100%);
/* Cards: Soft white with light shadow */
--card: #ffffff;
/* Muted text: Google gray */
--muted: #5f6368;
/* Main text: Dark Google gray */
--text: white;
/* Primary accent: Google blue */
--accent: #4285f4;
/* Secondary: Google red */
--accent-2: #ea4335;
/* Tertiary: Google yellow */
--accent-3: #fbbc05;
/* Quaternary: Google green */
--accent-4: #34a853;
/* Glass: Very subtle */
--glass: rgba(255, 255, 255, 0.8);
}
/* Subtle floating colorful dots — like Google loading animation */
#profile-preview-box.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 */
#profile-preview-box.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;
}
/* Tag — subtle blue shine */
.theme-google-classic .preview-tag .tag-preview {
box-shadow: 0 0 15px rgba(66, 133, 244, 0.4);
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.heme-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 */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.theme-portal-fluid .preview-tag .tag-preview {
box-shadow: 0 0 25px rgba(0, 255, 255, 0.7);
}
#profile-preview-box.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);
}
/* Retro CRT scanlines + green glow */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Pip-Boy green glow */
#profile-preview-box.theme-vault-dweller .btn.primary,
.theme-vault-dweller .card:hover {
box-shadow: 0 0 40px rgba(0,204,102,0.7);
}
#profile-preview-box.theme-vault-dweller .btn.primary {
background: linear-gradient(135deg, #00cc66, #ffcc00);
color: #000000;
}
#profile-preview-box.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) */
#profile-preview-box.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 */
#profile-preview-box.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) */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Ultra-premium glow */
.theme-ethereal-prism .btn.primary,
.theme-ethereal-prism .card:hover {
box-shadow:
0 0 60px rgba(255,0,255,0.6),
0 0 100px rgba(0,255,255,0.4),
0 0 140px rgba(255,255,51,0.2);
}
.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%; }
}
#profile-preview-box.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;
--accent: #ffd700; /* Cockpit gold instruments */
--accent-2: #ffffff;
--glass: rgba(255,255,255,0.85);
overflow: hidden;
}
/* Deep space to sky gradient with subtle cloud layer below */
#profile-preview-box.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) */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
/* Cockpit instrument glow */
.theme-sky-captain .btn.primary,
.theme-sky-captain .card:hover {
box-shadow: 0 0 40px rgba(255,215,0,0.6);
}
.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;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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; }
}
/* Subtle engine glow & vibration pulse */
.theme-ignition-liftoff .btn.primary,
.theme-ignition-liftoff .card:hover {
box-shadow: 0 0 60px rgba(255,102,0,0.8), 0 0 100px rgba(255,204,0,0.5);
animation: engine-vibe 8s infinite;
}
@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;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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); }
}
#profile-preview-box.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 */
#profile-preview-box.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) */
#profile-preview-box.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%); }
}
#profile-preview-box.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) */
#profile-preview-box.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) */
#profile-preview-box.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) */
#profile-preview-box.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); }
}
/* Bloom on bright elements (real NVG halo effect) */
#profile-preview-box.theme-nods-tango .btn.primary,
#profile-preview-box.theme-nods-tango .card:hover {
box-shadow: 0 0 50px #00ff00, 0 0 80px #00cc00;
animation: nv-bloom 8s infinite;
}
@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 */
#profile-preview-box.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;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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;
}
#profile-preview-box.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) */
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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;
}
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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);
}
#profile-preview-box.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 === */
#profile-preview-box.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) === */
#profile-preview-box.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 */
#profile-preview-box.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 */
#profile-preview-box.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 */
}
#profile-preview-box.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 */
#profile-preview-box.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;
}
#profile-preview-box.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 */
#profile-preview-box.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);
}