/* --------------------------------------------------------------------------- site-fixes.css — mobile layout corrections for the radanimal.co mirror. These are Elementor spacing values that read fine on desktop but break on a phone. They live here rather than in the page HTML so a rebuild from WordPress keeps them: build-from-source.py links this file into every page. EVERY RULE IS SCOPED TO max-width: 767px. Desktop and tablet are untouched. If any of these are later fixed properly in Elementor on WordPress, delete the matching block here — leaving both in place is harmless but confusing. Element ids are Elementor's own (.elementor-element-) and are stable as long as the widget isn't deleted and recreated in the editor. --------------------------------------------------------------------------- */ @media (max-width: 767px) { /* 1. "Explore Services" button sat directly against the Featured Projects card below it — the widget has padding-top: 30px and padding-bottom: 0, so the rounded card rode up over the button. */ .elementor-element-e72d2bd { padding-bottom: 44px !important; } /* 2. Footer "Venice, California" was pushed off-centre by a 75px left pad carried over from the desktop layout, and left-aligned while the links below it (Home / Work / Contact) are centred. */ .elementor-element-5350382 { padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; } .elementor-element-5350382 .elementor-heading-title { text-align: center !important; } /* 3. Bottom CTA ("Ready to create something unforgettable?") ran flush to the left edge of the orange panel — the heading measured a full 375px in a 375px viewport with zero horizontal padding. Padding goes on the column so the heading, body copy and button all shift together. */ .elementor-element-dbf71d0 { padding-left: 22px !important; padding-right: 22px !important; } /* 4. "Creative Impact" heading and its paragraph ran edge to edge in the light card. Same treatment, applied to the column that holds both. */ .elementor-element-00bd3a7 { padding-left: 22px !important; padding-right: 22px !important; } /* 5. Hero "View Work" button sat directly under the body copy with zero top padding on its widget. */ .elementor-element-6cada4b { padding-top: 26px !important; } /* 6. Footer logo began at 6936px and the text marquee above it ended at 6936px — literally no gap between them. */ .elementor-element-5931438 { padding-top: 34px !important; } /* 7. CONTENT VANISHING ON SCROLL. Elementor's entrance animations add "animated " to a widget when it scrolls into view. Those keyframes (fadeInUp and friends) START at opacity: 0. Scrolling up re-enters elements and re-triggers them, so content blinks out — sometimes leaving a white screen if several go at once. The previous build never did this because the broken capture had baked the "animated" classes into the markup already, so Elementor found them present and did nothing. Rebuilding from clean WordPress HTML restored the real behaviour, and the real behaviour is bad on a phone. So: on mobile only, entrance animations are neutralised and content is always visible. Desktop keeps its animations. Note this is a deliberate behaviour change, not just spacing — mobile no longer fades content in. transform is intentionally NOT reset here: the logo and text marquees are driven by GSAP transforms and resetting them would break both. */ .elementor-widget.animated, .elementor-element.animated, .elementor-invisible { animation: none !important; opacity: 1 !important; visibility: visible !important; } /* 8. WHITE / FROZEN CONTENT WHILE SCROLLING. .footer-svg holds an SVG carrying "vw-100 vh-100 position-fixed", i.e. a full-viewport fixed layer with preserveAspectRatio="none" stretching a path across the whole screen. A fixed, full-viewport SVG has to be re-composited on every scroll frame, and on iOS Safari that is a known cause of dropped paint tiles — the page goes white until something forces a repaint. Which is exactly why taking a screenshot "fixes" it: the screenshot IS a forced repaint. It is purely decorative (a wave shape behind the footer), so it is dropped on phones and kept on desktop. If the white persists after this, the layer was not the cause and this block can be removed without losing anything but the decoration. */ .footer-svg, .footer-svg svg.wave { display: none !important; } /* 9. YOUTUBE PLAYER CHROME ON BACKGROUND VIDEOS. Elementor already builds these iframes correctly — controls=0, rel=0, playsinline=1, pointer-events:none, inside an overflow:hidden box. On desktop no chrome appears. iOS ignores controls=0 and forces YouTube's own UI (title bar, pause button, "Watch on YouTube") onto every mobile embed, so parameters cannot fix it. The only remaining option is to crop it out: size the iframe to cover the container at 16:9, then scale up so the chrome — which sits in the top and bottom bands of the player — falls outside the visible area. TRADE-OFF: this crops roughly 20% off the edges of the video on phones. The subject stays centred, but if a shot is tightly framed it will be tighter still. Lower the 1.45 to crop less (chrome may peek back in) or raise it to crop more. Mobile only; desktop is untouched. */ .elementor-background-video-container { overflow: hidden !important; } .elementor-background-video-container iframe, iframe.elementor-background-video-embed { position: absolute !important; top: 50% !important; left: 50% !important; width: 177.78vh !important; /* 16:9 against viewport height */ height: 56.25vw !important; /* 16:9 against viewport width */ min-width: 100% !important; min-height: 100% !important; transform: translate(-50%, -50%) scale(1.45) !important; pointer-events: none !important; } }