/* ═══════════════════════════════════════════════════════════ PROJECT ATLAS — Experimental Themes Activated when is set. Default (no attribute) = original styles untouched. Themes: mono | cumulus | ledger | prism All themes are mobile-first and override original tokens. ═══════════════════════════════════════════════════════════ */ /* Shared: hide the cosmic background & nebulae for non-prism themes so each look feels intentional. */ body[data-exp-theme="mono"] #cosmicBg, body[data-exp-theme="mono"] #nebulae, body[data-exp-theme="cumulus"] #cosmicBg, body[data-exp-theme="cumulus"] #nebulae, body[data-exp-theme="ledger"] #cosmicBg, body[data-exp-theme="ledger"] #nebulae { display: none !important; } /* Smooth transition between themes */ body[data-exp-theme] { transition: background 0.4s ease, color 0.3s ease; } body[data-exp-theme] .card, body[data-exp-theme] .btn, body[data-exp-theme] header, body[data-exp-theme] .modal-content { transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s; } /* ═════════════════════════════════════════════════════════════ 1. MONO — Brutalist Black/white, monospace, sharp corners, single accent. ═════════════════════════════════════════════════════════════ */ body[data-exp-theme="mono"] { --bg: #f4f4f4; --bg2: #e8e8e8; --card: #ffffff; --border: #111111; --text: #0a0a0a; --muted: #555555; --accent: #ff3b00; --income: #0a7d2f; --expense: #c81d25; --shadow: rgba(0,0,0,0.4); font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace; background: var(--bg); color: var(--text); } [data-theme="dark"] body[data-exp-theme="mono"] { --bg: #0a0a0a; --bg2: #141414; --card: #161616; --border: #f5f5f5; --text: #f5f5f5; --muted: #9a9a9a; --accent: #ffea00; } body[data-exp-theme="mono"] header { background: var(--bg) !important; border-bottom: 2px solid var(--border) !important; backdrop-filter: none !important; } body[data-exp-theme="mono"] .logo, body[data-exp-theme="mono"] .logo-text, body[data-exp-theme="mono"] .shimmer-text { font-family: inherit !important; background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; letter-spacing: 0.04em !important; text-transform: uppercase; animation: none !important; } body[data-exp-theme="mono"] .card { background: var(--card) !important; border: 2px solid var(--border) !important; border-radius: 0 !important; box-shadow: 6px 6px 0 var(--border) !important; backdrop-filter: none !important; } body[data-exp-theme="mono"] .balance-card .glow-ring, body[data-exp-theme="mono"] .balance-card::before { display: none !important; } body[data-exp-theme="mono"] .balance-amount { font-family: inherit !important; font-weight: 800; letter-spacing: -0.02em; } body[data-exp-theme="mono"] .btn, body[data-exp-theme="mono"] .sort-btn, body[data-exp-theme="mono"] .atab, body[data-exp-theme="mono"] .type-btn, body[data-exp-theme="mono"] input, body[data-exp-theme="mono"] select, body[data-exp-theme="mono"] textarea { border-radius: 0 !important; border: 2px solid var(--border) !important; background: var(--card) !important; color: var(--text) !important; font-family: inherit !important; box-shadow: none !important; text-transform: uppercase; letter-spacing: 0.05em; } body[data-exp-theme="mono"] .btn.primary, body[data-exp-theme="mono"] .sort-btn.active-sort, body[data-exp-theme="mono"] .atab.active, body[data-exp-theme="mono"] .type-btn.active { background: var(--accent) !important; color: #0a0a0a !important; border-color: var(--border) !important; font-weight: 800; } body[data-exp-theme="mono"] .btn:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--border) !important; } body[data-exp-theme="mono"] .fab { border-radius: 0 !important; background: var(--accent) !important; color: #0a0a0a !important; border: 2px solid var(--border) !important; box-shadow: 5px 5px 0 var(--border) !important; font-family: inherit !important; } body[data-exp-theme="mono"] .modal-content { background: var(--card) !important; border: 2px solid var(--border) !important; border-radius: 0 !important; box-shadow: 8px 8px 0 var(--border) !important; } body[data-exp-theme="mono"] .income-stat { color: var(--income) !important; } body[data-exp-theme="mono"] .expense-stat { color: var(--expense) !important; } /* ═════════════════════════════════════════════════════════════ 2. CUMULUS — Soft Neumorphic Pastels, soft inset/outset shadows, fully rounded. ═════════════════════════════════════════════════════════════ */ body[data-exp-theme="cumulus"] { --bg: #e8ecf3; --bg2: #dce1eb; --card: #e8ecf3; --border: rgba(255,255,255,0.9); --text: #2d3748; --muted: #718096; --accent: #7c83fd; --income: #38b2ac; --expense: #f56565; --neu-light: rgba(255,255,255,0.95); --neu-dark: rgba(163,177,198,0.55); background: var(--bg) !important; color: var(--text); font-family: 'Outfit', sans-serif; } [data-theme="dark"] body[data-exp-theme="cumulus"] { --bg: #2a2d35; --bg2: #25282f; --card: #2a2d35; --border: rgba(255,255,255,0.04); --text: #e2e8f0; --muted: #a0aec0; --neu-light: rgba(60,64,75,0.85); --neu-dark: rgba(0,0,0,0.55); } body[data-exp-theme="cumulus"] header { background: var(--bg) !important; border-bottom: none !important; box-shadow: 0 8px 20px -12px var(--neu-dark); backdrop-filter: none !important; } body[data-exp-theme="cumulus"] .logo-text, body[data-exp-theme="cumulus"] .shimmer-text { background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; animation: none !important; } body[data-exp-theme="cumulus"] .card { background: var(--bg) !important; border: none !important; border-radius: 24px !important; box-shadow: 8px 8px 20px var(--neu-dark), -8px -8px 20px var(--neu-light) !important; backdrop-filter: none !important; } body[data-exp-theme="cumulus"] .balance-card .glow-ring { display: none !important; } body[data-exp-theme="cumulus"] .balance-amount { background: linear-gradient(135deg, var(--accent), var(--income)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } body[data-exp-theme="cumulus"] .btn, body[data-exp-theme="cumulus"] .sort-btn, body[data-exp-theme="cumulus"] .atab, body[data-exp-theme="cumulus"] .type-btn { background: var(--bg) !important; border: none !important; border-radius: 14px !important; color: var(--text) !important; box-shadow: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light) !important; } body[data-exp-theme="cumulus"] .btn:active, body[data-exp-theme="cumulus"] .sort-btn.active-sort, body[data-exp-theme="cumulus"] .atab.active, body[data-exp-theme="cumulus"] .type-btn.active { box-shadow: inset 4px 4px 10px var(--neu-dark), inset -4px -4px 10px var(--neu-light) !important; color: var(--accent) !important; font-weight: 700; } body[data-exp-theme="cumulus"] .btn.primary { background: linear-gradient(135deg, var(--accent), #a78bfa) !important; color: #ffffff !important; box-shadow: 6px 6px 14px var(--neu-dark), -4px -4px 10px var(--neu-light) !important; } body[data-exp-theme="cumulus"] input, body[data-exp-theme="cumulus"] select, body[data-exp-theme="cumulus"] textarea { background: var(--bg) !important; border: none !important; border-radius: 12px !important; color: var(--text) !important; box-shadow: inset 4px 4px 8px var(--neu-dark), inset -4px -4px 8px var(--neu-light) !important; } body[data-exp-theme="cumulus"] .fab { background: linear-gradient(135deg, var(--accent), #a78bfa) !important; color: #fff !important; border: none !important; box-shadow: 8px 8px 18px var(--neu-dark), -6px -6px 14px var(--neu-light) !important; } body[data-exp-theme="cumulus"] .fab-secondary { background: var(--bg) !important; color: var(--accent) !important; } body[data-exp-theme="cumulus"] .modal-content { background: var(--bg) !important; border: none !important; border-radius: 28px !important; box-shadow: 14px 14px 30px var(--neu-dark), -10px -10px 26px var(--neu-light) !important; } /* ═════════════════════════════════════════════════════════════ 3. LEDGER — Editorial / Serif Magazine layout, large serif headlines, restrained. ═════════════════════════════════════════════════════════════ */ body[data-exp-theme="ledger"] { --bg: #f6f1e7; --bg2: #efe7d4; --card: #fdfaf3; --border: #2a241c; --text: #1c1611; --muted: #6b5f4f; --accent: #b8341a; --income: #2c5e3f; --expense: #b8341a; background: var(--bg) !important; color: var(--text); font-family: 'Outfit', sans-serif; } [data-theme="dark"] body[data-exp-theme="ledger"] { --bg: #1a1611; --bg2: #221d16; --card: #221d16; --border: #efe7d4; --text: #efe7d4; --muted: #a89880; --accent: #ff7a5c; --income: #7fc99c; } body[data-exp-theme="ledger"] header { background: var(--bg) !important; border-bottom: 1px solid var(--border) !important; backdrop-filter: none !important; } body[data-exp-theme="ledger"] .logo-text, body[data-exp-theme="ledger"] .shimmer-text { font-family: 'Playfair Display', 'Georgia', serif !important; background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; letter-spacing: 0 !important; font-weight: 700 !important; animation: none !important; text-transform: none; } body[data-exp-theme="ledger"] h2, body[data-exp-theme="ledger"] h3, body[data-exp-theme="ledger"] .balance-amount, body[data-exp-theme="ledger"] .modal-header h3 { font-family: 'Playfair Display', 'Georgia', serif !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } body[data-exp-theme="ledger"] .balance-label, body[data-exp-theme="ledger"] .settings-section-title, body[data-exp-theme="ledger"] .sort-label { font-family: 'Outfit', sans-serif !important; text-transform: uppercase; letter-spacing: 0.25em !important; font-size: 0.65rem !important; color: var(--muted) !important; } body[data-exp-theme="ledger"] .card { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 4px !important; box-shadow: none !important; backdrop-filter: none !important; } body[data-exp-theme="ledger"] .balance-card .glow-ring { display: none !important; } body[data-exp-theme="ledger"] .balance-amount { font-size: clamp(2.5rem, 9vw, 4rem) !important; } body[data-exp-theme="ledger"] .btn, body[data-exp-theme="ledger"] .sort-btn, body[data-exp-theme="ledger"] .atab, body[data-exp-theme="ledger"] .type-btn { background: transparent !important; border: 1px solid var(--border) !important; border-radius: 2px !important; color: var(--text) !important; font-family: 'Outfit', sans-serif !important; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem !important; box-shadow: none !important; } body[data-exp-theme="ledger"] .btn.primary, body[data-exp-theme="ledger"] .sort-btn.active-sort, body[data-exp-theme="ledger"] .atab.active, body[data-exp-theme="ledger"] .type-btn.active { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; font-weight: 600; } body[data-exp-theme="ledger"] input, body[data-exp-theme="ledger"] select, body[data-exp-theme="ledger"] textarea { background: transparent !important; border: none !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; color: var(--text) !important; font-family: 'Outfit', sans-serif !important; } body[data-exp-theme="ledger"] .fab { background: var(--text) !important; color: var(--bg) !important; border: none !important; border-radius: 50% !important; box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important; font-weight: 300 !important; font-family: 'Playfair Display', 'Georgia', serif !important; } body[data-exp-theme="ledger"] .fab-secondary { background: var(--card) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } body[data-exp-theme="ledger"] .modal-content { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 4px !important; box-shadow: 0 30px 80px rgba(0,0,0,0.25) !important; } /* ═════════════════════════════════════════════════════════════ 4. PRISM — Glass + Neon Heavier glass, vibrant cyan/magenta. Keeps cosmic bg. ═════════════════════════════════════════════════════════════ */ body[data-exp-theme="prism"] { --bg: #050816; --bg2: #0a0f24; --card: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.14); --text: #f0f4ff; --muted: #8b92b8; --accent: #00f0ff; --neon-2: #ff2bd6; --neon-3: #b14bff; --income: #00ffae; --expense: #ff3a6c; background: radial-gradient(ellipse at top, #1a1040 0%, #050816 60%) !important; color: var(--text); font-family: 'Outfit', sans-serif; } [data-theme="light"] body[data-exp-theme="prism"] { --bg: #eef2ff; --bg2: #e2e8ff; --card: rgba(255,255,255,0.55); --border: rgba(80,90,160,0.22); --text: #1a1a2e; --muted: #5a6080; --header-bg: rgba(255,255,255,0.65); --modal-bg: rgba(255,255,255,0.85); --card-shadow: 0 12px 40px rgba(80,90,160,0.18); --modal-shadow: 0 30px 80px rgba(80,90,160,0.25); --btn-bg: rgba(255,255,255,0.55); --input-bg: rgba(255,255,255,0.65); background: radial-gradient(ellipse at top, #fde2ff 0%, #e0eaff 60%) !important; } body[data-exp-theme="prism"] { --header-bg: rgba(10,15,36,0.55); --modal-bg: rgba(10,15,36,0.85); --card-shadow: 0 12px 40px rgba(0,0,0,0.45); --modal-shadow: 0 30px 80px rgba(0,0,0,0.7); --btn-bg: rgba(255,255,255,0.05); --input-bg: rgba(255,255,255,0.04); } body[data-exp-theme="prism"] header { background: var(--header-bg) !important; border-bottom: 1px solid var(--border) !important; backdrop-filter: blur(24px) saturate(160%) !important; -webkit-backdrop-filter: blur(24px) saturate(160%) !important; } body[data-exp-theme="prism"] .logo-text, body[data-exp-theme="prism"] .shimmer-text { background: linear-gradient(90deg, var(--accent), var(--neon-2), var(--neon-3), var(--accent)) !important; background-size: 300% 100% !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; animation: prismShift 6s linear infinite !important; filter: drop-shadow(0 0 10px rgba(0,240,255,0.4)); } @keyframes prismShift { to { background-position: 300% 0; } } body[data-exp-theme="prism"] .card { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 22px !important; backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.15) !important; position: relative; overflow: hidden; } body[data-exp-theme="prism"] .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--accent), var(--neon-2), var(--neon-3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.35; pointer-events: none; } body[data-exp-theme="prism"] .balance-amount { background: linear-gradient(120deg, var(--accent), var(--neon-2)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: drop-shadow(0 0 14px rgba(0,240,255,0.45)); } body[data-exp-theme="prism"] .btn, body[data-exp-theme="prism"] .sort-btn, body[data-exp-theme="prism"] .atab, body[data-exp-theme="prism"] .type-btn { background: var(--btn-bg) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 12px !important; backdrop-filter: blur(10px) !important; } body[data-exp-theme="prism"] .btn:hover, body[data-exp-theme="prism"] .sort-btn:hover, body[data-exp-theme="prism"] .atab:hover { border-color: var(--accent) !important; box-shadow: 0 0 14px rgba(0,240,255,0.35) !important; } body[data-exp-theme="prism"] .btn.primary, body[data-exp-theme="prism"] .sort-btn.active-sort, body[data-exp-theme="prism"] .atab.active, body[data-exp-theme="prism"] .type-btn.active { background: linear-gradient(135deg, var(--accent), var(--neon-2)) !important; color: #050816 !important; border: none !important; font-weight: 700; box-shadow: 0 0 22px rgba(255,43,214,0.55), 0 0 12px rgba(0,240,255,0.55) !important; } body[data-exp-theme="prism"] input, body[data-exp-theme="prism"] select, body[data-exp-theme="prism"] textarea { background: var(--input-bg) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; color: var(--text) !important; } body[data-exp-theme="prism"] input:focus, body[data-exp-theme="prism"] select:focus, body[data-exp-theme="prism"] textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(0,240,255,0.18) !important; outline: none !important; } body[data-exp-theme="prism"] .fab { background: linear-gradient(135deg, var(--accent), var(--neon-2)) !important; color: #050816 !important; border: none !important; box-shadow: 0 0 30px rgba(0,240,255,0.6), 0 0 18px rgba(255,43,214,0.5) !important; } body[data-exp-theme="prism"] .fab-secondary { background: linear-gradient(135deg, var(--neon-3), var(--neon-2)) !important; } body[data-exp-theme="prism"] .modal-content { background: var(--modal-bg) !important; border: 1px solid var(--border) !important; border-radius: 22px !important; backdrop-filter: blur(30px) saturate(180%) !important; -webkit-backdrop-filter: blur(30px) saturate(180%) !important; box-shadow: var(--modal-shadow), inset 0 1px 0 rgba(255,255,255,0.12) !important; color: var(--text) !important; } body[data-exp-theme="prism"] .income-stat { color: var(--income) !important; text-shadow: 0 0 8px rgba(0,255,174,0.5); } body[data-exp-theme="prism"] .expense-stat { color: var(--expense) !important; text-shadow: 0 0 8px rgba(255,58,108,0.5); } /* ═════════════════════════════════════════════════════════════ MOBILE TIGHTENING (applies to all experimental themes) ═════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { body[data-exp-theme] header { padding: 10px 12px !important; flex-wrap: wrap; gap: 8px; } body[data-exp-theme] .logo-text { font-size: 0.95rem !important; letter-spacing: 0.04em !important; } body[data-exp-theme] .container { padding: 12px !important; gap: 12px !important; } body[data-exp-theme] .card { padding: 16px !important; } body[data-exp-theme] .balance-amount { font-size: clamp(2rem, 10vw, 3rem) !important; word-break: break-all; } body[data-exp-theme] .balance-meta { flex-wrap: wrap; gap: 6px !important; } body[data-exp-theme] .modal-content { width: 94vw !important; max-width: 94vw !important; padding: 16px !important; } body[data-exp-theme] .sort-bar { flex-wrap: wrap !important; gap: 6px !important; } body[data-exp-theme] .sort-btn { padding: 5px 9px !important; font-size: 0.72rem !important; } body[data-exp-theme] .fab-group { bottom: 16px !important; right: 16px !important; gap: 10px !important; } body[data-exp-theme] .fab { width: 52px !important; height: 52px !important; font-size: 1.4rem !important; } body[data-exp-theme] .analytics-tabs { flex-wrap: wrap; gap: 6px !important; } body[data-exp-theme] .atab { padding: 6px 10px !important; font-size: 0.72rem !important; } body[data-exp-theme="mono"] .card { box-shadow: 4px 4px 0 var(--border) !important; } body[data-exp-theme="mono"] .modal-content { box-shadow: 4px 4px 0 var(--border) !important; } } @media (max-width: 380px) { body[data-exp-theme] .header-controls { gap: 4px !important; } body[data-exp-theme] .hdr-btn { padding: 5px 7px !important; font-size: 0.7rem !important; } }