/* Theme Name: LuxuryConcept Theme URI: https://www.luxuryconcept.website Author: Stefano Fattori Author URI: https://www.stefanofattori.it Description: A lightweight, fast and responsive WordPress theme with Header Styles like transparent Header Template, 3 Menus, 11 Amazing Block Patterns, WhatsApp Chat Icon, Cool animations and Woocommerce support. Outstanding performance, modern design, and intuitive customization. Optimized for mobile devices, it delivers a seamless user experience. Requires at least: 6.0 Tested up to: 6.5.2 Requires PHP: 7.0 Version: 1.5.0 License: GNU General Public License v3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html Text Domain: luxuryconcept Tags: translation-ready, grid-layout, blog, e-commerce, news, custom-menu, featured-images, custom-header, left-sidebar, right-sidebar, one-column, two-columns, block-patterns, wide-blocks, custom-background, custom-colors, custom-logo, featured-image-header, footer-widgets, full-width-template, sticky-post Domain Path: /languages This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ /* ! Reset */ body, html{ font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0;padding: 0; scroll-behavior: smooth;scrollbar-gutter: stable;} *,*:before,*:after{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } h1,h2,h3,h4,h5,h6,p,ol,ul,nav,img,button,input{margin: 0;padding: 0;} img{height: auto;} a{text-decoration: none;} hr{border:none; border-bottom: 1px solid #000} .wp-block-group ol, .wp-block-group ul{list-style-type:none;} /* ------------------------------------------------------------------------- */ /* ----------------------- Base CSS ---------------------------------------- */ /* ------------------------------------------------------------------------- */ /* VARIABLES CUSTOMIZABLE ON WP CUSTOMIZER */ :root { --site-bg: #FFFFFF; --link-color: #45cfbe; --link-color-hover: #3eb2bc; --header-bg: #FFFFFF; --borders-color: #45cfbe; --show-footer-header-borders: 1px solid var(--borders-color); --site-text-color: #000000; --header-text-color: #000000; --header-transparent-text-color: #FFFFFF; --header-menu-background-color: #FFFFFF; --mobile-menu-background-color: #FFFFFF; --posts-color: #f4f4f4; --site-font-size: 16px; --body-font-family: 'Quicksand'; --heading-font-family: 'Lato'; --h1-font-size: 2.4rem; --h2-font-size: 1.5rem; --h3-font-size: 1.0rem; --h4-font-size: 0.8rem; --number-col-masonry: 3; --wrapper-max-width: 1300px; /* MAX-WIDTH LAYOUT GRID CONTENT */ /* ==== CONTENT PADDING - DESKTOP === */ --content-padding-y: 10px; --content-padding-x: 15px; --content-padding: var(--content-padding-y) var(--content-padding-x); /* === / CONTENT PADDING - DESKTOP === */ /* ==== CONTENT PADDING - TABLET === */ --content-padding-y-tablet: 10px; --content-padding-x-tablet: 15px; --content-padding-tablet: var(--content-padding-y-tablet) var(--content-padding-x-tablet); /* === / CONTENT PADDING - TABLET === */ /* ==== CONTENT PADDING - SMARTPHONE === */ --content-padding-y-smartphone: 10px; --content-padding-x-smartphone: 15px; --content-padding-smartphone: var(--content-padding-y-smartphone) var(--content-padding-x-smartphone); /* === / CONTENT PADDING - SMARTPHONE === */ --header-mobile-height: auto; /*80px;*/ --header-desktop-height: auto; /*135px;*/ --header-height: 0; --sticky-header: static; --blur-background-header: none; --header__logo-position: 1; --header__menu-position: 2; --header__quick-position: 3; --header__hamburger-position: 4; --header__logo-justify-content: flex-start; --header__menu_flex: 2; --header__menu_textalign: center; --topbar-bg: #45cfbe; --topbar-text-color: #FFFFFF; --footer-stickybar-background: #45cfbe; --logo-invert-color: none; /* Invert color logo for transparent header */ /* FIX ADMIN WPBAR POSITION*/ --wpadminbar-desktop-height: 32px; --wpadminbar-mobile-height: 46px; } /* Typography */ body{font-size: var(--site-font-size); background-color: var(--site-bg); color: var(--site-text-color); font-family: var(--body-font-family); } body.custom-background.dark{background-color: var(--site-bg);} /* ! Title System */ h1, h2, h3, h4, h5, h6, p, ol, ul{margin-bottom: 1rem;line-height: 1.2; } h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font-family); } h1, .text-1{font-size: var( --h1-font-size);} h2, .text-2{font-size: var( --h2-font-size);} h3, .text-3{font-size: var( --h3-font-size);} h4, .text-4{font-size: var( --h4-font-size);line-height: 1.5rem} @media (max-width: 768px) { } /* CALL TO ACTION LINKS */ input.cta, button.cta, .cta a{outline:0; color:#fff!important; background-color: var(--link-color) !important; border-radius: 100px !important;padding-left:20px !important;padding-right:20px !important;white-space:nowrap;} /* Input Style */ input:not([type="submit"]), textarea { font-family: var(--body-font-family); border: 1px solid #e4e4e4;background: #fff; border-radius: 100px; padding: 10px; } textarea{border-radius: 10px;width: 100%;} input[type=submit], button[type=submit] {cursor: pointer; padding: 12px 18px; color: #fff; text-transform: uppercase; background: var(--link-color); border:none;font-weight: bold;width: auto;border-radius: 100px;} input[type=submit]:active, button[type=submit]:active, .cta:active{outline: 0; transform:scale(0.9);transform: translate(2px,2px)} input:focus, textarea:focus{ outline: 0;box-shadow: 0px 0px 8px -1px var(--borders-color) !important; transition: box-shadow 0.5s ease-in; } select{ border-radius: 15px; padding: 3px 7px; font-size: var(--site-font-size); border: 1px solid #e4e4e4; } /* Link color */ a { color: var(--link-color); } a:focus:not(.wp-block-button__link), a:hover:not(.wp-block-button__link) { color: var(--link-color-hover); text-decoration: none; } .has-text-color a { color: unset;} /* ------------------------------------------------------------------------- */ /* ------------------------ LAYOUT & TEMPLATE ------------------------------ */ /* ------------------------------------------------------------------------- */ .main_wrapper{ /* FIX SCROLLBAR X WHEN CONTENT OVERFLOW WRAPPER_CONTENT GRID */ width: 100%; max-width: 100%; overflow-x: clip; } .wrapper_content{ display: grid; grid-template-columns: minmax(200px, 1fr) 4fr; grid-template-areas: "breadcrumbs breadcrumbs" "primary-sidebar main-content"; padding: var(--content-padding); margin: 0 auto; max-width: var(--wrapper-max-width); gap: 20px 55px; } /* ------------------------ HEADER ------------------------------- */ .header{ background-color: var(--header-bg); max-width: 100vw; height: var(--header-desktop-height);position: var(--sticky-header); top:0;left:0;z-index: 9999; border-bottom: var(--show-footer-header-borders); border-color: var(--borders-color);backdrop-filter: var(--blur-background-header); -webkit-backdrop-filter: var(--blur-background-header); } body.scroll-down .header{box-shadow:0 5px 13px 0 rgba(228,228,228,.75);} .header__content{display: flex; gap:15px;flex-direction: row; justify-content: space-between;align-items: center;align-self:flex-start;padding: var(--content-padding);max-width: var(--wrapper-max-width); margin:0 auto;} /*@media screen and (min-width: 991px){*/ /* Blur background effect if enabled on WP Customizer (only Desktop) */ /*body.scroll-down .header{ backdrop-filter: var(--blur-background-header); -webkit-backdrop-filter: var(--blur-background-header);}*/ /*}*/ .header a{color: var(--header-text-color);} .header__logo{display: flex; order: var(--header__logo-position); flex: 1; justify-content: var(--header__logo-justify-content); overflow: hidden; overflow-wrap: anywhere; } .header__logo-img{ width: 100% !important; max-width: 250px !important; max-height: 100px !important; } .header__logo h1{font-size: 1.8rem;margin-bottom: 0.5rem;} .header__logo h2{font-size: 1.0rem;margin: 0;color:#A8A8A8;} .header__hamburger{display: none;} @media (max-width: 991px) { .header{height: var(--header-mobile-height);} .header__logo-img{ max-width: 180px !important; max-height: 70px !important; } .header__hamburger{display: flex; order: var(--header__hamburger-position);flex:0;justify-content: flex-end;} } @media (max-width: 768px) { .header__logo h1{font-size: 1.2rem;} .header__logo h2{font-size: 0.8rem;} } @media (min-width: 768px) and (max-width: 991px) { } /* ------------------------ TOPBAR ------------------------------- */ .topbar{ background-color: var(--topbar-bg); height:40px;} .topbar__content{ text-align: center; white-space:nowrap;padding: var(--content-padding); margin: 0 auto; max-width: var(--wrapper-max-width);} .topbar__content * {color: var(--topbar-text-color) !important;} /* ------------------------ BREADCRUMBS ------------------------------- */ .breadcrumbs{ grid-area: breadcrumbs; border-bottom: 1px solid var(--borders-color); padding: 10px 0; font-size: calc(var(--site-font-size) - 2px );} .breadcrumbs ul{margin: 0; list-style-type: none;} .breadcrumbs ul li{display: inline-block;} .breadcrumbs ul li:not(:last-child){margin-right: 3px;} .breadcrumb_item_home::before{ vertical-align: sub; content: url('data:image/svg+xml,');} /* ------------------------ PRIMARY SIDEBAR, MAIN, FOOTER SIDEBAR, FOOTER ------------------------------- */ .primary-sidebar{ grid-area: primary-sidebar;} .main-content{ grid-area: main-content; } .footer-sidebar{ background-color: var(--site-bg); border-bottom: var(--show-footer-header-borders); border-top: var(--show-footer-header-borders); border-color: var(--borders-color); padding: 20px 0; } .footer-sidebar__content{max-width: var(--wrapper-max-width); margin: 0 auto;display: flex; flex-flow: row wrap; gap: 35px 50px;justify-content: space-between;align-items:flex-start; padding: var(--content-padding); } @media (max-width: 768px) { .footer-sidebar__content{flex-direction: column;} } .footer{ background-color: var(--site-bg); } .footer__content{max-width: var(--wrapper-max-width); margin: 0 auto;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;gap: 30px;padding: var(--content-padding); } .footer__nav{ align-self: center; width: 100%;} .footer__copyright{ display: inline-flex; align-self: center; justify-content: space-between; width: 100%; margin-bottom: 50px; } .footer__sticky-bar{ display: flex;position: fixed; bottom: 0; left: 0;width: 100%;max-height: 50px; background: var(--footer-stickybar-background); } .footer__sticky-bar a{ display: block; width:100%; padding: 10px; text-transform: uppercase; color: #fff; font-weight: bold; text-align: center; transition: all 0.3s cubic-bezier(.215, .61, .355, 1);} .footer__sticky-bar a:hover{transform: scale(1.1);} .footer__sticky-bar span{width: 24px; height: 24px;} .footer-menu, .footer-menu ul{margin: 0; text-align: center;} .footer-menu li{display: inline-block;} .footer-menu li a{color:var(--link-color); opacity: 0.8;display: block;padding: 0px 12px;font-size: 15px;font-weight: bold;border-right: 2px solid var(--borders-color);} .footer-menu li:last-child a {border-right: 0;} /* ----------------------------- CSS FOR PAGE AND POST TEMPLATES ----------------------------- */ /* Set Grid for Homepage and Transparent Header */ body.home:not(.blog) .wrapper_content, body.page-template-transparent-header .wrapper_content{gap: 0; padding-top: 0; grid-template-columns: 100%;grid-template-areas: "main-content";} /* Set styles and colors for Transparent Header */ body.page-template-transparent-header .header {border: none; } @media (min-width: 991px) { body.page-template-transparent-header:not(.scroll-down) .header {backdrop-filter: none; -webkit-backdrop-filter: none;} body.page-template-transparent-header:not(.scroll-down) .header__logo-img{ filter: var(--logo-invert-color); } body.page-template-transparent-header:not(.scroll-down) .header a:not(:hover){color: var(--header-transparent-text-color);} body.page-template-transparent-header:not(.scroll-down) .menu li.btn-group-menu-item-dropdown > button{ fill: var(--header-transparent-text-color); border-color: var(--header-transparent-text-color); } body.page-template-transparent-header:not(.scroll-down) .sub-menu li.btn-group-menu-item-dropdown > button{ fill: var(--header-text-color); border-color: var(--header-text-color); } body.page-template-transparent-header:not(.scroll-down) .sub-menu a{ color: var(--header-text-color) !important; } body.page-template-transparent-header:not(.scroll-down) .header__quick .menu-item:not(.cta, input, .menu-item-has-children, .menu-item-has-children li, .lang-item), body.page-template-transparent-header:not(.scroll-down) .icon-cart {background-color: var(--header-transparent-text-color); } body.page-template-transparent-header:not(.scroll-down) .header__mini_cart a{color: var(--header-text-color);} } /* NO SIDEBAR TEMPLATE */ body.page-template-page-no-sidebar .wrapper_content, body.post-template-single-no-sidebar .wrapper_content{grid-template-columns: 1fr;grid-template-areas: "breadcrumbs" "main-content";} /* RIGHT SIDEBAR TEMPLATE */ body.page-template-page-sidebar-right .wrapper_content, body.post-template-single-sidebar-right .wrapper_content{grid-template-columns: 4fr minmax(200px, 1fr); grid-template-areas: "breadcrumbs breadcrumbs" "main-content primary-sidebar";} /* PAGE NO TITLE */ body.page-template-page-no-title .wrapper_content{grid-template-columns: 1fr;grid-template-areas: "breadcrumbs" "main-content";} /* --------------------------------------------- */ body.admin-bar .header { top: var(--wpadminbar-desktop-height); } /* Desktop Layout Breakpoint */ @media (min-width: 991px) { /* ----------------------- Transparent Header - Background header: var(--header-bg) --------------------------- */ .page-template-transparent-header .header {background: transparent; transition: background 1s cubic-bezier(.215, .61, .355, 1);} .page-template-transparent-header.scroll-down .header {background: var(--header-bg);} /* Add Header BG Color adding .scroll-down in JS */ } /* Tablet Layout Responsive */ @media (max-width: 991px) { .wrapper_content, .header__content, .topbar__content, .footer-sidebar__content, .footer__content { padding: var(--content-padding-tablet);} /* Fix padding-content for mobile (var: --content-padding-tablet) */ .page-template-transparent-header .wrapper_content{ margin-top: 0 !important; } } /* Smartphone Layout Responsive */ @media (max-width: 768px) { .wrapper_content, .header__content, .topbar__content, .footer-sidebar__content, .footer__content { padding: var(--content-padding-smartphone);} /* Fix padding-content for mobile (var: --content-padding-smartphone) */ .wrapper_content, body.page-template-page-sidebar-right .wrapper_content, body.post-template-single-sidebar-right .wrapper_content{ grid-template-columns: 1fr; grid-template-areas: "breadcrumbs" "main-content" "primary-sidebar"; } .footer-sidebar{flex-direction: column;} .footer-menu li{display: block;line-height: 30px;} .footer-menu li a{border-bottom: 1px solid var(--borders-color);border-right: 0;} .footer-menu li:last-child a {border:none;} body.admin-bar .header { top: var(--wpadminbar-mobile-height); } } /* ------------------------------------------------------------------------- */ /* ---------------------END LAYOUT & TEMPLATE ------------------------------- */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* ---------------- Header Menu & Dropdown (sub menu) ---------------------- */ /* -------- .mobile-menu class refers to Mobile Menu Dropdown only --------- */ /* ------------------------------------------------------------------------- */ .menu, .sub-menu {z-index:9999;margin:0;padding:0;} .menu-item-has-children{position:relative;} /*.menu ul, .mobile-menu ul, .sub-menu ul, .quickmenu ul {padding: 0;margin:0;list-style-type: none; }*/ header ul {margin:0;list-style-type: none;} /* Dropdown button menu item */ .menu li.menu-item-has-children button, .mobile-menu li.menu-item-has-children button, .quickmenu li.menu-item-has-children button{ margin: 0 16px 0 0; -webkit-box-sizing: content-box; box-sizing: content-box; border: 1px solid var(--header-text-color); width: 20px; height: 20px; cursor: pointer; border-radius: 5px; background: transparent; vertical-align: middle; fill: var(--header-text-color); } .sub-menu li.menu-item-has-children button{ fill: var(--header-text-color);} .menu .sub-menu li.menu-item-has-children button { margin-right: 16px; transform: rotate(-90deg);} /* Fix link color when submenu's opening */ .sub-menu li a:hover{ color: var(--header-text-color);} /* Basic Menu Style */ .header__menu{order: var(--header__menu-position); flex: var(--header__menu_flex); text-align: var(--header__menu_textalign); margin: 0;} .header__menu .current_page_item > a, .header__menu .current-menu-item > a{ text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--borders-color); } .header__menu > a:hover { color: var(--link-color-hover); transition: all 0.3s; } .header__menu .sub-menu li:hover, .header__quick .sub-menu li:hover { background: var(--link-color-hover); transition: all 0.3s; } @media (max-width: 991px) { .header__menu{display: none;} } /* Set Submenu Style and Position */ .menu > li.menu-item-has-children > .sub-menu, .sub-menu > li.menu-item-has-children .sub-menu, .mobile-menu > li.menu-item-has-children > .sub-menu, .quickmenu > li.menu-item-has-children > .sub-menu { position: absolute; top: -9999px; left: 0; padding: 15px 0; background: var(--mobile-menu-background-color); box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-align: left; transition: opacity 0.3s ease, transform 0.3s ease; opacity: 0; visibility: hidden; border-radius: 5px; border-top: solid 5px var(--borders-color); } /* Open Dropdown Menu On Desktop (Hover effect) */ @media (min-width: 991px) { /* Basic Style */ .menu li, .quickmenu li { display: inline-flex; position: relative; align-items: center;} .menu li a, .quickmenu li a {padding: 16px 5px 16px 16px;font-size: 15px;font-weight: bold;} /* Top Chevron sub-menu */ .menu > li.menu-item-has-children > .sub-menu::before{ content: ""; position: absolute; top: -22px; left: 25%; border: 9px solid transparent; /*border-bottom-color: var(--header-menu-background-color);*/ border-bottom-color: var(--borders-color); /*transform: translateX(-25%);*/ } /* Menu Dropdown */ .sub-menu li{ display: block; position: relative; } .sub-menu li a{ display: block; white-space:nowrap; padding: 16px;} .sub-menu .btn-group-menu-item-dropdown{display: flex; align-items: center; justify-content: space-between;flex-wrap: nowrap;} /* Transition Effect submenu */ .sub-menu > li.menu-item-has-children .sub-menu { transition: opacity 0.6s ease, left 0.3s ease; } /* OPEN Dropdown Menu On Desktop (Hover effect) */ .menu > li.menu-item-has-children:hover > .sub-menu, .quickmenu > li.menu-item-has-children:hover > .sub-menu { top: 60%; transform: translate(0, 20px); opacity: 1; visibility: visible; } .sub-menu > li.menu-item-has-children:hover > .sub-menu { top: 0px; opacity: 1; visibility: visible; left: 100%; } /* Open Dropdown Desktop items and sub-items using js function */ .open-dropdown > .sub-menu { top: 60% !important; transform: translate(0, 20px) !important; opacity: 1 !important; visibility: visible !important; } .open-dropdown-sub > .sub-menu { top: 0px !important; opacity: 1 !important; visibility: visible !important; left: 100% !important; } } /* ------------------------------------------------------------------------- */ /* ------------ Hamburger Menu + Menu Dropdown Mobile ---------------------- */ /* ------------------------------------------------------------------------- */ /* MENU HAMBURGER */ @media (max-width: 991px) { .menu-hamburger-button { display: block; background-color: transparent; border: none; cursor: pointer; } .menu-hamburger-button strong{ height: 1px;margin-top:-1px; overflow: hidden;width: 1px;display: block;margin: 0;} .menu-hamburger-button span { display: block; background-color: #000; height: 4px; width: 30px; margin-bottom: 6px; transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1); border-radius: 4px; } .mobile-menu-opened .menu-hamburger-button span:nth-child(2) { margin-bottom: 0px; transform: rotate(405deg); } .mobile-menu-opened .menu-hamburger-button span:nth-child(3) { background: rgba(255, 255, 255, 0); display: none; } .mobile-menu-opened .menu-hamburger-button span:nth-child(4) { margin-top: -4px; transform: rotate(-405deg); } /* MENU MOBILE DROPDOWN */ /* Basic mobile menu style (closed) */ .mobile-menu { position: absolute; top: calc( var(--header-height) - 1px ); left: 0; width: 100%; height: 0; margin: 0; padding: 0 15px; background: var(--mobile-menu-background-color); border:none; z-index:20; overflow-y:scroll; transition: height 1s cubic-bezier(.215, .61, .355, 1) } /* Open Mobile Menu Dropdown */ .mobile-menu-opened .mobile-menu { height: calc(100vh - var(--header-height) - 1px); transition: height 1s cubic-bezier(.215, .61, .355, 1) } .has-top-bar.mobile-menu-opened .mobile-menu { height: calc(100vh - var(--header-height) - 1px - 40px); } /* Basic Style Mobile Menu Dropdown */ .mobile-menu li {display: block;} .mobile-menu li:not(.cta, .btn-group-menu-item-dropdown) {border-bottom: 1px solid var(--borders-color); width: 100%;} .mobile-menu li a{display: block; padding: 16px; font-size: 15px;font-weight: bold;width: 100%;} .mobile-menu .btn-group-menu-item-dropdown{display: flex; align-items: center; justify-content: space-between;flex-wrap: nowrap;border: none;gap: 20px;} .mobile-menu .cta{margin-top:35px;width:60%;} /* Set Submenu Style and Position on Mobile */ .mobile-menu > li.menu-item-has-children > .sub-menu, .sub-menu > li.menu-item-has-children > .sub-menu { border-left: 1px solid #D0D0D0; padding: 0 16px; margin-bottom: 30px; text-align: left; width: 100%; } /* open Dropdown Mobile items and sub-items using js function */ .open-dropdown > .sub-menu { position: static !important; transform: translate(0, 10px) !important; opacity: 1 !important; visibility: visible !important; } /* Rotate chevron when dropdown open */ .open-dropdown.menu-item-has-children > ul > li.btn-group-menu-item-dropdown > button { transform: rotate(180deg);} .sub-menu > li:last-child{border-bottom: none;} } /* ------------------------------------------------------------------------- */ /* ------------------------ Flex Quick Header Menu ------------------------- */ /* ------------------------------------------------------------------------- */ .header__quick{display: flex; order: var(--header__quick-position); flex: 1; align-items: center;font-weight: bold; gap:15px; justify-content: flex-end;} .header__quick .quickmenu{list-style-type: none;margin-bottom: 0;display: flex; align-items: center;gap:15px;} .header__quick > ul > li > a{padding: 10px 0px;} @media (max-width: 768px) { .header__quick{display: none;} } /* ------------------------------------------------------------------------- */ /* ------------------------ END HEADER MENU -------------------------------- */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* ------------------ MINI CART DROPDOWN FOR WOOCOMMERCE ------------------- */ /* ------------------------------------------------------------------------- */ .header__mini_cart{position: relative;list-style-type: none; margin: 0;outline: 0;} .mini_cart_button{cursor: pointer;} .badge-cart-items-count{ display: inline-block;text-align: right; margin: 0; position:relative;} .badge-cart-items-count::before{ content:attr(value); font-size:13px; font-weight: 600; color: #fff; background: rgba(255,0,4,0.9); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5); border-radius:50%; padding: 2px; min-width: 19px; height: 19px; position:absolute; line-height: 16px; top: -7px; right: 0; z-index: 9999; text-align: center; } .widget_shopping_cart{ padding: 0 15px; position: absolute; top: -99999px; /*top: 175%;*/ right: 0; background: var(--header-menu-background-color); width: 270px; /*border: 1px solid var(--borders-color);*/ border-top: solid 5px var(--borders-color); border-radius: 15px; /*padding: 20px 15px 10px 15px;*/ font-size: 14px; /*overflow: hidden;*/ max-height: 0; transition: max-height 0.5s ease-in, padding 0.5s ease-in, top 10.5s ease-in; box-shadow: 0 4px 12px rgba(0,0,0,0.4); animation: 0.6s fadeOut; animation-fill-mode: forwards; /*visibility: hidden;*/ } .widget_shopping_cart-open{ top: 175%; animation: 0.2s fadeIn; animation-fill-mode: forwards; /*visibility: visible;*/ max-height: 1000px; padding: 20px 15px 15px; transition: max-height 0.5s ease-in, padding 0.5s ease-in; } .widget_shopping_cart::before{ content: ""; position: absolute; top: -22px; right: 5%; border: 9px solid transparent; border-bottom-color: var(--borders-color); } .widget_shopping_cart_content{ overflow: hidden; max-height: inherit; } .widget_shopping_cart p, .widget_shopping_cart a{font-size: 14px;} .woocommerce ul.cart_list li img, .woocommerce ul.product_list_widget li img{ width: 48px !important;} @media (max-width: 768px) { .header__mini_cart{display: none;} } /* ------------------------------------------------------------------------- */ /* ----------- END MINI CART DROPDOWN FOR WOOCOMMERCE ---------------------- */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* ------------------------- WOOCOMMERCE STYLES ---------------------------- */ /* ------------------------------------------------------------------------- */ :where(.woocommerce) .button { background-color: var(--link-color) !important; color:#fff !important; border-radius: 100px !important; } .woocommerce .woocommerce-ordering select{ border: 1px solid var(--borders-color) !important; border-radius: 100px !important; text-transform: uppercase !important; padding: 5px !important; outline: 0 !important; } .woocommerce ul.products li.product .button{ border-radius: 100px;} .select2-container--default .select2-selection--single{border: 1px solid #e4e4e4; border-radius: 15px;} .select2-dropdown{border: 1px solid #e4e4e4;} .woocommerce .quantity .qty {width: 6em;} .woocommerce #content table.cart td.actions .input-text, .woocommerce table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text{width: auto;} .woocommerce .star-rating span::before{color: #e6a237;} .product_meta{margin-top: 30px;} .woocommerce-variation{margin-bottom: 30px;} .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price{color: var(--link-color-hover);} .woocommerce span.onsale{background-color: var(--link-color); min-width: 4em;} :where(body.woocommerce) .breadcrumbs a:first-child::before{ vertical-align: sub; content: url('data:image/svg+xml,');} .woocommerce-form-login, .woocommerce-form-register{ background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%, rgba(0, 0, 0, 1) 100%); border-top: 4px solid var(--borders-color); } /* ------------------------------------------------------------------------- */ /* --------------------- END WOOCOMMERCE STYLES ---------------------------- */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * /* 2.2 Home */ /* ------------------------------------------------------------------------- */ .home-title { position: absolute; top:-9999px; color: #fff; font-size: 12px;} /* ------------------------------------------------------------------------- * /* 2.3 Index */ /* ------------------------------------------------------------------------- */ /* Single, Post & Page */ @media (max-width: 768px) { h1 span{display: block;} } .thumbnail_container{ position:relative; } .single-image-caption{ position:absolute; bottom: 23px; background-color: rgba(69, 207, 190, 0.8); width:100%; padding: 15px; font-style:italic; font-size: 14px; } .date_meta::before{ content: url('data:image/svg+xml,'); vertical-align: sub; } .time_meta::before{ content: url('data:image/svg+xml,'); vertical-align: sub; padding-left: 3px; } .single_tags{margin-top: 50px;} .single_tags a{ display: inline-block; color: var(--site-text-color); background-color: var(--link-color); padding: 4px 6px; margin: 3px; border-radius: 3px; text-transform: uppercase;} .related-post{align-items: flex-start;justify-content: space-between;} :where(article) ul{ padding-left: 40px;} /* ----------------------------- POSTS CARDS TEMPLATE ----------------------------- */ .post-cards { display: flex; flex-direction: row; flex-wrap: wrap; list-style: none; margin: 0; } .cards__item { display: flex; padding: 1rem; @media(min-width: 40rem) { width: 50%; } @media(min-width: 56rem) { width: 33.3333%; } } .card { color: #999999; background-color: white; border-radius: 0.25rem; box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25); display: flex; flex-direction: column; overflow: hidden; &:hover { .card__image { filter: contrast(100%); } } } .card__content { display: flex; flex: 1 1 auto; flex-direction: column; padding: 1rem; } .card__image { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; filter: contrast(70%); /*filter: saturate(180%);*/ overflow: hidden; position: relative; transition: filter 0.5s cubic-bezier(.43,.41,.22,.91); } .card__image img{ width: 100%; height: auto; } .card__title { color: #696969; font-size: 1.25rem; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; } .card__text { flex: 1 1 auto; font-size: 0.875rem; line-height: 1.5; margin-bottom: 1.25rem; } .card__btn { background-color: white; border: 1px solid #cccccc; border-radius: 1rem; color: #696969; padding: 0.5rem; text-align: center; appearance: button; } .card__btn--block { display: block; width: 100%; } /* ---------------------------- / POSTS CARDS TEMPLATE ---------------------------- */ /* -------------------------- POSTS TEMPLATE Masonry Grid -------------------------- */ .grid-masonry{ columns: 200px var(--number-col-masonry); column-gap: 1rem; } .grid-masonry-item, .grid-masonry.wp-block-post-template li{ font-size: 90%; margin: 0 1rem 1rem 0; display: inline-block; width: 100%; border-radius: 5px; background-color: var(--posts-color); border: 1px solid var(--borders-color); box-shadow: 0 2px 2px rgba(0,0,0,0.05), 0 4px 4px rgba(0,0,0,0.05), 0 8px 8px rgba(0,0,0,0.05), 0 3px 15px rgba(0,0,0,0.05); } .grid-masonry.wp-block-post-template li .wp-block-group__inner-container{padding: 15px;} .grid-masonry.wp-block-post-template li .wp-block-group__inner-container a{text-decoration: none;} @media (max-width: 991px) { .grid-masonry{columns: 1;} } body.search-no-results .grid-masonry{ columns: 1; } .post-title{text-transform: capitalize;} /* ------------------------- / POSTS TEMPLATE Masonry Grid ------------------------- */ /* ------------------------------------------------------------------------- * /* 2.4 Sections */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * /* 2.6 Footer */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * /* 3 Modules */ /* ------------------------------------------------------------------------- */ /* Pagination (Posts, Pages and Comments) */ .pagination, .navigation, .wp-block-query-pagination{width: 100%;margin: 35px 0;} .post-nav-links, .nav-links, .wp-block-query-pagination-numbers {margin: 15px 0; width: 100%; display: flex; justify-content: center;align-items: center;flex-wrap: wrap;} .post-nav-links span, .nav-links span, .wp-block-query-pagination-numbers span, .post-nav-links a, .nav-links a, .wp-block-query-pagination-numbers a {display: flex;justify-content: center;align-items: center; min-width: 34px; height: 34px;margin: 6px; padding: 8px 13px; border: 1px solid var(--borders-color); border-radius: 5px;box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12); text-decoration: none !important;} .post-nav-links span.current, .nav-links span.current, .wp-block-query-pagination-numbers span.current{color: #fff; font-weight: 600; background-color: var(--link-color-hover); } /* ------------------------------------------------------------------------- */ /* ------------------ WordPress Default Element ---------------------------- */ /* ------------------------------------------------------------------------- */ /* clearfix for post float images */ .clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } /* Accessibility */ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; right: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } /* underline for accesibility */ .text-content a, .comment-content a{text-decoration: underline;} /* Image */ .alignleft { float: left; margin-right: 20px; margin-bottom: 10px; max-width: 97%; height: auto; } .alignright { float: right; margin-bottom: 10px; margin-left: 20px; max-width: 97%; height: auto; } .aligncenter { display: block; margin: 0 auto; max-width: 97%; height: auto; } .alignnone { max-width: 97%; height: auto; } .text-center{text-align: center;} @media (max-width: 768px) { .sma-text-center{float:none; text-align: center;} } body .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } body .alignwide { margin-left: calc(25% - 25vw); margin-right: calc(25% - 25vw); } .alignwide img, .alignfull img { display: block; margin: 0 auto; } /* body .alignfull-padding-content{ width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: var(--content-padding); padding-top:0; padding-bottom:0; } */ /* ==================== WP BLOCKS ========================== */ /* Button Link */ .wp-block-button__link{text-decoration: none !important; background-color: var(--link-color); border:none; } .wp-block-button__link:hover{text-decoration: none !important; background-color: var(--link-color-hover);} .wp-block-button__link a:hover{ color: #ffffff !important; } .wp-block-verse{ margin-bottom: 15px; line-height: 1.45em; } .wp-block-verse:first-letter { float: left; font-size: 46px; margin: 10px 5px 0px 0px; } .wp-block-verse:first-line { font-variant: small-caps; letter-spacing: 1px; } .wp-block-media-text .wp-block-media-text__content{ padding: 0;} /* WP Gallery */ .wp-block-gallery figure{ box-shadow: 1px 1px 12px 0px rgba(0,0,0,0.3); } /* Widget */ .widget_block{padding: 0 15px;} .widget_block ul{list-style-type: none;} .widget_block ul li{ position: relative; padding-bottom: 12px; transition: all 0.3s ease-in-out;} .widget_block ul li:hover{ translate: 10px; } .widget_block ul li a{ font-size: var(--site-font-size);} .widget_block ul li a::before { font-family: "luxury-icons"; content: "\e000"; font-size: 10px; vertical-align: middle; margin-right: 5px; } .widget_block .wp-block-heading, .widget-title{ text-transform: uppercase; position: relative; padding-bottom: 20px; } .widget_block .wp-block-heading::before, .widget-title::before{ content: ""; position: absolute; bottom: 0; left: 0; background-color: var(--borders-color); height: 2px; width: 50px; } /* WP Search Block -STYLE: Button Inside Input- */ .wp-block-search__button-inside .wp-block-search__inside-wrapper{ margin-top: 5px; border-radius: 100px; border: 1px solid #e4e4e4;background:#fff;} .wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within{outline: 0;box-shadow: 0px 0px 8px -1px var(--borders-color); transition: box-shadow 0.5s ease-in; } .wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input{background: transparent;border: none;} .wp-block-search__button-inside .wp-block-search__input:focus {box-shadow: none !important;} .wp-block-search__button-inside .wp-block-search__button.has-icon[type=submit]{ border: none;background: transparent !important;color:#000;padding: 0;margin-right: 10px;} .wp-block-search__button-inside .wp-block-search__button.has-icon[type=submit] svg{width: 30px; height:30px} .wp-block-post-template li{margin-bottom: 30px;} /* FIX WP Social link widget styles */ .wp-block-social-link:hover{translate: 0 !important;} .wp-block-social-link a::before{content: "" !important; margin: 0 !important;} /* ------------------------------------------------------------------------- */ /* ------------------ END WordPress Default Element ------------------------ */ /* ------------------------------------------------------------------------- */ .post-meta{font-weight: bold;} .post-content-text{padding: 15px;overflow-wrap: break-word;} /* Image Caption */ .wp-caption { margin-bottom: 20px; padding: 10px; max-width: 97%; border: 1px solid #eee; text-align: center; } .wp-caption img { margin: 0; width: 100%!important; height: auto; border: 0 none; } .wp-caption p.wp-caption-text { margin: 0; padding: 8px; font-size: 1em; line-height: 17px; } .gallery-caption{font-size: 20px;} /* Sticky Post */ .status-sticky, .sticky { position:relative; border-right: 3px solid var(--borders-color); border-bottom: 3px solid var(--borders-color); border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px; } .status-sticky::before, .sticky::before { content: attr(value); display: inline-block; text-align: right; border-bottom-right-radius: 5px; padding: 10px 15px; background: linear-gradient(180deg, rgba(255,132,132,1) 0%, rgba(255,88,88,1) 68%, rgba(255,0,0,1) 100%, rgba(0,0,0,1) 100%); font-weight: bold; color: #FFFFFF; } /* Blockquote */ blockquote {font-weight: 200; font-style: italic; margin: 0.25em 0; padding: 0px 30px; line-height: 1.45; position: relative; border-left: 5px solid #333; } /* ======================== COMMENTS TEMPLATE ========================= */ /* User Role Label */ .comment-author-label {padding: 3px 9px;border-radius: 8px;font-size: calc(var(--site-font-size) - 3px);} .administrator-label {background-color:#edffa9;} .editor-label {background-color:#eca3f5;} .author-label {background-color:#fdbaf8;} .contributor-label {background-color: #2DD4C9; } .subscriber-label {background-color: #B1E8E8;} .wrapper_comments{border-top: 1px solid #000; margin-top: 25px;padding-top: 30px;} /* Comments Head */ .wrapper_comments div.comments_head{width: 100%;border-bottom: 2px solid #ccc;display: flex;flex-direction: row;flex-wrap: wrap; justify-content: space-between;align-items: flex-end;margin: 0 0 30px 0;} .wrapper_comments div.comments_head div.comments-info{color: #555;padding: 5px 15px 3px 5px;font-weight: 600;margin-bottom: -2px;letter-spacing: 1px; text-transform: uppercase;text-align: left;line-height: 24px; border-bottom: 2px solid #ff015d;} .wrapper_comments div.comments_head div.comments-space{flex-grow: 1;} .wrapper_comments div.comments_head div.comments-filter{padding: 5px 15px 3px 5px;margin-bottom: -2px;line-height: 24px;border-bottom: 2px solid #ff015d;} /* Single Comment Container */ .comment-container { display: flex; margin: 20px 10px; } .comment-avatar { margin-right: 10px; position: relative; } .comment-avatar img { border-radius: 5px; border: 3px solid #fff; /* Contorno bianco */ box-shadow: 0px 5px 15px -6px rgba(0, 0, 0, 0.3); /* Ombra */ } .comment-bubble { background-color: #fff; padding: 10px; border-radius: 10px; box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.1); flex-grow: 1; position: relative; margin-left: 10px; } /* Left Chevron default comment */ .comment-bubble::before { content: ''; position: absolute; top: 30px; left: -19px; margin-top: -10px; border-width: 10px; border-style: solid; border-color: transparent #fff transparent transparent; z-index:10; } .comment-header { display: flex; justify-content: space-between; margin-bottom: 10px; } .comment-text { overflow-wrap: anywhere; } .comment-container .author { font-weight: bold; text-transform: capitalize;} .comment-container .timestamp { color: #555;font-size: calc(var(--site-font-size) - 3px); } .comment-actions { display: flex; justify-content: flex-end; font-size: calc(var(--site-font-size) - 3px); gap:5px; } .comment-container .edit, .comment-container .reply { margin-left: 10px; text-decoration: none; color: #3498db; font-weight: bold; } .comment-container .edit:hover, .comment-container .reply:hover { text-decoration: underline; } /* By Post Author comment style */ .bypostauthor .comment-bubble{background-color: #FAEBD7;/*border: 1px solid #f55758;*/} .bypostauthor .comment-bubble::before{border-color: transparent #FAEBD7 transparent transparent;} .comment-container .bypostauthor-label{background-color: #f55758;padding: 3px 9px;color: #ffffff;border-radius: 8px;font-size: calc(var(--site-font-size) - 3px); } .comment + .children{ padding-left: 15px; } /* Closed Comments */ .no-comments{text-align: center;margin-top: 30px;padding:5px;background-color: #FFAEB0; border: solid 1px #EB5151;border-radius: 5px;} #cancel-comment-reply-link::before{content: " - "} @media (max-width: 991px) { .comment-edit-link-text, .comment-reply-link-text{display: none;} } /* ======================= / COMMENTS TEMPLATE ========================= */ /* ------------------------------------------------------------------------- */ /* -------------------------- Helpers -------------------------------------- */ /* ------------------------------------------------------------------------- */ .flex-1{flex:1;} .mt-0{margin-top: 0 } .mt-1{margin-top: 10px} .mt-2{margin-top: 20px} .mt-3{margin-top: 40px} .mt-4{margin-top: 100px } .mb-0{margin-bottom: 0} .mb-1{margin-bottom: 10px} .mb-2{margin-bottom: 20px} .mb-3{margin-bottom: 40px} .mb-4{margin-bottom: 100px} .p-0{padding: 0 !important;} .p-1{padding: 10px} .p-2{padding: 20px} .p-3{padding: 40px} .p-4{padding: 100px} .pt-1{padding-top: 10px;} .pt-2{padding-top: 20px;} .pt-3{padding-top: 40px;} .pt-4{padding-top: 15vh;} .pb-1{padding-bottom: 10px;} .pb-2{padding-bottom: 20px;} .pb-3{padding-bottom: 40px;} .pb-4{padding-bottom: 15vh;} .p-lr1{padding: 0 1vw;} .p-lr2{padding: 0 2vw;} .p-lr3{padding: 0 3vw;} .p-lr4{padding: 0 5vw;} .img-res{width: 100%;} .img-before-title{border-radius: 5px 5px 0 0;} .pos-rel{position: relative;} .overlay-link{ display: inline-block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-indent: -99999px; z-index: 2; } .light-shadow{ box-shadow: 0 30px 50px rgba(0,0,0,0.15); transition: box-shadow 0.5s cubic-bezier(0.7, 0, 0.3, 1);} /* ! Grid System */ .grid-flex { margin: 0 auto;display: flex; flex-flow: row; flex-wrap: wrap;width: 100%;padding: 30px 0;align-items: stretch;} .grid-flex--center{justify-content: center;} .col{ flex: 1;} [class*='col-'] { position: relative;padding: 0 1%;} .grid-flex .grid-flex [class*='col-'] {padding: 0px;} .col-10{ width: 10%;} .col-20{ width: 20%; } .col-25{ width: 25%; } .col-30{ width: 30%; } .col-33{ width: 33.33%; } .col-40{ width: 40%; } .col-50{ width: 50%; } .col-60{ width: 60%; } .col-70{ width: 70%; } .col-80{ width: 80%; } .col-90{ width: 90%; } .col-100{ width: 100%; } @media (max-width: 991px) { .tab-20 { width: 20%; } .tab-25 { width: 25%; } .tab-33 { width: 33.33%; } .tab-50 { width: 50%; } .tab-100 { width: 100%; } } @media (max-width: 768px) { [class*='col-'] { width: 100%;} .sma-20 { width: 20%; } .sma-25 { width: 25%; } .sma-33 { width: 33.33%; } .sma-50 { width: 50%; } .sma-100 { width: 100%; } } /* ------------------------------------------------------------------------- */ /* -------------------------- END Helpers ---------------------------------- */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* ----------------------------- PATTERNS ---------------------------------- */ /* ------------------------------------------------------------------------- */ .pattern__boxed-shadow{ box-shadow:3px 5px 30px rgb(46 56 77/.1); padding:30px; border-radius:10px; } /* ------------------------------------------------------------------------- */ /* ---------------------------- / PATTERNS --------------------------------- */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* ------ Icon System ------------------------------------------------------ */ /* ------------------------------------------------------------------------- */ .icon-arrow{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EArrow Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M268 112l144 144-144 144M392 256H100'/%3E%3C/svg%3E");} .icon-check{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg fill='%23333333' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='405.272px' height='405.272px' viewBox='0 0 405.272 405.272'%3E%3Cg%3E%3Cpath d='M393.401 124.425L179.603 338.208c-15.832 15.835-41.514 15.835-57.361 0L11.878 227.836c-15.838-15.835-15.838-41.52 0-57.358c15.841-15.841 41.521-15.841 57.355-0.006l81.698 81.699L336.037 67.064c15.841-15.841 41.523-15.829 57.358 0C409.23 82.902 409.23 108.578 393.401 124.425z'/%3E%3C/g%3E%3C/svg%3E");} .icon-angle{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Down%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");} .icon-fb{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Facebook%3C/title%3E%3Cpath d='M480 257.35c0-123.7-100.3-224-224-224s-224 100.3-224 224c0 111.8 81.9 204.47 189 221.29V322.12h-56.89v-64.77H221V208c0-56.13 33.45-87.16 84.61-87.16 24.51 0 50.15 4.38 50.15 4.38v55.13H327.5c-27.81 0-36.51 17.26-36.51 35v42h62.12l-9.92 64.77H291v156.54c107.1-16.81 189-109.48 189-221.31z' fill-rule='evenodd'/%3E%3C/svg%3E");} .icon-ig{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Instagram%3C/title%3E%3Cpath d='M349.33 69.33a93.62 93.62 0 0193.34 93.34v186.66a93.62 93.62 0 01-93.34 93.34H162.67a93.62 93.62 0 01-93.34-93.34V162.67a93.62 93.62 0 0193.34-93.34h186.66m0-37.33H162.67C90.8 32 32 90.8 32 162.67v186.66C32 421.2 90.8 480 162.67 480h186.66C421.2 480 480 421.2 480 349.33V162.67C480 90.8 421.2 32 349.33 32z'/%3E%3Cpath d='M377.33 162.67a28 28 0 1128-28 27.94 27.94 0 01-28 28zM256 181.33A74.67 74.67 0 11181.33 256 74.75 74.75 0 01256 181.33m0-37.33a112 112 0 10112 112 112 112 0 00-112-112z'/%3E%3C/svg%3E");} .icon-tw{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Twitter%3C/title%3E%3Cpath d='M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z'/%3E%3C/svg%3E"); } .icon-yt{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Youtube%3C/title%3E%3Cpath d='M508.64 148.79c0-45-33.1-81.2-74-81.2C379.24 65 322.74 64 265 64h-18c-57.6 0-114.2 1-169.6 3.6C36.6 67.6 3.5 104 3.5 149 1 184.59-.06 220.19 0 255.79q-.15 53.4 3.4 106.9c0 45 33.1 81.5 73.9 81.5 58.2 2.7 117.9 3.9 178.6 3.8q91.2.3 178.6-3.8c40.9 0 74-36.5 74-81.5 2.4-35.7 3.5-71.3 3.4-107q.34-53.4-3.26-106.9zM207 353.89v-196.5l145 98.2z'/%3E%3C/svg%3E"); } .icon-search{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ESearch%3C/title%3E%3Cpath d='M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32' d='M338.29 338.29L448 448'/%3E%3C/svg%3E");} .icon-wa-big{display:inline-block; margin: -3px 5px;width: 44px;height: 44px;background-size: 100%; background-repeat: no-repeat; background-image: url('data:image/svg+xml,');} .icon-wa{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Whatsapp%3C/title%3E%3Cpath d='M414.73 97.1A222.14 222.14 0 00256.94 32C134 32 33.92 131.58 33.87 254a220.61 220.61 0 0029.78 111L32 480l118.25-30.87a223.63 223.63 0 00106.6 27h.09c122.93 0 223-99.59 223.06-222A220.18 220.18 0 00414.73 97.1zM256.94 438.66h-.08a185.75 185.75 0 01-94.36-25.72l-6.77-4-70.17 18.32 18.73-68.09-4.41-7A183.46 183.46 0 0171.53 254c0-101.73 83.21-184.5 185.48-184.5a185 185 0 01185.33 184.64c-.04 101.74-83.21 184.52-185.4 184.52zm101.69-138.19c-5.57-2.78-33-16.2-38.08-18.05s-8.83-2.78-12.54 2.78-14.4 18-17.65 21.75-6.5 4.16-12.07 1.38-23.54-8.63-44.83-27.53c-16.57-14.71-27.75-32.87-31-38.42s-.35-8.56 2.44-11.32c2.51-2.49 5.57-6.48 8.36-9.72s3.72-5.56 5.57-9.26.93-6.94-.46-9.71-12.54-30.08-17.18-41.19c-4.53-10.82-9.12-9.35-12.54-9.52-3.25-.16-7-.2-10.69-.2a20.53 20.53 0 00-14.86 6.94c-5.11 5.56-19.51 19-19.51 46.28s20 53.68 22.76 57.38 39.3 59.73 95.21 83.76a323.11 323.11 0 0031.78 11.68c13.35 4.22 25.5 3.63 35.1 2.2 10.71-1.59 33-13.42 37.63-26.38s4.64-24.06 3.25-26.37-5.11-3.71-10.69-6.48z' fill-rule='evenodd'/%3E%3C/svg%3E");} .icon-email{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url('data:image/svg+xml,');} .icon-tk{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Tiktok%3C/title%3E%3Cpath d='M412.19 118.66a109.27 109.27 0 01-9.45-5.5 132.87 132.87 0 01-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14 23.9 350 16 350.13 16h-82.44v318.78c0 4.28 0 8.51-.18 12.69 0 .52-.05 1-.08 1.56 0 .23 0 .47-.05.71v.18a70 70 0 01-35.22 55.56 68.8 68.8 0 01-34.11 9c-38.41 0-69.54-31.32-69.54-70s31.13-70 69.54-70a68.9 68.9 0 0121.41 3.39l.1-83.94a153.14 153.14 0 00-118 34.52 161.79 161.79 0 00-35.3 43.53c-3.48 6-16.61 30.11-18.2 69.24-1 22.21 5.67 45.22 8.85 54.73v.2c2 5.6 9.75 24.71 22.38 40.82A167.53 167.53 0 00115 470.66v-.2l.2.2c39.91 27.12 84.16 25.34 84.16 25.34 7.66-.31 33.32 0 62.46-13.81 32.32-15.31 50.72-38.12 50.72-38.12a158.46 158.46 0 0027.64-45.93c7.46-19.61 9.95-43.13 9.95-52.53V176.49c1 .6 14.32 9.41 14.32 9.41s19.19 12.3 49.13 20.31c21.48 5.7 50.42 6.9 50.42 6.9v-81.84c-10.14 1.1-30.73-2.1-51.81-12.61z'/%3E%3C/svg%3E"); } .icon-plus{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EAdd%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M256 112v288M400 256H112'/%3E%3C/svg%3E");} .icon-call{ display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M436.9 364.8c-14.7-14.7-50-36.8-67.4-45.1-20.2-9.7-27.6-9.5-41.9.8-11.9 8.6-19.6 16.6-33.3 13.6-13.7-2.9-40.7-23.4-66.9-49.5-26.2-26.2-46.6-53.2-49.5-66.9-2.9-13.8 5.1-21.4 13.6-33.3 10.3-14.3 10.6-21.7.8-41.9C184 125 162 89.8 147.2 75.1c-14.7-14.7-18-11.5-26.1-8.6 0 0-12 4.8-23.9 12.7-14.7 9.8-22.9 18-28.7 30.3-5.7 12.3-12.3 35.2 21.3 95 27.1 48.3 53.7 84.9 93.2 124.3l.1.1.1.1c39.5 39.5 76 66.1 124.3 93.2 59.8 33.6 82.7 27 95 21.3 12.3-5.7 20.5-13.9 30.3-28.7 7.9-11.9 12.7-23.9 12.7-23.9 2.9-8.1 6.2-11.4-8.6-26.1z'/%3E%3C/svg%3E");} .icon-in{ display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32zm-273.3 373.43h-64.18V205.88h64.18zM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43 0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44-17.74 0-28.24 12-32.91 23.69-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44 42.13 0 74 27.77 74 87.64z'/%3E%3C/svg%3E");} .icon-hearth{ display:inline-block;margin: -3px 5px;width: 24px;height: 24px;--svg-icon: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="iso-8859-1"%3F>');-webkit-mask-image: var(--svg-icon);-webkit-mask-repeat:no-repeat;-webkit-mask-size: 100%;mask-image: var(--svg-icon);mask-repeat:no-repeat;mask-size: 100%;background-color: #000;} .icon-left-chevron{display:inline-block; margin: -3px 5px;width: 24px;height: 24px;background-size: 100%; background-repeat: no-repeat; background-image: url('data:image/svg+xml,');} .icon-reply{display:inline-block; margin: -3px 0;width: 16px;height: 16px;background-size: 100%; background-repeat: no-repeat;background-image: url('data:image/svg+xml,');} .icon-edit{display:inline-block; margin: -3px 0;width: 16px;height: 16px;background-size: 100%; background-repeat: no-repeat;background-image: url('data:image/svg+xml,');} .icon-cart{display:inline-block; width: 38px;height: 38px; --svg-icon: url('data:image/svg+xml,');-webkit-mask-image: var(--svg-icon);-webkit-mask-repeat:no-repeat;-webkit-mask-size: 100%;mask-image: var(--svg-icon);mask-repeat:no-repeat;mask-size: 100%;background-color: #000;} .icon-home{display:inline-block; margin: -3px 0;width: 24px;height: 24px;background-size: 100%; background-repeat: no-repeat; background-image: url('data:image/svg+xml,');} .icon-arrow-up{display:inline-block; margin: -3px 0;width: 18px;height: 18px;background-size: 100%; vertical-align: middle; background-repeat: no-repeat;background-image: url('data:image/svg+xml,');} .icon-1{width: 40px;height: 40px;} .icon-2{width: 70px;padding: 8px;} .icon-3{width: 100px;padding: 8px;} .icon-invert{filter: invert(1);} /* ------------------------------------------------------------------------- */ /* ----- END Icon System --------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* Accordion */ .accordion h3{position: relative;padding: 10px 30px 8px 10px;margin: 20px 0 0 0;cursor:pointer; border: 1px solid #E0E0E0; border-radius: 5px;} .accordion h3:after{ width: 30px;height: 30px;position: absolute; top:5px; right:0;content: ' '; background-image: url('data:image/svg+xml,'); background-size:100%; transition: all 0.2s ease-in-out; } .accordion .wp-block-column .wp-block-group {padding: 0;max-height: 0;overflow:hidden; transition: all 0.2s ease-in-out;} .accordion .wp-block-group__inner-container{padding: 30px;} .accordion h3.open-accordion{border-bottom: none;border-bottom-left-radius: 0; border-bottom-right-radius: 0;} .accordion h3.open-accordion + .wp-block-group{max-height:500px;padding-bottom: 15px;overflow: auto; border: 1px solid #E0E0E0; border-radius: 5px;border-top-style: dotted;border-top-left-radius: 0;border-top-right-radius: 0;} .accordion h3.open-accordion:after{transform: rotate(-90deg);transition: all 0.2s ease-in-out;} .load { opacity: 0; animation: fade-load cubic-bezier(0.385, 0.135, 0.15, 0.86) 0.5s forwards;} .posts_loader{display: flex;justify-content: center;align-items: center;height: 50vh;} .loader_icon { width: 40px; height: 40px; --c:no-repeat linear-gradient(black 0 0); background: var(--c),var(--c),var(--c),var(--c); background-size: 21px 21px; animation: l5 1.5s infinite cubic-bezier(0.3,1,0,1); } @keyframes l5 { 0% {background-position: 0 0,100% 0 ,100% 100%,0 100%} 33% {background-position: 0 0,100% 0 ,100% 100%,0 100%;width:60px;height: 60px} 66% {background-position: 100% 0,100% 100%,0 100%,0 0 ;width:60px;height: 60px} 100% {background-position: 100% 0,100% 100%,0 100%,0 0 } } /* Whats App */ .logo-whats-app { display: block; width: 44px; height: 44px; position: fixed; bottom: 45px; right: 15px; z-index: 999; border: none; } /* ------------------------------------------------------------------------- */ /* ---------------------- ANIMATION CSS KEY FRAMES ------------------------- */ /* ------------------------------------------------------------------------- */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade-load { from {opacity: 0; transform: translateY(20px);} to {opacity: 1; transform: translateY(0);} } @keyframes fade-hide { from { visibility: visible; } to { visibility: hidden; } } @keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(255,255,255, 0.1), 0 0 0 20px rgba(255,255,255, 0.1), 0 0 0 40px rgba(255,255,255, 0.1), 0 0 0 60px rgba(255,255,255, 0.1); } 100% { box-shadow: 0 0 0 20px rgba(255,255,255, 0.1), 0 0 0 40px rgba(255,255,255, 0.1), 0 0 0 60px rgba(255,255,255, 0.1), 0 0 0 80px rgba(255,255,255, 0); } }