diff --git a/assets/base.css b/assets/base.css index 91012cce3..8ea462c2c 100644 --- a/assets/base.css +++ b/assets/base.css @@ -1,3 +1,43 @@ +@font-face { + font-family: 'Metroflex'; + src: url('MetroflexWide-Lt.woff2') format('woff2'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Metroflex'; + src: url('MetroflexWide-Reg.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Metroflex'; + src: url('MetroflexWide-Med.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Metroflex'; + src: url('MetroflexWide-Bd.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Metroflex'; + src: url('MetroflexWide-Hvy.woff2') format('woff2'); + font-weight: 900; + font-style: normal; + font-display: swap; +} + * { box-sizing: border-box; } @@ -13,6 +53,12 @@ body { } :root { + --font-body--family: 'Metroflex', sans-serif !important; + --font-heading--family: 'Metroflex', sans-serif !important; + --font-subheading--family: 'Metroflex', sans-serif !important; + --font-accent--family: 'Metroflex', sans-serif !important; + --font-paragraph--family: 'Metroflex', sans-serif !important; + --hover-lift-amount: 4px; --hover-scale-amount: 1.03; --hover-subtle-zoom-amount: 1.015; @@ -78,6 +124,7 @@ select { /* Editorial layout */ .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio, .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio { + .collection-card__image, .featured-blog-posts-card__image, .blog-placeholder-svg { @@ -168,6 +215,7 @@ select { } @media (any-pointer: fine) and (prefers-reduced-motion: no-preference) { + .card-hover-effect-lift .product-card:hover, .card-hover-effect-lift .collection-card:hover, .card-hover-effect-lift .resource-card:hover, @@ -277,7 +325,7 @@ p:empty { } :first-child:is(p, h1, h2, h3, h4, h5, h6), -:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) { +:first-child:empty+ :where(p, h1, h2, h3, h4, h5, h6) { margin-block-start: 0; } @@ -389,6 +437,7 @@ p:empty { } @media screen and (min-width: 750px) { + .page-width-wide, .page-width-normal, .page-width-narrow, @@ -425,19 +474,14 @@ p:empty { full-width background image even if the section content is constrained by the page width. Do not try to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */ .section { - --full-page-grid-central-column-width: min( - var(--page-width) - var(--page-margin) * 2, - calc(100% - var(--page-margin) * 2) - ); + --full-page-grid-central-column-width: min(var(--page-width) - var(--page-margin) * 2, + calc(100% - var(--page-margin) * 2)); --full-page-grid-margin: minmax(var(--page-margin), 1fr); - --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width) - var(--full-page-grid-margin); + --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width) var(--full-page-grid-margin); /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */ - --util-page-margin-offset: max( - var(--page-margin), - calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2) - ); + --util-page-margin-offset: max(var(--page-margin), + calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2)); /* Offset for full-width sections to account for the page margin, used for Marquee — note that --util-page-margin-offset doesn't work here */ @@ -455,7 +499,7 @@ p:empty { } /* Place all direct children in the center column by default */ -.section > * { +.section>* { grid-column: 2; } @@ -476,28 +520,28 @@ p:empty { } /* For page-width sections, all content goes in the center column */ -.section--page-width > * { +.section--page-width>* { grid-column: 2; } /* For full-width sections, content spans all columns */ -.section--full-width > * { +.section--full-width>* { grid-column: 1 / -1; } @media screen and (max-width: 749px) { - .section--mobile-full-width > * { + .section--mobile-full-width>* { grid-column: 1 / -1; } } /* Some page-width sections should still extend all the way to the right edge of the page, e.g. collection carousel */ -.section--page-width.section--full-width-right > * { +.section--page-width.section--full-width-right>* { grid-column: 2 / 4; } /* For full-width sections with margin, content still spans full width but with space on the sides */ -.section--full-width.section--full-width-margin > * { +.section--full-width.section--full-width-margin>* { grid-column: 1 / -1; @media screen and (min-width: 750px) { @@ -507,7 +551,7 @@ p:empty { } /* Some section content break out to full width of the page */ -.section > .force-full-width { +.section>.force-full-width { grid-column: 1 / -1; } @@ -542,6 +586,7 @@ p:empty { } @media screen and (max-width: 749px) { + .hidden--mobile, .mobile\:hidden { /* stylelint-disable-next-line declaration-no-important */ @@ -550,6 +595,7 @@ p:empty { } @media screen and (min-width: 750px) { + .hidden--desktop, .desktop\:hidden { /* stylelint-disable-next-line declaration-no-important */ @@ -623,11 +669,8 @@ p:empty { @media screen and (min-width: 1400px) { .grid { grid-template-columns: - 1fr repeat( - var(--centered-column-number), - minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number))) - ) - 1fr; + 1fr repeat(var(--centered-column-number), + minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))) 1fr; } } @@ -733,7 +776,7 @@ p:empty { height: var(--icon-size-xs); } -.svg-wrapper > svg { +.svg-wrapper>svg { width: var(--icon-size-sm); height: var(--icon-size-sm); } @@ -773,7 +816,7 @@ slideshow-component [data-placeholder='true'] * { /* Base text and heading styles */ body, .paragraph:not(.button), -.paragraph > *, +.paragraph>*, .text-block.paragraph :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-paragraph--family); font-style: var(--font-paragraph--style); @@ -787,6 +830,7 @@ body, /* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */ @media screen and (max-width: 1200px) { + input.paragraph.paragraph, input.paragraph.paragraph:not([type]), textarea.paragraph.paragraph, @@ -795,7 +839,7 @@ body, } } -.paragraph > small { +.paragraph>small { font-size: smaller; } @@ -803,7 +847,7 @@ body, h1, .h1.h1, -.text-block.h1 > *, +.text-block.h1>*, .text-block.h1 :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-h1--family); font-style: var(--font-h1--style); @@ -816,6 +860,7 @@ h1, } @media screen and (max-width: 1200px) { + input.h1.h1, textarea.h1.h1, select.h1.h1 { @@ -825,7 +870,7 @@ h1, h2, .h2.h2, -.text-block.h2 > *, +.text-block.h2>*, .text-block.h2 :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-h2--family); font-style: var(--font-h2--style); @@ -838,6 +883,7 @@ h2, } @media screen and (max-width: 1200px) { + input.h2.h2, textarea.h2.h2, select.h2.h2 { @@ -848,7 +894,7 @@ h2, h3, .h3, .h3.h3, -.text-block.h3 > *, +.text-block.h3>*, .text-block.h3 :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-h3--family); font-style: var(--font-h3--style); @@ -861,6 +907,7 @@ h3, } @media screen and (max-width: 1200px) { + input.h3, textarea.h3, select.h3 { @@ -870,7 +917,7 @@ h3, h4, .h4.h4, -.text-block.h4 > *, +.text-block.h4>*, .text-block.h4 :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-h4--family); font-style: var(--font-h4--style); @@ -883,6 +930,7 @@ h4, } @media screen and (max-width: 1200px) { + input.h4.h4, textarea.h4.h4, select.h4.h4 { @@ -892,7 +940,7 @@ h4, h5, .h5.h5, -.text-block.h5 > *, +.text-block.h5>*, .text-block.h5 :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-h5--family); font-style: var(--font-h5--style); @@ -905,6 +953,7 @@ h5, } @media screen and (max-width: 1200px) { + input.h5.h5, textarea.h5.h5, select.h5.h5 { @@ -914,7 +963,7 @@ h5, h6, .h6.h6, -.text-block.h6 > *, +.text-block.h6>*, .text-block.h6 :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-h6--family); font-style: var(--font-h6--style); @@ -927,6 +976,7 @@ h6, } @media screen and (max-width: 1200px) { + input.h6.h6, textarea.h6.h6, select.h6.h6 { @@ -954,7 +1004,7 @@ a { color var(--animation-speed) var(--animation-easing); } -:is(h1, h2, h3, h4, h5, h6, p) > a:hover { +:is(h1, h2, h3, h4, h5, h6, p)>a:hover { --button-color: var(--color, var(--color-primary-hover)); } @@ -983,7 +1033,7 @@ details:not([open]) .summary-open { display: none; } -details[open] > summary .icon-animated > svg { +details[open]>summary .icon-animated>svg { transform: rotate(180deg); } @@ -993,17 +1043,17 @@ summary::-webkit-details-marker { } /* When header is transparent, pull the first main content section up to sit under the floating header */ -body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child { +body:has(.header[transparent]) .content-for-layout>.shopify-section:first-child { margin-top: calc(var(--header-group-height) * -1); } -body:has(.header[transparent]) #header-group > .header-section { +body:has(.header[transparent]) #header-group>.header-section { z-index: var(--layer-sticky); } /* All other header group content should be beneath the floating header, but above the rest of the page content */ -body:has(.header[transparent]) #header-group > *:not(.header-section) { +body:has(.header[transparent]) #header-group>*:not(.header-section) { z-index: calc(var(--layer-sticky) - 1); } @@ -1085,13 +1135,13 @@ body:has(.header[transparent]) #header-group > *:not(.header-section) { } } -.product-grid__card .group-block > * { +.product-grid__card .group-block>* { @media screen and (max-width: 749px) { flex-direction: column; } } -ul[product-grid-view='zoom-out'] .product-grid__card > * { +ul[product-grid-view='zoom-out'] .product-grid__card>* { display: none; } @@ -1099,21 +1149,17 @@ ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery { display: block; } -[product-grid-view='zoom-out'] - .card-gallery - > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) { +[product-grid-view='zoom-out'] .card-gallery> :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) { display: none; } -ul[product-grid-view='zoom-out'] .card-gallery > img { +ul[product-grid-view='zoom-out'] .card-gallery>img { display: block; } [product-grid-view='zoom-out'] { - --product-grid-columns-desktop: repeat( - 10, - minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr) - ); + --product-grid-columns-desktop: repeat(10, + minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)); } .product-grid-view-zoom-out--details { @@ -1136,15 +1182,15 @@ ul[product-grid-view='zoom-out'] .card-gallery > img { font-weight: 400; } -.product-grid-view-zoom-out--details > span.h6, -.product-grid-view-zoom-out--details > div.h6 > product-price { +.product-grid-view-zoom-out--details>span.h6, +.product-grid-view-zoom-out--details>div.h6>product-price { display: inline-block; line-height: 0; margin-top: var(--margin-2xs); } -.product-grid-view-zoom-out--details > span.h6 > *, -.product-grid-view-zoom-out--details > div.h6 > * > * { +.product-grid-view-zoom-out--details>span.h6>*, +.product-grid-view-zoom-out--details>div.h6>*>* { line-height: 1.2; } @@ -1242,18 +1288,18 @@ results-list[initialized] { width: 100%; } -.text-block > *:first-child, -.text-block > *:first-child:empty + * { +.text-block>*:first-child, +.text-block>*:first-child:empty+* { margin-block-start: 0; } -.text-block > *:last-child, -.text-block > *:has(+ *:last-child:empty) { +.text-block>*:last-child, +.text-block>*:has(+ *:last-child:empty) { margin-block-end: 0; } /* This is to deal with the margin applied to the p when custom styles are enabled. The p isn't the first child anymore due to the style tag */ -.text-block > style + * { +.text-block>style+* { margin-block-start: 0; } @@ -1309,6 +1355,7 @@ results-list[initialized] { --dialog-drawer-opening-animation: move-and-fade; --dialog-drawer-closing-animation: move-and-fade; } + /* stylelint-enable value-keyword-case */ .dialog-drawer[open] { @@ -1524,8 +1571,7 @@ shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons); } -.product-form-buttons:has(.add-to-cart-button.button-secondary) - :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) { +.product-form-buttons:has(.add-to-cart-button.button-secondary) :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) { --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary); --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons); } @@ -1572,14 +1618,14 @@ summary .icon-plus :is(.horizontal, .vertical), opacity: 1; } -details[open] > summary .icon-plus .horizontal, -.details-open > summary .icon-plus .horizontal, +details[open]>summary .icon-plus .horizontal, +.details-open>summary .icon-plus .horizontal, .show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal { transform: rotate(90deg); } -details[open] > summary .icon-plus .vertical, -.details-open > summary .icon-plus .vertical, +details[open]>summary .icon-plus .vertical, +.details-open>summary .icon-plus .vertical, .show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical { transform: rotate(90deg); opacity: 0; @@ -1604,7 +1650,7 @@ media-gallery { } } -:not(.dialog-zoomed-gallery) > .product-media-container { +:not(.dialog-zoomed-gallery)>.product-media-container { --slide-width: 100%; display: flex; @@ -1905,7 +1951,7 @@ zoom-dialog dialog { } /* If the product media is already providing an image cover, hide images provided by sibling deferred-media */ -.product-media__image ~ * .deferred-media__poster-image { +.product-media__image~* .deferred-media__poster-image { display: none; } @@ -1926,7 +1972,7 @@ zoom-dialog dialog { product-model model-viewer, /* Media that have a poster button sibling providing the size should be absolute-positioned. Otherwise, it should be a block to rely on its own size */ -:is(deferred-media, product-model) > .deferred-media__poster-button ~ *:not(template) { +:is(deferred-media, product-model)>.deferred-media__poster-button~*:not(template) { display: block; position: absolute; top: 0; @@ -1951,16 +1997,14 @@ slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui_ } @media screen and (max-width: 749px) { - slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter)) - .shopify-model-viewer-ui__controls-area { + slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter)) .shopify-model-viewer-ui__controls-area { /* Position the controls just above the counter */ bottom: calc(var(--minimum-touch-target) + var(--padding-sm)); } } @media screen and (min-width: 750px) { - slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter)) - .shopify-model-viewer-ui__controls-area { + slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter)) .shopify-model-viewer-ui__controls-area { /* Position the controls just above the counter */ bottom: calc(var(--minimum-touch-target) + var(--padding-sm)); } @@ -1980,6 +2024,7 @@ slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui_ } deferred-media { + /* The overflow hidden in the deferred-media won't let the button show the focus ring */ &:has(:focus-visible) { outline: var(--focus-outline-width) solid currentcolor; @@ -2067,7 +2112,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p padding: var(--padding-md); } -.button-shopify-xr > svg { +.button-shopify-xr>svg { width: var(--icon-size-sm); height: var(--icon-size-sm); margin-inline-end: var(--margin-md); @@ -2080,8 +2125,10 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p /* Swatches */ .swatch { --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity)); - --min-width-unitless: 15.9999; /* want to avoid division by 0 */ - --min-height-unitless: 15.9999; /* want to avoid division by 0 */ + --min-width-unitless: 15.9999; + /* want to avoid division by 0 */ + --min-height-unitless: 15.9999; + /* want to avoid division by 0 */ --min-height: 16px; --min-width: 16px; @@ -2110,27 +2157,19 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p We also want the result to always be smaller than the input (pdp > everywhere else) by some scaling factor. */ - --offset-scaled-width: calc( - var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size) - ); - --offset-scaled-height: calc( - var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size) - ); + --offset-scaled-width: calc(var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)); + --offset-scaled-height: calc(var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)); --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width)); /* width = min(m + sU, (m + s * W'/H' * M'), M) */ - --swatch-width: min( - calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px), - calc(var(--min-width) + var(--offset-scaled-width)), - var(--max-swatch-size) - ); + --swatch-width: min(calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px), + calc(var(--min-width) + var(--offset-scaled-width)), + var(--max-swatch-size)); /* height = min(m + sV, (m + s * H'/W' * M'), M) */ - --swatch-height: min( - calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px), - calc(var(--min-height) + var(--offset-scaled-height)), - var(--max-swatch-size) - ); + --swatch-height: min(calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px), + calc(var(--min-height) + var(--offset-scaled-height)), + var(--max-swatch-size)); display: block; background: var(--swatch-background); @@ -2201,7 +2240,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p --variant-option-padding-inline: var(--padding-md); } -.variant-option + .variant-option { +.variant-option+.variant-option { margin-top: var(--padding-lg); } @@ -2216,7 +2255,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p } } -.variant-option--swatches > overflow-list { +.variant-option--swatches>overflow-list { justify-content: var(--product-swatches-alignment); @media screen and (max-width: 749px) { @@ -2244,12 +2283,12 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p } @media (prefers-reduced-motion: no-preference) { + .variant-option__button-label, .variant-option__select-wrapper, .variant-option__button-label::before, .variant-option__button-label::after, - .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true']) - .variant-option__button-label__pill, + .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill, .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type { transition-duration: var(--animation-speed); transition-timing-function: var(--animation-easing); @@ -2263,8 +2302,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p transition-property: clip-path; } - .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true']) - .variant-option__button-label__pill { + .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill { transition-property: transform; } @@ -2357,8 +2395,8 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p } } - &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']), - &:has(:checked) ~ label { + &:has([data-previous-checked='true'])~label:has([data-current-checked='true']), + &:has(:checked)~label { .variant-option__button-label__pill { left: 0; right: unset; @@ -2369,20 +2407,17 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p --pill-offset: calc(100% + 1px); } - &:has(:checked) ~ label { + &:has(:checked)~label { --pill-offset: calc(-100% - 1px); } - &:has([data-current-checked='true']):first-of-type - ~ label:last-of-type:not(.variant-option__button-label--has-swatch), + &:has([data-current-checked='true']):first-of-type~label:last-of-type:not(.variant-option__button-label--has-swatch), &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) { --clip: 0 0 0 100%; } - &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not( - .variant-option__button-label--has-swatch - ), - &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) { + &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(.variant-option__button-label--has-swatch), + &:has(:checked)~label:not(.variant-option__button-label--has-swatch) { --clip: 0 100% 0 0; } @@ -2399,13 +2434,11 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p /* the more complex selector rules here produce the wrap around effect for first/last variants */ .variant-option--buttons:has(:nth-of-type(3)) { - .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type { + .variant-option__button-label:has([data-current-checked='true']):first-of-type~label:last-of-type { --pill-offset: calc(100% + 1px); } - .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has( - ~ label:last-of-type > :checked - ) { + .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked) { --pill-offset: calc(-100% - 1px); } } @@ -2498,6 +2531,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */ @supports not (background-color: rgb(from red 150 g b / alpha)) { + /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/ .variant-option__button-label--has-swatch:has(:checked), .variant-option__button-label:has(:focus-visible) .swatch { @@ -2578,8 +2612,9 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p } @media screen and (min-width: 750px) { + .sticky-content--desktop, - .sticky-content--desktop.full-height--desktop > .group-block { + .sticky-content--desktop.full-height--desktop>.group-block { position: sticky; top: var(--sticky-header-offset, 0); z-index: var(--layer-flat); @@ -2604,7 +2639,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } -product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { +product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6)>*:not(.tax-note) { margin-block: 0; } @@ -2741,7 +2776,7 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { /* Custom Typography style */ .custom-typography, -.custom-typography > * { +.custom-typography>* { font-family: var(--font-family); font-weight: var(--font-weight); text-transform: var(--text-transform); @@ -2767,12 +2802,12 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { } .custom-font-size, -.custom-font-size > * { +.custom-font-size>* { font-size: var(--font-size); } .custom-font-weight, -.custom-font-weight > * { +.custom-font-weight>* { font-weight: var(--font-weight); } @@ -2822,19 +2857,19 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { .layout-panel-flex--row:not(.mobile-column) { flex-wrap: var(--flex-wrap-mobile); - > .menu { + >.menu { flex: 1 1 min-content; } - > .text-block { + >.text-block { flex: 1 1 var(--max-width--display-tight); } - > .image-block { + >.image-block { flex: 1 1 var(--size-style-width-mobile-min); } - > .button { + >.button { flex: 0 0 fit-content; } } @@ -2906,7 +2941,7 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { } :first-child:is(p, h1, h2, h3, h4, h5, h6), - :first-child:empty + :is(p, h1, h2, h3, h4, h5, h6) { + :first-child:empty+ :is(p, h1, h2, h3, h4, h5, h6) { margin-block-start: 0; } @@ -3003,17 +3038,17 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { outline: none; } - &:focus-visible + .checkbox__label .icon-checkmark { + &:focus-visible+.checkbox__label .icon-checkmark { outline: var(--focus-outline-width) solid currentcolor; outline-offset: var(--focus-outline-offset); } - &:checked + .checkbox__label .icon-checkmark { + &:checked+.checkbox__label .icon-checkmark { background-color: var(--color-foreground); border-color: var(--color-foreground); } - &:disabled + .checkbox__label .icon-checkmark { + &:disabled+.checkbox__label .icon-checkmark { background-color: var(--input-disabled-background-color); border-color: var(--input-disabled-border-color); } @@ -3049,7 +3084,7 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { transition: opacity var(--animation-speed) var(--animation-easing); } -.checkbox__input:disabled + .checkbox__label { +.checkbox__input:disabled+.checkbox__label { color: var(--input-disabled-text-color); } @@ -3167,15 +3202,15 @@ input[type='radio'] { } /* Shared styles for radio buttons and checkboxes */ -:where(input[type='radio']) + label, -:where(input[type='checkbox']) + label { +:where(input[type='radio'])+label, +:where(input[type='checkbox'])+label { display: inline; vertical-align: middle; cursor: pointer; } -:where(input[type='radio']):disabled + label, -:where(input[type='checkbox']):disabled + label { +:where(input[type='radio']):disabled+label, +:where(input[type='checkbox']):disabled+label { color: var(--input-disabled-text-color); cursor: not-allowed; } @@ -3394,7 +3429,7 @@ label:has(input[type='checkbox']:disabled) { } } -.pills__pill > .svg-wrapper { +.pills__pill>.svg-wrapper { --close-icon-opacity: 0.4; --icon-stroke-width: 1px; @@ -3510,11 +3545,8 @@ fly-to-cart.fly-to-cart--sticky { --facets-vertical-col-width: 6; grid-template-columns: - 1fr repeat( - var(--centered-column-number), - minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number))) - ) - 1fr; + 1fr repeat(var(--centered-column-number), + minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))) 1fr; } @media screen and (min-width: 990px) { @@ -3527,15 +3559,12 @@ fly-to-cart.fly-to-cart--sticky { @media screen and (min-width: 750px) { grid-column: 1 / -1; grid-template-columns: - minmax(var(--page-margin), 1fr) repeat( - var(--centered-column-number), - minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number))) - ) - minmax(var(--page-margin), 1fr); + minmax(var(--page-margin), 1fr) repeat(var(--centered-column-number), + minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))) minmax(var(--page-margin), 1fr); } } -.collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid { +.collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden)~.main-collection-grid { @media screen and (min-width: 750px) { grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number); } @@ -3548,18 +3577,14 @@ fly-to-cart.fly-to-cart--sticky { } } -:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) - [product-grid-view='default'] - .product-grid__card { +:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) [product-grid-view='default'] .product-grid__card { @media screen and (max-width: 749px) { padding-inline-start: max(var(--padding-xs), var(--padding-inline-start)); padding-inline-end: max(var(--padding-xs), var(--padding-inline-end)); } } -:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) - [product-grid-view='mobile-single'] - .product-grid__card { +:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) [product-grid-view='mobile-single'] .product-grid__card { @media screen and (max-width: 749px) { padding-inline-start: max(var(--padding-xs), var(--padding-inline-start)); padding-inline-end: max(var(--padding-xs), var(--padding-inline-end)); @@ -3748,6 +3773,29 @@ fly-to-cart.fly-to-cart--sticky { } } +/* ============================================================================ + Mobile Performance - Disabled Animations Override + ============================================================================ */ +@media screen and (max-width: 749px) { + body.animations-disabled-mobile * { + /* Disable all CSS Scroll-Driven reveals (native feature used heavily in this theme) */ + animation-timeline: none !important; + } + + body.animations-disabled-mobile .slide__content { + /* Specifically prevent the slide reveal animation to load instantly */ + animation: none !important; + opacity: 1 !important; + translate: 0 0 !important; + } + + /* Disable costly View Transition animations on mobile */ + body.animations-disabled-mobile::view-transition-old(*), + body.animations-disabled-mobile::view-transition-new(*) { + animation: none !important; + } +} + @keyframes search-element-slide-out-bottom { 0% { transform: translateY(0); @@ -3773,6 +3821,7 @@ fly-to-cart.fly-to-cart--sticky { } @keyframes thumbnail-selected { + 0%, 100% { box-shadow: 0 0 0 2px transparent; @@ -3863,7 +3912,8 @@ fly-to-cart.fly-to-cart--sticky { position: absolute; z-index: var(--layer-lowest); inset: 0; - clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */ + clip-path: inset(-50px 0 0 0); + /* stylelint-disable-line */ } @media screen and (min-width: 750px) { @@ -3878,7 +3928,8 @@ fly-to-cart.fly-to-cart--sticky { position: absolute; z-index: var(--layer-lowest); inset: 0; - clip-path: inset(0 0 -50px 0); /* stylelint-disable-line */ + clip-path: inset(0 0 -50px 0); + /* stylelint-disable-line */ } @media screen and (min-width: 750px) { @@ -3894,11 +3945,11 @@ fly-to-cart.fly-to-cart--sticky { aspect-ratio: var(--size-style-aspect-ratio, auto); } -:not(deferred-media) > .video-placeholder-wrapper { +:not(deferred-media)>.video-placeholder-wrapper { width: var(--video-placeholder-width); } -.video-placeholder-wrapper > * { +.video-placeholder-wrapper>* { width: 100%; height: 100%; object-fit: cover; @@ -3941,7 +3992,8 @@ slideshow-component.slideshow--content-below-media slideshow-slide { animation-timeline: var(--slideshow-timeline); } - @media (prefers-reduced-motion) { + @media screen and (max-width: 749px), + (prefers-reduced-motion) { opacity: 1; animation: none; } @@ -4059,12 +4111,10 @@ slideshow-slide.product-media-container--tallest { } @media screen and (max-width: 749px) { + /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */ - .media-gallery--hint - :is( - slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type), - slideshow-slide[aria-hidden='false'] + slideshow-slide - ) { + .media-gallery--hint :is(slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type), + slideshow-slide[aria-hidden='false'] + slideshow-slide) { content-visibility: auto; slideshow-component[actioned] & { @@ -4078,11 +4128,8 @@ slideshow-slide.product-media-container--tallest { * Card galleries preview the next or previous images on 'pointerenter', so we * try to kick load them beforehand (they are lazy loaded otherwise). */ -:is(.resource-list__carousel, .card-gallery) - :is( - slideshow-slide:has(+ slideshow-slide[aria-hidden='false']), - slideshow-slide[aria-hidden='false'] + slideshow-slide - ) { +:is(.resource-list__carousel, .card-gallery) :is(slideshow-slide:has(+ slideshow-slide[aria-hidden='false']), + slideshow-slide[aria-hidden='false'] + slideshow-slide) { content-visibility: auto; slideshow-component[actioned] & { @@ -4094,7 +4141,7 @@ slideshow-slide.product-media-container--tallest { * Be specific about HTML children structure to avoid targeting nested slideshows. * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari. */ -slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide { +slideshow-component:is([dragging], [transitioning], :hover)>slideshow-container>slideshow-slides>slideshow-slide { content-visibility: visible; } @@ -4167,13 +4214,13 @@ slideshow-container { slideshow-component:is([autoplay]) { &:is([paused]) { - .icon-play > svg { + .icon-play>svg { display: block; } } &:not([paused]) { - .icon-pause > svg { + .icon-pause>svg { display: block; } } @@ -4244,11 +4291,7 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none { } } -:not(.media-gallery--carousel) - > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover)) - > slideshow-container - > slideshow-arrows - .slideshow-control { +:not(.media-gallery--carousel)> :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))>slideshow-container>slideshow-arrows .slideshow-control { animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards; } @@ -4301,11 +4344,10 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none { display: none; } -:where(.section-resource-list.section--full-width) product-card[data-product-transition] > .group-block, -:where(.section-carousel.section--full-width) product-card[data-product-transition] > .group-block { +:where(.section-resource-list.section--full-width) product-card[data-product-transition]>.group-block, +:where(.section-carousel.section--full-width) product-card[data-product-transition]>.group-block { @media screen and (max-width: 749px) { - padding-inline: max(var(--padding-xs), var(--padding-inline-start)) - max(var(--padding-xs), var(--padding-inline-end)); + padding-inline: max(var(--padding-xs), var(--padding-inline-start)) max(var(--padding-xs), var(--padding-inline-end)); } } @@ -4421,10 +4463,7 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none { @container resource-list-carousel (min-width: 750px) { .resource-list__carousel .resource-list__slide { - --section-slide-width: calc( - (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) / - var(--column-count) - ); + --section-slide-width: calc((100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) / var(--column-count)); --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max)); --slide-width: var(--section-slide-width, var(--fallback-slide-width)); } @@ -4477,15 +4516,15 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none { } /* Flex behavior for width variants */ -.layout-panel-flex--row > .group-block--width-fit { +.layout-panel-flex--row>.group-block--width-fit { flex: 0; } -.layout-panel-flex--row > .group-block--width-fill { +.layout-panel-flex--row>.group-block--width-fill { flex: 1; } -.layout-panel-flex--row > .group-block--width-custom { +.layout-panel-flex--row>.group-block--width-custom { flex-basis: var(--size-style-width); } @@ -4500,20 +4539,21 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none { } /* Flex behavior for height variants */ -.layout-panel-flex--column > .group-block--height-fit { +.layout-panel-flex--column>.group-block--height-fit { flex: 0 1 auto; } -.layout-panel-flex--column > .group-block--height-fill { +.layout-panel-flex--column>.group-block--height-fill { flex: 1; } -.layout-panel-flex--column > .group-block--height-custom { +.layout-panel-flex--column>.group-block--height-custom { flex-basis: var(--size-style-height); } accordion-custom { details { + &::details-content, .details-content { block-size: 0; @@ -4533,6 +4573,7 @@ accordion-custom { } &:not([open]) { + &::details-content, .details-content { padding-block: 0; @@ -4540,6 +4581,7 @@ accordion-custom { } &[open] { + &::details-content, .details-content { opacity: 1; @@ -4589,12 +4631,10 @@ text-component { opacity: 0; transition: opacity var(--animation-speed-slow) var(--animation-easing); pointer-events: none; - background-image: linear-gradient( - -85deg, - var(--shimmer-text-color) 10%, - var(--shimmer-color-light) 50%, - var(--shimmer-text-color) 90% - ); + background-image: linear-gradient(-85deg, + var(--shimmer-text-color) 10%, + var(--shimmer-color-light) 50%, + var(--shimmer-text-color) 90%); background-clip: text; background-size: 200% 100%; background-position: 100% 0; @@ -4715,6 +4755,7 @@ text-component { /* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */ @media screen and (max-width: 1200px) { + input, textarea, select, @@ -4943,4 +4984,4 @@ product-recommendations:has([data-has-recommendations='false']) { opacity: var(--atc-opacity, 1); translate: 0px var(--atc-destination, 0px); } -} +} \ No newline at end of file diff --git a/assets/deferred-hydration.js b/assets/deferred-hydration.js new file mode 100644 index 000000000..fc45fdcb6 --- /dev/null +++ b/assets/deferred-hydration.js @@ -0,0 +1,68 @@ +/** + * Deferred Hydration Utility + * Hydrates content when it enters the viewport on mobile. + */ + +import { onDocumentReady } from '@theme/utilities'; + +class DeferredHydration extends HTMLElement { + constructor() { + super(); + this.observer = null; + } + + connectedCallback() { + onDocumentReady(() => { + const mobileOnly = this.hasAttribute('mobile-only'); + const isMobile = window.innerWidth < 750; + + if (mobileOnly && !isMobile) { + this.hydrate(); + return; + } + + // If it's already in viewport or we want to be safe, use IntersectionObserver + this.observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + this.hydrate(); + this.observer.disconnect(); + } + }); + }, { rootMargin: '200px' }); + + this.observer.observe(this); + }); + } + + hydrate() { + const template = this.querySelector('template'); + if (template) { + const content = template.content.cloneNode(true); + this.appendChild(content); + // Remove template to avoid re-hydration + template.remove(); + this.setAttribute('hydrated', ''); + + // Look for any scripts that might need a nudge + this.querySelectorAll('script').forEach(script => { + const newScript = document.createElement('script'); + Array.from(script.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value)); + newScript.innerHTML = script.innerHTML; + if (script.parentNode) { + script.parentNode.replaceChild(newScript, script); + } + }); + } + } + + disconnectedCallback() { + if (this.observer) { + this.observer.disconnect(); + } + } +} + +if (!customElements.get('deferred-hydration')) { + customElements.define('deferred-hydration', DeferredHydration); +} diff --git a/assets/header.js b/assets/header.js index a67565c26..90cab5a2b 100644 --- a/assets/header.js +++ b/assets/header.js @@ -192,7 +192,7 @@ class HeaderComponent extends Component { this.#observeStickyPosition(stickyMode === 'always'); if (stickyMode === 'scroll-up' || stickyMode === 'always') { - document.addEventListener('scroll', this.#handleWindowScroll); + document.addEventListener('scroll', this.#handleWindowScroll, { passive: true }); } } } diff --git a/assets/localization.js b/assets/localization.js index 6d47cbb96..e21cd5495 100644 --- a/assets/localization.js +++ b/assets/localization.js @@ -24,7 +24,7 @@ class LocalizationFormComponent extends Component { this.refs.search && this.refs.search.addEventListener('keydown', this.#onSearchKeyDown); this.refs.countryList && this.refs.countryList.addEventListener('keydown', this.#onContainerKeyDown); - this.refs.countryList && this.refs.countryList.addEventListener('scroll', this.#onCountryListScroll); + this.refs.countryList && this.refs.countryList.addEventListener('scroll', this.#onCountryListScroll, { passive: true }); // Resizing the language input can be expensive for browsers that don't support field-sizing: content. // Spliting it into separate tasks at least helps when there are multiple localization forms on the page. @@ -515,7 +515,7 @@ class DrawerLocalizationComponent extends Component { const countryList = localizationForm.querySelector('.country-selector-form__wrapper'); if (target.open) { - if (countryList) countryList.addEventListener('scroll', this.#onCountryListScroll); + if (countryList) countryList.addEventListener('scroll', this.#onCountryListScroll, { passive: true }); onAnimationEnd(target, localizationForm.focusSearchInput); } else { countryList?.removeEventListener('scroll', this.#onCountryListScroll); diff --git a/assets/scrolling.js b/assets/scrolling.js index 57739db13..db39e6e1a 100644 --- a/assets/scrolling.js +++ b/assets/scrolling.js @@ -89,7 +89,7 @@ export class Scroller { this.#onScrollEnd = options.onScrollEnd; this.element = element; - this.element.addEventListener('scroll', this.#handleScroll); + this.element.addEventListener('scroll', this.#handleScroll, { passive: true }); } /** @@ -342,25 +342,25 @@ export function scrollIntoView(element, { ancestor, behavior = 'smooth', block = const scrollTop = ancestor.scrollHeight > ancestor.clientHeight ? calculateScrollOffset( - block, - ancestorRect.top, - ancestor.clientHeight, - elemRect.top, - elemRect.height, - ancestor.scrollTop - ) + block, + ancestorRect.top, + ancestor.clientHeight, + elemRect.top, + elemRect.height, + ancestor.scrollTop + ) : ancestor.scrollTop; const scrollLeft = ancestor.scrollWidth > ancestor.clientWidth ? calculateScrollOffset( - inline, - ancestorRect.left, - ancestor.clientWidth, - elemRect.left, - elemRect.width, - ancestor.scrollLeft - ) + inline, + ancestorRect.left, + ancestor.clientWidth, + elemRect.left, + elemRect.width, + ancestor.scrollLeft + ) : ancestor.scrollLeft; ancestor.scrollTo({ top: scrollTop, left: scrollLeft, behavior }); @@ -372,7 +372,7 @@ class ScrollHint extends HTMLElement { #rafId = null; connectedCallback() { - this.addEventListener('scroll', this.#handleScroll); + this.addEventListener('scroll', this.#handleScroll, { passive: true }); this.#resizeObserver.observe(this); } diff --git a/assets/zoom-dialog.js b/assets/zoom-dialog.js index acdff63ed..8fa54e27f 100644 --- a/assets/zoom-dialog.js +++ b/assets/zoom-dialog.js @@ -28,7 +28,7 @@ export class ZoomDialog extends Component { connectedCallback() { super.connectedCallback(); - this.refs.dialog.addEventListener('scroll', this.handleScroll); + this.refs.dialog.addEventListener('scroll', this.handleScroll, { passive: true }); } disconnectedCallback() { @@ -275,7 +275,7 @@ function getMostVisibleElement(elements) { current.intersectionRatio > prev.intersectionRatio ? current : prev ); observer.disconnect(); - resolve(/** @type {HTMLElement} */ (mostVisible.target)); + resolve(/** @type {HTMLElement} */(mostVisible.target)); }, { threshold: Array.from({ length: 100 }, (_, i) => i / 100), diff --git a/blocks/_blog-post-card.liquid b/blocks/_blog-post-card.liquid index 72baf19d3..b9d7f0494 100644 --- a/blocks/_blog-post-card.liquid +++ b/blocks/_blog-post-card.liquid @@ -4,17 +4,36 @@ class="blog-post-card" style="--text-align: {{ block_settings.alignment }}" > - {% if article.image %} - {% content_for 'block', id: 'image', type: '_blog-post-image', article: article %} - {% endif %} +
GET $10 OFF
", + "width": "fit-content", + "max_width": "normal", + "alignment": "center", + "alignment_mobile": "center", + "type_preset": "custom", + "font": "var(--font-body--family)", + "font_size": "3rem", + "line_height": "0.76", + "letter_spacing": "normal", + "case": "uppercase", + "wrap": "pretty", + "color": "var(--color-foreground-heading)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "text_iFTcmK": { + "type": "text", + "name": "t:names.text", + "settings": { + "text": "You're number 1, so find out about new products and exciting stuff before everyone else.
", + "width": "fit-content", + "max_width": "none", + "alignment": "center", + "alignment_mobile": "center", + "type_preset": "custom", + "font": "var(--font-subheading--family)", + "font_size": "1rem", + "line_height": "0.76", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-foreground-heading)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 10, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "email_signup_6EwKfc": { + "type": "email-signup", + "name": "t:names.email_signup", + "settings": { + "width": "custom", + "custom_width": 65, + "inherit_color_scheme": true, + "color_scheme": "", + "heading": "", + "heading_preset": "h3", + "border_style": "all", + "border_width": 0, + "border_radius": 0, + "input_type_preset": "paragraph", + "style_class": "button", + "display_type": "text", + "label": "SING ME UP", + "integrated_button": false, + "button_type_preset": "paragraph", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + } + }, + "block_order": [ + "text_znTxrd", + "text_iFTcmK", + "email_signup_6EwKfc" + ] + } + }, + "block_order": [ + "group_yFxPmw" + ] + }, + "group_TBaHVQ": { + "type": "group", + "name": "Menu", + "settings": { + "footer_id": "footer_menu", + "content_direction": "row", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "center", + "gap": 12, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "group_HXx3ec": { + "type": "group", + "name": "t:names.group", + "settings": { + "footer_id": "footer_social", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "center", + "vertical_alignment_flex_direction_column": "center", + "gap": 12, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "image_Aidb37": { + "type": "image", + "name": "t:names.image", + "settings": { + "image": "shopify://shop_images/Dovetail_Logo_Dovetail-Blue_733x_6fec2b4b-9ba6-4886-85ea-93afcc60c5d0.avif", + "link": "", + "image_ratio": "adapt", + "width": "fit-content", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "padding-block-start": 0, + "padding-block-end": 32, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "text_KtXg4H": { + "type": "text", + "name": "t:names.text", + "settings": { + "text": "", + "width": "fit-content", + "max_width": "normal", + "alignment": "left", + "alignment_mobile": "left", + "type_preset": "custom", + "font": "var(--font-subheading--family)", + "font_size": "1rem", + "line_height": "0.76", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-primary)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "text_bFMYPQ": { + "type": "text", + "name": "t:names.text", + "settings": { + "text": "Email: cs@dovetailworkwear.com
", + "width": "fit-content", + "max_width": "normal", + "alignment": "left", + "alignment_mobile": "left", + "type_preset": "custom", + "font": "var(--font-subheading--family)", + "font_size": "1rem", + "line_height": "0.76", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-primary)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 16, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "social_links_bNha3c": { + "type": "social-links", + "name": "t:names.social_media_links", + "settings": { + "facebook_url": "shopify://collections/gardening-essentials", + "instagram_url": "shopify://collections", + "youtube_url": "shopify://collections/gardening-essentials", + "tiktok_url": "shopify://collections", + "twitter_url": "", + "threads_url": "", + "linkedin_url": "", + "bluesky_url": "", + "snapchat_url": "", + "pinterest_url": "shopify://collections", + "tumblr_url": "", + "vimeo_url": "", + "custom_url": "" + }, + "blocks": {} + } + }, + "block_order": [ + "image_Aidb37", + "text_KtXg4H", + "text_bFMYPQ", + "social_links_bNha3c" + ] + }, + "menu_3T7hEg": { + "type": "menu", + "name": "t:names.menu", + "settings": { + "menu": "shop", + "heading": "SHOP", + "menu_spacing": 0, + "show_as_accordion": false, + "accordion_icon": "caret", + "accordion_dividers": false, + "inherit_color_scheme": true, + "color_scheme": "", + "heading_preset": "h4", + "link_preset": "paragraph", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "menu_bxGCE6": { + "type": "menu", + "name": "t:names.menu", + "settings": { + "menu": "main-menu", + "heading": "CUSTOMER SERVICE", + "menu_spacing": 0, + "show_as_accordion": false, + "accordion_icon": "caret", + "accordion_dividers": false, + "inherit_color_scheme": true, + "color_scheme": "", + "heading_preset": "h4", + "link_preset": "paragraph", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "menu_NHHWwW": { + "type": "menu", + "name": "t:names.menu", + "settings": { + "menu": "main-menu", + "heading": "ABOUT OUR BRAND", + "menu_spacing": 0, + "show_as_accordion": false, + "accordion_icon": "caret", + "accordion_dividers": false, + "inherit_color_scheme": true, + "color_scheme": "", + "heading_preset": "h4", + "link_preset": "paragraph", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "menu_6faHmy": { + "type": "menu", + "name": "t:names.menu", + "settings": { + "menu": "main-menu", + "heading": "CONTACT", + "menu_spacing": 0, + "show_as_accordion": false, + "accordion_icon": "caret", + "accordion_dividers": false, + "inherit_color_scheme": true, + "color_scheme": "", + "heading_preset": "h4", + "link_preset": "paragraph", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + } + }, + "block_order": [ + "group_HXx3ec", + "menu_3T7hEg", + "menu_bxGCE6", + "menu_NHHWwW", + "menu_6faHmy" + ] + } + }, + "block_order": [ + "group_8kytbg", + "group_TBaHVQ" + ] }, - "text_HafH7P": { - "type": "text", - "name": "Text", + "group_QRFQcr": { + "type": "group", + "name": "t:names.group", "settings": { - "text": "Get exclusive deals and early access to new products.
", - "width": "100%", - "max_width": "normal", - "alignment": "left", - "type_preset": "rte", - "font": "var(--font-body--family)", - "font_size": "", - "line_height": "normal", - "letter_spacing": "normal", - "case": "none", - "wrap": "pretty", - "color": "var(--color-foreground)", - "background": false, - "background_color": "#00000026", - "corner_radius": 0, - "padding-block-start": 0, - "padding-block-end": 0, + "footer_id": "ID", + "content_direction": "row", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "center", + "gap": 12, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": true, + "overlay_color": "#dedfe0", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 50, + "padding-block-end": 50, "padding-inline-start": 0, "padding-inline-end": 0 }, - "blocks": {} + "blocks": { + "text_LaDVqf": { + "type": "text", + "name": "t:names.text", + "settings": { + "text": "© 2026 Dovetail Workwear | Privacy Policy | Terms and Conditions
", + "width": "100%", + "max_width": "normal", + "alignment": "center", + "alignment_mobile": "center", + "type_preset": "rte", + "font": "var(--font-body--family)", + "font_size": "1rem", + "line_height": "normal", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-foreground)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "payment_icons_rnk9ww": { + "type": "payment-icons", + "name": "t:names.payment_icons", + "disabled": true, + "settings": { + "horizontal_alignment": "flex-end", + "gap": 10, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + } + }, + "block_order": [ + "text_LaDVqf", + "payment_icons_rnk9ww" + ] } }, "block_order": [ - "text_pF6rVi", - "text_HafH7P" + "divider_GQKezT", + "group_xx8tJb", + "group_QRFQcr" ] - }, - "email-signup_HafH7P": { - "type": "email-signup", - "name": "Email Signup", - "settings": { - "width": "fill" - } } }, "block_order": [ - "group_wErUQf", - "email-signup_HafH7P" + "group_KiKpmM" + ], + "custom_css": [ + ".email-signup__input-group {gap: 65px;}", + ".group-email_pop {transform: translateY(-50px);}", + ".group-footer_menu {padding: 0 83px;}", + ".group-footer_menu .layout-panel-flex {justify-content: space-between;}", + ".group-footer_menu .footer_social,.group-footer_menu accordion-custom {max-width: fit-content;}", + ".group-footer_social {max-width: fit-content; width: fit-content;}", + ".group-footer_social .image-block__image {width: 200px;}" ], "name": "t:names.footer", "settings": { - "section_width": "page-width", + "section_width": "full-width", "gap": 20, - "color_scheme": "scheme-5", - "padding-block-start": 36, - "padding-block-end": 36 + "color_scheme": "scheme-fa2df66f-d094-4d01-ad02-3c74a35b36f1", + "padding-block-start": 0, + "padding-block-end": 0 } }, "utilities": { "type": "footer-utilities", - "settings": { - "section_width": "page-width", - "gap": 24, - "divider_thickness": 1, - "color_scheme": "scheme-5", - "padding-block-start": 12, - "padding-block-end": 16 - }, "blocks": { "copyright": { "type": "footer-copyright", @@ -150,31 +700,52 @@ "show_powered_by": true, "font_size": "0.75rem", "case": "none" - } + }, + "blocks": {} }, "policy_list": { "type": "footer-policy-list", "settings": { "font_size": "0.75rem", "case": "none" - } + }, + "blocks": {} }, "social_icons": { "type": "social-links", + "disabled": true, "settings": { "facebook_url": "https://www.facebook.com", "instagram_url": "https://www.instagram.com", + "youtube_url": "https://www.youtube.com", "tiktok_url": "https://www.tiktok.com", "twitter_url": "https://www.twitter.com", - "youtube_url": "https://www.youtube.com" - } + "threads_url": "", + "linkedin_url": "", + "bluesky_url": "", + "snapchat_url": "", + "pinterest_url": "", + "tumblr_url": "", + "vimeo_url": "", + "custom_url": "" + }, + "blocks": {} } }, "block_order": [ "copyright", "policy_list", "social_icons" - ] + ], + "disabled": true, + "settings": { + "section_width": "page-width", + "gap": 24, + "divider_thickness": 1, + "color_scheme": "scheme-5", + "padding-block-start": 12, + "padding-block-end": 16 + } } }, "order": [ diff --git a/sections/header-announcements.liquid b/sections/header-announcements.liquid index 586c58e7a..3c1fac42d 100644 --- a/sections/header-announcements.liquid +++ b/sections/header-announcements.liquid @@ -115,10 +115,24 @@ margin: 0; } + /* Override italic to behave as border underline since Shopify inline_richtext lacks a native underline button */ + .announcement-bar__text em, + .announcement-bar__text i { + font-style: normal; + text-decoration: none; + border-bottom: 1px solid currentColor; + padding-bottom: 1px; + } + .announcement-bar__link { position: absolute; inset: 0; } + + .announcement-bar__text em strong{ + font-weight: 600; + text-decoration: underline; + } {% endstylesheet %} {% schema %} diff --git a/sections/header-group.json b/sections/header-group.json index 99314087e..a81586d13 100644 --- a/sections/header-group.json +++ b/sections/header-group.json @@ -17,13 +17,13 @@ "announcement_BxgCk9": { "type": "_announcement", "settings": { - "text": "Welcome to our store", + "text": "BEST-SELLING WOMEN’S WORKWEAR SHOP NOW", "link": "", "font": "var(--font-subheading--family)", - "font_size": "0.75rem", - "weight": "", + "font_size": "1.125rem", + "weight": "300", "letter_spacing": "normal", - "case": "none" + "case": "uppercase" }, "blocks": {} } @@ -35,9 +35,9 @@ "settings": { "speed": 5, "section_width": "page-width", - "color_scheme": "scheme-1", - "divider_width": 1, - "padding-block-start": 15, + "color_scheme": "scheme-5", + "divider_width": 0, + "padding-block-start": 16, "padding-block-end": 15 } }, @@ -62,16 +62,16 @@ "settings": { "menu": "main-menu", "color_scheme": "", - "type_font_primary_size": "0.875rem", - "menu_font_style": "inverse", - "type_font_primary_link": "body", - "type_case_primary_link": "none", - "menu_style": "featured_products", + "type_font_primary_size": "1rem", + "menu_font_style": "regular", + "type_font_primary_link": "heading", + "type_case_primary_link": "uppercase", + "menu_style": "text", "featured_products_aspect_ratio": "4 / 5", "featured_collections_aspect_ratio": "16 / 9", "image_border_radius": 0, "navigation_bar": false, - "color_scheme_navigation_bar": "", + "color_scheme_navigation_bar": "scheme-cef83bbf-2633-4cee-9b3a-9d8125a1172a", "drawer_accordion": false, "drawer_accordion_expand_first": false, "drawer_dividers": false @@ -79,10 +79,14 @@ "blocks": {} } }, + "custom_css": [ + ".menu-list__link-title {color: white;}" + ], "settings": { - "logo_position": "left", + "logo_position": "center", "menu_position": "left", "menu_row": "top", + "customer_account_menu": "customer-account-main-menu", "show_search": true, "search_position": "right", "search_row": "top", @@ -93,13 +97,17 @@ "localization_font_size": "0.875rem", "localization_position": "right", "localization_row": "top", - "section_width": "page-width", + "section_width": "full-width", "section_height": "standard", "enable_sticky_header": "always", "divider_width": 0, "divider_size": "page-width", "border_width": 0, - "color_scheme_top": "scheme-1", + "actions_display_style": "icon", + "actions_font_size": "0.875rem", + "actions_font": "body", + "actions_text_case": "uppercase", + "color_scheme_top": "scheme-6", "color_scheme_bottom": "", "color_scheme_transparent": "scheme-6", "enable_transparent_header_home": false, @@ -109,10 +117,22 @@ "enable_transparent_header_collection": false, "collection_color_scheme": "default" } + }, + "custom_liquid_rydHG4": { + "type": "custom-liquid", + "name": "t:names.custom_liquid", + "settings": { + "custom_liquid": "", + "color_scheme": "", + "section_width": "page-width", + "padding-block-start": 0, + "padding-block-end": 0 + } } }, "order": [ "header_announcements_9jGBFp", - "header_section" + "header_section", + "custom_liquid_rydHG4" ] } diff --git a/sections/hero.liquid b/sections/hero.liquid index 4abcf4726..dd5f298af 100644 --- a/sections/hero.liquid +++ b/sections/hero.liquid @@ -100,17 +100,19 @@ endif assign sizes = '(min-width: 750px) ' | append: media_width_desktop | append: ', ' | append: media_width_mobile - assign widths = '832, 1200, 1600, 1920, 2560, 3840' + assign widths = '375, 450, 660, 900, 1320, 1800, 2136, 2400, 3000, 3600, 3840' assign sizes_mobile = media_width_mobile - assign mobile_widths = '416, 600, 800, 1200, 1600' + assign mobile_widths = '375, 450, 660, 900, 1320, 1800' assign mobile_widths_array = mobile_widths | split: ', ' assign fetch_priority = 'auto' + assign loading_strategy = 'lazy' if section.index == 1 assign fetch_priority = 'high' + assign loading_strategy = 'eager' endif -%} +-%} {% capture media_slot_1 %} {%- if media_1 == 'image' and media_1_mobile == 'image' -%} @@ -141,6 +143,7 @@ class: 'hero__media', sizes: sizes, fetchpriority: fetch_priority, + loading: loading_strategy, data-testid: 'hero-desktop-image-1' }} @@ -157,6 +160,7 @@ class: 'hero__media', sizes: sizes, fetchpriority: fetch_priority, + loading: loading_strategy, data-testid: 'hero-desktop-image-1' }}Browse our latest products
", - "width": "fit-content", - "max_width": "normal", - "alignment": "left", - "type_preset": "h2", - "font": "var(--font-body--family)", - "font_size": "1rem", - "line_height": "normal", - "letter_spacing": "normal", - "case": "none", - "wrap": "pretty", - "color": "var(--color-foreground-heading)", - "background": false, - "background_color": "#00000026", - "corner_radius": 0, - "padding-block-start": 0, - "padding-block-end": 0, - "padding-inline-start": 0, - "padding-inline-end": 0 + "footer_id": "ID", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "center", + "gap": 5, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fill", + "custom_height": 100, + "inherit_color_scheme": false, + "color_scheme": "scheme-f0150d46-c29e-406a-acfa-cdc1f91a0991", + "background_media": "none", + "video_position": "cover", + "background_image": "shopify://shop_images/DTW-Homepage-Slider-ProvisionsCargo-Desktop1.jpg", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "hero-apparel-2", + "padding-block-start": 40, + "padding-block-end": 40, + "padding-inline-start": 55, + "padding-inline-end": 40 }, - "blocks": {} + "blocks": { + "text_KccT9h": { + "type": "text", + "name": "banner text", + "settings": { + "text": "LIGHTWEIGHT
CARGO PANTS
{{ closest.product.title }}
", + "width": "fit-content", + "max_width": "normal", + "alignment": "left", + "alignment_mobile": "left", + "type_preset": "custom", + "font": "var(--font-body--family)", + "font_size": "1.25rem", + "line_height": "normal", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-foreground-heading)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "price_Nk6F7Q": { + "type": "price", + "name": "t:names.product_price", + "settings": { + "show_sale_price_first": true, + "show_installments": false, + "show_tax_info": false, + "type_preset": "custom", + "width": "100%", + "alignment": "center", + "font": "var(--font-heading--family)", + "font_size": "1.25rem", + "line_height": "tight", + "letter_spacing": "normal", + "case": "none", + "color": "var(--color-foreground)", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + } + }, + "block_order": [ + "badge_DfX9aA", + "text_eUXG9B", + "price_Nk6F7Q" + ] + } + }, + "block_order": [ + "product_card_gallery_9jRGpD", + "product_card_group_aYdjrm" + ] + } + }, + "name": "t:names.products_carousel", + "settings": { + "collection": "gardening-essentials", + "layout_type": "grid", + "carousel_on_mobile": false, + "max_products": 4, + "columns": 4, + "mobile_columns": "2", + "mobile_card_size": "60cqw", + "columns_gap": 8, + "rows_gap": 24, + "icons_style": "none", + "icons_shape": "none", + "section_width": "page-width", + "horizontal_alignment": "center", + "gap": 28, + "color_scheme": "scheme-58084d4c-a86e-4d0a-855e-a0966e5043f7", + "padding-block-start": 48, + "padding-block-end": 48 + } + }, + "collection_list_DC4gk3": { + "type": "collection-list", + "blocks": { + "group_GrXPLL": { + "type": "group", + "name": "t:names.header", + "settings": { + "footer_id": "ID", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "center", + "vertical_alignment_flex_direction_column": "center", + "gap": 12, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "text_zTaymr": { + "type": "text", + "name": "t:names.heading", + "settings": { + "text": "By women, for women, and with women, Dovetail Workwear is both a young company and the largest exclusively women’s workwear company in the northern hemisphere. Based in Portland, OR, Dovetail Workwear makes all-season, all-reason utility apparel that stands up to the job.
", + "width": "100%", + "max_width": "none", + "alignment": "left", + "alignment_mobile": "left", + "type_preset": "custom", + "font": "var(--font-body--family)", + "font_size": "1.25rem", + "line_height": "normal", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-foreground)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "button_QqaHxB": { + "type": "button", + "name": "t:names.button", + "settings": { + "label": "ABOUT US", + "link": "shopify://collections/all", + "open_in_new_tab": false, + "style_class": "button", + "font_size": 20, + "font_size_mobile": 16, + "width": "fit-content", + "custom_width": 100, + "width_mobile": "fit-content", + "custom_width_mobile": 100, + "padding-block-start": 16, + "padding-block-end": 16, + "padding-inline-start": 32, + "padding-inline-end": 32 + }, + "blocks": {} + } + }, + "block_order": [ + "image_rBpmVF", + "text_GmxcGz", + "button_QqaHxB" + ] + } + }, + "block_order": [ + "image_N6U4A6", + "group_6fhiCT" + ] + } + }, + "block_order": [ + "slide_HC9rkM" + ], + "name": "t:names.slideshow_full_frame", + "settings": { + "display_mode": "full_frame", + "section_width": "full-width", + "full_frame_on_mobile": false, + "slideshow_gap": 12, + "corner_radius": 0, + "slide_height": "auto", + "content_position": "on-media", + "color_scheme": "", + "icons_style": "arrows_large", + "icons_shape": "none", + "slideshow_controls_style": "dots", + "autoplay": false, + "autoplay_speed": 4, + "padding-block-start": 0, + "padding-block-end": 24 + } + }, + "section_9ErdMf": { + "type": "section", + "blocks": { + "group_4cFxRd": { + "type": "group", + "name": "t:names.column", + "settings": { + "footer_id": "ID", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "flex-start", + "gap": 8, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image": "shopify://shop_images/h1-schmutz-opt.png", + "background_image_position": "fit", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "text_GzyFBB": { + "type": "text", + "name": "t:names.heading", + "settings": { + "text": "DURABLE WORK WEAR FOR WOMEN
", + "width": "100%", + "max_width": "normal", + "alignment": "center", + "alignment_mobile": "left", + "type_preset": "custom", + "font": "var(--font-heading--family)", + "font_size": "3.5rem", + "line_height": "0.76", + "letter_spacing": "normal", + "case": "uppercase", + "wrap": "pretty", + "color": "var(--color-foreground)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "group_3zTTja": { + "type": "group", + "name": "t:names.group", + "settings": { + "footer_id": "ID", + "content_direction": "row", + "vertical_on_mobile": true, + "horizontal_alignment": "center", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "center", + "gap": 64, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 0, + "padding-block-end": 11, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "button_FjHG9P": { + "type": "button", + "name": "t:names.button", + "settings": { + "label": "Shop Pants", + "link": "shopify://collections/all", + "open_in_new_tab": false, + "style_class": "button", + "font_size": 17, + "width": "fit-content", + "custom_width": 100, + "width_mobile": "fit-content", + "custom_width_mobile": 100, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "button_qPazTy": { + "type": "button", + "name": "t:names.button", + "settings": { + "label": "Shop tops", + "link": "shopify://collections/all", + "open_in_new_tab": false, + "style_class": "button", + "font_size": 17, + "font_size_mobile": 16, + "width": "fit-content", + "custom_width": 100, + "width_mobile": "fit-content", + "custom_width_mobile": 100, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + } + }, + "block_order": [ + "button_FjHG9P", + "button_qPazTy" + ] + } + }, + "block_order": [ + "text_GzyFBB", + "group_3zTTja" + ] + } + }, + "block_order": [ + "group_4cFxRd" + ], + "name": "t:names.multicolumn", + "settings": { + "content_direction": "row", + "vertical_on_mobile": true, + "horizontal_alignment": "center", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "center", + "gap": 0, + "section_width": "page-width", + "section_height": "", + "section_height_custom": 50, + "color_scheme": "scheme-3", + "background_media": "image", + "video_position": "cover", + "background_image": "shopify://shop_images/h1-schmutz-opt.png", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "padding-block-start": 60, + "padding-block-end": 27 + } + }, + "section_weYrmL": { + "type": "section", + "blocks": { + "group_KQDKWm": { + "type": "group", + "name": "t:names.column", + "settings": { + "footer_id": "ID", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "center", + "vertical_alignment_flex_direction_column": "center", + "gap": 8, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 10, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "text_aCkCP7": { + "type": "text", + "name": "t:names.heading", + "settings": { + "text": "