/* ============================================ APP-MOBILE.CSS Lifeline CF - Mobile App Optimizations INSTRUCTIONS: 1. Save this file as "app-mobile.css" in your /css/ folder 2. Add this line to the of ALL HTML files: This will hide the website header on mobile devices so the app navigation can be used instead. ============================================ */ /* Target mobile devices only */ @media only screen and (max-width: 991px) { /* HIDE THE HEADER COMPLETELY */ #header, header, .header { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; max-height: 0 !important; min-height: 0 !important; overflow: hidden !important; position: absolute !important; top: -9999px !important; left: -9999px !important; } /* Remove the top padding/margin that was added for fixed header */ #main-content, .main-content, main { padding-top: 0 !important; margin-top: 0 !important; } /* Hide mobile navigation elements */ .mobile-menu-toggle, .mobile-nav-toggle, .hamburger, .menu-toggle { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* Hide mobile menu overlay */ .mobile-menu-overlay, .menu-overlay { display: none !important; visibility: hidden !important; } /* Hide mobile menu drawer */ #mobile-advanced, .mobile-menu, .mobile-nav { display: none !important; visibility: hidden !important; } /* Remove ALL top spacing from body */ html, body { padding-top: 0 !important; margin-top: 0 !important; } /* Hide top header bar */ .top-header { display: none !important; } /* Ensure hero section starts at very top */ .hero { margin-top: 0 !important; padding-top: 3rem !important; } /* Hide logo wrapper */ .logo-wrap, .logo { display: none !important; } /* Hide menu holder */ .menu-holder { display: none !important; } /* Make sure first section starts at top */ body > *:first-child:not(script):not(style) { margin-top: 0 !important; padding-top: 0 !important; } } /* ============================================ Optional: Keep navigation for desktop These styles ensure desktop version still works ============================================ */ @media only screen and (min-width: 992px) { /* Desktop styles remain unchanged */ #header { /* Keep normal header on desktop */ display: block !important; position: fixed !important; } }