/* ========================================================== BabyChoice Nappies HOME PAGE SECTIONS ========================================================== */ /* =============================== SECTION LAYOUT ================================ */ .section { padding:80px 0; } .section-head { text-align:center; max-width:650px; margin:0 auto 50px; } .section-head .eyebrow { color:var(--pink-deep); font-weight:800; font-size:13px; letter-spacing:.05em; text-transform:uppercase; } .section-head h2 { font-size:36px; margin:10px 0 15px; } .section-head p { color:var(--ink-soft); font-size:16px; } .bg-soft { background: linear-gradient( 180deg, #FFFFFF, #FFF6F9 ); } /* =============================== SHOP BY SIZE ================================ */ .size-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; } .size-card { flex:1 1 220px; max-width:270px; background:white; border-radius:var(--radius-lg); padding:32px 24px; text-align:center; border:2px solid transparent; box-shadow: 0 10px 25px rgba(0,0,0,.04); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .size-card:hover { transform:translateY(-8px); border-color:var(--pink-deep); box-shadow: 0 18px 35px rgba(255,143,174,.18); } .size-badge { width:70px; height:70px; border-radius:50%; background:var(--pink); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-family:'Baloo 2',cursive; font-size:28px; font-weight:800; color:var(--pink-deep); } .size-card h3 { font-size:25px; margin-bottom:8px; } .size-card .range { color:var(--ink-soft); margin-bottom:12px; } .size-card .from { font-weight:800; font-size:17px; margin-bottom:20px; } /* MOBILE */ @media(max-width:900px){ .size-card { flex:1 1 45%; max-width:none; } } @media(max-width:600px){ .size-card { flex:1 1 100%; } } /* ========================================================== BabyChoice Nappies HOME PAGE CSS ========================================================== */ /* =============================== SECTION GENERAL ================================ */ .section { padding:80px 0; } .section-head { text-align:center; max-width:650px; margin:0 auto 50px; } .section-head .eyebrow { color:var(--pink-deep); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; } .section-head h2 { font-size:36px; margin:12px 0; } .section-head p { color:var(--ink-soft); font-size:16px; } /* =============================== SOFT BACKGROUND SECTIONS ================================ */ .bg-soft { background: linear-gradient( 180deg, #ffffff, #FFF6F9 ); } /* =============================== SHOP BY SIZE ================================ */ .size-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:25px; } .size-card { flex:1 1 220px; max-width:270px; background:white; border-radius:var(--radius-lg); padding:35px 25px; text-align:center; box-shadow: 0 10px 25px rgba(0,0,0,.05); transition:.3s ease; } .size-card:hover { transform:translateY(-8px); box-shadow: 0 18px 35px rgba(255,143,174,.18); } .size-badge { width:75px; height:75px; border-radius:50%; background:var(--pink); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-family:'Baloo 2'; font-size:30px; font-weight:800; color:var(--pink-deep); } .size-card h3 { font-size:25px; margin-bottom:10px; } .size-card .range { color:var(--ink-soft); margin-bottom:12px; } .size-card .from { font-weight:800; margin-bottom:20px; } /* =============================== FEATURED PRODUCTS ================================ */ .product-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:25px; } .product-card { flex:1 1 240px; max-width:280px; background:white; padding:25px; border-radius:var(--radius-lg); text-align:center; box-shadow: 0 10px 25px rgba(0,0,0,.06); transition:.3s ease; } .product-card:hover { transform:translateY(-8px); box-shadow: 0 20px 40px rgba(255,143,174,.18); } .product-card .thumb { height:200px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; } .product-card .thumb img { height:100%; width:100%; object-fit:contain; transition:.3s; } .product-card:hover img { transform:scale(1.05); } .product-card h3 { font-size:22px; margin-bottom:8px; } .pc-meta { display:flex; justify-content:center; gap:8px; font-size:13px; margin-bottom:10px; } .size-tag { color:var(--pink-deep); font-weight:800; } .pc-weight { color:var(--ink-soft); } .price { font-weight:800; color:var(--pink-deep); } /* =============================== WHY BABYCHOICE ================================ */ .why-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; } .why-card { flex:1 1 260px; max-width:280px; background:white; border-radius:24px; overflow:hidden; text-align:center; box-shadow: 0 12px 30px rgba(0,0,0,.06); transition:.3s; } .why-card:hover { transform:translateY(-8px); } .why-image { width:100%; height:220px; object-fit:cover; } .why-card h4 { font-size:22px; margin:20px; } .why-card p { padding:0 22px 25px; color:var(--ink-soft); } /* =============================== SIZE GUIDE ================================ */ .weight-guide { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; } .weight-card { flex:1 1 220px; background:var(--blue); padding:25px; border-radius:var(--radius-md); text-align:center; } .weight-card h4 { font-size:22px; } .weight-card p { font-weight:800; color:var(--blue-deep); } /* =============================== REVIEWS ================================ */ .review-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; } .review-card { flex:1 1 320px; max-width:360px; background:white; padding:30px; border-radius:24px; box-shadow: 0 12px 30px rgba(0,0,0,.06); transition:.3s; } .review-card:hover { transform:translateY(-8px); } .review-stars { color:#FFC107; font-size:22px; margin-bottom:20px; } .review-text { color:var(--ink-soft); margin-bottom:25px; } .review-user { display:flex; align-items:center; gap:15px; } .review-user img { width:60px; height:60px; border-radius:50%; object-fit:cover; } /* =============================== WHATSAPP CTA ================================ */ .cta-band { background: linear-gradient( 120deg, var(--pink-deep), #FFB3C6 ); border-radius:var(--radius-lg); padding:60px; text-align:center; color:white; } .cta-band h2 { color:white; font-size:32px; } .cta-band p { color:white; opacity:.9; margin:15px 0 30px; } .cta-band .btn { margin:5px; }