| .register-page { |
| position: relative; |
| overflow: hidden; |
| min-height: 100vh; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| background: #f5f5f5; |
| padding: 20px; |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
| } |
|
|
| .register-page::before { |
| content: ""; |
| position: absolute; |
| width: 500px; |
| height: 500px; |
| background: radial-gradient( |
| circle at top left, |
| #fdbb58, |
| #ff8fab, |
| transparent 70% |
| ); |
| top: -150px; |
| left: -150px; |
| filter: blur(60px); |
| opacity: 0.6; |
| animation: float 6s ease-in-out infinite; |
| } |
|
|
| .register-page::after { |
| content: ""; |
| position: absolute; |
| width: 400px; |
| height: 400px; |
| background: radial-gradient( |
| circle at bottom right, |
| #7dd3fc, |
| #c084fc, |
| transparent 70% |
| ); |
| bottom: -120px; |
| right: -120px; |
| filter: blur(60px); |
| opacity: 0.6; |
| animation: float 8s ease-in-out infinite; |
| } |
|
|
| @keyframes float { |
| 0%, 100% { |
| transform: translateY(0px); |
| } |
| 50% { |
| transform: translateY(-20px); |
| } |
| } |
|
|
| .register-card { |
| background: white; |
| border: 2px solid black; |
| box-shadow: 6px 6px 0 black; |
| border-radius: 8px; |
| padding: 40px; |
| max-width: 500px; |
| width: 100%; |
| position: relative; |
| z-index: 1; |
| animation: slideUp 0.5s ease-out; |
| } |
|
|
| @keyframes slideUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .register-header { |
| text-align: center; |
| margin-bottom: 30px; |
| } |
|
|
| .register-header h1 { |
| font-size: 28px; |
| font-weight: 700; |
| color: #333; |
| margin-bottom: 10px; |
| } |
|
|
| .register-header p { |
| font-size: 16px; |
| color: #666; |
| margin-bottom: 15px; |
| } |
|
|
| .connection-status { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| padding: 6px 12px; |
| border-radius: 20px; |
| font-size: 12px; |
| font-weight: 600; |
| } |
|
|
| .connection-status.offline { |
| background: #fee; |
| color: #c33; |
| border: 1px solid #fcc; |
| } |
|
|
| .status-dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: currentColor; |
| animation: pulse 1.5s ease-in-out infinite; |
| } |
|
|
| @keyframes pulse { |
| 0%, 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.4; |
| } |
| } |
|
|
| .register-form { |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| } |
|
|
| .form-group { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .form-group label { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-weight: 600; |
| font-size: 14px; |
| color: #333; |
| } |
|
|
| .label-icon { |
| font-size: 18px; |
| } |
|
|
| .form-group input { |
| padding: 12px 16px; |
| border: 2px solid #ddd; |
| border-radius: 6px; |
| font-size: 16px; |
| transition: all 0.2s ease; |
| font-family: inherit; |
| } |
|
|
| .form-group input:focus { |
| outline: none; |
| border-color: #fdbb58; |
| box-shadow: 0 0 0 3px rgba(253, 187, 88, 0.1); |
| } |
|
|
| .form-group input.error { |
| border-color: #f44336; |
| } |
|
|
| .form-group input:disabled { |
| background: #f5f5f5; |
| cursor: not-allowed; |
| } |
|
|
| .error-text { |
| color: #f44336; |
| font-size: 13px; |
| font-weight: 500; |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| } |
|
|
| .error-text::before { |
| content: "⚠️"; |
| font-size: 12px; |
| } |
|
|
| .password-section { |
| border: 2px solid #e8e8e8; |
| border-radius: 8px; |
| padding: 20px; |
| background: #fafafa; |
| } |
|
|
| .section-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 15px; |
| } |
|
|
| .section-header h3 { |
| font-size: 16px; |
| font-weight: 700; |
| color: #333; |
| margin: 0; |
| } |
|
|
| .checkbox-label { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| cursor: pointer; |
| font-size: 14px; |
| color: #666; |
| } |
|
|
| .checkbox-label input[type="checkbox"] { |
| width: 18px; |
| height: 18px; |
| cursor: pointer; |
| } |
|
|
| .bonus-badge { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| background: linear-gradient(135deg, #fdbb58, #ff8fab); |
| color: white; |
| padding: 12px 16px; |
| border-radius: 8px; |
| font-weight: 600; |
| font-size: 14px; |
| margin-bottom: 15px; |
| border: 2px solid rgba(0, 0, 0, 0.1); |
| } |
|
|
| .badge-icon { |
| font-size: 20px; |
| } |
|
|
| .rewards-list { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 10px; |
| margin-bottom: 15px; |
| } |
|
|
| .reward-item { |
| background: white; |
| padding: 10px; |
| border-radius: 6px; |
| border: 1px solid #ddd; |
| font-size: 13px; |
| font-weight: 600; |
| text-align: center; |
| color: #333; |
| } |
|
|
| .alert { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 12px 16px; |
| border-radius: 6px; |
| font-size: 14px; |
| font-weight: 500; |
| } |
|
|
| .alert-error { |
| background: #fee; |
| color: #c33; |
| border: 1px solid #fcc; |
| } |
|
|
| .alert-icon { |
| font-size: 18px; |
| } |
|
|
| .submit-button { |
| background: #fdbb58; |
| color: #000; |
| border: 2px solid black; |
| box-shadow: 4px 4px 0 black; |
| border-radius: 6px; |
| padding: 14px 30px; |
| font-size: 16px; |
| font-weight: 700; |
| cursor: pointer; |
| transition: all 0.1s ease; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 10px; |
| margin-top: 10px; |
| } |
|
|
| .submit-button:hover:not(:disabled) { |
| transform: translateY(-2px); |
| box-shadow: 6px 6px 0 black; |
| } |
|
|
| .submit-button:active:not(:disabled) { |
| transform: translateY(2px); |
| box-shadow: 0px 0px 0 black; |
| } |
|
|
| .submit-button:disabled { |
| opacity: 0.6; |
| cursor: not-allowed; |
| transform: none !important; |
| } |
|
|
| .button-spinner { |
| width: 16px; |
| height: 16px; |
| border: 2px solid rgba(0, 0, 0, 0.2); |
| border-top-color: #000; |
| border-radius: 50%; |
| animation: spin 0.6s linear infinite; |
| } |
|
|
| @keyframes spin { |
| to { |
| transform: rotate(360deg); |
| } |
| } |
|
|
| .form-footer { |
| text-align: center; |
| font-size: 13px; |
| color: #666; |
| margin-top: 10px; |
| } |
|
|
| |
| .loading-spinner { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 20px; |
| padding: 40px; |
| } |
|
|
| .spinner { |
| width: 50px; |
| height: 50px; |
| border: 4px solid #e8e8e8; |
| border-top-color: #fdbb58; |
| border-radius: 50%; |
| animation: spin 0.8s linear infinite; |
| } |
|
|
| .loading-spinner p { |
| font-size: 16px; |
| color: #666; |
| font-weight: 500; |
| } |
|
|
| .error-card, |
| .success-card { |
| text-align: center; |
| } |
|
|
| .error-icon, |
| .success-icon { |
| font-size: 60px; |
| margin-bottom: 20px; |
| animation: bounce 0.5s ease-out; |
| } |
|
|
| @keyframes bounce { |
| 0%, 100% { |
| transform: scale(1); |
| } |
| 50% { |
| transform: scale(1.2); |
| } |
| } |
|
|
| .error-card h2, |
| .success-card h2 { |
| font-size: 24px; |
| font-weight: 700; |
| color: #333; |
| margin-bottom: 10px; |
| } |
|
|
| .error-card p, |
| .success-card p { |
| font-size: 16px; |
| color: #666; |
| margin-bottom: 20px; |
| line-height: 1.5; |
| } |
|
|
| .success-subtitle { |
| font-size: 14px !important; |
| color: #999 !important; |
| } |
|
|
| .back-button { |
| background: #333; |
| color: white; |
| border: 2px solid black; |
| box-shadow: 4px 4px 0 black; |
| border-radius: 6px; |
| padding: 12px 30px; |
| font-size: 16px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.1s ease; |
| } |
|
|
| .back-button:hover { |
| transform: translateY(-2px); |
| box-shadow: 6px 6px 0 black; |
| } |
|
|
| .back-button:active { |
| transform: translateY(2px); |
| box-shadow: 0px 0px 0 black; |
| } |
|
|
| .success-animation { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| pointer-events: none; |
| overflow: hidden; |
| } |
|
|
| .confetti { |
| position: absolute; |
| width: 10px; |
| height: 10px; |
| background: #fdbb58; |
| animation: confetti-fall 3s ease-out forwards; |
| } |
|
|
| @keyframes confetti-fall { |
| to { |
| transform: translateY(100vh) rotate(360deg); |
| opacity: 0; |
| } |
| } |
|
|
| @media (max-width: 600px) { |
| .register-card { |
| padding: 30px 20px; |
| } |
|
|
| .register-header h1 { |
| font-size: 24px; |
| } |
|
|
| .rewards-list { |
| grid-template-columns: 1fr; |
| } |
|
|
| .section-header { |
| flex-direction: column; |
| align-items: flex-start; |
| gap: 10px; |
| } |
| } |
|
|
| input[type="number"]::-webkit-inner-spin-button, |
| input[type="number"]::-webkit-outer-spin-button { |
| -webkit-appearance: none; |
| margin: 0; |
| } |
|
|
| input[type="number"] { |
| -moz-appearance: textfield; |
| } |