/* ═══════════════════════════════════════════════════════════════════════════ THE ISLAND — one deployment's homepage, hand-designed as a whole page. Loaded only when `layout.stylesheet` is set (index.html), so no other tenant requests a byte of it. Everything is scoped under `.layout-island` so the shared nav and footer can be restyled here without reaching any other page. The design record is spec 05 §26. Two values in it are load-bearing rather than taste and must not drift: · the display face is Outfit at weight 200 — measured against Linear (510) and Stripe (300); every car rental site sets 700-800, and the weight alone reads as "not a car rental site" before a word is read; · the accent appears on ONE element — the thing you are meant to press. A second saturated element on this page is a bug, not a decision. The ground was #F7F8FA cool near-white until 2026-08-24, when the owner chose Ink and Blush over five near-monochromes and six jewel tones, and DEEP WATER on 2026-08-26 after seeing nine colourings rendered whole. Ink and Blush and Graphite are both kept on record in the token block. ═══════════════════════════════════════════════════════════════════════════ */ /* These tokens deliberately do NOT go in a `:root` block. `:root` means one thing in this codebase — the tenant palette `build_palette()` derives from base.css — and a colour literal declared in any other `:root` is a colour no tenant palette can ever reach (tests/test_palette_integrity.py names the bug that guard was written for). Unreachable is the correct outcome here, but saying it in `:root` would say it in the wrong vocabulary: layout and colour are ours and are never tenant-editable, so these belong scoped to the layout that owns them. */ .layout-island { /* SAND AND TERRACOTTA, chosen 2026-10-06 with the name Local Car Rentals (owner's "lets go with A", spec 2026-10-06-local-car-rentals-rebrand): a warm light ground, white cards, dark ink, a terracotta accent on the booking button only, Fraunces headings. The notes below were written for the dark colourings that came before; the ROLES they describe hold, the near-black values they mention do not. DEEP WATER, chosen 2026-08-26. A cold blue-black ground with a pale steel accent on exactly one thing: the element you are meant to press. It overturns this file's own argument, and that was the owner's call made with the argument in front of him. The rental industry owns yellow (Hertz), red (Avis), orange (Sixt, Budget), green (Europcar, Enterprise) and blue (Alamo, Thrifty, and every local firm on every island) -- which is why the accent was rose for two days. What separates this from the incumbents is value, not hue: theirs is a mid, saturated blue on white and reads as signage; this is a desaturated near-white blue, used once, on near-black. If the site ever starts reading as generic, the accent is the first place to look. TWO ALTERNATIVE COLOURINGS are kept. Each is the same file with these TWELVE values swapped, and nothing else: INK AND BLUSH -- live 2026-08-24 to 2026-08-26 --isl-bg #141215 --isl-card #1E1B20 --isl-line #2F2B32 --isl-ink #F2EAEA --isl-dim #968E92 --isl-accent #D9A2A2 --isl-accent-ink #141215 --isl-scrim #09202A --isl-ok #8FBBA0 --isl-warn #DCBC8B --isl-bad #EE857C --isl-info #9CB4CB GRAPHITE -- never live --isl-bg #4A4F54 --isl-card #565C62 --isl-line #676E75 --isl-ink #F2F5F7 --isl-dim #B7BEC4 --isl-accent #E5AFA8 --isl-accent-ink #34383C --isl-scrim #0E1E26 --isl-ok #B4DAC2 --isl-warn #F2DCB6 --isl-bad #FFB4AC --isl-info #C4D7E8 It was six until 2026-08-26, and the claim was not true. Two things were wrong with it. The four meanings did not exist yet, and when they arrived they had to join the set rather than sit outside it: measured on Graphite's lighter ground, the Ink and Blush four read 3.26:1 to 4.57:1 and every one fails, so a ground that moves needs them to move with it. The values above are the same meanings lifted to clear 4.5:1 on #4A4F54. The second was older and quieter. The neutral ramp below -- the washes, the second line, the two dim inks -- was seven more literal hex values with no link to the six, so swapping the six gave a Graphite page with Ink and Blush cards on it. Rendering the booking wizard under these values is what showed it. Those seven now derive, and --isl-accent-ink is the one that could not (see its note below), which is why the set is eleven and not ten. The twelfth arrived last and for the same reason: the veil over a photograph was a fourth literal, and it was the deep sea-blue of a palette this brand REJECTED, still tinting the only photograph on the site months after the palette lost. Everything else in this file derives from these twelve, so a new colouring really is a twelve-line edit -- with ONE exception, named here so the claim stays true. The five placeholder gradients (the hero's hard horizon, the three tile grounds, the feature card's) are hand-painted illustration, roughly fourteen tuned stops, and they do NOT derive. That is deliberate: they are a drawing, not a surface, and a formula would flatten the horizon that makes them read as artwork instead of as a failed upload. A new colouring must repaint them by eye. They are all near-black, so the mismatch is slight, and they disappear entirely the day real photographs land -- which is why this is a note and not a twelve-line list of stops. (Graphite with no accent at all -- accent #F2F5F7, accent-ink #34383C -- was the version shown first; it lost because a page whose whole job is one button should not paint that button the same colour as its body text.) */ --isl-bg: #F5EFE6; --isl-ink: #2A2420; --isl-dim: #74695F; --isl-accent: #B8532E; --isl-card: #FFFDF9; --isl-line: #E3D8C8; /* THE FOUR MEANINGS, and they are part of the colouring above rather than constants that outlive it. A booking wizard has to be able to say "available", "excess", "error" and "note"; nothing else on this site does, which is why they arrived late (2026-08-26) and why they are the only saturated colours here that are not the accent. They are theme values because they HAVE to be, not as a tidiness rule. Measured against Graphite's #4A4F54 ground, this set reads 3.26:1 to 4.57:1 -- every one of them fails, and `--isl-bad` fails worst. A ground that moves needs these to move with it, so they swap together or the next colouring ships four illegible states. Kept deliberately quiet against the accent's job of being the one thing you press: none of them is a brand colour and none should read like one. `--isl-bad` is the exception that has to fight -- at roughly 72% saturation against the accent's 26% it reads as a distinctly hotter coral, because an error that reads as the brand colour is an error nobody sees. */ --isl-ok: #2F7D55; --isl-warn: #9A6410; --isl-bad: #B83A2E; --isl-info: #5B549E; /* The two faces, one token each (owner 2026-10-06 10:34, "lets apply 1"): Fraunces for headings with Literata behind it, because Fraunces draws no Greek; Inter for everything else -- body, labels, fields, times, prices, buttons. The mono that used to label things here is gone, and Outfit is left to the wordmark alone (`.brand-name`). */ --isl-sans: "Inter", "Segoe UI", Arial, sans-serif; --isl-serif: "Fraunces", "Literata", Georgia, serif; /* Text that sits ON the accent, and the eleventh member of the swap set. Load-bearing: the button used to be white on deep sea and is now near-black on a pale steel blue, so a hardcoded #fff here would have been invisible. It is stated rather than derived because it cannot be derived. The obvious formula is "the ground" -- and on Ink and Blush that is exactly right, the value below IS --isl-bg and reads 8.55:1 on the accent. On Graphite the same formula gives 4.35:1 and fails. Which way this has to move depends on how light the accent is, and a light accent wants dark text while a dark one wants light: that is a decision per colouring, not an offset. */ --isl-accent-ink: #FFFFFF; /* The veil over a photograph, and the twelfth member of the swap set. Three places use it: the foot of the hero, and the destination tiles at rest and on hover. It exists so white text can sit on an image whose brightness we do not control. It is DELIBERATELY COLDER THAN THE GROUND, and that is the whole reason it is a value rather than an offset. Read the hero: it is the Aegean, and a cool veil holds the sea turquoise where the warm near-black above would grey it out. Derived from --isl-bg the page would still be coherent -- the shift measures 10 of 255 and only in the water -- but the sea is the picture, so the picture wins and the colour gets registered instead. Which way it has to move is a judgement per colouring, exactly like --isl-accent-ink: it must stay plausibly related to the ground while serving whatever the photographs are of. There is no formula, so a new colouring must LOOK at the hero and decide. Nothing here will warn you -- a scrim left behind is invisible until it is on someone else's photo. */ --isl-scrim: #2A1A10; /* The neutral ramp, DERIVED. Six tokens describing one system -- the values are inverted from the near-white original but the ROLES are unchanged, which is what let this become a colour swap rather than a rewrite. They were literal hex until 2026-08-26, and that quietly made the promise at the top of this block false: swapping the six seeds gave a Graphite ground with Ink and Blush cards still sitting on it, because these six had no link to the seeds they were picked to sit against. Rendering the booking wizard under the Graphite values is what showed it. Each is now the offset that produced the hand-picked value, fitted against it and measured: every one lands within 2/255 of what it replaced except --isl-accent-deep, which is 5 and is one stop of a gradient. So this is the same colouring, stored as relationships instead of as results -- and the swap set above is now genuinely the only thing a new colouring touches. */ --isl-ink-2: color-mix(in oklab, var(--isl-dim) 72%, var(--isl-bg)); /* placeholder art, disabled marks */ --isl-ink-3: color-mix(in oklab, var(--isl-dim) 88%, var(--isl-bg)); /* placeholder text */ --isl-line-2: color-mix(in oklab, var(--isl-line) 80%, var(--isl-dim)); /* a border that has been pointed at */ --isl-wash: color-mix(in oklab, var(--isl-card) 96%, var(--isl-ink)); --isl-wash-2: color-mix(in oklab, var(--isl-card) 60%, var(--isl-bg)); --isl-accent-deep: color-mix(in oklab, var(--isl-accent) 68%, var(--isl-ink)); /* Each meaning's panel and its edge, DERIVED rather than chosen -- a little of the meaning mixed into the ground it will sit on. These were twelve hand-picked hex values for one afternoon, and that was the bug: eight of them were tints of a ground they had no link to, so the next colouring would have swapped the ground and left the panels behind. Mixing makes the relationship the thing that is stored, and the swap set above the only thing anyone has to touch. `in oklab`, not `in srgb`: mixing a light colour into a dark one in sRGB drags it toward grey and the hue washes out at exactly these low percentages, which is the whole signal here. 12% and 32% measured on Ink and Blush: the meaning stays between 6.3:1 and 8.6:1 on its own panel, and the edge stays visible without becoming a second statement. */ --isl-ok-bg: color-mix(in oklab, var(--isl-ok) 12%, var(--isl-bg)); --isl-ok-line: color-mix(in oklab, var(--isl-ok) 32%, var(--isl-bg)); --isl-warn-bg: color-mix(in oklab, var(--isl-warn) 12%, var(--isl-bg)); --isl-warn-line:color-mix(in oklab, var(--isl-warn) 32%, var(--isl-bg)); --isl-bad-bg: color-mix(in oklab, var(--isl-bad) 12%, var(--isl-bg)); --isl-bad-line: color-mix(in oklab, var(--isl-bad) 32%, var(--isl-bg)); --isl-info-bg: color-mix(in oklab, var(--isl-info) 12%, var(--isl-bg)); --isl-info-line:color-mix(in oklab, var(--isl-info) 32%, var(--isl-bg)); /* One gutter, one card inset. There were four different left edges on the phone and three on desktop, none of them chosen -- and a reader who cannot name that is still the reader who calls the page cheap. A single true left rule down the page is most of what "designed" means. */ --isl-gutter: 20px; /* text and grids */ --isl-edge: 14px; /* cards that sit outside the gutter (the hero) */ /* Three radii, nested: an inner corner is the outer minus its padding. */ --isl-r-lg: 24px; --isl-r-md: 16px; --isl-r-sm: 12px; /* The hero photograph, when there is one: the template sets this on the section itself. Declared here so the no-photo path is an explicit `none` rather than an unset property -- `background-image: var(--unset)` is invalid at computed-value time, which is a different and much vaguer thing than being told there is no image. */ --isl-hero-photo: none; /* The same, for a destination page's hero band. Set inline on the section by `destination_island.html` when the page's content carries a photo, so this declaration is the no-photo default -- and it is also what makes the reference legal: tests/test_palette_integrity.py asserts every var() in this file resolves, and an inline-only variable reads as a typo it cannot distinguish from a real one. It was one when this line was missing. */ --isld-photo: none; /* And once more, for a destination TILE on the homepage. Same reason and the same trap: `island.html` sets it inline from the linked page's own hero photograph, and without this declaration the reference is a var() that resolves to nothing. */ --isl-tile-photo: none; /* The height of the shared header, which is `position: fixed` and opaque. The hero has to start below it: at `top: 0` the header sits ON the photograph and the top 83px of it can never be seen. That was invisible while the hero was a gradient and became the whole problem the moment a real photograph went in -- the subject of a landscape shot lives in the upper third, which is precisely the band the header was eating. Keep in step with `.nav-shell`'s padding plus the brand mark's height. */ --isl-header: 83px; --isl-grain: none; /* the film grain belonged to the dark ground */ background: var(--isl-bg); color: var(--isl-ink); font-family: var(--isl-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .layout-island main { display: block; } /* ── The rest of the site ───────────────────────────────────────────────── base.html applies `.layout-island` and loads this file on EVERY page, not only the front one — a design that stops at the homepage is not one, the visitor clicks About and lands on a different website. The inner pages are shared product templates styled by inner-pages.css and components.css, and both reach every colour through a token. So this maps the product's tokens onto Ink and Blush once, here, and those pages recolour themselves — rather than restating every card, badge and button under a new scope, which is what the deleted Night Drive theme tried and drowned in. Only tokens whose ROLE is unambiguous are remapped. That is the whole trick: `--primary-deep` is only ever a dark band's background and `--primary` is only ever text, so they can invert independently. A token used as both would have no correct value here and is left alone deliberately. Nothing in this block escapes `.layout-island`, so a classic deployment is untouched — and does not download this file at all. */ .layout-island { /* Ground and ink. */ --bg: var(--isl-bg); --text: var(--isl-ink); --muted: var(--isl-dim); --muted-alt2: var(--isl-dim); --muted-alt4: var(--isl-dim); --muted-alt5: var(--isl-ink-3); --muted-alt7: var(--isl-dim); --muted-alt9: var(--isl-dim); --muted-alt13: var(--isl-ink-3); /* Cards: a raised surface here is lighter than the ground, not whiter. */ --surface: var(--isl-card); /* Not the card's own rgb. Every `rgba(var(--surface-rgb), a)` in the product is a translucent WHITE -- a hairline, a hover lift, faded text on a dark band -- and never the card. On a near-black site that role wants the ink, and a card-coloured version of it would simply be invisible. The solid `--surface` above keeps the other meaning; the two are separated here because the product never separated them. */ --surface-rgb: 42, 36, 32; --surface-alt: var(--isl-wash-2); --surface-tint: var(--isl-line); --surface-tint-rgb: 227, 216, 200; --surface-tint-alt3: var(--isl-line); --surface-tint-alt4: var(--isl-wash); --border-plain: var(--isl-line); /* `--primary` is text on these pages; the `-deep`/`-alt` family is the dark band behind a page header. Inverted, that band is the ground with a little lift, which is why all three land near it rather than on a colour. */ --primary: var(--isl-ink); --primary-alt: var(--isl-wash); --primary-deep: var(--isl-bg); --primary-deep-alt5: var(--isl-wash-2); --primary-soft-alt4: var(--isl-dim); /* Shadow only. Black under a near-black card reads; navy does not. */ --primary-rgb: 0, 0, 0; /* The accent, and the one rule that survives from the front page: it is the thing you are meant to press. The `-warm`/`-pale`/`-alt` trio are the two stops of the button gradient, so they stay within one step of each other rather than becoming a second colour. */ --accent: var(--isl-accent); --accent-rgb: 184, 83, 46; --accent-alt: var(--isl-accent); --accent-alt2: var(--isl-accent-deep); --accent-warm: var(--isl-accent-deep); --accent-pale: var(--isl-accent); --text-on-accent: var(--isl-accent-ink); --text-on-accent-alt2: var(--isl-accent-ink); --text-on-accent-alt3: var(--isl-accent-ink); --radius-sm: var(--isl-r-sm); --radius-md: var(--isl-r-md); --radius-lg: var(--isl-r-lg); /* ── The rest of the palette ─────────────────────────────────────────── Added 2026-08-26. Everything above was mapped by hand when this layout only had a homepage, under the rule stated at the top of the block: remap a token only where its ROLE is unambiguous. That was the right rule and it stays -- but "unambiguous" was being decided by eye, so the ninety-odd tokens nobody had looked at kept resolving to the light tenant palette. Nowhere did that show as badly as the booking wizard. Every colour in it is a token -- fifty-seven references, not one literal -- so the whole five-step flow rendered as a light-theme component dropped onto a near-black page: white cards, white inputs, and labels like RETURN DATE that the reader simply could not see. It was never a booking bug. It was this block stopping early. So the role question got answered with evidence instead of by eye. Every `var()` in the product's stylesheets and templates was read together with the property it sits in, which sorts each token into text, background, border or shadow. Exactly thirteen turned out to carry two roles at once; eight of those were already decided above and the remaining five are named in the generator. Everything else had one role and one correct value. Three consequences worth keeping in mind: · this is the whole palette now, so a component nobody has opened yet -- the confirmation screen, a stop-sales banner, a validation error -- is already themed rather than waiting to be found; · the four meanings (ok / warn / bad / info) come from the tokens at the top of this file, not from the tenant palette, so they stay quiet enough to leave the accent as the only saturated thing on a page; · every `*-rgb` triplet feeds an `rgba()`, and on a near-black ground those are shadows. They go to black -- navy under a near-black card does not read. The two that are not shadows keep their hue, and `--surface-rgb` keeps the ink it was deliberately given above. Still scoped to `.layout-island`, so no other deployment sees any of it. */ --accent-pale-alt2: var(--isl-line-2); --accent-pale-alt3: var(--isl-line-2); --accent-pale-alt4: var(--isl-line-2); --accent-pale-alt5: var(--isl-line-2); --accent-warm-alt2: var(--isl-accent); --accent-warm-alt3: var(--isl-accent); --accent-warm-alt4: var(--isl-accent); --accent-warm-alt5: var(--isl-accent); --bg-alt2: var(--isl-wash); --bg-alt3: var(--isl-wash); --bg-alt4: var(--isl-wash); --bg-alt5: var(--isl-wash); --bg-alt6: var(--isl-wash); --bg-alt7: var(--isl-wash); --bg-alt8: var(--isl-wash); --danger: var(--isl-bad); --danger-alt2: var(--isl-bad); --danger-alt3: var(--isl-bad); --danger-alt4: var(--isl-bad-bg); --danger-bg: var(--isl-bad-bg); --danger-bg-alt2: var(--isl-bad-bg); --danger-bg-alt3: var(--isl-bad-line); --danger-bg-alt4: var(--isl-bad-bg); --danger-tint: var(--isl-bad-line); --danger-tint-alt2: var(--isl-bad-line); --info: var(--isl-info-bg); --info-alt: var(--isl-info); --info-bg: var(--isl-info-bg); --muted-alt10: var(--isl-wash); --muted-alt11: var(--isl-dim); --muted-alt12: var(--isl-dim); --muted-alt14: var(--isl-dim); --muted-alt15: var(--isl-wash); --muted-alt16: var(--isl-dim); --muted-alt17: var(--isl-dim); --muted-alt3: var(--isl-dim); --muted-alt6: var(--isl-dim); --muted-alt8: var(--isl-dim); --primary-deep-alt10: var(--isl-ink); --primary-deep-alt11: var(--isl-bg); --primary-deep-alt12: var(--isl-bg); --primary-deep-alt13: var(--isl-bg); --primary-deep-alt14: var(--isl-bg); --primary-deep-alt15: var(--isl-ink); --primary-deep-alt16: var(--isl-bg); --primary-deep-alt17: var(--isl-bg); --primary-deep-alt2: var(--isl-ink); --primary-deep-alt3: var(--isl-bg); --primary-deep-alt4: var(--isl-ink); --primary-deep-alt6: var(--isl-bg); --primary-deep-alt7: var(--isl-ink); --primary-deep-alt8: var(--isl-bg); --primary-deep-alt9: var(--isl-bg); --primary-soft: var(--isl-line-2); --primary-soft-alt2: var(--isl-line-2); --primary-soft-alt3: var(--isl-line-2); --primary-soft-alt5: var(--isl-line-2); --primary-soft-alt6: var(--isl-line-2); --primary-soft-alt7: var(--isl-ink); --success: var(--isl-ok); --success-alt: var(--isl-ok-bg); --success-alt2: var(--isl-ok); --success-alt3: var(--isl-ok); --success-alt4: var(--isl-ok); --success-alt5: var(--isl-ok); --success-alt6: var(--isl-ok); --success-bg: var(--isl-ok-bg); --success-bg-alt: var(--isl-ok-bg); --success-bg-alt2: var(--isl-ok-bg); --success-bg-alt3: var(--isl-ok-bg); --success-tint: var(--isl-ok-line); --success-tint-alt2: var(--isl-ok-line); --surface-tint-alt10: var(--isl-line); --surface-tint-alt11: var(--isl-line); --surface-tint-alt12: var(--isl-wash); --surface-tint-alt13: var(--isl-wash); --surface-tint-alt14: var(--isl-wash); --surface-tint-alt15: var(--isl-wash); --surface-tint-alt16: var(--isl-line); --surface-tint-alt17: var(--isl-dim); --surface-tint-alt18: var(--isl-dim); --surface-tint-alt19: var(--isl-line); --surface-tint-alt2: var(--isl-wash); --surface-tint-alt20: var(--isl-line); --surface-tint-alt21: var(--isl-line); --surface-tint-alt22: var(--isl-line); --surface-tint-alt23: var(--isl-dim); --surface-tint-alt24: var(--isl-line); --surface-tint-alt25: var(--isl-line); --surface-tint-alt26: var(--isl-line); --surface-tint-alt27: var(--isl-line); --surface-tint-alt28: var(--isl-line); --surface-tint-alt29: var(--isl-wash); --surface-tint-alt30: var(--isl-line); --surface-tint-alt31: var(--isl-wash); --surface-tint-alt32: var(--isl-wash); --surface-tint-alt33: var(--isl-dim); --surface-tint-alt34: var(--isl-line); --surface-tint-alt35: var(--isl-line); --surface-tint-alt36: var(--isl-wash); --surface-tint-alt37: var(--isl-wash); --surface-tint-alt38: var(--isl-wash); --surface-tint-alt39: var(--isl-dim); --surface-tint-alt40: var(--isl-wash); --surface-tint-alt41: var(--isl-wash); --surface-tint-alt5: var(--isl-line); --surface-tint-alt6: var(--isl-line); --surface-tint-alt7: var(--isl-line); --surface-tint-alt8: var(--isl-line); --surface-tint-alt9: var(--isl-line); --text-on-accent-alt4: var(--isl-accent-ink); --warning: var(--isl-warn); --warning-alt2: var(--isl-warn); --warning-alt3: var(--isl-warn-bg); --warning-alt4: var(--isl-warn); --warning-bg: var(--isl-warn-bg); --ink-alt2-rgb: 0, 0, 0; --ink-alt3-rgb: 0, 0, 0; --ink-alt4-rgb: 0, 0, 0; --ink-alt5-rgb: 0, 0, 0; --ink-alt6-rgb: 0, 0, 0; --ink-rgb: 0, 0, 0; --primary-deep-alt3-rgb: 0, 0, 0; --sky-tint-alt-rgb: 0, 0, 0; --sky-tint-alt2-rgb: 0, 0, 0; --sky-tint-rgb: 0, 0, 0; } /* base.css sets Fraunces on h1-h3 by element, which inheritance cannot reach. The display face is the loudest half of this design — see the file header on why the weight is 200 — so it is stated here for the pages that did not get their headings from `.isl-*` rules. Since 2026-10-06 (owner 10:34) that face is Inter, and only h4-h6 and car names keep it; h1-h3 are Fraunces by the rule below. */ .layout-island h1, .layout-island h2, .layout-island h3, .layout-island h4, .layout-island h5, .layout-island h6, .layout-island .model-name { /* !important because inner-pages.css states Fraunces fifteen times and five of those carry it -- a specificity race this rule would otherwise lose on exactly the pages it exists for. The `.isl-*` rules that want the mono face put it on spans and small caption classes, never on a heading, so nothing on the front page is caught by this. */ font-family: var(--isl-sans) !important; font-weight: 300; letter-spacing: -0.02em; } /* Theme A (2026-10-06): the three heading levels a reader scans by are set in Fraunces, the warm serif of the chosen direction; h4-h6 and car names stay in Outfit. !important for the same race as above -- the `.isl-*` heading rules state Outfit at weight 200-300. */ .layout-island h1, .layout-island h2, .layout-island h3 { font-family: var(--isl-serif) !important; font-weight: 500 !important; letter-spacing: -0.01em; } /* ── The two dual-role tokens, repaired by hand ─────────────────────────── `--surface` is a card's background AND the white text on a dark band; `--primary-deep`/`--primary-alt` are that band. Light-on-dark inverts to dark-on-light, and the pair cannot both be right from one value -- which is the trap that sank the Night Drive theme. The token keeps the card meaning, the three places that used it the other way say so here. The bands become a lift off the ground rather than a colour against it: on a near-black site a header band that is a different hue reads as a leftover from another design, and there is only one hue in this one. */ .layout-island .page-hero-inner, .layout-island .content-hero, .layout-island .inner-cta-row { background: var(--isl-wash) !important; } .layout-island .page-hero-inner h1, .layout-island .content-hero h1, .layout-island .inner-cta-row h2 { color: var(--isl-ink); } .layout-island .page-hero-inner p.hero-intro, .layout-island .content-hero p { color: var(--isl-dim); } /* The icon tile: a dark square on a dark card, holding a dark glyph. */ .layout-island .icon-card-icon, .layout-island .contact-icon { background: var(--isl-wash) !important; } .layout-island .icon-card-icon svg, .layout-island .contact-icon svg { color: var(--isl-ink); } /* The rest of `color: var(--surface)`, which is the same white-on-dark role in every one of them. Grouped rather than chased one page at a time so a page built later inherits the repair instead of repeating the bug. */ .layout-island .inner-cta-row .btn-outline, .layout-island .msg-icon-link, .layout-island .guide-feature, .layout-island .guide-feature h2, .layout-island .guide-feature-cta { color: var(--isl-ink); } /* ── Shared nav and footer, restyled rather than replaced ───────────────── The nav markup is `website/nav.html` and the footer `website/_footer.html`, both included by index.html outside the section loop. A bespoke layout cannot swap them without editing a template every tenant renders, so it dresses them instead. */ .layout-island .site-header { background: var(--isl-bg); border-bottom: 0; box-shadow: none; backdrop-filter: none; } .layout-island .site-header.scrolled { background: color-mix(in srgb, var(--isl-bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--isl-line); } /* The shared header centres its contents in a 1180px column. This page is full-bleed and rules its own left edge off `--isl-gutter`, so the centred column put the logo 394px from the viewport edge while the hero started at 24px -- two different left edges in the first 100px of the page, which is the exact failure `--isl-gutter` exists to prevent. */ .layout-island .nav-shell { max-width: none; width: 100%; margin: 0; padding: 18px var(--isl-gutter); } /* The brand mark, and the one thing the repalette missed on the first pass. `base.css` paints `.brand-mark` with `linear-gradient(145deg, var(--accent), var(--accent-warm-alt2))` at `font-weight: 800` — the TENANT palette's accent, which is gold on the shipped default. On this ground that rendered as a gold tile in the top-left corner of a near-black page, belonging to no part of this design, and at a weight §26 exists to forbid. It is only visible when no logo has been uploaded (`_brand_mark.html` falls back to the company's initials), which is exactly the state a fresh install and the demo are permanently in — so it is the state worth drawing, not the one worth ignoring. Drawn as a small echo of the plate: a hairline box, a light weight, letterspaced. */ .layout-island .brand-mark, .layout-island .footer-brand-mark { background: none; border: 1px solid var(--isl-line-2); border-radius: var(--isl-r-sm); color: var(--isl-ink); font-weight: 300; font-size: .72rem; letter-spacing: .12em; text-indent: .12em; } /* With a real logo there is no tile to draw — a translucent surface tint behind a transparent PNG is a box around someone's mark. */ .layout-island .brand-mark.has-logo, .layout-island .footer-brand-mark.has-logo { border: 0; background: none; } /* ── The mark, drawn rather than uploaded ───────────────────────────────── The header logo is CSS, not an image file, and that is the better artefact here rather than a shortcut: the nav already prints the company's own name (`cs.name`) as real text in Outfit, which this page has already loaded. Drawn in CSS it is crisp at every density, it recolours with the palette, it costs no request, and it cannot go stale against the design the way an exported PNG does. Two tricks carry it, and both are load-bearing: · `width: min-content` makes the box as narrow as its longest word, which forces the wrap at the space without the template splitting the string or the CSS guessing a width in ch. Works for any two-word name. (`word-spacing: 9999px` was tried first and is a trap: it breaks the line correctly but the space still contributes its 9999px to the element's intrinsic width, so the box measured 10143px and both words sat on one line inside a plate stretched across the viewport.) · `::first-line` sets the size of the FIRST line only, which is the one thing that makes the settled 86% second line possible from a single text node. 12.8px over 11px is the 86% ratio chosen on 24 Aug. The initials tile is hidden while it is a placeholder — the plate IS the mark now, and "PR" beside it would be the logo twice. If a real logo is ever uploaded, `.has-logo` survives and the tile comes back. NOTE: this covers the website only. The invoice and voucher PDFs and the customer emails render `company_logo` from the database, so they still need an uploaded file — see the logo-variants idea on the backlog. */ /* Both marks, header and footer. The footer macro is called with a different class (`footer-brand-mark`), which is why naming only `.brand-mark` left a round PR tile at the bottom of the page after the header one was gone. Unconditional, and it used to be `:not(.has-logo)`. This layout was built and reviewed on a deployment with no logo uploaded, so the one case nobody saw was the one that shipped: with a logo present the mark reappeared, and `company_logo` is a WIDE WORDMARK — 600x260 — crushed into a 40x40 square, sitting beside the brand text that already reads the same words. An illegible smudge next to a legible wordmark. Hiding it rather than swapping the file, because `company_logo` is also what prints on the voucher PDFs and the customer emails, where the full wordmark is correct. The header's identity here IS the wordmark. */ .layout-island .brand-mark, .layout-island .footer-brand-mark { display: none; } .layout-island .brand-tag { display: none; } /* The wordmark (owner 2026-10-06, after Economy Car Rentals' own): the name on one line in heavy capitals, the first word in the accent. It replaced the boxed two-line plate with the name Primus. `wordmark()` in _brand_mark.html wraps the first word, so a rename is still only the company_name setting. The accent here is his choice: LOCAL is the word that sets the company apart from the big brokers ("we stick for now with the local highlighted"). */ .layout-island .brand-text { display: inline-block; flex: 0 0 auto; line-height: 1; } .layout-island .brand-name, .layout-island #footerBrand { display: inline-block; font-family: "Outfit", "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; color: var(--isl-ink); } .layout-island .brand-first { color: var(--isl-accent); } @media (max-width: 767px) { .layout-island .brand-name, .layout-island #footerBrand { font-size: 18px; } } .layout-island .footer-tagline { display: none; } .layout-island .brand-tag { color: var(--isl-dim); } .layout-island .top-nav a { color: var(--isl-ink); font-weight: 400; } .layout-island .top-nav a:hover { color: var(--isl-accent); } /* The phone menu is the header's own ground, solid. base.css draws it 98% black, so the page heading showed through it and it read as a different, blacker panel under the header (2026-09-18). Wide enough to cover el/de, which fold into the menu below 1080px; on a desktop the bar is the same colour, so nothing shows. */ @media (max-width: 1080px) { .layout-island .top-nav { background: var(--isl-bg); } } /* Outlined, not filled — and this file's own rule is why. The accent belongs to ONE element, the thing you are meant to press (top of this file, and again above), and the same reasoning already greyed the language flag and left the wordmark unpainted. The nav pill was the exception nobody caught: on a phone it sat in the fixed header wearing exactly the same accent as "See cars and prices" 630px below it, so the first screen offered two equally loud buttons and neither said press here. Measured 2026-09-17 on staging at 375x812 — both rgb(143, 182, 206). Demoted rather than removed: it is still the only way into the wizard from a page that has scrolled past its bar. `--isl-dim` and not `--isl-line` for the border: the hairline token is rgb(38, 46, 53) against a near-black header — about 1.5:1, measured — so the pill vanished and what was left read as bare text. Demoted is the intent; invisible is a different bug. */ .layout-island .nav-book-btn { background: transparent; border-color: var(--isl-dim); color: var(--isl-ink); border-radius: 999px; font-weight: 400; } .layout-island .nav-book-btn:hover { border-color: var(--isl-accent); color: var(--isl-accent); } /* The shared header is dark on classic, so its language label and burger bars are white. On this ground they were white-on-white — invisible rather than merely wrong, and the burger is the only way to the menu on a phone. */ /* !important is not laziness here: `lang_switcher()` (app/__init__.py) writes that colour as an inline style, which no selector can outrank. Making the helper read a CSS variable instead would be the root-cause fix, and it is the wrong trade today — it changes a served byte on every page of every deployment to recolour one label on one. */ .layout-island .lang-switcher__label { color: var(--isl-dim) !important; } /* The flag was the second saturated thing on the page, in a FIXED header, so it was on screen for every pixel of a 5,000px scroll. This file's own rule (top of the file) is that the accent is the only saturated element and a second one is a bug -- the flag is one, and it is not even ours. Greyscale rather than removed: it still reads as a flag, and it is still the control a German visitor is looking for. Colour returns on hover, where it confirms the choice. Same treatment the wizard already gives the system emoji. */ .layout-island .lang-switcher img, .layout-island .lang-switcher svg { filter: grayscale(1) opacity(.72); transition: filter .25s; } .layout-island .lang-switcher:hover img, .layout-island .lang-switcher:hover svg { filter: none; } /* ...and the label was the only bold on a page whose hierarchy is carried by weight. `lang_switcher()` writes 600 inline, so this needs the same `!important` the colour line above already justifies. */ .layout-island .lang-switcher__label { font-family: var(--isl-sans); font-weight: 600 !important; font-size: 10px !important; letter-spacing: .08em; } .layout-island .nav-burger span { background: var(--isl-ink); } .layout-island .nav-burger { background: transparent; border-color: var(--isl-line); } .layout-island .site-footer { background: var(--isl-bg); border-top: 1px solid var(--isl-line); color: var(--isl-ink); /* `premium-home.css` gives the classic homepage's footer `box-shadow: 0 -120px 0 0 var(--primary-deep-alt9)` — a 120px solid slab of navy offset upward, so the dark footer reads as flowing out of the dark testimonial section above it. There is nothing dark above it here, so it rendered as a navy bar floating between the closing line and the footer. Worth knowing why it was so hard to find: a box-shadow paints outside the border box and shows in neither `backgroundColor` nor `elementsFromPoint`, so the band was invisible to every DOM probe. */ box-shadow: none; } /* Same centred 1180px column the header had, and the same fix. The footer is the last thing on the page and its left edge is read against every section above it, so an inset that nothing else shares reads as the page giving up at the bottom. Aligned to `--isl-gutter`, which is where the booking bar, every section heading and the nav now sit -- the hero is the single deliberate exception at `--isl-edge`, and it reads as a card sitting proud precisely because nothing else does it. */ .layout-island .site-footer > * { max-width: none; width: 100%; margin: 0; padding-left: var(--isl-gutter); padding-right: var(--isl-gutter); } .layout-island .site-footer a { color: var(--isl-ink); } .layout-island .site-footer a:hover { color: var(--isl-accent); } .layout-island .footer-copy, .layout-island .footer-ai-hint { color: var(--isl-dim); } /* The footer is dark on classic, so its brand name is white and its tagline is white at 40%. On this ground both were white-on-white — the company name was the least readable text on its own homepage. The tagline's colour is an inline style in `_footer.html`, which is why one of these needs the same `!important` the language label does. */ .layout-island #footerBrand, .layout-island .footer-copy-brand { color: var(--isl-ink); } .layout-island .footer-tagline { color: var(--isl-dim) !important; } /* ── Hero ────────────────────────────────────────────────────────────────── */ .isl-hero { position: relative; margin: var(--isl-header) var(--isl-edge) 0; height: 342px; border-radius: var(--isl-r-lg); overflow: hidden; /* A hard horizon, not a smooth blur. A three-stop blur is what a CMS shows while an upload is pending, so it reads as a missing image however well the colours are chosen; one crisp edge reads as an illustration. This is the fallback an install with no photographs sees, which makes it the state worth designing hardest -- and the demo is permanently in it. */ background: linear-gradient(#333C44 0 46%, #262E35 46% 47%, #1A2127 47% 74%, #0B1014 74%) center / cover; } /* The photograph gets a layer of its own rather than riding on the section's own `background-image`, for two reasons. It is the layer that drifts, and scaling the section itself would scale the headline with it. And a photo set inline on the section replaces the fallback gradient wholesale, which meant inheriting a `background-size` list written for the layer beneath it. The URL arrives as a custom property from the template, because a pseudo element cannot be addressed by an inline style. With no photo the property is unset, `background-image` resolves to nothing, and the gradient below shows through untouched. */ .isl-hero::before { content: ""; position: absolute; inset: 0; background-image: var(--isl-hero-photo); background-size: cover; /* NOT `center`. This frame is a fixed 590px tall against a fluid width, so its aspect ratio runs from about 2:1 on a laptop to 3.2:1 at 1920 — and everything `cover` discards it discards from the top and bottom. A landscape photograph keeps its subject above the middle (a horizon, a roofline, a car on a road), so centring the crop throws away the subject first and keeps the foreground. 20% holds the upper third at every width this layout is used at. */ background-position: center 32%; } /* Twenty seconds, six percent, once. Slow enough that it is felt rather than watched -- the moment a viewer can see it move it stops reading as film and starts reading as a slideshow. `both` holds the end state instead of snapping back, and the animation is on a composited layer so it costs no layout. Class-gated: there is nothing to drift when there is no photograph, and drifting the fallback gradient would only advertise that it is one. */ @keyframes isl-drift { from { transform: scale(1); } to { transform: scale(1.06); } } .isl-hero.has-photo::before { animation: isl-drift 20s ease-out both; } /* One scrim, not two. The template used to add its own gradient over the photograph and this one over that, which multiplied to roughly 85% black at the foot -- invisible today with no photographs, and the day real ones land it would look like darkened stock and the photographer would get the blame. */ .isl-hero::after { content: ""; position: absolute; inset: 0; background: var(--isl-grain), linear-gradient(180deg, color-mix(in oklab, var(--isl-scrim) 58%, transparent) 0%, color-mix(in oklab, var(--isl-scrim) 16%, transparent) 30%, color-mix(in oklab, var(--isl-scrim) 10%, transparent) 52%, color-mix(in oklab, var(--isl-scrim) 70%, transparent) 100%); background-size: 140px 140px, cover; } /* Title at the top of the frame, the line under it at the foot (owner 2026-09-20). White type in the MIDDLE of a bright photograph — sky, sand, sea — has nothing to sit on; the two ends are where the scrim is, and the photograph keeps its middle to itself. `pointer-events` because the block now covers the whole frame: invisible, and it would swallow a click on anything laid over the hero later. */ .isl-hero-txt { position: absolute; left: 24px; right: 24px; top: 20px; bottom: 24px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; z-index: 1; pointer-events: none; } .isl-hero-txt > * { pointer-events: auto; } .isl-hero-txt .isl-promise { margin-bottom: 0; } /* Eyebrow: Inter 600 caps at .08em (owner 2026-10-06 10:34). */ .isl-kicker { font-family: var(--isl-sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin: 0 0 8px; } .layout-island h1.isl-h1 { font-family: inherit; font-size: 30px; font-weight: 200; letter-spacing: -.035em; line-height: 1; margin: 0 0 11px; color: #fff; text-wrap: balance; /* Faint, not a drop shadow: enough to hold an edge where a cloud runs white behind a letter, invisible everywhere else. */ text-shadow: 0 2px 18px rgba(0, 0, 0, .35); } /* The hook, inside the LCP element's own block. Positioning decided that friction removal belongs in the headline (spec 01 section 3); the headline itself is derived from the destination list and stays that way (section 26.5), so the promise sits directly beneath it in the same lockup. Hard-stopped fragments, not bullets or commas: a fragment ending in a full stop reads as a term of business, the same words with dots between them read as a banner. */ .isl-promise { text-shadow: 0 1px 14px rgba(0, 0, 0, .55); font-size: 15px; font-weight: 300; line-height: 1.3; letter-spacing: -.015em; max-width: 30ch; margin: 0 0 10px; text-wrap: balance; } /* ── Booking bar ────────────────────────────────────────────────────────── No negative pull on the phone: the hero's own text sits at its bottom edge, so an overlapping bar would cover the sub-line. Desktop has the room. */ .isl-book { position: relative; z-index: 2; margin: 16px var(--isl-gutter) 0; background: var(--isl-card); border: 1px solid var(--isl-line); border-radius: var(--isl-r-md); padding: 6px; box-shadow: 0 14px 30px -18px rgba(60, 40, 25, .2); } .isl-fld { display: block; padding: 11px 13px; border-bottom: 1px solid var(--isl-line); } .isl-fld:last-of-type { border-bottom: 0; } /* The destination list is shown only while two or more are live (spec 2026-10-04 §7); `display: block` above would otherwise outrank [hidden]. */ .isl-fld[hidden] { display: none; } /* 8.5px was a decorative size on a functional label. These name the fields of the one control the page exists for, they are read outdoors, on a phone, by a customer who is frequently over 40. 10px with the tracking eased from .13em to .11em is very close to the same rendered width -- so the field rows do not reflow and the longest label, PICK-UP DATE - RETURN DATE, still sits on one line -- while being a size a person can actually read. Raised again to 12px (design review 2026-09-10: 10px still read as small print). Tracking eased to .07em for the same reason as before: the longest label has to hold one line in the phone's 297px field, measured. */ /* Inter 600 at 13px in sentence case, no tracking (owner 2026-10-06 10:34: the capitals in the mono were what made these fields look bad). `:first-child` because site-loader.js wraps each time rather than placing a caret in the page, so it is not clear it zooms for one at all. Nobody here owns an iPhone to settle that; when a real one is at hand, check the dropdowns and raise them too (shortening that one location name in the console is the other way). */ .isl-fld input { font-size: 16px; } /* The two dropdowns are 16px too since Inter (owner 2026-10-06 10:34): the bar's list now names a kind of place (spec 2026-10-04 §7), not the long desk name the note above was measured on. */ .isl-fld input::placeholder { color: var(--isl-ink-3); } /* `appearance: none` above strips the native arrow, and a select with no affordance that it opens is the whole booking bar on a phone. Inline SVG rather than a pseudo-element: a on this layout computed `option { background: rgba(0,0,0,0) }` with `color: #E8EDF1` and a root `color-scheme: normal`. The CLOSED control is fine -- it sits on our own card. The OPEN list is painted by the browser, and with no background given and no scheme declared Chrome paints it on the system default, which on Windows is white. Near-white text on white: the station and time lists were invisible. Firefox and Safari each guess differently, which is why it read as a browser bug and is not one -- the stylesheet genuinely never said. `color-scheme: dark` is the root-cause fix: it tells the browser this whole layout is dark, so every native control it paints for us -- popups, scrollbars, date fields -- follows. The explicit option colours stay beside it because `color-scheme` alone leaves the popup at the UA's dark grey rather than this page's card, and the two lists then disagree. Declared on `.layout-island` and not on `:root`: `:root` in this codebase is the tenant palette, and this must not reach a deployment that renders the light classic homepage. Precedent for the option rule is `.flatpickr-monthDropdown-months option` further down this file -- the same bug, found and fixed for the calendar's month list alone, which is why that one dropdown was the only readable one on the page. */ /* Light since theme A (2026-10-06): the same rule, the other way round. */ .layout-island { color-scheme: light; } .layout-island .isl-fld select option, .layout-island.page-booking .wizard-panel-body select option, .layout-island.page-booking #preferredModel option { background: var(--isl-card); color: var(--isl-ink); } .isl-times, .isl-locs { display: grid; grid-template-columns: 1fr 1fr; } .isl-times .isl-fld:first-child, .isl-locs .isl-fld:first-child { border-right: 1px solid var(--isl-line); } .isl-locs { border-bottom: 1px solid var(--isl-line); } .isl-locs .isl-fld { border-bottom: 0; } .isl-go { display: block; width: 100%; background: var(--isl-accent); color: var(--isl-accent-ink); text-align: center; border: 0; border-radius: var(--isl-r-sm); padding: 14px; margin-top: 6px; font-family: inherit; font-size: 15.5px; font-weight: 400; cursor: pointer; } .isl-go:hover { background: var(--isl-accent-deep); } /* ── The terms of the booking, inside the booking ───────────────────────── This replaces a three-column row of display numerals below the card. Two things were wrong with that and only one of them was the height. A numeral at 46px is a QUANTITY form -- the reader's eye is trained that a big figure is an impressive fact -- so it landed on "0" three times and got a null. Grand form, empty payload. The same three facts read as confident when they are sentences and as cheap when they are figures, which is the whole of it. And three fixed columns is precisely where German and Greek break: at 375px each column was 101px holding a phrase that measures 108px. Putting them inside the card is not just tidier. Stated anywhere else these are marketing; stated here they are the specification of this form, and the booking bar stops being a widget and becomes an object with weight. The negative margins pull the hairline out to the card's inner edge so it divides the card rather than sitting inside it. Two rules that outlive this layout: - "No credit card required" is a KEYWORD, not a claim to be improved. It is the literal string a German or Italian types when they mean the guarantee deposit (spec 01 section 4). It ships verbatim, contiguous, as crawlable text, in its own span. Not "no card hold", not "deposit-free". - A booking fee, if one ever exists, must never share this eyeline. It is a payment; these are about the deposit, and the two in one glance read as a contradiction. */ .isl-terms { border-top: 1px solid var(--isl-line); margin: 6px -6px -6px; padding: 12px 14px 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; line-height: 1.35; color: var(--isl-dim); } .isl-terms b { font-weight: 500; color: var(--isl-ink); } /* ── Section furniture ───────────────────────────────────────────────────── The rule above each heading is the cheapest structural move on the page: it converts a stack of floating blocks into a document. It is full-bleed for free -- the padding is inside the border box, so the line runs edge to edge while the heading sits at the gutter. There was exactly one hairline in this file before, a `border-bottom` under the figures with no `border-top` anywhere to answer it, which is why it read as a leftover rather than a system. */ .isl-sect { padding: 24px var(--isl-gutter) 0; margin-top: 24px; border-top: 1px solid var(--isl-line); } .isl-sect + .isl-reel, .isl-sect + .isl-tiles, .isl-sect + .isl-feature { margin-top: 0; } .isl-sect-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .layout-island .isl-sect-h h2 { font-family: inherit; font-size: 21px; font-weight: 300; letter-spacing: -.025em; margin: 0; color: var(--isl-ink); } .isl-sect-h a { font-size: 12.5px; color: var(--isl-accent); font-weight: 400; text-decoration: none; } .isl-sect-sub { margin: -6px 0 0; max-width: 46ch; font-size: 13.5px; font-weight: 300; line-height: 1.45; color: var(--isl-dim); } /* ── Cars. Real models, and no price until dates make one true (§26.3) ───── */ .isl-reel { display: flex; gap: 12px; overflow-x: auto; padding: 0 var(--isl-gutter) 6px; scroll-snap-type: x mandatory; } .isl-reel::-webkit-scrollbar { height: 0; } .isl-car { flex: 0 0 176px; scroll-snap-align: start; background: var(--isl-card); border: 1px solid var(--isl-line); border-radius: var(--isl-r-md); overflow: hidden; transition: border-color .3s, transform .5s cubic-bezier(.2, .7, .2, 1); } .isl-car .im { height: 96px; background: var(--isl-grain), linear-gradient(160deg, var(--isl-wash), var(--isl-wash-2)); background-size: 140px 140px, cover; display: flex; align-items: center; justify-content: center; } .isl-car .im img { width: 100%; height: 100%; object-fit: cover; } .isl-car .im svg { stroke: var(--isl-ink-2); } .isl-car .bd { padding: 11px 13px 14px; } .isl-car .nm { font-size: 14px; font-weight: 500; letter-spacing: -.01em; } .isl-car .mt { font-size: 11px; color: var(--isl-dim); margin-top: 1px; } .isl-car .nopr { font-size: 12.5px; color: var(--isl-dim); margin-top: 8px; } /* The whole card is an anchor now, so it has to be told to stop looking like one -- and to be a block, because an inline ignores the flex basis and the grid track the reel gives it. */ .isl-car { display: block; color: inherit; text-decoration: none; } /* The price. `strong` is the figure and only one month's is ever visible; the suffix is a separate span so it does not inherit the weight. `hidden` on the other twelve is the browser's own, which is why nothing here may give .fleet-month-rate a display. */ .isl-car .pr { display: flex; align-items: baseline; gap: 4px; margin-top: 9px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; } .isl-car .pr .pd { font-size: 11.5px; font-weight: 300; color: var(--isl-dim); } /* The duration discount. A hairline rule above it rather than a coloured pill: a badge is what a discount site puts here, and the whole argument of this page is that it is not one. The rule reads as a term, the figure beside it as the consequence. */ .isl-car .dsc { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--isl-line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; } .isl-car .dsc .rule { font-family: var(--isl-sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--isl-accent); } .isl-car .dsc .then { font-size: 12px; font-weight: 500; } .isl-car .dsc .then .pd { font-size: 10.5px; font-weight: 300; color: var(--isl-dim); } /* "On Request". Its own class rather than the discount's, because both can sit on one card: the discount is a price term, this is how the car is got. Set in the same mono face as the discount rule so the two read as one column of terms, but in --isl-dim rather than --isl-accent -- the accent is reserved for what improves the offer. */ .isl-car .onreq { margin-top: 8px; font-family: var(--isl-sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--isl-dim); } /* The one explanation for the whole reel, under it rather than inside a card: every card is an anchor and this carries a link of its own. */ .isl-onreq-note { margin: 0 var(--isl-gutter) 4px; font-size: 12px; font-weight: 300; color: var(--isl-dim); } .isl-onreq-note a { color: var(--isl-accent); } /* The month stepper. premium-home.css styles the shared classes against --surface / --text, which are the classic palette's tokens and not this layout's, so every rule that decides a colour is restated here. Layout is inherited from that file on purpose: it is the same control. */ .layout-island .fleet-months { justify-content: flex-start; gap: 10px; margin: 0 var(--isl-gutter) 14px; font-family: var(--isl-sans); font-variant-numeric: tabular-nums; } .layout-island .fleet-month-step { width: 26px; height: 26px; background: transparent; border-color: var(--isl-line); color: var(--isl-ink); transition: border-color .3s, color .3s; } .layout-island .fleet-month-step:hover:not(:disabled) { border-color: var(--isl-line-2); } /* 26px is under half the 44px minimum tap target, on a control a thumb is meant to step through thirteen months with. The button STAYS 26px -- at this size it is right beside a 9px mono label and a bigger circle would become the loudest thing in the section. The hit area grows instead, invisibly. */ .layout-island .fleet-month-step { position: relative; } .layout-island .fleet-month-step::before { content: ""; position: absolute; inset: -9px; } .layout-island .fleet-month-labels { min-width: 15ch; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--isl-dim); } /* island.js writes this element on an empty fleet and the stylesheet had no rule for it, so the one state a fresh install always hits rendered as a default-margin

inside a flex row. */ .isl-car-empty { margin: 0; padding: 8px 0 16px; font-size: 14px; font-weight: 300; color: var(--isl-dim); } /* ── What the price includes ────────────────────────────────────────────── A rate card, so it is set as one: hairline rules, the tier on the left and the two figures ranged right, nothing boxed. The same spec-sheet register the About page's fact cards use -- money read as a table is read as fact, money read in a card with a border is read as an offer. */ .isl-cover { padding: 16px var(--isl-gutter) 0; } .isl-cover .row { display: grid; grid-template-columns: 1fr auto; /* Named, not implicit. The row gained a third cell (what the level does) and auto-placement put the excess line in the second column's track, floating it into the middle of the row with nothing under the name. Areas say where each cell goes and cannot drift when a fourth is added. */ grid-template-areas: "nm pd" "ds ds" "ex ex"; gap: 2px 16px; padding: 13px 0; border-top: 1px solid var(--isl-line); } .isl-cover .nm { grid-area: nm; } .isl-cover .pd { grid-area: pd; } .isl-cover .ds { grid-area: ds; } .isl-cover .ex { grid-area: ex; } .isl-cover .row:first-child { border-top: 0; } .isl-cover .nm { font-size: 15px; font-weight: 400; letter-spacing: -.01em; } .isl-cover .pd { font-size: 15px; font-weight: 500; text-align: right; white-space: nowrap; } .isl-cover .ex { margin-top: 4px; font-family: var(--isl-sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--isl-dim); } /* What the level DOES. The row used to be a name and two figures, so the largest sum a visitor might owe was the first hard number on the page with nothing beside it saying what the cover was for. This sentence sits under the name, in the flow, and is the only cell that wraps. */ .isl-cover .ds { max-width: 58ch; font-size: 13.5px; font-weight: 300; line-height: 1.5; color: var(--isl-dim); } .isl-cover .ds:empty { display: none; } .isl-cover .note { margin: 16px 0 0; max-width: 62ch; font-size: 13.5px; font-weight: 300; line-height: 1.5; color: var(--isl-dim); } /* The exclusions. Same size AND same colour as its siblings on purpose: a warning styled as a warning reads as the small print a reader has learned to skip, and the whole argument of this page is that it says the awkward part in the same voice as the rest. It used to be the one white paragraph in the block, which made the loudest sentence in the insurance section the one about what is not covered -- the opposite of what the block is for. Only the rule above it separates them now. */ .isl-cover .note.warn { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--isl-line); } /* ── Destinations. Real anchors, never JS handlers — they are the crawlable link block the whole SEO argument rests on (§13.2). ─────────────────── */ .isl-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px var(--isl-gutter) 0; } .isl-tiles.is-two { grid-template-columns: 1fr; gap: 12px; } .isl-tiles.is-two .isl-tile { height: 168px; } .isl-tiles.is-two .isl-tile .n { font-size: 26px; } .isl-tile { position: relative; display: block; height: 112px; border-radius: var(--isl-r-md); overflow: hidden; text-decoration: none; background: var(--isl-grain), linear-gradient(#343D45 0 52%, #252D34 52% 53%, #161C21 53%); background-size: 140px 140px, cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); } .isl-tile.g2 { background: var(--isl-grain), linear-gradient(#333E42 0 52%, #242E32 52% 53%, #151E22 53%); background-size: 140px 140px, cover; } .isl-tile.g3 { background: var(--isl-grain), linear-gradient(#3A3D4A 0 52%, #2A2C38 52% 53%, #191B25 53%); background-size: 140px 140px, cover; } /* The destination's own photograph, under the scrim and over the fallback gradient. A layer of its own rather than the tile's `background`, because the gradient below it is what a destination with no photo keeps -- and because the three `g1/g2/g3` variants each set `background` wholesale, so a photo put there would be overwritten by the variant on two tiles in every three. */ .isl-tile.has-photo::before { content: ""; position: absolute; inset: 0; background-image: var(--isl-tile-photo); background-size: cover; background-position: center 42%; } .isl-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, color-mix(in oklab, var(--isl-scrim) 74%, transparent) 100%); transition: background .3s; } .isl-tile .tx { position: absolute; left: 13px; right: 13px; bottom: 11px; color: #fff; z-index: 1; } .isl-tile .n { font-size: 18px; font-weight: 300; letter-spacing: -.025em; line-height: 1.1; } .isl-tile .c { font-family: var(--isl-sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .88; margin-top: 5px; } /* One destination is a strip, not a grid of one (owner 2026-09-19: "it should be a strip"): a small photo, the name and its pick-up sentence, and the link, one row under the booking bar. */ .isl-feature { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 14px; margin: 16px var(--isl-gutter) 0; padding: 10px; border: 1px solid var(--isl-line); border-radius: var(--isl-r-lg); transition: border-color .3s; background: var(--isl-card); text-decoration: none; color: inherit; } .isl-feature .ph { height: 64px; border-radius: calc(var(--isl-r-lg) - 6px); background: var(--isl-grain), linear-gradient(#343D45 0 54%, #252D34 54% 55%, #161C21 55%); background-size: 140px 140px, cover; background-position: center; } .isl-feature.has-photo .ph { background-size: cover; background-position: center 38%; background-repeat: no-repeat; } .isl-feature .bd { min-width: 0; } .isl-feature .bd h3 { font-family: inherit; font-size: 20px; font-weight: 300; letter-spacing: -.02em; margin: 0 0 2px; } .isl-feature .bd p { font-size: 14px; color: var(--isl-dim); margin: 0 0 2px; line-height: 1.4; } .isl-feature .bd .go { font-size: 14px; color: var(--isl-accent); } /* ── How it works ───────────────────────────────────────────────────────── The only numbered block on the page. Numerals are used here because the order carries real information -- you cannot collect before you book -- and nowhere else, so they never become decoration. Mono and small: a large numeral is a QUANTITY form, which is the mistake the €0 row made. */ .isl-steps { list-style: none; margin: 16px 0 0; padding: 0 var(--isl-gutter); display: grid; gap: 26px; } .isl-steps li { display: block; } .isl-steps .n { display: block; font-family: var(--isl-sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--isl-accent); margin-bottom: 9px; } .isl-steps h3 { font-family: inherit; font-size: 19px; font-weight: 400; letter-spacing: -.02em; margin: 0 0 7px; color: var(--isl-ink); } .isl-steps p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--isl-dim); text-wrap: pretty; } /* ── About ──────────────────────────────────────────────────────────────── Three beats, stacked on a phone and side by side on desktop (below). Each column keeps a reading measure of its own; the row fills the gutters. */ .isl-about { padding: 16px var(--isl-gutter) 0; display: grid; gap: 34px; } .isl-about .col { max-width: 60ch; } .isl-about p { margin: 0 0 15px; font-size: 15.5px; font-weight: 300; line-height: 1.62; color: var(--isl-dim); text-wrap: pretty; } .isl-about p:last-child { margin-bottom: 0; } .isl-about .lead { font-size: 18px; line-height: 1.5; color: var(--isl-ink); letter-spacing: -.01em; } /* The title over each column. Was the 9px mono label (`.isl-desk .k`), in the placeholder grey: the owner could not see them (2026-09-10 12:56). Now a small sentence-case heading in a light orange he chose (12:59, option D) -- the only orange on the site, used nowhere else on purpose. */ .isl-about .k { font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--isl-accent); margin-bottom: 12px; } /* ── No deposit ─────────────────────────────────────────────────────────── One line and a comparison (owner 2026-09-23). A phone stacks each row with its two small column labels (the s); from 900px the labels move up into one header row and each row is three columns. The orange is the About heading colour he chose on 2026-09-10. */ .isl-nodep { padding: 0 var(--isl-gutter); } .isl-nodep__intro { margin: 10px 0 20px; max-width: 62ch; font-size: 16.5px; font-weight: 300; line-height: 1.55; color: var(--isl-dim); text-wrap: pretty; } .isl-nodep__row { display: block; padding: 14px 0; border-top: 1px solid var(--isl-line); } .isl-nodep__row > span { display: block; font-size: 15px; line-height: 1.5; } .isl-nodep__row .h { color: var(--isl-ink); font-size: 15.5px; margin-bottom: 8px; } .isl-nodep__row .desk { color: var(--isl-dim); font-weight: 300; margin-bottom: 8px; } .isl-nodep__row .here { color: var(--isl-ink); } /* The way to the full explanation (owner 2026-10-07). */ .isl-nodep__more { margin: 18px 0 0; font-size: 15px; } .isl-nodep__more a { color: var(--isl-accent); text-underline-offset: 3px; } .isl-nodep__row em { display: block; font-style: normal; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--isl-dim); } .isl-nodep__row .here em, .isl-nodep__head .here { color: var(--isl-accent); } .isl-nodep__head { display: none; } @media (min-width: 900px) { .isl-nodep__row { display: grid; grid-template-columns: minmax(140px, .8fr) 1.3fr 1.3fr; column-gap: 28px; padding: 16px 0; } .isl-nodep__row .h, .isl-nodep__row .desk { margin-bottom: 0; } .isl-nodep__row em { display: none; } .isl-nodep__head { display: grid; border-top: 0; padding: 0 0 10px; } .isl-nodep__head > span { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--isl-dim); } } /* ── The desk ─────────────────────────────────────────────────────────── */ .isl-desk { padding: 16px var(--isl-gutter) 0; display: grid; gap: 22px; } /* Eyebrow: Inter 600 caps at .08em (owner 2026-10-06 10:34). */ .isl-desk .k { font-family: var(--isl-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--isl-ink-3); margin-bottom: 7px; } .isl-desk p { margin: 0; font-size: 16px; font-weight: 300; color: var(--isl-ink); line-height: 1.45; } .isl-desk a { color: var(--isl-ink); text-decoration: none; border-bottom: 1px solid var(--isl-line-2); } .isl-desk a:hover { color: var(--isl-accent); border-bottom-color: var(--isl-accent); } .isl-desk .sub { display: block; margin-top: 6px; font-size: 13px; font-weight: 300; color: var(--isl-dim); } /* ── Three questions ────────────────────────────────────────────────────── No JavaScript. `

` is keyboard-operable and screen-reader-correct for free, and the answers stay in the DOM for a crawler whether or not anyone opens them -- which matters on a page whose whole demand strategy is organic search. The default triangle is replaced because it is the one part of the element that looks like a browser rather than like this site. */ .isl-q { padding: 8px var(--isl-gutter) 0; } .isl-q details { border-top: 1px solid var(--isl-line); } .isl-q details:last-child { border-bottom: 1px solid var(--isl-line); } .isl-q summary { list-style: none; cursor: pointer; padding: 17px 30px 17px 0; position: relative; font-size: 16px; font-weight: 400; letter-spacing: -.01em; color: var(--isl-ink); } .isl-q summary::-webkit-details-marker { display: none; } .isl-q summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 1.5px solid var(--isl-dim); border-bottom: 1.5px solid var(--isl-dim); transform: rotate(45deg); transition: transform .25s, border-color .25s; } .isl-q details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; border-color: var(--isl-accent); } .isl-q summary:hover::after { border-color: var(--isl-accent); } .isl-q details p { margin: 0 0 18px; max-width: 58ch; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--isl-dim); text-wrap: pretty; } /* ── The guarantee ──────────────────────────────────────────────────────── Terms, set as terms. An
    because they are numbered clauses a reader can point at, but the markers are deliberately NOT the display numerals the steps use: those are accent-coloured and stacked above their heading because order carries meaning there. Here the order is arbitrary, so the numbers run inline in the placeholder grey and stay quiet. Reusing the loud form would have cost the steps their uniqueness for no gain. Hairline per row, the page's own device for "this is a schedule, not a pitch". No icons, no ticks -- a row of green checkmarks is the visual grammar of a pricing table and would undo the whole point. */ /* Good to know: four cards, icon + headline + one line. One column on a phone, two on a tablet, four across from desktop. */ .isl-know { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 4px var(--isl-gutter) 0; } .isl-know .card { padding: 20px; border: 1px solid var(--isl-line); border-radius: var(--isl-r-lg); background: var(--isl-card); } .isl-know svg { width: 26px; height: 26px; fill: none; stroke: var(--isl-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px; } .isl-know h3 { font-family: inherit; font-size: 18px; font-weight: 400; letter-spacing: -.01em; margin: 0 0 6px; color: var(--isl-ink); } .isl-know p { font-size: 14.5px; font-weight: 300; line-height: 1.5; margin: 0; color: var(--isl-dim); text-wrap: pretty; } @media (min-width: 600px) { .isl-know { grid-template-columns: repeat(2, 1fr); } } /* ── One review ─────────────────────────────────────────────────────────── One, not a carousel. A row of five is a volume claim this company cannot make yet; a single quotation is a quotation. No stars, no rating number, no "trusted by N" -- all three were rejected in the design review as the things a reader has learned to discount. */ .isl-close { display: block; } .isl-review { margin: 24px 0 0; padding: 26px var(--isl-gutter) 0; border-top: 1px solid var(--isl-line); } .isl-review blockquote { margin: 0; font-size: 21px; font-weight: 200; letter-spacing: -.02em; line-height: 1.4; color: var(--isl-ink); max-width: 30ch; text-wrap: pretty; } .isl-review figcaption { margin-top: 14px; font-size: 14px; font-weight: 400; color: var(--isl-ink); } .isl-review figcaption span { display: block; margin-top: 2px; font-family: var(--isl-sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--isl-ink-3); } /* ── The cookie banner ─────────────────────────────────────────────────── A shared component (components.css), and on classic it is the shipped navy with white text — correct there, a slab of another company's brand colour here. It is `position: fixed`, so it is not part of the page and no layout change can stop it covering the bottom of the viewport until it is dismissed; what a layout CAN do is make it look like it belongs to this site. Restyled only under `.layout-island`, so every other deployment's banner is untouched. */ .layout-island .cookie-banner { background: var(--isl-card); border-top: 1px solid var(--isl-line); box-shadow: 0 -14px 34px -20px rgba(60, 40, 25, .2); } .layout-island .cookie-text { color: var(--isl-dim); } .layout-island .cookie-text a { color: var(--isl-accent); } .layout-island .cookie-btn { border-radius: 999px; font-weight: 400; } /* Both answers look the same (owner 2026-09-18): "Book now" is the only filled accent on the first screen, and refusing is as easy as accepting. */ .layout-island .cookie-btn-gold, .layout-island .cookie-btn-outline { background: transparent; color: var(--isl-dim); border: 1px solid var(--isl-line); } .layout-island .cookie-btn-gold:hover, .layout-island .cookie-btn-outline:hover { background: transparent; color: var(--isl-accent); border-color: var(--isl-accent); } /* Measured at 375x812 on 2026-09-04: the banner covered 656-812 and the one button this page exists to get a thumb onto sat at 692-740 -- underneath it. On a 667px phone the button was off-screen entirely and the banner reached the date field. The banner is `position: fixed` and shared, so no layout change can move it; what this layout can do is make it shorter. Type and padding only -- nothing here changes what the banner says or does, and it is scoped so no other deployment's banner shrinks. */ /* ── CAR GROUPS YOU CAN BOOK ─────────────────────────────────────────────── The section a destination page carries instead of the deleted /groups fleet page (owner 2026-09-17). Its markup is `_island_cars.html`; these rules are here rather than in the template because the page that used to own them was a one-off with a