| @tailwind base; |
| @tailwind components; |
| @tailwind utilities; |
|
|
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: rgba(0, 0, 0, 0.1); |
| border-radius: 4px; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: linear-gradient(45deg, #8b5cf6, #ec4899); |
| border-radius: 4px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: linear-gradient(45deg, #7c3aed, #db2777); |
| } |
|
|
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| } |
|
|
| @keyframes glow { |
| 0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } |
| 50% { box-shadow: 0 0 30px rgba(139, 92, 246, 0.6); } |
| } |
|
|
| @keyframes pulse-glow { |
| 0%, 100% { |
| box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); |
| transform: scale(1); |
| } |
| 50% { |
| box-shadow: 0 0 40px rgba(139, 92, 246, 0.8); |
| transform: scale(1.05); |
| } |
| } |
|
|
| |
| .animate-float { |
| animation: float 3s ease-in-out infinite; |
| } |
|
|
| .animate-glow { |
| animation: glow 2s ease-in-out infinite; |
| } |
|
|
| .animate-pulse-glow { |
| animation: pulse-glow 2s ease-in-out infinite; |
| } |
|
|
| |
| .gradient-text { |
| background: linear-gradient(45deg, #8b5cf6, #ec4899, #06b6d4, #10b981); |
| background-size: 300% 300%; |
| animation: gradient-shift 3s ease infinite; |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| @keyframes gradient-shift { |
| 0%, 100% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| } |
|
|
| |
| .glass { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| |
| .hover-lift { |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| } |
|
|
| .hover-lift:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
| } |
|
|
| |
| .btn-gradient { |
| background: linear-gradient(45deg, #8b5cf6, #ec4899); |
| transition: all 0.3s ease; |
| } |
|
|
| .btn-gradient:hover { |
| background: linear-gradient(45deg, #7c3aed, #db2777); |
| transform: translateY(-2px); |
| box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4); |
| } |
|
|
| |
| .spinner { |
| border: 2px solid rgba(255, 255, 255, 0.3); |
| border-top: 2px solid #8b5cf6; |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| } |
|
|
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
|
|
| |
| ::selection { |
| background: rgba(139, 92, 246, 0.3); |
| color: white; |
| } |
|
|
| |
| .focus-ring:focus { |
| outline: none; |
| ring: 2px; |
| ring-color: #8b5cf6; |
| ring-offset: 2px; |
| } |
|
|
