/* ================================================================ Mobile input guard – v2 Keeps touch interactions independent from desktop hover effects. Works in tandem with mobile-input.js which manages the av-touch-device / av-touching / av-touch-scrolling classes on . ================================================================ */ /* ── 1. Base touch improvements ─────────────────────────────── */ @media (hover: none), (pointer: coarse) { html, body { -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto; } /* Remove 300ms tap delay, tap highlight flash, and cursor discrepancy */ a, button, input, select, textarea, label, summary, [role="button"], [tabindex], .btn, [class*="-btn"], [class*="btn-"] { touch-action: manipulation; cursor: default !important; -webkit-tap-highlight-color: transparent; } /* Remove outline/focus-ring glow that appears on tap on mobile */ a:focus:not(:focus-visible), button:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible), .btn:focus:not(:focus-visible), [class*="-btn"]:focus:not(:focus-visible), [class*="btn-"]:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* Scrollable containers get proper touch panning */ :where( .destinations-grid, .tdest-viewport, .tdest-track, .ths-grid, .ttag-viewport, .ttag-track, .tpd-viewport, .tpd-track, .home-blogs-viewport, .home-ferry-slider-viewport, .home-ferry-slider-track, .home-boats-grid, .tour-mobile-sheet-results, .trf-fleet-viewport, .tsd-list, .avp-panel, .avtp-panel ) { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; } } /* ── 2. Freeze transitions while a finger is actively pressing ─ Prevents "hover animation plays forward on tap" effect. */ html.av-touching :where( a, button, [role="button"], .btn, [class*="-btn"], [class*="btn-"], [class*="-card"], [class*="card-"], [class*="-item"], [class*="item-"], [class*="-link"], [class*="link-"], [class*="-tab"], [class*="tab-"], [class*="-arrow"], [class*="arrow-"] ) { transition-duration: 0s !important; transition-delay: 0s !important; } /* ── 3. Suppress :hover visual side-effects on touch devices ── When a touch user taps something, browsers fire a fake :hover. These rules make sure that fake hover never *looks* like a desktop hover (no background flash, no shadow glow, etc.). */ html.av-touch-device body :where( a, button, [role="button"], .btn, [class*="-btn"], [class*="btn-"], [class*="-card"], [class*="card-"], [class*="-item"], [class*="item-"], [class*="-link"], [class*="link-"], [class*="-tab"], [class*="tab-"], [class*="-arrow"], [class*="arrow-"] ):hover { transform: none !important; outline: none !important; } /* Child images / icons inside hovered links/cards */ html.av-touch-device body :where( a, button, [role="button"], .btn, [class*="-btn"], [class*="btn-"], [class*="-card"], [class*="card-"], [class*="-item"], [class*="item-"], [class*="-link"], [class*="link-"], [class*="-tab"], [class*="tab-"], [class*="-arrow"], [class*="arrow-"] ):hover :where(img, svg, picture, video, .logo-mark, .hb-image) { transform: none !important; } /* ── 4. While finger is actively moving: block all pointer events on body ── av-touch-moving is set on only while the finger physically moves, and removed IMMEDIATELY on pointerup — so clicks always fire normally. Native browser scrolling is NOT affected by pointer-events CSS. */ html.av-touch-moving body { pointer-events: none !important; } /* ── 5. During scroll momentum (after finger lifts): freeze transitions ─── */ html.av-touch-scrolling body :where( a, button, [role="button"], .btn, [class*="-btn"], [class*="btn-"], [class*="-card"], [class*="card-"], [class*="-item"], [class*="item-"], [class*="-link"], [class*="link-"], [class*="-tab"], [class*="tab-"], [class*="-arrow"], [class*="arrow-"] ) { transition-duration: 0s !important; transition-delay: 0s !important; }