Spaces:
Runtime error
Runtime error
| :root { | |
| --primary: #2563eb; | |
| --primary-light: #60a5fa; | |
| --accent: #14b8a6; | |
| --bg: #f8fafc; | |
| --bg-dark: #18181b; | |
| --text: #1e293b; | |
| --text-light: #f1f5f9; | |
| --card: #fff; | |
| --card-dark: #23272f; | |
| --border: #e5e7eb; | |
| --border-dark: #2d3340; | |
| --transition: 0.3s cubic-bezier(.4,0,.2,1); | |
| } | |
| [data-theme="dark"] { | |
| --bg: var(--bg-dark); | |
| --text: var(--text-light); | |
| --card: var(--card-dark); | |
| --border: var(--border-dark); | |
| } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Inter', sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| transition: background var(--transition), color var(--transition); | |
| } | |
| a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| transition: color var(--transition); | |
| } | |
| a:hover { | |
| color: var(--accent); | |
| } | |
| .container { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 0 1.5rem; | |
| } | |
| header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 2rem 0 1.5rem 0; | |
| } | |
| .logo { | |
| font-weight: 700; | |
| font-size: 1.5rem; | |
| letter-spacing: -1px; | |
| color: var(--primary); | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| font-weight: 500; | |
| } | |
| .theme-toggle { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 1.3rem; | |
| color: var(--text); | |
| margin-left: 1.5rem; | |
| transition: color var(--transition); | |
| } | |
| .sticky-header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| background: var(--bg); | |
| transition: background var(--transition); | |
| box-shadow: 0 2px 8px 0 rgba(30,41,59,0.04); | |
| } | |
| .hamburger { | |
| display: none; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| width: 40px; | |
| height: 40px; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| margin-left: 1rem; | |
| z-index: 110; | |
| } | |
| .hamburger span { | |
| display: block; | |
| width: 24px; | |
| height: 3px; | |
| margin: 3px 0; | |
| background: var(--text); | |
| border-radius: 2px; | |
| transition: all 0.3s; | |
| } | |
| /* Login Form */ | |
| .login-container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: calc(100vh - 120px); | |
| padding: 2rem 0; | |
| } | |
| .login-card { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 1rem; | |
| padding: 2.5rem; | |
| width: 100%; | |
| max-width: 400px; | |
| box-shadow: 0 4px 24px 0 rgba(30,41,59,0.08); | |
| transition: background var(--transition), border var(--transition); | |
| } | |
| .login-header { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .login-title { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| color: var(--text); | |
| } | |
| .login-subtitle { | |
| color: #64748b; | |
| font-size: 1rem; | |
| } | |
| [data-theme="dark"] .login-subtitle { | |
| color: #cbd5e1; | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-label { | |
| display: block; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| color: var(--text); | |
| font-size: 0.95rem; | |
| } | |
| .form-input { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| border: 1px solid var(--border); | |
| border-radius: 0.5rem; | |
| font-size: 1rem; | |
| font-family: inherit; | |
| background: var(--bg); | |
| color: var(--text); | |
| transition: border var(--transition), background var(--transition), color var(--transition); | |
| box-sizing: border-box; | |
| } | |
| .form-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(37,99,235,0.1); | |
| } | |
| .form-input::placeholder { | |
| color: #94a3b8; | |
| } | |
| [data-theme="dark"] .form-input::placeholder { | |
| color: #64748b; | |
| } | |
| .form-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .checkbox-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .checkbox-group input[type="checkbox"] { | |
| width: 16px; | |
| height: 16px; | |
| accent-color: var(--primary); | |
| } | |
| .checkbox-group label { | |
| font-size: 0.9rem; | |
| color: var(--text); | |
| cursor: pointer; | |
| } | |
| .forgot-link { | |
| font-size: 0.9rem; | |
| color: var(--primary); | |
| text-decoration: none; | |
| } | |
| .forgot-link:hover { | |
| color: var(--accent); | |
| } | |
| .login-btn { | |
| width: 100%; | |
| padding: 0.85rem 1.5rem; | |
| background: var(--primary); | |
| color: #fff; | |
| border: none; | |
| border-radius: 0.5rem; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background var(--transition); | |
| margin-bottom: 1.5rem; | |
| } | |
| .login-btn:hover { | |
| background: var(--accent); | |
| } | |
| .login-btn:disabled { | |
| background: #94a3b8; | |
| cursor: not-allowed; | |
| } | |
| .divider { | |
| display: flex; | |
| align-items: center; | |
| margin: 1.5rem 0; | |
| color: #64748b; | |
| font-size: 0.9rem; | |
| } | |
| [data-theme="dark"] .divider { | |
| color: #94a3b8; | |
| } | |
| .divider::before, | |
| .divider::after { | |
| content: ""; | |
| flex: 1; | |
| height: 1px; | |
| background: var(--border); | |
| } | |
| .divider span { | |
| padding: 0 1rem; | |
| } | |
| .social-btn { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| border: 1px solid var(--border); | |
| border-radius: 0.5rem; | |
| background: var(--card); | |
| color: var(--text); | |
| font-size: 1rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: background var(--transition), border var(--transition); | |
| margin-bottom: 0.75rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| } | |
| .social-btn:hover { | |
| background: var(--bg); | |
| border-color: var(--primary); | |
| } | |
| .signup-link { | |
| text-align: center; | |
| margin-top: 1.5rem; | |
| color: #64748b; | |
| font-size: 0.95rem; | |
| } | |
| [data-theme="dark"] .signup-link { | |
| color: #cbd5e1; | |
| } | |
| .signup-link a { | |
| font-weight: 600; | |
| } | |
| .error-message { | |
| background: #fef2f2; | |
| color: #dc2626; | |
| padding: 0.75rem 1rem; | |
| border-radius: 0.5rem; | |
| font-size: 0.9rem; | |
| margin-bottom: 1rem; | |
| border: 1px solid #fecaca; | |
| } | |
| [data-theme="dark"] .error-message { | |
| background: #450a0a; | |
| color: #fca5a5; | |
| border-color: #7f1d1d; | |
| } | |
| .success-message { | |
| background: #f0fdf4; | |
| color: #16a34a; | |
| padding: 0.75rem 1rem; | |
| border-radius: 0.5rem; | |
| font-size: 0.9rem; | |
| margin-bottom: 1rem; | |
| border: 1px solid #bbf7d0; | |
| } | |
| [data-theme="dark"] .success-message { | |
| background: #052e16; | |
| color: #86efac; | |
| border-color: #166534; | |
| } | |
| .verification-link { | |
| text-align: center; | |
| margin-top: 1rem; | |
| color: #64748b; | |
| font-size: 0.9rem; | |
| } | |
| [data-theme="dark"] .verification-link { | |
| color: #cbd5e1; | |
| } | |
| .verification-link a { | |
| font-weight: 600; | |
| } | |
| /* Mobile Responsive */ | |
| @media (max-width: 900px) { | |
| .nav-links { | |
| position: fixed; | |
| top: 70px; | |
| right: 0; | |
| background: var(--card); | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 1.5rem; | |
| padding: 2rem 2rem 2rem 1.5rem; | |
| box-shadow: 0 4px 24px 0 rgba(30,41,59,0.10); | |
| border-radius: 0 0 0.7rem 0.7rem; | |
| transform: translateY(-120%); | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: transform 0.3s, opacity 0.3s; | |
| min-width: 60vw; | |
| } | |
| .nav-links.open { | |
| transform: translateY(0); | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .hamburger { | |
| display: flex; | |
| } | |
| .logo { | |
| z-index: 120; | |
| } | |
| .theme-toggle { | |
| z-index: 120; | |
| margin-left: 0.5rem; | |
| } | |
| .container { | |
| padding: 0 0.5rem; | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .nav-links { | |
| top: 60px; | |
| padding: 1.2rem 1.2rem 1.2rem 1rem; | |
| min-width: 80vw; | |
| } | |
| .login-card { | |
| padding: 2rem 1.5rem; | |
| margin: 0 1rem; | |
| } | |
| } |