/* ============================================================================= wp-login.php, in Americon's colours ============================================================================= WHY THIS FILE EXISTS -------------------- themes/americon-bid/page-login.php is the branded sign-in screen, and it is not the only sign-in screen. functions.php redirects wp-login.php to it for an ordinary visit and then deliberately steps aside for five actions core still owns: lostpassword resetpass rp logout postpass Two of those are the last step of a message this portal designed. The password-reset mail in mu-plugins/americon-mail.php spends a paragraph arguing that an unsigned message containing a credential link is indistinguishable from phishing -- and then its button landed the reader on a page with the WordPress logo on it, linking to wordpress.org, above a #2271b1 button. The email said Americon and the page it opened did not, which is the exact suspicion the email was written to defuse. HOW IT IS DONE -------------- The theme's own stylesheet is enqueued ahead of this one -- see mu-plugins/americon-login-screen.php -- so every colour below is the site's token, not a copy of it, and dark mode follows for free. This file only has to do two things: undo the handful of theme rules written for a page with a header and a footer, and put the portal's palette onto core's own selectors. The var() fallbacks are checked against the theme's tokens by tests/test-contrast.php, which reads every shipped stylesheet in mu-plugins/assets/. A fallback that drifts from the token it stands in for fails the build. ========================================================================== */ /* --- Undo what the theme assumes about a page ------------------------------ style.css gives a flex column and a full-viewport minimum so the footer can be pushed to the bottom. There is no footer here: the whole page is one 320px column that core centres with `margin: auto`, and a flex context changes what that margin does. */ body.login { display: block; min-height: 100vh; background-color: var(--am-canvas, #F4F5F7); color: var(--am-text, #1F2530); } /* --- The mark -------------------------------------------------------------- Core draws its logo as a background image on the

's link, with the text pushed off-screen. Replacing the image is therefore the whole job -- the accessible name stays whatever login_headertext filters it to. The art is the theme's navbar lockup, which is white-on-transparent, so it gets the same brand-blue plate the site header gives it in light mode and none in dark. The plate is on the

rather than the so the image can keep `contain` without fighting the padding that makes the plate visible. --am-login-logo is set inline by americon-login-screen.php, because a URL into the active theme cannot be written relative to a file in mu-plugins. / #login h1, #login .wp-login-logo { width: -moz-fit-content; width: fit-content; margin: 0 auto 1.25rem; padding: .4rem .75rem; background: var(--am-blue, #272E7E); border-radius: var(--am-radius, .625rem); } #login h1 a, #login .wp-login-logo a { display: block; width: 190px; height: 72px; background-image: var(--am-login-logo); background-size: contain; background-position: center; background-repeat: no-repeat; / Core sets these from the WordPress mark's own dimensions. / margin: 0; font-size: 0; line-height: 0; } @media (prefers-color-scheme: dark) { #login h1, #login .wp-login-logo { background: none; padding: 0; } } / --- The card -------------------------------------------------------------- Same recipe as .americon-login-card in the theme: surface, hairline, the large radius and the lifted shadow. Two sign-in screens a redirect apart should not be two different objects. / .login form { background: var(--am-surface, #FFFFFF); border: 1px solid var(--am-border, #E2E5EA); border-radius: var(--am-radius-lg, 1rem); box-shadow: var(--am-shadow-lg, 0 12px 40px rgb(16 24 40 / .12)); padding: 1.75rem 1.5rem; margin-top: 1.25rem; } .login form .forgetmenot, .login form p.submit { margin-top: 1rem; } .login label { color: var(--am-text, #1F2530); font-size: .9375rem; font-weight: 600; } / --- Fields ---------------------------------------------------------------- --am-field-border rather than --am-border, and the theme's comment on that token is the reason: a text input here is a white box on a white card with nothing but its outline saying a field exists, which WCAG 1.4.11 puts a 3:1 floor under. Core's own #8c8f94 clears it; the theme's decorative hairline would not, and inheriting the wrong one of the two is exactly the mistake this token was split out to prevent. / .login input[type="text"], .login input[type="password"], .login input[type="email"] { background: var(--am-surface, #FFFFFF); color: var(--am-text, #1F2530); border: 1px solid var(--am-field-border, #7F8792); border-radius: var(--am-radius-sm, .375rem); box-shadow: none; padding: .5rem .75rem; font-size: 1rem; } .login input[type="text"]:focus, .login input[type="password"]:focus, .login input[type="email"]:focus { border-color: var(--am-accent, #272E7E); box-shadow: var(--am-ring, 0 0 0 .25rem rgb(39 46 126 / .25)); outline: none; } .login .wp-pwd .button.wp-hide-pw { color: var(--am-text-muted, #5E6673); } / --- The submit button ----------------------------------------------------- --am-red-cta and not --am-red. The theme's token comment says why: white on the brand red measures 4.38:1 and a button label is not large text, so the fill under a label is one step deeper than the red on the topbar beside it. The same split americon-email.php makes for the button in a message. / .wp-core-ui .button-primary { background: var(--am-red-cta, #E51820); border-color: var(--am-red-cta, #E51820); color: #FFFFFF; text-shadow: none; box-shadow: none; border-radius: var(--am-radius-sm, .375rem); font-weight: 600; } .wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { background: var(--am-red-dark, #C0101D); border-color: var(--am-red-dark, #C0101D); color: #FFFFFF; } .wp-core-ui .button-primary:focus { box-shadow: var(--am-ring, 0 0 0 .25rem rgb(39 46 126 / .25)); } / --- Messages -------------------------------------------------------------- Core marks a notice with a 4px left border and nothing else. The colours are the portal's own: red for a refusal, brand blue for information, green for the "check your email" confirmation that ends the reset flow. / .login .message, .login .notice, .login #login_error { background: var(--am-surface, #FFFFFF); border: 1px solid var(--am-border, #E2E5EA); border-left: 4px solid var(--am-accent, #272E7E); border-radius: var(--am-radius-sm, .375rem); box-shadow: none; color: var(--am-text, #1F2530); padding: .75rem 1rem; } .login #login_error { border-left-color: var(--am-danger, #ED1C24); } .login .message.success, .login .notice-success { border-left-color: var(--am-success, #159B46); } / --- The links under the card --------------------------------------------- "Lost your password?", "← Go to Americon". They inherit the theme's link colour from style.css; all they need here is to be legible at their small size, which core sets in #a7aaad -- 2.6:1 on this canvas. / .login #nav, .login #backtoblog { padding: 0; margin: 1rem 0 0; text-align: center; font-size: .875rem; color: var(--am-text-muted, #5E6673); } .login #nav a, .login #backtoblog a, .login .privacy-policy-page-link a { color: var(--am-accent-ink, #272E7E); } .login #nav a:hover, .login #backtoblog a:hover, .login .privacy-policy-page-link a:hover { color: var(--am-danger-ink, #C0101D); } / --- The brand rule -------------------------------------------------------- The 3px line every page of the portal opens with, and the one thing on this screen a reader arriving from an Americon email will recognise before they have read a word. .americon-topbar is a real element in the theme; here there is no markup to hang it on, so it is drawn on the page itself. */ body.login::before { content: ""; position: fixed; inset: 0 0 auto; height: 3px; background: var(--am-rule, #ED1C24); z-index: 1; }