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: clamp(56px, 9vw, 110px);
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: clamp(46px, 7vw, 104px); 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: clamp(56px, 8.4vw, 132px); max-width: 15ch; }
.pg-cover-stand {
margin: 22px 0 0; max-width: 44ch;
font-family: var(--font-display); font-style: italic;
font-size: clamp(20px, 2vw, 30px); 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: clamp(44px, 5.2vw, 82px); 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: clamp(22px, 2.4vw, 30px); 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: clamp(32px, 4.2vw, 55px); 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: clamp(38px, 4.2vw, 58px); 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: clamp(42px, 7vw, 55px); 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-lede__h { font-size: clamp(34px, 4.4vw, 55px); }
[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: clamp(34px, 4vw, 58px); }
[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: clamp(48px, 6vw, 92px); 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: clamp(24px, 2.2vw, 32px); 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: clamp(56px, 6vw, 92px); 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: clamp(26px, 2.4vw, 36px); 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: clamp(60px, 7vw, 108px); line-height: 0.85; color: var(--coral); }
.pg-dl__body h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); 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: clamp(20px, 2vw, 28px); color: var(--coral); }
.pg-day__body h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 1.8vw, 26px); 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: clamp(21px, 1.9vw, 27px); 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: clamp(24px, 2.2vw, 30px); 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: clamp(28px, 3.1vw, 46px); 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: clamp(28px, 3.4vw, 52px); 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: clamp(40px, 4vw, 60px); 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: clamp(28px, 2.6vw, 38px); 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: clamp(34px, 3.4vw, 46px); }
.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: clamp(40px, 4vw, 56px); 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: clamp(20px, 2vw, 27px); 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: clamp(20px, 2vw, 28px); 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: clamp(20px, 2vw, 28px); 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: clamp(46px,6.5vw,104px); 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__h { font-size: clamp(40px,11vw,72px); }
.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: clamp(20px,1.9vw,26px); 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: clamp(34px, 4.4vw, 60px); 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: clamp(24px, 2.6vw, 34px); 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: clamp(40px, 5vw, 60px); 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: clamp(26px, 2.8vw, 36px); 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: clamp(40px, 6vw, 55px); 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: clamp(36px, 5.4vw, 68px); 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: clamp(28px, 3.2vw, 42px); 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: clamp(21px, 2.3vw, 28px); 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: clamp(23px, 2.5vw, 32px);
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: clamp(26px, 2.6vw, 34px); 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: clamp(28px, 3vw, 38px); 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: clamp(26px, 2.6vw, 34px); 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: clamp(23px, 2.5vw, 32px);
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: clamp(26px, 3vw, 38px); 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: clamp(30px, 3vw, 44px); 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: clamp(40px, 4.2vw, 56px); 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: clamp(20px, 2vw, 28px); 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: clamp(22px, 2vw, 29px); 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: clamp(24px, 2.2vw, 32px); 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: clamp(30px, 2.8vw, 40px); 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(52px, 6.5vw, 104px) 0 clamp(48px, 6vw, 92px);
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: 720px; }
.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; }
.cx-title {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(34px, 5vw, 62px); 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); }
.cx-sub {
font-family: var(--font-sans); font-weight: 400;
font-size: clamp(15px, 1.5vw, 18px); line-height: 1.62;
color: rgba(244,238,227,0.82); margin: 16px 0 0; max-width: 52ch;
}
/* ---------------------------------------------------------------------------
Triptych of doorway cards
--------------------------------------------------------------------------- */
.cx-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 1.8vw, 26px);
margin-top: clamp(30px, 3.4vw, 46px);
}
.cx-door {
position: relative; display: block; text-decoration: none; color: #fff;
border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5;
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: clamp(22px, 1.9vw, 28px); 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: 16 / 10; }
}
@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.94
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%);
}
/* --- 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; }
}