/* ============================================================
CLEARFROST ENGINEERING — Auth Portal (pre-login pages)
auth-portal.css | Version 1.0 | September 2026
Shared styling for every page a user reaches before/around
logging in: sign-in, two-factor verification, registration,
password reset, and forced password changes.
Scoped to body.auth-page so it never touches the admin or
customer-portal layouts (see style.css / customer-portal.css).
Two markup conventions are supported side by side so existing
pages didn't need risky rewrites:
- "auth-*" classes (index.php and any newly-rebuilt page)
- "mfa-*" / bare (auth/mfa-verify-enhanced.php and
element classes auth/mfa-verify.php, carried over as-is)
Both resolve to identical visual output — this file is the
single place to change a colour, font, or spacing value for
every auth page at once.
Load order (in each page's , after Font Awesome):
Google Fonts are pulled in below via @import, so pages no
longer need their own Google Fonts tags.
============================================================ */
/* ------------------------------------------------------------
1. GOOGLE FONTS
------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;600;700;800&family=Barlow:wght@300;400;600&family=Share+Tech+Mono&display=swap');
/* ------------------------------------------------------------
2. DESIGN TOKENS
Scoped to body.auth-page so these never leak into admin or
customer-portal layouts.
------------------------------------------------------------ */
body.auth-page {
--color-navy: #0D1B2A;
--color-navy-mid: #1A2B3C;
--color-navy-active: #243447;
/* Software accent (primary auth brand colour) */
--color-blue-primary: #5BE8C8;
--color-blue-hover: #3BBFDA;
--color-blue-light: #B3F0E5;
--color-blue-lighter: #E0FAF5;
/* Engineering accent (Sky Cobalt) — available for pages that need it */
--color-eng-primary: #5B9AE8;
--color-eng-secondary: #3B7AD4;
--color-green: #28A745;
--color-green-light: #D4EDDA;
--color-red: #DC3545;
--color-red-light: #F8D7DA;
--color-amber: #FFD97D;
--color-amber-light: #FFF8E7;
--color-amber-dark: #8A6400;
--color-grey-bg: #E8F4F8;
--color-grey-border: #D0DCE5;
--color-grey-light: #F4F8FA;
--color-grey-mid: #ADB5BD;
--color-white: #FFFFFF;
--color-body-text: #1A2B3C;
--color-heading-text: #0D1B2A;
--font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
[x-cloak] { display: none !important; }
body.auth-page *,
body.auth-page *::before,
body.auth-page *::after {
box-sizing: border-box;
}
/* ------------------------------------------------------------
3. PAGE SHELL
------------------------------------------------------------ */
body.auth-page {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background:
repeating-linear-gradient(
0deg,
transparent,
transparent 39px,
rgba(255, 255, 255, 0.03) 39px,
rgba(255, 255, 255, 0.03) 40px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 39px,
rgba(255, 255, 255, 0.03) 39px,
rgba(255, 255, 255, 0.03) 40px
),
radial-gradient(ellipse at 60% 40%, var(--color-navy-mid) 0%, var(--color-navy) 70%);
font-family: var(--font-family);
}
/* ------------------------------------------------------------
4. CARD
.auth-card — canonical (index.php and rebuilt pages)
.mfa-container — carried over from the MFA pages
------------------------------------------------------------ */
.auth-card,
.mfa-container {
background: var(--color-grey-bg);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
width: 100%;
max-width: 440px;
padding: 40px 40px 36px;
}
/* Wider variant for pages with more form fields (MFA, register) */
.auth-card--wide,
.mfa-container {
max-width: 500px;
}
/* ------------------------------------------------------------
5. LOGO
.auth-logo-wrap — canonical
.logo — carried over from the MFA pages
------------------------------------------------------------ */
.auth-logo-wrap,
.logo {
text-align: center;
margin-bottom: 28px;
}
.auth-logo-wrap img,
.logo img {
width: 108px;
height: auto;
display: block;
margin: 0 auto;
}
/* Hidden by default — APP_NAME already appears in .auth-heading */
.site-title { display: none; }
/* ------------------------------------------------------------
6. BRAND EYEBROW ("Clearfrost Engineering")
------------------------------------------------------------ */
.auth-brand {
font-family: 'Barlow Condensed', var(--font-family);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--color-blue-primary);
text-align: center;
margin: 0 0 4px;
}
/* ------------------------------------------------------------
7. HEADINGS
.auth-heading — canonical
bare h1 — carried over from the MFA pages
------------------------------------------------------------ */
.auth-heading,
.mfa-container h1 {
font-family: 'Barlow Condensed', var(--font-family);
font-size: 28px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--color-navy);
margin: 0 0 6px;
text-align: center;
}
.auth-subheading,
.mfa-container .subtitle {
font-size: 14px;
font-weight: 400;
color: var(--color-body-text);
text-align: center;
margin: 0 0 24px;
opacity: 0.75;
}
/* ------------------------------------------------------------
8. ALERTS
.auth-alert.alert-* — canonical
.alert.alert-danger — carried over from the MFA pages
------------------------------------------------------------ */
.auth-alert,
.mfa-container .alert {
border-radius: 6px;
padding: 10px 14px;
font-size: 13px;
margin-bottom: 20px;
display: flex;
align-items: flex-start;
gap: 8px;
}
.auth-alert i,
.mfa-container .alert i {
flex-shrink: 0;
margin-top: 1px;
}
.auth-alert.alert-success,
.mfa-container .alert-success {
background: var(--color-green-light);
border: 1px solid #C3E6CB;
color: #155724;
}
.auth-alert.alert-error,
.mfa-container .alert-danger {
background: var(--color-red-light);
border: 1px solid #F5C6CB;
color: #721C24;
}
.auth-alert.alert-warning {
background: var(--color-amber-light);
border: 1px solid var(--color-amber);
color: var(--color-amber-dark);
}
.auth-alert.alert-info {
background: var(--color-blue-lighter);
border: 1px solid var(--color-blue-light);
color: var(--color-navy-mid);
}
/* ------------------------------------------------------------
9. FORM ELEMENTS
------------------------------------------------------------ */
.form-group {
margin-bottom: 18px;
}
.form-row {
display: flex;
gap: 14px;
}
.form-row .form-group {
flex: 1;
min-width: 0;
}
.auth-card label,
.mfa-container label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--color-body-text);
margin-bottom: 6px;
}
.form-control {
width: 100%;
border: 1px solid var(--color-grey-border);
border-radius: 6px;
padding: 9px 12px;
font-size: 14px;
font-family: inherit;
background: var(--color-white);
color: var(--color-body-text);
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
outline: none;
}
.form-control:focus {
border-color: var(--color-blue-primary);
background: var(--color-blue-lighter);
box-shadow: 0 0 0 3px rgba(91, 232, 200, 0.2);
}
.form-control::placeholder {
color: var(--color-grey-mid);
}
small.form-text {
display: block;
font-size: 12px;
color: var(--color-body-text);
opacity: 0.65;
margin-top: 5px;
}
/* Large centred OTP-style code input (MFA, backup codes) */
.code-input {
width: 100%;
padding: 16px;
font-size: 28px;
text-align: center;
letter-spacing: 12px;
border: 1px solid var(--color-grey-border);
border-radius: 6px;
font-weight: 600;
color: var(--color-navy);
background: var(--color-white);
font-family: 'Share Tech Mono', monospace;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
outline: none;
}
.code-input:focus {
border-color: var(--color-blue-primary);
background: var(--color-blue-lighter);
box-shadow: 0 0 0 3px rgba(91, 232, 200, 0.2);
}
.code-input::placeholder {
color: var(--color-grey-mid);
font-weight: 400;
}
/* Remember-me / opt-in checkbox row */
.form-check {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}
.form-check input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--color-blue-primary);
cursor: pointer;
flex-shrink: 0;
}
.form-check label {
font-size: 13px;
color: var(--color-body-text);
cursor: pointer;
margin: 0;
user-select: none;
}
/* ------------------------------------------------------------
10. BUTTONS
.btn-auth-submit — canonical primary
.mfa-container .btn.btn-primary — carried over primary
.btn-auth-secondary / .btn-secondary — navy secondary
.btn-auth-link / .btn-link — inline text action
------------------------------------------------------------ */
.btn-auth-submit,
.mfa-container .btn {
display: block;
width: 100%;
padding: 11px 16px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
border: none;
border-radius: 6px;
cursor: pointer;
transition: filter 0.15s, box-shadow 0.15s;
letter-spacing: 0.01em;
text-align: center;
text-decoration: none;
}
.btn-auth-submit,
.mfa-container .btn-primary {
background: var(--color-blue-primary);
color: var(--color-navy);
}
.btn-auth-submit:hover,
.mfa-container .btn-primary:hover {
filter: brightness(90%);
}
.btn-auth-submit:focus,
.mfa-container .btn-primary:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(91, 232, 200, 0.3);
}
.btn-auth-submit:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.btn-auth-secondary,
.mfa-container .btn-secondary {
background: var(--color-navy-mid);
color: var(--color-white);
}
.btn-auth-secondary:hover,
.mfa-container .btn-secondary:hover {
filter: brightness(130%);
}
.btn-auth-link,
.mfa-container .btn-link {
background: none;
border: none;
color: var(--color-navy-mid);
cursor: pointer;
font-size: 13px;
font-family: inherit;
text-decoration: none;
padding: 0;
}
.btn-auth-link:hover,
.mfa-container .btn-link:hover {
color: var(--color-blue-hover);
text-decoration: underline;
}
/* ------------------------------------------------------------
11. FOOTER / ACTION LINK ROWS
.auth-footer-links — canonical (bottom-of-card links)
.action-links — carried over (mid-card link row)
.cancel-link — carried over (bottom-of-card, single link)
------------------------------------------------------------ */
.auth-footer-links {
text-align: center;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.auth-footer-links a {
font-size: 13px;
color: var(--color-navy-mid);
text-decoration: none;
}
.auth-footer-links a:hover {
color: var(--color-blue-hover);
text-decoration: underline;
}
.auth-footer-links .separator {
font-size: 11px;
color: var(--color-grey-mid);
}
.action-links {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--color-grey-border);
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.action-links a,
.action-links button {
color: var(--color-navy-mid);
text-decoration: none;
font-size: 13px;
font-family: inherit;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.action-links a:hover,
.action-links button:hover {
color: var(--color-blue-hover);
text-decoration: underline;
}
.cancel-link {
display: block;
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid var(--color-grey-border);
text-align: center;
}
.cancel-link a {
color: var(--color-grey-mid);
text-decoration: none;
font-size: 13px;
}
.cancel-link a:hover {
color: var(--color-body-text);
text-decoration: underline;
}
/* ------------------------------------------------------------
12. MFA-SPECIFIC COMPONENTS
Shared by mfa-verify-enhanced.php, mfa-verify.php and
mfa-backup.php so none of them need page-local CSS.
------------------------------------------------------------ */
.current-method {
background: var(--color-blue-lighter);
border: 1px solid var(--color-blue-light);
border-left: 4px solid var(--color-blue-primary);
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
text-align: center;
}
.current-method .method-icon {
font-size: 32px;
color: var(--color-navy-mid);
margin-bottom: 8px;
}
.current-method .method-name {
font-size: 16px;
font-weight: 600;
color: var(--color-navy);
margin-bottom: 4px;
}
.current-method .method-instructions {
font-size: 13px;
color: var(--color-body-text);
opacity: 0.8;
}
.methods-section {
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid var(--color-grey-border);
}
.methods-section h3 {
font-size: 13px;
font-weight: 600;
color: var(--color-body-text);
text-align: center;
margin-bottom: 14px;
opacity: 0.75;
}
.methods-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
.method-card {
background: var(--color-white);
padding: 14px;
border-radius: 8px;
text-align: center;
cursor: pointer;
border: 1px solid var(--color-grey-border);
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
position: relative;
width: 100%;
font-family: inherit;
}
.method-card:hover {
border-color: var(--color-blue-primary);
background: var(--color-blue-lighter);
}
.method-card.active {
border-color: var(--color-blue-primary);
background: var(--color-blue-lighter);
box-shadow: 0 0 0 2px rgba(91, 232, 200, 0.3);
}
.method-card .method-icon {
font-size: 26px;
color: var(--color-grey-mid);
margin-bottom: 7px;
}
.method-card.active .method-icon {
color: var(--color-navy-mid);
}
.method-card .method-label {
font-size: 12px;
color: var(--color-body-text);
font-weight: 600;
}
.method-card .primary-badge {
position: absolute;
top: 5px;
right: 5px;
background: var(--color-blue-primary);
color: var(--color-navy);
font-size: 9px;
padding: 2px 6px;
border-radius: 3px;
font-weight: 700;
}
.backup-section {
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid var(--color-grey-border);
display: none;
}
.backup-section h3 {
font-size: 16px;
font-weight: 700;
color: var(--color-navy);
margin-bottom: 8px;
}
.backup-section p {
font-size: 13px;
color: var(--color-body-text);
opacity: 0.75;
margin-bottom: 18px;
}
/* ------------------------------------------------------------
13. RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 520px) {
.auth-card,
.mfa-container {
padding: 30px 24px;
}
.auth-heading,
.mfa-container h1 {
font-size: 22px;
}
.code-input {
font-size: 24px;
letter-spacing: 8px;
}
.methods-grid {
grid-template-columns: 1fr;
}
.form-row {
flex-direction: column;
gap: 0;
}
}