/* ============================================================================= 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); }