/* ========================================================= mobile-fix.css — WaLet Academy ---------------------------------------------------------- Stable hero (Revolution Slider) on mobile / tablet. Prevents height recalculation & jittering in WebView browsers (Instagram, Telegram, Facebook In-App Browser). Desktop is NOT affected. ---------------------------------------------------------- How to connect: Place AFTER custom.css in . ========================================================= */ /* ====== Slider font fix (global, not just mobile) ======== */ /* RevSlider layers use inline font-family: Montserrat; */ /* Override to match the rest of the site (Inter). */ .tp-caption, .tp-caption.rev-btn, .tp-caption a, .rev_slider .tp-caption { font-family: 'Inter', sans-serif !important; } /* ---------------------------------------------------------- CSS custom property --walet-vh is set by mobile-fix.js on page load. It captures the INITIAL viewport height in pixels so that subsequent address-bar show/hide events in mobile WebView do NOT resize the hero. Fallback chain: var → 100svh → 100vh ---------------------------------------------------------- */ /* ====== Tablet & Mobile (≤ 1024 px) ====================== */ @media (max-width: 1024px) { /* --- wrapper ------------------------------------------- */ #rev_slider_1_1_wrapper, .rev_slider_wrapper.fullscreen-container { height: var(--walet-vh, 100svh) !important; min-height: var(--walet-vh, 100svh) !important; max-height: var(--walet-vh, 100svh) !important; overflow: hidden !important; transition: none !important; } /* --- slider itself ------------------------------------- */ #rev_slider_1_1, .rev_slider.fullscreenbanner { height: var(--walet-vh, 100svh) !important; min-height: var(--walet-vh, 100svh) !important; max-height: var(--walet-vh, 100svh) !important; overflow: hidden !important; transition: none !important; } /* --- kill ALL transitions inside the slider ------------ */ #rev_slider_1_1_wrapper *, .rev_slider_wrapper.fullscreen-container * { transition: none !important; } /* --- tp-fullwidth-forcer (RevSlider ghost spacer) ------ */ .tp-fullwidth-forcer { height: var(--walet-vh, 100svh) !important; min-height: var(--walet-vh, 100svh) !important; max-height: var(--walet-vh, 100svh) !important; } } /* ====== Phone only (≤ 767 px) ============================ */ @media (max-width: 767px) { #rev_slider_1_1_wrapper, #rev_slider_1_1, .rev_slider_wrapper.fullscreen-container, .rev_slider.fullscreenbanner { height: var(--walet-vh, 100svh) !important; min-height: var(--walet-vh, 100svh) !important; max-height: var(--walet-vh, 100svh) !important; overflow: hidden !important; } } /* ====== @supports fallback for older WebViews ============ */ /* Some older In-App browsers don't support svh units */ @supports not (height: 100svh) { @media (max-width: 1024px) { #rev_slider_1_1_wrapper, .rev_slider_wrapper.fullscreen-container, #rev_slider_1_1, .rev_slider.fullscreenbanner, .tp-fullwidth-forcer { height: var(--walet-vh, 100vh) !important; min-height: var(--walet-vh, 100vh) !important; max-height: var(--walet-vh, 100vh) !important; } } }