/* ============================================================ Pawty Yoga, mobile.css (added 9.21.2026, mobile audit) ============================================================ Loaded LAST on every page (homepage, neighborhood/template pages, blog, /es/, /events/, standalone pages). Purely additive: it fixes touch, viewport, safe-area and tap-target behavior on iPhone Safari and Android Chrome without changing the desktop design. Sections 1. Text inflation + tap delay + tap highlight 2. Hover states must not stick on touch screens 3. 48px tap targets for dense link areas 4. Safe-area insets (notch, home indicator, standalone mode) 5. Small-viewport units for full-height blocks 6. Landscape phones 7. Horizontal scrollers (momentum + no back-swipe hijack) ============================================================ */ /* ---------- 1. Text inflation, tap delay, tap highlight ---------- */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } a, button, summary, label, input, select, textarea, [role="button"] { touch-action: manipulation; /* removes the 300ms double-tap-to-zoom delay */ } .np-btn, .btn-primary, .btn-secondary, .btn-white, .btn-event, .btn-join, .vhero-cta, .nav-cta, .nav-toggle, .np-link-row a, .np-linkgrid a, button[type="submit"] { -webkit-tap-highlight-color: transparent; /* custom :active states replace the grey flash */ } /* Immediate press feedback on the primary buttons (iOS and Android both fire :active on touch) */ .np-btn:active, .btn-primary:active, .btn-event:active, .vhero-cta:active, button[type="submit"]:active { transform: translateY(1px) scale(0.99); transition-duration: 0.05s; } /* ---------- 2. Hover must not stick on touch ---------- Every lift/shadow hover rule in index.html, neighborhoods.css and blog.css is reset to its true resting state when the primary input cannot hover. On a phone, the tapped card otherwise stays "lifted" until you tap elsewhere. */ @media (hover: none) { .btn-primary:hover { transform: none; box-shadow: 0 10px 28px rgba(232,128,90,0.25); } .btn-secondary:hover{ transform: none; box-shadow: none; } .btn-white:hover { transform: none; box-shadow: 0 4px 14px rgba(0,0,0,0.10); } .btn-event:hover { transform: none; box-shadow: none; } .btn-join:hover { transform: none; } .vhero-cta:hover { transform: none; } .fit-card:hover { transform: none; box-shadow: 0 8px 22px rgba(61,43,31,0.05); } .joy-card:hover { transform: none; box-shadow: none; } .trust-card:hover { transform: none; box-shadow: none; } .event-card:hover { transform: none; box-shadow: 0 10px 26px rgba(61,43,31,0.06); } .memory-card:hover { transform: none; box-shadow: 0 16px 40px rgba(61,43,31,0.12); } .review-card:hover { transform: none; box-shadow: none; } .about-value:hover { transform: none; box-shadow: none; } .blog-card:hover { transform: none; box-shadow: 0 4px 16px rgba(61,43,31,0.05); } #peekPuppy:hover { transform: none; } /* colour-only hovers are harmless, but the cross-link pills invert fully; keep them calm */ .np-cross-links a:hover { background: white; color: var(--brown, #3D2B1F); border-color: rgba(61,43,31,0.12); } .np-faq details:hover:not([open]), .blog-article details:hover:not([open]) { border-color: rgba(61,43,31,0.08); } } /* ---------- 3. Tap targets (WCAG 2.5.8 / Apple HIG 44pt, we use 48) ---------- */ @media (max-width: 900px) { /* Sitewide dark footer: 50+ stacked links were 29px tall and 3px apart */ section[aria-label="Sitemap and quick links"] a { display: flex !important; align-items: center; min-height: 44px; padding: 0.35rem 0 !important; } /* Related-pages grid on the template pages: bare links in a grid */ .np-linkgrid a { display: flex; align-items: center; min-height: 48px; padding: 0.4rem 0.6rem; margin: 0 -0.6rem; border-radius: 0.6rem; } /* FAQ accordions: the summary is the only toggle, it was 24px tall */ .np-faq summary, .blog-article summary, details.faq-item summary { min-height: 44px; align-items: center; padding: 0.2rem 0; } /* Breadcrumbs, nav CTA, footer rows */ .np-breadcrumbs ol li a { min-height: 44px; display: inline-flex; align-items: center; padding: 6px 6px; } .np-nav .nav-cta, nav .nav-cta { min-height: 44px; display: inline-flex; align-items: center; } .footer-links a, footer.np-footer .footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.35rem; } /* Inline email / phone links under forms and in body copy: enlarge the hit zone without moving the text (negative margin cancels the padding). */ a[href^="mailto:"], a[href^="tel:"] { display: inline-block; padding: 0.85rem 0.15rem; margin: -0.85rem -0.15rem; } /* Checkboxes and radios: 18px boxes become 24px, the wrapping label stays the real target */ input[type="checkbox"], input[type="radio"] { width: 24px !important; height: 24px !important; min-width: 24px; } /* The homepage burger menu on short screens (landscape phones): scroll inside, never off-screen */ .mobile-menu { max-height: calc(100vh - 92px); max-height: calc(100svh - 92px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } } /* ---------- 4. Safe-area insets ---------- */ /* Landscape on notched phones: keep nav content and body text out of the notch/corner radius */ @media (max-width: 900px) { nav.np-nav, body > nav { padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); } .np-hero, section.np-section, .np-cross-links, .np-final-cta, footer.np-footer, .blog-article, .wrap, .page-wrap > section, .page-wrap > footer { padding-left: max(1.3rem, env(safe-area-inset-left)); padding-right: max(1.3rem, env(safe-area-inset-right)); } body { padding-bottom: env(safe-area-inset-bottom); } } /* Installed to the home screen (manifest display: standalone + apple-mobile-web-app-capable): the status bar overlays the page, so the fixed nav must drop below it. */ @media (display-mode: standalone) { nav.np-nav, body > nav { padding-top: env(safe-area-inset-top); height: calc(80px + env(safe-area-inset-top)); } .np-breadcrumbs { margin-top: calc(80px + env(safe-area-inset-top)); } .mobile-menu { top: calc(76px + env(safe-area-inset-top)); } #pawScrollBar { top: calc(76px + env(safe-area-inset-top)); } } @media (display-mode: standalone) and (max-width: 900px) { body > nav { height: calc(76px + env(safe-area-inset-top)); } } /* ---------- 5. Small-viewport units ---------- 100vh on iOS Safari includes the space under the collapsible address bar, so "full height" blocks overflow by ~60px until the user scrolls. svh is the height with the bar expanded, which is what we want for above-the-fold blocks. */ /* NOTE: the homepage hero CSS lives in a