/* =========================================================
COLD DESERT EXPEDITIONS — design system & stylesheet
Expedition Rugged: dark olive/moss canvas, sharp panels,
burnt-rust accent, Oswald condensed + Barlow body.
=========================================================
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 orange accent
--whatsapp ...................... the green
--radius ....................... corner roundness
--font-display / --font-body ... the two fonts
The web fonts (Oswald, Barlow) 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 (floating pill group)
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 WhatsApp 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.
========================================================= */
/* Oswald + Barlow are NOT imported here any more. 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 --radius to change every corner. */
:root{
/* Alabaster / navy / copper — still the logo badge (assets/logo.png), but
the two light shades are deliberately NOT sampled from it any more.
A literal sample of the badge's field gave a peachy cream (#FCF0E4 /
#F5E4D2) and, spread across a whole page, a saturated beige is the
single thing that made this site read as budget rather than premium.
These are the same warmth at roughly a third of the chroma: paper you
would find in a gallery, not a brochure. The navy is untouched — it
was already the strongest part of the identity. */
--paper: #F6F3EC; /* page background */
--paper-2: #EEE9DF; /* alternating section bg */
--surface: #FFFFFF; /* cards / panels */
--surface-2: #E5DFD3; /* insets, image placeholders */
--ink: #0B1830; /* primary text (logo navy) */
--ink-soft: #39465C;
--ink-faint: #5D6675; /* AA on all three light grounds (4.79:1 on the darkest, --paper-2) */
--line: rgba(11,24,48,0.12);
--line-strong:rgba(11,24,48,0.26);
--white: #FFFFFF;
/* "night" bands — card text/surfaces (expedition cards, fleet, testimonials,
reviews, CTA). Despite the name these are now LIGHT — kept as their own
token family because so many card rules key off them; retint here and
every card follows. The hero/stats/booking-calculator/floating departure
card are the one deliberately-dark part of the page and use the
separate --dark-* family below instead, so they don't move with these. */
--night: #FFFFFF;
--night-card: #FFFFFF;
--night-line: rgba(11,24,48,0.10);
--night-ink: #0B1830;
--night-muted:rgba(11,24,48,0.62);
/* Deep navy — the hero photo band, the stats ribbon fused to its foot, the
floating "next departure" card, and the "Build Your Raid" calculator.
Everything else on the page is light; these stay a deliberate dark
island for drama/contrast, the way the reference's photo hero does.
Same navy family as --ink above, just two steps for panel depth. */
--dark: #0B1830;
--dark-card: #14233F;
--dark-line: rgba(255,255,255,0.14);
--dark-ink: #F6F3EC;
--dark-muted: rgba(246,243,236,0.65);
/* Copper accent + WhatsApp green (a brand colour — never retint it).
The old #E46C00 was a safety-cone orange: loud enough to cheapen
everything it touched, and only 2.91:1 on the page. This is the same
hue burnt down a stop — it reads like oxidised copper instead of hi-vis,
and navy text on a --rust button now clears WCAG AA at 4.55:1 (it was
riding on the button being large).
--rust is still only 3.50:1 on paper, so it stays for FILLS, borders,
icons and buttons. For small text use --rust-text, which went from
4.47:1 (just under AA, despite what the old comment here claimed) to
5.47:1 — comfortably passing. */
--rust: #CF6212; /* fills, borders, badges, buttons */
--rust-text: #A34710; /* eyebrows, text links, small labels — AA-safe on cream */
--rust-soft: #E8A063; /* accent highlight, pills, on-dark */
--rust-tint: rgba(207,98,18,0.16);
--gold-line: rgba(207,98,18,0.4);
--whatsapp: #25D366;
--badge: #2A1B0E;
--badge-ink: #E8A063;
/* Pine green — departure-card accent + "seats left" badge */
--pine: #456B3C;
--pine-soft: #8FBF7E;
--pine-tint: rgba(143,191,126,0.15);
--pine-line: rgba(143,191,126,0.45);
--font-display: 'Oswald', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-serif: 'Oswald', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
--container: 1280px;
--gutter: clamp(1.25rem, 4vw, 3.5rem);
--section-pad: clamp(4rem, 9vw, 8rem);
--radius: 6px;
--ease: cubic-bezier(.2,.7,.2,1);
/* Premium card surface — a barely-there top-lit gradient + hairline + highlight */
--card: linear-gradient(176deg, #FFFFFF 0%, #FAF8F3 100%);
--card-line: rgba(11,24,48,0.08);
--card-hi: inset 0 1px 0 rgba(255,255,255,0.7);
--shadow-card:
0 1px 2px rgba(11,24,48,0.07),
0 6px 16px -6px rgba(11,24,48,0.09),
0 22px 48px -22px rgba(11,24,48,0.16);
--shadow-lift:
0 2px 6px rgba(11,24,48,0.10),
0 14px 30px -8px rgba(11,24,48,0.14),
0 44px 88px -30px rgba(11,24,48,0.22);
}
/* ---------- 2. Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; color-scheme: light; }
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-soft); color: #fff; }
::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); }
.eyebrow{
display:flex; align-items:center; gap:.6rem;
font-family: var(--font-body);
font-size: .7rem;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
color: var(--rust-text);
}
.eyebrow::before{ content:none; }
.kicker{ color: var(--ink-soft); font-size:.95rem; line-height:1.6; }
h1, h2, h3{
font-family: var(--font-display);
font-weight:700;
letter-spacing:-.02em;
line-height:1.06;
text-transform:none;
color: var(--ink);
}
.display-1{
font-size: clamp(2.6rem, 6.4vw, 5rem);
line-height:1; font-weight:700; letter-spacing:-.035em;
}
.display-2{ font-size: clamp(1.9rem, 4.2vw, 3rem); line-height:1.05; letter-spacing:-.03em; }
.display-3{
font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height:1.3;
font-weight:600; letter-spacing:-.015em;
}
.lede{
font-family: var(--font-body);
font-size: clamp(1.02rem, 1.4vw, 1.2rem);
color: var(--ink-soft); line-height:1.6;
}
/* Stamped condensed highlight — the signature accent */
.ital{
font-family: var(--font-display);
font-style: normal;
font-weight: 600;
text-transform: uppercase;
/* the light-section default — the dark photo bands each override this
with --rust-soft below, where a paler amber is the readable one */
color: var(--rust);
letter-spacing: .02em;
}
.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 ---------- */
/* Pill-shaped, to match the nav pills / tabs / filter chips used
everywhere else on the redesigned site instead of a boxier button. */
.im-btn{
position: relative; overflow:hidden;
display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
padding: 1.05rem 2.1rem;
font-family: var(--font-display);
font-size:.84rem; font-weight:700;
letter-spacing:.06em; text-transform:uppercase;
border:1px solid transparent;
border-radius: 999px;
transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
white-space:nowrap;
}
.im-btn:focus-visible{ outline: 2px solid var(--rust-soft); outline-offset: 3px; }
/* Primary — the logo's ember, painted as a lit gradient rather than a flat
fill: deep rust at one end, sunlit orange at the other, with a glass
highlight across the top. Hover slides the gradient warm (it's painted
at 200% width) so light appears to travel across the button instead of
the colour simply swapping.
The range is kept entirely in the bright half on purpose. The navy label
needs ≥4.5:1, which it holds from --rust upward (5.4:1) but loses on
darker embers — and staying bright is also what lets this one design
work everywhere, including on top of the dark hero photo, instead of
needing a separate orange variant per dark section. */
.im-btn-primary{
background:
linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 52%),
linear-gradient(115deg, var(--rust) 0%, #DE7A2A 52%, #E8A063 100%);
background-size: 100% 100%, 200% 100%;
background-position: 0% 0%, 0% 50%;
color: var(--dark);
border-color: rgba(11,24,48,0.16);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.5),
inset 0 -2px 4px rgba(0,0,0,0.14),
0 2px 4px rgba(11,24,48,0.2),
0 10px 22px -8px rgba(11,24,48,0.28),
0 8px 26px -8px rgba(207,98,18,0.45);
transition:
background-position .55s cubic-bezier(.22,.8,.32,1),
color .3s var(--ease),
border-color .35s var(--ease),
box-shadow .35s var(--ease);
}
.im-btn-primary:hover{
background-position: 0% 0%, 100% 50%;
border-color: rgba(11,24,48,0.28);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.62),
inset 0 -2px 4px rgba(0,0,0,0.12),
0 3px 6px rgba(11,24,48,0.24),
0 14px 30px -10px rgba(11,24,48,0.32),
0 12px 40px -6px rgba(207,98,18,0.75);
}
/* Outline — the same gradient, just not painted in yet. At rest it's a
navy hairline on the page; hover slides the identical ember sweep in
behind the label, so both variants read as one family. (.hero /
.dep-card override this with their own light-on-dark version since
they sit on the dark hero photo.) */
.im-btn-outline{
/* Two background layers: a half-opaque/half-clear cover sitting on top of
the same ember gradient. Both are painted double-width, so sliding
their background-position wipes the cover off and the fill in,
left-to-right. (The cover needs the hard 50% stop — a layer of flat
colour can't slide, since percentage positioning does nothing when a
layer is exactly as wide as its box.) Done purely with
background-position, which is animatable, so there's no overlay
element that could ever sit on top of the label. */
background-image:
linear-gradient(90deg, var(--paper) 0 50%, transparent 50% 100%),
linear-gradient(115deg, var(--dark) 0%, #3A2140 34%, #6E3410 68%, #A34710 100%);
background-size: 200% 100%, 220% 100%;
background-position: 0% 50%, 0% 50%;
background-repeat: no-repeat;
color: var(--ink);
border-color: var(--line-strong);
box-shadow: 0 1px 2px rgba(11,24,48,0.06);
transition:
background-position .55s cubic-bezier(.22,.8,.32,1),
color .3s var(--ease),
border-color .35s var(--ease),
box-shadow .35s var(--ease);
}
.im-btn-outline:hover{
background-position: 100% 50%, 100% 50%;
color: var(--dark-ink);
border-color: var(--dark);
box-shadow: 0 12px 26px -10px rgba(11,24,48,0.4), 0 0 0 1px rgba(207,98,18,0.22);
}
/* WhatsApp — the same pill, weight and light-sweep-on-hover as the two
variants above, painted in the WhatsApp brand green. Used for the one
button that hands the visitor's whole enquiry over to WhatsApp, so the
colour matches the floating chat button and the phone tab bar and the
destination is obvious before the label is read.
The label is near-black green, not white: white on #25D366 is about
2.4:1 and fails AA, while this clears 9:1 — the same reasoning that
puts a navy label on the orange primary. */
.im-btn-whatsapp{
background:
linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0) 52%),
linear-gradient(115deg, #1EB757 0%, #25D366 52%, #3EE584 100%);
background-size: 100% 100%, 200% 100%;
background-position: 0% 0%, 0% 50%;
color: #062B14;
border-color: rgba(6,43,20,0.18);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.45),
inset 0 -2px 4px rgba(0,0,0,0.14),
0 2px 4px rgba(11,24,48,0.2),
0 10px 22px -8px rgba(11,24,48,0.28),
0 8px 26px -8px rgba(37,211,102,0.5);
transition:
background-position .55s cubic-bezier(.22,.8,.32,1),
border-color .35s var(--ease),
box-shadow .35s var(--ease);
}
.im-btn-whatsapp:hover{
background-position: 0% 0%, 100% 50%;
border-color: rgba(6,43,20,0.30);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.55),
inset 0 -2px 4px rgba(0,0,0,0.12),
0 3px 6px rgba(11,24,48,0.24),
0 14px 30px -10px rgba(11,24,48,0.32),
0 12px 40px -6px rgba(37,211,102,0.75);
}
.im-btn-whatsapp:focus-visible{ outline-color: #0d7a38; }
/* the glyph sitting before the label */
.im-btn .wa{ width:17px; height:17px; fill: currentColor; flex:none; }
.im-btn-small{ padding:.7rem 1.4rem; font-size:.78rem; }
.text-link{
position:relative;
display:inline-flex; align-items:center; gap:.45rem;
font-weight:600; font-size:.9rem;
letter-spacing:0; text-transform:none;
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-text); }
/* ---------- 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: 4px;
}
/* The pill-shaped controls keep the ring on their own curve. */
.im-btn:focus-visible,
.logo:focus-visible,
.site-nav a:focus-visible,
.mosaic-arrow:focus-visible{ border-radius: 999px; }
/* Light ring on the dark floating bar / hero, where rust on navy is muddy */
.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 — floating pill group ---------- */
/* Logo, nav and WhatsApp each draw their own dark capsule and float
centered on a transparent bar — no hamburger/collapsed menu at any
width; the nav pill just scrolls horizontally on narrow phones. */
.site-header{
position: fixed; inset-inline:0; top:0; z-index:100;
display:flex; justify-content:center;
padding: 1rem var(--gutter);
background: transparent;
transition: transform .35s var(--ease);
}
.site-header.nav-hidden{ transform: translateY(-100%); }
.header-inner{ display:flex; align-items:center; gap:.55rem; max-width:100%; min-width:0; }
/* Round emblem + wordmark, in its own capsule — same treatment as the
nav pill and the WhatsApp button beside it, just sized to its content
instead of a fixed circle so "Indian Moto Adventures" has room to sit next to
the mark. */
.logo{
flex:none; height:46px;
display:flex; align-items:center; gap:.55rem;
padding: 0 1rem 0 .35rem;
background: rgba(11,24,48,0.80);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border:1px solid var(--dark-line);
border-radius:999px;
transition: background .3s var(--ease), border-color .3s var(--ease), height .35s var(--ease);
}
/* The nav pill brightens on hover and the WhatsApp button lifts on hover —
the logo had neither, so hovering it read as "dead" next to its two
siblings. This gives it the same brighten-on-hover feedback. */
.logo:hover, .logo:focus-visible{
background: rgba(11,24,48,0.96);
border-color: rgba(246,243,236,.32);
}
.logo-mark{
width:38px; height:38px; border-radius:50%; object-fit:cover;
flex-shrink:0; display:block;
transition: width .35s var(--ease), height .35s var(--ease);
}
.logo-word{
display:block;
font-family: var(--font-display); font-weight:700;
font-size:.82rem; letter-spacing:.05em; text-transform:uppercase;
color: var(--dark-ink);
white-space:nowrap;
}
.site-nav{ min-width:0; }
.site-nav ul{
position:relative;
display:flex; align-items:center; gap:1px;
background: rgba(11,24,48,0.80);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border:1px solid var(--dark-line);
border-radius:999px;
padding:.35rem;
min-width:0; max-width:58vw;
overflow-x:auto; scrollbar-width:none;
transition: background .35s var(--ease);
}
.site-nav ul::-webkit-scrollbar{ display:none; }
.site-nav a{
flex:none; position:relative; z-index:1;
font-family: var(--font-display);
font-size:.76rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
padding:.62rem .95rem; border-radius:999px;
white-space:nowrap; color: var(--dark-muted);
transition: color .25s var(--ease), font-size .35s var(--ease), padding .35s var(--ease);
}
.site-nav a::after{ display:none; }
.site-nav a:hover{ color: var(--dark-ink); }
.site-nav a.is-active{ color: var(--dark-ink); font-weight:700; }
/* Single sliding capsule behind the active/hovered link (JS sets
transform + width to match — see moveTo() in main.js) */
.nav-indicator{
position:absolute; left:0; top:.35rem; bottom:.35rem;
width:0; border-radius:999px;
background: rgba(246,243,236,0.20);
z-index:0; pointer-events:none; opacity:0;
transform: translateX(0);
/* Snappy on purpose — this is a "highlight the thing my cursor is on"
effect, not a decorative reveal. Anything much slower than this reads
as lagging a beat behind the mouse instead of tracking it. */
transition: transform .2s var(--ease), width .2s var(--ease), opacity .2s var(--ease);
}
.nav-indicator.ready{ opacity:1; }
.header-actions{ flex:none; display:flex; align-items:center; }
.topbar-whatsapp{
flex:none; display:flex; align-items:center; justify-content:center;
width:46px; height:46px; border-radius:999px;
background: var(--whatsapp); color:#fff;
box-shadow: 0 4px 14px -4px rgba(37,211,102,.5);
transition: transform .3s var(--ease), box-shadow .3s var(--ease), width .35s var(--ease), height .35s var(--ease);
}
.topbar-whatsapp:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(37,211,102,.6); }
.topbar-whatsapp svg{ width:20px; height:20px; fill:currentColor; transition: width .35s var(--ease), height .35s var(--ease); }
.site-header.is-scrolled .logo,
.site-header.is-scrolled .site-nav ul{ background: rgba(11,24,48,0.94); }
/* Modestly larger floating bar on big screens — same shape, more presence */
@media (min-width: 1200px){
.logo{ height:54px; }
.logo-mark{ width:44px; height:44px; }
.topbar-whatsapp{ width:54px; height:54px; }
.topbar-whatsapp svg{ width:23px; height:23px; }
.site-nav ul{ padding:.4rem; }
.site-nav a{ font-size:.82rem; padding:.72rem 1.15rem; }
}
@media (max-width: 560px){
.site-header{ padding: .5rem .55rem; }
.header-inner{ gap:.35rem; }
.logo{ height:36px; padding-inline: .8rem .2rem; }
.logo-mark{ width:28px; height:28px; }
.logo-word{ font-size:.7rem; }
.topbar-whatsapp{ width:36px; height:36px; }
.topbar-whatsapp svg{ width:16px; height:16px; }
/* Show every link: let the pill take the width it needs, and wrap to a
second row instead of hiding links behind a scroll. */
.site-nav ul{
padding:.25rem .3rem; max-width:none;
flex-wrap:wrap; justify-content:center;
overflow:visible; row-gap:2px;
}
.site-nav a{ padding:.4rem .55rem; font-size:.6rem; letter-spacing:.02em; }
.nav-indicator{ display:none; } /* can't track a wrapped row — active link is shown by colour/weight */
}
@media (max-width: 380px){
.logo{ height:33px; padding-inline: .65rem .18rem; }
.logo-mark{ width:30px; height:30px; }
.logo-word{ font-size:.62rem; }
.topbar-whatsapp{ width:33px; height:33px; }
.site-nav a{ padding:.34rem .44rem; font-size:.56rem; letter-spacing:.01em; }
}
/* 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: linear-gradient(90deg, var(--rust-soft), #F0BC8A);
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%, rgba(21,25,18,.64) 28%, rgba(21,25,18,.2) 56%, rgba(21,25,18,.18) 100%),
linear-gradient(95deg, rgba(21,25,18,.74) 0%, rgba(21,25,18,.04) 58%),
rgba(21,25,18,.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: rgba(21,25,18,0.55);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border:1px solid rgba(240,237,230,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%, rgba(240,237,230,.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: rgba(245,241,227,.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: rgba(245,241,227,.32); color: var(--dark-ink); background: rgba(245,241,227,.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%, #DE7A2A 52%, #E8A063 100%);
background-size: 200% 100%, 200% 100%;
background-position: 0% 50%, 0% 50%;
background-repeat: no-repeat;
color: var(--dark);
border-color: rgba(255,247,232,0.6);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.95),
inset 0 -2px 5px rgba(180,140,80,0.22),
0 2px 6px rgba(11,24,48,0.35),
0 16px 36px -12px rgba(11,24,48,0.6);
}
.hero-actions .im-btn-primary:hover{
background-position: 100% 50%, 100% 50%;
border-color: rgba(255,180,110,0.75);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.55),
inset 0 -2px 5px rgba(120,50,0,0.25),
0 3px 8px rgba(11,24,48,0.35),
0 18px 44px -12px rgba(207,98,18,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: rgba(240,240,240,.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 */
.page-hero{
position:relative; padding-top: 9rem; padding-bottom: 3.5rem;
overflow:hidden;
background:
radial-gradient(60% 90% at 12% 0%, var(--rust-tint), transparent 60%),
var(--paper);
}
.page-hero::before{
content:""; position:absolute; inset:0;
background-image: url('../assets/topo.svg');
background-size: 460px; background-repeat:repeat; opacity:.6; pointer-events:none;
}
.page-hero-inner{ position:relative; z-index:2; }
.page-hero .eyebrow{ margin-bottom:1.1rem; }
.page-hero .display-1 .ital{ color: var(--rust); } /* on --paper */
.page-hero .lede{ margin-top:1rem; max-width:58ch; }
/* ---------- 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: rgba(21,25,18,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: 5px;
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: 3px;
}
.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, rgba(207,98,18,.16), rgba(207,98,18,.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: rgba(240,237,230,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 rgba(207,98,18,.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:50%;
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 rgba(207,98,18,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: 22px;
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: rgba(11,24,48,.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: 14px; background: var(--surface-2);
text-align:left; min-width:0;
box-shadow: 0 1px 2px rgba(11,24,48,.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, rgba(11,24,48,.88) 12%, rgba(11,24,48,.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 rgba(11,24,48,.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:50%;
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:#fff; }
.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: rgba(21,25,18,.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: 8px;
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:999px;
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: 16px;
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%, #A34710 100%);
color: #FBF7F1;
border: 3px solid var(--paper);
box-shadow: 0 12px 28px -10px rgba(207,98,18,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:50%;
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:-.35em; transform:translateX(-50%);
font-family: var(--font-display); font-size:16rem; line-height:1;
color: rgba(207,98,18,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 rgba(207,98,18,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: 14px;
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:50%; 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%, #24344f 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-body); font-weight:600; text-transform:uppercase; letter-spacing:.1em; 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-weight:700; font-size:1.7rem; color: var(--ink); letter-spacing:-.02em; }
/* ---------- 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); }
/* ---------- 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: 5px;
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:5px; 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-text); color: #fff; 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%);
background: radial-gradient(ellipse at center top, rgba(255,255,255,.22), rgba(255,255,255,.05) 34%, transparent 64%);
pointer-events:none;
}
.cta-band .im-shell{ position:relative; z-index:1; }
.cta-band h2{ color: #fff; max-width: 20ch; margin-inline:auto; }
.cta-band .eyebrow{ justify-content:center; color: var(--paper); } /* 5.47:1 on the band */
.cta-band h2 .ital{ color: #F0BC8A; } /* pale amber, 3.54:1 */
.cta-band p{ margin-top:1rem; color: rgba(255,255,255,.92); }
.cta-band .im-btn-primary{
margin-top:2rem;
background: var(--dark); color: var(--dark-ink); border-color: rgba(255,255,255,0.2);
}
.cta-band .im-btn-primary:hover{ background: #fff; color: var(--rust-text); border-color: #fff; filter:none; }
/* ---------- 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: 14px;
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: 999px;
padding: .4rem .8rem;
}
.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-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:.5rem; font-weight:600; }
.form-field input, .form-field select, .form-field textarea{
width:100%; background-color: var(--surface); border:1px solid var(--line);
border-radius: 5px; 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='%23E46C00' 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 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; }
.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 is stored + emailed.
main.js pre-fills the WhatsApp button with a summary of what was sent. */
.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; }
/* WhatsApp-green button variant (used in the success panel + contact rail) */
.im-btn-whatsapp{
background: linear-gradient(180deg, #34d178 0%, var(--whatsapp) 55%, #1fbf5b 100%);
color: #062a12;
border-color: rgba(0,0,0,0.14);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.4),
0 2px 4px rgba(11,24,48,0.2),
0 10px 22px -8px rgba(37,211,102,0.5);
}
.im-btn-whatsapp:hover{
background: linear-gradient(180deg, #3fdc84 0%, #29e070 55%, #22cc63 100%);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.5),
0 3px 6px rgba(11,24,48,0.22),
0 14px 28px -8px rgba(37,211,102,0.62);
}
.im-btn-whatsapp .wa-icon{ width:17px; height:17px; fill:currentColor; }
.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: 14px; 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:10px;
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: 8px; 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 ---------- */
.site-footer{ border-top:1px solid var(--line); background: var(--paper); padding-block: clamp(3rem,6vw,4.5rem) 1.8rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr .8fr .8fr 1.1fr; gap: clamp(2rem,4vw,3rem); padding-bottom: clamp(2.5rem,5vw,3.5rem); }
.footer-logo{ display:block; width:72px; height:72px; border-radius:50%; object-fit:cover; margin-bottom:1rem; }
.footer-brand p{ margin-top:1rem; color: var(--ink-soft); max-width:32ch; font-size:.92rem; }
.footer-col h4{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:1rem; font-weight:600; }
.footer-col ul{ display:grid; gap:.6rem; }
.footer-col a:hover{ color: var(--rust-text); }
.footer-col address{ font-style:normal; color: var(--ink-soft); line-height:1.8; }
.newsletter-form{ display:flex; border:1px solid var(--line); border-radius: 5px; overflow:hidden; margin-top:1rem; background: var(--surface); }
.newsletter-form input{ flex:1; background:none; border:none; padding:.65rem .8rem; font-size:.92rem; }
.newsletter-form input:focus{ outline:none; }
.newsletter-form button{ font-size:1rem; color: var(--dark); background: linear-gradient(180deg, #DE7A2A, var(--rust)); padding:.65rem 1.1rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28); transition: filter .25s var(--ease); }
.newsletter-form button:hover{ filter: brightness(1.05); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top: 1.8rem; border-top:1px solid var(--line); font-size:.8rem; color: var(--ink-faint); }
.footer-social{ display:flex; gap:1.4rem; }
.footer-social a:hover{ color: var(--rust-text); }
/* ---------- 17c. Marquee ticker ---------- */
.marquee{
border-block: 1px solid var(--line);
background: var(--paper);
overflow:hidden;
padding-block: 1rem;
}
.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.2rem;
padding-inline: 1.3rem;
font-family: var(--font-display); font-weight:600;
font-size: 1rem; white-space:nowrap; color: var(--ink-soft);
}
.marquee-item .dot{ width:5px; height:5px; border-radius:50%; background: var(--rust-soft); display:inline-block; }
@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 WhatsApp button (icon only) ---------- */
.book-trigger{
position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 90;
width: 60px; height: 60px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
background: radial-gradient(120% 120% at 32% 22%, #3ee584 0%, #25d366 46%, #1eb757 100%);
color: #fff;
border: none; border-radius: 50%;
box-shadow:
inset 0 2px 4px rgba(255,255,255,0.32),
inset 0 -3px 6px rgba(0,0,0,0.22),
0 6px 14px rgba(0,0,0,0.3),
0 16px 34px -6px rgba(37,211,102,0.5);
text-decoration: none;
opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
transition: opacity .4s var(--ease), transform .35s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.book-trigger .wa-icon{ width: 30px; height: 30px; display: block; fill: currentColor; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }
.book-trigger.is-visible{ opacity: 1; transform: none; pointer-events: auto; }
.book-trigger:hover{ filter: brightness(1.05); transform: translateY(-3px) scale(1.03); box-shadow: inset 0 2px 4px rgba(255,255,255,0.36), inset 0 -3px 6px rgba(0,0,0,0.22), 0 10px 20px rgba(0,0,0,0.34), 0 24px 44px -8px rgba(37,211,102,0.6); }
/* soft pulse ring */
.book-trigger::before{
content: ""; position: absolute; inset: 0; border-radius: 50%;
background: var(--whatsapp); z-index: -1;
animation: waPulse 2.6s var(--ease) infinite;
}
@keyframes waPulse{ 0%{ transform: scale(1); opacity: .5; } 70%{ transform: scale(1.85); opacity: 0; } 100%{ opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .book-trigger::before{ animation: none; display: none; } }
@media (max-width: 480px){
.book-trigger{ right: 1rem; bottom: 1rem; width: 54px; height: 54px; }
.book-trigger .wa-icon{ width: 27px; height: 27px; }
}
/* ---------- 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: rgba(245,241,227,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='%23F2903D' 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 rgba(207,98,18,.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); }
.booking-summary .im-btn-primary{
background: linear-gradient(180deg, #34d178 0%, #25d366 55%, #1fbf5b 100%);
border-color: rgba(0,0,0,0.14); color: #062a12;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -1px 0 rgba(0,0,0,0.14),
0 2px 6px rgba(0,0,0,0.3),
0 10px 22px -8px rgba(37,211,102,0.45);
}
/* Matches the site-wide button behaviour: brighten + glow, no lift. */
.booking-summary .im-btn-primary:hover{
background: linear-gradient(180deg, #3fdc84 0%, #29e070 55%, #22cc63 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.4),
inset 0 -1px 0 rgba(0,0,0,0.14),
0 3px 8px rgba(0,0,0,0.32),
0 14px 30px -8px rgba(37,211,102,0.6);
}
.booking-summary .form-note{ color: rgba(240,240,240,.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: rgba(21,25,18,.72);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border: 1px solid rgba(240,240,240,.14);
border-top: 3px solid var(--pine-soft);
border-radius: 6px;
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 rgba(143,191,126,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%, rgba(143,191,126,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%,
rgba(143,191,126,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 rgba(143,191,126,0.24),
0 0 34px -6px rgba(143,191,126,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: 6px;
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 rgba(207,98,18,0.45); }
60% { box-shadow: 0 0 0 13px rgba(207,98,18,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%, rgba(207,98,18,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; }
/* Floating departure card — a dense pair of actions inside a 278px dark
glass panel. Premium here is restraint: the primary carries the only
fill, the secondary stays glass, so two small buttons sitting shoulder
to shoulder don't compete. Both are sized down by .dep-card-actions.
The explicit `background` on the outline variant matters — without it
the button inherits .im-btn-outline's cream cover layer and renders a cream
label on a cream fill.
Both buttons here light from the BOTTOM UP on hover, rather than sliding
sideways like the rest of the site's buttons. That gives this floating
card its own interaction signature — deliberate, not random — and reads
better at this size, where a horizontal wipe across ~90px is over before
the eye registers it. Each gradient is painted double-HEIGHT and hover
moves background-position down it. */
.dep-card .im-btn-outline{
background-image: linear-gradient(180deg, rgba(245,241,227,0.04) 0%, rgba(245,241,227,0.10) 48%, rgba(245,241,227,0.26) 100%);
background-size: 100% 200%;
background-position: 50% 0%;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-color: rgba(245,241,227,0.28);
color: var(--dark-ink);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
transition:
background-position .45s cubic-bezier(.22,.8,.32,1),
border-color .35s var(--ease),
box-shadow .35s var(--ease);
}
.dep-card .im-btn-outline:hover{
background-position: 50% 100%;
border-color: rgba(245,241,227,0.62);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 6px 16px -8px rgba(0,0,0,0.55);
}
/* Reserve Seat — the one filled element on the card, so it carries the
ember. The gradient runs vertically from rust up to a sunlit orange:
at rest you see its deeper top half, on hover it rises to the bright
half, as though the button catches the light. Kept above --rust at its
darkest so the navy label holds 5.4:1 at every point of the travel. */
.dep-card .im-btn-primary{
background-image:
linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 60%),
linear-gradient(180deg, var(--rust) 0%, #DE7A2A 50%, #E8A063 100%);
background-size: 100% 100%, 100% 200%;
background-position: 50% 0%, 50% 0%;
color: var(--dark);
border-color: rgba(11,24,48,0.22);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.4),
0 6px 16px -6px rgba(207,98,18,0.55);
transition:
background-position .45s cubic-bezier(.22,.8,.32,1),
border-color .35s var(--ease),
box-shadow .35s var(--ease);
}
.dep-card .im-btn-primary:hover{
background-position: 50% 0%, 50% 100%;
border-color: rgba(11,24,48,0.3);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8),
0 1px 3px rgba(0,0,0,0.45),
0 8px 24px -6px rgba(207,98,18,0.9);
}
.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:3px;
}
.dep-card-badge::before{
content:""; width:5px; height:5px; border-radius:50%; background: var(--pine-soft);
box-shadow: 0 0 0 3px rgba(143,191,126,0.22);
animation: depDotPulse 2s ease-in-out infinite;
}
@keyframes depDotPulse{
0%,100%{ box-shadow: 0 0 0 0 rgba(143,191,126,0.4); }
55%{ box-shadow: 0 0 0 6px rgba(143,191,126,0); }
}
.dep-card-date{ font-size:.66rem; letter-spacing:.06em; 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%,
rgba(6,6,6,0.68) 60%,
rgba(6,6,6,0.92) 80%,
rgba(6,6,6,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:#fff;
background: rgba(12,12,12,0.5);
border:1px solid rgba(255,255,255,0.24);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
border-radius:3px;
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.departure-status::before{ content:""; width:5px; height:5px; border-radius:50%; background: rgba(255,255,255,0.75); flex-shrink:0; }
.departure-status.is-urgent{ border-color: transparent; color: var(--dark); background: var(--rust-soft); 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: rgba(12,12,12,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: rgba(255,255,255,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: rgba(12,14,20,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: rgba(207,98,18,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 rgba(207,98,18,0.5),
0 0 30px -2px rgba(207,98,18,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:3px; }
.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 Indian Moto Adventures) ---------- */
/* 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 rgba(232,160,99,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%, rgba(207,98,18,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: rgba(207,98,18,0.35);
box-shadow: var(--shadow-lift), 0 0 0 1px rgba(207,98,18,0.12), var(--card-hi);
}
.numbered-card:hover::after{ opacity: 1; }
.numbered-card:hover .num{ -webkit-text-stroke-color: rgba(232,160,99,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:3px; }
/* ---------- 17l. FAQ accordion ---------- */
.faq-list{ display:grid; gap:.8rem; }
.faq-item{ border:1px solid var(--line); border-radius: 6px; 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: rgba(207,98,18,0.32);
box-shadow: var(--shadow-lift), 0 0 0 1px rgba(207,98,18,0.12), var(--card-hi);
}
.fleet-card:hover .card-art img,
.departure-item:hover .card-art img{ transform: scale(1.05); }
/* ---- Why Indian Moto Adventures → 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 rgba(207,98,18,.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: #fff;
-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: 12px;
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%,
rgba(6,6,6,0.66) 52%,
rgba(6,6,6,0.90) 70%,
rgba(6,6,6,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: rgba(12,12,12,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, rgba(11,24,48,.78) 0%, rgba(11,24,48,.72) 40%, rgba(11,24,48,.95) 100%),
radial-gradient(75% 60% at 12% 0%, rgba(207,98,18,.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: rgba(246,243,236,.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: .4rem .9rem;
border-radius: 999px;
font-family: var(--font-display);
font-size: .74rem; font-weight: 700;
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(--dark); background: var(--rust-soft); border-color: transparent;
}
.raid-status.is-urgent::before{ background: var(--dark); 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 rgba(11,24,48,.55); }
60% { box-shadow: 0 0 0 7px rgba(11,24,48,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: rgba(246,243,236,.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: 14px;
-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: 3px;
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, #C3DDA6, 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, #E8A063, var(--rust));
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 4px rgba(207,98,18,.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, rgba(246,243,236,.05), rgba(246,243,236,.12));
border-color: rgba(246,243,236,.32);
color: var(--dark-ink);
}
.raid-hero-actions .im-btn-outline:hover{
background-image: linear-gradient(180deg, rgba(246,243,236,.22), rgba(246,243,236,.32));
border-color: rgba(246,243,236,.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: rgba(11,24,48,.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: 14px;
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: 14px;
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: #3A5F2A; 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: rgba(11,24,48,.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: 14px;
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: 3px;
}
/* ---- 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);
}
/* ---------- 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: rgba(21,25,18,.85);
box-shadow:
0 6px 20px -8px rgba(0,0,0,0.55),
0 0 0 1px rgba(143,191,126,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) rgba(240,237,230,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: rgba(240,237,230,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%, #F0BC8A 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: rgba(240,237,230,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: #0c2a12;
background: var(--pine-soft);
}
.departure-status.is-running::before{ background: #0c2a12; }
.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 WhatsApp 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: 18px;
box-shadow:
0 2px 8px rgba(11,24,48,.22),
0 30px 60px -28px rgba(11,24,48,.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%, rgba(207,98,18,.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: rgba(246,243,236,.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: rgba(246,243,236,.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: rgba(6,12,24,.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: 22px;
}
.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; }
}