/* Local fixes applied after mirroring from www2.altrack.co.za. NOTE: re-running mirror-www2.mjs overwrites the HTML pages; the to this file and the two HTML fixes (sticky removal + emergency popup id on the mobile bar) would need to be re-applied. */ /* Always show the vertical scrollbar track. Every page here is far taller than the viewport, but on each navigation the first paint happens before enough content exists to need a scrollbar — so the right-aligned header buttons (EMERGENCY NUMBER / CALL ME FOR A QUOTE / CLIENT SUPPORT) render ~15px further right, then visibly slide left the instant the scrollbar appears. Forcing the scrollbar from the first frame keeps the viewport width constant across the whole load, so nothing shifts. (overflow-y: scroll rather than scrollbar-gutter: stable purely for older-browser coverage — the end state is identical on these always-scrolling pages.) */ html { overflow-y: scroll; } /* Mobile/tablet hamburger header (0b91bb9). Its authored --z-index is only 10 at tablet widths (100 on phone), and the open hamburger dropdown can end up painted BEHIND main-content sections that carry their own z-index (e.g. the homepage hero's particles canvas layer) — reported as "menu items appear behind the website content" on mobile. Raise the whole header container well above any content-level z-index at every breakpoint (content uses single/double digits; Elementor popups sit at 9999+ and still win where they should). Both the custom property and the plain property are set: e-con consumes --z-index, and Elementor's sticky.js applies z-index:var(--z-index) when the header is sticky- activated — covering pre- and post-activation states. */ .elementor-489 .elementor-element.elementor-element-0b91bb9 { --z-index: 1000; z-index: 1000; } /* The header fix above only helps once Elementor's sticky JS has made 0b91bb9 position:fixed. BEFORE that (fresh load, no scroll — exactly when people tap the hamburger) the header is still in normal flow with position:static, where z-index is ignored — so the menu's effective stacking context is this inner row (3a4a298, position:relative), whose authored z-index is 2. Main-content sections also use z-index 2, and a z tie is broken by DOM order: the header comes FIRST in the DOM, so every content section painted after it covered the open menu ("menu items appear behind the website content"). Raising the row breaks the tie in both states — in-flow it beats all content-level z (single/ double digits), and once the header goes fixed it's inside that context anyway. */ .elementor-489 .elementor-element.elementor-element-3a4a298 { --z-index: 1000; z-index: 1000; } /* Turned out the two z-index rules above weren't the actual fix for the mobile menu — raising z-index (even to 999999999, directly on the dropdown, with position:fixed set directly on it too) never made any visual difference. The dropdown only ever composited correctly above page content once it was moved out of the 0b91bb9/3a4a298/f72d3db ancestor chain entirely (see fixMobileMenuStacking() in contact-form.js, which does that move at page load). Left the two rules above in place since they're harmless and still correct in principle — this is just the styling for the dropdown once contact-form.js has relocated it to be a direct child of . Closed by default (matches Elementor's own default collapsed state); opened by toggling .altrack-mobile-menu--open, which contact-form.js keeps in sync with the toggle button's aria-expanded via MutationObserver, since moving the node out of the DOM breaks Elementor's own adjacent-sibling collapse CSS (`.elementor-menu-toggle:not(.elementor-active) + .container`) that depended on the two staying siblings. */ .altrack-mobile-menu { /* --altrack-header-h set inline by contact-form.js — the header's real height differs by breakpoint (65px phone, 85px tablet), so it can't be a fixed value here. */ position: fixed !important; top: var(--altrack-header-h, 65px); left: 0; right: 0; width: 100%; max-height: 0; overflow-y: auto; overflow-x: hidden; z-index: 999999 !important; background: #11263f; transition: max-height 0.3s ease; } /* Elementor's own authored link color for these items is a very dark grey (rgb(51,55,61)) — presumably meant for a light dropdown background, which is what this widget used before being moved. Against the dark navy background set above, resting-state items were nearly unreadable (the active/hover state alone already renders white via Elementor's own CSS, which is why only the highlighted current-page item looked fine). Matches the white already used for the active state and for the desktop nav, so all items are consistently legible regardless of state. */ .altrack-mobile-menu .elementor-item { color: #ffffff !important; } .altrack-mobile-menu--open { max-height: calc(100vh - var(--altrack-header-h, 65px)); } /* Hide the floating reCAPTCHA v3 badge. api.js in automatic-render mode (render=, see CLAUDE.md's "reCAPTCHA v3 wiring gotcha") injects it bottom-right on every page, permanently, even though reCAPTCHA only matters in the two contact popups and the careers apply form. Google's own FAQ explicitly allows hiding it IF the attribution text is shown inline instead — that's the .altrack-recaptcha-note line rendered inside all three protected forms (partials/popups.html for the popups, careers/patch-careers.mjs's markup for the apply form). Do not remove one without the other. */ .grecaptcha-badge { visibility: hidden; } /* The inline attribution replacing the badge — small and muted, sits under each form's submit button on the white card background. */ .altrack-recaptcha-note { font-size: 11px; line-height: 1.5; color: #7a7f85; margin: 10px 0 0; text-align: center; } .altrack-recaptcha-note a { color: inherit; text-decoration: underline; } /* Desktop sticky header (#site-header, elementor-element-eebab43) — pure CSS padding only, no JS. Elementor's own authored padding for this element is 114px each side (post-489.css / local-489-frontend-desktop.css), which is too wide: at common desktop widths (~1440px and below) it squeezes the nav below the space it needs and "Careers" wraps to its own second line. A removed hand-written script (see patch-cleanup.mjs's STICKY_HEADER_OVERRIDE_SCRIPT) used to force this same tighter padding via inline styles set on every scroll tick, but it also fought Elementor's own sticky.js for control of this element's position (both independently writing to the same inline `style` attribute), causing the header to flicker/mis-position/go missing. Elementor's sticky.js never touches `padding` (confirmed: its own inline styles only ever set position/width/ margin-top/margin-bottom), so a static padding override here can't conflict with it the way the old script's `top`-writing did — this keeps the tighter, correct-looking layout without re-introducing any race. */ #site-header { padding: 24px 40px; } /* Kill the header's authored -45px top margin (post-489.css sets --margin-top:-45px on this element). It was authored to pair with the removed hand-written sticky script's `top: 45px` fallback (net zero once fixed) — with that script gone it only did harm: before Elementor's sticky JS activates, the header rendered 45px too high (the EMERGENCY/QUOTE/SUPPORT bar cut off above the viewport), then visibly jumped down 45px the moment sticky.js kicked in and overrode the margin with inline `margin-top: 0` — on every single page load. Zeroing the margin in CSS makes the pre-JS position identical to the post-JS one (top: 0 both ways), so nothing moves when sticky activates. Elementor's sticky spacer also sizes from the in-flow height, so page content now starts exactly at the header's bottom edge instead of being overlapped by its bottom 45px. */ .elementor-489 .elementor-element.elementor-element-eebab43 { --margin-top: 0px; margin-block-start: 0px; } /* Mobile quick-action bar (EMERGENCY / GET A QUOTE / SUPPORT). Original CSS set bottom:-1% and Elementor sticky-top was also attached, leaving the bar half below the viewport edge — invisible on real phones once the browser toolbar overlaps it. Pin it flush to the bottom with a solid header-matching background and safe-area padding. */ .elementor-489 .elementor-element.elementor-element-22924e4 { top: auto !important; inset-block-start: auto !important; bottom: 0 !important; z-index: 100 !important; background: rgb(17, 38, 63); padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); } /* Keep page content (footer) from being covered by the fixed bar. The bar only renders on the mobile breakpoint. */ @media (max-width: 767px) { body { padding-bottom: 64px; } } /* "Get a Quote" popup (1582) has an issue "Client Support" (2329) doesn't: its own Elementor-authored close-button position (top:24%/right:27% in post-1582.css) computes against .dialog-message, which Elementor sizes to a fixed 1280px/100vh box - much bigger than the actual visible card, which is just centered inside it via flex. Client Support has no such oversized wrapper - its .dialog-widget-content already equals the visible card - which is why a plain top:20/right:20 works there untouched. Shrinking .dialog-message to fit its content (below) helps the huge transparent wrapper stop swallowing clicks meant for the backdrop (click-outside-to-close), but does NOT reliably fix the close button's position on its own - the gap between the wrapper's edge and the card's actual edge is not a fixed value once the card is centered via flex, and it changes at different viewport widths (verified: consistent at desktop, drifted at mobile). The actual, viewport-proof fix is in contact-form.js's fixQuotePopupCloseButtonPosition, which moves the close button to be an actual child of the visible card (.elementor-element-bc018ed, which already has position:relative) - CSS alone can't do this since the button and the card are siblings in Elementor's markup, and position:absolute only ever resolves against an ancestor. The top:20/right:20 below only takes effect correctly once that move has happened. !important beats Elementor's own rule (and its responsive 10%/11% variants, which this flat override replaces at all breakpoints - Client Support needs no per-breakpoint variation either). */ #elementor-popup-modal-1582 .dialog-message { width: auto !important; height: auto !important; } #elementor-popup-modal-1582 .dialog-close-button { top: 20px !important; right: 20px !important; } /* Close icon colour - Get a Quote's own CSS (post-1582.css) hardcodes red (#FF0404); Client Support has no override at all and just renders Elementor's default dark icon colour. Force both to the same orange already used for this popup's own submit button (#EE7402), so the close icon reads as part of the same design instead of two different, unrelated colours. */ #elementor-popup-modal-1582 .dialog-close-button i, #elementor-popup-modal-2329 .dialog-close-button i { color: #EE7402 !important; } #elementor-popup-modal-1582 .dialog-close-button svg, #elementor-popup-modal-2329 .dialog-close-button svg { fill: #EE7402 !important; } /* Contact popup close animation (see contact-form.js's handleCloseButtonClick). Elementor's own exit animation replays each popup's configured entrance animation in reverse, which looks fine for "fadeInUp" but shows no visible motion at all for "fadeIn" — inconsistent between the two contact popups and one feels stuck/slow. Fade the whole dialog (backdrop + content together) ourselves instead, purely cosmetic and layered on top of whatever Elementor does — so both popups close identically. Elementor's own cleanup still takes a while after this fade finishes, and the dialog is a full-viewport overlay that would otherwise keep blocking clicks while invisible — pointer-events:none lets clicks reach the page normally the moment it's faded, without waiting on Elementor's own removal. */ .dialog-widget { transition: opacity 0.3s ease; } .dialog-widget.altrack-popup-closing { opacity: 0; pointer-events: none; } /* Contact form / careers apply-form submit feedback (see contact-form.js and careers/careers.js). Styled as a proper alert box — padding, background tint, colored left border — instead of plain colored text, so success/error/sending states are hard to miss. */ .altrack-form-message { margin-top: 0; font-size: 15px; font-weight: 600; line-height: 1.4; } .altrack-form-message:empty { margin-top: 0; } .altrack-form-message:not(:empty) { margin-top: 14px; padding: 12px 16px; border-radius: 6px; } .altrack-form-message--success { color: #1a7a3c; background: rgba(26, 122, 60, 0.1); border-left: 4px solid #1a7a3c; } .altrack-form-message--error { color: #b3261e; background: rgba(179, 38, 30, 0.1); border-left: 4px solid #b3261e; } .altrack-form-message--sending { color: #54595f; background: rgba(204, 119, 44, 0.08); border-left: 4px solid #cc772c; display: flex; align-items: center; gap: 8px; } .altrack-spinner { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; border: 2px solid rgba(204, 119, 44, 0.3); border-top-color: #cc772c; border-radius: 50%; animation: altrack-spin 0.7s linear infinite; } @keyframes altrack-spin { to { transform: rotate(360deg); } } /* Careers page hero section (elementor-element-e0ca372) uses the shared atomic class .e-82c4712, which fixes height:80vh for its background image. That's fine for the original short "Open Positions" placeholder, but our dynamic vacancy list/detail content is taller — with the fixed height and default overflow:visible, taller content bled visually past the section into the footer below instead of pushing it down. Override only this page-specific instance (not the shared .e-82c4712 class, which other hero sections may also use) so it grows to fit its content while keeping the 80vh look when content is short. */ .elementor-element-e0ca372 { height: auto !important; min-height: 80vh; /* The careers hero's authored desktop padding-block-start is 150px (local-2340-frontend-desktop.css) — like the 5% margin zeroed below, it was sized to clear the old mispositioned fixed header, which used to overlap the top of this section. With the header layout fixed the section starts fully below the header, so the 150px became pure empty dark space above "LOOKING FOR A NEW CAREER?", reading as an oversized header on this one page. 48px keeps comfortable breathing room. */ padding-block-start: 48px !important; /* The authored gradient overlay is `180deg, #2a4565 25%, transparent` — fully opaque header-blue for the section's top quarter, fading out below. That solid band is the same colour as the header itself, so header + hero fused into one tall blue block with the heading text apparently "inside the header", and the control-room photo only surfacing much further down. Replace it with a uniform translucent wash of the same blue (same approach as the apps hero's authored overlay, which is a flat one-third-alpha tint) so the photo is visible from the very top of the section — making the header's true bottom edge obvious — while keeping enough darkening for the white heading text to stay readable. url() here resolves relative to this CSS file (site root), so one rule serves every page depth. */ background-image: linear-gradient(rgba(42, 69, 101, 0.55), rgba(42, 69, 101, 0.55)), url("wp-content/uploads/2026/06/Control-Room-Pic.webp") !important; } /* The two hero sections sharing the atomic class .e-82c4712 (apps and careers — the only pages whose local-*.css defines it) have an authored desktop margin-block-start of 5% (~71px). That margin was authored against the header's old -45px-margin layout (see the eebab43 override above), where the sticky spacer under-measured the header by 45px — netting out to a ~26px white gap between the header and these heroes, which read as "the bottom of the header is cut off". With the header margin fixed, the full 5% would show as a ~71px white gap instead. Zeroing it makes these heroes sit flush under the header, matching every other page's hero (none of which have this margin) and matching these same sections' own authored *mobile* value, which is already 0%. */ .e-82c4712 { margin-block-start: 0 !important; } /* Careers page vacancy list + detail/apply view (see careers.js). The surrounding Elementor section has a dark background with white heading text, but this content is unstyled markup we inject — give it a light card background so default dark text stays readable instead of nearly invisible against the dark section. */ #altrack-vacancy-list-view, #altrack-vacancy-detail { background: #fff; color: #54595f; padding: 24px; border-radius: 6px; text-align: left; /* The parent (elementor-element-8bb0d93) is a flex column with align-items:center, so without an explicit width these default to fit-content — much narrower than the available space, looking squashed. width:100% fills it up to max-width, then margin:auto centers the (now-capped) card instead of letting it stretch edge-to-edge on wide screens. min-width:0 is the actual fix for horizontal page overflow on mobile, where native controls have a wide intrinsic minimum that flex children won't shrink below by default. */ width: 100%; max-width: 760px; min-width: 0; margin: 16px auto 0; box-sizing: border-box; } /* The detail view reads better with its title/meta centered like a job posting header, but body copy, lists and the form still need left alignment for readability — .altrack-vacancy-detail-scroll resets that below. This only affects the "Back" button, which sits outside the scroll wrapper. */ #altrack-vacancy-detail { text-align: center; } #altrack-vacancy-detail h3, #altrack-vacancy-detail h4 { color: #54595f; font-weight: 700; margin: 16px 0 8px; /* Some mirrored WordPress/theme CSS resolves an inherited line-height to a near-zero value on plain h3/h4 tags at narrower breakpoints (seen at 375px: computed line-height ~1.6px on a 16px heading) — a heading that wraps to 2+ lines then renders with the lines stacked almost on top of each other, unreadable. Set an explicit, sane line-height regardless of wherever that value is coming from. */ line-height: 1.3; } #altrack-vacancy-detail h3 { font-size: 1.45em; margin-top: 0; } /* Job meta (department/area/city) as pill badges — see careers.js showDetail — matching the vacancy list cards instead of a single plain-text line with em-dashes, so the detail header reads consistently with the list. */ #altrack-job-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 4px; } .altrack-job-meta-tag { background: rgba(204, 119, 44, 0.1); color: #cc772c; padding: 3px 12px; border-radius: 999px; font-weight: 600; font-size: 13px; } /* Section headings inside the detail body (Duties, Requirements, Languages, Apply) as a small uppercase "eyebrow" with an accent underline, instead of plain bold text indistinguishable from the job title/meta above it. */ .altrack-vacancy-detail-scroll h4 { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.06em; color: #cc772c; border-bottom: 2px solid rgba(204, 119, 44, 0.2); padding-bottom: 6px; margin-top: 26px; } /* Duty/requirement/language items get a small accent-colored dot marker instead of the default browser bullet, matching the orange accent used throughout this section rather than a plain black disc. */ #altrack-job-duties, #altrack-job-qualifications, #altrack-job-languages { list-style: none; margin: 0; padding: 0; } #altrack-job-duties li, #altrack-job-qualifications li, #altrack-job-languages li { position: relative; padding-left: 18px; margin-bottom: 8px; line-height: 1.4; } #altrack-job-duties li::before, #altrack-job-qualifications li::before, #altrack-job-languages li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: #cc772c; } /* Duties and Requirements side by side instead of stacked. Collapses to one column on narrow screens. */ .altrack-vacancy-two-col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; } @media (max-width: 600px) { .altrack-vacancy-two-col { grid-template-columns: 1fr; } } /* Vacancy list as job cards, not a data table — title prominent, department/ location as small tags, date as a quiet meta line, and a "View & Apply" cue reinforcing that each row is clickable. */ .altrack-vacancy-empty { color: #54595f; text-align: center; padding: 20px 0; } .altrack-vacancy-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } .altrack-vacancy-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px solid rgba(0, 0, 0, 0.08); border-left: 4px solid #cc772c; border-radius: 8px; cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } .altrack-vacancy-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); transform: translateY(-2px); border-color: rgba(204, 119, 44, 0.5); } .altrack-vacancy-card-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: #54595f; } .altrack-vacancy-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: #8a8f96; } .altrack-vacancy-card-tag { background: rgba(204, 119, 44, 0.1); color: #cc772c; padding: 2px 10px; border-radius: 999px; font-weight: 600; } /* Posting date reads as metadata, not a category like department/city, so it gets a neutral grey pill instead of the orange tag color — same shape, visually quieter. The "Posted" label is in the text itself (careers.js), not a ::before, so it stays selectable/readable in plain text. */ .altrack-vacancy-card-date { background: rgba(0, 0, 0, 0.05); color: #8a8f96; padding: 2px 10px; border-radius: 999px; font-weight: 600; } .altrack-vacancy-card-cta { flex-shrink: 0; color: #cc772c; font-weight: 700; font-size: 14px; white-space: nowrap; } @media (max-width: 480px) { .altrack-vacancy-card { flex-direction: column; align-items: flex-start; } .altrack-vacancy-card-cta { align-self: flex-end; } } /* Site-wide `button` styling defaults every