/*
* ECOFACTOR Design System v0.2 — canonical layout CSS for centered auth
* pages (login / register / forgot-password / OAuth consent / staff
* sign-in). Single fixed-width column, hero logo at top of card, language +
* theme switchers at bottom.
*
* Pairs with the Jinja2 canonical template at:
* templates/auth/centered.html.j2
*
* This file is served by the design-system CDN at:
* https://id.ecofactortech.com/ds/v0.2/presets/layouts/auth-centered.css
*
* The canonical template already includes a to this file in the
* default . Consumers extending the template do not need to add
* the link themselves; only override head_extra to ADD product CSS.
*
* Tokens (--surface-1, --text-primary, --container-action, etc.) come from
* design-system/presets/base.css which is loaded earlier in the cascade.
* Generic primitives (.btn / .input / .card / .field / .msg / .link /
* .divider / .btn-block / .ef-btn-spinner / .theme-toggle / .badge) live
* in base.css — only auth-specific positioning, modifiers, and widgets
* (.btn-oauth, .otp-group, .password-policy) live here.
*
* Reference implementation: ECOFACTOR ID's login / register / forgot-password
* / staff / oauth_consent pages were the original design — this file is
* the canonical extract. Keep all consumers (ECOFACTOR ID, future
* Pulse-public-recovery, future Finance customer signup, …) on this file
* via the CDN in the canonical template head.
*/
/* ── PAGE CHROME ─────────────────────────────────────────────────
.page wraps the entire auth flow. Single column, vertically full
height so the .footer pushes to the bottom even when content is short. */
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Centred fixed-width column. Default 480px is comfortable on mobile
+ desktop and gives room for OAuth buttons + form + divider + bottom
switcher row without horizontal scroll. */
.container {
max-width: 480px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
/* Width modifiers — for shorter flows (forgot-password, staff sign-in)
or for richer flows (OAuth consent with permission lists). */
.container--narrow { max-width: 400px; }
.container--wide { max-width: 560px; }
/* ── AUTH CARD ───────────────────────────────────────────────────
.card.card-auth — modifier on the canonical .card from base.css.
Adds extra padding for breathable vertical rhythm and a deliberate
24px outer margin so the card doesn't kiss the page header/footer. */
.card.card-auth {
margin: 24px auto;
padding: 32px 24px;
}
/* Hero logo at the top of the card. Centred horizontally with generous
bottom margin so it doesn't fight with the page title underneath. */
.card-auth__logo {
display: flex;
justify-content: center;
margin-bottom: 24px;
}
.card-auth__logo img {
height: 28px;
max-width: 100%;
object-fit: contain;
}
/* Bottom switcher row (language + theme). Sits inside the card, at the
bottom, behind a subtle top border to separate it from form content.
Both controls forced to the same 28px square outer size so they line
up visually — !important is required because:
• lang-switcher's global declaration sets margin-bottom:16px which
inside this flex row would show as a vertical hang.
• The canonical .theme-toggle has a 28x28 default that we want to
enforce here even if a product later overrides .theme-toggle
elsewhere on the same page. */
.card-auth__bottom {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--outline-secondary);
}
.card-auth__bottom .lang-switcher {
margin-bottom: 0 !important;
display: inline-flex !important;
align-items: center !important;
height: 28px !important;
}
.card-auth__bottom .lang-switcher-trigger {
height: 28px !important;
padding: 0 8px !important;
box-sizing: border-box !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
}
.card-auth__bottom .theme-toggle {
height: 28px !important;
width: 28px !important;
padding: 0 !important;
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0;
}
.card-auth__bottom .theme-toggle .theme-toggle__sun,
.card-auth__bottom .theme-toggle .theme-toggle__moon {
width: 16px !important;
height: 16px !important;
}
/* ── OAUTH BUTTON ────────────────────────────────────────────────
Neutral surface with subtle outline. Brand-agnostic — the icon
carries the provider's identity (Google G, Microsoft squares, Apple
logo, etc). Same 44px height as canonical .btn for uniform vertical
rhythm in the auth card. */
.btn-oauth {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 44px;
background: var(--surface-1);
color: var(--text-primary);
border: 1px solid var(--outline-secondary);
border-radius: 8px;
font-family: var(--font-platform);
font-weight: 500;
font-size: 15px;
cursor: pointer;
text-decoration: none;
transition: background var(--duration-fast);
}
.btn-oauth:hover { background: var(--surface-2); }
.btn-oauth:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--state-focus-ring);
}
/* ── OTP INPUT GROUP ─────────────────────────────────────────────
6-digit OTP code display — used after a "send code" step. Each digit
in its own 48x56 input. Auto-focus advances on input, backspace
retreats — wired in product JS (not in CSS). */
.otp-group {
display: flex;
gap: 8px;
justify-content: center;
margin: 16px 0;
}
.otp-input {
width: 48px;
height: 56px;
text-align: center;
font-size: 24px;
font-weight: 700;
background: var(--surface-1);
color: var(--text-primary);
border: 2px solid var(--outline-secondary);
border-radius: 8px;
outline: none;
transition: border-color var(--duration-fast);
font-family: var(--font-platform);
}
.otp-input:focus {
border-color: var(--outline-action);
box-shadow: 0 0 0 3px var(--state-focus-ring);
}
/* ── PAGE FOOTER (auth pages) ────────────────────────────────────
Centred, muted text + privacy/terms links. Sits at the bottom of
the .page flex column — margin-top:auto pushes it to the page floor
even when content is short. */
.footer {
text-align: center;
padding: 20px;
font-size: 12px;
color: var(--text-tertiary);
margin-top: auto;
}
.footer a {
color: var(--text-secondary);
text-decoration: none;
}
.footer a:hover { text-decoration: underline; }
/* ── PASSWORD POLICY HELPER ──────────────────────────────────────
Live rules checklist + Generate / Show buttons. Wired by
static/js/password_policy.js via PasswordPolicy.attach({ passwordInput,
emailInput }). The JS injects:
✓ 12+ characters
…
The rule .is-ok class flips colour to --container-success when the
rule passes — gives the user immediate visual feedback as they type. */
.password-policy {
margin-top: 10px;
font-size: 13px;
}
.password-policy__row {
display: flex;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.password-policy__gen,
.password-policy__toggle {
padding: 6px 10px;
font-size: 12px;
line-height: 1.2;
}
.password-policy__rules {
list-style: none;
padding: 0;
margin: 0;
}
.password-policy__rule {
display: flex;
align-items: center;
gap: 8px;
padding: 3px 0;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.4;
transition: color var(--duration-fast);
}
.password-policy__mark {
display: inline-block;
width: 16px;
text-align: center;
font-weight: 600;
color: var(--text-tertiary);
}
.password-policy__rule.is-ok { color: var(--container-success); }
.password-policy__rule.is-ok .password-policy__mark { color: var(--container-success); }
/* ── UTILITY HELPERS (server-rendered pages without Tailwind) ────
Tailwind users get these from Tailwind itself. Auth pages on Jinja2
without a Tailwind build (ECOFACTOR ID) get them here. !important
on .hidden so it beats display: rules from third-party scripts (e.g.
reCAPTCHA iframe wrappers) and any other inline overrides. */
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-sm { font-size: 13px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
/* ── BOX-SIZING RESET (server-rendered pages only) ───────────────
Tailwind preflight applies *, *::before, *::after { box-sizing:
border-box } automatically. Jinja2 auth pages without Tailwind need
this manually, otherwise input/button sizing gets surprising. */
* { box-sizing: border-box; }