/* JOAT V56 Pricing Experience */ .pricing-page { --serif: "Fraunces", "Bodoni Moda", Didot, "Times New Roman", serif; --wordmark-serif: "Bodoni Moda", Didot, "Times New Roman", serif; background: var(--cream); } .pricing-page .wordmark-main { font-family: var(--wordmark-serif); } .pricing-page .wordmark-sub { font-family: var(--sans); } .pricing-page h1, .pricing-page h2, .pricing-page h3 { font-optical-sizing: auto; letter-spacing: -.03em; } .pricing-page .kicker { margin-bottom: 14px; } .pricing-page .button { min-height: 48px; } .pricing-page .pricing-inline-chat { border: 0; background: transparent; padding: 0 2px; color: var(--wine); cursor: pointer; font: 700 9px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; } .pricing-page .pricing-inline-chat:hover { text-decoration: underline; text-underline-offset: 4px; } .pricing-intro { padding: clamp(74px, 9vw, 118px) 0 clamp(60px, 8vw, 96px); background: var(--paper); border-bottom: 1px solid var(--line); } .pricing-intro-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: clamp(36px, 6vw, 80px); align-items: end; } .pricing-intro-title { display: grid; margin: 0; color: var(--wine); font-family: var(--serif); font-size: clamp(64px, 9vw, 132px); font-weight: 500; line-height: .84; } .pricing-intro-title span:last-child { padding-left: clamp(0px, 6vw, 92px); } .pricing-intro-lede { max-width: 770px; margin: 30px 0 0; color: rgba(33,26,24,.68); font-size: clamp(15px, 1.45vw, 18px); line-height: 1.72; } .pricing-intro-actions { margin-top: 30px; align-items: center; } .pricing-intro-note { padding: 28px; border: 1px solid var(--line); border-radius: 26px 26px 8px 26px; background: #e8dacc; transform: rotate(-1.2deg); } .pricing-intro-note > span { color: var(--wine); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .pricing-intro-note p { margin: 14px 0 0; color: rgba(33,26,24,.7); font-size: 13px; line-height: 1.62; } .pricing-motion-band { height: 44px; overflow: hidden; background: var(--wine); color: var(--paper); white-space: nowrap; } .pricing-motion-band > div { width: max-content; height: 100%; display: flex; align-items: center; gap: 42px; animation: pricingBand 34s linear infinite; } .pricing-motion-band span { font-family: var(--serif); font-size: 17px; font-style: italic; } .pricing-motion-band span::after { content: "✦"; margin-left: 42px; font: 8px/1 var(--sans); } @keyframes pricingBand { to { transform: translateX(-50%); } } .pricing-section-nav { top: 10px; z-index: 28; margin-top: 12px; } .pricing-section-nav .page-section-nav-track { justify-content: center; } .pricing-virtual-v56 { padding: clamp(72px, 9vw, 118px) 0; } .pricing-price-stage { position: relative; min-width: 0; } .pricing-price-stage-light { padding: clamp(34px, 5vw, 68px); border: 1px solid var(--line); border-radius: 34px; background: var(--paper); overflow: hidden; } .pricing-price-stage-light::before { content: ""; position: absolute; width: min(430px, 55vw); aspect-ratio: 1; right: -16%; top: -44%; border: 1px solid rgba(111,22,32,.12); border-radius: 50%; box-shadow: 0 0 0 38px rgba(111,22,32,.025), 0 0 0 76px rgba(111,22,32,.018); pointer-events: none; } .pricing-price-copy { position: relative; z-index: 1; max-width: 900px; } .pricing-limited-tag { display: inline-flex; margin: 0 0 18px; padding: 8px 11px; border-radius: 999px; background: var(--wine); color: var(--paper); font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .pricing-price-reveal { position: relative; width: fit-content; margin: 4px 0 24px; } .pricing-old-price { position: relative; display: inline-block; color: rgba(111,22,32,.42); font-family: var(--serif); font-size: clamp(34px, 4.4vw, 60px); line-height: 1; } .pricing-old-price::after { content: ""; position: absolute; left: -7%; right: -8%; top: 50%; height: 3px; background: currentColor; transform: rotate(-8deg) scaleX(1); transform-origin: left center; transition: transform .72s cubic-bezier(.2,.72,.2,1); } .pricing-js [data-price-stage] .pricing-old-price::after { transform: rotate(-8deg) scaleX(0); } .pricing-js [data-price-stage].is-visible .pricing-old-price::after { transform: rotate(-8deg) scaleX(1); } .pricing-current-row { display: flex; align-items: end; gap: 12px; margin-top: 4px; } .pricing-current-row strong { color: var(--wine); font-family: var(--serif); font-size: clamp(92px, 14vw, 184px); font-weight: 500; line-height: .72; letter-spacing: -.075em; transform: none; opacity: 1; transition: opacity .45s .35s ease, transform .65s .35s cubic-bezier(.2,.72,.2,1); } .pricing-js [data-price-stage] .pricing-current-row strong { transform: translateY(14px); opacity: 0; } .pricing-js [data-price-stage].is-visible .pricing-current-row strong { transform: none; opacity: 1; } .pricing-current-row span { padding-bottom: 11px; color: rgba(33,26,24,.58); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .pricing-price-copy h2 { max-width: 980px; margin: 0; font-family: var(--serif); font-size: clamp(38px, 5vw, 70px); font-weight: 500; line-height: .98; } .pricing-availability-line { margin: 18px 0 0; color: var(--wine); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .pricing-start-note { max-width: 760px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); } .pricing-start-note strong { font-family: var(--serif); font-size: clamp(24px, 2.8vw, 34px); font-weight: 500; } .pricing-start-note p { margin: 10px 0 0; color: rgba(33,26,24,.66); font-size: 13px; line-height: 1.65; } .pricing-start-note a { display: inline-block; margin-top: 13px; color: var(--wine); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .pricing-pop-note { width: fit-content; max-width: 290px; margin-left: auto; padding: 15px 18px; border: 1px solid var(--line); border-radius: 999px 999px 10px 999px; background: #e8dacc; box-shadow: 0 12px 28px rgba(44,27,23,.08); } .pricing-pop-note span, .pricing-pop-note strong { display: inline; font-family: var(--serif); font-size: 17px; font-weight: 500; } .pricing-pop-note span { color: rgba(33,26,24,.58); } .pricing-pop-note strong { color: var(--wine); } .pricing-pop-note-a { margin-top: 20px; transform: rotate(1.4deg); } .switchboard { margin-top: 26px; padding: clamp(28px, 5vw, 56px); border-radius: 34px; background: var(--espresso); color: var(--paper); overflow: hidden; } .switchboard-head { display: grid; grid-template-columns: 1fr .7fr; gap: 44px; align-items: end; } .switchboard-head .kicker { color: #e7c8a8; } .switchboard-head h2 { margin: 0; font-family: var(--serif); font-size: clamp(46px, 6vw, 82px); font-weight: 500; line-height: .92; } .switchboard-head > p { margin: 0; color: rgba(251,248,243,.68); font-size: 13px; line-height: 1.7; } .switchboard-tabs { display: flex; gap: 8px; margin: 34px 0 22px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .switchboard-tabs::-webkit-scrollbar { display: none; } .switchboard-tabs button { flex: 0 0 auto; min-height: 42px; padding: 0 15px; border: 1px solid rgba(251,248,243,.16); border-radius: 999px; background: transparent; color: rgba(251,248,243,.72); cursor: pointer; scroll-snap-align: start; font: 700 9px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; } .switchboard-tabs button[aria-selected="true"] { background: var(--paper); color: var(--wine); border-color: var(--paper); } .switchboard-board { position: relative; display: grid; grid-template-columns: 160px 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; padding: 28px; border: 1px solid rgba(251,248,243,.13); border-radius: 26px; background: rgba(251,248,243,.035); } .switchboard-center { width: 132px; height: 132px; display: grid; place-items: center; align-content: center; border: 1px solid rgba(251,248,243,.24); border-radius: 50%; background: var(--wine); box-shadow: 0 0 0 14px rgba(111,22,32,.18), 0 0 0 28px rgba(111,22,32,.08); } .switchboard-center span { font-family: var(--serif); font-size: 33px; line-height: 1; } .switchboard-center small { margin-top: 6px; color: #e9c6bf; font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .switchboard-routes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .switchboard-routes li { position: relative; min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 11px; padding: 0 12px; border: 1px solid rgba(251,248,243,.12); border-radius: 999px; background: rgba(251,248,243,.04); overflow: hidden; } .switchboard-routes li::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 1px; background: rgba(231,200,168,.38); } .switch-dot { position: relative; z-index: 1; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #e7c8a8; box-shadow: 0 0 0 5px rgba(231,200,168,.08); } .switchboard-routes b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; letter-spacing: .02em; transition: opacity .18s ease, transform .18s ease; } .switchboard-board.is-switching .switchboard-routes b { opacity: 0; transform: translateX(6px); } .switchboard-caption { display: grid; grid-template-columns: .38fr 1fr; gap: 24px; padding: 22px 2px 0; } .switchboard-caption strong { font-family: var(--serif); font-size: 25px; font-weight: 500; } .switchboard-caption p { margin: 0; color: rgba(251,248,243,.65); font-size: 12px; line-height: 1.65; } .pricing-microcopy { margin: 16px 0 0; color: rgba(33,26,24,.5); font-size: 9px; line-height: 1.6; } .switchboard .pricing-microcopy { color: rgba(251,248,243,.45); } .pricing-onsite-v56 { position: relative; padding: clamp(76px, 9vw, 118px) 0; background: var(--wine-dark); color: var(--paper); overflow: hidden; } .pricing-onsite-v56::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 25%, rgba(255,255,255,.07), transparent 30%), linear-gradient(120deg, transparent 40%, rgba(255,255,255,.025) 40% 41%, transparent 41%); pointer-events: none; } .onsite-v56-grid { position: relative; display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(44px, 7vw, 90px); align-items: center; } .onsite-v56-price .kicker { color: #e7c8a8; } .pricing-price-reveal-dark .pricing-old-price { color: rgba(251,248,243,.42); } .pricing-price-reveal-dark .pricing-current-row strong { color: var(--paper); } .pricing-price-reveal-dark .pricing-current-row span { color: rgba(251,248,243,.58); } .onsite-core { margin: 20px 0 0; color: rgba(251,248,243,.74); font-family: var(--serif); font-size: clamp(22px, 2.5vw, 31px); line-height: 1.35; } .onsite-v56-copy h2 { max-width: 720px; margin: 0; font-family: var(--serif); font-size: clamp(42px, 5vw, 68px); font-weight: 500; line-height: .98; } .onsite-v56-copy .button { margin-top: 20px; } .pricing-details { margin-top: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pricing-details + .pricing-details { margin-top: 0; border-top: 0; } .pricing-details summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; color: var(--wine); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; list-style: none; } .pricing-details summary::-webkit-details-marker { display: none; } .pricing-details summary::after { content: "+"; font-family: var(--serif); font-size: 24px; font-weight: 500; } .pricing-details[open] summary::after { content: "−"; } .pricing-details p { margin: 0 0 20px; color: rgba(33,26,24,.66); font-size: 12px; line-height: 1.65; } .pricing-details-dark { border-color: rgba(251,248,243,.18); } .pricing-details-dark summary { color: #e7c8a8; } .pricing-details-dark p { color: rgba(251,248,243,.65); } .pricing-pop-note-dark { position: relative; z-index: 1; margin: 30px max(24px, calc((100vw - 1200px)/2)) 0 auto; border-color: rgba(251,248,243,.17); background: rgba(251,248,243,.08); } .pricing-pop-note-dark span { color: rgba(251,248,243,.56); } .pricing-pop-note-dark strong { color: var(--paper); } .pricing-first-call-v56 { padding: clamp(76px, 9vw, 118px) 0; background: var(--paper); } .first-call-v56-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(42px, 7vw, 88px); align-items: start; } .first-call-v56-intro h2 { margin: 0; color: var(--wine); font-family: var(--serif); font-size: clamp(68px, 8vw, 110px); font-weight: 500; line-height: .82; } .first-call-tagline { margin: 25px 0 10px; font-family: var(--serif); font-size: clamp(27px, 3vw, 38px); line-height: 1.1; } .first-call-v56-intro > p:last-of-type { max-width: 650px; color: rgba(33,26,24,.65); font-size: 13px; line-height: 1.72; } .first-call-guarantee { margin-top: 26px; padding: 22px; border-radius: 20px 20px 6px 20px; background: #e8dacc; } .first-call-guarantee strong { display: block; color: var(--wine); font-family: var(--serif); font-size: 28px; font-weight: 500; } .first-call-guarantee span { display: block; margin-top: 7px; color: rgba(33,26,24,.65); font-size: 11px; line-height: 1.6; } .first-call-v56-details { padding-top: 6px; } .first-call-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 20px; } .first-call-chips span { padding: 10px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); font-size: 10px; } .pricing-travel-v56 { position: relative; padding: clamp(70px, 8vw, 104px) 0; background: #d8c4b0; overflow: hidden; } .travel-v56-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 7vw, 90px); align-items: center; } .travel-v56-grid h2 { margin: 0; font-family: var(--serif); font-size: clamp(56px, 7vw, 96px); font-weight: 500; line-height: .88; } .travel-v56-copy > p { margin: 0; color: rgba(33,26,24,.7); font-size: 15px; line-height: 1.75; } .travel-v56-copy strong { color: var(--wine); } .travel-comped-destinations { margin-top: 28px; padding: clamp(18px, 3vw, 30px); border: 1px solid rgba(111,22,32,.18); border-radius: 30px 30px 8px 30px; background: rgba(251,248,243,.58); box-shadow: 0 28px 60px rgba(63,35,28,.08); } .travel-atlas-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; } .travel-atlas-heading > span { flex: 0 0 auto; padding: 8px 10px; border: 1px solid rgba(111,22,32,.14); border-radius: 999px; color: var(--wine); font: 700 8px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; } .travel-comped-label { margin: 0; color: var(--wine); font: 700 9px/1.4 var(--sans); letter-spacing: .15em; text-transform: uppercase; } .travel-comped-intro { max-width: 560px; margin: 9px 0 0; color: rgba(33,26,24,.72); font-size: 12px; line-height: 1.6; } .travel-atlas { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(220px, .65fr); min-height: 390px; margin-top: 22px; border-radius: 22px; overflow: hidden; background: #72202a; box-shadow: 0 18px 40px rgba(73,31,31,.15); } .travel-atlas-map { position: relative; min-width: 0; min-height: 390px; overflow: hidden; background: #efe3d6; } .travel-atlas-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .25; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } .travel-atlas-world { width: 100%; height: 100%; position: absolute; inset: 0; } .atlas-grid path { fill: none; stroke: rgba(111,22,32,.08); stroke-width: 1; stroke-dasharray: 2 8; } .atlas-land { fill: #d5bfa9; stroke: rgba(111,22,32,.24); stroke-width: 1.2; } .atlas-route { fill: none; stroke: rgba(111,22,32,.25); stroke-width: 1.4; stroke-dasharray: 5 7; } .atlas-pin { --pin-x: 50%; --pin-y: 50%; position: absolute; z-index: 2; left: var(--pin-x); top: var(--pin-y); display: grid; justify-items: center; gap: 5px; padding: 7px; border: 0; background: transparent; color: #4b2422; cursor: pointer; transform: translate(-50%, -50%); font: 700 7px/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; } .atlas-pin-dot { position: relative; width: 13px; height: 13px; border: 3px solid #f7eee5; border-radius: 50% 50% 50% 0; background: var(--wine); box-shadow: 0 4px 12px rgba(59,22,22,.25); transform: rotate(-45deg); transition: transform .25s ease, box-shadow .25s ease; } .atlas-pin-dot::after { content: ""; position: absolute; width: 3px; height: 3px; inset: 2px; margin: auto; border-radius: 50%; background: #f7eee5; } .atlas-pin-label { max-width: 92px; padding: 4px 6px; border-radius: 999px; background: rgba(247,238,229,.88); box-shadow: 0 2px 9px rgba(45,29,24,.08); white-space: nowrap; } .atlas-pin:hover .atlas-pin-dot, .atlas-pin:focus-visible .atlas-pin-dot, .atlas-pin.is-active .atlas-pin-dot { transform: rotate(-45deg) scale(1.35); box-shadow: 0 0 0 7px rgba(111,22,32,.12), 0 5px 16px rgba(59,22,22,.3); } .atlas-pin.is-active .atlas-pin-label { background: var(--wine); color: var(--paper); } .atlas-pin:focus-visible { outline: 2px solid var(--wine); outline-offset: 1px; border-radius: 12px; } .atlas-compass { position: absolute; z-index: 1; left: 18px; bottom: 17px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(111,22,32,.22); border-radius: 50%; color: var(--wine); font: 700 7px/1 var(--sans); } .atlas-compass i { position: absolute; top: 5px; width: 1px; height: 8px; background: var(--wine); } .travel-atlas-card { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 38px); overflow: hidden; color: var(--paper); } .travel-atlas-card::before { content: "JOAT"; position: absolute; right: -12px; top: 12px; color: rgba(255,255,255,.035); font-family: var(--serif); font-size: 74px; line-height: 1; transform: rotate(90deg) translateX(65%); transform-origin: right top; } .travel-atlas-card > p:first-child { position: relative; margin: 0 0 11px; color: #e7c8a8; font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .travel-atlas-card h3 { position: relative; margin: 0; font-family: var(--serif); font-size: clamp(27px, 3vw, 39px); font-weight: 500; line-height: .96; letter-spacing: -.03em; } .travel-atlas-destinations { position: relative; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; } .travel-atlas-destinations span { padding: 8px 9px; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; background: rgba(255,255,255,.07); font-size: 9px; } .travel-atlas-offer { position: relative; margin: 24px 0 0; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.16); } .travel-atlas-offer b, .travel-atlas-offer span { display: block; } .travel-atlas-offer b { color: #f3d7bc; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; } .travel-atlas-offer span { margin-top: 7px; color: rgba(255,255,255,.58); font-size: 9px; line-height: 1.5; } .travel-atlas-count { position: absolute; right: 18px; bottom: 15px; color: rgba(255,255,255,.42); font-family: var(--serif); font-size: 13px; font-style: italic; } .travel-atlas-fallback { columns: 2; margin: 20px 0 0; padding-left: 18px; } .travel-comped-more { margin: 17px 0 0; color: rgba(33,26,24,.6); font-family: var(--serif); font-size: 18px; font-style: italic; line-height: 1.35; } .pricing-pop-note-travel { margin: 26px max(24px, calc((100vw - 1200px)/2)) 0 auto; background: rgba(251,248,243,.64); } /* Keep Ask JOAT clear of the scroll-to-top control on larger screens. */ .pricing-page .ask-tab { bottom: 84px; z-index: 1200; } .pricing-events-v56 { padding: clamp(76px, 9vw, 114px) 0; background: var(--cream); } .events-v56-head { display: grid; grid-template-columns: 1fr .62fr; gap: clamp(34px, 7vw, 84px); align-items: end; } .events-v56-head h2 { margin: 0; font-family: var(--serif); font-size: clamp(54px, 7vw, 92px); font-weight: 500; line-height: .9; } .events-v56-head > p { margin: 0; color: rgba(33,26,24,.64); font-size: 13px; line-height: 1.68; } .event-starter-scroller { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 36px; } .event-starter-scroller article { min-width: 0; min-height: 280px; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); } .event-starter-scroller article:nth-child(2) { background: #e8dacc; } .event-starter-scroller article:nth-child(3) { background: var(--wine); color: var(--paper); } .event-starter-scroller article > span { color: var(--wine); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .event-starter-scroller article:nth-child(3) > span { color: #e7c8a8; } .event-starter-scroller h3 { margin: 42px 0 12px; font-family: var(--serif); font-size: clamp(34px, 3.4vw, 48px); font-weight: 500; line-height: .94; } .event-starter-scroller p { margin: 0; color: rgba(33,26,24,.64); font-size: 12px; line-height: 1.65; } .event-starter-scroller article:nth-child(3) p { color: rgba(251,248,243,.7); } .events-v56-bottom { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-top: 24px; } .events-v56-bottom p { margin: 0; color: rgba(33,26,24,.63); font-size: 12px; line-height: 1.6; } .events-v56-bottom strong { color: var(--ink); } .pricing-inquire-v56 { padding: clamp(70px, 8vw, 100px) 0; background: var(--wine); color: var(--paper); } .pricing-inquire-card { text-align: center; } .pricing-inquire-card .kicker { color: #e7c8a8; } .pricing-inquire-card h2 { margin: 0; font-family: var(--serif); font-size: clamp(62px, 8vw, 108px); font-weight: 500; line-height: .86; } .pricing-inquire-card > p:not(.kicker) { max-width: 720px; margin: 22px auto 0; color: rgba(251,248,243,.72); font-size: 13px; line-height: 1.7; } .pricing-inquire-card .actions { justify-content: center; margin-top: 26px; } .pricing-microcopy-light { color: rgba(251,248,243,.48)!important; } [data-reveal] { opacity: 1; transform: none; } .pricing-js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .65s cubic-bezier(.2,.72,.2,1); } .pricing-js [data-reveal].is-visible { opacity: 1; transform: none; } .pricing-js .pricing-limited-tag.is-visible { animation: pricingStamp .52s cubic-bezier(.2,.85,.25,1.2) both; } @keyframes pricingStamp { 0% { transform: translateY(10px) rotate(-3deg) scale(.94); } 65% { transform: translateY(0) rotate(1deg) scale(1.02); } 100% { transform: none; } } @media (max-width: 900px) { .pricing-intro-grid, .switchboard-head, .onsite-v56-grid, .first-call-v56-grid, .travel-v56-grid, .events-v56-head { grid-template-columns: 1fr; } .pricing-intro-note { max-width: 520px; } .pricing-section-nav .page-section-nav-track { justify-content: flex-start; } .switchboard-board { grid-template-columns: 130px 1fr; gap: 26px; } .switchboard-caption { grid-template-columns: 1fr; gap: 7px; } .pricing-pop-note-dark, .pricing-pop-note-travel { margin-right: 24px; } .pricing-page .ask-tab { bottom: 18px; } } @media (max-width: 620px) { .pricing-page .shell { width: calc(100% - 28px); } .pricing-intro { padding-top: 58px; padding-bottom: 54px; } .pricing-intro-grid { gap: 30px; } .pricing-intro-title { font-size: clamp(54px, 16vw, 72px); line-height: .9; } .pricing-intro-title span:last-child { padding-left: 0; } .pricing-intro-lede { margin-top: 22px; font-size: 15px; line-height: 1.6; } .pricing-intro-actions { display: grid; width: 100%; } .pricing-intro-actions .button { width: 100%; } .pricing-inline-chat { justify-self: center; min-height: 42px; } .pricing-intro-note { padding: 22px; } .pricing-motion-band { height: 40px; } .pricing-section-nav { position: sticky; top: 6px; width: calc(100% - 10px); margin-top: 6px; padding: 5px; border-radius: 18px; } .pricing-section-nav .page-section-nav-track { gap: 4px; } .pricing-section-nav a { min-height: 38px; padding: 0 12px; font-size: 8px; } .pricing-price-stage-light { padding: 28px 20px; border-radius: 26px; } .pricing-limited-tag { font-size: 7px; } .pricing-current-row { gap: 8px; } .pricing-current-row strong { font-size: clamp(84px, 27vw, 118px); } .pricing-current-row span { padding-bottom: 7px; font-size: 8px; } .pricing-price-copy h2 { font-size: clamp(36px, 11vw, 50px); } .pricing-start-note strong { font-size: 26px; } .pricing-pop-note { max-width: 250px; margin-top: 16px; padding: 12px 14px; } .pricing-pop-note span, .pricing-pop-note strong { font-size: 15px; } .switchboard { margin-top: 16px; padding: 26px 18px; border-radius: 26px; } .switchboard-head { gap: 14px; } .switchboard-head h2 { font-size: clamp(43px, 13vw, 58px); } .switchboard-tabs { margin-top: 24px; } .switchboard-board { grid-template-columns: 1fr; gap: 24px; padding: 20px 16px; } .switchboard-center { width: 106px; height: 106px; margin: 0 auto; } .switchboard-center span { font-size: 28px; } .switchboard-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .switchboard-routes li { min-height: 44px; padding: 0 9px; } .switchboard-routes li::before { width: 12px; } .switchboard-routes b { font-size: 9px; } .switchboard-caption { padding-top: 18px; } .switchboard-caption strong { font-size: 23px; } .onsite-v56-grid { gap: 32px; } .pricing-onsite-v56 { padding-top: 72px; padding-bottom: 72px; } .onsite-v56-copy h2 { font-size: clamp(38px, 11vw, 52px); } .pricing-pop-note-dark, .pricing-pop-note-travel { margin-right: 14px; } .first-call-v56-grid { gap: 34px; } .first-call-v56-intro h2 { font-size: clamp(67px, 20vw, 92px); } .first-call-tagline { font-size: 30px; } .first-call-guarantee { padding: 19px; } .travel-v56-grid { gap: 24px; } .travel-v56-grid h2 { font-size: clamp(56px, 16vw, 76px); } .travel-comped-destinations { padding: 18px 14px; border-radius: 24px 24px 7px 24px; } .travel-atlas-heading { display: grid; } .travel-atlas-heading > span { width: fit-content; } .travel-atlas { grid-template-columns: 1fr; min-height: 0; } .travel-atlas-map { min-height: 310px; } .travel-atlas-card { min-height: 280px; } .atlas-pin { padding: 9px 5px; } .atlas-pin-label { display: none; } .atlas-pin.is-active .atlas-pin-label { display: block; position: absolute; top: 29px; } .events-v56-head { gap: 16px; } .events-v56-head h2 { font-size: clamp(46px, 14vw, 62px); } .event-starter-scroller { display: flex; gap: 10px; margin-left: -14px; margin-right: -14px; padding: 0 14px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .event-starter-scroller::-webkit-scrollbar { display: none; } .event-starter-scroller article { flex: 0 0 min(82vw, 330px); min-height: 270px; scroll-snap-align: start; } .event-starter-scroller h3 { font-size: 40px; } .events-v56-bottom { display: grid; } .events-v56-bottom .button { width: 100%; } .pricing-inquire-card h2 { font-size: clamp(62px, 18vw, 84px); } .pricing-inquire-card .actions { display: grid; } .pricing-inquire-card .button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .pricing-motion-band > div { animation: none; } [data-reveal] { opacity: 1; transform: none; transition: none; } .pricing-old-price::after { transform: rotate(-8deg) scaleX(1)!important; transition: none; } .pricing-current-row strong { opacity: 1!important; transform: none!important; transition: none; } .switchboard-routes b { transition: none; } .atlas-pin-dot { transition: none; } } /* Open Atlas destination directory */ .travel-directory { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .34fr); margin-top: 22px; overflow: hidden; border: 1px solid rgba(111,22,32,.16); border-radius: 26px 26px 8px 26px; background: #f6eadf; box-shadow: 0 24px 50px rgba(57,28,27,.14); } .travel-directory-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .travel-region { min-width: 0; padding: clamp(20px, 3vw, 30px); border-right: 1px solid rgba(111,22,32,.13); border-bottom: 1px solid rgba(111,22,32,.13); } .travel-region:nth-child(even), .travel-region-final { border-right: 0; } .travel-region-final { grid-column: 1 / -1; border-bottom: 0; background: rgba(216,196,176,.28); } .travel-region-label { display: flex; gap: 9px; align-items: center; margin: 0 0 15px; color: var(--wine); font: 700 8px/1.3 var(--sans); letter-spacing: .13em; text-transform: uppercase; } .travel-region-label span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(111,22,32,.25); border-radius: 50%; font-family: var(--serif); font-size: 9px; font-style: italic; letter-spacing: 0; } .travel-region ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } .travel-region-europe ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .travel-region li { position: relative; padding-left: 12px; color: #382824; font-family: var(--serif); font-size: clamp(17px, 2vw, 22px); line-height: 1.15; } .travel-region li::before { content: ""; position: absolute; top: .55em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #b58169; } .travel-directory-offer { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; padding: clamp(24px, 4vw, 38px); overflow: hidden; background: #781d29; color: var(--paper); } .travel-directory-offer::before { content: "15"; position: absolute; top: -22px; right: -4px; color: rgba(255,255,255,.045); font: 500 150px/.8 var(--serif); } .travel-directory-offer p { position: relative; margin: 0 0 11px; color: #e7c8a8; font: 700 8px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; } .travel-directory-offer strong { position: relative; color: var(--paper); font: 500 clamp(27px, 3vw, 40px)/.98 var(--serif); } .travel-directory-offer span { position: relative; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.17); color: rgba(255,255,255,.62); font-size: 9px; } @media (max-width: 720px) { .travel-directory { grid-template-columns: 1fr; } .travel-directory-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 18px; align-items: end; min-height: 0; padding: 20px; } .travel-directory-offer p { grid-column: 1 / -1; margin-bottom: 2px; } .travel-directory-offer strong { font-size: clamp(24px, 7vw, 32px); } .travel-directory-offer span { max-width: 115px; margin: 0; padding: 0 0 2px; border-top: 0; text-align: right; line-height: 1.4; } .travel-directory-offer::before { top: -11px; font-size: 92px; } } @media (max-width: 480px) { .travel-atlas-heading { align-items: center; } .travel-directory-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .travel-region, .travel-region:nth-child(even) { padding: 15px 13px; border-right: 1px solid rgba(111,22,32,.13); } .travel-region-europe { grid-column: 1 / -1; border-right: 0; } .travel-region:nth-child(3), .travel-region:nth-child(5) { border-right: 0; } .travel-region:nth-child(4), .travel-region:nth-child(5) { border-bottom: 0; } .travel-region-final { grid-column: auto; } .travel-region-europe ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .travel-region-label { gap: 6px; margin-bottom: 10px; font-size: 7px; letter-spacing: .09em; } .travel-region-label span { width: 22px; height: 22px; } .travel-region ul { gap: 5px; } .travel-region li { padding-left: 9px; font-size: 15px; } .travel-region li::before { width: 3px; height: 3px; } } /* JOAT Open Atlas — luxury travel folio */ .travel-v56-grid { grid-template-columns: minmax(220px, .48fr) minmax(0, 1.52fr); align-items: start; } .travel-comped-destinations { padding: clamp(20px, 3vw, 34px); background: rgba(248,240,231,.82); box-shadow: 0 35px 80px rgba(59,31,27,.13); } .travel-atlas { display: block; min-height: 0; background: #781d29; border: 1px solid rgba(111,22,32,.16); border-radius: 26px 26px 8px 26px; box-shadow: 0 24px 50px rgba(57,28,27,.18); } .travel-atlas-map { position: relative; min-height: 0; aspect-ratio: 2 / 1; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 72% 25%, rgba(255,255,255,.72), transparent 27%), linear-gradient(145deg, #f4eadd 0%, #ead8c5 100%); } .travel-atlas-map::before { content: ""; position: absolute; z-index: 0; inset: 0; background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 62px, rgba(111,22,32,.045) 63px 64px); pointer-events: none; } .travel-atlas-map::after { z-index: 5; opacity: .14; } .atlas-map-canvas { position: absolute; inset: 0; z-index: 1; transform-origin: var(--focus-x) var(--focus-y); transition: transform .8s cubic-bezier(.2,.7,.2,1); } .travel-atlas:hover .atlas-map-canvas { transform: scale(1.015); } .travel-atlas.is-changing .atlas-map-canvas { animation: atlasFocus .7s cubic-bezier(.2,.7,.2,1); } @keyframes atlasFocus { 0% { transform: scale(1); } 45% { transform: scale(1.055); } 100% { transform: scale(1); } } .travel-atlas-world { position: absolute; inset: 4% 1% auto; width: 98%; height: auto; opacity: .78; filter: sepia(.12) saturate(.82); } .atlas-route-layer { position: absolute; inset: 4% 1% auto; width: 98%; height: auto; overflow: visible; } .atlas-route-layer path { fill: none; stroke: rgba(120,29,41,.47); stroke-width: 1.6; stroke-dasharray: 7 8; vector-effect: non-scaling-stroke; } .atlas-route-layer path.is-drawing { animation: atlasRouteDraw .8s ease both; } @keyframes atlasRouteDraw { from { opacity: 0; stroke-dashoffset: 80; } to { opacity: 1; stroke-dashoffset: 0; } } .atlas-map-caption { position: absolute; z-index: 1; color: rgba(89,47,41,.48); font: 700 6px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; } .atlas-map-caption-top { top: 14px; left: 18px; } .atlas-map-caption-bottom { right: 18px; bottom: 13px; } .atlas-pin { z-index: 3; gap: 3px; min-width: 42px; min-height: 42px; padding: 5px; font-size: 6px; } .atlas-pin-dot { display: grid; place-items: center; width: 12px; height: 12px; border-width: 2px; background: #851b2a; } .atlas-pin-dot b { color: white; font: 700 6px/1 var(--sans); transform: rotate(45deg); } .atlas-pin-cluster .atlas-pin-dot { width: 19px; height: 19px; border-radius: 50%; transform: none; } .atlas-pin-cluster .atlas-pin-dot b { transform: none; } .atlas-pin-label { padding: 3px 5px; background: rgba(249,241,232,.9); } .atlas-pin:hover .atlas-pin-dot, .atlas-pin:focus-visible .atlas-pin-dot, .atlas-pin.is-active .atlas-pin-dot { transform: rotate(-45deg) scale(1.22); } .atlas-pin-cluster:hover .atlas-pin-dot, .atlas-pin-cluster:focus-visible .atlas-pin-dot, .atlas-pin-cluster.is-active .atlas-pin-dot { transform: scale(1.18); } .travel-atlas-card { position: absolute; z-index: 4; left: 20px; bottom: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; width: min(390px, calc(100% - 40px)); min-height: 0; padding: 18px 18px 16px; border: 1px solid rgba(255,255,255,.17); border-radius: 18px 18px 5px 18px; background: rgba(105,19,31,.94); box-shadow: 0 17px 35px rgba(53,24,23,.24); backdrop-filter: blur(12px); } .travel-atlas-card::before { display: none; } .travel-atlas-card-copy > p:first-child { margin: 0 0 5px; color: #e7c8a8; font-size: 7px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .travel-atlas-card h3 { margin: 0; font-family: var(--serif); font-size: clamp(28px, 3.5vw, 42px); font-weight: 500; line-height: .9; } .travel-atlas-card-copy > p:last-child { margin: 8px 0 0; color: rgba(255,255,255,.65); font-size: 9px; line-height: 1.45; } .travel-atlas-card-nav { display: flex; align-items: center; gap: 7px; padding-left: 12px; } .travel-atlas-card-nav button { width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: transparent; color: white; cursor: pointer; } .travel-atlas-card-nav button:hover, .travel-atlas-card-nav button:focus-visible { background: var(--paper); color: var(--wine); } .travel-atlas-card-nav span { color: rgba(255,255,255,.5); font: italic 11px/1 var(--serif); white-space: nowrap; } .travel-atlas-offer { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; margin: 13px 0 0; padding-top: 11px; } .travel-atlas-offer b { font-size: 7px; } .travel-atlas-offer span { margin: 0; text-align: right; font-size: 7px; } .travel-atlas-rail { display: flex; gap: 7px; padding: 10px; overflow-x: auto; background: #761b27; scrollbar-width: none; scroll-snap-type: x proximity; } .travel-atlas-rail::-webkit-scrollbar { display: none; } .travel-atlas-rail button { flex: 0 0 auto; min-height: 39px; padding: 0 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: transparent; color: rgba(255,255,255,.66); cursor: pointer; scroll-snap-align: center; font: 600 8px/1 var(--sans); letter-spacing: .03em; } .travel-atlas-rail button span { margin-right: 6px; color: #d8aa91; font-family: var(--serif); font-style: italic; } .travel-atlas-rail button:hover, .travel-atlas-rail button:focus-visible, .travel-atlas-rail button.is-active { border-color: var(--paper); background: var(--paper); color: var(--wine); } .travel-atlas-rail button.is-active span { color: var(--wine); } @media (max-width: 900px) { .travel-v56-grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { .travel-atlas { border-radius: 20px 20px 6px 20px; } .travel-atlas-map { display: flex; flex-direction: column; aspect-ratio: auto; overflow: hidden; } .atlas-map-canvas { position: relative; inset: auto; flex: 0 0 auto; width: 100%; aspect-ratio: 2 / 1; } .travel-atlas-card { position: relative; left: auto; bottom: auto; z-index: 4; display: grid; width: auto; min-height: 0; margin: -1px 0 0; padding: 18px 16px 15px; border: 0; border-radius: 0; background: #781d29; box-shadow: none; backdrop-filter: none; } .travel-atlas-card h3 { font-size: clamp(31px, 10vw, 42px); } .travel-atlas-card-copy > p:last-child { max-width: 230px; } .travel-atlas-offer { margin-top: 12px; } .travel-atlas-offer span { max-width: 130px; } .atlas-pin { min-width: 34px; min-height: 34px; padding: 2px; } .atlas-pin-label, .atlas-pin.is-active .atlas-pin-label { display: none; } .atlas-pin-dot { width: 9px; height: 9px; } .atlas-pin-cluster .atlas-pin-dot { width: 17px; height: 17px; } .atlas-map-caption { font-size: 5px; } .travel-atlas-rail { padding: 9px; } .travel-atlas-rail button { min-height: 37px; } } @media (prefers-reduced-motion: reduce) { .atlas-map-canvas { transition: none; } .travel-atlas.is-changing .atlas-map-canvas { animation: none; } .atlas-route-layer path.is-drawing { animation: none; } } @media (max-width: 620px) { .travel-comped-destinations { padding: 16px 12px; } .travel-atlas-heading { gap: 12px; } .travel-comped-intro { margin-top: 7px; line-height: 1.5; } .travel-atlas-heading > span { padding: 7px 9px; } .travel-directory { margin-top: 15px; } .travel-comped-more { margin-top: 13px; font-size: 16px; } } /* "Ask JOAT" on the wine inquire band is a