/* * Hero Headline Offset */ .hero-headline-offset { left: -180px; } @media (max-width: 991px) { .hero-headline-offset { left: 0; } } /* * Home Hero - Container Height, Set Correctly on First Paint * The hero container ships with a hardcoded style="height: 700px" in the * HTML as a fallback, corrected by the Porto theme's own * data-dynamic-height plugin (js/theme.js) to the right value for the * current viewport - but that plugin only auto-runs its initial * correction for widths under 992px ("Mobile First Load", js/theme.js); * at >=992px 700px already happens to be correct, so it's left alone. * On any narrower viewport (tablet/mobile), that means the container * briefly paints at the wrong, too-tall 700px before JS runs and shrinks * it down to the real 600/500/410px value - which visibly resized the * background slideshow underneath it on every load once the pan/zoom * treatment was added (previously just a static image, so the resize * wasn't as noticeable). * * Fix: replicate the exact same breakpoint -> height mapping as plain * CSS, !important so it always wins over both the hardcoded inline * fallback and any inline height the JS plugin sets later on resize. * Being CSS (parsed and applied in before the body paints), the * correct height is there from the very first frame - no JS timing to * race, no flash to hide. The JS plugin keeps running harmlessly * alongside this (data-dynamic-height/theme.js untouched); its own * inline-height writes are just always immediately masked by this rule. */ .hero-dynamic-height { height: 700px !important; } @media (max-width: 991px) { .hero-dynamic-height { height: 600px !important; } } @media (max-width: 767px) { .hero-dynamic-height { height: 500px !important; } } @media (max-width: 575px) { .hero-dynamic-height { height: 410px !important; } } /* * Home Hero - Pan & Crossfade Background Slideshow * Replaces the old horizontal sliding-track marquee entirely. 4 stacked * layers (bg1-4.jpg), each position-absolute/inset:0, fill the same hero * container the marquee track used to occupy - only one is ever opaque * at a time. * * Sizing is deliberately split into two independent concerns so neither * one can distort the image: * - background-size: cover (below) always preserves the image's native * aspect ratio while fully filling the box, on any container shape - * this is what changes on narrow/short mobile boxes, and it never * stretches. (background-size: 105% 105% previously did this AND the * zoom in one step, forcing both dimensions to a fixed percentage of * the container independent of the image's own ratio - that's what * was stretching it out of proportion on mobile, where the * container's aspect ratio diverges further from the images'.) * - the extra ~5% zoom buffer needed for the pan is applied separately, * as transform: scale(1.05) on the layer itself - a uniform scale * that can't distort proportions the way an independent width/height * background-size percentage can. * * The pan itself is now transform: translateX(...) instead of * background-position-x, since background-size: cover leaves no size * overflow within the box for background-position to reveal. translateX * is listed BEFORE scale() in the transform value so its percentage * resolves against the layer's own unscaled width (not stretched by the * scale) - translateX(2.5%) / translateX(-2.5%) uses exactly the 5% * (2.5% either side of center) of slack the 1.05 scale creates, so the * image's left edge sits flush at pan-start and its right edge sits * flush at pan-end, same as the background-position-x 0%->100% version * did, just via a different property. * * All 4 layers share ONE @keyframes shape and are spaced by exactly 1/4 * of the shared 50s cycle via animation-delay (0s/12.5s/25s/37.5s), with * animation-fill-mode: backwards so each stays invisible (opacity 0, * matching keyframe 0%) until its own delay elapses. Because every layer * runs the identical shape just phase-shifted by exactly one quarter- * cycle, and that shape's fade-out tail (25%-27.5%, i.e. the last 1.25s * of its 12.5s turn) is the same real-world width as the next layer's * fade-in head (0%-2.5%), the two always land on the exact same 1.25s * window in real time - a true overlapping crossfade, not a hard cut - * including the wrap from bg4's fade-out back into bg1's fade-in on the * next lap (both fall at t=50s/0s, since every layer's cycle repeats * every 50s). None of this timing changed from the previous version - * only what's being sized/animated did. Percentage-based pan/timing * throughout, independent of the fluid container width and the * JS-driven per-breakpoint height (data-dynamic-height, js/theme.js) - * neither was touched. */ .hero-bg-slide-layer { background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transform: translateX(2.5%) scale(1.05); } @media (prefers-reduced-motion: no-preference) { .hero-bg-slide-layer { animation: heroBgPanCrossfade 50s linear infinite; animation-fill-mode: backwards; } .hero-bg-slideshow > .hero-bg-slide-layer:nth-child(1) { animation-delay: 0s; } .hero-bg-slideshow > .hero-bg-slide-layer:nth-child(2) { animation-delay: 12.5s; } .hero-bg-slideshow > .hero-bg-slide-layer:nth-child(3) { animation-delay: 25s; } .hero-bg-slideshow > .hero-bg-slide-layer:nth-child(4) { animation-delay: 37.5s; } } @keyframes heroBgPanCrossfade { 0% { opacity: 0; transform: translateX(2.5%) scale(1.05); } 2.5% { opacity: 1; } 25% { opacity: 1; transform: translateX(-2.5%) scale(1.05); } 27.5% { opacity: 0; } } /* * Home Hero - Reduced Motion Fallback * No sliding-track marquee, no pan, no crossfade - just bg1 shown as a * single static image (plain cover/center, not the 105%/pan treatment) * for users with prefers-reduced-motion enabled at the OS level. */ @media (prefers-reduced-motion: reduce) { .hero-bg-slideshow > .hero-bg-slide-layer:first-child { opacity: 1; transform: none; } } /* * Home Hero - Scrim * Sits above the marquee, below the text/content container * (.container.z-index-1 holding the headline, engineer photo and * tagline - untouched). Subtle dark tint so text contrast stays * consistent no matter which part of which background photo is * currently in view, without visibly darkening or flattening the * photos themselves. */ .hero-bg-scrim { background-color: rgba(0, 0, 0, 0.18); pointer-events: none; } /* * Footer Newsletter Form - Equal Field Heights * First Name and Email Address sit in separate .input-group instances * (First Name has no button, so nothing stretches it - Bootstrap's * .input-group align-items:stretch only equalizes elements WITHIN the * same group, not across separate ones). The submit button contains a * 27px icon image, which - once its own padding is added - renders * taller than a plain .form-control, so Email's group (stretched to * match the button) ends up taller than First Name's. Pin both fields * and the button to one explicit shared height so they match regardless * of that content-driven sizing, and centre the icon within the * button's now-fixed height. */ .newsletter .mailerlite-form .form-control, .newsletter .mailerlite-form .btn { height: 44px; } .newsletter .mailerlite-form .btn { display: flex; align-items: center; justify-content: center; } /* * Faster Scroll-In Animations - Mobile * The theme sets each element's fade-in "animation-delay"/"animation-duration" * as an inline style (from data-appear-animation-delay/-duration attributes), * often staggered up to 1-2+ seconds per element. That choreography reads fine * on desktop but feels laggy/uncertain on mobile scrolling. Collapse both to * near-instant on mobile only - inline styles need !important to be overridden. * Desktop timing is untouched. */ @media (max-width: 991px) { .appear-animation { animation-delay: 50ms !important; animation-duration: 250ms !important; transition-delay: 50ms !important; transition-duration: 250ms !important; } } /* * Sticky Sidebar - Prevent Visual Re-Fade on Scroll * Reported: sidebar content on the sticky-sidebar pages (data-plugin-sticky * - About, Services, and the 5 individual service pages) fades in * correctly on load, then appears to fade in again the first time the * user scrolls far enough for the sticky plugin (js/theme.js) to flip * the