Spaces:
Sleeping
Sleeping
| /* Signup.css */ | |
| .signup-page { | |
| min-height: 100vh; | |
| background: var(--bg-gradient); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 24px 16px; | |
| } | |
| .signup-container { | |
| width: 100%; | |
| max-width: 520px; | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 20px; | |
| box-shadow: var(--shadow-xl); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| overflow: hidden; | |
| animation: fadeInUp 0.6s ease-out; | |
| } | |
| [data-theme="dark"] .signup-container { | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); | |
| } | |
| /* Header Section */ | |
| .signup-header { | |
| text-align: center; | |
| padding: 40px 32px 32px 32px; | |
| background: var(--bg-secondary); | |
| border-bottom: 1px solid var(--border-primary); | |
| } | |
| .logo-container { | |
| width: 56px; | |
| height: 56px; | |
| background: var(--accent-gradient); | |
| border-radius: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 20px auto; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .logo-icon { | |
| width: 28px; | |
| height: 28px; | |
| color: #FFFFFF; | |
| } | |
| .signup-title { | |
| font-size: 28px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin: 0 0 8px 0; | |
| line-height: 1.2; | |
| } | |
| .signup-subtitle { | |
| font-size: 16px; | |
| color: var(--text-secondary); | |
| margin: 0; | |
| line-height: 1.5; | |
| } | |
| /* Form Container */ | |
| .signup-form-container { | |
| padding: 32px; | |
| } | |
| .signup-form { | |
| margin-bottom: 24px; | |
| } | |
| /* Form Groups and Rows */ | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .form-row .form-group { | |
| margin-bottom: 0; | |
| } | |
| .form-label { | |
| display: block; | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 8px; | |
| } | |
| .optional { | |
| font-weight: 400; | |
| color: var(--text-tertiary); | |
| font-size: 13px; | |
| } | |
| /* Input Container */ | |
| .input-container { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .input-icon { | |
| position: absolute; | |
| left: 16px; | |
| width: 16px; | |
| height: 16px; | |
| color: var(--text-tertiary); | |
| z-index: 1; | |
| transition: color 0.2s ease; | |
| } | |
| .form-input, | |
| .form-select { | |
| width: 100%; | |
| padding: 16px 16px 16px 48px; | |
| border: 1px solid var(--border-secondary); | |
| border-radius: 12px; | |
| background: var(--input-bg); | |
| color: var(--text-primary); | |
| font-size: 16px; | |
| transition: all 0.2s ease; | |
| outline: none; | |
| } | |
| .form-input::placeholder { | |
| color: var(--text-tertiary); | |
| } | |
| .form-select { | |
| cursor: pointer; | |
| appearance: none; | |
| background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); | |
| background-position: right 12px center; | |
| background-repeat: no-repeat; | |
| background-size: 16px; | |
| padding-right: 48px; | |
| } | |
| [data-theme="dark"] .form-select { | |
| background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%9ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); | |
| } | |
| .form-input:focus, | |
| .form-select:focus { | |
| border-color: var(--accent-primary); | |
| box-shadow: var(--input-focus-shadow); | |
| } | |
| .form-input:focus + .input-icon, | |
| .form-select:focus + .input-icon, | |
| .input-container:focus-within .input-icon { | |
| color: var(--accent-primary); | |
| } | |
| .form-input.error, | |
| .form-select.error { | |
| border-color: var(--error-text); | |
| background: var(--error-bg); | |
| } | |
| /* Password Toggle */ | |
| .password-toggle { | |
| position: absolute; | |
| right: 16px; | |
| background: none; | |
| border: none; | |
| color: var(--text-tertiary); | |
| cursor: pointer; | |
| padding: 4px; | |
| border-radius: 6px; | |
| transition: all 0.2s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 2; | |
| } | |
| .password-toggle:hover { | |
| color: var(--text-primary); | |
| background: var(--bg-secondary); | |
| } | |
| /* Terms Section */ | |
| .terms-section { | |
| margin-bottom: 24px; | |
| padding: 16px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 12px; | |
| } | |
| .terms-text { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| margin: 0; | |
| line-height: 1.5; | |
| text-align: center; | |
| } | |
| /* Error Messages */ | |
| .error-message { | |
| display: block; | |
| color: var(--error-text); | |
| font-size: 13px; | |
| margin-top: 6px; | |
| font-weight: 500; | |
| } | |
| .submit-error { | |
| background: var(--error-bg); | |
| border: 1px solid var(--error-border); | |
| border-radius: 8px; | |
| padding: 12px 16px; | |
| margin-bottom: 20px; | |
| color: var(--error-text); | |
| font-size: 14px; | |
| font-weight: 500; | |
| text-align: center; | |
| } | |
| /* Submit Button */ | |
| .submit-btn { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| background: var(--accent-gradient); | |
| color: #FFFFFF; | |
| border: none; | |
| padding: 16px 24px; | |
| border-radius: 12px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: var(--shadow-md); | |
| margin-bottom: 24px; | |
| } | |
| .submit-btn:hover:not(:disabled) { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .submit-btn:active:not(:disabled) { | |
| transform: translateY(0); | |
| } | |
| .submit-btn:disabled { | |
| opacity: 0.7; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .submit-btn.loading { | |
| pointer-events: none; | |
| } | |
| /* Loading Spinner */ | |
| .loading-spinner { | |
| width: 16px; | |
| height: 16px; | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| border-top: 2px solid #FFFFFF; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Divider */ | |
| .divider { | |
| position: relative; | |
| text-align: center; | |
| margin: 24px 0; | |
| } | |
| .divider::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: var(--border-secondary); | |
| } | |
| .divider span { | |
| background: var(--bg-primary); | |
| color: var(--text-tertiary); | |
| font-size: 13px; | |
| font-weight: 500; | |
| padding: 0 16px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* Social Signup */ | |
| .social-signup { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| margin-bottom: 24px; | |
| } | |
| .google-btn, | |
| .phone-btn { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| padding: 14px 20px; | |
| border: 1px solid var(--border-secondary); | |
| border-radius: 12px; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-size: 15px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .google-btn:hover:not(:disabled), | |
| .phone-btn:hover:not(:disabled) { | |
| border-color: var(--border-primary); | |
| background: var(--bg-secondary); | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .google-btn:disabled, | |
| .phone-btn:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .google-icon { | |
| width: 18px; | |
| height: 18px; | |
| flex-shrink: 0; | |
| } | |
| /* Footer */ | |
| .signup-footer { | |
| text-align: center; | |
| padding: 24px 32px 32px 32px; | |
| border-top: 1px solid var(--border-primary); | |
| background: var(--bg-secondary); | |
| } | |
| .signup-footer p { | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| margin: 0; | |
| } | |
| .link-btn { | |
| background: none; | |
| border: none; | |
| color: var(--accent-primary); | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| padding: 0; | |
| text-decoration: underline; | |
| text-underline-offset: 2px; | |
| transition: color 0.2s ease; | |
| } | |
| .link-btn:hover { | |
| color: var(--accent-secondary); | |
| } | |
| /* Animations */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Mobile Responsive */ | |
| @media (max-width: 640px) { | |
| .signup-page { | |
| padding: 16px 12px; | |
| } | |
| .signup-container { | |
| max-width: 100%; | |
| border-radius: 16px; | |
| } | |
| .signup-header { | |
| padding: 32px 24px 24px 24px; | |
| } | |
| .signup-title { | |
| font-size: 24px; | |
| } | |
| .signup-subtitle { | |
| font-size: 15px; | |
| } | |
| .signup-form-container { | |
| padding: 24px; | |
| } | |
| /* Stack form rows on mobile */ | |
| .form-row { | |
| grid-template-columns: 1fr; | |
| gap: 20px; | |
| } | |
| .form-row .form-group { | |
| margin-bottom: 0; | |
| } | |
| .form-input, | |
| .form-select { | |
| font-size: 16px; /* Prevents zoom on iOS */ | |
| padding: 14px 14px 14px 44px; | |
| } | |
| .submit-btn { | |
| padding: 14px 20px; | |
| font-size: 15px; | |
| } | |
| .google-btn, | |
| .phone-btn { | |
| padding: 12px 16px; | |
| font-size: 14px; | |
| } | |
| .signup-footer { | |
| padding: 20px 24px 24px 24px; | |
| } | |
| .terms-section { | |
| padding: 14px; | |
| } | |
| .terms-text { | |
| font-size: 13px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .signup-container { | |
| max-width: 100%; | |
| } | |
| .form-row { | |
| gap: 16px; | |
| } | |
| .form-input, | |
| .form-select { | |
| padding: 12px 12px 12px 40px; | |
| } | |
| .input-icon { | |
| left: 14px; | |
| width: 14px; | |
| height: 14px; | |
| } | |
| .password-toggle { | |
| right: 14px; | |
| } | |
| } | |
| /* Focus and Accessibility */ | |
| .submit-btn:focus-visible, | |
| .google-btn:focus-visible, | |
| .phone-btn:focus-visible, | |
| .link-btn:focus-visible, | |
| .password-toggle:focus-visible { | |
| outline: 2px solid var(--accent-primary); | |
| outline-offset: 2px; | |
| } | |
| .form-input:focus-visible, | |
| .form-select:focus-visible { | |
| outline: none; /* Handled by border and shadow */ | |
| } | |
| /* High Contrast Mode */ | |
| @media (prefers-contrast: high) { | |
| .signup-container { | |
| border-width: 2px; | |
| } | |
| .form-input, | |
| .form-select { | |
| border-width: 2px; | |
| } | |
| .submit-btn { | |
| border: 2px solid var(--accent-primary); | |
| } | |
| } | |
| /* Reduced Motion */ | |
| @media (prefers-reduced-motion: reduce) { | |
| .signup-container, | |
| .submit-btn, | |
| .google-btn, | |
| .phone-btn, | |
| .form-input, | |
| .form-select, | |
| .password-toggle, | |
| .link-btn { | |
| transition: none; | |
| } | |
| .loading-spinner { | |
| animation: none; | |
| } | |
| .fadeInUp { | |
| animation: none; | |
| } | |
| } | |
| /* Password Strength Indicator (Optional Enhancement) */ | |
| .password-strength { | |
| margin-top: 8px; | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .strength-bar { | |
| height: 3px; | |
| flex: 1; | |
| background: var(--border-tertiary); | |
| border-radius: 2px; | |
| transition: background-color 0.2s ease; | |
| } | |
| .strength-bar.weak { | |
| background: #EF4444; | |
| } | |
| .strength-bar.medium { | |
| background: #F59E0B; | |
| } | |
| .strength-bar.strong { | |
| background: #10B981; | |
| } | |
| .strength-text { | |
| font-size: 12px; | |
| margin-top: 4px; | |
| font-weight: 500; | |
| } | |
| .strength-text.weak { | |
| color: #EF4444; | |
| } | |
| .strength-text.medium { | |
| color: #F59E0B; | |
| } | |
| .strength-text.strong { | |
| color: #10B981; | |
| } |