(or a plain when a campus has no valid
detail page) instead of three separate anchors, so it needs its own
reset plus a visible keyboard-focus state. The "Read More" figcaption
badge and the title are now s inside that single link; extend the
original anchor-only selectors from style.css so they keep their look. */
a.wm-ourprofessors-slider-layer {
text-decoration: none;
color: inherit;
cursor: pointer;
}
.wm-ourprofessors-slider-layer figure figcaption span.wm-color-four {
position: absolute;
left: 50%;
top: 0%;
padding: 17px 32px 17px 27px;
font-size: 13px;
text-transform: uppercase;
font-weight: 600;
background: url(../images/see-bg.png);
background-repeat: no-repeat;
background-position: right 0px;
line-height: 1;
margin: -22px 0px 0px -66px;
}
.wm-ourprofessors-slider-layer:hover figure figcaption span.wm-color-four {
top: 50%;
}
a.wm-ourprofessors-slider-layer:focus-visible {
outline: 3px solid #ea9c0b;
outline-offset: 3px;
}
a.wm-ourprofessors-slider-layer:focus:not(:focus-visible) {
outline: none;
}
/* =============================================================
EduChamp login page — single-file stylesheet (scoped)
-------------------------------------------------------------
EVERY rule in this file is scoped to .auth-page, so nothing
leaks into the rest of your site and nothing here can be
clobbered by a global .btn / .row / body rule elsewhere.
USAGE: ...login markup...
The class must sit on (or on a full-height wrapper) —
the layout uses 100vh for the left panel.
Tokens live on .auth-page, not :root, so they cannot collide
with a :root block in your custom.css. They are also prefixed
--auth-* as belt and braces.
RECOLOR THE WHOLE PAGE BY EDITING THE TOKEN BLOCK BELOW.
============================================================= */
.auth-page {
/* Brand */
--auth-primary: #009959; /* buttons, links, focused label, checkbox, underline */
--auth-primary-hover: #007a47; /* button :hover / :focus / :active */
--auth-accent: #e79800; /* heading accent bar, logo sub-text */
/* Left panel gradient */
--auth-panel-from: #0a3d2e;
--auth-panel-via: #145a32;
--auth-panel-to: #1e7c4a;
/* Neutrals */
--auth-heading: #111111;
--auth-text: #505050;
--auth-muted: #0f192d;
--auth-label: #606060;
--auth-field-border: rgba(0, 0, 0, 0.2);
}
/* =============================================================
1. BASE (was: typography.css + the body rule)
============================================================= */
.auth-page,
.auth-page *,
.auth-page *::before,
.auth-page *::after { box-sizing: border-box; }
/* A rule that targets an element directly (e.g. `p { font-family: serif }`
in your custom.css) beats a value INHERITED from an ancestor, whatever
the specificity. So the font is re-asserted on every descendant rather
than left to inherit from .auth-page — otherwise a bare element rule
elsewhere on the site silently changes the typeface here. */
.auth-page,
.auth-page * { font-family: Rubik, sans-serif; }
.auth-page {
margin: 0;
padding: 0;
background-color: #fff;
background-size: cover; /* only matters if you add a background-image */
background-attachment: fixed;
font-family: Rubik, sans-serif;
font-size: 16px;
font-weight: 400;
color: var(--auth-text);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.auth-page a { color: #6f6f6f; text-decoration: none; outline: 0 none; }
.auth-page a:hover,
.auth-page a:focus { text-decoration: none; outline: 0 none; color: #333333; }
.auth-page img { border-style: none; height: auto; max-width: 100%; vertical-align: middle; }
/* `color: inherit` for the same reason as the font rule above — a bare
`p { color: ... }` in another stylesheet would otherwise win. */
.auth-page p { color: inherit; line-height: 28px; margin-top: 0; margin-bottom: 24px; }
.auth-page h1,
.auth-page h2,
.auth-page h3,
.auth-page h4,
.auth-page h5,
.auth-page h6 {
color: var(--auth-heading);
font-family: Rubik, sans-serif;
margin-top: 0;
}
.auth-page h2 { font-size: 32px; line-height: 45px; margin-bottom: 25px; font-weight: 700; }
.auth-page h6 { font-size: 16px; line-height: 22px; margin-bottom: 10px; font-weight: 500; }
/* =============================================================
2. LAYOUT UTILITIES (the Bootstrap classes this page uses)
-------------------------------------------------------------
Bootstrap's .row carries -15px side margins meant to be
cancelled by a .container's 15px padding. There is no such
container here, so they would push the form past each edge and
overflow on narrow screens. Every column here is full-width,
so the gutter is dropped instead.
============================================================= */
.auth-page .row { display: flex; flex-wrap: wrap; }
.auth-page .col-lg-12 { position: relative; flex: 0 0 100%; max-width: 100%; min-width: 0; }
.auth-page .d-flex { display: flex; }
.auth-page .flex-fill { flex: 1 1 auto; }
.auth-page .ml-auto { margin-left: auto; }
.auth-page .m-b30 { margin-bottom: 30px; }
.auth-page .m-r5 { margin-right: 5px; }
.auth-page .m-l5 { margin-left: 5px; }
/* =============================================================
3. ACCOUNT SHELL (was: style.css .account-*)
============================================================= */
.auth-page .account-form {
display: flex;
width: 100%;
position: relative;
}
/* Left panel. Pure gradient — no background image. */
.auth-page .account-head {
position: sticky;
left: 0;
top: 0;
z-index: 1;
width: 500px;
min-width: 500px;
height: 100vh;
display: flex;
align-items: center; /* vertical centering — no margin-top hack needed */
justify-content: center;
text-align: center;
background: linear-gradient(135deg,
var(--auth-panel-from) 0%,
var(--auth-panel-via) 60%,
var(--auth-panel-to) 100%);
}
.auth-page .account-head a {
display: block;
width: 100%;
}
.auth-page .account-head img {
width: 120px;
height: auto;
display: block;
margin: 0 auto 16px;
}
.auth-page .account-form-inner {
width: 100%;
align-self: center;
}
.auth-page .account-container {
max-width: 400px;
margin: auto;
padding: 30px 0;
}
/* ---------- Logo lockup inside the left panel ---------- */
.auth-page .logo-text-group {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.auth-page .logo-bold-text {
font-weight: 700;
font-size: 25px;
color: #fff;
margin: 0;
line-height: 1.3;
}
.auth-page .logo-small-text {
font-size: 18px;
font-weight: 500;
color: var(--auth-accent);
opacity: 0.8;
margin: 0;
line-height: 1.4;
}
/* =============================================================
4. HEADING BLOCK (the accent bar)
============================================================= */
.auth-page .heading-bx { margin-bottom: 40px; }
.auth-page .heading-bx h1,
.auth-page .heading-bx h2,
.auth-page .heading-bx h3 { margin-top: 0; }
.auth-page .heading-bx h2 { font-size: 30px; }
.auth-page .heading-bx p {
padding-top: 10px;
font-size: 16px;
color: var(--auth-muted);
}
.auth-page .contact-bx .heading-bx { margin-bottom: 30px; }
/* The vertical bar. `border-left` shorthand is required — `border-color`
on its own sets neither width nor style, so nothing would be drawn. */
.auth-page .heading-bx.left .title-head {
margin-top: 0;
margin-bottom: 10px;
line-height: 32px;
padding-left: 10px;
border-left: 5px solid var(--auth-accent);
}
.auth-page .heading-bx.left p {
max-width: 500px;
margin-bottom: 0;
}
.auth-page .title-head span { font-weight: 400; }
.auth-page .account-form .heading-bx p a {
color: var(--auth-primary);
text-decoration: underline;
padding-bottom: 0;
}
/* =============================================================
5. FORM FIELDS + FLOATING LABELS
The `.focused` / `.filled` classes are applied by login.js
============================================================= */
.auth-page .form-group { margin-bottom: 1rem; }
.auth-page .form-control {
display: block;
width: 100%;
height: 40px;
padding: 9px 12px;
font-size: 13px;
line-height: 20px;
font-family: inherit;
color: var(--auth-text);
background-color: #fff;
border: 1px solid #e1e6eb;
border-radius: 0;
box-shadow: none;
transition: all 0.2s linear;
}
.auth-page .form-control:focus {
outline: 0;
box-shadow: none;
}
.auth-page .contact-bx .input-group {
display: block;
position: relative;
width: 100%;
}
.auth-page .contact-bx .input-group .form-control,
.auth-page .contact-bx .input-group label { width: 100%; }
.auth-page .contact-bx .input-group label {
font-size: 14px;
font-weight: 400;
color: var(--auth-label);
position: absolute;
top: 10px;
left: 0;
margin: 0;
pointer-events: none;
transition: all 0.5s;
}
.auth-page .contact-bx .focused .input-group label {
top: -8px;
font-size: 10px;
color: var(--auth-primary);
}
.auth-page .contact-bx .input-group .form-control {
border-width: 0 0 1px 0;
border-color: var(--auth-field-border);
background-color: transparent;
padding: 10px 0;
}
.auth-page .contact-bx .input-group .form-control:focus {
border-color: var(--auth-primary);
background-color: transparent;
outline: none;
box-shadow: none;
}
.auth-page .contact-bx .input-group textarea.form-control { height: 120px; }
/* =============================================================
6. CUSTOM CHECKBOX (Bootstrap 4 custom-control, distilled)
============================================================= */
.auth-page .custom-control {
position: relative;
display: inline-block;
min-height: 1.5rem;
padding-left: 30px; /* 20px box + 10px gap */
}
.auth-page .custom-control-input {
position: absolute;
z-index: -1;
opacity: 0;
}
.auth-page .custom-control-label {
position: relative;
margin-bottom: 0;
vertical-align: middle;
cursor: pointer;
}
.auth-page .custom-control-label::before,
.auth-page .custom-control-label::after {
position: absolute;
top: 2px;
left: -30px;
display: block;
width: 20px;
height: 20px;
content: "";
}
.auth-page .custom-control-label::before {
background-color: transparent;
border: 2px solid var(--auth-primary);
border-radius: 3px;
}
.auth-page .custom-control-label::after {
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
}
.auth-page .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
background-color: var(--auth-primary);
}
.auth-page .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}
.auth-page .custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 3px rgba(0, 153, 89, 0.25);
}
/* ---------- Remember me / Forgot password row ---------- */
.auth-page .account-container .form-forget {
display: flex;
align-items: center;
justify-content: space-between;
}
.auth-page .account-container .form-forget .custom-control-label {
font-weight: 400;
margin-bottom: 0;
}
/* =============================================================
7. BUTTONS
============================================================= */
.auth-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 48px;
padding: 0 24px;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
background-color: var(--auth-primary);
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
.auth-page .btn:hover,
.auth-page .btn:focus,
.auth-page .btn:active {
background-color: var(--auth-primary-hover);
color: #fff;
outline: 0;
}
.auth-page .account-container .btn.button-md { padding: 0 40px; }
/* Social buttons: inline SVG icon with the white divider rule */
.auth-page .btn .btn-icon {
width: 16px;
height: 16px;
flex: 0 0 auto;
fill: currentColor;
border-right: 1px solid #fff;
box-sizing: content-box;
padding-right: 10px;
margin-right: 10px;
}
/* =============================================================
8. RESPONSIVE — TABLET (max-width: 991px)
============================================================= */
@media (max-width: 991px) {
.auth-page .account-form { flex-direction: column; }
.auth-page .account-head {
position: relative;
width: 100%;
min-width: 100%;
height: auto;
padding: 40px 20px 30px;
top: auto;
left: auto;
}
.auth-page .account-head img { width: 100px; }
.auth-page .account-form-inner { width: 100%; padding: 30px 20px; }
.auth-page .account-container { max-width: 500px; padding: 20px 0; }
.auth-page .logo-bold-text { font-size: 22px; }
.auth-page .logo-small-text { font-size: 16px; }
.auth-page .heading-bx { margin-bottom: 28px; }
.auth-page .heading-bx h2 { font-size: 26px; }
}
/* =============================================================
9. RESPONSIVE — MOBILE (max-width: 576px)
============================================================= */
@media (max-width: 576px) {
.auth-page .account-head { padding: 30px 15px 20px; }
.auth-page .account-head img { width: 80px; }
.auth-page .account-form-inner { padding: 20px 15px; }
.auth-page .account-container { max-width: 100%; padding: 15px 0; }
.auth-page .logo-bold-text { font-size: 18px; }
.auth-page .logo-small-text { font-size: 14px; }
.auth-page .heading-bx { margin-bottom: 20px; }
.auth-page .heading-bx h2 { font-size: 22px; }
.auth-page .heading-bx p { font-size: 14px; }
.auth-page .btn { font-size: 14px; height: 44px; padding: 0 16px; }
.auth-page .account-container .btn.button-md { padding: 0 20px; }
.auth-page .contact-bx .input-group label { font-size: 13px; }
.auth-page .custom-control-label::before,
.auth-page .custom-control-label::after { width: 16px; height: 16px; }
}
/* Login page heading — yellow accent bar in front of "Login to your Account" */
#login-heading .title-head {
padding-left: 10px;
border-left: 5px solid #e79800;
}