/* ============================================================ flyExclusive — homepage header + hero (index.html only) Loaded last in , after luxury.css and the inline blocks, so it wins on equal specificity without needing !important. Everything here is scoped to .home-* classnames or to .section-26.home-hero. Nothing in this file can reach the mega-menu on the other pages, the mid-page Caravan background-video, or .lux-hero-card--secondary. ============================================================ */ .home-hero, .home-header, .home-nav, .home-subnav, .home-backdrop { /* Local tokens — deliberately not inherited from luxury.css so this layer stands alone. Near-black, off-white, one muted accent. */ --home-ink: #0B0E11; /* Brand palette for the menu panel, taken from luxury.css with literal fallbacks so this file still stands alone if ever loaded without it. The hero keeps the neutral --home-ink: a navy scrim would tint the footage, whereas the panel is a solid surface and should read navy. */ --home-navy: var(--fe-navy-900, #00274D); --home-accent: var(--fe-blue, #299FCF); --home-accent-soft: var(--fe-blue-400, #6DB3D6); /* One warm signal colour, used nowhere else in the panel, so the AOG entry is the only thing in the menu that is not blue or white. */ --home-alert: #E8B44A; /* One inline gutter shared by the header and the menu panel, so the X, the panel's logo, its MENU rule and the four menu items all sit on a single left edge. Before this the header padded to clamp(1.25rem,4vw,3rem) and the panel to clamp(2rem,3.5vw,4rem) — a 16px disagreement that put the close control off the column it belongs to. The value is the HEADER's old one, and the panel was moved onto it rather than the other way round. The header is on all 107 pages and its old ramp already tracked the site's content gutter — .lux-section pads to clamp(20px,5vw,40px), so at 390px both land on 20px and the burger sits on the same edge as the page's own copy. Taking the panel's wider ramp instead would have fixed a 16px disagreement inside the panel by opening a 12px one between the header and every section on the site. */ --home-gutter: clamp(1.25rem, 4vw, 3rem); /* The page's dim while the panel is open, up from .58. At .58 the light sections stayed fully legible — the page just went grey and went on competing with the panel — so this is about making the page recede, and that is all it is about. It is explicitly NOT what separates the panel from the page: composited over a white section this lands at #212D3D, relative luminance .026 against the panel's #00274D at .020, so the dim is a hair LIGHTER than the panel and no amount of alpha in a sane range reverses that over white. The panel's edge is held by the .28 hairline and the box-shadow below, which is the right way round anyway. Kept off the .87 first tried here: past ~.85 the page is effectively blacked out, which is two to three times the convention for a drawer scrim and loses the "your page is still there" cue the dim exists to give. */ --home-scrim: rgba(0, 16, 36, .82); --home-ease: cubic-bezier(.65, 0, .35, 1); --home-display: 'Galanogrotesque', 'Galano Grotesque', 'Poppins', 'Century Gothic', system-ui, sans-serif; } .home-header, .home-nav, .home-subnav, .home-hero, .home-header *, .home-nav *, .home-subnav *, .home-hero * { /* the hero itself must be border-box too — it has a fixed 100svh height and bottom padding, which would otherwise overflow the viewport */ box-sizing: border-box; } /* --------------------------------------------------------------- 1. HEADER — fixed, transparent, no fill or border at rest Three-column grid guarantees the logo is optically centred in the viewport regardless of how wide the burger's hit area is. --------------------------------------------------------------- */ .home-header { position: fixed; top: 0; left: 0; right: 0; /* Above the menu panel (1220) on purpose — see section 4b. The burger is the panel's close control, and a child cannot escape its parent's stacking context, so the only way to get the X onto the panel's surface is to lift the whole header over it and suppress everything else the header paints while the panel is open. Nothing that was already above 1200 moves relative to the header: the next layers up are Webflow's own (2000 for .w-dropdown-*, 2147483647 for .w-webflow-badge in components.css, and 9500/9525/99999 in the export for its overlay and notification layers). */ z-index: 1300; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: clamp(1rem, 2.2vw, 1.75rem) var(--home-gutter); background: none; border: 0; /* let clicks through the empty grid tracks to the hero beneath */ pointer-events: none; } .home-header > * { pointer-events: auto; } /* The header stays transparent everywhere — no fill, no bar, no border. A solid navy bar was tried and rejected: it read heavy and killed the restraint the whole design depends on. What keeps the white marks legible instead is a scrim built the way the video platforms build theirs (Netflix, YouTube, Prime): tall, top-weighted, and eased. Two things were wrong with the earlier four-stop version — it topped out at .40, which is not enough behind a white mark when a light-grey section scrolls under it, and its linear ramp meant the wash had already collapsed to ~.20 by the logo's own baseline. The stops below approximate an ease-out curve: it holds near full strength through the band the burger and logo actually occupy, then falls away over a long tail so there is still no visible edge where it ends. Darkening alone does not fix the real complaint, though. A headline passing under the header stays perfectly crisp behind a flat tint, so its letterforms read *through* the logo — which is what "the logo is covering text" is. The backdrop-filter is what actually separates the two planes: it dissolves whatever is behind the header into a soft field (Apple's and Stripe's fixed headers do exactly this), so nothing legible can ever collide with the mark. The mask fades the blur out on the same curve as the tint, otherwise the filtered rectangle would end in a hard horizontal seam. Applied by the JS (js/home-hero.js, resolveHero): on any page that opens on a full-bleed hero the header is bare over it and the scrim arrives once you scroll past — that is every hero component the site has, not just the homepage's. On a page with no hero at the top the scrim is on from the start, since those open on light content where a bare white mark is invisible. */ .home-header::before { content: ''; position: absolute; /* reaches well below the header so the ramp has room to resolve to zero */ inset: 0 0 -76px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(11, 22, 36, .74) 0%, rgba(11, 22, 36, .70) 14%, rgba(11, 22, 36, .60) 30%, rgba(11, 22, 36, .46) 45%, rgba(11, 22, 36, .31) 60%, rgba(11, 22, 36, .18) 73%, rgba(11, 22, 36, .08) 85%, rgba(11, 22, 36, .02) 94%, rgba(11, 22, 36, 0) 100%); -webkit-backdrop-filter: blur(12px) saturate(88%); backdrop-filter: blur(12px) saturate(88%); /* fade the blur out on the tint's own curve — no seam at the bottom edge */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, .55) 66%, rgba(0, 0, 0, 0) 92%); mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, .55) 66%, rgba(0, 0, 0, 0) 92%); opacity: 0; transition: opacity .6s var(--home-ease); } /* Safari and Firefox both support backdrop-filter now, but where it is missing the tint is the only separation left, so lean on it harder there. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .home-header::before { background: linear-gradient(to bottom, rgba(11, 22, 36, .86) 0%, rgba(11, 22, 36, .82) 14%, rgba(11, 22, 36, .72) 30%, rgba(11, 22, 36, .56) 45%, rgba(11, 22, 36, .38) 60%, rgba(11, 22, 36, .22) 73%, rgba(11, 22, 36, .10) 85%, rgba(11, 22, 36, .03) 94%, rgba(11, 22, 36, 0) 100%); } } .home-header.is-scrolled::before { opacity: 1; } /* --- hamburger: the word MENU over three hairline rules, morphs to an X --- Three anonymous lines were doing too little work for the only navigation on the site: at 1px over moving footage the mark reads as an artefact of the video rather than a control. The word carries the meaning; the rules keep it a mark rather than a text link, and the short bottom rule is the signature — it completes to full width on hover, so the icon resolves as you approach it. Everything here is CSS only, on purpose: the header markup is duplicated byte-for-byte across ~100 pages, so a pseudo-element is the only way to add a word to all of them in one edit. */ .home-burger { grid-column: 1; justify-self: start; position: relative; /* wider than the 48px icon box was: the tracked label is now the widest thing in the button and the whole word should sit inside the hit area */ width: 60px; /* held at 48px deliberately. The header is a centred three-column grid, so a taller button would push the logo down on every page. The label fits because the label+rules group is only 29px tall. */ height: 48px; /* pull the hit area back so the 22px rules align optically with the page's left gutter rather than sitting inset by 13px */ margin-left: -13px; padding: 0; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; } /* The word, set in the menu panel's own eyebrow language — Galano, uppercase, heavily tracked — so the button and the panel it opens read as one voice. */ .home-burger::before { content: 'Menu'; position: absolute; top: 9px; left: 13px; font-family: var(--home-display); font-size: .5rem; font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: .22em; color: #fff; /* the same two-stop shadow the rules carry, so the word survives a light section scrolling under the header exactly as they do */ text-shadow: 0 1px 2px rgba(0, 0, 0, .60), 0 2px 8px rgba(0, 0, 0, .35); transition: letter-spacing .55s var(--home-ease), transform .55s var(--home-ease), opacity .3s ease; } .home-burger__rule { position: absolute; left: 13px; width: 22px; height: 1px; background: #fff; /* This is what replaces the solid bar. A 1px white rule vanishes on a light background; this hairline shadow keeps it readable with no fill behind it. Invisible over the dark hero footage, so there is no cost there. */ box-shadow: 0 1px 2px rgba(0, 0, 0, .60), 0 2px 8px rgba(0, 0, 0, .35); transition: transform .55s var(--home-ease), width .55s var(--home-ease), opacity .3s ease; } /* pushed down to sit under the label; still 6px apart, which is what the X morph's ±6px translate depends on */ .home-burger__rule:nth-child(1) { top: 25px; } .home-burger__rule:nth-child(2) { top: 31px; } .home-burger__rule:nth-child(3) { top: 37px; width: 13px; } /* hover: the word opens up and the short rule completes. NB: the growth is `width`, not `scaleX` — scaleX would need transform-origin:left, which would then pivot the X off-centre when open. */ .home-burger:hover::before, .home-burger:focus-visible::before { letter-spacing: .3em; } .home-burger:hover .home-burger__rule:nth-child(3), .home-burger:focus-visible .home-burger__rule:nth-child(3) { width: 22px; } .home-burger:focus-visible { outline: 1px solid rgba(255, 255, 255, .8); outline-offset: 4px; } /* open: animate the rules themselves into an X — no icon swap. The label lifts away rather than swapping to "Close": the panel underneath carries its own "Menu" eyebrow, and two of the word on screen at once reads as a mistake. The accessible name still flips (the JS sets aria-label="Close menu"), which is what actually matters here. */ .home-burger[aria-expanded="true"]::before { opacity: 0; transform: translateY(-4px); } /* The -3px is optical alignment, and it is the whole point of --home-gutter. A rule spans gutter..gutter+22 and rotates about its own centre, so its projected half-width becomes (22·cos45 + 1·sin45)/2 = 8.13px and the X's leftmost pixel lands at gutter+2.9 — while the panel's logo, MENU rule and menu items directly beneath it all start at gutter+0. On a 22px mark a 2.9px inset is 13%, and there is a large correctly-aligned element right below it to read against. Pulling the arms 3px left puts the X's outer edge on the gutter. Only in the open state, which is the only state where the X sits on the panel and has anything to align with. */ .home-burger[aria-expanded="true"] .home-burger__rule:nth-child(1) { transform: translate(-3px, 6px) rotate(45deg); } .home-burger[aria-expanded="true"] .home-burger__rule:nth-child(2) { opacity: 0; transform: scaleX(.4); } /* back to 22px so both arms of the X are the same length */ .home-burger[aria-expanded="true"] .home-burger__rule:nth-child(3) { width: 22px; transform: translate(-3px, -6px) rotate(-45deg); } /* --- logo: small, centred, and the only other thing in the header --- */ .home-logo { grid-column: 2; justify-self: center; display: block; line-height: 0; } .home-logo { transition: opacity .5s var(--home-ease); } /* --- the same mark, oversized in the hero, docking on the first scroll --- Opt-in per page and off by default: js/home-hero.js adds .has-oversized-logo to the header only when the hero it resolved carries data-hero-logo, which is index.html alone today. Every other page's logo sits in the header from the top of the document and never moves, exactly as before. The class is NOT called .has-hero-logo, which is what it wants to be called. luxury.css pins `[class*="hero"] :is(h1,…,a,div,…){opacity:1!important; transform:none!important}` to unstick Webflow's IX2 reveals, and that is a substring match on the whole class attribute — putting "hero" anywhere in a class on the header makes every descendant of the header match it. Measured: the logo's transform computed to none, and the quick-link strip's opacity reveal would have gone with it. Nothing on this header may contain "hero". The mark that travels is the header's own — there is no second copy in the hero, so there is nothing to keep in sync and nothing to cross-fade. .home- logo lives in a position:fixed header, so a translate here is in viewport coordinates: it simply paints lower on the frame until the page scrolls. .is-scrolled drops both properties and the mark returns to its seat. That is the same class that raises the blue bar, deliberately: on this page the bar arrives on the first scroll (its threshold resolves to 0 — see applyHeaderState), and a logo still standing over the hero with the bar already up would read as two headers. One state, one movement. The curve and duration are the bar's own so they travel together. Scale rather than width: it is composited, it leaves the img's own width transition (section 1b, 153 -> 172px on the bar) alone, and a scaled box keeps its centre — which is what lets the JS place the mark from the header's untransformed layout box and never have to reset the transform to measure. */ .home-header.has-oversized-logo .home-logo { transform: translateY(var(--home-logo-y, 0px)) scale(var(--home-logo-s, 1)); transition: opacity .5s var(--home-ease), transform 1s var(--home-hq-ease, cubic-bezier(.19, 1, .22, 1)); } .home-header.has-oversized-logo.is-scrolled .home-logo { transform: none; } /* A one-second translate across most of the viewport is precisely the movement this query asks us not to make, and the jump-cut version of it is worse than not doing it: the mark would be somewhere different before and after a scroll with nothing connecting the two. So the whole effect is withdrawn and the logo keeps its header seat from the top of the page. Later in the file than both rules above, and equal in weight to the first, so it wins on order. */ @media (prefers-reduced-motion: reduce) { .home-header.has-oversized-logo .home-logo { transform: none; } } /* Logo sizes are all 130% of what they were, on request (2026-08-04). The four widths in this file are the resting mark (below), its <=767px step, and the two --hq scrolled-bar equivalents further down; the originals were 118 / 82 / 132 / 92px, so divide by 1.3 to get back. The artwork is 582x108, so even the largest of these is a 0.26x downscale — there is no resolution ceiling here. */ .home-logo img { display: block; width: 153px; height: auto; /* same reasoning as the burger rules: the mark is white artwork on alpha, so it needs its own edge to survive a light background now that there is no bar behind it. drop-shadow (not box-shadow) so it follows the artwork rather than boxing it. Two passes: a tight one that gives the thin letter strokes a defined edge, and a wider soft one that seats the whole mark — this is what carries it over the bare hero video, where the scrim is off. */ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .60)) drop-shadow(0 2px 10px rgba(0, 0, 0, .38)); } /* Hidden whenever the menu is open, main panel or sub-panel. It used to be gated on .home-subnav-open only — because the sub-panel reaches past the viewport centre where the logo sits — which left two logos on screen at once for the main panel: this one, centred over the dimmed page, and the panel's own. Two marks, neither obviously the live one. While the menu is open the brand mark belongs to the menu surface, so this one steps back. */ html.home-nav-open .home-logo, html.home-subnav-open .home-logo { opacity: 0; pointer-events: none; } .home-logo:focus-visible { outline: 1px solid rgba(255, 255, 255, .8); outline-offset: 6px; } @media (max-width: 767px) { .home-logo img { width: 107px; } /* was 82 */ } /* --------------------------------------------------------------- 1b. SCROLLED BAR + QUICK LINKS Everything in this block is gated on .home-header--hq. That modifier began as index.html's alone, and the note that used to sit here still said so — it has since been rolled out and now carries on 100 of the 107 pages with this header. The seven without it are our-fleet/*.html. Correcting the record because the stale version made this look like a homepage-only block, and it is nothing of the kind: a change here is a site-wide change. Note which pages run .is-scrolled pinned on from load — every --hq page whose top is NOT a full-bleed hero (404, the MRO pages, anything opening on light content; see resolveHero in js/home-hero.js). On those the solid fill below is the only thing keeping the white logo and burger legible, which is why section 4b has to hold them together rather than release the marks first. The reveal is modelled on discoverylandco.com, which was the reference: their fixed bar's inner content sits at translateY(-100%) and slides down on a 1s expo-out curve (cubic-bezier(.19,1,.22,1)), with the secondary link strip following it out from behind. The slow expo is the whole character of it — at 300ms the same movement reads as a jump. --------------------------------------------------------------- */ .home-header--hq { /* row 1 is the burger and logo, row 2 the link strip */ grid-template-rows: auto auto; /* the strip carries the bar's bottom spacing now, so the header box closes up directly beneath it */ padding-bottom: 0; --home-hq-ease: cubic-bezier(.19, 1, .22, 1); --home-hq-h: 46px; } /* Past the hero the header stops being a wash and becomes a bar. The rest of the site keeps the eased scrim above: that is a device for floating white marks over unpredictable content, and it is deliberately edgeless. This is the opposite brief — "more distinctive" — so it gets a real fill, a real bottom edge, and no mask. inset drops the 76px overhang the scrim needed for its ramp; a bar that ends in a gradient tail has no edge to be distinctive with. */ .home-header--hq.is-scrolled::before { inset: 0; background: linear-gradient(180deg, #002348 0%, #003A70 58%, #004884 100%); /* Opaque, and the scrim's backdrop-filter is explicitly cleared here. A blur was tried first and removed for two reasons. Visually it earned nothing: behind a fill this solid, 4% translucency and a 6px blur are imperceptible. Practically it was expensive — a full-width blurred fixed layer composited over the autoplaying hero video was heavy enough to stall screen capture on this machine, which is a fair proxy for what it costs a mid-range laptop scrolling the homepage. The scrim upstream needs its blur because it is mostly transparent and has to kill legible text passing under it; a solid bar has already done that. */ background-color: #002348; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; box-shadow: 0 10px 30px -14px rgba(0, 18, 38, .55); } /* The signature: one accent hairline along the bottom edge, brightest at the centre under the logo and falling to nothing at both gutters, so the bar ends on a line that belongs to the brand rather than a generic 1px rule. Separate from ::before because that element is the blurred layer — a border on it would be blurred with everything else. */ .home-header--hq::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(41, 159, 207, 0) 0%, rgba(41, 159, 207, .5) 20%, rgba(109, 179, 214, .8) 50%, rgba(41, 159, 207, .5) 80%, rgba(41, 159, 207, 0) 100%); opacity: 0; transition: opacity .6s var(--home-ease); } .home-header--hq.is-scrolled::after { opacity: 1; } /* --- the link strip --- A clipped track whose height is reserved at rest. Revealing it animates transform and opacity only: the fixed header never changes size, so there is no layout work on scroll and no chance of the logo shifting as the strip arrives. At rest the track is empty, transparent and visibility:hidden, which also keeps the three links out of the tab order and the accessibility tree without any JS. */ .home-header--hq .home-quicklinks { grid-column: 1 / -1; overflow: hidden; height: var(--home-hq-h); pointer-events: none; visibility: hidden; /* opacity is not used by the scroll reveal — .home-quicklinks__inner carries that. It is here so section 4b can withdraw the whole strip while the menu panel is open without disturbing the reveal's own transform. */ opacity: 1; /* held visible until the slide-out has finished, or the strip would vanish instantly on the way back up */ transition: visibility 0s linear 1s, opacity .3s ease; } .home-header--hq.is-scrolled .home-quicklinks { visibility: visible; pointer-events: auto; transition: visibility 0s, opacity .3s ease; } .home-quicklinks__inner { display: flex; justify-content: center; align-items: center; gap: clamp(1.5rem, 3.4vw, 3rem); height: 100%; transform: translateY(-100%); opacity: 0; transition: transform 1s var(--home-hq-ease), opacity .45s ease-out; } .home-header--hq.is-scrolled .home-quicklinks__inner { transform: none; opacity: 1; } /* Set in the menu panel's eyebrow language — Galano, uppercase, tracked — so the strip reads as the same voice as the MENU label and the panel it opens, not as a second, competing navigation. */ .home-quicklinks__link { position: relative; padding: .5rem 0; font-family: var(--home-display); font-size: .5625rem; font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: .2em; color: rgba(255, 255, 255, .8); text-decoration: none; white-space: nowrap; transition: color .3s ease; } .home-quicklinks__link:hover, .home-quicklinks__link:focus-visible { color: #fff; } /* Underline opens from the centre out — the same gesture as the burger's short rule completing to full width, which is this header's one hover signature. */ .home-quicklinks__link::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: var(--home-accent); transition: left .45s var(--home-hq-ease), right .45s var(--home-hq-ease); } .home-quicklinks__link:hover::after, .home-quicklinks__link:focus-visible::after { left: 0; right: 0; } .home-quicklinks__link:focus-visible { outline: 1px solid rgba(255, 255, 255, .8); outline-offset: 4px; } /* --- logo, one step up in the bar --- Only in the scrolled state. Over the hero the mark stays small and deferential to the video; on the bar it is the anchor and can afford the extra width. The growth rides the strip's own curve and duration so the two read as one movement rather than two effects that happen to coincide. */ .home-header--hq .home-logo img { transition: width 1s var(--home-hq-ease), filter .5s ease; } .home-header--hq.is-scrolled .home-logo img { width: 172px; /* was 132 */ /* the two-pass shadow exists to float the mark over unpredictable footage; against a solid bar it only muddies the letter strokes. One soft pass is left to seat it. */ filter: drop-shadow(0 1px 3px rgba(0, 10, 24, .35)); } @media (max-width: 767px) { .home-header--hq { --home-hq-h: 40px; } .home-header--hq.is-scrolled .home-logo img { width: 120px; } /* was 92 */ .home-quicklinks__inner { gap: 1.15rem; } .home-quicklinks__link { font-size: .5rem; letter-spacing: .14em; } } /* The slide is decorative; the strip's arrival is not. Keep it appearing, drop the travel. */ @media (prefers-reduced-motion: reduce) { .home-quicklinks__inner { transform: none; transition: opacity .2s linear; } .home-header--hq .home-logo img, .home-quicklinks__link::after { transition-duration: .01ms; } } /* --------------------------------------------------------------- 2. FULL-SCREEN VIDEO --------------------------------------------------------------- */ .section-26.home-hero { position: relative; /* .home-hero__inner is absolutely positioned against this box — it is placed relative to the hero's centre, where the logo sits, not flowed. */ width: 100%; height: 100vh; /* fallback first */ height: 100svh; /* preferred where supported */ min-height: 0; max-height: none; overflow: hidden; background-color: var(--home-ink); isolation: isolate; } .home-hero__video, .home-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .home-hero__video { object-fit: cover; /* keeps the first painted frame from being a black box on slow connections, before the poster attribute resolves */ background: var(--home-ink) url('../videos/Fly-Exclusive-Hero-V2_poster.jpg') center / cover no-repeat; border: 0; } /* reduced-motion still; hidden unless that query matches */ .home-hero__poster { display: none; background: var(--home-ink) url('../videos/Fly-Exclusive-Hero-V2_poster.jpg') center / cover no-repeat; } /* Scrim: darker at the top and bottom edges over a very light overall darkening. Two layers on one element — the footage still reads clearly through the middle. The bottom ramp starts climbing at 48% rather than 60%: the copy block moved to the lower third, and its top edge now lands around 62% where the old curve was still only at .13 — not enough behind white Light-300 type over a bright sky. The rise is gradual so the middle of the frame is untouched. Past 84% the ramp leaves neutral and lands on #00274D — the exact ground of the .fx-why band that now follows the hero. Before this the hero finished at rgba(11,14,17,.66) over live footage and the band began as flat navy, so the join was a hard line AND a hue change at the same moment: neutral ink to blue, texture to solid. Ending the scrim on the band's own colour makes the two surfaces the same colour where they touch. That alone was not enough, and the reason is worth recording: the band below is not flat #00274D at its top edge. Its .th-sky::before atmosphere glow used to peak at 6% of the band, so the first pixel under the seam was already ~22% of the way to a pale blue while the hero's last pixel was the base navy. Matching colours across the join is only half of it — the *slope* has to match too, or the step just moves into the neighbour. The other half is on .fx-why in luxury.css: a top fade that starts at this exact #00274D and the glow moved down out of the seam. Change one, check the other. The dissolve was also too early and too long: it reached effectively opaque around 86% and then held ~180px of dead flat navy above the join, which read as a bar rather than as an ending. The stops below push it down — the footage now survives to ~90% and the opaque landing is the last ~8%. Behind the copy that costs roughly .08-.17 of darkening (the CTA row sits at ~87% of the hero); the title carries a text-shadow and both CTAs are outlined, so they still hold, and the frame keeps a fifth more of the image. This does NOT contradict the neutral --home-ink note at the top of this file. The reason the scrim is neutral is that a navy wash tints the footage, and that reasoning holds everywhere the footage is meant to be visible — which is why every stop to 84% is untouched in hue. Below that the scrim is deliberately extinguishing the frame, and by 97% there is essentially no footage left to tint. */ .home-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(11, 14, 17, .58) 0%, rgba(11, 14, 17, .14) 26%, rgba(11, 14, 17, .12) 48%, rgba(11, 14, 17, .26) 66%, rgba(11, 14, 17, .42) 84%, rgba(4, 30, 60, .62) 92%, rgba(0, 39, 77, .90) 97.5%, #00274D 100%), rgba(11, 14, 17, .14); } /* --------------------------------------------------------------- 3. HERO CONTENT --------------------------------------------------------------- */ /* The block used to be pushed off the hero's vertical centre by half the oversized logo's height, so the title sat directly under the mark. The oversized mark is back (section 1, .has-oversized-logo) but that offset has still not returned, and must not: the mark is the fixed header's logo painted over this frame, so it takes no space here. It is placed *from* the title's measured top edge rather than the block being placed around it — the copy stays where the footage wants it and the mark follows. It sits in the hero's lower third rather than dead centre: bottom-aligned with a viewport-proportional gap beneath, which puts the block's optical centre around three-quarters down. That clears the upper half of the frame for the footage — the subject in the marketing clip is centred, and the type was landing straight across her — and it is how most full-bleed video heroes are set, since the eye reads the image first and the copy last. Positioned with flex, not transform: luxury.css pins `[class*="hero"] :is(h1,…,div,…){transform:none!important}` to unstick Webflow's IX2 animations, and .home-hero__inner is a div inside .section-26.home-hero — a translate here would be dropped on the floor. The paddings are a clamp, not a flat vh: at 14vh the gap collapses to almost nothing on a short landscape phone, and the top value keeps the title clear of the fixed header if the block ever grows tall enough to reach it. */ .home-hero__inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: clamp(1.25rem, 3.5vh, 2.25rem); max-width: 1040px; margin: 0 auto; padding: clamp(5rem, 12vh, 8rem) clamp(1.5rem, 6vw, 5rem) clamp(4.5rem, 14vh, 10rem); text-align: center; color: #fff; } /* The hero's display type in its own right. It was deliberately small (1.375-2.125rem) in the first version of the oversized-logo hero, where the mark carried the frame and this line read as its caption. It keeps the larger size now that the mark is back: the two share the frame rather than one captioning the other, and the line has to hold it alone the moment the logo docks — which on this page is the first scroll. */ .home-hero__title { margin: 0; font-family: var(--home-display); font-weight: 300; font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.12; letter-spacing: -.01em; color: #fff; text-transform: none; text-shadow: 0 1px 14px rgba(11, 14, 17, .45); } /* "Smarter". The italic cut we host is weight 400, so it lands a step heavier than the surrounding Light 300 — stated here rather than inherited so the pairing is deliberate. The tracking goes back to normal because the -.01em on the parent is tuned for the upright face and pinches the slanted one. */ .home-hero__title em { font-style: italic; font-weight: 400; letter-spacing: 0; } /* No hero-specific CTA *skin* rules on purpose. luxury.css already defines .new__cta.white-outline as the site's ghost button — transparent fill, 1px rgba(255,255,255,.55) border, white text — with its own hover that fills white and takes the border to solid. home-hero.css loads after luxury.css, so anything added here would override that; an earlier version of this block did, and left the border translucent against a white hover fill. Layout only below. The row exists because .home-hero__inner is a flex column: without it the two CTAs stack under the title. Both buttons take the same min-width so the pair reads as one unit rather than two odd lengths — the labels differ by three characters, which is enough to look accidental. */ .home-hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(.75rem, 1.6vw, 1.25rem); } .home-hero__actions .new__cta { min-width: 210px; text-align: center; } @media (max-width: 480px) { /* Side by side, two 210px buttons plus the gap overflow a 375px viewport, so stack them and let each fill the column. */ .home-hero__actions { flex-direction: column; align-self: stretch; } .home-hero__actions .new__cta { min-width: 0; width: 100%; } } /* --- load-in. Pure CSS with fill-mode both, so it needs no JS hook and cannot leave content stranded at opacity 0. --- */ @keyframes homeRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .home-hero__title { animation: homeRise 1.5s var(--home-ease) .55s both; } /* --------------------------------------------------------------- 4. HAMBURGER OVERLAY — slides in from the left --------------------------------------------------------------- */ .home-backdrop { position: fixed; inset: 0; /* Raised over the header's own band (which used to sit above the dim at 1200, so the blue bar stayed at full strength while the rest of the page dimmed — half the reason the open state read as two unrelated surfaces). */ z-index: 1205; /* navy dim rather than neutral black, so the page cools toward the panel */ background: var(--home-scrim); /* Dim alone flattens the page to one navy field — nothing behind it is legible, but nothing behind it reads as *there* either. The blur is what keeps it a page you have covered rather than a page you have left, so the drawer sits on top of your context instead of replacing it. Deliberately large: under an .82 dim only ~18% of the page shows through, and a small radius is invisible at that strength. This is the one place the file's blanket "no backdrop-filter over the hero video" rule does not apply (see .home-header--hq.is-scrolled::before and .lux-hero-card). That rule is about layers composited *while scrolling*; this layer only exists while the menu is open, when nothing is moving. It costs nothing in the closed state either — visibility:hidden means the element is never painted, so the filter is never evaluated. Kept on the base rule rather than .is-open so the blur is still there through the .8s fade-out; on .is-open it would snap to none and the page would pop back into focus before the dim had finished leaving. */ -webkit-backdrop-filter: blur(24px) saturate(85%); backdrop-filter: blur(24px) saturate(85%); opacity: 0; visibility: hidden; cursor: pointer; /* Its visibility is held for .8s so it can fade out with the panel, which left it opacity:0 but visible, inset:0 and z-index:1205 for that whole window — an invisible full-viewport click sink. Closing the menu by clicking the backdrop and then reaching straight for a hero CTA hit the backdrop instead. The fade needs the element painted; it does not need it hit-testable. */ pointer-events: none; transition: opacity .8s var(--home-ease), visibility 0s linear .8s; } .home-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .8s var(--home-ease), visibility 0s linear 0s; } .home-nav { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1220; display: flex; flex-direction: column; justify-content: center; width: 34vw; min-width: 380px; max-width: 520px; /* top padding clears the X above it with real air (the X's lowest arm ends ~66px down, so the panel's first element never lands closer than ~38px to it). It was clamp(4rem,9vh,7rem), whose 64px floor put the panel's logo underneath the header instead. */ padding: clamp(6.5rem, 13vh, 9rem) var(--home-gutter) clamp(4rem, 9vh, 7rem); background: var(--home-navy); /* hairline brand edge so the panel reads as a deliberate surface against the footage rather than a hole punched in the page */ border-right: 1px solid rgba(109, 179, 214, .28); /* and a soft cast to the right of that edge, so the panel sits above the dimmed page rather than being flush with it. Static — it costs nothing on scroll because nothing scrolls while the panel is open. */ box-shadow: 26px 0 64px -24px rgba(0, 10, 26, .62); overflow-y: auto; transform: translateX(-100%); visibility: hidden; transition: transform .8s var(--home-ease), visibility 0s linear .8s; } .home-nav.is-open { transform: translateX(0); visibility: visible; transition: transform .8s var(--home-ease), visibility 0s linear 0s; } /* --------------------------------------------------------------- 4b. WHILE THE PANEL IS OPEN, THE HEADER IS ONLY THE X The problem this solves: the header is a fixed, fully opaque bar (--hq, past the hero) painted at a *lighter* blue than the panel, at a z-index above it. So an open panel read as a second surface tucked under a lid — the panel's own logo was sliced in half at the seam, the bar's accent hairline ran straight across the top of the panel, and the panel's dim stopped at the bar's bottom edge instead of covering the page. Underneath that was a second, worse problem: MEMBERSHIP / ABOUT US / WHAT WE FLY stayed live over the modal panel. Three links duplicating what the panel offers, clickable and in the accessibility tree while a modal is open. The Tab cycle in js/home-hero.js already skipped them, which only meant keyboard and pointer users were being shown different navigation. Both resolve the same way, and it is the rule every well-behaved navigation overlay follows: one navigation surface at a time. Material's own drawer guidance says the bar keeps only the app name and drops everything contextual to the content behind the drawer; the luxury references this header was modelled on (Discovery Land, Aman) go further and dissolve the bar outright. That is what happens here — the fill, the hairline, the centred logo and the link strip all step back, leaving the burger, now an X, sitting on the panel's own left gutter as the single close affordance. Nothing on screen competes with the panel. Scoped to .home-header with no --hq qualifier, so it covers both header variants: the 100 --hq pages with the solid bar and the strip, and the seven our-fleet/* pages that still run the eased scrim with no strip. Same behaviour on all 107. --------------------------------------------------------------- */ html.home-nav-open .home-header::before, html.home-nav-open .home-header::after { opacity: 0; } /* .home-header is in the selector purely for weight: the rule it has to beat is `.home-header--hq.is-scrolled .home-quicklinks`, which is three classes and sets visibility:visible / pointer-events:auto. */ html.home-nav-open .home-header .home-quicklinks { opacity: 0; /* visibility, not opacity alone: an invisible strip must also leave the tab order and the accessibility tree while the modal panel owns the page */ visibility: hidden; pointer-events: none; } /* On the way back out the order matters. The panel takes .8s to clear the screen and the bar's fill returns over .6s, so without this the bar would fade back in *on top of* the panel that is still sliding away — the same seam, just briefly. js/home-hero.js holds .home-nav-closing on for the length of the panel's exit; these rules keep the chrome withdrawn for exactly that long, then release it. */ html.home-nav-closing .home-header::before, html.home-nav-closing .home-header::after { opacity: 0; } html.home-nav-closing .home-header .home-quicklinks { opacity: 0; visibility: hidden; pointer-events: none; } /* The centred logo has to be held for the same window, and this one is not cosmetic. 100 of the 107 pages carry --hq, and on any of them that does not open on a hero (404, the MRO pages, anything whose top is light content) js/home-hero.js pins .is-scrolled from load — so the solid bar is the ONLY thing making a white logo legible there; those pages have no scrim underneath it at all. Released on its own .5s transition while the fill was held out for 820ms, the logo faded back in over bare white paper for well over a second, carried by nothing but its two drop-shadows. Holding it here also collapses what were three staggered arrivals — logo, strip, bar — into one. */ html.home-nav-closing .home-logo { opacity: 0; pointer-events: none; } /* Above 1024px the sub-panel slides out to the right of the main panel and the two are meant to read as one two-column surface with a divider down the middle. The main panel's outward cast would land inside that surface as a dark smear along the sub-panel's left edge, so it is dropped while they are paired — the hairline border-right still divides them, and the sub-panel's own cast (it is the rightmost edge now) lifts the pair off the page. Unconditional, not gated above 1024px. Below that the sub-panel covers the main panel at the SAME width (both 58vw, or both 100% under 768px), so the two casts land on the same band and composite to roughly double strength. The sub-panel is on top and supplies its own, so the main panel's is redundant at every width, not just the wide one. */ html.home-subnav-open .home-nav { box-shadow: none; } /* The X now sits on flat navy instead of over unpredictable footage, so the two-stop black shadow that keeps the rules legible out there has nothing left to do and reads as a smudge on either side of a 1px line. Drop it while the panel is open; it comes straight back on close. */ html.home-nav-open .home-burger__rule { box-shadow: none; } /* margin-top:auto here is what distributes the panel's spare height. It is the second of two auto margins in the column (.home-nav__cta has the other), and flexbox splits the free space equally between them. Before, every spare pixel pooled into the single gap above the CTA: on a 1440-tall viewport a ~660px hole between "About" and the button, with the whole menu clustered in the top third. The obvious fix — margin-top:auto on the list — is wrong, and looked it: this eyebrow and its rule are the label FOR that list, so putting half the free space between them detached the label from the thing it labels. The auto margins belong on the boundaries between the panel's three groups, not inside one of them. So: the logo is the masthead at the top, MENU and the four items stay together as one block in the middle, the CTA keeps the bottom edge, and the air lands in the two gaps between them. On short viewports both autos collapse to zero and the explicit margins take over, so nothing moves where height is tight. */ .home-nav__eyebrow { margin: auto 0 clamp(1.5rem, 4vh, 2.5rem); padding-bottom: clamp(1.25rem, 3vh, 1.75rem); border-bottom: 1px solid rgba(109, 179, 214, .30); font-family: var(--home-display); font-size: .62rem; font-weight: 400; text-transform: uppercase; letter-spacing: .32em; color: var(--home-accent-soft); } .home-nav__list { /* the bottom margin is the minimum breathing room between the last menu item and the bottom-pinned .home-nav__cta. Where the panel has spare height the CTA's auto top margin eats the rest, so this only shows up when it must. The auto margin that distributes this panel's spare height is on .home-nav__eyebrow, not here — see the note there. */ margin: 0 0 clamp(2rem, 6vh, 3.5rem); padding: 0; list-style: none; } /* The Webflow export styles the bare

element (its line 277): margin: 4px 0 4px 36px; font-size: 14px; font-weight: 300; line-height: 200% and zeroing the