/* ============================================================ Hide the existing Aircraft dropdown in the desktop nav. Aircraft is replaced by our pill. ============================================================ */ .dropdown-2.w-dropdown { display: none !important; } /* ============================================================ Force the navbar to be fully transparent. Without this, on dark-background pages like /all-jets the nav has a slightly different shade than the page body — visible as a horizontal seam. Letting the body bg show through removes it. ============================================================ */ .navbar-logo-center-2, .navbar-logo-center-2 .navbar-2, .navbar-2 { background: transparent !important; } /* ============================================================ Reserve space at the top of the page for the fixed FIFA ticker banner. The home page uses which has padding-top:38px, but /application and other pages use which doesn't — without this rule the hero would visually start at y:0 (under the ticker). ============================================================ */ body.body-2, body.body-3, body.body-4 { padding-top: 38px !important; } /* ============================================================ FIFA ticker overlap fix — /application + /sign-in + /register. On those pages the navbar is wrapped in which is position:fixed; top:0; z-index:9999. The FIFA ticker (z-index:99999) sits on top, hiding the top half of the navbar. Pushing section-11 down by the ticker's height (37px) makes the navbar appear cleanly below the ticker. ============================================================ */ .section-11 { top: 37px !important; } /* ============================================================ Hide the old hexagonal category filter rail on /all-jets. Lives here (site-wide) so the rule persists even after we remove the page-level v2 search code from /all-jets. ============================================================ */ .jets__category-wrap { display: none !important; } /* ============================================================ Charter widget focus mode — when the iframe is being used, dim the rest of the page so the booking flow feels focused. Pure CSS pseudo-element via body::before keeps the backdrop in the root stacking context (no transform-trapped ancestors this time — body is always the topmost SC). ============================================================ */ .tribe-charter-wrap { position: relative; } body.tribe-charter-active::before { content: ''; position: fixed; inset: 0; background: rgba(8, 4, 16, 0.65); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 998; pointer-events: none; animation: tribe-charter-fade 0.22s ease; } body.tribe-charter-active .tribe-charter-wrap { position: relative; z-index: 999; } @keyframes tribe-charter-fade { from { opacity: 0; } to { opacity: 1; } } /* ============================================================ Breadcrumb on aircraft detail pages (/jets/) "← All aircraft" pill, dark-on-light to read against the cream/sky-coloured aircraft hero. ============================================================ */ .tribe-breadcrumb { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 18px 0; padding: 7px 16px; background: rgba(20, 11, 31, 0.05); border: 1px solid rgba(20, 11, 31, 0.25); border-radius: 50px; color: #150b1f; text-decoration: none; font-family: 'Libre Franklin', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; transition: background 0.15s ease, border-color 0.15s ease; } .tribe-breadcrumb:hover { background: rgba(20, 11, 31, 0.12); border-color: rgba(20, 11, 31, 0.5); } .tribe-breadcrumb__arrow { display: inline-block; transition: transform 0.15s ease; } .tribe-breadcrumb:hover .tribe-breadcrumb__arrow { transform: translateX(-3px); } /* ============================================================ Search pill in the nav (desktop) ============================================================ */ .tribe-nav-search-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 14px; background: rgba(242, 220, 196, 0.06); border: 1px solid rgba(242, 220, 196, 0.5); border-radius: 50px; color: #F2DCC4; font-family: 'Libre Franklin', sans-serif; font-size: 12px; letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; margin: 0 6px; white-space: nowrap; } .tribe-nav-search-pill:hover { background: rgba(242, 220, 196, 0.18); border-color: rgba(242, 220, 196, 0.8); transform: translateY(-1px); } .tribe-nav-search-pill svg { flex-shrink: 0; color: rgba(242, 220, 196, 0.85); } /* ============================================================ Mobile search trigger — appears next to hamburger. Oval/pill shape to match the desktop pill aesthetic. ============================================================ */ .tribe-nav-search-mobile { display: none; height: 38px; padding: 0 16px; border: 1px solid rgba(242, 220, 196, 0.5); border-radius: 50px; background: rgba(242, 220, 196, 0.06); color: #F2DCC4; cursor: pointer; align-items: center; justify-content: center; gap: 6px; margin-right: 10px; transition: background 0.15s ease, border-color 0.15s ease; } .tribe-nav-search-mobile:hover { background: rgba(242, 220, 196, 0.18); border-color: rgba(242, 220, 196, 0.8); } .tribe-nav-search-mobile svg { flex-shrink: 0; } /* ============================================================ Responsive — show pill on desktop, icon on mobile ============================================================ */ @media (max-width: 991px) { .tribe-nav-search-pill { display: none; } .tribe-nav-search-mobile { display: inline-flex; } } /* ============================================================ Overlay modal — full-screen search experience ============================================================ */ .tribe-search-overlay { position: fixed; inset: 0; background: rgba(8, 4, 16, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 9999; display: none; overflow-y: auto; padding: 64px 16px 40px 16px; } .tribe-search-overlay.is-open { display: block; } .tribe-search-overlay__close { position: absolute; top: 24px; right: 28px; width: 44px; height: 44px; border-radius: 50%; background: rgba(242, 220, 196, 0.1); border: 1px solid rgba(242, 220, 196, 0.35); color: #F2DCC4; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.15s ease; } .tribe-search-overlay__close:hover { background: rgba(242, 220, 196, 0.22); transform: rotate(90deg); } .tribe-search-overlay__container { max-width: 720px; margin: 0 auto; text-align: center; } .tribe-search-overlay__eyebrow { font-family: 'Libre Franklin', sans-serif; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(242, 220, 196, 0.55); margin-bottom: 10px; } .tribe-search-overlay__title { font-family: 'Playfairdisplay', 'Playfair Display', serif; color: #F2DCC4; font-size: 36px; line-height: 1.1; margin: 0 0 28px 0; } /* Search pill inside overlay */ .tribe-search { max-width: 680px; margin: 0 auto 24px auto; padding: 0 8px; position: relative; } .tribe-search__field { position: relative; display: flex; align-items: center; width: 100%; height: 60px; padding: 0 60px 0 60px; background: rgba(10, 4, 22, 0.95); border: 1px solid rgba(242, 220, 196, 0.6); border-radius: 50px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .tribe-search__field:focus-within { border-color: rgba(242, 220, 196, 0.95); box-shadow: 0 0 0 4px rgba(242, 220, 196, 0.15), 0 12px 40px rgba(0, 0, 0, 0.7); } .tribe-search__icon { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: rgba(242, 220, 196, 0.75); pointer-events: none; } .tribe-search__input { flex: 1; height: 100%; background: transparent; border: none; outline: none; color: #F2DCC4; font-family: 'Libre Franklin', sans-serif; font-size: 16px; letter-spacing: 0.02em; } .tribe-search__input::placeholder { color: rgba(242, 220, 196, 0.5); } .tribe-search__clear { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(242, 220, 196, 0.18); color: #F2DCC4; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 16px; line-height: 1; } .tribe-search.is-active .tribe-search__clear { display: flex; } .tribe-search__clear:hover { background: rgba(242, 220, 196, 0.32); } /* Dropdown — sits in normal flow under the search inside the overlay */ .tribe-search__dropdown { margin: 14px auto 0 auto; max-width: 680px; background: #140a1e; border: 1px solid rgba(242, 220, 196, 0.25); border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7); overflow: hidden; display: none; text-align: left; } .tribe-search__dropdown.is-open { display: block; } .tribe-search__result { display: flex; align-items: center; gap: 16px; padding: 16px 20px; text-decoration: none; color: #F2DCC4; border-bottom: 1px solid rgba(242, 220, 196, 0.08); transition: background 0.12s ease; } .tribe-search__result:last-child { border-bottom: none; } .tribe-search__result:hover, .tribe-search__result.is-active { background: rgba(242, 220, 196, 0.08); } .tribe-search__result img { width: 80px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: rgba(242, 220, 196, 0.05); } .tribe-search__result-text { flex: 1; min-width: 0; } .tribe-search__result-title { font-family: 'Playfairdisplay', 'Playfair Display', serif; font-size: 16px; color: #F2DCC4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tribe-search__result-subtitle { font-family: 'Libre Franklin', sans-serif; font-size: 12px; color: rgba(242, 220, 196, 0.6); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tribe-search__empty, .tribe-search__loading { padding: 24px 16px; text-align: center; color: rgba(242, 220, 196, 0.5); font-family: 'Libre Franklin', sans-serif; font-size: 13px; } /* "View all aircraft" link — escape hatch for users who don't want to search, just browse the full fleet. Sits below the chips. */ .tribe-search-overlay__view-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; padding: 10px 22px; background: transparent; border: 1px solid rgba(242, 220, 196, 0.35); border-radius: 50px; color: #F2DCC4; font-family: 'Libre Franklin', sans-serif; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .tribe-search-overlay__view-all:hover { background: rgba(242, 220, 196, 0.1); border-color: rgba(242, 220, 196, 0.7); } .tribe-search-overlay__view-all-arrow { display: inline-block; transition: transform 0.15s ease; } .tribe-search-overlay__view-all:hover .tribe-search-overlay__view-all-arrow { transform: translateX(3px); } /* Chips inside overlay */ .tribe-chips { max-width: 680px; margin: 8px auto 0 auto; padding: 0 8px; text-align: center; } .tribe-chips__label { font-family: 'Libre Franklin', sans-serif; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(242, 220, 196, 0.45); margin-bottom: 14px; } .tribe-chips__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .tribe-chip { padding: 8px 18px; font-family: 'Libre Franklin', sans-serif; font-size: 12px; letter-spacing: 0.08em; color: #F2DCC4; background: rgba(242, 220, 196, 0.06); border: 1px solid rgba(242, 220, 196, 0.25); border-radius: 50px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .tribe-chip:hover { background: rgba(242, 220, 196, 0.18); border-color: rgba(242, 220, 196, 0.55); transform: translateY(-1px); } /* Lock body scroll while overlay is open */ body.tribe-search-open { overflow: hidden; } @media (max-width: 640px) { .tribe-search-overlay { padding: 56px 12px 32px 12px; } .tribe-search-overlay__close { top: 16px; right: 16px; width: 40px; height: 40px; } .tribe-search-overlay__title { font-size: 26px; } .tribe-search__field { height: 52px; padding: 0 50px 0 52px; } .tribe-search__icon { left: 20px; width: 18px; height: 18px; } .tribe-search__input { font-size: 15px; } .tribe-search__result img { width: 56px; height: 40px; } .tribe-chip { font-size: 11px; padding: 7px 14px; } } /* ============== block separator ============== */ /* List card share button */ .tribe-card-share { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(20, 11, 31, 0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; color: #fff; padding: 0; transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease; } .tribe-card-share:hover { background: rgba(20, 11, 31, 0.92); border-color: rgba(255, 255, 255, 0.4); transform: scale(1.08); } .tribe-card-share svg { width: 16px; height: 16px; } /* Detail-page floating share button */ .tribe-hero-share { position: absolute; top: 28px; right: 28px; width: 48px; height: 48px; border-radius: 50%; background: rgba(20, 11, 31, 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25); cursor: pointer; z-index: 100; display: flex; align-items: center; justify-content: center; color: #fff; padding: 0; transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease; } .tribe-hero-share:hover { background: rgba(20, 11, 31, 0.97); border-color: rgba(255, 255, 255, 0.45); transform: scale(1.06); } .tribe-hero-share svg { width: 20px; height: 20px; } /* Popover */ .tribe-share-popover { position: fixed; background: rgba(20, 11, 31, 0.98); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 6px; z-index: 10000; min-width: 200px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); animation: tribe-share-pop-in 0.18s ease; font-family: 'Libre Franklin', sans-serif; } @keyframes tribe-share-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .tribe-share-option { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; color: #fff; cursor: pointer; text-decoration: none; font-size: 14px; background: transparent; border: 0; width: 100%; text-align: left; transition: background 0.12s ease; } .tribe-share-option:hover { background: rgba(255, 255, 255, 0.08); } .tribe-share-option svg { width: 18px; height: 18px; flex-shrink: 0; } .tribe-share-option--copied { background: rgba(80, 220, 130, 0.15) !important; color: #5fff9c; }