/* ========================================================================== Sonic HQ — shared mobile layer -------------------------------------------------------------------------- Skin-agnostic, like style.music.css. It is enqueued AFTER all four skins (see inc/enqueue.php) and is never disabled by the skin switcher, so the rules here hold no matter which skin is active. Anything that is about *mechanics* (stacking, positioning, focus, tap targets) lives here; each skin keeps ownership of how things *look*. State classes (set by assets/js/theme.js): body.menu-open the hamburger panel is open; bar is pinned body.search-open the search sheet is open (on phones this is a sub-state of menu-open: the search icon only exists inside the open menu) #main-menu-admin.visible the search sheet itself Custom properties (written by theme.js on open / resize): --shq-bar-offset height of the WP admin bar still on screen, else 0 --shq-bar-h height of the nav bar --shq-menu-top bottom edge of the pinned bar = where panels start ========================================================================== */ @media screen and (max-width: 768px) { /* ---------------------------------------------------------------------- 1. Nothing between the viewport and the menu panel may become its containing block. #single-nav is `position: fixed`. If any ancestor carries a transform, filter, backdrop-filter, perspective, contain or will-change, the browser anchors the "fixed" panel to THAT ancestor instead of the viewport — and the bar's `overflow-x: clip` then cuts it off. That is exactly what happened in Checkers, whose bar has `filter: drop-shadow(...)`: the panel collapsed into the bar and the page painted over it. This net keeps any future skin from repeating it. ---------------------------------------------------------------------- */ .main-menu, .main-menu .menu-section, .main-menu .menu-section > .container, .main-menu .nav-mixed { transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; perspective: none !important; contain: none !important; will-change: auto !important; } /* ---------------------------------------------------------------------- 2. The pinned bar: below the WP admin bar, above everything else. The skins pin the bar at `top: 0`, which slides it UNDER the admin bar (z-index 99999) for logged-in users — covering the close button and the search icon. theme.js measures how much of the admin bar is still on screen and we start there instead. z-index clears the admin bar, the music slide-out menu (100000) and anything a plugin parks around the 1000–10000 range. ---------------------------------------------------------------------- */ body.menu-open .main-menu .menu-section { position: fixed; top: var(--shq-bar-offset, 0px); left: 0; right: 0; z-index: 100010; } /* Hold the bar's space in the flow while it is pinned, so the page behind the panel does not jump up (and back down on close), and scroll anchoring has nothing to "correct". */ body.menu-open .main-menu { min-height: var(--shq-bar-h, 0px); } /* The panel starts at the bar's measured bottom edge. */ .main-menu #single-nav { top: var(--shq-menu-top, 64px); } /* Logos that hang below the bar (Archive's is 85px tall) used to sit above the panel and cover the first menu item. While the menu is open drop the logo under the panel; the part inside the bar is untouched because the panel never overlaps the bar. */ body.menu-open .main-menu .main-logo { z-index: 80; } /* ---------------------------------------------------------------------- 3. Search sheet. On desktop the search panel slides down out of the bar on hover. On phones it used to do the same — but at z-index 100, underneath the bar (1000) and the open menu panel, so tapping the icon appeared to do nothing. Here #main-menu-admin becomes a fixed overlay that starts under the pinned bar: the dim area is a tap-to-close scrim, the skin-styled .menu-section-admin sits at its top edge. ---------------------------------------------------------------------- */ #main-menu-admin.hidden-up { position: fixed; top: var(--shq-menu-top, 64px); left: 0; right: 0; bottom: 0; /* Above the pinned bar's stacking context so a logo hanging below the bar (Archive) cannot sit on the field. The sheet starts at the bar's bottom edge, so the bar itself is never covered; the theme flyout and the sheet close each other (theme.js). */ z-index: 100020; transform: none; opacity: 0; visibility: hidden; pointer-events: none; overflow-y: auto; overscroll-behavior: contain; background-color: rgba(0, 0, 0, 0.55); transition: opacity 180ms ease, visibility 180ms; } #main-menu-admin.hidden-up.visible { transform: none; opacity: 1; visibility: visible; pointer-events: auto; /* Flip visibility instantly on open (the fade still runs on opacity). Transitioning it would leave the field `hidden` for the first frame, and focus() — which must run inside the tap for iOS to raise the keyboard — silently fails on a hidden input. */ transition: opacity 180ms ease, visibility 0s; } #main-menu-admin .menu-section-admin { position: relative; top: 0; transform: translateY(-12px); transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } #main-menu-admin.visible .menu-section-admin { transform: none; } /* The sheet takes over from the menu list while it is open. The panel itself is hidden too so the sheet's own scrim is the only backdrop. */ body.search-open .main-menu #single-nav, body.search-open .main-menu #single-nav.menu-appear { opacity: 0; visibility: hidden; pointer-events: none; } /* The search widget prints as a bare
  • ; drop its list bullet. */ #main-menu-admin .widget { list-style: none; } /* Show which tool is active. */ body.search-open #social-menu-mixed #search a { color: var(--shq_gold, #ffe800) !important; } /* iOS zooms the whole page when a focused field is under 16px. */ #main-menu-admin .search-field, #musicsearch { font-size: 16px; } #main-menu-admin .search-field { min-height: 44px; /* Archive gives the field `transition: all`, which also animates the visibility it inherits from the sheet — leaving it unfocusable for the first 300ms. Keep the look-and-feel transitions only. */ transition-property: border-color, background-color, box-shadow, color; } /* ---------------------------------------------------------------------- 4. Touch ergonomics. ---------------------------------------------------------------------- */ .main-menu .navbar-toggler, #music-bar-toggler, #social-menu-mixed li a, #social-menu-mixed .theme-switch-toggle { min-width: 44px; min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .main-menu .navbar-toggler { display: inline-flex; align-items: center; justify-content: center; } /* ---------------------------------------------------------------------- 5. Horizontal overflow. .h1-bg:before is a 300px shadow placed 50px in, which ran ~6px past the edge on 360px phones and let the whole page wiggle sideways. `clip` (not `hidden`) trims only the x-axis and creates no scroll container, so the art can still rise above the heading. ---------------------------------------------------------------------- */ .h1-bg { overflow-x: clip; } .dmbs-post-content img, .dmbs-post-content video, .dmbs-post-content iframe, .dmbs-post-content embed { max-width: 100%; } .dmbs-post-content img, .dmbs-post-content video { height: auto; } } /* Bootstrap tooltips are hover UI. On touch screens they only linger after a tap — and on iOS, a tooltip appearing on the emulated hover can swallow the first tap entirely. theme.js no longer initialises them there; this covers any other script (parent theme, plugins) that still does. */ @media (hover: none) { .tooltip { display: none !important; } } @media (prefers-reduced-motion: reduce) { #main-menu-admin.hidden-up, #main-menu-admin .menu-section-admin { transition: none; } }