/* ========================================================================== KIDDY-INSPIRED THEME Playful, minimalist, pastel design layout inspired by the Blocksy "Kiddy" starter site (https://startersites.io/blocksy/kiddy/), adapted to this site's existing markup/classes. NON-DESTRUCTIVE: this file only ADDS styling. No blade markup, links, routes, or JS behaviour were touched. Loaded LAST in , so it safely overrides style.min.css / extra.css / responsive.css. ========================================================================== */ :root { /* ---- Kiddy palette (soft, playful, pastel) ---- */ --kiddy-primary: #e85186; /* warm coral - CTAs */ --kiddy-primary-dark: #d34073; --kiddy-secondary: #f07654; /* soft mint */ --kiddy-secondary-dark: #ee4c58; --kiddy-accent: #FFC94D; /* sunny yellow */ --kiddy-bg: #fdf7ea; /* cream */ --kiddy-bg-warm: #FFF8F1; /* warm cream */ --kiddy-bg-alt: #FFEEE2; /* peach tint */ --kiddy-bg-mint: #EAF7F3; /* mint tint */ --kiddy-text: #2E2A3D; /* deep plum, readable */ --kiddy-text-light: #756F87; --kiddy-text-light2: #706a81; --kiddy-white: #FFFFFF; --kiddy-wa: #4CAF51; /* whatsapp */ /* ---- shape / motion tokens ---- */ --radius-pill: 999px; --radius-card: 26px; --radius-card-sm: 16px; --radius-blob: 42% 58% 63% 37% / 41% 44% 56% 59%; --shadow-soft: 0 10px 30px rgba(46, 42, 61, 0.08); --shadow-hover: 0 18px 40px rgba(46, 42, 61, 0.14); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-base: all 0.28s ease; } /* -------------------------------------------------------------------- Global base -------------------------------------------------------------------- */ html, body { /* background-color: var(--kiddy-bg) !important; */ background-color: var(--kiddy-white) !important; color: var(--kiddy-text) !important; font-family: 'Quicksand', 'Jost', sans-serif !important; -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } img { max-width: 100%; height: auto; } #preloader img { max-width: 25%; height: auto; } h1, h2, h3, h4, h5, h6, .hero-title, .catagory-title, .section-title, .offer-catagory, .product-name, .blog-title, .testimonial-title { font-family: 'Baloo 2', 'Jost', sans-serif !important; font-weight: 700 !important; color: var(--kiddy-text) !important; letter-spacing: -0.01em; } a { transition: var(--transition-base); } .section-top, .section-bottom, .section { padding-top: clamp(2.5rem, 5vw, 5.5rem) !important; padding-bottom: clamp(2.5rem, 5vw, 5.5rem) !important; } .section-bg-two { background-color: var(--kiddy-bg-mint) !important; } /* -------------------------------------------------------------------- Buttons — pill shaped, bouncy hover, playful -------------------------------------------------------------------- */ .primary-btn, .primary-btn-v2, .secondary-btn, .add-cart, .blog-btn, button.btn, .btn, input[type="submit"] { border-radius: var(--radius-pill) !important; font-family: 'Baloo 2', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.02em; border: none !important; box-shadow: var(--shadow-soft); transition: var(--transition-base) !important; } .primary-btn, .primary-btn-v2, .add-cart { background: var(--kiddy-primary) !important; color: var(--kiddy-white) !important; } .primary-btn:hover, .primary-btn-v2:hover, .add-cart:hover { background: var(--kiddy-primary-dark) !important; transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-hover); } .secondary-btn { background: var(--kiddy-secondary) !important; color: var(--kiddy-white) !important; } .secondary-btn:hover { background: var(--kiddy-secondary-dark) !important; transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-hover); } .blog-btn { background: transparent !important; color: var(--kiddy-primary) !important; box-shadow: none; padding-left: 0 !important; } .blog-btn:hover { color: var(--kiddy-primary-dark) !important; transform: translateX(4px); } /* -------------------------------------------------------------------- Forms & inputs — soft rounded pastel fields -------------------------------------------------------------------- */ .form-control, .form-select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"] { border-radius: var(--radius-card-sm) !important; border: 2px solid var(--kiddy-bg-alt) !important; /* background-color: var(--kiddy-white) !important; */ transition: var(--transition-base) !important; } .form-control:focus, textarea:focus, input:focus { border-color: var(--kiddy-primary) !important; box-shadow: 0 0 0 4px rgba(255, 122, 102, 0.14) !important; outline: none; } .form-select:focus { border: 2px solid var(--kiddy-bg-alt) !important; box-shadow: none !important; outline: none; } /* -------------------------------------------------------------------- Header — cream, soft shadow, pill nav links, playful top bar -------------------------------------------------------------------- */ .header-area { background-color: var(--kiddy-white) !important; box-shadow: var(--shadow-soft); } .header-area .header-top { background-color: var(--kiddy-secondary) !important; border-bottom: none !important; } .header-area .header-top .contact-info, .header-area .header-top a, .header-area .header-top .menu-link, .header-area .header-top .lang { color: var(--kiddy-white) !important; } .header-area .header-middle { padding-top: 1.4rem; padding-bottom: 1.4rem; } .search-area .search-wrap .form-select, .search-area .search-wrap input { border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important; border: 2px solid var(--kiddy-bg-alt) !important; } .search-area .search-wrap button { border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important; background: var(--kiddy-primary) !important; } .menu-area .main-menu > ul > li > a, .menu-list .menu-link { font-family: 'Baloo 2', sans-serif !important; font-weight: 600 !important; border-radius: var(--radius-pill); transition: var(--transition-base); } .menu-area .main-menu > ul > li > a:hover { color: var(--kiddy-primary) !important; } /* Mobile header / offcanvas */ .mobile-header-area { background-color: var(--kiddy-white) !important; box-shadow: var(--shadow-soft); } .mobile-header-area .btn-icon, .mobile-header-area .cart-btn, .mobile-header-area .menu-bar { color: var(--kiddy-text) !important; } .menu-offcanvas { box-shadow: var(--shadow-hover); background-color: var(--kiddy-bg) !important; } .menu-offcanvas .main-menu .menu-link { font-family: 'Baloo 2', sans-serif !important; font-weight: 600 !important; } .menu-offcanvas .main-menu .menu-link:hover, .menu-offcanvas .main-menu .active > .menu-link { color: var(--kiddy-primary) !important; } /* -------------------------------------------------------------------- Kiddy 2-row desktop header (works for both .header-area [theme one] and .header-area-v2 [theme two]) — matches reference layout: row 1 = logo + search + phone pill, row 2 = nav links + account/compare/ wishlist/cart utility list. The original .header-top row (contact links, currency/language switcher / track order / account) is kept in the DOM but hidden, so nothing is deleted — only visually simplified to match the 2-row reference design. -------------------------------------------------------------------- */ .header-area .header-top, .header-area-v2 .header-top { display: none; } .header-area, .header-area-v2 { background-color: var(--kiddy-white) !important; box-shadow: none !important; border-bottom: 1px solid rgba(46, 42, 61, 0.08); } .header-area .header-middle, .header-area-v2 .header-middle { padding: 1.6rem 0; } .header-area .header-middle-wrap, .header-area-v2 .header-middle .header-wrap { display: flex; align-items: center; gap: 2rem; } .header-area .brand-area, .header-area-v2 .brand-logo-area { flex-shrink: 0; } .header-area .brand-image, .header-area-v2 .brand-image { /* max-height: 40px; */ max-width: 150px; } .header-area .kiddy-search-area, .header-area-v2 .kiddy-search-area { flex: 1 1 auto; max-width: 760px; } .header-area .kiddy-search-area .search-wrap, .header-area-v2 .kiddy-search-area .search-wrap { display: flex; align-items: center; background: var(--kiddy-bg-mint); border-radius: var(--radius-pill); overflow: hidden; } .header-area .kiddy-search-area .form-control, .header-area-v2 .kiddy-search-area .form-control { border: none !important; background: transparent !important; box-shadow: none !important; padding: 1.1rem 1.6rem; flex: 1 1 auto; } .header-area .kiddy-search-area .form-select, .header-area-v2 .kiddy-search-area .form-select { border: none !important; border-left: 1px solid rgba(46, 42, 61, 0.12) !important; background-color: transparent !important; border-radius: 0 !important; padding: 1.1rem 2.4rem 1.1rem 1.6rem; flex: 0 0 auto; width: auto; color: var(--kiddy-text-light) !important; } .header-area .kiddy-search-area .search-btn, .header-area-v2 .kiddy-search-area .search-btn { border: none; background: transparent; padding: 0 1.8rem; color: var(--kiddy-text); font-size: 1.6rem; } .header-area .kiddy-header-phone-wrap, .header-area-v2 .kiddy-header-phone-wrap { flex-shrink: 0; } .header-area .kiddy-header-phone, .header-area-v2 .kiddy-header-phone { display: inline-flex; align-items: center; gap: 1rem; border: 1px solid rgba(46, 42, 61, 0.15); border-radius: var(--radius-pill); padding: 0.5rem 1.6rem 0.5rem 0.5rem; font-family: 'Baloo 2', sans-serif; font-weight: 700; color: var(--kiddy-text) !important; white-space: nowrap; } .header-area .kiddy-header-phone-icon, .header-area-v2 .kiddy-header-phone-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--kiddy-wa); color: var(--kiddy-white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .header-area .header-bottom, .header-area-v2 .header-bottom { border-top: 1px solid rgba(46, 42, 61, 0.08); } .header-area .kiddy-header-bottom-wrap, .header-area-v2 .kiddy-header-bottom-wrap { display: flex; align-items: center; justify-content: space-between; } .header-area-v2 .kiddy-header-bottom-wrap { padding: 0 2rem; } .header-area .main-menu, .header-area-v2 .main-menu { display: flex; align-items: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .header-area .main-menu > li > .menu-link, .header-area-v2 .main-menu > li > .menu-link { font-family: 'Baloo 2', sans-serif !important; font-weight: 600 !important; font-size: 1.4rem; color: var(--kiddy-text-light) !important; text-transform: uppercase; letter-spacing: 0.02em; padding-bottom: 0.6rem; border-bottom: 2px solid transparent; } .header-area .main-menu > li.active > .menu-link, .header-area .main-menu > li > .menu-link:hover, .header-area-v2 .main-menu > li.active > .menu-link, .header-area-v2 .main-menu > li > .menu-link:hover { color: var(--kiddy-text) !important; border-bottom-color: var(--kiddy-text); } .header-area .kiddy-utility-list, .header-area-v2 .kiddy-utility-list { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; } .header-area .kiddy-utility-list .single-btn, .header-area-v2 .kiddy-utility-list .single-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--kiddy-text-light) !important; transition: var(--transition-base); } .header-area .kiddy-utility-list .btn-icon, .header-area-v2 .kiddy-utility-list .btn-icon { font-size: 1.6rem; color: var(--kiddy-text) !important; margin-top: 3px; } .header-area .kiddy-utility-list .cart-btn .btn-icon{ font-size: 1.3rem; } .header-area .kiddy-utility-list .single-btn:hover, .header-area-v2 .kiddy-utility-list .single-btn:hover { color: var(--kiddy-primary) !important; } .header-area .kiddy-utility-list .cart-area .single-btn, .header-area-v2 .kiddy-utility-list .cart-area .single-btn { background: var(--kiddy-bg-mint); border-radius: var(--radius-pill); padding: 0.15rem 1.1rem; } /* Simplified Shop dropdown (category list only, no brand/banner) */ .header-area .kiddy-shop-dropdown, .header-area-v2 .kiddy-shop-dropdown { min-width: 220px; width: auto !important; border-radius: var(--radius-card-sm); box-shadow: var(--shadow-hover); overflow: hidden; } .header-area .kiddy-shop-dropdown .mega-menu, .header-area-v2 .kiddy-shop-dropdown .mega-menu { display: block !important; padding: 0.8rem 0; } .header-area .kiddy-shop-dropdown .mega-menu-link, .header-area-v2 .kiddy-shop-dropdown .mega-menu-link { display: block; padding: 0.7rem 1.6rem; color: var(--kiddy-text-light) !important; } .header-area .kiddy-shop-dropdown .mega-menu-link:hover, .header-area-v2 .kiddy-shop-dropdown .mega-menu-link:hover { /* background: var(--kiddy-bg-mint); */ color: var(--kiddy-primary) !important; } .header-area .header-bottom .menu-area .main-menu .menu-item.mega-menu-parent .mega-menu .mega-menu-item .menu-items .mega-menu-items { margin-bottom: 0; } /* -------------------------------------------------------------------- Hero section — big rounded blob image frame + pastel backdrop -------------------------------------------------------------------- */ .hero-section-v2 { background: linear-gradient(135deg, var(--kiddy-bg-alt) 0%, var(--kiddy-bg-mint) 100%); border-radius: 0 0 var(--radius-card) var(--radius-card); position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 3rem) 0; } .hero-section-v2::before { content: ""; position: absolute; top: -60px; right: -60px; width: 240px; height: 240px; background: var(--kiddy-accent); opacity: 0.35; border-radius: var(--radius-blob); z-index: 0; } .hero-content { position: relative; z-index: 1; } .hero-title { font-size: clamp(2.2rem, 4vw, 3.6rem) !important; line-height: 1.15 !important; margin-bottom: 1.2rem; } .hero-text { color: var(--kiddy-text-light) !important; font-size: 1.6rem; margin-bottom: 1.8rem; } .hero-banner-image { position: relative; z-index: 1; } .hero-image { border-radius: var(--radius-blob); box-shadow: var(--shadow-hover); } /* -------------------------------------------------------------------- Brands strip -------------------------------------------------------------------- */ .brads-area-v2 .sigle-brad { opacity: 0.7; transition: var(--transition-base); } .brads-area-v2 .sigle-brad:hover { opacity: 1; transform: translateY(-2px); } /* -------------------------------------------------------------------- Popular categories — pill tag list -------------------------------------------------------------------- */ .catagory-title { font-size: clamp(1.8rem, 3vw, 2.6rem) !important; } .catagory-list { display: flex; flex-wrap: wrap; gap: 0.8rem; } .sigle-catagory { list-style: none; } .catatory-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.6rem; border-radius: var(--radius-pill) !important; background: var(--kiddy-white) !important; color: var(--kiddy-text) !important; font-weight: 600; box-shadow: var(--shadow-soft); transition: var(--transition-base); } .catatory-link:hover { background: var(--kiddy-primary) !important; color: var(--kiddy-white) !important; transform: translateY(-3px); box-shadow: var(--shadow-hover); } /* -------------------------------------------------------------------- Product cards — rounded, soft shadow, pill sale badges -------------------------------------------------------------------- */ .single-grid-product-v2, .single-product, .product-item2, .product-wrap, .single-grid-product { background: var(--kiddy-white) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-soft) !important; overflow: hidden; border: none !important; transition: var(--transition-base) !important; padding: 0.6rem; margin-bottom: 1.5rem; } .single-grid-product-v2:hover, .single-product:hover, .product-item2:hover, .single-grid-product:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover) !important; } .product-top { border-radius: var(--radius-card-sm); overflow: hidden; } .product-thumbnal, .product-item2 img { border-radius: var(--radius-card-sm); transition: transform 0.45s var(--ease-bounce); } .single-grid-product-v2:hover .product-thumbnal, .single-grid-product:hover .product-thumbnal { transform: scale(1.05); } .product-flag { border-radius: var(--radius-pill) !important; font-family: 'Baloo 2', sans-serif !important; font-weight: 700 !important; padding: 0.3rem 1rem !important; } .product-flag.sale { background: var(--kiddy-accent) !important; color: var(--kiddy-text) !important; } .product-flag.discount { background: var(--kiddy-primary) !important; color: var(--kiddy-white) !important; } .prdouct-btn-wrapper .product-btn { /* background: var(--kiddy-white) !important; */ border-radius: 50% !important; box-shadow: var(--shadow-soft); transition: var(--transition-base); cursor: pointer; } .prdouct-btn-wrapper .product-btn:hover { background: var(--kiddy-secondary) !important; color: var(--kiddy-white) !important; transform: scale(1.1); } .product-tag-wrapper { min-height: 20px; padding: 0; } .product-catagory { color: var(--kiddy-secondary-dark) !important; font-weight: 700; text-transform: uppercase; font-size: 1.1rem; } .product-price .price { color: var(--kiddy-primary) !important; font-weight: 700; } .product-price .regular-price { color: var(--kiddy-text-light) !important; } /* -------------------------------------------------------------------- Special offer banner — big rounded pastel panel -------------------------------------------------------------------- */ .spectial-offer-area .spectial-offer-wrap { background: var(--kiddy-bg-alt); border-radius: var(--radius-card); padding: clamp(1.5rem, 4vw, 3rem); } .offer-image img { border-radius: var(--radius-blob); } .offer-catagory .color-text { color: var(--kiddy-primary) !important; } /* -------------------------------------------------------------------- Tabs (New Arrival / Best Selling / On Sale) — pill toggle group -------------------------------------------------------------------- */ .secendary-tabs .nav-tabs { display: inline-flex; background: var(--kiddy-bg-alt); border-radius: var(--radius-pill); padding: 0.4rem; gap: 0.3rem; border: none !important; } .secendary-tabs .nav-tabs .nav-link { border: none !important; border-radius: var(--radius-pill) !important; font-family: 'Baloo 2', sans-serif !important; font-weight: 600 !important; color: var(--kiddy-text-light) !important; padding: 0.7rem 1.6rem !important; transition: var(--transition-base); } .secendary-tabs .nav-tabs .nav-link.active { background: var(--kiddy-primary) !important; color: var(--kiddy-white) !important; } /* -------------------------------------------------------------------- Testimonials — rounded card, circular avatar accent ring -------------------------------------------------------------------- */ .single-testimonial { background: var(--kiddy-white) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-soft) !important; padding: 2rem !important; } .testimonial-image { border-radius: 50% !important; border: 3px solid var(--kiddy-accent) !important; } .testimonial-title { color: var(--kiddy-primary) !important; } /* -------------------------------------------------------------------- Blog cards -------------------------------------------------------------------- */ .single-grid-blog-v2 { background: var(--kiddy-white) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-soft) !important; overflow: hidden; transition: var(--transition-base) !important; padding: 0.6rem; } .single-grid-blog-v2:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover) !important; } .single-grid-blog-v2 img { border-radius: var(--radius-card-sm); } .blog-category { display: inline-block; background: var(--kiddy-bg-mint) !important; color: var(--kiddy-secondary-dark) !important; border-radius: var(--radius-pill) !important; padding: 0.3rem 1rem !important; font-weight: 700; font-size: 1.1rem; } /* -------------------------------------------------------------------- Modals -------------------------------------------------------------------- */ .common-modal .modal-content { border-radius: var(--radius-card) !important; border: none; box-shadow: var(--shadow-hover) !important; } /* -------------------------------------------------------------------- Footer — light background, dark floating trust bar (Kiddy reference) -------------------------------------------------------------------- */ .footer-area, .footer-area-v2 { background-color: var(--kiddy-bg) !important; /* background-color: #fff; */ padding-top: 2.5rem; } .footer-area .widget-title, .footer-area h3, .footer-area h4, .footer-area-v2 .widget-title, .footer-area-v2 h3, .footer-area-v2 h4 { color: var(--kiddy-text) !important; font-size: 1.7rem !important; margin-bottom: 1.2rem; } .footer-area .menu-link, .footer-area-v2 .menu-link { color: var(--kiddy-text-light2) !important; line-height: 3rem; transition: var(--transition-base); } .footer-area .menu-link:hover, .footer-area-v2 .menu-link:hover { color: var(--kiddy-primary) !important; padding-left: 4px; } .footer-area .widget-menu, .footer-area-v2 .widget-menu { list-style: none; padding-left: 0; } /* Trust bar — dark floating rounded card with 4 icon+text items */ .footer-trust-bar { padding: 0 1.5rem; } .footer-trust-bar-wrap { background: var(--kiddy-text); border-radius: var(--radius-card); box-shadow: var(--shadow-hover); padding: 2.2rem 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; } .trust-item { display: flex; align-items: flex-start; gap: 1rem; flex: 1 1 220px; min-width: 220px; } .trust-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.35); display: flex; align-items: center; justify-content: center; color: var(--kiddy-white); font-size: 1.6rem; } .trust-text h4 { color: var(--kiddy-white) !important; font-size: 1.4rem !important; margin-bottom: 0.3rem; } .trust-text p { color: rgba(255, 255, 255, 0.6) !important; font-size: 1.2rem; line-height: 1.6; margin: 0; } /* Brand row — logo/address left, phone pill right */ .footer-brand-row { padding: 3rem 1.5rem 2.5rem; border-bottom: 1px solid rgba(46, 42, 61, 0.08); /* margin-bottom: 2.5rem; */ } .footer-brand-row-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; } .footer-brand-logo img { max-height: 44px; } .footer-brand-address { color: var(--kiddy-text-light) !important; margin-top: 1rem; font-size: 1.4rem; max-width: 480px; } .footer-phone-pill { display: inline-flex; align-items: center; gap: 1rem; background: var(--kiddy-white); border: 1px solid rgba(46, 42, 61, 0.1); border-radius: var(--radius-pill); padding: 0.6rem 1.6rem 0.6rem 0.6rem; box-shadow: var(--shadow-soft); font-family: 'Baloo 2', sans-serif; font-weight: 700; color: var(--kiddy-text) !important; } .footer-phone-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--kiddy-wa); color: var(--kiddy-white); display: flex; align-items: center; justify-content: center; } /* Bottom bar — copyright left, circular social icons right */ .footer-bottom { border-top: 1px solid rgba(46, 42, 61, 0.08); margin-top: 2rem; padding: 1.6rem 0; } .footer-bottom-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-bottom-left, .footer-bottom-wrap .copyright-text { color: var(--kiddy-text-light) !important; font-size: 1.3rem; margin: 0; } .footer-bottom-social { display: flex; gap: 0.7rem; list-style: none; margin: 0; padding: 0; } .social-media-link { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: transparent !important; border: 1.5px solid rgba(46, 42, 61, 0.18) !important; border-radius: 50% !important; color: var(--kiddy-text) !important; font-size: 1.3rem; transition: var(--transition-base) !important; } .social-media-link:hover { background: var(--kiddy-primary) !important; border-color: var(--kiddy-primary) !important; color: var(--kiddy-white) !important; transform: translateY(-2px); } /* ========================================================================== RESPONSIVE — mobile-first, layered on top of responsive.css ========================================================================== */ @media (max-width: 1199.98px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } .hero-title { font-size: 2.6rem !important; } .header-area .header-middle .header-wrap, .header-area .kiddy-header-bottom-wrap, .header-area-v2 .header-middle .header-wrap, .header-area-v2 .kiddy-header-bottom-wrap { padding: 0 1.2rem; } .header-area .main-menu, .header-area-v2 .main-menu { gap: 1.4rem; } .header-area .kiddy-utility-list, .header-area-v2 .kiddy-utility-list { gap: 1.2rem; } .header-area .kiddy-utility-list .single-btn span, .header-area-v2 .kiddy-utility-list .single-btn span { display: none; } } @media (max-width: 991.98px) { .hero-section-v2 .col-lg-6.col-md-6.col-5, .hero-banner-image { margin-top: 2rem; } h1 { font-size: 2.4rem !important; } h2 { font-size: 2rem !important; } h3 { font-size: 1.7rem !important; } .secendary-tabs .nav-tabs { flex-wrap: wrap; justify-content: center; } .footer-widget-area .col-xl-3, .footer-widget-area .col-lg-4, .footer-widget-area .col-md-4 { margin-bottom: 2rem; } } @media (max-width: 767.98px) { .footer-trust-bar-wrap { flex-direction: column; padding: 1.8rem; } .footer-brand-row-wrap { flex-direction: column; align-items: flex-start; } .footer-bottom-wrap { flex-direction: column; align-items: flex-start; text-align: left; } body { font-size: 1.4rem; line-height: 2.2rem; } h1 { font-size: 2rem !important; } h2 { font-size: 1.7rem !important; } h3 { font-size: 1.5rem !important; } .hero-section-v2 { text-align: center; border-radius: 0 0 var(--radius-card-sm) var(--radius-card-sm); } .hero-content { display: flex; flex-direction: column; align-items: center; } .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; } .primary-btn, .primary-btn-v2, .secondary-btn, .btn { padding: 0.7rem 1.6rem !important; font-size: 1.3rem !important; } .single-grid-product-v2, .single-product, .product-item2 { margin-bottom: 1.5rem; } .catagory-list { justify-content: center; } .modal-dialog { margin: 1rem; } } @media (max-width: 575.98px) { body { font-size: 1.3rem; line-height: 2rem; } h1 { font-size: 1.8rem !important; } h2 { font-size: 1.5rem !important; } h3 { font-size: 1.3rem !important; } .container, .container-fluid { padding-left: 0.5rem; padding-right: 0.5rem; } .header-top-left, .header-top-right { text-align: center; justify-content: center !important; } .hero-section-v2::before { width: 140px; height: 140px; } .social-media { flex-wrap: wrap; } .primary-btn, .primary-btn-v2, .secondary-btn, .add-cart, .btn { width: 100%; text-align: center; } .modal-btn-wrap .primary-btn { width: auto; } .footer-area { border-radius: var(--radius-card-sm) var(--radius-card-sm) 0 0; } } @media (max-width: 400px) { .brand-logo img, .brand-image { max-width: 130px; } .contact-info { font-size: 1.2rem; } } /* ========================================================================== Split-screen auth pages (Sign In / Sign Up / Forgot Password) ========================================================================== */ .kiddy-auth-page { /* background: var(--kiddy-bg); */ padding: clamp(2rem, 5vw, 4rem) 0; } .kiddy-auth-card { background: var(--kiddy-white); border-radius: var(--radius-card); box-shadow: var(--shadow-hover); overflow: hidden; } /* --- Illustration panel --- */ .kiddy-auth-illustration { height: 100%; min-height: 480px; background: linear-gradient(160deg, #AFD6C6 0%, #9BC9B7 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(2rem, 4vw, 3.5rem); text-align: center; position: relative; } .kiddy-auth-illustration-art { width: min(280px, 70%); margin-bottom: 1.5rem; } .kiddy-auth-illustration-art svg { width: 100%; height: auto; display: block; } .kiddy-auth-illustration-caption h3 { font-family: 'Baloo 2', sans-serif; color: var(--kiddy-white); font-size: 1.7rem; margin-bottom: 0.6rem; } .kiddy-auth-illustration-caption p { color: rgba(255, 255, 255, 0.85); font-size: 1.3rem; max-width: 320px; margin: 0 auto; } .kiddy-auth-dots { display: flex; gap: 0.5rem; margin-top: 1.6rem; } .kiddy-auth-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); } .kiddy-auth-dots span.active { background: var(--kiddy-white); width: 22px; border-radius: var(--radius-pill); } /* --- Form panel: reuses the existing .login-wrap markup, restyled --- */ .kiddy-auth-form-col { height: 100%; display: flex; align-items: center; padding: clamp(1.5rem, 3vw, 2rem); } .kiddy-auth-form-col .login-wrap { box-shadow: none !important; padding: clamp(1rem, 3vw, 2.5rem) !important; width: 100%; background: transparent !important; } .kiddy-auth-form-col .login-wrap .icon { display: none !important; } .kiddy-auth-form-col .login-wrap h1 { font-family: 'Baloo 2', sans-serif !important; font-size: 2.2rem !important; font-weight: 700 !important; color: var(--kiddy-text) !important; text-align: left !important; } .kiddy-auth-form-col .login-form .form-group { margin-bottom: 1.8rem !important; } /* Underline-only inputs, no boxes — matches the reference's minimal style */ .kiddy-auth-form-col .login-form input, .kiddy-auth-form-col .login-form .form-control { height: auto !important; border: none !important; border-bottom: 1.5px solid var(--kiddy-bg-alt) !important; border-radius: 0 !important; background: transparent !important; padding: 0.6rem 0.2rem !important; font-size: 1.4rem !important; box-shadow: none !important; } .kiddy-auth-form-col .login-form input:focus { border-bottom-color: var(--kiddy-primary) !important; } .kiddy-auth-form-col .login-form input::placeholder { color: var(--kiddy-text-light) !important; } /* Dark pill submit button, matching the reference's "Sign in" button */ .kiddy-auth-form-col .login-form button.auth-btn { height: auto !important; background: var(--kiddy-text) !important; color: var(--kiddy-white) !important; border: none !important; border-radius: var(--radius-pill) !important; padding: 1.1rem !important; font-family: 'Baloo 2', sans-serif !important; font-weight: 600 !important; font-size: 1.4rem !important; transition: var(--transition-base) !important; } .kiddy-auth-form-col .login-form button.auth-btn:hover { background: var(--kiddy-primary) !important; transform: translateY(-2px); } .kiddy-auth-form-col .login-form hr { border-color: var(--kiddy-bg-alt); opacity: 1; margin: 1.8rem 0; } .kiddy-auth-form-col .forget-password-link { color: var(--kiddy-primary) !important; font-weight: 600 !important; font-size: 1.3rem; } .kiddy-auth-form-col .forget-password-link:hover { color: var(--kiddy-primary-dark) !important; } .kiddy-auth-form-col .already-have-account { font-size: 1.3rem; color: var(--kiddy-text-light); } .kiddy-auth-form-col .checkbox-wrap { font-size: 1.3rem; color: var(--kiddy-text-light); } .kiddy-auth-form-col .checkbox-wrap .checkmark { border-radius: 4px; background-color: var(--kiddy-bg-alt) !important; } .kiddy-auth-form-col .checkbox-wrap input:checked ~ .checkmark { background-color: var(--kiddy-primary) !important; } @media (max-width: 991.98px) { .kiddy-auth-illustration { min-height: 260px; padding: 2rem; } .kiddy-auth-illustration-art { width: 160px; margin-bottom: 1rem; } .kiddy-auth-illustration-caption h3 { font-size: 1.4rem; } .kiddy-auth-illustration-caption p { font-size: 1.15rem; } .kiddy-auth-form-col { padding: 1.5rem; } } /* ========================================================================== FIX — search box + Shop dropdown were breaking out of their containers. Root cause: this theme's original CSS uses very deeply-nested selectors (5–6 class levels) for these exact elements. Those win on CSS specificity over our earlier, shallower override rules regardless of load order, so several properties (width, position, padding) were silently falling back to the original theme's values instead of ours. This block re-applies the same intended styles with matching/higher specificity and !important so they reliably win. ========================================================================== */ /* --- Search bar: force every child inline/static so nothing can overflow the pill, and neutralise the original theme's fixed widths --- */ .header-area .header-middle .header-middle-wrap .search-area .search-wrap, .header-area-v2 .header-middle .search-area .search-wrap, .header-area-v2 .header-middle .header-wrap .search-area .search-wrap { display: flex !important; align-items: center !important; width: 100% !important; height: auto !important; background: var(--kiddy-bg-mint) !important; border: none !important; border-radius: var(--radius-pill) !important; overflow: hidden !important; } .header-area .search-wrap .form-group, .header-area-v2 .search-wrap .form-group { position: static !important; flex: 1 1 auto !important; width: auto !important; } .header-area .search-wrap .form-group::before, .header-area-v2 .search-wrap .form-group::before { content: none !important; display: none !important; } .header-area .search-wrap .form-control, .header-area-v2 .search-wrap .form-control { position: static !important; flex: 1 1 auto !important; width: 100% !important; height: auto !important; padding: 1.1rem 1.6rem !important; border: none !important; border-bottom: none !important; background: transparent !important; box-shadow: none !important; } .header-area .search-wrap .form-select, .header-area-v2 .search-wrap .form-select { position: static !important; flex: 0 0 auto !important; width: auto !important; max-width: 180px !important; height: auto !important; padding: 1.1rem 2.4rem 1.1rem 1.6rem !important; border: none !important; border-left: 1px solid rgba(46, 42, 61, 0.15) !important; border-radius: 0 !important; background-color: transparent !important; color: var(--kiddy-text-light) !important; text-overflow: ellipsis; } .header-area .search-wrap .search-btn, .header-area-v2 .search-wrap .search-btn { position: static !important; top: auto !important; left: auto !important; right: auto !important; flex: 0 0 auto !important; height: auto !important; border: none !important; background: transparent !important; padding: 0 1.8rem !important; color: var(--kiddy-text) !important; } /* --- Shop dropdown: anchor to the "Shop" link itself instead of the original theme's viewport-relative full-width mega-menu behaviour --- */ .header-area .header-bottom .menu-area .main-menu .menu-item.kiddy-shop-menu, .header-area-v2 .header-bottom .menu-area .main-menu .menu-item.kiddy-shop-menu { position: relative !important; } .header-area .header-bottom .menu-area .main-menu .menu-item.kiddy-shop-menu .kiddy-shop-dropdown, .header-area-v2 .header-bottom .menu-area .main-menu .menu-item.kiddy-shop-menu .kiddy-shop-dropdown { position: absolute !important; top: 100% !important; left: 0 !important; right: auto !important; bottom: auto !important; width: max-content !important; min-width: 220px !important; max-width: 280px !important; padding: 0 !important; margin-top: 0 !important; border-radius: var(--radius-card-sm) !important; box-shadow: var(--shadow-hover) !important; background: var(--kiddy-white) !important; overflow: hidden !important; -webkit-transform: none !important; transform: none !important; } .header-area .kiddy-shop-menu:hover .kiddy-shop-dropdown, .header-area-v2 .kiddy-shop-menu:hover .kiddy-shop-dropdown { -webkit-transform: none !important; transform: none !important; } /* Invisible bridge so the hover chain never breaks between the "Shop" link and the dropdown below it — sits above the dropdown, inside the same hoverable li, closing the dead zone that used to hide the menu. */ .header-area .kiddy-shop-menu::after, .header-area-v2 .kiddy-shop-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } .header-area .kiddy-shop-menu img.kiddy-shop-tag, .header-area-v2 .kiddy-shop-menu img.kiddy-shop-tag, img.kiddy-shop-tag { width: 12px; margin-top: -5px; } .sub-menu-link img.kiddy-shop-small-tag { width: 9px; margin-top: -4px; } .header-area .kiddy-shop-dropdown .container, .header-area-v2 .kiddy-shop-dropdown .container { padding: 0 !important; margin: 0 !important; max-width: none !important; width: auto !important; } .header-area .kiddy-shop-dropdown .mega-menu, .header-area-v2 .kiddy-shop-dropdown .mega-menu { display: block !important; padding: 0.8rem 0 !important; width: auto !important; } .header-area .kiddy-shop-dropdown .mega-menu-item, .header-area-v2 .kiddy-shop-dropdown .mega-menu-item { width: auto !important; } .header-area .kiddy-shop-dropdown .menu-items, .header-area-v2 .kiddy-shop-dropdown .menu-items { padding: 0 !important; margin: 0 !important; } .header-area .header-bottom .menu-area .main-menu .menu-item.mega-menu-parent .mega-menu .mega-menu-item .menu-items .mega-menu-items .mega-menu-link { font-size: 1.45rem; font-weight: 400; line-height: 2rem; } .header-area .kiddy-shop-dropdown .mega-menu-link, .header-area-v2 .kiddy-shop-dropdown .mega-menu-link { display: block !important; padding: 0.5rem 1.6rem !important; color: var(--kiddy-text-light) !important; white-space: nowrap; } .header-area .kiddy-shop-dropdown .mega-menu-link:hover, .header-area-v2 .kiddy-shop-dropdown .mega-menu-link:hover { /* background: var(--kiddy-bg-mint) !important; */ color: var(--kiddy-primary) !important; } /* ========================================================================== Cart offcanvas sidebar — Kiddy reference layout: image-left rows, a compact qty stepper, trash-icon delete, subtotal row, and a two-button View Cart / Checkout row. Selector paths match the theme's original nesting + !important throughout, since this theme's base cart CSS is highly specific and will otherwise silently win over shallower rules. ========================================================================== */ .kiddy-cart-offcanvas .offcanvas-title { font-family: 'Baloo 2', sans-serif !important; font-weight: 700 !important; color: var(--kiddy-text) !important; } /* Product row */ .cart-product-item .single-grid-product.kiddy-cart-row { position: relative !important; align-items: flex-start !important; padding-right: 2.4rem !important; padding-bottom: 1.2rem !important; margin-bottom: 1.2rem !important; border-bottom: 1px solid rgba(46, 42, 61, 0.08) !important; } .cart-product-item:last-child .single-grid-product.kiddy-cart-row { border-bottom: none !important; margin-bottom: 0 !important; } /* Defensive fallback: constrain ANY image inside the cart row's thumbnail slot, regardless of which class it actually carries — protects against stale/placeholder markup still being served from a cached compiled view. */ .single-grid-product .product-top { margin-bottom: 1.5rem; } .cart-product-item .single-grid-product .product-top, .cart-product-item .single-grid-product .product-top a { display: block !important; width: 56px !important; height: 56px !important; flex-shrink: 0 !important; } .cart-product-item .single-grid-product .product-top img { width: 56px !important; height: 56px !important; max-width: 56px !important; min-width: 0 !important; border-radius: var(--radius-card-sm) !important; object-fit: cover !important; } .cart-product-item .single-grid-product.kiddy-cart-row .product-info { display: block !important; width: calc(100% - 56px - 1rem) !important; } .cart-product-item .kiddy-cart-row .product-name .product-link { font-family: 'Baloo 2', sans-serif !important; font-size: 1.25rem !important; font-weight: 700 !important; color: var(--kiddy-text) !important; line-height: 1.3 !important; } .single-grid-product .product-top { aspect-ratio: 4 / 3; overflow:hidden; } .single-grid-product .product-top img{ width:100%; height:100%; object-fit:cover; } .kiddy-cart-row-meta { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.5rem; } /* Qty stepper: number box with stacked up/down chevrons */ .cart-product-item .kiddy-cart-row .cart-quantity { width: auto !important; display: flex !important; align-items: stretch !important; background: var(--kiddy-white) !important; border: 1.5px solid rgba(46, 42, 61, 0.15) !important; border-radius: 10px !important; overflow: hidden !important; } .cart-product-item .kiddy-cart-row input.qty-input { width: 26px !important; height: 26px !important; background: var(--kiddy-white) !important; color: var(--kiddy-text) !important; font-family: 'Baloo 2', sans-serif !important; font-size: 1.05rem !important; font-weight: 700 !important; text-align: center !important; line-height: 26px !important; } .cart-product-item .kiddy-cart-row .qty-stepper { display: flex; flex-direction: column; border-left: 1px solid rgba(46, 42, 61, 0.15); } .cart-product-item .kiddy-cart-row .qty-stepper .increase-btn { width: 18px !important; height: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; } .cart-product-item .kiddy-cart-row .qty-stepper .increase-btn::before { content: none !important; } .cart-product-item .kiddy-cart-row .qty-stepper .increase-btn i { font-size: 0.7rem !important; color: var(--kiddy-text-light) !important; } .cart-product-item .kiddy-cart-row .qty-stepper .increase-btn.inc { border-bottom: 1px solid rgba(46, 42, 61, 0.15); } .cart-product-item .kiddy-cart-row .qty-stepper .increase-btn:hover i { color: var(--kiddy-primary) !important; } .cart-product-item .kiddy-cart-row .product-price { display: flex !important; align-items: center; gap: 0.3rem; margin: 0 !important; } .kiddy-cart-times { color: var(--kiddy-text-light); font-size: 1.1rem; } .cart-product-item .kiddy-cart-row .product-price .price { font-family: 'Baloo 2', sans-serif !important; font-size: 1.2rem !important; font-weight: 700 !important; color: var(--kiddy-text) !important; } /* Trash / remove button, top-right of the row */ .cart-product-item .single-grid-product.kiddy-cart-row .kiddy-cart-remove { position: absolute !important; top: 0 !important; right: 0 !important; width: 24px; height: 24px; display: flex !important; align-items: center; justify-content: center; border: none !important; background: transparent !important; text-decoration: none !important; color: var(--kiddy-text-light) !important; font-size: 1.1rem; padding: 0 !important; margin: 0 !important; transition: var(--transition-base); } .cart-product-item .single-grid-product.kiddy-cart-row .kiddy-cart-remove:hover { color: var(--kiddy-primary) !important; } /* Legacy markup fallback: if the old "Remove" text link + flanking -/+ buttons are still rendering (stale compiled view), shrink those too so the sidebar isn't oversized either way. */ .cart-product-item .single-grid-product .product-info .cart-remove-btn { font-size: 1.1rem !important; margin-top: 0.4rem !important; } .single-grid-product .product-info .add-cart .icon { margin-left: 0; } .cart-product-item .single-grid-product { margin-bottom: 1.5rem; } /* .single-grid-product { display:flex; flex-direction:column; height:100%; } .single-grid-product .product-info { display:flex; flex-direction:column; flex:1; } */ .single-grid-product .product-info .product-name { /* margin: 1rem 0; font-size: 1.5rem; line-height: 2rem; */ margin: 1rem 0; font-size:1.5rem; line-height:2rem; min-height:4rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .single-grid-product .add-cart { margin-top:auto; } .cart-product-item .single-grid-product .product-info .product-name .product-link { font-size: 1.5rem; line-height: 2rem; font-weight: 300; } .cart-product-item .single-grid-product .product-info .cart-quantity { width: 100px; } .single-grid-product .product-info .product-review { margin: 0; } /* .cart-product-item .single-grid-product .product-info .cart-quantity:not(.kiddy-cart-row .cart-quantity) { width: auto !important; height: auto !important; } */ .cart-product-item .single-grid-product .product-info input.qty-input { width: 32px !important; height: 32px !important; font-size: 1.1rem !important; margin: 1px 5px !important; } .cart-product-item .single-grid-product .product-info .qtybutton.dec::before, .cart-product-item .single-grid-product .product-info .qtybutton.inc::before { font-size: 10px; } .single-grid-product .product-info .product-price, .single-grid-product .product-info .kiddy-add-cart-icon { margin-bottom: 1.2rem; } .single-grid-product .product-info .product-price .regular-price { font-size: 1.2rem; } .single-grid-product .product-info .product-price .price { font-size: 1.55rem; } .single-grid-product .product-info .product-catagory { display: inline; background: #ffdd00; font-size: 1.1rem; line-height: 1.2rem; margin-bottom: 0; color: #ff0000 !important; padding: 0.1rem .5rem; border-radius: 0.5rem; font-weight: 400 !important; } /* Subtotal + View Cart / Checkout row */ .offcanvas.offcanvas-end .offcanvas-header { border-bottom: 1px solid rgb(196, 196, 196); margin: 0px 30px; padding: 10px 0px; } .offcanvas.offcanvas-end .offcanvas-body .total-bottom-part { border-top: 0px solid #E9E9E9; padding: 10px 0 0; } .offcanvas.offcanvas-end .offcanvas-body .proceed-to-btn { margin: 0; } .offcanvas.offcanvas-end .offcanvas-body .total-count { align-items: center !important; padding: 1rem 0 !important; border-top: 1px solid rgba(46, 42, 61, 0.08) !important; } .offcanvas .offcanvas-header h5.offcanvas-title { font-size: 2.6rem; } .offcanvas.offcanvas-end .offcanvas-body .total-count h3 { font-family: 'Baloo 2', sans-serif !important; font-size: 1.25rem !important; text-transform: uppercase; letter-spacing: 0.03em; color: var(--kiddy-text-light) !important; } .offcanvas.offcanvas-end .offcanvas-body .total-count h4 { font-family: 'Baloo 2', sans-serif !important; font-size: 2rem !important; color: var(--kiddy-primary) !important; } .kiddy-cart-btn-row { display: flex; gap: 0.8rem; } .kiddy-cart-btn-row .primary-btn, .kiddy-cart-btn-row .secondary-btn { flex: 1 1 0; font-size: 1.2rem !important; padding: 0.9rem 1rem !important; } .kiddy-cart-btn-row .secondary-btn { background: var(--kiddy-white) !important; color: var(--kiddy-text) !important; border: 1.5px solid rgba(46, 42, 61, 0.15) !important; } .kiddy-cart-btn-row .secondary-btn:hover { background: var(--kiddy-bg-mint) !important; } /* ========================================================================== Contact Us page — Kiddy reference layout: rounded info cards row, image on the left, "Have Questions?" form on the right. Selectors match the theme's original nesting + !important, same reasoning as elsewhere in this file (see notes above). ========================================================================== */ .contact-us-area.kiddy-contact-page .contact-us-top { padding: 4rem 0 2rem 0 !important; } .contact-us-area .contact-us-top .single-contact-info.kiddy-contact-card { margin-bottom: 2rem !important; padding: 3rem 2rem !important; border-left: none !important; background: var(--kiddy-white) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-soft) !important; transition: var(--transition-base) !important; } .contact-us-area .contact-us-top .single-contact-info.kiddy-contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover) !important; } .kiddy-contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--kiddy-bg-mint); margin-bottom: 1.4rem; } .contact-us-area .contact-us-top .single-contact-info .kiddy-contact-icon .contact-info-icon { margin-bottom: 0 !important; max-width: 28px; } .contact-us-area .contact-us-top .single-contact-info .contact-info-title { margin-bottom: 0.6rem !important; font-family: 'Baloo 2', sans-serif !important; font-size: 1.6rem !important; font-weight: 700 !important; color: var(--kiddy-text) !important; } .contact-us-area .contact-us-top .single-contact-info .contact-info-content { font-size: 1.3rem !important; line-height: 1.8 !important; color: var(--kiddy-text-light) !important; } /* Image + form split */ .kiddy-contact-image { border-radius: var(--radius-blob); overflow: hidden; box-shadow: var(--shadow-hover); } .kiddy-contact-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .contact-us-area .contact-form-area { padding: 3.5rem !important; background-color: var(--kiddy-white) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-soft) !important; } .contact-us-area .contact-form-area .contct-form-top { margin-bottom: 2rem !important; text-align: left !important; } .contact-us-area .contact-form-area .contct-form-top .form-title { font-family: 'Baloo 2', sans-serif !important; font-size: 2.4rem !important; font-weight: 700 !important; color: var(--kiddy-text) !important; } .contact-us-area .contact-form-area .contct-form-top .form-subtitle { font-size: 1.4rem !important; color: var(--kiddy-text-light) !important; } .contact-us-area .contact-form-area .form-group .form-control { height: 5rem !important; border: 1.5px solid var(--kiddy-bg-alt) !important; border-radius: var(--radius-card-sm) !important; background: var(--kiddy-bg) !important; font-family: 'Quicksand', sans-serif !important; color: var(--kiddy-text) !important; } .contact-us-area .contact-form-area .form-group .form-control:focus { border-color: var(--kiddy-primary) !important; box-shadow: 0 0 0 4px rgba(255, 122, 102, 0.14) !important; } .contact-us-area .contact-form-area .form-group .message-box { height: 130px !important; border-radius: var(--radius-card-sm) !important; } .contact-us-area .contact-form-area .form-button { text-align: left !important; } .contact-us-area .contact-form-area .form-btn { width: auto !important; height: auto !important; margin: 0 !important; padding: 1.2rem 3rem !important; background-color: var(--kiddy-primary) !important; border-radius: var(--radius-pill) !important; font-family: 'Baloo 2', sans-serif !important; } .contact-us-area .contact-form-area .form-btn:hover { background-color: var(--kiddy-primary-dark) !important; } @media (max-width: 991.98px) { .kiddy-contact-image { margin-bottom: 2rem; min-height: 280px; } .contact-us-area .contact-form-area { padding: 2rem !important; } } /* ========================================================================== Homepage — Hero / Featured & Trending Products / Trusted-by (Kiddy ref) ========================================================================== */ /* --- Hero --- */ .kiddy-home-hero { padding: clamp(3rem, 6vw, 6rem) 0; overflow: hidden; } .kiddy-hero-title { font-size: clamp(3rem, 5vw, 5.2rem) !important; line-height: 1.08 !important; margin-bottom: 1.6rem; } .kiddy-hero-text { color: var(--kiddy-text-light); font-size: 1.5rem; max-width: 460px; margin-bottom: 2.2rem; } .kiddy-hero-btn-row { margin-bottom: 2.2rem; } .kiddy-hero-subscribe { display: flex; max-width: 380px; background: var(--kiddy-white); border: 1.5px solid rgba(46, 42, 61, 0.12); border-radius: var(--radius-pill); overflow: hidden; box-shadow: var(--shadow-soft); } .kiddy-hero-subscribe input { flex: 1 1 auto; border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 1rem 1.6rem !important; } .kiddy-hero-subscribe button { flex: 0 0 auto; border: none; background: var(--kiddy-text); color: var(--kiddy-white); font-family: 'Baloo 2', sans-serif; font-weight: 600; padding: 0 1.8rem; cursor: pointer; transition: var(--transition-base); } .kiddy-hero-subscribe button:hover { background: var(--kiddy-primary); } .kiddy-hero-images { position: relative; display: flex; align-items: flex-end; gap: 1.4rem; justify-content: center; } .kiddy-hero-img { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-hover); flex: 1 1 0; } .kiddy-hero-img-1 { background: var(--kiddy-accent); align-self: stretch; } .kiddy-hero-img-2 { background: var(--kiddy-bg-mint); align-self: flex-start; margin-top: 3rem; } .kiddy-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 3 / 4; } .kiddy-hero-badge { position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%) rotate(-6deg); width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--kiddy-white); border: 2px dashed var(--kiddy-text); border-radius: 50%; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.4rem; color: var(--kiddy-primary); box-shadow: var(--shadow-hover); padding: 0.5rem; z-index: 2; } /* --- Section header (Featured / Trending Products) --- */ .section-header-two.kiddy-section-header { display: flex !important; align-items: center !important; justify-content: space-between !important; text-align: left !important; margin-bottom: 3rem !important; } .section-header-two.kiddy-section-header .section-title { font-size: clamp(2rem, 3vw, 2.8rem) !important; margin: 0 !important; } .section-header-two.kiddy-section-header .section-title::before, .section-header-two.kiddy-section-header .section-title::after { display: none !important; content: none !important; } .kiddy-view-all-btn { font-size: 1.2rem !important; padding: 0.8rem 1.8rem !important; display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap; } .kiddy-empty-section-text { color: var(--kiddy-text-light); text-align: center; padding: 2rem 0; } /* --- Trusted by section --- */ .kiddy-trusted-section { padding: clamp(2rem, 4vw, 3.5rem) 0; } .kiddy-trusted-avatars { display: flex; justify-content: center; margin-bottom: 1.2rem; } .kiddy-trusted-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--kiddy-bg); box-shadow: var(--shadow-soft); margin-left: -14px; } .kiddy-trusted-avatar:first-child { margin-left: 0; } .kiddy-trusted-title { font-size: clamp(1.8rem, 2.6vw, 2.4rem) !important; } @media (max-width: 991.98px) { .kiddy-hero-content-col { text-align: center; } .kiddy-hero-text { margin-left: auto; margin-right: auto; } .kiddy-hero-btn-row { display: flex; justify-content: center; } .kiddy-hero-subscribe { margin: 0 auto 2rem; } .kiddy-hero-images { margin-top: 3rem; max-width: 420px; margin-left: auto; margin-right: auto; } } @media (max-width: 767.98px) { .section-header-two.kiddy-section-header { flex-direction: column; align-items: flex-start !important; gap: 1.2rem; } .kiddy-hero-img-2 { margin-top: 1.5rem; } } @media (max-width: 575.98px) { .kiddy-hero-images { flex-direction: row; gap: 0.8rem; } .kiddy-hero-subscribe { max-width: 100%; } .kiddy-trusted-avatar { width: 42px; height: 42px; } } /* -------------------------------------------------------------------- Promo banners (Toys / Shoes / Hats) — fixed content, replaces Trending Products. Continuous zoom-pulse on hover. Sized with aspect-ratio (not fixed pixel heights) so every card scales cleanly at any viewport instead of overflowing or leaving dead space. -------------------------------------------------------------------- */ @keyframes kiddyZoomPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .kiddy-promo-card { position: relative; display: flex; overflow: hidden; border-radius: var(--radius-card); text-decoration: none !important; box-shadow: var(--shadow-soft); transition: var(--transition-base); width: 100%; } .kiddy-promo-card:hover { box-shadow: var(--shadow-hover); /* transform: translateY(-4px); */ } .kiddy-promo-card-sm:hover { transform: translateY(-4px); } /* Large "Toys" card: full-bleed photo + gradient scrim, content pinned bottom-left. aspect-ratio keeps it proportional at every width. */ .kiddy-promo-toys { align-items: flex-end; aspect-ratio: 16 / 8.2; background: var(--kiddy-text); } .kiddy-promo-bg { position: absolute; inset: 0; } .kiddy-promo-bg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .kiddy-promo-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 18, 30, 0.82) 0%, rgba(20, 18, 30, 0.35) 40%, rgba(20, 18, 30, 0) 68%); } .kiddy-promo-toys:hover .kiddy-promo-bg img { animation: kiddyZoomPulse 1.6s ease-in-out infinite; } .kiddy-promo-toys .kiddy-promo-content { position: relative; z-index: 2; padding: clamp(1.6rem, 3.5vw, 3rem); color: var(--kiddy-white); width: 100%; } /* Stacked "Shoes" / "Hats" cards */ .kiddy-promo-card-sm { aspect-ratio: 21 / 7.2; align-items: center; justify-content: space-between; padding: clamp(1.6rem, 3vw, 2.5rem); margin-bottom: 2rem; } .kiddy-promo-card-sm:last-child { margin-bottom: 0; } .kiddy-promo-shoes { background: #EDE9F9; } .kiddy-promo-hats { background: var(--kiddy-bg-alt); } .kiddy-promo-card-sm .kiddy-promo-illustration { flex-shrink: 0; width: clamp(60px, 9vw, 90px); height: clamp(60px, 9vw, 90px); display: flex; align-items: center; justify-content: center; transform: scale(1); transition: transform 0.5s ease-in-out; will-change: transform; } .kiddy-promo-illustration svg, .kiddy-promo-illustration img { width: 100%; height: 100%; } .kiddy-promo-shoes .kiddy-promo-illustration i { font-size: clamp(3.4rem, 6vw, 5.5rem); color: var(--kiddy-primary); transform: rotate(-12deg); } .kiddy-promo-card-sm:hover .kiddy-promo-illustration { transform: scale(1.12); } .kiddy-promo-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .kiddy-promo-label { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: clamp(1.05rem, 1.4vw, 1.5rem); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.7rem; } .kiddy-promo-text { font-family: 'Baloo 2', sans-serif; font-weight: 300; font-size: clamp(1.05rem, 1.4vw, 1.2rem); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.55rem; } .kiddy-promo-discount { display: flex; align-items: flex-start; gap: 0.4rem; margin-bottom: 1.4rem; } .kiddy-promo-number { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(2.8rem, 5vw, 4.4rem); line-height: 1; } .kiddy-promo-card-sm .kiddy-promo-number { font-size: clamp(2.4rem, 4vw, 3.4rem); } .kiddy-promo-percent { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.2rem; line-height: 1.1; margin-top: 0.3rem; } .kiddy-promo-btn { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--kiddy-white); color: var(--kiddy-text); font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: clamp(1.05rem, 1.4vw, 1.2rem); text-transform: uppercase; letter-spacing: 0.02em; padding: 0.9rem 1.6rem; border-radius: var(--radius-card-sm); transition: var(--transition-base); white-space: nowrap; } .kiddy-promo-btn-light { background: var(--kiddy-text); color: var(--kiddy-white); } .kiddy-promo-card:hover .kiddy-promo-btn { background: var(--kiddy-primary); color: var(--kiddy-white); } @media (max-width: 991.98px) { .kiddy-promo-toys { aspect-ratio: 16 / 10; } .kiddy-promo-card-sm { aspect-ratio: auto; min-height: 170px; } } @media (max-width: 767.98px) { .kiddy-promo-toys { aspect-ratio: 4 / 3.4; } } @media (max-width: 575.98px) { .kiddy-promo-toys { aspect-ratio: 3 / 3.2; } .kiddy-promo-card-sm { flex-direction: column-reverse; align-items: flex-start; gap: 1.2rem; min-height: 0; padding: 1.6rem; } .kiddy-promo-card-sm .kiddy-promo-illustration { align-self: flex-end; margin-top: -3.5rem; } .kiddy-promo-btn { padding: 0.8rem 1.4rem; font-size: 1.05rem; } } /* -------------------------------------------------------------------- Compact Featured/Trending product cards — smaller card, tighter type scale, icon-only Add to Cart instead of a full-width button. -------------------------------------------------------------------- */ .single-grid-product, .single-grid-product-v2 { border-radius: var(--radius-card-sm) !important; padding: 0.4rem !important; } .kiddy-product-info { padding: 0.9rem 0.6rem 0.6rem !important; } .kiddy-product-info .product-catagory { font-size: 0.95rem !important; margin-bottom: 0.3rem !important; letter-spacing: 0.03em; } .kiddy-product-info .product-name { font-size: 1.3rem !important; line-height: 1.3 !important; margin-bottom: 0.6rem !important; } .kiddy-product-info .product-name .product-link { color: var(--kiddy-text) !important; } .kiddy-product-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .kiddy-product-bottom-row .product-price { display: flex; align-items: baseline; gap: 0.4rem; margin: 0 !important; } .kiddy-product-bottom-row .product-price .price { font-size: 1.55rem !important; } .kiddy-product-bottom-row .product-price .regular-price { font-size: 1.25rem !important; text-decoration: line-through; } /* Icon-only Add to Cart — replaces the old full-width text button */ .kiddy-add-cart-icon { flex-shrink: 0; width: 38px !important; height: 38px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50% !important; background: var(--kiddy-primary) !important; color: var(--kiddy-white) !important; box-shadow: var(--shadow-soft); } .kiddy-add-cart-icon i { font-size: 1.5rem; transition: transform 0.3s var(--ease-bounce); } .kiddy-add-cart-icon:hover { background: var(--kiddy-primary-dark) !important; transform: scale(1.08); } /* .kiddy-add-cart-icon:hover i { transform: rotate(90deg); } */ .kiddy-product-card .product-thumbnal { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; } .kiddy-product-card .product-flag { font-size: 1rem !important; padding: 0.2rem 0.8rem !important; } .kiddy-product-card .prdouct-btn-wrapper .product-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; } @media (max-width: 575.98px) { .kiddy-product-info .product-name { font-size: 1.2rem !important; } .kiddy-product-bottom-row .product-price .price { font-size: 1.15rem !important; } .kiddy-add-cart-icon { width: 34px !important; height: 34px !important; } } /* ========================================================================== Product listing grid — Pinterest/Masonry layout (all_product.blade.php) Cards keep Bootstrap col-* widths for responsive breakpoints; Masonry.js (kiddy-masonry.js) reads those widths off .kiddy-masonry-sizer and then absolutely-positions each .kiddy-masonry-item to close the vertical gaps caused by variable image heights (see product-thumbnal below — images scale by width only, so aspect ratio is preserved, never stretched/cropped). NON-DESTRUCTIVE: only adds new classes, existing .single-grid-product card design/hover/badges/buttons are untouched. ========================================================================== */ .kiddy-masonry-grid { position: relative; } .kiddy-masonry-sizer, .kiddy-masonry-item { margin-bottom: 1.5rem; } /* Masonry sets inline position:absolute + left/top once JS runs; until then items sit in normal Bootstrap row/col flow so there's no flash of unstyled/overlapping content on first paint. */ .kiddy-masonry-item { opacity: 0; transform: translateY(14px); transition: opacity 0.35s ease, transform 0.35s ease; /* width intentionally NOT set here — Bootstrap's col-* classes on this element already control width at every breakpoint; Masonry.js reads that computed width off .kiddy-masonry-sizer (same col-* classes). */ } .kiddy-masonry-grid.kiddy-masonry-ready .kiddy-masonry-item { opacity: 1; } .kiddy-masonry-item.kiddy-masonry-item-visible { opacity: 1; transform: translateY(0); } .kiddy-masonry-item .single-grid-product { height: auto; } /* Preserve natural aspect ratio — no cropping, no stretching */ .kiddy-masonry-item .product-thumbnal { width: 100%; height: auto; display: block; } /* Fixed at 4 columns on desktop (col-xl-3 = 4/row) — no further column-count increase on very large screens. */