/* ========================================================================== SDN Support Portal — WordPress login screens (wp-login.php) Covers: sign in, set/choose password (the account-setup link), reset password, "password has been reset" confirmation, and lost-password. Same design tokens as portal.css so the whole account journey matches. LOGO PLACEHOLDER: the WordPress logo is removed; the site name renders as text via inline CSS from class-sdn-login.php. When the real logo exists, supply its URL through the `sdn_sp_login_logo_url` filter — no CSS edits needed here. ========================================================================== */ body.login { background: #f6f7f9; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } #login { width: 384px; max-width: 92vw; /* never overflow a narrow phone (core baseline is 320px) */ padding: 6% 0 0; box-sizing: border-box; } /* Session-expired "interim login" modal: don't force our full-page width / bg into it. */ body.interim-login { background: transparent; } body.interim-login #login { width: auto; max-width: none; padding-top: 0; } /* --- Header (logo / site name) ------------------------------------------- */ #login h1 a { margin-bottom: 4px; text-decoration: none; } #login h1 a:focus, #login h1 a:hover { color: #2f5bea; } /* --- The card ------------------------------------------------------------ Target the actual auth forms by id, NOT a bare `form`, so the small language-switcher form in the footer isn't turned into a card. */ #loginform, #registerform, #lostpasswordform, #resetpassform { background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; box-shadow: 0 4px 14px rgba(16, 24, 40, .07); padding: 26px 24px; margin-top: 20px; } /* --- Fields -------------------------------------------------------------- */ .login label { font-size: .88rem; font-weight: 600; color: #15181e; } .login form .input, .login input[type="text"], .login input[type="password"] { border: 1px solid #e4e7ec; border-radius: 8px; padding: 8px 12px; font-size: .95rem; background: #fff; box-shadow: none; margin-top: 6px; } .login form .input:focus, .login input[type="text"]:focus, .login input[type="password"]:focus { border-color: #2f5bea; box-shadow: 0 0 0 3px rgba(47, 91, 234, .12); outline: none; } /* Show/hide password eye */ .login .button.wp-hide-pw { color: #697586; } .login .button.wp-hide-pw:hover { color: #15181e; } /* --- Buttons ------------------------------------------------------------- */ .login .wp-core-ui .button-primary, .wp-core-ui .button-primary { background: #2f5bea; border-color: #2f5bea; border-radius: 8px; text-shadow: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); font-weight: 600; padding: 2px 18px; transition: background .15s ease; } .login .wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { background: #2447bd; border-color: #2447bd; } /* Secondary buttons (e.g. "Generate Password"). Note: `.login` and `.wp-core-ui` are BOTH on , so a descendant selector like `.login .wp-core-ui` never matches — key off `.wp-core-ui` alone. */ .wp-core-ui .button-secondary { border-radius: 8px; border-color: #e4e7ec; color: #15181e; } /* --- Messages ------------------------------------------------------------ */ /* Success / info ("Your password has been reset. Log in", "Check your email") */ #login .message, #login .success, #login .notice { border: 1px solid #a6f0c6; border-left-width: 4px; border-radius: 8px; background: #ecfdf3; color: #05603a; box-shadow: none; } #login .message a, #login .success a { color: #05603a; font-weight: 600; } /* Errors */ #login #login_error, #login .notice-error { border: 1px solid #fecdca; border-left-width: 4px; border-radius: 8px; background: #fef3f2; color: #b42318; box-shadow: none; } #login #login_error a { color: #b42318; font-weight: 600; } /* Password strength meter */ #pass-strength-result { border-radius: 8px; border-color: #e4e7ec; } /* Password hint text */ .pw-weak, #login .indicator-hint { font-size: .82rem; color: #697586; } /* --- Below-card links ----------------------------------------------------- */ #login #nav, #login #backtoblog { font-size: .88rem; text-align: center; } #login #nav a, #login #backtoblog a { color: #697586; } #login #nav a:hover, #login #backtoblog a:hover { color: #2f5bea; } /* Language switcher — kept functional, toned down */ .login .language-switcher { opacity: .7; }