|
|
@tailwind base; |
|
|
@tailwind components; |
|
|
@tailwind utilities; |
|
|
|
|
|
|
|
|
body { |
|
|
background-color: #fdfdfd; |
|
|
-webkit-tap-highlight-color: transparent; |
|
|
overscroll-behavior-y: none; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
height: 6px; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-track { |
|
|
background: transparent; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { |
|
|
background-color: rgba(244, 63, 94, 0.3); |
|
|
border-radius: 20px; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover { |
|
|
background-color: rgba(244, 63, 94, 0.6); |
|
|
} |
|
|
|
|
|
.animate-scan { animation: scan 2s linear infinite; } |
|
|
.animate-swing { animation: swing 3s ease-in-out infinite; } |
|
|
|
|
|
|
|
|
.effect-breath { animation: breathing 5s ease-in-out infinite; } |
|
|
.effect-glitch { animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite; } |
|
|
.effect-particles::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; left: 0; width: 100%; height: 100%; |
|
|
background-image: radial-gradient(white 1px, transparent 1px); |
|
|
background-size: 20px 20px; |
|
|
opacity: 0.3; |
|
|
animation: float 3s linear infinite; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
|
|
|
body.low-power .effect-breath, |
|
|
body.low-power .effect-glitch, |
|
|
body.low-power .animate-scan { |
|
|
animation: none !important; |
|
|
} |