@keyframes socialShimmer { 0% { left:-60%; } 100% { left:160%; } } #login-page { animation: loginSlideUp 0.7s cubic-bezier(0.2,1,0.2,1) both; } .social-btns-row { display: flex; gap: 12px; margin-top: 16px; } .social-btn-wrap { flex: 1; position: relative; overflow: hidden; border-radius: 14px; } .social-btn-wrap::after { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent); transform:skewX(-18deg); animation: socialShimmer 3.5s ease-in-out infinite; pointer-events:none; } .social-btn-inner { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:13px 0; box-sizing:border-box; border:none; border-radius:14px; font-size:13px; font-weight:700; letter-spacing:0.4px; cursor:pointer; font-family:'Poppins',sans-serif; transition: transform 0.22s ease, box-shadow 0.22s ease; position:relative; overflow:hidden; } .social-btn-inner:active { transform:scale(0.93) !important; } .social-btn-google { background:#fff; color:#3c4043; box-shadow:0 2px 18px rgba(0,0,0,0.55); animation: loginSlideLeft 0.55s cubic-bezier(0.2,1,0.2,1) 0.2s both; } .social-btn-google:hover { transform:translateY(-3px); box-shadow:0 6px 28px rgba(66,133,244,0.55); } .social-btn-facebook { background:#1877F2; color:#fff; box-shadow:0 2px 18px rgba(0,0,0,0.55); animation: loginSlideUp 0.55s cubic-bezier(0.2,1,0.2,1) 0.24s both; } .social-btn-facebook:hover { transform:translateY(-3px); background:#1966d8; box-shadow:0 6px 28px rgba(24,119,242,0.55); } .social-label { font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.35); text-align:center; margin-bottom:5px; font-family:'Cinzel',serif; } html, body { height: 100%; overflow: hidden; background: #000 !important; } #login-page { height: 100dvh !important; min-height: -webkit-fill-available; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; scroll-behavior: smooth; background: transparent !important; justify-content: center; align-items: center; display: flex !important; padding-bottom: env(keyboard-inset-height, 0px); } #login-page.keyboard-open { justify-content: flex-start !important; padding-top: 15px !important; padding-bottom: 280px !important; } #login-page.keyboard-open #login-title-wrap { display: none !important; } @media (max-width: 600px) { .input-box { font-size: 16px !important; height: 52px !important; } #login-center-wrap { max-width: 100% !important; padding: 0 4px; } .social-btns-row { gap: 7px; } .social-btn-inner { font-size: 11px; gap: 5px; padding: 12px 0; } .social-btn-inner svg { width: 15px; height: 15px; flex-shrink: 0; } } #bg-container { height: 100lvh !important; min-height: 100vh; } .input-box::placeholder { color: rgba(255,255,255,0.4); opacity: 1; } /* 🔴 Empty Box Shake Animation */ @keyframes inputShakeAnim { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); border-color: #ff0033 !important; } 40% { transform: translateX(8px); border-color: #ff0033 !important; } 60% { transform: translateX(-5px); border-color: #ff0033 !important; } 80% { transform: translateX(5px); border-color: #ff0033 !important; } } .box-shake-error { animation: inputShakeAnim 0.4s ease !important; border: 1.5px solid #ff0033 !important; box-shadow: 0 0 15px rgba(255, 0, 51, 0.5) !important; } .input-box:-webkit-autofill, .input-box:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important; -webkit-text-fill-color: #fff !important; }

APEXKR

ENTER USERNAME OR GMAIL TO START

Forgot Password?

OR
VERIFYING
PLEASE WAIT...