to tint it; leave it off for the plain cream page colour. */ .home-v2 .px-section{ position:relative; } .home-v2 .px-alt{ background: var(--paper-2); } /* ---------- 2. Reset the reused hooks ---------- main.css styles .card-expedition / .departure-item / .fleet-card / .testi / .faq-item as finished components (full-bleed photo cards and bordered boxes). The homepage re-uses those class names ONLY as hooks for content.js, so everything main.css painted on them is removed here and re-built from scratch further down. */ .home-v2 .card-expedition, .home-v2 .departure-item, .home-v2 .fleet-card, .home-v2 .testi, .home-v2 .faq-item{ position: relative; aspect-ratio: auto; padding: 0; gap: 0; color: inherit; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; text-shadow: none; } /* main.css lifts these children onto their own stacking layer so they sit above a full-bleed photo. There is no full-bleed photo any more. */ .home-v2 .card-expedition > *, .home-v2 .departure-item > *, .home-v2 .testi > *{ position: static; z-index: auto; } /* Photo frames inside cards: main.css pins them behind the card (position:absolute, inset:0). Here they are ordinary blocks again. */ .home-v2 .card-art{ position: relative; inset: auto; aspect-ratio: auto; width: 100%; border-radius: var(--px-r-sm); overflow: hidden; background: var(--surface-2); box-shadow: none; } .home-v2 .card-art::after{ content: none; } /* kills the old dark scrim */ .home-v2 .card-art img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1.1s var(--ease); } /* Undo the light-on-dark text colours the old overlay cards needed. */ .home-v2 .card-expedition h3, .home-v2 .card-expedition .card-meta, .home-v2 .card-expedition .kicker, .home-v2 .card-expedition .card-price, .home-v2 .card-expedition .text-link, .home-v2 .departure-item h4, .home-v2 .departure-item .meta, .home-v2 .departure-item .amount, .home-v2 .departure-date{ text-shadow: none; } /* ---------- 3. Shared homepage furniture ---------- */ /* .px-head — the standard heading block above every section. Add "px-head-split" for the two-column version (title left, supporting paragraph + link right). */ .home-v2 .px-head{ max-width: 54ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .home-v2 .px-head .display-2{ margin-top: 1rem; } .home-v2 .px-head .lede{ margin-top: 1.1rem; } .home-v2 .px-head-split{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; max-width: none; } .home-v2 .px-head-split .lede{ margin-top: 0; } .home-v2 .px-head-split .text-link{ margin-top: 1.2rem; } /* A hairline with a small rust tick on the left — used as a quiet divider between a heading and the content it introduces. */ .home-v2 .px-rule{ height: 1px; border: 0; margin: 0 0 clamp(2rem, 4vw, 3rem); background: linear-gradient(90deg, var(--rust) 0 3.5rem, var(--px-line) 3.5rem 100%); } /* Small uppercase label chip on light backgrounds. */ .home-v2 .px-chip{ display: inline-flex; align-items: center; gap: .4rem; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rust-text); background: var(--rust-tint); border: 1px solid var(--gold-line); padding: .32rem .62rem; border-radius: var(--px-r-xs); } /* ---------- Buttons — sharper corners + a sliding arrow ---------- main.css's site-wide .im-btn family ships as a full stadium pill (border-radius:999px) with nothing beyond its gradient sweep — a shape left over from an earlier theme, and the odd one out on this page: every other pill here (.px-chip, tags, the status badges) already uses the sharper --px-r-sm/--px-r-xs radius this redesign introduced. Pulling every button on the homepage — Reserve Seat, Request This Raid, Start an Enquiry, the two hero buttons, all of it — onto that same radius makes them read as part of THIS design instead of a carried-over component. The sliding arrow is the same trick already used on every .text-link across the page (a plain "→", not an SVG), so a button and a text link now share one signature interaction instead of the buttons just sitting there static. */ .home-v2 .im-btn, .home-v2 .btne, .home-v2 .btnr{ border-radius: var(--px-r-sm); } .home-v2 .im-btn:focus-visible, .home-v2 .btne:focus-visible, .home-v2 .btnr:focus-visible{ border-radius: var(--px-r-sm); } .home-v2 .im-btn-small{ border-radius: var(--px-r-xs); } .home-v2 .im-btn::after, .home-v2 .btne::after, .home-v2 .btnr::after{ content: "→"; display: inline-block; transition: transform .3s var(--ease); } .home-v2 .im-btn:hover::after, .home-v2 .btne:hover::after, .home-v2 .btnr:hover::after{ transform: translateX(4px); } /* a disabled button ("Convoy Departed" / "Convoy Underway") isn't taking anyone anywhere — drop the arrow rather than promise a click it can't honour */ .home-v2 .im-btn.is-disabled::after{ content: none; } /* .btne's ember gradient earns a slightly hotter glow on hover than the site-wide default — this button carries the whole hero's call to action, so it gets the most dramatic treatment on the page. */ .home-v2 .btne:hover{ box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 0 -2px 4px rgba(0,0,0,.12), 0 4px 8px rgba(11,24,48,.28), 0 18px 38px -12px rgba(11,24,48,.36), 0 16px 50px -8px rgba(207,98,18,.85); } /* ---------- 4. HERO — split layout ---------- The old hero was one full-screen photo with the words on top. This one splits the screen: words on the left, a tall framed photo on the right with the "next departure" card floating over its corner, and the four counting statistics fused along the bottom edge. */ .home-v2 .px-hero{ position: relative; overflow: hidden; background: var(--dark); color: var(--dark-ink); padding-top: clamp(7.5rem, 12vw, 11rem); isolation: isolate; /* keeps the glow behind the content */ } /* Decorative background: faint contour lines + a warm glow bottom-right, so the navy never looks like a flat block of colour. */ .home-v2 .px-hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; } .home-v2 .px-hero-bg::before{ content:""; position:absolute; inset:0; background: url('../assets/topo.svg') center / 560px auto repeat; opacity: .9; } .home-v2 .px-hero-bg::after{ content:""; position:absolute; right: -18%; bottom: -35%; width: 78vw; height: 78vw; max-width: 1100px; border-radius: 50%; background: radial-gradient(circle, rgba(207,98,18,0.30) 0%, rgba(207,98,18,0.10) 40%, transparent 66%); } .home-v2 .px-hero-grid{ position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; padding-bottom: clamp(3.5rem, 7vw, 6rem); } /* -- left: the words -- */ .home-v2 .px-hero-eyebrow{ color: var(--rust-soft); } .home-v2 .px-hero-eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--rust-soft); flex: none; animation: pxBeacon 2.4s ease-in-out infinite; } @keyframes pxBeacon{ 0%,100%{ box-shadow: 0 0 0 0 rgba(232,160,99,.55); } 60% { box-shadow: 0 0 0 8px rgba(232,160,99,0); } } .home-v2 .px-hero h1{ margin-top: 1.4rem; color: var(--dark-ink); font-size: clamp(2.7rem, 5.6vw, 4.7rem); line-height: .98; letter-spacing: -.038em; text-wrap: balance; } .home-v2 .px-hero h1 .ital{ color: var(--rust-soft); } .home-v2 .px-hero .lede{ margin-top: 1.35rem; max-width: 44ch; color: rgba(246,243,236,.76); } .home-v2 .px-hero-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.2rem; } .home-v2 .px-hero .text-link{ color: var(--dark-ink); } /* ---------- Hero buttons — .btne (primary) / .btnr (outline) ---------- The two hero CTAs ("View Expeditions" / "Build Your Raid"). Same pill shape, weight and interaction language as the site-wide .im-btn family in main.css, but built standalone under their own class names so they don't depend on .im-btn being present in the HTML. .btne = filled ember gradient — the primary action .btnr = glass outline, tuned for sitting on the dark hero photo — the secondary action */ .home-v2 .btne, .home-v2 .btnr{ position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: 1.05rem 2.1rem; font-family: var(--font-display); font-size: .84rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid transparent; white-space: nowrap; cursor: pointer; /* border-radius + the sliding arrow are set once, for every homepage button at once, in the "Buttons" block above */ } .home-v2 .btne:focus-visible, .home-v2 .btnr:focus-visible{ outline: 2px solid var(--dark-ink); outline-offset: 3px; } /* .btne — the ember gradient, painted at 200% width; hover slides it so light appears to travel across the button instead of the colour simply swapping. Kept in the bright half throughout so the navy label always holds a safe contrast ratio against it. */ .home-v2 .btne{ background: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 52%), linear-gradient(115deg, var(--rust) 0%, #DE7A2A 52%, #E8A063 100%); background-size: 100% 100%, 200% 100%; background-position: 0% 0%, 0% 50%; color: var(--dark); border-color: rgba(11,24,48,.16); box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -2px 4px rgba(0,0,0,.14), 0 2px 4px rgba(11,24,48,.2), 0 10px 22px -8px rgba(11,24,48,.28), 0 8px 26px -8px rgba(207,98,18,.45); transition: background-position .55s cubic-bezier(.22,.8,.32,1), border-color .35s var(--ease), box-shadow .35s var(--ease); } .home-v2 .btne:hover{ background-position: 0% 0%, 100% 50%; border-color: rgba(11,24,48,.28); box-shadow: inset 0 1px 1px rgba(255,255,255,.62), inset 0 -2px 4px rgba(0,0,0,.12), 0 3px 6px rgba(11,24,48,.24), 0 14px 30px -10px rgba(11,24,48,.32), 0 12px 40px -6px rgba(207,98,18,.75); } .home-v2 .btne:active{ transform: translateY(1px); } /* .btnr — light-on-dark glass, since it sits directly on the hero photo. A frosted fill plus a hairline border; hover just brightens both. */ .home-v2 .btnr{ background-image: linear-gradient(180deg, rgba(246,243,236,.05), rgba(246,243,236,.12)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--dark-ink); border-color: rgba(246,243,236,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: background-image .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); } .home-v2 .btnr:hover{ background-image: linear-gradient(180deg, rgba(246,243,236,.22), rgba(246,243,236,.30)); border-color: rgba(246,243,236,.65); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px -12px rgba(0,0,0,.5); } .home-v2 .btnr:active{ transform: translateY(1px); } @media (prefers-reduced-motion: reduce){ .home-v2 .btne, .home-v2 .btnr{ transition: none; } } /* the small rating line under the buttons */ .home-v2 .px-hero-rating{ display: flex; align-items: center; gap: .7rem; margin-top: 2.1rem; padding-top: 1.5rem; border-top: 1px solid var(--dark-line); font-size: .84rem; color: rgba(246,243,236,.66); } .home-v2 .px-hero-rating .stars{ color: var(--rust-soft); letter-spacing: .16em; font-size: .9rem; } /* -- right: the framed photo + the pieces floating on it -- */ .home-v2 .px-hero-media{ position: relative; } .home-v2 .px-hero-frame{ position: relative; aspect-ratio: 5 / 6; border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 50px 90px -40px rgba(0,0,0,0.85), 0 10px 30px -14px rgba(0,0,0,0.6); } /* .hero-media is a main.css class kept so content.js can swap the photo (it sets both the src and this element's background image). It is inset slightly so the gentle parallax drift never exposes an edge. */ .home-v2 .px-hero-frame .hero-media{ position: absolute; inset: -7%; background-position: center 45%; background-size: cover; } .home-v2 .px-hero-frame .hero-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; transform: none; } /* a soft darkening at the foot of the photo so the floating card reads */ .home-v2 .px-hero-frame::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(200deg, rgba(11,24,48,0) 45%, rgba(11,24,48,0.55) 100%); } /* "Est. 2008" seal, top-right of the frame */ .home-v2 .px-hero-seal{ position: absolute; z-index: 3; top: 1.15rem; right: 1.15rem; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; font-family: var(--font-display); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dark-ink); background: rgba(11,24,48,.58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; } .home-v2 .px-hero-seal::before{ content:""; width:5px; height:5px; border-radius:50%; background: var(--rust-soft); } /* the small square photo that overlaps the frame's top-left corner */ .home-v2 .px-hero-inset{ position: absolute; z-index: 3; top: 2.6rem; left: -2.2rem; width: clamp(7rem, 11vw, 9.5rem); aspect-ratio: 1; border-radius: 18px; overflow: hidden; border: 5px solid var(--dark); box-shadow: 0 26px 50px -22px rgba(0,0,0,.8); transform: rotate(-3deg); } .home-v2 .px-hero-inset img{ width:100%; height:100%; object-fit:cover; } /* the floating "next departure" card — main.css's .dep-card design is kept as-is (dark glass); only where it sits has changed. */ .home-v2 .hero-dep{ position: absolute; z-index: 4; top: auto; right: auto; bottom: -1.5rem; left: -1.5rem; margin: 0; /* main.css gives this element margins on small screens; zero them so they can never fight the corner placement above */ } .home-v2 .dep-card{ width: 292px; } /* main.css tints this card dark OLIVE (a colour left over from an older theme). Against the navy hero that reads green, so the panel is retinted to navy glass here. The green top edge, "few seats left" badge and price are left alone on purpose — green is the site's "seats available" signal. */ .home-v2 .dep-card{ background: rgba(11,24,48,.74); border-color: rgba(246,243,236,.16); border-top-color: var(--pine-soft); } /* Status-driven badge colour — mirrors .departure-status on the Upcoming Departures cards below, so "filling fast" reads the same everywhere. No extra class = the green "seats open" look main.css already painted on .dep-card-badge; content.js adds "is-urgent" to switch it to rust. */ .home-v2 .dep-card-badge.is-urgent{ color: var(--dark); background: var(--rust-soft); border-color: transparent; } .home-v2 .dep-card-badge.is-urgent::before{ background: var(--dark); box-shadow: 0 0 0 3px rgba(11,24,48,0.22); } /* "3 of 12 seats left" — content.js sets the text and, when this raid is the one currently on the road (HERO_DEPARTURE.status: "running"), hides the line with the `hidden` attribute instead (nothing left to sell). */ .home-v2 .dep-card-seats{ margin-top: .5rem; font-size: .74rem; font-weight: 600; color: var(--pine-soft); } /* "Convoy Underway" — the Reserve button's disabled state while the hero card is showing a raid that's already running. Mirrors .departure-cta.is-disabled below; needs its own rule because .dep-card .im-btn-primary paints a `background-image` gradient that a plain `background` override can't clear. */ .home-v2 .dep-card-actions .im-btn.is-disabled{ pointer-events: none; cursor: not-allowed; background-color: rgba(246,243,236,.06); background-image: none; color: rgba(246,243,236,.45); border-color: rgba(246,243,236,.16); box-shadow: none; } /* -- the stat ribbon fused to the hero's bottom edge -- Uses main.css's .stats-bar / .stat so js/content.js keeps filling the four numbers and labels from STATS in data.js. */ .home-v2 .px-hero-ribbon{ position: relative; z-index: 2; background: rgba(255,255,255,0.045); border-top: 1px solid var(--dark-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .home-v2 .px-hero-ribbon .stat{ padding-block: clamp(1.1rem, 2.2vw, 1.7rem); padding-inline: clamp(1rem, 2.4vw, 2.2rem); } .home-v2 .px-hero-ribbon .stat:first-child{ padding-left: 0; } .home-v2 .px-hero-ribbon .stat .num{ font-size: clamp(1.7rem, 3.2vw, 2.6rem); } .home-v2 .px-hero-ribbon .stat .label{ font-size: .78rem; } /* the scrolling ticker sits directly under the hero */ .home-v2 .marquee{ border-top: 0; } /* ---------- 5. Assurance strip ---------- Four short promises in a row, separated by hairlines. Plain HTML — no script fills this in, so edit the words straight in index.html. */ .home-v2 .px-assure{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--px-line); border-radius: var(--px-r); background: var(--surface); box-shadow: var(--px-shadow); overflow: hidden; } .home-v2 .px-assure-item{ display: flex; align-items: flex-start; gap: .9rem; padding: clamp(1.3rem, 2.4vw, 1.9rem); border-left: 1px solid var(--px-line-soft); } .home-v2 .px-assure-item:first-child{ border-left: 0; } .home-v2 .px-assure-item svg{ flex: none; width: 22px; height: 22px; margin-top: .1rem; fill: none; stroke: var(--rust); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .home-v2 .px-assure-item h3{ font-family: var(--font-display); font-size: .95rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); } .home-v2 .px-assure-item p{ margin-top: .3rem; font-size: .82rem; line-height: 1.5; color: var(--ink-soft); } /* ---------- 6. Featured expeditions — numbered editorial rows ---------- Each row keeps the class "card-expedition" because content.js writes the name / tags / meta / blurb / photo / price into it. The layout is a grid with four named areas so the price paragraph that content.js INSERTS at run time always lands in the right place. */ .home-v2 .px-routes{ display: grid; gap: 1rem; } .home-v2 .card-expedition.px-route{ display: grid; grid-template-columns: 3.5rem /* the big 01 / 02 / 03 */ minmax(0, 14rem) /* photo */ minmax(0, 1fr) /* title + blurb */ minmax(0, 11rem); /* price + link */ grid-template-areas: "idx art body price" "idx art body link"; align-items: center; gap: clamp(.9rem, 2.2vw, 2rem); padding: 1rem 1.7rem 1rem 1rem; background: var(--surface); border: 1px solid var(--px-line); border-radius: var(--px-r); box-shadow: var(--px-shadow); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } /* a rust bar slides in down the left edge on hover */ .home-v2 .card-expedition.px-route::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: linear-gradient(180deg, var(--rust-soft), var(--rust)); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); } .home-v2 .card-expedition.px-route:hover{ transform: translateY(-4px); border-color: rgba(207,98,18,.30); box-shadow: var(--px-shadow-lift); } .home-v2 .card-expedition.px-route:hover::before{ transform: scaleY(1); } .home-v2 .card-expedition.px-route:hover .card-art img{ transform: scale(1.07); } .home-v2 .px-route-idx{ grid-area: idx; justify-self: center; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--ink-faint); opacity: .5; transition: color .4s var(--ease), opacity .4s var(--ease); } .home-v2 .card-expedition.px-route:hover .px-route-idx{ color: var(--rust); opacity: 1; } .home-v2 .card-expedition.px-route .card-art{ grid-area: art; aspect-ratio: 4 / 3; align-self: stretch; border-radius: var(--px-r-sm); } .home-v2 .px-route-body{ grid-area: body; min-width: 0; } .home-v2 .card-expedition.px-route .card-tags{ gap: .4rem; } .home-v2 .card-expedition.px-route .tag{ background: rgba(11,24,48,.04); border-color: var(--px-line); color: var(--ink-soft); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } .home-v2 .card-expedition.px-route .tag.rust{ background: var(--rust-tint); border-color: var(--gold-line); color: var(--rust-text); } .home-v2 .card-expedition.px-route h3{ margin-top: .65rem; font-size: clamp(1.25rem, 1.9vw, 1.7rem); color: var(--ink); letter-spacing: -.025em; } .home-v2 .card-expedition.px-route .card-meta{ margin-top: .45rem; font-size: .78rem; color: var(--ink-faint); } .home-v2 .card-expedition.px-route .card-meta span + span::before{ content:"·"; margin-right: .55rem; color: var(--line-strong); } .home-v2 .card-expedition.px-route .kicker{ margin-top: .55rem; max-width: 52ch; font-size: .88rem; line-height: 1.55; color: var(--ink-soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* content.js creates this

and puts it just before the link */ .home-v2 .card-expedition.px-route .card-price{ grid-area: price; justify-self: end; align-self: end; font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink-faint); text-align: right; } .home-v2 .card-expedition.px-route .card-price b{ display: block; font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); } .home-v2 .card-expedition.px-route .text-link{ grid-area: link; justify-self: end; align-self: start; margin-top: .55rem; color: var(--rust-text); } .home-v2 .card-expedition.px-route .text-link::after{ background: var(--rust); } /* ---------- 7. Upcoming departures — "expedition pass" cards ---------- White cards with the photo on top and a dashed tear-line above the price, like a boarding pass. content.js fills each one from DEPARTURES + EXPEDITIONS, and marks past ones with .is-closed / current ones with .is-running. */ .home-v2 .departures-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.4rem); } .home-v2 .departure-item{ display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--px-line); border-radius: var(--px-r); box-shadow: var(--px-shadow); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } .home-v2 .departure-item:hover{ transform: translateY(-6px); border-color: rgba(207,98,18,.30); box-shadow: var(--px-shadow-lift); } .home-v2 .departure-item .card-art{ aspect-ratio: 16 / 10; border-radius: 0; } .home-v2 .departure-item:hover .card-art img{ transform: scale(1.06); } /* the coloured status pill, floated over the photo */ .home-v2 .departure-status{ position: absolute; z-index: 2; top: .85rem; left: .85rem; border-radius: 999px; padding: .36rem .75rem; font-size: .62rem; } .home-v2 .departure-body{ display: flex; flex-direction: column; flex: 1; margin-top: 0; padding: 1.15rem 1.25rem 1.3rem; } .home-v2 .departure-date{ font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rust-text); font-weight: 600; } .home-v2 .departure-item h4{ margin-top: .5rem; font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.2; letter-spacing: -.02em; color: var(--ink); } .home-v2 .departure-item .meta{ margin-top: .4rem; font-size: .78rem; color: var(--ink-faint); } /* On the white homepage card the seat line is ink, not white — and it goes rust once a quarter or fewer are left, the same signal the seat bar on raid.html uses. */ .home-v2 .departure-seats{ margin-top: .5rem; font-size: .79rem; color: var(--ink-soft); text-shadow: none; } .home-v2 .departure-seats.is-low{ color: var(--rust-text); font-weight: 600; } .home-v2 .departure-seats.is-out{ color: var(--ink-faint); font-weight: 600; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; } /* the tear-line + price + button block, pinned to the bottom */ .home-v2 .px-pass-foot{ margin-top: auto; padding-top: .95rem; border-top: 1px dashed var(--line-strong); } .home-v2 .departure-item .amount{ margin-top: .15rem; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; color: var(--ink); } .home-v2 .departure-cta{ margin-top: .8rem; } /* main.css turns these two buttons into FROSTED GLASS, because they used to sit on top of a dark full-bleed photo. On a white card that reads as a flat grey slab, so both go back to normal here: the live one to the site's orange button, the departed one to a quiet grey outline. */ .home-v2 .departure-cta.im-btn-primary{ background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 52%), linear-gradient(115deg, var(--rust) 0%, #DE7A2A 52%, #E8A063 100%); background-size: 100% 100%, 200% 100%; background-position: 0% 0%, 0% 50%; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--dark); border-color: rgba(11,24,48,0.16); text-shadow: none; box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -2px 4px rgba(0,0,0,0.14), 0 2px 4px rgba(11,24,48,0.18), 0 8px 20px -8px rgba(207,98,18,0.45); transition: background-position .55s cubic-bezier(.22,.8,.32,1), border-color .35s var(--ease), box-shadow .35s var(--ease); } .home-v2 .departure-cta.im-btn-primary:hover{ background-position: 0% 0%, 100% 50%; border-color: rgba(11,24,48,0.28); box-shadow: inset 0 1px 1px rgba(255,255,255,0.62), 0 3px 6px rgba(11,24,48,0.22), 0 12px 32px -6px rgba(207,98,18,0.7); } .home-v2 .departure-cta.is-disabled{ pointer-events: none; cursor: not-allowed; background: rgba(11,24,48,0.05); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink-faint); border-color: var(--px-line); text-shadow: none; box-shadow: none; } /* departed / underway convoys — softened, not shouted */ .home-v2 .departure-item.is-closed{ box-shadow: none; background: rgba(255,255,255,.5); } .home-v2 .departure-item.is-closed:hover{ transform: none; box-shadow: none; border-color: var(--px-line); } .home-v2 .departure-item.is-closed h4{ color: var(--ink-soft); } .home-v2 .departure-item.is-closed .amount{ color: var(--ink-faint); } .home-v2 .departure-item.is-closed .departure-date{ color: var(--ink-faint); } /* ---------- 7b. Departure status — one look per state ---------- js/content.js stamps every card in the grid with a data-status: open still selling, plenty of room calm green signal seats a few seats left amber, warmer urgent filling fast copper, and it pulses soldout every seat gone hatched, unclickable running on the road right now pine, unclickable closed already departed grey, faded photo Everything coloured on the card is chosen from that one attribute — the pill over the photo, the button under the price, the top edge and the glow on hover — so a card can never end up wearing an orange pill above a grey button. Note which shades go where: the pill sits on the PHOTOGRAPH, so it uses --rust-soft / --pine-soft, the on-dark pair. The button sits on the WHITE card body, where those are too pale to read, so it uses --rust and --rust-text instead (see the note above --rust in main.css). */ /* ---- the pill over the photo ---- */ /* open — dark glass, but the dot and rim go green: room on this convoy */ .home-v2 .departure-item[data-status="open"] .departure-status{ background: rgba(11,24,48,.62); border-color: var(--pine-line); color: #fff; } .home-v2 .departure-item[data-status="open"] .departure-status::before{ background: var(--pine-soft); box-shadow: 0 0 0 3px rgba(143,191,126,.22); } /* seats — the same glass, warmed to amber. Louder than open, quieter than urgent, which is the whole point of having it. */ .home-v2 .departure-item[data-status="seats"] .departure-status{ background: rgba(11,24,48,.66); border-color: rgba(232,160,99,.62); color: var(--rust-soft); } .home-v2 .departure-item[data-status="seats"] .departure-status::before{ background: var(--rust-soft); box-shadow: 0 0 0 3px rgba(232,160,99,.22); } /* urgent — main.css already fills it copper and pulses it; all it needs here is a glow so it lifts off the photograph */ .home-v2 .departure-item[data-status="urgent"] .departure-status{ box-shadow: 0 4px 16px -4px rgba(207,98,18,.8); } /* running — main.css fills it pine; same treatment, green glow */ .home-v2 .departure-item[data-status="running"] .departure-status{ box-shadow: 0 4px 16px -4px rgba(69,107,60,.65); } /* soldout — solid navy. No colour left on it, because there is nothing left to sell. */ .home-v2 .departure-item[data-status="soldout"] .departure-status{ background: var(--ink); border-color: transparent; color: rgba(246,243,236,.92); letter-spacing: .1em; } .home-v2 .departure-item[data-status="soldout"] .departure-status::before{ background: rgba(246,243,236,.5); } /* closed — faded to the back of the page */ .home-v2 .departure-item[data-status="closed"] .departure-status{ background: rgba(11,24,48,.55); border-color: rgba(246,243,236,.16); color: rgba(246,243,236,.62); } /* ---- the button under the price ---- "open" is the baseline: the copper gradient set a few rules above, whose hover slides the gradient across. The others are pitched around it. */ /* seats — the same button inside an amber ring that tightens on hover */ .home-v2 .departure-item[data-status="seats"] .departure-cta.im-btn-primary{ border-color: rgba(163,71,16,.42); box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -2px 4px rgba(0,0,0,0.14), 0 0 0 3px rgba(232,160,99,0.30), 0 8px 20px -8px rgba(207,98,18,0.5); } .home-v2 .departure-item[data-status="seats"] .departure-cta.im-btn-primary:hover{ border-color: rgba(163,71,16,.6); box-shadow: inset 0 1px 1px rgba(255,255,255,0.62), 0 0 0 5px rgba(232,160,99,0.34), 0 12px 32px -6px rgba(207,98,18,0.7); } /* urgent — deeper copper, and it breathes. The animation stops the moment the pointer arrives, so the hover slide is not fighting a pulse. */ .home-v2 .departure-item[data-status="urgent"] .departure-cta.im-btn-primary{ background: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 52%), linear-gradient(115deg, #A34710 0%, var(--rust) 46%, #E8A063 100%); background-size: 100% 100%, 220% 100%; border-color: rgba(11,24,48,0.30); animation: ctaUrgent 2.4s ease-in-out infinite; } @keyframes ctaUrgent{ 0%, 100%{ box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 0 2px 4px rgba(11,24,48,0.18), 0 6px 18px -6px rgba(207,98,18,0.5); } 50%{ box-shadow: inset 0 1px 1px rgba(255,255,255,0.62), 0 3px 7px rgba(11,24,48,0.24), 0 14px 34px -6px rgba(207,98,18,0.95); } } .home-v2 .departure-item[data-status="urgent"] .departure-cta.im-btn-primary:hover{ animation: none; background-position: 0% 0%, 100% 50%; border-color: rgba(11,24,48,0.42); box-shadow: inset 0 1px 1px rgba(255,255,255,0.62), 0 3px 7px rgba(11,24,48,0.24), 0 14px 34px -6px rgba(207,98,18,0.95); } @media (prefers-reduced-motion: reduce){ .home-v2 .departure-item[data-status="urgent"] .departure-cta.im-btn-primary{ animation: none; } } /* running — dead to the touch, but green rather than grey: this convoy is very much alive, it just cannot be joined */ .home-v2 .departure-item[data-status="running"] .departure-cta.is-disabled{ background: var(--pine-tint); color: var(--pine); border-color: var(--pine-line); } /* soldout — hatched. Nothing else on the site looks like this, which is the point: "full" should not be mistaken for "loading". */ .home-v2 .departure-item[data-status="soldout"] .departure-cta.is-disabled{ background-color: rgba(11,24,48,0.05); background-image: repeating-linear-gradient(135deg, rgba(11,24,48,0.10) 0 6px, rgba(11,24,48,0) 6px 12px); color: var(--ink-soft); border-color: var(--line-strong); } /* closed — the quietest thing on the card */ .home-v2 .departure-item[data-status="closed"] .departure-cta.is-disabled{ background: rgba(11,24,48,0.04); color: var(--ink-faint); border-color: var(--px-line); } /* ---- the card itself ---- A coloured top edge, drawn as an inset shadow rather than a border so it cannot nudge the photograph down by a pixel. The hover rules repeat it because :hover replaces the whole box-shadow. */ .home-v2 .departure-item[data-status="urgent"]{ box-shadow: inset 0 3px 0 0 var(--rust), var(--px-shadow); } .home-v2 .departure-item[data-status="urgent"]:hover{ border-color: rgba(207,98,18,.55); box-shadow: inset 0 3px 0 0 var(--rust), var(--px-shadow-lift); } .home-v2 .departure-item[data-status="running"]{ box-shadow: inset 0 3px 0 0 var(--pine-soft), var(--px-shadow); } .home-v2 .departure-item[data-status="running"]:hover{ border-color: var(--pine-line); box-shadow: inset 0 3px 0 0 var(--pine-soft), var(--px-shadow-lift); } .home-v2 .departure-item[data-status="seats"]:hover{ border-color: rgba(207,98,18,.38); } .home-v2 .departure-item[data-status="open"]:hover{ border-color: rgba(69,107,60,.34); } /* nothing to sell, so nothing to invite a click: no lift, no zoom */ .home-v2 .departure-item[data-status="soldout"]{ background: rgba(255,255,255,.72); } .home-v2 .departure-item[data-status="soldout"] .card-art img{ filter: saturate(.55); } .home-v2 .departure-item[data-status="soldout"]:hover{ transform: none; border-color: var(--px-line); box-shadow: var(--px-shadow); } .home-v2 .departure-item[data-status="soldout"]:hover .card-art img{ transform: none; } .home-v2 .departure-item[data-status="soldout"] .departure-seats.is-out{ color: var(--ink-soft); } /* ---------- 8. Build Your Raid ---------- Left: four numbered steps using main.css's ordinary .form-field inputs. Right: a navy "estimate" card that sticks to the top of the screen while you scroll the steps. All the data-bw-* hooks main.js needs are unchanged. */ .home-v2 .px-build{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; } .home-v2 .px-build-form{ padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--surface); border: 1px solid var(--px-line); border-radius: var(--px-r); box-shadow: var(--px-shadow); } .home-v2 .px-step{ display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 1rem; padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--px-line-soft); } .home-v2 .px-step:last-child{ padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .home-v2 .px-step-n{ grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; font-family: var(--font-display); font-size: .8rem; font-weight: 700; color: var(--rust-text); background: var(--rust-tint); border: 1px solid var(--gold-line); border-radius: 50%; } .home-v2 .px-step-body{ grid-column: 2; min-width: 0; } .home-v2 .px-step-body .form-field{ margin-bottom: 0; } .home-v2 .px-step-body .im-field-row .form-field{ margin-bottom: 0; } .home-v2 .px-step-hint{ margin-top: .5rem; font-size: .78rem; color: var(--ink-faint); } /* -- the estimate card -- */ .home-v2 .px-build-summary{ position: sticky; top: 7.5rem; padding: clamp(1.5rem, 3vw, 2.2rem); color: var(--dark-ink); background: linear-gradient(165deg, var(--px-dark-2), var(--dark)); border: 1px solid rgba(255,255,255,.12); border-radius: var(--px-r); box-shadow: 0 40px 80px -40px rgba(11,24,48,.7), var(--px-shadow); overflow: hidden; } .home-v2 .px-build-summary::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 60% at 100% 0%, rgba(207,98,18,.22), transparent 60%); } .home-v2 .px-build-summary > *{ position: relative; } .home-v2 .px-build-summary .eyebrow{ color: var(--rust-soft); } .home-v2 .px-sum-dates{ margin-top: 1.1rem; padding: .85rem 1rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: var(--px-r-sm); } .home-v2 .px-sum-dates .px-sum-k{ font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dark-muted); } .home-v2 .px-sum-dates .booking-enddate{ margin-top: .3rem; padding-top: 0; font-size: .95rem; color: var(--dark-ink); } .home-v2 .booking-line{ display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.09); font-size: .88rem; color: var(--dark-muted); } .home-v2 .booking-line:first-of-type{ margin-top: 1.1rem; } .home-v2 .booking-line span:last-child{ color: var(--dark-ink); font-weight: 600; } .home-v2 .booking-total{ display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.18); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; color: var(--dark-ink); } .home-v2 .booking-total span:last-child{ font-size: 2rem; letter-spacing: -.03em; text-transform: none; color: var(--rust-soft); } /* matches whichever variant the button is wearing (it is the WhatsApp green one) — keyed off .im-btn so a colour change never breaks it */ .home-v2 .px-build-summary .im-btn{ width: 100%; justify-content: center; margin-top: 1.5rem; } .home-v2 .px-build-summary .form-note{ margin-top: .9rem; font-size: .76rem; line-height: 1.5; color: rgba(246,243,236,.5); } /* ---------- 9. Fleet ---------- Three motorcycle cards. content.js fills .fleet-tag / h3 / p / the photo from FLEET in data.js (edit them via EDIT_FLEET in js/edit-me.js). */ .home-v2 .px-fleet{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 2vw, 1.6rem); } .home-v2 .fleet-card{ display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--px-line); border-radius: var(--px-r); box-shadow: var(--px-shadow); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } .home-v2 .fleet-card:hover{ transform: translateY(-6px); border-color: rgba(207,98,18,.30); box-shadow: var(--px-shadow-lift); } .home-v2 .fleet-card .card-art{ aspect-ratio: 5 / 4; border-radius: 0; } .home-v2 .fleet-card:hover .card-art img{ transform: scale(1.06); } .home-v2 .fleet-tag{ align-self: flex-start; margin: 1.25rem 1.4rem 0; border-radius: 999px; color: var(--rust-text); background: var(--rust-tint); border: 1px solid var(--gold-line); } .home-v2 .fleet-card h3{ padding: .8rem 1.4rem 0; font-size: 1.25rem; letter-spacing: -.025em; color: var(--ink); } .home-v2 .fleet-card p{ padding: .6rem 1.4rem 1.6rem; font-size: .89rem; line-height: 1.6; color: var(--ink-soft); } /* ---------- 10. Why Indian Moto Adventures — bento grid ---------- Six points in an intentionally uneven grid: one wide photo tile, one wide plain tile, four squares. Plain HTML — edit the words in index.html. */ .home-v2 .px-bento{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.3rem); } .home-v2 .px-tile{ position: relative; display: flex; flex-direction: column; padding: clamp(1.4rem, 2.4vw, 1.9rem); background: var(--surface); border: 1px solid var(--px-line); border-radius: var(--px-r); box-shadow: var(--px-shadow); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } .home-v2 .px-tile:hover{ transform: translateY(-4px); border-color: rgba(207,98,18,.28); box-shadow: var(--px-shadow-lift); } .home-v2 .px-tile-wide{ grid-column: span 2; } /* The ghost numeral. It sits in the BOTTOM-right corner, opposite the little chip, because the top-right is where the paragraph text lands and the outline showing through the words hurt legibility. */ .home-v2 .px-tile-n{ position: absolute; bottom: -.55rem; right: 1rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(3.4rem, 6vw, 5rem); line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(11,24,48,.13); pointer-events: none; transition: -webkit-text-stroke-color .45s var(--ease); } .home-v2 .px-tile:hover .px-tile-n{ -webkit-text-stroke-color: rgba(207,98,18,.45); } .home-v2 .px-tile h3{ position: relative; font-size: 1.1rem; letter-spacing: -.015em; color: var(--ink); max-width: 18ch; } .home-v2 .px-tile p{ position: relative; margin-top: .6rem; font-size: .88rem; line-height: 1.6; color: var(--ink-soft); } .home-v2 .px-tile .px-chip{ margin-top: auto; padding-top: 0; align-self: flex-start; } .home-v2 .px-tile p + .px-chip{ margin-top: 1.2rem; } /* the one photo tile, which anchors the grid */ .home-v2 .px-tile-photo{ grid-column: span 2; justify-content: flex-end; min-height: 15rem; padding: clamp(1.4rem, 2.4vw, 2rem); border-color: transparent; color: var(--dark-ink); } .home-v2 .px-tile-photo img{ position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .home-v2 .px-tile-photo::after{ content:""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,24,48,.15) 0%, rgba(11,24,48,.86) 100%); } .home-v2 .px-tile-photo:hover img{ transform: scale(1.06); } .home-v2 .px-tile-photo > *{ position: relative; z-index: 2; } .home-v2 .px-tile-photo h3{ color: var(--dark-ink); max-width: 22ch; font-size: 1.35rem; } .home-v2 .px-tile-photo p{ color: rgba(246,243,236,.78); max-width: 40ch; } .home-v2 .px-tile-photo .px-chip{ color: var(--rust-soft); background: rgba(207,98,18,.18); border-color: rgba(232,160,99,.45); } /* Its numeral has to be drawn in cream, not navy, to show on the photo. `position` is repeated here because the rule just above puts every direct child of this tile back into the normal flow (to lift them over the photo), which would otherwise drag the numeral out of its corner. */ .home-v2 .px-tile-photo .px-tile-n{ position: absolute; bottom: -.55rem; right: 1rem; z-index: 2; -webkit-text-stroke-color: rgba(246,243,236,.45); } .home-v2 .px-tile-photo:hover .px-tile-n{ -webkit-text-stroke-color: rgba(232,160,99,.85); } /* ---------- 11. Testimonials — dark band ---------- The section keeps the class .testimonial-strip because content.js looks for ".testimonial-strip .testi" and the rating summary inside it. */ .home-v2 .testimonial-strip{ background: var(--dark); color: var(--dark-ink); overflow: hidden; } .home-v2 .testimonial-strip::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: url('../assets/topo.svg') center / 560px auto repeat, radial-gradient(80% 60% at 15% 0%, rgba(207,98,18,.20), transparent 60%); } .home-v2 .testimonial-strip .im-shell{ position: relative; z-index: 1; } .home-v2 .px-voices{ display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .home-v2 .px-voices-head{ position: sticky; top: 8rem; } .home-v2 .px-voices-head .display-2{ margin-top: 1rem; color: var(--dark-ink); } .home-v2 .px-voices-head .display-2 .ital{ color: var(--rust-soft); } /* the big rating block */ .home-v2 .px-score{ display: flex; align-items: center; gap: 1.1rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--dark-line); } .home-v2 .px-score-n{ font-family: var(--font-display); font-weight: 700; font-size: 3.6rem; line-height: 1; letter-spacing: -.04em; color: var(--rust-soft); } .home-v2 .px-score .review-summary{ display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--dark-muted); } .home-v2 .px-score .stars{ color: var(--rust-soft); letter-spacing: .2em; font-size: 1rem; } .home-v2 .px-quotes{ display: grid; gap: clamp(.9rem, 1.8vw, 1.2rem); } .home-v2 .testimonial-strip .testi{ padding: clamp(1.4rem, 2.6vw, 2rem); background: var(--px-glass); border: 1px solid rgba(255,255,255,.11); border-top: 1px solid rgba(255,255,255,.11); border-left: 3px solid var(--rust); border-radius: var(--px-r); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease); } .home-v2 .testimonial-strip .testi:hover{ background: rgba(255,255,255,.09); border-left-color: var(--rust-soft); transform: translateX(4px); } .home-v2 .testi .stars{ color: var(--rust-soft); letter-spacing: .18em; font-size: .9rem; } .home-v2 .testi blockquote{ margin: .8rem 0 0; font-family: var(--font-body); font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.6; color: var(--dark-ink); } .home-v2 .testi figcaption{ display: flex; align-items: center; gap: .8rem; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.10); } .home-v2 .testi-avatar{ flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-family: var(--font-display); font-size: .8rem; font-weight: 700; color: var(--dark); background: linear-gradient(150deg, var(--rust-soft), var(--rust)); } .home-v2 .testi cite{ color: var(--dark-ink); } .home-v2 .testi .review-tag{ font-size: .74rem; color: var(--dark-muted); border: 0; padding: 0; } /* ---------- 12. FAQ — sticky heading + hairline accordion ---------- */ .home-v2 .px-faq{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .home-v2 .px-faq-head{ position: sticky; top: 8rem; } /* the "talk to a guide" card under the heading */ .home-v2 .px-faq-card{ margin-top: 2rem; padding: clamp(1.3rem, 2.4vw, 1.75rem); background: var(--surface); border: 1px solid var(--px-line); border-radius: var(--px-r); box-shadow: var(--px-shadow); } .home-v2 .px-faq-card h3{ font-size: 1.05rem; letter-spacing: -.015em; } .home-v2 .px-faq-card p{ margin-top: .5rem; font-size: .86rem; color: var(--ink-soft); } .home-v2 .px-faq-actions{ display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; } .home-v2 .px-faq-actions .im-btn{ padding: .8rem 1.4rem; font-size: .76rem; } .home-v2 .faq-list{ display: block; } .home-v2 .faq-item{ border-bottom: 1px solid var(--px-line); overflow: hidden; } .home-v2 .faq-item:first-child{ border-top: 1px solid var(--px-line); } .home-v2 .faq-question{ width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.45rem .25rem; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.35; color: var(--ink); transition: color .3s var(--ease); } .home-v2 .faq-question:hover{ color: var(--rust-text); } .home-v2 .faq-question .plus{ flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: -.1rem; font-size: 1.2rem; line-height: 1; color: var(--rust-text); background: var(--rust-tint); border: 1px solid var(--gold-line); border-radius: 50%; transition: transform .35s var(--ease), background .3s var(--ease); } .home-v2 .faq-item.is-open .faq-question{ color: var(--rust-text); } .home-v2 .faq-item.is-open .faq-question .plus{ transform: rotate(45deg); } .home-v2 .faq-answer p{ padding: 0 3rem 1.6rem .25rem; max-width: 62ch; font-size: .93rem; line-height: 1.7; color: var(--ink-soft); } /* ---------- 13. Closing call-to-action band ---------- */ .home-v2 .px-cta{ position: relative; padding-block: clamp(5rem, 10vw, 8.5rem); text-align: center; color: var(--dark-ink); overflow: hidden; isolation: isolate; } .home-v2 .px-cta-bg{ position: absolute; inset: 0; z-index: 0; } .home-v2 .px-cta-bg img{ width: 100%; height: 100%; object-fit: cover; } .home-v2 .px-cta-bg::after{ content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,24,48,.82), rgba(11,24,48,.92)), radial-gradient(70% 60% at 50% 100%, rgba(207,98,18,.30), transparent 65%); } .home-v2 .px-cta .im-shell{ position: relative; z-index: 1; } .home-v2 .px-cta .eyebrow{ justify-content: center; color: var(--rust-soft); } .home-v2 .px-cta h2{ margin-top: 1.2rem; color: var(--dark-ink); max-width: 20ch; margin-inline: auto; } .home-v2 .px-cta h2 .ital{ color: var(--rust-soft); } .home-v2 .px-cta p{ margin-top: 1.1rem; color: rgba(246,243,236,.8); } .home-v2 .px-cta-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 2.2rem; } .home-v2 .px-cta .im-btn-outline{ background-image: linear-gradient(180deg, rgba(246,243,236,.05), rgba(246,243,236,.12)); border-color: rgba(246,243,236,.30); color: var(--dark-ink); } .home-v2 .px-cta .im-btn-outline:hover{ background-image: linear-gradient(180deg, rgba(246,243,236,.22), rgba(246,243,236,.32)); border-color: rgba(246,243,236,.7); color: var(--dark-ink); } /* ========================================================================= 14. RESPONSIVE — phones and tablets ------------------------------------------------------------------------- These blocks are LAST in the file so they win over everything above at small screen sizes. Rough scale: 1180px = small laptop 980px = tablet 780px = large phone 560px = phone ========================================================================= */ @media (max-width: 1180px){ /* the route rows lose their dedicated price column */ .home-v2 .card-expedition.px-route{ grid-template-columns: 3rem minmax(0, 12rem) minmax(0, 1fr); grid-template-areas: "idx art body" "idx art price" "idx art link"; align-items: start; row-gap: .5rem; } .home-v2 .card-expedition.px-route .card-art{ align-self: start; } .home-v2 .card-expedition.px-route .card-price{ justify-self: start; text-align: left; } .home-v2 .card-expedition.px-route .card-price b{ display: inline; font-size: 1.1rem; } .home-v2 .card-expedition.px-route .text-link{ justify-self: start; margin-top: .3rem; } .home-v2 .departures-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 1024px is where main.css already folds the four statistics into 2x2, so the ribbon's dividers have to be re-drawn for a two-column block at the same width — otherwise the third number keeps a stray left border. */ @media (max-width: 1024px){ .home-v2 .px-hero-ribbon .stat{ padding-inline: 1rem; border-left: 1px solid var(--dark-line); } .home-v2 .px-hero-ribbon .stat:nth-child(odd){ border-left: 0; padding-left: 0; } .home-v2 .px-hero-ribbon .stat:nth-child(n+3){ border-top: 1px solid var(--dark-line); } } @media (max-width: 980px){ /* hero stacks: words first, photo underneath */ .home-v2 .px-hero-grid{ grid-template-columns: 1fr; gap: clamp(3rem, 8vw, 4rem); padding-bottom: clamp(3rem, 6vw, 4rem); } .home-v2 .px-hero-media{ max-width: 30rem; margin-inline: auto; width: 100%; } .home-v2 .px-hero-frame{ aspect-ratio: 4 / 3; } .home-v2 .px-hero-inset{ display: none; } /* Below this width the photo is too small to float a card over without burying it, so the departure card drops out and sits underneath. (Narrower still, main.css collapses it further into a one-line pill — that is its own deliberate design, left alone here.) */ .home-v2 .hero-dep{ position: static; margin: 1.1rem 0 0; max-width: none; align-self: auto; } .home-v2 .dep-card{ width: 100%; } .home-v2 .px-hero .lede{ max-width: 52ch; } .home-v2 .px-assure{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-v2 .px-assure-item:nth-child(odd){ border-left: 0; } .home-v2 .px-assure-item:nth-child(n+3){ border-top: 1px solid var(--px-line-soft); } .home-v2 .px-head-split{ grid-template-columns: 1fr; align-items: start; } .home-v2 .px-build{ grid-template-columns: 1fr; } .home-v2 .px-build-summary{ position: static; } .home-v2 .px-fleet{ grid-template-columns: 1fr; } .home-v2 .fleet-card{ display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: center; } .home-v2 .fleet-card .card-art{ height: 100%; aspect-ratio: 4 / 3; } .home-v2 .fleet-tag{ margin: 1.3rem 1.4rem 0; } .home-v2 .px-bento{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-v2 .px-tile-wide, .home-v2 .px-tile-photo{ grid-column: span 2; } .home-v2 .px-voices, .home-v2 .px-faq{ grid-template-columns: 1fr; } .home-v2 .px-voices-head, .home-v2 .px-faq-head{ position: static; } } @media (max-width: 780px){ /* departures become a swipeable row */ .home-v2 .departures-grid{ display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .5rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .home-v2 .departures-grid::-webkit-scrollbar{ display: none; } .home-v2 .departure-item{ flex: 0 0 76%; scroll-snap-align: start; } .home-v2 .departure-item:hover{ transform: none; } .home-v2 .px-tile-n{ font-size: 3rem; } } /* Below this width main.css collapses .dep-card into a compact pill and hides its date/route/seats/buttons entirely (`display:none`) — a design built for the OLD hero, where the card had almost no room of its own. On this page the card already lives in its own full-width block under the photo (see the <980px rule above), so there's no space problem to solve by hiding things — undo the collapse and keep the whole card, including both buttons, usable at every width down to the smallest phone. Every property main.css changed at this breakpoint is restored here to its normal (desktop) value. */ @media (max-width: 768px){ .home-v2 .dep-card{ display: block; width: 100%; max-width: none; padding: 1.2rem 1.25rem; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 18px 40px -18px rgba(0,0,0,0.6), 0 0 0 1px rgba(143,191,126,0.08); } .home-v2 .dep-card-badge{ font-size: .6rem; gap: .4rem; padding: .26rem .5rem; border-radius: 3px; border: 1px solid var(--pine-line); background: var(--pine-tint); } .home-v2 .dep-card-badge.is-urgent{ color: var(--dark); background: var(--rust-soft); border-color: transparent; } .home-v2 .dep-card-date{ display: block; margin-top: .75rem; } .home-v2 .dep-card-route{ display: block; } /* :not([hidden]) matters here — content.js hides this line with the `hidden` attribute while a raid is running, and a bare class selector would out-specificity that and force it back on. */ .home-v2 .dep-card-seats:not([hidden]){ display: block; } .home-v2 .dep-card h3{ flex: initial; min-width: 0; margin-top: .3rem; font-size: 1.1rem; line-height: 1.15; white-space: normal; overflow: visible; text-overflow: clip; } .home-v2 .dep-card-meta{ flex: initial; display: flex; justify-content: space-between; align-items: baseline; margin-top: .85rem; padding-top: .8rem; padding-left: 0; border-top: 1px solid var(--dark-line); border-left: 0; } .home-v2 .dep-card-meta .kicker{ display: inline; } .home-v2 .dep-card-meta .amount{ font-size: 1.15rem; } .home-v2 .dep-card-actions{ display: flex; gap: .5rem; margin-top: .95rem; } } @media (max-width: 560px){ .home-v2 .px-hero{ padding-top: 7rem; } .home-v2 .px-hero h1{ font-size: clamp(2.3rem, 11vw, 3rem); } .home-v2 .px-hero-actions .btne, .home-v2 .px-hero-actions .btnr{ width: 100%; } .home-v2 .px-hero-frame{ aspect-ratio: 4 / 3; border-radius: 18px; } .home-v2 .px-assure{ grid-template-columns: 1fr; } .home-v2 .px-assure-item{ border-left: 0; } .home-v2 .px-assure-item + .px-assure-item{ border-top: 1px solid var(--px-line-soft); } /* route rows stack completely; the numeral rides on the photo */ .home-v2 .card-expedition.px-route{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "body" "price" "link"; padding: 1rem; row-gap: .4rem; } .home-v2 .px-route-idx{ position: absolute; z-index: 2; top: 1.6rem; left: 1.6rem; color: #fff; opacity: 1; text-shadow: 0 2px 12px rgba(0,0,0,.7); } .home-v2 .card-expedition.px-route .card-art{ aspect-ratio: 16 / 10; } .home-v2 .card-expedition.px-route .kicker{ -webkit-line-clamp: 3; line-clamp: 3; } .home-v2 .departure-item{ flex-basis: 84%; } .home-v2 .px-step{ grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0 .8rem; } .home-v2 .px-step-n{ width: 2.2rem; height: 2.2rem; font-size: .72rem; } .home-v2 .im-field-row{ grid-template-columns: 1fr; } .home-v2 .fleet-card{ grid-template-columns: 1fr; } .home-v2 .fleet-card .card-art{ aspect-ratio: 16 / 10; } .home-v2 .px-bento{ grid-template-columns: 1fr; } .home-v2 .px-tile-wide, .home-v2 .px-tile-photo{ grid-column: span 1; } .home-v2 .px-score-n{ font-size: 2.8rem; } .home-v2 .faq-answer p{ padding-right: 1rem; } .home-v2 .px-faq-actions .im-btn{ width: 100%; } } /* ========================================================================= 15. LARGE SCREENS — the two "showcase" sections ========================================================================= Everything above is the layout that carries from ~780px upward. On a real desktop those two sections were still four (and three) identical little tiles in a row, which is the one thing on this page that read as a stock template rather than a premium tour operator. This block only runs on wide screens, so phones and tablets are untouched. * Upcoming departures -> two wide BOARDING PASSES per row instead of four narrow tiles. Photo becomes the ticket stub on the left, the details sit on the right behind a perforated seam, and the price and button share one line, which is what the extra width buys. * The fleet -> three full-bleed CINEMATIC POSTERS instead of white cards with a photo pasted on top. Same treatment the phone layout already gives them, so the two now match. ========================================================================= */ /* ---------- 15a. Upcoming departures — the boarding pass ---------- */ @media (min-width: 1181px){ /* Two per row. At 1280px that is ~590px a card instead of ~290px — wide enough for the photo to be a real photograph and for the price and the button to sit side by side instead of stacked. */ .home-v2 .departures-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 2vw, 2rem); } .home-v2 .departure-item{ display: grid; /* 37%, not a half: the details column has to hold the price AND the button side by side on one line, and at the 1280px container that leaves it about 320px to do it in. */ grid-template-columns: minmax(0, 35%) minmax(0, 1fr); align-items: stretch; /* a top-lit paper white rather than a flat one */ background: linear-gradient(176deg, #FFFFFF 0%, #FAF8F3 100%); } /* The stub: photo fills its whole column, full bleed, full height. */ .home-v2 .departure-item .card-art{ aspect-ratio: auto; height: 100%; /* Tuned against the details column, not picked for looks: any taller and the card outgrows its own text, leaving a dead band between the trip meta and the tear line. */ min-height: 14rem; border-radius: 0; } /* A scrim in the top corner only — enough for the status pill to read against a bright sky, nowhere near enough to dull the photograph. */ .home-v2 .departure-item .card-art::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(158deg, rgba(6,12,24,.52) 0%, rgba(6,12,24,0) 46%); } .home-v2 .departure-status{ top: 1.1rem; left: 1.1rem; padding: .42rem .85rem; font-size: .64rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 14px -6px rgba(6,12,24,.7); } /* ---- the perforated seam ---- Two bites out of the card edge plus a dashed rule between them. The bites are circles painted in the SECTION's colour (this section carries .px-alt, so --paper-2) sitting half outside the card, which .departure-item's own overflow:hidden then clips into half-moons. That is the whole ticket illusion — no images, no extra markup. */ .home-v2 .departure-item::before, .home-v2 .departure-item::after{ content: ""; position: absolute; z-index: 3; left: calc(35% - 9px); width: 18px; height: 18px; border-radius: 50%; background: var(--paper-2); } .home-v2 .departure-item::before{ top: -9px; } .home-v2 .departure-item::after{ bottom: -9px; } .home-v2 .departure-body{ position: relative; padding: 1.5rem 1.6rem 1.5rem 1.75rem; } /* the dashed rule down the seam, stopping short of both half-moons */ .home-v2 .departure-body::before{ content: ""; position: absolute; left: 0; top: 1.15rem; bottom: 1.15rem; border-left: 2px dashed rgba(11,24,48,.16); } /* a rust hairline that draws itself across the top of the details on hover — the card's one moving part */ .home-v2 .departure-body::after{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--rust), #E8A063); transform: scaleX(0); transform-origin: left center; transition: transform .55s var(--ease); } .home-v2 .departure-item:hover .departure-body::after{ transform: scaleX(1); } .home-v2 .departure-date{ font-size: .69rem; letter-spacing: .13em; } .home-v2 .departure-item h4{ margin-top: .6rem; font-size: clamp(1.24rem, 1.5vw, 1.52rem); line-height: 1.16; } .home-v2 .departure-item .meta{ margin-top: .55rem; font-size: .84rem; } /* Price and button on ONE line — the single clearest sign the card was designed for this width rather than stretched to fill it. */ .home-v2 .px-pass-foot{ display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: 1.15rem; } /* "From $7,200" is one thought — never let it break across two lines, which is what pushed the button out of the card. */ .home-v2 .departure-item .amount{ margin-top: 0; flex: none; font-size: 1.34rem; white-space: nowrap; } .home-v2 .departure-cta{ margin-top: 0; min-width: 0; /* may shrink rather than overflow */ padding: .72rem 1rem; font-size: .68rem; white-space: nowrap; } /* Departed convoys: no lift, no hairline, and the seam quietens down — they are a record of the season, not an offer. */ /* main.css crushes the photo to grayscale(.55) brightness(.6), which on a thumbnail reads as "past" and on a card this size reads as "broken". */ .home-v2 .departure-item.is-closed .card-art img{ filter: grayscale(.62) brightness(.82); } .home-v2 .departure-item.is-closed .departure-body::after{ content: none; } .home-v2 .departure-item.is-closed::before, .home-v2 .departure-item.is-closed::after{ opacity: .55; } } /* Above ~1500px the cards get genuinely large, so the type inside them is allowed to grow with the box instead of floating in it. */ @media (min-width: 1500px){ .home-v2 .departure-item .card-art{ min-height: 15.5rem; } /* vertical only — the details column cannot spare horizontal room, see the 35% note above */ .home-v2 .departure-body{ padding-block: 1.8rem; } .home-v2 .departure-item .amount{ font-size: 1.45rem; } } /* ---------- 15b. The fleet — cinematic poster cards ---------- */ @media (min-width: 981px){ .home-v2 .px-fleet{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 1.8vw, 1.6rem); } /* The card IS the photograph now: a tall portrait frame with the words sitting on its dark foot, instead of a white box with a picture glued to the top of it. */ .home-v2 .fleet-card{ position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(25rem, 33vw, 31rem); background: var(--dark); border-color: rgba(255,255,255,.10); overflow: hidden; } .home-v2 .fleet-card .card-art{ position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; } /* Deep at the foot where the words are, then off a cliff — the whole point of the card is the motorcycle, so the scrim is spent on the bottom third and the photograph keeps the rest. The wash at the very top is only there so a blown-out sky cannot swallow the tag chip. */ .home-v2 .fleet-card .card-art::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(5,10,20,.96) 0%, rgba(5,10,20,.90) 28%, rgba(5,10,20,.62) 38%, rgba(5,10,20,.24) 50%, rgba(5,10,20,.04) 66%, rgba(5,10,20,.14) 100%); } /* the price-difference chip, floated over the photo as frosted glass */ .home-v2 .fleet-tag{ position: absolute; z-index: 2; top: 1.15rem; left: 1.15rem; margin: 0; color: var(--dark-ink); background: rgba(11,24,48,.5); border-color: rgba(255,255,255,.24); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 16px -8px rgba(5,10,20,.8); } .home-v2 .fleet-card h3{ position: relative; z-index: 2; padding: 0 1.5rem; font-size: clamp(1.28rem, 1.55vw, 1.58rem); line-height: 1.15; color: var(--dark-ink); text-shadow: 0 1px 14px rgba(5,10,20,.55); } /* a short rust rule under the name that lengthens on hover */ .home-v2 .fleet-card h3::after{ content: ""; display: block; width: 2.4rem; height: 2px; margin-top: .85rem; background: var(--rust); transition: width .55s var(--ease); } .home-v2 .fleet-card:hover h3::after{ width: 4.6rem; } .home-v2 .fleet-card p{ position: relative; z-index: 2; padding: .85rem 1.5rem 1.6rem; font-size: .89rem; line-height: 1.6; color: rgba(246,243,236,.8); text-shadow: 0 1px 12px rgba(5,10,20,.6); } .home-v2 .fleet-card:hover{ border-color: rgba(207,98,18,.42); } } /* Visitors who ask their device for less motion get a still page. */ @media (prefers-reduced-motion: reduce){ .home-v2 .px-hero-eyebrow::before{ animation: none; } .home-v2 .card-expedition.px-route:hover, .home-v2 .departure-item:hover, .home-v2 .fleet-card:hover, .home-v2 .px-tile:hover, .home-v2 .testimonial-strip .testi:hover{ transform: none; } /* the two moving parts added for large screens in section 15 */ .home-v2 .departure-body::after{ transition: none; } .home-v2 .fleet-card h3::after{ transition: none; } } /* The audience panel's two answers opt OUT of the homepage's sliding-arrow button signature. main.css already strips the arrow for the rest of the site; this repeats it here because home.css loads after main.css and would otherwise put the arrow back on the homepage only — leaving the same panel looking different depending on which page it opened on. Reason for stripping it at all: "→" reads as "this takes you somewhere", and these two buttons answer a question in place. */ .home-v2 .aud-actions .im-btn::after{ content: none; }