/* Enterprise-level Pure CSS Login Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; /** Auth page background — deep dark with subtle purple undertone */ background: linear-gradient(135deg, #1a1a2e 0%, #2a1f3d 50%, #0d0d1a 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } .login-card { background: var(--color-bg); border-radius: 16px; /** Subtle warm gold glow */ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(212, 165, 116, 0.08); padding: 3rem 2.5rem; width: 100%; max-width: 420px; position: relative; } .login-header { text-align: center; margin-bottom: 2.5rem; } .login-header h2 { color: var(--color-text); font-size: 1.875rem; font-weight: 700; margin: 0 0 0.75rem 0; line-height: 1.2; } .login-header p { color: var(--color-text-color-secondary); font-size: 0.875rem; margin: 0; } .message { padding: 0.875rem 1rem; border-radius: 8px; margin-bottom: 1.5rem; font-size: 0.875rem; font-weight: 500; } .message-error { background-color: var(--color-danger-bg, #fed7d7); color: var(--color-danger); border: 1px solid #feb2b2; } .message-success { background-color: var(--color-success-bg, #c6f6d5); color: var(--color-success); border: 1px solid #9ae6b4; } .login-form { display: flex; flex-direction: column; gap: 1.5rem; } .field-wrapper { display: flex; flex-direction: column; gap: 1rem; } .form-input { width: 100%; padding: 0.875rem 1rem; border: 2px solid var(--color-border); border-radius: 8px; font-size: 1rem; line-height: 1.5; color: var(--color-text); background-color: var(--color-bg); transition: all 0.2s ease; } .form-input:focus { outline: none; border-color: var(--primary, #D4A574); box-shadow: 0 0 0 3px var(--primary-muted, rgba(212, 165, 116, 0.15)); } .form-input.error { border-color: var(--color-danger); } .form-input::placeholder { color: var(--color-text-color-muted); } .invalid-feedback { color: var(--color-danger); font-size: 0.875rem; margin-top: 0.5rem; font-weight: 500; } .form-options { display: flex; justify-content: space-between; align-items: center;flex-wrap: wrap; gap: 1rem; } .remember-me { display: flex; align-items: center; gap: 0.5rem; } .checkbox-input { width: 1rem; height: 1rem; accent-color: var(--primary, #D4A574); } .checkbox-label { font-size: 0.875rem; color: var(--color-text-color-secondary); cursor: pointer; } .submit-button { width: 100%; padding: 0.875rem 1rem; background: var(--primary, #D4A574); color: var(--color-text-inverse); border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .submit-button:hover { background: var(--primary-hover, #C4956A); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4); } .alternative-login { margin-top: 2rem; } .divider { position: relative; margin-bottom: 1.5rem; } .divider-line { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background-color: var(--color-border); } .divider-text { display: flex; justify-content: center; } .divider-text span { background-color: var(--color-bg); padding: 0 1rem; color: var(--color-text-color-secondary); font-size: 0.875rem; } .social-login-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; margin-bottom: 1rem; } .social-button { display: flex; align-items: center; justify-content: center; padding: 0.75rem; border: 2px solid var(--color-border); border-radius: 8px; background-color: var(--color-bg); text-decoration: none; transition: all 0.2s ease; } .social-button:hover { border-color: #cbd5e0; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .social-icon { width: 1.25rem; height: 1.25rem; } .auth-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; border: 2px solid var(--color-border); border-radius: 8px; background-color: var(--color-bg); color: var(--color-text-color-secondary); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; margin-bottom: 0.75rem; text-decoration: none; } .auth-button:hover { border-color: var(--color-border); background-color: var(--color-background-secondary); transform: translateY(-1px); color: var(--color-text-color-secondary); } .button-icon { width: 1rem; height: 1rem; } .footer-links { text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .footer-links a { color: var(--color-text-color-secondary); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: color 0.2s ease; display: block; margin-bottom: 0.5rem; } .footer-links a:hover { color: var(--color-text); } .footer-links a:last-child { margin-bottom: 0; } .tfa-link { text-align: center; margin-top: 1rem; } .tfa-link a { color: var(--color-text-color-secondary); text-decoration: none; font-size: 0.75rem; transition: color 0.2s ease; } .tfa-link a:hover { color: var(--color-text); } /* Responsive Design */ @media (max-width: 480px) { body { padding: 1rem 0.5rem; } .login-card { padding: 2rem 1.5rem; } .form-options { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .social-login-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } }