/* product/7-in-1-combo/style.css */ /* ============================= */ /* GLOBAL */ /* ============================= */ *, *::before, *::after { box-sizing: border-box; } body { font-family: "Hind Siliguri", sans-serif; margin: 0; padding: 0; color: #333; } .container-inner { max-width: 1100px; margin: 0 auto; } button { font-family: inherit; cursor: pointer; border: none; } /* ============================= */ /* HERO SECTION */ /* ============================= */ .hero-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 32px 5%; background: linear-gradient(135deg, #ffffff 60%, #f0f6ff 100%); gap: 24px; } .hero-content { flex: 1; min-width: 300px; text-align: left; /* Reserve min-height so font-load doesn't push the slider down */ min-height: 360px; } /* * CLS FIX #1 — Hero slider * Use aspect-ratio + width to give the browser an intrinsic size * before any image has loaded, eliminating the paint-time reflow. * A fixed pixel height (height: 340px) gets overridden to `auto` * on mobile, which causes the large 0.1623 shift. aspect-ratio is * stable across all viewports. */ .hero-slider { flex: 1; min-width: 300px; max-width: 480px; /* Remove fixed height — use aspect ratio instead */ width: 100%; aspect-ratio: 4 / 3; margin: 0 auto; position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 12px 40px rgba(24, 95, 165, 0.15); /* contain: layout prevents internal reflows from escaping */ contain: layout; } .slider-wrapper { position: absolute; inset: 0; width: 100%; height: 100%; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease-in-out; border-radius: 16px; /* Prevent decoded image from causing a repaint shift */ will-change: opacity; } .slide.active { opacity: 1; z-index: 1; } .offer-badge { display: inline-block; background: #fdf2f2; color: #d93025; padding: 6px 16px; border-radius: 50px; font-weight: bold; font-size: 0.95rem; margin-bottom: 14px; /* Reserve height before font loads */ min-height: 2em; } .main-title { font-size: 2.2rem; line-height: 1.3; color: #1a1a2e; margin-bottom: 12px; /* * CLS FIX #2 — font swap reflow on .main-title / .sub-title * size-adjust on @font-face (done in via font-display) * plus reserving line-height space here reduces metric shift. */ min-height: calc(2.2rem * 1.3 * 2); /* 2 lines pre-reserved */ } .highlight { color: #185fa5; } .sub-title { font-size: 1.05rem; color: #555; margin-bottom: 18px; line-height: 1.7; /* Reserve 3 lines so font-swap doesn't push CTA down */ min-height: calc(1.05rem * 1.7 * 3); } /* * CLS FIX #3 — price-hero inline flex wrap shift * flex-wrap: nowrap + explicit min-height stops .price-new and * .price-save from reflowing onto a second line after font loads. */ .price-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: nowrap; /* was: wrap — caused span shift */ min-height: 2.4rem; /* reserve height = price-new font-size */ } .price-old { font-size: 1.1rem; color: #999; flex-shrink: 0; } .price-old del { color: #e53e3e; } .price-new { font-size: 2rem; font-weight: 800; color: #185fa5; flex-shrink: 0; /* Prevent layout recalc when bold font metrics arrive */ font-synthesis: none; } .price-save { background: #fff3cd; color: #856404; padding: 4px 12px; border-radius: 20px; flex-shrink: 0; font-weight: 700; font-size: 0.9rem; } .delivery-text { font-size: 1.2rem; color: #333; margin-bottom: 14px; } /* ── Order Button ── */ .order-btn { display: inline-block; background: #185fa5; color: white; padding: 16px 32px; border-radius: 8px; font-size: 1.15rem; font-weight: bold; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 15px rgba(24, 95, 165, 0.3); text-decoration: none; } .order-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(24, 95, 165, 0.35); } .pulse-btn { animation: pulse 2s infinite; } /* ============================= */ /* FEATURES / PRODUCTS SECTION */ /* ============================= */ .features-section { padding: 64px 5%; background-color: #f5f7fb; text-align: center; } .section-title h2 { font-size: 2rem; color: #1a1a2e; margin-bottom: 8px; } .highlight-text { font-size: 1.3rem; font-weight: bold; color: #185fa5; margin-bottom: 8px; } .desc { max-width: 800px; margin: 0 auto 36px; color: #666; font-size: 1.05rem; line-height: 1.7; } /* ── Product Cards Grid ── */ .product-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; margin-bottom: 40px; text-align: left; } .product-card { background: #fff; border-radius: 14px; padding: 24px 20px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); display: flex; gap: 16px; align-items: flex-start; transition: transform 0.25s ease, box-shadow 0.25s ease; border-left: 4px solid #185fa5; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(24, 95, 165, 0.12); } .product-card-icon { font-size: 2.2rem; flex-shrink: 0; line-height: 1; } .product-card-body h3 { font-size: 1.1rem; color: #1a1a2e; margin: 0 0 8px; } .product-card-body p { font-size: 0.95rem; color: #666; margin: 0; line-height: 1.6; } /* ── Center CTA ── */ .center-cta { display: flex; justify-content: center; margin: 40px 0; width: 100%; } .center-cta .order-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 280px; } /* ── Features Slider ── */ .features-slider-container { margin: 48px auto; max-width: 560px; } .features-slider-container .hero-slider { margin: 0 auto; } /* ── Why Perfect ── */ .why-perfect { margin-top: 48px; text-align: center; } .why-perfect h3 { font-size: 1.6rem; margin-bottom: 22px; color: #1a1a2e; } .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; } .benefit-item { background: #eef4fb; padding: 14px 16px; border-radius: 10px; font-weight: 600; color: #185fa5; font-size: 0.97rem; } del { color: #e53e3e; } /* ============================= */ /* URGENCY / COUNTDOWN */ /* ============================= */ .urgency-container { padding: 40px 5%; background-color: #fff5f5; text-align: center; border-top: 1px solid #fee2e2; border-bottom: 1px solid #fee2e2; } .urgency-title { font-size: 1.7rem; color: #b91c1c; margin-bottom: 8px; } .urgency-sub { font-size: 1rem; color: #e53e3e; margin-bottom: 24px; font-weight: 600; } .countdown-wrapper { display: flex; justify-content: center; gap: 16px; margin-bottom: 30px; } .time-block { background: #fff; padding: 14px 18px; border-radius: 12px; min-width: 85px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07); border: 1px solid #fecaca; } .digits { display: block; font-size: 2rem; font-weight: 800; color: #1a1a2e; } .label { font-size: 0.78rem; color: #999; letter-spacing: 0.5px; } .cta-wrapper { margin-top: 8px; } /* ============================= */ /* SUCCESS MODAL */ /* ============================= */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: none; justify-content: center; align-items: center; z-index: 10000; backdrop-filter: blur(5px); } .modal-content { background: white; padding: 44px 30px; border-radius: 24px; text-align: center; max-width: 450px; width: 90%; position: relative; animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .success-icon { font-size: 60px; margin-bottom: 16px; animation: bounce 2s infinite; } .modal-content h2 { color: #185fa5; font-size: 2.4rem; margin-bottom: 8px; } .modal-content p { font-size: 1.15rem; color: #333; } .sub-text { font-size: 0.9rem !important; color: #666 !important; margin-top: 8px; } .close-modal-btn { margin-top: 22px; padding: 12px 44px; background: #185fa5; color: white; border: none; border-radius: 50px; font-weight: bold; cursor: pointer; font-size: 1rem; font-family: inherit; } .confetti-wrapper { position: absolute; top: -20px; width: 100%; left: 0; } .confetti { position: absolute; font-size: 2rem; animation: flyAround 3s infinite ease-in-out; } /* ============================= */ /* ORDER FORM */ /* ============================= */ .order-section { padding: 60px 5%; background-color: #f3f4f6; } .form-header { text-align: center; margin-bottom: 32px; } .form-header h2 { font-size: 2rem; color: #1a1a2e; margin-bottom: 8px; } .form-header p { color: #6b7280; font-size: 1.05rem; } .checkout-container { max-width: 540px; margin: 0 auto; } .order-summary-card { background: #fdfdfd; border: 1px solid #e5e7eb; border-radius: 14px; padding: 20px; margin-bottom: 24px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } .product-info { display: flex; gap: 16px; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 14px; } .product-info img { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; } .product-details h3 { font-size: 1rem; color: #1a1a2e; margin: 0 0 6px; } .unit-price { font-size: 0.95rem; color: #555; margin: 0 0 8px; } .unit-price strong { color: #185fa5; font-size: 1.1rem; } .qty-control { display: flex; align-items: center; margin-top: 8px; } .qty-control button { width: 32px; height: 32px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; } .qty-control input { width: 44px; height: 32px; text-align: center; border: 1px solid #d1d5db; border-left: 0; border-right: 0; font-family: inherit; } .price-breakdown { padding-top: 14px; } .price-row { display: flex; justify-content: space-between; margin-bottom: 6px; color: #666; font-size: 0.97rem; } .price-row .free { color: #059669; font-weight: 700; } .price-row.total { font-weight: 800; color: #1a1a2e; font-size: 1.2rem; border-top: 1px solid #eee; padding-top: 10px; margin-top: 4px; } /* ── Styled Form ── */ .styled-form { background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } .input-group { margin-bottom: 18px; } .input-group label { display: block; font-weight: 600; margin-bottom: 6px; color: #374151; } .input-group input { width: 100%; padding: 13px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; font-family: inherit; transition: border-color 0.2s; } .input-group input:focus { outline: none; border-color: #185fa5; box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.1); } .payment-method { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; } .payment-method p { margin: 0 0 4px; color: #065f46; } .payment-method small { color: #6b7280; } .submit-order-btn { width: 100%; background: #185fa5; color: #fff; padding: 17px; border: none; border-radius: 8px; font-size: 1.3rem; font-weight: 800; cursor: pointer; transition: transform 0.2s, background 0.2s; font-family: inherit; } .submit-order-btn:hover { transform: translateY(-2px); background: #0c447c; } /* ============================= */ /* FLOATING CONTACT */ /* ============================= */ /* * CLS FIX #4 — floating contact * will-change: transform promotes to its own compositor layer, * preventing async repaint from shifting surrounding content. * min-width/height reserves the trigger footprint upfront. */ .floating-contact { position: fixed; bottom: 30px; right: 30px; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; will-change: transform; min-width: 60px; min-height: 60px; } .contact-trigger { width: 60px; height: 60px; border-radius: 50%; background: #a886cd; color: white; border: none; font-size: 24px; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s; } .contact-trigger .close-icon { display: none; } .contact-options { display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; } .option { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 30px; color: white; text-decoration: none; font-weight: 600; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); } .whatsapp { background: #25d366; } .phone { background: #03e78b; color: #1a1a2e; } .floating-contact.active .contact-options { opacity: 1; visibility: visible; transform: translateY(0); } .floating-contact.active .contact-trigger { background: #555; transform: rotate(90deg); } .floating-contact.active .main-icon { display: none; } .floating-contact.active .close-icon { display: block; } /* ============================= */ /* HOT ITEMS SECTION */ /* ============================= */ #hot-items-section { display: none; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; padding: 56px 5%; background: linear-gradient(160deg, #f0f6ff 0%, #fafafa 60%, #fff5f5 100%); border-top: 3px solid #185fa5; } #hot-items-section.visible { opacity: 1; transform: translateY(0); } /* ============================= */ /* FOOTER */ /* ============================= */ .main-footer { padding: 24px 5%; background-color: #1a1a1a; color: #fff; text-align: center; border-top: 1px solid #333; } .footer-content p { font-size: 0.95rem; color: #a0a0a0; margin: 0; } .footer-content a { color: #fff; text-decoration: none; font-weight: 600; transition: color 0.3s; } .footer-content a:hover { color: #185fa5; text-decoration: underline; } /* ============================= */ /* ANIMATIONS */ /* ============================= */ @keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } } @keyframes flyAround { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(100px, -100px) rotate(360deg); opacity: 0; } } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(24, 95, 165, 0.4); } 70% { transform: scale(1.04); box-shadow: 0 0 0 14px rgba(24, 95, 165, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(24, 95, 165, 0); } } /* ============================= */ /* RESPONSIVE */ /* ============================= */ @media (max-width: 768px) { .hero-container { flex-direction: column; text-align: center; padding-top: 20px; padding-bottom: 20px; } .hero-content { text-align: center; min-height: unset; /* release desktop reservation on mobile */ } .price-hero { justify-content: center; flex-wrap: wrap; /* allow wrap on narrow screens only */ } /* * CLS FIX — mobile slider * Keep aspect-ratio: 4/3 (set on base rule), just expand to full width. * Never override with a fixed height — that's what caused the 0.1623 shift. */ .hero-slider { max-width: 100%; /* aspect-ratio: 4/3 inherited from base — do NOT set height here */ } /* Release text min-height reservations on mobile — columns are narrower so font fallback metrics are closer to the loaded font */ .main-title { font-size: 1.7rem; min-height: unset; } .sub-title { min-height: unset; } .section-title h2 { font-size: 1.6rem; } .urgency-title { font-size: 1.4rem; } .product-cards-grid { grid-template-columns: 1fr; } .benefits-grid { grid-template-columns: 1fr 1fr; } .features-section, .urgency-container, .order-section { padding-top: 28px; padding-bottom: 28px; } } @media (max-width: 600px) { .form-header h2 { font-size: 1.5rem; } .benefits-grid { grid-template-columns: 1fr; } .countdown-wrapper { gap: 8px; } .time-block { min-width: 70px; padding: 10px; } .digits { font-size: 1.6rem; } /* CLS FIX — NO fixed height override here. aspect-ratio: 4/3 handles it. */ .product-card { flex-direction: column; gap: 10px; } } @media (max-width: 480px) { .main-title { font-size: 1.5rem; } .order-btn { padding: 14px 24px; font-size: 1.05rem; } .submit-order-btn { font-size: 1.1rem; } .footer-content p { font-size: 0.82rem; line-height: 1.5; } }