diff --git a/assets/base.css b/assets/base.css index 151b99b9519..a39026d843c 100644 --- a/assets/base.css +++ b/assets/base.css @@ -99,7 +99,7 @@ html.no-js .no-js-hidden { padding: 0 1.5rem; } -body:has(.section-header .drawer-menu) .announcement-bar-section .page-width { +body:has(.section-header .drawer-menu) .announcement-bar-section slideshow-component { max-width: 100%; } @@ -112,18 +112,12 @@ body:has(.section-header .drawer-menu) .announcement-bar-section .page-width { margin: 0 auto; } -.utility-bar__grid.page-width { - padding-left: 3rem; - padding-right: 3rem; -} - @media screen and (min-width: 750px) { .page-width { padding: 0 5rem; } - .header.page-width, - .utility-bar__grid.page-width { + .header.page-width { padding-left: 3.2rem; padding-right: 3.2rem; } @@ -590,14 +584,11 @@ details > * { :root { --duration-short: 100ms; --duration-default: 200ms; - --duration-announcement-bar: 250ms; - --duration-medium: 300ms; --duration-long: 500ms; --duration-extra-long: 600ms; --duration-extended: 3s; - --ease-out-slow: cubic-bezier(0, 0, 0.3, 1); - --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards; - --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow); + --animation-slide-in: slideIn var(--duration-extra-long) cubic-bezier(0, 0, 0.3, 1) forwards; + --animation-fade-in: fadeIn var(--duration-extra-long) cubic-bezier(0, 0, 0.3, 1); } .underlined-link, @@ -987,8 +978,8 @@ summary::-webkit-details-marker { margin: 0; } - .slider.slider--tablet .scroll-trigger.animate--slide-in, - .slider.slider--mobile .scroll-trigger.animate--slide-in { + .slider--tablet .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in, + .slider--mobile .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in { animation: none; opacity: 1; transform: inherit; @@ -1025,7 +1016,7 @@ summary::-webkit-details-marker { max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); } - .slider.slider--desktop .scroll-trigger.animate--slide-in { + .slider--desktop .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in { animation: none; opacity: 1; transform: inherit; @@ -1373,7 +1364,7 @@ button.shopify-payment-button__button--unbranded { } } -.button.loading > .loading__spinner { +.button.loading > .loading-overlay__spinner { top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -1383,11 +1374,11 @@ button.shopify-payment-button__button--unbranded { align-items: center; } -.button.loading > .loading__spinner .spinner { +.button.loading > .loading-overlay__spinner .spinner { width: fit-content; } -.button.loading > .loading__spinner .path { +.button.loading > .loading-overlay__spinner .path { stroke: rgb(var(--color-button-text)); } @@ -1585,9 +1576,6 @@ details[open] > .share-button__fallback { appearance: none; background-color: rgb(var(--color-background)); color: rgb(var(--color-foreground)); - font-family: var(--font-body-family); - font-style: var(--font-body-style); - font-weight: var(--font-body-weight); font-size: 1.6rem; width: 100%; box-sizing: border-box; @@ -1928,10 +1916,7 @@ input[type='checkbox'] { .quantity__input { color: currentColor; - font-family: var(--font-body-family); - font-style: var(--font-body-style); - font-weight: var(--font-body-weight); - font-size: 1.6rem; + font-size: 1.4rem; font-weight: 500; opacity: 0.85; text-align: center; @@ -2007,7 +1992,7 @@ input[type='checkbox'] { } .quantity__rules { - margin-top: 0.5rem; + margin-top: 1.2rem; position: relative; font-size: 1.2rem; } @@ -2027,8 +2012,8 @@ input[type='checkbox'] { position: relative; } -product-info .loading__spinner:not(.hidden) ~ *, -.quantity__rules-cart .loading__spinner:not(.hidden) ~ * { +product-info .loading-overlay:not(.hidden) ~ *, +.quantity__rules-cart .loading-overlay:not(.hidden) ~ * { visibility: hidden; } @@ -2131,53 +2116,6 @@ product-info .loading__spinner:not(.hidden) ~ *, border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08); } -@media screen and (min-width: 990px) { - .utility-bar--bottom-border-social-only { - border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08); - } -} - -.utility-bar__grid { - display: grid; - grid-template-columns: 1fr; - grid-template-areas: 'announcements'; -} - -.utility-bar__grid .list-social { - justify-content: flex-start; - align-content: center; - margin-left: -1.2rem; - grid-area: social-icons; -} - -@media screen and (max-width: 989px) { - .utility-bar .utility-bar__grid .list-social { - display: none; - } -} - -.utility-bar .list-social__item .icon { - scale: 0.9; -} - -@media screen and (min-width: 990px) { - .utility-bar__grid--3-col { - grid-template-columns: 3fr 4fr 3fr; - grid-template-areas: 'social-icons announcements language-currency'; - } - - .utility-bar__grid--2-col { - grid-template-columns: 1fr 1fr; - grid-template-areas: 'social-icons language-currency'; - } - - .announcement-bar.announcement-bar--one-announcement, - .announcement-bar--one-announcement .announcement-bar__link { - width: fit-content; - margin: auto; - } -} - .announcement-bar, .announcement-bar__announcement { color: rgb(var(--color-foreground)); @@ -2187,20 +2125,10 @@ product-info .loading__spinner:not(.hidden) ~ *, justify-content: center; flex-wrap: wrap; align-content: center; - grid-area: announcements; } .announcement-bar .slider--everywhere { margin-bottom: 0; - scroll-behavior: auto; -} - -.utility-bar__grid .announcement-bar-slider { - width: 100%; -} - -.utility-bar__grid .announcement-bar-slider { - width: 100%; } .announcement-bar-slider, @@ -2209,56 +2137,49 @@ product-info .loading__spinner:not(.hidden) ~ *, } .announcement-bar .slider-button--next { - margin-right: -1.5rem; + margin-right: -1.6rem; min-width: 44px; } .announcement-bar .slider-button--prev { - margin-left: -1.5rem; + margin-left: -1.6rem; min-width: 44px; } .announcement-bar .slider-button--next:focus-visible, -.announcement-bar .slider-button--prev:focus-visible, -.utility-bar .list-social__link:focus-visible { +.announcement-bar .slider-button--prev:focus-visible { outline-offset: -0.3rem; box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground)); } -.localization-wrapper { - grid-area: language-currency; - align-self: center; - display: flex; - justify-content: flex-end; -} - -.localization-wrapper .localization-selector + .disclosure__list-wrapper { - animation: animateMenuOpen var(--duration-default) ease; -} +@media screen and (min-width: 750px) { + .announcement-bar .slider-button--next { + margin-right: -3.8rem; + } -.utility-bar .localization-wrapper .disclosure .localization-form__select, -.utility-bar .localization-wrapper .disclosure__link { - font-size: calc(var(--font-heading-scale) * 1.3rem); + .announcement-bar .slider-button--prev { + margin-left: -3.8rem; + } } @media screen and (min-width: 990px) { - body:has(.section-header .header:not(.drawer-menu)) .utility-bar .page-width { - padding-left: 5rem; - padding-right: 5rem; + body:has(.section-header .header:not(.drawer-menu)) .announcement-bar-section .announcement-bar .slider-button--next { + margin-right: -1.8rem; } - .announcement-bar-slider { - width: 60%; + body:has(.section-header .header:not(.drawer-menu)) .announcement-bar-section .announcement-bar .slider-button--prev { + margin-left: -1.8rem; } - .announcement-bar .slider-button { - height: 3.8rem; + .announcement-bar-slider { + width: 60%; } } .announcement-bar__link { display: flex; width: 100%; + padding: 1rem 0; text-decoration: none; height: 100%; justify-content: center; @@ -2277,57 +2198,15 @@ product-info .loading__spinner:not(.hidden) ~ *, margin-bottom: 0.2rem; } +.announcement-bar__link .announcement-bar__message { + padding: 0; +} + .announcement-bar__message { text-align: center; padding: 1rem 0; margin: 0; letter-spacing: 0.1rem; - min-height: 3.8rem; -} - -.announcement-bar-slider--fade-in-next .announcement-bar__message, -.announcement-bar-slider--fade-in-previous .announcement-bar__message, -.announcement-bar-slider--fade-out-next .announcement-bar__message, -.announcement-bar-slider--fade-out-previous .announcement-bar__message { - animation-duration: var(--duration-announcement-bar); - animation-timing-function: ease-in-out; - animation-fill-mode: forwards; -} - -.announcement-bar-slider--fade-in-next .announcement-bar__message { - --announcement-translate-from: -1.5rem; - /* Prevent flicker */ - opacity: 0; - animation-name: translateAnnouncementSlideIn; - animation-delay: var(--duration-announcement-bar); -} - -.announcement-bar-slider--fade-in-previous .announcement-bar__message { - --announcement-translate-from: 1.5rem; - /* Prevent flicker */ - opacity: 0; - animation-name: translateAnnouncementSlideIn; - animation-delay: var(--duration-announcement-bar); -} - -.announcement-bar-slider--fade-out-next .announcement-bar__message { - --announcement-translate-to: 1.5rem; - animation-name: translateAnnouncementSlideOut; -} - -.announcement-bar-slider--fade-out-previous .announcement-bar__message { - --announcement-translate-to: -1.5rem; - animation-name: translateAnnouncementSlideOut; -} - -@keyframes translateAnnouncementSlideIn { - 0% {opacity: 0; transform: translateX(var(--announcement-translate-from))} - 100% {opacity: 1; transform: translateX(0)} -} - -@keyframes translateAnnouncementSlideOut { - 0% {opacity: 1; transform: translateX(0)} - 100% {opacity: 0; transform: translateX(var(--announcement-translate-to))} } /* section-header */ @@ -2528,7 +2407,6 @@ product-info .loading__spinner:not(.hidden) ~ *, display: flex; grid-area: icons; justify-self: end; - padding-right: 0.8rem; } .header__icons .shopify-app-block { @@ -2858,13 +2736,13 @@ details[open] > .header__menu-item .icon-caret { } .header__submenu.list-menu { - padding: 1rem 0; + padding: 2.4rem 0; } .header__submenu .header__submenu { background-color: rgba(var(--color-foreground), 0.03); - padding: 1rem 0; - margin: 1rem 0; + padding: 0.5rem 0; + margin: 0.5rem 0; } .header__submenu .header__menu-item:after { @@ -2873,11 +2751,11 @@ details[open] > .header__menu-item .icon-caret { .header__submenu .header__menu-item { justify-content: space-between; - padding: 0.8rem 2rem; + padding: 0.8rem 2.4rem; } -.header__submenu .header__menu-item:hover { - text-decoration-line: underline; +.header__submenu .header__submenu .header__menu-item { + padding-left: 3.4rem; } .header__menu-item .icon-caret { @@ -3039,8 +2917,7 @@ details-disclosure > details { .global-media-settings img, .global-media-settings iframe, .global-media-settings model-viewer, -.global-media-settings video, -.global-media-settings .placeholder-svg { +.global-media-settings video { border-radius: calc(var(--media-radius) - var(--media-border-width)); } @@ -3048,8 +2925,7 @@ details-disclosure > details { .global-media-settings--full-width, .global-media-settings--full-width img, .global-media-settings--full-width video, -.global-media-settings--full-width iframe, -.global-media-settings--full-width .placeholder-svg { +.global-media-settings--full-width iframe { border-radius: 0; border-left: none; border-right: none; @@ -3254,17 +3130,6 @@ details-disclosure > details { height: 100vh; } -/* Zoom in image on scroll */ -.animate--zoom-in { - --zoom-in-ratio: 1; -} - -.animate--zoom-in > img, -.animate--zoom-in > svg { - transition: scale var(--duration-short) linear; - scale: var(--zoom-in-ratio); -} - /* Animations */ @media (prefers-reduced-motion: no-preference) { @@ -3310,10 +3175,6 @@ details-disclosure > details { transition: none; } - .scroll-trigger.scroll-trigger--design-mode.animate--slide-in { - transform: translateY(0); - } - @keyframes slideIn { from { transform: translateY(2rem); @@ -3335,7 +3196,7 @@ details-disclosure > details { } } -/* Element Hovers: Vertical Lift, 3d Lift */ +/* Element Hovers: 3d Lift */ @media (prefers-reduced-motion: no-preference) and (hover: hover) { .animate--hover-3d-lift .card-wrapper .card--card, @@ -3455,53 +3316,4 @@ details-disclosure > details { --easter-egg: none; --sparkle: url('./sparkle.gif'); } - - .animate--hover-vertical-lift .button:not(.button--tertiary), - .animate--hover-vertical-lift .shopify-challenge__button, - .animate--hover-vertical-lift .customer button, - .animate--hover-vertical-lift .shopify-payment-button__button { - transition: transform var(--duration-default) var(--ease-out-slow); - } - - .animate--hover-vertical-lift .card-wrapper .card--card, - .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner { - transition: transform var(--duration-medium) var(--ease-out-slow); - } - - .animate--hover-vertical-lift .card-wrapper:hover .card--card, - .animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner { - transform: translateY(-0.75rem); - } - - .animate--hover-vertical-lift .card-wrapper:active .card--card, - .animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner { - transform: translateY(-0.5rem); - } - - .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):hover, - .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover, - .animate--hover-vertical-lift .customer button:not([disabled]):hover, - .animate--hover-vertical-lift .shopify-payment-button__button:hover { - transform: translateY(-0.25rem); - } - - .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):active, - .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active, - .animate--hover-vertical-lift .customer button:not([disabled]):active, - .animate--hover-vertical-lift .shopify-payment-button__button:active { - transform: translateY(0); - } - - .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)), - 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. */ - } }