From d244d0685472736d55b5915d149da4e638447e8e Mon Sep 17 00:00:00 2001 From: datagekko Date: Wed, 7 May 2025 16:58:50 +0200 Subject: [PATCH 01/25] Refactor CSS for improved readability and performance; consolidate adjacent selectors and enhance styling for custom components in the Rave Yoga theme. --- assets/base.css | 317 +++++++++++++++++++++++++++++------------------- 1 file changed, 190 insertions(+), 127 deletions(-) diff --git a/assets/base.css b/assets/base.css index c8c0d4cbde1..4f18147e989 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; } @@ -2005,7 +2003,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 +2012,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 +2197,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 +2290,7 @@ input[type='checkbox'] { opacity: 0; transform: translateX(var(--announcement-translate-from)); } + 100% { opacity: 1; transform: translateX(0); @@ -2303,6 +2302,7 @@ input[type='checkbox'] { opacity: 1; transform: translateX(0); } + 100% { opacity: 0; transform: translateX(var(--announcement-translate-to)); @@ -2335,7 +2335,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 +2424,7 @@ input[type='checkbox'] { line-height: 0; } -.header > .header__heading-link { +.header>.header__heading-link { line-height: 0; } @@ -2462,6 +2462,7 @@ input[type='checkbox'] { } @media screen and (max-width: 989px) { + .header__heading, .header__heading-link { text-align: center; @@ -2479,6 +2480,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 +2594,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 +2611,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 +2620,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 +2725,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 +2781,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 +2813,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 +2846,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 +2883,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 +2977,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 +2993,7 @@ details-disclosure > details { border-right: none; border-radius: 0; } + .content-container--full-width-mobile:after { display: none; } @@ -3013,8 +3015,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 +3097,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 +3133,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 +3157,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 +3191,7 @@ details-disclosure > details { display: inline-flex; } -.rte blockquote > * { +.rte blockquote>* { margin: -0.5rem 0 -0.5rem 0; } @@ -3239,8 +3240,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 +3251,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 +3260,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 +3270,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 +3314,7 @@ details-disclosure > details { transform: translateY(2rem); opacity: 0.01; } + to { transform: translateY(0); opacity: 1; @@ -3321,6 +3325,7 @@ details-disclosure > details { from { opacity: 0.01; } + to { opacity: 1; } @@ -3330,6 +3335,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 +3354,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 +3377,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 +3392,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 +3407,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 +3431,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 +3489,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 +3521,7 @@ details-disclosure > details { 0% { transform: rotate(0deg); } + 100% { transform: rotate(270deg); } @@ -3541,22 +3545,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 +3594,67 @@ details-disclosure > details { 0% { transform: translateX(-20%) scaleX(0); } + 40% { transform: translateX(30%) scaleX(0.7); } + 100% { transform: translateX(100%) scaleX(0); } } + +/* Rave Yoga Custom Styles - Testimonials (using Multicolumn) */ +.multicolumn.rave-testimonial-section .multicolumn-list__item { + border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1)); + padding: 2rem; + border-radius: 0.5rem; + text-align: center; +} + +.multicolumn.rave-testimonial-section .multicolumn-list__item h3 { + font-size: 1.6rem; + /* Customer name */ + font-style: italic; + margin-bottom: 1rem; +} + +.multicolumn.rave-testimonial-section .multicolumn-list__item .rte p { + font-size: 1.5rem; + /* Quote text */ + line-height: 1.6; + position: relative; + padding-left: 20px; + /* Space for quote mark */ + padding-right: 20px; +} + +.multicolumn.rave-testimonial-section .multicolumn-list__item .rte p::before { + content: '\201C'; + /* Left double quotation mark */ + font-size: 3rem; + position: absolute; + left: -5px; + top: -5px; + color: var(--color-accent-1, #7A5CFA); +} + +.multicolumn.rave-testimonial-section .multicolumn-list__item .rte p::after { + content: '\201D'; + /* Right double quotation mark */ + font-size: 3rem; + position: absolute; + right: -5px; + bottom: -15px; + color: var(--color-accent-1, #7A5CFA); +} + +/* Rave Yoga Custom Styles - CTA Button in Rich Text Section */ +.rich-text__buttons .button--primary.rave-cta-button { + /* Example: Make this button larger or give it a special style */ + padding: 1.5rem 3rem; + font-size: 1.8rem; + /* background-color: var(--color-accent-2); */ + /* If a different brand color is needed */ + /* color: white; */ +} \ No newline at end of file From 7e378dfecd3d3c29a9f2358aff845c559d9dc93c Mon Sep 17 00:00:00 2001 From: datagekko Date: Wed, 7 May 2025 17:36:34 +0200 Subject: [PATCH 02/25] Refactor CSS for improved readability and performance; consolidate adjacent selectors and enhance styling for custom components in the Rave Yoga theme. --- assets/rave-custom.css | 38 +++++++++++++++ assets/rave-custom.js | 57 +++++++++++++++++++++++ config/settings_schema.json | 50 ++++++++++++++++++++ layout/theme.liquid | 11 +++++ snippets/rave-variables.liquid | 84 ++++++++++++++++++++++++++++++++++ 5 files changed, 240 insertions(+) create mode 100644 assets/rave-custom.css create mode 100644 assets/rave-custom.js create mode 100644 snippets/rave-variables.liquid diff --git a/assets/rave-custom.css b/assets/rave-custom.css new file mode 100644 index 00000000000..d9d493ca655 --- /dev/null +++ b/assets/rave-custom.css @@ -0,0 +1,38 @@ +/* RAVE YOGA CUSTOM STYLES */ +/* Styles for Rave Yoga Shopify Theme - Sprint 1 */ + +/* Import Google Fonts if necessary and not handled by theme settings */ +/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); */ + +/* 1. Global Resets or Overrides (use sparingly) */ +/* Example: +body { + font-family: var(--font-body-family); +} +*/ + +/* 2. Rave Specific Reusable Utility Classes */ +/* Example: +.rave-container { + width: 100%; + max-width: var(--rave-container-max-width, 1200px); + margin-left: auto; + margin-right: auto; + padding-left: 1.5rem; + padding-right: 1.5rem; +} +*/ + +/* 3. Component/Section Specific Styles will be added below as developed */ + +/* == HOME PAGE == */ + +/* == COLLECTION PAGE == */ + +/* == PRODUCT PAGE == */ + +/* == HEADER == */ + +/* == FOOTER == */ + +/* == MISC / SHARED COMPONENTS == */ \ No newline at end of file diff --git a/assets/rave-custom.js b/assets/rave-custom.js new file mode 100644 index 00000000000..b421e4f2378 --- /dev/null +++ b/assets/rave-custom.js @@ -0,0 +1,57 @@ +// RAVE YOGA CUSTOM JAVASCRIPT +// Custom JS for Rave Yoga Shopify Theme - Sprint 1 + +(function() { + "use strict"; + + /** + * Debounce function to limit the rate at which a function can fire. + * @param {function} func Function to debounce. + * @param {number} wait Timeout in milliseconds. + * @returns {function} Debounced function. + */ + function debounce(func, wait) { + let timeout; + return function(...args) { + const context = this; + clearTimeout(timeout); + timeout = setTimeout(() => func.apply(context, args), wait); + }; + } + + /** + * Example: Add a class to the body when the page is scrolled. + */ + // function handleScroll() { + // if (window.scrollY > 50) { + // document.body.classList.add('scrolled'); + // } else { + // document.body.classList.remove('scrolled'); + // } + // } + // window.addEventListener('scroll', debounce(handleScroll, 100)); + + /** + * Initialize custom scripts on DOMContentLoaded + */ + // document.addEventListener('DOMContentLoaded', function() { + // // Initialize sliders, event listeners, etc. + // console.log("Rave Yoga custom JS initialized."); + // }); + + /** + * Shopify Theme Editor Support + * - Listen for section load/select events if you need to re-initialize JS for dynamic sections. + */ + // document.addEventListener('shopify:section:load', function(event) { + // const sectionId = event.detail.sectionId; + // const sectionElement = event.target; + // // Example: Re-initialize a slider in the loaded section + // // if (sectionElement.querySelector('.my-slider')) { + // // initializeSlider(sectionElement.querySelector('.my-slider')); + // // } + // }); + + // Add more custom modules and functions below + +})(); \ No newline at end of file diff --git a/config/settings_schema.json b/config/settings_schema.json index cb032f8012c..8ab9034d8d1 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -36,6 +36,16 @@ { "name": "t:settings_schema.colors.name", "settings": [ + { + "type": "header", + "content": "t:settings_schema.colors.settings.header__brand.content" + }, + { + "type": "color", + "id": "color_accent_1", + "label": "t:settings_schema.colors.settings.color_accent_1.label", + "default": "#E3D5C4" + }, { "type": "color_scheme_group", "id": "color_schemes", @@ -101,6 +111,46 @@ } ] }, + { + "name": "Rave Brand Settings", + "settings": [ + { + "type": "header", + "content": "Brand Colors" + }, + { + "type": "color", + "id": "rave_color_primary_text", + "label": "Primary Text Color", + "default": "#3D2120" + }, + { + "type": "color", + "id": "rave_color_secondary_text", + "label": "Secondary Text Color", + "default": "#555555" + }, + { + "type": "color", + "id": "rave_color_accent", + "label": "Accent Color (Buttons, etc.)", + "default": "#412F26" + }, + { + "type": "color", + "id": "rave_color_background_main", + "label": "Main Background Color", + "default": "#FFFFFF" + }, + { + "type": "color", + "id": "rave_color_button_text", + "label": "Button Text Color", + "default": "#FFFFFF", + "info": "Text color for elements using the Accent Color as background." + } + ] + }, { "name": "t:settings_schema.typography.name", "settings": [ diff --git a/layout/theme.liquid b/layout/theme.liquid index 70db635823b..63719cfccb7 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -256,6 +256,7 @@ {% endstyle %} {{ 'base.css' | asset_url | stylesheet_tag }} + {%- render 'rave-variables' -%} {%- if settings.cart_type == 'drawer' -%} @@ -266,6 +267,13 @@ {{ 'component-discounts.css' | asset_url | stylesheet_tag }} {%- endif -%} + {%- if settings.additional_checkout_buttons -%} + {{ 'component-cart-items.css' | asset_url | stylesheet_tag }} + {{ 'component-totals.css' | asset_url | stylesheet_tag }} + {%- endif -%} + + {{ 'rave-custom.css' | asset_url | stylesheet_tag }} + {%- unless settings.type_body_font.system? -%} {% comment %}theme-check-disable AssetPreload{% endcomment %} @@ -372,5 +380,8 @@ {%- if settings.cart_type == 'drawer' -%} {%- endif -%} + + + {{ 'rave-custom.js' | asset_url | script_tag }} diff --git a/snippets/rave-variables.liquid b/snippets/rave-variables.liquid new file mode 100644 index 00000000000..32486844c32 --- /dev/null +++ b/snippets/rave-variables.liquid @@ -0,0 +1,84 @@ +{%- comment -%} + RAVE YOGA: Custom CSS Variables + This file defines custom CSS properties for the Rave Yoga brand and maps them + to Dawn's global CSS variables where appropriate. + It uses color settings defined in Theme Settings -> Rave Brand Settings. +{%- endcomment -%} + +{%- liquid + assign rave_color_primary_text = settings.rave_color_primary_text | default: '#3D2120' + assign rave_color_secondary_text = settings.rave_color_secondary_text | default: '#555555' + assign rave_color_accent = settings.rave_color_accent | default: '#412F26' + assign rave_color_background_main = settings.rave_color_background_main | default: '#FFFFFF' + assign rave_color_button_text = settings.rave_color_button_text | default: '#FFFFFF' + + assign rave_font_stack_primary = settings.font_heading.family | append: ', ' | append: settings.font_heading.fallback_families + assign rave_font_stack_secondary = settings.font_body.family | append: ', ' | append: settings.font_body.fallback_families +-%} + + \ No newline at end of file From 21edc4a460109b36335aba7745bb1a5847f52123 Mon Sep 17 00:00:00 2001 From: "shopify[bot]" <79544226+shopify[bot]@users.noreply.github.com> Date: Wed, 7 May 2025 15:39:33 +0000 Subject: [PATCH 03/25] Update from Shopify for theme rave/main Committed from shop: RAVE --- config/settings_data.json | 196 ++++++++++++++++++++++++++++++++++++- sections/header-group.json | 30 ++++-- templates/collection.json | 17 +++- 3 files changed, 234 insertions(+), 9 deletions(-) diff --git a/config/settings_data.json b/config/settings_data.json index 0f7a06db992..06f9ad5fbde 100644 --- a/config/settings_data.json +++ b/config/settings_data.json @@ -1,5 +1,199 @@ +/* + * ------------------------------------------------------------ + * IMPORTANT: The contents of this file are auto-generated. + * + * This file may be updated by the Shopify admin theme editor + * or related systems. Please exercise caution as any changes + * made to this file may be overwritten. + * ------------------------------------------------------------ + */ { - "current": "Default", + "current": { + "logo": "shopify://shop_images/LOGO_BRUN.png", + "logo_width": 90, + "type_header_font": "assistant_n4", + "heading_scale": 100, + "type_body_font": "assistant_n4", + "body_scale": 100, + "page_width": 1200, + "spacing_sections": 0, + "spacing_grid_horizontal": 8, + "spacing_grid_vertical": 8, + "buttons_border_thickness": 1, + "buttons_border_opacity": 100, + "buttons_radius": 0, + "buttons_shadow_opacity": 0, + "buttons_shadow_horizontal_offset": 0, + "buttons_shadow_vertical_offset": 4, + "buttons_shadow_blur": 5, + "variant_pills_border_thickness": 1, + "variant_pills_border_opacity": 55, + "variant_pills_radius": 40, + "variant_pills_shadow_opacity": 0, + "variant_pills_shadow_horizontal_offset": 0, + "variant_pills_shadow_vertical_offset": 4, + "variant_pills_shadow_blur": 5, + "inputs_border_thickness": 1, + "inputs_border_opacity": 55, + "inputs_radius": 0, + "inputs_shadow_opacity": 0, + "inputs_shadow_horizontal_offset": 0, + "inputs_shadow_vertical_offset": 4, + "inputs_shadow_blur": 5, + "card_style": "standard", + "card_image_padding": 0, + "card_text_alignment": "left", + "card_color_scheme": "scheme-2", + "card_border_thickness": 0, + "card_border_opacity": 10, + "card_corner_radius": 0, + "card_shadow_opacity": 0, + "card_shadow_horizontal_offset": 0, + "card_shadow_vertical_offset": 4, + "card_shadow_blur": 5, + "collection_card_style": "standard", + "collection_card_image_padding": 0, + "collection_card_text_alignment": "left", + "collection_card_color_scheme": "scheme-2", + "collection_card_border_thickness": 0, + "collection_card_border_opacity": 10, + "collection_card_corner_radius": 0, + "collection_card_shadow_opacity": 0, + "collection_card_shadow_horizontal_offset": 0, + "collection_card_shadow_vertical_offset": 4, + "collection_card_shadow_blur": 5, + "blog_card_style": "standard", + "blog_card_image_padding": 0, + "blog_card_text_alignment": "left", + "blog_card_color_scheme": "scheme-2", + "blog_card_border_thickness": 0, + "blog_card_border_opacity": 10, + "blog_card_corner_radius": 0, + "blog_card_shadow_opacity": 0, + "blog_card_shadow_horizontal_offset": 0, + "blog_card_shadow_vertical_offset": 4, + "blog_card_shadow_blur": 5, + "text_boxes_border_thickness": 0, + "text_boxes_border_opacity": 10, + "text_boxes_radius": 0, + "text_boxes_shadow_opacity": 0, + "text_boxes_shadow_horizontal_offset": 0, + "text_boxes_shadow_vertical_offset": 4, + "text_boxes_shadow_blur": 5, + "media_border_thickness": 1, + "media_border_opacity": 5, + "media_radius": 0, + "media_shadow_opacity": 0, + "media_shadow_horizontal_offset": 0, + "media_shadow_vertical_offset": 4, + "media_shadow_blur": 5, + "popup_border_thickness": 1, + "popup_border_opacity": 10, + "popup_corner_radius": 0, + "popup_shadow_opacity": 5, + "popup_shadow_horizontal_offset": 0, + "popup_shadow_vertical_offset": 4, + "popup_shadow_blur": 5, + "drawer_border_thickness": 1, + "drawer_border_opacity": 10, + "drawer_shadow_opacity": 0, + "drawer_shadow_horizontal_offset": 0, + "drawer_shadow_vertical_offset": 4, + "drawer_shadow_blur": 5, + "badge_position": "bottom left", + "badge_corner_radius": 40, + "sale_badge_color_scheme": "scheme-5", + "sold_out_badge_color_scheme": "scheme-3", + "social_facebook_link": "", + "social_instagram_link": "", + "social_youtube_link": "", + "social_tiktok_link": "", + "social_twitter_link": "", + "social_snapchat_link": "", + "social_pinterest_link": "", + "social_tumblr_link": "", + "social_vimeo_link": "", + "predictive_search_enabled": true, + "predictive_search_show_vendor": false, + "predictive_search_show_price": false, + "currency_code_enabled": true, + "cart_type": "notification", + "show_vendor": false, + "show_cart_note": false, + "cart_drawer_collection": "", + "sections": { + "main-password-header": { + "type": "main-password-header", + "settings": { + "color_scheme": "scheme-1" + } + }, + "main-password-footer": { + "type": "main-password-footer", + "settings": { + "color_scheme": "scheme-1" + } + } + }, + "content_for_index": [], + "color_schemes": { + "scheme-1": { + "settings": { + "background": "#ffffff", + "background_gradient": "", + "text": "#121212", + "button": "#121212", + "button_label": "#ffffff", + "secondary_button_label": "#121212", + "shadow": "#121212" + } + }, + "scheme-2": { + "settings": { + "background": "#f3f3f3", + "background_gradient": "", + "text": "#121212", + "button": "#121212", + "button_label": "#f3f3f3", + "secondary_button_label": "#121212", + "shadow": "#121212" + } + }, + "scheme-3": { + "settings": { + "background": "#242833", + "background_gradient": "", + "text": "#ffffff", + "button": "#ffffff", + "button_label": "#000000", + "secondary_button_label": "#ffffff", + "shadow": "#121212" + } + }, + "scheme-4": { + "settings": { + "background": "#121212", + "background_gradient": "", + "text": "#ffffff", + "button": "#ffffff", + "button_label": "#121212", + "secondary_button_label": "#ffffff", + "shadow": "#121212" + } + }, + "scheme-5": { + "settings": { + "background": "#334fb4", + "background_gradient": "", + "text": "#ffffff", + "button": "#ffffff", + "button_label": "#334fb4", + "secondary_button_label": "#ffffff", + "shadow": "#121212" + } + } + } + }, "presets": { "Default": { "logo_width": 90, diff --git a/sections/header-group.json b/sections/header-group.json index a9ac3a08a0d..409ae8b3844 100644 --- a/sections/header-group.json +++ b/sections/header-group.json @@ -1,3 +1,12 @@ +/* + * ------------------------------------------------------------ + * IMPORTANT: The contents of this file are auto-generated. + * + * This file may be updated by the Shopify admin theme editor + * or related systems. Please exercise caution as any changes + * made to this file may be overwritten. + * ------------------------------------------------------------ + */ { "name": "t:sections.header.name", "type": "header", @@ -9,28 +18,37 @@ "type": "announcement", "settings": { "text": "Welcome to our store", - "text_alignment": "center", - "color_scheme": "scheme-1", "link": "" } } }, "block_order": [ "announcement-bar-0" - ] + ], + "settings": { + "auto_rotate": false, + "change_slides_speed": 5, + "color_scheme": "", + "show_line_separator": true, + "show_social": false, + "enable_country_selector": false, + "enable_language_selector": false + } }, "header": { "type": "header", "settings": { - "color_scheme": "scheme-1", - "logo_position": "middle-left", + "logo_position": "middle-center", + "mobile_logo_position": "center", "menu": "main-menu", "menu_type_desktop": "dropdown", "sticky_header_type": "on-scroll-up", "show_line_separator": true, + "color_scheme": "scheme-1", + "menu_color_scheme": "", "enable_country_selector": true, "enable_language_selector": true, - "mobile_logo_position": "center", + "enable_customer_avatar": true, "margin_bottom": 0, "padding_top": 20, "padding_bottom": 20 diff --git a/templates/collection.json b/templates/collection.json index d12dfab5447..39467de6fe3 100644 --- a/templates/collection.json +++ b/templates/collection.json @@ -1,3 +1,12 @@ +/* + * ------------------------------------------------------------ + * IMPORTANT: The contents of this file are auto-generated. + * + * This file may be updated by the Shopify admin theme editor + * or related systems. Please exercise caution as any changes + * made to this file may be overwritten. + * ------------------------------------------------------------ + */ { "sections": { "banner": { @@ -12,14 +21,18 @@ "type": "main-collection-product-grid", "settings": { "products_per_page": 16, - "columns_desktop": 4, + "columns_desktop": 3, + "columns_mobile": "2", + "color_scheme": "", "image_ratio": "adapt", + "image_shape": "default", "show_secondary_image": false, "show_vendor": false, "show_rating": false, + "quick_add": "none", "enable_filtering": true, + "filter_type": "horizontal", "enable_sorting": true, - "columns_mobile": "2", "padding_top": 36, "padding_bottom": 36 } From 32e69e34099887af8b5778a56a35bd95c9e75e00 Mon Sep 17 00:00:00 2001 From: datagekko Date: Wed, 7 May 2025 17:41:10 +0200 Subject: [PATCH 04/25] gadg --- CUSTOMIZATIONS.md | 76 +++++++++++++++++++++++++++++++ locales/rave-yoga.en.default.json | 27 +++++++++++ 2 files changed, 103 insertions(+) create mode 100644 CUSTOMIZATIONS.md create mode 100644 locales/rave-yoga.en.default.json diff --git a/CUSTOMIZATIONS.md b/CUSTOMIZATIONS.md new file mode 100644 index 00000000000..b8646c499ab --- /dev/null +++ b/CUSTOMIZATIONS.md @@ -0,0 +1,76 @@ +# RAVE YOGA - Shopify Dawn Theme Customizations + +**Theme Version:** Dawn 15.3.0 +**Project:** Migrate rave-yoga.com to Shopify using Dawn theme. +**Date Started:** $(date +%Y-%m-%d) + +## Overview + +This document tracks all customizations made to the base Dawn theme for the Rave Yoga Shopify store. The goal is to replicate the design and functionality of the existing `rave-yoga.com` website while adhering to Shopify best practices, maintaining theme upgradeability where possible, and ensuring a performant storefront. + +## General Customization Strategy + +- **CSS Variables:** Custom CSS variables are defined in `snippets/rave-variables.liquid` and are prefixed with `--rave-`. These variables leverage theme settings for brand colors defined in `config/settings_schema.json` under "Rave Brand Settings". +- **Custom CSS:** All custom CSS rules are placed in `assets/rave-custom.css` and BEM-style classes are prefixed with `rave-` (e.g., `rave-hero__title`). +- **Custom JavaScript:** Custom JavaScript is contained within `assets/rave-custom.js`, using an IIFE to avoid global scope pollution. Event listeners and Shopify section events are used where appropriate. +- **Liquid Modifications:** Changes to existing Dawn Liquid files are clearly marked with `` and `` comments. New sections and snippets are created with a `rave-` prefix or a clear custom naming convention. +- **Localization:** All new user-facing strings are added to `locales/rave-yoga.en.default.json` and referenced in Liquid using the `t:` filter (e.g., `{{ 'sections.custom_hero.title' | t }}`). +- **Asset Organization:** Custom images and assets are named with a `rave-` prefix and stored in the `assets` directory (e.g., `assets/rave-logo.png`). + +## Modified Core Dawn Files + +*(This section will be populated as files are modified)* + +- **`config/settings_schema.json`**: Added "Rave Brand Settings" for theme editor color controls. +- **`layout/theme.liquid`**: + - Included `snippets/rave-variables.liquid`. + - Enqueued `assets/rave-custom.css`. + - Included `assets/rave-custom.js`. + +## New Custom Files Added + +*(This section will be populated as files are created)* + +- **`snippets/rave-variables.liquid`**: Contains custom CSS variable definitions and mappings to Dawn's core variables. +- **`assets/rave-custom.css`**: Houses all custom CSS for the Rave Yoga theme. +- **`assets/rave-custom.js`**: Contains all custom JavaScript functionalities. +- **`locales/rave-yoga.en.default.json`**: Stores all custom translation strings for the theme. +- **`CUSTOMIZATIONS.md`**: This file. + +## Section-Specific Customizations + +*(Details for each customized or new section will be added here as they are developed, e.g., Home Page Hero, Product Page Accordions etc.)* + +### Home Page + +- **Hero Banner:** (Details to be added) + +### Collection Page + +- (Details to be added) + +### Product Page + +- (Details to be added) + +## Known Update Risks & Considerations + +*(This section will highlight any customizations that might conflict with future Dawn theme updates or require manual review after updates.)* + +- Overrides to core Dawn CSS variables in `rave-variables.liquid` should be checked against new Dawn versions. +- Modifications to `theme.liquid` for including custom assets are generally safe but should be verified. + +## Performance Monitoring Notes + +*(Notes on performance impact and optimizations for custom sections/features will be added here.)* + +- LCP, CLS, FID to be monitored for each new major component. + +## QA Checklist Reminders + +- Pixel diff ≤2 px on 1440w viewport (target). +- 90+ mobile Lighthouse score, <2s LCP (target). +- Test on defined breakpoints: mobile, 750px (tablet), 990px (desktop). +- Verify all custom text uses translation keys. +- Check for console errors in JS. +- Validate HTML structure. \ No newline at end of file diff --git a/locales/rave-yoga.en.default.json b/locales/rave-yoga.en.default.json new file mode 100644 index 00000000000..a72d8881d61 --- /dev/null +++ b/locales/rave-yoga.en.default.json @@ -0,0 +1,27 @@ +{ + "name": "Rave Yoga Custom Translations", + "current_locale": "en", + "entries": { + "general": { + "custom": { + "example_string": "This is a custom string for Rave Yoga." + }, + "rave_brand": { + "headline": "Our Brand", + "description": "Learn more about Rave Yoga." + } + }, + "sections": { + "custom_hero": { + "title": "Welcome to Rave Yoga", + "subtitle": "Find your inner peace.", + "button_label": "Explore Classes" + } + }, + "products": { + "product": { + "custom_tab_title": "Rave Details" + } + } + } +} \ No newline at end of file From 3e04dddb3ac2cb245789e912a4b265160d0897c3 Mon Sep 17 00:00:00 2001 From: "shopify[bot]" <79544226+shopify[bot]@users.noreply.github.com> Date: Wed, 7 May 2025 15:42:25 +0000 Subject: [PATCH 05/25] Update from Shopify for theme rave/main Committed from shop: RAVE --- config/settings_data.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/config/settings_data.json b/config/settings_data.json index 06f9ad5fbde..563041af346 100644 --- a/config/settings_data.json +++ b/config/settings_data.json @@ -11,9 +11,9 @@ "current": { "logo": "shopify://shop_images/LOGO_BRUN.png", "logo_width": 90, - "type_header_font": "assistant_n4", + "type_header_font": "inter_n4", "heading_scale": 100, - "type_body_font": "assistant_n4", + "type_body_font": "inter_n4", "body_scale": 100, "page_width": 1200, "spacing_sections": 0, From f9b8273a6a1864772e53f780cca97461ed20d069 Mon Sep 17 00:00:00 2001 From: datagekko Date: Thu, 8 May 2025 21:31:51 +0200 Subject: [PATCH 06/25] feat: Implement desktop header, initial mobile styling, and add workflow rule --- .cursor/rules/common-debugging-steps.mdc | 47 +++ .cursor/rules/custom-files-reference.mdc | 43 +++ .cursor/rules/header-logic.mdc | 47 +++ .cursor/rules/project-overview.mdc | 28 ++ .cursor/rules/styling-conventions.mdc | 46 +++ .cursor/rules/super-prompt-3-workflow.mdc | 81 +++++ .cursor/rules/workflow-content.mdc | 48 +++ .cursor/rules/workflow-feature.mdc | 62 ++++ .cursor/rules/workflow-quickfix.mdc | 66 +++++ README.md | 186 ++++++------ assets/rave-custom.css | 311 ++++++++++++++++++++ locales/en.default.json | 19 +- locales/rave-yoga.en.default.json | 27 -- sections/header.liquid | 343 +++++++++++++--------- 14 files changed, 1093 insertions(+), 261 deletions(-) create mode 100644 .cursor/rules/common-debugging-steps.mdc create mode 100644 .cursor/rules/custom-files-reference.mdc create mode 100644 .cursor/rules/header-logic.mdc create mode 100644 .cursor/rules/project-overview.mdc create mode 100644 .cursor/rules/styling-conventions.mdc create mode 100644 .cursor/rules/super-prompt-3-workflow.mdc create mode 100644 .cursor/rules/workflow-content.mdc create mode 100644 .cursor/rules/workflow-feature.mdc create mode 100644 .cursor/rules/workflow-quickfix.mdc delete mode 100644 locales/rave-yoga.en.default.json diff --git a/.cursor/rules/common-debugging-steps.mdc b/.cursor/rules/common-debugging-steps.mdc new file mode 100644 index 00000000000..3e5e220112c --- /dev/null +++ b/.cursor/rules/common-debugging-steps.mdc @@ -0,0 +1,47 @@ +--- +description: Common Debugging Steps for Shopify Theme Customization +globs: +alwaysApply: false +--- +# Common Debugging Steps for Shopify Theme Customization + +This guide outlines common issues and recommended debugging steps when working on Shopify theme customizations, particularly with CSS and Liquid. + +1. **Verify Theme Customizer Settings:** + * Many visual aspects (e.g., logo position, color schemes, feature toggles) are controlled by settings in the Shopify Admin (Online Store -> Themes -> Customize -> Section/Theme Settings). + * Always double-check that the relevant settings are configured as expected, as these often drive Liquid logic that adds CSS classes or changes behavior. + * **Example:** Header mobile logo position relies on "Mobile logo position" being set to "Left" in Header settings. + +2. **Clear Browser Cache / Hard Refresh:** + * Browsers aggressively cache CSS and JavaScript. After making changes to these assets, always perform a hard refresh to ensure you're seeing the latest version. + * **Shortcuts:** Cmd+Shift+R (Mac), Ctrl+Shift+R (Windows/Linux). + +3. **Use Browser Developer Tools (Inspector):** + * **Element Inspection:** Right-click on the problematic element and choose "Inspect" or "Inspect Element". + * **Styles Panel:** This is crucial for CSS debugging. + * See all CSS rules applying to the selected element. + * Identify which rules are active and which are overridden (struck-through). + * Check the specificity of selectors. Highly specific selectors from base theme CSS (like Dawn's `base.css`) might override your custom styles. + * Verify your custom CSS file (`[assets/rave-custom.css](mdc:assets/rave-custom.css)`) is loaded and its rules are present. + * **Computed Panel:** Shows the final, calculated value for each CSS property on the element, after all stylesheets and inline styles have been considered. + * **Classes:** Verify that the expected CSS classes (e.g., `header--mobile-left`) are present on the HTML elements. These are often added by Liquid logic based on theme settings. + * **Console:** Check for JavaScript errors, which might break functionality or prevent CSS classes from being applied correctly. + +4. **CSS Specificity and `!important`:** + * If your custom styles aren't applying, it's often due to more specific selectors in the base theme's CSS. + * You can increase the specificity of your selectors or, as a last resort for targeted overrides, use `!important`. Use `!important` judiciously as it can make future CSS maintenance harder. + +5. **Media Query Scoping:** + * Ensure styles intended for specific viewports (mobile, tablet, desktop) are correctly wrapped in appropriate media queries (e.g., `@media screen and (max-width: 749px)` for mobile, `@media screen and (min-width: 990px)` for desktop). + * A common issue encountered was desktop-specific grid styles for the header unintentionally affecting mobile layout until they were properly scoped with a `min-width` media query. + +6. **Homepage-Specific Issues:** + * Shopify themes can have CSS rules or Liquid logic that applies only to the homepage (e.g., via `body.template-index` class or specific homepage section IDs). + * If an issue occurs only on the homepage, inspect elements there to find homepage-specific styles that might be overriding more general rules. + +7. **Liquid Asset Inclusion Order:** + * Ensure that shared resources like CSS variable definitions (`[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)`) are included in `[layout/theme.liquid](mdc:layout/theme.liquid)` *before* the main custom stylesheet (`[assets/rave-custom.css](mdc:assets/rave-custom.css)`) that depends on them. + +8. **Shopify CLI and Development Server:** + * Use `shopify theme dev --store YOUR_STORE.myshopify.com` for local development. + * Ensure the dev server is running and syncing changes. Sometimes, a restart of the dev server might be needed if changes don't appear to be syncing. diff --git a/.cursor/rules/custom-files-reference.mdc b/.cursor/rules/custom-files-reference.mdc new file mode 100644 index 00000000000..6ae2edce2f8 --- /dev/null +++ b/.cursor/rules/custom-files-reference.mdc @@ -0,0 +1,43 @@ +--- +description: This document outlines the key custom files created or significantly modified for the Rave Yoga Shopify theme migration. +globs: +alwaysApply: false +--- +# Custom Files Reference + +This document outlines the key custom files created or significantly modified for the Rave Yoga Shopify theme migration. + +* **`[assets/rave-custom.css](mdc:assets/rave-custom.css)`** + * **Purpose:** Contains all primary custom CSS overrides and new styles for the theme. + * **Structure:** Organized with comments for global resets (use sparingly), Rave-specific utility classes, and section-specific styles (e.g., `/* == HEADER == */`, `/* == FOOTER == */`). + * **Important:** This file is enqueued in `[layout/theme.liquid](mdc:layout/theme.liquid)`. + +* **`[assets/rave-custom.js](mdc:assets/rave-custom.js)`** + * **Purpose:** Houses custom JavaScript functionalities. + * **Structure:** Currently uses an Immediately Invoked Function Expression (IIFE) to avoid polluting the global scope. + * **Important:** This file is enqueued in `[layout/theme.liquid](mdc:layout/theme.liquid)`. + +* **`[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)`** + * **Purpose:** Defines custom CSS variables for Rave Yoga brand (colors, fonts). It also maps these custom variables to Dawn's global CSS variables where appropriate. + * **Source of Values:** Uses color settings defined in Theme Settings -> "Rave Brand Settings" (from `[config/settings_schema.json](mdc:config/settings_schema.json)`). + * **Important:** Included in `[layout/theme.liquid](mdc:layout/theme.liquid)` *before* `rave-custom.css` is loaded to ensure variables are available. + +* **`[config/settings_schema.json](mdc:config/settings_schema.json)`** + * **Purpose:** Modified to add a new "Rave Brand Settings" section in the Shopify Theme Customizer. + * **Functionality:** Allows easy selection of brand colors (primary text, secondary text, accent, main background) via color pickers. These settings are then used by `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)`. + +* **`[locales/en.default.json](mdc:locales/en.default.json)`** + * **Purpose:** The default English localization file for the theme. Used for any custom text strings required by the theme that are not part of standard Shopify/Dawn translations. + +* **`[layout/theme.liquid](mdc:layout/theme.liquid)`** + * **Purpose:** The main theme layout file. Modified to correctly include/enqueue custom assets: + 1. `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)` (as a snippet render). + 2. `[assets/rave-custom.css](mdc:assets/rave-custom.css)` (as a stylesheet link). + 3. `[assets/rave-custom.js](mdc:assets/rave-custom.js)` (as a script tag, typically deferred). + +* **`[sections/header.liquid](mdc:sections/header.liquid)`** + * **Purpose:** The Liquid file for the header section. Has been significantly modified from the default Dawn header. + * **Key Customizations:** Contains Liquid logic to split the main navigation menu for desktop view (when logo is centered) and to hide default header icons. Also structured to support distinct mobile layout requirements. + +* **`[CUSTOMIZATIONS.md](mdc:CUSTOMIZATIONS.md)`** + * **Purpose:** A manually maintained Markdown file intended to log significant customizations, decisions, and troubleshooting steps made during the project. This helps with future maintenance and understanding the evolution of the theme. diff --git a/.cursor/rules/header-logic.mdc b/.cursor/rules/header-logic.mdc new file mode 100644 index 00000000000..4ebe48f0152 --- /dev/null +++ b/.cursor/rules/header-logic.mdc @@ -0,0 +1,47 @@ +--- +description: Header Customization Logic +globs: +alwaysApply: false +--- +# Header Customization Logic + +The header in this theme (`[sections/header.liquid](mdc:sections/header.liquid)`) has significant customizations to achieve specific desktop and mobile layouts. + +## Desktop Header (min-width: 990px) + +* **Layout Goal:** Split navigation (Left Navigation - Centered Logo - Right Navigation). +* **Theme Setting Trigger:** This layout is active when "Logo position" is set to "Middle center" in the Theme Customizer (Header section settings). +* **Implementation Details:** + * **Liquid (`[sections/header.liquid](mdc:sections/header.liquid)`)**: When the above condition is met and the menu type is not "drawer", the Liquid code calculates the midpoint of the main menu (`linklists[section.settings.menu]`). It then renders the first half of the links in a `