/*
* app.css — GENERATED FILE, do not edit directly.
* Site-wide bundle. Edit the individual stylesheets, then run:
* bash scripts/build-css.sh
*/
/* ══════ css/tokens.css ══════ */
/**
* Design tokens — single source of truth for all brand values
*/
:root {
/* Brand colours */
--color-primary: #5B9CEA; /* blue — default brand (links, badges, borders) */
--color-primary-dark: #2E6FCC; /* hover state for blue elements */
--color-orange: #ED6223; /* orange — Book Now buttons + accent badges */
--color-orange-dark: #D4550E; /* hover for orange */
--color-green: #2EAF5C; /* green — Send Inquiry / confirm actions */
--color-green-dark: #1E8A44; /* hover for green */
--color-danger: #D64545; /* soft red — removal affordance (hover on added interest items) */
--color-navy: #000C5E;
--color-header: #353839; /* charcoal — header/footer chrome */
--color-dark: #353839; /* dark sections — matches header/footer */
--color-dark-deep: #252728; /* footer bar / stat strip — deeper charcoal */
/* Surfaces */
--color-surface-alt: #eef1f4; /* alt section bg — deep enough that white cards pop */
/* Layout */
--ba-header-h: 106px; /* matches actual rendered #ba-header height */
/* Typography */
--font-base: 'Montserrat', sans-serif;
--font-weight-price: 600; /* price values — less bold than headings */
/* Text colours */
--color-text: #303030;
--color-text-muted: #333333; /* body copy — darkened for readability (was #6c757d) */
--color-text-light: rgba(255, 255, 255, 0.75);
--color-text-faint: rgba(255, 255, 255, 0.4);
/* Gradients */
--gradient-ocean: linear-gradient(135deg, #0c3461 0%, #1a6ea8 60%, #0e7490 100%);
/* Overrides for Bootstrap */
--bs-primary: #5B9CEA;
--bs-primary-rgb: 91, 156, 234;
--bs-font-sans-serif: 'Montserrat', sans-serif;
--bs-body-color: #303030;
--bs-link-color: #5B9CEA;
--bs-link-hover-color: #2E6FCC;
/* Mobile heading scale — override per page at max-width: 767.98px */
--font-size-h1-mobile: 1.75rem;
--font-size-h2-mobile: 1.35rem;
--font-size-h3-mobile: 1.15rem;
/* Button size modifiers */
--btn-padding-y-sm: 0.45rem;
--btn-padding-x-sm: 1rem;
--btn-font-size-sm: 0.8rem;
--btn-padding-y-lg: 1rem;
--btn-padding-x-lg: 2.5rem;
--btn-font-size-lg: 1.1rem;
}
/* ══════ css/base.css ══════ */
/**
* Base — global typography and element defaults
* Builds on top of Bootstrap + Montserrat font
*/
html {
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
font-family: var(--font-base);
color: var(--color-text);
/* NO overflow-x here. `html` above is already not `visible`, so a second
overflow declaration on body stops propagating to the viewport and
turns body into its own scroll container (overflow-y computes to
auto). The sticky header then anchors to body's scrollport — which
never scrolls — and silently scrolls off the page instead of sticking.
html's overflow-x:hidden alone still clips horizontal overflow. */
}
/* ── Headings ────────────────────────────────────────────────────────────────
Standard scale used consistently across all pages.
Use h1–h6 or .h1–.h6 Bootstrap aliases.
*/
h1, .h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
h2, .h2 { font-size: 2rem; font-weight: 700; line-height: 1.25; }
h3, .h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; }
h4, .h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
h5, .h5 { font-size: 1rem; font-weight: 600; line-height: 1.4; }
h6, .h6 { font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--font-base);
color: var(--color-text);
margin-bottom: 0.75em;
}
/* ── Body text ───────────────────────────────────────────────────────────────*/
p {
line-height: 1.7;
margin-bottom: 1rem;
}
/* ── Links ───────────────────────────────────────────────────────────────────*/
a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.2s;
}
a:hover {
color: var(--color-primary-dark);
}
/* ── Text size scale ─────────────────────────────────────────────────────────
Reusable anywhere — prefer these over component-specific sizes.
*/
.text-fine { font-size: 0.75rem; } /* 12px — legal, footnotes (Google minimum) */
.text-xs { font-size: 0.8125rem; } /* 13px — captions, labels */
.text-sm { font-size: 0.875rem; } /* 14px — secondary content */
.text-base { font-size: 1rem; } /* 16px — body */
.text-lg { font-size: 1.125rem; } /* 18px */
.text-xl { font-size: 1.25rem; } /* 20px */
/* ── Text colour helpers for dark backgrounds ────────────────────────────────*/
.text-light-75 { color: var(--color-text-light); }
.text-light-40 { color: var(--color-text-faint); }
/* ── Section spacing ─────────────────────────────────────────────────────────*/
.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }
.section-lg { padding: 7rem 0; }
/* ── CJK font fallback for Chinese pages ─────────────────────────────────*/
:lang(zh) {
font-family: 'Montserrat', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
/* ── Mobile heading overrides ──────────────────────────────────────────── */
@media (max-width: 767.98px) {
h1, .h1 { font-size: var(--font-size-h1-mobile, 1.75rem); }
h2, .h2 { font-size: var(--font-size-h2-mobile, 1.35rem); }
h3, .h3 { font-size: var(--font-size-h3-mobile, 1.15rem); }
/* Override class-based heading sizes too — component classes win over element selectors */
.ba-hero__title,
.ba-section__title,
.ba-tile__title,
.ba-dive-card__title,
.ba-card__title { font-size: var(--font-size-h2-mobile, 1.35rem); }
}
/* ══════ css/components.css ══════ */
/*
* components.css — GENERATED FILE, do not edit directly.
* Edit files in css/components/ then run: bash scripts/build-css.sh
* (push-to-dev.sh runs the build automatically.)
*/
/* ══════ css/components/hero.css ══════ */
/* ── Hero — full-bleed page opener (template-parts/hero.php) ─────────────────
*
* Variants:
* (default) full-height photo hero — image + gradient overlay
* .ba-hero--compact short gradient band, no photo — utility pages (pricing)
*
* Content is always overlaid on the image, never below it.
* ─────────────────────────────────────────────────────────────────────────── */
.ba-hero {
position: relative;
width: 100%;
height: 90vh;
min-height: 520px;
max-height: 900px;
overflow: hidden;
display: flex;
align-items: center;
}
.ba-hero__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
z-index: 0;
}
.ba-hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.68) 0%,
rgba(0, 0, 0, 0.45) 30%,
rgba(0, 0, 0, 0.10) 60%,
transparent 100%
);
}
.ba-hero__content {
position: relative;
z-index: 2;
padding-top: 2rem;
padding-bottom: 2rem;
}
.ba-hero .ba-pill {
margin-bottom: 1.25rem;
}
.ba-hero__title {
font-size: clamp(2rem, 4.5vw, 3.25rem);
font-weight: 900;
color: #fff;
line-height: 1.15;
margin-bottom: 1.25rem;
max-width: 16em;
}
.ba-hero__sub {
font-size: clamp(1rem, 1.8vw, 1.2rem);
color: rgba(255, 255, 255, 0.88);
line-height: 1.6;
margin-bottom: 2rem;
max-width: 46ch;
}
.ba-hero__actions {
display: flex;
align-items: center;
gap: 0.85rem;
flex-wrap: wrap;
}
/* ── Compact variant — gradient band for utility pages ───────────────────── */
.ba-hero--compact {
height: auto;
min-height: 0;
max-height: none;
background: var(--gradient-ocean);
}
.ba-hero--compact .ba-hero__content {
padding-top: 2.5rem;
padding-bottom: 2.25rem;
}
@media (min-width: 768px) {
.ba-hero--compact .ba-hero__content {
padding-top: 4rem;
padding-bottom: 3.5rem;
}
}
.ba-hero--compact .ba-hero__title {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.1;
margin-bottom: 0.85rem;
}
.ba-hero--compact .ba-hero__sub {
font-size: 1rem;
color: rgba(255, 255, 255, 0.80);
margin-bottom: 0;
}
.ba-hero--compact .ba-hero__sub + .ba-hero__actions {
margin-top: 1.75rem;
}
/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
.ba-hero:not(.ba-hero--compact) {
height: 80vh;
align-items: flex-end;
padding-bottom: 3rem;
}
.ba-hero:not(.ba-hero--compact) .ba-hero__overlay {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.70) 0%,
rgba(0, 0, 0, 0.40) 40%,
rgba(0, 0, 0, 0.10) 70%,
transparent 100%
);
}
.ba-hero__img {
object-position: center center;
}
.ba-hero__sub {
font-size: 0.9rem;
}
}
/* ══════ css/components/buttons.css ══════ */
/* ── Buttons ──────────────────────────────────────────────────────────────── */
/* Primary — orange filled pill (Book Now, main CTAs) */
.btn-primary {
--bs-btn-bg: var(--color-orange);
--bs-btn-border-color: var(--color-orange);
--bs-btn-hover-bg: var(--color-orange-dark);
--bs-btn-hover-border-color: var(--color-orange-dark);
--bs-btn-active-bg: var(--color-orange-dark);
--bs-btn-active-border-color: var(--color-orange-dark);
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-active-color: #fff;
--bs-btn-font-weight: 600;
--bs-btn-padding-x: 2rem;
--bs-btn-padding-y: 0.85rem;
--bs-btn-font-size: 1rem;
border-radius: 999px;
letter-spacing: 0.02em;
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn-primary:hover {
box-shadow: 0 4px 16px rgba(237, 98, 35, 0.35);
}
/* Override all other Bootstrap variants → primary SHAPE
Every variant keeps its own semantic colour but inherits the
pill shape, padding, font-weight and letter-spacing from primary.
Use btn-primary for the brand blue CTA everywhere possible. */
.btn-dark,
.btn-secondary,
.btn-danger,
.btn-warning,
.btn-info,
.btn-success,
.btn-light {
--bs-btn-font-weight: 600;
--bs-btn-padding-x: 2rem;
--bs-btn-padding-y: 0.85rem;
--bs-btn-font-size: 1rem;
border-radius: 999px;
letter-spacing: 0.02em;
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
/* Outline — blue (matches --color-primary) */
.btn-outline-primary {
--bs-btn-color: var(--color-primary);
--bs-btn-border-color: var(--color-primary);
--bs-btn-hover-bg: var(--color-primary);
--bs-btn-hover-border-color: var(--color-primary);
--bs-btn-hover-color: #fff;
--bs-btn-active-bg: var(--color-primary-dark);
--bs-btn-active-border-color: var(--color-primary-dark);
--bs-btn-active-color: #fff;
--bs-btn-padding-x: 2rem;
--bs-btn-padding-y: 0.85rem;
--bs-btn-font-size: 1rem;
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.02em;
}
/* Ghost — frosted, used on hero/dark backgrounds */
.btn-ghost {
display: inline-block;
padding: 0.75rem 2rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
font-weight: 600;
font-family: var(--font-base);
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn-ghost:hover {
background: var(--color-primary);
border-color: var(--color-primary);
box-shadow: 0 6px 24px rgba(91, 156, 234, 0.35);
color: #fff;
}
/* Inline row action — pill button in price tables and lists */
.ba-btn-row {
display: inline-flex;
align-items: center;
padding: 0.45em 1.1em;
font-size: 0.78rem;
font-weight: 600;
color: var(--color-primary);
background: transparent;
border: 1.5px solid rgba(59, 130, 246, 0.3);
border-radius: 999px;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s, color 0.15s, border-color 0.15s;
line-height: 1.5;
flex-shrink: 0;
}
.ba-btn-row:hover,
.ba-btn-row:focus {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
text-decoration: none;
}
@media (max-width: 575.98px) {
.ba-btn-row {
min-height: 44px;
}
}
/* Dark-section variant — light outline on dark backgrounds */
.ba-section--dark .ba-btn-row {
color: rgba(255, 255, 255, 0.75);
border-color: rgba(255, 255, 255, 0.2);
}
.ba-section--dark .ba-btn-row:hover,
.ba-section--dark .ba-btn-row:focus {
background: rgba(255, 255, 255, 0.12);
color: #fff;
border-color: rgba(255, 255, 255, 0.4);
}
/* Filled variant — used on recommended/highlighted price rows */
.ba-btn-row--filled {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.ba-btn-row--filled:hover,
.ba-btn-row--filled:focus {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: #fff;
}
/* Size modifier classes — small and large button variants */
.ba-btn--sm {
--bs-btn-padding-y: var(--btn-padding-y-sm);
--bs-btn-padding-x: var(--btn-padding-x-sm);
--bs-btn-font-size: var(--btn-font-size-sm);
}
.ba-btn--lg {
--bs-btn-padding-y: var(--btn-padding-y-lg);
--bs-btn-padding-x: var(--btn-padding-x-lg);
--bs-btn-font-size: var(--btn-font-size-lg);
}
/* Plain inline link — low-priority action, no button chrome */
.ba-text-link {
display: inline-flex;
align-items: center;
gap: 0.3em;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
transition: gap 0.15s, opacity 0.15s;
}
.ba-text-link:hover {
opacity: 0.8;
gap: 0.5em;
text-decoration: none;
color: var(--color-primary);
}
/* ══════ css/components/section.css ══════ */
/* ── Section — shared layout block used on every page ────────────────────────
*
* Structure:
* .ba-section vertical rhythm + background
* .ba-section__header label → title → body (62ch max)
* .ba-section__label
* .ba-section__title
* .ba-section__body
*
* Modifiers:
* .ba-section--alt light gray background (var(--color-surface-alt))
* .ba-section--dark dark background, white title, orange label
*
* Rhythm rule: alternate white → alt → dark. Never two dark back-to-back.
* ─────────────────────────────────────────────────────────────────────────── */
.ba-section {
padding: 3.5rem 0;
}
@media (max-width: 575.98px) {
.ba-section {
padding: 2.5rem 0;
}
.ba-section__header {
margin-bottom: 1.25rem;
}
}
@media (min-width: 768px) {
.ba-section {
padding: 6rem 0;
}
}
.ba-section__label {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 0.85rem;
}
.ba-section__label--orange {
color: var(--color-orange);
}
.ba-section__title {
font-size: clamp(1.6rem, 3vw, 2.25rem);
font-weight: 800;
line-height: 1.2;
color: var(--color-text);
margin-bottom: 1.25rem;
}
.ba-section__body {
font-size: 1.05rem;
color: var(--color-text-muted);
line-height: 1.75;
margin-bottom: 0.75rem;
}
/* Header block above a grid/table — constrained for readability */
.ba-section__header {
max-width: 62ch;
margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
.ba-section__header {
margin-bottom: 3rem;
}
}
.ba-section__header--center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* ── Background variants ─────────────────────────────────────────────────── */
.ba-section--alt {
background: var(--color-surface-alt);
}
.ba-section--dark {
background: var(--color-dark);
}
.ba-section--dark .ba-section__label {
color: var(--color-orange);
}
.ba-section--dark .ba-section__title {
color: #fff;
}
.ba-section--dark .ba-section__body {
color: rgba(255, 255, 255, 0.65);
}
/* ── Side image (feature split rows) ─────────────────────────────────────── */
.ba-section__img-wrap {
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
.ba-section__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.ba-section__img-wrap:hover .ba-section__img {
transform: scale(1.02);
}
/* ── Mobile collapse toggle (optional, via section-header.php) ───────────── */
.ba-section__heading-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.ba-collapse-btn {
flex-shrink: 0;
background: none;
border: none;
padding: 0.3rem;
min-width: 44px;
min-height: 44px;
color: var(--color-primary);
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.ba-section--dark .ba-collapse-btn {
color: rgba(255, 255, 255, 0.7);
}
.ba-collapse-btn .bi {
display: block;
transition: transform 0.25s ease;
}
.ba-collapse-btn[aria-expanded="false"] .bi {
transform: rotate(-90deg);
}
.ba-section__count {
display: inline-block;
margin-top: 0.6rem;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-primary);
}
.ba-section--dark .ba-section__count {
color: rgba(255, 255, 255, 0.5);
}
/* Desktop: collapsible section content is always expanded */
@media (min-width: 768px) {
.ba-section-collapse,
.ba-section-collapse.collapsing {
display: block !important;
height: auto !important;
overflow: visible !important;
}
}
/* ══════ css/components/pill.css ══════ */
/* ── Pill — frosted glass badge, used on dark/image backgrounds ─────────────
*
* Usage: section-level labels above headings ("SSI Certification", "Try Scuba")
* with optional animated dot (.ba-pill__dot).
*
* NOT for inline status labels inside text/rows → use .ba-badge (below)
* ─────────────────────────────────────────────────────────────────────────── */
.ba-pill {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.35em 0.9em;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.30);
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fff;
align-self: flex-start; /* never stretch to parent width */
}
.ba-pill__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-orange);
flex-shrink: 0;
}
/* Modifier: light background (white/grey sections) */
.ba-pill--primary {
color: var(--color-orange);
border-color: rgba(59, 130, 246, 0.3);
background: rgba(59, 130, 246, 0.08);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.ba-pill--primary .ba-pill__dot {
background: var(--color-orange);
}
/* Modifier: orange accent */
.ba-pill--orange {
color: var(--color-orange);
border-color: rgba(237, 98, 35, 0.45);
background: rgba(237, 98, 35, 0.12);
}
.ba-pill--orange .ba-pill__dot {
background: var(--color-orange);
}
/* Modifier: solid fill — for badges over photos where frost isn't enough */
.ba-pill--solid-orange {
color: #fff;
border-color: var(--color-orange);
background: var(--color-orange);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.ba-pill--solid-orange .ba-pill__dot {
background: #fff;
}
/* ── Badge — inline status label ─────────────────────────────────────────────
*
* Usage: short inline tags inside headings, price rows, card titles.
* Examples: "Most Popular", "Best Value", "Pack", "Recommended"
*
* NOT for section-level labels above headings → use .ba-pill
* NOT for savings amounts ("Save ¥4,000") → use .ba-saving (pricing.css)
*
* Modifiers:
* .ba-badge--primary blue fill — informational status (Most Popular, Best Value)
* .ba-badge--orange orange fill — recommended action (Recommended, Pack)
* .ba-badge--outline no fill — subtle, light backgrounds
* ─────────────────────────────────────────────────────────────────────────── */
.ba-badge {
display: inline-block;
font-size: 0.625rem; /* 10px — tiny inline label */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.6; /* gives pill height without padding-y */
padding: 0 0.6em;
border-radius: 4px; /* subtle rectangle — more professional than full pill */
vertical-align: 0.15em; /* aligns against cap height of adjacent heading */
white-space: nowrap;
}
.ba-badge--primary {
background: var(--color-primary-dark); /* #2E6FCC — dark enough for crisp white text */
color: #fff;
}
.ba-badge--orange {
background: var(--color-orange);
color: #fff;
}
.ba-badge--outline {
background: transparent;
color: var(--color-primary-dark);
border: 1px solid var(--color-primary-dark);
line-height: 1.5; /* compensate for border taking vertical space */
}
/* ══════ css/components/card.css ══════ */
/* ── Card — the universal content card (template-parts/card.php) ─────────────
*
* One card system for every "image + badge + body + CTA" pattern:
* courses, specialties, online courses, blog posts, offers.
*
* Structure:
* .ba-card
* .ba-card__img-wrap 16/10 always — no exceptions
* .ba-card__img
* .ba-card__overlay gradient for badge legibility
* .ba-card__badge pill, top-left
* .ba-card__body
* .ba-card__meta icon + text facts row (optional)
* .ba-card__kicker small caps line, e.g. date (optional)
* .ba-card__title
* .ba-card__desc
* .ba-card__cta .btn.btn-primary — never a plain text link
*
* Modifiers:
* .ba-card--featured highlighted with brand outline + glow
* .ba-card--sm tighter body, smaller title — dense grids
* .ba-card--dark frosted card for dark sections
*
* Grid helper:
* .ba-card-grid 1 col mobile → 2 col tablet → 3 col desktop
* .ba-card-grid--4 → 4 col desktop
* ─────────────────────────────────────────────────────────────────────────── */
.ba-card {
border: none;
border-radius: 1rem;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
transition: box-shadow 0.25s, transform 0.25s;
display: flex;
flex-direction: column;
}
.ba-card:hover {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
transform: translateY(-4px);
}
.ba-card:active {
transform: translateY(-2px) scale(0.98);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.ba-card__img-wrap {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
display: block;
}
.ba-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.ba-card:hover .ba-card__img {
transform: scale(1.05);
}
.ba-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, transparent 60%);
pointer-events: none;
}
.ba-card__badge {
position: absolute;
top: 0.9rem;
left: 0.9rem;
}
.ba-card__body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
}
.ba-card__meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
margin-bottom: 0.9rem;
}
.ba-card__meta-item {
display: inline-flex;
align-items: center;
gap: 0.3em;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
}
.ba-card__meta-item .bi {
font-size: 0.85em;
color: var(--color-primary);
}
.ba-card__kicker {
display: block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 0.5rem;
}
.ba-card__title {
font-size: 1.25rem;
font-weight: 800;
color: var(--color-text);
margin-bottom: 0.6rem;
line-height: 1.25;
}
.ba-card__title a {
color: inherit;
text-decoration: none;
}
.ba-card__title a:hover {
color: var(--color-primary);
}
.ba-card__desc {
font-size: 0.9rem;
color: var(--color-text-muted);
line-height: 1.7;
flex: 1;
margin-bottom: 1.25rem;
}
.ba-card__desc:last-child {
margin-bottom: 0;
}
.ba-card__cta {
align-self: flex-start;
padding: 0.6rem 1.5rem;
font-size: 0.875rem;
}
/* ── Featured — brand outline + glow ─────────────────────────────────────── */
.ba-card--featured {
box-shadow: 0 4px 24px rgba(91, 156, 234, 0.18);
outline: 2px solid rgba(91, 156, 234, 0.3);
}
.ba-card--featured:hover {
box-shadow: 0 10px 36px rgba(91, 156, 234, 0.26);
}
/* ── Small — dense grids (specialties, online courses) ───────────────────── */
.ba-card--sm .ba-card__body {
padding: 1.25rem;
}
.ba-card--sm .ba-card__title {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.ba-card--sm .ba-card__desc {
font-size: 0.85rem;
}
/* ── Dark — frosted card for dark sections ───────────────────────────────── */
.ba-card--dark {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: none;
}
.ba-card--dark:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(91, 156, 234, 0.4);
box-shadow: none;
transform: translateY(-4px);
}
.ba-card--dark .ba-card__img {
filter: brightness(0.9);
}
.ba-card--dark:hover .ba-card__img {
filter: brightness(1);
}
.ba-card--dark .ba-card__title {
color: #fff;
}
.ba-card--dark .ba-card__kicker,
.ba-card--dark .ba-card__desc,
.ba-card--dark .ba-card__meta-item {
color: rgba(255, 255, 255, 0.55);
}
/* ── Grid helper ─────────────────────────────────────────────────────────── */
.ba-card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: stretch;
}
@media (max-width: 767.98px) {
.ba-card-grid {
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 767.98px) {
.ba-card-grid {
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 575.98px) {
.ba-card__cta {
width: 100%;
text-align: center;
}
}
@media (min-width: 768px) {
.ba-card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.ba-card-grid {
grid-template-columns: repeat(3, 1fr);
}
.ba-card-grid--4 {
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
}
/* ══════ css/components/tile.css ══════ */
/* ── Tile — full-bleed image tile with overlaid content ──────────────────────
*
* Big visual navigation blocks (homepage "Experiences", category links).
* Image fills the tile; pill + title + CTA sit on a bottom gradient.
*
* Structure:
* .ba-tile-grid edge-to-edge 2-col grid (1 col mobile)
* .ba-tile
* .ba-tile__img
* .ba-tile__overlay
* .ba-tile__body pill → title → CTA
* ─────────────────────────────────────────────────────────────────────────── */
.ba-tile-grid {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.ba-tile-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.ba-tile {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
aspect-ratio: 16 / 9;
}
@media (min-width: 480px) {
.ba-tile {
aspect-ratio: 3 / 2;
}
}
.ba-tile__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.6s ease;
}
.ba-tile:hover .ba-tile__img {
transform: scale(1.06);
}
.ba-tile__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.00) 50%
);
}
.ba-tile__body {
position: relative;
z-index: 1;
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.ba-tile__title {
font-size: clamp(1.15rem, 1.6vw, 1.5rem);
font-weight: 800;
line-height: 1.2;
color: #fff;
margin: 0 0 0.75rem;
}
.ba-tile__cta {
align-self: flex-start;
padding: 0.55rem 1.25rem;
font-size: 0.8rem;
}
/* ══════ css/components/feature.css ══════ */
/* ── Feature — icon + title + text card ──────────────────────────────────────
*
* Benefit/USP grids ("Why dive with us", service highlights).
* Designed for dark sections by default; --light for white/gray sections.
*
* Structure:
* .ba-feature-grid 1 col mobile → 2 col → 4 col desktop
* .ba-feature
* .ba-feature__icon Bootstrap icon
* .ba-feature__title
* .ba-feature__body
* ─────────────────────────────────────────────────────────────────────────── */
.ba-feature-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 480px) {
.ba-feature-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.ba-feature-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.ba-feature {
padding: 1.75rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.ba-feature:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(91, 156, 234, 0.35);
transform: translateY(-3px);
}
.ba-feature__icon {
font-size: 1.5rem;
color: var(--color-primary);
display: block;
margin-bottom: 1rem;
}
.ba-feature__title {
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
color: #fff;
margin-bottom: 0.5rem;
}
.ba-feature__body {
font-size: 0.875rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.55);
margin: 0;
}
.ba-feature__more {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 1rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 0.25em;
text-decoration-color: rgba(91, 156, 234, 0.45);
transition: color 0.2s, text-decoration-color 0.2s;
}
.ba-feature__more i {
font-size: 0.75rem;
transition: transform 0.2s;
}
.ba-feature__more:hover {
color: #fff;
text-decoration-color: #fff;
}
.ba-feature__more:hover i {
transform: translateX(3px);
}
/* ── Light variant — white/gray sections ─────────────────────────────────── */
.ba-feature--light {
border-color: rgba(0, 0, 0, 0.08);
background: #fff;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}
.ba-feature--light:hover {
background: #fff;
border-color: rgba(91, 156, 234, 0.4);
}
.ba-feature--light .ba-feature__title {
color: var(--color-text);
}
.ba-feature--light .ba-feature__body {
color: var(--color-text-muted);
}
.ba-feature--light .ba-feature__more {
color: var(--color-primary-dark);
text-decoration-color: rgba(46, 111, 204, 0.4);
}
.ba-feature--light .ba-feature__more:hover {
color: var(--color-text);
text-decoration-color: var(--color-text);
}
/* ══════ css/components/stats.css ══════ */
/* ── Stats — dark horizontal trust strip ─────────────────────────────────────
*
* Big number + small label, separated by hairlines. Social proof between
* sections ("6 max divers · 5 languages · 15+ years · 5.0 rating").
*
* Structure:
* .ba-stats
* .ba-stats__list
* .ba-stats__item
* .ba-stats__number
* .ba-stats__label
* .ba-stats__divider (aria-hidden)
* ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
.ba-stats__item {
padding: 0.5rem 1rem;
}
}
/* ── Mobile ──────────────────────────────────────────────────────────────── */
.ba-stats {
background: var(--color-dark-deep);
padding: 3rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ba-stats__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.ba-stats__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 0.75rem 1.75rem;
text-align: center;
}
@media (min-width: 768px) {
.ba-stats__item {
padding: 0.75rem 3.5rem;
}
}
.ba-stats__number {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
line-height: 1;
letter-spacing: -0.02em;
color: var(--color-primary);
font-family: var(--font-base);
}
.ba-stats__label {
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
color: rgba(255, 255, 255, 0.55);
}
.ba-stats__divider {
display: none;
width: 1px;
height: 3rem;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.12);
}
@media (min-width: 768px) {
.ba-stats__divider {
display: block;
}
}
/* ══════ css/components/price-table.css ══════ */
/* ── Price table — stacked rows of name · price · action ─────────────────────
*
* Structure:
* .ba-price-group optional titled group of tables
* .ba-price-group__title
* .ba-price-table
* .ba-price-row
* .ba-price-row__info name + details
* .ba-price-row__right [.ba-saving] + __price + .ba-btn-row
*
* Modifiers:
* .ba-price-row--highlight recommended row — tinted, left accent bar
*
* Dark sections: rows restyle automatically inside .ba-section--dark.
* Mobile-first: info stacks above price+button, single line from 576px.
* ─────────────────────────────────────────────────────────────────────────── */
.ba-price-group {
margin-bottom: 2.5rem;
}
.ba-price-group:last-child {
margin-bottom: 0;
}
.ba-price-group__title {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-orange);
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid rgba(59, 130, 246, 0.15);
}
.ba-price-table {
display: flex;
flex-direction: column;
gap: 0;
}
/* Mobile: name on top, price + button below — no cramped horizontal squeeze */
.ba-price-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.ba-price-row:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.07);
}
@media (min-width: 576px) {
.ba-price-row {
flex-direction: row;
align-items: center;
gap: 1rem;
}
}
.ba-price-row--highlight {
background: rgba(59, 130, 246, 0.06);
border-left: 3px solid var(--color-orange);
border-radius: 0 0.5rem 0.5rem 0;
margin: 0.25rem -0.75rem;
padding: 1rem 0.75rem 1rem calc(0.75rem - 3px);
}
.ba-price-row__info {
flex: 1;
min-width: 0;
}
.ba-price-row__info > strong {
display: block;
font-size: 0.95rem;
font-weight: 700;
color: var(--color-dark);
margin-bottom: 0.15rem;
}
/* Direct-child selector — prevents leaking into nested .ba-badge spans etc. */
.ba-price-row__info > span {
font-size: 0.8rem;
color: #6b7280;
line-height: 1.4;
}
/* Mobile: stretch full width, price left / button right */
.ba-price-row__right {
display: flex;
align-items: center;
gap: 0.85rem;
width: 100%;
justify-content: space-between;
}
@media (min-width: 576px) {
.ba-price-row__right {
width: auto;
flex-shrink: 0;
justify-content: flex-end;
}
}
.ba-price-row__price {
font-size: 1.15rem;
font-weight: var(--font-weight-price);
color: var(--color-dark);
white-space: nowrap;
}
.ba-price-row__price small {
font-size: 0.72rem;
font-weight: 500;
color: #9ca3af;
}
/* ── Savings amount pill — "Save ¥4,000" ─────────────────────────────────────
* Only for actual savings amounts produced by ba_save_badge().
* For status labels ("Most Popular", "Recommended") use .ba-badge instead. */
.ba-saving {
display: inline-flex;
align-items: center;
font-size: 0.72rem;
font-weight: 700;
color: #fff;
background: var(--color-orange);
padding: 0.2rem 0.6rem;
border-radius: 999px;
white-space: nowrap;
}
/* ── Dark section restyle ────────────────────────────────────────────────── */
.ba-section--dark .ba-price-row {
border-color: rgba(255, 255, 255, 0.08);
}
.ba-section--dark .ba-price-row:first-child {
border-top-color: rgba(255, 255, 255, 0.08);
}
.ba-section--dark .ba-price-row--highlight {
background: rgba(255, 255, 255, 0.06);
}
.ba-section--dark .ba-price-row__info > strong,
.ba-section--dark .ba-price-row__price {
color: #fff;
}
.ba-section--dark .ba-price-row__info > span {
color: rgba(255, 255, 255, 0.5);
}
/* ══════ css/components/cta-band.css ══════ */
/* ── CTA band — dark mid-page conversion strip (template-parts/cta-band.php) ─
*
* Navy gradient band with eyebrow + title left, button right.
* Drop between content sections to re-surface the main action.
* ─────────────────────────────────────────────────────────────────────────── */
.ba-cta-band {
background: var(--gradient-ocean);
padding: 3.5rem 0;
position: relative;
overflow: hidden;
}
.ba-cta-band::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.ba-cta-band__inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
@media (max-width: 991.98px) {
.ba-cta-band__inner {
flex-direction: column;
text-align: center;
}
}
.ba-cta-band__eyebrow {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-primary);
margin-bottom: 0.4rem;
}
.ba-cta-band__title {
font-size: clamp(1.4rem, 2.5vw, 2rem);
font-weight: 800;
color: #fff;
line-height: 1.2;
margin: 0;
}
.ba-cta-band__btn {
white-space: nowrap;
padding: 0.9rem 2.5rem;
flex-shrink: 0;
}
/* ══════ css/components/faq.css ══════ */
/* ── FAQ / Accordion ──────────────────────────────────────────────────────── */
/* Reused for FAQ section (section-faq.php) and collapsible course groups. */
.ba-faq-accordion {
--bs-accordion-bg: transparent;
--bs-accordion-border-color: transparent;
--bs-accordion-border-radius: 0;
--bs-accordion-inner-border-radius: 0;
}
.ba-faq-item {
background: transparent;
border: none !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}
.ba-faq-item:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
}
.ba-faq-btn {
background: transparent !important;
color: var(--color-text) !important;
font-size: 0.95rem;
font-weight: 700;
padding: 1.1rem 2rem 1.1rem 0;
box-shadow: none !important;
border-radius: 0 !important;
}
.ba-faq-btn:not(.collapsed) {
color: var(--color-primary) !important;
}
.ba-faq-body {
padding: 0 0 1.25rem;
font-size: 0.9rem;
color: var(--color-text-muted);
line-height: 1.75;
}
/* When accordion body contains a price table */
.ba-faq-body .ba-price-table {
margin-top: 0.25rem;
}
/* ══════ css/components/cta.css ══════ */
/* ── Section CTA — reusable bottom call-to-action (section-cta.php) ─────── */
.ba-section-cta {
padding: 5rem 0;
}
.ba-section-cta__title {
max-width: 22em;
margin-left: auto;
margin-right: auto;
}
.ba-section-cta__sub {
max-width: 52ch;
margin: 0 auto 2rem;
}
.ba-section-cta__actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* ══════ css/components/map.css ══════ */
@media (max-width: 575.98px) {
.ba-map-wrap iframe {
height: 280px;
}
}
/* ── Map section — reusable location/directions embed ────────────────────── */
.ba-section-map {
padding: 5rem 0;
}
.ba-map-header {
margin-bottom: 2rem;
}
.ba-map-wrap {
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.ba-map-wrap iframe {
display: block;
width: 100%;
height: 420px;
border: none;
}
/* ══════ css/components/forms.css ══════ */
/* ── Shared form styles — booking + contact forms ─────────────────
* Imported via enqueue.php on both booking and contact pages.
* Page-specific form styles stay in booking.css / contact.css.
* ──────────────────────────────────────────────────────────────────── */
/* ── Inline label + input row ─────────────────────────────────── */
.ba-booking-form .form-group,
.ba-contact-form .form-group {
display: grid;
grid-template-columns: 140px 1fr;
gap: 0.75rem;
align-items: center;
margin-bottom: 1rem;
}
@media (max-width: 480px) {
.ba-booking-form .form-group,
.ba-contact-form .form-group {
grid-template-columns: 1fr;
gap: 0.25rem;
}
}
/* ── Label ────────────────────────────────────────────────────── */
.ba-booking-form .form-label,
.ba-contact-form .form-label {
display: block;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text);
margin-bottom: 0;
}
.ba-booking-form .form-label .required,
.ba-contact-form .form-label .required {
color: var(--color-orange);
}
/* ── Input / select / textarea ────────────────────────────────── */
.ba-booking-form .form-input,
.ba-contact-form .form-input {
display: block;
width: 100%;
padding: 0.85rem 1rem;
font-size: 0.95rem;
font-family: inherit;
color: var(--color-text);
background: #fff;
border: 1.5px solid #dde0e5;
border-radius: 10px;
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
}
.ba-booking-form .form-input:focus,
.ba-contact-form .form-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(91, 156, 234, 0.15);
}
.ba-booking-form .form-input::placeholder,
.ba-contact-form .form-input::placeholder {
color: #b0b5bd;
}
.ba-booking-form select.form-input {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
cursor: pointer;
}
.ba-booking-form textarea.form-input {
resize: vertical;
min-height: 100px;
}
.ba-contact-form textarea.form-input {
resize: vertical;
min-height: 140px;
}
/* ── Submit button — green pill ───────────────────────────────── */
.ba-booking-form .btn-submit,
.ba-contact-form .btn-submit {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 2.5rem;
font-size: 1rem;
font-weight: 600;
font-family: inherit;
color: #fff;
background: var(--color-green);
border: none;
border-radius: 999px;
cursor: pointer;
letter-spacing: 0.02em;
transition: background-color 0.2s;
}
.ba-booking-form .btn-submit:hover,
.ba-contact-form .btn-submit:hover {
background: var(--color-green-dark);
}
/* ── Success / error states ───────────────────────────────────── */
.ba-booking-success,
.ba-contact-success {
text-align: center;
padding: 3rem 2rem;
}
.ba-booking-success__icon,
.ba-contact-success__icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: #d4edda;
color: #155724;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.ba-booking-error,
.ba-contact-error {
padding: 0.8rem 1rem;
background: #fff0f0;
border: 1px solid #f5c6cb;
border-radius: 10px;
color: #721c24;
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
/* ── Mobile heading overrides (must stay last) ── */
@media (max-width: 767.98px) {
.ba-hero__title,
.ba-section__title,
.ba-tile__title,
.ba-dive-card__title,
.ba-card__title { font-size: var(--font-size-h2-mobile, 1.35rem); }
}
/* ══════ css/header.css ══════ */
/**
* Header
*
* Desktop: brand left · nav centered · language + saved list right.
* Mobile: hamburger left · logo centered · saved list right — the same
* elements, reordered into a 3-column grid (see the mobile block).
*
* The bar retracts on scroll down and returns on scroll up (`is-hidden`,
* driven by js/main.js), so it stays out of the way while reading but is
* always one upward flick away.
*/
#ba-header {
background: color-mix(in srgb, var(--color-header) 94%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 1000;
/* Asymmetric easing, the way the MotoGP bar behaves: it returns slower
than it leaves. Coming back uses an expo-out curve so it decelerates
into place instead of snapping. */
transition: box-shadow 0.25s ease,
transform 0.44s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Retract while scrolling down — MOBILE ONLY. On desktop the bar stays put:
vertical space isn't scarce there, and a nav that comes and goes under the
cursor is harder to hit than one that never moves. js/main.js still toggles
the class at every width; the transform simply doesn't apply above 992px.
Never applied with the overlay open. will-change keeps the bar on its own
layer so the slide doesn't repaint the page behind it mid-scroll. */
@media (max-width: 991.98px) {
#ba-header.is-hidden {
transform: translateY(-100%);
/* Leaving is quicker and accelerates away — out of the reader's way */
transition: box-shadow 0.25s ease,
transform 0.26s cubic-bezier(0.55, 0, 1, 0.45);
}
}
/* NO will-change/transform on #ba-header while the menu can be open: either
one makes the header a containing block for its fixed-position descendants,
and #ba-nav is inside it — the full-screen overlay would then resolve
top/bottom against the 60px bar instead of the viewport and collapse to a
sliver. `is-hidden`'s transform is safe because it is never applied with
the overlay open (see setMenuOpen in js/main.js). */
/* Shadow only once the page is scrolled — set via js/main.js */
#ba-header.is-scrolled {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}
#ba-header .navbar {
min-height: 100px;
}
#ba-header .ba-site-name {
color: #fff;
font-weight: 700;
font-size: 1rem;
line-height: 1.3;
}
#ba-header .ba-site-name small {
font-weight: 400;
font-size: 0.85rem;
opacity: 0.85;
}
/* ── Nav links ────────────────────────────────────────────────────────────── */
#ba-header .nav-link {
position: relative;
color: rgba(255, 255, 255, 0.9) !important;
font-size: 0.95rem;
padding: 0.5rem 0.75rem;
white-space: nowrap;
transition: color 0.2s;
}
/* Hover recolour only where hovering is real. On touch, :hover sticks after a
tap and makes an ordinary link look exactly like the current page. */
@media (hover: hover) {
#ba-header .nav-link:hover {
color: var(--color-primary) !important;
}
}
#ba-header .nav-link.active {
color: var(--color-primary) !important;
}
/* Touch press feedback: a brief tint, never the current-page colour */
#ba-header .nav-link:active {
background: rgba(255, 255, 255, 0.06);
}
/* Current-page indicator — small underline bar (desktop only) */
@media (min-width: 992px) {
#ba-header .nav-link.active::after {
content: '';
position: absolute;
left: 0.75rem;
right: 0.75rem;
bottom: 0.1rem;
height: 2px;
border-radius: 2px;
background: var(--color-primary);
}
}
#ba-header .dropdown-menu {
/* Drop animation: popper owns the inline `transform`, so the slide uses
the separate `translate` property — it composes with popper's transform
instead of overwriting it. */
display: block;
translate: 0 -10px;
min-width: 15rem;
padding: 0.5rem 0;
background: var(--color-header);
border: none;
border-radius: 0 0 8px 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s linear 0.2s;
}
#ba-header .dropdown-menu.show {
opacity: 1;
translate: 0 0;
visibility: visible;
pointer-events: auto;
transition: opacity 0.2s ease, translate 0.24s cubic-bezier(0.2, 0.8, 0.3, 1), visibility 0s;
}
/* Items cascade in behind the dropping panel (desktop only — the mobile
submenu is inline and has its own animation). */
@media (min-width: 992px) {
#ba-header .dropdown-menu.show .dropdown-item {
animation: ba-drop-item-in 0.22s ease backwards;
}
#ba-header .dropdown-menu.show li:nth-child(1) .dropdown-item { animation-delay: 0.06s; }
#ba-header .dropdown-menu.show li:nth-child(2) .dropdown-item { animation-delay: 0.09s; }
#ba-header .dropdown-menu.show li:nth-child(3) .dropdown-item { animation-delay: 0.12s; }
#ba-header .dropdown-menu.show li:nth-child(4) .dropdown-item { animation-delay: 0.15s; }
#ba-header .dropdown-menu.show li:nth-child(5) .dropdown-item { animation-delay: 0.18s; }
}
@keyframes ba-drop-item-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
#ba-header .dropdown-item {
color: rgba(255, 255, 255, 0.85);
font-size: 0.9rem;
}
@media (hover: hover) {
#ba-header .dropdown-item:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--color-primary);
}
}
/* Current page inside a dropdown. Overrides Bootstrap's .dropdown-item.active,
which paints a solid blue block — far too heavy on this dark panel. */
#ba-header .dropdown-item.active {
background: transparent;
color: var(--color-primary);
font-weight: 700;
}
/* Dropdown chevron (Experiences, About) — rotates when the menu opens.
Bootstrap's border caret is replaced by a CSS border-chevron so it can
animate. aria-expanded is kept in sync by the Bootstrap Dropdown API. */
#ba-header .nav-link.dropdown-toggle::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
margin-left: 0.5rem;
border: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.25s ease;
vertical-align: middle;
}
/* 225°, not 180°: the mark is a border-corner whose closed state is already
rotated 45° to point down. 180 lands it on its side (a stray ⌐); 225 is
the true up-chevron. */
#ba-header .nav-link.dropdown-toggle[aria-expanded="true"]::after {
transform: rotate(225deg);
}
/* The saved-list button sits before #ba-nav in the DOM (it must live outside
the mobile overlay). On desktop that would drop it mid-row, so order pushes
it back to the end, beside the language switcher. */
@media (min-width: 992px) {
#ba-header #ba-nav { order: 1; }
#ba-header .ba-interest-nav {
order: 2;
margin-left: 0.85rem;
}
}
/* Bare two-line mark — no box, no outline ring. Padding stays so the tap
target clears 44px even though the bars are only 24×10. */
#ba-header .navbar-toggler {
border: none;
padding: 0.75rem 0.6rem;
box-shadow: none;
}
#ba-header .navbar-toggler:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ── Right tool group: language switcher + booking CTA ───────────────────── */
.ba-header-tools {
display: flex;
align-items: center;
gap: 0.85rem;
}
.ba-header-cta {
--bs-btn-padding-y: 0.55rem;
--bs-btn-padding-x: 1.4rem;
--bs-btn-font-size: 0.875rem;
white-space: nowrap;
}
/* CTA compact between 992–1199px — desktop nav visible, button needs to fit */
@media (min-width: 992px) and (max-width: 1199.98px) {
.ba-header-cta {
--bs-btn-padding-x: 1rem;
--bs-btn-padding-y: 0.45rem;
--bs-btn-font-size: 0.78rem;
}
}
@media (max-width: 991.98px) {
.ba-header-tools {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
padding: 0.75rem 0 1rem;
}
.ba-header-cta {
--bs-btn-padding-y: 0.75rem;
text-align: center;
}
/* Tighter nav links on small phones */
#ba-header .nav-link {
font-size: 0.88rem;
padding: 0.6rem 0;
}
.ba-lang__current {
padding: 0.4rem 0.5rem;
font-size: 0.72rem;
}
}
/* Disable backdrop-filter on low-end mobile for scrolling performance */
@media (max-width: 767.98px) {
#ba-header {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--color-header);
}
}
/* ── Mobile bar: hamburger left · logo centred · saved list right ─────── */
@media (max-width: 991.98px) {
/* A 3-column grid rather than flex: the `auto` centre column keeps the
logo optically centred in the viewport no matter how wide the side
slots are (the heart is display:none until interest-list.js runs, so
flex `space-between` would drift the logo off-centre before load).
Slot order is set with `order`, so the DOM stays desktop-first. */
#ba-header .navbar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
min-height: 64px;
}
#ba-header .navbar-toggler { order: 1; justify-self: start; }
#ba-header .navbar-brand { order: 2; justify-self: center; margin: 0; }
#ba-header .ba-interest-nav { order: 3; justify-self: end; }
#ba-nav { order: 4; }
/* Logo + wordmark in the centre slot. The mark alone isn't distinctive
enough to identify the site, so the name carries the recognition —
shrunk and nowrap so it can't push the side slots out of line. */
#ba-header .navbar-brand {
gap: 0.5rem !important;
}
#ba-header .ba-site-name {
font-size: 0.78rem;
line-height: 1.25;
white-space: nowrap;
}
#ba-header .ba-site-name small {
font-size: 0.66rem;
}
#ba-header .navbar-brand img {
width: 40px;
height: 40px;
}
}
/* ── Mobile full-screen overlay menu ──────────────────────────────────── */
@media (max-width: 991.98px) {
/* Overlay covers full viewport when nav is open. `align-items: stretch`
is CRITICAL: Bootstrap's .navbar-collapse ships align-items:center,
which leaks into the flex column and centers every link while the
inline submenus stay left-aligned — the "text jumps left when I open
a submenu" bug. Width 100vw (not left/right only) so the overlay also
covers the strip under a classic scrollbar at narrow desktop widths. */
#ba-nav.show {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100vw;
bottom: 0;
z-index: 1050;
background: var(--color-header);
display: flex !important;
flex-direction: column;
align-items: stretch;
padding: 5rem 1.5rem 1.5rem;
overflow-y: auto;
animation: ba-overlay-in 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Exit. The panel used to just disappear — main.js holds `.show` until
this finishes (animationend), so the close reads as deliberate rather
than as a flicker. Shorter than the entrance, as MotoGP's does. */
#ba-nav.show.is-closing {
animation: ba-overlay-out 0.24s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
/* Links fall away together on close — no stagger, that would drag */
#ba-nav.show.is-closing .nav-link,
#ba-nav.show.is-closing .ba-header-tools {
animation: none;
}
/* Kill Bootstrap's collapse height animation — overlay is instant */
#ba-nav {
transition: none !important;
}
/* The whole bar stays on top of the open panel — brand included, the way
MotoGP keeps its wordmark visible over the full-screen menu. Lifting
the three slots with position:relative + z-index (rather than pinning
each with position:fixed) keeps them in their grid columns, so the X
stays exactly where the burger was and the logo stays centred. */
#ba-header.is-menu-open .navbar-brand,
#ba-header.is-menu-open .navbar-toggler,
#ba-header.is-menu-open .ba-interest-nav {
position: relative;
z-index: 1060;
}
#ba-header.is-menu-open .navbar-toggler {
border: none;
outline: none;
box-shadow: none;
}
/* Two-line hamburger. The span is only the hit area — both bars are its
pseudo-elements, so rotating them into an X cannot compound with a
rotation on the parent. */
#ba-header .navbar-toggler-icon {
background: none;
position: relative;
width: 24px;
height: 2px;
}
#ba-header .navbar-toggler-icon::before,
#ba-header .navbar-toggler-icon::after {
content: '';
position: absolute;
left: 0;
width: 24px;
height: 2px;
background: #fff;
border-radius: 2px;
transform-origin: center;
transition: transform 0.3s ease, top 0.3s ease;
}
#ba-header .navbar-toggler-icon::before {
top: -4px;
}
#ba-header .navbar-toggler-icon::after {
top: 4px;
}
#ba-header.is-menu-open .navbar-toggler-icon {
background-color: transparent;
}
/* The X reads larger than the burger at the same bar length, because the
diagonals span the full width — so shrink the bars on open (18px, kept
centred by the matching left offset) to balance the two states. */
#ba-header.is-menu-open .navbar-toggler-icon::before,
#ba-header.is-menu-open .navbar-toggler-icon::after {
width: 18px;
left: 3px;
top: 0;
}
#ba-header.is-menu-open .navbar-toggler-icon::before {
transform: rotate(45deg);
}
#ba-header.is-menu-open .navbar-toggler-icon::after {
transform: rotate(-45deg);
}
/* Nav links: large, easy to tap, full-width. Staggered fade-in when
the overlay opens (fill mode 'backwards' keeps them hidden during
their delay). */
#ba-nav .nav-link {
font-size: 1.15rem;
padding: 0.85rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Current page: bolder + a left accent bar. The desktop underline is
hidden here, so without this the only cue would be colour — which a
lingering tap highlight also produces. */
#ba-nav .nav-link.active {
font-weight: 700;
padding-left: 0.85rem;
border-left: 3px solid var(--color-primary);
}
#ba-nav.show .nav-link {
animation: ba-nav-item-in 0.3s ease backwards;
}
#ba-nav.show .nav-item:nth-child(1) .nav-link { animation-delay: 0.03s; }
#ba-nav.show .nav-item:nth-child(2) .nav-link { animation-delay: 0.06s; }
#ba-nav.show .nav-item:nth-child(3) .nav-link { animation-delay: 0.09s; }
#ba-nav.show .nav-item:nth-child(4) .nav-link { animation-delay: 0.12s; }
#ba-nav.show .nav-item:nth-child(5) .nav-link { animation-delay: 0.15s; }
#ba-nav.show .nav-item:nth-child(6) .nav-link { animation-delay: 0.18s; }
#ba-nav.show .ba-header-tools {
animation: ba-nav-item-in 0.3s ease 0.18s backwards;
}
/* ── Mobile: sub-menus appear inline, no floating dropdown ────────── */
/* display:none until shown — the desktop fade rule sets display:block
globally, which would keep the inline submenu visible on mobile. */
#ba-nav .dropdown-menu {
position: static;
border: none;
background: none;
box-shadow: none;
padding: 0 0 0 1rem;
margin: 0;
display: none;
/* Undo the desktop fade. That rule is unscoped, so on mobile it left
the submenu occupying its full height while invisible — a big blank
gap under the parent. Here display alone does the hiding. */
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: none;
translate: none;
}
#ba-nav .dropdown-menu.show {
display: block;
animation: ba-submenu-in 0.25s ease;
}
/* Branch of the current page, pre-expanded by js/main.js. No entrance
animation: it arrives with the panel rather than in response to a tap. */
#ba-nav .dropdown-menu.is-expanded {
display: block;
}
#ba-nav .dropdown-item {
font-size: 1.15rem;
padding: 0.85rem 0;
color: rgba(255, 255, 255, 0.75);
background: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
#ba-nav .dropdown-item:active {
background: rgba(255, 255, 255, 0.06);
}
#ba-nav .dropdown-item.active {
color: var(--color-primary);
font-weight: 700;
background: none;
}
/* Small phones: the centre slot has to hold logo + two lines of text
between a 42px burger and a 44px heart, so both shrink again. */
@media (max-width: 575.98px) {
#ba-header .navbar {
min-height: 58px;
}
#ba-header .navbar-brand img {
width: 34px;
height: 34px;
}
#ba-header .ba-site-name {
font-size: 0.72rem;
}
#ba-header .ba-site-name small {
font-size: 0.6rem;
}
.navbar-toggler {
padding: 0.35rem 0.4rem;
}
}
/* Push tools (language + CTA) to bottom of overlay */
#ba-nav .ba-header-tools {
margin-top: auto;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
}
/* ── Language switcher ────────────────────────────────────────────────────── */
.ba-lang {
position: relative;
}
.ba-lang__flag {
border-radius: 2px;
flex-shrink: 0;
}
.ba-lang__current {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.65rem;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 6px;
background: transparent;
color: rgba(255, 255, 255, 0.9);
font-family: var(--font-base);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.05em;
cursor: pointer;
transition: border-color 0.2s, color 0.2s;
}
.ba-lang__current:hover {
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
}
.ba-lang__chevron {
transition: transform 0.2s;
}
.ba-lang__menu {
display: none;
position: absolute;
top: 100%;
right: 0;
min-width: 100%;
margin: 0;
padding: 0.35rem 0;
list-style: none;
background: var(--color-header);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0 0 6px 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
z-index: 1010;
}
/* Invisible bridge so hover doesn't break between button and menu */
.ba-lang__menu::before {
content: '';
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
}
.ba-lang__menu li a {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.85rem;
color: rgba(255, 255, 255, 0.75);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.05em;
text-decoration: none;
white-space: nowrap;
transition: color 0.15s, background 0.15s;
}
.ba-lang__menu li a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
/* Open state — hover on pointer devices, .is-open via click/keyboard (main.js) */
@media (hover: hover) {
.ba-lang:hover .ba-lang__menu {
display: block;
}
.ba-lang:hover .ba-lang__chevron {
transform: rotate(180deg);
}
}
.ba-lang.is-open .ba-lang__menu {
display: block;
}
.ba-lang.is-open .ba-lang__chevron {
transform: rotate(180deg);
}
/* Mobile: inline row instead of dropdown */
@media (max-width: 991.98px) {
/* .ba-header-tools stretches its children, so without an explicit
justify-content the pills bunch against the left edge of the panel. */
.ba-lang {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.ba-lang__current {
border-color: rgba(255, 255, 255, 0.3);
}
.ba-lang__chevron {
display: none;
}
.ba-lang__menu {
display: flex !important;
position: static;
background: none;
border: none;
box-shadow: none;
padding: 0;
gap: 0.35rem;
justify-content: center;
flex-wrap: wrap;
/* The dropdown base sets min-width:100%, which as a flex sibling
forced the whole row onto its own line and split the pills across
two rows. */
min-width: 0;
}
.ba-lang__menu li a {
padding: 0.5rem 0.6rem;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 6px;
}
.ba-lang__menu li a:hover {
border-color: rgba(255, 255, 255, 0.5);
background: transparent;
}
}
/* ── "In progress" toast (SOMA Cafe placeholder nav item) ──────────────── */
.ba-soon-toast {
position: fixed;
left: 50%;
bottom: 1.5rem;
transform: translate(-50%, 1rem);
background: var(--color-dark);
color: #fff;
padding: 0.75rem 1.5rem;
border-radius: 999px;
font-family: var(--font-base);
font-weight: 600;
font-size: 0.95rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s, transform 0.25s;
z-index: 2100;
}
.ba-soon-toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
/* ── Menu animations ─────────────────────────────────────────────────────── */
/* Overlay slide-down fade (mobile) */
@keyframes ba-overlay-in {
from { opacity: 0; transform: translateY(-14px); }
to { opacity: 1; transform: none; }
}
@keyframes ba-overlay-out {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(-10px); }
}
/* Nav link / tools entrance (mobile, staggered) */
@keyframes ba-nav-item-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* Inline submenu entrance (mobile) */
@keyframes ba-submenu-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
/* Respect users who prefer reduced motion: no overlay/submenu animations,
no chevron/burger rotation, dropdowns appear instantly. */
@media (prefers-reduced-motion: reduce) {
#ba-nav.show,
#ba-nav.show .dropdown-menu.show .dropdown-item,
#ba-nav.show .nav-link,
#ba-nav.show .ba-header-tools,
#ba-nav .dropdown-menu.show {
animation: none;
}
#ba-header .dropdown-menu,
#ba-header .dropdown-menu.show {
transition: none;
translate: none;
}
#ba-header .dropdown-menu.show .dropdown-item {
animation: none;
}
#ba-header,
#ba-header .nav-link.dropdown-toggle::after,
#ba-header .navbar-toggler-icon,
#ba-header .navbar-toggler-icon::before,
#ba-header .navbar-toggler-icon::after {
transition: none;
}
}
/* ══════ css/footer.css ══════ */
/**
* Footer — CTA band (shared component) → 4-column grid → bottom bar
*/
/* ── Shared ──────────────────────────────────────────────────────────────── */
#ba-footer {
--footer-bg: var(--color-header); /* deep ocean navy */
--footer-deep: var(--color-dark-deep); /* deeper navy — bottom bar */
--footer-text: rgba(255,255,255,0.65);
--footer-heading: rgba(255,255,255,0.95);
--footer-link: rgba(255,255,255,0.65);
--footer-link-hov: var(--color-primary);
--footer-divider: rgba(255,255,255,0.08);
}
/* ── Main footer area ────────────────────────────────────────────────────── */
#ba-footer-main {
/* Subtle vertical gradient — flat charcoal reads dead, this adds depth
and blends into the deeper bottom bar */
background: linear-gradient(180deg, var(--footer-bg) 0%, var(--footer-deep) 100%);
color: var(--footer-text);
padding: 4rem 0 3rem;
}
/* ── Grid layout ─────────────────────────────────────────────────────────── */
.ba-footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
gap: 2.5rem 3rem;
align-items: start;
}
@media (max-width: 991.98px) {
.ba-footer-grid {
grid-template-columns: 1fr 1fr;
gap: 2.5rem 2rem;
}
.ba-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
.ba-footer-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.ba-footer-brand { grid-column: auto; }
}
/* ── Brand column ────────────────────────────────────────────────────────── */
.ba-footer-brand__logo {
display: inline-block;
margin-bottom: 1rem;
opacity: 0.9;
transition: opacity 0.2s;
}
.ba-footer-brand__logo:hover { opacity: 1; }
.ba-footer-brand__name {
font-size: 0.9375rem;
font-weight: 700;
color: var(--footer-heading);
margin-bottom: 0.2rem;
letter-spacing: 0.01em;
}
.ba-footer-brand__tagline {
font-size: 0.75rem;
color: var(--footer-text);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1.5rem;
}
/* Social icons */
.ba-footer-social__label {
display: block;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--footer-text);
margin-bottom: 0.6rem;
}
.ba-footer-social__icons {
display: flex;
gap: 0.5rem;
}
.ba-footer-social__icons a {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 8px;
background: rgba(255,255,255,0.07);
color: rgba(255,255,255,0.65);
transition: background 0.2s, color 0.2s, transform 0.15s;
}
.ba-footer-social__icons a:hover {
background: var(--color-primary);
color: #fff;
transform: translateY(-2px);
}
/* ── Nav columns ─────────────────────────────────────────────────────────── */
.ba-footer-nav__heading {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--footer-heading);
margin-bottom: 1rem;
}
.ba-footer-nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.ba-footer-nav ul li a {
font-size: 0.875rem;
color: var(--footer-link);
text-decoration: none;
transition: color 0.18s, padding-left 0.18s;
display: inline-block;
padding: 0.1rem 0;
}
.ba-footer-nav ul li a:hover {
color: var(--footer-link-hov);
padding-left: 3px;
}
/* ── Contact column ──────────────────────────────────────────────────────── */
.ba-footer-contact__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.ba-footer-contact__list li {
display: flex;
align-items: flex-start;
gap: 0.65rem;
font-size: 0.875rem;
color: var(--footer-text);
line-height: 1.45;
}
.ba-footer-contact__list li .bi {
font-size: 1rem;
color: var(--color-primary);
flex-shrink: 0;
line-height: 1.45;
}
.ba-footer-contact__list li a {
display: flex;
align-items: flex-start;
gap: 0.65rem;
color: var(--footer-link);
text-decoration: none;
transition: color 0.18s;
}
.ba-footer-contact__list li a:hover {
color: var(--footer-link-hov);
}
/* WhatsApp — the preferred channel, visually first-class */
.ba-footer-contact__whatsapp .bi {
color: #25D366;
}
.ba-footer-contact__whatsapp strong {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--footer-heading);
margin-bottom: 0.1rem;
}
.ba-footer-contact__whatsapp:hover strong {
color: var(--footer-link-hov);
}
/* ── Bottom bar ──────────────────────────────────────────────────────────── */
#ba-footerbar {
background: var(--footer-deep);
padding: 0.85rem 0;
}
#ba-footerbar .container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
}
#ba-footerbar a:hover {
color: var(--color-primary);
}
/* ── WhatsApp floating button ─────────────────────────────────────────── */
.ba-whatsapp-float {
position: fixed;
bottom: 1.25rem;
right: 1.25rem;
z-index: 950;
width: 52px;
height: 52px;
border-radius: 50%;
background: #25D366;
color: #fff;
font-size: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
text-decoration: none;
touch-action: manipulation;
transition: box-shadow 0.2s, transform 0.2s;
}
.ba-whatsapp-float:hover {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
transform: scale(1.05);
color: #fff;
}
.ba-whatsapp-float:active {
transform: scale(0.95);
}
/* ══════ css/interest-list.css ══════ */
/* ── Interest list — header indicator + bottom-sheet drawer ───────────
* Site-wide (enqueued on every page). Uses design tokens only.
* ─────────────────────────────────────────────────────────────────────── */
/* ── Header indicator — always visible; JS updates the count ── */
.ba-interest-nav {
position: relative;
display: none; /* JS flips it to inline-flex on load */
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: var(--color-primary);
color: #fff;
font-size: 1.15rem;
cursor: pointer;
flex: 0 0 auto;
touch-action: manipulation;
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
@media (hover: hover) {
.ba-interest-nav:hover {
transform: scale(1.05);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
background: var(--color-primary-dark);
}
}
.ba-interest-nav:active {
transform: scale(0.95);
}
.ba-interest-nav__count {
position: absolute;
top: -3px;
right: -3px;
min-width: 20px;
height: 20px;
padding: 0 4px;
border-radius: 999px;
background: var(--color-dark);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
@media (max-width: 991.98px) {
.ba-interest-nav {
align-self: center;
}
}
/* ── Heart interest button — the site-wide add-to-list control ──── */
.ba-heart-wrap {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
/* Inside cards (courses page) the CTA slot was full-width — centre the heart */
.ba-card .ba-heart-wrap {
justify-content: center;
}
/* Status message under the button — fades in/out, no layout shift */
.ba-heart-msg {
position: absolute;
top: calc(100% + 0.35rem);
left: 50%;
transform: translateX(-50%) translateY(-2px);
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
color: var(--color-green);
opacity: 0;
transition: opacity 0.25s, transform 0.25s;
pointer-events: none;
}
.ba-heart-msg.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.ba-heart-msg.is-remove {
color: var(--color-danger);
}
.ba-heart-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 10px;
border: 1.5px solid var(--color-primary);
background: #fff;
color: var(--color-primary);
cursor: pointer;
flex: 0 0 auto;
text-decoration: none;
touch-action: manipulation;
transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.ba-heart-btn svg {
fill: currentColor;
}
/* Icon swap: heart by default, checkmark once added, X on added-hover */
.ba-heart-btn__check,
.ba-heart-btn__x {
display: none;
width: 26px;
height: 26px;
}
.ba-heart-btn.is-in-list .ba-heart-btn__heart {
display: none;
}
.ba-heart-btn.is-in-list .ba-heart-btn__check {
display: block;
}
/* Hover only on devices that really hover — on touch, :hover sticks to the
last-tapped element, which would leave the red X stuck on the heart. */
@media (hover: hover) {
.ba-heart-btn:hover {
background: var(--color-primary);
color: #fff;
transform: scale(1.05);
}
/* Added + hover — checkmark becomes an X in the removal colour */
.ba-heart-btn.is-in-list:hover {
background: transparent;
color: var(--color-danger);
transform: scale(1.05);
}
.ba-heart-btn.is-in-list:hover .ba-heart-btn__check {
display: none;
}
.ba-heart-btn.is-in-list:hover .ba-heart-btn__x {
display: block;
}
}
.ba-heart-btn:active {
transform: scale(0.95);
}
/* Added to list — big green checkmark, no fill, no border */
.ba-heart-btn.is-in-list {
background: transparent;
color: var(--color-green);
border-color: transparent;
}
/* ── Backdrop ──────────────────────────────────────────────────────── */
.ba-interest-backdrop {
position: fixed;
inset: 0;
z-index: 1070;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
visibility: hidden;
transition: opacity 0.25s, visibility 0.25s;
}
.ba-interest-backdrop.is-visible {
opacity: 1;
visibility: visible;
}
/* ── Drawer — bottom sheet, centred with a max width on desktop ───── */
.ba-interest-drawer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1080;
max-width: 480px;
margin: 0 auto;
background: #fff;
border-radius: 16px 16px 0 0;
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22);
transform: translateY(100%);
/* visibility:hidden keeps the closed sheet from ever painting a
white sliver at the viewport bottom (mobile dynamic toolbars) */
visibility: hidden;
transition: transform 0.3s ease, visibility 0s linear 0.3s;
display: flex;
flex-direction: column;
max-height: 75vh;
}
.ba-interest-drawer.is-open {
transform: translateY(0);
visibility: visible;
transition: transform 0.3s ease, visibility 0s;
}
body.ba-interest-locked {
overflow: hidden;
}
/* Header */
.ba-interest-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem 0.75rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.ba-interest-drawer__title {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
color: var(--color-dark);
}
/* Title + helper subtitle, stacked on the left of the drawer head */
.ba-interest-drawer__title-block {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
flex: 1;
padding-right: 0.75rem;
}
.ba-interest-drawer__sub {
margin: 0;
font-size: 0.76rem;
line-height: 1.45;
color: var(--color-text-muted);
}
/* Items */
.ba-interest-drawer__body {
overflow-y: auto;
padding: 0.5rem 1.25rem;
flex: 1;
}
.ba-interest-list {
list-style: none;
margin: 0;
padding: 0;
}
.ba-interest-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ba-interest-item__label {
font-size: 0.92rem;
font-weight: 600;
color: var(--color-text);
line-height: 1.4;
}
.ba-interest-item__remove {
flex: 0 0 auto;
min-width: 44px;
min-height: 44px;
border: none;
background: none;
font-size: 1.4rem;
line-height: 1;
color: var(--color-text-muted);
cursor: pointer;
border-radius: 8px;
touch-action: manipulation;
transition: color 0.15s, background 0.15s;
}
/* Soft red hover — deleting feels responsive without screaming */
.ba-interest-item__remove:hover {
color: var(--color-danger);
background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}
/* Empty state — simple card shown when the list has no items */
.ba-interest-empty {
margin: 0.5rem 0 0.25rem;
padding: 1.75rem 1.25rem;
text-align: center;
background: var(--color-surface-alt);
border: 1px dashed rgba(91, 156, 234, 0.35);
border-radius: 12px;
}
.ba-interest-empty__title {
margin: 0 0 0.3rem;
font-size: 0.95rem;
font-weight: 700;
color: var(--color-text);
}
.ba-interest-empty__body {
margin: 0;
font-size: 0.82rem;
line-height: 1.55;
color: var(--color-text-muted);
}
/* Footer */
.ba-interest-drawer__foot {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem 1.25rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
background: #fff;
border-radius: 0 0 16px 16px;
}
.ba-interest-clear {
flex: 0 0 auto;
min-height: 44px;
border: none;
background: none;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text-muted);
cursor: pointer;
padding: 0 0.5rem;
text-decoration: underline;
touch-action: manipulation;
}
.ba-interest-clear:hover {
color: var(--color-orange);
}
.ba-interest-drawer__foot .btn-primary {
flex: 1;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
/* Buttons already in the list (JS marks them) — --color-success doesn't
exist in tokens.css; the real "added" colour is --color-green. */
a[data-ba-orig].is-in-list {
background: var(--color-green);
border-color: var(--color-green);
}
@media (max-width: 575.98px) {
.ba-interest-drawer {
max-width: 100%;
border-radius: 16px 16px 0 0;
}
}
/* ── Mobile add/remove toast — light pill + heart icon ───────────────────
Reuses .ba-pill for layout/typography (components.css); this file
restyles the surface for toast use: light gray gradient with dark
text, single line. No translucency — the heart icon carries the status
colour (green = added, red = removed). All colours are tokens (the
gradient's darker end is derived with color-mix so it follows
--color-surface-alt). */
.ba-interest-toast {
position: fixed;
left: 50%;
bottom: 1.5rem;
transform: translate(-50%, 1rem);
font-size: 0.7rem;
white-space: nowrap;
color: var(--color-text);
border-color: color-mix(in srgb, var(--color-text) 15%, transparent);
background: linear-gradient(180deg, var(--color-surface-alt) 0%,
color-mix(in srgb, var(--color-surface-alt) 88%, var(--color-dark)) 100%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s, transform 0.25s;
z-index: 2100;
max-width: calc(100vw - 2rem);
}
.ba-interest-toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
.ba-interest-toast__text {
overflow: hidden;
text-overflow: ellipsis;
}
.ba-interest-toast__heart {
flex-shrink: 0;
fill: currentColor;
color: var(--color-green);
}
.ba-interest-toast.is-remove .ba-interest-toast__heart {
color: var(--color-danger);
}