/* ============================================================ Shared Auth pages (/login/ and /signup/) One visual language for both the sign-in card and the public sign-up flow, matching the rest of the app: a soft neutral gradient shell (the original login's diagonal gray-50→gray-100 backdrop), a plain 1px-bordered card with a modest shadow, and rounded inputs with an accent focus ring — the same idiom as the avatar onboarding wizard's ob-input/ob-btn (onboarding.css). This file is self-contained — it defines its own --auth-* tokens so the login page can use it WITHOUT also loading onboarding.css, which is otherwise unrelated to authentication. Used by: - account/register.html — shell/card/header/alert/footer here, form fields/buttons/plan cards come from onboarding.css's ob-* classes. - account/login.html — shell/card/fields via the auth-* classes below; the primary CTA uses onboarding.css's ob-btn-primary, the same class as sign-up and the plan page. onboarding.css is now loaded on ALL THREE auth pages, so the button system has exactly one definition. Don't reintroduce a local copy of a button here — extend the ob-btn-* set instead. IMPORTANT — load order: this file must be linked AFTER {% tailwind_css %} in both templates' . Tailwind's config sets `important: true`, so its compiled utility classes (e.g. `.flex{display:flex!important}`) and its @tailwindcss/forms reset (`[type=email]{border-radius:0}` etc, specificity 0-1-0 — a tie with single-class selectors like `.auth-input`) only lose a cascade tie because they load FIRST. See onboarding.css's header comment / register.html's extrahead comment for the full trace of the bug this avoids. ============================================================ */ :root { --auth-card: #ffffff; --auth-surface: #f7f8fa; --auth-line: #e6e8ec; --auth-ink: #111827; --auth-muted: #6b7280; } .dark { --auth-card: #18181b; --auth-surface: #131316; --auth-line: #27272a; --auth-ink: #f4f4f5; --auth-muted: #a1a1aa; } /* --- Page shell: the original login's diagonal gray gradient ------- */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1rem; background: linear-gradient(to bottom right, #f9fafb, #f3f4f6); } .dark .auth-shell { background: linear-gradient(to bottom right, #111827, #030712); } /* --- Card: plain 1px-bordered card, modest shadow, app-scale radius - */ .auth-card { position: relative; width: 100%; background: var(--auth-card); border: 1px solid var(--auth-line); border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); padding: 2.5rem; animation: auth-rise 0.3s ease; transition: max-width 0.25s ease; } .dark .auth-card { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.35); } /* Width modifiers — login stays narrow, sign-up stays wider. */ .auth-card--narrow { max-width: 26.25rem; } /* ~420px */ .auth-card--wide { max-width: 34rem; } /* ~544px */ /* Post-signup plan page (account/billing_plan.html) only — a static extra class on that page's card so the plan cards in .ob-plan-grid (onboarding.css) have room to sit side by side in three columns instead of the grid's auto-fit collapsing them to a single column. The sign-up form itself keeps .auth-card--wide's narrower ~544px so its fields don't stretch. Loads after .auth-card--wide above, so it wins the cascade tie when both classes are present on the element at once. */ .auth-card--plan-wide { max-width: 60rem; } /* ~960px — fits 3 x ob-plan cards */ @keyframes auth-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* --- Header: plain centered header, no accent glow band ------------ */ .auth-header { text-align: center; margin-bottom: 1.5rem; } .auth-eyebrow { font-size: 0.85rem; font-weight: 600; color: var(--auth-muted); } .auth-welcome { margin-top: 1rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; color: var(--auth-ink); } .auth-subline { margin: 0.4rem auto 0; max-width: 26rem; font-size: 0.88rem; line-height: 1.5; color: var(--auth-muted); } /* --- Fields / inputs (login's own field markup; sign-up uses onboarding.css's ob-field/ob-input instead, styled to match) ------ */ .auth-field { margin-bottom: 1.1rem; } .auth-label { display: block; margin-bottom: 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--auth-ink); } /* !important beats @tailwindcss/forms' [type=email]/[type=password] reset (specificity 0-1-0, a tie with a single-class selector that only wins here because this file loads after {% tailwind_css %}). Radius/border/padding match onboarding.css's ob-input so a user going login → onboarding wizard sees the same field controls. */ input.auth-input { width: 100%; border-radius: 0.6rem !important; padding: 0.65rem 0.8rem !important; border: 1px solid var(--auth-line) !important; background: var(--auth-card) !important; color: var(--auth-ink) !important; font-size: 0.9rem; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } input.auth-input::placeholder { color: color-mix(in srgb, var(--auth-muted) 85%, transparent); } input.auth-input:focus { border-color: var(--color-accent, #4A90D9) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #4A90D9) 20%, transparent) !important; outline: none !important; } /* --- Also let sign-up's onboarding.css inputs win the same cascade tie on this page (register.html loads both files; keeping the rule here avoids depending on onboarding.css alone loading on this page). */ input.ob-input, select.ob-input { border-radius: 0.6rem !important; padding: 0.65rem 0.8rem !important; border: 1px solid var(--ob-line, #e6e8ec) !important; background: var(--ob-card, #fff) !important; color: var(--ob-ink, #111827) !important; font-size: 0.9rem; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } input.ob-input::placeholder { color: color-mix(in srgb, var(--ob-muted, #6b7280) 85%, transparent); } input.ob-input:focus, select.ob-input:focus { border-color: var(--color-accent, #4A90D9) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #4A90D9) 20%, transparent) !important; outline: none !important; } /* --- Buttons: matches onboarding.css's ob-btn-primary / ob-btn-ghost - */ /* Primary CTAs on EVERY auth screen (login, sign-up, plan) now use onboarding.css's `.ob-btn .ob-btn-primary` — that file is loaded on all three. `.auth-btn-primary` used to be a byte-for-byte copy of it living here, so the two could silently drift apart the moment one was retuned; it has been removed rather than kept in sync by hand. */ /* Secondary / SSO buttons (login only). Colours deliberately mirror onboarding.css's `.ob-btn-ghost` (transparent fill, neutral line, accent border on hover) so a secondary button reads the same here as it does in the wizard — only the denser padding/type is local to the SSO stack. */ .auth-btn-secondary { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1rem; border-radius: 0.7rem; border: 1px solid var(--auth-line); background: transparent; color: var(--auth-ink); font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease; } .auth-btn-secondary:hover { border-color: color-mix(in srgb, var(--color-accent, #4A90D9) 40%, transparent); background: color-mix(in srgb, var(--color-accent, #4A90D9) 6%, transparent); } /* --- Divider ("or") ----------------------------------------------- */ .auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0 1rem; } .auth-divider-line { flex: 1; border-top: 1px solid var(--auth-line); } .auth-divider-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--auth-muted); } .auth-sso-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } .auth-sso-grid--split { grid-template-columns: repeat(2, 1fr); } /* --- Organization section rhythm (sign-up) -------------------------- */ .auth-org-section { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--auth-line); } .auth-section-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--auth-muted); margin-bottom: 0.75rem; } /* --- Back link (sign-up) -------------------------------------------- */ .auth-back { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--auth-muted); background: none; border: none; cursor: pointer; padding: 0; margin-bottom: 1.1rem; transition: color 0.15s ease; } .auth-back:hover { color: var(--color-accent, #4A90D9); } /* --- Standalone accent link (e.g. "Forgot password?") --------------- */ .auth-link { font-size: 0.85rem; font-weight: 600; color: var(--color-accent, #4A90D9); transition: opacity 0.15s ease; } .auth-link:hover { opacity: 0.8; } /* --- Footer (both pages) -------------------------------------------- */ .auth-footer { text-align: center; font-size: 0.85rem; color: var(--auth-muted); margin-top: 1.85rem; } .auth-footer a { color: var(--color-accent, #4A90D9); font-weight: 600; transition: opacity 0.15s ease; } .auth-footer a:hover { opacity: 0.8; } /* --- Alert / message banners (both pages) --------------------------- Sign-up's general-error banner is rendered from a