/* styles/auth.css — standalone styling for /login, /accept-invite, /reset-password. * * Mobile-first per STYLE.md §4. KGF brand colors (Race Red) but neutral * backgrounds — these pages predate the user knowing which dealership they * belong to, so they stay calm. Honors light/dark via the cookie-driven * data-theme attribute set in before the body renders (no flash). */ :root { --auth-bg: #f4f5f7; --auth-card: #ffffff; --auth-fg: #111; --auth-muted: #5a5f66; --auth-border: #d8dade; --auth-input: #fafbfc; --auth-accent: #bf0a30; /* KGF Race Red */ --auth-accent-hover: #a30828; --auth-ms: #2f2f2f; --auth-ms-hover: #181818; --auth-err: #b91c1c; --auth-ok: #15803d; --auth-shadow: 0 8px 24px rgba(20, 20, 30, 0.08); } [data-theme="dark"] { --auth-bg: #0e1116; --auth-card: #161a21; --auth-fg: #ecedef; --auth-muted: #9aa0a6; --auth-border: #2a2f37; --auth-input: #1c2129; --auth-ms: #ffffff; --auth-ms-hover: #ebebeb; --auth-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--auth-bg); color: var(--auth-fg); font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; touch-action: pan-x pan-y; } .auth-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; } .auth-card { width: 100%; max-width: 420px; background: var(--auth-card); border: 1px solid var(--auth-border); border-radius: 16px; box-shadow: var(--auth-shadow); padding: 32px 28px 28px; } .auth-logo { display: flex; justify-content: center; margin-bottom: 12px; } .auth-logo img { height: 36px; width: auto; } .auth-logo .logo-dark { display: none; } [data-theme="dark"] .auth-logo .logo-light { display: none; } [data-theme="dark"] .auth-logo .logo-dark { display: inline; } .auth-h1 { font-family: 'Ford Antenna Cond', 'Geist', system-ui, sans-serif; font-weight: 700; letter-spacing: 0.02em; font-size: 22px; text-align: center; margin: 4px 0 4px; } .auth-subtitle { text-align: center; color: var(--auth-muted); font-size: 14px; margin: 0 0 20px; } .auth-btn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: 10px; border: 0; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, transform 0.05s ease; } .auth-btn:active { transform: translateY(1px); } .auth-btn:disabled { opacity: 0.55; cursor: not-allowed; } .auth-btn-primary { background: var(--auth-accent); color: #fff; } .auth-btn-primary:hover:not(:disabled) { background: var(--auth-accent-hover); } .auth-btn-ms { background: var(--auth-ms); color: #fff; margin-bottom: 16px; } [data-theme="dark"] .auth-btn-ms { color: #111; } .auth-btn-ms:hover:not(:disabled) { background: var(--auth-ms-hover); } .auth-btn-ms svg { width: 18px; height: 18px; flex: 0 0 18px; } .auth-divider { display: flex; align-items: center; gap: 12px; color: var(--auth-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; margin: 16px 0; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--auth-border); } .auth-field { margin-bottom: 14px; } .auth-field-mfa { margin-bottom: 18px; } .auth-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--auth-muted); } .auth-input { width: 100%; padding: 11px 12px; border: 1px solid var(--auth-border); border-radius: 9px; background: var(--auth-input); color: var(--auth-fg); font: inherit; font-size: 16px; outline: none; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .auth-input:focus { border-color: var(--auth-accent); box-shadow: 0 0 0 3px rgba(191, 10, 48, 0.18); } .auth-code-input { font-size: 22px; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; } .auth-msg { font-size: 13px; padding: 9px 12px; border-radius: 8px; margin-bottom: 14px; display: none; } .auth-msg.err { background: rgba(185, 28, 28, 0.08); color: var(--auth-err); border: 1px solid rgba(185, 28, 28, 0.22); display: block; } .auth-msg.ok { background: rgba(21, 128, 61, 0.08); color: var(--auth-ok); border: 1px solid rgba(21, 128, 61, 0.22); display: block; } .auth-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: 13px; } .auth-link { color: var(--auth-accent); text-decoration: none; font-weight: 500; } .auth-link:hover { text-decoration: underline; } .auth-hint { color: var(--auth-muted); font-size: 12px; line-height: 1.35; margin: 7px 0 0; } .auth-back { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; color: var(--auth-muted); cursor: pointer; font-size: 13px; padding: 0; margin-top: 10px; } .auth-back:hover { color: var(--auth-fg); } .hidden { display: none !important; } @media (max-width: 480px) { .auth-card { padding: 24px 20px 22px; border-radius: 14px; } .auth-h1 { font-size: 20px; } }