/* Client auth pages — Login / Register / ForgotPassword (marketing layout) */ /* Portal layout loads Bootstrap after shared CSS; Bootstrap sets html{font-size:10px}, which shrinks rem-based header/footer chrome. Restore 16px root after Bootstrap (portal pages only). Uses an set server-side so it works without :has() on older browsers. */ html.client-portal-root { font-size: 16px; } /* Whole page at least one viewport tall; section keeps natural height (sticky-footer). Driven by a body class (set in _ClientAuthPageShell) instead of :has(). */ body.rjx-marketing.client-auth-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } body.rjx-marketing.client-auth-page .rjx-main { flex: 1 0 auto; } body.rjx-marketing.client-auth-page .rjx-main__surface { min-height: auto; } .client-auth-section .rjx-container { width: 100%; max-width: 480px; margin-top: var(--rjx-space-xs); } .client-auth-container--wide { max-width: 520px; } .client-auth-form { max-width: none; margin: 0; } .client-auth-form .rjx-form-row { margin-bottom: var(--rjx-space-sm); } .client-auth-form .rjx-form-row:last-child { margin-bottom: 0; } .client-auth-form .rjx-form-row label { color: var(--rjx-text-muted); } .client-auth-form .rjx-input { border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(0, 0, 0, 0.45); transition: background var(--rjx-transition), border-color var(--rjx-transition), box-shadow var(--rjx-transition); } .client-auth-form .rjx-input:hover { border-color: rgba(255, 255, 255, 0.32); } .client-auth-form .rjx-input:focus { border-color: rgba(var(--rjx-brand-rgb), 0.55); background: rgba(0, 0, 0, 0.55); box-shadow: 0 0 0 2px rgba(var(--rjx-brand-rgb), 0.28); } .client-auth-form .rjx-input::placeholder { color: var(--rjx-text-dim); } /* 覆盖浏览器自动填充（记住账号/密码）默认的浅色背景与深色文字，保持深色表单样式 */ .client-auth-form .rjx-input:-webkit-autofill, .client-auth-form .rjx-input:-webkit-autofill:hover, .client-auth-form .rjx-input:-webkit-autofill:focus, .client-auth-form .rjx-input:-webkit-autofill:active { -webkit-text-fill-color: var(--rjx-text); caret-color: var(--rjx-text); -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.45) inset; box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.45) inset; border: 1px solid rgba(255, 255, 255, 0.22); transition: background-color 9999s ease-out 0s; } .client-auth-form .rjx-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.55) inset, 0 0 0 2px rgba(var(--rjx-brand-rgb), 0.28); box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.55) inset, 0 0 0 2px rgba(var(--rjx-brand-rgb), 0.28); border-color: rgba(var(--rjx-brand-rgb), 0.55); } .client-auth-form__actions { display: flex; justify-content: center; margin-bottom: 0; margin-top: var(--rjx-space-lg); } .client-auth-form + .client-auth-links { margin-top: var(--rjx-space-lg); } .client-auth-submit { width: auto; min-width: 9.5rem; min-height: 44px; padding: 0.75rem 2.25rem; font-size: 0.9375rem; } .client-auth-form .client-auth-submit.rjx-btn--primary { color: #1a1a20; background: linear-gradient(135deg, #f8f8fa 0%, #ececf0 52%, #d8d8e0 100%); border: 1px solid rgba(255, 255, 255, 0.42); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); } .client-auth-form .client-auth-submit.rjx-btn--primary::before { background: linear-gradient(135deg, #ffffff 0%, #ececef 50%, #d4d4dc 100%); opacity: 1; } .client-auth-form .client-auth-submit.rjx-btn--primary:hover { color: #0f0f14; background: linear-gradient(135deg, #ffffff 0%, #f2f2f6 48%, #e4e4ea 100%); box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1); } .client-auth-form .client-auth-submit.rjx-btn--primary:hover::before { background: linear-gradient(135deg, #ffffff 0%, #ececf0 100%); } /* Clients auth — primary actions use white/silver, unified with auth submit button */ .client-auth-section { --cp-action: #ececf0; --cp-action-hover: #f8f8fa; --cp-action-deep: #d8d8e0; --cp-action-rgb: 216, 216, 224; /* Dark text reads on solid white buttons; near-white reads on translucent ghost */ --cp-action-text: #1a1a20; --cp-action-soft-text: #e8e8ee; } .client-auth-section .rjx-btn--primary { color: var(--cp-action-text); background: linear-gradient( 135deg, var(--cp-action-hover) 0%, var(--cp-action) 52%, var(--cp-action-deep) 100% ); border: 1px solid rgba(var(--cp-action-rgb), 0.55); box-shadow: 0 4px 14px rgba(var(--cp-action-rgb), 0.38); } .client-auth-section .rjx-btn--primary::before { background: linear-gradient(135deg, var(--cp-action-hover) 0%, var(--cp-action-deep) 100%); opacity: 1; } .client-auth-section .rjx-btn--primary:hover { color: var(--cp-action-text); background: linear-gradient(135deg, #ffffff 0%, var(--cp-action-hover) 48%, var(--cp-action) 100%); box-shadow: 0 6px 20px rgba(var(--cp-action-rgb), 0.45); } .client-auth-section .rjx-btn--primary:hover::before { background: linear-gradient(135deg, #ffffff 0%, var(--cp-action) 100%); } .client-auth-section .rjx-btn--ghost.client-auth-send-code { color: var(--cp-action-soft-text); background: rgba(var(--cp-action-rgb), 0.1); border: 1px solid rgba(var(--cp-action-rgb), 0.42); } .client-auth-section .rjx-btn--ghost.client-auth-send-code:hover { color: var(--cp-action-soft-text); background: rgba(var(--cp-action-rgb), 0.22); border-color: rgba(var(--cp-action-rgb), 0.68); } .client-auth-send-code { flex-shrink: 0; min-width: 7.5rem; min-height: 44px; padding: 0.65rem 1rem; white-space: nowrap; } /* Alerts */ .client-auth-alert { display: none; margin-bottom: var(--rjx-space-md); padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.5; border-radius: var(--rjx-radius); border: 1px solid transparent; } .client-auth-alert.alert-error { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.4); color: #fca5a5; } .client-auth-alert.alert-success { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.4); color: #86efac; } /* Footer links */ .client-auth-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.5rem; margin-top: var(--rjx-space-md); text-align: center; } .client-auth-links a, .client-auth-links a:link, .client-auth-links a:visited { color: var(--rjx-brand) !important; font-size: 0.8125rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.2s ease, text-decoration 0.2s ease; } .client-auth-links a:hover { color: var(--rjx-brand-soft) !important; text-decoration: underline; } .client-auth-links a:focus-visible { outline: 2px solid var(--rjx-brand); outline-offset: 2px; border-radius: 4px; } .client-auth-links-sep { color: var(--rjx-text-dim); -webkit-user-select: none; user-select: none; } /* Captcha row */ .client-auth-form .captcha-row { display: flex; gap: 0.625rem; align-items: stretch; } .client-auth-form .captcha-row .rjx-input { flex: 1; min-width: 0; } .client-auth-form .captcha-img-wrap { position: relative; width: 120px; height: auto; min-height: 44px; flex-shrink: 0; border: none; border-radius: 0; overflow: hidden; cursor: pointer; } .client-auth-form .captcha-img-wrap:focus-visible { outline: 2px solid var(--rjx-brand); outline-offset: 2px; } .client-auth-form .captcha-img-wrap .captcha-img-el { display: block; width: 120px; height: 44px; object-fit: contain; border: none; border-radius: 0; background: var(--rjx-block-input); opacity: 0; transition: opacity 0.25s ease; } .client-auth-form .captcha-img-wrap.is-ready .captcha-img-el { opacity: 1; } .client-auth-form .captcha-loading-panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.25rem; background: rgba(0, 0, 0, 0.75); border-radius: 0; z-index: 2; text-align: center; transition: opacity 0.25s ease, visibility 0.25s ease; } .client-auth-form .captcha-img-wrap.is-ready .captcha-loading-panel { opacity: 0; visibility: hidden; pointer-events: none; } .client-auth-form .captcha-spinner { width: 22px; height: 22px; border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: var(--rjx-brand); border-radius: 50%; animation: client-auth-captcha-spin 0.75s linear infinite; } .client-auth-form .captcha-status-text { font-size: 0.625rem; line-height: 1.2; color: var(--rjx-text-muted); max-width: 112px; } .client-auth-form .captcha-status-error { display: none; color: #f87171; } .client-auth-form .captcha-img-wrap.is-error .captcha-spinner, .client-auth-form .captcha-img-wrap.is-error .captcha-status-loading { display: none; } .client-auth-form .captcha-img-wrap.is-error .captcha-status-error { display: block; } .client-auth-form .captcha-img-wrap.is-error .captcha-loading-panel { opacity: 1; visibility: visible; pointer-events: auto; } @keyframes client-auth-captcha-spin { to { transform: rotate(360deg); } } /* Email verification code row */ .client-auth-form .email-code-row { display: flex; gap: 0.625rem; align-items: stretch; } .client-auth-form .email-code-row .rjx-input { flex: 1; min-width: 0; } /* Send code button loading */ .client-auth-form .rjx-btn.is-loading { cursor: wait; pointer-events: none; opacity: 0.92; } .client-auth-form .btn-send-code__spinner { display: inline-block; width: 14px; height: 14px; margin-right: 0.5rem; vertical-align: -2px; border: 2px solid rgba(15, 23, 42, 0.2); border-top-color: #d8d8e0; border-radius: 50%; animation: client-auth-captcha-spin 0.7s linear infinite; } @media (max-width: 480px) { .client-auth-form .captcha-row, .client-auth-form .email-code-row { flex-direction: column; } .client-auth-form .captcha-img-wrap { width: 100%; max-width: 160px; align-self: flex-start; } .client-auth-send-code { width: 100%; } } @media (prefers-reduced-motion: reduce) { .client-auth-form .captcha-spinner, .client-auth-form .btn-send-code__spinner { animation: none; border-top-color: rgba(255, 255, 255, 0.35); } .client-auth-links a, .client-auth-form .captcha-img-wrap, .client-auth-form .captcha-img-wrap .captcha-img-el { transition: none; } }