/* Sourcerer — auth pages (sign in, register, password reset, verify email). Self-contained light theme that matches the redesigned React hub (frontend/): #F5F5F7 canvas, white rounded cards, Apple-blue (#0071E3) accents, and the system UI font. The SPA imports Inter but never applies a font-family, so it renders in the platform system font — we match that rather than pulling an external webfont onto the sign-in path. These pages depend on NOTHING from the dark classic hub.css. Behaviour contract with auth.js is unchanged: the markup keeps every hook (data-auth-form, [data-auth-error]/[data-auth-success], .auth-fields, data-multi-only/-single-only, [data-verify-*]) and the tag stays attribute-free so app.py's literal `html.replace("", …)` mode-stamp still matches. Styling never drives behaviour. */ /* The hidden attribute must always win. auth.js toggles boxes and the mode-only controls via the `hidden` property; the flex display rules further down (.auth-fields, .auth-links, .auth-divider, .btn) would otherwise re-reveal elements meant to stay hidden. This mirrors hub.css and must stay first. */ [hidden] { display: none !important; } /* Pre-hide the controls that only work in the other auth mode, using the mode app.py stamps on server-side (before first paint). This removes the one-frame FOUC where the email field / Google button / links flash on a single-operator hub before the deferred auth.js hides them. auth.js still performs the hide for unstamped copies (served straight from /static). */ body[data-auth-mode="single"] [data-multi-only] { display: none !important; } body[data-auth-mode="multi"] [data-single-only] { display: none !important; } *, *::before, *::after { box-sizing: border-box; } :root { --auth-bg: #f5f5f7; --auth-surface: #ffffff; --auth-field-bg: #ffffff; --auth-text: #1d1d1f; --auth-text-2: #6e6e73; --auth-text-3: #737377; --auth-placeholder:#737377; --auth-line: rgba(0, 0, 0, 0.12); --auth-line-soft: rgba(0, 0, 0, 0.06); --auth-accent: #0071e3; --auth-accent-hi: #0077ed; --auth-accent-lo: #0063cc; --auth-focus: rgba(0, 113, 227, 0.16); --auth-green-fg: #0c6e30; --auth-green-bg: rgba(48, 209, 88, 0.12); --auth-green-ln: rgba(48, 209, 88, 0.28); --auth-red-fg: #d70015; --auth-red-bg: rgba(255, 69, 58, 0.10); --auth-red-ln: rgba(255, 69, 58, 0.26); --auth-radius: 18px; --auth-radius-sm: 10px; --auth-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 34px rgba(0, 0, 0, 0.09); --auth-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif; --auth-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace; color-scheme: light; } html { height: 100%; } body { margin: 0; min-height: 100%; background: var(--auth-bg); color: var(--auth-text); font-family: var(--auth-font); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---------- layout: centered card ---------- */ .login-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { width: 100%; max-width: 384px; background: var(--auth-surface); border: 1px solid var(--auth-line-soft); border-radius: var(--auth-radius); box-shadow: var(--auth-shadow); padding: 32px 30px; display: flex; flex-direction: column; gap: 16px; } /* ---------- header: brand lockup + title ---------- */ .auth-head { text-align: center; } .auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; } .auth-logo { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, #0a84ff, #0071e3); box-shadow: 0 4px 12px rgba(0, 113, 227, 0.30); color: #fff; } .auth-logo svg { width: 24px; height: 24px; display: block; } .auth-wordmark { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--auth-text); } .login-card h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--auth-text); } .login-card .sub { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--auth-text-2); text-align: center; } /* verify-email's body copy is a direct child of the card (it has no .auth-head to sit under), so it leans on the card's flex gap for spacing, not the tuck-under margin used when the sub follows the title inside .auth-head. */ .login-card > .sub { margin: 0; } /* ---------- fields ---------- */ .auth-fields { display: flex; flex-direction: column; gap: 14px; } label.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--auth-text-2); } label.field > input { width: 100%; } input[type="text"], input[type="email"], input[type="password"], input[type="number"] { width: 100%; min-width: 0; background: var(--auth-field-bg); color: var(--auth-text); border: 1px solid var(--auth-line); border-radius: var(--auth-radius-sm); padding: 11px 12px; font-family: inherit; font-size: 15px; line-height: 1.3; transition: border-color 0.15s ease, box-shadow 0.15s ease; } input::placeholder { color: var(--auth-placeholder); } input:focus { outline: none; border-color: var(--auth-accent); box-shadow: 0 0 0 3px var(--auth-focus); } /* box-shadow rings are not painted in Windows High Contrast / forced-colors mode, which would leave a focused input with no visible focus indicator. Restore a real outline there (WCAG 2.4.7 Focus Visible / 1.4.13). */ @media (forced-colors: active) { input:focus { outline: 2px solid Highlight; outline-offset: 1px; } } input.mono { font-family: var(--auth-mono); letter-spacing: 0.02em; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 11px 16px; border: 1px solid transparent; border-radius: var(--auth-radius-sm); font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } .btn:focus-visible { outline: 2px solid var(--auth-accent); outline-offset: 2px; } .btn-primary { background: var(--auth-accent); border-color: var(--auth-accent); color: #fff; } .btn-primary:hover { background: var(--auth-accent-hi); border-color: var(--auth-accent-hi); } .btn-primary:active { background: var(--auth-accent-lo); border-color: var(--auth-accent-lo); } .btn:disabled { opacity: 0.5; cursor: default; } .btn-google { background: var(--auth-surface); color: var(--auth-text); border-color: var(--auth-line); } .btn-google:hover { background: #f5f5f7; border-color: rgba(0, 0, 0, 0.16); text-decoration: none; } .btn-google svg { width: 16px; height: 16px; flex: none; } /* ---------- divider ---------- */ .auth-divider { display: flex; align-items: center; gap: 12px; color: var(--auth-text-3); font-size: 12px; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--auth-line); } /* ---------- hints & messages ---------- */ .auth-hint { margin: -4px 0 0; color: var(--auth-text-3); font-size: 12px; line-height: 1.45; } .login-error, .auth-success { border-radius: var(--auth-radius-sm); padding: 10px 12px; font-size: 13px; line-height: 1.4; } .login-error { color: var(--auth-red-fg); background: var(--auth-red-bg); border: 1px solid var(--auth-red-ln); } .auth-success { color: var(--auth-green-fg); background: var(--auth-green-bg); border: 1px solid var(--auth-green-ln); } /* ---------- links ---------- */ .auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; } .auth-links a { color: var(--auth-accent); text-decoration: none; } .auth-links a:hover { text-decoration: underline; } /* ---------- narrow screens ---------- */ @media (max-width: 420px) { .login-wrap { padding: 16px; align-items: flex-start; padding-top: 40px; } .login-card { padding: 26px 22px; } .login-card h1 { font-size: 20px; } } /* ---------- dark (mirrors the SPA's .dark palette; opt-in via OS setting) ---------- */ @media (prefers-color-scheme: dark) { :root { --auth-bg: #0b0b0d; --auth-surface: #1c1c1e; --auth-field-bg: #2c2c2e; --auth-text: #f5f5f7; --auth-text-2: #d1d1d6; --auth-text-3: #98989d; --auth-placeholder: #8e8e93; --auth-line: rgba(255, 255, 255, 0.14); --auth-line-soft: rgba(255, 255, 255, 0.10); --auth-accent: #0a84ff; --auth-accent-hi: #3395ff; --auth-accent-lo: #0071e3; --auth-focus: rgba(10, 132, 255, 0.30); --auth-green-fg: #4ade80; --auth-green-bg: rgba(48, 209, 88, 0.16); --auth-green-ln: rgba(48, 209, 88, 0.32); --auth-red-fg: #ff6961; --auth-red-bg: rgba(255, 69, 58, 0.16); --auth-red-ln: rgba(255, 69, 58, 0.32); --auth-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.5); color-scheme: dark; } .auth-logo { box-shadow: 0 4px 14px rgba(10, 132, 255, 0.40); } .btn-google:hover { background: #2c2c2e; border-color: rgba(255, 255, 255, 0.22); } /* The dark link/focus accent (#0a84ff) only reaches 3.65:1 under white button text; the filled primary button needs a darker fill to clear AA 4.5:1. */ .btn-primary { background: #0071e3; border-color: #0071e3; } .btn-primary:hover { background: #0062cc; border-color: #0062cc; } .btn-primary:active { background: #005bbf; border-color: #005bbf; } }