/**
* VMT wp-login.php skin — reproduces the production login look so the
* LoginPress plugin can be removed without changing the design.
*
* Loaded via divi-child/functions.php on `login_enqueue_scripts`. Values were
* captured from the live LoginPress-rendered page (courses.thevmt.org):
* background solid teal #0d6976 card #fff, 350px, radius 5, big shadow
* primary btn #e75044 (hover #d3473d) inputs 48px, square, #bdbdbd border
* font Segoe UI stack logo bundled with the theme
*
* The logo (vmt-login-logo.png) ships inside the theme, so the login page has
* no dependency on LoginPress or a specific /uploads/ path.
* @since divi-child 1.8.0
*/
:root {
/* Canonical VMT brand palette — taken from the Keycloak login theme's own
* vmt-login.css (--vmt-green #008092, --vmt-coral #E75044) so this page and
* the Keycloak SSO page share exactly one teal + one coral. (Production's
* LoginPress used a near-miss teal #0d6976; unified here on the real brand
* green for visual continuity across the two login pages.) */
--vmt-login-bg: #008092; /* page bg + logo brand band (VMT green) */
--vmt-login-primary: #e75044; /* password "Log In" button (VMT coral) */
--vmt-login-primary-hov: #d3473d;
--vmt-login-sso: #008092; /* SSO button (VMT green — matches Keycloak's primary) */
--vmt-login-sso-hov: #006676;
--vmt-login-font: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}
/* ---- Page ------------------------------------------------------------- */
body.login {
background: var(--vmt-login-bg);
background-image: none;
min-height: 100vh;
font-family: var(--vmt-login-font);
}
/* ---- Card ------------------------------------------------------------- */
body.login #login {
width: 100%;
max-width: 350px;
margin: 5vh auto 0;
padding: 0 26px 12px; /* top padding lives in the logo band below */
background: #fff;
border-radius: 5px;
box-shadow: 0 0 15px rgba( 0, 0, 0, .8 );
}
/* ---- Logo ------------------------------------------------------------- *
* The bundled logo is the VMT "REV" (reversed / white) mark. Production
* places it directly on the white card, where it is barely legible. We give
* it a VMT-teal brand header band (bleeding to the card edges, rounded top) so
* the white logo reads clearly — the one intentional "cleaner than prod"
* change. To match prod exactly instead, drop the band and swap in a dark
* logo asset.
* ----------------------------------------------------------------------- */
.login h1 {
margin: 0 -26px; /* bleed to the card's left/right edges */
padding: 22px 26px;
background: var(--vmt-login-bg);
border-radius: 5px 5px 0 0;
}
.login h1 a,
.login .wp-login-logo a {
width: 100%;
max-width: 290px;
height: 48px;
margin: 0 auto;
background-image: url( vmt-login-logo.png );
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* ---- Form + inputs ---------------------------------------------------- */
.login form {
margin-top: 16px;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.login label {
color: #444;
font-size: 14px;
}
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
height: 48px;
margin-bottom: 18px;
padding: 0 12px;
background: #fff;
border: 1px solid #bdbdbd;
border-radius: 0;
color: #4a4a4a;
font-size: 15px;
font-family: inherit;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
border-color: var(--vmt-login-bg);
box-shadow: 0 0 0 1px var(--vmt-login-bg);
outline: 0;
}
.login .forgetmenot {
float: none;
}
.login input[type="checkbox"] {
accent-color: #f6366a; /* prod remember-me checkmark accent */
}
/* ---- Primary "Log In" button ------------------------------------------ */
.wp-core-ui.login .button-primary,
.login input[type="submit"] {
display: block;
width: 100%;
min-height: 46px;
margin: 8px 0;
padding: 12px 15px;
border: 1px solid var(--vmt-login-primary);
border-radius: 5px;
background: var(--vmt-login-primary);
color: #fff;
font-size: 15px;
font-family: inherit;
line-height: 1.33333;
text-align: center;
text-shadow: none;
box-shadow: none;
}
.wp-core-ui.login .button-primary:hover,
.wp-core-ui.login .button-primary:focus,
.login input[type="submit"]:hover,
.login input[type="submit"]:focus {
background: var(--vmt-login-primary-hov);
border-color: var(--vmt-login-primary-hov);
color: #fff;
}
/* ---- Nav links (Lost your password? / Back) --------------------------- */
.login #nav,
.login #backtoblog {
text-align: center;
}
.login #nav a,
.login #backtoblog a {
color: #4a4a4a;
}
.login #nav a:hover,
.login #backtoblog a:hover {
color: var(--vmt-login-bg);
}
/* ----------------------------------------------------------------------- *
* SSO — the preferred sign-in (OpenID Connect Generic plugin → Keycloak).
*
* The plugin renders this markup on wp-login.php AND from the
* [openid_connect_generic_login_button] shortcode:
*
*
*
* The label text comes from divi-child/functions.php via the plugin's
* `openid-connect-generic-login-button-text` filter ("Sign in with your VMT
* account") — plain language for non-technical mentors, no "SSO"/"OpenID" jargon.
*
* Design: a full-width, VMT-green (#008092 — same teal as the Keycloak primary
* button) solid button with the VMT owl mark in a white chip on the left, sat
* ABOVE the username/password form as the primary/preferred path. Structure +
* radius + icon-and-label layout echo the Keycloak login's social buttons so
* the two pages read as one system. The plugin is NOT installed on DDEV — this
* was verified with a temporary markup injection; final visual check on prod.
*
* GRAPHIC-SWAP HOOK — to replace the whole styled button with ONE custom button
* graphic later, drop in these two overrides (image on the , hide the label
* + owl chip):
* .login .openid-connect-login-button .button {
* background: url('vmt-sso-button.png') center / contain no-repeat;
* border: 0; min-height: 56px; font-size: 0; (font-size:0 hides the label)
* }
* .login .openid-connect-login-button .button::before { display: none; }
* Or let the plugin output an ![]()
inside the — `.button img` (below) sizes it.
* ----------------------------------------------------------------------- */
.login .openid-connect-login-button {
/* 50px of breathing room between the teal header/logo band and the SSO
* button (top margin on the button wrapper only — keeps the card padding
* and the logo-band alignment untouched). */
margin: 50px 0 0 !important;
text-align: center;
}
.login .openid-connect-login-button .button,
.wp-core-ui.login .openid-connect-login-button .button.button-large {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-sizing: border-box;
width: 100%;
min-height: 48px;
height: auto; /* fix: LoginPress fixed the height at 46px */
margin: 0;
padding: 11px 16px;
border: 1px solid var(--vmt-login-sso);
border-radius: 5px;
background: var(--vmt-login-sso);
color: #fff !important;
font-size: 16px;
font-family: inherit;
font-weight: 600;
line-height: 1.3 !important; /* fix: overrides LoginPress line-height:0 */
text-align: center;
text-decoration: none;
white-space: normal;
box-shadow: 0 2px 5px rgba( 0, 128, 146, .28 ); /* subtle lift = the primary CTA */
transition: background .15s, box-shadow .15s;
}
/* VMT owl mark in a white chip (colourful icon reads on the teal fill; mirrors
* how the Keycloak social buttons carry a coloured provider logo). */
.login .openid-connect-login-button .button::before {
content: "";
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff url( vmt-icon.png ) center / 19px 19px no-repeat;
}
.login .openid-connect-login-button .button:hover,
.login .openid-connect-login-button .button:focus {
background: var(--vmt-login-sso-hov);
border-color: var(--vmt-login-sso-hov);
color: #fff !important;
box-shadow: 0 3px 8px rgba( 0, 128, 146, .36 );
}
.login .openid-connect-login-button .button img {
display: inline-block;
width: auto;
max-height: 24px; /* used only if a custom ![]()
graphic is dropped in */
}
/* "or" hint below the SSO button — signals the fields are the alternative. */
.login .openid-connect-login-button::after {
content: "or sign in with your password";
display: block;
margin: 14px 0 2px;
color: #8a8a8a;
font-size: 12px;
font-weight: 400;
}