/* ========================================================================== mobile.css — mobile-only UI refinements for WGS Global Services -------------------------------------------------------------------------- Loaded AFTER /assets/site.css so equal-specificity rules win on the cascade. EVERYTHING here is gated to <=767px (Elementor's own mobile breakpoint) or to the .wgs-nav-ready class, so the desktop/tablet design is never touched. Page copy and structure are unchanged; this only adjusts presentation. ========================================================================== */ /* -------------------------------------------------------------------------- 1. MOBILE NAVIGATION (hamburger + slide-in drawer) The captured Elementor header shipped with the responsive dropdown disabled (`elementor-nav-menu--dropdown-none`, no toggle), so all 8 links rendered as a cramped, pipe-separated list wrapping onto two rows with 28px tap targets. A small inline script in Base.astro builds an accessible toggle + drawer and adds `.wgs-nav-ready` to ; the rules below only apply once that's set, so if JS ever fails the original menu is left intact (progressive enhancement). -------------------------------------------------------------------------- */ @media (max-width: 767px) { /* Hide the old inline menu (and the empty second header row it created). */ .wgs-nav-ready header.elementor-location-header .elementor-element-8934faf, .wgs-nav-ready header.elementor-location-header .elementor-widget-nav-menu { display: none !important; } /* Header: one tidy row — logo pinned left, hamburger pinned right, and the site title absolutely centered in the bar. Centering it independently of the logo/toggle widths keeps it balanced (truly centered in the viewport) at every mobile width, instead of drifting as the screen gets wider. */ .wgs-nav-ready header.elementor-location-header .elementor-element-2c5be123 { position: relative; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; gap: 11px; padding: 9px 60px 9px 16px !important; } header.elementor-location-header .elementor-element-b999d30 img { height: 44px !important; width: auto !important; } .wgs-nav-ready header.elementor-location-header .elementor-element-5301872 { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: auto !important; /* Stay clear of the logo (left) and the hamburger (right). */ max-width: calc(100% - 140px) !important; margin: 0 !important; } header.elementor-location-header .elementor-element-5301872 .elementor-heading-title { font-size: clamp(15px, 4.8vw, 20px) !important; line-height: 1.15 !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center !important; } /* The hamburger button */ .wgs-navtoggle { position: absolute; top: 50%; right: 11px; transform: translateY(-50%); width: 46px; height: 46px; display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; cursor: pointer; z-index: 1001; -webkit-tap-highlight-color: transparent; } .wgs-navtoggle__bar { display: block; width: 26px; height: 3px; border-radius: 3px; background: #ffffff; transition: transform 0.25s ease, opacity 0.2s ease; } /* Animate into an "X" when open */ .wgs-nav-open .wgs-navtoggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .wgs-nav-open .wgs-navtoggle__bar:nth-child(2) { opacity: 0; } .wgs-nav-open .wgs-navtoggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Slide-in drawer */ .wgs-mnav { position: fixed; top: 0; right: 0; z-index: 1000; width: 80%; max-width: 320px; height: 100%; background: #470050; /* brand purple, matches header */ box-shadow: -14px 0 44px rgba(0, 0, 0, 0.38); transform: translateX(100%); visibility: hidden; transition: transform 0.28s ease, visibility 0.28s ease; padding: 80px 0 28px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .wgs-nav-open .wgs-mnav { transform: translateX(0); visibility: visible; } .wgs-mnav__list { list-style: none; margin: 0; padding: 0; } .wgs-mnav__link { display: flex; align-items: center; min-height: 52px; padding: 14px 26px; color: #f1e6f4 !important; font-family: "Poppins", "Helvetica Neue", Arial, sans-serif; font-size: 17px; font-weight: 500; line-height: 1.2; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.10); transition: background 0.15s ease, color 0.15s ease; } .wgs-mnav__link:hover, .wgs-mnav__link:active { background: rgba(255, 255, 255, 0.08); } .wgs-mnav__link.is-active { color: #ffffff !important; background: rgba(255, 255, 255, 0.06); box-shadow: inset 4px 0 0 #e6007e; /* brand pink accent */ } /* Dimmed backdrop */ .wgs-mnav__scrim { position: fixed; inset: 0; z-index: 999; background: rgba(18, 6, 24, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s ease; } .wgs-nav-open .wgs-mnav__scrim { opacity: 1; visibility: visible; } /* Lock body scroll while the drawer is open */ html.wgs-nav-open, html.wgs-nav-open body { overflow: hidden; } } /* The enhanced controls never appear on tablet/desktop. */ @media (min-width: 768px) { .wgs-navtoggle, .wgs-mnav, .wgs-mnav__scrim { display: none !important; } } /* -------------------------------------------------------------------------- 2. RESPONSIVE TABLES The 5 service-detail articles embed SEO `.metasyncTable`s ~449px wide that pushed the whole page wider than the screen (sideways scroll). Confine the horizontal scroll to the table itself so the page no longer drifts. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .metasyncTable, .elementor-widget-text-editor table, .e-con table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* -------------------------------------------------------------------------- 3. STRETCH HEADINGS / TEXT IN FLEX CONTAINERS Some sections (e.g. the Location "Our Locations" heading) use a desktop `text-align:end` inside a flex row that right-aligns and shrink-wraps the widget. On mobile that left the heading pinned to — and clipped off — the right edge. Force these widgets to full width so alignment behaves. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .e-con > .elementor-widget-heading, .e-con > .elementor-widget-text-editor { width: 100% !important; max-width: 100% !important; align-self: stretch !important; } } /* -------------------------------------------------------------------------- 4. POST / ARTICLE TITLE SIZE Long blog & service-detail H1s were fixed at 45px, filling the whole first screen (6 lines). Scale them down fluidly so they read as a headline, not a wall. Page banner titles (short words like "Services") are left as designed. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .elementor-page-title .elementor-heading-title { font-size: clamp(1.85rem, 8vw, 2.4rem) !important; line-height: 1.15 !important; } } /* -------------------------------------------------------------------------- 5. TAP TARGETS & BUTTONS Comfortable, finger-sized controls and a touch more breathing room. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .elementor-button, a.elementor-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; } /* Footer menu links were 21px tall — give them a real tap area. */ footer.elementor-location-footer .elementor-nav-menu a.elementor-item { display: inline-block; padding-top: 7px; padding-bottom: 7px; } }