/* ========================================================================== MY AGENCY FINDS — MOBILE IMPROVEMENTS Add this to the end of style.css (or link after style.css in ) Targets: phones ≤ 640px, small tablets 641–767px, mid tablets 768–991px ========================================================================== */ /* ── 1. SAFE AREA / NOTCH SUPPORT ─────────────────────────────────────── */ /* Mobile only — desktop gets no bottom padding so no white gap appears */ @media (max-width: 768px) { body { padding-bottom: max(74px, calc(74px + env(safe-area-inset-bottom))); } header { padding-top: env(safe-area-inset-top); } } .bottom-nav { padding-bottom: env(safe-area-inset-bottom); height: calc(68px + env(safe-area-inset-bottom)); } /* ── 2. HERO — PHONE LAYOUT ───────────────────────────────────────────── */ @media (max-width: 640px) { .hero { padding-top: 100px; /* was 130px — tighter on small phones */ padding-bottom: 36px; } /* h1 clamp floor was 2.5rem — too large for 375px phones */ .hero-content h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); margin-bottom: 14px; } .hero-subtitle { font-size: 0.95rem; margin-bottom: 24px; } /* Hero badge — reduce weight on small screens */ .hero-badge { font-size: 0.72rem; padding: 4px 10px; margin-bottom: 18px; } /* Stat cards: horizontal row on very small phones would overflow; keep vertical stack but reduce padding */ .hero-stats-column { flex-direction: column !important; gap: 10px; margin-top: 12px; } .stat-card { padding: 14px 16px; border-radius: var(--border-radius-md); } .stat-card .stat-number { font-size: 1.5rem; } .stat-card .stat-label { font-size: 0.8rem; } .stat-card .stat-sub { font-size: 0.68rem; } } /* ── 3. FILTERS SECTION ───────────────────────────────────────────────── */ @media (max-width: 640px) { /* Tighten container padding so chips have more room */ .filters-wrapper { padding: 16px 12px !important; } /* Country region buttons — shrink to fit row on 375px */ .country-selector-group { flex-wrap: wrap; gap: 6px; } .btn-country { height: 26px !important; font-size: 0.7rem !important; padding: 0 10px !important; } /* Sector chips — a touch larger hit target for thumbs */ .scroll-chips-container .btn-filter { height: 34px !important; /* comfortable tap target */ padding: 0 14px !important; font-size: 0.76rem !important; border-radius: var(--border-radius-pill) !important; } .filter-label { font-size: 0.7rem; } /* Chips wrapper margins align with tighter container */ .scroll-chips-row-wrapper { margin: 0 -12px; padding: 0 12px; } .scroll-chips-container { padding: 2px 12px !important; } } /* ── 4. RESULTS COUNT BAR ─────────────────────────────────────────────── */ @media (max-width: 640px) { .results-meta-container { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 0; } .results-count { font-size: 0.9rem; } } /* ── 5. AGENCY CARDS ──────────────────────────────────────────────────── */ @media (max-width: 640px) { /* Full-width single column already set — improve card internals */ .agency-card { padding: 22px 18px; min-height: unset; /* let cards breathe without forced height */ border-radius: 18px; } /* Remove hover lift on touch — prevents "stuck elevated" cards */ @media (hover: none) { .agency-card:hover { transform: none; box-shadow: var(--shadow-md); border-color: rgba(0, 0, 0, 0.01); } } .agency-card .agency-title { font-size: 1rem; } .card-header-left { gap: 0; } .card-top { margin-bottom: 18px; } .card-desc { font-size: 0.825rem; min-height: unset; -webkit-line-clamp: 3; } /* Primary call button — taller tap target */ .btn-card-call { padding: 14px 20px; font-size: 0.875rem; border-radius: 12px; } /* Secondary action buttons — 3 equal columns, finger-friendly */ .secondary-actions { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .btn-card-sec { padding: 10px 6px; font-size: 0.74rem; border-radius: 10px; } .card-actions { gap: 10px; } /* Badges inside card */ .card-badges { gap: 6px; margin-top: 6px; } } /* ── 6. WHY-US SECTION ────────────────────────────────────────────────── */ @media (max-width: 768px) { .why-us-section { padding: 64px 0; } .why-us-header { margin-bottom: 40px; } .why-us-header h2 { font-size: clamp(1.4rem, 5vw, 2rem); } .why-us-subtitle { font-size: 0.925rem; } } @media (max-width: 640px) { .why-us-section { padding: 48px 0; } /* Why-us grid — reduce card padding on phone */ .why-us-card { padding: 28px 22px; } } /* ── 7. NAVIGATION BAR ────────────────────────────────────────────────── */ @media (max-width: 640px) { .nav-container { height: 64px; /* slightly shorter on small phones */ padding: 0 16px; } header.scrolled .nav-container { height: 58px; } /* Logo text — prevent overflow on narrow screens */ .logo { font-size: 1.05rem; gap: 8px; } .emotive-logo-dot { width: 30px; height: 30px; } .emotive-dot-body { width: 23px; height: 23px; } /* "Verified Directory" badge — hide text on very small phones to save space */ .verified-badge span:not(.verified-icon) { display: none; } .verified-badge { padding: 6px 10px; } } /* ── 8. BOTTOM NAV — DARK MODE AWARENESS ─────────────────────────────── */ /* Bottom nav items — bigger touch targets on mobile */ @media (max-width: 640px) { .bottom-nav-item { min-height: 44px; /* Apple HIG minimum tap target */ font-size: 0.68rem; } .bottom-nav-item svg { width: 22px; height: 22px; } } /* ── 9. MOBILE MENU DRAWER ────────────────────────────────────────────── */ @media (max-width: 640px) { .mobile-menu-drawer { width: 90%; /* a touch wider on small phones */ padding-top: 70px; } .mobile-menu-links a { font-size: 1.2rem; /* slightly smaller on 375px */ } .mobile-menu-links { gap: 24px; } } /* ── 10. FOOTER ───────────────────────────────────────────────────────── */ @media (max-width: 640px) { footer { padding: 48px 0 120px; /* extra clearance for bottom nav */ } .footer-nav { gap: 16px 20px; font-size: 0.875rem; } .footer-copyright, .footer-tagline { font-size: 0.78rem; } } /* ── 11. MODAL (REVIEWS) ──────────────────────────────────────────────── */ @media (max-width: 640px) { /* Modal should be nearly full-height on mobile */ .reviews-modal-content { max-height: 90dvh; /* dynamic viewport units — avoids browser-chrome issues */ max-height: 90vh; /* fallback */ border-radius: 20px 20px 0 0; margin-top: auto; /* pin to bottom sheet style */ } .reviews-modal-overlay { align-items: flex-end; /* slide up from bottom */ } } /* ── 12. AGENCY PROFILE VIEW ──────────────────────────────────────────── */ @media (max-width: 640px) { .agency-profile-section { padding: 16px 0 24px; } } /* ── 13. TOUCH & INTERACTION POLISH ──────────────────────────────────── */ /* Prevent 300ms tap delay on all interactive elements */ button, a, [role="button"] { touch-action: manipulation; } /* Remove iOS tap highlight flicker */ * { -webkit-tap-highlight-color: transparent; } /* Improve text readability on small screens */ @media (max-width: 640px) { p, li { line-height: 1.65; } } /* ── 14. HORIZONTAL OVERFLOW GUARD ───────────────────────────────────── */ /* Belt-and-braces: catch anything that causes horizontal scroll */ @media (max-width: 640px) { .container { padding-left: 16px; padding-right: 16px; } } /* ── 15. PREVENT FONT SCALE ZOOM ON INPUT FOCUS (iOS) ────────────────── */ /* iOS zooms in when an input < 16px is focused — this prevents it */ input, select, textarea, button { font-size: max(16px, 1em); } /* Restore visual sizes where needed (chips/filters already use custom heights) */ .btn-filter, .btn-country, .btn-nav-cta, .btn-card-call, .btn-card-sec, .bottom-nav-item { font-size: revert; }