/* Butler font */
@font-face { font-family:'Butler'; src:url('fonts/Butler-Free-Lgt.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Butler'; src:url('fonts/Butler-Free-Rmn.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Butler'; src:url('fonts/Butler-Free-Med.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Butler'; src:url('fonts/Butler-Free-SBd.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Butler'; src:url('fonts/Butler-Free-Bd.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Butler'; src:url('fonts/Butler-Free-XBd.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Butler'; src:url('fonts/Butler-Free-Blk.woff2') format('woff2'); font-weight:900; font-display:swap; }
:root {
--ink: #111813;
--ink-soft: #111813;
--sand: #e7ce93;
--cream: #e7ce93;
--display-font: 'Butler', Georgia, serif;
--body-font: 'Inter', system-ui, -apple-system, sans-serif;
--hero-scale: 1;
--heading-scale: 1;
--body-scale: 1;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--ink);
color: var(--sand);
font-family: var(--body-font);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--sand); color: var(--ink); }
.font-display { font-family: var(--display-font); }
/* Layout */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .container { padding: 0 40px; } }
.section { padding: 96px 0; position: relative; overflow: hidden; }
@media (min-width: 1024px) { .section { padding: 128px 0; } }
.section-soft { background: rgba(231, 206, 147, 0.03); }
/* Typography */
.eyebrow {
display: inline-block;
font-family: var(--body-font);
font-size: 14px;
letter-spacing: 0.05em;
color: rgba(231, 206, 147, 0.88);
margin-bottom: 16px;
}
.heading-xl {
font-family: var(--display-font);
font-size: calc(clamp(48px, 8vw, 128px) * var(--hero-scale));
line-height: 0.95;
letter-spacing: -0.02em;
color: var(--sand);
font-weight: 700;
}
.heading-xl em { font-style: normal; color: var(--cream); }
.heading-lg {
font-family: var(--display-font);
font-size: calc(clamp(48px, 6vw, 88px) * var(--heading-scale));
line-height: 1;
letter-spacing: -0.02em;
color: var(--sand);
font-weight: 700;
}
.heading-lg em,
.about-covalt-title em,
.experiences-title em {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-weight: 500;
color: var(--sand);
letter-spacing: -0.005em;
display: block;
margin-top: -0.05em;
}
h3 { font-family: var(--display-font); color: var(--sand); }
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 999px;
font-weight: 500;
font-size: 15px;
transition: all 0.3s ease;
cursor: pointer;
border: none;
font-family: inherit;
}
/* Variants neutralised — liquid-fill .btn rules at the end of the file
own the visual treatment now. Kept as no-ops so existing markup stays
class-stable. */
.btn-primary {}
.btn-outline {}
/* Nav */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: transparent;
border-bottom: 1px solid transparent;
transition: background 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease;
}
.nav.scrolled {
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
background: rgba(17, 24, 19, 0.72);
border-bottom-color: rgba(231, 206, 147, 0.12);
}
/* Nav spans the FULL viewport width — never trapped inside the
1280px content container, so the logo sits far-left and the right
group (lang switch + CTA + burger) sits far-right at every size. */
.nav .container.nav-inner,
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
max-width: none;
width: 100%;
padding-left: clamp(20px, 3vw, 56px);
padding-right: clamp(20px, 3vw, 56px);
margin: 0;
gap: 24px;
}
.nav-logo {
flex-shrink: 0;
margin-right: auto; /* keep logo pinned to the left edge */
}
.nav-logo img { height: 40px; display: block; }
.nav-links { display: none !important; gap: 32px; }
.nav-links a {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(231, 206, 147, 0.8);
transition: color 0.2s;
}
.nav-links a:hover { color: var(--sand); }
.nav-spacer { height: 80px; }
/* Hero */
.hero {
position: sticky;
top: 0;
padding: 80px 0 clamp(64px, 9vh, 110px);
overflow: hidden;
height: 100vh;
display: flex;
align-items: flex-end;
z-index: 0;
}
.hero-spacer { display: none; }
/* Everything after the hero rises up over it as user scrolls */
.hero ~ * {
position: relative;
z-index: 2;
background: var(--ink);
}
/* Buffer that gives the about-covalt extra pin time after animation completes */
.about-covalt-buffer {
height: 80vh;
background: transparent;
position: relative;
z-index: 1;
pointer-events: none;
}
.hero-bg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
.hero-bg-overlay {
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(ellipse at 30% 40%, rgba(17,24,19,0.20) 0%, rgba(17,24,19,0.50) 65%, rgba(17,24,19,0.80) 100%),
linear-gradient(180deg, rgba(17,24,19,0.15) 0%, rgba(17,24,19,0.25) 40%, rgba(17,24,19,0.85) 100%);
pointer-events: none;
}
/* Cursor-following booking circle — entire hero is a clickable link */
.hero-cursor-link {
position: absolute;
inset: 0;
z-index: 3;
cursor: none;
display: block;
text-decoration: none;
}
.hero-cursor-circle {
position: absolute;
top: 0;
left: 0;
width: 115px;
height: 115px;
border-radius: 50%;
background: var(--sand);
pointer-events: none;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow:
0 24px 60px -12px rgba(231, 206, 147, 0.4),
0 12px 32px -8px rgba(0, 0, 0, 0.55);
will-change: transform, top, left;
}
.hero-cursor-circle.is-visible {
transform: translate(-50%, -50%) scale(1);
}
.hero-cursor-circle.is-pressed {
transform: translate(-50%, -50%) scale(0.92);
}
.hero-cursor-text-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
animation: heroCursorSpin 14s linear infinite;
transform-origin: 50% 50%;
}
.hero-cursor-text-svg text {
font-family: var(--body-font);
font-size: 18px;
font-weight: 700;
letter-spacing: 0.18em;
fill: var(--ink);
text-transform: uppercase;
}
@keyframes heroCursorSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hero-cursor-glass {
position: absolute;
top: 50%;
left: 50%;
width: 25px;
height: auto;
transform: translate(-50%, -50%);
pointer-events: none;
user-select: none;
fill: var(--ink);
}
.hero-cursor-glass path {
fill: var(--ink);
}
/* Hide custom cursor on touch devices */
@media (hover: none), (max-width: 900px) {
.hero-cursor-link { cursor: pointer; }
.hero-cursor-circle { display: none; }
}
/* Keep hero content above the cursor link visually, but let clicks fall through to the link */
.hero-content { pointer-events: none; }
.hero-content a, .hero-content button { pointer-events: auto; }
.hero-vignette {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse at center, transparent 40%, rgba(17,24,19,0.55) 100%),
radial-gradient(ellipse at 70% 30%, rgba(231,206,147,0.10) 0%, transparent 50%),
radial-gradient(ellipse at 20% 80%, rgba(231,206,147,0.06) 0%, transparent 55%);
mix-blend-mode: screen;
}
.hero-grain {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.12;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
animation: heroGrain 1.2s steps(4) infinite;
}
@keyframes heroGrain {
0% { transform: translate(0, 0); }
25% { transform: translate(-4%, 3%); }
50% { transform: translate(3%, -2%); }
75% { transform: translate(-2%, 4%); }
100% { transform: translate(0, 0); }
}
/* Gold corner ornaments — framed "luxury edition" feel */
.hero-corner {
position: absolute;
width: 72px;
height: 72px;
z-index: 1;
pointer-events: none;
opacity: 0;
animation: heroCornerIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.hero-corner::before,
.hero-corner::after {
content: '';
position: absolute;
background: linear-gradient(90deg, rgba(231,206,147,0) 0%, rgba(231,206,147,0.8) 100%);
}
.hero-corner::before { width: 100%; height: 1px; }
.hero-corner::after { width: 1px; height: 100%; }
.hero-corner-tl { top: 28px; left: 28px; }
.hero-corner-tl::before { top: 0; left: 0; }
.hero-corner-tl::after { top: 0; left: 0; background: linear-gradient(180deg, rgba(231,206,147,0.8) 0%, rgba(231,206,147,0) 100%); }
.hero-corner-tr { top: 28px; right: 28px; transform: scaleX(-1); }
.hero-corner-tr::before { top: 0; left: 0; }
.hero-corner-tr::after { top: 0; left: 0; background: linear-gradient(180deg, rgba(231,206,147,0.8) 0%, rgba(231,206,147,0) 100%); }
.hero-corner-bl { bottom: 28px; left: 28px; transform: scaleY(-1); }
.hero-corner-bl::before { top: 0; left: 0; }
.hero-corner-bl::after { top: 0; left: 0; background: linear-gradient(180deg, rgba(231,206,147,0.8) 0%, rgba(231,206,147,0) 100%); }
.hero-corner-br { bottom: 28px; right: 28px; transform: scale(-1, -1); }
.hero-corner-br::before { top: 0; left: 0; }
.hero-corner-br::after { top: 0; left: 0; background: linear-gradient(180deg, rgba(231,206,147,0.8) 0%, rgba(231,206,147,0) 100%); }
@keyframes heroCornerIn {
to { opacity: 1; }
}
@media (max-width: 768px) {
.hero-corner { width: 48px; height: 48px; }
.hero-corner-tl, .hero-corner-tr { top: 16px; }
.hero-corner-bl, .hero-corner-br { bottom: 16px; }
.hero-corner-tl, .hero-corner-bl { left: 16px; }
.hero-corner-tr, .hero-corner-br { right: 16px; }
}
/* Floating monogram watermark */
.hero-monogram {
position: absolute;
right: 8vw;
top: 50%;
transform: translateY(-50%);
width: min(34vw, 460px);
height: min(34vw, 460px);
z-index: 0;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
animation: heroMonogramIn 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards,
heroMonogramFloat 9s ease-in-out 2.5s infinite;
}
.hero-monogram-letter {
font-family: var(--display-font);
font-size: min(30vw, 420px);
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px rgba(231, 206, 147, 0.22);
text-stroke: 1px rgba(231, 206, 147, 0.22);
font-weight: 400;
font-style: italic;
}
.hero-monogram-circle {
position: absolute;
inset: 8%;
border-radius: 50%;
border: 1px solid rgba(231, 206, 147, 0.08);
}
.hero-monogram-circle::before {
content: '';
position: absolute;
inset: 10%;
border-radius: 50%;
border: 1px solid rgba(231, 206, 147, 0.05);
}
@keyframes heroMonogramIn { to { opacity: 0.55; } }
@keyframes heroMonogramFloat {
0%, 100% { transform: translateY(-50%) translateX(0); }
50% { transform: translateY(-52%) translateX(-6px); }
}
@media (max-width: 900px) { .hero-monogram { display: none; } }
.hero-shape {
position: absolute;
pointer-events: none;
opacity: 0.06;
}
.hero-shape-1 { top: -40px; left: -40px; width: 420px; }
.hero-shape-2 { bottom: 0; right: -100px; width: 520px; }
.hero-content {
position: relative;
z-index: 1;
max-width: min(1040px, calc(100vw - 2 * clamp(24px, 6vw, 120px)));
margin-left: clamp(24px, 6vw, 120px);
margin-right: auto;
text-align: left;
}
.hero-title { max-width: 100%; }
.hero-title .line-reveal {
white-space: normal;
display: block;
}
.hero-sub { max-width: 600px; }
.hero-title .line-reveal { white-space: nowrap; }
/* Eyebrow with gold lines on either side */
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
}
.hero-eyebrow-line {
display: block;
width: 48px;
height: 1px;
background: linear-gradient(90deg, rgba(231,206,147,0) 0%, rgba(231,206,147,0.75) 100%);
}
.hero-eyebrow-line:last-child {
background: linear-gradient(90deg, rgba(231,206,147,0.75) 0%, rgba(231,206,147,0) 100%);
}
.hero-eyebrow-text {
display: block;
margin: 0 0 28px 0;
font-family: var(--body-font);
font-size: 12px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--sand);
font-weight: 500;
}
.hero-title {
font-size: calc(clamp(44px, 6.2vw, 100px) * var(--hero-scale));
line-height: 0.92;
letter-spacing: -0.025em;
text-shadow: 0 2px 40px rgba(0,0,0,0.4);
}
/* Second line — lighter, italic kicker for elegant contrast */
.hero-title .line-reveal.delay-1 {
display: block;
margin-top: -0.05em;
}
.hero-title .line-reveal.delay-1 [data-edit],
.hero-title .line-reveal.delay-1 em {
font-weight: 300;
font-style: italic;
color: var(--sand);
-webkit-text-fill-color: var(--sand);
letter-spacing: -0.015em;
text-shadow: 0 0 60px rgba(231, 206, 147, 0.25);
}
/* Luxurious divider */
.hero-divider {
display: flex;
align-items: center;
gap: 14px;
margin-top: 40px;
max-width: 260px;
}
.hero-divider-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(231,206,147,0.6) 0%, rgba(231,206,147,0) 100%);
}
.hero-divider-line:last-child {
background: linear-gradient(90deg, rgba(231,206,147,0) 0%, rgba(231,206,147,0.6) 100%);
}
.hero-divider-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sand);
box-shadow: 0 0 18px rgba(231, 206, 147, 0.7);
}
.hero-sub {
margin-top: 28px;
max-width: 560px;
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif;
font-size: 22px;
line-height: 1.55;
letter-spacing: 0.005em;
color: rgba(231, 206, 147, 0.9);
font-weight: 400;
font-style: italic;
}
.hero-actions { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 16px; }
.hero-stats-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-stats-scroll.is-scrolled {
opacity: 1;
transform: translateY(0);
}
.hero-stats-scroll.is-scrolled > * { opacity: 1; transform: none; }
.hero-stats-scroll.is-scrolled > *:nth-child(1) { transition-delay: 0.05s; }
.hero-stats-scroll.is-scrolled > *:nth-child(2) { transition-delay: 0.15s; }
.hero-stats-scroll.is-scrolled > *:nth-child(3) { transition-delay: 0.25s; }
.hero-stats-scroll.is-scrolled > *:nth-child(4) { transition-delay: 0.35s; }
.hero-stats {
margin-top: 96px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border-top: 1px solid rgba(231, 206, 147, 0.18);
padding-top: 48px;
position: relative;
}
.hero-stats::before {
content: '';
position: absolute;
top: -1px;
left: 0;
width: 64px;
height: 1px;
background: var(--sand);
box-shadow: 0 0 16px rgba(231, 206, 147, 0.6);
}
.hero-stats > div {
padding: 0 28px;
position: relative;
}
.hero-stats > div + div::before {
content: '';
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 1px;
background: linear-gradient(180deg, rgba(231,206,147,0) 0%, rgba(231,206,147,0.25) 50%, rgba(231,206,147,0) 100%);
}
.hero-stats > div:first-child { padding-left: 0; }
@media (min-width: 768px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }
.stat-num {
font-family: var(--display-font);
font-size: clamp(36px, 3.4vw, 52px);
line-height: 1;
color: var(--sand);
white-space: nowrap;
overflow: visible;
}
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(231, 206, 147, 0.65); margin-top: 12px; }
/* Elegant scroll cue */
.hero-scroll-cue {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-decoration: none;
opacity: 0;
animation: heroScrollIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
}
.hero-scroll-label {
font-family: var(--body-font);
font-size: 10px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: rgba(231, 206, 147, 0.6);
writing-mode: horizontal-tb;
}
.hero-scroll-track {
position: relative;
width: 1px;
height: 56px;
background: rgba(231, 206, 147, 0.2);
overflow: hidden;
}
.hero-scroll-beam {
position: absolute;
top: -50%;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(180deg, transparent 0%, var(--sand) 100%);
animation: heroScrollBeam 2.4s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes heroScrollBeam {
0% { top: -50%; }
60% { top: 100%; }
100% { top: 100%; }
}
@keyframes heroScrollIn { to { opacity: 1; } }
/* About */
.about-grid { display: grid; gap: 64px; align-items: center; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 1fr; } }
.about-text p {
margin-top: 24px;
color: rgba(231, 206, 147, 0.88);
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif;
font-style: italic;
font-size: 19px;
line-height: 1.6;
}
/* About + events stack wrapper. position: relative makes this
the sticky containing block for BOTH .about-covalt and
.events-section inside it → their sticky range is bounded by
this wrapper's height instead of the whole body.
Wrapper height = 2 × 100vh (one viewport per pinned section)
→ after scrolling 200vh the wrapper ends and both sections
release, allowing experiences/workshops/gallery/etc. to take
over without anything bleeding through. */
.about-events-stack {
position: relative;
}
@media (min-width: 1024px) {
.about-events-stack { height: 200vh; }
}
/* Covalt-style about: sticky-pin on desktop so the next section
(events) slides UP over it as the user scrolls. Both about and
events inherit z-index: 2 from .hero ~ * → DOM order determines
stacking (events comes later, visually on top).
Mobile: relative flow only — sticky 100vh on phones extends
across the entire body scroll (no buffer release element) and
would bleed the title text through later sections, which is
exactly the bug we've been fighting. */
.about-covalt {
position: sticky;
top: 0;
height: 100vh;
min-height: 720px;
background: var(--ink);
padding: 0;
overflow: hidden;
--p: 0;
--t: 0;
}
@media (max-width: 1023px) {
.about-events-stack { height: auto; }
.about-covalt {
position: relative !important;
top: auto !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
}
.about-covalt-stage {
position: relative;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
height: 100%;
min-height: 100%;
}
.about-image {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--ink-soft);
}
.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.about-image::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
to right,
rgba(13, 22, 17, 0) 0%,
rgba(13, 22, 17, 0) 50%,
rgba(13, 22, 17, 0.4) 75%,
rgba(13, 22, 17, 0.9) 95%,
var(--ink) 100%
);
}
.about-covalt-content {
position: relative;
z-index: 2;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 18px;
padding: clamp(40px, 5vw, 80px) clamp(40px, 5vw, 80px);
height: 100%;
overflow: hidden;
}
.about-covalt-content .section-num { text-align: left; margin-bottom: 4px; }
.about-covalt-content .about-covalt-title {
text-align: left;
font-size: clamp(38px, 4.2vw, 64px);
line-height: 1;
}
.about-covalt-content .about-covalt-title em {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
display: inline-block;
}
.about-covalt-content .about-covalt-tagline {
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(18px, 1.6vw, 22px) !important;
line-height: 1.4 !important;
color: var(--sand) !important;
letter-spacing: 0 !important;
margin: 0;
max-width: 72ch;
text-align: left;
}
.about-covalt-content .about-covalt-body {
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(15px, 1.05vw, 17px) !important;
line-height: 1.6 !important;
color: var(--sand) !important;
letter-spacing: 0 !important;
text-align: left;
margin-left: 0;
margin-right: 0;
max-width: 50ch;
}
/* Mobile: stack image on top, text below */
@media (max-width: 900px) {
.about-covalt-stage { grid-template-columns: 1fr; min-height: 0; }
.about-image { aspect-ratio: 4/5; }
.about-covalt-content { max-width: 100%; padding: 60px 24px; }
}
.about-covalt-content .section-num {
margin-bottom: 12px;
color: var(--sand);
}
.about-covalt-title {
font-family: var(--display-font);
font-size: clamp(48px, 6vw, 88px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: var(--sand);
text-transform: none;
margin: 0;
}
.about-covalt-tagline {
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif;
font-style: italic;
font-size: clamp(22px, 1.9vw, 30px);
line-height: 1.4;
color: var(--sand);
max-width: 72ch;
margin: 0;
}
.about-covalt-body {
font-family: var(--body-font);
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.7;
color: rgba(231, 206, 147, 0.7);
max-width: 56ch;
margin: 12px 0 0;
}
.about-covalt-cta {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 24px;
padding: 16px 32px;
font-family: var(--body-font);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sand);
border: 1px solid var(--sand);
border-radius: 100px;
background: transparent;
transition: background 0.4s ease, color 0.4s ease;
}
.about-covalt-cta::after {
content: '→';
font-size: 14px;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-covalt-cta:hover {
background: var(--sand);
color: var(--ink);
}
.about-covalt-cta:hover::after { transform: translateX(4px); }
/* Photo stacks — flanking the title */
.about-photo-stack {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
pointer-events: none;
will-change: transform;
}
.about-photo-stack-left {
left: clamp(20px, 3vw, 60px);
}
.about-photo-stack-right {
right: clamp(20px, 3vw, 60px);
}
.about-photo {
position: relative;
width: clamp(220px, 22vw, 360px);
aspect-ratio: 3/4;
border-radius: 4px;
overflow: hidden;
background: var(--ink-soft);
border: 1px solid rgba(231, 206, 147, 0.18);
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 12px 30px -10px rgba(0, 0, 0, 0.5);
will-change: transform;
}
.about-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.about-photo:not(.has-image) img {
width: 50%;
height: auto;
margin: auto;
opacity: 0.3;
object-fit: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Photos — purely scroll-driven via JS-set --p (0 = stacked center, 1 = spread to edges) */
.about-photo-1 {
z-index: 2;
transform: translateX(calc((1 - var(--p, 0)) * 20vw)) rotate(calc(var(--p, 0) * -7deg));
}
.about-photo-2 {
position: absolute;
top: -40px;
left: 25%;
z-index: 1;
transform: translateX(calc((1 - var(--p, 0)) * 16vw)) rotate(calc(var(--p, 0) * 5deg));
}
.about-photo-3 {
z-index: 2;
transform: translateX(calc((1 - var(--p, 0)) * -20vw)) rotate(calc(var(--p, 0) * 6deg));
}
.about-photo-4 {
position: absolute;
top: -40px;
right: 25%;
z-index: 1;
transform: translateX(calc((1 - var(--p, 0)) * -16vw)) rotate(calc(var(--p, 0) * -5deg));
}
.about-covalt-tagline,
.about-covalt-body,
.about-covalt-cta {
opacity: 1;
transform: none;
}
@media (max-width: 1100px) {
.about-photo-stack { display: none; }
}
/* Original centered editorial layout (kept for fallback) */
/* Centered editorial about layout — capped at 1080px */
.about-section {
text-align: center;
padding: 80px 0;
max-height: 1080px;
}
.about-centered {
max-width: 920px;
margin: 0 auto;
padding: 0 clamp(24px, 5vw, 60px);
display: flex;
flex-direction: column;
align-items: center;
}
.about-section-num {
display: inline-block;
margin-bottom: 28px;
}
.about-bigtitle {
font-family: var(--display-font);
font-size: clamp(40px, 5.4vw, 76px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.02em;
color: var(--cream);
margin: 0 0 40px;
text-align: center;
}
.about-bigtitle em {
font-style: italic;
color: var(--sand);
}
.about-columns {
display: grid;
grid-template-columns: 1fr;
gap: clamp(28px, 4vw, 64px);
width: 100%;
max-width: 720px;
margin: 0 auto 36px;
}
@media (min-width: 720px) {
.about-columns { grid-template-columns: 1fr 1fr; }
}
.about-col {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 22px;
}
.about-col p {
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif;
font-style: italic;
font-size: clamp(15px, 1vw, 17px);
line-height: 1.55;
color: rgba(231, 206, 147, 0.82);
margin: 0;
max-width: 32ch;
}
.about-attr {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding-top: 10px;
border-top: 1px solid rgba(231, 206, 147, 0.18);
width: 60%;
}
.about-attr strong {
font-family: var(--body-font);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sand);
}
.about-attr span {
font-family: var(--body-font);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(231, 206, 147, 0.5);
}
.about-script {
font-family: var(--display-font);
font-style: italic;
font-size: clamp(24px, 2.4vw, 36px);
font-weight: 400;
color: var(--sand);
margin: 0 0 44px;
letter-spacing: -0.01em;
line-height: 1.2;
}
.about-script em { font-style: italic; }
.about-portrait {
width: 100%;
max-width: 720px;
aspect-ratio: 16/7;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(231, 206, 147, 0.18);
background: linear-gradient(135deg, rgba(231, 206, 147, 0.1), var(--ink));
display: flex;
align-items: center;
justify-content: center;
}
.about-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.about-portrait .about-portrait-fallback {
width: 30%;
height: auto;
opacity: 0.4;
object-fit: contain;
}
.about-portrait.has-image .about-portrait-fallback { display: none; }
/* Body prose styling — Amiri serif italic for descriptive paragraphs */
.exp-card-desc,
.workshops-intro,
.gallery-intro,
.contact-intro,
.experiences-intro,
.events-intro,
.faq-intro,
.exp-card-tagline,
.section-intro,
section .intro,
.review-card .quote,
.event-detail-desc {
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif !important;
font-style: italic;
}
.about-list {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
font-size: 14px;
list-style: none;
}
.about-list li { display: flex; align-items: center; gap: 12px; }
.about-list li::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sand);
display: inline-block;
}
.about-image-wrap {
position: relative;
perspective: 1400px;
overflow: visible;
}
.about-visual {
position: relative;
aspect-ratio: 4/5;
border-radius: 24px;
background: linear-gradient(135deg, rgba(231, 206, 147, 0.2), var(--ink));
border: 1px solid rgba(231, 206, 147, 0.2);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
will-change: transform, opacity;
}
.about-visual img { width: 60%; opacity: 0.8; }
.about-visual.has-image { background: var(--ink); }
.about-visual.has-image .about-visual-fallback { display: none; }
.about-badge {
position: absolute;
bottom: -24px;
left: -24px;
background: var(--sand);
color: var(--ink);
padding: 16px 24px;
border-radius: 16px;
font-family: var(--display-font);
font-size: 24px;
}
/* Services */
.services-intro { max-width: 640px; }
.services-intro p { margin-top: 24px; font-size: 18px; color: rgba(231, 206, 147, 0.88); }
.services-grid {
margin-top: 64px;
display: grid;
gap: 24px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
position: relative;
padding: 36px 32px;
border-radius: 24px;
border: 1px solid rgba(231, 206, 147, 0.15);
background: rgba(231, 206, 147, 0.03);
transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
overflow: hidden;
isolation: isolate;
display: flex;
flex-direction: column;
--mx: 50%;
--my: 50%;
}
.service-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(600px circle at var(--mx) var(--my), rgba(231, 206, 147, 0.12), transparent 40%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: -1;
}
.service-card:hover {
border-color: rgba(231, 206, 147, 0.4);
box-shadow: 0 30px 60px -20px rgba(231, 206, 147, 0.15);
transform: translateY(-3px);
}
.service-card:hover::before { opacity: 1; }
/* Tag at top — small caps pill */
.service-tag {
font-family: var(--body-font);
color: rgba(231, 206, 147, 0.75);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 14px;
}
/* Title */
.service-card h3 {
font-family: var(--display-font);
font-size: 32px;
line-height: 1.05;
color: var(--cream);
margin-bottom: 14px;
letter-spacing: -0.01em;
}
/* Description */
.service-card .desc {
color: rgba(231, 206, 147, 0.7);
font-size: 14px;
line-height: 1.55;
margin-bottom: 28px;
min-height: 64px;
}
/* Big price */
.service-price {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 24px;
}
.service-price .amount {
font-family: var(--display-font);
font-size: 44px;
line-height: 1;
color: var(--cream);
letter-spacing: -0.02em;
}
.service-price .suffix {
font-family: var(--body-font);
font-size: 13px;
color: rgba(231, 206, 147, 0.55);
}
/* Luxe "Prijs op aanvraag" block — replaces hard pricing */
.service-price-luxe {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 10px;
padding: 22px 18px 24px;
margin-bottom: 28px;
border-top: 1px solid rgba(231, 206, 147, 0.18);
border-bottom: 1px solid rgba(231, 206, 147, 0.18);
background:
radial-gradient(ellipse at center, rgba(231, 206, 147, 0.08) 0%, rgba(231, 206, 147, 0) 70%);
position: relative;
}
.service-price-luxe .price-ornament {
font-size: 14px;
color: var(--sand);
letter-spacing: 0.3em;
margin-bottom: 2px;
opacity: 0.85;
}
.service-price-luxe .price-label {
font-family: var(--display-font);
font-size: 26px;
line-height: 1.1;
letter-spacing: 0.01em;
background: linear-gradient(135deg, #f5ecd9 0%, #e7ce93 45%, #c9a95b 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.service-price-luxe .price-sub {
font-family: var(--body-font);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: rgba(231, 206, 147, 0.55);
}
/* Events note under the event types list */
.events-note {
margin-top: 40px;
text-align: center;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 19px;
line-height: 1.55;
color: var(--sand);
opacity: 0.82;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* Full-width CTA button */
.service-cta-btn {
display: block;
width: 100%;
text-align: center;
padding: 15px 20px;
border-radius: 14px;
background: var(--sand);
color: var(--ink);
font-family: var(--body-font);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
margin-bottom: 28px;
}
.service-cta-btn:hover {
background: var(--cream);
transform: translateY(-1px);
box-shadow: 0 10px 30px -10px rgba(231, 206, 147, 0.4);
}
/* Section divider with label */
.service-divider {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--body-font);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(231, 206, 147, 0.4);
margin-bottom: 18px;
}
.service-divider::before,
.service-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(231, 206, 147, 0.12);
}
/* Features list with checkmarks */
.service-features {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
font-size: 14px;
padding: 0;
margin: 0;
}
.service-features li {
display: flex;
gap: 12px;
align-items: flex-start;
color: rgba(231, 206, 147, 0.85);
line-height: 1.4;
}
.service-features li::before {
content: '';
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 1px;
border-radius: 50%;
background: rgba(231, 206, 147, 0.12);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
}
/* Featured (meest gekozen) card */
.service-card.is-featured {
border-color: rgba(231, 206, 147, 0.4);
background:
radial-gradient(ellipse at top right, rgba(231, 206, 147, 0.12), transparent 60%),
rgba(231, 206, 147, 0.04);
box-shadow: 0 30px 80px -30px rgba(231, 206, 147, 0.25);
}
.featured-pill {
position: absolute;
top: 20px;
right: 20px;
background: rgba(231, 206, 147, 0.15);
border: 1px solid rgba(231, 206, 147, 0.3);
color: var(--sand);
font-family: var(--body-font);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
white-space: nowrap;
z-index: 2;
backdrop-filter: blur(8px);
}
/* Add-ons */
.addons {
margin-top: 96px;
padding-top: 64px;
border-top: 1px solid rgba(231, 206, 147, 0.12);
}
.addons-head {
max-width: 640px;
margin-bottom: 48px;
}
.addons-eyebrow {
display: inline-block;
font-family: var(--body-font);
font-size: 13px;
color: rgba(231, 206, 147, 0.7);
letter-spacing: 0.05em;
margin-bottom: 12px;
}
.addons-title {
font-family: var(--display-font);
font-size: clamp(28px, 4vw, 44px);
color: var(--sand);
line-height: 1;
margin-bottom: 16px;
}
.addons-intro {
color: rgba(231, 206, 147, 0.88);
font-size: 16px;
line-height: 1.6;
}
.addons-grid {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .addons-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .addons-grid { grid-template-columns: repeat(3, 1fr); } }
.addon {
position: relative;
padding: 30px 28px;
border-radius: 20px;
border: 1px solid rgba(231, 206, 147, 0.15);
background: rgba(231, 206, 147, 0.03);
transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
overflow: hidden;
isolation: isolate;
display: flex;
flex-direction: column;
--mx: 50%;
--my: 50%;
}
.addon::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(500px circle at var(--mx) var(--my), rgba(231, 206, 147, 0.1), transparent 40%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: -1;
}
.addon:hover {
border-color: rgba(231, 206, 147, 0.4);
box-shadow: 0 20px 50px -20px rgba(231, 206, 147, 0.15);
transform: translateY(-3px);
}
.addon:hover::before { opacity: 1; }
.addon-tag {
font-family: var(--body-font);
color: rgba(231, 206, 147, 0.75);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 12px;
}
.addon-name {
font-family: var(--display-font);
font-size: 24px;
line-height: 1.1;
color: var(--cream);
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.addon-desc {
font-size: 13px;
color: rgba(231, 206, 147, 0.7);
line-height: 1.55;
margin-bottom: 22px;
min-height: 40px;
}
.addon-divider {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--body-font);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(231, 206, 147, 0.4);
margin-bottom: 14px;
}
.addon-divider::before,
.addon-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(231, 206, 147, 0.12);
}
.addon-price {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: auto;
}
.addon-price .amount {
font-family: var(--display-font);
font-size: 32px;
line-height: 1;
color: var(--sand);
letter-spacing: -0.02em;
}
.addon-price .suffix {
font-family: var(--body-font);
font-size: 12px;
color: rgba(231, 206, 147, 0.5);
}
/* Gallery */
.gallery-head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 24px; }
.gallery-grid {
margin-top: 64px;
display: grid;
gap: 16px;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-item {
position: relative;
aspect-ratio: 1;
border-radius: 16px;
border: 1px solid rgba(231, 206, 147, 0.1);
background: linear-gradient(135deg, rgba(231, 206, 147, 0.1), var(--ink));
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.gallery-item.tall { aspect-ratio: 3/4; grid-row: span 2; }
.gallery-item .label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
background: linear-gradient(to top, rgba(17, 24, 19, 0.9), transparent);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--sand);
}
.gallery-item .placeholder {
font-family: var(--display-font);
color: rgba(231, 206, 147, 0.4);
font-size: 18px;
text-align: center;
padding: 16px;
}
/* Reviews */
.reviews-grid {
margin-top: 64px;
display: grid;
gap: 24px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review {
position: relative;
padding: 36px;
border-radius: 24px;
border: 1px solid rgba(231, 206, 147, 0.15);
background: rgba(231, 206, 147, 0.03);
overflow: hidden;
isolation: isolate;
transform-origin: center center;
transition: border-color 1s cubic-bezier(0.22, 1, 0.36, 1),
transform 1s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 1s cubic-bezier(0.22, 1, 0.36, 1),
background 1s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--mx: 50%;
--my: 50%;
}
.review::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(600px circle at var(--mx) var(--my), rgba(231, 206, 147, 0.18), transparent 50%);
opacity: 0;
transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
z-index: -1;
}
.review:hover {
border-color: rgba(231, 206, 147, 0.5);
background: rgba(231, 206, 147, 0.06);
transform: translateY(-6px) scale(1.04);
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(231, 206, 147, 0.2);
}
.review:hover::before { opacity: 1; }
.review .stars {
color: var(--sand);
font-size: 22px;
letter-spacing: 2px;
display: inline-block;
transform-origin: left center;
transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1),
text-shadow 1s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.review:hover .stars {
transform: scale(1.08);
text-shadow: 0 0 22px rgba(231, 206, 147, 0.55);
}
.review .quote { margin-top: 24px; color: rgba(231, 206, 147, 0.85); }
.review footer {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid rgba(231, 206, 147, 0.1);
}
.review .author { font-family: var(--display-font); color: var(--sand); font-size: 18px; }
.review .event { font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(231, 206, 147, 0.5); }
/* Reviews title — sized so "Wat gasten vertellen" fits on ONE
line at every viewport, then the italic em "over de ervaring."
on the second line. white-space: nowrap on each line-part
prevents mid-line wrapping. Mobile uses a noticeably smaller
scale so the title sits comfortably in frame with breathing
room left and right. */
#reviews .heading-lg {
font-size: clamp(28px, 5.6vw, 76px);
line-height: 1.05;
white-space: nowrap;
}
#reviews .heading-lg em {
white-space: nowrap;
}
@media (max-width: 1023px) {
#reviews .heading-lg { font-size: clamp(20px, 5.6vw, 34px); }
}
@media (max-width: 480px) {
#reviews .heading-lg { font-size: clamp(18px, 5.4vw, 24px); }
}
/* ============================================================
Reviews marquee — single-row horizontal loop.
CSS-only animation (no JS scroller) for max reliability: the
JS clones the content once for seamless looping, then the
browser handles the actual motion via @keyframes. Pauses on
hover (desktop), respects prefers-reduced-motion.
============================================================ */
/* Section visibility toggles — driven by theme.js from the editor's
"Zichtbaar op de site" select fields. Hides the whole #reviews
section AND its preceding spacing so there's no orphan gap. */
html.is-reviews-hidden #reviews { display: none !important; }
.reviews-marquee {
margin-top: 64px;
width: 100%;
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
padding: 24px 0;
}
.reviews-marquee-track {
display: flex;
gap: 24px;
width: max-content;
-webkit-animation: reviewsScroll 60s linear infinite;
animation: reviewsScroll 60s linear infinite;
will-change: transform;
-webkit-transform: translateZ(0); /* force GPU compositing layer */
transform: translateZ(0);
}
/* The JS guarantees the track is always exactly 2 (or 2^N)
identical halves, so translating -50% lands the second half
pixel-perfectly on the first half = seamless infinite loop. */
@-webkit-keyframes reviewsScroll {
0% { -webkit-transform: translate3d(0, 0, 0); }
100% { -webkit-transform: translate3d(-50%, 0, 0); }
}
@keyframes reviewsScroll {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
.reviews-marquee .review {
flex: 0 0 auto;
width: 380px;
margin: 0;
}
@media (hover: hover) {
.reviews-marquee:hover .reviews-marquee-track {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
}
@media (max-width: 768px) {
.reviews-marquee .review { width: 300px; padding: 26px; }
.reviews-marquee-track {
-webkit-animation-duration: 35s;
animation-duration: 35s;
}
}
/* FAQ */
.faq-grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .faq-grid { grid-template-columns: 1fr 2fr; } }
.faq-list { border-top: 1px solid rgba(231, 206, 147, 0.1); border-bottom: 1px solid rgba(231, 206, 147, 0.1); }
.faq-item { padding: 24px 0; border-bottom: 1px solid rgba(231, 206, 147, 0.1); }
.faq-item:last-child { border-bottom: none; }
/* FAQ — sticky hero layout */
.faq-hero {
position: sticky;
top: 0;
height: 100vh;
min-height: 680px;
background: var(--ink);
z-index: 1 !important;
overflow: hidden;
display: flex;
align-items: center;
padding: 120px 0 60px;
}
.faq-hero-shape {
position: absolute;
pointer-events: none;
z-index: 0;
}
.faq-hero-shape-tl {
top: -120px;
left: -120px;
width: 460px;
opacity: 0.7;
}
.faq-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
/* Top-align so the intro text sits at the same vertical level as
the first FAQ item on the right (was 'center' which placed the
title in the visual middle while the list started at the top). */
align-items: start;
width: 100%;
}
.faq-hero-intro { max-width: 520px; }
.faq-hero-intro .section-num { display: block; margin-bottom: 24px; }
.faq-hero-title {
font-size: clamp(40px, 4.4vw, 72px);
margin-top: 0;
}
.faq-hero-sub {
margin-top: 24px;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
color: var(--sand);
opacity: 0.78;
font-size: 18px;
line-height: 1.55;
font-weight: 500;
max-width: 460px;
}
.faq-hero-sub a {
color: var(--sand);
text-decoration: underline;
text-underline-offset: 3px;
}
/* CTA button just below the FAQ intro sub-text */
.faq-hero-cta {
margin-top: 28px;
align-self: flex-start;
}
.faq-hero-list {
border-top: 1px solid rgba(231, 206, 147, 0.12);
border-bottom: 1px solid rgba(231, 206, 147, 0.12);
}
.faq-hero-list .faq-item {
padding: 18px 0;
border-bottom: 1px solid rgba(231, 206, 147, 0.1);
}
.faq-hero-list .faq-item:last-child { border-bottom: none; }
.faq-hero-list .faq-item summary {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: 22px;
letter-spacing: -0.005em;
color: var(--sand);
justify-content: space-between;
gap: 16px;
}
.faq-hero-list .faq-item[open] summary { color: var(--sand); }
/* Open / close indicator — small + that rotates to × when expanded.
Subtle but clear so it reads as 'tap to open'. */
.faq-hero-list .faq-item .icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
font-family: var(--display-font);
font-style: normal;
font-size: 22px;
line-height: 1;
color: var(--sand);
opacity: 0.7;
/* Snappy rotate + opacity — feels responsive but stays smooth. */
transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.18s ease;
transform: rotate(0deg);
}
.faq-hero-list .faq-item:hover .icon { opacity: 1; }
.faq-hero-list .faq-item[open] .icon {
transform: rotate(45deg);
opacity: 1;
}
.faq-hero-list .faq-item p {
margin-top: 10px;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 16px;
line-height: 1.6;
padding-right: 32px;
color: var(--sand);
opacity: 0.78;
/* Snappy fade-in when the details element opens */
animation: faqAnswerIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes faqAnswerIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 0.78; transform: none; }
}
@media (max-width: 1023px) {
.faq-hero {
position: relative;
height: auto;
min-height: 100vh;
padding: 100px 0 80px;
}
.faq-hero-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.faq-hero-shape-tl { width: 280px; top: -60px; left: -60px; }
}
.faq-item summary {
display: flex;
justify-content: space-between;
gap: 24px;
cursor: pointer;
list-style: none;
font-family: var(--display-font);
font-size: 20px;
color: var(--cream);
transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--sand); }
.faq-item .icon { color: var(--sand); font-size: 24px; transition: transform 0.3s; flex-shrink: 0; }
.faq-item[open] .icon { transform: rotate(45deg); }
.faq-item p { margin-top: 16px; color: rgba(231, 206, 147, 0.88); padding-right: 48px; }
/* Contact */
.contact-grid { display: grid; gap: 64px; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-info dl { margin-top: 48px; display: flex; flex-direction: column; gap: 24px; }
.contact-info dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(231, 206, 147, 0.88); }
.contact-info dd { font-family: var(--display-font); font-size: 24px; margin-top: 4px; }
.contact-info a:hover { color: var(--sand); }
.form {
padding: 32px;
border-radius: 24px;
border: 1px solid rgba(231, 206, 147, 0.15);
background: rgba(231, 206, 147, 0.03);
display: flex;
flex-direction: column;
gap: 20px;
}
@media (min-width: 1024px) { .form { padding: 40px; } }
.form-row { display: grid; gap: 20px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form label { display: block; }
.form label span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(231, 206, 147, 0.88); }
.form input, .form textarea, .form select {
margin-top: 8px;
width: 100%;
background: var(--ink);
border: 1px solid rgba(231, 206, 147, 0.2);
border-radius: 12px;
padding: 14px 16px;
color: var(--cream);
font-family: inherit;
font-size: 15px;
transition: border-color 0.2s;
}
.form input:focus, .form textarea:focus, .form select:focus {
outline: none;
border-color: var(--sand);
}
.form textarea { resize: none; }
.form button { width: 100%; justify-content: center; }
/* Footer */
.footer {
border-top: 1px solid rgba(231, 206, 147, 0.1);
background: var(--ink);
}
.footer-grid {
padding: 64px 0;
display: grid;
gap: 48px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-brand img { height: 48px; }
.footer-brand p {
margin-top: 24px;
max-width: 360px;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 16px;
line-height: 1.55;
color: var(--sand);
opacity: 0.75;
}
.footer h4 {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 16px;
letter-spacing: 0;
text-transform: none;
color: var(--sand);
margin-bottom: 16px;
font-weight: 500;
}
.footer ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 16px;
color: var(--sand);
opacity: 0.75;
}
.footer ul a:hover { opacity: 1; color: var(--sand); }
.footer-bottom {
border-top: 1px solid rgba(231, 206, 147, 0.1);
padding: 24px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 16px;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 13px;
color: var(--sand);
opacity: 0.5;
}
/* ============ INTERACTIVE SCROLL ANIMATIONS ============ */
.reveal {
opacity: 0;
transform: translateY(80px);
transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
/* Auto blur-reveal — slow, cinematic fade in/out as elements enter/exit view */
.text-blur {
filter: blur(14px);
opacity: 0;
transform: translateY(24px);
transition:
filter 2.2s cubic-bezier(0.16, 1, 0.3, 1),
opacity 2.2s cubic-bezier(0.16, 1, 0.3, 1),
transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
will-change: filter, opacity, transform;
}
.text-blur.in {
filter: blur(0);
opacity: 1;
transform: none;
}
.reveal-left { transform: translateX(-80px); }
.reveal-left.in { transform: none; }
.reveal-right { transform: translateX(80px); }
.reveal-right.in { transform: none; }
.reveal-scale { transform: scale(0.9); }
.reveal-scale.in { transform: scale(1); }
.reveal-blur { filter: blur(20px); transform: translateY(40px); }
.reveal-blur.in { filter: blur(0); transform: none; }
/* Curtain wipe (clip-path) — for big headings */
.reveal.is-clip {
opacity: 1;
transform: none;
clip-path: inset(0 100% 0 0);
transition: clip-path 1.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.reveal.is-clip.in { clip-path: inset(0 0 0 0); }
/* 3D flip up from bottom */
.reveal.is-flip {
transform: perspective(1200px) rotateX(-30deg) translateY(60px);
transform-origin: center bottom;
}
.reveal.is-flip.in { transform: none; }
/* Zoom in from large (overshoot) */
.reveal.is-zoom {
transform: scale(1.15);
filter: blur(8px);
}
.reveal.is-zoom.in { transform: scale(1); filter: none; }
/* Stagger variants */
.stagger.is-rotate > * {
transform: translateY(60px) rotate(-3deg) scale(0.95);
}
.stagger.is-rotate.in > * { transform: none; }
.stagger.is-flip > * {
transform: perspective(1000px) rotateX(-25deg) translateY(40px);
transform-origin: center bottom;
}
.stagger.is-flip.in > * { transform: none; }
.stagger.is-slide-right > * {
transform: translateX(60px);
}
.stagger.is-slide-right.in > * { transform: none; }
/* Stagger children */
.stagger > * { opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.in > *:nth-child(2) { transition-delay: 0.15s; }
.stagger.in > *:nth-child(3) { transition-delay: 0.25s; }
.stagger.in > *:nth-child(4) { transition-delay: 0.35s; }
.stagger.in > *:nth-child(5) { transition-delay: 0.45s; }
.stagger.in > *:nth-child(6) { transition-delay: 0.55s; }
.stagger.in > *:nth-child(7) { transition-delay: 0.65s; }
.stagger.in > *:nth-child(8) { transition-delay: 0.75s; }
/* Per-item scroll reveal: each card animates in as it enters viewport */
.scroll-stagger > * { opacity: 0; transform: translateY(60px) scale(0.97); transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
.scroll-stagger > .in { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; }
.scroll-stagger.is-rotate > * { transform: translateY(60px) rotate(-3deg) scale(0.97); }
.scroll-stagger.is-flip > * { transform: translateY(60px) rotateX(-12deg) scale(0.97); transform-origin: top center; }
.scroll-stagger.is-slide-right > * { transform: translateX(-60px); }
/* Heading split-line reveal */
.line-reveal {
display: block;
overflow: hidden;
padding: 0.05em 0.08em 0.1em;
margin: -0.05em -0.08em -0.1em;
}
.line-reveal > span {
display: inline-block;
transform: translateY(110%);
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.line-reveal.in > span,
.in .line-reveal > span { transform: translateY(0); }
.line-reveal.delay-1 > span { transition-delay: 0.1s; }
.line-reveal.delay-2 > span { transition-delay: 0.2s; }
.line-reveal.delay-3 > span { transition-delay: 0.3s; }
/* Parallax shapes */
[data-parallax] { will-change: transform; transition: transform 0.1s linear; }
/* Marquee */
.marquee {
overflow: hidden;
border-top: 1px solid rgba(231, 206, 147, 0.1);
border-bottom: 1px solid rgba(231, 206, 147, 0.1);
background: var(--ink);
padding: 32px 0;
}
.marquee-track {
display: flex;
gap: 64px;
white-space: nowrap;
width: max-content;
will-change: transform;
animation: marquee 40s linear infinite;
font-family: var(--display-font);
font-size: 64px;
color: var(--sand);
}
.marquee-track span {
display: inline-flex;
align-items: center;
gap: 64px;
}
.marquee-track .dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: 0.85em;
vertical-align: middle;
}
.marquee-track .dot svg {
height: 100%;
width: auto;
fill: var(--sand);
display: block;
}
@keyframes marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* Number count up base */
.count-up { display: inline-block; }
/* Cursor follow glow on hero */
.hero-glow {
position: absolute;
width: 800px;
height: 800px;
border-radius: 50%;
background: radial-gradient(circle, rgba(231, 206, 147, 0.08) 0%, transparent 60%);
pointer-events: none;
transform: translate(-50%, -50%);
left: 50%;
top: 30%;
transition: transform 0.3s ease-out;
z-index: 0;
}
/* Magnetic buttons */
.btn { position: relative; overflow: hidden; }
.btn::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.btn:hover::after { transform: translateX(100%); }
/* Section number labels */
.section-num {
font-family: var(--body-font);
font-size: 13px;
color: rgba(231, 206, 147, 0.4);
letter-spacing: 0.05em;
margin-bottom: 8px;
display: block;
text-transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal, .stagger > *, .line-reveal > span { transition: none !important; transform: none !important; opacity: 1 !important; filter: none !important; }
}
/* ============ LOADING SCREEN ============ */
html.is-loading, html.is-loading body { overflow: hidden; }
/* Green curtain loader — covers viewport with --ink background and an
animated logo video centred on top. On hide it slides DOWN off-screen,
revealing the page underneath like a stage curtain dropping. */
.loader {
position: fixed;
inset: 0;
z-index: 100;
background: var(--ink);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transform: translateY(0);
/* Snappy curtain drop — the logo video plays its full natural
duration, then the curtain slides down quickly to reveal the
page (0.5s, easeOut for a confident drop). */
transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
will-change: transform;
}
.loader.is-hidden {
transform: translateY(100%);
pointer-events: none;
}
.loader-video {
/* The WebM ships with a black background (alpha not supported in all
browsers — Safari especially). We knock the black out with a
blend-mode so only the sand-coloured logo shows through to the
green --ink page background. */
width: min(720px, 88vw);
max-height: 80vh;
height: auto;
object-fit: contain;
background: transparent;
display: block;
pointer-events: none;
mix-blend-mode: screen;
/* Soft RIGHT-edge fade — visible portion eases out to the green
background instead of cutting sharply on the right. */
-webkit-mask-image: linear-gradient(
to left,
transparent 0%,
rgba(0, 0, 0, 0.4) 12%,
rgba(0, 0, 0, 1) 24%,
rgba(0, 0, 0, 1) 100%
);
mask-image: linear-gradient(
to left,
transparent 0%,
rgba(0, 0, 0, 0.4) 12%,
rgba(0, 0, 0, 1) 24%,
rgba(0, 0, 0, 1) 100%
);
}
/* Static SVG fallback (only visible if video element is missing — covered
visually by the video as soon as it can render). */
.loader-logo-fallback {
position: absolute;
width: min(220px, 46vw);
height: auto;
opacity: 0;
pointer-events: none;
}
/* If a video is present, hide the static fallback entirely so we don't
render both on top of each other. */
.loader:has(.loader-video) .loader-logo-fallback { display: none; }
@media (max-width: 820px) {
.loader-video { width: min(560px, 92vw); max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) {
.loader { transition-duration: 0.4s; }
}
/* ============ STACK GALLERY ============ */
.stack-section { position: relative; background: var(--ink); }
/* Section grid: on desktop this becomes a 2-column layout
(title left, cards right). On mobile (default below) it's a
single column with intro filling the first viewport. */
.stack-section-grid {
position: relative;
}
@media (min-width: 1024px) {
.stack-section-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: start;
gap: 0;
max-width: 1400px;
margin: 0 auto;
padding: 0 clamp(40px, 5vw, 80px);
}
}
/* Tighter rhythm: less empty space between intro subtext and the
photo stack so the reveal starts higher on screen. */
.stack-intro { padding: 72px 0 24px; }
.stack-intro p.lead {
margin-top: 20px;
color: rgba(231, 206, 147, 0.78);
max-width: 480px;
}
/* Desktop: title sticks on the LEFT side of the section, cards
animate via their own sticky pin on the RIGHT. The user sees
the title AND the first card simultaneously as soon as the
gallery section enters the viewport. Left-aligned text. */
@media (min-width: 1024px) {
.stack-intro {
grid-column: 1;
position: sticky;
top: 0;
height: 100vh;
padding: 0;
margin: 0;
max-width: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
z-index: 2;
}
.stack-intro .section-num { margin-bottom: 24px; }
.stack-intro .heading-lg {
font-size: clamp(40px, 4.4vw, 68px);
line-height: 1.02;
max-width: 100%;
}
.stack-intro p.lead {
margin-top: 28px;
max-width: 460px;
margin-left: 0;
margin-right: auto;
}
.stack-track {
grid-column: 2;
grid-row: 1;
}
}
.stack-track {
/* Snappier reveal — less scroll distance per card so the whole
stack flies past faster. 5 cards × ~40vh ≈ 200vh total. */
height: 200vh;
position: relative;
}
.stack-pin {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.stack-stage {
position: relative;
width: min(440px, 78vw);
aspect-ratio: 3 / 4;
}
.stack-card {
position: absolute;
inset: 0;
border-radius: 28px;
overflow: hidden;
border: 1px solid rgba(231, 206, 147, 0.2);
background: linear-gradient(140deg, rgba(231,206,147,0.08), rgba(231,206,147,0.02) 50%, transparent);
background-color: var(--ink);
box-shadow:
0 30px 60px -20px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(231, 206, 147, 0.05),
inset 0 1px 0 rgba(231, 206, 147, 0.1);
display: flex;
flex-direction: column;
padding: 32px;
will-change: transform, opacity;
opacity: 0;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: border-color 1.2s cubic-bezier(0.22, 1, 0.36, 1);
isolation: isolate;
}
.stack-card::before {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(60% 60% at 50% 50%, rgba(231, 206, 147, 0.22), transparent 70%);
opacity: 0;
transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
z-index: -1;
filter: blur(18px);
will-change: opacity;
}
.stack-card:hover {
border-color: rgba(231, 206, 147, 0.45);
}
.stack-card:hover::before {
opacity: 1;
}
.stack-card .stack-card-visual {
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
transform-origin: center center;
}
.stack-card:hover .stack-card-visual {
transform: scale(1.06);
}
/* Photo-only stack card variant: image fills the whole card */
.stack-card.photo-only {
padding: 0;
}
.stack-card.photo-only .stack-card-visual {
margin: 0;
border-radius: inherit;
border: none;
flex: 1;
}
.stack-card-num {
font-family: var(--display-font);
font-size: 13px;
color: var(--sand);
letter-spacing: 0.25em;
text-transform: uppercase;
}
.stack-card-visual {
flex: 1;
margin-top: 24px;
border-radius: 20px;
background:
radial-gradient(circle at 30% 25%, rgba(231, 206, 147, 0.18), transparent 55%),
radial-gradient(circle at 75% 75%, rgba(231, 206, 147, 0.08), transparent 50%),
rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display-font);
font-size: clamp(64px, 14vw, 120px);
color: rgba(231, 206, 147, 0.25);
border: 1px solid rgba(231, 206, 147, 0.08);
position: relative;
overflow: hidden;
}
.stack-card-visual::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4));
pointer-events: none;
}
.stack-card-visual.has-image { background-color: #111813; }
.stack-card-visual.has-image > span { display: none; }
.stack-card-visual.has-image::after {
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.45));
}
/* ============================================================
GALLERY DEFAULTS — file-based, served by Netlify CDN.
Each card has a .gallery-default-N class that points to a real
JPG in /images/gallerij/. When the editor uploads a custom
photo, theme.js writes an inline background-image that wins
over these rules (inline > stylesheet). Removing the upload
clears the inline style and the CSS default kicks in again.
The .has-image class is added by theme.js so the placeholder
initials get hidden and the dark scrim is applied.
To add a new photo: drop /images/gallerij/NN.jpg, add a card
with class gallery-default-NN, and add a sibling rule below.
============================================================ */
.stack-card-visual.gallery-default-1 { background-image: url('images/gallerij/01.jpg'); }
.stack-card-visual.gallery-default-2 { background-image: url('images/gallerij/02.jpg'); }
.stack-card-visual.gallery-default-3 { background-image: url('images/gallerij/03.jpg'); }
.stack-card-visual.gallery-default-4 { background-image: url('images/gallerij/04.jpg'); }
.stack-card-visual.gallery-default-5 { background-image: url('images/gallerij/05.jpg'); }
.stack-card-visual[class*="gallery-default-"] {
background-size: cover;
background-position: center;
background-color: #111813;
}
.stack-card-visual[class*="gallery-default-"] > span { display: none; }
.stack-card-visual[class*="gallery-default-"]::after {
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.45));
}
.stack-card-meta {
margin-top: 24px;
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
}
.stack-card-meta .title {
font-family: var(--display-font);
font-size: 26px;
color: var(--cream);
line-height: 1.1;
}
.stack-card-meta .sub {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--sand);
margin-top: 6px;
}
.stack-card-meta .arrow {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(231, 206, 147, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: var(--sand);
flex-shrink: 0;
}
/* Stack progress indicator */
.stack-progress {
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
}
@media (max-width: 767px) { .stack-progress { right: 16px; } }
.stack-progress-track {
width: 2px;
height: 200px;
background: rgba(231, 206, 147, 0.15);
position: relative;
border-radius: 2px;
}
.stack-progress-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: var(--sand);
height: 0%;
border-radius: 2px;
transition: height 0.1s linear;
}
.stack-progress-text {
font-family: var(--display-font);
font-size: 12px;
color: var(--sand);
letter-spacing: 0.15em;
}
/* Stack scroll hint — removed (point 3 of mobile refinement) */
/* Boeking page — full-width stack: step 1 (packages 2-col) on top, then form */
.boeking-grid { margin-top: 64px; display: grid; gap: 32px; }
@media (min-width: 1024px) { .boeking-grid { grid-template-columns: 1fr 2fr; } }
.boeking-stack {
margin-top: 64px;
display: flex;
flex-direction: column;
gap: 48px;
}
/* Package selection block — full width, contains 2 columns inside */
.pakket-block {
display: flex;
flex-direction: column;
gap: 28px;
}
/* ============================================================
BOEKING STEP 1.5 · Personaliseer (optioneel)
Inline version of the homepage customize modal: same steppers,
same toggle rows, same field names. Visually it borrows the
.customize-stepper + .customize-addon styles from styles.css so
it picks up the matched sand-on-ink aesthetic out of the box.
============================================================ */
.boeking-extras {
margin-top: 16px;
padding: 36px clamp(20px, 4vw, 48px);
background: rgba(231, 206, 147, 0.02);
border: 1px solid rgba(231, 206, 147, 0.12);
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 28px;
}
.boeking-extras .step-label { margin-bottom: 0; }
.boeking-extras-optional {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 14px;
color: var(--sand);
opacity: 0.55;
margin-left: 4px;
}
.boeking-extras-group {
display: flex;
flex-direction: column;
gap: 14px;
}
.boeking-extras-group-label {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 14px;
letter-spacing: 0.04em;
color: var(--sand);
opacity: 0.5;
padding-bottom: 8px;
border-bottom: 1px solid rgba(231, 206, 147, 0.08);
}
.boeking-extras-steppers {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 640px) {
.boeking-extras-steppers { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.boeking-stepper {
display: flex;
flex-direction: column;
gap: 10px;
}
.boeking-stepper-label {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 14px;
color: var(--sand);
opacity: 0.78;
}
.boeking-extras-addons {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Workshop pakket picked → hide the experience-only rows. The
"Speciale wensen" goes through the existing Bericht textarea so
workshops still have a free-form field. */
.boeking-extras.is-workshop .is-experience-only { display: none; }
.boeking-extras.is-workshop {
/* When everything experience-specific is hidden the block would
collapse to just the step label — make that look intentional. */
padding-bottom: 24px;
}
/* Workshop helper note — was a ::after with hardcoded NL content,
moved to a real DOM element (.boeking-extras-workshop-note in
boeking.html) so it can be translated via data-i18n. */
.boeking-extras-workshop-note {
display: none;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 14px;
color: var(--sand);
opacity: 0.6;
line-height: 1.5;
margin: 0;
}
.boeking-extras.is-workshop .boeking-extras-workshop-note { display: block; }
.pakket-block .step-label {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 15px;
letter-spacing: 0;
text-transform: none;
color: var(--sand);
opacity: 0.85;
display: flex;
align-items: center;
gap: 10px;
}
/* Two-column grid: experiences | workshops */
.pakket-cols {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
@media (min-width: 900px) {
.pakket-cols { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (min-width: 1280px) {
.pakket-cols { gap: 48px; }
}
.pakket-col {
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
}
/* No vertical divider — the two columns sit cleanly side by side
with their own eyebrow headers; a line felt heavy against the
minimal radio rows. */
.pakket-col-head {
display: flex;
flex-direction: column;
margin-bottom: 4px;
}
.pakket-col-eyebrow {
font-family: var(--body-font);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--sand);
opacity: 0.6;
}
/* Legacy alias — keep existing .pakket-list working in case other pages
reference it; same flex-column behaviour as before. */
.pakket-list { display: flex; flex-direction: column; gap: 18px; }
.pakket-list .step-label {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 15px;
letter-spacing: 0;
text-transform: none;
color: var(--sand);
opacity: 0.85;
}
.pakket-option { cursor: pointer; display: block; position: relative; }
.pakket-option input { position: absolute; opacity: 0; pointer-events: none; }
/* ============================================================
.pakket-pick — minimal radio rows (modal aesthetic)
Replaces the older .pakket-card with detailed specs.
One row per choice: roman/number · title · subtle subtitle · dot
============================================================ */
.pakket-picks {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.pakket-picks li { margin: 0; }
.pakket-pick {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 18px;
padding: 18px 20px;
border-radius: 14px;
border: 1px solid rgba(231, 206, 147, 0.12);
background: rgba(231, 206, 147, 0.025);
cursor: pointer;
transition: border-color 0.3s ease, background 0.3s ease;
}
.pakket-pick:hover {
border-color: rgba(231, 206, 147, 0.32);
background: rgba(231, 206, 147, 0.05);
}
.pakket-pick input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.pakket-pick-num {
font-family: var(--display-font);
font-size: 16px;
color: rgba(231, 206, 147, 0.55);
letter-spacing: 0.04em;
min-width: 28px;
font-weight: 500;
}
.pakket-pick-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.pakket-pick-title {
font-family: var(--display-font);
font-size: 17px;
color: var(--sand);
letter-spacing: -0.005em;
font-weight: 500;
line-height: 1.15;
}
.pakket-pick-sub {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 14px;
color: var(--sand);
opacity: 0.6;
line-height: 1.3;
}
.pakket-pick-dot {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid rgba(231, 206, 147, 0.4);
background: transparent;
flex-shrink: 0;
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Selected state */
.pakket-pick input:checked ~ .pakket-pick-dot {
background: var(--sand);
border-color: var(--sand);
box-shadow:
inset 0 0 0 4px var(--ink),
0 0 0 1px var(--sand);
}
.pakket-pick:has(input:checked) {
border-color: rgba(231, 206, 147, 0.5);
background: rgba(231, 206, 147, 0.07);
}
.pakket-pick:has(input:checked) .pakket-pick-title { color: var(--sand); }
.pakket-pick:has(input:checked) .pakket-pick-num { color: var(--sand); opacity: 0.85; }
.pakket-pick input:focus-visible ~ .pakket-pick-dot {
outline: 2px solid var(--sand);
outline-offset: 3px;
}
/* Minimal help line under the package columns */
.pakket-help-min {
margin: 6px 0 0;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 14px;
line-height: 1.55;
color: var(--sand);
opacity: 0.55;
text-align: center;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* ============================================================
Legacy .pakket-card — kept defined but no longer used in markup.
Style preserved in case other pages reference it.
============================================================ */
.pakket-card {
position: relative;
padding: 1px;
border-radius: 22px;
background: linear-gradient(135deg,
rgba(231, 206, 147, 0.35) 0%,
rgba(231, 206, 147, 0.08) 35%,
rgba(231, 206, 147, 0.03) 60%,
rgba(231, 206, 147, 0.16) 100%);
box-shadow:
0 30px 70px -22px rgba(0, 0, 0, 0.55),
0 12px 30px -12px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(231, 206, 147, 0.1);
isolation: isolate;
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
background 0.7s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Inner card body */
.pakket-card::before {
content: '';
position: absolute;
inset: 1px;
border-radius: 21px;
background:
radial-gradient(ellipse at top right, rgba(231, 206, 147, 0.06) 0%, rgba(231, 206, 147, 0) 55%),
linear-gradient(180deg, #141c16 0%, #0e1511 100%);
z-index: 0;
}
/* Radio indicator dot */
.pakket-card::after {
content: '';
position: absolute;
top: 26px;
right: 26px;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid rgba(231, 206, 147, 0.4);
background: transparent;
transition: all 0.4s ease;
z-index: 2;
}
.pakket-card > * { position: relative; z-index: 1; }
/* Hover — quieter: no upward float, lighter border highlight only */
.pakket-option:hover .pakket-card {
transform: none;
background: linear-gradient(135deg,
rgba(231, 206, 147, 0.4) 0%,
rgba(231, 206, 147, 0.12) 50%,
rgba(231, 206, 147, 0.18) 100%);
box-shadow:
0 24px 48px -18px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(231, 206, 147, 0.15);
}
/* Selected state */
.pakket-option input:checked + .pakket-card {
background: linear-gradient(135deg,
rgba(231, 206, 147, 0.55) 0%,
rgba(231, 206, 147, 0.18) 60%,
rgba(231, 206, 147, 0.32) 100%);
box-shadow:
0 28px 60px -22px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(231, 206, 147, 0.32),
inset 0 1px 0 rgba(231, 206, 147, 0.22);
}
.pakket-option input:checked + .pakket-card::after {
background: var(--sand);
border-color: var(--sand);
box-shadow:
inset 0 0 0 4px var(--ink),
0 0 0 1px var(--sand),
0 0 14px rgba(231, 206, 147, 0.5);
}
.pakket-option input:focus-visible + .pakket-card {
outline: 2px solid var(--sand);
outline-offset: 4px;
}
/* Card content */
.pakket-card .head {
display: flex;
align-items: center;
gap: 18px;
padding: 28px 60px 0 30px;
}
.pakket-card .roman {
font-family: var(--display-font);
font-size: 34px;
line-height: 1;
color: var(--sand);
letter-spacing: 0.02em;
min-width: 32px;
}
.pakket-card .title {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 28px;
line-height: 1.1;
color: var(--sand);
letter-spacing: 0;
font-weight: 500;
}
.pakket-card .tagline {
padding: 10px 60px 0 30px;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 15px;
color: var(--sand);
opacity: 0.75;
line-height: 1.5;
}
.pakket-card .pakket-specs {
list-style: none;
margin: 20px 0 0 0;
padding: 18px 30px 26px 30px;
border-top: 1px solid rgba(231, 206, 147, 0.15);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.pakket-card .pakket-specs li {
display: flex;
flex-direction: column;
gap: 4px;
}
.pakket-card .pakket-specs span {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 13px;
letter-spacing: 0;
text-transform: none;
color: var(--sand);
opacity: 0.55;
}
.pakket-card .pakket-specs strong {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 18px;
font-weight: 500;
color: var(--sand);
}
/* Featured card — subtly brighter base */
.pakket-card.is-featured {
background: linear-gradient(135deg,
rgba(231, 206, 147, 0.55) 0%,
rgba(231, 206, 147, 0.15) 35%,
rgba(231, 206, 147, 0.05) 60%,
rgba(231, 206, 147, 0.28) 100%);
}
.datum-status { display: block; margin-top: 8px; font-size: 12px; color: rgba(231, 206, 147, 0.5); }
.datum-status.ok { color: var(--sand); }
.datum-status.bad { color: #f87171; }
/* ============================================
BOEKING PAGE — luxe redesign
============================================ */
/* Hero / intro */
.boeking-hero {
position: relative;
padding: 80px 0 64px;
overflow: hidden;
background: var(--ink);
}
.boeking-hero::before,
.boeking-hero::after { content: none; }
/* 2-column hero — text left, real Bar Naut photo right (mirrors the
about-covalt layout pattern from the homepage). On mobile the
photo stacks UNDER the text. */
.boeking-hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: center;
}
@media (min-width: 1024px) {
.boeking-hero { padding: 96px 0 88px; }
.boeking-hero-grid {
/* Wider text column so the title has more breathing room; photo
column still gets enough to feel substantial. */
grid-template-columns: 1.4fr 1fr;
gap: 72px;
}
}
.boeking-hero-visual {
position: relative;
border-radius: 18px;
overflow: hidden;
aspect-ratio: 4 / 5;
background: rgba(231, 206, 147, 0.04);
border: 1px solid rgba(231, 206, 147, 0.08);
box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.6);
max-width: 460px;
margin: 0 auto;
}
@media (min-width: 1024px) {
/* Fill the grid column up to the max-width cap, keep margin auto so
it stays centred within its grid cell. */
.boeking-hero-visual { margin: 0; aspect-ratio: 4 / 5; }
}
.boeking-hero-visual img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.boeking-hero-visual::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, transparent 55%, rgba(13, 22, 17, 0.45));
}
.boeking-intro { position: relative; max-width: 820px; }
.boeking-eyebrow {
display: inline-block;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 16px;
letter-spacing: 0;
text-transform: none;
color: var(--sand);
opacity: 0.7;
margin-bottom: 24px;
}
/* Sized to land on EXACTLY 2 lines next to the (now-smaller) hero
photo: line 1 = "Boek onze bar", line 2 = "voor jouw evenement.".
The HTML hard-wraps the lines with a
; this font-size keeps
the italic from spilling onto a third line in the ~57%-wide
text column. */
.boeking-title {
font-family: var(--display-font);
font-size: calc(clamp(38px, 4.4vw, 72px) * var(--heading-scale));
line-height: 1.06;
letter-spacing: -0.02em;
color: var(--sand);
font-weight: 700;
margin: 0;
text-wrap: balance;
}
.boeking-title em {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
color: var(--sand);
font-weight: 500;
letter-spacing: -0.005em;
}
.boeking-lede {
margin-top: 28px;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 19px;
line-height: 1.55;
color: var(--sand);
opacity: 0.78;
max-width: 580px;
}
/* Step indicator */
.boeking-steps {
display: flex;
align-items: center;
gap: 16px;
margin-top: 56px;
flex-wrap: wrap;
}
.bstep {
display: flex;
align-items: center;
gap: 12px;
opacity: 0.45;
transition: opacity 0.4s ease;
}
.bstep.is-active { opacity: 1; }
.bstep-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(231, 206, 147, 0.4);
font-family: var(--display-font);
font-size: 14px;
color: var(--sand);
background: rgba(231, 206, 147, 0.04);
}
.bstep.is-active .bstep-num {
border-color: var(--sand);
background: rgba(231, 206, 147, 0.12);
box-shadow: 0 0 0 4px rgba(231, 206, 147, 0.06);
}
.bstep-label {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 14px;
letter-spacing: 0;
text-transform: none;
color: var(--sand);
opacity: 0.85;
}
.bstep-line {
flex: 1;
min-width: 24px;
max-width: 80px;
height: 1px;
background: linear-gradient(90deg, rgba(231, 206, 147, 0.35), rgba(231, 206, 147, 0.05));
}
/* Section wrapper */
.boeking-section { padding-top: 32px; padding-bottom: 120px; }
/* Step labels with dot accent */
.step-label {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 15px;
letter-spacing: 0;
text-transform: none;
color: var(--sand);
opacity: 0.85;
margin-bottom: 8px;
}
.step-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sand);
box-shadow: 0 0 0 4px rgba(231, 206, 147, 0.12);
}
/* Featured ribbon pill */
.pakket-option:has(input[value="Signature experience"]) { padding-top: 14px; }
.pakket-card .ribbon {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
font-family: var(--body-font);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.28em;
color: var(--ink);
background: var(--sand);
padding: 8px 18px;
border-radius: 100px;
box-shadow:
0 12px 30px -8px rgba(231, 206, 147, 0.45),
0 4px 14px -4px rgba(0, 0, 0, 0.5);
z-index: 5;
white-space: nowrap;
}
.pakket-help {
margin-top: 8px;
padding: 18px 20px;
border-radius: 16px;
border: 1px dashed rgba(231, 206, 147, 0.2);
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 15px;
line-height: 1.55;
color: var(--sand);
opacity: 0.78;
display: flex;
gap: 12px;
align-items: flex-start;
}
.pakket-help-icon {
color: var(--sand);
font-size: 14px;
margin-top: 1px;
flex-shrink: 0;
}
/* "Jouw extra's" card — shown when user lands on boeking with
personalisation params. Sits in the pakket column under the help
note. Each row = label + value with the chosen quantity. */
.extras-card {
margin-top: 18px;
padding: 22px 22px 20px;
border-radius: 18px;
border: 1px solid rgba(231, 206, 147, 0.18);
background: linear-gradient(180deg, rgba(231, 206, 147, 0.06), rgba(231, 206, 147, 0.02));
display: flex;
flex-direction: column;
gap: 14px;
}
.extras-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.extras-eyebrow {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 16px;
letter-spacing: 0.01em;
color: var(--sand);
}
.extras-card-edit {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 13px;
color: var(--sand);
opacity: 0.55;
}
.extras-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.extras-item {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 8px 0;
border-bottom: 1px solid rgba(231, 206, 147, 0.08);
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
}
.extras-item:last-child { border-bottom: none; }
.extras-item-label {
font-size: 15px;
color: var(--sand);
opacity: 0.78;
}
.extras-item-value {
font-size: 16px;
color: var(--sand);
font-weight: 500;
}
/* Luxe form */
.form-luxe {
padding: 40px;
border-radius: 28px;
border: 1px solid rgba(231, 206, 147, 0.18);
background:
linear-gradient(180deg, rgba(231, 206, 147, 0.04) 0%, rgba(231, 206, 147, 0.01) 100%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.6);
gap: 24px;
}
@media (min-width: 1024px) { .form-luxe { padding: 48px; } }
/* When the form sits in the full-width .boeking-stack layout, cap its
content width so the inputs don't stretch uncomfortably on wide screens. */
.boeking-stack > .form-luxe {
width: 100%;
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
/* Live summary card */
.form-summary {
position: relative;
padding: 22px 26px;
border-radius: 18px;
border: 1px solid rgba(231, 206, 147, 0.25);
background: linear-gradient(135deg, rgba(231, 206, 147, 0.08), rgba(231, 206, 147, 0.02));
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 8px;
overflow: hidden;
}
.form-summary::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: var(--sand);
}
.form-summary-label {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 13px;
letter-spacing: 0;
text-transform: none;
color: var(--sand);
opacity: 0.6;
}
.form-summary-value {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 24px;
color: var(--sand);
margin-top: 2px;
font-weight: 500;
}
.form-summary-price {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 14px;
color: var(--sand);
opacity: 0.85;
letter-spacing: 0;
}
/* Refined fields */
.form-luxe .field { display: block; position: relative; }
.form-luxe .field span {
display: block;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 13px;
letter-spacing: 0;
text-transform: none;
color: var(--sand);
opacity: 0.75;
margin-bottom: 10px;
}
.form-luxe input,
.form-luxe textarea,
.form-luxe select {
margin-top: 0;
width: 100%;
background: rgba(11, 15, 28, 0.6);
border: 1px solid rgba(231, 206, 147, 0.15);
border-radius: 14px;
padding: 18px 20px;
color: var(--cream);
font-family: inherit;
font-size: 15px;
letter-spacing: 0.01em;
transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.form-luxe input::placeholder,
.form-luxe textarea::placeholder {
color: rgba(231, 206, 147, 0.3);
font-style: italic;
}
.form-luxe input:hover,
.form-luxe textarea:hover,
.form-luxe select:hover {
border-color: rgba(231, 206, 147, 0.3);
background: rgba(11, 15, 28, 0.75);
}
.form-luxe input:focus,
.form-luxe textarea:focus,
.form-luxe select:focus {
outline: none;
border-color: var(--sand);
background: rgba(11, 15, 28, 0.85);
box-shadow: 0 0 0 4px rgba(231, 206, 147, 0.08), 0 12px 30px -20px rgba(231, 206, 147, 0.4);
}
.form-luxe select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23e7ce93' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 22px center;
padding-right: 48px;
}
.form-luxe input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(0.7) sepia(0.5) saturate(2) hue-rotate(10deg);
cursor: pointer;
}
.form-luxe textarea { resize: none; line-height: 1.55; }
/* Premium submit button */
.boeking-submit {
font-size: 16px !important;
padding: 22px 32px !important;
border-radius: 16px !important;
letter-spacing: 0.02em;
margin-top: 8px;
width: 100%;
justify-content: center;
position: relative;
}
/* Trust signals row */
.trust-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px 28px;
padding-top: 8px;
border-top: 1px solid rgba(231, 206, 147, 0.1);
margin-top: 4px;
}
.trust-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 14px;
letter-spacing: 0;
text-transform: none;
color: var(--sand);
opacity: 0.7;
padding-top: 14px;
}
.trust-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(231, 206, 147, 0.15);
color: var(--sand);
font-size: 10px;
font-weight: 700;
}
/* Responsive tweaks */
@media (max-width: 1023px) {
.boeking-steps { gap: 12px; }
.bstep-line { max-width: 30px; }
.bstep-label { display: none; }
.form-luxe { padding: 28px; }
}
/* ============================================================
BOEKING BEVESTIGD — confirmation page after form submission
============================================================ */
.confirm-hero {
position: relative;
background: var(--ink);
padding: 140px 0 160px;
overflow: hidden;
min-height: calc(100vh - 200px);
display: flex;
align-items: center;
}
.confirm-hero::before {
content: '';
position: absolute;
top: -180px;
right: -180px;
width: 520px;
height: 520px;
border-radius: 50%;
background:
radial-gradient(circle, rgba(231, 206, 147, 0.10) 0%, rgba(231, 206, 147, 0) 65%);
pointer-events: none;
z-index: 0;
}
.confirm-inner {
position: relative;
z-index: 1;
max-width: 640px;
margin: 0 auto;
text-align: center;
}
.confirm-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
border-radius: 50%;
border: 1px solid rgba(231, 206, 147, 0.35);
background: linear-gradient(135deg, rgba(231, 206, 147, 0.12), rgba(231, 206, 147, 0.02));
color: var(--sand);
margin-bottom: 36px;
box-shadow:
0 0 0 8px rgba(231, 206, 147, 0.04),
0 30px 80px -28px rgba(231, 206, 147, 0.2),
inset 0 1px 0 rgba(231, 206, 147, 0.18);
}
.confirm-eyebrow {
display: inline-block;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 16px;
color: var(--sand);
opacity: 0.7;
margin-bottom: 24px;
}
.confirm-title {
font-family: var(--display-font);
font-size: clamp(44px, 6.5vw, 84px);
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--sand);
font-weight: 700;
margin: 0;
}
.confirm-title em {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-weight: 500;
color: var(--sand);
}
.confirm-lede {
margin: 28px auto 0;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 20px;
line-height: 1.55;
color: var(--sand);
opacity: 0.78;
max-width: 520px;
}
/* "Wat nu" steps */
.confirm-list {
list-style: none;
margin: 56px auto 48px;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
max-width: 480px;
text-align: left;
}
.confirm-list li {
display: flex;
align-items: center;
gap: 18px;
padding: 18px 22px;
border-radius: 16px;
border: 1px solid rgba(231, 206, 147, 0.14);
background: linear-gradient(135deg, rgba(231, 206, 147, 0.04), rgba(231, 206, 147, 0.01));
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 16px;
color: var(--sand);
opacity: 0.92;
line-height: 1.45;
}
.confirm-list-num {
flex-shrink: 0;
font-family: var(--display-font);
font-style: normal;
font-size: 14px;
color: var(--sand);
opacity: 0.55;
letter-spacing: 0.18em;
width: 32px;
}
/* CTA row */
.confirm-cta-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-top: 8px;
}
.confirm-cta-row .btn-ghost {
background: transparent;
color: var(--sand);
border: 1px solid rgba(231, 206, 147, 0.35);
padding: 14px 28px;
border-radius: 100px;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 16px;
text-decoration: none;
transition: background 0.3s, border-color 0.3s;
}
.confirm-cta-row .btn-ghost:hover {
background: rgba(231, 206, 147, 0.06);
border-color: rgba(231, 206, 147, 0.5);
}
.confirm-note {
margin-top: 44px;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 14px;
color: var(--sand);
opacity: 0.55;
line-height: 1.55;
}
.confirm-note a {
color: var(--sand);
text-decoration: underline;
text-underline-offset: 3px;
opacity: 0.85;
}
@media (max-width: 768px) {
.confirm-hero { padding: 80px 0 100px; }
.confirm-icon { width: 72px; height: 72px; margin-bottom: 28px; }
.confirm-title { font-size: clamp(36px, 9vw, 56px); }
.confirm-lede { font-size: 17px; margin-top: 22px; }
.confirm-list { margin: 40px auto 36px; }
.confirm-list li { padding: 16px 18px; font-size: 15px; }
}
/* ============================================
WORKSHOPS — horizontal scroll on vertical scroll
============================================ */
.workshops-h {
position: relative;
/* 3 slides → need 2 extra viewport heights of scroll past the
stage to traverse them. 100vh stage + 200vh extra = 300vh. */
height: 300vh;
background: var(--ink);
}
.workshops-h-stage {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.workshops-h-head {
padding-top: 140px;
padding-bottom: 80px;
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: 720px;
}
.workshops-h-head .section-num {
color: var(--sand);
margin-bottom: 8px;
display: block;
}
.workshops-h-head .eyebrow { margin-top: 12px; }
.workshops-h-title {
margin-top: 18px;
margin-bottom: 0;
max-width: 1200px;
font-size: clamp(40px, 4.5vw, 76px);
line-height: 0.98;
letter-spacing: -0.02em;
font-weight: 700;
color: var(--sand);
word-break: break-word;
overflow-wrap: break-word;
}
.workshops-h-title em {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-weight: 500;
color: var(--sand);
letter-spacing: -0.005em;
display: block;
margin-top: -0.18em;
line-height: 1;
}
.workshops-h-head .section-sub {
margin-top: 16px;
margin-left: auto;
margin-right: auto;
max-width: 56ch;
text-align: center;
}
/* Progress indicator */
.workshops-h-progress {
position: absolute;
top: 100px;
right: 32px;
z-index: 5;
display: flex;
align-items: center;
gap: 16px;
padding: 12px 18px;
border-radius: 100px;
background: rgba(11, 15, 28, 0.4);
border: 1px solid rgba(231, 206, 147, 0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.workshops-h-progress-line {
width: 80px;
height: 2px;
background: rgba(231, 206, 147, 0.2);
border-radius: 2px;
overflow: hidden;
}
.workshops-h-progress-fill {
width: 100%;
height: 100%;
background: var(--sand);
transform-origin: left center;
transform: scaleX(0);
transition: transform 0.15s linear;
}
.workshops-h-progress-count {
font-family: var(--display-font);
font-size: 14px;
color: var(--sand);
letter-spacing: 0.05em;
}
/* Horizontal track */
.workshops-h-track {
display: flex;
width: max-content;
height: 100%;
will-change: transform;
}
.workshop-slide {
flex: 0 0 100vw;
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
}
/* Intro slide — full-bleed centered title + subtext, mirrors the
experiences `.exp-row-intro` pattern. */
.workshop-slide.workshop-slide-intro {
display: flex;
align-items: center;
justify-content: center;
padding: 0 clamp(40px, 8vw, 140px);
grid-template-columns: none;
}
.workshop-slide-intro-content {
max-width: 1100px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 22px;
}
.workshop-slide-intro-content .section-num {
display: block;
color: var(--sand);
margin-bottom: 4px;
}
.workshop-slide-intro-content .workshops-h-title {
max-width: 100%;
width: 100%;
display: block;
text-align: center;
margin: 0;
}
.workshop-slide-intro-sub {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.55;
color: var(--sand);
opacity: 0.78;
max-width: 60ch;
margin: 0 auto;
}
.workshop-slide-media {
position: relative;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at 60% 50%, rgba(231, 206, 147, 0.12), transparent 60%),
var(--ink);
background-size: cover;
background-position: center;
}
.workshop-slide.has-image .workshop-slide-media {
background-size: cover;
background-position: center;
}
/* ============================================================
WORKSHOP DEFAULT PHOTOS — set via CSS rather than inline HTML
styles. When the editor uploads a custom photo, theme.js sets
an inline `background-image` on the element, which wins over
these CSS rules (inline > stylesheet). When nothing is stored
(or the user clears the upload), the inline style is gone and
these CSS defaults take over again. So the same element is
both editable AND has a sensible fallback baked in.
============================================================ */
.workshop-slide[data-index="1"] .workshop-slide-media {
background-image: url('images/workshops/essential.jpg');
background-size: cover;
background-position: center 28%;
background-color: var(--ink);
}
.workshop-slide[data-index="2"] .workshop-slide-media {
background-image: url('images/workshops/experience.jpg');
background-size: cover;
background-position: center 38%;
background-color: var(--ink);
}
.workshop-slide-media::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
to right,
rgba(13, 22, 17, 0) 0%,
rgba(13, 22, 17, 0.15) 30%,
rgba(13, 22, 17, 0.6) 60%,
rgba(13, 22, 17, 0.95) 85%,
var(--ink) 100%
);
}
.workshop-slide-body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 5vw;
min-width: 0;
overflow: hidden;
}
.workshop-slide-num {
font-family: var(--display-font);
font-size: 14px;
letter-spacing: 0.25em;
color: rgba(231, 206, 147, 0.6);
margin-bottom: 16px;
}
.workshop-slide-title {
font-family: var(--display-font);
font-size: clamp(40px, 4.5vw, 76px);
line-height: 0.98;
color: var(--sand);
margin: 0 0 24px;
letter-spacing: -0.02em;
font-weight: 700;
max-width: 100%;
word-break: break-word;
overflow-wrap: break-word;
}
.workshop-slide-title em {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-weight: 500;
color: var(--sand);
letter-spacing: -0.005em;
display: block;
margin-top: -0.18em;
line-height: 1;
}
.workshop-slide:nth-child(2) .workshop-slide-title { color: var(--sand); }
.workshop-slide-tagline {
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(18px, 1.4vw, 22px) !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--sand) !important;
margin: 0 0 24px;
max-width: 38ch;
}
.workshop-slide-desc {
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif;
font-style: italic;
font-size: 18px;
line-height: 1.55;
color: var(--sand);
max-width: 540px;
margin: 0 0 32px;
}
.workshop-slide-specs {
list-style: none;
margin: 0 0 36px;
padding: 24px 0 0;
border-top: 1px solid rgba(231, 206, 147, 0.18);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 18px 32px;
max-width: 580px;
}
.workshop-slide-specs li {
display: flex;
flex-direction: column;
gap: 4px;
}
.workshop-slide-specs span {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 10px;
color: rgba(231, 206, 147, 0.55);
}
.workshop-slide-specs strong {
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif;
font-style: italic;
color: var(--sand);
font-weight: 400;
font-size: 16px;
}
.workshop-slide-cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 20px 36px;
border: 1px solid var(--sand);
border-radius: 999px;
color: var(--ink);
background: var(--sand);
text-decoration: none;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 600;
align-self: flex-start;
transition: background 0.3s ease, color 0.3s ease, gap 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 8px 24px rgba(231, 206, 147, 0.18);
}
.workshop-slide-cta:hover {
background: var(--cream);
border-color: var(--cream);
color: var(--ink);
gap: 18px;
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(231, 206, 147, 0.28);
}
/* Scroll hint */
.workshops-scroll-hint {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex;
align-items: center;
gap: 12px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: rgba(231, 206, 147, 0.5);
pointer-events: none;
}
.workshops-scroll-hint-arrow {
display: inline-block;
font-size: 16px;
color: var(--sand);
animation: hintBounce 1.8s ease-in-out infinite;
}
@keyframes hintBounce {
0%, 100% { transform: translateY(0); opacity: 0.6; }
50% { transform: translateY(6px); opacity: 1; }
}
/* ============================================
EXPERIENCES — 3 premium cards
============================================ */
/* ============ EXPERIENCES — HORIZONTAL SCROLL ============
Outer is 4× viewport tall; inner is sticky-pinned 100vh and acts as the
horizontal viewport. The track flexes side-by-side and is translated
on the X-axis based on vertical scroll progress (see inline JS). */
.experiences {
position: relative;
background: var(--ink);
padding: 0;
height: 400vh;
}
.experiences-rows-wrap {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
.experiences-rows {
height: 100%;
}
.experiences-rows-track {
display: flex;
flex-wrap: nowrap;
height: 100%;
width: max-content;
will-change: transform;
}
/* Intro panel — first horizontal slide, centered text */
.exp-row-intro {
display: flex !important;
align-items: center;
justify-content: center;
padding: 0 clamp(40px, 8vw, 140px);
border-left: none !important;
border-bottom: none !important;
box-shadow: none !important;
width: 100vw;
height: 100vh;
flex-shrink: 0;
}
.exp-intro-content {
max-width: 1500px;
width: 100%;
display: flex;
flex-direction: column;
gap: 24px;
text-align: center;
align-items: center;
}
.exp-intro-content .experiences-title {
max-width: 100% !important;
width: 100%;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.exp-intro-content .experiences-title em {
white-space: nowrap;
display: table;
width: auto;
max-width: 100%;
text-align: center;
margin-left: auto !important;
margin-right: auto !important;
}
.exp-row-intro .section-num {
color: var(--sand);
margin-bottom: 8px;
}
.exp-row-intro .experiences-title {
margin: 0;
}
.exp-row-intro .experiences-bespoke-sub,
.exp-row-intro .experiences-bespoke-sub em,
.exp-row-intro .experiences-bespoke-sub span {
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
color: var(--sand) !important;
letter-spacing: 0 !important;
font-size: 17px !important;
line-height: 1.55 !important;
}
.exp-row-intro .experiences-bespoke-sub {
margin-top: 16px;
margin-left: auto !important;
margin-right: auto !important;
max-width: 56ch;
text-align: center !important;
width: 100%;
display: block;
}
/* Each package slide: photo extends across the left half with a long fade
into the dark right side where the text sits. */
.exp-row {
width: 100vw;
height: 100vh;
flex-shrink: 0;
position: relative;
display: block;
background: var(--ink);
border-left: 1px solid rgba(231, 206, 147, 0.08);
overflow: hidden;
}
.exp-row:first-child,
.exp-row.exp-row-intro { border-left: none; }
.exp-row + .exp-row { margin-top: 0; }
/* Horizontal scroll progress indicator — pill-shaped, top-right (matches
the workshops progress) */
.exp-progress {
position: absolute;
top: 100px;
right: 32px;
z-index: 10;
display: flex;
align-items: center;
gap: 16px;
padding: 12px 18px;
border-radius: 100px;
background: rgba(11, 15, 28, 0.4);
border: 1px solid rgba(231, 206, 147, 0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
pointer-events: none;
}
.exp-progress-track {
width: 80px;
height: 2px;
background: rgba(231, 206, 147, 0.2);
border-radius: 2px;
position: relative;
overflow: hidden;
}
.exp-progress-bar {
position: absolute;
inset: 0;
background: var(--sand);
transform-origin: left center;
transform: scaleX(0);
transition: transform 0.15s linear;
}
.exp-progress-count {
font-family: var(--display-font);
font-size: 14px;
letter-spacing: 0.05em;
color: var(--sand);
}
.exp-progress-count strong {
color: var(--sand);
font-weight: 400;
}
.exp-progress-hint {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
font-family: var(--display-font);
font-style: italic;
font-size: 13px;
letter-spacing: 0.1em;
color: rgba(231, 206, 147, 0.55);
pointer-events: none;
display: flex;
align-items: center;
gap: 12px;
}
.exp-progress-hint::after {
content: '';
width: 32px;
height: 1px;
background: var(--sand);
animation: hintArrow 2s ease-in-out infinite;
}
@keyframes hintArrow {
0%, 100% { transform: translateX(0); opacity: 0.4; }
50% { transform: translateX(8px); opacity: 1; }
}
/* Mobile fallback: stack vertically as before */
@media (max-width: 1023px) {
/* ============================================================
MOBILE — STICKY STACKED CARDS (experiences + workshops)
Each card is exactly 100vh and `position: sticky; top: 0`.
Layout INSIDE every card:
IMAGE (top, ~38vh, no border line)
──────
CONTENT (title, text, specs)
CTAs (pinned to the bottom of the card)
All content fits in 100vh — nothing is clipped, nothing
overlaps the image. As the user scrolls, the next card
slides up over the previous one.
============================================================ */
/* Stage containers — no clipping, no transforms */
.experiences { height: auto; }
.experiences-rows-wrap { position: relative; height: auto; overflow: visible; }
.experiences-rows-track {
display: block !important;
flex-direction: column;
width: 100% !important;
height: auto !important;
transform: none !important;
}
/* Workshops + experiences — sticky-stack containers. Height is
auto so the parent grows exactly to the sum of its sticky
children's heights (100dvh × n cards). Background is ink so any
incidental flash during the unstick handoff to the next section
stays on-brand. */
.workshops-h,
.experiences-rows {
height: auto !important;
background: var(--ink);
}
.workshops-h-stage {
position: static !important;
height: auto !important;
overflow: visible !important;
}
.workshops-h-track {
display: block !important;
flex-direction: column;
width: 100% !important;
height: auto !important;
transform: none !important;
}
.exp-progress, .exp-progress-hint, .workshops-h-progress { display: none; }
/* Reveal animations kept fully intact on mobile (gallery
stack-card fade-in, section title slide-in, etc.) — the
earlier global disable was killing the cinematic feel. */
/* ============================================================
MOBILE CARDS — FULL-VIEWPORT PANELS (natural flow)
Each card is a panel of at least 100vh — image on top, content
below, BOTH CTAs (Personaliseer above Boek via column-reverse)
always rendered inside the card body. Cards grow past 100vh if
content needs more, so nothing is ever clipped. As the user
scrolls past the bottom of a card, the next panel slides up
naturally from below.
This replaces an earlier sticky 100dvh approach which kept
clipping the bottom CTA on Safari iOS (URL-bar state changes
made the card taller than visible, hiding whatever was at the
bottom).
============================================================ */
.exp-row,
.exp-row-intro,
.workshop-slide {
position: relative !important;
top: auto !important;
width: 100% !important;
height: auto !important;
min-height: 100vh !important;
overflow: visible !important;
background: var(--ink) !important;
border: none !important;
margin: 0 !important;
padding: 0;
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
contain: layout paint !important;
}
/* Intro slides — centred title block (no image), generous padding */
.exp-row-intro,
.workshop-slide.workshop-slide-intro {
align-items: center;
justify-content: center;
padding: 80px 24px 60px !important;
}
/* IMAGE — generous on natural-flow panels (no longer competing
with content for 100vh). 42vh feels substantial without
dominating the panel. */
.exp-row-image,
.workshop-slide-media {
position: relative !important;
top: auto !important;
left: auto !important;
width: 100% !important;
height: 42vh !important;
min-height: 260px !important;
max-height: 420px !important;
flex: 0 0 auto !important;
border: none !important;
box-shadow: none !important;
}
.exp-row-image::after,
.workshop-slide-media::after {
background: linear-gradient(
180deg,
rgba(13, 22, 17, 0) 70%,
rgba(13, 22, 17, 0.65) 92%,
var(--ink) 100%
) !important;
}
/* CONTENT — natural flow below the image, NO overflow:hidden so
every element (title, tagline, desc, specs, BOTH CTAs) is
always visible. */
.exp-row-content,
.workshop-slide-body {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
flex: 1 1 auto !important;
min-height: 0 !important;
padding: 28px 24px 40px !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
max-width: 100% !important;
}
/* Typography — generous, readable, no line-clamp on desc */
.exp-row-num,
.workshop-slide-num {
font-size: 12px !important;
margin-bottom: 6px !important;
letter-spacing: 0.2em;
}
.exp-row-title,
.workshop-slide-title {
font-size: clamp(36px, 9.5vw, 52px) !important;
line-height: 1.0 !important;
margin: 0 0 8px !important;
}
.exp-row-tagline,
.workshop-slide-tagline {
display: block !important;
font-size: 14px !important;
margin: 0 0 4px !important;
line-height: 1.45 !important;
}
.exp-row-desc,
.workshop-slide-desc {
font-size: 14px !important;
line-height: 1.55 !important;
margin: 0 !important;
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
}
.exp-row-specs,
.workshop-slide-specs {
grid-template-columns: 1fr 1fr !important;
gap: 8px 20px !important;
padding-top: 16px !important;
margin: 10px 0 4px !important;
}
.exp-row-specs li span,
.workshop-slide-specs li span { font-size: 10px !important; letter-spacing: 0.18em; }
.exp-row-specs li strong,
.workshop-slide-specs li strong { font-size: 14px !important; }
/* CTAs — both fully visible below the content. column-reverse
puts "Personaliseer" ABOVE "Boek" as requested. No
margin-top:auto needed since cards have auto height — the
natural flex order pins the buttons exactly below the content. */
.exp-row-cta-group,
.workshop-slide-cta-group {
margin-top: 20px !important;
display: flex !important;
flex-direction: column-reverse !important;
gap: 10px !important;
width: 100% !important;
padding-top: 8px !important;
flex: 0 0 auto !important;
}
.exp-row-cta-group > .exp-row-cta,
.workshop-slide-cta-group > .workshop-slide-cta {
width: 100% !important;
justify-content: center !important;
padding: 13px 22px !important;
font-size: 15px !important;
}
}
/* Alternate rows: image on right */
.exp-row-alt .exp-row-image { order: 2; }
.exp-row-alt .exp-row-content { order: 1; }
/* Image takes the left ~50% of the slide; a long, soft gradient fades it
gradually from 50% to ~95% so the transition into the text area is smooth. */
.exp-row-image {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
overflow: hidden;
}
.exp-row-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
object-position: center center;
}
/* Per-photo framing — vertical only; with portrait images in this
landscape container the X-axis of object-position has no effect
(the image fits the container width exactly). */
.exp-row-image img[src*="signature"] {
object-position: center 70%;
}
.exp-row-image img[src*="exclusief"] {
object-position: center 30%;
}
.exp-row-image img[src*="intieme"] {
object-position: center center;
}
/* Photo container is 50% wide. Long, soft horizontal fade — mirrors
the workshop-slide-media fade timing for a consistent, premium
right-edge transition into the dark text column. */
.exp-row-image::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
to right,
rgba(13, 22, 17, 0) 0%,
rgba(13, 22, 17, 0.15) 30%,
rgba(13, 22, 17, 0.6) 60%,
rgba(13, 22, 17, 0.95) 85%,
var(--ink) 100%
);
}
.exp-row-pill {
display: inline-block;
margin-left: 8px;
padding: 5px 12px;
border-radius: 100px;
background: var(--sand);
color: var(--ink);
font-family: var(--body-font);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1;
}
/* Content column — vertically centered inside the sticky card */
.exp-row-content {
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(48px, 6vh, 96px) clamp(40px, 4vw, 80px);
z-index: 2;
}
/* Number — small label at top, matching workshop-slide-num */
.exp-row-num {
font-family: var(--display-font);
font-size: 14px;
letter-spacing: 0.25em;
color: rgba(231, 206, 147, 0.6);
margin-bottom: 16px;
}
/* Row that pairs the number label with an optional badge (e.g.
"Meest gekozen" on the Signature card). When this wrapper is
present it owns the bottom-margin instead of the .exp-row-num. */
.exp-row-num-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.exp-row-num-row .exp-row-num { margin-bottom: 0; }
.exp-row-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border: 1px solid rgba(231, 206, 147, 0.4);
border-radius: 999px;
background: rgba(231, 206, 147, 0.08);
color: var(--sand);
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 13px;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* Hide the badge entirely if the editor clears the text */
.exp-row-badge:empty { display: none; }
/* Title — slightly smaller, italic em on second line */
.exp-row-title {
font-family: var(--display-font);
font-size: clamp(40px, 4.5vw, 76px);
line-height: 0.98;
letter-spacing: -0.02em;
color: var(--sand);
margin: 0 0 24px;
font-weight: 700;
max-width: 100%;
word-break: break-word;
overflow-wrap: break-word;
}
.exp-row-title em {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-weight: 500;
color: var(--sand);
letter-spacing: -0.005em;
display: block;
margin-top: -0.18em;
line-height: 1;
}
/* Tagline — Amiri italic instead of uppercase eyebrow (per spec: subtexts in arabic) */
.exp-row-tagline {
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(18px, 1.4vw, 22px) !important;
line-height: 1.4 !important;
color: var(--sand) !important;
letter-spacing: 0 !important;
text-transform: none !important;
margin: 0 0 24px;
max-width: 38ch;
}
.exp-row-desc {
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif;
font-style: italic;
font-size: 18px;
line-height: 1.55;
color: var(--sand);
max-width: 540px;
margin: 0 0 32px;
}
/* Specs grid — mirrors workshop-slide-specs */
.exp-row-specs {
list-style: none;
margin: 0 0 36px;
padding: 24px 0 0;
border-top: 1px solid rgba(231, 206, 147, 0.18);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 18px 32px;
max-width: 580px;
}
.exp-row-specs li {
display: flex;
flex-direction: column;
gap: 4px;
}
.exp-row-specs span {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 10px;
color: rgba(231, 206, 147, 0.55);
}
.exp-row-specs strong {
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif;
font-style: italic;
color: var(--sand);
font-weight: 400;
font-size: 16px;
}
/* CTA — mirrors workshop-slide-cta */
.exp-row-cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 20px 36px;
border: 1px solid var(--sand);
border-radius: 999px;
color: var(--ink);
background: var(--sand);
text-decoration: none;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 600;
align-self: flex-start;
transition: background 0.3s ease, color 0.3s ease, gap 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 8px 24px rgba(231, 206, 147, 0.18);
}
.exp-row-cta:hover {
background: var(--cream);
border-color: var(--cream);
color: var(--ink);
gap: 18px;
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(231, 206, 147, 0.28);
}
@media (max-width: 900px) {
/* Mobile structural overrides handled by the 1023px sticky-stack
block — only ordering helpers remain here. */
.exp-row-alt .exp-row-image { order: 1; }
.exp-row-alt .exp-row-content { order: 2; }
}
.experiences-head {
padding-bottom: 70px;
text-align: left;
position: relative;
}
.experiences-bespoke-sub {
margin-top: 24px;
max-width: 60ch;
}
.experiences-bespoke-icon { display: none; }
.experiences-head .section-num { color: var(--sand); }
.experiences-head .eyebrow { margin-top: 12px; }
.experiences-title {
margin-top: 18px;
max-width: 18ch;
}
.experiences-intro {
margin-top: 24px;
color: rgba(231, 206, 147, 0.72);
font-size: 17px;
line-height: 1.6;
max-width: 60ch;
}
.experiences-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
position: relative;
}
.experience-card {
position: relative;
border-radius: 24px;
padding: 1px;
background: linear-gradient(135deg,
rgba(231, 206, 147, 0.5) 0%,
rgba(231, 206, 147, 0.1) 35%,
rgba(231, 206, 147, 0.03) 60%,
rgba(231, 206, 147, 0.18) 100%);
box-shadow:
0 40px 100px -20px rgba(0, 0, 0, 0.55),
0 18px 42px -12px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(231, 206, 147, 0.12);
display: flex;
isolation: isolate;
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.9s cubic-bezier(0.22, 1, 0.36, 1),
background 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Ambient sand glow behind the card on hover */
.experience-card::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 26px;
background: radial-gradient(ellipse at 50% 0%, rgba(231, 206, 147, 0.28) 0%, rgba(231, 206, 147, 0) 60%);
opacity: 0;
filter: blur(22px);
transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
z-index: -1;
}
.experience-card:hover {
transform: translateY(-6px);
background: linear-gradient(135deg,
rgba(231, 206, 147, 0.65) 0%,
rgba(231, 206, 147, 0.18) 40%,
rgba(231, 206, 147, 0.08) 65%,
rgba(231, 206, 147, 0.28) 100%);
box-shadow:
0 50px 120px -20px rgba(0, 0, 0, 0.6),
0 22px 50px -14px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(231, 206, 147, 0.18);
}
.experience-card:hover::before { opacity: 0.6; }
.experience-card:hover .exp-corner {
border-color: rgba(231, 206, 147, 0.85);
}
.experience-card .exp-corner {
transition: border-color 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.experience-card:hover .exp-card-cta {
color: var(--cream);
letter-spacing: 0.28em;
}
.experience-card .exp-card-cta {
transition: color 0.5s ease, letter-spacing 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Reveal-on-scroll animation */
.experience-card.reveal-card {
opacity: 0;
transform: translateY(60px) scale(0.96);
transition:
opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.experience-card.reveal-card.is-in {
opacity: 1;
transform: translateY(0) scale(1);
}
.experience-card.reveal-card.is-in:hover {
transform: translateY(-8px) scale(1);
}
@media (prefers-reduced-motion: reduce) {
.experience-card.reveal-card {
opacity: 1;
transform: none;
}
}
.experience-card.is-featured {
background: linear-gradient(135deg,
rgba(231, 206, 147, 0.8) 0%,
rgba(231, 206, 147, 0.22) 35%,
rgba(231, 206, 147, 0.08) 60%,
rgba(231, 206, 147, 0.38) 100%);
box-shadow:
0 45px 110px rgba(0, 0, 0, 0.55),
0 22px 50px rgba(231, 206, 147, 0.1),
inset 0 1px 0 rgba(231, 206, 147, 0.22);
}
.exp-card-inner {
position: relative;
width: 100%;
border-radius: 23px;
padding: 40px 36px 36px;
background:
radial-gradient(ellipse at top right, rgba(231, 206, 147, 0.09) 0%, rgba(231, 206, 147, 0) 50%),
radial-gradient(ellipse at bottom left, rgba(231, 206, 147, 0.05) 0%, rgba(231, 206, 147, 0) 50%),
linear-gradient(180deg, #141c16 0%, #0e1511 100%);
display: flex;
flex-direction: column;
}
/* Corner ornaments */
.exp-card-corners {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: 27px;
}
.exp-corner {
position: absolute;
width: 38px;
height: 38px;
border-color: rgba(231, 206, 147, 0.5);
border-style: solid;
border-width: 0;
}
.exp-corner.tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; border-top-left-radius: 10px; }
.exp-corner.tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; border-top-right-radius: 10px; }
.exp-corner.bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; border-bottom-left-radius: 10px; }
.exp-corner.br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; border-bottom-right-radius: 10px; }
/* Meta row (Roman numeral + tag) */
.exp-card-meta {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.exp-card-num {
font-family: var(--display-font);
font-size: 40px;
line-height: 1;
letter-spacing: 0.02em;
background: linear-gradient(135deg, #f5ecd9 0%, #e7ce93 45%, #c9a95b 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.exp-card-divider {
display: inline-block;
width: 34px;
height: 1px;
background: rgba(231, 206, 147, 0.5);
}
.exp-card-tag {
font-family: var(--body-font);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.28em;
color: rgba(231, 206, 147, 0.75);
}
.exp-featured-pill {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
padding: 8px 18px;
border-radius: 100px;
font-family: var(--body-font);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.28em;
color: var(--ink);
background: var(--sand);
box-shadow:
0 12px 30px -8px rgba(231, 206, 147, 0.45),
0 4px 14px -4px rgba(0, 0, 0, 0.5);
white-space: nowrap;
z-index: 5;
}
.exp-card-title {
font-family: var(--display-font);
font-size: clamp(28px, 2.2vw, 34px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--cream);
margin: 0;
}
.exp-card-tagline {
margin-top: 10px;
font-family: var(--body-font);
font-size: 14px;
font-style: italic;
color: var(--sand);
line-height: 1.5;
}
.exp-card-desc {
margin-top: 14px;
font-size: 14px;
line-height: 1.65;
color: rgba(231, 206, 147, 0.72);
}
.exp-card-specs {
margin-top: 24px;
list-style: none;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 20px;
border-top: 1px solid rgba(231, 206, 147, 0.15);
padding-top: 20px;
}
.exp-card-specs li {
display: flex;
flex-direction: column;
gap: 4px;
}
.exp-card-specs span {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: rgba(231, 206, 147, 0.5);
}
.exp-card-specs strong {
font-family: var(--display-font);
font-size: 18px;
font-weight: 400;
color: var(--cream);
letter-spacing: -0.01em;
}
.exp-card-includes {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 14px;
}
.exp-card-includes-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.28em;
color: var(--sand);
padding-bottom: 12px;
border-bottom: 1px solid rgba(231, 206, 147, 0.2);
}
.exp-card-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.exp-card-features li {
position: relative;
padding-left: 22px;
font-size: 14px;
line-height: 1.5;
color: rgba(231, 206, 147, 0.82);
}
.exp-card-features li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sand);
box-shadow: 0 0 0 3px rgba(231, 206, 147, 0.15);
}
.exp-card-cta {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid rgba(231, 206, 147, 0.15);
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--sand);
font-family: var(--body-font);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.22em;
text-decoration: none;
transition: color 0.3s ease;
}
.exp-card-cta > span { transition: transform 0.3s ease; display: inline-block; }
.exp-card-cta:hover { color: var(--cream); }
.exp-card-cta:hover > span { transform: translateX(4px); }
@media (max-width: 1023px) {
/* Workshops mobile — all structural overrides live in the main
sticky-stacked block above. This is only kept as a no-op buffer
to avoid breaking specificity expectations of nearby rules. */
.workshops-h-progress { display: none; }
}
/* ============================================
ADDONS NOTE — replaces old addons grid
============================================ */
.addons-note {
margin-top: 80px;
padding: 32px 36px;
border-radius: 20px;
border: 1px dashed rgba(231, 206, 147, 0.28);
background: linear-gradient(180deg, rgba(231, 206, 147, 0.04), rgba(231, 206, 147, 0.01));
display: flex;
align-items: flex-start;
gap: 24px;
max-width: 900px;
}
.addons-note-icon {
font-size: 24px;
color: var(--sand);
line-height: 1;
flex-shrink: 0;
}
.addons-note strong {
display: block;
font-family: var(--display-font);
font-size: 22px;
color: var(--cream);
font-weight: 400;
margin-bottom: 6px;
}
.addons-note span {
display: block;
font-size: 15px;
line-height: 1.6;
color: rgba(231, 206, 147, 0.65);
}
@media (max-width: 640px) {
.addons-note { flex-direction: column; padding: 28px; gap: 16px; }
}
/* ============================================
FLATPICKR — Bar Naut theme override
============================================ */
.flatpickr-calendar {
background: #0b0f1c !important;
border: 1px solid rgba(231, 206, 147, 0.25) !important;
border-radius: 18px !important;
box-shadow:
0 30px 80px -20px rgba(0, 0, 0, 0.8),
0 0 0 1px rgba(231, 206, 147, 0.05),
0 0 60px -10px rgba(231, 206, 147, 0.15) !important;
font-family: var(--font) !important;
padding: 8px !important;
width: 320px !important;
overflow: hidden;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { display: none !important; }
/* Header / month nav */
.flatpickr-months {
padding: 12px 8px 8px;
border-bottom: 1px solid rgba(231, 206, 147, 0.1);
margin-bottom: 8px;
}
.flatpickr-months .flatpickr-month {
color: var(--cream) !important;
height: auto;
}
.flatpickr-current-month {
font-family: var(--display-font) !important;
font-size: 18px !important;
padding: 4px 0 !important;
color: var(--cream) !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
background: transparent !important;
color: var(--cream) !important;
font-family: var(--display-font) !important;
font-size: 18px !important;
font-weight: 400 !important;
appearance: none;
-webkit-appearance: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
background: rgba(231, 206, 147, 0.08) !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-month {
background: #0b0f1c !important;
color: var(--cream) !important;
}
.flatpickr-current-month input.cur-year {
color: var(--sand) !important;
font-family: var(--display-font) !important;
font-weight: 400 !important;
}
.flatpickr-current-month .numInputWrapper:hover {
background: rgba(231, 206, 147, 0.06) !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp::after { border-bottom-color: var(--sand) !important; }
.flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color: var(--sand) !important; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
fill: var(--sand) !important;
color: var(--sand) !important;
padding: 12px !important;
top: 8px !important;
border-radius: 10px;
transition: background 0.2s;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--cream) !important; }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
background: rgba(231, 206, 147, 0.08);
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--sand) !important; }
/* Weekday labels */
.flatpickr-weekdays {
background: transparent !important;
height: 32px;
}
.flatpickr-weekday {
color: rgba(231, 206, 147, 0.6) !important;
background: transparent !important;
font-family: var(--font) !important;
font-size: 10px !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.12em;
}
/* Day grid */
.flatpickr-days { padding: 4px 0 8px; width: 100% !important; }
.dayContainer { width: 100% !important; min-width: 100% !important; max-width: 100% !important; padding: 0 4px; }
.flatpickr-day {
color: var(--cream) !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 10px !important;
font-family: var(--font) !important;
font-size: 13px !important;
max-width: 40px !important;
height: 40px !important;
line-height: 38px !important;
margin: 2px 0;
transition: background 0.2s, color 0.2s, transform 0.2s;
}
.flatpickr-day:hover {
background: rgba(231, 206, 147, 0.1) !important;
border-color: rgba(231, 206, 147, 0.25) !important;
color: var(--cream) !important;
transform: translateY(-1px);
}
.flatpickr-day.today {
border-color: rgba(231, 206, 147, 0.5) !important;
color: var(--sand) !important;
font-weight: 600;
}
.flatpickr-day.today:hover {
background: rgba(231, 206, 147, 0.15) !important;
color: var(--sand) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
background: var(--sand) !important;
border-color: var(--sand) !important;
color: var(--ink) !important;
font-weight: 700;
box-shadow: 0 6px 18px -6px rgba(231, 206, 147, 0.5);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
color: rgba(231, 206, 147, 0.18) !important;
}
.flatpickr-day.flatpickr-disabled:hover {
background: transparent !important;
border-color: transparent !important;
transform: none;
cursor: not-allowed;
}
/* Smooth fade-in animation */
.flatpickr-calendar.animate.open {
animation: fpFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fpFadeIn {
from { opacity: 0; transform: translateY(-6px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Make the date input feel like it has a calendar icon. max-width
100% + min-width 0 keeps the input contained inside the form
even when flatpickr injects its own sizing. */
.form-luxe input[readonly]#datum-input {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e7ce93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 20px center;
padding-right: 52px;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.form-luxe .field { min-width: 0; }
.form-luxe .form-row > .field { min-width: 0; }
/* Flatpickr calendar popup — keep it inside the viewport on mobile.
The default fixed 320px width can sit off-screen on small phones. */
@media (max-width: 480px) {
.flatpickr-calendar {
width: calc(100vw - 32px) !important;
max-width: 320px !important;
left: 16px !important;
}
}
/* ============ EVENTS — 4 animated cards (no images) ============ */
.events-cards {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: none;
}
/* Static event cards — display-only, no click interaction. We
deliberately do NOT add a hover style here: the cursor JS dims
the site cursor on these elements so it reads as "informational
slab" rather than "interactive button". */
.event-card {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 200px;
padding: 28px 26px 30px;
background: rgba(231, 206, 147, 0.02);
border: 1px solid rgba(231, 206, 147, 0.14);
border-radius: 14px;
overflow: hidden;
}
.event-card-num {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 15px;
letter-spacing: 0.04em;
color: var(--sand);
font-weight: 500;
}
.event-card-title {
margin: auto 0 0;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: clamp(32px, 2.7vw, 44px);
line-height: 1.05;
letter-spacing: 0;
color: var(--sand);
font-weight: 700;
}
.event-card-meta {
margin: 8px 0 0;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 16px;
letter-spacing: 0;
text-transform: none;
color: var(--sand);
opacity: 0.65;
transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.event-card-arrow { display: none; }
/* Mobile: 2x2, then stacked */
@media (max-width: 1023px) {
.events-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.event-card { min-height: 220px; padding: 24px 22px; }
}
@media (max-width: 600px) {
.events-cards { grid-template-columns: 1fr; gap: 10px; }
.event-card { min-height: 160px; }
}
/* ============ EVENTS LIST (hover-reveal) ============ */
/* Events: sticky-pin section that slides UP OVER the about-covalt
section as the user scrolls. About-covalt comes earlier in DOM
flow → as soon as events sticks at viewport top:0, it visually
covers the about section (both inherit z-index: 2 from the
.hero ~ * rule, but events is later in DOM so it stacks on top).
Later sections (experiences, workshops, gallery) come after
events in DOM and slide UP OVER events in turn. */
.events-section {
position: sticky;
top: 0;
overflow: hidden;
background: var(--ink);
height: 100vh;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: clamp(60px, 8vh, 100px);
padding-bottom: clamp(40px, 5vh, 70px);
}
@media (max-width: 1023px) {
/* On phones the sticky pin range extends for the entire body
scroll (no buffer-release element) and causes visible
bleed-through into later sections — same problem the
about-covalt section had on phones. Keep events as a
normal block-flow section on mobile. */
.events-section {
position: relative !important;
top: auto !important;
height: auto !important;
min-height: 100vh !important;
z-index: auto !important;
}
}
.events-section .container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
gap: clamp(48px, 7vh, 96px);
max-width: 1480px;
}
/* Compact title for events when shown inside the pinned 100vh viewport */
.events-section .events-intro { margin-bottom: 0; }
.events-section .heading-lg {
font-size: calc(clamp(40px, 5vw, 72px) * var(--heading-scale));
}
.events-section .events-sub {
margin-top: 28px;
font-size: 18px;
line-height: 1.55;
max-width: 60ch;
}
.events-section .event-card {
min-height: 0;
padding: 28px 28px 32px;
gap: 14px;
justify-content: space-between;
}
.events-section .event-card-title {
font-size: clamp(26px, 2.2vw, 36px);
margin-top: 0;
}
.events-section .event-card-meta {
font-size: 16px;
line-height: 1.5;
}
.events-section .events-note {
margin-top: 0;
font-size: 17px;
}
.events-intro {
max-width: 720px;
margin-bottom: 64px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.events-intro .eyebrow { color: var(--sand); }
.events-sub {
margin-top: 20px;
color: rgba(231, 206, 147, 0.7);
font-size: 17px;
line-height: 1.7;
font-weight: 300;
}
/* Generic section subtitle (used across sections that lacked one) */
.section-sub {
margin-top: 20px;
color: rgba(231, 206, 147, 0.7);
font-size: 17px;
line-height: 1.7;
font-weight: 300;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* === UNIFIED SECTION HEAD SYSTEM ===
Every main section uses the same head pattern:
- section-num (small eyebrow, sand)
- heading-lg title with em accent (block, italic)
- section-sub (light cream subtitle)
All left-aligned within max-width: 720px for vertical rhythm.
.about-covalt-content is the special centered hero exception. */
.events-intro,
.exp-intro-content,
.workshops-h-head,
.stack-intro,
.services-intro {
max-width: 720px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.events-intro .section-num,
.exp-intro-content .section-num,
.workshops-h-head .section-num,
.stack-intro .section-num,
.services-intro .section-num {
display: block;
color: var(--sand);
margin-bottom: 8px;
}
.events-intro .heading-lg,
.exp-intro-content .heading-lg,
.workshops-h-head .heading-lg,
.stack-intro .heading-lg,
.services-intro .heading-lg {
margin: 0 auto;
max-width: 100%;
}
.events-intro .section-sub,
.exp-intro-content .section-sub,
.workshops-h-head .section-sub,
.stack-intro .section-sub,
.services-intro .section-sub,
.events-intro .events-sub,
.events-intro .lead,
.stack-intro .lead,
.exp-intro-content .experiences-bespoke-sub {
margin-top: 16px;
margin-left: auto;
margin-right: auto;
max-width: 56ch;
text-align: center;
font-size: 17px;
line-height: 1.7;
font-weight: 300;
color: rgba(231, 206, 147, 0.7);
}
/* About section keeps its centered hero treatment with floating cards */
.about-covalt-content {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.about-covalt-title {
margin-left: auto;
margin-right: auto;
}
.events-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid rgba(231, 206, 147, 0.14);
position: relative;
z-index: 2;
}
.events-row {
position: relative;
display: grid;
grid-template-columns: 80px auto 1fr auto;
align-items: center;
gap: 32px;
padding: 38px 8px;
border-bottom: 1px solid rgba(231, 206, 147, 0.14);
cursor: pointer;
transition:
padding 0.8s cubic-bezier(0.22, 1, 0.36, 1),
color 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.events-row:last-child {
border-bottom: none;
}
.events-row-spacer {
position: relative;
align-self: stretch;
pointer-events: none;
}
.events-row::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(231,206,147,0.05) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.events-row:hover {
padding-left: 32px;
}
.events-row:hover::before { opacity: 1; }
.events-row-num {
font-family: var(--body-font);
font-size: 12px;
letter-spacing: 0.25em;
color: rgba(231, 206, 147, 0.55);
font-weight: 500;
transition: color 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.events-row-title {
font-family: var(--display-font);
font-size: clamp(32px, 4.2vw, 58px);
line-height: 1.05;
transition:
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
letter-spacing 0.9s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.9s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
background: linear-gradient(180deg, #f5e3b3 0%, #e7ce93 50%, #c9a869 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.events-row:hover .events-row-title {
letter-spacing: 0.005em;
}
.events-row:hover .events-row-num {
color: var(--sand);
}
.events-row-meta {
font-family: var(--body-font);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(231, 206, 147, 0.45);
text-align: right;
margin-right: 40px;
transition: color 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.events-row:hover .events-row-meta { color: rgba(231, 206, 147, 0.55); }
/* Dim the other rows when hovering the list */
.events-list:hover .events-row:not(:hover) .events-row-title { opacity: 0.3; filter: saturate(0.7); }
.events-list:hover .events-row:not(:hover) .events-row-num { color: rgba(231, 206, 147, 0.2); }
.events-list:hover .events-row:not(:hover) .events-row-meta { color: rgba(231, 206, 147, 0.18); }
/* Preview image — centered inside the flexible gap between title and meta,
with its vertical center on the row's top divider line */
.events-row-preview {
position: absolute;
left: 50%;
top: 0;
width: 170px;
height: 210px;
transform: translate(-50%, -50%) rotate(-4deg) scale(0.92);
pointer-events: none;
z-index: 4;
border-radius: 3px;
overflow: hidden;
box-shadow:
0 40px 80px -20px rgba(0, 0, 0, 0.85),
0 0 0 1px rgba(231, 206, 147, 0.2);
opacity: 0;
transition:
opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, opacity;
}
.events-row-preview-img {
position: absolute;
inset: 0;
display: block;
background-size: cover;
background-position: center;
}
.events-row:hover .events-row-preview {
opacity: 1;
transform: translate(-50%, -50%) rotate(-4deg) scale(1);
}
/* Alternate rotation direction per row for variation */
.events-row:nth-child(2n) .events-row-preview {
transform: translate(-50%, -50%) rotate(5deg) scale(0.92);
}
.events-row:nth-child(2n):hover .events-row-preview {
transform: translate(-50%, -50%) rotate(5deg) scale(1);
}
@media (max-width: 1280px) {
.events-row-preview { width: 150px; height: 190px; }
}
@media (max-width: 1100px) {
.events-row-preview { width: 130px; height: 170px; }
}
@media (max-width: 900px) {
.events-row { grid-template-columns: 48px 1fr; gap: 20px; padding: 28px 4px; }
.events-row-meta { display: none; }
.events-row:hover { padding-left: 12px; }
.events-row-preview { display: none; }
}
/* ============ LANGUAGE SWITCHER ============ */
.nav-right {
display: flex;
align-items: center;
gap: 20px;
}
.lang-switch {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border: 1px solid rgba(231, 206, 147, 0.18);
border-radius: 999px;
background: rgba(17, 24, 19, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.lang-switch button {
background: transparent;
border: none;
padding: 2px 4px;
font-family: var(--body-font);
font-size: 11px;
letter-spacing: 0.18em;
font-weight: 500;
color: rgba(231, 206, 147, 0.45);
text-transform: uppercase;
cursor: pointer;
transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.lang-switch button:hover { color: rgba(231, 206, 147, 0.85); }
.lang-switch button.active { color: var(--sand); }
.lang-sep {
width: 1px;
height: 10px;
background: rgba(231, 206, 147, 0.25);
display: inline-block;
}
@media (max-width: 900px) {
.lang-switch { padding: 6px 10px; gap: 8px; }
.lang-switch button { font-size: 10px; }
}
/* ============================================
============ MOBILE OPTIMISATION ============
============================================ */
/* Hamburger button — visible on all viewports */
.nav-burger {
display: block;
width: 40px;
height: 40px;
border: 1px solid rgba(231, 206, 147, 0.2);
background: rgba(17, 24, 19, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 10px;
cursor: pointer;
padding: 0;
position: relative;
}
.nav-burger span {
display: block;
position: absolute;
left: 10px;
right: 10px;
height: 1.5px;
background: var(--sand);
border-radius: 2px;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.3s ease,
top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-burger span:nth-child(1) { top: 13px; }
.nav-burger span:nth-child(2) { top: 19px; }
.nav-burger span:nth-child(3) { top: 25px; }
.nav-burger.open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
/* Full-screen mobile nav overlay */
/* Right-side panel menu (Montanja-style) */
.nav-mobile {
display: flex;
position: fixed;
top: 84px;
right: 24px;
bottom: auto;
left: auto;
width: clamp(320px, 36vw, 460px);
max-height: calc(100vh - 108px);
background: var(--ink);
border: 1px solid rgba(231, 206, 147, 0.14);
border-radius: 16px;
z-index: 49;
flex-direction: column;
padding: 28px 32px 24px;
gap: 0;
opacity: 0;
pointer-events: none;
transform: translateY(-8px) scale(0.98);
transform-origin: top right;
transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
overflow-y: auto;
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.nav-mobile.open {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.nav-mobile-main {
display: flex;
flex-direction: column;
gap: 0;
}
.nav-mobile-main a {
font-family: var(--display-font);
font-size: clamp(22px, 2vw, 30px);
color: var(--cream);
text-decoration: none;
padding: 14px 0;
display: flex;
justify-content: space-between;
align-items: center;
letter-spacing: -0.01em;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-mobile-main a:hover { color: var(--sand); }
.nav-mobile-arrow {
font-size: 16px;
color: rgba(231, 206, 147, 0.4);
transition: transform 0.3s ease, color 0.3s ease;
}
.nav-mobile-main a:hover .nav-mobile-arrow {
color: var(--sand);
transform: translate(2px, -2px);
}
.nav-mobile-foot {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(231, 206, 147, 0.12);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.nav-mobile-foot-links,
.nav-mobile-foot-social {
display: flex;
gap: 18px;
}
.nav-mobile-foot a {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 14px;
letter-spacing: 0;
color: var(--sand);
opacity: 0.65;
text-decoration: none;
transition: opacity 0.3s ease;
}
.nav-mobile-foot a:hover { opacity: 1; }
.nav-mobile-foot a:hover { color: var(--sand); }
body.nav-open { overflow: hidden; }
@media (max-width: 600px) {
.nav-mobile {
top: 76px;
right: 12px;
left: 12px;
width: auto;
max-width: none;
}
}
/* ---------- Mobile (max-width: 820px) ---------- */
@media (max-width: 820px) {
/* Show hamburger, hide desktop nav links and desktop CTA */
.nav-links { display: none !important; }
.nav-burger { display: block; }
.nav-mobile { display: flex; }
.nav-right { gap: 10px; }
.nav-cta { display: none; }
.lang-switch { padding: 6px 10px; gap: 8px; }
.lang-switch button { font-size: 10px; letter-spacing: 0.15em; }
/* Container padding */
.container { padding: 0 20px; }
.section { padding: 72px 0; }
/* Hero: allow title wrap, tighter spacing */
.hero { padding: 60px 0 100px; min-height: auto; }
.hero-title .line-reveal { white-space: normal; }
.hero-title {
font-size: calc(clamp(46px, 14vw, 76px) * var(--hero-scale));
line-height: 1.02;
}
.hero-eyebrow { margin-bottom: 22px; gap: 10px; }
.hero-eyebrow-line { width: 28px; }
.hero-eyebrow-text { font-size: 10px; letter-spacing: 0.22em; }
.hero-sub { font-size: 15px; margin-top: 20px; line-height: 1.6; }
.hero-actions { margin-top: 30px; gap: 12px; }
.hero-actions .btn { width: 100%; justify-content: center; }
.hero-divider { max-width: 180px; margin-top: 28px; }
.hero-stats {
margin-top: 52px;
padding-top: 32px;
gap: 24px 0;
grid-template-columns: repeat(2, 1fr);
}
.hero-stats > div { padding: 0 16px; }
.hero-stats > div:first-child,
.hero-stats > div:nth-child(3) { padding-left: 0; }
.hero-stats > div:nth-child(3)::before,
.hero-stats > div:nth-child(4)::before { content: none; }
.stat-num { font-size: 36px; }
.stat-label { font-size: 10px; letter-spacing: 0.15em; margin-top: 6px; }
.hero-scroll-cue { bottom: 20px; }
.hero-scroll-label { font-size: 9px; }
.hero-scroll-track { height: 40px; }
.hero-shape { display: none; }
/* About section */
.about-grid { gap: 40px; }
.about-text .heading-lg { font-size: clamp(40px, 10vw, 56px) !important; max-width: 100% !important; line-height: 1.05; }
.about-list { grid-template-columns: 1fr; gap: 12px; }
.about-badge {
left: 50% !important;
right: auto !important;
bottom: auto !important;
top: 50% !important;
transform: translate(-50%, -50%);
padding: 14px 26px;
font-size: 22px;
text-align: center;
}
/* Section numbers/eyebrows */
.section-num { font-size: 11px; }
.heading-lg { font-size: clamp(38px, 10vw, 56px); line-height: 1.05; }
/* Events list */
.events-intro { margin-bottom: 40px; }
.events-list { border-top-color: rgba(231, 206, 147, 0.14); }
.events-row {
grid-template-columns: 36px 1fr !important;
gap: 16px !important;
padding: 22px 0 !important;
align-items: baseline;
}
.events-row-num { font-size: 10px; letter-spacing: 0.2em; }
.events-row-title { font-size: clamp(38px, 11vw, 56px) !important; line-height: 1.02; }
.events-row-meta { display: none; }
.events-row:hover { padding-left: 0 !important; }
/* Services / pakketten */
.services-intro { margin-bottom: 40px; }
.services-grid { grid-template-columns: 1fr !important; gap: 20px; }
.service-card { padding: 28px 22px; }
.service-card h3 { font-size: 26px; }
.service-features { font-size: 14px; }
.service-price .amount { font-size: 30px; }
.service-price-luxe { padding: 18px 14px 20px; margin-bottom: 22px; }
.service-price-luxe .price-label { font-size: 22px; }
.service-price-luxe .price-sub { font-size: 10px; }
.events-note { margin-top: 32px; font-size: 14px; padding: 0 8px; }
/* Experiences — stack on tablet/mobile */
.experiences { padding-top: 70px; padding-bottom: 50px; }
.experiences-head { padding-bottom: 36px; padding-top: 0; }
.experiences-title { font-size: clamp(38px, 10vw, 56px); line-height: 1.05; max-width: 100%; }
.experiences-intro { font-size: 15px; margin-top: 18px; }
.experiences-grid { grid-template-columns: 1fr; gap: 20px; }
.experience-card:hover { transform: none; }
.exp-card-inner {
border-radius: 21px;
padding: 32px 26px 28px;
}
.exp-corner { width: 26px; height: 26px; }
.exp-corner.tl, .exp-corner.tr { top: 10px; }
.exp-corner.bl, .exp-corner.br { bottom: 10px; }
.exp-corner.tl, .exp-corner.bl { left: 10px; }
.exp-corner.tr, .exp-corner.br { right: 10px; }
.exp-card-meta { gap: 12px; }
.exp-card-num { font-size: 34px; }
.exp-card-divider { width: 28px; }
.exp-card-tag { font-size: 10px; letter-spacing: 0.24em; }
.exp-featured-pill { font-size: 9px; padding: 5px 10px; }
.exp-card-title { font-size: clamp(26px, 6.5vw, 32px); }
.exp-card-tagline { font-size: 14px; margin-top: 8px; }
.exp-card-desc { font-size: 14px; margin-top: 12px; }
.exp-card-specs { grid-template-columns: 1fr 1fr; gap: 12px 16px; padding-top: 18px; margin-top: 20px; }
.exp-card-specs strong { font-size: 17px; }
.exp-card-features li { font-size: 13px; }
.exp-card-cta { margin-top: 26px; padding-top: 20px; font-size: 11px; }
.addons-note {
flex-direction: column;
padding: 24px 22px;
gap: 14px;
margin-top: 50px;
}
.addons-note strong { font-size: 18px; }
/* Workshops — stack vertically on mobile, no pinned horizontal scroll */
.workshops-h { height: auto; }
.workshops-h-stage { position: static; height: auto; overflow: visible; }
.workshops-h-head { padding-top: 60px; padding-bottom: 20px; }
/* Keep title on two lines max — main line + em on its own block.
Scale font down enough that the em "een workshop op maat." fits
on one line at all phone widths. */
.workshops-h-title {
font-size: clamp(28px, 7.4vw, 48px);
line-height: 1.05;
word-break: normal;
overflow-wrap: normal;
}
.workshops-h-title em {
white-space: nowrap;
}
/* Workshops mobile structural overrides handled in the 1023px
sticky-stack block above. Only style refinements remain here. */
.workshop-slide-num { font-size: 12px; }
.workshop-slide-title { font-size: clamp(36px, 9vw, 52px); margin-bottom: 8px; line-height: 1.02; }
.workshop-slide-tagline { font-size: 14px; margin-bottom: 10px; }
.workshop-slide-desc { font-size: 14px; line-height: 1.55; }
.workshop-slide-specs {
grid-template-columns: 1fr 1fr;
gap: 8px 18px;
padding-top: 12px;
margin-bottom: 14px;
}
.workshop-slide-cta { width: 100%; justify-content: center; padding: 12px 22px; font-size: 13px; }
/* ============================================================
GALLERY — mobile: title fills the first viewport, then images
============================================================
The .stack-section sits flush against the last workshop card
(no outer margin gap). Inside the section, .stack-intro is
`min-height: 100vh` with the title flex-centered → the very
first thing the user sees when scrolling into the gallery is
the centered title, occupying the full visible viewport. As
they continue scrolling, the intro scrolls past and the
sticky pin engages → first card appears.
Belt-and-braces: explicit ink bg + overflow: hidden so nothing
can leak across the section boundary. */
.stack-section {
margin-top: 0;
background: var(--ink) !important;
/* overflow: hidden REMOVED on mobile — some Safari versions
treat an `overflow: hidden` ancestor as the sticky scroll
container, which breaks position: sticky on the inner
.stack-pin. Without the clip the gallery cards animate
correctly. */
overflow: visible !important;
position: relative;
}
/* Mobile intro fills first viewport with title centered both ways.
The "— 05 / Galerij" eyebrow sits centered ABOVE the title; the
title + lead are also center-aligned. */
.stack-intro {
min-height: 100vh;
min-height: 100dvh;
padding: 0 24px;
background: var(--ink);
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.stack-intro .section-num {
display: block;
text-align: center;
margin: 0 auto 16px;
}
.stack-intro .heading-lg {
text-align: center;
margin: 0 auto;
max-width: 100%;
font-size: clamp(40px, 11vw, 64px);
line-height: 1.05;
}
.stack-intro p.lead {
text-align: center;
margin: 22px auto 0;
max-width: 360px;
}
.stack-stage { width: min(360px, 86vw); aspect-ratio: 3 / 4; }
.stack-card { width: 100%; height: 100%; max-width: none; }
/* Hide the floating "01 / 07" progress widget on mobile —
it sat behind the gallery stage and read as a stray
number on small viewports. */
.stack-progress { display: none !important; }
/* Workshops section also gets explicit ink + clip so any
workshop card image can't visually leak below its own
section boundary. */
.workshops-h {
background: var(--ink) !important;
overflow: hidden !important;
}
.workshop-slide {
overflow: hidden !important;
}
/* Specifically for .stack-intro: keep the opacity fade-in, but
drop the 80px translateY that the base .reveal style applies.
The translate left an 80px void of ink above the title (between
the last workshop card and where the title would naturally sit)
which read as a glitchy gap. Opacity-only keeps the entrance
animation alive without the positional jump. The gallery's own
card-stacking animation (JS-driven, on .stack-card) is
unaffected. */
.stack-intro.reveal { transform: none !important; }
/* Hide the floating "01 / 07" progress widget on mobile — it sat
behind the gallery stage and read as a stray number on small
viewports. The scroll progress is conveyed by the card stack
itself on phones. */
.stack-progress { display: none !important; }
/* Reviews marquee — compact + faster loop on phones */
.reviews-marquee {
margin-top: 40px;
padding: 14px 0;
}
.reviews-marquee .review {
width: 260px;
padding: 20px;
border-radius: 18px;
}
.reviews-marquee .review .quote {
margin-top: 14px;
font-size: 13px;
line-height: 1.5;
}
.reviews-marquee .review .stars { font-size: 15px; letter-spacing: 1px; }
.reviews-marquee .review footer {
margin-top: 14px;
padding-top: 14px;
}
.reviews-marquee .review .author { font-size: 14px; }
.reviews-marquee .review .event { font-size: 10px; }
/* Faster loop on small viewports — with the smaller cards
the same speed feels slow. Forced via !important + explicit
-webkit-prefix so iOS Safari and Reduce-Motion preferences
can't silently disable it. */
.reviews-marquee-track {
-webkit-animation: reviewsScroll 35s linear infinite !important;
animation: reviewsScroll 35s linear infinite !important;
-webkit-animation-iteration-count: infinite !important;
animation-iteration-count: infinite !important;
-webkit-animation-play-state: running !important;
animation-play-state: running !important;
}
/* FAQ */
.faq-grid { gap: 20px; }
details summary { font-size: 16px; padding: 18px 0; }
details p { font-size: 14px; line-height: 1.6; }
/* Contact */
.contact-grid { gap: 40px; }
.contact-info dt { font-size: 11px; }
.contact-info dd a, .contact-info dd { font-size: 15px; }
.form-luxe, .form { padding: 24px !important; }
/* Footer mobile — top divider line removed entirely (felt cramped
against the logo no matter how much padding was added). The
section now flows seamlessly from the contact-hero into the
footer; the grid's own padding provides the rhythm. The bottom
divider (above © + BTW) is also dropped for visual consistency. */
.footer {
margin-top: 0;
border-top: none !important;
}
.footer-bottom {
border-top: none !important;
}
.footer-grid {
padding: 80px 0 80px;
gap: 64px;
/* Brand on top spans full width; nav + contact share a 2-col row */
grid-template-columns: 1fr 1fr;
grid-template-areas:
"brand brand"
"nav contact";
align-items: start;
}
.footer-brand img { height: 56px; }
.footer-brand p {
margin-top: 32px;
font-size: 15px;
line-height: 1.65;
}
.footer-grid h4 { font-size: 13px; margin-bottom: 16px; }
.footer-grid > .footer-brand {
grid-area: brand;
margin-bottom: 24px;
}
.footer-grid > .footer-brand + div { grid-area: nav; }
.footer-grid > .footer-brand + div + div { grid-area: contact; }
.footer-grid ul { font-size: 14px; gap: 12px; }
.footer-grid ul a { word-break: break-word; }
/* Copyright row — © left, BTW right, single row (no column stack).
Extra top padding so the divider line above sits well below the
contact column. */
.footer-bottom {
padding: 40px 0 56px;
flex-direction: row !important;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.footer-bottom > div { font-size: 12px; }
.footer-bottom > div:first-child { text-align: left; }
.footer-bottom > div:last-child { text-align: right; margin-left: auto; }
/* Reviews section title */
#reviews .heading-lg,
#faq .heading-lg,
#contact .heading-lg,
#diensten .heading-lg,
#events .heading-lg { font-size: clamp(28px, 7.5vw, 42px); }
}
/* ---------- Small phones (max-width: 480px) ---------- */
@media (max-width: 480px) {
.container { padding: 0 16px; }
.nav-logo img { height: 32px; }
.lang-switch { padding: 5px 8px; gap: 6px; }
.lang-switch button { font-size: 9px; padding: 1px 2px; }
.hero-title { font-size: calc(clamp(32px, 12vw, 48px) * var(--hero-scale)); }
.stat-num { font-size: 30px; }
/* tiny phones — stage already responsive via 86vw, no card override needed */
.hero-corner { width: 36px; height: 36px; }
}
/* Mobile: smaller top marquee font + speed */
@media (max-width: 820px) {
.marquee { padding: 20px 0; }
.marquee-track { font-size: 36px; gap: 36px; animation-duration: 28s; }
.marquee-track span { gap: 36px; }
.marquee-track .dot { height: 0.8em; }
}
/* ============================================================
UNIFIED SUBTEXT — every subtitle uses the same style
(same font / size / weight / color / line-height)
============================================================ */
.section-sub,
.events-sub,
.lead,
.experiences-bespoke-sub,
.experiences-bespoke-sub em,
.experiences-bespoke-sub span {
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif !important;
font-style: italic !important;
font-size: 17px !important;
line-height: 1.55 !important;
font-weight: 400 !important;
color: var(--sand) !important;
letter-spacing: 0 !important;
}
.section-sub,
.events-sub,
.lead,
.experiences-bespoke-sub,
.about-covalt-body {
max-width: 60ch;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* ============================================================
Final override — experiences intro subtitle is hard-centered
regardless of any earlier rule. Sand color, Amiri italic.
============================================================ */
.exp-row-intro .exp-intro-content .experiences-bespoke-sub,
section#diensten .experiences-bespoke-sub {
display: block !important;
width: 100% !important;
max-width: 60ch !important;
margin: 16px auto 0 !important;
text-align: center !important;
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: 18px !important;
line-height: 1.55 !important;
color: var(--sand) !important;
letter-spacing: 0 !important;
}
.exp-row-intro .exp-intro-content .experiences-bespoke-sub em,
.exp-row-intro .exp-intro-content .experiences-bespoke-sub span,
section#diensten .experiences-bespoke-sub em,
section#diensten .experiences-bespoke-sub span {
font-family: 'Amiri', 'Adobe Arabic', Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
color: var(--sand) !important;
display: inline !important;
}
/* ============================================================
CUSTOM SITE CURSOR — small circle with cocktail glass inside
Follows the cursor with smooth lerp. Hidden on touch devices.
============================================================ */
.site-cursor {
position: fixed;
top: 0;
left: 0;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(231, 206, 147, 0.5);
background: rgba(13, 22, 17, 0.45);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
opacity: 0;
transition:
opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
background 0.35s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.site-cursor.is-visible { opacity: 1; }
.site-cursor.is-hover {
width: 64px;
height: 64px;
background: rgba(231, 206, 147, 0.18);
border-color: var(--sand);
}
.site-cursor.is-pressed {
width: 36px;
height: 36px;
}
/* Dim state — used on non-interactive card bodies (experience rows,
workshop slides). Tells the user "this area is just content, the
clickable bits are the CTAs". The is-hover state takes precedence
when both apply, so moving from card body → CTA pops the cursor
open again. */
.site-cursor.is-dim {
width: 22px;
height: 22px;
background: transparent;
border-color: rgba(231, 206, 147, 0.22);
}
.site-cursor.is-dim.is-hover {
width: 64px;
height: 64px;
background: rgba(231, 206, 147, 0.18);
border-color: var(--sand);
}
.site-cursor.is-hidden {
opacity: 0 !important;
transform: translate(-50%, -50%) scale(0.6);
}
.site-cursor img {
width: 38%;
height: 38%;
object-fit: contain;
display: block;
}
/* Hide custom cursor on touch / no-hover devices */
@media (hover: none), (pointer: coarse) {
.site-cursor { display: none; }
}
/* Hide native cursor on desktop where the custom one runs.
Keep native cursor on inputs and textareas for usability. */
@media (hover: hover) and (pointer: fine) {
html, body { cursor: none; }
a, button, .nav-burger, .nav-mobile a, .exp-row-cta,
.workshop-slide-cta, .about-covalt-cta,
details summary { cursor: none; }
input, textarea, select { cursor: text; }
}
/* ============================================================
CONTACT — sticky hero, compact split layout
============================================================ */
.contact-hero {
/* No longer sticky — scrolls normally so the footer follows naturally. */
position: relative;
background: var(--ink);
z-index: 1;
overflow: hidden;
padding: 110px 0 80px;
}
.contact-hero-shape {
position: absolute;
pointer-events: none;
z-index: 0;
bottom: -140px;
right: -140px;
width: 480px;
opacity: 0.7;
}
.contact-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 80px;
align-items: center;
width: 100%;
}
.contact-hero-intro { max-width: 520px; }
.contact-hero-intro .section-num { display: block; margin-bottom: 24px; }
.contact-hero-title {
font-size: clamp(40px, 4.4vw, 72px);
margin: 0;
}
.contact-hero-sub {
margin-top: 20px;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
color: var(--sand);
opacity: 0.78;
font-size: 18px;
line-height: 1.55;
font-weight: 500;
max-width: 440px;
}
.contact-hero-info {
margin-top: 36px;
display: grid;
grid-template-columns: repeat(3, auto);
gap: 28px;
justify-content: start;
border-top: 1px solid rgba(231, 206, 147, 0.14);
padding-top: 24px;
}
.contact-hero-info dt {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 13px;
letter-spacing: 0;
text-transform: none;
color: var(--sand);
opacity: 0.55;
}
.contact-hero-info dd {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 19px;
margin-top: 4px;
color: var(--sand);
}
.contact-hero-info a:hover { color: var(--sand); }
.contact-hero-form {
padding: 28px;
background: rgba(231, 206, 147, 0.04);
border: 1px solid rgba(231, 206, 147, 0.12);
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.contact-hero-form .form-row { gap: 16px; }
.contact-hero-form label span {
font-size: 10px;
letter-spacing: 0.18em;
}
.contact-hero-form input,
.contact-hero-form textarea {
padding: 11px 14px;
font-size: 14px;
margin-top: 6px;
border-radius: 10px;
}
.contact-hero-form button { width: 100%; justify-content: center; margin-top: 4px; }
@media (max-width: 1023px) {
.contact-hero {
padding: 100px 0 80px;
}
.contact-hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.contact-hero-info { grid-template-columns: 1fr 1fr; }
.contact-hero-shape { width: 280px; bottom: -80px; right: -80px; }
}
/* ============================================================
LIQUID-FILL BUTTONS — Bar Naut signature
Default: dark green inside + sand border + sand text
Hover: sand liquid rises from the bottom with a real wavy
top edge that keeps flowing while filling, text
inverts to ink
============================================================ */
.btn,
.about-covalt-cta,
.workshop-slide-cta,
.exp-row-cta {
position: relative;
background: var(--ink);
color: var(--sand);
border: 1px solid var(--sand);
overflow: hidden;
isolation: isolate;
/* Same italic serif as the headings' em — premium & uniform */
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: 19px;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
padding: 14px 32px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
transition:
color 0.35s ease 0.55s,
transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.4s ease,
box-shadow 0.4s ease;
box-shadow: none;
}
/* Make sure 'Boek nu' & friends in the nav stay legible over the
hero image while the rest of the nav is transparent */
.nav-cta {
text-shadow: 0 1px 12px rgba(17, 24, 19, 0.45);
}
.nav-cta:hover { text-shadow: none; }
/* Liquid layer — flat solid sand that rises slowly from the bottom
on hover. Confident, premium pour — no waves, no flicker. */
.btn::before,
.about-covalt-cta::before,
.workshop-slide-cta::before,
.exp-row-cta::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0;
z-index: -1;
pointer-events: none;
background: var(--sand);
transition: height 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Keep button content above the liquid */
.btn > *,
.about-covalt-cta > *,
.workshop-slide-cta > *,
.exp-row-cta > * {
position: relative;
z-index: 1;
}
.btn:hover,
.about-covalt-cta:hover,
.workshop-slide-cta:hover,
.exp-row-cta:hover {
background: var(--ink); /* keep base ink so liquid layer is what fills */
color: var(--ink);
transform: translateY(-2px);
border-color: var(--sand);
box-shadow: 0 16px 36px -10px rgba(231, 206, 147, 0.32);
}
.btn:hover::before,
.about-covalt-cta:hover::before,
.workshop-slide-cta:hover::before,
.exp-row-cta:hover::before {
height: 100%;
}
/* Disable the old shine effect on .btn — replaced by liquid */
.btn::after { display: none !important; }
/* For initially-filled CTAs (workshops, exp-rows) the old hover bumps the bg
colour; we no longer want that since liquid handles the fill */
.workshop-slide-cta:hover,
.exp-row-cta:hover {
background: var(--ink);
border-color: var(--sand);
color: var(--ink);
gap: 18px;
}
/* ============================================================
============ MOBILE — full polish pass ====================
Brings every recent change in line with mobile and tightens
spacing, typography, and touch targets so the small-screen
experience feels just as luxe as desktop.
============================================================ */
/* Tablet & phone (≤1023px) — handles structural fallbacks */
@media (max-width: 1023px) {
/* — HERO — keep content clear of the now-spacerless top nav */
.hero {
padding-top: 96px;
}
.hero-content { padding-bottom: 24px; }
/* — EXPERIENCES — image was set to 50% width absolute; on stacked
mobile layout it becomes a relative full-width banner. */
.exp-row-image {
width: 100% !important;
height: 56vh;
max-height: 480px;
}
.exp-row-image::after {
/* Soften the right-edge fade since the image now sits above the
text instead of beside it — keep the bottom fade for blend. */
background: linear-gradient(
180deg,
rgba(13, 22, 17, 0) 60%,
rgba(13, 22, 17, 0.7) 90%,
var(--ink) 100%
);
}
.exp-row-content {
position: relative;
left: auto;
right: auto;
padding: 28px 24px 48px;
}
/* — FAQ HERO — auto-height single column, breathing room */
.faq-hero {
padding: 100px 24px 64px;
}
.faq-hero-grid { gap: 36px; }
.faq-hero-intro .heading-lg,
.faq-hero-title {
font-size: clamp(38px, 9vw, 56px);
line-height: 1.05;
}
.faq-hero-sub { font-size: 15px; max-width: 100%; }
/* Tighter vertical rhythm on mobile FAQ — boxes feel less heavy
while staying tappable. */
.faq-hero-list .faq-item { padding: 12px 0; }
.faq-hero-list .faq-item summary { font-size: 17px; gap: 12px; }
.faq-hero-list .faq-item .icon { width: 22px; height: 22px; font-size: 18px; }
.faq-hero-list .faq-item p { font-size: 14px; padding-right: 0; margin-top: 8px; line-height: 1.5; }
/* — CONTACT HERO — single column, full-width form card */
.contact-hero {
padding: 100px 24px 64px;
}
.contact-hero-grid { gap: 36px; }
.contact-hero-title {
font-size: clamp(38px, 9vw, 56px);
line-height: 1.05;
}
.contact-hero-sub { font-size: 15px; max-width: 100%; }
.contact-hero-info {
grid-template-columns: 1fr 1fr;
gap: 18px 22px;
padding-top: 18px;
}
.contact-hero-info dd { font-size: 16px; }
.contact-hero-form { padding: 22px; border-radius: 14px; }
}
/* Phone (≤820px) — recent component refinements */
@media (max-width: 820px) {
/* — Buttons / CTAs slightly smaller so they feel right at thumb scale */
.btn,
.about-covalt-cta,
.workshop-slide-cta,
.exp-row-cta {
font-size: 17px;
padding: 13px 26px;
}
/* Form CTA stays full-width inside the contact card */
.contact-hero-form .btn { width: 100%; }
/* — FAQ — extra compact spacing on phones */
.faq-hero { padding: 88px 20px 56px; }
.faq-hero-list .faq-item { padding: 16px 0; }
/* — CONTACT — full-bleed look on phones */
.contact-hero { padding: 88px 20px 56px; }
.contact-hero-info { grid-template-columns: 1fr; gap: 14px; }
.contact-hero-info dd { font-size: 17px; }
/* — STACK GALLERY — stage scales with viewport so cards stay
centred; cards fill the stage (handled in 820px breakpoint). */
.stack-card.photo-only .stack-card-visual { border-radius: inherit; }
/* — REVIEWS title with
— keep both lines sized consistently */
#reviews .heading-lg {
font-size: clamp(40px, 11vw, 64px) !important;
line-height: 1.05;
}
#reviews .heading-lg em {
font-size: 0.95em;
display: block;
margin-top: 0.05em;
}
/* — EXPERIENCES + WORKSHOPS share the compact sticky-stack rules
from the @media (max-width: 1023px) block above. Earlier we had a
stale override here that gave experiences a 50vh image + 40-60px
title, which (a) pushed the secondary "Personaliseer" CTA off the
bottom of the 100vh card, and (b) made the experience titles look
bigger than the workshop titles. Removed — experiences and
workshops now match exactly. */
/* — NAV — slightly smaller pill for the language switcher */
.nav-inner { height: 72px; }
.nav-logo img { height: 30px; }
/* — Touch-friendly: ensure all interactive elements ≥ 44px tall */
.nav-mobile-main a { min-height: 44px; }
.lang-switch button { min-height: 32px; padding: 6px 6px; }
/* — TYPOGRAPHY safety: stop any oversized desktop em from breaking
line on ultra-narrow screens */
.heading-lg em,
.heading-xl em { word-break: normal; }
}
/* Very small phones (≤480px) */
@media (max-width: 480px) {
.btn,
.about-covalt-cta,
.workshop-slide-cta,
.exp-row-cta {
font-size: 16px;
padding: 12px 22px;
}
.faq-hero,
.contact-hero { padding-left: 16px; padding-right: 16px; }
.contact-hero-form { padding: 18px; }
.faq-hero-list .faq-item summary { font-size: 17px; }
.stack-card { height: 420px; }
}
/* ============================================================
ARROWS — force text glyph rendering, no system emoji.
font-variant-emoji is the modern way; the variation selector
added by JS below is the universal fallback.
============================================================ */
.nav-mobile-arrow,
.event-card-arrow,
.workshops-scroll-hint-arrow,
.exp-row-cta,
.workshop-slide-cta,
.about-covalt-cta,
.btn,
.faq-hero-sub,
.contact-hero-sub {
font-variant-emoji: text;
}
/* ============================================================
UNIFIED MOBILE HORIZONTAL PADDING — every text container
sits at 24px from the viewport edge on phones, 20px on
ultra-narrow screens.
============================================================ */
@media (max-width: 1023px) {
/* Section-level content blocks — ensure consistent gutter */
.exp-row-intro {
padding-left: 24px !important;
padding-right: 24px !important;
}
.exp-row-content {
padding-left: 24px;
padding-right: 24px;
}
.workshop-slide-body {
padding-left: 24px !important;
padding-right: 24px !important;
}
.workshops-h-head {
padding-left: 24px;
padding-right: 24px;
}
/* About / events / hero / etc. all already use .container — no
extra rule needed. */
}
@media (max-width: 480px) {
.container { padding-left: 20px; padding-right: 20px; }
.faq-hero,
.contact-hero {
padding-left: 20px;
padding-right: 20px;
}
.exp-row-intro,
.exp-row-content,
.workshop-slide-body,
.workshops-h-head {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
/* Touch / no-hover devices: liquid effect should NOT trigger from a
sticky :hover after tap — make tap snap, no held-fill state */
@media (hover: none) {
.btn::before,
.about-covalt-cta::before,
.workshop-slide-cta::before,
.exp-row-cta::before { transition: none; }
.btn:hover,
.about-covalt-cta:hover,
.workshop-slide-cta:hover,
.exp-row-cta:hover {
transform: none;
box-shadow: none;
}
.btn:active::before,
.about-covalt-cta:active::before,
.workshop-slide-cta:active::before,
.exp-row-cta:active::before { height: 100%; }
.btn:active,
.about-covalt-cta:active,
.workshop-slide-cta:active,
.exp-row-cta:active { color: var(--ink); }
}
/* ============================================================
CTA GROUPS — primary boek + secondary personaliseer button
sit side-by-side on desktop, stack on mobile.
============================================================ */
.exp-row-cta-group,
.workshop-slide-cta-group {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
/* PRIMARY CTA — inverted (sand-filled with ink text). Loudest visual
so the booking action is unmistakably the main path. The liquid
fill effect is suppressed because the button is already filled. */
.exp-row-cta-group > .exp-row-cta:not(.exp-row-cta-secondary),
.workshop-slide-cta-group > .workshop-slide-cta:not(.workshop-slide-cta-secondary) {
background: var(--sand) !important;
color: var(--ink) !important;
border-color: var(--sand) !important;
}
.exp-row-cta-group > .exp-row-cta:not(.exp-row-cta-secondary)::before,
.workshop-slide-cta-group > .workshop-slide-cta:not(.workshop-slide-cta-secondary)::before {
/* hide the rising liquid layer — there's no contrast to fill since
the button is already sand */
display: none;
}
.exp-row-cta-group > .exp-row-cta:not(.exp-row-cta-secondary):hover,
.workshop-slide-cta-group > .workshop-slide-cta:not(.workshop-slide-cta-secondary):hover {
background: var(--cream) !important;
color: var(--ink) !important;
}
/* SECONDARY CTA — keeps the outlined (transparent ink) look with the
liquid sand fill on hover. */
.exp-row-cta-secondary,
.workshop-slide-cta-secondary {
background: transparent !important;
opacity: 0.95;
}
.exp-row-cta-secondary:hover,
.workshop-slide-cta-secondary:hover {
opacity: 1;
}
@media (max-width: 640px) {
.exp-row-cta-group,
.workshop-slide-cta-group { flex-direction: column; align-items: stretch; }
.exp-row-cta-group > *,
.workshop-slide-cta-group > * { width: 100%; justify-content: center; }
}
/* ============================================================
CUSTOMIZE MODAL
Premium overlay with backdrop blur. Centered card on desktop,
bottom-sheet style on mobile. Form fields in clean groups.
============================================================ */
body.customize-open { overflow: hidden; }
.customize-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
/* Card sits on the right; brand logo gets the left half. */
justify-content: flex-end;
padding: clamp(16px, 4vw, 48px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0.35s linear;
}
/* Brand logo — horizontally centered in the empty zone on the LEFT
of the modal card. The card occupies up to ~620px on the right
(560 max-width + ~60 margin), so the logo's centre point is at
50% of the viewport minus half of the card+margin block. */
.customize-modal-logo {
position: absolute;
top: 50%;
/* center of left zone = 50% − (card width / 2) − (margin / 2) */
left: calc(50% - 280px - 30px);
width: clamp(220px, 22vw, 360px);
height: auto;
transform: translate(-50%, -50%) scale(0.96);
opacity: 0;
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
pointer-events: none;
filter: drop-shadow(0 8px 36px rgba(231, 206, 147, 0.12));
}
.customize-modal.is-open .customize-modal-logo {
opacity: 0.92;
transform: translate(-50%, -50%) scale(1);
}
.customize-modal.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}
.customize-modal-backdrop {
position: absolute;
inset: 0;
/* Lower opacity + lighter blur so the page beneath stays partially
visible — modal feels overlaid, not isolated. */
background: rgba(11, 15, 12, 0.45);
backdrop-filter: blur(6px) saturate(120%);
-webkit-backdrop-filter: blur(6px) saturate(120%);
}
.customize-modal-card {
position: relative;
width: 100%;
max-width: 560px;
max-height: calc(100vh - 60px);
/* Extra right-side breathing room — card sits offset to the right
so the brand logo on the left has space to breathe. */
margin-right: clamp(16px, 4vw, 60px);
background: linear-gradient(180deg, #141c16 0%, #0e1511 100%);
border: 1px solid rgba(231, 206, 147, 0.18);
border-radius: 20px;
box-shadow:
0 60px 120px -30px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(231, 206, 147, 0.04);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(24px) scale(0.98);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.customize-modal.is-open .customize-modal-card {
transform: translateY(0) scale(1);
}
.customize-modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid rgba(231, 206, 147, 0.18);
background: rgba(11, 15, 12, 0.4);
color: var(--sand);
font-size: 22px;
line-height: 1;
cursor: pointer;
z-index: 2;
transition: background 0.3s, border-color 0.3s, transform 0.3s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.customize-modal-close:hover {
background: rgba(231, 206, 147, 0.12);
border-color: rgba(231, 206, 147, 0.45);
transform: rotate(90deg);
}
.customize-modal-header {
padding: 28px 32px 16px;
border-bottom: 1px solid rgba(231, 206, 147, 0.1);
}
.customize-eyebrow {
display: block;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 13px;
color: var(--sand);
opacity: 0.6;
margin-bottom: 8px;
}
.customize-title {
font-family: var(--display-font);
font-size: clamp(28px, 3vw, 40px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--sand);
font-weight: 700;
margin: 0;
}
.customize-sub {
margin-top: 10px;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 16px;
line-height: 1.55;
color: var(--sand);
opacity: 0.7;
}
.customize-form {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.customize-fields {
padding: 22px 32px 18px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 18px;
scrollbar-width: thin;
scrollbar-color: rgba(231, 206, 147, 0.3) transparent;
}
.customize-fields::-webkit-scrollbar { width: 8px; }
.customize-fields::-webkit-scrollbar-thumb {
background: rgba(231, 206, 147, 0.25);
border-radius: 4px;
}
.customize-group {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 14px;
letter-spacing: 0.04em;
color: var(--sand);
opacity: 0.5;
margin: 14px 0 -4px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(231, 206, 147, 0.08);
}
.customize-group:first-child { margin-top: 0; }
.customize-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.customize-field-label {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 14px;
color: var(--sand);
opacity: 0.78;
}
.customize-input,
.customize-field input,
.customize-field select,
.customize-field textarea {
width: 100%;
background: rgba(231, 206, 147, 0.04);
border: 1px solid rgba(231, 206, 147, 0.14);
border-radius: 12px;
padding: 12px 14px;
color: var(--sand);
font-family: inherit;
font-size: 15px;
transition: border-color 0.25s, background 0.25s;
}
.customize-field input:focus,
.customize-field select:focus,
.customize-field textarea:focus {
outline: none;
border-color: rgba(231, 206, 147, 0.55);
background: rgba(231, 206, 147, 0.07);
}
.customize-field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.customize-field input::placeholder,
.customize-field textarea::placeholder {
color: rgba(231, 206, 147, 0.4);
font-style: italic;
}
/* Stepper — manual number entry with − / + buttons + unit label.
Lets users dial in any exact number (e.g. 26 gasten) without
being limited to preset options. */
.customize-stepper {
display: inline-flex;
align-items: center;
gap: 0;
border: 1px solid rgba(231, 206, 147, 0.18);
border-radius: 999px;
background: rgba(231, 206, 147, 0.04);
padding: 4px;
width: fit-content;
}
.customize-stepper-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--sand);
font-family: var(--display-font);
font-size: 22px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, color 0.2s ease;
flex-shrink: 0;
}
.customize-stepper-btn:hover {
background: rgba(231, 206, 147, 0.14);
}
.customize-stepper-btn:active {
transform: scale(0.94);
}
.customize-stepper-input {
width: 64px;
background: transparent !important;
border: none !important;
text-align: center;
font-family: var(--display-font);
font-size: 18px;
color: var(--sand);
padding: 0 !important;
-moz-appearance: textfield;
}
.customize-stepper-input::-webkit-outer-spin-button,
.customize-stepper-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.customize-stepper-input:focus {
outline: none;
background: rgba(231, 206, 147, 0.08) !important;
border-radius: 8px;
}
.customize-stepper-unit {
margin-left: 12px;
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 14px;
color: var(--sand);
opacity: 0.6;
padding-right: 12px;
}
/* Choice pills (radio group rendered as inline buttons) */
.customize-choice {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.customize-choice input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.customize-choice-opt {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border: 1px solid rgba(231, 206, 147, 0.2);
border-radius: 999px;
font-size: 13px;
color: var(--sand);
opacity: 0.7;
cursor: pointer;
transition: background 0.25s, border-color 0.25s, opacity 0.25s;
background: rgba(231, 206, 147, 0.02);
}
.customize-choice input[type="radio"]:checked + .customize-choice-opt {
background: rgba(231, 206, 147, 0.18);
border-color: var(--sand);
opacity: 1;
color: var(--sand);
}
.customize-choice-opt:hover { opacity: 1; }
/* Add-on toggle rows — a full-width clickable card with title +
description on the left and a custom toggle pip on the right.
The native checkbox is visually hidden but stays focusable so
keyboard + screen-reader users can still flip it. */
.customize-addon {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 16px;
border: 1px solid rgba(231, 206, 147, 0.14);
border-radius: 14px;
background: rgba(231, 206, 147, 0.03);
cursor: pointer;
transition: border-color 0.25s, background 0.25s;
}
.customize-addon:hover {
border-color: rgba(231, 206, 147, 0.32);
background: rgba(231, 206, 147, 0.05);
}
.customize-addon-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.customize-addon-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.customize-addon-title {
font-family: var(--display-font);
font-size: 17px;
color: var(--sand);
letter-spacing: -0.005em;
}
.customize-addon-desc {
font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
font-style: italic;
font-size: 13.5px;
color: var(--sand);
opacity: 0.6;
}
.customize-addon-indicator {
flex-shrink: 0;
width: 44px;
height: 24px;
border-radius: 999px;
border: 1px solid rgba(231, 206, 147, 0.3);
background: rgba(231, 206, 147, 0.04);
position: relative;
transition: background 0.25s, border-color 0.25s;
}
.customize-addon-indicator::after {
content: '';
position: absolute;
top: 50%;
left: 3px;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(231, 206, 147, 0.55);
transform: translateY(-50%);
transition: left 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s;
}
.customize-addon-input:checked ~ .customize-addon-indicator {
background: rgba(231, 206, 147, 0.32);
border-color: var(--sand);
}
.customize-addon-input:checked ~ .customize-addon-indicator::after {
left: calc(100% - 19px);
background: var(--sand);
}
.customize-addon:has(.customize-addon-input:checked) {
border-color: rgba(231, 206, 147, 0.4);
background: rgba(231, 206, 147, 0.07);
}
.customize-addon-input:focus-visible ~ .customize-addon-indicator {
outline: 2px solid var(--sand);
outline-offset: 3px;
}
.customize-modal-footer {
padding: 18px 32px 24px;
border-top: 1px solid rgba(231, 206, 147, 0.1);
background: rgba(11, 15, 12, 0.4);
}
.customize-submit { width: 100%; justify-content: center; }
/* Mobile — bottom-sheet style, full width */
@media (max-width: 980px) {
.customize-modal-logo { display: none; }
.customize-modal { justify-content: center; }
.customize-modal-card { margin-right: 0; }
}
@media (max-width: 720px) {
.customize-modal {
padding: 0;
align-items: flex-end;
}
.customize-modal-card {
max-width: none;
max-height: 96vh;
border-radius: 22px 22px 0 0;
border-left: none;
border-right: none;
border-bottom: none;
transform: translateY(100%) scale(1);
}
.customize-modal.is-open .customize-modal-card {
transform: translateY(0) scale(1);
}
.customize-modal-header { padding: 28px 22px 14px; }
.customize-fields { padding: 22px 22px 20px; }
.customize-modal-footer { padding: 18px 22px 28px; }
.customize-title { font-size: 26px; }
.customize-sub { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
.customize-modal,
.customize-modal-card { transition-duration: 0.18s; }
}
/* ============================================================
LANDSCAPE PHONE — short viewport adjustments.
Phones in landscape have a wide-but-very-short viewport
(typically ~700-930px × ~370-430px). The default hero is
`height: 100vh; min-height: 720px` so it would either be
uselessly tall OR push the title beyond the viewport. This
block scales everything down so the hero fits cleanly in
one viewport even on a rotated iPhone. iPad landscape is
tall enough that desktop rules already work.
============================================================ */
@media (orientation: landscape) and (max-height: 520px) {
.hero {
height: 100vh;
min-height: 0;
padding: 64px 0 24px;
}
.hero-content { gap: 8px; padding-bottom: 0; }
.hero-title {
font-size: clamp(32px, 5.5vw, 56px);
line-height: 1.05;
}
.hero-eyebrow-text { font-size: 9px; letter-spacing: 0.22em; }
.hero-eyebrow { margin-bottom: 14px; }
.hero-sub {
font-size: 13px;
line-height: 1.5;
margin-top: 12px;
max-width: 80ch;
}
/* The cursor coin overlaps the title at this height — keep it
visible but smaller and pinned to the right edge. */
.hero-cursor-circle { width: 80px; height: 80px; }
.hero-cursor-glass { width: 18px; }
/* About / events / experiences naturally flow at this viewport
because they hit the existing max-width: 900 / 1023 rules. */
}
/* ============================================================
iPAD-RANGE (768-1180px wide, any orientation) — extra polish.
iPad portrait (810px) already hits the max-width: 1023 rules.
iPad landscape (1180px) gets desktop layouts. These tweaks
tighten things slightly so the content doesn't feel cramped
inside iPad's safe-area frame.
============================================================ */
@media (min-width: 768px) and (max-width: 1180px) {
.container { padding: 0 32px; }
/* Slightly smaller hero title so two long lines don't crowd. */
.hero-title { font-size: clamp(48px, 7.5vw, 96px); }
}