diff --git a/www/css/assets/account.css b/www/css/assets/account.css index 2d951e1..42db01b 100644 --- a/www/css/assets/account.css +++ b/www/css/assets/account.css @@ -174,13 +174,13 @@ /* checkout-method btn css */ .apple-btn, .google-btn, .bank-btn { color: var(--extra-font-color); - background-color: #000000; - border: 2px solid #000000; + background-color: var(--brand-espresso); + border: 2px solid var(--brand-espresso); } .paypal-btn { - color: #003087; - background-color: #ffc439; - border: 2px solid #ffc439; + color: var(--brand-espresso); + background-color: var(--brand-gold); + border: 2px solid var(--brand-gold); } .apple-btn, .google-btn, .bank-btn, .paypal-btn { gap: 5px; diff --git a/www/css/assets/blog4.css b/www/css/assets/blog4.css new file mode 100644 index 0000000..3ccdd00 --- /dev/null +++ b/www/css/assets/blog4.css @@ -0,0 +1,94 @@ +/*----------------------------------[Table of contents]---------------------------------- +# blog-sidebar css +# article css +# search-blog css +---------------------------------------------------------------------------------------*/ + +/************************************* blog-sidebar css start *************************************/ +/*==================================== + blog-post-sidebar css +====================================*/ +.blog-sidebar-wrap .blog-post-sidebar { + padding-top: 30px; + margin-top: 30px; + border-top: 1px solid rgba(var(--border-color),var(--border-opacity)); +} +.blog-sidebar-wrap .blog-post-sidebar:first-child { + padding: 0px; + margin: 0px; + border: none; +} + +/*==================================== + blog-recent css +====================================*/ +.blog-sidebar-wrap .blog-post-sidebar .blog-recent-post .blog-img-content .blog-recent-content span a { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; +} + +/*==================================== + blog-tag css +====================================*/ +ul.tag-ul li.tag-li a { + -webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out; + transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out; +} +ul.tag-ul li.tag-li a:hover { + color: var(--extra-font-color); + background-color: var(--secondary-font-color); + border-color: var(--secondary-font-color); +} +ul.tag-ul li.tag-li a::before { + content: "#"; +} +/************************************* blog-sidebar css end *************************************/ + +/************************************* article css start *************************************/ +/*==================================== + article-comments css +====================================*/ +.article-comments form .article-cmt .article-cmt-wrap .article-cmt-wrapper .article-cmt-content .article-cmt-red ul li .article-edit-reply button { + position: relative; + margin-left: 10px; + padding-left: 10px; +} +.article-comments form .article-cmt .article-cmt-wrap .article-cmt-wrapper .article-cmt-content .article-cmt-red ul li .article-edit-reply button:first-child { + margin: 0px; + padding: 0px; +} +.article-comments form .article-cmt .article-cmt-wrap .article-cmt-wrapper .article-cmt-content .article-cmt-red ul li .article-edit-reply button::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 1px; + background-color: rgba(var(--border-color),var(--border-opacity)); +} +.article-comments form .article-cmt .article-cmt-wrap .article-cmt-wrapper .article-cmt-content .article-cmt-red ul li .article-edit-reply button:first-child::before { + display: none; +} +/************************************* article css end *************************************/ + +/************************************* search-blog css start *************************************/ +/*==================================== + search-blog css +====================================*/ +.search-page .search-bar-page form.search-form .section-title h2 span::before { + content: '"'; +} +.search-page .search-bar-page form.search-form .section-title h2 span::after { + content: '"'; +} + +/* search-blog result css */ +.blog-post-sidebar .search-bar .search-results ul.search-ul, +.search-page .search-bar .search-results ul.search-ul { + max-height: 153px; +} +/************************************* search-blog css end *************************************/ \ No newline at end of file diff --git a/www/css/assets/collection4.css b/www/css/assets/collection4.css new file mode 100644 index 0000000..bf56306 --- /dev/null +++ b/www/css/assets/collection4.css @@ -0,0 +1,1051 @@ +/*----------------------------------[Table of contents]---------------------------------- +# label-color css +# collection css +# shop-category-slider css +# collection-sidebar css +# collection-info css +# product css +# product-list css +# collection-product-list css +# quickview-modal css +# search-product css +# keyframes css +---------------------------------------------------------------------------------------*/ + +/************************************* label-color css start *************************************/ +/*==================================== + label-color css +====================================*/ +.product-label-new, +.product-label-sale { + background-color: var(--product-new-sale-label-bgcolor); +} +.product-label-discount { + background-color: var(--product-discount-label-bgcolor); +} +.product-label-sold { + background-color: var(--product-sold-label-bgcolor); +} +/************************************* label-color css end *************************************/ + +/************************************* collection css start *************************************/ +/*==================================== + collection css +====================================*/ +@media (min-width: 1200px) { + .collection-block .collection-img::after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: var(--heading-font-color); + } + .collection-block .collection-img::after, + .collection-block .collection-img span { + opacity: 0; + visibility: hidden; + -webkit-transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; + } + .collection-block:hover .collection-img::after, + .collection-block:hover .collection-img span { + visibility: visible; + } + .collection-block:hover .collection-img::after { + opacity: 0.5; + } + .collection-block:hover .collection-img span { + opacity: 1; + } +} +/************************************* collection css end *************************************/ + +/************************************* shop-category-slider css start *************************************/ +/*==================================== + shop-category-slider swiper css +====================================*/ +.shop-category-slider .swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 50%; +} +@media (min-width: 576px) { + .shop-category-slider .swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 33.33%; + } +} +@media (min-width: 768px) { + .shop-category-slider .swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 25%; + } +} +@media (min-width: 992px) { + .shop-category-slider .swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 20%; + } +} +@media (min-width: 1200px) { + .shop-category-slider .swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 16.67%; + } +} +/************************************* shop-category-slider css end *************************************/ + +/************************************* collection-sidebar css start *************************************/ +/*==================================== + shop-filter-sidebar css +====================================*/ +.without-shop-sidebar .shop-sidebar-wrap.shop-filter-sidebar, +.shop-sidebar-wrap.shop-filter-sidebar { + position: fixed; + top: 0; + bottom: 0; + left: -350px; + width: 350px; + padding: 30px 15px; + max-width: 100%; + background-color: var(--body-bgcolor); + z-index: 5; + visibility: hidden; + overflow-y: scroll; + box-shadow: rgba(var(--box-shadow-outer),var(--box-shadow-outer-opacity)); + -webkit-transition: left 0.3s ease-in-out,visibility 0.3s ease-in-out; + transition: left 0.3s ease-in-out,visibility 0.3s ease-in-out; +} +.without-shop-sidebar .shop-sidebar-wrap.shop-filter-sidebar.active, +.shop-sidebar-wrap.shop-filter-sidebar.active { + left: 0px; + visibility: visible; +} +@media (min-width: 1200px) { + .shop-sidebar-wrap.shop-filter-sidebar { + position: unset; + width: auto; + padding: 0; + background-color: transparent; + visibility: unset; + overflow: unset; + box-shadow: unset; + -webkit-transition: unset; + -o-transition: unset; + transition: unset; + } +} + +/* shop-filter-sidebar close-button css */ +.shop-sidebar-wrap.shop-filter-sidebar button.shop-sidebar-close { + top: 15px; + right: 15px; +} +@media (min-width: 1200px) { + .shop-sidebar-wrap.shop-filter-sidebar button.shop-sidebar-close { + display: none; + } + .without-shop-sidebar .shop-sidebar-wrap.shop-filter-sidebar button.shop-sidebar-close { + display: block; + } +} + +/*==================================== + shop-sidebar css +====================================*/ +.shop-sidebar-wrap .shop-sidebar { + padding-top: 30px; + margin-top: 30px; + border-top: 1px solid rgba(var(--border-color),var(--border-opacity)); +} +.shop-sidebar-wrap .shop-sidebar:first-child { + padding: 0px; + margin: 0px; + border: none; +} + +/*==================================== + shop-sidebar price css +====================================*/ +.price-input-range .price-range .price-container { + position: relative; + height: 3px; + background-color: rgba(var(--border-color),var(--border-opacity)); +} +.price-input-range .price-range .price-container .price-slider { + position: absolute; + left: 0; + right: 0; + height: 100%; + background-color: var(--secondary-font-color); +} +.price-input-range .price-range .range-input input { + top: -3px; + height: 3px; + -webkit-appearance: none; + pointer-events: none; + cursor: pointer; +} + +/* Chrome, Safari, Edge, Opera */ +.price-input-range .price-range .range-input input[type="range"]::-webkit-slider-thumb { + height: 16px; + width: 16px; + border-radius: 50%; + background-color: var(--secondary-font-color); + -webkit-appearance: none; + appearance: none; + pointer-events: auto; +} + +/* Firefox */ +.price-input-range .price-range .range-input input[type="range"]::-moz-range-thumb { + height: 16px; + width: 16px; + border-radius: 50%; + background-color: var(--secondary-font-color); + -webkit-appearance: none; + appearance: none; + pointer-events: auto; +} + +/* price-input css */ +.price-input-range .price-input .price-field span.price-input-title { + font-size: 11px; + transform: translateY(-100%); +} +.price-input-range .price-input .price-field span.price-input-prefix { + font-size: 13px; + left: 15px; +} + +/* Chrome, Safari, Edge, Opera */ +.price-input-range .price-input .price-field input[type="number"]::-webkit-outer-spin-button, +.price-input-range .price-input .price-field input[type="number"]::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; +} + +/* Firefox */ +.price-input-range .price-input .price-field input[type=number] { + -moz-appearance: textfield; +} + +/*==================================== + shop-sidebar availability css +====================================*/ +.availability label.cust-checkbox-label span.cust-check { + position: unset; +} + +/*==================================== + shop-sidebar color css +====================================*/ +.color label.cust-checkbox-label span.cust-check { + position: unset; + width: 20px; + height: 20px; + margin: 0px; + border: none; + border-radius: 50%; + box-shadow: inset 0px 0px 5px rgba(var(--box-shadow-inner),var(--box-shadow-inner-opacity)); +} +.color label.cust-checkbox-label span.cust-check::after { + content: ""; + position: absolute; + top: -3px; + right: -3px; + bottom: -3px; + left: -3px; + border: 1px solid transparent; + border-radius: 50%; +} +.color label.cust-checkbox-label input.cust-checkbox:checked ~ span.cust-check::after { + border-color: var(--secondary-font-color); +} + +/*==================================== + shop-sidebar size css +====================================*/ +.size label.cust-checkbox-label span.cust-check { + position: unset; + color: var(--secondary-font-color); + font-size: 14px; + width: auto; + height: auto; + padding: 6px 15px; + margin: 0px; + box-shadow: none; +} +.size label.cust-checkbox-label input.cust-checkbox:checked ~ span.cust-check { + color: var(--secondary-font-color); + background-color: transparent; + border-color: var(--secondary-font-color); + box-shadow: none; +} +.size label.cust-checkbox-label span.cust-check::after { + content: ""; +} + +/*==================================== + shop-sidebar tag css +====================================*/ +.tag label.cust-checkbox-label span.cust-check { + position: unset; + color: var(--body-font-color); + font-size: 14px; + width: auto; + height: auto; + padding: 6px 15px; + margin: 0px; + background-color: var(--extra-font-color); + box-shadow: none; +} +.tag label.cust-checkbox-label input.cust-checkbox:checked ~ span.cust-check { + color: var(--extra-font-color); + background-color: var(--secondary-font-color); + border-color: var(--secondary-font-color); +} +.tag label.cust-checkbox-label span.cust-check::before { + content: "#"; +} +.tag label.cust-checkbox-label span.cust-check::after { + content: ""; +} + +/*==================================== + shop-sidebar disabled css +====================================*/ +label.cust-checkbox-label.disabled input.cust-checkbox ~ span.cust-check, +label.cust-checkbox-label.disabled input.cust-checkbox ~ span.cust-check::after, +label.cust-checkbox-label.disabled input.cust-checkbox ~ span.shop-name, +label.cust-checkbox-label.disabled input.cust-checkbox ~ span.shop-count, +label.cust-checkbox-label.disabled input.cust-checkbox ~ img, +label.cust-checkbox-label.disabled input.cust-checkbox ~ a img { + opacity: 0.5; +} +label.cust-checkbox-label.disabled input.cust-checkbox ~ span.cust-check { + cursor: not-allowed; +} +.color label.cust-checkbox-label.disabled span.cust-check::before, +.size label.cust-checkbox-label.disabled span.cust-check::before { + content: ""; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background-color: var(--secondary-font-color); +} +.color label.cust-checkbox-label.disabled span.cust-check.black::before { + background-color: var(--extra-font-color); +} +/************************************* collection-sidebar css end *************************************/ + +/************************************* collection-info css start *************************************/ +/*==================================== + shop-top-bar css +====================================*/ +.shop-top-bar .shop-short select { + background-position: right 0px center; +} + +/* shop-top-bar shop-short ul li css */ +@media (min-width: 1200px) { + .shop-top-bar .shop-filter-view .shop-filter { + display: none; + } + .without-shop-sidebar .shop-top-bar .shop-filter-view .shop-filter { + display: block; + } + .shop-top-bar .shop-short:hover ul.collapse:not(.show) { + display: block; + } +} + +/*==================================== + shop-filter-list css +====================================*/ +.shop-filter-list ul.shop-filter-ul li.shop-filter-li:only-child { + display: none; +} + +/* shop-filter-loader css */ +.shop-filter-list .shop-filter-loader { + display: none; +} +.shop-filter-list .shop-filter-loader svg { + width: 20px; + animation: rotator 1s linear infinite; +} +.shop-filter-list .shop-filter-loader circle { + stroke-dashoffset: 0; + stroke-dasharray: 280; + transform-origin: center; + animation: dash 1s ease-in-out infinite; +} +/************************************* collection-info css end *************************************/ + +/************************************* product css start *************************************/ +/*==================================== + single-product-wrap css +====================================*/ +.single-product .single-product-wrap { + position: relative; +} + +/*==================================== + product-image-col css +====================================*/ +@media (min-width: 768px) { + .single-product .single-product-wrap .product-image-col { + position: relative; + } +} + +/*==================================== + product-image css +====================================*/ +.single-product .single-product-wrap .product-image-col .product-image { + position: relative; + overflow: hidden; +} +.single-product .single-product-wrap .product-image-col .product-image a.pro-img { + display: block; + position: relative; + overflow: hidden; +} +.single-product .single-product-wrap .product-image-col .product-image a.pro-img img.img2 { + display: none; + transform: scale(1.1); +} +@media (min-width: 1200px) { + .single-product .single-product-wrap .product-image-col .product-image a.pro-img::after { + content: ""; + position: absolute; + inset: 0; + background-color: var(--extra-font-color); + opacity: 0; + visibility: hidden; + -webkit-transition: background-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; + transition: background-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; + } + .single-product:hover .single-product-wrap .product-image-col .product-image a.pro-img::after { + opacity: 0; + visibility: visible; + } + .single-product .single-product-wrap .product-image-col .product-image a.pro-img img { + -webkit-transition: transform 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; + transition: transform 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; + } + .single-product:hover .single-product-wrap .product-image-col .product-image a.pro-img img.img1, + .single-product .single-product-wrap .product-image-col .product-image a.pro-img img.img2 { + opacity: 0; + visibility: hidden; + } + .single-product .single-product-wrap .product-image-col .product-image a.pro-img img.img2 { + display: block; + position: absolute; + inset: 0; + } + .single-product:hover .single-product-wrap .product-image-col .product-image a.pro-img img.img2 { + transform: scale(1); + opacity: 1; + visibility: visible; + } +} + +/*==================================== + product-label css +====================================*/ +.single-product-wrap .product-image-col .product-image a.pro-img span.product-label { + color: var(--extra-font-color); + font-size: 12px; + position: absolute; + top: 10px; + min-width: 48px; + padding: 6px 8px; + text-align: center; + text-transform: uppercase; + border-radius: var(--border-radius); + line-height: 1; + -webkit-transition: transform 0.3s ease-in-out; + transition: transform 0.3s ease-in-out; +} + +/* product-new-sale-label css */ +.single-product-wrap .product-image-col .product-image a.pro-img span.product-label.product-label-left, +.single-product-wrap .product-image-col .product-image a.pro-img span.product-label.product-label-sold.product-label-left { + left: 10px; +} +.single-product-wrap:hover .product-image-col .product-image a.pro-img span.product-label.product-label-left { + transform: translateX(calc(-100% - 10px)); +} + +/* product-discount-label css */ +.single-product-wrap .product-image-col .product-image a.pro-img span.product-label.product-label-right { + right: 10px; +} +.single-product-wrap:hover .product-image-col .product-image a.pro-img span.product-label.product-label-right { + transform: translateX(calc(100% + 10px)); +} + +/*==================================== + product-action css +====================================*/ +.single-product .single-product-wrap .product-image-col .product-image .product-action-wrap { + display: none; +} +.single-product .single-product-wrap .product-action-wrap .product-action { + display: flex; + align-items: center; +} +.single-product .single-product-wrap .product-action-wrap .product-action a { + position: relative; + margin-right: 10px; +} +.single-product .single-product-wrap .product-action-wrap .product-action a:last-child { + margin: 0px; +} +.single-product .single-product-wrap .product-action-wrap .product-action a span.product-icon { + color: var(--heading-font-color); + width: 16px; + height: 16px; + display: flex; + align-items: center; + justify-content: center; + -webkit-transition: color 0.3s ease-in-out; + transition: color 0.3s ease-in-out; +} +.single-product .single-product-wrap .product-action-wrap .product-action a:hover span.product-icon { + color: var(--primary-font-color); +} +@media (min-width: 1200px) { + .single-product .single-product-wrap .product-image-col .product-image .product-action-wrap { + display: block; + position: absolute; + top: 15px; + right: 15px; + opacity: 0; + visibility: hidden; + -webkit-transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; + } + .single-product:hover .single-product-wrap .product-image-col .product-image .product-action-wrap { + opacity: 1; + visibility: visible; + } + .single-product .single-product-wrap .product-image-col .product-image .product-action-wrap .product-action { + flex-direction: column; + } + .single-product .single-product-wrap .product-image-col .product-image .product-action-wrap .product-action a { + margin-bottom: 10px; + margin-right: 0; + transform: translateX(15px); + opacity: 0; + visibility: hidden; + -webkit-transition: transform 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; + transition: transform 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; + } + .single-product .single-product-wrap .product-image-col .product-image .product-action-wrap .product-action a:nth-child(1) { + transition-delay: 0.1s; + } + .single-product .single-product-wrap .product-image-col .product-image .product-action-wrap .product-action a:nth-child(2) { + transition-delay: 0.2s; + } + .single-product .single-product-wrap .product-image-col .product-image .product-action-wrap .product-action a:nth-child(3) { + transition-delay: 0.3s; + } + .single-product:hover .single-product-wrap .product-image-col .product-image .product-action-wrap .product-action a { + transform: translateX(0px); + opacity: 1; + visibility: visible; + } + .single-product .single-product-wrap .product-image-col .product-image .product-action-wrap .product-action a span.product-icon { + color: var(--secondary-font-color); + width: 40px; + height: 40px; + background-color: var(--extra-font-color); + border-radius: 50%; + -webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out; + transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out; + } + .single-product .single-product-wrap .product-image-col .product-image .product-action-wrap .product-action a:hover span.product-icon { + color: var(--extra-font-color); + background-color: var(--primary-font-color); + } +} + +/*==================================== + product-tooltip text css +====================================*/ +.product-action a { + position: relative; +} +.product-action a span.tooltip-text { + display: none; + color: var(--extra-font-color); + font-size: 10px; + position: absolute; + bottom: -30px; + left: 50%; + transform: translateX(-50%); + min-width: 80px; + height: 20px; + background-color: var(--secondary-font-color); + opacity: 0; + visibility: hidden; + text-transform: uppercase; + line-height: 1; + border-radius: var(--border-radius); + -webkit-transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; +} +.product-image-col .product-image .product-action-wrap .product-action a span.tooltip-text { + bottom: 50%; + left: 0; + transform: translate(calc(-100% - 10px), 50%); +} +.product-action a:hover span.tooltip-text { + opacity: 1; + visibility: visible; +} +.product-action a span.tooltip-text::before { + content: ""; + position: absolute; + top: -10px; + border: 5px solid var(--secondary-font-color); + border-color: transparent transparent var(--secondary-font-color) transparent; +} +.product-image-col .product-image .product-action-wrap .product-action a span.tooltip-text::before { + top: auto; + bottom: 50%; + right: -5px; + transform: translateY(50%); + border-color: transparent transparent var(--heading-font-color) transparent; +} +@media (min-width: 1200px) { + .product-action a span.tooltip-text { + display: flex; + align-items: center; + justify-content: center; + } +} + +/*==================================== + product-content css +====================================*/ +.single-product .single-product-wrap .product-content .pro-content { + display: flex; + flex-direction: column; + padding-top: 15px; +} +.single-product .single-product-wrap .product-content .pro-content .product-ratting { + display: none; + margin-top: 10px; + margin-bottom: 5px; +} +.single-product .single-product-wrap .product-content .pro-content .product-price { + margin-top: 8px; +} +.single-product .single-product-wrap .product-content .pro-content .product-description { + display: none; + margin-top: 10px; + margin-bottom: 3px; +} +.single-product .single-product-wrap .product-content .pro-content .product-action-wrap { + margin-top: 10px; +} +@media (min-width: 768px) { + .single-product .single-product-wrap .product-content .pro-content { + padding-top: 25px; + } +} +@media (min-width: 1200px) { + .single-product .single-product-wrap .product-content .pro-content .product-action-wrap { + display: none; + } +} + +/*==================================== + product-price css +====================================*/ +.price-box { + display: flex; + flex-wrap: wrap; + margin-top: -5px; + margin-left: -1.5px; + margin-right: -1.5px; + line-height: 1; +} +.price-box>* { + margin-top: 5px; + padding-left: 1.5px; + padding-right: 1.5px; +} +/************************************* product css end *************************************/ + +/************************************* product-list css start *************************************/ +/*==================================== + product-list css +====================================*/ +@media (min-width: 768px) { + .data-list .single-product .single-product-wrap .product-image-col { + width: 33.33%; + } + .data-list .single-product .single-product-wrap .product-content { + width: 66.66%; + } +} +@media (min-width: 1200px) { + .without-shop-sidebar .data-list .single-product .single-product-wrap .product-image-col { + width: 25%; + } + .without-shop-sidebar .data-list .single-product .single-product-wrap .product-content { + width: 75%; + } +} + +/*==================================== + product-image css +====================================*/ +.data-list .single-product .single-product-wrap .product-image-col .product-image a.pro-img::after, +.data-list .single-product .single-product-wrap .product-image-col .product-image .product-action-wrap { + display: none; +} + +/*==================================== + product-content css +====================================*/ +.data-list .single-product .single-product-wrap .product-content .pro-content .product-ratting, +.data-list .single-product .single-product-wrap .product-content .pro-content .product-description, +.data-list .single-product .single-product-wrap .product-content .pro-content .product-action-wrap { + display: block; +} +@media (min-width: 768px) { + .data-list .single-product .single-product-wrap .product-content .pro-content { + padding-top: 0; + } +} +/************************************* product-list css end *************************************/ + +/************************************* collection-product-list css start *************************************/ +/*==================================== + collection-product-list swiper css +====================================*/ +.collection-product-list .collection-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 100%; +} + +/*==================================== + product-content css +====================================*/ +.single-product-list .single-product-wrap .product-content { + display: flex; + align-items: center; + padding-left: 15px; +} +.single-product-list .single-product-wrap .product-content .pro-content { + width: 100%; + display: flex; + flex-direction: column; +} +.single-product-list .single-product-wrap .product-content .pro-content .product-ratting { + margin-top: 10px; + margin-bottom: 5px; +} +.single-product-list .single-product-wrap .product-content .pro-content .product-price { + margin-top: 8px; +} + +/*============================================== + collection-product-list slider-arrow css +==============================================*/ +.collection-product-list .side-collection-wrap .swiper-buttons .swiper-buttons-wrap button { + color: var(--secondary-font-color); + font-size: 20px; + -webkit-transition: color 0.3s ease-in-out; + transition: color 0.3s ease-in-out; +} +.collection-product-list .side-collection-wrap .swiper-buttons .swiper-buttons-wrap button:hover { + color: var(--primary-font-color); +} +/************************************* collection-product-list css end *************************************/ + +/************************************* quickview-modal css start *************************************/ +/*==================================== + quickview-modal css +====================================*/ +@media (min-width: 768px) { + .quickview-modal .modal-dialog { + max-width: 750px; + } +} + +/*==================================== + quickview-slider-big swiper css +====================================*/ +.quickview-modal .quickview-modal-content .quickview-detail-slider .quickview-img-big.quickview-slider-big .swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 100%; +} + +/*==================================== + quickview-img-big css +====================================*/ +.quickview-modal .quickview-modal-content .quickview-detail-slider .quickview-img-big .swiper-buttons button.swiper-prev { + left: 15px; +} +.quickview-modal .quickview-modal-content .quickview-detail-slider .quickview-img-big .swiper-buttons button.swiper-next { + right: 15px; +} +.quickview-modal .quickview-modal-content .quickview-detail-slider .quickview-img-big .swiper-buttons button[disabled] { + opacity: 0.5; + pointer-events: none; +} + +/*==================================== + quickview-slider-small swiper css +====================================*/ +.quickview-modal .quickview-modal-content .quickview-detail-slider .quickview-img-small.quickview-slider-small .swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 25%; +} + +/*==================================== + quickview-img-small css +====================================*/ +.quickview-modal .quickview-modal-content .quickview-detail-slider .quickview-img-small img { + border: 1px solid transparent; + cursor: pointer; +} +.quickview-modal .quickview-modal-content .quickview-detail-slider .quickview-img-small .swiper-slide-thumb-active img { + border-color: var(--heading-font-color); +} + +/*==================================== + quickview-detail-info css +====================================*/ +@media (min-width: 768px) { + .quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info { + right: -30px; + overflow-y: auto; + } +} + +/*==================================== + product-ratting css +====================================*/ +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-ratting a.pro-review span.review-ratting { + margin-left: -2.5px; + margin-right: -2.5px; +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-ratting a.pro-review span.review-ratting>* { + padding-left: 2.5px; + padding-right: 2.5px; +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-ratting a.pro-review span.review-ratting span.review-average { + display: inline; + font-size: var(--body-font-size); +} + +/*==================================== + product-price css +====================================*/ +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-price .pro-price-box span.discount-price::before { + content: "("; +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-price .pro-price-box span.discount-price::after { + content: ")"; +} + +/*==================================== + product-stock css +====================================*/ +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock span.stock-fill, +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock span.stock-empty { + position: relative; + padding-left: 20px; +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock span.stock-fill::before, +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock span.stock-fill::after, +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock span.stock-empty::before, +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock span.stock-empty::after { + content: ""; + position: absolute; + --bs-bg-opacity: 1; + border-radius: 50%; +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock span.stock-fill::before, +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock span.stock-empty::before { + top: 6px; + left: 4px; + width: 8px; + height: 8px; +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock span.stock-fill::after, +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock span.stock-empty::after { + top: 2px; + left: 0; + width: 16px; + height: 16px; + border: 2px solid; + --bs-border-opacity: 0.3; +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock span.stock-fill::before { + background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)); +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock span.stock-empty::before { + background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)); +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock span.stock-fill::after { + border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)); +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock span.stock-empty::after { + border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)); +} + +/* product-stock-bar css */ +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock .product-stock-bar { + position: relative; + width: 100%; + height: 4px; + background-color: rgba(var(--border-color), var(--border-opacity)); + --border-opacity: 0.2; +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock .product-stock-bar::after { + content: ""; + position: absolute; + inset: 0; + --bs-bg-opacity: 1; +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock .product-stock-bar.product-stock-fill::after { + width: 66%; + background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)); +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-stock .product-stock-bar.product-stock-empty::after { + width: 9%; + background-color: rgba(var(--bs-danger-rgb),var(--bs-bg-opacity)); +} + +/*==================================== + product-quantity-action css +====================================*/ +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-quantity-action .product-quantity-wishlist { + margin-top: -10px; + margin-left: -7.5px; + margin-right: -7.5px; +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-quantity-action .product-quantity-wishlist>* { + margin-top: 10px; + padding-left: 7.5px; + padding-right: 7.5px; +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-quantity-action .product-quantity-wishlist .product-quantity .js-qty-wrapper .js-qty-wrap { + align-items: center; +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-quantity-action .product-quantity-wishlist .product-quantity .js-qty-wrapper .js-qty-wrap, +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-quantity-action .product-quantity-wishlist .product-quantity .js-qty-wrapper .js-qty-wrap button.js-qty-adjust, +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-quantity-action .product-quantity-wishlist .product-quantity .js-qty-wrapper .js-qty-wrap input.js-qty-num { + height: 40px; +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-quantity-action .product-quantity-wishlist .product-notify-stock a { + padding-left: 0px; + padding-right: 0px; +} +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-quantity-action .product-action button, +.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info .product-quantity-action .product-action a { + padding-left: 15px; + padding-right: 15px; +} +/************************************* quickview-modal css end *************************************/ + +/************************************* search-product css start *************************************/ +/*==================================== + search-product css +====================================*/ +.search-page .search-bar-page form.search-form .section-title h2 span::before { + content: '"'; +} +.search-page .search-bar-page form.search-form .section-title h2 span::after { + content: '"'; +} +/************************************* search-product css end *************************************/ + +/************************************* keyframes css start *************************************/ +/*==================================== + blinking keyframes css +====================================*/ +.blinking { + -webkit-animation: blinking 2s cubic-bezier(.4, 0, .6, 1) infinite; + animation: blinking 2s cubic-bezier(.4, 0, .6, 1) infinite; +} +@-webkit-keyframes blinking { + 50% { + opacity: 0.5; + } +} +@keyframes blinking { + 50% { + opacity: 0.5; + } +} + +/*==================================== + pulse-success keyframes css +====================================*/ +@-webkit-keyframes pulse-success { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.7); + } + 70% { + transform: scale(1); + box-shadow: 0 0 0 8px rgba(var(--bs-success-rgb), 0); + } + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0); + } +} +@keyframes pulse-success { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.7); + } + 70% { + transform: scale(1); + box-shadow: 0 0 0 8px rgba(var(--bs-success-rgb), 0); + } + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0); + } +} + +/*==================================== + pulse-danger keyframes css +====================================*/ +@-webkit-keyframes pulse-danger { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.7); + } + 70% { + transform: scale(1); + box-shadow: 0 0 0 8px rgba(var(--bs-danger-rgb), 0); + } + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0); + } +} +@keyframes pulse-danger { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.7); + } + 70% { + transform: scale(1); + box-shadow: 0 0 0 8px rgba(var(--bs-danger-rgb), 0); + } + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0); + } +} +/************************************* keyframes css end *************************************/ \ No newline at end of file diff --git a/www/css/assets/style4.css b/www/css/assets/style4.css new file mode 100644 index 0000000..0a8aa72 --- /dev/null +++ b/www/css/assets/style4.css @@ -0,0 +1,296 @@ +/*----------------------------------[Table of contents]---------------------------------- +# newsletter-modal css +# home-slider css +# category-slider css +# banner-area css +# testimonial css +# brand-logo css +# deal-area css +---------------------------------------------------------------------------------------*/ + +/************************************* newsletter-modal css start *************************************/ +/*==================================== + newsletter-modal css +====================================*/ +@media (min-width: 768px) { + .newsletter-modal .newsletter-info .newsletter-content .newsletter-form .news-wrap input { + border-radius: var(--border-radius) 0px 0px var(--border-radius); + } + .newsletter-modal .newsletter-info .newsletter-content .newsletter-form .news-wrap button { + border-radius: 0px var(--border-radius) var(--border-radius) 0px; + } +} +/************************************* newsletter-modal css end *************************************/ + +/************************************* home-slider css start *************************************/ +/*==================================== + home-slider swiper css +====================================*/ +.slider-content .home-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 100%; +} + +/*==================================== + slider-content transition css +====================================*/ +.slider-content .home-slider.swiper .swiper-slide .slider-image span, +.slider-content .home-slider.swiper .swiper-slide .slider-image h2, +.slider-content .home-slider.swiper .swiper-slide .slider-image a { + opacity: 0; +} +.slider-content .home-slider.swiper .swiper-slide.swiper-slide-active .slider-image span, +.slider-content .home-slider.swiper .swiper-slide.swiper-slide-active .slider-image h2, +.slider-content .home-slider.swiper .swiper-slide.swiper-slide-active .slider-image a { + opacity: 1; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; +} +.slider-content .home-slider.swiper .swiper-slide.swiper-slide-active .slider-image span { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; +} +.slider-content .home-slider.swiper .swiper-slide.swiper-slide-active .slider-image h2 { + -webkit-animation-delay: 0.6s; + animation-delay: 0.6s; + -webkit-animation-duration: 0.6s; + animation-duration: 0.6s; +} +.slider-content .home-slider.swiper .swiper-slide.swiper-slide-active .slider-image a { + -webkit-animation-delay: 0.9s; + animation-delay: 0.9s; + -webkit-animation-duration: 0.9s; + animation-duration: 0.9s; +} + +/*==================================== + slider-navigation css +====================================*/ +.slider-content .home-slider.swiper .swiper-buttons .swiper-buttons-wrap button { + color: var(--primary-font-color); + position: relative; + z-index: 1; + border-radius: 50%; + overflow: hidden; + -webkit-transition: color 0.3s ease-in-out; + transition: color 0.3s ease-in-out; +} +.slider-content .home-slider.swiper .swiper-buttons .swiper-buttons-wrap button.swiper-prev { + left: 5px; +} +.slider-content .home-slider.swiper .swiper-buttons .swiper-buttons-wrap button.swiper-next { + right: 5px; +} +.slider-content .home-slider.swiper .swiper-buttons .swiper-buttons-wrap button:hover { + color: var(--extra-font-color); +} +.slider-content .home-slider.swiper .swiper-buttons .swiper-buttons-wrap button::after { + content: ""; + position: absolute; + inset: 0; + background-color: var(--primary-font-color); + z-index: -1; + opacity: 0.1; + -webkit-transition: opacity 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out; +} +.slider-content .home-slider.swiper .swiper-buttons .swiper-buttons-wrap button:hover::after { + opacity: 1; +} +@media (min-width: 1400px) { + .slider-content .home-slider.swiper .swiper-buttons .swiper-buttons-wrap button.swiper-prev { + left: 10px; + } + .slider-content .home-slider.swiper .swiper-buttons .swiper-buttons-wrap button.swiper-next { + right: 10px; + } +} +@media (min-width: 1600px) { + .slider-content .home-slider.swiper .swiper-buttons .swiper-buttons-wrap button.swiper-prev { + left: 30px; + } + .slider-content .home-slider.swiper .swiper-buttons .swiper-buttons-wrap button.swiper-next { + right: 30px; + } +} + +/*==================================== + slider-dot css +====================================*/ +.slider-content .home-slider.swiper .swiper-dots .swiper-pagination { + width: unset; + position: unset; + margin: -5px 0px 0px -5px; +} +.slider-content .home-slider.swiper .swiper-dots .swiper-pagination span.swiper-pagination-bullet { + width: 10px; + height: 10px; + background-color: var(--primary-font-color); + margin: 5px 0px 0px 5px; + opacity: 0.1; + border: 1px solid var(--primary-font-color); +} +.slider-content .home-slider.swiper .swiper-dots .swiper-pagination span.swiper-pagination-bullet:hover, +.slider-content .home-slider.swiper .swiper-dots .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active { + opacity: 1; +} +/************************************* home-slider css end *************************************/ + +/************************************* category-slider css start *************************************/ +/*==================================== + category-slider swiper css +====================================*/ +.category-slider .cat-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 100%; +} +@media (min-width: 768px) { + .category-slider .cat-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 50%; + } +} +@media (min-width: 1200px) { + .category-slider .cat-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 33.33%; + } +} + +/*==================================== + cat-block css +====================================*/ +.category-slider .cat-slider .cat-block a.cat-img .cat-content { + -webkit-transition: background-color 0.3s ease-in-out; + transition: background-color 0.3s ease-in-out; +} +.category-slider .cat-slider .cat-block:hover a.cat-img .cat-content { + background-color: var(--primary-font-color); +} +.category-slider .cat-slider .cat-block a.cat-img .cat-content h6, +.category-slider .cat-slider .cat-block a.cat-img .cat-content span { + -webkit-transition: color 0.3s ease-in-out; + transition: color 0.3s ease-in-out; +} +.category-slider .cat-slider .cat-block:hover a.cat-img .cat-content h6, +.category-slider .cat-slider .cat-block:hover a.cat-img .cat-content span { + color: var(--extra-font-color); +} +/************************************* category-slider css end *************************************/ + +/************************************* banner-area css start *************************************/ +/*==================================== + banner-area css +====================================*/ +.banner-area .banner-block a.banner-img .banner-content { + z-index: 1; +} +.banner-area .banner-block a.banner-img img { + -webkit-filter: brightness(0.60); + filter: brightness(0.60); +} +.banner-area .banner-block a.banner-img .banner-content::after { + content: ""; + position: absolute; + inset: 0; + background-color: #000000; + opacity: 0.6; + z-index: -1; +} +/************************************* banner-area css end *************************************/ + +/************************************* testimonial css start *************************************/ +/*==================================== + testimonial slider-swiper css +====================================*/ +.testimonial .testi-wrap { + margin: 0px -7.5px; +} +.testimonial .testi-wrap .testi-slider.swiper { + padding: 0px 7.5px; +} +.testimonial .testi-wrap .testi-slider.swiper .swiper-slide { + padding: 15px 0px; +} +.testimonial .testi-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 100%; +} +@media (min-width: 768px) { + .testimonial .testi-wrap { + margin: 0px -15px; + } + .testimonial .testi-wrap .testi-slider.swiper { + padding: 0px 15px; + } + .testimonial .testi-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 50%; + } +} +@media (min-width: 1200px) { + .testimonial .testi-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 33.33%; + } +} +/************************************* testimonial css end *************************************/ + +/************************************* brand-logo css start *************************************/ +/*==================================== + brand-logo swiper css +====================================*/ +.brand-logo .brand-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 50%; +} +@media (min-width: 768px) { + .brand-logo .brand-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 33.33%; + } +} +@media (min-width: 1200px) { + .brand-logo .brand-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 25%; + } +} + +/*==================================== + brand-content css +====================================*/ +@media (min-width: 1200px) { + .brand-logo .brand-slider .brand-content span.brand-img img { + -webkit-filter: opacity(0.3) grayscale(1); + filter: opacity(0.3) grayscale(1); + -webkit-transition: filter 0.3s ease-in-out; + transition: filter 0.3s ease-in-out; + } + .brand-logo .brand-slider .brand-content:hover span.brand-img img { + -webkit-filter: opacity(1) grayscale(0); + filter: opacity(1) grayscale(0); + } +} +/************************************* brand-logo css end *************************************/ + +/************************************* deal-area css start *************************************/ +/*==================================== + deal-area css +====================================*/ +.deal-area .deal-timer ul>* { + position: relative; +} +.deal-area .deal-timer ul>*::before { + content: ":"; + color: var(--heading-font-color); + font-size: 24px; + position: absolute; + top: -1px; + left: -2px; + font-weight: var(--heading-font-weight); + line-height: 1; +} +.deal-area .deal-timer ul>*:first-child::before { + display: none; +} +@media (min-width: 1200px) { + .deal-area .deal-timer ul>*::before { + top: 7px; + } +} +/************************************* deal-area css start *************************************/ \ No newline at end of file diff --git a/www/css/assets/theme4.css b/www/css/assets/theme4.css new file mode 100644 index 0000000..542b683 --- /dev/null +++ b/www/css/assets/theme4.css @@ -0,0 +1,2608 @@ +/*--------------------------------------------------------------------------------------- + Project: Beluxe + Description: Beluxe - Beauty & Cosmetics eCommerce HTML5 Template + Author: Spacingtech + Support: spacingtech10@gmail.com + Version: 1.0.0 + Primary use: Suitable E-Commerce business startups +---------------------------------------------------------------------------------------*/ + +/*----------------------------------[Table of contents]---------------------------------- +# font css +# root css (including color-codes & typography) +# general css +# 'html', 'body', 'h1 to h6' css +# 'section' css +# 'p' css +# 'container', 'container-fluid' css +# 'row' css +# 'a' css +# 'button' css +# 'ul' css +# 'input', 'textarea', 'select' css +# preloader css +# notification-bar css +# header css +# header-menu css +# breadcrumb-area css +# footer-text css +# footer-insta css +# footer css +# mobile-menu css +# search-modal css +# cart-drawer css +# bottom-menu css +# bg-screen css +# back-to-top css +# banner-hover css +# quantity css +# add-to-cart css +# review-ratting css +# social-icon css +# custom-checkbox, radio, switch css +# pagination css +# magnific-popup css +# slider-swiper css +# slider-arrow css +# slider-dot css +# view-button css +# scrollbar css +# keyframes css +# animation css +---------------------------------------------------------------------------------------*/ + +/************************************* font start *************************************/ +/*==================================== + google font +====================================*/ +@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); +/************************************* font end *************************************/ + +/************************************* root start *************************************/ +/*===================================== + root +=====================================*/ +:root { + /* body */ + --body-font-color: #808080; + --body-font-size: 16px; + --body-bgcolor: #ffffff; + --body-font-family: 'DM Sans', sans-serif; + --body-font-weight: 400; + --body-font-style: normal; + --body-font-letter-spacing: 0px; + + /* heading */ + --heading-font-color: #333333; + --heading-font-family: 'DM Sans', sans-serif; + --heading-font-weight: 600; + --heading-font-style: normal; + + /* section-heading */ + --section-heading-font-color: #333333; + --section-heading-font-family: 'Playfair Display', sans-serif; + --section-heading-font-text: none; + --section-heading-font-weight: 500; + --section-heading-font-style: normal; + --section-heading-font-line-height: 1.2; + + /* paragraph */ + --paragraph-font-line-height: 25px; + + /* general color */ + --primary-font-color: #784a38; + --secondary-font-color: #333333; + --extra-font-color: #ffffff; + --extra-bgcolor: #fff5f1; + --product-new-sale-label-bgcolor: #333333; + --product-discount-label-bgcolor: #784a38; + --product-sold-label-bgcolor: #b02b28; + --product-review-color: #ffa500; + + /* border */ + --border-color: 137,159,135; + --border-opacity: 0.2; + --border-radius: 0px; + --border-radius2: 0px; + + /* box-shadow */ + --box-shadow-outer: 51, 51, 51; + --box-shadow-outer-opacity: 0.15; + --box-shadow-inner: 51, 51, 51; + --box-shadow-inner-opacity: 0.15; +} +/************************************* root end *************************************/ + +/************************************* general start *************************************/ +/*===================================== + body property css +=====================================*/ +.body-color, +.body-primary-color, +.body-secondary-color { + color: var(--body-font-color); +} +.primary-link { + color: var(--heading-font-color); +} +.body-primary-color, +.body-secondary-color, +.primary-link { + -webkit-transition: color 0.3s ease-in-out; + transition: color 0.3s ease-in-out; +} +.body-primary-color:hover, +.primary-link:hover { + color: var(--primary-font-color); +} +.body-secondary-color:hover { + color: var(--secondary-font-color); +} +.body-bg { + background-color: var(--body-bgcolor); +} +.body-weight { + font-weight: var(--body-font-weight); +} + +/*===================================== + heading property css +=====================================*/ +.heading-color { + color: var(--heading-font-color); +} +.heading-weight { + font-weight: var(--heading-font-weight); +} +.section-heading-family { + font-family: var(--section-heading-font-family); +} +.section-heading-text { + text-transform: var(--section-heading-font-text); +} +.section-heading-weight { + font-weight: var(--section-heading-font-weight); +} +.section-heading-lh { + line-height: var(--section-heading-font-line-height); +} + +/*===================================== + general property css +=====================================*/ +.primary-color { + color: var(--primary-font-color); +} +.primary-bg { + background-color: var(--primary-font-color); +} +.secondary-color { + color: var(--secondary-font-color); +} +.secondary-bg { + background-color: var(--secondary-font-color); +} +.extra-color { + color: var(--extra-font-color); +} +.extra-bg { + background-color: var(--extra-bgcolor); +} +.primary-btn { + color: var(--extra-font-color); + background-color: var(--primary-font-color); + border: 1px solid var(--primary-font-color); +} +.primary-btn:hover { + color: var(--primary-font-color); + background-color: transparent; + border-color: var(--primary-font-color); +} +.secondary-btn { + color: var(--extra-font-color); + background-color: var(--secondary-font-color); + border: 1px solid var(--secondary-font-color); +} +.secondary-btn:hover { + color: var(--extra-font-color); + background-color: var(--primary-font-color); + border-color: var(--primary-font-color); +} +.tertiary-btn { + color: var(--extra-font-color); + background-color: var(--primary-font-color); + border: 1px solid var(--primary-font-color); +} +.tertiary-btn:hover { + color: var(--extra-font-color); + background-color: var(--secondary-font-color); + border-color: var(--secondary-font-color); +} +.quaternary-btn { + color: var(--secondary-font-color); + background-color: transparent; + border: 1px solid var(--secondary-font-color); +} +.quaternary-btn:hover { + color: var(--extra-font-color); + background-color: var(--secondary-font-color); + border-color: var(--secondary-font-color); +} +.primary-btn, .secondary-btn, .tertiary-btn, .quaternary-btn { + -webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out; + transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out; +} +.link-btn { + display: inline-block; + color: var(--primary-font-color); + font-size: 16px; + text-transform: uppercase; + font-weight: var(--heading-font-weight); + border-bottom: 1px solid; +} +.link-body-primary, .link-body-secondary { + color: var(--body-font-color); +} +.link-primary-color { + color: var(--primary-font-color); +} +.link-secondary-color { + color: var(--secondary-font-color); +} +.link-body-primary, .link-body-secondary, .link-primary-color, .link-secondary-color { + display: inline-block; + text-transform: uppercase; + font-weight: var(--heading-font-weight); + border-bottom: 1px solid; + -webkit-transition: color 0.3s ease-in-out,border-color 0.3s ease-in-out; + transition: color 0.3s ease-in-out,border-color 0.3s ease-in-out; +} +.link-body-primary:hover, .link-primary-color:hover { + color: var(--primary-font-color); +} +.link-body-secondary:hover, .link-secondary-color:hover { + color: var(--secondary-font-color); +} + +/*===================================== + extra property css +=====================================*/ +.review-color { + color: var(--product-review-color); +} +.review-bg { + background-color: var(--product-review-color); +} +/************************************* general end *************************************/ + +/************************************* 'html', 'body', 'h1 to h6' start *************************************/ +/*===================================== + html css +=====================================*/ +html { + scroll-behavior: smooth; +} + +/*===================================== + body css +=====================================*/ +body { + color: var(--body-font-color); + font-size: var(--body-font-size); + background-color: var(--body-bgcolor); + font-family: var(--body-font-family); + font-weight: var(--body-font-weight); + font-style: var(--body-font-style); + line-height: normal; + letter-spacing: var(--body-font-letter-spacing); + word-break: break-word; +} + +/*===================================== + heading css +=====================================*/ +h1, h2, h3, h4, h5, h6 { + color: var(--heading-font-color); + margin: 0; + padding: 0; + font-family: var(--heading-font-family); + font-weight: var(--heading-font-weight); + font-style: var(--heading-font-style); + line-height: normal; +} +/************************************* 'html', 'body', 'h1 to h6' end *************************************/ + +/************************************* section start *************************************/ +/*===================================== + section-capture css +=====================================*/ +.section-capture { + margin-bottom: 30px; +} +.section-capture span.sub-title { + display: block; + color: var(--primary-font-color); + margin-bottom: 8px; + text-transform: uppercase; +} +.section-capture p.section-desc { + margin-top: 9px; +} +@media (min-width: 1200px) { + .section-capture span.sub-title { + margin-bottom: 13px; + } + .section-capture { + margin-bottom: 40px; + } + .section-capture p.section-desc { + width: 83.33%; + margin-top: 15px; + margin-left: auto; + margin-right: auto; + } +} +@media (min-width: 1400px) { + .section-capture p.section-desc { + width: 75%; + } +} +@media (min-width: 1600px) { + .section-capture p.section-desc { + width: 66.66%; + } +} + +/*===================================== + section-heading css +=====================================*/ +.section-heading { + color: var(--section-heading-font-color); + font-size: 24px; + font-family: var(--section-heading-font-family); + text-transform: var(--section-heading-font-text); + font-weight: var(--section-heading-font-weight); + font-style: var(--section-heading-font-style); + line-height: var(--section-heading-font-line-height); +} +@media (min-width: 1200px) { + .section-heading { + font-size: 40px; + } +} + +/*===================================== + section padding css +=====================================*/ +.section-ptb { + padding-top: 50px; + padding-bottom: 50px; +} +.section-pt { + padding-top: 50px; +} +.section-pb { + padding-bottom: 50px; +} +@media (min-width: 1200px) { + .section-ptb { + padding-top: 100px; + padding-bottom: 100px; + } + .section-pt { + padding-top: 100px; + } + .section-pb { + padding-bottom: 100px; + } +} + +/*===================================== + section-bgimg css +=====================================*/ +.bg-img { + background-repeat: no-repeat; + background-size: cover; + background-position: center center; +} +/************************************* section end *************************************/ + +/************************************* 'p' start *************************************/ +/*===================================== + paragraph css +=====================================*/ +p { + margin: 0; + line-height: var(--paragraph-font-line-height); +} +.p-mtm15, .p-mtm20, .p-mtm30 { + display: flex; + flex-wrap: wrap; +} +.p-mtm15>*, .p-mtm20>*, .p-mtm30>* { + width: 100%; +} + +/*===================================== + p-mtm15 css +=====================================*/ +.p-mtm15 { + margin-top: -1px; +} +.p-mtm15>* { + margin-top: 1px; +} + +/*===================================== + p-mtm20 css +=====================================*/ +.p-mtm20 { + margin-top: -6px; +} +.p-mtm20>* { + margin-top: 6px; +} + +/*===================================== + p-mtm30 css +=====================================*/ +.p-mtm30 { + margin-top: -16px; +} +.p-mtm30>* { + margin-top: 16px; +} + +/*===================================== + p-bullets css +=====================================*/ +.p-bullets { + position: relative; + padding-left: 17px; +} +.p-bullets::before { + content: "\f3c1"; + font-family: remixicon; + color: var(--heading-font-color); + font-size: 7px; + position: absolute; + left: 0; + font-weight: var(--heading-font-weight); +} +/************************************* 'p' end *************************************/ + +/************************************* 'container', 'container-fluid' start *************************************/ +/*===================================== + 'container' css +=====================================*/ +.container { + padding-left: 15px; + padding-right: 15px; +} + +/*===================================== + 'container-fluid' css +=====================================*/ +.container-fluid { + padding-left: 15px; + padding-right: 15px; +} +@media (min-width: 1500px) { + .container-fluid { + padding-left: 30px; + padding-right: 30px; + } +} +@media (min-width: 1600px) { + .container-fluid { + padding-left: 80px; + padding-right: 80px; + } +} +@media (min-width: 1800px) { + .container-fluid { + padding-left: 100px; + padding-right: 100px; + } +} +/************************************* 'container', 'container-fluid' end *************************************/ + +/************************************* 'row' start *************************************/ +/*===================================== + row, col css +=====================================*/ +.row { + margin-left: -7.5px; + margin-right: -7.5px; +} +.row>* { + padding-left: 7.5px; + padding-right: 7.5px; +} +@media (min-width: 768px) { + .row { + margin-left: -15px; + margin-right: -15px; + } + .row>* { + padding-left: 15px; + padding-right: 15px; + } +} + +/*===================================== + row-mtm15 css +=====================================*/ +.row-mtm15 { + margin-top: -15px; +} +.row-mtm15>* { + margin-top: 15px; +} + +/*===================================== + row-mtm20 css +=====================================*/ +.row-mtm20 { + margin-top: -10px; +} +.row-mtm20>* { + margin-top: 10px; +} + +/*===================================== + row-mtm-20 css +=====================================*/ +.row-mtm-20 { + margin-top: -20px; +} +.row-mtm-20>* { + margin-top: 20px; +} + +/*===================================== + row-pmtm20 css +=====================================*/ +.row-pmtm20 { + margin-top: -6px; +} +.row-pmtm20>* { + margin-top: 6px; +} + +/*===================================== + row-mtm css +=====================================*/ +.row-mtm { + margin-top: -30px; +} +.row-mtm>* { + margin-top: 30px; +} + +/*===================================== + row-mtm30 css +=====================================*/ +.row-mtm30 { + margin-top: -15px; +} +.row-mtm30>* { + margin-top: 15px; +} +@media (min-width: 768px) { + .row-mtm30 { + margin-top: -30px; + } + .row-mtm30>* { + margin-top: 30px; + } +} + +/*===================================== + row-mtm50 css +=====================================*/ +.row-mtm50 { + margin-top: -30px; +} +.row-mtm50>* { + margin-top: 30px; +} +@media (min-width: 1200px) { + .row-mtm50 { + margin-top: -50px; + } + .row-mtm50>* { + margin-top: 50px; + } +} + +/*===================================== + row-mtm100 css +=====================================*/ +.row-mtm100 { + margin-top: -50px; +} +.row-mtm100>* { + margin-top: 50px; +} +@media (min-width: 1200px) { + .row-mtm100 { + margin-top: -100px; + } + .row-mtm100>* { + margin-top: 100px; + } +} +/************************************* 'row' end *************************************/ + +/************************************* 'a' start *************************************/ +/*===================================== + 'a' tag css +=====================================*/ +a { + color: var(--heading-font-color); + text-decoration: none; +} +a:focus, .page-link:focus, .active>.page-link, .page-link.active { + outline: none; + box-shadow: none; +} +/************************************* 'a' end *************************************/ + +/************************************* button start *************************************/ +/*===================================== + 'button' tag css +=====================================*/ +button { + display: inline-block; + padding: 0px; + background: 0 0; + font-family: var(--body-font-family); + border: none; +} +button, button:focus { + outline: none; + box-shadow: none; +} +.btn:focus, .btn:active:focus, .btn.active:focus { + outline: none; + box-shadow: none; +} + +/*===================================== + btn-row css +=====================================*/ +.btn-row { + margin-top: -15px; +} +.btn-row>* { + margin-top: 15px; +} + +/*===================================== + btn-row15 css +=====================================*/ +.btn-row15 { + margin-top: -15px; + margin-left: -7.5px; + margin-right: -7.5px; +} +.btn-row15>* { + margin-top: 15px; + padding-left: 7.5px; + padding-right: 7.5px; +} + +/*===================================== + btn-style css +=====================================*/ +.btn-style { + height: 48px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 10px 30px; + text-align: center; + text-transform: uppercase; + font-weight: var(--heading-font-weight); + border-radius: var(--border-radius); +} + +/*==================================== + disabled css +====================================*/ +button.disabled, a.disabled { + pointer-events: none; + opacity: 0.5 !important; +} +/************************************* button end *************************************/ + +/************************************* ul start *************************************/ +/*===================================== + 'ul' tag css +=====================================*/ +ul { + list-style: none; + margin: 0; + padding: 0; +} +.ul-row, .ul-mt5, .ul-mt10, .ul-mt15, .ul-mtm15, .ul-mtm-15, .ul-mtm20, .ul-mt30, .ul-mtm30, .ul-ft { + display: flex; + flex-wrap: wrap; +} +.ul-mtm-15>*, .ul-mtm20>*, .ul-mtm30>*, .ul-ft>* { + width: 100%; +} +.ul-row, .ul-mt15, .ul-mtm15, .ul-mt30 { + margin-left: -7.5px; + margin-right: -7.5px; +} +.ul-row>*, .ul-mt15>*, .ul-mtm15>*, .ul-mt30>* { + padding-left: 7.5px; + padding-right: 7.5px; +} +@media (min-width: 768px) { + .ul-row, .ul-mtm15, .ul-mt30 { + margin-left: -15px; + margin-right: -15px; + } + .ul-row>*, .ul-mtm15>*, .ul-mt30>* { + padding-left: 15px; + padding-right: 15px; + } +} + +/*===================================== + ul-mt5 css +=====================================*/ +.ul-mt5 { + margin-top: -5px; + margin-left: -2.5px; + margin-right: -2.5px; +} +.ul-mt5>* { + margin-top: 5px; + padding-left: 2.5px; + padding-right: 2.5px; +} + +/*===================================== + ul-mt10 css +=====================================*/ +.ul-mt10 { + margin-top: -10px; + margin-left: -5px; + margin-right: -5px; +} +.ul-mt10>* { + margin-top: 10px; + padding-left: 5px; + padding-right: 5px; +} + +/*===================================== + 'ul-row', 'ul-mt15' css +=====================================*/ +.ul-row, .ul-mt15 { + margin-top: -15px; +} +.ul-row>*, .ul-mt15>* { + margin-top: 15px; +} + +/*===================================== + ul-mtm15 css +=====================================*/ +.ul-mtm15 { + margin-top: -5px; +} +.ul-mtm15>* { + margin-top: 5px; +} + +/*===================================== + ul-mtm-15 css +=====================================*/ +.ul-mtm-15 { + margin-top: -5px; +} +.ul-mtm-15>* { + margin-top: 5px; +} + +/*===================================== + ul-mtm20 css +=====================================*/ +.ul-mtm20 { + margin-top: -10px; +} +.ul-mtm20>* { + margin-top: 10px; +} + +/*===================================== + ul-mt30 css +=====================================*/ +.ul-mt30 { + margin-top: -15px; +} +.ul-mt30>* { + margin-top: 15px; +} +@media (min-width: 768px) { + .ul-mt30 { + margin-top: -30px; + } + .ul-mt30>* { + margin-top: 30px; + } +} + +/*===================================== + ul-mtm30 css +=====================================*/ +.ul-mtm30 { + margin-top: -20px; +} +.ul-mtm30>* { + margin-top: 20px; +} + +/*===================================== + ul-ft css +=====================================*/ +.ul-ft { + margin-top: -10px; +} +.ul-ft>* { + margin-top: 10px; +} +/************************************* ul end *************************************/ + +/************************************* input, select, textarea start *************************************/ +/*===================================== + 'input', 'select', 'textarea' tag css +=====================================*/ +input, select, textarea { + color: var(--body-font-color); + font-size: var(--body-font-size); + background-color: var(--body-bgcolor); + font-family: var(--body-font-family); + font-weight: var(--body-font-weight); + border: 1px solid rgba(var(--border-color),var(--border-opacity)); + border-radius: var(--border-radius); +} +input, select { + height: 48px; +} +input, textarea { + padding: 10px 15px; +} +textarea { + display: block; +} + +/*===================================== + placeholder css +=====================================*/ +input::-webkit-input-placeholder, input::placeholder, textarea::-webkit-input-placeholder, textarea::placeholder { + color: var(--body-font-color); +} + +/*===================================== + msg_error css +=====================================*/ +input.msg_error, textarea.msg_error { + color: var(--extra-font-color); + --bs-bg-opacity: 0.5; + --bs-danger-opacity: 0.5; + background-color: rgba(var(--bs-danger-rgb),var(--bs-bg-opacity)); + border-color: rgba(var(--bs-danger-rgb), var(--bs-danger-opacity)); +} +input.msg_error::-webkit-input-placeholder, input.msg_error::placeholder, textarea.msg_error::-webkit-input-placeholder, textarea.msg_error::placeholder { + color: var(--extra-font-color); +} + +/*===================================== + focus css +=====================================*/ +input:focus, input:active, select:focus, select:active, textarea:focus, textarea:active { + outline: none; + border-color: rgba(var(--border-color),var(--border-opacity)); + box-shadow: none; +} + +/*===================================== + select css +=====================================*/ +select { + cursor: pointer; + -webkit-appearance: none; + appearance: none; + --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); + background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none); + background-repeat: no-repeat; + background-position: right .75rem center; + background-size: 16px 12px; + padding: 10px 30px 10px 15px; +} + +/*===================================== + field-row css +=====================================*/ +.field-row { + margin-top: -15px; +} +.field-row>* { + margin-top: 15px; +} +@media (min-width: 768px) { + .field-row { + margin-top: -25px; + } + .field-row>* { + margin-top: 25px; + } +} + +/*==================================== + input[type=file] attachment css +====================================*/ +.field-row .field-col .field-attachment { + position: relative; + z-index: 1; + border: 1px dashed var(--primary-font-color); + border-radius: var(--border-radius); + overflow: hidden; +} +.field-row .field-col .field-attachment::after { + content: ""; + position: absolute; + inset: 0; + background-color: var(--primary-font-color); + opacity: 0.1; + z-index: -1; +} +.field-row .field-col .field-attachment label { + cursor: pointer; +} +.field-row .field-col .field-attachment .field-attached button { + font-size: 12px; + top: -4px; + right: -4px; + width: 16px; + height: 16px; +} +.field-row .field-col .field-attachment .field-attached img { + width: 88px; +} + +/*===================================== + input-password css +=====================================*/ +.field-row .field-col label.field-label { + display: block; + margin: 0px 0px 10px 0px; +} +.field-row .field-col .field-pwd { + height: 48px; + padding: 10px 15px; + background-color: var(--body-bgcolor); + border: 1px solid rgba(var(--border-color),var(--border-opacity)); + border-radius: var(--border-radius); +} +/************************************* input, textarea, select end *************************************/ + +/************************************* preloader css start *************************************/ +/*==================================== + preloader css +====================================*/ +.preloader { + -webkit-transition: opacity 0.15s ease-in-out,visibility 0.15s ease-in-out; + transition: opacity 0.15s ease-in-out,visibility 0.15s ease-in-out; +} +body.is-loaded .preloader { + opacity: 0; + visibility: hidden; + pointer-events: none; +} +/************************************* preloader css end *************************************/ + +/************************************* notification-bar css start *************************************/ +/*==================================== + notification-marquee css +====================================*/ +.notification-bar .notification-marquee .notification-marquee-row { + -webkit-animation: slide-left 20s linear infinite; + animation: slide-left 20s linear infinite; +} +.notification-bar:hover .notification-marquee .notification-marquee-row, +.notification-bar:focus .notification-marquee .notification-marquee-row { + -webkit-animation-play-state: paused; + animation-play-state: paused +} +/************************************* notification-bar css end *************************************/ + +/************************************* header css start *************************************/ +/*==================================== + header-top-area css +====================================*/ +.main-header .header-top-area .header-top-first.header-border { + position: relative; +} +.main-header .header-top-area .header-top-first.header-border::after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 1px; + background-color: rgba(var(--border-color),var(--border-opacity)); +} +/************************************* header css end *************************************/ + +/************************************* header-menu css start *************************************/ +/*==================================== + mainmenu-content css +====================================*/ +.mainmenu-content { + margin: 0px -15px; +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li a.menu-link { + color: var(--heading-font-color); + -webkit-transition: color 0.3s ease-in-out; + transition: color 0.3s ease-in-out; +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li:hover a.menu-link { + color: var(--primary-font-color); +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li a.menu-link span.menu-title { + position: relative; +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li a.menu-link span.menu-title::after { + content: ""; + position: absolute; + bottom: -5px; + left: 0; + right: 0; + width: 0%; + height: 1px; + margin: 0px auto; + background-color: var(--primary-font-color); + -webkit-transition: width 0.3s linear; + transition: width 0.3s linear; +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li:hover a.menu-link span.menu-title::after { + width: 100%; +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li:hover .menu-dropdown.collapse:not(.show) { + display: block; +} + +/*==================================== + menu-sub css +====================================*/ +.mainmenu-content .main-wrap ul.menu-ul li.menu-li.menu-right { + position: relative; +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub { + min-width: 230px; + border-radius: var(--border-radius); +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li.menu-right .menu-dropdown.menu-sub { + left: auto; + right: 0; +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menu-sublink a { + color: var(--body-font-color); + -webkit-transition: color 0.3s ease-in-out; + transition: color 0.3s ease-in-out; +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li:hover .menu-sublink a { + color: var(--primary-font-color); +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown { + top: 0; + left: 100%; + overflow-y: auto; + border-radius: var(--border-radius); +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li.menu-bottom .menusub-dropdown { + top: auto; + bottom: 0; +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li.menu-right .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown, +.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li.menu-right .menusub-dropdown { + left: auto; + right: 100%; +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li:hover .menusub-dropdown.collapse:not(.show) { + display: block; +} + +/*==================================== + menu-mega css +====================================*/ +.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-mega .menu-overview { + column-count: 6; + column-gap: 30px; +} +/************************************* header-menu css end *************************************/ + +/************************************* breadcrumb-area css start *************************************/ +/*==================================== + breadcrumb-area css +====================================*/ +.breadcrumb-area { + position: relative; + z-index: 1; +} +.breadcrumb-area::after { + content: ""; + position: absolute; + inset: 0; + background-color: #000000; + opacity: 0; + z-index: -1; +} +.breadcrumb-area span a { + -webkit-transition: opacity 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out; +} +.breadcrumb-area span a:hover { + opacity: 0.7; +} +/************************************* breadcrumb-area css end *************************************/ + +/************************************* footer-text css start *************************************/ +/*==================================== + footer-text css +====================================*/ +.footer-text { + position: relative; + z-index: 1; +} +.footer-text::after { + content: ""; + position: absolute; + inset: 0; + background-color: #000000; + z-index: -1; + opacity: 0.6; +} +/************************************* footer-text css end *************************************/ + +/************************************* footer-insta css start *************************************/ +/*==================================== + footer-insta slider-swiper css +====================================*/ +.footer-insta .insta-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 33.33%; +} +@media (min-width: 768px) { + .footer-insta .insta-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 25%; + } +} +@media (min-width: 1200px) { + .footer-insta .insta-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 16.66%; + } +} + +/*==================================== + footer-insta-icon css +====================================*/ +.footer-insta .insta-slider a span.insta-icon { + opacity: 0; + visibility: hidden; + -webkit-transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; +} +.footer-insta .insta-slider a:hover span.insta-icon { + opacity: 1; + visibility: visible; +} +/************************************* footer-insta css end *************************************/ + +/************************************* footer css start *************************************/ +/*==================================== + footer-list css +====================================*/ +.footer-area .footer-list .ft-list { + margin-top: 14px; +} +.footer-area .footer-list .ft-list:first-child { + margin: 0px; +} +@media (min-width: 768px) { + .footer-area .footer-list .ft-list { + margin: 0px; + } +} + +/*==================================== + footer-title css +====================================*/ +.footer-area .footer-list .ft-list a.ft-title { + padding-top: 14px; + border-top: 1px solid rgba(var(--border-color),var(--border-opacity)); +} +.footer-area .footer-list .ft-list:only-child a.ft-title, +.footer-area .footer-list .ft-list:first-child a.ft-title { + padding: 0px; + border: none; +} +.footer-area .footer-list .ft-list a.ft-title[aria-expanded="false"] { + color: var(--heading-font-color); +} +.footer-area .footer-list .ft-list a.ft-title[aria-expanded="true"] { + color: var(--primary-font-color); +} +.footer-area .footer-list .ft-list a.ft-title[aria-expanded="true"] span.ftmenu-icon i::before { + content: "\f1af"; +} + +/*==================================== + footer-link css +====================================*/ +@media (min-width: 768px) { + .footer-area .footer-list .footer-menu .ft-link.collapse:not(.show) { + display: block; + } +} + +/*==================================== + footer-news css +====================================*/ +.footer-news .news-form .news-wrap input { + border-radius: var(--border-radius) 0px 0px var(--border-radius); +} +.footer-news .news-form .news-wrap button { + border-radius: 0px var(--border-radius) var(--border-radius) 0px; +} + +/*==================================== + footer-social css +====================================*/ +.footer-social ul.social-ul li.social-li a { + -webkit-transition: color 0.3s ease-in-out; + transition: color 0.3s ease-in-out; +} +.footer-social ul.social-ul li.social-li a:hover { + color: var(--secondary-font-color); +} +/************************************* footer css end *************************************/ + +/************************************* mobile-menu css start *************************************/ +/*==================================== + mobile-menu css +====================================*/ +.mobile-menu { + left: -350px; + width: 350px; + max-width: 100%; + overflow: hidden; + -webkit-transition: left 0.3s ease-in-out,visibility 0.3s ease-in-out; + transition: left 0.3s ease-in-out,visibility 0.3s ease-in-out; +} +.mobile-menu.active { + left: 0px; +} +@media screen and (max-height: 600px) { + .mobile-menu { + overflow-y: auto; + } +} + +/* mobile-contents css */ +.mobile-menu .mobile-contents { + height: 100%; +} +@media screen and (max-height: 600px) { + .mobile-menu .mobile-contents { + height: auto; + } +} + +/*==================================== + mobilemenu-content css +====================================*/ +.mobilemenu-content { + overflow-y: auto; +} +.mobilemenu-content .main-wrap ul.menu-ul { + margin-top: -1px; +} +.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button, +.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button[aria-expanded="false"], +.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn span a { + color: var(--body-font-color); +} +.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button[aria-expanded="true"], +.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button[aria-expanded="true"] + span a { + color: var(--primary-font-color); +} +.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button[aria-expanded="true"] i::before { + content: "\f1af"; +} +/************************************* mobile-menu css end *************************************/ + +/************************************* search-bar css start *************************************/ +/*==================================== + search-bar css +====================================*/ +form.search-form .search-bar .form-search input { + border-radius: var(--border-radius) 0px 0px var(--border-radius); +} +form.search-form .search-bar .form-search button { + border-radius: 0px var(--border-radius) var(--border-radius) 0px; +} +/************************************* search-bar css end *************************************/ + +/************************************* search-modal css start *************************************/ +/*==================================== + search-results css +====================================*/ +.search-bar .search-results .search-for span::before { + content: '"'; +} +.search-bar .search-results .search-for span::after { + content: '"'; +} +.search-bar .search-results ul.search-ul { + margin-top: -1px; + max-height: 206px; + overflow-y: auto; +} +/************************************* search-modal css end *************************************/ + +/************************************* cart-drawer css start *************************************/ +/*==================================== + cart-drawer css +====================================*/ +.cart-drawer { + right: -450px; + width: 450px; + max-width: 100%; + overflow: hidden; + -webkit-transition: right 0.3s ease-in-out,visibility 0.3s ease-in-out; + transition: right 0.3s ease-in-out,visibility 0.3s ease-in-out; +} +.cart-drawer.active { + right: 0px; +} +@media screen and (max-height: 600px) { + .cart-drawer { + overflow-y: auto; + } +} + +/*==================================== + drawer-contents css +====================================*/ +.cart-drawer form.drawer-contents { + height: 100%; +} +@media screen and (max-height: 600px) { + .cart-drawer form.drawer-contents { + height: auto; + } +} + +/*==================================== + drawer-inner css +====================================*/ +.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable { + margin-top: -1px; +} + +/*============================================ + drawer-recommended-product swiper css +============================================*/ +.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 33.33%; +} + +/* drawer-recommended product-image css */ +.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product .drawer-recommended-single-product-wrap .product-image a.pro-img { + display: block; + border-radius: var(--border-radius); + overflow: hidden; +} + +/* drawer-recommended product-content css */ +.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product .drawer-recommended-single-product-wrap .product-content { + text-align: center; +} +.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product .drawer-recommended-single-product-wrap .product-content .pro-content { + display: flex; + flex-direction: column; + padding-top: 11px; +} +.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product .drawer-recommended-single-product-wrap .product-content .pro-content .product-price { + margin-top: 4px; +} +.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product .drawer-recommended-single-product-wrap .product-content .pro-content .product-price .price-box { + justify-content: center; +} + +/*==================================== + drawer-instruction css +====================================*/ +.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-instruction a span.drawer-instruction-icon, +.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-instruction a[aria-expanded="false"] span.drawer-instruction-icon { + -webkit-transition: transform 0.3s ease-in-out; + transition: transform 0.3s ease-in-out; +} +.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-instruction a[aria-expanded="true"] span.drawer-instruction-icon { + transform: scaleY(-1); +} + +/*==================================== + drawer-footer css +====================================*/ +.cart-drawer form.drawer-contents .drawer-inner .drawer-footer .drawer-cart-checkout .drawer-cart-box { + margin-top: -5px; +} +/************************************* cart-drawer css end *************************************/ + +/************************************* bottom-menu css start *************************************/ +/*==================================== + bottom-menu css +====================================*/ +.bottom-menu .bottom-menu-element a span.bottom-menu-icon-wrap { + margin-left: -1.5px; + margin-right: -1.5px; +} +.bottom-menu .bottom-menu-element a span.bottom-menu-icon-wrap>* { + padding-left: 1.5px; + padding-right: 1.5px; +} +/************************************* bottom-menu css end *************************************/ + +/************************************* bg-screen css start *************************************/ +/*==================================== + bg-screen css +====================================*/ +.bg-screen .bg-back, +.bg-screen .bg-shop, +.without-shop-sidebar .bg-screen .bg-back { + -webkit-transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; +} +@media (min-width: 1200px) { + .bg-screen .bg-back { + display: none; + } + .without-shop-sidebar .bg-screen .bg-back { + display: block; + } +} +/************************************* bg-screen css end *************************************/ + +/************************************* back-to-top css start *************************************/ +/*==================================== + back-to-top css +====================================*/ +a#top { + bottom: 60px; + right: 15px; + -webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out,border-color 0.3s ease-in-out; + transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out,border-color 0.3s ease-in-out; +} +@media (min-width: 768px) { + a#top { + right: 30px; + } +} +/************************************* back-to-top css end *************************************/ + +/************************************* banner-hover css start *************************************/ +/*==================================== + banner-hover css +====================================*/ +.banner-hover .banner-img .banner-icon { + transform: translate(-50%,-50%); + opacity: 0; + visibility: hidden; + -webkit-transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; +} +.banner-hover .banner-img .banner-btn { + opacity: 0; + visibility: hidden; + -webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; + transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; +} +.banner-hover:hover .banner-img .banner-btn, +.banner-hover:hover .banner-img .banner-icon { + opacity: 1; + visibility: visible; +} +.banner-hover .banner-img img { + -webkit-transition: transform 0.3s ease-in-out,filter 0.3s ease-in-out; + transition: transform 0.3s ease-in-out,filter 0.3s ease-in-out; +} +.banner-hover:hover .banner-btn img, +.banner-hover:hover .banner-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} +.banner-hover:hover .banner-img .banner-btn + img, +.banner-hover:hover .banner-img .banner-icon + img { + -webkit-filter: brightness(0.60); + filter: brightness(0.60); +} + +/*==================================== + video css +====================================*/ +.video .video-loader { + display: none; +} +.video .video-loader::after { + content: ""; + position: absolute; + inset: 0; + background-color: var(--body-bgcolor); + opacity: 0.5; +} +.video .video-loader span svg { + width: 56px; + -webkit-animation: rotator 1s linear infinite; + animation: rotator 1s linear infinite; +} +.video .video-loader span svg circle { + stroke-dashoffset: 0; + stroke-dasharray: 280; + transform-origin: center; + -webkit-animation: dash 1s ease-in-out infinite; + animation: dash 1s ease-in-out infinite; +} +.video .video-img .banner-video-icon { + position: relative; +} +.video .video-img .banner-video-icon::before, +.video .video-img .banner-video-icon::after { + content: ''; + position: absolute; + top: -8px; + right: -8px; + bottom: -8px; + left: -8px; + background-color: var(--body-bgcolor); + z-index: -1; + border-radius: 100%; +} +.video .video-img .banner-video-icon::before { + -webkit-animation: hoverEffect 2s linear infinite; + animation: hoverEffect 2s linear infinite; +} +.video .video-img .banner-video-icon::after { + -webkit-animation: hoverEffect 4s linear infinite; + animation: hoverEffect 4s linear infinite; +} +.video .video-img img, +.video video { + -webkit-filter: brightness(0.6); + filter: brightness(0.6); +} +.video .video-frame { + display: none; +} +.video video { + display: none; + object-fit: cover; + object-position: center; +} +/************************************* banner-hover css end *************************************/ + +/************************************* quantity css start *************************************/ +/*==================================== + quantity css +====================================*/ +.js-qty-wrapper { + width: 112px; +} +.js-qty-wrapper .js-qty-wrap button.js-qty-adjust { + width: 32px; + height: 32px; +} +.js-qty-wrapper .js-qty-wrap input.js-qty-num { + width: calc(100% - 64px); + height: 32px; + background-color: var(--body-bgcolor); +} + +/* Chrome, Safari, Edge, Opera */ +.js-qty-wrapper .js-qty-wrap input.js-qty-num::-webkit-outer-spin-button, +.js-qty-wrapper .js-qty-wrap input.js-qty-num::-webkit-inner-spin-button { + -webkit-appearance: none; +} + +/* Firefox */ +.js-qty-wrapper .js-qty-wrap input.js-qty-num[type=number] { + -moz-appearance: textfield; + appearance: textfield; +} + +.js-qty-wrapper .js-qty-wrap input.js-qty-num[type="number"]:hover, +.js-qty-wrapper .js-qty-wrap input.js-qty-num[type="number"]:focus { + -moz-appearance: number-input; + appearance: number-input; +} +/************************************* quantity css end *************************************/ + +/************************************* add-to-cart css start *************************************/ +/*==================================== + add-to-cart css start +====================================*/ +.add-to-cart.loading span.product-icon span.product-bag-icon, +.add-to-cart.done span.product-icon span.product-bag-icon { + display: none; +} +.add-to-cart span.product-icon span.product-loader-icon { + display: none; + -webkit-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; +} +.add-to-cart.loading span.product-icon span.product-loader-icon { + display: block; +} +.add-to-cart span.product-icon span.product-check-icon { + display: none; +} +.add-to-cart.done span.product-icon span.product-check-icon { + display: block; +} +/************************************* add-to-cart css end *************************************/ + +/************************************* review-ratting css start *************************************/ +/*==================================== + review-ratting css +====================================*/ +span.review-ratting { + display: flex; + flex-wrap: wrap; + margin-top: -7px; + margin-left: -2.5px; + margin-right: -2.5px; +} +span.review-ratting>* { + margin-top: 7px; + padding-left: 2.5px; + padding-right: 2.5px; +} +span.review-ratting span.review-star { + color: var(--product-review-color); + display: flex; + flex-wrap: wrap; + line-height: 1; +} +span.review-ratting span.review-star i { + margin: 0px 0px 0px 3px; +} +span.review-ratting span.review-star i:first-child { + margin: 0; +} +span.review-ratting span.review-average { + display: none; + font-size: 14px; +} +span.review-ratting span.review-average span.review-caption { + margin-left: 4px; +} +span.review-ratting span.review-average span.review-caption::before { + content: "("; +} +span.review-ratting span.review-average span.review-caption::after { + content: ")"; +} +/************************************* review-ratting css end *************************************/ + +/************************************* social-icon css start *************************************/ +/*==================================== + social-icon css +====================================*/ +.behance { + color: #3a67fa; +} +.bg-behance { + background-color: #3a67fa; +} +.dribbble { + color: #ea4c89; +} +.bg-dribbble { + background-color: #ea4c89; +} +.facebook { + color: #3b5998; +} +.bg-facebook { + background-color: #3b5998; +} +.instagram { + background-image: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} +.bg-instagram { + background-image: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); +} +.linkedin { + color: #0a66c2; +} +.bg-linkedin { + background-color: #0a66c2; +} +.pinterest { + color: #e60023; +} +.bg-pinterest { + background-color: #e60023; +} +.twitter { + color: #00acee; +} +.bg-twitter { + background-color: #00acee; +} +.youtube { + color: #cd201f; +} +.bg-youtube { + background-color: #cd201f; +} +/************************************* social-icon css end *************************************/ + +/************************************* custom-checkbox, radio, switch css start *************************************/ +/*==================================== + custom-checkbox css +====================================*/ +label.cust-checkbox-label { + display: table; + position: relative; + -webkit-user-select: none; + user-select: none; + cursor: pointer; +} +label.cust-checkbox-label input.cust-checkbox { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + opacity: 0; + cursor: pointer; +} +label.cust-checkbox-label span.cust-check { + float: left; + position: relative; + top: 3px; + width: 15px; + height: 15px; + background-color: var(--body-bgcolor); + margin: 0px 5px 0px 0px; + border: 1px solid rgba(var(--border-color),var(--border-opacity)); + border-radius: var(--border-radius); +} +.shop-sidebar label.cust-checkbox-label span.cust-check { + position: unset; +} +label.cust-checkbox-label:hover span.cust-check, +label.cust-checkbox-label input.cust-checkbox:checked ~ span.cust-check { + box-shadow: inset 0px 0px 5px rgba(var(--box-shadow-inner),var(--box-shadow-inner-opacity)); +} +label.cust-checkbox-label input.cust-checkbox:checked ~ span.cust-check { + background-color: var(--secondary-font-color); + border-color: var(--secondary-font-color); +} +label.cust-checkbox-label span.cust-check::after { + display: none; + content: "\eb7a"; + font-family: 'remixicon' !important; + color: var(--extra-font-color); + font-size: 13px; +} +label.cust-checkbox-label input.cust-checkbox:checked ~ span.cust-check::after { + display: block; +} + +/*==================================== + custom-checkbox img css +====================================*/ +label.cust-checkbox-label img { + width: 48px; + border: 1px solid transparent; + border-radius: var(--border-radius); +} +label.cust-checkbox-label input.cust-checkbox:checked ~ img { + border-color: var(--secondary-font-color); +} + +/*==================================== + custom-radio css +====================================*/ +label.cust-radio-label { + display: table; + position: relative; + -webkit-user-select: none; + user-select: none; + cursor: pointer; +} +label.cust-radio-label input { + position: absolute; + left: 0; + width: 0; + height: 0; + opacity: 0; + cursor: pointer; +} +label.cust-radio-label span.cust-check { + float: left; + position: relative; + width: 20px; + height: 20px; + background-color: var(--body-bgcolor); + margin: 0px 5px 0px 0px; + border: 1px solid rgba(var(--border-color),var(--border-opacity)); + border-radius: 50%; +} +label.cust-radio-label input:checked ~ span.cust-check { + border-color: var(--primary-font-color); +} +label.cust-radio-label span.cust-check::after { + display: none; + content: ""; + position: absolute; + bottom: 50%; + left: 50%; + transform: translate(-50%, 50%); + width: 10px; + height: 10px; + background-color: var(--primary-font-color); + border-radius: 50%; +} +label.cust-radio-label input:checked ~ span.cust-check::after { + display: block; +} +label.cust-radio-label span.cust-text span.cust-other-text { + font-size: 12px; +} + +/*==================================== + custom-switch css +====================================*/ +label.cust-switch-label { + position: relative; + width: 30px; + height: 10px; +} +label.cust-switch-label input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} +label.cust-switch-label span.cust-switch-slide { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + background-color: var(--body-bgcolor); + cursor: pointer; + border-radius: 25px; + border: 1px solid rgba(var(--border-color),var(--border-opacity)); + -webkit-transition: background-color 0.3s ease-in-out,border-color 0.3s ease-in-out; + transition: background-color 0.3s ease-in-out,border-color 0.3s ease-in-out; +} +label.cust-switch-label input:checked ~ span.cust-switch-slide { + background-color: var(--primary-font-color); + border-color: var(--extra-bgcolor); +} +label.cust-switch-label span.cust-switch-slide::before { + content: ""; + position: absolute; + left: 0px; + transform: translateX(0%); + width: 10px; + height: 20px; + background-color: var(--primary-font-color); + border-radius: 25px; + border: 1px solid var(--primary-font-color); + -webkit-transition: background-color 0.3s ease-in-out,transform 0.3s ease-in-out,border-color 0.3s ease-in-out; + transition: background-color 0.3s ease-in-out,transform 0.3s ease-in-out,border-color 0.3s ease-in-out; +} +label.cust-switch-label input:checked ~ span.cust-switch-slide::before { + background-color: var(--body-bgcolor); + transform: translateX(200%); + border-color: rgba(var(--border-color),var(--border-opacity)); +} +/************************************* custom-checkbox, radio, switch css end *************************************/ + +/************************************* pagination css start *************************************/ +/*==================================== + pagination css +====================================*/ +.paginatoin-area ul.pagination-box li.page-item a.page-link { + color: var(--heading-font-color); + background-color: var(--body-bgcolor); + -webkit-transition: color 0.3s ease-in-out; + transition: color 0.3s ease-in-out; +} +.paginatoin-area ul.pagination-box li.page-item a.page-link:not(.icon-16) { + font-size: var(--body-font-size); +} +.paginatoin-area ul.pagination-box li.page-item:not(.first,.last) a.page-link { + width: 30px; + height: 30px; +} + +/* pagination page-link active css */ +.paginatoin-area ul.pagination-box li.page-item a.page-link:hover { + color: var(--primary-font-color); +} +.paginatoin-area ul.pagination-box li.page-item a.page-link.active { + color: var(--extra-font-color); + background-color: var(--primary-font-color); +} + +/* pagination disabled css */ +.paginatoin-area ul.pagination-box li.page-item.disabled a.page-link { + opacity: 0.5; +} +/************************************* pagination css end *************************************/ + +/************************************* magnific-popup css start *************************************/ +/*============================== + magnific-popup css +==============================*/ +.mfp-with-zoom .mfp-container, +.mfp-with-zoom.mfp-bg { + opacity: 0; + -webkit-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} +.mfp-with-zoom.mfp-ready .mfp-container { + opacity: 1; +} +.mfp-with-zoom.mfp-ready.mfp-bg { + opacity: 0.95; +} +.mfp-with-zoom.mfp-removing .mfp-container, +.mfp-with-zoom.mfp-removing.mfp-bg { + opacity: 0; +} +.mfp-container.mfp-iframe-holder { + width: auto; + left: 15px; + right: 15px; +} +.mfp-iframe-holder .mfp-close { + display: block!important; + font-size: 16px; + padding: 0; + height: auto; + width: auto; + position: absolute; + top: -20px; + right: 0; + background-color: transparent!important; + line-height: 1; +} +.mfp-iframe-scaler iframe { + border: none; + border-radius: var(--border-radius); +} +/************************************* magnific-popup css end *************************************/ + +/************************************* slider-swiper css start *************************************/ +/*==================================== + slider-swiper margin css +====================================*/ +.collection-wrap .collection-product-slider.swiper { + margin: -15px 0px 0px; +} +.collection-wrap .collection-product-slider.swiper .swiper-wrapper .swiper-slide .single-product { + margin: 15px 0px 0px; +} +@media (min-width: 768px) { + .collection-wrap .collection-product-slider.swiper, + .collection-wrap .collection-product-slider.swiper .swiper-wrapper .swiper-slide .single-product { + margin: 0px; + } +} + +/*==================================== + product slider-swiper css +====================================*/ +.collection-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 50%; +} +@media (min-width: 768px) { + .collection-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 33.33%; + } +} +@media (min-width: 1200px) { + .collection-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 25%; + } +} + +/*==================================== + blog slider-swiper css +====================================*/ +.blog-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 100%; +} +@media (min-width: 768px) { + .blog-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 50%; + } +} +@media (min-width: 992px) { + .blog-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) { + width: 33.33%; + } +} +/************************************* slider-swiper css end *************************************/ + +/************************************* slider-arrow css start *************************************/ +/*==================================== + slider-arrow css +====================================*/ +.shop-cat-wrap, +.cat-wrap, +.collection-wrap, +.testi-wrap, +.blog-wrap, +.insta-wrap { + position: relative; +} +.shop-cat-wrap .swiper-buttons, +.cat-wrap .swiper-buttons, +.collection-wrap .swiper-buttons, +.testi-wrap .swiper-buttons, +.blog-wrap .swiper-buttons, +.insta-wrap .swiper-buttons { + display: none; + margin-top: 30px; + text-align: center; + line-height: 0; +} +.shop-cat-wrap .swiper-buttons .swiper-buttons-wrap, +.cat-wrap .swiper-buttons .swiper-buttons-wrap, +.collection-wrap .swiper-buttons .swiper-buttons-wrap, +.testi-wrap .swiper-buttons .swiper-buttons-wrap, +.blog-wrap .swiper-buttons .swiper-buttons-wrap, +.insta-wrap .swiper-buttons .swiper-buttons-wrap { + display: inline-flex; +} +@media (min-width: 768px) { + .shop-cat-wrap .swiper-buttons, + .cat-wrap .swiper-buttons, + .collection-wrap .swiper-buttons, + .testi-wrap .swiper-buttons, + .blog-wrap .swiper-buttons, + .insta-wrap .swiper-buttons { + margin-top: 0px; + } + .shop-cat-wrap .swiper-buttons .swiper-buttons-wrap, + .cat-wrap .swiper-buttons .swiper-buttons-wrap, + .collection-wrap .swiper-buttons .swiper-buttons-wrap, + .testi-wrap .swiper-buttons .swiper-buttons-wrap, + .blog-wrap .swiper-buttons .swiper-buttons-wrap, + .insta-wrap .swiper-buttons .swiper-buttons-wrap { + display: block; + } +} + +/* slider-arrow button css */ +.shop-cat-wrap .swiper-buttons button, +.cat-wrap .swiper-buttons button, +.collection-wrap .swiper-buttons button, +.testi-wrap .swiper-buttons button, +.blog-wrap .swiper-buttons button, +.insta-wrap .swiper-buttons button { + color: var(--secondary-font-color); + font-size: 16px; + width: 40px; + height: 40px; + background-color: var(--extra-font-color); + margin-right: 10px; + border: 1px solid rgba(var(--border-color),var(--border-opacity)); + border-radius: 100%; + box-shadow: rgba(var(--box-shadow-outer),var(--box-shadow-outer-opacity)); + -webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out; + transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out; +} +.shop-cat-wrap .swiper-buttons button:last-child, +.cat-wrap .swiper-buttons button:last-child, +.collection-wrap .swiper-buttons button:last-child, +.testi-wrap .swiper-buttons button:last-child, +.blog-wrap .swiper-buttons button:last-child:last-child, +.insta-wrap .swiper-buttons button:last-child:last-child { + margin: 0px; +} +.shop-cat-wrap .swiper-buttons button:hover, +.cat-wrap .swiper-buttons button:hover, +.collection-wrap .swiper-buttons button:hover, +.testi-wrap .swiper-buttons button:hover, +.blog-wrap .swiper-buttons button:hover, +.insta-wrap .swiper-buttons button:hover { + color: var(--extra-font-color); + background-color: var(--primary-font-color); + border-color: var(--primary-font-color); +} +@media (min-width: 768px) { + .shop-cat-wrap .swiper-buttons button, + .cat-wrap .swiper-buttons button, + .collection-wrap .swiper-buttons button, + .testi-wrap .swiper-buttons button, + .blog-wrap .swiper-buttons button, + .insta-wrap .swiper-buttons button { + position: absolute; + z-index: 1; + margin-right: 0px; + } + .shop-cat-wrap .swiper-buttons button.swiper-prev, + .cat-wrap .swiper-buttons button.swiper-prev, + .collection-wrap .swiper-buttons button.swiper-prev, + .testi-wrap .swiper-buttons button.swiper-prev, + .blog-wrap .swiper-buttons button.swiper-prev, + .insta-wrap .swiper-buttons button.swiper-prev { + left: 0; + transform: translateX(-50%); + } + .container-fluid .collection-wrap .swiper-buttons button.swiper-prev { + transform: translateX(0); + } + .shop-cat-wrap .swiper-buttons button.swiper-next, + .cat-wrap .swiper-buttons button.swiper-next, + .collection-wrap .swiper-buttons button.swiper-next, + .testi-wrap .swiper-buttons button.swiper-next, + .blog-wrap .swiper-buttons button.swiper-next, + .insta-wrap .swiper-buttons button.swiper-next { + right: 0; + transform: translateX(50%); + } + .container-fluid .collection-wrap .swiper-buttons button.swiper-next { + transform: translateX(0); + } +} +@media (min-width: 1200px) { + .shop-cat-wrap .swiper-buttons button, + .cat-wrap .swiper-buttons button, + .collection-wrap .swiper-buttons button, + .testi-wrap .swiper-buttons button, + .blog-wrap .swiper-buttons button, + .insta-wrap .swiper-buttons button { + width: 48px; + height: 48px; + } +} +@media (min-width: 1500px) { + .shop-cat-wrap .swiper-buttons button.swiper-prev, + .cat-wrap .swiper-buttons button.swiper-prev, + .collection-wrap .swiper-buttons button.swiper-prev, + .testi-wrap .swiper-buttons button.swiper-prev, + .blog-wrap .swiper-buttons button.swiper-prev, + .insta-wrap .swiper-buttons button.swiper-prev { + transform: translateX(calc(-100% - 30px)); + } + .shop-cat-wrap .swiper-buttons button.swiper-next, + .cat-wrap .swiper-buttons button.swiper-next, + .collection-wrap .swiper-buttons button.swiper-next, + .testi-wrap .swiper-buttons button.swiper-next, + .blog-wrap .swiper-buttons button.swiper-next, + .insta-wrap .swiper-buttons button.swiper-next { + transform: translateX(calc(100% + 30px)); + } +} +@media (min-width: 1600px) { + .shop-cat-wrap .swiper-buttons button.swiper-prev, + .cat-wrap .swiper-buttons button.swiper-prev, + .collection-wrap .swiper-buttons button.swiper-prev, + .testi-wrap .swiper-buttons button.swiper-prev, + .blog-wrap .swiper-buttons button.swiper-prev, + .insta-wrap .swiper-buttons button.swiper-prev { + transform: translateX(calc(-100% - 50px)); + } + .container-fluid .collection-wrap .swiper-buttons button.swiper-prev { + transform: translateX(-50%); + } + .shop-cat-wrap .swiper-buttons button.swiper-next, + .cat-wrap .swiper-buttons button.swiper-next, + .collection-wrap .swiper-buttons button.swiper-next, + .testi-wrap .swiper-buttons button.swiper-next, + .blog-wrap .swiper-buttons button.swiper-next, + .insta-wrap .swiper-buttons button.swiper-next { + transform: translateX(calc(100% + 50px)); + } + .container-fluid .collection-wrap .swiper-buttons button.swiper-next { + transform: translateX(50%); + } +} +/************************************* slider-arrow css end *************************************/ + +/************************************* slider-dot css start *************************************/ +/*==================================== + swiper slider-dots css +====================================*/ +.shop-cat-wrap .swiper-dots, +.cat-wrap .swiper-dots, +.collection-wrap .swiper-dots, +.testi-wrap .swiper-dots, +.blog-wrap .swiper-dots, +.insta-wrap .swiper-dots { + display: none; + margin-top: 30px; + line-height: 0; +} +@media (min-width: 1200px) { + .shop-cat-wrap .swiper-dots, + .cat-wrap .swiper-dots, + .collection-wrap .swiper-dots, + .testi-wrap .swiper-dots, + .blog-wrap .swiper-dots, + .insta-wrap .swiper-dots { + margin-top: 60px; + } +} + +/* swiper slider-dots button css */ +.shop-cat-wrap .swiper-dots .swiper-pagination, +.cat-wrap .swiper-dots .swiper-pagination, +.collection-wrap .swiper-dots .swiper-pagination, +.testi-wrap .swiper-dots .swiper-pagination, +.blog-wrap .swiper-dots .swiper-pagination, +.insta-wrap .swiper-dots .swiper-pagination { + width: unset; + position: unset; + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: -5px 0px 0px -5px; +} +.shop-cat-wrap .swiper-dots .swiper-pagination span, +.cat-wrap .swiper-dots .swiper-pagination span, +.collection-wrap .swiper-dots .swiper-pagination span, +.testi-wrap .swiper-dots .swiper-pagination span, +.blog-wrap .swiper-dots .swiper-pagination span, +.insta-wrap .swiper-dots .swiper-pagination span { + width: 10px; + height: 10px; + background-color: var(--secondary-font-color); + margin: 5px 0px 0px 5px; + opacity: 0.15; + border: 1px solid var(--secondary-font-color); +} +.shop-cat-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active, +.cat-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active, +.collection-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active, +.testi-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active, +.blog-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active, +.insta-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active { + opacity: 1; + background-color: var(--primary-font-color); + border-color: var(--primary-font-color); +} +/************************************* slider-dot css end *************************************/ + +/************************************* view-button css start *************************************/ +/*==================================== + view-button css +====================================*/ +.view-button { + margin-top: 30px; + text-align: center; +} +@media (min-width: 1200px) { + .view-button { + margin-top: 40px; + } +} +/************************************* view-button css end *************************************/ + +/************************************* scrollbar css start *************************************/ +/*==================================== + scrollbar css +====================================*/ +.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown, +.mobile-menu .mobilemenu-content, +.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable, +.search-bar .search-results ul, +.shop-filter-sidebar, +.tce-area .ck.ck-editor__editable_inline { + -webkit-scrollbar-width: thin; + scrollbar-width: thin; +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown::-webkit-scrollbar, +.mobile-menu .mobilemenu-content::-webkit-scrollbar, +.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar, +.search-bar .search-results ul::-webkit-scrollbar, +.shop-filter-sidebar::-webkit-scrollbar, +.tce-area .ck.ck-editor__editable_inline::-webkit-scrollbar { + width: 2px; +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown::-webkit-scrollbar-track, +.mobile-menu .mobilemenu-content::-webkit-scrollbar-track, +.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar-track, +.search-bar .search-results ul::-webkit-scrollbar-track, +.shop-filter-sidebar::-webkit-scrollbar-track, +.tce-area .ck.ck-editor__editable_inline::-webkit-scrollbar-track { + background-color: #eeeeee; +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown::-webkit-scrollbar-thumb, +.mobile-menu .mobilemenu-content::-webkit-scrollbar-thumb, +.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar-thumb, +.search-bar .search-results ul::-webkit-scrollbar-thumb, +.shop-filter-sidebar::-webkit-scrollbar-thumb, +.tce-area .ck.ck-editor__editable_inline::-webkit-scrollbar-thumb { + background-color: #c1c1c1; +} +.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown::-webkit-scrollbar-thumb:hover, +.mobile-menu .mobilemenu-content::-webkit-scrollbar-thumb:hover, +.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar-thumb:hover, +.search-bar .search-results ul::-webkit-scrollbar-thumb:hover, +.shop-filter-sidebar::-webkit-scrollbar-thumb:hover, +.tce-area .ck.ck-editor__editable_inline::-webkit-scrollbar-thumb:hover { + background-color: var(--primary-font-color); +} +@media (min-width: 768px) { + .quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info { + -webkit-scrollbar-width: thin; + scrollbar-width: thin; + } + .quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info::-webkit-scrollbar { + width: 2px; + } + .quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info::-webkit-scrollbar-track { + background-color: #eeeeee; + } + .quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info::-webkit-scrollbar-thumb { + background-color: #c1c1c1; + } + .quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info::-webkit-scrollbar-thumb:hover { + background-color: var(--primary-font-color); + } +} +@media screen and (max-height: 600px) { + .mobile-menu, + .cart-drawer { + -webkit-scrollbar-width: thin; + scrollbar-width: thin; + } + .mobile-menu::-webkit-scrollbar, + .cart-drawer::-webkit-scrollbar { + width: 2px; + } + .mobile-menu::-webkit-scrollbar-track, + .cart-drawer::-webkit-scrollbar-track { + background-color: #eeeeee; + } + .mobile-menu::-webkit-scrollbar-thumb, + .cart-drawer::-webkit-scrollbar-thumb { + background-color: #c1c1c1; + } + .mobile-menu::-webkit-scrollbar-thumb:hover, + .cart-drawer::-webkit-scrollbar-thumb:hover { + background-color: var(--primary-font-color); + } +} +/************************************* scrollbar css end *************************************/ + +/************************************* keyframes css start *************************************/ +/*==================================== + loaderProgress keyframes css +====================================*/ +@-webkit-keyframes loaderProgress { + 0% { + -webkit-transform: scaleX(0); + transform: scaleX(0); + } 100% { + -webkit-transform: scaleX(1); + transform: scaleX(1); + } +} +@keyframes loaderProgress { + 0% { + -webkit-transform: scaleX(0); + transform: scaleX(0); + } 100% { + -webkit-transform: scaleX(1); + transform: scaleX(1); + } +} + +/*==================================== + loaderText keyframes css +====================================*/ +@-webkit-keyframes loaderText { + 0% { + width: 0%; + } 100% { + width: 100%; + } +} +@keyframes loaderText { + 0% { + width: 0%; + } 100% { + width: 100%; + } +} + +/*==================================== + slide-left keyframes css +====================================*/ +@-webkit-keyframes slide-left { + 0% { + transform: translate3d(0, 0, 0); + } + 100% { + transform: translate3d(-50%, 0, 0); + } +} +@keyframes slide-left { + 0% { + transform: translate3d(0, 0, 0); + } + 100% { + transform: translate3d(-50%, 0, 0); + } +} + +/*==================================== + DropDownSlide keyframes css +====================================*/ +@media (min-width: 1200px) { + .DropDownSlide { + -webkit-animation-name: DropDownSlide; + animation-name: DropDownSlide; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } +} +@-webkit-keyframes DropDownSlide { + 0% { + opacity: 0; + visibility: hidden; + } 100% { + opacity: 1; + visibility: visible; + } +} +@keyframes DropDownSlide { + 0% { + opacity: 0; + visibility: hidden; + -webkit-transform: translateY(10px); + transform: translateY(10px); + } 100% { + opacity: 1; + visibility: visible; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +/*==================================== + hoverEffect keyframes css +====================================*/ +@-webkit-keyframes hoverEffect { + 0% { + opacity: 1; + -webkit-transform: scale(0.1); + transform: scale(0.1) + } 100% { + opacity: 0; + -webkit-transform: scale(1.1); + transform: scale(1.1) + } +} +@keyframes hoverEffect { + 0% { + opacity: 1; + -webkit-transform: scale(0.5); + transform: scale(0.5) + } 100% { + opacity: 0; + -webkit-transform: scale(1.1); + transform: scale(1.1) + } +} + +/*==================================== + rotator keyframes css +====================================*/ +@-webkit-keyframes rotator { + 0% { + transform: rotate(0deg); + } 100% { + transform: rotate(270deg); + } +} +@keyframes rotator { + 0% { + transform: rotate(0deg); + } 100% { + transform: rotate(270deg); + } +} + +/*==================================== + dash keyframes css +====================================*/ +@-webkit-keyframes dash { + 0% { + stroke-dashoffset: 280; + } 50% { + stroke-dashoffset: 75; + transform: rotate(135deg); + } 100% { + stroke-dashoffset: 280; + transform: rotate(450deg); + } +} +@keyframes dash { + 0% { + stroke-dashoffset: 280; + } 50% { + stroke-dashoffset: 75; + transform: rotate(135deg); + } 100% { + stroke-dashoffset: 280; + transform: rotate(450deg); + } +} + +/*==================================== + spin keyframes css +====================================*/ +.spin { + -webkit-animation: spin 4s linear infinite; + animation: spin 4s linear infinite; +} +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +/************************************* keyframes css end *************************************/ + +/************************************* animation css start *************************************/ +/*==================================== + animation css +====================================*/ +[data-animate] { + opacity: 0 +} +[data-animate].animate__animated { + opacity: 1 +} +/************************************* animation css end *************************************/ \ No newline at end of file diff --git a/www/css/base.css b/www/css/base.css index c8b0d81..01c0a3e 100644 --- a/www/css/base.css +++ b/www/css/base.css @@ -1,3 +1,78 @@ + +:root { + --brand-gold: #C8963E; + --brand-espresso: #2B1E16; + --brand-sand: #F6F0E6; + --brand-white: #FFFFFF; + --brand-text: #201711; + --brand-muted: #7A6A5C; + --brand-border: #E5D9C8; + --brand-hover: #A87A2B; + --brand-success: #3E6B52; + --brand-error: #A94442; + + --bg-main: #F7F3EC; + --bg-card: #FFFFFF; + --bg-subtle: #EFE8DC; + --bg-accent-section: #EADFCF; + --text-primary: #231B15; + --text-secondary: #6B5E52; + --text-muted: #948577; + --accent-gold: #C8963E; + --accent-gold-hover: #A87A2B; + --accent-gold-light: rgba(200, 150, 62, 0.12); + --brand-dark: #2B1E16; + --border-color: #E2D5C3; + --hero-gradient: linear-gradient(135deg, rgba(200, 150, 62, 0.18) 0%, rgba(247, 243, 236, 0.96) 42%, rgba(255, 255, 255, 0.92) 100%); + --font-sans: 'Plus Jakarta Sans', sans-serif; + --font-serif: 'Cinzel', serif; +} + +.text-brand-dark { + color: var(--brand-dark); +} + +.text-gold { + color: var(--brand-gold); +} + +.font-serif { + font-family: var(--font-serif); +} + +.btn-gold { + color: var(--brand-white); + background: linear-gradient(135deg, var(--brand-gold) 0%, var(--accent-gold) 100%); + border: 1px solid var(--brand-gold); + border-radius: 999px; + box-shadow: 0 12px 24px rgba(200, 150, 62, 0.18); + transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; +} + +.btn-gold:hover, +.btn-gold:focus, +.btn-gold:active { + color: var(--brand-white); + background: linear-gradient(135deg, var(--brand-hover) 0%, var(--brand-gold) 100%); + border-color: var(--brand-hover); + box-shadow: 0 16px 28px rgba(168, 122, 43, 0.22); +} + +.bg-card-custom { + background-color: var(--bg-card); + border: 1px solid var(--brand-border); + border-radius: 1.5rem; + box-shadow: 0 18px 42px rgba(43, 30, 22, 0.04); +} + +.bg-brand-dark { + background-color: var(--brand-dark); +} + +.bg-brand-sand { + background-color: var(--brand-sand); +} + /* BASE */ * { margin: 0; diff --git a/www/img/assets/logo.png b/www/img/assets/logo.png index 085e5e6..69fa685 100644 Binary files a/www/img/assets/logo.png and b/www/img/assets/logo.png differ diff --git a/www/img/assets/other/breadcrumb-bgimg3.jpg b/www/img/assets/other/breadcrumb-bgimg3.jpg index ea2fdd1..803e3e7 100644 Binary files a/www/img/assets/other/breadcrumb-bgimg3.jpg and b/www/img/assets/other/breadcrumb-bgimg3.jpg differ diff --git a/www/system-brs-core/app/index/inc/indexController.php b/www/system-brs-core/app/index/inc/indexController.php index aefb698..49e06f1 100644 --- a/www/system-brs-core/app/index/inc/indexController.php +++ b/www/system-brs-core/app/index/inc/indexController.php @@ -26,7 +26,7 @@ class indexController extends cCore const IMG_ASSETS_DEFAULT_SERVICE = '/img/assets/service-1.png'; const IMG_ASSETS_DEFAULT_TESTIMONIAL = '/img/assets/testimonial/testi-1.jpg'; const IMG_ASSETS_DEFAULT_TESTIMONIAL_BG = '/img/assets/testimonial-bgimg.png'; - const IMG_DEFAULT_BREADCRUMBS_BG = '/img/assets/other/base_cat_bg.png'; + const IMG_DEFAULT_BREADCRUMBS_BG = '/img/assets/other/breadcrumb-bgimg3.jpg'; const IMG_DEFAULT_COLLECTION_BANNER = '/img/assets/collection/collection-banner.jpg'; const IMG_DEFAULT_POPUP_BG = '/img/assets/newsletter/newsletter-popup.jpg'; diff --git a/www/system-brs-core/app/index/tmpl/include/index/category-slider.twig b/www/system-brs-core/app/index/tmpl/include/index/category-slider.twig index c461d70..60b2c2f 100644 --- a/www/system-brs-core/app/index/tmpl/include/index/category-slider.twig +++ b/www/system-brs-core/app/index/tmpl/include/index/category-slider.twig @@ -2,9 +2,8 @@
- {{ dt.gM("Shop by categories") }}
-

{{ dt.gM("Natural and certified organic products") }}

+

{{ dt.gM("Shop by categories") }}

@@ -12,22 +11,21 @@
{% for cat in CATEGORY_SLIDER %}
- {% endfor %}
- {# I assume the swiper-buttons are needed for the template to work as they are hidden in the front #}
@@ -37,9 +35,6 @@
-
- {{ dt.gM("Shop more") }} -
diff --git a/www/system-brs-core/app/index/tmpl/include/index/featured-product.twig b/www/system-brs-core/app/index/tmpl/include/index/featured-product.twig index 29d48c6..371c77d 100644 --- a/www/system-brs-core/app/index/tmpl/include/index/featured-product.twig +++ b/www/system-brs-core/app/index/tmpl/include/index/featured-product.twig @@ -2,7 +2,6 @@
- {{ dt.gM("Our featured product") }}

{{ dt.gM("Cretified organic & natural ingredients") }}

@@ -29,21 +28,20 @@ {{ dt.gM("wishlist") }} -{# #} -{# #} -{# {{ dt.gM("quickview") }}#} -{# #} + + + + + + + {{ dt.gM("add to cart") }} + + + + {{ dt.gM("quickview") }} +
-
- - - {{ dt.gM("Add to cart") }} - - - - -
@@ -51,11 +49,10 @@
{{ product.title }}
-
+
@@ -104,9 +101,6 @@
-
- {{ dt.gM("Shop collection") }} -
diff --git a/www/system-brs-core/app/index/tmpl/include/index/home-about-text.twig b/www/system-brs-core/app/index/tmpl/include/index/home-about-text.twig index fb3d546..fddc699 100644 --- a/www/system-brs-core/app/index/tmpl/include/index/home-about-text.twig +++ b/www/system-brs-core/app/index/tmpl/include/index/home-about-text.twig @@ -1,21 +1,21 @@ -
+
{% for section in ABOUT_TEXT %}
- {{ section.subtitle }} + {{ section.subtitle }}
-

{{ section.title }}

+

{{ section.title }}

-
+
{{ section.description }}
- + {{ section.button_text }}
diff --git a/www/system-brs-core/app/index/tmpl/include/index/home-slider.twig b/www/system-brs-core/app/index/tmpl/include/index/home-slider.twig index 881f585..784af4e 100644 --- a/www/system-brs-core/app/index/tmpl/include/index/home-slider.twig +++ b/www/system-brs-core/app/index/tmpl/include/index/home-slider.twig @@ -11,13 +11,13 @@
- + {{ slide.heading }} -

+

{{ slide.subtitle }}

- + {{ slide.btn_text }}
diff --git a/www/system-brs-core/app/index/tmpl/include/index/service-area.twig b/www/system-brs-core/app/index/tmpl/include/index/service-area.twig index 168094f..d05c960 100644 --- a/www/system-brs-core/app/index/tmpl/include/index/service-area.twig +++ b/www/system-brs-core/app/index/tmpl/include/index/service-area.twig @@ -1,20 +1,20 @@ -
+
-

{{ dt.gM("Inspired by traditional knowledge and nature") }}

+

{{ dt.gM("Inspired by traditional knowledge and nature") }}

{% for service in SERVICE_AREA %}
-
- +
+ {{ service.title }} -
-
{{ service.title }}
-

{{ service.text }}

+
+
{{ service.title }}
+

{{ service.text }}

diff --git a/www/system-brs-core/app/index/tmpl/include/index/testimonial.twig b/www/system-brs-core/app/index/tmpl/include/index/testimonial.twig index 880592e..1471b49 100644 --- a/www/system-brs-core/app/index/tmpl/include/index/testimonial.twig +++ b/www/system-brs-core/app/index/tmpl/include/index/testimonial.twig @@ -7,45 +7,39 @@

{{ dt.gM('"Happy client"') }}

-
-
-
-
-
- {% for testi in TESTIMONIAL %} -
-
-

{{ testi.quote }}

-
{{ testi.role }}
-
-
- {{ testi.name }} -
-
{{ testi.name }}
-
- -{# {{ stars.render(testi.rating) }}#} - -
-
-
+
+
+
+ {% for testi in TESTIMONIAL %} +
+
+

{{ testi.quote }}

+
+ {{ testi.name }} +
+
{{ testi.name }}
+ {{ testi.role }} +
+ +{# {{ stars.render(testi.rating) }}#} +
- {% endfor %} +
-
-
-
- - -
-
-
-
-
+ {% endfor %}
+
+
+ + +
+
+
+
+
diff --git a/www/system-brs-core/app/pubBuy/tmpl/checkout.twig b/www/system-brs-core/app/pubBuy/tmpl/checkout.twig index 02c733a..08f287d 100644 --- a/www/system-brs-core/app/pubBuy/tmpl/checkout.twig +++ b/www/system-brs-core/app/pubBuy/tmpl/checkout.twig @@ -9,7 +9,7 @@
{% if has_errors %} -
+
{{ dt.gM("Please review checkout form fields.") }}
{% endif %} @@ -20,7 +20,7 @@
-
+