/* ========================================================================= Travel Oahu Local Style Pro — mobile.css Mobile + responsive overrides ========================================================================= */ @media (max-width: 900px) { .tols-primary-nav, .tols-header-cta { display: none; } .tols-mobile-toggle { display: flex; } .tols-sticky-cta { display: flex; } .tols-footer-top { grid-template-columns: 1fr; } .tols-footer-cols { grid-template-columns: repeat(2,1fr); } .tols-hero-picks { padding: 20px; } } @media (max-width: 760px) { .tols-hero { padding: 60px 0 100px; } .tols-hero-trust { gap: 12px; } .tols-hero-quickstart-chips .tols-chip { font-size: 0.82rem; padding: 6px 10px; } .tols-hero-pick { grid-template-columns: 32px 1fr 24px; gap: 8px; } .tols-section { padding: 56px 0; } .tols-newsletter-card { padding: 24px; } } @media (max-width: 540px) { .tols-footer-cols { grid-template-columns: 1fr; } .tols-hero-title { font-size: 2rem; } .tols-product-card { padding: 18px; } .tols-product-proscons { grid-template-columns: 1fr; } .tols-quiz-shell { padding: 4px; } } /* Reduced motion — extend to cover all blur/animation pathways */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .tols-hero-particles, .tols-hero-waves-svg, .tols-hero-sunset, .tols-hero-ocean { animation: none !important; } .tols-reveal { opacity: 1 !important; transform: none !important; } } /* On smaller viewports, simplify backdrop blurs (perf-expensive on mobile GPUs) */ @media (max-width: 760px) { .tols-search-panel, .tols-site-header.is-scrolled, .tols-mobile-overlay, .tols-archetype-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .tols-hero-particles, .tols-hero-waves-svg { display: none; } .tols-bundle-cover-icon { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Avoid animating box-shadow on mobile — use transform-only hover lifts */ .tols-product-card, .tols-bundle-card, .tols-archetype-card, .tols-trust-card { transition: transform var(--tols-dur) var(--tols-ease) !important; } .tols-product-card:hover, .tols-bundle-card:hover, .tols-archetype-card:hover, .tols-trust-card:hover { box-shadow: var(--tols-shadow-sm); } } /* Stronger focus rings everywhere */ :focus-visible { outline: 3px solid var(--tols-aqua) !important; outline-offset: 2px; border-radius: 6px; } .tols-btn:focus-visible, .tols-archetype-card:focus-visible, .tols-experience-chip:focus-visible, .tols-gear-pill:focus-visible, .tols-mobile-menu a:focus-visible { outline: 3px solid var(--tols-aqua) !important; outline-offset: 3px; } /* Min touch target globally */ .tols-btn { min-height: var(--tols-touch); } .tols-btn-sm { min-height: 36px; } /* Personalization-driven theming (set on ) */ [data-tols-archetype="luxury"] { --tols-gradient-ocean: linear-gradient(135deg, #1a1a2e 0%, #4a4a7a 60%, #ffb703 110%); } [data-tols-archetype="surf"] { --tols-gradient-ocean: linear-gradient(135deg, #003049 0%, #0077b6 50%, #ffb703 110%); } [data-tols-archetype="hiker"] { --tols-gradient-ocean: linear-gradient(135deg, #1b4332 0%, #2d6a4f 60%, #95d5b2 100%); } [data-tols-archetype="family"] { --tols-gradient-ocean: linear-gradient(135deg, #00b4d8 0%, #90e0ef 60%, #fefae0 100%); } [data-tols-archetype="romantic"] { --tols-gradient-ocean: linear-gradient(135deg, #6a040f 0%, #d62828 50%, #ffb703 100%); } /* Print */ @media print { .tols-site-header, .tols-site-footer, .tols-sticky-cta, .tols-hero, .tols-newsletter-section, .tols-quiz-nav, .tols-form-actions, .tols-budget-actions, .tols-packing-actions, .tols-snorkel-actions, .tols-itinerary-actions { display: none !important; } body { background: #fff; color: #000; } .tols-tool, .tols-quiz-result, .tols-budget-result { box-shadow: none; border: 1px solid #000; } }