/* ───────────────────────────────────────────────────────────────────────── auth.css — shared styling for the pre-auth pages (sign in, set/reset password, forgot password). These render OUTSIDE the React app (served before login), so they can't use the Tailwind/token pipeline — this file mirrors the app's theme by hand so the sign-in moment feels like the rest of the app: a logo-led brand, a white card floating on a soft airy canvas, a blue primary. THEME: light by default. Each template runs a tiny inline script that adds `theme-dark` to when the user's stored preference (localStorage `vp-light` === 'false') is dark — so the sign-in screen honors the theme they last used, without a flash. ───────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --auth-primary: #2159d6; /* app blue, a touch deeper for a richer CTA */ --auth-primary-hover: #1a49bd; --auth-primary-shadow: rgba(33, 89, 214, 0.38); --auth-ring: rgba(33, 89, 214, 0.18); --auth-fg: #101b2e; --auth-muted: #5b6472; --auth-faint: #8a93a3; /* footer / very secondary */ --auth-card: #ffffff; --auth-card-border: transparent; --auth-input-bg: #ffffff; --auth-input-border: #cbd2dc; --auth-input-ph: #9aa4b2; --auth-error-fg: #b42318; --auth-error-bg: rgba(217, 45, 32, 0.07); --auth-error-border: rgba(217, 45, 32, 0.22); --auth-ok-fg: #067647; --auth-ok-bg: rgba(6, 118, 71, 0.08); --auth-ok-border: rgba(6, 118, 71, 0.22); --auth-canvas: radial-gradient(1100px 520px at 50% -12%, rgba(33, 89, 214, 0.10), transparent 60%), linear-gradient(180deg, #fbfcfe 0%, #eef2f8 100%); --auth-card-shadow: 0 24px 60px -24px rgba(16, 24, 40, 0.22), 0 4px 14px -8px rgba(16, 24, 40, 0.10); --auth-font-head: 'Barlow Condensed', system-ui, sans-serif; --auth-font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --auth-radius: 16px; } html.theme-dark { --auth-primary: #3568e6; --auth-primary-hover: #4a7bf0; --auth-primary-shadow: rgba(53, 104, 230, 0.45); --auth-ring: rgba(59, 130, 246, 0.35); --auth-fg: #e8edf5; --auth-muted: #94a2b8; --auth-faint: #6b7a92; --auth-card: #16213a; --auth-card-border: rgba(255, 255, 255, 0.07); --auth-input-bg: #0f1a2e; --auth-input-border: #2c3a54; --auth-input-ph: #5f6d82; --auth-error-fg: #fca5a5; --auth-error-bg: rgba(239, 68, 68, 0.12); --auth-error-border: rgba(239, 68, 68, 0.30); --auth-ok-fg: #6ee7b7; --auth-ok-bg: rgba(16, 185, 129, 0.12); --auth-ok-border: rgba(16, 185, 129, 0.30); --auth-canvas: radial-gradient(1100px 520px at 50% -12%, rgba(59, 130, 246, 0.16), transparent 60%), linear-gradient(180deg, #0e1a30 0%, #0a1322 100%); --auth-card-shadow: 0 26px 64px -26px rgba(0, 0, 0, 0.6); } .auth-body { font-family: var(--auth-font-body); color: var(--auth-fg); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--auth-canvas); background-attachment: fixed; -webkit-font-smoothing: antialiased; } .auth-wrap { width: 100%; max-width: 400px; } /* ── Brand (logo is the hero) ──────────────────────────────────────────── */ .auth-brand { text-align: center; margin-bottom: 30px; } .auth-brand-logo { display: block; height: 92px; width: auto; max-width: 260px; margin: 0 auto 12px; object-fit: contain; } .auth-brand-mark { /* logo-load fallback only */ width: 68px; height: 68px; margin: 0 auto 12px; background: var(--auth-primary); color: #fff; font-family: var(--auth-font-head); font-weight: 700; font-size: 26px; letter-spacing: 0.5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; box-shadow: 0 8px 20px -6px var(--auth-primary-shadow); } .auth-brand-sub { font-size: 12px; color: var(--auth-muted); letter-spacing: 1.2px; text-transform: uppercase; display: block; } /* ── Card ──────────────────────────────────────────────────────────────── */ .auth-card { background: var(--auth-card); border: 1px solid var(--auth-card-border); border-radius: var(--auth-radius); padding: 34px 32px 30px; box-shadow: var(--auth-card-shadow); } .auth-title { font-family: var(--auth-font-body); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--auth-fg); margin-bottom: 22px; } .auth-hint { font-size: 13.5px; line-height: 1.55; color: var(--auth-muted); margin: -12px 0 22px; /* pull up under the title, keep air below */ } .auth-hint b, .auth-hint strong { color: var(--auth-fg); font-weight: 600; } /* ── Fields ────────────────────────────────────────────────────────────── */ .auth-field { margin-bottom: 18px; } .auth-field label { display: block; font-size: 12.5px; font-weight: 500; color: var(--auth-muted); margin-bottom: 7px; } .auth-input { width: 100%; background: var(--auth-input-bg); border: 1px solid var(--auth-input-border); border-radius: 10px; color: var(--auth-fg); font-family: var(--auth-font-body); font-size: 14.5px; padding: 12px 13px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .auth-input::placeholder { color: var(--auth-input-ph); } .auth-input:focus { border-color: var(--auth-primary); box-shadow: 0 0 0 3px var(--auth-ring); } .auth-input.auth-code { text-align: center; font-size: 30px; letter-spacing: 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; padding: 15px 12px; text-indent: 12px; } /* ── Remember row ──────────────────────────────────────────────────────── */ .auth-remember { display: flex; align-items: center; gap: 9px; margin: 6px 0 24px; } .auth-remember input[type="checkbox"] { accent-color: var(--auth-primary); width: 15px; height: 15px; cursor: pointer; } .auth-remember label { font-size: 13.5px; color: var(--auth-muted); cursor: pointer; } /* ── Button ────────────────────────────────────────────────────────────── */ .auth-btn { width: 100%; background: var(--auth-primary); color: #fff; font-family: var(--auth-font-body); font-weight: 600; font-size: 14.5px; letter-spacing: 0.01em; border: none; border-radius: 10px; padding: 13px; cursor: pointer; transition: background 0.15s, box-shadow 0.15s, transform 0.05s; box-shadow: 0 8px 18px -8px var(--auth-primary-shadow); } .auth-btn:hover { background: var(--auth-primary-hover); box-shadow: 0 10px 22px -8px var(--auth-primary-shadow); } .auth-btn:active { transform: translateY(1px); } .auth-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--auth-ring); } .auth-btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; } /* ── Messages ──────────────────────────────────────────────────────────── */ .auth-error, .auth-success { border-radius: 10px; font-size: 13px; line-height: 1.5; padding: 11px 13px; margin-bottom: 18px; } .auth-error { background: var(--auth-error-bg); border: 1px solid var(--auth-error-border); color: var(--auth-error-fg); } .auth-success { background: var(--auth-ok-bg); border: 1px solid var(--auth-ok-border); color: var(--auth-ok-fg); } .auth-error a { color: var(--auth-error-fg); font-weight: 600; } /* ── Footer link row (in-card) ─────────────────────────────────────────── */ .auth-foot { text-align: center; margin-top: 20px; font-size: 13.5px; color: var(--auth-muted); } .auth-foot a { color: var(--auth-primary); font-weight: 500; text-decoration: none; } .auth-foot a:hover { text-decoration: underline; } /* ── Grounding legal line (below the card) ─────────────────────────────── */ .auth-legal { text-align: center; margin-top: 22px; font-size: 12px; letter-spacing: 0.2px; color: var(--auth-faint); } @media (max-width: 440px) { .auth-card { padding: 28px 22px 24px; } .auth-brand-logo { height: 80px; } }