/* ==========================================================================
login.css — the branded sign-in screen
University of Bridgeport
Loaded only on wp-login.php, by ubridgeport_login_assets() in functions.php.
── WHY THIS SHEET FIGHTS FOR SPECIFICITY ──────────────────────────────────
wp-login.php is not a theme template. WordPress prints its own login.css and
there is no hook to dequeue it that does not also take the form's layout and
the password-visibility toggle with it. So core's sheet stays, loads FIRST,
and this one overrides it.
That is why selectors here are longer than they would be in a theme
stylesheet — `body.login #loginform` rather than `#loginform`. They are
matched to core's own specificity, not padded past it: core styles
`.login form`, so `body.login form` beats it on one extra class and nothing
here needs !important except where core itself used it. Trimming these
selectors "for tidiness" hands the rule back to core.
── TOKENS, NOT LITERALS ───────────────────────────────────────────────────
Every colour and duration below reads a custom property that
inc/theme-design/ compiles from Appearance -> Theme Design. The theme's
token block prints at `wp_head`, which does NOT fire on the login screen —
functions.php prints it at `login_head` for exactly this reason. Hardcoding
#592d82 here would look identical today and silently stop following the
palette the moment anyone changes it.
Fallbacks in var() are the shipped defaults, so the screen is still correct
if the token block is ever absent.
── THE TWO-PANEL LAYOUT ───────────────────────────────────────────────────
Wide viewports get a photograph on the left and the form on the right. The
split is a grid on , which works because core wraps everything in
#login — one element to place. Below 900px the photograph is dropped
(`display: none`, not a shorter column: a 200px-tall crop of a campus wide
shot is noise, and it would push the form below the fold on a phone).
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
Local tokens.
Named on :root rather than inlined so the knight SVG can read them too — it
is loaded as an ![]()
, which cannot inherit, so the mark carries its own
fallbacks and these apply to the CSS side of the screen.
-------------------------------------------------------------------------- */
:root {
--login-ground: var(--ub-purple-deep, #2a1240);
--login-card: var(--white, #ffffff);
--login-field-border: #d6d0dd;
--login-radius: 4px; /* Not var(--btn-radius): see the button rule. */
--login-panel-w: 46%;
/* The disc behind the knight. A token because it is a real design decision
(see the logo rule for why the artwork needs a light ground) and someone
reasonably might want it off-white or a pale tint of the brand purple. */
--ub-knight-disc: #ffffff;
}
/* --------------------------------------------------------------------------
Page shell
-------------------------------------------------------------------------- */
body.login {
/* Core sets `background: #f0f0f1` on html; the deep purple has to beat it
on both elements or a rubber-band scroll on iOS shows grey behind. */
background: var(--login-ground);
/* A guard, not a fix for anything currently broken: nothing in the form is
wide enough to stretch the page today, and this keeps a future long
error string or a plugin's own field from introducing a horizontal
scrollbar on a phone. */
max-width: 100%;
overflow-x: hidden;
font-family: var(--font-primary, 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
min-height: 100vh;
margin: 0;
display: grid;
/* Single column by default — the photograph is opted INTO at 900px, rather
than opted out of below it, so the phone layout is the one that needs no
media query to be correct. */
grid-template-columns: 1fr;
align-items: stretch;
/* Rows flow naturally in the one-column (phone) layout, where the only items
are #login and the help line. The two-panel rule at 900px pins a single
full-height row and places every item into it — see there for why. */
grid-template-rows: auto;
}
html {
background: var(--login-ground);
}
/* Core's page-title