/* ═══════════════════════════════════════════════ Mundu Social — Theme definitions Applied via [data-theme="..."] on ═══════════════════════════════════════════════ */ /* ── DARK (default) ── */ [data-theme="dark"] { --bg: #0d0d0f; --surface: #18181b; --text: #e4e4e7; --text-muted: #71717a; --accent: #6366f1; --accent-hover:#4f46e5; --border: #27272a; --danger: #ef4444; --success: #22c55e; --input-bg: #09090b; --font-base: 'Inter', system-ui, sans-serif; } /* ── LIGHT ── */ [data-theme="light"] { --bg: #f4f4f5; --surface: #ffffff; --text: #18181b; --text-muted: #71717a; --accent: #6366f1; --accent-hover:#4f46e5; --border: #e4e4e7; --danger: #dc2626; --success: #16a34a; --input-bg: #f9f9fb; --font-base: 'Inter', system-ui, sans-serif; } [data-theme="light"] .navbar { box-shadow: 0 1px 4px rgba(0,0,0,.08); } [data-theme="light"] .post { box-shadow: 0 1px 3px rgba(0,0,0,.06); } [data-theme="light"] .group-card { box-shadow: 0 2px 8px rgba(0,0,0,.08); } /* ── CYBERPUNK ── */ [data-theme="cyberpunk"] { --bg: #050510; --surface: #0d0d24; --text: #00ff9f; --text-muted: #00cc7a; --accent: #ff00ff; --accent-hover:#cc00cc; --border: #1a1a40; --danger: #ff3366; --success: #00ff9f; --input-bg: #080818; --font-base: 'Share Tech Mono', monospace; } [data-theme="cyberpunk"] .navbar { background: linear-gradient(90deg, #050510, #0d0d24); border-bottom-color: #ff00ff44; box-shadow: 0 0 20px rgba(255,0,255,.15); } [data-theme="cyberpunk"] .group-card { border-color: var(--accent); } [data-theme="cyberpunk"] .group-card:hover { box-shadow: 0 0 24px rgba(255,0,255,.35); } [data-theme="cyberpunk"] .btn-primary { box-shadow: 0 0 12px rgba(255,0,255,.4); } [data-theme="cyberpunk"] .post { border-color: #00ff9f22; } [data-theme="cyberpunk"] .post:hover { border-color: #ff00ff44; } [data-theme="cyberpunk"] h1, [data-theme="cyberpunk"] h2 { text-shadow: 0 0 12px rgba(0,255,159,.4); } /* ── SPIRITUAL ── */ [data-theme="spiritual"] { --bg: #fdf6eb; --surface: #fff9f0; --text: #3d2b1f; --text-muted: #8b6647; --accent: #c9763a; --accent-hover:#a85f28; --border: #e8d5b5; --danger: #c0392b; --success: #27ae60; --input-bg: #fdf6eb; --font-base: 'Lora', Georgia, serif; } [data-theme="spiritual"] .navbar { background: #fff4e0; } [data-theme="spiritual"] .post { border-radius: 16px; } [data-theme="spiritual"] .group-card { background: linear-gradient(135deg, #fff4e0, #ffe5c4); } /* ── RELIGIOUS ── */ [data-theme="religious"] { --bg: #12103a; --surface: #1b1850; --text: #f5e6a3; --text-muted: #c9a84c; --accent: #d4af37; --accent-hover:#b8962a; --border: #2e2960; --danger: #c0392b; --success: #27ae60; --input-bg: #0e0c30; --font-base: 'Cinzel', 'Times New Roman', serif; } [data-theme="religious"] .navbar { background: linear-gradient(90deg, #12103a, #1b1850); border-bottom-color: #d4af3744; } [data-theme="religious"] h1, [data-theme="religious"] h2 { color: var(--accent); text-shadow: 0 0 10px rgba(212,175,55,.3); } [data-theme="religious"] .post { border-color: #d4af3722; } [data-theme="religious"] .group-card { border-color: var(--accent); } /* ── SCIENTIFIC ── */ [data-theme="scientific"] { --bg: #f0f4f8; --surface: #ffffff; --text: #1e2a3a; --text-muted: #4a6278; --accent: #0077cc; --accent-hover:#005fa3; --border: #cdd9e5; --danger: #cc2200; --success: #007744; --input-bg: #f8fafc; --font-base: 'Space Mono', 'Courier New', monospace; } [data-theme="scientific"] .navbar { background: #ffffff; border-bottom: 2px solid #0077cc22; } [data-theme="scientific"] .post { border-left: 3px solid var(--accent); border-radius: 4px; } [data-theme="scientific"] code { background: #e8f0f8; color: #0077cc; } /* ── MEMES ── */ [data-theme="memes"] { --bg: #fffde7; --surface: #ffffff; --text: #1a1a1a; --text-muted: #555; --accent: #ff3d00; --accent-hover:#d03200; --border: #ffcdd2; --danger: #b71c1c; --success: #1b5e20; --input-bg: #fffde7; --font-base: 'Bangers', 'Impact', cursive; } [data-theme="memes"] .navbar { background: #ffeb3b; border-bottom: 3px solid #ff3d00; } [data-theme="memes"] .nav-brand { color: #ff3d00; font-size: 1.5rem; } [data-theme="memes"] .group-card { border: 3px solid #ff3d00; background: #fff9c4; transform-origin: center; } [data-theme="memes"] .group-card:hover { transform: rotate(-1deg) scale(1.05); } [data-theme="memes"] .post { border: 2px solid var(--border); } [data-theme="memes"] h1 { font-size: 2rem; letter-spacing: .05em; } /* ── BRAIN-ROT ── */ [data-theme="brainrot"] { --bg: #1a0030; --surface: #2d0060; --text: #f0f0ff; --text-muted: #cc99ff; --accent: #ff00aa; --accent-hover:#cc0088; --border: #5500aa; --danger: #ff2200; --success: #00ffaa; --input-bg: #11001f; --font-base: 'Righteous', 'Arial Black', cursive; } [data-theme="brainrot"] .navbar { background: linear-gradient(90deg, #1a0030, #3d0080, #1a0030); background-size: 200% 100%; animation: navShift 4s linear infinite; border-bottom: 2px solid #ff00aa; } @keyframes navShift { 0%{background-position:0%} 100%{background-position:200%} } [data-theme="brainrot"] .group-card { border: 2px solid; animation: borderCycle 3s linear infinite; } @keyframes borderCycle { 0% { border-color: #ff00aa; } 33% { border-color: #00ffaa; } 66% { border-color: #00aaff; } 100% { border-color: #ff00aa; } } [data-theme="brainrot"] .post { border-color: #ff00aa44; } [data-theme="brainrot"] .badge { animation: badgePulse 1s ease-in-out infinite alternate; } @keyframes badgePulse { from { transform: scale(1); } to { transform: scale(1.2); } } /* ── Group background helpers ── */ .group-layout { background: var(--group-bg-value); background-size: cover; background-position: center; border-radius: 16px; padding: 1rem; }