├── assets ├── images │ ├── blog-1.jpg │ ├── blog-2.jpg │ ├── blog-3.jpg │ ├── blog-4.jpg │ ├── payment.png │ ├── banner-1.jpg │ ├── banner-2.jpg │ ├── banner-3.jpg │ ├── cta-banner.jpg │ ├── newsletter.png │ ├── products │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── belt.jpg │ │ ├── shoe-1.jpg │ │ ├── shoe-2.jpg │ │ ├── shoe-3.jpg │ │ ├── shoe-4.jpg │ │ ├── shoe-5.jpg │ │ ├── jacket-1.jpg │ │ ├── jacket-2.jpg │ │ ├── jacket-3.jpg │ │ ├── jacket-4.jpg │ │ ├── jacket-5.jpg │ │ ├── jacket-6.jpg │ │ ├── perfume.jpg │ │ ├── shampoo.jpg │ │ ├── shirt-1.jpg │ │ ├── shirt-2.jpg │ │ ├── shoe-1_1.jpg │ │ ├── shoe-2_1.jpg │ │ ├── shorts-1.jpg │ │ ├── shorts-2.jpg │ │ ├── sports-1.jpg │ │ ├── sports-2.jpg │ │ ├── sports-3.jpg │ │ ├── sports-4.jpg │ │ ├── sports-5.jpg │ │ ├── sports-6.jpg │ │ ├── watch-1.jpg │ │ ├── watch-2.jpg │ │ ├── watch-3.jpg │ │ ├── watch-4.jpg │ │ ├── clothes-1.jpg │ │ ├── clothes-2.jpg │ │ ├── clothes-3.jpg │ │ ├── clothes-4.jpg │ │ ├── jewellery-1.jpg │ │ ├── jewellery-2.jpg │ │ ├── jewellery-3.jpg │ │ ├── party-wear-1.jpg │ │ └── party-wear-2.jpg │ ├── logo │ │ ├── favicon.ico │ │ └── logo.svg │ ├── mens-banner.jpg │ ├── testimonial-1.jpg │ ├── womens-banner.jpg │ ├── electronics-banner-1.jpg │ ├── electronics-banner-2.jpg │ └── icons │ │ ├── quotes.svg │ │ ├── tee.svg │ │ ├── jacket.svg │ │ ├── perfume.svg │ │ ├── glasses.svg │ │ ├── shorts.svg │ │ ├── cosmetics.svg │ │ ├── hat.svg │ │ ├── dress.svg │ │ ├── shoes.svg │ │ ├── bag.svg │ │ ├── jewelry.svg │ │ ├── coat.svg │ │ └── watch.svg ├── js │ └── script.js └── css │ ├── style.css │ └── style-prefix.css ├── website-demo-image ├── desktop.png └── mobile.png └── README.md /assets/images/blog-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/blog-1.jpg -------------------------------------------------------------------------------- /assets/images/blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/blog-2.jpg -------------------------------------------------------------------------------- /assets/images/blog-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/blog-3.jpg -------------------------------------------------------------------------------- /assets/images/blog-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/blog-4.jpg -------------------------------------------------------------------------------- /assets/images/payment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/payment.png -------------------------------------------------------------------------------- /assets/images/banner-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/banner-1.jpg -------------------------------------------------------------------------------- /assets/images/banner-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/banner-2.jpg -------------------------------------------------------------------------------- /assets/images/banner-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/banner-3.jpg -------------------------------------------------------------------------------- /assets/images/cta-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/cta-banner.jpg -------------------------------------------------------------------------------- /assets/images/newsletter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/newsletter.png -------------------------------------------------------------------------------- /assets/images/products/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/1.jpg -------------------------------------------------------------------------------- /assets/images/products/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/2.jpg -------------------------------------------------------------------------------- /assets/images/products/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/3.jpg -------------------------------------------------------------------------------- /assets/images/products/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/4.jpg -------------------------------------------------------------------------------- /assets/images/logo/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/logo/favicon.ico -------------------------------------------------------------------------------- /assets/images/mens-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/mens-banner.jpg -------------------------------------------------------------------------------- /website-demo-image/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/website-demo-image/desktop.png -------------------------------------------------------------------------------- /website-demo-image/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/website-demo-image/mobile.png -------------------------------------------------------------------------------- /assets/images/products/belt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/belt.jpg -------------------------------------------------------------------------------- /assets/images/products/shoe-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/shoe-1.jpg -------------------------------------------------------------------------------- /assets/images/products/shoe-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/shoe-2.jpg -------------------------------------------------------------------------------- /assets/images/products/shoe-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/shoe-3.jpg -------------------------------------------------------------------------------- /assets/images/products/shoe-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/shoe-4.jpg -------------------------------------------------------------------------------- /assets/images/products/shoe-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/shoe-5.jpg -------------------------------------------------------------------------------- /assets/images/testimonial-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/testimonial-1.jpg -------------------------------------------------------------------------------- /assets/images/womens-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/womens-banner.jpg -------------------------------------------------------------------------------- /assets/images/products/jacket-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/jacket-1.jpg -------------------------------------------------------------------------------- /assets/images/products/jacket-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/jacket-2.jpg -------------------------------------------------------------------------------- /assets/images/products/jacket-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/jacket-3.jpg -------------------------------------------------------------------------------- /assets/images/products/jacket-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/jacket-4.jpg -------------------------------------------------------------------------------- /assets/images/products/jacket-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/jacket-5.jpg -------------------------------------------------------------------------------- /assets/images/products/jacket-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/jacket-6.jpg -------------------------------------------------------------------------------- /assets/images/products/perfume.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/perfume.jpg -------------------------------------------------------------------------------- /assets/images/products/shampoo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/shampoo.jpg -------------------------------------------------------------------------------- /assets/images/products/shirt-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/shirt-1.jpg -------------------------------------------------------------------------------- /assets/images/products/shirt-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/shirt-2.jpg -------------------------------------------------------------------------------- /assets/images/products/shoe-1_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/shoe-1_1.jpg -------------------------------------------------------------------------------- /assets/images/products/shoe-2_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/shoe-2_1.jpg -------------------------------------------------------------------------------- /assets/images/products/shorts-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/shorts-1.jpg -------------------------------------------------------------------------------- /assets/images/products/shorts-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/shorts-2.jpg -------------------------------------------------------------------------------- /assets/images/products/sports-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/sports-1.jpg -------------------------------------------------------------------------------- /assets/images/products/sports-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/sports-2.jpg -------------------------------------------------------------------------------- /assets/images/products/sports-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/sports-3.jpg -------------------------------------------------------------------------------- /assets/images/products/sports-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/sports-4.jpg -------------------------------------------------------------------------------- /assets/images/products/sports-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/sports-5.jpg -------------------------------------------------------------------------------- /assets/images/products/sports-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/sports-6.jpg -------------------------------------------------------------------------------- /assets/images/products/watch-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/watch-1.jpg -------------------------------------------------------------------------------- /assets/images/products/watch-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/watch-2.jpg -------------------------------------------------------------------------------- /assets/images/products/watch-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/watch-3.jpg -------------------------------------------------------------------------------- /assets/images/products/watch-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/watch-4.jpg -------------------------------------------------------------------------------- /assets/images/electronics-banner-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/electronics-banner-1.jpg -------------------------------------------------------------------------------- /assets/images/electronics-banner-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/electronics-banner-2.jpg -------------------------------------------------------------------------------- /assets/images/products/clothes-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/clothes-1.jpg -------------------------------------------------------------------------------- /assets/images/products/clothes-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/clothes-2.jpg -------------------------------------------------------------------------------- /assets/images/products/clothes-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/clothes-3.jpg -------------------------------------------------------------------------------- /assets/images/products/clothes-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/clothes-4.jpg -------------------------------------------------------------------------------- /assets/images/products/jewellery-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/jewellery-1.jpg -------------------------------------------------------------------------------- /assets/images/products/jewellery-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/jewellery-2.jpg -------------------------------------------------------------------------------- /assets/images/products/jewellery-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/jewellery-3.jpg -------------------------------------------------------------------------------- /assets/images/products/party-wear-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/party-wear-1.jpg -------------------------------------------------------------------------------- /assets/images/products/party-wear-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/anon-ecommerce-website/HEAD/assets/images/products/party-wear-2.jpg -------------------------------------------------------------------------------- /assets/images/icons/quotes.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/logo/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Anon - An eCommerce Website 2 | 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/anon-ecommerce-website) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/anon-ecommerce-website?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/anon-ecommerce-website?style=social) 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_) 7 | [![YouTube Video Views](https://img.shields.io/youtube/views/3l8Lob4ysI0?style=social)](https://youtu.be/3l8Lob4ysI0) 8 | 9 | Anon is a fully responsive ecommerce website, maximum compatiblities in all mobile devices, built using HTML, CSS, and JavaScript. 10 | 11 | ## Demo 12 | 13 | ![Anon Desktop Demo](./website-demo-image/desktop.png "Desktop Demo") 14 | ![Anon Mobile Demo](./website-demo-image/mobile.png "Mobile Demo") 15 | 16 | ## Prerequisites 17 | 18 | Before you begin, ensure you have met the following requirements: 19 | 20 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system. 21 | 22 | ## Installing Anon 23 | 24 | To install **Anon**, follow these steps: 25 | 26 | Linux and macOS: 27 | 28 | ```bash 29 | sudo git clone https://github.com/codewithsadee/anon-ecommerce-website.git 30 | ``` 31 | 32 | Windows: 33 | 34 | ```bash 35 | git clone https://github.com/codewithsadee/anon-ecommerce-website.git 36 | ``` 37 | 38 | ## Contact 39 | 40 | If you want to contact me you can reach me at [Twitter](https://www.twitter.com/codewithsadee). 41 | 42 | ## License 43 | 44 | This project is **free to use** and does not contains any license. 45 | -------------------------------------------------------------------------------- /assets/images/icons/tee.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 11 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /assets/images/icons/jacket.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 10 | 14 | 16 | 17 | 18 | 20 | 21 | 22 | 23 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /assets/images/icons/perfume.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 10 | 13 | 14 | 16 | 18 | 19 | 20 | 21 | 22 | 24 | 26 | 27 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /assets/images/icons/glasses.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 13 | 15 | 17 | 18 | 21 | 24 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /assets/images/icons/shorts.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 8 | 14 | 15 | 16 | 18 | 20 | 21 | 22 | 23 | 25 | 27 | 28 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // modal variables 4 | const modal = document.querySelector('[data-modal]'); 5 | const modalCloseBtn = document.querySelector('[data-modal-close]'); 6 | const modalCloseOverlay = document.querySelector('[data-modal-overlay]'); 7 | 8 | // modal function 9 | const modalCloseFunc = function () { modal.classList.add('closed') } 10 | 11 | // modal eventListener 12 | modalCloseOverlay.addEventListener('click', modalCloseFunc); 13 | modalCloseBtn.addEventListener('click', modalCloseFunc); 14 | 15 | 16 | 17 | 18 | 19 | // notification toast variables 20 | const notificationToast = document.querySelector('[data-toast]'); 21 | const toastCloseBtn = document.querySelector('[data-toast-close]'); 22 | 23 | // notification toast eventListener 24 | toastCloseBtn.addEventListener('click', function () { 25 | notificationToast.classList.add('closed'); 26 | }); 27 | 28 | 29 | 30 | 31 | 32 | // mobile menu variables 33 | const mobileMenuOpenBtn = document.querySelectorAll('[data-mobile-menu-open-btn]'); 34 | const mobileMenu = document.querySelectorAll('[data-mobile-menu]'); 35 | const mobileMenuCloseBtn = document.querySelectorAll('[data-mobile-menu-close-btn]'); 36 | const overlay = document.querySelector('[data-overlay]'); 37 | 38 | for (let i = 0; i < mobileMenuOpenBtn.length; i++) { 39 | 40 | // mobile menu function 41 | const mobileMenuCloseFunc = function () { 42 | mobileMenu[i].classList.remove('active'); 43 | overlay.classList.remove('active'); 44 | } 45 | 46 | mobileMenuOpenBtn[i].addEventListener('click', function () { 47 | mobileMenu[i].classList.add('active'); 48 | overlay.classList.add('active'); 49 | }); 50 | 51 | mobileMenuCloseBtn[i].addEventListener('click', mobileMenuCloseFunc); 52 | overlay.addEventListener('click', mobileMenuCloseFunc); 53 | 54 | } 55 | 56 | 57 | 58 | 59 | 60 | // accordion variables 61 | const accordionBtn = document.querySelectorAll('[data-accordion-btn]'); 62 | const accordion = document.querySelectorAll('[data-accordion]'); 63 | 64 | for (let i = 0; i < accordionBtn.length; i++) { 65 | 66 | accordionBtn[i].addEventListener('click', function () { 67 | 68 | const clickedBtn = this.nextElementSibling.classList.contains('active'); 69 | 70 | for (let i = 0; i < accordion.length; i++) { 71 | 72 | if (clickedBtn) break; 73 | 74 | if (accordion[i].classList.contains('active')) { 75 | 76 | accordion[i].classList.remove('active'); 77 | accordionBtn[i].classList.remove('active'); 78 | 79 | } 80 | 81 | } 82 | 83 | this.nextElementSibling.classList.toggle('active'); 84 | this.classList.toggle('active'); 85 | 86 | }); 87 | 88 | } -------------------------------------------------------------------------------- /assets/images/icons/cosmetics.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 13 | 16 | 19 | 21 | 23 | 25 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /assets/images/icons/hat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 8 | 11 | 12 | 14 | 16 | 17 | 19 | 22 | 23 | 25 | 27 | 28 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /assets/images/icons/dress.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 10 | 16 | 17 | 20 | 22 | 25 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /assets/images/icons/shoes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /assets/images/icons/bag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 22 | 23 | 24 | 26 | 27 | 28 | 30 | 31 | 32 | 34 | 35 | 36 | 38 | 39 | 40 | 42 | 43 | 44 | 45 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /assets/images/icons/jewelry.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 8 | 12 | 15 | 19 | 25 | 28 | 30 | 33 | 35 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /assets/images/icons/coat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 17 | 18 | 19 | 20 | 24 | 28 | 29 | 31 | 33 | 34 | 36 | 38 | 40 | 42 | 43 | 44 | 45 | 46 | 47 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /assets/images/icons/watch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 9 | 11 | 13 | 14 | 15 | 17 | 18 | 20 | 22 | 23 | 25 | 27 | 28 | 29 | 31 | 32 | 33 | 40 | 45 | 48 | 50 | 51 | 52 | 59 | 64 | 65 | 66 | 69 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 83 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /*-----------------------------------*\ 2 | #style.css 3 | \*-----------------------------------*/ 4 | 5 | /** 6 | * copyright 2022 @codewithsadee 7 | */ 8 | 9 | 10 | 11 | 12 | 13 | /*-----------------------------------*\ 14 | #CUSTOM PROPERTY 15 | \*-----------------------------------*/ 16 | 17 | :root { 18 | 19 | /** 20 | * colors 21 | */ 22 | 23 | --spanish-gray: hsl(0, 0%, 60%); 24 | --sonic-silver: hsl(0, 0%, 47%); 25 | --eerie-black: hsl(0, 0%, 13%); 26 | --salmon-pink: hsl(353, 100%, 78%); 27 | --sandy-brown: hsl(29, 90%, 65%); 28 | --bittersweet: hsl(0, 100%, 70%); 29 | --ocean-green: hsl(152, 51%, 52%); 30 | --davys-gray: hsl(0, 0%, 33%); 31 | --cultured: hsl(0, 0%, 93%); 32 | --white: hsl(0, 100%, 100%); 33 | --onyx: hsl(0, 0%, 27%); 34 | 35 | /** 36 | * typography 37 | */ 38 | 39 | --fs-1: 1.563rem; 40 | --fs-2: 1.375rem; 41 | --fs-3: 1.25rem; 42 | --fs-4: 1.125rem; 43 | --fs-5: 1rem; 44 | --fs-6: 0.938rem; 45 | --fs-7: 0.875rem; 46 | --fs-8: 0.813rem; 47 | --fs-9: 0.75rem; 48 | --fs-10: 0.688rem; 49 | --fs-11: 0.625rem; 50 | 51 | --weight-300: 300; 52 | --weight-400: 400; 53 | --weight-500: 500; 54 | --weight-600: 600; 55 | --weight-700: 700; 56 | 57 | /** 58 | * border-radius 59 | */ 60 | 61 | --border-radius-md: 10px; 62 | --border-radius-sm: 5px; 63 | 64 | /** 65 | * transition 66 | */ 67 | 68 | --transition-timing: 0.2s ease; 69 | 70 | } 71 | 72 | 73 | 74 | 75 | 76 | /*-----------------------------------*\ 77 | #RESET 78 | \*-----------------------------------*/ 79 | 80 | *, *::before, *::after { 81 | margin: 0; 82 | padding: 0; 83 | box-sizing: border-box; 84 | } 85 | 86 | a { text-decoration: none; } 87 | 88 | li { list-style: none; } 89 | 90 | button { 91 | background: none; 92 | font: inherit; 93 | border: none; 94 | cursor: pointer; 95 | } 96 | 97 | img, ion-icon, button, a { display: block; } 98 | 99 | span { display: inline-block; } 100 | 101 | html { 102 | font-family: "Poppins", sans-serif; 103 | overscroll-behavior: contain; 104 | } 105 | 106 | input { 107 | display: block; 108 | width: 100%; 109 | font: inherit; 110 | } 111 | 112 | input::placeholder { font: inherit; } 113 | 114 | body { background: var(--white); } 115 | 116 | /** 117 | * scrollbar style 118 | */ 119 | 120 | body::-webkit-scrollbar { width: 15px; } 121 | 122 | body::-webkit-scrollbar-track { 123 | background: var(--white); 124 | border-left: 1px solid var(--cultured); 125 | } 126 | 127 | body::-webkit-scrollbar-thumb { 128 | background: hsl(0, 0%, 80%); 129 | border: 3px solid var(--white); 130 | border-radius: 10px; 131 | } 132 | 133 | body::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 70%); } 134 | 135 | 136 | 137 | 138 | 139 | /*-----------------------------------*\ 140 | #REUSED STYLE 141 | \*-----------------------------------*/ 142 | 143 | .container { padding: 0 15px; } 144 | 145 | .has-scrollbar { padding-bottom: 5px; } 146 | 147 | .has-scrollbar::-webkit-scrollbar { 148 | width: 12px; /* for vertical scroll */ 149 | height: 12px; /* for horizontal scroll */ 150 | } 151 | 152 | .has-scrollbar::-webkit-scrollbar-thumb { 153 | background: transparent; 154 | border: 3px solid var(--white); 155 | border-radius: 20px; 156 | } 157 | 158 | .has-scrollbar:hover::-webkit-scrollbar-thumb { background: hsl(0, 0%, 90%); } 159 | 160 | .has-scrollbar::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 80%); } 161 | 162 | .title { 163 | color: var(--eerie-black); 164 | font-size: var(--fs-5); 165 | font-weight: var(--weight-600); 166 | letter-spacing: 0.4px; 167 | text-transform: capitalize; 168 | padding-bottom: 10px; 169 | border-bottom: 1px solid var(--cultured); 170 | margin-bottom: 30px; 171 | } 172 | 173 | 174 | 175 | 176 | 177 | /*-----------------------------------*\ 178 | #MAIN 179 | \*-----------------------------------*/ 180 | 181 | /** 182 | * overlay 183 | */ 184 | 185 | .overlay { 186 | position: fixed; 187 | top: 0; 188 | left: 0; 189 | width: 100%; 190 | height: 100vh; 191 | background: hsla(0, 0%, 0%, 0.5); 192 | opacity: 0; 193 | pointer-events: none; 194 | z-index: 15; 195 | transition: 0.5s ease; 196 | } 197 | 198 | .overlay.active { 199 | opacity: 1; 200 | pointer-events: all; 201 | } 202 | 203 | 204 | 205 | /** 206 | * MODAL 207 | */ 208 | 209 | .modal { 210 | position: fixed; 211 | top: 0; 212 | left: 0; 213 | width: 100%; 214 | height: 100vh; 215 | background: hsla(0, 0%, 0%, 0.5); 216 | display: flex; 217 | justify-content: center; 218 | align-items: center; 219 | opacity: 0; 220 | visibility: hidden; 221 | pointer-events: none; 222 | z-index: 10; 223 | animation: popup 1s ease-in-out 5s forwards; 224 | } 225 | 226 | @keyframes popup { 227 | 228 | 0% { 229 | opacity: 0; 230 | visibility: hidden; 231 | pointer-events: none; 232 | } 233 | 234 | 100% { 235 | opacity: 1; 236 | visibility: visible; 237 | pointer-events: all; 238 | } 239 | 240 | } 241 | 242 | .modal.closed { display: none; } 243 | 244 | .modal-close-overlay { 245 | position: absolute; 246 | top: 0; 247 | left: 0; 248 | width: 100%; 249 | height: 100%; 250 | z-index: 1; 251 | } 252 | 253 | .newsletter-img { display: none; } 254 | 255 | .modal-content { 256 | position: relative; 257 | max-width: 350px; 258 | margin: 20px; 259 | background: var(--white); 260 | border-radius: var(--border-radius-md); 261 | overflow: hidden; 262 | z-index: 2; 263 | animation: scaleUp 0.5s ease-in-out 5s forwards; 264 | } 265 | 266 | @keyframes scaleUp { 267 | 268 | 0% { transform: scale(0.9); } 269 | 100% { transform: scale(1); } 270 | 271 | } 272 | 273 | .modal-close-btn { 274 | position: absolute; 275 | top: 15px; 276 | right: 15px; 277 | background: var(--salmon-pink); 278 | color: var(--white); 279 | font-size: 16px; 280 | padding: 5px; 281 | border-radius: var(--border-radius-sm); 282 | } 283 | 284 | .modal-close-btn:hover { opacity: 0.9; } 285 | 286 | .modal-close-btn ion-icon { --ionicon-stroke-width: 70px; } 287 | 288 | .newsletter { 289 | padding: 50px 30px; 290 | text-align: center; 291 | } 292 | 293 | .newsletter-header { margin-bottom: 20px; } 294 | 295 | .newsletter-title { 296 | color: var(--onyx); 297 | font-size: var(--fs-2); 298 | font-weight: var(--weight-600); 299 | margin-bottom: 10px; 300 | } 301 | 302 | .newsletter-desc { 303 | color: var(--sonic-silver); 304 | font-size: var(--fs-7); 305 | line-height: 1.6; 306 | } 307 | 308 | .email-field { 309 | font-size: var(--fs-7); 310 | padding: 8px 16px; 311 | border-radius: var(--border-radius-sm); 312 | border: 1px solid var(--cultured); 313 | margin-bottom: 16px; 314 | } 315 | 316 | .btn-newsletter { 317 | background: var(--eerie-black); 318 | color: var(--white); 319 | font-size: var(--fs-7); 320 | font-weight: var(--weight-600); 321 | text-transform: uppercase; 322 | padding: 10px 15px; 323 | border-radius: var(--border-radius-sm); 324 | margin: auto; 325 | transition: var(--transition-timing); 326 | } 327 | 328 | .btn-newsletter:hover { background: var(--salmon-pink); } 329 | 330 | 331 | 332 | 333 | 334 | /** 335 | * NOTIFICATION TOAST 336 | */ 337 | 338 | .notification-toast { 339 | position: fixed; 340 | bottom: 80px; 341 | left: 20px; 342 | right: 20px; 343 | background: var(--white); 344 | max-width: 300px; 345 | display: flex; 346 | align-items: flex-start; 347 | gap: 15px; 348 | padding: 15px; 349 | border-radius: var(--border-radius-md); 350 | box-shadow: 0 5px 20px hsla(0, 0%, 0%, 0.15); 351 | transform: translateX(calc(-100% - 40px)); 352 | transition: 0.5s ease-in-out; 353 | z-index: 5; 354 | animation: slideInOut 10s ease-in-out infinite; 355 | } 356 | 357 | @keyframes slideInOut { 358 | 359 | 0%, 360 | 45%, 361 | 100% { 362 | transform: translateX(calc(-100% - 40px)); 363 | opacity: 0; 364 | visibility: hidden; 365 | } 366 | 367 | 50%, 368 | 95% { 369 | transform: translateX(0); 370 | opacity: 1; 371 | visibility: visible; 372 | } 373 | 374 | } 375 | 376 | .notification-toast.closed { display: none; } 377 | 378 | .toast-close-btn { 379 | position: absolute; 380 | top: 10px; 381 | right: 10px; 382 | color: var(--sonic-silver); 383 | } 384 | 385 | .toast-close-btn ion-icon { --ionicon-stroke-width: 50px; } 386 | 387 | .toast-banner { 388 | width: 70px; 389 | height: 70px; 390 | border: 1px solid var(--cultured); 391 | border-radius: var(--border-radius-sm); 392 | } 393 | 394 | .toast-banner img { 395 | width: 100%; 396 | height: 100%; 397 | object-fit: contain; 398 | object-position: center; 399 | } 400 | 401 | .toast-detail { 402 | width: calc(100% - 85px); 403 | padding-right: 10px; 404 | } 405 | 406 | .toast-message { 407 | font-size: var(--fs-10); 408 | color: var(--sonic-silver); 409 | margin-bottom: 8px; 410 | } 411 | 412 | .toast-title { 413 | font-size: var(--fs-7); 414 | font-weight: var(--weight-500); 415 | color: var(--onyx); 416 | } 417 | 418 | .toast-meta { 419 | font-size: var(--fs-10); 420 | color: var(--sonic-silver); 421 | } 422 | 423 | 424 | 425 | 426 | 427 | /*-----------------------------------*\ 428 | #HEADER 429 | \*-----------------------------------*/ 430 | 431 | .header-top, 432 | .header-user-actions, 433 | .desktop-navigation-menu { display: none; } 434 | 435 | .header-main { 436 | padding: 20px 0; 437 | border-bottom: 1px solid var(--cultured); 438 | } 439 | 440 | .header-logo { margin-bottom: 20px; } 441 | 442 | .header-logo img { margin: auto; } 443 | 444 | .header-search-container { position: relative; } 445 | 446 | .header-search-container .search-field { 447 | font-size: var(--fs-7); 448 | color: var(--onyx); 449 | padding: 10px 15px; 450 | padding-right: 50px; 451 | border: 1px solid var(--cultured); 452 | border-radius: var(--border-radius-md); 453 | } 454 | 455 | .search-field::-webkit-search-cancel-button { display: none; } 456 | 457 | .search-btn { 458 | background: var(--white); 459 | position: absolute; 460 | top: 50%; 461 | right: 2px; 462 | transform: translateY(-50%); 463 | color: var(--onyx); 464 | font-size: 18px; 465 | padding: 8px 15px; 466 | border-radius: var(--border-radius-md); 467 | transition: color var(--transition-timing); 468 | } 469 | 470 | .search-btn:hover { color: var(--salmon-pink); } 471 | 472 | .mobile-bottom-navigation { 473 | background: var(--white); 474 | position: fixed; 475 | bottom: 0; 476 | left: 50%; 477 | transform: translateX(-50%); 478 | width: 100%; 479 | max-width: 500px; 480 | margin: auto; 481 | display: flex; 482 | justify-content: space-around; 483 | align-items: center; 484 | padding: 5px 0; 485 | box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.25); 486 | z-index: 5; 487 | } 488 | 489 | .mobile-bottom-navigation .action-btn { 490 | position: relative; 491 | font-size: 26px; 492 | color: var(--eerie-black); 493 | padding: 10px; 494 | } 495 | 496 | .mobile-bottom-navigation .count { 497 | background: var(--bittersweet); 498 | color: var(--white); 499 | position: absolute; 500 | top: 0; 501 | right: 0; 502 | font-size: 12px; 503 | font-weight: var(--weight-500); 504 | line-height: 1; 505 | padding: 2px 4px; 506 | border-radius: 20px; 507 | } 508 | 509 | .mobile-navigation-menu { 510 | background: var(--white); 511 | position: fixed; 512 | top: 0; 513 | left: -100%; 514 | width: 100%; 515 | max-width: 320px; 516 | height: 100vh; 517 | padding: 20px; 518 | box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); 519 | overflow-y: scroll; 520 | overscroll-behavior: contain; 521 | visibility: hidden; 522 | transition: 0.5s ease; 523 | z-index: 20; 524 | } 525 | 526 | .mobile-navigation-menu.active { 527 | left: 0; 528 | visibility: visible; 529 | } 530 | 531 | .menu-top { 532 | padding-bottom: 15px; 533 | margin-bottom: 10px; 534 | display: flex; 535 | justify-content: space-between; 536 | align-items: center; 537 | border-bottom: 2px solid var(--cultured); 538 | } 539 | 540 | .menu-top .menu-title { 541 | color: var(--salmon-pink); 542 | font-size: var(--fs-4); 543 | font-weight: var(--weight-600); 544 | } 545 | 546 | .menu-close-btn { 547 | color: var(--eerie-black); 548 | font-size: 22px; 549 | } 550 | 551 | .menu-close-btn ion-icon { --ionicon-stroke-width: 50px; } 552 | 553 | .mobile-menu-category-list { margin-bottom: 30px; } 554 | 555 | .menu-category .accordion-menu { 556 | width: 100%; 557 | display: flex; 558 | justify-content: space-between; 559 | align-items: center; 560 | } 561 | 562 | .mobile-menu-category-list .menu-category { border-bottom: 1px solid var(--cultured); } 563 | 564 | .mobile-menu-category-list .menu-title { 565 | color: var(--onyx); 566 | font-size: var(--fs-6); 567 | font-weight: var(--weight-500); 568 | padding: 12px 0; 569 | } 570 | 571 | .accordion-menu > div { font-size: 14px; } 572 | 573 | .accordion-menu ion-icon { 574 | color: var(--onyx); 575 | --ionicon-stroke-width: 90px; 576 | } 577 | 578 | .accordion-menu.active .add-icon, 579 | .accordion-menu .remove-icon { display: none; } 580 | 581 | .accordion-menu .add-icon, 582 | .accordion-menu.active .remove-icon { display: block; } 583 | 584 | .menu-category .submenu-category-list { margin-left: 10px; } 585 | 586 | .submenu-title { 587 | padding: 6px 0; 588 | font-size: var(--fs-6); 589 | color: var(--sonic-silver); 590 | font-weight: var(--weight-300); 591 | } 592 | 593 | .submenu-title:hover { color: var(--davys-gray); } 594 | 595 | .submenu-category-list { 596 | max-height: 0; 597 | overflow: hidden; 598 | visibility: hidden; 599 | transition: 0.5s ease-in-out; 600 | } 601 | 602 | .submenu-category-list.active { 603 | max-height: 148px; 604 | visibility: visible; 605 | } 606 | 607 | .menu-bottom .menu-category-list { margin-bottom: 20px; } 608 | 609 | .menu-bottom .menu-category { border-bottom: none; } 610 | 611 | .menu-bottom .menu-title { 612 | font-size: var(--fs-6); 613 | font-weight: var(--weight-500); 614 | color: var(--eerie-black); 615 | padding: 12px 0; 616 | } 617 | 618 | .accordion-menu.active .caret-back { transform: rotate(-0.25turn); } 619 | 620 | .menu-bottom .submenu-category-list { 621 | border: 1px solid var(--cultured); 622 | border-radius: var(--border-radius-md); 623 | padding: 0 15px; 624 | margin-left: 0; 625 | box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.05); 626 | } 627 | 628 | .menu-bottom .submenu-category:not(:last-child) { border-bottom: 1px solid var(--cultured); } 629 | 630 | .menu-social-container { 631 | display: flex; 632 | justify-content: center; 633 | align-items: center; 634 | gap: 10px; 635 | } 636 | 637 | .menu-social-container .social-link { 638 | background: var(--cultured); 639 | color: var(--eerie-black); 640 | font-size: 20px; 641 | padding: 10px; 642 | border-radius: var(--border-radius-md); 643 | } 644 | 645 | 646 | 647 | 648 | 649 | /*-----------------------------------*\ 650 | #BANNER 651 | \*-----------------------------------*/ 652 | 653 | .banner { margin: 30px 0; } 654 | 655 | .slider-container { 656 | display: flex; 657 | align-items: center; 658 | gap: 10px; 659 | border-radius: var(--border-radius-md); 660 | overflow: auto hidden; 661 | scroll-snap-type: inline mandatory; 662 | overscroll-behavior-inline: contain; 663 | } 664 | 665 | .slider-item { 666 | position: relative; 667 | min-width: 100%; 668 | max-height: 450px; 669 | aspect-ratio: 1 / 1; 670 | border-radius: var(--border-radius-md); 671 | overflow: hidden; 672 | scroll-snap-align: start; 673 | } 674 | 675 | .slider-item .banner-img { 676 | width: 100%; 677 | height: 100%; 678 | object-fit: cover; 679 | object-position: right; 680 | } 681 | 682 | .banner-content { 683 | background: hsla(0, 0%, 100%, 0.8); 684 | position: absolute; 685 | bottom: 25px; 686 | left: 25px; 687 | right: 25px; 688 | padding: 20px 25px; 689 | border-radius: var(--border-radius-md); 690 | } 691 | 692 | .banner-subtitle { 693 | color: var(--salmon-pink); 694 | font-size: var(--fs-7); 695 | font-weight: var(--weight-500); 696 | text-transform: capitalize; 697 | letter-spacing: 2px; 698 | margin-bottom: 10px; 699 | } 700 | 701 | .banner-title { 702 | color: var(--eerie-black); 703 | font-size: var(--fs-1); 704 | text-transform: uppercase; 705 | line-height: 1; 706 | margin-bottom: 10px; 707 | } 708 | 709 | .banner-text { display: none; } 710 | 711 | .banner-btn { 712 | background: var(--salmon-pink); 713 | color: var(--white); 714 | width: max-content; 715 | font-size: var(--fs-11); 716 | font-weight: var(--weight-600); 717 | text-transform: uppercase; 718 | padding: 4px 10px; 719 | border-radius: var(--border-radius-sm); 720 | transition: var(--transition-timing); 721 | } 722 | 723 | .banner-btn:hover { background: var(--eerie-black); } 724 | 725 | 726 | 727 | 728 | 729 | /*-----------------------------------*\ 730 | #CATEGORY 731 | \*-----------------------------------*/ 732 | 733 | .category { margin-bottom: 30px; } 734 | 735 | .category-item-container { 736 | display: flex; 737 | align-items: center; 738 | gap: 10px; 739 | overflow: auto hidden; 740 | scroll-snap-type: inline mandatory; 741 | overscroll-behavior-inline: contain; 742 | } 743 | 744 | .category-item { 745 | min-width: 100%; 746 | display: flex; 747 | align-items: center; 748 | gap: 10px; 749 | padding: 15px; 750 | border: 1px solid var(--cultured); 751 | border-radius: var(--border-radius-md); 752 | scroll-snap-align: start; 753 | } 754 | 755 | .category-img-box { 756 | background: var(--cultured); 757 | border: 1px solid hsl(0, 0%, 80%); 758 | padding: 10px; 759 | border-radius: var(--border-radius-sm); 760 | } 761 | 762 | .category-content-box { width: 100%; } 763 | 764 | .category-content-flex { 765 | display: flex; 766 | justify-content: space-between; 767 | align-items: center; 768 | margin-bottom: 10px; 769 | } 770 | 771 | .category-item-title { 772 | color: var(--eerie-black); 773 | font-size: var(--fs-9); 774 | font-weight: var(--weight-600); 775 | text-transform: uppercase; 776 | } 777 | 778 | .category-item-amount { 779 | color: var(--sonic-silver); 780 | font-size: var(--fs-11); 781 | } 782 | 783 | .category-btn { 784 | color: var(--salmon-pink); 785 | font-size: var(--fs-9); 786 | font-weight: var(--weight-500); 787 | text-transform: capitalize; 788 | } 789 | 790 | 791 | 792 | 793 | 794 | /*-----------------------------------*\ 795 | #SIDEBAR 796 | \*-----------------------------------*/ 797 | 798 | .sidebar { 799 | background: var(--white); 800 | position: fixed; 801 | top: 0; 802 | left: -100%; 803 | bottom: 0; 804 | width: 100%; 805 | max-width: 320px; 806 | padding: 30px; 807 | overflow-y: scroll; 808 | overscroll-behavior: contain; 809 | visibility: hidden; 810 | transition: 0.5s ease; 811 | z-index: 20; 812 | } 813 | 814 | .sidebar.active { 815 | left: 0; 816 | visibility: visible; 817 | } 818 | 819 | .sidebar-category { 820 | margin-bottom: 15px; 821 | padding-bottom: 15px; 822 | border-bottom: 1px solid var(--cultured); 823 | } 824 | 825 | .sidebar-top { 826 | display: flex; 827 | justify-content: space-between; 828 | align-items: center; 829 | margin-bottom: 10px; 830 | } 831 | 832 | .sidebar-title { 833 | color: var(--onyx); 834 | font-size: var(--fs-5); 835 | text-transform: uppercase; 836 | letter-spacing: 0.8px; 837 | font-weight: var(--weight-600); 838 | } 839 | 840 | .sidebar-close-btn { 841 | color: var(--eerie-black); 842 | font-size: 22px; 843 | font-weight: var(--weight-600); 844 | } 845 | 846 | .sidebar-close-btn ion-icon { --ionicon-stroke-width: 50px; } 847 | 848 | .sidebar-accordion-menu { 849 | width: 100%; 850 | display: flex; 851 | justify-content: space-between; 852 | align-items: center; 853 | padding: 7px 0; 854 | } 855 | 856 | .sidebar .menu-title-flex { 857 | display: flex; 858 | align-items: center; 859 | gap: 10px; 860 | } 861 | 862 | .sidebar .menu-title { 863 | font-size: var(--fs-5); 864 | color: var(--sonic-silver); 865 | font-weight: var(--weight-500); 866 | } 867 | 868 | .sidebar-accordion-menu ion-icon { 869 | color: var(--sonic-silver); 870 | font-size: 14px; 871 | --ionicon-stroke-width: 70px; 872 | } 873 | 874 | .sidebar-submenu-category-list { 875 | border-top: 1px solid var(--cultured); 876 | max-height: 0; 877 | overflow: hidden; 878 | visibility: hidden; 879 | transition: 0.5s ease-in-out; 880 | } 881 | 882 | .sidebar-submenu-category-list.active { 883 | padding: 13px 0 8px; 884 | max-height: 122px; 885 | visibility: visible; 886 | } 887 | 888 | .sidebar-submenu-title { 889 | display: flex; 890 | justify-content: space-between; 891 | align-items: center; 892 | color: var(--sonic-silver); 893 | font-size: var(--fs-7); 894 | padding: 2px 0; 895 | } 896 | 897 | .sidebar-submenu-title:hover { color: var(--eerie-black); } 898 | 899 | .sidebar .product-name { text-transform: capitalize; } 900 | 901 | .sidebar-accordion-menu.active .add-icon, 902 | .sidebar-accordion-menu .remove-icon { display: none; } 903 | 904 | .sidebar-accordion-menu .add-icon, 905 | .sidebar-accordion-menu.active .remove-icon { display: block; } 906 | 907 | .sidebar .showcase-heading { 908 | font-size: var(--fs-5); 909 | font-weight: var(--weight-600); 910 | color: var(--onyx); 911 | text-transform: uppercase; 912 | letter-spacing: 0.8px; 913 | margin-bottom: 15px; 914 | } 915 | 916 | .sidebar .showcase { 917 | display: flex; 918 | align-items: center; 919 | gap: 15px; 920 | } 921 | 922 | .sidebar .showcase:not(:last-child) { margin-bottom: 15px; } 923 | 924 | .sidebar .showcase-img { border-radius: var(--border-radius-sm); } 925 | 926 | .sidebar .showcase-content { width: calc(100% - 90px); } 927 | 928 | .sidebar .showcase-title { 929 | color: var(--onyx); 930 | font-size: var(--fs-7); 931 | font-weight: var(--weight-400); 932 | text-transform: capitalize; 933 | overflow: hidden; 934 | white-space: nowrap; 935 | text-overflow: ellipsis; 936 | letter-spacing: 0.5px; 937 | } 938 | 939 | .sidebar .showcase-rating { 940 | display: flex; 941 | align-items: center; 942 | color: var(--sandy-brown); 943 | font-size: 13px; 944 | padding: 4px 0; 945 | } 946 | 947 | .sidebar .price-box { 948 | display: flex; 949 | align-items: center; 950 | gap: 15px; 951 | } 952 | 953 | .sidebar .price-box del { 954 | color: var(--sonic-silver); 955 | font-size: 13px; 956 | } 957 | 958 | .sidebar .price-box .price { 959 | font-size: var(--fs-7); 960 | font-weight: var(--weight-600); 961 | color: var(--davys-gray); 962 | } 963 | 964 | 965 | 966 | 967 | 968 | /*-----------------------------------*\ 969 | #PRODUCT MINIMAL 970 | \*-----------------------------------*/ 971 | 972 | .product-minimal { margin-bottom: 30px; } 973 | 974 | .product-minimal .product-showcase { margin-bottom: 10px; } 975 | 976 | .product-minimal .showcase-wrapper { 977 | display: flex; 978 | align-items: center; 979 | overflow-x: auto; 980 | overscroll-behavior-inline: contain; 981 | scroll-snap-type: inline mandatory; 982 | } 983 | 984 | .product-minimal .showcase-container { 985 | min-width: 100%; 986 | padding: 0 5px; 987 | scroll-snap-align: start; 988 | } 989 | 990 | .product-minimal .showcase { 991 | display: flex; 992 | justify-content: flex-start; 993 | align-items: center; 994 | gap: 15px; 995 | border: 1px solid var(--cultured); 996 | padding: 15px; 997 | border-radius: var(--border-radius-md); 998 | } 999 | 1000 | .product-minimal .showcase:not(:last-child) { margin-bottom: 15px; } 1001 | 1002 | .product-minimal .showcase-content { width: calc(100% - 85px); } 1003 | 1004 | .product-minimal .showcase-title { 1005 | color: var(--eerie-black); 1006 | font-size: var(--fs-7); 1007 | font-weight: var(--weight-600); 1008 | text-transform: capitalize; 1009 | white-space: nowrap; 1010 | overflow: hidden; 1011 | text-overflow: ellipsis; 1012 | margin-bottom: 2px; 1013 | } 1014 | 1015 | .product-minimal .showcase-category { 1016 | width: max-content; 1017 | color: var(--davys-gray); 1018 | font-size: var(--fs-8); 1019 | text-transform: capitalize; 1020 | margin-bottom: 3px; 1021 | } 1022 | 1023 | .product-minimal .showcase-category:hover { color: var(--salmon-pink); } 1024 | 1025 | .product-minimal .price-box { 1026 | display: flex; 1027 | align-items: center; 1028 | gap: 10px; 1029 | } 1030 | 1031 | .product-minimal .price { 1032 | font-size: var(--fs-7); 1033 | font-weight: var(--weight-700); 1034 | color: var(--salmon-pink); 1035 | } 1036 | 1037 | .product-minimal .price-box del { 1038 | font-size: var(--fs-9); 1039 | color: var(--sonic-silver); 1040 | } 1041 | 1042 | 1043 | 1044 | 1045 | 1046 | /*-----------------------------------*\ 1047 | #PRODUCT FEATURED 1048 | \*-----------------------------------*/ 1049 | 1050 | .product-featured { margin-bottom: 30px; } 1051 | 1052 | .product-featured .showcase-wrapper { 1053 | display: flex; 1054 | align-items: center; 1055 | gap: 20px; 1056 | overflow-x: auto; 1057 | overscroll-behavior-inline: contain; 1058 | scroll-snap-type: inline mandatory; 1059 | } 1060 | 1061 | .product-featured .showcase-container { 1062 | min-width: 100%; 1063 | padding: 30px; 1064 | border: 1px solid var(--cultured); 1065 | border-radius: var(--border-radius-md); 1066 | scroll-snap-align: start; 1067 | } 1068 | 1069 | .product-featured .showcase-img { 1070 | width: 100%; 1071 | height: 100%; 1072 | object-fit: cover; 1073 | } 1074 | 1075 | .product-featured .showcase-content { margin-top: 30px; } 1076 | 1077 | .product-featured .showcase-rating { 1078 | color: var(--sandy-brown); 1079 | display: flex; 1080 | align-items: center; 1081 | font-size: 16px; 1082 | margin-bottom: 15px; 1083 | } 1084 | 1085 | .product-featured .showcase-title { 1086 | font-size: var(--fs-7); 1087 | color: var(--eerie-black); 1088 | overflow: hidden; 1089 | white-space: nowrap; 1090 | text-overflow: ellipsis; 1091 | text-transform: uppercase; 1092 | margin-bottom: 3px; 1093 | } 1094 | 1095 | .product-featured .showcase-desc { 1096 | color: var(--sonic-silver); 1097 | font-size: var(--fs-7); 1098 | font-weight: var(--weight-300); 1099 | margin-bottom: 10px; 1100 | } 1101 | 1102 | .product-featured .price-box { 1103 | font-size: var(--fs-3); 1104 | display: flex; 1105 | gap: 10px; 1106 | margin-bottom: 10px; 1107 | } 1108 | 1109 | .product-featured .price { 1110 | color: var(--salmon-pink); 1111 | font-weight: var(--weight-700); 1112 | } 1113 | 1114 | .product-featured del { 1115 | color: var(--sonic-silver); 1116 | font-weight: var(--weight-300); 1117 | } 1118 | 1119 | .product-featured .add-cart-btn { 1120 | background: var(--salmon-pink); 1121 | padding: 8px 15px; 1122 | color: var(--white); 1123 | font-weight: var(--fs-9); 1124 | font-weight: var(--weight-700); 1125 | text-transform: uppercase; 1126 | border-radius: var(--border-radius-md); 1127 | margin-bottom: 15px; 1128 | transition: var(--transition-timing); 1129 | } 1130 | 1131 | .product-featured .add-cart-btn:hover { 1132 | background: var(--eerie-black); 1133 | color: var(--white); 1134 | } 1135 | 1136 | .product-featured .showcase-status { margin-bottom: 15px; } 1137 | 1138 | .product-featured .showcase-status .wrapper { 1139 | display: flex; 1140 | justify-content: space-between; 1141 | align-items: center; 1142 | color: var(--eerie-black); 1143 | font-size: var(--fs-9); 1144 | font-weight: var(--weight-400); 1145 | text-transform: uppercase; 1146 | margin-bottom: 10px; 1147 | } 1148 | 1149 | .product-featured .showcase-status-bar { 1150 | background: var(--cultured); 1151 | position: relative; 1152 | height: 10px; 1153 | border-radius: 5px; 1154 | } 1155 | 1156 | .product-featured .showcase-status-bar::before { 1157 | position: absolute; 1158 | content: ''; 1159 | top: 3px; 1160 | left: 3px; 1161 | height: 4px; 1162 | width: 40%; 1163 | background: var(--salmon-pink); 1164 | border-radius: 4px; 1165 | } 1166 | 1167 | .product-featured .countdown-desc { 1168 | color: var(--eerie-black); 1169 | font-size: var(--fs-9); 1170 | font-weight: var(--weight-600); 1171 | text-transform: uppercase; 1172 | margin-bottom: 10px; 1173 | } 1174 | 1175 | .product-featured .countdown { 1176 | display: flex; 1177 | gap: 5px; 1178 | } 1179 | 1180 | .product-featured .countdown-content { 1181 | padding: 5px; 1182 | background: var(--cultured); 1183 | border-radius: var(--border-radius-md); 1184 | text-align: center; 1185 | } 1186 | 1187 | .product-featured .display-number { 1188 | color: var(--eerie-black); 1189 | font-size: var(--fs-5); 1190 | font-weight: var(--weight-500); 1191 | min-width: 40px; 1192 | } 1193 | 1194 | .product-featured .display-text { 1195 | color: var(--davys-gray); 1196 | font-size: var(--fs-11); 1197 | } 1198 | 1199 | 1200 | 1201 | 1202 | 1203 | /*-----------------------------------*\ 1204 | #PRODUCT GRID 1205 | \*-----------------------------------*/ 1206 | 1207 | .product-main { margin-bottom: 30px; } 1208 | 1209 | .product-grid { 1210 | display: grid; 1211 | grid-template-columns: 1fr; 1212 | gap: 25px; 1213 | } 1214 | 1215 | .product-grid .showcase { 1216 | border: 1px solid var(--cultured); 1217 | border-radius: var(--border-radius-md); 1218 | overflow: hidden; 1219 | transition: var(--transition-timing); 1220 | } 1221 | 1222 | .product-grid .showcase:hover { box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); } 1223 | 1224 | .product-grid .showcase-banner { position: relative; } 1225 | 1226 | .product-grid .product-img { 1227 | width: 100%; 1228 | height: 100%; 1229 | object-fit: cover; 1230 | transition: var(--transition-timing); 1231 | } 1232 | 1233 | .product-grid .product-img.default { 1234 | position: relative; 1235 | z-index: 1; 1236 | } 1237 | 1238 | .product-grid .product-img.hover { 1239 | position: absolute; 1240 | top: 0; 1241 | left: 0; 1242 | z-index: 2; 1243 | opacity: 0; 1244 | } 1245 | 1246 | .product-grid .showcase:hover .product-img.hover { opacity: 1; } 1247 | 1248 | .product-grid .showcase:hover .product-img.default { opacity: 0; } 1249 | 1250 | .product-grid .showcase:hover .product-img { transform: scale(1.1); } 1251 | 1252 | .product-grid .showcase-badge { 1253 | position: absolute; 1254 | top: 15px; 1255 | left: 15px; 1256 | background: var(--ocean-green); 1257 | font-size: var(--fs-8); 1258 | font-weight: var(--weight-500); 1259 | color: var(--white); 1260 | padding: 0 8px; 1261 | border-radius: var(--border-radius-sm); 1262 | z-index: 3; 1263 | } 1264 | 1265 | .product-grid .showcase-badge.angle { 1266 | top: 8px; 1267 | left: -29px; 1268 | transform: rotate(-45deg); 1269 | text-transform: uppercase; 1270 | font-size: 11px; 1271 | padding: 5px 40px; 1272 | } 1273 | 1274 | .product-grid .showcase-badge.black { background: var(--eerie-black); } 1275 | 1276 | .product-grid .showcase-badge.pink { background: var(--salmon-pink); } 1277 | 1278 | .product-grid .showcase-actions { 1279 | position: absolute; 1280 | top: 10px; 1281 | right: 10px; 1282 | font-size: 20px; 1283 | transform: translateX(50px); 1284 | transition: var(--transition-timing); 1285 | z-index: 3; 1286 | } 1287 | 1288 | .product-grid .showcase:hover .showcase-actions { transform: translateX(0); } 1289 | 1290 | .product-grid .btn-action { 1291 | background: var(--white); 1292 | color: var(--sonic-silver); 1293 | margin-bottom: 5px; 1294 | border: 1px solid var(--cultured); 1295 | padding: 5px; 1296 | border-radius: var(--border-radius-sm); 1297 | transition: var(--transition-timing); 1298 | } 1299 | 1300 | .product-grid .btn-action:hover { 1301 | background: var(--eerie-black); 1302 | color: var(--white); 1303 | border-color: var(--eerie-black); 1304 | } 1305 | 1306 | .product-grid .showcase-content { padding: 15px 20px 0; } 1307 | 1308 | .product-grid .showcase-category { 1309 | color: var(--salmon-pink); 1310 | font-size: var(--fs-9); 1311 | font-weight: var(--weight-500); 1312 | text-transform: uppercase; 1313 | margin-bottom: 10px; 1314 | } 1315 | 1316 | .product-grid .showcase-title { 1317 | color: var(--sonic-silver); 1318 | font-size: var(--fs-8); 1319 | font-weight: var(--weight-300); 1320 | text-transform: capitalize; 1321 | letter-spacing: 1px; 1322 | margin-bottom: 10px; 1323 | transition: var(--transition-timing); 1324 | } 1325 | 1326 | .product-grid .showcase-title:hover { color: var(--eerie-black); } 1327 | 1328 | .product-grid .showcase-rating { 1329 | display: flex; 1330 | color: var(--sandy-brown); 1331 | margin-bottom: 10px; 1332 | } 1333 | 1334 | .product-grid .price-box { 1335 | display: flex; 1336 | gap: 10px; 1337 | font-size: var(--fs-7); 1338 | color: var(--eerie-black); 1339 | margin-bottom: 10px; 1340 | } 1341 | 1342 | .product-grid .price { font-weight: var(--weight-700); } 1343 | 1344 | .product-grid del { color: var(--sonic-silver); } 1345 | 1346 | 1347 | 1348 | 1349 | 1350 | /*-----------------------------------*\ 1351 | #TESTIMONIAL 1352 | \*-----------------------------------*/ 1353 | 1354 | .testimonials-box { margin-bottom: 50px; } 1355 | 1356 | .testimonial-card { 1357 | padding: 30px 20px; 1358 | border: 1px solid var(--cultured); 1359 | border-radius: var(--border-radius-md); 1360 | text-align: center; 1361 | margin-bottom: 25px; 1362 | } 1363 | 1364 | .testimonial-banner { 1365 | margin: auto; 1366 | margin-bottom: 20px; 1367 | border-radius: 50%; 1368 | } 1369 | 1370 | .testimonial-name { 1371 | font-weight: var(--weight-700); 1372 | text-transform: uppercase; 1373 | color: var(--sonic-silver); 1374 | margin-bottom: 5px; 1375 | } 1376 | 1377 | .testimonial-title { 1378 | color: var(--onyx); 1379 | font-size: var(--fs-7); 1380 | margin-bottom: 15px; 1381 | } 1382 | 1383 | .quotation-img { 1384 | margin: auto; 1385 | margin-bottom: 10px; 1386 | } 1387 | 1388 | .testimonial-desc { 1389 | max-width: 70%; 1390 | margin: auto; 1391 | color: var(--sonic-silver); 1392 | font-size: var(--fs-7); 1393 | } 1394 | 1395 | 1396 | 1397 | 1398 | 1399 | /*-----------------------------------*\ 1400 | #CTA 1401 | \*-----------------------------------*/ 1402 | 1403 | .cta-container { 1404 | position: relative; 1405 | aspect-ratio: 5 / 6; 1406 | border-radius: var(--border-radius-md); 1407 | overflow: hidden; 1408 | margin-bottom: 25px; 1409 | } 1410 | 1411 | .cta-banner { 1412 | width: 100%; 1413 | height: 100%; 1414 | object-fit: cover; 1415 | } 1416 | 1417 | .cta-content { 1418 | background: hsla(0, 0%, 100%, 0.7); 1419 | position: absolute; 1420 | top: 50%; 1421 | left: 50%; 1422 | transform: translate(-50%, -50%); 1423 | width: fit-content; 1424 | padding: 15px 20px; 1425 | text-align: center; 1426 | border-radius: var(--border-radius-sm); 1427 | } 1428 | 1429 | .cta-content .discount { 1430 | background: var(--eerie-black); 1431 | color: var(--white); 1432 | font-size: var(--fs-11); 1433 | font-weight: var(--weight-600); 1434 | text-transform: uppercase; 1435 | width: max-content; 1436 | margin: auto; 1437 | padding: 0 5px; 1438 | border-radius: var(--border-radius-sm); 1439 | margin-bottom: 5px; 1440 | } 1441 | 1442 | .cta-title { 1443 | color: var(--onyx); 1444 | font-size: var(--fs-5); 1445 | text-transform: capitalize; 1446 | margin-bottom: 5px; 1447 | } 1448 | 1449 | .cta-text { 1450 | color: var(--sonic-silver); 1451 | font-size: var(--fs-7); 1452 | margin-bottom: 5px; 1453 | } 1454 | 1455 | .cta-btn { 1456 | font-size: var(--fs-9); 1457 | color: var(--sonic-silver); 1458 | text-transform: uppercase; 1459 | font-weight: var(--weight-700); 1460 | margin: auto; 1461 | } 1462 | 1463 | 1464 | 1465 | 1466 | 1467 | /*-----------------------------------*\ 1468 | #SERVICE 1469 | \*-----------------------------------*/ 1470 | 1471 | .service-container { 1472 | display: flex; 1473 | justify-content: center; 1474 | align-items: center; 1475 | flex-wrap: wrap; 1476 | gap: 30px; 1477 | padding: 30px 15px; 1478 | border: 1px solid var(--cultured); 1479 | border-radius: var(--border-radius-md); 1480 | } 1481 | 1482 | .service-item { 1483 | min-width: 190px; 1484 | display: flex; 1485 | align-items: center; 1486 | gap: 15px; 1487 | } 1488 | 1489 | .service-icon { 1490 | font-size: 35px; 1491 | color: var(--salmon-pink); 1492 | transition: var(--transition-timing); 1493 | } 1494 | 1495 | .service-icon ion-icon { --ionicon-stroke-width: 25px; } 1496 | 1497 | .service-item:hover .service-icon { color: var(--eerie-black); } 1498 | 1499 | .service-title { 1500 | color: var(--sonic-silver); 1501 | font-size: var(--fs-7); 1502 | font-weight: var(--weight-600); 1503 | text-transform: capitalize; 1504 | margin-bottom: 5px; 1505 | } 1506 | 1507 | .service-desc { 1508 | color: var(--sonic-silver); 1509 | font-size: var(--fs-9); 1510 | } 1511 | 1512 | 1513 | 1514 | 1515 | 1516 | /*-----------------------------------*\ 1517 | #BLOG 1518 | \*-----------------------------------*/ 1519 | 1520 | .blog { margin-bottom: 30px; } 1521 | 1522 | .blog-container { 1523 | display: flex; 1524 | align-items: flex-start; 1525 | gap: 15px; 1526 | overflow-x: auto; 1527 | overscroll-behavior-inline: contain; 1528 | scroll-snap-type: inline mandatory; 1529 | } 1530 | 1531 | .blog-card { 1532 | min-width: 100%; 1533 | scroll-snap-align: start; 1534 | } 1535 | 1536 | .blog-banner { 1537 | width: 100%; 1538 | border-radius: var(--border-radius-md); 1539 | margin-bottom: 20px; 1540 | } 1541 | 1542 | .blog-category { 1543 | width: max-content; 1544 | color: var(--salmon-pink); 1545 | font-size: var(--fs-8); 1546 | } 1547 | 1548 | .blog-title { 1549 | color: var(--eerie-black); 1550 | font-size: var(--fs-5); 1551 | font-weight: var(--weight-600); 1552 | line-height: 1.4; 1553 | margin-bottom: 5px; 1554 | transition: var(--transition-timing); 1555 | } 1556 | 1557 | .blog-title:hover { color: var(--salmon-pink); } 1558 | 1559 | .blog-meta { 1560 | color: var(--sonic-silver); 1561 | font-size: var(--fs-7); 1562 | } 1563 | 1564 | .blog-meta cite { 1565 | font-style: normal; 1566 | color: var(--davys-gray); 1567 | } 1568 | 1569 | 1570 | 1571 | 1572 | 1573 | /*-----------------------------------*\ 1574 | #FOOTER 1575 | \*-----------------------------------*/ 1576 | 1577 | footer { 1578 | background: var(--eerie-black); 1579 | padding: 30px 0; 1580 | } 1581 | 1582 | .footer-category { 1583 | margin-bottom: 30px; 1584 | padding-bottom: 15px; 1585 | border-bottom: 1px solid var(--onyx); 1586 | } 1587 | 1588 | .footer-category-title { 1589 | color: var(--salmon-pink); 1590 | font-size: var(--fs-6); 1591 | font-weight: var(--weight-600); 1592 | text-transform: uppercase; 1593 | margin-bottom: 15px; 1594 | } 1595 | 1596 | .footer-category-box { 1597 | display: flex; 1598 | flex-wrap: wrap; 1599 | justify-content: flex-start; 1600 | align-items: center; 1601 | column-gap: 20px; 1602 | row-gap: 3px; 1603 | margin-bottom: 15px; 1604 | } 1605 | 1606 | .category-box-title { 1607 | color: var(--spanish-gray); 1608 | font-size: var(--fs-8); 1609 | font-weight: var(--weight-600); 1610 | text-transform: uppercase; 1611 | } 1612 | 1613 | .footer-category-link { 1614 | position: relative; 1615 | color: var(--sonic-silver); 1616 | font-size: var(--fs-7); 1617 | text-transform: capitalize; 1618 | transition: var(--transition-timing); 1619 | } 1620 | 1621 | .footer-category-link:hover { color: var(--spanish-gray); } 1622 | 1623 | .footer-category-link:not(:last-child)::after { 1624 | position: absolute; 1625 | content: ''; 1626 | top: 3px; 1627 | right: -10px; 1628 | background: var(--sonic-silver); 1629 | width: 1px; 1630 | height: 15px; 1631 | } 1632 | 1633 | 1634 | /** 1635 | * footer nav 1636 | */ 1637 | 1638 | .footer-nav { 1639 | border-bottom: 1px solid var(--onyx); 1640 | padding-bottom: 30px; 1641 | margin-bottom: 30px; 1642 | } 1643 | 1644 | .footer-nav-list:not(:last-child) { margin-bottom: 20px; } 1645 | 1646 | .footer-nav .nav-title { 1647 | position: relative; 1648 | color: var(--white); 1649 | font-size: var(--fs-7); 1650 | text-transform: uppercase; 1651 | margin-bottom: 15px; 1652 | padding-bottom: 5px; 1653 | } 1654 | 1655 | .footer-nav .nav-title::before { 1656 | content: ''; 1657 | position: absolute; 1658 | bottom: 0; 1659 | left: 0; 1660 | background: var(--salmon-pink); 1661 | width: 60px; 1662 | height: 1px; 1663 | } 1664 | 1665 | .footer-nav-item { padding: 3px 0; } 1666 | 1667 | .footer-nav-link, 1668 | .footer-nav-item .content { 1669 | width: max-content; 1670 | color: var(--sonic-silver); 1671 | font-size: var(--fs-7); 1672 | text-transform: capitalize; 1673 | transition: var(--transition-timing); 1674 | } 1675 | 1676 | .footer-nav-link:hover { color: var(--salmon-pink); } 1677 | 1678 | .footer-nav-item.flex { 1679 | display: flex; 1680 | align-items: flex-start; 1681 | gap: 10px; 1682 | } 1683 | 1684 | .footer-nav-item .content { 1685 | font-style: normal; 1686 | margin-bottom: 5px; 1687 | } 1688 | 1689 | .footer-nav-item .icon-box { 1690 | color: var(--sonic-silver); 1691 | font-size: 25px; 1692 | } 1693 | 1694 | .footer-nav-item .icon-box ion-icon { --ionicon-stroke-width: 30px; } 1695 | 1696 | .footer-nav .social-link { 1697 | display: flex; 1698 | justify-content: flex-start; 1699 | align-items: center; 1700 | gap: 10px; 1701 | } 1702 | 1703 | .social-link .footer-nav-link { font-size: 25px; } 1704 | 1705 | .footer-bottom { 1706 | margin-bottom: 50px; 1707 | text-align: center; 1708 | } 1709 | 1710 | .payment-img { 1711 | max-width: 335px; 1712 | width: 100%; 1713 | margin: auto; 1714 | margin-bottom: 15px; 1715 | } 1716 | 1717 | .copyright { 1718 | color: var(--sonic-silver); 1719 | font-size: var(--fs-8); 1720 | font-weight: var(--weight-500); 1721 | text-transform: capitalize; 1722 | letter-spacing: 1.2px; 1723 | } 1724 | 1725 | .copyright a { 1726 | display: inline; 1727 | color: inherit; 1728 | } 1729 | 1730 | 1731 | 1732 | 1733 | 1734 | /*-----------------------------------*\ 1735 | #RESPONSIVE 1736 | \*-----------------------------------*/ 1737 | 1738 | 1739 | /** 1740 | * responsive larger than 480px screen 1741 | */ 1742 | 1743 | @media (min-width: 480px) { 1744 | 1745 | /** 1746 | * #CUSTOM PROPERTY 1747 | */ 1748 | 1749 | :root { 1750 | 1751 | /** 1752 | * typography 1753 | */ 1754 | 1755 | --fs-1: 1.875rem; 1756 | 1757 | } 1758 | 1759 | 1760 | 1761 | /** 1762 | * #HEADER 1763 | */ 1764 | 1765 | .header-top { 1766 | display: block; 1767 | padding: 10px 0; 1768 | border-bottom: 1px solid var(--cultured); 1769 | } 1770 | 1771 | .header-social-container, 1772 | .header-top-actions { display: none; } 1773 | 1774 | .header-alert-news { 1775 | color: var(--sonic-silver); 1776 | font-size: var(--fs-9); 1777 | text-transform: uppercase; 1778 | } 1779 | 1780 | .header-alert-news b { font-weight: var(--weight-500); } 1781 | 1782 | .header-main { padding: 25px 0; } 1783 | 1784 | .mobile-bottom-navigation { 1785 | border-top-left-radius: var(--border-radius-md); 1786 | border-top-right-radius: var(--border-radius-md); 1787 | } 1788 | 1789 | 1790 | 1791 | /** 1792 | * #BANNER 1793 | */ 1794 | 1795 | .slider-item { aspect-ratio: 5 / 3; } 1796 | 1797 | .banner-content { 1798 | top: 50%; 1799 | right: auto; 1800 | bottom: auto; 1801 | transform: translateY(-50%); 1802 | max-width: 320px; 1803 | } 1804 | 1805 | .banner-subtitle { --fs-7: 1rem; } 1806 | 1807 | .banner-text { 1808 | display: block; 1809 | color: var(--sonic-silver); 1810 | font-size: var(--fs-7); 1811 | font-weight: var(--weight-500); 1812 | margin-bottom: 10px; 1813 | } 1814 | 1815 | .banner-text b { font-size: var(--fs-2); } 1816 | 1817 | .banner-btn { padding: 7px 20px; } 1818 | 1819 | 1820 | 1821 | /** 1822 | * #PRODUCT 1823 | */ 1824 | 1825 | .product-grid { 1826 | grid-template-columns: 1fr 1fr; 1827 | gap: 30px; 1828 | } 1829 | 1830 | 1831 | 1832 | /** 1833 | * #CTA 1834 | */ 1835 | 1836 | .cta-content { padding: 40px; } 1837 | 1838 | .cta-content .discount { 1839 | --fs-11: 0.875rem; 1840 | padding: 5px 10px; 1841 | } 1842 | 1843 | .cta-title { --fs-5: 1.5rem; } 1844 | 1845 | .cta-text { --fs-7: 1rem; } 1846 | 1847 | .cta-btn { --fs-9: 1rem; } 1848 | 1849 | 1850 | 1851 | /** 1852 | * #FOOTER 1853 | */ 1854 | 1855 | .copyright { --fs-8: 0.875rem; } 1856 | 1857 | } 1858 | 1859 | 1860 | 1861 | 1862 | 1863 | /** 1864 | * responsive larger than 570px screen 1865 | */ 1866 | 1867 | @media (min-width: 570px) { 1868 | 1869 | /** 1870 | * #HEADER 1871 | */ 1872 | 1873 | .header-top .container, 1874 | .header-main .container { 1875 | display: flex; 1876 | justify-content: space-between; 1877 | align-items: center; 1878 | } 1879 | 1880 | .header-logo { margin-bottom: 0; } 1881 | 1882 | .header-top-actions { 1883 | display: flex; 1884 | align-items: center; 1885 | gap: 10px; 1886 | } 1887 | 1888 | .header-top-actions select { 1889 | border: none; 1890 | display: block; 1891 | min-width: 80px; 1892 | padding: 5px 0; 1893 | font: inherit; 1894 | color: var(--sonic-silver); 1895 | font-size: var(--fs-8); 1896 | text-transform: uppercase; 1897 | cursor: pointer; 1898 | transition: var(--transition-timing); 1899 | } 1900 | 1901 | .header-top-actions select:hover { color: var(--eerie-black); } 1902 | 1903 | .header-search-container { min-width: 300px; } 1904 | 1905 | 1906 | 1907 | /** 1908 | * #BANNER 1909 | */ 1910 | 1911 | .slider-item { aspect-ratio: 4 / 2; } 1912 | 1913 | .banner-content { background: none; } 1914 | 1915 | 1916 | 1917 | /** 1918 | * #CATEGORY 1919 | */ 1920 | 1921 | .category-item-container { gap: 30px; } 1922 | 1923 | .category-item { min-width: calc(50% - 15px); } 1924 | 1925 | 1926 | 1927 | /** 1928 | * #PRODUCT 1929 | */ 1930 | 1931 | .product-minimal .showcase-container { min-width: 50%; } 1932 | 1933 | .product-featured .showcase-img { 1934 | max-width: 450px; 1935 | margin: auto; 1936 | } 1937 | 1938 | .product-featured .countdown { gap: 20px; } 1939 | 1940 | 1941 | 1942 | /** 1943 | * #CTA 1944 | */ 1945 | 1946 | .cta-container { aspect-ratio: 6 / 5; } 1947 | 1948 | 1949 | 1950 | /** 1951 | * #BLOG 1952 | */ 1953 | 1954 | .blog-container { gap: 30px; } 1955 | 1956 | .blog-card { min-width: calc(50% - 15px); } 1957 | 1958 | } 1959 | 1960 | 1961 | 1962 | 1963 | 1964 | /** 1965 | * responsive larger than 768px screen 1966 | */ 1967 | 1968 | @media (min-width: 768px) { 1969 | 1970 | /** 1971 | * #CUSTOM PROPERTY 1972 | */ 1973 | 1974 | :root { 1975 | 1976 | /** 1977 | * typography 1978 | */ 1979 | 1980 | --fs-1: 2.375rem; 1981 | 1982 | } 1983 | 1984 | 1985 | 1986 | /** 1987 | * #BASE 1988 | */ 1989 | 1990 | html { font-size: 17px; } 1991 | 1992 | 1993 | 1994 | /** 1995 | * #REUSED STYLE 1996 | */ 1997 | 1998 | .container { 1999 | max-width: 750px; 2000 | margin: auto; 2001 | } 2002 | 2003 | 2004 | 2005 | /** 2006 | * #MODAL 2007 | */ 2008 | 2009 | .modal-content { 2010 | display: flex; 2011 | align-items: center; 2012 | max-width: 750px; 2013 | width: fit-content; 2014 | } 2015 | 2016 | .newsletter-img { display: block; } 2017 | 2018 | .newsletter { text-align: left; } 2019 | 2020 | 2021 | 2022 | /** 2023 | * #HEADER 2024 | */ 2025 | 2026 | .header-main .container { gap: 80px; } 2027 | 2028 | .header-search-container { flex-grow: 1; } 2029 | 2030 | 2031 | 2032 | /** 2033 | * #BANNER 2034 | */ 2035 | 2036 | .slider-item { 2037 | aspect-ratio: auto; 2038 | height: 350px; 2039 | } 2040 | 2041 | .banner-content { max-width: 380px; } 2042 | 2043 | .banner-subtitle { --fs-7: 1.25rem; } 2044 | 2045 | .banner-text { --fs-7: 1.125rem; } 2046 | 2047 | .banner-text b { --fs-2: 1.875rem; } 2048 | 2049 | .banner-btn { --fs-11: 0.75rem; } 2050 | 2051 | 2052 | 2053 | /** 2054 | * #CATEGORY 2055 | */ 2056 | 2057 | .category-img-box { padding: 20px; } 2058 | 2059 | 2060 | 2061 | /** 2062 | * #PRODUCT 2063 | */ 2064 | 2065 | .product-minimal { 2066 | display: flex; 2067 | flex-wrap: wrap; 2068 | justify-content: center; 2069 | gap: 20px; 2070 | } 2071 | 2072 | .product-minimal .product-showcase { 2073 | min-width: calc(50% - 10px); 2074 | width: calc(50% - 10px); 2075 | } 2076 | 2077 | .product-minimal .showcase-container { min-width: 100%; } 2078 | 2079 | .product-featured .showcase { 2080 | display: flex; 2081 | justify-content: center; 2082 | align-items: center; 2083 | gap: 20px; 2084 | } 2085 | 2086 | .product-featured .showcase-img { max-width: fit-content; } 2087 | 2088 | .product-featured .showcase-content { 2089 | margin-top: 0; 2090 | min-width: calc(100% - 345px); 2091 | } 2092 | 2093 | 2094 | 2095 | /** 2096 | * #FOOTER 2097 | */ 2098 | 2099 | .footer-nav .container { 2100 | display: flex; 2101 | flex-wrap: wrap; 2102 | row-gap: 50px; 2103 | column-gap: 20px; 2104 | } 2105 | 2106 | .footer-nav-list { 2107 | min-width: calc(33.33% - 15px); 2108 | width: calc(33.33% - 15px); 2109 | flex-grow: 1; 2110 | } 2111 | 2112 | .footer-nav-list:not(:last-child) { margin-bottom: 0; } 2113 | 2114 | } 2115 | 2116 | 2117 | 2118 | 2119 | 2120 | /** 2121 | * responsive larger than 1024px screen 2122 | */ 2123 | 2124 | @media (min-width: 1024px) { 2125 | 2126 | /** 2127 | * #CUSTOM PROPERTY 2128 | */ 2129 | 2130 | :root { 2131 | 2132 | /** 2133 | * typography 2134 | */ 2135 | 2136 | --fs-1: 2.625rem; 2137 | --fs-2: 1.125rem; 2138 | 2139 | } 2140 | 2141 | 2142 | 2143 | /** 2144 | * #REUSED STYLE 2145 | */ 2146 | 2147 | .container { max-width: 980px; } 2148 | 2149 | 2150 | 2151 | /** 2152 | * #NOTIFICATION TOAST 2153 | */ 2154 | 2155 | .notification-toast { bottom: 30px; } 2156 | 2157 | 2158 | 2159 | /** 2160 | * #HEADER 2161 | */ 2162 | 2163 | .header-social-container { 2164 | display: flex; 2165 | align-items: center; 2166 | gap: 5px; 2167 | } 2168 | 2169 | .header-social-container .social-link { 2170 | padding: 5px; 2171 | background: hsl(0, 0%, 95%); 2172 | border-radius: var(--border-radius-sm); 2173 | color: var(--sonic-silver); 2174 | transition: var(--transition-timing); 2175 | } 2176 | 2177 | .header-social-container .social-link:hover { 2178 | background: var(--salmon-pink); 2179 | color: var(--white); 2180 | } 2181 | 2182 | .header-user-actions { 2183 | display: flex; 2184 | align-items: center; 2185 | gap: 15px; 2186 | } 2187 | 2188 | .header-user-actions .action-btn { 2189 | position: relative; 2190 | font-size: 35px; 2191 | color: var(--onyx); 2192 | padding: 5px; 2193 | } 2194 | 2195 | .header-user-actions .count { 2196 | position: absolute; 2197 | top: -2px; 2198 | right: -3px; 2199 | background: var(--bittersweet); 2200 | color: var(--white); 2201 | font-size: 12px; 2202 | font-weight: var(--weight-500); 2203 | line-height: 1; 2204 | padding: 2px 4px; 2205 | border-radius: 20px; 2206 | } 2207 | 2208 | .desktop-navigation-menu { display: block; } 2209 | 2210 | .desktop-menu-category-list { 2211 | position: relative; 2212 | display: flex; 2213 | justify-content: center; 2214 | align-items: center; 2215 | gap: 30px; 2216 | } 2217 | 2218 | .desktop-menu-category-list .menu-category:not(:nth-child(2)) { position: relative; } 2219 | 2220 | .desktop-menu-category-list .menu-category > .menu-title { 2221 | position: relative; 2222 | color: var(--onyx); 2223 | font-size: var(--fs-7); 2224 | font-weight: var(--weight-600); 2225 | text-transform: uppercase; 2226 | padding: 15px 0; 2227 | transition: var(--transition-timing); 2228 | } 2229 | 2230 | .desktop-menu-category-list .menu-category > .menu-title:hover { color: var(--salmon-pink); } 2231 | 2232 | .desktop-menu-category-list .menu-category > .menu-title::after { 2233 | content: ''; 2234 | position: absolute; 2235 | bottom: 0; 2236 | left: 0; 2237 | width: 100%; 2238 | height: 2px; 2239 | background: var(--salmon-pink); 2240 | transform: scaleX(0); 2241 | transform-origin: left; 2242 | transition: var(--transition-timing); 2243 | } 2244 | 2245 | .desktop-menu-category-list .menu-category > .menu-title:hover::after { transform: scaleX(1); } 2246 | 2247 | .dropdown-panel { 2248 | position: absolute; 2249 | top: 100%; 2250 | left: 0; 2251 | background: var(--white); 2252 | width: 100%; 2253 | display: grid; 2254 | grid-template-columns: repeat(4, 1fr); 2255 | gap: 30px; 2256 | padding: 30px; 2257 | border: 1px solid var(--cultured); 2258 | box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.1); 2259 | border-radius: var(--border-radius-md); 2260 | transform: translateY(50px); 2261 | opacity: 0; 2262 | visibility: hidden; 2263 | pointer-events: none; 2264 | transition: var(--transition-timing); 2265 | z-index: 5; 2266 | } 2267 | 2268 | .desktop-menu-category-list .menu-category:hover > .dropdown-panel { 2269 | transform: translateY(0); 2270 | opacity: 1; 2271 | visibility: visible; 2272 | pointer-events: all; 2273 | } 2274 | 2275 | .dropdown-panel-list .menu-title a { 2276 | color: var(--onyx); 2277 | font-size: var(--fs-7); 2278 | font-weight: var(--weight-600); 2279 | padding-bottom: 10px; 2280 | border-bottom: 1px solid var(--cultured); 2281 | margin-bottom: 10px; 2282 | } 2283 | 2284 | .panel-list-item a { 2285 | color: var(--sonic-silver); 2286 | font-size: var(--fs-7); 2287 | text-transform: capitalize; 2288 | transition: var(--transition-timing); 2289 | } 2290 | 2291 | .panel-list-item a:hover { color: var(--salmon-pink); } 2292 | 2293 | .panel-list-item:not(:last-child) a { padding: 4px 0; } 2294 | 2295 | .panel-list-item:last-child { margin-top: 20px; } 2296 | 2297 | .panel-list-item img { 2298 | width: 100%; 2299 | height: auto; 2300 | border-radius: var(--border-radius-sm); 2301 | } 2302 | 2303 | .dropdown-list { 2304 | position: absolute; 2305 | top: 100%; 2306 | left: 0; 2307 | width: 200px; 2308 | background: var(--white); 2309 | padding: 20px 0; 2310 | border-radius: var(--border-radius-md); 2311 | border: 1px solid var(--cultured); 2312 | box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.1); 2313 | transform: translateY(50px); 2314 | opacity: 0; 2315 | visibility: hidden; 2316 | pointer-events: none; 2317 | transition: var(--transition-timing); 2318 | z-index: 5; 2319 | } 2320 | 2321 | .desktop-menu-category-list .menu-category:hover > .dropdown-list { 2322 | transform: translateY(0); 2323 | opacity: 1; 2324 | visibility: visible; 2325 | pointer-events: all; 2326 | } 2327 | 2328 | .dropdown-list .dropdown-item a { 2329 | color: var(--sonic-silver); 2330 | font-size: var(--fs-7); 2331 | text-transform: capitalize; 2332 | padding: 4px 20px; 2333 | transition: var(--transition-timing); 2334 | } 2335 | 2336 | .dropdown-list .dropdown-item a:hover { color: var(--salmon-pink); } 2337 | 2338 | .mobile-bottom-navigation { display: none; } 2339 | 2340 | 2341 | 2342 | /** 2343 | * #BANNER 2344 | */ 2345 | 2346 | .banner { margin-top: 0; } 2347 | 2348 | .slider-item { height: 380px; } 2349 | 2350 | .banner-content { 2351 | left: 75px; 2352 | max-width: 400px; 2353 | } 2354 | 2355 | .banner-subtitle { --fs-7: 1.625rem; } 2356 | 2357 | .banner-text { --fs-7: 1.375rem; } 2358 | 2359 | .banner-btn { --fs-11: 0.875rem; } 2360 | 2361 | 2362 | 2363 | /** 2364 | * #CATEGORY 2365 | */ 2366 | 2367 | .category-item { min-width: calc(33.33% - 20px); } 2368 | 2369 | .category-img-box { padding: 10px; } 2370 | 2371 | 2372 | 2373 | /** 2374 | * #PRODUCT 2375 | */ 2376 | 2377 | .product-container .container { 2378 | position: relative; 2379 | display: flex; 2380 | align-items: flex-start; 2381 | gap: 30px; 2382 | margin-bottom: 30px; 2383 | } 2384 | 2385 | .sidebar { 2386 | --fs-5: 0.941rem; 2387 | 2388 | position: sticky; 2389 | top: 30px; 2390 | left: 0; 2391 | padding: 0; 2392 | min-width: calc(25% - 15px); 2393 | margin-bottom: 30px; 2394 | visibility: visible; 2395 | overflow-y: auto; 2396 | overscroll-behavior: auto; 2397 | z-index: 0; 2398 | } 2399 | 2400 | .sidebar-category { 2401 | padding: 20px; 2402 | margin-bottom: 30px; 2403 | border: 1px solid var(--cultured); 2404 | border-radius: var(--border-radius-md); 2405 | } 2406 | 2407 | .sidebar-close-btn { display: none; } 2408 | 2409 | .product-box { min-width: calc(75% - 15px); } 2410 | 2411 | .product-minimal { margin-bottom: 20px; } 2412 | 2413 | .product-minimal .product-showcase { 2414 | min-width: calc(33.33% - 14px); 2415 | width: calc(33.33% - 14px); 2416 | flex-grow: 1; 2417 | } 2418 | 2419 | .product-minimal .showcase-wrapper { gap: 10px; } 2420 | 2421 | .product-minimal .showcase-container { padding: 2px; } 2422 | 2423 | .product-featured .countdown-content { padding: 5px 10px; } 2424 | 2425 | .product-grid { grid-template-columns: repeat(3, 1fr); } 2426 | 2427 | 2428 | 2429 | /** 2430 | * #TESTIMONIALS, CTA & SERVICE 2431 | */ 2432 | 2433 | .testimonials-box { 2434 | display: flex; 2435 | flex-wrap: wrap; 2436 | align-items: stretch; 2437 | gap: 30px; 2438 | } 2439 | 2440 | .testimonial-card { margin-bottom: 0; } 2441 | 2442 | .testimonial, .cta-container { 2443 | min-width: calc(50% - 15px); 2444 | width: calc(50% - 15px); 2445 | margin-bottom: 0; 2446 | } 2447 | 2448 | .service { width: 100%; } 2449 | 2450 | .service-container { gap: 0; } 2451 | 2452 | .service-item { 2453 | flex-direction: column; 2454 | text-align: center; 2455 | min-width: 20%; 2456 | } 2457 | 2458 | 2459 | 2460 | /** 2461 | * #BLOG 2462 | */ 2463 | 2464 | .blog-card { min-width: calc(33.33% - 20px); } 2465 | 2466 | .blog-title { --fs-5: 1rem; } 2467 | 2468 | 2469 | 2470 | /** 2471 | * #FOOTER 2472 | */ 2473 | 2474 | .footer-nav-list { 2475 | min-width: calc(20% - 16px); 2476 | width: calc(20% - 16px); 2477 | } 2478 | 2479 | .footer-nav-list:last-child { display: none; } 2480 | 2481 | .footer-bottom { margin-bottom: 0; } 2482 | 2483 | } 2484 | 2485 | 2486 | 2487 | 2488 | 2489 | /** 2490 | * responsive larger than 1200px screen 2491 | */ 2492 | 2493 | @media (min-width: 1200px) { 2494 | 2495 | /** 2496 | * #REUSED STYLE 2497 | */ 2498 | 2499 | .container { max-width: 1200px; } 2500 | 2501 | 2502 | 2503 | /** 2504 | * #HEADER 2505 | */ 2506 | 2507 | .desktop-menu-category-list { gap: 45px; } 2508 | 2509 | 2510 | 2511 | /** 2512 | * #BANNER 2513 | */ 2514 | 2515 | .slider-item:last-child .banner-img { object-position: top; } 2516 | 2517 | 2518 | 2519 | /** 2520 | * #CATEGORY 2521 | */ 2522 | 2523 | .category-item { min-width: calc(25% - 22.5px); } 2524 | 2525 | .category-item-title { --fs-9: 0.824rem; } 2526 | 2527 | 2528 | 2529 | /** 2530 | * #PRODUCT 2531 | */ 2532 | 2533 | .product-featured .showcase > div { min-width: calc(50% - 10px); } 2534 | 2535 | .product-featured .display-number { --fs-5: 1.125rem; } 2536 | 2537 | .product-grid { grid-template-columns: repeat(4, 1fr); } 2538 | 2539 | 2540 | 2541 | /** 2542 | * #TESTIMONIALS, CTA, SERVICE 2543 | */ 2544 | 2545 | .testimonial, .service { 2546 | min-width: calc(25% - 20px); 2547 | width: calc(25% - 20px); 2548 | } 2549 | 2550 | .cta-container { 2551 | min-width: calc(50% - 20px); 2552 | width: calc(50% - 20px); 2553 | aspect-ratio: unset; 2554 | } 2555 | 2556 | .service-container { 2557 | justify-content: flex-start; 2558 | gap: 16px; 2559 | padding: 30px; 2560 | } 2561 | 2562 | .service-item { 2563 | flex-direction: row; 2564 | text-align: left; 2565 | } 2566 | 2567 | 2568 | 2569 | /** 2570 | * #BLOG 2571 | */ 2572 | 2573 | .blog { margin-bottom: 50px; } 2574 | 2575 | .blog-card { min-width: calc(25% - 22.5px); } 2576 | 2577 | 2578 | 2579 | /** 2580 | * #FOOTER 2581 | */ 2582 | 2583 | footer { padding-top: 50px; } 2584 | 2585 | .footer-category { 2586 | margin-bottom: 50px; 2587 | padding-bottom: 35px; 2588 | } 2589 | 2590 | .footer-nav { padding-bottom: 50px; } 2591 | 2592 | } 2593 | 2594 | 2595 | 2596 | 2597 | 2598 | /** 2599 | * responsive larger than 1400px screen 2600 | */ 2601 | 2602 | @media (min-width: 1400px) { 2603 | 2604 | /** 2605 | * #BASE 2606 | */ 2607 | 2608 | html { font-size: 18px; } 2609 | 2610 | 2611 | 2612 | /** 2613 | * #REUSED STYLE 2614 | */ 2615 | 2616 | .container { max-width: 1350px; } 2617 | 2618 | 2619 | 2620 | /** 2621 | * #BANNER 2622 | */ 2623 | 2624 | .slider-item { height: 450px; } 2625 | 2626 | .banner-content { 2627 | left: 110px; 2628 | max-width: 460px; 2629 | } 2630 | 2631 | } -------------------------------------------------------------------------------- /assets/css/style-prefix.css: -------------------------------------------------------------------------------- 1 | /*-----------------------------------*\ 2 | #style.css 3 | \*-----------------------------------*/ 4 | 5 | /** 6 | * copyright 2022 @codewithsadee 7 | */ 8 | 9 | 10 | 11 | 12 | 13 | /*-----------------------------------*\ 14 | #CUSTOM PROPERTY 15 | \*-----------------------------------*/ 16 | 17 | :root { 18 | 19 | /** 20 | * colors 21 | */ 22 | 23 | --spanish-gray: hsl(0, 0%, 60%); 24 | --sonic-silver: hsl(0, 0%, 47%); 25 | --eerie-black: hsl(0, 0%, 13%); 26 | --salmon-pink: hsl(353, 100%, 78%); 27 | --sandy-brown: hsl(29, 90%, 65%); 28 | --bittersweet: hsl(0, 100%, 70%); 29 | --ocean-green: hsl(152, 51%, 52%); 30 | --davys-gray: hsl(0, 0%, 33%); 31 | --cultured: hsl(0, 0%, 93%); 32 | --white: hsl(0, 100%, 100%); 33 | --onyx: hsl(0, 0%, 27%); 34 | 35 | /** 36 | * typography 37 | */ 38 | 39 | --fs-1: 1.563rem; 40 | --fs-2: 1.375rem; 41 | --fs-3: 1.25rem; 42 | --fs-4: 1.125rem; 43 | --fs-5: 1rem; 44 | --fs-6: 0.938rem; 45 | --fs-7: 0.875rem; 46 | --fs-8: 0.813rem; 47 | --fs-9: 0.75rem; 48 | --fs-10: 0.688rem; 49 | --fs-11: 0.625rem; 50 | 51 | --weight-300: 300; 52 | --weight-400: 400; 53 | --weight-500: 500; 54 | --weight-600: 600; 55 | --weight-700: 700; 56 | 57 | /** 58 | * border-radius 59 | */ 60 | 61 | --border-radius-md: 10px; 62 | --border-radius-sm: 5px; 63 | 64 | /** 65 | * transition 66 | */ 67 | 68 | --transition-timing: 0.2s ease; 69 | 70 | } 71 | 72 | 73 | 74 | 75 | 76 | /*-----------------------------------*\ 77 | #RESET 78 | \*-----------------------------------*/ 79 | 80 | *, *::before, *::after { 81 | margin: 0; 82 | padding: 0; 83 | -webkit-box-sizing: border-box; 84 | box-sizing: border-box; 85 | } 86 | 87 | a { text-decoration: none; } 88 | 89 | li { list-style: none; } 90 | 91 | button { 92 | background: none; 93 | font: inherit; 94 | border: none; 95 | cursor: pointer; 96 | } 97 | 98 | img, ion-icon, button, a { display: block; } 99 | 100 | span { display: inline-block; } 101 | 102 | html { 103 | font-family: "Poppins", sans-serif; 104 | -ms-scroll-chaining: none; 105 | overscroll-behavior: contain; 106 | } 107 | 108 | input { 109 | display: block; 110 | width: 100%; 111 | font: inherit; 112 | } 113 | 114 | input::-webkit-input-placeholder { font: inherit; } 115 | 116 | input::-moz-placeholder { font: inherit; } 117 | 118 | input:-ms-input-placeholder { font: inherit; } 119 | 120 | input::-ms-input-placeholder { font: inherit; } 121 | 122 | input::placeholder { font: inherit; } 123 | 124 | body { background: var(--white); } 125 | 126 | /** 127 | * scrollbar style 128 | */ 129 | 130 | body::-webkit-scrollbar { width: 15px; } 131 | 132 | body::-webkit-scrollbar-track { 133 | background: var(--white); 134 | border-left: 1px solid var(--cultured); 135 | } 136 | 137 | body::-webkit-scrollbar-thumb { 138 | background: hsl(0, 0%, 80%); 139 | border: 3px solid var(--white); 140 | -webkit-border-radius: 10px; 141 | border-radius: 10px; 142 | } 143 | 144 | body::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 70%); } 145 | 146 | 147 | 148 | 149 | 150 | /*-----------------------------------*\ 151 | #REUSED STYLE 152 | \*-----------------------------------*/ 153 | 154 | .container { padding: 0 15px; } 155 | 156 | .has-scrollbar { padding-bottom: 5px; } 157 | 158 | .has-scrollbar::-webkit-scrollbar { 159 | width: 12px; /* for vertical scroll */ 160 | height: 12px; /* for horizontal scroll */ 161 | } 162 | 163 | .has-scrollbar::-webkit-scrollbar-thumb { 164 | background: transparent; 165 | border: 3px solid var(--white); 166 | -webkit-border-radius: 20px; 167 | border-radius: 20px; 168 | } 169 | 170 | .has-scrollbar:hover::-webkit-scrollbar-thumb { background: hsl(0, 0%, 90%); } 171 | 172 | .has-scrollbar::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 80%); } 173 | 174 | .title { 175 | color: var(--eerie-black); 176 | font-size: var(--fs-5); 177 | font-weight: var(--weight-600); 178 | letter-spacing: 0.4px; 179 | text-transform: capitalize; 180 | padding-bottom: 10px; 181 | border-bottom: 1px solid var(--cultured); 182 | margin-bottom: 30px; 183 | } 184 | 185 | 186 | 187 | 188 | 189 | /*-----------------------------------*\ 190 | #MAIN 191 | \*-----------------------------------*/ 192 | 193 | /** 194 | * overlay 195 | */ 196 | 197 | .overlay { 198 | position: fixed; 199 | top: 0; 200 | left: 0; 201 | width: 100%; 202 | height: 100vh; 203 | background: hsla(0, 0%, 0%, 0.5); 204 | opacity: 0; 205 | pointer-events: none; 206 | z-index: 15; 207 | -webkit-transition: 0.5s ease; 208 | -o-transition: 0.5s ease; 209 | transition: 0.5s ease; 210 | } 211 | 212 | .overlay.active { 213 | opacity: 1; 214 | pointer-events: all; 215 | } 216 | 217 | 218 | 219 | /** 220 | * MODAL 221 | */ 222 | 223 | .modal { 224 | position: fixed; 225 | top: 0; 226 | left: 0; 227 | width: 100%; 228 | height: 100vh; 229 | background: hsla(0, 0%, 0%, 0.5); 230 | display: -webkit-box; 231 | display: -webkit-flex; 232 | display: -ms-flexbox; 233 | display: flex; 234 | -webkit-box-pack: center; 235 | -webkit-justify-content: center; 236 | -ms-flex-pack: center; 237 | justify-content: center; 238 | -webkit-box-align: center; 239 | -webkit-align-items: center; 240 | -ms-flex-align: center; 241 | align-items: center; 242 | opacity: 0; 243 | visibility: hidden; 244 | pointer-events: none; 245 | z-index: 10; 246 | -webkit-animation: popup 1s ease-in-out 5s forwards; 247 | animation: popup 1s ease-in-out 5s forwards; 248 | } 249 | 250 | @-webkit-keyframes popup { 251 | 252 | 0% { 253 | opacity: 0; 254 | visibility: hidden; 255 | pointer-events: none; 256 | } 257 | 258 | 100% { 259 | opacity: 1; 260 | visibility: visible; 261 | pointer-events: all; 262 | } 263 | 264 | } 265 | 266 | @keyframes popup { 267 | 268 | 0% { 269 | opacity: 0; 270 | visibility: hidden; 271 | pointer-events: none; 272 | } 273 | 274 | 100% { 275 | opacity: 1; 276 | visibility: visible; 277 | pointer-events: all; 278 | } 279 | 280 | } 281 | 282 | .modal.closed { display: none; } 283 | 284 | .modal-close-overlay { 285 | position: absolute; 286 | top: 0; 287 | left: 0; 288 | width: 100%; 289 | height: 100%; 290 | z-index: 1; 291 | } 292 | 293 | .newsletter-img { display: none; } 294 | 295 | .modal-content { 296 | position: relative; 297 | max-width: 350px; 298 | margin: 20px; 299 | background: var(--white); 300 | -webkit-border-radius: var(--border-radius-md); 301 | border-radius: var(--border-radius-md); 302 | overflow: hidden; 303 | z-index: 2; 304 | -webkit-animation: scaleUp 0.5s ease-in-out 5s forwards; 305 | animation: scaleUp 0.5s ease-in-out 5s forwards; 306 | } 307 | 308 | @-webkit-keyframes scaleUp { 309 | 310 | 0% { -webkit-transform: scale(0.9); transform: scale(0.9); } 311 | 100% { -webkit-transform: scale(1); transform: scale(1); } 312 | 313 | } 314 | 315 | @keyframes scaleUp { 316 | 317 | 0% { -webkit-transform: scale(0.9); transform: scale(0.9); } 318 | 100% { -webkit-transform: scale(1); transform: scale(1); } 319 | 320 | } 321 | 322 | .modal-close-btn { 323 | position: absolute; 324 | top: 15px; 325 | right: 15px; 326 | background: var(--salmon-pink); 327 | color: var(--white); 328 | font-size: 16px; 329 | padding: 5px; 330 | -webkit-border-radius: var(--border-radius-sm); 331 | border-radius: var(--border-radius-sm); 332 | } 333 | 334 | .modal-close-btn:hover { opacity: 0.9; } 335 | 336 | .modal-close-btn ion-icon { --ionicon-stroke-width: 70px; } 337 | 338 | .newsletter { 339 | padding: 50px 30px; 340 | text-align: center; 341 | } 342 | 343 | .newsletter-header { margin-bottom: 20px; } 344 | 345 | .newsletter-title { 346 | color: var(--onyx); 347 | font-size: var(--fs-2); 348 | font-weight: var(--weight-600); 349 | margin-bottom: 10px; 350 | } 351 | 352 | .newsletter-desc { 353 | color: var(--sonic-silver); 354 | font-size: var(--fs-7); 355 | line-height: 1.6; 356 | } 357 | 358 | .email-field { 359 | font-size: var(--fs-7); 360 | padding: 8px 16px; 361 | -webkit-border-radius: var(--border-radius-sm); 362 | border-radius: var(--border-radius-sm); 363 | border: 1px solid var(--cultured); 364 | margin-bottom: 16px; 365 | } 366 | 367 | .btn-newsletter { 368 | background: var(--eerie-black); 369 | color: var(--white); 370 | font-size: var(--fs-7); 371 | font-weight: var(--weight-600); 372 | text-transform: uppercase; 373 | padding: 10px 15px; 374 | -webkit-border-radius: var(--border-radius-sm); 375 | border-radius: var(--border-radius-sm); 376 | margin: auto; 377 | -webkit-transition: var(--transition-timing); 378 | -o-transition: var(--transition-timing); 379 | transition: var(--transition-timing); 380 | } 381 | 382 | .btn-newsletter:hover { background: var(--salmon-pink); } 383 | 384 | 385 | 386 | 387 | 388 | /** 389 | * NOTIFICATION TOAST 390 | */ 391 | 392 | .notification-toast { 393 | position: fixed; 394 | bottom: 80px; 395 | left: 20px; 396 | right: 20px; 397 | background: var(--white); 398 | max-width: 300px; 399 | display: -webkit-box; 400 | display: -webkit-flex; 401 | display: -ms-flexbox; 402 | display: flex; 403 | -webkit-box-align: start; 404 | -webkit-align-items: flex-start; 405 | -ms-flex-align: start; 406 | align-items: flex-start; 407 | gap: 15px; 408 | padding: 15px; 409 | -webkit-border-radius: var(--border-radius-md); 410 | border-radius: var(--border-radius-md); 411 | -webkit-box-shadow: 0 5px 20px hsla(0, 0%, 0%, 0.15); 412 | box-shadow: 0 5px 20px hsla(0, 0%, 0%, 0.15); 413 | -webkit-transform: translateX(-webkit-calc(-100% - 40px)); 414 | -ms-transform: translateX(calc(-100% - 40px)); 415 | transform: translateX(calc(-100% - 40px)); 416 | -webkit-transition: 0.5s ease-in-out; 417 | -o-transition: 0.5s ease-in-out; 418 | transition: 0.5s ease-in-out; 419 | z-index: 5; 420 | -webkit-animation: slideInOut 10s ease-in-out infinite; 421 | animation: slideInOut 10s ease-in-out infinite; 422 | } 423 | 424 | @-webkit-keyframes slideInOut { 425 | 426 | 0%, 427 | 45%, 428 | 100% { 429 | -webkit-transform: translateX(-webkit-calc(-100% - 40px)); 430 | transform: translateX(calc(-100% - 40px)); 431 | opacity: 0; 432 | visibility: hidden; 433 | } 434 | 435 | 50%, 436 | 95% { 437 | -webkit-transform: translateX(0); 438 | transform: translateX(0); 439 | opacity: 1; 440 | visibility: visible; 441 | } 442 | 443 | } 444 | 445 | @keyframes slideInOut { 446 | 447 | 0%, 448 | 45%, 449 | 100% { 450 | -webkit-transform: translateX(-webkit-calc(-100% - 40px)); 451 | transform: translateX(calc(-100% - 40px)); 452 | opacity: 0; 453 | visibility: hidden; 454 | } 455 | 456 | 50%, 457 | 95% { 458 | -webkit-transform: translateX(0); 459 | transform: translateX(0); 460 | opacity: 1; 461 | visibility: visible; 462 | } 463 | 464 | } 465 | 466 | .notification-toast.closed { display: none; } 467 | 468 | .toast-close-btn { 469 | position: absolute; 470 | top: 10px; 471 | right: 10px; 472 | color: var(--sonic-silver); 473 | } 474 | 475 | .toast-close-btn ion-icon { --ionicon-stroke-width: 50px; } 476 | 477 | .toast-banner { 478 | width: 70px; 479 | height: 70px; 480 | border: 1px solid var(--cultured); 481 | -webkit-border-radius: var(--border-radius-sm); 482 | border-radius: var(--border-radius-sm); 483 | } 484 | 485 | .toast-banner img { 486 | width: 100%; 487 | height: 100%; 488 | -o-object-fit: contain; 489 | object-fit: contain; 490 | -o-object-position: center; 491 | object-position: center; 492 | } 493 | 494 | .toast-detail { 495 | width: -webkit-calc(100% - 85px); 496 | width: calc(100% - 85px); 497 | padding-right: 10px; 498 | } 499 | 500 | .toast-message { 501 | font-size: var(--fs-10); 502 | color: var(--sonic-silver); 503 | margin-bottom: 8px; 504 | } 505 | 506 | .toast-title { 507 | font-size: var(--fs-7); 508 | font-weight: var(--weight-500); 509 | color: var(--onyx); 510 | } 511 | 512 | .toast-meta { 513 | font-size: var(--fs-10); 514 | color: var(--sonic-silver); 515 | } 516 | 517 | 518 | 519 | 520 | 521 | /*-----------------------------------*\ 522 | #HEADER 523 | \*-----------------------------------*/ 524 | 525 | .header-top, 526 | .header-user-actions, 527 | .desktop-navigation-menu { display: none; } 528 | 529 | .header-main { 530 | padding: 20px 0; 531 | border-bottom: 1px solid var(--cultured); 532 | } 533 | 534 | .header-logo { margin-bottom: 20px; } 535 | 536 | .header-logo img { margin: auto; } 537 | 538 | .header-search-container { position: relative; } 539 | 540 | .header-search-container .search-field { 541 | font-size: var(--fs-7); 542 | color: var(--onyx); 543 | padding: 10px 15px; 544 | padding-right: 50px; 545 | border: 1px solid var(--cultured); 546 | -webkit-border-radius: var(--border-radius-md); 547 | border-radius: var(--border-radius-md); 548 | } 549 | 550 | .search-field::-webkit-search-cancel-button { display: none; } 551 | 552 | .search-btn { 553 | background: var(--white); 554 | position: absolute; 555 | top: 50%; 556 | right: 2px; 557 | -webkit-transform: translateY(-50%); 558 | -ms-transform: translateY(-50%); 559 | transform: translateY(-50%); 560 | color: var(--onyx); 561 | font-size: 18px; 562 | padding: 8px 15px; 563 | -webkit-border-radius: var(--border-radius-md); 564 | border-radius: var(--border-radius-md); 565 | -webkit-transition: color var(--transition-timing); 566 | -o-transition: color var(--transition-timing); 567 | transition: color var(--transition-timing); 568 | } 569 | 570 | .search-btn:hover { color: var(--salmon-pink); } 571 | 572 | .mobile-bottom-navigation { 573 | background: var(--white); 574 | position: fixed; 575 | bottom: 0; 576 | left: 50%; 577 | -webkit-transform: translateX(-50%); 578 | -ms-transform: translateX(-50%); 579 | transform: translateX(-50%); 580 | width: 100%; 581 | max-width: 500px; 582 | margin: auto; 583 | display: -webkit-box; 584 | display: -webkit-flex; 585 | display: -ms-flexbox; 586 | display: flex; 587 | -webkit-justify-content: space-around; 588 | -ms-flex-pack: distribute; 589 | justify-content: space-around; 590 | -webkit-box-align: center; 591 | -webkit-align-items: center; 592 | -ms-flex-align: center; 593 | align-items: center; 594 | padding: 5px 0; 595 | -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.25); 596 | box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.25); 597 | z-index: 5; 598 | } 599 | 600 | .mobile-bottom-navigation .action-btn { 601 | position: relative; 602 | font-size: 26px; 603 | color: var(--eerie-black); 604 | padding: 10px; 605 | } 606 | 607 | .mobile-bottom-navigation .count { 608 | background: var(--bittersweet); 609 | color: var(--white); 610 | position: absolute; 611 | top: 0; 612 | right: 0; 613 | font-size: 12px; 614 | font-weight: var(--weight-500); 615 | line-height: 1; 616 | padding: 2px 4px; 617 | -webkit-border-radius: 20px; 618 | border-radius: 20px; 619 | } 620 | 621 | .mobile-navigation-menu { 622 | background: var(--white); 623 | position: fixed; 624 | top: 0; 625 | left: -100%; 626 | width: 100%; 627 | max-width: 320px; 628 | height: 100vh; 629 | padding: 20px; 630 | -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); 631 | box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); 632 | overflow-y: scroll; 633 | -ms-scroll-chaining: none; 634 | overscroll-behavior: contain; 635 | visibility: hidden; 636 | -webkit-transition: 0.5s ease; 637 | -o-transition: 0.5s ease; 638 | transition: 0.5s ease; 639 | z-index: 20; 640 | } 641 | 642 | .mobile-navigation-menu.active { 643 | left: 0; 644 | visibility: visible; 645 | } 646 | 647 | .menu-top { 648 | padding-bottom: 15px; 649 | margin-bottom: 10px; 650 | display: -webkit-box; 651 | display: -webkit-flex; 652 | display: -ms-flexbox; 653 | display: flex; 654 | -webkit-box-pack: justify; 655 | -webkit-justify-content: space-between; 656 | -ms-flex-pack: justify; 657 | justify-content: space-between; 658 | -webkit-box-align: center; 659 | -webkit-align-items: center; 660 | -ms-flex-align: center; 661 | align-items: center; 662 | border-bottom: 2px solid var(--cultured); 663 | } 664 | 665 | .menu-top .menu-title { 666 | color: var(--salmon-pink); 667 | font-size: var(--fs-4); 668 | font-weight: var(--weight-600); 669 | } 670 | 671 | .menu-close-btn { 672 | color: var(--eerie-black); 673 | font-size: 22px; 674 | } 675 | 676 | .menu-close-btn ion-icon { --ionicon-stroke-width: 50px; } 677 | 678 | .mobile-menu-category-list { margin-bottom: 30px; } 679 | 680 | .menu-category .accordion-menu { 681 | width: 100%; 682 | display: -webkit-box; 683 | display: -webkit-flex; 684 | display: -ms-flexbox; 685 | display: flex; 686 | -webkit-box-pack: justify; 687 | -webkit-justify-content: space-between; 688 | -ms-flex-pack: justify; 689 | justify-content: space-between; 690 | -webkit-box-align: center; 691 | -webkit-align-items: center; 692 | -ms-flex-align: center; 693 | align-items: center; 694 | } 695 | 696 | .mobile-menu-category-list .menu-category { border-bottom: 1px solid var(--cultured); } 697 | 698 | .mobile-menu-category-list .menu-title { 699 | color: var(--onyx); 700 | font-size: var(--fs-6); 701 | font-weight: var(--weight-500); 702 | padding: 12px 0; 703 | } 704 | 705 | .accordion-menu > div { font-size: 14px; } 706 | 707 | .accordion-menu ion-icon { 708 | color: var(--onyx); 709 | --ionicon-stroke-width: 90px; 710 | } 711 | 712 | .accordion-menu.active .add-icon, 713 | .accordion-menu .remove-icon { display: none; } 714 | 715 | .accordion-menu .add-icon, 716 | .accordion-menu.active .remove-icon { display: block; } 717 | 718 | .menu-category .submenu-category-list { margin-left: 10px; } 719 | 720 | .submenu-title { 721 | padding: 6px 0; 722 | font-size: var(--fs-6); 723 | color: var(--sonic-silver); 724 | font-weight: var(--weight-300); 725 | } 726 | 727 | .submenu-title:hover { color: var(--davys-gray); } 728 | 729 | .submenu-category-list { 730 | max-height: 0; 731 | overflow: hidden; 732 | visibility: hidden; 733 | -webkit-transition: 0.5s ease-in-out; 734 | -o-transition: 0.5s ease-in-out; 735 | transition: 0.5s ease-in-out; 736 | } 737 | 738 | .submenu-category-list.active { 739 | max-height: 148px; 740 | visibility: visible; 741 | } 742 | 743 | .menu-bottom .menu-category-list { margin-bottom: 20px; } 744 | 745 | .menu-bottom .menu-category { border-bottom: none; } 746 | 747 | .menu-bottom .menu-title { 748 | font-size: var(--fs-6); 749 | font-weight: var(--weight-500); 750 | color: var(--eerie-black); 751 | padding: 12px 0; 752 | } 753 | 754 | .accordion-menu.active .caret-back { -webkit-transform: rotate(-0.25turn); -ms-transform: rotate(-0.25turn); transform: rotate(-0.25turn); } 755 | 756 | .menu-bottom .submenu-category-list { 757 | border: 1px solid var(--cultured); 758 | -webkit-border-radius: var(--border-radius-md); 759 | border-radius: var(--border-radius-md); 760 | padding: 0 15px; 761 | margin-left: 0; 762 | -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.05); 763 | box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.05); 764 | } 765 | 766 | .menu-bottom .submenu-category:not(:last-child) { border-bottom: 1px solid var(--cultured); } 767 | 768 | .menu-social-container { 769 | display: -webkit-box; 770 | display: -webkit-flex; 771 | display: -ms-flexbox; 772 | display: flex; 773 | -webkit-box-pack: center; 774 | -webkit-justify-content: center; 775 | -ms-flex-pack: center; 776 | justify-content: center; 777 | -webkit-box-align: center; 778 | -webkit-align-items: center; 779 | -ms-flex-align: center; 780 | align-items: center; 781 | gap: 10px; 782 | } 783 | 784 | .menu-social-container .social-link { 785 | background: var(--cultured); 786 | color: var(--eerie-black); 787 | font-size: 20px; 788 | padding: 10px; 789 | -webkit-border-radius: var(--border-radius-md); 790 | border-radius: var(--border-radius-md); 791 | } 792 | 793 | 794 | 795 | 796 | 797 | /*-----------------------------------*\ 798 | #BANNER 799 | \*-----------------------------------*/ 800 | 801 | .banner { margin: 30px 0; } 802 | 803 | .slider-container { 804 | display: -webkit-box; 805 | display: -webkit-flex; 806 | display: -ms-flexbox; 807 | display: flex; 808 | -webkit-box-align: center; 809 | -webkit-align-items: center; 810 | -ms-flex-align: center; 811 | align-items: center; 812 | gap: 10px; 813 | -webkit-border-radius: var(--border-radius-md); 814 | border-radius: var(--border-radius-md); 815 | overflow: auto hidden; 816 | -webkit-scroll-snap-type: inline mandatory; 817 | -ms-scroll-snap-type: inline mandatory; 818 | scroll-snap-type: inline mandatory; 819 | overscroll-behavior-inline: contain; 820 | } 821 | 822 | .slider-item { 823 | position: relative; 824 | min-width: 100%; 825 | max-height: 450px; 826 | aspect-ratio: 1 / 1; 827 | -webkit-border-radius: var(--border-radius-md); 828 | border-radius: var(--border-radius-md); 829 | overflow: hidden; 830 | scroll-snap-align: start; 831 | } 832 | 833 | .slider-item .banner-img { 834 | width: 100%; 835 | height: 100%; 836 | -o-object-fit: cover; 837 | object-fit: cover; 838 | -o-object-position: right; 839 | object-position: right; 840 | } 841 | 842 | .banner-content { 843 | background: hsla(0, 0%, 100%, 0.8); 844 | position: absolute; 845 | bottom: 25px; 846 | left: 25px; 847 | right: 25px; 848 | padding: 20px 25px; 849 | -webkit-border-radius: var(--border-radius-md); 850 | border-radius: var(--border-radius-md); 851 | } 852 | 853 | .banner-subtitle { 854 | color: var(--salmon-pink); 855 | font-size: var(--fs-7); 856 | font-weight: var(--weight-500); 857 | text-transform: capitalize; 858 | letter-spacing: 2px; 859 | margin-bottom: 10px; 860 | } 861 | 862 | .banner-title { 863 | color: var(--eerie-black); 864 | font-size: var(--fs-1); 865 | text-transform: uppercase; 866 | line-height: 1; 867 | margin-bottom: 10px; 868 | } 869 | 870 | .banner-text { display: none; } 871 | 872 | .banner-btn { 873 | background: var(--salmon-pink); 874 | color: var(--white); 875 | width: -webkit-max-content; 876 | width: -moz-max-content; 877 | width: max-content; 878 | font-size: var(--fs-11); 879 | font-weight: var(--weight-600); 880 | text-transform: uppercase; 881 | padding: 4px 10px; 882 | -webkit-border-radius: var(--border-radius-sm); 883 | border-radius: var(--border-radius-sm); 884 | -webkit-transition: var(--transition-timing); 885 | -o-transition: var(--transition-timing); 886 | transition: var(--transition-timing); 887 | } 888 | 889 | .banner-btn:hover { background: var(--eerie-black); } 890 | 891 | 892 | 893 | 894 | 895 | /*-----------------------------------*\ 896 | #CATEGORY 897 | \*-----------------------------------*/ 898 | 899 | .category { margin-bottom: 30px; } 900 | 901 | .category-item-container { 902 | display: -webkit-box; 903 | display: -webkit-flex; 904 | display: -ms-flexbox; 905 | display: flex; 906 | -webkit-box-align: center; 907 | -webkit-align-items: center; 908 | -ms-flex-align: center; 909 | align-items: center; 910 | gap: 10px; 911 | overflow: auto hidden; 912 | -webkit-scroll-snap-type: inline mandatory; 913 | -ms-scroll-snap-type: inline mandatory; 914 | scroll-snap-type: inline mandatory; 915 | overscroll-behavior-inline: contain; 916 | } 917 | 918 | .category-item { 919 | min-width: 100%; 920 | display: -webkit-box; 921 | display: -webkit-flex; 922 | display: -ms-flexbox; 923 | display: flex; 924 | -webkit-box-align: center; 925 | -webkit-align-items: center; 926 | -ms-flex-align: center; 927 | align-items: center; 928 | gap: 10px; 929 | padding: 15px; 930 | border: 1px solid var(--cultured); 931 | -webkit-border-radius: var(--border-radius-md); 932 | border-radius: var(--border-radius-md); 933 | scroll-snap-align: start; 934 | } 935 | 936 | .category-img-box { 937 | background: var(--cultured); 938 | border: 1px solid hsl(0, 0%, 80%); 939 | padding: 10px; 940 | -webkit-border-radius: var(--border-radius-sm); 941 | border-radius: var(--border-radius-sm); 942 | } 943 | 944 | .category-content-box { width: 100%; } 945 | 946 | .category-content-flex { 947 | display: -webkit-box; 948 | display: -webkit-flex; 949 | display: -ms-flexbox; 950 | display: flex; 951 | -webkit-box-pack: justify; 952 | -webkit-justify-content: space-between; 953 | -ms-flex-pack: justify; 954 | justify-content: space-between; 955 | -webkit-box-align: center; 956 | -webkit-align-items: center; 957 | -ms-flex-align: center; 958 | align-items: center; 959 | margin-bottom: 10px; 960 | } 961 | 962 | .category-item-title { 963 | color: var(--eerie-black); 964 | font-size: var(--fs-9); 965 | font-weight: var(--weight-600); 966 | text-transform: uppercase; 967 | } 968 | 969 | .category-item-amount { 970 | color: var(--sonic-silver); 971 | font-size: var(--fs-11); 972 | } 973 | 974 | .category-btn { 975 | color: var(--salmon-pink); 976 | font-size: var(--fs-9); 977 | font-weight: var(--weight-500); 978 | text-transform: capitalize; 979 | } 980 | 981 | 982 | 983 | 984 | 985 | /*-----------------------------------*\ 986 | #SIDEBAR 987 | \*-----------------------------------*/ 988 | 989 | .sidebar { 990 | background: var(--white); 991 | position: fixed; 992 | top: 0; 993 | left: -100%; 994 | bottom: 0; 995 | width: 100%; 996 | max-width: 320px; 997 | padding: 30px; 998 | overflow-y: scroll; 999 | -ms-scroll-chaining: none; 1000 | overscroll-behavior: contain; 1001 | visibility: hidden; 1002 | -webkit-transition: 0.5s ease; 1003 | -o-transition: 0.5s ease; 1004 | transition: 0.5s ease; 1005 | z-index: 20; 1006 | } 1007 | 1008 | .sidebar.active { 1009 | left: 0; 1010 | visibility: visible; 1011 | } 1012 | 1013 | .sidebar-category { 1014 | margin-bottom: 15px; 1015 | padding-bottom: 15px; 1016 | border-bottom: 1px solid var(--cultured); 1017 | } 1018 | 1019 | .sidebar-top { 1020 | display: -webkit-box; 1021 | display: -webkit-flex; 1022 | display: -ms-flexbox; 1023 | display: flex; 1024 | -webkit-box-pack: justify; 1025 | -webkit-justify-content: space-between; 1026 | -ms-flex-pack: justify; 1027 | justify-content: space-between; 1028 | -webkit-box-align: center; 1029 | -webkit-align-items: center; 1030 | -ms-flex-align: center; 1031 | align-items: center; 1032 | margin-bottom: 10px; 1033 | } 1034 | 1035 | .sidebar-title { 1036 | color: var(--onyx); 1037 | font-size: var(--fs-5); 1038 | text-transform: uppercase; 1039 | letter-spacing: 0.8px; 1040 | font-weight: var(--weight-600); 1041 | } 1042 | 1043 | .sidebar-close-btn { 1044 | color: var(--eerie-black); 1045 | font-size: 22px; 1046 | font-weight: var(--weight-600); 1047 | } 1048 | 1049 | .sidebar-close-btn ion-icon { --ionicon-stroke-width: 50px; } 1050 | 1051 | .sidebar-accordion-menu { 1052 | width: 100%; 1053 | display: -webkit-box; 1054 | display: -webkit-flex; 1055 | display: -ms-flexbox; 1056 | display: flex; 1057 | -webkit-box-pack: justify; 1058 | -webkit-justify-content: space-between; 1059 | -ms-flex-pack: justify; 1060 | justify-content: space-between; 1061 | -webkit-box-align: center; 1062 | -webkit-align-items: center; 1063 | -ms-flex-align: center; 1064 | align-items: center; 1065 | padding: 7px 0; 1066 | } 1067 | 1068 | .sidebar .menu-title-flex { 1069 | display: -webkit-box; 1070 | display: -webkit-flex; 1071 | display: -ms-flexbox; 1072 | display: flex; 1073 | -webkit-box-align: center; 1074 | -webkit-align-items: center; 1075 | -ms-flex-align: center; 1076 | align-items: center; 1077 | gap: 10px; 1078 | } 1079 | 1080 | .sidebar .menu-title { 1081 | font-size: var(--fs-5); 1082 | color: var(--sonic-silver); 1083 | font-weight: var(--weight-500); 1084 | } 1085 | 1086 | .sidebar-accordion-menu ion-icon { 1087 | color: var(--sonic-silver); 1088 | font-size: 14px; 1089 | --ionicon-stroke-width: 70px; 1090 | } 1091 | 1092 | .sidebar-submenu-category-list { 1093 | border-top: 1px solid var(--cultured); 1094 | max-height: 0; 1095 | overflow: hidden; 1096 | visibility: hidden; 1097 | -webkit-transition: 0.5s ease-in-out; 1098 | -o-transition: 0.5s ease-in-out; 1099 | transition: 0.5s ease-in-out; 1100 | } 1101 | 1102 | .sidebar-submenu-category-list.active { 1103 | padding: 13px 0 8px; 1104 | max-height: 122px; 1105 | visibility: visible; 1106 | } 1107 | 1108 | .sidebar-submenu-title { 1109 | display: -webkit-box; 1110 | display: -webkit-flex; 1111 | display: -ms-flexbox; 1112 | display: flex; 1113 | -webkit-box-pack: justify; 1114 | -webkit-justify-content: space-between; 1115 | -ms-flex-pack: justify; 1116 | justify-content: space-between; 1117 | -webkit-box-align: center; 1118 | -webkit-align-items: center; 1119 | -ms-flex-align: center; 1120 | align-items: center; 1121 | color: var(--sonic-silver); 1122 | font-size: var(--fs-7); 1123 | padding: 2px 0; 1124 | } 1125 | 1126 | .sidebar-submenu-title:hover { color: var(--eerie-black); } 1127 | 1128 | .sidebar .product-name { text-transform: capitalize; } 1129 | 1130 | .sidebar-accordion-menu.active .add-icon, 1131 | .sidebar-accordion-menu .remove-icon { display: none; } 1132 | 1133 | .sidebar-accordion-menu .add-icon, 1134 | .sidebar-accordion-menu.active .remove-icon { display: block; } 1135 | 1136 | .sidebar .showcase-heading { 1137 | font-size: var(--fs-5); 1138 | font-weight: var(--weight-600); 1139 | color: var(--onyx); 1140 | text-transform: uppercase; 1141 | letter-spacing: 0.8px; 1142 | margin-bottom: 15px; 1143 | } 1144 | 1145 | .sidebar .showcase { 1146 | display: -webkit-box; 1147 | display: -webkit-flex; 1148 | display: -ms-flexbox; 1149 | display: flex; 1150 | -webkit-box-align: center; 1151 | -webkit-align-items: center; 1152 | -ms-flex-align: center; 1153 | align-items: center; 1154 | gap: 15px; 1155 | } 1156 | 1157 | .sidebar .showcase:not(:last-child) { margin-bottom: 15px; } 1158 | 1159 | .sidebar .showcase-img { -webkit-border-radius: var(--border-radius-sm); border-radius: var(--border-radius-sm); } 1160 | 1161 | .sidebar .showcase-content { width: -webkit-calc(100% - 90px); width: calc(100% - 90px); } 1162 | 1163 | .sidebar .showcase-title { 1164 | color: var(--onyx); 1165 | font-size: var(--fs-7); 1166 | font-weight: var(--weight-400); 1167 | text-transform: capitalize; 1168 | overflow: hidden; 1169 | white-space: nowrap; 1170 | -o-text-overflow: ellipsis; 1171 | text-overflow: ellipsis; 1172 | letter-spacing: 0.5px; 1173 | } 1174 | 1175 | .sidebar .showcase-rating { 1176 | display: -webkit-box; 1177 | display: -webkit-flex; 1178 | display: -ms-flexbox; 1179 | display: flex; 1180 | -webkit-box-align: center; 1181 | -webkit-align-items: center; 1182 | -ms-flex-align: center; 1183 | align-items: center; 1184 | color: var(--sandy-brown); 1185 | font-size: 13px; 1186 | padding: 4px 0; 1187 | } 1188 | 1189 | .sidebar .price-box { 1190 | display: -webkit-box; 1191 | display: -webkit-flex; 1192 | display: -ms-flexbox; 1193 | display: flex; 1194 | -webkit-box-align: center; 1195 | -webkit-align-items: center; 1196 | -ms-flex-align: center; 1197 | align-items: center; 1198 | gap: 15px; 1199 | } 1200 | 1201 | .sidebar .price-box del { 1202 | color: var(--sonic-silver); 1203 | font-size: 13px; 1204 | } 1205 | 1206 | .sidebar .price-box .price { 1207 | font-size: var(--fs-7); 1208 | font-weight: var(--weight-600); 1209 | color: var(--davys-gray); 1210 | } 1211 | 1212 | 1213 | 1214 | 1215 | 1216 | /*-----------------------------------*\ 1217 | #PRODUCT MINIMAL 1218 | \*-----------------------------------*/ 1219 | 1220 | .product-minimal { margin-bottom: 30px; } 1221 | 1222 | .product-minimal .product-showcase { margin-bottom: 10px; } 1223 | 1224 | .product-minimal .showcase-wrapper { 1225 | display: -webkit-box; 1226 | display: -webkit-flex; 1227 | display: -ms-flexbox; 1228 | display: flex; 1229 | -webkit-box-align: center; 1230 | -webkit-align-items: center; 1231 | -ms-flex-align: center; 1232 | align-items: center; 1233 | overflow-x: auto; 1234 | overscroll-behavior-inline: contain; 1235 | -webkit-scroll-snap-type: inline mandatory; 1236 | -ms-scroll-snap-type: inline mandatory; 1237 | scroll-snap-type: inline mandatory; 1238 | } 1239 | 1240 | .product-minimal .showcase-container { 1241 | min-width: 100%; 1242 | padding: 0 5px; 1243 | scroll-snap-align: start; 1244 | } 1245 | 1246 | .product-minimal .showcase { 1247 | display: -webkit-box; 1248 | display: -webkit-flex; 1249 | display: -ms-flexbox; 1250 | display: flex; 1251 | -webkit-box-pack: start; 1252 | -webkit-justify-content: flex-start; 1253 | -ms-flex-pack: start; 1254 | justify-content: flex-start; 1255 | -webkit-box-align: center; 1256 | -webkit-align-items: center; 1257 | -ms-flex-align: center; 1258 | align-items: center; 1259 | gap: 15px; 1260 | border: 1px solid var(--cultured); 1261 | padding: 15px; 1262 | -webkit-border-radius: var(--border-radius-md); 1263 | border-radius: var(--border-radius-md); 1264 | } 1265 | 1266 | .product-minimal .showcase:not(:last-child) { margin-bottom: 15px; } 1267 | 1268 | .product-minimal .showcase-content { width: -webkit-calc(100% - 85px); width: calc(100% - 85px); } 1269 | 1270 | .product-minimal .showcase-title { 1271 | color: var(--eerie-black); 1272 | font-size: var(--fs-7); 1273 | font-weight: var(--weight-600); 1274 | text-transform: capitalize; 1275 | white-space: nowrap; 1276 | overflow: hidden; 1277 | -o-text-overflow: ellipsis; 1278 | text-overflow: ellipsis; 1279 | margin-bottom: 2px; 1280 | } 1281 | 1282 | .product-minimal .showcase-category { 1283 | width: -webkit-max-content; 1284 | width: -moz-max-content; 1285 | width: max-content; 1286 | color: var(--davys-gray); 1287 | font-size: var(--fs-8); 1288 | text-transform: capitalize; 1289 | margin-bottom: 3px; 1290 | } 1291 | 1292 | .product-minimal .showcase-category:hover { color: var(--salmon-pink); } 1293 | 1294 | .product-minimal .price-box { 1295 | display: -webkit-box; 1296 | display: -webkit-flex; 1297 | display: -ms-flexbox; 1298 | display: flex; 1299 | -webkit-box-align: center; 1300 | -webkit-align-items: center; 1301 | -ms-flex-align: center; 1302 | align-items: center; 1303 | gap: 10px; 1304 | } 1305 | 1306 | .product-minimal .price { 1307 | font-size: var(--fs-7); 1308 | font-weight: var(--weight-700); 1309 | color: var(--salmon-pink); 1310 | } 1311 | 1312 | .product-minimal .price-box del { 1313 | font-size: var(--fs-9); 1314 | color: var(--sonic-silver); 1315 | } 1316 | 1317 | 1318 | 1319 | 1320 | 1321 | /*-----------------------------------*\ 1322 | #PRODUCT FEATURED 1323 | \*-----------------------------------*/ 1324 | 1325 | .product-featured { margin-bottom: 30px; } 1326 | 1327 | .product-featured .showcase-wrapper { 1328 | display: -webkit-box; 1329 | display: -webkit-flex; 1330 | display: -ms-flexbox; 1331 | display: flex; 1332 | -webkit-box-align: center; 1333 | -webkit-align-items: center; 1334 | -ms-flex-align: center; 1335 | align-items: center; 1336 | gap: 20px; 1337 | overflow-x: auto; 1338 | overscroll-behavior-inline: contain; 1339 | -webkit-scroll-snap-type: inline mandatory; 1340 | -ms-scroll-snap-type: inline mandatory; 1341 | scroll-snap-type: inline mandatory; 1342 | } 1343 | 1344 | .product-featured .showcase-container { 1345 | min-width: 100%; 1346 | padding: 30px; 1347 | border: 1px solid var(--cultured); 1348 | -webkit-border-radius: var(--border-radius-md); 1349 | border-radius: var(--border-radius-md); 1350 | scroll-snap-align: start; 1351 | } 1352 | 1353 | .product-featured .showcase-img { 1354 | width: 100%; 1355 | height: 100%; 1356 | -o-object-fit: cover; 1357 | object-fit: cover; 1358 | } 1359 | 1360 | .product-featured .showcase-content { margin-top: 30px; } 1361 | 1362 | .product-featured .showcase-rating { 1363 | color: var(--sandy-brown); 1364 | display: -webkit-box; 1365 | display: -webkit-flex; 1366 | display: -ms-flexbox; 1367 | display: flex; 1368 | -webkit-box-align: center; 1369 | -webkit-align-items: center; 1370 | -ms-flex-align: center; 1371 | align-items: center; 1372 | font-size: 16px; 1373 | margin-bottom: 15px; 1374 | } 1375 | 1376 | .product-featured .showcase-title { 1377 | font-size: var(--fs-7); 1378 | color: var(--eerie-black); 1379 | overflow: hidden; 1380 | white-space: nowrap; 1381 | -o-text-overflow: ellipsis; 1382 | text-overflow: ellipsis; 1383 | text-transform: uppercase; 1384 | margin-bottom: 3px; 1385 | } 1386 | 1387 | .product-featured .showcase-desc { 1388 | color: var(--sonic-silver); 1389 | font-size: var(--fs-7); 1390 | font-weight: var(--weight-300); 1391 | margin-bottom: 10px; 1392 | } 1393 | 1394 | .product-featured .price-box { 1395 | font-size: var(--fs-3); 1396 | display: -webkit-box; 1397 | display: -webkit-flex; 1398 | display: -ms-flexbox; 1399 | display: flex; 1400 | gap: 10px; 1401 | margin-bottom: 10px; 1402 | } 1403 | 1404 | .product-featured .price { 1405 | color: var(--salmon-pink); 1406 | font-weight: var(--weight-700); 1407 | } 1408 | 1409 | .product-featured del { 1410 | color: var(--sonic-silver); 1411 | font-weight: var(--weight-300); 1412 | } 1413 | 1414 | .product-featured .add-cart-btn { 1415 | background: var(--salmon-pink); 1416 | padding: 8px 15px; 1417 | color: var(--white); 1418 | font-weight: var(--fs-9); 1419 | font-weight: var(--weight-700); 1420 | text-transform: uppercase; 1421 | -webkit-border-radius: var(--border-radius-md); 1422 | border-radius: var(--border-radius-md); 1423 | margin-bottom: 15px; 1424 | -webkit-transition: var(--transition-timing); 1425 | -o-transition: var(--transition-timing); 1426 | transition: var(--transition-timing); 1427 | } 1428 | 1429 | .product-featured .add-cart-btn:hover { 1430 | background: var(--eerie-black); 1431 | color: var(--white); 1432 | } 1433 | 1434 | .product-featured .showcase-status { margin-bottom: 15px; } 1435 | 1436 | .product-featured .showcase-status .wrapper { 1437 | display: -webkit-box; 1438 | display: -webkit-flex; 1439 | display: -ms-flexbox; 1440 | display: flex; 1441 | -webkit-box-pack: justify; 1442 | -webkit-justify-content: space-between; 1443 | -ms-flex-pack: justify; 1444 | justify-content: space-between; 1445 | -webkit-box-align: center; 1446 | -webkit-align-items: center; 1447 | -ms-flex-align: center; 1448 | align-items: center; 1449 | color: var(--eerie-black); 1450 | font-size: var(--fs-9); 1451 | font-weight: var(--weight-400); 1452 | text-transform: uppercase; 1453 | margin-bottom: 10px; 1454 | } 1455 | 1456 | .product-featured .showcase-status-bar { 1457 | background: var(--cultured); 1458 | position: relative; 1459 | height: 10px; 1460 | -webkit-border-radius: 5px; 1461 | border-radius: 5px; 1462 | } 1463 | 1464 | .product-featured .showcase-status-bar::before { 1465 | position: absolute; 1466 | content: ''; 1467 | top: 3px; 1468 | left: 3px; 1469 | height: 4px; 1470 | width: 40%; 1471 | background: var(--salmon-pink); 1472 | -webkit-border-radius: 4px; 1473 | border-radius: 4px; 1474 | } 1475 | 1476 | .product-featured .countdown-desc { 1477 | color: var(--eerie-black); 1478 | font-size: var(--fs-9); 1479 | font-weight: var(--weight-600); 1480 | text-transform: uppercase; 1481 | margin-bottom: 10px; 1482 | } 1483 | 1484 | .product-featured .countdown { 1485 | display: -webkit-box; 1486 | display: -webkit-flex; 1487 | display: -ms-flexbox; 1488 | display: flex; 1489 | gap: 5px; 1490 | } 1491 | 1492 | .product-featured .countdown-content { 1493 | padding: 5px; 1494 | background: var(--cultured); 1495 | -webkit-border-radius: var(--border-radius-md); 1496 | border-radius: var(--border-radius-md); 1497 | text-align: center; 1498 | } 1499 | 1500 | .product-featured .display-number { 1501 | color: var(--eerie-black); 1502 | font-size: var(--fs-5); 1503 | font-weight: var(--weight-500); 1504 | min-width: 40px; 1505 | } 1506 | 1507 | .product-featured .display-text { 1508 | color: var(--davys-gray); 1509 | font-size: var(--fs-11); 1510 | } 1511 | 1512 | 1513 | 1514 | 1515 | 1516 | /*-----------------------------------*\ 1517 | #PRODUCT GRID 1518 | \*-----------------------------------*/ 1519 | 1520 | .product-main { margin-bottom: 30px; } 1521 | 1522 | .product-grid { 1523 | display: -ms-grid; 1524 | display: grid; 1525 | -ms-grid-columns: 1fr; 1526 | grid-template-columns: 1fr; 1527 | gap: 25px; 1528 | } 1529 | 1530 | .product-grid .showcase { 1531 | border: 1px solid var(--cultured); 1532 | -webkit-border-radius: var(--border-radius-md); 1533 | border-radius: var(--border-radius-md); 1534 | overflow: hidden; 1535 | -webkit-transition: var(--transition-timing); 1536 | -o-transition: var(--transition-timing); 1537 | transition: var(--transition-timing); 1538 | } 1539 | 1540 | .product-grid .showcase:hover { -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); } 1541 | 1542 | .product-grid .showcase-banner { position: relative; } 1543 | 1544 | .product-grid .product-img { 1545 | width: 100%; 1546 | height: 100%; 1547 | -o-object-fit: cover; 1548 | object-fit: cover; 1549 | -webkit-transition: var(--transition-timing); 1550 | -o-transition: var(--transition-timing); 1551 | transition: var(--transition-timing); 1552 | } 1553 | 1554 | .product-grid .product-img.default { 1555 | position: relative; 1556 | z-index: 1; 1557 | } 1558 | 1559 | .product-grid .product-img.hover { 1560 | position: absolute; 1561 | top: 0; 1562 | left: 0; 1563 | z-index: 2; 1564 | opacity: 0; 1565 | } 1566 | 1567 | .product-grid .showcase:hover .product-img.hover { opacity: 1; } 1568 | 1569 | .product-grid .showcase:hover .product-img.default { opacity: 0; } 1570 | 1571 | .product-grid .showcase:hover .product-img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 1572 | 1573 | .product-grid .showcase-badge { 1574 | position: absolute; 1575 | top: 15px; 1576 | left: 15px; 1577 | background: var(--ocean-green); 1578 | font-size: var(--fs-8); 1579 | font-weight: var(--weight-500); 1580 | color: var(--white); 1581 | padding: 0 8px; 1582 | -webkit-border-radius: var(--border-radius-sm); 1583 | border-radius: var(--border-radius-sm); 1584 | z-index: 3; 1585 | } 1586 | 1587 | .product-grid .showcase-badge.angle { 1588 | top: 8px; 1589 | left: -29px; 1590 | -webkit-transform: rotate(-45deg); 1591 | -ms-transform: rotate(-45deg); 1592 | transform: rotate(-45deg); 1593 | text-transform: uppercase; 1594 | font-size: 11px; 1595 | padding: 5px 40px; 1596 | } 1597 | 1598 | .product-grid .showcase-badge.black { background: var(--eerie-black); } 1599 | 1600 | .product-grid .showcase-badge.pink { background: var(--salmon-pink); } 1601 | 1602 | .product-grid .showcase-actions { 1603 | position: absolute; 1604 | top: 10px; 1605 | right: 10px; 1606 | font-size: 20px; 1607 | -webkit-transform: translateX(50px); 1608 | -ms-transform: translateX(50px); 1609 | transform: translateX(50px); 1610 | -webkit-transition: var(--transition-timing); 1611 | -o-transition: var(--transition-timing); 1612 | transition: var(--transition-timing); 1613 | z-index: 3; 1614 | } 1615 | 1616 | .product-grid .showcase:hover .showcase-actions { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 1617 | 1618 | .product-grid .btn-action { 1619 | background: var(--white); 1620 | color: var(--sonic-silver); 1621 | margin-bottom: 5px; 1622 | border: 1px solid var(--cultured); 1623 | padding: 5px; 1624 | -webkit-border-radius: var(--border-radius-sm); 1625 | border-radius: var(--border-radius-sm); 1626 | -webkit-transition: var(--transition-timing); 1627 | -o-transition: var(--transition-timing); 1628 | transition: var(--transition-timing); 1629 | } 1630 | 1631 | .product-grid .btn-action:hover { 1632 | background: var(--eerie-black); 1633 | color: var(--white); 1634 | border-color: var(--eerie-black); 1635 | } 1636 | 1637 | .product-grid .showcase-content { padding: 15px 20px 0; } 1638 | 1639 | .product-grid .showcase-category { 1640 | color: var(--salmon-pink); 1641 | font-size: var(--fs-9); 1642 | font-weight: var(--weight-500); 1643 | text-transform: uppercase; 1644 | margin-bottom: 10px; 1645 | } 1646 | 1647 | .product-grid .showcase-title { 1648 | color: var(--sonic-silver); 1649 | font-size: var(--fs-8); 1650 | font-weight: var(--weight-300); 1651 | text-transform: capitalize; 1652 | letter-spacing: 1px; 1653 | margin-bottom: 10px; 1654 | -webkit-transition: var(--transition-timing); 1655 | -o-transition: var(--transition-timing); 1656 | transition: var(--transition-timing); 1657 | } 1658 | 1659 | .product-grid .showcase-title:hover { color: var(--eerie-black); } 1660 | 1661 | .product-grid .showcase-rating { 1662 | display: -webkit-box; 1663 | display: -webkit-flex; 1664 | display: -ms-flexbox; 1665 | display: flex; 1666 | color: var(--sandy-brown); 1667 | margin-bottom: 10px; 1668 | } 1669 | 1670 | .product-grid .price-box { 1671 | display: -webkit-box; 1672 | display: -webkit-flex; 1673 | display: -ms-flexbox; 1674 | display: flex; 1675 | gap: 10px; 1676 | font-size: var(--fs-7); 1677 | color: var(--eerie-black); 1678 | margin-bottom: 10px; 1679 | } 1680 | 1681 | .product-grid .price { font-weight: var(--weight-700); } 1682 | 1683 | .product-grid del { color: var(--sonic-silver); } 1684 | 1685 | 1686 | 1687 | 1688 | 1689 | /*-----------------------------------*\ 1690 | #TESTIMONIAL 1691 | \*-----------------------------------*/ 1692 | 1693 | .testimonials-box { margin-bottom: 50px; } 1694 | 1695 | .testimonial-card { 1696 | padding: 30px 20px; 1697 | border: 1px solid var(--cultured); 1698 | -webkit-border-radius: var(--border-radius-md); 1699 | border-radius: var(--border-radius-md); 1700 | text-align: center; 1701 | margin-bottom: 25px; 1702 | } 1703 | 1704 | .testimonial-banner { 1705 | margin: auto; 1706 | margin-bottom: 20px; 1707 | -webkit-border-radius: 50%; 1708 | border-radius: 50%; 1709 | } 1710 | 1711 | .testimonial-name { 1712 | font-weight: var(--weight-700); 1713 | text-transform: uppercase; 1714 | color: var(--sonic-silver); 1715 | margin-bottom: 5px; 1716 | } 1717 | 1718 | .testimonial-title { 1719 | color: var(--onyx); 1720 | font-size: var(--fs-7); 1721 | margin-bottom: 15px; 1722 | } 1723 | 1724 | .quotation-img { 1725 | margin: auto; 1726 | margin-bottom: 10px; 1727 | } 1728 | 1729 | .testimonial-desc { 1730 | max-width: 70%; 1731 | margin: auto; 1732 | color: var(--sonic-silver); 1733 | font-size: var(--fs-7); 1734 | } 1735 | 1736 | 1737 | 1738 | 1739 | 1740 | /*-----------------------------------*\ 1741 | #CTA 1742 | \*-----------------------------------*/ 1743 | 1744 | .cta-container { 1745 | position: relative; 1746 | aspect-ratio: 5 / 6; 1747 | -webkit-border-radius: var(--border-radius-md); 1748 | border-radius: var(--border-radius-md); 1749 | overflow: hidden; 1750 | margin-bottom: 25px; 1751 | } 1752 | 1753 | .cta-banner { 1754 | width: 100%; 1755 | height: 100%; 1756 | -o-object-fit: cover; 1757 | object-fit: cover; 1758 | } 1759 | 1760 | .cta-content { 1761 | background: hsla(0, 0%, 100%, 0.7); 1762 | position: absolute; 1763 | top: 50%; 1764 | left: 50%; 1765 | -webkit-transform: translate(-50%, -50%); 1766 | -ms-transform: translate(-50%, -50%); 1767 | transform: translate(-50%, -50%); 1768 | width: -webkit-fit-content; 1769 | width: -moz-fit-content; 1770 | width: fit-content; 1771 | padding: 15px 20px; 1772 | text-align: center; 1773 | -webkit-border-radius: var(--border-radius-sm); 1774 | border-radius: var(--border-radius-sm); 1775 | } 1776 | 1777 | .cta-content .discount { 1778 | background: var(--eerie-black); 1779 | color: var(--white); 1780 | font-size: var(--fs-11); 1781 | font-weight: var(--weight-600); 1782 | text-transform: uppercase; 1783 | width: -webkit-max-content; 1784 | width: -moz-max-content; 1785 | width: max-content; 1786 | margin: auto; 1787 | padding: 0 5px; 1788 | -webkit-border-radius: var(--border-radius-sm); 1789 | border-radius: var(--border-radius-sm); 1790 | margin-bottom: 5px; 1791 | } 1792 | 1793 | .cta-title { 1794 | color: var(--onyx); 1795 | font-size: var(--fs-5); 1796 | text-transform: capitalize; 1797 | margin-bottom: 5px; 1798 | } 1799 | 1800 | .cta-text { 1801 | color: var(--sonic-silver); 1802 | font-size: var(--fs-7); 1803 | margin-bottom: 5px; 1804 | } 1805 | 1806 | .cta-btn { 1807 | font-size: var(--fs-9); 1808 | color: var(--sonic-silver); 1809 | text-transform: uppercase; 1810 | font-weight: var(--weight-700); 1811 | margin: auto; 1812 | } 1813 | 1814 | 1815 | 1816 | 1817 | 1818 | /*-----------------------------------*\ 1819 | #SERVICE 1820 | \*-----------------------------------*/ 1821 | 1822 | .service-container { 1823 | display: -webkit-box; 1824 | display: -webkit-flex; 1825 | display: -ms-flexbox; 1826 | display: flex; 1827 | -webkit-box-pack: center; 1828 | -webkit-justify-content: center; 1829 | -ms-flex-pack: center; 1830 | justify-content: center; 1831 | -webkit-box-align: center; 1832 | -webkit-align-items: center; 1833 | -ms-flex-align: center; 1834 | align-items: center; 1835 | -webkit-flex-wrap: wrap; 1836 | -ms-flex-wrap: wrap; 1837 | flex-wrap: wrap; 1838 | gap: 30px; 1839 | padding: 30px 15px; 1840 | border: 1px solid var(--cultured); 1841 | -webkit-border-radius: var(--border-radius-md); 1842 | border-radius: var(--border-radius-md); 1843 | } 1844 | 1845 | .service-item { 1846 | min-width: 190px; 1847 | display: -webkit-box; 1848 | display: -webkit-flex; 1849 | display: -ms-flexbox; 1850 | display: flex; 1851 | -webkit-box-align: center; 1852 | -webkit-align-items: center; 1853 | -ms-flex-align: center; 1854 | align-items: center; 1855 | gap: 15px; 1856 | } 1857 | 1858 | .service-icon { 1859 | font-size: 35px; 1860 | color: var(--salmon-pink); 1861 | -webkit-transition: var(--transition-timing); 1862 | -o-transition: var(--transition-timing); 1863 | transition: var(--transition-timing); 1864 | } 1865 | 1866 | .service-icon ion-icon { --ionicon-stroke-width: 25px; } 1867 | 1868 | .service-item:hover .service-icon { color: var(--eerie-black); } 1869 | 1870 | .service-title { 1871 | color: var(--sonic-silver); 1872 | font-size: var(--fs-7); 1873 | font-weight: var(--weight-600); 1874 | text-transform: capitalize; 1875 | margin-bottom: 5px; 1876 | } 1877 | 1878 | .service-desc { 1879 | color: var(--sonic-silver); 1880 | font-size: var(--fs-9); 1881 | } 1882 | 1883 | 1884 | 1885 | 1886 | 1887 | /*-----------------------------------*\ 1888 | #BLOG 1889 | \*-----------------------------------*/ 1890 | 1891 | .blog { margin-bottom: 30px; } 1892 | 1893 | .blog-container { 1894 | display: -webkit-box; 1895 | display: -webkit-flex; 1896 | display: -ms-flexbox; 1897 | display: flex; 1898 | -webkit-box-align: start; 1899 | -webkit-align-items: flex-start; 1900 | -ms-flex-align: start; 1901 | align-items: flex-start; 1902 | gap: 15px; 1903 | overflow-x: auto; 1904 | overscroll-behavior-inline: contain; 1905 | -webkit-scroll-snap-type: inline mandatory; 1906 | -ms-scroll-snap-type: inline mandatory; 1907 | scroll-snap-type: inline mandatory; 1908 | } 1909 | 1910 | .blog-card { 1911 | min-width: 100%; 1912 | scroll-snap-align: start; 1913 | } 1914 | 1915 | .blog-banner { 1916 | width: 100%; 1917 | -webkit-border-radius: var(--border-radius-md); 1918 | border-radius: var(--border-radius-md); 1919 | margin-bottom: 20px; 1920 | } 1921 | 1922 | .blog-category { 1923 | width: -webkit-max-content; 1924 | width: -moz-max-content; 1925 | width: max-content; 1926 | color: var(--salmon-pink); 1927 | font-size: var(--fs-8); 1928 | } 1929 | 1930 | .blog-title { 1931 | color: var(--eerie-black); 1932 | font-size: var(--fs-5); 1933 | font-weight: var(--weight-600); 1934 | line-height: 1.4; 1935 | margin-bottom: 5px; 1936 | -webkit-transition: var(--transition-timing); 1937 | -o-transition: var(--transition-timing); 1938 | transition: var(--transition-timing); 1939 | } 1940 | 1941 | .blog-title:hover { color: var(--salmon-pink); } 1942 | 1943 | .blog-meta { 1944 | color: var(--sonic-silver); 1945 | font-size: var(--fs-7); 1946 | } 1947 | 1948 | .blog-meta cite { 1949 | font-style: normal; 1950 | color: var(--davys-gray); 1951 | } 1952 | 1953 | 1954 | 1955 | 1956 | 1957 | /*-----------------------------------*\ 1958 | #FOOTER 1959 | \*-----------------------------------*/ 1960 | 1961 | footer { 1962 | background: var(--eerie-black); 1963 | padding: 30px 0; 1964 | } 1965 | 1966 | .footer-category { 1967 | margin-bottom: 30px; 1968 | padding-bottom: 15px; 1969 | border-bottom: 1px solid var(--onyx); 1970 | } 1971 | 1972 | .footer-category-title { 1973 | color: var(--salmon-pink); 1974 | font-size: var(--fs-6); 1975 | font-weight: var(--weight-600); 1976 | text-transform: uppercase; 1977 | margin-bottom: 15px; 1978 | } 1979 | 1980 | .footer-category-box { 1981 | display: -webkit-box; 1982 | display: -webkit-flex; 1983 | display: -ms-flexbox; 1984 | display: flex; 1985 | -webkit-flex-wrap: wrap; 1986 | -ms-flex-wrap: wrap; 1987 | flex-wrap: wrap; 1988 | -webkit-box-pack: start; 1989 | -webkit-justify-content: flex-start; 1990 | -ms-flex-pack: start; 1991 | justify-content: flex-start; 1992 | -webkit-box-align: center; 1993 | -webkit-align-items: center; 1994 | -ms-flex-align: center; 1995 | align-items: center; 1996 | -webkit-column-gap: 20px; 1997 | -moz-column-gap: 20px; 1998 | column-gap: 20px; 1999 | row-gap: 3px; 2000 | margin-bottom: 15px; 2001 | } 2002 | 2003 | .category-box-title { 2004 | color: var(--spanish-gray); 2005 | font-size: var(--fs-8); 2006 | font-weight: var(--weight-600); 2007 | text-transform: uppercase; 2008 | } 2009 | 2010 | .footer-category-link { 2011 | position: relative; 2012 | color: var(--sonic-silver); 2013 | font-size: var(--fs-7); 2014 | text-transform: capitalize; 2015 | -webkit-transition: var(--transition-timing); 2016 | -o-transition: var(--transition-timing); 2017 | transition: var(--transition-timing); 2018 | } 2019 | 2020 | .footer-category-link:hover { color: var(--spanish-gray); } 2021 | 2022 | .footer-category-link:not(:last-child)::after { 2023 | position: absolute; 2024 | content: ''; 2025 | top: 3px; 2026 | right: -10px; 2027 | background: var(--sonic-silver); 2028 | width: 1px; 2029 | height: 15px; 2030 | } 2031 | 2032 | 2033 | /** 2034 | * footer nav 2035 | */ 2036 | 2037 | .footer-nav { 2038 | border-bottom: 1px solid var(--onyx); 2039 | padding-bottom: 30px; 2040 | margin-bottom: 30px; 2041 | } 2042 | 2043 | .footer-nav-list:not(:last-child) { margin-bottom: 20px; } 2044 | 2045 | .footer-nav .nav-title { 2046 | position: relative; 2047 | color: var(--white); 2048 | font-size: var(--fs-7); 2049 | text-transform: uppercase; 2050 | margin-bottom: 15px; 2051 | padding-bottom: 5px; 2052 | } 2053 | 2054 | .footer-nav .nav-title::before { 2055 | content: ''; 2056 | position: absolute; 2057 | bottom: 0; 2058 | left: 0; 2059 | background: var(--salmon-pink); 2060 | width: 60px; 2061 | height: 1px; 2062 | } 2063 | 2064 | .footer-nav-item { padding: 3px 0; } 2065 | 2066 | .footer-nav-link, 2067 | .footer-nav-item .content { 2068 | width: -webkit-max-content; 2069 | width: -moz-max-content; 2070 | width: max-content; 2071 | color: var(--sonic-silver); 2072 | font-size: var(--fs-7); 2073 | text-transform: capitalize; 2074 | -webkit-transition: var(--transition-timing); 2075 | -o-transition: var(--transition-timing); 2076 | transition: var(--transition-timing); 2077 | } 2078 | 2079 | .footer-nav-link:hover { color: var(--salmon-pink); } 2080 | 2081 | .footer-nav-item.flex { 2082 | display: -webkit-box; 2083 | display: -webkit-flex; 2084 | display: -ms-flexbox; 2085 | display: flex; 2086 | -webkit-box-align: start; 2087 | -webkit-align-items: flex-start; 2088 | -ms-flex-align: start; 2089 | align-items: flex-start; 2090 | gap: 10px; 2091 | } 2092 | 2093 | .footer-nav-item .content { 2094 | font-style: normal; 2095 | margin-bottom: 5px; 2096 | } 2097 | 2098 | .footer-nav-item .icon-box { 2099 | color: var(--sonic-silver); 2100 | font-size: 25px; 2101 | } 2102 | 2103 | .footer-nav-item .icon-box ion-icon { --ionicon-stroke-width: 30px; } 2104 | 2105 | .footer-nav .social-link { 2106 | display: -webkit-box; 2107 | display: -webkit-flex; 2108 | display: -ms-flexbox; 2109 | display: flex; 2110 | -webkit-box-pack: start; 2111 | -webkit-justify-content: flex-start; 2112 | -ms-flex-pack: start; 2113 | justify-content: flex-start; 2114 | -webkit-box-align: center; 2115 | -webkit-align-items: center; 2116 | -ms-flex-align: center; 2117 | align-items: center; 2118 | gap: 10px; 2119 | } 2120 | 2121 | .social-link .footer-nav-link { font-size: 25px; } 2122 | 2123 | .footer-bottom { 2124 | margin-bottom: 50px; 2125 | text-align: center; 2126 | } 2127 | 2128 | .payment-img { 2129 | max-width: 335px; 2130 | width: 100%; 2131 | margin: auto; 2132 | margin-bottom: 15px; 2133 | } 2134 | 2135 | .copyright { 2136 | color: var(--sonic-silver); 2137 | font-size: var(--fs-8); 2138 | font-weight: var(--weight-500); 2139 | text-transform: capitalize; 2140 | letter-spacing: 1.2px; 2141 | } 2142 | 2143 | .copyright a { 2144 | display: inline; 2145 | color: inherit; 2146 | } 2147 | 2148 | 2149 | 2150 | 2151 | 2152 | /*-----------------------------------*\ 2153 | #RESPONSIVE 2154 | \*-----------------------------------*/ 2155 | 2156 | 2157 | /** 2158 | * responsive larger than 480px screen 2159 | */ 2160 | 2161 | @media (min-width: 480px) { 2162 | 2163 | /** 2164 | * #CUSTOM PROPERTY 2165 | */ 2166 | 2167 | :root { 2168 | 2169 | /** 2170 | * typography 2171 | */ 2172 | 2173 | --fs-1: 1.875rem; 2174 | 2175 | } 2176 | 2177 | 2178 | 2179 | /** 2180 | * #HEADER 2181 | */ 2182 | 2183 | .header-top { 2184 | display: block; 2185 | padding: 10px 0; 2186 | border-bottom: 1px solid var(--cultured); 2187 | } 2188 | 2189 | .header-social-container, 2190 | .header-top-actions { display: none; } 2191 | 2192 | .header-alert-news { 2193 | color: var(--sonic-silver); 2194 | font-size: var(--fs-9); 2195 | text-transform: uppercase; 2196 | } 2197 | 2198 | .header-alert-news b { font-weight: var(--weight-500); } 2199 | 2200 | .header-main { padding: 25px 0; } 2201 | 2202 | .mobile-bottom-navigation { 2203 | -webkit-border-top-left-radius: var(--border-radius-md); 2204 | border-top-left-radius: var(--border-radius-md); 2205 | -webkit-border-top-right-radius: var(--border-radius-md); 2206 | border-top-right-radius: var(--border-radius-md); 2207 | } 2208 | 2209 | 2210 | 2211 | /** 2212 | * #BANNER 2213 | */ 2214 | 2215 | .slider-item { aspect-ratio: 5 / 3; } 2216 | 2217 | .banner-content { 2218 | top: 50%; 2219 | right: auto; 2220 | bottom: auto; 2221 | -webkit-transform: translateY(-50%); 2222 | -ms-transform: translateY(-50%); 2223 | transform: translateY(-50%); 2224 | max-width: 320px; 2225 | } 2226 | 2227 | .banner-subtitle { --fs-7: 1rem; } 2228 | 2229 | .banner-text { 2230 | display: block; 2231 | color: var(--sonic-silver); 2232 | font-size: var(--fs-7); 2233 | font-weight: var(--weight-500); 2234 | margin-bottom: 10px; 2235 | } 2236 | 2237 | .banner-text b { font-size: var(--fs-2); } 2238 | 2239 | .banner-btn { padding: 7px 20px; } 2240 | 2241 | 2242 | 2243 | /** 2244 | * #PRODUCT 2245 | */ 2246 | 2247 | .product-grid { 2248 | -ms-grid-columns: 1fr 30px 1fr; 2249 | grid-template-columns: 1fr 1fr; 2250 | gap: 30px; 2251 | } 2252 | 2253 | 2254 | 2255 | /** 2256 | * #CTA 2257 | */ 2258 | 2259 | .cta-content { padding: 40px; } 2260 | 2261 | .cta-content .discount { 2262 | --fs-11: 0.875rem; 2263 | padding: 5px 10px; 2264 | } 2265 | 2266 | .cta-title { --fs-5: 1.5rem; } 2267 | 2268 | .cta-text { --fs-7: 1rem; } 2269 | 2270 | .cta-btn { --fs-9: 1rem; } 2271 | 2272 | 2273 | 2274 | /** 2275 | * #FOOTER 2276 | */ 2277 | 2278 | .copyright { --fs-8: 0.875rem; } 2279 | 2280 | } 2281 | 2282 | 2283 | 2284 | 2285 | 2286 | /** 2287 | * responsive larger than 570px screen 2288 | */ 2289 | 2290 | @media (min-width: 570px) { 2291 | 2292 | /** 2293 | * #HEADER 2294 | */ 2295 | 2296 | .header-top .container, 2297 | .header-main .container { 2298 | display: -webkit-box; 2299 | display: -webkit-flex; 2300 | display: -ms-flexbox; 2301 | display: flex; 2302 | -webkit-box-pack: justify; 2303 | -webkit-justify-content: space-between; 2304 | -ms-flex-pack: justify; 2305 | justify-content: space-between; 2306 | -webkit-box-align: center; 2307 | -webkit-align-items: center; 2308 | -ms-flex-align: center; 2309 | align-items: center; 2310 | } 2311 | 2312 | .header-logo { margin-bottom: 0; } 2313 | 2314 | .header-top-actions { 2315 | display: -webkit-box; 2316 | display: -webkit-flex; 2317 | display: -ms-flexbox; 2318 | display: flex; 2319 | -webkit-box-align: center; 2320 | -webkit-align-items: center; 2321 | -ms-flex-align: center; 2322 | align-items: center; 2323 | gap: 10px; 2324 | } 2325 | 2326 | .header-top-actions select { 2327 | border: none; 2328 | display: block; 2329 | min-width: 80px; 2330 | padding: 5px 0; 2331 | font: inherit; 2332 | color: var(--sonic-silver); 2333 | font-size: var(--fs-8); 2334 | text-transform: uppercase; 2335 | cursor: pointer; 2336 | -webkit-transition: var(--transition-timing); 2337 | -o-transition: var(--transition-timing); 2338 | transition: var(--transition-timing); 2339 | } 2340 | 2341 | .header-top-actions select:hover { color: var(--eerie-black); } 2342 | 2343 | .header-search-container { min-width: 300px; } 2344 | 2345 | 2346 | 2347 | /** 2348 | * #BANNER 2349 | */ 2350 | 2351 | .slider-item { aspect-ratio: 4 / 2; } 2352 | 2353 | .banner-content { background: none; } 2354 | 2355 | 2356 | 2357 | /** 2358 | * #CATEGORY 2359 | */ 2360 | 2361 | .category-item-container { gap: 30px; } 2362 | 2363 | .category-item { min-width: -webkit-calc(50% - 15px); min-width: calc(50% - 15px); } 2364 | 2365 | 2366 | 2367 | /** 2368 | * #PRODUCT 2369 | */ 2370 | 2371 | .product-minimal .showcase-container { min-width: 50%; } 2372 | 2373 | .product-featured .showcase-img { 2374 | max-width: 450px; 2375 | margin: auto; 2376 | } 2377 | 2378 | .product-featured .countdown { gap: 20px; } 2379 | 2380 | 2381 | 2382 | /** 2383 | * #CTA 2384 | */ 2385 | 2386 | .cta-container { aspect-ratio: 6 / 5; } 2387 | 2388 | 2389 | 2390 | /** 2391 | * #BLOG 2392 | */ 2393 | 2394 | .blog-container { gap: 30px; } 2395 | 2396 | .blog-card { min-width: -webkit-calc(50% - 15px); min-width: calc(50% - 15px); } 2397 | 2398 | } 2399 | 2400 | 2401 | 2402 | 2403 | 2404 | /** 2405 | * responsive larger than 768px screen 2406 | */ 2407 | 2408 | @media (min-width: 768px) { 2409 | 2410 | /** 2411 | * #CUSTOM PROPERTY 2412 | */ 2413 | 2414 | :root { 2415 | 2416 | /** 2417 | * typography 2418 | */ 2419 | 2420 | --fs-1: 2.375rem; 2421 | 2422 | } 2423 | 2424 | 2425 | 2426 | /** 2427 | * #BASE 2428 | */ 2429 | 2430 | html { font-size: 17px; } 2431 | 2432 | 2433 | 2434 | /** 2435 | * #REUSED STYLE 2436 | */ 2437 | 2438 | .container { 2439 | max-width: 750px; 2440 | margin: auto; 2441 | } 2442 | 2443 | 2444 | 2445 | /** 2446 | * #MODAL 2447 | */ 2448 | 2449 | .modal-content { 2450 | display: -webkit-box; 2451 | display: -webkit-flex; 2452 | display: -ms-flexbox; 2453 | display: flex; 2454 | -webkit-box-align: center; 2455 | -webkit-align-items: center; 2456 | -ms-flex-align: center; 2457 | align-items: center; 2458 | max-width: 750px; 2459 | width: -webkit-fit-content; 2460 | width: -moz-fit-content; 2461 | width: fit-content; 2462 | } 2463 | 2464 | .newsletter-img { display: block; } 2465 | 2466 | .newsletter { text-align: left; } 2467 | 2468 | 2469 | 2470 | /** 2471 | * #HEADER 2472 | */ 2473 | 2474 | .header-main .container { gap: 80px; } 2475 | 2476 | .header-search-container { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } 2477 | 2478 | 2479 | 2480 | /** 2481 | * #BANNER 2482 | */ 2483 | 2484 | .slider-item { 2485 | aspect-ratio: auto; 2486 | height: 350px; 2487 | } 2488 | 2489 | .banner-content { max-width: 380px; } 2490 | 2491 | .banner-subtitle { --fs-7: 1.25rem; } 2492 | 2493 | .banner-text { --fs-7: 1.125rem; } 2494 | 2495 | .banner-text b { --fs-2: 1.875rem; } 2496 | 2497 | .banner-btn { --fs-11: 0.75rem; } 2498 | 2499 | 2500 | 2501 | /** 2502 | * #CATEGORY 2503 | */ 2504 | 2505 | .category-img-box { padding: 20px; } 2506 | 2507 | 2508 | 2509 | /** 2510 | * #PRODUCT 2511 | */ 2512 | 2513 | .product-minimal { 2514 | display: -webkit-box; 2515 | display: -webkit-flex; 2516 | display: -ms-flexbox; 2517 | display: flex; 2518 | -webkit-flex-wrap: wrap; 2519 | -ms-flex-wrap: wrap; 2520 | flex-wrap: wrap; 2521 | -webkit-box-pack: center; 2522 | -webkit-justify-content: center; 2523 | -ms-flex-pack: center; 2524 | justify-content: center; 2525 | gap: 20px; 2526 | } 2527 | 2528 | .product-minimal .product-showcase { 2529 | min-width: -webkit-calc(50% - 10px); 2530 | min-width: calc(50% - 10px); 2531 | width: -webkit-calc(50% - 10px); 2532 | width: calc(50% - 10px); 2533 | } 2534 | 2535 | .product-minimal .showcase-container { min-width: 100%; } 2536 | 2537 | .product-featured .showcase { 2538 | display: -webkit-box; 2539 | display: -webkit-flex; 2540 | display: -ms-flexbox; 2541 | display: flex; 2542 | -webkit-box-pack: center; 2543 | -webkit-justify-content: center; 2544 | -ms-flex-pack: center; 2545 | justify-content: center; 2546 | -webkit-box-align: center; 2547 | -webkit-align-items: center; 2548 | -ms-flex-align: center; 2549 | align-items: center; 2550 | gap: 20px; 2551 | } 2552 | 2553 | .product-featured .showcase-img { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; } 2554 | 2555 | .product-featured .showcase-content { 2556 | margin-top: 0; 2557 | min-width: -webkit-calc(100% - 345px); 2558 | min-width: calc(100% - 345px); 2559 | } 2560 | 2561 | 2562 | 2563 | /** 2564 | * #FOOTER 2565 | */ 2566 | 2567 | .footer-nav .container { 2568 | display: -webkit-box; 2569 | display: -webkit-flex; 2570 | display: -ms-flexbox; 2571 | display: flex; 2572 | -webkit-flex-wrap: wrap; 2573 | -ms-flex-wrap: wrap; 2574 | flex-wrap: wrap; 2575 | row-gap: 50px; 2576 | -webkit-column-gap: 20px; 2577 | -moz-column-gap: 20px; 2578 | column-gap: 20px; 2579 | } 2580 | 2581 | .footer-nav-list { 2582 | min-width: -webkit-calc(33.33% - 15px); 2583 | min-width: calc(33.33% - 15px); 2584 | width: -webkit-calc(33.33% - 15px); 2585 | width: calc(33.33% - 15px); 2586 | -webkit-box-flex: 1; 2587 | -webkit-flex-grow: 1; 2588 | -ms-flex-positive: 1; 2589 | flex-grow: 1; 2590 | } 2591 | 2592 | .footer-nav-list:not(:last-child) { margin-bottom: 0; } 2593 | 2594 | } 2595 | 2596 | 2597 | 2598 | 2599 | 2600 | /** 2601 | * responsive larger than 1024px screen 2602 | */ 2603 | 2604 | @media (min-width: 1024px) { 2605 | 2606 | /** 2607 | * #CUSTOM PROPERTY 2608 | */ 2609 | 2610 | :root { 2611 | 2612 | /** 2613 | * typography 2614 | */ 2615 | 2616 | --fs-1: 2.625rem; 2617 | --fs-2: 1.125rem; 2618 | 2619 | } 2620 | 2621 | 2622 | 2623 | /** 2624 | * #REUSED STYLE 2625 | */ 2626 | 2627 | .container { max-width: 980px; } 2628 | 2629 | 2630 | 2631 | /** 2632 | * #NOTIFICATION TOAST 2633 | */ 2634 | 2635 | .notification-toast { bottom: 30px; } 2636 | 2637 | 2638 | 2639 | /** 2640 | * #HEADER 2641 | */ 2642 | 2643 | .header-social-container { 2644 | display: -webkit-box; 2645 | display: -webkit-flex; 2646 | display: -ms-flexbox; 2647 | display: flex; 2648 | -webkit-box-align: center; 2649 | -webkit-align-items: center; 2650 | -ms-flex-align: center; 2651 | align-items: center; 2652 | gap: 5px; 2653 | } 2654 | 2655 | .header-social-container .social-link { 2656 | padding: 5px; 2657 | background: hsl(0, 0%, 95%); 2658 | -webkit-border-radius: var(--border-radius-sm); 2659 | border-radius: var(--border-radius-sm); 2660 | color: var(--sonic-silver); 2661 | -webkit-transition: var(--transition-timing); 2662 | -o-transition: var(--transition-timing); 2663 | transition: var(--transition-timing); 2664 | } 2665 | 2666 | .header-social-container .social-link:hover { 2667 | background: var(--salmon-pink); 2668 | color: var(--white); 2669 | } 2670 | 2671 | .header-user-actions { 2672 | display: -webkit-box; 2673 | display: -webkit-flex; 2674 | display: -ms-flexbox; 2675 | display: flex; 2676 | -webkit-box-align: center; 2677 | -webkit-align-items: center; 2678 | -ms-flex-align: center; 2679 | align-items: center; 2680 | gap: 15px; 2681 | } 2682 | 2683 | .header-user-actions .action-btn { 2684 | position: relative; 2685 | font-size: 35px; 2686 | color: var(--onyx); 2687 | padding: 5px; 2688 | } 2689 | 2690 | .header-user-actions .count { 2691 | position: absolute; 2692 | top: -2px; 2693 | right: -3px; 2694 | background: var(--bittersweet); 2695 | color: var(--white); 2696 | font-size: 12px; 2697 | font-weight: var(--weight-500); 2698 | line-height: 1; 2699 | padding: 2px 4px; 2700 | -webkit-border-radius: 20px; 2701 | border-radius: 20px; 2702 | } 2703 | 2704 | .desktop-navigation-menu { display: block; } 2705 | 2706 | .desktop-menu-category-list { 2707 | position: relative; 2708 | display: -webkit-box; 2709 | display: -webkit-flex; 2710 | display: -ms-flexbox; 2711 | display: flex; 2712 | -webkit-box-pack: center; 2713 | -webkit-justify-content: center; 2714 | -ms-flex-pack: center; 2715 | justify-content: center; 2716 | -webkit-box-align: center; 2717 | -webkit-align-items: center; 2718 | -ms-flex-align: center; 2719 | align-items: center; 2720 | gap: 30px; 2721 | } 2722 | 2723 | .desktop-menu-category-list .menu-category:not(:nth-child(2)) { position: relative; } 2724 | 2725 | .desktop-menu-category-list .menu-category > .menu-title { 2726 | position: relative; 2727 | color: var(--onyx); 2728 | font-size: var(--fs-7); 2729 | font-weight: var(--weight-600); 2730 | text-transform: uppercase; 2731 | padding: 15px 0; 2732 | -webkit-transition: var(--transition-timing); 2733 | -o-transition: var(--transition-timing); 2734 | transition: var(--transition-timing); 2735 | } 2736 | 2737 | .desktop-menu-category-list .menu-category > .menu-title:hover { color: var(--salmon-pink); } 2738 | 2739 | .desktop-menu-category-list .menu-category > .menu-title::after { 2740 | content: ''; 2741 | position: absolute; 2742 | bottom: 0; 2743 | left: 0; 2744 | width: 100%; 2745 | height: 2px; 2746 | background: var(--salmon-pink); 2747 | -webkit-transform: scaleX(0); 2748 | -ms-transform: scaleX(0); 2749 | transform: scaleX(0); 2750 | -webkit-transform-origin: left; 2751 | -ms-transform-origin: left; 2752 | transform-origin: left; 2753 | -webkit-transition: var(--transition-timing); 2754 | -o-transition: var(--transition-timing); 2755 | transition: var(--transition-timing); 2756 | } 2757 | 2758 | .desktop-menu-category-list .menu-category > .menu-title:hover::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } 2759 | 2760 | .dropdown-panel { 2761 | position: absolute; 2762 | top: 100%; 2763 | left: 0; 2764 | background: var(--white); 2765 | width: 100%; 2766 | display: -ms-grid; 2767 | display: grid; 2768 | -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr; 2769 | grid-template-columns: repeat(4, 1fr); 2770 | gap: 30px; 2771 | padding: 30px; 2772 | border: 1px solid var(--cultured); 2773 | -webkit-box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.1); 2774 | box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.1); 2775 | -webkit-border-radius: var(--border-radius-md); 2776 | border-radius: var(--border-radius-md); 2777 | -webkit-transform: translateY(50px); 2778 | -ms-transform: translateY(50px); 2779 | transform: translateY(50px); 2780 | opacity: 0; 2781 | visibility: hidden; 2782 | pointer-events: none; 2783 | -webkit-transition: var(--transition-timing); 2784 | -o-transition: var(--transition-timing); 2785 | transition: var(--transition-timing); 2786 | z-index: 5; 2787 | } 2788 | 2789 | .desktop-menu-category-list .menu-category:hover > .dropdown-panel { 2790 | -webkit-transform: translateY(0); 2791 | -ms-transform: translateY(0); 2792 | transform: translateY(0); 2793 | opacity: 1; 2794 | visibility: visible; 2795 | pointer-events: all; 2796 | } 2797 | 2798 | .dropdown-panel-list .menu-title a { 2799 | color: var(--onyx); 2800 | font-size: var(--fs-7); 2801 | font-weight: var(--weight-600); 2802 | padding-bottom: 10px; 2803 | border-bottom: 1px solid var(--cultured); 2804 | margin-bottom: 10px; 2805 | } 2806 | 2807 | .panel-list-item a { 2808 | color: var(--sonic-silver); 2809 | font-size: var(--fs-7); 2810 | text-transform: capitalize; 2811 | -webkit-transition: var(--transition-timing); 2812 | -o-transition: var(--transition-timing); 2813 | transition: var(--transition-timing); 2814 | } 2815 | 2816 | .panel-list-item a:hover { color: var(--salmon-pink); } 2817 | 2818 | .panel-list-item:not(:last-child) a { padding: 4px 0; } 2819 | 2820 | .panel-list-item:last-child { margin-top: 20px; } 2821 | 2822 | .panel-list-item img { 2823 | width: 100%; 2824 | height: auto; 2825 | -webkit-border-radius: var(--border-radius-sm); 2826 | border-radius: var(--border-radius-sm); 2827 | } 2828 | 2829 | .dropdown-list { 2830 | position: absolute; 2831 | top: 100%; 2832 | left: 0; 2833 | width: 200px; 2834 | background: var(--white); 2835 | padding: 20px 0; 2836 | -webkit-border-radius: var(--border-radius-md); 2837 | border-radius: var(--border-radius-md); 2838 | border: 1px solid var(--cultured); 2839 | -webkit-box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.1); 2840 | box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.1); 2841 | -webkit-transform: translateY(50px); 2842 | -ms-transform: translateY(50px); 2843 | transform: translateY(50px); 2844 | opacity: 0; 2845 | visibility: hidden; 2846 | pointer-events: none; 2847 | -webkit-transition: var(--transition-timing); 2848 | -o-transition: var(--transition-timing); 2849 | transition: var(--transition-timing); 2850 | z-index: 5; 2851 | } 2852 | 2853 | .desktop-menu-category-list .menu-category:hover > .dropdown-list { 2854 | -webkit-transform: translateY(0); 2855 | -ms-transform: translateY(0); 2856 | transform: translateY(0); 2857 | opacity: 1; 2858 | visibility: visible; 2859 | pointer-events: all; 2860 | } 2861 | 2862 | .dropdown-list .dropdown-item a { 2863 | color: var(--sonic-silver); 2864 | font-size: var(--fs-7); 2865 | text-transform: capitalize; 2866 | padding: 4px 20px; 2867 | -webkit-transition: var(--transition-timing); 2868 | -o-transition: var(--transition-timing); 2869 | transition: var(--transition-timing); 2870 | } 2871 | 2872 | .dropdown-list .dropdown-item a:hover { color: var(--salmon-pink); } 2873 | 2874 | .mobile-bottom-navigation { display: none; } 2875 | 2876 | 2877 | 2878 | /** 2879 | * #BANNER 2880 | */ 2881 | 2882 | .banner { margin-top: 0; } 2883 | 2884 | .slider-item { height: 380px; } 2885 | 2886 | .banner-content { 2887 | left: 75px; 2888 | max-width: 400px; 2889 | } 2890 | 2891 | .banner-subtitle { --fs-7: 1.625rem; } 2892 | 2893 | .banner-text { --fs-7: 1.375rem; } 2894 | 2895 | .banner-btn { --fs-11: 0.875rem; } 2896 | 2897 | 2898 | 2899 | /** 2900 | * #CATEGORY 2901 | */ 2902 | 2903 | .category-item { min-width: -webkit-calc(33.33% - 20px); min-width: calc(33.33% - 20px); } 2904 | 2905 | .category-img-box { padding: 10px; } 2906 | 2907 | 2908 | 2909 | /** 2910 | * #PRODUCT 2911 | */ 2912 | 2913 | .product-container .container { 2914 | position: relative; 2915 | display: -webkit-box; 2916 | display: -webkit-flex; 2917 | display: -ms-flexbox; 2918 | display: flex; 2919 | -webkit-box-align: start; 2920 | -webkit-align-items: flex-start; 2921 | -ms-flex-align: start; 2922 | align-items: flex-start; 2923 | gap: 30px; 2924 | margin-bottom: 30px; 2925 | } 2926 | 2927 | .sidebar { 2928 | --fs-5: 0.941rem; 2929 | 2930 | position: -webkit-sticky; 2931 | 2932 | position: sticky; 2933 | top: 30px; 2934 | left: 0; 2935 | padding: 0; 2936 | min-width: -webkit-calc(25% - 15px); 2937 | min-width: calc(25% - 15px); 2938 | margin-bottom: 30px; 2939 | visibility: visible; 2940 | overflow-y: auto; 2941 | -ms-scroll-chaining: chained; 2942 | overscroll-behavior: auto; 2943 | z-index: 0; 2944 | } 2945 | 2946 | .sidebar-category { 2947 | padding: 20px; 2948 | margin-bottom: 30px; 2949 | border: 1px solid var(--cultured); 2950 | -webkit-border-radius: var(--border-radius-md); 2951 | border-radius: var(--border-radius-md); 2952 | } 2953 | 2954 | .sidebar-close-btn { display: none; } 2955 | 2956 | .product-box { min-width: -webkit-calc(75% - 15px); min-width: calc(75% - 15px); } 2957 | 2958 | .product-minimal { margin-bottom: 20px; } 2959 | 2960 | .product-minimal .product-showcase { 2961 | min-width: -webkit-calc(33.33% - 14px); 2962 | min-width: calc(33.33% - 14px); 2963 | width: -webkit-calc(33.33% - 14px); 2964 | width: calc(33.33% - 14px); 2965 | -webkit-box-flex: 1; 2966 | -webkit-flex-grow: 1; 2967 | -ms-flex-positive: 1; 2968 | flex-grow: 1; 2969 | } 2970 | 2971 | .product-minimal .showcase-wrapper { gap: 10px; } 2972 | 2973 | .product-minimal .showcase-container { padding: 2px; } 2974 | 2975 | .product-featured .countdown-content { padding: 5px 10px; } 2976 | 2977 | .product-grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } 2978 | 2979 | 2980 | 2981 | /** 2982 | * #TESTIMONIALS, CTA & SERVICE 2983 | */ 2984 | 2985 | .testimonials-box { 2986 | display: -webkit-box; 2987 | display: -webkit-flex; 2988 | display: -ms-flexbox; 2989 | display: flex; 2990 | -webkit-flex-wrap: wrap; 2991 | -ms-flex-wrap: wrap; 2992 | flex-wrap: wrap; 2993 | -webkit-box-align: stretch; 2994 | -webkit-align-items: stretch; 2995 | -ms-flex-align: stretch; 2996 | align-items: stretch; 2997 | gap: 30px; 2998 | } 2999 | 3000 | .testimonial-card { margin-bottom: 0; } 3001 | 3002 | .testimonial, .cta-container { 3003 | min-width: -webkit-calc(50% - 15px); 3004 | min-width: calc(50% - 15px); 3005 | width: -webkit-calc(50% - 15px); 3006 | width: calc(50% - 15px); 3007 | margin-bottom: 0; 3008 | } 3009 | 3010 | .service { width: 100%; } 3011 | 3012 | .service-container { gap: 0; } 3013 | 3014 | .service-item { 3015 | -webkit-box-orient: vertical; 3016 | -webkit-box-direction: normal; 3017 | -webkit-flex-direction: column; 3018 | -ms-flex-direction: column; 3019 | flex-direction: column; 3020 | text-align: center; 3021 | min-width: 20%; 3022 | } 3023 | 3024 | 3025 | 3026 | /** 3027 | * #BLOG 3028 | */ 3029 | 3030 | .blog-card { min-width: -webkit-calc(33.33% - 20px); min-width: calc(33.33% - 20px); } 3031 | 3032 | .blog-title { --fs-5: 1rem; } 3033 | 3034 | 3035 | 3036 | /** 3037 | * #FOOTER 3038 | */ 3039 | 3040 | .footer-nav-list { 3041 | min-width: -webkit-calc(20% - 16px); 3042 | min-width: calc(20% - 16px); 3043 | width: -webkit-calc(20% - 16px); 3044 | width: calc(20% - 16px); 3045 | } 3046 | 3047 | .footer-nav-list:last-child { display: none; } 3048 | 3049 | .footer-bottom { margin-bottom: 0; } 3050 | 3051 | } 3052 | 3053 | 3054 | 3055 | 3056 | 3057 | /** 3058 | * responsive larger than 1200px screen 3059 | */ 3060 | 3061 | @media (min-width: 1200px) { 3062 | 3063 | /** 3064 | * #REUSED STYLE 3065 | */ 3066 | 3067 | .container { max-width: 1200px; } 3068 | 3069 | 3070 | 3071 | /** 3072 | * #HEADER 3073 | */ 3074 | 3075 | .desktop-menu-category-list { gap: 45px; } 3076 | 3077 | 3078 | 3079 | /** 3080 | * #BANNER 3081 | */ 3082 | 3083 | .slider-item:last-child .banner-img { -o-object-position: top; object-position: top; } 3084 | 3085 | 3086 | 3087 | /** 3088 | * #CATEGORY 3089 | */ 3090 | 3091 | .category-item { min-width: -webkit-calc(25% - 22.5px); min-width: calc(25% - 22.5px); } 3092 | 3093 | .category-item-title { --fs-9: 0.824rem; } 3094 | 3095 | 3096 | 3097 | /** 3098 | * #PRODUCT 3099 | */ 3100 | 3101 | .product-featured .showcase > div { min-width: -webkit-calc(50% - 10px); min-width: calc(50% - 10px); } 3102 | 3103 | .product-featured .display-number { --fs-5: 1.125rem; } 3104 | 3105 | .product-grid { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } 3106 | 3107 | 3108 | 3109 | /** 3110 | * #TESTIMONIALS, CTA, SERVICE 3111 | */ 3112 | 3113 | .testimonial, .service { 3114 | min-width: -webkit-calc(25% - 20px); 3115 | min-width: calc(25% - 20px); 3116 | width: -webkit-calc(25% - 20px); 3117 | width: calc(25% - 20px); 3118 | } 3119 | 3120 | .cta-container { 3121 | min-width: -webkit-calc(50% - 20px); 3122 | min-width: calc(50% - 20px); 3123 | width: -webkit-calc(50% - 20px); 3124 | width: calc(50% - 20px); 3125 | aspect-ratio: unset; 3126 | } 3127 | 3128 | .service-container { 3129 | -webkit-box-pack: start; 3130 | -webkit-justify-content: flex-start; 3131 | -ms-flex-pack: start; 3132 | justify-content: flex-start; 3133 | gap: 16px; 3134 | padding: 30px; 3135 | } 3136 | 3137 | .service-item { 3138 | -webkit-box-orient: horizontal; 3139 | -webkit-box-direction: normal; 3140 | -webkit-flex-direction: row; 3141 | -ms-flex-direction: row; 3142 | flex-direction: row; 3143 | text-align: left; 3144 | } 3145 | 3146 | 3147 | 3148 | /** 3149 | * #BLOG 3150 | */ 3151 | 3152 | .blog { margin-bottom: 50px; } 3153 | 3154 | .blog-card { min-width: -webkit-calc(25% - 22.5px); min-width: calc(25% - 22.5px); } 3155 | 3156 | 3157 | 3158 | /** 3159 | * #FOOTER 3160 | */ 3161 | 3162 | footer { padding-top: 50px; } 3163 | 3164 | .footer-category { 3165 | margin-bottom: 50px; 3166 | padding-bottom: 35px; 3167 | } 3168 | 3169 | .footer-nav { padding-bottom: 50px; } 3170 | 3171 | } 3172 | 3173 | 3174 | 3175 | 3176 | 3177 | /** 3178 | * responsive larger than 1400px screen 3179 | */ 3180 | 3181 | @media (min-width: 1400px) { 3182 | 3183 | /** 3184 | * #BASE 3185 | */ 3186 | 3187 | html { font-size: 18px; } 3188 | 3189 | 3190 | 3191 | /** 3192 | * #REUSED STYLE 3193 | */ 3194 | 3195 | .container { max-width: 1350px; } 3196 | 3197 | 3198 | 3199 | /** 3200 | * #BANNER 3201 | */ 3202 | 3203 | .slider-item { height: 450px; } 3204 | 3205 | .banner-content { 3206 | left: 110px; 3207 | max-width: 460px; 3208 | } 3209 | 3210 | } --------------------------------------------------------------------------------