/* ============================================================================= CASHLEX THEME PACKS — 10 admin-switchable skins, each with dark + light. Selected via data-skin="" on ; mode via existing data-theme="". Each pack overrides: page wash, surfaces, borders, accents, gradients. ============================================================================= */ body { background: var(--page-bg, var(--bg-primary)); } /* Fixed-attachment washes look great but repaint every scroll frame on mobile GPUs — enable only on desktops so low-end phones stay 60fps. */ @media (min-width: 1025px) { body { background-attachment: fixed; } } /* ---------- 1. AURORA GLASS (default — purple→cyan) ---------- */ [data-skin="aurora"] { --accent-primary:#7C3AED; --accent-secondary:#06B6D4; --gradient-main:linear-gradient(135deg,#7C3AED 0%,#4F8DF9 50%,#06B6D4 100%); --gradient-hover:linear-gradient(135deg,#6D28D9,#0891B2); --gradient-subtle:linear-gradient(135deg,rgba(124,58,237,.14),rgba(6,182,212,.14)); --page-bg:radial-gradient(90% 60% at 15% 0%,rgba(124,58,237,.18),transparent 60%),radial-gradient(90% 60% at 90% 100%,rgba(6,182,212,.14),transparent 60%),#0D0E1A; --shadow-glow:0 0 24px rgba(124,58,237,.25); } [data-theme="light"][data-skin="aurora"] { --page-bg:linear-gradient(160deg,#F3F1FF 0%,#EDF4FF 34%,#F0FBFF 62%,#F6F0FF 100%); --bg-card:#FFFFFF; --bg-input:#F7F6FF; --bg-sidebar:#FBFAFF; --border-card:rgba(124,58,237,.16); --border-subtle:rgba(124,58,237,.2); --border-input:rgba(124,58,237,.24); --shadow-md:0 10px 30px -14px rgba(109,40,217,.3); } /* ---------- 2. ROYAL SAPPHIRE & GOLD ---------- */ [data-skin="sapphire"] { --accent-primary:#2563EB; --accent-secondary:#D9A441; --gradient-main:linear-gradient(135deg,#152B66 0%,#1E3A8A 45%,#2563EB 100%); --gradient-hover:linear-gradient(135deg,#1E3A8A,#1D4ED8); --gradient-subtle:linear-gradient(135deg,rgba(37,99,235,.14),rgba(217,164,65,.12)); --page-bg:radial-gradient(90% 60% at 85% 0%,rgba(217,164,65,.12),transparent 55%),linear-gradient(180deg,#0A1228,#080D1E); --bg-card:#101A38; --bg-input:#0C1530; --bg-sidebar:#0C142E; --border-card:rgba(96,140,240,.22); --border-subtle:rgba(96,140,240,.28); } [data-theme="light"][data-skin="sapphire"] { --page-bg:linear-gradient(175deg,#FBFAF6 0%,#F2F5FC 60%,#FBF8F0 100%); --bg-card:#FFFFFF; --bg-input:#F5F7FC; --bg-sidebar:#FAFBFE; --border-card:#DCE3F1; --border-subtle:#D3DCEE; --border-input:#C9D4EA; --accent-primary:#1E3A8A; --shadow-md:0 10px 26px -16px rgba(30,58,138,.35); } /* ---------- 3. SUNSET FUSION ---------- */ [data-skin="sunset"] { --accent-primary:#EC4899; --accent-secondary:#F97316; --gradient-main:linear-gradient(135deg,#F97316 0%,#EC4899 55%,#8B5CF6 100%); --gradient-hover:linear-gradient(135deg,#EA580C,#DB2777); --gradient-subtle:linear-gradient(135deg,rgba(249,115,22,.14),rgba(139,92,246,.14)); --page-bg:radial-gradient(90% 60% at 20% 0%,rgba(236,72,153,.2),transparent 60%),linear-gradient(180deg,#1E0F1A,#160A14); --bg-card:#291423; --bg-input:#20101C; --bg-sidebar:#231120; --border-card:rgba(236,72,153,.24); --border-subtle:rgba(236,72,153,.3); } [data-theme="light"][data-skin="sunset"] { --page-bg:linear-gradient(165deg,#FFF9F5 0%,#FFF1F4 45%,#FAF0FF 100%); --bg-card:#FFFFFF; --bg-input:#FFF7F5; --bg-sidebar:#FFFAF8; --border-card:#F6DCE3; --border-subtle:#F2CFD9; --border-input:#EFC3D0; --shadow-md:0 12px 30px -16px rgba(236,72,153,.35); } /* ---------- 4. EMERALD WEALTH ---------- */ [data-skin="emerald"] { --accent-primary:#10B981; --accent-secondary:#D9A441; --gradient-main:linear-gradient(140deg,#064E3B 0%,#047857 50%,#10B981 100%); --gradient-hover:linear-gradient(135deg,#065F46,#059669); --gradient-subtle:linear-gradient(135deg,rgba(16,185,129,.14),rgba(217,164,65,.12)); --page-bg:radial-gradient(90% 60% at 85% 100%,rgba(217,164,65,.1),transparent 55%),linear-gradient(180deg,#06231C,#041812); --bg-card:#0B2E24; --bg-input:#08251D; --bg-sidebar:#092A20; --border-card:rgba(52,211,153,.22); --border-subtle:rgba(52,211,153,.28); } [data-theme="light"][data-skin="emerald"] { --page-bg:linear-gradient(170deg,#F7FCF9 0%,#EEF9F3 50%,#FBFAF2 100%); --bg-card:#FFFFFF; --bg-input:#F3FAF6; --bg-sidebar:#F8FCFA; --border-card:#D3EDE2; --border-subtle:#C4E6D6; --border-input:#B6DFCB; --accent-primary:#047857; --shadow-md:0 12px 30px -16px rgba(6,95,70,.3); } /* ---------- 5. OBSIDIAN NEON GLASS ---------- */ [data-skin="obsidian"] { --accent-primary:#D946EF; --accent-secondary:#22D3EE; --gradient-main:linear-gradient(135deg,#D946EF 0%,#8B5CF6 50%,#22D3EE 100%); --gradient-hover:linear-gradient(135deg,#C026D3,#06B6D4); --gradient-subtle:linear-gradient(135deg,rgba(217,70,239,.14),rgba(34,211,238,.14)); --page-bg:radial-gradient(120% 80% at 15% 0%,rgba(217,70,239,.2),transparent 55%),radial-gradient(120% 80% at 90% 100%,rgba(34,211,238,.18),transparent 55%),#0A0B14; --bg-card:rgba(255,255,255,.055); --bg-input:rgba(255,255,255,.07); --bg-sidebar:#10111E; --border-card:rgba(255,255,255,.13); --border-subtle:rgba(255,255,255,.18); --shadow-glow:0 0 28px rgba(217,70,239,.3); } [data-theme="light"][data-skin="obsidian"] { --page-bg:radial-gradient(90% 60% at 15% 0%,rgba(217,70,239,.12),transparent 60%),radial-gradient(90% 60% at 90% 100%,rgba(34,211,238,.12),transparent 60%),#FBFAFE; --bg-card:rgba(255,255,255,.85); --bg-input:#F9F5FE; --bg-sidebar:#FCFAFF; --border-card:rgba(217,70,239,.2); --border-subtle:rgba(217,70,239,.26); --border-input:rgba(217,70,239,.3); } /* ---------- 6. PEARL FROST ---------- */ [data-skin="pearl"] { --accent-primary:#818CF8; --accent-secondary:#F472B6; --gradient-main:linear-gradient(135deg,#818CF8 0%,#A78BFA 50%,#F472B6 100%); --gradient-hover:linear-gradient(135deg,#6366F1,#EC4899); --gradient-subtle:linear-gradient(135deg,rgba(129,140,248,.14),rgba(244,114,182,.14)); --page-bg:radial-gradient(90% 60% at 20% 0%,rgba(129,140,248,.16),transparent 60%),radial-gradient(90% 60% at 85% 60%,rgba(244,114,182,.12),transparent 60%),#14162A; --bg-card:rgba(255,255,255,.06); --bg-input:rgba(255,255,255,.08); --bg-sidebar:#191B32; --border-card:rgba(255,255,255,.14); --border-subtle:rgba(255,255,255,.2); } [data-theme="light"][data-skin="pearl"] { --page-bg:radial-gradient(90% 60% at 20% 0%,rgba(147,197,253,.3),transparent 60%),radial-gradient(90% 60% at 85% 30%,rgba(251,207,232,.34),transparent 60%),radial-gradient(90% 70% at 50% 100%,rgba(167,243,208,.3),transparent 60%),#FBFBFE; --bg-card:rgba(255,255,255,.72); --bg-input:rgba(255,255,255,.85); --bg-sidebar:rgba(255,255,255,.8); --border-card:rgba(255,255,255,.95); --border-subtle:#E4E6F4; --border-input:#DADDF0; --shadow-md:0 12px 32px -16px rgba(99,102,241,.22); } /* ---------- 7. MIDNIGHT ROYALE ---------- */ [data-skin="royale"] { --accent-primary:#9333EA; --accent-secondary:#EC4899; --gradient-main:linear-gradient(135deg,#6B21A8 0%,#9333EA 50%,#DB2777 100%); --gradient-hover:linear-gradient(135deg,#7E22CE,#BE185D); --gradient-subtle:linear-gradient(135deg,rgba(147,51,234,.16),rgba(236,72,153,.14)); --page-bg:radial-gradient(110% 70% at 80% 0%,rgba(147,51,234,.3),transparent 60%),linear-gradient(180deg,#170B2B,#0F0720); --bg-card:#221238; --bg-input:#1B0E2E; --bg-sidebar:#1D1033; --border-card:rgba(232,121,249,.22); --border-subtle:rgba(232,121,249,.3); --shadow-glow:0 0 26px rgba(236,72,153,.28); } [data-theme="light"][data-skin="royale"] { --page-bg:linear-gradient(170deg,#FAF5FF 0%,#F5EEFE 55%,#FDF2F8 100%); --bg-card:#FFFFFF; --bg-input:#FAF5FF; --bg-sidebar:#FCF9FF; --border-card:#EBD9F8; --border-subtle:#E2CBF4; --border-input:#D9BEF0; --shadow-md:0 12px 30px -16px rgba(147,51,234,.32); } /* ---------- 8. OCEAN DEPTH ---------- */ [data-skin="ocean"] { --accent-primary:#0EA5E9; --accent-secondary:#2DD4BF; --gradient-main:linear-gradient(135deg,#0C4A6E 0%,#0284C7 55%,#06B6D4 100%); --gradient-hover:linear-gradient(135deg,#075985,#0891B2); --gradient-subtle:linear-gradient(135deg,rgba(14,165,233,.14),rgba(45,212,191,.14)); --page-bg:radial-gradient(90% 60% at 80% 100%,rgba(45,212,191,.12),transparent 55%),linear-gradient(180deg,#071A2B,#051320); --bg-card:#0C2438; --bg-input:#091D2E; --bg-sidebar:#0A2032; --border-card:rgba(56,189,248,.22); --border-subtle:rgba(56,189,248,.28); } [data-theme="light"][data-skin="ocean"] { --page-bg:linear-gradient(170deg,#F4FAFF 0%,#E9F6FD 55%,#F0FDFB 100%); --bg-card:#FFFFFF; --bg-input:#F2F9FE; --bg-sidebar:#F8FCFF; --border-card:#CBE7F6; --border-subtle:#BBDFF2; --border-input:#A9D7EE; --accent-primary:#0284C7; --shadow-md:0 12px 30px -16px rgba(2,132,199,.32); } /* ---------- 9. CARBON VOLT ---------- */ [data-skin="volt"] { --accent-primary:#A3E635; --accent-secondary:#22D3EE; --gradient-main:linear-gradient(135deg,#BEF264 0%,#A3E635 50%,#4ADE80 100%); --gradient-hover:linear-gradient(135deg,#A3E635,#22C55E); --gradient-subtle:linear-gradient(135deg,rgba(163,230,53,.14),rgba(34,211,238,.12)); --page-bg:linear-gradient(180deg,#15171B,#0D0F12); --bg-card:#1B1E24; --bg-input:#171A20; --bg-sidebar:#181B21; --border-card:#2A2E36; --border-subtle:#33383F; --shadow-glow:0 0 24px rgba(163,230,53,.25); } [data-skin="volt"] .btn-primary, [data-skin="volt"] .welcome-hero .btn { color:#14170B; } [data-theme="light"][data-skin="volt"] { --page-bg:linear-gradient(175deg,#FAFDF4 0%,#F4F8EE 60%,#F2FAFB 100%); --bg-card:#FFFFFF; --bg-input:#F7FBF0; --bg-sidebar:#FAFDF6; --border-card:#DDEAC8; --border-subtle:#D2E3B8; --border-input:#C6DCA6; --accent-primary:#65A30D; --gradient-main:linear-gradient(135deg,#84CC16 0%,#65A30D 50%,#0D9488 100%); --shadow-md:0 12px 28px -16px rgba(101,163,13,.3); } /* ---------- 10. ROSE GOLD BLUSH ---------- */ [data-skin="rosegold"] { --accent-primary:#B76E79; --accent-secondary:#D4A373; --gradient-main:linear-gradient(135deg,#9D5560 0%,#B76E79 45%,#D4A373 100%); --gradient-hover:linear-gradient(135deg,#8C4A54,#C08457); --gradient-subtle:linear-gradient(135deg,rgba(183,110,121,.16),rgba(212,163,115,.14)); --page-bg:radial-gradient(90% 60% at 80% 0%,rgba(212,163,115,.12),transparent 55%),linear-gradient(180deg,#231318,#1A0E12); --bg-card:#2E1B21; --bg-input:#26151B; --bg-sidebar:#29171D; --border-card:rgba(232,160,144,.24); --border-subtle:rgba(232,160,144,.3); } [data-theme="light"][data-skin="rosegold"] { --page-bg:linear-gradient(170deg,#FFF8F6 0%,#FDF0EC 55%,#FBF3EE 100%); --bg-card:#FFFFFF; --bg-input:#FDF6F3; --bg-sidebar:#FEFAF8; --border-card:#F3D8D3; --border-subtle:#EECBC4; --border-input:#E8BEB5; --shadow-md:0 12px 30px -16px rgba(183,110,121,.35); } /* ═══════════════════════════════════════════════════════════════════════════ HELAWAVE — reference UI skin (key: "nova"). DARK : deep navy-indigo, electric cyan → blue → indigo accents. LIGHT : airy pastel wash (lavender/pink/mint), pink → purple accents. Selected site-wide via data-skin="nova"; mode via data-theme. ═══════════════════════════════════════════════════════════════════════════ */ /* ---------- DARK ---------- */ [data-skin="nova"] { --accent-primary: #22D3EE; /* electric cyan */ --accent-secondary: #6366F1; /* indigo */ --bg-primary: #090D1C; --bg-card: #0F1730; --bg-input: #0C1226; --bg-sidebar: #0A0F22; --text-primary: #EAF2FF; --text-secondary: #A6B4DC; --text-muted: #6B7BA6; --border-card: rgba(56,189,248,.16); --border-subtle: rgba(56,189,248,.12); --border-input: rgba(56,189,248,.22); --glass-bg: rgba(255,255,255,.03); --glass-hover: rgba(34,211,238,.08); --gradient-main: linear-gradient(135deg,#0EA5E9 0%,#3B82F6 50%,#6366F1 100%); --gradient-hover: linear-gradient(135deg,#0891B2 0%,#4F46E5 100%); --gradient-subtle: linear-gradient(135deg,rgba(34,211,238,.14),rgba(99,102,241,.14)); --gradient-hero: linear-gradient(135deg,#0EA5E9 0%,#3B82F6 45%,#7C3AED 120%); --gradient-nav: linear-gradient(90deg,#3B82F6 0%,#6366F1 100%); --page-bg: radial-gradient(100% 60% at 12% 0%,rgba(59,130,246,.22),transparent 60%), radial-gradient(90% 60% at 96% 100%,rgba(34,211,238,.16),transparent 55%), #090D1C; --shadow-glow: 0 0 26px rgba(34,211,238,.22); --shadow-md: 0 16px 36px -22px rgba(0,0,0,.85); } /* ---------- LIGHT ---------- */ [data-theme="light"][data-skin="nova"] { --accent-primary: #7C3AED; /* violet */ --accent-secondary: #EC4899; /* pink */ --bg-primary: #FAF9FE; --bg-card: #FFFFFF; --bg-input: #F4F2FC; --bg-sidebar: #FFFFFF; --text-primary: #16121F; --text-secondary: #4B4763; --text-muted: #8B87A3; --border-card: rgba(124,58,237,.14); --border-subtle: rgba(124,58,237,.10); --border-input: rgba(124,58,237,.20); --glass-bg: rgba(255,255,255,.8); --glass-hover: rgba(124,58,237,.06); --gradient-main: linear-gradient(135deg,#EC4899 0%,#A855F7 55%,#7C3AED 100%); --gradient-hover: linear-gradient(135deg,#DB2777 0%,#7C3AED 100%); --gradient-subtle: linear-gradient(135deg,rgba(236,72,153,.12),rgba(124,58,237,.12)); --gradient-hero: linear-gradient(135deg,#EC4899 0%,#A855F7 55%,#8B5CF6 100%); --gradient-nav: linear-gradient(90deg,#EC4899 0%,#8B5CF6 100%); --page-bg: radial-gradient(90% 55% at 15% 0%,rgba(167,139,250,.30),transparent 60%), radial-gradient(85% 55% at 90% 6%,rgba(251,207,232,.36),transparent 60%), radial-gradient(95% 70% at 50% 102%,rgba(167,243,208,.26),transparent 60%), #FAF9FE; --shadow-glow: 0 0 26px rgba(168,85,247,.18); --shadow-md: 0 14px 30px -18px rgba(124,58,237,.26); } /* Hero banner uses the mode-aware hero gradient */ [data-skin="nova"] .welcome-hero { background: var(--gradient-hero); border: none; color:#fff; } [data-skin="nova"] .balance-tile { border: 1px solid var(--border-card); } /* ---------- glassmorphism cards ---------- */ [data-skin="nova"] .glass-card, [data-skin="nova"] .card { background: radial-gradient(120% 90% at 0% 0%, rgba(34,211,238,.10), transparent 55%), radial-gradient(120% 90% at 100% 100%, rgba(99,102,241,.12), transparent 55%), linear-gradient(160deg, rgba(28,38,72,.78) 0%, rgba(11,17,34,.92) 100%); border: 1px solid rgba(96,165,250,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 40px -30px rgba(56,189,248,.6), 0 22px 48px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(56,189,248,.04); border-radius: 18px; } @media (min-width: 769px) { [data-skin="nova"] .glass-card, [data-skin="nova"] .card { backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); } } [data-theme="light"][data-skin="nova"] .glass-card, [data-theme="light"][data-skin="nova"] .card { background: radial-gradient(120% 90% at 0% 0%, rgba(236,72,153,.07), transparent 55%), radial-gradient(120% 90% at 100% 100%, rgba(124,58,237,.07), transparent 55%), linear-gradient(160deg, rgba(255,255,255,.94), rgba(249,247,255,.98)); border: 1px solid rgba(124,58,237,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 40px -24px rgba(124,58,237,.28), 0 0 0 1px rgba(124,58,237,.03); } /* Glossy top sheen on every glass card */ [data-skin="nova"] .glass-card::after, [data-skin="nova"] .card::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 44%; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.07), transparent); pointer-events: none; } [data-theme="light"][data-skin="nova"] .glass-card::after, [data-theme="light"][data-skin="nova"] .card::after { background: linear-gradient(180deg, rgba(255,255,255,.55), transparent); } [data-skin="nova"] .card { position: relative; } /* ---------- sidebar active pill (mode-aware) ---------- */ [data-skin="nova"] .nav-item.active, [data-skin="nova"] .nav-item[aria-current="page"] { background: var(--gradient-nav) !important; color: #fff !important; border-radius: 12px; box-shadow: 0 8px 18px -8px rgba(99,102,241,.6); } [data-theme="light"][data-skin="nova"] .nav-item.active, [data-theme="light"][data-skin="nova"] .nav-item[aria-current="page"] { box-shadow: 0 8px 18px -8px rgba(168,85,247,.55); } [data-skin="nova"] .sidebar { border-right: 1px solid rgba(96,130,246,.12); } [data-theme="light"][data-skin="nova"] .sidebar { border-right: 1px solid rgba(124,58,237,.10); } /* ---------- balance tiles ---------- */ [data-skin="nova"] .balance-tile { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px -20px rgba(0,0,0,.8); } [data-theme="light"][data-skin="nova"] .balance-tile { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 26px -18px rgba(124,58,237,.28); } /* ---------- primary buttons (use mode-aware gradient) ---------- */ [data-skin="nova"] .btn-primary { background: var(--gradient-main); border: none; box-shadow: 0 10px 24px -10px rgba(56,189,248,.6); } [data-theme="light"][data-skin="nova"] .btn-primary { box-shadow: 0 10px 24px -10px rgba(168,85,247,.55); } [data-skin="nova"] .btn-primary:hover { filter: brightness(1.08); } /* ---------- inputs on glass ---------- */ [data-skin="nova"] .form-input, [data-skin="nova"] .form-select { background: rgba(10,16,32,.55); border: 1px solid rgba(56,189,248,.22); } [data-theme="light"][data-skin="nova"] .form-input, [data-theme="light"][data-skin="nova"] .form-select { background: #F4F2FC; border: 1px solid rgba(124,58,237,.20); }