/* ═══════════════════════════════════════════════════════════ GORATIFY — Mobile & Android Improvements Add this file AFTER main.css in your ═══════════════════════════════════════════════════════════ */ /* ── 1. Kill Android tap highlight flash (whole site) ────── */ * { -webkit-tap-highlight-color: transparent; } /* ── 2. Prevent long-press text selection on UI elements ─── */ .btn, .ev-card, .poll-card, .t-nav a, .t-mobile-nav a, .cat-btn, .btn-vote, .ev-get, .page-item .page-link, .faq-q, .strip-item, .sbtag, .footer-social-link { user-select: none; -webkit-user-select: none; } /* ── 3. :active feedback for touch (replaces hover-only states) */ .btn:active { transform: scale(0.96) !important; opacity: 0.9; } .ev-card:active { transform: translateY(-3px); opacity: 0.88; } .poll-card:active { opacity: 0.88; } .cat-btn:active { opacity: 0.80; } .strip-item:active { background: rgba(0,0,0,0.12); } .sbtag:active { background: rgba(249,115,22,0.2); color: var(--primary); } /* ── 4. Fix WhatsApp FAB safe area (gesture nav bar) ───────── */ .wa-fab { bottom: max(28px, env(safe-area-inset-bottom, 28px)); } /* ── 5. Prevent pull-to-refresh bounce on Android Chrome ──── */ body { overscroll-behavior-y: none; } /* ── 6. Respect reduced motion preference ────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── 7. Mobile-specific form fixes ────────────────────────── Inputs below 16px trigger auto-zoom on iOS Safari. This also helps Android accessibility font scaling. */ @media (max-width: 768px) { .form-control, .lc-field, .nf-input-wrap input, .footer-nl-field input, .search-banner-bar input, .filter-input-wrap input, .hero-search-wrap input, #lc-inp { font-size: 16px !important; } } /* ── 8. Bigger touch targets for icon buttons ────────────── */ .t-theme-btn, .t-hamburger { width: 48px; height: 48px; } .footer-social-link { width: 44px; height: 44px; } .testi-arrow { width: 44px; height: 44px; } /* ── 9. Bottom navigation bar (Android-native feel) ────────── Add this HTML to includes/footer.php BEFORE : ──────────────────────────────────────────────────────── */ .mob-bottom-nav { display: none; /* hidden on desktop */ position: fixed; bottom: 0; left: 0; right: 0; z-index: 1001; height: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--nav); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--bdr); display: none; align-items: stretch; } .mob-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--txt2); font-size: 10px; font-weight: 600; font-family: 'Poppins', sans-serif; transition: color 0.15s; padding: 6px 0 0; min-height: 56px; -webkit-tap-highlight-color: transparent; user-select: none; } .mob-tab.active { color: var(--primary); } .mob-tab:active { opacity: 0.7; } .mob-tab svg { flex-shrink: 0; } /* Show bottom nav only on mobile, and add padding to body */ @media (max-width: 860px) { .mob-bottom-nav { display: flex; } /* Push page content up so nothing hides behind the bottom nav */ body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); } /* Also hide the old hamburger & mobile nav drawer since bottom nav replaces it */ /* Comment these out if you want to KEEP the hamburger as well */ /* .t-hamburger { display: none; } */ /* .t-mobile-nav { display: none; } */ } /* ── 10. Lift chat FAB above the bottom nav on mobile ─────── */ @media (max-width: 860px) { #lc-fab { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px); right: 16px; width: 52px; height: 52px; } #lc-box { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 76px); right: 10px; left: 10px; width: auto; } }