| /* Custom styles that can't be done with Tailwind */ | |
| .custom-product-card:hover { | |
| transform: translateY(-5px); | |
| transition: transform 0.3s ease; | |
| } | |
| /* Smooth scrolling */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Custom focus styles */ | |
| button:focus, a:focus { | |
| outline: 2px solid #3b82f6; | |
| outline-offset: 2px; | |
| } | |
| /* Animation for featured products section */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| #products { | |
| animation: fadeIn 0.8s ease-out; | |
| } |