From f569863ee334f75d7341aa4a829c15c8f4d2a826 Mon Sep 17 00:00:00 2001 From: inxs Date: Sun, 23 Aug 2026 13:58:41 +0800 Subject: [PATCH] =?UTF-8?q?=E7=B2=BE=E7=AE=80=E9=A6=96=E9=A1=B5=E9=A2=84?= =?UTF-8?q?=E8=A7=88=E7=89=88=E6=9C=AC=E5=B9=B6=E4=BC=98=E5=8C=96=E5=93=8D?= =?UTF-8?q?=E5=BA=94=E5=BC=8F=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/TravelSite.css | 1100 --------------------------------- src/TravelSite.tsx | 537 +--------------- src/TravelSiteAtlas.css | 38 +- src/TravelSiteRefinements.css | 137 ---- 4 files changed, 31 insertions(+), 1781 deletions(-) diff --git a/src/TravelSite.css b/src/TravelSite.css index b8b1f7d..1d77c1c 100644 --- a/src/TravelSite.css +++ b/src/TravelSite.css @@ -21,1106 +21,6 @@ font-family: 'Assistant', Arial, sans-serif; } - -/* -------------------------------------------------------------------------- */ -/* Homepage V2 — travel journal / MI Travel-inspired editorial direction */ -/* -------------------------------------------------------------------------- */ - -.oc-home-v2 { - --v2-navy: #111d26; - --v2-paper: #f2eee7; - --v2-cyan: #c8eced; - --v2-coral: #ef755d; - --v2-line: rgba(17, 29, 38, .18); - background: var(--v2-paper); - color: var(--v2-navy); - overflow: clip; -} - -.oc-v2-hero { position: relative; min-height: calc(100svh - 91px); color: #fff; isolation: isolate; overflow: hidden; } -.oc-v2-hero > img, -.oc-v2-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; } -.oc-v2-hero > img { z-index: -2; object-fit: cover; object-position: center 46%; filter: saturate(.72) contrast(1.06); } -.oc-v2-hero-shade { z-index: -1; background: linear-gradient(90deg, rgba(10,22,30,.78), rgba(10,22,30,.13) 68%), linear-gradient(0deg, rgba(10,22,30,.72), transparent 55%); } -.oc-v2-hero-copy { width: min(calc(100% - 120px), 1500px); min-height: calc(100svh - 91px); margin: 0 auto; padding: 70px 0 82px; display: flex; flex-direction: column; justify-content: space-between; } -.oc-v2-hero-copy > p { margin: 0; font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: rgba(255,255,255,.74); } -.oc-site .oc-v2-hero h1 { margin: auto 0 54px; max-width: 1070px; color: #fff; font: 500 clamp(70px, 9.2vw, 150px)/.82 'Cormorant Garamond', Georgia, serif; letter-spacing: -.055em; } -.oc-v2-hero h1 em { color: var(--v2-cyan); font-weight: 400; } -.oc-v2-hero-bottom { display: grid; grid-template-columns: minmax(280px, 470px) auto; gap: 60px; align-items: end; } -.oc-v2-hero-bottom > span { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.75); } -.oc-v2-hero-bottom > a, -.oc-v2-final a { justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-width: 218px; padding: 20px 24px; background: var(--v2-coral); color: #fff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; transition: background .25s ease, transform .25s ease; } -.oc-v2-hero-bottom > a:hover, -.oc-v2-final a:hover { background: #da604c; transform: translateY(-2px); } -.oc-v2-hero-scroll { position: absolute; right: 0; bottom: 0; width: 76px; height: 76px; display: grid; place-items: center; background: var(--v2-cyan); color: var(--v2-navy); } -.oc-v2-hero-scroll svg { transform: rotate(90deg); } - -.oc-home-v2 [style*="clip-path"], -.oc-home-v1 [style*="clip-path"] { will-change: clip-path, transform, opacity; } -.oc-v2-hero > img, -.oc-v2-experience-card > img, -.oc-v2-route-card img, -.oc-v2-field-collage img, -.oc-v2-final > img, -.oc-home-v1 .oc-experience-band img, -.oc-home-v1 .oc-home-safari-image { will-change: transform; } - -.oc-v2-discover, -.oc-v2-routes, -.oc-v2-field { padding: clamp(100px, 11vw, 175px) clamp(24px, 5.5vw, 88px); } -.oc-v2-section-intro { display: grid; grid-template-columns: 190px 1fr; gap: 5vw; align-items: start; max-width: 1510px; margin: 0 auto 82px; border-top: 1px solid var(--v2-line); padding-top: 23px; } -.oc-v2-section-intro > span, -.oc-v2-feature-copy > span, -.oc-v2-field-heading > span, -.oc-v2-local-copy > span { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; } -.oc-v2-section-intro > div { display: grid; grid-template-columns: minmax(340px, 1.2fr) minmax(280px, .55fr); gap: 7vw; align-items: start; } -.oc-site .oc-v2-section-intro h2 { margin: 0; color: var(--v2-navy); font: 500 clamp(48px, 6.1vw, 94px)/.92 'Cormorant Garamond', Georgia, serif; letter-spacing: -.05em; } -.oc-v2-section-intro p { margin: 7px 0 0; color: #5c666b; font-size: 15px; line-height: 1.8; } - -.oc-v2-experience-grid { max-width: 1510px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 330px 460px; gap: 14px; } -.oc-v2-experience-card { position: relative; min-height: 0; overflow: hidden; isolation: isolate; color: #fff; } -.oc-v2-experience-card.is-1 { grid-column: 1 / 8; grid-row: 1 / 3; } -.oc-v2-experience-card.is-2 { grid-column: 8 / 13; grid-row: 1; } -.oc-v2-experience-card.is-3 { grid-column: 8 / 11; grid-row: 2; } -.oc-v2-experience-card.is-4 { grid-column: 11 / 13; grid-row: 2; } -.oc-v2-experience-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6,16,22,.75), transparent 65%); } -.oc-v2-experience-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); transition: transform .7s cubic-bezier(.22,1,.36,1), filter .4s ease; } -.oc-v2-experience-card:hover > img { transform: scale(1.045); filter: saturate(1); } -.oc-v2-experience-card > span { position: absolute; top: 20px; left: 22px; font-size: 10px; letter-spacing: .15em; } -.oc-v2-experience-card > div { position: absolute; left: 24px; right: 24px; bottom: 26px; } -.oc-v2-experience-card small { display: block; margin-bottom: 8px; color: rgba(255,255,255,.68); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; } -.oc-site .oc-v2-experience-card h3 { margin: 0; color: #fff; font: 500 clamp(30px, 3.3vw, 56px)/.9 'Cormorant Garamond', Georgia, serif; letter-spacing: -.04em; } -.oc-v2-experience-card > svg { position: absolute; right: 22px; top: 19px; transition: transform .25s ease; } -.oc-v2-experience-card:hover > svg { transform: translate(5px,-3px); } - -.oc-v2-feature { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); min-height: 850px; background: var(--v2-cyan); } -.oc-v2-feature-image { position: relative; min-height: 760px; } -.oc-v2-feature-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); } -.oc-v2-feature-image > span { position: absolute; bottom: 22px; left: 25px; padding: 10px 13px; background: var(--v2-paper); color: var(--v2-navy); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; } -.oc-v2-feature-copy { padding: clamp(70px, 8vw, 130px) clamp(44px, 7vw, 110px); align-self: center; } -.oc-site .oc-v2-feature-copy h2 { margin: 38px 0 32px; color: var(--v2-navy); font: 500 clamp(51px, 6.1vw, 94px)/.88 'Cormorant Garamond', Georgia, serif; letter-spacing: -.055em; } -.oc-v2-feature-copy > p { max-width: 580px; color: #415257; font-size: 16px; line-height: 1.8; } -.oc-v2-feature-copy > a, -.oc-v2-local-copy > a { display: inline-flex; align-items: center; gap: 14px; margin-top: 24px; padding-bottom: 7px; border-bottom: 1px solid; color: var(--v2-navy); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } -.oc-v2-feature-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 72px; padding-top: 26px; border-top: 1px solid rgba(17,29,38,.23); } -.oc-v2-feature-facts b { display: block; font: 500 clamp(28px, 3vw, 44px)/1 'Cormorant Garamond', Georgia, serif; } -.oc-v2-feature-facts span { display: block; margin-top: 9px; color: #536367; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; } - -.oc-v2-routes { background: var(--v2-navy); color: #fff; } -.oc-v2-section-intro.is-light { border-color: rgba(255,255,255,.2); } -.oc-v2-section-intro.is-light > span, -.oc-v2-section-intro.is-light p { color: rgba(255,255,255,.64); } -.oc-site .oc-v2-section-intro.is-light h2 { color: #fff; } -.oc-v2-route-grid { max-width: 1510px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 290px 430px; gap: 15px; } -.oc-v2-route-card { position: relative; overflow: hidden; isolation: isolate; color: #fff; } -.oc-v2-route-card.is-1 { grid-column: 1 / 8; grid-row: 1 / 3; } -.oc-v2-route-card.is-2 { grid-column: 8 / 13; grid-row: 1; } -.oc-v2-route-card.is-3 { grid-column: 8 / 13; grid-row: 2; } -.oc-v2-route-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6,14,20,.88), rgba(6,14,20,.05) 75%); } -.oc-v2-route-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); transition: transform .7s cubic-bezier(.22,1,.36,1), filter .4s; } -.oc-v2-route-card:hover img { transform: scale(1.04); filter: saturate(.93); } -.oc-v2-route-card > div { position: absolute; left: clamp(22px, 3vw, 45px); right: clamp(22px, 3vw, 45px); bottom: clamp(24px, 3vw, 44px); } -.oc-v2-route-card span { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.67); } -.oc-site .oc-v2-route-card h3 { margin: 11px 0 13px; color: #fff; font: 500 clamp(33px, 4vw, 67px)/.9 'Cormorant Garamond', Georgia, serif; letter-spacing: -.045em; } -.oc-v2-route-card p { max-width: 570px; margin: 0 0 17px; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.6; } -.oc-v2-route-card b { display: inline-flex; align-items: center; gap: 9px; color: var(--v2-cyan); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } - -.oc-v2-field { background: #e8e3da; } -.oc-v2-field-heading { max-width: 1510px; margin: 0 auto 75px; display: grid; grid-template-columns: 190px minmax(0, 900px); gap: 5vw; border-top: 1px solid var(--v2-line); padding-top: 23px; } -.oc-site .oc-v2-field-heading h2 { margin: 0; color: var(--v2-navy); font: 500 clamp(52px, 6.7vw, 103px)/.88 'Cormorant Garamond', Georgia, serif; letter-spacing: -.055em; } -.oc-v2-field-collage { max-width: 1510px; height: 920px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 300px 240px 330px; gap: 14px; } -.oc-v2-field-collage figure { position: relative; margin: 0; overflow: hidden; } -.oc-v2-field-collage figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.74); } -.oc-v2-field-collage figure.is-1 { grid-column: 1 / 8; grid-row: 1 / 3; } -.oc-v2-field-collage figure.is-2 { grid-column: 8 / 13; grid-row: 1; } -.oc-v2-field-collage figure.is-3 { grid-column: 8 / 11; grid-row: 2; } -.oc-v2-field-collage figure.is-4 { grid-column: 11 / 13; grid-row: 2; } -.oc-v2-field-collage figure.is-5 { grid-column: 5 / 13; grid-row: 3; } -.oc-v2-field-collage figcaption { position: absolute; left: 22px; bottom: 22px; padding: 9px 12px; background: var(--v2-paper); font-size: 10px; letter-spacing: .08em; } -.oc-v2-field-note { grid-column: 1 / 5; grid-row: 3; display: flex; flex-direction: column; justify-content: space-between; padding: 31px; background: var(--v2-coral); color: #fff; } -.oc-v2-field-note p { margin: 0; font: 500 clamp(27px, 2.5vw, 40px)/1.02 'Cormorant Garamond', Georgia, serif; letter-spacing: -.03em; } - -.oc-v2-local { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 900px; background: var(--v2-paper); } -.oc-v2-local-media { position: relative; min-height: 760px; margin: clamp(70px, 8vw, 120px) 0 clamp(70px, 8vw, 120px) clamp(24px, 5.5vw, 88px); } -.oc-v2-local-media img:first-child { width: 83%; height: 82%; object-fit: cover; filter: saturate(.65); } -.oc-v2-local-media img:last-child { position: absolute; right: 0; bottom: 0; width: 46%; height: 42%; object-fit: cover; border: 12px solid var(--v2-paper); filter: saturate(.72); } -.oc-v2-local-copy { align-self: center; padding: 80px clamp(44px, 7vw, 120px); } -.oc-site .oc-v2-local-copy h2 { margin: 38px 0 30px; color: var(--v2-navy); font: 500 clamp(50px, 6vw, 94px)/.89 'Cormorant Garamond', Georgia, serif; letter-spacing: -.055em; } -.oc-v2-local-copy > p { max-width: 560px; color: #59646a; font-size: 15px; line-height: 1.8; } -.oc-v2-local-copy ul { padding: 0; margin: 43px 0 0; list-style: none; border-top: 1px solid var(--v2-line); } -.oc-v2-local-copy li { position: relative; padding: 19px 0 19px 23px; border-bottom: 1px solid var(--v2-line); font-size: 13px; } -.oc-v2-local-copy li::before { content: ''; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; background: var(--v2-coral); transform: translateY(-50%); } - -.oc-v2-final { position: relative; min-height: 760px; display: grid; place-items: center; text-align: center; color: #fff; isolation: isolate; } -.oc-v2-final > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) brightness(.7); } -.oc-v2-final::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(10,22,30,.38); } -.oc-v2-final > div { padding: 50px 24px; } -.oc-v2-final span { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.7); } -.oc-site .oc-v2-final h2 { margin: 28px auto 50px; color: #fff; font: 500 clamp(72px, 10vw, 155px)/.82 'Cormorant Garamond', Georgia, serif; letter-spacing: -.06em; } -.oc-v2-final a { justify-self: center; } - -.oc-home-v2 :is(a, button):focus-visible { outline: 3px solid var(--v2-coral); outline-offset: 4px; } - -@media (prefers-reduced-motion: reduce) { - .oc-home-v2 *, - .oc-home-v1 * { - animation-duration: .01ms !important; - animation-iteration-count: 1 !important; - scroll-behavior: auto !important; - } - - .oc-home-v2 [style], - .oc-home-v1 [style] { - translate: none !important; - rotate: none !important; - scale: none !important; - } -} - -@media (max-width: 960px) { - .oc-v2-hero-copy { width: calc(100% - 48px); } - .oc-v2-section-intro, - .oc-v2-field-heading { grid-template-columns: 1fr; gap: 25px; } - .oc-v2-section-intro > div { grid-template-columns: 1fr; gap: 22px; } - .oc-v2-experience-grid { grid-template-rows: 470px 300px 300px; } - .oc-v2-experience-card.is-1 { grid-column: 1 / 13; grid-row: 1; } - .oc-v2-experience-card.is-2 { grid-column: 1 / 7; grid-row: 2; } - .oc-v2-experience-card.is-3 { grid-column: 7 / 13; grid-row: 2; } - .oc-v2-experience-card.is-4 { grid-column: 1 / 13; grid-row: 3; } - .oc-v2-feature { grid-template-columns: 1fr; } - .oc-v2-feature-image { min-height: 650px; } - .oc-v2-route-grid { grid-template-rows: 550px 360px 360px; } - .oc-v2-route-card.is-1 { grid-column: 1 / 13; grid-row: 1; } - .oc-v2-route-card.is-2 { grid-column: 1 / 13; grid-row: 2; } - .oc-v2-route-card.is-3 { grid-column: 1 / 13; grid-row: 3; } - .oc-v2-local { grid-template-columns: 1fr; } - .oc-v2-local-media { min-height: 680px; margin-right: 24px; } -} - -@media (max-width: 640px) { - .oc-v2-hero { min-height: calc(100svh - 76px); } - .oc-v2-hero-copy { width: calc(100% - 40px); min-height: calc(100svh - 76px); padding: 39px 0 64px; } - .oc-site .oc-v2-hero h1 { font-size: 62px; margin-bottom: 35px; } - .oc-v2-hero-bottom { grid-template-columns: 1fr; gap: 23px; } - .oc-v2-hero-bottom > a { justify-self: start; } - .oc-v2-hero-scroll { display: none; } - .oc-v2-discover, - .oc-v2-routes, - .oc-v2-field { padding-inline: 20px; } - .oc-site .oc-v2-section-intro h2, - .oc-site .oc-v2-field-heading h2 { font-size: 49px; } - .oc-v2-experience-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, 360px); } - .oc-v2-experience-card.is-1, - .oc-v2-experience-card.is-2, - .oc-v2-experience-card.is-3, - .oc-v2-experience-card.is-4 { grid-column: 1; grid-row: auto; } - .oc-v2-feature-image { min-height: 520px; } - .oc-v2-feature-copy { padding: 74px 20px; } - .oc-site .oc-v2-feature-copy h2, - .oc-site .oc-v2-local-copy h2 { font-size: 51px; } - .oc-v2-feature-facts { grid-template-columns: 1fr; } - .oc-v2-field-collage { height: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 420px 230px 230px 300px; } - .oc-v2-field-collage figure.is-1 { grid-column: 1 / 3; grid-row: 1; } - .oc-v2-field-collage figure.is-2 { grid-column: 1; grid-row: 2; } - .oc-v2-field-collage figure.is-3 { grid-column: 2; grid-row: 2; } - .oc-v2-field-collage figure.is-4 { grid-column: 1; grid-row: 3; } - .oc-v2-field-collage figure.is-5 { grid-column: 2; grid-row: 3; } - .oc-v2-field-note { grid-column: 1 / 3; grid-row: 4; } - .oc-v2-local-media { min-height: 480px; margin: 70px 20px 0; } - .oc-v2-local-copy { padding: 70px 20px 90px; } - .oc-v2-final { min-height: 620px; } -} - -/* -------------------------------------------------------------------------- */ -/* Homepage V1 complete system — bold editorial / business narrative */ -/* -------------------------------------------------------------------------- */ - -.oc-home-v1 { - --v1-ink: #172319; - --v1-paper: #f2efe5; - --v1-acid: #d9f266; - --v1-line: rgba(23, 35, 25, .22); - background: var(--v1-paper); - color: var(--v1-ink); - overflow: clip; -} - -.oc-home-v1 .oc-home-trust { - background: var(--v1-ink); - color: #f7f3e9; - border: 0; -} - -.oc-home-v1 .oc-home-trust-grid { - max-width: none; - padding-inline: clamp(24px, 5vw, 78px); -} - -.oc-home-v1 .oc-home-trust-item { border-color: rgba(255,255,255,.18); } -.oc-home-v1 .oc-home-trust-item svg { color: var(--v1-acid); } -.oc-home-v1 .oc-home-trust-item span { color: rgba(255,255,255,.64); } - -.oc-home-v1 .oc-home-plan-row { - max-width: none; - margin: 0; - padding: 0 clamp(24px, 5vw, 78px) clamp(92px, 10vw, 150px); - background: var(--v1-ink); - color: #fff; - border-radius: 0; - border: 0; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0; -} - -.oc-home-v1 .oc-plan-panel .oc-step { - min-height: 260px; - padding: 54px 34px 30px 0; - border-top: 1px solid rgba(255,255,255,.25); - border-right: 1px solid rgba(255,255,255,.18); -} - -.oc-home-v1 .oc-plan-panel .oc-step + .oc-step { padding-left: 34px; } -.oc-home-v1 .oc-plan-panel .oc-step:last-child { border-right: 0; } -.oc-home-v1 .oc-plan-panel .oc-step b { color: var(--v1-acid); font: 500 13px/1 var(--oc-sans); } -.oc-home-v1 .oc-plan-panel .oc-step h3 { margin-top: 68px; color: #fff; font-size: clamp(25px, 2.2vw, 36px); letter-spacing: -.035em; } -.oc-home-v1 .oc-plan-panel .oc-step p { color: rgba(255,255,255,.62); max-width: 330px; } - -.oc-home-v1 .oc-home-section, -.oc-home-v1 .oc-home-team, -.oc-home-v1 .oc-quote, -.oc-home-v1 .oc-live { - max-width: none; - padding-inline: clamp(24px, 5vw, 78px); -} - -.oc-home-v1 .oc-home-experiences { - width: auto; - padding-top: clamp(58px, 6vw, 88px); - padding-bottom: clamp(78px, 8vw, 118px); -} - -.oc-home-v1 .oc-home-experiences .oc-section-title { - display: block; - max-width: 920px; - margin: 0 auto 40px; - padding-top: 0; - border-top: 0; - text-align: center; -} - -.oc-home-v1 .oc-home-experiences .oc-section-title h2 { - max-width: none; - font-size: clamp(48px, 4.4vw, 68px); - line-height: .94; -} - -.oc-home-v1 .oc-home-experiences .oc-section-title p { - max-width: 700px; - margin: 22px auto 0; -} - -.oc-home-v1 .oc-section-title { - display: grid; - grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr); - align-items: end; - gap: 8vw; - border-top: 1px solid var(--v1-line); - padding-top: 24px; - margin-bottom: 72px; -} - -.oc-home-v1 .oc-section-title h2 { - max-width: 730px; - font-size: clamp(54px, 7vw, 116px); - line-height: .88; - letter-spacing: -.065em; - color: var(--v1-ink); -} - -.oc-home-v1 .oc-section-title p { - margin: 0 0 8px; - max-width: 520px; - color: #516052; - font-size: 16px; - line-height: 1.75; -} - -.oc-home-v1 .oc-experience-stack { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: clamp(12px, 1.25vw, 22px); - background: transparent; - border: 0; -} -.oc-home-v1 .oc-experience-band { - height: 660px; - min-height: 660px; - grid-template-rows: 360px 300px; - border: 0; - border-radius: 0; - box-shadow: none; - transition: transform .55s cubic-bezier(.2,.75,.3,1), box-shadow .55s ease; -} -.oc-home-v1 .oc-experience-band.charcoal { background: #173b28; color: #f5f2e8; } -.oc-home-v1 .oc-experience-band.clay { background: #478d4f; color: #fffdf5; } -.oc-home-v1 .oc-experience-band.tan { background: #a4bd75; color: #173326; } -.oc-home-v1 .oc-experience-band img { - filter: saturate(.74) contrast(.98); - transition: transform .85s cubic-bezier(.2,.75,.3,1), filter .55s ease; -} -.oc-home-v1 .oc-experience-band:hover { - transform: translateY(-9px); - box-shadow: 0 28px 55px rgba(21, 39, 28, .14); -} -.oc-home-v1 .oc-experience-band:hover img { transform: scale(1.055); filter: saturate(.98) contrast(1.02); } -.oc-home-v1 .oc-experience-band-content { padding: clamp(25px, 2.25vw, 36px); } -.oc-home-v1 .oc-experience-band-meta, -.oc-home-v1 .oc-experience-band h3, -.oc-home-v1 .oc-experience-band p, -.oc-home-v1 .oc-experience-band small { color: inherit; } -.oc-home-v1 .oc-experience-band-meta { opacity: .78; } -.oc-home-v1 .oc-experience-band h3 { - max-width: 360px; - font-family: 'Assistant', Arial, sans-serif; - font-size: clamp(31px, 2.7vw, 45px); - font-weight: 560; - line-height: 1.02; - letter-spacing: -.045em; -} -.oc-home-v1 .oc-experience-band p { opacity: .78; } -.oc-home-v1 .oc-experience-band small { border-top-color: currentColor; opacity: .82; } -.oc-home-v1 .oc-experience-band small svg { transition: transform .3s ease; } -.oc-home-v1 .oc-experience-band:hover small svg { transform: translateX(7px); } -.oc-home-v1 .oc-experience-band:focus-visible { - outline: 3px solid var(--v1-acid); - outline-offset: 5px; -} -.oc-home-v1 .oc-home-experiences > .oc-center { margin-top: 44px; } - -.oc-home-v1 .oc-home-safaris-section { - background: #cfd7ca; - padding-top: clamp(92px, 11vw, 160px); - padding-bottom: clamp(100px, 12vw, 165px); -} -.oc-home-v1 .oc-home-safaris { gap: 1px; background: rgba(23,35,25,.2); } -.oc-home-v1 .oc-home-safari { border: 0; border-radius: 0; box-shadow: none; background: #f6f3e9; } -.oc-home-v1 .oc-home-safari-media { min-height: 380px; } -.oc-home-v1 .oc-home-safari-image { filter: saturate(.74); } -.oc-home-v1 .oc-home-safari:hover .oc-home-safari-image { transform: scale(1.035); filter: saturate(.95); } -.oc-home-v1 .oc-home-safari-media > span { background: var(--v1-acid); color: var(--v1-ink); border: 0; } -.oc-home-v1 .oc-home-safari-body { padding: 30px 28px 34px; } -.oc-home-v1 .oc-home-safari-body h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -.045em; } -.oc-home-v1 .oc-home-safari-footer { border-top-color: var(--v1-line); } -.oc-home-v1 .oc-clay-btn { border-radius: 0; background: var(--v1-ink); color: #fff; border: 1px solid var(--v1-ink); } -.oc-home-v1 .oc-clay-btn:hover { background: var(--v1-acid); color: var(--v1-ink); } - -.oc-home-v1 .oc-home-team { - width: auto; - margin-top: 0; - padding-top: clamp(92px, 9vw, 132px); - padding-bottom: clamp(92px, 9vw, 132px); - background: #d9ded3; -} -.oc-home-v1 .oc-home-team-layout { gap: clamp(54px, 7vw, 108px); align-items: center; } -.oc-home-v1 .oc-home-team-media { min-height: 690px; } -.oc-home-v1 .oc-home-team-main-image { width: 100%; height: 610px; border-radius: 0; filter: saturate(.78) contrast(.97); } -.oc-home-v1 .oc-home-team-field-image { border-radius: 0; border: 9px solid #d9ded3; width: 42%; height: 230px; } -.oc-home-v1 .oc-home-team-copy h2 { max-width: 650px; color: var(--v1-ink); font-size: clamp(50px, 5.1vw, 78px); line-height: .94; letter-spacing: -.055em; } -.oc-home-v1 .oc-home-team-intro { max-width: 570px; color: #506051; } -.oc-home-v1 .oc-home-team-service { border-top-color: var(--v1-line); } -.oc-home-v1 .oc-home-team-service > span { color: #738072; } -.oc-home-v1 .oc-home-team-service h3 { font-family: 'Assistant', Arial, sans-serif; font-weight: 650; } -.oc-home-v1 .oc-outline-btn { border-radius: 0; border-color: var(--v1-ink); color: var(--v1-ink); } -.oc-home-v1 .oc-outline-btn:hover { background: var(--v1-ink); color: #fff; } - -.oc-home-v1 .oc-quote { - padding-block: clamp(80px, 9vw, 135px); - background: var(--v1-ink); - color: #fff; -} -.oc-home-v1 .oc-quote-media img { border-radius: 0; filter: saturate(.68); } -.oc-home-v1 .oc-quote-copy blockquote p { color: #fff; font-size: clamp(35px, 5vw, 72px); letter-spacing: -.045em; line-height: 1.02; } -.oc-home-v1 .oc-quote-copy > span { color: var(--v1-acid); } - -.oc-home-v1 .oc-home-social-strip { padding-top: 0; padding-bottom: 0; background: var(--v1-ink); } -.oc-home-v1 .oc-social-channel-list { border-block: 1px solid rgba(255,255,255,.18); } -.oc-home-v1 .oc-social-channel { border-color: rgba(255,255,255,.18); color: #fff; border-radius: 0; background: transparent; } -.oc-home-v1 .oc-social-channel span { color: rgba(255,255,255,.58); } - -.oc-home-v1 .oc-live { padding-top: clamp(100px, 12vw, 175px); padding-bottom: clamp(100px, 12vw, 175px); } -.oc-home-v1 .oc-live-heading { display: grid; grid-template-columns: 150px 1.15fr .65fr; gap: 4vw; align-items: start; border-top: 1px solid var(--v1-line); padding-top: 24px; } -.oc-home-v1 .oc-live-heading h2 { margin: 0; color: var(--v1-ink); font-size: clamp(50px, 6.3vw, 96px); line-height: .9; letter-spacing: -.06em; } -.oc-home-v1 .oc-live-heading p { margin: 0; color: #526052; line-height: 1.7; } -.oc-home-v1 .oc-live-grid { margin-top: 70px; gap: 10px; } -.oc-home-v1 .oc-live-photo { border-radius: 0; } -.oc-home-v1 .oc-live-photo img { filter: saturate(.74); } -.oc-home-v1 .oc-live-photo:hover img { filter: saturate(.98); } - -.oc-home-v1 .oc-home-comparison { background: #d9ded3; padding-block: clamp(92px, 11vw, 160px); } -.oc-home-v1 .oc-comparison-heading { display: grid; grid-template-columns: 150px 1.1fr .7fr; gap: 4vw; align-items: start; } -.oc-home-v1 .oc-comparison-heading h2 { margin: 0; color: var(--v1-ink); font-size: clamp(48px, 5.7vw, 88px); line-height: .92; letter-spacing: -.055em; } -.oc-home-v1 .oc-comparison-heading p { margin: 0; color: #4b594d; } -.oc-home-v1 .oc-comparison-table { border-collapse: collapse; border-radius: 0; } -.oc-home-v1 .oc-comparison-table :is(th, td) { border-color: rgba(23,35,25,.18); } -.oc-home-v1 .oc-comparison-table .is-wanderq { background: var(--v1-ink); color: #fff; } - -.oc-home-v1 .oc-home-final-cta { - background: var(--v1-ink); - color: #f7f5ef; - padding-block: clamp(100px, 10.5vw, 158px); -} -.oc-home-v1 .oc-home-final-cta::before { display: none; } -.oc-home-v1 .oc-home-final-cta-layout { grid-template-columns: minmax(0, 1.12fr) minmax(360px, .72fr); align-items: end; } -.oc-home-v1 .oc-home-final-cta-copy { max-width: 790px; } -.oc-home-v1 .oc-home-final-cta-copy h2 { - max-width: 790px; - color: #f7f5ef; - font-size: clamp(62px, 7.1vw, 108px); - line-height: .88; - letter-spacing: -.064em; -} -.oc-home-v1 .oc-home-final-cta-copy h2 em { color: var(--v1-acid); font-style: normal; } -.oc-home-v1 .oc-home-final-cta-copy p { max-width: 610px; color: rgba(247,245,239,.68); } -.oc-home-v1 .oc-home-final-eyebrow { color: rgba(247,245,239,.66); } -.oc-home-v1 .oc-home-final-cta .oc-orange-btn { border-radius: 0; background: var(--v1-acid); color: var(--v1-ink); } -.oc-home-v1 .oc-home-final-cta .oc-orange-btn:hover { background: #f7f5ef; color: var(--v1-ink); } -.oc-home-v1 .oc-home-final-cta-button { transform: none !important; } -.oc-home-v1 .oc-home-final-cta-note { - display: block; - margin-top: 18px; - color: rgba(247,245,239,.48); - font-size: 10px; - font-weight: 650; - letter-spacing: .09em; - line-height: 1.55; - text-transform: uppercase; -} -.oc-home-v1 .oc-home-inquiry-prompts { border-color: rgba(247,245,239,.28); } -.oc-home-v1 .oc-home-inquiry-prompt { border-color: rgba(247,245,239,.15); } -.oc-home-v1 .oc-home-inquiry-prompt h3 { color: #f7f5ef; font-family: 'Assistant', Arial, sans-serif; font-weight: 650; } -.oc-home-v1 .oc-home-inquiry-prompt p { color: rgba(247,245,239,.56); } -.oc-home-v1 .oc-home-inquiry-prompt > span { color: rgba(185,207,70,.75); } -.oc-home-v1 .oc-home-inquiry-prompts-label { color: var(--v1-acid); } - -@media (max-width: 900px) { - .oc-home-v1 .oc-home-plan-row { grid-template-columns: 1fr; } - .oc-home-v1 .oc-plan-panel .oc-step, - .oc-home-v1 .oc-plan-panel .oc-step + .oc-step { min-height: 0; padding: 34px 0 38px; border-right: 0; } - .oc-home-v1 .oc-plan-panel .oc-step h3 { margin-top: 28px; } - .oc-home-v1 .oc-section-title, - .oc-home-v1 .oc-live-heading, - .oc-home-v1 .oc-comparison-heading { grid-template-columns: 1fr; gap: 24px; } - .oc-home-v1 .oc-live-heading h2, - .oc-home-v1 .oc-comparison-heading h2 { max-width: 700px; } - .oc-home-v1 .oc-home-final-cta-layout { grid-template-columns: 1fr; gap: 58px; } - .oc-home-v1 .oc-home-final-cta-copy, - .oc-home-v1 .oc-home-inquiry-prompts { max-width: 680px; } -} - -@media (max-width: 640px) { - .oc-home-v1 .oc-home-trust-grid { padding-inline: 20px; } - .oc-home-v1 .oc-home-plan-row, - .oc-home-v1 .oc-home-section, - .oc-home-v1 .oc-home-team, - .oc-home-v1 .oc-quote, - .oc-home-v1 .oc-live { padding-inline: 20px; } - .oc-home-v1 .oc-section-title h2 { font-size: 50px; } - .oc-home-v1 .oc-experience-band { min-height: 560px; } - .oc-home-v1 .oc-home-safari-media { min-height: 290px; } - .oc-home-v1 .oc-live-heading h2, - .oc-home-v1 .oc-comparison-heading h2 { font-size: 47px; } - .oc-home-v1 .oc-home-final-cta { padding-block: 78px 82px; } - .oc-home-v1 .oc-home-final-cta-layout { gap: 48px; } - .oc-home-v1 .oc-home-final-cta-copy h2 { margin-top: 18px; font-size: 44px; line-height: .96; } - .oc-home-v1 .oc-home-final-cta-copy p { margin-top: 22px; font-size: 14px; line-height: 1.68; } - .oc-home-v1 .oc-home-final-cta-button { width: 100%; min-width: 0; margin-top: 30px; } - .oc-home-v1 .oc-home-final-cta-note { margin-top: 15px; letter-spacing: .055em; } -} - -@media (max-width: 820px) { - .oc-home-v1 .oc-home-team { - padding-top: 76px; - padding-bottom: 82px; - } - - .oc-home-v1 .oc-home-team-media { - min-height: 560px; - } - - .oc-home-v1 .oc-home-team-main-image { - height: 480px; - } - - .oc-home-v1 .oc-home-team-field-image { - width: 44%; - height: 210px; - } -} - -@media (max-width: 640px) { - .oc-home-v1 .oc-home-team-media { - min-height: 430px; - } - - .oc-home-v1 .oc-home-team-main-image { - height: 340px; - } - - .oc-home-v1 .oc-home-team-field-image { - width: 58%; - height: 176px; - border-width: 7px; - } - - .oc-home-v1 .oc-home-team-copy h2 { - font-size: 42px; - line-height: 1; - } - - .oc-home-v1 .oc-home-team-cta { - transform: none !important; - } -} - -@media (max-width: 360px) { - .oc-home-v1 .oc-home-team-cta { - gap: 8px; - padding-inline: 12px; - font-size: 10px; - letter-spacing: .03em; - white-space: normal; - text-align: center; - } -} - -@media (max-width: 820px) { - .oc-home-v1 .oc-experience-stack { - grid-template-columns: 1fr; - gap: 22px; - } - - .oc-home-v1 .oc-experience-band { - height: auto; - min-height: 390px; - grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); - grid-template-rows: 1fr; - } -} - -@media (max-width: 640px) { - .oc-home-v1 .oc-home-experiences { - padding-top: 72px; - padding-bottom: 60px; - } - - .oc-home-v1 .oc-home-experiences .oc-section-title { - margin-bottom: 36px; - text-align: left; - } - - .oc-home-v1 .oc-home-experiences .oc-section-title p { - margin-left: 0; - } - - .oc-home-v1 .oc-experience-band { - height: auto; - min-height: 0; - grid-template-columns: 1fr; - grid-template-rows: auto auto; - } - - .oc-home-v1 .oc-experience-band-media { - min-height: 0; - aspect-ratio: 4 / 3.25; - } - - .oc-home-v1 .oc-experience-band-content { - min-height: 280px; - padding: 24px 22px; - } - - .oc-home-v1 .oc-experience-band h3 { - font-size: 30px; - } - - .oc-home-v1 .oc-home-experiences > .oc-center { - margin-top: 34px; - } -} - -/* Homepage concept 2026 — bold destination matrix + narrative funnel */ -.oc-prototype-hero { - position: relative; - min-height: calc(100svh - 91px); - overflow: hidden; - isolation: isolate; - color: #f7f5ed; - background: #17221b; -} - -.oc-prototype-hero-image, -.oc-prototype-hero-shade { - position: absolute; - inset: 0; - width: 100%; - height: 112%; -} - -.oc-prototype-hero-image { - z-index: -3; - object-fit: cover; - object-position: center 48%; - filter: saturate(.72) contrast(1.04) brightness(.8); - animation: oc-prototype-image-in 1.2s cubic-bezier(.22, 1, .36, 1) both; -} - -@keyframes oc-prototype-image-in { - from { opacity: .35; transform: scale(1.055); } - to { opacity: 1; transform: scale(1); } -} - -.oc-prototype-hero-shade { - z-index: -2; - height: 100%; - background: - linear-gradient(90deg, rgba(8, 14, 10, .62) 0%, rgba(8, 14, 10, .13) 61%, rgba(8, 14, 10, .31) 100%), - linear-gradient(0deg, rgba(8, 14, 10, .73) 0%, rgba(8, 14, 10, .02) 52%, rgba(8, 14, 10, .22) 100%); -} - -.oc-prototype-hero-content { - width: min(calc(100% - 96px), 1500px); - min-height: calc(100svh - 91px); - display: grid; - grid-template-columns: minmax(0, 1fr) 340px; - grid-template-rows: auto 1fr; - column-gap: 58px; - align-items: end; - margin: 0 auto; - padding: 47px 0 150px; -} - -.oc-prototype-hero-kicker { - grid-column: 1 / -1; - align-self: start; - margin: 0; - color: rgba(255, 255, 255, .76); - font-size: 11px; - font-weight: 700; - letter-spacing: .2em; - text-transform: uppercase; -} - -.oc-site .oc-prototype-hero-content h1 { - max-width: 1050px; - margin: 0; - color: #fff; - font-family: 'Assistant', Arial, sans-serif; - font-size: clamp(68px, 8.1vw, 132px); - font-weight: 650; - line-height: .82; - letter-spacing: -.072em; -} - -.oc-prototype-hero-title-row { - display: block; - overflow: hidden; - padding: 0 .08em .08em 0; -} - -.oc-prototype-hero-title-line { - display: block; -} - -.oc-prototype-hero-title-line.is-accent { - color: #d9ff57; -} - -/* Chinese glyphs need a taller line box than the compact Latin hero type. */ -html[data-oc-language='zh'] .oc-site .oc-prototype-hero-content h1 { - max-width: 100%; - font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; - font-size: clamp(58px, 6.6vw, 108px); - font-weight: 700; - line-height: 1.06; - letter-spacing: -.045em; -} - -html[data-oc-language='zh'] .oc-prototype-hero-title-row { - padding: .06em .08em .12em 0; -} - -@media (max-width: 540px) { - html[data-oc-language='zh'] .oc-site .oc-prototype-hero-content h1 { - font-size: clamp(36px, 12vw, 50px); - line-height: 1.08; - } -} - -.oc-prototype-hero-side { - align-self: end; - padding-bottom: 10px; -} - -.oc-prototype-hero-side p { - margin: 0 0 29px; - color: rgba(255, 255, 255, .79); - font-size: 16px; - line-height: 1.65; -} - -.oc-prototype-hero-side a, -.oc-prototype-story-copy > a { - display: inline-flex; - align-items: center; - gap: 18px; - padding-bottom: 9px; - color: currentColor; - border-bottom: 1px solid currentColor; - font-size: 12px; - font-weight: 700; - letter-spacing: .08em; - text-transform: uppercase; -} - -.oc-prototype-hero-footer { - position: absolute; - right: 0; - bottom: 0; - left: 0; - min-height: 80px; - display: grid; - grid-template-columns: 1fr auto auto; - gap: 48px; - align-items: center; - padding: 0 max(48px, calc((100vw - 1500px) / 2)); - border-top: 1px solid rgba(255, 255, 255, .24); - color: rgba(255, 255, 255, .72); - font-size: 10px; - font-weight: 700; - letter-spacing: .12em; - text-transform: uppercase; -} - -.oc-prototype-hero-assurances, -.oc-prototype-hero-controls { - display: flex; - align-items: center; -} - -.oc-prototype-hero-assurances { gap: 26px; } -.oc-prototype-hero-assurances span + span::before { content: '·'; margin-right: 26px; } -.oc-prototype-hero-controls { gap: 11px; } - -.oc-prototype-hero-dot { - width: 26px; - height: 1px; - padding: 7px 0; - border: 0; - background: linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.42)) center / 100% 1px no-repeat; - cursor: pointer; -} - -.oc-prototype-hero-dot.is-active { - background-image: linear-gradient(#d9ff57, #d9ff57); -} - -.oc-prototype-hero-playback { - width: 27px; - height: 27px; - display: grid; - place-items: center; - padding: 0; - border: 0; - color: #fff; - background: transparent; - cursor: pointer; -} - -.oc-prototype-hero :is(button, a):focus-visible, -.oc-prototype-themes a:focus-visible, -.oc-prototype-story a:focus-visible { - outline: 2px solid #d9ff57; - outline-offset: 5px; -} - -.oc-prototype-themes { - min-height: 100svh; - padding: 118px max(48px, calc((100vw - 1500px) / 2)) 104px; - color: #f3f1e8; - background: #142119; -} - -.oc-prototype-theme-head { - display: grid; - grid-template-columns: 160px minmax(0, 1fr) 320px; - gap: 45px; - align-items: end; - margin-bottom: 64px; -} - -.oc-prototype-theme-head > span, -.oc-prototype-story-copy > span { - align-self: start; - color: #d9ff57; - font-size: 10px; - font-weight: 700; - line-height: 1.5; - letter-spacing: .17em; - text-transform: uppercase; -} - -.oc-site .oc-prototype-theme-head h2, -.oc-site .oc-prototype-story-copy h2 { - margin: 0; - color: inherit; - font-family: 'Assistant', Arial, sans-serif; - font-size: clamp(52px, 6.2vw, 96px); - font-weight: 620; - line-height: .9; - letter-spacing: -.065em; - white-space: pre-line; -} - -.oc-site .oc-prototype-story-copy h2 em { - color: #527f58; - font-style: normal; - font-weight: inherit; -} - -.oc-prototype-theme-head p { - margin: 0 0 5px; - color: rgba(243, 241, 232, .58); - font-size: 15px; - line-height: 1.7; -} - -.oc-prototype-theme-grid { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - border-top: 1px solid rgba(255, 255, 255, .19); - border-left: 1px solid rgba(255, 255, 255, .19); -} - -.oc-prototype-theme-card { - position: relative; - min-height: clamp(230px, 21vw, 330px); - display: grid; - grid-template-columns: 1fr auto; - grid-template-rows: 1fr auto; - align-items: end; - padding: 25px 27px 27px; - overflow: hidden; - border-right: 1px solid rgba(255, 255, 255, .19); - border-bottom: 1px solid rgba(255, 255, 255, .19); - color: #f8f6ee; - isolation: isolate; -} - -.oc-prototype-theme-card::after { - content: ''; - position: absolute; - inset: 0; - z-index: -1; - background: linear-gradient(0deg, rgba(5, 10, 7, .88), rgba(5, 10, 7, .05) 70%); - transition: background-color .45s ease; -} - -.oc-prototype-theme-card img { - position: absolute; - inset: 0; - z-index: -2; - width: 100%; - height: 100%; - object-fit: cover; - filter: saturate(.62) brightness(.73); - transition: transform .7s cubic-bezier(.2,.75,.3,1), filter .5s ease; -} - -.oc-prototype-theme-card > span { - grid-column: 1 / -1; - align-self: start; - color: rgba(255, 255, 255, .66); - font-size: 10px; - letter-spacing: .15em; -} - -.oc-site .oc-prototype-theme-card h3 { - margin: 0; - color: inherit; - font-size: clamp(23px, 2vw, 34px); - font-weight: 600; - line-height: 1; - letter-spacing: -.035em; - font-family: 'Assistant', Arial, sans-serif; -} - -.oc-prototype-theme-card:hover img { transform: scale(1.065); filter: saturate(.9) brightness(.9); } -.oc-prototype-theme-card:hover::after { background-color: rgba(45, 75, 52, .25); } -.oc-prototype-theme-card:hover svg { transform: translate(5px, -5px); } -.oc-prototype-theme-card svg { transition: transform .25s ease; } - -.oc-prototype-story { - min-height: 0; - display: grid; - grid-template-columns: minmax(380px, .88fr) minmax(0, 1.12fr); - grid-template-rows: auto 1fr auto; - column-gap: clamp(64px, 7vw, 112px); - padding: 96px max(48px, calc((100vw - 1500px) / 2)) 88px; - color: #1d2b21; - background: #f1efe5; -} - -.oc-prototype-story-image { - position: relative; - grid-row: 1 / 4; - min-height: 780px; - overflow: hidden; - background: #d8ddd4; -} - -.oc-prototype-story-image::after { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(0deg, rgba(10, 20, 13, .48), transparent 44%); -} - -.oc-prototype-story-image img { - width: 100%; - height: 100%; - object-fit: cover; - filter: saturate(.75) contrast(.95); -} - -.oc-prototype-story-image span { - position: absolute; - bottom: 29px; - left: 31px; - z-index: 1; - color: #fff; - font-size: 10px; - font-weight: 700; - letter-spacing: .16em; - text-transform: uppercase; -} - -.oc-prototype-story-copy { - display: grid; - grid-template-columns: 125px 1fr; - column-gap: 35px; - align-content: start; -} - -.oc-prototype-story-copy h2 { grid-column: 2; } - -.oc-prototype-story-copy > p { - grid-column: 2; - max-width: 620px; - margin: 27px 0 0; - color: #5d695f; - font-size: 17px; - line-height: 1.75; -} - -.oc-prototype-story-copy > a { - grid-column: 2; - justify-self: start; - margin-top: 28px; - color: #263a2c; -} - -.oc-prototype-story-steps { - align-self: end; - margin-top: 54px; - border-top: 1px solid rgba(25, 42, 30, .22); -} - -.oc-prototype-story-step { - display: grid; - grid-template-columns: 70px 1fr; - gap: 25px; - padding: 24px 0; - border-bottom: 1px solid rgba(25, 42, 30, .18); -} - -.oc-prototype-story-step > span { - color: #66816c; - font-size: 11px; - font-weight: 700; - letter-spacing: .15em; -} - -.oc-site .oc-prototype-story-step h3 { - margin: 0 0 7px; - color: #253429; - font-size: 22px; - font-weight: 650; - line-height: 1.25; - font-family: 'Assistant', Arial, sans-serif; -} - -.oc-prototype-story-step p { - max-width: 680px; - margin: 0; - color: #667069; - font-size: 14px; - line-height: 1.65; -} - -.oc-prototype-story-proof { - margin: 30px 0 0; - color: #68816d; - font-size: 10px; - font-weight: 700; - letter-spacing: .12em; - text-transform: uppercase; -} - -@media (max-width: 1100px) { - .oc-prototype-hero-content { grid-template-columns: 1fr; align-content: end; } - .oc-prototype-hero-side { max-width: 520px; margin-top: 28px; } - .oc-prototype-hero-assurances { display: none; } - .oc-prototype-hero-footer { grid-template-columns: 1fr auto; } - .oc-prototype-theme-head { grid-template-columns: 120px 1fr; } - .oc-prototype-theme-head p { grid-column: 2; } - .oc-prototype-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } - .oc-prototype-story { grid-template-columns: minmax(300px, .8fr) 1.2fr; column-gap: 54px; } - .oc-prototype-story-copy { grid-template-columns: 1fr; } - .oc-prototype-story-copy > :is(h2, p, a) { grid-column: 1; } - .oc-prototype-story-copy > span { margin-bottom: 24px; } -} - -@media (max-width: 820px) { - .oc-prototype-hero { min-height: calc(100svh - 76px); } - .oc-prototype-hero-content { - width: min(100% - 40px, 700px); - min-height: calc(100svh - 76px); - padding: 33px 0 122px; - } - .oc-prototype-hero-content h1 { font-size: clamp(54px, 13vw, 86px); line-height: .87; } - .oc-prototype-hero-footer { min-height: 64px; padding: 0 20px; } - .oc-prototype-hero-footer > span { display: none; } - .oc-prototype-hero-footer { grid-template-columns: 1fr; } - .oc-prototype-hero-controls { justify-self: start; } - .oc-prototype-themes { padding: 84px 20px 74px; } - .oc-prototype-theme-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 42px; } - .oc-prototype-theme-head p { grid-column: 1; max-width: 480px; } - .oc-prototype-theme-card { min-height: 250px; } - .oc-prototype-story { grid-template-columns: 1fr; padding: 64px 20px 68px; } - .oc-prototype-story-image { grid-row: auto; min-height: 540px; margin-bottom: 60px; } -} - -@media (max-width: 540px) { - .oc-prototype-hero-content h1 { font-size: 52px; } - .oc-prototype-hero-side p { font-size: 14px; } - .oc-prototype-theme-grid { grid-template-columns: 1fr; } - .oc-prototype-theme-card { min-height: 235px; } - .oc-prototype-theme-head h2, - .oc-prototype-story-copy h2 { font-size: 48px; } - .oc-prototype-story-image { min-height: 440px; } - .oc-prototype-story-step { grid-template-columns: 42px 1fr; gap: 12px; } -} /* Underground karst experience detail */ .oc-cave-detail { --oc-cave-ink: #172019; diff --git a/src/TravelSite.tsx b/src/TravelSite.tsx index 7a495e9..4aaf697 100644 --- a/src/TravelSite.tsx +++ b/src/TravelSite.tsx @@ -6,14 +6,11 @@ import { ArrowLeft, ArrowRight, CheckCircle, - Globe, - Headset, List, MagnifyingGlass, MapPin, PauseCircle, PlayCircle, - UsersThree, X, } from '@phosphor-icons/react'; import { @@ -1819,9 +1816,6 @@ function routeDetailPillars(safari: SafariCardItem, language: SiteLanguage = 'zh } function selectPage(path: string) { - if (path === '/preview/classic') return ; - if (path === '/preview/v1') return ; - if (path === '/preview/v2') return ; if (path === '/safari-faqs' || path === '/faqs') return ; if (path.startsWith('/our-guides')) return ; if (path.startsWith('/meet-the-team')) return ; @@ -1855,269 +1849,6 @@ function selectPage(path: string) { return ; } -function EditorialHomePage() { - const { content, language } = useTravelSite(); - const editorialRef = useRef(null); - const home = content.home; - const editorialExperiences = [ - { number: '01', title: pickText('山野', 'Wild Karst', language), eyebrow: pickText('徒步 · 骑行 · 洞穴', 'Hike · Cycle · Caves', language), image: '/client-assets/karst-hike-ridge.jpg', href: '/experiences/karst-hiking/' }, - { number: '02', title: pickText('村寨', 'Village Life', language), eyebrow: pickText('日常 · 家宴 · 手作', 'Homes · Tables · Craft', language), image: '/client-assets/villages-xijiang-dusk.jpg', href: '/experiences/indigenous-ethnic-villages/' }, - { number: '03', title: pickText('水世界', 'Water Worlds', language), eyebrow: pickText('瀑布 · 峡谷 · 河流', 'Falls · Canyons · Rivers', language), image: '/client-assets/waterfall-huangguoshu-curtain.jpg', href: '/experiences/iconic-waterfall-clusters/' }, - { number: '04', title: pickText('贵州味道', 'Taste Guizhou', language), eyebrow: pickText('家宴 · 市场 · 山野咖啡', 'Tables · Markets · Coffee', language), image: '/client-assets/culinary-long-table-banquet.jpg', href: '/experiences/culinary-cultural-journeys/' }, - ]; - const editorialRoutes = home.safaris.cards.slice(0, 3); - const fieldImages = [ - '/client-assets/team-field-day.webp', - '/client-assets/culture-batik-making.jpg', - '/client-assets/river-packraft-shore.jpg', - '/client-assets/ancient-towns-zhenyuan-night.jpg', - '/client-assets/culinary-long-table-banquet.jpg', - ]; - - useGSAP( - () => { - if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; - - const heroTimeline = gsap.timeline({ defaults: { ease: 'power3.out' } }); - heroTimeline - .from('.oc-v2-hero > img', { scale: 1.13, autoAlpha: 0.4, duration: 1.8, ease: 'power2.out' }) - .from('.oc-v2-hero-copy > p', { y: 20, autoAlpha: 0, duration: 0.6 }, '-=1.18') - .from('.oc-v2-hero h1', { y: 90, autoAlpha: 0, duration: 1.05 }, '-=.85') - .from('.oc-v2-hero-bottom > *', { y: 32, autoAlpha: 0, duration: 0.7, stagger: 0.12 }, '-=.58') - .from('.oc-v2-hero-scroll', { scale: 0.65, autoAlpha: 0, duration: 0.55 }, '-=.45'); - - gsap.to('.oc-v2-hero > img', { - yPercent: 10, - scale: 1.08, - ease: 'none', - scrollTrigger: { trigger: '.oc-v2-hero', start: 'top top+=90', end: 'bottom top', scrub: 0.7 }, - }); - - gsap.to('.oc-v2-hero-scroll svg', { - y: 8, - duration: 1.15, - repeat: -1, - yoyo: true, - ease: 'sine.inOut', - }); - - gsap.utils.toArray('.oc-v2-section-intro, .oc-v2-field-heading').forEach((heading) => { - gsap.from(heading.children, { - y: 58, - autoAlpha: 0, - duration: 0.9, - stagger: 0.12, - ease: 'power3.out', - scrollTrigger: { trigger: heading, start: 'top 78%', once: true }, - }); - }); - - gsap.from('.oc-v2-experience-card', { - y: 86, - clipPath: 'inset(0 0 100% 0)', - duration: 1.05, - stagger: 0.11, - ease: 'power4.out', - scrollTrigger: { trigger: '.oc-v2-experience-grid', start: 'top 76%', once: true }, - }); - gsap.from('.oc-v2-experience-card > img', { - scale: 1.18, - duration: 1.5, - stagger: 0.11, - ease: 'power3.out', - scrollTrigger: { trigger: '.oc-v2-experience-grid', start: 'top 76%', once: true }, - }); - - gsap.from('.oc-v2-feature-image', { - clipPath: 'inset(0 100% 0 0)', - duration: 1.25, - ease: 'power4.inOut', - scrollTrigger: { trigger: '.oc-v2-feature', start: 'top 72%', once: true }, - }); - gsap.from('.oc-v2-feature-image img', { - scale: 1.16, - duration: 1.6, - ease: 'power3.out', - scrollTrigger: { trigger: '.oc-v2-feature', start: 'top 72%', once: true }, - }); - gsap.from('.oc-v2-feature-copy > *', { - y: 58, - autoAlpha: 0, - duration: 0.82, - stagger: 0.1, - ease: 'power3.out', - scrollTrigger: { trigger: '.oc-v2-feature-copy', start: 'top 74%', once: true }, - }); - - gsap.from('.oc-v2-route-card', { - y: 90, - clipPath: 'inset(100% 0 0 0)', - duration: 1.08, - stagger: 0.13, - ease: 'power4.out', - scrollTrigger: { trigger: '.oc-v2-route-grid', start: 'top 76%', once: true }, - }); - gsap.from('.oc-v2-route-card img', { - scale: 1.16, - duration: 1.55, - stagger: 0.13, - ease: 'power3.out', - scrollTrigger: { trigger: '.oc-v2-route-grid', start: 'top 76%', once: true }, - }); - - gsap.from('.oc-v2-field-collage figure, .oc-v2-field-note', { - y: 76, - scale: 0.96, - autoAlpha: 0, - duration: 0.9, - stagger: 0.1, - ease: 'power3.out', - scrollTrigger: { trigger: '.oc-v2-field-collage', start: 'top 76%', once: true }, - }); - gsap.to('.oc-v2-field-collage figure.is-1 img', { - yPercent: 10, - scale: 1.08, - ease: 'none', - scrollTrigger: { trigger: '.oc-v2-field-collage', start: 'top bottom', end: 'bottom top', scrub: 0.8 }, - }); - - gsap.from('.oc-v2-local-media img:first-child', { - clipPath: 'inset(0 0 100% 0)', - scale: 1.1, - duration: 1.25, - ease: 'power4.out', - scrollTrigger: { trigger: '.oc-v2-local', start: 'top 72%', once: true }, - }); - gsap.from('.oc-v2-local-media img:last-child', { - x: 70, - y: 60, - rotate: 2, - autoAlpha: 0, - duration: 0.95, - ease: 'power3.out', - scrollTrigger: { trigger: '.oc-v2-local', start: 'top 65%', once: true }, - }); - gsap.from('.oc-v2-local-copy > *', { - y: 52, - autoAlpha: 0, - duration: 0.78, - stagger: 0.09, - ease: 'power3.out', - scrollTrigger: { trigger: '.oc-v2-local-copy', start: 'top 74%', once: true }, - }); - - gsap.from('.oc-v2-final > div > *', { - y: 66, - autoAlpha: 0, - duration: 0.9, - stagger: 0.13, - ease: 'power3.out', - scrollTrigger: { trigger: '.oc-v2-final', start: 'top 66%', once: true }, - }); - gsap.fromTo('.oc-v2-final > img', { scale: 1.06 }, { - scale: 1.16, - ease: 'none', - scrollTrigger: { trigger: '.oc-v2-final', start: 'top bottom', end: 'bottom top', scrub: 0.9 }, - }); - }, - { scope: editorialRef, dependencies: [language], revertOnUpdate: true }, - ); - - return ( -
-
- {pickText('贵州喀斯特山野中的万趣私家旅行', -
- -
-
- 01 / {pickText('选择一种靠近方式', 'Choose how to get closer', language)} -
-

{pickText('贵州不只有一个入口。', 'There is more than one way into Guizhou.', language)}

-

{pickText('从喀斯特山野、村寨日常、水世界或贵州餐桌出发。每一种体验都可以成为一条私家路线的起点。', 'Begin with wild karst, village life, water worlds or the local table. Each can become the first chapter of a private route.', language)}

-
-
-
- {editorialExperiences.map((item, index) => ( - - {item.title} - {item.number} -
{item.eyebrow}

{item.title}

- - ))} -
-
- -
-
- {pickText('贵州村寨真实生活', - {pickText('贵州 · 黔东南', 'Southeast Guizhou', language)} -
-
- 02 / {pickText('本期故事', 'Featured story', language)} -

{pickText('去一个地方，也理解一个地方。', 'Go somewhere. Understand it, too.', language)}

-

{pickText('在村寨里留下一晚，在家常饭桌上多坐一会，听懂一门手艺和一栋木楼背后的生活。我们把“看见”变成真正的相遇。', 'Stay a night in the village. Linger at the family table. Understand the life behind a craft and a timber home. We turn seeing into meeting.', language)}

- {pickText('阅读村寨故事', 'Read the village story', language)} -
-
100%{pickText('私家定制', 'private planning', language)}
-
24/7{pickText('在地协调', 'local support', language)}
-
EN / 中{pickText('双语支持', 'bilingual support', language)}
-
-
-
- -
-
- 03 / {pickText('旅行灵感', 'Journey inspiration', language)} -

{pickText('三条路线，都是讨论的开始。', 'Three routes. Each starts a conversation.', language)}

{pickText('先选一个接近你的方向，再按日期、兴趣、体力和住宿偏好重新编排。', 'Choose the direction closest to you, then reshape it around dates, interests, energy and stays.', language)}

-
- -
- -
-
04 / {pickText('来自现场', 'From the field', language)}

{pickText('真实旅行，没有摆拍的模板。', 'Real journeys. No staged template.', language)}

-
- {fieldImages.map((image, index) =>
{pickText(`贵州旅行现场{index === 0 ?
{pickText('万趣本地团队，在贵州。', 'The WanderQ team, here in Guizhou.', language)}
: null}
)} -
-
-
- -
-
{pickText('万趣贵州本地团队',{pickText('万趣团队旅行现场',
-
05 / {pickText('为什么是万趣', 'Why WanderQ', language)}

{pickText('离现场近一点，旅程就从容一点。', 'Closer to the field. Calmer on the road.', language)}

{pickText('我们在贵州本地规划与执行。熟悉山路、天气、水位与村寨节奏，也理解境外客人需要怎样清楚、可靠的英文旅行支持。', 'We plan and operate from Guizhou—close to the roads, weather, water and village rhythms, with clear English-language support for international guests.', language)}

  • {pickText('一组客人，一套私家方案', 'One private plan for one party', language)}
  • {pickText('合规入境接待与透明报价', 'Compliant inbound reception and clear pricing', language)}
  • {pickText('行程期间 24 小时在地协调', '24-hour local coordination while travelling', language)}
{pickText('认识本地团队', 'Meet the local team', language)}
-
- -
- {pickText('贵州镇远古城夜景', -
{pickText('下一段旅程，从一场对话开始。', 'Your next journey starts with a conversation.', language)}

{pickText('贵州，等你走进。', 'Guizhou is waiting.', language)}

{pickText('开始规划', 'Start planning', language)}
-
-
- ); -} - function Header({ language, menuOpen, @@ -2687,19 +2418,17 @@ function SearchOverlay({ onClose }: { onClose: () => void }) { ); } -function HomePage({ variant = 'v1' }: { variant?: 'classic' | 'v1' }) { +function HomePage() { const { content, language } = useTravelSite(); const prototypeRef = useRef(null); const home = content.home; const heroSlides = useMemo( - () => variant === 'v1' - ? [ - '/client-assets/atlas-hero-waterfall.webp', - '/client-assets/hero-real-travelers.webp', - '/client-assets/hero-miao-home-meal.webp', - ] - : [home.hero.imageUrl, ...home.hero.awardUrls].filter(Boolean), - [home.hero.awardUrls, home.hero.imageUrl, variant], + () => [ + '/client-assets/atlas-hero-waterfall.webp', + '/client-assets/hero-real-travelers.webp', + '/client-assets/hero-miao-home-meal.webp', + ], + [], ); const [heroIndex, setHeroIndex] = useState(0); const [heroPaused, setHeroPaused] = useState(false); @@ -2707,7 +2436,6 @@ function HomePage({ variant = 'v1' }: { variant?: 'classic' | 'v1' }) { useGSAP( () => { - if (variant === 'classic') return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; const heroTimeline = gsap.timeline({ defaults: { ease: 'power3.out' } }); @@ -2759,7 +2487,7 @@ function HomePage({ variant = 'v1' }: { variant?: 'classic' | 'v1' }) { scrollTrigger: { trigger: '.oc-atlas-plan', start: 'top 72%', once: true }, }); }, - { scope: prototypeRef, dependencies: [language, variant], revertOnUpdate: true }, + { scope: prototypeRef, dependencies: [language], revertOnUpdate: true }, ); useEffect(() => { @@ -2770,29 +2498,6 @@ function HomePage({ variant = 'v1' }: { variant?: 'classic' | 'v1' }) { return () => window.clearInterval(timer); }, [heroPaused, heroSlides.length]); - const trustSignals = [ - { - icon: MapPin, - title: pickText('贵州本地团队', 'Guizhou-based team', language), - copy: pickText('熟悉山路、天气与在地节奏', 'Local knowledge of roads, weather and daily rhythms', language), - }, - { - icon: UsersThree, - title: pickText('纯玩私家小团', 'Private journeys only', language), - copy: pickText('按人数、兴趣与节奏定制', 'Designed around your people, interests and pace', language), - }, - { - icon: Globe, - title: pickText('英文旅行支持', 'English trip support', language), - copy: pickText('双语沟通与文化说明', 'Bilingual planning and cultural context', language), - }, - { - icon: Headset, - title: pickText('24 小时在地支持', '24/7 on-ground support', language), - copy: pickText('行程期间持续响应与协调', 'Responsive coordination throughout your journey', language), - }, - ]; - const prototypeJourneySteps = [ { number: '01', @@ -2811,134 +2516,9 @@ function HomePage({ variant = 'v1' }: { variant?: 'classic' | 'v1' }) { }, ]; - const brandValues = [ - { - number: '01', - title: pickText('合规入境接待', 'Compliant inbound reception', language), - copy: pickText('为境外游客提供清晰、正规的入境接待流程。', 'A clear, compliant reception process for international travelers.', language), - }, - { - number: '02', - title: pickText('懂贵州，也会讲贵州', 'Local stories, not scripts', language), - copy: pickText('讲清这里的文化与生活，不做背书式流水线导游。', 'Guizhou specialists who explain the culture, not a memorized script.', language), - }, - { - number: '03', - title: pickText('熟悉山路与天气', 'Locals who know the road', language), - copy: pickText('熟悉贵州山路、天气与现场变化，及时响应。', 'Local knowledge of mountain roads, weather and changing conditions.', language), - }, - { - number: '04', - title: pickText('不赶场的真实旅行', 'A slower, more human pace', language), - copy: pickText('拒绝赶场式打卡，把时间留给山水、村寨与真实生活。', 'No checklist travel—more time for landscapes, villages and daily life.', language), - }, - { - number: '05', - title: pickText('一人一行程，价格透明', 'One journey, clearly priced', language), - copy: pickText('按你的兴趣与节奏设计行程，清楚说明价格与服务。', 'A private itinerary shaped around you, with pricing explained clearly.', language), - }, - ]; - - const inquiryPrompts = [ - { - number: '01', - title: pickText('什么时候，和谁一起', 'When, and with whom', language), - copy: pickText('大致日期和同行人数就够了，不需要现在完全确定。', 'Rough dates and party size are enough. Nothing needs to be fixed yet.', language), - }, - { - number: '02', - title: pickText('你为什么想来贵州', 'Why Guizhou', language), - copy: pickText('户外、山水、村寨、人文或美食，告诉我们你最在意的部分。', 'Adventure, landscapes, villages, culture, or food—tell us what matters most.', language), - }, - { - number: '03', - title: pickText('怎样的节奏最适合你', 'How you like to travel', language), - copy: pickText('轻松一些、充实一些，或者两者之间，再加上你的住宿期待。', 'Easy days, fuller days, or a mix—plus the kind of stays that feel right.', language), - }, - ]; - return ( -
- {variant === 'classic' ? ( - <> -
- {language - {home.hero.tripAdvisorUrl ? Tripadvisor : null} -
-

{oc(home.hero.kicker, language)}

-

{oc(home.hero.title, language)}

-

- {pickText('越过景点清单，跟随本地人走进山水、村寨与真实生活。', 'Go beyond the sights with local people, landscapes and everyday life.', language)} -

- - {oc(home.hero.ctaLabel, language)} - -
- {heroSlides.map((slide, index) => ( - -
-
-
- -
-
- {trustSignals.map(({ icon: Icon, title, copy }) => ( -
-
- ))} -
-
- -
-
-
-
- {language -
-
- {language === 'zh' ? '为什么选择万趣' : 'Why WanderQ'} -

{pickText('越过旅行泡泡，走进真实贵州', 'Travel beyond the bubble.', language)}

-

{pickText('万趣的核心不是“售卖旅游产品”，而是创造能够改变人与地方关系的旅行体验。我们拒绝景点清单式打卡，让旅行者真正靠近贵州的山水、日常生活与当地人。', 'WanderQ is not here to sell a checklist of sights. We create private journeys that bring you closer to the landscapes, everyday life and people of Guizhou.', language)}

-
{pickText('“把脚步留给山风、瀑声与村寨灯火，其余的交给我们。”', '“Leave your footsteps to mountain winds, waterfalls and village lights. Leave the rest to us.”', language)}
-
-
-
- {brandValues.map((value) => ( -
- {value.number}

{value.title}

{value.copy}

-
- ))} -
-
-
- - ) : ( - <> -
+
+

26°03′–29°13′ N   103°36′–109°35′ E

@@ -3062,11 +2642,6 @@ function HomePage({ variant = 'v1' }: { variant?: 'classic' | 'v1' }) {

- - )} - - {variant === 'v1' && ( - <>

{pickText('扎根贵州 · 面向世界', 'LOCAL ROOTS, GLOBAL STANDARDS', language)}

@@ -3101,98 +2676,6 @@ function HomePage({ variant = 'v1' }: { variant?: 'classic' | 'v1' }) { {pickText('双语沟通 · 私家定制 · 本地支持', 'Bilingual planning · Private travel · Local support', language)}
- - )} - -
-
-
- {language - {language -
- -
- {language === 'zh' ? '贵州本地团队' : 'Guizhou-based team'} -

{oc(home.journey.title, language)}

-

- {pickText( - '我们在贵州本地判断路线、沟通现场并照应行程。山路、天气、语言和临时变化，不需要你独自面对。', - 'We judge routes, coordinate the field, and support each journey from Guizhou—so mountain roads, weather, language, and last-minute changes are never yours to handle alone.', - language, - )} -

- -
- {home.journey.cards.map((item, index) => ( -
- {String(index + 1).padStart(2, '0')} -
-

{oc(item.title, language)}

-

{oc(item.copy, language)}

-
-
- ))} -
- - - {language === 'zh' ? '和本地团队聊聊' : 'Talk with our local team'} - -
-
-
- -
-
-
- {oc(content.footerCta.eyebrowLabel, language)} -

- {language === 'zh' ? ( - <>从你真正想要的
贵州开始。 - ) : ( - <>Start with what
matters to you. - )} -

-

- {pickText( - '大致日期就够了。告诉我们谁会同行，以及你最想感受的贵州。本地团队会把这些信息整理成一个清楚的旅行方向。', - 'Rough dates are enough. Tell us who is traveling and the part of Guizhou you most want to feel. Our local team will shape that into one clear journey direction.', - language, - )} -

- - {pickText('告诉我们你的大致想法', 'Share my rough plan', language)} - - - {pickText('不需要固定行程 · 直接和贵州本地团队沟通', 'No fixed itinerary needed · Direct conversation with our Guizhou team', language)} - -
- -
- - {pickText('开始时，这三件事就够了', 'Three things are enough to begin', language)} - - {inquiryPrompts.map((prompt) => ( -
- {prompt.number} -
-

{prompt.title}

-

{prompt.copy}

-
-
- ))} -
-
-
); } diff --git a/src/TravelSiteAtlas.css b/src/TravelSiteAtlas.css index 0e05098..9d73bff 100644 --- a/src/TravelSiteAtlas.css +++ b/src/TravelSiteAtlas.css @@ -941,23 +941,6 @@ body:has(.oc-home-atlas) .oc-footer-legal-meta { body:has(.oc-home-atlas) .oc-header-actions { grid-column: 2; } body:has(.oc-home-atlas) .oc-header-cta { display: none; } - .oc-atlas-hero { - grid-template-columns: 1fr 54px; - grid-template-rows: auto minmax(480px, 62svh) 48px; - } - - .oc-atlas-hero-copy { - grid-column: 1; - padding: 54px 38px 48px; - } - - .oc-atlas-hero-media { grid-column: 1; grid-row: 2; } - .oc-atlas-stamp { grid-column: 2; grid-row: 1 / 3; } - .oc-atlas-hero-rail { grid-row: 3; } - .oc-atlas-hero-rail > span:nth-child(2), - .oc-atlas-hero-rail > span:nth-child(3) { display: none; } - .oc-atlas-hero-rail { grid-template-columns: 1fr auto; } - .oc-atlas-experience-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; @@ -1008,6 +991,27 @@ body:has(.oc-home-atlas) .oc-footer-legal-meta { .oc-atlas-contact small { width: 100%; } } +@media (max-width: 700px) { + .oc-atlas-hero { + grid-template-columns: 1fr 54px; + grid-template-rows: auto minmax(480px, 62svh) 48px; + } + + .oc-atlas-hero-copy { + grid-column: 1; + padding: 54px 38px 48px; + } + + .oc-atlas-hero-media { grid-column: 1; grid-row: 2; } + .oc-atlas-stamp { grid-column: 2; grid-row: 1 / 3; } + .oc-atlas-hero-rail { + grid-row: 3; + grid-template-columns: 1fr auto; + } + .oc-atlas-hero-rail > span:nth-child(2), + .oc-atlas-hero-rail > span:nth-child(3) { display: none; } +} + @media (max-width: 620px) { body:has(.oc-home-atlas) .oc-header { padding-inline: 18px; } body:has(.oc-home-atlas) .oc-logo img { width: 116px; } diff --git a/src/TravelSiteRefinements.css b/src/TravelSiteRefinements.css index dbbf916..7141722 100644 --- a/src/TravelSiteRefinements.css +++ b/src/TravelSiteRefinements.css @@ -28,10 +28,6 @@ transform: translateY(-2px); } -.oc-home-v1 .oc-outline-btn, -.oc-home-v1 .oc-home-final-cta .oc-orange-btn { - border-radius: 999px; -} /* Shared framed content receives one calm, consistent surface treatment. */ .oc-site :is( @@ -55,78 +51,6 @@ overflow: hidden; } -/* Homepage: remove the long pauses between the five core story beats. */ -.oc-home-v1 .oc-home-experiences { - margin-top: 0; - padding-top: clamp(56px, 4.8vw, 72px); - padding-bottom: clamp(62px, 5.4vw, 82px); -} - -.oc-home-v1 .oc-home-experiences .oc-section-title { - margin-bottom: 32px; -} - -.oc-home-v1 .oc-experience-stack { - gap: clamp(14px, 1.45vw, 24px); -} - -.oc-home-v1 .oc-experience-band { - height: 620px; - min-height: 620px; - grid-template-rows: 342px 278px; - border-radius: var(--oc-card-radius-lg); - box-shadow: var(--oc-card-shadow); -} - -.oc-home-v1 .oc-experience-band:hover { - box-shadow: var(--oc-card-shadow-hover); -} - -.oc-home-v1 .oc-home-experiences > .oc-center { - margin-top: 30px; -} - -.oc-prototype-story { - column-gap: clamp(54px, 6vw, 92px); - padding-top: clamp(64px, 5.2vw, 78px); - padding-bottom: clamp(64px, 5vw, 76px); -} - -.oc-prototype-story-image { - min-height: 660px; - border-radius: var(--oc-card-radius-lg); -} - -.oc-home-v1 .oc-home-team { - padding-top: clamp(68px, 5.6vw, 84px); - padding-bottom: clamp(72px, 5.8vw, 88px); -} - -.oc-home-v1 .oc-home-team-layout { - gap: clamp(46px, 5.5vw, 82px); -} - -.oc-home-v1 .oc-home-team-media { - min-height: 610px; -} - -.oc-home-v1 .oc-home-team-main-image { - height: 540px; - border-radius: var(--oc-card-radius-lg); -} - -.oc-home-v1 .oc-home-team-field-image { - height: 210px; - border-radius: 16px; -} - -.oc-home-v1 .oc-home-final-cta { - padding-block: clamp(78px, 6.4vw, 98px); -} - -.oc-home-v1 .oc-home-final-cta-layout { - gap: clamp(52px, 6vw, 88px); -} /* Experience archive: create distinct cards instead of one rigid tiled wall. */ .oc-experience-editorial .oc-menu-page-hero { @@ -286,24 +210,6 @@ } @media (max-width: 820px) { - .oc-home-v1 .oc-home-experiences { - padding-top: 58px; - padding-bottom: 62px; - } - - .oc-home-v1 .oc-experience-stack { - gap: 18px; - } - - .oc-home-v1 .oc-experience-band { - height: auto; - min-height: 390px; - } - - .oc-home-v1 .oc-home-team { - padding-top: 62px; - padding-bottom: 68px; - } .oc-experience-series-nav { padding-bottom: 62px; @@ -336,49 +242,6 @@ padding-inline: 21px; } - .oc-home-v1 .oc-home-experiences { - padding-top: 50px; - padding-bottom: 54px; - } - - .oc-home-v1 .oc-home-experiences .oc-section-title { - margin-bottom: 28px; - } - - .oc-home-v1 .oc-home-experiences > .oc-center { - margin-top: 24px; - } - - .oc-prototype-story { - padding-top: 52px; - padding-bottom: 58px; - } - - .oc-prototype-story-image { - min-height: 410px; - margin-bottom: 42px; - } - - .oc-home-v1 .oc-home-team { - padding-top: 54px; - padding-bottom: 60px; - } - - .oc-home-v1 .oc-home-team-layout { - gap: 38px; - } - - .oc-home-v1 .oc-home-team-media { - min-height: 410px; - } - - .oc-home-v1 .oc-home-team-main-image { - height: 330px; - } - - .oc-home-v1 .oc-home-final-cta { - padding-block: 62px 66px; - } .oc-experience-editorial .oc-menu-page-hero { padding-bottom: 80px; -- 2.43.7