/* ============================================================
Xudumela — Prototype stylesheet (mobile-first)
Brand: Marcellus + Jost on khaki / olive / warm-black
============================================================ */
:root {
--primary: #b99d75;
--primary-deep: #ab916c;
--primary-soft: rgba(185, 157, 117, 0.18);
--secondary: #53624e;
--secondary-deep: #3f4e3a;
--paper: #f4ece1;
--paper-soft: #efe6d9;
--paper-dark: #ede6dc;
--bone: #f8f5f1;
--content: #2c2e2a;
--text-dark: #14110d;
--bg-dark: #0d0c08;
--bg-deep: #07060a;
--text-light: #faf6ee;
--text-mute: #a89c84;
--rule: rgba(255, 246, 225, 0.16);
--rule-dark: rgba(20, 17, 13, 0.12);
--font-display: 'Marcellus', 'Cormorant Garamond', 'Times New Roman', serif;
--font-body: 'Jost', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--gutter: clamp(1.25rem, 3vw, 3rem);
--section: clamp(5rem, 10vw, 9rem);
--bezier: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--bg-dark);
color: var(--text-light);
font-size: 17px;
line-height: 1.55;
font-weight: 400;
overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--primary); color: var(--bg-dark); }
/* ===== Type system ============================================== */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
.eyebrow {
font-family: var(--font-body); font-size: 11px; font-weight: 500;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--primary);
display: inline-flex; align-items: center; gap: 0.6rem;
}
.eyebrow::before {
content: ""; width: 28px; height: 1px; background: var(--primary); display: inline-block;
}
.eyebrow.no-rule::before { display: none; }
.eyebrow.center::before { background: var(--text-mute); }
/* On warm/light sections the gold eyebrow + accent washed out over the contours.
Darken to olive so the labels and accent words stay legible. */
.bg-paper .eyebrow, .bg-paper-soft .eyebrow, .bg-bone .eyebrow { color: var(--secondary); }
.bg-paper .eyebrow::before, .bg-paper-soft .eyebrow::before, .bg-bone .eyebrow::before { background: var(--secondary); }
.bg-paper .text-primary, .bg-paper-soft .text-primary, .bg-bone .text-primary { color: var(--secondary); }
.display-xl {
font-family: var(--font-display);
font-size: clamp(3.5rem, 11vw, 11rem);
line-height: 0.94;
letter-spacing: -0.03em;
font-weight: 400;
}
.display-lg {
font-family: var(--font-display);
font-size: clamp(2.6rem, 7.5vw, 5.4rem);
line-height: 1.02;
letter-spacing: -0.022em;
}
.display-md {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.6rem);
line-height: 1.05;
}
.display-sm {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.2vw, 2.2rem);
line-height: 1.15;
}
.coords {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-mute);
}
.coords strong { color: var(--text-light); font-weight: 500; }
.lede {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2vw, 1.9rem);
line-height: 1.32;
color: var(--text-light);
letter-spacing: -0.005em;
}
.brochure {
font-family: var(--font-body);
font-size: 1.02rem;
line-height: 1.72;
color: var(--text-light);
max-width: 56ch;
}
.brochure.paper { color: var(--content); }
.brochure p + p { margin-top: 1.1em; }
.brochure .dropcap::first-letter {
font-family: var(--font-display);
font-size: 4.4em;
float: left;
line-height: 0.82;
padding: 0.08em 0.12em 0 0;
color: var(--primary);
}
/* ===== Layout primitives ======================================== */
.container { width: min(1400px, 100% - calc(var(--gutter) * 2)); margin-inline: auto; }
.container-tight { width: min(960px, 100% - calc(var(--gutter) * 2)); margin-inline: auto; }
.container-narrow { width: min(680px, 100% - calc(var(--gutter) * 2)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section-tight { padding-block: clamp(3rem, 6vw, 5rem); }
.bg-paper { background: var(--paper); color: var(--content); }
.bg-paper-soft { background: var(--paper-soft); color: var(--content); }
.bg-bone { background: var(--bone); color: var(--content); }
.bg-dark { background: var(--bg-dark); color: var(--text-light); }
.bg-deep { background: var(--bg-deep); color: var(--text-light); }
.bg-olive { background: var(--secondary); color: var(--bone); }
.rule { border: none; border-top: 1px solid var(--rule); margin: 0; }
.bg-paper .rule { border-top-color: var(--rule-dark); }
/* ===== Navigation =============================================== */
.nav-fixed {
position: fixed; inset: 0 0 auto 0; z-index: 50;
display: flex; align-items: center; justify-content: space-between;
padding: 1.2rem var(--gutter);
color: #fff;
transition: padding 0.5s var(--bezier), background 0.5s var(--bezier), color 0.5s var(--bezier), backdrop-filter 0.5s var(--bezier);
background: linear-gradient(to bottom, rgba(13,12,8,0.65), rgba(13,12,8,0));
}
.nav-fixed.scrolled {
padding-block: 0.8rem;
background: rgba(13, 12, 8, 0.86);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--rule);
}
.nav-fixed .nav-cta { color: inherit; }
.nav-brand {
font-family: var(--font-display);
font-size: 1.15rem;
letter-spacing: 0.36em;
}
.nav-links { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 2rem); }
.nav-links a {
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 0.4rem 0;
position: relative;
white-space: nowrap;
}
.nav-links a::after {
content: ""; position: absolute; inset: auto 0 -2px 0;
height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: right;
transition: transform 0.5s var(--bezier);
}
.nav-links a:hover::after, .nav-links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
border: 1px solid currentColor;
padding: 0.6rem 1.2rem;
letter-spacing: 0.24em;
text-transform: uppercase;
font-size: 11px;
transition: background 0.4s, color 0.4s;
}
.nav-cta:hover { background: currentColor; }
.nav-cta:hover span { color: var(--bg-dark); mix-blend-mode: normal; }
@media (max-width: 800px) {
.nav-links { display: none; }
}
/* ===== Hero ===================================================== */
.hero {
position: relative;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
isolation: isolate;
}
.hero-media {
position: absolute; inset: 0; z-index: -2;
overflow: hidden;
}
.hero-media img {
width: 100%; height: 100%; object-fit: cover;
transform: scale(1.18);
animation: drift 22s ease-in-out infinite alternate;
filter: brightness(0.85) saturate(1.08) contrast(1.04);
}
.hero-media::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(ellipse at 28% 80%, rgba(13, 12, 8, 0) 0%, rgba(13, 12, 8, 0.42) 72%),
linear-gradient(to bottom,
rgba(13, 12, 8, 0.34) 0%,
rgba(13, 12, 8, 0) 24%,
rgba(13, 12, 8, 0) 44%,
rgba(13, 12, 8, 0.58) 76%,
rgba(13, 12, 8, 0.9) 100%);
}
@keyframes drift {
0% { transform: scale(1.18) translate(0, 0); }
50% { transform: scale(1.22) translate(-1.5%, -1%); }
100% { transform: scale(1.2) translate(1.5%, 1%); }
}
.hero-grain {
position: absolute; inset: 0; z-index: -1; opacity: 0.07; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
}
.hero-inner {
display: flex; flex-direction: column; justify-content: space-between;
padding: 8rem var(--gutter) 2.4rem;
min-height: 100vh;
}
.hero-mark {
font-family: var(--font-display);
font-size: clamp(2.8rem, 14vw, 14rem);
line-height: 0.86;
letter-spacing: -0.04em;
margin-top: clamp(2rem, 6vw, 5rem);
white-space: nowrap;
max-width: 100%;
}
@media (max-width: 480px) {
.hero-mark { font-size: clamp(2.4rem, 12.5vw, 4rem); letter-spacing: -0.03em; }
}
.hero-mark .char { display: inline-block; transform: translateY(110%); opacity: 0; }
.hero-strap {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.hero-strap .strap-tag {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.5rem, 2.4vw, 2.4rem);
color: var(--text-light);
max-width: 32ch;
opacity: 0.94;
line-height: 1.18;
}
.hero-strap .strap-tag .line { display: block; overflow: hidden; }
.hero-strap .strap-tag .line span { display: block; transform: translateY(100%); }
.strap-tag .line { display: block; overflow: hidden; }
.strap-tag .line span { display: block; transform: translateY(100%); }
.hero-bottom {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 2rem; flex-wrap: wrap;
padding-top: 1.8rem;
border-top: 1px solid var(--rule);
}
.hero-meta {
display: grid; grid-template-columns: repeat(4, auto);
gap: clamp(1rem, 2.4vw, 2.4rem);
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-mute);
}
.hero-meta strong { color: var(--text-light); font-weight: 500; display: block; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.01em; text-transform: none; margin-top: 0.2rem; }
/* Hero celestial panel — live local time + sun/moon arc */
.hero-celestial {
display: inline-flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.2rem;
padding: 0.6rem 0.85rem 0.7rem;
margin-top: 1.4rem;
border: 1px solid var(--rule);
background: rgba(7, 6, 10, 0.42);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
width: fit-content;
max-width: 100%;
}
.hero-celestial .celestial-arc {
width: clamp(68px, 9vw, 84px);
height: auto;
overflow: visible;
flex-shrink: 0;
}
.hero-celestial .arc-line {
fill: none;
stroke: rgba(218, 187, 134, 0.35);
stroke-width: 1;
stroke-dasharray: 2 3;
transition: stroke 0.8s ease;
}
.hero-celestial .arc-horizon {
stroke: rgba(218, 187, 134, 0.45);
stroke-width: 0.6;
}
.hero-celestial .arc-body {
transition: transform 1.2s var(--bezier);
}
.hero-celestial .cb-scale { transform: scale(1.25); }
.hero-celestial .cb-glow {
fill: var(--primary);
opacity: 0.24;
transform-box: fill-box; transform-origin: center;
animation: cb-glow-pulse 3.4s ease-in-out infinite;
}
.hero-celestial .cb-rays {
stroke: var(--primary);
stroke-width: 1.5;
stroke-linecap: round;
transform-box: fill-box; transform-origin: center;
animation: cb-ray-spin 15s linear infinite;
}
.hero-celestial .cb-sun {
fill: var(--primary);
filter: drop-shadow(0 0 4px rgba(218, 187, 134, 0.85));
}
.hero-celestial .cb-moon {
display: none;
fill: rgba(244, 236, 225, 0.95);
filter: drop-shadow(0 0 4px rgba(244, 236, 225, 0.5));
}
/* Night → swap sun for crescent moon */
.hero-celestial.is-night .cb-rays,
.hero-celestial.is-night .cb-sun { display: none; }
.hero-celestial.is-night .cb-moon { display: block; }
.hero-celestial.is-night .cb-glow { fill: rgba(244, 236, 225, 0.9); opacity: 0.18; }
.hero-celestial.is-night .arc-line { stroke: rgba(244, 236, 225, 0.22); }
@keyframes cb-ray-spin { to { transform: rotate(360deg); } }
@keyframes cb-glow-pulse {
0%, 100% { opacity: 0.16; transform: scale(1); }
50% { opacity: 0.34; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
.hero-celestial .cb-rays,
.hero-celestial .cb-glow { animation: none; }
}
.hero-celestial .celestial-info {
display: flex; flex-direction: column; gap: 0.2rem;
align-items: center;
min-width: 0;
margin-top: -0.2rem;
}
.hero-celestial .celestial-clock {
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.8vw, 1.6rem);
line-height: 1;
letter-spacing: 0.02em;
color: var(--text-light);
font-variant-numeric: tabular-nums;
}
.hero-celestial .celestial-clock .secs {
font-size: 0.6em;
color: var(--text-mute);
margin-left: 0.15em;
}
.hero-celestial .celestial-state {
font-family: var(--font-mono);
font-size: 7.5px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--primary);
}
.hero-celestial .celestial-detail {
font-family: var(--font-mono);
font-size: 7.5px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-mute);
white-space: normal;
line-height: 1.5;
max-width: 17ch;
}
@media (max-width: 600px) {
.hero-celestial { padding: 0.55rem 0.8rem 0.65rem; gap: 0.18rem; }
}
.scroll-cue {
font-family: var(--font-mono);
font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase;
color: var(--text-mute);
display: inline-flex; align-items: center; gap: 0.6rem;
}
.scroll-cue::after {
content: ""; width: 1px; height: 32px; background: currentColor;
animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.2; transform: scaleY(0.5); }
50% { opacity: 1; transform: scaleY(1); }
}
@media (max-width: 760px) {
.hero-meta { grid-template-columns: repeat(2, auto); }
}
/* ===== Sections — generic ========================================= */
.section-head {
display: grid; grid-template-columns: 1fr;
gap: clamp(1rem, 2.4vw, 1.8rem);
margin-bottom: clamp(3rem, 5vw, 5rem);
align-items: start;
}
.section-head .right { max-width: 56ch; }
/* ===== Brochure two-up ============================================ */
.two-up {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: start;
}
@media (max-width: 800px) { .two-up { grid-template-columns: 1fr; } }
.three-col {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 800px) { .three-col { grid-template-columns: 1fr; gap: 2rem; } }
/* ===== Image + parallax containers ================================ */
.frame {
position: relative;
overflow: hidden;
}
.frame img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 9s var(--bezier);
}
.frame:hover img { transform: scale(1.06); }
.frame .frame-caption {
position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 2;
color: var(--text-light);
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.22em; text-transform: uppercase;
background: rgba(13, 12, 8, 0.5);
padding: 0.45rem 0.7rem;
backdrop-filter: blur(8px);
}
.tall { aspect-ratio: 3 / 4; }
.wide { aspect-ratio: 16 / 9; }
.square { aspect-ratio: 1 / 1; }
.kenburns { animation: kenburns 8s ease-in-out infinite alternate; }
@keyframes kenburns {
0% { transform: scale(1.02) translate(0, 0); }
100% { transform: scale(1.1) translate(-1.5%, -1.5%); }
}
/* ===== Buttons ==================================================== */
.btn {
display: inline-flex; align-items: center; gap: 0.8rem;
padding: 1rem 1.6rem;
border: 1px solid currentColor;
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--text-light);
background: transparent;
transition: background 0.4s var(--bezier), color 0.4s var(--bezier), gap 0.4s var(--bezier);
position: relative;
}
.btn:hover { background: var(--primary); border-color: var(--primary); color: var(--bg-dark); gap: 1.2rem; }
.btn.btn-solid { background: var(--primary); color: var(--bg-dark); border-color: var(--primary); }
.btn.btn-solid:hover { background: var(--primary-deep); border-color: var(--primary-deep); }
.btn.btn-paper { color: var(--content); border-color: var(--content); }
.btn.btn-paper:hover { background: var(--secondary); color: var(--bone); border-color: var(--secondary); }
.btn-arrow { display: inline-block; width: 16px; transform: translateY(-1px); }
/* ===== Counter strip ============================================== */
.stats {
display: grid; grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.bg-paper .stats, .bg-paper-soft .stats, .bg-bone .stats {
border-top-color: var(--rule-dark); border-bottom-color: var(--rule-dark);
}
.stat {
padding: clamp(2rem, 4vw, 3.6rem) clamp(1rem, 2vw, 2rem);
border-right: 1px solid var(--rule);
text-align: left;
}
.bg-paper .stat, .bg-paper-soft .stat, .bg-bone .stat { border-right-color: var(--rule-dark); }
.stat:last-child { border-right: none; }
.stat .label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--text-mute);
margin-bottom: 1rem;
}
.stat .value {
font-family: var(--font-display);
font-size: clamp(2.6rem, 5.5vw, 4.6rem);
line-height: 1;
letter-spacing: -0.02em;
}
.stat .unit {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--primary);
margin-top: 0.6rem;
display: block;
}
@media (max-width: 760px) {
.stats { grid-template-columns: 1fr; }
.stat { border-right: none; border-bottom: 1px solid var(--rule); }
.bg-paper .stat, .bg-paper-soft .stat { border-bottom-color: var(--rule-dark); }
.stat:last-child { border-bottom: none; }
}
/* ===== Pinned story panel ========================================= */
.pin-story {
display: grid; grid-template-columns: 1fr 1fr; min-height: 110vh;
}
.pin-story .pin-media { position: relative; overflow: hidden; }
.pin-story .pin-media img { width: 100%; height: 100%; object-fit: cover; }
.pin-story .pin-copy {
padding: clamp(3rem, 6vw, 6rem) var(--gutter);
display: flex; flex-direction: column; justify-content: center; gap: 1.6rem;
background: var(--bg-deep);
}
@media (max-width: 800px) { .pin-story { grid-template-columns: 1fr; min-height: 0; } .pin-story .pin-media { aspect-ratio: 4 / 3; } }
/* ===== Accommodation split card ==================================== */
.stay-split {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 3vw, 3rem);
}
.stay-card {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 5;
display: flex; flex-direction: column; justify-content: space-between;
color: var(--text-light);
}
.stay-card .stay-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
z-index: -1; transition: transform 7s var(--bezier);
/* Continuous ken-burns on the real camp & tent photographs (5-10s loop) */
animation: stay-kenburns 8s ease-in-out infinite alternate;
}
.stay-card:nth-child(2n) .stay-bg { animation-direction: alternate-reverse; animation-duration: 10s; }
@keyframes stay-kenburns {
0% { transform: scale(1.04) translate3d(0, 0, 0); }
100% { transform: scale(1.1) translate3d(-1.5%, -1%, 0); }
}
.stay-card::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(13, 12, 8, 0.05) 30%, rgba(13, 12, 8, 0.8) 100%);
z-index: -1;
}
.stay-card:hover .stay-bg { animation-play-state: paused; transform: scale(1.16) translate3d(-2%, -1.5%, 0); }
@media (prefers-reduced-motion: reduce) {
.stay-card .stay-bg { animation: none; transform: scale(1.04); }
}
/* When the stay-bg is a video, fit it like the bg-image and drop the ken-burns
(the footage carries its own motion). */
.stay-card video.stay-bg-video {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
z-index: -1;
animation: none;
transform: none;
background-image: none;
}
.stay-card:hover video.stay-bg-video { transform: scale(1.04); }
.stay-card .stay-top {
padding: clamp(1.5rem, 2.5vw, 2.5rem);
display: flex; justify-content: space-between; align-items: flex-start;
gap: 1rem;
}
.stay-card .stay-bottom {
padding: clamp(1.5rem, 2.5vw, 2.5rem);
display: flex; flex-direction: column; gap: 0.8rem;
}
.stay-card .stay-price {
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.4vw, 2.4rem);
line-height: 1;
}
.stay-card .stay-name {
font-family: var(--font-display);
font-size: clamp(2.4rem, 4vw, 3.6rem);
line-height: 1; margin-bottom: 0.5rem;
}
@media (max-width: 800px) { .stay-split { grid-template-columns: 1fr; } .stay-card { aspect-ratio: 4 / 5; } }
/* ===== Experiences horizontal ====================================== */
.exp-track {
display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 28vw, 420px);
gap: clamp(1rem, 2vw, 2rem);
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory;
padding: 1rem var(--gutter) 3rem;
scrollbar-width: thin;
}
.exp-card { scroll-snap-align: start; position: relative; }
.exp-card .exp-img { aspect-ratio: 3 / 4; overflow: hidden; }
.exp-card .exp-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 6s var(--bezier);
/* Continuous ken-burns on experience imagery (5-10s loop) */
animation: exp-kenburns 8s ease-in-out infinite alternate;
}
.exp-card:nth-child(3n) .exp-img img { animation-duration: 10s; animation-direction: alternate-reverse; }
.exp-card:nth-child(3n+1) .exp-img img { animation-duration: 7s; }
@keyframes exp-kenburns {
0% { transform: scale(1.04) translate3d(0, 0, 0); }
100% { transform: scale(1.1) translate3d(1.5%, -1%, 0); }
}
.exp-card:hover .exp-img img { animation-play-state: paused; transform: scale(1.14); }
@media (prefers-reduced-motion: reduce) {
.exp-card .exp-img img { animation: none; transform: scale(1.02); }
}
/* Video-led experience cards (Bushmen Archery / Walking & Tracking): fit and play, no ken-burns */
.exp-card .exp-img video {
width: 100%; height: 100%; object-fit: cover;
display: block;
transition: transform 1s var(--bezier);
}
.exp-card:hover .exp-img video { transform: scale(1.04); }
.exp-card .exp-meta {
display: grid; grid-template-columns: 1fr auto;
align-items: end; gap: 1rem;
padding: 1.2rem 0 0 0;
border-top: 1px solid var(--rule);
margin-top: 1rem;
}
.exp-card .exp-name { font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.1; }
.exp-card .exp-price { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; color: var(--primary); }
.exp-card .exp-body { font-size: 0.9rem; color: var(--text-mute); margin-top: 0.6rem; line-height: 1.55; }
.exp-card .exp-coord { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--text-mute); margin-top: 0.5rem; text-transform: uppercase; }
/* ===== Coordinate ticker =========================================== */
.ticker {
display: flex; gap: 3rem; align-items: center;
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
border-block: 1px solid var(--rule);
padding-block: 1.2rem;
white-space: nowrap;
overflow: hidden;
}
.bg-paper .ticker, .bg-paper-soft .ticker, .bg-bone .ticker {
border-block-color: var(--rule-dark);
}
.ticker-track {
display: flex; gap: 3rem; animation: tick 60s linear infinite;
}
.ticker-track span { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text-mute); }
.ticker-track strong { color: var(--text-light); font-weight: 500; }
.bg-paper .ticker-track strong, .bg-paper-soft .ticker-track strong, .bg-bone .ticker-track strong { color: var(--content); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ===== Lookbook strip ============================================== */
.lookbook {
display: grid;
grid-template-columns: 1.2fr 0.9fr 1fr;
gap: clamp(0.8rem, 1.5vw, 1.5rem);
}
.lookbook .lb-row {
display: grid;
grid-template-rows: 1fr 1fr;
gap: clamp(0.8rem, 1.5vw, 1.5rem);
}
@media (max-width: 800px) {
.lookbook { grid-template-columns: 1fr 1fr; }
.lookbook .lb-row { grid-template-rows: 1fr; }
}
/* ===== Map section ================================================ */
.map-wrap {
position: relative; height: 70vh; min-height: 520px;
background: var(--bg-deep);
}
#map { position: absolute; inset: 0; }
.map-overlay {
position: absolute; left: var(--gutter); top: var(--gutter); z-index: 1000;
width: min(420px, calc(100% - var(--gutter) * 2));
background: rgba(7, 6, 10, 0.86);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 1.6rem 1.8rem;
border: 1px solid var(--rule);
color: var(--text-light);
}
.map-overlay h3 { font-size: 1.4rem; margin-bottom: 0.8rem; }
.map-overlay p { font-size: 0.92rem; line-height: 1.6; color: var(--text-mute); }
.map-pin-label {
font-family: var(--font-mono);
font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
background: var(--bg-dark); color: var(--primary);
padding: 4px 8px;
border: 1px solid var(--primary);
}
/* ===== Letter / quote ============================================= */
.letter {
border-top: 1px solid var(--rule-dark);
border-bottom: 1px solid var(--rule-dark);
padding-block: clamp(3rem, 6vw, 5rem);
}
.letter blockquote {
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
line-height: 1.32;
font-style: italic;
color: var(--secondary-deep);
letter-spacing: -0.01em;
margin-bottom: 1.6rem;
position: relative;
}
.letter blockquote::before {
content: "";
position: absolute;
left: -1.2rem;
top: 0.2rem;
width: 3px; height: 100%;
background: var(--primary);
}
.letter .signature {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--content);
}
/* ===== Plan-your-visit info panels ================================= */
.info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.bg-paper .info-grid, .bg-paper-soft .info-grid, .bg-bone .info-grid {
border-block-color: var(--rule-dark);
}
.info-cell {
padding: clamp(1.5rem, 2.5vw, 2.4rem) clamp(1rem, 1.6vw, 1.6rem);
border-right: 1px solid var(--rule);
display: flex; flex-direction: column; gap: 0.6rem;
}
.info-cell .cell-icon {
width: 32px; height: 32px;
color: var(--primary);
margin-bottom: 0.4rem;
display: block;
}
.info-cell .cell-icon svg {
width: 100%; height: 100%;
fill: none; stroke: currentColor;
stroke-width: 1.3;
stroke-linecap: round; stroke-linejoin: round;
}
.bg-olive .info-cell .cell-icon { color: var(--paper); }
.bg-paper .info-cell, .bg-paper-soft .info-cell, .bg-bone .info-cell {
border-right-color: var(--rule-dark);
}
.info-cell:last-child { border-right: none; }
.info-cell .label {
font-family: var(--font-mono);
font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
color: var(--primary);
}
.info-cell .value { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.2; }
.info-cell .note { font-size: 0.84rem; color: var(--text-mute); line-height: 1.5; }
.bg-paper .info-cell .note, .bg-paper-soft .info-cell .note, .bg-bone .info-cell .note { color: var(--content); opacity: 0.7; }
@media (max-width: 800px) {
.info-grid { grid-template-columns: 1fr 1fr; }
.info-cell:nth-child(2n) { border-right: none; }
.info-cell { border-bottom: 1px solid var(--rule); }
.bg-paper .info-cell { border-bottom-color: var(--rule-dark); }
}
/* ===== Poachella band ============================================== */
.festival-band {
background: var(--bg-deep);
color: var(--text-light);
position: relative;
overflow: hidden;
}
.festival-band::before {
content: "";
position: absolute; inset: 0;
background: url('/assets/images/Festival-Image.jpg') center / cover;
opacity: 0.22;
mix-blend-mode: lighten;
filter: saturate(0.55);
}
.festival-band > * { position: relative; z-index: 1; }
/* Two-column layout: content on the left, poster image on the right */
.festival-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
@media (min-width: 800px) {
.festival-grid {
grid-template-columns: 1.1fr 1fr;
align-items: stretch;
}
}
.festival-poster {
position: relative;
overflow: hidden;
border: 1px solid var(--rule);
aspect-ratio: 3 / 4;
background: var(--bg-dark);
}
.festival-poster img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 9s var(--bezier);
filter: saturate(1.06) contrast(1.04);
}
.festival-poster:hover img { transform: scale(1.05); }
.festival-poster::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(13,12,8,0) 55%, rgba(13,12,8,0.85) 100%);
}
.festival-poster-top, .festival-poster-bottom {
position: absolute;
left: clamp(1rem, 2vw, 1.6rem);
right: clamp(1rem, 2vw, 1.6rem);
z-index: 2;
color: var(--text-light);
}
.festival-poster-top { top: clamp(1rem, 2vw, 1.4rem); }
.festival-poster-bottom { bottom: clamp(1rem, 2vw, 1.4rem); }
.festival-poster-top .stamp {
display: inline-block;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--primary);
padding: 0.4rem 0.7rem;
border: 1px solid rgba(218, 187, 134, 0.55);
background: rgba(13, 12, 8, 0.45);
backdrop-filter: blur(6px);
}
.festival-poster-bottom .title {
font-family: var(--font-display);
font-size: clamp(1.7rem, 3vw, 2.4rem);
line-height: 1;
margin-bottom: 0.4rem;
}
.festival-poster-bottom .sub {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--primary);
}
.festival-date {
font-family: var(--font-display);
font-size: clamp(4rem, 14vw, 14rem);
letter-spacing: -0.04em;
line-height: 0.86;
}
.festival-line {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--primary);
}
/* ===== Lineup grid ================================================= */
.lineup { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 3rem; }
.lineup .artist {
font-family: var(--font-display);
font-size: clamp(1.2rem, 2.2vw, 1.8rem);
border-bottom: 1px solid var(--rule);
padding: 0.8rem 0;
display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.lineup .artist .role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-mute); }
@media (max-width: 700px) { .lineup { grid-template-columns: 1fr; } }
/* ===== Footer ===================================================== */
.site-foot { padding: clamp(4rem, 8vw, 7rem) var(--gutter) 2rem; background: var(--bg-deep); color: var(--text-mute); }
/* Brand block — full-width row at the top with a generous reading width */
.site-foot .brand-block {
padding-bottom: clamp(2rem, 3.5vw, 3rem);
margin-bottom: clamp(2rem, 3.5vw, 3rem);
border-bottom: 1px solid var(--rule);
}
.site-foot .brand-line {
font-family: var(--font-display); font-size: clamp(1.6rem, 2.8vw, 2.4rem);
color: var(--text-light); line-height: 1.25;
max-width: 62ch;
}
.site-foot .foot-coords {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--text-mute);
display: flex; gap: clamp(1rem, 2.5vw, 2.5rem); margin-top: 1.8rem; flex-wrap: wrap;
}
/* Link columns — three balanced columns */
.site-foot .foot-top {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(2rem, 5vw, 5rem);
margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.site-foot h4 {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
color: var(--primary); margin-bottom: 1.2rem;
}
.site-foot ul { list-style: none; }
.site-foot li { padding: 0.4rem 0; font-size: 0.95rem; color: var(--text-light); }
.site-foot li a { transition: color 0.4s; }
.site-foot li a:hover { color: var(--primary); }
/* Legal links row */
.site-foot .foot-legal {
display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); flex-wrap: wrap;
padding-top: 2rem;
border-top: 1px solid var(--rule);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.site-foot .foot-legal a { color: var(--text-mute); transition: color 0.4s; }
.site-foot .foot-legal a:hover { color: var(--primary); }
.site-foot .foot-bottom {
display: flex; justify-content: space-between; align-items: center; gap: 1.6rem; flex-wrap: wrap;
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px solid var(--rule);
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
color: var(--text-mute);
}
.site-foot .foot-bottom .accent { color: var(--primary); }
@media (max-width: 900px) { .site-foot .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
.site-foot .foot-top { grid-template-columns: 1fr; gap: 2rem; }
.site-foot .foot-legal { gap: 1rem; }
}
/* ===== Reveal animations ========================================== */
.r-up { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--bezier), transform 1.2s var(--bezier); }
.r-up.in { opacity: 1; transform: none; }
.r-up.d1 { transition-delay: 0.08s; }
.r-up.d2 { transition-delay: 0.16s; }
.r-up.d3 { transition-delay: 0.24s; }
.r-up.d4 { transition-delay: 0.32s; }
.r-fade { opacity: 0; transition: opacity 1.4s var(--bezier); }
.r-fade.in { opacity: 1; }
.r-split .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.r-split .word > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--bezier); }
.r-split.in .word > span { transform: none; }
.r-split .word:nth-child(1) > span { transition-delay: 0.05s; }
.r-split .word:nth-child(2) > span { transition-delay: 0.1s; }
.r-split .word:nth-child(3) > span { transition-delay: 0.15s; }
.r-split .word:nth-child(4) > span { transition-delay: 0.2s; }
.r-split .word:nth-child(5) > span { transition-delay: 0.25s; }
.r-split .word:nth-child(6) > span { transition-delay: 0.3s; }
.r-split .word:nth-child(7) > span { transition-delay: 0.35s; }
.r-split .word:nth-child(8) > span { transition-delay: 0.4s; }
.r-split .word:nth-child(9) > span { transition-delay: 0.45s; }
.r-split .word:nth-child(10) > span { transition-delay: 0.5s; }
.r-split .word:nth-child(11) > span { transition-delay: 0.55s; }
.r-split .word:nth-child(12) > span { transition-delay: 0.6s; }
.r-split .word:nth-child(13) > span { transition-delay: 0.65s; }
.r-split .word:nth-child(14) > span { transition-delay: 0.7s; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
.r-up, .r-fade, .hero-mark .char { opacity: 1 !important; transform: none !important; }
.r-split .word > span { transform: none !important; }
}
/* ===== Forms ====================================================== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field.full { grid-column: 1 / -1; }
.field label {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
color: var(--primary);
}
.field input, .field select, .field textarea {
background: transparent;
color: inherit;
border: none;
border-bottom: 1px solid currentColor;
padding: 0.7rem 0;
font-family: var(--font-body);
font-size: 1rem;
outline: none;
transition: border-color 0.4s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--primary); }
.field textarea { resize: vertical; min-height: 7rem; }
/* ===== Misc ======================================================= */
.muted { color: var(--text-mute); }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.italic { font-style: italic; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }
.hide-mobile { }
@media (max-width: 700px) { .hide-mobile { display: none !important; } }
/* ============================================================
Scroll progress bar — thin gold rail at the top of the viewport
that fills as the user scrolls through the page.
============================================================ */
.scroll-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
z-index: 60;
pointer-events: none;
background: linear-gradient(to bottom, rgba(218, 187, 134, 0.08), rgba(218, 187, 134, 0));
}
.scroll-progress > .bar {
height: 100%;
width: 0%;
background: linear-gradient(to right, var(--primary) 0%, var(--primary) 70%, rgba(218, 187, 134, 0.4) 100%);
box-shadow: 0 0 6px rgba(218, 187, 134, 0.55);
transition: width 0.08s linear;
}
/* ============================================================
Hero meta — bolder display with icons per cell
============================================================ */
.hero-meta {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(0.8rem, 2vw, 2rem);
position: relative;
}
.hero-meta::before {
/* Top gold rule above the meta strip */
content: '';
position: absolute;
top: -1.2rem; left: 0; right: 0;
height: 1px;
background: linear-gradient(to right,
rgba(218, 187, 134, 0) 0%,
rgba(218, 187, 134, 0.8) 12%,
rgba(218, 187, 134, 0.5) 50%,
rgba(218, 187, 134, 0.8) 88%,
rgba(218, 187, 134, 0) 100%);
}
.hero-meta .meta-cell {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding-right: clamp(0.6rem, 1.4vw, 1.4rem);
border-right: 1px solid rgba(218, 187, 134, 0.32);
min-width: 0;
position: relative;
}
.hero-meta .meta-cell:last-child { border-right: none; padding-right: 0; }
.hero-meta .meta-cell::after {
/* Gold accent bar beneath each value */
content: '';
position: absolute;
left: 0; bottom: -8px;
width: 22px; height: 2px;
background: var(--primary);
box-shadow: 0 0 6px rgba(218, 187, 134, 0.5);
transition: width 0.7s var(--bezier);
}
.hero-meta .meta-cell:hover::after { width: 60%; }
/* Corner ticks on each cell */
.hero-meta .meta-cell .meta-icon {
position: relative;
}
.hero-meta .meta-cell .meta-icon::before {
content: '·';
position: absolute;
top: -8px; right: 0;
font-family: var(--font-mono);
font-size: 18px;
color: var(--primary);
opacity: 0.7;
}
.hero-meta .meta-icon {
width: clamp(20px, 2.2vw, 26px);
height: clamp(20px, 2.2vw, 26px);
color: var(--primary);
display: block;
margin-bottom: 0.1rem;
}
.hero-meta .meta-icon svg {
width: 100%; height: 100%;
fill: none; stroke: currentColor;
stroke-width: 1.3;
stroke-linecap: round; stroke-linejoin: round;
}
.hero-meta .meta-label {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--text-mute);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-meta .meta-value {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.3rem, 2vw, 1.8rem);
letter-spacing: -0.01em;
color: var(--text-light);
line-height: 1;
text-transform: none;
position: relative;
}
.hero-meta .meta-value .sub {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primary);
margin-left: 0.4rem;
}
@media (max-width: 720px) {
.hero-meta { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.hero-meta .meta-cell:nth-child(2) { border-right: none; }
.hero-meta .meta-cell { padding-right: 0; }
}
/* ============================================================
Card curtain reveal — generic chip used on stay / experience /
wildlife-log cards. On touch devices it stays visible; on hover-
capable devices it animates in from a centre-split clip-path.
============================================================ */
.card-reveal,
.stay-card .stay-reveal {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-top: 1rem;
padding: 0.65rem 0.95rem;
background: rgba(13, 12, 8, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--primary);
color: var(--primary);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
width: fit-content;
/* Default visible (touch fallback) */
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
opacity: 0.92;
transition: clip-path 0.6s cubic-bezier(0.25, 1.5, 0.5, 1),
opacity 0.45s ease-out,
transform 0.45s ease-out;
}
.card-reveal .arrow,
.stay-card .stay-reveal .arrow {
display: inline-block;
transform: translateX(0);
transition: transform 0.4s var(--bezier);
}
.stay-card:hover .stay-reveal .arrow,
.stay-card:hover .card-reveal .arrow,
.exp-card:hover .card-reveal .arrow,
.spotted-card:hover .card-reveal .arrow { transform: translateX(4px); }
/* Desktop-sized viewports — start hidden, animate in on hover.
Width-based so the preview tool's resized mobile viewport reliably
gets the always-visible touch fallback. */
@media (min-width: 801px) {
.card-reveal,
.stay-card .stay-reveal {
clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
opacity: 0;
transform: translateY(10px);
}
.stay-card:hover .stay-reveal,
.stay-card:focus-within .stay-reveal,
.stay-card:hover .card-reveal,
.stay-card:focus-within .card-reveal,
.exp-card:hover .card-reveal,
.exp-card:focus-within .card-reveal,
.spotted-card:hover .card-reveal,
.spotted-card:focus-within .card-reveal {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
opacity: 1;
transform: translateY(0);
}
/* Slight image zoom on hover for cards with images */
.stay-card .stay-bg,
.exp-card .exp-img img {
transition: transform 1.4s var(--bezier);
}
.stay-card:hover .stay-bg,
.exp-card:hover .exp-img img {
transform: scale(1.06);
}
}
/* Experience card — reveal sits in the meta block under the price */
.exp-card .card-reveal {
font-size: 10px;
padding: 0.55rem 0.8rem;
margin-top: 0.9rem;
letter-spacing: 0.22em;
}
/* Spotted card — reveal sits tight under the meta info */
.spotted-card .card-reveal {
grid-column: 2 / -1;
margin-top: 0.4rem;
font-size: 9.5px;
padding: 0.4rem 0.7rem;
letter-spacing: 0.22em;
justify-self: start;
}
@media (min-width: 700px) {
.spotted-card .card-reveal {
grid-column: 3 / 4;
justify-self: end;
margin-top: 0.4rem;
}
}
/* Page divider — thin ornamental rule */
.divider {
width: 100%;
display: flex; align-items: center; gap: 1rem;
padding-block: clamp(1.5rem, 3vw, 3rem);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.bg-paper .divider::before, .bg-paper .divider::after, .bg-paper-soft .divider::before, .bg-paper-soft .divider::after, .bg-bone .divider::before, .bg-bone .divider::after {
background: var(--rule-dark);
}
.divider .mark { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.4em; color: var(--primary); }
/* ============================================================
Hero video (replaces still hero-media img)
============================================================ */
.hero-media video {
width: 100%; height: 100%; object-fit: cover;
transform: scale(1.04);
filter: brightness(0.82) saturate(1.06) contrast(1.05);
}
.hero-media::after {
/* extend the existing gradient to stay readable over video */
z-index: 1;
}
/* ============================================================
Topographic contour background — strictly behind content
Light gold lines on dark, dense and organic like an OS map.
Each major section gets its own variant with its own motion.
============================================================ */
.contours-bg {
position: absolute;
z-index: 0;
pointer-events: none;
overflow: hidden;
opacity: 0.7;
}
/* Placements — contours show as a larger fragment of each section,
anchored to a specific corner or edge. Mask fades them into the page. */
.contours-bg[data-placement="tr"] { top: 0; right: 0; width: 72%; height: 88%;
-webkit-mask-image: radial-gradient(130% 130% at 100% 0%, #000 30%, transparent 90%);
mask-image: radial-gradient(130% 130% at 100% 0%, #000 30%, transparent 90%); }
.contours-bg[data-placement="tl"] { top: 0; left: 0; width: 72%; height: 88%;
-webkit-mask-image: radial-gradient(130% 130% at 0% 0%, #000 30%, transparent 90%);
mask-image: radial-gradient(130% 130% at 0% 0%, #000 30%, transparent 90%); }
.contours-bg[data-placement="br"] { bottom: 0; right: 0; width: 72%; height: 88%;
-webkit-mask-image: radial-gradient(130% 130% at 100% 100%, #000 30%, transparent 90%);
mask-image: radial-gradient(130% 130% at 100% 100%, #000 30%, transparent 90%); }
.contours-bg[data-placement="bl"] { bottom: 0; left: 0; width: 72%; height: 88%;
-webkit-mask-image: radial-gradient(130% 130% at 0% 100%, #000 30%, transparent 90%);
mask-image: radial-gradient(130% 130% at 0% 100%, #000 30%, transparent 90%); }
.contours-bg[data-placement="r"] { top: 0; right: 0; width: 58%; height: 100%;
-webkit-mask-image: linear-gradient(to left, #000 35%, transparent 100%);
mask-image: linear-gradient(to left, #000 35%, transparent 100%); }
.contours-bg[data-placement="l"] { top: 0; left: 0; width: 58%; height: 100%;
-webkit-mask-image: linear-gradient(to right, #000 35%, transparent 100%);
mask-image: linear-gradient(to right, #000 35%, transparent 100%); }
.contours-bg[data-placement="t"] { top: 0; left: 0; width: 100%; height: 64%;
-webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 35%, transparent 100%); }
.contours-bg[data-placement="b"] { bottom: 0; left: 0; width: 100%; height: 64%;
-webkit-mask-image: linear-gradient(to top, #000 35%, transparent 100%);
mask-image: linear-gradient(to top, #000 35%, transparent 100%); }
.contours-bg svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.contours-bg .contour {
fill: none;
stroke: rgba(218, 187, 134, 0.62);
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.contours-bg .contour.minor { stroke-width: 0.55; stroke: rgba(218, 187, 134, 0.32); }
.contours-bg .contour.major { stroke-width: 1.4; stroke: rgba(218, 187, 134, 0.82); }
.contours-bg .contour.closed { stroke: rgba(218, 187, 134, 0.5); }
/* Paper / cream backgrounds — deeper earth tone to read on light */
.bg-paper .contours-bg .contour,
.bg-paper-soft .contours-bg .contour,
.bg-bone .contours-bg .contour { stroke: rgba(106, 88, 60, 0.36); }
.bg-paper .contours-bg .contour.minor,
.bg-paper-soft .contours-bg .contour.minor,
.bg-bone .contours-bg .contour.minor { stroke: rgba(106, 88, 60, 0.18); }
.bg-paper .contours-bg .contour.major,
.bg-paper-soft .contours-bg .contour.major,
.bg-bone .contours-bg .contour.major { stroke: rgba(106, 88, 60, 0.5); }
/* Olive — pale wash */
.bg-olive .contours-bg .contour { stroke: rgba(244, 236, 225, 0.22); }
.bg-olive .contours-bg .contour.major { stroke: rgba(244, 236, 225, 0.34); }
/* Ambient motion per variant — subtle, continuous. Scroll-tied parallax is layered on top. */
.contours-bg.parallax svg { will-change: transform; }
.contours-bg[data-variant="channel"] svg { animation: contour-drift-x 38s ease-in-out infinite alternate; }
.contours-bg[data-variant="hill"] svg { animation: contour-breathe 28s ease-in-out infinite alternate; }
.contours-bg[data-variant="valley"] svg { animation: contour-drift-y 34s ease-in-out infinite alternate; }
.contours-bg[data-variant="ridge"] svg { animation: contour-rotate-cw 90s linear infinite; }
.contours-bg[data-variant="confluence"] svg { animation: contour-drift-diag 42s ease-in-out infinite alternate; }
.contours-bg[data-variant="basin"] svg { animation: contour-rotate-ccw 110s linear infinite; }
@keyframes contour-drift-x { 0% { transform: translateX(-2.5%);} 100% { transform: translateX(2.5%); } }
@keyframes contour-drift-y { 0% { transform: translateY(-2%); } 100% { transform: translateY(2%); } }
@keyframes contour-drift-diag{ 0% { transform: translate(-1.5%, -1.5%); } 100% { transform: translate(1.5%, 1.5%); } }
@keyframes contour-breathe { 0% { transform: scale(1); } 100% { transform: scale(1.04); } }
@keyframes contour-rotate-cw { 0% { transform: rotate(-0.4deg); } 100% { transform: rotate(0.4deg); } }
@keyframes contour-rotate-ccw{ 0% { transform: rotate(0.5deg); } 100% { transform: rotate(-0.5deg); } }
@media (prefers-reduced-motion: reduce) {
.contours-bg svg { animation: none !important; transform: none !important; }
}
/* Make sure all direct children of a section using contours lift above the layer */
section > .container,
section > .container-tight,
section > .container-narrow,
section > .section-head,
section > * > .container { position: relative; z-index: 2; }
/* Nav stays above everything */
.nav-fixed { z-index: 50; }
@media (prefers-reduced-motion: reduce) {
.contours-bg svg { transform: none !important; }
}
/* ============================================================
Section icon — large line-drawn ornament anchored top-right
Recurs across every section as a visual language anchor.
============================================================ */
.section-icon-anchor {
position: absolute;
top: clamp(3rem, 5.5vw, 4.6rem);
right: clamp(0.5rem, 2vw, 2rem);
z-index: 4;
width: clamp(100px, 12vw, 157px);
height: clamp(100px, 12vw, 157px);
display: grid;
place-items: center;
border: 1px solid rgba(218, 187, 134, 0.6);
border-radius: 50%;
color: var(--primary);
pointer-events: none;
background: radial-gradient(circle at center, rgba(13, 12, 8, 0.5) 0%, rgba(13, 12, 8, 0) 75%);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
animation: section-icon-breathe 9s ease-in-out infinite;
}
.section-icon-anchor::before {
content: '';
position: absolute; inset: -10px;
border: 1px dashed rgba(218, 187, 134, 0.32);
border-radius: 50%;
animation: anchor-ring-spin 20s linear infinite;
}
@keyframes anchor-ring-spin { to { transform: rotate(360deg); } }
.section-icon-anchor::after {
/* Coordinate tick at the bottom of the ring */
content: '';
position: absolute;
left: 50%; bottom: -18px;
width: 1px; height: 14px;
background: linear-gradient(to bottom, rgba(218, 187, 134, 0.55), transparent);
transform: translateX(-50%);
}
.section-icon-anchor svg {
width: 56%; height: 56%;
fill: none; stroke: currentColor;
stroke-width: 1.1;
stroke-linecap: round; stroke-linejoin: round;
transform-origin: 50% 50%;
}
/* Per-icon ambient animation — subtle motion that gives each section a unique pulse */
.section-icon-anchor[data-icon-name="compass"] svg { animation: icon-spin-slow 13s linear infinite; }
.section-icon-anchor[data-icon-name="pin"] svg { animation: icon-bob 2.8s ease-in-out infinite; }
.section-icon-anchor[data-icon-name="tent"] svg { animation: icon-sway 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.section-icon-anchor[data-icon-name="acacia"] svg { animation: icon-sway 4s ease-in-out infinite; transform-origin: 50% 100%; }
.section-icon-anchor[data-icon-name="track"] svg { animation: icon-fade-pulse 2.6s ease-in-out infinite; }
.section-icon-anchor[data-icon-name="eye"] svg { animation: icon-blink 4s ease-in-out infinite; }
.section-icon-anchor[data-icon-name="binoculars"] svg { animation: icon-sway 4.5s ease-in-out infinite; }
.section-icon-anchor[data-icon-name="ranger"] svg { animation: icon-bob 3.4s ease-in-out infinite; }
.section-icon-anchor[data-icon-name="talking"] svg { animation: icon-pulse 3s ease-in-out infinite; }
.section-icon-anchor[data-icon-name="landscape"] svg { animation: icon-pulse 5.5s ease-in-out infinite; }
.section-icon-anchor[data-icon-name="leaf"] svg { animation: icon-tilt 3.4s ease-in-out infinite; }
.section-icon-anchor[data-icon-name="camera"] svg { animation: icon-pulse 2.8s ease-in-out infinite; }
.section-icon-anchor[data-icon-name="flame"] svg { animation: icon-flicker 1.4s ease-in-out infinite; transform-origin: 50% 100%; }
.section-icon-anchor[data-icon-name="quill"] svg { animation: icon-quill 4s ease-in-out infinite; transform-origin: 80% 80%; }
.section-icon-anchor[data-icon-name="map"] svg { animation: icon-pulse 3s ease-in-out infinite; }
.section-icon-anchor[data-icon-name="sun"] svg { animation: icon-spin-slow 16s linear infinite; }
.section-icon-anchor[data-icon-name="arrow"] svg { animation: icon-step 2.2s ease-in-out infinite; }
@keyframes icon-spin-slow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes icon-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes icon-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes icon-fade-pulse{ 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.92); } }
@keyframes icon-blink { 0%, 88%, 100% { transform: scaleY(1); } 92% { transform: scaleY(0.12); } 96% { transform: scaleY(1); } }
@keyframes icon-tilt { 0%, 100% { transform: rotate(-6.5deg) translateY(0); } 50% { transform: rotate(6.5deg) translateY(-3px); } }
@keyframes icon-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes icon-flicker { 0%, 100% { transform: scale(1) translateY(0); } 25% { transform: scale(1.07) translateY(-1px); } 50% { transform: scale(0.95) translateY(1px); } 75% { transform: scale(1.04) translateY(-1px); } }
@keyframes icon-quill { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes icon-step { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(4px); } }
/* On section hover (desktop), spin up the animation — slightly faster + add scale */
@media (hover: hover) and (pointer: fine) {
section:hover > .section-icon-anchor {
border-color: var(--primary);
box-shadow: 0 0 0 8px rgba(218, 187, 134, 0.08);
}
section:hover > .section-icon-anchor svg {
animation-duration: 1.8s;
}
}
@media (prefers-reduced-motion: reduce) {
.section-icon-anchor svg { animation: none !important; transform: none !important; }
.section-icon-anchor,
.section-icon-anchor::before { animation: none !important; }
}
@keyframes section-icon-breathe {
0%, 100% { opacity: 0.82; transform: scale(1); }
50% { opacity: 1; transform: scale(1.07); }
}
/* Paper / cream variants — deeper earth ink, lighter wash */
.bg-paper .section-icon-anchor,
.bg-paper-soft .section-icon-anchor,
.bg-bone .section-icon-anchor {
color: var(--secondary);
border-color: rgba(106, 88, 60, 0.55);
background: radial-gradient(circle at center, rgba(248, 245, 241, 0.65) 0%, rgba(248, 245, 241, 0) 75%);
}
.bg-paper .section-icon-anchor::before,
.bg-paper-soft .section-icon-anchor::before,
.bg-bone .section-icon-anchor::before { border-color: rgba(106, 88, 60, 0.22); }
.bg-paper .section-icon-anchor::after,
.bg-paper-soft .section-icon-anchor::after,
.bg-bone .section-icon-anchor::after { background: linear-gradient(to bottom, rgba(106, 88, 60, 0.5), transparent); }
/* Olive variants */
.bg-olive .section-icon-anchor {
color: var(--paper);
border-color: rgba(244, 236, 225, 0.5);
background: radial-gradient(circle at center, rgba(31, 42, 27, 0.45) 0%, rgba(31, 42, 27, 0) 75%);
}
.bg-olive .section-icon-anchor::before { border-color: rgba(244, 236, 225, 0.22); }
/* Festival-band — sits over moody hero */
.festival-band .section-icon-anchor {
color: var(--primary);
border-color: rgba(218, 187, 134, 0.65);
}
/* Mobile: keep top-right anchoring but pull in tighter */
@media (max-width: 600px) {
.section-icon-anchor {
top: 2rem;
right: 0.7rem;
width: 76px;
height: 76px;
}
.section-icon-anchor::before { inset: -6px; }
.section-icon-anchor::after { bottom: -12px; height: 10px; }
}
/* Hide the legacy small inline section-icon if any markup still references it */
.section-icon { display: none; }
/* ============================================================
Africa map section (custom SVG, not Leaflet)
============================================================ */
.africa-section {
background: var(--bg-deep);
position: relative;
overflow: hidden;
}
.africa-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: center;
}
.africa-map-wrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
max-width: 560px;
margin-inline: auto;
}
.africa-map-wrap svg { width: 100%; height: 100%; display: block; }
.africa-country { fill: rgba(255, 246, 225, 0.04); stroke: rgba(185, 157, 117, 0.25); stroke-width: 0.5; transition: fill 0.6s ease, stroke 0.6s ease; vector-effect: non-scaling-stroke; }
.africa-country.botswana { fill: rgba(185, 157, 117, 0.18); stroke: rgba(185, 157, 117, 0.7); animation: botswanaGlow 6s ease-in-out infinite; }
/* Map ambient motion — sonar pings from the camp, pulsing core, shimmering delta */
.africa-pin-ping {
fill: none;
stroke: var(--primary);
stroke-width: 1;
vector-effect: non-scaling-stroke;
animation: pinPing 3.6s ease-out infinite;
}
.africa-pin-ping.d2 { animation-delay: 1.8s; }
@keyframes pinPing {
0% { r: 4; opacity: 0.75; }
70% { opacity: 0.18; }
100% { r: 30; opacity: 0; }
}
.africa-pin-core { animation: pinCore 3.6s ease-in-out infinite; }
@keyframes pinCore { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.africa-delta { animation: deltaShimmer 6s ease-in-out infinite; }
@keyframes deltaShimmer { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
@keyframes botswanaGlow {
0%, 100% { fill: rgba(185, 157, 117, 0.16); }
50% { fill: rgba(185, 157, 117, 0.26); }
}
@media (prefers-reduced-motion: reduce) {
.africa-pin-ping, .africa-pin-core, .africa-delta, .africa-country.botswana { animation: none; }
}
.africa-pin-ring {
fill: none; stroke: var(--primary); stroke-width: 1.2; opacity: 0.9;
animation: ringPulse 3s ease-out infinite;
transform-origin: center;
transform-box: fill-box;
}
@keyframes ringPulse {
0% { r: 4; opacity: 0.9; }
100% { r: 26; opacity: 0; }
}
.africa-pin-core { fill: var(--primary); }
.africa-pin-label {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.04em;
fill: var(--text-light);
}
.africa-pin-sub {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.16em;
text-transform: uppercase;
fill: var(--primary);
}
.africa-cross {
stroke: rgba(185, 157, 117, 0.4); stroke-width: 0.5;
stroke-dasharray: 2 3; vector-effect: non-scaling-stroke;
}
.proximity-list { display: flex; flex-direction: column; gap: 0; }
.proximity-item {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1rem; align-items: center;
padding: 1rem 0;
border-bottom: 1px solid var(--rule);
}
.proximity-item:last-child { border-bottom: none; }
.proximity-distance {
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
line-height: 1;
min-width: 5.5ch;
}
.proximity-name {
font-family: var(--font-body); font-size: 0.96rem;
display: flex; flex-direction: column; gap: 0.2rem;
}
.proximity-name strong { font-weight: 500; }
.proximity-name span { color: var(--text-mute); font-size: 0.82rem; }
.proximity-bearing {
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--primary);
}
@media (min-width: 800px) {
.africa-grid {
grid-template-columns: 1.05fr 1fr;
}
.africa-map-wrap { margin-inline: 0; max-width: none; }
}
/* ============================================================
Mobile-first refinements
============================================================ */
@media (max-width: 600px) {
body { font-size: 16px; }
:root { --gutter: 1.2rem; --section: clamp(3.5rem, 12vw, 5rem); }
.nav-fixed { padding: 0.9rem var(--gutter); }
.nav-brand { font-size: 0.95rem; letter-spacing: 0.3em; }
.nav-cta { padding: 0.5rem 0.9rem; font-size: 10px; }
.hero-inner { padding: 6rem var(--gutter) 1.6rem; }
.hero-mark { font-size: clamp(2.4rem, 13vw, 4.6rem); }
.strap-tag { font-size: 1.4rem !important; }
.hero-meta { grid-template-columns: 1fr 1fr; gap: 1rem; }
.hero-meta strong { font-size: 1rem; }
.display-xl { font-size: clamp(2.6rem, 9vw, 4rem); }
/* .display-lg intentionally inherits its base clamp() so section headlines
stay visually unified with .statement-headline / .moment-line. */
.display-md { font-size: clamp(1.7rem, 5.5vw, 2.4rem); }
.display-sm { font-size: clamp(1.3rem, 4.5vw, 1.7rem); }
.lede { font-size: 1.1rem; }
.brochure { font-size: 0.96rem; line-height: 1.65; }
.section-head { gap: 1.6rem; margin-bottom: 2.4rem; }
.stay-card { aspect-ratio: 3 / 4; }
.festival-date { font-size: clamp(3rem, 18vw, 6rem); }
.info-grid { grid-template-columns: 1fr; }
.info-grid .info-cell { border-right: none; border-bottom: 1px solid var(--rule); }
.bg-paper .info-grid .info-cell, .bg-paper-soft .info-grid .info-cell, .bg-bone .info-grid .info-cell { border-bottom-color: var(--rule-dark); }
.info-grid .info-cell:last-child { border-bottom: none; }
.stats { grid-template-columns: 1fr; }
.stat { border-right: none !important; border-bottom: 1px solid var(--rule); padding: 2rem 0; }
.stat:last-child { border-bottom: none; }
.three-col { grid-template-columns: 1fr; gap: 1.6rem; }
.two-up { grid-template-columns: 1fr; gap: 1.6rem; }
.section-head { grid-template-columns: 1fr; }
.lookbook { grid-template-columns: 1fr; }
.lookbook .lb-row { grid-template-rows: 1fr 1fr; }
.lookbook .frame.tall { aspect-ratio: 4 / 5; }
.exp-track { grid-auto-columns: 78vw; padding: 1rem var(--gutter) 2rem; }
.pin-story { grid-template-columns: 1fr; min-height: 0; }
.pin-story .pin-media { aspect-ratio: 4 / 5; }
.nav-links { display: none; }
.nav-mobile-toggle { display: inline-flex; }
}
/* ============================================================
USP over imagery — big bold text on full-bleed video / image
with semi-transparent panel for editorial impact
============================================================ */
.usp-bleed {
position: relative;
min-height: 80vh;
display: grid; place-items: center;
overflow: hidden;
isolation: isolate;
color: var(--text-light);
}
.usp-bleed > .usp-media {
position: absolute; inset: 0; z-index: -2;
}
.usp-bleed > .usp-media img,
.usp-bleed > .usp-media video {
width: 100%; height: 100%; object-fit: cover;
filter: brightness(0.92) saturate(1.06) contrast(1.04);
animation: kenburns 20s ease-in-out infinite alternate;
}
.usp-bleed::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(ellipse at 50% 50%, rgba(13,12,8,0.45) 0%, rgba(13,12,8,0.62) 75%);
}
.usp-bleed .usp-grain {
position: absolute; inset: 0; z-index: -1; opacity: 0.06; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
}
.usp-bleed .usp-inner {
width: min(1100px, 100% - calc(var(--gutter) * 2));
margin-inline: auto;
padding-block: clamp(3rem, 8vw, 6rem);
display: grid; gap: 2rem;
}
.usp-bleed .usp-eyebrow {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
color: var(--primary);
display: inline-flex; align-items: center; gap: 0.8rem;
}
.usp-bleed .usp-eyebrow::before {
content: ""; width: 36px; height: 1px; background: currentColor;
}
.usp-bleed .usp-headline {
font-family: var(--font-display);
font-size: clamp(2.6rem, 7.5vw, 5.4rem);
line-height: 1.02;
letter-spacing: -0.022em;
max-width: 18ch;
}
.usp-bleed .usp-body { max-width: 50ch; font-size: 1.05rem; line-height: 1.6; }
.usp-bleed .usp-tags {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-top: 1.6rem;
padding-top: 1.6rem;
border-top: 1px solid var(--rule);
}
.usp-bleed .usp-tag {
display: flex; flex-direction: column; gap: 0.3rem;
}
.usp-bleed .usp-tag .k {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--primary);
}
.usp-bleed .usp-tag .v { font-family: var(--font-display); font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.15; }
/* Frosted card overlay variant */
.usp-bleed.frosted .usp-card {
background: rgba(13, 12, 8, 0.42);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--rule);
padding: clamp(2rem, 4vw, 3.5rem);
width: min(720px, 100% - calc(var(--gutter) * 2));
}
/* ============================================================
Recently Spotted — wildlife log
============================================================ */
.spotted-section {
background: var(--bg-deep);
position: relative;
}
/* Field log — a lead sighting beside the running record list */
.spotted-track {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.1rem, 2vw, 1.6rem);
}
@media (min-width: 860px) {
.spotted-track { grid-template-columns: 1.04fr 0.96fr; align-items: stretch; }
}
/* ---------- Lead sighting ---------- */
.spotted-feature {
display: flex; flex-direction: column;
border: 1px solid var(--rule);
background: var(--bg-dark);
overflow: hidden;
transition: border-color 0.5s var(--bezier);
}
.spotted-feature:hover { border-color: rgba(218, 187, 134, 0.55); }
.sf-media {
position: relative; display: block;
flex: 1 1 auto;
min-height: clamp(220px, 33vw, 330px);
overflow: hidden;
}
.sf-img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
filter: saturate(1.05) contrast(1.03);
transition: transform 1.4s var(--bezier);
}
.spotted-feature:hover .sf-img { transform: scale(1.06); }
.sf-scrim {
position: absolute; inset: 0; z-index: 2;
background: linear-gradient(to top, rgba(6, 5, 3, 0.88) 0%, rgba(6, 5, 3, 0.34) 38%, rgba(6, 5, 3, 0) 64%);
}
.sf-wash {
position: absolute; inset: 0; z-index: 3;
background: linear-gradient(to top, var(--primary), rgba(218, 187, 134, 0.25) 55%, transparent 80%);
mix-blend-mode: soft-light;
opacity: 0; transition: opacity 0.55s var(--bezier);
pointer-events: none;
}
.spotted-feature:hover .sf-wash { opacity: 0.5; }
.sf-tag, .sf-cap { position: absolute; z-index: 4; }
.sf-tag {
top: 1rem; left: 1rem;
display: inline-flex; align-items: center; gap: 0.45rem;
font-family: var(--font-mono); font-size: 9px;
letter-spacing: 0.26em; text-transform: uppercase;
color: var(--bg-dark);
background: var(--primary);
padding: 0.4rem 0.7rem;
}
.sf-tag .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--bg-dark);
animation: blink 1.4s ease-in-out infinite;
}
.sf-cap {
left: clamp(1rem, 2.4vw, 1.6rem); right: clamp(1rem, 2.4vw, 1.6rem);
bottom: clamp(1rem, 2.2vw, 1.4rem);
}
.sf-latin {
display: block;
font-family: var(--font-display); font-style: italic;
font-size: 0.88rem; color: rgba(244, 236, 225, 0.8);
margin-bottom: 0.2rem;
}
.sf-common {
display: block;
font-family: var(--font-display);
font-size: clamp(1.75rem, 3vw, 2.45rem); line-height: 1.02;
color: var(--text-light);
}
.sf-foot {
display: grid; grid-template-columns: repeat(3, 1fr) auto;
align-items: center; gap: clamp(0.8rem, 1.6vw, 1.4rem);
padding: clamp(1rem, 1.8vw, 1.3rem) clamp(1.1rem, 2vw, 1.5rem);
border-top: 1px solid var(--rule);
}
.sf-rec { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.sf-rec .k {
font-family: var(--font-mono); font-size: 8px;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--primary);
}
.sf-rec .v {
font-family: var(--font-body); font-size: 0.86rem; color: var(--text-light);
}
.sf-go {
justify-self: end;
display: inline-flex; align-items: center; gap: 0.45rem;
font-family: var(--font-mono); font-size: 9.5px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--primary);
border: 1px solid var(--rule);
padding: 0.6rem 0.85rem;
white-space: nowrap;
transition: background 0.4s var(--bezier), border-color 0.4s var(--bezier);
}
.spotted-feature:hover .sf-go { border-color: var(--primary); background: rgba(218, 187, 134, 0.12); }
.sf-go .arrow { transition: transform 0.4s var(--bezier); }
.spotted-feature:hover .sf-go .arrow { transform: translateX(4px); }
/* ---------- Running record list ---------- */
.spotted-list {
display: flex; flex-direction: column;
border: 1px solid var(--rule);
background: var(--bg-dark);
}
.sl-row {
flex: 1 1 auto; min-height: clamp(86px, 9vw, 104px);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(0.9rem, 1.6vw, 1.2rem);
padding: clamp(0.9rem, 1.6vw, 1.15rem) clamp(1rem, 1.8vw, 1.35rem);
color: var(--text-light);
transition: background 0.45s var(--bezier);
}
.sl-row + .sl-row { border-top: 1px solid var(--rule); }
.sl-row:hover { background: rgba(218, 187, 134, 0.08); }
.sl-thumb {
width: clamp(52px, 6vw, 64px); height: clamp(52px, 6vw, 64px);
border-radius: 50%; overflow: hidden;
border: 1px solid rgba(218, 187, 134, 0.4);
flex-shrink: 0; position: relative;
transition: border-color 0.45s var(--bezier), box-shadow 0.45s var(--bezier);
}
.sl-thumb img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(1.05) contrast(1.03);
transition: transform 1.1s var(--bezier);
}
.sl-row:hover .sl-thumb { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(218, 187, 134, 0.15); }
.sl-row:hover .sl-thumb img { transform: scale(1.1); }
.sl-body { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.sl-name {
font-family: var(--font-display); font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.05;
}
.sl-name em { font-style: italic; color: var(--text-mute); font-size: 0.82em; }
.sl-meta {
font-family: var(--font-mono); font-size: 9px;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute);
}
.sl-end {
display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem;
text-align: right; flex-shrink: 0;
}
.sl-status {
display: inline-flex; align-items: center; gap: 0.38rem;
font-family: var(--font-mono); font-size: 8.5px;
letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-mute);
}
.sl-status::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
}
.sl-row[data-status="live"] .sl-status { color: var(--primary); }
.sl-row[data-status="live"] .sl-status::before { animation: blink 1.4s ease-in-out infinite; }
.sl-row[data-status="recent"] .sl-status { color: rgba(218, 187, 134, 0.7); }
.sl-row[data-status="rare"] .sl-status { color: var(--secondary); }
.sl-freq { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-light); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@media (max-width: 600px) {
.sf-foot { grid-template-columns: 1fr 1fr; row-gap: 1rem; }
.sf-go { grid-column: 1 / -1; justify-self: start; }
}
/* ============================================================
Native art / San rock motif dividers (subtle ornament)
============================================================ */
.native-divider {
position: relative;
padding-block: clamp(2rem, 5vw, 4rem);
display: flex; align-items: center; justify-content: center; gap: 1.2rem;
}
.native-divider::before, .native-divider::after {
content: ""; flex: 1; height: 1px;
background: linear-gradient(to right, transparent, var(--rule), transparent);
max-width: 240px;
}
.native-divider svg { width: clamp(80px, 14vw, 160px); height: auto; opacity: 0.78; }
.native-divider .glyph-stroke { stroke: var(--primary); fill: none; stroke-width: 0.8; stroke-linecap: round; stroke-linejoin: round; }
.native-divider .glyph-fill { fill: var(--primary); }
/* Bottom zigzag basketry strip (separating major sections on dark) */
.basket-strip {
width: 100%;
height: 18px;
background-image: repeating-linear-gradient(
-45deg,
rgba(185, 157, 117, 0.24) 0 2px,
transparent 2px 12px,
rgba(185, 157, 117, 0.16) 12px 13px,
transparent 13px 24px
);
opacity: 0.6;
}
.basket-strip.center {
background-image: repeating-linear-gradient(
90deg,
transparent 0 14px,
rgba(185, 157, 117, 0.42) 14px 16px,
transparent 16px 22px,
rgba(185, 157, 117, 0.22) 22px 23px,
transparent 23px 36px
);
}
/* ============================================================
Drifting accents — slow light particles on dark sections
============================================================ */
.drift-particles {
position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.drift-particles span {
position: absolute;
width: 2px; height: 2px;
border-radius: 50%;
background: rgba(212, 180, 130, 0.5);
box-shadow: 0 0 6px rgba(212, 180, 130, 0.45);
opacity: 0;
animation: drift-up 18s linear infinite;
}
.drift-particles span:nth-child(1) { left: 8%; animation-delay: 0s; animation-duration: 22s; }
.drift-particles span:nth-child(2) { left: 18%; animation-delay: 3s; animation-duration: 26s; }
.drift-particles span:nth-child(3) { left: 28%; animation-delay: 6s; animation-duration: 20s; }
.drift-particles span:nth-child(4) { left: 40%; animation-delay: 9s; animation-duration: 24s; }
.drift-particles span:nth-child(5) { left: 52%; animation-delay: 1s; animation-duration: 18s; }
.drift-particles span:nth-child(6) { left: 64%; animation-delay: 12s; animation-duration: 28s; }
.drift-particles span:nth-child(7) { left: 75%; animation-delay: 4s; animation-duration: 22s; }
.drift-particles span:nth-child(8) { left: 86%; animation-delay: 8s; animation-duration: 25s; }
.drift-particles span:nth-child(9) { left: 94%; animation-delay: 15s; animation-duration: 23s; }
@keyframes drift-up {
0% { transform: translateY(110%) translateX(0); opacity: 0; }
12% { opacity: 0.85; }
100% { transform: translateY(-20%) translateX(-30px); opacity: 0; }
}
/* Glowing accent on dark section CTA hover */
.btn.btn-glow:hover {
box-shadow: 0 0 0 1px var(--primary), 0 6px 24px rgba(185, 157, 117, 0.28);
}
/* ============================================================
Live weather panel — fetched from Open-Meteo, no API key
============================================================ */
.weather-panel {
position: relative;
background: rgba(7, 6, 10, 0.62);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--rule);
padding: clamp(1.2rem, 2vw, 1.8rem);
color: var(--text-light);
display: grid;
gap: 1rem;
}
.weather-panel.compact { padding: 1rem; }
.weather-panel .weather-row-top {
display: flex; justify-content: space-between; align-items: center;
gap: 1rem;
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--rule);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.weather-panel .weather-loc { color: var(--primary); }
.weather-panel .weather-loc::before {
content: '';
display: inline-block; vertical-align: middle;
width: 6px; height: 6px; border-radius: 50%;
background: var(--primary);
margin-right: 0.5rem;
box-shadow: 0 0 6px var(--primary);
animation: weather-live 1.6s ease-in-out infinite;
}
.weather-panel .weather-time { color: var(--text-mute); }
@keyframes weather-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.weather-panel .weather-main {
display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
}
.weather-panel .weather-tomorrow {
display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem;
padding-left: 1rem;
border-left: 1px solid var(--rule);
align-self: stretch; justify-content: center;
text-align: right;
}
.weather-panel .weather-tomorrow .wt-k {
font-family: var(--font-mono); font-size: 9px;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--primary);
}
.weather-panel .weather-tomorrow .wt-v {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1;
color: var(--text-light);
}
.weather-panel .weather-icon {
width: 56px; height: 56px;
color: var(--primary);
flex-shrink: 0;
}
.weather-panel .weather-icon svg {
width: 100%; height: 100%;
fill: none; stroke: currentColor; stroke-width: 1.3;
stroke-linecap: round; stroke-linejoin: round;
}
.weather-panel .weather-temp {
font-family: var(--font-display);
font-size: clamp(2.4rem, 4vw, 3.2rem);
line-height: 1;
letter-spacing: -0.02em;
}
.weather-panel .weather-desc {
font-family: var(--font-body);
font-size: 1rem;
margin-top: 0.3rem;
color: var(--text-mute);
}
.weather-panel .weather-meta {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 1rem;
padding-top: 0.8rem;
border-top: 1px solid var(--rule);
}
.weather-panel .weather-meta > div {
display: flex; flex-direction: column; gap: 0.25rem;
}
.weather-panel .weather-meta .k {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--primary);
}
.weather-panel .weather-meta .v {
font-family: var(--font-display);
font-size: clamp(1rem, 1.6vw, 1.2rem);
line-height: 1.1;
}
.weather-panel .weather-cta {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--primary);
padding-top: 0.4rem;
border-top: 1px solid var(--rule);
transition: gap 0.4s var(--bezier);
}
.weather-panel .weather-cta:hover { gap: 0.8rem; }
@media (max-width: 600px) {
.weather-panel .weather-meta { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
}
/* ============================================================
Weather page — seasons grid, monthly chart, packing list
============================================================ */
.season-grid {
display: grid; grid-template-columns: 1fr; gap: 1px;
background: var(--rule);
border-block: 1px solid var(--rule);
}
@media (min-width: 800px) { .season-grid { grid-template-columns: 1fr 1fr; } }
.season-cell {
background: var(--bg-deep);
padding: clamp(1.8rem, 3vw, 2.8rem);
display: flex; flex-direction: column; gap: 0.6rem;
}
.season-cell.dry { background: linear-gradient(180deg, rgba(218, 187, 134, 0.06), rgba(13, 12, 8, 0)); }
.season-cell.wet { background: linear-gradient(180deg, rgba(83, 98, 78, 0.18), rgba(13, 12, 8, 0)); }
.season-cell .tag {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
color: var(--primary);
}
.season-cell h3 { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1.05; }
.season-cell .months { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-mute); letter-spacing: 0.18em; text-transform: uppercase; }
.season-cell .body { color: var(--text-mute); font-size: 0.95rem; line-height: 1.6; max-width: 44ch; }
.season-cell .stat-row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule);
}
.season-cell .stat-row .v {
font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.05;
}
.season-cell .stat-row .k {
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
color: var(--primary); margin-bottom: 0.25rem; display: block;
}
/* Monthly bars chart */
.month-chart {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(0.3rem, 0.7vw, 0.7rem);
margin-top: 1rem;
padding-top: 2rem;
border-top: 1px solid var(--rule);
}
.month-bar {
display: flex; flex-direction: column; gap: 0.4rem;
text-align: center;
}
.month-bar .month-name {
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--text-mute);
}
.month-bar .bar-track {
height: 80px;
position: relative;
display: flex; align-items: flex-end;
justify-content: center;
}
.month-bar .bar-temp {
width: 60%;
background: linear-gradient(to top, rgba(218, 187, 134, 0.25), var(--primary));
border-radius: 1px 1px 0 0;
position: relative;
transition: transform 0.4s var(--bezier);
transform-origin: bottom;
}
.month-bar:hover .bar-temp { transform: scaleY(1.06); }
.month-bar .bar-rain {
position: absolute; bottom: 0; left: 50%;
transform: translateX(-50%);
width: 90%;
background: rgba(96, 138, 175, 0.45);
}
.month-bar .bar-temp-val {
position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
color: var(--text-light);
white-space: nowrap;
}
.month-bar .month-tag {
font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--primary);
height: 14px;
}
.month-bar.now .month-name { color: var(--primary); font-weight: 500; }
.month-bar.now .bar-temp { box-shadow: 0 0 0 1px var(--primary); }
@media (max-width: 700px) {
.month-chart {
grid-template-columns: repeat(6, 1fr);
gap: 0.4rem;
}
}
.pack-grid {
display: grid; grid-template-columns: 1fr; gap: 1.2rem;
}
@media (min-width: 800px) { .pack-grid { grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--rule); border-block: 1px solid var(--rule); } }
.pack-cell { background: var(--bg-deep); padding: clamp(1.4rem, 2.2vw, 2rem); }
.pack-cell h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--primary); margin-bottom: 1rem; }
.pack-cell ul { list-style: none; padding: 0; margin: 0; }
.pack-cell li {
padding: 0.6rem 0;
border-bottom: 1px solid var(--rule);
font-size: 0.95rem;
display: flex; align-items: flex-start; gap: 0.6rem;
}
.pack-cell li::before { content: '↳'; color: var(--primary); flex-shrink: 0; }
.pack-cell li:last-child { border-bottom: none; }
/* ============================================================
Guest testimonial — full-bleed social proof
============================================================ */
.testimonial-bleed {
position: relative;
min-height: clamp(420px, 68vh, 620px);
display: grid; align-items: center;
overflow: hidden;
isolation: isolate;
}
.testimonial-bleed .tb-media { position: absolute; inset: 0; z-index: -2; }
.testimonial-bleed .tb-media img,
.testimonial-bleed .tb-media video {
width: 100%; height: 100%; object-fit: cover;
}
.testimonial-bleed .tb-media img {
transform: scale(1.08);
animation: drift 26s ease-in-out infinite alternate;
}
.testimonial-bleed::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to right, rgba(7, 6, 4, 0.88) 0%, rgba(7, 6, 4, 0.62) 48%, rgba(7, 6, 4, 0.28) 100%);
}
.testimonial-bleed .tb-inner { max-width: 780px; padding-block: clamp(3rem, 7vw, 5rem); }
.testimonial-bleed .tb-mark {
font-family: var(--font-display);
font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: 0.4;
color: var(--primary); display: block;
}
.testimonial-bleed .tb-quote {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3.3vw, 2.7rem);
line-height: 1.26; color: var(--text-light);
margin-top: 0.8rem; letter-spacing: -0.01em;
}
.testimonial-bleed .tb-cite { margin-top: clamp(1.4rem, 2.6vw, 2.2rem); display: flex; flex-direction: column; gap: 0.35rem; }
.testimonial-bleed .tb-name {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--primary);
}
.testimonial-bleed .tb-meta {
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute);
}
/* ============================================================
Conservation impact ledger — editorial, not stat cards
============================================================ */
.impact-ledger { border-top: 1px solid var(--rule); }
.impact-row {
display: grid; grid-template-columns: minmax(110px, 0.3fr) 1fr;
gap: clamp(1rem, 3.5vw, 3.5rem); align-items: baseline;
padding: clamp(1.3rem, 2.6vw, 2.1rem) 0;
border-bottom: 1px solid var(--rule);
}
.impact-row .fig {
font-family: var(--font-display);
font-size: clamp(2.4rem, 5vw, 4rem); line-height: 0.9;
color: var(--primary); letter-spacing: -0.02em; white-space: nowrap;
}
.impact-row .fig .unit {
font-size: 0.36em; color: var(--text-mute);
margin-left: 0.18em; letter-spacing: 0.04em;
}
.impact-text { display: flex; flex-direction: column; gap: 0.45rem; }
.impact-text .k {
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.15; color: var(--text-light);
}
.impact-text .ctx {
font-family: var(--font-body); font-size: 0.92rem;
color: var(--text-mute); line-height: 1.55; max-width: 54ch;
}
@media (max-width: 600px) {
.impact-row { grid-template-columns: 1fr; gap: 0.5rem; }
}
/* ============================================================
Plan your stay — enquiry section
============================================================ */
.enquire-grid {
display: grid; grid-template-columns: 1.5fr 1fr;
gap: clamp(2rem, 4vw, 4rem); align-items: start;
}
@media (max-width: 800px) { .enquire-grid { grid-template-columns: 1fr; } }
.enquire-submit {
display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
margin-top: clamp(1.2rem, 2vw, 1.8rem);
}
.enquire-aside { display: flex; flex-direction: column; gap: clamp(1.3rem, 2.4vw, 2rem); }
.enquire-aside .ea-block {
display: flex; flex-direction: column; gap: 0.5rem;
padding-bottom: clamp(1.3rem, 2.4vw, 2rem);
border-bottom: 1px solid var(--rule);
}
.enquire-aside .ea-block:last-child { border-bottom: none; padding-bottom: 0; }
.enquire-aside .ea-k {
font-family: var(--font-mono); font-size: 9px;
letter-spacing: 0.28em; text-transform: uppercase; color: var(--primary);
}
.enquire-aside .ea-block a,
.enquire-aside .ea-v { font-family: var(--font-body); font-size: 1rem; color: var(--text-light); }
.enquire-aside .ea-block a { transition: color 0.3s ease; width: fit-content; }
.enquire-aside .ea-block a:hover { color: var(--primary); }
/* ============================================================
Inside the camp — cinematic real-photo showcase
============================================================ */
.camp-mosaic {
display: grid; grid-template-columns: 1fr;
gap: clamp(0.8rem, 1.6vw, 1.4rem);
}
.camp-pair {
display: grid; grid-template-columns: 1fr;
gap: clamp(0.8rem, 1.6vw, 1.4rem);
}
@media (min-width: 760px) {
.camp-pair { grid-template-columns: 1fr 1fr; }
}
.camp-frame {
position: relative; display: block; overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--bg-deep);
}
.camp-frame.camp-hero { aspect-ratio: 16 / 9; }
.camp-frame img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
/* Continuous ken-burns on the real camp photographs (5-10s loop) */
animation: camp-kenburns 8s ease-in-out infinite alternate;
transition: filter 0.6s ease;
filter: saturate(1.04) contrast(1.03);
}
.camp-frame:nth-child(2n) img { animation-direction: alternate-reverse; animation-duration: 10s; }
.camp-frame:nth-child(3n) img { animation-duration: 6s; }
@keyframes camp-kenburns {
0% { transform: scale(1.05) translate3d(0, 0, 0); }
100% { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}
.camp-frame::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(7, 6, 4, 0.72) 0%, rgba(7, 6, 4, 0.1) 38%, transparent 62%);
pointer-events: none;
z-index: 1;
}
.camp-caption {
position: absolute; bottom: clamp(0.8rem, 1.5vw, 1.2rem);
left: clamp(0.9rem, 1.8vw, 1.4rem);
z-index: 2;
font-family: var(--font-mono); font-size: 9px;
letter-spacing: 0.24em; text-transform: uppercase;
color: var(--text-light);
}
@media (prefers-reduced-motion: reduce) {
.camp-frame img { animation: none; transform: scale(1.04); }
}
/* ============================================================
Wildlife strip — small portraits with species name, the
"what's returned" beat inside the sanctuary section
============================================================ */
.wildlife-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(0.5rem, 1.4vw, 1.4rem);
align-items: flex-start;
margin-top: clamp(1.6rem, 3vw, 2.4rem);
padding-top: clamp(1.4rem, 2.5vw, 2rem);
border-top: 1px solid rgba(244, 236, 225, 0.18);
}
.wildlife-strip .wl {
display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
text-align: center;
min-width: 0;
}
.wildlife-strip .wl-photo {
display: block;
width: clamp(48px, 9vw, 72px); height: clamp(48px, 9vw, 72px);
border-radius: 50%;
overflow: hidden;
border: 1px solid rgba(218, 187, 134, 0.42);
transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.wildlife-strip .wl-photo img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(1.05) contrast(1.03);
}
.wildlife-strip .wl:hover .wl-photo {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(218, 187, 134, 0.16);
}
.wildlife-strip .wl em,
.wildlife-strip .wl .wl-name {
font-family: var(--font-mono);
font-size: clamp(8.5px, 2.2vw, 10px); letter-spacing: 0.2em; text-transform: uppercase;
color: var(--text-light);
font-style: normal;
font-weight: 500;
white-space: nowrap;
}
.wildlife-strip .wl .wl-when {
font-family: var(--font-mono);
font-size: clamp(7px, 1.9vw, 8.5px); letter-spacing: 0.12em; text-transform: uppercase;
color: var(--primary);
margin-top: 0.1rem;
white-space: nowrap;
}
.wildlife-strip .wl .wl-count {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(0.68rem, 1.9vw, 0.82rem);
color: rgba(244, 236, 225, 0.8);
letter-spacing: 0.01em;
white-space: nowrap;
}
/* ============================================================
Cinematic full-bleed video moments
============================================================ */
.video-moment {
position: relative;
min-height: clamp(60vh, 72vh, 82vh);
overflow: hidden;
isolation: isolate;
display: grid; place-items: center;
}
.video-moment video {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
z-index: -2;
}
.video-moment-scrim {
position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(ellipse at 50% 60%, rgba(7, 6, 4, 0.1) 0%, rgba(7, 6, 4, 0.55) 80%),
linear-gradient(to bottom, rgba(7, 6, 4, 0.5) 0%, rgba(7, 6, 4, 0.2) 35%, rgba(7, 6, 4, 0.55) 100%);
}
.video-moment-line {
text-align: center;
padding: clamp(2rem, 6vw, 5rem) var(--gutter);
max-width: min(560px, calc(100% - 2.4rem));
}
.moment-line {
font-family: var(--font-display);
font-size: clamp(2.6rem, 7.5vw, 5.4rem);
line-height: 1.02;
letter-spacing: -0.022em;
color: var(--text-light);
text-wrap: balance;
}
.moment-line > span,
.moment-line br + span,
.moment-line {
white-space: normal;
}
.moment-line .ml-row { display: block; white-space: nowrap; }
.moment-sub {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.05rem, 2vw, 1.4rem);
line-height: 1.42;
color: rgba(244, 236, 225, 0.86);
margin: clamp(1.3rem, 2.8vw, 2.1rem) auto 0;
max-width: 36ch;
letter-spacing: 0.005em;
}
/* ============================================================
People band — trackers / guides, the human warmth beat
============================================================ */
.people-band {
position: relative;
min-height: clamp(60vh, 72vh, 82vh);
overflow: hidden;
isolation: isolate;
display: grid; place-items: end center;
}
.people-band .people-bg {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
z-index: -2;
/* Continuous ken-burns (8s) to keep the still alive */
animation: people-kenburns 9s ease-in-out infinite alternate;
filter: saturate(1.05) contrast(1.04);
}
@keyframes people-kenburns {
0% { transform: scale(1.04) translate3d(0, 0, 0); }
100% { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}
.people-band .people-scrim {
position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(ellipse at 50% 80%, rgba(6, 5, 3, 0.18) 0%, rgba(6, 5, 3, 0.6) 80%),
linear-gradient(to top, rgba(6, 5, 3, 0.78) 0%, rgba(6, 5, 3, 0.22) 45%, rgba(6, 5, 3, 0.05) 75%);
}
.people-inner {
text-align: center;
padding: 0 var(--gutter) clamp(2.5rem, 6vw, 5rem);
max-width: min(900px, calc(100% - 3rem));
margin-inline: auto;
}
.people-eyebrow {
display: inline-block;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--primary);
margin-bottom: clamp(1rem, 2vw, 1.6rem);
}
.people-headline {
font-family: var(--font-display);
font-size: clamp(2.6rem, 7.5vw, 5.4rem);
line-height: 1.02;
letter-spacing: -0.022em;
color: var(--text-light);
}
.people-sub {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.05rem, 2vw, 1.4rem);
color: rgba(244, 236, 225, 0.88);
margin-top: clamp(1.3rem, 2.6vw, 2rem);
max-width: 36ch;
margin-inline: auto;
line-height: 1.42;
}
/* When the people-band background is a video, no ken-burns (footage carries motion) */
.people-band video.people-bg { animation: none; transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
.people-band .people-bg { animation: none; transform: scale(1.04); }
}
/* ============================================================
Origin statement band — the conversion fact, made prominent
============================================================ */
.statement-band {
padding-block: clamp(5rem, 12vw, 9rem);
}
.statement-band .statement-inner {
max-width: min(960px, calc(100% - 3rem));
margin-inline: auto;
text-align: center;
}
.statement-eyebrow {
display: inline-block;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--primary);
margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}
.statement-headline {
font-family: var(--font-display);
font-size: clamp(2.6rem, 7.5vw, 5.4rem);
line-height: 1.02;
letter-spacing: -0.022em;
color: var(--text-light);
}
.statement-sub {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.05rem, 1.9vw, 1.4rem);
color: var(--text-mute);
margin: clamp(1.4rem, 3vw, 2.4rem) auto 0;
max-width: 30ch;
line-height: 1.4;
}
/* Slim luxe contact row for the closing "Stay with us" section */
.contact-row {
display: flex; flex-wrap: wrap;
gap: clamp(1.4rem, 4vw, 3rem);
align-items: baseline;
margin-top: clamp(1.5rem, 3vw, 2.5rem);
padding-top: clamp(1.5rem, 3vw, 2.5rem);
border-top: 1px solid var(--rule-dark);
}
.contact-link {
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.8vw, 1.45rem);
color: var(--content);
line-height: 1.2;
padding-bottom: 0.3rem;
border-bottom: 1px solid rgba(106, 88, 60, 0.32);
transition: color 0.4s ease, border-color 0.4s ease;
}
.contact-link:hover { color: var(--secondary); border-bottom-color: var(--secondary); }
/* Tan/light enquiry section: flip form + contact text to dark ink so it stays readable */
.bg-paper .field label,
.bg-bone .field label { color: var(--secondary); }
.bg-paper .field input::placeholder,
.bg-bone .field input::placeholder,
.bg-paper .field textarea::placeholder,
.bg-bone .field textarea::placeholder { color: rgba(44, 46, 42, 0.45); }
.bg-paper .enquire-aside .ea-k { color: var(--secondary); }
.bg-paper .enquire-aside .ea-v,
.bg-paper .enquire-aside .ea-block a { color: var(--content); }
.bg-paper .enquire-aside .ea-block a:hover { color: var(--secondary); }
.bg-paper .enquire-aside .ea-block { border-bottom-color: var(--rule-dark); }
/* ============================================================
Sky panel — Sun + Moon section on the Weather page
============================================================ */
.sky-clock-wrap {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.4rem, 3vw, 2rem);
align-items: center;
padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.2rem);
border: 1px solid var(--rule);
background: rgba(13, 12, 8, 0.4);
margin-inline: auto;
max-width: 780px;
}
.sky-clock-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.4rem;
flex-wrap: wrap;
}
.sky-clock {
font-family: var(--font-display);
font-size: clamp(2.6rem, 6vw, 4.2rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--text-light);
font-variant-numeric: tabular-nums;
}
.sky-clock .secs {
font-size: 0.45em;
color: var(--text-mute);
margin-left: 0.4rem;
font-feature-settings: "tnum";
}
.sky-state {
display: flex; flex-direction: column; gap: 0.35rem;
text-align: right;
}
.sky-state .state {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--primary);
}
.sky-state .detail {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--text-mute);
letter-spacing: 0.04em;
}
.sky-arc {
width: 100%;
max-width: 100%;
height: clamp(110px, 22vw, 180px);
display: block;
}
.sky-arc [data-arc-body] {
filter: drop-shadow(0 0 8px rgba(212, 178, 130, 0.55));
transition: cx 1.2s ease-out, cy 1.2s ease-out;
}
.sky-section.is-night .sky-arc [data-arc-body],
.is-night .sky-arc [data-arc-body] {
fill: #e8e1cf;
filter: drop-shadow(0 0 10px rgba(232, 225, 207, 0.55));
}
@media (max-width: 600px) {
.sky-state { text-align: left; }
}
/* ============================================================
Mobile burger menu + full-screen overlay
============================================================ */
.nav-burger {
display: none;
width: 44px; height: 44px;
padding: 0;
border: none; background: none;
cursor: pointer;
color: inherit;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
flex-shrink: 0;
z-index: 60;
position: relative;
}
.nav-burger-bar {
display: block;
width: 22px; height: 1.5px;
background: currentColor;
transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), opacity 0.3s, width 0.3s;
transform-origin: center;
}
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(2) {
opacity: 0; width: 0;
}
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
/* Full-screen nav overlay */
.nav-overlay {
position: fixed;
inset: 0;
z-index: 49;
background: rgba(7, 6, 10, 0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
display: flex;
flex-direction: column;
padding: clamp(5.5rem, 14vh, 8rem) var(--gutter) clamp(2rem, 6vh, 4rem);
transform: translateX(100%);
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-overlay.is-open {
transform: translateX(0);
}
.nav-overlay-links {
display: flex;
flex-direction: column;
border-top: 1px solid var(--rule);
margin-bottom: auto;
}
.nav-overlay-link {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: clamp(0.8rem, 2.5vh, 1.1rem) 0;
border-bottom: 1px solid var(--rule);
font-family: var(--font-display);
font-size: clamp(2rem, 8vw, 3.4rem);
line-height: 1.1;
color: var(--text-light);
text-decoration: none;
transition: color 0.35s, padding-left 0.35s cubic-bezier(0.22,1,0.36,1);
}
.nav-overlay-link:hover,
.nav-overlay-link.is-active {
color: var(--primary);
padding-left: 0.5rem;
}
.nav-overlay-link .link-num {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--text-mute);
flex-shrink: 0;
}
.nav-overlay-link.is-active .link-num { color: var(--primary); }
.nav-overlay-footer {
margin-top: clamp(2rem, 5vh, 3rem);
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.nav-overlay-coord {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-mute);
}
/* Show burger on mobile, hide nav-cta */
@media (max-width: 800px) {
.nav-burger { display: flex; }
.nav-cta { display: none !important; }
}
/* Scroll lock when menu open */
body.nav-open { overflow: hidden; touch-action: none; }
/* ============================================================
Mobile general improvements
============================================================ */
@media (min-width: 900px) {
.section-head {
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 4vw, 4rem);
}
}
@media (max-width: 420px) {
.hero-bottom { flex-direction: column; gap: 1.2rem; }
.hero-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.btn { padding: 0.9rem 1.2rem; font-size: 11px; }
}