/** Shopify CDN: Minification failed Line 2110:0 Expected "}" to go with "{" **/ /* ========================================================= FONTS ========================================================= */ /* Keep ONE definition for Condensed Bold */ @font-face { font-family: 'HelveticaNeueCondensedBold'; src: url('/cdn/shop/files/Helvetica_Neue_Condensed_Bold.woff?v=1756774888') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* Global headings use Condensed Bold (no global uppercase) */ h1, h2, h3, h4, h5, h6 { font-family: 'HelveticaNeueCondensedBold', Arial, sans-serif !important; font-weight: 700; } /* Exclude headings in Product Info Columns section (cTkftk) */ [data-wetheme-section-id="template--20158072717556__template_product_info_columns_cTkftk"] h1, [data-wetheme-section-id="template--20158072717556__template_product_info_columns_cTkftk"] h2, [data-wetheme-section-id="template--20158072717556__template_product_info_columns_cTkftk"] h3, [data-wetheme-section-id="template--20158072717556__template_product_info_columns_cTkftk"] h4, [data-wetheme-section-id="template--20158072717556__template_product_info_columns_cTkftk"] h5, [data-wetheme-section-id="template--20158072717556__template_product_info_columns_cTkftk"] h6 { font-family: "aktivgrotesk-regular", sans-serif !important; font-weight: 400; text-transform: none; letter-spacing: normal; } /* Aktiv Grotesk family */ @font-face { font-family: 'aktivgrotesk-light'; src: url('/cdn/shop/files/aktivgrotesk-light-webfont.woff2') format('woff2'), url('/cdn/shop/files/aktivgrotesk-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'aktivgrotesk-regular'; src: url('/cdn/shop/files/aktivgrotesk-regular-webfont.woff2') format('woff2'), url('/cdn/shop/files/aktivgrotesk-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'aktivgrotesk-italic'; src: url('/cdn/shop/files/aktivgrotesk-italic-webfont.woff2') format('woff2'), url('/cdn/shop/files/aktivgrotesk-italic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'aktivgrotesk-medium'; src: url('/cdn/shop/files/aktivgrotesk-medium-webfont.woff2') format('woff2'), url('/cdn/shop/files/aktivgrotesk-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'aktivgrotesk-bold'; src: url('/cdn/shop/files/aktivgrotesk-bold-webfont.woff2') format('woff2'), url('/cdn/shop/files/aktivgrotesk-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* ========================================================= GLOBAL TYPOGRAPHY (unchanged) ========================================================= */ body, button, input, select, textarea, .label-font, .spr-form-label { font-family: "aktivgrotesk-regular", sans-serif; } .custom-font, .h1, .h2, .h3, .h4, .h5, .h6, .header-font { font-family: "aktivgrotesk-regular", sans-serif; text-transform: none; letter-spacing: -1px !important; } h2 { font-size: 55px; } /* ========================================================= THEME TWEAKS (your existing rules) ========================================================= */ .image-with-text-overlay-wrapper .homepage-content--image:before { background-color: #002855 !important; } .top-links ul li { font-family: aktivgrotesk-bold,sans-serif; font-size: 14px; } .textarea ul { margin: 0 0 15px 5px; list-style: none; } .textarea ul li { list-style-position: inside; text-indent: -2em; padding-left: 2em; } .textarea ul li:before { content:''; display:inline-block; height:1em; width:1em; background-image:url('/cdn/shop/files/bullet_hex_2.svg'); background-size:contain; background-repeat:no-repeat; padding-left: 2em; margin-bottom: -2px; } .template-index .textarea ul li:before { filter: saturate(10000); } .fixed-icon { position: fixed; z-index: 10; right: 0; top: 45vh; } .fixed-icon a { display: block; height: 40px; transition: transform .3s; } .sticked .site-header__wrapper, .sticked .nav-bar { box-shadow: 0 3px 10px rgba(0,0,0,0.2); } @media only screen and (min-width: 768px) { .fixed-icon a:hover { transform: scale(1.2); } .announcement_bar animated-background-text-colors .announcement_text { padding-top: 12px; padding-bottom: 12px; font-size: 16px; } } /* Mega Menu */ .mega-menu-wrapper .inner .h4.mega-menu-link--title { padding-top: 20px; padding-bottom: 5px; } .mega-menu-wrapper .mega-menu-block .mega-menu--links { display: block; gap: 15px; columns: 2; margin-left: 5%; } .h4.mega-menu-link--title a { font-size: 16px; font-family: aktivgrotesk-regular,sans-serif; text-transform: none; letter-spacing: -1px!important; font-weight: 400; } .menu-link li a { font-size: 14px; letter-spacing: -0.5px; } .site-header button.restock-alerts-notify-button { display:none !important; } @media only screen and (max-width: 880px) { .mega-menu-promo-text--wrapper .mega-menu-promo-text .h4.mega-menu-promo-title { text-transform: none; } .mega-menu-promo-text--wrapper .mega-menu-promo-text .h5.mega-menu-promo-subtitle { font-size: 14px; font-weight: 600; } } /* Modules */ .info-cols--text { font-size: 14px; } /* PDP */ .shopify-payment-terms__container { display: none !important; } .swatch:not(.is-color-swatch):not(.linked-products-swatch) label { font-size: 12px; display: inline; } .swatch:not(.is-color-swatch):not(.linked-products-swatch) .swatch-element input:checked+label { background: #668aaa; background-color: #668aaa; } .swatch .swatch-items-wrapper .swatch-element label:hover, .swatch .swatch-items-wrapper .swatch-element:not(.sibling-hover-active) input:checked+label { outline: 1px solid #668aaa; } .swatch .swatch-items-wrapper .swatch-element { padding-top: 8px; } .swatch:not(.is-color-swatch):not(.linked-products-swatch) .soldout label {} .paymentButtonsWrapper .btn.btn--secondary { background: #002855; border: 1px solid #002855; color: #ffffff; } .paymentButtonsWrapper .btn.btn--secondary:hover { background: #fff; color: #002855; } .swatch-element.variant-swatch.fresh-clean input:checked+label { background: #57697b !important; background-color: #57697b !important; outline: 1px solid #57697b !important; } .swatch-element.variant-swatch.citrus-woods input:checked+label { background: #ffb575 !important; background-color: #ffb575 !important; outline: 1px solid #ffb575 !important; } .swatch-element.variant-swatch.crisp-linen input:checked+label { background: #79abd2 !important; background-color: #79abd2 !important; outline: 1px solid #79abd2 !important; } .swatch:not(.is-color-swatch):not(.linked-products-swatch) .swatch-element.lavendar-fields input:checked+label, .swatch-element.variant-swatch.lavendar-fields input:checked+label { background: #b796ba !important; background-color: #b796ba !important; outline: 1px solid #b796ba !important; } .swatch-element.variant-swatch.lavender-fields.available.active label { background: #b796ba !important; background-color: #b796ba !important; outline: 1px solid #b796ba !important; } .swatch-element.variant-swatch.fragrance-free input:checked+label { background: #719e8b !important; background-color: #719e8b !important; outline: 1px solid #719e8b !important; } .owl-carousel .owl-wrapper { display: flex !important; } .owl-carousel .owl-item img { width: 100%; height: 100%; object-fit: cover; max-width: initial; } .dnSKoG { color: #003da5; } #fsb_background { z-index: 9 !important; } #rc_container { padding: 15px; border: 1px solid rgb(236, 236, 236); font-size: 14px; } #rc_container img { width: auto; } .rc_popup { display:none !important; } div.rc_popup__block { background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); z-index: 9999; } .rc_popup__block__footer { display:none; } div.rc_block__type--active { background-color: #e9e9eb; } .product-recommendations form[action^="/cart/add"] [type=submit] { visibility: visible; } .product-grid--price-font-body, .product-grid--title-font-body, .product-grid--vendor-font-body { font-family: "aktivgrotesk-regular", sans-serif; } .text-with-icon .text-with-icon--content { align-items: center; font-family: 'aktivgrotesk-medium', sans-serif; color: #002857; font-size: 16px; } .bullet-text-pdp { font-size:12px; font-family: "aktivgrotesk-regular", sans-serif; font-weight:normal } #kl-outofstock .klaviyo-bis-trigger { text-align: center; margin: 0px auto; justify-content: center; position: absolute; background: #b1cee8; padding: 10px; color: #1d1e20; } @media screen and (min-width: 768px) { .text-with-icon { float: left; width: 50%; font-weight: bold; font-size: 14px; padding-right:10px; } .collapsible-tab-container { clear: both; } } /* Drawer PDP Quickview */ .drawer .text-with-icon--content { align-items: center; } .drawer .text-with-icon--icon img { width: 32px; } #ShopNowContainer .product-section .collapsible { border-bottom: 0; } #ShopNowContainer .product-section .collapsible::last-child { border-bottom: 1px solid var(--border-color); } #ShopNowContainer #AddToCartForm { text-align: left; } #ShopNowContainer .swatch:not(.is-color-swatch):not(.linked-products-swatch) .swatch-element input:checked+label { background: var(--primary-btn-bg-color); } #ShopNowContainer .swatch .swatch-items-wrapper .swatch-element label:hover, #ShopNowContainer .swatch .swatch-items-wrapper .swatch-element:not(.sibling-hover-active) input:checked+label { outline: 1px solid var(--primary-btn-bg-color); } /* Drawer Cart */ .ajaxcart-item__discounts { margin: 0; } .ajaxcart__product-name+.ajaxcart__product-meta { padding-top: 0; } .ajaxcart__subtotal_header p { margin: 5px 0 0 0; } .ajaxcart__footer .cart__checkout { min-width: 300px; } .drawer__title span:not(.sr-only) { text-align: center; } .cart__shipping { font-size: 14px; } /* sticky cart button */ @media screen and (max-width:767px){ .drawer #fsb_placeholder { margin-top:50px; } } /* PRESS PAGE */ .press-container { display: flex; flex-wrap: wrap; } .press-container > div { background-color: #F4F4F4; color: #6c6c6c; margin: 1%; padding: 20px 20px 30px 20px; width: 23%; font-size: 17px; line-height: 22px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; } .press-container > div a { color: #6c6c6c; } .press-container > div a:hover { color: #003da5; } .press-container .date { font-size: 12px; margin-bottom: 10px; font-weight: 600; } .press-container a { background: transparent !important; font-size: 14px; } #store-locator-find-hex-nearby-hex-performance® .footer-wrapper.fix-to-bottom { position: relative; } /* Account */ .template-customers-account .form-vertical { background-color: #f9f9f9; padding: 30px; } /* Restock Alert */ header .notifyButtonStyle { display: none !important; } /* Accessibility Icon */ body #accessiblyAppWidgetButton.accessibly-app-widget-button-container.middle-right { top: 90% !important; } body button#accessiblyAppDialogButton .accessibly-app-icon-logo.accessibly-app-ignore { width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; } @media only screen and (max-width: 880px) { .press-container > div { width: 48%; font-size: 14px; line-height: 18px; } h2.press { font-size: 26px; } .mobile-nav.nav--meta .mobile-nav__item.sm-icons--wrapper { grid-column-start: 3 !important; } .grid-area--filtering { position: -webkit-sticky; position: sticky; top: 67px; z-index: 999; display: none !important; } } /* sticky cart button */ @media screen and (max-width:480px){ .product-details-wrapper .product-form-block .paymentButtonsWrapper { position: fixed; bottom: 0; width: 100%; z-index: 1499; padding: 15px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); left: 0; } } /* Footer newsletter – stacked full width */ .footer-main #newsletter-footer_form .input-group { display: block; max-width: 500px; margin: 0 auto; } .footer-main #newsletter-footer_form .input-group-field { width: 100%; background-color: #ffffff !important; color: #000000 !important; border: 1px solid #cccccc; border-radius: 4px; padding: 10px; margin-bottom: 10px; } .footer-main #newsletter-footer_form .btn.footer-email-submit { width: 100%; background-color: #57697b !important; color: #ffffff !important; border: none !important; border-radius: 4px; padding: 12px 16px; cursor: pointer; transition: background-color 0.2s ease; } .footer-main #newsletter-footer_form .btn.footer-email-submit:hover { background-color: #7998c2 !important; } /* Hero sweat sizing */ .hero--sweat .banner__heading { font-size: 3rem; line-height: 1.05; letter-spacing: 0.01em; text-wrap: balance; max-width: 18ch; } .hero--sweat .banner__text { max-width: 48ch; } @media screen and (max-width: 749px) { .hero--sweat .banner__heading { font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.15; letter-spacing: 0.005em; max-width: 16ch; } .hero--sweat .banner__text { font-size: 1rem; line-height: 1.45; max-width: 38ch; } .hero--sweat .banner__content, .hero--sweat .banner__box { padding: 20px 16px; } .hero--sweat .banner__content::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 40%); pointer-events: none; border-radius: inherit; } } /* Pattern overlay (only the pattern lives here) */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* hex pattern */ background-image: url("/cdn/shop/files/Rectangle_1.png?v=1756742918"); background-repeat: repeat; background-position: center; background-size: 900px; /* hex size → 700–1100px to taste */ /* subtlety of pattern */ opacity: 0.45; /* 0.25 (fainter) … 0.55 (stronger) */ /* fade the pattern toward the bottom */ -webkit-mask-image: linear-gradient(to bottom, rgb(15, 15, 57) 100%, rgba(0,0,0,0) 0%); mask-image: linear-gradient(to bottom, rgba(15, 15, 57, 1) 100%, rgba(0,0,0,0) 0%); } /* make sure content sits above the overlay */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 > * { position: relative; z-index: 1; background: transparent !important; } /* Mobile: stretch the pattern across (no tiny tiling look) */ @media (max-width: 767px) { #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6::before { background-repeat: no-repeat !important; background-size: 100% auto !important; /* pattern spans full width */ background-position: center top !important; } } /* Main section title (“YOUR ALL-STAR LINE-UP”) */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .homepage-sections--title { font-family: 'HelveticaNeueCondensedBold', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; /* desktop tracking */ font-size: 90px; /* desktop size */ line-height: 1; margin-bottom: 10px; } /* Mobile adjustment */ @media (max-width: 767px) { #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .homepage-sections--title { font-size: 35px; line-height: 1.2; letter-spacing: 0.5px; } } /* Subheadline under the main title (“Explore our full roster…”) — default font */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .section-header p { font-family: inherit; font-weight: 400; text-transform: none; } /* Image titles (“ADDITIVES / DETERGENTS / SPRAYS”) */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 h3 { font-family: 'HelveticaNeueCondensedBold', sans-serif !important; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 32px; line-height: 1.2; } /* Body copy under each image title */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 p { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 20px; line-height: 1.5; text-transform: none; color:rgb(255, 255, 255); } /* Mobile adjustments for this section */ @media (max-width: 767px) { #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 h2 { font-size: 48px; } #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 h3 { font-size: 18px; } #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 p { font-size: 14px; } } /* === All-Star section hover effects === */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item { transition: transform 0.3s ease, box-shadow 0.3s ease; } #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0,0,0,0.25); } /* Headings under each image react on hover */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 h3 { transition: all 0.3s ease; } #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 h3:hover { color: #7998c2; /* accent blue */ letter-spacing: 2px; /* subtle stretch */ cursor: pointer; } /* Entire section: hex pattern overlay brightens on hover */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6::before { transition: opacity 0.4s ease; } #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6:hover::before { opacity: 0.55; /* raise/lower for more/less intensity */ } /* --- Only the hex image lifts; kill any rectangular card shadows --- */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item:hover { transform: none !important; box-shadow: none !important; } /* Common wrappers Shopify themes use around the image */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .homepage-content--image, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .image-bar__item, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .image-with-text-overlay__content-box, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .image-with-text-overlay-wrapper, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .image-with-text-overlay-wrapper * { background: transparent !important; box-shadow: none !important; } /* Let the image shadow extend beyond its wrapper */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .homepage-content--image, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .image-bar__item, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .image-with-text-overlay-wrapper { overflow: visible !important; } /* Lift + glow effect only on hex images */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 img { transition: transform 0.3s ease, filter 0.3s ease; display: block; } #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 img:hover { transform: translateY(-8px); filter: drop-shadow(0 0 20px rgb(255, 255, 255,0.8)); /* Glow follows hex shape */ cursor: pointer; } /* Prevent hover effects on titles + text */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 h3:hover, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 p:hover { transform: none !important; filter: none !important; box-shadow: none !important; } /* ↓ Make the copy under ADDITIVES / DETERGENTS / SPRAYS smaller */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item h3 + *, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item h3 + * p, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item h3 + * li, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item .info-cols--text, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item .info-cols--text p, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item .rte, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item .rte p, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item .textarea, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item .textarea p { font-size: 14px !important; line-height: 1.45 !important; font-family: "aktivgrotesk-regular", sans-serif !important; } @media (max-width: 767px) { #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item h3 + *, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item h3 + * p, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item h3 + * li, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item .info-cols--text, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item .info-cols--text p, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item .rte, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item .rte p, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item .textarea, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item .textarea p { font-size: 13px !important; } } /* ===== MOBILE: one card per view, swipeable (already working) ===== */ @media (max-width: 767px) { #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid { justify-content: center; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 0; } #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .grid__item { flex: 0 0 100%; max-width: 100%; scroll-snap-align: center; } /* Narrow the body copy + add spacing ONLY in the All-Star section */ @media (min-width: 768px) { /* 1) Constrain the paragraph width under each title */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .swiper-slide .info-cols--text, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .swiper-slide .rte, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .swiper-slide h3 + p, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .swiper-slide h3 + .rte, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .swiper-slide .info-cols--text p { max-width: 56ch !important; /* ← adjust: 46–56ch is a sweet spot */ margin: 10px auto 14px !important; /* center under each title */ line-height: 1.5 !important; text-align: center; /* or 'left' if you prefer */ } /* 2) Add a bit more separation between the three columns */ /* If your Swiper version ignores gap, the margin fallback below will do it */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .swiper-wrapper { gap: 55px; /* try 48–64px if you want more room */ } /* Fallback for older Swiper builds / browsers that don’t honor gap */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .swiper-slide { margin-inline: 24px !important; /* increase/decrease to taste */ } } /* Keep mobile full width */ @media (max-width: 767px) { #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .swiper-slide .info-cols--text, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .swiper-slide .rte, #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .swiper-slide h3 + p { max-width: 100% !important; margin: 8px 0 10px !important; } }/* =========== Hover fade for hex cards (desktop) =========== */ @media (hover: hover) and (pointer: fine) { /* 1) Prep: add smooth transition to the image element(s) inside each slide */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .swiper-slide :is(img, .img, .image, .media, .image-bar__content, .hex-image) { transition: opacity .3s ease, filter .3s ease, transform .3s ease; will-change: opacity, transform; } /* 2) On hover: fade + (optional) tiny lift */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .swiper-slide:hover :is(img, .img, .image, .media, .image-bar__content, .hex-image) { opacity: .8 !important; /* stronger fade? try .7 */ transform: translateY(-6px); /* remove this line if you only want fading */ filter: none; } } /* If your theme uses a div with background-image for the hex photo, add a subtle dim on hover */ @media (hover: hover) and (pointer: fine) { #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 .swiper-slide:hover :is(.img, .image, .media, .image-bar__content, .hex-image) { /* background elements don't support opacity per-image; use brightness instead */ filter: brightness(.85); } } }/* HERO banner: headline = HelveticaNeueCondensedBold, no glow */ .content-wrapper--text_dynamic h1, .content-wrapper--text_dynamic h2, .content-wrapper--text_dynamic .banner__heading { font-family: 'HelveticaNeueCondensedBold', Arial, sans-serif !important; font-weight: 700; text-transform: none; /* keep your typed casing */ letter-spacing: .5px; font-size: clamp(36px, 6vw, 60px) !important; line-height: 1.1 !important; color: #fff !important; text-shadow: none !important; } /* HERO banner: supporting copy, no glow */ .content-wrapper--text_dynamic p { font-family: 'aktivgrotesk-regular', sans-serif !important; font-weight: 400; font-size: clamp(16px, 2.6vw, 20px); line-height: 1.45; color: #fff !important; text-shadow: none !important; } /* Hero block: template--20158072717556__image_image_with_text_overlay_9qAgJG Resize ONLY this block's headline */ .homepage-content--template--20158072717556__image_image_with_text_overlay_9qAgJG :is(h1, h2, .homepage-sections--title, .image-with-text-overlay__heading, .banner__heading) { font-size: 70px !important; /* desktop size */ line-height: 1; } /* Mobile size just for this block */ @media (max-width: 767px) { .homepage-content--template--20158072717556__image_image_with_text_overlay_9qAgJG :is(h1, h2, .homepage-sections--title, .image-with-text-overlay__heading, .banner__heading) { font-size: 35px !important; line-height: 1; } } /* Hero block: template--20158072717556__image_image_with_text_overlay_VGPJpY Make ONLY the headline uppercase */ .homepage-content--template--20158072717556__image_image_with_text_overlay_VGPJpY :is(h1, h2, .homepage-sections--title, .image-with-text-overlay__heading, .banner__heading) { text-transform: uppercase !important; letter-spacing: 1px; /* optional: tweak or remove */ } /* Keep any subtext/body copy in normal case */ .homepage-content--template--20158072717556__image_image_with_text_overlay_VGPJpY :is(p, .banner__text, .image-with-text-overlay__subheading) { text-transform: none !important; } /* Force ALL CAPS just for this overlay hero */ .homepage-content--template--20158072717556__image_image_with_text_overlay_Lnxwxr :is(h1, h2, .homepage-sections--title, .image-with-text-overlay__heading, .banner__heading) { text-transform: uppercase !important; letter-spacing: 1px; } /* Hero block 9qAgJG — force ALL CAPS on the headline only */ .homepage-content--template--20158072717556__image_image_with_text_overlay_9qAgJG :is(h1, h2, .homepage-sections--title, .image-with-text-overlay__heading, .banner__heading) { text-transform: uppercase !important; letter-spacing: 1px; /* optional */ } /* Keep any subtext/body copy normal case */ .homepage-content--template--20158072717556__image_image_with_text_overlay_9qAgJG :is(p, .banner__text, .image-with-text-overlay__subheading) { text-transform: none !important; }/* ===== VGPJpY hero: full-width frosted + darker backdrop ===== */ /* 1) Make the full-width section a stacking context */ .homepage-content--template--20158072717556__image_image_with_text_overlay_VGPJpY, [data-wetheme-section-id="template--20158072717556__image_image_with_text_overlay_VGPJpY"] { position: relative; isolation: isolate; /* keeps overlays behind content only in this section */ } /* 2) Kill the old, narrow overlay that sat only behind the text card */ .homepage-content--template--20158072717556__image_image_with_text_overlay_VGPJpY .image-with-text-overlay-wrapper::before, [data-wetheme-section-id="template--20158072717556__image_image_with_text_overlay_VGPJpY"] .image-with-text-overlay-wrapper::before { content: none !important; } /* 3) Full-bleed frosted overlay over the entire hero */ .homepage-content--template--20158072717556__image_image_with_text_overlay_VGPJpY::before, [data-wetheme-section-id="template--20158072717556__image_image_with_text_overlay_VGPJpY"]::before { content: ""; position: absolute; inset: 0; /* cover the whole picture */ z-index: 0; /* sit behind all content */ pointer-events: none; /* Frost + darken */ background: rgba(0, 0, 0, .28); /* darkness: raise/lower .28 */ -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* 4) Ensure the text block has no card background */ .homepage-content--template--20158072717556__image_image_with_text_overlay_VGPJpY .image-with-text-overlay__content-box, [data-wetheme-section-id="template--20158072717556__image_image_with_text_overlay_VGPJpY"] .image-with-text-overlay__content-box { background: transparent !important; border: 0 !important; box-shadow: none !important; position: relative; z-index: 1; /* above the frosted overlay */ max-width: 720px; margin-inline: auto; padding: 24px 28px; } /* 5) White CTA (same as before) */ .homepage-content--template--20158072717556__image_image_with_text_overlay_VGPJpY :is(.btn, a.btn, .button), [data-wetheme-section-id="template--20158072717556__image_image_with_text_overlay_VGPJpY"] :is(.btn, a.btn, .button) { display: block; width: 100%; margin-top: 16px; padding: 16px 22px; border-radius: 12px; background: #ffffff; color: #003da5; border: 1px solid #ffffff; font-weight: 700; text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.18); transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; } .homepage-content--template--20158072717556__image_image_with_text_overlay_VGPJpY :is(.btn, a.btn, .button):hover, [data-wetheme-section-id="template--20158072717556__image_image_with_text_overlay_VGPJpY"] :is(.btn, a.btn, .button):hover { transform: translateY(-1px); background: transparent; color: #ffffff; border-color: #ffffff; box-shadow: 0 10px 22px rgba(0,0,0,.24); } /* 6) Mobile tweaks */ @media (max-width: 767px) { .homepage-content--template--20158072717556__image_image_with_text_overlay_VGPJpY .image-with-text-overlay__content-box, [data-wetheme-section-id="template--20158072717556__image_image_with_text_overlay_VGPJpY"] .image-with-text-overlay__content-box { max-width: 92vw; padding: 16px 18px; } } /* === Bigger "AI Before/After" heading just in the lilac section === */ /* Section id: template--20158072717556__175685860807c8d2c6 */ /* Heading handle: ai-before-after-heading-awkxvlzzxnhzouexzcaigenblock849852fg6anc6 */ #shopify-section-template--20158072717556__175685860807c8d2c6 .ai-before-after-heading-awkxvlzzxnhzouexzcaigenblock849852fg6anc6, #shopify-section-template--20158072717556__175685860807c8d2c6 #ai-before-after-heading-awkxvlzzxnhzouexzcaigenblock849852fg6anc6, #shopify-section-template--20158072717556__175685860807c8d2c6 .ai-before-after-heading-awkxvlzzxnhzouexzcaigenblock849852fg6anc6 h1, #shopify-section-template--20158072717556__175685860807c8d2c6 .ai-before-after-heading-awkxvlzzxnhzouexzcaigenblock849852fg6anc6 h2 { font-family: 'HelveticaNeueCondensedBold', Arial, sans-serif !important; font-weight: 700; text-transform: uppercase; /* remove if you don't want ALL CAPS */ letter-spacing: 1px; font-size: 64px !important; /* desktop size — tweak as needed */ line-height: 1.05 !important; margin: 0 0 12px; color: inherit; /* keeps whatever color you set elsewhere */ } /* Mobile size */ @media (max-width: 767px) { #shopify-section-template--20158072717556__175685860807c8d2c6 .ai-before-after-heading-awkxvlzzxnhzouexzcaigenblock849852fg6anc6, #shopify-section-template--20158072717556__175685860807c8d2c6 #ai-before-after-heading-awkxvlzzxnhzouexzcaigenblock849852fg6anc6, #shopify-section-template--20158072717556__175685860807c8d2c6 .ai-before-after-heading-awkxvlzzxnhzouexzcaigenblock849852fg6anc6 h1, #shopify-section-template--20158072717556__175685860807c8d2c6 .ai-before-after-heading-awkxvlzzxnhzouexzcaigenblock849852fg6anc6 h2 { font-size: 45px !important; /* mobile size — tweak as needed */ letter-spacing: 1px; line-height: 1.12 !important; } }/* Mobile: center the AI Before/After heading inside the lilac section */ @media (max-width: 767px) { #shopify-section-template--20158072717556__175685860807c8d2c6 .ai-before-after-heading-awkxvlzzxnhzouexzcaigenblock849852fg6anc6, #shopify-section-template--20158072717556__175685860807c8d2c6 #ai-before-after-heading-awkxvlzzxnhzouexzcaigenblock849852fg6anc6 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* If the theme sets alignment on a wrapper, force that to center too */ #shopify-section-template--20158072717556__175685860807c8d2c6 .sitewide--title-wrapper, #shopify-section-template--20158072717556__175685860807c8d2c6 .image-with-text-overlay__content-box { text-align: center !important; } } /* === White section with faint hex pattern + fade === */ /* Section: shopify-section-template--20158072717556__175685860807c8d2c6 */ #shopify-section-template--20158072717556__175685860807c8d2c6 { position: relative; background: #ffffff !important; /* white base */ overflow: hidden; /* keep overlay clipped to section */ } /* Pattern overlay */ #shopify-section-template--20158072717556__175685860807c8d2c6::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* hex pattern */ background-image: url("/cdn/shop/files/Rectangle_1.png?v=1756742918"); background-repeat: repeat; background-position: center; background-size: 900px; /* adjust hex size (700–1200px) */ opacity: 0.65; /* pattern strength: 0.15–0.35 looks nice */ /* fade pattern toward the bottom */ -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); } /* Ensure content sits above the overlay */ #shopify-section-template--20158072717556__175685860807c8d2c6 > * { position: relative; z-index: 1; background: transparent !important; } /* Mobile: make the pattern tiles larger so they don’t look tiny */ @media (max-width: 767px) { #shopify-section-template--20158072717556__175685860807c8d2c6::before { background-size: 1200px; opacity: 0.18; /* slightly softer on small screens */ } } /* ==== Animated Text — template--20158072717556__af3e824e-6ca9-4ac4-9510-a07cb14e4a66 ==== */ .section--template--20158072717556__af3e824e-6ca9-4ac4-9510-a07cb14e4a66{ --hero-text-width:22ch; /* controls wrap + CTA width */ } /* Rotating words + all headline parts */ .section--template--20158072717556__af3e824e-6ca9-4ac4-9510-a07cb14e4a66 .content-wrapper--text_static *{ font-family:'HelveticaNeueCondensedBold',Arial,sans-serif!important; letter-spacing:.5px; line-height:.9!important; max-width: 660px!important; } /* CTA spacing + sizing */ .section--template--20158072717556__af3e824e-6ca9-4ac4-9510-a07cb14e4a66 .content-wrapper--button{margin-top:14px} .section--template--20158072717556__af3e824e-6ca9-4ac4-9510-a07cb14e4a66 a.homepage-section-btn{ display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; line-height:1; padding:14px 28px; border-radius:12px; min-width:12rem; font-size:16px; } @media (min-width:768px){ .section--template--20158072717556__af3e824e-6ca9-4ac4-9510-a07cb14e4a66 a.homepage-section-btn{ min-width:18rem; font-size:18px; } } @media (max-width:767px){ .section--template--20158072717556__af3e824e-6ca9-4ac4-9510-a07cb14e4a66 :is(.content-wrapper--text_dynamic .dynamic-words span, .content-wrapper--text_dynamic, .content-wrapper--text_static *){ font-size:35px!important; line-height:1!important; } } /* Mobile: enlarge pattern so it doesn’t look tiny */ @media (max-width: 767px) { #shopify-section-template--20158073078004__1757485429fb1a233b::before { background-size: 1200px auto; } } /* === Science page: Ferris-wheel callouts =============================== */ /* Section scope */ #shopify-section-template--20158073078004__1757485429fb1a233b { --ferris-size: min(560px, 88vw); /* overall wheel size */ --ferris-radius: calc(var(--ferris-size) / 2.15); --ferris-speed: 28s; /* rotation speed */ } /* Wheel wrapper */ #shopify-section-template--20158073078004__1757485429fb1a233b .science-ferris { position: relative; width: var(--ferris-size); aspect-ratio: 1 / 1; margin: 28px auto 40px; } /* Orbit layer that rotates everything */ #shopify-section-template--20158073078004__1757485429fb1a233b .science-ferris__orbit { position: absolute; inset: 0; animation: science-ferris-spin var(--ferris-speed) linear infinite; transform-origin: 50% 50%; } /* Each callout position on the circle */ #shopify-section-template--20158073078004__1757485429fb1a233b .science-ferris__item { position: absolute; top: 50%; left: 50%; /* place on circle: rotate to angle, move out by radius, counter-rotate to keep upright */ transform: rotate(var(--a)) translate(var(--ferris-radius)) rotate(calc(-1 * var(--a))); transform-origin: 0 0; } /* The visible card; counter-rotate to stay upright while orbit spins */ #shopify-section-template--20158073078004__1757485429fb1a233b .science-ferris__card { animation: science-ferris-spin-rev var(--ferris-speed) linear infinite; background: #fff; color: #002855; border-radius: 12px; padding: 12px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.10); min-width: 140px; text-align: center; font: 600 15px/1.2 "aktivgrotesk-regular", sans-serif; } /* Distribute 6 callouts (change angles if you have 4/5/etc.) */ #shopify-section-template--20158073078004__1757485429fb1a233b .science-ferris__item:nth-child(1){ --a: 0deg; } #shopify-section-template--20158073078004__1757485429fb1a233b .science-ferris__item:nth-child(2){ --a: 60deg; } #shopify-section-template--20158073078004__1757485429fb1a233b .science-ferris__item:nth-child(3){ --a: 120deg; } #shopify-section-template--20158073078004__1757485429fb1a233b .science-ferris__item:nth-child(4){ --a: 180deg; } #shopify-section-template--20158073078004__1757485429fb1a233b .science-ferris__item:nth-child(5){ --a: 240deg; } #shopify-section-template--20158073078004__1757485429fb1a233b .science-ferris__item:nth-child(6){ --a: 300deg; } /* Mobile tweaks: smaller wheel, slower spin, stack fallback if needed */ @media (max-width: 767px) { #shopify-section-template--20158073078004__1757485429fb1a233b { --ferris-size: 320px; --ferris-radius: calc(var(--ferris-size) / 2.1); --ferris-speed: 34s; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { #shopify-section-template--20158073078004__1757485429fb1a233b .science-ferris__orbit, #shopify-section-template--20158073078004__1757485429fb1a233b .science-ferris__card { animation: none !important; } } /* Keyframes */ @keyframes science-ferris-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes science-ferris-spin-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } /* SCIENCE page – remove white card behind callout PNGs */ #shopify-section-template--20158073078004__1757485429fb1a233b :is(.ai-callout-showcase__callout-image-container-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw, [class^="ai-callout-showcase__callout-image-container-"]) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* Nuke any pseudo backgrounds some themes add */ #shopify-section-template--20158073078004__1757485429fb1a233b [class^="ai-callout-showcase__callout-image-container-"]::before, #shopify-section-template--20158073078004__1757485429fb1a233b [class^="ai-callout-showcase__callout-image-container-"]::after { content: none !important; background: transparent !important; box-shadow: none !important; } /* Ensure inner wrappers + the image itself don’t paint a bg */ #shopify-section-template--20158073078004__1757485429fb1a233b [class^="ai-callout-showcase__callout-image-container-"] :is(.image,.media,.card,.card__inner,.content-box,picture,img) { background: transparent !important; box-shadow: none !important; border: 0 !important; } #shopify-section-template--20158073078004__1757485429fb1a233b [class^="ai-callout-showcase__callout-image-container-"] img { display: block; } /* SCIENCE page section — tighten headline spacing (desktop only) */ @media (min-width: 768px) { /* Left column headline (tries common layouts first) */ #shopify-section-template--20158073078004__1757485429fb1a233b .grid > .grid__item:first-child :is(h1, h2, .homepage-sections--title, .section-title, .image-with-text__heading), /* Fallback: any main heading in this section */ #shopify-section-template--20158073078004__1757485429fb1a233b :is(h1, h2, .homepage-sections--title, .section-title, .image-with-text__heading) { letter-spacing: -0.5px !important; /* tighter tracking */ line-height: 1.02 !important; /* tighter leading */ margin-bottom: 0.25em; /* optional: reduces gap below */ font-size: 75px !important; /* ← desktop size */ } } /* SCIENCE page — white + hex background for specific section Section: shopify-section-template--20158073078004__image_image_with_text_4cU8Kj */ #shopify-section-template--20158073078004__image_image_with_text_4cU8Kj { position: relative; isolation: isolate; /* keep the overlay behind content in this section only */ background: linear-gradient(180deg, #f3f5f8 0%, #ffffff 0%) !important; overflow: hidden; } /* Clear any inner wrappers that might paint their own background */ #shopify-section-template--20158073078004__image_image_with_text_4cU8Kj :is(.section, .section--padding, .homepage-sections-wrapper, .page-width, [class*="color-"], [class*="gradient"], .image-with-text, .image-with-text__content) { background: transparent !important; } /* Hex pattern overlay + gentle fade toward the bottom */ #shopify-section-template--20158073078004__image_image_with_text_4cU8Kj::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/cdn/shop/files/Rectangle_1.png?v=1756742918") repeat center / 900px; /* hex size; try 700–1200px */ opacity: 0.65; /* pattern strength */ -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 100%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 100%, rgba(0,0,0,0) 100%); } /* Ensure content sits above the overlay */ #shopify-section-template--20158073078004__image_image_with_text_4cU8Kj > * { position: relative; z-index: 1; background: transparent !important; } /* Mobile: make pattern a bit larger so it doesn't look tiny */ @media (max-width: 767px) { #shopify-section-template--20158073078004__image_image_with_text_4cU8Kj::before { background-size: 1200px auto; opacity: 0.30; /* slightly softer on small screens (optional) */ } } /* SCIENCE – “Image with text” section headline */ #shopify-section-template--20158073078004__image_image_with_text_4cU8Kj :is(h1, h2, .homepage-sections--title, .image-with-text__heading, .image-with-text-overlay__heading) { font-family: 'HelveticaNeueCondensedBold', Arial, sans-serif !important; font-weight: 700; text-transform: uppercase; font-size: 70px !important; /* desktop size */ letter-spacing: -0.8px !important;/* tighter tracking */ line-height: 0.92 !important; /* tighter line spacing */ margin-bottom: 12px; } /* Mobile adjustments */ @media (max-width: 767px) { #shopify-section-template--20158073078004__image_image_with_text_4cU8Kj :is(h1, h2, .homepage-sections--title, .image-with-text__heading, .image-with-text-overlay__heading) { font-size: 34px !important; letter-spacing: -0.25px !important; line-height: 1.05 !important; /* text-align: center !important; ← uncomment if you want it centered on mobile */ } } /* SCIENCE – Animated Text block: match headline font */ #shopify-section-template--20158073078004__animated_text_WVeWtV .content-wrapper--text_dynamic, #shopify-section-template--20158073078004__animated_text_WVeWtV .content-wrapper--text_dynamic .dynamic-words, #shopify-section-template--20158073078004__animated_text_WVeWtV .content-wrapper--text_dynamic .dynamic-words span, #shopify-section-template--20158073078004__animated_text_WVeWtV .content-wrapper--text_static * { font-family: 'HelveticaNeueCondensedBold', Arial, sans-serif !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: -0.5px; /* tweak if you want tighter/looser */ font-size: 60px !important; /* desktop size */ line-height: 0.8 !important; } #shopify-section-template--20158073078004__text_rich_text_ccGfCh::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/cdn/shop/files/Rectangle_1.png?v=1756742918") repeat center / 900px; opacity: 0.65; /* requested strength */ /* removed mask-image/gradient fade */ } /* keep content above overlay */ #shopify-section-template--20158073078004__text_rich_text_ccGfCh > * { position: relative; z-index: 1; background: transparent !important; } /* optional: larger tiles on mobile (no opacity change) */ @media (max-width: 767px) { #shopify-section-template--20158073078004__text_rich_text_ccGfCh::before { background-size: 1200px; } } /* SCIENCE – Image with Text (aVUUTh): hex pattern + top-only gradient */ #shopify-section-template--20158073078004__image_image_with_text_aVUUTh { position: relative; overflow: hidden; isolation: isolate; /* keep overlays behind content */ background: #ffffff !important; } /* Hex pattern visible only toward the TOP */ #shopify-section-template--20158073078004__image_image_with_text_aVUUTh::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* hex pattern */ background: url("/cdn/shop/files/Rectangle_1.png?v=1756742918") repeat center / 900px; opacity: 0.45; /* fade the pattern away as you go down (top-only coverage) */ -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,0) 55%); mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,0) 55%); } /* Soft white wash only at the TOP */ #shopify-section-template--20158073078004__image_image_with_text_aVUUTh::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* top-to-transparent gradient */ background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 60%); } /* keep actual content above overlays */ #shopify-section-template--20158073078004__image_image_with_text_aVUUTh > * { position: relative; z-index: 1; background: transparent !important; } /* mobile: larger tiles so they don't look tiny */ @media (max-width: 767px) { #shopify-section-template--20158073078004__image_image_with_text_aVUUTh::before { background-size: 1200px; } } /* SCIENCE – Blocks (nfJ4eT): hex pattern, no gradient */ #shopify-section-template--20158073078004__blocks_nfJ4eT { position: relative; overflow: hidden; isolation: isolate; /* keep overlays behind content */ background: #ffffff !important; /* base behind the pattern */ } /* Hex pattern layer */ #shopify-section-template--20158073078004__blocks_nfJ4eT::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/cdn/shop/files/Rectangle_1.png?v=1756742918"); background-repeat: repeat; background-position: center; background-size: 900px; /* tile size; try 700–1200px */ opacity: 0.65; /* pattern strength */ } /* keep section content above the pattern */ #shopify-section-template--20158073078004__blocks_nfJ4eT > * { position: relative; z-index: 1; background: transparent !important; } /* mobile: larger tiles so they don’t look tiny */ @media (max-width: 767px) { #shopify-section-template--20158073078004__blocks_nfJ4eT::before { background-size: 1200px; } } /* AI Before/After split block — bigger headline */ .ai-before-after-split-aby9yk054bhnkekntdaigenblock849852fa9fnxw :is(h1,h2,h3,.homepage-sections--title,.section-header h1,.section-header h2,.ai-before-after-split__title), .ai-before-after-split-aby9yk054bhnkekntdaigenblock849852fa9fnxw--reverse :is(h1,h2,h3,.homepage-sections--title,.section-header h1,.section-header h2,.ai-before-after-split__title) { font-family: 'HelveticaNeueCondensedBold', Arial, sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px; font-size: 112px !important; /* desktop */ line-height: 0.85 !important; } /* Mobile sizing */ @media (max-width: 767px) { .ai-before-after-split-aby9yk054bhnkekntdaigenblock849852fa9fnxw :is(h1,h2,h3,.homepage-sections--title,.section-header h1,.section-header h2,.ai-before-after-split__title), .ai-before-after-split-aby9yk054bhnkekntdaigenblock849852fa9fnxw--reverse :is(h1,h2,h3,.homepage-sections--title,.section-header h1,.section-header h2,.ai-before-after-split__title) { font-size: 36px !important; line-height: 1.05 !important; text-align: center; /* optional—remove if you don't want centering */ } } .header { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } /* For dark backgrounds, use this variation */ .header--dark { background: rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* === Science: hex pattern background (no gradient) === */ /* Section: shopify-section-template--20158073078004__blocks_dx4Khz */ #shopify-section-template--20158073078004__blocks_dx4Khz { position: relative; isolation: isolate; background: transparent !important; /* keep the base clean */ overflow: hidden; } /* If the theme paints inner wrappers, clear them */ #shopify-section-template--20158073078004__blocks_dx4Khz .section, #shopify-section-template--20158073078004__blocks_dx4Khz .section--padding, #shopify-section-template--20158073078004__blocks_dx4Khz .homepage-sections-wrapper, #shopify-section-template--20158073078004__blocks_dx4Khz .page-width, #shopify-section-template--20158073078004__blocks_dx4Khz [class*="color-"], #shopify-section-template--20158073078004__blocks_dx4Khz [class*="gradient"] { background: transparent !important; } /* Hex overlay */ #shopify-section-template--20158073078004__blocks_dx4Khz::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/cdn/shop/files/Rectangle_1.png?v=1756742918") repeat center / 900px auto; /* change 900px to resize pattern */ opacity: 0.95; /* tweak: 0.25–0.65 */ } /* Keep actual content above the pattern */ #shopify-section-template--20158073078004__blocks_dx4Khz > * { position: relative; z-index: 1; background: transparent !important; } /* Mobile: make tiles larger so they don’t look tiny */ @media (max-width: 767px) { #shopify-section-template--20158073078004__blocks_dx4Khz::before { background-size: 1200px auto; opacity: 0.55; /* optional soften on small screens */ } } /* Ensure inner wrappers don't override it */ #shopify-section-template--20158073078004__text_rich_text_ccGfCh .section, #shopify-section-template--20158073078004__text_rich_text_ccGfCh .section--padding, #shopify-section-template--20158073078004__text_rich_text_ccGfCh .page-width, #shopify-section-template--20158073078004__text_rich_text_ccGfCh [class*="color-"], #shopify-section-template--20158073078004__text_rich_text_ccGfCh [class*="gradient"] { background: transparent !important; } /* Science rich text section: white H2 + white body copy */ #shopify-section-template--20158073078004__text_rich_text_ccGfCh :is(h2, .h2) { font-family: 'HelveticaNeueCondensedBold', Arial, sans-serif !important; color: #fff !important; text-transform: uppercase; /* remove if you don't want ALL CAPS */ letter-spacing: .5px; } #shopify-section-template--20158073078004__text_rich_text_ccGfCh :is(p, .rte, .rte p) { color: #fff !important; } /* Block: make background #7998c2 and set heading/body to white */ #shopify-block-AT0JKNjhMT0ZrZkZZT__ai_gen_block_849852f_Ccp3Dy { background: #7998c2 !important; /* replaces deep green */ background-image: none !important; /* kill any theme gradient */ } /* Headline style (H2) inside this block */ #shopify-block-AT0JKNjhMT0ZrZkZZT__ai_gen_block_849852f_Ccp3Dy :is(h2, .h2) { font-family: 'HelveticaNeueCondensedBold', Arial, sans-serif !important; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #fff !important; } /* Paragraph/body copy inside this block */ #shopify-block-AT0JKNjhMT0ZrZkZZT__ai_gen_block_849852f_Ccp3Dy :is(p, .rte, .rte p) { color: #fff !important; } /* (Optional) make links white too */ #shopify-block-AT0JKNjhMT0ZrZkZZT__ai_gen_block_849852f_Ccp3Dy a { color: #fff !important; } /* Metallic blue + hex pattern (no gradient) */ #shopify-block-AT0JKNjhMT0ZrZkZZT__ai_gen_block_849852f_Ccp3Dy { position: relative; isolation: isolate; background: linear-gradient(180deg, #157061 0%, rgb(4,49,45) 100%) !important; /* metallic blue */ overflow: hidden; } /* hex overlay */ #shopify-block-AT0JKNjhMT0ZrZkZZT__ai_gen_block_849852f_Ccp3Dy::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/cdn/shop/files/Rectangle_1.png?v=1756742918") repeat center / 900px; opacity: 0.85; /* adjust 0.3–0.65 to taste */ } /* keep inner wrappers transparent and above pattern */ #shopify-block-AT0JKNjhMT0ZrZkZZT__ai_gen_block_849852f_Ccp3Dy > *, #shopify-block-AT0JKNjhMT0ZrZkZZT__ai_gen_block_849852f_Ccp3Dy .section, #shopify-block-AT0JKNjhMT0ZrZkZZT__ai_gen_block_849852f_Ccp3Dy .section--padding, #shopify-block-AT0JKNjhMT0ZrZkZZT__ai_gen_block_849852f_Ccp3Dy [class*="color-"], #shopify-block-AT0JKNjhMT0ZrZkZZT__ai_gen_block_849852f_Ccp3Dy [class*="gradient"] { position: relative; z-index: 1; background: transparent !important; } /* ==== Science – Rich Text (ccGfCh) | single source of truth ==== */ #shopify-section-template--20158073078004__text_rich_text_ccGfCh { position: relative; overflow: hidden; background: #ffffff !important; /* keep this section light */ isolation: isolate; /* keep overlay behind content */ } /* Hex pattern overlay */ #shopify-section-template--20158073078004__text_rich_text_ccGfCh::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/cdn/shop/files/Rectangle_1.png?v=1756742918") repeat center / 900px; opacity: 0.65; /* pattern strength */ } /* Keep actual content above the overlay and transparent */ #shopify-section-template--20158073078004__text_rich_text_ccGfCh > *, #shopify-section-template--20158073078004__text_rich_text_ccGfCh .section, #shopify-section-template--20158073078004__text_rich_text_ccGfCh .section--padding, #shopify-section-template--20158073078004__text_rich_text_ccGfCh .page-width, #shopify-section-template--20158073078004__text_rich_text_ccGfCh [class*="color-"], #shopify-section-template--20158073078004__text_rich_text_ccGfCh [class*="gradient"] { position: relative; z-index: 1; background: transparent !important; } /* Typography inside the section */ #shopify-section-template--20158073078004__text_rich_text_ccGfCh :is(h1,h2,h3,h4,h5,h6,.h2) { font-family: 'HelveticaNeueCondensedBold', Arial, sans-serif !important; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #002855 !important; /* dark headings on light bg */ } #shopify-section-template--20158073078004__text_rich_text_ccGfCh :is(p, .rte, .rte p, li) { font-family: "aktivgrotesk-regular", sans-serif; color: #002855 !important; /* dark body copy */ line-height: 1.5; } /* Links inside this section */ #shopify-section-template--20158073078004__text_rich_text_ccGfCh a { color: #003da5 !important; text-decoration: underline; } /* Mobile pattern scale only */ @media (max-width: 767px) { #shopify-section-template--20158073078004__text_rich_text_ccGfCh::before { background-size: 1200px; } } /* Make All-Star (BbyAR6) text dark on the new white background */ #shopify-section-template--20158072717556__template_product_info_columns_BbyAR6 :is(h1,h2,h3,h4,h5,h6,p,.rte,.rte p,li,a) { color: #002855 !important; } /* FIX: AI Before/After section (175685860807c8d2c6) headline size */ #shopify-section-template--20158072717556__175685860807c8d2c6 :is(h1, h2, .homepage-sections--title, .section-title, .image-with-text__heading, .ai-before-after-heading-awkxvlzzxnhzouexzcaigenblock849852fg6anc6) { font-size: clamp(34px, 5.2vw, 56px) !important; /* tweak max (56px) to taste */ line-height: 1.05 !important; } /* Optional: tighter mobile */ @media (max-width: 767px) { #shopify-section-template--20158072717556__175685860807c8d2c6 :is(h1, h2, .homepage-sections--title, .section-title, .image-with-text__heading, .ai-before-after-heading-awkxvlzzxnhzouexzcaigenblock849852fg6anc6) { font-size: clamp(24px, 7vw, 34px) !important; } } /* FIX: AI Before/After section (175685860807c8d2c6) headline size */ #shopify-section-template--20158072717556__175685860807c8d2c6 :is(h1, h2, .homepage-sections--title, .section-title, .image-with-text__heading, .ai-before-after-heading-awkxvlzzxnhzouexzcaigenblock849852fg6anc6) { font-size: clamp(34px, 5.2vw, 56px) !important; /* tweak max (56px) to taste */ line-height: 1.05 !important; } /* Optional: tighter mobile */ @media (max-width: 767px) { #shopify-section-template--20158072717556__175685860807c8d2c6 :is(h1, h2, .homepage-sections--title, .section-title, .image-with-text__heading, .ai-before-after-heading-awkxvlzzxnhzouexzcaigenblock849852fg6anc6) { font-size: clamp(24px, 7vw, 34px) !important; } } /* === Science: image-with-text (yg7T3F) — white base + hex pattern === */ #shopify-section-template--20158073078004__image_image_with_text_yg7T3F { position: relative; isolation: isolate; /* keep overlay behind content */ background: #ffffff !important; /* solid white base */ background-image: none !important; /* kill any theme gradient */ overflow: hidden; } /* Hex pattern overlay (no fades/masks) */ #shopify-section-template--20158073078004__image_image_with_text_yg7T3F::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/cdn/shop/files/Rectangle_1.png?v=1756742918") repeat center / 900px auto; opacity: 0.50; /* 0.18–0.40 to taste */ -webkit-mask: none !important; mask: none !important; mix-blend-mode: normal !important; filter: none !important; } /* Keep inner wrappers transparent and above the overlay */ #shopify-section-template--20158073078004__image_image_with_text_yg7T3F > *, #shopify-section-template--20158073078004__image_image_with_text_yg7T3F :is(.section, .section--padding, .homepage-sections-wrapper, .page-width, [class*="color-"], [class*="gradient"]) { position: relative; z-index: 1; background: transparent !important; } /* (Optional) mobile: larger tiles + softer */ @media (max-width: 767px) { #shopify-section-template--20158073078004__image_image_with_text_yg7T3F::before { background-size: 1200px auto; opacity: 0.20; } } /* === Science section (1757485429fb1a233b) — white + hex @ 0.55, no fades === */ #shopify-section-template--20158073078004__1757485429fb1a233b { position: relative; isolation: isolate; /* keep overlay behind content */ background: #ffffff !important; /* solid white base */ overflow: hidden; } /* Hex pattern overlay (no gradient, no mask) */ #shopify-section-template--20158073078004__1757485429fb1a233b::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/cdn/shop/files/Rectangle_1.png?v=1756742918") repeat center / 900px; opacity: 0.55; /* ← your requested strength */ /* ensure NO fade/mask/filters */ -webkit-mask: none !important; mask: none !important; -webkit-mask-image: none !important; mask-image: none !important; mix-blend-mode: normal !important; filter: none !important; } /* Keep actual content above the overlay + transparent */ #shopify-section-template--20158073078004__1757485429fb1a233b > *, #shopify-section-template--20158073078004__1757485429fb1a233b :is(.section, .section--padding, .homepage-sections-wrapper, .page-width, [class*="color-"], [class*="gradient"]) { position: relative; z-index: 1; background: transparent !important; } /* Optional: mobile tile size */ @media (max-width: 767px) { #shopify-section-template--20158073078004__1757485429fb1a233b::before { background-size: 1200px; } } /* Kill background/gradients on the AI callout wrapper */ #shopify-section-template--20158073078004__1757485429fb1a233b .ai-callout-showcase-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw { background: transparent !important; background-image: none !important; } /* Also kill any overlay it adds */ #shopify-section-template--20158073078004__1757485429fb1a233b .ai-callout-showcase-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw::before, #shopify-section-template--20158073078004__1757485429fb1a233b .ai-callout-showcase-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw::after { content: none !important; background: transparent !important; background-image: none !important; -webkit-mask: none !important; mask: none !important; } /* === AI block (17584095718fea5159) — white + hex pattern, no fades === */ #shopify-section-template--20158072717556__17584095718fea5159 { position: relative; isolation: isolate; /* keep overlay behind content */ background: #ffffff !important; /* solid white base */ overflow: hidden; } /* Hex overlay */ #shopify-section-template--20158072717556__17584095718fea5159::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/cdn/shop/files/Rectangle_1.png?v=1756742918") repeat center / 900px; /* adjust tile size to taste */ opacity: 0.55; /* pattern strength */ /* ensure no fades/masks */ -webkit-mask: none !important; mask: none !important; -webkit-mask-image: none !important; mask-image: none !important; mix-blend-mode: normal !important; filter: none !important; } /* Keep inner wrappers transparent and above the overlay */ #shopify-section-template--20158072717556__17584095718fea5159 > *, #shopify-section-template--20158072717556__17584095718fea5159 :is(.section, .section--padding, .homepage-sections-wrapper, .page-width, [class*="color-"], [class*="gradient"]) { position: relative; z-index: 1; background: transparent !important; background-image: none !important; } /* Optional: larger tiles on mobile */ @media (max-width: 767px) { #shopify-section-template--20158072717556__17584095718fea5159::before { background-size: 1200px; } } /* Rich Text (iXdgp4) — white + hex pattern, no fades */ #shopify-section-template--20158072717556__text_rich_text_iXdgp4 { position: relative; isolation: isolate; /* keep overlay behind content */ background: #ffffff !important; /* solid base */ overflow: hidden; } /* Hex overlay */ #shopify-section-template--20158072717556__text_rich_text_iXdgp4::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/cdn/shop/files/Rectangle_1.png?v=1756742918") repeat center / 900px; /* tweak tile size 700–1200px */ opacity: 0.55; /* pattern strength */ /* ensure no fades/masks */ -webkit-mask: none !important; mask: none !important; -webkit-mask-image: none !important; mask-image: none !important; mix-blend-mode: normal !important; filter: none !important; } /* Keep inner wrappers transparent and above the pattern */ #shopify-section-template--20158072717556__text_rich_text_iXdgp4 > *, #shopify-section-template--20158072717556__text_rich_text_iXdgp4 :is(.section, .section--padding, .homepage-sections-wrapper, .page-width, [class*="color-"], [class*="gradient"]) { position: relative; z-index: 1; background: transparent !important; background-image: none !important; } /* Rich Text (iXdgp4) — white + hex pattern, no fades */ #shopify-section-template--20158072717556__text_rich_text_iXdgp4 { position: relative; isolation: isolate; /* keep overlay behind content */ background: #ffffff !important; /* solid base */ overflow: hidden; } /* Hex overlay */ #shopify-section-template--20158072717556__text_rich_text_iXdgp4::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/cdn/shop/files/Rectangle_1.png?v=1756742918") repeat center / 900px; /* tweak tile size 700–1200px */ opacity: 0.55; /* pattern strength */ /* ensure no fades/masks */ -webkit-mask: none !important; mask: none !important; -webkit-mask-image: none !important; mask-image: none !important; mix-blend-mode: normal !important; filter: none !important; } /* Keep inner wrappers transparent and above the pattern */ #shopify-section-template--20158072717556__text_rich_text_iXdgp4 > *, #shopify-section-template--20158072717556__text_rich_text_iXdgp4 :is(.section, .section--padding, .homepage-sections-wrapper, .page-width, [class*="color-"], [class*="gradient"]) { position: relative; z-index: 1; background: transparent !important; background-image: none !important; } /* === Press logos (TtGUzN) — navy + hex pattern, no fades === */ #shopify-section-template--20158072717556__image_logo_list_TtGUzN { position: relative; isolation: isolate; /* keep overlay behind content */ background: #002855 !important; /* solid navy base */ overflow: hidden; } /* Hex overlay (sits behind the logos) */ #shopify-section-template--20158072717556__image_logo_list_TtGUzN::before { content: ""; position: absolute; inset: 0; z-index: 0; /* lower than content */ pointer-events: none; background: url("/cdn/shop/files/Rectangle_1.png?v=1756742918") repeat center / 900px; /* tile size: 700–1200px to taste */ opacity: 0.30; /* adjust 0.20–0.45 so logos stay readable */ /* no gradients/masks */ -webkit-mask: none !important; mask: none !important; mix-blend-mode: normal !important; filter: none !important; } /* Make sure inner wrappers are transparent and above the pattern */ #shopify-section-template--20158072717556__image_logo_list_TtGUzN > *, #shopify-section-template--20158072717556__image_logo_list_TtGUzN :is(.section, .section--padding, .homepage-sections-wrapper, .page-width, [class*="color-"], [class*="gradient"]) { position: relative; z-index: 1; background: transparent !important; background-image: none !important; /* kill theme gradients */ } /* (Optional) Mobile: larger tiles / slightly softer pattern */ @media (max-width: 767px) { #shopify-section-template--20158072717556__image_logo_list_TtGUzN::before { background-size: 1200px; opacity: 0.24; } } /* === Section (3643d38b-24f2-4040-ab67-4b4b44a63aab) — white + hex, no fades === */ #shopify-section-template--20158072717556__3643d38b-24f2-4040-ab67-4b4b44a63aab { position: relative; isolation: isolate; background: #ffffff !important; /* solid white base */ overflow: hidden; } /* Hex overlay */ #shopify-section-template--20158072717556__3643d38b-24f2-4040-ab67-4b4b44a63aab::before { content: ""; position: absolute; inset: 0; z-index: 0; /* sits behind content */ pointer-events: none; background: url("/cdn/shop/files/Rectangle_1.png?v=1756742918") repeat center / 900px; /* adjust tile size to taste */ opacity: 0.55; /* pattern strength */ /* ensure no fades/masks */ -webkit-mask: none !important; mask: none !important; -webkit-mask-image: none !important; mask-image: none !important; mix-blend-mode: normal !important; filter: none !important; } /* Keep inner wrappers transparent and above the pattern */ #shopify-section-template--20158072717556__3643d38b-24f2-4040-ab67-4b4b44a63aab > *, #shopify-section-template--20158072717556__3643d38b-24f2-4040-ab67-4b4b44a63aab :is(.section, .section--padding, .homepage-sections-wrapper, .page-width, [class*="color-"], [class*="gradient"]) { position: relative; z-index: 1; background: transparent !important; background-image: none !important; } /* Optional: make tiles a bit larger/softer on mobile */ @media (max-width: 767px) { #shopify-section-template--20158072717556__3643d38b-24f2-4040-ab67-4b4b44a63aab::before { background-size: 1200px; opacity: 0.45; } } /* Limit text width + adjust sizing in this section */ #shopify-section-template--20158072783092__image_image_with_text_overlay_V9wMpV p, #shopify-section-template--20158072783092__image_image_with_text_overlay_V9wMpV li, #shopify-section-template--20158072783092__image_image_with_text_overlay_V9wMpV .rte { font-size: 17px !important; line-height: 1.5 !important; max-width: 540px !important; /* ← shorten width, change to taste */ margin-left: auto !important; margin-right: auto !important; display: block !important; } /* enable overlay host */ #shopify-section-template--20158072783092__template_product_info_columns_PtJdEX { position: relative; background-color: #fff; /* set base (change or remove if not needed) */ } /* hex pattern overlay */ #shopify-section-template--20158072783092__template_product_info_columns_PtJdEX::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/cdn/shop/files/Rectangle_1.png?v=1756742918"); background-repeat: repeat; background-position: center; background-size: 900px; /* 700–1100px = smaller/bigger hexes */ opacity: 0.45; /* 0.25–0.55 to adjust strength */ } /* keep section content above pattern */ #shopify-section-template--20158072783092__template_product_info_columns_PtJdEX > * { position: relative; z-index: 1; background: transparent !important; } /* optional: avoid tiny tiling on phones */ @media (max-width: 767px) { #shopify-section-template--20158072783092__template_product_info_columns_PtJdEX::before { background-repeat: no-repeat !important; background-size: 100% auto !important; background-position: center top !important; } } #shopify-section-template--20158072783092__175917825211a6b634 { background-color: #fff !important; background-image: url("/cdn/shop/files/Rectangle_1.png?v=1756742918") !important; background-repeat: repeat !important; background-position: center !important; background-size: 900px !important; } /* Host overlay */ #shopify-section-template--20158072357108__template_product_info_columns_hhcYXT { position: relative; background-color: #fff; /* base */ } /* Hex pattern overlay */ #shopify-section-template--20158072357108__template_product_info_columns_hhcYXT::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/cdn/shop/files/Rectangle_1.png?v=1756742918"); background-repeat: repeat; background-position: center; background-size: 900px; /* 700–1100px to taste */ opacity: 0.65; /* 0.25–0.55 to taste */ /* Keep content above overlay */ #shopify-section-template--20158072357108__template_product_info_columns_hhcYXT > * { position: relative; z-index: 1; background: transparent !important; } /* Mobile: avoid tiny tiling */ @media (max-width: 767px) { #shopify-section-template--20158072357108__template_product_info_columns_hhcYXT::before { background-repeat: no-repeat !important; background-size: 100% auto !important; background-position: center top !important; } } /* Host overlay */ #shopify-section-template--20158072357108__product-grid { position: relative; background-color: #fff; /* base behind pattern */ } /* Hex pattern overlay */ #shopify-section-template--20158072357108__product-grid::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/cdn/shop/files/Rectangle_1.png?v=1756742918"); background-repeat: repeat; background-position: center; background-size: 900px; /* adjust 700–1100px to taste */ opacity: 0.45; /* adjust 0.25–0.55 for faint/stronger */ /* optional fade like previous sections */ -webkit-mask-image: linear-gradient(to bottom, rgba(15,15,57,1) 100%, rgba(0,0,0,0) 0%); mask-image: linear-gradient(to bottom, rgba(15,15,57,1) 100%, rgba(0,0,0,0) 0%); } /* Keep grid content above overlay */ #shopify-section-template--20158072357108__product-grid > * { position: relative; z-index: 1; background: transparent !important; } /* Mobile adjustment: avoid tiny tiling */ @media (max-width: 767px) { #shopify-section-template--20158072357108__product-grid::before { background-repeat: no-repeat !important; background-size: 100% auto !important; background-position: center top !important; } } /* Hex pattern on this Rich Text section */ #shopify-section-template--20158072357108__text_rich_text_CT9Bwa .rich-text{ position:relative; background-color:#fff; } #shopify-section-template--20158072357108__text_rich_text_CT9Bwa .rich-text::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url("/cdn/shop/files/Rectangle_1.png?v=1756742918"); background-repeat:repeat; background-position:center; background-size:900px; opacity:.45; } #shopify-section-template--20158072357108__text_rich_text_CT9Bwa .rich-text>*{ position:relative; z-index:1; background:transparent!important; } :root{ --hex-img:url("/cdn/shop/files/Rectangle_1.png?v=1756742918"); --hex-size:900px; --hex-opacity:.45; --hex-bg:#fff; } /* Common Shopify 2.0 sections */ [id^="shopify-section-"][id*="text_rich_text"] .rich-text, [id^="shopify-section-"][id*="image_image_with_text_overlay"], [id^="shopify-section-"][id*="image_banner"], [id^="shopify-section-"][id*="template_product_info_columns"], [id^="shopify-section-"][id*="product-grid"]{ position:relative;background-color:var(--hex-bg); } [id^="shopify-section-"][id*="text_rich_text"] .rich-text::before, [id^="shopify-section-"][id*="image_image_with_text_overlay"]::before, [id^="shopify-section-"][id*="image_banner"]::before, [id^="shopify-section-"][id*="template_product_info_columns"]::before, [id^="shopify-section-"][id*="product-grid"]::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--hex-img);background-repeat:repeat;background-position:center;background-size:var(--hex-size);opacity:var(--hex-opacity); } [id^="shopify-section-"][id*="text_rich_text"] .rich-text>*, [id^="shopify-section-"][id*="image_image_with_text_overlay"]>*, [id^="shopify-section-"][id*="image_banner"]>*, [id^="shopify-section-"][id*="template_product_info_columns"]>*, [id^="shopify-section-"][id*="product-grid"]>*{ position:relative;z-index:1;background:transparent!important; } /* Mobile handling to avoid tiny tiling */ @media(max-width:767px){ [id^="shopify-section-"][id*="text_rich_text"] .rich-text::before, [id^="shopify-section-"][id*="image_image_with_text_overlay"]::before, [id^="shopify-section-"][id*="image_banner"]::before, [id^="shopify-section-"][id*="template_product_info_columns"]::before, [id^="shopify-section-"][id*="product-grid"]::before{ background-repeat:no-repeat!important;background-size:100% auto!important;background-position:center top!important; } } /* Host overlay */ #shopify-section-template--20158073340148__image-with-text-01{ position:relative; background-color:#fff; /* base */ } /* Hex pattern overlay (no fade) */ #shopify-section-template--20158073340148__image-with-text-01::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url("/cdn/shop/files/Rectangle_1.png?v=1756742918"); background-repeat:repeat; background-position:center; background-size:900px; /* 700–1100px to taste */ opacity:.45; } /* Keep content above */ #shopify-section-template--20158073340148__image-with-text-01 > *{ position:relative; z-index:1; background:transparent!important; } /* Optional mobile handling */ @media (max-width:767px){ #shopify-section-template--20158073340148__image-with-text-01::before{ background-repeat:no-repeat!important; background-size:100% auto!important; background-position:center top!important; } } /* ==== Animated Text — template--20158072717556__animated_text_EFrixk ==== */ .section--template--20158072717556__animated_text_EFrixk{ --hero-text-width:22ch; /* controls wrap + CTA width */ } /* Rotating words + all headline parts (desktop) */ .section--template--20158072717556__animated_text_EFrixk .content-wrapper--text_static, .section--template--20158072717556__animated_text_EFrixk .content-wrapper--text_static *{ font-family:'HelveticaNeueCondensedBold',Arial,sans-serif!important; letter-spacing:.5px; line-height:.9!important; max-width:660px!important; } /* CTA spacing + sizing */ .section--template--20158072717556__animated_text_EFrixk .content-wrapper--button{margin-top:14px} .section--template--20158072717556__animated_text_EFrixk a.homepage-section-btn{ display:inline-flex;align-items:center;justify-content:center; white-space:nowrap;line-height:1;padding:14px 28px;border-radius:12px; min-width:12rem;font-size:16px; } @media (min-width:768px){ .section--template--20158072717556__animated_text_EFrixk a.homepage-section-btn{ min-width:18rem;font-size:18px; } } /* Mobile: force headline size (hits static + dynamic pieces) */ @media (max-width:767px){ .section--template--20158072717556__animated_text_EFrixk :is(.content-wrapper--text_dynamic .dynamic-words span, .content-wrapper--text_dynamic, .content-wrapper--text_static, .content-wrapper--text_static *){ font-size:35px!important; line-height:1!important; } } /* ===== Mobile fit for the AI callout ring ===== */ @media (max-width: 767px){ /* Scope: your exact block class */ .ai-callout-showcase-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ --r: min(34vw, 160px); /* horizontal radius for side callouts */ --rv: calc(var(--r) * 1.15);/* vertical radius (slightly larger) */ --tile: clamp(52px, 18vw, 76px); /* icon tile size */ padding: 28px 14px !important; overflow: hidden !important; } /* center stage smaller, keep hex shape via aspect-ratio */ .ai-callout-showcase__main-image-container-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ width: clamp(180px, 58vw, 220px) !important; aspect-ratio: 7 / 8; /* 280x320 ≈ 0.875 */ height: auto !important; } /* icon tiles shrink responsively */ .ai-callout-showcase__callout-image-container-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ width: var(--tile) !important; height: var(--tile) !important; } /* re-position each callout using responsive radii */ .ai-callout-showcase__callout-1-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ transform: translate(-50%, calc(-50% - var(--rv))) !important; } .ai-callout-showcase__callout-2-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ transform: translate(calc(-50% + var(--r)), calc(-50% - calc(var(--rv) * 0.5))) !important; } .ai-callout-showcase__callout-3-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ transform: translate(calc(-50% + var(--r)), calc(-50% + calc(var(--rv) * 0.5))) !important; } .ai-callout-showcase__callout-4-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ transform: translate(-50%, calc(-50% + var(--rv))) !important; } .ai-callout-showcase__callout-5-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ transform: translate(calc(-50% - var(--r)), calc(-50% + calc(var(--rv) * 0.5))) !important; } .ai-callout-showcase__callout-6-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ transform: translate(calc(-50% - var(--r)), calc(-50% - calc(var(--rv) * 0.5))) !important; } /* text sizes stay readable + centered */ .ai-callout-showcase__title-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ font-size: clamp(22px, 6.4vw, 28px) !important; line-height: 1.2 !important; text-align: center !important; } .ai-callout-showcase__description-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ font-size: 15px !important; line-height: 1.5 !important; text-align: center !important; } .ai-callout-showcase__button-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ width: 100% !important; min-width: 0 !important; } } /* MOBILE: force the AI callout to fit the viewport */ @media (max-width: 768px){ /* scope to THIS section id + the AI block class for max specificity */ #shopify-section-template--20158073078004__1757485429fb1a233b .ai-callout-showcase-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ padding: 20px 12px !important; max-width: 100vw !important; margin: 0 auto !important; overflow: hidden !important; } /* scale the entire visual ring so it never spills on narrow phones */ #shopify-section-template--20158073078004__1757485429fb1a233b .ai-callout-showcase__visual-section-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ --s: 0.82; /* ← tweak 0.70–0.95 to fit */ transform: scale(var(--s)) !important; transform-origin: center top !important; height: auto !important; min-height: 0 !important; /* ignore the inline 400px/min-height */ overflow: visible !important; } /* keep the center hex + tiles proportional after scaling */ #shopify-section-template--20158073078004__1757485429fb1a233b .ai-callout-showcase__main-image-container-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ width: clamp(160px, 56vw, 220px) !important; height: auto !important; } #shopify-section-template--20158073078004__1757485429fb1a233b .ai-callout-showcase__callout-image-container-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ width: clamp(48px, 16vw, 72px) !important; height: auto !important; } } #shopify-section-template--20158072717556__image_image_with_text_7ttgb4{ position:relative; isolation:isolate; background:#fff!important; overflow:hidden; } #shopify-section-template--20158072717556__image_image_with_text_7ttgb4 :is(.homepage-content--image,.parallax,.img){ position:relative; z-index:0!important; } #shopify-section-template--20158072717556__image_image_with_text_7ttgb4::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:url("/cdn/shop/files/Rectangle_1.png?v=1756742918") repeat center/900px; opacity:.55; -webkit-mask:none!important; mask:none!important; -webkit-mask-image:none!important; mask-image:none!important; mix-blend-mode:normal!important; filter:none!important; } #shopify-section-template--20158072717556__image_image_with_text_7ttgb4 :is(.homepage-featured-content-box,.image-with-text-overlay__content-box,.homepage-featured-content-box-inner){ position:relative; z-index:2; background:transparent!important; } @media (max-width:767px){ #shopify-section-template--20158072717556__image_image_with_text_7ttgb4::before{ background-size:1200px; opacity:.45; } } /* Mobile collision fix – visual ring only */ @media (max-width: 767px){ /* 1) Nudge the whole cluster smaller */ .ai-callout-showcase__visual-section-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ transform: scale(0.9); /* try 0.9 → 0.85 if still tight */ transform-origin: center top; margin-top: 10px !important; } /* 2) Center hex size */ .ai-callout-showcase__main-image-container-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ width: clamp(160px, 56vw, 220px) !important; height: auto !important; } /* 3) Icon tile size */ .ai-callout-showcase__callout-image-container-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ width: clamp(48px, 16vw, 72px) !important; height: auto !important; } /* 4) Let callout text wrap and stay narrow */ .ai-callout-showcase__callout-title-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ white-space: normal !important; max-width: 10ch !important; /* tighten if needed */ line-height: 1.2 !important; font-size: 14px !important; text-align: center !important; } } @media (max-width: 767px){ .ai-callout-showcase-arelqwmlicldll2nkaaigenblock8889f0fhfcxmw{ display: grid !important; grid-template-columns: 1fr !important; /* stack columns */ gap: 22px !important; } }