/* ============================================================================ PsyFi auth surface — "calm but present" ---------------------------------------------------------------------------- Shared by the login and register pages (Design System project → "Login Page Redesign Options", Option B): soft brand wash + floating card. Tokens mirror the design system's colors_and_type.css and are scoped to .psyfi-auth so they cannot leak into the MaterialM app shell. Dark values hang off [data-bs-theme="dark"], which base-auth.html stamps on . Fonts are the app's own (Plus Jakarta Sans display / Open Sans body, both self-hosted via assets/css/vendor/) — no CDN font is pulled in for this. ============================================================================ */ .psyfi-auth { --pa-blue: #0085db; --pa-blue-600: #0073c0; --pa-blue-400: #34a4e6; --pa-blue-subtle: #e6f4fd; --pa-secondary: #8965e5; --pa-success: #00ceb6; --pa-danger: #ff6692; --pa-warning: #ffb900; --pa-fg1: #111c2d; --pa-fg2: rgba(17, 28, 45, .8); --pa-fg3: rgba(17, 28, 45, .6); --pa-fg4: rgba(17, 28, 45, .4); --pa-body: #f4f7fa; --pa-surface: #ffffff; --pa-surface-3: #eff4fa; --pa-border: #e4ebf0; --pa-border-strong: #d6deea; --pa-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --pa-r-sm: 8px; --pa-r-xl: 24px; --pa-r-pill: 999px; --pa-shadow-sm: 0 2px 6px rgba(17, 28, 45, .06); --pa-shadow-lg: 0 16px 48px rgba(17, 28, 45, .14); --pa-shadow-focus: 0 0 0 3px rgba(0, 133, 219, .15); --pa-ease: cubic-bezier(.4, 0, .2, 1); --pa-dur: .2s; position: relative; min-height: 100vh; background: linear-gradient(180deg, var(--pa-blue-subtle), var(--pa-body) 60%); font-family: var(--pa-display); } [data-bs-theme="dark"] .psyfi-auth { --pa-fg1: #e6edf5; --pa-fg2: rgba(230, 237, 245, .82); --pa-fg3: rgba(230, 237, 245, .6); --pa-fg4: rgba(230, 237, 245, .4); --pa-body: #0f1722; --pa-surface: #18222f; --pa-surface-3: #232f3d; --pa-border: rgba(255, 255, 255, .10); --pa-border-strong: rgba(255, 255, 255, .18); --pa-blue-subtle: #16283a; --pa-shadow-lg: 0 16px 48px rgba(0, 0, 0, .5); --pa-shadow-sm: 0 2px 6px rgba(0, 0, 0, .3); } /* ---------- Brand wash ---------- The blobs get their own clipping layer. The page root must stay unclipped: on short viewports the card exceeds 100vh, and clipping here would put the bottom of the form (and the trust chips) out of reach. */ .psyfi-auth .pa-wash { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .psyfi-auth .pa-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .4; } .psyfi-auth .pa-blob-1 { width: 460px; height: 460px; background: var(--pa-blue-400); top: -160px; left: -120px; } .psyfi-auth .pa-blob-2 { width: 380px; height: 380px; background: var(--pa-secondary); bottom: -140px; right: -100px; opacity: .28; } [data-bs-theme="dark"] .psyfi-auth .pa-blob-1 { opacity: .22; } [data-bs-theme="dark"] .psyfi-auth .pa-blob-2 { opacity: .16; } .psyfi-auth .pa-stage { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px 16px; } /* ---------- Eyebrow pill ---------- */ .psyfi-auth .pa-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pa-blue); background: var(--pa-surface); padding: 8px 16px; border-radius: var(--pa-r-pill); box-shadow: var(--pa-shadow-sm); text-align: center; } /* ---------- Card ---------- */ .psyfi-auth .pa-card { width: 100%; max-width: 420px; background: var(--pa-surface); border-radius: var(--pa-r-xl); box-shadow: var(--pa-shadow-lg); padding: 40px 40px 34px; text-align: center; position: relative; } /* Register carries more fields than login; it gets a slightly wider card so the first/last-name row doesn't feel cramped. */ .psyfi-auth .pa-card-wide { max-width: 480px; } .psyfi-auth .pa-logo { height: 52px; width: auto; margin-bottom: 18px; } .psyfi-auth h1 { font-family: var(--pa-display); font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--pa-fg1); margin: 0 0 .5rem; } .psyfi-auth .pa-sub { color: var(--pa-fg3); font-size: .8125rem; margin: 0 0 24px; } /* ---------- SSO ---------- */ .psyfi-auth .pa-sso-row { display: flex; flex-direction: column; gap: 10px; } .psyfi-auth .pa-btn-google { background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: var(--pa-r-sm); font-family: 'Roboto', var(--pa-display); font-weight: 500; font-size: 14px; padding: 0 16px; height: 40px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; text-decoration: none; transition: box-shadow var(--pa-dur) var(--pa-ease); } .psyfi-auth .pa-btn-google:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .15); color: #1f1f1f; } .psyfi-auth .pa-btn-google img { width: 18px; height: 18px; flex-shrink: 0; } /* Apple HIG: black button in light mode, white in dark mode. */ .psyfi-auth .pa-btn-apple { background: #000; color: #fff; border: 1px solid #000; border-radius: var(--pa-r-sm); font-family: var(--pa-display); font-weight: 500; font-size: 14px; padding: 0 16px; height: 40px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; text-decoration: none; transition: box-shadow var(--pa-dur) var(--pa-ease); } .psyfi-auth .pa-btn-apple:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .3); color: #fff; } .psyfi-auth .pa-btn-apple .ti { font-size: 19px; flex-shrink: 0; } [data-bs-theme="dark"] .psyfi-auth .pa-btn-apple { background: #fff; color: #000; border-color: #fff; } [data-bs-theme="dark"] .psyfi-auth .pa-btn-apple:hover { color: #000; box-shadow: 0 1px 2px rgba(255, 255, 255, .25); } /* Fast-path nudge under the SSO button (register). */ .psyfi-auth .pa-sso-note { font-size: .6875rem; color: var(--pa-success); margin: 8px 0 0; font-weight: 600; } /* ---------- Divider ---------- */ .psyfi-auth .pa-divider { display: flex; align-items: center; gap: 10px; font-size: .6875rem; color: var(--pa-fg4); text-transform: uppercase; letter-spacing: .08em; margin: 18px 0; } .psyfi-auth .pa-divider::before, .psyfi-auth .pa-divider::after { content: ""; flex: 1; height: 1px; background: var(--pa-border); } /* ---------- Fields ---------- */ .psyfi-auth .pa-field-grp { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; text-align: left; } .psyfi-auth .pa-field-grp > label { font-size: .8125rem; font-weight: 600; color: var(--pa-fg1); margin: 0; } .psyfi-auth .pa-field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .psyfi-auth .pa-field-row a { font-size: .8125rem; color: var(--pa-blue); text-decoration: none; } .psyfi-auth .pa-field-row a:hover { text-decoration: underline; } /* Two fields side by side (first / last name), stacking on narrow screens. */ .psyfi-auth .pa-field-pair { display: flex; gap: 12px; } .psyfi-auth .pa-field-pair > .pa-field-grp { flex: 1; min-width: 0; } .psyfi-auth .pa-field { width: 100%; font-family: var(--pa-display); font-size: .9375rem; padding: 11px 14px; border-radius: var(--pa-r-sm); border: 1px solid var(--pa-border); background: var(--pa-surface); color: var(--pa-fg1); outline: none; transition: border-color var(--pa-dur) var(--pa-ease), box-shadow var(--pa-dur) var(--pa-ease); } .psyfi-auth .pa-field:focus { border-color: var(--pa-blue); box-shadow: var(--pa-shadow-focus); } .psyfi-auth .pa-field::placeholder { color: var(--pa-fg4); } .psyfi-auth .pa-field[readonly] { background: var(--pa-surface-3); color: var(--pa-fg3); } /* Password field + reveal toggle */ .psyfi-auth .pa-field-wrap { position: relative; display: flex; } .psyfi-auth .pa-field-wrap .pa-field { padding-right: 44px; } .psyfi-auth .pa-reveal { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; color: var(--pa-fg3); cursor: pointer; border-radius: var(--pa-r-sm); } .psyfi-auth .pa-reveal:hover { color: var(--pa-fg1); background: var(--pa-surface-3); } /* ---------- Checkbox rows ---------- */ .psyfi-auth .pa-check { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; text-align: left; } .psyfi-auth .pa-check input { margin: 2px 0 0; cursor: pointer; flex-shrink: 0; } .psyfi-auth .pa-check label { font-size: .8125rem; color: var(--pa-fg2); margin: 0; cursor: pointer; line-height: 1.45; } .psyfi-auth .pa-check a { color: var(--pa-blue); text-decoration: none; } .psyfi-auth .pa-check a:hover { text-decoration: underline; } /* ---------- Submit ---------- */ .psyfi-auth .pa-btn-primary { width: 100%; font-family: var(--pa-display); font-weight: 600; font-size: 15px; background: var(--pa-blue); color: #fff; border: 0; border-radius: var(--pa-r-sm); padding: 13px 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background var(--pa-dur) var(--pa-ease); } .psyfi-auth .pa-btn-primary:hover { background: var(--pa-blue-600); } .psyfi-auth .pa-btn-primary:disabled { opacity: .7; cursor: default; } /* ---------- Messaging ---------- */ .psyfi-auth .pa-error { display: block; text-align: left; font-size: .8125rem; color: #d6336c; margin-bottom: 14px; } .psyfi-auth .pa-notice { text-align: left; font-size: .8125rem; color: var(--pa-fg1); background: rgba(255, 185, 0, .12); border: 1px solid rgba(255, 185, 0, .5); border-radius: var(--pa-r-sm); padding: 10px 12px; margin-bottom: 14px; } .psyfi-auth .pa-success { display: block; color: var(--pa-blue); font-size: .9375rem; margin: 8px 0 20px; } .psyfi-auth .pa-foot { text-align: center; font-size: .8125rem; color: var(--pa-fg3); margin-top: 18px; } .psyfi-auth .pa-foot a { color: var(--pa-blue); text-decoration: none; font-weight: 600; } .psyfi-auth .pa-foot a:hover { text-decoration: underline; } /* ---------- Password strength + requirements (register) ---------- */ .psyfi-auth .pa-strength { margin-top: 10px; text-align: left; } .psyfi-auth .pa-strength-track { height: 4px; border-radius: var(--pa-r-pill); background: var(--pa-surface-3); overflow: hidden; } .psyfi-auth .pa-strength-bar { height: 100%; width: 0; border-radius: var(--pa-r-pill); background: var(--pa-blue); transition: width var(--pa-dur) var(--pa-ease), background var(--pa-dur) var(--pa-ease); } .psyfi-auth .pa-strength-text { display: block; font-size: .6875rem; color: var(--pa-fg3); margin-top: 5px; } .psyfi-auth .pa-reqs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin-top: 8px; } .psyfi-auth .pa-req { display: flex; align-items: center; gap: 5px; font-size: .6875rem; color: var(--pa-fg3); } .psyfi-auth .pa-req.is-met { color: var(--pa-success); } .psyfi-auth .pa-match { display: flex; align-items: center; gap: 5px; font-size: .6875rem; margin-top: 8px; text-align: left; } .psyfi-auth .pa-match.is-ok { color: var(--pa-success); } .psyfi-auth .pa-match.is-bad { color: var(--pa-danger); } /* Strength bar states (mirrors the JS score buckets). */ .psyfi-auth .pa-strength-bar.is-0 { background: var(--pa-danger); } .psyfi-auth .pa-strength-bar.is-1 { background: var(--pa-danger); } .psyfi-auth .pa-strength-bar.is-2 { background: var(--pa-warning); } .psyfi-auth .pa-strength-bar.is-3 { background: var(--pa-blue-400); } .psyfi-auth .pa-strength-bar.is-4 { background: var(--pa-success); } /* ---------- Trust chips ---------- */ .psyfi-auth .pa-chiprow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; background: var(--pa-surface); border-radius: var(--pa-r-pill); box-shadow: var(--pa-shadow-sm); padding: 10px 22px; } .psyfi-auth .pa-chip { display: flex; align-items: center; gap: 6px; font-size: .6875rem; color: var(--pa-fg2); font-weight: 600; } .psyfi-auth .pa-chip i { color: var(--pa-success); } /* ---------- Theme toggle ---------- */ .psyfi-auth .pa-theme-toggle { position: absolute; top: 16px; right: 16px; z-index: 2; } .psyfi-auth .pa-theme-toggle .nav-link { color: var(--pa-fg3); } .psyfi-auth .pa-theme-toggle .nav-link:hover { color: var(--pa-fg1); } /* ---------- Responsive ---------- */ @media (max-width: 575.98px) { .psyfi-auth .pa-card { padding: 32px 24px 26px; border-radius: 20px; } .psyfi-auth .pa-logo { height: 44px; } .psyfi-auth h1 { font-size: 1.5rem; } .psyfi-auth .pa-chiprow { border-radius: 20px; padding: 12px 18px; } .psyfi-auth .pa-blob-1 { width: 300px; height: 300px; top: -120px; left: -90px; } .psyfi-auth .pa-blob-2 { width: 260px; height: 260px; bottom: -100px; right: -80px; } .psyfi-auth .pa-field-pair { flex-direction: column; gap: 0; } .psyfi-auth .pa-reqs { grid-template-columns: 1fr; } }