/* Theme Name: Low Vol Theme URI: https://wearevolume.com/ Author: WAV Author URI: https://wearevolume.com/ Description: This 2021 theme provides a base foundation to hopefully include only the necessary features and files for a functional theme. From there, you can grow and expand to suit your needs, while still maintaining the lean and mean concept... less is more! Version: 1.11 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: lowvol This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none} /* apply a natural box layout model to all elements, but allowing components to change */ html{box-sizing:border-box;}*,*:before,*:after{box-sizing: inherit;} html { font-family: Arial, Helvetica, sans-serif; font-size: 62.5%; } /* additional libraries */ @keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__container{position:relative;box-sizing:border-box}.splide__list{margin:0!important;padding:0!important;width:-webkit-max-content;width:max-content;will-change:transform}.splide.is-active .splide__list{display:flex}.splide__pagination{display:inline-flex;align-items:center;width:95%;flex-wrap:wrap;justify-content:center;margin:0}.splide__pagination li{list-style-type:none;display:inline-block;line-height:1;margin:0}.splide{visibility:hidden}.splide,.splide__slide{position:relative;outline:none}.splide__slide{box-sizing:border-box;list-style-type:none!important;margin:0;flex-shrink:0}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid #999;border-left-color:transparent;animation:splide-loading 1s linear infinite}.splide__track{position:relative;z-index:0;overflow:hidden}.splide--draggable>.splide__track>.splide__list>.splide__slide{-webkit-user-select:none;user-select:none}.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__track>.splide__list>.splide__slide{position:absolute;top:0;left:0;z-index:0;opacity:0}.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{position:relative;z-index:1;opacity:1}.splide--rtl{direction:rtl}.splide--ttb>.splide__track>.splide__list{display:block}.splide--ttb>.splide__pagination{width:auto}.splide__arrow{position:absolute;z-index:1;top:50%;transform:translateY(-50%);width:2em;height:2em;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;padding:0;opacity:.7;background:#ccc}.splide__arrow svg{width:1.2em;height:1.2em}.splide__arrow:hover{cursor:pointer;opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{position:absolute;z-index:1;bottom:.5em;left:50%;transform:translateX(-50%);padding:0}.splide__pagination__page{display:inline-block;width:8px;height:8px;background:#ccc;border-radius:50%;margin:3px;padding:0;transition:transform .2s linear;border:none;opacity:.7}.splide__pagination__page.is-active{transform:scale(1.4);background:#fff}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{width:0;height:3px;background:#ccc}.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent}.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border-color:#000}.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{right:1em;left:auto}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{top:auto;bottom:1em}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination{display:flex;flex-direction:column;bottom:50%;left:auto;right:.5em;transform:translateY(50%)} @font-face { font-family: FuturaCondExtraBold; src: url("/wp-content/themes/lowvol/fonts/Futura%20Condensed%20Extra%20Bold.otf") format("opentype"); } :root { --bg-color-main: #ed1c24; --bg-color-alt: #000; --bg-color-alt-2: #fff; --hdr-ftr-text: #fff; --hdr-ftr-text-alt: #000; --hdr-txt: #da3831; --hdr-txt-alt: #808285; --copy-text: #575757; --lnk-text: #333; } .btn, #nav-container, header .toolbar .container, #main-search, .splide-hero .splide__slide > div, .type-title, .type-img, #hero-header-info, .call-to-action a, #where-to-buy-logos > div, .single-product .product_title.entry-title, .component-content-image > div, .woocommerce-tabs.wc-tabs-wrapper .tabs.wc-tabs, .component-multiple-images > div { align-items: center; } #copyright, .project-essential-item a { align-items: flex-end; } header, .tabs-container, .card-details a, #logo-title, #title-selects, footer .toolbar { background-color: var(--bg-color-main); } .dropdown select { background-color: var(--bg-color-alt); } .toolbar, .sub-menu, .main-nav > li > ul.sub-menu::before, .woocommerce-products-header > div { background-color: var(--bg-color-alt-2); } .pop-pick-card a { background-color: rgba(255, 27, 34, .9); } .woocommerce div.product .woocommerce-tabs ul.tabs li { background-color: transparent; } .woocommerce div.product .woocommerce-tabs .panel, footer { background: url('../image/bg-alt.jpg') no-repeat top center; } .splide-hero .splide__slide > div { background-position: center; } .logo a { background-repeat: no-repeat; } .logo a, .splide-hero .splide__slide > div, .btn:not(.btn-alt), #project-essentials-items a, #hero-header-img, .woocommerce div.product .woocommerce-tabs .panel, footer { background-size: cover; } .search-submit, .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background-color: transparent; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active::before, .woocommerce div.product .woocommerce-tabs ul.tabs li.active::after { box-shadow: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: 0; } .search-field, .search-submit, .woocommerce div.product .woocommerce-tabs ul.tabs li, .woocommerce div.product .woocommerce-tabs ul.tabs li.active::before, .woocommerce div.product .woocommerce-tabs ul.tabs li.active::after, .dropdown select { border: 0 none; } .single-product .woocommerce-product-gallery .flex-viewport, .woocommerce div.product div.images .flex-control-thumbs li { border: 1px solid #cfcfcf; } .sub-menu /* ,.main-nav > li > ul.sub-menu::before */ { border-bottom: 1px solid #ccc; } .main-nav > li > ul.sub-menu { border: 1px solid #ccc; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after { border-bottom: 3px solid #fff; } #project-single-videos { clear: both; } .btn, #main-nav a, .card-details a, #hero-header-info h1, .type-bg, a.btn.btn-alt, a.btn.btn-alt span, .dropdown select, .woocommerce div.product .woocommerce-tabs ul.tabs li a, .woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover, .woocommerce-tabs .panel a, #title-selects h3, #title-video h3, #title-video h3 a, #close-overlay { color: var(--hdr-ftr-text); } #main-nav .sub-menu a, .woocommerce div.product .woocommerce-tabs .panel, #filtered-products .product span, .type-product h2.woocommerce-loop-product__title, footer, footer a { color: var(--hdr-ftr-text-alt); } .panel-contents h2, .woocommerce-tabs .panel .panel-contents a, #results-msg { color: var(--hdr-txt); } .container.component h2, h1.main-hdr { color: #5c5c5c; } #featured-products-items a { color: var(--hdr-txt-alt); } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { color: #767676; } .project-essential-item a, .btn span { color: #000; } .btn.where-to-buy { /*transition: all .2s;*/ } .btn.where-to-buy:hover { /*font-size: 1.5rem;*/ } button, #selected-country { cursor: pointer; } .search-form label, .main-nav > li > ul.sub-menu, .woocommerce div.product .woocommerce-tabs ul.tabs li::after, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs::before, .page-where-to-buy #where-to-buy h2, .woocommerce-loop-category__title mark, a + a.button.product_type_simple, a + a.button.product_type_variable, .woocommerce-variation-add-to-cart-disabled, .woocommerce-variation.single_variation p { display: none; } .logo a, .btn, .product-item img, .product-item a, .project-essential-item a span, .card-poster, #filtered-products .product span, #footer-links li a { display: block; } .main-nav > li > ul.sub-menu > li { margin-right: 60px; } .main-nav > li > ul.sub-menu li:last-child { margin-right: 0px; } .toolbar .container, .btn, #logo-nav, #nav-container, #menu-global-navigation, #main-search, .splide-hero .splide__slide > div, .type-bg, .type-title, .type-img, #hero-header-container, #hero-header-info, .call-to-action, .call-to-action a, #logo-nav-footer, .project-essential-item a, .pop-pick-card, #where-to-buy-logos, #where-to-buy-logos > div, #project-essentials-items, .component-content-image > div, .component-multiple-images, .single-product .product_title.entry-title, .woocommerce-tabs.wc-tabs-wrapper .tabs.wc-tabs, .component-content-image, .component-multiple-images > div, #filtered-products, #all-filters, #resources-container, #footer-links, #copyright { display: flex; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after, .woocommerce-products-header > div { display: inline-block; } .call-to-action, .type-bg, .pop-pick-card { flex-direction: column; } .component-content-image.reverse { flex-direction: row-reverse; } .woocommerce ul.products li.product h2.woocommerce-loop-product__title { font-family: Arial, Helvetica, sans-serif; } .search-field, #copyright span { font-family: "Arial Narrow", Arial, Helvetica, sans-serif; } .component h2, h1.main-hdr, .component:nth-child(even) h2 span:first-child, #hero-header-info h1 span:first-child, .woocommerce .woocommerce-breadcrumb, body.search .woocommerce-breadcrumb, .call-to-action a, .single-product .woocommerce-product-details__short-description, .component-content-image, .woocommerce-tabs.wc-tabs-wrapper .tabs.wc-tabs, .wc-tab .panel-contents p, .wc-tab .panel-contents ol, .wc-tab .panel-contents ul, .wc-tab .panel-contents table, .woocommerce-products-header h1, #title-selects h3 { font-family: futura-pt,sans-serif; font-weight: 300; font-style: normal; } .call-to-action a { font-family: FuturaCondExtraBold,sans-serif; } #main-nav ul.main-nav > li, #hero-header-info h1, .type-title, .component:nth-child(even) h2 span:last-child, #title-selects h3 span, .component h2 span:first-child, h1.main-hdr span:first-child, .single-product .product_title.entry-title, .panel-contents h2 { font-family: futura-pt-bold,sans-serif; font-weight: 700; font-style: normal; } .product-item a { font-size: 1.2rem; } h6, #copyright { font-size: 1.25rem; } .btn, header .toolbar .lnk, .woocommerce-tabs ul.tabs, footer { font-size: 1.4rem; } #results-msg, .dropdown { font-size: 1.5rem; } .search-field, #main-nav ul.main-nav > li, .single-product .woocommerce-product-details__short-description ul, .wc-tab .panel-contents ul, .wc-tab .panel-contents ol, #filtered-products .product span, .woocommerce ul.products li.product h2.woocommerce-loop-product__title { font-size: 1.6rem; } .single-product .woocommerce-product-details__short-description p, .wc-tab .panel-contents p, .wc-tab .panel-contents ol, .wc-tab .panel-contents ul, .wc-tab .panel-contents table, .component-content-image p, .component-content-image ul, .component-content-image ol, .component-general-content p, .component-general-content ul, .component-general-content ol, #search-results, .woocommerce-product-details__short-description + .variations_form.cart { font-size: 1.7rem; } .component-content-image p { font-size: 1.9rem; } .woocommerce .woocommerce-breadcrumb, body.search .woocommerce-breadcrumb { font-size: 1.8rem; } .single-product .product_title.entry-title, .card-details h4 { font-size: 1.92rem; } .component-content-image h3, .component-general-content h3 { font-size: 2.1rem; } .type-title, #title-video h3, footer h5 { font-size: 2.2rem; } .call-to-action a { font-size: 2.52rem; } .panel-contents h2 { font-size: 2.6rem; } #title-selects { font-size: 3.9rem; } h1.main-hdr, .component h2 { font-size: 4.4rem; } #hero-header-info h1 { font-size: 4.5rem; } .woocommerce-products-header h1 { font-size: 5rem; font-weight: 500; } em, em strong { font-style: italic; } .single-product .woocommerce-product-details__short-description p, .single-product .woocommerce-product-details__short-description ul, .wc-tab .panel-contents p { font-weight: 400; widows: 3; } .wc-tab .panel-contents strong { font-weight: 500; widows: 3; } .call-to-action a { font-weight: 800; } .wc-tab .panel-contents ul, .wc-tab .panel-contents ol { font-weight: normal; } .product-item a, #description, #title-video h3, .call-to-action a, .wc-tab .panel-contents li strong, #results-msg, footer h5 { font-weight: bold; } .woocommerce div.product .woocommerce-tabs ul.tabs, #filtered-products, #project-essentials-items, #where-to-buy-logos, .component-multiple-images { flex-wrap: wrap; } .splide-hero .splide__slide > div, .type-title, .type-img, .woocommerce-tabs.wc-tabs-wrapper .tabs.wc-tabs, .project-essential-item a, .component-multiple-images > div, #where-to-buy-logos > div, .no-pagination .feature-cards .splide__list { justify-content: center; } header .toolbar .container, .pop-pick-card, #copyright { justify-content: flex-end; } #logo-nav, #logo-nav-footer, #filtered-products, footer .toolbar .container, .component-content-image, .btn { justify-content: space-between; } .btn, .search-field, .search-submit { height: 44px; } .main-nav > li > ul.sub-menu::before, #hero-header-img { height: 100%; } .single-product .woocommerce-product-details__short-description p, .single-product .woocommerce-product-details__short-description li, .component-content-image p, .component-content-image ul, .component-content-image ol, .component-general-content p, .component-general-content ul, .component-general-content ol .panel-contents table, .panel-contents p, .wc-tab .panel-contents p, .wc-tab .panel-contents ol, .wc-tab .panel-contents ul, .card-details h4 { line-height: 1.5; } .container, .woocommerce .woocommerce-breadcrumb, body.search .woocommerce-breadcrumb, .woocommerce-products-header, .feature-cards .card, .type-bg, #product-info, .product-item img, .project-essential-item a, .tabs.wc-tabs, .panel-contents { margin: 0 auto; } .panel-contents h2 { margin-bottom: 20px; } #nav-container { margin-right: auto; } .btn { min-width: 220px; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { opacity: .9; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { opacity: 1; } .woocommerce div.product .woocommerce-tabs ul.tabs { overflow: initial; } .container, .woocommerce .woocommerce-breadcrumb, body.search .woocommerce-breadcrumb, .woocommerce-products-header, #product-info, .tabs.wc-tabs { padding: 0 15px; } #product-info { padding-right: 24px; padding-left: 24px; } #logo-nav { padding: 24px; } .btn { padding: 0 12px 0 18px; } #logo-nav-footer { padding: 44px 24px 10px; } #hero-slider.container { padding: 0; } header { position: -webkit-sticky; position: sticky; } .search-form, .sub-menu .sub-menu, #hero-header-container, #where-to-buy-logos, .woocommerce div.product .woocommerce-tabs ul.tabs li.active aside, #title-selects, #main-nav ul.main-nav > li { position: relative; } .search-submit, .sub-menu, .main-nav > li > ul.sub-menu::before, .woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after, #hero-header-img, #where-to-buy-logos::before, #where-to-buy-logos::after { position: absolute; } .search-submit { right: 0; } .component h2, h1.main-hdr, .product-item a, .project-essential-item a span, .woocommerce-tabs.wc-tabs-wrapper .tabs.wc-tabs, #results-msg, #filtered-products .product span { text-align: center; } .btn, header .toolbar .lnk, ul.main-nav > li a, .product-item a, .type-bg, .project-essential-item a, #title-video h3 a, #filtered-products .product a, footer a { text-decoration: none; } #title-video h3:hover a { text-decoration: underline; } .logo a { text-indent: -9999rem; } header { top: -60px; } .search-submit { top: 1px; } .product-item img, #filtered-products .product img, #social-bar img, .woocommerce ul.products li.product a img { transition: all 120ms ease-in-out; } .product-item a:hover img, #filtered-products .product:hover img, #social-bar a:hover img, .woocommerce ul.products li.product:hover a img { transform: scale(1.08); } .container, #hero-header.container, .woocommerce .woocommerce-breadcrumb, body.search .woocommerce-breadcrumb, .woocommerce-products-header, #product-info, .tabs.wc-tabs, .panel-contents { max-width: 1354px; } .container.component { max-width: 1108px; } .slick-next:before, .slick-prev:before, .wpgs-for .slick-arrow { color: #000 !important; } #hero-slider.container { max-width: none; } #country-select { position: relative; } #country-selections { position: absolute; } #main-nav ul.main-nav > li, .single-product .product_title.entry-title, #hero-header-info h1, .container.component h2 span, h1.main-hdr span, .type-bg, .woocommerce-products-header h1, .woocommerce-tabs ul.tabs, .panel-contents h2, .product-item a, #title-selects h3, header .toolbar .lnk, footer h5 { text-transform: uppercase; } .sub-menu, .main-nav > li > ul.sub-menu::before, .card-details a, .project-essential-item a span, #menu-mob.open + #main-nav { width: 100%; } .main-nav > li:hover > ul.sub-menu, .woocommerce div.product div.images img { width: auto; } .main-nav > li > ul.sub-menu::before { z-index: -1; } header { z-index: 3; } .main-nav > li > ul.sub-menu { z-index: 10; } /* search */ .search-field { padding: 0 44px 0 16px; min-width: 260px; } .search-submit { padding: 0 12px; } /* header */ header .toolbar .container { padding: 8px 24px; } header .toolbar .lnk { color: #a1a1a1; } header .toolbar .divider { display: inline-block; font-size: 2rem; margin: -5px 15px 0; } #country-select { min-width: 37px; } #country-selections { padding-top: 9px; transform: translateX(-39%); z-index: 1; } #country-select ul { background-color: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.9); display: none; font-size: 1.5rem; min-width: 180px; } #country-select ul a { align-items: center; color: #5c5c5c; display: flex; padding: 9px 12px; text-decoration: none; } #country-select ul a img { margin-right: 9px; } #country-select ul a:hover { background-color: #5c5c5c; color: #fff; } #country-select.expanded ul { display: block; } header .toolbar .btn { margin-left: 30px; } header .logo a { background-image: url('../image/eclectic-products-logo.png'); width: 240px; height: 69px; } /* nav */ header .logo { margin-right: 50px; } .main-nav > li > a { padding: 0 24px 45px; } #main-nav .main-nav > li:hover > a, .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { /* font-size: 1.7rem; */ text-shadow: 1px 1px 1px #8b8b8b; } .main-nav > li > ul.sub-menu::before { margin-top: 0; } .main-nav > li > ul.sub-menu::before { content: ""; top: 0; left: -50vw; } .sub-menu { margin-top: 48px; /*padding: 15px 0;*/ padding-top: 50px; padding-bottom: 50px; } .sub-menu .sub-menu { margin-top: 0; min-width: 130px; padding: 15px 0; text-transform: capitalize; } /* main */ main { min-height: 300px; } /* hero slider */ .splide-hero .splide__slide > div { min-height: 368px; } .call-to-action a, .call-to-action .chevron { background-repeat: no-repeat; background-size: contain; } .call-to-action a { background-repeat: no-repeat; background-size: contain; text-decoration: none; color: #000; width: 358px; height: 67px; } .call-to-action .chevron { transition: all 333ms ease-in-out; display: block; width: 27px; height: 27px; } #button-build-repair { background-image: url('../image/home-slide-build-repair.png'); background-position: bottom left; padding-top: 3px; padding-left: 30px; } #button-build-repair .chevron { background-image: url('../image/button-chevron-left.png'); } #button-build-repair:hover .chevron { transform: translateX(-3px); } #button-build-repair .word + .word { color: #c02127; } #button-design-create { background-image: url('../image/home-slide-design-create.png'); background-position: top right; justify-content: flex-end; padding: 0 18px 6px 0; } #button-design-create .chevron { background-image: url('../image/button-chevron-right.png'); margin-left: 12px; } #button-design-create:hover .chevron { transform: translateX(3px); } #button-design-create .word:first-child { color: #fff; } /* hero header */ #hero-header { margin-top: 26px; } #hero-header-container { background: linear-gradient(0deg, rgba(173,173,173,1) 0%, rgba(255,255,255,1) 100%); height: 448px; } #hero-header-info { background: linear-gradient(to right, rgb(237, 27, 36) 0%, rgb(213, 24, 31) 100%); clip-path: polygon(0 0, 100% 0, 50% 100%, 0% 100%); width: 42%; } #hero-header-info h1 { border-bottom: 2px solid #fff; margin-left: 50px; position: relative; } #hero-header-info::after{ background-color: rgba(132,32,31,.9); content: ""; clip-path: polygon(46% 0, 52% 0, 5% 100%, 0 100%); position: absolute; left: 20.4%; width: 46%; height: 100%; } #hero-header-info a { margin: 40px 0 0 50px; min-width: 200px; width: 200px; } #hero-header-img { clip-path: polygon(27% 0, 100% 0, 100% 100%, 0% 100%); top: 0; right: 0; width: 78%; } /* misc */ .sub-menu, .main-nav > li > ul.sub-menu::before { /*height: 270px;*/ } .main-nav > li > ul.sub-menu { /* height: 269px; */ height: auto; } .main-nav > li > ul.sub-menu ul.sub-menu li a { font-family: futura-pt,sans-serif; font-weight: 400; } .btn { background-image: url('../image/button-bg-2.png'); } .btn.btn-alt { background-image: none; } .btn.btn-alt span { text-shadow: none; } .btn img { width: 26px; height: 26px; } #title-selects:before, #hero-header-info h1:before { content: ""; display: block; margin: 12px 0 0 -50px; left: 0; position: absolute; width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 18px solid #fff; } #title-selects::before { margin: 9px 0 0 0; } .component-general-content ul, .component-content-image ul { list-style-type: disc; margin-left: 2.1rem; } /* search results */ ::-webkit-search-cancel-button { display: none; } #search-results > div.woocommerce-notices-wrapper { /* border-bottom: 1px solid #ccc; padding: 18px; */ overflow: hidden; } #search-results > div img { /* margin: 0 18px; max-width: 100px;*/ height: auto; } /* components */ .component { padding-bottom: 15px; } #project-single-videos { margin-top: 30px; margin-bottom: 90px; } #hero-slider.component { padding-bottom: 30px; } .component h2, h1.main-hdr { margin-top: 30px; margin-bottom: 30px; position: relative; } .component h2:before, .component h2:after, h1.main-hdr:before, h1.main-hdr:after { content: ""; width: 150px; height: 15px; /*background: rgba(136,136,136,.5);*/ background: #5c5c5c; position: absolute; } .component h2:before, h1.main-hdr:before { transform: translate(-120%,140%) skew(-30deg); } .component h2:after, h1.main-hdr:after { transform: translate(20%,140%) skew(-30deg); } .component li.product h2:before, .component li.product h2:after { display: none; } .feature-cards .card { width: 230px; } .card .card-poster { background-repeat: no-repeat; background-size: cover; width: 230px; height: 129px; } .card .card-details, .card .card-details a { margin-top: 10px; } .product-item, .product.type-product { padding: 9px 0; } .product-item img { margin-bottom: 10px; } #project-essentials-items .pe-item { background-size: cover; width: 33.3333%; } #project-essentials-items .card-poster { height: 300px; } .type-bg { background: url('../image/background-type.jpg') no-repeat; background-size: cover; width: 230px; height: 240px; } .type-title { height: 60px; } .type-title h4 { text-shadow: 0 0 6px rgba(0,0,0,.6); } .type-img { height: 175px; } .type-img img { max-width: 150px; max-height: 150px; } .pop-pick-card { overflow: hidden; position: relative; } .pop-pick-bg { background-size: cover; overflow: hidden; position: absolute; width: 100%; height: 100%; } .pop-pick-bg + a.btn.btn-alt { position: absolute; width: 100%; z-index: 1; } .pop-pick-card .pop-pick-bg, .pop-pick-card a { transition: all .3s; } .pop-pick-card:hover .pop-pick-bg { transform: scale(1.11); } .pop-pick-card:hover a { background-color: rgba(255, 27, 34,1); } #title-selects { background-position: right center; background-repeat: no-repeat; background-size: contain; margin-bottom: 55px; padding: 45px; } #all-filters { margin-top: 24px; } #filter-sort-search { margin-top: 30px; } .dropdown select { border-right: 6px solid #000; margin-right: 30px; padding: 15px; } .dropdown:last-child { margin-right: 0; } #filtered-products { margin-right: -15px; margin-left: -15px; } #filtered-products::after { content: ""; flex: auto; } #filtered-products .product { margin: 0 15px 30px; padding: 15px; width: calc(25% - 30px); } #filtered-products .product span { margin-top: 15px; } body.home #where-to-buy { margin-top: 60px; } #check-for-avails { font-size: 1.5rem; margin-bottom: 1.5rem; text-align: center; } #where-to-buy-logos { margin-bottom: 25px; } #hero-header + #where-to-buy #where-to-buy-logos { margin-bottom: 25px; padding: 50px 0; padding-bottom: 0; } #where-to-buy-logos::before, #where-to-buy-logos::after { content: " "; display: block; } #where-to-buy-logos::before { border-bottom: 1px solid #fff; bottom: 0; left: 0; width: 100%; } #where-to-buy-logos::after { top: 0; right: 0; border-right: 2px solid #fff; height: 100%; } #where-to-buy-logos > div { border-right: 1px solid #dedede; border-bottom: 1px solid #dedede; padding: 30px 20px; width: min(20%,273px); } #where-to-buy-logos > div img { display: block; margin: 0 auto; width: auto; max-width: 175px; max-height: 60px; } .component-multiple-images > div { width: 25%; } .component-multiple-images img { max-width: 180px; } /* woocommerce overrides */ .woocommerce .woocommerce-breadcrumb, body.search .woocommerce-breadcrumb { margin: 30px auto; padding-right: 24px; padding-left: 24px; } .woocommerce ul.products li.product a img { margin: 12px; width: 90%; } .woocommerce ul.products li.product h2.woocommerce-loop-product__title { padding-right: 15px; padding-left: 15px; } .single-product h1.product_title.entry-title { background: linear-gradient(to top, rgb(237, 28, 36) 0%, rgb(181, 21, 28) 93%, rgb(178, 21, 27) 100%); color: var(--hdr-ftr-text); margin-bottom: 40px; min-height: 50px; padding: 0 15px; } .single-product .woocommerce-product-gallery { max-width: 630px; } .single-product .woocommerce-product-gallery .flex-viewport { margin-bottom: 20px; } .single-product .woocommerce-product-gallery .flex-viewport { min-height: 552px; } .single-product .woocommerce-product-gallery img { margin: 20px auto; width: auto; max-height: 510px; } .single-product .woocommerce-product-details__short-description p, .wc-tab .panel-contents p { color: var(--copy-text); margin-bottom: 15px; } .single-product .woocommerce-product-details__short-description ul { margin-top: 30px; margin-left: 15px; margin-bottom: 20px; } .wc-tab .panel-contents ul, .wc-tab .panel-contents ol { margin: 15px; } .single-product .woocommerce-product-details__short-description ul li, .wc-tab .panel-contents ul li, .wc-tab .panel-contents ol li { margin-bottom: 3px; padding-left: 12px; position: relative; } .single-product .woocommerce-product-details__short-description ul li:before, .wc-tab .panel-contents ul li:before { content: ""; display: block; margin: 4px 0 0 -20px; position: absolute; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #da3831; } .wc-tab ol li { counter-increment: count-me; } .wc-tab ol li::before { content: counter(count-me) ". "; color: #da3831; display: inline-block; margin-left: -3ch; padding-right: 1.5ch; } .wc-tab .panel-contents ol { margin-left: 20px; } .wc-tab table { margin: 15px 0 15px 0; } .wc-tab table td { padding: 6px; } .woocommerce-product-details__short-description + .variations_form.cart { margin-top: 30px; } .woocommerce-product-details__short-description + .variations_form.cart select { margin-bottom: 15px; padding: 6px; } .woocommerce-product-details__short-description + .variations_form.cart .reset_variations { color: #767676; } .woocommerce div.product div.images .flex-control-thumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-right: -1.092rem; margin-left: -1.092rem; /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 1.1em; */ } .woocommerce div.product div.images .flex-control-thumbs::after { content: ''; flex: auto; } .woocommerce div.product div.images .flex-control-thumbs li { /* width: 80px; height: 80px; */ width: 5.01rem; height: auto; margin-left: 1.092rem; margin-right: 1.092rem; margin-bottom: 12px; } .woocommerce div.product .woocommerce-tabs ul.tabs { margin: 0 auto; justify-content: flex-start; } .woocommerce div.product .woocommerce-tabs ul.tabs li { /* margin: 0 9px; padding: 0 12px;*/ margin: 0; padding: 0; padding-right: 24px; margin-right: 9px; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after { bottom: -3px; left: 0; content: ""; width: 100%; } .woocommerce div.product .woocommerce-tabs .panel { padding: 40px 15px; } .woocommerce-Tabs-panel { min-height: calc(87vh - 33px); } /* product category */ .woocommerce-products-header { background: linear-gradient(to right, rgb(246, 47, 52) 0%, rgb(198, 23, 30) 100%); margin-bottom: 60px; padding: 30px; } .woocommerce-products-header > div { padding: 12px 27px; position: relative; } .woocommerce-products-header > div::before { border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 15px solid rgb(246, 47, 52); content: " "; top: 50%; left: 0; position: absolute; transform: translateY(-50%); } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .search-results ul.products li.product, #filtered-products .product { border: 1px solid #d7d7d7; min-height: 292px; } .woocommerce nav.woocommerce-pagination ul, .woocommerce nav.woocommerce-pagination ul li { border: none; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { font-size: 1.5rem; } .woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current { background: none; font-weight: bold; color: #000; } /* splide */ .splide__pagination { bottom: -3.7rem; } .splide__arrow { background-color: transparent; width: 4.5rem; height: 4.5rem; } .component:not(#hero-slider) .splide__arrow--prev { left: -4rem; } .component:not(#hero-slider) .splide__arrow--next { right: -4rem; } .splide__arrow svg { width: 3rem; height: 3rem; } .splide__pagination__page.is-active { background-color: #708090; } /* standalone */ .page-template-resources main h1.main-hdr, .page-template-standalone main h1.main-hdr { padding-top: 30px; } .page-template-resources main, .page-template-standalone main { padding-bottom: 45px; } #single-hero { background-position: center center; background-size: cover; margin-bottom: 75px; width: 100vw; height: 210px; } .component-content-image > div { width: 45%; } .component-content-image > div + div { width: calc(55% - 45px); } .component-content-image img, .component-image-only img { width: 100%; height: auto; } .component-content-image p, .component-content-image ul, .component-content-image ol, .component-general-content p, .component-general-content ul, .component-general-content ol { margin-bottom: 1.8rem; } .component-content-image p a, .component-content-image ul a, .component-content-image ol a, .component-general-content ul a, .component-general-content ol a { color: var(--lnk-text); } .component-content-image p:last-child, .component-general-content p:last-child { margin-bottom: 0; } /* resources */ #resources-container { min-height: 600px; padding-top: 45px; padding-right: 24px; padding-left: 24px; } #resources-filter { position: fixed; transition: all 180ms ease-in-out; } #resources-container h3 { font-size: 2.2rem; margin-bottom: 1.5rem; /*text-align: center;*/ font-weight: bold; text-transform: uppercase; } #resources-filter > div { margin-bottom: 1.5rem; max-width: 300px } #resources-filter > div select { max-width: 270px; width: 100%; } #resources-filter label, #resources-filter select { display: block; } #resources-filter label, #resources-filter select, #resources-results td { font-size: 2.1rem; padding: .6rem 0; } #resources-results { margin-left: auto; width: calc(100% - 330px); } #resources-results .please-select { font-size: 1.6rem; } #resources-results.option-selected .please-select { display: none; } #resources-results table { width: 100%; display: none; } #resources-results.option-selected table { display: block; } #resources-results td { border: 1px solid #ccc; padding: .9rem; } /* footer */ footer .toolbar .container { padding: 24px; } #logo-about { margin-right: min(2.1vw,40px); } footer .logo { margin-bottom: 50px; } footer .logo a { background-image: url('../image/eclectic-products-logo-alt.png'); width: 220px; height: 63px; } footer p { line-height: 1.5; margin-bottom: 2rem; } #description p:last-child { margin-bottom: 0; } #footer-links { width: 100%; max-width: 1000px; } #footer-links > div { padding-right: 20px; width: min(25%,250px); } #footer-links h5 { margin-bottom: 10px; } #footer-links li { padding: 2px 0; } #footer-links li a { padding: 3px 0; } #copyright { padding-bottom: 53px; } #copyright span { display: inline-block; margin-bottom: -2px; } #copyright img { margin-left: 28px; } /* overlay */ #overlay-bg { background-color: rgba(112,128,144,.9); backdrop-filter: blur(3px); display: grid; place-items: center; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 3; } .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 */ width: 60vw; height: 0; } .video-container #title-video, .video-container iframe { width: 100%; height: 100%; } .video-container #title-video { position: absolute; top: 0; left: 0; } .video-container #title-video h3 { margin-bottom: .9rem; } #close-overlay { cursor: pointer; font-size: 6rem; position: absolute; top: -4.5rem; right: -4.5rem; } #social-bar { position: fixed; transform: translateY(-50%); top: 50%; right: 12px; z-index: 2; } #social-bar li { margin-bottom: 12px; } #social-bar li:last-child { margin-bottom: 0; } #social-bar a { align-items: center; background-color: rgba(0,0,0,.87); border: 1px solid rgba(255,255,255,.3); display: flex; justify-content: center; width: 40px; height: 40px; } #social-bar img { height: 21px; } .page-contact-us h1.main-hdr, .page-careers h1.main-hdr { margin-top: 50px; } /* product page */ .woocommerce div.product .woocommerce-tabs ul.tabs li.description_tab, .woocommerce div.product .woocommerce-tabs ul.tabs li.additional_information_tab, .woocommerce div.product .woocommerce-tabs ul.tabs li.product-specs_tab, .woocommerce div.product .woocommerce-tabs ul.tabs li.product-images_tab { display: none; } .wc-tab .panel-contents { margin-right: auto; margin-left: auto; max-width: 1354px; } .wc-tab .panel-contents p, .wc-tab .panel-contents table, .wc-tab .panel-contents ul, .wc-tab .panel-contents ol { max-width: 750px; } #safety-data-sheets { font-size: 1.6rem; line-height: 2.4; margin-top: 20px; display: none; } #safety-data-sheets strong { font-weight: bold; } #safety-data-sheets ul { list-style: disc; margin-left: 20px; } #resources-results.sds-selected #safety-data-sheets { display: block; } #resources-results.sds-selected .results, #resources-results.sds-selected .please-select { display: none; } #not-avail { color: #751410; font-size: 1.71rem; font-weight: bold; line-height: 1.5; max-width: 804px; margin: 0 auto; padding-right: 3px; padding-left: 3px; text-align: center; text-transform: uppercase; } #not-avail a { color: rgba(0, 0, 0, .84) } @media (max-width:579px){ #not-avail { font-size: 1.5rem; } } li.unavail:after { content: " "; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* search results */ .search-result-container { display: flex; } /* responsive */ @media (max-width:1180px){ #popular-picks { max-width: 994px; } body .splide__slide:first-child .pop-pick-card { width: 476px; height: 488px; } body .splide__slide .pop-pick-card { width: 244px; height: 244px; } #project-essentials-items .card-poster { height: calc(100% - 44px); padding-bottom: 80%; } } @media (max-width:1080px){ #hero-header-container { height: 336px; } #hero-header-info { clip-path: polygon(0 0, 100% 0, 60.5% 100%, 0% 100%); width: 54.5%; } #hero-header-info::after { clip-path: polygon(47% 0, 52% 0, 5% 100%, 0 100%); left: 32.4%; } #hero-header-img { clip-path: polygon(32% 0, 100% 0, 100% 100%, 0% 100%); width: 66%; } .container.component { max-width: calc(100vw - 48px); } .woocommerce div.product .woocommerce-tabs ul.tabs li { /* margin-bottom: 20px; */ } .component-content-image > div + div { width: calc(55% - 30px); } .feature-cards .card { width: 222px; } .card .card-poster { background-repeat: no-repeat; background-size: cover; width: 222px; height: 125px; } .type-bg { width: 222px; height: 231px; } } @media (min-width:1024px){ .splide__list { width: 100%; } .splide__slide { visibility: visible; } .splide__slide { float: left; } .splide__slide .pop-pick-card { width: 270px; height: 270px; } .splide__slide:first-child .pop-pick-card { width: 538px; height: 540px; } } @media (max-width:1023px){ header .logo { margin-right: 25px; } header .logo a { display: inline-block; width: 180px; max-height: 52px; } header .search-field { min-width: 180px; } #logo-nav-footer { flex-direction: column-reverse; } .splide-hero .splide__slide > div { min-height: 240px; } .component h2, h1.main-hdr { font-size: 3.6rem; margin-top: 24px; margin-bottom: 24px; } .component h2:before, .component h2:after, h1.main-hdr:before, h1.main-hdr:after { width: 120px; height: 12px; } .component:not(#hero-slider) .splide__arrow--prev { left: -3.5rem; } .component:not(#hero-slider) .splide__arrow--next { right: -3.5rem; } #hero-header-container { flex-direction: column-reverse; height: 420px; } #hero-header-info h1 { font-size: 3.3rem; margin-left: 36px; } #title-selects:before, #hero-header-info h1:before { margin-top: 6px; margin-left: -36px; } #hero-header-info, #hero-header-img { clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); position: relative; width: 100%; } #hero-header-info::after { display: none; } #hero-header-info > div { align-items: center; display: flex; justify-content: space-between; height: auto; padding: 30px 30px 30px 0; width: 100%; } #hero-header-info > div .btn { margin: 0 0 0 auto; } #hero-header-info a { min-width: 177px; width: 177px; } .product-item img { height: 96px; } .feature-cards .card { width: 220px; } .card .card-poster { width: 220px; height: 108px; } body #popular-picks-cards .splide__slide:first-child .pop-pick-card, body #popular-picks-cards .splide__slide .pop-pick-card { margin: 0 auto; width: 480px; height: 480px; } #popular-picks:not(#hero-slider) .feature-cards .splide__arrow--prev { left: 2rem; } #popular-picks:not(#hero-slider) .feature-cards .splide__arrow--next { right: 2rem; } .woocommerce-products-header { margin-bottom: 40px; padding: 24px; } .woocommerce-products-header > div { padding: 9px 21px; } .woocommerce-products-header h1 { font-size: 3.5rem; } #filter-sort-search #title-selects { padding: 24px; } #filter-sort-search #title-selects h3 { font-size: 3.3rem; } #filter-sort-search #title-selects .dropdown select { margin-right: 15px; padding: 12px; } #where-to-buy-logos > div { padding: 15px; width: 33.3333%; } #where-to-buy-logos > div img { max-width: 140px; max-height: 38px; } /* resources tablet portrait and lower */ #resources-filter label, #resources-filter select, #resources-results td { font-size: 1.8rem; } #resources-container { flex-direction: column; } #resources-filter { display: flex; flex-wrap: wrap; justify-content: flex-start; position: relative; } #resources-filter h3 { width: 100%; } #resources-filter > div { margin-right: 3vw; } #resources-filter > div select { max-width: 27vw; } #resources-results { margin-top: 30px; margin-left: 0; width: 100%; } /* about */ .component-multiple-images > div { width: 33.3333%; } .component-multiple-images img { max-width: 150px; } #filtered-products .product { width: calc(33.3333% - 30px); } /* footer */ footer .toolbar .btn, footer .toolbar form { width: 48%; } footer .search-field { width: 100%; } #footer-links { flex-wrap: wrap; margin-bottom: 15px; } #footer-links > div { margin-bottom: 30px; padding-right: 0; width: 50%; } } @media (max-width:768px){ .woocommerce .woocommerce-breadcrumb, body.search .woocommerce-breadcrumb { font-size: 1.5rem; } #product-info { margin-right: 24px; margin-left: 24px;; } #product-info .woocommerce-product-gallery { margin-right: auto; margin-left: auto; } .single-product h1.product_title.entry-title { font-size: 1.62rem; margin-bottom: 24px; min-height: 40px; } .woocommerce div.product .woocommerce-tabs ul.tabs li { margin-right: 6px; padding-right: 18px; } } @media (min-width:768px){ .main-nav > li:hover > a { border-bottom: 3px solid #000; } .main-nav > li:hover > ul.sub-menu { display: flex; left: -42px; justify-content: center; padding-right: 42px; padding-left: 42px; } #menu-mob, #main-nav #menu-item-1676, #main-nav #menu-item-1677, .list-button { display: none; } } @media (max-width: 767px){ .component { padding-bottom: 24px; } header .toolbar .btn { margin-left: auto; } #logo-nav { padding: 0; position: relative; } #logo-title { padding: 24px; width: 100%; } #hero-header { margin-top: 0; } #nav-container { margin-left: auto; margin-right: 0; } #menu-mob { display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0; position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; } #menu-mob span { background-color: #fff; display: block; height: 4px; transition: all 333ms ease-in-out; } .open #menu-mob { display: block; } .open #menu-mob span { background-color: #000; position: absolute; width: 100%; } .open #menu-mob span:first-child { top: 0; left: 0; margin-top: 15px; transform: rotate(135deg); } .open #menu-mob span:last-child { bottom: 0; right: 0; margin-bottom: 21px; transform: rotate(-135deg); } .open #menu-mob span:first-child + span { opacity: 0; transform: rotate(-180deg); z-index: -1; } #menu-global-navigation { flex-direction: column } #menu-global-navigation > li a { display: block; padding-top: 9px; padding-bottom: 9px; } #menu-global-navigation > li > a, #menu-global-navigation > li > a + span.list-button, #main-nav .sub-menu > li > a, #main-nav .sub-menu > li > a + span.list-button { display: inline-block; margin-left: 0; } #main-nav li > a + span.list-button { color: #fff; cursor: pointer; font-size: 2.1rem; padding: 6px 24px; } li > span.list-button.list-open + ul.sub-menu { background-color: transparent; border-bottom: 0 none; display: block; margin: 0 0 15px 0; padding: 0 30px; position: relative; } li > span.list-button.list-open + ul.sub-menu ul.sub-menu { margin-left: 6px; padding-left: 6px; } .menu-item-has-children .menu-item-has-children a { padding-right: 24px; } .sub-menu, li > ul.sub-menu::before { display: none; } #main-nav .sub-menu a { color: #fff; } #main-search { display: none; } #main-nav { background-color: var(--bg-color-main); display: block; transition: all 333ms ease-in-out; overflow: hidden; padding-bottom: 15px; position: absolute; top: 100px; transform: translateY(-100%); left: 0; width: 100%; z-index: -1; } .open + #nav-container #main-nav { transform: translateY(0); } .call-to-action a { font-size: 1.8rem; width: 270px; height: 52px; } .call-to-action .chevron { width: 18px; height: 18px; } #button-build-repair { padding-left: 24px; } #button-design-create { padding-right: 12px; } #button-design-create .chevron { margin-left: 9px; } body.home #where-to-buy { margin-top: 25px; } body .woocommerce-products-header { padding-left: 24px; } #filter-sort-search #title-selects h3 { font-size: 2.7rem; } #resources-filter > div { margin-right: 0; } #resources-filter > div select { max-width: none; width: 100%; } body #popular-picks-cards .splide__slide:first-child .pop-pick-card, body #popular-picks-cards .splide__slide .pop-pick-card, .feature-cards .card, .card .card-poster { width: 72vw; height: 72vw; } .feature-cards .card, .card .card-poster { height: 57vw; } .card .card-poster { height: 42vw; } #popular-picks:not(#hero-slider) .feature-cards .splide__arrow--prev { left: 1rem; } #popular-picks:not(#hero-slider) .feature-cards .splide__arrow--next { right: 1rem; } .component:not(#hero-slider) .splide__arrow--prev { left: -1.5rem; } .component:not(#hero-slider) .splide__arrow--next { right: -1.5rem; } .product-item img { height: 300px; } .component-content-image, .component-content-image.reverse { flex-direction: column-reverse; } .component-content-image > div { width: 100%; } .component-content-image > div + div { width: 100%; margin-bottom: 30px; } .component h2, h1.main-hdr { font-size: 2.4rem; margin-top: 16px; margin-bottom: 16px; } .component h2:before, .component h2:after, h1.main-hdr:before, h1.main-hdr:after { width: 80px; height: 9px; } .component h2:before, h1.main-hdr:before { transform: translate(-120%,150%) skew(-30deg); } .component h2:after, h1.main-hdr:after { transform: translate(20%,150%) skew(-30deg); } #featured-projects-cards .splide__pagination { display: none; } .container, body.search .woocommerce-breadcrumb, .woocommerce-products-header, #product-info, .tabs.wc-tabs { padding-right: 0; padding-left: 0; } .woocommerce .woocommerce-breadcrumb { padding-right: 24px; padding-left: 24px; } #where-to-buy-logos > div { padding: 12px; } #social-bar { transform: none; top: auto; right: 6px; bottom: 30px; } #social-bar a { width: 30px; height: 30px; } #social-bar img { width: 18px; height: 18px; } /* about */ .component-multiple-images > div { width: 50%; } .component-multiple-images img { max-width: 126px; } /* products */ #filter-sort-search #title-selects { background-size: cover; } #filtered-products .product { width: calc(50% - 30px); } /* project essentionals */ #project-essentials-items .pe-item { width: 50%; } #project-essentials-items .card-details a.btn { height: 36px; font-size: 1.2rem; padding: 0 6px 0 9px; } #project-essentials-items .card-details a.btn img { width: 15px; height: 15px; } } @media (max-width: 567px){ #hero-header-info > div { align-items: flex-start; flex-direction: column; } #hero-header-info > div .btn { margin-top: 30px; } .home #hero-slider .splide-hero .splide__slide > div { background-position: center left; } .component h2, h1.main-hdr { font-size: 2.2rem; margin-top: 12px; margin-bottom: 12px; } .component h2:before, .component h2:after, h1.main-hdr:before, h1.main-hdr:after { width: 42px; height: 6px; } .component h2:before, h1.main-hdr:before { transform: translate(-120%,210%) skew(-30deg); } .component h2:after, h1.main-hdr:after { transform: translate(20%,210%) skew(-30deg); } #where-to-buy-logos > div { padding: 15px; width: 50%; } #where-to-buy-logos > div img { max-width: 105px; max-height: 30px; } footer .toolbar .container { flex-direction: column; } footer .toolbar .btn, footer .toolbar form { width: 100%; } .btn { min-width: 144px; padding: 0 9px 0 15px; } .search-field { width: 100%; padding: 0 40px 0 12px; } footer .search-form { margin-top: 30px; } .btn, .search-field, .search-submit { height: 40px; } .search-submit { padding: 0 9px; } #filtered-products .product { padding-right: 12px; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .search-results ul.products li.product, #filtered-products .product { min-height: 180px; } .woocommerce ul.products li.product a img { margin: 9px; } #title-selects h3 span { display: block; } #all-filters { flex-direction: column; } #all-filters .dropdown:first-child { margin-bottom: 24px; } #footer-links > div { margin-bottom: 30px; width: 100%; } #copyright { margin-right: 24px; } } @supports (-webkit-touch-callout: none) { input, select { -webkit-appearance: none; -webkit-border-radius: 0; } .dropdown select, #filter-sort-search #title-selects .dropdown select { padding-right: 36px; } .dropdown select, #filter-sort-search #title-selects .dropdown select { background-image: url('../image/sort-down.png'); background-position: center right 6px; background-repeat: no-repeat; background-size: 6%; } } /* fix cart layouts */ @media (min-width:769px){ body.woocommerce ul.products li.first, body.woocommerce-page ul.products li.first { clear: none; } body.woocommerce ul.products li.last, body.woocommerce-page ul.products li.last { margin: 0 3.8% 2.992em 0; } body.woocommerce ul.products li.last-item, body.woocommerce-page ul.products li.last-item{ margin-right: 0; } } @media (max-width:768px){ body.woocommerce ul.products[class*=columns-] li.product, body.woocommerce-page ul.products[class*=columns-] li.product, body.woocommerce ul.products[class*=columns-] li.product:nth-child(2n), body.woocommerce-page ul.products[class*=columns-] li.product:nth-child(2n) { float: none; } body.woocommerce .products ul, body.woocommerce ul.products { display: flex; flex-wrap: wrap; justify-content: space-between; } /* body.woocommerce ul.products[class*=columns-] li.product.odd-item, body.woocommerce-page ul.products[class*=columns-] li.product.odd-item { float: left; } body.woocommerce ul.products[class*=columns-] li.product.even-item, body.woocommerce-page ul.products[class*=columns-] li.product.even-item { float: right; } */ } .woocommerce.woocommerce-shop ul.products li.product .woocommerce-loop-category__title { display: none; } .woocommerce.woocommerce-shop ul.products { display: flex; flex-wrap: wrap; justify-content: center; } .woocommerce.woocommerce-shop ul.products li.product { margin: 0 1.9% 2.992em 1.9%; min-height: auto; } @media only screen and (max-width: 768px) { .woocommerce.woocommerce-shop ul.products[class*=columns-] li.product { width: 48%; float: left; clear: both; margin: 0 0.9% 2.992em; } } .button-360, .calculator-button { /* position: absolute; bottom: -70px;*/ cursor: pointer; display: flex; align-items: center; background-color: rgb(219, 0, 0); border-radius: 8px; color: #fff; width: 160px; font-size: 20px; padding: 10px 20px; justify-content: space-between; } .calculator-button { width:242px; } .button-360 img { width: 60px; cursor: pointer; } .calculator-button img { width: 35px; cursor: pointer; } /* The Modal (background) */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ z-index: 25; align-items: center; justify-content: center; } .modal.open { display: flex; } /* Modal Content */ .modal-content { background-color: #fff; max-width: 500px; width: 100%; margin: 15% auto; /* Center the modal vertically and horizontally */ padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); position: relative; } /* Close Button */ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; position: absolute; top: 10px; right: 10px; z-index: 30; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } .swiper-button-next, .swiper-button-prev { color: rgb(219, 0, 0) !important; } .copy-360 { text-align: center; margin-top: 10px; } /*** Calculator ***/ .calculator-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; } .calculator-modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border-radius: 5px; min-width: 1000px; max-width: 80%; max-height: 90vh; overflow-y: auto; } .calculator-close { position: absolute; top: 10px; right: 10px; font-size: 24px; font-weight: bold; cursor: pointer; color: #666; } .calculator-close:hover { color: #000; } .calculator { max-width: 1000px; margin: 0 auto; } .product-selection { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; } .product-btn { padding: 10px 20px; font-size: 1.6rem; border: 2px solid #000; background-color: #fff; cursor: pointer; border-radius: 4px; transition: all 0.3s ease; white-space: nowrap; color:#000; } .product-btn.active { background-color: #000; color: white; } .header { background-color: #000; color: white; padding: 10px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; } .header-controls { display: flex; justify-content: center; align-items: center; gap: 20px; } .unit-toggle { display: flex; align-items: center; gap: 10px; color: white; font-size:1.2rem; } .toggle-switch { position: relative; display: inline-block; width: 60px; height: 34px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: #ff6600; } input:checked + .slider:before { transform: translateX(26px); } .input-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; } .output-group { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom:10px; } .conversion-group-full { display: grid; grid-template-columns: repeat(1, 1fr); gap: 10px; margin-bottom: 10px; } .conversion-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; /* margin-bottom: 20px;*/ } .input-field, .output-field { padding: 10px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; min-height:100px; } label { display: block; margin-bottom: 5px; font-weight: bold; font-size:15px; } input[type="number"] { width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; } .result { background-color: #ed1c24; padding: 10px; border-radius: 4px; text-align: center; } .result-value { color: #ffffff; font-weight: bold; font-size: 2.2rem; } .unit { font-size: 1.1rem; color: #000; } .error-message { color: #dc3545; font-size: 1.2rem; margin-top: 4px; display: none; } input.error { border-color: #dc3545; } .title { font-size: 1.8rem; /* margin-bottom: 10px;*/ text-align: center; } .thickness-inputs { display: flex; gap: 8px; margin-bottom: 4px; } .thickness-input { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 1.6rem; width: 100%; } .thickness-input.error { border-color: #dc3545; } select { padding: 8px; border: 1px solid #ccc; border-radius: 4px; background-color: white; } .volume-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; max-width: 1000px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background-color: #e5e5e5; border: 1px solid #ccc; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .volume-cell { background-color: #ffffff; padding: 12px 16px; display: flex; align-items: center; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } .volume-column-header { background-color: #f5f5f5; font-weight: 600; } .volume-section-label { font-weight: bold; color: #333; } .volume-spacer { grid-column: 1 / -1; background-color: #5b9bd5; height: 20px; padding: 0; border: none; } .volume-empty-cell { background-color: #ffffff; } /* Remove bottom border from last row */ .volume-container > div:nth-last-child(-n+4) { border-bottom: none; } /* Remove right border from last column */ .volume-container > div:nth-child(4n) { border-right: none; } .combined-value { display: flex; justify-content: center; align-items: center; gap: 5px; color: #ffffff; font-weight: bold; font-size: 1.2em; } .combined-value + .combined-value { margin-top: 5px; } .unit-label { font-size: 0.9em; } #fraction-thickness { display: none; } .imperial-only #fraction-thickness { display: block; } .thickness-inputs.imperial-only { display: flex; } .fraction-input { position: relative; } .fraction-input input { width: 100%; } .fraction-error { display: none; color: #dc3545; font-size: 1.2rem; /* position: absolute;*/ top: 100%; left: 0; margin-top: 2px; display:none !important; } /* Hide fraction input in metric mode */ #fraction-thickness { display: none; } .imperial-only #fraction-thickness { display: block; } /* Previous styles remain the same */ #outdoor-kit-sizes, #deep-pour-kit-sizes { display: none; /* Hidden by default */ } #outdoor-kit-sizes.active, #deep-pour-kit-sizes.active { display: grid; grid-template-columns: repeat(1, 1fr); gap: 10px; margin-bottom: 20px; } #kit-size-calculations { display: none; /* Hidden by default */ } #kit-size-calculations.active { display: block; } /* Add this new style */ #kit-size-calculations { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .product-button-container { display: flex; gap: 1rem; /* or whatever size gap you want */ } .product-links-container { margin-top: 20px; /* padding: 20px 0;*/ } .product-links-container h3 { font-size: 1.6rem; margin-bottom: 20px; text-align: center; } .product-links { display: grid; grid-template-columns: repeat(2, minmax(250px, 1fr)); gap: 15px; max-width: 800px; margin: 0 auto; justify-content: center; } /* When there's only one product, center it */ .product-links:has(:only-child) { grid-template-columns: minmax(250px, 1fr); max-width: 400px; /* Adjust this value to match the width you want for a single button */ } .product-link-btn { padding: 15px 20px; font-size: 1.6rem; border: 2px solid #000; background-color: #fff; cursor: pointer; border-radius: 4px; transition: all 0.3s ease; text-align: center; text-decoration: none; color: #000; display: block; } .product-link-btn:hover { background-color: #000; color: #fff; } /* Responsive styles */ @media (max-width: 1000px) { body { padding: 10px; } .calculator-modal-content { min-width:90vw; } .calculator-close { top:0px; right:4px; } .product-selection { flex-direction: column; gap: 10px; } .product-btn { width: 100%; padding: 15px; font-size: 1.6rem; } .header-controls { flex-direction: column; gap: 10px; } .input-group { grid-template-columns: 1fr; gap: 15px; } .output-group { grid-template-columns: 1fr; gap: 15px; margin-bottom:15px; } .conversion-group { grid-template-columns: 1fr; gap: 15px; } .title { font-size: 1.5rem; padding: 0 10px; } .result { padding: 15px; } .input-field, .output-field { padding: 15px; } input[type="number"] { padding: 12px; font-size: 16px; /* Prevents iOS zoom on focus */ } .unit-toggle { width: 100%; justify-content: center; } .thickness-inputs { flex-direction: column; gap: 10px; } .thickness-inputs input, .thickness-inputs select { width: 100% !important; } .conversion-group:last-child { grid-template-columns: repeat(2, 1fr); } .thickness-inputs { flex-direction: column; } #kit-size-calculations { grid-template-columns: 1fr; } .product-links { padding: 0 15px; } }