/* Al Athar — mobile menu (v10, portalized) Desktop unchanged. On small screens, the menu panel is rendered at top level. */ /* ---------- Desktop (>=1025px) ---------- */ @media (min-width: 1025px) { .menu-toggle { display: none !important; } .menu-backdrop { display: none !important; } body.is-menu-open { overflow: auto !important; } } /* ---------- Mobile & Tablets (<=1024px) ---------- */ @media (max-width: 1024px) { .menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; background: #fff; border: 1px solid #E3E6EE; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); color: #0A0E5A; -webkit-tap-highlight-color: transparent; z-index: 10002; } .menu-toggle svg { pointer-events: none; } /* Hide in-flow nav on small screens (we show the floating copy instead) */ header .site-menu { display: none !important; } /* Backdrop under panel */ .menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.28); backdrop-filter: blur(1px); opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 10000; } body.is-menu-open .menu-backdrop { opacity: 1; pointer-events: auto; } /* Floating panel (portal) — this nav element is appended to while open */ .floating-menu { display: block !important; position: fixed; top: 64px; /* below header */ right: 12px; left: auto; width: min(78vw, 320px); background: #fff; border: 1px solid #E6E8F3; border-radius: 12px; box-shadow: 0 12px 36px rgba(10,14,90,.10); padding: 6px 0; z-index: 10001; /* above backdrop, below the button */ pointer-events: auto; } .floating-menu a { display: block; padding: 12px 16px; color: #0A0E5A; text-decoration: none; font-weight: 500; line-height: 1.2; } .floating-menu a + a { border-top: 1px solid #F0F2F7; } .floating-menu a:hover { background: #F7F9FF; } body.is-menu-open { overflow: hidden; } }