/* Kumo Travel — marketing site design system "Sakura" palette: warm cream base, sakura pink as the CTA/warmth accent, sky blue as the trust/stat accent — a deliberate marketing skin distinct from the app's fixed Deep Voyage navy-and-gold identity mark (see branding/BRAND_GUIDE.md). --accent-blue/--accent-pink name what they actually hold; they used to be called --navy/--gold, which lied about their own contents once the palette moved to Sakura. Legacy variable names --blue, --amber, --mist, --ice, --white are still kept as aliases so inline styles in download.html / unsubscribe.html keep working unchanged. */ :root { --cream: #fffbf8; --pink-50: #fff3f6; --pink-100: #fbdce5; --pink-300: #f0a8be; --pink-500: #e0688f; --pink-700: #b33e63; --sky-50: #eaf7fc; --sky-100: #cdeef9; --sky-300: #7fcbea; --sky-500: #3b9fcb; --sky-700: #256e93; --sky-800: #1b4e67; --ink: #332a31; --ink-soft: #6e5f67; --bg: var(--cream); --bg-alt: var(--pink-50); --surface: #ffffff; /* honest names for the Sakura accent pair */ --accent-blue: var(--sky-700); --accent-blue-mid: var(--sky-800); --accent-pink: var(--pink-500); /* legacy aliases — same slots the old theme filled */ --blue: var(--ink-soft); --amber: var(--pink-700); --ice: var(--pink-50); --mist: var(--sky-100); --white: #ffffff; --max: 1160px; --pad: clamp(20px, 5vw, 64px); --radius: 20px; --radius-pill: 999px; --shadow-soft: 0 20px 60px -24px rgba(51, 42, 49, 0.22); --shadow-card: 0 12px 32px -18px rgba(51, 42, 49, 0.14); font-synthesis: none; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Site-wide default scale, equivalent to a visitor zooming to 120% — started from 125% (the size the homepage was accidentally compared at, a leftover per-site Chrome zoom that read better than the true 100% default) and dialed back slightly. */ zoom: 1.2; /* Decorative elements are deliberately positioned to bleed past the edges of the viewport — hero clouds, the dotted-rule planes, the leaf/petal/critter fields — using percentage-based `left`/`bottom` offsets that only look right when part of them is clipped off-screen. Nothing here was ever clipping that on a real phone-width viewport (measured 111-190px of real horizontal scroll on an iPhone/Android sized viewport, worst on features.html/about.html's critter fields), so a visitor could swipe/scroll sideways into a strip of blank page with debris drifting across it. These elements are all aria-hidden and none of them need to be reachable by scrolling to them, so clipping horizontally here is safe. */ overflow-x: hidden; } body { margin: 0; font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } h1, h2, h3, h4 { font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; margin: 0; } p { margin: 0; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-pink); } .on-dark .eyebrow { color: var(--accent-pink); } /* Visually hidden but readable by screen readers and crawlers — for a heading that needs to exist semantically (e.g. inside a toggle panel) without duplicating a heading already shown on screen. */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* ── Buttons ─────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 30px; border-radius: var(--radius-pill); font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn-gold { background: var(--accent-pink); color: var(--ink); } .btn-gold:hover { background: var(--pink-700); color: var(--cream); box-shadow: 0 12px 24px -10px rgba(179, 62, 99, 0.5); } .btn-navy { background: var(--accent-blue); color: var(--white); } .btn-navy:hover { background: var(--accent-blue-mid); box-shadow: var(--shadow-card); } /* Andes theme (about.html): the CTA button sits on the terracotta gradient, so it swaps the site's default navy for a moss green to stay seamless. */ body.theme-andes .btn-navy { background: #3f6b4a; } body.theme-andes .btn-navy:hover { background: #2c4d35; box-shadow: var(--shadow-card); } /* Wineglass Bay theme (download.html): the waitlist button's default gold is actually the site's pink accent (see --accent-pink), which clashes with the green/sand/ocean palette here — swap it for the same warm sand tone as the eyebrow accent. */ body.theme-bay .btn-gold { background: #e0a83f; color: #1d3a22; } body.theme-bay .btn-gold:hover { background: #c48f2f; color: #f4ecd6; box-shadow: var(--shadow-card); } .btn-ghost-dark { border-color: rgba(255, 255, 255, 0.35); color: var(--white); } .btn-ghost-dark:hover { background: rgba(255, 255, 255, 0.1); } .btn-ghost-light { border-color: var(--mist); color: var(--accent-blue); } .btn-ghost-light:hover { background: var(--ice); } .btn-sm { padding: 10px 20px; font-size: 14px; } /* ── Nav ─────────────────────────────────────────────────────────────── */ .site-nav { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .site-nav.is-scrolled { border-bottom-color: var(--mist); box-shadow: 0 8px 24px -18px rgba(14, 27, 51, 0.4); } .site-nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; } .brand-mark { display: flex; align-items: center; } .brand-mark img { height: 48px; width: auto; } .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; } .nav-links a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--ink-soft); transition: color 0.15s ease; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--accent-blue); } .nav-cta { display: flex; align-items: center; gap: 14px; } /* Backdrop behind the mobile dropdown's Get notified/Log in rows — see site.js, which creates this element (inserted once, unconditionally, as nav's first child) and site.css's @media (max-width: 1200px) block, which is the only place that ever makes it visible. Defined here, outside that media query, so it stays `display: none` and out of flow at desktop widths no matter what — without an unconditional base rule, widening the window back past 1200px while the menu was left open took this div outside every rule that touched it, so it fell back to a plain div's default `display: block` in normal flow, with the inline `height` site.js had set for the open mobile menu still attached — inflating the whole nav bar by that leftover height instead of collapsing to nothing. */ .nav-cta-backdrop { display: none; position: absolute; left: 0; right: 0; background: var(--white); box-shadow: var(--shadow-card); } .nav-toggle { display: none; background: none; border: none; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 22px; height: 2px; background: var(--accent-blue); position: relative; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle span::before { position: absolute; top: -7px; } .nav-toggle span::after { position: absolute; top: 7px; } /* ── Pill nav (bold hero variant) ────────────────────────────────────── */ .site-nav.pill-style { background: var(--sky-800); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; } /* Homepage hero now starts its gradient at sky-500 instead of sky-800 — match the nav to it so the two stay seamless, same approach as the andes/bay/socotra theme overrides below. */ body.home .site-nav.pill-style { background: var(--sky-500); } .site-nav.pill-style.is-scrolled { box-shadow: none; border-bottom-color: transparent; } .site-nav.pill-style .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: auto; padding-top: 22px; padding-bottom: 14px; } .site-nav.pill-style .brand-mark { justify-self: center; } .site-nav.pill-style .brand-mark img { height: 63px; } .site-nav.pill-style .nav-links { gap: 8px; } .site-nav.pill-style .nav-links-left { justify-self: start; } /* Three pills now live in .nav-cta (Download, Get notified, Log in) where there used to be two — tightened from 14px so the whole right-hand group stays inside its grid column instead of overflowing into the centered logo (CSS grid tracks don't clip overflow by default). */ .site-nav.pill-style .nav-right { justify-self: end; display: flex; align-items: center; gap: 8px; } .site-nav.pill-style .nav-links a { padding: 10px 18px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.14); color: var(--cream); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.15s ease, color 0.15s ease; } .site-nav.pill-style .nav-links a:hover, .site-nav.pill-style .nav-links a[aria-current="page"] { background: var(--cream); color: var(--pink-700); } .site-nav.pill-style .nav-cta { gap: 8px; } .site-nav.pill-style .nav-cta .btn-ghost-light { background: rgba(255, 255, 255, 0.14); border-color: transparent; color: var(--cream); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; font-weight: 700; padding: 10px 14px; } .site-nav.pill-style .nav-cta .btn-ghost-light:hover { background: var(--cream); color: var(--pink-700); } .site-nav.pill-style .nav-toggle span, .site-nav.pill-style .nav-toggle span::before, .site-nav.pill-style .nav-toggle span::after { background: var(--cream); } /* Andes theme (about.html): the nav bar swaps navy for the same deep teal-green the hero gradient starts at, so the two stay seamless, and the pink/maroon "current page"+hover accent becomes terracotta brown. */ /* Same gradient function as body.subpage.theme-andes below, anchored from the same y=0 — so the nav's own background is pixel-exact continuation of the hero gradient behind it, not just a flat color that happens to match the very first pixel. */ body.theme-andes .site-nav.pill-style { background: linear-gradient( to bottom, #16302b 0, #2c6157 180px, #5c8f5f 360px, #a3c17e 520px, #efe6c9 700px ); } body.theme-andes .site-nav.pill-style .nav-links a:hover, body.theme-andes .site-nav.pill-style .nav-links a[aria-current="page"] { color: #8a4a2b; } body.theme-andes .site-nav.pill-style .nav-cta .btn-ghost-light:hover { color: #8a4a2b; } /* Wineglass Bay theme (download.html): nav swaps navy for the same forest green the hero gradient starts at, and the "current page"/hover accent becomes a deep lagoon teal instead of terracotta or maroon. Same stops as body.subpage.theme-bay below (kept identical so the nav's bottom edge is a pixel-exact continuation into the page background sitting just below it), compressed toward the top so the nav brightens within its own real height instead of sitting flat and dark. */ body.theme-bay .site-nav.pill-style { background: linear-gradient( to bottom, #4c6b28 0, #2f7f6e 120px, #1f8fa0 360px, #12779b 520px, #12779b 700px ); } body.theme-bay .site-nav.pill-style .nav-links a:hover, body.theme-bay .site-nav.pill-style .nav-links a[aria-current="page"] { color: #0f6e73; } body.theme-bay .site-nav.pill-style .nav-cta .btn-ghost-light:hover { color: #0f6e73; } /* Socotra theme (features.html): nav swaps navy for the same deep sea-blue the hero gradient starts at, and the "current page"/hover accent becomes a burnt-sienna rust, echoing the island's sandstone cliffs and dragon's blood trees instead of the teals/browns the other two themes already use. */ body.theme-socotra .site-nav.pill-style { background: linear-gradient( to bottom, #123c52 0, #1f6f95 180px, #17a3ad 360px, #8fdbd0 520px, var(--cream) 700px ); } body.theme-socotra .site-nav.pill-style .nav-links a:hover, body.theme-socotra .site-nav.pill-style .nav-links a[aria-current="page"] { color: #a8541f; } body.theme-socotra .site-nav.pill-style .nav-cta .btn-ghost-light:hover { color: #a8541f; } /* ── Bold hero (layout inspired by a reference shared during the session, rebuilt with Kumo's own Sakura pink/cream palette and content) ──────── */ .dotted-rule { position: relative; z-index: 101; height: 3px; background-image: repeating-linear-gradient(90deg, var(--pink-100) 0 7px, transparent 7px 16px); opacity: 0.6; } /* Subpage dashed rules (top, right after nav; bottom, right after page-hero) carry 4 little planes from the brand mark drifting along the line — right-to-left on top, left-to-right on bottom. */ .dotted-rule .dash-plane { position: absolute; top: 50%; left: -10%; width: 64px; height: auto; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(27, 78, 103, 0.4)); } .dotted-rule.dash-rtl .dash-plane { animation-name: plane-fly-rtl; animation-timing-function: linear; animation-iteration-count: infinite; } .dotted-rule.dash-ltr .dash-plane { animation-name: plane-fly-ltr; animation-timing-function: linear; animation-iteration-count: infinite; } .dash-plane.dp1 { animation-duration: 17s; animation-delay: 0s; top: calc(50% - 11px); } .dash-plane.dp2 { animation-duration: 21s; animation-delay: -6s; top: calc(50% + 8px); } .dash-plane.dp3 { animation-duration: 15s; animation-delay: -11s; top: calc(50% - 4px); } .dash-plane.dp4 { animation-duration: 23s; animation-delay: -16s; top: calc(50% + 12px); } /* The brand plane artwork sits ~30deg nose-up in its own frame, so it needs a +30deg twist to lie flat along the dash line: rotate(30deg) points the nose right, rotate(-150deg) is the same rigid body turned around to point the nose left (a true 180 turn, not a mirror flip). */ @keyframes plane-fly-rtl { 0% { left: 106%; opacity: 0; transform: translateY(-50%) rotate(-150deg); } 8%, 92% { opacity: 1; } 100% { left: -10%; opacity: 0; transform: translateY(-50%) rotate(-150deg); } } @keyframes plane-fly-ltr { 0% { left: -10%; opacity: 0; transform: translateY(-50%) rotate(30deg); } 8%, 92% { opacity: 1; } 100% { left: 106%; opacity: 0; transform: translateY(-50%) rotate(30deg); } } @media (prefers-reduced-motion: reduce) { .dotted-rule .dash-plane { animation: none; opacity: 0; } } /* Landing-page footer: a small, static pile of fallen leaves, petals, twigs and branches between the footer columns and the copyright row — an autumn-garden accent, no dash beneath it, just the debris itself, scattered the full width in loose, uneven drifts. */ .dotted-rule.ground-line { margin-bottom: 26px; background: none; opacity: 1; } .dotted-rule .leaf, .dotted-rule .twig, .dotted-rule .petal, .dotted-rule .pebble, .dotted-rule .reed { position: absolute; pointer-events: none; z-index: 1; filter: drop-shadow(0 1px 2px rgba(27, 78, 103, 0.3)); } .dotted-rule .leaf { width: 13px; height: 17px; border-radius: 78% 6% 78% 6%; opacity: 0.94; } .dotted-rule .leaf.gold { background: #e8b54a; } .dotted-rule .leaf.rust { background: #c1653a; } .dotted-rule .leaf.olive { background: #9c8a3e; } .dotted-rule .twig { width: 24px; height: 3px; border-radius: 2px; background: #8a5a34; transform-origin: left center; } .dotted-rule .petal { width: 9px; height: 13px; border-radius: 80% 0 80% 0; opacity: 0.9; } .dotted-rule .petal.petal-a { background: var(--pink-300); } .dotted-rule .petal.petal-b { background: var(--pink-500); } /* Andes/Machu Picchu ground line (about.html): scattered trail stones and grass tufts instead of autumn leaves — same scatterGroundDebris() engine, themed via data-debris-theme="andes". */ .dotted-rule .pebble { width: 12px; height: 9px; border-radius: 50%; opacity: 0.95; } .dotted-rule .pebble.stone-a { background: #8a8578; } .dotted-rule .pebble.stone-b { background: #6e6a5c; } .dotted-rule .pebble.stone-c { background: #b0a488; } .dotted-rule .reed { width: 3px; height: 22px; border-radius: 3px; background: #4f7a4a; transform-origin: bottom center; } /* Positions (left/bottom/rotation/color/size) are generated per-piece by scatterGroundDebris() in site.js — see assets/js/site.js — so the count and layout can be tuned from one function call instead of hand-placed rules here. */ .hero-bold { position: relative; background: linear-gradient(to bottom, var(--sky-500), var(--sky-300)); /* No overflow clipping here at all: the top dashed rule sits flush against this header's top edge, and its plane icons are taller than the 3px line itself, so any overflow: hidden (even split as overflow-x: hidden; overflow-y: visible — per spec, a non-"visible" x-axis forces the y-axis to compute as "auto", which still clips) cropped their tops. Nothing here actually needs clipping: the clouds contain themselves (.hero-clouds has its own overflow: hidden), and the tagline slide-in only overshoots by ~24px during its one-time reveal, same as unclipped animations elsewhere on the site. */ } /* Fuji/cherry-blossom illustration behind the homepage hero — same fade treatment as .andes-hero-photo (about.html) and .bay-hero-photo (download.html): sharp but faded so it recedes behind the heading, phone visual and footer copy sitting on top of it. Sized with object-fit: cover (rather than width:100%/height:auto) since it needs to fill this one self-contained header instead of spanning several full-bleed sections, and .hero-bold's own overflow: hidden clips it — the mask fade dissolves that clipped bottom edge into the header's sky-300 gradient stop instead of cutting it off hard. It also fades in from transparent over the first ~12% instead of starting at full strength from y=0: the pill nav above is a flat var(--sky-500), and the photo's own sky is much lighter, so painting it right up to the nav's bottom edge made a hard seam. Hiding it behind that top strip lets pure sky-500 show through there instead, matching the nav exactly, so the photo only reveals itself once it's already past the seam. */ .hero-bold-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0.5; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 60%, transparent 92%); mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 60%, transparent 92%); } .hero-clouds { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .hero-clouds .cloud { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.85); filter: blur(4px); animation: cloud-drift ease-in-out infinite alternate; } .hero-clouds .cloud::before, .hero-clouds .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; } .hero-clouds .c1 { width: 140px; height: 46px; top: 10%; left: 2%; --dx: 70px; --dy: 14px; animation-duration: 26s; } .hero-clouds .c1::before { width: 70px; height: 70px; top: -34px; left: 16px; } .hero-clouds .c1::after { width: 54px; height: 54px; top: -22px; left: 74px; } .hero-clouds .c2 { width: 100px; height: 34px; top: 4%; left: 58%; opacity: 0.75; --dx: -60px; --dy: 10px; animation-duration: 32s; animation-delay: -6s; } .hero-clouds .c2::before { width: 50px; height: 50px; top: -24px; left: 12px; } .hero-clouds .c2::after { width: 38px; height: 38px; top: -16px; left: 52px; } .hero-clouds .c3 { width: 170px; height: 54px; top: 27%; left: 34%; opacity: 0.5; --dx: 90px; --dy: -12px; animation-duration: 40s; animation-delay: -18s; } .hero-clouds .c3::before { width: 84px; height: 84px; top: -40px; left: 20px; } .hero-clouds .c3::after { width: 64px; height: 64px; top: -26px; left: 92px; } .hero-clouds .c4 { width: 90px; height: 30px; top: 14%; left: 88%; opacity: 0.6; --dx: -50px; --dy: 12px; animation-duration: 22s; animation-delay: -10s; } .hero-clouds .c4::before { width: 44px; height: 44px; top: -20px; left: 10px; } .hero-clouds .c4::after { width: 32px; height: 32px; top: -14px; left: 46px; } .hero-clouds .c5 { width: 120px; height: 40px; top: 34%; left: -3%; opacity: 0.65; --dx: 55px; --dy: -16px; animation-duration: 30s; animation-delay: -14s; } .hero-clouds .c5::before { width: 60px; height: 60px; top: -28px; left: 14px; } .hero-clouds .c5::after { width: 46px; height: 46px; top: -18px; left: 64px; } .hero-clouds .c6 { width: 80px; height: 28px; top: 2%; left: 24%; opacity: 0.55; --dx: -45px; --dy: 18px; animation-duration: 20s; animation-delay: -4s; } .hero-clouds .c6::before { width: 40px; height: 40px; top: -18px; left: 8px; } .hero-clouds .c6::after { width: 30px; height: 30px; top: -12px; left: 42px; } .hero-clouds .c7 { width: 150px; height: 48px; top: 20%; left: 72%; opacity: 0.45; --dx: 65px; --dy: 15px; animation-duration: 36s; animation-delay: -22s; } .hero-clouds .c7::before { width: 74px; height: 74px; top: -36px; left: 18px; } .hero-clouds .c7::after { width: 56px; height: 56px; top: -24px; left: 80px; } .hero-clouds .c8 { width: 70px; height: 24px; top: 38%; left: 96%; opacity: 0.5; --dx: -40px; --dy: -10px; animation-duration: 24s; animation-delay: -8s; } .hero-clouds .c8::before { width: 34px; height: 34px; top: -16px; left: 6px; } .hero-clouds .c8::after { width: 26px; height: 26px; top: -10px; left: 36px; } .hero-clouds .c9 { width: 110px; height: 36px; top: 44%; left: 8%; opacity: 0.4; --dx: 50px; --dy: -10px; animation-duration: 34s; animation-delay: -12s; } .hero-clouds .c9::before { width: 54px; height: 54px; top: -26px; left: 12px; } .hero-clouds .c9::after { width: 42px; height: 42px; top: -18px; left: 58px; } .hero-clouds .c10 { width: 95px; height: 32px; top: 50%; left: 80%; opacity: 0.38; --dx: -55px; --dy: 12px; animation-duration: 28s; animation-delay: -16s; } .hero-clouds .c10::before { width: 48px; height: 48px; top: -22px; left: 10px; } .hero-clouds .c10::after { width: 36px; height: 36px; top: -14px; left: 50px; } .hero-clouds .c11 { width: 130px; height: 42px; top: 56%; left: 42%; opacity: 0.32; --dx: 60px; --dy: -8px; animation-duration: 38s; animation-delay: -20s; } .hero-clouds .c11::before { width: 64px; height: 64px; top: -30px; left: 16px; } .hero-clouds .c11::after { width: 48px; height: 48px; top: -20px; left: 70px; } .hero-clouds .c12 { width: 75px; height: 26px; top: 46%; left: 62%; opacity: 0.35; --dx: -35px; --dy: 14px; animation-duration: 26s; animation-delay: -6s; } .hero-clouds .c12::before { width: 36px; height: 36px; top: -16px; left: 6px; } .hero-clouds .c12::after { width: 28px; height: 28px; top: -10px; left: 40px; } @keyframes cloud-drift { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 60px), var(--dy, 10px)); } } @media (prefers-reduced-motion: reduce) { .hero-clouds .cloud { animation: none; } } /* 64px matches .page-hero's own top padding (subpage hero: dashed rule, then this same gap, then the eyebrow) — the homepage hero was using an 8px gap here, much tighter than every subpage's dashed-line-to-text spacing. */ .hero-eyebrow-center { position: relative; z-index: 1; text-align: center; padding-top: 64px; } .hero-eyebrow-center .eyebrow { justify-content: center; color: var(--pink-100); } .hero-eyebrow-center .eyebrow::before { background: var(--cream); } .mega-heading { position: relative; z-index: 1; /* 56px bottom margin matches .page-hero's own bottom padding (subpage hero: text, then this same gap, then the dashed rule) — the heading sat flush against the rule before this. hero-bold-visual's -28px margin-top pulls the phone up to overlap the rule itself, same as before; that relationship is unaffected by this gap. */ margin: 4px 0 56px; padding: 0 var(--pad); text-align: center; color: var(--cream); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.94; font-size: clamp(36px, 7.6vw, 110px); } .hero-bold-visual { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: -28px; } .hero-bold-visual img { width: min(300px, 62vw); height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.35)); will-change: transform; } .hero-tagline { position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(28px, 5.6vw, 76px); line-height: 1; color: var(--cream); } /* Two independent taglines now flank the phone — "Stop Juggling Apps" on the left, "Start Planning Trips" on the right — mirrored so the right one is right-aligned and slides in from the opposite side. */ .hero-tagline-right { left: auto; right: var(--pad); text-align: right; color: var(--pink-500); } .hero-tagline .tagline-word { display: block; opacity: 0; transform: translateX(-24px); transition: opacity 0.6s ease, transform 0.6s ease; } .hero-tagline-right .tagline-word { transform: translateX(24px); } .hero-tagline.is-visible .tagline-word { opacity: 1; transform: translateX(0); } .hero-tagline.is-visible .tagline-word:nth-child(1) { transition-delay: 0.1s; } .hero-tagline.is-visible .tagline-word:nth-child(2) { transition-delay: 0.4s; } .hero-tagline.is-visible .tagline-word:nth-child(3) { transition-delay: 0.7s; } @media (max-width: 900px) { .hero-tagline { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-tagline .tagline-word { transition: none; opacity: 1; transform: none; } } .hero-bold-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 28px; } .hero-bold-footer .copy { max-width: 340px; color: var(--pink-100); font-size: 16px; font-weight: 500; line-height: 1.5; } .hero-bold-footer .copy .btn { margin-top: 16px; } .hero-bold-fab { display: flex; flex-direction: column; gap: 12px; } .hero-bold-fab a { width: 52px; height: 52px; border-radius: 50%; background: var(--cream); color: var(--pink-700); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); transition: transform 0.15s ease, background 0.15s ease; } .hero-bold-fab a:hover { transform: translateY(-3px); background: var(--pink-100); } .stat-strip { position: relative; z-index: 1; } @media (max-width: 720px) { /* The nav-specific rules that used to live here (.wrap single-column, .nav-right column, .nav-links wrap-in-place with transparent bg) were a second, higher-specificity mobile nav system fighting the dropdown one further down this file — both pre-existing, both scoped to this same 720px breakpoint, so this one silently won for everything it touched. Consolidated onto the single dropdown system (now covering up to 1200px) instead of maintaining two. */ .hero-bold-footer { flex-direction: column; align-items: center; text-align: center; } .hero-bold-fab { flex-direction: row; } } /* ── Hero ────────────────────────────────────────────────────────────── */ .hero { position: relative; background: radial-gradient(120% 140% at 85% 0%, var(--accent-blue-mid) 0%, var(--accent-blue) 55%, #091326 100%); color: var(--white); overflow: hidden; padding: 88px 0 0; } .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); align-items: center; gap: 40px; } .hero-copy h1 { font-size: clamp(38px, 5.2vw, 64px); margin: 18px 0 22px; color: var(--white); } .hero-copy h1 .accent { color: var(--accent-pink); } .hero-copy p.lead { font-size: clamp(16px, 1.7vw, 19px); color: var(--mist); max-width: 46ch; margin-bottom: 34px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; } .hero-note { font-size: 13px; color: rgba(238, 242, 248, 0.65); } .hero-art { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 100%; } .hero-art::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 181, 74, 0.35), transparent 70%); filter: blur(10px); top: 10%; } .hero-art img { position: relative; width: min(340px, 78vw); filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.45)); } /* ── Moment strip: a real trip beat between the hero photo and the stat strip, so the destination fantasy gets one more scroll before the feature pitch starts. Flat sky-300 — the exact color the hero already fades to (.hero-bold) and the stat strip starts from (.stat-strip) — so the hand-off on both sides stays seamless instead of introducing a third gradient stop. */ .moment-strip { background: var(--sky-300); } /* Lightened from sky-500 to sky-300 to match the brighter hero fade above — the old white/sky-50/sky-100 text (built for the darker sky-500) lost almost all contrast against this lighter blue, so it's swapped for the same dark ink tones every other feature row already uses. */ .moment-strip .feature-copy h2 { color: var(--ink); } .moment-strip .feature-copy p { color: var(--ink-soft); } .moment-strip .moment-caption { display: block; font-size: 13px; color: var(--accent-blue); margin-top: -6px; } /* ── Stat strip ──────────────────────────────────────────────────────── */ .stat-strip { /* Flat sky-300, not a gradient: both .moment-strip above and .feature-row.zone-1 below now sit at sky-300 too (the hero's own fade lightened from sky-500 to sky-300), so there's no color distance left here to ease across. */ background: var(--sky-300); color: var(--ink); } .stat-strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 32px var(--pad) 45px; } .stat-strip .stat b { display: block; font-size: clamp(24px, 3vw, 32px); color: var(--amber); font-weight: 700; } .stat-strip .stat span { font-size: 13px; color: var(--accent-blue); } .stat-strip .stat .soon-tag { display: block; width: fit-content; margin-top: 8px; padding: 3px 10px; border-radius: var(--radius-pill); background: rgba(37, 110, 147, 0.14); color: var(--accent-blue); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } /* ── Feature rows ────────────────────────────────────────────────────── */ .feature-row { position: relative; padding: 96px 0; } /* Homepage only: 96px reads as a lot of dead air here specifically, since two of these rows (Trip roles, Built differently) are now short, centered text blocks rather than a two-column row with a phone image filling the height. Features/About keep the full 96px. 51px = another 20% off the first pass (64px). */ body.home .feature-row { padding: 51px 0; } /* Trip roles (zone-2): less air below "Take me there" specifically — its top padding stays at 51px, matching the section above. */ body.home .feature-row.zone-2 { padding-bottom: 28px; } /* The paragraph and the button sat flush against each other — global p { margin: 0 } leaves zero gap before an inline-block .btn that immediately follows in the markup. */ body.home .feature-row.zone-2 .section-head .btn { margin-top: 24px; } /* Built differently (zone-3): the card grid was sitting a long way from both the paragraph above it and the CTA banner below (51px section padding plus the card-grid's own 48px margin-top stacked on top). */ body.home .feature-row.zone-3 { padding-top: 18px; padding-bottom: 18px; } /* The real gap between the paragraph and the cards was .feature-row .wrap's own grid gap (64px, designed for the two-column rows) — zone-3's single-column layout turns that into a row-gap between .section-head and .card-grid, on top of card-grid's own margin-top. Collapsing both down to one small gap instead of stacking two. */ body.home .feature-row.zone-3 .wrap { gap: 12px; } body.home .card-grid { margin-top: 0; } /* ── Same padding pass, applied to Features/About/Download ─────────── (body.subpage covers all three). These pages don't use the zone gradient chain — plain .feature-row on a cream/photo-theme background — so none of the gradient-easing work applies, only the padding/gap/shadow side of it. */ body.subpage .feature-row { padding: 51px 0; } /* Features page only: another 10% off, on top of the subpage-wide cut above (51px -> 46px). */ body.theme-socotra .feature-row { padding: 46px 0; } body.subpage .cta-banner { padding: 58px 0; } /* Same fix as .card-grid on home: single-column .wrap + .card-grid rows (features.html's Trip roles, about.html's card section) inherit .feature-row .wrap's 64px two-column gap as a row-gap, stacked on top of card-grid's own margin-top. Same problem for .faq-list (About's FAQ) — .section-head sat 64px + the list's own margin-top away from "Common questions" before this. */ body.subpage .wrap:has(> .card-grid), body.subpage .wrap:has(> .faq-list) { gap: 12px; } body.subpage .card-grid { margin-top: 0; } /* Same fix as .feature-art img on home: a 30px/40px shadow needs more clear space below the phone than 51px of section padding leaves. */ body.subpage .feature-art img { filter: drop-shadow(0 14px 18px rgba(14, 27, 51, 0.18)); } /* Each zone is one more step along the blue -> pink journey, so repeating plain/alt rows keep deepening instead of resetting back toward blue. Down to 3 steps (was 5, before Group chat/Route & map moved to features.html-only) — reuses the original chain's own 2nd and 4th stops so the same hand-tuned color path just takes bigger strides. */ /* All three zones eased (flat outer 15%, transition in the middle 70%), not just zone-2: flattening only one side of a boundary still leaves a slope mismatch — zero meeting zone-1's own plain, nonzero slope was still a visible kink even after zone-2 alone was eased. Matching zero-slope on both sides of every boundary is what actually removes the kink, regardless of how tall or short the neighboring section is. */ .feature-row.zone-1 { background: linear-gradient( to bottom, var(--sky-300) 0%, var(--sky-300) 15%, #b7bad4 85%, #b7bad4 100% ); } .feature-row.zone-2 { background: linear-gradient( to bottom, #b7bad4 0%, #b7bad4 15%, #e2acc3 85%, #e2acc3 100% ); } .feature-row.zone-3 { background: linear-gradient( to bottom, #e2acc3 0%, #e2acc3 15%, var(--pink-300) 85%, var(--pink-300) 100% ); } /* ── Blossom scene: branch, falling petals, fluttering butterfly ──────── */ .blossom-scene { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0; } .blossom-scene .branch-svg { position: absolute; top: -6px; right: 0; width: clamp(110px, 16vw, 220px); height: auto; opacity: 0.9; } .blossom-scene.right .branch-svg { right: auto; left: 0; } .blossom-scene .branch-svg.branch-left { right: auto; left: 0; } .blossom-scene .petal { position: absolute; top: -6%; width: 9px; height: 13px; background: var(--pink-300); border-radius: 80% 0 80% 0; opacity: 0.85; animation: petal-fall linear infinite; animation-play-state: paused; } .blossom-scene.is-visible .petal { animation-play-state: running; } .blossom-scene .p1 { left: 12%; animation-duration: 13s; animation-delay: 0s; } .blossom-scene .p2 { left: 30%; width: 7px; height: 11px; background: var(--pink-500); animation-duration: 16s; animation-delay: -3s; } .blossom-scene .p3 { left: 52%; animation-duration: 11s; animation-delay: -7s; } .blossom-scene .p4 { left: 71%; width: 8px; height: 12px; background: var(--pink-500); animation-duration: 18s; animation-delay: -2s; } .blossom-scene .p5 { left: 88%; animation-duration: 14s; animation-delay: -10s; } .blossom-scene .p6 { left: 5%; width: 7px; height: 11px; background: var(--pink-500); animation-duration: 15s; animation-delay: -5s; } .blossom-scene .p7 { left: 41%; animation-duration: 17s; animation-delay: -9s; } .blossom-scene .p8 { left: 62%; width: 8px; height: 12px; background: var(--pink-500); animation-duration: 12s; animation-delay: -1s; } .blossom-scene .p9 { left: 96%; animation-duration: 19s; animation-delay: -13s; } @keyframes petal-fall { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(18px, 30vh) rotate(90deg); } 50% { transform: translate(-16px, 60vh) rotate(180deg); } 75% { transform: translate(20px, 90vh) rotate(270deg); } 100% { transform: translate(-10px, 120vh) rotate(360deg); } } .blossom-scene .butterfly { position: absolute; top: 30%; left: 20%; width: 24px; height: 18px; animation: butterfly-flutter 11s ease-in-out infinite; animation-play-state: paused; } .blossom-scene.right .butterfly { left: auto; right: 20%; } .blossom-scene .b2 { top: 62%; left: 55%; width: 19px; height: 15px; animation-duration: 14s; animation-delay: -4s; } .blossom-scene.right .b2 { left: auto; right: 55%; } .blossom-scene .b3 { top: 44%; left: auto; right: 12%; width: 21px; height: 16px; animation-duration: 16s; animation-delay: -8s; } .blossom-scene.right .b3 { right: auto; left: 12%; } .blossom-scene.is-visible .butterfly { animation-play-state: running; } .blossom-scene .butterfly svg { width: 100%; height: 100%; display: block; } .blossom-scene .wingflap { animation: wing-flap 0.45s ease-in-out infinite; transform-origin: 12px 9px; } @keyframes wing-flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.55); } } @keyframes butterfly-flutter { 0% { transform: translate(0, 0) rotate(0deg); } 20% { transform: translate(90px, -110px) rotate(10deg); } 40% { transform: translate(170px, 40px) rotate(-8deg); } 60% { transform: translate(110px, 150px) rotate(12deg); } 80% { transform: translate(30px, 60px) rotate(-6deg); } 100% { transform: translate(0, 0) rotate(0deg); } } @media (prefers-reduced-motion: reduce) { .blossom-scene .petal, .blossom-scene .butterfly, .blossom-scene .wingflap { animation: none; } } /* ── Andes scene: mountain ridge, drifting cloud-forest mist, soaring condor — the Machu Picchu counterpart to the blossom scene above, used on about.html instead of petals/butterflies. ──────────────────────── */ .andes-scene { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0; } .andes-scene .ridge-svg { position: absolute; top: -4px; right: 0; width: clamp(160px, 22vw, 320px); height: auto; } .andes-scene.left .ridge-svg { right: auto; left: 0; } .andes-scene .mist { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.55); filter: blur(6px); opacity: 0; animation: mist-drift ease-in-out infinite; animation-play-state: paused; } .andes-scene.is-visible .mist { animation-play-state: running; } .andes-scene .m1 { width: 140px; height: 40px; top: 20%; left: 8%; animation-duration: 18s; animation-delay: 0s; } .andes-scene .m2 { width: 100px; height: 30px; top: 55%; left: 60%; animation-duration: 22s; animation-delay: -6s; } .andes-scene .m3 { width: 120px; height: 34px; top: 75%; left: 20%; animation-duration: 20s; animation-delay: -12s; } @keyframes mist-drift { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 0.5; } 50% { transform: translateX(30px); opacity: 0.32; } 85% { opacity: 0.5; } 100% { transform: translateX(0); opacity: 0; } } .andes-scene .condor { position: absolute; top: 25%; left: 15%; width: 46px; height: 20px; animation: condor-soar 26s ease-in-out infinite; animation-play-state: paused; } .andes-scene .condor.right { left: auto; right: 15%; } .andes-scene.is-visible .condor { animation-play-state: running; } .andes-scene .condor svg { width: 100%; height: 100%; display: block; } @keyframes condor-soar { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(110px, -26px) rotate(4deg); } 50% { transform: translate(200px, 8px) rotate(-3deg); } 75% { transform: translate(110px, 36px) rotate(3deg); } 100% { transform: translate(0, 0) rotate(0deg); } } @media (prefers-reduced-motion: reduce) { .andes-scene .mist, .andes-scene .condor { animation: none; } } /* ── Andes photo panorama (about.html): the illustrated aerial view of Machu Picchu (transparent PNG, white background keyed out) at full page width, un-cropped, sitting behind the hero and the first content section — a real photo/illustration standing in for the hand-drawn scenes used elsewhere. A few drifting clouds layer on top of it for atmosphere/motion. .andes-photo-wrap must wrap every element the photo should show through behind. */ .andes-photo-wrap { position: relative; } /* The "problem" section's text sits directly over the busy lower half of the photo, so it gets a translucent card behind it to stay legible instead of a text-shadow fighting the whole illustration. */ .andes-photo-wrap .feature-row .feature-copy { position: relative; z-index: 1; background: rgba(255, 251, 248, 0.92); padding: 32px 36px; border-radius: var(--radius); box-shadow: 0 24px 50px -22px rgba(20, 30, 20, 0.45); } .andes-hero-photo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1600px; height: auto; z-index: 0; pointer-events: none; /* Sharp (unblurred) but faded so its detail doesn't fight the hero heading/paragraph and the "problem" section's text sitting on it. */ opacity: 0.35; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.25)); } .andes-hero-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .andes-hero-scene .acloud { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.88); filter: blur(4px); animation: cloud-drift ease-in-out infinite alternate; } .andes-hero-scene .acloud::before, .andes-hero-scene .acloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; } .andes-hero-scene .ac1 { width: 150px; height: 50px; top: 28%; left: 4%; --dx: 40px; --dy: 8px; animation-duration: 30s; } .andes-hero-scene .ac1::before { width: 76px; height: 76px; top: -36px; left: 16px; } .andes-hero-scene .ac1::after { width: 58px; height: 58px; top: -24px; left: 78px; } .andes-hero-scene .ac2 { width: 210px; height: 66px; top: 36%; left: 30%; opacity: 0.9; --dx: -30px; --dy: 10px; animation-duration: 36s; animation-delay: -8s; } .andes-hero-scene .ac2::before { width: 104px; height: 104px; top: -50px; left: 26px; } .andes-hero-scene .ac2::after { width: 80px; height: 80px; top: -34px; left: 116px; } .andes-hero-scene .ac3 { width: 120px; height: 40px; top: 18%; left: 56%; opacity: 0.8; --dx: 34px; --dy: -8px; animation-duration: 26s; animation-delay: -14s; } .andes-hero-scene .ac3::before { width: 60px; height: 60px; top: -28px; left: 12px; } .andes-hero-scene .ac3::after { width: 46px; height: 46px; top: -18px; left: 62px; } .andes-hero-scene .ac4 { width: 95px; height: 32px; top: 42%; left: 76%; opacity: 0.75; --dx: -26px; --dy: 10px; animation-duration: 24s; animation-delay: -4s; } .andes-hero-scene .ac4::before { width: 46px; height: 46px; top: -21px; left: 10px; } .andes-hero-scene .ac4::after { width: 36px; height: 36px; top: -15px; left: 48px; } @media (prefers-reduced-motion: reduce) { .andes-hero-scene .acloud { animation: none; } } /* ── Wineglass Bay photo (download.html): the illustrated aerial view of Wineglass Bay, Tasmania, at full page width, un-cropped, sitting behind the hero — the coastal counterpart to the Andes photo panorama above. .bay-photo-wrap must wrap every element the photo should show through behind. ─────────────────────────────────────────────────────────────── */ .bay-photo-wrap { position: relative; } .bay-hero-photo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1600px; height: auto; z-index: 0; pointer-events: none; /* Sharp (unblurred) but faded so its detail doesn't fight the hero heading/paragraph, the store badges, or the notify card sitting on it — same treatment as .andes-hero-photo on about.html. */ opacity: 0.35; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.25)); /* The photo's bottom edge is deep ocean blue, matching the flat ocean blue the body gradient settles into below it — fade the photo itself to transparent near its bottom so it dissolves into that colour instead of ending abruptly. */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 96%); mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 96%); } /* ── Socotra photo (features.html): the illustrated turquoise lagoon/ dragon's-blood-tree coastline, at full page width, un-cropped, sitting behind the hero and the first feature row — the Yemeni-island counterpart to the Andes and Wineglass Bay photo panoramas above. .socotra-photo-wrap must wrap every element the photo should show through behind. ────────── */ .socotra-photo-wrap { position: relative; } .socotra-photo-wrap .feature-row .feature-copy { position: relative; z-index: 1; background: rgba(255, 251, 248, 0.92); padding: 32px 36px; border-radius: var(--radius); box-shadow: 0 24px 50px -22px rgba(20, 30, 20, 0.45); } .socotra-hero-photo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1600px; height: auto; z-index: 0; pointer-events: none; /* Sharp (unblurred) but faded so its detail doesn't fight the hero heading/paragraph or the first feature row's text sitting on it — same treatment as .andes-hero-photo and .bay-hero-photo. */ opacity: 0.35; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.25)); /* The photo's bottom (white sand) is much brighter than its top (deep sea blue), so a hard cutoff wherever the image runs out inside the first feature row would read as an abrupt edge — fade it to transparent near its own bottom so it dissolves into whatever's underneath instead. It also fades in from transparent over its first ~10%: the photo's own sky is much lighter than the deep sea-blue the nav and body gradient start at, so painting it at full strength right up to the nav's bottom edge made a visible seam — same fix as .hero-bold-photo on the homepage. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 78%, transparent 96%); mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 78%, transparent 96%); } /* ── Andes critters (about.html): butterflies, grasshoppers and beetles scattered across the whole page — the jungle-canopy counterpart to the homepage's cherry-blossom butterflies. One field spans the full document height (JS sets it via scatterCritters in site.js) so critters drift everywhere as you scroll, not just inside a few hand-placed sections. ── */ .andes-critters-field { position: absolute; top: 0; left: 0; width: 100%; overflow: visible; pointer-events: none; z-index: 1; } .andes-critters-field .a-butterfly, .andes-critters-field .a-grasshopper, .andes-critters-field .a-beetle { position: absolute; } .andes-critters-field svg { width: 100%; height: 100%; display: block; } .andes-critters-field .a-butterfly { width: 22px; height: 17px; animation-name: butterfly-flutter; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .andes-critters-field .wingflap { animation: wing-flap 0.4s ease-in-out infinite; transform-origin: 11px 8.5px; } .andes-critters-field .a-grasshopper { width: 24px; height: 13px; animation-name: grasshopper-hop; animation-timing-function: ease-out; animation-iteration-count: infinite; } .andes-critters-field .a-beetle { width: 15px; height: 11px; animation-name: beetle-crawl; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes grasshopper-hop { 0%, 8% { transform: translate(0, 0); } 16% { transform: translate(9px, -13px); } 24%, 46% { transform: translate(18px, 0); } 54% { transform: translate(9px, -13px); } 62%, 100% { transform: translate(0, 0); } } @keyframes beetle-crawl { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(42px, 3px) rotate(3deg); } } @media (prefers-reduced-motion: reduce) { .andes-critters-field .a-butterfly, .andes-critters-field .a-grasshopper, .andes-critters-field .a-beetle, .andes-critters-field .wingflap { animation: none; } } /* ── Socotra critters (features.html): Squinting Bush Brown butterflies, Red Palm Weevils and drifting Socotran Fig leaves — the island/Yemeni counterpart to about.html's Andes critters field. Same full-document overlay, same scatterCritters() engine in site.js, different species. ── */ .socotra-critters-field { position: absolute; top: 0; left: 0; width: 100%; overflow: visible; pointer-events: none; z-index: 1; } .socotra-critters-field .s-butterfly, .socotra-critters-field .s-weevil, .socotra-critters-field .s-leaf { position: absolute; } .socotra-critters-field svg { width: 100%; height: 100%; display: block; } .socotra-critters-field .s-butterfly { width: 22px; height: 17px; animation-name: butterfly-flutter; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .socotra-critters-field .wingflap { animation: wing-flap 0.4s ease-in-out infinite; transform-origin: 11px 8.5px; } .socotra-critters-field .s-weevil { width: 20px; height: 10px; animation-name: beetle-crawl; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } .socotra-critters-field .s-leaf { width: 14px; height: 14px; animation-name: leaf-sway-drift; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes leaf-sway-drift { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0.85; } 50% { transform: translate(9px, 20px) rotate(140deg); opacity: 0.55; } 100% { transform: translate(-7px, 40px) rotate(280deg); opacity: 0.85; } } @media (prefers-reduced-motion: reduce) { .socotra-critters-field .s-butterfly, .socotra-critters-field .s-weevil, .socotra-critters-field .s-leaf, .socotra-critters-field .wingflap { animation: none; } } /* ── Tasmania critters (download.html): Jack Jumper ants, Harlequin Bugs and drifting Tasmanian Blue Gum leaves — the Wineglass Bay counterpart to the Andes/Socotra critter fields above. Same engine, same three animation roles (hop / crawl / sway-drift) reused rather than adding new keyframes — Jack Jumpers are literally named for jumping, so the grasshopper-hop keyframe fits them better than a plain crawl. ──────── */ .tasmania-critters-field { position: absolute; top: 0; left: 0; width: 100%; overflow: visible; pointer-events: none; z-index: 1; } .tasmania-critters-field .t-ant, .tasmania-critters-field .t-bug, .tasmania-critters-field .t-leaf { position: absolute; } .tasmania-critters-field svg { width: 100%; height: 100%; display: block; } .tasmania-critters-field .t-ant { width: 18px; height: 10px; animation-name: grasshopper-hop; animation-timing-function: ease-out; animation-iteration-count: infinite; } .tasmania-critters-field .t-bug { width: 14px; height: 12px; animation-name: beetle-crawl; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } .tasmania-critters-field .t-leaf { width: 16px; height: 12px; animation-name: leaf-sway-drift; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } @media (prefers-reduced-motion: reduce) { .tasmania-critters-field .t-ant, .tasmania-critters-field .t-bug, .tasmania-critters-field .t-leaf { animation: none; } } /* ── Autumn fall: CTA-banner leaves drift down from cherry-blossom pink to autumn gold/rust/olive as they fall, as if landing on the leaf pile in the footer below. Two keyframes run together per leaf — one for the falling drift/rotation (shared, left/right wobble variants), one for the pink-to-autumn color shift (one per target color). ──────────────── */ .autumn-fall { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0; } .autumn-fall .fall-leaf { position: absolute; top: -8%; width: 12px; height: 16px; border-radius: 78% 6% 78% 6%; opacity: 0; animation-timing-function: linear; animation-iteration-count: infinite; animation-play-state: paused; filter: drop-shadow(0 2px 3px rgba(27, 78, 103, 0.25)); } .autumn-fall.is-visible .fall-leaf { animation-play-state: running; } .autumn-fall .fa1 { left: 6%; width: 10px; height: 14px; animation-name: leaf-fall-drift-a, leaf-color-gold; animation-duration: 17s, 17s; animation-delay: 0s, 0s; } .autumn-fall .fa2 { left: 18%; animation-name: leaf-fall-drift-b, leaf-color-rust; animation-duration: 21s, 21s; animation-delay: -6s, -6s; } .autumn-fall .fa3 { left: 29%; width: 10px; height: 14px; animation-name: leaf-fall-drift-a, leaf-color-olive; animation-duration: 18s, 18s; animation-delay: -11s, -11s; } .autumn-fall .fa4 { left: 41%; animation-name: leaf-fall-drift-b, leaf-color-gold; animation-duration: 22s, 22s; animation-delay: -3s, -3s; } .autumn-fall .fa5 { left: 53%; width: 10px; height: 14px; animation-name: leaf-fall-drift-a, leaf-color-rust; animation-duration: 16s, 16s; animation-delay: -14s, -14s; } .autumn-fall .fa6 { left: 64%; animation-name: leaf-fall-drift-b, leaf-color-olive; animation-duration: 20s, 20s; animation-delay: -8s, -8s; } .autumn-fall .fa7 { left: 75%; width: 10px; height: 14px; animation-name: leaf-fall-drift-a, leaf-color-gold; animation-duration: 24s, 24s; animation-delay: -1s, -1s; } .autumn-fall .fa8 { left: 85%; animation-name: leaf-fall-drift-b, leaf-color-rust; animation-duration: 18.5s, 18.5s; animation-delay: -13s, -13s; } .autumn-fall .fa9 { left: 95%; width: 10px; height: 14px; animation-name: leaf-fall-drift-a, leaf-color-olive; animation-duration: 22.5s, 22.5s; animation-delay: -7s, -7s; } .autumn-fall .fa10 { left: 50%; animation-name: leaf-fall-drift-b, leaf-color-gold; animation-duration: 19.5s, 19.5s; animation-delay: -18s, -18s; } /* Fall distance is deliberately short (well under the 120vh+ used for the blossom petals elsewhere) so the pink -> autumn color shift plays out while the piece is still on/near screen, landing at the pile below instead of disappearing mid-transition. */ @keyframes leaf-fall-drift-a { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(16px, 15vh) rotate(80deg); } 50% { transform: translate(-12px, 32vh) rotate(170deg); } 75% { transform: translate(16px, 52vh) rotate(260deg); } 100% { transform: translate(-8px, 76vh) rotate(360deg); } } @keyframes leaf-fall-drift-b { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-14px, 14vh) rotate(-70deg); } 50% { transform: translate(11px, 30vh) rotate(-150deg); } 75% { transform: translate(-15px, 50vh) rotate(-240deg); } 100% { transform: translate(9px, 74vh) rotate(-330deg); } } /* Color reaches full autumn tone by 42% — while the piece is still well within the pink CTA banner's own height, not after it has already fallen into the footer — then holds that color for the rest of the drop onto the pile, fading out right as it reaches it. */ @keyframes leaf-color-gold { 0% { background: var(--pink-300); opacity: 0; } 8% { opacity: 0.92; } 22% { background: var(--pink-500); } 42% { background: #e8b54a; } 93% { opacity: 0.92; } 100% { background: #e8b54a; opacity: 0; } } @keyframes leaf-color-rust { 0% { background: var(--pink-300); opacity: 0; } 8% { opacity: 0.92; } 22% { background: var(--pink-500); } 42% { background: #c1653a; } 93% { opacity: 0.92; } 100% { background: #c1653a; opacity: 0; } } @keyframes leaf-color-olive { 0% { background: var(--pink-300); opacity: 0; } 8% { opacity: 0.92; } 22% { background: var(--pink-500); } 42% { background: #9c8a3e; } 93% { opacity: 0.92; } 100% { background: #9c8a3e; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .autumn-fall .fall-leaf { animation: none; opacity: 0; } } .feature-row .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; } .feature-row.reverse .wrap { direction: rtl; } .feature-row.reverse .wrap > * { direction: ltr; } /* .mode-panel's per-panel titles are deliberately

(subordinate to the section's own

in .section-head above), but need the exact same visual weight as every other feature heading on the page — there was no .feature-copy h3 rule at all, so it fell back to the browser's tiny default h3 size. */ .feature-copy h2, .feature-copy h3 { font-size: clamp(26px, 3vw, 36px); margin: 14px 0 16px; } .feature-copy p { color: var(--ink-soft); font-size: 16px; max-width: 48ch; margin-bottom: 22px; } .feature-copy ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; } .feature-copy li { display: flex; gap: 10px; font-size: 15px; color: var(--accent-blue); } .feature-copy li::before { content: "✓"; color: var(--amber); font-weight: 700; } /* Pain-point lists (About page's "problem we kept running into") aren't benefits, so a checkmark reads backwards — the plane glyph instead (same marker as the FAQ's neutral/informational bullets). */ .feature-copy ul.problem-list li::before { content: ""; flex: 0 0 auto; width: 17px; height: 14px; margin-top: 3px; background: url("../img/plane-icon.svg") no-repeat center / contain; } .feature-art { display: flex; justify-content: center; } .feature-art img { width: min(280px, 70vw); /* Locks every feature screenshot to the same on-screen proportions regardless of its source file's exact native resolution — without this, a file whose real aspect ratio doesn't exactly match its width/height HTML attributes renders stretched or squashed relative to its neighbours (object-fit: contain avoids that distortion). */ aspect-ratio: 280 / 580; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(14, 27, 51, 0.18)); } /* Homepage only: the 30px/40px shadow needs ~70-100px of clear space below the phone to fade to nothing, but this page's section padding is down to 51px (see body.home .feature-row) — the shadow was getting sliced off by the next section's opaque background mid-fade instead of fading out, reading as a hard cutoff. A tighter shadow that actually fits the space it has, rather than more padding to fit the original shadow. Features/About keep the original shadow. */ body.home .feature-art img { filter: drop-shadow(0 14px 18px rgba(14, 27, 51, 0.18)); } /* ── Cards ───────────────────────────────────────────────────────────── */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .card { background: var(--white); border: 1px solid var(--mist); border-radius: var(--radius); padding: 28px; } .card .icon { width: 44px; height: 44px; border-radius: 12px; background: var(--ice); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 20px; } .card h3 { font-size: 18px; margin-bottom: 8px; } .card p { color: var(--ink-soft); font-size: 14.5px; } /* ── FAQ ─────────────────────────────────────────────────────────────── */ .faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; } .faq-item { background: var(--white); border: 1px solid var(--mist); border-radius: var(--radius); padding: 0 28px; } .faq-item summary { list-style: none; cursor: pointer; padding: 20px 32px 20px 0; position: relative; font-weight: 600; font-size: 16px; color: var(--ink); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 22px; line-height: 1; font-weight: 400; color: var(--accent-blue); transition: transform 0.2s ease; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p, .faq-item ul { color: var(--ink-soft); font-size: 15px; margin: 0 0 12px; } .faq-item p:first-of-type { margin-top: -6px; } .faq-item > *:last-child { margin-bottom: 22px; } .faq-item ul { list-style: none; padding: 0; display: grid; gap: 8px; } .faq-item li { display: flex; gap: 10px; align-items: flex-start; } .faq-item li::before { content: ""; flex: 0 0 auto; width: 17px; height: 14px; margin-top: 3px; background: url("../img/plane-icon.svg") no-repeat center / contain; } /* Trip-roles answer: each bullet is the role's own icon (matching features.html's role cards) instead of the default plane marker. */ .faq-item ul.faq-roles li::before { content: none; width: 0; height: 0; margin: 0; } .faq-item strong { color: var(--ink); } .faq-item a { color: var(--accent-blue); font-weight: 600; } /* ── CTA banner ──────────────────────────────────────────────────────── */ .cta-banner { position: relative; background: linear-gradient(to bottom, var(--pink-300), var(--pink-700)); color: var(--cream); padding: 72px 0; text-align: center; } /* Homepage only, same 20% pass as .feature-row/.stat-strip — About/ Features keep the full 72px. */ body.home .cta-banner { padding: 58px 0; /* zone-3 now arrives flat (see .feature-row.zone-3) — flatten this banner's own top 15% to match, same reasoning as the zone easing above. Only overriding the top stop; pink-700 at the bottom is unchanged. */ background: linear-gradient( to bottom, var(--pink-300) 0%, var(--pink-300) 15%, var(--pink-700) 100% ); } .cta-banner .wrap { position: relative; z-index: 1; } .cta-banner h2 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 14px; color: var(--cream); } .cta-banner p { color: var(--pink-100); max-width: 52ch; margin: 0 auto 30px; font-size: 16px; } .cta-banner .hero-actions { justify-content: center; } /* Subpages that reach flat cream before their CTA banner (about/features) fade oatmeal -> pink across the banner itself, so the seam with the feature row above it disappears the same way the hero fade does at top. */ .cta-banner.from-cream { background: linear-gradient( to bottom, var(--cream) 0, #f8d2db 33%, var(--pink-300) 66%, var(--pink-700) 100% ); } /* Andes/Machu Picchu theme (about.html): stone-cream fades through adobe tan into terracotta, continuing the body's teal-to-stone gradient. */ .cta-banner.from-stone { background: linear-gradient( to bottom, #efe6c9 0, #ddb488 33%, #c97b4a 66%, #8a4a2b 100% ); } /* Socotra theme (features.html): cream fades through pale aqua and the body gradient's own turquoise-lagoon stop back down into the deep sea-blue the hero started at, bookending the page in its own palette instead of the site's default pink. */ .cta-banner.from-socotra { background: linear-gradient( to bottom, var(--cream) 0, #bfe9e3 33%, #17a3ad 66%, #123c52 100% ); } /* ── Section header ──────────────────────────────────────────────────── */ .section-head { max-width: 640px; margin: 0 auto 8px; text-align: center; } .section-head.left { margin: 0 0 8px; text-align: left; } .section-head h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 14px 0; } .section-head p { color: var(--ink-soft); font-size: 16.5px; } /* ── Trip mode toggle (features.html): Personal/Work replaces the plain Work Mode row — everything else on the page (itinerary, chat, route, expenses, themes) is identical either way, so only the one section that's genuinely different gets a switch instead of its own row. ── */ .mode-toggle { display: inline-flex; margin-top: 22px; padding: 4px; background: var(--pink-50); border-radius: var(--radius-pill); } .mode-toggle button { appearance: none; border: none; background: transparent; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; padding: 9px 24px; border-radius: var(--radius-pill); color: var(--ink-soft); transition: background 0.2s ease, color 0.2s ease; } .mode-toggle button.active { background: var(--accent-blue); color: var(--white); box-shadow: var(--shadow-card); } .mode-toggle button:not(.active):hover { color: var(--ink); } .mode-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .mode-eyebrow.personal { color: var(--amber); } .mode-eyebrow.work { color: var(--accent-blue); } .trip-mode .mode-panel { display: none; margin-top: 8px; } .trip-mode .mode-panel.active { display: grid; animation: mode-fade 0.35s ease; } @keyframes mode-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .trip-mode .mode-panel.active { animation: none; } } /* Subpages (about/features/download/unsubscribe) paint the blue-to-oatmeal gradient once on body — nav sits opaque on top, .page-hero and the feature-row sections below stay transparent so the same gradient reads through as one continuous fade into the cream surface, no seams. */ body.subpage { background: linear-gradient( to bottom, var(--sky-800) 0, var(--sky-500) 180px, #7cbdda 360px, #bcdce9 520px, var(--cream) 700px ); } /* Andes/Machu Picchu theme (about.html): same fade structure as the default subpage gradient, recolored from misty mountain teal through moss green into warm stone — an Andes counterpart to the Kyoto/sakura homepage. */ body.subpage.theme-andes { background: linear-gradient( to bottom, #16302b 0, #2c6157 180px, #5c8f5f 360px, #a3c17e 520px, #efe6c9 700px ); } /* Andes theme eyebrows ("Why Kumo", "What we believe") go amber instead of pink-100/maroon, matching the gold already used for the plane icon and leaf-pile pieces elsewhere on the site. */ body.theme-andes .eyebrow, body.theme-andes .page-hero .eyebrow { color: #e8b54a; } body.theme-andes .eyebrow::before, body.theme-andes .page-hero .eyebrow::before { background: #e8b54a; } /* The hero illustration sits right behind the heading/paragraph, so give them a soft dark shadow to stay legible over its busier, lighter areas. */ body.theme-andes .page-hero h1, body.theme-andes .page-hero p, body.theme-andes .page-hero .eyebrow { text-shadow: 0 2px 14px rgba(10, 20, 15, 0.75); } /* Wineglass Bay theme (download.html): same fade structure again, this time from the illustration's forest-canopy green down into its lagoon/ocean blue — the coastal-Tasmania counterpart to the Andes/Kyoto subpage themes. Compressed toward the top (was 0/100/360/520/700, sitting in the darkest olive for the nav's whole ~119px real height and reading flat and dull): the nav now visibly brightens from forest green into the lighter teal within its own height instead of staying dark the whole way, same fix as the homepage hero's sky-800->sky-500 rebalance. */ body.subpage.theme-bay { background: linear-gradient( to bottom, #4c6b28 0, #2f7f6e 120px, #1f8fa0 360px, #12779b 520px, #12779b 700px ); } body.theme-bay .eyebrow, body.theme-bay .page-hero .eyebrow { color: #e8b54a; } body.theme-bay .eyebrow::before, body.theme-bay .page-hero .eyebrow::before { background: #e8b54a; } body.theme-bay .page-hero h1, body.theme-bay .page-hero p, body.theme-bay .page-hero .eyebrow { text-shadow: 0 2px 14px rgba(10, 20, 15, 0.75); } /* Socotra theme (features.html): same fade structure again, this time from the illustration's deep sea-blue down through its turquoise lagoon into its white-sand beach — the Yemeni-island counterpart to the Andes/Bay/ Kyoto subpage themes. */ body.subpage.theme-socotra { background: linear-gradient( to bottom, #123c52 0, #1f6f95 180px, #17a3ad 360px, #8fdbd0 520px, var(--cream) 700px ); } body.theme-socotra .eyebrow, body.theme-socotra .page-hero .eyebrow { color: #e8b54a; } body.theme-socotra .eyebrow::before, body.theme-socotra .page-hero .eyebrow::before { background: #e8b54a; } body.theme-socotra .page-hero h1, body.theme-socotra .page-hero p, body.theme-socotra .page-hero .eyebrow { text-shadow: 0 2px 14px rgba(10, 20, 15, 0.75); } .page-hero { position: relative; color: var(--cream); overflow: hidden; padding: 64px 0 56px; text-align: center; } .page-hero .wrap { position: relative; z-index: 1; } .page-hero .eyebrow { justify-content: center; color: var(--pink-100); } .page-hero .eyebrow::before { background: var(--cream); } .page-hero h1 { font-size: clamp(34px, 5vw, 56px); margin: 16px 0 14px; text-transform: uppercase; letter-spacing: -0.01em; } .page-hero p { color: var(--pink-100); max-width: 56ch; margin: 0 auto; font-size: 17px; } /* ── Footer ──────────────────────────────────────────────────────────── */ .site-footer { background: linear-gradient(to bottom, var(--pink-700), #6e2c45); color: var(--pink-100); padding: 72px 0 32px; } /* Subpages with no CTA banner above the footer (download/unsubscribe) carry the full oatmeal -> pink -> maroon fade across the footer itself. */ .site-footer.from-cream { background: linear-gradient( to bottom, var(--cream) 0, #f8d2db 20%, var(--pink-300) 40%, var(--pink-700) 70%, #6e2c45 100% ); } /* Andes/Machu Picchu theme footer (about.html): continues from the cta-banner's terracotta down into a deep umber-brown. */ .site-footer.from-stone { background: linear-gradient(to bottom, #8a4a2b, #33261c); } /* Socotra theme footer (features.html): continues from the cta-banner's deep sea-blue down into a near-black navy. */ .site-footer.from-socotra { background: linear-gradient(to bottom, #123c52, #051620); } /* Wineglass Bay theme footer (download.html): no CTA banner sits above this page's footer, so it carries the rest of the lagoon -> deep-ocean fade itself, starting from the exact colour body.theme-bay settles into above it (#12779b) for a seamless join, then darkening toward the bottom. */ .site-footer.from-bay { background: linear-gradient( to bottom, #12779b 0, #0d5a78 40%, #0a3a52 70%, #051f2e 100% ); } .footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding-bottom: 32px; } .footer-brand img { height: 44px; margin-bottom: 14px; } .footer-brand p { font-size: 14px; color: rgba(255, 243, 246, 0.65); max-width: 30ch; } .footer-social { display: flex; gap: 12px; margin-top: 20px; } .footer-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 243, 246, 0.1); color: var(--pink-100); transition: background 0.15s ease, color 0.15s ease; } .footer-social a:hover { background: rgba(255, 243, 246, 0.2); color: var(--cream); } .footer-social svg { width: 16px; height: 16px; fill: currentColor; } .footer-col-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 243, 246, 0.55); margin-bottom: 16px; font-weight: 600; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .footer-col a { text-decoration: none; font-size: 14.5px; color: var(--pink-100); transition: color 0.15s ease; } .footer-col a:hover { color: var(--cream); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; font-size: 13px; color: rgba(255, 243, 246, 0.55); flex-wrap: wrap; gap: 12px; } /* ── Reveal-on-scroll ────────────────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-reveal].is-visible { opacity: 1; transform: none; } /* ── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; text-align: center; padding-top: 8px; } .hero-copy p.lead { margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; } .hero-art { margin-top: 32px; } .stat-strip .wrap { grid-template-columns: repeat(2, 1fr); } .feature-row .wrap { grid-template-columns: 1fr; text-align: center; gap: 32px; } .feature-row.reverse .wrap { direction: ltr; } .feature-copy p { margin-left: auto; margin-right: auto; } .feature-copy ul { justify-items: center; } .feature-copy li { justify-content: center; } .card-grid { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr 1fr; } } /* Collapsing at 1200px, not 720px: the pill-style nav now carries 3 left pills + the logo + 3 right pills (Download, Get notified, Log in). Measured directly (forcing .wrap to various widths and checking for overlap with the logo) — the right-hand group starts overlapping the logo once .wrap drops below ~1100px, which .wrap tracks close to 1:1 below its own 1160px cap. Below 720px the pills didn't just get tight, they visibly collided with the logo and hero text (About sitting on the cloud icon, Download sitting on "Plan. Go. Explore.") — moving the collapse point above that overlap threshold, with margin, removes the broken in-between zone entirely instead of shrinking it. */ @media (max-width: 1200px) { /* .nav-links-left carries `justify-self: start` for its desktop grid column (see .site-nav.pill-style .nav-links-left above). Chromium keeps honoring that alignment for the shrink-to-fit *size* of this absolutely-positioned box even though left/right are both set to 0 here — not just its position — so the dropdown panel was sized to its content's natural width (a ~200px box hugging the left edge) instead of the full nav width the left:0/right:0 pair asks for. Overriding back to stretch is what actually makes it span edge to edge, matching .nav-links-right (which has no justify-self of its own to fight). */ .site-nav.pill-style .nav-links-left { justify-self: stretch; } .nav-links { display: none; position: absolute; top: 76px; left: 0; right: 0; background: var(--white); flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 var(--pad); } /* .site-nav.pill-style .nav-links (desktop pill row) sets gap: 8px at the same 3-class specificity as the plain .nav-links rule above, so that 8px was winning here too, undetected because a plain 8px gap still looked "even" on its own — it only became visible as a mismatch once compared against the 4px seam the rest of this dropdown (About/ Download, Download/Get notified) uses. Re-declared here, later in the cascade at matching specificity, so mobile actually gets the 4px this block already asks for. */ .site-nav.pill-style .nav-links { gap: 4px; } .nav-links.is-open { display: flex; } /* .nav-links-left and .nav-links-right are two separate