/** * Yahasra.org Mobile Responsive Enhancement * ========================================== * Enhances existing Tailwind responsive design with mobile-specific improvements. * * INSTALLATION: * 1. Save as: /home/ec2-user/cemetery-search/static/css/mobile_responsive.css * 2. Add to base.html AFTER line 35 (after Font Awesome): * * * Author: Dr Yohanan Ouaknine * Date: December 2025 */ /* ============================================================================= 1. PREVENT iOS ZOOM ON INPUT FOCUS (CRITICAL) ============================================================================= */ @media (max-width: 768px) { /* iOS zooms when font-size < 16px on focus */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], input[type="date"], input[type="url"], select, textarea { font-size: 16px !important; } } /* ============================================================================= 2. TOUCH TARGETS - Minimum 44px (Apple HIG) ============================================================================= */ @media (max-width: 768px) { /* Sidebar menu items */ .menu-item { min-height: 44px; padding: 0.75rem 1rem !important; } /* Buttons */ button, .btn, [role="button"], a.btn { min-height: 44px; } /* Checkboxes and radio buttons */ input[type="checkbox"], input[type="radio"], .search-checkbox { width: 22px !important; height: 22px !important; min-width: 22px; min-height: 22px; } /* Checkbox label containers - from search.html */ label.flex.items-center { min-height: 44px; padding: 0.5rem !important; } /* Pagination buttons */ .pagination-btn, .pagination a, .pagination button, .pagination span { min-width: 44px; min-height: 44px; padding: 0.625rem 0.875rem !important; } } /* ============================================================================= 3. FORM INPUTS - Better mobile experience ============================================================================= */ @media (max-width: 768px) { /* Form inputs - taller for touch */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], input[type="date"], select, textarea { min-height: 48px; padding: 0.75rem 1rem !important; } /* Submit buttons full width */ button[type="submit"], input[type="submit"], .form-submit-btn { width: 100%; min-height: 48px; font-size: 1rem; } /* Form labels */ label { font-size: 0.9375rem; } } /* ============================================================================= 4. TYPOGRAPHY - Mobile readability ============================================================================= */ @media (max-width: 768px) { /* Base */ body { font-size: 16px; line-height: 1.6; } /* Headings */ h1, .text-3xl, .text-4xl { font-size: 1.625rem !important; line-height: 1.25 !important; } h2, .text-2xl { font-size: 1.375rem !important; } h3, .text-xl { font-size: 1.125rem !important; } /* Keep small text readable */ .text-sm { font-size: 0.9375rem !important; } .text-xs { font-size: 0.8125rem !important; } } /* ============================================================================= 5. SPACING - Tighter on mobile ============================================================================= */ @media (max-width: 768px) { /* Container padding */ .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl { padding-left: 1rem !important; padding-right: 1rem !important; } /* Card padding */ .p-6 { padding: 1rem !important; } .p-8 { padding: 1.25rem !important; } /* Vertical spacing */ .py-10, .py-12, .py-14 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .mb-6 { margin-bottom: 1rem !important; } .mb-8 { margin-bottom: 1.5rem !important; } .gap-6, .gap-8 { gap: 1rem !important; } /* Space in forms */ .space-y-4 > * + *, .space-y-5 > * + * { margin-top: 0.875rem !important; } } /* ============================================================================= 6. CARDS - Template specific styles ============================================================================= */ @media (max-width: 768px) { /* Rabbi cards (rabbins.html) */ .rabbi-card { padding: 1rem !important; } .rabbi-card .grid { gap: 0.5rem !important; } /* Article cards (news.html) */ .article-card, .featured-card { border-radius: 0.75rem !important; } .article-card .p-5 { padding: 1rem !important; } .featured-card .grid { grid-template-columns: 1fr !important; } .featured-card img, .article-card img { height: 180px !important; } /* Message cards (mailbox.html) */ .message-card { border-radius: 0.75rem !important; } .message-card .p-5 { padding: 1rem !important; } /* Result cards (search.html) */ .result-card, .burial-card { padding: 1rem !important; } } /* ============================================================================= 7. GRIDS - Stack properly on mobile ============================================================================= */ @media (max-width: 640px) { /* Force single column on small screens */ .grid-cols-2, .sm\:grid-cols-2 { grid-template-columns: 1fr !important; } /* 3-column grids */ .grid-cols-3, .sm\:grid-cols-3, .lg\:grid-cols-3 { grid-template-columns: 1fr !important; } } @media (max-width: 768px) { /* Contact page sidebar (contact.html) */ .lg\:col-span-2 { grid-column: span 1 !important; } .lg\:grid-cols-3 { grid-template-columns: 1fr !important; } /* News grid */ .sm\:grid-cols-2.lg\:grid-cols-3 { grid-template-columns: 1fr !important; } } /* ============================================================================= 8. BUTTONS - Better mobile styling ============================================================================= */ @media (max-width: 768px) { /* Primary buttons - Moroccan red gradient */ button[style*="linear-gradient"], a[style*="linear-gradient"] { padding: 0.875rem 1.5rem !important; } /* Action buttons in cards */ .btn-primary, .btn-navy, .btn-success, .btn-danger, .btn-spam, .btn-secondary { padding: 0.625rem 1rem !important; font-size: 0.875rem !important; min-height: 40px; } /* Button groups stack */ .flex.gap-3:has(button), .flex.gap-2:has(button), .flex.flex-wrap.gap-3 { flex-direction: column; gap: 0.5rem !important; } .flex.gap-3:has(button) > *, .flex.gap-2:has(button) > * { width: 100%; } /* Inline forms don't stack */ .flex.gap-3:has(button):has(form) { flex-direction: row; flex-wrap: wrap; } .flex.gap-3:has(button):has(form) > * { width: auto; flex: 1 1 auto; } } /* ============================================================================= 9. TABLES - Horizontal scroll ============================================================================= */ @media (max-width: 768px) { .overflow-x-auto, .table-container { -webkit-overflow-scrolling: touch; } table { font-size: 0.875rem; } table th, table td { padding: 0.625rem 0.5rem !important; white-space: nowrap; } } /* ============================================================================= 10. MAP - Shorter on mobile ============================================================================= */ @media (max-width: 768px) { #map-container { height: 350px !important; } .map-controls { flex-direction: column; gap: 0.5rem; } .map-controls .search-box { width: 100% !important; max-width: 100% !important; } } /* ============================================================================= 11. PAGINATION - Touch friendly ============================================================================= */ @media (max-width: 768px) { /* Pagination container */ nav.flex.items-center.justify-between { flex-direction: column; gap: 1rem; } /* Hide page numbers on very small screens */ .hidden.md\:flex.items-center.gap-2 { display: none !important; } /* Prev/Next buttons full width */ .flex-1.flex.justify-start, .flex-1.flex.justify-end { width: 100%; justify-content: center !important; } .flex-1.flex.justify-start a, .flex-1.flex.justify-start span, .flex-1.flex.justify-end a, .flex-1.flex.justify-end span { flex: 1; justify-content: center; max-width: 150px; } } /* ============================================================================= 12. HEADER SECTIONS - Mobile optimized ============================================================================= */ @media (max-width: 768px) { /* Moroccan red header sections */ .magazine-header, .memorial-header, .personal-header, div[style*="linear-gradient"][style*="C1272D"] { border-radius: 1rem !important; padding: 1.5rem 1rem !important; } /* Header text */ .magazine-header h1, .memorial-header h1, div[style*="linear-gradient"] h1 { font-size: 1.5rem !important; } } /* ============================================================================= 13. BADGES & PILLS - Consistent sizing ============================================================================= */ @media (max-width: 768px) { .tag-pill, .badge-rabbi, .badge-database, .badge-unread, .badge-contact, .badge-researcher, .badge-admin, .badge-system { font-size: 0.6875rem !important; padding: 0.25rem 0.5rem !important; } .filter-tag { padding: 0.5rem 0.875rem !important; font-size: 0.8125rem !important; } } /* ============================================================================= 14. MODALS & OVERLAYS ============================================================================= */ @media (max-width: 768px) { /* Full screen modals */ .fixed.inset-0 > div[class*="bg-white"][class*="rounded"] { width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 1rem 1rem 0 0 !important; max-height: 90vh; position: fixed; bottom: 0; } /* Kaddish popup (search.html) */ #kaddish-overlay > div { margin: 1rem !important; max-height: calc(100vh - 2rem); overflow-y: auto; } } /* ============================================================================= 15. MOBILE HEADER ENHANCEMENTS ============================================================================= */ @media (max-width: 768px) { /* Mobile header bar */ .mobile-header { height: 56px !important; } /* Hamburger button */ #mobileMenuBtn { width: 44px; height: 44px; display: flex !important; align-items: center; justify-content: center; } /* Main content top padding */ .main-wrapper .h-14.md\:hidden { height: 56px !important; } } /* ============================================================================= 16. RTL MOBILE ADJUSTMENTS ============================================================================= */ @media (max-width: 768px) { html[dir="rtl"] .mobile-header { flex-direction: row-reverse; } html[dir="rtl"] input[type="checkbox"], html[dir="rtl"] input[type="radio"] { margin-right: 0; margin-left: 0.75rem; } html[dir="rtl"] .rabbi-card, html[dir="rtl"] .message-card, html[dir="rtl"] .result-card { border-left: none; border-right: 3px solid #d4af37; } } /* ============================================================================= 17. SMOOTH SCROLLING & PERFORMANCE ============================================================================= */ @media (max-width: 768px) { html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } /* Reduce motion for accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Hide scrollbar in sidebar */ .sidebar nav { scrollbar-width: none; -ms-overflow-style: none; } .sidebar nav::-webkit-scrollbar { display: none; } } /* ============================================================================= 18. SAFE AREAS (iPhone notch) ============================================================================= */ @supports (padding: max(0px)) { @media (max-width: 768px) { .mobile-header { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } .sidebar { padding-bottom: max(1rem, env(safe-area-inset-bottom)); } /* Footer safe area */ footer { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); } } } /* ============================================================================= 19. SPECIFIC PAGE FIXES ============================================================================= */ @media (max-width: 768px) { /* Search page (search.html) - already has good mobile support */ #enhancedSearchForm .grid { gap: 0.75rem !important; } /* Dashboard KPIs */ .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; } .kpi-card { padding: 0.875rem !important; } /* Candle page - burial list items */ .candle-item, .burial-item { padding: 0.875rem !important; } /* Profile page - form sections */ .profile-section { padding: 1rem !important; } /* Contact page - social icons */ .flex.gap-3:has(.rounded-full) { flex-direction: row !important; justify-content: center; } .flex.gap-3:has(.rounded-full) > * { width: auto !important; } } /* ============================================================================= 20. SEARCH RESULTS SPECIFIC (search.html) ============================================================================= */ @media (max-width: 768px) { /* Results header */ #resultsContainer .p-5 { padding: 1rem !important; } /* Result item */ .result-item { padding: 1rem !important; } /* Result actions */ .result-item .flex.gap-2 { flex-wrap: wrap; } .result-item button, .result-item a.btn { flex: 1 1 calc(50% - 0.25rem); min-width: 120px; text-align: center; justify-content: center; } /* Variants box */ #variantsSection { padding: 0.875rem !important; } /* AI report section */ #reportSection { padding: 1rem !important; } } /* ============================================================================= 21. LINE CLAMP SUPPORT (for older browsers) ============================================================================= */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }