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 b17207d..4c18f43 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 @@ -204,7 +204,8 @@ display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; - padding: 1.25rem 0 clamp(1rem, 4vw, 1.5rem); + align-content: start; + padding: 1.875rem 0 1.5rem; } // Keep one search form while placing it below the hero copy on mobile. @@ -237,7 +238,7 @@ .immersive-header__copy { grid-area: 3 / 1 / auto / -1; - margin: 1rem 0 0; + margin: 1.25rem 0 0; } .immersive-header__eyebrow { @@ -245,18 +246,21 @@ } .immersive-header__title { - font-size: clamp(42px, 13vw, 64px); + font-size: clamp(40px, 12vw, 56px); line-height: 0.7; } .immersive-header__description { margin-top: 30px; - font-size: 18px; + font-size: clamp(11px, 3vw, 14px); + line-height: 1.5; + color: #666; + text-shadow: none; } .immersive-header__search { grid-area: 4 / 1 / auto / -1; - width: 76%; + width: 74%; max-width: 28rem; margin: 0.5rem auto 0; } @@ -265,11 +269,11 @@ right: auto; left: 0; width: 100%; - color: #fff; + color: var(--tenant-danger, #dc3545); } app-continuous-image-carousel { - grid-area: 5 / 1 / auto / -1; + grid-area: 6 / 1 / auto / -1; margin-top: 1.5rem; --carousel-card-width: 27vw; --carousel-gap: 3.3vw; @@ -281,6 +285,9 @@ } .immersive-header__backdrop { + // Keep the fade tied to the hero, independent of the content below it. + align-self: start; + height: 12.5rem; // Fade the entire layer so its dark base cannot leave a subpixel seam. mask-image: linear-gradient(#000 calc(100% - 8px), transparent 100%); } @@ -288,10 +295,10 @@ .immersive-header__backdrop::after { background: linear-gradient( 180deg, - rgba(0, 0, 0, 0.45) 0%, - rgba(0, 0, 0, 0.15) 55%, - rgba(245, 245, 245, 0.55) 75%, - #f5f5f5 95%, + rgba(0, 0, 0, 0.25) 0%, + rgba(245, 245, 245, 0.1) 30%, + rgba(245, 245, 245, 0.65) 65%, + #f5f5f5 98%, #f5f5f5 100% ); } @@ -301,10 +308,10 @@ .immersive-header__search .form-control { min-height: 36px; padding: 0.25rem 2.5rem 0.25rem 0.75rem; - border: 1px solid rgba(255, 255, 255, 0.85); + border: 1px solid #888; border-radius: 3px; background: transparent; - color: #fff; + color: #666; font-size: 16px; &::placeholder { @@ -312,13 +319,13 @@ } &:focus-visible { - outline: 2px solid #fff; + outline: 2px solid #666; outline-offset: 2px; } } .immersive-header__search .input-search-icon { - color: #fff; + color: #666; right: 0.75rem; } 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 dcfce1e..6834e58 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 @@ -48,11 +48,13 @@ app-immersive-store-header { @media (max-width: 767.98px) { .immersive-categories { - margin-top: 5rem; - padding: 1rem 0.25rem 0; + grid-area: 5 / 1 / auto / -1; + min-width: 0; + margin-top: 1.5rem; + padding: 0 1rem; font-size: clamp(10px, 2.8vw, 12px); --horizontal-carousel-visible-items: 3; - --horizontal-carousel-gap: 90px; + --horizontal-carousel-gap: 0.5rem; --horizontal-carousel-item-width: calc((100cqw - 2 * var(--horizontal-carousel-gap)) / 3); --horizontal-carousel-white-space: normal; --horizontal-carousel-snap: x mandatory;