/* * GX BUTTON — Premium Minimal Neon * For: Goondex Dark-Only Theme * Accents: Flamingo Pink (C1), Medium Glow */ .gx-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.6rem; border-radius: var(--radius); background: var(--color-bg-card); border: 1px solid var(--color-border-soft); color: var(--color-text-primary); font-size: 1rem; font-weight: 600; letter-spacing: 0.3px; cursor: pointer; text-decoration: none; user-select: none; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition-fast), box-shadow var(--transition); box-shadow: 0 0 0 rgba(0,0,0,0); /* no glow at rest */ } /* Hover — subtle neon lift */ .gx-btn:hover { border-color: var(--color-brand); background: rgba(255, 79, 163, 0.09); /* light pink wash */ box-shadow: var(--shadow-glow-pink-soft); transform: translateY(-2px); } /* Active press */ .gx-btn:active { transform: translateY(0); box-shadow: inset 0 0 14px rgba(255, 79, 163, 0.25); } /* Disabled */ .gx-btn.disabled, .gx-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* ===== VARIANTS ===== */ /* Primary — Flamingo Pink accented */ .gx-btn-primary { border-color: var(--color-brand); background: linear-gradient( 135deg, rgba(255, 79, 163, 0.14), rgba(255, 79, 163, 0.06) ); color: var(--color-brand); } .gx-btn-primary:hover { background: linear-gradient( 135deg, rgba(255, 79, 163, 0.2), rgba(255, 79, 163, 0.1) ); box-shadow: var(--shadow-glow-pink); color: var(--color-brand-hover); } /* Secondary — clean monochrome button */ .gx-btn-secondary { background: var(--color-bg-elevated); border-color: var(--color-border); color: var(--color-text-secondary); } .gx-btn-secondary:hover { background: var(--color-bg-card); border-color: var(--color-border-soft); color: var(--color-text-primary); box-shadow: var(--shadow-glow-pink-soft); } /* Danger — warnings, deletions */ .gx-btn-danger { border-color: var(--color-warning); color: var(--color-warning); } .gx-btn-danger:hover { background: rgba(255, 170, 136, 0.1); box-shadow: 0 0 18px rgba(255, 170, 136, 0.22); } /* Fit small buttons in stat cards, modals, etc */ .gx-btn-small { padding: 0.45rem 1rem; font-size: 0.85rem; border-radius: var(--radius); } /* Full-width (mobile-friendly) */ .gx-btn-block { width: 100%; display: flex; }