* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--bg); min-height: 100vh; color: var(--text-main); } .auth-container { display: flex; min-height: 100vh; } /* Left Pane - Brand */ .auth-left { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-6); position: relative; overflow: hidden; } .mesh-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 80%, rgba(92, 98, 252, 0.4) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(157, 80, 255, 0.3) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(0, 212, 170, 0.2) 0%, transparent 60%), linear-gradient(135deg, var(--bg) 0%, var(--bg-secondary) 100%); z-index: 0; } .mesh-bg::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); opacity: 0.5; } .avatar-container { position: relative; z-index: 1; width: 220px; height: 240px; display: flex; align-items: center; justify-content: center; } .avatar-wrapper { width: 200px; height: 220px; background: var(--surface); border-radius: 50% 50% 45% 45%; box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.5), -8px -8px 20px rgba(255, 255, 255, 0.08), inset 0 -4px 8px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; } #clay-avatar { width: 180px; height: 200px; position: relative; z-index: 2; } .particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(92, 98, 252, 0.4); animation: float 6s ease-in-out infinite; } .particle:nth-child(2) { left: 15%; top: 20%; animation-delay: -1s; width: 6px; height: 6px; } .particle:nth-child(3) { right: 20%; top: 30%; animation-delay: -2s; width: 10px; height: 10px; } .particle:nth-child(4) { left: 25%; bottom: 25%; animation-delay: -3s; width: 5px; height: 5px; } .particle:nth-child(5) { right: 15%; bottom: 35%; animation-delay: -4s; width: 7px; height: 7px; } @keyframes float { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; } 50% { transform: translateY(-15px) scale(1.1); opacity: 1; } } .brand-text { position: relative; z-index: 1; text-align: center; margin-top: var(--space-6); } .brand-text h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; color: var(--text-main); margin-bottom: var(--space-2); } .brand-text p { font-size: var(--text-sm); color: var(--text-dim); max-width: 280px; } /* Right Pane - Form */ .auth-right { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: var(--bg); } .auth-card { width: 100%; max-width: 400px; background: var(--surface); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: 10px 10px 24px rgba(0, 0, 0, 0.4), -8px -8px 20px rgba(255, 255, 255, 0.04); } .auth-header { text-align: center; margin-bottom: var(--space-5); } .auth-header h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--text-main); margin-bottom: var(--space-2); } .auth-header p { color: var(--text-dim); font-size: var(--text-sm); } .form-group { margin-bottom: var(--space-4); } .form-label { display: block; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-main); margin-bottom: var(--space-2); } .form-input { width: 100%; padding: var(--space-3) var(--space-4); font-family: var(--font-body); font-size: var(--text-base); color: var(--text-main); background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-md); transition: all var(--transition-fast); text-align: center; letter-spacing: 0.3em; } .form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } .form-input::placeholder { color: var(--text-muted); letter-spacing: 0.3em; } .btn-primary { width: 100%; padding: var(--space-4); background: var(--accent-gradient); color: #fff; border: none; border-radius: var(--radius-lg); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-semibold); cursor: pointer; box-shadow: 6px 6px 12px rgba(92, 98, 252, 0.35), -4px -4px 8px rgba(255, 255, 255, 0.5); transition: all var(--transition-fast); margin-top: var(--space-2); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 8px 8px 16px rgba(92, 98, 252, 0.4), -4px -4px 8px rgba(255, 255, 255, 0.6); } .btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .error-msg { background: var(--error-light); color: var(--error); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-3); font-size: var(--text-sm); display: none; box-shadow: inset 2px 2px 4px rgba(239, 68, 68, 0.1); } .footer-links { text-align: center; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-dim); } .footer-links a { color: var(--accent); text-decoration: none; font-weight: var(--fw-medium); } .footer-links a:hover { text-decoration: underline; } /* Responsive */ @media (max-width: 900px) { .auth-container { flex-direction: column; } .auth-left { flex: none; height: auto; padding: var(--space-8) var(--space-4); } .avatar-wrapper { width: 160px; height: 180px; } #clay-avatar { width: 140px; height: 160px; } .particle { display: none; } .auth-right { padding: var(--space-4); } } @media (max-width: 480px) { .auth-card { padding: var(--space-4); } .auth-header h2 { font-size: var(--text-2xl); } }
Verify Email
User
U

Verify Email

Enter the 6-digit code we emailed you

mark_email_read

Verify your email

Enter the 6-digit code we emailed you.

Didn't get a code? Resend · Back to sign in

Menu