`, making its direct parent. Using `100%` (not `100vw`) means the slider tracks the body content area, which already excludes the scrollbar gutter reserved by `scrollbar-gutter: stable both-edges` — so the slider can never overlap the gutter or push horizontal scroll. */ width: 100%; max-width: 100%; margin-bottom: 0; overflow: hidden; background: #0f172a; } /* Soft hero → body handoff: cool fade + hairline (desktop/tablet). Mobile removes this fade (see max-width: 768px) for a hard industrial edge. z-index stays BELOW the content overlay (3) and ABOVE the photo overlay (1) so the fade never washes the H1 / CTA. */ .hero-slider::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: clamp(36px, 6vh, 64px); pointer-events: none; background: linear-gradient( to bottom, rgba(247, 248, 250, 0) 0%, rgba(247, 248, 250, 0.55) 55%, var(--b2b-bg, #f7f8fa) 100% ); border-bottom: 1px solid var(--b2b-border, #e2e5e9); } /* Breathing room into the first homepage module (categories). */ body.b2b-site:has(.hero-slider) main.container { padding-top: clamp(36px, 5vw, 56px); } /* Viewport is the positioning context AND the vertical centering frame for the marketing content stack. `min-height` (not fixed height) lets the content grow the hero on small screens instead of clipping. The slide track is absolutely positioned behind the content (see below), so it fills whatever height the viewport resolves to. */ .hero-slider__viewport { position: relative; width: 100%; /* fallback */ min-height: clamp(40vh, 72vh, 80vh); /* stable mobile fix — svh ignores address-bar show/hide so the hero (and image) no longer resizes while scrolling on mobile. */ min-height: clamp(40svh, 72svh, 80svh); display: flex; align-items: center; } /* ============================================================ Case B marketing content overlay — quiet-luxury stack: H1 → one lead → (optional CMS H2/subtitle) → one CTA. Left-anchored. `pointer-events: none` keeps slider swipe/hover working; only CTA buttons re-enable pointer events. ============================================================ */ .hero-slider__content-overlay { /* Absolute overlay: out of normal flow so the text NEVER drives the viewport (and therefore the image) height. The image now tracks only `.hero-slider__viewport` min-height. */ position: absolute; inset: 0; z-index: 3; max-width: 640px; /* Lifted left/editorial stack — more top air, less bottom-edge dump. Never centered brochure layout. */ padding: clamp(52px, 9vh, 104px) clamp(24px, 5vw, 80px) clamp(36px, 5vh, 64px); color: #fff; text-align: left; pointer-events: none; /* 3-zone grid: identity / optional CMS / CTA. CMS row collapses when `.is-empty` (no reserved gap for quiet single-headline heroes). `align-content: start` keeps the left/editorial top anchor. */ display: grid; grid-template-rows: auto auto auto; align-content: start; justify-content: start; row-gap: 12px; } /* Optional CMS zone — collapses fully when empty/redundant. */ .hero-slider__cms-copy { min-height: 0; } .hero-slider__cms-copy.is-empty { display: none; } /* Hero H1 — dominant, the primary visual anchor. Isolation note: the global `h1` rule in style.css applies a white pill (background, padding, border-radius, display:inline-block). The cascade resolves per-property, so we MUST explicitly reset those here, otherwise the white box leaks through even though this class out-specifies `h1`. The global `h1` style is intentionally left untouched (content H1s use it). */ .hero-slider__h1 { /* Reset global h1 pill — hero H1 is overlay text, not a content block. */ display: block !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 0 clamp(8px, 1.2vw, 14px); font-size: clamp(1.85rem, 4.2vw, 2.85rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; /* Lighter shadow — readability comes from left gradient, not heavy haze. */ text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28); } /* Hero H2 — secondary marketing layer. Deliberately smaller than H1. */ .hero-slider__h2 { margin: clamp(14px, 2.5vw, 24px) 0 clamp(8px, 1.2vw, 12px); font-size: clamp(1.15rem, 2.1vw, 1.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); } .hero-slider__lead { margin: 0; max-width: 48ch; line-height: 1.5; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.22); } .hero-slider__lead--primary { font-size: clamp(0.98rem, 1.6vw, 1.15rem); font-weight: 400; color: rgba(255, 255, 255, 0.9); } .hero-slider__lead--secondary { font-size: clamp(0.9rem, 1.5vw, 1.05rem); color: rgba(255, 255, 255, 0.85); } .hero-slider__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(14px, 2vw, 22px); /* Re-enable interaction only for the buttons; the rest of the overlay stays transparent to pointer events so slider swipe still works. */ pointer-events: auto; } @media (max-width: 768px) { /* Mobile: hard edge handoff — no soft decorative fade into the page. */ .hero-slider::after { display: none; } .hero-slider { border-bottom: 1px solid var(--b2b-border, #e2e5e9); } body.b2b-site:has(.hero-slider) main.container { padding-top: clamp(28px, 5vw, 40px); } .hero-slider__viewport { /* fallback */ min-height: clamp(44vh, 56vh, 64vh); /* stable mobile fix */ min-height: clamp(44svh, 56svh, 64svh); align-items: flex-start; } .hero-slider__content-overlay { grid-template-rows: auto auto auto; row-gap: 10px; max-width: min(100%, 22rem); /* Safe gutters 16–20px; left editorial stack. */ padding: clamp(44px, 8vw, 72px) 18px clamp(24px, 4vw, 32px); box-sizing: border-box; } .hero-slider__h1 { font-size: clamp(1.35rem, 5.2vw, 1.7rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.025em; max-width: 18ch; margin-bottom: 8px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.32); /* Prefer 2–3 lines on small screens — same H1 text, presentation only. */ display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .hero-slider__lead--primary { font-size: 0.875rem; line-height: 1.45; max-width: 28ch; color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.28); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .hero-slider__lead--secondary { font-size: 0.8125rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .hero-slider__h2 { font-size: 0.95rem; font-weight: 600; margin: 4px 0 0; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .hero-slider__actions { width: auto; max-width: 100%; margin-top: 10px; } /* Restrained CTA — not edge-to-edge full bleed. */ .hero-slider__cta { width: auto; max-width: min(100%, 15.5rem); min-height: 44px; justify-content: center; box-sizing: border-box; padding-left: 1.25rem; padding-right: 1.25rem; } /* Quiet default: modest CTA gap when CMS copy is collapsed. */ .hero-slider__cta-block { margin-top: clamp(12px, 3vw, 20px); width: auto; max-width: 100%; } /* When an intentional CMS H2/subtitle is visible, give a bit more air. */ .hero-slider__cms-copy:not(.is-empty) ~ .hero-slider__cta-block { margin-top: clamp(16px, 4vw, 28px); } /* No arrow chrome on mobile (template also uses .hide-mobile). */ .hero-slider__arrow { display: none !important; } .hero-slider__dots { bottom: 12px; } /* Slightly stronger left scrim for type — still not decorative map art. */ .hero-slider__overlay { background: linear-gradient( 100deg, rgba(18, 22, 28, 0.72) 0%, rgba(18, 22, 28, 0.42) 42%, rgba(18, 22, 28, 0.14) 72%, rgba(18, 22, 28, 0.04) 100% ); } } /* Mobile WebView stability override — some in-app browsers still recalculate svh/vh during scroll (toolbar animation), nudging the hero height a few px and jittering the section below. A fixed px height removes all viewport dependency on mobile. Placed AFTER the svh block so it wins the cascade. Desktop/tablet keep the responsive svh behavior above. */ @media (max-width: 768px) { .hero-slider__viewport { min-height: 460px; } } /* Slide track is now a pure background layer behind the content overlay. */ .hero-slider__track { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; } .hero-slider__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; /* Soft fade only — no marquee energy. */ transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out; z-index: 0; } .hero-slider__slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .hero-slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; /* Cool, low-saturation grade — keeps industrial detail without a new asset pass. */ filter: saturate(0.88) contrast(1.02); /* Compositor hint: isolate the cover image on its own GPU layer so the mobile address-bar animation / scroll no longer repaints it each frame (removes the subtle flicker). Layout/positioning unchanged. */ will-change: transform; backface-visibility: hidden; } @media (prefers-reduced-motion: reduce) { .hero-slider__slide { transition: none; } } .hero-slider__overlay { position: absolute; inset: 0; /* Lighter cool left-readability gradient; right side stays open so factory/machinery detail remains visible. */ background: linear-gradient( 100deg, rgba(15, 23, 42, 0.64) 0%, rgba(15, 23, 42, 0.36) 38%, rgba(15, 23, 42, 0.12) 68%, rgba(15, 23, 42, 0.04) 100% ); pointer-events: none; z-index: 1; } /* Primary hero CTA — no glow; color comes from .btn-b2b--primary tokens. */ .hero-slider__cta { box-shadow: none; } /* Secondary CTA — outline/ghost on the dark hero so it never competes with the primary. Self-contained (no global ghost variant exists). */ .hero-slider__cta--secondary { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: none; } .hero-slider__cta--secondary:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } /* Carousel chrome — demoted ghost controls (architecture kept; a11y OK). Not filled white template pills. ~40% opacity at rest. */ .hero-slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 50%; background: rgba(15, 23, 42, 0.12); color: rgba(255, 255, 255, 0.85); font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.4; box-shadow: none; transition: opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .hero-slider__arrow:hover, .hero-slider__arrow:focus-visible { opacity: 0.78; background: rgba(15, 23, 42, 0.28); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-50%); outline: none; } .hero-slider__arrow--prev { left: 16px; } .hero-slider__arrow--next { right: 16px; } /* Tiny low-contrast ticks — no SaaS pill tray / blur plate. */ .hero-slider__dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 7px; padding: 0; border-radius: 0; background: transparent; backdrop-filter: none; } .hero-slider__dot { width: 5px; height: 5px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.32); cursor: pointer; opacity: 0.55; box-shadow: none; transition: background 0.25s ease, opacity 0.25s ease; } .hero-slider__dot.is-active, .hero-slider__dot:hover, .hero-slider__dot:focus-visible { background: rgba(255, 255, 255, 0.72); opacity: 0.9; transform: none; outline: none; } .hero-slider.is-paused .hero-slider__slide.is-active { /* visual unchanged; autoplay paused via JS */ } /* Phase 2 — tiny locale presentation tweaks only (no layout redesign). */ html[lang="zh-CN"] .hero-slider__h1, html[lang="zh-CN"] .hero-slider__lead { letter-spacing: 0; word-break: break-word; } html[lang="de"] .hero-slider__cta, html[lang="fr"] .hero-slider__cta, html[lang="es"] .hero-slider__cta { max-width: min(100%, 17rem); }