/* ════════════════════════════════════════════════════════════════════════════ QwikGlam — APP SHELL (WEB-1) File: assets/css/qg-app-shell.css Loads LAST. One authoritative answer to "what is the chrome on this device?" ════════════════════════════════════════════════════════════════════════════ WHAT THIS FIXES, MEASURED ON THE LIVE SITE AT 375px --------------------------------------------------- Seven public pages, three different mobile behaviours, because every template decided the shell for itself and none of them agreed: page header footer bottom nav body pad-bottom / none ok 2121px BAD block ok — /services/ none ok 1852px BAD block ok 0px BAD /our-artists/ none ok none ok none BAD 0px /about/ flex BAD 1946px BAD block ok 68px ok /contact/ flex BAD 1946px BAD block ok 68px ok /download/ none ok none ok none BAD 0px /terms/ flex BAD 1946px BAD block ok 68px ok Read the columns, not the rows — every one of them disagrees with itself somewhere. Concretely, on a phone today: • /about/, /contact/ and /terms/ render the DESKTOP HEADER, which is the one piece of chrome a phone is not supposed to have; • five of seven render a ~1,900–2,100px desktop footer, which on a phone is three screens of link columns nobody scrolls to; • /our-artists/ and /download/ render NO bottom nav, so a phone that lands there has no navigation at all — the page is a dead end; • /services/ reserves NO space for the nav it does show, so the last 68px of the page sits underneath it. None of that is a per-page bug. It is the absence of a shell. Fixing it in 34 templates would mean 34 chances to disagree again, so it is fixed once, here. THE RULE -------- ≤ 767px PHONE → no header, no footer, bottom nav always, safe areas. The brief: "in mobile header and footer not required, design should be like native mobile app experience." 768–1023 TABLET → keeps header and footer. A 768px iPad has the room for them, and stripping a tablet down to phone chrome wastes half the screen. It keeps the bottom nav too, which the theme already shows below 1100px. ≥ 1024px DESKTOP → untouched. Nothing here applies. If you want iPad on the phone shell instead, raise --qg-shell-phone-max to 1023px in the media queries below — it is the only number that decides it. SPECIFICITY: `html body` prefixes and !important, matching the idiom footer-qwikglam.php already uses. This file has to beat per-page rules that are themselves !important (page-our-artists.php line 193, for one), and it loads last precisely so it can. If LiteSpeed's CSS-combine reorders it, add it to Page Optimization → CSS → "CSS Combine Exclude" — do NOT re-add a render-blocking bypass, which is the trade functions.php already considered and rejected. ════════════════════════════════════════════════════════════════════════════ */ :root { /* Height of the fixed bottom nav. Everything that reserves space reads this, so the nav's height is stated once rather than hard-coded as 68px in a dozen templates that then drift apart. */ --qg-appbar-h: 68px; --qg-safe-b: env(safe-area-inset-bottom, 0px); --qg-safe-t: env(safe-area-inset-top, 0px); } /* ──────────────────────────────────────────────────────────────────────────── 1 · UNIVERSAL — every device ──────────────────────────────────────────────────────────────────────────── */ /* A horizontal scrollbar on a phone is never intentional. This makes the page itself unable to scroll sideways; section 4 gives the genuinely wide things (carousels, tickers, price rows) their own scroller so they still work. */ /* clip, not hidden — hidden on html+body turns into a nested scroll container and the page stops scrolling properly (see qg-global.css). */ html, body { max-width: 100%; overflow-x: clip; } @supports not (overflow: clip) { html { overflow-x: visible; } body { overflow-x: hidden; } } /* iOS inflates font sizes in landscape unless told not to, which silently breaks any layout tuned in portrait. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Media must never be the thing that widens a page. */ img, video, canvas, svg, iframe { max-width: 100%; } img, video { height: auto; } /* Tables and 
 are the two elements that ignore their container by default. */
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* Long unbroken strings — a pasted URL, a booking ref, an email — otherwise
   push the whole layout wide on a 375px screen. */
h1, h2, h3, h4, p, li, a, span, td { overflow-wrap: anywhere; }

/* ────────────────────────────────────────────────────────────────────────────
   2 · PHONE APP SHELL  (≤767px)
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── 2a. No header. ──────────────────────────────────────────────────────
     Three pages render it today and four do not. A native app does not have a
     desktop site header, and the brief says so outright. */
  html body header.qg-header,
  html body .qg-header,
  html body .qg-header-wrap,
  html body #qgHeader,
  html body .qg-announcement,
  html body .qg-ann,
  html body .qg-topbar { display: none !important; }

  /* ── 2b. No footer — but the