to lift it one shade; every section also gets a hairline along its top. */ .home-v2 .px-section{ position:relative; border-top: 1px solid var(--line); } .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. The homepage re-uses those class names as hooks for content.js, so everything main.css painted on them is removed here and rebuilt 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; } .home-v2 .card-expedition > *, .home-v2 .departure-item > *, .home-v2 .testi > *{ position: static; z-index: auto; } .home-v2 .card-art{ position: relative; inset: auto; aspect-ratio: auto; width: 100%; border-radius: 0; overflow: hidden; background: var(--surface-2); box-shadow: none; } .home-v2 .card-art::after{ content: none; } .home-v2 .card-art img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1.1s var(--ease), filter .5s var(--ease); } .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 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: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4.2rem); } .home-v2 .px-head .display-2{ margin-top: 1.15rem; } .home-v2 .px-head .lede{ margin-top: 1.2rem; } .home-v2 .px-head-split{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); 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.3rem; } /* Numbered section eyebrows: "01 Featured Raids", "02 2026 Season" … The number is a CSS counter, so reordering the sections renumbers them. */ .home-v2 .px-head, .home-v2 .px-voices-head, .home-v2 .px-faq-head{ counter-increment: pxsec; } .home-v2 .px-head .eyebrow::before, .home-v2 .px-voices-head .eyebrow::before, .home-v2 .px-faq-head .eyebrow::before{ content: counter(pxsec, decimal-leading-zero); width: auto; height: auto; clip-path: none; padding: .3rem .42rem; background: none; border: 1px solid var(--gold-line); color: var(--rust); font-size: .64rem; letter-spacing: .04em; line-height: 1; } /* Small label chip. */ .home-v2 .px-chip{ display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--rust-text); background: transparent; border: 1px solid var(--gold-line); padding: .34rem .6rem; } .home-v2 .px-chip::before{ content:""; width: .4rem; height: .4rem; background: currentColor; } /* ---------- Hero buttons — .btne (primary) / .btnr (outline) ---------- The two hero CTAs ("View Expeditions" / "Build Your Raid") under their own class names, dressed exactly like main.css's .im-btn pair. */ .home-v2 .btne, .home-v2 .btnr{ position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1.15rem 1.9rem; font-family: var(--font-display); font-stretch: var(--wide); font-size: .76rem; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; border: 1px solid transparent; white-space: nowrap; cursor: pointer; transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); } .home-v2 .btne::after, .home-v2 .btnr::after{ content: "→"; font-stretch: 100%; display: inline-block; transition: transform .3s var(--ease); } .home-v2 .btne:hover::after, .home-v2 .btnr:hover::after{ transform: translateX(4px); } .home-v2 .btne:focus-visible, .home-v2 .btnr:focus-visible{ outline: 2px solid var(--dark-ink); outline-offset: 3px; } .home-v2 .btne{ background: var(--rust); color: var(--on-accent); border-color: var(--rust); } .home-v2 .btne::before{ content:""; position:absolute; inset:0; z-index:-1; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.22,.8,.32,1); } .home-v2 .btne:hover::before{ transform: scaleX(1); } .home-v2 .btne:hover{ border-color: var(--ink); } .home-v2 .btne:active, .home-v2 .btnr:active{ transform: translateY(1px); } .home-v2 .btnr{ color: var(--dark-ink); background: rgb(var(--dark-rgb) / .25); border-color: rgb(var(--on-dark-rgb) / .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .home-v2 .btnr:hover{ color: var(--rust); border-color: var(--rust); } @media (prefers-reduced-motion: reduce){ .home-v2 .btne, .home-v2 .btnr, .home-v2 .btne::before{ transition: none; } } /* ---------- 4. HERO ---------- One photograph edge to edge. The words sit over its darkened left side, the next departure is pinned bottom-right, and the four statistics run along the foot as a glass ribbon. */ .home-v2 .px-hero{ position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: max(100svh, 44rem); background: var(--dark); color: var(--dark-ink); } /* the photograph — content.js swaps the inside .hero-media */ .home-v2 .px-hero-media{ position: absolute; inset: 0; z-index: 0; } .home-v2 .px-hero-frame{ position: absolute; inset: 0; overflow: hidden; } .home-v2 .px-hero-frame .hero-media{ position: absolute; left: 0; right: 0; top: -6%; bottom: -6%; 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%; } /* the wash: heavy on the left where the headline is, heavy at the foot where the ribbon is, light over the middle so the road still reads */ .home-v2 .px-hero-media::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, rgb(var(--dark-rgb) / .9) 0%, rgb(var(--dark-rgb) / .66) 36%, rgb(var(--dark-rgb) / .12) 68%, rgb(var(--dark-rgb) / .3) 100%), linear-gradient(0deg, rgb(var(--dark-rgb) / .92) 0%, rgb(var(--dark-rgb) / 0) 40%), linear-gradient(180deg, rgb(var(--dark-rgb) / .55) 0%, rgb(var(--dark-rgb) / 0) 24%); } /* A faint contour texture over the photo, and a marigold glow from the bottom-left corner that the ribbon sits in. */ .home-v2 .px-hero-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; } .home-v2 .px-hero-bg::before{ content:""; position:absolute; inset:0; background: url('../assets/topo.svg') center / 620px auto repeat; opacity: .22; mix-blend-mode: screen; } .home-v2 .px-hero-bg::after{ content:""; position:absolute; left: -20%; bottom: -45%; width: 70vw; height: 70vw; max-width: 1000px; max-height: 1000px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--accent-rgb) / .16) 0%, transparent 62%); } /* the co-ordinates running up the right-hand edge — decoration only */ .home-v2 .px-hero-coords{ position: absolute; z-index: 2; right: calc(var(--gutter) * .55); top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: rgb(var(--on-dark-rgb) / .5); white-space: nowrap; } .home-v2 .px-hero-coords::before{ content:""; display:inline-block; width: 1px; height: 3.5rem; margin-bottom: 1rem; background: var(--rust); vertical-align: middle; } .home-v2 .px-hero-grid{ position: relative; z-index: 2; flex: 1 1 auto; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(2rem, 5vw, 5rem); /* sized so the words, the card AND the stat ribbon all fit inside one 900px-tall laptop screen */ padding-top: clamp(6.5rem, 11.5vh, 10rem); padding-bottom: clamp(2rem, 4vh, 3.5rem); } /* -- the words -- */ .home-v2 .px-hero-copy{ max-width: 54rem; } .home-v2 .px-hero-eyebrow{ color: var(--rust); } .home-v2 .px-hero-eyebrow::before{ width: 8px; height: 8px; border-radius: 50%; clip-path: none; background: var(--rust); animation: pxBeacon 2.4s ease-in-out infinite; } @keyframes pxBeacon{ 0%,100%{ box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .6); } 60% { box-shadow: 0 0 0 9px rgb(var(--accent-rgb) / 0); } } .home-v2 .px-hero h1{ margin-top: 1.3rem; color: var(--dark-ink); font-size: clamp(2.8rem, min(5.9vw, 10.5vh), 6.2rem); line-height: .9; letter-spacing: -.025em; } .home-v2 .px-hero h1 .ital{ color: var(--rust); } .home-v2 .px-hero .lede{ margin-top: 1.35rem; max-width: 46ch; color: rgb(var(--on-dark-rgb) / .8); } .home-v2 .px-hero-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.9rem; } .home-v2 .px-hero .text-link{ color: var(--dark-ink); } /* the small rating line under the buttons */ .home-v2 .px-hero-rating{ display: flex; align-items: center; gap: .8rem; margin-top: 1.6rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; color: rgb(var(--on-dark-rgb) / .64); } .home-v2 .px-hero-rating .stars{ color: var(--rust); letter-spacing: .16em; font-size: .9rem; font-family: var(--font-body); } /* -- the next-departure card, pinned bottom-right -- main.css floats .hero-dep absolutely for the old layout; here it is an ordinary grid cell again. */ .home-v2 .hero-dep{ position: relative; z-index: 3; top: auto; right: auto; bottom: auto; left: auto; align-self: end; order: 0; /* main.css moves it in front of the words below 1024px */ margin: 0; } .home-v2 .hero-dep::after{ border-radius: 0; } .home-v2 .dep-card{ width: 318px; padding: 1.35rem 1.4rem 1.4rem; background: rgb(var(--dark-rgb) / .74); -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%); border: 1px solid var(--dark-line); border-top: 3px solid var(--pine-soft); border-radius: 0; } .home-v2 .dep-card::before{ content: none; } .home-v2 .dep-card-badge{ font-family: var(--font-mono); font-weight: 500; font-size: .6rem; letter-spacing: .1em; padding: .3rem .5rem; border-radius: 0; } .home-v2 .dep-card-badge.is-urgent{ color: var(--on-accent); background: var(--rust); border-color: transparent; } .home-v2 .dep-card-badge.is-urgent::before{ background: var(--on-accent); box-shadow: 0 0 0 3px rgb(var(--dark-rgb) / .2); } .home-v2 .dep-card-date{ margin-top: .9rem; color: var(--rust); } .home-v2 .dep-card h3{ margin-top: .35rem; font-size: 1.2rem; line-height: 1.12; } .home-v2 .dep-card-route{ font-size: .8rem; } .home-v2 .dep-card-seats{ margin-top: .55rem; font-family: var(--font-mono); font-size: .7rem; font-weight: 500; color: var(--pine-soft); } .home-v2 .dep-card-meta{ margin-top: 1rem; padding-top: .9rem; } .home-v2 .dep-card-meta .kicker{ font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; } .home-v2 .dep-card-meta .amount{ font-stretch: var(--wide); font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; color: var(--dark-ink); } .home-v2 .dep-card-actions{ margin-top: 1rem; } .home-v2 .dep-card-actions .im-btn{ padding: .8rem .6rem; font-size: .62rem; } /* "Convoy Underway" — the Reserve button's disabled state while the hero card is showing a raid that's already running. */ .home-v2 .dep-card-actions .im-btn.is-disabled{ pointer-events: none; cursor: not-allowed; background: rgb(var(--on-dark-rgb) / .06); color: rgb(var(--on-dark-rgb) / .45); border-color: rgb(var(--on-dark-rgb) / .16); } .home-v2 .dep-card-actions .im-btn.is-disabled::before{ content: none; } /* -- the stat ribbon along the hero's foot -- 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: rgb(var(--dark-rgb) / .6); border-top: 1px solid var(--dark-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .home-v2 .px-hero-ribbon .im-cols-4{ gap: 0; } .home-v2 .px-hero-ribbon .stat{ padding-block: clamp(1.2rem, 2.2vw, 1.75rem); padding-inline: clamp(1rem, 2.4vw, 2.2rem); border-left: 1px solid var(--dark-line); } .home-v2 .px-hero-ribbon .stat:first-child{ padding-left: 0; border-left: 0; } .home-v2 .px-hero-ribbon .stat .num{ font-stretch: var(--wide); font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1; color: var(--rust); } .home-v2 .px-hero-ribbon .stat .label{ margin-top: .6rem; font-family: var(--font-mono); font-size: .66rem; line-height: 1.45; letter-spacing: .06em; text-transform: uppercase; color: var(--dark-muted); } /* the marigold ticker sits directly under the hero */ .home-v2 .marquee{ border: 0; } /* ---------- 4b. Motorcycle or 4x4 — the switch bar ---------- Straight under the marigold ticker: a short question on the left, the two choices on the right (the switch itself is styled in main.css). */ .home-v2 .raid-kind-bar{ position: relative; scroll-margin-top: 6rem; /* clear of the fixed header when jumped to */ padding-block: clamp(2rem, 4vw, 3rem); background: var(--paper-2); border-bottom: 1px solid var(--line); } .home-v2 .raid-kind-inner{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.25rem, 4vw, 4rem); align-items: center; } .home-v2 .raid-kind-title{ margin-top: .8rem; font-stretch: var(--wide); font-weight: 800; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1; text-transform: uppercase; } /* ---------- 5. Assurance strip ---------- Four short promises between two hairlines. Plain HTML — no script fills this in, so edit the words straight in index.html. */ .home-v2 .px-section.section-tight{ border-top: 0; } .home-v2 .px-assure{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--px-line); } .home-v2 .px-assure-item{ display: flex; align-items: flex-start; gap: 1rem; padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.6rem); border-left: 1px solid var(--px-line); } .home-v2 .px-assure-item:first-child{ border-left: 0; padding-left: 0; } .home-v2 .px-assure-item svg{ flex: none; width: 42px; height: 42px; padding: 10px; fill: none; stroke: var(--rust); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; border: 1px solid var(--gold-line); } .home-v2 .px-assure-item h3{ font-size: .98rem; font-weight: 700; letter-spacing: 0; color: var(--ink); } .home-v2 .px-assure-item p{ margin-top: .35rem; font-size: .84rem; line-height: 1.5; color: var(--ink-soft); } /* ---------- 6. Featured expeditions — the spec sheet ---------- Each row keeps the class "card-expedition" because content.js writes the name / tags / meta / blurb / photo / price into it. The row is a grid with named areas so the price paragraph content.js INSERTS at run time always lands in the right place. */ .home-v2 .px-routes{ display: grid; border-bottom: 1px solid var(--px-line); } .home-v2 .card-expedition.px-route{ display: grid; grid-template-columns: 5rem /* the big 01 / 02 / 03 */ minmax(0, 16rem) /* photo */ minmax(0, 1fr) /* title + blurb */ minmax(0, 12rem); /* price + link */ grid-template-areas: "idx art body price" "idx art body link"; align-items: center; column-gap: clamp(1rem, 2.6vw, 2.4rem); row-gap: 0; padding: 1.5rem 0; border-top: 1px solid var(--px-line); overflow: hidden; transition: background-color .45s var(--ease); } /* a marigold bar grows down the left edge on hover */ .home-v2 .card-expedition.px-route::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--rust); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); } .home-v2 .card-expedition.px-route:hover{ background: linear-gradient(90deg, rgb(var(--accent-rgb) / .07), transparent 70%); } .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-stretch: var(--wide); font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgb(var(--ink-rgb) / .38); transition: color .4s var(--ease), -webkit-text-stroke-color .4s var(--ease); } .home-v2 .card-expedition.px-route:hover .px-route-idx{ color: var(--rust); -webkit-text-stroke-color: var(--rust); } .home-v2 .card-expedition.px-route .card-art{ grid-area: art; aspect-ratio: 16 / 11; align-self: stretch; } .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{ font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .5rem; background: transparent; border: 1px solid var(--px-line); border-radius: 0; color: var(--ink-soft); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } .home-v2 .card-expedition.px-route .tag.rust{ border-color: var(--gold-line); color: var(--rust-text); } .home-v2 .card-expedition.px-route h3{ margin-top: .7rem; font-size: clamp(1.3rem, 2vw, 1.85rem); color: var(--ink); } .home-v2 .card-expedition.px-route .card-meta{ margin-top: .5rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); } .home-v2 .card-expedition.px-route .card-meta span + span::before{ content:"/"; margin-right: .6rem; color: var(--rust); } .home-v2 .card-expedition.px-route .kicker{ margin-top: .6rem; max-width: 54ch; font-size: .9rem; 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-mono); font-weight: 500; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); text-align: right; } .home-v2 .card-expedition.px-route .card-price b{ display: block; margin-top: .3rem; font-family: var(--font-display); font-stretch: var(--wide); font-size: 1.65rem; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--ink); } .home-v2 .card-expedition.px-route .text-link{ grid-area: link; justify-self: end; align-self: start; margin-top: .75rem; color: var(--rust); } .home-v2 .card-expedition.px-route .text-link::after{ background: var(--rust); } /* ---------- 6b. 4x4 raids — photo band + trip cards ---------- The same passes by 4x4. A dark band over a wide lake photograph: the heading and three promises on the left, one card per 4x4 trip on the right. content.js rebuilds [data-x4-trips] from every trip marked kind: "4x4" in js/data.js, so the cards below style whatever is there. */ .home-v2 .px-x4{ background: var(--dark); color: var(--dark-ink); border-top: 0; overflow: hidden; isolation: isolate; } .home-v2 .px-x4-bg{ position: absolute; inset: 0; z-index: -1; } .home-v2 .px-x4-bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: saturate(.8); } .home-v2 .px-x4-bg::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--dark-rgb) / .95) 0%, rgb(var(--dark-rgb) / .86) 42%, rgb(var(--dark-rgb) / .62) 100%), linear-gradient(0deg, rgb(var(--dark-rgb) / .75) 0%, rgb(var(--dark-rgb) / 0) 45%); } .home-v2 .px-x4-grid{ display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } .home-v2 .px-x4-copy .px-head{ margin-bottom: 2rem; } .home-v2 .px-x4 .display-2{ color: var(--dark-ink); } .home-v2 .px-x4 .lede{ color: rgb(var(--on-dark-rgb) / .8); } .home-v2 .px-x4-points{ border-top-color: var(--dark-line); } .home-v2 .px-x4-points li{ border-bottom-color: var(--dark-line); } .home-v2 .px-x4-points h3{ color: var(--dark-ink); } .home-v2 .px-x4-points p{ color: rgb(var(--on-dark-rgb) / .7); } .home-v2 .px-x4-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.9rem; } /* With 4x4 raids picked on the switch, the trips are already listed in Featured Raids above — so this band drops its cards (and the button that picks 4x4) and becomes the "why 4x4" block: heading beside the promises. */ html[data-raid-kind="4x4"] .home-v2 .px-x4-trips{ display: none; } html[data-raid-kind="4x4"] .home-v2 .px-x4-grid{ grid-template-columns: 1fr; } html[data-raid-kind="4x4"] .home-v2 .px-x4-copy{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0 clamp(2rem, 5vw, 5rem); align-items: start; } html[data-raid-kind="4x4"] .home-v2 .px-x4-copy .px-head{ grid-row: 1 / 3; margin-bottom: 0; } html[data-raid-kind="4x4"] .home-v2 .px-x4-actions{ margin-top: 1.4rem; } /* -- the trip cards -- */ .home-v2 .px-x4-trips{ display: grid; gap: 1rem; } .home-v2 .x4-card{ display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); background: rgb(var(--dark-rgb) / .72); border: 1px solid var(--dark-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color .4s var(--ease), transform .4s var(--ease); } .home-v2 .x4-card:hover{ border-color: var(--gold-line); transform: translateX(-4px); } .home-v2 .x4-card-art{ position: relative; display: block; overflow: hidden; min-height: 10rem; background: var(--surface-2); } .home-v2 .x4-card-art img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .home-v2 .x4-card:hover .x4-card-art img{ transform: scale(1.06); } .home-v2 .x4-card-tag{ position: absolute; left: .6rem; bottom: .6rem; padding: .28rem .45rem; font-family: var(--font-mono); font-size: .56rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-ink); background: rgb(var(--dark-rgb) / .78); border: 1px solid var(--dark-line); } .home-v2 .x4-card-body{ display: flex; flex-direction: column; min-width: 0; padding: 1rem 1.2rem 1.05rem; } .home-v2 .x4-card-meta{ display: flex; flex-wrap: wrap; gap: .15rem .5rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-muted); } .home-v2 .x4-card-meta span + span::before{ content: "/"; margin-right: .5rem; color: var(--rust); } .home-v2 .x4-card h3{ margin-top: .4rem; font-size: 1.15rem; line-height: 1.15; } .home-v2 .x4-card h3 a{ color: var(--dark-ink); transition: color .25s var(--ease); } .home-v2 .x4-card h3 a:hover{ color: var(--rust); } .home-v2 .x4-card-next{ margin-top: .4rem; font-family: var(--font-mono); font-size: .66rem; color: var(--pine-soft); } .home-v2 .x4-card-foot{ display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: .85rem; border-top: 1px dashed var(--dark-line); } .home-v2 .x4-card-next + .x4-card-foot{ margin-top: .85rem; } .home-v2 .x4-card-price{ font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dark-muted); } .home-v2 .x4-card-price b{ margin-left: .3rem; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; text-transform: none; color: var(--dark-ink); } .home-v2 .x4-card .im-btn{ padding: .72rem .95rem; font-size: .6rem; } /* ---------- 7. Upcoming departures — ticket cards ---------- content.js fills each one from DEPARTURES + EXPEDITIONS and stamps a data-status on it (see 7b). */ .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); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } .home-v2 .departure-item:hover{ transform: translateY(-5px); border-color: var(--gold-line); box-shadow: var(--px-shadow-lift); } .home-v2 .departure-item .card-art{ aspect-ratio: 16 / 10; } .home-v2 .departure-item:hover .card-art img{ transform: scale(1.06); } /* the status pill, floated over the photo */ .home-v2 .departure-status{ position: absolute; z-index: 2; top: .9rem; left: .9rem; font-family: var(--font-mono); font-weight: 500; font-size: .6rem; letter-spacing: .1em; padding: .38rem .62rem; border-radius: 0; text-shadow: none; } .home-v2 .departure-body{ display: flex; flex-direction: column; flex: 1; margin-top: 0; padding: 1.2rem 1.3rem 1.35rem; } .home-v2 .departure-date{ font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rust-text); font-weight: 500; } .home-v2 .departure-item h4{ margin-top: .55rem; font-family: var(--font-display); font-stretch: var(--semi); font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.18; letter-spacing: -.01em; color: var(--ink); } .home-v2 .departure-item .meta{ margin-top: .4rem; font-size: .8rem; color: var(--ink-faint); text-shadow: none; } .home-v2 .departure-seats{ margin-top: .55rem; font-family: var(--font-mono); font-size: .7rem; color: var(--ink-soft); text-shadow: none; } .home-v2 .departure-seats.is-low{ color: var(--rust); font-weight: 500; } .home-v2 .departure-seats.is-out{ color: var(--ink-faint); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; } /* the tear-line + price + button block, pinned to the bottom. The dashed tear-line is drawn 1rem inside the block rather than as its top border, so it keeps clear of the seats line on a card with no spare height. */ .home-v2 .px-pass-foot{ position: relative; margin-top: auto; padding-top: 2rem; } .home-v2 .px-pass-foot::before{ content: ""; position: absolute; left: 0; right: 0; top: 1rem; border-top: 1px dashed var(--line-strong); } .home-v2 .departure-item .amount{ margin-top: .15rem; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; color: var(--ink); } /* One size for every state and every card, so a row of tickets lines its buttons up — "Reserve a Seat", "Fully Booked" and "Convoy Departed" all get the same full-width plate. */ .home-v2 .departure-cta{ margin-top: .85rem; width: 100%; min-height: 3rem; padding: .8rem 1.1rem; font-size: .68rem; letter-spacing: .1em; } /* main.css turns these buttons into frosted glass for photo cards; on this card they go back to the site's ordinary marigold plate. */ .home-v2 .departure-cta.im-btn-primary{ background: var(--rust); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--on-accent); border-color: var(--rust); text-shadow: none; box-shadow: none; transition: color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .home-v2 .departure-cta.im-btn-primary:hover{ background: var(--rust); border-color: var(--ink); box-shadow: none; } .home-v2 .departure-cta.is-disabled{ pointer-events: none; cursor: not-allowed; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink-faint); border-color: var(--px-line); text-shadow: none; box-shadow: none; } .home-v2 .departure-cta.is-disabled::before{ content: none; } /* departed / underway convoys — softened, not shouted */ .home-v2 .departure-item.is-closed{ box-shadow: none; background: transparent; } .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 green signal seats a few seats left amber ring urgent filling fast marigold, and it pulses soldout every seat gone bone, hatched, unclickable running on the road right now green, 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 and the top edge — so a card can never wear a marigold pill above a grey button. */ /* ---- the pill over the photo ---- */ .home-v2 .departure-item[data-status="open"] .departure-status{ background: rgb(var(--dark-rgb) / .72); border-color: var(--pine-line); color: var(--dark-ink); } .home-v2 .departure-item[data-status="open"] .departure-status::before{ background: var(--pine-soft); box-shadow: 0 0 0 3px rgb(var(--pine-soft-rgb) / .22); } .home-v2 .departure-item[data-status="seats"] .departure-status{ background: rgb(var(--dark-rgb) / .74); border-color: rgb(var(--accent-soft-rgb) / .6); color: var(--rust-soft); } .home-v2 .departure-item[data-status="seats"] .departure-status::before{ background: var(--rust-soft); } .home-v2 .departure-item[data-status="urgent"] .departure-status{ background: var(--rust); color: var(--on-accent); } .home-v2 .departure-item[data-status="urgent"] .departure-status::before{ background: var(--on-accent); } .home-v2 .departure-item[data-status="running"] .departure-status{ background: var(--pine-soft); color: var(--on-accent); border-color: transparent; } .home-v2 .departure-item[data-status="soldout"] .departure-status{ background: var(--ink); border-color: transparent; color: var(--on-accent); } .home-v2 .departure-item[data-status="soldout"] .departure-status::before{ background: var(--on-accent); } .home-v2 .departure-item[data-status="closed"] .departure-status{ background: rgb(var(--dark-rgb) / .66); border-color: rgb(var(--on-dark-rgb) / .16); color: rgb(var(--on-dark-rgb) / .62); } /* ---- the button under the price ---- */ .home-v2 .departure-item[data-status="seats"] .departure-cta.im-btn-primary{ box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .28); } .home-v2 .departure-item[data-status="urgent"] .departure-cta.im-btn-primary{ animation: ctaUrgent 2.4s ease-in-out infinite; } @keyframes ctaUrgent{ 0%, 100%{ box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .55); } 60% { box-shadow: 0 0 0 9px rgb(var(--accent-rgb) / 0); } } .home-v2 .departure-item[data-status="urgent"] .departure-cta.im-btn-primary:hover{ animation: none; } @media (prefers-reduced-motion: reduce){ .home-v2 .departure-item[data-status="urgent"] .departure-cta.im-btn-primary{ animation: none; } } .home-v2 .departure-item[data-status="running"] .departure-cta.is-disabled{ background: var(--pine-tint); color: var(--pine-soft); border-color: var(--pine-line); } .home-v2 .departure-item[data-status="soldout"] .departure-cta.is-disabled{ background-color: transparent; background-image: repeating-linear-gradient(135deg, rgb(var(--ink-rgb) / .10) 0 6px, transparent 6px 12px); color: var(--ink-soft); border-color: var(--line-strong); } .home-v2 .departure-item[data-status="closed"] .departure-cta.is-disabled{ color: var(--ink-faint); border-color: var(--px-line); } /* ---- the card's top edge ---- */ .home-v2 .departure-item[data-status="urgent"]{ box-shadow: inset 0 3px 0 0 var(--rust); } .home-v2 .departure-item[data-status="urgent"]:hover{ 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); } .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="open"]:hover{ border-color: var(--pine-line); } /* nothing to sell, so nothing to invite a click: no lift, no zoom */ .home-v2 .departure-item[data-status="soldout"] .card-art img{ filter: saturate(.5) brightness(.8); } .home-v2 .departure-item[data-status="soldout"]:hover{ transform: none; border-color: var(--px-line); box-shadow: none; } .home-v2 .departure-item[data-status="soldout"]:hover .card-art img{ transform: none; } /* ---------- 8. Build Your Raid ---------- Left: four numbered steps using main.css's ordinary .form-field inputs. Right: the running estimate as a solid MARIGOLD panel 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: 0; align-items: start; border: 1px solid var(--px-line); } .home-v2 .px-build-form{ padding: clamp(1.5rem, 3.2vw, 2.6rem); background: var(--surface); } .home-v2 .px-step{ display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 1.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-mono); font-size: .72rem; font-weight: 500; color: var(--rust); background: transparent; border: 1px solid var(--gold-line); } .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-build .form-field input, .home-v2 .px-build .form-field select{ background-color: var(--paper); color-scheme: dark; } .home-v2 .px-step-hint{ margin-top: .55rem; font-size: .78rem; color: var(--ink-faint); } /* -- step 04: when (departure) and how many (riders) -- The departure dropdown takes the room; riders is a compact − 2 + control beside it, the same height as the dropdown. The date field under the dropdown only appears for "Another date…" (main.js). */ .home-v2 .px-when{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; align-items: start; } .home-v2 .px-when .form-field{ margin-bottom: 0; min-width: 0; } .home-v2 .px-when select{ text-overflow: ellipsis; } .home-v2 .px-when [data-bw-start]{ margin-top: .6rem; } /* mobile.css gives date fields display:block, which would beat [hidden] */ .home-v2 .px-when [data-bw-start][hidden]{ display: none !important; } .home-v2 .px-stepper{ display: flex; align-items: stretch; border: 1px solid var(--line-strong); background: var(--paper); transition: border-color .25s var(--ease); } .home-v2 .px-stepper:hover{ border-color: rgb(var(--ink-rgb) / .4); } .home-v2 .px-stepper:focus-within{ border-color: var(--rust-soft); } .home-v2 .px-stepper button{ flex: none; width: 2.9rem; font-family: var(--font-body); font-size: 1.25rem; line-height: 1; color: var(--rust); transition: background-color .2s var(--ease), color .2s var(--ease); } .home-v2 .px-stepper button:hover:not(:disabled){ background: rgb(var(--accent-rgb) / .12); } .home-v2 .px-stepper button:disabled{ color: var(--ink-faint); opacity: .4; cursor: not-allowed; } .home-v2 .px-stepper button:focus-visible{ outline-offset: -2px; } .home-v2 .px-build .px-stepper input{ width: 3.2rem; padding-inline: 0; text-align: center; font-family: var(--font-display); font-stretch: var(--semi); font-weight: 700; background: transparent; border: 0; border-inline: 1px solid var(--line); box-shadow: none; -moz-appearance: textfield; appearance: textfield; } .home-v2 .px-build .px-stepper input:focus{ outline: none; box-shadow: none; } .home-v2 .px-stepper input::-webkit-outer-spin-button, .home-v2 .px-stepper input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } /* -- the estimate panel: marigold, with near-black type -- */ .home-v2 .px-build-summary{ position: sticky; top: 6.5rem; padding: clamp(1.5rem, 3vw, 2.3rem); color: var(--on-accent); background: var(--rust); overflow: hidden; } .home-v2 .px-build-summary::before{ content:""; position:absolute; inset:0; pointer-events:none; background: repeating-linear-gradient(-45deg, rgb(var(--dark-rgb) / .05) 0 2px, transparent 2px 13px); } .home-v2 .px-build-summary > *{ position: relative; } .home-v2 .px-build-summary .eyebrow{ color: var(--on-accent); } .home-v2 .px-sum-dates{ margin-top: 1.15rem; padding: .85rem 1rem; background: rgb(var(--dark-rgb) / .08); border: 1px solid rgb(var(--dark-rgb) / .2); } .home-v2 .px-sum-dates .px-sum-k{ font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--dark-rgb) / .64); } .home-v2 .px-sum-dates .booking-enddate{ margin-top: .3rem; padding-top: 0; font-stretch: var(--semi); font-size: .98rem; color: var(--on-accent); } .home-v2 .booking-line{ display: flex; justify-content: space-between; gap: 1rem; padding: .72rem 0; border-top: 0; border-bottom: 1px solid rgb(var(--dark-rgb) / .16); font-size: .88rem; color: rgb(var(--dark-rgb) / .72); } .home-v2 .booking-line:first-of-type{ margin-top: 1.1rem; } .home-v2 .booking-line span:last-child{ color: var(--on-accent); font-weight: 700; font-family: var(--font-mono); } .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: 2px solid var(--on-accent); font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: var(--on-accent); } .home-v2 .booking-total span:last-child{ font-size: clamp(1.7rem, 2.6vw, 2.35rem); letter-spacing: -.02em; text-transform: none; color: var(--on-accent); } /* the button inverts: black plate, marigold label */ .home-v2 .px-build-summary .im-btn{ width: 100%; justify-content: center; margin-top: 1.5rem; background: var(--on-accent); color: var(--rust); border-color: var(--on-accent); } .home-v2 .px-build-summary .im-btn::before{ background: var(--paper-2); } .home-v2 .px-build-summary .im-btn:hover{ color: var(--ink); border-color: var(--on-accent); } .home-v2 .px-build-summary .im-btn:focus-visible{ outline-color: var(--on-accent); } .home-v2 .px-build-summary .form-note{ margin-top: .95rem; font-size: .76rem; line-height: 1.5; color: rgb(var(--dark-rgb) / .66); } /* ---------- 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). The full-height poster version for laptops is in section 15b. */ .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); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } .home-v2 .fleet-card:hover{ transform: translateY(-5px); border-color: var(--gold-line); box-shadow: var(--px-shadow-lift); } .home-v2 .fleet-card .card-art{ aspect-ratio: 5 / 4; } .home-v2 .fleet-card:hover .card-art img{ transform: scale(1.06); } .home-v2 .fleet-tag{ align-self: flex-start; margin: 1.3rem 1.4rem 0; font-family: var(--font-mono); font-weight: 500; font-size: .62rem; letter-spacing: .1em; border-radius: 0; color: var(--rust-text); background: transparent; border: 1px solid var(--gold-line); } .home-v2 .fleet-card h3{ padding: .85rem 1.4rem 0; font-size: 1.3rem; color: var(--ink); } .home-v2 .fleet-card p{ padding: .6rem 1.4rem 1.6rem; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); } /* -- a vehicle's short facts, as a row of stamped chips under the words -- content.js writes them from `facts` in EDIT_FLEET / EDIT_FLEET_4X4 and hides the row for a vehicle that has none. */ .home-v2 .fleet-facts{ display: flex; flex-wrap: wrap; gap: .4rem; margin: -.6rem 1.4rem 1.6rem; } .home-v2 .fleet-facts[hidden]{ display: none; } .home-v2 .fleet-facts li{ padding: .34rem .52rem; font-family: var(--font-mono); font-size: .6rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; color: var(--ink-soft); border: 1px solid var(--line-strong); } /* -- "Show the fleet for: Motorcycles / 4x4 Vehicles" in the heading -- The same switch as the one at the top of the page (content.js treats every [data-raid-kind-switch] alike), drawn as a two-way segmented control. The pressed side is the marigold plate. */ .home-v2 .px-fleet-head{ grid-template-columns: minmax(0, 1fr) auto; } .home-v2 .px-fleet-head .lede{ margin-top: 1.2rem; max-width: 56ch; } .home-v2 .fleet-kind{ justify-self: end; } html:not(.js) .home-v2 .fleet-kind{ display: none; } .home-v2 .fleet-kind-label{ margin-bottom: .65rem; font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } .home-v2 .fleet-switch{ display: grid; grid-template-columns: repeat(2, auto); gap: 4px; padding: 4px; background: var(--paper); border: 1px solid var(--line-strong); } .home-v2 .fleet-switch button{ display: inline-flex; align-items: center; justify-content: center; gap: .7rem; padding: .85rem 1rem .85rem .95rem; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: .72rem; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); background: transparent; border: 1px solid transparent; transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease); } .home-v2 .fleet-switch button:hover{ color: var(--ink); border-color: var(--gold-line); } .home-v2 .fleet-switch .fs-icon{ flex: none; width: 33px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; } .home-v2 .fleet-switch .fs-count{ min-width: 1.45rem; padding: .24rem .3rem; font-family: var(--font-mono); font-stretch: 100%; font-weight: 500; font-size: .62rem; letter-spacing: 0; text-align: center; border: 1px solid var(--line-strong); } .home-v2 .fleet-switch button[aria-pressed="true"]{ color: var(--on-accent); background: var(--rust); border-color: var(--rust); } .home-v2 .fleet-switch button[aria-pressed="true"] .fs-count{ border-color: rgb(var(--dark-rgb) / .35); } .home-v2 .fleet-switch button:focus-visible{ outline: 2px solid var(--rust); outline-offset: 3px; } /* ---------- 10. Why Montera Expeditions — hairline grid ---------- Six points in an uneven grid ruled by 1px lines (the grid's own background showing through a 1px gap). 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: 1px; background: var(--px-line); border: 1px solid var(--px-line); } .home-v2 .px-tile{ position: relative; display: flex; flex-direction: column; min-height: 17rem; padding: clamp(1.4rem, 2.4vw, 2rem); background: var(--paper); overflow: hidden; transition: background-color .45s var(--ease); } .home-v2 .px-tile:hover{ background: var(--surface); } .home-v2 .px-tile-wide{ grid-column: span 2; } /* the index number — top-left, above the heading */ .home-v2 .px-tile-n{ display: block; margin-bottom: auto; padding-bottom: 2rem; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: 2.4rem; line-height: 1; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px var(--gold-line); pointer-events: none; transition: color .45s var(--ease), -webkit-text-stroke-color .45s var(--ease); } .home-v2 .px-tile:hover .px-tile-n{ color: var(--rust); -webkit-text-stroke-color: var(--rust); } .home-v2 .px-tile h3{ position: relative; font-size: 1.18rem; color: var(--ink); max-width: 20ch; } .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: 1.2rem; align-self: flex-start; } /* the one photo tile, which anchors the grid */ .home-v2 .px-tile-photo{ grid-column: span 2; justify-content: flex-end; 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, rgb(var(--dark-rgb) / .12) 0%, rgb(var(--dark-rgb) / .9) 100%); } .home-v2 .px-tile-photo:hover{ background: var(--paper); } .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: 24ch; font-size: 1.45rem; } .home-v2 .px-tile-photo p{ color: rgb(var(--on-dark-rgb) / .8); max-width: 42ch; } .home-v2 .px-tile-photo .px-tile-n{ position: absolute; top: clamp(1.4rem, 2.4vw, 2rem); left: clamp(1.4rem, 2.4vw, 2rem); padding: 0; margin: 0; -webkit-text-stroke-color: rgb(var(--on-dark-rgb) / .6); } /* ---------- 11. Testimonials — the light band ---------- The one bone-coloured section on the page. 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{ --band-ink: var(--on-accent); --band-soft: rgb(var(--dark-rgb) / .72); --band-faint: rgb(var(--dark-rgb) / .58); --band-line: rgb(var(--dark-rgb) / .14); --band-accent: #7A4E00; /* marigold darkened to read on bone (6.4:1) */ background: var(--ink); color: var(--band-ink); border-top: 0; overflow: hidden; } .home-v2 .testimonial-strip::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; left: 0; top: 0; width: auto; height: auto; transform: none; background: url('../assets/topo.svg') center / 560px auto repeat; opacity: .28; mix-blend-mode: multiply; } .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, 5rem); align-items: start; } .home-v2 .px-voices-head{ position: sticky; top: 7.5rem; } .home-v2 .px-voices-head .eyebrow{ color: var(--band-accent); } .home-v2 .px-voices-head .eyebrow::before{ border-color: rgb(var(--dark-rgb) / .3); color: var(--band-ink); } .home-v2 .px-voices-head .display-2{ margin-top: 1.1rem; color: var(--band-ink); } /* on bone the marigold half of the headline becomes a highlighter stroke */ .home-v2 .px-voices-head .display-2 .ital{ color: var(--band-ink); background: linear-gradient(transparent 12%, var(--rust) 12%, var(--rust) 92%, transparent 92%); padding-inline: .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* the big rating block */ .home-v2 .px-score{ display: flex; align-items: center; gap: 1.2rem; margin-top: 2.2rem; padding-top: 1.8rem; border-top: 2px solid var(--band-ink); } .home-v2 .px-score-n{ font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: 4rem; line-height: 1; letter-spacing: -.03em; color: var(--band-ink); } .home-v2 .px-score .review-summary{ display: flex; flex-direction: column; gap: .35rem; margin: 0; justify-content: flex-start; align-items: flex-start; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--band-soft); } .home-v2 .px-score .stars{ color: var(--band-accent); letter-spacing: .2em; font-size: 1.05rem; font-family: var(--font-body); } .home-v2 .px-quotes{ display: grid; gap: 0; } .home-v2 .testimonial-strip .testi{ display: block; padding: clamp(1.6rem, 3vw, 2.4rem) 0; background: transparent; border: 0; border-top: 1px solid var(--band-line); border-radius: 0; overflow: visible; transition: none; } .home-v2 .testimonial-strip .testi:first-child{ border-top: 0; padding-top: 0; } .home-v2 .testimonial-strip .testi:hover{ transform: none; box-shadow: none; border-color: var(--band-line); } .home-v2 .testi::before{ content: none; } .home-v2 .testi .stars{ color: var(--band-accent); letter-spacing: .18em; font-size: .9rem; } .home-v2 .testi blockquote{ margin: .9rem 0 0; font-family: var(--font-display); font-stretch: var(--semi); font-weight: 600; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.42; letter-spacing: -.01em; color: var(--band-ink); } .home-v2 .testi figcaption{ display: flex; align-items: center; gap: .9rem; margin-top: 1.3rem; padding-top: 0; border-top: 0; } .home-v2 .testi-avatar{ flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 0; font-family: var(--font-mono); font-size: .76rem; font-weight: 500; color: var(--rust); background: var(--band-ink); border: 0; } .home-v2 .testi-id{ gap: .25rem; } .home-v2 .testi cite{ color: var(--band-ink); } .home-v2 .testi .review-tag{ font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; color: var(--band-faint); border: 0; padding: 0; } /* ---------- 12. FAQ — sticky heading + numbered accordion ---------- */ .home-v2 .px-faq{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .home-v2 .px-faq-head{ position: sticky; top: 7.5rem; } /* the "talk to a guide" card under the heading */ .home-v2 .px-faq-card{ margin-top: 2.2rem; padding: clamp(1.3rem, 2.4vw, 1.8rem); background: var(--surface); border: 1px solid var(--px-line); border-left: 3px solid var(--rust); } .home-v2 .px-faq-card h3{ font-size: 1.08rem; } .home-v2 .px-faq-card p{ margin-top: .5rem; font-size: .87rem; color: var(--ink-soft); } .home-v2 .px-faq-actions{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; } .home-v2 .px-faq-actions .im-btn{ padding: .85rem 1.15rem; font-size: .64rem; } .home-v2 .faq-list{ display: block; counter-reset: faq; } .home-v2 .faq-item{ counter-increment: faq; 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.2rem; padding: 1.5rem 0; text-align: left; font-family: var(--font-display); font-stretch: var(--semi); font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.35; color: var(--ink); transition: color .3s var(--ease); } .home-v2 .faq-question::before{ content: counter(faq, decimal-leading-zero); flex: none; width: 2rem; padding-top: .22rem; font-family: var(--font-mono); font-stretch: 100%; font-size: .7rem; font-weight: 500; color: var(--rust); } .home-v2 .faq-question > span:first-of-type{ flex: 1; } .home-v2 .faq-question:hover{ color: var(--rust); } .home-v2 .faq-question .plus{ flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: -.15rem; font-family: var(--font-body); font-size: 1.2rem; line-height: 1; color: var(--rust); background: transparent; border: 1px solid var(--gold-line); transition: transform .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease); } .home-v2 .faq-item.is-open .faq-question{ color: var(--rust); } .home-v2 .faq-item.is-open .faq-question .plus{ transform: rotate(45deg); background: var(--rust); color: var(--on-accent); border-color: var(--rust); } .home-v2 .faq-answer p{ padding: 0 3rem 1.7rem 3.2rem; max-width: 64ch; font-size: .94rem; line-height: 1.7; color: var(--ink-soft); } /* ---------- 13. Closing call-to-action band ---------- */ .home-v2 .px-cta{ position: relative; padding-block: clamp(6rem, 12vw, 10rem); 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; filter: grayscale(.35); } .home-v2 .px-cta-bg::after{ content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--dark-rgb) / .78), rgb(var(--dark-rgb) / .9)), radial-gradient(70% 60% at 50% 100%, rgb(var(--accent-rgb) / .22), transparent 65%); } .home-v2 .px-cta .im-shell{ position: relative; z-index: 1; } .home-v2 .px-cta .eyebrow{ justify-content: center; color: var(--rust); } .home-v2 .px-cta h2{ margin-top: 1.3rem; margin-inline: auto; max-width: 18ch; font-size: clamp(2.2rem, 5.6vw, 4.8rem); line-height: .94; color: var(--dark-ink); } .home-v2 .px-cta h2 .ital{ color: var(--rust); } .home-v2 .px-cta p{ margin-top: 1.2rem; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--on-dark-rgb) / .72); } .home-v2 .px-cta-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2.4rem; } .home-v2 .px-cta .im-btn-outline{ background: rgb(var(--dark-rgb) / .3); border-color: rgb(var(--on-dark-rgb) / .38); color: var(--dark-ink); } .home-v2 .px-cta .im-btn-outline:hover{ color: var(--rust); border-color: var(--rust); } /* ========================================================================= 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 (css/mobile.css then takes over completely at 768px and under.) ========================================================================= */ @media (max-width: 1180px){ /* the route rows lose their dedicated price column */ .home-v2 .card-expedition.px-route{ grid-template-columns: 4rem minmax(0, 13rem) 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; margin-left: .4rem; font-size: 1.2rem; } .home-v2 .card-expedition.px-route .text-link{ justify-self: start; margin-top: .2rem; } .home-v2 .departures-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 1024px is where main.css folds the four statistics into 2x2, so the ribbon's dividers are redrawn for a two-column block at the same width. */ @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){ .home-v2 .raid-kind-inner{ grid-template-columns: 1fr; } /* 4x4 raids: the words above the cards */ .home-v2 .px-x4-grid{ grid-template-columns: 1fr; } html[data-raid-kind="4x4"] .home-v2 .px-x4-copy{ display: block; } html[data-raid-kind="4x4"] .home-v2 .px-x4-copy .px-head{ margin-bottom: 2rem; } /* hero stacks: words first, the departure card underneath */ .home-v2 .px-hero-grid{ grid-template-columns: 1fr; align-items: start; gap: 2.5rem; padding-top: 8.5rem; } .home-v2 .px-hero-coords{ display: none; } .home-v2 .hero-dep{ justify-self: start; max-width: none; } .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; padding-left: 0; } .home-v2 .px-assure-item:nth-child(n+3){ border-top: 1px solid var(--px-line); } .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; grid-row: 1 / span 4; } .home-v2 .fleet-tag{ margin: 1.3rem 1.4rem 0; justify-self: start; } .home-v2 .fleet-kind{ justify-self: start; } .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; } } /* Below this width main.css collapses .dep-card into a compact pill and strips its badge's frame. css/mobile.css rebuilds the card for phones, so all that is restored here is the badge, which mobile.css leaves alone. */ @media (max-width: 768px){ .home-v2 .dep-card-badge{ border: 1px solid var(--pine-line); background: var(--pine-tint); color: var(--pine-soft); } .home-v2 .dep-card-badge.is-urgent{ color: var(--on-accent); background: var(--rust); border-color: transparent; } } @media (max-width: 560px){ .home-v2 .x4-card{ grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); } .home-v2 .x4-card-art{ min-height: 100%; } .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-assure{ grid-template-columns: 1fr; } .home-v2 .px-assure-item{ border-left: 0; padding-left: 0; } .home-v2 .px-assure-item + .px-assure-item{ border-top: 1px solid var(--px-line); } .home-v2 .card-expedition.px-route{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "body" "price" "link"; row-gap: .5rem; } .home-v2 .px-route-idx{ position: absolute; z-index: 2; top: 2.2rem; left: .8rem; color: var(--dark-ink); -webkit-text-stroke: 0; text-shadow: 0 2px 12px rgb(var(--shadow-rgb) / .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: .66rem; } .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; grid-row: auto; } .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: 3rem; } .home-v2 .faq-answer p{ padding-right: 1rem; padding-left: 0; } .home-v2 .px-faq-actions .im-btn{ width: 100%; } } /* ========================================================================= 15. LARGE SCREENS — the two "showcase" sections ========================================================================= * Upcoming departures -> two wide TICKETS per row instead of four narrow cards: the photo is the stub on the left, the details sit on the right behind a perforated seam, and the price sits above a full-width button. * The fleet -> three full-height POSTERS: the photograph is the card, with the words on its dark foot. ========================================================================= */ /* ---------- 15a. Upcoming departures — the ticket ---------- */ @media (min-width: 1181px){ .home-v2 .departures-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2vw, 1.8rem); } .home-v2 .departure-item{ display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); align-items: stretch; } .home-v2 .departure-item .card-art{ aspect-ratio: auto; height: 100%; min-height: 14.5rem; } .home-v2 .departure-item .card-art::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(158deg, rgb(var(--dark-rgb) / .55) 0%, rgb(var(--dark-rgb) / 0) 46%); } .home-v2 .departure-status{ top: 1rem; left: 1rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* ---- the perforated seam ---- Two notches out of the card edge plus a dashed rule between them. The notches are squares painted in the SECTION's colour (this section carries .px-alt, so --paper-2), turned 45° and half outside the card, which the card's own overflow:hidden then clips into V-cuts. */ .home-v2 .departure-item::before, .home-v2 .departure-item::after{ content: ""; position: absolute; z-index: 3; left: calc(36% - 9px); width: 18px; height: 18px; background: var(--paper-2); border: 1px solid var(--px-line); transform: rotate(45deg); } .home-v2 .departure-item::before{ top: -10px; } .home-v2 .departure-item::after{ bottom: -10px; } .home-v2 .departure-body{ position: relative; padding: 1.5rem 1.6rem 1.5rem 1.8rem; } .home-v2 .departure-body::before{ content: ""; position: absolute; left: 0; top: 1.2rem; bottom: 1.2rem; border-left: 2px dashed var(--line-strong); } /* a marigold hairline that draws itself across the top on hover */ .home-v2 .departure-body::after{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--rust); 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-item h4{ margin-top: .6rem; font-size: clamp(1.25rem, 1.5vw, 1.5rem); } .home-v2 .departure-item .meta{ margin-top: .5rem; font-size: .84rem; } /* The price gets its own line and the button runs full width beneath it. Side by side, the label was squeezed until it clipped ("ESERVE A SEA") below ~1300px, and a rupee price like "From ₹5,63,200" never fitted. */ .home-v2 .departure-item .amount{ margin-top: 0; font-size: 1.3rem; white-space: nowrap; } .home-v2 .departure-cta{ margin-top: .9rem; } .home-v2 .departure-item.is-closed .card-art img{ filter: grayscale(.7) brightness(.7); } .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; } } @media (min-width: 1500px){ .home-v2 .departure-item .card-art{ min-height: 16rem; } .home-v2 .departure-body{ padding-block: 1.8rem; } .home-v2 .departure-item .amount{ font-size: 1.45rem; } } /* ---------- 15b. The fleet — posters ---------- */ @media (min-width: 981px){ .home-v2 .fleet-card{ position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(31rem, 40vw, 36rem); background: var(--dark); overflow: hidden; } /* The photograph fills the top 70% and fades into the card's dark foot, so the machine itself stays clear of the words below it. */ .home-v2 .fleet-card .card-art{ position: absolute; inset: 0 0 auto; z-index: 0; width: 100%; height: 70%; aspect-ratio: auto; } .home-v2 .fleet-card .card-art::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(var(--dark-rgb) / 1) 0%, rgb(var(--dark-rgb) / .72) 24%, rgb(var(--dark-rgb) / .12) 52%, rgb(var(--dark-rgb) / .22) 100%); } .home-v2 .fleet-tag{ position: absolute; z-index: 2; top: 1.2rem; left: 1.2rem; margin: 0; color: var(--dark-ink); background: rgb(var(--dark-rgb) / .55); border-color: rgb(var(--on-dark-rgb) / .26); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .home-v2 .fleet-card h3{ position: relative; z-index: 2; padding: 0 1.6rem; font-size: clamp(1.3rem, 1.6vw, 1.62rem); line-height: 1.12; color: var(--dark-ink); text-shadow: 0 2px 16px rgb(var(--dark-rgb) / .55); } /* a short marigold rule under the name that lengthens on hover */ .home-v2 .fleet-card h3::after{ content: ""; display: block; width: 2.4rem; height: 3px; margin-top: .9rem; background: var(--rust); transition: width .55s var(--ease); } .home-v2 .fleet-card:hover h3::after{ width: 5rem; } .home-v2 .fleet-card p{ position: relative; z-index: 2; padding: .9rem 1.6rem 1.7rem; font-size: .9rem; line-height: 1.6; color: rgb(var(--on-dark-rgb) / .8); } .home-v2 .fleet-facts{ position: relative; z-index: 2; margin: -.7rem 1.6rem 1.7rem; } .home-v2 .fleet-facts li{ color: rgb(var(--on-dark-rgb) / .86); background: rgb(var(--dark-rgb) / .45); border-color: rgb(var(--on-dark-rgb) / .24); } } /* 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 .departure-item:hover, .home-v2 .fleet-card:hover, .home-v2 .x4-card:hover{ transform: none; } .home-v2 .departure-body::after{ transition: none; } .home-v2 .fleet-card h3::after{ transition: none; } } /* ========================================================================= 20. TRAIL-MAP HERO, TRIP FINDER, RAID PASS, WHERE WE RIDE ------------------------------------------------------------------------- The September 2026 refresh. All four are this site's own drawings, words and photographs: 20a. hero headline set condensed, and the status pill above it 20b. the dashed route map drawn over the hero photo 20c. the next-departure card as a tear-off "Raid Pass" 20d. the trip finder under the Motorcycle / 4x4 tabs 20e. "Where We Ride" destination tiles + the best-time card Phones: css/mobile.css does not know these classes, so the phone rules for them are at the end of this section. ========================================================================= */ /* ---------- 20a. Hero headline + pill ---------- */ .home-v2 .px-hero h1{ font-stretch: 68%; font-weight: 900; font-size: clamp(3.2rem, min(7.6vw, 12.5vh), 8rem); line-height: .86; letter-spacing: -.012em; text-transform: uppercase; } .home-v2 .px-hero-pill{ display: inline-flex; align-items: center; gap: .65rem; padding: .5rem .95rem .5rem .75rem; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--on-dark-rgb) / .88); background: rgb(var(--dark-rgb) / .45); border: 1px solid rgb(var(--on-dark-rgb) / .18); border-radius: 999px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .home-v2 .px-hero-pill-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--rust); animation: pxBeacon 2.4s ease-in-out infinite; } /* ---------- 20b. Route map over the photo ---------- */ .home-v2 .px-hero-map{ position: absolute; z-index: 1; right: calc(var(--gutter) + 1rem); top: clamp(6.5rem, 13vh, 8.5rem); width: min(36vw, 540px); height: auto; overflow: visible; pointer-events: none; } .home-v2 .px-map-draw{ fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pxMapDraw 2.2s .2s cubic-bezier(.6, 0, .3, 1) forwards; } .home-v2 .px-map-draw-2{ animation-delay: 1.5s; animation-duration: 1s; } @keyframes pxMapDraw{ to{ stroke-dashoffset: 0; } } .home-v2 .px-map-trail{ fill: none; stroke: rgb(var(--on-dark-rgb) / .85); stroke-width: 1.6; stroke-dasharray: 6 7; stroke-linecap: round; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .6)); } .home-v2 .px-map-spur{ stroke: rgb(var(--on-dark-rgb) / .55); } .home-v2 .px-map-pin{ opacity: 0; animation: pxPinIn .5s var(--d, 0s) ease-out forwards; } @keyframes pxPinIn{ to{ opacity: 1; } } .home-v2 .px-map-pin circle{ fill: rgb(var(--dark-rgb) / .55); stroke: rgb(var(--on-dark-rgb) / .9); stroke-width: 1.4; } .home-v2 .px-map-pin .core{ fill: var(--dark-ink); stroke: none; } .home-v2 .px-map-pin.is-peak circle{ stroke: var(--rust); } .home-v2 .px-map-pin.is-peak .core{ fill: var(--rust); } .home-v2 .px-map-pin text{ font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; fill: rgb(var(--on-dark-rgb) / .9); paint-order: stroke; stroke: rgb(var(--dark-rgb) / .55); stroke-width: 3px; } .home-v2 .px-map-pin.is-peak text{ fill: var(--rust-soft); } @media (max-width: 1100px){ .home-v2 .px-hero-map{ display: none; } } /* ---------- 20c. The departure card as a Raid Pass ---------- The two half-circle notches are cut out of the card with a mask, level with the dashed tear line at the top of the stub. --stub is the stub's height; the notch centres sit exactly that far up from the bottom. */ .home-v2 .dep-card{ --stub: 3.4rem; -webkit-mask: radial-gradient(circle 9px at 0 calc(100% - var(--stub)), transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% calc(100% - var(--stub)), transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 9px at 0 calc(100% - var(--stub)), transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% calc(100% - var(--stub)), transparent 98%, #000) right / 51% 100% no-repeat; } .home-v2 .dep-card-stub{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--stub); margin: 1.2rem -1.4rem -1.4rem; padding: 0 1.4rem; border-top: 1px dashed rgb(var(--on-dark-rgb) / .3); background: rgb(var(--on-dark-rgb) / .04); } .home-v2 .dep-card-stub-k{ font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--rust); } /* a drawn barcode — stripes of uneven width, nothing encoded */ .home-v2 .dep-card-stub-code{ width: 7.5rem; height: 1.5rem; opacity: .7; background: repeating-linear-gradient(90deg, var(--dark-ink) 0 2px, transparent 2px 4px, var(--dark-ink) 4px 5px, transparent 5px 8px, var(--dark-ink) 8px 11px, transparent 11px 12px, var(--dark-ink) 12px 13px, transparent 13px 16px); } /* ---------- 20d. Trip finder ---------- The two Motorcycle / 4x4 plates become tabs sitting on top of the finder panel; the pressed one merges into it. */ .home-v2 .raid-kind-bar{ padding-block: clamp(2.2rem, 4vw, 3.4rem); } .home-v2 .raid-kind-inner{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); row-gap: 0; align-items: end; } .home-v2 .raid-kind-head{ padding-bottom: 1.4rem; } .home-v2 .raid-kind-bar .raid-kind-switch{ gap: .4rem; align-self: end; } .home-v2 .raid-kind-bar .raid-kind-switch button{ padding-block: .9rem; border-bottom: 0; background: rgb(var(--ink-rgb) / .03); box-shadow: none; } .home-v2 .raid-kind-bar .raid-kind-switch button[aria-pressed="true"]{ background: var(--surface); border-color: var(--line-strong); border-top: 2px solid var(--rust); border-bottom: 0; box-shadow: none; } .home-v2 .finder{ grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.3fr) minmax(0, .6fr) auto; align-items: end; gap: 1rem; padding: 1.3rem; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 30px 60px -40px rgb(var(--shadow-rgb) / .9); } .home-v2 .finder-field{ display: grid; gap: .45rem; min-width: 0; } .home-v2 .finder-field label{ font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } .home-v2 .finder-field select{ width: 100%; min-width: 0; height: 3.2rem; padding: 0 2.4rem 0 1rem; font: 500 .95rem/1 var(--font-body); color: var(--ink); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4A91E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .9rem center / 16px no-repeat; border: 1px solid var(--line-strong); border-radius: 0; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; cursor: pointer; } .home-v2 .finder-field select option{ background: var(--surface); color: var(--ink); } .home-v2 .finder-field select:hover{ border-color: var(--gold-line); } .home-v2 .finder-field select:focus-visible{ outline: 2px solid var(--rust); outline-offset: 1px; } .home-v2 .finder-go{ height: 3.2rem; white-space: nowrap; } .home-v2 .finder-note{ grid-column: 1 / -1; margin-top: .7rem; font-size: .82rem; color: var(--ink-faint); } .home-v2 .finder-note:empty{ display: none; } /* ---------- 20e. Where We Ride ---------- */ .home-v2 .px-dest .px-head-split{ align-items: end; } .home-v2 .dest-season{ display: flex; gap: 1rem; align-items: flex-start; max-width: 30rem; justify-self: end; padding: 1.2rem 1.3rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--rust); } .home-v2 .dest-season svg{ flex: none; width: 34px; height: 34px; fill: none; stroke: var(--rust); stroke-width: 1.7; stroke-linecap: round; } .home-v2 .dest-season-k{ font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } .home-v2 .dest-season-v{ margin-top: .25rem; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; color: var(--rust); } .home-v2 .dest-season-t{ margin-top: .4rem; font-size: .84rem; line-height: 1.5; color: var(--ink-soft); } .home-v2 .dest-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(12rem, 18vw, 16.5rem); gap: .9rem; } .home-v2 .dest-tile{ position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem 1.25rem; color: var(--dark-ink); background: var(--surface-2); border: 1px solid var(--line); } .home-v2 .dest-tile-lead{ grid-column: span 2; grid-row: span 2; padding: 1.8rem; } .home-v2 .dest-tile img{ position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .home-v2 .dest-tile::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(var(--dark-rgb) / .88) 0%, rgb(var(--dark-rgb) / .2) 52%, rgb(var(--dark-rgb) / 0) 75%); } .home-v2 .dest-tile:hover img{ transform: scale(1.06); } .home-v2 .dest-tile:focus-visible{ outline: 2px solid var(--rust); outline-offset: 3px; } .home-v2 .dest-alt{ position: absolute; top: 1rem; left: 1rem; padding: .3rem .55rem; font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .1em; color: var(--on-accent); background: var(--rust); } .home-v2 .dest-body{ display: block; } .home-v2 .dest-name{ display: block; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: 1.05rem; line-height: 1.05; text-transform: uppercase; } .home-v2 .dest-tile-lead .dest-name{ font-size: clamp(1.6rem, 2.8vw, 2.4rem); } .home-v2 .dest-line{ display: block; margin-top: .4rem; font-size: .82rem; line-height: 1.4; color: rgb(var(--on-dark-rgb) / .78); } .home-v2 .dest-tile-lead .dest-line{ font-size: .95rem; } /* ---------- 20. tablets and phones ---------- */ @media (max-width: 980px){ .home-v2 .raid-kind-inner{ grid-template-columns: 1fr; } .home-v2 .raid-kind-head{ padding-bottom: .9rem; } .home-v2 .finder{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-v2 .finder-route{ grid-column: 1 / -1; } .home-v2 .finder-go{ grid-column: 1 / -1; } .home-v2 .dest-season{ justify-self: start; } .home-v2 .dest-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 13rem; } } @media (max-width: 768px){ /* mobile.css redraws the departure card for the phone — no stub there */ .home-v2 .dep-card{ -webkit-mask: none; mask: none; } .home-v2 .dep-card-stub{ display: none; } .home-v2 .px-hero-pill{ font-size: .56rem; padding: .4rem .7rem .4rem .6rem; } /* mobile.css tightens the headline for the wide face; the condensed one needs its letter-spacing back, and can stand a little larger. The extra .px-hero-copy is only there to outrank mobile.css. */ .home-v2 .px-hero .px-hero-copy h1{ font-size: clamp(2.6rem, 13vw, 3.6rem); line-height: .9; letter-spacing: -.005em; } .home-v2 .finder{ padding: 1rem; gap: .8rem; grid-template-columns: minmax(0, 1fr) 5.5rem; } .home-v2 .finder-field select{ height: 3rem; font-size: 1rem; } /* the tiles become one swipeable row */ .home-v2 .dest-grid{ display: flex; gap: .75rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .home-v2 .dest-grid::-webkit-scrollbar{ display: none; } .home-v2 .dest-tile, .home-v2 .dest-tile-lead{ flex: 0 0 78%; height: 20rem; padding: 1.2rem; scroll-snap-align: start; } .home-v2 .dest-tile-lead .dest-name{ font-size: 1.4rem; } } @media (prefers-reduced-motion: reduce){ .home-v2 .px-hero-pill-dot{ animation: none; } .home-v2 .px-map-draw{ animation: none; stroke-dashoffset: 0; } .home-v2 .px-map-pin{ animation: none; opacity: 1; } .home-v2 .dest-tile img{ transition: none; } }