/* * Sud East Luxury Travel — Responsive & Mobile Navigation * ───────────────────────────────────────────────────────────────────────────── * Loaded after style.css. Contains: * • Fullscreen mobile menu overlay (#mobile-menu) * • Body scroll-lock + floating-widget hiding (WhatsApp, back-to-top) * • Mobile breakpoint rules (≤768px) * • Reduced-motion overrides * * Desktop nav lives in style.css. This file only adds the mobile layer. */ /* ============================================================================= FULLSCREEN MOBILE MENU OVERLAY ───────────────────────────────────────────────────────────────────────────── Completely separate DOM element from the desktop nav. Lives directly in , outside the header entirely. z-index: 9999 — above everything including sticky header (z:100), plugins. Open: .is-open added by JS → translateX(0) + visibility:visible Close: .is-open removed → translateX(100%) + visibility:hidden (delayed) ============================================================================= */ #mobile-menu { /* Geometry */ position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; /* iOS Safari dynamic viewport */ /* Stacking */ z-index: 9999; /* Layout: links vertically centered */ display: flex; flex-direction: column; /* Visual: dark, premium travel feel */ background: linear-gradient(155deg, #1a1209 0%, var(--color-charcoal-mid) 50%, #3a1f08 100%); /* Closed state */ transform: translateX(100%); visibility: hidden; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.4s; overflow: hidden; } #mobile-menu.is-open { transform: translateX(0); visibility: visible; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } /* Ambient glow spots */ #mobile-menu::before { content: ''; position: absolute; top: -15%; right: -5%; width: 55vw; height: 55vw; background: radial-gradient(circle, rgba(200, 133, 58, 0.2) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } #mobile-menu::after { content: ''; position: absolute; bottom: -10%; left: -5%; width: 45vw; height: 45vw; background: radial-gradient(circle, rgba(200, 133, 58, 0.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } /* ── Mobile menu header bar (logo + X) ──────────────────────────────────── */ .mobile-menu__bar { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; flex-shrink: 0; position: relative; z-index: 1; } .mobile-menu__brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; } .mobile-menu__brand-mark { width: 36px; height: 36px; background: var(--color-amber); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--color-white); flex-shrink: 0; } .mobile-menu__brand-text { display: flex; flex-direction: column; line-height: 1.1; } .mobile-menu__brand-name { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--color-white); letter-spacing: -0.01em; } .mobile-menu__brand-tag { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } /* Close (X) button */ .mobile-menu__close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; cursor: pointer; color: var(--color-white); transition: background var(--transition-base), transform var(--transition-base); flex-shrink: 0; } .mobile-menu__close:hover, .mobile-menu__close:focus-visible { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); outline: none; } /* ── Mobile nav links ──────────────────────────────────────────────────── */ .mobile-menu__nav { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 1.75rem; position: relative; z-index: 1; } .mobile-menu__list, .mobile-menu__nav > ul { list-style: none; margin: 0; padding: 0; } .mobile-menu__list > li, .mobile-menu__nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; } .mobile-menu__list > li:last-child { border-bottom: none; } .mobile-menu__list > li > a, .mobile-menu__nav > ul > li > a { display: block; padding: 1rem 0; font-family: var(--font-display); font-size: clamp(1.5rem, 5.5vw, 2.1rem); font-weight: 600; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.01em; transition: color var(--transition-base), letter-spacing var(--transition-base), padding-left var(--transition-base); -webkit-tap-highlight-color: transparent; } .mobile-menu__list > li > a:hover, .mobile-menu__list > li > a:focus-visible, .mobile-menu__list > li.current-menu-item > a { color: var(--color-amber-light); padding-left: 0.5rem; outline: none; } /* ── Mobile submenu accordions (dropdown parents) ─────────────────────────── */ .mobile-menu__list .menu-item-has-children > a::after { content: '+'; float: right; font-weight: 400; color: rgba(255, 255, 255, 0.4); transition: transform var(--transition-base); } .mobile-menu__list .menu-item-has-children.is-expanded > a::after { content: '–'; } .mobile-menu__list .sub-menu { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .mobile-menu__list .menu-item-has-children.is-expanded > .sub-menu { max-height: 60vh; } .mobile-menu__list .sub-menu a { display: block; padding: 0.6rem 0 0.6rem 1rem; font-family: var(--font-body); font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, 0.6); transition: color var(--transition-base); } .mobile-menu__list .sub-menu a:hover { color: var(--color-amber-light); } /* ── Link stagger animation ─────────────────────────────────────────────── */ #mobile-menu.is-animating .mobile-menu__list > li { opacity: 0; transform: translateX(24px); animation: mobileNavIn 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } #mobile-menu.is-animating .mobile-menu__list > li:nth-child(1) { animation-delay: 0.08s; } #mobile-menu.is-animating .mobile-menu__list > li:nth-child(2) { animation-delay: 0.14s; } #mobile-menu.is-animating .mobile-menu__list > li:nth-child(3) { animation-delay: 0.20s; } #mobile-menu.is-animating .mobile-menu__list > li:nth-child(4) { animation-delay: 0.26s; } #mobile-menu.is-animating .mobile-menu__list > li:nth-child(5) { animation-delay: 0.32s; } #mobile-menu.is-animating .mobile-menu__list > li:nth-child(6) { animation-delay: 0.38s; } #mobile-menu.is-animating .mobile-menu__list > li:nth-child(7) { animation-delay: 0.44s; } #mobile-menu.is-animating .mobile-menu__list > li:nth-child(8) { animation-delay: 0.50s; } @keyframes mobileNavIn { to { opacity: 1; transform: translateX(0); } } /* ── Mobile menu footer (CTA + contact) ─────────────────────────────────── */ .mobile-menu__footer { padding: 1.5rem 1.75rem 2rem; flex-shrink: 0; position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, 0.1); } .mobile-menu__cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0.875rem 1.5rem; background: var(--color-amber); color: var(--color-white); font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius-sm); transition: background var(--transition-base); text-decoration: none; } .mobile-menu__cta:hover { background: var(--color-amber-light); } .mobile-menu__contact { display: flex; gap: 1.5rem; margin-top: 1rem; } .mobile-menu__contact a { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); transition: color var(--transition-base); text-decoration: none; } .mobile-menu__contact a:hover { color: rgba(255, 255, 255, 0.75); } /* ── Decorative Tifinagh — purely visual, hidden from AT ─────────────────── */ .mobile-menu__watermark { position: absolute; bottom: 1.25rem; right: 1.5rem; font-size: 0.75rem; letter-spacing: 0.35em; color: rgba(255, 255, 255, 0.07); pointer-events: none; user-select: none; z-index: 0; } /* ── Body scroll lock + hide floating widgets ────────────────────────────── */ body.nav-is-open { position: fixed; overflow-y: scroll; width: 100%; } /* Hide every known WhatsApp / floating / back-to-top plugin button */ body.nav-is-open [class*="whatsapp"], body.nav-is-open [id*="whatsapp"], body.nav-is-open [class*="wa-btn"], body.nav-is-open [class*="wa_btn"], body.nav-is-open [class*="wabtn"], body.nav-is-open .floating-btn, body.nav-is-open .fab-btn, body.nav-is-open .back-to-top, body.nav-is-open #back-to-top, body.nav-is-open .scroll-to-top, body.nav-is-open [class*="floating"][class*="btn"], body.nav-is-open [class*="float"][class*="chat"], body.nav-is-open [class*="sticky"][class*="float"] { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* ============================================================================= RESPONSIVE — NAV BREAKPOINT (≤ 1024px → mobile menu, > 1024px → desktop nav) ============================================================================= */ @media (max-width: 1024px) { .site-header__inner { grid-template-columns: 1fr auto; height: 64px; } /* Hide desktop nav and CTA — show fullscreen overlay + hamburger instead */ .site-header__nav, .site-header__cta { display: none; } /* Show hamburger */ .nav-toggle { display: flex; grid-column: 2; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { #mobile-menu, #mobile-menu.is-open { transition: none !important; } #mobile-menu.is-animating .mobile-menu__list > li { animation: none !important; opacity: 1 !important; transform: none !important; } }