/* responsive-fix.css Purpose: mobile usability fixes layered on top of the legacy style.css. Loaded LAST so these rules win without editing the original stylesheet. */ /* 1) Mobile scroll lock fix. The page boots with (overflow:hidden) and only removes it on $(window).load — i.e. after EVERY image and the Google Maps iframe finish loading. On a phone that can hang, leaving the page unscrollable. On mobile the preloader is hidden anyway, so the lock serves no purpose: unlock it. */ @media (max-width: 767px) { body.no-scroll { overflow-y: auto !important; } } /* 2) Responsive Google Maps embed. The contact map is hard-coded to width="900"; cap it to the viewport. */ #contact iframe { max-width: 100%; } @media (max-width: 767px) { #contact iframe { width: 100% !important; height: 320px; } } /* 3) Services section (#intro). On desktop this is a carouFredSel horizontal drag-carousel whose text panes use jScrollPane, with inline heights set from the viewport by script.js. None of that works on a phone (mouse-drag, fixed widths) — it collapses into a squeezed strip. On mobile, neutralise the widgets and stack the services vertically at full width so all text is readable. Selectors are #intro-scoped so they out-specify the plugins' inline styles via !important. */ @media (max-width: 767px) { #intro { min-height: 0 !important; height: auto !important; } /* carouFredSel wrapper + track → full width, no horizontal offset */ #intro .caroufredsel_wrapper { width: 100% !important; height: auto !important; overflow: visible !important; margin-left: 0 !important; /* carousel.js drags this wrapper left by -300px */ cursor: default !important; } #intro #wrapper { height: auto !important; margin-left: 0 !important; cursor: default !important; } #intro #home-slider { position: static !important; width: 100% !important; height: auto !important; left: auto !important; right: auto !important; float: none !important; transform: none !important; } /* each service item stacks full width */ #intro #home-slider > li { position: static !important; float: none !important; display: block !important; width: 100% !important; height: auto !important; left: auto !important; margin: 0 0 40px 0 !important; } #intro #first-carousel-item { display: none !important; } /* desktop "Services" title slide */ #intro .promo-head { padding-top: 0 !important; } /* promo content: kill jScrollPane fixed height + custom scrollbar, show full text */ #intro .promo-item, #intro .promo-item > .scroll-pane { height: auto !important; } #intro .scroll-pane { width: 100% !important; overflow: visible !important; } #intro .jspContainer { width: 100% !important; height: auto !important; overflow: visible !important; } #intro .jspPane { position: static !important; width: 100% !important; padding-left: 0 !important; } #intro .jspVerticalBar { display: none !important; } #intro .promo-img { max-width: 100% !important; height: auto !important; } #intro .promo-txt { width: auto !important; } }