/** * Auth Page Styles * * Shared across all standalone auth pages: signin, forgot-password, reset-password, * set-password, mfa/challenge, mfa/setup. Auth pages carry no shared chrome * (header.php / footer.php) and load site.css + this file only; their is * the shared includes/head.php (01-prd-marketing-restyle.md FR 20, 2026-09-03). * * Relies on CSS custom properties defined in site.css. * * Reuses site.css block classes: .wordmark, .section__eyebrow, .section__heading, * .form-group, .form-label, .form-input, .btn, .btn--primary, .flash, * .form-error-banner. * * Tier ceiling: Foundation only (design.md § Page Scope — a task surface). The * register site.css delivers — DM Sans, the serif heading, one spark kicker at * the top of the card, role tokens, the comet on the button — and nothing * above it: no .wave, no .starscape, no Moment spend. * * Dark-context form styling (label color, input text/border, placeholder, select * chevron) is inherited from site.css via the `.surface--dark` marker class * composed on `.auth-card` — the marker remaps the role/control tokens * (--text, --field-*, --select-*) that the base .form-* rules consume, and * paints the card's raised surface (css-conventions.md § Theming). The * Exception rules in this file (input background, focus, aria-invalid border) * are the auth-specific deltas on top of that base. * * Breakpoints: mobile 480px */ /** * Semi-transparent colors (8-digit hex #RRGGBBAA — see coding-conventions.md): * #ffffeb14 --color-text-light ~8% auth card edge highlight on dark surface * (The form-input focus ring is now the --focus role token, set in site.css per * context — no longer a literal here.) */ /* ========================================================================== Layout — Full-page centering ========================================================================== */ body { background-color: var(--color-bg-dark); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; } /* ========================================================================== Auth Card — centered container The `surface--dark` marker class (composed in markup) pulls in the dark-context form base styles from site.css. ========================================================================== */ .auth-card { width: 100%; max-width: 420px; background-color: var(--color-surface-dark); border: 1px solid #ffffeb14; border-radius: 0.8rem; padding: 2.5rem; } /* ========================================================================== Wordmark — orange brand mark linking to homepage Uses .wordmark base class from site.css for font-family/weight/tracking/case. ========================================================================== */ .auth-wordmark { display: block; /* Large-text size on purpose: --color-primary on the dark Raised surface measures 3.57:1, under the 4.5:1 floor for normal text but over the 3:1 floor for large text. Large means ≥ 24px at any weight, or ≥ 18.66px at bold (≥ 700) — and this is a small-chrome wordmark instance, so it takes --font-weight-wordmark-chrome (600, the optical-sizing split in site.css's token comment), which is not bold in that test. So the size carries the exemption alone: 2.4rem = 24px. History: 17px (flagged by axe 2026-08-25) → 20px at Montserrat 800 → the Phase A face swap moved wordmark weights onto per-instance tokens and this instance set none, so it inherited 400 and axe re-flagged it (restyle task 16.3, 2026-09-03) → 24px at 600. */ font-size: 2.4rem; font-weight: var(--font-weight-wordmark-chrome); color: var(--color-primary); text-decoration: none; text-align: center; margin-bottom: 2.4rem; } .auth-wordmark:hover { color: var(--color-primary-light); } .auth-wordmark:focus { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 0.2rem; } /* ========================================================================== Heading — the serif register comes from .section__heading (dual-classed in the markup: face, weight, tracking, line-height have one source). This rule owns only the size and rhythm that fit a 420 px card: 3xl, a step under the section-heading default (4xl is too loud for a card whose longest title runs to four words a line) and a step over the bold-sans 2xl it replaced (the serif at 400 carries less weight, so the old size reads small in it — the same reasoning as the utility pages' topic headings, restyle task 15.1). The kicker above it is site.css's .section__eyebrow unchanged. ========================================================================== */ .auth-card__title { font-size: var(--font-size-3xl); color: var(--text); margin-bottom: 2rem; } /* Subheading — optional description line beneath the page title. Used on /forgot-password. Reduced top gap (title already has margin-bottom) and explicit bottom margin to separate it from the error region below. */ .auth-subheading { margin-top: -0.8rem; margin-bottom: 1.6rem; font-size: var(--font-size-small); color: var(--text-muted); line-height: 1.5; } /* ========================================================================== Form — Auth-specific deltas on top of site.css `.surface--dark` base ========================================================================== */ /* Input background — auth uses --color-bg-dark (darker than the card surface) to create an inset "well" effect. site.css's `.surface--dark .form-input` defaults to --color-surface-dark; this override keeps the auth-card-specific visual treatment without re-declaring the rest of the dark-context styling. */ .auth-card .form-input { background-color: var(--color-bg-dark); } /* Focus state on auth inputs. * * The visible focus ring is the box-shadow (a solid 3px ring in the --focus color, * which resolves to the dark-context link orange on this .surface--dark card) plus * the orange border-color shift. The transparent outline is intentional — * Windows High Contrast Mode discards box-shadow entirely but preserves outline, * so this declaration is invisible under normal rendering and forced-visible * under HCM. Without it, HCM users have no focus indicator on auth inputs. * Mirrors the same pattern in site.css `.form-input:focus`. */ .auth-card .form-input:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus); } /* Error state on dark card */ .auth-card .form-input[aria-invalid="true"] { border-color: var(--color-error-dark); } /* Submit button — full-width; dark-bg hover matches site.css .section--dark variant. Carve-out: the color values below are button chrome — deliberate pairings with the orange fill (mirroring the base .btn--primary in site.css), NOT context-resolved foreground. They intentionally stay on primitives rather than the --text role token. */ .auth-card .btn--primary { width: 100%; text-align: center; } .auth-card .btn--primary:hover { background-color: var(--color-primary-light); color: var(--color-text-dark); /* dark ink on the orange hover fill (not theme foreground) */ } .auth-card .btn--primary:focus { /* Cream outline overrides the base's dark-ink one: a dark outline would vanish on the dark card. */ outline: 3px solid var(--color-text-light); outline-offset: 3px; } .auth-card .btn--primary:active { background-color: var(--color-primary); } /* ========================================================================== Error Region — uses .form-error-banner from site.css (shared class). ========================================================================== */ /* ========================================================================== Secondary Link — forgot password, back to sign in ========================================================================== */ /* The auth card is the dark Raised surface (--color-surface-dark #44403c). The brand orange --color-primary (#ff6a00) is only 3.58:1 on it (fails AA), and --color-primary-light (#ff8533) only 4.23:1 — so this link uses a lighter orange ramp scoped to the card: #ff9450 rest (4.70:1) brightening to #ffb380 on hover (5.88:1). The repaint lightened dark Raised (#34312e → #44403c), which is what pushed the old values under AA. */ .auth-link-secondary { display: block; text-align: center; margin-top: 1.6rem; font-size: var(--font-size-small); color: #ff9450; text-decoration: underline; } .auth-link-secondary:hover { color: #ffb380; } .auth-link-secondary:focus { outline: 3px solid var(--color-primary); /* focus ring: 3.58:1 ≥ 3:1 UI-component minimum */ outline-offset: 2px; border-radius: 0.2rem; } .auth-link-secondary:active { color: #ff9450; } /* ========================================================================== MFA Setup — QR code + manual Base32 secret (/mfa/setup) Setup-specific (the challenge page has no QR/secret), but kept here because all standalone auth pages share this stylesheet. Reuses site.css tokens: --font-typewriter (monospace), --color-bg-dark, --color-text-light. ========================================================================== */ .mfa-qr { margin: 0 0 1.6rem; text-align: center; } /* The QR is square but rendered server-side at a pixel size that varies with the encoded URI length, so it is sized in CSS (not via width/height attributes) to a fixed display box. height: auto preserves the square aspect ratio and avoids the locked-height distortion noted in coding-conventions. The white frame guarantees a light quiet zone so the dark card never bleeds into the finder patterns and breaks scanning. */ .mfa-qr__img { width: 200px; max-width: 100%; height: auto; background-color: #ffffff; padding: 0.8rem; border-radius: 0.4rem; } .mfa-qr__caption { margin-top: 0.8rem; font-size: var(--font-size-small); color: var(--text-muted); } .mfa-qr-fallback { margin: 0 0 1.6rem; font-size: var(--font-size-small); color: var(--text-muted); text-align: center; } .mfa-manual-label { margin: 0 0 0.4rem; font-size: var(--font-size-small); color: var(--text-muted); text-align: center; } /* Monospace secret block on a darker inset surface. word-break keeps the 32-char Base32 string inside the card on narrow viewports. */ .mfa-secret { margin: 0 0 2rem; padding: 1rem 1.2rem; font-family: var(--font-typewriter); font-size: var(--font-size-base); letter-spacing: 0.15em; text-align: center; word-break: break-all; color: var(--text); background-color: var(--color-bg-dark); border-radius: 0.4rem; } /* ========================================================================== Responsive — 480px and below: full-width card ========================================================================== */ @media (max-width: 480px) { body { padding: 0; align-items: flex-start; justify-content: flex-start; } .auth-card { max-width: 100%; border-radius: 0; border-left: none; border-right: none; padding: 2rem 1.5rem; } }