@keyframes socialShimmer { 0% { left:-60%; } 100% { left:160%; } } /* Translate-in for the whole login card */ #login-page { animation: loginSlideUp 0.7s cubic-bezier(0.2,1,0.2,1) both; } /* Social buttons row */ .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; } /* Google */ .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); } /* GitHub */ .social-btn-github { background:#1c1f23; color:#fff; border:1px solid rgba(255,255,255,0.13); box-shadow:0 2px 18px rgba(0,0,0,0.55); animation: loginSlideRight 0.55s cubic-bezier(0.2,1,0.2,1) 0.2s both; } .social-btn-github:hover { transform:translateY(-3px); background:#2b2f35; box-shadow:0 6px 28px rgba(255,255,255,0.12); } /* Continue btn ring click fx */ #btn-continue { overflow:hidden; } .btn-ring-fx { position:absolute; width:60px; height:60px; border-radius:50%; border:3px solid rgba(255,80,80,0.85); pointer-events:none; top:50%; left:50%; animation: ringBurst 0.55s cubic-bezier(0.2,1,0.2,1) forwards; } .btn-ring-fx2 { position:absolute; width:45px; height:45px; border-radius:50%; border:2px solid rgba(255,255,255,0.5); pointer-events:none; top:50%; left:50%; animation: ringBurst2 0.45s cubic-bezier(0.2,1,0.2,1) 0.05s forwards; } /* "continue translate" bounce on btn click */ #btn-continue.translate-anim span { display:inline-block; animation: continueTranslate 0.5s cubic-bezier(0.2,1,0.2,1) forwards; } /* Labels above social buttons */ .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; } /* ── Keyboard open fix ── */ 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; /* !important hata diya taaki JS ise badal sake */ align-items: center; /* !important hata diya */ display: flex !important; padding-bottom: env(keyboard-inset-height, 0px); } /* Jab mobile keyboard khulega toh content ko upar slide karne ke liye */ #login-page.keyboard-open { justify-content: flex-start !important; align-items: stretch !important; padding-top: 15px !important; padding-bottom: 120px !important; /* Keyboard ke liye space */ } /* Mobile: input boxes proper size */ @media (max-width: 600px) { .input-box { font-size: 16px !important; /* iOS zoom prevent */ height: 52px !important; } #login-center-wrap { max-width: 100% !important; padding: 0 4px; } } #bg-container { height: 100lvh !important; min-height: 100vh; } /* ===== FORGOT EMAIL TEXT VISIBILITY FIXED FOR MOBILE ===== */ #forgot-email { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background-color: #0a0a0a !important; opacity: 1 !important; caret-color: #ff0000 !important; font-size: 16px !important; /* Mobile zoom-in aur clipping ko rokne ke liye */ font-weight: 600 !important; text-transform: lowercase !important; box-sizing: border-box !important; height: 56px !important; padding: 0 20px !important; display: block !important; width: 100% !important; } #forgot-email::placeholder { color: rgba(255, 255, 255, 0.4) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.4) !important; opacity: 1 !important; } #forgot-email:focus { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background-color: #111111 !important; border-color: #ff0000 !important; } .input-box::placeholder { color: rgba(255,255,255,0.4); opacity: 1; } .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; }

FIRE PRO

ENTER USERNAME OR GMAIL TO START

Forgot Password?

OR
VERIFYING
PLEASE WAIT...