/* ============================================================
ALLIANCE TRAVEL — Cinematic Design System
Dark editorial · Warm bronze · Destination accents
============================================================ */
/* v26 mobile-ux: render-blocking @import removed (an @import blocks the whole
stylesheet). DM Sans still loads via the in each page . */
/* ── Reset ─────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-h, 72px) + 12px);
font-size: var(--fs-body);
overflow-x: clip;
}
body {
background: var(--bg);
color: var(--txt-1);
font-family: var(--font-body);
font-size: var(--fs-body, 1rem);
line-height: var(--lh-relaxed, 1.6);
-webkit-font-smoothing: antialiased;
overflow-x: clip;
/* v22 Agent 3 — svh = smallest viewport height (URL bar showing). Body
uses svh so the page always fits regardless of iOS Safari URL-bar
state; pre-15.4 falls back to vh. Sticky/full-bleed regions use
dvh instead — see scroll-hero__pinned for the rationale. */
min-height: 100vh;
min-height: 100svh;
}
/* Headings default to the display face (Sora, via --font-display).
Low-specificity tag rule so component classes that set size/weight keep
working and any that needs to opt out still can. The RTL block remaps
--font-display to Cairo, so Arabic headings render in Cairo — never
Fraunces (which has no Arabic glyphs). */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-optical-sizing: auto;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button {
cursor: pointer;
font-family: inherit;
border: none;
background: none;
}
/* ════════════════════════════════════════════════════════════════
⛰ RESPONSIVE FOUNDATION (v22 · 2026-05-22)
════════════════════════════════════════════════════════════════
Single source of truth for breakpoints, spacing scale, fluid type,
section rhythm, container gutters, touch safety, mobile-perf gates.
ADDITIVE: legacy --s1..--s12 + scattered clamp() are left alone.
════════════════════════════════════════════════════════════════ */
:root {
/* ── SPACING SCALE — 8-aligned (user-requested 8/16/24/32/48/64/80) ── */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 64px;
--space-8: 80px;
--space-9: 96px;
--space-10: 128px;
/* ── FLUID SECTION RHYTHM — recovers ~96px per section on mobile ── */
--section-y: clamp(48px, 8vw, 96px);
--section-y-sm: clamp(32px, 5vw, 64px);
--section-y-lg: clamp(64px, 10vw, 128px);
/* ── CONTAINER GUTTER ── */
--container-x: clamp(16px, 5vw, 80px);
/* ── FLUID TYPOGRAPHY SCALE ── */
/* The ladder below 16px, settled 2026-09-20: 11 / 13 / 15 / 16. It used
to be a single fluid rung, which is why ~200 declarations opted out
and six near-identical sizes carried most of the page's text. */
--fs-2xs: .6875rem; /* 11px */
--fs-caption: .8125rem; /* 13px */
--fs-body-sm: .9375rem; /* 15px */
/* v26 mobile-ux: floor raised 0.9375rem→1rem so body copy never drops below 16px on phones */
--fs-body: 1rem; /* 16px */
--fs-body-lg: clamp(1rem, 0.95rem + 0.30vw, 1.125rem);
--fs-h6: clamp(1rem, 0.95rem + 0.30vw, 1.125rem);
--fs-h5: clamp(1.125rem, 1.05rem + 0.40vw, 1.25rem);
--fs-h4: clamp(1.25rem, 1.10rem + 0.80vw, 1.5rem);
--fs-h3: clamp(1.5rem, 1.20rem + 1.40vw, 2rem);
--fs-h2: clamp(1.875rem, 1.40rem + 2.20vw, 2.75rem);
--fs-h1: clamp(2.25rem, 1.60rem + 3.00vw, 3.5rem);
--fs-display-2: clamp(2.75rem, 1.80rem + 4.50vw, 4.5rem);
--fs-display-1: clamp(3rem, 2.00rem + 6.00vw, 6rem);
/* ── LINE-HEIGHT TOKENS ── */
--lh-tight: 1.1;
--lh-snug: 1.25;
--lh-normal: 1.5;
--lh-relaxed: 1.7;
/* ── TOUCH & FORM TARGETS ── */
--touch-min: 44px;
--field-h: 52px;
--field-fs: 16px;
/* ── STICKY CHROME HEIGHTS ── */
--nav-h: 72px;
--sticky-bar-h: 68px;
--fab-size: 56px;
}
/* Touch-device safety — 44×44 targets + iOS-zoom-safe inputs */
@media (pointer: coarse) {
a[href]:not(.skip-link):not(.nav-logo):not(.lang-btn),
button:not(.theme-toggle):not(.lang-btn):not(.nav-hamburger),
[role="button"],
summary,
.phone-card__btn {
min-height: var(--touch-min);
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
min-height: var(--field-h);
font-size: max(var(--field-fs), 1rem);
}
a, button, [role="button"], summary, input, select, textarea {
touch-action: manipulation;
}
}
/* Performance gates for small viewports.
Heavy backdrop-filter blurs cost GPU cycles on mobile; cap or strip
them per selector. Only touches blurs > 12px on selectors that appear
on mobile trip + landing pages. Locked-out: .nav-backdrop (Phase 3),
.site-nav.scrolled (already gated above), .trust-strip (already nulled). */
@media (max-width: 640px) {
.site-nav.scrolled {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.trust-strip {
background: rgba(12, 14, 18, 0.92);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Floating pill site-nav: 24px sat(180%) → 8px no-sat */
.site-nav {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Sticky bars: cap 16-20px → 8px, drop saturate */
.sticky-total,
.trip-sticky-bar {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Dropdown menu (trip switcher), toast: cap 12-18px → 8px */
.trip-switcher__menu,
.toast {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Hero ghost button: 12px → 8px */
.home-hero .btn--ghost,
.hero .btn--ghost {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Trip-card overlays (mobile shows ~3 cards stacked, each with 2 blurred chips) */
.trip-card__from,
.trip-card__monument {
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
/* Glass elevation wrapper utility */
section + section::before { display: none !important; }
.home-hero__photos picture:nth-child(n+3) { display: none; }
}
/* Reduced motion — hard kill switch */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Fluid typography utilities */
.fs-display-1 { font-size: var(--fs-display-1); line-height: var(--lh-tight); }
.fs-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.fs-h5 { font-size: var(--fs-h5); line-height: var(--lh-normal); }
.fs-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.fs-body { font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.fs-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.fs-caption { font-size: var(--fs-caption); line-height: var(--lh-normal); }
/* Adaptive grid utilities */
.grid-cards { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-cards--lg { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--space-5); }
/* Atomic utilities — minimal set for inline-style migration (v22 Phase A) */
.u-hidden { display: none; }
.u-text-center { text-align: center; }
.u-mx-auto { margin-inline: auto; }
.u-m-0 { margin: 0; }
.u-mt-sp3 { margin-top: var(--space-3); }
.u-mb-sp3 { margin-bottom: var(--space-3); }
.u-mb-sp4 { margin-bottom: var(--space-4); }
.u-size-full { width: 100%; height: 100%; }
.u-measure-md { max-width: 600px; }
.u-measure-lg { max-width: 680px; }
.u-measure-xl { max-width: 720px; }
.u-text-1 { color: var(--txt-1); }
.u-text-2 { color: var(--txt-2); }
.u-text-3 { color: var(--txt-3); }
.u-text-mint { color: var(--mint); }
.u-text-accent { color: var(--accent); }
.u-fw-400 { font-weight: 400; }
.u-fw-600 { font-weight: 600; }
.u-font-display { font-family: var(--font-display); }
.u-radius-clip { border-radius: var(--r2); overflow: hidden; }
.u-divider { height: 1px; background: var(--border); }
.u-bg-2 { background: var(--bg-2); }
.u-no-decoration { text-decoration: none; }
/* Noscript fallback styling (used in 5 region pages' booking-section