/* ========================================================================== MY AGENCY FINDS — RESPONSIVE FIXES Covers: iPhone SE (375px) → phones → tablets → laptops Load AFTER style.css AND mobile-improvements.css in Does NOT change any design — only fixes layout/overflow/spacing ========================================================================== */ /* ── 0. GLOBAL OVERFLOW GUARD ─────────────────────────────────────────── */ html, body { overflow-x: hidden; width: 100%; } /* ── 1. CONTAINER PADDING SCALE ───────────────────────────────────────── */ /* Desktop: 24px (unchanged) */ /* Tablet: 16px */ /* Phone: 14px */ @media (max-width: 768px) { .container { padding-left: 16px; padding-right: 16px; } } @media (max-width: 480px) { .container { padding-left: 14px; padding-right: 14px; } } /* ── 2. NAVIGATION ────────────────────────────────────────────────────── */ @media (max-width: 768px) { .nav-container { height: 64px; padding: 0 16px; } header.scrolled .nav-container { height: 58px; } /* Logo never wraps or overflows */ .logo { font-size: 1rem; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } /* Verified badge — hide label text on phones, keep icon */ .verified-badge span:not(.verified-icon) { display: none; } .verified-badge { padding: 6px 10px; } } /* iPhone SE (375px) */ @media (max-width: 390px) { .logo { font-size: 0.9rem; max-width: 140px; } .emotive-logo-dot { width: 28px; height: 28px; flex-shrink: 0; } } /* ── 3. HERO ──────────────────────────────────────────────────────────── */ /* Tablet */ @media (max-width: 991px) and (min-width: 641px) { .hero { padding-top: 110px; padding-bottom: 48px; } .hero-content h1 { font-size: clamp(2rem, 4.5vw, 3rem); } } /* Phone */ @media (max-width: 640px) { .hero { padding-top: 96px; padding-bottom: 32px; } .hero-content h1 { font-size: clamp(1.65rem, 7.5vw, 2.2rem); margin-bottom: 12px; } .hero-subtitle { font-size: 0.9rem; line-height: 1.6; } .hero-badge { font-size: 0.7rem; padding: 4px 10px; margin-bottom: 16px; } /* CTA buttons stack on very small screens */ .hero-cta-group { flex-direction: column; width: 100%; gap: 10px; } .hero-cta-group .btn-primary, .hero-cta-group .btn-secondary { width: 100%; text-align: center; justify-content: center; } } /* iPhone SE (375px) */ @media (max-width: 390px) { .hero-content h1 { font-size: clamp(1.5rem, 8vw, 2rem); } .hero-subtitle { font-size: 0.85rem; } } /* ── 4. STAT CARDS ────────────────────────────────────────────────────── */ @media (max-width: 640px) { .hero-stats-column { flex-direction: column !important; gap: 8px; margin-top: 16px; width: 100%; } .stat-card { padding: 12px 14px; width: 100%; } .stat-card .stat-number { font-size: 1.4rem; } .stat-card .stat-label { font-size: 0.8rem; } .stat-card .stat-sub { font-size: 0.68rem; } } /* ── 5. FILTERS ───────────────────────────────────────────────────────── */ @media (max-width: 768px) { .filters-wrapper { padding: 16px !important; } } @media (max-width: 640px) { .filters-wrapper { padding: 14px 12px !important; border-radius: 12px; } /* Country buttons row wraps cleanly */ .country-selector-group { flex-wrap: wrap; gap: 6px; } .btn-country { height: 28px !important; font-size: 0.7rem !important; padding: 0 10px !important; } /* Sector chips — finger friendly */ .scroll-chips-container .btn-filter { height: 34px !important; padding: 0 14px !important; font-size: 0.76rem !important; } .filter-label { font-size: 0.7rem; } /* Chips bleed to screen edge */ .scroll-chips-row-wrapper { margin: 0 -12px; padding: 0 12px; } .scroll-chips-container { padding: 2px 12px !important; } } /* ── 6. RESULTS BAR ───────────────────────────────────────────────────── */ @media (max-width: 640px) { .results-meta-container { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 0; } .results-count { font-size: 0.875rem; } } /* ── 7. AGENCY CARDS ──────────────────────────────────────────────────── */ /* Tablet: 2 columns already set in style.css — just tighten card internals */ @media (max-width: 991px) and (min-width: 641px) { .agency-card { padding: 22px 20px; } } /* Phone: single column */ @media (max-width: 640px) { .agency-card { padding: 20px 16px; border-radius: 16px; min-height: unset; } /* No hover lift on touch screens — prevents stuck elevated state */ @media (hover: none) { .agency-card:hover { transform: none !important; box-shadow: var(--shadow-md) !important; } } .card-header-left { gap: 0; align-items: flex-start; } .agency-card .agency-title { font-size: 0.95rem; line-height: 1.3; } .card-top { margin-bottom: 14px; } .card-desc { font-size: 0.82rem; min-height: unset; -webkit-line-clamp: 3; } /* Primary CTA — full width, large tap target */ .btn-card-call { width: 100%; padding: 14px 16px; font-size: 0.875rem; border-radius: 10px; justify-content: center; } /* Secondary buttons — 3 columns, tighter on mobile */ .secondary-actions { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .btn-card-sec { flex: 1; padding: 10px 6px; font-size: 0.74rem; border-radius: 8px; justify-content: center; } .card-actions { gap: 10px; flex-direction: column; } .card-badges { gap: 5px; flex-wrap: wrap; } } /* iPhone SE — tightest layout */ @media (max-width: 390px) { .agency-card { padding: 16px 14px; } .agency-card .agency-title { font-size: 0.9rem; } } /* ── 8. WHY US SECTION ────────────────────────────────────────────────── */ @media (max-width: 991px) and (min-width: 641px) { .why-us-section { padding: 64px 0; } .why-us-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 640px) { .why-us-section { padding: 48px 0; } .why-us-grid { grid-template-columns: 1fr; gap: 16px; } .why-us-header h2 { font-size: clamp(1.35rem, 5.5vw, 1.75rem); } .why-us-card { padding: 24px 20px; } } /* ── 9. FOOTER ────────────────────────────────────────────────────────── */ @media (max-width: 640px) { footer { padding: 40px 0 120px; /* extra clearance above bottom nav */ } .footer-nav { gap: 14px 18px; font-size: 0.85rem; flex-wrap: wrap; } .footer-copyright, .footer-tagline { font-size: 0.76rem; } } /* ── 10. MODAL / REVIEWS ──────────────────────────────────────────────── */ @media (max-width: 640px) { .reviews-modal-content { max-height: 90dvh; max-height: 90vh; /* fallback */ border-radius: 20px 20px 0 0; margin-top: auto; } .reviews-modal-overlay { align-items: flex-end; } } /* ── 11. BOTTOM NAV ───────────────────────────────────────────────────── */ /* Safe area for notch / home bar */ .bottom-nav { padding-bottom: env(safe-area-inset-bottom); height: calc(68px + env(safe-area-inset-bottom)); } /* Bigger tap targets */ @media (max-width: 640px) { .bottom-nav-item { min-height: 44px; font-size: 0.68rem; } .bottom-nav-item svg { width: 22px; height: 22px; } } /* ── 12. MOBILE MENU DRAWER ───────────────────────────────────────────── */ @media (max-width: 640px) { .mobile-menu-drawer { width: 88%; padding-top: 68px; } .mobile-menu-links a { font-size: 1.15rem; } .mobile-menu-links { gap: 22px; } } /* ── 13. SAFE AREA NOTCH (iPhone X+) ─────────────────────────────────── */ @media (max-width: 768px) { body { padding-bottom: max(74px, calc(74px + env(safe-area-inset-bottom))); } header { padding-top: env(safe-area-inset-top); } } /* ── 14. TOUCH INTERACTION POLISH ─────────────────────────────────────── */ /* Remove 300ms tap delay */ button, a, [role="button"] { touch-action: manipulation; } /* Remove iOS blue tap flash */ * { -webkit-tap-highlight-color: transparent; } /* Slightly more breathing room for body text on small screens */ @media (max-width: 640px) { p, li { line-height: 1.65; } } /* ── 15. PREVENT iOS FONT ZOOM ON INPUT FOCUS ─────────────────────────── */ /* iOS zooms when any input < 16px is focused */ input, select, textarea { font-size: max(16px, 1em); } /* Restore visual sizes for chip buttons that have explicit heights */ .btn-filter, .btn-country, .btn-nav-cta, .btn-card-call, .btn-card-sec, .bottom-nav-item { font-size: revert; } /* ── 16. TABLET (768–991px) SPECIFIC ──────────────────────────────────── */ @media (max-width: 991px) and (min-width: 769px) { /* 2-column card grid tightens gap */ .agencies-grid { gap: 20px; } /* Nav still shows desktop style but container tightens */ .nav-container { padding: 0 20px; } /* Hero grid single column earlier on tablet */ .hero-grid { grid-template-columns: 1fr; gap: 32px; } } /* ── 17. LAPTOP / WIDE SCREEN ──────────────────────────────────────────── */ /* Nothing to break at 1024px+ — styles designed for desktop first These ensure the layout doesn't feel cramped between 992–1280px */ @media (min-width: 992px) and (max-width: 1280px) { .container { padding-left: 32px; padding-right: 32px; } }