/* =================================================================== auth.css — login + signup, restyled to match the landing page. Loaded AFTER dashboard.css on /login and /signup so it overrides the app's generic auth shell with the marketing brand: Inter Tight display type, the pink→purple gradient, pill buttons and soft floating cards. Everything is scoped under .auth-page so it can never leak into the app. (Fonts are loaded via in each page's .) =================================================================== */ .auth-page { /* Landing brand tokens, scoped locally so this file is self-contained and doesn't depend on whichever theme dashboard.css resolves to. */ --a-grad: linear-gradient(100deg, #E85BC4 0%, #B34DB4 48%, #7B3FD0 100%); --a-accent: #B34DB4; --a-pink: #E85BC4; --a-ink: #0C0C0E; --a-muted: #6A6A72; --a-paper: #FAFAF8; --a-line: rgba(0, 0, 0, 0.10); --a-display: "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --a-body: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background: radial-gradient(1100px 520px at 50% -10%, rgba(232, 91, 196, 0.10), transparent 60%), var(--a-paper); font-family: var(--a-body); } /* ── Card ─────────────────────────────────────────────────────────── */ .auth-page .auth-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 24px; padding: 40px 36px; max-width: 420px; box-shadow: 0 1px 2px rgba(12, 12, 14, 0.04), 0 18px 50px -22px rgba(123, 63, 208, 0.28); } .auth-page .auth-card.auth-card-wide { max-width: 520px; } /* ── Brand lockup ─────────────────────────────────────────────────── */ .auth-page .auth-brand { gap: 11px; margin-bottom: 26px; } .auth-page .auth-logo { width: 30px; height: 30px; min-width: 30px; flex-shrink: 0; object-fit: contain; display: block; } .auth-page .auth-brand-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--a-grad); box-shadow: 0 8px 20px -8px rgba(179, 77, 180, 0.6); font-family: var(--a-display); font-weight: 800; font-size: 19px; color: #fff; } .auth-page .auth-brand-text { font-family: var(--a-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--a-ink); } /* ── Headings ─────────────────────────────────────────────────────── */ .auth-page .auth-title { font-family: var(--a-display); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.025em; color: var(--a-ink); margin: 0 0 8px; } .auth-page .auth-subtitle { font-family: var(--a-body); font-size: 14.5px; line-height: 1.5; color: var(--a-muted); margin: 0 0 30px; } /* ── Form fields ──────────────────────────────────────────────────── */ .auth-page .form-group { margin-bottom: 18px; } .auth-page .form-label { display: block; font-family: var(--a-body); font-weight: 600; font-size: 13px; color: var(--a-ink); margin-bottom: 7px; } .auth-page .form-input, .auth-page input[type="text"], .auth-page input[type="email"], .auth-page input[type="password"], .auth-page input[type="tel"], .auth-page input[type="url"], .auth-page input[type="number"], .auth-page select, .auth-page textarea { width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px; font-family: var(--a-body); font-size: 15px; color: var(--a-ink); background: var(--a-paper); border: 1px solid var(--a-line); border-radius: 12px; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; -webkit-appearance: none; appearance: none; } .auth-page textarea { height: auto; min-height: 90px; padding: 12px 14px; resize: vertical; } .auth-page .form-input::placeholder, .auth-page input::placeholder, .auth-page textarea::placeholder { color: #A8A8B0; } .auth-page .form-input:focus, .auth-page input:focus, .auth-page select:focus, .auth-page textarea:focus { outline: none; background: #fff; border-color: var(--a-accent); box-shadow: 0 0 0 3px rgba(179, 77, 180, 0.15); } /* ── Buttons — the landing pill gradient ──────────────────────────── */ .auth-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--a-display); font-weight: 600; font-size: 15px; padding: 14px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform 0.12s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s; } .auth-page .btn-primary, .auth-page .btn-dark { background: var(--a-grad); color: #fff; box-shadow: 0 8px 24px -12px rgba(179, 77, 180, 0.6); } .auth-page .btn-primary:hover, .auth-page .btn-dark:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -14px rgba(179, 77, 180, 0.75); } .auth-page .btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; } .auth-page .btn-block { width: 100%; } /* Secondary / back buttons use a clean outline like the landing's btn-line */ .auth-page .btn-secondary, .auth-page .btn-ghost, .auth-page .btn-line { background: transparent; color: var(--a-ink); border-color: var(--a-line); } .auth-page .btn-secondary:hover, .auth-page .btn-ghost:hover, .auth-page .btn-line:hover { border-color: var(--a-ink); background: transparent; } /* Give the primary button a little breathing room above it */ .auth-page form .btn-block { margin-top: 6px; } /* ── Links + footer ───────────────────────────────────────────────── */ .auth-page .form-help a, .auth-page .auth-footer a, .auth-page .auth-switch a { color: var(--a-accent); font-weight: 600; text-decoration: none; } .auth-page .form-help a:hover, .auth-page .auth-footer a:hover, .auth-page .auth-switch a:hover { text-decoration: underline; text-underline-offset: 2px; } .auth-page .auth-footer { margin-top: 22px; font-size: 13.5px; color: var(--a-muted); } .auth-page .form-error { color: #D3252B; font-size: 13px; margin: 4px 0 0; } /* ── Signup wizard chrome ─────────────────────────────────────────── */ .auth-page .signup-dots { gap: 7px; } .auth-page .signup-dot { height: 6px; width: 22px; border-radius: 999px; background: rgba(0, 0, 0, 0.10); transition: background 0.2s, width 0.2s; } .auth-page .signup-dot.is-done { background: rgba(179, 77, 180, 0.4); } .auth-page .signup-dot.is-active { background: var(--a-grad); width: 30px; } .auth-page .signup-step-title { font-family: var(--a-display); font-weight: 800; font-size: 23px; letter-spacing: -0.02em; color: var(--a-ink); } .auth-page .signup-step-sub { font-family: var(--a-body); color: var(--a-muted); font-size: 14px; } .auth-page .signup-step-nav .btn { padding: 11px 20px; font-size: 14px; } .auth-page .signup-skip-link { color: var(--a-muted); } .auth-page .signup-skip-link:hover { color: var(--a-ink); } /* Payment-method chooser tiles */ .auth-page .signup-pay-btn { background: var(--a-paper); border: 1px solid var(--a-line); border-radius: 12px; color: var(--a-ink); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .auth-page .signup-pay-btn:hover { border-color: rgba(0, 0, 0, 0.22); } .auth-page .signup-pay-btn.is-active { border-color: var(--a-accent); background: rgba(179, 77, 180, 0.06); box-shadow: 0 0 0 3px rgba(179, 77, 180, 0.12); } .auth-page .signup-pay-btn small { color: var(--a-muted); } .auth-page .signup-pay-btn.is-active small { color: var(--a-accent); opacity: 0.9; } /* Account-creation spinner accent */ .auth-page .signup-creating-spinner { border-top-color: var(--a-accent) !important; } /* Secondary nav buttons (Back / Skip on the wizard) — clean outline instead of the app's flat grey fill. */ .auth-page .signup-step-nav .btn:not(.btn-primary) { background: transparent; color: var(--a-ink); border-color: var(--a-line); box-shadow: none; } .auth-page .signup-step-nav .btn:not(.btn-primary):hover { border-color: var(--a-ink); transform: none; } /* Final-step "here's what we'll set up" summary — soft brand-tinted card. */ .auth-page .signup-summary { font-size: 13px; color: var(--a-muted); line-height: 1.65; padding: 14px 16px; background: rgba(179, 77, 180, 0.05); border: 1px solid rgba(179, 77, 180, 0.14); border-radius: 14px; margin-top: 6px; } .auth-page .signup-summary strong { color: var(--a-ink); font-weight: 700; } /* Terms agreement row + native checkbox tinted to brand. */ .auth-page .signup-terms { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px; font-size: 13px; color: var(--a-muted); line-height: 1.5; cursor: pointer; } .auth-page .signup-terms input[type="checkbox"] { margin-top: 1px; width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; accent-color: var(--a-accent); } .auth-page .signup-terms a { color: var(--a-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* Identity row (avatar + name) keeps its layout; just tidy spacing */ .auth-page .signup-identity { gap: 16px; } /* Step counter caption under the progress bar. */ .auth-page .signup-step-count { text-align: center; font-family: var(--a-body); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--a-muted); margin: 10px 0 22px; } /* Inline field validation status (e.g. email). */ .auth-page .field-status { min-height: 16px; margin-top: 6px; font-size: 12.5px; font-weight: 500; line-height: 1.3; } .auth-page .field-status.is-ok { color: #0F9D6B; } .auth-page .field-status.is-bad { color: #D3252B; } .auth-page .form-input.is-valid { border-color: rgba(15, 157, 107, 0.55); } .auth-page .form-input.is-valid:focus { box-shadow: 0 0 0 3px rgba(15, 157, 107, 0.15); } .auth-page .form-input.is-invalid { border-color: rgba(211, 37, 43, 0.55); } .auth-page .form-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(211, 37, 43, 0.13); } /* Password field: show/hide toggle + live requirement tick. */ .auth-page .pw-wrap { position: relative; } .auth-page .pw-wrap .form-input { padding-right: 64px; } .auth-page .pw-toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); height: 32px; padding: 0 12px; border: none; background: transparent; color: var(--a-accent); font-family: var(--a-body); font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 8px; } .auth-page .pw-toggle:hover { background: rgba(179, 77, 180, 0.08); } .auth-page .pw-req { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12.5px; font-weight: 500; color: var(--a-muted); transition: color 0.15s; } .auth-page .pw-req-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, 0.22); flex-shrink: 0; position: relative; transition: background 0.15s, border-color 0.15s; } .auth-page .pw-req.is-met { color: #0F9D6B; } .auth-page .pw-req.is-met .pw-req-dot { background: #0F9D6B; border-color: #0F9D6B; } .auth-page .pw-req.is-met .pw-req-dot::after { content: ''; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } @media (max-width: 480px) { .auth-page .auth-card { padding: 32px 22px; border-radius: 20px; } .auth-page .auth-title { font-size: 25px; } }