/* Shared auth-page styles: /login, /signup, /forgot-password, /reset-password */ :root { color-scheme: light; --auth-shell-width: 560px; --auth-shell-width-wide: 760px; --navy: #12233f; --blue: #85bbda; --blue-ink: #14324d; --ink: #15273f; --muted: #5d708f; --line: #d9e2ef; --bg: #eef4fb; --panel: rgba(255, 255, 255, 0.96); --auth-shell-top: rgba(255, 255, 255, 0.82); --auth-shell-line: rgba(191, 204, 222, 0.72); --auth-grid: rgba(46, 110, 178, 0.08); --auth-panel-shadow: 0 24px 64px rgba(18, 35, 63, 0.12), 0 4px 18px rgba(18, 35, 63, 0.05); --auth-panel-border: rgba(191, 204, 222, 0.9); --auth-focus: rgba(46, 110, 178, 0.18); --auth-input-bg: rgba(247, 250, 253, 0.98); --auth-input-border: #cad7e7; --auth-input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88); --auth-ghost-bg: rgba(46, 110, 178, 0.06); --auth-ghost-hover: rgba(46, 110, 178, 0.12); --auth-panel-top: rgba(255, 255, 255, 0.98); --auth-panel-bottom: rgba(247, 250, 255, 0.95); --auth-panel-edge: rgba(46, 110, 178, 0.24); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: auto; overflow: auto; } /* Paint the page background on too. Without this, mobile overscroll / rubber-band (and any area the body box doesn't cover) reveals the default canvas โ€” which renders as black voids on iOS. */ html { background: #f4f6fa !important; min-height: 100%; color-scheme: light; } body.auth-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; background: #f4f6fa !important; color-scheme: light; margin: 0; padding: 40px 20px; box-sizing: border-box; font-family: var(--font-body, "Roboto", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); color: var(--ink, #15273f); } /* Centered column wrapper */ .auth-main { width: 100%; max-width: 440px; } /* Logo inside the card, centered above the heading */ .auth-card-logo { display: flex; justify-content: center; align-items: center; gap: 9px; margin-bottom: 28px; } .auth-card-logo .auth-logo-icon { height: 30px; width: 30px; flex-shrink: 0; object-fit: contain; } .auth-card-logo .auth-logo-wordmark { height: 22px; width: auto; } .auth-card { width: 100%; background: #ffffff; border-radius: 16px; padding: 40px 40px 36px; border: 1px solid rgba(191, 204, 222, 0.55); box-shadow: 0 2px 8px rgba(18, 35, 63, 0.05), 0 8px 32px rgba(18, 35, 63, 0.06); position: relative; } /* .auth-card::before and .auth-card::after decorative pseudo-elements removed (split layout uses flat white panel) */ .auth-card .primary-button, .auth-card .secondary-button, .wizard-card .primary-button, .wizard-card .secondary-button { min-height: 42px; padding: 0 16px; border-radius: 10px; font-size: 14px; } .auth-card.wide { width: min(560px, 100%); } .auth-page-shell { position: relative; margin: 0 auto; } .auth-page-shell.auth-page-login { width: min(460px, 100%); } .auth-main-recovery { padding-top: 8px; } .auth-card-recovery { width: min(500px, 100%); } .auth-page-title { position: relative; z-index: 1; } .auth-page-subtitle, .auth-page-kicker, .auth-form, .auth-primary-action, .auth-secondary-actions, .auth-status { position: relative; z-index: 1; } .auth-form-signup { gap: 11px; } .auth-form-signup label:nth-child(-n + 3) input { background: rgba(250, 252, 255, 0.94); } .auth-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } .auth-primary-action { margin-top: 10px; } .auth-secondary-actions { gap: 10px; } .auth-card-login .auth-secondary-actions, .auth-card-recovery .auth-secondary-actions { margin-top: 24px; } .auth-card .primary-button, .auth-card .secondary-button { min-height: 50px; padding: 0 18px; border-radius: 14px; font-size: 15px; } .auth-button-block { width: 100%; } .auth-inline-button { min-height: 42px; padding: 0 14px; font-size: 13px; } .auth-button-oauth { background: rgba(255, 255, 255, 0.92); border-color: rgba(191, 204, 222, 0.94); color: var(--navy); gap: 10px; margin-bottom: 8px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 22px rgba(18, 35, 63, 0.06); } .auth-button-oauth:hover { background: #f8fbff; border-color: rgba(46, 110, 178, 0.38); } .eyebrow { margin: 0 0 8px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #6982a3; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(46, 110, 178, 0.07); border: 1px solid rgba(191, 204, 222, 0.86); } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: linear-gradient(180deg, #7fb7db, #2e6eb2); box-shadow: 0 0 0 4px rgba(46, 110, 178, 0.08); } .auth-card h1 { font-size: var(--text-display-sm, 24px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--navy, #12233f); font-family: var(--font-heading, "Montserrat", sans-serif); } .auth-card .subtle { margin: 0 0 20px; color: var(--ink-soft, #66758f); line-height: 1.5; font-size: var(--text-sm, 13px); } form { display: grid; gap: 11px; } [hidden] { display: none !important; } label { display: grid; gap: 8px; font-size: 12px; letter-spacing: 0.01em; color: var(--navy, #12233f); font-weight: 700; } input { width: 100%; height: 42px; border-radius: var(--radius-sm, 8px); border: 1.5px solid var(--line, #d9e2ef); padding: 0 13px; font-size: var(--text-sm, 13px); color: var(--ink, #15273f); background: var(--surface, #fff); box-shadow: none; transition: border-color var(--transition-fast, 140ms ease), box-shadow var(--transition-fast, 140ms ease); } input::placeholder { color: var(--ink-soft, #66758f); } input:focus { outline: none; border-color: var(--brand-navy, #2e6eb2); background: var(--surface, #fff); box-shadow: 0 0 0 3px rgba(47, 111, 183, 0.16); transform: none; } .button-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } button, .btn, .primary-button, .secondary-button, .btn-secondary, .btn-oauth { min-height: 44px; height: 44px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: filter 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } button:not(.secondary-button):not(.btn-secondary):not(.btn-oauth), .btn:not(.btn-secondary):not(.btn-oauth), .primary-button, .btn-gold { border: 1px solid rgba(19, 54, 96, 0.94); background: var(--navy, #12233f); color: #fff; box-shadow: none; } button:hover, .btn:hover, .primary-button:hover, .secondary-button:hover, .btn-secondary:hover, .btn-oauth:hover { filter: brightness(0.98); transform: translateY(-1px); } button:not(.secondary-button):not(.btn-secondary):not(.btn-oauth):hover, .btn:not(.btn-secondary):not(.btn-oauth):hover, .primary-button:hover, .btn-gold:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 16px 28px rgba(46, 110, 178, 0.26); } button:disabled, .primary-button:disabled, .secondary-button:disabled, .btn:disabled { cursor: default; opacity: 1; filter: none; background: #c6d9ea; border-color: #c6d9ea; color: rgba(18, 35, 63, 0.78); box-shadow: none; transform: none; } /* Secondary: neutral outlined companion to the canonical blue primary. */ .secondary-button, .btn-secondary { background: rgba(255, 255, 255, 0.86); color: var(--ink, #15273f); border: 1.5px solid var(--line-strong, #bfccde); box-shadow: 0 8px 20px rgba(18, 35, 63, 0.05); } .secondary-button:hover, .btn-secondary:hover { background: #f8fbff; border-color: var(--brand-navy, #2e6eb2); color: var(--brand-navy, #2e6eb2); filter: none; } /* Legacy alias for the historical signup CTA; mapped to the canonical primary. */ .btn-gold { background: var(--brand-navy, #2e6eb2); border-color: var(--brand-navy, #2e6eb2); color: #fff; } .btn-block { width: 100%; } .btn-oauth { background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96)); color: var(--navy); border: 1px solid rgba(191, 204, 222, 0.94); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 24px rgba(18, 35, 63, 0.06); gap: 10px; } .btn-oauth:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(243, 248, 255, 1)); filter: none; } .oauth-mark { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; color: #2563eb; background: #fff; border: 1px solid #d8e1ef; } .oauth-mark-google { border-color: transparent; background: transparent; } .auth-separator { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 22px 0 18px; color: var(--muted); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .auth-separator span { height: 1px; background: var(--line); } .auth-separator strong { font-weight: 800; } .status { margin-top: 18px; padding: 14px 16px 14px 18px; border-radius: 16px; border: 1px solid var(--info); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(230, 242, 248, 0.95)); color: var(--navy); line-height: 1.45; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 10px 24px rgba(18, 35, 63, 0.04); position: relative; overflow: hidden; } .status::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--info); } .status.error { border-color: var(--negative); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 236, 234, 0.96)); color: var(--negative); } .status.error::before { background: var(--negative); } .status.success { border-color: var(--positive); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(231, 245, 238, 0.96)); color: var(--positive); } .status.success::before { background: var(--positive); } /* Below-form cross-link row (e.g. "Forgot password? ยท Create account") */ .alt-links { margin-top: 22px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; font-size: 14px; align-items: center; } .alt-links a { color: var(--navy); text-decoration: none; font-weight: 700; text-underline-offset: 3px; } .alt-links a:hover { text-decoration: underline; } .auth-link-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(191, 204, 222, 0.94); background: rgba(255, 255, 255, 0.78); color: var(--ink); box-shadow: 0 8px 18px rgba(18, 35, 63, 0.04); transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease; } .auth-link-button:hover { text-decoration: none; background: var(--auth-ghost-bg); border-color: rgba(46, 110, 178, 0.28); color: var(--brand-navy, #2e6eb2); transform: translateY(-1px); box-shadow: 0 12px 22px rgba(18, 35, 63, 0.06); } .auth-link-button.is-text { justify-content: flex-start; background: transparent; border-color: transparent; box-shadow: none; padding-left: 0; } .auth-link-button.is-text:hover { background: transparent; color: var(--navy); transform: none; box-shadow: none; } .auth-card-success { text-align: center; padding: 48px 34px 40px; } .auth-card-signup-success { width: min(540px, 100%); } .auth-card-success .alt-links { justify-content: center; } .auth-success-mark { width: 64px; height: 64px; margin: 4px auto 18px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(46, 110, 178, 0.12), rgba(46, 110, 178, 0.04)), #ffffff; border: 1px solid rgba(191, 204, 222, 0.92); color: var(--brand-navy, #2e6eb2); box-shadow: 0 14px 26px rgba(18, 35, 63, 0.07); font-size: 32px; } .auth-footer { width: 100%; margin: 0 auto; padding: 6px 0 0; color: var(--ink-muted); text-align: center; } .auth-footer a { color: inherit; text-decoration: none; } .auth-footer a:hover { color: var(--brand-navy, #2e6eb2); text-decoration: underline; text-underline-offset: 3px; } .wizard-shell { width: 100%; margin: 0; display: grid; gap: 12px; } body.auth-page-connect, body.auth-page-shared { --auth-shell-width: var(--auth-shell-width); } body.auth-page-connect .auth-main { max-width: 460px; } .wizard-card-logo { margin-bottom: 22px; } .wizard-stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; } .wizard-stepper li { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 8px; border-radius: 999px; border: 1px solid rgba(191, 204, 222, 0.8); background: rgba(247, 250, 255, 0.9); color: var(--ink-muted); box-shadow: none; backdrop-filter: blur(10px); font-size: 12px; font-weight: 700; } .wizard-stepper li.is-active { border-color: rgba(46, 110, 178, 0.72); background: #2e6eb2; color: #fff; box-shadow: 0 10px 22px rgba(46, 110, 178, 0.18); } .wizard-stepper li.is-done { border-color: rgba(45, 156, 103, 0.28); background: rgba(231, 245, 238, 0.9); color: var(--positive); } .wizard-stepper .step-num { width: 20px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(46, 110, 178, 0.1); color: var(--navy); font-size: 11px; font-weight: 700; } .wizard-stepper li.is-active .step-num { background: rgba(255, 255, 255, 0.16); color: #fff; } .wizard-stepper li.is-done .step-num { background: rgba(45, 156, 103, 0.12); color: var(--positive); } .wizard-card { background: #ffffff; border: 1px solid rgba(191, 204, 222, 0.55); border-radius: 16px; box-shadow: 0 2px 8px rgba(18, 35, 63, 0.05), 0 8px 32px rgba(18, 35, 63, 0.06); padding: 40px 40px 36px; position: relative; } .wizard-card > * { position: relative; z-index: 1; } .wizard-card h2 { margin: 8px 0 8px; font-size: var(--text-display-sm, 24px); line-height: 1.15; letter-spacing: -0.02em; color: var(--navy); font-family: var(--font-heading, "Montserrat", sans-serif); } .wizard-input { height: 50px; border-radius: 14px; border: 1px solid var(--auth-input-border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), var(--auth-input-bg)); box-shadow: var(--auth-input-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .stream-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 11px 0; border-bottom: 1px solid rgba(217, 226, 239, 0.8); } .stream-row:last-child { border-bottom: none; } .stream-status { grid-column: 2; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 4px 9px; border-radius: 999px; text-transform: capitalize; border: 1px solid transparent; } .stream-status.complete { background: var(--positive-soft); color: var(--positive); } .stream-status.in_progress { background: var(--warning-soft); color: var(--warning); } .stream-status.failed { background: var(--negative-soft); color: var(--negative); } .stream-status.not_started { background: var(--surface-muted); color: var(--ink-muted); } .wizard-cta-row { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; align-items: center; } .wizard-inline-link { display: inline-flex; align-items: center; min-height: 42px; padding: 0 6px; color: var(--brand-navy, #2e6eb2); font-weight: 700; text-decoration: none; } .wizard-inline-link:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; } /* Auth-only banners. Namespaced so production auth states cannot inherit older generic banner treatments from cached/stale assets. */ .auth-banner { width: min(460px, 100%); margin: 0 auto 28px; padding: 14px 16px 14px 18px; border-radius: 16px; border: 1px solid var(--positive); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(231, 245, 238, 0.95)); color: var(--positive); font-size: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 12px 24px rgba(18, 35, 63, 0.04); position: relative; overflow: hidden; } .auth-banner::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: currentColor; } .auth-banner.auth-banner-notice { border-color: #d3dfef; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 255, 0.95)); color: var(--navy); box-shadow: inset 0 0 0 1px rgba(133, 187, 218, 0.12), 0 8px 24px rgba(18, 35, 63, 0.04); } /* Brand panel removed โ€” centered card layout replaces split panel */ /* Plain text link row below form */ .auth-footer-links { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-muted, #62738d); gap: 12px; flex-wrap: wrap; } .auth-footer-links a { color: var(--brand-navy, #2e6eb2); text-decoration: none; font-weight: 600; } .auth-footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Recovery pages โ€” logo is inside the card via .auth-card-logo */ /* Responsive */ @media (max-width: 520px) { body.auth-page { padding: 24px 16px; } .auth-main { gap: 16px; } .auth-card { padding: 28px 24px 24px; } .auth-card h1 { font-size: 22px; } .auth-name-row { grid-template-columns: 1fr; } .alt-links { justify-content: stretch; } .alt-links a, .auth-link-button { width: 100%; } .auth-link-button.is-text { width: auto; justify-content: flex-start; } .wizard-stepper { display: grid; grid-template-columns: 1fr 1fr; } .wizard-card { padding: 20px 18px 18px; border-radius: 12px; } }