/* NordBus v2 — Brand wave element ───────────────────────────────────────────────────────────────────────── Two waves per section, each painted with the SECTION'S OWN bg color so the wave's flat edge dissolves invisibly into the section it sits on. · ::before — LEFT wave at top, lifted UP into the previous section. Reads as the SECTION'S color rising into the section above. · ::after — RIGHT wave at bottom, dropped DOWN into the next section. Reads as the SECTION'S color spilling into the section below. At every seam the two waves stack: left = bottom section's color rising up; right = top section's color spilling down. Symmetric bookends. Driven by html[data-wave="off | subtle | bold"] stamped on . Default = "subtle". ─────────────────────────────────────────────────────────────────────── */ html[data-wave="subtle"], html[data-wave="bold"] { /* LEFT wave silhouette — flat-high TOP on the LEFT, smooth curve descending to the seam on the right. Mesa shape. viewBox 220×80. */ --wv-stamp: url("data:image/svg+xml;utf8,"); /* RIGHT wave silhouette — the LEFT wave's path rotated 180° around the bbox center. Identical geometry, opposite corner. Used by ::after on each section, positioned bottom-right and translated DOWN so the wave's TOP edge sits flush on the seam. */ --wv-stamp-rd: url("data:image/svg+xml;utf8,"); /* Mirror masks for the OTHER two corners (used when an element needs all 4 corner waves, like the autoparks band and the mobile strip). */ --wv-stamp-rb: url("data:image/svg+xml;utf8,"); --wv-stamp-lt: url("data:image/svg+xml;utf8,"); } /* data-brand cascades */ html[data-brand="max"], html:not([data-brand]) { --wv-mul: 1; } html[data-brand="med"] { --wv-mul: 0.78; } html[data-brand="min"] { --wv-mul: 0.55; } /* ── STACKING-CONTEXT FIX + OPACITY OVERRIDE ────────────────────────── home2-anim.jsx adds .h2-reveal-target to every section. home2.css then transitions BOTH opacity 0→1 AND transform translateY(80px) scale(.97) →none over 1.1s, with will-change: opacity, transform. The slide-in (transform transition) is desired — user explicitly wants to keep it. The OPACITY transition is the problem: - During the fade, the section is semi-transparent, so the section's ::before LEFT wave (painted with the section's own bg color and translated UP into the previous section) becomes semi-transparent. The user sees the content of the previous section bleeding through the wave, which looks broken. - The right wave (previous section's ::after) is unaffected because the previous section is already fully in view (opacity 1). Fix: force opacity: 1 always, regardless of is-in-view. Keep the transform transition so the slide-in still happens. The will-change override stays to prevent the stacking-context trap (sections with transform create stacking contexts during the slide; will-change: auto means the context goes away the instant transform: none kicks in at the end of the animation). */ html[data-wave="subtle"] .h2-reveal-target, html[data-wave="bold"] .h2-reveal-target, html[data-wave="subtle"] .h2-reveal-target:not(.is-in-view), html[data-wave="bold"] .h2-reveal-target:not(.is-in-view) { opacity: 1 !important; will-change: auto !important; } /* ── SHARED WAVE GEOMETRY ──────────────────────────────────────────────── Common box for every wave (left + right). Position, mask and transform are split into the two rule blocks below. */ .h2-services::before, .h2-services::after, .h2-fleet::before, .h2-fleet::after, .h2-map::before, .h2-map::after, .h2-stats::before, .h2-stats::after, .h2-why::before, .h2-why::after, .h2-partners::before, .h2-partners::after, .h2-citi::before, .h2-citi::after, .h2-news::before, .h2-news::after, .h2-karjera-banner::before, .h2-karjera-banner::after, .h2-testimonials::before, .h2-testimonials::after, .h2-cta::before, .h2-cta::after, .h2-footer::before, .h2-hero::after { content: ""; position: absolute; width: clamp(140px, 14vw, 220px); height: clamp(32px, 3.2vw, 48px); pointer-events: none; z-index: 4; background: var(--wv-bg, var(--nb-ink, #17121C)); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; display: none; } /* LEFT wave — anchor top-left, lift UP into prev section. The +1px nudge closes the subpixel hairline gap that browsers can leave between the wave's flat edge and the section's edge. */ .h2-services::before, .h2-fleet::before, .h2-map::before, .h2-stats::before, .h2-why::before, .h2-partners::before, .h2-citi::before, .h2-news::before, .h2-karjera-banner::before, .h2-testimonials::before, .h2-cta::before, .h2-footer::before { left: 0; top: 0; -webkit-mask-image: var(--wv-stamp); mask-image: var(--wv-stamp); transform: translateY(calc(-100% + 1px)); } /* RIGHT wave — anchor bottom-right, drop DOWN into next section. Same 1px overlap nudge as the LEFT wave above. */ .h2-hero::after, .h2-services::after, .h2-fleet::after, .h2-map::after, .h2-stats::after, .h2-why::after, .h2-partners::after, .h2-citi::after, .h2-news::after, .h2-karjera-banner::after, .h2-testimonials::after, .h2-cta::after { right: 0; bottom: 0; -webkit-mask-image: var(--wv-stamp-rd); mask-image: var(--wv-stamp-rd); transform: translateY(calc(100% - 1px)); } /* Activate only when data-wave is on; make sections positioned relative so the absolutely-positioned pseudo-elements anchor correctly. */ html[data-wave="subtle"] .h2-hero, html[data-wave="bold"] .h2-hero, html[data-wave="subtle"] .h2-services, html[data-wave="bold"] .h2-services, html[data-wave="subtle"] .h2-fleet, html[data-wave="bold"] .h2-fleet, html[data-wave="subtle"] .h2-map, html[data-wave="bold"] .h2-map, html[data-wave="subtle"] .h2-stats, html[data-wave="bold"] .h2-stats, html[data-wave="subtle"] .h2-why, html[data-wave="bold"] .h2-why, html[data-wave="subtle"] .h2-partners, html[data-wave="bold"] .h2-partners, html[data-wave="subtle"] .h2-citi, html[data-wave="bold"] .h2-citi, html[data-wave="subtle"] .h2-news, html[data-wave="bold"] .h2-news, html[data-wave="subtle"] .h2-karjera-banner, html[data-wave="bold"] .h2-karjera-banner, html[data-wave="subtle"] .h2-testimonials, html[data-wave="bold"] .h2-testimonials, html[data-wave="subtle"] .h2-cta, html[data-wave="bold"] .h2-cta, html[data-wave="subtle"] .h2-footer, html[data-wave="bold"] .h2-footer { position: relative; } html[data-wave="subtle"] .h2-services::before, html[data-wave="bold"] .h2-services::before, html[data-wave="subtle"] .h2-fleet::before, html[data-wave="bold"] .h2-fleet::before, html[data-wave="subtle"] .h2-map::before, html[data-wave="bold"] .h2-map::before, html[data-wave="subtle"] .h2-stats::before, html[data-wave="bold"] .h2-stats::before, html[data-wave="subtle"] .h2-why::before, html[data-wave="bold"] .h2-why::before, html[data-wave="subtle"] .h2-partners::before, html[data-wave="bold"] .h2-partners::before, html[data-wave="subtle"] .h2-citi::before, html[data-wave="bold"] .h2-citi::before, html[data-wave="subtle"] .h2-news::before, html[data-wave="bold"] .h2-news::before, html[data-wave="subtle"] .h2-karjera-banner::before, html[data-wave="bold"] .h2-karjera-banner::before, html[data-wave="subtle"] .h2-testimonials::before, html[data-wave="bold"] .h2-testimonials::before, html[data-wave="subtle"] .h2-cta::before, html[data-wave="bold"] .h2-cta::before, html[data-wave="subtle"] .h2-footer::before, html[data-wave="bold"] .h2-footer::before, html[data-wave="subtle"] .h2-hero::after, html[data-wave="bold"] .h2-hero::after, html[data-wave="subtle"] .h2-services::after, html[data-wave="bold"] .h2-services::after, html[data-wave="subtle"] .h2-fleet::after, html[data-wave="bold"] .h2-fleet::after, html[data-wave="subtle"] .h2-map::after, html[data-wave="bold"] .h2-map::after, html[data-wave="subtle"] .h2-stats::after, html[data-wave="bold"] .h2-stats::after, html[data-wave="subtle"] .h2-why::after, html[data-wave="bold"] .h2-why::after, html[data-wave="subtle"] .h2-partners::after, html[data-wave="bold"] .h2-partners::after, html[data-wave="subtle"] .h2-citi::after, html[data-wave="bold"] .h2-citi::after, html[data-wave="subtle"] .h2-news::after, html[data-wave="bold"] .h2-news::after, html[data-wave="subtle"] .h2-karjera-banner::after, html[data-wave="bold"] .h2-karjera-banner::after, html[data-wave="subtle"] .h2-testimonials::after, html[data-wave="bold"] .h2-testimonials::after, html[data-wave="subtle"] .h2-cta::after, html[data-wave="bold"] .h2-cta::after { display: block; } /* ── PER-SECTION WAVE COLOR ────────────────────────────────────────────── Each section sets --wv-bg to its own paint color. Themed sections use the --t-bg token; hard-coded sections (CTA, Footer) use their fixed bg. */ .h2-hero.h2-themed, .h2-services.h2-themed, .h2-fleet.h2-themed, .h2-map.h2-themed, .h2-stats.h2-themed, .h2-why.h2-themed, .h2-partners.h2-themed, .h2-citi.h2-themed, .h2-news.h2-themed { --wv-bg: var(--t-bg); } .h2-cta { --wv-bg: var(--nb-violet-deep, #290059); } /* Karjera is now ink/black (was violet-deep); wave color follows the section bg so the wave extends Karjera's own color into the adjacent sections and reads as a seamless edge, not a stray violet line at the top/bottom. */ .h2-karjera-banner { --wv-bg: var(--nb-ink, #17121C); } /* Testimonials is brand-accent violet-deep (the OLD karjera color) sitting between ink-Karjera above and sugar-ParMums below. */ .h2-testimonials { --wv-bg: var(--nb-violet-deep, #290059); } .h2-footer { --wv-bg: var(--nb-ink, #17121C); } /* Brand-intensity overrides — mirror the bg overrides in home2-brand.css. When brand=min, Stats and CTA flatten their bg to ink. Wave follows. */ [data-brand="min"] .h2-stats[data-theme="violet"] { --wv-bg: var(--nb-ink, #17121C); } [data-brand="min"] .h2-cta { --wv-bg: var(--nb-ink, #17121C); } /* ── BOLD MODE ────────────────────────────────────────────────────────── Slightly larger waves at every seam. Reserved for when the user wants the brand to sing. */ html[data-wave="bold"] .h2-services::before, html[data-wave="bold"] .h2-services::after, html[data-wave="bold"] .h2-fleet::before, html[data-wave="bold"] .h2-fleet::after, html[data-wave="bold"] .h2-map::before, html[data-wave="bold"] .h2-map::after, html[data-wave="bold"] .h2-stats::before, html[data-wave="bold"] .h2-stats::after, html[data-wave="bold"] .h2-why::before, html[data-wave="bold"] .h2-why::after, html[data-wave="bold"] .h2-partners::before, html[data-wave="bold"] .h2-partners::after, html[data-wave="bold"] .h2-citi::before, html[data-wave="bold"] .h2-citi::after, html[data-wave="bold"] .h2-news::before, html[data-wave="bold"] .h2-news::after, html[data-wave="bold"] .h2-karjera-banner::before, html[data-wave="bold"] .h2-karjera-banner::after, html[data-wave="bold"] .h2-testimonials::before, html[data-wave="bold"] .h2-testimonials::after, html[data-wave="bold"] .h2-cta::before, html[data-wave="bold"] .h2-cta::after, html[data-wave="bold"] .h2-footer::before, html[data-wave="bold"] .h2-hero::after { width: clamp(200px, 22vw, 320px); height: clamp(48px, 5vw, 72px); } /* ── MOBILE TUNING ────────────────────────────────────────────────────── Scale waves down on phones so they sit gracefully in narrow viewports. */ @media (max-width: 760px) { .h2-services::before, .h2-services::after, .h2-fleet::before, .h2-fleet::after, .h2-map::before, .h2-map::after, .h2-stats::before, .h2-stats::after, .h2-why::before, .h2-why::after, .h2-citi::before, .h2-citi::after, .h2-news::before, .h2-news::after, .h2-karjera-banner::before, .h2-karjera-banner::after, .h2-testimonials::before, .h2-testimonials::after, .h2-cta::before, .h2-cta::after, .h2-footer::before, .h2-hero::after { width: clamp(120px, 36vw, 200px); height: clamp(24px, 5vw, 40px); } } /* ── EXTENSION · Autoparks violet band ────────────────────────────────── Mirror the design's natural section pattern (as seen on .h2-stats): TL: band's own color protruding UP-OUT into the area above BR: band's own color protruding DOWN-OUT into the area below TR: surrounding section's color eating IN from the top-right BL: surrounding section's color eating IN from the bottom-left Important details: 1. The band's own background is NOT overridden here — that's left to home2-brand.css so brand=med (navy gradient) and brand=min (ink) keep working. 2. The TL/BR wave colors track brand intensity via --wv-band-tl and --wv-band-br variables defined below — so the wave is "coherent with the strip" at every brand level. 3. TR/BL cream waves live on .h2-fleet-band-inner pseudo-elements that are stretched to the BAND's full-bleed width via negative horizontal positioning + width: 100vw. Vertical offset compensates for the band's padding so the wave's flat edge sits at the band's outer top/bottom edge (not at band-inner's edge). 4. The cream wave color = var(--t-bg) — tracks the .h2-fleet section's theme automatically. */ /* Brand-intensity cascade for the band's TL/BR wave colors. Mirrors the bg cascade so wave + strip move together. brand=max uses the bright violet -> ink gradient on the band, so the TL wave is bright violet and the BR wave is ink. */ :root { --wv-band-tl: var(--nb-violet-deep, #290059); --wv-band-br: var(--nb-violet-deep, #290059); } html[data-brand="med"] { --wv-band-tl: var(--nb-navy-soft, #1B264A); --wv-band-br: var(--nb-navy, #0E1A33); } html[data-brand="min"] { --wv-band-tl: var(--nb-ink, #17121C); --wv-band-br: var(--nb-ink, #17121C); } /* TL wave: full-bleed pseudo positioned identically to the strip so its background gradient lines up pixel-for-pixel with the strip's gradient. Mask sized to the wave shape and anchored left, so the visible silhouette displays the actual continuation of the strip's gradient at the TL position (mostly bright violet with a touch more violet variation as the gradient progresses). Same trick the BR wave uses below. */ html[data-wave="subtle"] .h2-fleet-band::before, html[data-wave="bold"] .h2-fleet-band::before { content: ""; position: absolute; left: 50%; top: 0; width: 100vw; transform: translateX(-50%) translateY(calc(-100% + 1px)); height: clamp(32px, 3.2vw, 48px); pointer-events: none; z-index: 4; background: linear-gradient(135deg, var(--nb-violet-deep, #290059) 0%, var(--nb-ink, #17121C) 100%); -webkit-mask-image: var(--wv-stamp); mask-image: var(--wv-stamp); -webkit-mask-size: clamp(140px, 14vw, 220px) 100%; mask-size: clamp(140px, 14vw, 220px) 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left bottom; mask-position: left bottom; } /* BR wave: full-bleed pseudo positioned identically to the strip (left:50%; width:100vw; translateX(-50%)) so its background gradient lines up pixel-for-pixel with the strip's gradient. The mask is then sized to only the wave-shape width and anchored right, so the visible silhouette displays the actual gradient continuation at the strip's BR position (mostly ink with a subtle violet on the inner edge), not a new gradient compressed into the wave's 200px box. Same pattern used by .h2-fleet-band-inner for the cream TR/BL waves above. */ html[data-wave="subtle"] .h2-fleet-band::after, html[data-wave="bold"] .h2-fleet-band::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; transform: translateX(-50%) translateY(calc(100% - 1px)); height: clamp(32px, 3.2vw, 48px); pointer-events: none; z-index: 4; background: linear-gradient(135deg, var(--nb-violet-deep, #290059) 0%, var(--nb-ink, #17121C) 100%); -webkit-mask-image: var(--wv-stamp-rd); mask-image: var(--wv-stamp-rd); -webkit-mask-size: clamp(140px, 14vw, 220px) 100%; mask-size: clamp(140px, 14vw, 220px) 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: right top; mask-position: right top; } /* .h2-fleet-band-inner is the CONTAINER-WIDTH grid inside the full-bleed band. Its pseudo-elements need to be stretched to the band's full-bleed width so the cream wave anchors at the BAND's right edge (viewport edge), not at the container edge. Same trick the band itself uses: left: 50%; width: 100vw; transform: translateX(-50%). */ html[data-wave="subtle"] .h2-fleet-band-inner, html[data-wave="bold"] .h2-fleet-band-inner { position: relative; isolation: isolate; } /* TR cream wave — full-bleed pseudo at TOP edge, mask anchored right. */ html[data-wave="subtle"] .h2-fleet-band-inner::before, html[data-wave="bold"] .h2-fleet-band-inner::before { content: ""; position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); top: -24px; /* compensate band's padding-top so the wave's flat edge sits at the band's OUTER top, not at band-inner's top */ height: clamp(32px, 3.2vw, 48px); pointer-events: none; z-index: -1; /* behind the bus icons */ background: var(--t-bg, var(--nb-sugar, #EDEBE0)); -webkit-mask-image: var(--wv-stamp-rd); mask-image: var(--wv-stamp-rd); -webkit-mask-size: clamp(140px, 14vw, 220px) 100%; mask-size: clamp(140px, 14vw, 220px) 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: right top; mask-position: right top; } /* BL cream wave, full-bleed pseudo at BOTTOM edge, mask anchored left. Same visual treatment as the TR wave above (mirrored corner), so the silhouette sits at the band's outer bottom-left and extends UP into the band content area. Bus-image overlap is solved by pushing the bus cells UP via band-inner's padding-bottom (see home2-variants.css) rather than by shrinking or relocating the wave. */ html[data-wave="subtle"] .h2-fleet-band-inner::after, html[data-wave="bold"] .h2-fleet-band-inner::after { content: ""; position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); bottom: -10px; /* compensate band's padding-bottom */ height: clamp(32px, 3.2vw, 48px); pointer-events: none; z-index: -1; background: var(--t-bg, var(--nb-sugar, #EDEBE0)); -webkit-mask-image: var(--wv-stamp); mask-image: var(--wv-stamp); -webkit-mask-size: clamp(140px, 14vw, 220px) 100%; mask-size: clamp(140px, 14vw, 220px) 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left bottom; mask-position: left bottom; } /* Bold mode: both band waves stay full-bleed. Only the mask size grows so the visible silhouette is larger; the element width is already 100vw. */ html[data-wave="bold"] .h2-fleet-band::before, html[data-wave="bold"] .h2-fleet-band::after { height: clamp(48px, 5vw, 72px); -webkit-mask-size: clamp(200px, 22vw, 320px) 100%; mask-size: clamp(200px, 22vw, 320px) 100%; } html[data-wave="bold"] .h2-fleet-band-inner::before, html[data-wave="bold"] .h2-fleet-band-inner::after { height: clamp(48px, 5vw, 72px); -webkit-mask-size: clamp(200px, 22vw, 320px) 100%; mask-size: clamp(200px, 22vw, 320px) 100%; } /* Mobile-specific overrides for the band waves are no longer needed: the desktop .h2-fleet-band (and its inner) is display:none at <=760px. Mobile uses .h2-fleet-mobile with its own wave rules in home2-variants.css. */