body.login {
background: #000 !important;
overflow-x: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}
:root { --lgd-login-spring: cubic-bezier(.3, 1.4, .5, 1); }
.lgd-login-glow {
position: fixed;
pointer-events: none;
z-index: 0;
border-radius: 50%;
filter: blur(90px);
opacity: .55;
will-change: transform;
}
.lgd-login-glow-a {
width: 620px;
height: 620px;
top: -220px;
left: -160px;
background: radial-gradient(circle, rgba(47,125,255,0.55), transparent 70%);
animation: lgd-login-drift-a 26s ease-in-out infinite;
}
.lgd-login-glow-b {
width: 560px;
height: 560px;
bottom: -240px;
right: -160px;
background: radial-gradient(circle, rgba(130,90,255,0.4), transparent 70%);
animation: lgd-login-drift-b 32s ease-in-out infinite;
}
@keyframes lgd-login-drift-a {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(60px, 40px) scale(1.08); }
}
@keyframes lgd-login-drift-b {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-50px, -30px) scale(1.06); }
}
#login {
position: relative;
z-index: 1;
width: 380px;
max-width: calc(100vw - 32px);
padding: 48px 8px 0;
margin: 6vh auto 0;
opacity: 0;
transform: translateY(18px);
animation: lgd-login-enter .7s cubic-bezier(.16,.8,.3,1) forwards;
}
@keyframes lgd-login-enter {
to { opacity: 1; transform: translateY(0); }
}
.lgd-login-icon {
width: 76px;
height: 76px;
margin: 0 auto 16px;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, rgba(47,125,255,0.35), rgba(130,90,255,0.2));
border: 1px solid rgba(255,255,255,0.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 20px 40px rgba(47,125,255,0.25), 0 0 0 1px rgba(255,255,255,0.04);
color: #fff;
font-size: 22px;
font-weight: 800;
letter-spacing: -.02em;
overflow: hidden;
animation: lgd-login-icon-float 5s ease-in-out infinite;
}
.lgd-login-icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
@keyframes lgd-login-icon-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.lgd-login-welcome {
text-align: center;
font-size: 13px;
color: rgba(255,255,255,0.6);
margin: 0 0 6px;
}
@media (prefers-reduced-motion: reduce) { .lgd-login-icon { animation: none; } }
#login h1 {
text-align: center;
margin: 0 0 28px;
}
#login h1 a {
background-image: none !important;
width: auto !important;
height: auto !important;
display: inline-block;
font-size: 20px;
font-weight: 700;
letter-spacing: -.01em;
color: #fff;
text-indent: 0 !important;
text-decoration: none;
}
.lgd-login-card {
background: rgba(255,255,255,0.06);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 26px;
padding: 8px 26px 26px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 30px 80px rgba(0,0,0,0.55);
}
.lgd-login-tabs {
display: flex;
gap: 3px;
padding: 4px;
margin: 18px 0 22px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 999px;
}
.lgd-login-tabs a {
flex: 1;
text-align: center;
padding: 9px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.6);
text-decoration: none;
transition: background .2s ease, color .2s ease;
}
.lgd-login-tabs a.active {
background: #2f7dff;
color: #fff;
}
.lgd-login-tabs a:not(.active):hover {
color: #fff;
background: rgba(255,255,255,0.08);
}
#loginform, #registerform {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
.login label {
color: rgba(255,255,255,0.82) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
}
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.16) !important;
border-radius: 12px !important;
color: #fff !important;
font-size: 15px !important;
padding: 13px 14px !important;
min-height: 44px !important;
width: 100% !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.18) !important;
box-sizing: border-box !important;
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
border-color: rgba(47,125,255,0.65) !important;
background: rgba(255,255,255,0.1) !important;
outline: none !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.12) !important, 0 0 0 4px rgba(47,125,255,0.14) !important;
}
.login form .input::placeholder { color: rgba(255,255,255,0.35); }
.login .forgetmenot { color: rgba(255,255,255,0.7); }
.login .forgetmenot label { font-weight: 400 !important; display: flex !important; align-items: center; gap: 8px; }
.login .forgetmenot input[type="checkbox"] {
accent-color: #2f7dff;
width: 17px !important;
height: 17px !important;
margin: 0 !important;
cursor: pointer;
}
.login form p.submit { margin-top: 6px; }
.wp-core-ui .button-primary {
background: #2f7dff !important;
border: none !important;
border-radius: 999px !important;
color: #fff !important;
font-size: 14.5px !important;
font-weight: 600 !important;
padding: 11px 20px !important;
height: auto !important;
width: 100%;
text-align: center;
text-shadow: none !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25) !important;
transition: transform .2s var(--lgd-login-spring), box-shadow .2s ease, opacity .2s ease;
position: relative;
}
.wp-core-ui .button-primary:hover {
background: #2f7dff !important;
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3) !important, 0 10px 24px rgba(47,125,255,0.35) !important;
}
.wp-core-ui .button-primary:active {
transform: translateY(0) scale(.97);
}
.wp-core-ui .button-primary.lgd-login-loading {
color: transparent !important;
pointer-events: none;
opacity: .9;
}
.wp-core-ui .button-primary.lgd-login-loading::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 18px; height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid rgba(255,255,255,0.35);
border-top-color: #fff;
border-radius: 50%;
animation: lgd-login-spin .7s linear infinite;
}
@keyframes lgd-login-spin { to { transform: rotate(360deg); } }
.lgd-login-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 20px 0 6px;
color: rgba(255,255,255,0.4);
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: .08em;
}
.lgd-login-divider::before,
.lgd-login-divider::after {
content: "";
flex: 1;
height: 1px;
background: rgba(255,255,255,0.12);
}
.login #lgd-apple-wrap,
.login #lgd-passkey-wrap {
margin-top: 10px !important;
}
.login #lgd-apple-btn,
.login #lgd-passkey-btn {
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.16) !important;
border-radius: 999px !important;
color: #fff !important;
font-size: 14px !important;
font-weight: 600 !important;
padding: 11px 18px !important;
height: auto !important;
text-shadow: none !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
transition: background .2s ease, transform .2s var(--lgd-login-spring);
}
.login #lgd-apple-btn:hover,
.login #lgd-passkey-btn:hover {
background: rgba(255,255,255,0.12) !important;
transform: translateY(-1px);
}
.login #lgd-apple-btn:active,
.login #lgd-passkey-btn:active {
transform: translateY(0) scale(.97);
}
.login #lgd-apple-status,
.login #lgd-passkey-status {
color: rgba(255,255,255,0.55) !important;
}
.login #nav,
.login #backtoblog {
text-align: center;
margin-top: 18px !important;
}
.login #nav a,
.login #backtoblog a {
color: rgba(255,255,255,0.55) !important;
font-size: 12.5px !important;
text-decoration: none !important;
}
.login #nav a:hover,
.login #backtoblog a:hover { color: #fff !important; }
.login #login_error,
.login .message,
.login .success {
background: rgba(255,84,104,0.12) !important;
border: 1px solid rgba(255,84,104,0.3) !important;
border-left: 1px solid rgba(255,84,104,0.3) !important;
border-radius: 14px !important;
color: #fff !important;
box-shadow: none !important;
padding: 12px 16px !important;
font-size: 13px !important;
}
.login .message,
.login .success {
background: rgba(61,220,132,0.12) !important;
border-color: rgba(61,220,132,0.3) !important;
}
.login #login_error a,
.login .message a { color: #fff !important; text-decoration: underline; }
@media (max-width: 420px) {
#login { padding-top: 32px; margin-top: 4vh; }
.lgd-login-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
#login { animation: none; opacity: 1; transform: none; }
.lgd-login-glow { animation: none; }
}
.lgd-login-success-overlay {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 20px;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
}
.lgd-login-success-overlay.show {
opacity: 1;
pointer-events: auto;
}
.lgd-login-success-icon {
width: 88px;
height: 88px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(61,220,132,0.14);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
transform: scale(.6);
transition: transform .5s var(--lgd-login-spring);
}
.lgd-login-success-overlay.show .lgd-login-success-icon {
transform: scale(1);
}
.lgd-login-success-svg { width: 60px; height: 60px; overflow: visible; }
.lgd-login-success-circle {
fill: none;
stroke: #3ddc84;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 220;
stroke-dashoffset: 220;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.lgd-login-success-overlay.show .lgd-login-success-circle {
animation: lgd-login-circle-draw .55s cubic-bezier(.4,0,.2,1) .05s forwards;
}
.lgd-login-success-check {
fill: none;
stroke: #3ddc84;
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 40;
stroke-dashoffset: 40;
}
.lgd-login-success-overlay.show .lgd-login-success-check {
animation: lgd-login-check-draw .3s cubic-bezier(.4,0,.2,1) .5s forwards;
}
@keyframes lgd-login-circle-draw { to { stroke-dashoffset: 0; } }
@keyframes lgd-login-check-draw { to { stroke-dashoffset: 0; } }
.lgd-login-success-text {
color: #fff;
font-size: 15px;
font-weight: 600;
opacity: 0;
transform: translateY(6px);
transition: opacity .3s ease, transform .3s ease;
transition-delay: .6s;
}
.lgd-login-success-overlay.show .lgd-login-success-text {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.lgd-login-success-overlay, .lgd-login-success-icon, .lgd-login-success-circle,
.lgd-login-success-check, .lgd-login-success-text {
animation: none !important;
transition: opacity .2s ease !important;
transform: none !important;
stroke-dashoffset: 0 !important;
}
}
@media (prefers-reduced-transparency: reduce) {
.lgd-login-card, .lgd-login-success-overlay {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.lgd-login-card { background: #121214 !important; }
.lgd-login-success-overlay { background: rgba(0,0,0,0.92) !important; }
}
@media (prefers-contrast: more) {
.lgd-login-card { background: #000 !important; border-color: rgba(255,255,255,0.6) !important; }
.wp-core-ui .button-primary { border: 1px solid #fff !important; }
}