/* apps/auth — sign-in / sign-up / verify / forgot / reset surfaces. * Brand tokens pulled from services/cake-mastery-brand/tokens/brand-style-profile.json. * Pure CSS, no framework. * * Design rules (locked in docs/plans/0021): * - Minimal-utility layout. No imagery, testimonials, or social proof. * - 16px+ input font (prevents iOS Safari zoom on focus). * - 44pt minimum touch targets on interactive elements. * - :focus-visible rings (not :focus) so mouse clicks don't show rings. * - WCAG 2.2 AA contrast (4.5:1 body, 3:1 large/UI). */ :root { /* Soft pink to lavender gradient, modeled on Mighty Networks' managed-login * background (services/cake-mastery-brand/moodboard/assets/mighty-network-primary.png). * --bg is the gradient applied to ; --bg-solid is the matched mid-tone * for areas that need a flat fill (footer, theme-color). Reasoned from the * reference image: pale pink (#FCEEF0) top-left to pale lavender (#DCE0EF) * bottom-right at ~135deg. */ --bg: linear-gradient(135deg, #FCEEF0 0%, #ECE9F4 55%, #DCE0EF 100%); --bg-solid: #ECE9F4; --card: #FFFFFF; --ink: #1F1B16; /* brand: ink */ --ink-2: #4A4540; /* brand: ink-2 muted */ --ink-3: #6D6A6F; /* brand: ink-3 tertiary (clears WCAG AA 4.5:1 on white) */ --rule: #E8E1D4; /* brand: rule */ --accent: #F65CAF; /* brand: brand-pink — display/accent only, NOT button grounds */ --accent-deep: #D63D8F; /* brand: brand-pink-deep (hover, focus rings) */ /* brand: brand-pink-ink — the accessibility-derived button ground. White-on- * brand-pink is only ~3:1 (fails WCAG AA 4.5:1 for the bold-but-not-large * button label); this darker shade clears 4.5:1. Mirrors public-site-3's * .btn.primary (--c-brand-pink-ink) so the CTA matches the master brand. */ --accent-strong: #B5256F; --accent-soft: #FDEEF5; /* brand: brand-pink-soft (info banner ground) */ --accent-ink: #FFFFFF; --error: #B3261E; --error-soft: #FDECEA; --success: #1A7D4D; --success-soft: #E6F4EC; --info: #145A8C; --radius: 8px; --radius-sm: 4px; --shadow-card: 0 1px 2px rgba(31, 27, 22, 0.04), 0 4px 16px rgba(31, 27, 22, 0.06); --focus-ring: 0 0 0 2px var(--card), 0 0 0 4px var(--accent-deep); } /* League Spartan self-hosting deferred to a follow-up under tcn-mi8t. * H1 falls back to system sans-serif until then; the brand identity is * carried by the logo + brand-pink CTA + soft gradient ground. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: 1.5; min-height: 100vh; -webkit-text-size-adjust: 100%; } body { background: var(--bg-solid); /* Gradient image fixed so it doesn't tile on mobile keyboard show/hide. */ background-image: var(--bg); background-attachment: fixed; background-size: cover; } body { display: flex; flex-direction: column; min-height: 100vh; } .auth-header { padding: 1.75rem 1.5rem 1rem; display: flex; justify-content: center; } .brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); border-radius: var(--radius-sm); } .brand:focus-visible { outline: none; box-shadow: var(--focus-ring); } .brand-logo { height: 64px; width: 64px; display: block; /* logo.webp is VP8 (no alpha) with a white square outside the disc. Clip * to a circle so the white corners don't read against the gradient. * Disc itself is already round — clipping only crops the dead pixels. */ border-radius: 50%; } .auth-main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0.5rem 1.25rem 1.25rem; } .auth-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 2rem; width: 100%; max-width: 440px; margin-bottom: 2rem; } /* Banner above the auth-card when an existing session cookie is detected. * Lets the user explicitly sign out and use a different account (rather than * being silently auto-completed as the previous user). User-reported 2026-05-08. */ .auth-banner { background: rgba(255, 255, 255, 0.7); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.875rem 1rem; width: 100%; max-width: 440px; margin: 0 auto 0.75rem; font-size: 0.9rem; color: var(--ink-2); display: flex; flex-direction: column; gap: 0.25rem; align-items: stretch; } .auth-banner-text { margin: 0; color: var(--ink); } .auth-banner .inline-form { margin: 0; } .auth-banner button.link { text-align: left; padding: 0; min-height: 0; font-size: 0.9rem; } .auth-card h1 { margin: 0 0 0.25rem; font-size: 1.625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .auth-note { color: var(--ink-2); margin: 0.5rem 0 1.25rem; font-size: 0.95rem; } /* Top-of-form flash for global states only (rate_limited, unavailable, must_agree, resent). * Field-level errors render inline below the field via .field-error. */ .flash { margin: 0 0 1rem; /* Extra left padding leaves room for the absolutely-positioned icon. * Block layout (not flex) so inline children like wrap with * the surrounding text instead of becoming separate columns. */ padding: 0.75rem 1rem 0.75rem 2.5rem; border-radius: var(--radius); font-size: 0.9rem; position: relative; } .flash::before { position: absolute; left: 1rem; top: 0.75rem; width: 1.125rem; height: 1.125rem; font-size: 1rem; line-height: 1; } .flash-error { background: var(--error-soft); color: var(--error); } .flash-error::before { content: "⚠"; } .flash-success { background: var(--success-soft); color: var(--success); } .flash-success::before { content: "✓"; } .flash-info { background: var(--accent-soft); color: var(--ink); } .flash-info::before { content: "ℹ"; } /* Field-level error: rendered immediately below the relevant input. */ .field-error { display: flex; gap: 0.375rem; align-items: center; margin: 0.375rem 0 0; color: var(--error); font-size: 0.875rem; line-height: 1.4; } .field-error::before { content: "⚠"; flex: none; font-size: 0.875rem; } label { display: block; margin: 0 0 1rem; } label > span.label-text { display: block; font-size: 0.875rem; color: var(--ink-2); margin-bottom: 0.375rem; font-weight: 500; } label small.help-text { display: block; margin-top: 0.375rem; color: var(--ink-3); font-size: 0.8125rem; } label .help-text-above { display: block; margin-bottom: 0.375rem; color: var(--ink-3); font-size: 0.8125rem; } input[type="email"], input[type="password"], input[type="text"] { width: 100%; min-height: 44px; padding: 0.625rem 0.875rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); color: var(--ink); font-size: 1rem; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none; appearance: none; } input:focus { outline: none; } input:focus-visible { border-color: var(--accent-deep); box-shadow: 0 0 0 3px rgba(214, 61, 143, 0.18); } input[aria-invalid="true"] { border-color: var(--error); } input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.16); } input[readonly] { background: #F4F2F8; color: var(--ink-2); } .row { display: flex; gap: 0.75rem; } .row label { flex: 1; min-width: 0; } @media (max-width: 380px) { .row { flex-direction: column; gap: 0; } } /* Password input + show-password toggle wrapper. Must be block so the * absolutely-positioned toggle has a definite containing box. */ .password-wrapper { position: relative; display: block; } .password-wrapper input { padding-right: 3rem; } .password-toggle { position: absolute; top: 0; right: 0; width: 44px; height: 100%; min-height: 44px; background: transparent; border: 0; cursor: pointer; color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); padding: 0; } .password-toggle:hover { color: var(--ink-2); } .password-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-deep); color: var(--ink); } .password-toggle svg { width: 20px; height: 20px; display: block; pointer-events: none; } .password-toggle .icon-show { display: block; } .password-toggle .icon-hide { display: none; } .password-toggle[aria-pressed="true"] .icon-show { display: none; } .password-toggle[aria-pressed="true"] .icon-hide { display: block; } /* Password strength meter. */ .strength { margin: 0.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; height: 4px; } .strength-segment { background: var(--rule); border-radius: 2px; transition: background-color 0.15s; } .strength[data-score="1"] .strength-segment:nth-child(-n+1), .strength[data-score="2"] .strength-segment:nth-child(-n+2), .strength[data-score="3"] .strength-segment:nth-child(-n+3), .strength[data-score="4"] .strength-segment:nth-child(-n+4) { background: var(--accent-deep); } .strength[data-score="1"] .strength-segment:nth-child(-n+1) { background: var(--error); } .strength[data-score="2"] .strength-segment:nth-child(-n+2) { background: #D97706; } .strength[data-score="3"] .strength-segment:nth-child(-n+3) { background: #1A7D4D; } .strength[data-score="4"] .strength-segment:nth-child(-n+4) { background: var(--success); } .strength-label { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--ink-3); min-height: 1.2em; } label.checkbox { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9rem; margin: 1rem 0 1.5rem; min-height: 44px; padding: 0.625rem 0; cursor: pointer; } label.checkbox input { margin-top: 0.2rem; min-width: 18px; min-height: 18px; cursor: pointer; accent-color: var(--accent); } label.checkbox input:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; } button { width: 100%; min-height: 48px; padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 1rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: background-color 0.15s, transform 0.05s; } button.primary { background: var(--accent-strong); color: var(--accent-ink); border-color: var(--accent-strong); } button.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } button.primary:active { transform: translateY(1px); } button:focus-visible { outline: none; box-shadow: var(--focus-ring); } button.link { background: none; border: none; color: var(--accent-strong); text-decoration: underline; width: auto; padding: 0.5rem 0; font-weight: 400; min-height: 44px; } button.link:hover { color: var(--accent-deep); } .inline-form { margin-top: 0.25rem; } /* Logout consent page (oidc-provider logoutSource — see src/oidc.ts). */ .logout-actions { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 1.25rem; } .auth-links { margin-top: 1.25rem; font-size: 0.9rem; color: var(--ink-2); } /* When links are alternative actions (not inline secondary links), stack * them vertically with proper spacing so they don't run together. Used by * sign-in-standalone where each link is a distinct primary path. */ .auth-links-stack { display: flex; flex-direction: column; gap: 0.5rem; } .auth-links-stack a { display: block; padding: 0.625rem 0; min-height: 44px; } .auth-links a { color: var(--accent-strong); text-decoration: none; padding: 0.25rem 0; display: inline-block; } .auth-links a:hover { text-decoration: underline; color: var(--accent-deep); } .auth-links a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-deep); border-radius: var(--radius-sm); } /* Error pages (ADR 0034). Reuses .auth-card; adds the eyebrow, the body line, * the single action link, and the optional reference block. No new colour * tokens — error pages stay calm (brand-pink action, never a wall of red). */ .error-card { text-align: left; } .error-eyebrow { margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .error-body { margin: 0.5rem 0 1.5rem; color: var(--ink-2); font-size: 0.95rem; } /* Styled as button.primary, but it's an — a navigation, not a form submit. */ .error-action { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--accent-strong); border: 1px solid var(--accent-strong); color: var(--accent-ink); font-size: 1rem; font-weight: 600; text-decoration: none; transition: background-color 0.15s; } .error-action:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .error-action:focus-visible { outline: none; box-shadow: var(--focus-ring); } .error-ref { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--ink-3); line-height: 1.6; } .error-ref code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95em; color: var(--ink-2); } .error-ref a { color: var(--accent-strong); text-decoration: underline; } .error-ref a:hover { color: var(--accent-deep); } .auth-footer { border-top: 1px solid var(--rule); padding: 1.5rem; font-size: 0.825rem; color: var(--ink-3); text-align: center; /* Transparent so the body gradient shows through the footer. */ background: transparent; } .auth-footer p { margin: 0.25rem 0; } .auth-footer a { color: var(--ink-2); text-decoration: underline; } .auth-footer a:hover { color: var(--ink); } .auth-footer a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-deep); border-radius: var(--radius-sm); }