@charset "UTF-8"; /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } body{ font-family: inherit; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } :root { interpolate-size: allow-keywords; } html { scroll-behavior: smooth; scroll-padding-top: 0; } * { scroll-behavior: smooth; } *:focus-visible { outline: -webkit-focus-ring-color auto 0px; outline-color: -webkit-focus-ring-color; outline-style: auto; outline-width: 0px; } /*! Flickity v2.3.0 https://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } /* draggable */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: grabbing; } /* ---- flickity-button ---- */ .flickity-button { position: absolute; background: hsla(0, 0%, 100%, 0.75); border: none; color: #333; } .flickity-button:hover { background: white; cursor: pointer; } .flickity-button:focus { outline: none; box-shadow: 0 0 0 5px #19f; } .flickity-button:active { opacity: 0.6; } .flickity-button:disabled { opacity: 0.3; cursor: auto; /* prevent disabled button from capturing pointer up event. #716 */ pointer-events: none; } .flickity-button-icon { fill: currentColor; } /* ---- previous/next buttons ---- */ .flickity-prev-next-button { top: 50%; width: 44px; height: 44px; border-radius: 50%; /* vertically center */ transform: translateY(-50%); } .flickity-prev-next-button.previous { left: 10px; } .flickity-prev-next-button.next { right: 10px; } /* right to left */ .flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; } .flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; } .flickity-prev-next-button .flickity-button-icon { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } /* ---- page dots ---- */ .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer; } .flickity-page-dots .dot.is-selected { opacity: 1; } /* @link https://utopia.fyi/space/calculator?c=320,12,1.2,1240,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ :root { --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem); --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem); --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem); --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem); --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem); --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem); --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem); --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem); /* One-up pairs */ --space-3xs-2xs: clamp(0.1875rem, 0.0788rem + 0.5435vw, 0.5rem); --space-2xs-xs: clamp(0.375rem, 0.2446rem + 0.6522vw, 0.75rem); --space-xs-s: clamp(0.5625rem, 0.4103rem + 0.7609vw, 1rem); --space-s-m: clamp(0.75rem, 0.4891rem + 1.3043vw, 1.5rem); --space-m-l: clamp(1.125rem, 0.8207rem + 1.5217vw, 2rem); --space-l-xl: clamp(1.5rem, 0.9783rem + 2.6087vw, 3rem); --space-xl-2xl: clamp(2.25rem, 1.6413rem + 3.0435vw, 4rem); --space-2xl-3xl: clamp(3rem, 1.9565rem + 5.2174vw, 6rem); /* Custom pairs */ --space-s-l: clamp(0.75rem, 0.3152rem + 2.1739vw, 2rem); } @media (min-width: 1600px) { :root { --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem); --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem); --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem); --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem); --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem); --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem); --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem); --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem); /* One-up pairs */ --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem); --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem); --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem); --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem); --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem); --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem); --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem); --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem); /* Custom pairs */ --space-s-l: clamp(0.75rem, 0.3152rem + 2.1739vw, 2rem); } } /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ :root { --step--2: clamp(0.64rem, 0.7134rem + -0.0947vw, 0.6944rem); --step--1: clamp(0.8rem, 0.8449rem + -0.058vw, 0.8333rem); --step-0: clamp(1rem, 1rem + 0vw, 1rem); --step-1: clamp(1.2rem, 1.1826rem + 0.087vw, 1.25rem); --step-2: clamp(1.44rem, 1.3974rem + 0.213vw, 1.5625rem); --step-3: clamp(1.728rem, 1.6497rem + 0.3915vw, 1.9531rem); --step-4: clamp(2.0736rem, 1.9457rem + 0.6397vw, 2.4414rem); --step-5: clamp(2.4883rem, 2.2923rem + 0.9799vw, 3.0518rem); } @media (min-width: 1600px) { :root { --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem); --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem); --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem); --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem); --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem); --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem); --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem); } } :root { font-family: "roboto", sans-serif; font-optical-sizing: auto; font-size: 16px; font-size: var(--step-0); font-weight: 300; line-height: 1.5; text-wrap: pretty; color: #333333FF; font-variant-numeric: lining-nums; } main p, main li, main figcaption { margin-block: 0 var(--space-s); } /*main > p.has-text-align-center {*/ /* font-size: var(--step-1);*/ /* max-width: 65ch;*/ /* margin-block: 0 var(--space-2xl);*/ /* text-align: center;*/ /*}*/ ul.short li { margin-block: 0 var(--space-2xs); } small, blockquote cite, .wp-block-buttons + p:has(a:first-child:last-child), .all_caps, ul.short a, figcaption { font-size: var(--step--1); line-height: 1.5; } .tiny, .php_dump, .product_grid > div:first-child > div > div div, .blog_posts > div:first-child > div > div div, .product_grid > div:first-child > div.filter.reset, .blog_posts > div:first-child > div.filter.reset, .product_grid > div:first-child > div.live_filter input, .blog_posts > div:first-child > div.live_filter input, .product_grid > div:first-child > div.live_filter, .blog_posts > div:first-child > div.live_filter, .map_key li, .not_uk__rough .uk_only:after, .distributors [data-collapsed-trigger], .consumables .attribute, .consumables .description, .accessories .attribute, .accessories .description, .consumables_and_accessories [data-collapsed-trigger], .case_study_detail > div > div > *:nth-child(1) { font-size: var(--step--1); line-height: 1; } strong, table th, table tfoot td, blockquote cite, main ol ol li::marker, main ol > li::marker, main ul li::marker, .landing_intro h4 + .wp-block-group p:first-child, .distributors [data-collapsed-trigger], .all_caps, ul.short a { font-weight: 500; } em { font-style: italic; } h1 em, h2 em { font-style: normal; } s { text-decoration: line-through; } sub, sup { font-size: 0.6em; line-height: 1; text-transform: none; } sub { vertical-align: sub; } sup { vertical-align: super; } pre { white-space: pre; } cite { display: inline-block; } .all_caps, ul.short a { text-transform: uppercase; line-height: 1.2; } body { background-color: hsl(0, 0%, 96%); color: #313231; } main { min-height: calc(100vh - 440px); } main > * { margin: var(--space-m) auto; } main > p { margin-inline: var(--space-m); } @media (min-width: 1000px) { main > p { margin-inline: auto; } } h1, h2, h3, h4, h5, h6 { font-family: "finalsix", sans-serif; font-size: 2em; text-wrap: balance; line-height: 1.2; font-weight: 800; margin-bottom: 1em; } * + h1, * + h2, * + h3, * + h4, * + h5, * + h6 { margin-top: 1em; } main > h1.has-text-align-center, main > h2.has-text-align-center, main > h3.has-text-align-center, main > h4.has-text-align-center, main > h5.has-text-align-center, main > h6.has-text-align-center { text-align: center; max-width: 65ch; } @media (max-width: 1000px) { main > h1, main > h2, main > h3, main > h4, main > h5, main > h6 { padding-inline: var(--space-m); } } h1 strong:first-child:last-child, h1 table th:first-child:last-child, table h1 th:first-child:last-child, h1 table tfoot td:first-child:last-child, table tfoot h1 td:first-child:last-child, h1 blockquote cite:first-child:last-child, blockquote h1 cite:first-child:last-child, h1 main ol ol li:first-child:last-child::marker, main ol ol h1 li:first-child:last-child::marker, h1 main ol > li:first-child:last-child::marker, main h1 ol > li:first-child:last-child::marker, h1 main ul li:first-child:last-child::marker, main ul h1 li:first-child:last-child::marker, h1 .landing_intro h4 + .wp-block-group p:first-child:last-child, .landing_intro h4 + .wp-block-group h1 p:first-child:last-child, h1 .distributors [data-collapsed-trigger]:first-child:last-child, .distributors h1 [data-collapsed-trigger]:first-child:last-child, h1 .all_caps:first-child:last-child, h1 ul.short a:first-child:last-child, ul.short h1 a:first-child:last-child, h2 strong:first-child:last-child, h2 table th:first-child:last-child, table h2 th:first-child:last-child, h2 table tfoot td:first-child:last-child, table tfoot h2 td:first-child:last-child, h2 blockquote cite:first-child:last-child, blockquote h2 cite:first-child:last-child, h2 main ol ol li:first-child:last-child::marker, main ol ol h2 li:first-child:last-child::marker, h2 main ol > li:first-child:last-child::marker, main h2 ol > li:first-child:last-child::marker, h2 main ul li:first-child:last-child::marker, main ul h2 li:first-child:last-child::marker, h2 .landing_intro h4 + .wp-block-group p:first-child:last-child, .landing_intro h4 + .wp-block-group h2 p:first-child:last-child, h2 .distributors [data-collapsed-trigger]:first-child:last-child, .distributors h2 [data-collapsed-trigger]:first-child:last-child, h2 .all_caps:first-child:last-child, h2 ul.short a:first-child:last-child, ul.short h2 a:first-child:last-child, h3 strong:first-child:last-child, h3 table th:first-child:last-child, table h3 th:first-child:last-child, h3 table tfoot td:first-child:last-child, table tfoot h3 td:first-child:last-child, h3 blockquote cite:first-child:last-child, blockquote h3 cite:first-child:last-child, h3 main ol ol li:first-child:last-child::marker, main ol ol h3 li:first-child:last-child::marker, h3 main ol > li:first-child:last-child::marker, main h3 ol > li:first-child:last-child::marker, h3 main ul li:first-child:last-child::marker, main ul h3 li:first-child:last-child::marker, h3 .landing_intro h4 + .wp-block-group p:first-child:last-child, .landing_intro h4 + .wp-block-group h3 p:first-child:last-child, h3 .distributors [data-collapsed-trigger]:first-child:last-child, .distributors h3 [data-collapsed-trigger]:first-child:last-child, h3 .all_caps:first-child:last-child, h3 ul.short a:first-child:last-child, ul.short h3 a:first-child:last-child, h4 strong:first-child:last-child, h4 table th:first-child:last-child, table h4 th:first-child:last-child, h4 table tfoot td:first-child:last-child, table tfoot h4 td:first-child:last-child, h4 blockquote cite:first-child:last-child, blockquote h4 cite:first-child:last-child, h4 main ol ol li:first-child:last-child::marker, main ol ol h4 li:first-child:last-child::marker, h4 main ol > li:first-child:last-child::marker, main h4 ol > li:first-child:last-child::marker, h4 main ul li:first-child:last-child::marker, main ul h4 li:first-child:last-child::marker, h4 .landing_intro h4 + .wp-block-group p:first-child:last-child, .landing_intro h4 + .wp-block-group h4 p:first-child:last-child, h4 .distributors [data-collapsed-trigger]:first-child:last-child, .distributors h4 [data-collapsed-trigger]:first-child:last-child, h4 .all_caps:first-child:last-child, h4 ul.short a:first-child:last-child, ul.short h4 a:first-child:last-child, h5 strong:first-child:last-child, h5 table th:first-child:last-child, table h5 th:first-child:last-child, h5 table tfoot td:first-child:last-child, table tfoot h5 td:first-child:last-child, h5 blockquote cite:first-child:last-child, blockquote h5 cite:first-child:last-child, h5 main ol ol li:first-child:last-child::marker, main ol ol h5 li:first-child:last-child::marker, h5 main ol > li:first-child:last-child::marker, main h5 ol > li:first-child:last-child::marker, h5 main ul li:first-child:last-child::marker, main ul h5 li:first-child:last-child::marker, h5 .landing_intro h4 + .wp-block-group p:first-child:last-child, .landing_intro h4 + .wp-block-group h5 p:first-child:last-child, h5 .distributors [data-collapsed-trigger]:first-child:last-child, .distributors h5 [data-collapsed-trigger]:first-child:last-child, h5 .all_caps:first-child:last-child, h5 ul.short a:first-child:last-child, ul.short h5 a:first-child:last-child, h6 strong:first-child:last-child, h6 table th:first-child:last-child, table h6 th:first-child:last-child, h6 table tfoot td:first-child:last-child, table tfoot h6 td:first-child:last-child, h6 blockquote cite:first-child:last-child, blockquote h6 cite:first-child:last-child, h6 main ol ol li:first-child:last-child::marker, main ol ol h6 li:first-child:last-child::marker, h6 main ol > li:first-child:last-child::marker, main h6 ol > li:first-child:last-child::marker, h6 main ul li:first-child:last-child::marker, main ul h6 li:first-child:last-child::marker, h6 .landing_intro h4 + .wp-block-group p:first-child:last-child, .landing_intro h4 + .wp-block-group h6 p:first-child:last-child, h6 .distributors [data-collapsed-trigger]:first-child:last-child, .distributors h6 [data-collapsed-trigger]:first-child:last-child, h6 .all_caps:first-child:last-child, h6 ul.short a:first-child:last-child, ul.short h6 a:first-child:last-child { font-weight: 600; } h1 { font-size: var(--step-3); text-transform: uppercase; line-height: 1.02; margin-bottom: 1em; } .breadcrumbs + h1 { margin-top: var(--space-2xs); } @media (min-width: 1000px) { h1 { font-size: var(--step-4); } } @media (min-width: 1400px) { h1 { font-size: var(--step-5); } } h2 { font-size: var(--step-2); text-transform: uppercase; line-height: 1.02; } h3 { font-size: var(--step-3); text-transform: uppercase; line-height: 1.02; } .single-post h3 { font-size: var(--step-2); } h4 { font-size: var(--step-2); } h5, h6 { font-size: var(--step--1); font-weight: 800; text-transform: uppercase; line-height: 1.02; } .big_number { display: inline-block; background-color: hsl(358, 85%, 52%); color: hsl(0, 100%, 100%); width: 3em; height: 3em; border-radius: 3em; text-align: center; font-family: "finalsix", sans-serif; font-weight: 900; line-height: 2.9; flex-shrink: 0; transform: translateY(-0.6em); } p:has(.big_number) { display: flex; gap: var(--space-m); } .blog_posts .meta, .single-post .meta { margin-bottom: var(--space-s); } .blog_posts .date, .single-post .date { display: flex; justify-content: flex-start; gap: var(--space-2xs); } .blog_posts { max-width: 3000px; padding-inline: var(--space-m); margin: 0 auto; margin-top: var(--space-l); } @media (min-width: 750px) { .blog_posts > div:last-child { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl) var(--space-m); grid-column: 1 / span 3; } } @media (min-width: 1000px) { .blog_posts > div:last-child { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1400px) { .blog_posts > div:last-child { grid-column: 1 / span 5; } } @media (min-width: 2000px) { .blog_posts > div:last-child { grid-column: 1 / span 5; } } .blog_posts > div:last-child h3 { font-size: var(--step-2); margin-bottom: var(--space-2xs); max-width: 30ch; } @media (min-width: 1600px) { .blog_posts > div:last-child h3 { max-width: 18ch; } } .blog_posts > div:last-child figure { aspect-ratio: 16/10; margin-top: 0; overflow: hidden; } .blog_posts > div:last-child img { -o-object-fit: cover; object-fit: cover; transition: transform 0.6s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .blog_posts > div:last-child:hover a { opacity: 0.8; } .blog_posts > div:last-child a { position: relative; text-decoration: none; transition: opacity 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .blog_posts > div:last-child a .card-content { margin-top: var(--space-m); } .blog_posts > div:last-child a:after { content: ""; position: absolute; inset: calc(-1 * var(--space-xs)); border-radius: 0 0 2rem 0; z-index: -1; transition: background-color 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .blog_posts > div:last-child a:hover { opacity: 1; } .blog_posts > div:last-child a:hover img { transform: scale(1.05) rotate(1deg); } .blog_posts > div:last-child a:hover:after { background-color: rgba(255, 255, 255, 0.8); } .blog_posts > div:last-child .excerpt { max-width: 40ch; } .page-id-238 main > header, .page-id-245 main > header { display: none; } .single-post main > figure:first-child { margin-top: 0; overflow: hidden; } @media (max-width: 1000px) { .single-post main > figure:first-child { width: 100%; max-height: 40vh; } } @media (min-width: 1000px) { .single-post main > figure:first-child { max-width: min(100vw - (var(--space-l)), 1400px); max-height: 60vh; } } @media (max-width: 1000px) { .single-post main header { padding-inline: var(--space-m); } } @media (min-width: 750px) { .single-post main header { position: relative; margin-top: -8.2em; z-index: 1; } .single-post main header:after { content: ""; position: absolute; inset: calc(-1 * var(--space-l)); bottom: 0; background-color: hsl(0, 0%, 96%); z-index: -1; } } .single-post h1 { margin-bottom: var(--space-xs); } .single-post h2 { color: hsl(358, 85%, 52%); } .breadcrumbs { display: flex; justify-content: flex-start; align-items: center; gap: var(--space-2xs); font-size: var(--step--2); text-transform: uppercase; font-weight: 500; } .breadcrumbs a { text-decoration: none; } .case_study.feat { margin-inline: 0; padding-inline: var(--space-m); } @media (min-width: 750px) { .case_study.feat { max-width: min(100vw - (var(--space-l)), 1400px); margin-inline: auto; } } .case_study.feat a { display: block; background-color: hsl(0, 0%, 38%); color: hsl(0, 100%, 100%); text-decoration: none; transition: background-color 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); border-radius: 0 0 1.5rem 0; } @media (min-width: 750px) { .case_study.feat a { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } } @media (min-width: 750px) { .case_study.feat a figure { margin: 0; } } .case_study.feat a img { -o-object-fit: cover; object-fit: cover; } .case_study.feat a > div { margin-inline: var(--space-m); padding-bottom: var(--space-xl); } @media (min-width: 750px) { .case_study.feat a > div { margin-left: 0; padding-block: var(--space-xl); align-self: center; } } .case_study.feat a h3 { margin-top: 0; } .case_study.feat a:hover { background-color: hsl(0, 0%, 33%); } .page-id-238 .blog_posts, .page-id-245 .blog_posts { gap: 0 var(--space-xl); max-width: 2000px; } .page-id-238 .blog_posts > div:first-child, .page-id-245 .blog_posts > div:first-child { grid-column: 1 / span 6; padding-block: var(--space-m); } @media (width > 750px) { .page-id-238 .blog_posts > div:first-child, .page-id-245 .blog_posts > div:first-child { display: flex; justify-content: center; align-items: stretch; } } .page-id-238 .blog_posts > div:first-child > div, .page-id-238 .blog_posts > div:first-child > div > div, .page-id-245 .blog_posts > div:first-child > div, .page-id-245 .blog_posts > div:first-child > div > div { margin: 0; } @media (width > 750px) { .page-id-238 .blog_posts > div:first-child > div, .page-id-238 .blog_posts > div:first-child > div > div, .page-id-245 .blog_posts > div:first-child > div, .page-id-245 .blog_posts > div:first-child > div > div { display: flex !important; flex-direction: row; justify-content: center; align-items: stretch; } } .page-id-238 .blog_posts > div:first-child .filter, .page-id-238 .blog_posts > div:first-child .filter.reset, .page-id-245 .blog_posts > div:first-child .filter, .page-id-245 .blog_posts > div:first-child .filter.reset { background-color: hsl(0, 0%, 90%); padding: var(--space-xs) var(--space-m); margin: 2px; transition: 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .page-id-238 .blog_posts > div:first-child .filter:hover, .page-id-238 .blog_posts > div:first-child .filter.reset:hover, .page-id-245 .blog_posts > div:first-child .filter:hover, .page-id-245 .blog_posts > div:first-child .filter.reset:hover { background-color: hsl(0, 0%, 85%); } .page-id-238 .blog_posts > div:first-child .filter[data-active], .page-id-238 .blog_posts > div:first-child .filter.reset[data-active], .page-id-245 .blog_posts > div:first-child .filter[data-active], .page-id-245 .blog_posts > div:first-child .filter.reset[data-active] { background-color: hsl(358, 85%, 52%); color: white; } .page-id-238 .blog_posts > div:first-child .filter[data-active] span, .page-id-238 .blog_posts > div:first-child .filter.reset[data-active] span, .page-id-245 .blog_posts > div:first-child .filter[data-active] span, .page-id-245 .blog_posts > div:first-child .filter.reset[data-active] span { color: rgba(255, 255, 255, 0.8); } .page-id-238 .blog_posts > div:first-child .filter svg, .page-id-238 .blog_posts > div:first-child .filter.reset svg, .page-id-245 .blog_posts > div:first-child .filter svg, .page-id-245 .blog_posts > div:first-child .filter.reset svg { display: none; } .page-id-238 .blog_posts > div:last-child, .page-id-245 .blog_posts > div:last-child { grid-column: 1 / span 6; } .case_study_detail { --local-outline-color: hsl(0, 4%, 65%); display: flex; justify-content: flex-start; align-items: center; gap: var(--space-xs); background-color: hsl(0, 100%, 100%); padding: var(--space-m); border-radius: 0 0 2rem 0; margin-bottom: var(--space-xl); } .mrg-btm-none{ margin-bottom: 0px !important; } .page-header{ max-width: min(100vw - (var(--space-l)), 1400px) !important; padding-top: var(--space-l); margin: var(--space-m) auto; } @media (max-width: 1000px) { .case_study_detail { flex-direction: column; } } .case_study_detail > div { display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1 0 auto; } .case_study_detail > div > div { display: flex; justify-content: flex-start; align-items: flex-start; gap: var(--space-xs); } .case_study_detail > div > div > *:nth-child(1) { flex: 0 0 6em; line-height: 1.6; text-transform: uppercase; } .case_study_detail > div > div > *:nth-child(2) { font-weight: 500; } .case_study_detail > a { display: flex; flex-direction: row-reverse; justify-content: flex-start; } .case_study_detail figure { margin: 0; } .case_study_detail svg { width: 10em; } .case_study_detail svg path, .case_study_detail svg polyline, .case_study_detail svg polygon, .case_study_detail svg circle, .case_study_detail svg ellipse { fill: rgba(0, 0, 0, 0.05); } .case_study_detail svg path, .case_study_detail svg polyline, .case_study_detail svg polygon, .case_study_detail svg line, .case_study_detail svg circle, .case_study_detail svg ellipse { stroke-width: 6px; stroke: var(--local-outline-color); transition: stroke 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .live_filter { max-width: 2000px; padding-inline: var(--space-m); } .live_filter > div:first-child { position: relative !important; max-width: 45rem !important; margin: var(--space-xl) auto !important; } .live_filter input { background-color: hsl(0, 100%, 100%) !important; padding: var(--space-xs) !important; padding-left: calc(2em + var(--space-xs)) !important; font-family: "finalsix", sans-serif; font-size: 1.4rem; width: 100% !important; } .live_filter svg { position: absolute; top: 50%; left: var(--space-xs); transform: translateY(-50%); width: 2em !important; height: auto !important; pointer-events: none; } .live_filter svg path { fill: hsl(358, 85%, 52%); } .live_filter .consumables { gap: var(--space-xl); } @media (min-width: 750px) { .live_filter .consumables { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .live_filter .consumables { grid-template-columns: repeat(3, 1fr); } } .live_filter .consumables > div:not([data-active]) { display: none; } .sustainability_goals .wp-block-column { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3xs); } .sustainability_goals .wp-block-column .has-background { margin-inline: 0; } .sustainability_goals .wp-block-column:last-child :last-child { border-radius: 0 2rem 0 0; } .sustainability_goals { gap: var(--space-3xs) !important; } .has-background { background-color: hsl(358, 85%, 52%); flex-grow: 1; text-align: center; align-content: center; padding: var(--space-m); margin: 0; font-family: "finalsix", sans-serif; font-weight: 600; font-size: var(--step-1); margin-inline: auto; max-width: min(100vw - (var(--space-l)), 1400px); } .has-white-color { color: hsl(0, 100%, 100%); } .wp-block-columns { padding-inline: var(--space-m); } @media (min-width: 1000px) { .wp-block-columns { max-width: min(100vw - (var(--space-l)), 1400px); } } @media (min-width: 1000px) { .wp-block-columns .wp-block-column > *:last-child { margin-bottom: 0; } } .wp-block-columns figure { margin-inline: 0; } @media (min-width: 1000px) { /*.wp-block-columns:has(> .wp-block-column > figure:first-child:last-child) .wp-block-column {*/ /* display: flex;*/ /* flex-direction: column;*/ /* justify-content: center;*/ /* max-width: 46% !important;*/ /* gap: 10px;*/ /*}*/ .wp-block-columns:has(> :nth-child(2).wp-block-column) { display: grid; gap: var(--space-2xl); grid-template-columns: repeat(2, 1fr); } } .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(1) { position: relative; padding-top: var(--space-3xl); padding-right: var(--space-m); color: hsl(358, 85%, 52%); justify-content: flex-end; } .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(1):after { content: ""; display: block; position: absolute; top: 0; width: 135px; height: 30px; border-radius: 0 0 var(--space-l) 0; background-color: hsl(358, 85%, 52%); } @media (max-width: 1000px) { .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(1) { padding: 60px 0 0 !important; } } @media (min-width: 1000px) { .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) { display: grid; gap: var(--space-m); grid-template-columns: repeat(3, 1fr); } .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(2) figure, .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(3) figure { max-height: 100%; overflow: hidden; margin: 0; } .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(2) figure img, .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(3) figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(2) figure:has(+ p), .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(3) figure:has(+ p) { margin-bottom: var(--space-m); } .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(2):has(figure + figure), .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(3):has(figure + figure) { display: flex; flex-direction: column; gap: var(--space-m); } .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(2):has(figure + figure) figure, .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(3):has(figure + figure) figure { height: 10vh; flex-grow: 1; } .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(2):has(figure + figure) figure img, .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(3):has(figure + figure) figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } } .wp-block-columns:has(> :nth-child(4).wp-block-column) { grid-template-columns: repeat(4, 1fr); } .wp-block-columns:has(> :nth-child(5).wp-block-column) { grid-template-columns: repeat(5, 1fr); } .wp-block-columns:has(> :nth-child(6).wp-block-column) { display: grid; gap: var(--space-m); grid-template-columns: repeat(6, 1fr); max-width: none; padding-inline: var(--space-m); overflow-x: scroll; scroll-snap-type: x mandatory; -ms-overflow-style: none; } .wp-block-columns:has(> :nth-child(6).wp-block-column)::-webkit-scrollbar { display: none; } .wp-block-columns:has(> :nth-child(6).wp-block-column) .wp-block-column { width: 55vw; border-start-start-radius: var(--space-l); border-radius: 0 0 var(--space-l) 0; overflow: hidden; scroll-behavior: smooth; } @media (min-width: 1000px) { .wp-block-columns:has(> :nth-child(6).wp-block-column) .wp-block-column { width: auto; min-width: 20rem; } } .wp-block-columns:has(> :nth-child(6).wp-block-column) .wp-block-column:has(figure + figure) { display: flex; flex-direction: column; gap: var(--space-xs); } .wp-block-columns:has(> :nth-child(6).wp-block-column) .wp-block-column:has(figure + figure) figure { margin: 0; max-height: 30vh; } .wp-block-columns:has(> :nth-child(6).wp-block-column) .wp-block-column figure { margin: 0; } .wp-block-columns:has(> :nth-child(6).wp-block-column) .wp-block-column:not(:has(figure)) { display: flex; flex-direction: column; justify-content: center; background-color: hsl(358, 85%, 52%); color: hsl(0, 100%, 100%); padding: var(--space-l); text-align: center; } @media (min-width: 1000px) { .wp-block-columns:has(.wp-block-column[style="flex-basis:50%"]) { grid-template-columns: 3fr 1fr 1fr 1fr; } } @media (max-width: 1000px) { .wp-block-columns:has(> :nth-child(6).wp-block-column) .wp-block-column:not(:has(figure)) { padding: var(--space-s); } } main .wp-block-columns { margin-block: var(--space-xl) var(--space-3xl); gap: 15px; } @media (max-width: 736px) { main .wp-block-columns { margin-block: auto; display: flex; gap: 15px; flex-wrap: wrap !important; } } @media (max-width: 599px) { main .wp-block-columns { flex-direction: column; } main .wp-block-columns .wp-block-column{ width: 100%; } } .logo-con{ display: grid; grid-template-columns: repeat(5, 1fr) !important; width: 100%; overflow: scroll; gap: 30px 15px !important; padding: 0px !important; margin: 0px !important; } .logo-con .wp-block-column{ width: 100%; max-width: 20rem; min-width: auto !important; } .logo_group { display: flex !important; flex-wrap: wrap !important; gap: var(--space-m) var(--space-xl) !important; justify-content: center; padding-inline: 0 !important; margin-bottom: var(--space-l) !important; } @media (min-width: 750px) { .logo_group { padding-inline: var(--space-2xl); } } .logo_group .wp-block-column { display: block; min-width: auto !important; border-start-start-radius: 0 !important; border-radius: 0 !important; padding-top: 0 !important; padding-right: 0 !important; width: min(90px, 25%) !important; } .logo_group .wp-block-column:after { display: none !important; } .logo_group img { -o-object-fit: contain !important; object-fit: contain !important; } .postid-231 .logo_group { justify-content: flex-start; } @media (min-width: 1000px) { .wp-block-columns:has(.col_span_2) { grid-template-columns: repeat(3, 1fr) !important; gap: var(--space-m) !important; } } @media (min-width: 1000px) { .wp-block-columns:has(.col_span_2) .col_span_2 { grid-column: 2 / span 2; } } .wp-block-columns:has(.col_span_2) .col_span_2 p { max-width: 55ch; } @media (min-width: 1000px) { .equal_heights .wp-block-column { margin-bottom: 0; display: flex; align-items: stretch; align-content: center; } .equal_heights .wp-block-column > * { display: flex; align-items: stretch; align-content: center; } .equal_heights .wp-block-column > * > * { display: flex; align-items: stretch; align-content: center; } .equal_heights .wp-block-column > * > * { align-content: center; } } [data-collapsed] { margin-bottom: 2px; } [data-collapsed] > div:last-child { overflow: hidden; transition: height 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98), opacit 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98), padding-block 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .distributors [data-collapsed-trigger] { position: relative; cursor: pointer; z-index: 2; } .distributors [data-collapsed-trigger] svg { transform: rotate(90deg); transition: transform 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .distributors [data-collapsed-trigger] [role="presentation"] { transition: transform 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .distributors [data-collapsed-trigger] [role="presentation"] path { fill: hsl(0, 0%, 20%); } .distributors [data-collapsed="0"] svg { transform: rotate(-90deg); } .distributors [data-collapsed="0"] > div:last-child { height: auto; opacity: 1; } .distributors [data-collapsed="1"] > div:last-child { height: 0; opacity: 0; padding-block: 0 !important; } .consumables_and_accessories [data-collapsed-trigger] { background-color: hsl(0, 0%, 90%); text-transform: uppercase; text-align: center; padding: var(--space-xs); cursor: pointer; } .consumables_and_accessories .short [data-collapsed-trigger] { display: none; } .consumables_and_accessories [data-collapsed="0"] span:first-child { display: none; } .consumables_and_accessories [data-collapsed="1"] span:last-child { display: none; } .consumables, .accessories { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--space-m); overflow-y: hidden; max-height: none; transition: max-height 0.4s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .short .consumables, .short .accessories { overflow: visible; } .consumables > div, .accessories > div { display: flex; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: var(--space-s); } .consumables figure, .accessories figure { margin: 0; max-width: 20%; width: 120px; max-height: 120px; flex-shrink: 0; align-self: flex-start; } .consumables img, .accessories img { -o-object-fit: contain; object-fit: contain; } .consumables .attribute, .consumables .description, .accessories .attribute, .accessories .description { line-height: 1.4; } .consumables .attribute p:last-child, .consumables .description p:last-child, .accessories .attribute p:last-child, .accessories .description p:last-child { margin-bottom: var(--space-3xs); } .consumables .tag.tre, .consumables .product_variant_comparison th > div div.tre:nth-child(2), .product_variant_comparison th > div .consumables div.tre:nth-child(2), .consumables .specs [data-collapsed] > div:first-child > div.tre:nth-child(2), .specs .consumables [data-collapsed] > div:first-child > div.tre:nth-child(2), .consumables .map_item .tre.country, .map_item .consumables .tre.country, .consumables .distributors > div .tre.country, .distributors > div .consumables .tre.country, .consumables .ports > div .tre.country, .ports > div .consumables .tre.country, .accessories .tag.tre, .accessories .product_variant_comparison th > div div.tre:nth-child(2), .product_variant_comparison th > div .accessories div.tre:nth-child(2), .accessories .specs [data-collapsed] > div:first-child > div.tre:nth-child(2), .specs .accessories [data-collapsed] > div:first-child > div.tre:nth-child(2), .accessories .map_item .tre.country, .map_item .accessories .tre.country, .accessories .distributors > div .tre.country, .distributors > div .accessories .tre.country, .accessories .ports > div .tre.country, .ports > div .accessories .tre.country { background-color: hsl(358, 85%, 52%); } body:not(.page-id-257) .consumables .tag:not(.tre), body:not(.page-id-257) .consumables .product_variant_comparison th > div div:not(.tre):nth-child(2), .product_variant_comparison th > div body:not(.page-id-257) .consumables div:not(.tre):nth-child(2), body:not(.page-id-257) .consumables .specs [data-collapsed] > div:first-child > div:not(.tre):nth-child(2), .specs body:not(.page-id-257) .consumables [data-collapsed] > div:first-child > div:not(.tre):nth-child(2), body:not(.page-id-257) .consumables .map_item .country:not(.tre), .map_item body:not(.page-id-257) .consumables .country:not(.tre), body:not(.page-id-257) .consumables .distributors > div .country:not(.tre), .distributors > div body:not(.page-id-257) .consumables .country:not(.tre), body:not(.page-id-257) .consumables .ports > div .country:not(.tre), .ports > div body:not(.page-id-257) .consumables .country:not(.tre), body:not(.page-id-257) .accessories .tag:not(.tre), body:not(.page-id-257) .accessories .product_variant_comparison th > div div:not(.tre):nth-child(2), .product_variant_comparison th > div body:not(.page-id-257) .accessories div:not(.tre):nth-child(2), body:not(.page-id-257) .accessories .specs [data-collapsed] > div:first-child > div:not(.tre):nth-child(2), .specs body:not(.page-id-257) .accessories [data-collapsed] > div:first-child > div:not(.tre):nth-child(2), body:not(.page-id-257) .accessories .map_item .country:not(.tre), .map_item body:not(.page-id-257) .accessories .country:not(.tre), body:not(.page-id-257) .accessories .distributors > div .country:not(.tre), .distributors > div body:not(.page-id-257) .accessories .country:not(.tre), body:not(.page-id-257) .accessories .ports > div .country:not(.tre), .ports > div body:not(.page-id-257) .accessories .country:not(.tre) { display: none; } [data-collapsed="1"] .consumables, [data-collapsed="1"] .accessories { max-height: 50vh; } @media (min-width: 1000px) { .consumables, .accessories { display: grid; grid-template-columns: repeat(2, 1fr); } .consumables h6, .accessories h6 { position: relative; display: flex; justify-content: stretch; align-items: stretch; gap: var(--space-s); grid-column: 1 / span 2; color: hsl(358, 85%, 52%); } .consumables h6 [role="presentation"], .accessories h6 [role="presentation"] { position: relative; display: block; flex: 1 1 10px; } .consumables h6 [role="presentation"]:after, .accessories h6 [role="presentation"]:after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: hsl(358, 85%, 52%); transform: translateY(-50%); } } h5:has(+ .consumables, + .accessories) { margin-bottom: var(--space-l); } .consumables_and_accessories { background-color: hsl(0, 100%, 100%); background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%); max-width: none; padding-inline: var(--space-m); } @media (max-width: 1000px) { .single-product main .consumables_and_accessories { width: 100vw; } } .consumables_and_accessories > div { margin-block: var(--space-xl); } .consumables_and_accessories [data-collapsed-trigger] { margin-block: var(--space-m); } .distributors > div .country, .ports > div .country { margin-bottom: var(--space-s); } .distributors > div a[href^="http://"], .distributors > div a[href^="https://"], .distributors > div a[href^="tel:"], .distributors > div a[href^="mailto:"], .distributors > div .address, .ports > div a[href^="http://"], .ports > div a[href^="https://"], .ports > div a[href^="tel:"], .ports > div a[href^="mailto:"], .ports > div .address { padding-left: 2.1em; } .distributors > div a[href^="http://"] svg, .distributors > div a[href^="https://"] svg, .distributors > div a[href^="tel:"] svg, .distributors > div a[href^="mailto:"] svg, .distributors > div .address svg, .ports > div a[href^="http://"] svg, .ports > div a[href^="https://"] svg, .ports > div a[href^="tel:"] svg, .ports > div a[href^="mailto:"] svg, .ports > div .address svg { display: inline-block; width: 1.4em; height: 1.4em; margin-inline: -2.1em 0.7em; } .distributors > div h5, .ports > div h5 { margin-block: 0; } .distributors > div h5:not(:has(+ .country)), .ports > div h5:not(:has(+ .country)) { margin-bottom: var(--space-s); } .distributors > div .address, .ports > div .address { margin-top: var(--space-s); } .distributors path, .ports path { fill: hsl(0, 0%, 20%); } .page-id-255 main .wp-block-group a[href^="tel"], .page-id-255 main .wp-block-group a[href^="mailto"], .page-id-259 main .wp-block-group a[href^="tel"], .page-id-259 main .wp-block-group a[href^="mailto"], .page-id-240 main a[href^="tel"], .page-id-240 main a[href^="mailto"] { position: relative; display: block; text-decoration: none; font-size: var(--step-1); margin-bottom: var(--space-s); padding-left: 1.5em; } .page-id-255 main .wp-block-group a[href^="tel"]:after, .page-id-255 main .wp-block-group a[href^="mailto"]:after, .page-id-259 main .wp-block-group a[href^="tel"]:after, .page-id-259 main .wp-block-group a[href^="mailto"]:after, .page-id-240 main a[href^="tel"]:after, .page-id-240 main a[href^="mailto"]:after { content: ""; position: absolute; top: 50%; left: 0; display: block; width: 1.5em; height: 1.5em; background-repeat: no-repeat; background-position: 50% 50%; transform: translate(-20%, -50%); } .page-id-255 main .wp-block-group a[href^="tel"]:has(+ a), .page-id-255 main .wp-block-group a[href^="mailto"]:has(+ a), .page-id-259 main .wp-block-group a[href^="tel"]:has(+ a), .page-id-259 main .wp-block-group a[href^="mailto"]:has(+ a), .page-id-240 main a[href^="tel"]:has(+ a), .page-id-240 main a[href^="mailto"]:has(+ a) { margin-bottom: 0; } .page-id-255 main .wp-block-group a[href^="tel"], .page-id-259 main .wp-block-group a[href^="tel"], .page-id-240 main a[href^="tel"] { white-space: nowrap; } .page-id-255 main .wp-block-group a[href^="tel"]:after, .page-id-259 main .wp-block-group a[href^="tel"]:after, .page-id-240 main a[href^="tel"]:after { background-image: url(../images/icon-phone.svg); } .page-id-255 main .wp-block-group a[href^="mailto"]:after, .page-id-259 main .wp-block-group a[href^="mailto"]:after, .page-id-240 main a[href^="mailto"]:after { background-image: url(../images/icon-mail.svg); } /*body:not(.home) main > .wp-block-cover:first-child {*/ /* max-width: 2000px;*/ /* margin: 0 auto var(--space-2xl);*/ /*}*/ .page-banner { width: 100%; max-width: 100%; margin: 0 auto var(--space-2xl); padding: 20px; display: flex; flex-direction: column; min-height: 60vh; } .page-banner img.wp-block-cover__image-background { position: relative; object-fit: cover; object-position: center; max-height: 60vh; } .page-banner .wp-block-cover__inner-container { position: absolute; top: 50px; height: 60%; right: 20px; background: #ed1d23; padding: var(--space-m); width: 50%; color: #fff; border-end-end-radius: var(--space-xl); display: flex; flex-direction: column; justify-content: center; align-content: center; } .page-banner.side-by-side .wp-block-cover__inner-container { flex-direction: row; } .page-banner.side-by-side .wp-block-heading { max-width: 70% !important; } .page-banner .wp-block-cover__inner-container .wp-block-image{ margin: 0px; } .page-banner .wp-block-cover__inner-container h1{ margin: 0px; font-size: clamp(2rem, 1.25vw + 1.22rem, 3rem) !important; } .dist-contact .wp-block-group__inner-container p a{ font-size: var(--step-m) !important; } @media (max-width: 999px) { .page-banner { display: flex !important; flex-direction: column !important; } .page-banner .wp-block-cover__inner-container{ position: relative; padding: var(--space-m); width: 100%; top: auto; left: auto; right: auto; bottom: auto; flex-direction: column !important; align-items: flex-start; } .page-banner .wp-block-cover__inner-container .wp-block-image{ width: 150px; } } @media (max-width: 648px) { .page-banner{ min-height: auto !important; } .page-banner h1 { font-size: 2rem !important; } } /*body:not(.home) main > .wp-block-cover:first-child .wp-block-cover__inner-container {*/ /* position: relative;*/ /* background-color: hsl(358, 85%, 52%);*/ /* color: hsl(0, 100%, 100%);*/ /* padding: var(--space-m);*/ /* padding-bottom: var(--space-xl);*/ /* border-radius: 0 0 var(--space-xl) 0;*/ /* align-self: flex-start;*/ /* overflow: hidden;*/ /*}*/ /*@media (min-width: 1000px) {*/ /* body:not(.home) main > .wp-block-cover:first-child .wp-block-cover__inner-container {*/ /* grid-row: 1;*/ /* grid-column: 2;*/ /* z-index: 2;*/ /* margin: var(--space-l);*/ /* margin-left: 0;*/ /* padding: var(--space-m);*/ /* }*/ /*}*/ /*body:not(.home) main > .wp-block-cover:first-child .wp-block-cover__inner-container * {*/ /* margin-bottom: 0;*/ /*}*/ /*body:not(.home) main > .wp-block-cover:first-child .wp-block-cover__inner-container:has(figure) {*/ /* display: flex;*/ /* flex-wrap: wrap;*/ /* align-items: flex-start;*/ /* gap: 0 var(--space-m);*/ /*}*/ /*body:not(.home) main > .wp-block-cover:first-child .wp-block-cover__inner-container:has(figure) .breadcrumbs {*/ /* width: 100%;*/ /* flex-shrink: 0;*/ /*}*/ /*body:not(.home) main > .wp-block-cover:first-child .wp-block-cover__inner-container:has(figure) h1 {*/ /* width: 50%;*/ /* flex-grow: 1;*/ /*}*/ /*body:not(.home) main > .wp-block-cover:first-child .wp-block-cover__inner-container figure {*/ /* width: 140px;*/ /* margin: 0;*/ /* transform: translateY(calc(-1 * var(--space-s)));*/ /*}*/ /*body:not(.home) main > .wp-block-cover:first-child > img {*/ /* position: relative;*/ /* width: 100%;*/ /* height: 100%;*/ /* -o-object-fit: cover;*/ /* object-fit: cover;*/ /* max-height: 30vh;*/ /*}*/ /*@media (min-width: 1000px) {*/ /* body:not(.home) main > .wp-block-cover:first-child > img {*/ /* grid-row: 1;*/ /* grid-column: 1 / span 2;*/ /* max-height: 60vh;*/ /* }*/ /*}*/ /*body:not(.home) main > .wp-block-cover:first-child h1 strong,*/ /*body:not(.home) main > .wp-block-cover:first-child h1 table th,*/ /*table body:not(.home) main > .wp-block-cover:first-child h1 th,*/ /*body:not(.home) main > .wp-block-cover:first-child h1 table tfoot td,*/ /*table tfoot body:not(.home) main > .wp-block-cover:first-child h1 td,*/ /*body:not(.home) main > .wp-block-cover:first-child h1 blockquote cite,*/ /*blockquote body:not(.home) main > .wp-block-cover:first-child h1 cite,*/ /*body:not(.home) main > .wp-block-cover:first-child h1 ol ol li::marker,*/ /*body:not(.home) main > .wp-block-cover:first-child ol ol h1 li::marker,*/ /*body:not(.home) main > .wp-block-cover:first-child h1 ol > li::marker,*/ /*body:not(.home) main > .wp-block-cover:first-child h1 ul li::marker,*/ /*body:not(.home) main > .wp-block-cover:first-child ul h1 li::marker,*/ /*body:not(.home) main > .wp-block-cover:first-child h1 .landing_intro h4 + .wp-block-group p:first-child,*/ /*.landing_intro h4 + .wp-block-group body:not(.home) main > .wp-block-cover:first-child h1 p:first-child,*/ /*body:not(.home) main > .wp-block-cover:first-child h1 .distributors [data-collapsed-trigger],*/ /*.distributors body:not(.home) main > .wp-block-cover:first-child h1 [data-collapsed-trigger],*/ /*body:not(.home) main > .wp-block-cover:first-child h1 .all_caps,*/ /*body:not(.home) main > .wp-block-cover:first-child h1 ul.short a,*/ /*ul.short body:not(.home) main > .wp-block-cover:first-child h1 a {*/ /* color: hsl(55, 93%, 55%);*/ /*}*/ /*body:not(.home) main > .wp-block-cover:first-child h1 + p {*/ /* margin-top: var(--space-s);*/ /*}*/ /*body:not(.home) main > .wp-block-cover:first-child p {*/ /* max-width: 50ch;*/ /*}*/ .cta { color: hsl(358, 85%, 52%); padding-bottom: 20px; } .cta div:first-child { line-height: 1.4; max-width: 30ch; } .cta > * { display: block; } .cta:has(+ *) { margin-bottom: var(--space-xl); } .cta.fixed { position: fixed; bottom: 0; left: 50%; margin: 0; transform: translate(-50%, 100%); z-index: 2; } .cta.fixed[data-active="1"] { transform: translate(-50%, 0); } .cta.fixed a { display: block; margin: 0; border-radius: 0; border-start-end-radius: 1.5em; transition: padding-top 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98), background-color 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); overflow: hidden; } .cta.fixed a [role="presentation"] { top: auto; bottom: 0.9em; transform: none; } .cta.fixed a:hover { padding-top: 1em; padding-right: 3em; background-color: hsl(358, 85%, 46%); } .distributors { margin-block: var(--space-xl); } @media (min-width: 750px) { .distributors { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl) var(--space-l); } } .distributors [data-collapsed-trigger] { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: var(--space-2xs); padding: var(--space-xs); background-color: hsl(0, 0%, 90%); text-transform: uppercase; } .distributors [data-collapsed-trigger] span { display: block; } .distributors [data-collapsed] { margin-bottom: 2px; } .distributors [data-collapsed] > div:last-child { overflow: hidden; transition: height 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98), padding-block 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); padding: var(--space-s); padding-bottom: var(--space-m); } .ports { font-weight: 500; } @media (min-width: 1000px) { .page-id-259 main > .wp-block-columns { grid-template-columns: repeat(3, 1fr) !important; } .page-id-259 main > .wp-block-columns > div:first-child { grid-column: 1 / span 2; } } .divide_marker { width: 0.9em; height: 0.9em; display: flex; justify-content: center; gap: 2px; } .divide_marker div { height: 0.9em; width: 3px; border-radius: 2px; background-color: hsl(358, 85%, 52%); } .wp-block-cover .divide_marker div { background-color: hsl(0, 100%, 100%); } .downloads { max-width: 2000px; padding-inline: var(--space-m); } @media (width > 1000px) { .downloads { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); } } @media (width < 1000px) { .downloads > div { margin-bottom: var(--space-l); } } .events { max-width: 2000px; padding-inline: var(--space-m); } @media (min-width: 750px) { .events { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xs); } } @media (min-width: 1000px) { .events { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; } } .events > div { padding: var(--space-m); background-color: hsl(0, 100%, 100%); border-top: 4px solid hsl(358, 85%, 52%); } @media (width < 1000px) { .events > div { margin-bottom: var(--space-2xs); } } .events .message { color: hsl(358, 85%, 52%); } .events svg { margin-right: var(--space-3xs); } .events h4, .events h5 { font-size: var(--step-0); margin-bottom: 0.2em; } body { font-size: inherit !important; } body > footer { display: flex; flex-direction: column; align-items: center; font-size: var(--step--1); background-color: hsl(0, 100%, 100%); margin-top: var(--space-3xl); padding-block: var(--space-m) var(--space-2xl); } body.single-product > footer{ margin-top: 0px; } @media (min-width: 1600px) { body > footer { font-size: var(--step--2); } } @media (max-width: 1000px) { body > footer { margin-top: var(--space-xl); } } body > footer > div { display: flex; flex-direction: column; margin-bottom: var(--space-s); align-items: center; gap: var(--space-m); } body > footer > div:last-child { flex-direction: row; gap: var(--space-m); } body > footer > p { line-height: 1.4; opacity: 0.5; } body > footer > div, body > footer > p, body > footer > a { max-width: 2000px; padding-inline: var(--space-m); } body > footer .group_logo, body > footer .iso9001, body > footer .iso14001{ display: inline-block; opacity: 0.6; transition: opacity 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } body > footer .group_logo:hover, body > footer .iso9001:hover, body > footer .iso14001:hover { opacity: 1; } body > footer .group_logo img, body > footer .iso9001 img { width: 180px; } body > footer .iso14001 img { width: 150px; } body > footer .logo-gptw > img { width: 80px; transform: translateY(15px); } input:not([type="submit"]) { background-color: hsl(0, 100%, 100%); } .hbspt-form { padding-inline: var(--space-m); } body > header { display: flex; position: relative; background-color: hsl(0, 100%, 100%); z-index: 90; } body > header a.logo { width: clamp(80px, 100%, 320px); margin: var(--space-s); margin-top: var(--space-xl); } body > header > div:first-of-type { display: flex; align-items: end; } @media (min-width: 1000px) { body > header > div:first-of-type { max-width: 35%; } } body > header a svg { width: 100%; height: auto; } body > header a img { height: auto; } body > header > nav > .divide_marker { margin: var(--space-l) auto; margin-left: var(--space-m); } body > header > nav > .divide_marker div { background-color: hsl(0, 100%, 100%); } @media (min-width: 1000px) { body > header > nav > .divide_marker { display: none; } } @media (min-width: 1000px) { body > header { justify-content: space-between; position: sticky; top: 0; transition: background-color 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98), box-shadow 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } body > header.fixed { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 99; background-color: hsl(0, 100%, 100%); } } @media (min-width: 1000px) { body.admin-bar > header { top: 30px; } } body > header .logo-gptw > img { width: 80px; max-height: 100%; margin: var(--space-s); } @media (max-width: 1279px) { body > header .logo-gptw { display: none; } } .flickity-enabled { padding-top: var(--space-l); } @media (max-width: 1000px) { .flickity-enabled { margin-inline: var(--space-m); margin-top: var(--space-l); } } .flickity-enabled .flickity-viewport { font-family: "finalsix", sans-serif; font-weight: 800; } .flickity-enabled .flickity-page-dots { position: absolute; top: 0; left: 0; width: auto; transform: translateX(calc(-1 * var(--space-3xs))); } .flickity-enabled .dot { background-color: hsl(0, 0%, 38%); margin-inline: var(--space-3xs); padding: 0; } .flickity-enabled .dot.is-selected { background-color: hsl(358, 85%, 52%); } .home main > header { display: none; } .home_cover { max-width: 2000px; } @media (max-width: 1000px) { .home_cover { margin-top: 0; } } @media (min-width: 1000px) { .home_cover > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(16, 1fr); gap: var(--space-m); padding-inline: var(--space-m); } } .home_cover .wp-block-group { color: hsl(358, 85%, 52%); } @media (min-width: 1000px) { .home_cover .wp-block-group { grid-column: 1 / span 3; grid-row: 1; padding-right: var(--space-xl); } } .home_cover .wp-block-cover { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: min(26em, 55vh); overflow: hidden; border-radius: 0 3em 0 0; } .home_cover .wp-block-cover .wp-block-buttons { margin-bottom: var(--space-2xs); } .home_cover .wp-block-cover h1 { font-size: var(--step-2); } .home_cover .wp-block-cover h2 { font-size: var(--step-1); } @media (min-width: 1000px) { .home_cover .wp-block-cover { grid-column: 4 / span 13; } } .home_cover .wp-block-cover:after { content: ""; position: absolute; inset: 0; background-color: rgba(51, 51, 51, 0.4); background: linear-gradient(0deg, rgb(80, 17, 19) 0%, rgba(80, 17, 19, 0) 100%); background-repeat: no-repeat; background-position: 0 80px; z-index: 1; transition: background-position 0.6s cubic-bezier(0.33, 0.24, 0.31, 0.98), opacity 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .home_cover .wp-block-cover img { transition: transform 0.6s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .home_cover .wp-block-cover:hover img { transform: scale(1.03) rotate(0.5deg); } .home_cover .wp-block-cover:hover:after { background-position: 0 0; } .home_cover:has(.wp-block-cover + .wp-block-cover) .wp-block-cover:nth-child(1) { border-radius: 0; } @media (max-width: 1000px) { .home_cover:has(.wp-block-cover + .wp-block-cover) .wp-block-cover:nth-child(1) { margin-bottom: var(--space-m); } } @media (min-width: 1000px) { .home_cover:has(.wp-block-cover + .wp-block-cover) .wp-block-cover:nth-child(1) { grid-column: 4 / span 9; } } @media (max-width: 1000px) { .home_cover:has(.wp-block-cover + .wp-block-cover) .wp-block-cover:nth-child(2) { margin-inline: var(--space-m); } } @media (min-width: 1000px) { .home_cover:has(.wp-block-cover + .wp-block-cover) .wp-block-cover:nth-child(2) { grid-column: 13 / span 4; border-radius: 0 3em 0 0; } } .home_cover img, .home_cover .wp-block-cover__inner-container { position: absolute; inset: 0; } .home_cover img { -o-object-fit: cover; object-fit: cover; } .home_cover .wp-block-cover__inner-container { position: relative; padding: var(--space-m); color: hsl(0, 100%, 100%); z-index: 2; } .home main > .wp-block-columns.feat { max-width: 2000px; } @media (min-width: 1000px) { .home main > .wp-block-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } } .home h4 { position: relative; font-size: var(--step--1); margin-bottom: var(--space-m); } /*@media (max-width: 1000px) {*/ /* .home h4 {*/ /* margin-top: var(--space-2xl);*/ /* }*/ /*}*/ .home h4:has(span) span { position: relative; background-color: hsl(0, 0%, 96%); padding-right: var(--space-2xs); z-index: 2; font-weight: 800; } .home h4:has(span):after { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 3px; background-color: hsl(358, 85%, 52%); z-index: 1; } .home .markets { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-m); } .home .markets:hover a { opacity: 0.8; } @media (min-width: 1000px) { .home .markets { grid-template-columns: repeat(3, 1fr); } } .home .markets a { text-decoration: none; transition: opacity 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .home .markets a:hover { opacity: 1; } @media (min-width: 1000px) { .home .markets a:nth-child(1) { grid-column: 1 / span 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); } } @media (min-width: 1000px) { .home .markets a:nth-child(1) figure { grid-column: 1 / span 2; } } .home .markets figure { aspect-ratio: 16/10; } .home .markets figure img { -o-object-fit: cover; object-fit: cover; } .home .markets h2 { font-size: var(--step-0); line-height: 1.6; font-weight: 800; } .home .markets h2 { margin-bottom: 0; color: hsl(358, 85%, 52%); } .home .ab { display: flex; flex-direction: column; justify-content: flex-start; text-align: center; } .home .ab .wp-block-group { padding-block: var(--space-2xl); } .home .ab p { font-family: "finalsix", sans-serif; padding-inline: var(--space-xl); font-size: var(--step-0); line-height: 1.6; font-weight: 800; } .home .ab .wp-block-button { margin-top: var(--space-xl); } .home .wp-block-columns.supporting_logos { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-l); flex-direction: row; gap: 20px; } @media (min-width: 1000px) { .home .wp-block-columns.supporting_logos { padding-inline: var(--space-2xl); } } .home .wp-block-columns.supporting_logos .wp-block-column { min-width: auto; border-radius: 0; width: 20%; max-width: 45%; } .home .wp-block-columns.supporting_logos img { -o-object-fit: contain; object-fit: contain; mix-blend-mode: multiply; } .uk_only { display: block; margin-block: var(--space-m); text-align: center; border-color: green; } .not_uk__rough .uk_only { border: 4px solid yellow; } .not_uk__rough .uk_only:after { content: "Displaying currently for testing and review purposes, will be hidden before we go live."; display: block; line-height: 1.3; max-width: 40ch; margin: var(--space-m) auto; color: red; } .landing_2_by_2 { position: relative; max-width: none; width: 100%; background: rgb(184, 214, 225); background: linear-gradient(47deg, rgb(110, 133, 146) 0%, rgb(56, 73, 88) 100%); color: hsl(0, 100%, 100%); padding-block: var(--space-xl); padding-top: 35vw; margin-block: var(--space-2xl); } @media (min-width: 1000px) { .landing_2_by_2 { padding-top: clamp(10px, 12vw, 240px); } } @media (min-width: 1000px) { .landing_2_by_2 h4 { max-width: 30ch; } } .landing_2_by_2 > div { max-width: min(100vw - (var(--space-l)), 1400px); margin-inline: auto; } @media (min-width: 1000px) { .landing_2_by_2 > div { max-width: min(100vw - (var(--space-3xl)), 1400px); } } .landing_2_by_2 .wp-block-columns { position: relative; padding: 0; margin: 0; z-index: 2; } .landing_2_by_2 .wp-block-columns:has(> :nth-child(2).wp-block-column) { display: block; } @media (min-width: 1000px) { .landing_2_by_2 .wp-block-columns:has(> :nth-child(2).wp-block-column) { display: grid; gap: var(--space-xl) var(--space-l); grid-template-columns: repeat(2, 1fr); } } .landing_2_by_2 .wp-block-column { display: grid; grid-template-columns: 90px 1fr; gap: var(--space-s); } .landing_2_by_2 .wp-block-column .wp-block-group { padding: 0; padding-top: 0.6em; background-color: transparent; color: inherit; font-weight: 300; } .landing_2_by_2 .wp-block-column figure { background-color: hsl(0, 100%, 100%); border-radius: 50%; aspect-ratio: 1; } .landing_2_by_2 > div > figure { position: absolute; top: 0; right: 0; left: 20%; max-width: none; margin: 0; pointer-events: none; overflow: hidden; z-index: 1; } @media (min-width: 1000px) { .landing_2_by_2 > div > figure { left: 50%; } } .landing_2_by_2 > div > figure img { width: 120%; max-width: 1200px; } .landing_2_by_2 > div > figure:last-child { transform: translateY(-50%); } .landing_columns { text-align: center; } .landing_columns > div { max-width: min(100vw - (var(--space-s)), 2600px); margin-inline: auto; } @media (min-width: 1000px) { .landing_columns > div { max-width: min(100vw - (var(--space-l)), 2600px); } } .landing_columns h2, .landing_columns h3, .landing_columns h4 { color: hsl(358, 85%, 52%); } .landing_columns:has(.wp-block-column:nth-child(6)) { max-width: 130rem; margin-block: var(--space-2xl); margin-inline: auto; } .landing_columns:has(.wp-block-column:nth-child(6)) .wp-block-columns { overflow: visible; gap: var(--space-l); grid-template-columns: repeat(2, 1fr); } @media (min-width: 1000px) { .landing_columns:has(.wp-block-column:nth-child(6)) .wp-block-columns { grid-template-columns: repeat(6, 1fr); } } .landing_columns:has(.wp-block-column:nth-child(6)) .wp-block-columns .wp-block-column { min-width: 0; width: auto; text-align: center; } .landing_columns:has(.wp-block-column:nth-child(6)) .wp-block-columns figure { background-color: hsl(358, 85%, 52%); border-radius: 50%; width: 90px; margin: 0 auto var(--space-m); } .landing_columns h4 { padding-inline: var(--space-m); } .landing_columns .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(1) { padding: 0; color: inherit; } .landing_columns .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(1):after { display: none; } .landing_intro { max-width: min(100vw - (var(--space-l)), 1400px); max-width: min(100vw - (var(--space-l)), 1400px); margin-inline: auto; } @media (min-width: 1000px) { .landing_intro { max-width: min(100vw - (var(--space-3xl)), 1400px); } } .landing_intro > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-l); } @media (min-width: 1000px) { .landing_intro > div { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); } } .landing_intro .wp-block-columns { padding-inline: 0; } .landing_intro .wp-block-columns:has(> .wp-block-column > figure:first-child:last-child) .wp-block-column { justify-content: flex-start; } .landing_intro .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(1) { padding: 0; color: inherit; justify-content: flex-start; } .landing_intro .wp-block-columns:has(> :nth-child(3).wp-block-column):not(:has(:nth-child(4).wp-block-column)) .wp-block-column:nth-child(1):after { display: none; } .landing_intro h4 { position: relative; color: hsl(358, 85%, 52%); padding-top: var(--space-3xl); grid-column: 1/3; margin: 0; } @media (min-width: 1000px) { .landing_intro h4 { grid-column: 1/3; } } .landing_intro h4:after { content: ""; display: block; position: absolute; top: 0; width: 5ch; height: 30px; border-radius: 0 0 var(--space-l) 0; background-color: hsl(358, 85%, 52%); } .landing_intro h4 + .wp-block-group { grid-column: 1/3; } @media (min-width: 1000px) { .landing_intro h4 + .wp-block-group { grid-column: auto; } } .landing_intro h4 + .wp-block-group p:first-child { color: hsl(358, 85%, 52%); } .landing_intro .wp-block-group { grid-column: 1/2; } @media (min-width: 1000px) { .landing_intro .wp-block-group { grid-column: auto; } } .landing_intro .wp-block-group > div > *:last-child { margin-bottom: 0; } .landing_intro .wp-block-group h5:first-child, .landing_intro .wp-block-group h6:first-child { margin-top: 0.4em; } .landing_intro .wp-block-group:last-child { grid-column: 1/3; } .landing_intro figure { margin: 0; } .landing_intro figure img { -o-object-fit: cover; object-fit: cover; -o-object-position: top left; object-position: top left; } @media (max-width: 1000px) { .landing_intro figure { margin-right: calc(-1 * var(--space-m)); } } @media (min-width: 1000px) { .landing_intro figure { grid-column: 3/3; grid-row: 1/3; } } .landing_table { max-width: 2000px; background: rgb(184, 214, 225); background: linear-gradient(47deg, rgb(110, 133, 146) 0%, rgb(56, 73, 88) 100%); color: hsl(0, 100%, 100%); margin-block: var(--space-2xl); padding: var(--space-m); } @media (width < 1000px) { .landing_table { margin-bottom: 12em; } } @media (width > 1000px) { .landing_table { margin-inline: var(--space-m); padding: var(--space-xl); } } @media (width > 2000px) { .landing_table { margin-inline: auto; } } @media (width > 1000px) { .landing_table > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-l); } } .landing_table > div .wp-block-group { position: relative; } @media (width > 1000px) { .landing_table > div .wp-block-group { grid-column: 1/3; } } .landing_table table { background: transparent; } .landing_table table th { background: transparent; border-top: 0 none; border-right: 0 none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-left: 0 none; text-transform: uppercase; } .landing_table table td { border-top: 1px solid rgba(255, 255, 255, 0.2); border-right: 0 none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-left: 0 none; } .landing_table table tr:first-child td { border-top: 0 none; } .landing_table table tr:last-child td { border-bottom: 0 none; } .landing_table .wp-block-table { max-width: none; margin-left: -0.8em; margin-bottom: 0; } .landing_table .wp-block-table + .wp-block-group { position: absolute; display: flex; right: 0; bottom: 0; align-items: center; padding: var(--space-m); width: 12em; height: 12em; background-color: hsl(358, 85%, 52%); border-radius: 50%; text-align: center; transform: translate(80%, 40%); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } @media (width < 1000px) { .landing_table .wp-block-table + .wp-block-group { transform: translate(0%, 100%); } } .landing_table .wp-block-table + .wp-block-group p { margin: 0; text-transform: uppercase; font-family: "finalsix", sans-serif; text-wrap: balance; } .landing_table .wp-block-image { margin: 0 calc(-1 * var(--space-xl)); margin-left: 0; } .landing_table .wp-block-image img { -o-object-fit: cover; object-fit: cover; width: 100%; height: auto; } @media (width < 1000px) { .landing_table .wp-block-image { display: none; } } a { text-decoration: underline; } a.block { display: block; } main a[role="button"], .promo a[role="button"] { position: relative; display: inline-block; background-color: hsl(358, 85%, 52%); color: hsl(0, 100%, 100%); border-radius: 0 0 1.5em 0; padding: 0.6em 0.8em; padding-right: 3em; text-decoration: none; text-transform: uppercase; font-family: "finalsix", sans-serif; font-weight: 800; text-transform: uppercase; font-size: var(--step-1); margin-block: var(--space-2xs); transition: padding-right 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); line-height: 1.5; } main a[role="button"] [role="presentation"], .promo a[role="button"] [role="presentation"] { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 0.9em; height: 0.9em; display: flex; flex-direction: column; justify-content: center; gap: 0.16em; } main a[role="button"] [role="presentation"] div, .promo a[role="button"] [role="presentation"] div { height: 3px; width: 0.9em; border-radius: 2px 0 0 2px; background-color: hsl(0, 100%, 100%); } main a[role="button"]:hover, .promo a[role="button"]:hover { padding-right: 4em; } .wp-block-button__link { position: relative; text-decoration: none; background-color: hsl(0, 0%, 20%); color: hsl(0, 100%, 100%); padding: 0.6em 0.8em; font-family: "finalsix", sans-serif; text-transform: uppercase; font-weight: 800; padding-right: 4em; border-radius: 1.5rem 1.5rem 0 1.5rem ; transition: padding-right 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .wp-block-button__link:after { content: ""; position: absolute; top: 50%; right: var(--space-s); width: 1em; height: 1em; background-image: url(../images/icon-arrow.svg); transform: translateY(-48%); z-index: 1; } .wp-block-button__link:hover { padding-right: 5em; } .home .wp-block-cover .wp-block-button__link, .home .long .wp-block-button__link { background-color: hsl(358, 85%, 52%); } .long .wp-block-button__link { display: flex; flex-direction: column; justify-content: center; padding: 0.9em 1.5em; padding-right: 4em; font-size: var(--step-1); line-height: 1.2; text-align: left; } .long .wp-block-button__link em { display: block; font-style: normal; font-family: "roboto", sans-serif; text-transform: none; font-weight: 300; font-size: var(--step--1); line-height: 1.4; opacity: 0.8; margin-top: var(--space-2xs); } .long .wp-block-button__link:after { right: var(--space-m); transition: right 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .long .wp-block-button__link:hover:after { right: var(--space-s); } .transparent .wp-block-button__link { background-color: transparent; margin-left: -0.8em; font-size: var(--step--2); text-transform: uppercase; } .wp-block-button.primary .wp-block-button__link { display: inline-block; background-color: hsl(358, 85%, 52%); overflow: hidden; font-size: var(--step-1); } .wp-block-button.primary .wp-block-button__link:after { right: 0; background-image: url(../images/icon-lines.svg); transform: translate(20%, -48%); } @media (max-width: 1000px) { .scrollBtns { display: flex; flex-direction: row; width: 100%; justify-content: center; } .scrollBtns div { width: 3em; height: 3em; cursor: pointer; background-color: hsl(0, 0%, 90%); border-radius: 100%; padding: 0.5em; transition: background-color 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .scrollBtns div:hover { background-color: hsl(0, 0%, 85%); } .scrollBtns div svg { width: 100%; height: 100%; transform: translateX(4%); } .scrollBtns div svg path { fill: #fff; } } @media (min-width: 1000px) { .scrollBtns { display: flex; justify-content: flex-end; gap: var(--space-s); max-width: 2000px; padding-inline: var(--space-l); margin-inline: auto; } .scrollBtns div { width: 3em; height: 3em; cursor: pointer; background-color: hsl(0, 0%, 90%); border-radius: 100%; padding: 0.5em; transition: background-color 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .scrollBtns div:hover { background-color: hsl(0, 0%, 85%); } .scrollBtns div svg { width: 100%; height: 100%; transform: translateX(4%); } .scrollBtns div svg path { fill: #fff; } } .wp-block-columns + .scrollBtns { margin-top: calc(-1 * var(--space-2xl)); margin-bottom: var(--space-2xl); } main ul ul, main ol ol { margin-inline-start: var(--space-2xs); } main ul ul ul ul, main ul ul ol ol, main ol ol ul ul, main ol ol ol ol { margin-inline-start: -var(--space-2xs); } main ul { list-style: none; margin-top: 0; padding-left: var(--space-m); } main ul li { padding-inline-start: var(--space-2xs); margin: 0 0 .5rem; } main ul li::marker { content: "⚎"; color: hsl(358, 85%, 52%); } main ul ul { margin-inline-start: 0; } main ol { list-style: none; counter-reset: eg-counter; padding-left: var(--space-m); } main ol li { padding-inline-start: var(--space-2xs); margin: 0 0 .5rem; } main ol > li { counter-increment: eg-counter; } main ol > li::marker { content: counter(eg-counter); text-align: left; } main ol ol { margin-inline-start: 0; list-style: lower-alpha; } main ol ol li::marker { content: counter(eg-counter, lower-alpha); } main li { margin-block-end: var(--space-s); } main li li:first-child { margin-block-start: var(--space-s); } main ol li { margin-inline-start: var(--space-2xs); } main ul li { margin-inline-start: var(--space-xs); } main > ul > li:last-child { margin-block-end: var(--space-m); } ul.short { list-style: none; } #map { height: 100%; width: 100%; max-width: min(100vw - (var(--space-l)), 1400px); height: 66vh; margin: 0 auto; } .map_item { position: relative; align-items: center; background-color: hsl(358, 85%, 52%); border-radius: 50%; border-top-right-radius: 0; color: #263238; display: flex; font-size: 14px; gap: 15px; height: 60px; justify-content: center; padding: 4px; transition: all 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); box-shadow: inset -2px 2px 0 0 hsl(358, 85%, 42%); width: 60px; } .map_item:after { border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 18px solid hsl(358, 85%, 52%); content: ""; height: 0; left: 50%; position: absolute; top: 90%; transform: translate(-50%, 0); transition: all 0.3s ease-out; width: 0; z-index: 1; } .map_item .icon svg { height: 36px; width: auto; } .map_item:has(.port) { width: 40px; height: 40px; background-color: hsl(0, 0%, 38%); box-shadow: inset -2px 2px 0 0 hsl(0, 0%, 28%); } .map_item:has(.port):before { width: 16px; height: 4px; } .map_item:has(.port):after { border-left-width: 12px; border-right-width: 12px; border-top-width: 12px; border-top-color: hsl(0, 0%, 38%); } .map_item:has(.port) .icon svg { height: 24px; width: auto; } .map_item .icon { align-items: center; display: flex; justify-content: center; color: #ffffff; } .map_item .name { font-family: "finalsix", sans-serif; text-transform: uppercase; font-weight: 800; font-size: 20px; line-height: 1.2; padding-right: 1em; } .map_item .country { display: inline-block; margin-bottom: var(--space-2xs); } .map_item .country:empty { display: none; } .map_item .details { display: none; flex-direction: column; gap: var(--space-3xs); align-items: flex-start; padding: var(--space-2xs); min-width: 10em; flex: 1; } .map_item .details:before { content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background-color: hsl(358, 85%, 52%); background-image: url(../images/icon-cross.svg); background-position: 50% 50%; background-repeat: no-repeat; background-size: 60%; } .map_item .details a { display: flex; align-items: flex-start; gap: var(--space-2xs); text-decoration: none; max-width: 40ch; font-size: 12px; line-height: 1.4; } .map_item .details a:has(span:empty) { display: none; } .map_item .details svg { width: 20px; flex-shrink: 0; transform: translateY(-2px); } .map_item .details svg path { fill: hsl(0, 0%, 20%); } .map_item.highlight { background-color: #ffffff; border-radius: 8px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); height: auto; padding: 8px 15px; width: auto; } .map_item.highlight:after { border-top-color: #ffffff; top: 97%; } .map_item.highlight .details { display: flex; } .map_item.highlight .icon { display: none; } .map_key { display: flex; justify-content: flex-start; align-items: center; gap: var(--space-m); background-color: hsl(0, 0%, 90%); padding: var(--space-2xs); max-width: min(100vw - (var(--space-l)), 1400px); } .map_key li { display: flex; align-items: center; gap: var(--space-3xs); margin: 0; padding: 0; } .map_key li:last-child { margin: 0; } .map_key li::marker { content: ""; } .map_key img { width: 2em; height: 2em; } @media (max-width: 1000px) { .wp-block-cover:has(+ #map) .wp-block-cover__inner-container { border-radius: 0; } } img, iframe, video { width: 100%; height: auto; vertical-align: middle; } img { height: 100%; } iframe { aspect-ratio: 16/9; } figure .layer_noise { position: absolute; inset: 0; background-image: url(https://grainy-gradients.vercel.app/noise.svg); opacity: 0.6; margin: 0; } main figure { max-width: 45rem; margin-inline: auto; margin-block: var(--space-m); } .wp-block-column figure:first-child { margin-block-start: 0; } figure:only-child { width: 100%; height: 100%; } figure:only-child img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } figure.alignright { text-align: right; } figcaption { position: relative; background-color: hsl(0, 0%, 90%); padding: calc(var(--space-xs) * 0.75) var(--space-xs); z-index: 2; } svg { width: 1em; vertical-align: middle; } svg.clip_path { width: 0; height: 0; } figure.line { position: relative; } figure.line:after { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 20px; background-color: hsl(358, 85%, 52%); z-index: 2; } @media (max-width: 1000px) { body > footer nav { display: none; } } @media (min-width: 1000px) { body > footer nav ul { display: flex; } } .nav_mini { position: fixed; top: var(--space-l); right: 0; transform: translate(0, 25%); z-index: 100; } @media screen and (min-width: 1000px) { .nav_mini { display: none; } } .nav_mini:after { content: ""; position: absolute; inset: 0; border-radius: var(--space-m) 0 0 0; background-color: hsl(358, 85%, 52%); z-index: -1; pointer-events: none; transition: background-color 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .nav_open .nav_mini:after { background-color: hsl(358, 85%, 32%); } .nav_mini .persistent { display: flex; align-items: center; padding-inline: var(--space-xs); } .nav_mini .persistent:has(> a) { padding-left: 0; } .nav_mini .persistent > a { padding-inline: var(--space-s); } .nav_control { position: relative; font: 0/0 a; color: transparent; width: var(--space-xl); height: var(--space-xl); } .nav_control [role="presentation"] { position: absolute; inset: 0; } .nav_control [role="presentation"] span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: var(--space-m); height: var(--space-3xs); border-radius: 5px; background-color: hsl(0, 100%, 100%); transition: transform 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .nav_control [role="presentation"] span:nth-child(1) { transform: translate(-50%, -250%); } .nav_control [role="presentation"] span:nth-child(2) { transform: translate(-50%, 150%); } .nav_open .nav_control [role="presentation"] span { transform: translate(-50%, -50%) rotate(45deg); } .nav_open .nav_control [role="presentation"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(-45deg); } .nav_open .nav_control [role="presentation"] span:nth-child(2) { opacity: 0; } nav > .social { display: flex; justify-content: flex-start; gap: var(--space-xs); } @media (width < 1000px) { nav > .social { margin-left: var(--space-xs); margin-bottom: var(--space-xl); } } nav > .social a { padding-inline: 0.6em; } nav > .social svg { width: 1.5em; height: 1.5em; } nav > .social svg path, nav > .social svg circle { fill: hsl(0, 100%, 100%); } @media (min-width: 1000px) { nav > .social svg path, nav > .social svg circle { fill: hsl(0, 0%, 20%); } } main nav > .social { justify-content: flex-start; } main nav > .social li { margin: 0; padding: 0; } main nav > .social li::marker { content: ""; } main nav > .social a { margin: 0; padding: var(--space-3xs) var(--space-2xs); border-radius: 0; background-color: hsl(358, 85%, 52%); transition: background-color 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } main nav > .social a svg { width: 1em; height: 1em; vertical-align: middle; transform: translateY(-8%); } main nav > .social a path, main nav > .social a circle { fill: hsl(0, 100%, 100%); } main nav > .social a:hover { padding-right: var(--space-2xs); background-color: hsl(358, 85%, 47%); } body.nav_open, body.gallery_open { margin: 0; height: 100%; overflow: hidden; } nav { position: relative; } @media (width < 1000px) { nav { overflow-y: scroll; } } nav a { display: flex; justify-content: flex-start; align-items: center; text-transform: uppercase; text-decoration: none; color: hsl(0, 100%, 100%); font-family: "finalsix", sans-serif; font-weight: 800; line-height: 1.2; padding-block: var(--space-3xs); padding-left: var(--space-m); } nav a[data-post-title*="home"] div:not([role="presentation"]) { width: 0; overflow-x: hidden; } nav a[data-post-title="[[cta]]"] { position: relative; background-color: hsl(0, 100%, 100%); color: hsl(358, 85%, 52%); display: inline-block; padding: 0.6em 0.8em; padding-right: var(--space-l); border-radius: 0 0 1em 0; margin-left: var(--space-xs); } @media (max-width: 1000px) { nav a[data-post-title="[[cta]]"] { margin-bottom: var(--space-s); margin-top: var(--space-s); position: relative; left: var(--space-s); } } @media (min-width: 1000px) { nav a[data-post-title="[[cta]]"] { background-color: hsl(358, 85%, 52%); color: hsl(0, 100%, 100%); padding-right: var(--space-m); padding-top: 1em; transition: padding-bottom 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } nav a[data-post-title="[[cta]]"]:hover { padding-bottom: 1em; } } nav a[data-post-title="[[cta]]"] [role="presenation"] { display: flex; position: absolute; top: 50%; right: -2px; transform: translateY(-50%) rotate(90deg); } @media (min-width: 1000px) { nav a[data-post-title="[[cta]]"] [role="presenation"] { top: 1em; transform: rotate(90deg); } } nav a[data-post-title="[[cta]]"] [role="presenation"] div { background-color: hsl(358, 85%, 52%); border-radius: 2px 0 0 2px; width: 2px; height: 1em; } @media (min-width: 1000px) { nav a[data-post-title="[[cta]]"] [role="presenation"] div { background-color: hsl(0, 100%, 100%); } } nav a [role="presentation"] svg { width: 100%; height: 100%; vertical-align: top; transition: transform 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } nav a [role="presentation"] path, nav a [role="presentation"] circle { fill: hsl(0, 100%, 100%); stroke-width: 0; } @media (min-width: 1000px) { nav a [role="presentation"] path, nav a [role="presentation"] circle { fill: hsl(0, 0%, 20%); } } nav a [role="presentation"]:first-child { width: 1.7em; height: 1.7em; margin-block: -1.7em; margin-right: var(--space-3xs); margin-left: -4px; } nav a [role="presentation"]:last-child { width: 1em; height: 1em; display: none; margin-left: var(--space-3xs); } nav a [role="presentation"]:last-child svg { transform: rotate(90deg); } @media (min-width: 1000px) and (max-width: 1400px) { nav a { font-size: var(--step--1); } } @media (min-width: 1000px) { nav a { color: hsl(0, 0%, 20%); padding-inline: var(--space-xs); } } nav li:has(ul) > a [role="presentation"]:last-child { display: inline-block; } @media (min-width: 1000px) { nav > ul > li { position: relative; } } nav ul ul { height: 0; overflow-y: hidden; transition: height 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98), padding-bottom 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } nav ul ul a { font-size: var(--step--1); font-weight: 400; } @media (min-width: 1600px) { nav ul ul a { font-size: var(--step--2); } } @media (max-width: 1000px) { nav ul ul a { opacity: 0.8; padding-block: 0.4em; } } @media (min-width: 1000px) { nav ul ul { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 0; } nav ul ul a { font-family: "roboto", sans-serif; min-width: -moz-max-content; min-width: max-content; padding-block: 0.4em; background-color: hsl(0, 0%, 20%); color: hsl(0, 100%, 100%); transition: background-color 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); justify-content: center; } nav ul ul a:hover { background-color: hsl(0, 0%, 15%); } nav ul ul li:first-child a { padding-top: 0.8em; } nav ul ul li:last-child a { border-radius: 0 0 1em 0; padding-bottom: 0.8em; } } nav ul li:has(ul):hover ul { height: auto; } @media (max-width: 1000px) { nav ul li:has(ul):hover ul { padding-bottom: var(--space-m); } } nav ul li:has(ul):hover [role="presentation"]:last-child svg { transform: rotate(-90deg); } header nav { position: fixed; inset: 0; display: flex; flex-direction: column; background-color: hsl(358, 85%, 52%); z-index: 99; transform: translate(-100%, 0); clip-path: url(#svg_clip_nav); } @media (max-width: 1000px) { header nav { padding-block: var(--space-l); } } @media (min-width: 1000px) { header nav { position: relative; justify-content: space-between; align-items: flex-end; margin-right: var(--space-m); transform: translate(0, 0); background-color: transparent; clip-path: none; } } @media (max-width: 1000px) { header nav a { padding-block: 0.6em; } } @media (min-width: 1000px) { header nav > ul > li > a { padding-block: 1em; } } .nav_open header nav { transform: translate(0, 0); } @media (min-width: 1000px) { header nav > ul { display: flex; justify-content: flex-end; order: 2; } } @media (max-width: 1000px) { header nav > ul.utility { margin-top: var(--space-m); } } @media (min-width: 1000px) { header nav > ul.utility { order: 1; } header nav > ul.utility a { font-family: "roboto", sans-serif; font-size: var(--step--1); } } @media (min-width: 1600px) { header nav > ul.utility a { font-size: var(--step--2); } } @media (min-width: 1000px) { header nav > ul.footer, header nav > ul.social { display: none; } } @media (max-width: 1000px) { header nav > ul.utility li .menu-icon{ display: none; } nav a[data-post-title*="home"] div:not([role="presentation"]){ width: auto; } body > header > nav > .divide_marker{ display: none; } } @media (min-width: 1000px) { .single-case-study header nav > ul > li a[data-post-title="case_studies"], .single-post header nav > ul > li a[data-post-title="blog"], .single-product header nav > ul > li a[data-post-title="products"], header nav > ul > li:has([aria-current="page"]:not([data-post-title="[[cta]]"])) > a { color: hsl(358, 85%, 52%); } .single-case-study header nav > ul > li a[data-post-title="case_studies"] [role="presentation"] path, .single-case-study header nav > ul > li a[data-post-title="case_studies"] [role="presentation"] circle, .single-post header nav > ul > li a[data-post-title="blog"] [role="presentation"] path, .single-post header nav > ul > li a[data-post-title="blog"] [role="presentation"] circle, .single-product header nav > ul > li a[data-post-title="products"] [role="presentation"] path, .single-product header nav > ul > li a[data-post-title="products"] [role="presentation"] circle, header nav > ul > li:has([aria-current="page"]:not([data-post-title="[[cta]]"])) > a [role="presentation"] path, header nav > ul > li:has([aria-current="page"]:not([data-post-title="[[cta]]"])) > a [role="presentation"] circle { fill: hsl(358, 85%, 52%); } } @media (min-width: 1000px) { .page-id-259 main > .wp-block-columns:first-of-type { grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); } } @media (min-width: 1000px) { .page-id-259 main > .wp-block-columns:first-of-type > .wp-block-column:first-child { grid-column: 1 / span 2; } } .page main > header { max-width: none; padding-top: var(--space-l); } .page main > header > h1 { text-align: center; max-width: 30ch; margin-inline: auto; text-wrap: balance; } .page main > header:has(+ p) h1 { margin-bottom: 0.2em; } .page main header + p { position: relative; text-align: center; padding-bottom: var(--space-l); } main .wp-block-column .wp-block-group { background-color: hsl(358, 85%, 52%); color: hsl(0, 100%, 100%); margin-bottom: var(--space-l); padding: var(--space-m); border-radius: 0 0 var(--space-l) 0; font-weight: 500; align-self: flex-start; } main .wp-block-column .wp-block-group > div > *:last-child { margin-bottom: 0; } main .wp-block-column .wp-block-group.grey { background-color: hsl(0, 0%, 90%); color: hsl(0, 0%, 20%); font-weight: 500; } main .wp-block-column .wp-block-group .bleed { margin-top: calc(-1 * var(--space-m)); margin-right: calc(-1 * var(--space-m)); margin-left: calc(-1 * var(--space-m)); } main .wp-block-column .wp-block-group strong, main .wp-block-column .wp-block-group table th, table main .wp-block-column .wp-block-group th, main .wp-block-column .wp-block-group table tfoot td, table tfoot main .wp-block-column .wp-block-group td, main .wp-block-column .wp-block-group blockquote cite, blockquote main .wp-block-column .wp-block-group cite, main .wp-block-column .wp-block-group .all_caps, main .wp-block-column .wp-block-group .distributors [data-collapsed-trigger], .distributors main .wp-block-column .wp-block-group [data-collapsed-trigger], main .wp-block-column .landing_intro h4 + .wp-block-group p:first-child, .landing_intro main .wp-block-column h4 + .wp-block-group p:first-child, main .wp-block-column .wp-block-group ul li::marker, main ul .wp-block-column .wp-block-group li::marker, main .wp-block-column .wp-block-group ol > li::marker, main .wp-block-column .wp-block-group ol ol li::marker, main ol ol .wp-block-column .wp-block-group li::marker, main .wp-block-column .wp-block-group ul.short a, ul.short main .wp-block-column .wp-block-group a { font-weight: 400; } @media (max-width: 1000px){ main .wp-block-column .wp-block-group p{ padding: 0 var(--space-s); } .wp-block-columns .wp-block-column .wp-block-group__inner-container p{ padding: 0; } main .wp-block-column .wp-block-group > div > *:last-child{ justify-content: center; } .home .ab .wp-block-button{ margin-top: var(--space-m); } .case_study .meta{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 7px; } .case_study .meta .tag{ margin: 0px; } } main .blog_posts > div:first-child > div .filter { display: flex; justify-content: flex-start; align-items: flex-start; margin-block: var(--space-3xs); text-wrap: balance; } main .blog_posts > div:first-child > div .filter div { line-height: 1.1; } main .blog_posts > div:first-child > div .filter svg { margin-top: 0.3em; flex-shrink: 0; } main .blog_posts a { display: none; } main .blog_posts a[data-active] { display: block; } .product_grid > div:last-child > div { position: relative; } .product_grid > div:last-child > div a { text-decoration: none; } .product_grid > div:last-child > div figure { margin-top: 0; border-radius: 0 2em 0 0; padding: var(--space-2xs); background-color: hsl(0, 100%, 100%); overflow: hidden; } .product_grid > div:last-child > div h5 { max-width: 20ch; } .product_grid > div:last-child > div .description { font-size: var(--step--1); line-height: 1.5; max-width: 25ch; } @media (min-width: 1600px) { .product_grid > div:last-child > div .description { font-size: var(--step--2); max-width: 30ch; } } .product_grid > div:last-child > div .variants { margin-bottom: var(--space-2xs); } .product_grid > div:last-child > div .variants .tag, .product_grid > div:last-child > div .variants .product_variant_comparison th > div div:nth-child(2), .product_variant_comparison th > div .product_grid > div:last-child > div .variants div:nth-child(2), .product_grid > div:last-child > div .variants .specs [data-collapsed] > div:first-child > div:nth-child(2), .specs .product_grid > div:last-child > div .variants [data-collapsed] > div:first-child > div:nth-child(2), .product_grid > div:last-child > div .variants .distributors > div .country, .distributors > div .product_grid > div:last-child > div .variants .country, .product_grid > div:last-child > div .variants .ports > div .country, .ports > div .product_grid > div:last-child > div .variants .country, .product_grid > div:last-child > div .variants .map_item .country, .map_item .product_grid > div:last-child > div .variants .country { background-color: hsl(0, 100%, 100%); color: hsl(0, 0%, 38%); } .product_grid > div:last-child > div .variants .tag[data-active="1"], .product_grid > div:last-child > div .variants .product_variant_comparison th > div div[data-active="1"]:nth-child(2), .product_variant_comparison th > div .product_grid > div:last-child > div .variants div[data-active="1"]:nth-child(2), .product_grid > div:last-child > div .variants .specs [data-collapsed] > div:first-child > div[data-active="1"]:nth-child(2), .specs .product_grid > div:last-child > div .variants [data-collapsed] > div:first-child > div[data-active="1"]:nth-child(2), .product_grid > div:last-child > div .variants .distributors > div [data-active="1"].country, .distributors > div .product_grid > div:last-child > div .variants [data-active="1"].country, .product_grid > div:last-child > div .variants .ports > div [data-active="1"].country, .ports > div .product_grid > div:last-child > div .variants [data-active="1"].country, .product_grid > div:last-child > div .variants .map_item [data-active="1"].country, .map_item .product_grid > div:last-child > div .variants [data-active="1"].country { color: hsl(358, 85%, 52%); } .product_grid > div:last-child > div .app_scenarios { position: absolute; top: var(--space-2xs); right: var(--space-2xs); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3xs); display: none; } .product_grid > div:last-child > div .app_scenarios div { margin: 0; background-color: hsl(358, 85%, 52%); } .product_grid > div:last-child > div h5:has(+ .variants) { margin-bottom: 0; } .product_grid > div:first-child > div.handle, .product_grid > div:first-child > div.filter.reset, .blog_posts > div:first-child > div.handle, .blog_posts > div:first-child > div.filter.reset { display: flex; padding-block: var(--space-2xs); cursor: pointer; margin-bottom: var(--space-2xs); text-align: center; } .product_grid > div:first-child > div.handle > *, .product_grid > div:first-child > div.filter.reset > *, .blog_posts > div:first-child > div.handle > *, .blog_posts > div:first-child > div.filter.reset > * { display: inline-block; pointer-events: none; margin: 0; } .product_grid > div:first-child > div.handle svg, .product_grid > div:first-child > div.filter.reset svg, .blog_posts > div:first-child > div.handle svg, .blog_posts > div:first-child > div.filter.reset svg { margin-right: var(--space-2xs); } .product_grid > div:first-child > div.live_filter, .blog_posts > div:first-child > div.live_filter { position: relative; display: block; padding-inline: 0; font-size: 0.6em; margin-bottom: var(--space-m); } .product_grid > div:first-child > div.handle, .blog_posts > div:first-child > div.handle { justify-content: center; background-color: white; } @media (min-width: 1000px) { .product_grid > div:first-child > div.handle, .blog_posts > div:first-child > div.handle { display: none; } } .product_grid > div:first-child > div.filter.reset, .blog_posts > div:first-child > div.filter.reset { display: flex; flex-direction: column; justify-content: center; line-height: 1.6; color: hsl(358, 85%, 52%); cursor: pointer; } .product_grid > div:first-child > div.filter.reset:hover svg, .blog_posts > div:first-child > div.filter.reset:hover svg { transform: translateY(-0.15em) rotate(-720deg); } .product_grid > div:first-child > div.filter.reset > *, .blog_posts > div:first-child > div.filter.reset > * { display: inline-block; pointer-events: none; } .product_grid > div:first-child > div.filter.reset svg, .blog_posts > div:first-child > div.filter.reset svg { fill: hsl(358, 85%, 52%); transform: translateY(-0.15em); transition: transform 0.8s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .product_grid > div:first-child > div > div, .blog_posts > div:first-child > div > div { display: flex; flex-direction: column-reverse; margin-bottom: var(--space-l); } .product_grid > div:first-child > div > div div, .blog_posts > div:first-child > div > div div { cursor: pointer; line-height: 1.8; } .product_grid > div:first-child > div > div div > *, .blog_posts > div:first-child > div > div div > * { display: inline-block; pointer-events: none; } .product_grid > div:first-child > div > div div svg, .blog_posts > div:first-child > div > div div svg { margin-right: var(--space-2xs); } .product_grid > div:first-child > div > div div path, .blog_posts > div:first-child > div > div div path { fill: hsl(0, 100%, 100%); } .product_grid > div:first-child > div > div div span, .blog_posts > div:first-child > div > div div span { font-size: var(--step--2); line-height: 2.2; text-transform: uppercase; color: hsl(0, 0%, 38%); margin-left: var(--space-3xs); } .product_grid > div:first-child > div > div div[data-active] path, .blog_posts > div:first-child > div > div div[data-active] path { fill: hsl(358, 85%, 52%); } .product_grid > div:first-child > div > div div[data-counter-zero], .blog_posts > div:first-child > div > div div[data-counter-zero] { opacity: 0.2; display: none; } .product_grid > div:first-child > div > div div[data-filter-type="all"], .product_grid > div:first-child > div > div div[data-filter-application="all"], .blog_posts > div:first-child > div > div div[data-filter-type="all"], .blog_posts > div:first-child > div > div div[data-filter-application="all"] { order: 100 !important; opacity: 1; } .product_grid > div:first-child > div > div div[data-filter-type="all"][data-active="1"] ~ div path, .product_grid > div:first-child > div > div div[data-filter-application="all"][data-active="1"] ~ div path, .blog_posts > div:first-child > div > div div[data-filter-type="all"][data-active="1"] ~ div path, .blog_posts > div:first-child > div > div div[data-filter-application="all"][data-active="1"] ~ div path { fill: hsl(0, 100%, 100%); } @media (max-width: 750px) { .product_grid > div:first-child { display: grid; grid-template-columns: repeat(2, 1fr); height: 3em; overflow: hidden; margin-bottom: var(--space-l); transition: height 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .product_grid > div:first-child .handle, .product_grid > div:first-child .reset, .product_grid > div:first-child .live_filter { grid-column: 1 / span 2; } .product_grid > div:first-child:hover { height: auto; } .product_grid > div:first-child:hover .handle { display: none; } } .gallery_carousel { position: fixed; inset: 0; background-color: rgba(51, 51, 51, 0.8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .gallery_open .gallery_carousel { display: block; opacity: 1; pointer-events: all; } .gallery_carousel .main { margin: 0; padding: 0; } .gallery_carousel .main .flickity-viewport { min-height: calc(100vh - 260px); } .gallery_carousel .main figure { position: relative; margin: var(--space-m) var(--space-s); max-width: none; max-height: calc(100vh - 260px); width: auto; height: 100%; } .gallery_carousel .main img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; overflow: hidden; } .gallery_carousel nav { position: fixed; right: 0; bottom: 0; left: 0; background-color: rgba(51, 51, 51, 0.8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); margin: 0; padding: var(--space-s); z-index: 110; } .gallery_carousel nav:hover figure { opacity: 0.8; } .gallery_carousel nav .flickity-viewport { min-height: 120px; } .gallery_carousel nav figure { width: 80px; height: 80px; margin: var(--space-2xs); border: 2px solid transparent; cursor: pointer; transition: opacity 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98), border-color 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .gallery_carousel nav figure:hover { opacity: 1; } .gallery_carousel nav figure.is-selected { border-color: hsl(358, 85%, 52%); } .gallery_carousel .solo figure { max-height: calc(100vh - var(--space-m) - var(--space-m)); margin-inline: auto; } .gallery_carousel .solo + nav { display: none; } .gallery_carousel .close { position: fixed; top: var(--space-s); right: var(--space-s); width: 3em; height: 3em; background-color: hsl(358, 85%, 52%); background-image: url(../icon-cross.svg); background-position: 50% 50%; background-repeat: no-repeat; background-size: 60%; border-radius: 50%; cursor: pointer; transition: background-color 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .gallery_carousel .close:hover { background-color: hsl(358, 85%, 47%); } .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-s); margin-bottom: var(--space-xl); align-content: flex-start; } .gallery > *:first-child { grid-column: 1 / span 3; } .gallery img { -o-object-fit: cover; object-fit: cover; } .gallery > figure { margin: 0; max-width: 100%; aspect-ratio: 1; cursor: zoom-in; } .gallery .webrotate360 { position: relative; max-height: calc(100vh - 220px); } .gallery .webrotate360:after { content: ""; display: block; position: absolute; top: var(--space-xs); right: var(--space-s); width: 80px; height: 80px; background-image: url(../images/icon-360.svg); background-repeat: no-repeat; background-position: 50% 50%; z-index: 2; } .product_grid { max-width: 3000px; padding-inline: var(--space-m); margin: 0 auto; } @media (min-width: 1000px) { .product_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); } } @media (min-width: 1400px) { .product_grid { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 2000px) { .product_grid { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 1000px) { .product_grid > div:first-child { grid-column: 1; } } .product_grid > div:last-child { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl) var(--space-m); align-self: start; } .product_grid > div:last-child .product_card { display: none; } .product_grid > div:last-child .product_card[data-active] { display: block; } @media (min-width: 750px) { .product_grid > div:last-child { grid-column: 2 / span 3; } } @media (min-width: 1000px) { .product_grid > div:last-child { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1400px) { .product_grid > div:last-child { grid-column: 2 / span 5; grid-template-columns: repeat(4, 1fr); } } @media (min-width: 2000px) { .product_grid > div:last-child { grid-column: 2 / span 5; grid-template-columns: repeat(5, 1fr); } } .page-id-241 main { padding-top: var(--space-2xl); } .page-id-241 main > header { display: none; } .specs { width: 100%; } .specs table { width: 100% !important; } .specs tr { height: auto !important; } .specs td { width: auto !important; height: auto !important; } .specs [data-collapsed] { margin-bottom: 2px; } .specs [data-collapsed] svg { transform: rotate(-90deg); transition: transform 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .specs [data-collapsed] svg path { fill: hsl(0, 100%, 100%); } .specs [data-collapsed] > div:first-child { display: flex; justify-content: center; align-items: center; background-color: hsl(358, 85%, 52%); color: hsl(0, 100%, 100%); padding: 0.6em 0.8em; cursor: pointer; } .specs [data-collapsed] > div:first-child > div:nth-child(2) { margin-left: var(--space-2xs); margin-right: auto; } .specs [data-collapsed] > div:first-child > div:last-child { margin-left: auto; } .specs [data-collapsed] > div:last-child { height: auto; overflow: hidden; transition: height 0.4s cubic-bezier(0.33, 0.24, 0.31, 0.98), padding-block 0.4s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .specs [data-collapsed] > div:last-child:not(:has(table)) { padding: var(--space-xs); } .specs [data-collapsed][data-collapsed="1"] svg { transform: rotate(90deg); } .specs [data-collapsed][data-collapsed="1"] > div:last-child { height: 0; padding-block: 0; } .specs [data-collapsed] table { margin-bottom: var(--space-xl); } .specs [data-collapsed] table td { font-size: var(--step--1); } .specs [data-collapsed] table td:last-child { text-align: right; } .technology { display: flex; justify-content: flex-start; gap: var(--space-m); } .technology > div { display: flex; align-items: center; gap: var(--space-xs); max-width: 18em; } .technology figure { margin: 0; width: 30%; } .technology figure img { -o-object-fit: contain; object-fit: contain; } .technology p { margin: 0; line-height: 1.4; } @media (min-width: 1600px) { .technology p { font-size: var(--step--2); } } @media (max-width: 1000px) { .technology:has(div + div) > div { flex-direction: column; text-align: center; } .technology:has(div + div) figure { width: 50%; width: clamp(80px, 50%, 120px); width: 80px; } } @media (min-width: 1000px) { .technology:has(div + div + div) > div { flex-direction: column; text-align: center; } .technology:has(div + div + div) figure { width: 50%; width: clamp(80px, 50%, 120px); width: 80px; } } .product_variants > div { display: flex; align-items: center; text-align: center; gap: var(--space-xs); font-size: var(--step-0); line-height: 1.1; font-weight: 500; } .product_variant_comparison { grid-column: 1 / span 2; max-width: none; } .product_variant_comparison table { max-width: 2000px; margin-inline: auto; } .product_variant_comparison th { position: sticky; top: 135px; background-color: hsl(358, 85%, 52%); z-index: 10; } .product_variant_comparison th > div { display: flex; flex-direction: column; align-items: center; } .product_variant_comparison th > div div:nth-child(1) { order: 2; line-height: 1.2; margin-bottom: var(--space-2xs); color: hsl(0, 100%, 100%); text-align: center; } .product_variant_comparison th > div div:nth-child(2) { order: 3; margin-bottom: var(--space-m); } .product_variant_comparison figure { margin-block: 0 var(--space-s); } .product_variant_comparison tbody { font-size: var(--step--2); } .product_variant_comparison tbody td:not(:first-child) { text-align: center; vertical-align: middle; } .product_variant_comparison tbody td:first-child { white-space: nowrap; font-weight: 500; } .product_variant_comparison .na { font: 0/0 a; color: transparent; display: block; width: 2px; height: 1rem; background-color: hsl(0, 100%, 100%); margin-inline: auto; transform: rotate(45deg); } .product_variant_comparison .unit { opacity: 0.6; display: block; } .single-product main { max-width: 2000px; padding-inline: var(--space-m); } .single-product main > * { max-width: none; } .single-product main > header, .single-product main > div { width: 100%; } .single-product main .detail { margin: 0; } .single-product main .detail > div { margin-block: var(--space-m); } .single-product main .detail > div:first-child { margin-top: 0; } .single-product main .technology { max-width: 100%; overflow-x: scroll; } .single-product main .consumables_and_accessories { margin-top: var(--space-2xl); } @media (max-width: 1000px) { .single-product main { display: flex; flex-direction: column; } .single-product main header { order: -2; } .single-product main .gallery { order: -1; } } @media (min-width: 1000px) { .single-product main { /*display: grid;*/ /*grid-template-columns: repeat(2, 1fr);*/ /*grid-template-rows: repeat(8, auto);*/ /*gap: 0 var(--space-xl);*/ /*margin-inline: auto;*/ } .single-product main .gallery { grid-column: 1; grid-row: 1/3; } .single-product main .specs { grid-column: 1; grid-row: 3/7; margin-top: 0; } .single-product main header { grid-column: 2; grid-row: 1; } .single-product main .detail { grid-column: 2; grid-row: 2/7; } .single-product main .consumables_and_accessories { grid-column: 1 / span 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); padding-inline: var(--space-2xl); } } .promo { position: fixed; bottom: 2rem; right: 0; display: flex; align-items: flex-start; z-index: 5; } .promo > div:first-child { display: flex; justify-content: flex-end; } .promo .subscriber-tab .tab-hold { display: flex; flex-direction: row; } .promo .subscriber-tab { display: flex; gap: var(--space-s); background-color: hsl(0, 0%, 20%); border-start-end-radius: 1.5em; color: hsl(0, 100%, 100%); transform-origin: top right; transform: rotate(-90deg) translateY(-100%); padding: calc(var(--space-xs) * 0.75) var(--space-xs); padding-right: var(--space-l); font-family: "finalsix", sans-serif; cursor: pointer; transition: 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .promo .subscriber-tab:hover { padding-bottom: var(--space-s); } .promo > div:first-child figure { transform: rotate(90deg); } .promo > div:first-child figure:nth-child(1) { display: block; } .promo > div:first-child figure:nth-child(2) { display: none; } .promo > div:last-child { display: flex; flex-direction: column; gap: var(--space-s); text-align: center; background-color: hsl(0, 100%, 100%); background: linear-gradient(hsl(0, 0%, 90%), hsl(0, 100%, 100%) 50%); padding-block: var(--space-m); overflow: hidden; transition: width 0.4s cubic-bezier(0.33, 0.24, 0.31, 0.98); box-shadow: 0 0 30px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px white; } .promo > div:last-child figure { width: 15ch; margin-top: -2rem; margin-inline: auto; } .promo > div:last-child > div { width: min(36ch, 100vw - 4rem); padding-inline: var(--space-m); text-wrap: balance; } .promo > div a[role="button"] { font-size: var(--step--1); } .promo[data-open="0"] > div:last-child { width: 0; } .promo[data-open="1"] > div:first-child > div figure:nth-child(1) { display: none; } .promo[data-open="1"] > div:first-child > div figure:nth-child(2) { display: block; } blockquote p { font-style: italic; } blockquote p:first-of-type:before, blockquote p:last-of-type:after { content: open-quote; font-family: gtultra, sans-serif; } blockquote p:first-of-type:before { content: open-quote; } blockquote p:last-of-type:after { content: close-quote; } blockquote + figcaption span { display: block; } blockquote cite { display: block; text-transform: uppercase; margin-top: var(--space-xs); } main blockquote { margin-block: var(--space-m); } .wp-block-pullquote blockquote p { font-style: normal; font-size: 2em; line-height: 1.2; } .sustainability_goals .wp-block-column .wp-block-group { width: 100%; margin-bottom: 0; border-radius: 0; } .sustainability_goals .wp-block-column .wp-block-group figure { width: 6em; margin-inline: auto !important; } main .wp-block-group.sustainability_points { background-color: hsl(358, 85%, 52%); color: rgba(255, 255, 255, 0.9); padding: 0; font-weight: 300; overflow: hidden; } main .wp-block-group.sustainability_points p { gap: var(--space-xs); padding: var(--space-m); padding-left: 0; } main .wp-block-group.sustainability_points p:hover { color: hsl(0, 100%, 100%); } main .wp-block-group.sustainability_points p:nth-child(even) { background-color: hsl(358, 85%, 49%); } main .wp-block-group.sustainability_points p:not(:last-child) { padding-bottom: var(--space-m); margin: 0; border-bottom: 2px dotted rgba(255, 255, 255, 0.3); } main .wp-block-group.sustainability_points .big_number { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); transform: translate(-8%, -8%); color: hsl(0, 100%, 100%); margin-left: var(--space-m); } main .wp-block-group.sustainability_points strong, main .wp-block-group.sustainability_points table th, table main .wp-block-group.sustainability_points th, main .wp-block-group.sustainability_points table tfoot td, table tfoot main .wp-block-group.sustainability_points td, main .wp-block-group.sustainability_points .all_caps, main .wp-block-group.sustainability_points .distributors [data-collapsed-trigger], .distributors main .wp-block-group.sustainability_points [data-collapsed-trigger], main .wp-block-group.sustainability_points .landing_intro h4 + .wp-block-group p:first-child, .landing_intro h4 + .wp-block-group main .wp-block-group.sustainability_points p:first-child, main .wp-block-group.sustainability_points ul li::marker, main ul .wp-block-group.sustainability_points li::marker, main .wp-block-group.sustainability_points ol > li::marker, main .wp-block-group.sustainability_points ol ol li::marker, main ol ol .wp-block-group.sustainability_points li::marker, main .wp-block-group.sustainability_points ul.short a, ul.short main .wp-block-group.sustainability_points a, main .wp-block-group.sustainability_points blockquote cite, blockquote main .wp-block-group.sustainability_points cite { display: block; font-size: var(--step-3); text-transform: uppercase; line-height: 1.02; text-transform: uppercase; margin-bottom: 0.2em; color: hsl(0, 100%, 100%); } .clo_certificate figure { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--space-m); } .clo_certificate figure figcaption { margin: 0; background-color: transparent; text-align: left; padding: 0; text-wrap: balance; } table { background-color: hsl(0, 0%, 90%); width: 100%; } table.has-fixed-layout { table-layout: fixed; } table th, table td { padding: calc(var(--space-xs) * 0.75) var(--space-xs); border: 2px solid hsl(0, 0%, 96%); } table th, table tfoot td { background-color: hsl(0, 0%, 90%); } .tag, .distributors > div .country, .ports > div .country, .map_item .country, .specs [data-collapsed] > div:first-child > div:nth-child(2), .product_variant_comparison th > div div:nth-child(2) { display: inline-block; font-size: var(--step--1); line-height: 1; font-weight: 600; background-color: hsl(0, 0%, 20%); color: hsl(0, 100%, 100%); padding: 4.5px 6px; border-radius: 4px; margin-right: var(--space-2xs); transition: background-color 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } @media (min-width: 1600px) { .tag, .distributors > div .country, .ports > div .country, .map_item .country, .specs [data-collapsed] > div:first-child > div:nth-child(2), .product_variant_comparison th > div div:nth-child(2) { font-size: var(--step--2); } } .tag.client, .distributors > div .client.country, .ports > div .client.country, .map_item .client.country, .specs [data-collapsed] > div:first-child > div.client:nth-child(2), .product_variant_comparison th > div div.client:nth-child(2) { background-color: hsl(358, 85%, 52%); color: hsl(0, 100%, 100%); } .timeline { --timeline_height: 54rem; position: relative; max-width: 100%; margin-bottom: var(--space-xl); } @media (width > 750px) { .timeline { --timeline_height: 34rem; } } @media (width > 1400px) { .timeline { --timeline_height: 34rem; } } @media (width > 1600px) { .timeline { --timeline_height: 45rem; } } .timeline:before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; left: 0; background-color: hsl(358, 85%, 52%); height: 10px; } @media (width > 1000px) { .timeline:before { top: calc(50% - 1.5em); } } .timeline .scrollBtns { justify-content: center; } .timeline > div:not(.scrollBtns) { display: flex; overflow-x: scroll; -ms-overflow-style: none; } .timeline > div:not(.scrollBtns)::-webkit-scrollbar { display: none; } .timeline > div:not(.scrollBtns) > div { position: relative; display: grid; gap: var(--space-3xs) var(--space-xs); grid-template-columns: repeat(2, 1fr); grid-template-rows: auto 1fr; color: hsl(0, 100%, 100%); margin: var(--space-m) 0; } .timeline > div:not(.scrollBtns) > div:first-child { margin-left: var(--space-2xl); } .timeline > div:not(.scrollBtns) > div:last-child { margin-right: var(--space-2xl); } .timeline > div:not(.scrollBtns) > div:not(:first-child) { margin-left: calc(-1 * var(--space-3xl)); } .timeline > div:not(.scrollBtns) > div:not(:has(figure)) { width: 25rem; flex-shrink: 0; } .timeline > div:not(.scrollBtns) > div:before { content: ""; position: absolute; left: var(--space-m); background-color: hsl(358, 85%, 52%); width: 10px; z-index: -1; } .timeline > div:not(.scrollBtns) > div:after { content: ""; position: absolute; inset: var(--space-m); right: 6rem; background-color: hsl(358, 85%, 52%); border-radius: 0 2rem 0 0; z-index: -1; } .timeline > div:not(.scrollBtns) > div div:first-child { font-family: "finalsix", sans-serif; font-size: var(--step-1); font-weight: 800; line-height: 1; padding: var(--space-l) 0 0 var(--space-l); grid-column: 1; grid-row: 1; } .timeline > div:not(.scrollBtns) > div div:first-child:before { content: ""; position: absolute; left: 0.6rem; width: 3rem; height: 3rem; background-color: hsl(358, 85%, 52%); background-image: url(../images/icon-t.svg); background-repeat: no-repeat; background-position: 50% 2px; background-size: 115%; border-radius: 50%; border: 4px solid hsl(0, 100%, 100%); } .timeline > div:not(.scrollBtns) > div:nth-child(odd) { margin-top: calc(var(--timeline_height) * 0.5 + var(--space-m) + 1rem); } @media (width > 750px) { .timeline > div:not(.scrollBtns) > div:nth-child(odd) { margin-top: calc(var(--timeline_height) * 0.5 + var(--space-m) + 1rem); } } .timeline > div:not(.scrollBtns) > div:nth-child(odd):before { top: -2rem; bottom: var(--space-m); } .timeline > div:not(.scrollBtns) > div:nth-child(odd) div:first-child:before { top: -3.5rem; } .timeline > div:not(.scrollBtns) > div:nth-child(even) { margin-bottom: calc(var(--timeline_height) * 0.5 + var(--space-m) + 1rem); } @media (width > 750px) { .timeline > div:not(.scrollBtns) > div:nth-child(even) { margin-bottom: calc(var(--timeline_height) * 0.5 + var(--space-m) + 1rem); } } .timeline > div:not(.scrollBtns) > div:nth-child(even):before { top: var(--space-m); bottom: -2rem; } .timeline > div:not(.scrollBtns) > div:nth-child(even) div:first-child:before { bottom: -3.5rem; } .timeline > div:not(.scrollBtns) > div div:nth-child(2) { padding: 0 0 var(--space-l) var(--space-l); width: 14rem; grid-column: 1; grid-row: 2; text-wrap: pretty; line-height: 1.2; font-weight: 500; } @media (width > 750px) { .timeline > div:not(.scrollBtns) > div div:nth-child(2) { font-size: var(--step--2); } } .timeline > div:not(.scrollBtns) > div figure { border-radius: 50%; border: 4px solid hsl(0, 100%, 100%); overflow: hidden; margin: 1rem; width: 10rem; height: 10rem; grid-column: 2; grid-row: 1 / span 2; } @media (width > 750px) { .timeline > div:not(.scrollBtns) > div figure { width: 10rem; height: 10rem; } } /* Mobile Refactor: Flatten Timeline (< 1000px) */ @media (max-width: 1000px) { /* 1. Reset the Red Track Line to the top */ .timeline:before { top: 2rem; /* Fixes line near the top */ transform: none; /* Removes the 50% vertical centering */ } /* 2. Force ALL items to hang BELOW the track */ /* We include high-specificity selectors to override desktop nth-child logic */ .timeline > div:not(.scrollBtns) > div, .timeline > div:not(.scrollBtns) > div:nth-child(odd), .timeline > div:not(.scrollBtns) > div:nth-child(even) { margin-top: 4rem; /* consistent distance from the top track */ margin-bottom: 0; /* remove upward lift */ } .timeline .timeline-track .has_image{ margin-right: 5rem !important; } /* 3. Reset the vertical connector lines */ .timeline > div:not(.scrollBtns) > div:before, .timeline > div:not(.scrollBtns) > div:nth-child(odd):before, .timeline > div:not(.scrollBtns) > div:nth-child(even):before { top: -2rem; /* connects card up to the track */ bottom: auto; height: 12rem; } /* 4. Reset the 'T' Icon positions */ .timeline > div:not(.scrollBtns) > div div:first-child:before, .timeline > div:not(.scrollBtns) > div:nth-child(odd) div:first-child:before, .timeline > div:not(.scrollBtns) > div:nth-child(even) div:first-child:before { top: -3.5rem; /* centers the icon on the track line */ bottom: auto; } } .vibro_feat { display: grid !important; gap: var(--space-m) !important; grid-template-columns: repeat(3, auto) !important; background-color: hsl(149, 100%, 32%); color: hsl(0, 100%, 100%); border-radius: 0 0 1.5rem 0; padding: var(--space-m); margin-bottom: var(--space-m); text-decoration: none; transition: background-color 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .vibro_feat *:last-child { margin-bottom: 0; } .vibro_feat:hover { background-color: hsl(149, 100%, 27%); } .vibro_feat h3 { font-size: var(--step-1); line-height: 1.2; font-weight: 800; margin-bottom: var(--space-2xs); } .vibro_feat p { font-size: var(--step--1); } .vibro_feat > div:first-child { display: block; grid-column: 1 / span 2; } .vibro_feat figure { grid-column: 3; max-width: 120px; margin: 0; } .vibro_feat img { -o-object-fit: contain !important; object-fit: contain !important; } @media (max-width: 1000px) { .vibro_feat{ margin-bottom: var(--space-s); } } main { margin: 0 auto; opacity: 1; transition: opacity 0.8s cubic-bezier(0.33, 0.24, 0.31, 0.98); } main > .wp-block-cover { transition: transform 0.6s cubic-bezier(0.33, 0.24, 0.31, 0.98); } main > header, main > header + p, main > .wp-block-cover > div { transition: transform 1.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } body:not(.single-post, .home) main h1, main > .wp-block-cover > div > div { transition: transform 2.8s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .page-id-241 main .product_types > div a { transition: transform 0.6s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .is-animating main { opacity: 0; transition: opacity 0.4s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .is-animating main > .wp-block-cover { transform: translateY(-200px); } .is-animating main > header, .is-animating main > header + p, .is-animating main > .wp-block-cover > div, body:not(.single-post, .home) .is-animating main h1, .is-animating main > .wp-block-cover > div > div { transform: translateY(-300px); } body:not(.single-post) .is-animating main h1, .is-animating main > .wp-block-cover > div > div { transform: translateY(-100px); } .is-animating .page-id-241 .product_types > div a { transform: translateY(-600px); } .is-animating .page-id-241 .product_types > div a:nth-child(2) { transform: translateY(-540px); } .is-animating .page-id-241 .product_types > div a:nth-child(3) { transform: translateY(-580px); } .is-animating .page-id-241 .product_types > div a:nth-child(4) { transform: translateY(-600px); } .is-animating .page-id-241 .product_types > div a:nth-child(5) { transform: translateY(-500px); } .is-animating .page-id-241 .product_types > div a:nth-child(6) { transform: translateY(-520px); } .is-animating .page-id-241 .product_types > div a:nth-child(7) { transform: translateY(-480px); } .is-animating .page-id-241 .product_types > div a:nth-child(8) { transform: translateY(-520px); } .is-animating .page-id-241 .product_types > div a:nth-child(9) { transform: translateY(-580px); } .is-animating .page-id-241 .product_types > div a:nth-child(10) { transform: translateY(-560px); } .is-animating .page-id-241 .product_types > div a:nth-child(11) { transform: translateY(-400px); } .is-animating .page-id-241 .product_types > div a:nth-child(12) { transform: translateY(-420px); } .is-animating .page-id-241 .product_types > div a:nth-child(13) { transform: translateY(-440px); } .is-animating .page-id-241 .product_types > div a:nth-child(14) { transform: translateY(-490px); } .is-animating .page-id-241 .product_types > div a:nth-child(15) { transform: translateY(-520px); } .is-animating .page-id-241 .product_types > div a:nth-child(16) { transform: translateY(-460px); } .is-animating .page-id-241 .product_types > div a:nth-child(17) { transform: translateY(-470px); } .is-animating .page-id-241 .product_types > div a:nth-child(18) { transform: translateY(-450px); } .__dev_data_model { background-color: transparent; margin-bottom: var(--space-m); border: 2px solid black; } .__dev_data_model th, .__dev_data_model td { border-color: rgba(0, 0, 0, 0.05); } .__dev_data_model th, .__dev_data_model tfoot td { background-color: transparent; } .__dev_data_model th { width: 25%; } .__dev_data_model th:first-child { width: 10%; } .__dev_data_model tr:not(:first-child) { opacity: 0.4; transition: opacity 0.4s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .__dev_data_model tr:not(:first-child):hover { opacity: 1; } .php_dump { text-align: left; background-color: rgba(255, 255, 255, 0.8); color: hsl(0, 0%, 0%); z-index: 99; } .__dev_label, .__dev_note { position: relative; } .__dev_label:after, .__dev_note:after { content: ""; position: absolute; inset: calc(var(--space-2xs) * -1); background-color: hsl(60, 100%, 50%); z-index: -1; } .__dev_note:after { background-color: hsl(60, 30%, 95%); } .__dev_mode_switch { position: fixed; inset: auto var(--space-2xs) var(--space-xl) auto; margin: 0; } .__dev_mode_switch:after { content: ""; position: absolute; inset: calc(var(--space-2xs) * -1); background-color: hsl(60, 100%, 50%); z-index: -1; } body:not(.__dev_mode) .__dev, body:not(.__dev_mode) .__dev_label, body:not(.__dev_mode) .__dev_note { display: none; } /*# sourceMappingURL=style.css.map */ /* ----------------------------------------------------------------------------- MARKET ARCHIVE LAYOUT Target: body.post-type-archive-market ----------------------------------------------------------------------------- */ /* 1. Reset & Setup */ .post-type-archive-market footer { margin-top: 0; } /* Hide the standard page title to match original "Hero" look */ .post-type-archive-market .page-header { display: none; } /* 2. Main Flex Container (.markets) */ .post-type-archive-market .markets { position: relative; display: flex; max-width: 100vw; margin: 0; width: 100%; /* Ensure full width */ } /* 3. Market Columns (Links) */ .post-type-archive-market .markets a { position: relative; display: flex; flex-direction: column; justify-content: center; flex: 1 1 0px; /* Equal width columns */ padding: var(--space-xl); text-align: center; text-decoration: none; color: hsl(0, 100%, 100%); min-height: 50vh; /* Mobile fallback height */ overflow: hidden; /* Contains the image scaling */ transition: color 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } /* Text Content Wrapper */ .post-type-archive-market .markets a div { position: relative; z-index: 2; } /* 4. Hover States */ .post-type-archive-market .markets:hover a { color: rgba(255, 255, 255, 0.8); /* Dim non-hovered items */ } .post-type-archive-market .markets:hover a:hover { color: hsl(0, 100%, 100%); /* Highlight hovered item */ } /* Darken Overlay on Hover */ .post-type-archive-market .markets:hover a:hover figure:after { opacity: 0.9; } /* 5. Background Images & Overlays */ .post-type-archive-market .markets figure { position: absolute; inset: 0; margin: 0; z-index: 1; } /* Dark Overlay */ .post-type-archive-market .markets figure:after { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 1; transition: opacity 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } .post-type-archive-market .markets figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* 6. Responsive Behavior */ /* Mobile: Stack columns vertically */ @media (max-width: 1000px) { .post-type-archive-market .markets { flex-direction: column; } } /* Desktop: Fix height to viewport minus header */ @media (min-width: 1000px) { .post-type-archive-market .markets { height: calc(100vh - 120px); /* Adjust 120px based on your actual header height */ } } /* ----------------------------------------------------------------------------- PAGE TRANSITIONS / ANIMATIONS Target: .is-animating state ----------------------------------------------------------------------------- */ /* Push columns down during exit */ .post-type-archive-market .is-animating .markets a { transform: translateY(600px); /* Adjusted logic: usually exit goes down or up */ } /* If you strictly want the original "staggered upward" exit: */ .post-type-archive-market.is-animating .markets a { transform: translateY(-200px); } .post-type-archive-market.is-animating .markets a:nth-child(2) { transform: translateY(-220px); } .post-type-archive-market.is-animating .markets a:nth-child(3) { transform: translateY(-180px); } .post-type-archive-market.is-animating .markets a:nth-child(4) { transform: translateY(-100px); } .post-type-archive-market.is-animating .markets a:nth-child(5) { transform: translateY(-160px); } /* Standard transition settings */ .post-type-archive-market .markets a { transition: transform 0.6s cubic-bezier(0.33, 0.24, 0.31, 0.98), color 0.2s; } /* Hide other elements during transition */ .is-animating main > *:not(header, .wp-block-cover, header + p, .markets) { transform: translateY(200px); opacity: 0; } /* Custom Styles */ .bubble a{ border-radius: 7rem; } .brd-btr-0 a{ border-bottom-right-radius: 0px; } @media (max-width: 1000px){ .bubble a{ border-radius: 3rem; padding-right: 4rem !important; text-align: left; } } .filter-bar-container .filter-group{ margin: 0px !important; gap: 4px; border-radius: 0px !important; border: 0px !important; } .post-type-archive .filter-bar-container filter.reset, .filter-bar-container .filter{ margin: 0px !important; gap: 4px; border-radius: 0px !important; border: 0px !important; font-weight: 200 !important; background-color: #d9d9d9; padding: var(--space-xs) var(--space-m) !important; } .post-type-archive .filter-bar-container filter.reset:hover, .filter-bar-container .filter:hover{ background-color: #d9d9d9; } .post-type-archive .filter-bar-container filter.reset.active, .filter-bar-container .filter.active, .filter-bar-container .filter.active span{ color: #ffffff !important; background-color: #ed1d23; } .blog-content{ margin: 0 auto; max-width: 45rem; } .page-title{ font-family: 'finalsix', sans-serif; max-width: none; padding-top: var(--space-l); text-align: center; margin-inline: auto; text-wrap: balance; font-weight: 800; } .old-styles{ position: relative; text-align: center; padding-bottom: var(--space-l); } /*@font-face {*/ /* font-family: "finalsix";*/ /* src: url(https://use.typekit.net/af/34e99e/0000000…/30/l?primer=7cdcb44…&fvd=n9&v=3) format("woff2"), url(https://use.typekit.net/af/34e99e/0000000…/30/d?primer=7cdcb44…&fvd=n9&v=3) format("woff"), url(https://use.typekit.net/af/34e99e/0000000…/30/a?primer=7cdcb44…&fvd=n9&v=3) format("opentype");*/ /* font-display: auto;*/ /* font-style: normal;*/ /* font-weight: 900;*/ /* font-stretch: normal;*/ /*}*/ body main .social { display: flex; justify-content: flex-start; gap: var(--space-xs); } @media (width < 1000px) { body main .social { margin-left: var(--space-xs); margin-bottom: var(--space-xl); } } body main .social a { padding-inline: 0.6em; } body main .social svg { width: 1.5em; height: 1.5em; } body main .social svg path, body main .social svg circle { fill: hsl(0, 100%, 100%); } @media (min-width: 1000px) { body main .social svg path, body main .social svg circle { fill: hsl(0, 0%, 20%); } } body main .social { justify-content: flex-start; } body main .social li { margin: 0; padding: 0; } body main .social li::marker { content: ""; } body main .social a { margin: 0; padding: var(--space-3xs) var(--space-2xs); border-radius: 0; background-color: hsl(358, 85%, 52%); transition: background-color 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); } body main .social a svg { width: 1em; height: 1em; vertical-align: middle; transform: translateY(-8%); } body main .social a path, body main .social a circle { fill: hsl(0, 100%, 100%); } body main .social a:hover { padding-right: var(--space-2xs); background-color: hsl(358, 85%, 47%); } .wp-block-cover .wp-block-cover__inner-container h1{ text-align: left !important; } .two-col-feature .wp-block-column{ width: auto !important; } .filter-bar-container { display: flex; flex-direction: row; gap: 3px; width: 100%; justify-content: center; margin-bottom: var(--space-m); align-items: stretch; } .filter-group { display: flex; flex-direction: row; gap: 3px; } .filter { background-color: #e5e5e5; color: #333; cursor: pointer; transition: background-color 0.2s ease; display: flex; } .filter > div { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 10px 20px; white-space: nowrap; } .filter span { font-weight: 400; margin-left: 5px; } /* HOVER: Only if not active */ .filter:hover:not([data-active="1"]) { background-color: #d9d9d9; } /* ACTIVE STATE: Red BG and White Text */ .filter[data-active="1"] { background-color: #ed1d23 !important; color: #fff !important; text-align: center; } .filter[data-active="1"] span { color: #fff !important; } @media (max-width: 768px) { .filter-bar-container, .filter-group { flex-direction: column; width: 100%; } .filter > div { width: 100%; box-sizing: border-box; padding: 15px; } } @media (max-width: 768px) { .mobi-col{ flex-direction: row; } .mobi-col .wp-block-column{ max-width: 5rem !important; padding: 60px 0 0 !important; } } /* ========================================================================== 1. Breakout Utility (Forces the slider container to be full-screen width, escaping the 45rem limit) ========================================================================== */ body .product_types { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; } /* Optional: Prevent horizontal scrollbar if 100vw causes issues on Windows */ body { overflow-x: hidden; } /* ========================================================================== 2. Slider Mechanism (Handles the scrolling behavior ONLY) ========================================================================== */ .product_types > div:not(.scrollBtns) { display: flex; flex-wrap: nowrap; /* Force single row */ overflow-x: auto; /* Allow horizontal scroll */ gap: var(--space-s); /* Keep your gap */ /* Scroll smoothing */ scroll-behavior: smooth; -webkit-overflow-scrolling: touch; /* Hide Scrollbars */ scrollbar-width: none; -ms-overflow-style: none; } .product_types > div:not(.scrollBtns)::-webkit-scrollbar { display: none; } /* ========================================= 2. The "Padding Hack" (Ensures first/last items aren't flush to edge) ========================================= */ .product_types > div:not(.scrollBtns)::before, .product_types > div:not(.scrollBtns)::after { content: ''; flex: 0 0 var(--space-m); /* Acts as left/right padding */ display: block; } /* ========================================================================== 3. The "Don't Squash" Fix (CRITICAL: Prevents browser from shrinking your cards to fit the screen) ========================================================================== */ .product_types > div:not(.scrollBtns) > * { flex-shrink: 0 !important; /* Force items to keep their defined width */ flex-grow: 0; /* Prevent them from stretching unpredictably */ } /* ========================================= 3. The "No Scroll" State (Applied by JS when content fits on screen) ========================================= */ .product_types > div:not(.scrollBtns).no_scroll { justify-content: center; } /* Hide the padding pseudo-elements when centered/not scrolling so the content is truly centered */ .product_types > div:not(.scrollBtns).no_scroll::before, .product_types > div:not(.scrollBtns).no_scroll::after { display: none; } /* ========================================= 4. Scroll Buttons (Navigation) ========================================= */ .scrollBtns { display: flex; justify-content: flex-end; gap: var(--space-s); margin-top: var(--space-l); /* Ensure they are visible on mobile */ visibility: visible; opacity: 1; } /* Adjust margins for specific pages if needed (from your snippet) */ .page-id-241 .scrollBtns { margin-top: var(--space-2xs); margin-bottom: calc(-1 * var(--space-xl)); } /* Button Styling */ .scrollBtns div { display: flex; align-items: center; justify-content: center; width: 44px; /* Minimum touch target size */ height: 44px; border-radius: 50%; cursor: pointer; background-color: hsl(358, 85%, 52%); border: 3px solid hsl(0, 0%, 96%); transition: background-color 0.2s ease; } .scrollBtns div:hover { background-color: hsl(358, 85%, 47%); } .scrollBtns svg { width: 14px; height: 14px; display: block; } .scrollBtns path { fill: hsl(0, 100%, 100%); } .product_types a{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-decoration: none !important; max-width: 7rem; width: 18vw; } .product_types a div{ display: flex; font-size: var(--step--2); font-weight: 600; line-height: 1.2; text-transform: uppercase; text-align: center; text-decoration: none !important; font-style: normal; border: 0px !important; color: #ed1d23; max-width: 5rem; } .product_types a figure svg{ width: 100%; height: 100%; position: relative; z-index: 2; transition: transform 0.2s cubic-bezier(0.33, 0.24, 0.31, 0.98); transform: scale(1.1); fill: #d51a1f; stroke: #fff; stroke-width: 5px; } .product_types a figure svg path{ fill: #d51a1f; stroke: #fff; stroke-width: 5px; } .product_types .scrollBtns .prev-btn svg path, .product_types .scrollBtns .next-btn svg path{ fill: #ffffff; } /* ========================================= Product Category Red Banner ========================================= */ .product_types.product_cat{ background: #ed1d23; margin: var(--space-2xl) 0; } .product_types.product_cat h3 { font-size: var(--step-3); text-transform: uppercase; line-height: 1.02; text-align: center; color: #fff; padding-top: var(--space-l); } .product_types.product_cat a div{ color: #fff !important; } .product_types.product_cat .scrollBtns{ position: relative; top: 20px; margin-bottom: var(--space-m); margin-bottom: var(--space-m); } .product_types.product_cat .no_scroll{ padding-bottom: var(--space-l); } /* ========================================= Product Category Image Fix ========================================= */ .product_types.product_cat a figure { display: flex !important; align-items: center !important; justify-content: center !important; height: 100px !important; width: 100% !important; margin: 0 auto var(--space-s) !important; } .product_types.product_cat a figure img, .product_types.product_cat a figure svg { max-width: 100px !important; max-height: 100px !important; width: 100% !important; height: 100% !important; object-fit: contain !important; } /* ========================================= 5. Responsive Adjustments ========================================= */ @media (min-width: 1000px) { .product_types > div:not(.scrollBtns) { margin-inline: auto; /* Do NOT force justify-content: center here. Let the .no_scroll class handle it. */ } } @media (max-width: 900px) { .product_types .banner-card { /* Prevent cards from squashing on mobile */ flex: 0 0 140px; scroll-snap-align: center; /* Snap to center of screen */ } /* Ensure buttons have space on mobile */ .scrollBtns { margin-bottom: 0; /* Reset negative margin on mobile if it causes overlap */ margin-top: var(--space-m); padding-right: var(--space-m); } } .hidden{ display: none !important; } .pt-2{ padding-top: 20px !important; } .pb-2{ padding-bottom: 20px !important; } .pl-2{ padding-left: 20px !important; } .pr-2{ padding-right: 20px !important; }