/* =========================================================================== Phoenix - mobile layer --------------------------------------------------------------------------- Loaded last, and every rule lives inside the breakpoint below, so this file can only ever add to the phone/tablet experience - the desktop cascade is left untouched. Two jobs: 1. Strip the decorative motion (see scripts/mobile.js for the JS half). 2. Re-flow the desktop layout - which is built around full-viewport sections and multi-column rows - into a single readable column. The breakpoint matches Materialize's `hide-on-med-and-down` (992px) and window.PHOENIX_MOBILE_MAX_WIDTH in scripts/mobile.js. Change all three together, or a dead zone opens up where neither nav is visible. =========================================================================== */ @media only screen and (max-width: 992px) { /* ------------------------------------------------------------------- 1. Motion ------------------------------------------------------------------- Durations collapse to ~0 rather than `animation: none`, and that distinction matters: several elements are hidden by default and are revealed only by a `forwards` animation (.product-card, .nav-company_name, .landing-nav). Killing the animation outright would leave those permanently invisible; running it instantly lands them on their end state with no motion. Components that use opacity as a genuine open/closed state are left alone - stripping their transitions would make them pop rather than break, and the sidenav in particular reads far better with its slide. */ *:not(.sidenav):not(.sidenav-overlay):not(.modal):not(.modal-overlay):not(.dropdown-content):not(.chat-window):not(.chat-widget) { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* GSAP hides these in CSS and reveals them by writing inline styles. With GSAP switched off on mobile they would stay invisible, so force them back. !important earns its keep twice here: it beats the per-page inline