| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); | |
| /* Modern Apple-style shadows */ | |
| .card-hover { | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.08); | |
| } | |
| :root { | |
| --color-primary: #6D4AFF; | |
| --color-secondary: #F3F4F6; | |
| --radius-card: 12px; | |
| --radius-button: 10px; | |
| --radius-tag: 20px; | |
| --shadow-default: 0 1px 3px rgba(0, 0, 0, 0.08); | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| } | |
| /* Animation for play button */ | |
| @keyframes pulse { | |
| 0% { transform: scale(1); opacity: 1; } | |
| 50% { transform: scale(1.1); opacity: 0.7; } | |
| 100% { transform: scale(1); opacity: 1; } | |
| } | |
| .playing { | |
| animation: pulse 1.5s infinite; | |
| } | |
| /* Accessibility focus styles */ | |
| button:focus, a:focus, input:focus { | |
| outline: 2px solid var(--color-primary); | |
| outline-offset: 2px; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 640px) { | |
| .sound-card { | |
| flex-direction: column; | |
| } | |
| } |