/* =========================================================
MONTERA EXPEDITIONS — design system & stylesheet
"Basalt & Marigold": a warm-black canvas, bone type, one
marigold accent, sharp plate corners, Archivo set wide for
headings and IBM Plex Mono for the small print.
=========================================================
THIS FILE CONTROLS HOW THE SITE LOOKS (colours, spacing,
fonts, animations). It contains NO words or prices.
---------------------------------------------------------
HOW TO MAKE A SITE-WIDE LOOK CHANGE
---------------------------------------------------------
Almost every colour, font and size is defined ONCE as a
"token" (a --name: value; line) inside :root{ } in
section 1 below. Change a token there and it updates
everywhere that uses var(--name) .
Handy ones:
--paper / --paper-2 / --surface .. background shades
--ink / --ink-soft / --ink-faint . text shades
--rust / --rust-soft ............. the marigold accent
--r-sm / --r-lg ................ corner roundness
--font-display / --font-body / --font-mono ... the fonts
The web fonts (Archivo, IBM Plex Mono) are ed in the
of every page, NOT imported here. To change fonts, edit
those tags AND the --font-* tokens below.
---------------------------------------------------------
SECTION INDEX (search for "N." e.g. "17h.")
---------------------------------------------------------
1. Tokens (colours, fonts, sizes — start here)
2. Reset (browser default clean-up)
3. Layout helpers (.im-shell, .im-cols, .eyebrow, headings)
4. Buttons & links
5. Header / nav (full-width bar + currency switch)
6. Hero (+ .page-hero for inner pages)
7. Stats bar
8. Expedition cards
9. Editorial split (two-column story layout)
10. Testimonials
11. Gallery + lightbox
12. About page (credential strip, story, manifesto,
principles, timeline rail, crew cards)
13. — (folded into 12)
14. Expedition list rows (Expeditions page)
14b. Elevation-profile chart
14c. Day-by-day itinerary
15. CTA band
16. Forms (Contact page)
17. Footer
17b. Story media (About) 17c. Marquee ticker
17d. Draw-in SVG lines 17e. Floating "Book a Raid" button
17f. Booking calculator 17g. Hero departure card
17h. Upcoming departures 17i. Fleet cards
17j. Numbered value cards 17k. Review cards
17l. FAQ accordion 17m. Premium card surface
17n. Featured expeditions 17o. "Currently running" pill
17p. Next Departure page (raid.html)
18. Scroll-reveal animation
19. Responsive rules (phones / tablets — at the bottom)
Note: a few brand colours are also written as raw hex or
rgba() values in gradients and inline SVG (they can't read
tokens). If a token change doesn't recolour something,
search this file for the old colour value.
========================================================= */
/* The web fonts are NOT imported here. An @import inside a
stylesheet can only start downloading once this file has itself been
downloaded and parsed, which pushed the webfonts a whole round-trip
late — long enough that the page laid out in the fallback font first
and anything measured in JS (the sliding nav capsule) measured the
wrong widths. They are now ed with a preconnect in the of
every page, which starts them with the rest of the CSS.
If you add a new page, copy those three tags from index.html. */
/* ---------- 1. Tokens ----------
The whole colour scheme and type scale live here. Each --name: value;
is reused as var(--name) throughout the file, so editing a value here
changes it everywhere. Try changing --rust to a different hex colour to
re-accent the whole site, or --r-lg to change every card corner.
MONTERA EXPEDITIONS — "Basalt & Marigold"
A night-ride palette: warm black basalt for the ground, bone for the
type, and one loud marigold accent (the flower strung on every Indian
dashboard and temple gate). Nothing else competes with the marigold, so
wherever it appears — a price, a button, a status — the eye goes there.
Some names are older than the palette (--rust is marigold now, --night
is a card surface, --paper is the dark page). They are kept because
hundreds of rules across main.css / home.css / mobile.css / app.css
already use them; the comment beside each says what it is TODAY. */
:root{
/* ---- the same colours as bare R G B channels ----
So a see-through version can be written anywhere as
rgb(var(--ink-rgb) / .12)
instead of a hard-coded rgba() that would miss the next re-colour. */
--ink-rgb: 240 233 222; /* bone — text, hairlines */
--on-dark-rgb: 240 233 222; /* text laid over photographs */
--dark-rgb: 10 9 8; /* scrims, glass, deep panels */
--shadow-rgb: 0 0 0;
--accent-rgb: 244 169 30; /* marigold */
--accent-soft-rgb: 255 200 102;
--surface-rgb: 27 25 21;
--pine-rgb: 143 203 134;
--pine-soft-rgb: 168 220 156;
--danger-rgb: 255 107 87;
/* ---- ground + type ---- */
--paper: #0E0D0B; /* page background (basalt) */
--paper-2: #15130F; /* alternating section background */
--surface: #1B1915; /* cards / panels */
--surface-2: #26231E; /* insets, image placeholders */
--ink: #F0E9DE; /* primary text (bone) */
--ink-soft: #C9C0B2;
--ink-faint: #9A9184; /* 5.6:1 on --paper-2 — AA for small text */
--line: rgb(var(--ink-rgb) / .12);
--line-strong:rgb(var(--ink-rgb) / .26);
--white: #FFFFFF;
/* "night" = the card family (expedition, fleet, review cards) */
--night: var(--surface);
--night-card: var(--surface);
--night-line: rgb(var(--ink-rgb) / .10);
--night-ink: var(--ink);
--night-muted:rgb(var(--ink-rgb) / .64);
/* "dark" = the deepest panels: hero, stats ribbon, the floating
departure card, the photo scrims. One step below the page. */
--dark: #0A0908;
--dark-card: #1A1814;
--dark-line: rgb(var(--on-dark-rgb) / .13);
--dark-ink: #F0E9DE;
--dark-muted: rgb(var(--on-dark-rgb) / .64);
/* ---- marigold ----
Text ON a marigold fill is always --on-accent (near-black, 10:1).
Marigold text on the dark page uses --rust-text (9.8:1). */
--rust: #F4A91E; /* fills, borders, buttons */
--rust-text: #F6B540; /* small accent text on dark */
--rust-soft: #FFC866; /* highlights over photographs */
--rust-tint: rgb(var(--accent-rgb) / .12);
--gold-line: rgb(var(--accent-rgb) / .40);
--accent-mid: #F8BA45;
--accent-deep:#D98C05;
--accent-pale:#FFDFA3;
--on-accent: #0A0908;
--badge: #2A1D08;
--badge-ink: #FFC866;
/* ---- signals ---- */
--pine: #8FCB86; /* "seats open" / confirmed */
--pine-soft: #A8DC9C;
--pine-tint: rgb(var(--pine-soft-rgb) / .13);
--pine-line: rgb(var(--pine-soft-rgb) / .42);
--danger: #FF6B57;
/* ---- type ----
Archivo is one variable family with a WIDTH axis: headings are set
expanded (--wide), body copy at normal width. IBM Plex Mono carries
the small print — dates, altitudes, eyebrows, prices in lists — the
way a route card or a rally road-book would. */
--font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-serif: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
--wide: 125%; /* font-stretch for display headings */
--semi: 112%; /* font-stretch for card titles */
--container: 1320px;
--gutter: clamp(1.25rem, 4vw, 3.5rem);
--section-pad: clamp(4.5rem, 9vw, 8.5rem);
/* Corners are sharp on purpose — riveted plate, not soft plastic. */
--radius: 2px;
--r-sm: 2px;
--r-lg: 4px;
--ease: cubic-bezier(.2,.7,.2,1);
/* Card surface: flat, with a hairline instead of a floating shadow */
--card: var(--surface);
--card-line: rgb(var(--ink-rgb) / .10);
--card-hi: inset 0 1px 0 rgb(255 255 255 / .03);
--shadow-card:
0 1px 0 rgb(var(--shadow-rgb) / .5),
0 24px 48px -28px rgb(var(--shadow-rgb) / .9);
--shadow-lift:
0 2px 0 rgb(var(--shadow-rgb) / .5),
0 36px 70px -30px rgb(var(--shadow-rgb) / 1);
}
/* ---------- 2. Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; color-scheme: dark; }
body{
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font: inherit; cursor:pointer; background:none; border:none; color:inherit; }
input, select, textarea{ font: inherit; color: inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }
::selection{ background: var(--rust); color: var(--on-accent); }
::placeholder{ color: var(--ink-faint); }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}
/* ---------- 3. Layout helpers ---------- */
.im-shell{
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
position: relative;
}
.section{ padding-block: var(--section-pad); position: relative; }
.section-tight{ padding-block: calc(var(--section-pad) * 0.55); }
.hr{ border:none; border-top:1px solid var(--line); margin:0; }
.im-cols{ display:grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.im-cols-3{ grid-template-columns: repeat(3, 1fr); }
.im-cols-4{ grid-template-columns: repeat(4, 1fr); }
/* The eyebrow is a road-book label: monospaced, spaced out, with a small
marigold plate in front of it. */
.eyebrow{
display:flex; align-items:center; gap:.65rem;
font-family: var(--font-mono);
font-size: .72rem;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color: var(--rust-text);
}
.eyebrow::before{
content:""; flex:none;
width:.55rem; height:.55rem;
background: currentColor;
clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
}
.kicker{ color: var(--ink-soft); font-size:.95rem; line-height:1.6; }
h1, h2, h3{
font-family: var(--font-display);
font-stretch: var(--semi);
font-weight:700;
letter-spacing:-.01em;
line-height:1.08;
text-transform:none;
color: var(--ink);
}
h4{ font-stretch: var(--semi); }
/* Section headlines run WIDE and in capitals — the loudest thing on any
page, and the one move that makes the site recognisably Montera Expeditions. */
.display-1,
.display-2{
font-stretch: var(--wide);
font-weight: 800;
text-transform: uppercase;
text-wrap: balance;
}
.display-1{
font-size: clamp(2.5rem, 6.2vw, 5.4rem);
line-height:.94; letter-spacing:-.02em;
}
.display-2{ font-size: clamp(1.8rem, 3.9vw, 3.3rem); line-height:.98; letter-spacing:-.015em; }
.display-3{
font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height:1.25;
font-weight:700; letter-spacing:-.01em;
}
.lede{
font-family: var(--font-body);
font-size: clamp(1.02rem, 1.4vw, 1.2rem);
color: var(--ink-soft); line-height:1.6;
}
/* The marigold half of a headline ("Where the Road Ends, the RAID BEGINS").
Same face and width as the words around it — only the colour changes. */
.ital{
font-family: inherit;
font-style: normal;
font-weight: inherit;
font-stretch: inherit;
text-transform: uppercase;
color: var(--rust);
letter-spacing: inherit;
}
.italic{ font-style: italic; }
.serif{
font-family: var(--font-body); font-style: normal; font-weight:400;
color: var(--ink); line-height:1.4; letter-spacing:0;
}
/* ---------- 4. Buttons & links ---------- */
/* Rectangular plates with square corners, set wide in capitals. Every
button on the site is one of two:
.im-btn-primary solid marigold, near-black label. Hover floods it bone
from the left, so the colour appears to be wiped off.
.im-btn-outline a bone hairline on whatever is behind it. Hover lights
the hairline and the label marigold.
Both carry a trailing arrow that slides on hover (added in the ::after),
except where a rule below switches it off for a button that answers a
question in place rather than going somewhere. */
.im-btn{
position: relative; overflow:hidden; isolation:isolate;
display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
padding: 1.05rem 1.7rem;
font-family: var(--font-display);
font-stretch: var(--wide);
font-size:.74rem; font-weight:700;
letter-spacing:.08em; text-transform:uppercase;
line-height: 1;
border:1px solid transparent;
border-radius: 0;
transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
white-space:nowrap;
}
.im-btn::after{
content: "→";
font-stretch: 100%;
display:inline-block;
transition: transform .3s var(--ease);
}
.im-btn:hover::after{ transform: translateX(4px); }
.im-btn.is-disabled::after{ content: none; }
.im-btn:focus-visible{ outline: 2px solid var(--rust); outline-offset: 3px; }
.im-btn-primary{
background: var(--rust);
color: var(--on-accent);
border-color: var(--rust);
}
/* the bone wipe — a layer behind the label that slides in from the left */
.im-btn-primary::before{
content:""; position:absolute; inset:0; z-index:-1;
background: var(--ink);
transform: scaleX(0); transform-origin: left center;
transition: transform .45s cubic-bezier(.22,.8,.32,1);
}
.im-btn-primary:hover::before{ transform: scaleX(1); }
.im-btn-primary:hover{ border-color: var(--ink); color: var(--on-accent); }
.im-btn-primary:active{ transform: translateY(1px); }
.im-btn-outline{
background: transparent;
color: var(--ink);
border-color: var(--line-strong);
}
.im-btn-outline:hover{
color: var(--rust);
border-color: var(--rust);
background: rgb(var(--accent-rgb) / .06);
}
/* The glyph that sits before a button's label -- the calendar tick on
"Request This Raid", and anything else that wants an icon in a plate. */
.im-btn .wa,
.im-btn .bk{ width:17px; height:17px; flex:none; }
.im-btn .wa{ fill: currentColor; }
.im-btn .bk{ fill:none; stroke: currentColor; }
.im-btn:has(.bk)::after{ content: none; }
.im-btn-small{ padding:.78rem 1.15rem; font-size:.66rem; }
@media (prefers-reduced-motion: reduce){
.im-btn-primary::before{ transition: none; }
}
.text-link{
position:relative;
display:inline-flex; align-items:center; gap:.5rem;
font-family: var(--font-display); font-stretch: var(--semi);
font-weight:700; font-size:.74rem;
letter-spacing:.1em; text-transform:uppercase;
color: var(--ink);
}
.text-link::after{
content:""; position:absolute; left:0; bottom:-3px;
width:100%; height:1.5px; background: currentColor;
transform: scaleX(0); transform-origin:left;
transition: transform .35s var(--ease);
}
.text-link:hover::after{ transform: scaleX(1); }
.text-link .arrow{ transition: transform .35s var(--ease); }
.text-link:hover .arrow{ transform: translateX(4px); }
.text-link.rust{ color: var(--rust); }
/* ---------- 4b. Interaction polish ----------
One focus ring for everything a keyboard can reach. Before this only
buttons, gallery tiles and filter chips had a visible focus state — nav
links, text links, footer links and the newsletter field fell back to
the browser default or (in the newsletter's case) to nothing at all. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
outline: 2px solid var(--rust-soft);
outline-offset: 3px;
border-radius: var(--r-sm);
}
/* Square controls keep a square ring. */
.im-btn:focus-visible,
.logo:focus-visible,
.site-nav a:focus-visible{ border-radius: 0; }
.mosaic-arrow:focus-visible{ border-radius: 0; }
/* Bone ring on the header and the hero photograph */
.site-nav a:focus-visible,
.logo:focus-visible,
.hero a:focus-visible,
.dep-card a:focus-visible{ outline-color: var(--dark-ink); }
/* The newsletter input hid its focus entirely; move the ring to the pill
that wraps the field + button so the whole control lights up instead. */
.newsletter-form:focus-within{
outline: 2px solid var(--rust-soft);
outline-offset: 2px;
}
/* Anchor targets (e.g. #fleet) would otherwise land under the fixed
header when opened straight from a URL. */
:target,
[id]{ scroll-margin-top: 6.5rem; }
/* ---------- 5. Header / Nav — full-width bar ---------- */
/* One bar across the top of every page: the ram emblem and wordmark on the
left, five text links in the middle with a marigold underline that
glides between them, and on the right the currency switch, "Book a
Raid" and the account square.
It starts transparent, sitting on a soft dark fade so it reads over any
photograph, and turns into a solid basalt strip with a hairline once
the page scrolls (main.js adds .is-scrolled). On phones css/mobile.css
swaps the links for the bottom tab bar. */
.site-header{
position: fixed; inset-inline:0; top:0; z-index:100;
padding: 1.1rem var(--gutter);
background: linear-gradient(180deg, rgb(var(--dark-rgb) / .78) 0%, rgb(var(--dark-rgb) / 0) 100%);
border-bottom: 1px solid transparent;
transition: transform .35s var(--ease), padding .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
}
.site-header::before{
content:""; position:absolute; inset:0; z-index:-1;
background: rgb(var(--dark-rgb) / .9);
-webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
opacity:0; transition: opacity .35s var(--ease);
}
.site-header.is-scrolled{ padding-block: .6rem; border-bottom-color: var(--dark-line); }
.site-header.is-scrolled::before{ opacity:1; }
.site-header.nav-hidden{ transform: translateY(-100%); }
.header-inner{
max-width: var(--container); margin-inline:auto;
display:grid; grid-template-columns: auto minmax(0, 1fr) auto;
align-items:center; gap: clamp(1rem, 2.4vw, 2.2rem);
min-width:0;
}
/* The emblem + wordmark. No capsule behind it: the wordmark is set wide
enough to hold its own on a photograph. */
.logo{
flex:none;
display:flex; align-items:center; gap:.7rem;
color: var(--dark-ink);
}
/* The emblem is a detailed engraving, so it gets more room than a flat
icon would need to stay legible. */
.logo-mark{
width:50px; height:50px; flex-shrink:0; display:block;
transition: width .35s var(--ease), height .35s var(--ease), transform .5s var(--ease);
}
.logo:hover .logo-mark{ transform: rotate(-8deg); }
.logo-word{
display:block;
font-family: var(--font-display); font-stretch: var(--wide); font-weight:800;
font-size:1.02rem; letter-spacing:.01em; text-transform:uppercase;
line-height:1;
color: var(--dark-ink);
white-space:nowrap;
}
.site-header.is-scrolled .logo-mark{ width:42px; height:42px; }
.site-nav{ min-width:0; justify-self:center; }
.site-nav ul{
position:relative;
display:flex; align-items:center; gap:.15rem;
min-width:0;
overflow-x:auto; scrollbar-width:none;
}
.site-nav ul::-webkit-scrollbar{ display:none; }
.site-nav a{
flex:none; position:relative; z-index:1; display:block;
font-family: var(--font-display); font-stretch: var(--semi);
font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
padding:.8rem .95rem;
white-space:nowrap; color: var(--dark-muted);
transition: color .25s var(--ease);
}
.site-nav a::after{ display:none; }
.site-nav a:hover,
.site-nav a.is-active{ color: var(--dark-ink); }
/* The marigold underline. main.js still slides this element to whichever
link is active or hovered (it sets transform + width to that link's
box); the bar itself is painted narrower than the box, centred, so it
sits under the WORD rather than under the padding around it. */
.nav-indicator{
position:absolute; left:0; bottom:.3rem; height:2px;
width:0;
background: linear-gradient(var(--rust), var(--rust)) center / calc(100% - 1.9rem) 100% no-repeat;
z-index:0; pointer-events:none; opacity:0;
transform: translateX(0);
transition: transform .22s var(--ease), width .22s var(--ease), opacity .2s var(--ease);
}
.nav-indicator.ready{ opacity:1; }
.header-actions{ flex:none; display:flex; align-items:center; gap:.55rem; }
/* ---- the currency switch ----
India (₹) / Global ($). js/currency.js wires it: the choice is kept in
the browser, every price on the page is rewritten at once, and the
"Where are you riding in from?" panel sets the same switch. */
.cur-switch{
display:inline-flex; align-items:stretch;
height:42px; padding:3px;
border:1px solid var(--dark-line);
background: rgb(var(--dark-rgb) / .45);
}
.cur-switch button{
display:inline-flex; align-items:center; gap:.4rem;
padding: 0 .75rem;
font-family: var(--font-mono); font-size:.68rem; font-weight:500;
letter-spacing:.08em; text-transform:uppercase;
color: var(--dark-muted);
transition: color .2s var(--ease), background-color .2s var(--ease);
}
.cur-switch button:hover{ color: var(--dark-ink); }
.cur-switch .cur-sym{ font-family: var(--font-body); font-size:.95rem; font-weight:700; letter-spacing:0; line-height:1; }
.cur-switch button[aria-pressed="true"]{
color: var(--on-accent);
background: var(--rust);
}
.cur-switch button:focus-visible{ outline-offset: 2px; }
/* "Book a Raid" — the site's one standing call to action, on every page. */
.topbar-book{
flex:none; display:inline-flex; align-items:center;
height:42px; padding:0 1.15rem;
background: var(--rust); color: var(--on-accent);
font-family: var(--font-display); font-stretch: var(--wide); font-weight:700;
font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
white-space:nowrap;
transition: background-color .25s var(--ease), color .25s var(--ease);
}
.topbar-book:hover{ background: var(--ink); color: var(--on-accent); }
.topbar-book:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }
/* The account square beside it. Quiet on purpose — it is for the small
number of people who already have a booking, not the main path. */
.topbar-account{
flex:none; display:flex; align-items:center; justify-content:center;
width:42px; height:42px;
color: var(--dark-ink);
border:1px solid var(--dark-line);
transition: border-color .25s var(--ease), color .25s var(--ease);
}
.topbar-account:hover{ border-color: var(--rust); color: var(--rust); }
.topbar-account svg{
width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round;
}
/* Laptops narrower than the full bar: the links tighten, then the
currency labels drop to their symbols, then the wordmark goes. */
@media (max-width: 1240px){
.site-nav a{ padding-inline:.7rem; font-size:.7rem; letter-spacing:.07em; }
.nav-indicator{ background-size: calc(100% - 1.4rem) 100%; }
}
@media (max-width: 1080px){
.cur-switch .cur-label{ display:none; }
.cur-switch button{ padding: 0 .6rem; }
}
@media (max-width: 920px){
.logo-word{ display:none; }
.site-nav a{ padding-inline:.55rem; font-size:.66rem; letter-spacing:.05em; }
.nav-indicator{ background-size: calc(100% - 1.1rem) 100%; }
}
/* Scroll-progress bar */
.scroll-progress{
position: fixed; inset-inline:0; top:0; z-index:200;
height: 3px; transform-origin: left center; transform: scaleX(0);
background: var(--rust);
will-change: transform;
}
@media (prefers-reduced-motion: reduce){ .scroll-progress{ display:none; } }
/* ---------- 6. Hero ---------- */
.hero{
position:relative;
min-height: 100svh;
display:flex; flex-direction:column; justify-content:flex-end;
padding-top: 7rem;
overflow:hidden;
background: var(--dark);
color: var(--dark-ink);
}
.hero-media{
position:absolute; inset:0; z-index:0; overflow:hidden;
/* Always-present fallback: shows before the image loads or if it fails. */
background: var(--dark) url('../assets/photos/ladakh-hero-rider.jpg') center 48% / cover no-repeat;
}
.hero-media img,
.hero-media video{
width:100%; height:100%; object-fit:cover; object-position:center 48%;
display:block;
}
.hero-media img{
transform: scale(1.05);
animation: heroKenBurns 28s ease-in-out infinite alternate;
will-change: transform;
}
/* Video needs a touch of overscan so the parallax translate never bares an edge */
.hero-media video{ transform: scale(1.04); }
@keyframes heroKenBurns{
from{ transform: scale(1.02) translate3d(0,0,0); }
to{ transform: scale(1.12) translate3d(-1.2%,-1.4%,0); }
}
/* Scrim — anchors the text over the still. Solid at the base for the stats
band + headline, then clears through the middle so the ride reads, with
only a light wash over the peaks. Left edge stays weighted for the H1. */
.hero-scrim{
position:absolute; inset:0; z-index:1;
background:
linear-gradient(0deg, var(--dark) 0%, rgb(var(--dark-rgb) / .64) 28%, rgb(var(--dark-rgb) / .2) 56%, rgb(var(--dark-rgb) / .18) 100%),
linear-gradient(95deg, rgb(var(--dark-rgb) / .74) 0%, rgb(var(--dark-rgb) / .04) 58%),
rgb(var(--dark-rgb) / .05);
pointer-events:none;
}
/* Floating brand ribbon, top-right — sits below the pill nav */
.hero-badge{
position:absolute; z-index:3; top:6.4rem; right: var(--gutter);
padding:.55rem 1.1rem;
background: rgb(var(--dark-rgb) / 0.55);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border:1px solid rgb(var(--on-dark-rgb) / 0.18);
border-radius:999px;
overflow:hidden;
}
.hero-badge-text{
position:relative; z-index:1;
display:flex; align-items:baseline; gap:.4rem; white-space:nowrap;
font-family: var(--font-display);
font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color: var(--rust-soft);
}
.hb-sep{ color: var(--dark-muted); }
.hb-est{ font-family: var(--font-body); font-weight:600; font-size:.85rem; letter-spacing:0; text-transform:none; color: var(--dark-ink); }
.hero-badge::after{
content:""; position:absolute; inset:0;
background: linear-gradient(100deg, transparent 30%, rgb(var(--on-dark-rgb) / .28) 50%, transparent 70%);
transform: translateX(-120%);
animation: heroBadgeShimmer 3.5s ease-in-out infinite;
}
@keyframes heroBadgeShimmer{
0%, 40%{ transform: translateX(-120%); }
60%, 100%{ transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce){ .hero-badge::after{ animation:none; display:none; } }
@media (max-width: 720px){ .hero-badge{ top:5.4rem; padding:.45rem .85rem; } .hero-badge-text{ font-size:.6rem; } .hb-est{ font-size:.76rem; } }
/* width:100% stops the .im-shell's margin-inline:auto from shrink-wrapping
this flex child — keeps the hero text on the same left edge as every section */
.hero-inner{ position:relative; z-index:2; width:100%; padding-bottom: 6rem; }
.hero-eyebrow{ margin-bottom: 1rem; color: var(--rust-soft); }
.hero h1{ color: var(--dark-ink); max-width: 15ch; font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1; text-wrap: balance; }
.hero h1 .ital{ color: var(--rust-soft); }
.hero-sub{ color: rgb(var(--on-dark-rgb) / .82); max-width: 40ch; margin-top: 1rem; font-size: clamp(.98rem,1.15vw,1.08rem); line-height: 1.5; }
.hero .im-btn-outline{ border-color: rgb(var(--on-dark-rgb) / .32); color: var(--dark-ink); background: rgb(var(--on-dark-rgb) / .08); }
.hero .im-btn-outline:hover{ background: var(--white); color: var(--dark); border-color: var(--white); }
/* Hero CTA — the loudest single action on the site, sitting on a dark
photo. It starts as a solid cream pill, which reads instantly against
the photo in a way any coloured fill has to work harder to do, then
wipes to the site's ember gradient on hover: the cream cover layer
slides off to the right while the ember slides warm underneath. Navy
label text throughout, which clears 4.5:1 on both the cream (17:1) and
the ember (5.4:1) — including mid-wipe, when half of each is showing.
Scoped to .hero-actions, not .hero, so the small buttons inside the
floating departure card keep the site-wide ember styling and stay
visually subordinate to this one. */
.hero-actions .im-btn-primary{
padding: 1.15rem 2.45rem;
font-size: .88rem;
/* Cover layer is no longer flat cream — it's ivory warming to champagne
across the button, which on a cold blue-grey mountain photo looks lit
rather than pasted on. Hover wipes it away to the ember beneath. */
background-image:
linear-gradient(100deg, #FDFBF7 0%, #EFE3D2 32%, #E3CFB4 49.9%, transparent 50% 100%),
linear-gradient(115deg, var(--rust) 0%, var(--accent-mid) 52%, var(--rust-soft) 100%);
background-size: 200% 100%, 200% 100%;
background-position: 0% 50%, 0% 50%;
background-repeat: no-repeat;
color: var(--dark);
border-color: rgb(var(--on-dark-rgb) / 0.6);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.95),
inset 0 -2px 5px rgb(var(--accent-rgb) / 0.22),
0 2px 6px rgb(var(--shadow-rgb) / 0.35),
0 16px 36px -12px rgb(var(--shadow-rgb) / 0.6);
}
.hero-actions .im-btn-primary:hover{
background-position: 100% 50%, 100% 50%;
border-color: rgb(var(--accent-rgb) / 0.75);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.55),
inset 0 -2px 5px rgb(var(--accent-rgb) / 0.25),
0 3px 8px rgb(var(--shadow-rgb) / 0.35),
0 18px 44px -12px rgb(var(--accent-rgb) / 0.8);
}
.hero .text-link{ color: var(--dark-ink); }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap: .9rem; margin-top: 1.8rem; }
.hero-scroll{
position:absolute; right: var(--gutter); bottom: 1.8rem; z-index:2;
display:flex; align-items:center; gap:.7rem;
font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color: var(--dark-muted);
}
.hero-scroll .line{ width:1px; height:42px; background: rgb(var(--on-dark-rgb) / .22); position:relative; overflow:hidden; }
.hero-scroll .line::after{
content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background: var(--rust-soft);
animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }
@media (prefers-reduced-motion: reduce){ .hero-media img{ animation:none; transform:scale(1.02); } }
@media (prefers-reduced-motion: reduce){ .hero-media video{ display:none; } } /* JS pauses it; poster shows through */
/* Inner-page masthead (About / Expeditions / Gallery / Contact). Basalt
with the contour texture, a marigold glow off the top-left corner, and
a hairline + marigold tick across the foot that hands over to the page. */
.page-hero{
position:relative; padding-top: clamp(8.5rem, 14vw, 11rem); padding-bottom: clamp(3rem, 6vw, 4.5rem);
overflow:hidden;
border-bottom: 1px solid var(--line);
background:
radial-gradient(50% 80% at 0% 0%, rgb(var(--accent-rgb) / .10), transparent 62%),
var(--paper);
}
.page-hero::before{
content:""; position:absolute; inset:0;
background-image: url('../assets/topo.svg');
background-size: 520px; background-repeat:repeat; opacity:.35; pointer-events:none;
}
.page-hero::after{
content:""; position:absolute; left: max(var(--gutter), calc(50vw - (var(--container) / 2) + var(--gutter))); bottom:-1px;
width: 6rem; height: 3px; background: var(--rust);
}
.page-hero-inner{ position:relative; z-index:2; }
.page-hero .eyebrow{ margin-bottom:1.3rem; }
.page-hero .display-1{ max-width: 18ch; }
.page-hero .display-1 .ital{ color: var(--rust); }
.page-hero .lede{ margin-top:1.3rem; max-width:58ch; }
/* Expeditions and Contact open their first section with an inline
padding-top:0, which used to let the content run straight on from a
borderless masthead. The masthead has a rule along its foot now, so the
content steps back from it. */
.page-hero + .section{ padding-top: clamp(2.5rem, 5vw, 4rem) !important; }
/* ---------- 7. Stats bar (dark band) ---------- */
.stats-bar{
background: var(--dark); color: var(--dark-ink);
border:none;
}
.stats-bar .im-cols-4{ gap:0; }
/* Hero stats — same numbers, fused to the hero's lower edge as a
compact strip instead of a separate section further down the page */
.hero-stats{
position:relative; z-index:2;
border-top:1px solid var(--dark-line);
background: rgb(var(--dark-rgb) / 0.6);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-stats .im-cols-4{ gap:0; }
.hero-stats .stat{ padding-block: .9rem; }
.stat{
padding: clamp(1rem,2.4vw,1.6rem) var(--gutter);
border-left: 1px solid var(--dark-line);
text-align:left;
}
.stat:first-child{ border-left:none; padding-left:0; }
.stat .num{ font-family: var(--font-display); font-weight:700; font-size: clamp(2rem,4vw,3rem); color:var(--rust-soft); letter-spacing:-.02em; }
.stat .label{ margin-top:.5rem; font-size:.8rem; color: var(--dark-muted); max-width: 22ch; }
/* ---------- 8. Expedition cards (dark cards on light) ---------- */
.card-expedition{
background: var(--night-card);
border:1px solid var(--night-line);
border-radius: var(--radius);
padding: clamp(1.4rem,2.4vw,1.9rem);
display:flex; flex-direction:column; gap:1.1rem;
color: var(--night-ink);
box-shadow: var(--shadow-card);
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card-expedition:hover{
transform: translateY(-6px);
box-shadow: var(--shadow-lift);
border-color: var(--gold-line);
}
.card-art{
aspect-ratio: 4/3; width:100%;
display:flex; align-items:center; justify-content:center;
color: var(--ink);
overflow:hidden;
border-radius: var(--r-sm);
background: var(--surface-2);
}
.card-art img{
width:100%; height:100%; object-fit:cover; display:block;
transition: transform 1s var(--ease);
}
.card-expedition:hover .card-art img{ transform: scale(1.06); }
.wash-1{ background: #2B2B2B; }
.wash-2{ background: #2E2820; }
.wash-3{ background: #292929; }
.wash-4{ background: #2C2620; }
.wash-5{ background: #272727; }
.card-tags{ display:flex; flex-wrap:wrap; gap:.45rem; }
.tag{
font-size:.7rem; letter-spacing:.02em; text-transform:none; font-weight:600;
padding:.32rem .7rem; border:1px solid rgba(255,255,255,0.14); color: var(--night-muted);
background: rgba(255,255,255,0.04);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
border-radius: var(--r-sm);
}
.tag.rust{ border-color: var(--gold-line); color: var(--rust-soft); background: var(--rust-tint); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.card-expedition h3{ font-size:1.4rem; color: var(--night-ink); letter-spacing:-.02em; }
.card-meta{ display:flex; flex-wrap:wrap; gap: .3rem .9rem; font-size:.8rem; color: var(--night-muted); }
.card-meta span{ display:flex; align-items:center; gap:.35rem; }
.card-expedition .kicker{ color: var(--night-muted); }
.card-expedition .text-link{ color: var(--rust-soft); }
/* ---------- 9. Editorial split ---------- */
.split{ display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,5vw,4.5rem); align-items:start; }
.split-reverse{ grid-template-columns: 1.2fr .8fr; align-items:center; }
.feature-list{ margin-top:2rem; display:grid; gap:1.4rem; }
.feature-item{ display:flex; gap:1rem; align-items:flex-start; border-top:1px solid var(--line); padding-top:1.2rem; }
.feature-item:first-child{ border-top:none; padding-top:0; }
.feature-icon{ color: var(--rust-text); flex-shrink:0; margin-top:.2rem; }
.feature-item h4{ font-family:var(--font-body); font-weight:600; font-size:1rem; }
.feature-item p{ margin-top:.35rem; color:var(--ink-soft); font-size:.94rem; }
/* ---------- 10. Testimonials (dark band) ---------- */
.testimonial-strip{ background: var(--night); color: var(--night-ink); position:relative; overflow:hidden; }
.testimonial-strip::before{
content:""; position:absolute; left:50%; top:-80px; width:560px; height:280px; transform:translateX(-50%);
background: radial-gradient(ellipse at center top, rgb(var(--accent-rgb) / .16), rgb(var(--accent-rgb) / .05) 34%, transparent 64%);
pointer-events:none;
}
.testimonial-strip .im-shell{ position:relative; z-index:1; }
/* Section header — same eyebrow + display-2 rhythm as the rest of the page,
with the aggregate rating rendered as a premium pill. */
.testi-head{ max-width: 56ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.testi-head .display-2{ margin-top: 1rem; }
.testi-head .display-2 .ital{ color: var(--rust); } /* on white */
.testi-head .review-summary{
display:inline-flex; align-items:center; justify-content:flex-start; gap:.7rem; flex-wrap:wrap;
margin: 1.6rem 0 0; padding:.55rem 1rem;
border:1px solid var(--night-line); border-radius:999px;
background: rgb(var(--on-dark-rgb) / 0.04);
font-size:.82rem; color: var(--night-muted);
}
.testi-head .review-summary .stars{ font-size:1rem; }
/* Track — 3-up on desktop; the .scroll-row class turns it into a swipe
rail on phones (shared rail styles further down). */
.testi-track{ gap: clamp(1.25rem, 2.4vw, 1.75rem); align-items: stretch; }
.testi{
position:relative; overflow:hidden;
display:flex; flex-direction:column; gap:1.15rem;
height:100%;
background: var(--night-card); border:1px solid var(--night-line);
border-radius: var(--radius);
padding: clamp(1.6rem, 2.6vw, 2.15rem);
transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* thin rust accent along the top edge — beats the shared card rule at 0,0,2,0 */
.testimonial-strip .testi{ border-top: 2px solid rgb(var(--accent-rgb) / .55); }
.testi > *{ position:relative; z-index:1; }
/* oversized quotation glyph — a faint watermark in the top-right corner */
.testi::before{
content:"\201C";
position:absolute; z-index:0; top:-.04em; right:.14em;
font-family: var(--font-display); font-weight:700; line-height:1;
font-size: clamp(4rem, 7vw, 5.5rem);
color: var(--rust-soft); opacity:.17;
}
.testi .stars{ font-size:.95rem; color: var(--rust-soft); letter-spacing:.18em; }
.testi blockquote{
margin:0;
font-family: var(--font-body); font-style:normal; font-weight:500;
font-size: clamp(1.02rem, 1.35vw, 1.16rem); line-height:1.62;
color: var(--night-ink); text-wrap: pretty;
}
.testi figcaption{
display:flex; align-items:center; gap:.9rem;
margin-top:auto; padding-top:1.15rem; /* auto → footer sinks to the card foot only when the card is stretched */
border-top:1px solid var(--night-line);
}
.testi-avatar{
flex:none; width:42px; height:42px; border-radius:0;
display:flex; align-items:center; justify-content:center;
font-family: var(--font-display); font-weight:700; font-size:.9rem; letter-spacing:.02em;
color: var(--rust-soft); background: var(--rust-tint);
border:1px solid var(--gold-line);
}
.testi-id{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.testi cite{ font-style:normal; font-size:.9rem; font-weight:700; color: var(--night-ink); }
.testi .review-tag{ align-self:flex-start; border-color: var(--night-line); color: var(--night-muted); }
@media (hover:hover){
.testi:hover{
transform: translateY(-5px);
border-color: var(--gold-line);
box-shadow: var(--shadow-lift), 0 0 0 1px rgb(var(--accent-rgb) / 0.14);
}
}
@media (prefers-reduced-motion: reduce){
.testi{ transition:none; }
.testi:hover{ transform:none; }
}
/* ---------- 11. Gallery ---------- */
/* =========================================================================
GALLERY PAGE
=========================================================================
Built by js/content.js from the one photo list in
js/edit-me.js -> EDIT_IMAGES.galleryPhotos:
.gal-archive a floating white panel holding every photo as a mosaic,
six to a page, with a ‹ › pager underneath.
Every photo is a `data-gallery-tile` with a `.tile-art` image inside,
which is what main.js's lightbox opens and steps through.
------------------------------------------------------------------------- */
/* ---------- the archive: floating white panel, mosaic, pager ---------- */
.gal-archive{
position:relative; overflow:hidden;
background: var(--surface);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
padding: clamp(1.5rem, 3.4vw, 3rem);
}
/* oversized watermark word behind the grid */
.gal-ghost{
position:absolute; z-index:0; pointer-events:none; user-select:none;
top: clamp(.2rem, 1.5vw, 1rem); right: clamp(.8rem, 3vw, 2.4rem);
font-family: var(--font-display); font-weight:700; font-style:italic;
font-size: clamp(3.2rem, 9vw, 7rem); line-height:1; letter-spacing:-.04em;
color: rgb(var(--ink-rgb) / .06);
}
.gal-archive-head{
position:relative; z-index:1;
margin-bottom: clamp(1.3rem, 2.6vw, 2.1rem);
}
.gal-archive-title{
font-family: var(--font-display); font-weight:700; letter-spacing:-.03em;
font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height:1.05; color: var(--ink);
}
.gal-archive-kicker{
margin-top:.3rem; font-style:italic;
font-size: clamp(.95rem, 1.6vw, 1.1rem); color: var(--ink-faint);
}
.mosaic{ position:relative; z-index:1; }
.mosaic-page{ display:none; }
.mosaic-page.is-active{
display:grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: clamp(130px, 13vw, 192px);
grid-auto-flow: dense;
gap: 12px;
animation: mosaicIn .5s var(--ease) both;
}
@keyframes mosaicIn{
from{ opacity:0; transform: translateY(12px) scale(.99); }
to { opacity:1; transform:none; }
}
/* The mosaic rhythm: one big square, then wide / small / small, then two
wides — six tiles filling a tidy 4 x 3 block, repeating for any count. */
.mosaic-tile:nth-child(6n+1){ grid-column: span 2; grid-row: span 2; }
.mosaic-tile:nth-child(6n+2){ grid-column: span 2; }
.mosaic-tile:nth-child(6n+5){ grid-column: span 2; }
.mosaic-tile:nth-child(6n){ grid-column: span 2; }
.mosaic-tile{
position:relative; overflow:hidden;
border-radius: var(--r-lg); background: var(--surface-2);
text-align:left; min-width:0;
box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .12);
transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.mosaic-tile:hover, .mosaic-tile:focus-visible{ box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.mosaic-tile:focus-visible{ outline: 2px solid var(--rust-soft); outline-offset: 3px; }
.mosaic-tile .tile-art{ position:absolute; inset:0; }
.mosaic-tile .tile-art img{
width:100%; height:100%; object-fit:cover; display:block;
transition: transform .9s var(--ease);
}
.mosaic-tile:hover .tile-art img, .mosaic-tile:focus-visible .tile-art img{ transform: scale(1.07); }
.mosaic-cap{
position:absolute; left:0; right:0; bottom:0; z-index:2;
padding: .95rem 1rem .85rem;
color: var(--white);
background: linear-gradient(0deg, rgb(var(--dark-rgb) / .88) 12%, rgb(var(--dark-rgb) / .35) 62%, transparent 100%);
}
.mosaic-cap-title{
display:block; font-family: var(--font-display); font-weight:600;
font-size:.95rem; line-height:1.2;
}
.mosaic-cap-sub{
display:block; margin-top:.22rem;
font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
color: var(--rust-soft);
}
/* The oversized tile numeral. It sits over whatever the photo happens to
be, so it carries its own soft shadow — without it the number vanishes
against a pale sky. */
.mosaic-num{
position:absolute; top:.45rem; right:.8rem; z-index:2;
font-family: var(--font-display); font-weight:700; letter-spacing:-.03em;
font-size: 1.9rem; line-height:1; color: rgba(255,255,255,.62);
text-shadow: 0 1px 14px rgb(var(--shadow-rgb) / .6);
transition: color .3s var(--ease);
}
.mosaic-tile:hover .mosaic-num, .mosaic-tile:focus-visible .mosaic-num{ color: rgba(255,255,255,.9); }
.mosaic-pager{
position:relative; z-index:1;
display:flex; align-items:center; gap: clamp(.8rem, 2vw, 1.5rem);
margin-top: clamp(1.2rem, 2.4vw, 2rem);
}
.mosaic-count{
display:flex; align-items:baseline; gap:.1rem;
font-family: var(--font-display); font-weight:700; letter-spacing:-.02em;
}
.mosaic-now{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height:1; color: var(--ink); }
.mosaic-total{ font-size:.95rem; color: var(--ink-faint); }
.mosaic-arrows{ display:flex; gap:.5rem; }
.mosaic-arrow{
width:46px; height:46px; border-radius:0;
border:1px solid var(--line); color: var(--ink);
display:flex; align-items:center; justify-content:center;
transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.mosaic-arrow svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mosaic-arrow:hover{ background: var(--rust); border-color: var(--rust); color: var(--on-accent); }
.mosaic-arrow:active{ transform: scale(.93); }
.mosaic-dots{ display:flex; align-items:center; gap:.4rem; margin-left:auto; }
.mosaic-dot{
width:8px; height:8px; border-radius:999px; background: var(--line-strong);
transition: width .35s var(--ease), background .35s var(--ease);
}
.mosaic-dot.is-active{ width:24px; background: var(--rust); }
/* The mosaic drops to two columns with a full-width lead tile before it
gets cramped — the small 1-column tiles start wrapping their captions
otherwise. The one-column phone layout lives in css/mobile.css (loaded
last, ≤768px only). */
@media (max-width: 980px){
.mosaic-page.is-active{
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: clamp(130px, 20vw, 200px);
gap: 10px;
}
/* The lead photo and the sixth one run full width; the four in between
pair off. Without the sixth going wide, five tiles after a full-width
lead pair into two rows and strand the last one in a half-empty row. */
.mosaic-tile:nth-child(6n+1),
.mosaic-tile:nth-child(6n){ grid-column: span 2; grid-row: span 1; }
.mosaic-tile:nth-child(6n+2),
.mosaic-tile:nth-child(6n+5){ grid-column: span 1; }
}
.lightbox{
position:fixed; inset:0; z-index:1000;
background: rgb(var(--dark-rgb) / .92);
display:flex; align-items:center; justify-content:center;
padding: 4rem 1.5rem;
opacity:0; visibility:hidden;
transition: opacity .35s var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-inner{
max-width: 720px; width:100%; text-align:center;
transform: scale(.94); transition: transform .4s var(--ease);
}
.lightbox.is-open .lightbox-inner{ transform: scale(1); }
.lightbox-art{
position:relative; width:100%; aspect-ratio: 4/3; background: var(--surface-2);
display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius: var(--r-lg);
transition: opacity .18s var(--ease);
}
.lightbox-art.is-swapping{ opacity:0; }
.lightbox-art img{
width:100%; height:100%; object-fit:cover; display:block;
animation: gallery-kenburns 6s var(--ease) forwards;
}
@keyframes gallery-kenburns{
from{ transform: scale(1); }
to { transform: scale(1.07); }
}
.lightbox-cap{ margin-top:1.2rem; color: var(--white); }
.lightbox-cap .cap-title{ font-family: var(--font-display); font-weight:600; font-size:1.25rem; }
.lightbox-cap .cap-sub{ font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color: var(--rust-soft); margin-top:.3rem; }
.lightbox-count{ font-size:.7rem; letter-spacing:.08em; color: var(--ink-faint); margin-top:.6rem; }
.lightbox-close{
position:absolute; top: 1.6rem; right: var(--gutter);
color: var(--white); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
display:flex; align-items:center; gap:.5rem;
}
.lightbox-close:hover{ color: var(--rust-soft); }
.lightbox-nav{
position:absolute; top:50%; transform: translateY(-50%);
width:46px; height:46px; border-radius:0;
display:flex; align-items:center; justify-content:center;
color: var(--white); background: rgba(255,255,255,0.06);
border: 1px solid var(--line);
transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.lightbox-nav svg{ width:20px; height:20px; }
.lightbox-nav:hover{ background: var(--rust); border-color: var(--rust); }
.lightbox-nav:active{ transform: translateY(-50%) scale(.92); }
.lightbox-prev{ left: clamp(.75rem, 3vw, 2.5rem); }
.lightbox-next{ right: clamp(.75rem, 3vw, 2.5rem); }
@media (prefers-reduced-motion: reduce){
.lightbox-art img{ animation:none; }
}
/* ---------- 12. About page ---------- */
/* Shared section heading block, so every band on the page starts on the
same rhythm instead of each carrying its own inline margins. */
.section-head{ max-width: 54ch; margin-bottom: clamp(2.2rem,4vw,3rem); }
.section-head .display-2{ margin-top: 1rem; }
/* The About hero carries the credential strip, so it needs more room at
the foot than the standard .page-hero. */
.about-hero{ padding-bottom: clamp(3rem,6vw,4.5rem); }
/* Credential strip — the hero's proof line. Answers "are these people
serious?" before any prose does. */
.credential-strip{
display:flex; flex-wrap:wrap; gap: clamp(1.5rem,4vw,3.5rem);
margin-top: clamp(2rem,4vw,2.8rem);
padding-top: clamp(1.5rem,3vw,2rem);
border-top: 1px solid var(--line);
}
.credential-strip li{ display:flex; flex-direction:column; gap:.3rem; }
.cred-value{
font-family: var(--font-display); font-weight:700;
font-size: clamp(1.9rem,3.4vw,2.6rem); line-height:1;
letter-spacing:-.02em; color: var(--rust-text);
font-variant-numeric: tabular-nums;
}
.cred-label{
font-size:.72rem; font-weight:600; letter-spacing:.1em;
text-transform:uppercase; color: var(--ink-faint);
}
/* Founding story — photo with a foil "since" stamp, copy with a signature */
.story-section{ padding-top: clamp(3rem,6vw,5rem); }
.story-split{
display:grid; grid-template-columns: .95fr 1.05fr;
gap: clamp(2rem,5vw,4rem); align-items:center;
}
.story-figure{ position:relative; margin:0; }
.story-figure img{
width:100%; aspect-ratio: 4/5; object-fit:cover; display:block;
border-radius: var(--r-lg);
box-shadow: var(--shadow-lift);
}
.story-stamp{
position:absolute; right:-14px; bottom:-14px;
width:104px; height:104px; border-radius:50%;
display:flex; flex-direction:column; align-items:center; justify-content:center;
background: linear-gradient(150deg, var(--rust) 0%, var(--accent-deep) 100%);
color: var(--dark);
border: 3px solid var(--paper);
box-shadow: 0 12px 28px -10px rgb(var(--accent-rgb) / 0.6);
}
.stamp-since{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; opacity:.85; }
.stamp-year{ font-family: var(--font-display); font-weight:700; font-size:1.5rem; line-height:1.1; }
.story-copy .story-lead{
margin-top:1rem;
font-family: var(--font-display); font-weight:500;
font-size: clamp(1.25rem,2.1vw,1.6rem); line-height:1.35;
letter-spacing:-.015em; color: var(--ink); text-wrap: pretty;
}
.story-copy .kicker{ margin-top:1.2rem; max-width:56ch; }
.signature{
display:flex; align-items:center; gap:.9rem;
margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.sig-mark{
flex-shrink:0; width:46px; height:46px; border-radius:0;
display:flex; align-items:center; justify-content:center;
font-family: var(--font-display); font-weight:700; font-size:.95rem; letter-spacing:.02em;
color: var(--rust-text); background: var(--rust-tint); border:1px solid var(--gold-line);
}
.sig-body{ display:flex; flex-direction:column; }
.sig-name{ font-family: var(--font-display); font-weight:600; font-size:1.02rem; color: var(--ink); }
.sig-role{ font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); }
/* Manifesto — one dark band, one sentence, to break the page's rhythm */
.manifesto{
background: var(--dark); color: var(--dark-ink);
padding-block: clamp(3.5rem,7vw,5.5rem);
position:relative; overflow:hidden;
}
.manifesto::before{
content:"“";
position:absolute; left:50%; top:.1em; transform:translateX(-50%);
font-family: var(--font-display); font-stretch: var(--wide); font-weight:800; font-size:9rem; line-height:1;
color: rgb(var(--accent-rgb) / 0.16); pointer-events:none;
}
.manifesto .im-shell{ position:relative; z-index:1; text-align:center; }
.manifesto blockquote{
margin:0 auto; max-width: 30ch;
font-family: var(--font-display); font-weight:500;
font-size: clamp(1.4rem,3.2vw,2.15rem); line-height:1.3; letter-spacing:-.02em;
text-wrap: balance;
}
.manifesto cite{
display:block; margin-top:1.6rem; font-style:normal;
font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
color: var(--rust-soft);
}
/* Principles — the numeral is the structure, not a card border */
.principle-grid{
display:grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(1.2rem,2.5vw,2rem);
}
.principle{
padding-top: 1.4rem;
border-top: 2px solid var(--line-strong);
transition: border-color .35s var(--ease);
}
.principle:hover{ border-top-color: var(--rust); }
.principle-num{
display:block;
font-family: var(--font-display); font-weight:700; font-size:2.4rem; line-height:1;
letter-spacing:-.03em; color: transparent;
-webkit-text-stroke: 1.4px rgb(var(--accent-rgb) / 0.45);
font-variant-numeric: tabular-nums;
transition: -webkit-text-stroke-color .35s var(--ease), color .35s var(--ease);
}
.principle:hover .principle-num{ color: var(--rust-text); -webkit-text-stroke-color: transparent; }
.principle h4{
margin-top:.9rem; font-size:1.1rem;
font-family: var(--font-display); font-weight:600; letter-spacing:-.01em; color: var(--ink);
}
.principle p{ margin-top:.55rem; color: var(--ink-soft); font-size:.93rem; line-height:1.6; }
/* Timeline — a true rail with a dot per year, instead of stacked rules */
.rail-timeline{ position:relative; display:grid; gap: clamp(1.6rem,3vw,2.4rem); padding-left: 2.1rem; }
.rail-timeline::before{
content:""; position:absolute; left:6px; top:.6rem; bottom:.6rem; width:2px;
background: linear-gradient(180deg, var(--rust) 0%, var(--gold-line) 55%, transparent 100%);
}
.rail-item{ position:relative; display:grid; grid-template-columns: 84px 1fr; gap: clamp(1rem,2vw,1.8rem); align-items:baseline; }
.rail-item::before{
content:""; position:absolute; left:-2.1rem; top:.55rem;
width:14px; height:14px; border-radius:50%;
background: var(--paper-2);
border: 3px solid var(--rust);
box-shadow: 0 0 0 4px var(--paper-2);
}
.rail-year{
font-family: var(--font-display); font-weight:700; font-size:1.45rem;
letter-spacing:-.01em; color: var(--rust-text); font-variant-numeric: tabular-nums;
}
.rail-body h4{ font-family: var(--font-display); font-weight:600; font-size:1.08rem; letter-spacing:-.01em; }
.rail-body p{ margin-top:.45rem; color: var(--ink-soft); max-width:58ch; font-size:.94rem; line-height:1.65; }
/* Crew — monogram medallions rather than stock avatars */
.crew-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.2rem,2.5vw,1.8rem); }
.crew-card{
display:flex; flex-direction:column;
padding: clamp(1.6rem,3vw,2.1rem);
background: var(--card); border:1px solid var(--card-line); border-radius: var(--r-lg);
box-shadow: var(--shadow-card), var(--card-hi);
transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.crew-card:hover{ box-shadow: var(--shadow-lift), var(--card-hi); border-color: var(--gold-line); }
.crew-monogram, .crew-photo{
width:72px; height:72px; border-radius:0; flex-shrink:0;
margin-bottom:1.3rem;
}
.crew-monogram{
display:flex; align-items:center; justify-content:center;
font-family: var(--font-display); font-weight:700; font-size:1.35rem; letter-spacing:.04em;
color: var(--dark-ink);
background: linear-gradient(150deg, var(--dark) 0%, var(--dark-card) 100%);
box-shadow: 0 0 0 1px var(--card-line), 0 0 0 5px var(--rust-tint);
}
.crew-photo{ object-fit:cover; display:block; box-shadow: 0 0 0 1px var(--card-line), 0 0 0 5px var(--rust-tint); }
.crew-card h4{ font-family: var(--font-display); font-weight:600; font-size:1.15rem; letter-spacing:-.01em; }
.crew-role{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--rust-text); margin-top:.3rem; font-weight:700; }
.crew-quote{
margin-top:.9rem; color: var(--ink-soft); font-size:.96rem; line-height:1.6;
padding-left:.9rem; border-left:2px solid var(--gold-line);
}
.crew-facts{
display:flex; gap:1.8rem; margin-top:auto; padding-top:1.3rem;
border-top:1px solid var(--line);
}
.crew-facts div{ display:flex; flex-direction:column; gap:.15rem; }
.crew-facts dt{ font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); }
.crew-facts dd{ margin:0; font-family: var(--font-display); font-weight:600; font-size:1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 900px){
.story-split{ grid-template-columns: 1fr; }
.principle-grid{ grid-template-columns: repeat(2,1fr); }
.crew-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
.principle-grid{ grid-template-columns: 1fr; }
.rail-item{ grid-template-columns: 1fr; gap:.3rem; }
.story-stamp{ width:84px; height:84px; right:-6px; bottom:-10px; }
.credential-strip{ gap: 1.4rem 2.2rem; }
}
/* ---------- 14. Expedition list rows (Expeditions page) ---------- */
.exp-row{ display:grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem,5vw,4rem); align-items:stretch; padding-block: clamp(2.5rem,6vw,5rem); border-top:1px solid var(--line); }
.exp-row:first-child{ border-top:none; padding-top:0; }
.exp-row.reverse{ direction: rtl; }
.exp-row.reverse > *{ direction: ltr; }
.exp-row > div:last-child{ align-self:center; }
.exp-row .card-art{ border-radius: var(--radius); aspect-ratio: auto; min-height: 320px; height:100%; }
.exp-row:hover .card-art img{ transform: scale(1.04); }
.exp-index{ font-family: var(--font-mono); font-weight:500; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color: var(--rust-text); margin-bottom:.9rem; }
.exp-row h3{ font-size: clamp(1.7rem,2.6vw,2.3rem); letter-spacing:-.03em; }
.exp-desc{ margin-top:1rem; color: var(--ink-soft); max-width:52ch; }
.exp-facts{ display:flex; flex-wrap:wrap; gap: 1.4rem; margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.exp-fact .k{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); }
.exp-fact .v{ margin-top:.25rem; font-family: var(--font-display); font-weight:700; font-size:1.02rem; }
.exp-price{ margin-top:1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.exp-price .from{ font-size:.8rem; color: var(--ink-faint); }
.exp-price .amount{ font-family: var(--font-display); font-stretch: var(--wide); font-weight:800; font-size:1.7rem; color: var(--ink); letter-spacing:-.01em; }
.exp-price .amount .per{ font-family: var(--font-mono); font-stretch:100%; font-weight:400; font-size:.78rem; letter-spacing:.04em; color: var(--ink-faint); }
/* ---------- 14b. Elevation profile ---------- */
.exp-altitude{ margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.exp-altitude-label{
font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint);
margin-bottom:.7rem;
}
.exp-altitude svg{ width:100%; height:auto; display:block; overflow:visible; }
.alt-line{ fill:none; stroke: var(--rust-soft); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.alt-dot{ fill: var(--paper); stroke: var(--ink-faint); stroke-width:1.4; }
.alt-peak-dot{ fill: var(--rust-soft); stroke: var(--paper); stroke-width:2; }
.alt-peak-label{ font-family: var(--font-body); font-size:11px; font-weight:700; fill: var(--ink); }
/* ---------- 14d. Motorcycle raids and 4x4 raids ----------
The Motorcycle / 4x4 switch (homepage and Expeditions page), the rules
that show the wording and the list for the chosen kind, a heading over
each Expeditions list, and the 4x4 list on the lifted background. The
".px-x4-points" promises are shared with the homepage's 4x4 section.
js/content.js keeps the choice on
(a line in the sets it before the page paints):
[data-show-kind="4x4"] wording for 4x4 raids — hidden until chosen,
and hidden with JavaScript off
[data-show-kind="motorcycle"] its motorcycle twin — hidden once 4x4 is
chosen
[data-kind-section="…"] a whole list — shown only for its kind, but
both show with JavaScript off */
html:not([data-raid-kind="4x4"]) [data-show-kind="4x4"],
html[data-raid-kind="4x4"] [data-show-kind="motorcycle"],
html[data-raid-kind="motorcycle"] [data-kind-section="4x4"],
html[data-raid-kind="4x4"] [data-kind-section="motorcycle"]{ display: none !important; }
/* the switch: two plates, the chosen one lit marigold with a tick */
.raid-kind-switch{
display:grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .75rem;
}
.raid-kind-switch button{
position:relative;
display:flex; align-items:center; gap: 1rem;
padding: 1.05rem 3rem 1.05rem 1.15rem;
text-align:left;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line-strong);
transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.raid-kind-switch button:hover{ border-color: var(--gold-line); }
.raid-kind-switch .rk-icon{
flex:none; width: 52px; height: 35px;
fill:none; stroke: currentColor; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
transition: color .25s var(--ease);
}
.raid-kind-switch .rk-text{ display:block; min-width:0; }
.raid-kind-switch .rk-title{
display:block;
font-family: var(--font-display); font-stretch: var(--wide); font-weight:800;
font-size: 1rem; line-height:1.1; letter-spacing:.01em; text-transform:uppercase;
}
.raid-kind-switch .rk-sub{
display:block; margin-top:.35rem;
font-family: var(--font-mono); font-size:.66rem; font-weight:500;
letter-spacing:.08em; text-transform:uppercase;
color: var(--ink-faint);
}
/* the tick box in the corner */
.raid-kind-switch button::after{
content:""; position:absolute; top:50%; right:1rem;
width:20px; height:20px; margin-top:-10px;
border:1px solid var(--line-strong);
background: transparent center / 13px no-repeat;
}
.raid-kind-switch button[aria-pressed="true"]{
border-color: var(--rust);
background: rgb(var(--accent-rgb) / .09);
box-shadow: inset 0 0 0 1px var(--rust);
}
.raid-kind-switch button[aria-pressed="true"] .rk-icon{ color: var(--rust); }
.raid-kind-switch button[aria-pressed="true"] .rk-sub{ color: var(--ink-soft); }
.raid-kind-switch button[aria-pressed="true"]::after{
border-color: var(--rust);
background-color: var(--rust);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0908' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.raid-kind-switch button:focus-visible{ outline-offset: 3px; }
/* on the Expeditions page it sits in the masthead, under the intro */
.page-hero .raid-kind-switch{ margin-top: 2rem; max-width: 46rem; }
.page-hero .raid-kind-switch button{ background: rgb(var(--dark-rgb) / .5); }
.exp-kind-head{
display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
gap: clamp(1.5rem, 4vw, 4rem); align-items:end;
padding-bottom: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2rem, 4vw, 3rem);
border-bottom: 1px solid var(--line);
}
.exp-kind-head .display-2{ margin-top: 1rem; }
.exp-x4{ background: var(--paper-2); border-top: 1px solid var(--line); }
.px-x4-points{ display:grid; border-top: 1px solid var(--line); }
.px-x4-points li{
display:grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .9rem;
padding: 1rem 0;
border-bottom: 1px solid var(--line);
}
.px-x4-n{ padding-top:.2rem; font-family: var(--font-mono); font-size:.68rem; font-weight:500; color: var(--rust); }
.px-x4-points h3{ font-size: 1rem; line-height:1.25; color: var(--ink); }
.px-x4-points p{ margin-top:.25rem; font-size:.87rem; line-height:1.55; color: var(--ink-soft); }
/* on the Expeditions page the three promises sit side by side */
.exp-x4-points{
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 clamp(1rem, 3vw, 2.5rem);
border-top: 0;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.exp-x4-points li{ border-bottom: 0; border-top: 2px solid var(--line-strong); padding-top: 1.1rem; }
/* "The 4x4 Fleet" on the Expeditions page — three vehicle cards between the
promises and the routes. content.js rebuilds [data-fleet-list] from
EDIT_FLEET_4X4; the facts row is hidden for a vehicle without facts. */
.exp-fleet{ margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.exp-fleet-head{
display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
gap: .5rem 2rem;
padding-bottom: 1rem; margin-bottom: 1.4rem;
border-bottom: 1px solid var(--line);
}
.exp-fleet-title{
font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800;
font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.1;
letter-spacing: .01em; text-transform: uppercase;
color: var(--ink);
}
.exp-fleet-note{ max-width: 54ch; font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }
.exp-fleet-grid{
display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
}
.exp-fleet-card{
display:flex; flex-direction:column;
background: var(--surface);
border: 1px solid var(--line);
overflow:hidden;
transition: border-color .35s var(--ease);
}
.exp-fleet-card:hover{ border-color: var(--gold-line); }
.exp-fleet-art{ position:relative; aspect-ratio: 16 / 10; overflow:hidden; background: var(--paper); }
.exp-fleet-art img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition: transform .6s var(--ease);
}
.exp-fleet-card:hover .exp-fleet-art img{ transform: scale(1.04); }
.exp-fleet-body{ display:flex; flex-direction:column; flex:1; padding: 1.1rem 1.2rem 1.25rem; }
.exp-fleet-tag{
align-self:flex-start;
padding: .3rem .5rem;
font-family: var(--font-mono); font-size: .6rem; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
color: var(--rust-text);
border: 1px solid var(--gold-line);
}
.exp-fleet-body h3{ margin-top: .8rem; font-size: 1.12rem; line-height: 1.2; color: var(--ink); }
.exp-fleet-body p{ margin-top: .45rem; font-size: .86rem; line-height: 1.55; color: var(--ink-soft); }
.exp-fleet .fleet-facts{ display:flex; flex-wrap:wrap; gap: .35rem; margin-top: auto; padding-top: 1rem; }
.exp-fleet .fleet-facts[hidden]{ display:none; }
.exp-fleet .fleet-facts li{
padding: .3rem .48rem;
font-family: var(--font-mono); font-size: .58rem; font-weight: 500;
letter-spacing: .07em; text-transform: uppercase; line-height: 1.2;
color: var(--ink-soft);
border: 1px solid var(--line-strong);
}
@media (prefers-reduced-motion: reduce){
.exp-fleet-card:hover .exp-fleet-art img{ transform: none; }
}
@media (max-width: 560px){
.raid-kind-switch{ gap: .5rem; }
.raid-kind-switch button{ flex-direction: column; align-items: flex-start; gap: .55rem; padding: .85rem 2.4rem .9rem .9rem; }
.raid-kind-switch button::after{ top: .85rem; right: .75rem; margin-top: 0; width: 18px; height: 18px; }
.raid-kind-switch .rk-icon{ width: 42px; height: 28px; }
.raid-kind-switch .rk-title{ font-size: .82rem; }
.raid-kind-switch .rk-sub{ font-size: .58rem; }
}
@media (max-width: 860px){
.exp-kind-head{ grid-template-columns: 1fr; align-items:start; }
.exp-x4-points{ grid-template-columns: 1fr; }
/* vehicles stack: a photo stub on the left, the words beside it */
.exp-fleet-grid{ grid-template-columns: 1fr; gap: .75rem; }
.exp-fleet-card{ display:grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
.exp-fleet-art{ aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 560px){
.exp-fleet-head{ padding-bottom: .7rem; margin-bottom: .9rem; }
.exp-fleet-note{ font-size: .8rem; }
.exp-fleet-card{ grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); }
.exp-fleet-body{ padding: .75rem .8rem .85rem; }
.exp-fleet-tag{ font-size: .52rem; padding: .22rem .4rem; }
.exp-fleet-body h3{ margin-top: .5rem; font-size: .92rem; }
.exp-fleet-body p{ font-size: .76rem; line-height: 1.45; }
.exp-fleet .fleet-facts{ gap: .25rem; padding-top: .6rem; }
.exp-fleet .fleet-facts li{ font-size: .5rem; padding: .2rem .35rem; }
}
/* ---------- 14c. Day-by-day itinerary (native ) ---------- */
.itinerary{ margin-top:1.4rem; }
.itinerary-toggle{
cursor:pointer; list-style:none;
display:flex; align-items:center; justify-content:space-between; gap:1rem;
padding: .9rem 1.1rem; border:1px solid var(--line); border-radius: var(--r-sm);
background: var(--surface);
font-family: var(--font-display); font-weight:600; font-size:.88rem; color: var(--ink);
transition: border-color .25s var(--ease);
}
.itinerary-toggle::-webkit-details-marker{ display:none; }
.itinerary-toggle .plus{ font-size:1.2rem; color: var(--rust-text); transition: transform .3s var(--ease); flex-shrink:0; line-height:1; }
.itinerary[open] .itinerary-toggle .plus{ transform: rotate(45deg); }
.itinerary-toggle:hover{ border-color: var(--gold-line); }
.itinerary-days{
list-style:none; margin: .9rem 0 0; padding:0;
border:1px solid var(--line); border-radius: var(--r-sm); overflow:hidden;
}
.itinerary-day{
display:grid; grid-template-columns: 3.6rem 1fr auto; gap: .5rem 1rem; align-items:baseline;
padding: .8rem 1.1rem; border-top:1px solid var(--line);
background: var(--surface);
}
.itinerary-day:first-child{ border-top:none; }
.itinerary-day .d{ font-family: var(--font-display); font-weight:700; font-size:.78rem; color: var(--rust-text); }
.itinerary-day .t b{ font-weight:600; color: var(--ink); }
.itinerary-day .t{ font-size:.88rem; color: var(--ink-soft); }
.itinerary-day .a{ font-size:.72rem; color: var(--ink-faint); white-space:nowrap; }
@media (max-width: 480px){
.itinerary-day{ grid-template-columns: 2.8rem 1fr; }
.itinerary-day .a{ grid-column: 2; margin-top:.1rem; }
}
/* ---------- 15. CTA band (bold rust — the one non-hero splash of colour
on an otherwise light page, echoing the reference's own orange "book
now" card) ---------- */
.cta-band{
background: var(--rust); color: var(--on-accent); text-align:center;
padding-block: clamp(4rem,8vw,7rem);
position:relative; overflow:hidden;
}
.cta-band::before{
content:""; position:absolute; left:50%; top:-60px; width:560px; height:280px; transform:translateX(-50%);
left:0; right:0; top:0; bottom:0; width:auto; height:auto; transform:none;
background: repeating-linear-gradient(-45deg, rgb(var(--dark-rgb) / .07) 0 2px, transparent 2px 14px);
pointer-events:none;
}
.cta-band .im-shell{ position:relative; z-index:1; }
.cta-band h2{ color: var(--on-accent); max-width: 20ch; margin-inline:auto; }
.cta-band .eyebrow{ justify-content:center; color: var(--on-accent); }
.cta-band h2 .ital{ color: var(--on-accent); -webkit-text-stroke: 0; opacity:.62; }
.cta-band p{ margin-top:1rem; color: rgb(var(--dark-rgb) / .78); }
.cta-band .im-btn-primary{
margin-top:2rem;
background: var(--on-accent); color: var(--rust); border-color: var(--on-accent);
}
.cta-band .im-btn-primary::before{ background: var(--paper-2); }
.cta-band .im-btn-primary:hover{ color: var(--ink); border-color: var(--on-accent); }
/* ---------- 16. Forms (Contact) ---------- */
.contact-layout{ display:grid; grid-template-columns: 1.35fr .85fr; gap: clamp(1.5rem,3vw,2.4rem); align-items:start; }
/* The form sits in its own raised panel rather than naked on the page, so
it reads as the primary job of the page. */
.enquiry-panel{
background: var(--card);
border: 1px solid var(--card-line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card), var(--card-hi);
padding: clamp(1.5rem, 3.5vw, 2.6rem);
}
.enquiry-head .display-3{ margin-top:.9rem; font-size: clamp(1.5rem,2.6vw,1.95rem); letter-spacing:-.01em; }
.enquiry-head .kicker{ margin-top:.8rem; color: var(--ink-soft); max-width:52ch; font-size:.95rem; }
/* Reassurance chips — the three things people want to know before typing */
.assurance-row{
display:flex; flex-wrap:wrap; gap:.5rem;
margin: 1.6rem 0 1.9rem;
padding-bottom: 1.6rem;
border-bottom: 1px solid var(--line);
}
.assurance-row li{
display:flex; align-items:center; gap:.45rem;
font-size:.74rem; font-weight:600; letter-spacing:.02em;
color: var(--ink-soft);
background: var(--rust-tint);
border: 1px solid var(--gold-line);
border-radius: 0;
padding: .4rem .7rem;
font-family: var(--font-mono); font-weight: 500;
}
.assurance-row li::before{
content:""; width:5px; height:5px; border-radius:50%;
background: var(--rust); flex-shrink:0;
}
.form-field{ margin-bottom: 1.5rem; }
.form-field .req{ color: var(--rust-text); margin-left:.15rem; }
.field-hint{ margin-top:.45rem; font-size:.76rem; color: var(--ink-faint); }
.form-actions{
display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
margin-top:.4rem;
}
.form-privacy{ font-size:.78rem; color: var(--ink-faint); max-width:34ch; line-height:1.5; }
.form-field label{ display:block; font-family: var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:.5rem; font-weight:500; }
.form-field input, .form-field select, .form-field textarea{
width:100%; background-color: var(--paper); border:1px solid var(--line-strong);
border-radius: var(--r-sm); padding: .8rem .9rem; font-size:1rem; color: var(--ink);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form-field input:hover, .form-field select:hover, .form-field textarea:hover{
border-color: var(--line-strong);
}
.form-field select{
appearance: none; -webkit-appearance: none; -moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23F4A91E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.6rem;
cursor: pointer;
}
.form-field select option{ background: var(--surface); color: var(--ink); }
.form-field input[type="date"]{ color-scheme: dark; }
.form-field textarea{ resize: vertical; min-height: 6.5rem; line-height: 1.55; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
outline:none; border-color: var(--rust-soft);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 3px var(--rust-tint);
}
.im-field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
/* The enquiry form's spam trap. Parked off-screen rather than hidden with
display:none, because a fair number of form-spam bots skip fields that are
display:none and fill in everything else — and a field only a bot fills in
is the whole trick. The server throws away any enquiry that arrives with
it set. Keep this rule: without it the field is simply visible. */
.hp-field{
position: absolute !important;
left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.form-note{ margin-top: 1rem; font-size:.82rem; color: var(--ink-faint); }
.form-note[data-form-error]{ color: var(--rust-text); }
/* Success state -- replaces the form once the enquiry has reached the
server and is visible in the Bookings dashboard. */
.form-success{ display:none; text-align:center; padding: 1rem 0 .5rem; }
.form-success.is-visible{ display:block; }
.success-mark{
display:inline-flex; align-items:center; justify-content:center;
width:56px; height:56px; border-radius:50%;
background: var(--pine-tint); color: var(--pine);
border: 1px solid var(--pine-line);
margin-bottom:1.2rem;
}
.success-mark svg{ width:26px; height:26px; }
.form-success h3{ font-size:1.5rem; font-family: var(--font-display); font-weight:600; letter-spacing:-.01em; }
.form-success p{ margin-top:.7rem; color: var(--ink-soft); max-width:46ch; margin-inline:auto; }
.success-nudge{ margin-top:1.4rem !important; font-size:.88rem; color: var(--ink-faint); }
.form-success .im-btn{ margin-top:1rem; }
.im-btn-block{ width:100%; }
/* ---- Contact rail (right column) ---- */
.contact-rail{ display:grid; gap:1.2rem; }
.info-card{ border:1px solid var(--card-line); background: var(--card); border-radius: var(--r-lg); padding: clamp(1.4rem,3vw,1.9rem); box-shadow: var(--shadow-card), var(--card-hi); }
.info-card h4{ font-family: var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:-.01em; }
.info-card address, .info-card p{ margin-top:.8rem; font-style:normal; color: var(--ink-soft); line-height:1.75; }
.info-card .info-lead{ margin-top:.5rem; font-size:.88rem; color: var(--ink-faint); }
.info-card a.text-link{ margin-top:.9rem; }
.contact-list{ display:grid; gap:1rem; margin: 1.4rem 0; }
.contact-list li{ display:flex; align-items:flex-start; gap:.85rem; }
.contact-ico{
flex-shrink:0; width:38px; height:38px; border-radius: var(--r-lg);
display:flex; align-items:center; justify-content:center;
background: var(--rust-tint); color: var(--rust-text);
border: 1px solid var(--gold-line);
}
.contact-ico svg{ width:17px; height:17px; }
.contact-body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.contact-label{ font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); }
.contact-value{ font-size:.95rem; font-weight:600; color: var(--ink); word-break:break-word; }
a.contact-value{ transition: color .25s var(--ease); }
a.contact-value:hover{ color: var(--rust-text); }
.contact-sub{ font-size:.88rem; color: var(--ink-soft); }
.map-art{ width:100%; aspect-ratio: 4/3; border:1px solid var(--line); background: var(--surface-2); border-radius: var(--r-lg); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; color: var(--ink-faint); margin-top:1rem; }
.map-art iframe{ width:100%; height:100%; border:0; display:block; }
/* ---------- 17. Footer ---------- */
/* Four columns on the deepest black, then the name set enormous and
hollow across the whole width — the last thing anyone sees on a page. */
.site-footer{
position:relative; overflow:hidden;
border-top:1px solid var(--line);
background: var(--dark);
padding-block: clamp(3.5rem,7vw,5.5rem) 1.6rem;
}
.footer-grid{ display:grid; grid-template-columns: 1.4fr .8fr .9fr 1.2fr; gap: clamp(2rem,4vw,3.5rem); padding-bottom: clamp(2.5rem,5vw,3.5rem); }
.footer-brand{ display:flex; flex-direction:column; align-items:flex-start; }
.footer-logo{ display:block; width:64px; height:64px; margin-bottom:1.1rem; }
.footer-brand .logo-word{ font-size:1.15rem; }
.footer-brand p{ margin-top:.9rem; color: var(--ink-soft); max-width:32ch; font-size:.92rem; line-height:1.6; }
.footer-col h4{
font-family: var(--font-mono); font-stretch:100%;
font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
color: var(--rust-text); margin-bottom:1.1rem;
}
.footer-col ul{ display:grid; gap:.65rem; }
.footer-col a{ transition: color .2s var(--ease); }
.footer-col a:hover{ color: var(--rust); }
.footer-col address{ font-style:normal; color: var(--ink-soft); line-height:1.85; }
.footer-newsletter p{ color: var(--ink-soft); font-size:.9rem; line-height:1.6; }
.newsletter-form{ display:flex; border:1px solid var(--line-strong); overflow:hidden; margin-top:1.1rem; background: var(--paper); }
.newsletter-form input{ flex:1; min-width:0; background:none; border:none; padding:.8rem .9rem; font-size:.92rem; }
.newsletter-form input:focus{ outline:none; }
.newsletter-form button{ font-size:1.05rem; color: var(--on-accent); background: var(--rust); padding:.8rem 1.15rem; transition: background-color .25s var(--ease); }
.newsletter-form button:hover{ background: var(--ink); }
.newsletter-form:focus-within{ border-color: var(--rust); }
/* the giant hollow wordmark */
.footer-mark{
margin: 0 0 1.4rem;
font-family: var(--font-display); font-stretch: var(--wide); font-weight:900;
font-size: clamp(3rem, 12.6vw, 13rem); line-height:.82; letter-spacing:-.03em;
text-transform:uppercase; white-space:nowrap; text-align:center;
color: transparent;
-webkit-text-stroke: 1px rgb(var(--ink-rgb) / .16);
user-select:none; pointer-events:none;
}
@supports not (-webkit-text-stroke: 1px black){
.footer-mark{ color: rgb(var(--ink-rgb) / .06); }
}
.footer-bottom{
display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
padding-top: 1.5rem; border-top:1px solid var(--line);
font-family: var(--font-mono); font-size:.72rem; letter-spacing:.04em; color: var(--ink-faint);
}
.footer-social{ display:flex; gap:1.4rem; }
.footer-social a:hover{ color: var(--rust); }
/* ---------- 17c. Marquee ticker ---------- */
/* A marigold strip, set wide in black capitals, tilted a hair off level
like tape stuck across the page. */
.marquee{
position:relative; z-index:3;
background: var(--rust);
color: var(--on-accent);
overflow:hidden;
padding-block: .95rem;
}
.marquee-track{ display:flex; width:max-content; animation: marqueeScroll 36s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-item{
display:flex; align-items:center; gap: 1.4rem;
padding-inline: 1.4rem;
font-family: var(--font-display); font-stretch: var(--wide); font-weight:800;
font-size: .95rem; letter-spacing:.02em; text-transform:uppercase;
white-space:nowrap; color: var(--on-accent);
}
.marquee-item .dot{
width:.6rem; height:.6rem; display:inline-block;
background: var(--on-accent);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
@keyframes marqueeScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; } }
/* ---------- 17d. Draw-in SVG lines ---------- */
.draw-path{ stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease); }
[data-reveal].is-visible .draw-path{ stroke-dashoffset: 0; }
/* ---------- 17e. Floating "Book a Raid" button ---------- */
/* Fixed to the bottom-right corner, revealed by main.js once the visitor is
past the hero (data-book-trigger). A marigold plate with the calendar
tick and a label, and a hairline frame that breathes out from it now and
then so a button that appears halfway down the page is noticed. */
.book-trigger{
position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 90;
display: inline-flex; align-items: center; gap: .65rem;
height: 54px; padding: 0 1.3rem;
background: var(--rust);
color: var(--on-accent);
border: none; border-radius: 0;
font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700;
font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
white-space: nowrap; text-decoration: none;
box-shadow: 0 18px 40px -14px rgb(var(--shadow-rgb) / .9);
opacity: 0; transform: translateY(16px); pointer-events: none;
transition: opacity .4s var(--ease), transform .35s var(--ease), background-color .25s var(--ease);
}
.book-trigger svg{
width: 19px; height: 19px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.9;
stroke-linecap: round; stroke-linejoin: round;
}
.book-trigger.is-visible{ opacity: 1; transform: none; pointer-events: auto; }
.book-trigger:hover{ background: var(--ink); transform: translateY(-3px); }
.book-trigger:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
.book-trigger::before{
content: ""; position: absolute; inset: 0;
border: 1px solid var(--rust);
z-index: -1;
animation: bookPulse 3s var(--ease) infinite;
}
@keyframes bookPulse{
0%{ transform: scale(1); opacity: .8; }
70%{ transform: scale(1.14, 1.4); opacity: 0; }
100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
.book-trigger::before{ animation: none; display: none; }
}
@media (max-width: 480px){
/* On a phone the bottom tab bar already carries Book in thumb reach, so
mobile.css hides this one outright. These sizes only cover the narrow
window between the two breakpoints. */
.book-trigger{ right: 1rem; bottom: 1rem; height: 50px; padding: 0 1.1rem; font-size: .66rem; }
.book-trigger svg{ width: 18px; height: 18px; }
}
/* ---------- 17f. Booking calculator (dark) ---------- */
.booking-widget{
display:grid; grid-template-columns: 1.3fr .9fr;
border: 1px solid var(--dark-line);
background: var(--dark);
border-radius: var(--radius); overflow:hidden;
box-shadow: var(--shadow-lift);
}
.booking-fields{ padding: clamp(1.6rem,3vw,2.6rem); display:grid; gap:1.5rem; align-content:start; }
.booking-fields .form-field label{ color: var(--dark-muted); }
.booking-fields .form-field input,
.booking-fields .form-field select{
background-color: var(--dark-card);
border: 1px solid var(--dark-line);
color: var(--dark-ink);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.booking-fields .form-field input:hover,
.booking-fields .form-field select:hover{
border-color: rgb(var(--on-dark-rgb) / 0.32);
}
.booking-fields .form-field select{
appearance: none; -webkit-appearance: none; -moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23F4A91E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.6rem;
cursor: pointer;
}
.booking-fields .form-field select option{ background: var(--dark-card); color: var(--dark-ink); }
.booking-fields .form-field input[type="date"]{ color-scheme: dark; cursor: pointer; }
.booking-fields .form-field input[type="number"]{ cursor: text; }
.booking-fields .form-field input:focus, .booking-fields .form-field select:focus{
outline: none;
border-color: var(--rust-soft);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 3px rgb(var(--accent-rgb) / .25);
}
.booking-summary{
padding: clamp(1.6rem,3vw,2.6rem);
background: var(--dark-card); color: var(--dark-ink);
display:flex; flex-direction:column;
}
.booking-summary .eyebrow{ color: var(--rust-soft); }
.booking-line{
display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
padding-block:.8rem;
border-top:1px solid var(--dark-line);
font-size:.92rem; color: var(--dark-muted);
}
.booking-line:first-of-type{ margin-top:.5rem; }
.booking-total{
display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
padding-top:1.2rem; margin-top:.4rem;
border-top:1px solid var(--dark-line);
font-family: var(--font-display); font-weight:700; font-size:1.45rem; color: var(--dark-ink);
letter-spacing:-.02em;
}
.booking-total span:last-child{ color: var(--rust-soft); }
.booking-enddate{ font-family: var(--font-display); font-weight:600; font-size:1rem; padding-top:.3rem; color: var(--dark-ink); }
/* The calculator's button used to be green, because it handed the estimate
over to WhatsApp. It now carries the same estimate into book.html, so it
is an ordinary primary button and needs no override at all — the only
thing left to say is that on this dark panel it runs the full width. */
.booking-summary .im-btn-primary{ width: 100%; justify-content: center; }
.booking-summary .form-note{ color: rgb(var(--on-dark-rgb) / .5); }
@media (max-width: 860px){
.booking-widget{ grid-template-columns: 1fr; }
}
/* ---------- 17g. Hero departure card (dark glass) — slim ---------- */
/* right edge tracks the .im-shell's right edge (not the raw viewport gutter)
so the card lines up with the content column */
.hero-dep{
position:absolute; z-index:3; top: 15rem;
right: max(var(--gutter), calc(50vw - (var(--container) / 2) + var(--gutter)));
}
.dep-card{
position:relative; z-index:2; overflow:hidden;
background: rgb(var(--dark-rgb) / .78);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border: 1px solid rgb(var(--on-dark-rgb) / .14);
border-top: 3px solid var(--pine-soft);
border-radius: var(--r-sm);
padding: 1.2rem 1.25rem;
width: 278px;
color: var(--dark-ink);
box-shadow:
0 1px 2px rgba(0,0,0,0.35),
0 18px 40px -18px rgba(0,0,0,0.6),
0 0 0 1px rgb(var(--pine-soft-rgb) / 0.08);
transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.dep-card::before{
content:""; position:absolute; inset:0; pointer-events:none;
background: radial-gradient(120% 60% at 0% 0%, rgb(var(--pine-soft-rgb) / 0.14), transparent 60%);
}
/* diagonal shine — sweeps once on reveal, again on hover */
.dep-card::after{
content:""; position:absolute; top:0; left:-70%; width:48%; height:100%;
pointer-events:none; transform: skewX(-18deg);
background: linear-gradient(100deg,
transparent 0%, rgba(255,255,255,0.10) 42%,
rgb(var(--pine-soft-rgb) / 0.16) 50%, transparent 62%);
}
.hero-dep.is-visible .dep-card::after{ animation: depShine 1.15s var(--ease) .55s 1; }
.dep-card:hover{
transform: translateY(-5px);
border-color: var(--pine-line);
box-shadow:
0 2px 4px rgba(0,0,0,0.4),
0 28px 58px -20px rgba(0,0,0,0.7),
0 0 0 1px rgb(var(--pine-soft-rgb) / 0.24),
0 0 34px -6px rgb(var(--pine-soft-rgb) / 0.3);
}
.dep-card:hover::after{ animation: depShine 1.15s var(--ease) 1; }
@keyframes depShine{ from{ left:-70%; } to{ left:135%; } }
/* ---- "this one is filling" — the urgent state, at every screen size ----
content.js puts .is-urgent on the card AND on its wrapper whenever the
next departure's status is "urgent". Two signals, no shouting:
1. a rust halo that breathes outward from behind the card. It is
drawn by the WRAPPER's ::after rather than animating the card's
own box-shadow, because the card already animates that shadow on
hover and an animation always beats a plain declaration — the two
would fight and the hover state would never appear;
2. the one-shot reveal shine becomes a slow repeating sweep, reusing
the depShine keyframes that are already here.
The halo sits at z-index 1 and the card at z-index 2, so the ring is
only ever visible outside the card's own edges. */
.hero-dep::after{
content:""; position:absolute; inset:0; z-index:1;
border-radius: var(--r-sm);
pointer-events:none;
}
.hero-dep.is-urgent::after{ animation: depHalo 2.8s ease-in-out infinite; }
@keyframes depHalo{
0%, 100%{ box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.45); }
60% { box-shadow: 0 0 0 13px rgb(var(--accent-rgb) / 0); }
}
/* the pine accent edge and the corner wash both turn rust while urgent */
.hero-dep.is-urgent .dep-card{ border-top-color: var(--rust); }
.hero-dep.is-urgent .dep-card::before{
background: radial-gradient(120% 60% at 0% 0%, rgb(var(--accent-rgb) / 0.16), transparent 60%);
}
.hero-dep.is-urgent.is-visible .dep-card::after{
animation: depShine 2.4s var(--ease) 1s infinite;
}
/* The seat count goes rust with everything else: a green "3 of 12 seats
left" under an orange "Few Seats Left" badge reads as reassurance,
which is the opposite of what the badge is saying. */
.dep-card.is-urgent .dep-card-seats{ color: var(--rust-soft); }
/* a raid already on the road is news, not an offer — no pulse at all */
.hero-dep.is-running::after{ animation: none; }
.dep-card > *{ position:relative; }
/* The card's two buttons are the site-wide pair at a smaller size: the
outline one gets a bone hairline so it reads on the dark glass. */
.dep-card .im-btn-outline{ border-color: var(--dark-line); color: var(--dark-ink); }
.dep-card .im-btn-outline:hover{ border-color: var(--rust); color: var(--rust); }
.dep-card .im-btn::after{ content: none; }
.dep-card-badge{
display:inline-flex; align-items:center; gap:.4rem;
font-size:.6rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
color: var(--pine-soft); background: var(--pine-tint); border:1px solid var(--pine-line);
padding:.26rem .5rem; border-radius: var(--r-sm);
}
.dep-card-badge::before{
content:""; width:5px; height:5px; border-radius:50%; background: var(--pine-soft);
box-shadow: 0 0 0 3px rgb(var(--pine-soft-rgb) / 0.22);
animation: depDotPulse 2s ease-in-out infinite;
}
@keyframes depDotPulse{
0%,100%{ box-shadow: 0 0 0 0 rgb(var(--pine-soft-rgb) / 0.4); }
55%{ box-shadow: 0 0 0 6px rgb(var(--pine-soft-rgb) / 0); }
}
.dep-card-date{ font-family: var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color: var(--dark-muted); margin-top:.75rem; }
.dep-card h3{ font-size:1.1rem; margin-top:.3rem; color: var(--dark-ink); letter-spacing:-.02em; line-height:1.15; }
.dep-card-route{ font-size:.78rem; color: var(--dark-muted); margin-top:.4rem; line-height:1.4; }
.dep-card-meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:.85rem; padding-top:.8rem; border-top:1px solid var(--dark-line); }
.dep-card-meta .kicker{ color: var(--dark-muted); font-size:.8rem; }
.dep-card-meta .amount{ font-family: var(--font-display); font-weight:700; font-size:1.15rem; color: var(--pine-soft); }
.dep-card-actions{ display:flex; gap:.5rem; margin-top:.95rem; }
.dep-card-actions .im-btn{ flex:1; padding:.58rem .7rem; font-size:.7rem; }
@media (prefers-reduced-motion: reduce){
.dep-card, .dep-card:hover{ transition:none; transform:none; }
.dep-card::after, .dep-card:hover::after,
.hero-dep.is-visible .dep-card::after,
.hero-dep.is-urgent::after,
.hero-dep.is-urgent.is-visible .dep-card::after,
.dep-card-badge::before{ animation:none; }
}
/* ---------- 17h. Upcoming departures — full-bleed photo cards ---------- */
.departures-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; }
.departure-item{
position: relative;
aspect-ratio: 3 / 4;
display: flex; flex-direction: column;
padding: 1.2rem;
overflow: hidden;
color: #fff;
background: var(--night-card);
}
.departure-item > *{ position: relative; z-index: 1; }
.departure-item .card-art{
position: absolute; inset: 0; z-index: 0;
aspect-ratio: auto; border-radius: 0; box-shadow: none;
}
.departure-item .card-art img{
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.1s var(--ease), filter .5s var(--ease);
}
.departure-item .card-art::after{
content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 0;
background: linear-gradient(180deg,
rgba(0,0,0,0.30) 0%,
rgba(0,0,0,0) 22%,
rgba(0,0,0,0.16) 40%,
rgb(var(--dark-rgb) / 0.68) 60%,
rgb(var(--dark-rgb) / 0.92) 80%,
rgb(var(--dark-rgb) / 0.97) 100%);
}
.departure-item:hover .card-art img{ transform: scale(1.06); }
.departure-status{
display:inline-flex; align-self:flex-start; align-items:center; gap:.4rem;
font-size:.64rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
padding:.34rem .7rem; color: var(--dark-ink);
font-family: var(--font-mono);
background: rgb(var(--dark-rgb) / 0.5);
border:1px solid rgba(255,255,255,0.24);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
border-radius: var(--r-sm);
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.departure-status::before{ content:""; width:5px; height:5px; border-radius:50%; background: rgb(var(--surface-rgb) / 0.75); flex-shrink:0; }
.departure-status.is-urgent{ border-color: transparent; color: var(--on-accent); background: var(--rust); animation: urgentPulse 2.2s ease-in-out infinite; }
.departure-status.is-urgent::before{ background: var(--dark); }
@keyframes urgentPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce){ .departure-status.is-urgent{ animation: none; } }
.departure-body{ margin-top: auto; }
.departure-date{
font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color: rgba(255,255,255,0.72);
text-shadow: 0 1px 6px rgba(0,0,0,0.65);
}
.departure-item h4{
font-family: var(--font-display); font-weight:700; letter-spacing:-.02em;
font-size: clamp(1.05rem,1.4vw,1.25rem); margin-top:.4rem; color:#fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.departure-item .meta{
font-size:.78rem; color: rgba(255,255,255,0.78); margin-top:.4rem;
text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
/* Seats left on this departure. content.js writes the line only when that
departure carries seat numbers, so a card without them looks exactly as it
always did. */
.departure-seats{
margin-top:.45rem; font-size:.76rem; color: rgba(255,255,255,0.82);
text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.departure-seats.is-low{ color: var(--rust-soft); font-weight:600; }
.departure-seats.is-out{
font-size:.68rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
color: rgba(255,255,255,0.6);
}
.departure-item .amount{
font-family: var(--font-display); font-weight:700; color: var(--rust-soft);
font-size:1.05rem; margin-top:.7rem;
text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.departure-cta{ margin-top:.9rem; width:100%; justify-content:center; }
/* Departed / closed — dim the photo, mute the copy, disable the action */
.departure-item.is-closed .card-art img{ filter: grayscale(0.55) brightness(0.6); }
.departure-item.is-closed:hover .card-art img{ transform:none; }
.departure-item.is-closed .departure-status{ background: rgb(var(--dark-rgb) / 0.55); color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.14); }
.departure-item.is-closed .departure-status::before{ background: rgb(var(--surface-rgb) / 0.4); }
.departure-item.is-closed h4{ color: rgba(255,255,255,0.75); }
.departure-item.is-closed .amount{ color: rgba(255,255,255,0.5); }
/* "Reserve a Seat" — frosted glass rather than a solid fill. These sit at
the foot of a full-bleed photo card, where a block of flat orange reads
like a sticker pasted on top; a blurred dark panel with a hairline edge
sits *in* the image instead, which is the more expensive-looking move.
Hover warms the glass and lights a rust ring around it rather than
flooding it, so the label stays cream throughout — a wipe to a bright
fill would need the text to flip to navy mid-transition, and there's no
moment during that swap where one text colour reads on both halves. */
.departure-cta.im-btn-primary{
background: rgb(var(--dark-rgb) / 0.42);
-webkit-backdrop-filter: blur(10px) saturate(1.15);
backdrop-filter: blur(10px) saturate(1.15);
color: var(--dark-ink);
border-color: rgba(255,255,255,0.32);
text-shadow: 0 1px 6px rgba(0,0,0,0.45);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.26),
0 6px 18px -8px rgba(0,0,0,0.65);
/* .im-btn-primary's own transition list only covers background-POSITION,
which does nothing here — this variant changes background-colour, so
it needs its own list or the hover would snap. */
transition:
background-color .4s cubic-bezier(.22,.8,.32,1),
border-color .35s var(--ease),
box-shadow .35s var(--ease);
}
.departure-cta.im-btn-primary:hover{
background: rgb(var(--accent-rgb) / 0.30);
border-color: var(--rust);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.4),
0 8px 22px -8px rgba(0,0,0,0.6),
0 0 0 1px rgb(var(--accent-rgb) / 0.5),
0 0 30px -2px rgb(var(--accent-rgb) / 0.55);
}
/* Departed — the same glass, dimmed and inert. */
.departure-cta.is-disabled{
pointer-events: none; cursor: not-allowed;
color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.16);
background: rgba(255,255,255,0.05);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: none;
}
.departures-cta{
margin-top: 2rem; padding: 1.8rem clamp(1.5rem,4vw,2.2rem);
border:1px solid var(--line); border-radius: var(--radius); background: var(--surface);
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;
box-shadow: var(--shadow-card);
}
.departures-cta .display-3 .ital{ color: var(--rust); } /* on white */
/* ---------- 17i. Fleet cards ---------- */
.fleet-card{ border:1px solid var(--night-line); background: var(--night-card); color: var(--night-ink); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-card); }
.fleet-card .card-art{ border-radius:0; }
.fleet-tag{ display:inline-flex; margin:1.1rem 1.4rem 0; font-size:.64rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: var(--rust-soft); background: var(--rust-tint); border:1px solid var(--gold-line); padding:.3rem .6rem; border-radius: var(--r-sm); }
.fleet-card h3{ padding: .9rem 1.4rem 0; font-size:1.25rem; color: var(--night-ink); letter-spacing:-.02em; }
.fleet-card p{ padding: .7rem 1.4rem 1.5rem; color: var(--night-muted); font-size:.92rem; }
/* ---------- 17j. Numbered value cards (Why Montera Expeditions) ---------- */
/* Hairline divider between the statement and the six points */
.why-grid-wrap{
margin-top: 3.5rem; padding-top: 3.5rem;
border-top: 1px solid var(--line);
}
.numbered-card{
position: relative;
overflow: hidden;
border-radius: var(--radius);
padding: 1.9rem 1.6rem 1.7rem;
transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
/* oversized ghost numeral — bleeds off the top-right corner, clipped by the card */
.numbered-card-head{
position: absolute; top: -1.1rem; right: .5rem; z-index: 0;
pointer-events: none;
}
.numbered-card .num{
font-family: var(--font-display); font-style: normal; font-weight: 700;
font-size: 4.6rem; line-height: 1; letter-spacing: -.03em;
color: transparent;
-webkit-text-stroke: 1.25px rgb(var(--accent-soft-rgb) / 0.22);
transition: -webkit-text-stroke-color .45s var(--ease);
}
/* rust hairline along the top edge, brightening on hover */
.numbered-card::after{
content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 1;
background: linear-gradient(90deg, var(--rust) 0%, rgb(var(--accent-rgb) / 0) 62%);
opacity: .5; transition: opacity .45s var(--ease);
}
.numbered-card > h4,
.numbered-card > p,
.numbered-card > .chip{ position: relative; z-index: 2; }
.numbered-card h4{
margin-top: .1rem; font-size: 1.15rem;
font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em;
color: var(--ink);
}
.numbered-card p{ margin-top: .6rem; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.numbered-card .chip{
margin-top: 1.15rem;
display: inline-flex; align-items: center; gap: .55rem;
padding: 0; border: 0; border-radius: 0;
font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--rust-soft);
}
.numbered-card .chip::before{
content: ""; width: 18px; height: 1px; background: currentColor; flex-shrink: 0;
}
.numbered-card:hover{
transform: translateY(-4px);
border-color: rgb(var(--accent-rgb) / 0.35);
box-shadow: var(--shadow-lift), 0 0 0 1px rgb(var(--accent-rgb) / 0.12), var(--card-hi);
}
.numbered-card:hover::after{ opacity: 1; }
.numbered-card:hover .num{ -webkit-text-stroke-color: rgb(var(--accent-soft-rgb) / 0.5); }
@media (prefers-reduced-motion: reduce){
.numbered-card{ transition: none; }
.numbered-card:hover{ transform: none; }
}
/* ---------- 17k. Review cards ---------- */
.review-summary{ display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem; font-size:.85rem; color: var(--ink-soft); }
.stars{ color: var(--rust-soft); letter-spacing:.12em; font-size:.95rem; }
.review-card{ border:1px solid var(--night-line); background: var(--night-card); color: var(--night-ink); border-radius: var(--radius); padding:1.6rem; display:flex; flex-direction:column; gap:1rem; }
.review-head{ display:flex; align-items:center; gap:.8rem; }
.review-avatar{ width:38px; height:38px; border-radius:50%; background: var(--rust-tint); color: var(--rust-soft); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; flex-shrink:0; }
.review-name{ font-weight:700; font-size:.92rem; }
.review-source{ font-size:.72rem; color: var(--night-muted); }
.review-card blockquote{ font-size:.92rem; color: var(--night-muted); line-height:1.6; }
.review-tag{ align-self:flex-start; font-size:.64rem; letter-spacing:.03em; text-transform:uppercase; color: var(--night-muted); border:1px solid var(--night-line); padding:.3rem .55rem; border-radius: var(--r-sm); }
/* ---------- 17l. FAQ accordion ---------- */
.faq-list{ display:grid; gap:.8rem; }
.faq-item{ border:1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); overflow:hidden; }
.faq-question{
width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
padding:1.3rem 1.4rem; text-align:left;
font-family: var(--font-display); font-weight:600; font-size:1.02rem; color: var(--ink);
}
.faq-question .plus{ font-size:1.4rem; color: var(--rust-text); transition: transform .3s var(--ease); flex-shrink:0; line-height:1; }
.faq-item.is-open .faq-question .plus{ transform: rotate(45deg); }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.faq-answer p{ padding:0 1.4rem 1.3rem; max-width:65ch; color: var(--ink-soft); }
.faq-cta{
margin-top:2rem; padding: clamp(1.5rem,3vw,2rem);
border:1px solid var(--line); border-radius: var(--radius); background: var(--surface);
display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
box-shadow: var(--shadow-card);
}
.faq-cta .display-3 .ital{ color: var(--rust); } /* on white */
.faq-cta-actions{ display:flex; gap:.8rem; flex-wrap:wrap; }
/* ---------- 17m. Premium card surface (applied over the above) ---------- */
.card-expedition,
.fleet-card,
.departure-item,
.testi,
.review-card,
.numbered-card,
.info-card,
.faq-item,
.faq-cta,
.departures-cta{
background: var(--card);
border: 1px solid var(--card-line);
box-shadow: var(--shadow-card), var(--card-hi);
}
/* .form-success is deliberately NOT in that list — it now sits inside
.enquiry-panel, which is already a card, and nesting one card inside
another muddies the hierarchy. */
/* image inside a card: crisp edge + faint bottom shading */
.card-expedition .card-art,
.fleet-card .card-art,
.exp-row .card-art{
position: relative;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
}
.card-expedition .card-art::after,
.fleet-card .card-art::after,
.exp-row .card-art::after{
content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit;
background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.28) 100%);
}
/* lift the interactive cards together */
.fleet-card,
.departure-item{
transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card-expedition:hover,
.fleet-card:hover,
.departure-item:hover{
transform: translateY(-5px);
border-color: rgb(var(--accent-rgb) / 0.32);
box-shadow: var(--shadow-lift), 0 0 0 1px rgb(var(--accent-rgb) / 0.12), var(--card-hi);
}
.fleet-card:hover .card-art img,
.departure-item:hover .card-art img{ transform: scale(1.05); }
/* ---- Why Montera Expeditions → vertical numbered timeline on phones ----
Replaces the ghost-numeral card grid with a stepper: a rust circle
per point, joined by a dashed rail, content in a panel alongside.
(Placed after the premium-card-surface block so it can strip that
chrome off the row and re-apply it to just the content panel.) */
@media (max-width: 680px){
.why-grid-wrap{ margin-top: 2.75rem; padding-top: 2.75rem; }
.why-grid-wrap .im-cols-3{ display: block; }
.numbered-card{
display: grid;
grid-template-columns: 46px 1fr;
column-gap: 1rem;
align-items: start;
position: relative;
margin: 0 0 1.5rem;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: visible;
transition: none;
}
.numbered-card:last-child{ margin-bottom: 0; }
.numbered-card:hover{ transform: none; box-shadow: none; border-color: transparent; }
/* the numbered circle */
.numbered-card-head{
position: static;
grid-column: 1; grid-row: 1;
width: 46px; height: 46px; margin-top: .25rem;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--rust);
box-shadow: 0 0 0 5px var(--paper-2), 0 8px 18px -8px rgb(var(--accent-rgb) / .7);
z-index: 2;
}
.numbered-card .num{
font-family: var(--font-display); font-weight: 700;
font-size: .95rem; line-height: 1; letter-spacing: .02em;
color: var(--on-accent);
-webkit-text-stroke: 0;
}
/* dashed rail joining the circles */
.numbered-card::before{
content: "";
position: absolute; left: 22px; top: 50px; bottom: -1.5rem; width: 2px;
background: repeating-linear-gradient(180deg,
var(--line-strong) 0 5px, transparent 5px 12px);
z-index: 0;
}
.numbered-card:last-child::before{ display: none; }
/* content panel — reuse the ::after that was the top hairline on desktop */
.numbered-card::after{
content: "";
position: absolute;
inset: 0 0 0 calc(46px + 1rem);
height: auto;
border-radius: var(--r-lg);
background: var(--card);
border: 1px solid var(--card-line);
box-shadow: var(--shadow-card), var(--card-hi);
opacity: 1;
z-index: 0;
}
.numbered-card > h4,
.numbered-card > p{ grid-column: 2; z-index: 1; }
.numbered-card h4{
margin: 0; padding: 1.05rem 1.2rem 0;
font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink);
}
.numbered-card p{
margin: 0; padding: .4rem 1.2rem 1.15rem;
font-size: .88rem; line-height: 1.55; color: var(--ink-soft);
}
.numbered-card .chip{ display: none; }
}
/* ---------- 17n. Featured expeditions — full-bleed overlay cards ---------- */
.card-expedition{
position: relative;
aspect-ratio: 3 / 4;
display: flex; flex-direction: column;
padding: 1.4rem;
gap: 0;
overflow: hidden;
color: #fff;
background: var(--night-card);
}
.card-expedition > *{ position: relative; z-index: 1; }
.card-expedition .card-art{
position: absolute; inset: 0; z-index: 0;
aspect-ratio: auto;
border-radius: 0;
box-shadow: none;
}
.card-expedition .card-art img{
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.1s var(--ease);
}
.card-expedition .card-art::after{
content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 0;
background: linear-gradient(180deg,
rgba(0,0,0,0.34) 0%,
rgba(0,0,0,0) 20%,
rgba(0,0,0,0.18) 36%,
rgb(var(--dark-rgb) / 0.66) 52%,
rgb(var(--dark-rgb) / 0.90) 70%,
rgb(var(--dark-rgb) / 0.97) 100%);
}
.card-expedition:hover .card-art img{ transform: scale(1.06); }
.card-expedition h3,
.card-expedition .card-meta,
.card-expedition .card-price,
.card-expedition .kicker,
.card-expedition .text-link{ text-shadow: 0 1px 10px rgba(0,0,0,0.55); }
/* tags — float top-left, legible over any photo */
.card-expedition .card-tags{ gap: .4rem; }
.card-expedition .tag{
background: rgb(var(--dark-rgb) / 0.5); color: #fff;
border-color: rgba(255,255,255,0.28);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
box-shadow: none;
}
.card-expedition .tag.rust{
background: var(--rust-soft); color: var(--dark); border-color: transparent;
}
/* title block — pinned to the bottom */
.card-expedition h3{
margin-top: auto;
font-size: clamp(1.35rem, 1.7vw, 1.6rem); color: #fff;
letter-spacing: -.02em;
text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.card-expedition .card-meta{ margin-top: .5rem; font-size: .78rem; color: rgba(255,255,255,0.72); }
.card-expedition .card-price{
margin-top: .55rem;
font-family: var(--font-display); font-weight: 700; font-size: 1rem;
letter-spacing: -.01em; color: rgba(255,255,255,0.82);
}
.card-expedition .card-price b{ color: var(--rust-soft); font-weight: 700; }
.card-expedition .kicker{
margin-top: .55rem; font-size: .86rem; line-height: 1.5; color: rgba(255,255,255,0.68);
display: -webkit-box; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.card-expedition .text-link{ margin-top: .9rem; color: #fff; }
.card-expedition .text-link::after{ background: var(--rust-soft); }
.card-expedition:hover .text-link{ color: var(--rust-soft); }
.card-expedition:hover .text-link .arrow{ transform: translateX(4px); }
@media (max-width: 860px){
/* full-width stacked — keep them tall so the copy stays in the dark band */
.card-expedition{ aspect-ratio: 4 / 5; }
.departure-item{ aspect-ratio: 4 / 5; }
}
/* =========================================================
17p. NEXT DEPARTURE PAGE (raid.html)
---------------------------------------------------------
One raid, in full: a photo masthead with a seat counter,
a strip of facts, joining details, what the price covers,
and the packing list. Every class here is used only by
raid.html, so nothing in this block can affect the other
five pages. The phone version lives in css/mobile.css.
========================================================= */
/* ---- the invisible tap-sheet on the homepage hero card ----
Declared here (not in mobile.css) so it is OFF by default and the
phone stylesheet only has to switch it on. Without this rule the
overlay would swallow clicks on the card's real buttons at every width. */
.dep-card-link{ display: none; }
/* ---- masthead ---- */
.raid-hero{
position: relative;
padding-top: 9rem; padding-bottom: clamp(2.5rem, 5vw, 4rem);
color: var(--dark-ink);
background: var(--dark);
overflow: hidden;
isolation: isolate;
}
.raid-hero-bg{ position: absolute; inset: 0; z-index: 0; }
.raid-hero-bg img{ width: 100%; height: 100%; object-fit: cover; }
.raid-hero-bg::after{
content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgb(var(--dark-rgb) / .78) 0%, rgb(var(--dark-rgb) / .72) 40%, rgb(var(--dark-rgb) / .95) 100%),
radial-gradient(75% 60% at 12% 0%, rgb(var(--accent-rgb) / .22), transparent 62%);
}
.raid-hero-inner{ position: relative; z-index: 1; max-width: 46rem; }
.raid-eyebrow{ color: var(--rust-soft); gap: .5rem; }
.raid-crumb{ color: rgb(var(--on-dark-rgb) / .72); }
.raid-crumb:hover{ color: var(--dark-ink); }
/* status pill — the same three states as the departure cards */
.raid-status{
display: inline-flex; align-items: center; gap: .5rem;
margin-top: 1.1rem; padding: .45rem .8rem;
border-radius: 0;
font-family: var(--font-mono);
font-size: .7rem; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
color: var(--pine-soft);
background: var(--pine-tint);
border: 1px solid var(--pine-line);
}
.raid-status::before{
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: currentColor; flex: none;
}
.raid-status.is-urgent{
color: var(--on-accent); background: var(--rust); border-color: transparent;
}
.raid-status.is-urgent::before{ background: var(--on-accent); animation: raidBeacon 2.2s ease-in-out infinite; }
.raid-status.is-running{ color: var(--pine-soft); }
@keyframes raidBeacon{
0%,100%{ box-shadow: 0 0 0 0 rgb(var(--shadow-rgb) / .55); }
60% { box-shadow: 0 0 0 7px rgb(var(--shadow-rgb) / 0); }
}
.raid-hero h1{ margin-top: 1.1rem; color: var(--dark-ink); }
.raid-route{
margin-top: .9rem;
font-size: clamp(1rem, 1.3vw, 1.12rem);
color: rgb(var(--on-dark-rgb) / .78);
}
/* ---- seat counter + bar ----
The bar fills as seats SELL, so a nearly-full bar reads as "almost
gone" — the same direction of travel as the number beside it. */
.raid-seats{
margin-top: 1.8rem; max-width: 30rem;
padding: 1rem 1.15rem;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.13);
border-radius: var(--r-lg);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.raid-seats-head{
display: flex; justify-content: space-between; align-items: baseline;
gap: 1rem; margin-bottom: .6rem;
font-family: var(--font-display); font-weight: 600;
font-size: .92rem; color: var(--dark-ink);
}
.raid-seats-date{ font-family: var(--font-body); font-weight: 400; font-size: .82rem; color: var(--dark-muted); }
.raid-seats-date b{ color: var(--dark-ink); font-weight: 600; }
/* One block per seat. A percentage bar makes the reader do arithmetic and
is ambiguous about direction (is 75% full good or bad?); twelve blocks,
nine of them filled, says "nine riders are in, three places left"
without a single word. */
.raid-seatbar{ display: flex; gap: 4px; height: 10px; }
.raid-seat{
flex: 1 1 0; min-width: 0;
border-radius: var(--r-sm);
background: rgba(255,255,255,.12);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
transition: background .5s var(--ease);
}
.raid-seat.is-taken{
background: linear-gradient(180deg, var(--pine-soft), var(--pine-soft));
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 3px rgba(0,0,0,.3);
}
.raid-seats.is-low .raid-seat.is-taken{
background: linear-gradient(180deg, var(--rust-soft), var(--rust));
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 4px rgb(var(--accent-rgb) / .4);
}
.raid-seats.is-low .raid-seats-head{ color: var(--rust-soft); }
.raid-seat-note{
margin-top: .6rem;
font-size: .78rem; color: var(--dark-muted);
}
.raid-hero-actions{ display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.raid-hero-actions .im-btn-outline{
background-image: linear-gradient(180deg, rgb(var(--on-dark-rgb) / .05), rgb(var(--on-dark-rgb) / .12));
border-color: rgb(var(--on-dark-rgb) / .32);
color: var(--dark-ink);
}
.raid-hero-actions .im-btn-outline:hover{
background-image: linear-gradient(180deg, rgb(var(--on-dark-rgb) / .22), rgb(var(--on-dark-rgb) / .32));
border-color: rgb(var(--on-dark-rgb) / .75);
}
/* "Convoy Underway" — shown instead of a booking button while this raid
is the one on the road */
.im-btn.is-disabled{
pointer-events: none;
background-image: none;
background-color: rgb(var(--ink-rgb) / .10);
color: var(--ink-faint);
border-color: var(--line);
box-shadow: none;
}
/* ---- the six facts ---- */
.raid-facts{
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
}
.raid-fact{ padding: 1.1rem 1.2rem; background: var(--surface); }
.raid-fact .k{
font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-faint);
}
.raid-fact .v{
margin-top: .35rem;
font-family: var(--font-display); font-weight: 700;
font-size: 1.15rem; letter-spacing: -.02em; color: var(--ink);
}
/* ---- intro + joining details ---- */
.raid-split{
display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.raid-intro{ margin-top: 1.1rem; }
.raid-split .kicker{ margin-top: 1rem; }
.raid-split .text-link{ margin-top: 1.4rem; }
.raid-join{
padding: clamp(1.5rem, 3vw, 2rem);
background: var(--card);
border: 1px solid var(--card-line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card), var(--card-hi);
}
.raid-join h3{ font-size: 1.1rem; letter-spacing: -.015em; }
.raid-join-list{ margin: 1.2rem 0 0; display: grid; gap: 1.1rem; }
.raid-join-list dt{
font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--rust-text); font-weight: 700;
}
.raid-join-list dd{
margin: .35rem 0 0;
font-size: .93rem; line-height: 1.6; color: var(--ink-soft);
}
/* ---- what the price covers ---- */
.raid-incl{
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.raid-incl-col h3{
font-size: 1.05rem; letter-spacing: -.015em;
padding-bottom: .8rem; margin-bottom: .3rem;
border-bottom: 2px solid var(--line-strong);
}
.raid-list{ display: grid; gap: .1rem; }
.raid-list li{
position: relative;
padding: .7rem 0 .7rem 1.9rem;
border-bottom: 1px solid var(--line);
font-size: .93rem; line-height: 1.55; color: var(--ink-soft);
}
.raid-list li::before{
position: absolute; left: 0; top: .72rem;
width: 1.15rem; height: 1.15rem;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
font-size: .7rem; font-weight: 700; line-height: 1;
}
.raid-list-yes li::before{
content: "✓"; color: var(--pine); background: var(--pine-tint);
box-shadow: inset 0 0 0 1px var(--pine-line);
}
.raid-list-no li::before{
content: "–"; color: var(--ink-faint); background: rgb(var(--ink-rgb) / .05);
box-shadow: inset 0 0 0 1px var(--line);
}
/* ---- packing list ---- */
.raid-pack{
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.6rem);
}
.raid-pack-group{
padding: clamp(1.2rem, 2.2vw, 1.6rem);
background: var(--card);
border: 1px solid var(--card-line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card), var(--card-hi);
}
.raid-pack-group h3{
font-size: .95rem; letter-spacing: -.01em;
padding-bottom: .7rem; margin-bottom: .8rem;
border-bottom: 1px solid var(--line);
}
.raid-pack-group ul{ display: grid; gap: .6rem; }
.raid-pack-group li{
position: relative; padding-left: 1.4rem;
font-size: .88rem; line-height: 1.5; color: var(--ink-soft);
}
/* an empty checkbox — this is a list you tick off */
.raid-pack-group li::before{
content: ""; position: absolute; left: 0; top: .28rem;
width: .8rem; height: .8rem;
border: 1.5px solid var(--gold-line); border-radius: var(--r-sm);
}
/* ---- things worth knowing ---- */
.raid-notes{
display: grid; gap: .1rem;
border-left: 3px solid var(--rust);
padding-left: clamp(1rem, 2vw, 1.6rem);
}
.raid-notes li{
padding: .55rem 0;
font-size: .95rem; line-height: 1.6; color: var(--ink-soft);
}
/* ---------- Screen-reader-only text ----------
Off-screen for the eye, still announced aloud and still counted in the
page's heading outline. */
.sr-only{
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/* ---------- 18. Scroll reveal ---------- */
[data-reveal]{ transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js [data-reveal]:not(.is-visible){ opacity:0; transform: translateY(18px) scale(.97); }
[data-parallax]{ will-change: transform; }
@media (prefers-reduced-motion: reduce){
.book-trigger{ transition: none; }
.faq-answer{ transition: none; }
}
/* ---------- 19. Responsive ----------
Phone / tablet overrides. These @media (max-width: ...) blocks run
LAST, so a rule here beats the same rule higher up in the file when the
screen is narrow. Roughly: 1024px = small laptop / tablet,
900px = large phone / small tablet, 720px & 560px = phones.
If a layout looks wrong only on a phone, the fix is usually in here. */
@media (max-width: 1024px){
.im-cols-4{ grid-template-columns: repeat(2,1fr); }
.split, .split-reverse{ grid-template-columns: 1fr; }
.stat{ border-left:none; border-top:1px solid var(--dark-line); padding-left:0; }
.stat:first-child{ border-top:none; }
.stats-bar .im-cols-4{ grid-template-columns: repeat(2,1fr); }
.contact-layout{ grid-template-columns:1fr; }
.footer-grid{ grid-template-columns: 1fr 1fr; }
.departures-grid{ grid-template-columns: repeat(2,1fr); }
/* No room to float the departure card — drop it into the hero flow.
It leads the hero now (order:-1), sitting right under the nav so the
next confirmed departure is the first thing a visitor sees. .hero-dep
is a direct child of .hero (no .im-shell), so it carries its own
side gutters or the card bleeds edge-to-edge on phones. */
.hero-dep{
position: static;
order: -1; /* leads the copy (before .hero-inner) */
inset: auto;
width: auto;
max-width: 420px;
/* top:auto pairs with .hero-inner's bottom:auto to centre the
card + headline as one group between the nav and the stats ribbon,
instead of stranding the card at the top over a block of dead space. */
margin: auto var(--gutter) 1.6rem;
align-self: stretch; /* fill the column minus the margins, then cap at max-width */
}
.hero-inner{ order: 0; margin-bottom: auto; padding-bottom: 0; }
.dep-card{ width: 100%; }
/* Flow from the top; the auto margins above do the vertical placement. */
.hero{ justify-content: flex-start; }
/* Hero stats — one horizontal ribbon (never stack), flush to the hero's
foot below the headline and departure card. */
.hero-stats{ order: 2; margin-top: 0; }
.hero-stats .im-cols-4{
display: flex;
grid-template-columns: none;
gap: 0;
}
.hero-stats .stat{
flex: 1 1 0;
min-width: 0;
padding: .85rem .4rem;
text-align: center;
border-left: 1px solid var(--dark-line);
border-top: none;
}
.hero-stats .stat:first-child{ border-left: none; }
.hero-stats .stat .num{
font-size: clamp(1rem, 4.4vw, 1.55rem);
white-space: nowrap;
}
.hero-stats .stat .label{
margin-top: .3rem; max-width: none;
font-size: .58rem; line-height: 1.3; letter-spacing: .01em;
}
}
/* Only truly tiny landscape viewports have no room for it at all */
@media (max-width: 1024px) and (max-height: 430px){
.hero-dep{ display: none; }
}
/* ---- Departure card → a compact "now running" pill on phones ----
Collapses to one line: pulsing green dot � raid name � price.
Keeps the reveal lift, the shine sweep and the dot pulse. */
@media (max-width: 768px){
.hero-dep{
align-self: flex-start; /* hug the content instead of stretching */
max-width: 100%;
margin: auto var(--gutter) 1.4rem; /* keep top:auto — centres the card+headline group */
}
.dep-card{
width: auto; max-width: 100%;
display: flex; align-items: center; gap: .55rem;
padding: .5rem .55rem .5rem .8rem;
border: 1px solid var(--pine-line); /* drop the 3px top accent for a clean pill */
border-radius: 999px;
background: rgb(var(--dark-rgb) / .85);
box-shadow:
0 6px 20px -8px rgba(0,0,0,0.55),
0 0 0 1px rgb(var(--pine-soft-rgb) / 0.12);
}
.dep-card::after{ display: block; } /* keep the diagonal shine sweep */
/* "Few Seats Left" badge → just its pulsing dot */
.dep-card-badge{
flex: none;
margin: 0; padding: 0; gap: 0;
border: 0; background: none;
font-size: 0; /* hide the label, keep the ::before dot + pulse */
}
.dep-card-date,
.dep-card-route,
.dep-card-actions{ display: none; }
.dep-card h3{
flex: 1; min-width: 0; margin: 0;
font-size: .82rem; line-height: 1.2; letter-spacing: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dep-card-meta{
flex: none;
margin: 0; padding: 0; border: 0; gap: 0;
align-items: baseline;
}
.dep-card-meta .kicker{ display: none; } /* drop "From" */
.dep-card-meta .amount{
font-size: .85rem;
padding-left: .55rem;
border-left: 1px solid var(--dark-line); /* hairline before the price */
}
}
/* ---------- Premium horizontal rails (small screens) ---------- */
/* Shared look & feel for the swipeable card rails below: soft edge
fade, momentum + one-card-per-swipe snapping, and — where the
browser supports scroll-driven animations — each card easing up
from a dimmed, slightly-smaller state as it swipes into view. */
@keyframes railCardIn{
from{ opacity: .25; transform: scale(.9); }
to { opacity: 1; transform: scale(1); }
}
@media (max-width: 860px){
.im-cols-3{ grid-template-columns: 1fr; }
.exp-row, .exp-row.reverse{ grid-template-columns: 1fr; direction: ltr; }
.im-field-row{ grid-template-columns: 1fr; }
/* Upcoming Departures → swipeable horizontal rail on phones */
.departures-grid{
display: flex;
grid-template-columns: none;
gap: 1rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-inline: var(--gutter);
margin-inline: calc(var(--gutter) * -1); /* bleed to the screen edges */
padding: .5rem var(--gutter) .7rem; /* top room for card shadows; the scrollbar sits just below */
-webkit-overflow-scrolling: touch;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.departure-item{
flex: 0 0 78%;
max-width: 340px;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.departures-cta, .faq-cta{ flex-direction:column; align-items:flex-start; }
@supports (animation-timeline: view()){
.departures-grid > *{
animation: railCardIn linear both;
animation-timeline: view(inline);
animation-range: entry 0% entry 88%;
will-change: transform, opacity;
}
}
}
/* Featured Raids & The Fleet → swipeable horizontal rails on phones only.
Tablets (601–860px) keep the single-column stack from the rule above. */
@media (max-width: 600px){
.scroll-row{
display: flex;
grid-template-columns: none;
gap: 1rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-inline: var(--gutter);
margin-inline: calc(var(--gutter) * -1); /* bleed to the screen edges */
padding: .5rem var(--gutter) .7rem; /* top room for card shadows; the scrollbar sits just below */
-webkit-overflow-scrolling: touch;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.scroll-row > *{
flex: 0 0 82%;
max-width: 320px;
scroll-snap-align: start;
scroll-snap-stop: always;
}
@supports (animation-timeline: view()){
.scroll-row > *{
animation: railCardIn linear both;
animation-timeline: view(inline);
animation-range: entry 0% entry 88%;
will-change: transform, opacity;
}
}
}
/* Honour reduced-motion: drop the scroll-driven card animation and the
smooth-scroll easing on the rails, keep the layout + edge fade. */
@media (prefers-reduced-motion: reduce){
.departures-grid, .scroll-row{ scroll-behavior: auto; }
.departures-grid > *, .scroll-row > *{ animation: none; will-change: auto; }
}
/* ================= Premium scrollbar for the small-screen rails =================
Two layers:
1. A styled NATIVE scrollbar (slim rust pill on a faint recessed track) —
the universal fallback: Firefox, older Safari, iOS' transient overlay.
2. Where scroll-driven animations exist, that native bar is swapped for a
custom rust puck (.rail-bar) that tracks scroll position exactly and is
always visible — no fade-out, fully styleable, unaffected by the mask. */
.rail{ position: relative; }
.rail-bar{ display: none; } /* only shown when its rail is a live scroller */
@media (max-width: 860px){
.departures-grid,
.scroll-row{
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--rust-soft) rgb(var(--on-dark-rgb) / 0.10);
}
.departures-grid::-webkit-scrollbar,
.scroll-row::-webkit-scrollbar{ height: 7px; }
.departures-grid::-webkit-scrollbar-track,
.scroll-row::-webkit-scrollbar-track{
margin-inline: var(--gutter);
background: rgb(var(--on-dark-rgb) / 0.09);
border-radius: 999px;
}
.departures-grid::-webkit-scrollbar-thumb,
.scroll-row::-webkit-scrollbar-thumb{
border-radius: 999px;
background: linear-gradient(90deg, var(--rust) 0%, var(--rust-soft) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
inset 0 0 0 1px rgba(0,0,0,0.18),
0 1px 3px rgba(0,0,0,0.45);
}
.departures-grid::-webkit-scrollbar-thumb:hover,
.departures-grid::-webkit-scrollbar-thumb:active,
.scroll-row::-webkit-scrollbar-thumb:hover,
.scroll-row::-webkit-scrollbar-thumb:active{
background: linear-gradient(90deg, var(--rust-soft) 0%, var(--accent-pale) 100%);
}
}
@supports (timeline-scope: --a) and (animation-timeline: scroll()){
/* Upcoming Departures rail — a live scroller up to 860px */
@media (max-width: 860px){
.rail:has(> .departures-grid){ timeline-scope: --rail; }
.rail:has(> .departures-grid) > .departures-grid{
scroll-timeline: --rail x;
scrollbar-width: none;
}
.rail:has(> .departures-grid) > .departures-grid::-webkit-scrollbar{ display: none; }
.rail:has(> .departures-grid) > .rail-bar{ display: block; }
}
/* Featured Raids & The Fleet rails — live scrollers only up to 600px */
@media (max-width: 600px){
.rail:has(> .scroll-row){ timeline-scope: --rail; }
.rail:has(> .scroll-row) > .scroll-row{
scroll-timeline: --rail x;
scrollbar-width: none;
}
.rail:has(> .scroll-row) > .scroll-row::-webkit-scrollbar{ display: none; }
.rail:has(> .scroll-row) > .rail-bar{ display: block; }
}
.rail-bar{
height: 6px;
margin: .85rem 0 0;
border-radius: 999px;
position: relative;
overflow: hidden;
background: rgb(var(--on-dark-rgb) / 0.10);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.30), inset 0 1px 2px rgba(0,0,0,0.35);
}
.rail-bar > span{
position: absolute; top: 0; bottom: 0; left: 0;
width: 34%;
border-radius: inherit;
background: linear-gradient(90deg, var(--rust) 0%, var(--rust-soft) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 1px 4px rgba(0,0,0,0.45);
animation: railThumb linear both;
animation-timeline: --rail;
}
@keyframes railThumb{
from{ left: 0; }
to { left: 66%; } /* 100% track − 34% thumb */
}
}
@media (max-width: 720px){
/* Let the headline use the full column and wrap on the
only (2 lines) */
.hero h1{ max-width: none; font-size: clamp(1.95rem, 8.4vw, 2.7rem); line-height: 1.04; }
.hero-sub{ max-width: none; }
.hero{ padding-top: 5.5rem; padding-bottom: 0; } /* card tucks under the nav; stats ribbon flush to the foot */
.hero-inner{ padding-bottom: 0; }
.hero-scroll{ display: none; } /* the stats ribbon now occupies the hero's lower edge */
.im-cols-4{ grid-template-columns: 1fr; }
.footer-grid{ grid-template-columns: 1fr; }
}
/* ---------- 17o. "Currently running" departure pill ----------
Applied to a departure card when js/edit-me.js marks a raid as
currently going (green pill, photo shown at full strength). */
.departure-status.is-running{
border-color: transparent;
color: var(--dark);
background: var(--pine-soft);
}
.departure-status.is-running::before{ background: var(--dark); }
.departure-item.is-running .card-art img{ filter: none; }
/* ---------- 20. "Where are you riding in from?" panel ----------
Built by js/main.js (see the AUDIENCE_PROMPT block there); wording lives
in js/data.js and js/edit-me.js. Shown once per visitor.
The shape of this thing is a deliberate SEO decision, not a style one.
Google demotes pages whose content is covered by a pop-up when someone
arrives from a search result, so this is NOT a centred modal over a dark
backdrop: the wrapper is click-through (pointer-events:none), there is no
scrim, the page keeps scrolling underneath, and the card sits in the
bottom-left corner clear of the floating Book button on the right.
If you restyle it, keep those properties. */
.aud-prompt{
position: fixed;
left: 1.5rem; bottom: 1.5rem;
z-index: 130; /* over the header (100) + mobile tab bar (120), under the lightbox (1000) */
width: min(23rem, calc(100vw - 3rem));
pointer-events: none; /* the PAGE stays usable — see note above */
}
.aud-card{
pointer-events: auto; /* ...but the card itself is clickable */
position: relative;
padding: 1.4rem 1.45rem 1.3rem;
color: var(--dark-ink);
background: linear-gradient(168deg, var(--dark-card), var(--dark));
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--r-lg);
box-shadow:
0 2px 8px rgb(var(--shadow-rgb) / .22),
0 30px 60px -28px rgb(var(--shadow-rgb) / .72);
}
/* the warm corner glow the estimate card and hero use, so this reads as
part of the same family rather than a browser dialog */
.aud-card::before{
content: ""; position: absolute; inset: 0; pointer-events: none;
border-radius: inherit;
background: radial-gradient(120% 70% at 100% 0%, rgb(var(--accent-rgb) / .22), transparent 62%);
}
.aud-card > *{ position: relative; }
.aud-eyebrow{ color: var(--rust-soft); margin-bottom: .55rem; }
.aud-title{
font-family: var(--font-display); font-weight: 700;
font-size: 1.22rem; line-height: 1.15; letter-spacing: -.01em;
color: var(--dark-ink);
}
.aud-body{
margin-top: .55rem;
font-size: .86rem; line-height: 1.55;
color: var(--dark-muted);
}
.aud-actions{
display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
margin-top: 1.05rem;
}
/* Both answers are given DELIBERATELY EQUAL WEIGHT, overriding the primary /
outline styles the buttons carry. This panel is a survey: if one option is
a bright copper button and the other a quiet outline, people click the
bright one, and the India/overseas split in your spreadsheet becomes a
measurement of the button styling rather than of your visitors. Keep them
matched if you restyle this. */
.aud-actions .im-btn,
.aud-actions .im-btn.im-btn-primary,
.aud-actions .im-btn.im-btn-outline{
justify-content: center;
padding-inline: .6rem;
color: var(--dark-ink);
background: rgba(255,255,255,.08);
background-image: none;
border: 1px solid rgba(255,255,255,.22);
text-shadow: none;
box-shadow: none;
transition: background .25s var(--ease), border-color .25s var(--ease);
}
.aud-actions .im-btn:hover,
.aud-actions .im-btn.im-btn-primary:hover,
.aud-actions .im-btn.im-btn-outline:hover{
background: rgba(255,255,255,.16);
border-color: var(--rust-soft);
}
/* the trailing "→" reads as "go somewhere"; these are a choice, not a link */
.aud-actions .im-btn::after{ content: none; }
.aud-later{
display: block; width: 100%;
margin-top: .7rem; padding: .35rem 0;
font-family: var(--font-body); font-size: .74rem;
color: rgb(var(--on-dark-rgb) / .55);
background: none; border: 0; cursor: pointer;
transition: color .25s var(--ease);
}
.aud-later:hover{ color: var(--dark-ink); }
.aud-close{
position: absolute; top: .5rem; right: .55rem;
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
font-size: 1.35rem; line-height: 1;
color: rgb(var(--on-dark-rgb) / .55);
background: none; border: 0; border-radius: 50%;
cursor: pointer;
transition: color .25s var(--ease), background .25s var(--ease);
}
.aud-close:hover{ color: var(--dark-ink); background: rgba(255,255,255,.08); }
/* Slides up into place; .is-open is added one frame after it is un-hidden */
.aud-prompt .aud-card{
opacity: 0; transform: translateY(14px);
transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.aud-prompt.is-open .aud-card{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
.aud-prompt .aud-card{ transition: none; opacity: 1; transform: none; }
}
/* ---------- 20b. ...and the same panel as a GATE ----------
Switched on by AUDIENCE_PROMPT.required (EDIT_VISITOR_PROMPT.mustAnswer).
Everything above turns into a full-screen blocker: dark scrim, card in
the middle, page frozen behind it, no way out but answering.
This is the "intrusive interstitial" Google's mobile guidance names, and
it is a deliberate choice by the site owner, not an oversight — see the
note in js/edit-me.js. One word there turns it back into the corner card. */
html.aud-locked,
html.aud-locked body{
overflow: hidden; /* kills the wheel, the scrollbar and the arrow keys */
overscroll-behavior: none;
/* ...but NOT touch on iOS, where overflow:hidden alone still lets the page
be dragged behind an overlay. touch-action is what actually holds it. */
touch-action: none;
}
.aud-prompt.is-required{
inset: 0; /* overrides the corner placement above */
left: 0; bottom: 0;
width: auto;
display: flex; align-items: center; justify-content: center;
padding: var(--gutter);
pointer-events: auto; /* the whole screen is the blocker now */
touch-action: none; /* absorbs the drag before it reaches the page */
background: rgb(var(--dark-rgb) / .82);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
opacity: 0;
transition: opacity .35s var(--ease);
}
.aud-prompt.is-required.is-open{ opacity: 1; }
.aud-prompt.is-required .aud-card{
width: min(30rem, 100%);
padding: 2rem 2rem 1.9rem;
text-align: center;
border-radius: var(--r-lg);
}
.aud-prompt.is-required .aud-title{ font-size: 1.6rem; }
.aud-prompt.is-required .aud-body{
margin-top: .75rem; font-size: .92rem;
margin-inline: auto; max-width: 26rem;
}
.aud-prompt.is-required .aud-actions{ margin-top: 1.5rem; }
.aud-prompt.is-required .aud-actions .im-btn{ padding-block: .85rem; }
/* The logo, so a gate on a cold first visit still says whose site this is
rather than reading as a browser warning. */
.aud-prompt.is-required .aud-eyebrow{
margin-bottom: .8rem;
letter-spacing: .22em;
}
@media (prefers-reduced-motion: reduce){
.aud-prompt.is-required{ transition: none; }
}