/* =========================================================
The Creeks Golf & RV Resort — park2 variation
Premium Arkansas countryside resort aesthetic
========================================================= */
@font-face {
font-family: 'Fraunces';
src: url('../fonts/fraunces-variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fraunces';
src: url('../fonts/fraunces-italic.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/inter-variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Caveat';
src: url('../fonts/caveat-variable.woff2') format('woff2-variations');
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gilda Display';
src: url('../fonts/gilda-display-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mrs Saint Delafield';
src: url('../fonts/mrs-saint-delafield-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Work Sans';
src: url('../fonts/work-sans-variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
/* ---- Color: Arkansas countryside resort ---- */
--forest-deep: #173A2A;
--pine-rich: #24543D;
--pine-deeper: #0F2A1E;
--moss: #3E6B53;
--cream: #F7F1E7;
--cream-soft: #FBF7EF;
--cream-warm: #F2EADA;
--sand: #E8D9C3;
--sand-deep: #D4BC97;
--gold: #B89355;
--gold-soft: #C9A87A;
--gold-deep: #997135;
--terracotta: #B76E4C;
--terracotta-soft:#D2906F;
--charcoal: #232323;
--ink: #1A2218;
--body: #4A4A42;
--muted: #7A7A72;
--line: rgba(35,35,35,0.10);
--line-soft: rgba(35,35,35,0.06);
--white-warm: #FFFDF8;
--shadow-sm: 0 2px 8px rgba(23,58,42,0.06);
--shadow-md: 0 8px 28px rgba(23,58,42,0.10);
--shadow-lg: 0 22px 60px rgba(23,58,42,0.16);
--shadow-xl: 0 32px 100px rgba(23,58,42,0.22);
/* ---- Type scale (fluid) ---- */
--type-display-xxl: clamp(3.5rem, 6.5vw + 1rem, 7.5rem);
--type-display-xl: clamp(3rem, 5vw + 1rem, 5.5rem);
--type-display-l: clamp(2.25rem, 3.5vw + 1rem, 4rem);
--type-display-m: clamp(1.9rem, 2.4vw + 0.6rem, 2.875rem);
--type-heading: clamp(1.375rem, 1.2vw + 0.8rem, 1.75rem);
--type-subhead: 1.1875rem;
--type-body: 1.0625rem;
--type-small: 0.9375rem;
--type-micro: 0.8125rem;
--type-eyebrow: 0.75rem;
/* ---- Spacing scale ---- */
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2rem;
--space-5: 3rem;
--space-6: 4rem;
--space-7: 6rem;
--space-8: 8rem;
--space-9: 10rem;
/* ---- Radii ---- */
--r-xs: 4px;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 24px;
--r-xl: 36px;
--r-pill: 999px;
/* ---- Motion ---- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--t-fast: 200ms;
--t-med: 380ms;
--t-slow: 620ms;
/* ---- Type families ---- */
--ff-serif: 'Gilda Display', 'Fraunces', Georgia, 'Times New Roman', serif;
--ff-sans: 'Work Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
--ff-script: 'Caveat', 'Brush Script MT', cursive;
}
/* ============================ Base ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: #fff; }
body {
margin: 0;
font-family: var(--ff-sans);
font-size: var(--type-body);
line-height: 1.65;
color: var(--body);
background: var(--cream);
font-feature-settings: "kern", "liga", "calt";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 {
font-family: var(--ff-serif);
font-weight: 400;
color: var(--ink);
letter-spacing: -0.012em;
line-height: 1.08;
margin: 0;
text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
hr { border: 0; height: 1px; background: var(--line); margin: var(--space-5) 0; }
::selection { background: var(--gold); color: var(--ink); }
/* ============================ Layout ============================ */
.container {
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
}
.container--wide { max-width: 1480px; }
.container--narrow { max-width: 880px; }
@media (max-width: 720px) {
.container { padding: 0 20px; }
}
/* Generic eyebrow */
.eyebrow {
display: inline-block;
font-size: var(--type-eyebrow);
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--gold-deep);
font-weight: 600;
font-family: var(--ff-sans);
position: relative;
padding-left: 36px;
margin-bottom: var(--space-3);
}
.eyebrow::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 26px; height: 1px;
background: var(--gold);
}
.eyebrow--center { padding-left: 0; }
.eyebrow--center::before { display: none; }
.script {
font-family: var(--ff-serif);
font-style: italic;
font-weight: 400;
color: var(--gold-deep);
}
/* ============================ Buttons ============================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
padding: 1em 1.85em;
font-family: var(--ff-sans);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: var(--r-pill);
cursor: pointer;
transition: background var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out),
transform var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out);
border: 1px solid transparent;
white-space: nowrap;
user-select: none;
}
/* buttons stay put on hover — colour/border feedback only, no lift or resize */
/* =========================================================
Standard buttons — "Hairline + Arrow" (B4)
Slightly-rounded 1px hairline, gold text, and a gold arrow
(added via ::after so no markup changes) that slides on hover
while the border warms and tracking opens. Light backgrounds
use deep gold; dark sections flip to light gold (overrides below).
========================================================= */
.btn--primary,
.btn--gold,
.btn--ghost,
.btn--ghost-light {
border-radius: 10px;
border-width: 1px;
background: transparent;
box-shadow: none;
}
/* shared gold arrow */
.btn--primary::after,
.btn--gold::after,
.btn--ghost::after,
.btn--ghost-light::after {
content: "\2192";
margin-left: 0.1em;
font-weight: 400;
color: #A98233;
transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.btn--primary:hover::after,
.btn--gold:hover::after,
.btn--ghost:hover::after,
.btn--ghost-light:hover::after { transform: translateX(4px); }
/* primary (gold) on light */
.btn--primary,
.btn--gold {
color: #8A6D2F;
border-color: rgba(34,48,31,0.24);
}
.btn--primary:hover,
.btn--gold:hover {
color: #8A6D2F;
border-color: #A98233;
background: rgba(193,154,75,0.08);}
/* secondary ghost on light */
.btn--ghost {
color: var(--forest-deep);
border-color: rgba(34,48,31,0.24);
}
.btn--ghost:hover {
color: var(--forest-deep);
border-color: var(--forest-deep);}
/* ghost on dark (sections that opt into the light variant) */
.btn--ghost-light {
color: rgba(255,253,248,0.92);
border-color: rgba(255,255,255,0.40);
}
.btn--ghost-light::after { color: #D9B665; }
.btn--ghost-light:hover {
color: #fff;
border-color: #fff;}
/* Dark/photo sections: gold/primary flip to light gold so the hairline + arrow stay crisp. */
.golf .btn--gold, .golf .btn--primary,
.contact .btn--gold, .contact .btn--primary,
.hero3 .btn--gold, .hero3 .btn--primary,
.hero-cta .btn--gold, .hero-cta .btn--primary {
color: #D9B665;
border-color: rgba(255,255,255,0.34);
}
.golf .btn--gold::after, .golf .btn--primary::after,
.contact .btn--gold::after, .contact .btn--primary::after,
.hero3 .btn--gold::after, .hero3 .btn--primary::after,
.hero-cta .btn--gold::after, .hero-cta .btn--primary::after { color: #D9B665; }
.golf .btn--gold:hover, .golf .btn--primary:hover,
.contact .btn--gold:hover, .contact .btn--primary:hover,
.hero3 .btn--gold:hover, .hero3 .btn--primary:hover,
.hero-cta .btn--gold:hover, .hero-cta .btn--primary:hover {
color: #fff;
border-color: #D9B665;
background: rgba(217,182,101,0.14);
}
/* Header "Book Now": the one filled CTA, so it stays visible over the hero
photo (transparent header) and on the scrolled light header alike. */
.site-header__book.btn--gold {
background: #d4b05fd6;
color: #000000;
border: 2px solid #00000078;
box-shadow: 0 6px 18px rgba(23,58,42,0.22);
}
.site-header__book.btn--gold::after { color: #000000; }
.site-header__book.btn--gold:hover {
background: #d4b05f;
border-color: #000000a8;
color: #000000;}
.site-header__book.btn--gold:hover::after { color: #000000; }
.btn--lg { padding: 1.15em 2.15em; font-size: 0.9375rem; }
.btn--sm { padding: 0.75em 1.35em; font-size: 0.8125rem; }
/* Tiny outline arrow */
.arrow-link {
display: inline-flex; align-items: center; gap: 0.55em;
font-family: var(--ff-sans); font-size: 0.875rem;
font-weight: 600; letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--forest-deep);
padding: 0.3em 0;
border-bottom: 1px solid var(--forest-deep);
transition: gap var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out);
}
.arrow-link::after {
content: "→";
transition: transform var(--t-fast) var(--ease-out);
}
.arrow-link:hover { gap: 0.85em; color: var(--gold-deep); }
.arrow-link:hover::after { transform: translateX(4px); }
/* ============================ Section head ============================ */
.section-head { text-align: center; max-width: 760px; margin: 0 auto var(--space-6); }
.section-head--left { text-align: left; margin-left: 0; }
.section-head__title {
font-size: var(--type-display-l);
margin-bottom: var(--space-2);
}
.section-head__lead {
font-size: var(--type-subhead);
color: var(--body);
max-width: 56ch;
margin: 0 auto;
}
.section-head--left .section-head__lead { margin-left: 0; }
/* ============================ Header / Nav ============================ */
.site-header {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 80;
padding: var(--space-3) 0;
transition: background var(--t-med) var(--ease-out),
padding var(--t-med) var(--ease-out),
box-shadow var(--t-med) var(--ease-out),
border-color var(--t-med) var(--ease-out);
border-bottom: 1px solid transparent;
}
/* Subtle top scrim: a very faded transparent-black gradient that starts at the
very top, sits behind the header content, and spreads a little into the page
below the bar. Helps the light logo/menu read over bright hero areas and adds
a touch of depth. Many stops = no banding. Hidden once the header goes solid. */
.site-header::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 240px;
z-index: -1;
pointer-events: none;
background: linear-gradient(180deg,
rgba(0,0,0,0.42) 0%,
rgba(0,0,0,0.375) 9%,
rgba(0,0,0,0.315) 19%,
rgba(0,0,0,0.255) 30%,
rgba(0,0,0,0.195) 42%,
rgba(0,0,0,0.14) 54%,
rgba(0,0,0,0.092) 66%,
rgba(0,0,0,0.052) 78%,
rgba(0,0,0,0.022) 89%,
rgba(0,0,0,0) 100%);
transition: opacity var(--t-med) var(--ease-out);
}
.site-header.is-scrolled::before { opacity: 0; }
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: nowrap;
}
.site-header__brand,
.site-header__brand > span,
.site-header__brand-name { white-space: nowrap; }
.site-header__login { white-space: nowrap; }
.site-header__brand {
display: flex; align-items: center; gap: 0.65em;
font-family: var(--ff-serif);
color: var(--cream);
transition: color var(--t-med) var(--ease-out);
}
.site-header__brand-mark {
width: 38px; height: 38px;
border: 1.5px solid currentColor;
border-radius: 50%;
display: grid; place-items: center;
font-family: var(--ff-serif);
font-style: italic;
font-size: 1.15rem;
font-weight: 500;
}
.site-header__brand-img {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--cream);
padding: 3px;
object-fit: contain;
box-shadow: 0 4px 14px rgba(0,0,0,0.25);
flex: none;
}
.site-header.is-scrolled .site-header__brand-img {
box-shadow: 0 4px 14px rgba(23,58,42,0.12);
}
@media (max-width: 560px) {
.site-header__brand-img { width: 46px; height: 46px; }
}
.site-header__brand-name {
font-size: 1.0625rem;
letter-spacing: 0.02em;
line-height: 1.1;
font-weight: 500;
}
.site-header__brand-tag {
display: block;
font-family: var(--ff-sans);
font-size: 0.6875rem;
letter-spacing: 0.24em;
text-transform: uppercase;
opacity: 0.75;
margin-top: 2px;
}
.site-nav__list {
list-style: none; margin: 0; padding: 0;
display: flex; gap: 1.6rem; align-items: center;
flex-wrap: nowrap;
}
.site-nav__list a {
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--cream);
transition: color var(--t-fast) var(--ease-out),
opacity var(--t-fast) var(--ease-out);
opacity: 0.92;
position: relative;
padding: 0.35em 0;
white-space: nowrap;
}
.site-nav__list a:hover { color: var(--gold-soft); opacity: 1; }
.site-nav__list a::after {
content: "";
position: absolute; left: 0; bottom: 0;
width: 0; height: 1px;
background: var(--gold-soft);
transition: width var(--t-med) var(--ease-out);
}
.site-nav__list a:hover::after { width: 100%; }
.site-header__actions { display: flex; align-items: center; gap: 0.85rem; }
.site-header__login {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--cream);
opacity: 0.85;
padding: 0.4em 0;
border-bottom: 1px solid rgba(255,253,248,0.3);
}
.site-header__login:hover { opacity: 1; border-color: var(--gold-soft); color: var(--gold-soft); }
.site-header__toggle {
display: none;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(0,0,0,0.18);
align-items: center; justify-content: center;
flex-direction: column; gap: 5px;
transition: background var(--t-fast) var(--ease-out);
}
.site-header__toggle span {
display: block;
width: 22px; height: 1.5px;
background: var(--cream);
transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.site-header__toggle:hover { background: rgba(0,0,0,0.30); }
/* Solid state on scroll */
.site-header.is-scrolled {
background: rgba(255,253,248,0.96);
backdrop-filter: blur(14px) saturate(120%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
padding: 0.75rem 0;
border-bottom-color: var(--line-soft);
box-shadow: 0 10px 30px rgba(23,58,42,0.06);
}
.site-header.is-scrolled .site-header__brand,
.site-header.is-scrolled .site-nav__list a,
.site-header.is-scrolled .site-header__login { color: var(--ink); }
.site-header.is-scrolled .site-header__login { border-color: rgba(35,35,35,0.18); }
.site-header.is-scrolled .site-nav__list a { opacity: 0.86; }
.site-header.is-scrolled .site-nav__list a:hover { color: var(--forest-deep); opacity: 1; }
.site-header.is-scrolled .site-nav__list a::after { background: var(--forest-deep); }
.site-header.is-scrolled .site-header__toggle { background: rgba(23,58,42,0.10); }
.site-header.is-scrolled .site-header__toggle span { background: var(--ink); }
/* ============================ HERO ============================ */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
color: var(--cream);
overflow: hidden;
isolation: isolate;
padding: 140px 0 var(--space-6);
}
.hero__media {
position: absolute; inset: 0;
z-index: -2;
}
.hero__media img {
width: 100%; height: 100%;
object-fit: cover; object-position: center 35%;
animation: heroKen 20s var(--ease-out) infinite alternate;
}
@keyframes heroKen {
from { transform: scale(1.04) translate(0,0); }
to { transform: scale(1.10) translate(-1%, -1%); }
}
.hero__veil {
position: absolute; inset: 0;
background:
linear-gradient(180deg,
rgba(23,58,42,0.55) 0%,
rgba(23,58,42,0.35) 30%,
rgba(23,58,42,0.20) 50%,
rgba(23,58,42,0.70) 100%
),
linear-gradient(95deg,
rgba(15,42,30,0.55) 0%,
rgba(15,42,30,0.10) 60%,
rgba(15,42,30,0.30) 100%
);
z-index: -1;
}
.hero__inner {
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
.hero__copy {
max-width: 740px;
}
.hero__eyebrow {
font-size: var(--type-eyebrow);
text-transform: uppercase;
letter-spacing: 0.36em;
font-weight: 600;
color: var(--gold-soft);
display: inline-flex; align-items: center; gap: 14px;
margin-bottom: var(--space-3);
}
.hero__eyebrow::before, .hero__eyebrow::after {
content: ""; width: 36px; height: 1px;
background: var(--gold-soft);
}
.hero__heading {
color: var(--white-warm);
font-size: clamp(2.25rem, 2.2vw + 1.2rem, 3.25rem);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.018em;
margin-bottom: var(--space-3);
max-width: 24ch;
}
.hero__heading .script {
color: var(--gold-soft);
font-style: italic;
font-weight: 300;
}
.hero__sub {
font-size: clamp(1.0625rem, 0.7vw + 0.9rem, 1.3125rem);
color: rgba(255,253,248,0.88);
font-weight: 400;
max-width: 56ch;
line-height: 1.55;
margin-bottom: var(--space-3);
}
.hero__trust {
display: flex; flex-wrap: wrap;
gap: 16px 26px;
font-size: 0.8125rem;
letter-spacing: 0.04em;
color: rgba(255,253,248,0.78);
margin-bottom: var(--space-4);
}
.hero__trust span {
display: inline-flex; align-items: center; gap: 0.55em;
}
.hero__trust span::before {
content: ""; display: inline-block;
width: 6px; height: 6px;
background: var(--gold);
border-radius: 50%;
}
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
/* Booking card */
.booking-card {
position: relative;
margin: 0 auto;
max-width: 1280px;
margin-top: var(--space-5);
background: rgba(255,253,248,0.96);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(184,147,85,0.32);
border-radius: var(--r-lg);
box-shadow: var(--shadow-xl);
padding: var(--space-3) var(--space-4);
color: var(--ink);
}
.booking-card__row {
display: grid;
grid-template-columns: repeat(6, 1fr) auto;
gap: 0;
align-items: end;
}
.booking-card__field {
position: relative;
padding: 6px 22px;
border-right: 1px solid var(--line);
text-align: left;
}
.booking-card__field:last-of-type { border-right: 0; }
.booking-card__field--btn { padding: 0 0 0 22px; }
.booking-card__label {
display: block;
font-family: var(--ff-sans);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 4px;
}
.booking-card__input,
.booking-card__select {
width: 100%;
padding: 0;
font-family: var(--ff-serif);
font-size: 1.0625rem;
font-weight: 400;
color: var(--ink);
background: transparent;
border: 0;
outline: 0;
cursor: pointer;
appearance: none;
}
.booking-card__input::placeholder { color: rgba(35,35,35,0.35); }
.booking-card__select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0 center;
padding-right: 22px;
}
.booking-card__btn {
width: 100%;
background: var(--forest-deep);
color: var(--cream);
border-radius: var(--r-pill);
padding: 1.05em 2.2em;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.booking-card__btn:hover { background: var(--gold); color: var(--ink); }
@media (max-width: 980px) {
.booking-card { padding: 12px; }
.booking-card__row {
grid-template-columns: 1fr 1fr;
gap: 0;
}
.booking-card__field {
padding: 14px 16px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.booking-card__field:nth-child(2n) { border-right: 0; }
.booking-card__field--btn {
grid-column: 1 / -1;
padding: 14px;
border-bottom: 0;
}
}
@media (max-width: 560px) {
.booking-card__row { grid-template-columns: 1fr; }
.booking-card__field { border-right: 0; }
}
.hero__caps {
position: absolute;
bottom: 50px; right: 30px;
z-index: 1;
pointer-events: none;
text-align: right;
}
.hero__caps-mark {
display: inline-block;
font-family: var(--ff-serif);
font-style: italic;
font-size: 0.875rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(255,253,248,0.55);
padding-right: 50px;
position: relative;
}
.hero__caps-mark::after {
content: ""; position: absolute;
right: 0; top: 50%;
width: 38px; height: 1px;
background: rgba(255,253,248,0.5);
}
@media (max-width: 900px) {
.hero__caps { display: none; }
}
/* Scroll cue */
.hero__cue {
position: absolute;
bottom: 28px; left: 50%;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 8px;
color: rgba(255,253,248,0.65);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.hero__cue::after {
content: ""; width: 1px; height: 32px;
background: linear-gradient(180deg, rgba(255,253,248,0.6), transparent);
animation: cuePulse 2.4s ease-in-out infinite;
}
@keyframes cuePulse {
0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
50% { opacity: 1; transform: scaleY(1); }
}
/* ============================ Page hero (sub-pages) ============================ */
.page-hero {
position: relative;
min-height: 64vh;
display: flex;
align-items: flex-end;
color: var(--cream);
overflow: hidden;
isolation: isolate;
padding: 160px 0 var(--space-6);
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img {
width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
animation: heroKen 22s var(--ease-out) infinite alternate;
}
.page-hero__veil {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(180deg, rgba(15,42,30,0.55) 0%, rgba(15,42,30,0.30) 35%, rgba(15,42,30,0.75) 100%),
linear-gradient(95deg, rgba(15,42,30,0.55) 0%, rgba(15,42,30,0.10) 60%, rgba(15,42,30,0.30) 100%);
}
.page-hero__eyebrow {
font-size: var(--type-eyebrow);
letter-spacing: 0.34em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold-soft);
display: inline-flex; align-items: center; gap: 14px;
margin-bottom: var(--space-3);
}
.page-hero__eyebrow::before, .page-hero__eyebrow::after {
content: ""; width: 30px; height: 1px; background: var(--gold-soft);
}
.page-hero__heading {
color: var(--white-warm);
font-size: clamp(2.5rem, 3.5vw + 1rem, 4.5rem);
font-weight: 400;
line-height: 1.06;
letter-spacing: -0.02em;
margin: 0 0 var(--space-3);
max-width: 22ch;
}
.page-hero__heading .script { color: var(--gold-soft); font-style: italic; font-weight: 300; }
.page-hero__lead {
font-size: clamp(1.0625rem, 0.6vw + 0.9rem, 1.25rem);
color: rgba(255,253,248,0.88);
max-width: 58ch;
line-height: 1.6;
margin: 0;
}
.page-hero--center .page-hero__inner { text-align: center; }
.page-hero--center .page-hero__heading { margin-left: auto; margin-right: auto; }
.page-hero--center .page-hero__lead { margin-left: auto; margin-right: auto; }
/* ============================ Page CTA band ============================ */
.page-cta {
padding: var(--space-7) 0;
background: var(--forest-deep);
color: var(--cream);
}
.page-cta__inner {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--space-5);
align-items: center;
}
.page-cta__heading {
font-size: var(--type-display-l);
color: var(--white-warm);
font-weight: 300;
margin-bottom: var(--space-3);
}
.page-cta__heading .script { color: var(--gold-soft); }
.page-cta__lead {
color: rgba(255,253,248,0.82);
font-size: var(--type-subhead);
margin: 0;
max-width: 56ch;
}
.page-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-self: end; }
@media (max-width: 900px) {
.page-cta__inner { grid-template-columns: 1fr; }
.page-cta__actions { justify-self: start; }
}
/* ============================ Page content section helpers ============================ */
.page-section { padding: var(--space-7) 0; }
.page-section--cream { background: var(--cream); }
.page-section--soft { background: var(--cream-soft); }
.page-section--warm { background: var(--cream-warm); }
.page-section--white { background: var(--white-warm); }
.page-section--dark { background: var(--forest-deep); color: var(--cream); }
.page-section--dark .section-head__title { color: var(--white-warm); }
.page-section--dark .section-head__lead { color: rgba(255,253,248,0.78); }
.page-section--dark .eyebrow { color: var(--gold-soft); }
.page-section--dark .eyebrow::before { background: var(--gold-soft); }
/* ============================ INTRO ============================ */
.intro {
background: var(--cream);
position: relative;
padding: var(--space-8) 0 var(--space-7);
overflow: hidden;
}
.intro__topo {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 1200px;
background-repeat: repeat;
opacity: 0.4;
pointer-events: none;
}
.intro__inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-7);
align-items: center;
}
.intro__lead-block { max-width: 540px; }
.intro__heading {
font-size: var(--type-display-l);
margin-bottom: var(--space-3);
}
.intro__lead {
font-size: var(--type-subhead);
color: var(--body);
margin-bottom: var(--space-4);
}
.intro__sig {
font-family: 'Mrs Saint Delafield', cursive;
font-size: 3rem;
color: var(--gold-deep);
line-height: 1.1;
letter-spacing: 0.01em;
}
.intro__features {
display: grid;
gap: var(--space-3);
}
.intro__feature {
background: var(--white-warm);
border-radius: var(--r-md);
padding: 26px 30px;
border: 1px solid var(--line-soft);
box-shadow: var(--shadow-sm);
display: grid;
grid-template-columns: 56px 1fr;
gap: 22px;
align-items: start;
transition: transform var(--t-med) var(--ease-out),
box-shadow var(--t-med) var(--ease-out);
}
.intro__feature:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.intro__feature-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--cream-warm);
display: grid; place-items: center;
color: var(--forest-deep);
}
.intro__feature-icon svg { width: 26px; height: 26px; }
.intro__feature-title {
font-family: var(--ff-serif);
font-size: 1.35rem;
font-weight: 500;
color: var(--ink);
margin: 0 0 6px;
}
.intro__feature-desc {
font-size: 0.9375rem;
color: var(--body);
margin: 0;
line-height: 1.55;
}
@media (max-width: 900px) {
.intro { padding: var(--space-7) 0 var(--space-6); }
.intro__inner { grid-template-columns: 1fr; gap: var(--space-5); }
}
/* ============================ SIGNATURE / IMAGE SPLIT ============================ */
.signature {
background: var(--forest-deep);
color: var(--cream);
padding: var(--space-8) 0;
position: relative;
overflow: hidden;
}
.signature::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(circle at 90% 10%, rgba(184,147,85,0.16) 0%, transparent 50%),
radial-gradient(circle at 5% 90%, rgba(184,147,85,0.08) 0%, transparent 45%);
pointer-events: none;
}
.signature__inner {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: var(--space-7);
align-items: center;
position: relative;
}
.signature__media {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-xl);
aspect-ratio: 5 / 6;
}
.signature__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s var(--ease-out);
}
.signature__media:hover img { transform: scale(1.05); }
.signature__media-tag {
position: absolute;
bottom: 24px; left: 24px;
background: rgba(255,253,248,0.95);
color: var(--ink);
padding: 0.7em 1.2em;
border-radius: var(--r-pill);
font-family: var(--ff-sans);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.signature__copy { max-width: 560px; }
.signature__eyebrow {
font-size: var(--type-eyebrow);
letter-spacing: 0.30em;
text-transform: uppercase;
color: var(--gold-soft);
margin-bottom: var(--space-3);
padding-left: 36px;
position: relative;
}
.signature__eyebrow::before {
content: ""; position: absolute; left: 0; top: 50%;
width: 26px; height: 1px; background: var(--gold-soft);
}
.signature__heading {
font-size: var(--type-display-l);
color: var(--white-warm);
margin-bottom: var(--space-3);
font-weight: 300;
}
.signature__heading .script { color: var(--gold-soft); font-weight: 300; }
.signature__lead {
color: rgba(255,253,248,0.82);
font-size: var(--type-subhead);
margin-bottom: var(--space-4);
}
.signature__badges {
display: flex; flex-wrap: wrap; gap: 10px;
margin-bottom: var(--space-4);
}
.sig-badge {
display: inline-flex; align-items: center; gap: 0.55em;
padding: 0.55em 1.2em;
border-radius: var(--r-pill);
border: 1px solid rgba(184,147,85,0.4);
background: rgba(184,147,85,0.06);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.04em;
color: rgba(255,253,248,0.92);
}
.sig-badge svg { width: 14px; height: 14px; color: var(--gold-soft); }
@media (max-width: 900px) {
.signature__inner { grid-template-columns: 1fr; gap: var(--space-5); }
.signature__media { aspect-ratio: 4 / 3; }
}
/* ============================ AMENITIES ============================ */
.amenities {
padding: var(--space-8) 0;
background: var(--cream-soft);
}
.amenities__grid {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.amenity-card {
background: var(--white-warm);
padding: 36px 28px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: flex; flex-direction: column;
gap: 14px;
transition: background var(--t-med) var(--ease-out);
position: relative;
}
.amenity-card:hover { background: var(--cream-warm); }
.amenity-card__icon {
width: 48px; height: 48px;
color: var(--forest-deep);
stroke-width: 1.4;
}
.amenity-card__label {
font-family: var(--ff-serif);
font-size: 1.25rem;
font-weight: 500;
color: var(--ink);
margin: 0;
line-height: 1.25;
}
.amenity-card__desc {
font-size: 0.9375rem;
color: var(--muted);
margin: 0;
line-height: 1.55;
}
@media (max-width: 1100px) {
.amenities__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
.amenities__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.amenities__grid { grid-template-columns: 1fr; }
}
.amenities__cta { text-align: center; margin-top: var(--space-5); }
/* ============================ GOLF ============================ */
.golf {
padding: var(--space-8) 0;
background: var(--cream-soft);
position: relative;
overflow: hidden;
}
.golf__inner {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
min-height: 620px;
display: grid;
align-items: center;
isolation: isolate;
box-shadow: var(--shadow-lg);
}
.golf__bg { position: absolute; inset: 0; z-index: -2; }
.golf__bg img {
width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.golf__veil {
position: absolute; inset: 0;
/* dark on the RIGHT (behind the copy), fading to clear on the left so the photo shows */
background:
linear-gradient(95deg, rgba(15,42,30,0.10) 0%, rgba(15,42,30,0.5) 45%, rgba(15,42,30,0.86) 100%);
z-index: -1;
}
.golf__panel {
justify-self: end; /* copy sits on the right side of the image */
padding: 70px 64px;
color: var(--cream);
max-width: 640px;
}
.golf__eyebrow {
font-size: var(--type-eyebrow);
letter-spacing: 0.30em;
text-transform: uppercase;
color: var(--gold-soft);
margin-bottom: var(--space-3);
padding-left: 36px;
position: relative;
}
.golf__eyebrow::before {
content: ""; position: absolute; left: 0; top: 50%;
width: 26px; height: 1px; background: var(--gold-soft);
}
.golf__heading {
color: var(--white-warm);
font-size: var(--type-display-m); /* match the other section titles (s3/amenities/attractions/reviews) */
font-weight: 300;
margin-bottom: var(--space-3);
}
.golf__heading .script { color: var(--gold-soft); }
.golf__lead {
font-size: var(--type-subhead);
color: rgba(255,253,248,0.85);
margin-bottom: var(--space-4);
}
.golf__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin-bottom: var(--space-4);
border-top: 1px solid rgba(184,147,85,0.4);
border-bottom: 1px solid rgba(184,147,85,0.4);
padding: 22px 0;
}
.golf-stat {
text-align: left;
padding-right: 18px;
border-right: 1px solid rgba(184,147,85,0.25);
}
.golf-stat:last-child { border-right: 0; }
.golf-stat__val {
font-family: var(--ff-serif);
font-style: italic;
font-weight: 300;
font-size: 2.5rem;
color: var(--gold-soft);
line-height: 1;
display: block;
margin-bottom: 6px;
}
.golf-stat__lbl {
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,253,248,0.7);
}
@media (max-width: 900px) {
.golf__inner { min-height: auto; }
.golf__panel { padding: 48px 30px; }
.golf__stats { grid-template-columns: 1fr 1fr; }
}
/* ============================ BIG RIG ============================ */
.bigrig {
padding: var(--space-8) 0;
background: var(--cream-warm);
position: relative;
overflow: hidden;
}
.bigrig__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-7);
align-items: center;
}
.bigrig__copy { max-width: 560px; padding-right: var(--space-3); }
.bigrig__heading {
font-size: var(--type-display-l);
margin-bottom: var(--space-3);
}
.bigrig__heading .script { color: var(--gold-deep); }
.bigrig__lead {
font-size: var(--type-subhead);
color: var(--body);
margin-bottom: var(--space-4);
}
.bigrig__policy {
background: var(--white-warm);
border-left: 3px solid var(--gold);
padding: 22px 26px;
border-radius: 0 var(--r-md) var(--r-md) 0;
box-shadow: var(--shadow-sm);
}
.bigrig__policy-eyebrow {
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 700;
display: block;
margin-bottom: 8px;
}
.bigrig__policy-text {
font-family: var(--ff-serif);
font-size: 1.0625rem;
color: var(--ink);
line-height: 1.5;
margin: 0;
}
.bigrig__media {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 5 / 6;
box-shadow: var(--shadow-lg);
}
.bigrig__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s var(--ease-out);
}
.bigrig__media:hover img { transform: scale(1.04); }
.bigrig__media-stamp {
position: absolute;
top: 30px; right: 30px;
width: 130px; height: 130px;
border-radius: 50%;
background: var(--gold);
color: var(--ink);
display: grid; place-items: center;
text-align: center;
font-family: var(--ff-serif);
font-style: italic;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.15;
letter-spacing: 0.02em;
padding: 18px;
box-shadow: 0 14px 30px rgba(184,147,85,0.45);
transform: rotate(-8deg);
}
.bigrig__media-stamp strong {
display: block;
font-size: 1.5rem;
font-style: normal;
font-weight: 500;
margin: 4px 0;
}
@media (max-width: 900px) {
.bigrig__inner { grid-template-columns: 1fr; gap: var(--space-5); }
.bigrig__media { aspect-ratio: 4 / 3; }
}
/* ============================ ATTRACTIONS ============================ */
.attractions {
padding: var(--space-8) 0;
background: var(--cream-soft);
}
.attractions__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
.attractions__grid--featured {
grid-template-columns: 2fr 1fr 1fr;
}
.attr-card {
position: relative;
overflow: hidden;
border-radius: var(--r-lg);
aspect-ratio: 4 / 5;
display: block;
box-shadow: var(--shadow-sm);
transition: transform var(--t-med) var(--ease-out),
box-shadow var(--t-med) var(--ease-out);
isolation: isolate;
background: var(--forest-deep);
}
.attr-card--wide { aspect-ratio: auto; grid-row: span 2; height: 100%; }
.attr-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.attr-card__media {
position: absolute; inset: 0;
z-index: 0;
}
.attr-card__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--t-slow) var(--ease-out);
}
.attr-card:hover .attr-card__media img { transform: scale(1.06); }
.attr-card__veil {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15,42,30,0.10) 0%, rgba(15,42,30,0.10) 40%, rgba(15,42,30,0.90) 100%);
z-index: 1;
}
.attr-card__body { z-index: 2; }
.attr-card__body {
position: absolute; inset: auto 0 0 0;
padding: 30px 28px;
color: var(--cream);
z-index: 2;
}
.attr-card__cat {
display: inline-block;
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-soft);
margin-bottom: 10px;
}
.attr-card__title {
font-family: var(--ff-serif);
font-size: 1.625rem;
font-weight: 500;
color: var(--white-warm);
margin: 0 0 6px;
line-height: 1.2;
}
.attr-card__desc {
font-size: 0.875rem;
color: rgba(255,253,248,0.82);
margin: 0;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height var(--t-med) var(--ease-out),
opacity var(--t-med) var(--ease-out),
margin var(--t-med) var(--ease-out);
}
.attr-card:hover .attr-card__desc {
max-height: 80px;
opacity: 1;
margin-top: 8px;
}
.attractions__footer { text-align: center; margin-top: var(--space-5); }
@media (max-width: 980px) {
.attractions__grid, .attractions__grid--featured { grid-template-columns: repeat(2, 1fr); }
.attr-card--wide { grid-row: auto; }
}
@media (max-width: 560px) {
.attractions__grid, .attractions__grid--featured { grid-template-columns: 1fr; }
}
/* ============================ RATES TEASER ============================ */
.rates-teaser {
padding: var(--space-8) 0;
background: var(--white-warm);
}
.rates-teaser__inner {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-7);
align-items: center;
background: var(--cream-soft);
border-radius: var(--r-xl);
padding: var(--space-6) var(--space-7);
border: 1px solid var(--sand-deep);
box-shadow: var(--shadow-sm);
}
.rates-teaser__heading {
font-size: var(--type-display-l);
margin-bottom: var(--space-3);
}
.rates-teaser__lead {
color: var(--body);
font-size: var(--type-subhead);
margin-bottom: var(--space-4);
}
.rates-teaser__points {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 12px;
}
.rates-teaser__points li {
display: flex; align-items: flex-start; gap: 12px;
font-size: 0.9375rem;
color: var(--body);
}
.rates-teaser__points li::before {
content: "";
flex: none;
width: 18px; height: 18px;
margin-top: 3px;
border-radius: 50%;
background: var(--gold);
position: relative;
}
.rates-teaser__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--space-4); }
.rates-teaser__side {
background: var(--forest-deep);
color: var(--cream);
border-radius: var(--r-lg);
padding: 40px 38px;
text-align: center;
}
.rates-teaser__side-eyebrow {
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-soft);
display: block;
margin-bottom: 14px;
}
.rates-teaser__side-num {
font-family: var(--ff-serif);
font-size: 2.5rem;
font-weight: 300;
color: var(--white-warm);
margin-bottom: 14px;
letter-spacing: -0.01em;
}
.rates-teaser__side-text {
font-size: 0.9375rem;
color: rgba(255,253,248,0.78);
margin-bottom: var(--space-3);
}
@media (max-width: 900px) {
.rates-teaser__inner { grid-template-columns: 1fr; padding: var(--space-5) var(--space-4); gap: var(--space-5); }
}
/* ============================ MAP ============================ */
.map-section {
padding: var(--space-8) 0;
background: var(--cream-soft);
}
.map-section__inner {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--space-5);
align-items: stretch;
}
.map-section__copy {
background: var(--white-warm);
border-radius: var(--r-lg);
padding: 50px 44px;
border: 1px solid var(--line-soft);
display: flex; flex-direction: column; justify-content: center;
}
.map-section__heading { font-size: var(--type-display-m); margin-bottom: var(--space-3); }
.map-section__addr {
font-family: var(--ff-serif);
font-size: 1.125rem;
color: var(--ink);
margin-bottom: var(--space-3);
line-height: 1.5;
}
.map-section__phone {
display: inline-block;
font-size: 1.0625rem;
color: var(--forest-deep);
margin-bottom: var(--space-3);
border-bottom: 1px solid var(--gold);
padding-bottom: 4px;
}
.map-section__embed {
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
background: var(--cream-warm);
min-height: 460px;
border: 1px solid var(--line-soft);
}
.map-section__embed iframe { display: block; width: 100%; height: 100%; min-height: 460px; border: 0; }
@media (max-width: 900px) {
.map-section__inner { grid-template-columns: 1fr; }
.map-section__copy { padding: 36px 28px; }
}
/* ============================ GALLERY ============================ */
.gallery {
padding: var(--space-8) 0;
background: var(--cream);
}
.gallery__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 130px;
gap: 12px;
}
.gallery__tile {
overflow: hidden;
border-radius: var(--r-md);
position: relative;
cursor: pointer;
}
.gallery__tile img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--t-slow) var(--ease-out);
}
.gallery__tile:hover img { transform: scale(1.06); }
.gallery__tile::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(15,42,30,0.30) 100%);
opacity: 0;
transition: opacity var(--t-med) var(--ease-out);
}
.gallery__tile:hover::after { opacity: 1; }
/* layout - masonry-ish using grid spans */
.gallery__tile--xl { grid-column: span 3; grid-row: span 3; }
.gallery__tile--l { grid-column: span 3; grid-row: span 2; }
.gallery__tile--m { grid-column: span 2; grid-row: span 2; }
.gallery__tile--s { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) {
.gallery__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 110px; }
.gallery__tile--xl { grid-column: span 4; grid-row: span 3; }
.gallery__tile--l { grid-column: span 2; grid-row: span 2; }
.gallery__tile--m, .gallery__tile--s { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 560px) {
.gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
.gallery__tile { grid-column: span 1; grid-row: span 2; }
.gallery__tile--xl { grid-column: span 2; grid-row: span 2; }
}
/* ============================ TESTIMONIALS ============================ */
.testimonials {
padding: var(--space-8) 0;
background: var(--forest-deep);
color: var(--cream);
position: relative;
overflow: hidden;
}
.testimonials::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(circle at 80% 20%, rgba(184,147,85,0.18) 0%, transparent 45%),
radial-gradient(circle at 10% 80%, rgba(184,147,85,0.08) 0%, transparent 45%);
pointer-events: none;
}
.testimonials .section-head { position: relative; }
.testimonials .section-head__title { color: var(--white-warm); font-weight: 300; }
.testimonials .eyebrow { color: var(--gold-soft); }
.testimonials .eyebrow::before { background: var(--gold-soft); }
.testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
position: relative;
}
.testimonial {
background: rgba(255,253,248,0.04);
border: 1px solid rgba(184,147,85,0.22);
border-radius: var(--r-lg);
padding: 36px 32px;
display: flex; flex-direction: column;
min-height: 320px;
}
.testimonial__quote {
font-family: var(--ff-serif);
font-style: italic;
font-weight: 300;
font-size: 1.25rem;
line-height: 1.55;
color: var(--white-warm);
margin-bottom: var(--space-3);
flex: 1;
}
.testimonial__quote::before {
content: """;
font-family: var(--ff-serif);
font-size: 4rem;
line-height: 1;
color: var(--gold-soft);
display: block;
height: 30px;
margin-bottom: 8px;
}
.testimonial__stars {
display: inline-flex; gap: 4px;
color: var(--gold);
margin-bottom: 12px;
}
.testimonial__stars svg { width: 16px; height: 16px; }
.testimonial__attr {
font-size: 0.875rem;
letter-spacing: 0.04em;
color: rgba(255,253,248,0.78);
font-weight: 500;
}
.testimonials__cta {
text-align: center; margin-top: var(--space-5); position: relative;
}
@media (max-width: 900px) {
.testimonials__grid { grid-template-columns: 1fr; }
}
/* ============================ FAQ ============================ */
.faq {
padding: var(--space-8) 0;
background: var(--cream-soft);
}
.faq__list {
max-width: 880px;
margin: 0 auto;
}
.faq__item {
border-top: 1px solid var(--line);
padding: 8px 0;
}
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: 26px 0;
font-family: var(--ff-serif);
font-size: 1.25rem;
font-weight: 500;
color: var(--ink);
text-align: left;
cursor: pointer;
}
.faq__btn-icon {
flex: none;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--cream-warm);
display: grid; place-items: center;
transition: background var(--t-fast) var(--ease-out),
transform var(--t-fast) var(--ease-out);
color: var(--forest-deep);
}
.faq__btn-icon::before, .faq__btn-icon::after {
content: "";
position: absolute;
width: 12px; height: 1.5px;
background: currentColor;
border-radius: 2px;
transition: transform var(--t-fast) var(--ease-out);
}
.faq__btn-icon { position: relative; }
.faq__btn-icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__btn-icon { background: var(--forest-deep); color: var(--cream); }
.faq__item.is-open .faq__btn-icon::after { transform: rotate(0); }
.faq__body {
max-height: 0;
overflow: hidden;
transition: max-height var(--t-med) var(--ease-out);
}
.faq__item.is-open .faq__body { max-height: 280px; }
.faq__body-inner {
padding-bottom: 26px;
color: var(--body);
font-size: 1rem;
line-height: 1.6;
max-width: 64ch;
}
/* ============================ GUEST LOGIN BAND ============================ */
.guest-login {
padding: var(--space-7) 0;
background: var(--cream-warm);
}
.guest-login__inner {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--space-6);
align-items: center;
background: var(--white-warm);
border-radius: var(--r-xl);
padding: 56px 60px;
border: 1px solid var(--sand-deep);
box-shadow: var(--shadow-md);
}
.guest-login__heading {
font-size: var(--type-display-m);
margin-bottom: var(--space-2);
}
.guest-login__lead { color: var(--body); margin-bottom: 4px; }
.guest-login__hint {
font-size: 0.875rem;
color: var(--muted);
font-style: italic;
}
.guest-login__cta {
display: flex; flex-direction: column;
align-items: stretch; gap: 12px;
}
.guest-login__cta .btn { width: 100%; }
@media (max-width: 720px) {
.guest-login__inner { grid-template-columns: 1fr; padding: 36px 28px; }
}
/* ============================ CONTACT ============================ */
.contact {
padding: var(--space-8) 0;
background: var(--forest-deep);
color: var(--cream);
}
.contact__inner {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-6);
align-items: center;
}
.contact__heading {
color: var(--white-warm);
font-size: var(--type-display-l);
margin-bottom: var(--space-3);
font-weight: 300;
}
.contact__heading .script { color: var(--gold-soft); }
.contact__lead {
color: rgba(255,253,248,0.82);
font-size: var(--type-subhead);
margin-bottom: var(--space-4);
max-width: 50ch;
}
.contact__rows {
display: grid; gap: 18px;
}
.contact__row {
display: grid;
grid-template-columns: 36px 1fr;
gap: 18px;
align-items: start;
}
.contact__row-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(184,147,85,0.12);
color: var(--gold-soft);
display: grid; place-items: center;
}
.contact__row-label {
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-soft);
margin-bottom: 4px;
display: block;
}
.contact__row-val {
color: var(--cream);
font-family: var(--ff-serif);
font-size: 1.15rem;
line-height: 1.45;
}
.contact__row-val a:hover { color: var(--gold-soft); }
.contact__cta-row {
margin-top: var(--space-5);
display: flex; flex-wrap: wrap; gap: 14px;
}
@media (max-width: 900px) {
.contact__inner { grid-template-columns: 1fr; }
}
/* ============================ FOOTER ============================ */
/* ONE dramatic-clouds image, spanning the closing CTA + the footer below it. cream-soft base
shows where the image fades at the top/bottom. */
.closing-bg {
position: relative;
isolation: isolate;
background: var(--cream-soft);
}
/* The shared image lives on its OWN layer BELOW the overlay (z-index 0 < the ::after overlay
at z-index 1) so it can fade at the top and bottom WITHOUT touching the overlay above it. */
.closing-bg::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: url('/images/home/dramatic-clouds-pond-course.jpg') center / cover no-repeat;
-webkit-mask-image: linear-gradient(180deg,
rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 8%, rgba(0,0,0,0.55) 16%, rgba(0,0,0,0.9) 22%, #000 27%,
#000 80%, rgba(0,0,0,0.85) 86%, rgba(0,0,0,0.4) 93%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(180deg,
rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 8%, rgba(0,0,0,0.55) 16%, rgba(0,0,0,0.9) 22%, #000 27%,
#000 80%, rgba(0,0,0,0.85) 86%, rgba(0,0,0,0.4) 93%, rgba(0,0,0,0) 100%);
pointer-events: none;
}
/* A SINGLE overlay for the whole closing block (CTA + footer) — replaces the separate CTA
and footer overlays. Layer 1 (90deg) is the rotated tint: dark on the LEFT of the
"Your site" CTA, going transparent toward the right so the clouds show through. Layer 2
(180deg) stays transparent over the CTA and darkens downward so the footer text is
legible. The mask dissolves the whole overlay out at the very top so it blends into the
section above with no hard edge. z-index 1: above the image, below the CTA + footer (z-index 2). */
.closing-bg::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
/* large, very soft glow anchored at the LEFT edge behind the copy. Lower peak opacity
(more transparent), centre pushed UP behind the copy, and a very tall/wide spread so
the dark has NO visible boundary arc — it just dissolves gently in every direction. */
radial-gradient(150% 200% at 0% 22%,
rgba(15,42,30,0.6) 0%, rgba(15,42,30,0.53) 13%, rgba(15,42,30,0.45) 25%, rgba(15,42,30,0.37) 37%,
rgba(15,42,30,0.29) 49%, rgba(15,42,30,0.21) 60%, rgba(15,42,30,0.13) 71%, rgba(15,42,30,0.07) 82%,
rgba(15,42,30,0.03) 91%, rgba(15,42,30,0) 100%),
/* vertical darkening so the footer below stays legible across the full width */
linear-gradient(180deg,
rgba(15,42,30,0) 0%, rgba(15,42,30,0) 42%, rgba(15,42,30,0.42) 52%, rgba(15,42,30,0.8) 62%,
rgba(15,42,30,0.92) 72%, rgba(15,42,30,0.96) 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.1) 6%, rgba(0,0,0,0.3) 12%, rgba(0,0,0,0.55) 18%, rgba(0,0,0,0.8) 25%, #000 33%, #000 100%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.1) 6%, rgba(0,0,0,0.3) 12%, rgba(0,0,0,0.55) 18%, rgba(0,0,0,0.8) 25%, #000 33%, #000 100%);
pointer-events: none;
}
/* Footer-only variant: when the closing block wraps ONLY the footer (no CTA above it —
e.g. utility / legal pages), darken the overlay from the very top so the footer copy
stays legible across its full height. The default overlay keeps the top ~42%
transparent on purpose (that region is the CTA's dark backdrop on marketing pages). */
.closing-bg.closing-bg--solo::after {
background: linear-gradient(180deg,
rgba(15,42,30,0.82) 0%, rgba(15,42,30,0.88) 40%, rgba(15,42,30,0.94) 72%, rgba(15,42,30,0.97) 100%);
-webkit-mask-image: none;
mask-image: none;
}
/* ===== Closing CTA band (01B — Hero CTA, left, script accent) =====
Shared across every page via _partials/closing.php (moved here from home-sections.css
so it is no longer home-only). Transparent + above the shared .closing-bg overlay
(z-index 2) so the single unified overlay (.closing-bg::after) shows through. */
.hero-cta { position: relative; display: flex; overflow: hidden; background: transparent; z-index: 2; }
/* cream-soft veil coming DOWN FROM THE TOP across the whole section (both the top-left and
top-right), so the clouds dissolve into the cream section above. Layer 1 deepens the
top-right corner; layer 2 is the full-width top fade that also covers the top-left. Both
fade out just above the heading so the left copy keeps its dark backdrop. Sits above the
image but below the copy (z-index 1 < copy z-index 2). */
.hero-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
/* top-right corner glow — taller so the cream reaches further DOWN on the right */
radial-gradient(95% 125% at 100% 0%,
var(--cream-soft) 0%, rgba(251,247,239,0.58) 26%, rgba(251,247,239,0.24) 48%, rgba(251,247,239,0.07) 66%, rgba(251,247,239,0) 80%),
/* mirrored top-LEFT corner glow — an angled cream fade over the top-left like the right,
confined above the copy so the left side blends smoothly into the cream too */
radial-gradient(64% 34% at 0% 0%,
var(--cream-soft) 0%, rgba(251,247,239,0.55) 30%, rgba(251,247,239,0.2) 56%, rgba(251,247,239,0.06) 74%, rgba(251,247,239,0) 88%),
/* near-vertical top fade (slight right tilt) that brings the cream DOWN across the top.
Fades out just above the heading so the left copy stays readable. */
linear-gradient(188deg,
var(--cream-soft) 0%, rgba(251,247,239,0.5) 9%, rgba(251,247,239,0.24) 18%, rgba(251,247,239,0.08) 24%, rgba(251,247,239,0) 30%);
pointer-events: none;
}
.hero-cta__inner { position: relative; z-index: 2; width: 100%; max-width: 1340px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) clamp(24px, 4vw, 64px); display: flex; flex-direction: column; }
.hero-cta--left { align-items: center; }
.hero-cta--left .hero-cta__inner { align-items: flex-start; text-align: left; justify-content: center; }
.hero-cta .cs-eyebrow { display: inline-block; font-family: var(--ff-sans); font-size: 0.6875rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 600; color: #D9B665; margin-bottom: 16px; }
.hero-cta .cs-heading { font-family: var(--ff-serif); font-weight: 400; font-size: clamp(2.4rem, 3.4vw + 1rem, 4rem); line-height: 1.1; color: #FFFDF8; margin: 0 0 18px; max-width: 16ch; }
.hero-cta .cs-heading .scr { font-family: 'Mrs Saint Delafield', cursive; color: #D9B665; font-size: 1.35em; line-height: 0.5; }
.hero-cta .cs-lead { font-family: var(--ff-sans); font-size: 1.0625rem; line-height: 1.7; color: rgba(255,253,248,0.88); max-width: 46ch; margin: 0 0 28px; }
/* soft halo so the copy stays legible no matter how light/smooth the dark overlay is —
this lets the overlay fade very gently without washing out the eyebrow/heading */
.hero-cta .cs-eyebrow { text-shadow: 0 1px 2px rgba(11, 28, 20, 0.92), 0 0 12px rgba(11, 28, 20, 0.75); }
.hero-cta .cs-heading,
.hero-cta .cs-lead { text-shadow: 0 2px 22px rgba(11, 28, 20, 0.5), 0 1px 4px rgba(11, 28, 20, 0.35); }
@media (max-width: 600px) { .hero-cta .cs-heading { font-size: clamp(2rem, 9vw, 2.6rem); } }
.site-footer {
position: relative;
z-index: 2; /* above the shared .closing-bg overlay */
background: var(--forest-deep); /* solid dark base for standalone footers (inner pages) */
color: rgba(255,253,248,0.7);
padding: var(--space-7) 0 var(--space-4);
}
/* On the home page the footer sits inside .closing-bg, which supplies the shared
clouds image + overlay — keep it transparent there so that image shows through. */
.closing-bg .site-footer { background: transparent; }
.site-footer > .container { position: relative; z-index: 1; }
.site-footer__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: var(--space-5);
margin-bottom: var(--space-5);
}
.site-footer__brand { font-family: var(--ff-serif); }
.site-footer__brand-name {
display: block;
font-size: 1.5rem;
color: var(--white-warm);
letter-spacing: 0.01em;
margin-bottom: 16px;
font-weight: 400;
}
.site-footer__brand-desc {
font-size: 0.9375rem;
line-height: 1.65;
margin-bottom: 20px;
max-width: 38ch;
}
.site-footer__social {
display: flex; gap: 10px;
}
.site-footer__social a {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid rgba(184,147,85,0.4);
color: var(--gold-soft);
display: grid; place-items: center;
transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.site-footer__social a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.site-footer__title {
font-family: var(--ff-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-soft);
margin-bottom: 18px;
display: block;
font-weight: 600;
}
.site-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.site-footer__links a {
font-size: 0.9375rem;
color: rgba(255,253,248,0.72);
transition: color var(--t-fast) var(--ease-out);
}
.site-footer__links a:hover { color: var(--gold-soft); }
.site-footer__contact {
display: grid; gap: 14px;
font-size: 0.9375rem;
line-height: 1.5;
color: rgba(255,253,248,0.72);
}
.site-footer__contact a:hover { color: var(--gold-soft); }
/* Brand block in footer */
.site-footer__brand-link {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
color: var(--white-warm);
}
.site-footer__brand-img {
width: 72px; height: 72px;
border-radius: 50%;
background: var(--cream);
padding: 4px;
box-shadow: 0 8px 22px rgba(0,0,0,0.3);
object-fit: contain;
}
.site-footer__brand-text {
display: grid;
font-family: var(--ff-serif);
line-height: 1.1;
}
.site-footer__brand-text .site-footer__brand-name {
font-size: 1.45rem;
font-weight: 400;
color: var(--white-warm);
margin-bottom: 4px;
}
.site-footer__brand-text .site-footer__brand-tag {
font-family: var(--ff-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-soft);
font-weight: 600;
}
.site-footer__guest-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0.65em 1.2em;
border-radius: var(--r-pill);
border: 1px solid rgba(184,147,85,0.5);
background: rgba(184,147,85,0.06);
color: var(--cream);
font-family: var(--ff-sans);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
margin: 0 0 22px;
transition: background var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out);
}
.site-footer__guest-btn:hover {
background: var(--gold);
color: var(--ink);
border-color: var(--gold);
}
/* Contact rows in footer */
.site-footer__contact { display: grid; gap: 16px; }
.site-footer__contact-row { display: grid; gap: 4px; font-size: 0.9375rem; line-height: 1.5; }
.site-footer__contact-label {
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-soft);
font-weight: 600;
}
/* Partners strip */
.site-footer__partners {
border-top: 1px solid rgba(184,147,85,0.18);
margin-top: var(--space-5);
padding-top: var(--space-4);
text-align: center;
}
.site-footer__partners-label {
display: inline-block;
font-size: 0.6875rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-soft);
font-weight: 600;
margin-bottom: 22px;
}
.site-footer__partners-row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 28px;
align-items: center;
justify-items: center;
padding: 14px 0;
}
.site-footer__partners-row img {
height: 50px;
max-width: 140px;
width: auto;
object-fit: contain;
background: var(--cream);
border-radius: 6px;
padding: 8px 12px;
opacity: 0.96;
transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.site-footer__partners-row img:hover { opacity: 1; transform: translateY(-2px); }
/* Powered-by strip */
.site-footer__poweredby {
border-top: 1px solid rgba(184,147,85,0.18);
margin-top: var(--space-4);
padding: var(--space-4) 0 var(--space-3);
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-4) var(--space-5);
align-items: center;
}
.site-footer__powered-cell {
display: flex; align-items: center; gap: 22px;
}
.site-footer__powered-cell--gs { justify-content: center; }
.site-footer__powered-cell--cards { justify-content: flex-end; }
.site-footer__powered-label {
font-size: 0.6875rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-soft);
font-weight: 600;
}
.site-footer__powered-logo {
display: inline-block;
transition: transform var(--t-fast) var(--ease-out);
}
.site-footer__powered-logo:hover { transform: translateY(-2px); }
.site-footer__powered-logo img { height: 46px; width: auto; display: block; }
.site-footer__cards {
display: inline-flex;
align-items: center;
gap: 16px;
}
.site-footer__cards .pay { height: 30px; width: auto; display: block; }
/* ---- footer Good Sam certified badge (shared across every page) ---- */
.site-footer__gs {
display: inline-flex; align-items: center; gap: 12px;
text-decoration: none;
}
/* Larger so the white rim renders cleanly (a small shield jagged the ring), with
a stacked white outline to thicken that border and a soft dark shadow to lift
it off the footer. Green matches the verified-resort banner above (#235b39). */
.site-footer__gs .gs-shield {
width: 74px; height: auto; flex: 0 0 auto;
filter:
drop-shadow(0 0 1.1px #ffffff)
drop-shadow(0 0 1.1px #ffffff)
drop-shadow(0 6px 14px rgba(0, 0, 0, 0.30));
}
.site-footer__gs .gs-shield .cls-2 { fill: #235b39; }
.site-footer__gs .gs-shield .cls-1 { fill: #ffffff; }
.site-footer__gs-text { display: flex; flex-direction: column; line-height: 1.2; }
.site-footer__gs-text .gs-kicker {
font-family: var(--ff-sans);
font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(255,255,255,0.62);
}
.site-footer__gs-text .gs-name {
font-family: var(--ff-serif); font-size: 1.15rem; color: #fff;
}
.site-footer__gs-text .gs-sub {
font-family: var(--ff-sans);
font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(255,255,255,0.62);
}
@media (max-width: 900px) {
.site-footer__poweredby { grid-template-columns: 1fr; gap: 22px; justify-items: start; }
.site-footer__powered-cell--gs { justify-content: flex-start; }
.site-footer__powered-cell--cards { justify-content: flex-start; }
}
@media (max-width: 560px) {
.site-footer__partners-row { grid-template-columns: repeat(2, 1fr); }
.site-footer__partners-row img { height: 44px; }
}
.site-footer__bottom {
border-top: 1px solid rgba(184,147,85,0.18);
padding-top: 22px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
font-size: 0.8125rem;
color: rgba(255,253,248,0.55);
}
.site-footer__bottom a { color: rgba(255,253,248,0.78); }
.site-footer__bottom a:hover { color: var(--gold-soft); }
.site-footer__bottom-links { display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 900px) {
.site-footer__grid { grid-template-columns: 1fr 1fr; }
.site-footer__cta { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.site-footer__grid { grid-template-columns: 1fr; }
}
/* ============================ Sticky mobile CTA ============================ */
.sticky-cta {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 60;
background: rgba(255,253,248,0.98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 10px 14px;
border-top: 1px solid var(--line);
box-shadow: 0 -6px 20px rgba(23,58,42,0.10);
}
.sticky-cta__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
/* ============================ Reveal animation ============================ */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; }
.hero__media img { animation: none; }
}
/* ============================ Menu trigger (replaces desktop nav) ============================ */
.menu-trigger {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0.65em 1.1em;
border-radius: var(--r-pill);
font-family: var(--ff-sans);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cream);
border: 1px solid rgba(255,253,248,0.32);
background: transparent;
transition: background var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out);
}
.menu-trigger:hover {
background: rgba(255,253,248,0.10);
border-color: var(--gold-soft);
color: var(--gold-soft);
}
.menu-trigger__label { line-height: 1; }
.menu-trigger__icon {
position: relative;
width: 18px; height: 12px;
display: inline-block;
}
.menu-trigger__icon span {
position: absolute;
left: 0; right: 0;
height: 1.5px;
background: currentColor;
border-radius: 1px;
transition: transform var(--t-fast) var(--ease-out),
opacity var(--t-fast) var(--ease-out);
}
.menu-trigger__icon span:nth-child(1) { top: 0; }
.menu-trigger__icon span:nth-child(2) { top: 50%; transform: translateY(-50%); width: 75%; right: auto; }
.menu-trigger__icon span:nth-child(3) { bottom: 0; }
.site-header.is-scrolled .menu-trigger {
color: var(--ink);
border-color: rgba(35,35,35,0.22);
}
.site-header.is-scrolled .menu-trigger:hover {
background: rgba(23,58,42,0.06);
border-color: var(--forest-deep);
color: var(--forest-deep);
}
/* Hide the original mobile-only toggle and login element (legacy classes still in CSS) */
.site-header__toggle, .site-header__login { display: none !important; }
/* ============================ Full-page menu overlay ============================ */
.menu-overlay {
position: fixed;
inset: 0;
z-index: 95;
background: var(--forest-deep);
color: var(--cream);
opacity: 0;
pointer-events: none;
transition: opacity 0.45s var(--ease-out);
overflow-y: auto;
isolation: isolate;
}
.menu-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.menu-overlay__topo {
position: absolute; inset: 0;
z-index: -1;
background-image:
radial-gradient(circle at 90% 5%, rgba(184,147,85,0.16) 0%, transparent 50%),
radial-gradient(circle at 5% 95%, rgba(184,147,85,0.10) 0%, transparent 50%),
url("data:image/svg+xml;utf8,");
background-size: auto, auto, 1200px;
background-repeat: no-repeat, no-repeat, repeat;
pointer-events: none;
}
.menu-overlay__inner {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
padding: 22px 24px 22px;
gap: var(--space-4);
}
.menu-overlay__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.site-header__brand--menu { color: var(--cream); }
.menu-overlay__top-actions {
display: flex; align-items: center; gap: 16px;
}
.menu-close {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0.65em 0;
font-family: var(--ff-sans);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cream);
opacity: 0.85;
transition: opacity var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.menu-close:hover { opacity: 1; color: var(--gold-soft); }
.menu-close__x {
display: inline-grid; place-items: center;
width: 36px; height: 36px;
border: 1px solid rgba(184,147,85,0.4);
border-radius: 50%;
font-size: 1.25rem;
font-weight: 300;
line-height: 1;
transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.menu-close:hover .menu-close__x { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.menu-overlay__body {
display: grid;
grid-template-columns: minmax(280px, 1fr) 1.5fr;
gap: var(--space-6);
align-items: start;
padding-top: var(--space-3);
}
.menu-list ul {
list-style: none; padding: 0; margin: 0;
display: grid;
}
.menu-list ul a {
display: block;
position: relative;
padding: 13px 0 13px 52px;
font-family: var(--ff-serif);
font-size: clamp(1.5rem, 1.5vw + 0.7rem, 2.125rem);
font-weight: 300;
line-height: 1.1;
color: var(--cream);
border-bottom: 1px solid rgba(184,147,85,0.16);
letter-spacing: -0.01em;
transition: color var(--t-fast) var(--ease-out), padding var(--t-med) var(--ease-out);
}
.menu-list ul a::before {
content: counter(menu-item, decimal-leading-zero);
counter-increment: menu-item;
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
font-family: var(--ff-sans);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.22em;
color: var(--gold-soft);
opacity: 0.7;
}
.menu-list ul a::after {
content: "→";
display: inline-block;
margin-left: 16px;
font-family: var(--ff-sans);
font-size: 0.65em;
color: var(--gold-soft);
opacity: 0;
transform: translateX(-8px);
transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.menu-list ul a:hover {
color: var(--gold-soft);
padding-left: 66px;
}
.menu-list ul a:hover::after { opacity: 1; transform: translateX(0); }
.menu-list ul { counter-reset: menu-item; }
.menu-list li:last-child a { border-bottom: 0; }
.menu-list__sep {
height: 1px;
background: rgba(184,147,85,0.2);
margin: 18px 0 16px;
}
.menu-list__login {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 22px;
border-radius: var(--r-pill);
border: 1px solid rgba(184,147,85,0.4);
background: rgba(184,147,85,0.06);
color: var(--cream);
font-family: var(--ff-sans);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
transition: background var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out);
}
.menu-list__login:hover {
background: var(--gold);
color: var(--ink);
border-color: var(--gold);
}
.menu-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-self: stretch;
}
.menu-card {
position: relative;
display: block;
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 3 / 5;
background: var(--pine-deeper);
isolation: isolate;
transition: transform var(--t-med) var(--ease-out),
box-shadow var(--t-med) var(--ease-out);
}
.menu-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 50px rgba(0,0,0,0.4);
}
.menu-card__media {
position: absolute; inset: 0;
z-index: 0;
}
.menu-card__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--t-slow) var(--ease-out);
}
.menu-card:hover .menu-card__media img { transform: scale(1.08); }
.menu-card__veil {
position: absolute; inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(15,42,30,0.15) 0%, rgba(15,42,30,0.30) 45%, rgba(15,42,30,0.85) 100%);
}
.menu-card__body {
position: absolute; inset: auto 0 0 0;
z-index: 2;
padding: 26px 24px;
color: var(--cream);
}
.menu-card__eyebrow {
display: inline-block;
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-soft);
margin-bottom: 6px;
}
.menu-card__title {
font-family: var(--ff-serif);
font-size: 1.5rem;
font-weight: 500;
color: var(--white-warm);
line-height: 1.15;
margin: 0;
}
.menu-overlay__foot {
border-top: 1px solid rgba(184,147,85,0.2);
padding-top: var(--space-3);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.menu-foot__cell {
display: flex;
align-items: center;
gap: 16px;
color: var(--cream);
transition: color var(--t-fast) var(--ease-out);
}
.menu-foot__cell:hover { color: var(--gold-soft); }
.menu-foot__icon {
flex: none;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(184,147,85,0.10);
border: 1px solid rgba(184,147,85,0.32);
display: grid; place-items: center;
color: var(--gold-soft);
}
.menu-foot__cell-inner { display: grid; }
.menu-foot__label {
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-soft);
margin-bottom: 4px;
}
.menu-foot__val {
font-family: var(--ff-serif);
font-size: 1.0625rem;
color: var(--cream);
line-height: 1.25;
}
/* Lock body scroll while open */
body.menu-open { overflow: hidden; }
@media (max-width: 900px) {
.menu-overlay__body { grid-template-columns: 1fr; }
.menu-cards { grid-template-columns: repeat(3, 1fr); }
.menu-card { aspect-ratio: 3 / 4; }
}
@media (max-width: 720px) {
.menu-overlay__inner { padding: 20px 18px 24px; gap: var(--space-4); }
.menu-cards { grid-template-columns: 1fr 1fr; }
.menu-cards .menu-card:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.menu-overlay__foot { grid-template-columns: 1fr; gap: 16px; }
.menu-list ul a { padding: 14px 0 14px 48px; font-size: 1.5rem; }
.menu-list ul a::before { top: 22px; }
}
/* Sticky CTA for mobile remains useful on narrow screens */
@media (max-width: 720px) {
.sticky-cta { display: block; }
body { padding-bottom: 72px; }
.site-header__book { display: none; }
}
/* ============================ Tiny utility ============================ */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ============================================================
Attractions — "What's Nearby" tabbed concierge directory
(Concept 1 from section-samples-nearby). Scoped under .nbx/.nb1.
Cards are always visible; the header reveals via the global
[data-reveal] / .is-visible mechanism (js/site.js). Panels fade
via the nb1fade keyframe on tab switch.
============================================================ */
.nbx {
--gold:#B89355; --gold-soft:#C9A87A; --gold-deep:#997135; --gold-lite:#D9B665;
--cream:#F7F1E7; --cream-soft:#FBF7EF; --cream-warm:#F2EADA; --sand:#E8D9C3;
--warmwhite:#FFFDF8; --forest:#173A2A; --forest-2:#0F2A1E; --pine:#24543D;
--ink:#1A2218; --body:#4A4A42; --muted:#7A7A72;
--line:rgba(35,35,35,0.10); --line-soft:rgba(35,35,35,0.06);
--ff-serif:'Gilda Display','Fraunces',Georgia,serif;
--ff-sans:'Work Sans','Inter',system-ui,sans-serif;
--ease:cubic-bezier(0.16,1,0.3,1);
}
.nb1 { background: var(--cream-soft); padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.nb1__head { text-align:center; max-width:680px; margin:0 auto clamp(2rem,4vw,3rem); }
.nb1__title { font-family:var(--ff-serif); font-weight:400; color:var(--ink); font-size:clamp(2.1rem,3.6vw,3.1rem); line-height:1.08; letter-spacing:-0.012em; margin:0 0 1rem; }
.nb1__lead { color:var(--body); font-size:1.05rem; line-height:1.7; max-width:58ch; margin:0 auto; }
.nb1__tabs { display:inline-flex; gap:0.35rem; margin:0 auto clamp(2rem,4vw,3rem); padding:0.4rem; border-radius:999px; background:var(--cream-warm); border:1px solid var(--line-soft); position:relative; left:50%; transform:translateX(-50%); }
.nb1__tab { appearance:none; border:0; background:transparent; font-family:var(--ff-sans); font-size:0.82rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); padding:0.7em 1.4em; border-radius:999px; cursor:pointer; transition:color 240ms var(--ease), background 240ms var(--ease), box-shadow 240ms var(--ease); }
.nb1__tab:hover { color:var(--gold-deep); }
.nb1__tab.is-active { color:var(--ink); background:var(--warmwhite); box-shadow:0 6px 16px rgba(23,58,42,0.10); }
.nb1__panel { display:none; }
.nb1__panel.is-active { display:block; animation:nb1fade 520ms var(--ease); }
@keyframes nb1fade { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.nb1__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.nb1__card { background:var(--warmwhite); border:1px solid var(--line-soft); border-radius:18px; overflow:hidden; box-shadow:0 12px 32px rgba(23,58,42,0.07); transition:box-shadow 380ms var(--ease), border-color 380ms var(--ease), transform 380ms var(--ease); display:flex; flex-direction:column; }
.nb1__card:hover { box-shadow:0 24px 54px rgba(23,58,42,0.16); border-color:rgba(184,147,85,0.4); transform:translateY(-3px); }
.nb1__media { aspect-ratio:16/10; overflow:hidden; }
.nb1__media img { width:100%; height:100%; object-fit:cover; transition:transform 680ms var(--ease); }
.nb1__card:hover .nb1__media img { transform:scale(1.05); }
.nb1__body { padding:1.35rem 1.4rem 1.6rem; display:flex; flex-direction:column; gap:0.45rem; flex:1; }
.nb1__row { display:flex; align-items:baseline; justify-content:space-between; gap:0.6rem; }
.nb1__cat { font-size:0.64rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color:var(--gold-deep); }
.nb1__dist { font-size:0.72rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.nb1__body h3 { font-family:var(--ff-serif); font-weight:400; color:var(--ink); font-size:1.28rem; line-height:1.14; margin:0.1rem 0 0; }
.nb1__when { font-size:0.78rem; font-weight:600; color:var(--gold-deep); margin:0; }
.nb1__body p { margin:0; color:var(--body); font-size:0.92rem; line-height:1.55; }
@media (max-width:980px) { .nb1__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .nb1__grid { grid-template-columns:1fr; } .nb1__tabs { width:100%; justify-content:center; } }
/* ============================ Resort Story (editorial numerals over a photo) ============================ */
/* The "Our Story" opener on resort-details: oversized numerals + headline set ON a
course photo, lifted by a scrim so the content pops. Scoped under .coursestory.
(Productionized from the section-samples-story-8 "Editorial Numerals" study.) */
.coursestory { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.coursestory__stage {
position: relative; overflow: hidden; isolation: isolate;
border-radius: var(--r-lg);
box-shadow: 0 30px 70px rgba(23,58,42,0.20);
min-height: clamp(580px, 74vh, 780px);
display: flex; flex-direction: column;
padding: clamp(1.8rem, 4vw, 3.2rem);
}
.coursestory__img {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 1200ms var(--ease-out);
}
.coursestory__stage:hover .coursestory__img { transform: scale(1.045); }
.coursestory__scrim {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg,
rgba(11,28,20,0.64) 0%, rgba(11,28,20,0.26) 28%,
rgba(11,28,20,0.30) 58%, rgba(11,28,20,0.72) 100%);
}
.coursestory__head { position: relative; z-index: 2; }
.coursestory__eyebrow {
display: inline-block; font-family: var(--ff-sans);
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
color: #D9B665; margin: 0 0 0.9rem; text-shadow: 0 1px 10px rgba(11,28,20,0.7);
}
.coursestory__title {
font-family: var(--ff-serif); font-weight: 400; color: var(--white-warm);
font-size: clamp(2rem, 3.2vw + 0.6rem, 3.2rem); line-height: 1.08; letter-spacing: -0.012em;
margin: 0; text-shadow: 0 2px 26px rgba(11,28,20,0.6), 0 1px 4px rgba(11,28,20,0.45);
}
.coursestory__title .script {
font-family: 'Mrs Saint Delafield', cursive; font-style: normal; font-weight: 400;
color: #D9B665; font-size: 1.4em; line-height: 0.5; vertical-align: -0.08em;
}
.coursestory__grid {
position: relative; z-index: 2; margin-top: auto;
display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem);
}
.coursestory__num { margin: 0; }
.coursestory__big {
display: block; font-family: var(--ff-serif); color: var(--white-warm);
font-size: clamp(3.2rem, 6.5vw, 6rem); line-height: 0.92; letter-spacing: -0.04em;
font-variant-numeric: tabular-nums; text-shadow: 0 6px 34px rgba(11,28,20,0.65);
}
.coursestory__num figcaption {
margin-top: 0.55rem; padding-top: 0.6rem; max-width: 19ch;
font-family: var(--ff-sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(255,253,248,0.86); border-top: 1px solid rgba(217,182,101,0.55);
}
.coursestory__foot {
position: relative; z-index: 2; margin-top: clamp(1.6rem, 3vw, 2.4rem);
display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap;
}
.coursestory__note {
margin: 0; color: rgba(255,253,248,0.8); font-size: 0.92rem; line-height: 1.5; max-width: 46ch;
text-shadow: 0 1px 10px rgba(11,28,20,0.5);
}
@media (max-width: 760px) {
.coursestory__stage { min-height: 0; padding-top: 2.4rem; }
.coursestory__grid { grid-template-columns: 1fr 1fr; }
.coursestory__big { font-size: clamp(2.6rem, 13vw, 4.2rem); }
.coursestory__foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.coursestory__img { transition: none; }
.coursestory__stage:hover .coursestory__img { transform: none; }
}
/* Attractions category grid: 4-up on desktop for dense categories (4+ items),
collapsing responsively on smaller screens. Replaces the old inline
grid-template-columns that overrode the responsive rules and caused
horizontal overflow on mobile. */
.attractions__grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .attractions__grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .attractions__grid--4 { grid-template-columns: 1fr; } }