`. Scoped so it doesn't disturb the legacy 2-col pages above. See Docs/DESIGN-PHILOSOPHY.md. =================================== */ .login-wrapper.login-centered { align-items: center; justify-content: center; padding: 24px; background: var(--emmber-light, #FAFAFA); } .login-centered .login-form-container { max-width: 420px; margin: 0 auto; padding: 40px 32px; background: #ffffff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: var(--radius-xl, 16px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03); animation: loginFadeIn 0.4s ease-out; } @keyframes loginFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .login-centered .login-brand-mark { display: flex; justify-content: center; margin: 4px 0 36px; } .login-centered .login-brand-mark img { height: 44px; width: auto; } .login-centered .login-brand-mark .mark-dark { display: none; } .login-centered .login-turnstile-wrap { display: flex; justify-content: center; margin: 16px 0; } /* =================================== ALERT MESSAGES =================================== */ .alert { border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-lg); display: flex; align-items: flex-start; gap: var(--space-md); animation: slideDown 0.4s ease-out; border: 1.5px solid; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .alert-info { background: rgba(125, 122, 255, 0.08); border-color: var(--emmber-core); color: var(--emmber-core); } .alert-warning { background: var(--warning-light-bg, #fef3c7); border-color: var(--warning, #d97706); color: var(--warning-light-text, #92400e); } .alert-success { background: rgba(76, 175, 80, 0.1); border-color: var(--success, #4CAF50); color: var(--success-dark, #388E3C); } .alert-danger { background: var(--danger-light-bg, #FEE2E2); border-color: var(--danger, #dc2626); color: var(--danger-light-text, #991B1B); } .alert i { font-size: 1.25rem; margin-top: 3px; flex-shrink: 0; } .alert > div { flex: 1; } .alert p { margin: 0; line-height: var(--leading-relaxed); } .alert .form-link { font-size: var(--text-sm); font-weight: var(--font-semibold); } /* =================================== FORM ELEMENTS =================================== */ /* Legacy form treatment — used by forgot/reset/set-password/accept-invite */ .login-form { background: var(--emmber-cream); border-radius: 16px; padding: var(--space-xl); margin-bottom: var(--space-lg); border: 1px solid rgba(0, 0, 0, 0.06); } /* New centered login: form sits naked inside the form-container card */ .login-centered .login-form { background: transparent; border: none; padding: 0; margin-bottom: 0; } .form-group { margin-bottom: var(--space-lg); } .form-label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-sm); letter-spacing: -0.01em; } .form-control { width: 100%; padding: 0.875rem 1rem; font-size: var(--text-base); border: 1.5px solid var(--gray-300, #d1d5db); border-radius: 12px; background: var(--bg-white); color: var(--text-primary); transition: all 0.2s ease; font-family: inherit; } .form-control:hover { border-color: var(--gray-400, #9ca3af); } .form-control:focus:not(:focus-visible) { outline: none; border-color: var(--emmber-core); box-shadow: 0 0 0 4px rgba(94, 92, 230, 0.1); background: var(--bg-white); color: var(--text-primary); } .form-control::placeholder { color: var(--text-muted); } /* =================================== BUTTONS =================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.5rem; font-size: var(--text-base); font-weight: var(--font-semibold); border-radius: var(--radius-lg); border: none; cursor: pointer; transition: all var(--transition-base); text-decoration: none; font-family: inherit; letter-spacing: -0.01em; } .btn-primary { /* Override Bootstrap 5.3 CSS vars — prevents blue bleed-through at all states */ --bs-btn-bg: var(--emmber-core); --bs-btn-border-color: var(--emmber-core); --bs-btn-hover-bg: var(--emmber-warm); --bs-btn-hover-border-color: var(--emmber-warm); --bs-btn-active-bg: var(--emmber-deep); --bs-btn-active-border-color: var(--emmber-deep); --bs-btn-disabled-bg: var(--emmber-disabled); --bs-btn-disabled-border-color: var(--emmber-disabled); --bs-btn-disabled-color: rgba(255, 255, 255, 0.55); background: var(--emmber-core); color: white; box-shadow: 0 2px 8px rgba(94, 92, 230, 0.25); } .btn-primary:hover { background: var(--emmber-warm); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(94, 92, 230, 0.35); } .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(94, 92, 230, 0.25); } .btn-primary:disabled { background-color: var(--emmber-disabled); border-color: var(--emmber-disabled); color: rgba(255, 255, 255, 0.55); opacity: 1; cursor: not-allowed; transform: none; box-shadow: none; } #login-submit-btn { background: var(--emmber-core); border-color: var(--emmber-core); } #login-submit-btn:disabled { background: var(--emmber-disabled); border-color: var(--emmber-disabled); color: rgba(255, 255, 255, 0.55); opacity: 1; } .btn-primary.btn-loading { background: var(--emmber-deep); color: rgba(255, 255, 255, 0.9); opacity: 1; pointer-events: none; transform: none; box-shadow: 0 1px 4px rgba(75, 73, 199, 0.3); } .btn-block { width: 100%; } /* =================================== SOCIAL LOGIN BUTTONS =================================== */ .social-buttons { display: flex; flex-direction: column; gap: var(--space-md); } .social-btn { position: relative; display: flex; align-items: center; justify-content: center; padding: 0.875rem 1.5rem; background: var(--bg-hover); border: 1.5px solid rgba(0, 0, 0, 0.08); border-radius: 12px; font-size: var(--text-base); font-weight: 500; color: var(--text-primary); text-decoration: none; transition: all 0.2s ease; cursor: pointer; letter-spacing: -0.01em; } .social-btn:hover:not(.disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); border-color: var(--emmber-core); background: var(--bg-hover); } .social-btn:active:not(.disabled) { transform: translateY(0); } .social-btn.disabled { opacity: 0.5; cursor: not-allowed; } .social-btn.loading { opacity: 0.7; pointer-events: none; } .social-btn img, .social-btn .social-btn-icon { width: 24px; height: 24px; margin-right: var(--space-md); } .social-btn-icon--apple { color: #000; } body.emmber-dark .social-btn-icon--apple { color: #fff; } .social-btn i { margin-right: var(--space-sm); } .social-btn .fa-spinner { margin-right: var(--space-md); } /* =================================== LAST USED BADGE =================================== */ .social-btn--last-used { border-color: var(--emmber-core-30); } .social-btn-last-used-badge { position: absolute; top: -8px; right: -6px; font-size: var(--text-xs); font-weight: var(--font-semibold); color: #ffffff; background: var(--emmber-deep); padding: 2px 8px; border-radius: var(--radius-full); letter-spacing: 0.02em; line-height: 1.4; pointer-events: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); animation: badgeFadeIn 0.4s ease-out; } @keyframes badgeFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* =================================== PROVIDER HIGHLIGHT (wrong method) =================================== */ .social-btn--highlight { border-color: var(--emmber-core); box-shadow: 0 0 0 2px var(--emmber-core-30), 0 0 12px rgba(94, 92, 230, 0.3); animation: highlightPulse 1.5s ease-in-out 3; } @keyframes highlightPulse { 0%, 100% { box-shadow: 0 0 0 2px var(--emmber-core-30), 0 0 12px rgba(94, 92, 230, 0.3); } 50% { box-shadow: 0 0 0 4px var(--emmber-core-30), 0 0 20px rgba(94, 92, 230, 0.5); } } /* =================================== FORM UTILITIES =================================== */ /* Legacy: row with remember-me + forgot link */ .form-footer { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); } /* New centered login: tiny right-aligned link tucked under the password input */ .login-centered .form-footer { justify-content: flex-end; margin-top: 6px; margin-bottom: 0; font-size: 0.8125rem; } .form-check { display: flex; align-items: center; gap: var(--space-sm); } .form-check-input { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--gray-300, #d1d5db); background: var(--bg-white); cursor: pointer; transition: all 0.15s ease; accent-color: var(--emmber-core); } .form-check-input:hover { border-color: var(--gray-400, #9ca3af); } .form-check-input:checked { background-color: var(--emmber-core); border-color: var(--emmber-core); } .form-check-label { font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; user-select: none; font-weight: 500; } .form-link { font-size: var(--text-sm); color: var(--emmber-core); text-decoration: none; font-weight: 600; transition: color 0.15s ease; } .form-link:hover { color: var(--emmber-glow); } /* =================================== DIVIDER =================================== */ .divider { display: flex; align-items: center; margin: var(--space-xl) 0; color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--font-medium); } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-200, #e5e7eb); } .divider::before { margin-right: var(--space-md); } .divider::after { margin-left: var(--space-md); } /* New centered login: smaller, tracked, less margin */ .login-centered .divider { margin: 24px 0 16px; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } .login-centered .divider::before { margin-right: 12px; } .login-centered .divider::after { margin-left: 12px; } /* =================================== FOOTER LINKS =================================== */ .login-footer { text-align: center; margin-top: var(--space-xl); color: var(--text-muted); font-size: 14px; } .login-footer a { color: var(--emmber-core); font-weight: 600; text-decoration: none; } .login-footer a:hover { text-decoration: underline; color: var(--emmber-glow); } /* =================================== ADMIN ACCESS (HIDDEN) =================================== */ .admin-trigger { position: fixed; bottom: 1rem; right: 1rem; width: 64px; height: 64px; background: transparent; border: none; cursor: default; opacity: 0; transition: opacity var(--transition-base); z-index: var(--z-modal, 9999); } .admin-trigger:hover { opacity: 0.05; } /* Admin Modal Overlay */ .admin-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: var(--z-edit-form, 10000); animation: fadeIn 0.3s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .admin-modal { background: var(--bg-white); padding: var(--space-xl); border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); border: 1px solid var(--gray-200, #e5e7eb); max-width: 400px; width: 90%; animation: scaleIn 0.3s ease-out; } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .admin-modal h3 { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-lg); color: var(--text-primary); } .admin-modal .btn-group { display: flex; gap: var(--space-md); margin-top: var(--space-lg); } .btn-secondary { background: var(--bg-hover); color: var(--text-primary); } .btn-secondary:hover { background: var(--bg-active, #E5E7EB); } /* =================================== MAINTENANCE MODE =================================== */ .maintenance-screen { position: fixed; inset: 0; background: var(--background-color); display: flex; align-items: center; justify-content: center; z-index: var(--z-notification, 99999); } .maintenance-content { text-align: center; padding: var(--space-3xl); animation: fadeInUp 0.8s ease-out; } .maintenance-icon { font-size: 6rem; margin-bottom: var(--space-lg); } .maintenance-title { font-size: var(--text-3xl); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-md); } .maintenance-description { font-size: var(--text-lg); color: var(--text-secondary); margin-bottom: var(--space-xl); } /* =================================== RESPONSIVE DESIGN =================================== */ /* Legacy 2-col responsive (forgot, reset, verify, set-password, accept-invite) */ @media (max-width: 968px) { .login-wrapper { flex-direction: column; } .login-left-panel { width: 100%; min-height: 300px; } .login-brand-title { font-size: 40px; } .login-right-panel { width: 100%; border-left: none; border-top: 1px solid var(--gray-200, #e5e7eb); } } @media (max-width: 480px) { .login-left-panel { min-height: 240px; } .login-brand-title { font-size: 32px; } .login-brand-badge { font-size: 10px; letter-spacing: 3px; margin-bottom: 24px; } .login-right-panel { padding: 24px 16px; } } /* New centered login: edge-to-edge on phones, override legacy column stack */ @media (max-width: 968px) { .login-wrapper.login-centered { flex-direction: row; /* override the legacy column stack */ } } @media (max-width: 480px) { .login-wrapper.login-centered { padding: 16px; align-items: flex-start; padding-top: 48px; } .login-centered .login-form-container { padding: 24px 16px; background: transparent; border: none; box-shadow: none; } } /* =================================== AUTH STATE ICONS =================================== */ .auth-success-icon { font-size: 4rem; color: var(--success, #4CAF50); } .auth-warning-icon { font-size: 4rem; color: var(--emmber-glow); } .auth-error-icon { font-size: 4rem; color: var(--danger, #E53935); } /* =================================== VERIFY EMAIL PAGE =================================== */ .auth-email-icon { font-size: 4rem; color: var(--emmber-core); } .auth-info-box { background: var(--emmber-cream); border-radius: 12px; padding: 20px; } .auth-info-box p { font-size: 0.85rem; } .auth-info-box .fa-info-circle { color: var(--emmber-glow); } .verify-subtext { font-size: 0.9rem; } .auth-toggle-password { border: none; z-index: 5; } /* Bootstrap .text-muted override for auth pages */ .login-form-container .text-muted, .login-form-container .form-text { color: var(--text-secondary); } /* Progress bar for password strength */ .login-form-container .progress { height: 4px; background: var(--gray-200, #e5e7eb); } /* Password strength text colors */ #strengthText { color: var(--text-secondary); font-weight: 500; } #strengthText.text-danger { color: var(--danger, #dc2626); } #strengthText.text-warning { color: var(--warning, #d97706); } #strengthText.text-info { color: var(--emmber-core); } #strengthText.text-success { color: var(--success, #4CAF50); } /* btn-outline-secondary override for auth pages */ .login-form-container .btn-outline-secondary { color: var(--text-secondary); border-color: var(--gray-300, #d1d5db); } .login-form-container .btn-outline-secondary:hover { color: var(--text-primary); background: var(--bg-hover); border-color: var(--gray-400, #9ca3af); } /* =================================== LOADING STATES =================================== */ .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: var(--space-sm); } @keyframes spin { to { transform: rotate(360deg); } } /* =================================== SIGNUP PAGE (Dark theme) Auth pages are standalone dark-themed. Signup matches the landing page dark theme. =================================== */ body.auth-signup { background: var(--background-color); color: var(--text-primary); } body.auth-signup::before { top: 20%; left: 50%; right: auto; bottom: auto; width: 800px; height: 800px; background: radial-gradient(circle, rgba(94, 92, 230, 0.15) 0%, rgba(94, 92, 230, 0.05) 40%, transparent 70%); border-radius: 50%; transform: translateX(-50%); z-index: 0; pointer-events: none; opacity: 1; } .signup-page { position: relative; z-index: 1; min-height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; margin: 0 auto; text-align: center; } /* Signup logo */ .signup-logo { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 20px; text-decoration: none; width: 100%; } .signup-logo-mark { width: 32px; height: 32px; display: block; flex-shrink: 0; } .signup-logo .wordmark { font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 300; color: var(--emmber-brand-dark, #09090B); letter-spacing: -0.5px; } .signup-logo .wordmark-accent { color: var(--emmber-core); } /* Signup heading */ .signup-heading { text-align: center; margin-bottom: 8px; } .signup-heading h1 { font-size: 28px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.5px; margin: 0; } .signup-heading p { font-size: 15px; color: var(--text-secondary); margin: 8px 0 0; } /* Signup card */ .signup-card { width: 100%; max-width: 480px; background: var(--bg-white); border: 1px solid var(--gray-200, #e5e7eb); border-radius: 16px; padding: 32px; margin: 24px auto 0; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); text-align: left; } /* Signup form elements */ .signup-form .form-group { margin-bottom: 16px; } .signup-form .form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; } .signup-form .form-control { width: 100%; padding: 12px 14px; font-size: 15px; border: 1.5px solid var(--gray-300, #d1d5db); border-radius: 10px; background: var(--bg-white); color: var(--text-primary); transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit; } .signup-form .form-control:hover { border-color: var(--gray-400, #9ca3af); } .signup-form .form-control:focus:not(:focus-visible) { outline: none; border-color: var(--emmber-core); box-shadow: 0 0 0 3px rgba(94, 92, 230, 0.15); background: var(--bg-white); color: var(--text-primary); } .signup-form .form-control::placeholder { color: var(--text-muted); } .signup-form .password-input-wrapper { position: relative; } .signup-form .password-input-wrapper .form-control { padding-right: 44px; } .signup-form .toggle-password { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 5; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0; font-size: 16px; line-height: 1; } .signup-form .toggle-password:hover { color: var(--text-secondary); } .signup-form select.form-control { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; } .signup-form select.form-control option { background: var(--bg-white); color: var(--text-primary); } /* Password requirements */ .password-requirements { font-size: 12px; color: var(--text-secondary); margin-top: 8px; margin-bottom: 16px; padding: 10px 12px; background: var(--emmber-cream); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 8px; } .password-requirements .requirement { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; transition: color 0.2s; } .password-requirements .requirement:last-child { margin-bottom: 0; } .password-requirements .requirement i { width: 14px; font-size: 10px; } .password-requirements .requirement.met { color: #4CAF50; } .password-requirements .requirement.met i::before { content: "\f00c"; } .password-requirements .requirement:not(.met) i::before { content: "\f111"; } /* Terms checkbox */ .terms-checkbox { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; } .terms-checkbox input[type="checkbox"] { margin-top: 2px; accent-color: var(--emmber-core); width: 16px; height: 16px; flex-shrink: 0; background: var(--bg-white); border: 1.5px solid var(--gray-300, #d1d5db); } .terms-checkbox label { font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .terms-checkbox a { color: var(--emmber-core); text-decoration: none; } .terms-checkbox a:hover { text-decoration: underline; } /* Signup submit button */ .btn-signup { width: 100%; padding: 14px; font-size: 15px; font-weight: 600; font-family: inherit; background: var(--emmber-core); color: #fff; border: none; border-radius: 10px; cursor: pointer; transition: all 0.2s; letter-spacing: -0.01em; } .btn-signup:hover { background: var(--emmber-warm); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(94, 92, 230, 0.3); } .btn-signup:active { transform: translateY(0); } .btn-signup:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Signup divider */ .signup-divider { display: flex; align-items: center; margin: 24px 0; color: #888; font-size: 13px; font-weight: 500; } .signup-divider::before, .signup-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-200, #e5e7eb); } .signup-divider::before { margin-right: 16px; } .signup-divider::after { margin-left: 16px; } /* Cloudflare Turnstile widget */ .cf-turnstile { display: flex; justify-content: center; margin: 20px 0; } /* Signup page — light theme spacing */ body.auth-signup .cf-turnstile { margin: 24px 0 8px; } /* Email form — hidden until toggled */ .email-form-hidden { display: none; } /* "Sign up with email" toggle button */ .email-signup-toggle { display: block; width: 100%; background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--emmber-core); cursor: pointer; padding: 6px 0 2px; text-align: center; transition: color 0.2s; } .email-signup-toggle:hover { color: var(--emmber-warm); text-decoration: underline; } /* Social buttons — signup dark theme */ body.auth-signup .social-buttons { gap: 10px; } body.auth-signup .social-btn { background: var(--bg-hover); border: 1.5px solid rgba(0, 0, 0, 0.08); color: var(--text-primary); padding: 12px 16px; font-size: 14px; border-radius: 10px; } body.auth-signup .social-btn:hover:not(.disabled) { border-color: var(--emmber-core); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); background: var(--bg-hover); } body.auth-signup .social-btn.disabled { opacity: 0.4; } body.auth-signup .social-btn img { width: 20px; height: 20px; margin-right: 10px; } /* Signup footer */ .signup-footer { text-align: center; margin-top: 24px; font-size: 14px; color: var(--text-muted); } .signup-footer a { color: var(--emmber-core); text-decoration: none; font-weight: 600; } .signup-footer a:hover { text-decoration: underline; color: var(--emmber-glow); } .signup-tagline { text-align: center; margin-top: 32px; font-size: 13px; color: var(--text-muted); letter-spacing: 0.5px; } /* Signup alerts */ .signup-alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-size: 14px; } .signup-alert-success { background: rgba(76, 175, 80, 0.12); border: 1px solid rgba(76, 175, 80, 0.3); color: #81c784; } .signup-alert-error { background: rgba(229, 57, 53, 0.12); border: 1px solid rgba(229, 57, 53, 0.3); color: #ef9a9a; } .signup-alert-referral { background: rgba(94, 92, 230, 0.12); border: 1px solid var(--emmber-core); color: var(--emmber-glow); } /* Signup form helpers */ .signup-form .required-asterisk { color: var(--emmber-glow); } .signup-form .form-text { margin-top: 4px; color: var(--text-secondary); } /* Signup responsive */ @media (max-width: 540px) { .signup-page { padding: 32px 16px 32px; } .signup-card { padding: 24px 20px; } .signup-heading h1 { font-size: 24px; } } /* Signup animations */ @keyframes signupFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .signup-logo { animation: signupFadeIn 0.5s ease-out; } .signup-heading { animation: signupFadeIn 0.5s ease-out 0.05s both; } .signup-card { animation: signupFadeIn 0.5s ease-out 0.1s both; } /* Note: Utility classes (.d-none, .d-flex, etc.) are provided by Bootstrap 5 */ /* =================================== VERIFY PAGE (Human verification gate) Dark-themed interstitial before auth pages. =================================== */ body.auth-verify { background-color: var(--background-color); color: var(--text-primary); display: flex; align-items: center; justify-content: center; min-height: 100vh; } .verify-page { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; width: 100%; min-height: 100vh; } /* Logo */ .verify-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 40px; } .verify-wordmark { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 300; color: #fff; letter-spacing: -0.5px; } .verify-wordmark-accent { color: var(--emmber-core); } /* Card */ .verify-card { width: 100%; max-width: 400px; background: var(--bg-white); border: 1px solid var(--gray-200, #e5e7eb); border-radius: 20px; padding: 40px 36px; text-align: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); animation: slideInRight 0.5s ease-out; } .verify-title { font-size: 22px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; letter-spacing: -0.02em; } .verify-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 28px; line-height: 1.5; } /* Error */ .verify-error { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(229, 57, 53, 0.12); border: 1px solid rgba(229, 57, 53, 0.3); border-radius: 10px; color: #ef9a9a; font-size: 13px; padding: 10px 14px; margin-bottom: 20px; } /* Turnstile widget — centered */ .verify-widget { display: flex; justify-content: center; margin: 0 auto; } /* Fallback submit (only shown if JS auto-submit fails) */ .verify-btn { width: 100%; margin-top: 20px; padding: 14px; font-size: 15px; font-weight: 600; font-family: inherit; background: var(--emmber-core); color: #fff; border: none; border-radius: 10px; cursor: pointer; transition: all 0.2s; } .verify-btn:hover { background: var(--emmber-warm); transform: translateY(-1px); } /* Tagline */ .verify-tagline { margin-top: 32px; font-size: 13px; color: var(--text-muted); letter-spacing: 0.5px; } /* =================================== DARK MODE OVERRIDES Add class="emmber-dark" to to activate =================================== */ body.emmber-dark { background-color: var(--emmber-charcoal); } /* Legacy dark mode (right panel for forgot/reset/verify/etc.) */ body.emmber-dark .login-right-panel { background: var(--emmber-ash); border-left-color: var(--emmber-smoke); } body.emmber-dark .login-form { background: var(--emmber-smoke); border-color: rgba(255, 255, 255, 0.06); } body.emmber-dark .login-form-title { color: var(--emmber-cream); } /* New centered login dark mode */ body.emmber-dark .login-wrapper.login-centered { background: var(--emmber-brand-dark, #09090B); } body.emmber-dark .login-centered .login-form-container { background: var(--emmber-charcoal, #18181B); border-color: var(--emmber-smoke, #3F3F46); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2); } body.emmber-dark .login-centered .login-form { background: transparent; border: none; padding: 0; } /* Plus mark: swap to white lockup in dark mode */ body.emmber-dark .login-centered .login-brand-mark .mark-light { display: none; } body.emmber-dark .login-centered .login-brand-mark .mark-dark { display: inline-block; } body.emmber-dark .form-control { background: var(--emmber-charcoal); color: var(--emmber-cream); border-color: var(--emmber-smoke); } body.emmber-dark .form-control:hover { border-color: rgba(255, 255, 255, 0.15); } body.emmber-dark .form-control:focus:not(:focus-visible) { background: var(--emmber-charcoal); color: var(--emmber-cream); } body.emmber-dark .form-control::placeholder { color: #666; } body.emmber-dark .social-btn { background: var(--emmber-smoke); border-color: rgba(255, 255, 255, 0.06); color: var(--emmber-cream); } body.emmber-dark .social-btn:hover:not(.disabled) { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); background: var(--emmber-smoke); } body.emmber-dark .form-check-input { background: var(--emmber-charcoal); border-color: var(--emmber-smoke); } body.emmber-dark .form-check-input:hover { border-color: rgba(255, 255, 255, 0.15); } body.emmber-dark .divider::before, body.emmber-dark .divider::after { background: var(--emmber-smoke); } body.emmber-dark .login-footer { color: #666; } body.emmber-dark .admin-modal { background: var(--emmber-ash); border-color: var(--emmber-smoke); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } body.emmber-dark .admin-modal h3 { color: var(--emmber-cream); } body.emmber-dark .btn-secondary { background: var(--emmber-smoke); color: var(--emmber-cream); } body.emmber-dark .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); } body.emmber-dark .maintenance-screen { background: var(--emmber-charcoal); } body.emmber-dark .alert-success { color: #81c784; } body.emmber-dark .alert-danger { color: #ef9a9a; } body.emmber-dark .alert-info { color: var(--emmber-glow); } body.emmber-dark .signup-card, body.emmber-dark .verify-card { background: var(--emmber-ash); border-color: var(--emmber-smoke); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); } body.emmber-dark .signup-form .form-control { background: var(--emmber-charcoal); color: var(--emmber-cream); border-color: var(--emmber-smoke); } body.emmber-dark .signup-form .form-control:focus:not(:focus-visible) { background: var(--emmber-charcoal); color: var(--emmber-cream); } body.emmber-dark .signup-divider::before, body.emmber-dark .signup-divider::after { background: var(--emmber-smoke); } body.emmber-dark .signup-form select.form-control option { background: var(--emmber-ash); } body.emmber-dark .password-requirements { background: var(--emmber-smoke); border-color: rgba(255, 255, 255, 0.06); } body.emmber-dark .auth-info-box { background: var(--emmber-smoke); } body.emmber-dark .login-form-container .progress { background: rgba(255, 255, 255, 0.1); } body.emmber-dark .login-form-container .btn-outline-secondary { color: #999; border-color: var(--emmber-smoke); } body.emmber-dark .login-form-container .btn-outline-secondary:hover { color: var(--emmber-cream); background: var(--emmber-smoke); border-color: rgba(255, 255, 255, 0.15); } body.emmber-dark .terms-checkbox input[type="checkbox"] { background: var(--emmber-charcoal); border-color: var(--emmber-smoke); } body.emmber-dark.auth-signup .social-btn { background: var(--emmber-smoke); border-color: rgba(255, 255, 255, 0.06); color: var(--emmber-cream); } body.emmber-dark.auth-signup .social-btn:hover:not(.disabled) { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); background: var(--emmber-smoke); } body.emmber-dark.auth-signup { background: var(--emmber-charcoal); } body.emmber-dark.auth-verify { background-color: var(--emmber-charcoal); color: var(--emmber-cream); } /* Skip link — fully hidden until focused via keyboard Tab (a11y) */ .skip-link { position: absolute; top: -100px; left: -9999px; background: transparent; color: transparent; padding: 8px 16px; z-index: 10000; text-decoration: none; border-radius: 0 0 4px 0; font-weight: 600; pointer-events: none; } .skip-link:focus { top: 0; left: 0; background: var(--emmber-core); color: #fff; outline: 3px solid var(--emmber-deep); outline-offset: 2px; pointer-events: auto; } /* Required-field asterisk inside form labels (a11y — visible cue, hidden from SR) */ .required-indicator { color: var(--danger, #dc2626); margin-left: 2px; font-weight: 600; }