/* ========================================================================== Mainspring Billing — Auth pages (login + change-password) Self-contained styling for the standalone Jinja auth screens. Builds on the React design system tokens in `static/design/colors_and_type.css` (Geist + Instrument Serif, brand blue, warm neutral scale) so the sign-in surface reads as the same product as the React dashboard at `/`. colors_and_type.css must be linked BEFORE this file. It only ships the light-theme `:root` tokens; the dark-theme overrides below mirror the React app's dark block (static/design/styles.css) but key on `[data-theme]` at the document root, because theme-init.js sets data-theme on for these non-React pages (the React app scopes it under `.ms-app`). ========================================================================== */ /* ---------- Dark theme (parity with the React app) ---------- */ [data-theme="dark"] { --neutral-0: #0F0F0E; --neutral-50: #141413; --neutral-100: #1A1917; --neutral-200: #24221F; --neutral-300: #2F2D29; --neutral-400: #4F4D47; --neutral-500: #7A7771; --neutral-600: #A5A29B; --neutral-700: #CDCBC6; --neutral-800: #E5E3DF; --neutral-900: #FAFAF9; --bg-0: #1A1917; --bg-1: #141413; --bg-2: #24221F; --bg-3: #2F2D29; --bg-invert: #FAFAF9; --fg-1: #FAFAF9; --fg-2: #CDCBC6; --fg-3: #A5A29B; --fg-muted: #7A7771; --fg-invert: #141413; --border-subtle: #24221F; --border-default: #2F2D29; --border-strong: #4F4D47; --blue-50: #11193A; --blue-100: #18255A; --accent-bg: #18255A; --accent: #6F87E4; --accent-hover: #8FA1ED; --accent-press: #B0BEF2; --success-50: #14241C; --warning-50: #29200F; --danger-50: #2A1410; --shadow-xs: 0 1px 0 rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.35); --shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.30); --shadow-md: 0 4px 12px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.30); --shadow-lg: 0 12px 32px rgba(0,0,0,0.50), 0 4px 10px rgba(0,0,0,0.35); --shadow-xl: 0 24px 60px rgba(0,0,0,0.60), 0 8px 20px rgba(0,0,0,0.40); --ring-focus: 0 0 0 3px hsl(226 60% 62% / 0.30); } /* ========================================================================== Page shell ========================================================================== */ .auth-body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--s-6); background: var(--bg-1); /* Subtle brand wash anchored to the top of the viewport. */ background-image: radial-gradient(120% 70% at 50% -10%, hsl(226 70% 45% / 0.07), transparent 60%); background-repeat: no-repeat; } .auth-shell { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: stretch; gap: var(--s-5); } /* ========================================================================== Card ========================================================================== */ .auth-card { background: var(--bg-0); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--s-10) var(--s-8) var(--s-8); } /* ---------- Brand lockup ---------- */ .auth-brand { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); text-align: center; } .auth-logo { display: block; width: 116px; height: auto; color: var(--fg-1); } .auth-eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); } /* ---------- Heading ---------- */ .auth-heading { text-align: center; margin-bottom: var(--s-8); } .auth-title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0; } .auth-subtitle { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--fg-3); margin: var(--s-2) 0 0; } /* ========================================================================== Form ========================================================================== */ .auth-form { display: flex; flex-direction: column; gap: var(--s-4); } .auth-field { display: flex; flex-direction: column; gap: var(--s-2); } .auth-label { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-2); } .auth-input-wrap { position: relative; display: flex; } .auth-input { box-sizing: border-box; width: 100%; height: 42px; padding: 0 var(--s-3); background: var(--bg-0); color: var(--fg-1); border: 1px solid var(--border-default); border-radius: var(--r-sm); font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-base); outline: none; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } /* Leave room for the visibility toggle inside password fields. */ .auth-input-wrap .auth-input { padding-right: 44px; } .auth-input::placeholder { color: var(--fg-muted); } .auth-input:focus, .auth-input:focus-visible { border-color: var(--accent); box-shadow: var(--ring-focus); } .auth-input:-webkit-autofill { -webkit-text-fill-color: var(--fg-1); transition: background-color 9999s ease-in-out 0s; } /* ---------- Password visibility toggle ---------- */ .auth-toggle { position: absolute; top: 50%; right: var(--s-1); transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; background: transparent; color: var(--fg-3); border-radius: var(--r-sm); cursor: pointer; transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .auth-toggle:hover { color: var(--fg-1); background: var(--bg-2); } .auth-toggle:focus-visible { outline: none; box-shadow: var(--ring-focus); } .auth-toggle svg { width: 18px; height: 18px; display: block; } /* JS swaps which icon shows; default state = password hidden ("show" icon). */ .auth-toggle .icon-hide { display: none; } .auth-toggle[aria-pressed="true"] .icon-show { display: none; } .auth-toggle[aria-pressed="true"] .icon-hide { display: block; } .auth-hint { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--fg-3); margin: calc(var(--s-1) * -1) 0 0; } /* ========================================================================== Primary button ========================================================================== */ .auth-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 42px; margin-top: var(--s-2); padding: 0 var(--s-4); border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: var(--r-sm); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard); } .auth-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .auth-btn:active { transform: scale(0.99); } .auth-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); } .auth-btn[disabled] { opacity: 0.55; pointer-events: none; } /* ========================================================================== "or" divider + Google (secondary) button ========================================================================== */ .auth-divider { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0; color: var(--fg-muted); font-family: var(--font-sans); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .auth-divider::before, .auth-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border-default); } /* Secondary button: a neutral, outlined sibling of .auth-btn used for the "Sign in with Google" link so the password button stays the primary CTA. */ .auth-btn--secondary { margin-top: 0; gap: var(--s-2); background: var(--bg-0); color: var(--fg-1); border-color: var(--border-default); text-decoration: none; } .auth-btn--secondary:hover { background: var(--bg-2); border-color: var(--border-strong); } .auth-btn--google { gap: var(--s-2); text-decoration: none; } .auth-btn .auth-google-icon { width: 18px; height: 18px; display: block; flex: 0 0 auto; } /* ========================================================================== Error banner ========================================================================== */ .auth-error { display: flex; align-items: flex-start; gap: var(--s-2); margin-bottom: var(--s-6); padding: var(--s-3) var(--s-4); background: var(--danger-50); color: var(--danger-500); border: 1px solid hsl(8 60% 50% / 0.22); border-radius: var(--r-md); font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-snug); } .auth-error svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; } /* Session-expired banner (auto sign-out from the dashboard heartbeat). Same shape as .auth-error but warning-toned, since "your session expired" is informational, not an error from the user's input. */ .auth-notice { display: flex; align-items: flex-start; gap: var(--s-2); margin-bottom: var(--s-6); padding: var(--s-3) var(--s-4); background: var(--warning-50); color: var(--warning-500); border: 1px solid hsl(33 68% 43% / 0.22); border-radius: var(--r-md); font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-snug); } .auth-notice svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; } /* ========================================================================== Footnote ========================================================================== */ .auth-footnote { text-align: center; font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: var(--tracking-snug); color: var(--fg-muted); margin: 0; line-height: 1.5; } .auth-realm-hint { opacity: 0.7; } /* ========================================================================== Responsive + motion ========================================================================== */ @media (max-width: 480px) { .auth-card { padding: var(--s-8) var(--s-5) var(--s-6); } .auth-title { font-size: var(--fs-2xl); } } @media (prefers-reduced-motion: reduce) { .auth-input, .auth-btn, .auth-toggle { transition: none; } .auth-btn:active { transform: none; } }