/* ============================================================= WOVEN IMPEX — MOBILE POPUP MENU This file only affects screens ≤ 860px. The popup (#mob-popup) lives directly in so it has zero stacking-context conflict with the fixed header. ============================================================= */ /* Hide on desktop — nothing in this file touches desktop layout */ #mob-popup { display: none; } @media (max-width: 860px) { /* Lock scroll while popup is open */ body.mp-open { overflow: hidden; } /* ── Popup card ── */ #mob-popup { display: flex; flex-direction: column; align-items: stretch; gap: 10px; /* Fixed position at body level — no header stacking context */ position: fixed; top: 88px; /* sits just below the navbar */ left: 14px; right: 14px; z-index: 999999; /* above absolutely everything */ padding: 18px 16px 22px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(2, 27, 51, 0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); /* Hidden by default */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px) scale(0.98); transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease; } /* Open state */ body.mp-open #mob-popup { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } /* ── Each nav link ── */ #mob-popup .mp-link { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 20px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.06); color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; text-align: center; transition: background 0.18s, color 0.18s, border-color 0.18s; -webkit-tap-highlight-color: transparent; } /* Current page highlight */ #mob-popup .mp-link.mp-active { background: rgba(119, 219, 197, 0.15); border-color: rgba(119, 219, 197, 0.40); color: #77dbc5; } /* Tap / hover */ #mob-popup .mp-link:hover, #mob-popup .mp-link:active { background: linear-gradient(135deg, #73c049, #77dbc5); color: #031722; border-color: transparent; } /* ── Request a Quote CTA ── */ #mob-popup .mp-cta { margin-top: 6px; background: linear-gradient(135deg, #2b9b7d, #1a7fa8); border-color: transparent; color: #ffffff; font-size: 14px; letter-spacing: 0.07em; text-transform: uppercase; } #mob-popup .mp-cta:hover, #mob-popup .mp-cta:active { background: linear-gradient(135deg, #73c049, #77dbc5); color: #031722; } }