/* ============================================================================ SHOP BANNER STYLES Purpose: Standalone reusable hero banner template for shop/landing pages. Activation: add class "shop-banner-page" on . Notes: - This file is intentionally independent from about-banner.css. - Replace image variables below per page as needed. ============================================================================ */ body.shop-banner-page { --shop-banner-min-height: clamp(410px, 50vh, 560px); --shop-banner-min-height-mobile: clamp(320px, 54vh, 420px); --shop-banner-padding-bottom: 0.62in; --shop-banner-padding-bottom-mobile: 0.50in; --shop-banner-bg-pos-x: center; --shop-banner-bg-pos-y: 58%; --shop-banner-bg-pos-y-tablet: var(--shop-banner-bg-pos-y); --shop-banner-bg-size-image: cover; --shop-banner-bg-size-image-tablet: cover; --shop-banner-bg-size-image-mobile: cover; --shop-banner-overlay-start: rgba(12, 4, 20, 0.40); --shop-banner-overlay-end: rgba(12, 4, 20, 0.50); --shop-banner-subtitle-max-width: 860px; --shop-banner-subtitle-opacity: 0.90; --shop-banner-subtitle-underline-width: 68px; --shop-banner-subtitle-underline-opacity: 0.26; --shop-banner-image-fallback: url("/images/shop_banner1440.png"); --shop-banner-image-1x: url("/images/shop_banner1040.png"); --shop-banner-image-1-5x: url("/images/shop_banner1440.png"); --shop-banner-image-2x: url("/images/shop_banner1920.png"); } body.shop-banner-page .page-header { position: relative; isolation: isolate; min-height: var(--shop-banner-min-height) !important; height: auto !important; display: flex; align-items: flex-end; padding-top: 0 !important; padding-bottom: var(--shop-banner-padding-bottom) !important; background-size: cover, var(--shop-banner-bg-size-image) !important; background-position: center, var(--shop-banner-bg-pos-x) var(--shop-banner-bg-pos-y) !important; background-repeat: no-repeat, no-repeat !important; background-image: linear-gradient(180deg, var(--shop-banner-overlay-start), var(--shop-banner-overlay-end)), var(--shop-banner-image-fallback) !important; background-image: linear-gradient(180deg, var(--shop-banner-overlay-start), var(--shop-banner-overlay-end)), image-set( var(--shop-banner-image-1x) 1x, var(--shop-banner-image-1-5x) 1.5x, var(--shop-banner-image-2x) 2x ) !important; margin-bottom: 0; } html[lang^="en"] body.shop-banner-page.publications-page .page-header { min-height: var(--shop-banner-min-height) !important; height: var(--shop-banner-min-height) !important; } body.shop-banner-page .page-header::before { content: none !important; display: none !important; background: none !important; background-image: none !important; opacity: 0 !important; } body.shop-banner-page .page-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 14vh, 150px); background: linear-gradient( 180deg, rgba(12, 4, 20, 0) 0%, rgba(12, 4, 20, 0.56) 62%, rgba(12, 4, 20, 0.82) 100% ); pointer-events: none; z-index: 2; } body.shop-banner-page .page-header .container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; z-index: 3; } body.shop-banner-page .page-header .page-title { display: block; text-align: center; margin-left: auto; margin-right: auto; } body.shop-banner-page .page-header .page-subtitle { margin: 0 auto; text-align: center; color: var(--color-white); font-size: clamp(1.06rem, 2.08vw, 1.28rem); max-width: var(--shop-banner-subtitle-max-width); font-weight: 560; opacity: var(--shop-banner-subtitle-opacity); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.36); } body.shop-banner-page .page-header .page-subtitle::after { content: ""; display: block; width: var(--shop-banner-subtitle-underline-width); height: 1px; margin: 13px auto 0; background: rgba(255, 255, 255, var(--shop-banner-subtitle-underline-opacity)); } body.shop-banner-page main > .section-divider.section-divider--hard + .awakening-showcase { margin-top: clamp(-34px, -2.8vw, -20px); padding-top: clamp(30px, 2.8vw, 42px); position: relative; z-index: 4; } @media (max-width: 1100px) and (min-width: 769px) { /* Tablet / 1024 range: keep image layer covered without changing text/card layout. */ body.shop-banner-page .page-header { background-size: cover, var(--shop-banner-bg-size-image-tablet) !important; background-position: center, var(--shop-banner-bg-pos-x) var(--shop-banner-bg-pos-y-tablet) !important; } } @media (max-width: 768px) { body.shop-banner-page .page-header { min-height: var(--shop-banner-min-height-mobile) !important; padding-bottom: var(--shop-banner-padding-bottom-mobile) !important; background-size: cover, var(--shop-banner-bg-size-image-mobile) !important; } html[lang^="en"] body.shop-banner-page.publications-page .page-header { min-height: var(--shop-banner-min-height-mobile) !important; height: var(--shop-banner-min-height-mobile) !important; } body.shop-banner-page .page-header .page-subtitle { margin: 0 auto; text-align: center; } body.shop-banner-page main > .section-divider.section-divider--hard + .awakening-showcase { margin-top: clamp(-20px, -4.8vw, -12px); padding-top: clamp(22px, 5vw, 30px); } }