/*
* FuelFox Customer Portal — Portal Design
*
* Consumes the FuelFox design system (tokens/ copied verbatim from the
* design-system repo; see design-system/docs/consuming.md). Never hardcode
* hex values below this import — reference the CSS custom properties tokens/
* defines, so a token refresh (re-copy tokens/) is the only sync step needed.
*
* Scope: the chrome-free auth pages (login/register/forgot-password), which
* render through wp-content/mu-plugins/portal-auth-template.php instead of
* Astra's header/footer. Light theme only — see class="light" on in
* that template.
*/
@import 'tokens/index.css';
@import 'tokens/base-links.css';
/* base-links.css gives every bare the theme-aware link treatment. This
* matters here specifically: register.php/confirm.php/forgot.php/
* forgot_confirm.php's PHP logic (kept verbatim -- see those files) echoes
* plain, unclassed tags inline in several server-side messages (a
* mailto, "try again", "Log In", "I have my code", ...). Restyling those
* strings would mean editing the PHP logic itself, so the global rule picks
* them up instead. .ff-auth-links a below still wins on specificity where a
* page provides its own classed link. */
/* ── Page shell ──────────────────────────────────────────────────────── */
/* Reset the browser's default body margin (the white frame around the page) and
* paint html + body with the page ground so nothing white shows through --
* including any overscroll gutter. body.ff-auth is specific enough to beat
* Astra's own body rules on the live page without !important, and scoped so it
* can't leak to other WP pages. */
html {
background: var(--color-bg-base);
}
body.ff-auth {
margin: 0;
background: var(--color-bg-base);
}
.ff-auth-shell {
box-sizing: border-box; /* keep padding inside 100vh -- otherwise it overflows and scrolls */
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start; /* sit near the top, not dead-center -- less space above the logo */
gap: var(--space-8);
padding: var(--space-16) var(--space-4) var(--space-8);
background: var(--color-bg-base);
font-family: var(--font-body);
}
/* Logo lives on the page background, above the card -- never on a card
* surface (design-system placement rule). Light theme uses the light
* variant (dark ink on a light/white field). */
.ff-auth-logo {
display: block;
width: 200px;
height: auto;
}
/* ── Card ────────────────────────────────────────────────────────────── */
.ff-auth-card {
width: 100%;
max-width: 400px;
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
padding: var(--space-8);
box-sizing: border-box;
}
.ff-auth-heading {
margin: 0 0 var(--space-2);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-h2);
line-height: var(--leading-tight);
color: var(--color-text-primary);
text-align: center;
}
.ff-auth-help {
margin: 0 0 var(--space-6);
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-normal);
color: var(--color-text-secondary);
text-align: center;
}
/* ── Form ────────────────────────────────────────────────────────────── */
.ff-auth-form {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.ff-auth-field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.ff-auth-label {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--text-label);
color: var(--color-text-secondary);
}
/* Inline qualifier inside a label, e.g. "Create a password (8 characters
* min.)" on confirm.php -- a requirement, not a warning, so it's muted
* rather than error-red (the old inline style="color:red;" it replaces). */
.ff-auth-hint {
font-weight: 400;
color: var(--color-text-muted);
}
.ff-auth-input {
width: 100%;
box-sizing: border-box;
font-family: var(--font-body);
font-size: var(--text-body-lg);
color: var(--color-text-primary);
background: var(--color-bg-base);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3);
}
.ff-auth-input::placeholder {
color: var(--color-text-muted);
}
.ff-auth-input:focus {
outline: none;
border-color: var(--color-focus-ring);
box-shadow: var(--shadow-focus);
}
/* ── Primary action ──────────────────────────────────────────────────── */
.ff-auth-submit {
width: 100%;
box-sizing: border-box;
margin-top: var(--space-2);
background: var(--color-brand);
color: var(--color-white);
border: none;
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-body-lg);
line-height: var(--leading-normal);
cursor: pointer;
}
.ff-auth-submit:hover,
.ff-auth-submit:focus-visible {
background: var(--color-brand-dark);
}
.ff-auth-submit:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
/* ── Secondary links ─────────────────────────────────────────────────── */
.ff-auth-links {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-6);
font-family: var(--font-body);
font-size: var(--text-label);
}
.ff-auth-links a {
color: var(--color-link);
text-decoration: none;
}
.ff-auth-links a:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
.ff-auth-links a:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.ff-auth-links .ff-auth-links-sep {
color: var(--color-border);
}
/* ── Alerts (server-side messaging from the five auth pages) ────────────
* login.php/register.php/confirm.php/forgot.php/forgot_confirm.php each
* echo Bootstrap's .alert.alert-danger / .alert-success markup from PHP
* logic kept verbatim (see those files). That PHP runs before -- and in
* three of the five files, sometimes instead of -- this page's own markup,
* so an alert can land as the first (or only) child of .ff-auth-shell,
* above or without the logo/card:
* - forgot.php returns unconditionally after any POST, so every submit
* (success or failure) renders ONLY the alert -- never the form again.
* - confirm.php/forgot_confirm.php return early on some but not all
* failure branches, so a couple of error paths render bare-alert-only
* while others re-render the full card underneath the alert.
* Sized to the card's max-width either way so a bare alert still reads as
* intentional rather than a stray floating box. Restyled on tokens rather
* than pulling in Bootstrap's alert theme. */
.ff-auth-shell .alert {
width: 100%;
max-width: 400px;
box-sizing: border-box;
margin: 0;
padding: var(--space-3);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-normal);
text-align: center;
}
.ff-auth-shell .alert-danger {
background: var(--color-tint-error);
border: 1px solid var(--color-error);
color: var(--color-error);
}
.ff-auth-shell .alert-success {
background: var(--color-tint-success);
border: 1px solid var(--color-success);
color: var(--color-success);
}