/** * Custom Login Styles * * @package LMH_Features */ :root { --lmh-login-bg: url('https://placehold.co/1337x860'); --lmh-yellow: #FFF200; --lmh-black: #0C0C0C; --lmh-placeholder: #B2B2B6; --lmh-font: 'Radikal', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } html, body.login { height: 100%; } body.login { min-height: 100vh; margin: 0; background: var(--lmh-black); font-family: var(--lmh-font); display: flex; align-items: center; justify-content: center; } /* WP wraps #login in no container — it's a direct child of body on wp-login.php. Flex on body centers it both axes. */ /* Full-viewport background layer sitting behind the card. jquery.ripples attaches its WebGL canvas to this element for mouse ripples. The card's backdrop-filter samples whatever is behind it here. */ .lmh-login-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background-color: var(--lmh-black); background-size: cover; background-position: center center; background-repeat: no-repeat; } .lmh-login-bg__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Card — SVG-displacement glass (with blur fallback) */ .login #login { position: relative; z-index: 10; width: 428px; padding: 40px 51px; margin: 0; background: rgba(12, 12, 12, 0.45); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; box-sizing: border-box; overflow: hidden; isolation: isolate; /* Safari / Firefox fallback — plain blurred backdrop. */ -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); } /* Chromium path — JS adds .lmh-supports-svg-backdrop on when supported. Stacks the SVG displacement filter on top of a lighter blur for depth. */ html.lmh-supports-svg-backdrop .login #login { -webkit-backdrop-filter: url(#lmh-glass) blur(4px) saturate(1.2); backdrop-filter: url(#lmh-glass) blur(4px) saturate(1.2); } /* Hide the inline defs container from layout flow. */ svg.lmh-glass-defs { position: absolute; width: 0; height: 0; pointer-events: none; } /* Keep form content above the card's own stacking context */ .login #login > * { position: relative; z-index: 2; } /* Logo (kept intact — driven by PHP/ACF) */ .login h1 a { background-size: contain; width: 100%; height: 80px; text-indent: -9999px; overflow: hidden; padding-bottom: 15px; display: block; } /* Form panel — transparent, card already provides the surface */ .login form { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; } .login form .forgetmenot { display: flex; float: none; clear: both; width: 100%; margin: 20px 0 24px; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 21px; color: #fff; } .login form .forgetmenot a.lmh-inline-lostpw, .login form .forgetmenot a.lmh-inline-lostpw:hover, .login form .forgetmenot a.lmh-inline-lostpw:focus { color: #fff; font-family: var(--lmh-font); font-weight: 300; font-size: 14px; line-height: 21px; text-decoration: none; text-shadow: none; } .login form .forgetmenot a.lmh-inline-lostpw:hover { text-decoration: underline; } .login form .forgetmenot .lmh-remember { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; } .login form .forgetmenot .lmh-remember label { color: #fff; font-size: 14px; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 21px; margin: 0; } .login form .forgetmenot input[type="checkbox"] { width: 20px; height: 20px; margin: 0; background-color: var(--lmh-black); border: 1px solid #D9D9D9; border-radius: 3.2px; box-shadow: none; appearance: none; -webkit-appearance: none; cursor: pointer; background-repeat: no-repeat; background-position: center; background-size: 17px 17px; } .login form .forgetmenot input[type="checkbox"]:checked { background-image: url("data:image/svg+xml;utf8,"); } .login form .forgetmenot input[type="checkbox"]::before, .login form .forgetmenot input[type="checkbox"]::after { content: none; } .login form p.submit { clear: both; text-align: center; margin-top: 16px; } /* Labels above inputs */ .login label { color: #fff; font-family: var(--lmh-font); font-weight: 300; font-size: 14px; } /* Inputs */ body.login form .input, body.login form input[type="text"], body.login form input[type="password"] { width: 100%; height: 49px; padding: 0 20px; margin: 4px 0 16px; background: var(--lmh-black); color: #fff; font-family: var(--lmh-font); font-weight: 300; font-size: 16px; line-height: 49px; border: 1px solid #D9D9D9; border-radius: 4px; box-shadow: none; outline: none; box-sizing: border-box; transition: border-color 120ms ease, box-shadow 120ms ease; } body.login form .input::placeholder, body.login form input[type="text"]::placeholder, body.login form input[type="password"]::placeholder { color: var(--lmh-placeholder); } body.login form .input:focus, body.login form input[type="text"]:focus, body.login form input[type="password"]:focus { border-color: var(--lmh-yellow); box-shadow: 0 0 12px rgba(255, 242, 0, 0.70); } /* Password visibility toggle (WP's "show/hide password" eye button). WP wraps the input + toggle button in .wp-pwd. We strip the input's bottom margin so .wp-pwd is exactly input-height, making top:50% land on the input's true vertical center. */ .login .wp-pwd { position: relative; margin: 4px 0 16px; } body.login form .wp-pwd input[type="password"], body.login form .wp-pwd input[type="text"] { margin: 0; } .login .wp-pwd button.wp-hide-pw { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; margin: 0; background: transparent; border: 0; box-shadow: none; color: #fff; display: inline-flex; align-items: center; justify-content: center; } .login .wp-pwd button.wp-hide-pw:hover, .login .wp-pwd button.wp-hide-pw:focus { background: transparent; color: #fff; box-shadow: none; } .login .wp-pwd button.wp-hide-pw:active { transform: translateY(-50%); background: transparent; box-shadow: none; } .login .wp-pwd button.wp-hide-pw .dashicons { top: 0; color: #fff; width: 20px; height: 20px; font-size: 20px; line-height: 1; } /* Submit button — pill, yellow, icon slot on the left */ .login .button-primary, .login #wp-submit { display: block; width: 196px; height: 41px; margin: 8px auto 0; padding: 0 24px 0 44px; background-color: var(--lmh-yellow); background-repeat: no-repeat; background-position: 22px center; background-size: 17px 9px; color: var(--lmh-black); font-family: var(--lmh-font); font-weight: 500; font-size: 14px; line-height: 38px; text-shadow: none; border: 1px solid #fff; border-radius: 48px; box-shadow: none; text-align: center; float: none !important; cursor: pointer; } .login .button-primary:hover, .login #wp-submit:hover, .login .button-primary:focus, .login #wp-submit:focus { background-color: var(--lmh-yellow); color: var(--lmh-black); border-color: #fff; box-shadow: 0 0 12px rgba(255, 242, 0, 0.70); } .login .submit { text-align: center; } /* Nav links ("Lost password?" / "Back to site") */ .login #nav, .login #backtoblog { text-align: center; margin: 24px 0 0; padding: 0; text-shadow: none; } .login #backtoblog { margin-top: 12px; } .login #nav a, .login #backtoblog a, .login #nav a:hover, .login #backtoblog a:hover { color: #fff; font-family: var(--lmh-font); font-weight: 300; font-size: 16px; line-height: 16px; text-decoration: none; } .login #nav a:hover, .login #backtoblog a:hover { text-decoration: underline; } /* Messages / errors — keep legible on the dark card */ .login .message, .login .notice, .login #login_error { margin: 0 0 16px; padding: 16px 22px; background: var(--lmh-black); color: var(--lmh-placeholder); font-family: var(--lmh-font); font-weight: 300; font-size: 14px; line-height: 15px; border: 0.5px solid #404040; border-left: 4px solid var(--lmh-yellow); border-radius: 0; box-shadow: none; text-shadow: none; } .login #login_error { color: #fff; }