/* ================================================================ IMMEDIATE SCROLL FIX FOR MOBILE ================================================================ Add this to AFTER mobile-fixes.css to enable immediate scrolling on mobile devices. ================================================================ */ /* Force immediate scrolling on mobile */ @media (max-width: 768px) { /* CRITICAL: Override all touch-action conflicts */ html, body { touch-action: pan-y pan-x !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: auto !important; } /* Allow body to scroll immediately */ body { position: relative !important; overflow: visible !important; height: auto !important; } /* Remove any blocking overlays */ body::before, body::after { pointer-events: none !important; } /* Ensure content containers don't block scroll */ main, section, article, div { touch-action: inherit !important; } /* Navigation should NOT block scrolling */ nav, header { touch-action: pan-y !important; } /* Fixed elements shouldn't interfere */ nav { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; pointer-events: auto !important; transform: none !important; will-change: auto !important; backface-visibility: hidden !important; } nav * { pointer-events: auto !important; } /* Menu when closed shouldn't block */ .nav-links:not(.active) { pointer-events: none !important; display: none !important; } /* Menu when open */ .nav-links.active { pointer-events: auto !important; touch-action: pan-y !important; } /* Stars background shouldn't block */ .stars, .shimmer-stars { pointer-events: none !important; touch-action: none !important; } /* CRITICAL: Universal override for scrolling */ * { touch-action: inherit !important; } /* Only these elements should have special touch behavior */ a, button, .btn, input, select, textarea, .menu-toggle, .mobile-social-icons a { touch-action: manipulation !important; } /* Everything else: allow scrolling */ p, span, div:not(.btn), h1, h2, h3, h4, h5, h6, section, main, article, header:not(nav), footer { touch-action: pan-y pan-x !important; } /* CRITICAL: Titles should NOT be clickable */ h1, h2, h3, h4, h5, h6 { pointer-events: none !important; cursor: default !important; -webkit-user-select: text !important; user-select: text !important; -webkit-tap-highlight-color: transparent !important; } /* Header title specifically */ header h1, header h2, header p { pointer-events: none !important; cursor: default !important; } /* Section titles */ section h2, section h3 { pointer-events: none !important; cursor: default !important; } /* Paragraphs should not be clickable either */ p { pointer-events: none !important; cursor: text !important; -webkit-user-select: text !important; user-select: text !important; } /* Allow links inside paragraphs/headings to work */ p a, p button, p .btn, h1 a, h2 a, h3 a, h4 a { pointer-events: auto !important; cursor: pointer !important; } } /* Prevent header from moving AT ALL on mobile */ @media (max-width: 768px) { /* Lock header in place - NO expansion */ header { position: relative !important; transform: none !important; transition: none !important; height: auto !important; min-height: auto !important; max-height: none !important; } /* Lock nav size - prevent expansion/collapse */ nav { height: auto !important; min-height: 60px !important; max-height: 60px !important; padding: 0.5rem 1rem !important; transition: none !important; } /* No scroll animations on nav */ nav.collapsed, nav:not(.collapsed) { transform: none !important; transition: none !important; height: 60px !important; min-height: 60px !important; max-height: 60px !important; padding: 0.5rem 1rem !important; } /* Disable any JavaScript-driven nav animations */ nav * { transform: none !important; transition: none !important; } /* Lock logo size */ .nav-logo { height: 50px !important; max-height: 50px !important; width: auto !important; transform: none !important; transition: none !important; } /* Mobile nav top container */ .mobile-nav-top { height: auto !important; padding: 0 !important; } } /* Additional iOS Safari fixes */ @supports (-webkit-touch-callout: none) { @media (max-width: 768px) { html { -webkit-overflow-scrolling: touch !important; overflow-y: scroll !important; height: 100% !important; } body { -webkit-overflow-scrolling: touch !important; position: relative !important; overflow-y: scroll !important; } /* Prevent iOS scroll bouncing from blocking */ body { overscroll-behavior: contain !important; } } }