/* Theme Name: MegaUg-Shop Author: Vibe Coffee from V.V.B Template: megastrap Description: Премиальная тема магазина кави та кавомашин "MegaUg" Version: 2.10 Tested up to: 8.4 Requires PHP: 7.4 Text Domain: megastrap */ body { font-family: "Outfit", sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } table { border-color: #797979 !important; --bs-border-color: #797979; --global-bs-default-border-color: #797979; --global-woo-default-border-color: #797979; } .btn, .entry-title, .m-archive-product-item .price, .products.row .price, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 400; /* Lightened from 700 */ font-family: "Bona Nova", serif; } a { text-underline-offset: 15%; text-decoration-thickness: 1px; } .card { color: var(--bs-dark, #000); background-color: var(--bs-white, #fff); } .card { --bs-card-spacer-y: 0.5rem; --bs-card-spacer-x: 0.5rem; } @media (min-width: 576px) { .card { --bs-card-spacer-y: 0.75rem; --bs-card-spacer-x: 0.75rem; } } /* Native WooCommerce breadcrumb hidden — replaced by Liquid Glass mgcat-breadcrumb */ nav.woocommerce-breadcrumb { display: none !important; } nav.navbar-desktop .nav-link { font-weight: 300 !important; letter-spacing: 0.03em; font-size: 1rem; text-align: center; line-height: 1; } hr.wp-block-separator.is-style-wide { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.5); } .col-content.border, .wp-block-m-wrapper-megastrap.border { --bs-border-opacity: 0.75; } .bg-gray { background-color: #303030 !important; } .border-gray { border-color: #303030 !important; } figure.wp-block-image.rounded-4 img { border-radius: var(--bs-border-radius-xl) !important; } .gradient-text, mark.has-primary-color, h1.product_title, .m-product-class-single.price .woocommerce-Price-amount.amount { background: conic-gradient(from 255.67deg at 30% 50%, #EEBC70 -80deg, #E3A455 25deg, #F6DBA6 80deg, #FFEBC4 156.58deg, #F0BE79 212.4deg, #BA7F3B 250deg, #EEBC70 270deg, #E3A455 380deg); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; } /* Custom Right-Center Animation */ .modal.fade.fixed-right .modal-dialog { transform: translate(100%, 0); transition: transform 0.3s ease-out; margin-right: 0; margin-left: auto; display: flex; align-items: center; min-height: 90%; } .modal.show.fixed-right .modal-dialog { transform: none; } /* Adjusting the dialog width and height */ .modal-right-center { max-width: 400px; height: auto; margin-right: 1rem !important; } .home.wp-singular { background-image: url('img/waves-big.svg'); background-position: top left; background-repeat: no-repeat; background-size: 60% auto; position: relative; isolation: isolate; } .home.wp-singular::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 80% 25%, rgba(227, 164, 85, 0.06) 0%, transparent 25%), radial-gradient(circle at 15% 55%, rgba(227, 164, 85, 0.04) 0%, transparent 20%), radial-gradient(circle at 75% 85%, rgba(227, 164, 85, 0.05) 0%, transparent 25%), radial-gradient(circle at 50% 10%, rgba(227, 164, 85, 0.03) 0%, transparent 20%), radial-gradient(circle at 95% 50%, rgba(227, 164, 85, 0.04) 0%, transparent 20%), radial-gradient(circle at 30% 90%, rgba(227, 164, 85, 0.05) 0%, transparent 20%); pointer-events: none; z-index: -1; } .m-product-class-single.price span.woocommerce-Price-amount.amount { font-weight: 400; font-size: 2.5rem; } .m-product-class-single.price del span.woocommerce-Price-amount.amount { font-weight: 400; font-size: 1.5rem; } .m-archive-product-item .price, .products.row .price { margin: 0; display: inline-block; font-size: 1.1rem; line-height: 1.1; } .m-archive-product-item .price del, .products.row .price del { font-size: 1rem; } p.gradient-text { background: #E3A455 linear-gradient(to left, #E3A455 7%, #F6DBA6 24%, #FFEBC3 43%, #F0BE79 59%, #BA7F3B 71%, #EEBC70 83%, #E3A455 100%); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; } .rounded-slides img.k-block-slick-classic-image { border-radius: 1rem; } /* ЗОЛОТА КНОПКА — закоментована, активна glassmorphism-версія в hero-glass-section .btn.btn-primary { background-color: #E3A455; background-image: conic-gradient(from 20deg at 40% -40%, #E3A455 7%, #F6DBA6 24%, #FFEBC3 43%, #F0BE79 59%, #BA7F3B 71%, #EEBC70 83%, #E3A455 100%); transition: filter 0.5s, box-shadow 0.5s; } .btn.btn-primary:hover { filter: brightness(1.2); box-shadow: 0 0 0.5rem var(--bs-primary); } .btn.btn-primary:active { background: conic-gradient(from 20deg at 40% -40%, #85603A 71% #87623C 24%, #89643E 43%, #8B6640 59%, #8D6842 71%, #8F6A44 83%, #85603A 100%); } */ .btn.btn-outline-primary:hover { color: var(--bs-btn-hover-color); border-color: var(--bs-btn-hover-border-color); } span.badge.bg-primary.m-onsale { color: black; background-image: conic-gradient(from 20deg at 40% -40%, #E3A455 7%, #F6DBA6 24%, #FFEBC3 43%, #F0BE79 59%, #BA7F3B 71%, #EEBC70 83%, #E3A455 100%); } .btn.btn-outline-primary:hover { transition: filter 0.5s, box-shadow 0.5s, color 0.5s; } .btn.btn-outline-primary:hover { color: var(--bs-btn-hover-color); border-color: var(--bs-btn-hover-border-color); filter: brightness(1.2); box-shadow: 0 0 0.5rem var(--bs-primary); background-image: conic-gradient(from 20deg at 40% -40%, #E3A455 7%, #F6DBA6 24%, #FFEBC3 43%, #F0BE79 59%, #BA7F3B 71%, #EEBC70 83%, #E3A455 100%); } @media (min-width: 992px) { .btn.btn-lg { padding-right: 3rem; padding-left: 3rem; } } .card-cusom-loop { font-family: "Outfit", sans-serif; font-weight: 600; } #accordionProductTabs .accordion-button { font-size: inherit; font-weight: 500; color: var(--bs-dark); } p>img, p>svg { vertical-align: -5%; } .content-v-margin { margin-top: 4rem; margin-bottom: 5.5rem; } .m-filter-grayscale { filter: grayscale(1) opacity(0.25); } .pagination { --bs-pagination-active-color: black; --bs-pagination-color: var(--bs-link-color); --bs-pagination-bg: transparent; --bs-pagination-hover-bg: transparent; --bs-pagination-focus-bg: transparent; --bs-pagination-border-color: var(--bs-link-color); --bs-pagination-hover-border-color: var(--bs-link-color); } .list-group { --bs-list-group-color: white; --bs-list-group-bg: transparent; --bs-list-group-border-color: #efc68736; --bs-list-group-border-width: 1px; --bs-list-group-border-radius: 1rem; --bs-list-group-item-padding-x: 1rem; --bs-list-group-item-padding-y: 0.5rem; --bs-list-group-action-color: #495057; --bs-list-group-action-hover-color: #495057; --bs-list-group-action-hover-bg: #f8f9fa; --bs-list-group-action-active-color: #ffffff; --bs-list-group-action-active-bg: #e9ecef; --bs-list-group-disabled-color: #6c757d; --bs-list-group-disabled-bg: #fff; --bs-list-group-active-color: black; --bs-list-group-active-bg: #efc687; --bs-list-group-active-border-color: #efc687; } input.m-price-control-value.input-text.qty { background-color: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--global-bs-btn-primary-bg); border-right: 0; border-left: 0; } button.btn.btn-outline-primary.m-price-control-minus { border-right: 0; } button.btn.btn-outline-primary.m-price-control-plus { border-left: 0; } .btn-cart-count .count { position: absolute; top: 0.5rem; right: -10px; transform: translate(-50%, -50%); border-radius: 20px; padding: 3px 4px 2px; min-width: 14px; color: black; background-color: #E3A455; background-image: conic-gradient(from 20deg at 40% -40%, #E3A455 7%, #F6DBA6 24%, #FFEBC3 43%, #F0BE79 59%, #BA7F3B 71%, #EEBC70 83%, #E3A455 100%); opacity: 1; font-size: 8px; font-family: Arial, Helvetica, sans-serif; line-height: 1; } .m-woocommerce-result-count { line-height: 1.2; margin-right: 1rem; } .responsive-rounded { border-bottom-left-radius: 8rem !important; } @media (min-width: 992px) { .responsive-rounded { border-bottom-left-radius: 12rem !important; } } .bg-waves { background: url(img/waves.svg) left bottom / 50rem auto no-repeat !important; background-color: var(--bs-dark) !important; color: var(--bs-white) !important; } @media (min-width: 992px) { .bg-waves { background-size: 80% auto !important; } } .bg-waves-big { background: url(img/waves-big.svg) left top / 70rem auto no-repeat !important; background-color: var(--bs-dark) !important; color: var(--bs-white) !important; } .modal-title .m-cart-icon-count[data-count="0"] { display: none; } .modal-title .m-cart-icon-count:before { content: "( "; } .modal-title .m-cart-icon-count:after { content: " )"; } p.woocommerce-mini-cart__empty-message { text-align: center; font-size: 1.5rem; margin-top: 7rem; margin-bottom: 7rem; font-style: italic; } p.woocommerce-mini-cart__empty-message:after { content: " :("; display: block; font-style: normal; font-size: 2rem; } /* coffe mashine page */ .single-product .woocommerce-product-attributes-item, .single-product .woocommerce-product-attributes-item--attribute_pa_obiem, .single-product .woocommerce-product-attributes-item--attribute_pa_produktyvnist { display: flex; } .single-product .woocommerce-product-attributes-item th { font-weight: normal; } .single-product .woocommerce-product-attributes-item th:after { content: ':'; margin-right: 0.5rem; } .single-product .woocommerce-product-attributes-item td { font-weight: 500; } .single-product .woocommerce-product-attributes-item--attribute_pa_obiem th, .woocommerce-product-attributes-item--attribute_pa_produktyvnist th { font-size: 0; color: transparent; width: 1.25rem; height: 1.25rem; background: url(img/icon-bean.svg) center / contain no-repeat; margin-right: 1rem; } .single-product .woocommerce-product-attributes-item--attribute_pa_obiem th { background: url(img/icon-bean.svg) center / contain no-repeat; } .single-product .woocommerce-product-attributes-item--attribute_pa_produktyvnist th { background: url(img/icon-cup.svg) center / contain no-repeat; } .megaug-icon { font-size: 0; color: transparent; width: 1.25rem; height: 1.25rem; margin-right: 1rem; } .megaug-icon.icon-bean-white { background: url(img/icon-bean-white.svg) center / contain no-repeat; } .megaug-icon.icon-cup-white { background: url(img/icon-cup-white.svg) center / contain no-repeat; } /* CSS mooving line */ .marquee-wrapper { width: 100%; max-width: 2000px; margin-left: auto; margin-right: auto; overflow: hidden; padding-top: 2.25rem; padding-bottom: 2.25rem; margin-top: -4.25rem; } .marquee-container { position: relative; height: 4rem; background-color: #1d1c1c; transform: rotate(-1.75deg); /*margin-left: -5rem; margin-right: -5rem;*/ } .marquee { margin: 0 auto; white-space: nowrap; overflow: hidden; position: absolute; } .marquee>span { display: inline-block; padding-left: 0; animation: marquee 30s linear infinite; line-height: 4rem; margin: 0; font-size: 1.4rem; } .marquee2>span { animation-delay: 15s; } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } /* --- FLUID GOLD BAR WITH TIMER (OPTIMIZED LAYERED STYLE) --- */ .top-bar-fixed-container { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 32px !important; z-index: 1025 !important; pointer-events: none !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; } /* Hide top bar when side menus, side cart, or modals are open */ body.menu-open .top-bar-fixed-container, body.offcanvas-open .top-bar-fixed-container, body.mgsc-cart-open .top-bar-fixed-container, body.modal-open .top-bar-fixed-container, body:has(.offcanvas.show) .top-bar-fixed-container, body:has(.modal.show) .top-bar-fixed-container { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .top-bar-timer-wrap { position: relative !important; width: 100% !important; height: 100% !important; pointer-events: auto !important; display: flex !important; justify-content: center !important; align-items: center !important; color: #ffffff !important; font-family: "Outfit", sans-serif !important; font-size: 13px !important; font-weight: 300 !important; letter-spacing: 0.05em !important; box-shadow: none !important; overflow: hidden !important; /* Clip the animated background */ background: #3d2b14 !important; /* Fallback base color */ transform: translateZ(0); /* Force layer */ view-transition-name: site-top-bar; } /* Animated background layer - keeps text sharp and scroll smooth */ .top-bar-timer-wrap::after { content: "" !important; position: absolute !important; top: -50% !important; left: -50% !important; width: 200% !important; height: 200% !important; background: linear-gradient(-45deg, #3d2b14, #6b4e21, #a67c45, #e0c08d, #a67c45, #6b4e21) !important; background-size: 300% 300% !important; animation: fluidGoldPulse 4s infinite alternate ease-in-out !important; z-index: -1 !important; will-change: filter, background-position; } .top-bar-timer-content { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; gap: 0.3rem !important; } #top-bar-countdown { background: none !important; /* Removed background */ border: none !important; /* Removed border */ padding: 0 !important; /* Removed padding */ font-weight: 400 !important; /* Slightly more visible than 300 but still neat */ font-variant-numeric: tabular-nums; color: #fff !important; } @keyframes fluidGoldPulse { 0% { background-position: 0% 50%; filter: hue-rotate(-12deg) saturate(1.1) brightness(0.95); } 100% { background-position: 100% 50%; filter: hue-rotate(0deg) saturate(1.8) brightness(1.15); /* Rich warm gold, no green */ } } /* --- SITE-WIDE RENDERING OPTIMIZATIONS --- */ .hero-glass-section, .hero-glass-block, .woo-glass-card, .navbar-glass, .marquee span { transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; perspective: 1000px; will-change: transform; } /* Adjust Header & Nav for Ticker */ .navbar.fixed-top, .fixed-top { top: 32px !important; } .navbar-placeholder, .-navbar-placeholder, .fixed-desktop { margin-top: 32px !important; } /* Mobile Adaptation for Gold Timer Bar (matches Bootstrap d-lg-none breakpoint) */ @media (max-width: 991px) { .wrap-28ad9105-3ddd-4059-b254-33a22c8f7b5a { margin-left: 1rem !important; margin-right: 1rem !important; padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; } .wrap-28ad9105-3ddd-4059-b254-33a22c8f7b5a h3.display-4 { font-size: 2.2rem !important; line-height: 1.1 !important; } .top-bar-fixed-container { height: 44px !important; } .top-bar-timer-wrap { font-size: 11px !important; padding: 0 15px !important; } .top-bar-timer-content { line-height: 1.2 !important; text-align: center !important; } .navbar.fixed-top, .fixed-top { top: 44px !important; } .navbar-placeholder, .-navbar-placeholder, .fixed-desktop { margin-top: 44px !important; } } section.mega-headline { position: relative; width: 100%; max-width: 2000px; margin-left: auto; margin-right: auto; overflow: hidden; width: 100%; height: 7rem; overflow: hidden; z-index: 1; margin-top: -3.5rem; } section.mega-headline .scroll { width: 105%; display: flex; } section.mega-headline .scroll div { color: #000; font-size: 1.2rem; line-height: 3.5rem; font-weight: 500; white-space: nowrap; text-transform: uppercase; animation: animate 40s linear infinite; animation-delay: -40s; } section.mega-headline .scroll div:nth-child(2) { animation: animate2 40s linear infinite; animation-delay: -20s; } @keyframes animate { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes animate2 { 0% { transform: translateX(0%); } 100% { transform: translateX(-200%); } } section.mega-headline .scroll.text1 { transform: rotate(-1.2deg) translateY(1.45rem) translateX(-0.2rem); background: #E3A455 conic-gradient(from 20deg at 40% -40%, #E3A455 7%, #F6DBA6 24%, #FFEBC3 43%, #F0BE79 59%, #BA7F3B 71%, #EEBC70 83%, #E3A455 100%) } /* jumping cup */ @keyframes float { 0% { transform: translatey(0px); } 50% { transform: translatey(-10px); } 100% { transform: translatey(0px); } } .jumping-cup img { width: 100% !important; height: auto !important; filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5)); transform: translatey(0px); animation: float 10s ease-in-out infinite; } @media (min-width: 992px) { .jumping-cup img { width: calc(100% + 2rem) !important; max-width: calc(100% + 2rem) !important; height: auto !important; margin-top: -2rem; margin-right: -3rem; margin-bottom: -2rem; } } @media (max-width: 575px) { .bg-position-sm-70 { background-position-x: 70% !important; } } /* table style */ .is-style-megaug-price { max-width: 800px; margin-left: auto; margin-right: auto; } .wp-block-table td, .wp-block-table th { border: 1px solid rgba(0, 0, 0, 0.25); padding: 0.8em; } .wp-block-table.is-style-megaug-price thead { border-bottom: none; color: white; background-color: var(--bs-dark); } .gradient-border-box { background-color: transparent; border: 1px solid transparent; border-image-source: linear-gradient(127deg, rgba(227, 163, 85, 0.643), /* Color from the provided image */ rgba(246, 219, 166, 0.659), /* Color from the provided image */ rgba(255, 235, 195, 0.612), /* Color from the provided image */ rgba(240, 190, 121, 0.35), /* Color from the provided image */ rgba(186, 127, 59, 0), /* Color from the provided image */ rgba(238, 188, 112, 0) /* Color from the provided image */ ); border-image-slice: 1; border-image-outset: 0; } .wp-block-m-wrapper-megastrap.border.hero-label { background-size: 101% !important; background-position: center !important; } .wp-block-m-wrapper-megastrap.hero-label .wp-block-image img { height: 35px !important; width: auto !important; } .wp-block-m-wrapper-megastrap.hero-label p { font-size: 12px !important; } /* Archive product styles */ img.attachment-woocommerce_thumbnail { border-radius: 1rem; } .m-archive-product-item { text-align: start; overflow: hidden; } .m-archive-loop-buttons-wrapper .btn { width: 100%; padding: 0.3rem; } .m-archive-product-item a { display: block; overflow: hidden; position: relative; font-size: 0.875rem; } .m-archive-product-item .m-onsale { position: absolute; top: 0.7rem 11.2px; right: unset; bottom: unset; left: -2.5rem; transform: rotate(-30deg); padding: 0.5rem 0.5rem; min-width: 10rem; font-size: 0.875rem; font-weight: 500; } .m-archive-product-item .m-product-title { margin-top: 0; margin-bottom: 0.5rem; font-size: 1rem; line-height: 1.1; font-weight: bold; display: flex; flex-direction: column; justify-content: center; align-items: stretch; min-height: 2.25rem; } @media (min-width: 992px) { .m-archive-product-item .m-product-title { font-size: 1.25rem; } } .m-product-action-wrapper { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .m-archive-loop-buttons-wrapper .added_to_cart { order: 100; display: none; } .m-archive-loop-buttons-wrapper .btn { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .m-archive-loop-buttons-wrapper .ajax_add_to_cart.added:before { content: ""; order: 100; display: inline-block; width: 1rem; height: 1rem; background-image: url("data:image/svg+xml,"); background-size: contain; background-position: left bottom; margin-right: 0.3rem; margin-bottom: -0.13rem; } .m-archive-loop-buttons-wrapper { min-width: 45%; } /* Single product style */ .single-product div.product .woocommerce-product-gallery .flex-control-thumbs img, .m-single-product-gallery-row img.wp-post-image { border-radius: 1rem; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs { gap: 1rem; margin-top: 1rem; display: flex } /* Single product tabs */ .tab-control-button::before { content: " "; display: inline-block; width: 1.1em; height: 1.1em; margin-right: 0.5rem; background: url(img/icon-info.svg) center / contain no-repeat; } #tab-control-product_warranty_info::before { background: url(img/icon-warranty.svg) center / contain no-repeat; } #tab-control-product_delivery_info::before { background: url(img/icon-delivery.svg) center / contain no-repeat; } /* Animation */ .col-content.animate-border { transition: border-color 0.5s, transform 0.5s; } .col-content.animate-border:hover { border-color: var(--bs-primary) !important; transform: rotate(-0.75deg); } /* Check list style */ .is-style-check-list { list-style-type: '✓ '; padding-left: 1.7rem; line-height: 1.6; } ul.is-style-check-list li::marker { color: var(--bs-primary); font-family: bootstrap-icons !important; font-style: normal; font-weight: 400 !important; font-variant: normal; text-transform: none; line-height: 1; } /* shop filters styles */ .wpf_items_wrapper { color: white !important; } .site-main .wpf_layout_horizontal .wpf_item { border: 1px solid #d9c5a5; border-radius: 1rem !important; } .site-main .wpf_slider.ui-slider .ui-widget-header { background: var(--bs-primary); border: none; } form.wpf_form.wpf_form_wpf_6874eede1b4d5 { display: flex; flex-wrap: wrap; align-items: center; } form.wpf_form.wpf_form_wpf_6874eede1b4d5 .wpf_reset_btn { margin-left: auto; } /* block styles */ .service-box-style { background: url('img/lines-bg.svg') center top / 150% auto no-repeat scroll !important; padding: 1.5rem !important; border-radius: var(--bs-border-radius-xl) !important; --bs-border-opacity: 0.2; border: 1px solid rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important; } .col>.service-box-style { height: 100%; } .wpf_form .wpf_item input[type=checkbox] { border: 1px solid #dda864; color: #dda863; } .wpf_form .wpf_item_name:after { content: "\F285"; color: #dda863; margin-left: 0.5rem; display: inline-block; font-family: bootstrap-icons !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: text-bottom; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wpf_hide_text li>input:checked+label>i:after, .wpf_item input[type=checkbox]:checked:before { border: none; content: "\e800"; font-family: themify_wc_product_filter_icons; font-weight: bold; color: #dda863; } .wpf_form .wpf_item_count { background: #fce6bb; } .wpf_form .wpf_item .wpf_item_name { border-bottom: 1px solid rgb(255 255 255 / 28%); font-size: 1rem; font-weight: bold; margin: 0 0 .45rem; padding-bottom: .45rem; } .wpf_form .wpf_slider.ui-slider .ui-widget-header { background: #dda863; border: none; } .wpf_form .wpf_slider.ui-slider { background: rgba(256, 256, 256, 0.3); margin-top: 1.5rem; margin-bottom: 0.75rem; } /* WOO color bettering */ .wc-block-components-form .wc-block-components-text-input input[type=email], .wc-block-components-form .wc-block-components-text-input input[type=number], .wc-block-components-form .wc-block-components-text-input input[type=tel], .wc-block-components-form .wc-block-components-text-input input[type=text], .wc-block-components-form .wc-block-components-text-input input[type=url], .wc-block-components-text-input input[type=email], .wc-block-components-text-input input[type=number], .wc-block-components-text-input input[type=tel], .wc-block-components-text-input input[type=text], .wc-block-components-text-input input[type=url] { background-color: inherit; border: var(--global-bs-input-border-width) solid var(--global-bs-input-border-color); border-radius: var(--global-bs-input-border-radius); color: inherit; } .wc-block-components-form .wc-block-components-text-input label, .wc-block-components-text-input label { color: inherit; opacity: 0.5; } .wc-blocks-components-select .wc-blocks-components-select__select { background: inherit; border: 1px solid var(--global-bs-input-border-color); border-radius: var(--global-bs-input-border-radius); color: inherit; } /* icons block animation */ .white-non-hover-animation { transition: transform 0.3s ease-in-out; display: block; color: #e5a859; } .white-non-hover-animation:hover { transform: scale(1.02) rotate(-1deg); } .wp-block-m-bootstrap-column-megastrap:nth-of-type(even) .white-non-hover-animation:hover { transform: scale(1.02) rotate(1deg); } .white-non-hover-animation .wp-block-image>img, .white-non-hover-animation .wp-block-heading, .white-non-hover-animation p { transition: filter 0.5s; transition: color 0.5s; } .white-non-hover-animation:not(:hover) .wp-block-image>img { filter: grayscale(1) brightness(2) !important; transition: filter 0.5s; } .white-non-hover-animation:not(:hover) .wp-block-heading, .white-non-hover-animation:not(:hover) p { color: white !important; transition: color 0.5s; background: unset !important; -webkit-background-clip: unset !important; -moz-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: unset !important; -moz-text-fill-color: unset !important; } .primary-bg-hover-animation { position: relative; z-index: 1; overflow: hidden; /* Heavy Frosted Glass Effect */ backdrop-filter: blur(40px) saturate(120%) brightness(1.1) !important; -webkit-backdrop-filter: blur(40px) saturate(120%) brightness(1.1) !important; /* Clean glass border with bright top edge */ border: 1px solid rgba(255, 255, 255, 0.08) !important; border-top: 1px solid rgba(255, 255, 255, 0.25) !important; border-left: 1px solid rgba(255, 255, 255, 0.15) !important; /* No inset shadows, just a soft ambient glow */ box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2) !important; border-radius: 20px !important; transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease, background 0.4s ease, border-color 0.4s ease; } .primary-bg-hover-animation>* { position: relative; z-index: 1; } .primary-bg-hover-animation::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; /* Soft top-to-bottom white gradient for the glass */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%); transition: opacity 0.4s ease; } /* The tracking orange glow - Extremely subtle and Desktop Only */ @media (min-width: 992px) { .primary-bg-hover-animation::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(229, 168, 89, 0.08) 0%, rgba(229, 168, 89, 0.03) 20%, transparent 50%); opacity: 0; transition: opacity 0.4s ease; } .primary-bg-hover-animation:hover::after { opacity: 1; } } .primary-bg-hover-animation:hover { backdrop-filter: blur(40px) saturate(120%) brightness(1.1) !important; -webkit-backdrop-filter: blur(40px) saturate(120%) brightness(1.1) !important; border-color: rgba(229, 168, 89, 0.1) !important; border-top-color: rgba(229, 168, 89, 0.2) !important; border-left-color: rgba(229, 168, 89, 0.15) !important; box-shadow: none !important; color: inherit; } /* Glass Buttons inside the blocks */ .primary-bg-hover-animation a.btn, .primary-bg-hover-animation a.btn-link { display: inline-block; padding: 0.6rem 1.2rem !important; background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 100px !important; /* Pill shape from screenshot */ color: white !important; text-transform: uppercase !important; font-size: 0.85rem !important; font-weight: 600 !important; letter-spacing: 0.5px !important; text-decoration: none !important; transition: all 0.3s ease !important; } .primary-bg-hover-animation:hover a.btn, .primary-bg-hover-animation:hover a.btn-link { background: rgba(229, 168, 89, 0.15) !important; border-color: rgba(229, 168, 89, 0.5) !important; color: white !important; box-shadow: 0 4px 15px rgba(229, 168, 89, 0.2) !important; } .primary-bg-hover-animation:hover .gradient-text { background: unset; background-size: unset; -webkit-background-clip: unset; -moz-background-clip: unset; background-clip: unset; -webkit-text-fill-color: unset; -moz-text-fill-color: unset; color: inherit; } /* --- Responsive & Premium Image Styles for Glass Cards --- */ .primary-bg-hover-animation .wp-block-image { margin-bottom: 0; display: flex; align-items: center; justify-content: center; } @media (max-width: 991px) { .primary-bg-hover-animation .wp-block-image { justify-content: flex-end !important; padding-right: 5%; } } @media (min-width: 992px) { .primary-bg-hover-animation .wp-block-image { margin-top: -40px; margin-bottom: 20px; position: relative; z-index: 5; } } .primary-bg-hover-animation img { max-width: 100%; height: auto; max-height: 280px; object-fit: contain; transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), filter 0.4s ease; } @media (min-width: 768px) { .primary-bg-hover-animation img { max-height: 380px; } } .m-products-loop-card.woo-glass-card .card-img-top { width: 100% !important; max-width: none !important; margin: 0 !important; display: block !important; border-radius: 20px 20px 0 0 !important; transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .primary-bg-hover-animation:hover img { transform: translateZ(0); -webkit-transform: translateZ(0); } .wp-block-m-bootstrap-column-megastrap:nth-of-type(even) .primary-bg-hover-animation:not(.m-products-loop-card):hover { transform: scale(1.02) rotate(1deg); } .hover-animation { transition: transform 0.3s ease-in-out; } .hover-animation:hover { transform: scale(1.02) rotate(-0.5deg); } .wp-block-m-bootstrap-column-megastrap:nth-of-type(even) .hover-animation:hover { transform: scale(1.02) rotate(1deg); } /* Target the element on hover */ .primary-on-hover:hover { background-color: var(--bs-primary) !important; color: #000000 !important; } .primary-on-hover { transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out; } /* --- HERO SECTION GLASS & GOLD BUTTONS --- */ /* Target the specific hero blocks using the class added by PHP. Filter out containers that have sub-rows (mimics previous JS filter logic) */ .hero-glass-block:not(:has(.m-row)) { position: relative; z-index: 1; overflow: hidden; /* Override the solid inline background color, but keep the image */ background-color: rgba(20, 20, 20, 0.5) !important; /* Heavy Frosted Glass Effect */ backdrop-filter: blur(30px) saturate(160%) brightness(1.1) !important; -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(1.1) !important; contain: paint; /* Glass borders */ border: 1px solid rgba(255, 255, 255, 0.08) !important; border-top: 1px solid rgba(255, 255, 255, 0.25) !important; border-left: 1px solid rgba(255, 255, 255, 0.15) !important; /* Soft ambient shadow */ box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4) !important; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); } /* Mouse-tracking glow for hero blocks (REMOVED - Replaced by Animated Border) */ @property --border-angle { syntax: ""; inherits: true; initial-value: 0turn; } /* Apply animated border ONLY to the designated block (the left one) */ .hero-animated-border::after { content: ""; position: absolute; inset: 0; z-index: 10; border-radius: inherit; padding: 1px; /* Thinner line */ background: conic-gradient(from var(--border-angle), transparent 45%, rgba(229, 168, 89, 1) 50%, transparent 55%); /* Thinner gradient spread */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: border-spin 8s linear infinite; /* Slower */ pointer-events: none; opacity: 0.9; } @keyframes border-spin { 100% { --border-angle: 1turn; } } /* Ensure contents stay above the background */ .hero-glass-block>* { position: relative; z-index: 2; } /* Hero Section Mobile Spacing Optimization: Bring heading closer to parallax cup */ @media (max-width: 991px) { body .hero-glass-section #coffee-hero-sc { margin-top: -25px !important; margin-bottom: -35px !important; width: 95% !important; } body .hero-glass-section .m-column-section-half:nth-child(2) .m-container-section-half { padding-top: 0.5rem !important; } } /* ═══════════════════════════════════════════════ HERO SECTION LIQUID GLASS BUTTONS Ultra-high specificity to override theme/block defaults ═══════════════════════════════════════════════ */ body .hero-glass-section .m-bootstrap-buttons .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.9rem 2.4rem !important; backdrop-filter: blur(30px) saturate(120%) brightness(1.1) !important; -webkit-backdrop-filter: blur(30px) saturate(120%) brightness(1.1) !important; contain: paint; border-radius: 100px !important; text-transform: uppercase !important; font-size: 0.95rem !important; font-weight: 800 !important; letter-spacing: 1.2px !important; text-decoration: none !important; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; border: none !important; background-image: none !important; } /* Primary Button Design */ body .hero-glass-section .m-bootstrap-buttons .btn.btn-primary { background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-top: 1px solid rgba(255, 255, 255, 0.45) !important; border-left: 1px solid rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } /* Outline/Secondary Button Design */ body .hero-glass-section .m-bootstrap-buttons .btn.btn-outline-primary { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.85) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important; } /* Premium Hover Interaction */ body .hero-glass-section .m-bootstrap-buttons .btn:hover { transform: none !important; color: #ffffff !important; } body .hero-glass-section .m-bootstrap-buttons .btn.btn-primary:hover { background: linear-gradient(135deg, rgba(229, 168, 89, 0.35) 0%, rgba(229, 168, 89, 0.08) 100%) !important; border-color: rgba(229, 168, 89, 0.5) !important; border-top-color: rgba(229, 168, 89, 0.8) !important; /* Soft layered glow */ box-shadow: 0 15px 45px rgba(229, 168, 89, 0.3), 0 0 20px rgba(229, 168, 89, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } body .hero-glass-section .m-bootstrap-buttons .btn.btn-outline-primary:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.4) !important; box-shadow: 0 12px 35px rgba(255, 255, 255, 0.1) !important; } /* Parent Block Hover State (Subtle Prep) */ .hero-glass-block:hover .btn-primary:not(:hover) { background: rgba(255, 255, 255, 0.22) !important; border-color: rgba(255, 255, 255, 0.35) !important; } /* ═══════════════════════════════════════════════ PRODUCT SLIDER CATALOG BUTTON (Liquid Glass) ═══════════════════════════════════════════════ */ .m-slider-catalog-btn-wrap { transform: none !important; margin-top: 40px !important; margin-bottom: -20px !important; padding-top: 10px !important; padding-bottom: 20px !important; overflow: visible !important; position: relative !important; z-index: 10 !important; } body .m-slider-catalog-btn-wrap .btn.m-slider-catalog-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.7rem 2.2rem !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-top: 1px solid rgba(255, 255, 255, 0.45) !important; border-left: 1px solid rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; backdrop-filter: blur(30px) saturate(120%) brightness(1.1) !important; -webkit-backdrop-filter: blur(30px) saturate(120%) brightness(1.1) !important; border-radius: 100px !important; text-transform: uppercase !important; font-size: 0.85rem !important; font-weight: 800 !important; letter-spacing: 1.2px !important; text-decoration: none !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; } body .m-slider-catalog-btn-wrap .btn.m-slider-catalog-btn:hover { background: linear-gradient(135deg, rgba(229, 168, 89, 0.35) 0%, rgba(229, 168, 89, 0.08) 100%) !important; border-color: rgba(229, 168, 89, 0.5) !important; border-top-color: rgba(229, 168, 89, 0.8) !important; color: #ffffff !important; box-shadow: 0 15px 45px rgba(229, 168, 89, 0.3), 0 0 20px rgba(229, 168, 89, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; transform: none !important; } /* ═══════════════════════════════════════════════ PREMIUM GLASS BADGE SYSTEM (Global) Unifies "КАТАЛОГ", "АРАБІКА", and other labels "Error Fix": Removes solid white blocks for true Liquid Glass ═══════════════════════════════════════════════ */ .has-secondary-color.has-white-background-color, .top-sales-badge, .product-attribute-vaha { background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(15px) saturate(120%) !important; -webkit-backdrop-filter: blur(15px) saturate(120%) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-top: 1px solid rgba(255, 255, 255, 0.35) !important; color: #ffffff !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; /* Consistency: Same shape as 'Arabica' in screenshot */ text-transform: uppercase !important; letter-spacing: 1.2px !important; font-weight: 700 !important; font-size: 0.75rem !important; padding: 6px 18px !important; border-radius: 100px !important; display: inline-flex !important; align-items: center; width: auto !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } /* Removed hover effect for static badges */ /* --- LEAD QUIZ FUNNEL (Premium Frosted Glass UI) --- */ /* --- LEAD QUIZ FUNNEL (Premium Frosted Glass UI) --- */ /* Ensure the background image stretches properly and position is relative */ .m-column-section-edit:has(.lead-quiz-funnel) { position: relative !important; z-index: 1 !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; overflow: visible !important; } /* NATIVE CSS AMBIENT GLOW Блок пишет фон через shorthand `background` (не background-image), а фон ставится на правую колонку m-column-section-half (та что НЕ квиз). Поэтому таргетируем правую колонку и используем `background: inherit` */ .m-column-section-half:not(:has(.lead-quiz-funnel))::after { content: '' !important; position: absolute !important; top: 15% !important; bottom: 15% !important; left: -110% !important; /* Выступает далеко влево - к левой колонке */ width: 100% !important; background: inherit !important; /* Наследуем shorthand background от родителя */ background-size: cover !important; background-position: center !important; filter: blur(60px) saturate(180%) brightness(1.2) !important; -webkit-filter: blur(60px) saturate(180%) brightness(1.2) !important; opacity: 0.6 !important; border-radius: 50px !important; z-index: 0 !important; pointer-events: none !important; } /* Убеждаемся что правая колонка имеет position: relative для ::after */ .m-column-section-edit:has(.lead-quiz-funnel) .m-column-section-half:not(:has(.lead-quiz-funnel)) { position: relative !important; overflow: visible !important; } /* Ensure the left column content sits above the glass */ .m-column-section-half:has(.lead-quiz-funnel) { background: transparent !important; border-right: none !important; position: relative !important; padding: 2rem !important; z-index: 10 !important; } .m-column-section-half:has(.lead-quiz-funnel)::before { display: none !important; } /* Ensure the other column stays underneath the glass layer */ .m-column-section-half:not(:has(.lead-quiz-funnel)) { position: relative !important; z-index: 0 !important; } /* The liquid glass fade effect across the WHOLE section */ .m-column-section-edit:has(.lead-quiz-funnel)::before { content: '' !important; position: absolute !important; inset: 0 !important; width: 60% !important; /* Limit width so the right side image stays sharp */ height: 100% !important; /* Темний преміальний градієнт для скляного вигляду (зменшено щільність для видимості фону) */ background: linear-gradient(90deg, rgba(15, 10, 5, 0.6) 0%, rgba(15, 10, 5, 0.4) 60%, transparent 100%) !important; /* Потужне розмиття фону */ backdrop-filter: blur(40px) saturate(120%) brightness(1.1) !important; -webkit-backdrop-filter: blur(40px) saturate(120%) brightness(1.1) !important; /* Плавна маска для м'якого краю скла */ mask-image: linear-gradient(90deg, black 0%, black 70%, transparent 100%) !important; -webkit-mask-image: linear-gradient(90deg, black 0%, black 70%, transparent 100%) !important; z-index: 5 !important; pointer-events: none !important; border-right: 1px solid rgba(255, 255, 255, 0.03); } @media (max-width: 991px) { .m-column-section-edit:has(.lead-quiz-funnel)::before { width: 100% !important; background: rgba(15, 10, 5, 0.85) !important; backdrop-filter: blur(30px) saturate(120%) !important; -webkit-backdrop-filter: blur(30px) saturate(120%) !important; -webkit-mask-image: none !important; mask-image: none !important; } } /* Premium Form Inputs */ .lead-quiz-funnel .premium-input { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: white !important; border-radius: 8px !important; padding: 0.8rem 1rem !important; transition: all 0.3s ease !important; backdrop-filter: blur(10px) !important; } .lead-quiz-funnel .premium-input::placeholder { color: rgba(255, 255, 255, 0.4) !important; } /* Golden Soft Glow on Focus and Hover */ .lead-quiz-funnel .premium-input:focus, .lead-quiz-funnel .premium-input:hover { background: rgba(229, 168, 89, 0.05) !important; border-color: rgba(229, 168, 89, 0.6) !important; box-shadow: 0 0 15px rgba(229, 168, 89, 0.3) !important; outline: none !important; } /* Glass Button matching the lead collector */ .lead-quiz-funnel .d-flex.gap-3 { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: 1rem !important; width: 100% !important; } .lead-quiz-funnel .premium-submit-btn, .lead-quiz-funnel .quiz-submit-btn, .lead-quiz-funnel .quiz-next-btn, .lead-quiz-funnel .btn-primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; color: white !important; font-weight: 600 !important; border-radius: 100px !important; padding: 13px 28px !important; min-height: 48px !important; font-size: 0.9rem !important; margin-top: 0 !important; line-height: 1 !important; transition: all 0.3s ease !important; text-transform: uppercase !important; letter-spacing: 1px !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } .lead-quiz-funnel .premium-submit-btn:hover, .lead-quiz-funnel .quiz-submit-btn:hover, .lead-quiz-funnel .quiz-next-btn:hover, .lead-quiz-funnel .btn-primary:hover { background: rgba(229, 168, 89, 0.2) !important; border-color: rgba(229, 168, 89, 0.6) !important; box-shadow: 0 4px 20px rgba(229, 168, 89, 0.35) !important; color: white !important; transform: translateY(-2px) !important; } /* Quiz Option Cards — Full Width & Premium Height */ .quiz-option { cursor: pointer; position: relative; display: block; width: 100% !important; margin: 0 0 10px 0 !important; } .quiz-option input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; } .quiz-option-content { display: flex !important; align-items: center !important; width: 100% !important; min-height: 52px !important; padding: 14px 20px !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 14px !important; color: #ffffff !important; font-size: 1.02rem !important; font-weight: 400 !important; box-sizing: border-box !important; transition: all 0.25s ease !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .quiz-option:hover .quiz-option-content { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(229, 168, 89, 0.45) !important; transform: translateX(4px) !important; } .quiz-option input[type="radio"]:checked + .quiz-option-content { background: rgba(229, 168, 89, 0.18) !important; border-color: rgba(229, 168, 89, 0.85) !important; box-shadow: 0 0 20px rgba(229, 168, 89, 0.25) !important; color: #ffffff !important; font-weight: 600 !important; } /* Quiz Steps Transition */ .quiz-step { animation: fadeIn 0.4s ease forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Back button in quiz */ .lead-quiz-funnel .btn-outline-light, .lead-quiz-funnel .quiz-prev-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 100px !important; padding: 13px 24px !important; min-height: 48px !important; min-width: 100px !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; background: rgba(255, 255, 255, 0.04) !important; color: rgba(255, 255, 255, 0.85) !important; text-transform: uppercase !important; font-size: 0.85rem !important; font-weight: 600 !important; letter-spacing: 1px !important; margin-top: 0 !important; line-height: 1 !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; transition: all 0.3s ease !important; } .lead-quiz-funnel .btn-outline-light:hover, .lead-quiz-funnel .quiz-prev-btn:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.4) !important; color: white !important; transform: translateY(-2px) !important; } /* Force the wrapper background to cover the full area */ .wp-block-m-column-section-megastrap:has(.lead-quiz-funnel) { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* --- 2026 GLASS NAVBAR --- */ .navbar-glass { background: rgba(15, 10, 5, 0.65) !important; backdrop-filter: blur(25px) saturate(180%) brightness(1.2) !important; -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(1.2) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important; transition: all 0.3s ease-in-out; } /* Fix Bootstrap Offcanvas Backdrop for True Liquid Glass */ .offcanvas-backdrop.show { opacity: 1 !important; background: rgba(10, 5, 0, 0.4) !important; backdrop-filter: blur(15px) saturate(130%) !important; -webkit-backdrop-filter: blur(15px) saturate(130%) !important; } /* ═══════════════════════════════════════════════ MOBILE NAV — UTILITY HUB (2026 PREMIUM) ═══════════════════════════════════════════════ */ /* Hub wrapper — subtle separator */ .mnav-hub { border-bottom: 1px solid rgba(255, 255, 255, 0.07); } /* Promo Banner */ .mnav-promo { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(229, 168, 89, 0.15) 0%, rgba(180, 120, 40, 0.08) 100%); border: 1px solid rgba(229, 168, 89, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 0.25s ease, border-color 0.25s ease; } .mnav-promo-phone { background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(200, 200, 200, 0.03) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.13) !important; cursor: pointer; } .mnav-promo-phone:hover, .mnav-promo-phone:active { background: linear-gradient(135deg, rgba(229, 168, 89, 0.12) 0%, rgba(180, 120, 40, 0.08) 100%) !important; border-color: rgba(229, 168, 89, 0.35) !important; box-shadow: 0 0 20px rgba(229, 168, 89, 0.12); } .mnav-promo-phone .mnav-promo-title { color: rgba(255, 255, 255, 0.95) !important; font-weight: 700 !important; } .mnav-promo-phone .mnav-promo-sub { color: rgba(255, 255, 255, 0.75) !important; font-size: 0.88rem !important; font-weight: 600 !important; } .mnav-promo-label { display: flex; align-items: center; opacity: 0.9; flex-shrink: 0; } .mnav-promo-text { display: flex; flex-direction: column; gap: 1px; } .mnav-promo-title { font-size: 0.95rem; font-weight: 700; color: rgba(255, 255, 255, 0.95); line-height: 1.2; } .mnav-promo-sub { font-size: 0.78rem; color: rgba(229, 168, 89, 0.85); font-weight: 500; letter-spacing: 0.3px; } /* Actions Row */ .mnav-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mnav-action-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 10px; border-radius: 12px; font-size: 0.9rem; font-weight: 600; color: white; border: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .mnav-action-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .mnav-action-btn:active { transform: scale(0.96); } .mnav-action-gold { background: rgba(229, 168, 89, 0.2); border: 1px solid rgba(229, 168, 89, 0.45) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 215, 100, 0.15); color: white !important; } .mnav-action-gold:hover { background: rgba(229, 168, 89, 0.32); box-shadow: 0 4px 16px rgba(229, 168, 89, 0.25), inset 0 1px 0 rgba(255, 215, 100, 0.2); } .mnav-action-glass { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); color: white !important; } .mnav-action-glass:hover { background: rgba(255, 255, 255, 0.1); color: white !important; } /* Category Label */ .mnav-category-label { display: flex; align-items: center; gap: 10px; padding: 8px 0; opacity: 0.65; font-size: 0.82rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255, 255, 255, 0.7); border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 4px; } /* Footer — always visible at bottom */ .mnav-footer { padding-top: 14px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.07); flex-shrink: 0; } /* Scrollable nav area */ .mnav-nav-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch; } .mnav-nav-scroll::-webkit-scrollbar { width: 2px; } .mnav-nav-scroll::-webkit-scrollbar-track { background: transparent; } .mnav-nav-scroll::-webkit-scrollbar-thumb { background: rgba(229, 168, 89, 0.3); border-radius: 2px; } /* ═══════════════════════════════════════ GOLDEN SNAKE BORDER ANIMATION ════════════════════════════════════════ */ @keyframes snake-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .mnav-promo-snake-wrap { position: relative; border-radius: 14px; padding: 2px; overflow: hidden; } .mnav-promo-snake-wrap::before { content: ''; position: absolute; inset: -60%; background: conic-gradient(from 0deg, transparent 0deg, transparent 60deg, rgba(229, 168, 89, 0.9) 90deg, rgba(255, 210, 100, 1) 120deg, transparent 150deg, transparent 360deg); animation: snake-rotate 4s linear infinite; z-index: 0; border-radius: 50%; } .mnav-promo-snake-wrap::after { content: ''; position: absolute; inset: 2px; background: rgba(12, 8, 3, 0.85); border-radius: 12px; z-index: 1; } .mnav-promo-snake-wrap .mnav-promo { position: relative; z-index: 2; border: none !important; border-radius: 12px; margin-bottom: 0; } /* Legacy glass card classes kept for compat */ .mobile-glass-promo, .mobile-glass-card, .mobile-glass-card-accent { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .offcanvas-glass { background: rgba(15, 10, 5, 0.94) !important; backdrop-filter: blur(25px) saturate(180%) brightness(1.2) !important; -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(1.2) !important; border-left: 1px solid rgba(255, 255, 255, 0.08) !important; width: min(390px, 92vw) !important; max-width: 92vw !important; top: 0 !important; bottom: 0 !important; height: 100dvh !important; height: -webkit-fill-available !important; box-shadow: -10px 0 50px rgba(0, 0, 0, 0.6) !important; overflow: hidden !important; border-top-left-radius: 24px !important; border-bottom-left-radius: 24px !important; z-index: 9999999 !important; } .offcanvas-glass .offcanvas-header { padding-top: max(16px, env(safe-area-inset-top, 16px)) !important; padding-bottom: 6px !important; padding-right: 1.25rem !important; display: flex !important; justify-content: flex-end !important; } .offcanvas-glass .offcanvas-body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important; } .offcanvas-glass .mnav-nav-scroll { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } /* ═══════════════════════════════════════════════ PREMIUM LIQUID GLASS CLOSE BUTTON (OFFCANVAS) ═══════════════════════════════════════════════ */ .mnav-close-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-top: 1px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); cursor: pointer; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); padding: 0; } .mnav-close-btn:hover { background: rgba(229, 168, 89, 0.25); border-color: rgba(229, 168, 89, 0.5); border-top-color: rgba(229, 168, 89, 0.8); color: #ffffff; box-shadow: 0 6px 20px rgba(229, 168, 89, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); transform: rotate(90deg) scale(1.05); } .mnav-close-btn:active { transform: rotate(90deg) scale(0.95); } .mnav-close-btn svg { transition: transform 0.3s ease; } @media (max-width: 576px) { .offcanvas-glass { width: min(380px, 94vw) !important; max-width: 94vw !important; } } /* Hide 'Головна' (first item) */ .navbar-glass .navbar-nav .nav-item:first-child, .mobile-glass-menu .nav-item:first-child { display: none !important; } /* Menu links typography & layout */ .navbar-glass .navbar-nav .nav-link { display: flex; align-items: center; gap: 8px; /* Closer spacing between icon and text */ color: rgba(255, 255, 255, 0.8) !important; font-weight: 500; font-size: 0.85rem; /* Smaller elegant text */ letter-spacing: 0.5px; padding: 0.8rem 1rem !important; transition: all 0.3s ease !important; position: relative; } /* Light SVG Icons using CSS Masking (Desktop) */ .navbar-glass .navbar-nav .nav-link::before { content: ''; display: inline-block; width: 24px; /* Slightly adjusted icon size */ height: 24px; background-color: rgba(255, 255, 255, 0.85); /* Light color for icons */ -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-size: contain; mask-repeat: no-repeat; mask-position: center; transition: transform 0.3s ease, background-color 0.3s ease; opacity: 0.8; } /* Icons assignment */ .navbar-glass .navbar-nav .nav-link[href*="/shop/"]::before { -webkit-mask-image: url('/wp-content/themes/megastrap-shop/img/catalog.svg'); mask-image: url('/wp-content/themes/megastrap-shop/img/catalog.svg'); } .navbar-glass .navbar-nav .nav-link[href*="/dostavka-ta-oplata/"]::before { -webkit-mask-image: url('/wp-content/themes/megastrap-shop/img/dostavka.png'); mask-image: url('/wp-content/themes/megastrap-shop/img/dostavka.png'); } .navbar-glass .navbar-nav .nav-link[href*="/orenda-kavomashyn/"]::before { -webkit-mask-image: url('/wp-content/themes/megastrap-shop/img/arenda.svg'); mask-image: url('/wp-content/themes/megastrap-shop/img/arenda.svg'); } .navbar-glass .navbar-nav .nav-link[href*="/partnerstvo/"]::before { -webkit-mask-image: url('/wp-content/themes/megastrap-shop/img/partnerstvo.svg'); mask-image: url('/wp-content/themes/megastrap-shop/img/partnerstvo.svg'); } /* Elegant hover effect - SOFTER */ .navbar-glass .navbar-nav .nav-link:hover { color: #ffffff !important; text-shadow: 0 0 8px rgba(255, 255, 255, 0.3); } .navbar-glass .navbar-nav .nav-link:hover::before { transform: translateY(-1px); opacity: 1; background-color: #ffffff; /* Icon turns pure white */ filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4)); /* Soft glow */ } /* Animated underline covering the full width uniformly - THINNER */ .navbar-glass .navbar-nav .nav-link::after { content: ''; position: absolute; width: 0; height: 1px; /* Thinner */ bottom: 5px; left: 50%; background-color: rgba(255, 255, 255, 0.5); /* Softer color */ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); transform: translateX(-50%); opacity: 0; } .navbar-glass .navbar-nav .nav-link:hover::after { width: calc(100% - 1.5rem); /* Covers the inner text/icon area */ opacity: 1; } /* Mobile Elegant Menu Typography */ .mobile-glass-menu .elegant-menu { display: flex; flex-direction: column; gap: 0.5rem; } .mobile-glass-menu .nav-link { display: flex; align-items: center; gap: 15px; text-align: left; font-size: 1.15rem !important; font-weight: 500 !important; letter-spacing: 0.2px; padding: 1.1rem 0 !important; color: rgba(255, 255, 255, 0.92) !important; transition: all 0.3s ease; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; text-transform: none; } .mobile-glass-menu .nav-item:last-child .nav-link { border-bottom: none !important; } .mobile-glass-menu .nav-link:hover, .mobile-glass-menu .nav-link:active { color: #ffffff !important; transform: translateX(5px); text-shadow: 0 0 10px rgba(229, 168, 89, 0.3); } /* Elegant Icons using Masking */ .mobile-glass-menu .nav-link::before { content: ''; display: inline-block; flex-shrink: 0; width: 24px; height: 24px; background-color: rgba(255, 255, 255, 0.8); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-size: contain; mask-repeat: no-repeat; mask-position: center; transition: all 0.3s ease; } .mobile-glass-menu .nav-link[href*="/shop/"]::before { -webkit-mask-image: url('/wp-content/themes/megastrap-shop/img/catalog.svg'); mask-image: url('/wp-content/themes/megastrap-shop/img/catalog.svg'); } .mobile-glass-menu .nav-link[href*="/dostavka-ta-oplata/"]::before { -webkit-mask-image: url('/wp-content/themes/megastrap-shop/img/dostavka.png'); mask-image: url('/wp-content/themes/megastrap-shop/img/dostavka.png'); } .mobile-glass-menu .nav-link[href*="/orenda-kavomashyn/"]::before { -webkit-mask-image: url('/wp-content/themes/megastrap-shop/img/arenda.svg'); mask-image: url('/wp-content/themes/megastrap-shop/img/arenda.svg'); } .mobile-glass-menu .nav-link[href*="/partnerstvo/"]::before { -webkit-mask-image: url('/wp-content/themes/megastrap-shop/img/partnerstvo.svg'); mask-image: url('/wp-content/themes/megastrap-shop/img/partnerstvo.svg'); } .mobile-glass-menu .nav-link:hover::before, .mobile-glass-menu .nav-link:active::before { background-color: #e5a859; transform: scale(1.1); } /* Footer Redesign - Structured & Native-like */ .mobile-contacts-list { display: flex; flex-direction: column; gap: 0.8rem; } .mobile-contacts-list a { display: flex; align-items: center; gap: 12px; font-size: 1rem; color: rgba(255, 255, 255, 0.8) !important; text-decoration: none; transition: all 0.3s ease; padding: 0.2rem 0; } .mobile-contacts-list a:hover { color: white !important; } .btn-glass-soft { position: relative; background: rgba(255, 255, 255, 0.06) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: white !important; font-weight: 600 !important; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 1px; border-radius: 100px !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; transition: all 0.35s ease !important; display: flex; justify-content: center; align-items: center; text-decoration: none; overflow: hidden; } .btn-glass-soft::before { content: ''; position: absolute; inset: 0; border-radius: 100px; background: linear-gradient(135deg, rgba(229, 168, 89, 0) 0%, rgba(229, 168, 89, 0) 100%); transition: background 0.35s ease; z-index: 0; } .btn-glass-soft span, .btn-glass-soft>* { position: relative; z-index: 1; } .btn-glass-soft:hover, .btn-glass-soft:active { background: rgba(229, 168, 89, 0.12) !important; border-color: rgba(229, 168, 89, 0.45) !important; box-shadow: 0 0 0 1px rgba(229, 168, 89, 0.2), 0 6px 24px rgba(229, 168, 89, 0.18), inset 0 1px 0 rgba(255, 215, 100, 0.1) !important; color: white !important; } /* --- 2026 LIQUID GLASS FOOTER --- */ /* Safe background targeting for the dark footer wrapper */ #site-footer .has-dark-background-color { background: linear-gradient(180deg, #0a0a0a 0%, #151515 100%) !important; border-top: 1px solid rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px 0 rgba(229, 168, 89, 0.1); } /* Typography & Hover Micro-animations Only target text links, avoid image wrappers like figure/img */ /* === Liquid Glass Footer Typography === */ .custom-liquid-footer .footer-link { color: #888888 !important; text-decoration: none !important; font-size: 14px; transition: color 0.3s ease !important; display: inline-block; } .custom-liquid-footer .footer-link:hover { color: #999999 !important; /* Дуже м'який перехід, без яскравого білого */ text-decoration: none !important; /* Блокування дефолтного підкреслення Bootstrap */ } .custom-liquid-footer .footer-link-white { color: rgba(255, 255, 255, 0.6) !important; /* Приглушений білий для телефонів */ text-decoration: none !important; font-size: 14px; transition: color 0.3s ease !important; display: inline-block; } .custom-liquid-footer .footer-link-white:hover { color: rgba(255, 255, 255, 0.4) !important; /* Більше приглушення при наведенні */ text-decoration: none !important; /* Блокування дефолтного підкреслення Bootstrap */ } /* Contact text in footer without links */ #site-footer p { color: rgba(255, 255, 255, 0.6); } /* === 2026 Social Icons Row (individual per-icon hover glow) === */ .footer-social-row { display: flex; align-items: center; gap: 10px; } .footer-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-decoration: none !important; transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; position: relative; overflow: hidden; } .footer-social-icon::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at center, var(--social-glow, #fff) 0%, transparent 70%); opacity: 0; transition: opacity 0.35s ease; } .footer-social-icon:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--social-glow, rgba(255, 255, 255, 0.4)); box-shadow: 0 0 20px color-mix(in srgb, var(--social-glow, #e5a859) 65%, transparent), 0 0 8px color-mix(in srgb, var(--social-glow, #e5a859) 35%, transparent); } .footer-social-icon:hover::before { opacity: 0.18; } .footer-social-icon img { width: 20px !important; height: 20px !important; object-fit: contain; display: block; filter: brightness(0.8); transition: filter 0.35s ease; position: relative; z-index: 1; } .footer-social-icon:hover img { filter: brightness(1) drop-shadow(0 0 4px color-mix(in srgb, var(--social-glow, #fff) 80%, transparent)); } /* Bottom Copyright Separator */ #site-footer p.has-text-color.small { position: relative; padding-top: 2rem; margin-top: 2rem !important; text-align: center; color: rgba(255, 255, 255, 0.3) !important; font-size: 0.85rem; letter-spacing: 0.5px; width: 100%; } #site-footer p.has-text-color.small::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; max-width: 400px; height: 1px; background: linear-gradient(90deg, transparent, rgba(229, 168, 89, 0.2), transparent); } /* --- 2026 LIQUID GLASS FOOTER REDESIGN (JS-INJECTED LAYOUT) --- */ .footer-top-tier { margin-bottom: 1rem; } .footer-bottom-tier { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; padding-top: 2rem; border-top: 1px solid rgba(229, 168, 89, 0.1); position: relative; width: 100%; } .footer-bottom-tier::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 80%; max-width: 800px; height: 1px; background: linear-gradient(90deg, transparent, rgba(229, 168, 89, 0.4), transparent); } .footer-copyright { color: rgba(255, 255, 255, 0.3) !important; font-size: 0.85rem; margin: 0 !important; padding: 0 !important; text-align: left; } /* === Payment / Delivery Logos (true inline SVG, crisp at any scale) === */ .footer-payments { display: flex; align-items: center; gap: 16px; } .footer-pay-inline { display: inline-flex; align-items: center; line-height: 0; } /* Nova Poshta — SVG has grey fill (#555), invert to white */ .footer-pay-svg.fp-np { width: auto !important; height: 22px !important; filter: brightness(0) invert(1); opacity: 0.9; } /* Visa — show natural embedded colors */ .footer-pay-svg.fp-visa { width: auto !important; height: 20px !important; } /* Mastercard — show natural embedded colors */ .footer-pay-svg.fp-mc { width: auto !important; height: 20px !important; } @media (max-width: 991px) { .footer-top-tier { display: none !important; } .footer-bottom-tier { flex-direction: column; justify-content: center; text-align: center; padding-top: 2.5rem; } .footer-copyright { text-align: center; order: 3; margin-top: 1rem !important; } .footer-social-row { order: 1; } .footer-payments { order: 2; margin-top: 0.5rem; } } /* Woo Glass Card Additions */ .m-products-loop-card.woo-glass-card { background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(15px) saturate(120%) !important; -webkit-backdrop-filter: blur(15px) saturate(120%) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-top: 1px solid rgba(255, 255, 255, 0.25) !important; border-left: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important; border-radius: 20px !important; /* overflow: hidden !important; */ padding: 0 !important; /* Fix overflow hidden corner bleeding */ color: #ffffff !important; transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, border-color 0.4s ease; height: auto !important; min-height: 100% !important; display: flex !important; flex-direction: column !important; } .m-products-loop-card.woo-glass-card .card-body, .m-products-loop-card.woo-glass-card .m-products-loop-card-body { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 0 !important; /* Managed by children padding */ } /* Specific internal padding for elements */ .m-products-loop-card.woo-glass-card .m-product-title { padding: 0.8rem 1.25rem 0.2rem !important; /* More compact title padding */ margin: 0 !important; width: 100%; font-weight: 300 !important; /* Lightening title */ } .m-products-loop-card.woo-glass-card .m-product-action-wrapper { padding: 0.3rem 1.25rem 1.2rem !important; width: 100%; display: flex !important; flex-wrap: wrap !important; /* Automatic wrapping */ align-items: center !important; justify-content: space-between !important; gap: 12px !important; } /* Gold Liquid Glass Effect for Price */ .m-products-loop-card.woo-glass-card .price { background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.15) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-top: 1px solid rgba(255, 255, 255, 0.25) !important; border-left: 1px solid rgba(255, 255, 255, 0.15) !important; padding: 4px 10px !important; /* Уменьшаем боковые отступы */ border-radius: 12px !important; display: inline-flex !important; align-items: center; justify-content: center; color: #f6dba6 !important; /* Soft gold text */ font-family: "Outfit", sans-serif !important; font-weight: 300 !important; font-size: 1.15rem !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; transition: none !important; } .m-products-loop-card.woo-glass-card .price ins, .m-products-loop-card.woo-glass-card .price .woocommerce-Price-amount { text-decoration: none !important; color: #f6dba6 !important; } .m-products-loop-card.woo-glass-card .price { flex: 0 1 auto !important; /* Узкий край, не растягивается */ min-width: min-content !important; white-space: nowrap !important; } .m-products-loop-card.woo-glass-card .m-archive-loop-buttons-wrapper { flex: 1 1 auto !important; /* Занимает оставшееся место */ display: flex !important; justify-content: flex-end !important; min-width: fit-content !important; } /* Стили для кнопки "Купить", чтобы она не сливалась при наведении */ .m-products-loop-card.woo-glass-card .m-archive-loop-buttons-wrapper .btn { background: rgba(255, 255, 255, 0.12) !important; /* Чуть светлее, чтобы выделить */ border: 1px solid rgba(255, 255, 255, 0.15) !important; border-top: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 12px !important; color: #ffffff !important; font-weight: 400 !important; padding: 6px 16px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .m-products-loop-card.woo-glass-card .m-archive-loop-buttons-wrapper .btn:hover { background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.15) 100%) !important; border-color: rgba(255, 255, 255, 0.1) !important; border-top-color: rgba(255, 255, 255, 0.25) !important; border-left-color: rgba(255, 255, 255, 0.15) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; transform: translateY(-1px) !important; } .m-products-loop-card.woo-glass-card * { color: #ffffff !important; } .m-products-loop-card.woo-glass-card:hover { background: rgba(255, 255, 255, 0.1) !important; /* Уменьшаем выделение бордером при наведении */ border-color: rgba(229, 168, 89, 0.2) !important; } .m-products-loop-card.woo-glass-card img, .m-products-loop-card.woo-glass-card a.woocommerce-LoopProduct-link { border-radius: 20px 20px 0 0 !important; } .m-products-loop-card.woo-glass-card .card-img-top { width: 100% !important; height: auto !important; max-height: 420px !important; object-fit: cover !important; /* Changed to cover to ensure no gaps at top/sides */ object-position: center !important; padding: 0 !important; margin: 0 !important; display: block !important; } .top-sales-badge { animation: glow-pulse 2s infinite alternate; } @keyframes glow-pulse { 0% { box-shadow: 0 0 5px rgba(255, 152, 0, 0.5); } 100% { box-shadow: 0 0 15px rgba(255, 152, 0, 0.9), 0 0 25px rgba(255, 152, 0, 0.5); } } /* Hero Social Proof with Liquid Glass Effect */ .hero-social-proof { display: inline-flex; align-items: center; padding: 0.65rem 1.6rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.12); border-top: 1px solid rgba(255, 255, 255, 0.25); border-left: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.05); animation: float-proof 6s ease-in-out infinite; } @keyframes float-proof { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .hero-social-proof .proof-text { color: #fff; font-weight: 700; font-size: 0.95rem; background: linear-gradient(90deg, #fff, #e5a859, #fff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: text-shine 5s linear infinite; white-space: nowrap; letter-spacing: 0.6px; text-shadow: 0 0 15px rgba(229, 168, 89, 0.2); } @keyframes text-shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* Mobile Adjustments for Social Proof */ @media (max-width: 576px) { .hero-social-proof { padding: 0.5rem 0.8rem; margin-top: 1rem; } .hero-social-proof .proof-text { font-size: 0.8rem; letter-spacing: 0.2px; white-space: normal; /* Allow wrapping on very small screens */ text-align: center; line-height: 1.3; } .hero-social-proof-container { display: flex !important; justify-content: center; } /* Center Hero buttons on mobile */ body .hero-glass-section .m-bootstrap-buttons { display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 10px !important; width: 100% !important; } /* Stack Price and Button on Mobile (Preserving user's original card design) */ .m-products-loop-card.woo-glass-card .m-product-action-wrapper { flex-direction: column !important; align-items: center !important; /* Центруем ценник */ gap: 12px !important; padding-bottom: 1.8rem !important; } .m-products-loop-card.woo-glass-card .price { width: auto !important; margin-bottom: 5px !important; font-size: 1.1rem !important; } .m-products-loop-card.woo-glass-card .m-archive-loop-buttons-wrapper { width: 100% !important; } .m-products-loop-card.woo-glass-card .card-img-top { width: 100% !important; height: auto !important; max-height: 320px !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; } .m-products-loop-card.woo-glass-card .m-product-action-wrapper { padding-bottom: 1.2rem !important; gap: 8px !important; } } /* ═══════════════════════════════════════════════ PROFESSIONAL MOBILE ARRANGEMENT & BANNER CLEANUP ═══════════════════════════════════════════════ */ @media (max-width: 767px) { /* ═══════════════════════════════════════════════ 1. PROFESSIONAL MOBILE CARD ARRANGEMENT (Touch-Swipe Carousel) Transforms static vertical product grids into a buttery-smooth Kaspi/Apple style horizontal swipe row ═══════════════════════════════════════════════ */ .products.row, ul.products { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; gap: 16px !important; /* Расширяем внутренние отступы, чтобы свечение помещалось в скролл-зону и не обрезалось */ padding-top: 20px !important; padding-bottom: 30px !important; padding-left: 15px !important; padding-right: 15px !important; /* Компенсируем боковые отступы, чтобы скролл начинался от края экрана */ margin-left: -15px !important; margin-right: -15px !important; scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* IE/Edge */ } .products.row::-webkit-scrollbar, ul.products::-webkit-scrollbar { display: none !important; /* Chrome/Safari/Opera */ } .products.row>.m-products-item, .products.row>li.product, ul.products>li.product { width: 82% !important; max-width: 82% !important; flex: 0 0 82% !important; scroll-snap-align: center !important; margin: 0 !important; padding: 10px !important; /* Subtle padding for glass shadow */ } /* ═══════════════════════════════════════════════ 2. PREMIUM LIQUID GLASS NAVIGATION ARROWS (Mobile Carousel) Provides an intuitive visual indicator that cards can be clicked/swiped horizontally ═══════════════════════════════════════════════ */ .m-mobile-carousel-wrapper { position: relative !important; width: 100% !important; display: block !important; } .m-carousel-arrow { position: absolute !important; top: 38% !important; transform: translateY(-50%) !important; width: 46px !important; height: 46px !important; border-radius: 50% !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 100%) !important; backdrop-filter: blur(25px) saturate(120%) !important; -webkit-backdrop-filter: blur(25px) saturate(120%) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; border-top: 1px solid rgba(255, 255, 255, 0.6) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 100 !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; padding: 0 !important; } .m-carousel-arrow.m-arrow-left { left: 8px !important; } .m-carousel-arrow.m-arrow-right { right: 8px !important; } .m-carousel-arrow:hover { background: linear-gradient(135deg, rgba(229, 168, 89, 0.45) 0%, rgba(229, 168, 89, 0.15) 100%) !important; border-color: rgba(229, 168, 89, 0.6) !important; color: #ffffff !important; box-shadow: 0 12px 35px rgba(229, 168, 89, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .m-carousel-arrow.arrow-pressed { transform: translateY(-50%) scale(0.88) !important; background: linear-gradient(135deg, rgba(229, 168, 89, 0.6) 0%, rgba(229, 168, 89, 0.25) 100%) !important; box-shadow: 0 5px 15px rgba(229, 168, 89, 0.4) !important; } /* ═══════════════════════════════════════════════ 3. BULLETPROOF MOBILE GAP ELIMINATION (100% Guarantee) Catches ANY outer Gutenberg block (section, group, container, row, column) holding the banner ═══════════════════════════════════════════════ */ section:has(.primary-bg-hover-animation[style*="Pachka-Banner"]), section:has(.primary-bg-hover-animation[style*="Pachka-Banne11113r"]), div.wp-block-group:has(.primary-bg-hover-animation[style*="Pachka-Banner"]), div.wp-block-group:has(.primary-bg-hover-animation[style*="Pachka-Banne11113r"]), div.wp-block-columns:has(.primary-bg-hover-animation[style*="Pachka-Banner"]), div.wp-block-columns:has(.primary-bg-hover-animation[style*="Pachka-Banne11113r"]), .wp-block-m-bootstrap-container-megastrap:has(.primary-bg-hover-animation[style*="Pachka-Banner"]), .wp-block-m-bootstrap-container-megastrap:has(.primary-bg-hover-animation[style*="Pachka-Banne11113r"]), .wp-block-m-bootstrap-row-megastrap:has(.primary-bg-hover-animation[style*="Pachka-Banner"]), .wp-block-m-bootstrap-row-megastrap:has(.primary-bg-hover-animation[style*="Pachka-Banne11113r"]), .wp-block-m-bootstrap-column-megastrap:has(.primary-bg-hover-animation[style*="Pachka-Banner.png"]), .wp-block-m-bootstrap-column-megastrap:has(.primary-bg-hover-animation[style*="Pachka-Banne11113r.png"]), .col-content.primary-bg-hover-animation[style*="Pachka-Banner.png"], .col-content.primary-bg-hover-animation[style*="Pachka-Banne11113r.png"] { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; border: none !important; } /* Target only the parent row/container holding the upper Rent/Wholesale banner */ .wp-block-m-bootstrap-row-megastrap:has(.primary-bg-hover-animation[style*="Pachka-Banner"]), .wp-block-m-bootstrap-container-megastrap:has(.primary-bg-hover-animation[style*="Pachka-Banner"]) { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Target Popular Products heading specifically to eliminate top gap */ h1, h2, h3, h4, h5, h6, .wp-block-heading, section:has(.products), .wp-block-group:has(.products), .wp-block-m-bootstrap-container-megastrap:has(.products), .wp-block-heading:has(+ .products), .wp-block-heading:has(+ * .products) { margin-top: 0.5rem !important; padding-top: 0 !important; } /* If there is an empty spacer block or separator between them in Gutenberg, completely collapse it */ .wp-block-spacer, .wp-block-separator, hr { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================================== PREMIUM AMBIENT BACKLIGHT EFFECT (YOUTUBE AMBILIGHT STYLE + COLOR ANALYSIS) ========================================================================== */ /* Обертка для карточки и её свечения */ .m-ambient-wrapper { position: relative !important; width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; z-index: 1; transform: translateZ(0); -webkit-transform: translateZ(0); } /* Убираем overflow: hidden у родительских контейнеров, чтобы свечение могло красиво рассеиваться вокруг */ .m-ambient-wrapper, .m-archive-product-item, .m-products-item, .m-shortcode-slide-item, li.product { overflow: visible !important; } /* Контейнер свечения позади карточки */ .m-ambient-backlight { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: -1 !important; pointer-events: none !important; border-radius: 20px !important; overflow: visible !important; transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: box-shadow 0.4s ease, background-color 0.4s ease; /* Заполняем контейнер доминирующим цветом, чтобы не было "тёмного провала" между карточкой и внешней тенью */ background-color: var(--ambient-dominant-color, transparent) !important; /* Дополнительное свечение на основе проанализированного доминирующего цвета (анализ картинки на цвета) */ box-shadow: 0 0 5px var(--ambient-dominant-color, rgba(229, 168, 89, 0.2)), 0 2px 4px var(--ambient-dominant-color, rgba(229, 168, 89, 0.1)) !important; } /* Размытая копия картинки товара (YouTube Ambilight style) */ .m-ambient-image { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; border-radius: 20px !important; /* Эффект рассеивания цвета */ filter: blur(5px) saturate(150%) brightness(1.1) !important; -webkit-filter: blur(5px) saturate(150%) brightness(1.1) !important; opacity: 0.35 !important; /* Скейлим картинку сильнее, чтобы её размытые тёмные края ушли далеко за пределы карточки */ transform: scale(1.03) translateZ(0); -webkit-transform: scale(1.03) translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: opacity, transform; transition: opacity 0.4s ease, transform 0.4s ease; } /* Эффект при наведении на карточку (усиление рассеивания и свечения) */ .m-ambient-wrapper:hover .m-ambient-backlight { box-shadow: 0 0 8px var(--ambient-dominant-color, rgba(229, 168, 89, 0.25)), 0 4px 6px var(--ambient-dominant-color, rgba(229, 168, 89, 0.15)) !important; } .m-ambient-wrapper:hover .m-ambient-image { opacity: 0.45 !important; transform: scale(1.04) translateZ(0); -webkit-transform: scale(1.04) translateZ(0); } /* Убеждаемся, что сама карточка находится поверх свечения и сохраняет свой liquid glass вид */ .m-ambient-wrapper .card, .m-ambient-wrapper .woo-glass-card, .m-ambient-wrapper .primary-bg-hover-animation { position: relative !important; z-index: 2 !important; flex-grow: 1 !important; margin: 0 !important; overflow: visible !important; transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Убираем темную тень самой карточки, чтобы она не "грязнила" цветное свечение */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .m-ambient-wrapper:hover .card, .m-ambient-wrapper:hover .woo-glass-card, .m-ambient-wrapper:hover .primary-bg-hover-animation { /* Оставляем только внутренний блик, внешняя тень убирается */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } /* Гарантируем скругление картинок внутри карточки */ .m-ambient-wrapper .card img.card-img-top, .m-ambient-wrapper .woo-glass-card img.card-img-top { border-radius: 20px 20px 0 0 !important; transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* ========================================================================== UX/UI MODERNIZATION 2026: NEW STYLES ========================================================================== */ /* 1. Scroll Reveal Animations */ .reveal-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; } .reveal-on-scroll.revealed { opacity: 1 !important; transform: none !important; } /* Delay classes disabled */ .delay-1, .delay-2, .delay-3 { transition-delay: 0s !important; } /* 2. Trust / Social Proof Section */ .trust-section { padding: 60px 0; background: transparent; position: relative; z-index: 10; } .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1060px; margin: 0 auto; padding: 0 15px; } .trust-card { background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(20px) saturate(120%) !important; -webkit-backdrop-filter: blur(20px) saturate(120%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-top: 1px solid rgba(255, 255, 255, 0.2) !important; border-left: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 20px !important; padding: 30px 20px; text-align: center; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .trust-card:hover { transform: translateY(-5px); border-color: rgba(229, 168, 89, 0.2) !important; background: rgba(255, 255, 255, 0.05) !important; } .trust-number { font-family: "Outfit", sans-serif; font-size: 3rem; font-weight: 800; line-height: 1; margin-bottom: 10px; background: conic-gradient(from 255.67deg at 30% 50%, #EEBC70 -80deg, #E3A455 25deg, #F6DBA6 80deg, #FFEBC4 156.58deg, #F0BE79 212.4deg, #BA7F3B 250deg, #EEBC70 270deg, #E3A455 380deg); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .trust-label { font-family: "Bona Nova", serif; font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 5px; } .trust-desc { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); margin: 0; } @media (max-width: 768px) { .trust-grid { grid-template-columns: 1fr; gap: 20px; } } /* 3. Redesigned Premium Pill Floating Cart */ #mgsc-float-widget.mgsc-float-widget { background: rgba(15, 10, 5, 0.7) !important; backdrop-filter: blur(30px) saturate(180%) brightness(1.2) !important; -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.2) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-top: 1px solid rgba(255, 255, 255, 0.25) !important; border-left: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; border-radius: 100px !important; padding: 10px 24px !important; bottom: 25px !important; right: 25px !important; height: 52px !important; display: flex !important; align-items: center !important; gap: 14px !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: pointer !important; color: #fff !important; z-index: 99999 !important; } #mgsc-float-widget.mgsc-float-widget:hover { background: rgba(229, 168, 89, 0.15) !important; border-color: rgba(229, 168, 89, 0.4) !important; box-shadow: 0 25px 50px rgba(229, 168, 89, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; transform: translateY(-3px) scale(1.02) !important; } #mgsc-float-widget .mgsc-float-badge { position: relative !important; top: auto !important; right: auto !important; transform: none !important; background: #E3A455 !important; background-image: conic-gradient(from 20deg at 40% -40%, #E3A455 7%, #F6DBA6 24%, #FFEBC3 43%, #F0BE79 59%, #BA7F3B 71%, #EEBC70 83%, #E3A455 100%) !important; color: #000 !important; font-size: 11px !important; font-weight: 700 !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 0 10px rgba(229, 168, 89, 0.4) !important; } #mgsc-float-widget svg { color: #fff !important; width: 20px !important; height: 20px !important; transition: transform 0.3s ease; } #mgsc-float-widget:hover svg { transform: scale(1.1); } #mgsc-float-widget .mgsc-float-info { display: flex !important; flex-direction: column !important; align-items: flex-start !important; line-height: 1.1 !important; } #mgsc-float-widget .mgsc-float-label { font-size: 9px !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; color: rgba(255, 255, 255, 0.5) !important; font-weight: 500 !important; } #mgsc-float-widget .mgsc-float-total { font-size: 14px !important; font-weight: 600 !important; color: #f6dba6 !important; } /* 4. Refined Marquee Line (Slimmer & Glassy) */ section.mega-headline { height: 4.5rem !important; margin-top: -2.25rem !important; margin-bottom: 2rem !important; } section.mega-headline .scroll.text1 { transform: rotate(-1.2deg) translateY(0.2rem) translateX(-0.2rem) !important; background: rgba(15, 10, 5, 0.4) !important; backdrop-filter: blur(20px) saturate(120%) !important; -webkit-backdrop-filter: blur(20px) saturate(120%) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important; } section.mega-headline .scroll div { font-size: 1rem !important; line-height: 4.1rem !important; font-weight: 400 !important; letter-spacing: 1px !important; color: rgba(255, 255, 255, 0.7) !important; } section.mega-headline .scroll div span { background: conic-gradient(from 255.67deg at 30% 50%, #EEBC70 -80deg, #E3A455 25deg, #F6DBA6 80deg, #FFEBC4 156.58deg, #F0BE79 212.4deg, #BA7F3B 250deg, #EEBC70 270deg, #E3A455 380deg); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600 !important; } /* 5. Quick View Overlay and Buttons on Loop Cards */ .m-products-loop-card.woo-glass-card { position: relative !important; } .card-quickview-btn { position: absolute; top: 15px; right: 15px; z-index: 10; width: 36px; height: 36px; border-radius: 50%; background: rgba(15, 10, 5, 0.6) !important; backdrop-filter: blur(15px) saturate(120%) !important; -webkit-backdrop-filter: blur(15px) saturate(120%) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-top: 1px solid rgba(255, 255, 255, 0.3) !important; display: flex; align-items: center; justify-content: center; color: #fff !important; cursor: pointer; opacity: 0; transform: scale(0.8); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .m-products-loop-card.woo-glass-card:hover .card-quickview-btn, .card:hover .card-quickview-btn, .m-ambient-wrapper:hover .card-quickview-btn { opacity: 1; transform: scale(1); } @media (max-width: 767.98px) { .card-quickview-btn { opacity: 0.9 !important; transform: scale(1) !important; } } .card-quickview-btn:hover { background: rgba(229, 168, 89, 0.25) !important; border-color: rgba(229, 168, 89, 0.5) !important; color: #fff !important; transform: scale(1.1) !important; } /* Quick View Modal Styles */ .quickview-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 99999999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .quickview-overlay.active { opacity: 1; visibility: visible; } .quickview-modal-content { background: rgba(20, 20, 20, 0.7); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.12); border-top: 1px solid rgba(255, 255, 255, 0.25); border-left: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); border-radius: 28px; padding: 30px; width: 90%; max-width: 800px; position: relative; transform: translateY(30px) scale(0.95); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); color: #fff; } .quickview-overlay.active .quickview-modal-content { transform: translateY(0) scale(1); } .quickview-close-btn { position: absolute; top: 15px; right: 20px; background: transparent; border: none; color: rgba(255, 255, 255, 0.5); font-size: 28px; cursor: pointer; transition: color 0.3s; } .quickview-close-btn:hover { color: #fff; } .quickview-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: center; } .quickview-image-container img { width: 100%; height: auto; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .quickview-details h2 { font-size: 2rem; margin-top: 0; margin-bottom: 15px; color: #fff; } .quickview-price { font-size: 1.5rem; color: #f6dba6; font-weight: 600; margin-bottom: 20px; } .quickview-desc { font-size: 0.95rem; color: rgba(255, 255, 255, 0.7); line-height: 1.6; margin-bottom: 25px; } .quickview-btn-wrap { display: flex; gap: 15px; } .quickview-add-to-cart { background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-top: 1px solid rgba(255, 255, 255, 0.45) !important; border-left: 1px solid rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; backdrop-filter: blur(30px) saturate(120%) brightness(1.1) !important; -webkit-backdrop-filter: blur(30px) saturate(120%) brightness(1.1) !important; border-radius: 100px !important; padding: 12px 28px !important; text-transform: uppercase; font-size: 0.85rem !important; font-weight: 800 !important; letter-spacing: 1.2px !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; cursor: pointer; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .quickview-add-to-cart:hover { background: linear-gradient(135deg, rgba(229, 168, 89, 0.35) 0%, rgba(229, 168, 89, 0.08) 100%) !important; border-color: rgba(229, 168, 89, 0.5) !important; border-top-color: rgba(229, 168, 89, 0.8) !important; color: #ffffff !important; box-shadow: 0 15px 45px rgba(229, 168, 89, 0.3), 0 0 20px rgba(229, 168, 89, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; transform: translateY(-2px); } .quickview-view-product { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(30px) saturate(120%) !important; -webkit-backdrop-filter: blur(30px) saturate(120%) !important; border-radius: 100px !important; padding: 12px 28px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important; text-decoration: none; text-transform: uppercase; font-size: 0.85rem !important; font-weight: 800 !important; letter-spacing: 1.2px !important; display: inline-flex; align-items: center; justify-content: center; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .quickview-view-product:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.4) !important; box-shadow: 0 12px 35px rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; transform: translateY(-2px); } @media (max-width: 768px) { .quickview-grid { grid-template-columns: 1fr; gap: 20px; } .quickview-details h2 { font-size: 1.5rem; } } /* 6. Lead Funnel Block Hierarchy */ /* Make the first column (Rent) more prominent with animated border and slightly larger scale */ .m-column-section-edit:has(.lead-quiz-funnel) .m-column-section-half:has(.lead-quiz-funnel) { border-radius: 0px !important; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-top: 1px solid rgba(255, 255, 255, 0.2) !important; border-left: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3) !important; } /* 7. Footer Transition Separator */ .custom-liquid-footer { position: relative; z-index: 10; } .custom-liquid-footer::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; display: none; background: #0a0a0a; pointer-events: none; } .custom-liquid-footer::before { content: ''; position: absolute; top: -50px; left: 0; width: 100%; height: 50px; background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 10, 0.9) 70%, #0a0a0a 100%); pointer-events: none; z-index: 5; } /* 8. Search Overlay Styles */ .search-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(10, 5, 0, 0.7); backdrop-filter: blur(35px) saturate(150%) brightness(0.9); -webkit-backdrop-filter: blur(35px) saturate(150%) brightness(0.9); z-index: 999999999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s; } .search-overlay.active { opacity: 1; visibility: visible; } .search-overlay-close { position: absolute; top: 25px; right: 35px; background: transparent; border: none; color: rgba(255, 255, 255, 0.6); font-size: 40px; cursor: pointer; transition: all 0.3s; } .search-overlay-close:hover { color: #fff; transform: rotate(90deg); } .search-overlay-content { width: 90%; max-width: 750px; text-align: center; color: #fff; } .search-overlay-content h3 { font-family: "Bona Nova", serif; font-size: 2rem; margin-bottom: 25px; font-weight: 400; } .search-input-wrap { position: relative; width: 100%; margin-bottom: 40px; } #mega-search-input { width: 100%; padding: 18px 30px 18px 65px; font-size: 1.25rem; border-radius: 100px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-top: 1px solid rgba(255, 255, 255, 0.3); color: #fff; outline: none; transition: all 0.3s; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } #mega-search-input:focus { background: rgba(255, 255, 255, 0.08); border-color: rgba(229, 168, 89, 0.5); box-shadow: 0 15px 35px rgba(229, 168, 89, 0.15); } .search-input-wrap .search-icon { position: absolute; left: 25px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.4); } .search-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-height: 50vh; overflow-y: auto; padding: 10px; scrollbar-width: none; } .search-results-grid::-webkit-scrollbar { display: none; } .search-result-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 15px; text-align: center; transition: all 0.3s; cursor: pointer; text-decoration: none !important; display: flex; flex-direction: column; align-items: center; } .search-result-card:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(229, 168, 89, 0.3); transform: translateY(-3px); } .search-result-card img { width: 80px; height: 80px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; } .search-result-card h4 { font-size: 0.9rem; color: #fff; margin: 0 0 8px 0; line-height: 1.3; font-weight: 500; } .search-result-card .result-price { font-size: 0.95rem; color: #f6dba6; font-weight: 600; } @media (max-width: 768px) { .search-results-grid { grid-template-columns: 1fr 1fr; } } /* 9. Mobile Carousel Dot Indicators */ .carousel-dots-indicator { display: none; justify-content: center; gap: 8px; margin-top: 15px; margin-bottom: 25px; width: 100%; } @media (max-width: 767px) { .carousel-dots-indicator { display: flex; } } .carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transition: all 0.3s ease; } .carousel-dot.active { background: #E3A455; box-shadow: 0 0 8px #E3A455; transform: scale(1.3); border-radius: 4px; width: 12px; } /* 10. Server-side Hero Section Background overrides */ .hero-bg-svijo { background-image: url('/wp-content/themes/megastrap-shop/img/bg-1.webp') !important; background-size: cover !important; background-position: center right !important; background-repeat: no-repeat !important; } .hero-bg-kavomash { background-image: url('/wp-content/themes/megastrap-shop/img/bg-2.webp') !important; background-size: cover !important; background-position: center right !important; background-repeat: no-repeat !important; } .hero-bg-bizn { background-image: url('/wp-content/themes/megastrap-shop/img/Zameny_pachky_kofe_na_foto_202605071300.webp') !important; background-size: cover !important; background-position: center right !important; background-repeat: no-repeat !important; } /* --- PREMIUM WOOCOMMERCE CATALOG UI (LIQUID GLASS & GOLD) --- */ /* Hide sidebar completely on archive pages */ .m-product-archive .col-lg-4, .m-product-archive .col-xl-3 { display: none !important; } /* Full-width main column on archive pages */ .m-product-archive .col-lg-8, .m-product-archive .col-xl-9 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* Catalog full-width grid on desktop: 4 columns */ .mgcat-products-grid.row-cols-xl-4>li.product, .mgcat-products-grid.row-cols-xl-4>.m-products-item { flex: 0 0 25%; max-width: 25%; } /* FiboFilters form glass style (if used inline) */ .fibofilters-form { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--bs-border-radius-xl, 1rem); padding: 1.5rem; margin-bottom: 1.5rem; color: var(--bs-body-color); } .col-lg-4.col-xl-3 .widget-title, .fibofilters-title { font-family: 'Bona Nova', serif; font-size: 1.25rem; margin-bottom: 1.2rem; background: conic-gradient(from 20deg at 40% -40%, #E3A455 7%, #F6DBA6 24%, #FFEBC3 43%, #F0BE79 59%, #BA7F3B 71%, #EEBC70 83%, #E3A455 100%); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* FiboFilters specific */ .fibofilters-item { border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 0.5rem 0; } .fibofilters-checkbox input:checked+label { color: #E3A455 !important; } /* Checkboxes & Radios in Filters */ .woocommerce-widget-layered-nav-list .wc-layered-nav-term { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s ease; } .woocommerce-widget-layered-nav-list .wc-layered-nav-term:last-child { border-bottom: none; } .woocommerce-widget-layered-nav-list .wc-layered-nav-term a { color: inherit; text-decoration: none; font-weight: 300; } .woocommerce-widget-layered-nav-list .wc-layered-nav-term:hover a { color: #E3A455; } .woocommerce-widget-layered-nav-list .wc-layered-nav-term .count { background: rgba(227, 164, 85, 0.15); color: #E3A455; padding: 0.1rem 0.6rem; border-radius: 20px; font-size: 0.8rem; } /* Price Filter Range */ .woocommerce .widget_price_filter .ui-slider .ui-slider-range { background: linear-gradient(to right, #E3A455, #FFEBC3); box-shadow: 0 0 10px rgba(227, 164, 85, 0.4); } .woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background-color: #fff; border: 2px solid #E3A455; top: -0.25rem; } .woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content { background-color: rgba(255, 255, 255, 0.1); } .woocommerce .widget_price_filter .price_slider_amount .button { background: #E3A455; color: #000; border-radius: 0.5rem; font-weight: 500; } /* Sorting Wrapper and Select */ .m-woo-archive-product-sorting-wrapper { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; flex-wrap: wrap; gap: 1rem; } .woocommerce-ordering select, select.orderby { appearance: none; -webkit-appearance: none; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(227, 164, 85, 0.4); color: #fff; padding: 0.6rem 2.5rem 0.6rem 1.2rem; border-radius: 0.5rem; font-family: 'Outfit', sans-serif; font-size: 0.95rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3A455' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1rem; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .woocommerce-ordering select:hover, select.orderby:hover, .woocommerce-ordering select:focus, select.orderby:focus { border-color: #E3A455; outline: none; box-shadow: 0 0 0 3px rgba(227, 164, 85, 0.25); } .woocommerce-ordering select option, select.orderby option { background-color: #1a1a1a; color: #fff; padding: 0.5rem; } /* Hide legacy pagination completely */ .woocommerce-pagination { display: none !important; } /* Infinite Scroll Loader */ .infinite-scroll-loader { color: #E3A455; transition: opacity 0.3s ease; } .infinite-scroll-loader .spinner-border { border-color: rgba(227, 164, 85, 0.3); border-right-color: #E3A455; } /* --- 2026 UX/UI CATALOG UPGRADES --- */ /* 4. Vibe Tags (Horizontal Scrollable) */ .m-vibe-tags-wrapper { display: flex; overflow-x: auto; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1rem; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ -webkit-overflow-scrolling: touch; } .m-vibe-tags-wrapper::-webkit-scrollbar { display: none; /* Chrome/Safari */ } .vibe-tag { white-space: nowrap; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(227, 164, 85, 0.2); color: var(--bs-body-color); padding: 0.5rem 1.25rem; border-radius: 2rem; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 0.95rem; text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .vibe-tag:hover, .vibe-tag:focus { background: linear-gradient(135deg, #E3A455, #BA7F3B); color: #000; border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(227, 164, 85, 0.3); } /* 3. Bento Grid Large Card */ .bento-large .m-archive-product-item { height: 100%; display: flex; flex-direction: column; } @media (min-width: 768px) { .bento-large .m-archive-product-item { flex-direction: row; align-items: center; justify-content: space-between; } .bento-large .m-archive-product-item>* { flex: 1; } /* Make image slightly larger on desktop bento layout */ .bento-large .woocommerce-loop-product__link { display: flex; align-items: center; width: 100%; } .bento-large img { max-width: 50%; margin-right: 1.5rem; } } /* 1. View Transitions API (CSS Setup) */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.4s; } /* --- PREMIUM LIQUID GLASS TOAST NOTIFICATIONS --- */ .liquid-toast-container { position: fixed; top: 20px; right: 20px; z-index: 99999999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .liquid-toast { --toast-color: rgba(229, 168, 89, 0.9); --toast-border: rgba(229, 168, 89, 0.35); --toast-glow: rgba(229, 168, 89, 0.10); background: rgba(14, 14, 18, 0.92); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--toast-border); border-radius: 14px; color: #fff; padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: 0 0 24px var(--toast-glow), 0 12px 36px rgba(0, 0, 0, 0.45); transform: translateX(120%) scale(0.95); opacity: 0; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease; pointer-events: auto; max-width: 340px; min-width: 260px; } .liquid-toast.active { transform: translateX(0) scale(1); opacity: 1; } .liquid-toast-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--toast-color) 15%, transparent); border: 1px solid color-mix(in srgb, var(--toast-color) 40%, transparent); color: var(--toast-color); } .liquid-toast-msg { font-family: "Outfit", sans-serif; font-weight: 400; font-size: 0.88rem; line-height: 1.45; flex-grow: 1; } .liquid-toast-close { background: none; border: none; color: rgba(255, 255, 255, 0.35); font-size: 18px; cursor: pointer; padding: 0; margin-left: 4px; line-height: 1; flex-shrink: 0; transition: color 0.2s ease; } .liquid-toast-close:hover { color: rgba(255, 255, 255, 0.8); } @media (max-width: 576px) { .liquid-toast-container { top: calc(56px + env(safe-area-inset-top, 0px)); right: 16px; left: 16px; align-items: center; width: auto; } .liquid-toast { max-width: 380px; width: 100%; min-width: unset; margin: 0 auto; border-radius: 16px; padding: 12px 16px; box-sizing: border-box; } } /* ═══════════════════════════════════════════════ PAGE: ПАРТНЕРСТВО ═══════════════════════════════════════════════ */ /* --- Badge / Pill utility (замінює 15-класовий рядок в HTML) --- */ .m-badge-pill { display: inline-block; color: #ffffff; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); font-size: 0.875rem; font-weight: 700; border-radius: 50rem; padding: 0.5rem 0.75rem; line-height: 1; margin: 0; } /* --- Banner: Glow Orbs (GPU-only: transform, без will-change) --- */ @keyframes partner-orb-drift { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(6%, 4%) scale(1.08); } 66% { transform: translate(-4%, 7%) scale(0.95); } 100% { transform: translate(0, 0) scale(1); } } @keyframes partner-orb-drift2 { 0% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-7%, -5%) scale(1.1); } 70% { transform: translate(5%, -3%) scale(0.92); } 100% { transform: translate(0, 0) scale(1); } } @keyframes partner-shimmer { 0% { transform: translateX(-120%) skewX(-15deg); } 100% { transform: translateX(320%) skewX(-15deg); } } .wrap-ed1bba4e-e426-408d-b655-9792f794e39d { position: relative; } .wrap-ed1bba4e-e426-408d-b655-9792f794e39d::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 55% 45% at 78% 80%, rgba(186, 127, 59, 0.28) 0%, transparent 70%); pointer-events: none; } .wrap-ed1bba4e-e426-408d-b655-9792f794e39d::after { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 40% 35% at 15% 20%, rgba(255, 255, 255, 0.07) 0%, transparent 65%); pointer-events: none; } .wrap-28ad9105-3ddd-4059-b254-33a22c8f7b5a { position: relative; overflow: hidden; } .wrap-28ad9105-3ddd-4059-b254-33a22c8f7b5a::before { content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%; z-index: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); animation: partner-shimmer 7s ease-in-out infinite; pointer-events: none; } /* --- Partner cards: min-heights (замість 4 окремих