/* Bug 3: prevent video/icon-list overlap on testimonial cards (tablet/mobile) */ /* ROOT CAUSE (verified via headless render + source inspection): Markup (see public/_lift/proof/index.html, also public/_lift/agencies/index.html, public/_lift/about/index.html): each testimonial card is a flex-column container (`.e-con-full.e-flex.e-con.e-child`) whose children, in DOM order, are: .elementor-widget-video > .elementor-wrapper.elementor-open-inline > .elementor-video (empty) + .elementor-custom-embed-image-overlay (play button) .elementor-widget-heading .elementor-widget-text-editor .elementor-widget-icon-list (the checkmark bullet list) The video's reserved height comes entirely from: .elementor-widget-video .elementor-wrapper{aspect-ratio:var(--video-aspect-ratio)} (public/_lift/assets/e3bea7d261700c68.css) and the actual numeric value is only supplied by a PER-INSTANCE, PER-PAGE rule generated in a separate, later-loaded stylesheet, e.g. .elementor-635 .elementor-element.elementor-element-4f673b8 .elementor-wrapper{ --video-aspect-ratio:1.77777; } (public/_lift/assets/55bbce97b295eb2a.css, loaded AFTER widget-video-css in ). The play-button overlay itself is positioned: .elementor-widget-video .elementor-open-inline .elementor-custom-embed-image-overlay{ position:absolute; inset:0; } which is taken out of flow, so the wrapper's box (and therefore the space reserved before the following heading/text/icon-list) depends 100% on the `aspect-ratio` custom property resolving to a real number. If that per-instance --video-aspect-ratio custom property is not yet resolved when the card is first painted/reflowed (slow network, delayed/blocked stylesheet, or any CSS-var timing edge case) `aspect-ratio` falls back to `auto`. Because the wrapper's only in-flow child is the empty `.elementor-video` div (0 height) and the overlay is position:absolute (out of flow), the wrapper collapses to ~0 height. The heading, paragraph and icon-list then render immediately below the collapsed wrapper - visually landing on top of / colliding with the still-rendering video thumbnail and play button, which is the reported overlap on tablet/mobile. This is worse on tablet/mobile because these viewports are precisely where this stylesheet is most likely to be constrained (data saver, slower connections, viewport-triggered relayout). FIX: reinforce the aspect-ratio (with a safe numeric fallback so the box is reserved even if the per-instance --video-aspect-ratio var is unavailable), explicitly contain the absolutely-positioned play overlay, and add defensive spacing between the video and the icon-list that follows it. Scoped strictly to `.elementor-widget-video .elementor-wrapper.elementor-open-inline` (testimonial-style inline-play videos) and to icon-lists that are a sibling of a video widget inside the same flex card, so autoplay/background video widgets elsewhere (e.g. homepage hero) are untouched. */ /* Always reserve a real box for the inline-play video wrapper, with a 16:9 fallback in case the per-instance --video-aspect-ratio custom property has not resolved yet. */ .elementor-widget-video .elementor-wrapper.elementor-open-inline { position: relative; aspect-ratio: var(--video-aspect-ratio, 1.77778) !important; } /* Keep the absolutely-positioned play overlay contained to that reserved box (defensive; .elementor-widget is already position:relative in the base CSS, this just guarantees the nearer, more specific ancestor is also positioned so inset:0 can never escape it). */ .elementor-widget-video .elementor-open-inline .elementor-custom-embed-image-overlay { position: absolute; inset: 0; } /* Add breathing room between the video/heading/text block and the checkmark icon-list that follows it in the same testimonial card, at tablet and mobile widths where the collision was reported. */ @media (max-width: 1024px) { .elementor-widget-video ~ .elementor-widget-icon-list { margin-top: 16px; } } @media (max-width: 767px) { .elementor-widget-video ~ .elementor-widget-icon-list { margin-top: 20px; position: relative; z-index: 1; } } /* hire-* pages: sticky profile image overlaps heading/numbered-list text at mobile widths */ /* ROOT CAUSE (measured live via getComputedStyle + a full-page scrollY sweep, Pixel 7 device profile, /hire-media-buyer/ - image widget data-id="7608ddb8"): The lifted static HTML has `elementor-sticky--active elementor-sticky--effects` FROZEN into the image widget's class list at lift time (public/_lift/hire-media-buyer/index.html) - nothing at runtime removes those classes on phones, even though the widget's own `data-settings` says `sticky_on:["desktop","tablet"]` (Elementor's sticky JS evidently never re-evaluates/deactivates this in the lift). Those frozen classes drive the widget's INLINE style attribute to literally read `style="position: fixed; ... top: 90px;"` - and it stays EXACTLY there: measured getComputedStyle().position === "fixed" and an identical boundingClientRect (top:90, bottom:675) at every single step of a scrollY sweep from 0 to 16800px in 400px increments - i.e. genuine viewport-pinned position:fixed, not a JS-computed offset that tracks or "walks" anything as the page scrolls. (An earlier version of this comment additionally speculated the mechanism might instead be position:relative with a JS-driven top offset that moves the element down its parent as you scroll - that was checked directly against the same measurement and DISPROVEN: the rect truly never changes across the whole sweep. It's plain position:fixed.) Because the real page content scrolls normally underneath it, the fixed image visually rides over whatever heading/text has scrolled into its footprint - invisible at scrollY=0 (where it happens to still be aligned with its own column) and dramatic once scrolled, which is exactly the mid-scroll screenshot that was originally reported. Reproduced visually during this fix's verification: at scrollY=4000 on /hire-media-buyer/ (fix disabled), the oval photo renders pinned in place directly over the "Negotiating"/"Optimizing" headings and their body text while the page scrolls underneath it. RULE ABLATION (route-interception, Playwright, Pixel 7, /hire-media-buyer/, scrollY swept in 250px steps over the full page, worst-case VISIBLE overlap area only - i.e. both boxes filtered to `rect.bottom>0 && rect.top Do?" section is also an Elementor container row: .elementor-element-.e-flex.e-con-boxed.e-con.e-parent > .e-con-inner > .elementor-element-.e-con-full.e-flex.e-con.e-child (image column) > .elementor-element-.elementor-widget-image.elementor-sticky > .elementor-element-.e-con-full.e-flex.e-con.e-child (text column: heading + intro paragraph + a stack of nested e-con-full blocks, each a numbered sub-heading/paragraph pair) (hashed /// class suffixes differ per page, e.g. elementor-element-2d2f16f7 on hire-an-assistant vs elementor-element-203b273f on hire-media-buyer - see below for why selectors can't use them.) Elementor lays out the row via a CSS custom property, not a literal flex-direction: .e-con-full.e-flex,.e-con.e-flex>.e-con-inner{flex-direction:var(--flex-direction)} (public/_lift/assets/14173854cfc4b04b.css), defaulting every .e-con.e-flex element to `.e-con.e-flex{--flex-direction:column;...}` at low specificity, but the per-page stylesheet overrides --flex-direction to "row" for the row wrapper ONLY, at top level with no media query. `.e-con-inner` has no classes/rule of its own for --flex-direction, so it simply inherits "row" from the row wrapper at every viewport, including phone widths - never reset to column inside a `@media(max-width:767px)` block. BUT: the base lift CSS separately carries `@media(max-width:767px){.e-con.e-flex{--width:100%;--flex-wrap:var(--flex-wrap-mobile)}}` and every observed per-page row sets `--flex-wrap-mobile:wrap` on itself, which `.e-con-inner` also inherits, so at <=767px both columns already get forced to 100% width and wrap onto separate lines regardless of flex-direction - masking this gap today. Left undeployed as CSS (no rule added for it below) precisely because the ablation table above showed it makes zero measurable difference to the actual bug either way; if a future hire-* page ever ships without `--flex-wrap-mobile:wrap` on its row, this gap could become a real side-by-side collision and would need `.e-con-boxed.e-con.e-parent:has(.elementor-widget-image.elementor-sticky){--flex-direction:column}` (exactly the rule that used to live here) reintroduced at that point. WHY selectors below use only stable classes: every hire-* page reuses this row/column/ widget pattern but with a DIFFERENT hashed element id and a different `.elementor-NNNN` page-scope class per page (confirmed differing ids across hire-an-assistant, hire-media-buyer, hire-a-frontend-developer). There is no shared hashed class to hook into across all 33 pages, only the generic structural classes (.e-con-boxed.e-con.e-parent, .e-con-inner, .e-con-full, .elementor-widget-image, .elementor-sticky) that Elementor emits identically everywhere. VERIFIED (post-simplification): Playwright, all 33 hire-* pages, 375x800 and 575x900, viewport-filtered overlap detector - 0px^2 at rest and across a full scrollY sweep on hire-media-buyer. 1440x900 desktop unchanged (columns still side-by-side, image still sticky on scroll - sticky_on legitimately includes desktop/tablet and this fix is scoped to <=767px only). Header spacer unaffected (~94-100px reserved, `main` starts at the same offset - see the spacer rule's own comment for that regression's story). The `elementor-hidden-mobile` mobile-only-image variant present on some sections (e.g. hire-an-assistant's elementor-element-1a36db73) stays correctly hidden now that the rule that used to re-show it has been removed entirely. */ @media (max-width: 767px) { /* THE FIX (does all of the real work - ablation-confirmed: position:static alone eliminates the overlap, 0px^2 worst-case across a full-page scroll sweep; see the ablation table above). Stops the sticky image widget from being position:fixed at phone widths at all, so it has nothing to ride over the text with regardless of scroll position or the frozen --active/--effects classes described above. max-width/margin are COSMETIC ONLY - ablation-confirmed they do NOT fix the overlap by themselves (max-width/ margin alone, without position:static, still leaves 85,680px^2 worst-case, barely better than doing nothing) - they only shrink/center what would otherwise be an oversized full-width oval photo once it's back in normal flow. */ .elementor-widget-image.elementor-sticky { position: static !important; /* !important on max-width/margin too: the base lift CSS already carries a higher-specificity `.elementor.elementor .e-con>.elementor-widget{max-width:100%}` rule (public/_lift/assets/14173854cfc4b04b.css) that otherwise wins the cascade and silently no-ops a plain max-width/margin override here. */ max-width: min(240px, 60vw) !important; margin: 0 auto 20px !important; } .elementor-widget-image.elementor-sticky.elementor-sticky--active, .elementor-widget-image.elementor-sticky.elementor-sticky--effects { position: static !important; top: auto !important; width: auto !important; } /* Hide ONLY the image widget's spacer clone, NOT `.elementor-sticky__spacer` in general. Elementor renders a second, invisibility:hidden "spacer" copy of every sticky element right after the live one, carrying the SAME classes plus `elementor-sticky__spacer`, whose only job is to reserve in-flow space for the live copy's position:fixed removal from flow. The site HEADER (elementor-element-4c70a63, a `.e-con-boxed.e-con.e-parent`, not an image widget) has its own such spacer, and it is NOT redundant: measured live at 375x800 and at the Pixel 7 device profile (412x839) on hire-media-buyer, the header genuinely stays `position:fixed` + `elementor-sticky--active` at mobile widths (its own `sticky_on:["desktop","tablet"]` notwithstanding - same discrepancy as the image widget above), so its spacer's ~94-102px reserved height is exactly what keeps `

` starting right below the fixed header instead of underneath it. Confirmed: WITHOUT any spacer rule, header spacer height == 94.14px and `main` top == 94.14px (no gap, no jump) - the correct baseline. An earlier, unscoped version of this rule (`.elementor-sticky__spacer{display:none}`) matched the header's spacer too, collapsing it to 0 height and pulling `main`'s top up to 0 - i.e. the first ~94px of real page content rendered hidden behind/under the fixed header. Scoping to `.elementor-widget-image.elementor-sticky__spacer` hides only the (now redundant, since the live image above is forced back to position:static) image-widget spacer - confirmed its own live/spacer pair on hire-media-buyer (data-id 7608ddb8) still ends up static/in-flow (334.5px, real content) + display:none/0-height (spacer) respectively, with zero residual gap - while leaving the header's spacer, and therefore its reserved space, completely untouched. */ .elementor-widget-image.elementor-sticky__spacer { display: none !important; } } /* Bug 5: eicons font was not lifted -> .elementor-message:before renders a broken tofu box. The lifted Elementor CSS still applies `content:"\e90e"; font-family:eicons` to `.elementor-message:before` (newsletter success/error message), but no @font-face for `eicons` exists anywhere in the lift, so the private-use glyph U+E90E renders as a missing-glyph box in front of "Thanks for signing up!" (and the error message). Suppress the pseudo-element icon; the message text itself is unaffected. */ .elementor-message:before, .elementor-message.elementor-message-success:before, .elementor-message.elementor-message-danger:before { content: none !important; }