/* ============================================================================= Responsive fixes for the static Elementor export. This file is loaded LAST inside so it wins the cascade against the inlined theme/Elementor styles. It only corrects layout behaviour that used to depend on the (now removed) Elementor JavaScript runtime. The desktop visual design is intentionally left untouched. Sections: 1. Overflow safety net 2. Responsive media 3. Full-bleed stretched sections (no-JS fallback) 4. Header: top bar 5. Header: logo / burger / call-to-action row 6. Fluid hero typography 7. Mobile menu panel ========================================================================== */ /* ----------------------------------------------------------------------------- 1. Overflow safety net The theme already clips on .page_wrap; these rules make the guarantee explicit at the document level so a single wide child can never introduce a horizontal scrollbar. -------------------------------------------------------------------------- */ html, body { overflow-x: hidden; max-width: 100%; } /* ----------------------------------------------------------------------------- 2. Responsive media -------------------------------------------------------------------------- */ img, svg, video, canvas, iframe, embed, object { max-width: 100%; } img, svg, video { height: auto; } /* ----------------------------------------------------------------------------- 3. Full-bleed stretched sections Elementor normally recalculates width/left for .elementor-section-stretched on every resize. The export baked in a fixed desktop value instead, which has been stripped from the markup. assets/site.js reproduces the original behaviour and marks with .js-stretch; until then (or if the script fails) this viewport-based fallback keeps the section full-bleed at any size. No !important here on purpose: site.js sets inline styles, which must win. -------------------------------------------------------------------------- */ html:not(.js-stretch) .elementor-section-stretched { position: relative; width: 100vw; max-width: 100vw; left: 50%; right: auto; margin-left: -50vw; } /* ----------------------------------------------------------------------------- 4. Header: top bar (phone / e-mail + Shipment Tracker / Login) -------------------------------------------------------------------------- */ @media (max-width: 767px) { .top_panel .sc_layouts_row_type_narrow .elementor-container { flex-wrap: wrap; } /* Centre both halves and let them sit on their own line. */ .top_panel .sc_layouts_row_type_narrow .sc_layouts_column { width: 100%; text-align: center; } .top_panel .sc_layouts_row_type_narrow .sc_layouts_column .elementor-widget-wrap { justify-content: center; } /* Contact block: label + value inline, wrapping instead of overflowing. */ .top_panel .contacts_wrap .contacts_info { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25em 1.5em; } .top_panel .contacts_wrap .contacts_phone, .top_panel .contacts_wrap .contacts_email { display: flex; align-items: baseline; gap: 0.4em; white-space: nowrap; } .top_panel .contacts_wrap .contacts_email a, .top_panel .contacts_wrap .contacts_phone a { overflow-wrap: anywhere; white-space: normal; } /* Shipment Tracker / Login row. */ .top_panel .sc_layouts_column_align_right .elementor-widget-wrap { justify-content: center; } .top_panel .sc_layouts_iconed_text { white-space: nowrap; } .top_panel .sc_layouts_row_type_narrow, .top_panel .sc_layouts_row_type_narrow .elementor-widget-container { font-size: 1.1rem; } .top_panel .sc_layouts_row_type_narrow .elementor-container { padding-left: 12px; padding-right: 12px; } } /* ----------------------------------------------------------------------------- 5. Header: logo / burger / "Get a quote" row Keeps the three items on one line down to 360px without overlap, and gives the button breathing room against the right edge of the viewport. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .top_panel .sc_layouts_row_type_normal .elementor-container { flex-wrap: nowrap; align-items: center; padding-left: 12px; padding-right: 12px; } /* Logo shrinks first; it is the flexible item. */ .top_panel .sc_layouts_row_type_normal .elementor-column:first-child { flex: 1 1 auto; min-width: 0; } .top_panel .sc_layouts_logo img.logo_image { max-width: 100%; max-height: 52px; width: auto; } /* Burger + button never shrink and never wrap. */ .top_panel .sc_layouts_row_type_normal .elementor-column:last-child { flex: 0 0 auto; min-width: 0; } .top_panel .sc_layouts_row_type_normal .elementor-column:last-child .elementor-widget-wrap { flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 10px; } .top_panel .sc_layouts_menu_mobile_button { flex: 0 0 auto; } /* Enlarge the burger hit area to a comfortable touch target. */ .top_panel .sc_layouts_menu_mobile_button a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } } @media (max-width: 767px) { /* Right-side breathing room for the call to action. */ .top_panel .sc_layouts_row_type_normal .elementor-container { padding-right: 16px; } .top_panel .elementor-widget-trx_sc_layouts_action .elementor-widget-container, .top_panel .sc_layouts_row_type_normal .sc_button { white-space: nowrap; } .top_panel .sc_layouts_row_type_normal .sc_button, .top_panel .sc_layouts_row_type_normal .elementor-button { padding-left: 1em; padding-right: 1em; font-size: 0.8em; } } @media (max-width: 400px) { .top_panel .sc_layouts_logo img.logo_image { max-height: 44px; } .top_panel .sc_layouts_row_type_normal .elementor-column:last-child .elementor-widget-wrap { gap: 6px; } .top_panel .sc_layouts_row_type_normal .sc_button, .top_panel .sc_layouts_row_type_normal .elementor-button { padding-left: 0.75em; padding-right: 0.75em; font-size: 0.72em; } } /* ----------------------------------------------------------------------------- 6. Fluid hero typography The exported font sizes were absolute and only worked at the width the page was captured at. clamp() keeps the desktop size as the upper bound. -------------------------------------------------------------------------- */ .sc_layouts_title .sc_layouts_title_title, .elementor-section-stretched .sc_item_title, .elementor-section-stretched .sc_item_subtitle { overflow-wrap: break-word; hyphens: auto; } @media (max-width: 1024px) { .elementor-section-stretched .sc_title .sc_item_subtitle { font-size: clamp(1.35rem, 6.2vw, 2.15rem); line-height: 1.18; } .elementor-section-stretched .sc_title .sc_item_title { font-size: clamp(1.35rem, 6.2vw, 2.15rem); line-height: 1.18; } .elementor-section-stretched .sc_title .sc_item_descr { font-size: clamp(0.95rem, 3.6vw, 1.2rem); line-height: 1.55; } /* Keep hero copy off the viewport edges. */ .elementor-section-stretched > .elementor-container { padding-left: 16px; padding-right: 16px; } } /* ----------------------------------------------------------------------------- 7. Mobile menu panel The panel markup and the .opened state already exist in the export; only the toggling script was missing. These rules add the scroll lock, a usable overlay and accessible focus styling. -------------------------------------------------------------------------- */ body.menu_mobile_opened { overflow: hidden; touch-action: none; } /* The export ships .menu_mobile_overlay with `display: none !important`. Re-enable it so a tap outside the panel can close the menu on the non-fullscreen variants of this layout. */ .menu_mobile_overlay { display: block !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } body.menu_mobile_opened .menu_mobile_overlay { opacity: 1; visibility: visible; pointer-events: auto; } /* The panel is height:0 when closed; make sure it is also inert. */ .menu_mobile:not(.opened) { pointer-events: none; visibility: hidden; } .menu_mobile.opened { pointer-events: auto; visibility: visible; } .menu_mobile .menu_mobile_nav_area li > a { /* The export hard-codes a 28rem link width, which overflows small screens. */ max-width: 100%; } @media (max-width: 480px) { .menu_mobile .menu_mobile_nav_area li > a { width: auto; min-width: 0; padding-right: 1.5em; text-align: center; } .menu_mobile .menu_mobile_nav_area > ul > li > a { font-size: 1.5em; } } /* Visible keyboard focus for the burger and the menu links. */ .sc_layouts_menu_mobile_button a:focus-visible, .menu_mobile a:focus-visible, .menu_mobile_close:focus-visible { outline: 2px solid #0d98ef; outline-offset: 3px; } /* Submenu expand / collapse driven by site.js. */ .menu_mobile .menu_mobile_nav_area li.opened > ul { display: block; }