Spaces:
Running
Running
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| line-height: 1.6; | |
| color: #1f2937; | |
| } | |
| /* Smooth scrolling */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Custom animations */ | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-20px); | |
| } | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes slideInLeft { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-50px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes slideInRight { | |
| from { | |
| opacity: 0; | |
| transform: translateX(50px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .animate-fade-in-up { | |
| animation: fadeInUp 0.8s ease-out; | |
| } | |
| .animate-slide-in-left { | |
| animation: slideInLeft 0.8s ease-out; | |
| } | |
| .animate-slide-in-right { | |
| animation: slideInRight 0.8s ease-out; | |
| } | |
| /* Gradient text effect */ | |
| .gradient-text { | |
| background: linear-gradient(135deg, #3b82f6, #f59e0b); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Custom shadows */ | |
| .shadow-soft { | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); | |
| } | |
| .shadow-strong { | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); | |
| } | |
| /* Hover effects */ | |
| .hover-lift { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .hover-lift:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| /* Loading animation for images */ | |
| img { | |
| transition: opacity 0.3s ease; | |
| } | |
| img:not([src]) { | |
| opacity: 0; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f5f9; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #cbd5e1; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #94a3b8; | |
| } | |
| /* Responsive design improvements */ | |
| @media (max-width: 768px) { | |
| .text-6xl { | |
| font-size: 3rem; | |
| } | |
| .text-8xl { | |
| font-size: 4rem; | |
| } | |
| } | |
| /* Focus styles for accessibility */ | |
| a:focus, | |
| button:focus { | |
| outline: 2px solid #3b82f6; | |
| outline-offset: 2px; | |
| } | |
| /* Print styles */ | |
| @media print { | |
| .no-print { | |
| display: none; | |
| } | |
| } | |
| /* Dark mode support */ | |
| @media (prefers-color-scheme: dark) { | |
| .dark-mode-support { | |
| background-color: #1f2937; | |
| color: #f9fafb; | |
| } | |
| } |