diff --git a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss index f59f35a..b17207d 100644 --- a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss +++ b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss @@ -17,7 +17,7 @@ z-index: 1; min-width: 0; padding-top: clamp(1.75rem, 4vw, 2.5rem); - padding-bottom: clamp(2rem, 4vw, 3rem); + padding-bottom: clamp(1rem, 2vw, 1.5rem); } .immersive-header__backdrop { @@ -135,11 +135,13 @@ .immersive-header__title { margin: -0.15rem 0 0; font-size: 140px; - line-height: 1.05; + line-height: 0.7; } .immersive-header__description { - margin: 1.15rem 0 0; - font-size: clamp(0.75rem, 1.4vw, 0.95rem); + margin: 30px 0 0; + font-family: 'Gotham Book', sans-serif; + font-size: 18px; + font-weight: 300; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6); } .immersive-header__timer { @@ -202,7 +204,7 @@ display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; - padding: 1.25rem 0 clamp(2rem, 8vw, 3rem); + padding: 1.25rem 0 clamp(1rem, 4vw, 1.5rem); } // Keep one search form while placing it below the hero copy on mobile. @@ -244,12 +246,12 @@ .immersive-header__title { font-size: clamp(42px, 13vw, 64px); - line-height: 0.95; + line-height: 0.7; } .immersive-header__description { - margin-top: 2rem; - font-size: clamp(11px, 3vw, 14px); + margin-top: 30px; + font-size: 18px; } .immersive-header__search { diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.scss b/src/app/core/layout/store-layout/store-header/store-header.component.scss index 901e259..dcfce1e 100644 --- a/src/app/core/layout/store-layout/store-header/store-header.component.scss +++ b/src/app/core/layout/store-layout/store-header/store-header.component.scss @@ -36,23 +36,23 @@ app-immersive-store-header { position: relative; z-index: 1; width: 100%; - margin-top: clamp(2rem, 5vw, 4rem); + margin-top: clamp(5rem, 11vw, 9rem); padding: 0.375rem 1rem; background: transparent; color: #666; font-size: 15px; font-weight: 700; - --horizontal-carousel-gap: clamp(1rem, 3vw, 2.5rem); + --horizontal-carousel-gap: 90px; --horizontal-carousel-text-transform: uppercase; } @media (max-width: 767.98px) { .immersive-categories { - margin-top: 2rem; + margin-top: 5rem; padding: 1rem 0.25rem 0; font-size: clamp(10px, 2.8vw, 12px); --horizontal-carousel-visible-items: 3; - --horizontal-carousel-gap: 0.5rem; + --horizontal-carousel-gap: 90px; --horizontal-carousel-item-width: calc((100cqw - 2 * var(--horizontal-carousel-gap)) / 3); --horizontal-carousel-white-space: normal; --horizontal-carousel-snap: x mandatory;