/** * Advanced Shadow System — Neon Shadows * * Intense glow presets for dark themes. * Reduced intensity on light themes via [data-theme] selectors. */ /* ========================================================================== Neon Primary ========================================================================== */ .shadow-fx-neon-primary { box-shadow: 0 0 calc(8px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 40%, transparent), 0 0 calc(20px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 25%, transparent), 0 0 calc(40px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 10%, transparent); } .shadow-fx-sm.shadow-fx-neon-primary { box-shadow: 0 0 calc(5px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 30%, transparent), 0 0 calc(12px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 15%, transparent); } .shadow-fx-lg.shadow-fx-neon-primary { box-shadow: 0 0 calc(10px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 50%, transparent), 0 0 calc(30px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 30%, transparent), 0 0 calc(60px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 15%, transparent), 0 0 calc(100px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 5%, transparent); } .shadow-fx-hover.shadow-fx-neon-primary::after { box-shadow: 0 0 calc(15px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 60%, transparent), 0 0 calc(40px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 35%, transparent), 0 0 calc(80px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 15%, transparent); } /* ========================================================================== Neon Accent ========================================================================== */ .shadow-fx-neon-accent { box-shadow: 0 0 calc(8px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 40%, transparent), 0 0 calc(20px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 25%, transparent), 0 0 calc(40px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 10%, transparent); } .shadow-fx-sm.shadow-fx-neon-accent { box-shadow: 0 0 calc(5px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 30%, transparent), 0 0 calc(12px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 15%, transparent); } .shadow-fx-lg.shadow-fx-neon-accent { box-shadow: 0 0 calc(10px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 50%, transparent), 0 0 calc(30px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 30%, transparent), 0 0 calc(60px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 15%, transparent), 0 0 calc(100px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 5%, transparent); } .shadow-fx-hover.shadow-fx-neon-accent::after { box-shadow: 0 0 calc(15px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 60%, transparent), 0 0 calc(40px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 35%, transparent), 0 0 calc(80px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 15%, transparent); } /* ========================================================================== Neon Cyan ========================================================================== */ .shadow-fx-neon-cyan { box-shadow: 0 0 calc(8px * var(--shadow-fx-scale, 1)) oklch(0.75 0.15 200 / 0.4), 0 0 calc(20px * var(--shadow-fx-scale, 1)) oklch(0.75 0.15 200 / 0.25), 0 0 calc(40px * var(--shadow-fx-scale, 1)) oklch(0.75 0.15 200 / 0.1); } .shadow-fx-sm.shadow-fx-neon-cyan { box-shadow: 0 0 calc(5px * var(--shadow-fx-scale, 1)) oklch(0.75 0.15 200 / 0.3), 0 0 calc(12px * var(--shadow-fx-scale, 1)) oklch(0.75 0.15 200 / 0.15); } .shadow-fx-lg.shadow-fx-neon-cyan { box-shadow: 0 0 calc(10px * var(--shadow-fx-scale, 1)) oklch(0.75 0.15 200 / 0.5), 0 0 calc(30px * var(--shadow-fx-scale, 1)) oklch(0.75 0.15 200 / 0.3), 0 0 calc(60px * var(--shadow-fx-scale, 1)) oklch(0.75 0.15 200 / 0.15), 0 0 calc(100px * var(--shadow-fx-scale, 1)) oklch(0.75 0.15 200 / 0.05); } /* ========================================================================== Neon Magenta ========================================================================== */ .shadow-fx-neon-magenta { box-shadow: 0 0 calc(8px * var(--shadow-fx-scale, 1)) oklch(0.65 0.25 330 / 0.4), 0 0 calc(20px * var(--shadow-fx-scale, 1)) oklch(0.65 0.25 330 / 0.25), 0 0 calc(40px * var(--shadow-fx-scale, 1)) oklch(0.65 0.25 330 / 0.1); } .shadow-fx-sm.shadow-fx-neon-magenta { box-shadow: 0 0 calc(5px * var(--shadow-fx-scale, 1)) oklch(0.65 0.25 330 / 0.3), 0 0 calc(12px * var(--shadow-fx-scale, 1)) oklch(0.65 0.25 330 / 0.15); } .shadow-fx-lg.shadow-fx-neon-magenta { box-shadow: 0 0 calc(10px * var(--shadow-fx-scale, 1)) oklch(0.65 0.25 330 / 0.5), 0 0 calc(30px * var(--shadow-fx-scale, 1)) oklch(0.65 0.25 330 / 0.3), 0 0 calc(60px * var(--shadow-fx-scale, 1)) oklch(0.65 0.25 330 / 0.15), 0 0 calc(100px * var(--shadow-fx-scale, 1)) oklch(0.65 0.25 330 / 0.05); } /* ========================================================================== Light Theme Reduction ========================================================================== */ :root .shadow-fx-neon-primary, :root .shadow-fx-neon-accent, :root .shadow-fx-neon-cyan, :root .shadow-fx-neon-magenta { opacity: 0.7; } [data-theme*="-dark"] .shadow-fx-neon-primary, [data-theme*="-dark"] .shadow-fx-neon-accent, [data-theme*="-dark"] .shadow-fx-neon-cyan, [data-theme*="-dark"] .shadow-fx-neon-magenta, [data-theme*="-dark"].shadow-fx-neon-primary, [data-theme*="-dark"].shadow-fx-neon-accent, [data-theme*="-dark"].shadow-fx-neon-cyan, [data-theme*="-dark"].shadow-fx-neon-magenta { opacity: 1; }