/* Palette switcher — client presentation tool, not part of the public site. * * Offers five directions the client can compare live: * * ink the default — near-black ground, Port Louis footage, desaturated * earthy #502223 ground, red sandstone still, left in colour * navy Ink, but the charcoal panels recoloured to the footer's own navy * paper Ink everywhere except the homepage hero, which turns light * emerald Ink, but the dark panels recoloured to a deep bottle green * * Also offers, on the homepage only, a hero video picker and a colour/ * black-and-white toggle for that video. * * Every choice is stored per browser and applied as data-palette (or * data-hero-tone) on , so it holds while clicking through the site. * * Deleting this file, js/palette-switch.js, and the two tags that load them * removes every trace — the site falls back to the ink palette, which is the * committed design. */ /* --------------------------------------------------------------------------- Palette B — earthy Only tokens are redefined. Every component reads through them, so nothing component-level needs to know a second palette exists. ------------------------------------------------------------------------ */ :root[data-palette="earthy"] { --ink: #502223; --ground: #502223; --ink-soft: #5c2a2b; --ink-muted: #7d6462; --rule: rgba(80, 34, 35, 0.16); --rule-soft: rgba(80, 34, 35, 0.09); --rule-strong: rgba(80, 34, 35, 0.32); /* --red and --red-ink are deliberately not overridden: the accent stays the Celerity red in every palette. */ /* --steel is the muted label/eyebrow colour on dark panels site-wide. The default is a cool blue-grey, tuned for the ink/navy grounds — it reads as a clash against oxblood, so earthy gets a warm, sandy equivalent instead (same hue family as the glow-light accent above). */ --steel: #a8836c; --steel-deep: #7a5d49; /* A warmer, terracotta glow instead of the default's navy — echoes the sandstone hero still and keeps the hero/footer accent on the same warm side of the palette as the oxblood ground. Kept much softer than the default's corner accents: at full strength the deep one sat right where the base radial's own fade lands, and the two edges together read as a hard dark line across the footer rather than one glow. */ --footer-glow-light: rgba(168, 126, 94, 0.12); --footer-glow-deep: rgba(20, 8, 6, 0.25); --glow: #ac4528; } /* --------------------------------------------------------------------------- Palette C — navy Ink in every respect except the dark panels, which take #14263a. That is not an arbitrary blue: it is the first stop of the footer's existing gradient, so the page ground and the footer now begin on the same colour and the seam between them disappears entirely. Only --ground moves. Body copy keeps reading from --ink, so text stays near-black on the ivory pages rather than turning with the panels. Contrast is the practical argument for it over a red ground: ivory on this navy measures about 13.9:1 against roughly 3.9:1 on #ed1c24, so body copy on the dark panels is comfortably legible rather than borderline. The Celerity red also reads as a true accent against it — complementary rather than competing, which it cannot do on a red panel. ------------------------------------------------------------------------ */ :root[data-palette="navy"] { --ground: #14263a; /* Keeps the original blue descent: the ground already is that navy, so the footer continues out of it rather than changing direction. --glow is left at its default navy, which already suits this ground. */ --footer-glow-light: rgba(125, 166, 196, 0.38); --footer-glow-deep: rgba(8, 87, 144, 0.9); } /* --------------------------------------------------------------------------- Palette D — paper Identical to ink everywhere else. The homepage hero changes: the navy-to-ground gradient is replaced with a flat, light ground, so the opening moment reads calm and paper-like instead of dark and dramatic. The footer drops its radial glow too, for the same flat, quiet read. Every other section — proof strip, all other pages — stays ink. ------------------------------------------------------------------------ */ :root[data-palette="paper"] .s-hero { background: #f5f2ec; color: #171c22; } :root[data-palette="paper"] .s-hero__title { color: #171c22; } :root[data-palette="paper"] .s-hero__standfirst { color: rgba(23, 28, 34, 0.72); } :root[data-palette="paper"] .c-eyebrow--hero { color: var(--ink-muted); } /* The plate's hairline seam and the hero buttons are tuned for a dark ground by default; both need to flip for legibility on the light one. */ :root[data-palette="paper"] .s-hero__plate::after { background: var(--rule-strong); } :root[data-palette="paper"] .s-hero .c-button--primary { background: var(--ink); color: var(--ivory); } :root[data-palette="paper"] .s-hero .c-button--primary:hover { background: var(--red); color: var(--white); } :root[data-palette="paper"] .s-hero .c-button--ghost { border-color: var(--rule-strong); color: var(--ink); } :root[data-palette="paper"] .s-hero .c-button--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--ivory); } :root[data-palette="paper"] .c-footer { background: var(--ground); } /* --------------------------------------------------------------------------- Palette E — emerald Ink in every respect except the dark panels, which take a deep bottle green instead of navy — a warmer, more luxurious pairing with the Celerity red than the cooler blue does. Only --ground moves, plus the glow accents: body copy keeps reading from --ink, so text stays near-black on the ivory pages rather than turning with the panels. Ivory on this green measures well above AA (dark, low-saturation grounds hold contrast regardless of hue), and the red accent reads as a true complement against green rather than competing the way it would on a red or orange ground. ------------------------------------------------------------------------ */ :root[data-palette="emerald"] { --ground: #042317; /* A brighter, more saturated green for the glow itself — tonal with the ground rather than a second colour, the same relationship navy's glow has to its own ground. */ --glow: #0f4a33; --footer-glow-light: rgba(110, 186, 144, 0.3); --footer-glow-deep: rgba(2, 17, 11, 0.85); } /* --------------------------------------------------------------------------- Hero imagery per palette Both the footage and the still ship in the markup; the palette decides which is shown, so switching needs no DOM surgery and nothing reloads. ------------------------------------------------------------------------ */ .s-hero__plate [data-palette-media="earthy"] { display: none; } :root[data-palette="earthy"] .s-hero__plate [data-palette-media="ink"] { display: none; } :root[data-palette="earthy"] .s-hero__plate [data-palette-media="earthy"] { display: block; } :root[data-palette="earthy"] .s-hero__plate-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .s-band--under-hero [data-palette-media="earthy"], #band-firm [data-palette-media="earthy"] { display: none; } :root[data-palette="earthy"] .s-band--under-hero [data-palette-media="ink"], :root[data-palette="earthy"] #band-firm [data-palette-media="ink"] { display: none; } :root[data-palette="earthy"] .s-band--under-hero [data-palette-media="earthy"], :root[data-palette="earthy"] #band-firm [data-palette-media="earthy"] { display: block; } /* Earthy pulls most of the colour back out of the sandstone still and lifts contrast, so it reads closer to the desaturated city footage the other palettes use. Every other banner — the expertise/experience/firm bands and the ones site-wide, still grayscale(1) by default — gets the same treatment, so the hero image and the rest of the page's photography match. */ :root[data-palette="earthy"] .s-hero__plate-img, :root[data-palette="earthy"] .s-band--under-hero .c-editorial__img, :root[data-palette="earthy"] #band-firm .c-editorial__img { filter: grayscale(0.9) contrast(1.48); } /* --------------------------------------------------------------------------- Hero video picker The cargo footage is flatter straight out of the camera than the aerials are, so it alone gets a saturation lift — applying it to every clip over-saturated the aerials' already-vivid water and mountains. Placed before the tone toggle below so B&W still wins over it regardless of which video is selected. ------------------------------------------------------------------------ */ :root[data-hero-video="cargo"] .s-hero__video { filter: grayscale(0.01) contrast(1.08) saturate(1.2); } /* --------------------------------------------------------------------------- Hero tone toggle Independent of the palette — the switcher's colour/B&W buttons flip the hero video (and its reduced-motion poster) between the committed grade and a flat grayscale, on top of whichever palette is active. ------------------------------------------------------------------------ */ :root[data-hero-tone="bw"] .s-hero__video { filter: grayscale(1) contrast(1.08); } /* The building facade's reflections wash out at the standard B&W contrast, so it alone gets a stronger grade when the tone toggle is on. */ :root[data-hero-tone="bw"][data-hero-video="building"] .s-hero__video { filter: grayscale(1) contrast(1.6); } @media (prefers-reduced-motion: reduce) { :root[data-hero-tone="bw"] .s-hero__plate { filter: grayscale(1) contrast(1.08); } } /* --------------------------------------------------------------------------- The switcher itself ------------------------------------------------------------------------ */ /* Anchored above the copy-review bar (0 when that tool isn't on the page) and growing upward — column-reverse so the toggle, last in this flow, stays the one pinned to the bottom-most position regardless of whether the body above it is open. Centering vertically looked better in isolation, but on a short viewport with the full-width review bar also present the two would overlap; anchoring guarantees they never do. */ .p-switch { position: fixed; right: 0; bottom: calc(1rem + var(--review-bar-h, 0px)); z-index: 9000; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 0.4rem; } /* The always-visible collapsed state — a small dot, not the full panel, so it never has enough footprint to reach the copy-review toggle in the opposite corner. */ .p-switch__toggle { width: 2.25rem; height: 2.25rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50% 0 0 50%; background: rgba(18, 20, 24, 0.92); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24); cursor: pointer; display: flex; align-items: center; justify-content: center; } .p-switch__toggle-dot { width: 0.85rem; height: 0.85rem; border-radius: 50%; background: conic-gradient(from 135deg, #ed1c24 0 33%, #171c22 33% 66%, #7798a4 66%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); } .p-switch__toggle:hover { background: rgba(30, 33, 38, 0.94); } .p-switch__toggle:focus-visible { outline: 2px solid #f4f2ed; outline-offset: 2px; } .p-switch__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.7rem; border-radius: 0.75rem 0 0 0.75rem; background: rgba(18, 20, 24, 0.92); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); font: 500 0.7rem/1.2 ui-sans-serif, -apple-system, "Segoe UI", sans-serif; color: #f4f2ed; max-height: calc(100vh - 4rem - var(--review-bar-h, 0px)); overflow-y: auto; } .p-switch__body[hidden] { display: none; } .p-switch__label { font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; text-align: center; margin-bottom: 0.1rem; } /* Each group after the first (Direction) gets a hairline + extra clearance so the panel reads as sections, not one long undifferentiated list. */ .p-switch__label:not(:first-child) { margin-top: 0.35rem; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); } .p-switch__btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border: 1px solid transparent; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; cursor: pointer; text-align: left; transition: background 160ms ease, border-color 160ms ease; } .p-switch__btn:hover { background: rgba(255, 255, 255, 0.12); } .p-switch__btn:active { background: rgba(255, 255, 255, 0.18); } .p-switch__btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.35); } .p-switch__chip { width: 1.1rem; height: 1.1rem; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); } .p-switch__chip--ink { background: #171c22; } .p-switch__chip--earthy { background: #502223; } .p-switch__chip--navy { background: #14263a; } .p-switch__chip--paper { background: #f5f2ec; } .p-switch__chip--emerald { background: #042317; } .p-switch__btn:focus-visible { outline: 2px solid #f4f2ed; outline-offset: 2px; } /* Collapse to just the direction chips on narrow screens so it never covers content on a phone. The hero video/tone buttons carry no chip, so once their name text is hidden they would be empty tap targets — hide those buttons outright instead of shrinking them. */ @media (max-width: 40rem) { .p-switch { padding: 0.5rem 0.45rem; gap: 0.35rem; } .p-switch__label, .p-switch__name { display: none; } .p-switch__btn { padding: 0.4rem; } .p-switch__btn:not(:has(.p-switch__chip)) { display: none; } } @media (prefers-reduced-motion: reduce) { .p-switch__btn { transition: none; } }