/* * No webfonts, no framework, no icon library. Everything here loads with the HTML. * The playbook lesson is blunt: on airport 3G a slow page is a lost booking, so the * whole stylesheet is small enough to inline and there is nothing external to fetch. */ /* * Palette "baie des anges". Sampled from the logo, then narrowed to one navy and one teal. * * The teal #017896 is a real value out of picks/logo-master.png — the third most frequent * colour in the mark that is not shading — which is why the page and the logo read as one * thing. The navy was pulled to #0b2340, the value the headings already used, so every * dark surface and every heading are one colour rather than two navies a shade apart. * * --navy #0b2340 header ground, hero, footer, closing band, step numbers * --ink #0b2340 headings — the same value, named for its job * --ink-2 #4d6076 body text. 6.5:1 on white * --accent #017896 the logo teal. 5.09:1 on white, so it can carry link text as well * as buttons, which a brighter cyan could not * --accent-hover #00677f 6.47:1 with white on it * --accent-pressed #00566b 8.26:1 with white on it * --line #d8e1ea card and divider rule. Decorative only — never the sole marker of * an interactive control, which is what --field-line is for * --bg #ffffff the reading ground * --bg-2 #f4f8fb the tinted band. Used where a section changes register, not on * every other section — see the note over section.alt below * --bg-3 #eaf6f8 highlighted or selected information — callouts, the selected * segment's track, pills * --wa #25d366 WhatsApp, and nothing else on the site * * The accent is deliberately not red: the WhatsApp button is the other loud element on * every page, and two shouting colours side by side make the choice slower, not faster. * Every pair above clears WCAG AA (4.5:1) in both modes. * * Three colours were retired, each a consolidation rather than a loss. --cyan #00919f drew * one thing, the event-card rule, one step off the accent; it now draws it in the accent. * --ok #157a45 carried "return saves 5%" and the guide verdict panel — a green that is not * WhatsApp's green, two centimetres from the WhatsApp button inside the booking card, was * the one place where colour said something the words did not mean. --gold-deco tinted * .pill.gold, a rule nothing rendered. --gold survives for one job, the review stars, * because a gold star reads as a star and a teal one does not. * * --field-line #7b93a8 is 3.2:1 on white and marks anything a visitor can operate whose * only boundary is a line: form fields, the currency pills, the menu button, the ghost * button. --line is 1.32:1 and draws every non-interactive divider, which 1.4.11 allows. */ :root { --navy: #0b2340; --ink: #0b2340; --ink-2: #4d6076; --line: #d8e1ea; --bg: #ffffff; --bg-2: #f4f8fb; --bg-3: #eaf6f8; --accent: #017896; --accent-hover: #00677f; --accent-pressed: #00566b; --accent-ink: #ffffff; --wa: #25d366; --gold: #7d600f; --field-line: #7b93a8; --radius: 14px; --shadow-sm: 0 1px 3px rgba(10, 36, 52, .08); --shadow: 0 6px 24px rgba(10, 36, 52, .10); --shadow-lg: 0 18px 50px rgba(10, 36, 52, .16); --maxw: 1180px; /* One vertical rhythm for the whole page. Every band — the hero included — is padded from this, so the top of the page cannot drift out of proportion with what follows it. Fluid rather than fixed: a 56px gap that reads as generous at 1440 reads as wasted screen at 380, and as mean at 1920. */ --space-section: clamp(38px, 4.4vw, 60px); /* The booking card's column: a floor, a width that tracks the viewport, and a ceiling past which extra width would only stretch the selects. 40vw rather than something more modest, because width is how this card gets shorter. Its rows and its buttons go two-up on their own once the card is wide enough (see the container queries on the widget), and the difference between a 330px card and a 400px one is about 170px of height — which the hero, and on the stacked layouts the whole top of the page, pays for. The ceiling is where the two-up arrangement has all the room it needs and more would just be air. It was 430 until the Geneva layout put the country code and the phone number side by side next to the email, where 430 cut the number field's own placeholder off at "Phone num"; 470 shows it whole, and the hero headline still breaks in two lines at 1440. */ --quote-col: clamp(330px, 40vw, 470px); } @media (prefers-color-scheme: dark) { :root { --navy: #041b2e; --ink: #e6edf4; --ink-2: #9fb2c4; --line: #1e3448; --bg: #081420; --bg-2: #0d1e2c; --bg-3: #122636; --accent: #35b5cf; --accent-ink: #04222c; --accent-hover: #57c4da; --accent-pressed: #7ad3e6; --gold: #e0bd57; --field-line: #4a6b8a; --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow: 0 6px 24px rgba(0,0,0,.45); --shadow-lg: 0 18px 50px rgba(0,0,0,.55); } } *, *::before, *::after { box-sizing: border-box; } /* The padding is the sticky header's 64px plus 16 of air. Without it every fragment on the site lands 64px too high and the header sits on top of what was jumped to: #quote put "Get a Transfer Quote" and its subline under the bar, so the card a visitor had just asked for opened on the Pickup field with its own heading hidden — which reads less like an anchor than like a page that loaded wrong. Same for #airports and the skip link's #main. scroll-padding rather than scroll-margin on each target, because the offset is a property of the viewport's fixed furniture, not of any one section. */ html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.015em; font-weight: 700; } h1 { font-size: clamp(30px, 5vw, 48px); } /* The 30px floor is too big for one word at 320px: "Geschäftsbedingungen" and "конфиденциальности" are each wider than the 280px of text column on the smallest phones, and a single word cannot wrap, so the legal pages scrolled sideways. 26px fits every heading word in the five languages; break-word is the backstop for one that ever does not, and only breaks a word that cannot fit a line on its own. */ h1, h2 { overflow-wrap: break-word; } @media (max-width: 340px) { h1 { font-size: 26px; } } h2 { font-size: clamp(23px, 3.2vw, 32px); } h3 { font-size: 19px; } p { margin: 0 0 1em; } a { color: inherit; } img { max-width: 100%; height: auto; display: block; } ul { margin: 0 0 1em; padding-left: 1.15em; } li { margin-bottom: .4em; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .narrow { max-width: 760px; } .center { text-align: center; } .muted { color: var(--ink-2); } .small { font-size: 14px; } .tiny { font-size: 12.5px; } section { padding: var(--space-section) 0; } section.tight { padding: calc(var(--space-section) * .62) 0; } /* The tinted band, and not an every-other-section stripe: mechanical alternation put half the page on pale blue, which is not a rhythm. The tint marks a change of register — the trust band, the shortcut route lists, the fleet, the meeting-point promise, the price table, the FAQ — leaving runs of one or two white sections between tinted ones. Which sections carry it is decided per page in src/templates/pages.js. */ section.alt { background: var(--bg-2); } .lede { font-size: clamp(17px, 2vw, 20px); color: var(--ink-2); max-width: 64ch; } /* ---------------------------------------------------------------- header */ .site-header { position: sticky; top: 0; z-index: 50; /* Opaque, not a 92% wash behind a 10px backdrop blur: a translucent header takes whatever scrolls under it into the contrast of its own nav labels, and a backdrop-filter on a sticky element reblurs on every scroll frame. */ background: var(--bg); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; gap: 18px; height: 64px; } .logo { display: flex; align-items: center; gap: 9px; font-weight: 800; text-decoration: none; letter-spacing: -.02em; font-size: 17px; white-space: nowrap; } /* Height-driven, width auto: the emblem keeps its own proportions whatever crop it is replaced with, and the intrinsic width/height on the tag still reserves the space. */ .logo img { height: 34px; width: auto; flex: none; } .site-footer .logo img { height: 38px; } .site-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; } .site-nav a { text-decoration: none; padding: 8px 11px; border-radius: 9px; font-size: 14.5px; color: var(--ink-2); font-weight: 500; } .site-nav a:hover { background: var(--bg-2); color: var(--ink); } /* The page you are on. Colour plus an underline plus weight, because 1.4.1 does not let the accent be the only thing saying it. */ .site-nav a[aria-current="page"] { color: var(--accent); font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } /* .site-nav a outranks .btn-primary on specificity, so the header CTA needs its own rules restated or it renders muted grey text on the accent fill. Hover and press are restated too — pinning both states to the base accent, which is what the single combined rule here used to do, left the one button in the header as the only primary on the site that did not respond to the pointer. */ .site-nav a.btn-primary { background: var(--accent); color: var(--accent-ink); } .site-nav a.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); } .site-nav a.btn-primary:active { background: var(--accent-pressed); color: var(--accent-ink); } .lang-switch { display: flex; gap: 2px; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--line); } .lang-switch a { padding: 6px 7px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .lang-switch a[aria-current] { color: var(--accent); } /* The header phone number. Sits between the language switch and the CTA, in the navy rather than the accent, because it is the second-choice action on desktop and must not compete with "Get your price". Below 769px it is removed: the sticky mobile bar carries a full-width call button, and two call links on one screen is one too many. */ .hdr-tel { display: flex; align-items: center; gap: 6px; margin-left: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; } .site-nav a.hdr-tel { color: var(--ink); font-weight: 650; font-size: 14px; } .hdr-tel svg { width: 15px; height: 15px; flex: none; color: var(--accent); } /* The number drops to its icon before the row runs out of space. The band has to reach 1280px because the row is at its widest just above it — with the number spelled out the Russian header needs 1189px and the French 1176px, so hiding the text at 1120, as this did until 2026-09-23, left both overflowing between 1121 and their own width. 1280 rather than the 1240 that just fits: at 1240 the Russian row cleared the edge by 15px, which is inside the margin a different font stack can move it. */ @media (max-width: 1280px) and (min-width: 1101px) { .hdr-tel span { display: none; } } @media (max-width: 768px) { .hdr-tel { display: none; } } .nav-toggle { display: none; } /* 1100px and not the 940 it was until 2026-09-23. The row is nine items and its width is whatever the language makes it: measured with the number already reduced to its icon, the English nav needs 989px and the Russian 1071px, so between 941 and 1070 the Russian, French and German headers overflowed the viewport and pushed the quote button off the right edge — a horizontal scrollbar on a laptop, on 3 of the 5 languages. Reducing the gap and the padding was tried and measured: it recovers 80px where Russian needed 134, so the labels do not fit at any honest size and the menu is the right answer. One breakpoint for every language rather than five, because it is the widest that has to fit, and 1024 — where English and Italian did still fit — is a tablet in landscape, where a menu button is what a visitor expects anyway. */ @media (max-width: 1100px) { .site-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 14px 14px; box-shadow: var(--shadow); } .site-nav.open { display: flex; } .site-nav a { padding: 12px 10px; font-size: 16px; } .lang-switch { margin: 6px 0 0; padding: 10px 0 0; border-left: none; border-top: 1px solid var(--line); } .nav-toggle { display: block; margin-left: auto; background: none; border: 1px solid var(--field-line); border-radius: 9px; padding: 8px 11px; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; } } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 11px; border: 1px solid transparent; font: inherit; font-weight: 650; font-size: 15.5px; text-decoration: none; cursor: pointer; transition: transform .06s ease, background-color .15s ease, border-color .15s ease, color .15s ease; } .btn:active { transform: translateY(1px); } /* Hover and press are darker teals, not brightness(1.08) — that lightened the fill, which is the wrong direction, and moved the label's contrast to a number nobody could state. These are stated: 6.47:1 and 8.26:1 with white on them. */ .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:active { background: var(--accent-pressed); } .btn-dark { background: var(--navy); color: #fff; } .btn-dark:hover { background: color-mix(in srgb, var(--navy) 88%, #ffffff); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--field-line); } .btn-ghost:hover { background: var(--bg-2); border-color: var(--accent); color: var(--accent); } .btn-wa { background: var(--wa); color: #05331b; } .btn-wa:hover { background: color-mix(in srgb, var(--wa) 88%, #000000); } .btn-lg { padding: 13px 20px; font-size: 16px; line-height: 1.4; width: 100%; } .btn svg { width: 18px; height: 18px; } /* ---------------------------------------------------------------- hero */ /* Padded from the same token as every section below it, so the hero is a band in the page's rhythm rather than a law unto itself. Its height is then whatever the copy and the booking card need — and since the card is the taller of the two, shortening the card (see the quote widget, further down) is what actually sizes this section. */ /* Navy. The three-stop gradient that used to be here ended on a teal-grey in neither the logo nor the palette, and the white radial glow under it was decoration over a photograph that already carries its own scrim. Both went, and the base stayed flat. */ /* --scrim is the cover overlay, and it is declared here — once, on .hero — because as of 2026-09-26 every page wears the same cover layout and the same overlay over it. Both photographic heroes read this one property and nothing overrides it per page, which is what "consistent across every page" means in practice: one number, one place. .1 is the owner's setting: 90% transparent, 10% opacity. What it costs the copy is written out in full in the destination-hero block below. Read that before changing it — at this value the site is publishing a WCAG AA contrast failure on the heroes that carry text over a photograph, and that is a decision on record, not an oversight. */ .hero { --scrim: .1; background: var(--navy); color: #fff; padding: var(--space-section) 0; position: relative; overflow: hidden; } /* A gradient again, but only where there is no photograph, and built so it cannot repeat either half of what got the last one deleted. NEITHER OBJECTION SURVIVES THE REWRITE. The teal-grey was an off-palette colour picked as an end stop; every stop here is var(--navy) itself, mixed with white or black, so the hue is the palette's by construction and it follows --navy into dark mode without a second rule. The glow was decoration laid over a photograph that already had a scrim doing the same job; this only paints heroes that have no photograph at all — :not(.hero-dest) excludes every hero with a cover photograph behind it and :not(.hero-shot) the home page. MEASURED RATHER THAN EYEBALLED, because that is what put .20 and .5 on this site before. White on the flat navy is 15.8:1. The lightest stop here — navy mixed 10% with white — is 11.8:1 in light mode and 13.2:1 in dark. AA wants 4.5 and AAA 7, so the copy has room at every point of the sweep, and the .82-alpha lede clears both as well. NO PAGE CARRIES IT ANY MORE, and that is why it stays. Since 2026-09-26 every hero on the site is a cover hero: the home page has its own photograph, the four hubs have their banners, a route page takes its destination photograph or else its departure airport's banner, and the four standalone heroes take the Nice banner. So this rule now matches only a hero that ended up with no photograph at all — a deleted banner, a config record that lost its `photo`, an assets directory that did not ship — and it is the floor under that case rather than a layout anybody chose. It is a wash, not a feature — at 155deg over a hero that is mostly copy and a booking card, what it buys is that the band stops reading as a printed slab. */ .hero:not(.hero-dest):not(.hero-shot) { background: linear-gradient(155deg, color-mix(in srgb, var(--navy) 90%, #fff) 0%, var(--navy) 48%, color-mix(in srgb, var(--navy) 88%, #000) 100%); } .hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr var(--quote-col); gap: clamp(22px, 3vw, 44px); align-items: start; } .hero h1 { color: #fff; margin-bottom: .35em; } .hero .lede { color: rgba(255, 255, 255, .82); } .hero-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 9px; } .hero-points li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,.9); font-size: 15px; margin: 0; } /* Pale rather than mint green: the tick shape already does that job and the site's only green is WhatsApp's. Literal, not var(--bg-3), because the hero is navy in both modes. */ .hero-points svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: #eaf6f8; } .eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 14px; } /* ---------------------------------------------------------------- hero photograph assets/hero/nice-airport-transfers-chauffeur-*, cut from picks/hero-master-clean.png. Where things are, in master pixels of the 1671x941 frame, because every number below is derived from these: terminal and canopy x 0-700, palm x 520-720, chauffeur x 250-470 with his head at y 300, V-Class x 190-700, family x 690-878 with heads at y 390 and feet at y 915, luggage x 600-900. Right of x 890 the frame is sky, coast and sea and nothing else — that is where the headline used to be printed, and it is now the clear ground the booking card sits on. The card being able to sit there is the whole reason this frame works with a widget on the right. The overlay over it is the site-wide cover overlay — flat, one value, the same on this page as on every other — and at --scrim .1 it is very nearly not there. It no longer shapes itself round the copy; see the cover overlay rule below. */ @media (min-width: 1200px) { /* A ratio, not a length. A full-bleed cover background crops vertically by however much shorter the box is than the photograph, so a hero fixed at 690px crops harder the wider the window gets. Pinning height to width holds the crop still: 47vw keeps roughly the top 880 rows of the master on screen at any width, and the feet are at row 915, so the family stands on the ground rather than being cut through the ankles. Two ceilings, because a hero can be too big in two ways. 88vh is the one that keeps the trust bar under the fold — and it is 88 rather than 84 because at 1920x1080 the 84vh cap cropped the last four rows of the band, which is the tips of the shoes and the kerb line: the one crop on this photograph that reads as a mistake rather than a framing. At 88vh the feet clear at every size checked from 1280 to 1920, and the trust bar still shows. 1120px is the hard stop for very wide monitors, where 50vw would ask for 1280. */ .hero-shot { min-height: clamp(560px, min(50vw, 88vh), 1120px); padding-block: clamp(18px, 1.8vw, 34px); } .hero-shot .wrap { align-items: start; } /* The copy is anchored to the top because its budget is measured from there. The card has no such constraint — behind it is empty sky at any height — so it takes the slack. */ .hero-shot .quote-card { align-self: center; } } /* Three layers, and the order matters: photo, scrim over it, copy over both. Without the explicit z-index the picture paints after the ::before meant to dim it, and the headline ends up white on bright sky. */ .hero-photo { position: absolute; inset: 0; z-index: 0; display: block; } /* Anchored to the top, and that is what buys the copy its room. The heads are at y 390, so the clear band above the family is 390 x (viewport / 1671) tall — 336px at 1440, 448px at 1920 — and any downward pan spends it. What it costs is the bottom of the frame, which is kerb and tarmac. Losing tarmac is cheaper than putting a headline over a face. */ .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; } /* ------------------------------------------------- the cover overlay One rule, both photographic heroes, one value, and that is the whole point of it. The home page and the destination pages used to knock their photographs back in two different ways — a shaped three-gradient scrim here, a flat wash there — so "the overlay" was two numbers on two geometries and could not be set once. It is one declaration now, reading --scrim from .hero, so every cover hero on the site is dimmed by the same amount. WHAT THE SHAPED VERSION DID, because the problems it was shaped around are still in the photograph. It laid three gradients over the home frame: an ellipse under the copy block at the top left, cut off on the vertical before it reached the family's heads at master y 390 and stopping short of them at x 690; a wash down the left edge sized to the white AÉROPORT NICE CÔTE D'AZUR lettering on the terminal glass at x 20-320, which the lede crosses at every desktop width; and a top-to-bottom wash so the sticky header had something to sit against and the trust bar's border did not land on bright tarmac. Those three things — the signage under the lede, the faces beside the copy, the header edge — have not moved. They are simply no longer treated, because a flat overlay has no shape to put anywhere and 10% of navy does not hide lettering. A flat overlay is also the only kind that can be set by one number without lying about what it does. A shaped scrim is strong where you look for it and thin at the far corner of the copy block, which is how this site shipped a contrast failure nobody caught; see the history in ACCESSIBILITY.md. Flat has no thin part. At --scrim .1 it has no thick part either. */ .hero-shot::before, .hero-dest::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(0,26,50,var(--scrim)), rgba(0,26,50,var(--scrim))); } .hero-shot .wrap { z-index: 2; } /* The copy sits on bright sky with a 10% overlay over it, so it carries its own shadow. It was written for the copy that ran past the edge of the shaped patch; with the patch gone it is all there is. Note what it is not: WCAG does not count text-shadow, so this makes the line legible on a good monitor without making it pass. The equivalent for the destination heroes is further down, a couple of hundredths heavier. */ .hero-shot h1 { text-shadow: 0 2px 16px rgba(0, 14, 26, .6), 0 1px 3px rgba(0, 14, 26, .5); } .hero-shot .lede, .hero-shot .hero-points li, .hero-shot .eyebrow { text-shadow: 0 1px 12px rgba(0, 14, 26, .68), 0 1px 2px rgba(0, 14, 26, .55); } /* The copy block has a hard ceiling here, and it is arithmetic rather than taste: the tallest head is at master y 390, the picture is drawn at viewport / 1671, so the clear band above the family is 390 x that scale — 336px at 1440, 280px at 1200 — and the hero's own top padding comes out of it first. Wide rather than narrow, because the constraint is height and width is what buys height back: at a 46ch measure the headline ran to three lines and the lede to four. */ @media (min-width: 1200px) { .hero-shot .hero-copy { max-width: min(100%, 640px); } .hero-shot h1 { font-size: clamp(27px, 2.2vw, 33px); margin-bottom: .3em; } .hero-shot .eyebrow { font-size: 12px; margin-bottom: 6px; } .hero-shot .lede { font-size: clamp(15.5px, 1.1vw, 16.5px); line-height: 1.45; max-width: none; margin-bottom: 0; } /* The two claims are the last 60px in the budget and the first that can go. Measured at 1440x900: with them the copy block ends at y 326 and the heads are at y 311, so the lede lands across the mother and the father. Without them it ends at 266 and clears them by 45px. They stay on for the stacked layout below 1200, where the copy sits on the hero own navy under the picture and costs nobody a face. */ .hero-shot .hero-points { display: none; } } /* Below 1200 the picture stops being a background and becomes a band across the top. It has to: stacked, the hero is over 1100px tall and the full frame leaves nothing to crop vertically, so any pan puts the booking card over somebody. The band is also a different file — the master cropped to x 0-1080, y 90-941 — because at 390px wide the full frame renders each face about seven pixels across and no object-position fixes that. The media query on the switches at this same 1200. */ @media (max-width: 1199px) { .hero-shot { padding-top: 0; } .hero-shot .hero-photo { position: relative; inset: auto; width: 100%; aspect-ratio: 1080 / 851; max-height: min(58vh, 470px); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); } /* 8% down the overflow rather than centred: it keeps the heads — at y 300 of the crop — inside the band at every width the cap applies to. */ .hero-shot .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; } /* Nothing is over the photograph now — the copy sits below it on the hero's own navy, and the mask has faded the picture out by the time the eyebrow rides up into it. */ .hero-shot::before { content: none; } .hero-shot .wrap { margin-top: -26px; } } /* ------------------------------------------------- destination hero (cover hero) assets/destinations/-640/960/1280.jpg, one photograph of where the car is going — and, since 2026-09-26, assets/banners/ behind every other hero on the site too. This is the cover layout: a full-bleed photograph, the flat overlay above, the copy over both. It carries the four hubs, all the route pages, and the four standalone heroes, and it shares .hero-photo and the overlay with the home page. What still separates it from the home hero is geometry, not treatment. The home frame is a photograph of people and its numbers are measurements of where their faces are: the copy is capped so the lede clears their heads, and the two hero points are dropped above 1200 to buy that clearance. A destination photograph has no faces and no protected region — it is a city, edge to edge, bright everywhere — so the hero points stay on at every width because nothing is behind them that they can spoil, and the frame is 16:9 against the home hero's 2:1. The overlay itself is the same flat knock-back on both, at the same value. */ .hero-dest .wrap { z-index: 2; } /* One number, and it is deliberately one number — and since 2026-09-26 it is also one number for the whole site rather than one for the destination heroes. The declaration moved up to .hero and the ::before moved up to the shared cover overlay rule above; what is left here is the arithmetic, because this is where it was worked out and this is the block anyone will come looking for. The first version was three gradients shaped round where the copy sits, which is how the home hero used to work — and it is why the first version shipped a contrast failure nobody caught: a shaped scrim is strong where you look for it and thin at the far corner of the block, and the four hero points end up in the thin part over a white hull. Flat has no thin part. It also means anyone can retune this without reading the paragraph above it: change --scrim, nothing else moves. The value is the owner's to set, and as of 2026-09-26 it is set at .1 — 90% transparency, 10% opacity — on the owner's instruction, sitewide. What each setting costs against the 4.5:1 white text is owed. The worst case is white text over a pixel of pure white knocked back by this navy: --scrim .65 .62 .59 .587 .58 .50 .20 .10 0 worst 5.56 5.02 4.54 4.50 4.40 3.42 1.54 1.23 1.00 THE SETTING IS BELOW THE FLOOR AND THE FLOOR IS NOT A MATTER OF TASTE. .587 is where white copy over the brightest pixel a photograph can contain reaches 4.5:1. At .1 that pixel measures 1.23:1. The site shipped .20 — 1.54:1 — until 2026-08-29, when raising it to .59 closed the last recorded AA failure on the site; .1 is lower than the value that failure was made of, and it is now on the home page and the four standalone heroes as well as on every route page and hub, because the cover layout is sitewide. This is a published AA failure by decision. It is recorded here and in ACCESSIBILITY.md rather than softened. .587 is the floor, not .58 — and the difference is why the row is written out at all. Both round to "about .59" in prose and only one of them passes: at .58 a white pixel under white text measures 4.40:1, a fail by a tenth. .59 was the house setting from 2026-08-29 to 2026-09-26 because it is the first sane number above the floor, and because three records in site.config.json had already been given exactly that value for exactly this reason. Do not read the text-shadow below as slack in this number. It is why a failing scrim still looks acceptable at a glance on a good monitor, which is how .20 survived as long as it did. WCAG does not count text-shadow, and neither does a passenger reading a phone in sunlight in an arrivals hall. WHAT IS LEFT PROTECTING THE COPY, since the overlay is not. Below 1200px nothing at all sits on the photograph: the picture becomes a band across the top, the ::before is turned off, and the copy sits below it on the hero's own navy at 15.8:1. That is the whole phone and tablet range, and it is unaffected by --scrim at any value. The exposure is the desktop layout at 1200px and up, where the copy is composited over the frame. The honest fix for a frame that fights its copy has always been the same one: stop putting text on top of it, which is exactly what the layout already does below 1200. See ACCESSIBILITY.md. Per-photograph overrides are gone and should stay gone: `scrim` on a record in site.config.json still works and still emits an inline --scrim on that one page, which is the one thing that would break "the same overlay on every page". See the `_scrim` note there before adding one back. */ .hero-dest h1 { text-shadow: 0 2px 16px rgba(0, 14, 26, .62), 0 1px 3px rgba(0, 14, 26, .5); } .hero-dest .lede, .hero-dest .hero-points li, .hero-dest .eyebrow { text-shadow: 0 1px 12px rgba(0, 14, 26, .7), 0 1px 2px rgba(0, 14, 26, .55); } @media (min-width: 1200px) { /* A floor rather than a height. The booking card is still the tallest thing in this hero and still what sizes it, exactly as on the gradient route pages — this only stops a short-copy route from cropping the photograph to a letterbox. 36vw against the home hero's 50vw because there is less to see: the frame is 16:9 rather than 16:9.4, and the subject is spread across it rather than standing at one edge of it. */ .hero-dest { min-height: clamp(420px, min(36vw, 72vh), 780px); padding-block: clamp(20px, 2vw, 36px); } .hero-dest .quote-card { align-self: center; } .hero-dest .hero-copy { max-width: min(100%, 620px); } } /* Centred rather than anchored to the top. Cover crops about 11% off a 16:9 frame in this box, and split top and bottom that is sky off the roof and water off the foot — where anchoring to the top would spend all of it on the waterfront, which on this photograph is the half of the picture worth showing. */ .hero-dest .hero-photo img { object-position: 50% 50%; } /* Below 1200 the photograph becomes a band across the top, the same move the home hero makes and for a simpler reason: stacked, the copy and the card are over 900px tall and there is nothing left to crop the picture to. The band is the same files — a skyline is legible at 390px in a way a face is not, so unlike the home hero there is no second crop and no switch, only this. */ @media (max-width: 1199px) { .hero-dest { padding-top: 0; } /* The fade starts at 70% and the copy rides up 14px, against the home hero's 78% and 26px, and the eight pixels are the whole difference between the two photographs. Both let the eyebrow sit inside the bottom of the picture so the band does not read as a separate block glued above the copy. The home hero fades into hazy sky, where whatever survives the mask is nearly the navy underneath it anyway; this one fades into lit buildings and water at around 180 luma. Measured at 375px with the earlier numbers, the eyebrow — 62% white, 12.5px, so normal text under WCAG rather than large — came out at 4.45:1 against what showed through, which is a fail. At 70% and 14px it is 6.2:1. */ .hero-dest .hero-photo { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; max-height: min(38vh, 320px); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); } .hero-dest .hero-photo img { width: 100%; height: 100%; object-fit: cover; } /* Nothing is over the photograph now — the copy sits below it on the hero's own navy. */ .hero-dest::before { content: none; } .hero-dest .wrap { margin-top: -14px; } } @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: clamp(20px, 3.4vw, 28px); } } /* ---------------------------------------------------------------- trust bar */ .trustbar { background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 18px 0; } .trustbar .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } /* Stacked, not side by side: the picture is a band across the item now, with the two lines of text under it, which is the shape every card on the site carries. */ .trust-item { display: flex; flex-direction: column; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; } .trust-item svg { width: 22px; height: 22px; flex: none; color: var(--accent); margin-top: 2px; } /* The photograph, as a band across the item — the same 3:2 every card on the site carries, so the strip under the hero and the grids below it read as one family rather than two. It was a 56px circle until the cards became bands and left it the odd one out. */ .trust-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 9px; background: var(--bg-3); } .trust-item b { display: block; font-size: 14.5px; } .trust-item span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; } @media (max-width: 860px) { .trustbar .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { /* Already stacked at every width now; only the padding and the type tighten here. */ .trust-item { gap: 8px; padding: 11px 10px; } .trust-item b { font-size: 13px; } .trust-item span { font-size: 11.5px; } } /* ---------------------------------------------------------------- quote widget */ /* * THE GENEVA LOOK, since 2026-09-19. The owner asked for this card to match the one on * genevaairporttransfer.net: dark glass over the hero, a green band carrying the heading, * blue capital labels, fields that turn white once they hold an answer, and the two * buttons full width one above the other. It is dark in both colour schemes, because * every hero it sits in is navy or a photograph in both. * * Three places where it deliberately parts from Geneva, all contrast: * - The labels are #6fa8dc, not Geneva's steelblue #4682b4. Steelblue on that navy is * 4.0:1, and 2.0:1 where a bright photograph shows through; #6fa8dc is 6.9:1 on the * card and still 4.9:1 over pure white behind the glass. * - The glass is 88% opaque where Geneva's is 78%, which is what keeps that 4.9:1. * - The WhatsApp button keeps this site's dark-green lettering. White on #25d366 is * 2.0:1, the one colour pair on Geneva's card that nobody can read in sunlight. * The band is Geneva's #1f7a4d, which carries white at 5.3:1. It is the second green on * the site after WhatsApp's, and it is here only because this is the WhatsApp form. * * `container-type` makes the card's width its own business rather than the viewport's. * The card appears in a hero column, in a stacked mobile layout and on the airport and * route pages, and the question its rows need answered is "how wide am I", not "how wide * is the window" — a media query gets that wrong the moment the card is not the full * width of the screen. */ .quote-card { container-type: inline-size; --q-label: #6fa8dc; color: #fff; border-radius: 16px; overflow: hidden; background: rgba(8, 26, 46, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 26px 60px rgba(0, 0, 0, .34); color-scheme: dark; } .q-head { background: #1f7a4d; padding: clamp(12px, 1.1vw, 16px) clamp(14px, 1.3vw, 20px); } .quote-card h2 { color: #fff; font-size: clamp(18px, 1.5vw, 22px); margin: 0 0 3px; } .q-sub { font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .92); margin: 0; } .q-body { padding: clamp(10px, 1vw, 14px) clamp(14px, 1.3vw, 20px) clamp(14px, 1.3vw, 18px); } .quote-card label { display: block; font-size: 11.5px; line-height: 1.3; font-weight: 800; color: var(--q-label); margin: 9px 0 4px; text-transform: uppercase; letter-spacing: .08em; } .q-body > label:first-child { margin-top: 0; } /* 16px on the inputs and not a decimal less: iOS Safari zooms the whole page in on focus for anything smaller, and a viewport that jumps mid-booking is worse than a card two pixels taller. The line-height is what gives the height back — the body's 1.6 is a reading measure and a select is not a paragraph. The min-height evens out what the browsers give a select, a text field and a date field at the same padding, so a row of two reads as one row. 44px and not the 42 it was until 2026-09-23, because that is the floor both Apple and WCAG 2.5.5 put under a touch target, and these are tapped with a thumb on a phone at the kerb. It is a floor, not a height: the padding and line-height still decide, and every control here is short enough that the floor is what answers. The border is 42% white, 3.5:1 on the glass at worst, because on an empty field it is the only thing that shows there is a field. */ .quote-card input, .quote-card select { width: 100%; min-width: 0; min-height: 44px; padding: 8.5px 11px; font: inherit; font-size: 16px; line-height: 1.3; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .42); border-radius: 8px; text-overflow: ellipsis; } .quote-card input::placeholder { color: rgba(255, 255, 255, .68); opacity: 1; } .quote-card select option, .quote-card select optgroup { color: #0b2340; background: #fff; } /* Answered. quote.js sets the class, because a date, a time and a select have no :placeholder-shown to test. `color-scheme: light` is what turns the calendar and clock icons dark again on the white ground. */ .quote-card .is-filled { color: #0b2340; background: rgba(255, 255, 255, .94); border-color: rgba(255, 255, 255, .94); color-scheme: light; } .quote-card input:focus-visible, .quote-card select:focus-visible { outline: none; border-color: var(--q-label); box-shadow: 0 0 0 3px rgba(111, 168, 220, .45); } /* Asked for and not yet given. Set by quote.js when a send is blocked, and dropped again the moment the field is answered. The border carries it rather than a colour on the text, because an empty field has no text to colour, and it is paired with the named list in #q-status so it does not rely on colour alone. */ .quote-card .is-missing { border-color: #ffb4a8; box-shadow: 0 0 0 3px rgba(255, 180, 168, .28); } .q-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; } /* The phone gets the wider half, since it holds two controls. */ .q-row-contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } /* The code and the number read as one field: one outline, one radius, split by a rule. */ .q-phone { display: flex; } /* Both halves are since 2026-10-14 — the code stopped being a