so the
editorial dark palette + helpers carry across.
========================================================= */
.pg { background: var(--night); color: var(--cream); }
.pg-wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
/* ============================================================
404 — WIPED OUT
============================================================ */
.pg-404 { background: var(--night); display: flex; flex-direction: column; }
.pg-404__scene {
position: relative; min-height: 100svh;
display: flex; align-items: center; justify-content: center;
overflow: hidden; isolation: isolate;
}
/* Ken Burns background */
.pg-404__bg {
position: absolute; inset: 0;
background-size: cover; background-position: center 35%;
transform: scale(1.06);
animation: pg-hero-drift 20s var(--ease-swell) forwards;
}
.pg-404__veil {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(
170deg,
rgba(6,29,40,0.78) 0%,
rgba(6,29,40,0.44) 45%,
rgba(6,29,40,0.90) 100%
);
}
/* Ghost 404 watermark */
.pg-404__ghost {
position: absolute; bottom: -0.06em; left: 50%;
transform: translateX(-50%);
z-index: 2; pointer-events: none; user-select: none;
font-family: var(--font-display); font-style: italic;
font-size: clamp(160px, 26vw, 380px);
line-height: 1; letter-spacing: -0.04em; white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1.5px rgba(110,199,198,0.14);
text-shadow: 0 0 120px rgba(15,154,154,0.12);
}
/* Content */
.pg-404__inner {
position: relative; z-index: 3;
text-align: center;
padding: clamp(130px, 18vh, 200px) var(--gutter) clamp(140px, 20vh, 220px);
max-width: 640px; margin: 0 auto;
}
.pg-404__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-body); font-weight: 500;
font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase;
color: var(--teal-pale);
margin-bottom: 26px;
}
.pg-404__title {
font-family: var(--font-display); font-weight: 400;
font-size: var(--disp-hero);
line-height: 0.94; letter-spacing: -0.025em;
color: #fff; margin: 0 0 30px;
}
.pg-404__title i { color: var(--coral-400); font-style: italic; }
.pg-404__body {
font-family: var(--font-body); font-weight: 300;
font-size: clamp(16px, 1.7vw, 20px); line-height: 1.62;
color: rgba(249,245,233,0.72);
margin: 0 0 48px;
}
.pg-404__actions {
display: flex; gap: 14px; justify-content: center;
flex-wrap: wrap; margin-bottom: 52px;
}
.pg-404__links {
display: flex; justify-content: center; flex-wrap: wrap;
}
.pg-404__links a {
padding: 7px 16px;
font-family: var(--font-body); font-size: 12px;
font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(255,255,255,0.42); text-decoration: none;
border-right: 1px solid rgba(255,255,255,0.12);
transition: color 200ms var(--ease-swell);
}
.pg-404__links a:last-child { border-right: 0; }
.pg-404__links a:hover { color: rgba(255,255,255,0.9); }
/* Animated wave strip */
.pg-404__wave {
position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
overflow: hidden; line-height: 0;
}
.pg-404__wave-svg {
display: block; width: 200%; height: clamp(48px, 6vw, 80px);
animation: swell-404-wave 7s linear infinite;
}
@keyframes swell-404-wave {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (max-width: 600px) {
.pg-404__links a { padding: 7px 10px; font-size: 12px; }
.pg-404__actions { gap: 10px; }
}
/* ---------------------------------------------------------
SUBPAGE HERO — full-bleed photo, nav floats over it
--------------------------------------------------------- */
.pg-hero {
position: relative;
min-height: 99vh;
display: flex;
overflow: hidden;
background: var(--night);
isolation: isolate;
}
/* Lock every interior hero to the SAME height on desktop. Without this the
hero is only `min-height`, so wordier pages (Surfing, Getting here) grow
taller than Retreat — the inconsistent height you noticed. On small screens
we keep the `min-height` floor so long, multi-line titles can't be clipped. */
@media (min-width: 900px) {
.pg-hero { height: 99vh; }
}
.pg-hero__bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
transform: scale(1.05);
animation: pg-hero-drift 16s var(--ease-swell) forwards;
}
@keyframes pg-hero-drift { to { transform: scale(1); } }
/* Seamless hero → page bottom: fade the photo into the page background
(--night) so the hero dissolves into the section below instead of ending
on a hard edge. Sits at z-index 1 (under the title at z-index 2). */
.pg-hero::before {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
height: 34%; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, rgba(10,29,34,0) 0%, rgba(10,29,34,0.6) 55%, var(--night) 100%);
}
.pg-hero__veil {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(180deg, rgba(10,29,34,0.55) 0%, rgba(10,29,34,0) 26%, rgba(10,29,34,0) 50%, rgba(10,29,34,0.86) 100%),
linear-gradient(90deg, rgba(10,29,34,0.55) 0%, rgba(10,29,34,0) 60%);
}
.pg-hero__inner {
position: relative; z-index: 2;
align-self: flex-end;
width: 100%;
max-width: 1280px; margin: 0 auto;
padding: 0 clamp(20px, 4vw, 56px) clamp(88px, 11vw, 164px);
color: #fff;
}
.pg-hero__eyebrow {
display: inline-flex; align-items: center; gap: 14px;
font-family: var(--font-body); font-weight: 500;
font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
color: rgba(255,255,255,0.82);
}
.pg-hero__eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.pg-hero__title {
font-family: var(--font-display); font-weight: 400;
font-size: var(--disp-hero); line-height: 0.94; letter-spacing: -0.02em;
margin: 26px 0 0; max-width: 16ch; color: #fff; text-wrap: balance;
}
.pg-hero__title i { font-style: italic; color: var(--teal-pale); }
.pg-hero__sub {
margin-top: 26px; max-width: 52ch;
font-family: var(--font-body); font-weight: 400;
font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5;
color: rgba(249,245,233,0.88);
}
.pg-hero__rail {
position: absolute; z-index: 2;
right: calc(max(0px, (100vw - 1280px) / 2) + clamp(20px, 4vw, 56px));
bottom: clamp(48px, 7vw, 96px);
display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
text-align: right;
}
.pg-hero__rail .place { font-family: var(--font-display); font-style: italic; font-size: 22px; color: #fff; }
.pg-hero__rail .meta { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.66); }
@media (max-width: 860px) { .pg-hero__rail { display: none; } }
/* Daily Cabarete conditions readout (replaces the lat/long rail) */
.sw-wx { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.sw-wx__eyebrow {
font-family: var(--font-body); font-size: 12px; letter-spacing: 0.24em;
text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 1px;
}
.sw-wx__row { display: grid; grid-template-columns: 72px 62px 62px; column-gap: 12px; align-items: baseline; }
.sw-wx__lbl {
font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em;
text-transform: uppercase; color: rgba(255,255,255,0.62);
display: inline-flex; align-items: center; gap: 5px; justify-self: start;
}
.sw-wx__lbl svg { opacity: 0.82; }
.sw-wx__c, .sw-wx__f {
font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: 15px; line-height: 1;
letter-spacing: 0.04em; color: #fff; justify-self: end; text-align: right; white-space: nowrap;
}
.sw-wx__deg { font-style: normal; font-size: 0.7em; letter-spacing: 0.04em; margin-left: 1px; vertical-align: 0.08em; opacity: 0.78; }
.sw-wx__loc {
font-family: var(--font-body); font-size: 12px; letter-spacing: 0.24em;
text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 4px;
}
/* breadcrumb above the eyebrow */
.pg-crumb {
display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(255,255,255,0.6);
}
.pg-crumb a { color: rgba(255,255,255,0.6); transition: color 220ms var(--ease-swell); }
.pg-crumb a:hover { color: #fff; }
.pg-crumb svg { width: 13px; height: 13px; opacity: 0.6; }
.pg-crumb b { color: #fff; font-weight: 500; }
/* ---------------------------------------------------------
HERO HEADER — switchable treatments (via Tweaks)
--------------------------------------------------------- */
/* split inner fills the hero height; top row clears the fixed nav */
.pg-hero__inner--split {
align-self: stretch;
display: flex; flex-direction: column; justify-content: space-between;
padding-top: clamp(116px, 15vh, 168px);
}
.pg-hero__foot { max-width: 900px; }
/* A · Clean trail — copy anchored to a FIXED distance from the top.
Previously this was `align-self: flex-end` (copy pinned to the bottom), so
the eyebrow/title started at a different height on every page depending on
how tall the title was — Retreat sat low, Surfing/Getting-here climbed up.
Top-anchoring with a shared padding-top makes the eyebrow start the same
distance down the viewport on every page, tuned to match the Retreat page. */
.pg-hero__inner--trail {
align-self: flex-start;
padding-top: clamp(140px, 34vh, 320px);
padding-bottom: clamp(40px, 6vw, 96px);
}
.pg-crumb--pill {
display: inline-flex; align-items: center; align-self: flex-start;
margin: 28px 0 0; gap: 11px; white-space: nowrap;
padding: 9px 17px; border-radius: 999px;
background: rgba(8,28,33,0.42);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}
.pg-crumb--pill .cur { color: #fff; font-weight: 500; }
/* B · Editorial cover — back-link + index, italic standfirst */
.pg-cover-top { width: 100%; }
.pg-cover-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pg-cover-back {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-body); font-size: 12px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.82);
transition: color 220ms var(--ease-swell);
}
.pg-cover-back:hover { color: #fff; }
.pg-cover-back svg { width: 16px; height: 16px; }
.pg-cover-back .seg { color: rgba(255,255,255,0.5); }
.pg-cover-index {
display: inline-flex; align-items: baseline; gap: 10px; flex-shrink: 0; white-space: nowrap;
font-family: var(--font-display); font-style: italic; font-size: 22px; color: rgba(255,255,255,0.78);
}
.pg-cover-index small {
font-family: var(--font-body); font-style: normal; font-size: 12px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal-pale);
}
.pg-cover-rule { height: 1px; background: rgba(255,255,255,0.22); margin-top: 18px; }
.pg-hero--cover .pg-hero__title { font-size: var(--disp-hero); max-width: 15ch; }
.pg-cover-stand {
margin: 22px 0 0; max-width: 44ch;
font-family: var(--font-display); font-style: italic;
font-size: var(--disp-small); line-height: 1.32; color: rgba(249,245,233,0.92);
}
.pg-cover-stand b {
display: block; margin-bottom: 12px;
font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: 12px;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal-pale);
}
/* C · Caption panel — glass card, inline breadcrumb tabs */
.pg-hero__inner--panel { align-self: flex-end; }
.pg-hero__card {
max-width: 620px; padding: clamp(28px, 2.6vw, 40px);
background: rgba(13,53,55,0.55);
-webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
border-radius: 20px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 30px 70px rgba(0,0,0,0.30);
}
.pg-tabs {
display: flex; flex-wrap: nowrap; align-items: center; white-space: nowrap;
font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(255,255,255,0.62);
}
.pg-tabs a { color: rgba(255,255,255,0.62); transition: color 220ms var(--ease-swell); }
.pg-tabs a:hover { color: #fff; }
.pg-tabs .div { width: 1px; height: 11px; background: rgba(255,255,255,0.3); margin: 0 10px; }
.pg-tabs .cur { color: #fff; }
.pg-hero__card .pg-hero__eyebrow { margin-top: 22px; }
.pg-eyebrow--dot::before {
width: 7px; height: 7px; border-radius: 50%; background: var(--coral);
box-shadow: 0 0 0 4px rgba(238,106,71,0.32);
}
.pg-hero__card .pg-hero__title { font-size: var(--disp-mega); margin-top: 16px; }
.pg-hero__card .pg-hero__sub { margin-top: 18px; }
@media (max-width: 600px) { .pg-hero__card { max-width: none; } }
/* tiny helper note inside the Tweaks panel */
.twk-note { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: rgba(41,38,27,0.55); }
/* ---------------------------------------------------------
GENERIC SECTION RHYTHM
--------------------------------------------------------- */
.pg-sec { padding: clamp(64px, 8vw, 128px) 0; position: relative; }
.pg-sec > .pg-wrap, .pg-sec > .ed-wrap { position: relative; z-index: 1; }
/* Default page template — editable light content surface (ACF "Content background").
Flips the main content section from the dark ocean base to sandy cream + dark ink,
leaving the hero, CTA and footer on their own (dark) surfaces. */
.pg-sec--light { background: var(--cream); }
.pg-sec--light .swell-prose { color: var(--ink-soft); }
.pg-sec--light .swell-prose h2,
.pg-sec--light .swell-prose h3,
.pg-sec--light .swell-prose h4 { color: var(--ink); }
.pg-sec--light .swell-prose a { color: var(--coral); }
.pg-sec--light .swell-prose blockquote { color: var(--ink); border-left-color: var(--coral); }
.pg-sec--light .swell-prose figcaption { color: var(--ink-soft); }
/* WPForms labels/descriptions sit in the content too — keep them readable on cream. */
.pg-sec--light .wpforms-field-label,
.pg-sec--light .wpforms-field-label-inline,
.pg-sec--light .wpforms-form .wpforms-field-sublabel { color: var(--ink); }
.pg-sec--light .wpforms-field-description { color: var(--ink-soft); }
/* section backdrop decoration — switched via [data-decor] (Tweaks) */
.pg-sec--n1::before, .pg-sec--teal::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, #000 100%);
mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, #000 100%);
}
/* 0 · Swell lines (original) */
[data-decor="lines"] .pg-sec--n1::before, [data-decor="lines"] .pg-sec--teal::before {
background: url("https://swellsurfcamp.com/wp-content/themes/swellactive/assets/css/assets/brand/swell-lines.svg") right center / cover no-repeat; opacity: 0.17;
}
[data-decor="lines"] .pg-sec--teal::before { opacity: 0.22; }
/* 1 · Waves — slowly drifting swell lines */
[data-decor="waves"] .pg-sec--n1::before, [data-decor="waves"] .pg-sec--teal::before {
background: url("https://swellsurfcamp.com/wp-content/themes/swellactive/assets/css/assets/brand/decor-waves.svg") left center / 340px 100% repeat-x; opacity: 0.32;
animation: pgWaveDrift 26s linear infinite;
}
[data-decor="waves"] .pg-sec--teal::before { opacity: 0.42; }
@keyframes pgWaveDrift { to { background-position-x: -340px; } }
/* 2 · Palms — real photo, static, only on tagged blocks (PageShell limits to ≤2, alternating) */
[data-decor="palms"] .pg-sec--n1::before, [data-decor="palms"] .pg-sec--teal::before {
background: none;
}
[data-decor="palms"] .pg-sec--n1.is-palm::before, [data-decor="palms"] .pg-sec--teal.is-palm::before {
background: url("https://swellsurfcamp.com/wp-content/themes/swellactive/assets/css/assets/mood/palms-sky.jpg") right top / 132% auto no-repeat; opacity: 0.16;
}
[data-decor="palms"] .pg-sec--teal.is-palm::before { opacity: 0.11; }
/* 3 · Caustics — sun-on-water shimmer */
[data-decor="caustics"] .pg-sec--n1::before, [data-decor="caustics"] .pg-sec--teal::before {
background:
radial-gradient(58% 42% at 72% 28%, rgba(127, 214, 208, 0.5), transparent 62%),
radial-gradient(50% 50% at 88% 70%, rgba(127, 214, 208, 0.4), transparent 60%),
radial-gradient(42% 32% at 60% 82%, rgba(238, 106, 71, 0.26), transparent 60%);
background-size: 200% 200%, 180% 180%, 220% 220%; opacity: 0.5;
animation: pgCaustics 30s ease-in-out infinite alternate;
}
[data-decor="caustics"] .pg-sec--teal::before { opacity: 0.62; }
@keyframes pgCaustics {
from { background-position: 0% 0%, 100% 0%, 0% 100%; }
to { background-position: 100% 100%, 0% 100%, 100% 0%; }
}
/* 4 · Contours — ocean-depth rings */
[data-decor="contours"] .pg-sec--n1::before, [data-decor="contours"] .pg-sec--teal::before {
background: url("https://swellsurfcamp.com/wp-content/themes/swellactive/assets/css/assets/brand/decor-contours.svg") right center / auto 128% no-repeat; opacity: 0.22;
}
[data-decor="contours"] .pg-sec--teal::before { opacity: 0.27; }
@media (prefers-reduced-motion: reduce) {
.pg-sec--n1::before, .pg-sec--teal::before { animation: none !important; }
}
/* a fainter full-bleed wash on the hero so it ties back to the marks */
.pg-hero::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: url("https://swellsurfcamp.com/wp-content/themes/swellactive/assets/css/assets/brand/swell-lines.svg") center / cover no-repeat;
opacity: 0.06;
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}
.pg-sec--tight { padding: clamp(48px, 6vw, 88px) 0; }
/* generic single-column prose (About / simple template pages) — full content width */
.pg-prose { max-width: none; }
.pg-prose .ed-lead { margin-top: 26px; }
.pg-prose .ed-para { margin-top: 20px; }
.pg-prose__sub {
margin: clamp(36px, 4vw, 52px) 0 0; font-family: var(--font-display); font-style: italic;
font-weight: 400; font-size: var(--disp-small); line-height: 1.15; color: #fff;
}
.pg-sec--n1 { background: var(--night); }
.pg-sec--n2 { background: var(--night-2); }
.pg-sec--teal { background: var(--teal-deep); }
/* intro / lede split — headline left, supporting column right */
.pg-lede {
display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(36px, 6vw, 92px);
align-items: start;
}
.pg-lede__h {
font-family: var(--font-display); font-weight: 400;
font-size: var(--disp-head); line-height: 1.04; letter-spacing: -0.02em;
margin: 0; color: #fff; text-wrap: balance;
}
.pg-lede__h i { font-style: italic; color: var(--teal-pale); }
.pg-lede__body { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
@media (max-width: 900px) { .pg-lede { grid-template-columns: 1fr; gap: 28px; } }
/* Optional photo to the left of the lede text (set per page in ACF). */
.pg-lede--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; }
.pg-lede__media { margin: 0; overflow: hidden; border-radius: 14px; }
.pg-lede__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.pg-lede__text { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); }
@media (max-width: 900px) { .pg-lede--media { grid-template-columns: 1fr; } .pg-lede__media img { aspect-ratio: 16 / 10; } }
/* stat row */
.pg-facts {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
margin-top: clamp(40px, 5vw, 72px); padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.16);
}
.pg-fact__num { font-family: var(--font-display); font-size: calc(clamp(38px, 4.2vw, 58px) * var(--m-num, 1)); line-height: 0.9; color: #fff; }
.pg-fact__num i { font-style: italic; font-size: 0.62em; color: var(--teal-pale); }
.pg-fact__lbl { margin-top: 12px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-pale); }
@media (max-width: 760px) { .pg-facts { grid-template-columns: 1fr; gap: 22px; } }
/* =====================================================================
INTRO SECTION CONCEPTS — switched via [data-lede] (Tweaks)
Box-free treatments of the shared .pg-lede + .pg-facts block.
Scoped to .pg-sec--n1 so only the page intro is affected.
===================================================================== */
/* ---- 1 · MARQUEE — oversized full-width headline, inline meta line ---- */
[data-lede="marquee"] .pg-sec--n1 .pg-lede { display: block; }
[data-lede="marquee"] .pg-sec--n1 .pg-lede__h {
font-size: var(--disp-head); line-height: 1.08; max-width: none;
font-style: italic; position: relative; text-wrap: balance;
}
/* Curly quotes are part of the line — inline, turquoise, hugging the text */
[data-lede="marquee"] .pg-sec--n1 .pg-lede__h::before {
content: "\201C"; color: var(--teal-pale); font-style: normal;
font-size: 1.2em; line-height: 0; vertical-align: -0.18em; margin-right: 0.04em;
}
[data-lede="marquee"] .pg-sec--n1 .pg-lede__h::after {
content: "\201D"; color: var(--teal-pale); font-style: normal;
font-size: 1.2em; line-height: 0; vertical-align: -0.18em; margin-left: 0.04em;
}
[data-lede="marquee"] .pg-sec--n1 .pg-lede__h i { color: var(--teal-pale); }
[data-lede="marquee"] .pg-sec--n1 .pg-lede__body {
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px);
margin-top: clamp(28px, 3vw, 46px); padding-top: 0; max-width: none;
}
/* Marquee drops the fact strip entirely — headline + copy only. */
[data-lede="marquee"] .pg-sec--n1 .pg-facts { display: none; }
@media (max-width: 760px) {
[data-lede="marquee"] .pg-sec--n1 .pg-lede__body { grid-template-columns: 1fr; }
}
/* ---- 2 · LEDGER — headline left, facts as a hairline-ruled list ---- */
[data-lede="ledger"] .pg-sec--n1 .pg-lede { grid-template-columns: 1.1fr 1fr; }
[data-lede="ledger"] .pg-sec--n1 .pg-facts {
display: flex; flex-direction: column; gap: 0;
border-top: none; padding-top: 0; margin-top: clamp(40px, 5vw, 68px);
max-width: 820px;
}
[data-lede="ledger"] .pg-sec--n1 .pg-facts > div {
display: flex; align-items: baseline; justify-content: space-between; gap: 28px;
padding: clamp(18px, 2vw, 28px) 0;
border-top: 1px solid rgba(255,255,255,0.16);
}
[data-lede="ledger"] .pg-sec--n1 .pg-facts > div:last-child { border-bottom: 1px solid rgba(255,255,255,0.16); }
[data-lede="ledger"] .pg-sec--n1 .pg-fact__num { flex: none; font-size: calc(clamp(34px, 4vw, 58px) * var(--m-num, 1)); }
[data-lede="ledger"] .pg-sec--n1 .pg-fact__lbl {
margin-top: 0; text-align: right; color: rgba(255,255,255,0.64);
}
/* ---- 3 · TIDE — brand teal horizon band, big baseline figures ---- */
[data-lede="tide"] .pg-sec--n1 {
background: linear-gradient(180deg, var(--teal-deep) 0%, #0a4247 46%, var(--night) 100%);
}
[data-lede="tide"] .pg-sec--n1::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: url("https://swellsurfcamp.com/wp-content/themes/swellactive/assets/css/assets/brand/decor-waves.svg") left center / 380px 100% repeat-x;
opacity: 0.16; animation: pgWaveDrift 30s linear infinite;
}
[data-lede="tide"] .pg-sec--n1 .pg-lede__body .ed-lead,
[data-lede="tide"] .pg-sec--n1 .pg-lede__body .ed-para { color: rgba(249,245,233,0.94); }
[data-lede="tide"] .pg-sec--n1 .pg-facts {
border-top: 1px solid rgba(255,255,255,0.26);
padding-top: clamp(28px, 3vw, 44px); margin-top: clamp(44px, 5vw, 76px);
align-items: end;
}
[data-lede="tide"] .pg-sec--n1 .pg-fact__num { font-size: calc(clamp(48px, 6vw, 92px) * var(--m-num, 1)); line-height: 0.86; }
[data-lede="tide"] .pg-sec--n1 .pg-fact__num i { color: var(--coral); }
[data-lede="tide"] .pg-sec--n1 .pg-fact__lbl { color: var(--teal-pale); margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
[data-lede="tide"] .pg-sec--n1::after { animation: none; }
}
/* section head (kicker + h2 + lead) */
.pg-head { max-width: 880px; }
.pg-head .ed-h2 { color: #fff; }
.pg-head__lead { margin-top: 22px; max-width: 60ch; }
/* Packages: heading on the left, season toggle on the right (stacks on mobile). */
.pg-pkghead { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(20px, 4vw, 56px); flex-wrap: wrap; }
.pg-pkghead .pg-head { margin: 0; }
.pg-pkghead .pg-season { margin-top: 0; align-items: flex-end; }
.pg-pkghead .pg-season__note { text-align: right; }
@media (max-width: 760px) {
.pg-pkghead { align-items: flex-start; }
.pg-pkghead .pg-season { align-items: flex-start; }
.pg-pkghead .pg-season__note { text-align: left; }
}
/* ---------------------------------------------------------
TWO-UP FEATURE — image + text, alternating
--------------------------------------------------------- */
.pg-feature {
display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 92px);
align-items: center;
}
.pg-feature--flip { grid-template-columns: 1fr 1.05fr; }
.pg-feature--flip .pg-feature__media { order: 2; }
.pg-feature__media {
position: relative; overflow: hidden; border-radius: 16px;
aspect-ratio: 4/5; background: #0c2429;
}
.pg-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-swell); }
.pg-feature__media:hover img { transform: scale(1.04); }
/* THE FOOD (Your stay) — two pg-feature rows, with extra prose + diet ticks. */
.pg-food__para { margin: 18px 0 0; }
.pg-food__row2 { margin-top: clamp(64px, 8vw, 120px); }
.pg-food__ticks {
margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14);
display: flex; flex-wrap: wrap; gap: 12px 26px;
}
.pg-food__ticks span {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-body); font-size: 15px; color: rgba(249,245,233,0.85);
}
.pg-food__ticks svg { color: var(--coral); flex: none; }
.pg-feature__stamp {
position: absolute; left: 18px; top: 18px; z-index: 2;
display: inline-flex; align-items: center; gap: 9px;
padding: 9px 15px 9px 13px; border-radius: 999px;
background: rgba(8,22,28,0.42); backdrop-filter: blur(10px) saturate(140%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.42); color: #fff;
font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.pg-feature__stamp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px var(--coral-glow); }
.pg-feature__h { margin: 18px 0 0; }
.pg-feature__lead { margin: 20px 0 0; }
.pg-feature__list { list-style: none; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 18px; }
.pg-feature__list li { display: grid; grid-template-columns: 22px 1fr; gap: 16px; align-items: start; }
.pg-feature__list svg { width: 20px; height: 20px; color: var(--teal-pale); margin-top: 3px; }
.pg-feature__list .lbl { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--cream); }
.pg-feature__list .lbl b { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-pale); margin-bottom: 4px; }
@media (max-width: 900px) {
.pg-feature, .pg-feature--flip { grid-template-columns: 1fr; gap: 28px; }
.pg-feature--flip .pg-feature__media { order: 0; }
.pg-feature__media { aspect-ratio: 16/11; }
}
/* eyebrow → headline → full-width slider → text (mirrors the home Stay block):
lead paragraph beside the checklist, sitting under the slider. */
.pg-after { display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(30px, 3.5vw, 52px); }
.pg-after__lead { margin: 0; max-width: 46ch; }
.pg-after__lead > p { margin: 0; }
.pg-after__lead > p + p { margin-top: 1em; }
.pg-after__list { margin: 0; padding: 0; border-top: 0; }
.pg-after__col2 > p { margin: 0; }
.pg-after__col2 > p + p { margin-top: 1em; }
@media (max-width: 880px) { .pg-after { grid-template-columns: 1fr; gap: 24px; } }
/* ---------------------------------------------------------
PROGRESSION / LEVELS — numbered cards
--------------------------------------------------------- */
.pg-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: clamp(40px, 5vw, 72px); }
.pg-level {
position: relative; padding: clamp(26px, 2.6vw, 38px);
background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.12);
border-radius: 18px; display: flex; flex-direction: column;
transition: transform 320ms var(--ease-swell), box-shadow 320ms var(--ease-swell), border-color 320ms var(--ease-swell);
}
.pg-level:hover { transform: translateY(-4px); box-shadow: 0 22px 56px rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.2); }
.pg-level__rn {
font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--coral);
display: inline-flex; align-items: center; gap: 12px;
}
.pg-level__rn::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.14); }
.pg-level__t { margin: 20px 0 0; font-family: var(--font-display); font-weight: 400; font-size: var(--disp-sub); line-height: 1.05; color: #fff; }
.pg-level__d { margin: 12px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: rgba(249,245,233,0.74); }
.pg-level__tag { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-pale); }
@media (max-width: 880px) { .pg-levels { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------
PROGRESSION — staggered numbered "step" cards (surf page)
--------------------------------------------------------- */
.pg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.5vw, 56px); align-items: start; margin-top: clamp(44px, 5.5vw, 80px); }
.pg-step { border-top: 2px solid var(--coral); padding-top: clamp(22px, 2.4vw, 32px); }
.pg-step:nth-child(1) { margin-top: clamp(96px, 11vw, 168px); }
.pg-step:nth-child(2) { margin-top: clamp(48px, 5.5vw, 84px); }
.pg-step__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.pg-step__num {
font-family: var(--font-display); font-style: italic; font-size: calc(clamp(56px, 6vw, 92px) * var(--m-num, 1)); line-height: 0.9;
color: transparent; -webkit-text-stroke: 1.2px var(--coral);
}
@supports not ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)) {
.pg-step__num { color: var(--coral); }
}
.pg-step__tag { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-pale); white-space: nowrap; }
.pg-step__t { margin: clamp(18px, 2vw, 26px) 0 0; font-family: var(--font-display); font-weight: 400; font-size: var(--disp-sub); line-height: 1.05; color: #fff; }
.pg-step__d { margin: 12px 0 0; font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.6; color: rgba(249,245,233,0.74); max-width: 38ch; }
@media (max-width: 880px) {
.pg-steps { grid-template-columns: 1fr; gap: 40px; }
.pg-step:nth-child(1), .pg-step:nth-child(2) { margin-top: 0; }
}
/* ---------------------------------------------------------
A DAY AT SWELL — interactive rail timeline (surf page)
--------------------------------------------------------- */
.pg-dl { margin-top: clamp(40px, 5vw, 72px); }
/* Rail scales to any number of stops: fills the width when there are few,
scrolls horizontally if there are many — so it never crams. */
.pg-dl__railwrap { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scrollbar-width: none; -ms-overflow-style: none; }
.pg-dl__railwrap::-webkit-scrollbar { display: none; }
.pg-dl__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(78px, 1fr); min-width: 100%; }
.pg-dl__stop {
appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 12px;
font-family: var(--font-body); color: inherit;
}
.pg-dl__time { font-family: var(--font-display); font-style: italic; font-size: clamp(17px, 1.6vw, 22px); color: rgba(249,245,233,0.45); transition: color 240ms var(--ease-swell); }
.pg-dl__dotw { position: relative; width: 100%; height: 16px; display: flex; align-items: center; justify-content: center; }
.pg-dl__dotw::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,0.16); }
.pg-dl__stop:first-child .pg-dl__dotw::before { left: 50%; }
.pg-dl__stop:last-child .pg-dl__dotw::before { right: 50%; }
.pg-dl__dotw::after { content: ""; position: absolute; top: 50%; height: 2px; margin-top: -0.5px; background: var(--coral); left: 0; right: 100%; transition: right 320ms var(--ease-swell); }
.pg-dl__stop.is-past .pg-dl__dotw::after { right: 0; }
.pg-dl__stop.is-active .pg-dl__dotw::after { right: 50%; }
.pg-dl__stop:first-child .pg-dl__dotw::after { left: 50%; }
.pg-dl__dot {
position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%;
background: var(--night); box-shadow: inset 0 0 0 1.5px rgba(249,245,233,0.5);
transition: all 240ms var(--ease-swell);
}
.pg-dl__stop.is-past .pg-dl__dot { background: var(--coral); box-shadow: none; }
.pg-dl__stop.is-active .pg-dl__dot { width: 15px; height: 15px; background: var(--coral); box-shadow: 0 0 0 6px var(--coral-glow); }
/* Per-dot labels are hidden on the rail (they collided once there were many
stops); the selected stop's label shows large in the panel below instead.
Kept in the DOM via aria-label on each stop for accessibility. */
.pg-dl__lbl { display: none; }
.pg-dl__stop:hover .pg-dl__time, .pg-dl__stop.is-active .pg-dl__time { color: var(--coral); }
.pg-dl__stop:hover .pg-dl__lbl { color: rgba(249,245,233,0.75); }
.pg-dl__stop.is-active .pg-dl__lbl { color: #fff; }
.pg-dl__stop:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 6px; }
.pg-dl__panel {
display: grid; grid-template-columns: minmax(170px, 0.4fr) 1.6fr auto;
gap: clamp(28px, 4vw, 72px); align-items: start;
margin-top: clamp(40px, 5vw, 64px);
animation: pgDlIn 420ms var(--ease-swell) both;
}
@keyframes pgDlIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pg-dl__panel { animation: none; } }
.pg-dl__bigtime { font-family: var(--font-display); font-style: italic; font-size: calc(clamp(60px, 7vw, 108px) * var(--m-num, 1)); line-height: 0.85; color: var(--coral); }
.pg-dl__body h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--disp-sub); line-height: 1.05; color: #fff; }
.pg-dl__body p { margin: 14px 0 0; font-family: var(--font-body); font-size: clamp(16.5px, 1.3vw, 18px); font-weight: 400; line-height: 1.65; color: rgba(249,245,233,0.74); max-width: 52ch; }
.pg-dl__nav { display: flex; align-items: center; gap: 14px; justify-self: end; }
.pg-dl__arrow {
appearance: none; background: none; cursor: pointer; padding: 0;
width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
display: inline-flex; align-items: center; justify-content: center; color: var(--cream);
transition: border-color 240ms var(--ease-swell), background 240ms var(--ease-swell), opacity 240ms var(--ease-swell);
}
.pg-dl__arrow:hover:not(:disabled) { border-color: var(--coral); background: var(--coral-glow); }
.pg-dl__arrow:disabled { opacity: 0.3; cursor: default; }
.pg-dl__count { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.14em; color: rgba(249,245,233,0.55); white-space: nowrap; }
@media (max-width: 760px) {
.pg-dl__lbl { display: none; }
.pg-dl__time { font-size: 15px; }
.pg-dl__panel { grid-template-columns: 1fr; gap: 18px; }
.pg-dl__nav { justify-self: start; }
}
/* Phones: keep the day-stops a comfortable, swipeable width (the rail scrolls
horizontally — the native scrollbar is hidden above, and the active stop is
scrolled into view by the script). */
@media (max-width: 520px) {
.pg-dl__rail { grid-auto-columns: minmax(64px, 1fr); }
.pg-dl__time { font-size: 13px; }
.pg-dl__railwrap { scroll-snap-type: x proximity; }
.pg-dl__stop { scroll-snap-align: center; }
}
/* Connected progression — the three cards read as one continuous timeline:
a coral rail runs through every card AND bridges the gaps, with a glowing
node above each step's title and an arrowhead at the end. Roman numerals
are dropped in the markup. (e.g. wingfoiling) */
.pg-levels--connected { position: relative; }
.pg-levels--connected .pg-level {
overflow: visible;
padding-top: clamp(58px, 5.5vw, 76px);
}
.pg-levels--connected .pg-level__t { margin-top: 0; }
/* the rail — one segment per card, extended into the gap so it reads continuous */
.pg-levels--connected .pg-level::before {
content: ""; position: absolute; z-index: 1; pointer-events: none;
top: clamp(30px, 3.2vw, 40px); left: 0; right: 0; height: 2px;
background: var(--coral); opacity: 0.7;
}
.pg-levels--connected .pg-level:first-child::before { left: clamp(26px, 2.6vw, 38px); }
.pg-levels--connected .pg-level:not(:last-child)::before { right: calc(-1 * clamp(16px, 2vw, 26px)); }
/* node — a coral station dot sitting on the rail, above each title */
.pg-levels--connected .pg-level::after {
content: ""; position: absolute; z-index: 2; pointer-events: none;
top: clamp(30px, 3.2vw, 40px); left: clamp(26px, 2.6vw, 38px);
width: 14px; height: 14px; border-radius: 50%;
background: var(--coral);
box-shadow: 0 0 0 5px rgba(238,106,71,0.16), 0 0 14px 2px rgba(238,106,71,0.35);
transform: translate(-50%, -50%);
}
/* arrowhead closing the rail */
.pg-levels--connected::after {
content: ""; position: absolute; z-index: 2; pointer-events: none;
top: clamp(30px, 3.2vw, 40px); right: 0;
width: 11px; height: 11px;
border-top: 2px solid var(--coral); border-right: 2px solid var(--coral);
transform: translate(35%, -50%) rotate(45deg);
}
@media (max-width: 880px) {
/* stacked → the rail runs vertically down the left edge */
.pg-levels--connected .pg-level {
padding-top: clamp(26px, 2.6vw, 38px);
padding-left: clamp(52px, 12vw, 64px);
}
.pg-levels--connected .pg-level::before {
top: 0; bottom: 0; left: clamp(28px, 6vw, 34px); right: auto;
width: 2px; height: auto;
}
.pg-levels--connected .pg-level:first-child::before { top: clamp(30px, 7vw, 40px); left: clamp(28px, 6vw, 34px); }
.pg-levels--connected .pg-level:not(:last-child)::before { right: auto; bottom: calc(-1 * clamp(16px, 2vw, 26px)); }
.pg-levels--connected .pg-level::after {
top: clamp(34px, 7.5vw, 46px); left: clamp(28px, 6vw, 34px);
}
.pg-levels--connected::after {
top: auto; right: auto; bottom: 0; left: clamp(28px, 6vw, 34px);
transform: translate(-50%, 35%) rotate(135deg);
}
}
/* ---------------------------------------------------------
A DAY — timeline list
--------------------------------------------------------- */
.pg-day { margin-top: clamp(40px, 5vw, 72px); border-top: 1.5px solid rgba(255,255,255,0.5); }
.pg-day__row {
display: grid; grid-template-columns: 130px 1fr; gap: clamp(18px, 3vw, 44px);
padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,0.14); align-items: baseline;
}
.pg-day__time { font-family: var(--font-display); font-style: italic; font-size: var(--disp-small); color: var(--coral); }
.pg-day__body h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--disp-small); line-height: 1.1; color: #fff; }
.pg-day__body p { margin: 8px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: rgba(249,245,233,0.74); max-width: 60ch; }
@media (max-width: 680px) { .pg-day__row { grid-template-columns: 1fr; gap: 6px; } }
/* ---------------------------------------------------------
WHAT'S INCLUDED — checklist grid
--------------------------------------------------------- */
.pg-inc { list-style: none; margin: clamp(36px, 4vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; }
.pg-inc li { list-style: none; display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.12); }
.pg-inc__ico { width: 26px; height: 26px; color: var(--coral); }
.pg-inc h3 { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 16px; color: #fff; letter-spacing: 0.01em; }
.pg-inc p { margin: 5px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: rgba(249,245,233,0.68); }
@media (max-width: 760px) { .pg-inc { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------
IMAGE STRIP
--------------------------------------------------------- */
.pg-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(36px, 4vw, 60px); }
.pg-strip figure { margin: 0; position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 4/5; background: #0c2429; }
.pg-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease-swell); }
.pg-strip figure:hover img { transform: scale(1.05); }
.pg-strip figcaption {
position: absolute; left: 14px; bottom: 12px; color: #fff;
font-family: var(--font-display); font-style: italic; font-size: 17px;
text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
@media (max-width: 760px) { .pg-strip { grid-template-columns: 1fr 1fr; } }
/* ---------------------------------------------------------
WHEN TO GO — seasons conditions chart (Surfing page)
--------------------------------------------------------- */
.pg-seasons__scroll { width: 100%; margin-top: clamp(36px, 4vw, 58px); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.pg-seasons__chart {
display: grid;
width: 100%;
min-width: 760px;
border-top: 1px solid rgba(255,255,255,0.16);
}
.pg-seasons__chart > * {
padding: 15px 16px;
border-bottom: 1px solid rgba(255,255,255,0.09);
}
/* header cells */
.pg-seasons__corner { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.pg-seasons__cornlbl { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--teal-pale); line-height: 1; }
.pg-seasons__cornsub { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(249,245,233,0.5); }
.pg-seasons__hd {
position: relative; overflow: hidden; min-height: 98px;
display: flex; flex-direction: column; justify-content: flex-end; gap: 5px;
border-left: 1px solid rgba(255,255,255,0.09);
}
.pg-seasons__hdbg {
position: absolute; inset: 0; z-index: 0;
background-size: cover; background-position: center; opacity: 0.42;
transform: scale(1.001);
transition: transform 1200ms var(--ease-swell), opacity var(--dur-base) var(--ease-swell);
}
.pg-seasons__hd::after {
content: ""; position: absolute; inset: 0; z-index: 0;
background: linear-gradient(180deg, rgba(10,29,34,0.45) 0%, rgba(10,29,34,0.86) 100%);
}
.pg-seasons__hd .pg-seasons__mo { position: relative; z-index: 1; }
.pg-seasons__mo { font-family: var(--font-display); font-size: var(--disp-small); line-height: 0.98; color: #fff; }
.pg-seasons__mo i { color: var(--teal-pale); font-style: italic; }
/* row-label cells */
.pg-seasons__rl { display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.pg-seasons__rlmain { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: #fff; letter-spacing: 0.01em; }
.pg-seasons__rlsub { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(249,245,233,0.44); }
/* value cells */
.pg-seasons__cell { display: flex; align-items: center; border-left: 1px solid rgba(255,255,255,0.09); transition: background var(--dur-base) var(--ease-swell), opacity var(--dur-base) var(--ease-swell); }
/* column hover highlight — lift the hovered period, ease the rest back */
.pg-seasons__cell.is-hot { background: rgba(15,154,154,0.13); }
.pg-seasons__hd.is-hot .pg-seasons__hdbg { opacity: 0.66; transform: scale(1.07); }
.pg-seasons__chart.has-hot .pg-seasons__cell:not(.is-hot) { opacity: 0.5; }
.pg-seasons__chart.has-hot .pg-seasons__hd:not(.is-hot) { opacity: 0.62; }
.pg-seasons__chart.has-hot .pg-seasons__hd:not(.is-hot) .pg-seasons__hdbg { opacity: 0.24; }
/* meters */
.pg-seasons__meter { display: inline-flex; gap: 4px; align-items: flex-end; }
.pg-seasons__meter span {
width: 9px; height: 22px; border-radius: 3px;
background: rgba(255,255,255,0.13);
transition: background var(--dur-base) var(--ease-swell);
}
/* scroll-in fill: chart bars (not the static legend swatches) rise from the
baseline, staggered left-to-right via --c */
.pg-seasons__scroll .pg-seasons__meter span {
transform: scaleY(0); transform-origin: bottom;
transition: transform 720ms var(--ease-swell), background var(--dur-base) var(--ease-swell);
transition-delay: calc(var(--c, 0) * 70ms);
}
.pg-seasons__scroll.reveal.in .pg-seasons__meter span { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
.pg-seasons__scroll .pg-seasons__meter span { transform: scaleY(1); transition: background var(--dur-base); }
}
.pg-seasons__meter--teal span.on { background: var(--teal-500); box-shadow: 0 0 10px rgba(15,154,154,0.55); }
.pg-seasons__meter--coral span.on { background: var(--coral); box-shadow: 0 0 10px rgba(238,106,71,0.5); }
/* temps */
.pg-seasons__temp { display: flex; flex-direction: column; line-height: 1; }
.pg-seasons__temp b { font-family: var(--font-display); font-weight: 400; font-size: 27px; color: #fff; }
.pg-seasons__temp b sup { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--teal-pale); vertical-align: super; margin-left: 1px; }
.pg-seasons__temp span { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.08em; color: rgba(249,245,233,0.5); margin-top: 4px; }
/* rain droplets */
.pg-seasons__rain { display: inline-flex; gap: 5px; align-items: center; color: rgba(255,255,255,0.22); }
.pg-seasons__rain .on { color: var(--teal-pale); }
/* legend */
.pg-seasons__legend { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: clamp(24px, 2.6vw, 36px); }
.pg-seasons__lg { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 13px; color: rgba(249,245,233,0.66); }
.pg-seasons__lg .pg-seasons__meter span { width: 7px; height: 16px; }
@media (max-width: 760px) {
.pg-seasons__temp b { font-size: 23px; }
.pg-seasons__legend { flex-direction: column; gap: 12px; }
}
/* ---------------------------------------------------------
DAY-TRIP CARDS — image-led, drop-in photo + price
--------------------------------------------------------- */
.pg-trips { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: clamp(40px, 5vw, 72px); }
.pg-trip {
display: flex; flex-direction: column; overflow: hidden;
background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.12);
border-radius: 18px;
transition: transform 320ms var(--ease-swell), box-shadow 320ms var(--ease-swell), border-color 320ms var(--ease-swell);
}
.pg-trip:hover { transform: translateY(-4px); box-shadow: 0 22px 56px rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.2); }
.pg-trip__media { position: relative; aspect-ratio: 16/10; background: #0c2429; overflow: hidden; }
.pg-trip__media image-slot { display: block; width: 100%; height: 100%; }
.pg-trip__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* dark-theme the drop placeholder so it reads on the night cards */
.pg-trip__media image-slot::part(empty),
.pg-feature__media image-slot::part(empty) { color: rgba(249,245,233,0.62); }
.pg-trip__media image-slot::part(ring),
.pg-feature__media image-slot::part(ring) { border-color: rgba(249,245,233,0.28); }
.pg-trip__media image-slot::part(frame),
.pg-feature__media image-slot::part(frame) { background: rgba(255,255,255,0.03); }
.pg-trip__num {
position: absolute; left: 16px; top: 14px; z-index: 2;
font-family: var(--font-display); font-style: italic; font-size: 18px; color: #fff;
text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
.pg-trip__body { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.2vw, 32px); }
.pg-trip__t { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--disp-small); line-height: 1.05; color: #fff; }
.pg-trip__t i { font-style: italic; color: var(--teal-pale); }
.pg-trip__d { margin: 12px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: rgba(249,245,233,0.74); }
.pg-trip__foot {
margin-top: auto; padding-top: 20px;
display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.pg-trip__price { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-pale); }
.pg-trip__where { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 15px; color: rgba(249,245,233,0.6); }
.pg-trip__where svg { width: 15px; height: 15px; color: var(--coral); }
@media (max-width: 720px) { .pg-trips { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------
PULL QUOTE
--------------------------------------------------------- */
.pg-quote { max-width: 22ch; }
.pg-quote blockquote {
margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: clamp(30px, 4.4vw, 64px); line-height: 1.08; letter-spacing: -0.015em; color: #fff;
text-wrap: balance;
}
.pg-quote blockquote .mark { color: var(--teal-pale); }
.pg-quote__by { margin-top: 26px; display: inline-flex; align-items: center; gap: 14px; }
.pg-quote__by img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.pg-quote__by .n { font-family: var(--font-display); font-size: 19px; color: #fff; }
.pg-quote__by .s { font-family: var(--font-body); font-size: 13px; color: rgba(249,245,233,0.62); }
/* ---------------------------------------------------------
POOL & GARDEN — three tweakable layouts (Your Stay)
--------------------------------------------------------- */
.pg-pool__ey {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-body); font-weight: 500; font-size: 12px;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal-pale);
}
.pg-pool__ey .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; }
.pg-pool__q {
margin: 16px 0 0; font-family: var(--font-display); font-weight: 400;
font-size: var(--disp-title); line-height: 1.1; letter-spacing: -0.015em;
color: #fff; text-wrap: balance;
}
.pg-pool__q i { color: var(--teal-pale); }
.pg-pool__lead {
margin: 20px 0 0; font-family: var(--font-body); font-size: 18px; line-height: 1.65;
color: rgba(255, 255, 255, 0.86); max-width: 48ch;
}
.pg-chips--center { justify-content: center; }
/* A · Overlay (billboard) — copy over a full-bleed photo */
.pg-pool--billboard .pg-pool__frame {
position: relative; border-radius: 24px; overflow: hidden;
min-height: clamp(460px, 56vw, 660px); box-shadow: 0 34px 80px rgba(0, 0, 0, 0.34);
}
.pg-pool--billboard .pg-pool__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-pool--billboard .pg-pool__scrim {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(6, 29, 40, 0) 30%, rgba(6, 29, 40, 0.82) 100%);
}
.pg-pool--billboard .pg-pool__copy {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
padding: clamp(28px, 4vw, 58px); max-width: 840px;
}
.pg-pool--billboard .pg-pool__copy .pg-chips { margin-top: 26px; }
/* B · Editorial split — portrait photo + a tidy column */
.pg-pool--split .pg-pool__split {
display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
.pg-pool--split .pg-pool__media {
position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28); aspect-ratio: 4 / 5;
}
.pg-pool--split .pg-pool__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-pool--split .pg-pool__text { padding-left: clamp(16px, 2vw, 28px); border-left: 2px solid rgba(238, 106, 71, 0.55); }
/* C · Stacked — centred line, wide photo band, chips row */
.pg-pool--stacked .pg-pool__head { max-width: 880px; margin: 0 auto; text-align: center; }
.pg-pool--stacked .pg-pool__head .pg-pool__ey { justify-content: center; }
.pg-pool--stacked .pg-pool__head .pg-pool__lead { margin-left: auto; margin-right: auto; }
.pg-pool--stacked .pg-pool__band {
position: relative; margin: clamp(32px, 4vw, 56px) 0 clamp(24px, 3vw, 36px);
border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28); aspect-ratio: 21 / 9;
}
.pg-pool--stacked .pg-pool__band img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
.pg-pool--split .pg-pool__split { grid-template-columns: 1fr; }
.pg-pool--split .pg-pool__text { border-left: 0; padding-left: 0; }
.pg-pool--billboard .pg-pool__frame { min-height: clamp(400px, 96vw, 560px); }
.pg-pool--billboard .pg-pool__copy { padding: 24px 22px; }
.pg-pool--stacked .pg-pool__band { aspect-ratio: 16 / 10; }
}
/* slideshow — shared across the three layouts */
.pg-slider { position: absolute; inset: 0; z-index: 0; }
/* keep the crossfade when the slider sits inside a feature media frame
(whose `img` rule would otherwise override the opacity transition) */
.pg-feature__media .pg-slider__img { transition: opacity 900ms var(--ease-swell), transform 1200ms var(--ease-swell); }
.pg-slider__img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
opacity: 0; transition: opacity 900ms var(--ease-swell);
}
.pg-slider__img.is-active { opacity: 1; }
.pg-slider__nav {
position: absolute; top: 16px; right: 16px; z-index: 3;
display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 999px;
background: rgba(6, 29, 40, 0.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.pg-slider__arrow {
width: 34px; height: 34px; border-radius: 50%; flex: none;
display: inline-flex; align-items: center; justify-content: center;
color: #fff; background: transparent; transition: background 200ms var(--ease-swell);
}
.pg-slider__arrow:hover { background: rgba(255, 255, 255, 0.18); }
.pg-slider__count {
font-family: var(--font-body); font-size: 12px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.92);
min-width: 56px; text-align: center; font-variant-numeric: tabular-nums;
}
/* amenities — three non-pill treatments */
.pg-poolchips { margin-top: 26px; }
/* inline — middot-separated row (wraps cleanly, no leading dividers) */
.pg-poolchips--inline { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
.pg-poolchips--inline .ch {
display: inline-flex; align-items: center;
font-family: var(--font-body); font-size: 16px; color: rgba(255, 255, 255, 0.9);
}
.pg-poolchips--inline .ch svg { color: var(--teal-pale); flex: none; margin-right: 8px; }
.pg-poolchips--inline .ch:not(:last-child)::after {
content: "·"; margin: 0 16px; color: rgba(255, 255, 255, 0.42);
}
.pg-poolchips--inline.pg-poolchips--center { justify-content: center; }
/* ticks — coral disc + check, two columns */
.pg-poolchips--ticks {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 30px; max-width: 560px;
}
.pg-poolchips--ticks.pg-poolchips--center { margin-left: auto; margin-right: auto; }
.pg-poolchips--ticks .ch {
display: flex; align-items: center; gap: 12px;
font-family: var(--font-body); font-size: 16px; color: rgba(255, 255, 255, 0.92);
}
.pg-poolchips--ticks .ico {
width: 26px; height: 26px; border-radius: 50%; flex: none;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(238, 106, 71, 0.18); color: var(--coral);
}
/* ruled — hairline-separated spec list */
.pg-poolchips--ruled { display: flex; flex-direction: column; max-width: 460px; }
.pg-poolchips--ruled.pg-poolchips--center { margin-left: auto; margin-right: auto; }
.pg-poolchips--ruled .ch {
display: flex; align-items: center; gap: 14px; padding: 14px 0;
border-top: 1px solid rgba(255, 255, 255, 0.16);
font-family: var(--font-body); font-size: 16px; color: #fff;
}
.pg-poolchips--ruled .ch:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.pg-poolchips--ruled .ch svg { color: var(--teal-pale); flex: none; }
@media (max-width: 560px) {
.pg-poolchips--ticks { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------
WINGFOILING FILM — three display options
--------------------------------------------------------- */
.pg-vid__poster, .pg-vid__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pg-vid__poster { display: block; cursor: pointer; padding: 0; background: #06141c; }
.pg-vid__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-vid__scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(6, 29, 40, 0.12) 0%, rgba(6, 29, 40, 0.5) 100%);
transition: background 320ms var(--ease-swell);
}
.pg-vid__poster:hover .pg-vid__scrim { background: linear-gradient(180deg, rgba(6, 29, 40, 0.2) 0%, rgba(6, 29, 40, 0.56) 100%); }
.pg-vid__play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: clamp(64px, 7vw, 88px); height: clamp(64px, 7vw, 88px); border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; padding-left: 5px;
background: var(--coral); color: #fff; box-shadow: 0 14px 40px rgba(238, 106, 71, 0.5);
transition: transform 260ms var(--ease-swell);
}
.pg-vid__poster:hover .pg-vid__play { transform: translate(-50%, -50%) scale(1.06); }
.pg-vid__hint {
position: absolute; left: 0; right: 0; bottom: clamp(18px, 3vw, 30px); text-align: center;
font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
}
/* A · Cinematic — full-bleed widescreen band */
.pg-vid--cinematic .pg-vid__bleed { position: relative; }
.pg-vid--cinematic .pg-vid__stage { position: relative; height: clamp(380px, 58vw, 780px); overflow: hidden; background: #06141c; }
.pg-vid--cinematic .pg-vid__cap {
position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(28px, 4vw, 60px) 0;
background: linear-gradient(180deg, transparent 0%, rgba(6, 29, 40, 0.8) 100%); pointer-events: none;
}
.pg-vid__bigh {
margin: 14px 0 0; font-family: var(--font-display); font-weight: 400;
font-size: var(--disp-title); line-height: 1.08; letter-spacing: -0.015em;
color: #fff; max-width: 20ch; text-wrap: balance;
}
.pg-vid__bigh i { color: var(--teal-pale); }
/* B · Feature — player beside an editorial column */
.pg-vid--feature .pg-vid__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.pg-vid--feature .pg-vid__media {
position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #06141c;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.34);
}
.pg-vid__h { margin-top: 14px; }
.pg-vid__lead { margin-top: 18px; max-width: 42ch; }
/* C · Framed — centred contained player */
.pg-vid--framed .pg-vid__head { text-align: center; max-width: 720px; margin: 0 auto; }
.pg-vid--framed .pg-vid__frame {
position: relative; aspect-ratio: 16 / 9; max-width: 1040px; margin: clamp(28px, 3vw, 46px) auto 0;
border-radius: 24px; overflow: hidden; background: #06141c; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
}
@media (max-width: 900px) {
.pg-vid--feature .pg-vid__grid { grid-template-columns: 1fr; }
.pg-vid--cinematic .pg-vid__stage { height: clamp(300px, 64vw, 520px); }
}
/* ---------------------------------------------------------
AIRPORT CARDS (getting here)
--------------------------------------------------------- */
.pg-air { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(36px, 4vw, 60px); }
.pg-air__card {
padding: clamp(24px, 2.4vw, 34px);
background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px;
display: flex; flex-direction: column; gap: 8px;
}
.pg-air__card.is-primary { border-color: rgba(238,106,71,0.5); box-shadow: inset 0 0 0 1px rgba(238,106,71,0.18); }
.pg-air__iata { display: inline-flex; align-items: baseline; gap: 10px; }
.pg-air__iata b { font-family: var(--font-display); font-weight: 400; font-size: calc(clamp(40px, 4vw, 60px) * var(--m-num, 1)); line-height: 0.9; color: #fff; }
.pg-air__dist { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--coral); }
.pg-air__name { font-family: var(--font-body); font-weight: 500; font-size: 15px; letter-spacing: 0.04em; color: #fff; margin-top: 4px; }
.pg-air__code { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-pale); }
.pg-air__use { margin: 10px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: rgba(249,245,233,0.7); }
@media (max-width: 860px) { .pg-air { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------
GALLERY (filterable mosaic)
--------------------------------------------------------- */
.pg-gal__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(30px, 3vw, 44px); }
.pg-gal__filter {
padding: 11px 20px; border-radius: 999px;
font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(249,245,233,0.74); background: transparent;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
transition: background 240ms var(--ease-swell), color 240ms var(--ease-swell), box-shadow 240ms var(--ease-swell);
}
.pg-gal__filter:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); }
.pg-gal__filter.is-active { background: #fff; color: var(--night); box-shadow: none; }
.pg-gal__count { margin-left: auto; align-self: center; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(249,245,233,0.5); }
.pg-gal__grid {
margin-top: clamp(28px, 3vw, 44px);
display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 168px;
grid-auto-flow: dense; gap: 14px;
}
.pg-gal__tile { margin: 0; position: relative; overflow: hidden; border-radius: 4px; background: #0c2429; cursor: pointer; }
.pg-gal__tile img { display: block; width: 100%; height: 100%; object-fit: cover; background: #0c2429; transition: transform 900ms var(--ease-swell); }
.pg-gal__tile:hover img { transform: scale(1.05); }
.pg-gal__tile figcaption {
position: absolute; left: 14px; bottom: 12px; right: 14px; color: #fff; z-index: 2;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-swell), transform 300ms var(--ease-swell);
}
.pg-gal__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,22,28,0) 45%, rgba(8,22,28,0.7) 100%); opacity: 0; transition: opacity 300ms var(--ease-swell); }
.pg-gal__tile:hover figcaption, .pg-gal__tile:hover::after { opacity: 1; }
.pg-gal__tile figcaption .t { font-family: var(--font-display); font-style: italic; font-size: 18px; }
.pg-gal__tile figcaption .c { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-pale); }
.pg-gal__tile.w2 { grid-column: span 2; }
.pg-gal__tile.h2 { grid-row: span 2; }
@media (max-width: 880px) {
.pg-gal__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
.pg-gal__tile.w2 { grid-column: span 2; }
}
/* lightbox */
.pg-lb { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: clamp(20px, 5vw, 80px); background: rgba(6,18,22,0.92); backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity 320ms var(--ease-swell); }
.pg-lb.open { opacity: 1; pointer-events: auto; }
.pg-lb img { max-width: 100%; max-height: 82vh; border-radius: 6px; box-shadow: 0 30px 90px rgba(0,0,0,0.6); }
.pg-lb__cap { position: absolute; bottom: clamp(20px, 4vw, 44px); left: 0; right: 0; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 20px; color: #fff; }
.pg-lb__close { position: absolute; top: 22px; right: 24px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); color: #fff; display: flex; align-items: center; justify-content: center; }
.pg-lb__close:hover { background: rgba(255,255,255,0.2); }
.pg-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); color: #fff; display: flex; align-items: center; justify-content: center; transition: background 220ms var(--ease-swell); }
.pg-lb__nav:hover { background: rgba(255,255,255,0.2); }
.pg-lb__nav.prev { left: clamp(12px, 3vw, 40px); }
.pg-lb__nav.next { right: clamp(12px, 3vw, 40px); }
@media (max-width: 680px) { .pg-lb__nav { display: none; } }
/* ---------------------------------------------------------
FAQ groups (faq page)
--------------------------------------------------------- */
.pg-faqgroups { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); margin-top: clamp(40px, 5vw, 72px); }
.pg-faqgroup__t {
display: flex; align-items: baseline; gap: 14px; margin: 0 0 8px;
font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--teal-pale);
}
.pg-faqgroup__t span { font-family: var(--font-display); font-style: italic; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--coral); }
/* contact band */
.pg-contact {
display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 5vw, 80px); align-items: center;
padding: clamp(40px, 5vw, 72px); border-radius: 22px;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
}
.pg-contact__h { margin: 14px 0 0; }
.pg-contact__opts { display: flex; flex-direction: column; gap: 14px; }
.pg-contact__opt { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 14px; background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); transition: background 220ms var(--ease-swell); }
.pg-contact__opt:hover { background: rgba(255,255,255,0.08); }
.pg-contact__opt svg { width: 22px; height: 22px; color: var(--teal-pale); flex: none; }
.pg-contact__opt .k { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-pale); }
.pg-contact__opt .v { font-family: var(--font-display); font-size: 21px; color: #fff; line-height: 1.1; }
@media (max-width: 860px) { .pg-contact { grid-template-columns: 1fr; gap: 28px; } }
/* small shared niceties */
.pg-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pg-chips span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24); font-family: var(--font-body); font-size: 13px; letter-spacing: 0.03em; color: #fff; }
.pg-chips svg { width: 17px; height: 17px; color: var(--teal-pale); flex: none; }
.pg-feature--onteal .pg-feature__media { box-shadow: 0 30px 70px rgba(0,0,0,0.28); }
.pg-amen { list-style: none; margin: clamp(36px,4vw,60px) 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,0.16); display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px; }
.pg-amen li { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 16px; color: var(--cream); }
.pg-amen svg { color: var(--teal-pale); flex: none; width: 19px; height: 19px; }
@media (max-width: 760px) { .pg-amen { grid-template-columns: 1fr; } }
/* mosaic reuse for stay page (matches ed-stay__mosaic but standalone) */
.pg-mosaic { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 160px; gap: 14px; grid-auto-flow: row dense; }
.pg-mosaic figure { margin: 0; position: relative; overflow: hidden; border-radius: 4px; background: #0c2429; }
.pg-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease-swell); }
.pg-mosaic figure:hover img { transform: scale(1.05); }
.pg-mosaic figcaption { position: absolute; left: 12px; bottom: 10px; color: #fff; font-family: var(--font-display); font-style: italic; font-size: 16px; opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-swell), transform 300ms var(--ease-swell); text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
.pg-mosaic figure:hover figcaption { opacity: 1; transform: translateY(0); }
/* m0: hero anchor; m1+m2: stacked right pair; m3/m4+: 3-per-row */
.pg-mosaic .m0 { grid-column: span 3; grid-row: span 2; }
.pg-mosaic .m1, .pg-mosaic .m2 { grid-column: span 3; }
.pg-mosaic .m3, .pg-mosaic .m4 { grid-column: span 2; }
/* any extra photos beyond the first 5: fill 3 per row */
.pg-mosaic figure:nth-child(n+6) { grid-column: span 2; }
@media (max-width: 860px) {
.pg-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
.pg-mosaic .m0, .pg-mosaic .m1, .pg-mosaic .m2 { grid-column: span 2; }
.pg-mosaic .m3, .pg-mosaic .m4 { grid-column: span 1; }
.pg-mosaic figure:nth-child(n+6) { grid-column: span 1; }
}
/* ---------------------------------------------------------
PRICING — package cards, comparison, occupancy
--------------------------------------------------------- */
.pg-pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.pg-pkg {
position: relative; display: flex; flex-direction: column; overflow: hidden;
background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.12);
border-radius: 22px;
transition: transform 320ms var(--ease-swell), box-shadow 320ms var(--ease-swell), border-color 320ms var(--ease-swell);
}
.pg-pkg:hover { transform: translateY(-5px); box-shadow: 0 26px 64px rgba(0,0,0,0.42); border-color: rgba(255,255,255,0.2); }
.pg-pkg.is-feat { border-color: rgba(238,106,71,0.55); box-shadow: 0 0 0 1px rgba(238,106,71,0.35), 0 26px 64px rgba(0,0,0,0.4); }
.pg-pkg__fig { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #0c2429; }
.pg-pkg__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-swell); }
.pg-pkg:hover .pg-pkg__fig img { transform: scale(1.05); }
/* combined Surf & Wingfoil card: slow crossfade between the wing shot (base)
and the surf shot (overlay), looping like a slow tide. */
.pg-pkg__fig-alt { opacity: 0; animation: pkgCrossfade 9s var(--ease-swell) infinite; }
@keyframes pkgCrossfade {
0%, 38% { opacity: 0; }
50%, 88% { opacity: 1; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pg-pkg__fig-alt { animation: none; opacity: 0; }
}
.pg-pkg__fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,22,28,0.1) 0%, rgba(8,22,28,0.55) 100%); }
.pg-pkg__ribbon {
position: absolute; top: 16px; right: 16px; z-index: 2;
display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
background: var(--coral); color: var(--on-accent);
font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.pg-pkg__tag {
position: absolute; left: 18px; bottom: 16px; z-index: 2;
font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #fff;
display: inline-flex; align-items: center; gap: 9px;
}
.pg-pkg__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px var(--coral-glow); }
.pg-pkg__body { padding: clamp(26px, 2.6vw, 36px); display: flex; flex-direction: column; flex: 1; }
.pg-pkg__name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--disp-sub); line-height: 1.0; color: #fff; }
.pg-pkg__desc { margin: 12px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: rgba(249,245,233,0.74); }
.pg-pkg__price { margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,0.14); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* dual occupancy rates */
.pg-pkg__rates { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.pg-pkg__rate { display: flex; flex-direction: column; gap: 6px; }
.pg-pkg__rate + .pg-pkg__rate { padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.1); }
.pg-pkg__rk { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-pale); }
.pg-pkg__rrow { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pg-pkg__rrow .pg-pkg__amount { font-size: calc(clamp(34px, 3.4vw, 46px) * var(--m-num, 1)); }
.pg-pkg__from { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-pale); }
.pg-pkg__amount { font-family: var(--font-display); font-weight: 400; font-size: calc(clamp(40px, 4vw, 56px) * var(--m-num, 1)); line-height: 0.85; color: #fff; }
.pg-pkg__amount sup { font-size: 0.42em; top: -1.1em; margin-right: 1px; color: rgba(249,245,233,0.7); }
.pg-pkg__unit { font-family: var(--font-body); font-size: 13px; color: rgba(249,245,233,0.7); }
.pg-pkg__occ { margin-top: 8px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em; color: rgba(249,245,233,0.55); }
.pg-pkg__custom { font-family: var(--font-display); font-style: italic; font-size: clamp(28px, 2.6vw, 38px); color: var(--teal-pale); line-height: 1; }
.pg-pkg__list { list-style: none; margin: clamp(30px, 3.4vw, 44px) 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pg-pkg__list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-family: var(--font-body); font-size: 16px; line-height: 1.45; color: var(--cream); }
.pg-pkg__list svg { width: 18px; height: 18px; color: var(--coral); margin-top: 2px; }
.pg-pkg__btn { margin-top: 28px; }
.pg-pkg__btn .btn { width: 100%; justify-content: center; }
@media (max-width: 920px) { .pg-pkgs { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }
.pg-pricenote { margin-top: clamp(26px, 3vw, 40px); text-align: center; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.04em; color: rgba(249,245,233,0.6); }
.pg-pricenote b { color: var(--teal-pale); font-weight: 500; }
/* comparison matrix */
.pg-cmp-scroll { margin-top: clamp(36px, 4vw, 60px); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pg-cmp { width: 100%; min-width: 620px; border-collapse: collapse; }
.pg-cmp thead th { text-align: center; padding: 0 0 20px; vertical-align: bottom; }
.pg-cmp thead th.lbl { text-align: left; }
.pg-cmp__col { font-family: var(--font-display); font-weight: 400; font-size: clamp(18px, 1.8vw, 24px); color: #fff; line-height: 1.05; }
.pg-cmp__col .pg-cmp__sub { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-pale); margin-top: 6px; }
.pg-cmp__col.is-feat { color: var(--coral); }
.pg-cmp__head { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--teal-pale); }
.pg-cmp tbody td { padding: 16px 10px; border-top: 1px solid rgba(255,255,255,0.13); text-align: center; }
.pg-cmp tbody td.lbl { text-align: left; font-family: var(--font-body); font-size: 16px; color: var(--cream); width: 46%; }
.pg-cmp tbody tr:hover td { background: rgba(255,255,255,0.025); }
.pg-cmp__yes { color: var(--coral); display: inline-flex; }
.pg-cmp__no { color: rgba(255,255,255,0.2); display: inline-flex; }
.pg-cmp td.is-featcol { background: rgba(238,106,71,0.06); }
@media (max-width: 768px) {
/* Fit the matrix to the phone/narrow window instead of forcing horizontal
scroll. table-layout:fixed + explicit column widths is ESSENTIAL: with auto
layout the long label column collapses the three icon columns to the
checkmark width, so the wider header words ("Surf/Both/Wing") overflow
to the right and run off-screen. Fixed widths keep each header centered
squarely above its column. */
.pg-cmp-scroll { overflow-x: visible; }
.pg-cmp { min-width: 0; width: 100%; table-layout: fixed; }
.pg-cmp thead th.lbl, .pg-cmp tbody td.lbl { width: 43%; }
.pg-cmp thead th:not(.lbl), .pg-cmp tbody td:not(.lbl) { width: 19%; }
.pg-cmp__col { font-size: 15px; overflow-wrap: break-word; }
.pg-cmp__col .pg-cmp__sub { display: none; } /* sub-labels are the width hogs */
.pg-cmp__head { font-size: 12px; letter-spacing: 0.12em; }
.pg-cmp thead th { padding-bottom: 14px; }
.pg-cmp tbody td { padding: 13px 2px; }
.pg-cmp tbody td.lbl { font-size: 13px; line-height: 1.3; padding-right: 10px; }
.pg-cmp__yes svg, .pg-cmp__no svg { width: 17px; height: 17px; }
}
/* comparison CTA — closes the table with a next step */
.pg-cmp-cta {
margin-top: clamp(32px, 4vw, 56px); padding-top: clamp(28px, 3vw, 40px);
border-top: 1px solid rgba(255, 255, 255, 0.14);
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 44px;
}
.pg-cmp-cta__line {
margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: var(--disp-small); line-height: 1.3; color: #fff; max-width: 32ch; text-wrap: balance;
}
.pg-cmp-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; }
/* occupancy table */
.pg-occ { margin-top: clamp(36px, 4vw, 60px); border-top: 1.5px solid rgba(255,255,255,0.5); }
.pg-occ__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(12px,2vw,28px); align-items: baseline; padding: 22px 4px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.pg-occ__row--head span { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-pale); }
.pg-occ__row--head { padding: 0 4px 14px; }
.pg-occ__pkg { font-family: var(--font-display); font-size: var(--disp-small); color: #fff; line-height: 1; }
.pg-occ__pkg small { display: block; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-pale); margin-top: 7px; }
.pg-occ__val { font-family: var(--font-display); font-style: italic; font-size: var(--disp-small); color: var(--coral); }
.pg-occ__val small { font-family: var(--font-body); font-style: normal; font-size: 12px; letter-spacing: 0.04em; color: rgba(249,245,233,0.55); display: block; margin-top: 5px; }
.pg-occ__val.is-req { color: var(--teal-pale); font-size: clamp(17px,1.6vw,21px); }
@media (max-width: 680px) {
.pg-occ__row, .pg-occ__row--head { grid-template-columns: 1fr 0.7fr 0.7fr; gap: 12px; }
.pg-occ__pkg { font-size: 18px; }
}
/* find-us map — full-bleed photo with white island outline (NIHI-style) */
.pg-find { position: relative; overflow: hidden; background: var(--night); }
.pg-find__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pg-find__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,29,40,0.82) 0%, rgba(6,29,40,0.42) 50%, rgba(6,29,40,0.72) 100%), linear-gradient(180deg, rgba(6,29,40,0.3) 0%, rgba(6,29,40,0) 30%, rgba(6,29,40,0.45) 100%); }
.pg-find__inner { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: clamp(60px,7vw,110px) clamp(20px,4vw,56px); display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(28px,4vw,72px); align-items: center; min-height: 86vh; }
.pg-find__map { width: 100%; }
.pg-find__svg { width: 100%; height: auto; display: block; overflow: visible; }
.pg-find__outline { fill: rgba(255,255,255,0.045); stroke: #fff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pg-find__lead { stroke: rgba(255,255,255,0.72); stroke-width: 1.3; fill: none; }
.pg-find__lead.is-primary { stroke: #fff; stroke-width: 1.7; }
.pg-find__node { fill: #fff; }
.pg-find__node-ring { fill: none; stroke: rgba(255,255,255,0.85); stroke-width: 1.5; }
.pg-find__swell-ring { fill: rgba(255,255,255,0.2); }
.pg-find__lbl { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; fill: #fff; }
.pg-find__lbl--swell { font-size: 17px; letter-spacing: 0.2em; }
.pg-find__lbl tspan.t { fill: var(--teal-pale); }
.pg-find__lbl tspan.t--c { fill: var(--coral); }
.pg-find__country { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.34em; fill: rgba(255,255,255,0.4); text-anchor: middle; }
.pg-find__h { font-family: var(--font-display); font-weight: 400; font-size: var(--disp-hero); line-height: 0.94; letter-spacing: -0.02em; color: #fff; margin: 0; text-wrap: balance; }
.pg-find__h i { font-style: italic; color: var(--teal-pale); }
.pg-find__p { margin: 26px 0 0; font-family: var(--font-body); font-weight: 300; font-size: clamp(17px,1.4vw,20px); line-height: 1.6; color: rgba(249,245,233,0.9); max-width: 46ch; }
.pg-find__actions { margin-top: 38px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pg-find__round { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5); color: #fff; display: flex; align-items: center; justify-content: center; transition: background 240ms var(--ease-swell), transform 240ms var(--ease-swell); }
.pg-find__round:hover { background: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); transform: rotate(-8deg); }
.pg-find__round svg { width: 24px; height: 24px; }
@media (max-width: 940px) {
.pg-find__inner { grid-template-columns: 1fr; min-height: 0; gap: 40px; }
.pg-find__map { max-width: 540px; }
}
/* reassurance band */
.pg-assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,44px); margin-top: clamp(8px,1vw,8px); }
.pg-assure__item { display: flex; flex-direction: column; gap: 8px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.16); }
.pg-assure__ico { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(238,106,71,0.13); color: var(--coral); box-shadow: inset 0 0 0 1px rgba(238,106,71,0.42); }
.pg-assure__t { font-family: var(--font-display); font-size: var(--disp-small); color: #fff; line-height: 1.05; margin-top: 6px; }
.pg-assure__d { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: rgba(249,245,233,0.7); }
@media (max-width: 820px) { .pg-assure { grid-template-columns: 1fr; } }
/* ============================================================
JOURNAL — blog overview (dark editorial, matches siblings)
============================================================ */
.jr-feat-head { margin-bottom: clamp(26px, 3vw, 40px); }
.jr-feat { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 3.5vw, 56px); align-items: center; text-decoration: none; }
.jr-feat__media { position: relative; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; background: #0c2429; }
.jr-feat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-swell); }
.jr-feat:hover .jr-feat__media img { transform: scale(1.04); }
.jr-feat__cat, .jr-card__cat {
position: absolute; left: 16px; top: 14px;
font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #fff;
background: rgba(8,28,33,0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
padding: 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}
.jr-feat__meta, .jr-card__meta { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-pale); }
.jr-feat__t { font-family: var(--font-display); font-weight: 400; font-size: var(--disp-head); line-height: 1.0; color: #fff; margin: 16px 0 0; }
.jr-feat__t i { font-style: italic; color: var(--teal-pale); }
.jr-feat__ex { font-family: var(--font-body); font-weight: 300; font-size: 18px; line-height: 1.6; color: rgba(249,245,233,0.78); margin: 18px 0 0; max-width: 52ch; }
.jr-feat__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; }
.jr-feat__more svg { transition: transform 240ms var(--ease-swell); }
.jr-feat:hover .jr-feat__more svg { transform: translateX(4px); }
@media (max-width: 860px) { .jr-feat { grid-template-columns: 1fr; } }
.jr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 28px); margin-top: clamp(36px, 4vw, 56px); }
.jr-card { display: flex; flex-direction: column; text-decoration: none; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; overflow: hidden; transition: transform 320ms var(--ease-swell), border-color 320ms var(--ease-swell), box-shadow 320ms var(--ease-swell); }
.jr-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.2); box-shadow: 0 22px 56px rgba(0,0,0,0.4); }
.jr-card__media { position: relative; aspect-ratio: 16/10; background: #0c2429; overflow: hidden; }
.jr-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-swell); }
.jr-card:hover .jr-card__media img { transform: scale(1.05); }
.jr-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 1.6vw, 26px); }
.jr-card__meta { margin-bottom: 12px; }
.jr-card__t { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.08; color: #fff; margin: 0; }
.jr-card__ex { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: rgba(249,245,233,0.7); margin: 12px 0 0; }
.jr-card__more { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-pale); }
.jr-card:hover .jr-card__more { color: #fff; }
@media (max-width: 960px) { .jr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .jr-grid { grid-template-columns: 1fr; } }
/* ============================================================
BLOG DETAIL — article (light reading surface, 2 designs)
============================================================ */
.art-main { background: var(--cream); color: var(--ink); }
.art-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 250; background: rgba(13,28,32,0.08); }
.art-prog span { display: block; height: 100%; background: var(--coral); transform-origin: left; transform: scaleX(0); }
/* whole-page variant (interior pages + home): transparent track so the coral
fill reads cleanly over the nav whether it's transparent or solid. */
.art-prog--page { background: transparent; height: 3px; }
.art-kicker { font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--teal-deep); display: inline-flex; align-items: center; gap: 12px; }
.art-kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.art-title { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.art-title i { font-style: italic; color: var(--teal-deep); }
.art-dek { font-family: var(--font-body); font-weight: 300; color: var(--ink-soft); }
.art-back { display: flex; width: fit-content; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 22px; transition: color 200ms var(--ease-swell); }
.art-back:hover { color: var(--teal-deep); }
.art-byline { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.art-ava { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--teal-deep); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; }
.art-byline__by { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--ink); }
.art-byline__role { color: var(--ink-soft); font-weight: 400; }
.art-byline__meta { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-soft); margin-top: 3px; }
.art-byline--light .art-byline__by { color: #fff; }
.art-byline--light .art-byline__role, .art-byline--light .art-byline__meta { color: rgba(255,255,255,0.72); }
.art-byline--light .art-ava { background: rgba(255,255,255,0.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.art-lead { font-family: var(--font-body); font-weight: 400; font-size: 22px; line-height: 1.6; color: var(--ink); margin: 0 0 22px; }
.art-p { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 20px; text-wrap: pretty; }
.art-pull { margin: clamp(34px, 5vw, 56px) 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--coral); font-family: var(--font-display); font-style: italic; font-size: var(--disp-small); line-height: 1.3; color: var(--ink); }
.art-myth { padding-top: clamp(34px, 4vw, 52px); scroll-margin-top: 92px; }
.art-myth__head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.art-myth__n { font-family: var(--font-display); font-style: italic; font-size: calc(clamp(40px, 5vw, 60px) * var(--m-num, 1)); line-height: 0.8; color: var(--teal-300); flex: none; }
.art-myth__n--final { font-style: normal; color: var(--coral); display: inline-flex; align-items: center; }
.art-myth__tag { display: block; font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 6px; }
.art-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--disp-sub); line-height: 1.08; color: var(--ink); margin: 0; }
.art-figure { margin: 24px 0 4px; border-radius: 14px; overflow: hidden; }
/* Design A — centered column */
.art--col .art-top { padding: clamp(96px, 12vh, 140px) var(--gutter) clamp(28px, 3vw, 40px); }
.art--col .art-top__inner { max-width: 760px; margin: 0 auto; }
.art--col .art-title { font-size: var(--disp-head); line-height: 0.98; margin: 18px 0 0; }
.art--col .art-dek { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; margin: 22px 0 0; max-width: 46ch; }
.art-hero-img { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.art-hero-img img { width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: 18px; display: block; }
.art-wrap { padding: clamp(40px, 5vw, 68px) var(--gutter) clamp(20px, 4vw, 40px); }
.art-col { max-width: 880px; margin: 0 auto; }
/* Hybrid reads under a full-bleed hero — give it a wider measure so the
column doesn't look stranded beneath the photo. */
.art--hybrid .art-wrap { padding-top: clamp(48px, 5vw, 76px); }
.art--hybrid .art-col { max-width: 1180px; }
.art-toc-inline { margin-bottom: clamp(32px, 4vw, 48px); padding: 22px 24px; background: var(--paper-2); border-radius: 14px; }
.art-toc-inline__lbl { font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }
.art-toc-inline ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.art-toc-inline a { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; font-family: var(--font-body); font-size: 15px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); transition: color 200ms var(--ease-swell); }
.art-toc-inline a:hover { color: var(--teal-deep); }
.art-toc-inline b { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--teal-300); width: 22px; flex: none; }
@media (max-width: 560px) { .art-toc-inline ol { grid-template-columns: 1fr; } }
/* Design B — guide with sticky sidebar */
.art-hero-b { position: relative; min-height: min(64vh, 560px); display: flex; overflow: hidden; background: var(--night); isolation: isolate; }
.art-hero-b__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); animation: pg-hero-drift 16s var(--ease-swell) forwards; }
.art-hero-b__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,29,40,0.5) 0%, rgba(6,29,40,0.15) 40%, rgba(6,29,40,0.85) 100%); }
.art-hero-b__inner { position: relative; z-index: 2; align-self: flex-end; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(110px, 16vh, 150px) var(--gutter) clamp(36px, 5vw, 56px); }
.art-hero-b .art-title { color: #fff; font-size: var(--disp-head); line-height: 0.98; margin: 16px 0 0; max-width: 18ch; }
.art-hero-b .art-title i { color: var(--teal-pale); }
.art-kicker--light { color: var(--teal-pale); }
.art-dek--light { color: rgba(249,245,233,0.86); }
.art-back--light { color: rgba(255,255,255,0.8); }
.art-back--light:hover { color: #fff; }
.art-hero-b .art-dek { font-size: clamp(17px, 1.6vw, 20px); margin: 20px 0 0; max-width: 50ch; }
.art-guide-grid { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 5vw, 72px) var(--gutter); display: grid; grid-template-columns: 248px 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
.art-rail__sticky { position: sticky; top: 92px; }
.art-rail__lbl { font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }
.art-toc { display: flex; flex-direction: column; }
.art-toc a { display: flex; gap: 11px; align-items: baseline; padding: 9px 0 9px 14px; margin-left: -2px; font-family: var(--font-body); font-size: 15px; line-height: 1.3; color: var(--ink-soft); text-decoration: none; border-left: 2px solid transparent; transition: color 200ms var(--ease-swell), border-color 200ms var(--ease-swell); }
.art-toc a:hover { color: var(--ink); }
.art-toc a.is-active { color: var(--teal-deep); border-left-color: var(--coral); }
.art-toc a.is-sub { padding-left: 26px; font-size: 13px; color: var(--ink-soft); }
.art-toc a.is-sub.is-active { color: var(--teal-deep); }
.art-toc__t { flex: 1; }
.art-rail__scroll { max-height: calc(100vh - 230px); overflow-y: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.art-rail__scroll::-webkit-scrollbar { width: 6px; }
.art-rail__scroll::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 6px; }
.art-rail__prog { height: 3px; border-radius: 999px; background: var(--hairline); margin-top: 18px; overflow: hidden; }
.art-rail__prog span { display: block; height: 100%; background: var(--coral); transform-origin: left; }
.art-guide__body { max-width: 680px; }
.art--guide .art-myth:first-of-type { padding-top: 0; }
@media (max-width: 900px) { .art-guide-grid { grid-template-columns: 1fr; } .art-rail { display: none; } }
/* related reading */
.art-related { background: var(--paper-2); padding: clamp(56px, 7vw, 96px) 0; }
.art-related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 3vw, 40px); }
.art-related__all { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-deep); text-decoration: none; white-space: nowrap; }
.art-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 28px); }
.art-rel { display: flex; flex-direction: column; text-decoration: none; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 320ms var(--ease-swell), box-shadow 320ms var(--ease-swell); }
.art-rel:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.art-rel__media { aspect-ratio: 16/10; overflow: hidden; }
.art-rel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-swell); }
.art-rel:hover .art-rel__media img { transform: scale(1.05); }
.art-rel__body { padding: 20px 22px 24px; }
.art-rel__cat { font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-deep); }
.art-rel__t { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--ink); margin: 10px 0 0; }
@media (max-width: 760px) { .art-related__grid { grid-template-columns: 1fr; } .art-related__head { flex-direction: column; align-items: flex-start; gap: 14px; } }
/* ---- inline contents (Column design) ---- */
.wp-toc { margin: 0 0 clamp(32px, 4vw, 48px); padding: 24px 26px; background: var(--paper-2); border-radius: 14px; }
.wp-toc__lbl { font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }
.wp-toc ol { list-style: none; margin: 12px 0 0; padding: 0; columns: 2; column-gap: 36px; counter-reset: toc; }
.wp-toc li { break-inside: avoid; }
.wp-toc li.is-sub { padding-left: 16px; }
.wp-toc a { display: block; padding: 8px 0; font-family: var(--font-body); font-size: 15px; line-height: 1.35; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); transition: color 200ms var(--ease-swell); }
.wp-toc li.is-sub a { font-size: 13px; color: var(--ink-soft); }
.wp-toc a:hover { color: var(--teal-deep); }
@media (max-width: 620px) { .wp-toc ol { columns: 1; } }
/* ============================================================
WORDPRESS POST BODY — generic styling for pasted WP HTML
============================================================ */
.wp { font-family: var(--font-body); color: var(--ink-soft); }
.wp > *:first-child { margin-top: 0; }
.wp p { font-size: 18px; line-height: 1.72; margin: 0 0 20px; color: var(--ink-soft); text-wrap: pretty; }
.wp h2 {
font-family: var(--font-display); font-weight: 400; color: var(--ink);
font-size: var(--disp-sub); line-height: 1.06; letter-spacing: -0.01em;
margin: clamp(44px, 5.5vw, 68px) 0 18px; padding-top: clamp(26px, 3vw, 36px);
border-top: 1px solid var(--hairline); scroll-margin-top: 92px;
}
.wp h3 {
font-family: var(--font-display); font-weight: 400; color: var(--ink);
font-size: var(--disp-small); line-height: 1.14;
margin: 36px 0 14px; scroll-margin-top: 92px; display: flex; align-items: baseline; gap: 12px;
}
.wp h3::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--coral); transform: translateY(-6px); }
.wp h4 { font-family: var(--font-display); font-weight: 400; color: var(--ink); font-size: 20px; margin: 28px 0 10px; }
.wp strong { color: var(--ink); font-weight: 600; }
.wp em { font-style: italic; }
.wp a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 1.5px; text-decoration-thickness: 1px; transition: color 200ms var(--ease-swell); }
.wp a:hover { color: var(--coral-deep); }
/* Kill the "double underline" on journal/blog posts. Every body link is also
tagged `.swell-link` by the swell_decorate_links() filter, whose reversed-mode
pseudo-element underline (coral `::after` bar + faint `::before` hairline)
would otherwise stack a SECOND, orange line under the native `.wp a`
underline. Inside `.wp`, drop the `.swell-link` pseudo-underlines so links
keep just the single clean native underline (teal at rest, coral on hover). */
.wp a.swell-link::before,
.wp a.swell-link::after { content: none; display: none; }
/* Option 2 — reversed: no underline at rest, underline wipes in from the
left on hover (and color shifts to coral). Matches the brand link spec. */
.art-main[data-links="hover"] .wp a {
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
padding-bottom: 1.5px;
transition: background-size 220ms var(--ease-swell), color 200ms var(--ease-swell);
}
.art-main[data-links="hover"] .wp a:hover { color: var(--coral-deep); background-size: 100% 1px; }
.art-main[data-links="hover"] .wp a:has(> img) { background-image: none; padding-bottom: 0; }
/* Reversed (matches the main-site link spec): coral underline + teal text sit
at rest; hovering relaxes the underline back to a faint hairline. */
.art-main[data-links="reversed"] .wp a {
text-decoration: underline;
text-decoration-color: var(--coral-deep);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
color: var(--teal-deep);
transition: text-decoration-color 220ms var(--ease-swell), color 200ms var(--ease-swell);
}
.art-main[data-links="reversed"] .wp a:hover { text-decoration-color: color-mix(in oklab, currentColor 24%, transparent); }
.art-main[data-links="reversed"] .wp a:has(> img) { text-decoration: none; }
.art-main[data-surface="dark"][data-links="reversed"] .wp a { color: var(--teal-pale); }
.wp ul, .wp ol { margin: 0 0 22px; padding: 0; }
.wp ul { list-style: none; }
.wp ul li { position: relative; padding-left: 26px; margin: 0 0 11px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.wp ul li::before { content: ""; position: absolute; left: 3px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.wp ol { list-style: decimal; padding-left: 22px; }
.wp ol li { margin: 0 0 11px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); padding-left: 6px; }
.wp blockquote {
margin: clamp(32px, 4vw, 48px) 0; padding: 6px 0 6px 28px; border-left: 3px solid var(--coral);
font-family: var(--font-display); font-style: italic; font-size: var(--disp-small);
line-height: 1.32; color: var(--ink);
}
/* Content images honour their own dimensions and the classic-editor alignment
classes (alignleft / alignright / aligncenter, [caption]) instead of being
forced to full column width. The old `.wp img { width:100% }` rule upscaled
small inline icons (e.g. 25px check/cross marks) to giant full-width images
and destroyed every text-wrap float in legacy posts. */
.wp img { max-width: 100%; height: auto; }
.wp figure { margin: 28px 0; }
.wp a:has(> img) { text-decoration: none; }
/* Solo (unaligned) images and image links: their own line, centred, soft
corners. :only-child counts elements only, so paragraphs that mix an inline
icon with label text are excluded via :not([class*="align"]). */
.wp p > img:only-child:not([class*="align"]),
.wp p > a:only-child > img { display: block; margin: 22px auto; border-radius: 14px; }
.wp p > a:only-child:has(> img) { display: block; }
/* WordPress alignment classes (classic-editor floats). */
.wp .alignnone { display: block; margin: 22px 0; }
.wp .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp img.alignright, .wp .wp-caption.alignright { float: right; margin: 4px 0 14px 22px; }
.wp img.alignleft, .wp .wp-caption.alignleft { float: left; margin: 4px 22px 14px 0; }
/* Classic [caption] shortcode blocks. */
.wp .wp-caption { max-width: 100%; }
.wp .wp-caption img { display: block; border-radius: 14px; }
.wp .wp-caption-text { margin-top: 8px; font-size: 15px; line-height: 1.5; font-style: italic; color: var(--ink-soft); }
/* New sections clear any floated image sitting above them. */
.wp h2, .wp h3 { clear: both; }
.wp iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 14px; margin: 28px 0; display: block; }
.wp hr { border: 0; border-top: 1px solid var(--hairline); margin: 36px 0; }
/* ============================================================
DARK READING SURFACE — deep ocean-night variant.
Applies to whichever article layout is active. The Guide hero
already reads dark; this restyles the body, contents and the
related rail so the whole read sits on var(--night-2).
============================================================ */
.art-main[data-surface="dark"] { background: var(--night-2); color: rgba(244,238,227,0.9); }
/* body type */
.art-main[data-surface="dark"] .wp { color: rgba(228,234,233,0.74); }
.art-main[data-surface="dark"] .wp p,
.art-main[data-surface="dark"] .wp ul li,
.art-main[data-surface="dark"] .wp ol li { color: rgba(228,234,233,0.74); }
.art-main[data-surface="dark"] .wp h2,
.art-main[data-surface="dark"] .wp h3,
.art-main[data-surface="dark"] .wp h4 { color: #fff; }
.art-main[data-surface="dark"] .wp h2 { border-top-color: rgba(255,255,255,0.14); }
.art-main[data-surface="dark"] .wp strong { color: #fff; }
.art-main[data-surface="dark"] .wp a { color: var(--teal-pale); }
.art-main[data-surface="dark"] .wp a:hover { color: var(--coral); }
.art-main[data-surface="dark"] .wp blockquote { color: #fff; }
.art-main[data-surface="dark"] .wp ul li::before { background: var(--teal-300); }
.art-main[data-surface="dark"] .wp hr { border-top-color: rgba(255,255,255,0.14); }
/* inline contents (Column / Hybrid) */
.art-main[data-surface="dark"] .wp-toc { background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); }
.art-main[data-surface="dark"] .wp-toc__lbl { color: rgba(255,255,255,0.55); }
.art-main[data-surface="dark"] .wp-toc a { color: rgba(232,238,238,0.86); border-bottom-color: rgba(255,255,255,0.1); }
.art-main[data-surface="dark"] .wp-toc li.is-sub a { color: rgba(232,238,238,0.6); }
.art-main[data-surface="dark"] .wp-toc a:hover { color: var(--teal-pale); }
/* Column-layout light header, now on dark */
.art-main[data-surface="dark"] .art-title { color: #fff; }
.art-main[data-surface="dark"] .art-title i { color: var(--teal-pale); }
.art-main[data-surface="dark"] .art--col .art-dek { color: rgba(228,234,233,0.72); }
.art-main[data-surface="dark"] .art--col .art-kicker { color: var(--teal-pale); }
.art-main[data-surface="dark"] .art--col .art-back { color: rgba(255,255,255,0.7); }
.art-main[data-surface="dark"] .art--col .art-back:hover { color: #fff; }
.art-main[data-surface="dark"] .art--col .art-byline__by { color: #fff; }
.art-main[data-surface="dark"] .art--col .art-byline__meta,
.art-main[data-surface="dark"] .art--col .art-byline__role { color: rgba(255,255,255,0.62); }
.art-main[data-surface="dark"] .art--col .art-ava { background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); }
/* guide sidebar rail on dark */
.art-main[data-surface="dark"] .art-rail__lbl { color: rgba(255,255,255,0.5); }
.art-main[data-surface="dark"] .art-toc a { color: rgba(228,234,233,0.62); }
.art-main[data-surface="dark"] .art-toc a:hover { color: #fff; }
.art-main[data-surface="dark"] .art-toc a.is-active { color: var(--teal-pale); }
/* related rail on dark */
.art-main[data-surface="dark"] .art-related { background: rgba(0,0,0,0.22); }
.art-main[data-surface="dark"] .art-related .ed-kicker { color: var(--teal-pale); }
.art-main[data-surface="dark"] .art-related__all { color: var(--teal-pale); }
.art-main[data-surface="dark"] .art-rel { background: var(--night-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.art-main[data-surface="dark"] .art-rel:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 18px 44px rgba(0,0,0,0.45); }
.art-main[data-surface="dark"] .art-rel__t { color: #fff; }
.art-main[data-surface="dark"] .art-rel__cat { color: var(--teal-pale); }
/* reading-progress track is darker on dark */
.art-main[data-surface="dark"] .art-prog { background: rgba(255,255,255,0.1); }
/* Match original swell-prose body size (19px) — .wp defaults to 17.5px */
.art-main .wp p,
.art-main .wp ul li,
.art-main .wp ol li { font-size: 19px; }
/* ============================================================
ARTICLE COLUMN TOP BAR — surface toggle sits here (top-right)
============================================================ */
.art-col__bar {
position: sticky; top: 130px; z-index: 100;
display: flex; justify-content: flex-end;
padding: 10px 0;
pointer-events: none; /* let content scroll freely behind it */
margin-bottom: clamp(14px, 2vw, 22px);
}
.art-surface-btn {
pointer-events: all;
flex: none; box-sizing: border-box;
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0; overflow: hidden;
border-radius: 50%;
background: color-mix(in oklab, var(--paper-2, #f0ebe0) 88%, transparent);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
border: 1px solid var(--hairline);
font-size: 0; line-height: 0;
color: var(--ink-soft); cursor: pointer;
opacity: 0.85;
transition: background 200ms var(--ease-swell), color 200ms var(--ease-swell), opacity 200ms var(--ease-swell);
}
.art-surface-btn:hover { background: var(--sand-200, #efe5d1); color: var(--ink); opacity: 1; }
.art-surface-btn:focus-visible { opacity: 1; outline: 2px solid var(--teal-deep, #0f9a9a); outline-offset: 2px; }
.art-surface-btn svg { display: block; width: 15px; height: 15px; }
/* Icon-only: show the sun on a dark surface (click → go light) */
.art-surface-btn__light { display: none; align-items: center; justify-content: center; line-height: 0; }
.art-surface-btn__dark { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
/* On light surface: swap to the moon icon (click → go dark) */
.art-main[data-surface="light"] .art-surface-btn__light { display: none; }
.art-main[data-surface="light"] .art-surface-btn__dark { display: inline-flex; }
/* On dark surface: show the sun icon (click → go light) */
.art-main[data-surface="dark"] .art-surface-btn__dark { display: none; }
.art-main[data-surface="dark"] .art-surface-btn__light { display: inline-flex; }
/* Dark surface button colours */
.art-main[data-surface="dark"] .art-surface-btn {
background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14);
color: rgba(255,255,255,0.6);
}
.art-main[data-surface="dark"] .art-surface-btn:hover {
background: rgba(255,255,255,0.14); color: #fff;
}
/* ============================================================
INLINE TOC — .swell-toc inside .wp-toc
Manual counter so H3 sub-items don't break the sequence.
Higher specificity (.wp-toc ol.swell-toc) beats .wp-toc ol { columns:2 }.
============================================================ */
.wp-toc ol.swell-toc {
list-style: none;
counter-reset: swell-toc swell-sub;
margin: 14px 0 0; padding: 0;
columns: 1;
}
.wp-toc ol.swell-toc > li:not(.is-sub) { counter-increment: swell-toc; counter-reset: swell-sub; }
.wp-toc ol.swell-toc li.is-sub { counter-increment: swell-sub; }
.wp-toc ol.swell-toc a {
display: block; /* override .wp-toc a { display:flex } */
padding: 9px 0;
font-family: var(--font-body); font-size: 15px; line-height: 1.4;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--ink); text-decoration: none;
border-bottom: 1px solid var(--hairline);
transition: color 200ms var(--ease-swell);
}
.wp-toc ol.swell-toc > li:not(.is-sub) > a::before {
content: counter(swell-toc) ". ";
color: var(--teal-deep); font-weight: 500;
}
.wp-toc ol.swell-toc li.is-sub { padding-left: 22px; }
.wp-toc ol.swell-toc li.is-sub > a::before {
content: counter(swell-toc) "." counter(swell-sub) ". ";
color: var(--teal-deep); font-weight: 500;
}
.wp-toc ol.swell-toc a:hover { color: var(--teal-deep); }
.wp-toc ol.swell-toc a.is-active { color: var(--teal-deep); font-weight: 500; }
/* Dark surface */
.art-main[data-surface="dark"] .wp-toc ol.swell-toc a { color: rgba(232,238,238,0.86); border-bottom-color: rgba(255,255,255,0.1); }
.art-main[data-surface="dark"] .wp-toc ol.swell-toc a:hover { color: #fff; }
.art-main[data-surface="dark"] .wp-toc ol.swell-toc a.is-active { color: var(--teal-pale); }
.art-main[data-surface="dark"] .wp-toc ol.swell-toc > li:not(.is-sub) > a::before { color: var(--teal-pale); }
.art-main[data-surface="dark"] .wp-toc ol.swell-toc li.is-sub > a::before { color: var(--teal-pale); }
/* Related journal at foot: always dark regardless of article surface */
.art-main .swell-related { background: var(--night-2); }
.art-main .swell-related .ed-h2 { color: #fff; }
.art-main .swell-related .ed-h2 i { color: var(--teal-pale); }
.art-main .swell-related .ed-kicker--icon .ed-klabel { color: var(--teal-pale); }
.art-main .swell-related .ed-kicker--icon .ed-kicon { background: rgba(238,106,71,0.15); }
.art-main .swell-related .ed-morelink { color: #fff; }
.art-main .swell-related .ed-morelink__label::after { background: #fff; }
/* ============================================================
CONTACT — "get a personal quote": human note + inline wizard
============================================================ */
.pg-getquote { display: grid; grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.pg-quote__aside { padding-top: 6px; }
.pg-quote__h { color: #fff; margin: 18px 0 0; }
.pg-quote__lead { margin-top: 20px; max-width: 42ch; }
/* host mini-card — portrait slot + signature */
.pg-host { display: grid; grid-template-columns: 92px 1fr; gap: 20px; align-items: center; margin-top: clamp(32px, 4vw, 44px); padding-top: clamp(28px, 3vw, 36px); border-top: 1px solid rgba(255,255,255,0.14); }
.pg-host__photo { width: 92px; height: 110px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md, 0 16px 40px rgba(0,0,0,0.35)); }
.pg-host__photo image-slot { width: 100%; height: 100%; display: block; }
.pg-host__by { display: flex; flex-direction: column; gap: 4px; }
.pg-host__name { font-family: var(--font-display); font-size: 26px; color: #fff; line-height: 1; }
.pg-host__role { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-pale); }
.pg-host__sig { font-family: var(--font-display); font-style: italic; font-size: 18px; color: rgba(249,245,233,0.82); margin-top: 6px; }
/* reply promise */
.pg-promise { display: flex; gap: 14px; align-items: flex-start; margin-top: 26px; padding: 18px 20px; border-radius: 14px; background: rgba(238,106,71,0.08); box-shadow: inset 0 0 0 1px rgba(238,106,71,0.28); }
.pg-promise svg { color: var(--coral); flex: none; margin-top: 2px; }
.pg-promise p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--cream); }
.pg-promise b { color: #fff; font-weight: 600; }
/* aggregate review badge */
.pg-trust { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.pg-trust__score { display: inline-flex; align-items: center; gap: 10px; }
.pg-trust__score .ed-rev__stars { color: var(--sun-400, #f4c14a); display: inline-flex; gap: 2px; }
.pg-trust__num { font-family: var(--font-display); font-size: 26px; color: #fff; line-height: 1; }
.pg-trust__num small { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.06em; color: rgba(249,245,233,0.6); }
.pg-trust__src { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.1em; color: var(--teal-pale); }
/* the white quote card (reuses .bk-* form styles) */
.pg-quote-card { background: #fff; border-radius: 22px; padding: clamp(28px, 3vw, 44px); box-shadow: 0 30px 80px rgba(6,29,40,0.42); }
.pg-quote-card .bk-head { padding-right: 0; }
.pg-quote-card .bk-step h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--disp-sub); line-height: 1.05; color: var(--ink); margin: 14px 0 0; }
.pg-quote-card .bk-step > p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 10px 0 0; }
.pg-quote-card__foot { display: flex; align-items: center; gap: 9px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--hairline); font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.pg-quote-card__foot svg { color: var(--teal-deep); flex: none; }
/* success state */
.pg-quote__done { text-align: center; padding: clamp(18px, 3vw, 38px) 8px; animation: bkFade 360ms var(--ease-swell); }
.pg-quote__donemark { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(15,154,154,0.12); color: var(--teal-deep); box-shadow: inset 0 0 0 1px rgba(15,154,154,0.4); }
.pg-quote__done h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--disp-sub); color: var(--ink); margin: 20px 0 0; }
.pg-quote__done > p { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 14px auto 0; max-width: 40ch; }
.pg-quote__done b { color: var(--ink); font-weight: 600; }
.pg-quote__spam { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 11px 16px; border-radius: 999px; background: rgba(13,28,32,0.05); font-size: 13px !important; color: var(--ink-soft); }
.pg-quote__spam svg { color: var(--teal-deep); flex: none; }
.pg-quote__done .bk-back { margin: 22px auto 0; }
@media (max-width: 940px) {
.pg-getquote { grid-template-columns: 1fr; gap: 40px; }
}
/* ---- one-column variant — intro → form → trust band, stacked ---- */
.pg-getquote--one { display: flex; flex-direction: column; align-items: stretch; gap: clamp(40px, 5vw, 60px); }
/* intro row — left-aligned, two columns: host panel left, copy right */
.pg-getquote--one .pg-quote__intro {
width: 100%; display: grid;
grid-template-columns: minmax(280px, 0.65fr) minmax(0, 1.35fr);
column-gap: clamp(32px, 5vw, 72px); text-align: left;
}
.pg-getquote--one .pg-quote__intro > .ed-kicker { grid-column: 2; }
.pg-getquote--one .pg-quote__h { grid-column: 2; margin-top: 18px; line-height: 1.06; text-wrap: balance; }
.pg-getquote--one .pg-quote__lead { grid-column: 2; max-width: 52ch; }
/* Clare — a tinted panel filling the left column */
.pg-getquote--one .pg-host {
grid-column: 1; grid-row: 1 / 4; align-self: stretch; justify-self: stretch;
display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px;
background: var(--night-2); border-radius: 22px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
padding: clamp(26px, 3vw, 40px);
border-top: 0; margin-top: 0; text-align: left;
}
.pg-getquote--one .pg-host__photo { width: 116px; height: 138px; }
.pg-getquote--one .pg-quote-card { width: 100%; }
@media (max-width: 880px) {
.pg-getquote--one .pg-quote__intro { grid-template-columns: 1fr; }
/* reset explicit grid-column: 2 so items actually stack in a single column */
.pg-getquote--one .pg-quote__intro > .ed-kicker,
.pg-getquote--one .pg-quote__h,
.pg-getquote--one .pg-quote__lead { grid-column: 1; }
.pg-getquote--one .pg-host {
grid-column: 1; grid-row: auto; order: -1;
justify-self: stretch; margin-top: 0; margin-bottom: 8px;
flex-direction: row; align-items: center; gap: 18px;
padding: clamp(20px, 4vw, 28px);
}
.pg-getquote--one .pg-host__photo { width: 76px; height: 92px; }
}
/* trust band — ruled three-up strip */
.pg-trustband {
width: 100%; display: grid; grid-template-columns: repeat(3, 1fr);
border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14);
padding: clamp(22px, 3vw, 32px) 0;
}
.pg-trustband__cell { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; padding: 0 clamp(14px, 2vw, 28px); }
.pg-trustband__cell + .pg-trustband__cell { border-left: 1px solid rgba(255,255,255,0.14); }
.pg-trustband__big { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: calc(clamp(26px, 2.6vw, 34px) * var(--m-num, 1)); line-height: 1; color: #fff; }
.pg-trustband__big small { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.06em; color: rgba(249,245,233,0.6); }
.pg-trustband__big .ed-rev__stars { color: var(--sun-400, #f4c14a); display: inline-flex; gap: 2px; align-self: center; }
.pg-trustband__cap { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-pale); }
@media (max-width: 720px) {
.pg-trustband { grid-template-columns: 1fr; gap: 18px; }
.pg-trustband__cell + .pg-trustband__cell { border-left: 0; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 18px; }
}
/* ---- inline quote form — cleaner, friendlier controls ---------- */
/* named 3-step progress tracker */
.qf-top { display: flex; flex-direction: column; gap: 18px; }
.qf-eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-deep); }
.qf-prog { display: flex; align-items: center; gap: 10px; }
.qf-prog__step { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.qf-prog__line { flex: 1 1 auto; height: 1.5px; border-radius: 2px; background: var(--hairline); transition: background 320ms var(--ease-swell); }
.qf-prog__line.is-done { background: var(--teal); }
.qf-prog__dot { width: 26px; height: 26px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-soft); background: rgba(13,28,32,0.06); box-shadow: inset 0 0 0 1px var(--hairline); transition: all 240ms var(--ease-swell); }
.qf-prog__lbl { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-soft); transition: color 240ms var(--ease-swell); }
.qf-prog__step.is-on .qf-prog__dot { background: var(--teal); color: #fff; box-shadow: 0 0 0 4px rgba(15,154,154,0.14); }
.qf-prog__step.is-on .qf-prog__lbl { color: var(--ink); font-weight: 600; }
.qf-prog__step.is-done .qf-prog__dot { background: var(--teal-deep); color: #fff; box-shadow: none; }
.qf-prog__step.is-done .qf-prog__lbl { color: var(--teal-deep); }
@media (max-width: 420px) { .qf-prog__lbl { display: none; } .qf-prog { gap: 8px; } }
.pg-quote-card .qf-form { margin-top: 24px; }
/* teal chips (flexibility) */
.qf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qf-chip { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--hairline); background: #fff; font-family: var(--font-body); font-size: 15px; color: var(--ink); cursor: pointer; transition: border-color 180ms var(--ease-swell), background 180ms var(--ease-swell), color 180ms var(--ease-swell); }
.qf-chip:hover { border-color: var(--teal); }
.qf-chip.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }
/* segmented control (group size) */
.qf-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: rgba(13,28,32,0.05); }
.qf-seg__btn { padding: 12px 8px; border: 0; border-radius: 9px; background: transparent; font-family: var(--font-body); font-size: 15px; color: var(--ink-soft); cursor: pointer; transition: background 160ms var(--ease-swell), color 160ms var(--ease-swell), box-shadow 160ms var(--ease-swell); }
.qf-seg__btn:hover { color: var(--ink); }
.qf-seg__btn.is-active { background: #fff; color: var(--teal-deep); font-weight: 600; box-shadow: 0 1px 3px rgba(13,28,32,0.14); }
/* icon-led option rows (activities) */
.qf-opts { display: flex; flex-direction: column; gap: 8px; }
.qf-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hairline); background: #fff; cursor: pointer; transition: border-color 160ms var(--ease-swell), background 160ms var(--ease-swell), box-shadow 160ms var(--ease-swell); }
.qf-opt:hover { border-color: var(--teal); background: rgba(15,154,154,0.03); }
.qf-opt__ico { width: 38px; height: 38px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(15,154,154,0.09); color: var(--teal-deep); transition: background 160ms var(--ease-swell), color 160ms var(--ease-swell); }
.qf-opt__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qf-opt__txt b { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink); }
.qf-opt__txt small { font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); }
.qf-opt__check { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: #fff; transition: background 160ms var(--ease-swell), border-color 160ms var(--ease-swell); }
.qf-opt__check svg { opacity: 0; transition: opacity 160ms var(--ease-swell); }
.qf-opt.is-active { border-color: var(--teal); background: rgba(15,154,154,0.06); box-shadow: inset 0 0 0 1px var(--teal); }
.qf-opt.is-active .qf-opt__ico { background: var(--teal); color: #fff; }
.qf-opt.is-active .qf-opt__check { background: var(--teal); border-color: var(--teal); }
.qf-opt.is-active .qf-opt__check svg { opacity: 1; }
/* field niceties */
.qf-block { margin-top: 24px; display: flex; flex-direction: column; gap: 11px; }
.qf-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.qf-optional { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-deep); background: rgba(15,154,154,0.1); padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
/* ============================================================
BODY WEIGHT — match the home page's Jost prose (weight 350)
across every interior page. Leads/paragraphs reuse .ed-lead /
.ed-para (already 350); this aligns the remaining reading copy
(card descriptions, list detail, excerpts) and removes the
stray 300-weight outliers. Eyebrows/labels keep their weight.
============================================================ */
.pg-level__d,
.pg-day__body p,
.pg-inc p,
.pg-trip__d,
.pg-pkg__desc,
.pg-pkg__list li,
.pg-pool__lead,
.pg-air__use,
.pg-assure__d,
.pg-promise p,
.pg-cmp tbody td.lbl,
.pg-feature__list .lbl,
.pg-poolchips--inline .ch,
.pg-poolchips--ticks .ch,
.pg-poolchips--ruled .ch,
.pg-find__p,
.jr-feat__ex,
.jr-card__ex,
.art-dek {
font-weight: 400;
}
/* mobile: bump Jost body/reading copy +1.5px for small screens */
@media (max-width: 600px) {
.pg-feature__list .lbl,
.pg-level__d,
.pg-day__body p,
.pg-inc h3, .pg-inc p,
.pg-trip__d,
.pg-poolchips--inline .ch,
.pg-poolchips--ticks .ch,
.pg-poolchips--ruled .ch,
.pg-air__use,
.pg-amen li,
.pg-pkg__desc,
.pg-pkg__list li,
.pg-cmp tbody td.lbl,
.pg-assure__d,
.jr-card__ex,
.pg-promise p { font-size: 18px; }
.art-lead { font-size: 22px; }
.art-p { font-size: 19px; }
}
/* FAQ page — questions grouped into labelled categories (template-faq.php). */
.pg-faqgroups { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 68px); }
.pg-faqgroup__t {
display: flex; align-items: baseline; gap: 14px;
margin: 0; padding-bottom: 14px;
font-family: var(--font-display); font-weight: 400; font-size: var(--disp-small);
line-height: 1; color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.pg-faqgroup__t span {
font-family: var(--font-body); font-style: italic; font-size: 15px;
letter-spacing: 0.04em; color: var(--coral); flex: none;
}
.ed-faq__cta { margin-top: 28px; }
/* Getting Here — illustrated Cabarete coastline map (template-parts/getting-here-map.php). */
.swell-map { margin-top: clamp(28px, 4vw, 48px); }
.swell-map svg {
display: block; width: 100%; height: auto;
border-radius: 16px;
box-shadow: 0 2px 8px rgba(10, 31, 36, 0.08);
}
/* Swell marker ripple — animates the two .swell-ripple circles inside the SVG. */
@keyframes swellRipple { 0% { r: 9; opacity: 0.7; } 100% { r: 28; opacity: 0; } }
.swell-map .swell-ripple { animation: swellRipple 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.swell-map .swell-ripple-2 { animation-delay: 1.4s; }
@media (prefers-reduced-motion: reduce) { .swell-map .swell-ripple { animation: none; opacity: 0; } }
/* =========================================================
PRICING REDESIGN — Learn-to-Surf single offer
(shared .pg-season / .pg-pkg__amount etc. already defined above)
========================================================= */
/* Hero "from" price chip */
.pg-hero__price { display: inline-flex; flex-direction: column; gap: 2px; margin-top: clamp(18px, 2vw, 26px); padding: 12px 18px; border-radius: 14px; background: rgba(8,28,33,0.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); width: fit-content; }
.pg-hero__pricefig { font-family: var(--font-display); font-weight: 400; font-size: calc(clamp(26px, 3vw, 38px) * var(--m-num, 1)); line-height: 1; color: #fff; }
.pg-hero__pricefig sup { font-size: 0.5em; top: -0.7em; margin: 0 1px 0 4px; color: rgba(255,255,255,0.75); }
.pg-hero__pricemeta { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em; color: rgba(249,245,233,0.7); }
/* package heading row — title left, season toggle aligned right */
.pg-package-head { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap; }
.pg-package-head .pg-head { margin: 0; max-width: none; }
.pg-package-head .pg-season { margin-top: 0; align-items: flex-end; flex: 0 0 auto; }
.pg-package-head--solo { justify-content: flex-start; } /* No season toggle: heading sits left on its own. */
.pg-season__note.pg-season__note--below { width: fit-content; margin: 16px 0 0 auto; max-width: 56ch; text-align: left; text-wrap: balance; }
@media (max-width: 760px) {
.pg-package-head { align-items: flex-start; }
.pg-package-head .pg-season { align-items: flex-start; }
.pg-season__note.pg-season__note--below { margin-left: 0; max-width: none; width: auto; }
}
/* THE OFFER — single feature card (photo left, price panel right) */
.pg-offer { display: grid; grid-template-columns: 1.02fr 0.98fr; margin-top: clamp(26px, 3vw, 40px); background: rgba(255,255,255,0.04); border: 1px solid rgba(238,106,71,0.5); box-shadow: 0 0 0 1px rgba(238,106,71,0.22), 0 30px 72px rgba(0,0,0,0.44); border-radius: 22px; overflow: hidden; }
.pg-offer__fig { position: relative; min-height: 460px; background: #0c2429; overflow: hidden; }
.pg-offer__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-swell); }
.pg-offer:hover .pg-offer__fig img { transform: scale(1.04); }
/* keep the crossfade: the .pg-offer__fig img rule above would otherwise win on `transition` */
.pg-offer__fig .pg-slider__img { transition: opacity 900ms var(--ease-swell), transform 1400ms var(--ease-swell); }
.pg-offer__fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,22,28,0.04) 0%, rgba(8,22,28,0.5) 100%); }
.pg-offer__ribbon { position: absolute; top: 22px; left: 26px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: rgba(8,28,33,0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.pg-offer__ribbon svg { color: var(--coral); }
.pg-offer__cap { position: absolute; left: clamp(18px, 2.2vw, 24px); bottom: clamp(18px, 2.2vw, 24px); z-index: 2; width: fit-content; max-width: min(80%, 360px); padding: 13px 17px 14px; border-radius: 16px; background: rgba(13, 53, 55, 0.46); -webkit-backdrop-filter: blur(14px) saturate(135%); backdrop-filter: blur(14px) saturate(135%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 14px 34px rgba(0,0,0,0.3); }
.pg-offer__cap-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; }
.pg-offer__cap-eyebrow svg { color: var(--coral); flex: none; }
.pg-offer__cap-text { margin: 9px 0 0; max-width: 32ch; font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: rgba(255,255,255,0.92); }
.pg-offer__panel { padding: clamp(28px, 3vw, 46px); display: flex; flex-direction: column; }
.pg-offer__name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--disp-title); line-height: 1; color: #fff; }
.pg-offer__desc { margin: 13px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: rgba(249,245,233,0.74); max-width: 42ch; }
/* price block — two occupancy figures side by side (single / double), icon labels */
.pg-price { margin-top: clamp(22px, 2.4vw, 30px); padding-top: clamp(20px, 2.2vw, 26px); border-top: 1px solid rgba(255,255,255,0.14); display: grid; grid-template-columns: 1fr 1fr; }
.pg-price__col { display: flex; flex-direction: column; gap: 12px; padding-inline: clamp(22px, 3vw, 44px); }
.pg-price__col:first-child { padding-left: 0; }
.pg-price__col:last-child { padding-right: 0; border-left: 1px solid rgba(255,255,255,0.08); }
.pg-price__id { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-pale); }
.pg-price__id svg { color: var(--teal-pale); flex: none; }
.pg-price__fig { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pg-price__from { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(249,245,233,0.55); }
.pg-price__amount { font-family: var(--font-display); font-weight: 400; font-size: calc(clamp(40px, 4.2vw, 56px) * var(--m-num, 1)); line-height: 0.82; color: #fff; }
.pg-price__amount sup { font-size: 0.36em; top: -1.2em; margin-right: 1px; color: rgba(249,245,233,0.7); }
.pg-price__unit { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.02em; color: var(--teal-pale); }
@media (max-width: 560px) {
.pg-price { grid-template-columns: 1fr; }
.pg-price__col { padding-inline: 0; }
.pg-price__col:last-child { padding-top: 22px; border-left: none; border-top: 1px solid rgba(255,255,255,0.12); }
}
.pg-offer__cta { margin-top: auto; padding-top: clamp(34px, 4vw, 52px); display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.pg-offer__cta .btn { width: auto; align-self: flex-start; }
.pg-offer__fine { display: inline-flex; align-items: flex-start; gap: 8px; justify-content: flex-start; text-align: left; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.02em; color: rgba(249,245,233,0.62); }
.pg-offer__fine svg { color: var(--teal-pale); flex: none; margin-top: 2px; }
.pg-offer__gap { flex: none; height: clamp(20px, 2.6vw, 36px); }
.pg-offer__fine--foot { align-self: stretch; margin-top: 2px; padding-top: clamp(15px, 1.8vw, 20px); border-top: 1px solid rgba(255,255,255,0.1); }
@media (max-width: 880px) { .pg-offer { grid-template-columns: 1fr; } .pg-offer__fig { min-height: 300px; } }
/* INLINE QUOTE REVEAL — the package CTA slides the enquiry form open in place.
Collapsed via grid-template-rows: 0fr → 1fr (animatable height) plus a soft
fade + lift; visibility flips so the form is out of the tab order when closed. */
.pg-quote-reveal { display: grid; grid-template-rows: 0fr; margin-top: 0; opacity: 0; visibility: hidden; transition: grid-template-rows 0.6s var(--ease-swell), margin-top 0.6s var(--ease-swell), opacity 0.45s ease, visibility 0s linear 0.6s; scroll-margin-top: clamp(80px, 12vh, 120px); }
.pg-quote-reveal__inner { overflow: hidden; min-height: 0; }
.pg-quote-reveal__card { position: relative; transform: translateY(16px); transition: transform 0.6s var(--ease-swell); }
.pg-quote-reveal.is-open { grid-template-rows: 1fr; margin-top: clamp(22px, 2.8vw, 40px); opacity: 1; visibility: visible; transition: grid-template-rows 0.6s var(--ease-swell), margin-top 0.6s var(--ease-swell), opacity 0.5s ease 0.08s, visibility 0s; }
.pg-quote-reveal.is-open .pg-quote-reveal__card { transform: none; }
.pg-quote-reveal__card .pg-quote-card__intro { margin: 10px 0 0; font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }
.pg-quote-reveal__close { position: absolute; top: 16px; right: 16px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(13,28,32,0.06); color: var(--ink); cursor: pointer; transition: background 0.2s ease, transform 0.25s var(--ease-swell); }
.pg-quote-reveal__close:hover { background: rgba(13,28,32,0.12); transform: rotate(90deg); }
.pg-quote-reveal__close:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.pg-quote-reveal { transition: opacity 0.2s ease, visibility 0s; }
.pg-quote-reveal__card { transform: none; transition: none; }
}
/* WHAT'S INCLUDED — grouped checklist */
.pg-incl { margin-top: clamp(34px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3vw, 52px); }
.pg-incl__group { display: flex; flex-direction: column; }
.pg-incl__gh { display: flex; align-items: center; gap: 11px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.16); font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-pale); }
.pg-incl__gh svg { color: var(--coral); flex: none; }
.pg-incl__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pg-incl__list li { display: grid; grid-template-columns: 20px 1fr; gap: 13px; align-items: start; font-family: var(--font-body); font-size: 16px; line-height: 1.48; color: var(--cream); }
.pg-incl__list svg { width: 18px; height: 18px; color: var(--coral); margin-top: 2px; flex: none; }
.pg-incl__list b { color: #fff; font-weight: 600; }
@media (max-width: 860px) { .pg-incl { grid-template-columns: 1fr; gap: 30px; } }
.pg-inline-cta { margin-top: clamp(34px, 4vw, 56px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 44px; }
.pg-inline-cta__line { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--disp-small); line-height: 1.3; color: #fff; max-width: 34ch; text-wrap: balance; }
/* HOW BOOKING WORKS — 3-up route */
.pg-route { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(20px, 3vw, 40px); }
.pg-route__step { position: relative; padding: 4px clamp(26px, 3.2vw, 50px); }
.pg-route__step:first-child { padding-left: 0; }
.pg-route__step:last-child { padding-right: 0; }
.pg-route__step + .pg-route__step::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: rgba(255,255,255,0.14); }
.pg-route__top { display: flex; align-items: center; gap: 14px; }
.pg-route__ico { width: 50px; height: 50px; border-radius: 14px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: rgba(238,106,71,0.12); box-shadow: inset 0 0 0 1px rgba(238,106,71,0.42); color: var(--coral); transition: transform 320ms var(--ease-swell), background 320ms var(--ease-swell); }
.pg-route__step:hover .pg-route__ico { transform: translateY(-3px); background: rgba(238,106,71,0.2); }
.pg-route__n { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-pale); }
.pg-route__t { margin: 24px 0 0; font-family: var(--font-display); font-weight: 400; font-size: var(--disp-small); line-height: 1.05; color: #fff; }
.pg-route__d { margin: 12px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: rgba(249,245,233,0.7); max-width: 34ch; }
@media (max-width: 820px) {
.pg-route { grid-template-columns: 1fr; }
.pg-route__step { padding: clamp(26px, 5vw, 34px) 0; }
.pg-route__step:first-child { padding-top: 0; }
.pg-route__step:last-child { padding-bottom: 0; }
.pg-route__step + .pg-route__step::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
.pg-route__t { margin-top: 18px; }
.pg-route__d { max-width: none; }
}
.pg-steps__cta { margin-top: clamp(30px, 3.4vw, 46px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.pg-steps__hint { margin: 0; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.02em; color: rgba(249,245,233,0.6); }
/* ---------------------------------------------------------------
Pricing — "Learn to Wingfoil" secondary card (.pg-second).
Sits under the main Surf package card; deliberately quieter (no
coral glow, ghost button, single price line).
--------------------------------------------------------------- */
.pg-second {
margin-top: clamp(16px, 1.8vw, 24px);
display: grid; grid-template-columns: 0.42fr 1fr; align-items: stretch;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px; overflow: hidden;
transition: border-color 320ms var(--ease-swell), background 320ms var(--ease-swell);
}
.pg-second:hover { border-color: rgba(120,200,200,0.34); background: rgba(255,255,255,0.04); }
.pg-second__fig { position: relative; min-height: 168px; background: #0c2429; overflow: hidden; }
.pg-second__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92); transition: transform 1400ms var(--ease-swell); }
.pg-second:hover .pg-second__fig img { transform: scale(1.04); }
.pg-second__fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,22,28,0.1) 0%, rgba(8,22,28,0.46) 100%); }
.pg-second__body { padding: clamp(20px, 2.2vw, 30px); display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; }
.pg-second__text { flex: 1 1 280px; }
.pg-second__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-pale); }
.pg-second__eyebrow svg { color: var(--teal-pale); flex: none; }
.pg-second__name { margin: 11px 0 0; font-family: var(--font-display); font-weight: 400; font-size: var(--disp-sub); line-height: 1; color: var(--cream); }
.pg-second__desc { margin: 9px 0 0; font-family: var(--font-body); font-size: 15px; line-height: 1.52; color: rgba(249,245,233,0.68); max-width: 46ch; }
.pg-second__foot { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pg-second__price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pg-second__from { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-pale); }
.pg-second__amount { font-family: var(--font-display); font-weight: 400; font-size: calc(clamp(30px, 2.8vw, 40px) * var(--m-num, 1)); line-height: 0.85; color: #fff; }
.pg-second__amount sup { font-size: 0.42em; top: -1.1em; margin-right: 1px; color: rgba(249,245,233,0.7); }
.pg-second__unit { font-family: var(--font-body); font-size: 12px; color: rgba(249,245,233,0.66); }
.pg-second__btn.btn { height: 46px; }
@media (max-width: 720px) {
.pg-second { grid-template-columns: 1fr; }
.pg-second__fig { min-height: 160px; }
.pg-second__foot { align-self: stretch; }
}
/* Split hero sub (tight SEO H1 + remainder) — reads as one paragraph. */
h1.pg-hero__sub { margin-bottom: 0; }
.pg-hero__sub--rest { margin-top: 8px; }
/* --- blog-convert.css --- */
/* ============================================================================
Swell — Blog "Convert" section · Three doorways (deep-ocean, parallax)
----------------------------------------------------------------------------
Redesign of the end-of-article conversion block. A deep-ocean band that
interrupts the sand reading surface and reads as an intentional "descent into
the water": sand seams top/bottom, a coral filament along the top edge, a
drifting contour texture, three photo "doorway" cards with frosted glass
caption panels, and a conversion row (guest-review trust widget + primary
"Plan your week" action).
Motion (progressive enhancement, both disabled under prefers-reduced-motion):
• Parallax — on desktop the card imagery + contour texture translate/zoom
as the band scrolls (assets/js/scroll-fx.js, IMG/BG groups).
• Focus-in — the whole band resolves from blurred/offset to sharp as it
enters the viewport (assets/js/article.js adds .cx-reveal then
toggles .is-inview). The pre-state only exists once JS has
added .cx-reveal, so no-JS visitors see the final layout.
Prefix: cx-. Built on the theme's tokens (tokens.css): --coral-400/500/600,
--teal-300, --sand-50, --radius-md, --shadow-xs, --ease-swell, --gutter,
--font-display, --font-sans.
========================================================================== */
/* ---------------------------------------------------------------------------
Section shell — full-width deep-ocean band.
--------------------------------------------------------------------------- */
.cx-convert {
position: relative;
isolation: isolate;
overflow: hidden;
color: #fff;
background:
radial-gradient(130% 90% at 82% -12%, rgba(15,154,154,0.28), transparent 55%),
radial-gradient(120% 90% at 8% 8%, rgba(20,120,140,0.20), transparent 52%),
linear-gradient(176deg, #0b2429 0%, #0c2a30 46%, #081e24 100%);
padding: clamp(40px, 5vw, 76px) 0 clamp(36px, 4.5vw, 68px);
margin: clamp(28px, 4vw, 56px) 0 0;
}
/* thin coral filament across the top edge — the section-break accent */
.cx-convert::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3;
background: linear-gradient(90deg, transparent, rgba(238,106,71,0.7), transparent);
}
/* top + bottom horizon seams — sand melts into ocean and back */
.cx-seam { position: absolute; left: 0; right: 0; height: clamp(48px, 6vw, 90px); z-index: 0; pointer-events: none; }
.cx-seam--top { top: 0; background: linear-gradient(180deg, var(--sand-50) 0%, rgba(248,241,230,0) 100%); opacity: 0.14; }
.cx-seam--bottom { bottom: 0; background: linear-gradient(0deg, var(--sand-50) 0%, rgba(248,241,230,0) 100%); opacity: 0.10; }
/* faint contour lines drifting behind everything — sun-on-water texture.
Doubles as the desktop parallax background layer (scroll-fx.js BG group). */
.cx-contours {
position: absolute; inset: -12% -6%; z-index: 0; opacity: 0.5; pointer-events: none;
will-change: transform;
background:
repeating-radial-gradient(120% 120% at 78% 6%,
rgba(164,211,200,0) 0 38px,
rgba(164,211,200,0.05) 38px 39px,
rgba(164,211,200,0) 39px 78px);
-webkit-mask-image: radial-gradient(120% 100% at 78% 6%, #000, transparent 70%);
mask-image: radial-gradient(120% 100% at 78% 6%, #000, transparent 70%);
}
.cx-wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
/* ---------------------------------------------------------------------------
Focus-in reveal — applied to .cx-wrap once JS has flagged the band.
The pre-state is scoped to .cx-reveal (added by JS) AND no-reduced-motion,
so it can never hide content from no-JS or reduced-motion visitors.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
.cx-convert.cx-reveal .cx-wrap {
opacity: 0;
transform: translateY(30px) scale(0.985);
filter: blur(14px);
transition:
opacity 0.9s var(--ease-swell),
transform 1.1s var(--ease-swell),
filter 1.1s var(--ease-swell);
will-change: opacity, transform, filter;
}
.cx-convert.cx-reveal.is-inview .cx-wrap {
opacity: 1;
transform: none;
filter: none;
}
}
/* ---------------------------------------------------------------------------
Editorial header — left-aligned
--------------------------------------------------------------------------- */
.cx-head { max-width: none; }
.cx-eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-sans); font-weight: 500; font-size: 11px;
letter-spacing: 0.3em; text-transform: uppercase; color: var(--coral-400);
}
.cx-eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; }
/* Pinned to DM Serif Display (always loaded via swell_fonts_url()) and sized
to hold the headline on a single line at desktop widths. */
.cx-title {
font-family: "DM Serif Display", var(--font-display); font-weight: 400;
font-size: calc(clamp(26px, 3.2vw, 44px) * var(--h-mult, 1) * var(--m-head, 1));
line-height: 1.0; letter-spacing: -0.02em;
color: #fff; margin: 18px 0 0; text-wrap: balance;
}
.cx-title i { font-style: italic; color: var(--teal-300); }
/* ---------------------------------------------------------------------------
Triptych of doorway cards
--------------------------------------------------------------------------- */
.cx-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 1.8vw, 26px);
margin-top: clamp(24px, 2.8vw, 38px);
}
/* 1/1 instead of 4/5 — 20% less tile height at the same width */
.cx-door {
position: relative; display: block; text-decoration: none; color: #fff;
border-radius: 20px; overflow: hidden; aspect-ratio: 1 / 1;
isolation: isolate; background: #0b2429;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09), 0 22px 56px rgba(0,0,0,0.5);
transition: transform 0.55s var(--ease-swell), box-shadow 0.55s var(--ease-swell);
}
/* base scale keeps the image over-scanning the frame so the parallax translate
(scroll-fx.js) never exposes a card edge. */
.cx-door__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transform-origin: center; transition: transform 0.9s var(--ease-swell); }
.cx-door__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(179deg, rgba(6,29,40,0.05) 20%, rgba(6,29,40,0.28) 46%, rgba(6,29,40,0.9) 100%); }
/* editorial index number, top-left */
.cx-door__idx {
position: absolute; top: 16px; left: 20px; z-index: 3;
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 30px; line-height: 1; color: rgba(255,255,255,0.9);
text-shadow: 0 1px 12px rgba(6,29,40,0.5);
}
/* frosted pin, top-right */
.cx-door__pin {
position: absolute; top: 15px; right: 16px; z-index: 3;
width: 38px; height: 38px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(13,53,55,0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
}
.cx-door__pin svg { width: 18px; height: 18px; color: #fff; }
/* frosted glass caption panel at the base — always legible */
.cx-door__panel {
position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
padding: clamp(15px, 1.5vw, 20px) clamp(16px, 1.6vw, 20px) clamp(14px, 1.4vw, 18px);
border-radius: 15px;
background: linear-gradient(180deg, rgba(9,32,38,0.36), rgba(9,32,38,0.62));
-webkit-backdrop-filter: blur(12px) saturate(130%); backdrop-filter: blur(12px) saturate(130%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.cx-door__cat { font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-300); }
.cx-door__t { font-family: var(--font-display); font-weight: 400; font-size: var(--disp-small); line-height: 1.05; margin: 6px 0 0; }
.cx-door__d { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 1.5; color: rgba(244,238,227,0.86); margin: 7px 0 0; }
.cx-door__go {
display: inline-flex; align-items: center; gap: 8px; margin-top: 13px;
font-family: var(--font-sans); font-weight: 600; font-size: 11px;
letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
padding-bottom: 3px; position: relative;
}
.cx-door__go::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--coral-500); transform: scaleX(0.34); transform-origin: left; transition: transform 0.45s var(--ease-swell); }
.cx-door__go svg { width: 15px; height: 15px; color: var(--coral-400); transition: transform 0.4s var(--ease-swell); }
@media (hover: hover) {
.cx-door:hover { transform: translateY(-8px); box-shadow: inset 0 0 0 1px rgba(164,211,200,0.4), 0 34px 76px rgba(0,0,0,0.6); }
.cx-door:hover .cx-door__img { transform: scale(1.12); }
.cx-door:hover .cx-door__go::after { transform: scaleX(1); }
.cx-door:hover .cx-door__go svg { transform: translateX(5px); }
}
.cx-door:focus-visible { outline: 3px solid var(--coral-500); outline-offset: 3px; }
/* When scroll-fx drives the image (data-fxset), it owns the transform — drop the
CSS base/hover transform so the two don't fight. The engine keeps the image
over-scanned via its own scale (zoom range starts > 1). */
[data-scrollfx="tideline"] .cx-door__img[data-fxset] { transition: none; }
@media (hover: hover) {
[data-scrollfx="tideline"] .cx-door:hover .cx-door__img[data-fxset] { transform: none; }
}
/* ---------------------------------------------------------------------------
Conversion row — trust widget (left) + primary action (right)
--------------------------------------------------------------------------- */
.cx-convert__row {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
gap: clamp(20px, 3vw, 40px);
margin-top: clamp(30px, 3.6vw, 48px);
padding-top: clamp(26px, 3vw, 38px);
border-top: 1px solid rgba(255,255,255,0.14);
}
.cx-trust { display: inline-flex; align-items: center; gap: clamp(12px, 1.3vw, 16px); }
.cx-trust__faces { display: inline-flex; }
.cx-trust__face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #0f2a30; }
.cx-trust__face + .cx-trust__face { margin-left: -13px; }
.cx-trust__rating { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1; color: #fff; }
.cx-trust__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cx-trust__stars { display: inline-flex; gap: 2px; color: var(--coral-500); }
.cx-trust__stars svg { width: 15px; height: 15px; display: block; }
.cx-trust__src { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.2; color: rgba(244,238,227,0.72); }
.cx-trust__src b { color: #fff; font-weight: 600; }
.cx-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--font-sans); font-weight: 600; font-size: 14px; letter-spacing: 0.04em;
color: #fff; text-decoration: none; cursor: pointer;
padding: 15px 26px; border-radius: var(--radius-md); border: 0;
background: var(--coral-500); box-shadow: 0 12px 30px rgba(238,106,71,0.32);
transition: background 0.3s var(--ease-swell), transform 0.2s var(--ease-swell), box-shadow 0.3s var(--ease-swell);
}
.cx-cta svg { width: 18px; height: 18px; }
.cx-cta:hover { background: var(--coral-600); box-shadow: 0 16px 38px rgba(238,106,71,0.42); }
.cx-cta:active { transform: scale(0.98); box-shadow: var(--shadow-xs); }
.cx-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* ---------------------------------------------------------------------------
Responsive
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
.cx-grid { grid-template-columns: 1fr; max-width: 480px; }
.cx-door { aspect-ratio: 2 / 1; }
}
@media (max-width: 620px) {
.cx-convert__row { flex-direction: column; align-items: stretch; text-align: center; }
.cx-trust { justify-content: center; }
.cx-trust__meta { align-items: center; }
.cx-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.cx-door, .cx-door__img, .cx-door__go::after, .cx-door__go svg, .cx-cta { transition: none; }
}
/* --- style.css --- */
/*
Theme Name: Swell Surf Camp
Theme URI: https://swellsurfcamp.com
Author: Swell Surf Camp
Description: Premium watersport retreats — Cabarete, Dominican Republic. A faithful, server-rendered WordPress port of the Swell Surf Camp editorial design (feasibility build, homepage). Built to be wired to Advanced Custom Fields Pro.
Version: 1.9.134
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: swellactive
Tags: custom-theme, two-columns, custom-menu
The actual design CSS lives in /assets/css/ (tokens.css, styles.css,
c-editorial.css, hero-slider.css) and is enqueued from functions.php.
This file carries the theme header and a few WordPress-admin shims only.
*/
/* WordPress admin-bar offset so the fixed nav never hides under it. */
.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
.admin-bar .nav { top: 46px; }
}
/* Honour reduced-motion for the JS-driven reveals. */
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1 !important; transform: none !important; }
}
/* These prose fields are now WYSIWYG (so links can be inserted via a button);
the editor wraps content in
. Keep spacing tidy inside the styled
containers — single paragraph sits flush, extra paragraphs get a gap. */
.hslider__body > p,
.ed-sport__lead > p,
.ed-stay__lead > p,
.ed-loc__intro > p,
.ed-gal__cap > p,
.ed-rev__quote > p {
margin: 0;
}
.hslider__body > p + p,
.ed-sport__lead > p + p,
.ed-stay__lead > p + p,
.ed-loc__intro > p + p,
.ed-gal__cap > p + p,
.ed-rev__quote > p + p {
margin-top: 0.7em;
}
/* ---- Interior pages: generic section + prose + journal grid ---- */
.pg-sec { padding: clamp(48px, 8vw, 104px) 0; }
.swell-prose {
max-width: 1080px;
margin-inline: auto;
font-family: var(--font-sans);
font-weight: 400;
font-size: 19px;
line-height: 1.75;
color: rgba(249, 245, 233, 0.88);
}
.swell-prose > * + * { margin-top: 1.05em; }
.swell-prose h2, .swell-prose h3, .swell-prose h4 {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.12;
color: #f9f5e9;
margin-top: 1.5em;
}
.swell-prose h2 { font-size: clamp(28px, 4vw, 40px); }
.swell-prose h3 { font-size: clamp(22px, 3vw, 28px); }
.swell-prose h4 { font-size: 21px; }
.swell-prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.swell-prose ul, .swell-prose ol { padding-left: 1.3em; }
.swell-prose li + li { margin-top: 0.35em; }
.swell-prose blockquote {
margin: 1.4em 0;
padding-left: 1em;
border-left: 3px solid var(--coral-500);
font-family: var(--font-display);
font-style: italic;
font-size: 1.15em;
color: #f9f5e9;
}
.swell-prose figcaption { font-size: 14px; color: rgba(249, 245, 233, 0.55); margin-top: 8px; }
.swell-article { max-width: 1080px; }
/* "Latest from the Journal" block at the foot of single posts. */
.swell-related { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.swell-related .pg-head { margin-bottom: clamp(28px, 4vw, 44px); }
.swell-related__more { display: flex; justify-content: center; margin-top: clamp(30px, 4vw, 48px); }
/* Legal pages (Privacy, Cookie, Terms) — lead intro + footer link row. */
.swell-legal__lead { font-size: 21px; line-height: 1.6; color: #f9f5e9; }
.ed-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.ed-footer__legal a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 220ms var(--ease-swell); }
.ed-footer__legal a:hover { color: var(--coral-400, #ff8b6a); }
@media (max-width: 900px) { .ed-footer__legal { order: 3; } }
.swell-journal {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: clamp(28px, 4vw, 48px);
}
.swell-jcard { display: flex; flex-direction: column; }
.swell-jcard__img {
display: block;
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
/* Real ![]()
thumbnails (SEO: alt + srcset + native lazy-load, indexable in
Google Images) crop exactly like the old CSS background did. */
.swell-jcard__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.swell-jcard__meta {
margin-top: 16px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(249, 245, 233, 0.55);
}
.swell-jcard__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 25px;
line-height: 1.15;
margin: 8px 0 8px;
}
.swell-jcard__title a { color: #f9f5e9; text-decoration: none; }
.swell-jcard__title a:hover { color: var(--coral-400); }
/* Normalise ALL-CAPS post titles to sentence case at display time. Titles typed
in caps (e.g. "WHY CABARETE…") render as "Why cabarete…". Display-only: the
stored title (single-post H1,
, OG, breadcrumbs) is unchanged, and
proper nouns (Cabarete, Dominican Republic, Swell) get lowercased. Renaming
the posts is the SEO-clean fix. */
.swell-jcard__title { text-transform: lowercase; }
.swell-jcard__title::first-letter { text-transform: uppercase; }
.swell-jcard__excerpt {
font-family: var(--font-sans);
font-weight: 400;
font-size: 16.5px;
line-height: 1.6;
color: rgba(249, 245, 233, 0.78);
margin-bottom: 14px;
}
.swell-prose .pagination,
.pg .navigation.pagination { margin-top: 56px; }
.pg .page-numbers {
display: inline-flex;
min-width: 40px;
height: 40px;
align-items: center;
justify-content: center;
padding: 0 12px;
margin: 0 3px;
border-radius: var(--radius-pill);
font-family: var(--font-sans);
font-size: 15px;
color: rgba(249, 245, 233, 0.8);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
text-decoration: none;
}
.pg .page-numbers.current { background: var(--coral-500); color: #fff; box-shadow: none; }
/* Homepage combo ("Why pick a side?") as a boxed card matching the two sport
cards above it — bordered, rounded, dark fill, hover-lift; still one column. */
.ed-combo {
border: 1px solid var(--hairline);
border-radius: 18px;
background: var(--cream);
padding: clamp(28px, 3.5vw, 46px);
margin-top: clamp(24px, 3vw, 40px);
transition: transform 320ms var(--ease-swell), box-shadow 320ms var(--ease-swell);
}
.ed-combo:hover { transform: translateY(-4px); box-shadow: 0 22px 56px rgba(13, 28, 32, 0.14); }
.ed--dark .ed-combo { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.12); }
.ed--dark .ed-combo:hover { box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4); }
/* Pricing — seasonal toggle (Low / High season) + struck high-season reference. */
.pg-season { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: clamp(28px, 3.4vw, 44px); }
.pg-season__switch {
position: relative; display: grid; grid-template-columns: 1fr 1fr;
padding: 4px; gap: 4px; border-radius: 999px;
background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pg-season__thumb {
position: absolute; top: 4px; left: 4px; z-index: 0;
width: calc(50% - 4px); height: calc(100% - 8px);
border-radius: 999px; background: var(--coral);
box-shadow: 0 6px 20px rgba(238, 106, 71, 0.4);
transition: transform 360ms var(--ease-swell);
}
.pg-season[data-season="high"] .pg-season__thumb { transform: translateX(calc(100% + 4px)); }
.pg-season__opt {
position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px;
padding: 13px clamp(20px, 2.4vw, 34px); border: none; background: none; cursor: pointer;
text-align: center; align-items: center; border-radius: 999px;
transition: color 280ms var(--ease-swell);
}
.pg-season__k { font-family: var(--font-body); font-size: 14.5px; font-weight: 600; letter-spacing: 0.02em; color: rgba(249, 245, 233, 0.62); transition: color 280ms var(--ease-swell); }
.pg-season__m { font-family: var(--font-body); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(249, 245, 233, 0.4); transition: color 280ms var(--ease-swell); }
.pg-season__opt.is-on .pg-season__k { color: var(--on-accent); }
.pg-season__opt.is-on .pg-season__m { color: rgba(255, 255, 255, 0.82); }
.pg-season__opt:not(.is-on):hover .pg-season__k { color: rgba(249, 245, 233, 0.92); }
.pg-season__note { margin: 0; font-family: var(--font-body); font-size: 14px; letter-spacing: 0.02em; color: rgba(249, 245, 233, 0.66); }
.pg-season__note b { color: var(--coral-400, #ff8b6a); font-weight: 600; }
.pg-pkg__was { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.02em; color: rgba(249, 245, 233, 0.45); }
.pg-pkg__was s { text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* Photo sliders: no hover/rollover movement. (The feature-media zoom-on-hover
is meant for single photos; on a slider it shifts the image and peeks the
next slide.) Kill the transform + transition on slider images. */
.ed-slider__slide img { transition: none !important; }
.pg-feature__media:hover .ed-slider__slide img,
.ed-slider:hover .ed-slider__slide img,
.ed-slider__slide:hover img,
.pg-feature__media:hover .pg-slider__img { transform: none !important; }
/* ---- Interior pages: collapse body copy to the homepage's Jost scale ----
Homepage body = Jost 350, 18px (19px at ≤600px), line-height 1.65. The
bespoke pages used a dozen different sizes for the same kind of copy; pin
them all to the homepage scale. Headings and small tracked labels/captions
are intentionally left as-is. */
.pg-lede__body p,
.pg-head__lead,
.pg-level__d,
.pg-day__body p,
.pg-inc p,
.pg-pkg__desc,
.pg-pkg__list li,
.pg-assure__d,
.pg-trip__d,
.pg-amen li,
.pg-air__use,
.pg-promise p,
.pg-feature__list .lbl,
.pg-contact__opt .v,
.pg-cmp tbody td.lbl,
.pg-quote-card .bk-step > p,
.pg-quote__done > p {
font-family: var(--font-body);
font-weight: 400;
font-size: 18px;
line-height: 1.65;
}
@media (max-width: 600px) {
.pg-lede__body p,
.pg-head__lead,
.pg-level__d,
.pg-day__body p,
.pg-inc p,
.pg-pkg__desc,
.pg-pkg__list li,
.pg-assure__d,
.pg-trip__d,
.pg-amen li,
.pg-air__use,
.pg-promise p,
.pg-feature__list .lbl,
.pg-contact__opt .v,
.pg-cmp tbody td.lbl,
.pg-quote-card .bk-step > p,
.pg-quote__done > p {
font-size: 19px;
}
}
/* ---- Contact page: enquiry card header + WPForms embed + fallback ----
The quote card (.pg-quote-card, white) on the Contact page now hosts a
WPForms form instead of the prototype's JS wizard. These rules style the
card's own heading/intro, give the embedded form sensible spacing, and
provide the no-ID-yet fallback + admin hint. */
.pg-quote-card__title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(26px, 2.6vw, 34px);
line-height: 1.05;
color: var(--ink);
margin: 12px 0 0;
}
.pg-quote-card__intro {
font-family: var(--font-body);
font-weight: 400;
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
margin: 10px 0 0;
}
.pg-quote-card__form { margin-top: 22px; }
/* Beige card (warm paper) instead of stark white. Loads after pages.css so it
overrides .pg-quote-card's white fill. Inputs stay white to pop against it.
The dark base text colour is important: some WPForms text (page-break
descriptions, HTML blocks) has no colour of its own and would otherwise
inherit the dark theme's light text and vanish on the beige. */
.pg-quote-card { background: var(--paper); color: var(--ink-soft); }
/* Force the site font (Jost) on every WPForms element. WPForms can set its own
typeface via its theme settings, so we override with !important — scoped to
the card so nothing else is touched. The serif card title is outside the
form wrapper, so it keeps the display font. */
.pg-quote-card__form,
.pg-quote-card__form * {
font-family: var(--font-body) !important;
}
/* Host portrait is a real <img> here (the prototype used an image-slot). */
.pg-host__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* WPForms inside the white card — keep it on-brand and readable.
WPForms ships in two markup modes; we brand both, scoped to the card so no
other form on the site is affected:
1) MODERN markup (default in current WPForms) — override its CSS variables.
2) CLASSIC markup / general fallback — explicit selectors. */
/* 1) Modern markup: re-map WPForms' own design tokens to the Swell palette. */
.pg-quote-card__form .wpforms-container,
.pg-quote-card__form.wpforms-container {
--wpforms-field-border-radius: 12px;
--wpforms-field-border-style: solid;
--wpforms-field-border-size: 1px;
--wpforms-field-background-color: #ffffff;
--wpforms-field-border-color: var(--hairline);
--wpforms-field-text-color: var(--ink);
--wpforms-label-color: var(--ink);
--wpforms-label-sublabel-color: var(--ink-soft);
--wpforms-label-error-color: var(--coral-600, #d4502e);
--wpforms-button-border-radius: 999px;
--wpforms-button-background-color: var(--coral);
--wpforms-button-text-color: var(--on-accent, #fff);
margin: 0;
}
/* Keep all WPForms text dark on the beige card (page-break titles/descriptions
and HTML blocks have no colour of their own). */
.pg-quote-card__form p,
.pg-quote-card__form .wpforms-field-html,
.pg-quote-card__form .wpforms-page-indicator,
.pg-quote-card__form .wpforms-page-indicator-page-title { color: var(--ink-soft); }
/* Progress bar — Swell Surf Camp brand teal (overrides WPForms' own teal-green,
which it sets inline, hence !important). Covers the bar, circles and
connector page-indicator styles. */
.pg-quote-card__form .wpforms-page-indicator { --wpforms-page-break-color: var(--teal); }
.pg-quote-card__form .wpforms-page-indicator.progress { background-color: rgba(13, 28, 32, 0.08) !important; }
.pg-quote-card__form .wpforms-page-indicator-page-progress { background-color: var(--teal) !important; }
.pg-quote-card__form .wpforms-page-indicator-page.active .wpforms-page-indicator-page-number,
.pg-quote-card__form .wpforms-page-indicator-page.completed .wpforms-page-indicator-page-number {
background-color: var(--teal) !important;
border-color: var(--teal) !important;
}
/* 2) Explicit selectors (classic markup + reinforcement). */
.pg-quote-card__form .wpforms-form { margin: 0; }
.pg-quote-card__form .wpforms-field { padding: 0 0 18px; }
/* Field labels — match the site's form labels (.bk-field): Jost 10px / 500,
tracked uppercase, ink-soft. !important beats WPForms' own 700 / 16px. */
.pg-quote-card__form .wpforms-field-label {
font-family: var(--font-body) !important;
font-weight: 500 !important;
font-size: 10px !important;
line-height: 1.4 !important;
letter-spacing: 0.24em !important;
text-transform: uppercase !important;
color: var(--ink-soft) !important;
margin-bottom: 9px;
}
/* Helper / sub-label text (e.g. "Format is DD/MM/YYYY", "Step 1 of 3"). */
.pg-quote-card__form .wpforms-field-sublabel,
.pg-quote-card__form .wpforms-field-description,
.pg-quote-card__form .wpforms-page-indicator,
.pg-quote-card__form .wpforms-page-indicator-page-title {
font-family: var(--font-body) !important;
font-weight: 400 !important;
font-size: 13px !important;
letter-spacing: normal !important;
text-transform: none !important;
color: var(--ink-soft) !important;
}
.pg-quote-card__form .wpforms-required-label { color: var(--coral); border: 0; }
/* Inputs / selects / textareas */
.pg-quote-card__form input[type="text"],
.pg-quote-card__form input[type="email"],
.pg-quote-card__form input[type="tel"],
.pg-quote-card__form input[type="url"],
.pg-quote-card__form input[type="number"],
.pg-quote-card__form input[type="date"],
.pg-quote-card__form input[type="datetime-local"],
.pg-quote-card__form select,
.pg-quote-card__form textarea {
width: 100%;
font-family: var(--font-body) !important;
font-size: 16.5px !important;
font-weight: 400 !important;
line-height: 1.4;
letter-spacing: normal !important;
text-transform: none !important;
color: var(--ink);
background: #fff;
border: 1px solid var(--hairline);
border-radius: 12px;
padding: 12px 14px;
box-shadow: none;
transition: border-color 160ms var(--ease-swell), box-shadow 160ms var(--ease-swell);
}
.pg-quote-card__form textarea { min-height: 120px; resize: vertical; }
.pg-quote-card__form input:focus,
.pg-quote-card__form select:focus,
.pg-quote-card__form textarea:focus {
outline: none;
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(15, 154, 154, 0.14);
}
.pg-quote-card__form ::placeholder { color: var(--ink-soft); opacity: 0.6; }
/* Two-up rows (e.g. first / last name) when the form uses WPForms columns. */
.pg-quote-card__form .wpforms-field-row,
.pg-quote-card__form .wpforms-field-name { gap: 14px; }
/* Checkboxes / radios */
.pg-quote-card__form .wpforms-field-radio ul,
.pg-quote-card__form .wpforms-field-checkbox ul {
margin: 0; padding: 0; list-style: none;
display: flex; flex-direction: column; gap: 9px;
}
.pg-quote-card__form .wpforms-field-radio li,
.pg-quote-card__form .wpforms-field-checkbox li,
.pg-quote-card__form .wpforms-field-radio label,
.pg-quote-card__form .wpforms-field-checkbox label,
.pg-quote-card__form .wpforms-field-label-inline {
font-family: var(--font-body) !important;
font-size: 16.5px !important;
font-weight: 400 !important;
letter-spacing: normal !important;
text-transform: none !important;
color: var(--ink) !important;
}
.pg-quote-card__form input[type="checkbox"],
.pg-quote-card__form input[type="radio"] { accent-color: var(--teal); width: auto; margin-right: 8px; }
/* Submit button — coral pill matching the site's primary CTA. */
.pg-quote-card__form .wpforms-submit,
.pg-quote-card__form button[type="submit"] {
font-family: var(--font-body) !important;
font-weight: 600 !important;
font-size: 15px !important;
letter-spacing: 0.01em;
color: var(--on-accent, #fff) !important;
background: var(--coral) !important;
border: none !important;
border-radius: 999px !important;
padding: 14px 30px !important;
cursor: pointer;
box-shadow: 0 10px 26px rgba(238, 106, 71, 0.30);
transition: transform 200ms var(--ease-swell), filter 200ms var(--ease-swell), box-shadow 200ms var(--ease-swell);
}
.pg-quote-card__form .wpforms-submit:hover,
.pg-quote-card__form button[type="submit"]:hover {
transform: translateY(-1px);
filter: brightness(1.04);
box-shadow: 0 14px 32px rgba(238, 106, 71, 0.38);
}
.pg-quote-card__form .wpforms-submit-container { margin-top: 4px; }
/* Validation errors */
.pg-quote-card__form label.wpforms-error,
.pg-quote-card__form .wpforms-error {
font-family: var(--font-body); font-size: 12.5px;
color: var(--coral-600, #d4502e);
}
.pg-quote-card__form input.wpforms-error,
.pg-quote-card__form textarea.wpforms-error,
.pg-quote-card__form select.wpforms-error { border-color: var(--coral-600, #d4502e); }
/* Success / confirmation message */
.pg-quote-card .wpforms-confirmation-container-full {
margin: 0;
background: rgba(15, 154, 154, 0.08);
border: 1px solid rgba(15, 154, 154, 0.3);
border-radius: 14px;
padding: 18px 20px;
font-family: var(--font-body);
font-size: 15.5px;
line-height: 1.6;
color: var(--ink);
}
/* ---- Modal (pricing "Check availability" → WPForms popup) ----
Fixed overlay + centred beige card; reuses .pg-quote-card / .pg-quote-card__form
so the embedded WPForms form inherits the same on-brand styling. */
/* Background scroll-lock — PURE CSS, no JavaScript.
The site's theme.js scroll-lock never takes effect on the live server (a
caching / optimisation layer stops it running), and a plugin forces the page
to stay scrollable. So we lock it from CSS instead: while the proposal popup
is open, freeze the page scroller. `:has()` matches the open modal; the high
specificity + !important beats any `html{overflow-y:scroll !important}` rule.
With the page frozen, the wheel scrolls the form inside the modal instead. */
html:has(.swell-modal:not([hidden])),
html:has(.swell-modal:not([hidden])) body {
overflow: hidden !important;
}
.swell-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: flex-start;
justify-content: center;
padding: clamp(16px, 5vh, 64px) 16px;
overflow-y: auto;
overscroll-behavior: contain;
}
.swell-modal[hidden] { display: none; }
.swell-modal__scrim {
position: fixed;
inset: 0;
background: rgba(6, 20, 28, 0.66);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
animation: swellFade 240ms var(--ease-swell);
}
.swell-modal__dialog {
position: relative;
z-index: 1;
width: 100%;
max-width: 560px;
margin: 0 auto;
display: flex;
flex-direction: column;
/* Never taller than the viewport, so the form gets its OWN scrollbar inside the
card (the Next button is always reachable). The background scroll is held by
the JS event-lock in theme.js, not by CSS overflow. */
max-height: calc(100vh - clamp(32px, 10vh, 128px));
max-height: calc(100dvh - clamp(32px, 10vh, 128px));
animation: swellPop 280ms var(--ease-swell);
}
.swell-modal__dialog .pg-quote-card {
width: 100%;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.swell-modal__close {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: rgba(13, 28, 32, 0.06);
color: var(--ink);
cursor: pointer;
transition: background 180ms var(--ease-swell);
}
.swell-modal__close:hover { background: rgba(13, 28, 32, 0.12); }
@keyframes swellFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes swellPop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.swell-modal__scrim, .swell-modal__dialog { animation: none; }
}
/* Fallback shown when no WPForms ID is set (or WPForms is inactive). */
.pg-quote__fallback { text-align: center; padding: clamp(14px, 3vw, 30px) 6px; }
.pg-quote__fallbackmark {
width: 60px; height: 60px; margin: 0 auto;
border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: rgba(15, 154, 154, 0.12); color: var(--teal-deep);
box-shadow: inset 0 0 0 1px rgba(15, 154, 154, 0.4);
}
.pg-quote__fallback p {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--ink-soft);
margin: 18px auto 22px;
max-width: 40ch;
}
.pg-quote__adminhint {
display: flex; align-items: flex-start; gap: 9px;
margin: 24px 0 0; padding: 14px 16px;
border-radius: 12px;
background: rgba(238, 106, 71, 0.08);
box-shadow: inset 0 0 0 1px rgba(238, 106, 71, 0.28);
font-family: var(--font-body); font-size: 13px; line-height: 1.55;
color: var(--ink-soft);
}
.pg-quote__adminhint svg { color: var(--coral); flex: none; margin-top: 2px; }
.pg-quote__adminhint strong { color: var(--ink); }
/* ---------------------------------------------------------------------------
Author bio box (single posts) — E-E-A-T "experience" signal rendered by
template-parts/author-bio.php. Tokens reused from the editorial system.
--------------------------------------------------------------------------- */
.swell-author {
padding-top: 8px;
}
.swell-author__card {
display: flex;
gap: 22px;
align-items: flex-start;
max-width: 760px;
margin: 0 auto;
padding: 26px 28px;
border-radius: 16px;
background: var(--surface-2, rgba(0, 0, 0, 0.03));
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.swell-author__media { flex: none; }
.swell-author__avatar {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.swell-author__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 11px;
color: var(--ink-soft);
margin-bottom: 4px;
}
.swell-author__name {
font-family: var(--font-display);
font-size: 22px;
line-height: 1.15;
margin: 0 0 8px;
}
.swell-author__name a { color: inherit; text-decoration: none; }
.swell-author__name a:hover { text-decoration: underline; }
.swell-author__bio {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
margin: 0 0 12px;
}
.swell-author__more {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--coral, #ee6a47);
text-decoration: none;
}
.swell-author__more:hover { text-decoration: underline; }
@media (max-width: 540px) {
.swell-author__card { flex-direction: column; gap: 16px; padding: 22px; }
}
/* --------------------------------------------------------------------------
Footer NAP block (1.9.94)
Canonical name + street address in crawlable text. Swell has no public
phone number, so this address is the primary Named Entity signal and must
stay identical to the Google Business Profile.
-------------------------------------------------------------------------- */
.ed-footer__nap {
margin: 18px 0 0;
font-style: normal;
display: flex;
flex-direction: column;
gap: 3px;
font-size: 13px;
line-height: 1.5;
opacity: .78;
}
.ed-footer__napname {
font-weight: 600;
letter-spacing: .01em;
opacity: 1;
}
/* --- style-shell-sky.css --- */
/* ============================================================
SHELL & SKY — light beach colour style.
Selected in Swell Settings → Style. When active, header.php
drops data-style="shell-sky" on <html> and every template
omits the `ed--dark` modifier (see swell_ed_dark_class()), so
the `.ed` editorial layout falls back to its light/paper
styling. This file remaps the brand tokens to the cool
shell-white / pale-aqua / ocean-navy palette, restores the
section-by-section colour rhythm, fixes a couple of light-theme
legibility gaps, and routes a handful of legacy hardcoded-coral
literals through the new accent so no stray orange survives.
The hero, footer and press marquee stay the dark navy
"bookends" in both styles, unchanged here.
============================================================ */
html[data-style="shell-sky"] {
--ink: #123244;
--ink-soft: #34566a;
--paper: #eef4f3;
--paper-2: #e0eae9;
--paper-deep: #c9dad9;
--cream: #f8fbfa;
--bone: #eef5f4;
--night: #0c2a3a;
--night-2: #123a4e;
--teal: #12a6b8;
--teal-deep: #0d8395;
--teal-pale: #8fd3db;
--coral: #0b7e8d; /* accent — deep teal, not orange */
--coral-deep: #086573;
--coral-glow: rgba(11,126,141,0.28);
--hairline: rgba(18,50,68,0.16);
}
/* ---- per-section colour rhythm (top → bottom) ----
No two adjacent light sections share a tone. */
html[data-style="shell-sky"] .ed-sports { background: #f9fcfc; }
html[data-style="shell-sky"] .ed-stay { background: #edf4f3; }
html[data-style="shell-sky"] .ed-loc { background: #f9fcfc; }
html[data-style="shell-sky"] .ed-gal { background: #dcecee; }
html[data-style="shell-sky"] .ed-rev { background: #f9fcfc; }
html[data-style="shell-sky"] .ed-faq { background: #edf4f3; }
html[data-style="shell-sky"] .ed-cta--tag { background: #c9e3e6; }
/* nav slab — a deep tone of the palette over the hero photo */
html[data-style="shell-sky"] .nav { background: rgba(12,42,58,0.52); }
/* inline highlight links read the reversed-link colour site-wide;
the pale teal used on dark grounds washes out on light ones */
html[data-style="shell-sky"][data-links="reversed"] .swell-link { color: var(--teal-deep); }
/* ---- light-theme legibility fixes ----
The "ghost numeral" section eyebrow (.ed-knum) and its divider
(.ed-krule) are always white — correct on the dark surface, invisible
on this light one. */
html[data-style="shell-sky"] .ed-kicker--icon .ed-knum {
color: var(--teal-deep);
opacity: 0.34;
}
html[data-style="shell-sky"] .ed-kicker--icon .ed-krule {
background: var(--teal-deep);
opacity: 0.4;
}
/* ---- route legacy hardcoded coral literals through the accent ----
These predate the --coral token and stay orange regardless of the
accent/style in effect unless recoloured explicitly. */
html[data-style="shell-sky"] .ed-rev__chip.is-on {
background: color-mix(in srgb, var(--coral) 12%, transparent);
}
html[data-style="shell-sky"] .ed-cta__wstatus.is-tight {
background: color-mix(in srgb, var(--coral) 12%, transparent);
}
html[data-style="shell-sky"] .ed-ticket__stamp {
box-shadow: 0 8px 22px color-mix(in srgb, var(--coral) 40%, transparent);
}
html[data-style="shell-sky"] .ed-ticket__body::before {
background-image:
repeating-linear-gradient(46deg, rgba(13,53,55,0.04) 0 1px, transparent 1px 7px),
repeating-linear-gradient(-46deg, rgba(13,53,55,0.032) 0 1px, transparent 1px 9px),
radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--coral) 8%, transparent) 0, transparent 34%);
}
/* --- style-pacific-sage.css --- */
/* ============================================================
PACIFIC & SAGE — light olive colour style ("Color 8").
Selected in Swell Settings → Style (or per page). When active,
header.php drops data-style="pacific-sage" on <html> and every
template omits the `ed--dark` modifier (see swell_ed_dark_class()),
so the `.ed` editorial layout falls back to its light/paper
styling. This file remaps the brand tokens to the pale-olive /
pacific-cyan palette, restores the section-by-section colour
rhythm the client signed off on, fixes the same light-theme
legibility gaps the Shell & Sky style handles, and routes the
legacy hardcoded-coral literals through the new accent so no
stray orange survives. The hero, footer and press marquee stay
the dark navy "bookends" in both styles, unchanged here.
Palette source: design_handoff_color8 ("Pacific & Sage").
============================================================ */
html[data-style="pacific-sage"] {
--ink: #1c3540;
--ink-soft: #3d5661;
--paper: #ecf2da; /* base page ground (pale olive) */
--paper-2: #e5eddc; /* alternating sections */
--paper-deep: #d5dcbc;
--cream: #ffffff; /* cards / elevated surfaces */
--bone: #ecf2da;
--night: #123a3d; /* dark section grounds */
--night-2: #17494c;
--teal: #2f7d96; /* brand — links, eyebrows, type */
--teal-deep: #245f73;
--teal-pale: #a9dcf0;
--coral: #1f9ec4; /* accent — pacific cyan, not orange */
--coral-deep: #167a99;
--coral-glow: rgba(31,158,196,0.32);
--on-accent: #ffffff;
--hairline: rgba(28,53,64,0.18);
}
/* ---- per-section colour rhythm (top → bottom) ----
Base ground is pale olive (var(--paper) = #ecf2da). Content
sections alternate to the warm off-white #e5eddc. The "as seen in"
marquee is a divider, not a counted section, so it stays on the
base olive and the real sections alternate cleanly around it.
Every section the Shell & Sky style overrides is overridden here
too, so no dark surface from the base cascade bleeds through. */
html[data-style="pacific-sage"] .ed-intro { background: #e5eddc; }
html[data-style="pacific-sage"] .ed-sports { background: #ecf2da; }
html[data-style="pacific-sage"] .ed-stay { background: #e5eddc; }
html[data-style="pacific-sage"] .ed-loc { background: #ecf2da; }
html[data-style="pacific-sage"] .ed-gal { background: #e5eddc; }
html[data-style="pacific-sage"] .ed-rev { background: #ecf2da; }
html[data-style="pacific-sage"] .ed-faq { background: #e5eddc; }
html[data-style="pacific-sage"] .ed-cta--tag { background: #ecf2da; }
/* nav slab — a deep tone of the palette over the hero photo */
html[data-style="pacific-sage"] .nav { background: rgba(18,58,61,0.52); }
/* inline highlight links read the reversed-link colour site-wide;
the pale teal used on dark grounds washes out on light ones */
html[data-style="pacific-sage"][data-links="reversed"] .swell-link { color: var(--teal-deep); }
/* ---- light-theme legibility fixes ----
The "ghost numeral" section eyebrow (.ed-knum) and its divider
(.ed-krule) are always white — correct on the dark surface, invisible
on this light one. */
html[data-style="pacific-sage"] .ed-kicker--icon .ed-knum {
color: var(--teal-deep);
opacity: 0.34;
}
html[data-style="pacific-sage"] .ed-kicker--icon .ed-krule {
background: var(--teal-deep);
opacity: 0.4;
}
/* ---- route legacy hardcoded coral literals through the accent ----
These predate the --coral token and stay orange regardless of the
accent/style in effect unless recoloured explicitly. */
html[data-style="pacific-sage"] .ed-rev__chip.is-on {
background: color-mix(in srgb, var(--coral) 12%, transparent);
}
html[data-style="pacific-sage"] .ed-cta__wstatus.is-tight {
background: color-mix(in srgb, var(--coral) 12%, transparent);
}
html[data-style="pacific-sage"] .ed-ticket__stamp {
box-shadow: 0 8px 22px color-mix(in srgb, var(--coral) 40%, transparent);
}
html[data-style="pacific-sage"] .ed-ticket__body::before {
background-image:
repeating-linear-gradient(46deg, rgba(28,53,64,0.04) 0 1px, transparent 1px 7px),
repeating-linear-gradient(-46deg, rgba(28,53,64,0.032) 0 1px, transparent 1px 9px),
radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--coral) 8%, transparent) 0, transparent 34%);
}
/* --- style-light.css --- */
/* ============================================================================
LIGHT MODE — interior pages (.pg-) + shared editorial fixes.
Loaded on every request; every rule is gated by html[data-mode="light"],
which header.php sets whenever the active colour style is a light one
(Shell & Sky, Pacific & Sage, or any future light palette). Because every
value here is TOKEN-DRIVEN (var(--paper), var(--ink), var(--hairline), …),
the one file repaints correctly under whichever light palette remapped the
tokens — no per-palette duplication.
Why this file exists
--------------------
The interior page layout (assets/css/pages.css, prefix .pg-) was authored as
an always-dark editorial surface: dark grounds, cream text, white hairlines,
faint white-on-dark cards. The colour-style switch only ever repainted the
HOMEPAGE .ed-* sections, so on a light palette the interior grounds stayed
dark and the page looked broken. This file flips the interior CONTENT
sections to the light paper surface with dark ink and dark hairlines.
Left deliberately dark (bookends in every style, like the homepage hero/footer)
------------------------------------------------------------------------------
The full-bleed subpage hero (.pg-hero*, .pg-cover*, .pg-tabs, .pg-crumb,
.sw-wx), the 404 scene (.pg-404*), the dark "find us" map panel (.pg-find,
white line-art), the fullscreen lightbox (.pg-lb), and the teal accent band
(.pg-sec--teal). These sit over photos / are intentional dark features.
============================================================================ */
/* ---------------------------------------------------------------------------
BASE SURFACE + SECTION GROUNDS
--------------------------------------------------------------------------- */
html[data-mode="light"] .pg { background: var(--paper); color: var(--ink); }
html[data-mode="light"] .pg-sec--n1 { background: var(--paper); }
html[data-mode="light"] .pg-sec--n2 { background: var(--paper-2); }
/* The teal accent band (.pg-sec--teal) stays a colour block in every style — a
deliberate dark bookend, like the homepage hero/footer. Its white-on-teal
text is restored at the end of this file so the global ink flips don't dim it. */
html[data-mode="light"] .pg-prose__sub { color: var(--ink); }
/* ---------------------------------------------------------------------------
HEADINGS & DISPLAY FIGURES → ink
--------------------------------------------------------------------------- */
html[data-mode="light"] .pg-lede__h,
html[data-mode="light"] .pg-fact__num,
html[data-mode="light"] .pg-head .ed-h2,
html[data-mode="light"] .pg-level__t,
html[data-mode="light"] .pg-step__t,
html[data-mode="light"] .pg-feature__h,
html[data-mode="light"] .pg-dl__body h3,
html[data-mode="light"] .pg-day__body h3,
html[data-mode="light"] .pg-inc h3,
html[data-mode="light"] .pg-seasons__mo,
html[data-mode="light"] .pg-seasons__rlmain,
html[data-mode="light"] .pg-seasons__temp b,
html[data-mode="light"] .pg-trip__t,
html[data-mode="light"] .pg-quote blockquote,
html[data-mode="light"] .pg-quote__by .n,
html[data-mode="light"] .pg-pool__q,
html[data-mode="light"] .pg-assure__t,
html[data-mode="light"] .jr-feat__t,
html[data-mode="light"] .jr-card__t { color: var(--ink); }
/* italic accents inside those headings — teal-pale washes out on paper, so use
the deep teal (same fix the homepage light styles apply to inline links) */
html[data-mode="light"] .pg-lede__h i,
html[data-mode="light"] .pg-fact__num i,
html[data-mode="light"] .pg-trip__t i,
html[data-mode="light"] .pg-pool__q i,
html[data-mode="light"] .pg-seasons__mo i,
html[data-mode="light"] .pg-quote blockquote .mark,
html[data-mode="light"] .jr-feat__t i { color: var(--teal-deep); }
/* ---------------------------------------------------------------------------
BODY / SECONDARY COPY → ink-soft
--------------------------------------------------------------------------- */
html[data-mode="light"] .pg-level__d,
html[data-mode="light"] .pg-step__d,
html[data-mode="light"] .pg-dl__body p,
html[data-mode="light"] .pg-dl__count,
html[data-mode="light"] .pg-day__body p,
html[data-mode="light"] .pg-inc p,
html[data-mode="light"] .pg-assure__d,
html[data-mode="light"] .pg-food__ticks span,
html[data-mode="light"] .pg-trip__d,
html[data-mode="light"] .pg-trip__where,
html[data-mode="light"] .pg-quote__by .s,
html[data-mode="light"] .pg-pool__lead,
html[data-mode="light"] .pg-seasons__temp span,
html[data-mode="light"] .pg-seasons__cornsub,
html[data-mode="light"] .pg-seasons__rlsub,
html[data-mode="light"] .pg-seasons__lg,
html[data-mode="light"] .pg-feature__list .lbl,
html[data-mode="light"] .jr-feat__ex,
html[data-mode="light"] .jr-card__ex { color: var(--ink-soft); }
/* ---------------------------------------------------------------------------
EYEBROWS / TAGS / META → deep teal (teal-pale is too light on paper)
--------------------------------------------------------------------------- */
html[data-mode="light"] .pg-fact__lbl,
html[data-mode="light"] .pg-level__tag,
html[data-mode="light"] .pg-step__tag,
html[data-mode="light"] .pg-feature__list .lbl b,
html[data-mode="light"] .pg-feature__list svg,
html[data-mode="light"] .pg-trip__price,
html[data-mode="light"] .pg-pool__ey,
html[data-mode="light"] .pg-seasons__cornlbl,
html[data-mode="light"] .pg-seasons__temp b sup,
html[data-mode="light"] .pg-seasons__rain .on,
html[data-mode="light"] .jr-feat__meta,
html[data-mode="light"] .jr-card__meta { color: var(--teal-deep); }
/* ---------------------------------------------------------------------------
HAIRLINES → token hairline (white-on-dark rules become dark-on-paper)
--------------------------------------------------------------------------- */
html[data-mode="light"] .pg-facts,
html[data-mode="light"] .pg-food__ticks,
html[data-mode="light"] .pg-feature__list,
html[data-mode="light"] .pg-level__tag,
html[data-mode="light"] .pg-inc li,
html[data-mode="light"] .pg-amen,
html[data-mode="light"] .pg-assure__item,
html[data-mode="light"] .pg-seasons__chart { border-top-color: var(--hairline); }
html[data-mode="light"] .pg-day__row,
html[data-mode="light"] .pg-seasons__chart > * { border-bottom-color: var(--hairline); }
html[data-mode="light"] .pg-seasons__hd,
html[data-mode="light"] .pg-seasons__cell { border-left-color: var(--hairline); }
/* prominent 1.5px dividers (were white 0.5) — a touch stronger than a hairline */
html[data-mode="light"] .pg-day,
html[data-mode="light"] .pg-occ { border-top-color: color-mix(in srgb, var(--ink) 34%, transparent); }
html[data-mode="light"] .pg-occ__row { border-bottom-color: var(--hairline); }
/* the numbered-card divider tick */
html[data-mode="light"] .pg-level__rn::after { background: var(--hairline); }
/* empty meter bars / rain droplets (were faint white) */
html[data-mode="light"] .pg-seasons__meter span { background: color-mix(in srgb, var(--ink) 12%, transparent); }
html[data-mode="light"] .pg-seasons__rain { color: color-mix(in srgb, var(--ink) 26%, transparent); }
/* column hover highlight on the seasons chart — reads on paper */
html[data-mode="light"] .pg-seasons__cell.is-hot { background: color-mix(in srgb, var(--teal) 14%, transparent); }
/* month italic + "on" meter bars: keep them palette teal/coral (the numbered
scales like --teal-500 aren't remapped by the light palettes, so route the
lit bars through the tokens that ARE) */
html[data-mode="light"] .pg-seasons__mo i { color: var(--teal-deep); }
html[data-mode="light"] .pg-seasons__meter span { background: color-mix(in srgb, var(--ink) 16%, transparent); }
html[data-mode="light"] .pg-seasons__meter--teal span.on { background: var(--teal); box-shadow: 0 0 10px color-mix(in srgb, var(--teal) 45%, transparent); }
html[data-mode="light"] .pg-seasons__meter--coral span.on { background: var(--coral); box-shadow: 0 0 10px var(--coral-glow); }
/* header cells carry a background photo darkened by a night gradient so white
month text reads. On paper, fade the bottom to the page ground and calm the
photo so the (now dark) month label reads instead. */
html[data-mode="light"] .pg-seasons__hdbg { opacity: 0.22; }
html[data-mode="light"] .pg-seasons__hd.is-hot .pg-seasons__hdbg { opacity: 0.4; }
html[data-mode="light"] .pg-seasons__hd::after {
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--paper) 92%);
}
/* ---------------------------------------------------------------------------
"A DAY AT SWELL" INTERACTIVE TIMELINE (.pg-dl)
Rail times, the connecting line, the station dots and the glass prev/next
buttons were all drawn in white/cream for the dark surface.
--------------------------------------------------------------------------- */
html[data-mode="light"] .pg-dl__time { color: color-mix(in srgb, var(--ink) 55%, transparent); }
html[data-mode="light"] .pg-dl__dotw::before { background: var(--hairline); }
/* inactive station dot → white pip with a teal ring; past/active stay coral */
html[data-mode="light"] .pg-dl__dot {
background: var(--cream);
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--teal-deep) 55%, transparent);
}
/* glass prev/next arrows: faint white ring + cream glyph → hairline ring + ink
glyph (the coral hover state is left untouched) */
html[data-mode="light"] .pg-dl__arrow {
border-color: var(--hairline);
color: var(--teal-deep);
}
/* ---------------------------------------------------------------------------
CARDS — faint white-on-dark fills become clean white cards on paper
--------------------------------------------------------------------------- */
html[data-mode="light"] .pg-level,
html[data-mode="light"] .pg-trip,
html[data-mode="light"] .pg-pkg {
background: var(--cream);
border-color: var(--hairline);
}
html[data-mode="light"] .pg-level:hover,
html[data-mode="light"] .pg-trip:hover,
html[data-mode="light"] .pg-pkg:hover {
border-color: color-mix(in srgb, var(--ink) 26%, transparent);
box-shadow: 0 22px 56px color-mix(in srgb, var(--ink) 14%, transparent);
}
/* chips + contact tiles */
html[data-mode="light"] .pg-chips span,
html[data-mode="light"] .pg-contact__opt {
background: var(--cream);
box-shadow: inset 0 0 0 1px var(--hairline);
color: var(--ink);
}
html[data-mode="light"] .pg-contact__opt:hover { background: color-mix(in srgb, var(--ink) 5%, var(--cream)); }
/* ruled pool chips */
html[data-mode="light"] .pg-poolchips--ruled .ch { border-top-color: var(--hairline); }
html[data-mode="light"] .pg-poolchips--ruled .ch:last-child { border-bottom-color: var(--hairline); }
/* portrait/avatar ring */
html[data-mode="light"] .pg-quote__by img { box-shadow: inset 0 0 0 1px var(--hairline); }
/* ---------------------------------------------------------------------------
PACKAGES + COMPARISON TABLE (pricing / stay)
--------------------------------------------------------------------------- */
/* package cards were flipped to white cards above, so their white/cream body
text must go dark (the photo, ribbon, tag and coral list-ticks stay as-is) */
html[data-mode="light"] .pg-pkg__name,
html[data-mode="light"] .pg-pkg__amount,
html[data-mode="light"] .pg-pkg__list li { color: var(--ink); }
html[data-mode="light"] .pg-pkg__desc,
html[data-mode="light"] .pg-pkg__amount sup,
html[data-mode="light"] .pg-pkg__unit,
html[data-mode="light"] .pg-pkg__occ { color: var(--ink-soft); }
html[data-mode="light"] .pg-pkg__rk,
html[data-mode="light"] .pg-pkg__from,
html[data-mode="light"] .pg-pkg__custom { color: var(--teal-deep); }
html[data-mode="light"] .pg-pkg__price,
html[data-mode="light"] .pg-pkg__rate + .pg-pkg__rate { border-top-color: var(--hairline); }
/* comparison matrix */
html[data-mode="light"] .pg-cmp__col,
html[data-mode="light"] .pg-cmp tbody td.lbl,
html[data-mode="light"] .pg-cmp-cta__line { color: var(--ink); }
html[data-mode="light"] .pg-cmp__col .pg-cmp__sub,
html[data-mode="light"] .pg-cmp__head { color: var(--teal-deep); }
html[data-mode="light"] .pg-cmp tbody td,
html[data-mode="light"] .pg-cmp-cta { border-top-color: var(--hairline); }
html[data-mode="light"] .pg-cmp tbody tr:hover td { background: color-mix(in srgb, var(--ink) 3%, transparent); }
html[data-mode="light"] .pg-cmp__no { color: color-mix(in srgb, var(--ink) 28%, transparent); }
/* occupancy table + price note */
html[data-mode="light"] .pg-occ__pkg { color: var(--ink); }
html[data-mode="light"] .pg-occ__row--head span,
html[data-mode="light"] .pg-occ__pkg small,
html[data-mode="light"] .pg-occ__val.is-req,
html[data-mode="light"] .pg-pricenote b { color: var(--teal-deep); }
html[data-mode="light"] .pg-occ__val small,
html[data-mode="light"] .pg-pricenote { color: var(--ink-soft); }
/* featured "offer" card (wingfoiling + pricing) — a wide photo|panel card. Its
price rows reuse .pg-pkg__* (handled above), but the panel is a faint
white-on-dark fill with white name/desc. Flip the panel to a white card with
dark text; the ribbon/caption sit over the photo and stay light. */
html[data-mode="light"] .pg-offer {
background: var(--cream);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--coral) 22%, transparent),
0 30px 72px color-mix(in srgb, var(--ink) 12%, transparent);
}
html[data-mode="light"] .pg-offer__name { color: var(--ink); }
html[data-mode="light"] .pg-offer__desc,
html[data-mode="light"] .pg-offer__fine { color: var(--ink-soft); }
html[data-mode="light"] .pg-offer__fine svg { color: var(--teal-deep); }
html[data-mode="light"] .pg-offer__fine--foot { border-top-color: var(--hairline); }
/* ---------------------------------------------------------------------------
GALLERY (filter chips + tiles)
--------------------------------------------------------------------------- */
html[data-mode="light"] .pg-gal__filter {
color: var(--ink-soft);
box-shadow: inset 0 0 0 1px var(--hairline);
}
html[data-mode="light"] .pg-gal__filter:hover { color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 34%, transparent); }
html[data-mode="light"] .pg-gal__filter.is-active { background: var(--teal-deep); color: #fff; box-shadow: none; }
/* image drop-placeholder chrome reads on paper (empty cards before an upload) */
html[data-mode="light"] .pg-trip__media image-slot::part(empty),
html[data-mode="light"] .pg-feature__media image-slot::part(empty) { color: var(--ink-soft); }
html[data-mode="light"] .pg-trip__media image-slot::part(ring),
html[data-mode="light"] .pg-feature__media image-slot::part(ring) { border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
html[data-mode="light"] .pg-trip__media image-slot::part(frame),
html[data-mode="light"] .pg-feature__media image-slot::part(frame) { background: color-mix(in srgb, var(--ink) 3%, transparent); }
/* journal cards */
html[data-mode="light"] .jr-card { border-color: var(--hairline); }
html[data-mode="light"] .jr-card:hover { border-color: color-mix(in srgb, var(--ink) 26%, transparent); box-shadow: 0 22px 56px color-mix(in srgb, var(--ink) 14%, transparent); }
html[data-mode="light"] .jr-card__more,
html[data-mode="light"] .jr-feat__more { color: var(--teal-deep); }
html[data-mode="light"] .jr-card:hover .jr-card__more { color: var(--ink); }
/* ---------------------------------------------------------------------------
GHOST BUTTONS on interior content sections.
.btn--ghost-light is a white outline + white glyph built for dark grounds
(e.g. "See the full gallery"). Inside a light .pg-sec content section it
vanishes, so restyle it as a dark-outline ghost (mirroring .btn--ghost-dark).
Ghost buttons on the dark bookends — the subpage hero (.pg-hero) and the 404
scene — are NOT matched here, so they stay white as intended.
--------------------------------------------------------------------------- */
html[data-mode="light"] .pg-sec .btn--ghost-light {
background: transparent;
color: var(--ink);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 42%, transparent);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
html[data-mode="light"] .pg-sec .btn--ghost-light:hover {
background: var(--ink);
color: var(--cream);
}
/* ---------------------------------------------------------------------------
HOMEPAGE "AS SEEN IN" PRESS MARQUEE (.ed-marq)
The bar is a hardcoded near-black band (#07171b) with cream text; on a light
palette it should read as the light ground, as the client requested.
--------------------------------------------------------------------------- */
html[data-mode="light"] .ed-marq__bar {
background: var(--paper);
border-top-color: var(--hairline);
border-bottom-color: transparent;
}
html[data-mode="light"] .ed-marq__item,
html[data-mode="light"] .ed-marq__item--serif,
html[data-mode="light"] .ed-marq__item--caps,
html[data-mode="light"] .ed-marq__item--heavy,
html[data-mode="light"] .ed-marq__item--award { color: var(--ink-soft); }
/* ---------------------------------------------------------------------------
TEAL ACCENT BAND — keep it a dark colour block with light text.
Placed last so it restores white-on-teal text after the global ink flips
above. The band is an intentional accent surface in every colour style.
--------------------------------------------------------------------------- */
html[data-mode="light"] .pg-sec--teal { color: var(--cream); }
html[data-mode="light"] .pg-sec--teal .ed-h2,
html[data-mode="light"] .pg-sec--teal .pg-head .ed-h2,
html[data-mode="light"] .pg-sec--teal .pg-lede__h,
html[data-mode="light"] .pg-sec--teal .pg-fact__num,
html[data-mode="light"] .pg-sec--teal .pg-feature__h,
html[data-mode="light"] .pg-sec--teal .pg-level__t,
html[data-mode="light"] .pg-sec--teal .pg-dl__body h3 { color: #fff; }
html[data-mode="light"] .pg-sec--teal .ed-lead,
html[data-mode="light"] .pg-sec--teal .ed-para,
html[data-mode="light"] .pg-sec--teal .pg-level__d,
html[data-mode="light"] .pg-sec--teal .pg-dl__body p { color: rgba(249,245,233,0.9); }
html[data-mode="light"] .pg-sec--teal .pg-fact__lbl,
html[data-mode="light"] .pg-sec--teal .pg-level__tag { color: var(--teal-pale); }
html[data-mode="light"] .pg-sec--teal .pg-facts,
html[data-mode="light"] .pg-sec--teal .pg-level__tag { border-top-color: rgba(255,255,255,0.16); }
/* ---------------------------------------------------------------------------
PHOTO-BACKED CONTENT stays light.
Two cases keep a dark photo behind the copy in every colour style, so the
global ink flips above must be undone there and the text kept light:
1) any .pg-sec given an optional full-bleed background photo — swell_sec_bg_attr()
emits an inline background-image under an 85% dark tint (no class marker,
so we match the inline style).
2) the Pool & Garden "billboard", whose copy overlays a photo + dark scrim.
Placed last so these win over the ink flips by both order and specificity.
--------------------------------------------------------------------------- */
html[data-mode="light"] .pg-sec[style*="background-image"],
html[data-mode="light"] .pg-pool--billboard .pg-pool__copy { color: var(--cream); }
/* headings → white */
html[data-mode="light"] .pg-sec[style*="background-image"] .ed-h2,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-lede__h,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-fact__num,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-feature__h,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-pool__q,
html[data-mode="light"] .pg-pool--billboard .pg-pool__copy .pg-pool__q { color: #fff; }
/* heading italics → light teal */
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-lede__h i,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-fact__num i,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-pool__q i,
html[data-mode="light"] .pg-pool--billboard .pg-pool__copy .pg-pool__q i { color: var(--teal-pale); }
/* body / lead copy → soft cream */
html[data-mode="light"] .pg-sec[style*="background-image"] .ed-lead,
html[data-mode="light"] .pg-sec[style*="background-image"] .ed-para,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-food__ticks span,
html[data-mode="light"] .pg-pool--billboard .pg-pool__copy .pg-pool__lead { color: rgba(249,245,233,0.86); }
/* eyebrows / labels → light teal */
html[data-mode="light"] .pg-sec[style*="background-image"] .ed-klabel,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-fact__lbl,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-pool__ey,
html[data-mode="light"] .pg-pool--billboard .pg-pool__copy .pg-pool__ey { color: var(--teal-pale); }
/* hairlines/amenity dividers → white on the photo */
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-amen,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-food__ticks { border-top-color: rgba(255,255,255,0.16); }
/* chips + ghost buttons over a photo → glass white */
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-chips span,
html[data-mode="light"] .pg-pool--billboard .pg-pool__copy .pg-chips span {
background: rgba(255,255,255,0.1);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
color: #fff;
}
html[data-mode="light"] .pg-sec[style*="background-image"] .btn--ghost-light {
background: rgba(255,255,255,0.08);
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
/* --- scroll-fx.css --- */
/* =========================================================
Tideline scroll FX — scaffolding for assets/js/scroll-fx.js.
Gated entirely on html[data-scrollfx="tideline"] (set by the JS
on desktop only). If the attribute is absent, NONE of this applies
and the page renders exactly as before. data-scrollfx="off" is the
kill switch.
========================================================= */
/* Keep the per-frame transforms crisp: kill the slow image transitions
that would smear them; absorb any sub-pixel lateral motion. */
[data-scrollfx="tideline"] .ed-intro__photo img,
[data-scrollfx="tideline"] .ed-sport__fig img,
[data-scrollfx="tideline"] .ed-stay__mosaic figure img,
[data-scrollfx="tideline"] .ed-gal__tile img,
[data-scrollfx="tideline"] .pg-feature__media img,
[data-scrollfx="tideline"] .pg-strip img,
[data-scrollfx="tideline"] .ed-ticket__stub img,
[data-scrollfx="tideline"] .pg-hero__bg {
transition: none !important;
will-change: transform;
backface-visibility: hidden;
}
[data-scrollfx="tideline"] body { overflow-x: clip; }
/* Frames clip the zoom/parallax overscan (most already do; this guarantees it). */
[data-scrollfx="tideline"] .ed-intro__photo,
[data-scrollfx="tideline"] .ed-sport__fig,
[data-scrollfx="tideline"] .ed-stay__mosaic figure,
[data-scrollfx="tideline"] .ed-gal__tile,
[data-scrollfx="tideline"] .pg-feature__media,
[data-scrollfx="tideline"] .pg-strip figure,
[data-scrollfx="tideline"] .ed-ticket__stub {
overflow: hidden;
}
/* Hero background: replace the one-time load drift with scroll parallax. */
[data-scrollfx="tideline"] .pg-hero__bg {
animation: none !important;
}
/* =========================================================
Shared-horizon seam — a glowing teal->coral waterline drawn
across the top of each section as it rises toward mid-screen.
--seam (0 -> 1) is set per-frame by the engine on the section;
the injected .fx-seam child inherits it.
========================================================= */
[data-scrollfx="tideline"] .ed-sports,
[data-scrollfx="tideline"] .ed-stay,
[data-scrollfx="tideline"] .ed-loc,
[data-scrollfx="tideline"] .ed-gal,
[data-scrollfx="tideline"] .ed-rev,
[data-scrollfx="tideline"] .ed-faq,
[data-scrollfx="tideline"] .ed-cta,
[data-scrollfx="tideline"] .pg-sec {
position: relative;
}
[data-scrollfx="tideline"] .fx-seam {
position: absolute; left: 0; right: 0; top: -1px; height: 3px;
pointer-events: none; z-index: 6;
transform: scaleX( var( --seam, 0 ) ); transform-origin: center;
opacity: var( --seam, 0 );
background: linear-gradient( 90deg,
transparent 0%,
var( --teal-300, #5ec9c2 ) 14%,
#aef3ec 38%,
#d6fbf5 50%,
#aef3ec 62%,
var( --teal-300, #5ec9c2 ) 86%,
transparent 100% );
box-shadow: 0 0 28px 2px rgba( 94, 201, 194, 0.7 ), 0 0 10px 1px rgba( 94, 201, 194, 0.5 );
}
/* When FX is off, the injected seam element must be inert. */
[data-scrollfx="off"] .fx-seam { display: none; }
/* =========================================================
Reduced motion / safety — never leave anything hidden or moved.
========================================================= */
@media ( prefers-reduced-motion: reduce ) {
[data-scrollfx] .fx-seam { display: none !important; }
[data-scrollfx] [data-fxset] { transform: none !important; }
}