/* Mobile-First Critical CSS Fixes for NexAgua Solutions */ /* Add this to your main stylesheet or link in : */ /* =================================== 1. CLICKABLE PHONE NUMBERS ON MOBILE =================================== */ a[href^="tel:"] { color: #FF6B35; text-decoration: none; font-weight: 600; transition: color 0.2s; } a[href^="tel:"]:hover { color: #e55a2b; text-decoration: underline; } /* =================================== 2. MINIMUM TAP TARGET SIZES =================================== */ .btn, button, .cta, input[type="submit"], input[type="button"] { min-height: 44px; min-width: 44px; padding: 12px 24px; } /* =================================== 3. PREVENT iOS AUTO-ZOOM =================================== */ body { font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%; } input, textarea, select { font-size: 16px !important; padding: 12px; } /* =================================== 4. STICKY MOBILE CTA =================================== */ .mobile-sticky-cta { display: none; } @media (max-width: 768px) { .mobile-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background: #FF6B35; padding: 12px 16px; text-align: center; z-index: 999; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15); } .mobile-sticky-cta a { color: white; text-decoration: none; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; } body { padding-bottom: 60px; } } /* =================================== 5. READABLE TEXT ON MOBILE =================================== */ @media (max-width: 768px) { p { font-size: 16px; line-height: 1.6; } h1 { font-size: 28px; } h2 { font-size: 24px; } h3 { font-size: 20px; } } /* =================================== 6. HORIZONTAL SCROLL PREVENTION =================================== */ html, body { overflow-x: hidden; } img { max-width: 100%; height: auto; } /* =================================== 7. MOBILE-OPTIMIZED FORMS =================================== */ @media (max-width: 768px) { form { width: 100%; padding: 16px; } button[type="submit"], input[type="submit"] { width: 100%; margin-top: 16px; } }