@charset "utf-8"; /* ══════════════════════════════════════════════════════════════════════════ native-tabs.css (UatSea) — URL-fragment-driven tab panes. No JS required. Port of CEI's styles/native-tabs.css — adapted, NOT byte-mirrored, and the differences are exactly why it must never be blind-copied in either direction: · UAS loads FULL Bootstrap 3.3.6 (uas-bootstrap-3.3.6.css), where `.fade { opacity: 0 }` is a REAL rule — on CEI the class is inert. Every pane except the default carries `fade` without `in`, so a rule that only sets `display` shows a full-height, fully TRANSPARENT pane. This is the bug the operator hit on 2026-08-13 with the first no-JS fallback: clicking Itinerary jumped into a viewport-filling blank that WAS the itinerary at opacity 0. Hence the explicit `opacity: 1` below. · The pane id set differs (7 panes; no #air, no #prepost-before/-after, no #promos; #shoreex exists here and is a real pane, not just a link). · UAS has no `.tab-toggle` rows in the mobile bar. MECHANISM + GUARD: identical reasoning to the CEI file (read its header for the full derivation). Short form: the tab links are already `` anchors and the panes already carry the ids, so `:target` can drive the switching. Every rule is guarded by `html:not(.js)` — the marker set inline in includes/stylesheets.php — because a visitor who ARRIVES on `#pricing` with JS running has `:target` pinned to pricing while the script moves `.active`, and without the guard both panes would render. Fails safe: marker absent → native path → the intended no-JS behaviour. TRANSITIONAL. When the tab script goes (utilities.ts initTabs + the inline blocks at the bottom of programdescription.php), drop the guards and the marker; these rules become the only mechanism. ⚠ MAINTENANCE COUPLING: the highlight rules must enumerate the pane ids (CSS cannot compare an href to an id). Source of truth is the tab bar in programdescription.php:113-120. Adding a tab there means adding its id to the two grouped lists below, or it renders un-highlighted (content still works). Current set: description · accreditation · itinerary · pricing · prepost · travelprotection · shoreex. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Which pane shows ────────────────────────────────────────────────── */ /* The addressed pane wins. `opacity: 1` is load-bearing here (see header) — Bootstrap 3.3.6's `.fade` would otherwise render it transparent. */ html:not(.js) .tab-content > .tab-pane:target { display: block; opacity: 1; } /* …and the server-rendered default gets out of the way. Explicit hide, not a conditional show — nav-tabs.css:186 already displays `.active` unconditionally, so without this rule an addressed pane would render IN ADDITION to it. With no fragment present this does not match and the original rules supply the default, so the untargeted page is untouched by this file. */ html:not(.js) .tab-content:has(> .tab-pane:target) > .tab-pane.active:not(:target) { display: none; } /* Fragment navigation must scroll the addressed pane into view — CSS cannot cancel that, but it CAN dictate where it lands. The browser computes the target scroll position as (pane top − scroll-margin-top) and clamps it to the valid scroll range, so a margin larger than the pane's offset from the page top clamps to 0: EVERY tab selection renders from the very top of the page. The value only needs to exceed the pane's document offset; 9999px always does. Operator ruling 2026-08-14, from testing the first shipped value (6rem) on this very page: the landing position was a function of the pane's CONTENT HEIGHT — tall panes parked consistently, short panes (prepost, shoreex) shrink the page below scrollability and settle wherever max-scroll lands, so tab-to-tab clicks jumped unpredictably. Top-of-page is the stable render. Safe unguarded: with JS no fragment navigation happens (preventDefault), and on hash ARRIVAL with JS the pane is display:none at initial-scroll time, so the browser skips the scroll — this rule only ever acts on the no-JS path. */ .tab-content > .tab-pane { scroll-margin-top: 9999px; } /* ── 2. Which tab looks active ──────────────────────────────────────────── */ /* `.active` is server-rendered onto the first tab and, without JS, never moves. Once any pane is addressed, neutralise that stale highlight and apply it to the addressed tab. Values mirror nav-tabs.css §@media(min-width:768px). */ @media (min-width: 768px) { /* Neutralise the stale highlight — restore the inactive treatment. */ html:not(.js) body:has(.tab-content > .tab-pane:target) .responsive-tabs.nav-tabs > li.active { margin-bottom: 0; } html:not(.js) body:has(.tab-content > .tab-pane:target) .responsive-tabs.nav-tabs > li.active a { border: 1px solid #ccc; border-bottom: 1px solid #aaa; } /* Apply it to the addressed tab. */ html:not(.js) body:has(#description:target) .responsive-tabs.nav-tabs > li:has(> a[href="#description"]), html:not(.js) body:has(#accreditation:target) .responsive-tabs.nav-tabs > li:has(> a[href="#accreditation"]), html:not(.js) body:has(#itinerary:target) .responsive-tabs.nav-tabs > li:has(> a[href="#itinerary"]), html:not(.js) body:has(#pricing:target) .responsive-tabs.nav-tabs > li:has(> a[href="#pricing"]), html:not(.js) body:has(#prepost:target) .responsive-tabs.nav-tabs > li:has(> a[href="#prepost"]), html:not(.js) body:has(#travelprotection:target) .responsive-tabs.nav-tabs > li:has(> a[href="#travelprotection"]), html:not(.js) body:has(#shoreex:target) .responsive-tabs.nav-tabs > li:has(> a[href="#shoreex"]) { margin-bottom: -1px; } html:not(.js) body:has(#description:target) .responsive-tabs.nav-tabs > li > a[href="#description"], html:not(.js) body:has(#accreditation:target) .responsive-tabs.nav-tabs > li > a[href="#accreditation"], html:not(.js) body:has(#itinerary:target) .responsive-tabs.nav-tabs > li > a[href="#itinerary"], html:not(.js) body:has(#pricing:target) .responsive-tabs.nav-tabs > li > a[href="#pricing"], html:not(.js) body:has(#prepost:target) .responsive-tabs.nav-tabs > li > a[href="#prepost"], html:not(.js) body:has(#travelprotection:target) .responsive-tabs.nav-tabs > li > a[href="#travelprotection"], html:not(.js) body:has(#shoreex:target) .responsive-tabs.nav-tabs > li > a[href="#shoreex"] { border: 1px solid #000; border-bottom: 1px solid #fff; border-radius: 4px 4px 0 0; } } /* Mobile: the bar shows only `li.active` (nav-tabs.css:21 hides every
  • ; only the desktop media query restores them) and relies on a JS-toggled `.open` class. Once a pane is addressed, show the whole list — it reads as a table of contents. First load (no fragment yet) is covered by the