/* * 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; overflow-x: clip; } /* Clip the decorative title ribbon at the viewport, preserving vertical overflow. */ .main > .section:has(.hero-title-container) { overflow-x: clip; } /* Card image width is fluid; HTML height attributes must scale with it. */ .post-image .card-img-top { height: auto; } /* Improve neutral text contrast without changing the brand palette. */ :root { --default: #6b6b6b; } .text-color-grey { color: #6b6b6b !important; } .form-control::placeholder { color: #6b6b6b; opacity: 1; } /* Keep the contact strip below the logo's existing overlap/stacking. */ #header .header-contact-bar { background: #676767; font-size: 13px; line-height: 1; flex-shrink: 0; } #header .header-contact-bar > .container { height: 28px; gap: 20px; white-space: nowrap; } #header .header-contact-bar a { color: #fff; display: inline-flex; align-items: center; height: 100%; } #header .header-contact-bar a:hover { text-decoration: underline; } /* Hidden logo variants must not leave empty keyboard stops. */ #header .header-logo a:has(> .logo-sticky), html.sticky-header-active #header .header-logo a:has(> .logo) { visibility: hidden; } html.sticky-header-active #header .header-logo a:has(> .logo-sticky) { visibility: visible; } @media (max-width: 991px) { #header .header-logo a:has(> .logo) { visibility: hidden; } #header .header-logo a:has(> .logo-sticky) { visibility: visible; } } :is(a, button, input, textarea, select):focus-visible { outline: 3px solid #212529; outline-offset: 3px; box-shadow: 0 0 0 3px #fff; } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 10000; padding: 10px 16px; background: #fff; color: #212529; transform: translateY(-150%); opacity: 0; } .skip-link:focus { transform: none; opacity: 1; } /* Keep desktop submenus reachable by keyboard as well as pointer. */ @media (min-width: 992px) { #header .header-nav-main nav > ul > li.dropdown:focus-within > .dropdown-menu { display: block; opacity: 1; visibility: visible; transform: none; } } /* Keep the headline clear of the foreground engineer on phones. */ @media (max-width: 575px) { .hero-dynamic-height .custom-big-text-style-1 { font-size: clamp(2.7rem, 10vw, 3.4rem); letter-spacing: 2px; } } /* Scale the established diamond arrangement to fit narrow phones. */ @media (max-width: 419px) { .diamonds-wrapper { zoom: 0.8; } } @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 * An 80px travel over the 13.75s visible window gives 5.82 CSS px/s at * every viewport width, close to the previous 1440px desktop speed. * Extra 40px on each side provides the travel buffer; cover keeps the * photos proportional. The existing 5% vertical crop is retained. * Fixed pixel travel means resize needs no measurements or timer reset. */ .hero-bg-slideshow { --hero-pan-half: 40px; } .hero-bg-slide-layer { left: calc(-1 * var(--hero-pan-half)) !important; right: calc(-1 * var(--hero-pan-half)) !important; top: -2.5% !important; bottom: -2.5% !important; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transform: translateX(var(--hero-pan-half)); } /* First image is visible even without JS or while later images load. * Start 1.25s into the cycle, fully opaque, with the matching pan position * (40px - 80px * 1.25/13.75). This avoids a jump when images become ready. */ .hero-bg-slide-layer--initial { background-image: url("../img/hero/scene-1.webp"); opacity: 1; transform: translateX(calc(var(--hero-pan-half) * 9 / 11)); } @media (prefers-reduced-motion: no-preference) { .hero-bg-slideshow--ready > .hero-bg-slide-layer { animation: heroBgPanCrossfade 50s linear infinite backwards; } .hero-bg-slideshow > .hero-bg-slide-layer:nth-child(1) { animation-delay: -1.25s; } .hero-bg-slideshow > .hero-bg-slide-layer:nth-child(2) { animation-delay: 11.25s; } .hero-bg-slideshow > .hero-bg-slide-layer:nth-child(3) { animation-delay: 23.75s; } .hero-bg-slideshow > .hero-bg-slide-layer:nth-child(4) { animation-delay: 36.25s; } } @keyframes heroBgPanCrossfade { 0% { opacity: 0; transform: translateX(var(--hero-pan-half)); } 2.5%, 25% { opacity: 1; } 27.5% { opacity: 0; transform: translateX(calc(-1 * var(--hero-pan-half))); } 100% { opacity: 0; transform: translateX(calc(-1 * var(--hero-pan-half))); } } /* Reduced motion uses only the first scene, static and cover/center. */ @media (prefers-reduced-motion: reduce) { .appear-animation, [data-appear-animation] { opacity: 1 !important; animation: none !important; transition: none !important; } .highlight-animated::after { animation: none !important; transition: none !important; } .hero-bg-slide-layer { inset: 0 !important; transform: none; } } /* Keep content readable without JavaScript, or if theme initialisation fails. */ html:not(.appear-animations-ready) .appear-animation { opacity: 1; } /* Scroll position supplies the sequence once columns stack on small screens. */ @media (max-width: 767px) { .appear-animation { animation-delay: 0ms !important; } } /* * 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