/** * HD Hero — site-wide hero band styling. * * --hd-hero-bg : per-load random hero image (set in by hd-hero.php) * --hd-vh : viewport height captured ONCE at page load (px). Heroes use * it instead of live vh units so they never resize when the * browser height changes (dev tools, mobile URL bar, etc.). * * .hd-hero-band = the shared page-title-bar layout section (16988) * .my-page-title-bar = the front-page hero (its own layout section, 17298) */ /* ---- Interior pages: half the load-time viewport ---- */ .hd-hero-band { position: relative; min-height: calc(var(--hd-vh, 100vh) * 0.5) !important; align-items: center !important; justify-content: center !important; background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--hd-hero-bg) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Top scrim so the transparent header/menu stays readable on bright skies. */ .hd-hero-band::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 160px; background: linear-gradient(rgba(13, 27, 42, 0.5), rgba(13, 27, 42, 0)); pointer-events: none; z-index: 1; } .hd-hero-band .fusion-builder-row { position: relative; z-index: 2; } /* Clear the overlaid transparent header without huge fixed paddings. */ .hd-hero-band > .fusion-builder-row { padding-top: 40px; margin-left: auto; margin-right: auto; } /* ---- Services variant: illustration band + navy title strip below ---- */ .hd-services-hero { position: relative; min-height: calc(var(--hd-vh, 100vh) * 0.42) !important; background-image: var(--hd-hero-bg) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } .hd-services-titlebar { background: linear-gradient(115deg, #0d1b2a 0%, #123a48 60%, #127f86 140%) !important; padding-top: 30px !important; padding-bottom: 26px !important; } .hd-services-titlebar h2 { color: #fff !important; font-size: clamp(1.9rem, 3.6vw, 2.9rem) !important; margin: 0 0 4px; } .hd-services-titlebar h5 { color: rgba(255, 255, 255, 0.85) !important; font-size: 17px !important; letter-spacing: 1.5px; margin: 0; } /* ---- Front page: full load-time viewport, fixed after load ---- */ .my-page-title-bar { height: var(--hd-vh, 100vh) !important; }