/** * Mobile Adaptive System - BIDIRECTIONAL STRICT ISOLATION * ========================================================== * Controls display of desktop-only vs mobile-only content * Works in conjunction with device detection script in * * CRITICAL GUARANTEES: * ✅ Mobile changes NEVER affect desktop * ✅ Desktop changes NEVER affect mobile * * EXCEPTIONS (shared between both): * - Google Tag Manager (GTM) scripts * - SEO meta tags (, <meta description>, etc.) * - Analytics events (dataLayer) * - Canonical URLs * - Schema.org structured data * - Open Graph / Twitter Cards * * PROTECTED FROM EACH OTHER: * - CSS styles * - JavaScript logic * - HTML structure * - Event handlers * - DOM modifications * - Layout systems */ /* ==================== DEFAULT: HIDE BOTH ==================== */ .desktop-only, .mobile-only { display: none !important; } /* ==================== DESKTOP ISOLATION ==================== */ /* Desktop content ONLY visible on desktop devices */ .desktop-device .desktop-only { display: block !important; } /* Ensure mobile content is COMPLETELY HIDDEN on desktop */ .desktop-device .mobile-only, .desktop-device .mobile-only *, .desktop-device [class*="mobile-"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; } /* ==================== MOBILE ISOLATION ==================== */ /* Reset body and html on mobile - remove all desktop backgrounds */ .mobile-device html { background: #F7F8FA !important; background-image: none !important; background-attachment: initial !important; } .mobile-device body { background: #F7F8FA !important; background-image: none !important; background-attachment: initial !important; background-color: #F7F8FA !important; overflow-x: hidden !important; } /* COMPLETELY REMOVE hero-background.jpg from loading on mobile */ .mobile-device .hero-section, .mobile-device .ab-hero, .mobile-device #mainPage, .mobile-device .main, .mobile-device .outro_home, .mobile-device .main_about, .mobile-device .outro_about, .mobile-device .main_services, .mobile-device .outro_services, .mobile-device .main_contact, .mobile-device .main_reviews, .mobile-device .main_pricing, .mobile-device [class*="hero"], .mobile-device [id*="hero"], .mobile-device [style*="hero-background"], .mobile-device [style*="background-image"] { background: transparent !important; background-image: none !important; background-color: transparent !important; background-attachment: initial !important; } /* Prevent loading of hero-background.jpg image file on mobile */ .mobile-device * { background-attachment: initial !important; } /* Force remove any background images that might be loaded */ .mobile-device *::before, .mobile-device *::after { background-image: none !important; } /* Prevent hero-background.jpg from loading on mobile - override all styles.css rules */ @media (max-width: 1023px) { .hero-section { background-image: none !important; } } .mobile-device .hero-section { background-image: none !important; background: #F7F8FA !important; } /* Mobile content ONLY visible on mobile devices */ .mobile-device .mobile-only { display: block !important; } /* Ensure desktop content is COMPLETELY HIDDEN on mobile */ .mobile-device .desktop-only { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; left: -9999px !important; top: -9999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; z-index: -9999 !important; } .mobile-device .desktop-only *, .mobile-device .desktop-only * * { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* Additional specific selectors for extra safety */ .mobile-device #mainPage, .mobile-device .ab-hero, .mobile-device .header:not(.mobile-header), .mobile-device .logo:not(.mobile-logo), .mobile-device .logo-img:not(.mobile-logo), .mobile-device .footer:not(.mobile-footer), .mobile-device .container:not([class*="mobile-"]), .mobile-device [class*="ab-"], .mobile-device [id*="desktop-"], .mobile-device .desktop-form, .mobile-device .desktop-nav { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Protect mobile from desktop global styles */ .mobile-device .mobile-only { /* Establish new stacking context */ isolation: isolate; /* Contain layout to prevent desktop influence */ contain: layout style; } /* Reset only specific problematic properties, not all */ .mobile-device .mobile-only * { box-sizing: border-box; } /* ==================== MEDIA QUERY FALLBACK (if JS fails) ==================== */ /* These rules activate if device detection JavaScript fails to run */ @media (min-width: 768px) { .desktop-only { display: block !important; } .mobile-only { display: none !important; } } @media (max-width: 767px) { .desktop-only { display: none !important; } .mobile-only { display: block !important; } } /* ==================== BIDIRECTIONAL PROTECTION SUMMARY ==================== */ /** * DESKTOP → MOBILE Protection: * - Desktop CSS doesn't leak to mobile * - Desktop JS doesn't execute on mobile * - Desktop HTML hidden on mobile * - Mobile has CSS reset (all: revert) * - Mobile has isolation context * * MOBILE → DESKTOP Protection: * - Mobile CSS doesn't leak to desktop * - Mobile JS doesn't execute on desktop * - Mobile HTML hidden on desktop * - Mobile resources don't load on desktop * * SHARED (intentionally): * - GTM / Analytics * - SEO meta tags * - Fonts * - Favicon * - Stripe integration */ /* ==================== SHARED ELEMENTS (visible on both) ==================== */ /* Popups are shared between desktop and mobile - controlled by JS via .active class */ .reviewPopupOverlay { display: none; /* Hidden by default, shown via JS */ } /* ==================== DEBUGGING (remove in production) ==================== */ /* .desktop-device::before { content: 'DESKTOP MODE'; position: fixed; top: 0; left: 0; background: green; color: white; padding: 5px 10px; z-index: 99999; font-size: 12px; } .mobile-device::before { content: 'MOBILE MODE'; position: fixed; top: 0; left: 0; background: blue; color: white; padding: 5px 10px; z-index: 99999; font-size: 12px; } */