/* ============================================================================ BUSINESS SUBFOLDERS BANNER TEMPLATE (STANDALONE) Purpose: Reusable hero banner template for business subfolder landing pages. Activation: add class "business-subfolder-banner-page" on . Key guarantees: - Independent from about/shop banner files. - Keeps H1 visible by default. - Disables inherited ::before banner layers to prevent bleed/conflicts. - Uses responsive 1x / 1.5x / 2x image-set. Per-page setup: 1) Set the 3 image vars in the page-scoped body class block. 2) Optional: tweak min-height, vertical image position, overlay strength. ============================================================================ */ body.business-subfolder-banner-page { --business-sub-banner-min-height: clamp(420px, 52vh, 620px); --business-sub-banner-min-height-mobile: clamp(340px, 58vh, 460px); --business-sub-banner-padding-bottom: 0.46in; --business-sub-banner-padding-bottom-mobile: 0.40in; --business-sub-banner-bg-pos-x: center; --business-sub-banner-bg-pos-y: 56%; --business-sub-banner-bg-pos-y-tablet: var(--business-sub-banner-bg-pos-y); --business-sub-banner-bg-size-image: cover; --business-sub-banner-bg-size-image-tablet: cover; --business-sub-banner-bg-size-image-mobile: cover; --business-sub-banner-overlay-start: rgba(12, 4, 20, 0.40); --business-sub-banner-overlay-end: rgba(12, 4, 20, 0.50); --business-sub-banner-title-max-width: 980px; --business-sub-banner-subtitle-max-width: 900px; --business-sub-banner-subtitle-opacity: 0.92; --business-sub-banner-subtitle-underline-width: 68px; --business-sub-banner-subtitle-underline-opacity: 0.32; /* Replace these with each page's uploaded banner images */ --business-sub-banner-image-fallback: url("/images/REPLACE_business_banner_1440.png"); --business-sub-banner-image-1x: url("/images/REPLACE_business_banner_1024.png"); --business-sub-banner-image-1-5x: url("/images/REPLACE_business_banner_1440.png"); --business-sub-banner-image-2x: url("/images/REPLACE_business_banner_1920.png"); } body.business-subfolder-banner-page.business-workforce-new-page { --business-sub-banner-min-height: clamp(340px, 42vh, 470px); --business-sub-banner-min-height-mobile: clamp(280px, 46vh, 360px); --business-sub-banner-bg-pos-y: 99%; --business-sub-banner-bg-size-image: 100% auto; --business-sub-banner-image-fallback: url("/images/workforce_banner1440.png"); --business-sub-banner-image-1x: url("/images/workforce_banner1440.png"); --business-sub-banner-image-1-5x: url("/images/workforce_banner1920.png"); --business-sub-banner-image-2x: url("/images/workforce_banner1920.png"); } body.business-subfolder-banner-page.business-turnaround-page { --business-sub-banner-min-height: clamp(340px, 42vh, 470px); --business-sub-banner-min-height-mobile: clamp(280px, 46vh, 360px); --business-sub-banner-bg-pos-y: 30%; --business-sub-banner-bg-size-image: 100% auto; --business-sub-banner-image-fallback: url("/images/turnaround_banner1440.png"); --business-sub-banner-image-1x: url("/images/turnaround_banner1024.png"); --business-sub-banner-image-1-5x: url("/images/turnaround_banner1440.png"); --business-sub-banner-image-2x: url("/images/turnaround_banner1920.png"); } body.business-subfolder-banner-page.business-scaling-new-page { --business-sub-banner-min-height: clamp(340px, 42vh, 470px); --business-sub-banner-min-height-mobile: clamp(280px, 46vh, 360px); --business-sub-banner-bg-pos-y: 50%; --business-sub-banner-bg-size-image: 100% auto; --business-sub-banner-image-fallback: url("/images/scaling_banner1440.png"); --business-sub-banner-image-1x: url("/images/scaling_banner1024.png"); --business-sub-banner-image-1-5x: url("/images/scaling_banner1440.png"); --business-sub-banner-image-2x: url("/images/scaling_banner1920.png"); } body.business-subfolder-banner-page.business-compliance-page { --business-sub-banner-min-height: clamp(340px, 42vh, 470px); --business-sub-banner-min-height-mobile: clamp(280px, 46vh, 360px); --business-sub-banner-bg-pos-y: 50%; --business-sub-banner-bg-size-image: 102% auto; --business-sub-banner-overlay-start: rgba(12, 4, 20, 0.44); --business-sub-banner-overlay-end: rgba(12, 4, 20, 0.54); --business-sub-banner-image-fallback: url("/images/compliance2_banner1440.png"); --business-sub-banner-image-1x: url("/images/compliance2_banner1024.png"); --business-sub-banner-image-1-5x: url("/images/compliance2_banner1440.png"); --business-sub-banner-image-2x: url("/images/compliance2_banner1920.png"); } body.business-subfolder-banner-page.business-compliance-page .page-header { position: relative; isolation: isolate; overflow: hidden; } body.business-subfolder-banner-page.business-compliance-page .page-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(110px, 16vh, 180px); background: linear-gradient( 180deg, rgba(16, 7, 28, 0) 0%, rgba(24, 11, 40, 0.04) 56%, rgba(34, 16, 58, 0.085) 80%, rgba(44, 22, 74, 0.14) 100% ), linear-gradient( 90deg, rgba(22, 10, 36, 0.08) 0%, rgba(66, 32, 112, 0.06) 56%, rgba(116, 72, 184, 0.05) 100% ); pointer-events: none; z-index: 2; } body.business-subfolder-banner-page .page-header { min-height: var(--business-sub-banner-min-height) !important; height: var(--business-sub-banner-min-height) !important; display: flex; align-items: flex-end; padding-top: 0 !important; padding-bottom: var(--business-sub-banner-padding-bottom) !important; margin-bottom: 0; background-size: cover, var(--business-sub-banner-bg-size-image) !important; background-position: center, var(--business-sub-banner-bg-pos-x) var(--business-sub-banner-bg-pos-y) !important; background-repeat: no-repeat, no-repeat !important; background-image: linear-gradient(180deg, var(--business-sub-banner-overlay-start), var(--business-sub-banner-overlay-end)), var(--business-sub-banner-image-fallback) !important; background-image: linear-gradient(180deg, var(--business-sub-banner-overlay-start), var(--business-sub-banner-overlay-end)), image-set( var(--business-sub-banner-image-1x) 1x, var(--business-sub-banner-image-1-5x) 1.5x, var(--business-sub-banner-image-2x) 2x ) !important; } body.business-subfolder-banner-page .page-header::before { content: none !important; display: none !important; } body.business-subfolder-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.business-subfolder-banner-page .page-header .page-title { display: block !important; color: var(--color-white); max-width: var(--business-sub-banner-title-max-width); text-align: center; } body.business-subfolder-banner-page .page-header .page-subtitle { margin: 0 auto; text-align: center; color: var(--color-white); max-width: var(--business-sub-banner-subtitle-max-width); font-size: clamp(1.02rem, 1.9vw, 1.2rem); font-weight: 560; opacity: var(--business-sub-banner-subtitle-opacity); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.36); } body.business-subfolder-banner-page .page-header .page-subtitle::after { content: ""; display: block; width: var(--business-sub-banner-subtitle-underline-width); height: 1px; margin: 10px auto 0; background: rgba(255, 255, 255, var(--business-sub-banner-subtitle-underline-opacity)); } @media (max-width: 1100px) and (min-width: 769px) { /* Tablet / 1024 range: prevent exposed top/bottom bands without touching hero text/card layout. */ body.business-subfolder-banner-page .page-header { background-size: cover, var(--business-sub-banner-bg-size-image-tablet) !important; background-position: center, var(--business-sub-banner-bg-pos-x) var(--business-sub-banner-bg-pos-y-tablet) !important; } } @media (max-width: 768px) { body.business-subfolder-banner-page.business-compliance-page .page-header::after { height: clamp(74px, 12vh, 118px); } body.business-subfolder-banner-page .page-header { min-height: var(--business-sub-banner-min-height-mobile) !important; height: var(--business-sub-banner-min-height-mobile) !important; padding-bottom: var(--business-sub-banner-padding-bottom-mobile) !important; background-size: cover, var(--business-sub-banner-bg-size-image-mobile) !important; background-position: center, var(--business-sub-banner-bg-pos-x) var(--business-sub-banner-bg-pos-y) !important; } body.business-subfolder-banner-page .page-header .page-title, body.business-subfolder-banner-page .page-header .page-subtitle { margin-left: auto; margin-right: auto; text-align: center; } } @media (max-width: 480px) { /* Small phones: let hero grow with wrapped H1/subtitles instead of clipping inside fixed height. */ body.business-subfolder-banner-page .page-header { height: auto !important; min-height: max(var(--business-sub-banner-min-height-mobile), 380px) !important; padding-top: clamp(0.5rem, 2vw, 0.85rem) !important; padding-bottom: max(var(--business-sub-banner-padding-bottom-mobile), 0.34in) !important; } body.business-subfolder-banner-page .page-header .container { height: auto; min-height: inherit; justify-content: flex-end; padding-top: 0.15rem; } body.business-subfolder-banner-page .page-header .page-title { max-width: min(92vw, 20ch); font-size: clamp(1.7rem, 7.2vw, 2.15rem); line-height: 1.1; margin-bottom: 0.45rem; text-wrap: balance; overflow-wrap: anywhere; } body.business-subfolder-banner-page .page-header .page-subtitle { max-width: min(92vw, 34ch); font-size: clamp(0.9rem, 3.8vw, 1rem); line-height: 1.35; text-wrap: balance; overflow-wrap: anywhere; } /* Subfolder pages often have 2 subtitle lines; remove decorative underlines on small phones to save height. */ body.business-subfolder-banner-page .page-header .page-subtitle::after { display: none; } } @media (max-width: 360px) { body.business-subfolder-banner-page .page-header { min-height: max(var(--business-sub-banner-min-height-mobile), 400px) !important; } body.business-subfolder-banner-page .page-header .page-title { font-size: clamp(1.55rem, 7vw, 1.9rem); max-width: min(93vw, 18ch); } }