/* ========================================= Bampaa — Neon accents (scoped, dark-only) Uses tokens from style.css; no :root overrides ========================================= */ /* Scope: put class="neon" on a parent (or ) where you want these */ .neon { --neon-brand: var(--brand); --neon-brand-20: color-mix(in srgb, var(--brand) 20%, transparent); --neon-brand-35: color-mix(in srgb, var(--brand) 35%, transparent); --neon-brand-50: color-mix(in srgb, var(--brand) 50%, transparent); /* surfaces pulled from your dark theme tokens */ --neon-surface: var(--panel); /* same as your card/panel */ --neon-border: var(--border); } /* Reusable neon card */ .neon .neon-card{ border-radius: 16px; background: color-mix(in srgb, var(--neon-surface) 94%, transparent); border: 1px solid var(--neon-border); box-shadow: 0 0 15px var(--neon-brand-20), 0 0 30px var(--neon-brand-20); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow .25s ease, border-color .25s ease, transform .15s ease; will-change: transform, box-shadow; } .neon .neon-card:hover{ box-shadow: 0 0 20px var(--neon-brand-35), 0 0 40px var(--neon-brand-20); border-color: var(--neon-brand-20); } /* Inputs/selects inside cards get a subtle focus glow */ .neon .neon-card input, .neon .neon-card select, .neon .neon-card .Select-control, .neon .neon-card .dash-dropdown, .neon .neon-card textarea{ border-radius: 12px !important; border: 1px solid var(--neon-border) !important; background: rgba(255,255,255,.02) !important; } .neon .neon-card input:focus, .neon .neon-card select:focus, .neon .neon-card textarea:focus{ outline: none !important; box-shadow: 0 0 0 3px var(--neon-brand-20) !important; border-color: var(--neon-brand-35) !important; } /* Primary button glow (like your Sign In) */ .neon .neon-btn{ border-radius: 14px; background: var(--neon-brand); color: #07231f; padding: 10px 16px; font-weight: 700; border: 0; box-shadow: 0 0 20px var(--neon-brand-35), inset 0 -2px 0 rgba(0,0,0,.15); transition: transform .12s ease, box-shadow .25s ease, filter .25s ease; } .neon .neon-btn:hover{ filter: brightness(1.05); } .neon .neon-btn:active{ transform: translateY(1px); } /* “Pill” chips for categories */ .neon .neon-pill{ border-radius: 999px; padding: 8px 14px; border: 1px solid var(--neon-border); background: rgba(255,255,255,.03); box-shadow: 0 0 20px rgba(0,0,0,.15); } .neon .neon-pill.is-active{ border-color: var(--neon-brand-20); box-shadow: 0 0 24px var(--neon-brand-20); } /* Optional: reduce motion */ @media (prefers-reduced-motion: reduce){ .neon .neon-card, .neon .neon-btn{ transition: none; } }