html { height: 100%; } html.login-html { height: 100%; overflow: hidden; } html.login-html body.signin { height: 100%; min-height: 100%; overflow: hidden; } body.signin { height: auto; min-height: 100%; position: relative; overflow-x: hidden; -webkit-font-smoothing: antialiased; background: radial-gradient(ellipse 90% 60% at 10% 20%, rgba(186, 210, 255, 0.5) 0%, transparent 55%), radial-gradient(ellipse 80% 50% at 90% 10%, rgba(253, 224, 200, 0.4) 0%, transparent 50%), radial-gradient(ellipse 70% 60% at 60% 90%, rgba(199, 210, 254, 0.45) 0%, transparent 50%), linear-gradient(128deg, #e3edff 0%, #f0e8ff 30%, #fff5eb 60%, #d9e8ff 100%); background-size: auto, auto, auto, 220% 220%; animation: sparrowBgFlow 20s ease-in-out infinite; color: #334155; } body.signin::before { content: ""; position: fixed; z-index: 0; inset: -6%; background: url(../img/login-bg-city.svg) no-repeat center center; background-size: cover; opacity: 0.45; animation: sparrowCityDrift 32s ease-in-out infinite alternate; pointer-events: none; } .login-ambient { position: fixed; z-index: 1; inset: 0; pointer-events: none; overflow: hidden; } .login-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.65; mix-blend-mode: multiply; } .login-blob--a { width: 42vw; height: 42vw; max-width: 520px; max-height: 520px; background: linear-gradient(135deg, #93c5fd 0%, #c4b5fd 100%); top: -12%; left: -8%; animation: sparrowBlobA 22s ease-in-out infinite; } .login-blob--b { width: 36vw; height: 36vw; background: linear-gradient(200deg, #fda4af 0%, #fcd34d 50%, #a5b4fc 100%); bottom: -10%; right: -5%; animation: sparrowBlobB 26s ease-in-out infinite; } .login-blob--c { width: 24vw; height: 24vw; background: linear-gradient(90deg, #6ee7b7, #3b82f6); top: 40%; left: 35%; opacity: 0.35; animation: sparrowBlobC 18s ease-in-out infinite; } .login-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(100, 116, 139, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 116, 139, 0.06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 20%, transparent 70%); } body.signin::after { content: ""; position: fixed; z-index: 2; inset: 0; background: linear-gradient( 168deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 35%, rgba(248, 250, 252, 0.35) 100% ); pointer-events: none; animation: sparrowVignette 12s ease-in-out infinite; } .signinpanel { position: relative; z-index: 5; width: 820px; max-width: 96%; margin: 7% auto 0; color: #1e293b; } .signinpanel .logopanel { float: none; width: auto; padding: 0; background: 0 0; } .signinpanel .signin-info ul { list-style: none; padding: 0; margin: 20px 0; } .login-brand { max-width: 28em; padding: 8px 0 8px 22px; position: relative; } .login-brand::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 50%, #f59e0b 100%); box-shadow: 0 0 20px rgba(59, 130, 246, 0.35); } .login-brand-eyebrow { font-size: 12px; letter-spacing: 0.14em; color: #64748b; margin: 0 0 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .login-brand-eyebrow__tag { display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #1d4ed8; background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.12)); border: 1px solid rgba(59, 130, 246, 0.25); border-radius: 999px; } .login-brand-title { font-size: 1.65rem; line-height: 1.3; font-weight: 800; margin: 0 0 16px; letter-spacing: 0.03em; background: linear-gradient(110deg, #0f172a 0%, #1e3a5f 40%, #2563eb 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #0f172a; } @supports not (-webkit-background-clip: text) { .login-brand-title { -webkit-text-fill-color: unset; } } .login-brand-desc { font-size: 0.98rem; line-height: 1.75; color: #475569; margin: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } .login-brand-extra { margin: 1.1em 0 0; color: #475569; } .login-brand-extra a { color: #2563eb; font-weight: 600; } .signinpanel .signin-info h4 strong { color: #0f172a; letter-spacing: 0.02em; } .signinpanel .signin-info li { color: #475569; } .signinpanel .form-control { display: block; margin-top: 15px; } .signinpanel .login-form-card { position: relative; background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 100%); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 24px 48px -12px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.6) inset; padding: 30px 28px 28px; animation: sparrowCardFloat 6s ease-in-out infinite; overflow: hidden; } .signinpanel .login-form-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #3b82f6, #8b5cf6, #f59e0b, #3b82f6); background-size: 200% 100%; animation: sparrowShine 8s linear infinite; } .signinpanel .login-form-hint { margin: 6px 0 0; font-size: 12px; color: #94a3b8; letter-spacing: 0.02em; } .signinpanel .login-form-icon { color: #2563eb; margin-right: 6px; opacity: 0.95; } .signinpanel .uname { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.5 12.5c-1-2-2.2-2.5-4.5-2.5S4.5 10.5 3.5 12.5c-.2.4 0 1.3.4 1.3h8.2c.4 0 .6-.9.4-1.3Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 95% center; color: #0f172a; border: 1px solid rgba(148, 163, 184, 0.35); } .signinpanel .pword { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 7a4 4 0 0 1 7.8-1.3h.5A2.5 2.5 0 0 1 14.3 8v4.2A1.3 1.3 0 0 1 13 13.5H3a1.3 1.3 0 0 1-1.2-1.3V8c0-1.2 1-2.2 2.2-2.2H3.5Z'/%3E%3Cpath d='M7.2 2.2a1.2 1.2 0 0 0-1.2 1.2V5h3.5V3.3a1.2 1.2 0 0 0-1.1-1.1h-1.2Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 95% center; color: #0f172a; border: 1px solid rgba(148, 163, 184, 0.35); } .signinpanel .code { background: #fff no-repeat 95% center; color: #0f172a; margin: 0 0 15px 0; border: 1px solid rgba(148, 163, 184, 0.35); } .signinpanel .btn { margin-top: 18px; border: none; border-radius: 8px; font-weight: 600; letter-spacing: 0.12em; text-transform: none; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #7c3aed 100%); background-size: 200% 200%; box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15) inset; transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s; animation: sparrowBtnShimmer 4s ease infinite; } .signinpanel .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37, 99, 235, 0.45); filter: brightness(1.05); } .signinpanel .btn.btn-success { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #7c3aed 100%); } .signinpanel form:not(.login-form-card) { background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 100%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 16px; box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.12); padding: 32px 28px 28px; } .signinpanel h4.no-margins { color: #0f172a; font-weight: 700; font-size: 16px; } .signup-footer { border-top: 1px solid rgba(148, 163, 184, 0.2); margin: 32px 0 0; padding-top: 18px; color: #64748b; font-size: 12px; letter-spacing: 0.04em; } @keyframes sparrowBgFlow { 0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 50%; } 50% { background-position: 0% 0%, 0% 0%, 0% 0%, 100% 50%; } } @keyframes sparrowCityDrift { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.06) translate(-1.5%, 0.8%); } } @keyframes sparrowVignette { 0%, 100% { opacity: 1; } 50% { opacity: 0.88; } } @keyframes sparrowBlobA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, 3%) scale(1.05); } } @keyframes sparrowBlobB { 0%, 100% { transform: translate(0, 0) scale(1.02); } 50% { transform: translate(-3%, -4%) scale(1); } } @keyframes sparrowBlobC { 0%, 100% { transform: translate(0, 0); opacity: 0.3; } 50% { transform: translate(6%, -5%); opacity: 0.45; } } @keyframes sparrowCardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes sparrowShine { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } @keyframes sparrowBtnShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { body.signin, body.signin::before, body.signin::after, .login-blob, .signinpanel .login-form-card, .signinpanel .login-form-card::before, .signinpanel .btn { animation: none !important; } .signinpanel .btn { background: #2563eb; } .signinpanel .login-form-card { transform: none; } } @media screen and (max-width: 768px) { .signinpanel, .signuppanel { margin: 0 auto; width: 380px !important; padding: 20px; } .signinpanel form { margin-top: 20px; } .signup-footer, .signuppanel .form-control { margin-bottom: 10px; } .signup-footer .pull-left, .signup-footer .pull-right { float: none !important; text-align: center; } .signinpanel .signin-info ul { display: none; } .login-blob--a, .login-blob--b { opacity: 0.4; } .login-brand { padding-left: 0; } .login-brand::before { display: none; } } @media screen and (max-width: 320px) { .signinpanel, .signuppanel { margin: 0 20px; width: auto; } } .checkbox-custom { position: relative; padding: 0 15px 0 25px; margin-bottom: 7px; display: inline-block; } .checkbox-custom input[type="checkbox"] { opacity: 0; position: absolute; cursor: pointer; z-index: 2; margin: -6px 0 0 0; top: 50%; left: 3px; } .checkbox-custom label:before { content: ""; position: absolute; top: 50%; left: 0; margin-top: -9px; width: 18px; height: 17px; display: inline-block; border-radius: 4px; border: 1px solid #cbd5e1; background: #fff; } .checkbox-custom input[type="checkbox"]:checked + label:after { position: absolute; display: inline-block; font-family: 'Glyphicons Halflings'; content: "\e013"; top: 42%; left: 3px; margin-top: -5px; font-size: 11px; line-height: 1; width: 16px; height: 16px; color: #2563eb; } .checkbox-custom label { cursor: pointer; line-height: 1.2; font-weight: normal; margin-bottom: 0; text-align: left; color: #475569; } .form-control, .form-control:focus, .has-error .form-control:focus, .has-success .form-control:focus, .has-warning .form-control:focus, .navbar-collapse, .navbar-form, .navbar-form-custom .form-control:focus, .navbar-form-custom .form-control:hover, .open .btn.dropdown-toggle, .panel, .popover, .progress, .progress-bar { box-shadow: none; } .form-control { border-radius: 8px !important; padding: 8px 12px !important; height: 40px !important; } .form-control:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important; }