/** * FareEagle Mobile Enhancements * Upload to: public_html/assets/css/mobile.css * Include in of all pages: * * Adds: * - Larger CTA buttons on mobile * - Spacious flight cards * - Pull-to-refresh visual * - Safe area insets for notched phones * - Tap highlight removal * - Better touch targets */ /* ═══ BASE MOBILE ═══ */ @media (max-width: 768px) { /* Remove tap highlight everywhere */ * { -webkit-tap-highlight-color: transparent; } /* Safe area padding for notched phones */ body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* ═══ LARGER CTAs ═══ */ /* Primary buttons need to be thumb-friendly (min 48px touch target) */ .btn, button[type="submit"], input[type="submit"], .btn-primary, .btn-green, .btn-outline { min-height: 48px !important; font-size: 15px !important; padding: 12px 24px !important; } /* Search button on homepage */ .search-btn, button.search-btn, .hero-search button[type="submit"] { font-size: 16px !important; padding: 14px 28px !important; min-height: 52px !important; } /* ═══ FLIGHT CARDS — SPACIOUS ═══ */ .flight-card { border-radius: 16px !important; margin-bottom: 12px !important; } .flight-main { padding: 16px 16px !important; } /* Make time text larger and more readable */ .time { font-size: 22px !important; font-weight: 600 !important; } .airport { font-size: 12px !important; } /* Airline info row */ .airline-logo { width: 36px !important; height: 36px !important; } .airline-name { font-size: 14px !important; } /* Duration / stops */ .duration-line { margin: 0 8px !important; } .duration-text { font-size: 12px !important; } /* Price on card */ .card-price, .fare-price, .fc-price { font-size: 20px !important; font-weight: 700 !important; } /* Leg row - stack better */ .leg-row { grid-template-columns: 1fr !important; gap: 12px !important; padding: 10px 0 !important; } /* ═══ FORM INPUTS ═══ */ .form-input, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select { min-height: 46px !important; font-size: 16px !important; /* Prevents iOS zoom on focus */ } /* ═══ HEADER — COMPACT ═══ */ .header-inner, .header-content, .nav-inner { padding: 0 16px !important; } /* ═══ RESULTS PAGE ═══ */ .results-container { padding: 12px !important; gap: 12px !important; } /* Sort bar */ .sort-bar { padding: 8px 12px !important; flex-wrap: wrap !important; gap: 8px !important; } /* Filter pills */ .filter-chip, .time-pill { min-height: 36px !important; padding: 8px 14px !important; } /* ═══ FARE TABS ═══ */ .fare-tab { padding: 12px !important; } .fare-tab .price { font-size: 16px !important; } /* ═══ BOOKING PAGES ═══ */ .passenger-card { padding: 16px !important; } .step-indicator { font-size: 13px !important; padding: 10px 14px !important; } } /* ═══ SMALL PHONES (< 400px) ═══ */ @media (max-width: 400px) { .time { font-size: 20px !important; } .flight-main { padding: 12px !important; } .card-price, .fare-price, .fc-price { font-size: 18px !important; } } /* ═══ PULL TO REFRESH ═══ */ .ptr-indicator { display: none; position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 10000; background: #fff; border-radius: 0 0 16px 16px; padding: 10px 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); font-size: 13px; color: #86868b; font-weight: 500; transition: opacity 0.2s; } .ptr-indicator.show { display: flex; align-items: center; gap: 8px; animation: ptrSlide 0.3s ease; } .ptr-spinner { width: 16px; height: 16px; border: 2px solid #e5e5ea; border-top-color: #e8734a; border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes ptrSlide { from { transform: translateX(-50%) translateY(-100%); } to { transform: translateX(-50%) translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════ SMOOTHNESS & INTERACTION POLISH ═══════════════════════════════════════ */ /* Remove 300ms tap delay on all clickable elements */ @media (max-width: 768px) { a, button, input, select, textarea, label, [onclick], [role="button"], .ap-opt, .ap-item { touch-action: manipulation; } /* Smooth focus transitions on inputs */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], textarea, .form-input { transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.2s ease !important; } /* Custom appearance only for text-like inputs (preserve native date/time pickers) */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"] { -webkit-appearance: none; appearance: none; } select { transition: border-color 0.25s ease, box-shadow 0.25s ease !important; } /* Softer, more visible focus ring */ input:focus, select:focus, textarea:focus, .form-input:focus { box-shadow: 0 0 0 4px rgba(232,115,74,0.12) !important; border-color: #e8734a !important; outline: none !important; } /* ═══ AIRPORT AUTOCOMPLETE DROPDOWN ═══ */ /* Smooth open/close - only override when .open is toggled */ .ap-dd.open { animation: dropdownIn 0.2s ease both; } /* Smoother item press feedback */ .ap-opt, .ap-item { transition: background-color 0.15s ease, transform 0.1s ease; } .ap-opt:active, .ap-item:active { background: #f0f0f5 !important; transform: scale(0.98); } /* ═══ BUTTONS — PRESS FEEDBACK ═══ */ .btn, button, input[type="submit"], .btn-primary, .btn-green, .btn-outline, .btn-book, .search-btn, .svc-tab, .tab-btn { transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; } .btn:active, button:active, input[type="submit"]:active, .btn-primary:active, .btn-green:active, .btn-outline:active, .btn-book:active, .search-btn:active { transform: scale(0.97) !important; opacity: 0.9; } /* ═══ PASSENGER CARDS — SMOOTHER ACCORDION ═══ */ .passenger-card .pax-body { transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important; } /* ═══ SELECT DROPDOWNS — CUSTOM ARROW ═══ */ select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2386868b' d='M3 4.5L6 8l3-3.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px !important; padding-right: 32px !important; background-color: #fff !important; } /* ═══ SMOOTH SCROLLING ═══ */ html { scroll-behavior: smooth; } .results-container, .filters, .ap-dd, .hotel-thumbs, .room-list, .fare-tabs { -webkit-overflow-scrolling: touch; } /* ═══ FIELD FOCUS STATE ═══ */ .field { transition: all 0.2s ease; } .field:focus-within { border-color: #e8734a !important; box-shadow: 0 0 0 4px rgba(232,115,74,0.08); } /* ═══ FLIGHT CARD TAP FEEDBACK ═══ */ .flight-card { transition: all 0.15s ease; } .flight-card:active { transform: scale(0.985); box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; } /* ═══ HOTEL CARD TAP FEEDBACK ═══ */ .hotel-card { transition: all 0.15s ease; } .hotel-card:active { transform: scale(0.985); } /* ═══ CHECKBOX & RADIO — LARGER TOUCH TARGETS ═══ */ input[type="checkbox"], input[type="radio"] { min-width: 20px !important; min-height: 20px !important; } /* ═══ TABS — SMOOTH SWITCHING ═══ */ .svc-tab, .tab-btn, .modify-tab { transition: all 0.2s ease; } .svc-tab:active, .tab-btn:active { transform: scale(0.96); } /* ═══ SWAP BUTTON — SMOOTH ROTATE ═══ */ .swap-btn { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .swap-btn:active { transform: rotate(180deg) scale(0.9) !important; } /* ═══ PAGE CONTENT — FADE IN (first load only via JS class) ═══ */ .mfade-in { animation: mFadeIn 0.3s ease both; } /* ═══ MODAL / LIGHTBOX ═══ */ .lightbox, .modal, .overlay { transition: opacity 0.25s ease; } /* ═══ PROGRESS BAR ═══ */ .progress-step .step-dot, .progress-step .step-line { transition: all 0.3s ease; } } @keyframes mFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════ BOTTOM NAVIGATION BAR ═══════════════════════════════════════ */ .mnav{display:none} @media(max-width:768px){ .mnav{ display:flex; position:fixed; bottom:0;left:0;right:0; z-index:9999; background:rgba(255,255,255,0.92); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-top:0.5px solid rgba(0,0,0,0.08); padding:6px 0 max(6px, env(safe-area-inset-bottom)); align-items:flex-end; justify-content:space-around; } .mnav-item{ display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; color:#86868b; font-size:10px; font-weight:500; padding:4px 8px; min-width:56px; -webkit-tap-highlight-color:transparent; transition:color 0.15s; } .mnav-item.active{color:#e8734a} .mnav-item.active .mnav-icon{stroke:#e8734a} .mnav-icon{width:22px;height:22px;stroke:#86868b;transition:stroke 0.15s} .mnav-item.active .mnav-avatar{background:#e8734a} /* Center FAB search button */ .mnav-center{position:relative;padding-top:0} .mnav-fab{ width:48px;height:48px; background:linear-gradient(135deg,#e8734a 0%,#f59e0b 100%); border-radius:50%; display:flex;align-items:center;justify-content:center; margin-top:-22px; box-shadow:0 4px 12px rgba(232,115,74,0.35); transition:transform 0.15s; } .mnav-fab svg{stroke:#fff} .mnav-center:active .mnav-fab{transform:scale(0.92)} .mnav-center span{color:#e8734a;font-weight:600} .mnav-avatar{ width:22px;height:22px; border-radius:50%; background:#86868b; color:#fff; font-size:11px; font-weight:700; display:flex;align-items:center;justify-content:center; transition:background 0.15s; } } @keyframes dropdownIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }