/* ============================================================================= responsive.css — Unified responsive layer for Life's 2 Short Charters ----------------------------------------------------------------------------- This file is the single source of truth for responsive behaviour added on top of the (auto-generated) main.css / page CSS. It exists to: 1. Replace the dual-DOM "device-shell" pattern with one responsive tree. 2. Consolidate the inconsistent legacy breakpoints (650/766/767/768/1024/ 1025/1400) into a unified scale: 576 / 768 / 992 / 1200 / 1400. 3. Pull body-level resets out of inline style attributes. 4. Guard against horizontal overflow and image scaling bugs introduced by fixed pixel widths and the legacy hidden-mobile shell. The desktop tree already carries .showOnLarge (>=1025px) and .showOnMedium (<1025px) header variants — main.css drives that switch. Do NOT add new visual styling here; only structural / responsive fixes. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. BREAKPOINT TOKENS Reference values only — used inline in @media queries below. CSS custom properties cannot be used inside @media rules themselves, but keeping them here documents the scale for future maintenance. ----------------------------------------------------------------------------- */ :root { --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; --bp-xxl: 1400px; /* Fallback offset that pushes mobile .site_content below the fixed header. Live value is written by /assets/js/header-offset.js, which measures #hamburger-header-container.offsetHeight on resize / orientationchange / ResizeObserver and updates this variable on . The 240px fallback is a reasonable midpoint of the observed 200–290px header range so the hero is never hidden on first paint even before JS runs. Reset to 0px above 768px (see section 11) where main.css's tablet rule takes over. */ --mobile-header-offset: 240px; } /* ----------------------------------------------------------------------------- 2. BODY RESET Replaces the previously inline `style="padding:0;margin:0;"` on . ----------------------------------------------------------------------------- */ html, body#dmRoot { margin: 0; padding: 0; } /* Horizontal-scroll SAFETY NET — NOT the primary fix. The primary fix is the min-width neutralisation in section 8 below: when the wrapper chain stops claiming 1000+px on mobile, nothing overflows in the first place. This rule only catches future widgets that misbehave. `overflow-x: clip` is preferred where supported because, unlike `hidden`, it does not establish a scroll container — so position:sticky descendants keep working. The earlier `overflow-x: hidden` declaration is the fallback for older browsers that don't recognise `clip`. */ html, body#dmRoot { overflow-x: hidden; /* fallback */ overflow-x: clip; } /* ----------------------------------------------------------------------------- 3. DEFUNCT DEVICE-SHELL RULES (defensive) The .device-shell--desktop / --mobile wrappers and selector script have been removed from the markup. These rules ensure no stale shell element renders incorrectly if cached HTML from a previous deploy is served. ----------------------------------------------------------------------------- */ .device-shell { display: contents; } /* ----------------------------------------------------------------------------- 4. RESPONSIVE MEDIA — global safeguards ----------------------------------------------------------------------------- */ img, picture, video { max-width: 100%; height: auto; } /* Builder output sometimes sets fixed widths on images; the legacy `img[width][height] { height: auto }` rule already exists in page CSS but does not guard width. */ #dmRoot img { max-width: 100%; } /* ----------------------------------------------------------------------------- 5. UNIFIED RESPONSIVE BEHAVIOUR The desktop tree's .showOnLarge / .showOnMedium switch is provided by main.css at 1025px. We add complementary rules at the unified breakpoints to fix layout bugs that previously hid behind the mobile-only DOM tree. ----------------------------------------------------------------------------- */ /* >= 1400px (xxl) — wide desktop, no overrides needed; preserved for clarity */ @media (min-width: 1400px) { /* intentionally empty — desktop visuals are authoritative */ } /* >= 1200px (xl) — standard desktop, no overrides needed */ @media (min-width: 1200px) and (max-width: 1399.98px) { /* intentionally empty */ } /* >= 992px (lg) — small desktop / large tablet landscape The legacy 1025px desktop boundary still controls .showOnLarge; we don't override it. This block exists for future per-component fixes. */ @media (min-width: 992px) and (max-width: 1199.98px) { /* intentionally empty */ } /* < 992px (md and below) — tablet portrait + mobile Force every flex column to be fluid so the layout can collapse cleanly. */ @media (max-width: 991.98px) { #dmRoot .dmRespRow, #dmRoot .dmRespColsWrapper { flex-wrap: wrap; } /* Builder grids occasionally pin large-* widths via inline style. Allow them to wrap to a single column without overflowing. */ #dmRoot .dmRespCol { min-width: 0; } } /* < 768px (sm and below) — mobile main.css only applies the .site_content header-clearance margin between 768px and 1024px (the .responsiveTablet [dmtemplateid="Hamburger"] .site_content rule pinned to 238.665px). Below 768px there is no clearance rule in main.css, so the hero overlaps the fixed hamburger header. We restore clearance via --mobile-header-offset (see section 11), measured live by /assets/js/header-offset.js so it tracks the header's actual wrapped height. */ @media (max-width: 767.98px) { #dmRoot div.site_content { margin-top: var(--mobile-header-offset, 240px) !important; } /* Stack any flex-element grid groups vertically on mobile, regardless of their inline grid-area / width hints. */ #dmRoot .flex-element.grid > .flex-element.group { flex-basis: 100% !important; max-width: 100%; } /* Hero typography and CTA sizing should follow the page's existing m-font-size-* tokens already in main.css — no override here. */ } /* < 576px (xs) — small mobile Tighten horizontal padding so cards don't get squeezed against the viewport edge on narrow phones. */ @media (max-width: 575.98px) { #dmRoot .dmInner, #dmRoot .dmLayoutWrapper { padding-left: 0; padding-right: 0; } } /* ----------------------------------------------------------------------------- 6. HEADER / NAVIGATION RESPONSIVE NORMALISATION The desktop tree contains BOTH header variants (.showOnLarge horizontal nav, .showOnMedium hamburger drawer). main.css toggles them at 1025px. The legacy rules used !important and we honour that here. ----------------------------------------------------------------------------- */ /* When the hamburger drawer is open, lock body scroll. Existing builder JS toggles `.layout-drawer-open` on body. */ body.layout-drawer-open { overflow: hidden; } /* Prevent the hamburger header from collapsing below logo height on very narrow viewports. */ @media (max-width: 575.98px) { #hamburger-header-container .imageWidget img { max-height: 56px; width: auto; } } /* ----------------------------------------------------------------------------- 7. FORMS — generic responsive defaults Page-specific form layouts continue to live in page CSS. These rules only prevent overflow and ensure tap-friendly sizing on mobile. ----------------------------------------------------------------------------- */ @media (max-width: 767.98px) { #dmRoot .dmforminput input, #dmRoot .dmforminput textarea, #dmRoot .dmforminput select { width: 100%; max-width: 100%; box-sizing: border-box; } } /* ----------------------------------------------------------------------------- 8. NEUTRALIZE LEGACY DESKTOP MIN-WIDTHS ← PRIMARY MOBILE FIX The builder's main.css forces wrapper-chain min-widths so the page is never narrower than its desktop layout — that is the actual source of horizontal overflow on a 360px phone, regardless of any column-collapse rule. Reset to 0 here so the entire wrapper chain can collapse cleanly to viewport width. `!important` is required because the upstream rules use `!important`. ----------------------------------------------------------------------------- */ @media (max-width: 991.98px) { #dmRoot .dmInner, #dmRoot .dmDesktopBody .dmInner, #dmRoot #desktopHeaderBox, #dmRoot .dmHeaderContainer { min-width: 0 !important; width: 100% !important; } #dmRoot .dmOuter, #dmRoot .dmwr, #dmRoot .dm_wrapper, #dmRoot .dm-home-page, #dmRoot #dm-outer-wrapper, #dmRoot .dmLayoutWrapper { min-width: 0 !important; max-width: 100% !important; } } /* ----------------------------------------------------------------------------- 9. PHONE CTA — prevent the (850) 822-3320 button from overflowing its column The button inherits inline width hints from desktop. On mobile it must shrink to its content width and its parent .small-12 column must actually behave like small-12 (the column otherwise inherits medium-3 / large-3 width from cascade order). ----------------------------------------------------------------------------- */ @media (max-width: 767.98px) { #dmRoot a.flexButton.dmCall, #dmRoot a.voipReplacement { width: auto !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } #dmRoot .dmRespCol.small-12 { flex-basis: 100% !important; max-width: 100% !important; } } /* ----------------------------------------------------------------------------- 10. LIVESITE ENGAGE BUTTON ("Connect With Captain Alex") Desktop positions this widget via a computed left offset that is wider than a phone viewport, pushing it off-screen. Pin it to the bottom edge full-width on mobile instead. ----------------------------------------------------------------------------- */ @media (max-width: 767.98px) { #livesite_engage_button { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; transform: none !important; } #livesite_engage_button .ls-zoom-width, #livesite_engage_button .ls-engage-button { /* width: 100% !important; */ min-width: 0 !important; max-width: 100% !important; text-align: center; } #widget_b1g, #widget_6gl, #fce978b7, #\30 1e7c33c, #\37 f52b626, #\30 d053724, #\34 64fde9c, #\31 667e14f, #e4fa1da1, #widget_k5a{ width: 180px !important; height: 48px !important; } #widget_b1g .dmWidget .text, #widget_6gl .dmWidget .text, #fce978b7 .dmWidget .text, #\30 1e7c33c .dmWidget .text, #\37 f52b626 .dmWidget .text, #\30 d053724 .dmWidget .text, #\34 64fde9c .dmWidget .text, #\31 667e14f .dmWidget .text, #e4fa1da1 .dmWidget .text, #widget_k5a .dmWidget .text{ font-size: 16px !important; padding: 0px; } } #widget_b1g .dmWidget, #widget_6gl .dmWidget, #fce978b7 .dmWidget, #\30 1e7c33c .dmWidget, #\37 f52b626 .dmWidget, #\30 d053724 .dmWidget, #\34 64fde9c .dmWidget, #\31 667e14f .dmWidget, #e4fa1da1 .dmWidget, #widget_k5a .dmWidget{ display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* ----------------------------------------------------------------------------- 11. MOBILE HEADER OFFSET — tablet+desktop reset The --mobile-header-offset variable defined in section 1 only matters at <768px (it's consumed by the section-5 .site_content rule which only fires in that range). At >=768px we reset it to 0px as a defense-in-depth so any stale inline override from /assets/js/header-offset.js cannot leak into the tablet layout — the JS itself removes the inline style at this breakpoint, but this CSS-level reset is the belt-and-braces fallback. ----------------------------------------------------------------------------- */ @media (min-width: 768px) { :root { --mobile-header-offset: 0px; } } /* Custom CSS */ .flex-element.grid .flex-element.group .flex-element.group{ max-width: 1440px; width: 100%; margin: 0 auto !important; } .flex-element .ngg-gallery-thumbnail img{ border-radius: 8px; } @media (max-width: 1100px){ .flex-element .ngg-galleryoverview{ margin: 0 auto !important; } }