diff --git a/.vscode/settings.json b/.vscode/settings.json
index 90abaf1f399..31e041fbc16 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,7 +8,7 @@
"editor.formatOnSave": true
},
"[liquid]": {
- "editor.defaultFormatter": "Shopify.theme-check-vscode",
+ "editor.defaultFormatter": "sissel.shopify-liquid",
"editor.formatOnSave": true
},
"themeCheck.checkOnSave": true
diff --git a/assets/base.css b/assets/base.css
index c8c0d4cbde1..5ade2b6e294 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -146,12 +146,12 @@ body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
z-index: 0;
}
-.section + .section {
+.section+.section {
margin-top: var(--spacing-sections-mobile);
}
@media screen and (min-width: 750px) {
- .section + .section {
+ .section+.section {
margin-top: var(--spacing-sections-desktop);
}
}
@@ -299,6 +299,7 @@ h1,
}
@media only screen and (min-width: 750px) {
+
h1,
.h1 {
font-size: calc(var(--font-heading-scale) * 4rem);
@@ -311,6 +312,7 @@ h2,
}
@media only screen and (min-width: 750px) {
+
h2,
.h2 {
font-size: calc(var(--font-heading-scale) * 2.4rem);
@@ -323,6 +325,7 @@ h3,
}
@media only screen and (min-width: 750px) {
+
h3,
.h3 {
font-size: calc(var(--font-heading-scale) * 1.8rem);
@@ -342,6 +345,7 @@ h5,
}
@media only screen and (min-width: 750px) {
+
h5,
.h5 {
font-size: calc(var(--font-heading-scale) * 1.3rem);
@@ -557,7 +561,7 @@ hr {
fill: rgba(var(--color-foreground), 0.55);
}
-details > * {
+details>* {
box-sizing: border-box;
}
@@ -642,7 +646,7 @@ h3 .icon-arrow,
height: 20px;
}
-.svg-wrapper > svg {
+.svg-wrapper>svg {
height: 100%;
width: 100%;
}
@@ -669,7 +673,7 @@ summary::-webkit-details-marker {
position: relative;
}
-.disclosure-has-popup[open] > summary::before {
+.disclosure-has-popup[open]>summary::before {
position: fixed;
top: 0;
right: 0;
@@ -682,20 +686,20 @@ summary::-webkit-details-marker {
background: transparent;
}
-.disclosure-has-popup > summary::before {
+.disclosure-has-popup>summary::before {
display: none;
}
-.disclosure-has-popup[open] > summary + * {
+.disclosure-has-popup[open]>summary+* {
z-index: 100;
}
@media screen and (min-width: 750px) {
- .disclosure-has-popup[open] > summary + * {
+ .disclosure-has-popup[open]>summary+* {
z-index: 4;
}
- .facets .disclosure-has-popup[open] > summary + * {
+ .facets .disclosure-has-popup[open]>summary+* {
z-index: 2;
}
}
@@ -811,6 +815,7 @@ summary::-webkit-details-marker {
}
@media screen and (min-width: 990px) {
+
.title,
.title-wrapper-with-link {
margin: 5rem 0 3rem;
@@ -854,7 +859,7 @@ summary::-webkit-details-marker {
margin-top: 0;
}
-.title-wrapper--no-top-margin > .title {
+.title-wrapper--no-top-margin>.title {
margin-top: 0;
}
@@ -1115,7 +1120,7 @@ summary::-webkit-details-marker {
background-color: transparent;
}
-.media > *:not(.zoom):not(.deferred-media__poster-button),
+.media>*:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
display: block;
max-width: 100%;
@@ -1126,7 +1131,7 @@ summary::-webkit-details-marker {
width: 100%;
}
-.media > img {
+.media>img {
object-fit: cover;
object-position: center center;
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -1157,7 +1162,7 @@ summary::-webkit-details-marker {
border-radius: 50%;
}
-.media.media--hover-effect > img + img {
+.media.media--hover-effect>img+img {
opacity: 0;
}
@@ -1194,7 +1199,8 @@ button.shopify-payment-button__button--unbranded {
--shadow-blur-radius: var(--buttons-shadow-blur-radius);
--shadow-opacity: var(--buttons-shadow-opacity);
--shadow-visible: var(--buttons-shadow-visible);
- --border-offset: var(--buttons-border-offset); /* reduce radius edge artifacts */
+ --border-offset: var(--buttons-border-offset);
+ /* reduce radius edge artifacts */
--border-opacity: calc(1 - var(--buttons-border-opacity));
border-radius: var(--buttons-radius-outset);
position: relative;
@@ -1239,8 +1245,7 @@ button.shopify-payment-button__button--unbranded {
left: 0;
z-index: -1;
border-radius: var(--buttons-radius-outset);
- box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
- rgba(var(--color-shadow), var(--shadow-opacity));
+ box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
}
.button:after,
@@ -1255,8 +1260,7 @@ button.shopify-payment-button__button--unbranded {
left: var(--buttons-border-width);
z-index: 1;
border-radius: var(--buttons-radius);
- box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
- rgba(var(--color-button-text), var(--border-opacity)),
+ box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text), var(--border-opacity)),
0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
transition: box-shadow var(--duration-short) ease;
}
@@ -1266,8 +1270,7 @@ button.shopify-payment-button__button--unbranded {
.customer button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
--border-offset: 1.3px;
- box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
- rgba(var(--color-button-text), var(--border-opacity)),
+ box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text), var(--border-opacity)),
0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
}
@@ -1320,13 +1323,12 @@ button.shopify-payment-button__button--unbranded {
shopify-accelerated-checkout {
--shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
- --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
- rgba(var(--color-shadow), var(--shadow-opacity));
+ --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
}
+
shopify-accelerated-checkout-cart {
--shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
- --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
- rgba(var(--color-shadow), var(--shadow-opacity));
+ --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
}
@@ -1359,7 +1361,7 @@ shopify-accelerated-checkout-cart {
}
}
-.button.loading > .loading__spinner {
+.button.loading>.loading__spinner {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@@ -1369,11 +1371,11 @@ shopify-accelerated-checkout-cart {
align-items: center;
}
-.button.loading > .loading__spinner .spinner {
+.button.loading>.loading__spinner .spinner {
width: fit-content;
}
-.button.loading > .loading__spinner .path {
+.button.loading>.loading__spinner .path {
stroke: rgb(var(--color-button-text));
}
@@ -1398,7 +1400,7 @@ shopify-accelerated-checkout-cart {
min-height: 4.4rem;
}
-details[open] > .share-button__fallback {
+details[open]>.share-button__fallback {
animation: animateMenuOpen var(--duration-default) ease;
}
@@ -1458,8 +1460,7 @@ details[open] > .share-button__fallback {
bottom: 0;
left: 0;
border-radius: var(--inputs-radius-outset);
- box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
- var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
+ box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
z-index: -1;
}
@@ -1483,7 +1484,7 @@ details[open] > .share-button__fallback {
transform: scale(1.07);
}
-.share-button__close:not(.hidden) + .share-button__copy {
+.share-button__close:not(.hidden)+.share-button__copy {
display: none;
}
@@ -1505,8 +1506,8 @@ details[open] > .share-button__fallback {
z-index: 2;
}
-.field:not(:focus-visible):not(.focused) + .share-button__copy:not(:focus-visible):not(.focused),
-.field:not(:focus-visible):not(.focused) + .share-button__close:not(:focus-visible):not(.focused) {
+.field:not(:focus-visible):not(.focused)+.share-button__copy:not(:focus-visible):not(.focused),
+.field:not(:focus-visible):not(.focused)+.share-button__close:not(:focus-visible):not(.focused) {
background-color: inherit;
}
@@ -1558,7 +1559,7 @@ details[open] > .share-button__fallback {
margin: var(--inputs-border-width);
}
-.share-button__message:not(:empty):not(.hidden) ~ * {
+.share-button__message:not(:empty):not(.hidden)~* {
display: none;
}
@@ -1599,8 +1600,7 @@ details[open] > .share-button__fallback {
bottom: 0;
left: 0;
border-radius: var(--inputs-radius-outset);
- box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
- var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
+ box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
z-index: -1;
}
@@ -1637,8 +1637,7 @@ details[open] > .share-button__fallback {
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
- box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
- rgba(var(--color-foreground), var(--inputs-border-opacity));
+ box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground), var(--inputs-border-opacity));
outline: 0;
border-radius: var(--inputs-radius);
}
@@ -1678,7 +1677,7 @@ details[open] > .share-button__fallback {
/* Select */
.select .svg-wrapper,
-.customer select + .svg-wrapper {
+.customer select+.svg-wrapper {
height: 0.6rem;
width: 1rem;
pointer-events: none;
@@ -1736,12 +1735,12 @@ details[open] > .share-button__fallback {
line-height: 1.5;
}
-.field__input:focus ~ .field__label,
-.field__input:not(:placeholder-shown) ~ .field__label,
-.field__input:-webkit-autofill ~ .field__label,
-.customer .field input:focus ~ label,
-.customer .field input:not(:placeholder-shown) ~ label,
-.customer .field input:-webkit-autofill ~ label {
+.field__input:focus~.field__label,
+.field__input:not(:placeholder-shown)~.field__label,
+.field__input:-webkit-autofill~.field__label,
+.customer .field input:focus~label,
+.customer .field input:not(:placeholder-shown)~label,
+.customer .field input:-webkit-autofill~label {
font-size: 1rem;
top: calc(var(--inputs-border-width) + 0.5rem);
left: calc(var(--inputs-border-width) + 2rem);
@@ -1785,14 +1784,14 @@ details[open] > .share-button__fallback {
width: 4.4rem;
}
-.field__button > .svg-wrapper {
+.field__button>.svg-wrapper {
height: 2.5rem;
width: 2.5rem;
}
-.field__input:-webkit-autofill ~ .field__button,
-.field__input:-webkit-autofill ~ .field__label,
-.customer .field input:-webkit-autofill ~ label {
+.field__input:-webkit-autofill~.field__button,
+.field__input:-webkit-autofill~.field__label,
+.customer .field input:-webkit-autofill~label {
color: rgb(0, 0, 0);
}
@@ -1908,8 +1907,7 @@ input[type='checkbox'] {
bottom: 0;
left: 0;
border-radius: var(--inputs-radius-outset);
- box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
- var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
+ box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
z-index: -1;
}
@@ -1991,6 +1989,7 @@ input[type='checkbox'] {
.quantity__input[type='number'] {
-moz-appearance: textfield;
+ appearance: textfield;
}
.quantity__rules {
@@ -2005,7 +2004,7 @@ input[type='checkbox'] {
margin-bottom: 0;
}
-.quantity__rules .divider + .divider::before {
+.quantity__rules .divider+.divider::before {
content: '\2022';
margin: 0 0.5rem;
}
@@ -2014,8 +2013,8 @@ input[type='checkbox'] {
position: relative;
}
-.product__info-container .loading__spinner:not(.hidden) ~ *,
-.quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
+.product__info-container .loading__spinner:not(.hidden)~*,
+.quantity__rules-cart .loading__spinner:not(.hidden)~* {
visibility: hidden;
}
@@ -2199,7 +2198,7 @@ input[type='checkbox'] {
justify-content: flex-end;
}
-.localization-wrapper .localization-selector + .disclosure__list-wrapper {
+.localization-wrapper .localization-selector+.disclosure__list-wrapper {
animation: animateMenuOpen var(--duration-default) ease;
}
@@ -2292,6 +2291,7 @@ input[type='checkbox'] {
opacity: 0;
transform: translateX(var(--announcement-translate-from));
}
+
100% {
opacity: 1;
transform: translateX(0);
@@ -2303,6 +2303,7 @@ input[type='checkbox'] {
opacity: 1;
transform: translateX(0);
}
+
100% {
opacity: 0;
transform: translateX(var(--announcement-translate-to));
@@ -2335,7 +2336,7 @@ input[type='checkbox'] {
z-index: 4;
}
-.section-header ~ .shopify-section-group-header-group {
+.section-header~.shopify-section-group-header-group {
z-index: initial;
}
@@ -2424,7 +2425,7 @@ input[type='checkbox'] {
line-height: 0;
}
-.header > .header__heading-link {
+.header>.header__heading-link {
line-height: 0;
}
@@ -2462,6 +2463,7 @@ input[type='checkbox'] {
}
@media screen and (max-width: 989px) {
+
.header__heading,
.header__heading-link {
text-align: center;
@@ -2479,6 +2481,7 @@ input[type='checkbox'] {
}
@media screen and (min-width: 990px) {
+
.header--middle-left .header__heading-link,
.header--top-left .header__heading-link {
margin-left: -0.75rem;
@@ -2592,16 +2595,16 @@ account-icon {
}
/* Search */
-menu-drawer + .header__search {
+menu-drawer+.header__search {
display: none;
}
-.header > .header__search {
+.header>.header__search {
grid-area: left-icons;
justify-self: start;
}
-.header--top-center.drawer-menu > .header__search {
+.header--top-center.drawer-menu>.header__search {
margin-left: 3.2rem;
}
@@ -2609,7 +2612,7 @@ menu-drawer + .header__search {
grid-area: left-icons;
}
-.header:not(.header--has-menu) * > .header__search {
+.header:not(.header--has-menu) *>.header__search {
display: none;
}
@@ -2618,27 +2621,28 @@ menu-drawer + .header__search {
line-height: 0;
}
-.header--top-center > .header__search {
+.header--top-center>.header__search {
display: none;
}
-.header--top-center * > .header__search {
+.header--top-center *>.header__search {
display: inline-flex;
}
@media screen and (min-width: 990px) {
- .header:not(.header--top-center) * > .header__search,
- .header--top-center > .header__search {
+
+ .header:not(.header--top-center) *>.header__search,
+ .header--top-center>.header__search {
display: inline-flex;
}
- .header:not(.header--top-center) > .header__search,
- .header--top-center * > .header__search {
+ .header:not(.header--top-center)>.header__search,
+ .header--top-center *>.header__search {
display: none;
}
}
-details[open] > .search-modal {
+details[open]>.search-modal {
opacity: 1;
animation: animateMenuOpen var(--duration-default) ease;
}
@@ -2722,36 +2726,36 @@ details[open] .modal-overlay::after {
transition: transform 150ms ease, opacity 150ms ease;
}
-details:not([open]) > .header__icon--menu .icon-close,
-details[open] > .header__icon--menu .icon-hamburger {
+details:not([open])>.header__icon--menu .icon-close,
+details[open]>.header__icon--menu .icon-hamburger {
visibility: hidden;
opacity: 0;
transform: scale(0.8);
}
-.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
+.js details[open]:not(.menu-opening)>.header__icon--menu .icon-close {
visibility: hidden;
}
-.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
+.js details[open]:not(.menu-opening)>.header__icon--menu .icon-hamburger {
visibility: visible;
opacity: 1;
transform: scale(1.07);
}
-.js details > .header__submenu {
+.js details>.header__submenu {
opacity: 0;
transform: translateY(-1.5rem);
}
-details[open] > .header__submenu {
+details[open]>.header__submenu {
animation: animateMenuOpen var(--duration-default) ease;
animation-fill-mode: forwards;
z-index: 1;
}
@media (prefers-reduced-motion) {
- details[open] > .header__submenu {
+ details[open]>.header__submenu {
opacity: 1;
transform: translateY(0);
}
@@ -2778,7 +2782,7 @@ details[open] > .header__submenu {
justify-self: center;
}
- .header--top-center .header__inline-menu > .list-menu--inline {
+ .header--top-center .header__inline-menu>.list-menu--inline {
justify-content: center;
}
@@ -2810,15 +2814,15 @@ details[open] > .header__submenu {
text-underline-offset: 0.3rem;
}
-details[open] > .header__menu-item {
+details[open]>.header__menu-item {
text-decoration: underline;
}
-details[open]:hover > .header__menu-item {
+details[open]:hover>.header__menu-item {
text-decoration-thickness: 0.2rem;
}
-details[open] > .header__menu-item .icon-caret {
+details[open]>.header__menu-item .icon-caret {
transform: rotate(180deg);
}
@@ -2843,8 +2847,7 @@ details[open] > .header__menu-item .icon-caret {
border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
border-style: solid;
border-width: var(--popup-border-width);
- box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
- rgba(var(--color-shadow), var(--popup-shadow-opacity));
+ box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity));
z-index: -1;
}
@@ -2881,8 +2884,8 @@ details[open] > .header__menu-item .icon-caret {
position: static;
}
-header-menu > details,
-details-disclosure > details {
+header-menu>details,
+details-disclosure>details {
position: relative;
}
@@ -2975,8 +2978,7 @@ details-disclosure > details {
bottom: calc(var(--text-boxes-border-width) * -1);
left: calc(var(--text-boxes-border-width) * -1);
border-radius: var(--text-boxes-radius);
- box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
- var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
+ box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset) var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
z-index: -1;
}
@@ -2992,6 +2994,7 @@ details-disclosure > details {
border-right: none;
border-radius: 0;
}
+
.content-container--full-width-mobile:after {
display: none;
}
@@ -3013,8 +3016,7 @@ details-disclosure > details {
bottom: calc(var(--media-border-width) * -1);
left: calc(var(--media-border-width) * -1);
border-radius: var(--media-radius);
- box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
- rgba(var(--color-shadow), var(--media-shadow-opacity));
+ box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity));
z-index: -1;
pointer-events: none;
}
@@ -3096,6 +3098,7 @@ details-disclosure > details {
/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
+
.button,
.shopify-challenge__button,
.customer button {
@@ -3131,11 +3134,11 @@ details-disclosure > details {
display: block;
}
-.rte > *:first-child {
+.rte>*:first-child {
margin-top: 0;
}
-.rte > *:last-child {
+.rte>*:last-child {
margin-bottom: 0;
}
@@ -3155,8 +3158,7 @@ details-disclosure > details {
max-width: 100%;
border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
border-radius: var(--media-radius);
- box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
- rgba(var(--color-shadow), var(--media-shadow-opacity));
+ box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity));
margin-bottom: var(--media-shadow-vertical-offset);
}
@@ -3190,7 +3192,7 @@ details-disclosure > details {
display: inline-flex;
}
-.rte blockquote > * {
+.rte blockquote>* {
margin: -0.5rem 0 -0.5rem 0;
}
@@ -3239,8 +3241,8 @@ details-disclosure > details {
clip-path: inset(0);
}
-.animate--fixed > img:not(.zoom):not(.deferred-media__poster-button),
-.animate--fixed > svg:not(.zoom):not(.deferred-media__poster-button) {
+.animate--fixed>img:not(.zoom):not(.deferred-media__poster-button),
+.animate--fixed>svg:not(.zoom):not(.deferred-media__poster-button) {
position: fixed;
height: 100vh;
}
@@ -3250,8 +3252,8 @@ details-disclosure > details {
--zoom-in-ratio: 1;
}
-.animate--zoom-in > img,
-.animate--zoom-in > .svg-wrapper {
+.animate--zoom-in>img,
+.animate--zoom-in>.svg-wrapper {
transition: scale var(--duration-short) linear;
scale: var(--zoom-in-ratio);
}
@@ -3259,8 +3261,9 @@ details-disclosure > details {
/* Animations */
@media (prefers-reduced-motion: no-preference) {
- .animate--ambient > img,
- .animate--ambient > .svg-wrapper {
+
+ .animate--ambient>img,
+ .animate--ambient>.svg-wrapper {
animation: animateAmbient 30s linear infinite;
}
@@ -3268,6 +3271,7 @@ details-disclosure > details {
0% {
transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
}
+
100% {
transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
}
@@ -3311,6 +3315,7 @@ details-disclosure > details {
transform: translateY(2rem);
opacity: 0.01;
}
+
to {
transform: translateY(0);
opacity: 1;
@@ -3321,6 +3326,7 @@ details-disclosure > details {
from {
opacity: 0.01;
}
+
to {
opacity: 1;
}
@@ -3330,6 +3336,7 @@ details-disclosure > details {
/* Element Hovers: Vertical Lift, 3d Lift */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
+
.animate--hover-3d-lift .card-wrapper .card--card,
.animate--hover-3d-lift .card-wrapper .card--standard .card__inner,
.animate--hover-3d-lift .button:not(.button--tertiary),
@@ -3348,19 +3355,22 @@ details-disclosure > details {
.animate--hover-3d-lift .customer button:not([disabled]):hover,
.animate--hover-3d-lift .shopify-payment-button__button:hover,
.animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
- transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
+ transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease;
+ /* Slow the card transition speed while hover is active. */
transform: rotate(1deg);
box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
}
.animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
- transform: translate(-50%, -50%) scale(1.05); /* Apply a specialized transform to the video play button. */
+ transform: translate(-50%, -50%) scale(1.05);
+ /* Apply a specialized transform to the video play button. */
}
.animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
.animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner {
- transform: rotate(0.5deg); /* Less intense rotation for collage items. */
+ transform: rotate(0.5deg);
+ /* Less intense rotation for collage items. */
}
.animate--hover-3d-lift .product-grid .grid__item:hover,
@@ -3368,11 +3378,13 @@ details-disclosure > details {
.animate--hover-3d-lift .collage__item:hover,
.animate--hover-3d-lift .blog-articles .article:hover,
.animate--hover-3d-lift .complementary-slide li:hover {
- z-index: 2; /* Make sure the hovered card is the topmost card. */
+ z-index: 2;
+ /* Make sure the hovered card is the topmost card. */
}
.animate--hover-3d-lift .product-grid {
- isolation: isolate; /* Ensure z-index changes here don't negatively effect other UI stacking. */
+ isolation: isolate;
+ /* Ensure z-index changes here don't negatively effect other UI stacking. */
}
.animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner {
@@ -3381,17 +3393,14 @@ details-disclosure > details {
}
.animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
- transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
+ transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease;
+ /* Slow the card transition speed while hover is active. */
filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
}
.animate--hover-3d-lift .card-wrapper:hover .card--card:after,
.animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after,
- .animate--hover-3d-lift
- .card-wrapper:hover
- .card--shape.card--standard:not(.card--text)
- .card__inner
- .card__media:before {
+ .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner .card__media:before {
background-image: var(--easter-egg);
background-size: 250px 250px;
mix-blend-mode: color-dodge;
@@ -3399,11 +3408,7 @@ details-disclosure > details {
z-index: 2;
}
- .animate--hover-3d-lift
- .card-wrapper:hover
- .card--shape.card--standard:not(.card--text)
- .card__inner
- .card__media:before {
+ .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner .card__media:before {
content: '';
position: absolute;
top: 0;
@@ -3427,12 +3432,10 @@ details-disclosure > details {
background-size: 400% 100%;
background-position: 90% 0;
background-repeat: no-repeat;
- background-image: linear-gradient(
- 135deg,
- rgba(255, 255, 255, 0) 45%,
- rgba(255, 255, 255, 1) 50%,
- rgba(255, 255, 255, 0) 55%
- );
+ background-image: linear-gradient(135deg,
+ rgba(255, 255, 255, 0) 45%,
+ rgba(255, 255, 255, 1) 50%,
+ rgba(255, 255, 255, 0) 55%);
}
.animate--hover-3d-lift .card-wrapper:hover .card--card:before,
@@ -3487,14 +3490,15 @@ details-disclosure > details {
.animate--hover-vertical-lift .button:not([disabled]):hover:after,
.animate--hover-vertical-lift .customer button:not([disabled]):hover:after,
.animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after {
- --border-offset: 0.3px; /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on. */
- box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
- rgba(var(--color-button-text), var(--border-opacity)),
+ --border-offset: 0.3px;
+ /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on. */
+ box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text), var(--border-opacity)),
0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
}
.animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after {
- --border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */
+ --border-offset: 0px;
+ /* Prevent the border from growing on buttons when this effect is on. */
}
}
@@ -3518,6 +3522,7 @@ details-disclosure > details {
0% {
transform: rotate(0deg);
}
+
100% {
transform: rotate(270deg);
}
@@ -3541,22 +3546,24 @@ details-disclosure > details {
0% {
stroke-dashoffset: 280;
}
+
50% {
stroke-dashoffset: 75;
transform: rotate(135deg);
}
+
100% {
stroke-dashoffset: 280;
transform: rotate(450deg);
}
}
-.loading__spinner:not(.hidden) + .cart-item__price-wrapper,
-.loading__spinner:not(.hidden) ~ cart-remove-button {
+.loading__spinner:not(.hidden)+.cart-item__price-wrapper,
+.loading__spinner:not(.hidden)~cart-remove-button {
opacity: 50%;
}
-.loading__spinner:not(.hidden) ~ cart-remove-button {
+.loading__spinner:not(.hidden)~cart-remove-button {
pointer-events: none;
cursor: default;
}
@@ -3588,10 +3595,59 @@ details-disclosure > details {
0% {
transform: translateX(-20%) scaleX(0);
}
+
40% {
transform: translateX(30%) scaleX(0.7);
}
+
100% {
transform: translateX(100%) scaleX(0);
}
}
+
+.hero-no1 {
+ width: 100%;
+ height: 100vh;
+ position: relative;
+}
+
+.hero-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-size: cover;
+ background-position: center;
+ z-index: 1;
+}
+
+.video-overlay video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ opacity: 0.3;
+ z-index: 2;
+}
+
+.hero-content {
+ position: relative;
+ z-index: 3;
+ padding: 20px;
+ color: white;
+}
+
+.hero-rich-text {
+ font-size: 1.5rem;
+ margin-bottom: 10px;
+}
+
+.hero-image img {
+ max-width: 100%;
+ border-radius: 5px;
+}
+
+@import 'hero-no1-styles.css';
\ No newline at end of file
diff --git a/assets/custom-blocks.css b/assets/custom-blocks.css
new file mode 100644
index 00000000000..6f849bed5d1
--- /dev/null
+++ b/assets/custom-blocks.css
@@ -0,0 +1,77 @@
+/* Rich Text Block Animations */
+@keyframes fade {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes slide {
+ from {
+ transform: translateY(20px);
+ opacity: 0;
+ }
+
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+@keyframes zoom {
+ from {
+ transform: scale(0.9);
+ opacity: 0;
+ }
+
+ to {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+/* Image Block Hover Effects */
+.image-block img {
+ transition: transform 0.3s ease;
+}
+
+.image-block:hover img {
+ transform: scale(1.05);
+}
+
+/* Product Card Styles */
+.product-card {
+ transition: box-shadow 0.3s ease;
+}
+
+.product-card:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.add-to-cart-button {
+ transition: background-color 0.3s ease;
+}
+
+/* Quick View Modal */
+.quick-view-modal {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ z-index: 1000;
+}
+
+.quick-view-content {
+ position: relative;
+ background: white;
+ max-width: 800px;
+ margin: 40px auto;
+ padding: 20px;
+ border-radius: 4px;
+}
\ No newline at end of file
diff --git a/assets/custom-blocks.js b/assets/custom-blocks.js
new file mode 100644
index 00000000000..dab1de7a9f8
--- /dev/null
+++ b/assets/custom-blocks.js
@@ -0,0 +1,45 @@
+// Quick View Modal
+class QuickViewModal {
+ constructor() {
+ this.init();
+ }
+
+ init() {
+ document.addEventListener('click', (e) => {
+ if (e.target.matches('.quick-view-button')) {
+ this.openQuickView(e.target.dataset.productId);
+ }
+ });
+ }
+
+ async openQuickView(productId) {
+ // Implement quick view modal logic
+ }
+}
+
+// Animation Handler
+class AnimationHandler {
+ constructor() {
+ this.observeElements();
+ }
+
+ observeElements() {
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ }
+ });
+ });
+
+ document.querySelectorAll('[class*="animation-"]').forEach(element => {
+ observer.observe(element);
+ });
+ }
+}
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+ new QuickViewModal();
+ new AnimationHandler();
+});
\ No newline at end of file
diff --git a/assets/hero-no1-a.js b/assets/hero-no1-a.js
new file mode 100644
index 00000000000..f8709cf5fe4
--- /dev/null
+++ b/assets/hero-no1-a.js
@@ -0,0 +1,71 @@
+document.addEventListener('DOMContentLoaded', function () {
+ const heroSection = document.querySelector('.hero-no1');
+ const overlayVideo = heroSection.querySelector('.video-overlay video');
+
+ // Play overlay video and handle opacity
+ if (overlayVideo) {
+ overlayVideo.play();
+ overlayVideo.style.opacity = heroSection.dataset.videoOpacity || '0.3';
+ overlayVideo.addEventListener('mouseenter', () => {
+ overlayVideo.style.opacity = '0.5';
+ });
+ overlayVideo.addEventListener('mouseleave', () => {
+ overlayVideo.style.opacity = heroSection.dataset.videoOpacity || '0.3';
+ });
+ }
+
+ // Adjust image layout based on settings for one or two images per row
+ function adjustImageLayout() {
+ const layout = heroSection.dataset.imageLayout;
+ const heroImages = document.querySelectorAll('.hero-image');
+
+ heroImages.forEach(image => {
+ if (layout === 'one-per-row') {
+ image.style.width = '100%';
+ image.style.margin = '0 auto';
+ } else if (layout === 'two-per-row') {
+ image.style.width = '48%';
+ image.style.margin = '1%';
+ }
+ });
+ }
+
+ adjustImageLayout();
+ window.addEventListener('resize', adjustImageLayout);
+});
+
+document.addEventListener('DOMContentLoaded', function () {
+ const heroSection = document.querySelector('.hero-no1');
+ const overlayVideo = heroSection ? heroSection.querySelector('.video-overlay video') : null;
+
+ // Play overlay video and handle opacity
+ if (overlayVideo) {
+ overlayVideo.play();
+ overlayVideo.style.opacity = heroSection.dataset.videoOpacity || '0.3';
+ overlayVideo.addEventListener('mouseenter', () => {
+ overlayVideo.style.opacity = '0.5';
+ });
+ overlayVideo.addEventListener('mouseleave', () => {
+ overlayVideo.style.opacity = heroSection.dataset.videoOpacity || '0.3';
+ });
+ }
+
+ // Adjust image layout based on settings for one or two images per row
+ function adjustImageLayout() {
+ const layout = heroSection ? heroSection.dataset.imageLayout : 'one-per-row';
+ const heroImages = document.querySelectorAll('.hero-image');
+
+ heroImages.forEach(image => {
+ if (layout === 'one-per-row') {
+ image.style.width = '100%';
+ image.style.margin = '0 auto';
+ } else if (layout === 'two-per-row') {
+ image.style.width = '48%';
+ image.style.margin = '1%';
+ }
+ });
+ }
+
+ adjustImageLayout();
+ window.addEventListener('resize', adjustImageLayout);
+});
diff --git a/assets/hero-no1-styles.css b/assets/hero-no1-styles.css
new file mode 100644
index 00000000000..33697ab0bda
--- /dev/null
+++ b/assets/hero-no1-styles.css
@@ -0,0 +1,117 @@
+.hero-no1 {
+ width: 100%;
+ height: 100vh;
+ position: relative;
+ overflow: hidden;
+}
+
+.hero-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-size: cover;
+ background-position: center;
+ z-index: 1;
+}
+
+.video-overlay video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ z-index: 2;
+}
+
+.hero-content--center {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+
+.hero-rich-text--title {
+ font-weight: bold;
+ text-align: center;
+}
+
+.hero-rich-text--subtitle {
+ font-weight: normal;
+ text-align: center;
+}
+
+.hero-rich-text--caption {
+ font-style: italic;
+ text-align: center;
+}
+
+.hero-image {
+ display: inline-block;
+ margin: 10px;
+}
+
+.hero-image--one-per-row img {
+ width: 100%;
+}
+
+.hero-image--two-per-row img {
+ width: 48%;
+ margin: 1%;
+}
+
+.container {
+ margin: 0 auto;
+}
+
+.hero-no1 {
+ width: 100%;
+ height: 100vh;
+ position: relative;
+ overflow: hidden;
+ /* Consider adding media queries for responsive design */
+}
+
+.hero-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-size: cover;
+ background-position: center;
+ z-index: 1;
+}
+
+/* Example media query for responsiveness */
+@media (max-width: 768px) {
+
+ .hero-rich-text--title,
+ .hero-rich-text--subtitle,
+ .hero-rich-text--caption {
+ font-size: smaller;
+ }
+}
+
+.video-overlay video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ z-index: 2;
+}
+
+.hero-content--center {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+
+.container {
+ margin: 0 auto;
+}
\ No newline at end of file
diff --git a/assets/hero-no1.css b/assets/hero-no1.css
new file mode 100644
index 00000000000..aa7dbfd2626
--- /dev/null
+++ b/assets/hero-no1.css
@@ -0,0 +1,253 @@
+.hero-no1 {
+ width: 100%;
+ height: 100vh;
+ position: relative;
+ overflow: hidden;
+
+ @media screen and (max-width: 768px) {
+ height: var(--mobile-height, 100vh);
+ }
+
+ .hero-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-size: cover;
+ background-position: center;
+ z-index: 1;
+ transition: opacity 0.3s ease;
+
+ @media screen and (max-width: 768px) {
+ background-image: var(--mobile-background) !important;
+ }
+ }
+
+ .video-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 2;
+
+ video {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: opacity 0.3s ease;
+ }
+ }
+
+ .container {
+ position: relative;
+ z-index: 3;
+ height: 100%;
+ margin: 0 auto;
+ padding: 0 20px;
+
+ @media screen and (max-width: 768px) {
+ padding: 0 15px;
+ }
+ }
+
+ .hero-content {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+
+ &--left {
+ align-items: flex-start;
+ text-align: left;
+ }
+
+ &--center {
+ align-items: center;
+ text-align: center;
+ }
+
+ &--right {
+ align-items: flex-end;
+ text-align: right;
+ }
+ }
+
+ .hero-rich-text {
+ opacity: 0;
+ animation: fadeIn 0.8s ease forwards;
+ font-size: var(--desktop-font-size);
+
+ @media screen and (max-width: 768px) {
+ font-size: var(--mobile-font-size);
+ }
+
+ &--title {
+ font-weight: bold;
+ }
+
+ &--subtitle {
+ font-weight: normal;
+ }
+
+ &--caption {
+ font-weight: light;
+ }
+ }
+
+ .hero-image {
+ opacity: 0;
+ animation: fadeIn 0.8s ease forwards;
+
+ img {
+ max-width: 100%;
+ height: auto;
+ }
+
+ &--one-per-row {
+ width: 100%;
+ margin: 0 auto;
+ }
+
+ &--two-per-row {
+ width: 48%;
+ margin: 1%;
+
+ @media screen and (max-width: 768px) {
+ width: 100%;
+ margin: 10px 0;
+ }
+ }
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.interactive-button {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 1em 2em;
+ text-decoration: none;
+ overflow: hidden;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+
+ background: var(--button-background, #000);
+ color: var(--button-text-color, #fff);
+ border-radius: var(--button-border-radius, 8px);
+
+ &__text {
+ position: relative;
+ z-index: 1;
+ }
+
+ &--small {
+ font-size: 0.875rem;
+ padding: 0.75em 1.5em;
+ }
+
+ &--medium {
+ font-size: 1rem;
+ padding: 1em 2em;
+ }
+
+ &--large {
+ font-size: 1.25rem;
+ padding: 1.25em 2.5em;
+ }
+
+ /* Floating Effect */
+ &--floating {
+ animation: float 3s ease-in-out infinite;
+ }
+
+ /* Glowing Effect */
+ &--glowing {
+ &::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle,
+ rgba(255, 255, 255, 0.3) 0%,
+ rgba(255, 255, 255, 0) 70%);
+ animation: glow 3s ease-in-out infinite;
+ }
+ }
+
+ /* Gradient Shift Effect */
+ &--gradient-shift {
+ background-size: 200% 200%;
+ animation: gradientShift 3s ease infinite;
+ }
+
+ /* Morphing Effect */
+ &--morphing {
+ .interactive-button__background {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: var(--button-background);
+ transition: transform 0.3s ease;
+ }
+
+ &:hover .interactive-button__background {
+ transform: scale(1.1) rotate(5deg);
+ }
+ }
+}
+
+@keyframes float {
+
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+
+ 50% {
+ transform: translateY(-10px);
+ }
+}
+
+@keyframes glow {
+
+ 0%,
+ 100% {
+ transform: rotate(0deg);
+ }
+
+ 50% {
+ transform: rotate(180deg);
+ }
+}
+
+@keyframes gradientShift {
+ 0% {
+ background-position: 0% 50%;
+ }
+
+ 50% {
+ background-position: 100% 50%;
+ }
+
+ 100% {
+ background-position: 0% 50%;
+ }
+}
\ No newline at end of file
diff --git a/assets/hero-no1.js b/assets/hero-no1.js
new file mode 100644
index 00000000000..a6da7945a6f
--- /dev/null
+++ b/assets/hero-no1.js
@@ -0,0 +1,126 @@
+class HeroNo1 {
+ constructor(section) {
+ this.container = section;
+ this.videoOverlay = this.container.querySelector('.video-overlay video');
+ this.interactiveButtons = this.container.querySelectorAll('.interactive-button');
+ this.init();
+ }
+
+ init() {
+ if (this.videoOverlay) {
+ this.initVideoOverlay();
+ }
+
+ if (this.interactiveButtons.length) {
+ this.initInteractiveButtons();
+ }
+
+ this.handleResize = this.handleResize.bind(this);
+ window.addEventListener('resize', this.handleResize);
+ this.handleResize();
+ }
+
+ initInteractiveButtons() {
+ this.interactiveButtons.forEach(button => {
+ const style = button.dataset.style || 'floating';
+ const trigger = button.dataset.animationTrigger || 'hover';
+
+ if (style === 'magnetic') {
+ this.initMagneticEffect(button);
+ }
+
+ if (trigger === 'scroll') {
+ this.initScrollTrigger(button);
+ }
+
+ // Ensure links are properly handled
+ if (button.hasAttribute('href')) {
+ button.addEventListener('click', (e) => {
+ const href = button.getAttribute('href');
+ if (href && href !== '#') {
+ if (href.startsWith('/')) {
+ window.location.href = href;
+ } else if (href.startsWith('http')) {
+ window.open(href, '_blank');
+ }
+ }
+ });
+ }
+ });
+ }
+
+ initMagneticEffect(button) {
+ button.addEventListener('mousemove', (e) => {
+ const rect = button.getBoundingClientRect();
+ const x = e.clientX - rect.left - rect.width / 2;
+ const y = e.clientY - rect.top - rect.height / 2;
+
+ button.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px)`;
+ });
+
+ button.addEventListener('mouseleave', () => {
+ button.style.transform = 'translate(0, 0)';
+ });
+ }
+
+ initScrollTrigger(button) {
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ button.classList.add('animate');
+ }
+ });
+ }, { threshold: 0.5 });
+
+ observer.observe(button);
+ }
+
+ initVideoOverlay() {
+ const opacity = this.videoOverlay.parentElement.dataset.videoOpacity || 0.3;
+ this.videoOverlay.style.opacity = opacity;
+
+ this.videoOverlay.addEventListener('mouseenter', () => {
+ this.videoOverlay.style.opacity = Math.min(parseFloat(opacity) + 0.2, 1);
+ });
+
+ this.videoOverlay.addEventListener('mouseleave', () => {
+ this.videoOverlay.style.opacity = opacity;
+ });
+
+ // Ensure video plays on mobile
+ this.videoOverlay.play().catch(() => {
+ console.log('Auto-play prevented');
+ });
+ }
+
+ handleResize() {
+ const isMobile = window.innerWidth <= 768;
+ if (isMobile) {
+ const mobileHeight = this.container.dataset.heightMobile;
+ if (mobileHeight === 'custom') {
+ this.container.style.height = `${this.container.dataset.customHeightMobile}px`;
+ }
+ } else {
+ const desktopHeight = this.container.dataset.heightDesktop;
+ if (desktopHeight === 'custom') {
+ this.container.style.height = `${this.container.dataset.customHeightDesktop}px`;
+ }
+ }
+ }
+
+ onUnload() {
+ window.removeEventListener('resize', this.handleResize);
+ }
+}
+
+// Register section
+customElements.define('hero-no1', class extends HTMLElement {
+ constructor() {
+ super();
+ this.hero = new HeroNo1(this);
+ }
+
+ disconnectedCallback() {
+ this.hero.onUnload();
+ }
+});
\ No newline at end of file
diff --git a/assets/hero-no1.scss b/assets/hero-no1.scss
new file mode 100644
index 00000000000..52c0220e48d
--- /dev/null
+++ b/assets/hero-no1.scss
@@ -0,0 +1,316 @@
+.hero-no1 {
+ width: 100%;
+ height: 100vh;
+ position: relative;
+ overflow: hidden;
+
+ @media screen and (max-width: 768px) {
+ height: var(--mobile-height, 100vh);
+ }
+
+ .hero-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-size: cover;
+ background-position: center;
+ z-index: 1;
+ transition: opacity 0.3s ease;
+
+ @media screen and (max-width: 768px) {
+ background-image: var(--mobile-background) !important;
+ }
+ }
+
+ .video-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 2;
+
+ video {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: opacity 0.3s ease;
+ }
+ }
+
+ .container {
+ position: relative;
+ z-index: 3;
+ height: 100%;
+ margin: 0 auto;
+ padding: 0 20px;
+
+ @media screen and (max-width: 768px) {
+ padding: 0 15px;
+ }
+ }
+
+ .hero-content {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+
+ &--left {
+ align-items: flex-start;
+ text-align: left;
+ }
+
+ &--center {
+ align-items: center;
+ text-align: center;
+ }
+
+ &--right {
+ align-items: flex-end;
+ text-align: right;
+ }
+ }
+
+ .hero-rich-text {
+ max-width: 100%;
+ margin: 0 auto;
+
+ &__heading {
+ margin: 0 0 1rem;
+
+ &--h1 {
+ font-size: var(--font-heading-scale, 2.5rem);
+
+ @media screen and (max-width: 768px) {
+ font-size: calc(var(--font-heading-scale, 2.5rem) * 0.8);
+ }
+ }
+
+ &--h2 {
+ font-size: var(--font-heading-scale, 2rem);
+
+ @media screen and (max-width: 768px) {
+ font-size: calc(var(--font-heading-scale, 2rem) * 0.8);
+ }
+ }
+
+ &--h3 {
+ font-size: var(--font-heading-scale, 1.5rem);
+
+ @media screen and (max-width: 768px) {
+ font-size: calc(var(--font-heading-scale, 1.5rem) * 0.8);
+ }
+ }
+ }
+
+ &__subheading {
+ margin: 0 0 1rem;
+
+ &--large {
+ font-size: 1.5rem;
+
+ @media screen and (max-width: 768px) {
+ font-size: 1.25rem;
+ }
+ }
+
+ &--medium {
+ font-size: 1.25rem;
+
+ @media screen and (max-width: 768px) {
+ font-size: 1.1rem;
+ }
+ }
+
+ &--small {
+ font-size: 1rem;
+
+ @media screen and (max-width: 768px) {
+ font-size: 0.9rem;
+ }
+ }
+ }
+
+ &__text {
+ margin: 0;
+
+ &--large {
+ font-size: 1.25rem;
+ line-height: 1.6;
+
+ @media screen and (max-width: 768px) {
+ font-size: 1.1rem;
+ }
+ }
+
+ &--medium {
+ font-size: 1rem;
+ line-height: 1.5;
+
+ @media screen and (max-width: 768px) {
+ font-size: 0.9rem;
+ }
+ }
+
+ &--small {
+ font-size: 0.9rem;
+ line-height: 1.4;
+
+ @media screen and (max-width: 768px) {
+ font-size: 0.8rem;
+ }
+ }
+ }
+ }
+
+ .hero-image {
+ opacity: 0;
+ animation: fadeIn 0.8s ease forwards;
+
+ img {
+ max-width: 100%;
+ height: auto;
+ }
+
+ &--one-per-row {
+ width: 100%;
+ margin: 0 auto;
+ }
+
+ &--two-per-row {
+ width: 48%;
+ margin: 1%;
+
+ @media screen and (max-width: 768px) {
+ width: 100%;
+ margin: 10px 0;
+ }
+ }
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.interactive-button {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 1em 2em;
+ text-decoration: none;
+ overflow: hidden;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+
+ background: var(--button-background, #000);
+ color: var(--button-text-color, #fff);
+ border-radius: var(--button-border-radius, 8px);
+
+ &__text {
+ position: relative;
+ z-index: 1;
+ }
+
+ &--small {
+ font-size: 0.875rem;
+ padding: 0.75em 1.5em;
+ }
+
+ &--medium {
+ font-size: 1rem;
+ padding: 1em 2em;
+ }
+
+ &--large {
+ font-size: 1.25rem;
+ padding: 1.25em 2.5em;
+ }
+
+ // Floating Effect
+ &--floating {
+ animation: float 3s ease-in-out infinite;
+ }
+
+ // Glowing Effect
+ &--glowing {
+ &::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(
+ circle,
+ rgba(255,255,255,0.3) 0%,
+ rgba(255,255,255,0) 70%
+ );
+ animation: glow 3s ease-in-out infinite;
+ }
+ }
+
+ // Gradient Shift Effect
+ &--gradient_shift {
+ background-size: 200% 200%;
+ animation: gradientShift 3s ease infinite;
+ }
+
+ // Morphing Effect
+ &--morphing {
+ .interactive-button__background {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: var(--button-background);
+ transition: transform 0.3s ease;
+ }
+
+ &:hover .interactive-button__background {
+ transform: scale(1.1) rotate(5deg);
+ }
+ }
+}
+
+@keyframes float {
+ 0%, 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-10px);
+ }
+}
+
+@keyframes glow {
+ 0%, 100% {
+ transform: rotate(0deg);
+ }
+ 50% {
+ transform: rotate(180deg);
+ }
+}
+
+@keyframes gradientShift {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+ 100% {
+ background-position: 0% 50%;
+ }
+}
\ No newline at end of file
diff --git a/assets/theme-editor.js b/assets/theme-editor.js
index d2f08bdc4c0..35f404749e6 100644
--- a/assets/theme-editor.js
+++ b/assets/theme-editor.js
@@ -52,3 +52,40 @@ document.addEventListener('shopify:section:deselect', () => hideProductModal());
document.addEventListener('shopify:inspector:activate', () => hideProductModal());
document.addEventListener('shopify:inspector:deactivate', () => hideProductModal());
+
+document.addEventListener('shopify:section:load', function(event) {
+ if (event.target.classList.contains('hero-no1')) {
+ const heroSection = event.target;
+ const overlayVideo = heroSection.querySelector('.video-overlay video');
+
+ if (overlayVideo) {
+ overlayVideo.play();
+ overlayVideo.style.opacity = heroSection.dataset.videoOpacity || '0.3';
+ }
+
+ adjustImageLayout(heroSection);
+ }
+});
+
+function adjustImageLayout(heroSection) {
+ const layout = heroSection.dataset.imageLayout || 'one-per-row';
+ const heroImages = heroSection.querySelectorAll('.hero-image');
+
+ heroImages.forEach(image => {
+ image.style.width = layout === 'one-per-row' ? '100%' : '48%';
+ image.style.margin = layout === 'one-per-row' ? '0 auto' : '1%';
+ });
+}
+
+// Add handlers for section select/deselect if needed
+document.addEventListener('shopify:section:select', function(event) {
+ if (event.target.classList.contains('hero-no1')) {
+ // Handle section selection in theme editor
+ }
+});
+
+document.addEventListener('shopify:section:deselect', function(event) {
+ if (event.target.classList.contains('hero-no1')) {
+ // Handle section deselection in theme editor
+ }
+});
diff --git a/layout/theme.liquid b/layout/theme.liquid
index 70db635823b..dbc4eef32c2 100644
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -1,4 +1,5 @@
+
@@ -8,18 +9,27 @@
{%- if settings.favicon != blank -%}
-
+
{%- endif -%}
{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
-
+
{%- endunless -%}
{{ page_title }}
- {%- if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%}
- {%- if current_page != 1 %} – Page {{ current_page }}{% endif -%}
- {%- unless page_title contains shop.name %} – {{ shop.name }}{% endunless -%}
+ {%- if current_tags %}
+ – tagged "{{ current_tags | join: ', ' }}"{% endif -%}
+ {%- if current_page != 1 %}
+ – Page {{ current_page }}{% endif -%}
+ {%- unless page_title contains shop.name %}
+ – {{ shop.name }}{% endunless -%}
{% if page_description %}
@@ -54,20 +64,23 @@
{{ body_font_bold_italic | font_face: font_display: 'swap' }}
{{ settings.type_header_font | font_face: font_display: 'swap' }}
+ {% assign scheme_classes = '' %}
{% for scheme in settings.color_schemes -%}
{% assign scheme_classes = scheme_classes | append: ', .color-' | append: scheme.id %}
{% if forloop.index == 1 -%}
- :root,
+ :root,
{%- endif %}
.color-{{ scheme.id }} {
- --color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
- {% if scheme.settings.background_gradient != empty %}
- --gradient-background: {{ scheme.settings.background_gradient }};
- {% else %}
- --gradient-background: {{ scheme.settings.background }};
- {% endif %}
-
- {% liquid
+ --color-background: {{ scheme.settings.background.red }},
+ {{ scheme.settings.background.green }},
+ {{ scheme.settings.background.blue }};
+ {% if scheme.settings.background_gradient != empty %}
+ --gradient-background: {{ scheme.settings.background_gradient }};
+ {% else %}
+ --gradient-background: {{ scheme.settings.background }};
+ {% endif %}
+
+ {% liquid
assign background_color = scheme.settings.background
assign background_color_brightness = background_color | color_brightness
if background_color_brightness <= 26
@@ -77,21 +90,43 @@
else
assign background_color_contrast = background_color | color_darken: 25
endif
- %}
-
- --color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
- --color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }};
- --color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
- --color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
- --color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
- --color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
- --color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
- --color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
- --color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
- --color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
- --color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
- --payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
- }
+%}
+
+ --color-foreground: {{ scheme.settings.text.red }},
+ {{ scheme.settings.text.green }},
+ {{ scheme.settings.text.blue }};
+ --color-background-contrast: {{ background_color_contrast.red }},
+ {{ background_color_contrast.green }},
+ {{ background_color_contrast.blue }};
+ --color-shadow: {{ scheme.settings.shadow.red }},
+ {{ scheme.settings.shadow.green }},
+ {{ scheme.settings.shadow.blue }};
+ --color-button: {{ scheme.settings.button.red }},
+ {{ scheme.settings.button.green }},
+ {{ scheme.settings.button.blue }};
+ --color-button-text: {{ scheme.settings.button_label.red }},
+ {{ scheme.settings.button_label.green }},
+ {{ scheme.settings.button_label.blue }};
+ --color-secondary-button: {{ scheme.settings.background.red }},
+ {{ scheme.settings.background.green }},
+ {{ scheme.settings.background.blue }};
+ --color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},
+ {{ scheme.settings.secondary_button_label.green }},
+ {{ scheme.settings.secondary_button_label.blue }};
+ --color-link: {{ scheme.settings.secondary_button_label.red }},
+ {{ scheme.settings.secondary_button_label.green }},
+ {{ scheme.settings.secondary_button_label.blue }};
+ --color-badge-foreground: {{ scheme.settings.text.red }},
+ {{ scheme.settings.text.green }},
+ {{ scheme.settings.text.blue }};
+ --color-badge-background: {{ scheme.settings.background.red }},
+ {{ scheme.settings.background.green }},
+ {{ scheme.settings.background.blue }};
+ --color-badge-border: {{ scheme.settings.text.red }},
+ {{ scheme.settings.text.green }},
+ {{ scheme.settings.text.blue }};
+ --payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
+ }
{% endfor %}
{{ scheme_classes | prepend: 'body' }} {
@@ -100,12 +135,14 @@
}
:root {
- --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
+ --font-body-family: {{ settings.type_body_font.family }},
+ {{ settings.type_body_font.fallback_families }};
--font-body-style: {{ settings.type_body_font.style }};
--font-body-weight: {{ settings.type_body_font.weight }};
--font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
- --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
+ --font-heading-family: {{ settings.type_header_font.family }},
+ {{ settings.type_header_font.fallback_families }};
--font-heading-style: {{ settings.type_header_font.style }};
--font-heading-weight: {{ settings.type_header_font.weight }};
@@ -122,141 +159,151 @@
--media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
--media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};
- --page-width: {{ settings.page_width | divided_by: 10 }}rem;
- --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;
-
- --product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
- --product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
- --product-card-text-alignment: {{ settings.card_text_alignment }};
- --product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
- --product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
- --product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
- --product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
- --product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
- --product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
- --product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;
-
- --collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
- --collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
- --collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
- --collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
- --collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
- --collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
- --collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
- --collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
- --collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
- --collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;
-
- --blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
- --blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
- --blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
- --blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
- --blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
- --blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
- --blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
- --blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
- --blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
- --blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;
-
- --badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;
-
- --popup-border-width: {{ settings.popup_border_thickness }}px;
- --popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
- --popup-corner-radius: {{ settings.popup_corner_radius }}px;
- --popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
- --popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
- --popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
- --popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;
-
- --drawer-border-width: {{ settings.drawer_border_thickness }}px;
- --drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
- --drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
- --drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
- --drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
- --drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;
-
- --spacing-sections-desktop: {{ settings.spacing_sections }}px;
- --spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;
-
- --grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
- --grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
- --grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
- --grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;
-
- --text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
- --text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
- --text-boxes-radius: {{ settings.text_boxes_radius }}px;
- --text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
- --text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
- --text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
- --text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
- --text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;
-
- --buttons-radius: {{ settings.buttons_radius }}px;
- --buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
- --buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
- --buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
- --buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
- --buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
- --buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
- --buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
- --buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
- --buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;
-
- --inputs-radius: {{ settings.inputs_radius }}px;
- --inputs-border-width: {{ settings.inputs_border_thickness }}px;
- --inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
- --inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
- --inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
- --inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
- --inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
- --inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
- --inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;
-
- --variant-pills-radius: {{ settings.variant_pills_radius }}px;
- --variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
- --variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
- --variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
- --variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
- --variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
- --variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
- }
-
- *,
- *::before,
- *::after {
- box-sizing: inherit;
- }
-
- html {
- box-sizing: border-box;
- font-size: calc(var(--font-body-scale) * 62.5%);
- height: 100%;
- }
-
- body {
- display: grid;
- grid-template-rows: auto auto 1fr auto;
- grid-template-columns: 100%;
- min-height: 100%;
- margin: 0;
- font-size: 1.5rem;
- letter-spacing: 0.06rem;
- line-height: calc(1 + 0.8 / var(--font-body-scale));
- font-family: var(--font-body-family);
- font-style: var(--font-body-style);
- font-weight: var(--font-body-weight);
- }
-
- @media screen and (min-width: 750px) {
- body {
- font-size: 1.6rem;
- }
- }
+ --page-width: {{ settings.page_width | divided_by: 10 }}rem;
+ --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;
+
+ --product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
+ --product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
+ --product-card-text-alignment: {{ settings.card_text_alignment }};
+ --product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
+ --product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
+ --product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
+ --product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
+ --product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
+ --product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
+ --product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;
+
+ --collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
+ --collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
+ --collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
+ --collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
+ --collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
+ --collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
+ --collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
+ --collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
+ --collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
+ --collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;
+
+ --blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
+ --blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
+ --blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
+ --blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
+ --blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
+ --blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
+ --blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
+ --blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
+ --blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
+ --blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;
+
+ --badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;
+
+ --popup-border-width: {{ settings.popup_border_thickness }}px;
+ --popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
+ --popup-corner-radius: {{ settings.popup_corner_radius }}px;
+ --popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
+ --popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
+ --popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
+ --popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;
+
+ --drawer-border-width: {{ settings.drawer_border_thickness }}px;
+ --drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
+ --drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
+ --drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
+ --drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
+ --drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;
+
+ --spacing-sections-desktop: {{ settings.spacing_sections }}px;
+ --spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}
+{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}
+{% endif %}px;
+
+ --grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
+ --grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
+ --grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
+ --grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;
+
+ --text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
+ --text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
+ --text-boxes-radius: {{ settings.text_boxes_radius }}px;
+ --text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
+ --text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
+ --text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
+ --text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
+ --text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;
+
+ --buttons-radius: {{ settings.buttons_radius }}px;
+ --buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}
+{% else %}0{% endif %}px;
+ --buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}
+{% else %}0{% endif %}px;
+ --buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
+ --buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
+ --buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
+ --buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
+ --buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
+ --buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
+ --buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;
+
+ --inputs-radius: {{ settings.inputs_radius }}px;
+ --inputs-border-width: {{ settings.inputs_border_thickness }}px;
+ --inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
+ --inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
+ --inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
+ --inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}
+{% else %}0{% endif %}px;
+ --inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
+ --inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
+ --inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}
+{% else %}0{% endif %}px;
+
+ --variant-pills-radius: {{ settings.variant_pills_radius }}px;
+ --variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
+ --variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
+ --variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
+ --variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
+ --variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
+ --variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: inherit;
+}
+
+html {
+ box-sizing: border-box;
+ font-size: calc(var(--font-body-scale) * 62.5%);
+ height: 100%;
+}
+
+body {
+ display: grid;
+ grid-template-rows: auto auto 1fr auto;
+ grid-template-columns: 100%;
+ min-height: 100%;
+ margin: 0;
+ font-size: 1.5rem;
+ letter-spacing: 0.06rem;
+ line-height: calc(1 + 0.8 / var(--font-body-scale));
+ font-family: var(--font-body-family);
+ font-style: var(--font-body-style);
+ font-weight: var(--font-body-weight);
+}
+
+@media screen and (min-width: 750px) {
+ body {
+ font-size: 1.6rem;
+ }
+}
{% endstyle %}
{{ 'base.css' | asset_url | stylesheet_tag }}
-
+
{%- if settings.cart_type == 'drawer' -%}
{{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
@@ -268,12 +315,22 @@
{%- unless settings.type_body_font.system? -%}
{% comment %}theme-check-disable AssetPreload{% endcomment %}
-
+
{% comment %}theme-check-enable AssetPreload{% endcomment %}
{%- endunless -%}
{%- unless settings.type_header_font.system? -%}
{% comment %}theme-check-disable AssetPreload{% endcomment %}
-
+
{% comment %}theme-check-enable AssetPreload{% endcomment %}
{%- endunless -%}
@@ -287,8 +344,7 @@
rel="stylesheet"
href="{{ 'component-predictive-search.css' | asset_url }}"
media="print"
- onload="this.media='all'"
- >
+ onload="this.media='all'">
{%- endif -%}
+
+
+
+
+ {{ 'hero-no1.css' | asset_url | stylesheet_tag }}
+
@@ -309,7 +424,11 @@
{% sections 'header-group' %}
-
+
{{ content_for_layout }}
@@ -373,4 +492,4 @@
{%- endif -%}
-
+