/* |========================================================================== | OFFER PAGE STYLES - CONSOLIDATED AND FONT-UPDATED |========================================================================== | This file combines all previous Offer page styles and applies | the Playfair Display and Montserrat fonts from the About Us page | for a unified brand aesthetic. */ /* === GLOBAL STYLES === */ body { /* Keeping a clean sans-serif as a base */ font-family: 'Segoe UI', sans-serif; background-color: #fdfcf7; margin: 0; padding: 0; color: #333; } /* * NOTE: For Playfair Display, Dancing Script, and Montserrat to work, * include this in your HTML : * */ /* === HEADINGS (Most Loved, Top Picks, etc.) === */ /* ===================================================== YOUR ORIGINAL STYLES — UNCHANGED ===================================================== */ .most-loved, .top-picks, .promo-card-section { padding: 50px 20px; background-color: #fff; text-align: center; position: relative; } .styled-heading { /* ... other font styles ... */ text-align: center; } .most-loved:not(.product-grid), /* Excludes the catalogue section, which has its own .product-grid */ .top-picks, .most-loved.catalogue-section { background-color: #fff; } .styled-heading { /* PRIMARY ABOUT US FONT for a sophisticated look */ font-family: 'Playfair Display', serif; font-size: 38px; color: #a72f2f; margin-bottom: 30px; font-weight: 700; } .styled-heading span { color: #e67e22; } /* ===================================================== PERFORMANCE FIX — WRAPPER ONLY ===================================================== */ /* This does NOT affect card visuals */ .product-slider-container { overflow: hidden; } /* GPU acceleration only, no layout change */ .product-slider { will-change: transform; transform: translateZ(0); } /* === OFFER CIRCLES === */ .offer-circles { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin: 10px 0 20px 0; text-align: center; } .offer-circles .circle { width: 160px; height: 160px; text-align: center; } .offer-circles img { width: 100px; height: 100px; border-radius: 60%; object-fit: cover; transition: transform 0.3s; border: 3px solid #d37c25; } .offer-circles img:hover { transform: scale(1.1); } .offer-circles p { margin-top: 8px; font-size: 15px; font-weight: 400; color: #333; } /* |========================================================================== | PRODUCT CARD STYLES (Used in Catalogue, Most Loved Grid, and Sliders) |========================================================================== */ .product-card { /* Base Card Styling - Used in all product contexts */ background: #fffaf5; /* Light background for warmth */ border: 1px solid #f1d3b3; border-radius: 18px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 15px; text-align: center; transition: all 0.3s ease; flex-shrink: 0; /* Important for sliders */ } .product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); } .product-card img { width: 100%; height: 220px; object-fit: cover; border-radius: 14px; margin-bottom: 15px; } .product-card h3 { /* Font style applied to match brand tone */ font-family: 'Playfair Display', serif; font-size: 20px; color: #8a2a2a; margin-bottom: 8px; } .desc, .product-card p { color: #555; font-size: 14px; line-height: 1.5; margin-bottom: 8px; } .product-card .note { font-size: 12px; color: #777; font-style: italic; } .product-card .price { font-weight: bold; color: #333; font-size: 16px; margin-bottom: 5px; } .product-card .members-price { color: #a72f2f; font-weight: 500; display: block; font-size: 13px; } .read-more-text { display: block; color: #a72f2f; font-weight: 600; cursor: pointer; margin-bottom: 10px; font-size: 14px; } .read-more-text:hover { text-decoration: underline; } /* Product Tag Labels */ .tag { /* Base tag styling */ background-color: #a72f2f; color: #fff; padding: 4px 10px; border-radius: 12px; font-size: 12px; display: inline-block; margin-bottom: 8px; } .product-card > .tag { /* For tags positioned absolutely on the card */ position: absolute; top: 12px; left: 12px; border-radius: 4px; } .best-seller { background-color: #228b22; } .discount { background-color: #2e8b57; } .trending { background-color: #ff8c00; } .hot-deals { background-color: #ff1493; } /* === BUTTON STYLES === */ /* WhatsApp Button inside card */ .whatsapp-card-button { /* Font style applied to match brand tone */ font-family: 'Montserrat', sans-serif; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; background-color: #d37c25; /* Original color */ color: white; padding: 8px 14px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; transition: background 0.3s; } .whatsapp-card-button:hover { background-color: #e36e38; } /* Book Now Button */ .book-btn { /* Font style applied to match brand tone */ font-family: 'Montserrat', sans-serif; background: #a72f2f; color: white; border: none; padding: 10px 18px; border-radius: 25px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background 0.3s ease, transform 0.3s ease; } .book-btn:hover { background: #8e2525; transform: scale(1.08); } /* === CATALOGUE GRID SECTION === */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 25px; justify-items: center; } .most-loved .product-grid .product-card { width: 100%; max-width: 280px; } /* |========================================================================== | PRODUCT SLIDER SECTIONS (Most Loved Slider & Top Picks) |========================================================================== */ .product-slider-container { /* Used for Most Loved slider, if scroll buttons are active */ position: relative; display: flex; align-items: center; overflow: hidden; } .scroll-wrapper { /* Used for Top Picks slider, simple scroll */ overflow: hidden; width: 100%; } .scroll-container, .product-slider { /* Main scrollable area */ display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; padding: 20px; scrollbar-width: none; width: 100%; } .scroll-container::-webkit-scrollbar, .product-slider::-webkit-scrollbar { height: 10px; /* Adjust height of scrollbar */ display: none; /* Hide scrollbar by default for a clean look */ } /* Show custom scrollbar styling if needed */ .scroll-container::-webkit-scrollbar { display: block; } .scroll-container::-webkit-scrollbar-thumb { background-color: #a72f2f; border-radius: 5px; } /* Scroll Buttons (For Most Loved Slider) */ .scroll-btn { background: #a72f2f; border: none; color: #fff; font-size: 28px; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; z-index: 10; transition: background 0.3s ease; position: absolute; top: 50%; transform: translateY(-50%); } .scroll-btn:hover { background: #8b2525; } .scroll-btn.left { left: 10px; } .scroll-btn.right { right: 10px; } /* |========================================================================== | PROMO CARD SLIDER SECTION |========================================================================== */ .promo-card-section { max-width: 1900px; margin-top: 5px; padding: 0 30px 50px 30px; /* Adjusted padding bottom */ overflow: hidden; } .slider-wrapper { overflow: hidden; width: 100%; position: relative; } .promo-card-container { display: flex; transition: transform 0.8s ease-in-out; width: 100%; } .slide { display: flex; gap: 10px; min-width: 100%; justify-content: center; } .promo-card { border-radius: 19px; background-size: cover; background-position: center; color: #fff; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); } .big-card { flex: 0 0 1050px; min-height: 620px; } .small-card-column { display: flex; flex-direction: column; gap: 10px; flex: 0 0 350px; } .small-card { min-height: 320px; } .promo-card-text { background: rgba(0, 0, 0, 0.55); padding: 15px; border-radius: 10px; } .promo-card h2, .promo-card h3 { /* Applied Playfair Display here for visual weight */ font-family: 'Playfair Display', serif; margin-bottom: 8px; } /* === RESPONSIVENESS === */ @media (max-width: 1450px) { /* Adjust big/small card sizes for slightly smaller desktops */ .big-card { flex: 0 0 70%; min-height: 450px; } .small-card-column { flex: 0 0 30%; } } @media (max-width: 1100px) { /* Promo Cards stack vertically on medium screens */ .slide { flex-direction: column; align-items: center; } .big-card, .small-card-column { flex: 0 0 90%; max-width: 700px; /* Constrain max width for better centering */ } .big-card { min-height: 400px; } .small-card-column { flex-direction: row; /* Small cards go back to horizontal */ min-height: 200px; } .small-card { flex: 1; /* Small cards share the row space */ min-height: 200px; } } @media (max-width: 768px) { /* Mobile adjustments */ .styled-heading { font-size: 30px; } .big-card, .small-card-column { flex: 0 0 100%; } .small-card-column { flex-direction: column; /* Small cards stack again */ } .small-card { min-height: 250px; } .offer-circles { gap: 20px; } .offer-circles .circle { width: 120px; height: 120px; } .offer-circles img { width: 80px; height: 80px; } }