/* Sarisara Home (Rebrand 2026) — the homepage's own stylesheet.
Copied from the Claude Design "Website Rebrand" project, homepage/04-homepage-v2.html
(22 Oct 2026). Tokens (--navy, --primary, --t-*, --space-*, --sh-*, --ease-*) come from
assets/css/sarisara-tokens.css through body.sarisara-ds; this file adds only the page. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #FAFAFA; margin: 0; color: var(--navy);
font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; }
.pg { max-width: 1440px; margin: 0 auto; }
.sl__txt { width: 100%; max-width: 600px; }
.pad { padding-left: 64px; padding-right: 64px; }
@media (max-width: 900px) { .pad { padding-left: 24px; padding-right: 24px; } }
/* ══ NAV ════════════════════════════════════════════════════
THE LEGIBILITY PROBLEM, SOLVED ONCE. The logo and the menu sit on top of a
photograph that changes every few seconds, so they can never depend on what
is behind them. Two rules make it safe for ANY image we will ever use:
1. a fixed scrim — a dark gradient painted over the TOP of every hero,
part of the hero treatment and not part of the photograph;
2. white logo, white menu, always. Never dark-on-light up here.
Then the photograph can be anything and nothing ever disappears. */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 30;
display: flex; align-items: center; gap: 26px; padding-top: 22px; padding-bottom: 22px; }
.nav__logo { display: flex; align-items: center; gap: 11px; margin-right: auto; text-decoration: none; flex: 0 0 auto; } /* never squeezed */
.nav__logo img { width: auto; height: auto; object-fit: contain; }
.nav__logo .nav__mark { width: 36px; height: auto; } /* the butterfly, cut from the Affinity logo file */
.nav__logo .nav__word { height: 15px; width: auto; } /* the wordmark from the same file, never retyped */
.nav a.l { position: relative; font-family: var(--font-label); font-size: var(--t-micro);
color: rgba(255,255,255,.86); text-decoration: none; letter-spacing: .01em;
white-space: nowrap; padding: 8px 0; transition: color .15s; }
.nav a.l:hover { color: #fff; }
@media (max-width: 1279px) { .nav a.l, .nav .drop { display: none; } }
/* the one dropdown — everything a traveller can have in a trip */
/* Everything below sits on WHITE inside a hero built for light-on-dark, so
each rule is scoped .hero .drop__p — otherwise .hero p paints it white on
white and the panel looks half-empty. */
.drop { position: relative; }
.drop > a { display: inline-flex; align-items: center; gap: 6px; }
.drop > a svg { width: 12px !important; height: 12px !important; transition: transform .2s; }
.drop:hover > a svg { transform: rotate(180deg); }
.drop__p { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-6px);
width: 560px; background: #fff; border-radius: 6px; box-shadow: var(--sh-4);
padding: 22px; opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s; }
.drop:hover .drop__p { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.drop__g { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.drop__i { display: flex; align-items: flex-start; gap: 11px; padding: 10px; border-radius: 4px;
text-decoration: none; transition: background-color .14s; }
.drop__i:hover { background: var(--primary-ultra-light); }
.drop__i .ic { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; color: var(--tone); }
.drop__i .ic svg { width: 100%; height: 100%; display: block; }
.drop__i > span:last-child { min-width: 0; }
.drop__i b { display: block; font-size: var(--t-body-sm); font-weight: var(--fw-ui); color: var(--navy); }
.drop__i span { display: block; font-size: var(--t-micro); color: var(--text-tertiary); margin-top: 2px; line-height: 1.45; }
.hero .drop__p p, .drop__f { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
font-size: var(--t-micro); color: var(--text-secondary); line-height: 1.55; }
.hero .drop__p p b, .drop__f b { color: var(--navy); font-weight: var(--fw-strong); }
.nav__burger { display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.34);
border-radius: 999px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
color: #fff; cursor: pointer; align-items: center; justify-content: center; }
.nav__burger svg { width: 18px !important; height: 18px !important; min-width: 18px !important; display: block; stroke: #fff; fill: none; } /* !important: the theme zeroes button svg widths */
.nav__burger svg path { stroke: #fff; }
/* the phone menu (added 22 Oct 2026 — the design drew the button, not the panel) */
@media (max-width: 1279px) {
.nav.open { flex-wrap: wrap; background: rgba(9,9,32,.94); backdrop-filter: blur(14px);
padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.nav.open a.l, .nav.open .drop { display: block; flex: 0 0 100%; order: 10; padding: 13px 0;
border-top: 1px solid rgba(255,255,255,.1); font-size: 15px; letter-spacing: 0; text-transform: none; }
.nav.open .drop > a.l { border-top: 0; padding: 0; display: flex; }
.nav.open .drop__p { position: static; opacity: 1; visibility: visible; transform: none; margin-top: 12px;
box-shadow: none; max-width: none; width: 100%; }
.nav.open .nav__burger { order: 1; }
}
@media (max-width: 1279px) { .nav__burger { display: flex; } .nav { gap: 12px; }
.nav__logo { width: 142px; } }
.nav .cta { font-family: var(--font-label); font-size: 13px; font-weight: var(--fw-ui);
color: var(--navy); background: #fff; padding: 11px 20px; border-radius: 999px;
text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.nav .cta:hover { background: var(--primary); color: #fff; }
/* ══ 01 · HERO — the thumbnail becomes the hero ═════════════
The rail sits bottom-right. On every turn the FIRST thumbnail grows out of
its own position until it fills the screen, the old picture fades away
behind it, and the words rise from below. Then the rail shuffles left and a
new card slides in at the end.
LEGIBILITY. The words never depend on the photograph. Three fixed washes —
top for the menu, left for the text, bottom for the rail — are painted over
every image, so a busy bright mural works as well as a dark sea. */
.hero { position: relative; height: 100svh; min-height: 660px; max-height: 980px;
overflow: hidden; background: var(--navy); }
/* NO KEN BURNS. A slow zoom on the settled slide meant the picture the card
grew into and the picture that replaced it were at two different scales,
so the hero jumped at the hand-over. Every slide now sits at exactly 1. */
.sl { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .55s var(--ease-smooth); } /* v2: soft hand-over */
.sl img { object-position: var(--pos, 50% 50%); }
.sl.on { opacity: 1; }
/* the growing card */
/* no shadow, no blur — the motion does the work */
.hexp { position: absolute; z-index: 4; overflow: hidden; pointer-events: none; }
/* the picture is ALWAYS object-fit:cover inside whatever size the frame is,
so it re-crops as the frame grows and is never stretched or squashed */
/* the clone must crop EXACTLY like the slide it becomes, or the picture
shifts at the hand-over — which is what happened on the only two
slides that needed an override */
.hexp img { width: 100%; height: 100%; object-fit: cover;
object-position: var(--pos, 50% 50%); }
.hexp .ht__c { opacity: 1; transition: opacity .3s var(--ease-smooth); }
.hexp .ht__c { transition: opacity .26s var(--ease-smooth); }
.hexp.go .ht__c { opacity: 0; }
.hero__scrim { position: absolute; inset: 0; z-index: 10; pointer-events: none;
background:
linear-gradient(180deg, rgba(9,9,32,.78) 0%, rgba(9,9,32,.5) 14%, rgba(9,9,32,0) 34%), /* option C, 23 Oct 2026 */
linear-gradient(97deg, rgba(9,9,32,.86) 0%, rgba(9,9,32,.62) 26%, rgba(9,9,32,.24) 48%, rgba(9,9,32,0) 68%),
linear-gradient(0deg, rgba(9,9,32,.80) 0%, rgba(9,9,32,.28) 26%, rgba(9,9,32,0) 50%); }
.hero__in { position: relative; z-index: 20; height: 100%; display: flex; flex-direction: column;
justify-content: flex-end; padding-top: 120px; padding-bottom: 268px; /* was 150: the words sit higher (Chiran, 5 Nov 2026; the search under them was removed the same day) */
align-items: flex-start; }
@media (max-width: 1080px) { .hero__in { padding-bottom: 378px; padding-top: 104px; } } /* was 268 */
@media (max-width: 640px) { .hero__in { padding-bottom: 304px; } /* was 236 */
.hero__row { gap: 18px; }
.hero__act { width: 100%; }
.hero__act .btn { flex: 1 1 auto; min-height: 46px; padding: 0 16px; } }
.sl__txt { display: none; width: 100%; max-width: 600px; }
.sl__txt.on { display: block; }
/* ONE HEIGHT FOR ALL SEVEN SLIDES (5 Nov 2026): every slide's words are laid in the same place and only the
one showing is visible, so the block is always as tall as the tallest slide. The words still end at the
same line above the search, and a hero that grows on a short screen does not change height between slides. */
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; justify-items: start; }
.hero__in > .sl__txt { display: block; grid-area: 1 / 1; align-self: end; visibility: hidden; }
.hero__in > .sl__txt.on { visibility: visible; }
/* 6 Nov 2026: the buttons have a 0.18s "everything" fade, so the old slide's buttons stayed on screen
after its headline had gone. A slide that is leaving takes all its parts away at once. */
.hero__in > .sl__txt:not(.on), .hero__in > .sl__txt:not(.on) * { transition: none !important; }
.sl__txt.on > * { animation: rise .72s var(--ease-smooth) both; }
.sl__txt.on > *:nth-child(1) { animation-delay: .04s; }
.sl__txt.on > *:nth-child(2) { animation-delay: .12s; }
.sl__txt.on > *:nth-child(3) { animation-delay: .20s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero__season { display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-label); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
color: #fff; font-weight: var(--fw-strong); margin-bottom: 18px;
background: rgba(255,255,255,.14); backdrop-filter: blur(8px);
padding: 8px 15px; border-radius: 999px; }
.hero__season i { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); display: block; }
/* the welcome line above the first slide's title: "Your passport says Germany." */
.hero__you { font-family: var(--font-heading); font-weight: var(--fw-strong); color: rgba(255,255,255,.92);
font-size: clamp(18px, 1.7vw, 24px); letter-spacing: -.015em; line-height: 1.25;
margin: 0 0 8px; max-width: 26ch; text-shadow: 0 2px 30px rgba(9,9,32,.42); }
.hero h1 { font-family: var(--font-heading); font-weight: var(--fw-display); color: #fff;
font-size: clamp(40px, 5vw, 64px); line-height: 1.04; letter-spacing: -.038em; /* 64px on a computer (Chiran, 5 Nov 2026; was 58), phone 40px (22 Oct 2026) */
margin: 0 0 18px; max-width: 14ch; text-shadow: 0 2px 40px rgba(9,9,32,.42); } /* 14ch, was 12 (Chiran, 22 Oct 2026: room to breathe) */
/* THE VIOLET STRIPE (Chiran, 22 Oct 2026 — chosen over gold, marker and two-whites; drawn in
the Design System sheet "Homepage — hero colour options", option B). Key words stay full
white; a brand-violet stripe 21% of the letter size sits half behind the bottom of the
letters and half below them (Google Sans baseline = 0.96em down the box, so 0.85em to
1.06em), starting just before the first letter and running a third of a letter past the
last. Painted behind the text; each line of a wrapped title gets its own stripe. */
.hero h1 em { font-style: normal; color: #fff; text-shadow: none;
background: linear-gradient(var(--primary, #7700FF), var(--primary, #7700FF)) no-repeat 0 .85em / 100% .21em;
padding: 0 .3em 0 .1em; margin: 0 -.3em 0 -.1em;
-webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero__row { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero p { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.58; color: rgba(255,255,255,.9);
margin: 0; max-width: 34ch; }
.hero__act { display: flex; align-items: center; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap;
font-family: var(--font-label); font-size: var(--t-body-sm); font-weight: var(--fw-ui);
border-radius: 999px; border: 1px solid transparent; text-decoration: none; cursor: pointer;
min-height: 50px; padding: 0 26px; transition: background-color .16s, color .16s, border-color .16s; }
.btn--v { background: var(--primary); color: #fff; }
.btn--v:hover { background: var(--primary-dark); }
.btn--g { background: rgba(255,255,255,.10); backdrop-filter: blur(8px); color: #fff; border-color: rgba(255,255,255,.4); }
.btn--g:hover { background: #fff; color: var(--navy); border-color: #fff; }
/* ── the rail ── */
/* the rail is deliberately WIDER than the space it has, so the fourth card
runs off the right edge — it says "there is more" without a control */
.hrail { position: absolute; z-index: 22; right: -108px; bottom: 132px;
width: 890px; overflow: visible; }
/* the track slides one card left on every turn, then the used card is moved
to the back with the transition off — an endless belt, no snap at the end */
.hrail__t { display: flex; align-items: flex-end; gap: 14px; }
.hrail__t.slide { transition: transform .62s cubic-bezier(.45,0,.2,1); }
/* on a phone the rail scrolls and snaps, with the next card peeking so it is
obvious there is more. It never sits cut off at the edge by accident. */
@media (max-width: 1080px) {
.hrail { left: 0; right: 0; bottom: 26px; width: auto;
padding: 4px 24px 8px; overflow: hidden; }
.hrail__t { gap: 10px; }
}
.ht { position: relative; flex: 0 0 auto; width: 212px; aspect-ratio: 3/4;
border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--navy);
box-shadow: 0 12px 34px rgba(9,9,32,.4);
transition: transform .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth), opacity .5s; }
.ht:hover { transform: translateY(-7px); box-shadow: 0 20px 44px rgba(9,9,32,.5); }
.ht img { width: 100%; height: 100%; object-fit: cover;
object-position: var(--pos, 50% 50%); }
.ht::after { content: ''; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(9,9,32,.86) 0%, rgba(9,9,32,.18) 44%, rgba(9,9,32,0) 66%); }
.ht__c { position: absolute; left: 15px; right: 12px; bottom: 14px; z-index: 2; }
.ht__c s { display: block; text-decoration: none; font-family: var(--font-label); font-size: 8.5px;
letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.66); margin-bottom: 4px; }
.ht__c b { display: block; font-family: var(--font-label); font-size: var(--t-body-sm);
font-weight: var(--fw-strong); color: #fff; line-height: 1.2; letter-spacing: -.005em; }
.ht.leaving { opacity: 0; transform: scale(.94); }
@media (max-width: 1080px) { .ht { width: 150px; } }
@media (max-width: 640px) { .ht { width: 96px; border-radius: 8px; }
.ht__c s { display: none; } .ht__c b { font-size: 10px; } }
/* ── controls ── */
/* the controls belong to the carousel, so they live inside it: flush with
the first card on the left, and the same 64px page margin on the right
that the counter sits against */
.hctl { position: absolute; z-index: 22; left: 0; right: 172px; top: 100%;
margin-top: 24px; display: flex; align-items: center; gap: 20px; }
@media (max-width: 1080px) { .hctl { display: none; } }
.hbtn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.34);
background: rgba(255,255,255,.06); backdrop-filter: blur(8px); color: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background-color .16s, color .16s, border-color .16s; }
.hbtn:hover { background: #fff; color: var(--navy); border-color: #fff; }
.hbtn svg { width: 17px !important; height: 17px !important; min-width: 17px; flex: 0 0 17px; display: block; }
.sarisara-home-2026 .hbtn { padding: 0 !important; } /* the theme pads every button; here that left 2px for the arrow */
.hprog { flex: 1 1 auto; height: 2px; background: rgba(255,255,255,.25); border-radius: 2px; overflow: hidden; }
.hprog i { display: block; height: 100%; width: 0; background: #fff; }
.hprog i.run { animation: prog 6600ms linear forwards; }
@keyframes prog { from { width: 0 } to { width: 100% } }
.hnum { font-family: var(--font-accent); font-weight: 700; font-size: 30px; color: #fff;
letter-spacing: -.04em; font-variant-numeric: tabular-nums; opacity: .85; }
.hnum s { text-decoration: none; font-size: 13px; opacity: .5; }
/* A short window: the words and the rail need about 780px on a computer. Where the window
is shorter the photo grows downwards (as it already does on phones) instead of the words running
under the menu. Where it fits, the height is exactly what it was. */
@media (min-width: 641px) and (max-height: 979px) {
.hero { height: auto; min-height: max(660px, 100svh); max-height: none; }
.hero__in { height: auto; min-height: max(660px, 100svh); }
}
/* v2: a quiet arrival for each section. The class is added by script, so without script nothing is hidden. */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-smooth), transform .7s var(--ease-smooth); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.rv { opacity: 1; transform: none; transition: none; }
.sl, .sl img, .hexp, .sl__txt.on > * { transition: none !important; animation: none !important; }
}
/* ══ shared section furniture ═══════════════════════════════ */
.sec { padding-top: 116px; padding-bottom: 116px; }
@media (max-width: 900px) { .sec { padding-top: 76px; padding-bottom: 76px; } }
.eyebrow { display: flex; align-items: center; gap: 13px; font-family: var(--font-label); font-size: 10px;
letter-spacing: .2em; text-transform: uppercase; color: var(--text-tertiary);
font-weight: var(--fw-strong); margin: 0 0 26px; }
.eyebrow b { color: var(--primary); font-weight: var(--fw-strong); }
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--border); }
h2.big { font-family: var(--font-heading); font-weight: var(--fw-display); color: var(--navy);
font-size: clamp(28px, 4vw, 54px); line-height: 1.04; letter-spacing: -.036em; margin: 0 0 22px; max-width: 20ch; }
h2.big em { font-style: normal; color: var(--primary); }
.lede { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.64; color: var(--text-secondary); margin: 0; max-width: 52ch; }
/* ══ 02 · THE THREAD ════════════════════════════════════════ */
.thread { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top: 54px; }
.thread figure { margin: 0; position: relative; overflow: hidden; }
.thread figure img { transition: transform .7s cubic-bezier(.25,.1,.25,1); }
.thread figure:hover img { transform: scale(1.035); }
.thread figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px;
background: linear-gradient(180deg, rgba(9,9,32,0), rgba(9,9,32,.74)); color: #fff; }
.thread figcaption b { display: block; font-family: var(--font-label); font-size: var(--t-body-sm);
font-weight: var(--fw-strong); letter-spacing: -.005em; }
.thread figcaption span { display: flex; align-items: center; gap: 7px; margin-top: 5px;
font-family: var(--font-label); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
color: rgba(255,255,255,.76); }
.thread figcaption span i { width: 7px; height: 7px; border-radius: 2px; background: var(--tone); display: block; }
.t-a { grid-column: span 5; aspect-ratio: 4/5; }
.t-b { grid-column: span 7; } /* v2: no fixed shape - it fills the row the tall picture sets, so no gap under it */
.t-c { grid-column: span 4; aspect-ratio: 1; }
.t-d { grid-column: span 4; aspect-ratio: 1; }
.t-e { grid-column: span 4; aspect-ratio: 1; }
@media (max-width: 820px) { .thread figure { grid-column: span 12 !important; aspect-ratio: 3/2 !important; } }
/* ══ 03 · THE LOTUS — brand moment ══════════════════════════ */
.lotus { position: relative; height: 62vh; min-height: 420px; max-height: 620px; overflow: hidden; }
.lotus::after { content: ''; position: absolute; inset: 0; background: rgba(9,9,32,.30); }
.lotus__in { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center; }
.lotus h3 { font-family: var(--font-heading); font-weight: var(--fw-display); color: #fff;
font-size: clamp(26px, 3.6vw, 50px); line-height: 1.1; letter-spacing: -.034em;
margin: 0 0 18px; max-width: 19ch; }
.lotus p { font-size: clamp(14px, 1.2vw, 17px); line-height: 1.62; color: rgba(255,255,255,.9);
max-width: 46ch; margin: 0; }
.lotus .tag { font-family: var(--font-label); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
color: rgba(255,255,255,.7); font-weight: var(--fw-strong); margin: 0 0 22px; }
/* ══ 03 · TRENDING — the page knows what month it is ════════
Chiran, 15 Sep: content must never look stale. A traveller landing in
September and a traveller landing in January should not see the same page.
Everything here is DATA, not decoration — region, months, the reason, and
a live count the platform already knows. */
.yr { display: flex; gap: 0; margin: 34px 0 40px; border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border); overflow-x: auto; }
.yr::-webkit-scrollbar { height: 0; }
.mo { flex: 1 0 auto; min-width: 62px; padding: 13px 4px 14px; border: 0; background: none; cursor: pointer;
font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: var(--text-tertiary); position: relative; transition: color .16s, background-color .16s; white-space: nowrap; }
.mo:hover { color: var(--primary-dark); background: var(--primary-ultra-light); }
.mo.on { color: var(--navy); font-weight: var(--fw-strong); }
.mo.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); }
.mo s { display: block; text-decoration: none; margin-top: 5px; font-size: 9px; letter-spacing: .06em;
color: var(--text-tertiary); font-weight: var(--fw-body); }
.mo.on s { color: var(--primary); }
.rg { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 12px; }
@media (max-width: 980px) { .rg { grid-template-columns: 1fr 1fr; } .rg > a:first-child { grid-column: span 2; } }
@media (max-width: 620px) { .rg { grid-template-columns: 1fr; } .rg > a:first-child { grid-column: span 1; } }
.rgc { position: relative; display: block; overflow: hidden; text-decoration: none; aspect-ratio: 3/4; background: var(--surface-2); }
.rg > a:first-child { aspect-ratio: auto; }
.rgc img { transition: transform .8s cubic-bezier(.25,.1,.25,1); }
.rgc:hover img { transform: scale(1.045); }
.rgc::after { content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(9,9,32,.42) 0%, rgba(9,9,32,0) 38%, rgba(9,9,32,.16) 58%, rgba(9,9,32,.86) 100%); }
.rgc__t { position: absolute; left: 20px; right: 20px; top: 18px; z-index: 2; display: flex; gap: 8px; align-items: center; }
.rgc__pk { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
background: rgba(255,255,255,.16); backdrop-filter: blur(8px);
font-family: var(--font-label); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
color: #fff; font-weight: var(--fw-strong); }
.rgc__pk i { width: 5px; height: 5px; border-radius: 50%; background: var(--success); display: block; }
.rgc__pk.off i { background: var(--warning); }
.rgc__b { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; }
.rgc__b h4 { font-family: var(--font-heading); font-weight: var(--fw-display); color: #fff;
font-size: clamp(20px, 2.1vw, 30px); letter-spacing: -.028em; line-height: 1.06; margin: 0 0 7px; }
.rgc__b p { margin: 0 0 12px; font-size: var(--t-body-sm); line-height: 1.5; color: rgba(255,255,255,.86); max-width: 38ch; }
.rgc__m { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.rgc__m span { font-family: var(--font-label); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
color: rgba(255,255,255,.72); display: inline-flex; align-items: center; gap: 6px; }
.rgc__m span b { color: #fff; font-weight: var(--fw-strong); }
.rgc__m span + span::before { content: ''; width: 3px; height: 3px; border-radius: 50%;
background: rgba(255,255,255,.45); display: block; margin-right: 8px; }
.nowt { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 16px 18px;
border-radius: 4px; background: #EEF9E8; } /* green season, never light yellow (4 Nov 2026) */
.nowt .i { width: 17px; height: 17px; color: #1D5E00; flex: 0 0 auto; margin-top: 1px; }
.nowt p { margin: 0; font-size: var(--t-body-sm); line-height: 1.58; color: #1D5E00; }
.nowt p b { font-weight: var(--fw-strong); }
.src { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; padding-top: 15px;
border-top: 1px solid var(--border); }
.src b { font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: var(--primary); font-weight: var(--fw-strong); flex: 0 0 auto; }
.src span { font-size: var(--t-micro); color: var(--text-tertiary); line-height: 1.55; }
/* ══ 04 · CUSTOMISATION — shown, not described ══════════════
Chiran, 15 Sep: the homepage is for travellers, not partners. The thing a
traveller cannot get from a DMC is the ability to CHANGE the trip. So this
section does not explain customising — it performs it, on a loop. */
.cust { display: grid; grid-template-columns: 1fr 1.08fr; gap: 66px; align-items: center; }
@media (max-width: 980px) { .cust { grid-template-columns: 1fr; gap: 40px; } }
.stage { position: relative; border: 1px solid var(--border); background: #fff; border-radius: 4px;
overflow: hidden; box-shadow: var(--sh-2);
min-height: 366px; display: flex; flex-direction: column; }
.stage__h { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.stage__h b { font-family: var(--font-heading); font-size: var(--t-h4); font-weight: var(--fw-strong);
color: var(--navy); flex: 1 1 auto; letter-spacing: -.014em; }
.stage__h u { text-decoration: none; font-family: var(--font-label); font-size: 10px; letter-spacing: .14em;
text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--fw-strong); }
.stage__tot { font-size: var(--t-body-sm); font-weight: var(--fw-strong); color: var(--navy);
font-variant-numeric: tabular-nums; }
.rw { display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: #fff; position: relative; }
.rw + .rw { border-top: 1px solid var(--border); }
.rw__i { width: 19px; height: 19px; flex: 0 0 auto; color: var(--tone); }
.rw__i svg { width: 100%; height: 100%; display: block; }
.rw__b { flex: 1 1 auto; min-width: 0; }
.rw__b b { display: block; font-size: var(--t-body-sm); font-weight: var(--fw-ui); color: var(--navy); }
.rw__b span { display: block; margin-top: 2px; font-family: var(--font-label); font-size: 10px;
letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.rw__p { font-size: var(--t-body-sm); color: var(--navy); font-variant-numeric: tabular-nums; font-weight: var(--fw-ui); }
/* the three acts, on one 15-second loop */
.rw--swapout { animation: swapout 15s var(--ease-smooth) infinite; }
.rw--swapin { animation: swapin 15s var(--ease-smooth) infinite; }
.rw--adds { animation: adds 15s var(--ease-smooth) infinite; }
@keyframes swapout {
0%,18% { opacity:1; max-height:64px; transform:translateX(0); }
26%,100% { opacity:0; max-height:0; transform:translateX(-26px); padding-top:0; padding-bottom:0; }
}
@keyframes swapin {
0%,22% { opacity:0; max-height:0; transform:translateX(26px); padding-top:0; padding-bottom:0; }
32%,100% { opacity:1; max-height:64px; transform:translateX(0); }
}
@keyframes adds {
0%,52% { opacity:0; max-height:0; transform:translateY(-10px); padding-top:0; padding-bottom:0; }
62%,100% { opacity:1; max-height:64px; transform:translateY(0); }
}
.rw--swapout, .rw--swapin, .rw--adds { overflow: hidden; }
.flash { position: absolute; inset: 0; background: var(--primary-ultra-light); opacity: 0; pointer-events: none; }
.rw--swapin .flash { animation: fl 15s ease-out infinite; }
.rw--adds .flash { animation: fl2 15s ease-out infinite; }
@keyframes fl { 0%,30% { opacity:0 } 34% { opacity:1 } 46%,100% { opacity:0 } }
@keyframes fl2 { 0%,60% { opacity:0 } 64% { opacity:1 } 76%,100% { opacity:0 } }
/* the running total ticks over as things change */
.tot__a { animation: ta 15s steps(1) infinite; }
.tot__b { animation: tb 15s steps(1) infinite; }
.tot__c { animation: tc 15s steps(1) infinite; }
@keyframes ta { 0%,26% { opacity:1 } 27%,100% { opacity:0 } }
@keyframes tb { 0%,26% { opacity:0 } 27%,61% { opacity:1 } 62%,100% { opacity:0 } }
@keyframes tc { 0%,61% { opacity:0 } 62%,100% { opacity:1 } }
.stage__tot { display: inline-flex; align-items: baseline; }
.tot { position: relative; display: inline-block; text-align: right; }
.tot span { position: absolute; right: 0; top: 0; }
.tot i { visibility: hidden; font-style: normal; }
/* the message that starts it */
.msg { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 4;
display: flex; gap: 10px; align-items: flex-end;
animation: msg 15s var(--ease-smooth) infinite; }
@keyframes msg { 0%,4% { opacity:0; transform:translateY(12px) } 9%,22% { opacity:1; transform:translateY(0) }
30%,100% { opacity:0; transform:translateY(-8px) } }
.msg__b { background: var(--navy); color: #fff; border-radius: 12px 12px 12px 3px;
padding: 11px 15px; font-size: var(--t-body-sm); line-height: 1.45; max-width: 74%;
box-shadow: var(--sh-3); }
.msg__b s { display: block; text-decoration: none; font-family: var(--font-label); font-size: 9px;
letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 4px; }
.stage__pad { flex: 1 1 auto; min-height: 96px; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.act { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
background: #fff; border: 1px solid var(--border); font-family: var(--font-label);
font-size: var(--t-micro); color: var(--text-secondary); }
.act i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); display: block; flex: 0 0 auto; }
/* the one money line that stays — stated as a traveller benefit */
.fee { margin-top: 30px; padding: 20px 22px; border-radius: 4px; background: var(--primary-ultra-light); }
.fee b { display: block; font-family: var(--font-heading); font-size: var(--t-h3); font-weight: var(--fw-display);
color: var(--navy); letter-spacing: -.026em; margin-bottom: 8px; }
.fee p { margin: 0; font-size: var(--t-body-sm); line-height: 1.62; color: var(--text-secondary); }
.fee p strong { color: var(--navy); }
/* ══ 05 · THE SEVEN ═════════════════════════════════════════
NO PORTRAITS YET. Cropping landscape scenery into portrait frames and
putting a person's name under it would be a lie, and this page's whole
argument is that we do not lie about who gets paid. Until the real
photographs exist the seven are set in type, in their own colours. */
.seven { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 50px; }
@media (max-width: 1100px) { .seven { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 680px) { .seven { grid-template-columns: repeat(2, 1fr); } }
.prs { position: relative; aspect-ratio: 3/4; background: var(--tint); overflow: hidden;
display: flex; flex-direction: column; justify-content: space-between; padding: 18px 16px;
transition: background-color .3s; }
.prs:hover { background: var(--tone); }
.prs__i { width: 24px; height: 24px; color: var(--tone); transition: color .3s; }
.prs:hover .prs__i { color: #fff; }
.prs__i svg { width: 100%; height: 100%; display: block; }
.prs__n { }
.prs__n b { display: block; font-family: var(--font-heading); font-size: var(--t-h4);
font-weight: var(--fw-display); color: var(--tone); letter-spacing: -.02em;
line-height: 1.12; transition: color .3s; }
.prs:hover .prs__n b { color: #fff; }
.prs__n span { display: block; margin-top: 6px; font-family: var(--font-label); font-size: 10px;
letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary);
transition: color .3s; }
.prs:hover .prs__n span { color: rgba(255,255,255,.72); }
.shoot { margin-top: 20px; display: flex; align-items: baseline; gap: 10px; padding-top: 16px;
border-top: 1px solid var(--border); }
.shoot b { font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: var(--primary); font-weight: var(--fw-strong); flex: 0 0 auto; }
.shoot span { font-size: var(--t-micro); color: var(--text-tertiary); line-height: 1.55; }
/* ══ 05 · THE NETWORK ═══════════════════════════════════════
Seven counters, all visible at once, one lit at a time.
The numeral is solid white, cropped a third by the bottom of the card, and
it RISES on hover to show itself whole. The title sits top-left behind a
white icon chip in the partner's colour — the one piece of colour on the
card, and the thing the eye goes to first.
THE NUMERAL IS SET IN DM SANS, not Google Sans. Its figures are rounder and
more geometric, which is closer to the display numerals Chiran asked for.
Both faces are already licensed and in the design system. A genuinely
distinctive display face would be a new licence and a separate decision. */
.net { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 52px; }
@media (max-width: 1180px) { .net { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .net { grid-template-columns: repeat(2, 1fr); } }
.nc { position: relative; aspect-ratio: 5/8; overflow: hidden; border-radius: 2px;
background: var(--surface-2); cursor: pointer; }
.nc img { position: absolute; inset: 0; z-index: 1; filter: saturate(.92) contrast(1.02);
transform: scale(1.02);
transition: filter .6s var(--ease-smooth), transform .9s var(--ease-smooth); }
.nc::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(180deg, rgba(9,9,32,.66) 0%, rgba(9,9,32,.26) 30%, rgba(9,9,32,0) 56%),
linear-gradient(0deg, rgba(9,9,32,.52) 0%, rgba(9,9,32,0) 34%); }
/* ── the numeral ── */
.nc__n {
position: absolute; z-index: 3; right: 8px; bottom: -.20em; pointer-events: none;
font-family: var(--font-accent);
font-weight: 700; font-size: 80px; line-height: .76;
letter-spacing: -.055em; font-variant-numeric: tabular-nums lining-nums;
color: #fff; opacity: .3;
transition: transform .55s var(--ease-smooth), opacity .4s var(--ease-smooth),
text-shadow .4s var(--ease-smooth);
}
.nc.on .nc__n, .nc:hover .nc__n {
transform: translateY(-22%);
opacity: 1;
text-shadow: 0 4px 30px rgba(9,9,32,.55);
}
/* ── the title, top left, with the partner icon in front of it ── */
.nc__b { position: absolute; z-index: 5; left: 12px; right: 10px; top: 12px;
display: flex; align-items: flex-start; gap: 9px; }
.nc__ic { flex: 0 0 auto; width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center; color: #fff;
transition: transform .45s var(--ease-smooth); }
.nc__ic svg { width: 20px !important; height: 20px !important; display: block; }
.nc.on .nc__ic, .nc:hover .nc__ic { transform: scale(1.08); }
.nc__t { min-width: 0; padding-top: 1px; }
.nc__t b { display: block; font-family: var(--font-label); font-size: var(--t-body-sm);
font-weight: var(--fw-strong); color: #fff; letter-spacing: -.012em; line-height: 1.16;
white-space: nowrap; }
.nc__t span { display: block; margin-top: 3px; font-family: var(--font-label); font-size: 8.5px;
letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7);
white-space: nowrap; }
.nc.on img, .nc:hover img { filter: saturate(1.02) contrast(1.02) brightness(.86); transform: scale(1.06); }
.net__f { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.net__f b { font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: var(--primary); font-weight: var(--fw-strong); flex: 0 0 auto; }
.net__f span { font-size: var(--t-micro); color: var(--text-tertiary); line-height: 1.55; }
/* ══ 06 · THE TRIP ══════════════════════════════════════════ */
.trip { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 960px) { .trip { grid-template-columns: 1fr; gap: 40px; } }
.day { border: 1px solid var(--border); background: #fff; border-radius: 3px; overflow: hidden; }
.day__h { display: flex; align-items: center; gap: 14px; padding: 17px 20px; border-bottom: 1px solid var(--border); }
.day__n { font-family: var(--font-label); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
color: var(--text-tertiary); font-weight: var(--fw-strong); }
.day__h b { font-family: var(--font-heading); font-size: var(--t-h4); font-weight: var(--fw-strong);
color: var(--navy); flex: 1 1 auto; letter-spacing: -.014em; }
.day__h s { text-decoration: none; font-size: var(--t-body-sm); font-weight: var(--fw-strong);
color: var(--navy); font-variant-numeric: tabular-nums; }
.svc { display: flex; align-items: center; gap: 13px; padding: 14px 20px; }
.svc + .svc { border-top: 1px solid var(--border); }
.svc__t { width: 42px; height: 42px; flex: 0 0 auto; overflow: hidden; background: var(--surface-2); border-radius: 2px; }
.svc__b { flex: 1 1 auto; min-width: 0; }
.svc__b b { display: block; font-size: var(--t-body-sm); font-weight: var(--fw-ui); color: var(--navy); }
.svc__b span { display: flex; align-items: center; gap: 7px; margin-top: 3px;
font-family: var(--font-label); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-tertiary); }
.svc__b span i { width: 7px; height: 7px; border-radius: 2px; background: var(--tone); display: block; }
.svc s { text-decoration: none; font-size: var(--t-body-sm); color: var(--navy);
font-variant-numeric: tabular-nums; font-weight: var(--fw-ui); }
/* ══ 07 · THE CLOSE ═════════════════════════════════════════ */
.close { background: var(--navy); color: #fff; }
.close__in { padding-top: 116px; padding-bottom: 96px; }
.close h2 { font-family: var(--font-heading); font-weight: var(--fw-display); color: #fff;
font-size: clamp(28px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -.038em;
margin: 0 0 20px; max-width: 17ch; }
.close p { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: rgba(255,255,255,.72);
max-width: 48ch; margin: 0 0 40px; }
.ask { display: flex; gap: 12px; max-width: 620px; flex-wrap: wrap; }
.ask input { flex: 1 1 320px; min-height: 58px; background: rgba(255,255,255,.07); color: #fff;
border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 0 26px;
font-family: var(--font-body); font-size: var(--t-body); outline: none; transition: border-color .16s, background-color .16s; }
.ask input::placeholder { color: rgba(255,255,255,.44); }
.ask input:focus { border-color: var(--primary-mid); background: rgba(255,255,255,.11); }
.ask .btn { min-height: 58px; }
/* ══ THE FOOTER (Chiran, 22 Oct 2026; Design System "Footer — proposal for every page") ══ */
.ftr { padding-bottom: 8px; font-family: var(--font-label); color: #fff; }
.ftr a { color: inherit; text-decoration: none; }
.ftr__news { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); flex-wrap: wrap; }
.ftr__news b { display: block; font-family: var(--font-heading); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.ftr__news span { display: block; font-size: 13px; color: rgba(255,255,255,.64); margin-top: 4px; }
.ftr__form { flex: 0 1 560px; min-width: 0; }
.ftr__main { display: grid; grid-template-columns: minmax(240px, 1.1fr) 3fr; gap: 56px; padding: 48px 0 40px; }
.ftr__logo { display: inline-flex; align-items: center; gap: 11px; }
.ftr__logo .mk { width: 36px !important; height: auto !important; } .ftr__logo .wm { height: 15px !important; width: auto !important; }
.ftr p.ftr__slogan { max-width: none; font-family: var(--font-heading); font-size: 17px; font-weight: 600; margin: 20px 0 6px; letter-spacing: -.01em; color: #fff; }
.ftr p.ftr__promise { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.64); margin: 0 0 22px; max-width: 30ch; }
.ftr__socs { display: flex; gap: 10px; flex-wrap: wrap; }
.ftr__soc { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); display: grid; place-items: center; color: rgba(255,255,255,.86) !important; transition: background-color .15s, border-color .15s; }
.ftr__soc:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.ftr__soc svg { width: 18px !important; height: 18px !important; display: block; }
.ftr__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ftr__col h4 { margin: 0 0 14px; font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ftr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ftr__col a { font-size: 13px; color: rgba(255,255,255,.86) !important; transition: color .15s; }
.ftr__col a:hover { color: #fff !important; }
.ftr__contact { display: flex; gap: 12px; flex-wrap: wrap; padding: 0 0 28px; }
.ftr__contact a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.ftr__contact a:hover { background: rgba(255,255,255,.1); }
.ftr__contact svg { width: 18px !important; height: 18px !important; color: #C9A5FF; }
.ftr__contact em { font-style: normal; color: rgba(255,255,255,.6); font-size: 12px; }
.ftr__base { display: grid; grid-template-columns: 1fr auto; gap: 14px 24px; align-items: center; padding: 22px 0 28px; border-top: 1px solid rgba(255,255,255,.12); }
.ftr__pay { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ftr__pay .lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-right: 4px; }
.ftr__pay img { display: block; height: 32px !important; width: auto !important; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.ftr__pay .sep { width: 1px; height: 20px; background: rgba(255,255,255,.18); margin: 0 4px; }
.ftr__pay .chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); font-size: 12px; color: rgba(255,255,255,.86); }
.ftr__pay .chip svg { width: 16px !important; height: 16px !important; }
.ftr p.ftr__legal { max-width: none; line-height: 1.6; margin: 0; font-size: 11px; color: rgba(255,255,255,.46); }
.ftr p.ftr__value { max-width: none; margin: 0; justify-self: end; font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: #C9A5FF; }
/* the newsletter form is FluentForm #3, restyled to the footer: fields in one row, violet pill */
.ftr__form .fluentform, .ftr__form form { margin: 0 !important; }
.ftr__form .ff-el-group { margin: 0 !important; }
.ftr__form fieldset { display: block; margin: 0; padding: 0; border: 0; min-width: 0; }
/* FluentForm's own 3 columns: name · email · button, kept on one line */
.ftr__form .ff-column-container { display: flex !important; gap: 10px; align-items: flex-start; flex-wrap: nowrap; margin: 0 !important; }
.ftr__form .ff-column-container > .ff-t-cell { padding: 0 !important; width: auto !important; flex: 1 1 0; min-width: 0; }
.ftr__form .ff-column-container > .ff-t-column-3 { flex: 0 0 auto; min-width: max-content; }
.ftr__form .ff_submit_btn_wrapper { width: auto !important; }
.ftr__form .ff-name-field-wrapper .ff-t-container { display: block !important; margin: 0 !important; }
.ftr__form .ff-name-field-wrapper .ff-t-cell { padding: 0 !important; width: 100% !important; }
.ftr__form .ff-el-input--label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ftr__form input.ff-el-form-control { height: 46px !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.22) !important; background: rgba(255,255,255,.07) !important; color: #fff !important; padding: 0 20px !important; font: 400 14px var(--font-body) !important; box-shadow: none !important; }
.ftr__form input.ff-el-form-control::placeholder { color: rgba(255,255,255,.46) !important; }
.ftr__form input.ff-el-form-control:focus { border-color: var(--primary-mid, #A866FF) !important; }
.ftr__form .ff_submit_btn_wrapper { flex: 0 0 auto; }
.ftr__form .ff-btn-submit { width: auto !important; min-width: max-content !important; white-space: nowrap; height: 46px !important; padding: 0 24px !important; border-radius: 999px !important; border: 0 !important; background: var(--primary) !important; color: #fff !important; font: 500 13px var(--font-label) !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; }
.ftr__form .ff-btn-submit:hover { background: var(--primary-dark) !important; }
.ftr__form .ff-message-success, .ftr__form .text-danger, .ftr__form .error { color: #fff !important; font-size: 13px; background: transparent !important; border: 0 !important; padding: 6px 0 0 !important; box-shadow: none !important; }
@media (max-width: 1080px) {
.ftr__main { grid-template-columns: minmax(0, 1fr); gap: 34px; } /* minmax: a long word may never push the phone page sideways (6 Nov 2026) */
}
@media (max-width: 700px) {
.ftr__news { flex-direction: column; align-items: stretch; }
.ftr__form { flex: 1 1 auto; }
.ftr__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 18px; }
.ftr__contact { flex-direction: column; }
.ftr__contact a { justify-content: flex-start; }
.ftr__base { grid-template-columns: 1fr; }
.ftr p.ftr__value { justify-self: start; }
.ftr__form .ff-column-container { flex-wrap: wrap; }
.ftr__form .ff-column-container > .ff-t-cell { flex: 1 1 140px; }
.ftr__form .ff-column-container > .ff-t-column-3 { flex: 1 1 100%; }
.ftr__form .ff-btn-submit { width: 100% !important; }
}
/* ═══ THEME DEFENCE (22 Oct 2026) — the Traveler theme styles bare .btn, button, a:hover and img.
Measured on the live preview: hero buttons came out dark grey, hover went bootstrap blue,
the month buttons had line-height 0 so the region names sat on the month names. ═══ */
.sarisara-home-2026 a:hover { text-decoration: none !important; background-color: transparent; }
.sarisara-home-2026 .btn { width: auto !important; height: auto !important; line-height: 1.2 !important; border-radius: 999px !important;
padding: 0 26px !important; min-height: 50px; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important;
box-shadow: none !important; }
.sarisara-home-2026 .btn--v, .sarisara-home-2026 .btn--v:hover { color: #fff !important; }
.sarisara-home-2026 .btn--v { background: var(--primary) !important; border-color: var(--primary) !important; }
.sarisara-home-2026 .btn--v:hover { background: var(--primary-dark) !important; }
/* the two hero buttons (Chiran, 22 Oct 2026): white, black text, purple on hover */
.sarisara-home-2026 .hero .btn, .sarisara-home-2026 .hero .btn--v, .sarisara-home-2026 .hero .btn--g {
background: #fff !important; color: var(--navy) !important; border: 1px solid #fff !important; backdrop-filter: none; }
.sarisara-home-2026 .hero .btn:hover, .sarisara-home-2026 .hero .btn--v:hover, .sarisara-home-2026 .hero .btn--g:hover {
background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.sarisara-home-2026 .mo { display: flex !important; flex-direction: column; align-items: center; line-height: 1.25 !important; height: auto !important; }
.sarisara-home-2026 .mo s { display: block !important; height: auto !important; line-height: 1.3 !important; text-decoration: none !important; }
/* the collage: the photo never sizes its box — the box has its own shape, the photo fills it (cover, never stretched) */
.sarisara-home-2026 .thread figure img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.sarisara-home-2026 .t-b { height: 100%; min-height: 0; }
.sarisara-home-2026 .sl img, .sarisara-home-2026 .rgc img, .sarisara-home-2026 .nc img, .sarisara-home-2026 .ht img { height: 100% !important; width: 100% !important; object-fit: cover; max-width: none; }
/* ═══ THE SITE'S OWN MENU inside the bar ═══ */
.nav__menu { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav__menu li { position: relative; margin: 0; padding: 0; }
/* Sentence case, Google Sans, 13px (Chiran, 22 Oct 2026: sentence case, always Google Sans; every link and button 13px).
The menu labels in WordPress are Title Case, so the case is set here: lowercase, first letter up. */
.nav__menu > li > a { position: relative; display: inline-block; font-family: var(--font-label); font-size: 13px; font-weight: var(--fw-ui);
letter-spacing: 0; text-transform: lowercase; color: rgba(255,255,255,.86) !important; text-decoration: none; white-space: nowrap; padding: 8px 0; transition: color .15s; }
.nav__menu > li > a::first-letter { text-transform: uppercase; }
.nav__menu > li > a:hover, .nav__menu > li.current-menu-item > a { color: #fff !important; }
.nav__menu .sub-menu { position: absolute; left: -16px; top: 100%; min-width: 230px; margin: 0; padding: 10px; list-style: none; background: #fff; border-radius: 14px;
box-shadow: var(--sh-4); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s; z-index: 40; }
.nav__menu li:not(.has-mega):hover > .sub-menu, .nav__menu li:not(.has-mega):focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu .sub-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: var(--t-body-sm); color: var(--navy) !important; text-decoration: none; }
.nav__menu .sub-menu a:hover { background: var(--primary-ultra-light); color: var(--primary-dark) !important; }
@media (max-width: 1279px) {
.nav__menu { display: none; }
.nav.open .nav__menu { display: block; flex: 0 0 100%; order: 10; }
.nav.open .nav__menu > li > a { display: block; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 15px; letter-spacing: 0; text-transform: lowercase; }
.nav.open .nav__menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(255,255,255,.06); padding: 4px 10px 8px; margin: 0 0 10px; }
.nav.open .nav__menu .sub-menu a { color: rgba(255,255,255,.86) !important; }
}
/* ═══ TRENDING — the site's own cards, in the design's section rhythm ═══ */
.trend .trend__row + .trend__row { margin-top: 44px; }
.trend .trend__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 40px 0 18px; }
.trend .trend__head h3 { margin: 0; font-size: var(--t-h3); font-weight: var(--fw-strong); letter-spacing: -.01em; }
.trend .trend__head a { font-family: var(--font-label); font-size: var(--t-body-sm); font-weight: var(--fw-ui); color: var(--primary) !important; text-decoration: none; }
.trend .trend__head a:hover { text-decoration: underline !important; }
/* the first hero button is the brand itself (Chiran, 22 Oct 2026): violet, white text; the second stays white */
.sarisara-home-2026 .hero .btn--brand { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.sarisara-home-2026 .hero .btn--brand:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; color: #fff !important; }
/* ═══ TRENDING — the listing pages' own tabbed carousel, in the design's rhythm ═══ */
.trend .sarea--tabbed { margin-top: 34px; }
.trend .sarea-explore-head { margin-bottom: 0; }
.trend .sarea-explore-head > div:first-child { display: none; } /* the heading is the section's own; the arrows stay */
.trend .sarea-explore-head { justify-content: flex-end; }
.trend .sarea-tabs { margin: -46px 0 22px; } /* tabs on the same line as the arrows */
.trend .sarea .sarea-tab { font-family: var(--font-label); }
.trend .trend__all { display: flex; gap: 22px; margin: 18px 0 0; font-family: var(--font-label); font-size: var(--t-body-sm); font-weight: var(--fw-ui); }
.trend .trend__all a { color: var(--primary) !important; text-decoration: none; }
.trend .trend__all a:hover { text-decoration: underline !important; }
@media (max-width: 767px) { .trend .sarea-tabs { margin-top: 0; } .trend .sarea-explore-head { justify-content: flex-start; } }
/* ═══ THE MENU: a down arrow on every link that has children; the Start your trip button is the brand ═══ */
.nav__menu > li.menu-item-has-children > a { padding-right: 16px; }
.nav__menu > li.menu-item-has-children > a::after { content: ""; position: absolute; right: 0; top: 50%; width: 11px; height: 11px; margin-top: -5px;
background: no-repeat center / 11px 11px url("data:image/svg+xml;utf8,");
opacity: .8; transition: transform .18s; }
.nav__menu > li.menu-item-has-children:hover > a::after { transform: rotate(180deg); }
.sarisara-home-2026 .nav .cta { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.sarisara-home-2026 .nav .cta:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }
/* "Become a Sarisarian" moves on the homepage too (Chiran, 10 Nov 2026). The homepage does not load sarisara-chrome.css,
so the bar's button stayed a plain pill here. Same animation as everywhere else: light round the edge, a band of light
sweeping across, a violet glow; faster on hover; still for reduced motion. */
@property --ss-apply-a { syntax: ''; inherits: false; initial-value: 0deg; }
body.sarisara-home-2026 .nav a.cta.ss-apply-btn {
position: relative; overflow: hidden; isolation: isolate;
border: 2px solid transparent !important; color: #fff !important; white-space: nowrap;
background: linear-gradient(135deg, #7700FF, #6A00E6) padding-box,
conic-gradient(from var(--ss-apply-a), #7700FF 0deg, #B57BFF 40deg, #FFFFFF 90deg, #B57BFF 140deg, #7700FF 190deg, #7700FF 360deg) border-box !important;
box-shadow: 0 6px 20px -6px rgba(119,0,255,.65), 0 0 0 4px rgba(119,0,255,.10) !important;
animation: ss-apply-edge 2.6s linear infinite;
}
body.sarisara-home-2026 .nav a.cta.ss-apply-btn::before {
content: ""; display: block; position: absolute; z-index: -1; top: -20%; left: 0; width: 60%; height: 140%;
background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,.26) 50%, rgba(255,255,255,.06) 70%, rgba(255,255,255,0) 100%);
transform: translateX(-120%) skewX(-18deg); animation: ss-apply-wave 2.6s ease-in-out infinite; pointer-events: none;
}
body.sarisara-home-2026 .nav a.cta.ss-apply-btn:hover, body.sarisara-home-2026 .nav a.cta.ss-apply-btn:focus-visible {
background: linear-gradient(135deg, #6600DB, #5A00C2) padding-box,
conic-gradient(from var(--ss-apply-a), #6600DB 0deg, #B57BFF 40deg, #FFFFFF 90deg, #B57BFF 140deg, #6600DB 190deg, #6600DB 360deg) border-box !important;
box-shadow: 0 10px 24px -8px rgba(119,0,255,.75), 0 0 0 5px rgba(119,0,255,.14) !important;
animation-duration: 1.4s;
}
@keyframes ss-apply-edge { to { --ss-apply-a: 360deg; } }
@keyframes ss-apply-wave { 0% { transform: translateX(-120%) skewX(-18deg); } 60%, 100% { transform: translateX(220%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { body.sarisara-home-2026 .nav a.cta.ss-apply-btn, body.sarisara-home-2026 .nav a.cta.ss-apply-btn::before { animation: none; } }
/* ═══ THE MEGA PANEL — one shape for Stays, Trips and Experiences (Untitled UI references; Chiran 22 Oct 2026):
right-aligned under the bar, icon and title on one row, a light card on the right with a small primary button.
Values from the design system: card radius 14, border #E5E5E5, surface-2 #F5F5F5, shadow level 4, .btn primary sm. ═══ */
/* ══ HEADER TOOLS — Become a partner · currency · bell · profile (Chiran, 22 Oct 2026) ══
White on the hero, Google Sans, 11px like the menu. The currency and the signed-in menu are
the theme's bootstrap dropdowns (.show is toggled by bootstrap.bundle, already on the page);
the panels are restyled here to the design system: white, 12px corner, hairline, soft shadow. */
/* Bootstrap's own .nav rule allows wrapping; signed in, the wider tools then dropped to a second
row on the left (Chiran's screenshot, 22 Oct 2026). The bar stays one row; the open phone menu
(.nav.open) still wraps. */
.sarisara-home-2026 .nav:not(.open) { flex-wrap: nowrap; }
/* The bar runs the full width of the screen (Chiran, 22 Oct 2026): the profile picture sits at the
right edge (64px in), not at the edge of the 1440px page box. The logo keeps its place, lined up
with the hero text, so on a wide screen the space opens between the logo and the menu. */
@media (min-width: 901px) {
.sarisara-home-2026 .nav { max-width: none; padding-right: 64px; padding-left: max(64px, calc(50% - 656px)); }
}
.nav__tools { display: flex; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 1px solid rgba(255,255,255,.24); } /* the line: your settings, not places to go */
.nav__partner { font-family: var(--font-label); font-size: 13px; font-weight: var(--fw-ui); color: rgba(255,255,255,.86) !important; text-decoration: none; white-space: nowrap; padding: 8px 0; transition: color .15s; }
.nav__partner:hover { color: #fff !important; }
.nav__tools li { position: relative; margin: 0; padding: 0; }
.nav__tools a { font-family: var(--font-label); font-size: 13px; font-weight: var(--fw-ui); letter-spacing: .01em; color: rgba(255,255,255,.86) !important; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; padding: 8px 0; transition: color .15s; }
.nav__tools a:hover { color: #fff !important; }
.nav__tools .dropdown-toggle::after { display: none; } /* bootstrap's own caret: off */
.nav__tools .dropdown-currency > a .fa, .nav__tools .dropdown-user-dashboard > a .fa { display: inline-block; width: 11px; height: 11px; font-size: 0; }
.nav__tools .dropdown-currency > a .fa::before, .nav__tools .dropdown-user-dashboard > a .fa::before { content: ""; display: block; width: 11px; height: 11px;
background: no-repeat center / 11px 11px url("data:image/svg+xml;utf8,"); }
.nav__tools .dropdown-menu { position: absolute; right: 0; left: auto; top: 100%; min-width: 150px; margin: 6px 0 0; padding: 8px; list-style: none; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--sh-3); display: none; z-index: 40; }
.nav__tools .dropdown-menu.show { display: block; }
.nav__tools .dropdown-menu li { margin: 0; }
.nav__tools .dropdown-menu a { display: block; padding: 8px 12px; border-radius: 8px; font-size: var(--t-body-sm); color: var(--navy) !important; }
.nav__tools .dropdown-menu a:hover { background: var(--primary-ultra-light); color: var(--primary-dark) !important; }
.nav__tools .dropdown-menu .dropdown-divider { margin: 6px 0; border: 0; border-top: 1px solid var(--border); }
.nav__tools .nav__user { width: 44px; height: 44px; justify-content: center; padding: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.34); }
.nav__tools .nav__user:hover { background: rgba(255,255,255,.12); }
.nav__tools .nav__user svg { width: 17px !important; height: 17px !important; display: block; }
.nav__tools .dropdown-user-dashboard { display: flex; align-items: center; }
/* the profile circle = the bell's circle: 44px (Chiran, 22 Oct 2026). The picture fills it. */
.nav__tools .nav__user--me { overflow: hidden; border: 0; }
.nav__tools .nav__user--me img { width: 44px !important; height: 44px !important; border-radius: 999px; object-fit: cover; display: block; margin: 0 !important; }
.nav__tools .dropdown-menu .nav__hi { padding: 8px 12px 10px; margin: 0 0 6px !important; border-bottom: 1px solid var(--border); font-family: var(--font-label); font-size: var(--t-body-sm); font-weight: var(--fw-strong); color: var(--navy); white-space: nowrap; }
.nav__tools #sarisara-notif-bell { flex: 0 0 auto; }
.nav__tools .dropdown-currency.d-none { display: list-item !important; } /* the theme hides it on tiny screens; the open menu decides that here */
@media (min-width: 1280px) and (max-width: 1439px) {
.nav, .nav__menu { gap: 14px; }
.nav__tools { padding-left: 14px; gap: 12px; }
}
@media (min-width: 1280px) and (max-width: 1365px) { /* signed in, a traveller can carry 3 circles here */
.nav, .nav__menu { gap: 11px; }
.nav__tools { padding-left: 12px; gap: 10px; }
}
@media (max-width: 1279px) {
.nav__partner { display: none; }
.nav.open .nav__partner { display: block; flex: 0 0 100%; order: 10; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 15px; }
.nav__tools { display: none; }
.nav.open .nav__tools { display: flex; flex-wrap: wrap; gap: 14px 22px; flex: 0 0 100%; order: 11; padding: 14px 0 4px; border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
.nav.open .nav__tools a { font-size: 14px; }
/* THE BELL STAYS ON A PHONE (Chiran, 25 Oct 2026): a signed-in traveller or partner sees new
messages without opening the menu. Only the bell shows in the closed bar; the rest of the
tools stay inside the menu as before. */
.nav:not(.open) .nav__tools { display: flex; align-items: center; gap: 0; padding: 0; margin-left: auto; border-left: 0; }
.nav:not(.open) .nav__tools > *:not(#sarisara-notif-bell) { display: none; }
}
.nav__menu > li.has-mega { position: static; }
.nav__menu > li.has-mega > .sub-menu.mega-wrap { position: absolute; left: auto; right: 28px; top: 100%; transform: translateY(6px);
width: min(1040px, calc(100vw - 56px)); min-width: 0; margin: 0; padding: 6px 0 0; background: transparent; box-shadow: none; border-radius: 0; z-index: 40;
opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility 0s .18s; }
.nav__menu > li.has-mega.is-open > .sub-menu.mega-wrap, .nav__menu > li.has-mega:focus-within > .sub-menu.mega-wrap { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
.nav__menu > li.has-mega:hover > .sub-menu.mega-wrap { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 900px) { .nav__menu > li.has-mega > .sub-menu.mega-wrap { right: 16px; width: min(1040px, calc(100vw - 32px)); } }
.nav__menu .mega { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; gap: 12px; padding: 14px; background: #fff; border-radius: var(--r-card, 14px); border: 1px solid var(--border); box-shadow: var(--sh-4); color: var(--navy); }
.nav__menu .mega__col { display: flex; flex-direction: column; gap: 0; padding-top: 2px; }
.nav__menu .mega__h { margin: 0 0 4px 12px; font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.nav__menu .mm-row { display: block; padding: 8px 12px 9px; border-radius: 12px; text-decoration: none; color: var(--navy) !important; transition: background-color .14s; }
.nav__menu .mm-row:hover { background: var(--primary-ultra-light); }
.nav__menu .mm-top { display: flex; align-items: center; gap: 10px; }
.nav__menu .mm-ico { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; color: var(--primary); } /* no box, no border: just the icon in purple (Chiran, 22 Oct 2026) */
.nav__menu .mm-ico svg { width: 18px !important; height: 18px !important; display: block; }
.nav__menu .mm-top b { font-size: var(--t-body-sm); font-weight: var(--fw-strong); letter-spacing: -.005em; line-height: 1.3; }
.nav__menu .mm-row small { display: block; margin: 2px 0 0 34px; font-size: var(--t-micro); color: var(--text-secondary); line-height: 1.45; }
.nav__menu .mega__feature { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); text-decoration: none; color: var(--navy) !important; }
.nav__menu .mega__kicker { display: block; font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.nav__menu .mega__feature b { display: block; font-size: 14px; font-weight: var(--fw-strong); letter-spacing: -.005em; line-height: 1.3; margin-bottom: 6px; }
.nav__menu .mega__feature small { display: block; font-size: var(--t-micro); color: var(--text-secondary); line-height: 1.5; margin-bottom: 12px; }
.nav__menu .mega__img { display: block; width: 100%; aspect-ratio: 2 / 1; border-radius: 10px; overflow: hidden; background: var(--border); margin-bottom: 12px; }
.nav__menu .mega__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav__menu .mega__btn { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: var(--primary); color: #fff; font-family: var(--font-label); font-size: 12px; font-weight: var(--fw-strong); line-height: 1.2; transition: background-color .15s; }
.nav__menu .mega__feature:hover .mega__btn { background: var(--primary-dark); }
@media (max-width: 1279px) {
.nav__menu > li.has-mega { position: relative; }
.nav.open .nav__menu > li.has-mega > .sub-menu.mega-wrap { position: static; transform: none; width: auto; padding: 0 0 10px; opacity: 1; visibility: visible; }
.nav.open .nav__menu .mega { grid-template-columns: 1fr; padding: 12px; background: rgba(255,255,255,.06); box-shadow: none; border: 0; }
.nav.open .nav__menu .mega__h, .nav.open .nav__menu .mm-top b, .nav.open .nav__menu .mm-row small, .nav.open .nav__menu .mega__feature b, .nav.open .nav__menu .mega__feature small { color: #fff; }
.nav.open .nav__menu .mm-ico { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.nav.open .nav__menu .mega__feature { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); }
.nav__menu > li.menu-item-has-children > a::after { display: none; }
}
/* ═══ TRENDING: the hero's own chevrons on the arrows, and the "All …" link right under them ═══ */
.trend .sarea-arrows--ico { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: center; gap: 8px 10px; }
.trend .sarea .sarea-arrows--ico .sarea-arrow { width: 44px; height: 44px; padding: 0 !important; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--navy); display: grid; place-items: center; font-size: 0; }
.trend .sarea .sarea-arrows--ico .sarea-arrow svg { width: 17px !important; height: 17px !important; display: block; }
.trend .sarea .sarea-arrows--ico .sarea-arrow:hover { border-color: var(--primary); color: var(--primary); }
.trend .sarea-see { grid-column: 1 / -1; justify-self: end; font-family: var(--font-label); font-size: var(--t-body-sm); font-weight: var(--fw-ui); color: var(--primary) !important; text-decoration: none; }
.trend .sarea-see:hover { text-decoration: underline !important; }
.trend .sarea-tabs { margin: -84px 0 74px; max-width: calc(100% - 180px); }
@media (max-width: 767px) { .trend .sarea-tabs { margin-top: 0; max-width: none; } }
.trend .sarea-explore-head { overflow: visible; position: relative; z-index: 2; pointer-events: none; }
.trend .sarea-explore-head .sarea-arrows, .trend .sarea-explore-head .sarea-arrows * { pointer-events: auto; }
.trend .sarea-see { display: inline-block; margin-top: 2px; white-space: nowrap; }
/* one gap between sections (Chiran, 22 Oct 2026): the theme gives every paragraph a bottom margin, which added 16px under a section whose last line is a paragraph */
.sarisara-home-2026 .sec > p:last-child, .sarisara-home-2026 .sec > :last-child { margin-bottom: 0 !important; }
/* ═══ PHONE FIXES (Chiran, 22 Oct 2026, looked at on his phone) ═══════════════════════════
1. The welcome line above the first title was 14px: another hero rule out-ranked it.
2. Trending: a 94px hole under the text, "All trips" hanging under the arrows and touching
the tabs, the three tabs on two lines, and empty space under the cards. On a phone the
order is now: tabs (one sliding row) → "All trips" left + arrows right → the cards. */
.hero p.hero__you { font-size: clamp(18px, 1.7vw, 24px); }
@media (max-width: 767px) {
.trend .sarea { display: flex; flex-direction: column; margin-top: 22px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
/* all three tabs visible at once (Chiran, 22 Oct 2026): equal thirds, short names */
.trend .sarea-tabs { order: 1; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px !important; padding: 0; max-width: none !important; }
.trend .sarea-tabs .sarea-tab { justify-content: center; text-align: center; white-space: nowrap; padding-left: 8px !important; padding-right: 8px !important; min-width: 0; }
.trend .sarea-tab .sarea-tab-l { display: none; }
.trend .sarea-tab .sarea-tab-s { display: inline; }
.trend .sarea-explore-head { order: 2; margin: 0 0 14px !important; }
.trend .sarea-arrows--ico { display: flex !important; align-items: center; gap: 10px; width: 100%; }
.trend .sarea-arrows--ico .sarea-see { order: -1; margin: 0 auto 0 0 !important; justify-self: auto; grid-column: auto; }
.trend .sarea-pane { order: 3; }
.trend .sarea-owl { padding-bottom: 0 !important; }
}
/* PHONE MENU (Chiran, 22 Oct 2026): the open menu fills the screen and scrolls on its own; the
three big sections start closed and open one at a time with a tap; no big picture inside. */
@media (max-width: 1279px) {
html.nav-locked, html.nav-locked body { overflow: hidden !important; }
.sarisara-home-2026 .nav.open { position: fixed; inset: 0; z-index: 60; overflow-y: auto; -webkit-overflow-scrolling: touch;
align-content: flex-start; background: rgba(9,9,32,.98); padding-bottom: 40px; }
.nav.open .nav__menu > li.has-mega > a { display: flex !important; align-items: center; justify-content: space-between; }
.nav.open .nav__menu > li.has-mega > a::after { content: ""; display: block !important; width: 14px; height: 14px; flex: 0 0 auto; margin-left: 12px; transition: transform .2s;
background: no-repeat center / 14px 14px url("data:image/svg+xml;utf8,"); }
.nav.open .nav__menu > li.has-mega.is-sub > a::after { transform: rotate(180deg); }
.nav.open .nav__menu > li.has-mega > .sub-menu.mega-wrap { display: none !important; }
.nav.open .nav__menu > li.has-mega.is-sub > .sub-menu.mega-wrap { display: block !important; }
.nav.open .nav__menu .mega__img { display: none; }
}
@media (max-width: 1279px) { .nav.open .nav__menu > li.has-mega > a { text-transform: none !important; } } /* flex links lose ::first-letter; these labels are one word */
/* Tab short names: shown on phones only (the shared block prints both when a page gives one). */
.sarea-tab .sarea-tab-s { display: none; }
/* THE LOGO on the computer (Chiran, 22 Oct 2026): butterfly 36 → 54px wide, wordmark 15 → 18px
tall, a little more room between them, both centred on one line. Phones keep the smaller logo. */
@media (min-width: 1280px) {
.sarisara-home-2026 .nav__logo { gap: 14px; }
.sarisara-home-2026 .nav__logo .nav__mark { width: 64px !important; } /* Chiran: 64, 22 Oct 2026 */
.sarisara-home-2026 .nav__logo .nav__word { height: 18px !important; }
}
/* THE VIOLET STRIPE on phones (Chiran, 22 Oct 2026): thicker, still half behind the letters and
half below. Computer: .85em to 1.06em. Phone: .82em to 1.10em, the same middle line. */
@media (max-width: 767px) {
.hero h1 em { background-position: 0 .82em !important; background-size: 100% .28em !important; }
}
/* 1280–1365 wide, signed in with three circles: the full-size logo pushed the picture 14px past the
edge. In that range only, butterfly 46px and wordmark 16px. 1366 and wider keep 54 / 18. */
@media (min-width: 1280px) and (max-width: 1365px) {
.sarisara-home-2026 .nav__logo { gap: 12px; }
.sarisara-home-2026 .nav__logo .nav__mark { width: 46px !important; }
.sarisara-home-2026 .nav__logo .nav__word { height: 16px !important; }
}
/* the smallest phones (320–360): the three tabs still fit */
@media (max-width: 360px) {
.trend .sarea-tabs { gap: 6px; }
.trend .sarea-tabs .sarea-tab { font-size: 12px !important; padding-left: 4px !important; padding-right: 4px !important; }
}
/* THE BAR 20px LOWER (Chiran, 22 Oct 2026): logo and menu sat close to the top edge.
Top padding 22 → 42px on every screen; the open phone menu keeps its own top. */
.sarisara-home-2026 .nav:not(.open) { padding-top: 42px; }
/* With the bar 20px lower, the first words of the hero must start below it on phones and tablets
(measured: bar ends at 106px). On short phones the slide text grows the photo downwards instead of
pushing up under the bar. */
@media (max-width: 1080px) { .hero__in { padding-top: 128px; } }
@media (max-width: 640px) {
.hero { height: auto; min-height: max(660px, 100svh); max-height: none; }
.hero__in { height: auto; min-height: max(660px, 100svh); }
}
/* A traveller with payments waiting carries three circles. With the 64px butterfly that row ran
45px past the edge at 1440 wide; up to 1599 wide the gaps tighten for them only. */
@media (min-width: 1440px) and (max-width: 1599px) {
.sarisara-home-2026 .nav:has(#sarisara-pending-pill), .sarisara-home-2026 .nav:has(#sarisara-pending-pill) .nav__menu { gap: 14px; }
}
/* THE MENU BUTTON (Chiran, 22 Oct 2026): it jumped 20px up when the menu opened and had no close
sign. It now stays exactly where it was, top right, and shows the close icon while open. */
.nav__burger .nb { display: grid; place-items: center; }
.nav__burger .nb svg { width: 18px !important; height: 18px !important; min-width: 18px !important; stroke: #fff; }
.nav__burger .nb--close, .nav.open .nav__burger .nb--open { display: none; }
.nav.open .nav__burger .nb--close { display: grid; }
@media (max-width: 1279px) { .sarisara-home-2026 .nav.open { padding-top: 42px; } }
/* The button is pinned to the top-right corner while the menu is open, so scrolling the menu
never moves it; the bar keeps an empty space where it sat, so nothing else shifts. */
@media (max-width: 1279px) {
.nav.open .nav__burger { position: fixed; top: 42px; right: 64px; z-index: 70; background: rgba(9,9,32,.9); }
.nav.open .cta { margin-right: 54px; }
}
@media (max-width: 900px) { .nav.open .nav__burger { right: 24px; } }
/* the smallest phones: logo + "Start your trip" + menu button do not fit on one line; the hero
carries the same button just below, so the bar keeps logo + menu only */
@media (max-width: 360px) { .sarisara-home-2026 .nav .cta { display: none; } }
@media (max-width: 1279px) { .sarisara-home-2026 .nav.open { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* a blur makes the bar the frame for "fixed", so the pinned button scrolled away */
@media (max-width: 1279px) { .sarisara-home-2026 .nav.open { background: #090920 !important; } } /* solid: the hero showed through once the blur went */
/* The closing button: white with violet text (Chiran, 22 Oct 2026). */
.sarisara-home-2026 .close .btn--w { background: #fff !important; color: var(--primary) !important; border: 1px solid #fff !important; min-height: 54px; padding: 0 30px !important; font-weight: 600 !important; }
.sarisara-home-2026 .close .btn--w:hover { background: var(--primary-ultra-light, #F5EEFF) !important; color: var(--primary-dark) !important; }
/* THE PHONE BAR, open or closed, never moves (Chiran, 22 Oct 2026). Measured at 375 wide: the
wordmark ended 4px from "Start your trip", and with the menu open the row was 13px too wide,
so the button dropped under the logo and the logo jumped up 7px. Up to 400 wide: wordmark 14px
(butterfly unchanged), button 14px side padding, the logo keeps the bar's 42px height. */
@media (max-width: 1279px) {
.sarisara-home-2026 .nav__logo { width: auto; min-height: 42px; flex-shrink: 0; }
.sarisara-home-2026 .nav .cta, .sarisara-home-2026 .nav__burger { flex-shrink: 0; }
}
@media (max-width: 400px) {
.sarisara-home-2026 .nav__logo { gap: 10px; }
.sarisara-home-2026 .nav__logo .nav__word { height: 14px; }
.sarisara-home-2026 .nav .cta { padding-left: 14px !important; padding-right: 14px !important; }
}
.sarisara-home-2026 .close .btn--w { font-size: 15px !important; }
/* THE MENU 14px (Chiran, 23 Oct 2026 morning): menu links, "Become a partner" and "Start your trip";
the currency stays 13px. Same rule as sarisara-chrome.css for the inner pages. */
@media (min-width: 1280px) {
.sarisara-home-2026 .nav__menu > li > a, .sarisara-home-2026 .nav__partner, .sarisara-home-2026 .nav .cta { font-size: 14px !important; }
}
/* MENU ON BRIGHT PHOTOS — option C (Chiran, 23 Oct 2026). A soft dark glow behind every menu word and the
logo, with the deeper top shade in .hero__scrim, so white links stay readable on a white sky. */
.nav:not(.open) a.l, .nav:not(.open) .nav__menu > li > a, .nav:not(.open) .nav__partner,
.nav:not(.open) .dropdown-currency > a { text-shadow: 0 1px 2px rgba(9,9,32,.55), 0 0 14px rgba(9,9,32,.55); }
.nav:not(.open) .nav__logo img { filter: drop-shadow(0 1px 6px rgba(9,9,32,.5)); }
/* the picture on the profile button (Chiran, 24 Oct 2026): never blank — photo, initials, or the Sarisara mark */
.nav__tools .nav__user--me { border: 2px solid rgba(255,255,255,.7); }
.nav__tools .ss-me { width: 100%; height: 100%; border-radius: 999px; display: grid; place-items: center; overflow: hidden; }
.nav__tools .ss-me img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 999px; display: block; margin: 0 !important; }
.nav__tools .ss-me--brand { background: #7700FF; }
.nav__tools .ss-me--brand img { width: 58% !important; height: 58% !important; object-fit: contain; border-radius: 0; }
.nav__tools .ss-me--initials { background: #7700FF; color: #fff; font: 700 15px/1 var(--font-label, 'Google Sans', sans-serif); letter-spacing: .02em; }
.nav__tools .nav__user--me { border: 0 !important; width: 44px; height: 44px; } /* no white ring, same size as the bell (24 Oct 2026) */
/* HERO HEADLINE 64px ON 2 LINES (Chiran, 5 Nov 2026). Only the headline gets the extra width; the pill,
the words and the buttons keep their 600px. On a computer the headline sits above the photo cards,
so the wider line never runs into them (checked 1280 to 1512 wide). */
@media (min-width: 1081px) {
.hero__in > .sl__txt { max-width: none; }
.hero__in > .sl__txt > :not(h1) { max-width: 600px; }
.hero__in > .sl__txt > h1 { max-width: min(900px, calc(100vw - 128px)); text-wrap: balance; }
.hero__in > .sl__txt[data-i="0"] > h1 { max-width: 600px; } /* the welcome headline keeps its 2 lines */
.hero__in { padding-bottom: 316px; } /* the block sits 48px higher, so a 2-line headline stays above the cards */
}
/* NO VIOLET STRIPE under the hero headline (Chiran, 5 Nov 2026): the key words are plain white
like the rest of the line. Replaces the stripe from 22 Oct (computer and phone). */
.hero h1 em { background: none !important; padding: 0 !important; margin: 0 !important; }
/* PARTNER ILLUSTRATIONS (Chiran, 5 Nov 2026): the pictures are shown whole and unchanged —
the card takes the pictures' own 2:3 shape (was 5:8, which cut the sides), no colour filter and no
zoom on hover. The soft shade over the top and bottom stays, so the white labels and numbers read. */
.sarisara-home-2026 .net--ill .nc { aspect-ratio: 2 / 3; }
.sarisara-home-2026 .net--ill .nc img,
.sarisara-home-2026 .net--ill .nc.on img,
.sarisara-home-2026 .net--ill .nc:hover img { filter: none !important; transform: none !important; }
/* The Journal row on the homepage wears the same section title as every other section (Chiran, 6 Nov 2026:
"why are the Journal titles smaller than the other section titles?" — it used the Journal page's own 28px head).
Numbered 07 like the sections above it. Only the homepage row changes; the Journal pages keep their own look. */
body.sarisara-home-2026 .ssj.ssj-home .ssj-head p.ssj-eye {
display: flex; align-items: center; gap: 13px; font-family: var(--font-label); font-size: 10px; line-height: 1.4;
letter-spacing: .2em; text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--fw-strong); margin: 0 0 26px; }
body.sarisara-home-2026 .ssj.ssj-home .ssj-head p.ssj-eye::before { content: '07'; color: var(--primary); }
body.sarisara-home-2026 .ssj.ssj-home .ssj-head p.ssj-eye::after { content: ''; flex: 1; min-width: 40px; height: 1px; background: var(--border); }
body.sarisara-home-2026 .ssj.ssj-home .ssj-head h2 {
font-family: var(--font-heading); font-weight: var(--fw-display); color: var(--navy);
font-size: clamp(28px, 4vw, 54px); line-height: 1.04; letter-spacing: -.036em; margin: 0 0 22px; max-width: 20ch; }
body.sarisara-home-2026 .ssj.ssj-home .ssj-head h2 b { color: var(--primary); font-weight: inherit; }
body.sarisara-home-2026 .ssj.ssj-home .ssj-head > div > p:not(.ssj-eye) {
font-size: clamp(15px, 1.3vw, 18px); line-height: 1.64; color: var(--text-secondary); margin: 0; max-width: 52ch; }
/* The month shown is a filled violet pill with white words (Chiran, 6 Nov 2026), same size as before. */
body.sarisara-home-2026 .yr .mo.on { background: var(--primary); color: #fff; border-radius: 0; } /* square corners (Chiran, 10 Nov 2026) */
body.sarisara-home-2026 .yr .mo.on s { color: rgba(255,255,255,.86); }
body.sarisara-home-2026 .yr .mo.on::after { display: none; }
body.sarisara-home-2026 .yr .mo.on:hover { background: var(--primary-dark); color: #fff; }
/* Journal row: the small label and its line run the full width like the other sections (Chiran, 6 Nov 2026);
"See the Journal" sits at the right, level with the line under the title. */
body.sarisara-home-2026 .ssj.ssj-home .ssj-head { display: block; position: relative; }
body.sarisara-home-2026 .ssj.ssj-home .ssj-head > div { width: 100%; }
body.sarisara-home-2026 .ssj.ssj-home .ssj-head .ssj-more { position: absolute; right: 0; bottom: 2px; }
@media (max-width: 760px) {
body.sarisara-home-2026 .ssj.ssj-home .ssj-head .ssj-more { position: static; display: inline-flex; margin-top: 18px; }
}
/* All 7 partner boxes open their "Become a Sarisarian" page (the Discoverer box: the Discoverers page, opening soon). */
body.sarisara-home-2026 .nc { position: relative; }
body.sarisara-home-2026 .nc__go { position: absolute; inset: 0; z-index: 5; border-radius: inherit; }
body.sarisara-home-2026 .nc__go:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
/* ═══ 10 Nov 2026 (Chiran) ═══ */
/* Go to top: the same button as on every other page (#gotop: 42 px, #232323, 7 px corners, 40 px from the corner,
24 px from the bottom on a phone), violet when pointed at or tapped. */
body.sarisara-home-2026 .ss-gotop { position: fixed; right: 40px !important; bottom: 40px !important; z-index: 99; width: 42px; height: 42px; padding: 0;
display: flex; align-items: center; justify-content: center; border: 0 !important; border-radius: 7px !important;
background: #232323 !important; color: #fff !important; cursor: pointer; box-shadow: none !important;
opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, background-color .15s; }
body.sarisara-home-2026 .ss-gotop[hidden] { display: none; }
body.sarisara-home-2026 .ss-gotop.is-on { opacity: 1; pointer-events: auto; transform: none; }
body.sarisara-home-2026 .ss-gotop:hover, body.sarisara-home-2026 .ss-gotop:focus-visible, body.sarisara-home-2026 .ss-gotop:active { background: #7700FF !important; outline: none; }
body.sarisara-home-2026 .ss-gotop svg { width: 18px; height: 18px; }
@media (max-width: 991px) { body.sarisara-home-2026 .ss-gotop { bottom: 24px !important; } } /* the theme lifts the button to 80 px on phones */
/* Partner boxes on a phone: an 8th violet box so the two columns end even. Hidden on wider screens. */
body.sarisara-home-2026 .nc-join { display: none; }
@media (max-width: 720px) {
body.sarisara-home-2026 .nc-join { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 0; overflow: hidden;
padding: 16px 14px; border-radius: 2px; text-decoration: none; color: #fff;
background: linear-gradient(90deg, #3b0a8f 0%, #7700FF 100%); }
body.sarisara-home-2026 .nc-join__ic { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14);
display: flex; align-items: center; justify-content: center; margin-bottom: auto; }
body.sarisara-home-2026 .nc-join b { font-size: 17px; line-height: 1.2; color: #fff; }
body.sarisara-home-2026 .nc-join > span:not([class]) { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.88); }
body.sarisara-home-2026 .nc-join__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 700; white-space: nowrap; }
body.sarisara-home-2026 .nc-join__go svg { width: 16px !important; height: 16px !important; flex: none; }
body.sarisara-home-2026 .nc-join__ic svg { width: 24px !important; height: 24px !important; }
body.sarisara-home-2026 .nc-join:focus-visible { outline: 3px solid #090920; outline-offset: 3px; }
}
/* PHONE MENU ON THE HOMEPAGE (Chiran, 11 Nov 2026, launch morning): tapping a row in the open phone menu turned
it near-white (rgb 248,244,255) under white words — unreadable. The 24 Oct fix lives in sarisara-chrome.css
under .ss-chrome, and the homepage menu is not inside .ss-chrome, so it never reached here. Same rule for the
homepage: in the open menu a hover / tap / focus is a light veil on the dark, the words stay white. */
.nav.open .nav__menu .mm-row:hover, .nav.open .nav__menu .mm-row:focus, .nav.open .nav__menu .mm-row:active,
.nav.open .nav__menu .sub-menu a:hover, .nav.open .nav__menu .sub-menu a:focus, .nav.open .nav__menu .sub-menu a:active,
.nav.open .nav__menu .mega__feature:hover, .nav.open .nav__menu .mega__feature:focus, .nav.open .nav__menu .mega__feature:active {
background: rgba(255,255,255,.10) !important; color: #fff !important; }
.nav.open .nav__menu .mm-row:hover .mm-top b, .nav.open .nav__menu .mm-row:hover small,
.nav.open .nav__menu .mm-row:active .mm-top b, .nav.open .nav__menu .mm-row:active small,
.nav.open .nav__menu .mm-row:focus .mm-top b, .nav.open .nav__menu .mm-row:focus small { color: #fff !important; }
.nav.open .nav__menu .mm-row, .nav.open .nav__menu .sub-menu a, .nav.open .nav__menu .mega__feature { -webkit-tap-highlight-color: transparent; }
/* HERO WORDS ON A PHONE (Chiran, 11 Nov 2026): on a computer the words sit on the left, where the 97deg shade is
darkest. On a phone the words run across the whole width and sit in the middle of the picture, where that
shade has faded to nothing, so bright photos (the fisherman, the stone wall) washed the words out. On phones the
shade runs top to bottom instead, as dark behind the words (.70-.74) as the desktop shade is behind them
(.62-.86), with the same top band for the menu and a lighter gap above the cards. */
@media (max-width: 760px) {
.hero__scrim { background:
linear-gradient(180deg, rgba(9,9,32,.78) 0%, rgba(9,9,32,.50) 12%, rgba(9,9,32,.40) 21%, rgba(9,9,32,.70) 33%,
rgba(9,9,32,.74) 62%, rgba(9,9,32,.48) 76%, rgba(9,9,32,.62) 100%); }
.hero__in .sl__txt { text-shadow: 0 1px 3px rgba(9,9,32,.45); }
}