/* TripHero shared mobile styles. Loaded on every page so phone layout is consistent site-wide. Desktop is untouched - everything here is inside a media query. */ @media (max-width: 900px) { .th-two, [style*="grid-template-columns:1.35fr"], [style*="grid-template-columns:1.15fr"], [style*="grid-template-columns:1.1fr"], [style*="grid-template-columns:2fr"] { grid-template-columns: 1fr !important; } } @media (max-width: 760px) { /* --- global rhythm ------------------------------------------------- */ body { -webkit-text-size-adjust: 100%; } nav, header, section, footer, main > div > section { padding-left: 18px !important; padding-right: 18px !important; } h1 { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.1 !important; } h2 { font-size: clamp(22px, 6vw, 27px) !important; line-height: 1.18 !important; } h3 { font-size: clamp(18px, 5vw, 22px) !important; } /* Every multi-column grid collapses to one column on a phone. */ [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* Big hero type shrinks rather than overflowing. */ [style*="font-size:52px"], [style*="font-size:60px"], [style*="font-size:46px"], [style*="font-size:44px"] { font-size: 32px !important; } [style*="font-size:38px"], [style*="font-size:34px"] { font-size: 27px !important; } [style*="font-size:30px"] { font-size: 24px !important; } /* --- touch targets -------------------------------------------------- */ /* 44px is the minimum comfortable tap target. */ a.th-btn, button, .th-btn { min-height: 46px !important; display: flex !important; align-items: center !important; justify-content: center !important; } input, select, textarea { font-size: 16px !important; /* stops iOS zooming on focus */ min-height: 46px !important; box-sizing: border-box !important; } /* --- modals --------------------------------------------------------- */ /* Full-height sheets read better than floating cards on a phone. */ .th-modal { max-height: 92vh !important; border-radius: 20px !important; padding-left: 20px !important; padding-right: 20px !important; } /* --- cards and panels ----------------------------------------------- */ [style*="border-radius:28px"], [style*="border-radius:26px"], [style*="border-radius:24px"] { border-radius: 18px !important; } [style*="padding:46px"], [style*="padding:52px"], [style*="padding:44px"], [style*="padding:40px"] { padding: 22px !important; } /* Long horizontal rows scroll instead of squeezing. */ .th-scroll-x { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .th-scroll-x > * { scroll-snap-align: start; flex: 0 0 86%; } /* --- tables --------------------------------------------------------- */ table { display: block; overflow-x: auto; white-space: nowrap; } /* --- floating controls ---------------------------------------------- */ /* Keep the chat button and back-to-top clear of the thumb zone. */ [style*="position:fixed"][style*="bottom:28px"] { bottom: 16px !important; } } @media (max-width: 480px) { nav, header, section, footer { padding-left: 14px !important; padding-right: 14px !important; } h1 { font-size: 26px !important; } [style*="font-size:52px"], [style*="font-size:60px"] { font-size: 28px !important; } /* Stack anything still trying to sit side by side. */ [style*="display:flex"][style*="gap:14px"], [style*="display:flex"][style*="gap:16px"], [style*="display:flex"][style*="gap:20px"] { flex-wrap: wrap !important; } } /* Accessibility: visible keyboard focus (WCAG 2.4.7) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 3px solid #7aa2ff !important; outline-offset: 2px !important; } /* Native app chrome. Applied only inside the iOS and Android shells, where th-native.js adds .th-native to . */ .th-native body { padding-top: env(safe-area-inset-top); } .th-native .th-web-only { display: none !important; } .th-ios input, .th-ios select, .th-ios textarea { font-size: 16px; } /* stops iOS zoom on focus */ html.th-offline body::before { content: "You are offline. Showing your saved trips."; display: block; background: #b26a00; color: #fff; font: 500 13px/1.5 'Inter', sans-serif; text-align: center; padding: 8px 12px; }