Spaces:
Running
Running
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary-500: #6366f1; | |
| --primary-600: #4f46e5; | |
| --secondary-500: #10b981; | |
| --secondary-600: #059669; | |
| --dark-800: #1e293b; | |
| --dark-700: #334155; | |
| --dark-600: #475569; | |
| --light-100: #f8fafc; | |
| --light-200: #e2e8f0; | |
| --light-300: #cbd5e1; | |
| } | |
| body { | |
| font-family: 'Inter', system-ui, -apple-system, sans-serif; | |
| transition: all 0.3s ease; | |
| } | |
| /* Dark mode styles */ | |
| .dark body { | |
| background: linear-gradient(to bottom right, var(--dark-800), #0f172a); | |
| } | |
| .dark .auth-container { | |
| background-color: var(--dark-700); | |
| color: var(--light-200); | |
| border-color: var(--dark-600); | |
| } | |
| .dark input { | |
| background-color: var(--dark-600); | |
| border-color: var(--dark-600); | |
| color: var(--light-100); | |
| } | |
| .dark input::placeholder { | |
| color: var(--light-300); | |
| } | |
| .dark input:focus { | |
| border-color: var(--primary-500); | |
| box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3); | |
| } | |
| .dark .auth-footer { | |
| background-color: var(--dark-600); | |
| border-color: var(--dark-700); | |
| color: var(--light-300); | |
| } | |
| .dark .text-gray-600 { | |
| color: var(--light-300); | |
| } | |
| .dark a:hover { | |
| color: var(--light-200); | |
| } | |
| .dark .social-login button { | |
| background-color: var(--dark-600); | |
| color: var(--light-200); | |
| } | |
| .dark .social-login button:hover { | |
| background-color: var(--dark-500); | |
| } | |
| /* Custom focus styles */ | |
| input:focus, button:focus { | |
| outline: 2px solid transparent; | |
| outline-offset: 2px; | |
| } | |
| /* Animation for form inputs */ | |
| input { | |
| transition: all 0.2s ease; | |
| } | |
| /* Pulse animation for the submit button */ | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.02); } | |
| 100% { transform: scale(1); } | |
| } | |
| button[type="submit"]:hover { | |
| animation: pulse 1.5s infinite; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 640px) { | |
| .auth-container { | |
| border-radius: 0; | |
| } | |
| } |