/* Import Google fonts for improved typography. * Montserrat is used for headings and Lato for body copy. * These fonts provide a modern, friendly feel and better legibility than the default sans‑serif. */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@600;700&display=swap'); /* Base typography * Use Lato for the main body text. * Headings are styled separately below to use Montserrat. */ body { font-family: 'Lato', sans-serif; color: #1f2937; /* dark grey text on light backgrounds */ background-color: #ffffff; } /* Heading styles * Leverage the Montserrat font for a bold, distinctive look on titles and headings. */ h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 700; color: inherit; } /* Smooth transitions for interactive elements */ a, button { transition: color 0.2s ease, background-color 0.2s ease; } /* Dark mode * A `.dark-mode` class can be toggled on the `` element to enable dark styling throughout the site. * Dark backgrounds, light text and adjusted card colours are defined here. */ .dark-mode { background-color: #0f172a; color: #f1f5f9; } .dark-mode .navbar, .dark-mode footer { background-color: #1e293b; color: #f1f5f9; } .dark-mode a { color: #60a5fa; } .dark-mode .card-3d { background-image: linear-gradient(145deg, #1e293b, #0f172a); border-color: #334155; } .dark-mode .card-3d:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); } .dark-mode input, .dark-mode select, .dark-mode textarea { background-color: #334155; color: #e2e8f0; border-color: #475569; } .dark-mode .btn-primary { background-color: #2563eb; color: #f8fafc; } .dark-mode .btn-primary:hover { background-color: #1d4ed8; } /* Bounce animation for cart icon when items are added */ @keyframes bounce { 0% { transform: scale(1); } 30% { transform: scale(1.2); } 60% { transform: scale(0.95); } 100% { transform: scale(1); } } .cart-bounce { animation: bounce 0.5s ease; } /* Utility classes for fade-in (optional) */ .fade-in { animation: fadeIn 0.6s ease forwards; opacity: 0; } @keyframes fadeIn { to { opacity: 1; } } /* Slide‑up animation used for scroll reveals */ @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .slide-up { animation: slideUp 0.6s ease forwards; opacity: 0; } /* Custom 3D card effect for products */ /* * Card 3D styles * * These classes enhance the visual appeal of product and category cards by adding a subtle 3D transformation * and a soft gradient background. When a user hovers over a card it lifts slightly off the page with a * perspective rotation, creating depth. The border and shadow help the cards stand out against the light page. */ .card-3d { /* Soft gradient to give cards a hint of depth and texture */ background-image: linear-gradient(145deg, #ffffff, #f7fafc); border: 1px solid #e5e7eb; transition: transform 0.35s ease, box-shadow 0.35s ease; will-change: transform; transform-style: preserve-3d; } .card-3d:hover { transform: translateY(-6px) scale(1.03) rotateX(2deg) rotateY(-2deg); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2); }