.brxe-button { position: relative; overflow: hidden; -webkit-font-smoothing: antialiased; transition: transform 220ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms ease !important; } .brxe-button::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 35%, rgba(255,255,255,.15) 50%, transparent 65% ); background-size: 250% 100%; background-position: 150% 0; transition: background-position 550ms cubic-bezier(.25,.46,.45,.94); pointer-events: none; border-radius: inherit; z-index: 1; } .brxe-button:hover::after { background-position: -50% 0; } .brxe-button:hover { transform: translateY(-2px) scale(1.012); } .brxe-button:active { transform: translateY(0px) scale(.988); transition-duration: 80ms !important; }  .brxe-button.bricks-background-primary { background: linear-gradient(135deg, #0f6fd4 0%, #0a4fa0 100%) !important; color: #ffffff !important; border: none !important; box-shadow: 0 0 0 1px rgba(15,111,212,.6), 0 4px 16px rgba(10,79,160,.35), 0 1px 0 rgba(255,255,255,.08) inset !important; } .brxe-button.bricks-background-primary:hover { background: linear-gradient(135deg, #0f6fd4 0%, #0a4fa0 100%) !important; color: #ffffff !important; box-shadow: 0 0 0 1px rgba(15,111,212,.9), 0 8px 32px rgba(10,111,212,.6), 0 0 56px rgba(10,111,212,.22), 0 1px 0 rgba(255,255,255,.1) inset !important; }  .brxe-button.btn-ghost { background: rgba(15,111,212,.06) !important; color: #7aadee !important; border: none !important; box-shadow: 0 0 0 1px rgba(15,111,212,.35), 0 2px 12px rgba(10,79,160,.1) !important; } .brxe-button.btn-ghost:hover { background: rgba(15,111,212,.14) !important; color: #a8ccf5 !important; box-shadow: 0 0 0 1px rgba(15,111,212,.7), 0 6px 24px rgba(10,79,160,.3), 0 0 44px rgba(10,111,212,.14) !important; }  .brxe-button.btn-dark { background: linear-gradient(135deg, #111118 0%, #0c0c14 100%) !important; color: #e8f0fe !important; border: none !important; box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 4px 16px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.06) inset !important; } .brxe-button.btn-dark:hover { color: #ffffff !important; background: linear-gradient(135deg, #111118 0%, #0c0c14 100%) !important; box-shadow: 0 0 0 1px rgba(15,111,212,.5), 0 8px 28px rgba(0,0,0,.5), 0 0 40px rgba(10,79,160,.2), 0 1px 0 rgba(255,255,255,.08) inset !important; }  .brxe-button.btn-text { background: transparent !important; box-shadow: none !important; color: #4a8fd4 !important; border: none !important; overflow: visible; } .brxe-button.btn-text::after { display: none; } .brxe-button.btn-text::before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: linear-gradient(90deg, #4a8fd4, #7aadee); transition: width 300ms cubic-bezier(.25,.46,.45,.94); } .brxe-button.btn-text:hover { color: #7aadee !important; background: transparent !important; transform: none; box-shadow: none !important; } .brxe-button.btn-text:hover::before { width: 100%; }   .brxe-button.btn-luxury { background: linear-gradient(135deg, #c4956a 0%, #b48261 55%, #9c6b4e 100%) !important; color: #faf7f3 !important; border: none !important; letter-spacing: 0.04em; box-shadow: 0 0 0 1px rgba(180,130,97,.45), 0 4px 20px rgba(156,107,78,.28), 0 1px 0 rgba(255,255,255,.18) inset !important; } .brxe-button.btn-luxury:hover { background: linear-gradient(135deg, #d4a57a 0%, #c4956a 55%, #b48261 100%) !important; color: #ffffff !important; box-shadow: 0 0 0 1px rgba(196,149,106,.7), 0 8px 32px rgba(180,130,97,.4), 0 0 52px rgba(180,130,97,.18), 0 1px 0 rgba(255,255,255,.22) inset !important; }  .brxe-button.btn-gold { background: linear-gradient(135deg, #d4a853 0%, #c49a3c 50%, #b8891e 100%) !important; color: #1a1208 !important; border: none !important; letter-spacing: 0.05em; font-weight: 600 !important; box-shadow: 0 0 0 1px rgba(196,154,60,.5), 0 4px 18px rgba(180,137,30,.3), 0 1px 0 rgba(255,240,180,.35) inset !important; } .brxe-button.btn-gold:hover { background: linear-gradient(135deg, #e0b860 0%, #d4a853 50%, #c49a3c 100%) !important; color: #0f0b04 !important; box-shadow: 0 0 0 1px rgba(212,168,83,.85), 0 8px 32px rgba(196,154,60,.45), 0 0 56px rgba(196,154,60,.2), 0 1px 0 rgba(255,240,180,.4) inset !important; }  .brxe-button.btn-navy { background: linear-gradient(135deg, #1e2d5a 0%, #16223f 100%) !important; color: #f0ece6 !important; border: none !important; letter-spacing: 0.04em; box-shadow: 0 0 0 1px rgba(30,45,90,.6), 0 4px 18px rgba(20,30,60,.35), 0 1px 0 rgba(255,255,255,.06) inset !important; } .brxe-button.btn-navy:hover { background: linear-gradient(135deg, #263570 0%, #1e2d5a 100%) !important; color: #ffffff !important; box-shadow: 0 0 0 1px rgba(180,130,97,.55), 0 8px 28px rgba(20,30,60,.5), 0 0 44px rgba(30,45,90,.25), 0 1px 0 rgba(255,255,255,.08) inset !important; }  .brxe-button.btn-ghost-warm { background: rgba(180,130,97,.06) !important; color: #9c6b4e !important; border: none !important; letter-spacing: 0.04em; box-shadow: 0 0 0 1.5px rgba(180,130,97,.45), 0 2px 10px rgba(180,130,97,.08) !important; } .brxe-button.btn-ghost-warm:hover { background: rgba(180,130,97,.12) !important; color: #7a5038 !important; box-shadow: 0 0 0 1.5px rgba(180,130,97,.8), 0 6px 22px rgba(180,130,97,.2), 0 0 40px rgba(180,130,97,.1) !important; }  .brxe-button.btn-ghost-navy { background: rgba(240,236,230,.05) !important; color: #d4c8b8 !important; border: none !important; letter-spacing: 0.04em; box-shadow: 0 0 0 1.5px rgba(240,236,230,.3), 0 2px 10px rgba(0,0,0,.12) !important; } .brxe-button.btn-ghost-navy:hover { background: rgba(240,236,230,.1) !important; color: #f0ece6 !important; box-shadow: 0 0 0 1.5px rgba(212,168,83,.6), 0 6px 24px rgba(0,0,0,.25), 0 0 40px rgba(212,168,83,.12) !important; }  .brxe-button.btn-text-warm { background: transparent !important; box-shadow: none !important; color: #9c6b4e !important; border: none !important; overflow: visible; letter-spacing: 0.03em; } .brxe-button.btn-text-warm::after { display: none; } .brxe-button.btn-text-warm::before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: linear-gradient(90deg, #b48261, #d4a853); transition: width 300ms cubic-bezier(.25,.46,.45,.94); } .brxe-button.btn-text-warm:hover { color: #7a5038 !important; background: transparent !important; transform: none; box-shadow: none !important; } .brxe-button.btn-text-warm:hover::before { width: 100%; }  @keyframes qn-pulse-luxury { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(180,130,97,.45), 0 4px 20px rgba(156,107,78,.28), 0 1px 0 rgba(255,255,255,.18) inset; } 50% { transform: scale(1.025); box-shadow: 0 0 0 1px rgba(180,130,97,.7), 0 10px 36px rgba(156,107,78,.5), 0 1px 0 rgba(255,255,255,.22) inset; } } @keyframes qn-pulse-gold { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(196,154,60,.5), 0 4px 18px rgba(180,137,30,.3), 0 1px 0 rgba(255,240,180,.35) inset; } 50% { transform: scale(1.025); box-shadow: 0 0 0 1px rgba(196,154,60,.8), 0 10px 36px rgba(180,137,30,.55), 0 1px 0 rgba(255,240,180,.45) inset; } } @keyframes qn-pulse-navy { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(30,45,90,.6), 0 4px 18px rgba(20,30,60,.35), 0 1px 0 rgba(255,255,255,.06) inset; } 50% { transform: scale(1.025); box-shadow: 0 0 0 1px rgba(30,45,90,.9), 0 10px 36px rgba(20,30,60,.6), 0 1px 0 rgba(255,255,255,.1) inset; } } .brxe-button.btn-pulse { transition: none !important; } .brxe-button.btn-pulse.btn-luxury, .brxe-button.btn-pulse.btn-ghost-warm { animation: qn-pulse-luxury 2.2s ease-in-out infinite; } .brxe-button.btn-pulse.btn-gold { animation: qn-pulse-gold 2.2s ease-in-out infinite; } .brxe-button.btn-pulse.btn-navy, .brxe-button.btn-pulse.btn-ghost-navy { animation: qn-pulse-navy 2.2s ease-in-out infinite; } .brxe-button.btn-pulse:hover { animation-play-state: paused; transform: translateY(-2px) scale(1.012); transition: transform 220ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms ease !important; }