/* ========================================================================== fouc-prevention.css — 3-path FOUC Prevention Part of Mosaiq Studio Mobile Responsive Hardening Load order: 4th (after hamburger.css / more-overflow.css, before JS) ========================================================================== 3-PATH PREVENTION STRATEGY ────────────────────────── Path 1 — CSS hidden (this file): Elements that require JS are display:none by default. The page loads cleanly with no "dead" interactive elements. Path 2 — noscript fallback: A

that overrides the CSS hiding. This activates ONLY when JavaScript is fully disabled. Path 3 — JS data-responsive-viewport signal: viewport-manager.js sets data-responsive-viewport="STATE" on <html> once it initialises. This file uses that attribute selector to restore the elements to their natural display state — confirming that JavaScript is running and the UI is functional. RATIONALE FOR !important ──────────────────────── The hiding rules use !important because they must defeat ALL other CSS declarations (including other responsive files) until JavaScript confirms it is active. Once data-responsive-viewport is present, the reveal rules also use !important to ensure the override is cleanly removed regardless of CSS cascade order. ========================================================================== */ /* ═══════════════════════════════════════════════════════════════════════════ PATH 1 — Default hidden state (no JS confirmed) ═══════════════════════════════════════════════════════════════════════════ */ /* Hamburger toggle button + more-overflow trigger — hidden until JS loads. This prevents the user from seeing a button that does nothing when JavaScript has not yet initialised the state machine / event handlers. */ .hamburger__button, .more-overflow__button { display: none !important; } /* Hamburger drawer panel + overlay backdrop — hidden by default to prevent a flash of the off-screen drawer before JS positions and controls it. The drawer is revealed (via display restore) only when JS is confirmed. */ .hamburger__drawer, .hamburger__overlay { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ PATH 2 — noscript fallback template (documentation only) ═══════════════════════════════════════════════════════════════════════════ The template engine (Django base.html) should include: <noscript> <style> .hamburger__button, .more-overflow__button { display: flex !important; } .hamburger__drawer { display: block; } .hamburger__overlay { display: block; }

This file documents the required noscript inline style. The actual