/* * The neutral login screen: a plain card carrying the site's own name. * * TWO RULES, THE SAME TWO assets/admin-ui.css KEEPS. * * NOTHING FUNCTIONAL IS EVER HIDDEN, WITH ONE OWNER-DIRECTED EXCEPTION. "Lost * your password?", "Go to site", the language switcher and the privacy link are * all still on the page and still work; a control somebody cannot find on a * login screen is a locked-out customer, which is the one support call this * service must never cause. The exception (owner, 12 Aug 2026) is the * "Remember me" row: hiding it stops nobody signing in — an unticked box is * the browser's ordinary state — and its only consequence is that a session * runs WordPress's default length instead of fourteen days. The test suite * holds this file to EXACTLY that one hidden element, so a second one cannot * arrive quietly. * * THE FORM IS CORE'S AND IS NOT REBUILT. Nothing here changes what an input is * or where a label sits — what is set is colour, radius, border, shadow, * spacing and type. WordPress's own login stylesheet does the layout, so a core * update that moves something moves it here too rather than colliding with a * layout of ours. * * WHAT DOES CHANGE IS THE BRANDING, and it changes by DRAWING rather than by * hiding: core's `

` carries the WordPress logo as a background image and * pushes its own text out of sight with a text indent, so this takes the image * off and brings the text back. The text is the site's name, put there by * class-login.php through core's own `login_headertext` filter. * * Everything is under `body.vertanet-care-login`, the class class-login.php * adds, so nothing in this file can reach any other screen. Loaded only while * `modernise_login` is on, and it pairs with the challenge widget * (class-captcha.php) through the `--cap-*` custom properties at the end: with * the challenge switched off there is simply nothing there to style. * * The palette is the one assets/admin-colors.css uses — navy, and brand teal * #50c5e1 for the accent — so a person who signs in here and lands in wp-admin * with `modernise_admin_ui` on has been through one design and not two. */ body.login.vertanet-care-login { --vc-canvas: #eef2f6; --vc-ink: #182b3d; --vc-muted: #5b6b7c; --vc-line: #dfe5eb; --vc-accent: #2b87a3; --vc-accent-bright: #50c5e1; --vc-radius: 10px; --vc-radius-sm: 6px; --vc-shadow: 0 1px 2px rgba(16, 28, 40, 0.06), 0 8px 24px rgba(16, 28, 40, 0.08); --vc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--vc-canvas); color: var(--vc-ink); font-family: var(--vc-font); /* NO LAYOUT OF OUR OWN, which is a deliberate reversal (12 Aug 2026). 0.17.2 made this body a centred flex column — `display: flex`, `flex-direction: column`, `align-items: center`, `min-height: 100vh`, plus `order: 1` on the card and `order: 2` on the language switcher — and all of it existed to lift the privacy link to the bottom of the page, which it never could: core prints that link INSIDE the card (see the rule at the foot of this file). With the link staying where core puts it, every piece of that column was doing something core already does. `#login` centres on its own `width: 320px` with `margin: auto`. The switcher is a full-width block whose `margin: 0 auto` and `text-align: center` centre what is in it. Core's `html, body { height: 100%; margin: 0; padding: 0 }` fills a short viewport, and a body background paints the canvas whatever its height. The card and the switcher are the only two body-level pieces that take part in layout — core's other one, the `screen-reader-text` heading, is `position: absolute` — and the markup already prints them in that order, so 1 and 2 sorted nothing. It was also ACTIVELY WRONG about other people's markup. A flex item's default order is 0, which sorts BEFORE anything numbered, so any plugin printing visible markup on `login_footer` — the hook class-captcha.php uses itself — had it hoisted ABOVE the login card by this stylesheet. Core's block flow puts it after the card, where the plugin meant it to go. The test suite pins both halves: no flex column here, and no `order` in the file. */ } /* -------------------------------------------------------------------------- * The header: the site's name where the logo was * ----------------------------------------------------------------------- */ body.login.vertanet-care-login h1 a { background-image: none; background-size: auto; width: auto; height: auto; margin: 0 auto 4px; padding: 0; text-indent: 0; overflow: visible; font-family: var(--vc-font); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--vc-ink); text-decoration: none; outline-offset: 4px; } body.login.vertanet-care-login h1 a:hover, body.login.vertanet-care-login h1 a:focus { color: var(--vc-accent); box-shadow: none; } /* -------------------------------------------------------------------------- * The card * ----------------------------------------------------------------------- */ body.login.vertanet-care-login form { margin-top: 20px; padding: 24px; background: #ffffff; border: 1px solid var(--vc-line); border-radius: var(--vc-radius); box-shadow: var(--vc-shadow); font-family: var(--vc-font); } body.login.vertanet-care-login form label, body.login.vertanet-care-login form p, body.login.vertanet-care-login .forgetmenot label { color: var(--vc-ink); font-size: 14px; } /* The one hidden element, by the owner's direction (12 Aug 2026; see the file header). An absent checkbox stops nobody signing in — unticked is the browser's ordinary state — and the session simply runs WordPress's default length. The test suite pins this file to exactly one `display: none`, here. */ body.login.vertanet-care-login .forgetmenot { display: none; } body.login.vertanet-care-login form .input, body.login.vertanet-care-login form input[type="text"], body.login.vertanet-care-login form input[type="password"], body.login.vertanet-care-login form input[type="email"], body.login.vertanet-care-login input[type="text"] { padding: 8px 10px; background: #ffffff; border: 1px solid var(--vc-line); border-radius: var(--vc-radius-sm); color: var(--vc-ink); font-family: var(--vc-font); font-size: 15px; box-shadow: none; } body.login.vertanet-care-login form .input:focus, body.login.vertanet-care-login form input[type="text"]:focus, body.login.vertanet-care-login form input[type="password"]:focus, body.login.vertanet-care-login form input[type="email"]:focus, body.login.vertanet-care-login input[type="checkbox"]:focus { border-color: var(--vc-accent); box-shadow: 0 0 0 3px rgba(43, 135, 163, 0.18); outline: 2px solid transparent; } body.login.vertanet-care-login input[type="checkbox"]:checked::before { filter: none; } /* -------------------------------------------------------------------------- * The button * ----------------------------------------------------------------------- */ body.login.vertanet-care-login .button-primary, body.login.vertanet-care-login .wp-core-ui .button-primary { /* The card's one action, as wide as the card: a full-width button reads as "this is the thing this page does", and it is where the eye lands after the puzzle above it, which is the same width. */ display: block; width: 100%; padding: 6px 16px; background: var(--vc-ink); border: 1px solid var(--vc-ink); border-radius: var(--vc-radius-sm); color: #ffffff; font-family: var(--vc-font); font-size: 14px; font-weight: 600; text-shadow: none; box-shadow: none; } body.login.vertanet-care-login .button-primary:hover, body.login.vertanet-care-login .wp-core-ui .button-primary:hover { background: var(--vc-accent); border-color: var(--vc-accent); color: #ffffff; } body.login.vertanet-care-login .button-primary:focus, body.login.vertanet-care-login .wp-core-ui .button-primary:focus { background: var(--vc-accent); border-color: var(--vc-accent); box-shadow: 0 0 0 3px rgba(80, 197, 225, 0.45); } /* -------------------------------------------------------------------------- * Messages, errors and the links below the card * ----------------------------------------------------------------------- */ body.login.vertanet-care-login #login_error, body.login.vertanet-care-login .message, body.login.vertanet-care-login .success, body.login.vertanet-care-login .notice { margin-bottom: 18px; padding: 12px 14px; background: #ffffff; border: 1px solid var(--vc-line); border-left: 4px solid var(--vc-accent); border-radius: var(--vc-radius-sm); color: var(--vc-ink); font-family: var(--vc-font); font-size: 14px; box-shadow: var(--vc-shadow); } body.login.vertanet-care-login #login_error { border-left-color: #b3352f; } /* Under the card: the password link, the way back to the site, the privacy link and the language switcher. Centred beneath the card as one quiet column, because left-aligned loose ends under a centred card read as leftovers — which is what they were until 0.17.1. Everything stays on the page and keeps working; tidy is a layout, not a removal. */ body.login.vertanet-care-login #nav, body.login.vertanet-care-login #backtoblog, body.login.vertanet-care-login .privacy-policy-page-link, body.login.vertanet-care-login .language-switcher { padding: 0 24px; font-family: var(--vc-font); font-size: 13px; text-align: center; } body.login.vertanet-care-login #nav { margin-top: 18px; } body.login.vertanet-care-login #backtoblog { margin-top: 8px; } body.login.vertanet-care-login #nav a, body.login.vertanet-care-login #backtoblog a, body.login.vertanet-care-login .privacy-policy-page-link a { color: var(--vc-muted); text-decoration: none; } body.login.vertanet-care-login #nav a:hover, body.login.vertanet-care-login #backtoblog a:hover, body.login.vertanet-care-login #nav a:focus, body.login.vertanet-care-login #backtoblog a:focus { color: var(--vc-accent); text-decoration: underline; } /* The language switcher's own controls, dressed as the card's inputs are: the stock select and Change button are the two pieces of WordPress chrome that would otherwise survive under the card. Tag-level selectors inside the container, because core's ids in here have moved between versions and the container class is the stable handle. */ body.login.vertanet-care-login .language-switcher { margin-top: 14px; } /* The card's last line, and on the SAME CENTRE AXIS as the links above it. * * WHERE IT SITS, BY DECISION (owner, 12 Aug 2026). Core emits this element * INSIDE the card: wp-login.php's `login_footer()` calls * `the_privacy_policy_link()` immediately before the `` that closes * `#login`, and has done in every version this plugin supports (checked against * 5.9, 6.0, 6.4, 6.8 and 7.0.4). That is where it ships, as the quiet line * below "Go to site". The 0.17.2 wording about "the very bottom of the page" * was written against a markup model that had this element as a sibling of the * card, which it never was — a stylesheet cannot move a child out of its * parent. The flex column and the `order`/`margin-top: auto` pair that model * needed are gone with it; the body rule above records why. * * WHY IT LOOKED OFF-CENTRE. Core gives this element a width, which the links * above it do not have: * * .login .privacy-policy-page-link { text-align: center; width: 100%; margin: 3em 0 2em; } * .login #nav, .login #backtoblog { font-size: 13px; padding: 0 24px; } * * The 24px side padding this shares with `#nav` and `#backtoblog` in the group * rule above is harmless on them because their width is auto — the padding eats * into a box that fits. Here it was ADDED to core's `width: 100%` under the * default content-box, making the box 368px inside a 320px card, spilling 48px * off the right-hand side. `text-align: center` then centred the text over THAT * box, whose middle sits 24px to the right of the card's, and 24px is exactly * what the eye reads as "not lined up with the others". Nothing about the * viewport's centre was ever involved. * * THE FIX FOLDS THE PADDING INTO THE WIDTH instead of adding it, so the box is * the card's width and the two centres are one. It deliberately copies no * number out of core: a core version that changes the card's 320px carries this * with it, where a hardcoded width here would quietly go stale. The max-width * and the auto side margins cover the other direction — a core version that * swaps the `100%` for a fixed width gets clamped if it is too wide and centred * as a block if it is narrower. * * THE SPACING ABOVE IT IS OURS, and `margin-top: 0` says so out loud rather * than leaving it to an `auto` that quietly computed to 0 in block flow. Core's * `3em` top margin is dropped for the 18px padding below: with core's own 16px * bottom margin on `#backtoblog` collapsing against it, that puts this line * about 34px under "Go to site" where core would have put it about 52px. Tighter * on purpose — three links reading as one quiet block under the card, rather * than a last line drifting away from the two above it. * * A tad smaller than the 13px links above it: present for whoever needs it, * quiet for everybody else. This font-size deliberately sits AFTER the grouped * 13px rule above. */ body.login.vertanet-care-login .privacy-policy-page-link { box-sizing: border-box; max-width: 100%; margin-top: 0; margin-left: auto; margin-right: auto; padding-top: 18px; padding-bottom: 14px; font-size: 12px; } body.login.vertanet-care-login .language-switcher form { display: inline-flex; align-items: center; gap: 8px; } body.login.vertanet-care-login .language-switcher .dashicons { color: var(--vc-muted); } body.login.vertanet-care-login .language-switcher select { padding: 4px 8px; background: #ffffff; border: 1px solid var(--vc-line); border-radius: var(--vc-radius-sm); color: var(--vc-ink); font-family: var(--vc-font); font-size: 13px; } body.login.vertanet-care-login .language-switcher .button { padding: 3px 12px; background: #ffffff; border: 1px solid var(--vc-line); border-radius: var(--vc-radius-sm); color: var(--vc-muted); font-family: var(--vc-font); font-size: 13px; text-shadow: none; box-shadow: none; } body.login.vertanet-care-login .language-switcher .button:hover, body.login.vertanet-care-login .language-switcher .button:focus { border-color: var(--vc-accent); color: var(--vc-accent); } /* -------------------------------------------------------------------------- * The challenge widget, as one more element of the card * * Custom properties rather than selectors: the widget draws itself inside a * shadow root, and these are the handles it publishes. They pierce the shadow * boundary, which is why styling it does not mean forking it. * ----------------------------------------------------------------------- */ body.login.vertanet-care-login .vertanet-care-cap { margin: 0 0 16px; } body.login.vertanet-care-login cap-widget { /* The host is inline-block inside its own shadow root, and the 100% below would collapse it to nothing without this pair (class-captcha.php's print_style carries the same rule for the stock form). */ display: block; width: 100%; --cap-background: #f7f9fb; --cap-border-color: var(--vc-line); --cap-border-radius: var(--vc-radius-sm); --cap-color: var(--vc-ink); --cap-font: var(--vc-font); --cap-widget-width: 100%; --cap-widget-padding: 10px 12px; --cap-gap: 10px; --cap-checkbox-background: #ffffff; --cap-checkbox-border: 1px solid var(--vc-line); --cap-checkbox-border-radius: 4px; --cap-spinner-color: var(--vc-accent); --cap-spinner-background-color: var(--vc-line); --cap-focus-ring: 0 0 0 3px rgba(43, 135, 163, 0.18); --cap-troubleshoot-color: var(--vc-muted); --cap-invalid-border-color: #b3352f; --cap-invalid-ring-color: rgba(179, 53, 47, 0.25); }