/*! * Progressive-enhancement override for FAQ static pages * * Root-cause analysis (captured via Playwright deep-inspect): * * The uicore-upshift theme implements enter-animations not by setting opacity:0 * directly on elements, but by: * 1. Defining @keyframes uicoreFadeInDown / uicoreFadeIn etc. (0% opacity:0 -> 100% opacity:1) * 2. Binding the animation onto elements with animation-fill-mode:forwards * 3. **Defaulting animation-play-state: paused** -> elements stuck at 0% (opacity:0) * 4. JS (uicore-global.js) flips animation-play-state to running when element enters viewport * -> animation runs to 100% (opacity:1) * * With the JS removed, all paused animations never play -> navbar links / h1 / etc. stay invisible forever. * * Fix: force all animation-play-state to running so the CSS animation completes on its own. * Visual cost: enter-animations change from "scroll-triggered" to "all triggered at once on page load". * The 35 Q&A on FAQ sub-pages all fade-in simultaneously, no longer with staggered per-item delay. Acceptable. */ /* 1. Force-play any paused CSS animation */ *, *::before, *::after { animation-play-state: running !important; } /* 2. Fallback: explicitly override the opacity:0 rules that "wait for JS to add a class before showing" (uicore-navigation-wrapper .menu-item:not(.uicore-visible) etc.) */ .uicore-navigation-wrapper .uicore-menu-container ul .menu-item, .uicore-menu .menu-item, .menu-item { opacity: 1 !important; visibility: visible !important; } /* 3. Elementor invisible state (does not appear in FAQ HTML, left as future-proofing) */ .elementor-invisible, .elementor-hidden { opacity: 1 !important; visibility: visible !important; } /* 4. Mobile menu wrapper visibility — original uicore-global.js controlled this via inline style on the wrapper element. With the JS removed, the wrapper stays at opacity:0 / pointer-events:none / max-height:0 forever, leaving all navbar links 0x0 and the mobile site unnavigable. shrink.js now toggles the class .uicore-mobile-menu-wrapper-show on ; the rules below provide the actual show/hide effect. See vendor/uicore/shrink.js initMobileMenu() for the JS side. */ body.uicore-mobile-menu-wrapper-show .uicore-mobile-menu-wrapper { opacity: 1 !important; pointer-events: auto !important; max-height: 100vh !important; height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; transform: none !important; background-color: #0a0a0a !important; z-index: 100 !important; padding: 80px 24px 24px !important; } /* Menu items inside the open mobile menu — make them clearly visible and tappable */ body.uicore-mobile-menu-wrapper-show .uicore-mobile-menu-wrapper .menu-item a { color: #fff !important; font-size: 18px !important; padding: 12px 0 !important; display: block !important; } /* 5. Search overlay — uicore-global.js originally applied inline display:none on .uicore-wrapper.uicore-search and toggled it open via the navbar search icon. With the JS removed, the overlay defaults to visible and exposes a dead