From 5ed18bda75ef834fa6285a3f64fba0c000370949 Mon Sep 17 00:00:00 2001 From: Ermin Zoronjic Date: Thu, 7 May 2026 03:06:40 +0200 Subject: [PATCH] add global spacing tokens --- .../src/components/ProductDetailPage.css | 32 +++++++-------- parfum-shop/src/pages/AboutPage.css | 4 +- parfum-shop/src/pages/DiscoverySetPage.css | 40 +++++++++---------- parfum-shop/src/pages/LandingPage.css | 2 +- parfum-shop/src/pages/SupportPage.css | 2 +- 5 files changed, 38 insertions(+), 42 deletions(-) diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css index 3f8b3f3..c99b485 100644 --- a/parfum-shop/src/components/ProductDetailPage.css +++ b/parfum-shop/src/components/ProductDetailPage.css @@ -166,7 +166,7 @@ .character-facts > div, .meta-card, .delivery-grid div { - padding-top: 1rem; + padding-top: var(--gap-sm); border-top: 1px solid var(--theme-border); } @@ -177,7 +177,7 @@ .comment-card span, .review-detail-row span { display: block; - margin-bottom: 0.55rem; + margin-bottom: var(--gap-2xs); color: var(--theme-text-muted); font-size: var(--text-xs); letter-spacing: 0.2em; @@ -206,7 +206,7 @@ overflow: visible; display: flex; flex-direction: column; - gap: clamp(1rem, 1.8vw, 1.45rem); + gap: var(--gap-sm); padding: 0; border: 0; background: transparent; @@ -344,7 +344,7 @@ .purchase-discovery-note strong { display: block; - margin-bottom: 0.25rem; + margin-bottom: var(--gap-2xs); color: var(--theme-text); font-weight: 500; } @@ -358,7 +358,7 @@ } .purchase-discovery-note .discount-preview { - margin-top: 0.5rem; + margin-top: var(--gap-2xs); color: #fff; } @@ -391,7 +391,7 @@ .reviews-heading h2, .recommendation-heading h2, .detail-bottom-cta h2 { - margin: 0.85rem 0 0; + margin: var(--gap-xs) 0 0; color: var(--theme-text); font-size: clamp(2.2rem, 5.6vw, 6rem); font-weight: 300; @@ -405,7 +405,7 @@ .reviews-heading p, .detail-bottom-cta p { max-width: var(--text-measure); - margin: 1.25rem 0 0; + margin: var(--gap-sm) 0 0; color: var(--theme-text-muted); font-size: var(--text-lg); line-height: 1.62; @@ -553,7 +553,7 @@ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-sm); - margin-top: clamp(1.6rem, 4vw, 4rem); + margin-top: var(--gap-lg); } .structure-phase-card, @@ -720,7 +720,7 @@ } .comment-spotlight { - margin-top: clamp(1.6rem, 4vw, 4rem); + margin-top: var(--gap-lg); } .comment-dots { @@ -829,7 +829,7 @@ grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap-lg); align-items: end; - margin-top: clamp(1rem, 3vw, 2rem); + margin-top: var(--gap-lg); padding: clamp(1.5rem, 4vw, 3.5rem); overflow: hidden; background: @@ -860,7 +860,7 @@ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-sm); - margin-top: clamp(1.6rem, 4vw, 4rem); + margin-top: var(--gap-lg); } .recommendation-card { @@ -913,7 +913,7 @@ } .recommendation-card p { - margin: 0.55rem 0 0; + margin: var(--gap-2xs) 0 0; color: var(--theme-text-muted); font-size: var(--text-sm); line-height: 1.45; @@ -1104,16 +1104,16 @@ } .hero-fact-grid { - gap: 0.45rem; + gap: var(--gap-2xs); } .hero-fact-grid div { min-width: 0; - padding-top: 0.45rem; + padding-top: var(--gap-2xs); } .hero-fact-grid span { - margin-bottom: 0.25rem; + margin-bottom: var(--gap-2xs); font-size: clamp(0.65rem, 2vw, var(--text-xs)); letter-spacing: 0.09em; } @@ -1126,7 +1126,7 @@ .product-purchase-panel { min-width: 0; - gap: 0.48rem; + gap: var(--gap-2xs); } .purchase-price-row { diff --git a/parfum-shop/src/pages/AboutPage.css b/parfum-shop/src/pages/AboutPage.css index 49d8135..3b7cb00 100644 --- a/parfum-shop/src/pages/AboutPage.css +++ b/parfum-shop/src/pages/AboutPage.css @@ -76,7 +76,7 @@ .about-section-head { display: grid; gap: var(--gap-2xs); - margin-bottom: clamp(1.6rem, 4vw, 3rem); + margin-bottom: var(--gap-lg); } .about-section-head h2 { @@ -107,7 +107,7 @@ flex-direction: column; gap: var(--gap-xs); min-height: 14rem; - padding: clamp(1.1rem, 2.4vw, 1.8rem); + padding: clamp(1.1rem, 2.4vw, 1.6rem); border: 1px solid var(--theme-border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)), diff --git a/parfum-shop/src/pages/DiscoverySetPage.css b/parfum-shop/src/pages/DiscoverySetPage.css index c3adc6f..8709c9c 100644 --- a/parfum-shop/src/pages/DiscoverySetPage.css +++ b/parfum-shop/src/pages/DiscoverySetPage.css @@ -100,7 +100,7 @@ .discovery-panel-facts div, .discovery-benefit { - padding-top: 1rem; + padding-top: var(--gap-sm); border-top: 1px solid var(--theme-border); } @@ -121,7 +121,7 @@ align-self: center; display: flex; flex-direction: column; - gap: clamp(1rem, 1.8vw, 1.45rem); + gap: var(--gap-sm); width: min(100%, 390px); min-width: 0; padding: 0; @@ -150,7 +150,7 @@ } .discovery-panel-facts span { - margin-bottom: 0.55rem; + margin-bottom: var(--gap-2xs); } .discovery-product-tags span { @@ -235,7 +235,7 @@ .discovery-section-heading h2, .discovery-section-intro h2, .discovery-final-cta h2 { - margin: 0.85rem 0 0; + margin: var(--gap-xs) 0 0; color: var(--theme-text); font-size: clamp(2.2rem, 5.6vw, 6rem); font-weight: 300; @@ -249,7 +249,7 @@ .discovery-section-heading p, .discovery-final-cta p { max-width: var(--text-measure); - margin: 1.25rem 0 0; + margin: var(--gap-sm) 0 0; color: var(--theme-text-muted); font-size: var(--text-lg); line-height: 1.62; @@ -259,7 +259,7 @@ display: grid; grid-template-columns: 1fr; align-content: end; - gap: clamp(0.9rem, 1.8vw, 1.25rem); + gap: var(--gap-sm); min-height: clamp(360px, 42vw, 620px); padding: clamp(1.2rem, 3vw, 2.4rem); border: 1px solid var(--theme-border); @@ -273,7 +273,7 @@ justify-content: space-between; align-items: end; gap: var(--gap-sm); - padding-bottom: clamp(1rem, 2vw, 1.35rem); + padding-bottom: var(--gap-sm); border-bottom: 1px solid var(--theme-border); } @@ -298,12 +298,12 @@ grid-template-columns: minmax(0, 1fr); gap: var(--gap-sm); align-items: start; - padding-top: 1rem; + padding-top: var(--gap-sm); } .discovery-benefit strong { display: block; - margin-bottom: 0.35rem; + margin-bottom: var(--gap-2xs); color: var(--theme-text); font-size: var(--text-base); font-weight: 400; @@ -324,7 +324,7 @@ .discovery-section-heading { display: block; - margin-bottom: clamp(1.8rem, 4vw, 3.8rem); + margin-bottom: var(--gap-lg); } .discovery-section-heading h2 { @@ -341,7 +341,7 @@ /* Layout columns are provided by the global Grid12 system (see Grid.jsx). */ .discovery-steps-grid { - margin-top: clamp(1.6rem, 4vw, 4rem); + margin-top: var(--gap-lg); } .discovery-step-card { @@ -569,7 +569,7 @@ grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap-lg); align-items: end; - margin-top: clamp(1rem, 3vw, 2rem); + margin-top: var(--gap-lg); padding: clamp(1.5rem, 4vw, 3.5rem); overflow: hidden; background: @@ -763,7 +763,7 @@ } .discovery-included .discovery-section-heading { - margin-bottom: clamp(1.6rem, 8vw, 2.6rem); + margin-bottom: var(--gap-lg); } .discovery-section-heading h2.discovery-included-title { @@ -801,7 +801,7 @@ } .discovery-scroll-item .discovery-product-index { - margin-bottom: 0.1rem; + margin-bottom: 0; } .discovery-scroll-copy h3 { @@ -816,9 +816,9 @@ .discovery-scroll-mobile-detail { display: grid; - gap: 0.45rem; + gap: var(--gap-2xs); max-width: var(--text-measure); - margin-top: 0.15rem; + margin-top: var(--gap-2xs); } .discovery-scroll-mobile-detail p { @@ -829,7 +829,7 @@ .discovery-scroll-mobile-tags { display: flex; gap: var(--gap-2xs); - margin-top: 0.45rem; + margin-top: var(--gap-2xs); } .discovery-story-visual-panel { @@ -871,11 +871,7 @@ .discovery-price-row { align-items: flex-start; flex-direction: column; - gap: 0.25rem; - } - - .discovery-included .discovery-section-heading { - margin-bottom: clamp(1.4rem, 7vw, 2rem); + gap: var(--gap-2xs); } .discovery-section-heading h2.discovery-included-title { diff --git a/parfum-shop/src/pages/LandingPage.css b/parfum-shop/src/pages/LandingPage.css index 8047556..770054f 100644 --- a/parfum-shop/src/pages/LandingPage.css +++ b/parfum-shop/src/pages/LandingPage.css @@ -230,7 +230,7 @@ body.theme-light .hero-wordmark__image { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-md); align-items: end; - margin-bottom: clamp(1.6rem, 4vw, 4.8rem); + margin-bottom: var(--gap-lg); } .section-heading::after { diff --git a/parfum-shop/src/pages/SupportPage.css b/parfum-shop/src/pages/SupportPage.css index 6395a07..1961885 100644 --- a/parfum-shop/src/pages/SupportPage.css +++ b/parfum-shop/src/pages/SupportPage.css @@ -156,7 +156,7 @@ .support-section-head { display: grid; gap: var(--gap-2xs); - margin-bottom: clamp(1.6rem, 4vw, 3rem); + margin-bottom: var(--gap-lg); } .support-section-head h2 {