|
|
|
|
|
body { |
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; |
|
|
} |
|
|
|
|
|
.sample-player { |
|
|
transition: all 0.2s ease; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.sample-player:hover { |
|
|
transform: scale(1.02); |
|
|
} |
|
|
|
|
|
.sample-player.playing { |
|
|
box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.5); |
|
|
} |
|
|
|
|
|
|
|
|
.pack-card { |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
.pack-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); |
|
|
} |
|
|
70% { |
|
|
box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); |
|
|
} |
|
|
100% { |
|
|
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
|
|
|
.sound-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.sound-card:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes pulse-wave { |
|
|
0% { transform: scale(1); opacity: 1; } |
|
|
70% { transform: scale(1.1); opacity: 0.7; } |
|
|
100% { transform: scale(1); opacity: 1; } |
|
|
} |
|
|
|
|
|
.playing { |
|
|
animation: pulse-wave 1.5s infinite; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: rgba(17, 24, 39, 0.5); |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: rgba(79, 70, 229, 0.7); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: rgba(99, 102, 241, 0.9); |
|
|
} |