/* app.css */
@font-face {
font-family: BurfordRusticBook;
src: url("../fonts/BurfordRusticBookBold-latin.woff2") format("woff2"), url("../fonts/BurfordRusticBookBold.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: BurfordRusticBook;
src: url("../fonts/BurfordRusticBookBold-latin.woff2") format("woff2"), url("../fonts/BurfordRusticBookBold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Quicksand;
src: url("../fonts/Quicksand-latin-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Quicksand;
src: url("../fonts/Quicksand-latin-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Quicksand;
src: url("../fonts/Quicksand-latin-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Burford Fallback Georgia";
src: local("Georgia");
size-adjust: 77.5%;
}
@font-face {
font-family: "Burford Fallback Times";
src: local("Times New Roman"), local("Tinos"), local("Liberation Serif"), local("Nimbus Roman");
size-adjust: 80%;
}
@font-face {
font-family: "Quicksand Fallback";
src: local("Arial"), local("Arimo"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica");
size-adjust: 103%;
}
:root {
--ba-ink: #17242d;
--ba-mint: #c5e8e8;
--ba-mint-hover: #b1d1d1;
--ba-ink-hover: #0f2a3e;
--ba-forest: #41a583;
--ba-cyan: #32ade6;
--ba-ta: #34e0a1;
--ba-black: #000;
--ba-white: #fff;
--ba-muted: #666;
--ba-line: #bebebe;
--ba-chip-bg: rgba(238, 238, 238, 0.5);
--ba-display: BurfordRusticBook, "Burford Fallback Georgia", "Burford Fallback Times", Georgia, serif;
--ba-body: Quicksand, "Quicksand Fallback", "Segoe UI", system-ui, sans-serif;
--ba-wrap: 1280px;
--ba-wrap-gutter: max(1rem, calc((100vw - var(--ba-wrap)) / 2));
--ba-chrome: 1408px;
--ba-chrome-inset: 16px;
--ba-narrow: 728px;
--ba-radius: 1000px;
--ba-text-hero: clamp(40px, 1.7339rem + 3.1429vw, 73px);
--ba-text-h1: clamp(32px, 1.4429rem + 2.2857vw, 56px);
--ba-text-h2: clamp(28px, 1.2857rem + 1.9048vw, 48px);
--ba-text-h3: clamp(24px, 1.1286rem + 1.5238vw, 40px);
--ba-text-h4: clamp(22px, 1.1429rem + 0.9524vw, 32px);
--ba-text-h5: clamp(20px, 1.1571rem + 0.381vw, 24px);
--ba-text-ui: 20px;
--ba-text-body: 16px;
--ba-text-sm: 14px;
--ba-text-xs: 12px;
--ba-space: clamp(48px, 1.5144rem + 6.0952vw, 112px);
--ba-page-pad: clamp(24px, 0.5714rem + 3.8095vw, 64px);
--ba-btn-h: 48px;
--ba-scrim: rgba(23, 36, 45, 0.4);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
margin: 0;
font-family: var(--ba-body);
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
background: var(--ba-white);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.85; }
h1, h2, h3, h4 {
font-family: var(--ba-display);
font-weight: 400;
text-transform: uppercase;
letter-spacing: -0.03em;
line-height: 1;
margin: 0 0 0.5em;
}
h1 { font-size: var(--ba-text-h1); }
h2 { font-size: var(--ba-text-h2); }
h3 { font-size: var(--ba-text-h4); }
h4 { font-size: var(--ba-text-h5); }
.ba-skip {
position: absolute;
left: -999px;
top: 0;
background: var(--ba-ink);
color: var(--ba-white);
padding: 0.5rem 1rem;
z-index: 100;
}
.ba-skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--ba-ink); outline-offset: 3px; }
.ba-wrap { width: min(100% - 2rem, var(--ba-wrap)); margin-inline: auto; }
.ba-wrap--narrow { width: min(100% - 2rem, var(--ba-narrow)); }
.ba-section { padding-block: var(--ba-space); }
.ba-main { padding-block: var(--ba-space); }
.ba-rule { width: 100%; height: 5px; object-fit: cover; }
.ba-rule--wide { max-width: 592px; }
.ba-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
height: var(--ba-btn-h);
min-height: var(--ba-btn-h);
padding: 0 24px;
border-radius: var(--ba-radius);
font-family: var(--ba-display);
font-size: var(--ba-text-ui);
line-height: 1;
text-transform: uppercase;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
box-sizing: border-box;
background: transparent;
}
.ba-btn__inner {
display: inline-flex;
align-items: center;
gap: 8px;
}
.ba-btn__label {
display: block;
line-height: 1;
text-box-trim: trim-both;
text-box-edge: ex alphabetic;
text-box: trim-both ex alphabetic;
}
.ba-btn__arrow {
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;
}
.ba-btn:hover { opacity: 1; }
.ba-btn--mint {
background: var(--ba-mint);
color: var(--ba-ink);
border-color: var(--ba-mint);
}
.ba-btn--mint:hover {
background: var(--ba-mint-hover);
border-color: var(--ba-mint-hover);
}
.ba-btn--on-dark {
background: transparent;
color: var(--ba-white);
border-color: var(--ba-mint);
}
.ba-btn--on-dark:hover {
background: var(--ba-mint-hover);
border-color: var(--ba-mint-hover);
color: var(--ba-ink);
}
.ba-btn--ink {
background: var(--ba-ink);
color: var(--ba-white);
border-color: var(--ba-ink);
}
.ba-btn--ink:hover { color: var(--ba-mint); }
.ba-btn--ghost {
background: transparent;
color: var(--ba-ink);
border-color: var(--ba-ink);
}
.ba-btn--ghost:hover,
.ba-btn--ghost[aria-pressed="true"] {
background: var(--ba-ink);
color: var(--ba-mint);
border-color: var(--ba-ink);
}
.ba-chip {
display: inline-flex;
align-items: center;
gap: 16px;
padding: 10px 12px;
border-radius: var(--ba-radius);
background: var(--ba-chip-bg);
font-family: var(--ba-display);
font-size: var(--ba-text-ui);
line-height: 1;
text-transform: uppercase;
color: var(--ba-black);
white-space: nowrap;
}
.ba-chip:hover { opacity: 1; }
.ba-chip img {
width: 23.623px;
height: 24.547px;
object-fit: contain;
display: block;
flex-shrink: 0;
}
.ba-chip__label {
display: block;
line-height: 1;
text-box-trim: trim-both;
text-box-edge: ex alphabetic;
text-box: trim-both ex alphabetic;
}
.ba-chip--solid { background: var(--ba-white); }
.ba-chip--lg { font-size: var(--ba-text-h5); }
@supports not (text-box-trim: trim-both) {
.ba-btn__label,
.ba-chip__label {
transform: translateY(-0.12em);
}
}
.ba-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px 8px 10px;
border-radius: var(--ba-radius);
font-family: var(--ba-body);
font-size: var(--ba-text-xs);
font-weight: 600;
line-height: 1.5;
background: var(--ba-white);
color: var(--ba-black);
box-sizing: border-box;
white-space: nowrap;
}
.ba-badge:hover { opacity: 1; }
.ba-badge img { display: block; flex-shrink: 0; }
.ba-badge__label { line-height: 1.5; }
.ba-badge--seller { background: var(--ba-white); color: var(--ba-black); }
.ba-badge--children { background: var(--ba-ink); color: var(--ba-white); }
.ba-badge--sustain { background: var(--ba-forest); color: var(--ba-white); }
.ba-badge--access { background: var(--ba-white); color: var(--ba-ink); }
.ba-badge--originals { background: var(--ba-ink); color: var(--ba-mint); }
.ba-price {
font-family: var(--ba-body);
font-size: 18px;
font-weight: 400;
line-height: 1.5;
color: var(--ba-black);
white-space: nowrap;
}
.ba-price strong { font-weight: 700; }
.ba-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
gap: 1.5rem;
}
.ba-list {
list-style: none;
margin: 0;
padding: 0;
}
.ba-grid > li {
min-width: 0;
display: flex;
}
.ba-grid > li > .ba-card {
width: 100%;
min-height: 100%;
}
.ba-card {
background: var(--ba-white);
box-shadow: 0 0 13.4px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
min-height: 100%;
width: 100%;
}
.ba-card[hidden],
.ba-carousel__track > .ba-card[hidden],
.ba-grid > .ba-card[hidden],
.ba-grid > li:has(.ba-card[hidden]),
.ba-carousel__track > li:has(.ba-card[hidden]) {
display: none;
}
.ba-card__media {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
height: 234px;
padding: 16px;
overflow: hidden;
flex-shrink: 0;
}
.ba-card__media > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
max-width: none;
}
.ba-card__badges {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-end;
}
.ba-card__body {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 24px;
flex: 1;
min-height: 364px;
gap: 16px;
}
.ba-card__stack,
.ba-card__copy {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
.ba-card__meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
width: 100%;
}
.ba-card__meta .ba-price { flex-shrink: 0; }
.ba-card__title {
margin: 0;
letter-spacing: 0;
font-size: var(--ba-text-h4);
line-height: 1;
}
.ba-card__title a { text-decoration: none; }
.ba-card__excerpt {
margin: 0;
font-family: var(--ba-body);
font-size: var(--ba-text-body);
font-weight: 400;
line-height: 1.5;
color: var(--ba-black);
}
.ba-card .ba-btn { align-self: flex-start; }
.ba-card--more {
display: flex;
background: var(--ba-mint);
box-shadow: 0 0 13.4px rgba(0, 0, 0, 0.15);
min-height: 598px;
align-items: center;
justify-content: center;
text-align: center;
padding: 16px;
gap: 15px;
}
.ba-card--more h3 {
width: 210px;
margin: 0;
letter-spacing: 0;
text-align: center;
font-size: var(--ba-text-h4);
line-height: 1;
}
.ba-card--more .ba-btn { align-self: center; }
.ba-carousel-block { overflow-x: clip; }
.ba-carousel-block__inner {
display: flex;
flex-direction: column;
gap: 80px;
width: 100%;
}
.ba-carousel-block__title {
display: flex;
gap: 80px;
align-items: flex-start;
width: 100%;
}
.ba-carousel-block__title > * {
flex: 1 0 0;
min-width: 0;
}
.ba-carousel-block__heading {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
}
.ba-carousel-block__heading h2 {
margin: 0;
font-size: var(--ba-text-h3);
letter-spacing: 0;
line-height: 1;
}
.ba-carousel-block__lede {
font-size: 18px;
line-height: 1.5;
color: var(--ba-black);
}
.ba-carousel-block__lede p { margin: 0 0 1.5em; }
.ba-carousel-block__lede p:last-child { margin: 0; }
.ba-carousel-block__toolbar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
width: 100%;
}
.ba-filter-group {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.ba-filter-group__label {
margin: 0;
font-size: var(--ba-text-sm);
font-weight: 600;
line-height: 1.5;
color: var(--ba-black);
text-transform: none;
letter-spacing: 0;
font-family: var(--ba-body);
}
.ba-carousel-block .ba-filters { gap: 16px; }
.ba-carousel {
--ba-carousel-gutter: max(1rem, calc((100% - var(--ba-wrap)) / 2));
margin-top: 32px;
width: 100%;
}
.ba-carousel__track {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: 14px var(--ba-carousel-gutter);
scroll-padding-inline: var(--ba-carousel-gutter);
align-items: stretch;
}
.ba-carousel__track::-webkit-scrollbar { display: none; }
.ba-carousel__track > .ba-card,
.ba-carousel__track > li {
flex: 0 0 395px;
scroll-snap-align: start;
}
.ba-carousel__track > li {
display: flex;
min-width: 0;
}
.ba-carousel__track > li > .ba-card {
width: 100%;
}
.ba-carousel__track > .ba-card--more,
.ba-carousel__track > li.ba-card--more {
flex: 0 0 300px;
width: 300px;
}
.ba-carousel__nav {
display: flex;
justify-content: flex-end;
width: 100%;
margin-top: 16px;
}
.ba-carousel__nav button {
width: 69px;
height: 69px;
padding: 9.5px;
background: none;
border: 0;
cursor: pointer;
color: var(--ba-ink);
}
.ba-carousel__nav button:last-child img { transform: scaleX(-1); }
.ba-carousel__nav img {
width: 50px;
height: 50px;
display: block;
}
.ba-listing {
padding: 40px var(--ba-page-pad) 0;
background: var(--ba-white);
}
.ba-listing .ba-carousel-block,
.ba-carousel-block--listing {
padding-block: 16px 32px;
}
.ba-listing .ba-tourtiles--carousel {
margin-inline: calc(-1 * var(--ba-page-pad));
width: calc(100% + 2 * var(--ba-page-pad));
}
.ba-listing__inner {
width: min(100%, var(--ba-wrap));
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 64px;
}
.ba-listing > .ba-listing__inner + .ba-listing__inner {
margin-block-start: 64px;
}
.ba-listing__toolbar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 32px;
align-items: flex-start;
}
.ba-listing__filters {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.ba-listing__label {
margin: 0;
font-weight: 600;
font-size: 14px;
line-height: 1.5;
color: var(--ba-black);
}
.ba-listing__block {
display: flex;
flex-direction: column;
gap: 32px;
}
.ba-listing__intro {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
max-width: 48rem;
}
.ba-listing__intro h1 {
margin: 0;
font-size: var(--ba-text-h3);
line-height: 1;
text-transform: uppercase;
}
.ba-lead {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
font-weight: 400;
color: var(--ba-ink);
}
.ba-listing__head {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.ba-listing__head h1,
.ba-listing__count {
margin: 0;
font-size: var(--ba-text-h3);
line-height: 1;
text-transform: uppercase;
font-family: var(--ba-display);
}
.ba-listing__sort {
position: relative;
flex: 0 0 auto;
}
.ba-listing__sort > summary {
display: flex;
flex-direction: row;
gap: 7px;
align-items: center;
white-space: nowrap;
list-style: none;
cursor: pointer;
padding: 0;
font-family: var(--ba-display);
font-size: var(--ba-text-ui);
line-height: 1.4;
text-transform: uppercase;
color: var(--ba-black);
}
.ba-listing__sort > summary::-webkit-details-marker,
.ba-listing__sort > summary::marker {
display: none;
}
.ba-listing__sort-menu {
position: absolute;
right: 0;
top: calc(100% + 8px);
z-index: 6;
margin: 0;
padding: 8px 0;
list-style: none;
min-width: 220px;
background: var(--ba-white);
border: 1px solid var(--ba-line);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(23, 36, 45, 0.12);
}
.ba-listing__sort-menu a {
display: block;
padding: 10px 16px;
color: var(--ba-ink);
text-decoration: none;
font-family: var(--ba-body);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
text-transform: none;
}
.ba-listing__sort-menu a:hover,
.ba-listing__sort-menu a[aria-current="true"] {
background: var(--ba-mint);
}
.ba-listing .ba-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px 48px;
}
.ba-filters { display: flex; flex-wrap: wrap; gap: 12px; }
.ba-search {
flex: 0 1 auto;
width: min(100%, 562px);
}
.ba-search label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.ba-search__row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
height: 48px;
border-radius: var(--ba-radius);
box-shadow: 0 0 0 1px var(--ba-line);
padding: 4px 6px 4px 16px;
}
.ba-search input {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
font: inherit;
background: transparent;
appearance: none;
}
.ba-search input::-webkit-search-decoration,
.ba-search input::-webkit-search-cancel-button { display: none; }
.ba-search button {
width: 40px; height: 40px; border-radius: 50%;
background: var(--ba-ink); border: 0; cursor: pointer;
display: grid; place-items: center;
}
.ba-search button img { filter: invert(1); width: 19px; }
.ba-listing__empty,
.ba-carousel__empty {
margin: 16px 0 0;
font-size: 16px;
color: var(--ba-ink);
}
.ba-carousel__empty[hidden] { display: none; }
@media (max-width: 800px) {
.ba-listing .ba-grid { grid-template-columns: 1fr; }
.ba-listing__head { flex-direction: column; align-items: flex-start; }
.ba-listing__sort-menu {
left: 0;
right: auto;
min-width: min(220px, calc(100vw - 48px));
max-width: calc(100vw - 48px);
}
}
.ba-pages {
display: flex;
justify-content: center;
padding: 16px 0 96px;
gap: 16px;
}
.ba-pages .nav-links {
display: flex;
flex-direction: row;
gap: 16px;
align-items: flex-start;
}
.ba-pages .page-numbers {
width: 48px;
height: 48px;
border-radius: 50%;
display: grid;
place-items: center;
box-shadow: 0 0 0 1px var(--ba-ink);
font-family: var(--ba-display);
font-size: var(--ba-text-ui);
line-height: 1.4;
color: var(--ba-ink);
text-decoration: none;
box-sizing: border-box;
}
.ba-pages .page-numbers:hover {
background: rgba(197, 232, 232, 0.3);
}
.ba-pages .page-numbers.current {
box-shadow: 0 0 0 1px var(--ba-mint);
}
.ba-prose :where(p, ul, ol) { margin: 0 0 1em; }
.ba-prose a { text-decoration: underline; }
.ba-modal {
width: min(960px, 100vw);
height: min(90vh, 800px);
border: 0;
padding: 0;
}
.ba-modal::backdrop { background: rgba(23, 36, 45, 0.7); }
.ba-modal__close {
position: absolute; top: 8px; right: 8px; z-index: 2;
background: var(--ba-white); border: 0; border-radius: 50%;
width: 40px; height: 40px; cursor: pointer;
}
.ba-modal__slot, .ba-modal__slot iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 800px) {
.ba-carousel-block__title,
.ba-carousel-block__inner { flex-direction: column; gap: 32px; }
.ba-carousel__track > .ba-card {
flex-basis: min(395px, calc(100% - var(--ba-carousel-gutter) - 40px));
}
}
.ba-ds { background: #eee; min-height: 100vh; }
.ba-ds__banner {
background: var(--ba-ink);
padding: var(--ba-space) var(--ba-page-pad);
display: flex;
flex-direction: column;
gap: 8px;
}
.ba-ds__banner h1 {
margin: 0;
font-size: var(--ba-text-h3);
color: var(--ba-white);
letter-spacing: 0;
}
.ba-ds__banner p {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-mint);
}
.ba-ds__label {
margin: 0;
padding: 12px var(--ba-page-pad);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ba-muted);
}
.ba-ds__panel {
background: var(--ba-white);
padding: 48px var(--ba-page-pad);
}
.ba-ds__row {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
}
.ba-ds__stack {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.ba-ds__note {
margin: 16px 0 0;
font-size: var(--ba-text-sm);
color: var(--ba-muted);
max-width: 42rem;
}
.ba-ds__inkpad {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
background: var(--ba-ink);
padding: 24px;
}
.ba-ds__photo {
background: var(--ba-ink) center / cover no-repeat;
padding: 16px;
min-height: 160px;
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
.ba-ds__card {
max-width: 395px;
}
.ba-ds__panel--full { padding: 0; overflow: hidden; }
.ba-ds__panel--bleed { padding: 0; overflow: visible; }
.ba-ds__note--pad {
padding: 0 var(--ba-page-pad) 48px;
}
.screen-reader-text:not(:focus) {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
white-space: nowrap;
}
.ba-badge--partner { background: var(--ba-white); color: var(--ba-ink); }
.ba-videos--single .ba-videos__grid { grid-template-columns: minmax(0, 1fr); }
.ba-videos--single .ba-videos__grid > li { max-width: 960px; width: 100%; margin-inline: auto; }
/* partials/activity-levels.css */
.ba-activity-levels {
list-style: none;
padding: 0;
margin: 20px 0 0;
display: grid;
gap: 18px;
}
.ba-activity-levels > li {
display: grid;
gap: 6px;
}
.ba-activity-levels__symbols {
display: flex;
gap: 4px;
align-items: center;
}
.ba-activity-levels__symbols img {
width: 22px;
height: 23px;
object-fit: contain;
}
/* partials/booking.css */
.ba-bookside__calendar {
min-height: 700px;
background: var(--ba-white);
}
.bokun-widgets-cart-wrapper {
bottom: 88px !important;
}
/* partials/chrome.css */
.ba-banner {
position: relative;
width: 100%;
min-height: 40px;
height: auto;
overflow: visible;
background: var(--ba-mint);
display: flex;
flex-direction: row;
padding: 8px 8px 8px 8px;
align-items: center;
box-sizing: border-box;
color: var(--ba-ink);
text-align: left;
font-size: var(--ba-text-sm);
}
.ba-banner[hidden] { display: none; }
.ba-banner a { color: inherit; }
.ba-banner--mint { background: var(--ba-mint); color: var(--ba-ink); }
.ba-banner--ink { background: var(--ba-ink); color: var(--ba-white); }
.ba-banner--forest { background: var(--ba-forest); color: var(--ba-white); }
.ba-banner--black { background: var(--ba-black); color: var(--ba-white); }
.ba-banner--white {
background: var(--ba-white);
color: var(--ba-ink);
box-shadow: inset 0 -1px var(--ba-line);
}
.ba-banner--ink .ba-banner__close img,
.ba-banner--forest .ba-banner__close img,
.ba-banner--black .ba-banner__close img {
filter: invert(1);
}
.ba-banner__inner {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 40px;
column-gap: 0;
padding: 0;
align-items: center;
align-self: stretch;
width: 100%;
min-height: 24px;
}
.ba-banner__text {
margin: 0;
grid-column: 2;
min-width: 0;
padding: 2px 8px;
text-align: center;
font-weight: 700;
font-size: var(--ba-text-sm);
line-height: 1.4;
color: inherit;
white-space: normal;
overflow-wrap: break-word;
text-wrap: balance;
}
.ba-banner__more {
text-decoration: underline;
margin-left: 4px;
font-weight: 700;
white-space: nowrap;
}
.ba-banner__more:hover { opacity: 0.7; color: inherit; }
.ba-banner__close {
grid-column: 3;
width: 40px;
height: 40px;
background: none;
border: none;
padding: 13px;
cursor: pointer;
box-sizing: border-box;
justify-self: end;
align-self: center;
}
.ba-banner__close:hover { opacity: 0.6; }
.ba-banner__close img {
width: 14px;
height: 14px;
display: block;
}
@media (min-width: 600px) {
.ba-banner {
padding: 8px 12px;
}
.ba-banner__inner {
grid-template-columns: 32px minmax(0, 1fr) 32px;
}
.ba-banner__text {
padding: 2px 12px;
}
.ba-banner__close {
width: 32px;
height: 32px;
padding: 9px;
}
}
@media (min-width: 1100px) {
.ba-banner {
min-height: 40px;
padding: 0 15px;
}
.ba-banner__inner {
grid-template-columns: 32px minmax(0, 1fr) 32px;
min-height: 40px;
}
.ba-banner__text {
padding: 0 16px;
line-height: 1.2;
}
.ba-banner__close {
width: 32px;
height: 32px;
padding: 9px;
}
}
.ba-nav {
position: relative;
background: var(--ba-white);
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 0 16px;
z-index: 40;
--ba-chrome-gutter: max(var(--ba-chrome-inset), calc((100% - var(--ba-chrome)) / 2));
}
.ba-nav__inner {
position: relative;
width: var(--ba-chrome);
max-width: calc(100% - (var(--ba-chrome-inset) * 2));
height: 101px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
margin-inline: auto;
}
.ba-nav__logo {
display: block;
flex-shrink: 0;
}
.ba-nav__logo img {
width: 226px;
height: 46px;
display: block;
}
.ba-nav__menus {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-end;
justify-content: center;
}
.ba-nav__sec {
padding: 8px 0;
font-size: 14px;
line-height: 1.5;
}
.ba-nav__sec ul {
display: flex;
flex-direction: row;
gap: 32px;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.ba-nav__sec a { color: var(--ba-black); }
.ba-nav__sec a:hover { color: var(--ba-ink); opacity: 1; }
.ba-nav__sub {
list-style: none;
margin: 0;
padding: 0;
}
.ba-nav__sec-parent {
display: inline-flex;
align-items: center;
gap: 4px;
}
.ba-nav__sec-parent > .ba-nav__chevron {
transition: transform 0.16s ease;
}
@media (min-width: 1100px) {
.ba-nav__sec-parent {
position: relative;
}
.ba-nav__sec-parent:hover > .ba-nav__chevron,
.ba-nav__sec-parent:focus-within > .ba-nav__chevron {
transform: rotate(180deg);
}
.ba-nav__sec .ba-nav__sub {
position: absolute;
top: 100%;
left: 50%;
z-index: 30;
display: flex;
flex-direction: column;
gap: 14px;
min-width: 232px;
padding: 18px 22px;
background: var(--ba-white);
border-radius: 12px;
box-shadow: 0 14px 34px rgba(23, 36, 45, 0.16);
text-align: left;
opacity: 0;
visibility: hidden;
transform: translate(-50%, -6px);
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.ba-nav__sec-parent:hover > .ba-nav__sub,
.ba-nav__sec-parent:focus-within > .ba-nav__sub {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.ba-nav__sec .ba-nav__sub a,
.ba-nav--on-dark .ba-nav__sec .ba-nav__sub a,
.ba-hero .ba-nav__sec .ba-nav__sub a {
color: var(--ba-black);
white-space: nowrap;
}
.ba-nav__sec .ba-nav__sub a:hover {
color: var(--ba-forest);
}
}
@media (max-width: 1100px) {
.ba-nav__m-sec .ba-nav__chevron {
display: none;
}
.ba-nav__m-sec .ba-nav__sec-parent {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.ba-nav__m-sec .ba-nav__sub {
display: flex;
flex-direction: column;
gap: 18px;
margin: 18px 0 0;
padding: 0 0 0 16px;
border-left: 1px solid rgba(23, 36, 45, 0.15);
}
}
.ba-ext {
display: inline-block;
width: 12px;
height: 12px;
margin-left: 2px;
vertical-align: -1px;
}
.ba-ext svg {
display: block;
width: 100%;
height: 100%;
}
.ba-nav__row {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
}
.ba-nav__pri {
display: flex;
flex-direction: row;
gap: 23px;
align-items: center;
}
.ba-nav__pri ul {
display: flex;
gap: 23px;
list-style: none;
margin: 0;
padding: 0;
}
.ba-nav__toggle,
.ba-nav__link {
display: flex;
flex-direction: row;
gap: 4px;
align-items: center;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: var(--ba-body);
font-size: 16px;
line-height: 1.5;
color: var(--ba-black);
white-space: nowrap;
text-decoration: none;
}
.ba-nav__link:hover,
.ba-nav__toggle:hover {
opacity: 1;
}
.ba-nav__chevron {
display: block;
flex-shrink: 0;
}
.ba-nav__toggle[aria-expanded="true"] .ba-nav__chevron {
transform: rotate(45deg);
}
.ba-nav__burger {
display: none;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid currentColor;
background: transparent;
padding: 0;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
color: var(--ba-black);
flex-shrink: 0;
}
.ba-nav__burger span {
display: block;
width: 16px;
height: 1.75px;
background: currentColor;
}
.ba-nav__mega {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
min-height: 624px;
height: auto;
max-height: calc(100vh - 96px);
overflow-y: auto;
background: var(--ba-white);
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
flex-direction: row;
padding: 0 var(--ba-chrome-gutter);
justify-content: space-between;
align-items: flex-start;
box-sizing: border-box;
z-index: 50;
}
.ba-nav.is-mega-open .ba-nav__mega,
.ba-nav.is-mega-closing .ba-nav__mega,
.ba-nav:has([aria-expanded="true"]) .ba-nav__mega {
display: flex;
}
.ba-mega__cats {
width: 380px;
display: flex;
flex-direction: column;
gap: 24px;
padding: 48px 0;
justify-content: center;
align-items: flex-start;
flex-shrink: 0;
}
.ba-mega__cat {
width: 380px;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--ba-display);
font-size: var(--ba-text-ui);
line-height: 1;
text-transform: uppercase;
color: var(--ba-black);
opacity: 0.4;
}
.ba-nav[data-mega-level="1"] .ba-mega__cat { opacity: 1; }
.ba-mega__cat.is-active,
.ba-mega__cat:hover {
opacity: 1;
text-decoration: underline;
text-underline-offset: 3px;
}
.ba-mega__arrow {
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;
}
.ba-mega__main {
width: 915px;
display: flex;
flex-direction: row;
align-items: stretch;
align-self: stretch;
flex-shrink: 0;
min-height: 624px;
}
.ba-mega__tours {
width: 520px;
background: #f7f7f7;
display: flex;
flex-direction: column;
gap: 24px;
padding: 48px;
align-items: flex-start;
box-sizing: border-box;
flex-shrink: 0;
}
.ba-mega__tour {
width: 380px;
font-family: var(--ba-display);
font-size: var(--ba-text-ui);
line-height: 1;
text-transform: uppercase;
color: var(--ba-black);
opacity: 1;
}
.ba-nav[data-mega-level="3"] .ba-mega__tour { opacity: 0.4; }
.ba-nav[data-mega-level="3"] .ba-mega__tour.is-active,
.ba-mega__tour:hover { opacity: 1; }
.ba-nav[data-mega-level="1"] .ba-mega__tours,
.ba-nav[data-mega-level="1"] .ba-mega__card,
.ba-nav[data-mega-level="2"] .ba-mega__card,
.ba-nav[data-mega-level="3"] .ba-mega__cta {
display: none;
}
.ba-nav[data-mega-level="1"] .ba-mega__cta .ba-btn { display: none; }
.ba-mega__cta {
position: relative;
width: 395px;
background: var(--ba-ink) center / cover no-repeat;
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
justify-content: flex-end;
align-items: flex-start;
box-sizing: border-box;
flex-shrink: 0;
}
.ba-mega__cta::after {
content: "";
position: absolute;
inset: 0;
background: var(--ba-scrim);
pointer-events: none;
}
.ba-mega__cta-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
align-items: flex-start;
align-self: stretch;
}
.ba-mega__cta [data-mega-cta-title] {
font-family: var(--ba-display);
font-weight: 400;
text-transform: uppercase;
margin: 0;
width: 347px;
font-size: var(--ba-text-h4);
line-height: 1;
color: var(--ba-white);
letter-spacing: 0;
}
.ba-nav .ba-card__title {
font-family: var(--ba-display);
font-weight: 400;
text-transform: uppercase;
font-size: var(--ba-text-h4);
line-height: 1;
}
.ba-mega__card {
width: 395px;
min-height: 624px;
height: auto;
background: var(--ba-white);
display: flex;
flex-direction: column;
overflow: visible;
flex-shrink: 0;
}
.ba-mega__card[hidden] { display: none; }
.ba-mega__card > .ba-card {
width: 100%;
min-height: 624px;
box-shadow: none;
}
.ba-mega__card .ba-card__body { min-height: 364px; }
.ba-mega__card-media {
height: 234px;
background: var(--ba-ink) center / cover no-repeat;
flex-shrink: 0;
}
.ba-mega__card-body {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
flex: 1;
}
.ba-mega__card-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.ba-mega__card h2 {
margin: 0;
font-size: var(--ba-text-h4);
line-height: 1;
color: var(--ba-black);
}
.ba-mega__card p {
margin: 0;
font-size: 16px;
line-height: 1.5;
color: var(--ba-black);
}
.ba-mega__card .ba-btn { margin-top: auto; }
.ba-nav__drawer { display: none; }
.ba-nav--on-dark {
background: transparent;
}
.ba-nav--on-dark .ba-nav__sec a {
color: #eee;
}
.ba-nav--on-dark .ba-nav__toggle,
.ba-nav--on-dark .ba-nav__link {
color: var(--ba-white);
}
.ba-nav--on-dark .ba-nav__burger {
color: var(--ba-white);
}
.ba-hero .ba-nav {
position: absolute;
left: 0;
top: 0;
width: 100%;
background: transparent;
padding: 8px 0 16px;
z-index: 20;
}
.ba-hero .ba-nav__sec a { color: #eee; }
.ba-hero .ba-nav .ba-nav__mega a,
.ba-nav--on-dark .ba-nav__mega a {
color: var(--ba-black);
}
.ba-nav[data-mega-level="1"] .ba-mega__main {
justify-content: flex-end;
}
.ba-hero .ba-nav .ba-btn--mint,
.ba-nav--on-dark .ba-btn--mint {
color: var(--ba-ink);
}
.ba-hero .ba-nav .ba-btn--mint:hover,
.ba-nav--on-dark .ba-btn--mint:hover {
color: var(--ba-ink);
}
.ba-hero {
--ba-banner-h: 0px;
position: relative;
isolation: isolate;
width: 100%;
height: min(900px, calc(100dvh - var(--ba-banner-h)));
min-height: 0;
overflow: hidden;
background: var(--ba-ink) 50% 99.315% / cover no-repeat;
color: var(--ba-white);
display: flex;
flex-direction: row;
justify-content: center;
padding: 88px 0 56px;
align-items: flex-end;
box-sizing: border-box;
}
body:has(.ba-banner:not([hidden])) .ba-hero {
--ba-banner-h: 40px;
}
.ba-hero__media,
.ba-hero__video {
position: absolute;
left: 0;
top: -6.81%;
width: 100%;
height: 106.86%;
object-fit: cover;
object-position: 50% 50%;
max-width: none;
z-index: 0;
pointer-events: none;
}
.ba-hero__video {
z-index: 1;
opacity: 0;
}
.ba-hero.is-video .ba-hero__video {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.ba-hero__video { display: none; }
}
.ba-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--ba-ink) 32%, transparent) 0%,
color-mix(in srgb, var(--ba-ink) 18%, transparent) 38%,
color-mix(in srgb, var(--ba-ink) 62%, transparent) 62%,
color-mix(in srgb, var(--ba-ink) 86%, transparent) 100%
);
}
.ba-hero__content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
gap: 80px;
align-items: flex-start;
padding: 0;
}
.ba-hero__copy {
max-width: 672px;
display: flex;
flex-direction: column;
gap: 32px;
align-items: flex-start;
}
.ba-hero__text {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
}
.ba-hero__ratings {
display: flex;
flex-direction: row;
gap: 24px;
align-items: flex-start;
margin-bottom: 0;
font-size: 12px;
}
.ba-hero h1 {
margin: 0;
width: 672px;
max-width: 100%;
display: flex;
flex-direction: column;
font-size: var(--ba-text-hero);
line-height: 0;
letter-spacing: 0;
color: var(--ba-white);
text-transform: uppercase;
}
.ba-hero h1 span {
display: block;
line-height: 0.85;
}
.ba-hero__lede {
margin: 0;
width: 618px;
max-width: 100%;
font-size: 18px;
line-height: 1.5;
font-weight: 400;
color: var(--ba-white);
}
.ba-hero__lede strong {
font-weight: 700;
}
.ba-rating {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
}
.ba-rating__logo {
position: relative;
width: 46px;
height: 46px;
flex-shrink: 0;
overflow: hidden;
}
.ba-rating__logo--ta {
border-radius: 23px;
}
.ba-rating__logo--ta img {
position: absolute;
left: -16.56%;
top: -16.3%;
width: 132.61%;
height: 132.61%;
max-width: none;
object-fit: cover;
}
.ba-rating__logo--g img {
width: 46px;
height: 46px;
object-fit: cover;
display: block;
}
.ba-rating__meta {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.ba-rating__row {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
}
.ba-rating__score {
font-weight: 600;
font-size: 16px;
line-height: 1.5;
color: var(--ba-white);
}
.ba-rating__dots {
display: flex;
flex-direction: row;
gap: 2px;
align-items: center;
}
.ba-rating__dots img {
width: 18px;
height: 18px;
display: block;
}
.ba-rating__stars {
display: flex;
flex-direction: row;
gap: 4px;
align-items: center;
}
.ba-rating__count {
font-size: 12px;
line-height: 1.5;
font-weight: 400;
color: #eee;
}
.ba-rating__count strong {
font-weight: 700;
color: var(--ba-white);
}
.ba-h36 {
position: relative;
width: 100%;
height: 531px;
overflow: hidden;
background: var(--ba-white);
display: flex;
flex-direction: row;
align-items: flex-start;
}
.ba-h36__copy {
display: flex;
flex-direction: column;
gap: 32px;
padding: 0 80px 88px max(var(--ba-page-pad), calc((100% - var(--ba-wrap)) / 2));
justify-content: flex-end;
align-items: flex-start;
flex: 1 1 50%;
min-width: 0;
align-self: stretch;
box-sizing: border-box;
}
.ba-h36__stack {
max-width: 560px;
display: flex;
flex-direction: column;
gap: 32px;
align-items: flex-start;
align-self: stretch;
}
.ba-h36__text {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
align-self: stretch;
}
.ba-h36 h1 {
margin: 0;
font-size: var(--ba-text-h1);
line-height: 1;
color: var(--ba-black);
letter-spacing: 0;
align-self: stretch;
}
.ba-h36 p {
margin: 0;
font-size: 18px;
line-height: 1.5;
color: var(--ba-black);
align-self: stretch;
}
.ba-h36__media {
height: 540px;
background: var(--ba-ink) center / cover no-repeat;
flex: 1 1 50%;
min-width: 0;
}
.ba-page-hero {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
gap: 4px;
padding: 40px var(--ba-chrome-inset) 0;
align-items: center;
box-sizing: border-box;
background: var(--ba-white);
}
.ba-page-hero__frame {
position: relative;
isolation: isolate;
overflow: hidden;
width: 100%;
max-width: var(--ba-chrome);
height: 300px;
display: flex;
flex-direction: column;
padding: 24px;
justify-content: center;
align-items: center;
box-sizing: border-box;
background: var(--ba-ink);
}
.ba-page-hero__media {
position: absolute;
left: 0;
top: -115.94%;
width: 100%;
height: 291.59%;
object-fit: cover;
object-position: 50% 50%;
max-width: none;
z-index: 0;
pointer-events: none;
}
.ba-page-hero__frame::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
pointer-events: none;
}
.ba-page-hero__inner {
position: relative;
z-index: 2;
max-width: 768px;
width: 100%;
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
}
.ba-page-hero h1 {
margin: 0;
font-size: var(--ba-text-h1);
text-align: center;
line-height: 1;
color: var(--ba-white);
letter-spacing: 0;
align-self: stretch;
}
.ba-page-hero p {
margin: 0;
font-size: 18px;
text-align: center;
line-height: 1.5;
color: var(--ba-white);
align-self: stretch;
}
.ba-page-hero--compact {
padding: 40px var(--ba-chrome-inset) 0;
}
.ba-bph {
position: relative;
width: 100%;
overflow: hidden;
background: var(--ba-white);
display: flex;
flex-direction: column;
gap: 80px;
padding: 40px var(--ba-page-pad);
align-items: center;
box-sizing: border-box;
}
.ba-bph__row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
align-self: center;
gap: 30px;
width: min(100%, 1312px);
margin-inline: auto;
}
.ba-bph__copy {
flex: 1 1 0;
min-width: 0;
max-width: 592px;
width: auto;
display: flex;
flex-direction: column;
gap: 40px;
align-items: flex-start;
align-self: stretch;
}
.ba-bph__head {
width: 100%;
max-width: 592px;
display: flex;
flex-direction: column;
gap: 32px;
align-items: flex-start;
}
.ba-bph__bc {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
font-size: 16px;
line-height: 1.5;
color: var(--ba-black);
}
.ba-bph__bc a { color: var(--ba-black); }
.ba-bph h1 {
margin: 0;
width: 100%;
max-width: none;
font-size: var(--ba-text-h1);
line-height: 1;
color: var(--ba-black);
letter-spacing: 0;
}
.ba-bph__by {
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
.ba-bph__by p {
margin: 0;
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
font-size: 14px;
line-height: 1.5;
color: var(--ba-black);
}
.ba-bph__by p:first-child { gap: 4px; }
.ba-bph__by strong {
font-family: var(--ba-body);
font-weight: 600;
}
.ba-bph__media {
flex: 0 1 690px;
width: min(100%, 690px);
height: auto;
aspect-ratio: 690 / 460;
object-fit: cover;
max-width: 690px;
}
.ba-bph__media--ink {
background: var(--ba-ink);
}
.ba-foot {
position: relative;
width: 100%;
overflow: hidden;
}
.ba-foot-cta {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: min(1286px, calc(100% - 80px));
height: 356px;
display: flex;
flex-direction: row;
align-items: center;
z-index: 2;
}
.ba-foot-cta__media {
background: var(--ba-ink) center / cover no-repeat;
flex: 1 1 50%;
min-width: 0;
align-self: stretch;
}
.ba-foot-cta__copy {
overflow: hidden;
background: var(--ba-mint);
display: flex;
flex-direction: column;
gap: 24px;
padding: 50px 88px;
justify-content: center;
align-items: flex-start;
box-sizing: border-box;
flex: 1 1 50%;
min-width: 0;
align-self: stretch;
}
.ba-foot-cta h2 {
margin: 0;
width: 474px;
max-width: 100%;
font-size: var(--ba-text-h1);
line-height: 1;
color: var(--ba-ink);
letter-spacing: 0;
}
.ba-foot-cta p {
margin: 0;
width: 474px;
max-width: 100%;
font-size: 16px;
line-height: 1.5;
color: var(--ba-ink);
}
.ba-foot--no-cta .ba-footer {
margin-top: 0;
}
.ba-foot--no-cta .ba-footer__inner {
margin-top: 0;
}
.ba-footer {
position: relative;
margin-top: 104px;
width: 100%;
overflow: hidden;
background: var(--ba-ink);
color: var(--ba-white);
display: flex;
flex-direction: column;
gap: 80px;
padding: 80px 64px;
justify-content: flex-end;
align-items: center;
box-sizing: border-box;
}
.ba-footer a { color: var(--ba-white); }
.ba-footer a:hover { color: var(--ba-mint); opacity: 1; }
.ba-footer h2 { font-size: var(--ba-text-h1); }
.ba-footer__mark {
position: absolute;
right: -80px;
top: 184px;
width: 868px;
height: 902px;
max-width: none;
pointer-events: none;
}
.ba-footer__inner {
position: relative;
width: 100%;
max-width: var(--ba-wrap);
display: flex;
flex-direction: column;
gap: 80px;
align-items: flex-start;
margin-top: 261px;
}
.ba-footer__intro {
max-width: min(768px, 100%);
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
flex: 1 1 50%;
min-width: 0;
}
.ba-footer__hash {
margin: 0;
font-family: var(--ba-display);
font-weight: 400;
font-size: var(--ba-text-h1);
line-height: 1;
color: var(--ba-white);
text-transform: uppercase;
align-self: stretch;
}
.ba-footer__lede {
margin: 0;
width: 577px;
max-width: 100%;
font-size: 16px;
line-height: 1.5;
color: var(--ba-white);
}
.ba-footer__cols-wrap {
display: flex;
flex-direction: column;
gap: 80px;
align-items: flex-start;
align-self: stretch;
}
.ba-footer__rule {
width: 100%;
height: 1px;
background: var(--ba-white);
border: none;
margin: 0;
}
.ba-footer__cols {
display: flex;
flex-direction: row;
gap: 32px;
align-items: flex-start;
align-self: stretch;
}
.ba-footer__cols > ul {
display: flex;
flex-direction: row;
gap: 32px;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.ba-footer__col {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
flex: 1 1 0;
min-width: 0;
}
.ba-footer__col-title {
font-weight: 600;
font-size: 16px;
line-height: 1.5;
color: var(--ba-white);
}
.ba-footer__col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
.ba-footer__col li { padding: 8px 0; }
.ba-footer__col a {
font-size: 14px;
line-height: 1.5;
color: var(--ba-white);
}
.ba-footer__base {
display: flex;
flex-direction: column;
gap: 32px;
align-items: flex-start;
align-self: stretch;
}
.ba-footer__brands {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
align-self: stretch;
}
.ba-footer__logo {
width: 97px;
height: 184px;
}
.ba-footer__certs {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
}
.ba-footer__stf {
width: 105px;
height: 40px;
background: var(--ba-white);
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.ba-footer__stf-inner {
position: relative;
width: 89px;
height: 29.2px;
display: block;
}
.ba-footer__stf-main {
position: absolute;
left: 0;
top: 0;
width: 67.7px;
height: 21.7px;
}
.ba-footer__stf-mark {
position: absolute;
left: 69.6px;
top: 0.4px;
width: 19.4px;
height: 21px;
background: var(--ba-ink-hover);
display: flex;
justify-content: center;
align-items: center;
}
.ba-footer__stf-mark img {
width: 16.8px;
height: 18.8px;
}
.ba-footer__stf-caption {
position: absolute;
left: 0;
top: 24.3px;
width: 89px;
height: 4.9px;
overflow: hidden;
font-size: 4px;
letter-spacing: 0.06em;
color: var(--ba-ink-hover);
font-weight: 700;
white-space: nowrap;
}
.ba-footer__legal {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-self: stretch;
gap: 24px;
}
.ba-footer__copy {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px 20px;
align-items: center;
}
.ba-footer__legal small {
font-size: 14px;
line-height: 1.5;
color: var(--ba-white);
white-space: nowrap;
}
.ba-footer__policies {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
}
.ba-footer__policies a {
font-size: 14px;
line-height: 1.5;
color: var(--ba-white);
text-decoration: underline;
text-underline-offset: 2px;
}
.ba-footer__policies a:hover,
.ba-footer__policies a:focus-visible {
color: var(--ba-mint);
}
.ba-footer__social {
display: flex;
flex-direction: row;
gap: 12px;
align-items: center;
}
.ba-footer__social img {
width: 24px;
height: 24px;
display: block;
}
.ba-footer__social a[aria-label="Tripadvisor"] img {
width: 24px;
height: 24px;
border-radius: 12px;
object-fit: cover;
}
@media (max-width: 1100px) {
.ba-nav {
padding: 5px 0;
}
.ba-nav__inner {
width: 100%;
max-width: calc(100% - (var(--ba-chrome-inset) * 2));
height: 56px;
gap: 0;
}
.ba-nav__logo img {
width: 183px;
height: 37px;
}
.ba-nav__menus,
.ba-nav__mega {
display: none !important;
}
.ba-nav__burger {
display: flex;
}
.ba-nav.is-drawer-open .ba-nav__drawer {
display: flex;
}
.ba-nav__drawer {
position: fixed;
inset: 0;
z-index: 80;
background: var(--ba-white);
flex-direction: column;
overflow: auto;
}
.ba-nav__drawer-bar,
.ba-nav__panel {
width: 100%;
max-width: none;
padding-inline: 20px;
box-sizing: border-box;
}
.ba-nav__drawer-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin: 5px 0 0;
height: 56px;
border-bottom: 1px solid #aaa;
}
.ba-nav.is-drawer-root .ba-nav__back { display: none; }
.ba-nav:not(.is-drawer-root) .ba-nav__logo--drawer { display: none; }
.ba-nav__drawer-spacer { flex: 1; }
.ba-nav__back,
.ba-nav__close {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
color: var(--ba-black);
font-family: var(--ba-body);
font-size: 14px;
font-weight: 600;
line-height: 1;
}
.ba-nav__close {
width: 40px;
flex-shrink: 0;
}
.ba-nav__back img,
.ba-nav__close img {
display: block;
width: 40px;
height: 40px;
flex-shrink: 0;
}
.ba-nav__panel {
margin: 24px 0 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 32px;
}
.ba-nav__panel[hidden] { display: none; }
.ba-nav__m-chip {
align-self: flex-start;
margin: 0;
}
.ba-nav__m-pri,
.ba-nav__m-list {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 32px;
width: 100%;
}
.ba-nav__m-link,
.ba-nav__m-list > a,
.ba-nav__m-list > button {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 0;
border: 0;
background: none;
cursor: pointer;
text-align: left;
font-family: var(--ba-display);
font-size: 24px;
line-height: 1.15;
text-transform: uppercase;
color: var(--ba-black);
text-decoration: none;
}
.ba-nav__m-link span {
flex: 1;
min-width: 0;
text-align: left;
overflow-wrap: break-word;
}
.ba-nav__m-book {
width: 100%;
}
.ba-nav__m-sec {
margin: 0 -20px;
padding: 28px 20px 40px;
background: rgba(238, 238, 238, 0.5);
text-align: left;
align-self: stretch;
}
.ba-nav__m-sec ul {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
font-size: 14px;
line-height: 1.5;
text-align: left;
}
.ba-nav .ba-nav__drawer .ba-nav__m-sec a {
display: block;
width: 100%;
text-align: left;
color: var(--ba-ink);
}
.ba-nav__m-tours {
gap: 16px;
}
.ba-nav__drawer .ba-card--nav {
flex-direction: row;
align-items: stretch;
min-height: 0;
height: auto;
width: 100%;
color: var(--ba-ink);
background: var(--ba-white);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}
.ba-nav__drawer .ba-card--nav .ba-card__media {
width: 112px;
min-height: 112px;
height: auto;
padding: 0;
flex-shrink: 0;
align-self: stretch;
}
.ba-nav__drawer .ba-card--nav .ba-card__badges,
.ba-nav__drawer .ba-card--nav .ba-chip,
.ba-nav__drawer .ba-card--nav .ba-rule,
.ba-nav__drawer .ba-card--nav .ba-card__excerpt {
display: none;
}
.ba-nav__drawer .ba-card--nav .ba-card__body {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto;
grid-template-areas:
"title"
"price"
"book";
align-items: end;
column-gap: 8px;
row-gap: 10px;
min-height: 112px;
min-width: 0;
height: auto;
flex: 1;
padding: 8px 10px 10px;
box-sizing: border-box;
justify-content: unset;
}
.ba-nav__drawer .ba-card--nav .ba-card__stack {
display: contents;
}
.ba-nav__drawer .ba-card--nav .ba-card__copy {
grid-area: title;
align-self: start;
min-width: 0;
gap: 0;
}
.ba-nav__drawer .ba-card--nav .ba-card__meta {
grid-area: price;
width: auto;
min-width: 0;
justify-content: flex-start;
align-items: center;
align-self: end;
}
.ba-nav__drawer .ba-card--nav .ba-card__title,
.ba-nav__drawer .ba-card--nav .ba-card__title a {
color: var(--ba-ink);
}
.ba-nav__drawer .ba-card--nav .ba-card__title {
display: block;
margin: 0;
font-size: 18px;
line-height: 1.2;
letter-spacing: 0;
white-space: normal;
overflow: visible;
overflow-wrap: break-word;
text-overflow: unset;
-webkit-line-clamp: unset;
line-clamp: unset;
}
.ba-nav__drawer .ba-card--nav .ba-price {
font-size: 16px;
line-height: 1.2;
color: var(--ba-black);
white-space: nowrap;
}
.ba-nav__drawer .ba-card--nav .ba-btn {
grid-area: book;
justify-self: start;
align-self: end;
height: 36px;
padding: 0 8px;
font-size: 14px;
margin-top: 0;
min-width: 0;
}
.ba-hero .ba-nav {
top: 0;
}
body.is-nav-open { overflow: hidden; }
}
@media (max-width: 800px) {
.ba-hero {
height: auto;
min-height: 70vh;
padding: 120px 24px 48px;
flex-direction: column;
}
.ba-hero__content {
width: 100%;
max-width: none;
}
.ba-hero h1,
.ba-hero__lede {
width: 100%;
}
.ba-hero__ratings {
flex-direction: column;
}
.ba-h36 {
height: auto;
flex-direction: column;
}
.ba-h36__copy {
padding: 48px 24px;
}
.ba-h36__media {
height: 280px;
width: 100%;
}
.ba-page-hero {
padding: 24px var(--ba-chrome-inset) 0;
}
.ba-page-hero__frame {
height: auto;
min-height: 220px;
}
.ba-bph {
padding: 32px 24px;
}
.ba-bph__row {
flex-direction: column;
}
.ba-bph__copy,
.ba-bph__head,
.ba-bph h1,
.ba-bph__media {
width: 100%;
height: auto;
}
.ba-foot-cta {
position: relative;
left: auto;
transform: none;
width: 100%;
height: auto;
flex-direction: column;
}
.ba-foot-cta__media {
min-height: 180px;
width: 100%;
}
.ba-foot-cta__copy {
padding: 32px 24px;
}
.ba-footer {
margin-top: 0;
padding: 48px 24px;
}
.ba-footer__inner {
margin-top: 0;
gap: 48px;
}
.ba-footer__cols {
flex-direction: column;
}
.ba-footer__brands,
.ba-footer__legal {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.ba-footer__legal small {
white-space: normal;
}
.ba-footer__mark {
display: none;
}
}
/* partials/content.css */
.ba-phead {
width: min(100%, 1440px);
margin-inline: auto;
padding: 40px var(--ba-page-pad) 32px;
background: var(--ba-white);
box-sizing: border-box;
}
.ba-phead__inner {
width: min(100%, 1093px);
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
}
.ba-phead__headline {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.ba-phead h1 {
margin: 0;
font-size: var(--ba-text-h1);
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--ba-black);
align-self: stretch;
}
.ba-tour-single .ba-chip {
background: var(--ba-white);
border: 1px solid var(--ba-ink);
}
.ba-bc {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0;
font-family: var(--ba-display);
font-size: var(--ba-text-ui);
line-height: 1.5;
color: var(--ba-black);
}
.ba-bc a:hover { color: var(--ba-ink); opacity: 1; }
.ba-phead__meta {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 24px;
align-items: center;
margin: 0;
}
.ba-phead__rating {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
}
.ba-phead__rating-copy {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.ba-phead__rating-row {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
}
.ba-phead__score {
font-weight: 600;
font-size: 16px;
line-height: 1.5;
color: var(--ba-black);
}
.ba-phead__dots {
display: flex;
flex-direction: row;
gap: 2px;
align-items: center;
}
.ba-phead__dots img {
width: 18px;
height: 18px;
display: block;
}
.ba-phead__reviews {
font-size: var(--ba-text-xs);
line-height: 1.5;
color: var(--ba-muted);
}
.ba-gallery {
position: relative;
background: var(--ba-white);
}
.ba-gallery__mosaic {
width: min(100%, 1440px);
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: minmax(260px, 1fr) minmax(260px, 1fr);
gap: 15px;
padding: 15px var(--ba-page-pad);
min-height: 551px;
box-sizing: border-box;
align-items: stretch;
}
.ba-gallery__mosaic > .ba-gallery__hero {
grid-column: 1;
grid-row: 1 / 3;
min-height: 536px;
}
.ba-gallery__tile {
min-width: 0;
min-height: 0;
position: relative;
overflow: hidden;
background: var(--ba-ink);
}
.ba-gallery__tile img,
.ba-gallery__hero img,
.ba-gallery__video img:first-child {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
display: block;
}
.ba-gallery__tile--video {
background: var(--ba-ink);
}
.ba-gallery__video {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
cursor: pointer;
background: var(--ba-ink);
position: relative;
}
.ba-play {
position: absolute;
inset: 50% auto auto 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--ba-forest);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 10px rgba(0, 0, 0, 0.35);
pointer-events: none;
}
.ba-play::after {
content: "";
position: absolute;
left: 55%;
top: 50%;
transform: translate(-40%, -50%);
border-style: solid;
border-width: 7px 0 7px 12px;
border-color: transparent transparent transparent var(--ba-white);
}
.ba-gallery__video:hover .ba-play,
.ba-gallery__video:focus-visible .ba-play {
background: var(--ba-mint);
}
.ba-gallery__video:hover .ba-play::after,
.ba-gallery__video:focus-visible .ba-play::after {
border-color: transparent transparent transparent var(--ba-ink);
}
.ba-gallery__tile--video iframe,
.ba-gallery__iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.ba-gallery--video-only .ba-gallery__mosaic {
grid-template-columns: 1fr;
grid-template-rows: minmax(260px, 70vh);
min-height: 0;
}
.ba-gallery--video-only .ba-gallery__mosaic > .ba-gallery__hero {
grid-column: 1;
grid-row: 1;
}
.ba-videos {
background: var(--ba-white);
}
.ba-videos__inner {
width: min(100%, 1440px);
margin-inline: auto;
padding: var(--ba-space) var(--ba-page-pad);
display: flex;
flex-direction: column;
gap: 32px;
box-sizing: border-box;
}
.ba-videos__head h2 {
margin: 0;
text-align: center;
font-size: var(--ba-text-h4);
letter-spacing: -0.02em;
}
.ba-videos__head a {
color: var(--ba-ink);
}
.ba-videos__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
list-style: none;
margin: 0;
padding: 0;
}
.ba-videos__grid > li {
aspect-ratio: 16 / 9;
min-width: 0;
overflow: hidden;
background: var(--ba-ink);
}
.ba-videos__grid .ba-gallery__video {
height: 100%;
}
.ba-video-lb {
position: fixed;
inset: 0;
width: min(880px, calc(100vw - 40px));
height: fit-content;
max-height: calc(100dvh - 40px);
margin: auto;
border: 0;
padding: 0;
background: transparent;
overflow: visible;
color: var(--ba-white);
}
.ba-video-lb::backdrop {
background: rgba(23, 36, 45, 0.92);
}
.ba-video-lb__panel {
position: relative;
background: var(--ba-ink);
padding: 28px 24px 20px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
border-top: 3px solid var(--ba-forest);
}
.ba-video-lb__close {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background: var(--ba-white);
cursor: pointer;
display: grid;
place-items: center;
}
.ba-video-lb__kicker {
margin: 0 40px 6px 0;
font-family: var(--ba-display);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ba-mint);
}
.ba-video-lb__title {
margin: 0 40px 16px 0;
font-family: var(--ba-display);
font-size: clamp(18px, 1.1rem + 0.4vw, 26px);
line-height: 1.15;
letter-spacing: 0;
text-transform: uppercase;
color: var(--ba-white);
}
.ba-video-lb__stage {
position: relative;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
}
.ba-video-lb__stage iframe,
#ba-video-lb-host {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.ba-video-lb__stage iframe {
top: 50%;
left: 50%;
width: 100%;
height: calc(100% + 136px);
transform: translate(-50%, -50%);
pointer-events: none;
}
.ba-video-lb__veil {
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 48px 28px -24px var(--ba-ink), inset 0 -56px 32px -24px var(--ba-ink);
}
.ba-video-lb__bar {
display: flex;
gap: 10px;
align-items: center;
margin-top: 16px;
}
.ba-video-lb__ctrl {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 16px 0 8px;
border: 1px solid rgba(197, 232, 232, 0.28);
border-radius: var(--ba-radius);
background: transparent;
color: var(--ba-white);
font-family: var(--ba-display);
font-size: 12px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
}
.ba-video-lb__ico {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--ba-forest);
position: relative;
flex-shrink: 0;
}
.ba-video-lb__ico::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent var(--ba-white);
transform: translateX(1px);
}
.ba-video-lb__ctrl[data-yt-play][aria-pressed="true"] .ba-video-lb__ico::after {
width: 8px;
height: 12px;
border: 0;
border-left: 3px solid var(--ba-white);
border-right: 3px solid var(--ba-white);
transform: none;
background: transparent;
}
.ba-video-lb__ico--mute::after {
width: 10px;
height: 10px;
border: 0;
border-radius: 2px;
background: var(--ba-white);
transform: none;
}
.ba-video-lb__ctrl:hover {
border-color: var(--ba-mint);
color: var(--ba-mint);
}
.ba-video-lb__ctrl:hover .ba-video-lb__ico {
background: var(--ba-mint);
}
.ba-video-lb__ctrl:hover .ba-video-lb__ico::after {
border-color: transparent transparent transparent var(--ba-ink);
}
.ba-video-lb__ctrl[data-yt-play][aria-pressed="true"]:hover .ba-video-lb__ico::after {
border-color: var(--ba-ink);
background: transparent;
}
.ba-video-lb__ctrl:hover .ba-video-lb__ico--mute::after {
background: var(--ba-ink);
border-color: transparent;
}
.ba-video-lb__brand {
margin-left: auto;
width: 32px;
height: 32px;
object-fit: contain;
opacity: 0.9;
}
.ba-video-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
padding: 28px 16px 12px;
background: linear-gradient(180deg, transparent, rgba(23, 36, 45, 0.88));
color: var(--ba-white);
font-family: var(--ba-display);
font-size: 13px;
line-height: 1.3;
letter-spacing: 0.02em;
text-transform: uppercase;
text-align: left;
}
.ba-details__story {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
margin-top: 48px;
}
.ba-details__watch {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--ba-ink);
}
.ba-details__watch .ba-gallery__video {
min-height: 0;
}
.ba-details__starts {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
box-sizing: border-box;
}
.ba-details__starts .ba-details__dt {
color: #aaa;
}
.ba-details__starts ul {
margin: 0;
padding-left: 18px;
color: var(--ba-white);
font-size: var(--ba-text-sm);
line-height: 1.5;
}
.ba-details__starts li {
margin: 0 0 4px;
}
.ba-gallery__tile--more {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
padding: 24px;
box-sizing: border-box;
}
.ba-gallery__tile--more > img {
position: absolute;
inset: 0;
z-index: 0;
}
.ba-gallery__all {
position: relative;
z-index: 1;
display: flex;
height: 34px;
border: 0;
border-radius: var(--ba-radius);
background: rgba(23, 36, 45, 0.7);
padding: 0 24px;
justify-content: center;
align-items: center;
gap: 8px;
cursor: pointer;
white-space: nowrap;
color: var(--ba-white);
font-family: var(--ba-display);
font-size: var(--ba-text-sm);
line-height: 1.4;
text-transform: uppercase;
}
.ba-gallery__all:hover { background: rgba(23, 36, 45, 0.9); opacity: 1; }
.ba-gallery__all img {
width: 15px;
height: 15px;
filter: brightness(0) invert(1);
object-fit: contain;
}
.ba-gallery__pop {
width: min(1100px, 100vw);
height: min(90vh, 900px);
border: 0;
padding: 48px 24px 24px;
background: var(--ba-ink);
overflow: auto;
}
.ba-gallery__pop::backdrop { background: rgba(23, 36, 45, 0.7); }
.ba-gallery__pop-close {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: var(--ba-white);
cursor: pointer;
display: grid;
place-items: center;
}
.ba-gallery__pop-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: 12px;
}
.ba-gallery__pop-grid li {
min-width: 0;
}
.ba-gallery__pop-grid > .ba-gallery__tile--video {
grid-column: 1 / -1;
aspect-ratio: 16 / 9;
min-height: 220px;
}
.ba-gallery__pop-grid img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
.ba-tour-body {
width: min(100%, 1440px);
margin-inline: auto;
padding: 64px var(--ba-page-pad) 88px;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 32px;
box-sizing: border-box;
background: var(--ba-white);
}
.ba-tour-body > .ba-details {
flex: 1 1 728px;
max-width: 728px;
padding: 0;
align-items: flex-start;
}
.ba-tour-body > .ba-details .ba-details__col {
width: 100%;
margin-inline: 0;
}
.ba-bookside {
flex: 0 0 552px;
width: 552px;
max-width: 100%;
position: sticky;
top: 24px;
align-self: flex-start;
}
.ba-bookside__frame {
display: block;
width: 100%;
height: 1304px;
border: 0;
background: var(--ba-white);
}
.ba-bookside__card {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
padding: 32px;
background: var(--ba-white);
box-shadow: 0 8px 32px rgba(23, 36, 45, 0.12);
box-sizing: border-box;
}
.ba-bookside__card h2 {
margin: 0;
font-size: var(--ba-text-h4);
line-height: 1;
text-transform: uppercase;
}
.ba-bookside__card p {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
}
.ba-details {
display: flex;
flex-direction: column;
gap: 48px;
padding: 88px 0;
align-items: center;
background: var(--ba-white);
}
.ba-details__col {
width: min(100% - 2rem, var(--ba-narrow));
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.ba-details__stack {
display: flex;
flex-direction: column;
gap: 15px;
align-items: flex-start;
align-self: stretch;
}
.ba-details__bar {
background: var(--ba-ink);
display: flex;
flex-direction: column;
gap: 24px;
padding: 40px 32px;
align-items: flex-start;
align-self: stretch;
box-sizing: border-box;
}
.ba-details__facts {
display: flex;
flex-direction: row;
gap: 46px;
align-items: flex-start;
flex-wrap: wrap;
}
.ba-details__fact {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.ba-details__fact-label {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
font-family: var(--ba-display);
font-size: var(--ba-text-ui);
line-height: 1;
color: var(--ba-white);
text-transform: uppercase;
white-space: nowrap;
}
.ba-details__ico {
width: 22px;
height: 22px;
display: block;
flex-shrink: 0;
}
.ba-details__fact-val {
font-weight: 400;
font-size: var(--ba-text-sm);
line-height: 1.5;
color: var(--ba-white);
}
.ba-details__fact-val b { font-weight: 700; }
.ba-details__more {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--ba-display);
font-size: var(--ba-text-ui);
line-height: 1.4;
text-transform: uppercase;
color: var(--ba-mint);
white-space: nowrap;
}
.ba-details__more:hover { opacity: 0.8; }
.ba-details__more .ba-btn__arrow {
width: 16px;
height: 16px;
}
.ba-level {
display: flex;
flex-direction: row;
gap: 4px;
align-items: center;
width: 118px;
height: 22px;
}
.ba-level img {
width: 22px;
height: 22px;
display: block;
object-fit: contain;
}
.ba-details__why {
background: var(--ba-mint);
display: flex;
flex-direction: column;
gap: 24px;
padding: 32px;
align-items: flex-start;
align-self: stretch;
box-sizing: border-box;
}
.ba-details__why-head,
.ba-details__info-head {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
align-self: stretch;
}
.ba-details__why-head img,
.ba-details__info-head img {
width: 35px;
height: 35px;
display: block;
flex-shrink: 0;
}
.ba-details__why-head h2,
.ba-details__info-head h2 {
margin: 0;
font-size: var(--ba-text-h4);
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--ba-black);
white-space: nowrap;
}
.ba-details__info-head h2 { color: var(--ba-white); }
.ba-details__why-body {
margin: 0;
max-width: 553px;
padding-left: 24px;
font-weight: 400;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
}
.ba-details__why-body li { margin: 0; }
.ba-details__why-body b,
.ba-details__why-body strong { font-weight: 700; }
.ba-details__h {
margin: 0;
padding: 16px 0;
font-size: var(--ba-text-h5);
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--ba-black);
align-self: stretch;
}
.ba-details__prose {
align-self: stretch;
}
.ba-details__prose h2 {
margin: 0;
padding: 40px 0 24px;
font-size: var(--ba-text-h4);
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--ba-black);
}
.ba-details__prose:not(.ba-details__expect) > p:first-of-type {
font-weight: 700;
padding: 0 0 16px;
}
.ba-details__prose p,
.ba-details__expect p {
margin: 0;
padding: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
}
.ba-details__expect {
padding-bottom: 64px;
}
.ba-details__info {
background: var(--ba-ink);
display: flex;
flex-direction: column;
gap: 24px;
padding: 40px 32px;
align-items: flex-start;
align-self: stretch;
box-sizing: border-box;
}
.ba-details__grid {
display: flex;
flex-direction: row;
gap: 46px;
align-items: flex-start;
align-self: stretch;
}
.ba-details__col3 {
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
align-items: flex-start;
flex: 1 1 0;
min-width: 0;
}
.ba-details__dl {
display: flex;
flex-direction: column;
gap: 4px;
}
.ba-details__dt {
font-weight: 600;
font-size: var(--ba-text-xs);
line-height: 1.5;
color: #aaa;
}
.ba-details__dd {
font-weight: 400;
font-size: var(--ba-text-sm);
line-height: 1.5;
color: var(--ba-white);
white-space: pre-line;
overflow-wrap: anywhere;
}
.ba-details__dd b { font-weight: 700; }
.ba-details__dd--regular { font-weight: 400; }
.ba-details__inc {
margin: 0;
padding-left: 21px;
font-weight: 400;
font-size: var(--ba-text-sm);
line-height: 1.5;
color: var(--ba-white);
}
.ba-details__inc li { margin: 0; }
.ba-details__info .ba-details__more {
font-size: 16px;
line-height: 1.5;
}
.ba-faq {
overflow: hidden;
background: var(--ba-white);
display: flex;
flex-direction: column;
align-items: center;
padding: var(--ba-space) var(--ba-page-pad);
box-sizing: border-box;
font-family: var(--ba-body);
}
.ba-faq__inner {
width: 100%;
display: flex;
flex-direction: row;
gap: 80px;
align-items: flex-start;
}
.ba-faq--centered .ba-faq__inner {
max-width: 720px;
flex-direction: column;
gap: 40px;
align-items: center;
}
.ba-faq__intro {
width: 380px;
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
flex-shrink: 0;
}
.ba-faq h2 {
margin: 0;
font-family: var(--ba-display);
font-weight: 400;
font-size: var(--ba-text-h2);
line-height: 1;
letter-spacing: -0.03em;
color: var(--ba-black);
text-transform: uppercase;
white-space: pre-line;
}
.ba-faq--centered h2 {
white-space: normal;
align-self: stretch;
}
.ba-faq__intro p {
margin: 0;
font-family: var(--ba-body);
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
align-self: stretch;
}
.ba-faq__list {
display: flex;
flex-direction: column;
gap: 32px;
justify-content: center;
align-items: flex-start;
flex: 1 1 0;
min-width: 0;
align-self: stretch;
}
.ba-faq__list > li {
align-self: stretch;
width: 100%;
min-width: 0;
}
.ba-faq__item {
background: var(--ba-chip-bg);
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px 32px;
align-items: flex-start;
box-sizing: border-box;
align-self: stretch;
}
.ba-faq__item[open] {
padding: 32px;
}
.ba-faq__q {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-self: stretch;
gap: 16px;
background: none;
border: none;
padding: 0;
cursor: pointer;
list-style: none;
font-family: var(--ba-display);
font-weight: 400;
font-size: var(--ba-text-h5);
line-height: 1;
color: var(--ba-black);
text-transform: uppercase;
}
.ba-faq__q::-webkit-details-marker,
.ba-faq__q::marker { display: none; }
.ba-faq__q h3,
.ba-faq__q h4 {
margin: 0;
min-width: 0;
font: inherit;
color: inherit;
text-transform: inherit;
}
.ba-faq__icon {
width: 41px;
height: 41px;
flex-shrink: 0;
display: block;
}
.ba-faq__item[open] .ba-faq__icon--plus,
.ba-faq__item:not([open]) .ba-faq__icon--minus { display: none; }
.ba-faq__a {
margin: 0;
max-width: 667px;
font-family: var(--ba-body);
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
}
.ba-faq__a p {
margin: 0 0 0.75em;
}
.ba-faq__a p:last-child { margin-bottom: 0; }
.ba-faq--centered .ba-faq__a {
max-width: 568px;
align-self: flex-start;
}
.ba-cisplit {
display: flex;
flex-direction: column;
gap: 4px;
padding: 44px 16px;
align-items: center;
box-sizing: border-box;
background: var(--ba-white);
}
.ba-cisplit__inner {
width: 100%;
max-width: 1408px;
min-height: 522px;
display: flex;
flex-direction: row;
gap: 15px;
align-items: center;
}
.ba-cisplit__inner--image-left { flex-direction: row-reverse; }
.ba-cisplit__copy {
display: flex;
flex-direction: column;
gap: 24px;
padding: 32px 32px 56px;
justify-content: flex-end;
align-items: center;
box-sizing: border-box;
flex: 1 1 50%;
min-width: 0;
align-self: stretch;
}
.ba-cisplit__stack {
max-width: 560px;
display: flex;
flex-direction: column;
gap: 32px;
align-items: flex-start;
align-self: stretch;
}
.ba-cisplit__text {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
align-self: stretch;
}
.ba-cisplit h2 {
margin: 0;
font-size: var(--ba-text-h2);
line-height: 1;
letter-spacing: -0.03em;
color: var(--ba-black);
text-transform: uppercase;
align-self: stretch;
}
.ba-cisplit .ba-rule {
width: 100%;
height: 5px;
align-self: stretch;
}
.ba-cisplit p {
margin: 0;
font-size: 18px;
line-height: 1.5;
color: var(--ba-black);
align-self: stretch;
}
.ba-cisplit__media {
height: 522px;
background: var(--ba-ink) center / cover no-repeat;
flex: 1 1 50%;
min-width: 0;
}
.ba-trow {
display: flex;
flex-direction: column;
gap: 4px;
padding: 88px 0;
align-items: center;
box-sizing: border-box;
background: var(--ba-white);
}
.ba-trow__inner {
display: flex;
flex-direction: row;
gap: 80px;
align-items: flex-start;
}
.ba-trow__heading,
.ba-trow__copy {
overflow: hidden;
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
flex: 1 1 0;
min-width: 0;
}
.ba-trow h2 {
margin: 0;
font-size: var(--ba-text-h3);
line-height: 1;
letter-spacing: 0;
color: var(--ba-black);
text-transform: uppercase;
align-self: stretch;
}
.ba-trow p {
margin: 0;
font-size: 18px;
line-height: 1.5;
color: var(--ba-black);
align-self: stretch;
}
.ba-tourgrid {
padding: var(--ba-space) 0;
background: var(--ba-white);
}
.ba-tourgrid__inner {
display: flex;
flex-direction: column;
gap: 40px;
}
.ba-tourgrid h2 {
margin: 0;
font-size: var(--ba-text-h2);
letter-spacing: -0.03em;
color: var(--ba-black);
}
@media (max-width: 1100px) {
.ba-tour-body {
flex-direction: column;
padding: 48px var(--ba-page-pad);
gap: 32px;
}
.ba-tour-body > .ba-details {
max-width: none;
flex-basis: auto;
}
.ba-bookside {
flex: none;
width: 100%;
position: static;
}
.ba-bookside__frame { height: 960px; }
}
@media (max-width: 800px) {
.ba-phead { padding: 32px var(--ba-page-pad) 24px; }
.ba-phead__meta { gap: 16px; }
.ba-gallery__mosaic {
grid-template-columns: 1fr 1fr;
grid-template-rows: 240px 140px 140px;
min-height: 0;
}
.ba-gallery__mosaic > .ba-gallery__hero {
grid-column: 1 / -1;
grid-row: 1;
min-height: 240px;
height: 240px;
}
.ba-gallery--video-only .ba-gallery__mosaic {
grid-template-rows: 240px;
}
.ba-gallery--video-only .ba-gallery__mosaic > .ba-gallery__hero {
height: 240px;
min-height: 240px;
}
.ba-videos__grid {
grid-template-columns: 1fr;
}
.ba-details { padding: 48px 0; gap: 32px; }
.ba-details__facts,
.ba-details__grid { flex-direction: column; gap: 24px; }
.ba-details__why-head h2,
.ba-details__info-head h2 { white-space: normal; }
.ba-faq__inner,
.ba-faq--centered .ba-faq__inner {
flex-direction: column;
gap: 32px;
}
.ba-faq__intro { width: 100%; }
.ba-faq__q { white-space: normal; }
.ba-cisplit__inner,
.ba-cisplit__inner--image-left {
flex-direction: column;
min-height: 0;
}
.ba-cisplit__media { width: 100%; height: 280px; }
.ba-cisplit__copy { padding: 24px 8px 32px; }
.ba-trow { padding: 48px 0; }
.ba-trow__inner { flex-direction: column; gap: 32px; }
}
.ba-ig {
overflow: hidden;
padding: 88px var(--ba-page-pad);
background: var(--ba-white);
display: flex;
justify-content: center;
}
.ba-ig__inner {
width: min(100%, var(--ba-wrap));
display: flex;
flex-direction: column;
gap: 32px;
}
.ba-ig__head {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
max-width: min(720px, 100%);
}
.ba-ig__head h2 {
margin: 0;
letter-spacing: -0.03em;
color: var(--ba-black);
}
.ba-ig__head p {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
}
.ba-ig__profile {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--ba-body);
font-size: var(--ba-text-body);
color: var(--ba-black);
}
.ba-ig__profile img {
display: block;
flex-shrink: 0;
filter: invert(1);
}
.ba-ig__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin: 0;
padding: 0;
}
.ba-ig__grid > li {
display: flex;
min-width: 0;
}
.ba-ig__tile {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: rgba(238, 238, 238, 0.5);
}
.ba-ig__tile img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ba-ig__tile:focus-visible {
outline: 3px solid var(--ba-ink, #17242D);
outline-offset: 3px;
}
.ba-ig__type,
.ba-ig__meta {
position: absolute;
color: #fff;
pointer-events: none;
}
.ba-ig__type {
top: 12px;
right: 12px;
display: flex;
padding: 6px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.45);
}
.ba-ig__meta {
inset: auto 0 0;
display: flex;
align-items: center;
gap: 18px;
padding: 40px 14px 14px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
font-family: var(--ba-body);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.ba-ig__stat {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ba-ig__type svg,
.ba-ig__meta svg {
width: 20px;
height: 20px;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.ba-ig__brand {
margin-left: auto;
}
@media (max-width: 800px) {
.ba-ig {
padding: 56px var(--ba-page-pad);
}
.ba-ig__inner {
gap: 24px;
}
.ba-ig__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.ba-ig__meta {
gap: 12px;
padding: 32px 10px 10px;
font-size: 12px;
}
.ba-ig__meta svg {
width: 16px;
height: 16px;
}
.ba-ig__type {
top: 8px;
right: 8px;
padding: 4px;
}
}
.ba-pillars {
overflow: hidden;
padding: 88px var(--ba-page-pad);
background: var(--ba-white);
display: flex;
justify-content: center;
}
.ba-pillars__inner {
width: min(100%, var(--ba-wrap));
display: flex;
flex-direction: column;
gap: 40px;
}
.ba-pillars__intro {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
max-width: 720px;
}
.ba-pillars__intro h2 {
margin: 0;
letter-spacing: -0.03em;
color: var(--ba-black);
}
.ba-pillars__intro p {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
}
.ba-pillars__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
align-items: stretch;
margin: 0;
padding: 0;
}
.ba-pillars__grid > li {
display: flex;
min-width: 0;
}
.ba-pillars__card {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
min-width: 0;
padding: 32px;
box-sizing: border-box;
background: rgba(238, 238, 238, 0.5);
}
.ba-pillars__card h3 {
margin: 0;
font-size: var(--ba-text-h5);
letter-spacing: 0;
line-height: 1.2;
color: var(--ba-black);
}
.ba-pillars__list {
margin: 0;
padding-left: 1.15em;
display: flex;
flex-direction: column;
gap: 8px;
font-family: var(--ba-body);
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
}
.ba-pillars__card p {
margin: 0;
font-family: var(--ba-body);
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
}
@media (max-width: 800px) {
.ba-pillars {
padding: 56px var(--ba-page-pad);
}
.ba-pillars__inner {
gap: 28px;
}
.ba-pillars__grid {
grid-template-columns: 1fr;
gap: 20px;
}
.ba-pillars__card {
padding: 24px;
}
}
.ba-team {
padding: var(--ba-space) var(--ba-page-pad);
background: var(--ba-white);
box-sizing: border-box;
}
.ba-team__inner {
width: min(100%, var(--ba-wrap));
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 64px;
}
.ba-team__intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 80px;
align-items: start;
}
.ba-team__title {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
min-width: 0;
}
.ba-team__title h2 {
margin: 0;
width: 100%;
font-size: var(--ba-text-h2);
letter-spacing: -0.03em;
color: var(--ba-black);
}
.ba-team__intro > p {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
min-width: 0;
}
.ba-team__list {
display: flex;
flex-direction: column;
gap: 32px;
}
.ba-team__person {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 40px;
align-items: start;
padding: 40px;
background: var(--ba-chip-bg);
scroll-margin-top: 96px;
box-sizing: border-box;
}
.ba-team__photo {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 22%;
}
.ba-team__copy {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.ba-team__id {
display: flex;
flex-direction: column;
gap: 8px;
}
.ba-team__name {
margin: 0;
font-family: var(--ba-display);
font-size: var(--ba-text-h4);
line-height: 1;
color: var(--ba-black);
text-transform: uppercase;
}
.ba-team__role {
margin: 0;
font-size: 18px;
line-height: 1.5;
color: var(--ba-black);
}
.ba-team__bio p {
margin: 0 0 1em;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
}
.ba-team__bio p:last-child { margin-bottom: 0; }
.ba-team__quote {
margin: 0;
}
.ba-team__quote p {
margin: 0;
font-family: var(--ba-display);
font-size: var(--ba-text-h4);
line-height: 1.2;
color: var(--ba-black);
}
.ba-team__faq {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.ba-team__faq .ba-faq__a p {
margin: 0 0 0.75em;
}
.ba-team__faq .ba-faq__a p:last-child { margin-bottom: 0; }
@media (max-width: 800px) {
.ba-team { padding: 48px 24px; }
.ba-team__inner { gap: 40px; }
.ba-team__intro {
grid-template-columns: 1fr;
gap: 24px;
}
.ba-team__person {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
padding: 32px 24px;
gap: 24px;
}
.ba-team__copy { align-items: center; }
.ba-team__id { align-items: center; }
.ba-team__faq { text-align: left; align-self: stretch; }
}
.ba-offices,
.ba-contact-form {
padding: var(--ba-space) var(--ba-page-pad);
background: var(--ba-white);
box-sizing: border-box;
}
.ba-offices__inner,
.ba-contact-form__inner {
width: min(100%, var(--ba-wrap));
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 48px;
}
.ba-offices__intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 80px;
align-items: start;
}
.ba-offices__title,
.ba-contact-form__intro {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
min-width: 0;
}
.ba-offices__title h2,
.ba-contact-form__intro h2 {
margin: 0;
width: 100%;
font-size: var(--ba-text-h2);
letter-spacing: -0.03em;
color: var(--ba-black);
}
.ba-offices__intro > p,
.ba-contact-form__fallback {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
}
.ba-offices__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.ba-offices__card {
background: var(--ba-chip-bg);
padding: 40px;
display: flex;
flex-direction: column;
gap: 24px;
box-sizing: border-box;
}
.ba-offices__card h3 {
margin: 0;
font-family: var(--ba-display);
font-size: var(--ba-text-h4);
line-height: 1;
text-transform: uppercase;
color: var(--ba-black);
}
.ba-offices__meta {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
}
.ba-offices__meta li {
display: flex;
flex-direction: column;
gap: 4px;
}
.ba-offices__meta span {
font-size: 14px;
line-height: 1.4;
color: var(--ba-ink);
}
.ba-offices__meta a {
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
text-decoration: underline;
text-underline-offset: 3px;
}
.ba-contact-form__gform {
width: min(100%, 720px);
}
.ba-contact-layout {
width: min(100% - 2 * var(--ba-page-pad), var(--ba-wrap));
margin-inline: auto;
background: var(--ba-chip-bg);
box-sizing: border-box;
}
.ba-contact-layout .ba-offices,
.ba-contact-layout .ba-contact-form {
background: transparent;
padding-inline: 0;
}
.ba-contact-layout .ba-offices__card {
background: var(--ba-white);
}
.ba-contact-layout .ba-offices__intro {
grid-template-columns: 1fr;
gap: 16px;
}
.ba-contact-layout .ba-offices__grid {
grid-template-columns: 1fr;
}
.ba-contact-layout .ba-contact-form {
background: var(--ba-mint);
}
.ba-contact-layout .ba-offices__inner,
.ba-contact-layout .ba-contact-form__inner {
width: 100%;
max-width: none;
margin-inline: 0;
}
.ba-contact-layout .ba-contact-form__gform {
width: 100%;
}
@media (min-width: 901px) {
.ba-contact-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
}
.ba-contact-layout .ba-offices {
padding: var(--ba-space) 40px var(--ba-space) 0;
}
.ba-contact-layout .ba-contact-form {
padding: var(--ba-space) 0 var(--ba-space) 40px;
}
.ba-contact-layout .ba-offices__inner,
.ba-contact-layout .ba-contact-form__inner {
gap: 32px;
}
}
@media (max-width: 800px) {
.ba-offices,
.ba-contact-form { padding: 48px 24px; }
.ba-contact-layout .ba-offices,
.ba-contact-layout .ba-contact-form { padding: 48px 0; }
.ba-offices__intro {
grid-template-columns: 1fr;
gap: 24px;
}
.ba-offices__grid { grid-template-columns: 1fr; }
.ba-offices__card { padding: 32px 24px; }
.ba-contact-layout .ba-offices__intro {
gap: 16px;
}
.ba-contact-layout .ba-offices__grid {
grid-template-columns: 1fr;
}
}
/* partials/cta-blog.css */
.ba-textlink {
display: inline-flex;
align-items: center;
font-family: var(--ba-display);
font-size: var(--ba-text-ui);
line-height: 1.4;
text-transform: uppercase;
color: var(--ba-ink);
white-space: nowrap;
}
.ba-textlink:hover { opacity: 0.6; }
.ba-cta-blue {
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 0;
background: var(--ba-white);
}
.ba-cta-blue__panel {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
min-height: 356px;
overflow: hidden;
background: var(--ba-mint);
padding: 0 112px;
box-sizing: border-box;
}
.ba-cta-blue--center .ba-cta-blue__panel {
min-height: 416px;
padding: 64px 112px;
justify-content: center;
}
.ba-cta-blue__mark {
position: absolute;
left: 736px;
top: -201px;
width: 643px;
height: 668px;
max-width: none;
pointer-events: none;
}
.ba-cta-blue--center .ba-cta-blue__mark {
left: 60%;
top: -91px;
}
.ba-cta-blue__copy {
position: relative;
z-index: 1;
width: min(100%, 474px);
display: flex;
flex-direction: column;
gap: 24px;
justify-content: center;
align-items: flex-start;
}
.ba-cta-blue--center .ba-cta-blue__copy {
align-items: center;
text-align: center;
}
.ba-cta-blue h2 {
margin: 0;
font-size: var(--ba-text-h2);
letter-spacing: -0.03em;
color: var(--ba-ink);
}
.ba-cta-blue p {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-ink);
}
.ba-cta-blue__actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 24px;
align-items: flex-start;
}
.ba-cta-blue--center .ba-cta-blue__actions {
justify-content: center;
}
.ba-cta-blue .ba-btn--ink,
.ba-cta-split .ba-btn--ink,
.ba-article__cta .ba-btn--ink {
color: var(--ba-mint);
}
.ba-cta-blue .ba-btn--ink:hover,
.ba-cta-split .ba-btn--ink:hover,
.ba-article__cta .ba-btn--ink:hover {
background: var(--ba-ink-hover);
border-color: var(--ba-ink-hover);
color: var(--ba-mint);
}
.ba-cta-split {
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 0;
background: var(--ba-white);
}
.ba-cta-split__panel {
display: flex;
flex-direction: row;
align-items: stretch;
min-height: 356px;
overflow: hidden;
}
.ba-cta-split__media {
flex: 1 1 50%;
min-width: 0;
background: var(--ba-ink) center / cover no-repeat;
}
.ba-cta-split__copy {
flex: 1 1 50%;
min-width: 0;
overflow: hidden;
background: var(--ba-mint);
display: flex;
flex-direction: column;
gap: 24px;
padding: 50px 88px;
justify-content: center;
align-items: flex-start;
box-sizing: border-box;
}
.ba-cta-split h2 {
margin: 0;
width: min(100%, 474px);
font-size: var(--ba-text-h3);
letter-spacing: 0;
color: var(--ba-ink);
}
.ba-cta-split p {
margin: 0;
width: min(100%, 474px);
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-ink);
}
.ba-cta-person {
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 0 94px;
background: var(--ba-white);
}
.ba-cta-person__panel {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-height: 506px;
overflow: hidden;
background: var(--ba-mint);
padding: 0 112px;
box-sizing: border-box;
}
.ba-cta-person__copy {
width: min(100%, 517px);
display: flex;
flex-direction: column;
gap: 32px;
justify-content: center;
align-items: flex-start;
}
.ba-cta-person__intro {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
}
.ba-cta-person h2 {
margin: 0;
font-size: var(--ba-text-h2);
letter-spacing: -0.03em;
color: var(--ba-ink);
}
.ba-cta-person__intro p {
margin: 0;
width: min(100%, 474px);
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-ink);
}
.ba-cta-person__who {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
align-self: stretch;
}
.ba-cta-person__id {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.ba-cta-person__name {
font-family: var(--ba-display);
font-size: var(--ba-text-h4);
line-height: 1;
color: var(--ba-black);
text-transform: uppercase;
}
.ba-cta-person__role {
font-size: 18px;
line-height: 1.5;
color: var(--ba-black);
}
.ba-cta-person__actions {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.ba-cta-person__mail,
.ba-cta-person__tel {
min-width: min(100%, 382px);
}
.ba-cta-person__mail .ba-btn__inner::before,
.ba-cta-person__tel .ba-btn__inner::before {
content: "";
flex-shrink: 0;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.ba-cta-person__mail .ba-btn__inner::before {
width: 18px;
height: 14px;
background-image: url("../img/mail.svg");
}
.ba-cta-person__tel .ba-btn__inner::before {
width: 16px;
height: 16px;
background-image: url("../img/call.svg");
}
.ba-btn--ink .ba-btn__inner::before,
.ba-btn--on-dark .ba-btn__inner::before {
filter: brightness(0) invert(1);
}
.ba-cta-person__photo {
width: 506px;
height: 506px;
object-fit: cover;
object-position: 50% 18%;
flex-shrink: 0;
}
.ba-blogcard {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
background: var(--ba-white);
}
.ba-blogcard__media {
height: 270px;
width: 100%;
background: var(--ba-ink) center / cover no-repeat;
display: block;
}
.ba-blogcard__media:hover { opacity: 1; }
.ba-blogcard__body {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
align-self: stretch;
}
.ba-blogcard__meta {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
}
.ba-blogcard__meta time {
font-weight: 600;
font-size: var(--ba-text-sm);
line-height: 1.5;
color: var(--ba-black);
white-space: nowrap;
}
.ba-blogcard__cat {
border-radius: var(--ba-radius);
background: var(--ba-chip-bg);
padding: 4px 8px;
font-weight: 600;
font-size: var(--ba-text-sm);
line-height: 1.5;
color: var(--ba-black);
white-space: nowrap;
font-family: var(--ba-body);
}
.ba-blogcard__copy {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
width: 100%;
}
.ba-blogcard__copy h3 {
margin: 0;
font-size: 24px;
letter-spacing: 0;
line-height: 1;
color: var(--ba-black);
}
.ba-blogcard__copy p {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
font-family: var(--ba-body);
}
.ba-bloggrid {
display: flex;
flex-direction: column;
align-items: center;
gap: 80px;
padding: 40px var(--ba-page-pad) var(--ba-space);
background: var(--ba-white);
box-sizing: border-box;
}
.ba-bloggrid__inner {
display: flex;
flex-direction: column;
gap: 64px;
align-items: center;
}
.ba-bloggrid__filters {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
.ba-bloggrid__label {
margin: 0;
font-weight: 600;
font-size: var(--ba-text-sm);
line-height: 1.5;
color: var(--ba-black);
font-family: var(--ba-body);
text-transform: none;
letter-spacing: 0;
}
.ba-bloggrid .ba-filters {
gap: 16px;
justify-content: center;
}
.ba-bloggrid__cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
align-items: start;
width: 100%;
}
.ba-bloggrid__cards > .ba-blogcard { min-width: 0; }
.ba-bloggrid--flush {
padding-top: 80px;
}
.ba-article {
width: min(100% - 2rem, 736px);
margin-inline: auto;
padding-block: 64px;
display: flex;
flex-direction: column;
align-items: flex-start;
background: var(--ba-white);
color: var(--ba-black);
}
.ba-article :where(h2, h3, h4) {
margin: 0;
padding: 0 0 16px;
color: var(--ba-black);
align-self: stretch;
}
.ba-article h2 {
font-size: var(--ba-text-h2);
letter-spacing: -0.03em;
}
.ba-article h3 {
font-size: var(--ba-text-h3);
letter-spacing: 0;
}
.ba-article h4 {
font-size: var(--ba-text-h4);
letter-spacing: 0;
}
.ba-article p {
margin: 0;
padding: 0 0 16px;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
align-self: stretch;
white-space: normal;
}
.ba-article p:last-child { padding-bottom: 0; }
.ba-article ul,
.ba-article ol {
margin: 0;
padding: 0 0 16px 1.35em;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
align-self: stretch;
}
.ba-article li {
padding: 0 0 6px;
}
.ba-article li:last-child {
padding-bottom: 0;
}
.ba-article a {
font-weight: 700;
text-decoration: underline;
color: inherit;
}
.ba-article__kicker {
padding-top: 20px;
font-family: var(--ba-display);
font-size: var(--ba-text-ui);
line-height: 1;
text-transform: uppercase;
color: var(--ba-black);
}
.ba-article figure {
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
padding: 48px 0;
align-items: flex-start;
align-self: stretch;
box-sizing: border-box;
}
.ba-article figure img {
height: 400px;
width: 100%;
object-fit: cover;
}
.ba-article figcaption {
display: flex;
flex-direction: row;
gap: 8px;
align-items: stretch;
align-self: stretch;
font-size: var(--ba-text-sm);
line-height: 1.5;
color: var(--ba-black);
}
.ba-article figcaption::before {
content: "";
width: 2px;
background: var(--ba-black);
flex-shrink: 0;
}
.ba-article blockquote {
margin: 0;
padding: 36px 20px 36px 0;
display: flex;
flex-direction: row;
gap: 20px;
align-items: stretch;
align-self: stretch;
box-sizing: border-box;
}
.ba-article blockquote::before {
content: "";
width: 2px;
background: var(--ba-black);
flex-shrink: 0;
}
.ba-article blockquote p {
margin: 0;
padding: 0;
font-family: var(--ba-body);
font-style: italic;
font-size: 20px;
line-height: 28px;
color: var(--ba-black);
flex-grow: 1;
text-transform: none;
letter-spacing: 0;
}
.ba-article__cta {
display: flex;
flex-direction: row;
align-items: stretch;
align-self: stretch;
padding: 41px 0;
}
.ba-article__cta-media {
width: 368px;
height: 274px;
flex-shrink: 0;
background:
linear-gradient(192.641deg, rgba(0, 0, 0, 0) 65.33%, rgba(0, 0, 0, 0.73) 88.43%),
var(--ba-ink) center / cover no-repeat;
}
.ba-article__cta-copy {
width: 368px;
height: 274px;
overflow: hidden;
background: var(--ba-mint);
display: flex;
flex-direction: column;
gap: 24px;
padding: 50px 40px;
justify-content: center;
align-items: flex-start;
box-sizing: border-box;
flex-shrink: 0;
}
.ba-article__cta-copy h3 {
margin: 0;
padding: 0;
font-size: var(--ba-text-h4);
line-height: 1;
color: var(--ba-ink);
white-space: nowrap;
letter-spacing: 0;
}
.ba-article__cta-copy p {
margin: 0;
padding: 0;
width: min(100%, 296px);
font-size: var(--ba-text-sm);
line-height: 1.5;
color: var(--ba-ink);
}
.ba-article-layout {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
padding: 40px var(--ba-page-pad) var(--ba-space);
background: var(--ba-white);
box-sizing: border-box;
}
.ba-article-layout__inner {
width: min(100%, 1280px);
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 1fr) 464px;
gap: 80px;
align-items: start;
}
.ba-article-layout .ba-article {
width: 100%;
max-width: none;
min-width: 0;
margin-inline: 0;
padding-block: 0;
overflow-wrap: break-word;
}
.ba-article-layout .ba-article img {
max-width: 100%;
height: auto;
}
.ba-article-aside {
width: 100%;
max-width: 464px;
justify-self: end;
display: flex;
flex-direction: column;
gap: 32px;
align-items: flex-start;
position: sticky;
top: 24px;
align-self: start;
}
.ba-toc {
width: 100%;
max-width: 464px;
background: rgba(238, 238, 238, 0.5);
display: flex;
flex-direction: column;
padding: 32px;
align-items: flex-start;
box-sizing: border-box;
}
.ba-toc__link {
color: var(--ba-black);
text-decoration: none;
align-self: stretch;
}
.ba-toc__link--h2 {
font-family: var(--ba-display);
font-size: 24px;
line-height: 1;
text-transform: uppercase;
padding: 8px 0;
}
.ba-toc__link--h3 {
font-weight: 600;
font-size: var(--ba-text-sm);
line-height: 1.5;
padding: 0 0 0 24px;
font-family: var(--ba-body);
text-transform: none;
}
.ba-toc__link:hover {
text-decoration: underline;
}
.ba-sticky-cta {
width: 100%;
max-width: 464px;
overflow: hidden;
background: var(--ba-mint);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.ba-sticky-cta__media {
height: 233.7px;
align-self: stretch;
background:
linear-gradient(198.344deg, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.73) 80.15%),
var(--ba-ink) center / cover no-repeat;
}
.ba-sticky-cta__copy {
display: flex;
flex-direction: column;
gap: 16px;
padding: 32px 33px;
align-items: flex-start;
box-sizing: border-box;
align-self: stretch;
}
.ba-sticky-cta__copy h2 {
margin: 0;
font-size: var(--ba-text-h4);
line-height: 1;
color: var(--ba-black);
align-self: stretch;
}
.ba-sticky-cta__copy p {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
align-self: stretch;
}
.ba-sticky-cta .ba-btn {
width: 100%;
align-self: stretch;
}
.ba-article-layout .ba-author {
padding: 0;
width: min(100%, 1312px);
}
.ba-page__body {
padding: 40px 0 var(--ba-space);
}
.ba-author {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 var(--ba-page-pad);
background: var(--ba-white);
box-sizing: border-box;
}
.ba-author__inner {
width: 100%;
background: var(--ba-chip-bg);
display: flex;
flex-direction: column;
gap: 24px;
padding: 40px 0;
align-items: center;
box-sizing: border-box;
}
.ba-author__photo {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 22%;
}
.ba-author__copy {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
align-self: stretch;
}
.ba-author__id {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
align-self: stretch;
}
.ba-author__name {
font-family: var(--ba-display);
font-size: var(--ba-text-h4);
text-align: center;
line-height: 1;
color: var(--ba-black);
text-transform: uppercase;
align-self: stretch;
}
.ba-author__role {
font-size: 18px;
text-align: center;
line-height: 1.5;
color: var(--ba-black);
align-self: stretch;
}
.ba-author__copy p {
margin: 0;
width: min(100% - 2rem, 492px);
font-size: var(--ba-text-body);
text-align: center;
line-height: 1.5;
color: var(--ba-black);
}
@media (max-width: 800px) {
.ba-cta-blue__panel,
.ba-cta-blue--center .ba-cta-blue__panel {
min-height: 0;
padding: 48px 24px;
flex-direction: column;
align-items: stretch;
}
.ba-cta-blue__mark {
left: auto;
right: -120px;
top: -80px;
}
.ba-cta-blue__copy,
.ba-cta-blue--center .ba-cta-blue__copy {
width: 100%;
align-items: flex-start;
text-align: left;
}
.ba-cta-split__panel,
.ba-cta-person__panel,
.ba-article__cta {
flex-direction: column;
}
.ba-cta-split__panel,
.ba-cta-person__panel {
min-height: 0;
padding: 0;
}
.ba-cta-split__media {
min-height: 220px;
}
.ba-cta-split__copy {
padding: 40px 24px;
}
.ba-cta-person__copy {
width: 100%;
padding: 40px 24px;
box-sizing: border-box;
}
.ba-cta-person__photo {
width: 100%;
height: auto;
aspect-ratio: 1;
}
.ba-cta-person__mail,
.ba-cta-person__tel {
min-width: 0;
width: 100%;
max-width: 100%;
height: auto;
padding: 14px 12px;
white-space: normal;
}
.ba-cta-person__actions {
width: 100%;
min-width: 0;
}
.ba-cta-person__actions .ba-btn__inner {
max-width: 100%;
min-width: 0;
}
.ba-cta-person__actions .ba-btn__label {
min-width: 0;
overflow-wrap: anywhere;
line-height: 1.25;
}
.ba-cta-person__mail {
font-size: clamp(14px, 4vw, 18px);
}
.ba-bloggrid {
gap: 40px;
padding: 32px 16px var(--ba-space);
}
.ba-bloggrid__inner { gap: 32px; }
.ba-bloggrid__cards { grid-template-columns: 1fr; }
.ba-article { padding-block: 40px; }
.ba-article-layout .ba-article { padding-block: 0; }
.ba-article-layout {
padding: 32px 16px var(--ba-space);
}
.ba-article-layout__inner,
.ba-article-aside,
.ba-toc,
.ba-sticky-cta {
width: 100%;
max-width: none;
}
.ba-article-layout__inner {
display: flex;
flex-direction: column;
gap: 40px;
}
.ba-article-aside {
position: static;
}
.ba-article figure img { height: 240px; }
.ba-article__cta-media,
.ba-article__cta-copy {
width: 100%;
height: auto;
min-height: 220px;
}
.ba-article__cta-copy h3 { white-space: normal; }
.ba-cta-blue__actions { gap: 12px; }
}
/* partials/home.css */
.ba-textlink {
font-family: var(--ba-display);
font-size: var(--ba-text-ui);
line-height: 1.4;
text-transform: uppercase;
color: var(--ba-ink);
white-space: nowrap;
}
.ba-textlink:hover { opacity: 0.6; }
.ba-pager {
width: 203px;
display: flex;
justify-content: space-between;
align-items: center;
}
.ba-pager__arrow {
width: 40.29px;
height: 40.29px;
padding: 5.5px;
background: none;
border: 0;
cursor: pointer;
box-sizing: border-box;
flex-shrink: 0;
}
.ba-pager__arrow:hover { opacity: 0.7; }
.ba-pager__arrow--next img { transform: scaleX(-1); }
.ba-pager img {
width: 29.2px;
height: 29.2px;
display: block;
max-width: none;
}
.ba-pager__dots {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
flex: 1 1 auto;
min-width: 0;
}
.ba-testimonials .ba-pager__dots {
--ba-pager-win: 5;
--ba-pager-dot: 14px;
--ba-pager-gap: 6px;
--ba-pager-pad: 4px;
overflow: hidden;
box-sizing: content-box;
flex: 0 0 auto;
justify-content: flex-start;
gap: 0;
width: calc(
var(--ba-pager-win) * var(--ba-pager-dot) + (var(--ba-pager-win) - 1) * var(--ba-pager-gap)
);
padding-block: 4px;
padding-inline: var(--ba-pager-pad);
}
.ba-testimonials .ba-pager__dots-track {
position: relative;
display: flex;
gap: var(--ba-pager-gap);
align-items: center;
transition: transform 320ms ease;
}
.ba-pager__dot {
width: 9px;
height: 9px;
border: 1px solid #222;
padding: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
appearance: none;
box-sizing: border-box;
flex-shrink: 0;
}
.ba-pager__dot.is-active { background: #222; }
.ba-testimonials .ba-pager__dot {
width: var(--ba-pager-dot);
height: var(--ba-pager-dot);
margin: 0;
border: 0;
background: transparent;
border-radius: 0;
position: relative;
transform: none;
}
.ba-testimonials .ba-pager__dot.is-active {
background: transparent;
transform: none;
}
.ba-testimonials .ba-pager__dot::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 9px;
height: 9px;
margin: -4.5px 0 0 -4.5px;
border: 1px solid #222;
border-radius: 50%;
box-sizing: border-box;
transform: scale(1);
transition: transform 280ms ease, background-color 280ms ease;
}
.ba-testimonials .ba-pager__dot.is-active::after {
background: #222;
transform: scale(1.45);
}
.ba-testimonials .ba-pager__dot[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.ba-testimonials .ba-pager__dots-track {
transition: none;
}
.ba-testimonials .ba-pager__dot.is-active::after {
transform: none;
}
}
html.ba-motion-off .ba-testimonials .ba-pager__dots-track {
transition: none;
}
html.ba-motion-off .ba-testimonials .ba-pager__dot.is-active::after {
transform: none;
}
.ba-pager--on-dark .ba-pager__dot {
border-color: var(--ba-white);
background: transparent;
}
.ba-pager--on-dark .ba-pager__dot.is-active {
background: var(--ba-white);
border-color: var(--ba-white);
}
.ba-pager--on-dark img { filter: brightness(0) invert(1); }
.ba-cta-banner {
display: flex;
flex-direction: column;
align-items: center;
background: var(--ba-white);
}
.ba-cta-banner__inner {
position: relative;
isolation: isolate;
width: min(100%, 1286px);
height: 464px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 24px;
padding: 64px 88px;
justify-content: center;
align-items: center;
box-sizing: border-box;
background: var(--ba-ink) center / cover no-repeat;
}
.ba-cta-banner__inner::after {
content: "";
position: absolute;
inset: 0;
background: var(--ba-scrim);
z-index: 0;
pointer-events: none;
}
.ba-cta-banner__inner > * {
position: relative;
z-index: 1;
}
.ba-cta-banner__head {
width: min(100%, 720px);
display: flex;
flex-direction: column;
align-items: center;
}
.ba-cta-banner__inner,
.ba-cta-banner__inner :where(h2, p, span) {
color: var(--ba-white);
}
.ba-cta-banner h2 {
margin: 0;
width: 100%;
font-size: var(--ba-text-h2);
text-align: center;
line-height: 1;
letter-spacing: 0;
color: var(--ba-white);
}
.ba-cta-banner h2 em,
.ba-cta-banner__highlight {
position: relative;
display: inline-block;
font-style: normal;
color: var(--ba-mint);
padding-bottom: 8px;
}
.ba-cta-banner h2 em :where(span),
.ba-cta-banner__highlight :where(span) {
color: var(--ba-mint);
}
.ba-cta-banner__sign {
position: absolute;
left: 50%;
bottom: 0;
width: 110px;
height: 5px;
margin: 0;
transform: translateX(-50%);
object-fit: contain;
}
.ba-cta-banner__copy {
width: min(100%, 474px);
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
}
.ba-cta-banner__kicker,
.ba-cta-banner__body {
margin: 0;
width: 100%;
font-size: var(--ba-text-body);
text-align: center;
line-height: 1.5;
color: var(--ba-white);
}
.ba-cta-banner__kicker {
font-weight: 700;
}
.ba-cta-banner__kicker :where(span) {
font-weight: 700;
}
.ba-cta-banner__body {
font-weight: 400;
}
.ba-cta-banner__body :where(strong, b) {
font-weight: 700;
}
.ba-cta-banner .ba-btn {
flex-shrink: 0;
}
.ba-cta-banner .ba-btn--mint,
.ba-cta-banner .ba-btn--mint :where(span) {
color: var(--ba-ink);
}
.ba-tourtiles {
overflow: hidden;
background: var(--ba-white);
padding: var(--ba-space) 16px;
display: flex;
justify-content: center;
}
.ba-tourtiles__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 269px));
gap: 15px;
justify-content: center;
width: min(100%, calc(5 * 269px + 4 * 15px));
}
.ba-tourtiles__intro,
.ba-tourtiles__tile {
width: 269px;
max-width: 100%;
min-width: 0;
height: 360px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 0 16px 24px;
box-sizing: border-box;
}
.ba-tourtiles__list {
display: contents;
list-style: none;
margin: 0;
padding: 0;
}
.ba-tourtiles__list > li {
display: contents;
}
.ba-tourtiles__intro { gap: 16px; }
.ba-tourtiles__intro h2 {
margin: 0;
width: 100%;
font-size: 32px;
line-height: 1;
letter-spacing: 0;
color: var(--ba-black);
}
.ba-tourtiles__intro p {
margin: 0;
font-weight: 700;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
}
.ba-tourtiles__tile {
--ba-tile-img: none;
gap: 4px;
background-color: var(--ba-ink);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image:
linear-gradient(187.112deg, rgba(0, 0, 0, 0) 69.16%, rgba(0, 0, 0, 0.73) 95.74%),
var(--ba-tile-img);
}
.ba-tourtiles__tile:hover { opacity: 0.92; }
.ba-tourtiles__tile.is-active {
box-shadow: inset 0 0 0 3px var(--ba-mint);
}
.ba-tourtiles--compact {
padding: 8px var(--ba-page-pad) 48px;
}
.ba-destinations--compact {
padding: 8px var(--ba-page-pad) 48px;
}
.ba-tourtiles__tile span {
font-family: var(--ba-display);
font-size: var(--ba-text-h4);
line-height: 1;
letter-spacing: 0;
color: var(--ba-white);
text-transform: uppercase;
white-space: nowrap;
}
.ba-tourtiles--carousel {
display: block;
width: 100%;
padding: 16px 0 32px;
overflow: hidden;
}
.ba-tourtiles--carousel .ba-carousel {
margin-top: 0;
}
.ba-tourtiles--carousel .ba-carousel__track {
gap: 15px;
}
.ba-tourtiles--carousel .ba-carousel__track > li {
flex: 0 0 269px;
width: 269px;
display: flex;
}
.ba-tourtiles--carousel .ba-tourtiles__tile {
width: 269px;
height: 360px;
}
.ba-tourtiles--carousel .ba-tourtiles__tile span {
white-space: normal;
max-width: 100%;
}
.ba-tuotenosto {
overflow: hidden;
background: var(--ba-white);
padding: 0 var(--ba-page-pad) var(--ba-space);
display: flex;
justify-content: center;
}
.ba-tuotenosto__inner {
width: min(100%, var(--ba-wrap));
display: flex;
flex-direction: column;
gap: 32px;
}
.ba-tuotenosto__head {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
}
.ba-tuotenosto__head h2 {
margin: 0;
font-size: var(--ba-text-h3);
letter-spacing: 0;
line-height: 1;
color: var(--ba-black);
}
.ba-tuotenosto__grid {
display: flex;
flex-direction: row;
gap: 24px;
align-items: flex-start;
padding: 14px;
}
.ba-tuotenosto__grid > .ba-card {
flex: 0 0 395px;
width: 395px;
max-width: 100%;
}
.ba-destinations {
overflow: hidden;
background: var(--ba-white);
padding: 112px 16px;
display: flex;
justify-content: center;
}
.ba-destinations__inner {
width: min(100%, 1408px);
display: flex;
flex-direction: column;
gap: 80px;
}
.ba-destinations__intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 80px;
align-items: start;
}
.ba-destinations__title {
overflow: hidden;
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
min-width: 0;
}
.ba-destinations__title h2 {
margin: 0;
width: 100%;
font-size: var(--ba-text-h2);
letter-spacing: -0.03em;
color: var(--ba-black);
}
.ba-destinations__title .ba-rule {
width: 592px;
max-width: 100%;
}
.ba-destinations__intro > p {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
min-width: 0;
}
.ba-destinations__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 459px));
gap: 15px;
align-items: start;
}
.ba-destinations__grid > li {
min-width: 0;
}
.ba-destinations__card {
min-width: 0;
display: flex;
flex-direction: column;
gap: 32px;
}
.ba-destinations__photo {
width: 100%;
aspect-ratio: 1;
background: var(--ba-ink) center / cover no-repeat;
display: flex;
flex-direction: column;
gap: 4px;
padding: 31px 32px 24px;
align-items: flex-start;
box-sizing: border-box;
}
.ba-destinations__photo .ba-chip {
font-size: 24px;
}
.ba-destinations__photo .ba-chip img {
width: 30.4px;
height: 31.6px;
}
.ba-destinations__copy {
display: flex;
flex-direction: column;
gap: 19px;
justify-content: center;
align-items: flex-start;
width: min(100%, 433px);
}
.ba-destinations__copy h3 {
margin: 0;
width: 100%;
font-size: var(--ba-text-h3);
letter-spacing: 0;
line-height: 1;
color: var(--ba-black);
overflow-wrap: anywhere;
}
.ba-destinations__copy p {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
}
.ba-testimonials {
--ba-quotes-gutter: max(var(--ba-page-pad), calc((100% - var(--ba-wrap)) / 2));
--ba-quotes-peek: 56px;
overflow-x: clip;
background: linear-gradient(rgba(238, 238, 238, 0.5), rgba(238, 238, 238, 0.5)), var(--ba-white);
padding: var(--ba-space) 0;
display: flex;
flex-direction: column;
align-items: center;
}
.ba-testimonials__inner {
width: 100%;
display: flex;
flex-direction: column;
gap: 80px;
align-items: center;
}
.ba-testimonials__head {
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
width: min(calc(100% - 2 * var(--ba-page-pad)), var(--ba-wrap));
}
.ba-testimonials__ratings {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px 32px;
justify-content: center;
align-items: center;
}
.ba-testimonials__google,
.ba-testimonials__ta {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
}
.ba-testimonials__gmark,
.ba-testimonials__tamark { display: block; flex-shrink: 0; }
.ba-testimonials__tamark { overflow: visible; }
.ba-testimonials__score {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
}
.ba-testimonials__score > span:first-child {
font-weight: 600;
font-size: var(--ba-text-body);
line-height: 1.5;
}
.ba-testimonials__stars {
display: flex;
flex-direction: row;
gap: 4px;
align-items: center;
}
.ba-testimonials__stars svg { display: block; }
.ba-testimonials__dots {
display: flex;
flex-direction: row;
gap: 2px;
align-items: center;
}
.ba-testimonials__dots img,
.ba-testimonials__dots svg {
display: block;
width: 14px;
height: 14px;
}
.ba-testimonials__count {
font-size: var(--ba-text-xs);
line-height: 1.5;
}
.ba-testimonials__lede {
max-width: 768px;
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
width: 100%;
}
.ba-testimonials__lede h2 {
margin: 0;
text-align: center;
letter-spacing: -0.03em;
color: var(--ba-black);
}
.ba-testimonials__lede p {
margin: 0;
font-size: 18px;
text-align: center;
line-height: 1.5;
color: var(--ba-black);
max-width: 768px;
width: 100%;
}
.ba-testimonials__lede p span {
display: block;
text-align: center;
}
.ba-testimonials[data-quotes-editor] .ba-testimonials__track {
flex-wrap: wrap;
justify-content: center;
overflow: visible;
padding-inline: 0;
scroll-snap-type: none;
}
.ba-testimonials[data-quotes-editor] .ba-testimonials__track > li {
flex: 0 0 405.333px;
width: 405.333px;
}
.ba-testimonials[data-quotes-editor] .ba-pager {
display: none;
}
.ba-testimonials__carousel {
display: flex;
flex-direction: column;
gap: 48px;
align-items: center;
width: 100%;
}
.ba-testimonials__track {
display: flex;
flex-direction: row;
gap: 32px;
align-items: flex-start;
width: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--ba-quotes-gutter);
padding-inline: var(--ba-quotes-gutter);
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.ba-testimonials__track::-webkit-scrollbar { display: none; }
.ba-testimonials__track > li {
flex: 0 0 min(405.333px, calc(100% - var(--ba-quotes-gutter) - var(--ba-quotes-peek)));
width: min(405.333px, calc(100% - var(--ba-quotes-gutter) - var(--ba-quotes-peek)));
scroll-snap-align: start;
scroll-snap-stop: always;
}
.ba-testimonials__quote {
margin: 0;
width: 100%;
overflow: hidden;
background: var(--ba-white);
display: flex;
flex-direction: column;
gap: 24px;
padding: 32px;
align-items: flex-start;
box-sizing: border-box;
}
.ba-testimonials__body {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
width: 100%;
}
.ba-testimonials__quote p {
margin: 0;
font-size: 18px;
line-height: 1.5;
color: var(--ba-black);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
line-clamp: 6;
overflow: hidden;
}
.ba-testimonials__quote--full p {
display: block;
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
}
.ba-testimonials__more {
margin: 16px 0 0;
text-align: center;
}
.ba-testimonials__quote footer,
.ba-testimonials__by {
width: 100%;
display: flex;
flex-direction: row;
gap: 12px;
align-items: center;
}
.ba-testimonials__quote cite {
font-style: normal;
font-weight: 600;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
flex: 1 1 auto;
min-width: 0;
}
.ba-testimonials__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 40px;
background: var(--ba-mint);
}
.ba-testimonials__avatar--fallback {
display: grid;
place-items: center;
font-size: 13px;
font-weight: 600;
color: var(--ba-ink);
line-height: 1;
}
.ba-testimonials__plat {
flex: 0 0 20px;
width: 20px;
height: 20px;
display: block;
line-height: 0;
}
.ba-testimonials__plat svg {
display: block;
width: 20px;
height: 20px;
}
.ba-testimonials__quote p {
}
.ba-testimonials__awards {
margin: 0;
padding: 0;
list-style: none;
width: min(700px, calc(100% - 2 * var(--ba-page-pad)));
max-width: 100%;
min-height: 143px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 19px;
}
.ba-testimonials__awards li {
flex: 0 0 124.8px;
width: 124.8px;
}
.ba-testimonials__awards img {
display: block;
width: 124.8px;
height: auto;
object-fit: contain;
}
.ba-why {
overflow: hidden;
background: rgba(238, 238, 238, 0.5);
padding: 80px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.ba-why__inner {
width: min(100% - 32px, 1408px);
display: flex;
flex-direction: column;
gap: 48px;
align-items: center;
}
.ba-why__head {
display: flex;
flex-direction: column;
gap: 32px;
align-items: center;
width: 100%;
}
.ba-why__head h2 {
margin: 0;
text-align: center;
letter-spacing: -0.03em;
color: var(--ba-black);
}
.ba-why__lede {
margin: 0 auto;
width: 100%;
max-width: 766px;
font-size: var(--ba-text-body);
text-align: center;
line-height: 1.5;
color: var(--ba-black);
}
.ba-why__lede span {
display: block;
max-width: 766px;
margin-inline: auto;
}
.ba-why__split {
height: 697px;
display: flex;
flex-direction: row;
gap: 15px;
align-items: center;
width: 100%;
}
.ba-why__panel {
position: relative;
background: var(--ba-ink);
display: flex;
flex-direction: column;
gap: 24px;
padding: 32px 32px 56px;
justify-content: center;
align-items: center;
box-sizing: border-box;
flex: 1 1 50%;
min-width: 0;
align-self: stretch;
}
.ba-why__slides {
width: 100%;
display: flex;
justify-content: center;
}
.ba-why__slide {
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
width: min(100%, 489px);
}
.ba-why__slide[hidden] { display: none; }
.ba-why__counter,
.ba-why__body {
margin: 0;
width: 100%;
font-size: var(--ba-text-body);
text-align: center;
line-height: 1.5;
color: var(--ba-white);
font-weight: 400;
}
.ba-why__kicker {
margin: 0;
width: min(100%, 474px);
font-family: var(--ba-display);
font-size: var(--ba-text-h3);
font-weight: 400;
text-align: center;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--ba-white);
}
.ba-why__panel .ba-pager {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 35px;
}
.ba-why__photo {
position: relative;
overflow: hidden;
height: 697px;
background: var(--ba-ink);
flex: 1 1 50%;
min-width: 0;
}
.ba-why__photo-layer {
position: absolute;
inset: 0;
opacity: 0;
background: var(--ba-ink) 16.6% 50% / cover no-repeat;
pointer-events: none;
}
.ba-why__photo-layer.is-active {
opacity: 1;
}
@media (max-width: 1100px) {
.ba-why__split {
flex-direction: column;
height: auto;
}
.ba-why__photo {
order: -1;
width: 100%;
height: auto;
min-height: 400px;
align-self: stretch;
}
.ba-why__panel {
width: 100%;
min-height: 360px;
padding: 32px 24px 40px;
justify-content: space-between;
gap: 40px;
}
.ba-why__panel .ba-pager {
position: static;
left: auto;
bottom: auto;
transform: none;
flex-shrink: 0;
}
}
.ba-features {
overflow: hidden;
background: var(--ba-white);
padding: var(--ba-space) var(--ba-page-pad);
display: flex;
justify-content: center;
}
.ba-features__inner {
width: min(100%, var(--ba-wrap));
display: flex;
flex-direction: row;
gap: 80px;
align-items: flex-start;
}
.ba-features__intro {
width: 380px;
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
flex-shrink: 0;
}
.ba-features__intro h2 {
margin: 0;
width: 388px;
max-width: 100%;
letter-spacing: -0.03em;
color: var(--ba-black);
}
.ba-features__intro p {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
}
.ba-features__intro .ba-btn { margin-top: 8px; }
.ba-features__grid {
display: flex;
flex-direction: row;
gap: 32px;
align-items: flex-start;
flex: 1 1 0;
min-width: 0;
}
.ba-features__box {
width: 252px;
height: 402px;
background: rgba(238, 238, 238, 0.5);
display: flex;
flex-direction: column;
gap: 24px;
padding: 32px;
align-items: flex-start;
box-sizing: border-box;
flex-shrink: 0;
}
.ba-features__hex {
position: relative;
width: 58px;
height: 66px;
flex-shrink: 0;
}
.ba-features__hex svg {
position: absolute;
left: 0;
top: 0;
display: block;
}
.ba-features__hex img {
position: absolute;
left: 13.5px;
top: 12.6px;
width: 29.2px;
height: 36.9px;
max-width: none;
}
.ba-features__box h3 {
margin: 0;
font-size: var(--ba-text-h5);
letter-spacing: 0;
line-height: 1;
color: var(--ba-black);
}
.ba-features__box p {
margin: 0;
font-family: var(--ba-body);
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
}
.ba-responsible {
height: 697px;
background: var(--ba-white);
display: flex;
flex-direction: row;
gap: 15px;
padding: 0 16px;
align-items: center;
box-sizing: border-box;
}
.ba-responsible__panel {
overflow: hidden;
background: var(--ba-ink);
color: var(--ba-white);
display: flex;
flex-direction: column;
gap: 24px;
padding: 50px 88px;
justify-content: center;
align-items: flex-start;
box-sizing: border-box;
flex: 1 1 50%;
min-width: 0;
align-self: stretch;
}
.ba-responsible__copy {
display: flex;
flex-direction: column;
gap: 32px;
align-items: flex-start;
width: 100%;
}
.ba-responsible__certs {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
}
.ba-responsible__certs > li {
display: flex;
}
.ba-responsible__badge {
height: 40px;
background: var(--ba-white);
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 5px 8px;
}
.ba-responsible__badge img {
display: block;
height: 30px;
width: auto;
max-height: 30px;
max-width: 91px;
object-fit: contain;
}
.ba-responsible__badge--stf { width: 105px; padding: 0; }
.ba-responsible__badge--stf img {
height: auto;
max-height: none;
max-width: none;
}
.ba-responsible__badge--ga {
width: 45px;
padding: 0 6px;
}
.ba-responsible__badge--ga img {
width: 33px;
height: 29px;
max-width: none;
object-fit: cover;
display: block;
}
.ba-responsible__badge--sfl { width: 107px; }
.ba-responsible__badge--sfl img {
width: 91px;
height: 30px;
max-width: none;
object-fit: contain;
display: block;
}
.ba-responsible__stf {
position: relative;
width: 89px;
height: 29.2px;
display: block;
}
.ba-responsible__stf > img:first-child {
position: absolute;
left: 0;
top: 0;
width: 67.7px;
height: 21.7px;
max-width: none;
}
.ba-responsible__stf-mark {
position: absolute;
left: 69.6px;
top: 0.4px;
width: 19.4px;
height: 21px;
background: var(--ba-ink-hover);
display: flex;
justify-content: center;
align-items: center;
}
.ba-responsible__stf-mark img {
width: 16.8px;
height: 18.8px;
max-width: none;
}
.ba-responsible h2 {
margin: 0;
width: min(100%, 474px);
letter-spacing: -0.03em;
color: var(--ba-white);
}
.ba-responsible p {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-white);
}
.ba-responsible__photo {
height: 697px;
background: var(--ba-ink) center / cover no-repeat;
flex: 1 1 50%;
min-width: 0;
}
.ba-articles {
overflow: hidden;
background: var(--ba-white);
padding: var(--ba-space) var(--ba-page-pad) 88px;
display: flex;
justify-content: center;
}
.ba-articles__inner {
width: min(100%, var(--ba-wrap));
display: flex;
flex-direction: column;
gap: 64px;
}
.ba-articles__head {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
width: 100%;
gap: 24px;
}
.ba-articles__title {
max-width: 768px;
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
flex: 1 1 0;
min-width: 0;
}
.ba-articles__title h2 {
margin: 0;
letter-spacing: -0.03em;
color: var(--ba-black);
}
.ba-articles__title p {
margin: 0;
font-size: 18px;
line-height: 1.5;
color: var(--ba-black);
}
.ba-articles__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
align-items: start;
width: 100%;
}
.ba-features__grid > li {
flex: 0 0 auto;
}
.ba-articles__grid > .ba-blogcard,
.ba-articles__grid > li {
flex: 1 1 0;
min-width: 0;
}
.ba-articles__grid > li {
display: flex;
}
.ba-articles__grid > li > .ba-blogcard {
width: 100%;
}
.ba-blogcard {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
background: var(--ba-white);
}
.ba-blogcard__media {
height: 270px;
width: 100%;
background: var(--ba-ink) center / cover no-repeat;
display: block;
}
.ba-blogcard__media:hover { opacity: 1; }
.ba-blogcard__meta {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
}
.ba-blogcard__meta time {
font-weight: 600;
font-size: var(--ba-text-sm);
line-height: 1.5;
color: var(--ba-black);
white-space: nowrap;
}
.ba-blogcard__cat {
border-radius: var(--ba-radius);
background: var(--ba-chip-bg);
padding: 4px 8px;
font-weight: 600;
font-size: var(--ba-text-sm);
line-height: 1.5;
color: var(--ba-black);
white-space: nowrap;
}
.ba-blogcard__copy {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
width: 100%;
}
.ba-blogcard__copy h3 {
margin: 0;
font-size: var(--ba-text-h5);
letter-spacing: 0;
line-height: 1;
color: var(--ba-black);
}
.ba-blogcard__copy p {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-black);
}
@media (max-width: 800px) {
.ba-cta-banner__inner {
height: auto;
min-height: 464px;
padding: 48px 24px;
}
.ba-tourtiles { padding: var(--ba-space) 16px; }
.ba-tourtiles__grid {
grid-template-columns: 1fr;
width: 100%;
}
.ba-tourtiles__intro {
width: 100%;
height: auto;
min-height: 0;
justify-content: flex-start;
padding: 0 0 16px;
}
.ba-tourtiles__tile {
width: 100%;
height: auto;
min-height: 360px;
}
.ba-tourtiles--carousel .ba-carousel__track > li,
.ba-tourtiles--carousel .ba-tourtiles__tile {
width: 269px;
flex-basis: 269px;
height: 360px;
min-height: 360px;
}
.ba-tuotenosto__grid {
flex-direction: column;
padding: 0;
}
.ba-tuotenosto__grid > .ba-card {
flex-basis: auto;
width: 100%;
min-height: 0;
}
.ba-destinations { gap: 40px; }
.ba-destinations__inner { gap: 40px; }
.ba-destinations__intro,
.ba-destinations__grid {
grid-template-columns: 1fr;
}
.ba-articles__grid {
grid-template-columns: 1fr;
}
.ba-responsible,
.ba-features__inner,
.ba-features__grid,
.ba-articles__head {
flex-direction: column;
}
.ba-responsible,
.ba-responsible__photo {
height: auto;
}
.ba-responsible__photo {
min-height: 280px;
width: 100%;
}
.ba-responsible__panel { padding: 48px 24px; }
.ba-features__intro,
.ba-features__intro h2 { width: 100%; }
.ba-features__box {
width: 100%;
height: auto;
}
.ba-testimonials__awards {
width: min(304px, 100%);
min-height: 0;
gap: 12px 14px;
}
.ba-testimonials__awards li,
.ba-testimonials__awards img {
flex-basis: 92px;
width: 92px;
}
}
/* partials/legacy-content.css */
.ba-legacy { padding: 72px var(--ba-page-pad); background: var(--ba-white); }
.ba-legacy__heading { max-width: 760px; margin: 0 0 40px; }
.ba-legacy__heading h2 { margin: 0 0 16px; }
.ba-legacy__heading p { margin: 0; }
.ba-legacy__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.ba-legacy__grid > li { min-width: 0; display: flex; }
.ba-legacy__card { width: 100%; display: flex; flex-direction: column; gap: 16px; color: var(--ba-black); text-decoration: none; }
.ba-legacy__card h2, .ba-legacy__card h3, .ba-legacy__card p { margin: 0; }
.ba-legacy__card h2, .ba-legacy__card h3 { font-size: var(--ba-text-h4); line-height: 1.05; }
.ba-legacy__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ba-chip-bg); }
.ba-legacy__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.ba-legacy__card:hover .ba-legacy__media img { transform: scale(1.025); }
.ba-legacy__media--logo { padding: 32px; box-sizing: border-box; }
.ba-legacy__media--logo img { object-fit: contain; }
.ba-legacy__more { margin-top: auto; font-family: var(--ba-display); text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.ba-legacy__all { margin: 40px 0 0; }
@media (max-width: 900px) { .ba-legacy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ba-legacy { padding: 48px var(--ba-page-pad); } .ba-legacy__grid { grid-template-columns: 1fr; } }
/* partials/motion.css */
:root {
--ba-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
--ba-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
--ba-dur-fast: 200ms;
--ba-dur-nav: 260ms;
--ba-dur-mega: 300ms;
--ba-dur-med: 320ms;
--ba-dur-rule: 400ms;
--ba-dur-cross: 240ms;
}
html.ba-motion-off *,
html.ba-motion-off *::before,
html.ba-motion-off *::after {
animation: none !important;
transition: none !important;
}
html.ba-motion a {
transition: opacity var(--ba-dur-fast) var(--ba-ease);
}
html.ba-motion .ba-btn {
transition:
background-color var(--ba-dur-fast) var(--ba-ease),
border-color var(--ba-dur-fast) var(--ba-ease),
color var(--ba-dur-fast) var(--ba-ease),
opacity var(--ba-dur-fast) var(--ba-ease);
}
html.ba-motion .ba-chip,
html.ba-motion .ba-tourtiles__tile {
transition: opacity var(--ba-dur-fast) var(--ba-ease), background-color var(--ba-dur-fast) var(--ba-ease);
}
html.ba-motion .ba-card:not(.ba-card--nav):not(.ba-card--more) {
transition: transform var(--ba-dur-fast) var(--ba-ease), box-shadow var(--ba-dur-fast) var(--ba-ease);
}
html.ba-motion .ba-card:not(.ba-card--nav):not(.ba-card--more):hover {
transform: translateY(-2px);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
html.ba-motion .ba-nav__burger span {
transition: transform var(--ba-dur-fast) var(--ba-ease), opacity var(--ba-dur-fast) var(--ba-ease);
}
html.ba-motion .ba-nav.is-drawer-open .ba-nav__burger span:nth-child(1) {
transform: translateY(6.75px) rotate(45deg);
}
html.ba-motion .ba-nav.is-drawer-open .ba-nav__burger span:nth-child(2) {
opacity: 0;
}
html.ba-motion .ba-nav.is-drawer-open .ba-nav__burger span:nth-child(3) {
transform: translateY(-6.75px) rotate(-45deg);
}
html.ba-motion .ba-nav__link,
html.ba-motion .ba-nav__toggle {
transition:
color var(--ba-dur-nav) var(--ba-ease),
opacity var(--ba-dur-nav) var(--ba-ease);
}
html.ba-motion .ba-nav__link:hover,
html.ba-motion .ba-nav__toggle:hover {
opacity: 1;
}
html.ba-motion .ba-nav__chevron {
transition:
transform var(--ba-dur-nav) var(--ba-ease-out),
opacity var(--ba-dur-nav) var(--ba-ease-out);
}
html.ba-motion .ba-nav__toggle[aria-expanded="true"] .ba-nav__chevron {
transform: rotate(45deg);
}
@media (min-width: 1101px) {
html.ba-motion .ba-nav__mega {
display: flex;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition:
opacity var(--ba-dur-mega) var(--ba-ease-out),
transform var(--ba-dur-mega) var(--ba-ease-out),
visibility 0s linear var(--ba-dur-mega);
}
html.ba-motion .ba-nav.is-mega-open .ba-nav__mega,
html.ba-motion .ba-nav:has([aria-expanded="true"]) .ba-nav__mega {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
transition:
opacity var(--ba-dur-mega) var(--ba-ease-out),
transform var(--ba-dur-mega) var(--ba-ease-out),
visibility 0s;
}
html.ba-motion .ba-nav.is-mega-closing .ba-nav__mega {
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
}
}
@media (max-width: 1100px) {
html.ba-motion .ba-nav__drawer:not([hidden]) {
display: flex;
opacity: 0;
transform: translateX(16px);
pointer-events: none;
transition:
opacity var(--ba-dur-med) var(--ba-ease-out),
transform var(--ba-dur-med) var(--ba-ease-out);
}
html.ba-motion .ba-nav.is-drawer-open .ba-nav__drawer:not([hidden]) {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
}
html.ba-motion .ba-promo:not([hidden]) .ba-promo__card {
animation: ba-motion-fade-up var(--ba-dur-med) var(--ba-ease-out);
}
html.ba-motion .ba-promo.is-open .ba-promo__scrim:not([hidden]) {
animation: ba-motion-fade var(--ba-dur-med) var(--ba-ease-out);
}
html.ba-motion .ba-video-lb::backdrop,
html.ba-motion .ba-gallery__pop::backdrop,
html.ba-motion .ba-modal::backdrop {
opacity: 0;
transition: opacity 240ms var(--ba-ease-out);
}
html.ba-motion .ba-video-lb:popover-open::backdrop,
html.ba-motion .ba-gallery__pop:popover-open::backdrop,
html.ba-motion .ba-modal[open]::backdrop {
opacity: 1;
}
@starting-style {
html.ba-motion .ba-video-lb:popover-open::backdrop,
html.ba-motion .ba-gallery__pop:popover-open::backdrop,
html.ba-motion .ba-modal[open]::backdrop {
opacity: 0;
}
}
html.ba-motion .ba-reveal.ba-reveal--wait:not(.is-in) {
opacity: 0;
transform: translateY(12px);
}
html.ba-motion .ba-reveal.is-in {
opacity: 1;
transform: none;
transition:
opacity var(--ba-dur-med) var(--ba-ease-out),
transform var(--ba-dur-med) var(--ba-ease-out);
}
html.ba-motion .ba-reveal.ba-reveal--wait:not(.is-in) .ba-rule {
transform: scaleX(0);
transform-origin: left center;
}
html.ba-motion .ba-reveal.is-in .ba-rule {
transform: scaleX(1);
transform-origin: left center;
transition: transform var(--ba-dur-rule) var(--ba-ease-out);
}
html.ba-motion .ba-why__photo-layer {
transition: opacity var(--ba-dur-cross) var(--ba-ease-out);
}
@keyframes ba-motion-fade-up {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes ba-motion-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* partials/newsletter.css */
.ba-nl-form__hp {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.ba-nl-form__form {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
width: 100%;
max-width: 480px;
}
.ba-nl-form__email {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.ba-nl-form__label {
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.ba-nl-form__email input[type="email"] {
width: 100%;
height: var(--ba-btn-h, 48px);
padding: 0 16px;
border: 1px solid var(--ba-ink);
background: var(--ba-white);
color: var(--ba-black);
font-family: var(--ba-body);
font-size: 16px;
box-sizing: border-box;
}
.ba-nl-form__email input[type="email"]:focus {
outline: 2px solid var(--ba-ink);
outline-offset: 2px;
}
.ba-nl-form__consent {
display: flex;
flex-direction: row;
gap: 10px;
align-items: flex-start;
font-size: 14px;
line-height: 1.5;
}
.ba-nl-form__consent input {
margin-top: 3px;
flex: 0 0 auto;
}
.ba-nl-form__ok,
.ba-nl-form__err {
margin: 0;
font-size: 16px;
line-height: 1.5;
}
.ba-nl-form__err {
color: #8a1f1f;
}
.ba-nl--embed .ba-nl__panel {
position: relative;
overflow: hidden;
background: var(--ba-mint);
color: var(--ba-ink);
padding: 64px var(--ba-page-pad);
display: flex;
flex-direction: row;
gap: 48px;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.ba-nl--embed .ba-nl__copy {
max-width: 560px;
display: flex;
flex-direction: column;
gap: 16px;
}
.ba-nl--embed h2 {
margin: 0;
font-size: var(--ba-text-h2);
line-height: 1;
color: var(--ba-ink);
}
.ba-nl--embed p {
margin: 0;
font-size: 16px;
line-height: 1.5;
}
.ba-nl__preview {
margin: 0;
font-size: 14px;
}
.ba-nl--footer {
width: 100%;
display: flex;
flex-direction: row;
gap: 40px;
align-items: flex-end;
justify-content: space-between;
padding: 32px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-sizing: border-box;
}
.ba-nl--footer .ba-nl__copy {
max-width: 480px;
display: flex;
flex-direction: column;
gap: 12px;
}
.ba-nl--footer h2 {
margin: 0;
font-size: var(--ba-text-h3);
line-height: 1;
color: var(--ba-white);
}
.ba-nl--footer p {
margin: 0;
font-size: 16px;
line-height: 1.5;
color: var(--ba-white);
}
.ba-nl--footer .ba-nl-form__label,
.ba-nl--footer .ba-nl-form__consent {
color: var(--ba-white);
}
.ba-nl--footer .ba-nl-form__consent a {
color: var(--ba-mint);
text-decoration: underline;
}
.ba-nl--footer .ba-nl-form__ok {
color: var(--ba-mint);
}
.ba-squeeze {
display: flex;
flex-direction: row;
min-height: min(720px, 90vh);
background: var(--ba-white);
}
.ba-squeeze__media {
flex: 1 1 50%;
min-height: 320px;
background: var(--ba-ink) center / cover no-repeat;
}
.ba-squeeze__copy {
flex: 1 1 50%;
display: flex;
align-items: center;
background: var(--ba-mint);
color: var(--ba-ink);
}
.ba-squeeze__inner {
width: min(100%, 560px);
margin: 0 auto;
padding: 64px var(--ba-page-pad);
display: flex;
flex-direction: column;
gap: 24px;
box-sizing: border-box;
}
.ba-squeeze h1 {
margin: 0;
font-size: var(--ba-text-h1);
line-height: 1;
text-transform: uppercase;
color: var(--ba-ink);
}
.ba-squeeze__lede {
margin: 0;
font-size: 18px;
line-height: 1.5;
}
.ba-squeeze__body {
font-size: 16px;
line-height: 1.5;
}
.ba-squeeze__body p {
margin: 0 0 1em;
}
.ba-squeeze__form,
.ba-squeeze .ba-nl-form {
width: 100%;
}
.ba-nl__thanks h2 {
margin: 0 0 12px;
font-size: var(--ba-text-h3);
}
.ba-guides {
background: var(--ba-white);
}
.ba-guides__body {
padding: var(--ba-space) 0;
}
.ba-guides__empty {
margin: 0;
font-size: 16px;
line-height: 1.5;
}
.ba-card--guide .ba-card__media {
background: var(--ba-ink) center / cover no-repeat;
}
.ba-card--guide .ba-card__title {
font-size: var(--ba-text-h3);
}
@media (max-width: 1100px) {
.ba-nl--embed .ba-nl__panel,
.ba-nl--footer,
.ba-squeeze {
flex-direction: column;
align-items: stretch;
}
.ba-squeeze__inner {
padding: 48px 24px;
}
.ba-nl--embed .ba-nl__panel {
padding: 48px 24px;
}
}
/* partials/promo-popup.css */
.ba-promo[hidden] {
display: none !important;
}
.ba-promo__tab-wrap {
position: fixed;
left: max(16px, env(safe-area-inset-left, 0px));
bottom: max(16px, env(safe-area-inset-bottom, 0px));
z-index: 35;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.ba-promo__tab {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 20px;
border: 1px solid var(--ba-mint);
border-radius: var(--ba-radius);
background: var(--ba-ink);
color: var(--ba-mint);
font-family: var(--ba-display);
font-size: var(--ba-text-ui);
line-height: 1;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 8px 24px rgba(23, 36, 45, 0.28);
}
.ba-promo__tab:hover {
background: var(--ba-ink-hover);
color: var(--ba-white);
}
.ba-promo__tab-x {
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--ba-ink);
color: var(--ba-white);
cursor: pointer;
display: grid;
place-items: center;
box-shadow: 0 4px 12px rgba(23, 36, 45, 0.24);
}
.ba-promo__tab-x:hover {
background: var(--ba-ink-hover);
}
.ba-promo__tab-x img {
display: block;
width: 12px;
height: 12px;
}
.ba-promo__scrim {
display: none;
position: fixed;
inset: 0;
z-index: 55;
background: rgba(23, 36, 45, 0.4);
}
.ba-promo.is-open .ba-promo__scrim {
display: block;
}
.ba-promo.is-open .ba-promo__tab-wrap {
visibility: hidden;
}
.ba-promo__card {
position: fixed;
z-index: 60;
display: none;
flex-direction: column;
width: min(90vw, 400px);
max-height: min(80vh, 520px);
overflow: auto;
background: var(--ba-ink);
color: var(--ba-white);
border-radius: 16px;
box-shadow: 0 16px 40px rgba(23, 36, 45, 0.35), inset 0 3px 0 var(--ba-forest);
box-sizing: border-box;
}
.ba-promo.is-open .ba-promo__card,
.ba-promo.is-nudge .ba-promo__card,
.ba-promo.is-open .ba-promo__card[hidden],
.ba-promo.is-nudge .ba-promo__card[hidden] {
display: flex !important;
}
.ba-promo__close {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--ba-white);
color: var(--ba-ink);
cursor: pointer;
display: grid;
place-items: center;
}
.ba-promo__close:hover {
background: var(--ba-mint);
}
.ba-promo__close img {
display: block;
width: 14px;
height: 14px;
}
.ba-promo__media {
flex: 0 0 auto;
width: 100%;
height: 140px;
overflow: hidden;
border-radius: 16px 16px 0 0;
background: var(--ba-ink-hover);
}
.ba-promo__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ba-promo__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 20px 20px 24px;
}
.ba-promo__kicker {
margin: 0;
font-family: var(--ba-display);
font-size: 14px;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ba-mint);
}
.ba-promo__title {
margin: 0;
font-size: var(--ba-text-h5);
line-height: 1.15;
color: var(--ba-white);
}
.ba-promo__body {
margin: 0;
font-size: 16px;
line-height: 1.5;
color: var(--ba-white);
}
.ba-promo__cta.ba-btn {
margin-top: 4px;
}
@media (max-width: 800px) {
.ba-promo__card {
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
}
}
@media (min-width: 801px) {
.ba-promo__tab-wrap,
.ba-promo__scrim {
display: none !important;
}
.ba-promo.is-nudge .ba-promo__card {
left: auto;
top: auto;
right: max(24px, env(safe-area-inset-right, 0px));
bottom: max(24px, env(safe-area-inset-bottom, 0px));
transform: none;
width: min(320px, calc(100vw - 48px));
max-height: min(70vh, 440px);
}
.ba-promo__media {
height: 112px;
}
}
/* partials/reviews.css */
.ba-reviews-head {
background: var(--ba-white);
padding: var(--ba-space) 0 0;
}
.ba-reviews-head__inner {
width: min(calc(100% - 2 * var(--ba-page-pad)), var(--ba-wrap));
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
text-align: center;
}
.ba-reviews-head__lede {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 42rem;
}
.ba-reviews-head__lede h2 {
margin: 0;
font-family: var(--ba-display);
font-size: clamp(28px, 2vw + 1rem, 40px);
line-height: 1.15;
color: var(--ba-ink);
}
.ba-reviews-head__lede p {
margin: 0;
font-size: var(--ba-text-body);
line-height: 1.5;
color: var(--ba-ink);
}
.ba-guest-letter {
background: var(--ba-white);
padding: var(--ba-space) var(--ba-page-pad);
}
.ba-guest-letter:nth-of-type(even) {
background: var(--ba-mint);
}
.ba-guest-letter__inner {
width: min(100%, 42rem);
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 24px;
}
.ba-guest-letter__kicker {
margin: 0;
font-family: var(--ba-display);
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ba-ink);
}
.ba-guest-letter__pull {
margin: 0;
font-family: var(--ba-display);
font-size: clamp(24px, 1.6vw + 1rem, 36px);
line-height: 1.2;
color: var(--ba-ink);
text-transform: none;
}
.ba-guest-letter__body {
display: flex;
flex-direction: column;
gap: 16px;
font-size: 18px;
line-height: 1.6;
color: var(--ba-black);
}
.ba-guest-letter__body p {
margin: 0;
}
.ba-guest-letter__foot {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 8px;
}
.ba-guest-letter__by {
margin: 0;
font-weight: 600;
font-size: var(--ba-text-body);
color: var(--ba-ink);
}
.ba-guest-letter__people {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
font-size: 14px;
font-weight: 600;
color: var(--ba-ink);
}
.ba-reviews-grid {
background: var(--ba-white);
padding: var(--ba-space) 0;
}
.ba-reviews-grid__inner {
width: min(calc(100% - 2 * var(--ba-page-pad)), var(--ba-wrap));
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 40px;
}
.ba-reviews-grid__lede {
display: flex;
flex-direction: column;
gap: 12px;
text-align: center;
max-width: 42rem;
margin-inline: auto;
}
.ba-reviews-grid__lede h2 {
margin: 0;
font-family: var(--ba-display);
font-size: clamp(28px, 2vw + 1rem, 40px);
line-height: 1.15;
color: var(--ba-ink);
}
.ba-reviews-grid__lede p {
margin: 0;
line-height: 1.5;
}
.ba-reviews-grid__list {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.ba-reviews-grid__list > li {
min-width: 0;
}
.ba-reviews-grid__pager {
display: flex;
flex-wrap: wrap;
gap: 16px 24px;
justify-content: center;
align-items: center;
font-size: var(--ba-text-body);
}
.ba-reviews-grid__pager a {
color: var(--ba-ink);
font-family: var(--ba-display);
text-transform: uppercase;
text-decoration: none;
}
.ba-reviews-grid__pager a:hover {
opacity: 0.6;
}
@media (min-width: 720px) {
.ba-reviews-grid__list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1100px) {
.ba-reviews-grid__list {
grid-template-columns: repeat(3, 1fr);
}
}
/* partials/social-ninja-chat.css */
.wpsr-fm-chat-wrapper.wpsr-fm-bubble-position-bottom-right {
position: fixed;
right: 16px;
bottom: 24px;
overflow: visible;
}
.wpsr-fm-chat-wrapper.wpsr-fm-bubble-position-bottom-right .wpsr-fm-chat-box,
.wpsr-fm-chat-wrapper.wpsr-fm-bubble-position-bottom-right .wpsr-fm-chat-box.wpsr-fm-chat-box-display {
position: absolute !important;
top: auto !important;
left: auto !important;
right: 0 !important;
bottom: 64px !important;
margin: 0 !important;
height: auto;
max-height: min(520px, calc(100vh - 120px));
width: min(360px, calc(100vw - 32px));
}
.wpsr-fm-chat-wrapper .wpsr-fm-bubble-btn {
border-radius: var(--ba-radius, 1000px);
width: 56px;
height: 56px;
}
.wpsr-fm-chat-wrapper .wpsr-fm-bubble-btn.whatsapp {
background-color: var(--ba-mint, #c5e8e8) !important;
box-shadow: none;
opacity: 1 !important;
}
.wpsr-fm-chat-wrapper .wpsr-fm-bubble-btn.whatsapp img {
filter: brightness(0);
}
.wpsr-fm-chat-wrapper .wpsr-fm-chat-box {
border-radius: 16px;
overflow: hidden;
font-family: var(--ba-body, Quicksand, "Segoe UI", system-ui, sans-serif);
box-shadow: 0 8px 24px rgba(23, 36, 45, 0.18);
}
.wpsr-fm-chat-wrapper .wpsr-fm-group-details h3 {
font-family: var(--ba-display, BurfordRusticBook, Georgia, serif);
font-weight: 400;
}
.wpsr-fm-chat-wrapper .wpsr-chat-user-img,
.wpsr-fm-chat-wrapper .wpsr-fm-user-picture {
background: var(--ba-mint, #c5e8e8);
border-radius: 50%;
overflow: hidden;
}
.wpsr-fm-chat-wrapper .wpsr-chat-user-img img,
.wpsr-fm-chat-wrapper .wpsr-fm-user-picture img {
object-fit: contain;
padding: 8px;
background: var(--ba-mint, #c5e8e8);
}
.wpsr-fm-chat-wrapper .wpsr-fm-btn.whatsapp {
background-color: var(--ba-forest, #41a583);
border-radius: var(--ba-radius, 1000px);
}
.wpsr-fm-chat-wrapper .wpsr-prefilled-send-button {
border-radius: var(--ba-radius, 1000px);
}
.wpsr-fm-chat-wrapper .wpsr-fm-chat-box,
.wpsr-fm-chat-wrapper .wpsr-fm-chat-bubble {
transition: transform var(--ba-dur-med, 320ms) var(--ba-ease, cubic-bezier(0.215, 0.61, 0.355, 1)),
opacity var(--ba-dur-med, 320ms) var(--ba-ease, cubic-bezier(0.215, 0.61, 0.355, 1));
}
@media (max-width: 767px) {
.wpsr-fm-chat-wrapper.wpsr-fm-bubble-position-bottom-right {
right: 12px;
bottom: 16px;
}
.wpsr-fm-chat-wrapper.wpsr-fm-bubble-position-bottom-right .wpsr-fm-chat-box,
.wpsr-fm-chat-wrapper.wpsr-fm-bubble-position-bottom-right .wpsr-fm-chat-box.wpsr-fm-chat-box-display {
right: 0 !important;
bottom: 64px !important;
width: min(360px, calc(100vw - 24px));
max-height: calc(100vh - 108px);
}
}