/* Body type — Figtree (Google Fonts), full variable weight range 300–900
with italics. Site-wide sans, served from the CDN. */
/* Vestardia — display-only accent face. Single weight (Regular).
Commercial use allowed (befonts.com). Reserved for ornamental moments
where Aboreto would feel too neutral; not for body or labels. */
/* Vestardia @font-face removed — consolidated to Aboreto + Figtree. */
/* =================================================================
Preloader
================================================================= */
/* While the preloader is up: lock scroll on html + body so the page
underneath can't drift. The JS adds .is-preloading to before
first paint and removes it just before the reveal slide. */
html.is-preloading,
html.is-preloading body {
overflow: hidden !important;
height: 100%;
/* iOS Safari: rubber-band would still leak around overflow:hidden
without these two. */
position: relative;
touch-action: none;
}
.site-preloader {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: #000000;
/* Fades out slowly so the preloader experience is visible. */
transition: opacity 1400ms cubic-bezier(0.19, 1, 0.22, 1);
overflow: hidden;
}
.site-preloader.is-hidden {
opacity: 0;
pointer-events: none;
}
/* Continuous handoff: on dismiss the black ground fades (opacity, above)
to reveal the already-playing hero video behind, while the roundel + copy
ease up and out — no flash to white, no hard cut. */
.site-preloader.is-hidden .site-preloader__inner {
transform: translateY(-56px);
opacity: 0;
}
.site-preloader__inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px;
width: 100%;
max-height: 100dvh;
box-sizing: border-box;
transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 700ms ease;
}
.site-preloader__copy {
margin: 0 0 clamp(20px, 4vh, 40px);
font-family: "Aboreto", Georgia, "Times New Roman", serif;
font-size: clamp(20px, 5.5vw, 40px);
font-weight: 400;
line-height: calc(1em + 8px);
letter-spacing: 0.06em;
text-transform: uppercase;
color: #F1E8D8;
flex-shrink: 0;
}
.site-preloader__video {
display: block;
/* Capped by viewport width AND height so the square video never
pushes the copy or logo off-screen on short or wide monitors —
340px is reserved for the copy, logo, margins and padding. */
width: max(180px, min(clamp(450px, 55vw, 850px), 90vw, calc(100dvh - 340px)));
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 50%;
margin-bottom: clamp(32px, 6vh, 56px);
flex-shrink: 0;
}
.site-preloader__logo {
display: block;
width: clamp(90px, 12vw, 138px);
height: auto;
flex-shrink: 0;
}
@media (max-height: 600px) {
.site-preloader__copy {
font-size: clamp(16px, 4vw, 24px);
margin-bottom: 16px;
}
.site-preloader__video {
/* width is handled by the height-aware cap on the base rule. */
margin-bottom: 24px;
}
.site-preloader__logo {
width: 80px;
}
}
@media (prefers-reduced-motion: reduce) {
.site-preloader {
transition-duration: 0ms;
}
/* Instant handoff — no lift, no wipe. */
.site-preloader__inner { transition: none; }
.site-preloader.is-hidden .site-preloader__inner { transform: none; }
}
:root {
--font-heading: "Aboreto", Georgia, "Times New Roman", serif;
--font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-serif: "Figtree", ui-sans-serif, system-ui, sans-serif;
--font-accent: "Aboreto", Georgia, "Times New Roman", serif;
--paper: #E7E0CB;
--ink: #1A1A1A;
--muted: #7A6F6A;
--line: #C7C7C7;
--soft: #E7E0CB;
--panel: #E7E0CB;
--dark: #1A1A1A;
--dark-ink: #E7E0CB;
/* Fluid page gutter — narrows gracefully on small screens, holds at
50px on desktop. Replaces the old fixed 50px + 14px mobile override. */
--gutter: clamp(20px, 0.5rem + 3vw, 50px);
--radius: 4px;
/* Verde brand palette — Figma "Verde" color styles.
Italian names are the brand-facing labels; CSS tokens use semantic roles. */
--verde-forest: #1E4A43; /* Verde */
--verde-gold: #B8924A; /* Oro Antico */
--verde-burgundy: #6B1F1F; /* Rosso */
--verde-ink: #1A1A1A; /* Nero Carbone */
--verde-cream: #E7E0CB; /* Panna */
--verde-bianco: #FFFFFF; /* Bianco */
--verde-text-grey: #7A6F6A; /* Text Grey */
--verde-border: #C7C7C7; /* Border Color */
--verde-secondary: #E7E0CB; /* Secondary Light */
/* Italian aliases for brand-facing reference (1:1 with the palette card) */
--verde-bosco: var(--verde-forest);
--verde-oro: var(--verde-gold);
--verde-rosso: var(--verde-burgundy);
--verde-nero: var(--verde-ink);
--verde-panna: var(--verde-cream);
/* Semantic aliases for layout sections */
--verde-green: var(--verde-forest);
--verde-charcoal: var(--verde-ink);
/* Legacy aliases — kept so existing rules don't break. */
--verde-bone: var(--verde-cream);
--verde-sangue: var(--verde-burgundy);
/* Easing curves — stronger than browser defaults */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-ui: cubic-bezier(0.33, 1, 0.68, 1);
/* ── Typography scale — Figma "Verde" text styles ──────────── */
/* Display */
--type-section-display: clamp(44px, 2.75rem + 3.5vw, 72px);
--lh-section-display: calc(1em + 8px);
--type-script-display: clamp(38px, 2.375rem + 3.25vw, 64px);
--lh-script-display: calc(1em + 8px);
/* Headings */
--type-h1: clamp(34px, 2.125rem + 2.75vw, 56px);
--lh-h1: calc(1em + 8px);
--type-h1-center: clamp(34px, 2.125rem + 2.75vw, 56px);
--lh-h1-center: calc(1em + 8px);
--type-h2: clamp(28px, 1.75rem + 2vw, 44px);
--lh-h2: calc(1em + 8px);
--type-script-accent: clamp(28px, 1.75rem + 2vw, 44px);
--lh-script-accent: calc(1em + 8px);
--type-h3: clamp(22px, 1.375rem + 1.25vw, 32px);
--lh-h3: calc(1em + 8px);
--type-eyebrow: clamp(16px, 1rem + 1.5vw, 28px);
--lh-eyebrow: calc(1em + 8px);
/* Body */
--type-body-lg: clamp(18px, 1.125rem + 0.75vw, 24px);
--lh-body-lg: calc(1em + 8px);
--type-body: clamp(16px, 1rem + 0.25vw, 18px);
--lh-body: calc(1em + 8px);
--type-body-sm: clamp(14px, 0.875rem + 0.25vw, 16px);
--lh-body-sm: calc(1em + 8px);
--type-titles: clamp(14px, 0.875rem + 0.25vw, 16px);
--lh-titles: calc(1em + 8px);
/* UI */
--type-footer-heading: 13px;
--lh-footer-heading: calc(1em + 8px);
--type-button: 13px;
--lh-button: calc(1em + 8px);
--type-caption: 13px;
--lh-caption: calc(1em + 8px);
/* Legacy aliases — kept for backward compat */
--text-xs: var(--type-caption);
--text-sm: var(--type-caption);
--text-base: var(--type-body-sm);
--text-md: var(--type-body);
--text-lg: var(--type-body-lg);
--text-xl: var(--type-body-lg);
--text-2xl: var(--type-h3);
--text-display: var(--type-section-display);
/* Spacing scale */
--space-xs: clamp(4px, 0.5vw, 8px);
--space-sm: clamp(8px, 1vw, 16px);
--space-md: clamp(16px, 2vw, 24px);
--space-lg: clamp(24px, 3vw, 40px);
--space-xl: clamp(40px, 5vw, 64px);
--space-2xl: clamp(64px, 8vw, 96px);
--section-pad: clamp(72px, 9vw, 120px);
/* Contrast-safe accent — darkened gold for use on cream backgrounds */
--verde-gold-accessible: #8A6B30;
/* Mid-grey tokens for muted text on dark backgrounds */
--muted-on-dark: #8a8a8a;
--muted-mid: #6d6560;
}
* { box-sizing: border-box; line-height: calc(1em + 8px); }
/* Screen-reader-only utility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Skip-to-content link — visible on focus for keyboard users */
.skip-link {
position: absolute;
top: -100%;
left: 16px;
z-index: 100;
padding: 12px 24px;
background: var(--verde-ink);
color: var(--verde-cream);
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
text-decoration: none;
border-radius: var(--radius);
}
.skip-link:focus {
top: 16px;
}
html.lenis, html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
/* Lock horizontal panning at the document level — iOS Safari allows
the whole page to pan sideways if any child overflows.
IMPORTANT: use `overflow-x: clip`, NOT `hidden`. `hidden` forces
the cross axis to compute as `auto`, turning html/body into a
scroll container and breaking `position: sticky` for every
descendant. `clip` crops the overflow without creating a scroll
container, so sticky elements keep working. */
html {
overflow-x: clip;
overscroll-behavior-x: none;
/* Cream canvas so the page-transition fade dips through paper, not
a white flash, while one page fades out and the next fades in. */
background: var(--paper);
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
overflow-x: clip;
overscroll-behavior-x: none;
/* Belt-and-suspenders: never let the body itself grow wider than
the viewport even if some descendant overflows. */
max-width: 100vw;
/* Apple-style line-breaking defaults: never auto-hyphenate, let
opt-in only where a soft hyphen is explicitly placed. */
hyphens: manual;
-webkit-hyphens: manual;
}
body.drawer-open { overflow: hidden; }
/* ===============================================================
Aboreto is a single-weight typeface (Regular / 400 only).
Forcing font-weight: 400 on every element using the heading font
prevents the browser from synthesising faux-bold on default-weight
heading elements (h1-h6 default to 700) and any rule that forgot
to declare a weight.
=============================================================== */
.wordmark,
.boat-between__years,
.feature-number,
.home-hero-copy p,
.verde-seal,
.dh-cooking__heading,
.dh-book__heading,
[class*="__heading"],
[class*="__title"] {
font-weight: 400;
}
/* ===============================================================
Typography line-breaking — site-wide defaults
Headings use `balance` to even out wrap distribution (no widows on
short heading lines). Body copy uses `pretty` so the last line of
long paragraphs avoids single-word widows.
=============================================================== */
h1, h2, h3, h4, h5, h6,
.hero--venue__heading,
.hero--venue__eyebrow,
.hero--venue__sub,
.intro__title,
.venue-row__heading,
.world-row__title,
.private-events__title-left,
.about-story__heading,
.boat-between__heading,
.dh-cooking__heading,
.dh-private-feature__heading,
.dh-private-feature__body,
.visit-cross__label,
.alex-intro__heading,
.alex-spaces__heading,
.alex-space__name,
.alex-cooking__heading,
.contact-intro__heading,
.contact-info__heading,
.contact-form__heading,
.contact-gift__heading,
.contact-label,
.contact-form__group-heading,
.site-footer__venues-heading,
.site-footer__col-heading,
.site-footer__venue-heading,
.site-footer__tagline,
.page-top__display-heading,
.mobile-menu__group-title,
.about-band__text {
text-wrap: balance;
}
p,
.home-hero__eyebrow,
.home-hero__locality,
.intro__lede,
.venue-row__body,
.world-row__body,
.private-events__body,
.about-story__columns p,
.boat-between__body,
.dh-intro__eyebrow,
.dh-intro__body,
.dh-cooking__body,
.dh-cooking__disclaimer,
.alex-intro__body,
.alex-spaces__lead,
.alex-space__desc,
.alex-cooking__body,
.contact-intro__body,
.contact-info__sub,
.contact-form__sub,
.contact-gift__body,
.contact-venue__address,
.site-footer__hours-inline,
.site-footer__copyright,
.site-footer__legal,
.page-top__display-sub {
text-wrap: pretty;
}
/* Main content sits above the sticky footer so that content
"covers" the footer until it scrolls out of view.
margin-bottom + negative bottom value let the full footer
reveal even when it's taller than the viewport. */
main {
position: relative;
z-index: 2;
background: var(--paper);
margin-bottom: var(--footer-h, 1165px);
}
a { color: inherit; text-decoration: none; }
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
}
.shell {
width: calc(100% - (var(--gutter) * 2));
margin-inline: auto;
}
/* v1 nav/dropdown removed — see .site-nav for active nav styles */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 24px;
border: 1px solid var(--ink);
background: var(--ink);
color: var(--paper);
font-family: var(--font-body);
font-size: var(--type-button);
font-weight: 500;
letter-spacing: 0.18em;
line-height: var(--lh-button);
text-transform: uppercase;
border-radius: var(--radius);
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: transform 160ms var(--ease-out);
}
.button:active {
transform: scale(0.97);
}
.button:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 3px;
}
.button.secondary {
background: transparent;
color: var(--ink);
}
.menu-button,
.close-button {
width: 44px;
height: 44px;
border: 1px solid var(--line);
background: transparent;
color: var(--ink);
border-radius: var(--radius);
cursor: pointer;
font-size: 22px;
line-height: calc(1em + 8px);
}
.menu-button { display: none; }
.hero {
position: relative;
min-height: 100vh;
min-height: 100dvh;
padding-top: 100px;
display: grid;
align-items: end;
background: var(--dark);
color: var(--dark-ink);
overflow: hidden;
}
.hero.compact {
min-height: 100vh;
min-height: 100dvh;
align-items: center;
}
.hero.compact .hero-content {
padding-bottom: 40px;
gap: 14px;
}
/* Image slot — a solid holding block shown until real photography is
dropped in. The [IMAGE] label and caption stay in the DOM (hidden)
so each slot still records what photo belongs there. A child ![]()
covers the fill completely once added. */
.image-slot {
display: grid;
place-items: center;
background: #CDC6B4;
overflow: hidden;
}
.image-slot .slot,
.image-slot__label,
.image-slot__caption {
display: none;
}
.hero .image-slot {
position: absolute;
inset: 0;
border: 0;
background: #1A1A1A;
color: rgba(246, 240, 232, 0.58);
}
.hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
}
/* Unified hero scrim — one gradient for every hero, tuned so cream hero
text clears WCAG AA over the brightest images (white sandstone, candle
highlights) without depending on the photo. Strongest through the
vertical-centre band where the heading and sub sit. */
.hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.50) 0%,
rgba(0, 0, 0, 0.42) 24%,
rgba(0, 0, 0, 0.62) 52%,
rgba(0, 0, 0, 0.66) 100%
);
z-index: 0;
}
.slot {
display: grid;
gap: 8px;
justify-items: center;
padding: 18px;
line-height: calc(1em + 8px);
}
.slot strong {
font-size: 13px;
font-weight: 900;
}
.slot span {
max-width: 340px;
opacity: 0.72;
font-size: 11px;
font-weight: 700;
}
.hero-content {
position: relative;
z-index: 1;
padding-bottom: 80px;
display: grid;
gap: 28px;
}
.hero-content--centered {
text-align: center;
align-items: center;
justify-items: center;
}
.hero-row {
display: grid;
grid-template-columns: minmax(360px, 0.46fr) minmax(260px, 0.54fr);
align-items: end;
gap: 32px;
}
.eyebrow {
color: var(--muted);
font-size: var(--type-titles);
font-weight: 500;
letter-spacing: 0.12em;
line-height: var(--lh-titles);
text-transform: uppercase;
}
.hero .eyebrow { color: rgba(246, 240, 232, 0.74); }
h1,
.display-heading,
.card h2,
.card h3,
.footer h2,
.footer h3 {
margin: 0;
font-family: var(--font-heading);
font-weight: 400;
letter-spacing: 0;
}
h1 {
max-width: 660px;
font-size: var(--type-h1);
line-height: var(--lh-h1);
}
.hero h1 {
max-width: 680px;
font-size: var(--type-section-display);
line-height: var(--lh-section-display);
}
.wordmark {
width: 100%;
font-family: var(--font-heading);
font-size: clamp(82px, 18vw, 260px);
line-height: calc(1em + 8px);
text-transform: uppercase;
white-space: nowrap;
}
.hero-actions,
.actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
flex-wrap: wrap;
}
.hero .button {
border-color: var(--dark-ink);
background: var(--dark-ink);
color: var(--ink);
}
.hero .button.secondary {
background: transparent;
color: var(--dark-ink);
}
.venue-sticky-cta {
position: sticky;
top: 0;
z-index: 90;
background: var(--ink);
color: var(--paper);
padding: 12px 0;
transform: translateY(-100%);
opacity: 0;
transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1);
pointer-events: none;
}
.venue-sticky-cta.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.venue-sticky-cta__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.venue-sticky-cta__name {
font-family: var(--font-heading);
font-size: var(--type-body);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
line-height: var(--lh-body);
}
.venue-sticky-cta__actions {
display: flex;
gap: 10px;
}
.venue-sticky-cta .button {
min-height: 36px;
padding: 0 14px;
font-size: 11px;
}
.venue-sticky-cta .button.secondary {
border-color: var(--paper);
color: var(--paper);
}
.page-top {
padding-top: 220px;
padding-bottom: 110px;
}
.page-top--display {
padding-top: clamp(160px, 18vh, 260px);
padding-bottom: clamp(80px, 10vh, 140px);
}
.page-top__display-heading {
margin: 0;
font-family: var(--font-heading);
font-size: clamp(32px, 6vw, 80px);
font-weight: 400;
line-height: calc(1em + 8px);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--charcoal, #1A1A1A);
}
.page-top__display-sub {
margin: clamp(16px, 2.5vw, 32px) 0 0;
font-family: var(--font-body);
font-size: clamp(13px, 1.4vw, 20px);
font-weight: 300;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26, 26, 26, 0.5);
}
/* Centred page-top variant (e.g. Privacy Policy). Scoped so the Book
page's left-aligned display heading is unaffected. max-width:none
clears the global h1 cap so the heading can truly centre. */
.page-top--center { text-align: center; }
.page-top--center .page-top__display-heading { max-width: none; }
/* =================================================================
About — "Our Story" panel
================================================================= */
.about-story {
background: var(--verde-cream, #E7E0CB);
padding: clamp(80px, 10vw, 140px) clamp(24px, 6vw, 80px);
}
.about-story__inner {
max-width: 1080px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.about-story__logo {
display: block;
/* Matched to the other animated illustration marks (ram, pasta). */
width: clamp(220px, 28vw, 300px);
height: auto;
margin-bottom: 0;
}
.about-story__heading {
margin: 0 0 clamp(40px, 5vw, 72px);
font-family: var(--font-heading);
font-size: var(--type-h2);
font-weight: 400;
line-height: calc(1em + 8px);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--verde-gold, #B8924A);
text-align: center;
}
/* Single 680px column — the same body measure as the Darlinghurst and
Alexandria intro paragraphs, so the three opening sections align. */
.about-story__columns {
display: grid;
grid-template-columns: 1fr;
gap: 0;
width: 100%;
max-width: 680px;
margin-inline: auto;
}
.about-story__col p {
margin: 0 0 1.4em;
font-family: var(--font-body);
font-size: var(--type-body-sm, 15px);
line-height: calc(1em + 8px);
color: var(--charcoal, #2D241F);
}
.about-story__col p:last-of-type {
margin-bottom: 0;
}
.about-story__col + .about-story__col {
margin-top: 1.4em;
}
.about-story__signature {
margin-top: 32px;
max-width: 126px;
}
.about-story__signature .signature-line {
display: block;
width: 100%;
height: auto;
overflow: hidden;
}
.about-story__signature .signature-line[data-sig-ruggerino] {
overflow: visible;
}
.signature-caption {
margin-top: 16px;
font-variant-caps: all-small-caps;
font-size: 11px;
letter-spacing: 0.15em;
color: rgba(28, 28, 28, 0.6);
text-align: left;
white-space: nowrap;
}
/* =================================================================
About — floating archive reel. A fixed-height strip of photos that
drifts continuously in a seamless loop, can be grabbed and flicked
with momentum, and whose frames gently bob. Driven by
initAboutReel(); under reduced motion it falls back to a plain
natively-scrollable strip.
================================================================= */
.about-reel {
background: var(--verde-cream);
padding-block: clamp(40px, 5.5vw, 88px);
overflow: hidden;
/* Soft edge fade so the strip dissolves rather than hard-cuts. */
-webkit-mask-image: linear-gradient(to right, transparent, #000000 6%, #000000 94%, transparent);
mask-image: linear-gradient(to right, transparent, #000000 6%, #000000 94%, transparent);
}
/* Reduced-motion fallback — a plain horizontally-scrollable strip. */
.about-reel--static {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
.about-reel__track {
display: flex;
width: max-content;
cursor: grab;
user-select: none;
-webkit-user-select: none;
will-change: transform;
}
.about-reel__track.is-dragging { cursor: grabbing; }
.about-reel--static .about-reel__track { cursor: default; }
.about-reel__frame {
position: relative;
isolation: isolate; /* contain the washout blend to the frame */
flex: 0 0 auto;
margin: 0 clamp(12px, 1.6vw, 24px) 0 0;
height: clamp(240px, 30vw, 400px);
overflow: hidden;
background: #1a1a1a;
border-radius: 2px;
}
.about-reel__frame img {
display: block;
height: 100%;
width: auto;
object-fit: cover;
pointer-events: none;
-webkit-user-drag: none;
/* Vintage tone — soften the contrast and warm it a touch. */
filter: contrast(0.92) brightness(1.04) sepia(0.18);
}
/* Washed-out vintage look — a warm overlay lifts the shadows via the
lighten blend (technique: una.im/vintage-washout). */
.about-reel__frame::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: #433728;
mix-blend-mode: lighten;
pointer-events: none;
}
/* ── About: Boat-Between photo stack section ── */
.boat-between {
background: #1F3D38;
text-align: center;
overflow: clip;
position: relative;
isolation: isolate;
height: 100vh;
height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
/* Extra top padding so "1889. 1966." clears the fixed nav with room
to breathe. */
padding-top: clamp(96px, 11vh, 132px);
}
.boat-between__inner {
position: relative;
z-index: 4;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Ghosted dates — a recessed inscription in the green wall behind the
gold caption. A touch more present than before, never competing. */
.boat-between__years {
font-family: var(--font-heading, Georgia, serif);
font-size: 112px;
line-height: calc(1em + 8px);
color: rgba(20, 20, 20, 0.3);
letter-spacing: 8px;
margin: 0 0 8px;
user-select: none;
}
.boat-between__heading {
font-family: var(--font-heading, Georgia, serif);
font-size: clamp(28px, 4vw, 48px);
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #B8924A;
margin: 0;
}
.boat-between__body {
font-family: var(--font-body, "Figtree", sans-serif);
font-size: clamp(16px, 1.4vw, 20px);
line-height: calc(1em + 8px);
color: var(--paper, #E7E0CB);
max-width: 520px;
margin: 28px auto 0;
text-align: center;
}
.boat-between__stack {
position: relative;
margin-top: 32px;
width: 100%;
flex: 1;
min-height: 800px;
z-index: 3;
pointer-events: none;
/* Subtle break from dead-centre — discovered, not staged. */
transform: translateX(20px) rotate(-1deg);
}
.boat-between__photo {
position: absolute;
left: 50%;
top: 0;
background: none;
border: none;
padding: 0;
will-change: transform;
filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.175));
}
.boat-between__photo:last-child {
filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.25));
}
.boat-between__photo img {
display: block;
width: 100%;
height: auto;
}
/* ── Right-rail scroll cue — prompts the pinned archive reveal.
Echoes the hero scroll-cue vocabulary (cream hairline, drifting
mark) turned vertical, with a gold bead tying it to the heading. ── */
.boat-between__cue {
position: absolute;
right: clamp(20px, 3.4vw, 56px);
top: 50%;
transform: translateY(-50%);
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
pointer-events: none;
}
.boat-between__cue-label {
writing-mode: vertical-rl;
text-transform: uppercase;
font-family: var(--font-body, "Figtree", sans-serif);
font-size: 11px;
letter-spacing: 0.42em;
color: rgba(239, 231, 216, 0.55);
}
.boat-between__cue-track {
position: relative;
width: 1px;
height: 72px;
overflow: hidden;
background: linear-gradient(
to bottom,
rgba(239, 231, 216, 0.06),
rgba(239, 231, 216, 0.3),
rgba(239, 231, 216, 0.06));
}
.boat-between__cue-bead {
position: absolute;
left: 50%;
top: 0;
width: 3px;
height: 14px;
margin-left: -1.5px;
border-radius: 2px;
background: linear-gradient(
to bottom,
rgba(184, 146, 74, 0),
var(--verde-gold, #B8924A) 55%,
rgba(184, 146, 74, 0));
}
/* ── Archive atmosphere — gallery light, contact shadow, film grain.
A warm pool of light behind and below the document pile, a faint
vertical light through the centre, a soft elliptical contact shadow
grounding the papers, and an almost-imperceptible grain over the
green field. All static — no runtime cost. ── */
.boat-between::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse 52% 40% at 50% 63%,
rgba(234, 214, 166, 0.11) 0%,
rgba(234, 214, 166, 0.045) 42%,
transparent 72%),
linear-gradient(90deg,
transparent 36%,
rgba(240, 233, 212, 0.05) 50%,
transparent 64%);
}
.boat-between::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='bn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23bn)'/%3E%3C/svg%3E");
background-size: 160px 160px;
opacity: 0.35;
mix-blend-mode: overlay;
}
/* ── Mobile: boat-between ── */
@media (max-width: 767px) {
.boat-between {
height: auto;
display: block;
padding: 80px 32px 60px;
}
.boat-between__years {
font-size: 72px;
}
.boat-between__heading {
font-size: 18px;
letter-spacing: 4px;
}
.boat-between__body {
font-size: 13px;
max-width: 320px;
}
.boat-between {
overflow: visible;
}
/* Mobile scrolls the archive column natively — no pinned reveal to
prompt, and the foot of the viewport holds the Book a Table bar. */
.boat-between__cue {
display: none;
}
.boat-between__stack {
position: relative;
top: auto;
left: auto;
width: 100%;
height: auto;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
margin-top: 48px;
pointer-events: auto;
/* Stacked column on mobile — no offset/rotation. */
transform: none;
}
.boat-between__photo {
position: relative;
top: auto;
left: auto;
width: 72%;
max-width: 280px;
}
.boat-between__photo:nth-child(1) { transform: rotate(-2.5deg); }
.boat-between__photo:nth-child(2) { transform: rotate(3.5deg); }
.boat-between__photo:nth-child(3) { transform: rotate(-1.5deg); }
.boat-between__photo:nth-child(4) { transform: rotate(4deg); }
.boat-between__photo:nth-child(5) { transform: rotate(-3deg); }
.boat-between__photo:nth-child(6) { transform: rotate(2deg); }
.boat-between__photo:nth-child(7) { transform: rotate(-2deg); }
.boat-between__photo img {
width: 100%;
height: auto;
}
}
/* ── About: Burgundy tagline band ── */
.about-band {
background: var(--verde-burgundy, #6B2D3E);
padding: clamp(48px, 6vw, 80px) 24px;
text-align: center;
/* Sit above the pinned boat-between — without this, a scrub-lagging
pin bled over the burgundy panel as you scrolled past it. */
position: relative;
z-index: 1;
}
.about-band__text {
font-family: var(--font-heading);
font-size: var(--type-h3);
font-weight: 400;
letter-spacing: normal;
text-transform: uppercase;
color: var(--verde-gold, #B8924A);
margin: 0;
}
.section-pad { padding-block: 112px; }
.display-heading {
font-size: var(--type-section-display);
line-height: var(--lh-section-display);
}
.lead {
max-width: 600px;
color: var(--muted);
font-size: var(--type-body);
line-height: var(--lh-body);
}
.intro {
text-align: center;
}
.intro .lead {
margin: 42px auto 0;
}
.wide-image {
width: 80%;
min-height: 560px;
}
.texture-band {
width: 100%;
min-height: 440px;
border-left: 0;
border-right: 0;
background: #4a433c;
color: rgba(246, 240, 232, 0.78);
}
.texture-band .slot span {
color: rgba(246, 240, 232, 0.72);
}
.swap-map {
padding: 30px 0;
border-block: 1px solid var(--line);
background: #ebe3d9;
}
.swap-map-grid {
display: grid;
grid-template-columns: 220px 1fr;
gap: 20px;
}
.swap-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.swap-list div {
min-height: 90px;
padding: 12px;
border: 1px solid var(--line);
background: var(--paper);
color: var(--muted);
font-size: 11px;
line-height: calc(1em + 8px);
text-transform: uppercase;
}
.swap-list strong {
display: block;
margin-bottom: 6px;
color: var(--ink);
font-size: 12px;
}
.section-heading { margin-bottom: 70px; }
.section-heading .eyebrow { margin-bottom: 18px; }
.split-list {
display: grid;
gap: 86px;
}
.split-row {
display: grid;
grid-template-columns: minmax(280px, 0.4fr) minmax(420px, 0.6fr);
gap: 20px;
align-items: stretch;
}
.split-row.reverse {
grid-template-columns: minmax(420px, 0.6fr) minmax(280px, 0.4fr);
}
.split-row.reverse .card { order: 2; }
.card {
min-height: 430px;
padding: 34px 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.card h2,
.card h3 {
font-size: var(--type-h2);
line-height: var(--lh-h2);
}
.card p,
.feature-copy p,
.footer p {
color: var(--muted);
font-size: var(--type-body-sm);
line-height: var(--lh-body-sm);
}
.split-row > .image-slot {
min-height: 560px;
}
.round-image-slot {
width: min(100%, 560px);
min-height: auto;
aspect-ratio: 1 / 1;
align-self: center;
justify-self: center;
border-radius: 50%;
overflow: hidden;
}
.split-row > .round-image-slot {
min-height: auto;
}
.features {
background: var(--dark);
color: var(--dark-ink);
}
.features .eyebrow,
.features p {
color: rgba(246, 240, 232, 0.72);
}
.feature-list {
display: grid;
border-top: 1px solid rgba(246, 240, 232, 0.18);
}
.feature-item {
display: grid;
grid-template-columns: 70px minmax(280px, 0.45fr) minmax(420px, 0.55fr);
gap: 32px;
align-items: center;
min-height: 280px;
padding-block: 34px;
border-bottom: 1px solid rgba(246, 240, 232, 0.18);
}
.feature-number {
color: rgba(246, 240, 232, 0.5);
font-family: var(--font-heading);
font-size: var(--type-eyebrow);
}
.feature-copy h3 {
margin: 0;
font-family: var(--font-heading);
font-size: var(--type-section-display);
font-weight: 400;
line-height: var(--lh-section-display);
}
.feature-item .image-slot {
min-height: 210px;
border-color: rgba(246, 240, 232, 0.22);
background: rgba(246, 240, 232, 0.07);
color: rgba(246, 240, 232, 0.58);
}
.diagonal-features .feature-item:nth-child(even) {
grid-template-columns: minmax(420px, 0.55fr) 70px minmax(280px, 0.45fr);
}
.diagonal-features .feature-item:nth-child(even) .image-slot {
grid-column: 1;
grid-row: 1;
}
.diagonal-features .feature-item:nth-child(even) .feature-number {
grid-column: 2;
grid-row: 1;
}
.diagonal-features .feature-item:nth-child(even) .feature-copy {
grid-column: 3;
grid-row: 1;
}
.story-grid,
.booking-grid,
.contact-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.story-grid {
grid-template-columns: minmax(420px, 0.55fr) minmax(320px, 0.45fr);
gap: 72px;
align-items: end;
}
.story-grid p {
margin: 0;
color: var(--muted);
font-size: var(--type-body-sm);
line-height: var(--lh-body-sm);
}
.gallery {
overflow: hidden;
border-block: 1px solid var(--line);
background: var(--soft);
}
.gallery-track {
width: max-content;
display: flex;
gap: clamp(45px, 4.8vw, 58px);
padding-block: 28px;
animation: drift 28s linear infinite;
}
.gallery-tile {
width: clamp(316px, 36vw, 436px);
aspect-ratio: 109 / 90;
display: grid;
place-items: center;
border: 2px dashed #a9a29a;
background: #d5d0ca;
color: #6f6861;
font-size: 13px;
font-weight: 800;
text-align: center;
text-transform: uppercase;
}
@keyframes drift {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.booking-card {
min-height: 380px;
padding: 34px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid var(--line);
background: var(--panel);
border-radius: var(--radius);
}
.booking-venue-grid {
gap: 34px;
}
.booking-venue-card {
min-height: auto;
gap: 28px;
padding: 0;
overflow: hidden;
}
.booking-image {
min-height: 360px;
border-width: 0 0 1px;
}
.booking-copy {
padding: 0 34px;
}
.booking-copy p {
margin: 16px 0 0;
color: var(--muted);
font-size: var(--type-body-sm);
line-height: var(--lh-body-sm);
}
.booking-card h2,
.booking-card h3 {
margin: 0;
font-family: var(--font-heading);
font-size: var(--type-h2);
font-weight: 400;
line-height: var(--lh-h2);
}
.sevenrooms-embed {
margin: 0 34px 34px;
padding: 24px;
display: grid;
gap: 16px;
border: 1px solid var(--line);
background: var(--paper);
}
.embed-top {
display: flex;
justify-content: space-between;
gap: 16px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.embed-top strong {
color: var(--ink);
font-weight: 800;
letter-spacing: 0.08em;
}
.sevenrooms-embed label {
display: grid;
gap: 8px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.sevenrooms-embed input,
.sevenrooms-embed select {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: 0;
background: var(--soft);
color: var(--ink);
font: 16px/1 var(--font-body);
}
.sevenrooms-embed .form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.sevenrooms-embed .button {
width: 100%;
min-height: 50px;
margin-top: 4px;
}
.detail-list {
margin: 24px 0 0;
padding: 0;
display: grid;
gap: 9px;
color: var(--muted);
font-size: var(--type-body-sm);
line-height: var(--lh-body-sm);
list-style: none;
}
.detail-list li::before {
content: "· ";
color: var(--ink);
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.field {
min-height: 58px;
border-bottom: 1px solid var(--line);
color: var(--muted);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
display: flex;
align-items: end;
padding-bottom: 10px;
}
.field.wide {
grid-column: 1 / -1;
min-height: 100px;
}
/* ---------------------------------------------------------------
Contact page
--------------------------------------------------------------- */
.contact-intro {
text-align: center;
padding-bottom: 0;
}
/* When the intro is the first section (hero removed), give it room to
clear the fixed nav. Two classes so it beats the responsive
.section-pad padding at any breakpoint. */
.contact-intro.contact-intro--top { padding-top: clamp(120px, 16vh, 200px); }
.contact-intro__heading {
font-family: var(--font-heading);
font-size: var(--type-h1);
font-weight: 400;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: var(--lh-h1-center);
color: #B8924A; /* Oro Antico */
/* Centre the capped (max-width:660px from global h1) heading box within
the centred intro — without this it hugs the left while its text
centres inside, misaligning with the full-width centred body. */
max-width: 720px;
margin: 0 auto 20px;
}
.contact-intro__body {
font-size: var(--type-body);
color: var(--muted);
line-height: var(--lh-body);
margin: 0;
}
.contact-intro__body a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.contact-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: start;
}
.contact-info__heading {
font-family: var(--font-body);
font-size: var(--type-body);
font-weight: 600;
letter-spacing: 0.04em;
line-height: var(--lh-body);
margin: 0 0 8px;
}
.contact-info__sub {
font-size: var(--type-body-sm);
line-height: var(--lh-body-sm);
color: var(--muted);
margin: 0 0 32px;
}
.contact-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 40px;
}
.contact-label {
font-family: var(--font-heading);
font-size: var(--type-footer-heading);
font-weight: 400;
letter-spacing: 0.12em;
line-height: var(--lh-footer-heading);
text-transform: uppercase;
color: var(--muted);
margin: 0 0 6px;
}
.contact-meta__item a {
font-size: var(--type-body-sm);
color: var(--verde-ink);
text-decoration: none;
}
.contact-meta__item a:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
.contact-venue {
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 28px;
margin-top: 28px;
}
.contact-venue__address {
font-style: normal;
font-size: var(--type-body-sm);
line-height: var(--lh-body-sm);
margin: 8px 0;
}
.contact-venue__email {
display: block;
font-size: var(--type-caption);
line-height: var(--lh-caption);
color: var(--muted);
text-decoration: none;
margin-bottom: 16px;
}
.contact-venue__email:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
.button.small {
font-size: 11px;
padding: 10px 22px;
letter-spacing: 0.1em;
}
/* Map embed box */
.contact-map {
display: block;
position: relative;
width: 100%;
height: 200px;
margin-top: 20px;
border-radius: 8px;
overflow: hidden;
background: var(--soft);
}
.contact-map iframe {
width: 100%;
height: 100%;
border: 0;
pointer-events: none;
}
.contact-map__overlay {
position: absolute;
inset: 0;
cursor: pointer;
}
.contact-map:hover iframe {
filter: brightness(0.96);
}
/* Contact form — matches events form styling */
.contact-form {
background: #fff;
border-radius: 6px;
padding: clamp(32px, 5vw, 56px) clamp(28px, 5vw, 56px);
}
.contact-form__header {
text-align: center;
margin-bottom: clamp(40px, 5vw, 64px);
}
.contact-form__heading {
margin: 0;
font-family: var(--font-body);
font-size: var(--type-h2);
font-weight: 500;
line-height: var(--lh-h2);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--verde-ink);
}
.contact-form__sub {
margin: 12px 0 0;
font-family: var(--font-body);
font-size: var(--type-body);
font-weight: 400;
line-height: var(--lh-body);
color: var(--muted);
}
.contact-form__inner {
display: flex;
flex-direction: column;
gap: 0;
}
.contact-form__group {
border: 0;
margin: 0;
padding: 0;
margin-top: clamp(40px, 5vw, 56px);
}
.contact-form__group:first-of-type {
margin-top: 0;
}
.contact-form__group-heading {
font-family: var(--font-body);
font-size: var(--type-titles);
font-weight: 500;
letter-spacing: 0.2em;
line-height: var(--lh-titles);
text-transform: uppercase;
color: var(--verde-ink);
margin: 0;
padding: 0;
width: 100%;
}
.contact-form__rule {
height: 1px;
background: rgba(42, 38, 35, 0.12);
margin: 10px 0 20px;
border: 0;
}
.contact-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px clamp(20px, 2.5vw, 28px);
margin-bottom: 20px;
}
.contact-form__group > .contact-form__field {
margin-bottom: 20px;
}
.contact-form__group > .contact-form__field:last-child {
margin-bottom: 0;
}
.contact-form__field label {
display: block;
font-family: var(--font-body);
font-size: var(--type-caption);
font-weight: 400;
line-height: var(--lh-caption);
color: var(--verde-ink);
margin-bottom: 8px;
}
.contact-form__field input,
.contact-form__field select {
width: 100%;
padding: 14px 16px;
font-family: var(--font-body);
font-size: var(--type-caption);
color: var(--verde-ink);
background: #f5f4f2;
border: 1px solid #e8e6e3;
border-radius: 4px;
outline: none;
-webkit-appearance: none;
appearance: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
color: #b0aca6;
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
border-color: var(--verde-gold);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.12);
}
.contact-form__field input:focus-visible,
.contact-form__field select:focus-visible,
.contact-form__field textarea:focus-visible {
outline: 2px solid var(--verde-gold);
outline-offset: 1px;
}
.contact-form__field textarea {
width: 100%;
padding: 14px 16px;
font-family: var(--font-body);
font-size: var(--type-caption);
color: var(--verde-ink);
background: #f5f4f2;
border: 1px solid #e8e6e3;
border-radius: 4px;
outline: none;
-webkit-appearance: none;
appearance: none;
resize: vertical;
min-height: 120px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.contact-form__field select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232A2623' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.contact-form__checkbox {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: var(--type-caption);
line-height: var(--lh-caption);
color: var(--verde-ink);
cursor: pointer;
margin-top: clamp(36px, 4.5vw, 48px);
}
.contact-form__checkbox input[type="checkbox"] {
width: 20px;
height: 20px;
background: #f5f4f2;
border: 1px solid #e8e6e3;
border-radius: 4px;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease, border-color 0.15s ease;
}
.contact-form__checkbox input[type="checkbox"]:checked {
background: var(--verde-ink);
border-color: var(--verde-ink);
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6l2 2 4-4' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.contact-form__checkbox input[type="checkbox"]:focus-visible {
outline: 2px solid var(--verde-gold);
outline-offset: 2px;
}
.contact-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 56px;
padding: 0 32px;
margin-top: 20px;
font-family: var(--font-body);
font-size: var(--type-button);
font-weight: 500;
letter-spacing: 0.18em;
line-height: var(--lh-button);
text-transform: uppercase;
border: 0;
border-radius: 4px;
background: var(--verde-ink);
color: #fff;
cursor: pointer;
transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 200ms ease;
}
.contact-form__submit:hover {
transform: scale(1.01);
box-shadow: 0 4px 20px rgba(42, 38, 35, 0.2);
}
.contact-form__submit:active {
transform: scale(0.98);
}
.contact-form__submit:focus-visible {
outline: 2px solid var(--verde-ink);
outline-offset: 4px;
}
/* Gift cards */
.contact-gift__card {
max-width: 480px;
}
.contact-gift__heading {
font-family: var(--font-body);
font-size: var(--type-body);
font-weight: 600;
line-height: var(--lh-body);
margin: 0 0 8px;
}
.contact-gift__body {
font-size: var(--type-body-sm);
line-height: var(--lh-body-sm);
color: var(--muted);
margin: 0 0 20px;
}
.footer {
padding: 90px 0 36px;
background: var(--dark);
color: var(--dark-ink);
}
.footer-grid {
display: grid;
grid-template-columns: 1.2fr repeat(3, minmax(160px, 1fr));
gap: 48px;
margin-top: 58px;
}
.footer h2 { font-size: var(--type-h2); line-height: var(--lh-h2); }
.footer h3 { font-size: var(--type-body-lg); line-height: var(--lh-body-lg); }
.footer a,
.footer p {
color: rgba(246, 240, 232, 0.72);
}
.footer-links {
display: grid;
gap: 12px;
margin-top: 20px;
font-size: var(--type-footer-heading);
line-height: var(--lh-footer-heading);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.footer-bottom {
display: flex;
justify-content: space-between;
gap: 24px;
margin-top: 64px;
padding-top: 28px;
border-top: 1px solid rgba(246, 240, 232, 0.18);
color: rgba(246, 240, 232, 0.5);
font-size: var(--type-caption);
line-height: var(--lh-caption);
}
/* v1 drawer removed — see .mobile-menu for active drawer styles */
@media (max-width: 1199px) {
.split-row,
.split-row.reverse,
.story-grid,
.booking-grid,
.contact-grid {
grid-template-columns: 1fr;
}
.split-row.reverse .card { order: 0; }
.feature-item { grid-template-columns: 70px 1fr; }
.feature-item .image-slot { grid-column: 2; }
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-layout {
grid-template-columns: 1fr;
gap: 48px;
}
.contact-form__row {
grid-template-columns: 1fr;
}
}
@media (max-width: 809px) {
/* --gutter is now fluid (see :root); no fixed mobile override needed. */
.hero {
min-height: 100vh;
min-height: 100dvh;
padding-top: 70px;
}
.hero.compact {
min-height: 100vh;
min-height: 100dvh;
padding-top: 70px;
}
.hero-content { padding-bottom: 68px; }
.hero-row { display: grid; gap: 22px; }
.hero h1 { font-size: var(--type-h2); }
.wordmark { font-size: clamp(68px, 24vw, 112px); }
.page-top { padding-top: 140px; padding-bottom: 76px; }
.section-pad { padding-block: 72px; }
.display-heading { font-size: var(--type-h3); }
.lead,
.story-grid p { font-size: var(--type-body-sm); }
.wide-image { width: 90%; min-height: 260px; }
.texture-band {
width: 100%;
min-height: 300px;
background-attachment: scroll;
}
.swap-map-grid,
.swap-list { grid-template-columns: 1fr; }
.section-heading { margin-bottom: 42px; }
.split-list { gap: 54px; }
.card { min-height: 300px; padding: 26px 0; }
.card h2,
.card h3,
.feature-copy h3,
.booking-card h2,
.booking-card h3 { font-size: var(--type-h3); }
.split-row > .image-slot { min-height: 320px; }
.split-row > .round-image-slot {
width: min(100%, 320px);
min-height: auto;
}
.feature-item { grid-template-columns: 1fr; gap: 18px; }
.diagonal-features .feature-item:nth-child(even) {
grid-template-columns: 1fr;
}
.diagonal-features .feature-item:nth-child(even) .image-slot,
.diagonal-features .feature-item:nth-child(even) .feature-number,
.diagonal-features .feature-item:nth-child(even) .feature-copy {
grid-column: auto;
grid-row: auto;
}
.feature-item .image-slot { grid-column: auto; min-height: 190px; }
.booking-card { min-height: 320px; padding: 26px; }
.form-grid { grid-template-columns: 1fr; }
.field.wide { grid-column: auto; }
.footer-grid { grid-template-columns: 1fr; }
.footer h2 { font-size: var(--type-h2); }
.footer-bottom { display: grid; }
}
/* Home page visual prototype based on the provided Verde reference.
Aliases map to brand tokens — kept for backward compat. */
.home-page {
--home-cream: var(--verde-cream);
--home-burgundy: var(--verde-burgundy);
--home-gold: var(--verde-gold);
--home-ash: var(--soft);
--home-black: var(--verde-ink);
background: var(--verde-cream);
}
.home-hero {
position: relative;
min-height: 560px;
display: grid;
place-items: center;
overflow: hidden;
color: #f8f0df;
}
.home-hero-media {
position: absolute;
inset: 0;
background:
linear-gradient(rgba(12, 12, 12, 0.24), rgba(12, 12, 12, 0.34)),
radial-gradient(circle at 52% 16%, rgba(229, 170, 65, 0.92) 0 8%, transparent 14%),
radial-gradient(circle at 50% 50%, rgba(244, 239, 222, 0.88) 0 17%, transparent 18%),
radial-gradient(circle at 43% 58%, rgba(120, 34, 38, 0.8) 0 17%, transparent 18%),
radial-gradient(circle at 66% 70%, rgba(52, 37, 30, 0.74) 0 18%, transparent 19%),
repeating-linear-gradient(132deg, rgba(120, 34, 38, 0.38) 0 18px, rgba(245, 238, 224, 0.62) 18px 46px, rgba(64, 44, 39, 0.36) 46px 70px),
#3a332f;
background-size: cover;
transform: scale(1.02);
}
.home-hero-copy {
position: relative;
z-index: 1;
display: grid;
justify-items: center;
text-align: center;
text-transform: uppercase;
}
.home-hero-copy p {
margin: 0;
font-family: var(--font-heading);
font-size: clamp(18px, 2.4vw, 32px);
letter-spacing: 0;
}
.home-hero-copy span {
margin-top: 8px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.34em;
}
.home-hero-copy h1 {
margin: 10px 0 0;
max-width: none;
font-size: clamp(78px, 18vw, 190px);
line-height: calc(1em + 8px);
text-transform: uppercase;
}
.home-intro {
min-height: 560px;
padding: 96px 20px;
display: grid;
place-items: center;
align-content: center;
gap: 24px;
text-align: center;
background: var(--home-cream);
}
.intro-icon {
width: 20px;
height: 64px;
position: relative;
}
.intro-icon::before {
content: "";
position: absolute;
inset: 0 3px 30px;
border-radius: 50% 50% 44% 44%;
background: linear-gradient(#f3efe7 0 44%, #7b2527 45% 100%);
border: 1px solid rgba(25, 21, 18, 0.45);
}
.intro-icon::after {
content: "";
position: absolute;
left: 9px;
top: 34px;
width: 1px;
height: 30px;
background: rgba(25, 21, 18, 0.45);
}
.home-intro h2 {
margin: 0;
color: var(--home-gold);
font-family: var(--font-heading);
font-size: clamp(40px, 6.7vw, 80px);
font-weight: 400;
letter-spacing: 0;
line-height: calc(1em + 8px);
text-transform: uppercase;
}
.home-intro p {
max-width: 760px;
margin: 0;
color: #1A1A1A;
font-size: var(--type-body-sm);
line-height: var(--lh-body-sm);
}
.home-outline-button {
min-width: 150px;
padding: 12px 18px;
border: 1px solid rgba(25, 21, 18, 0.55);
color: var(--ink);
font-size: var(--type-button);
font-weight: 800;
letter-spacing: 0.18em;
line-height: var(--lh-button);
text-transform: uppercase;
}
.marble-reveal {
position: relative;
min-height: 310px;
display: grid;
place-items: center;
overflow: visible;
}
.marble-reveal {
background:
radial-gradient(circle at 18% 18%, #f7eee8 0 7%, transparent 16%),
radial-gradient(circle at 74% 68%, #f6eee5 0 9%, transparent 18%),
repeating-linear-gradient(142deg, #742c31 0 34px, #f2e6dc 34px 92px, #6f2228 92px 124px, #fff6ea 124px 170px);
}
.verde-seal {
width: 150px;
height: 150px;
display: grid;
place-items: center;
border-radius: 50%;
background: #164433;
border: 1px solid rgba(238, 231, 218, 0.65);
color: var(--home-gold);
font-family: var(--font-heading);
font-size: 12px;
letter-spacing: 0.18em;
line-height: calc(1em + 8px);
text-align: center;
text-transform: uppercase;
transform: translateY(64px);
z-index: 2;
}
.verde-seal strong {
display: block;
font-size: 34px;
font-weight: 400;
letter-spacing: 0;
}
/* ----- Home Venues Section ----- */
.home-venues {
padding: clamp(80px, 10vw, 128px) clamp(24px, 5vw, 80px);
background: var(--verde-burgundy, #6B1F1F);
position: relative;
z-index: 1;
overflow: hidden;
}
.venues-marquee {
margin: 0 calc(-1 * clamp(24px, 5vw, 80px)) clamp(48px, 6vw, 80px);
font-family: var(--font-heading);
font-size: clamp(36px, 9vw, 96px);
font-weight: 400;
line-height: calc(1em + 8px);
letter-spacing: 0.02em;
text-transform: uppercase;
color: rgba(26, 26, 26, 0.2);
white-space: nowrap;
}
.venue-rows {
max-width: 1100px;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: clamp(48px, 6vw, 80px);
}
.venue-row {
display: flex;
align-items: center;
gap: clamp(40px, 7vw, 111px);
}
.venue-row--img-right {
flex-direction: row;
}
.venue-row__image {
flex: 0 0 clamp(280px, 38vw, 505px);
}
.venue-row__image .image-slot {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 2px;
overflow: hidden;
}
.venue-row__image .image-slot picture,
.venue-row__image .image-slot img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.venue-row__image .image-slot img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.venue-row__content {
flex: 1;
min-width: 0;
}
.venue-row__heading {
margin: 0 0 20px;
font-family: var(--font-heading);
font-size: clamp(28px, 3vw, 36px);
font-weight: 400;
line-height: calc(1em + 8px);
text-transform: uppercase;
color: var(--verde-gold, #B8924A);
}
.venue-row__body {
margin: 0 0 24px;
max-width: 400px;
font-family: var(--font-body);
font-size: clamp(14px, 1vw, 16px);
line-height: calc(1em + 8px);
color: #fff;
}
.venue-row__link {
display: inline-block;
padding-bottom: 4px;
border-bottom: 1px solid var(--verde-cream, #E7E0CB);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 2.34px;
line-height: calc(1em + 8px);
text-transform: uppercase;
text-decoration: none;
color: var(--verde-cream, #E7E0CB);
transition: opacity 0.25s ease;
}
.venue-row__link:hover {
opacity: 0.7;
}
.venue-row__link:focus-visible {
outline: 2px solid var(--verde-gold, #B8924A);
outline-offset: 4px;
}
/* Mobile: stack vertically */
@media (max-width: 768px) {
.venue-row {
flex-direction: column;
gap: 32px;
text-align: center;
}
.venue-row--img-right {
flex-direction: column;
}
/* On mobile, always show image first */
.venue-row--img-right .venue-row__image {
order: -1;
}
.venue-row__image {
flex: none;
width: 100%;
max-width: 400px;
margin-inline: auto;
}
.venue-row__body {
max-width: none;
margin-inline: auto;
}
}
/* =================================================================
"The World of Verde" section
================================================================= */
.world-of-verde {
position: relative;
z-index: 1;
padding: clamp(80px, 10vw, 128px) clamp(24px, 5vw, 80px);
background: var(--verde-cream, #E7E0CB);
color: var(--verde-ink, #1A1A1A);
}
.world-marquee {
margin: 0 calc(-1 * clamp(24px, 5vw, 80px)) clamp(48px, 6vw, 80px);
font-family: var(--font-heading);
font-size: clamp(32px, 7.5vw, 96px);
font-weight: 400;
line-height: calc(1em + 8px);
letter-spacing: 0.02em;
text-transform: uppercase;
text-align: center;
color: rgba(26, 26, 26, 0.1);
white-space: nowrap;
}
.world-rows {
max-width: 1100px;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 32px;
}
.world-row {
display: flex;
flex-direction: column;
gap: 24px;
}
.world-row__rule {
border: none;
border-top: 1px solid var(--verde-border, #C7C7C7);
margin: 0;
}
.world-row__inner {
display: flex;
align-items: flex-start;
gap: clamp(40px, 7vw, 111px);
}
.world-row__text {
display: flex;
align-items: flex-start;
gap: clamp(24px, 4vw, 69px);
flex: 1;
min-width: 0;
}
.world-row__num {
flex-shrink: 0;
font-family: var(--font-body);
font-size: clamp(16px, 1.5vw, 24px);
font-weight: 400;
line-height: calc(1em + 8px);
color: var(--verde-ink, #1A1A1A);
}
.world-row__copy {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 419px;
}
.world-row__title {
margin: 0;
font-family: var(--font-heading);
font-size: clamp(24px, 2.5vw, 32px);
font-weight: 400;
line-height: calc(1em + 8px);
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--verde-gold, #B8924A);
}
.world-row__body {
margin: 0;
font-family: var(--font-body);
font-size: clamp(14px, 1vw, 16px);
line-height: calc(1em + 8px);
color: var(--verde-ink, #1A1A1A);
}
.world-row__image {
flex-shrink: 0;
width: clamp(200px, 30vw, 417px);
}
.world-row__image .image-slot {
width: 100%;
aspect-ratio: 417 / 228;
border-radius: 2px;
overflow: hidden;
}
.world-row__image .image-slot img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Square variant — matches venue-row proportions */
.world-row__image--square {
width: clamp(240px, 38vw, 480px);
}
.world-row__image .image-slot--square {
aspect-ratio: 1 / 1;
}
/* Mobile: stack text above image */
@media (max-width: 768px) {
.world-row__inner {
flex-direction: column;
gap: 24px;
}
.world-row__image {
width: 100%;
}
.world-row__image .image-slot {
aspect-ratio: 16 / 9;
}
.world-row__text {
gap: 20px;
}
.world-row__copy {
max-width: none;
}
}
/* Editorial zig-zag — alternate rows place the image on the left so
the eye travels down the chapters rather than down a single column.
Desktop only; rows always stack text-over-image on mobile. */
@media (min-width: 769px) {
.world-rows .world-row:nth-child(even) .world-row__inner {
flex-direction: row-reverse;
}
}
/* =================================================================
PHASE 2C — World of Verde pinned set piece.
This block (un-gated) is the STATIC FALLBACK used by no-JS, mobile,
and reduced-motion: chapters stacked in flow, fully visible, with the
oversized numeral reading as a ghosted divider above each chapter.
The desktop pinned stage is gated on .world-rows.is-stage (added by
initWorldOfVerde) so nothing shifts before GSAP runs.
================================================================= */
/* Oversized chapter numeral — the visual spine. Ghosted Verde Bosco so
it reads as texture, not a shout (echoes the .world-marquee). */
.world-chapter-numeral {
display: block;
font-family: var(--font-heading);
font-weight: 400;
line-height: 0.82;
font-size: clamp(88px, 18vw, 200px);
letter-spacing: 0.01em;
color: rgba(30, 74, 67, 0.12);
margin: 0.12em 0 -0.1em;
user-select: none;
}
/* The small inline "01" is superseded by the oversized numeral. */
.world-row__num { display: none; }
/* ---- Desktop pinned stage (JS-gated, motion only) ---- */
.world-rows.is-stage {
position: relative;
max-width: none;
margin: 0;
height: 100vh;
height: 100dvh;
display: block;
overflow: hidden;
}
.world-rows.is-stage .world-row {
position: absolute;
inset: 0;
margin: 0;
display: grid;
place-items: center;
padding: clamp(72px, 12vh, 150px) clamp(40px, 8vw, 120px);
}
.world-rows.is-stage .world-row__rule { display: none; }
/* Numeral becomes the centred ghosted spine the chapters move against. */
.world-rows.is-stage .world-chapter-numeral {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
z-index: 0; /* always behind the image (inner is z-index 1) */
font-size: clamp(260px, 46vh, 560px);
line-height: 1;
pointer-events: none;
}
/* Bleed the ghost numeral behind the image edge for a layered editorial
look — shift it toward the image side per chapter. z-index 0 keeps it
behind the photo; the stage's overflow:hidden prevents any scrollbars. */
.world-rows.is-stage .world-row:nth-child(odd) .world-chapter-numeral { left: 37%; }
.world-rows.is-stage .world-row:nth-child(even) .world-chapter-numeral { left: 63%; }
/* Content rides above the spine, centred at editorial width. */
.world-rows.is-stage .world-row__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 1100px;
margin-inline: auto;
align-items: center;
}
/* Editorial rhythm in the stage: 01 image-left, 02 image-right,
03 image-left, 04 image-right (overrides the static even rule). */
.world-rows.is-stage .world-row:nth-child(odd) .world-row__inner {
flex-direction: row-reverse;
}
.world-rows.is-stage .world-row:nth-child(even) .world-row__inner {
flex-direction: row;
}
/* The image gets more presence in the pinned stage. */
.world-rows.is-stage .world-row__image {
width: clamp(320px, 40vw, 520px);
}
.world-rows.is-stage .world-row__image .image-slot {
aspect-ratio: 4 / 3;
}
/* No-flash: the instant .is-stage lands every chapter is absolute and
stacked — hide all but the first until GSAP sets the opacities. */
.world-rows.is-stage .world-row:not(:first-child) .world-row__inner,
.world-rows.is-stage .world-row:not(:first-child) .world-chapter-numeral {
opacity: 0;
}
/* Progress indicator — injected into the stage by JS, motion only. */
/* Vertical right-hand rail — sits beside the chapter image, vertically
centred in the pinned stage (in the eye's working zone). Numbers stack
01/02/03/04; the active one rides larger in Oro Antico, inactives small
and faint (Bosco ~30%). State is driven by the scrubbed timeline. */
.world-progress {
position: absolute;
right: clamp(24px, 4vw, 64px);
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(12px, 2vh, 22px);
font-family: var(--font-body);
font-size: 14px;
letter-spacing: 0.18em;
pointer-events: none;
}
.world-progress__tick {
color: rgba(30, 74, 67, 0.3); /* Verde Bosco, ~30% */
transform-origin: center;
pointer-events: auto; /* clickable even though the rail is none */
cursor: pointer;
padding: 3px 6px;
-webkit-tap-highlight-color: transparent;
}
/* !important beats the GSAP inline colour so hover reads on every tick. */
.world-progress__tick:hover { color: var(--verde-gold) !important; }
.world-progress__tick:focus-visible {
outline: 2px solid var(--verde-gold);
outline-offset: 3px;
border-radius: 3px;
}
/* Thin tonal segment connecting the numbers into a chapter timeline. */
.world-progress__sep {
width: 1px;
height: clamp(12px, 2vh, 22px);
background: rgba(30, 74, 67, 0.18);
}
/* =================================================================
Maitre d' — scroll-scrubbed bow. The canvas continues the cream of
.world-of-verde; initWaiterBow paints the frame for the current
scroll position. Reduced-motion users get a single still frame.
================================================================= */
.waiter-scene {
background: var(--verde-cream, #E7E0CB);
display: flex;
justify-content: center;
align-items: center;
/* Zero padding above the waiter and a tightened pad below, so he
sits snug beneath the World of Verde title. */
padding: 0 clamp(24px, 5vw, 56px) clamp(12px, 2vw, 32px);
}
.waiter-scene__figure {
display: block;
width: clamp(180px, 22vw, 290px);
height: auto;
}
/* =================================================================
"Private — for You" events CTA section
================================================================= */
.private-events {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-height: 100dvh;
padding: clamp(80px, 15vw, 322px) clamp(24px, 5vw, 56px);
overflow: hidden;
}
.private-events__image-slot {
position: absolute;
inset: 0;
z-index: 0;
}
.private-events__image-slot .image-slot {
width: 100%;
height: 100%;
aspect-ratio: auto;
/* Dark warm fill so the cream heading stays readable while this
section is awaiting its photograph. */
background: #423D35;
}
.private-events__image-slot .image-slot img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.private-events__overlay {
position: absolute;
inset: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.3);
pointer-events: none;
}
.private-events__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(60px, 8vw, 120px);
width: 100%;
max-width: 1100px;
}
.private-events__heading {
display: flex;
align-items: baseline;
justify-content: space-between;
width: 100%;
}
.private-events__title-left,
.private-events__title-right {
margin: 0;
font-family: var(--font-heading);
font-size: clamp(36px, 6vw, 72px);
font-weight: 400;
line-height: calc(1em + 8px);
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--verde-gold, #B8924A);
}
.private-events__title-right {
text-align: right;
text-transform: none;
font-style: normal;
}
.private-events__body-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
text-align: center;
}
.private-events__body {
margin: 0;
max-width: 686px;
font-family: var(--font-body);
font-size: clamp(16px, 1.5vw, 24px);
line-height: calc(1em + 8px);
color: #fff;
}
/* Secondary CTA — same tier as .intro__cta, white-on-image variant. */
.private-events__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 264px;
min-height: 48px;
padding: 15px 28px;
border: 1px solid #fff;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.2em;
line-height: calc(1em + 8px);
text-transform: uppercase;
text-decoration: none;
color: #fff;
transition: background 0.3s ease, color 0.3s ease;
}
.private-events__cta:hover,
.private-events__cta:focus-visible {
background: #fff;
color: var(--verde-ink, #1A1A1A);
outline: none;
}
/* Mobile */
@media (max-width: 768px) {
.private-events {
min-height: 80vh;
}
.private-events__heading {
flex-direction: column;
align-items: center;
gap: 8px;
}
.private-events__title-left,
.private-events__title-right {
text-align: center;
}
.private-events__body {
max-width: none;
}
}
/* =================================================================
Events split — two-panel "You Dream / We Host" band on the home
page, with the booking call to action overlaid across the seam.
================================================================= */
.events-split {
position: relative;
background: var(--charcoal, #1A1A1A);
}
.events-split__sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.events-split__grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.events-split__panel {
position: relative;
min-height: clamp(440px, 80vh, 780px);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Placeholder fills — a warm dark for the "dream" half, a cooler dark
for the "host" half, until the photography is dropped in. */
.events-split__panel--dream { background: #1A1A1A; }
.events-split__panel--host { background: #1A1A1A; }
.events-split__media {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.events-split__media picture {
display: block;
width: 100%;
height: 100%;
}
.events-split__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Legibility scrim — darkens the foot of each panel so the overlaid
copy stays readable over any photograph. */
.events-split__panel::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.15) 0%,
rgba(0, 0, 0, 0.15) 45%,
rgba(0, 0, 0, 0.72) 100%);
pointer-events: none;
}
/* Per-panel content — fills the full panel, heading expands to fill the
upper area (flex:1), body copy and CTA sit anchored to the bottom. */
.events-split__content {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: clamp(48px, 7vh, 96px) clamp(32px, 5vw, 64px) clamp(48px, 8vh, 88px);
}
.events-split__word {
flex: 1;
display: flex;
/* Anchor text to the bottom of its flex zone — exactly 24px above
the body copy (via padding-bottom) matching the brief's rhythm spec. */
align-items: flex-end;
justify-content: center;
padding-bottom: 24px;
margin: 0;
font-family: var(--font-heading, "Aboreto", Georgia, serif);
font-size: 46px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--verde-cream, #E7E0CB);
}
.events-split__body {
max-width: 22ch;
margin: 0 0 40px;
font-family: var(--font-body);
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
line-height: 1.5;
color: var(--verde-cream, #E7E0CB);
}
.events-split__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 32px;
border: 1px solid var(--verde-cream, #E7E0CB);
color: var(--verde-cream, #E7E0CB);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
text-decoration: none;
transition: background 200ms ease, color 200ms ease;
}
.events-split__cta:hover,
.events-split__cta:focus-visible {
background: var(--verde-cream, #E7E0CB);
color: var(--charcoal, #1A1A1A);
}
@media (max-width: 768px) {
.events-split__grid { grid-template-columns: 1fr; }
.events-split__panel { min-height: clamp(360px, 60vh, 520px); }
.events-split__panel::after {
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.55) 100%);
}
.events-split__content {
padding: clamp(40px, 6vh, 72px) clamp(24px, 8vw, 56px) clamp(40px, 7vh, 72px);
}
}
/* =================================================================
"The Italian way" quote band
================================================================= */
.italian-way {
position: relative;
z-index: 1;
padding: clamp(48px, 6vw, 80px) clamp(24px, 5vw, 80px);
/* Brand Verde Bosco — matches the green used across the site (nav panel,
drawer, boat-between). Gold quote is 3.4:1 on this green: AA for large
text (≥24px), so the quote floor is held at 24px below. */
background: var(--verde-bosco, #1E4A43);
text-align: center;
}
.italian-way__text {
margin: 0 auto;
max-width: 550px;
font-family: var(--font-heading);
/* 24px floor keeps the gold quote at WCAG AA "large text" (3:1) on the
Bosco ground. */
font-size: clamp(24px, 2.5vw, 32px);
font-weight: 400;
line-height: calc(1em + 8px);
letter-spacing: 0.03em;
color: var(--verde-gold, #B8924A);
/* Avoid widow words on the last line — browser hint to keep at
least two words per line. Falls back gracefully on older
browsers; the s in the markup are the belt-and-braces. */
text-wrap: pretty;
}
.produce-reveal {
position: relative;
z-index: 1;
height: 70vh;
min-height: 360px;
max-height: 640px;
overflow: hidden;
background: #1A1A1A;
}
.produce-reveal__img {
display: block;
width: 100%;
height: 130%;
object-fit: cover;
object-position: center 40%;
}
/* ---------------------------------------------------------------
Venue page components (Darlinghurst / Alexandria)
--------------------------------------------------------------- */
/* Photo pair — two images side by side */
.venue-photo-pair__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.venue-photo-pair__grid .image-slot {
aspect-ratio: 4/3;
}
/* Venue prose — left-aligned text block */
.venue-prose {
max-width: 680px;
}
.venue-prose .display-heading {
text-align: left;
}
.venue-prose p {
text-align: left;
}
/* Venue spaces — image + stacked list */
.venue-spaces {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.venue-spaces__img {
aspect-ratio: 3/4;
}
.venue-space {
padding: 28px 0;
border-top: 1px solid rgba(0,0,0,0.12);
}
.venue-space:first-child {
border-top: none;
padding-top: 0;
}
.venue-space__title {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 400;
letter-spacing: 0;
margin: 0 0 8px;
}
.venue-space__body {
margin: 0;
font-size: 15px;
line-height: calc(1em + 8px);
color: var(--muted);
}
/* Venue facts — bullet list */
.venue-facts {
list-style: none;
padding: 0;
margin: 0;
max-width: 480px;
}
.venue-facts li {
padding: 6px 0;
font-size: 14px;
line-height: calc(1em + 8px);
color: var(--muted);
}
.venue-facts li::before {
content: "\00B7\00A0";
}
/* Menu links row */
.venue-menu-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.venue-disclaimer {
margin-top: 24px;
font-size: 12px;
color: var(--muted-on-dark);
}
/* Photo gallery — edge-to-edge 3-col */
.venue-gallery {
overflow: hidden;
}
.venue-gallery__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.venue-gallery__grid .image-slot {
aspect-ratio: 1;
}
/* Booking widget */
.venue-booking {
background: var(--ink);
color: var(--paper);
}
.venue-booking .display-heading {
color: var(--paper);
}
.venue-booking__widget {
max-width: 640px;
margin: 40px auto 0;
padding: 40px;
background: var(--paper);
color: var(--ink);
}
.venue-booking__form {
display: flex;
gap: 16px;
align-items: end;
flex-wrap: wrap;
}
.venue-booking__field {
flex: 1;
min-width: 120px;
}
.venue-booking__field label {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 8px;
}
.venue-booking__field input,
.venue-booking__field select {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
font-family: var(--font-body);
font-size: 14px;
background: #fff;
}
.venue-booking__powered {
margin-top: 12px;
font-size: 11px;
color: var(--muted-on-dark);
text-align: center;
}
.venue-booking__phone {
margin-top: 16px;
font-size: 14px;
}
.venue-booking__phone a {
color: var(--paper);
}
/* Closing band */
.venue-closing-band {
position: relative;
min-height: 560px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.venue-closing-band .image-slot {
position: absolute;
inset: 0;
z-index: 0;
}
.venue-closing-band .image-slot .slot {
height: 100%;
}
.venue-closing-band__copy {
position: relative;
z-index: 1;
text-align: center;
color: var(--paper);
padding: 80px 24px;
}
.venue-closing-band__copy h2 {
font-family: var(--font-accent);
font-size: clamp(36px, 5vw, 64px);
font-weight: 400;
line-height: calc(1em + 8px);
margin: 0 0 20px;
}
.venue-closing-band__est {
margin-top: 24px;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.7;
}
/* Cross-link card to other venue */
.venue-crosslink__card {
display: grid;
grid-template-columns: auto 1fr;
gap: 32px;
align-items: center;
text-decoration: none;
color: inherit;
border: 1px solid rgba(0,0,0,0.1);
padding: 24px;
max-width: 720px;
margin-inline: auto;
}
.venue-crosslink__img {
width: 180px;
aspect-ratio: 4/3;
}
.venue-crosslink__kicker {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted-on-dark);
margin: 0 0 4px;
}
.venue-crosslink__title {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 400;
margin: 0;
}
/* Arrow link */
.venue-arrow-link {
display: inline-block;
margin-top: 20px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
color: inherit;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
}
/* ---------------------------------------------------------------
Venue page — responsive
--------------------------------------------------------------- */
@media (max-width: 809px) {
.venue-photo-pair__grid {
grid-template-columns: 1fr;
}
.venue-spaces {
grid-template-columns: 1fr;
gap: 40px;
}
.venue-booking__form {
flex-direction: column;
}
.venue-crosslink__card {
grid-template-columns: 1fr;
}
.venue-crosslink__img {
width: 100%;
}
.venue-closing-band {
min-height: 400px;
}
}
/* =================================================================
Darlinghurst venue page — dh-* section overrides
================================================================= */
/* Hero variant with large Verde logo */
.hero--verde-letters .hero-content {
justify-items: center;
text-align: center;
gap: 16px;
padding-bottom: 100px;
}
.hero--verde-letters .verde-logo--hero {
max-width: 720px;
filter: none;
}
.hero--verde-letters h1 {
font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
}
.hero-subtitle {
font-family: var(--font-body);
font-size: clamp(12px, 1.2vw, 18px);
font-weight: 300;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(239, 231, 216, 0.6);
margin: clamp(16px, 3vh, 32px) 0 0;
}
/* Alexandria hero — large VERDE display type */
.hero--alexandria {
min-height: 100vh;
min-height: 100dvh;
}
.hero--alexandria .hero-content {
justify-items: center;
text-align: center;
gap: 0;
padding-bottom: 100px;
}
.hero--alexandria .eyebrow {
font-size: clamp(11px, 1.2vw, 16px);
letter-spacing: 0.22em;
margin-bottom: clamp(16px, 3vh, 32px);
color: rgba(239, 231, 216, 0.7);
}
.hero .hero__display-name {
font-family: var(--font-heading);
font-size: clamp(64px, 20vw, 320px);
font-weight: 400;
line-height: calc(1em + 8px);
letter-spacing: 0.02em;
color: var(--verde-cream);
text-transform: uppercase;
margin: 0;
max-width: none;
}
.hero--alexandria .hero-subtitle {
margin-top: clamp(16px, 3vh, 32px);
}
/* =================================================================
Alexandria hero v2 — arch logo + heading + sub, per Figma 398:373
================================================================= */
/* Cancel the legacy .hero { padding-top: 100px } so the venue/about/
contact heroes sit at exactly 100vh, matching the Events hero. */
.hero--venue {
padding-top: 0;
}
/* Mirror .ev-hero__content (verde-events.css): same padding,
max-width and flex layout so every hero header matches Events. */
.hero--venue .hero-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
/* A height-scaled minimum gap between the arch badge and the copy
block. Flex `gap` never collapses, so the logo can never crowd
the heading when the auto margins on .hero--venue__copy give way
on shorter viewports. */
gap: clamp(40px, 6vh, 96px);
/* Locked hero spacing standard — desktop 200/80 (tablet & mobile
overrides below). Applied to every venue-pattern hero header. */
padding: 200px 80px;
text-align: center;
max-width: 1100px;
margin: 0 auto;
min-height: 100vh;
min-height: 100dvh;
box-sizing: border-box;
}
.hero--venue__badge {
width: clamp(150px, 17.5vw, 222px);
height: auto;
display: block;
filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.25));
}
.hero--venue__copy {
display: flex;
flex-direction: column;
align-items: center;
/* Match the Events heading-to-sub rhythm */
gap: clamp(20px, 3vw, 40px);
color: var(--verde-cream, #E7E0CB);
margin-top: auto;
margin-bottom: auto;
}
.hero--venue__eyebrow {
margin: 0;
font-family: var(--font-body, "Figtree", sans-serif);
/* Match the Events hero sub-text size (.ev-hero__display-sub) */
font-size: clamp(13px, 1.4vw, 20px);
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--verde-cream, #E7E0CB);
}
/* Compound selector to beat .hero h1 { max-width: 680px } from the
legacy hero rule — without it, "Southern Italian, since 2007"
wraps onto three lines on desktop instead of obeying the
. */
.hero .hero--venue__heading,
.hero--venue__heading {
margin: 0;
font-family: var(--font-heading, "Aboreto", serif);
font-size: clamp(32px, 5.5vw, 56px);
font-weight: 400;
line-height: calc(1em + 8px);
letter-spacing: 0.02em;
color: var(--verde-cream, #E7E0CB);
max-width: none;
text-wrap: balance;
}
.hero--venue__sub {
margin: 0;
font-family: var(--font-body, "Figtree", sans-serif);
/* Match the Events hero sub-text size (.ev-hero__display-sub) */
font-size: clamp(13px, 1.4vw, 20px);
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--verde-cream, #E7E0CB);
}
/* Locked hero spacing standard — tablet (769–1024px): 144/48 */
@media (min-width: 769px) and (max-width: 1024px) {
.hero--venue .hero-content {
padding: 144px 48px;
}
}
/* Locked hero spacing standard — mobile (≤768px): 96/24 */
@media (max-width: 768px) {
.hero--venue .hero-content {
padding: 96px 24px;
gap: clamp(40px, 7vh, 72px);
}
}
/* =================================================================
About hero — heritage blueprint, image-only with soft overlay
================================================================= */
.hero--about-blueprint {
min-height: 100vh;
min-height: 100dvh;
background: #1A1A1A;
overflow: hidden;
position: relative;
}
.hero--about-blueprint .hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
/* About + Darlinghurst heroes now share the unified .hero__overlay scrim;
their old lighter overlays (flat 0.4 / 0.3) failed AA over the brighter
areas of those photos. The .hero__overlay--soft / .hero--darlinghurst__overlay
classes are kept inert in the markup — .hero__overlay carries the scrim. */
.hero--darlinghurst {
background: #1A1A1A;
}
.hero--darlinghurst .hero__bg {
object-position: center 50%;
z-index: 0;
}
/* Two layered hero videos crossfade across the loop seam — the
second layer starts hidden and JS swaps which is on top each cycle. */
.hero--darlinghurst .hero__bg--b {
opacity: 0;
will-change: opacity;
}
.hero--darlinghurst .hero__bg--a {
will-change: opacity;
}
/* =================================================================
Alexandria — Marble Intro
================================================================= */
.alex-intro {
position: relative;
padding: clamp(80px, 10vw, 160px) 24px;
text-align: center;
overflow: hidden;
color: var(--verde-cream, #E7E0CB);
}
.alex-intro__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.alex-intro__bg img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.45) saturate(0.8);
}
.alex-intro__inner {
position: relative;
z-index: 1;
max-width: 680px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.alex-intro__seal {
width: 100px;
height: auto;
margin-bottom: clamp(24px, 3vw, 40px);
}
.alex-intro__heading {
margin: 0 0 clamp(20px, 3vw, 32px);
font-family: var(--font-heading);
font-size: clamp(24px, 3.5vw, 44px);
font-weight: 400;
line-height: calc(1em + 8px);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--verde-gold, #B8924A);
}
.alex-intro__body {
margin: 0 0 clamp(28px, 4vw, 48px);
font-family: var(--font-body);
font-size: clamp(14px, 1.2vw, 17px);
line-height: calc(1em + 8px);
color: rgba(239, 231, 216, 0.85);
max-width: 560px;
}
.alex-intro__cta {
display: inline-block;
padding: 14px 36px;
border: 1px solid rgba(239, 231, 216, 0.5);
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--verde-cream, #E7E0CB);
text-decoration: none;
transition: background 0.3s, color 0.3s;
}
.alex-intro__cta:hover {
background: var(--verde-cream, #E7E0CB);
color: var(--charcoal, #1A1A1A);
}
.alex-intro--panna {
background: var(--verde-cream, #E7E0CB);
color: var(--charcoal, #1A1A1A);
}
.alex-intro--panna .alex-intro__inner {
max-width: 862px;
}
.alex-intro__car {
width: 240px;
height: 240px;
margin-bottom: -20px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.alex-intro__car img {
width: 100%;
height: auto;
object-fit: contain;
}
.alex-intro--panna .alex-intro__heading {
font-size: var(--type-h2);
line-height: calc(1em + 8px);
letter-spacing: 0.05em;
color: var(--verde-gold);
}
.alex-intro--panna .alex-intro__body {
font-size: clamp(16px, 1.8vw, 24px);
line-height: calc(1em + 8px);
color: #1A1A1A;
max-width: 680px;
}
.alex-intro--panna .alex-intro__cta {
border-color: #1A1A1A;
color: #1A1A1A;
font-size: 13px;
letter-spacing: 0.18em;
padding: 16px 24px;
}
.alex-intro--panna .alex-intro__cta:hover {
background: #1A1A1A;
color: #E7E0CB;
}
/* =================================================================
Alexandria — Spaces
================================================================= */
.alex-spaces {
background: #2D241F;
color: var(--verde-cream, #E7E0CB);
padding: clamp(64px, 8vw, 120px) clamp(24px, 5vw, 80px);
}
.alex-spaces__inner {
max-width: 1100px;
margin: 0 auto;
}
.alex-spaces__header {
margin-bottom: clamp(40px, 5vw, 64px);
}
.alex-spaces__heading {
margin: 0 0 12px;
font-family: var(--font-heading);
font-size: clamp(22px, 3vw, 36px);
font-weight: 400;
line-height: calc(1em + 8px);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--verde-cream, #E7E0CB);
}
.alex-spaces__lead {
margin: 0;
font-family: var(--font-body);
font-size: clamp(13px, 1.1vw, 16px);
line-height: calc(1em + 8px);
color: rgba(239, 231, 216, 0.6);
}
.alex-spaces__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 4vw, 64px);
align-items: start;
}
.alex-spaces__photo .image-slot {
background: #1A1A1A;
border: 0;
}
.alex-spaces__list {
display: flex;
flex-direction: column;
gap: clamp(28px, 3vw, 40px);
}
.alex-space__name {
margin: 0 0 8px;
font-family: var(--font-heading);
font-size: clamp(14px, 1.4vw, 20px);
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--verde-cream, #E7E0CB);
}
.alex-space__desc {
margin: 0;
font-family: var(--font-body);
font-size: clamp(13px, 1vw, 15px);
line-height: calc(1em + 8px);
color: rgba(239, 231, 216, 0.6);
}
@media (max-width: 768px) {
.alex-spaces__grid {
grid-template-columns: 1fr;
}
}
/* =================================================================
Alexandria — Divider
================================================================= */
.alex-divider {
border: 0;
height: 1px;
background: var(--line, #E0E0E0);
margin: 0;
}
/* =================================================================
Alexandria — What's Cooking
================================================================= */
.alex-cooking {
background: var(--verde-cream, #E7E0CB);
padding: clamp(80px, 10vw, 140px) 24px;
text-align: center;
}
.alex-cooking__inner {
max-width: 680px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.alex-cooking__seal {
/* Matched to the other animated illustration marks across the site.
A canvas — initLobsterScroll paints the frame for the current
scroll position, so the lobster only moves while the page slides. */
width: clamp(220px, 28vw, 300px);
height: auto;
aspect-ratio: 1 / 1;
display: block;
margin-bottom: clamp(24px, 3vw, 40px);
}
.alex-cooking__heading {
margin: 0 0 clamp(20px, 3vw, 32px);
font-family: var(--font-heading);
font-size: clamp(24px, 3.5vw, 44px);
font-weight: 400;
line-height: calc(1em + 8px);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--verde-gold, #B8924A);
}
.alex-cooking__body {
margin: 0 0 clamp(28px, 4vw, 48px);
font-family: var(--font-body);
font-size: clamp(14px, 1.2vw, 17px);
line-height: calc(1em + 8px);
color: var(--charcoal, #2D241F);
max-width: 540px;
}
.alex-cooking__menus {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.alex-cooking__btn {
display: inline-block;
padding: 12px 28px;
border: 1px solid var(--charcoal, #2D241F);
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--charcoal, #2D241F);
text-decoration: none;
transition: background 0.3s, color 0.3s;
}
.alex-cooking__btn:hover {
background: var(--charcoal, #2D241F);
color: var(--verde-cream, #E7E0CB);
}
/* =================================================================
Alexandria — Dishes carousel
Continues the cream "What's Cooking" block. The carousel itself
reuses the .dh-cooking__* component shared with the Darlinghurst
page; this wrapper only supplies the cream field and the space
below it before the newsletter.
================================================================= */
.alex-gallery {
background: var(--verde-cream, #E7E0CB);
padding-bottom: clamp(72px, 10vw, 128px);
}
/* 2. Intro — cream, centred prose */
.dh-intro {
background: var(--verde-cream);
padding: clamp(60px, 8vw, 130px) clamp(24px, 6vw, 250px);
overflow: hidden;
}
.dh-intro__inner {
max-width: 940px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
/* Ram's head — a scroll-scrubbed illustration. The canvas is square;
initRamScroll paints the frame for the current scroll position. */
.dh-intro__ram {
width: clamp(220px, 28vw, 300px);
height: auto;
aspect-ratio: 1 / 1;
flex-shrink: 0;
display: block;
}
/* Intro section heading — shared treatment with .alex-intro__heading
and .about-story__heading so all three page-opening sections match. */
.dh-intro__eyebrow {
font-family: var(--font-heading);
font-size: var(--type-h2);
font-weight: 400;
letter-spacing: 0.05em;
line-height: calc(1em + 8px);
text-transform: uppercase;
color: var(--verde-gold);
margin: 0;
}
.dh-intro__body {
font-family: var(--font-body);
font-size: var(--type-body-lg);
line-height: var(--lh-body-lg);
color: var(--verde-charcoal);
margin: 0;
max-width: 680px;
}
.dh-intro__seal {
width: 80px;
height: 80px;
margin-top: 16px;
opacity: 0.7;
}
.dh-intro__cta {
display: inline-block;
margin-top: 8px;
padding: 16px 24px;
border: 1px solid var(--verde-charcoal, #1A1A1A);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--verde-charcoal, #1A1A1A);
text-decoration: none;
transition: background 0.3s, color 0.3s;
}
.dh-intro__cta:hover {
background: var(--verde-charcoal, #1A1A1A);
color: var(--verde-cream, #E7E0CB);
}
/* Heritage plate — the W. Hardy butcher-shop niche, centred just
above The Butcher Shop heading. Trimmed to the artwork bounds
(361 x 617). */
.dh-ledge__img {
display: block;
width: clamp(71px, 9vw, 113px);
height: auto;
margin: clamp(32px, 5vw, 64px) auto clamp(24px, 4vw, 48px);
}
/* ===============================================================
4. The Butcher Shop — full-bleed hero, a centred editorial
opening, then four spaces composed at varied scales. GSAP +
ScrollTrigger give one moment of motion per space.
"Editorial calm with one moment of motion per space."
Tokens scoped here. --font-body is the site-wide Figtree;
--font-display is the Aboreto stack, defined locally.
=============================================================== */
.butcher-shop {
--color-paper: #FAF7F2;
--color-gold: #B8924A;
--color-ink: #1A1A1A;
--font-display: "Aboreto", Georgia, "Times New Roman", serif;
background: var(--color-paper);
}
/* --- STEP 1: centred editorial opening ------------------------- */
.butcher-shop .container--centred {
max-width: 760px;
margin: 0 auto;
padding: clamp(72px, 9vw, 120px) clamp(24px, 5vw, 80px) clamp(56px, 7vw, 88px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Darlinghurst butcher page only — the heritage plate illustration
sits directly above the heading, so the opening runs tighter than
the Alexandria "Spaces" section, which shares this layout. */
.marble-band--brass + .container--centred {
padding-top: clamp(24px, 3vw, 40px);
}
.butcher-shop h2 {
font-family: var(--font-display);
font-weight: 400;
color: var(--color-gold);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: clamp(32px, 4.4vw, 48px);
line-height: calc(1em + 8px);
margin: 0 0 clamp(20px, 2.6vw, 32px);
}
/* `.intro` collides with two global `.intro` rules (the home-page
cream band). Reset everything they leak — background, padding,
positioning — and keep it centred for the editorial opening. */
.butcher-shop .container--centred .intro {
font-family: var(--font-body);
color: var(--color-ink);
font-size: clamp(16px, 1.4vw, 18px);
line-height: 1.65;
max-width: 600px;
margin: 0;
background: transparent;
text-align: center;
text-wrap: pretty;
padding: 0;
position: static;
z-index: auto;
}
/* 48px gold rule, drawn in beneath the intro */
.butcher-shop .container__rule {
display: block;
width: 48px;
height: 1px;
background: var(--color-gold);
margin: clamp(32px, 4vw, 48px) 0 0;
transform-origin: center;
}
/* --- STEP 2/3: four spaces composed at varied scales ----------- */
.butcher-shop .spaces {
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(24px, 5vw, 80px) clamp(72px, 9vw, 120px);
display: flex;
flex-direction: column;
gap: clamp(72px, 9vw, 132px);
}
/* Base row — 2fr image / 1fr copy */
.butcher-shop .space {
display: grid;
grid-template-columns: 2fr 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: center;
}
/* Reversed rows flip the tracks so the image still lands wide */
.butcher-shop .space--reverse {
grid-template-columns: 1fr 2fr;
}
.butcher-shop .space--reverse .space__media {
order: 2;
}
/* Composition variants — each space carries a distinct proportion
so the section reads as a composed editorial, not a repeat. */
/* Dining Room — extra-wide cinematic image */
.butcher-shop .space--wide {
grid-template-columns: 2.5fr 1fr;
}
.butcher-shop .space--wide .space__media {
aspect-ratio: 16 / 9;
}
/* Bar — portrait image, copy given more room */
.butcher-shop .space--portrait {
grid-template-columns: 1fr 1.15fr;
}
.butcher-shop .space--portrait .space__media {
aspect-ratio: 4 / 5;
}
/* Collection — smaller, quieter image */
.butcher-shop .space--small {
grid-template-columns: 1fr 1.35fr;
}
.butcher-shop .space--small .space__media {
aspect-ratio: 4 / 3;
}
/* Al Fresco — contained row, image left, 3/2 like the base spaces */
.butcher-shop .space__media {
margin: 0;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: 2px;
}
.butcher-shop .space__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform-origin: center;
}
/* Al Fresco placeholder — dark panel so it reads as a deliberate
"photo to come" slot, not empty space. */
.butcher-shop .space__media--placeholder {
background: #1A1A1A;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px;
}
.butcher-shop .space__media--placeholder span {
font-family: var(--font-display);
color: var(--color-gold);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 14px;
}
.butcher-shop .space__copy {
max-width: 460px;
}
/* Reversed rows: copy sits left of the image */
.butcher-shop .space--reverse .space__copy {
order: 1;
justify-self: end;
}
.butcher-shop h3 {
font-family: var(--font-display);
font-weight: 400;
color: var(--color-gold);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: clamp(24px, 2.6vw, 32px);
line-height: calc(1em + 6px);
margin: 0 0 clamp(14px, 1.6vw, 20px);
}
.butcher-shop .space__copy p {
font-family: var(--font-body);
color: var(--color-ink);
font-size: 16px;
line-height: 1.65;
margin: 0;
}
/* --- Animation initial states --------------------------------- *
Applied only when JS is available (html.js) AND the visitor has
not requested reduced motion. GSAP clears these as each space
scrolls into view. Without JS, nothing is hidden. */
@media (prefers-reduced-motion: no-preference) {
.js .butcher-shop .space__media img,
.js .butcher-shop .space__media--placeholder {
opacity: 0;
transform: scale(1.04);
}
.js .butcher-shop .container__rule {
transform: scaleX(0);
}
.js .butcher-shop .space__copy h3,
.js .butcher-shop .space__copy p {
opacity: 0;
transform: translateY(16px);
}
}
/* Mobile — every space collapses to one column, image above copy.
Composition variants flatten so the column count never varies. */
@media (max-width: 768px) {
.butcher-shop .space,
.butcher-shop .space--wide,
.butcher-shop .space--portrait,
.butcher-shop .space--small {
grid-template-columns: 1fr;
gap: clamp(24px, 6vw, 32px);
}
.butcher-shop .space--reverse .space__media {
order: 0;
}
.butcher-shop .space--reverse .space__copy {
order: 0;
justify-self: stretch;
}
.butcher-shop .space__copy {
max-width: none;
}
.butcher-shop .space--wide .space__media,
.butcher-shop .space--portrait .space__media,
.butcher-shop .space--small .space__media {
aspect-ratio: 3 / 2;
}
.butcher-shop .spaces {
gap: clamp(56px, 12vw, 80px);
}
}
/* Reduced motion — show everything in place, no transforms. */
@media (prefers-reduced-motion: reduce) {
.butcher-shop .space__media img,
.butcher-shop .space__media--placeholder,
.butcher-shop .container__rule,
.butcher-shop .space__copy h3,
.butcher-shop .space__copy p {
opacity: 1 !important;
transform: none !important;
}
}
/* 5. What's Cooking — Panna bg, centered intro + 3-photo carousel
Reference: Figma node 399:1193. */
.dh-cooking {
background: var(--verde-cream, #E7E0CB);
padding: clamp(72px, 10vw, 128px) 0;
display: flex;
flex-direction: column;
gap: clamp(40px, 6vw, 64px);
}
.dh-cooking__intro {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(32px, 5vw, 54px);
max-width: 750px;
padding: 0 clamp(24px, 5vw, 80px);
margin: 0 auto;
}
.dh-cooking__heading {
font-family: var(--font-heading, "Aboreto", serif);
font-size: clamp(28px, 4.2vw, 40px);
line-height: calc(1em + 8px);
letter-spacing: 0.02em;
color: #B8924A;
margin: 0;
text-transform: uppercase;
text-align: center;
}
.dh-cooking__mark {
/* Sized to match the ram in the intro section above. */
width: clamp(220px, 28vw, 300px);
height: auto;
display: block;
}
.dh-cooking__body {
font-family: var(--font-body, "Figtree", sans-serif);
font-size: clamp(14px, 1.2vw, 16px);
line-height: calc(1em + 8px);
color: var(--verde-ink, #1A1A1A);
margin: 0;
max-width: 694px;
}
.dh-cooking__menus {
display: flex;
gap: 16px;
/* Desktop: keep all three buttons on a single row. The row sizes
to its content and is allowed to run wider than the centred
prose column (it still sits inside the 750px intro box). */
flex-wrap: nowrap;
width: max-content;
justify-content: center;
margin: 0;
}
.dh-cooking__menu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 24px;
border: 1px solid #000000;
background: transparent;
font-family: var(--font-body, "Figtree", sans-serif);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
line-height: 1.2;
text-transform: uppercase;
text-align: center;
text-decoration: none;
color: var(--verde-ink, #1A1A1A);
transition: background-color 200ms ease, color 200ms ease;
}
.dh-cooking__menu-btn:hover,
.dh-cooking__menu-btn:focus-visible {
background: var(--verde-ink, #1A1A1A);
color: var(--verde-cream, #E7E0CB);
outline: none;
}
/* ===============================================================
What's Cooking — drag carousel. A centre-mode horizontal gallery
shared by the Darlinghurst and Alexandria pages. The active image
sits full-scale at the viewport centre; neighbours scale and fade
with distance from it. Pointer drag, touch swipe, trackpad deltaX
and arrow keys all drive it; momentum + a CustomEase snap settle
it on release. Slides are built by initCookingCarousel() in
verde-script.js. prefers-reduced-motion falls back to a native
scroll-snap strip (the .cooking-carousel--native modifier).
=============================================================== */
.cooking-carousel {
--cc-img-h: 400px;
--cc-gap: 6px;
--cc-gutter: clamp(24px, 5vw, 80px);
/* Matches the cream "What's Cooking" section it sits inside. */
background: var(--verde-cream, #E7E0CB);
padding: clamp(40px, 6vw, 72px) 0;
overflow: hidden;
}
.cooking-carousel:focus-visible {
outline: 2px solid var(--verde-forest, #1E4A43);
outline-offset: -5px;
}
/* Edge-to-edge viewport: neighbouring slides bleed off both window
edges. The track is translated by JS; there is no internal L/R
padding — the meta row below carries the page gutter. */
.cooking-carousel__viewport {
overflow: hidden;
cursor: grab;
-webkit-user-select: none;
user-select: none;
touch-action: pan-y;
}
.cooking-carousel.is-dragging .cooking-carousel__viewport { cursor: grabbing; }
.cooking-carousel__track {
display: flex;
gap: var(--cc-gap);
width: max-content;
align-items: center;
will-change: transform;
}
/* Slide width is set inline by JS from each image's aspect ratio so
natural proportions are preserved (mixed portrait + landscape).
scale + opacity are driven per-frame by JS. */
.cooking-carousel__slide {
flex: 0 0 auto;
height: var(--cc-img-h);
margin: 0;
position: relative;
overflow: hidden;
background: #1A1A1A;
border-radius: 2px;
will-change: transform, opacity;
transform-origin: center center;
}
.cooking-carousel__slide picture {
display: block;
width: 100%;
height: 100%;
}
.cooking-carousel__slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
pointer-events: none;
-webkit-user-drag: none;
}
/* Loading stamp — Verde seal centred on the black slide while the photo
preloads, then crossfading out as the image arrives (.is-loaded). The
stamp is visible by default (the carousel re-runs per frame, which
would reset an entrance animation), so the graceful motion is the
fade-out under the loading image. */
.cooking-carousel__loader {
position: absolute;
inset: 0;
background:
url("assets/verde-stamp.svg") no-repeat center / clamp(72px, 26%, 150px);
opacity: 1;
transition: opacity 550ms ease;
pointer-events: none;
}
.cooking-carousel__slide.is-loaded .cooking-carousel__loader {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.cooking-carousel__loader { transition: none; }
}
/* Clickable arrows on top, hint, counter — all stacked and
centred under the carousel. */
.cooking-carousel__meta {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
padding: clamp(20px, 3vw, 32px) var(--cc-gutter) 0;
}
.cooking-carousel__nav {
display: inline-flex;
align-items: center;
gap: clamp(14px, 2.5vw, 28px);
}
.cooking-carousel__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(26, 26, 26, 0.25);
border-radius: 999px;
background: transparent;
color: var(--verde-ink, #1A1A1A);
cursor: pointer;
transition: background 200ms ease, border-color 200ms ease,
color 200ms ease, transform 160ms ease;
}
.cooking-carousel__arrow:hover,
.cooking-carousel__arrow:focus-visible {
background: var(--verde-ink, #1A1A1A);
border-color: var(--verde-ink, #1A1A1A);
color: var(--verde-cream, #E7E0CB);
outline: none;
}
.cooking-carousel__arrow:active {
transform: scale(0.94);
}
.cooking-carousel__counter,
.cooking-carousel__hint {
margin: 0;
font-family: var(--font-body, "Figtree", sans-serif);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--verde-ink, #1A1A1A);
opacity: 0.5;
}
.cooking-carousel__counter { font-variant-numeric: tabular-nums; }
/* prefers-reduced-motion / no-JS fallback — native scroll-snap strip,
no scale or opacity falloff. */
.cooking-carousel--native .cooking-carousel__viewport {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
cursor: default;
padding: 0 var(--cc-gutter);
}
.cooking-carousel--native .cooking-carousel__viewport::-webkit-scrollbar { display: none; }
.cooking-carousel--native .cooking-carousel__slide {
scroll-snap-align: center;
transform: none !important;
opacity: 1 !important;
}
@media (max-width: 1024px) {
.cooking-carousel { --cc-img-h: 320px; }
}
@media (max-width: 640px) {
.cooking-carousel { --cc-img-h: 240px; }
}
@media (max-width: 768px) {
.dh-cooking__menus {
flex-direction: column;
width: 100%;
max-width: 320px;
}
.dh-cooking__menu-btn {
width: 100%;
}
}
/* 6. Private for You — full-bleed photo with split serif heading.
Reference: Figma node 398:572. */
.dh-private-feature {
position: relative;
min-height: clamp(560px, 78vh, 820px);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #FFFFFF;
isolation: isolate;
}
.dh-private-feature__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: -2;
}
.dh-private-feature__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
z-index: -1;
}
.dh-private-feature__inner {
position: relative;
width: 100%;
max-width: 1400px;
padding: clamp(72px, 12vw, 200px) clamp(24px, 5vw, 64px);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(48px, 8vw, 120px);
text-align: center;
}
.dh-private-feature__heading {
margin: 0;
font-family: var(--font-heading, "Aboreto", serif);
font-size: clamp(40px, 8vw, 72px);
font-weight: 400;
line-height: 1.05;
letter-spacing: 0.02em;
color: #E6DFCD;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
text-transform: uppercase;
gap: clamp(24px, 6vw, 96px);
}
.dh-private-feature__heading-left {
text-align: left;
}
.dh-private-feature__heading-right {
text-align: right;
text-transform: capitalize;
}
.dh-private-feature__copy {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(20px, 3vw, 24px);
max-width: 700px;
}
.dh-private-feature__body {
margin: 0;
font-family: var(--font-body, "Figtree", sans-serif);
font-size: clamp(16px, 1.8vw, 24px);
line-height: calc(1em + 8px);
color: #E6DFCD;
text-align: center;
}
.dh-private-feature__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 24px;
border: 1px solid #E6DFCD;
background: transparent;
font-family: var(--font-body, "Figtree", sans-serif);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
line-height: 1.2;
text-transform: uppercase;
text-align: center;
text-decoration: none;
color: #E6DFCD;
transition: background-color 200ms ease, color 200ms ease;
}
.dh-private-feature__btn:hover,
.dh-private-feature__btn:focus-visible {
background: #E6DFCD;
color: var(--verde-ink, #1A1A1A);
outline: none;
}
@media (max-width: 768px) {
.dh-private-feature__heading {
flex-direction: column;
gap: 8px;
align-items: center;
}
.dh-private-feature__heading-left,
.dh-private-feature__heading-right {
text-align: center;
width: auto;
}
}
/* 6b. Visit Verde — sister-venue cross-link card.
Two themed panels that point at each other across the venue pages:
charcoal on Darlinghurst, forest green on Alexandria. Both use
Oro Antico gold for the label and the thumbnail frame. */
.visit-cross {
padding: clamp(56px, 8vw, 80px) clamp(24px, 5vw, 48px);
display: flex;
justify-content: center;
}
.visit-cross--dark { background: var(--verde-ink); }
.visit-cross--green { background: var(--verde-forest); }
.visit-cross__card {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-decoration: none;
color: var(--verde-gold);
width: 270px;
max-width: 100%;
transition: opacity 200ms ease, transform 320ms cubic-bezier(0.23, 1, 0.32, 1);
}
.visit-cross__card:hover,
.visit-cross__card:focus-visible {
opacity: 0.92;
transform: translateY(-2px);
}
.visit-cross__card:focus-visible {
outline: none;
}
/* Keyboard focus stays visible — ring on the thumbnail frame. */
.visit-cross__card:focus-visible .visit-cross__media {
outline: 2px solid var(--verde-gold);
outline-offset: 3px;
}
.visit-cross__media {
width: 100%;
height: 180px;
border: 1px solid var(--verde-gold);
overflow: hidden;
background: #1A1A1A;
}
.visit-cross__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.visit-cross__label {
margin: 0;
font-family: var(--font-body, "Figtree", sans-serif);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
line-height: 1.4;
text-transform: uppercase;
text-align: center;
color: var(--verde-gold);
}
/* 7. Book a Table — cream */
.dh-book {
background: var(--verde-cream);
padding: clamp(48px, 6vw, 80px) 24px;
}
.dh-book__inner {
max-width: 520px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.dh-book__wine-img {
width: 280px;
height: 280px;
border-radius: 0;
}
.dh-book__heading {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2rem);
color: var(--verde-charcoal);
margin: 0;
}
.dh-book__sub {
font-family: var(--font-body);
font-size: 16px;
color: #1A1A1A;
margin: 0;
}
.dh-book__phone {
font-family: var(--font-body);
font-size: 16px;
color: #1A1A1A;
margin: 0;
}
.dh-book__phone a {
color: inherit;
}
/* --- Darlinghurst mobile overrides --- */
@media (max-width: 768px) {
.dh-intro__img {
width: 200px;
height: 150px;
}
.dh-cooking__top {
grid-template-columns: 1fr;
gap: 32px;
}
.dh-cooking__menus {
flex-direction: column;
}
.dh-cooking__menu-btn {
min-width: unset;
width: 100%;
}
}
/* Newsletter section — full-bleed zucchini background with card overlay.
Sits above the footer so it "reveals" the footer as it scrolls away. */
.newsletter-section {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
min-height: 520px;
padding: 80px 24px;
overflow: hidden;
background: #1A1A1A;
}
.newsletter-section__bg {
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
display: block;
object-fit: cover;
object-position: center 40%;
will-change: transform;
}
/* Newsletter card overlay */
.newsletter-card {
position: relative;
z-index: 2;
max-width: 520px;
width: 100%;
padding: 56px 40px;
background: #fff;
text-align: center;
}
.newsletter-card__heading {
margin: 0;
font-family: var(--font-heading);
font-size: clamp(32px, 5vw, 44px);
font-weight: 400;
line-height: calc(1em + 8px);
text-transform: uppercase;
color: var(--ink);
}
.newsletter-card__body {
margin: 16px 0 0;
font-size: 15px;
line-height: calc(1em + 8px);
color: var(--verde-ink);
}
.newsletter-card__body em {
font-style: italic;
color: var(--ink);
}
.newsletter-card__form {
display: flex;
gap: 0;
margin-top: 28px;
max-width: 400px;
margin-inline: auto;
}
.newsletter-card__input {
flex: 1;
min-height: 48px;
padding: 0 16px;
border: 1px solid var(--line);
border-right: 0;
border-radius: 0;
background: transparent;
font-family: var(--font-body);
font-size: 14px;
color: var(--ink);
}
.newsletter-card__input::placeholder {
color: var(--muted);
opacity: 0.7;
}
.newsletter-card__input:focus {
outline: 0;
border-color: var(--ink);
}
.newsletter-card__input:focus-visible {
outline: 2px solid var(--verde-gold);
outline-offset: 2px;
}
.newsletter-card__submit {
border-radius: 0;
min-height: 48px;
}
@media (max-width: 600px) {
.newsletter-section {
min-height: 440px;
padding: 60px 16px;
}
.newsletter-card {
padding: 40px 24px;
}
.newsletter-card__form {
flex-direction: column;
gap: 12px;
}
.newsletter-card__input {
border-right: 1px solid var(--line);
}
}
.home-story {
position: relative;
z-index: 1;
padding: 120px 0;
background: var(--home-gold);
color: #4b3025;
overflow: hidden;
}
/* ---- Story copy — centred stack ---- */
.story-copy {
text-align: center;
max-width: 520px;
margin: 0 auto;
padding-inline: 24px;
}
.story-copy__heading {
margin: 0;
font-family: var(--font-heading);
font-size: clamp(40px, 5vw, 56px);
font-weight: 400;
line-height: calc(1em + 8px);
text-transform: uppercase;
}
.story-heading__accent {
display: block;
font-family: var(--font-accent);
font-weight: 400;
text-transform: none;
font-size: clamp(32px, 5vw, 48px);
line-height: calc(1em + 8px);
margin-top: 0.15em;
letter-spacing: 0.01em;
}
.story-copy__body {
max-width: 520px;
margin: 32px auto 0;
color: #4b3025;
font-size: 16px;
line-height: calc(1em + 8px);
}
.story-copy__cta {
display: inline-block;
margin-top: 24px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
text-decoration: underline;
text-underline-offset: 4px;
color: #4b3025;
transition: opacity 200ms ease;
}
.story-copy__cta:hover {
opacity: 0.65;
}
/* ---- Story carousel — spotlight center card ---- */
.story-carousel {
position: relative;
margin-top: 96px;
height: 560px;
overflow: hidden;
}
.story-carousel__track {
display: flex;
gap: 8px;
align-items: center;
height: 100%;
transition: transform 400ms var(--ease-out);
cursor: grab;
touch-action: pan-y;
}
.story-carousel__track.is-dragging {
cursor: grabbing;
transition: none;
user-select: none;
}
.story-card {
flex: 0 0 calc((100vw - 16px) / 3);
min-width: 0;
transition: height 500ms cubic-bezier(0.23, 1, 0.32, 1),
opacity 500ms cubic-bezier(0.23, 1, 0.32, 1);
}
.story-card__img {
width: 100%;
height: 440px;
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: rgba(75, 48, 37, 0.5);
font-size: 14px;
letter-spacing: 1px;
transition: height 500ms cubic-bezier(0.23, 1, 0.32, 1);
}
.story-card.is-active .story-card__img {
height: 560px;
}
.story-card:not(.is-active) {
opacity: 0.6;
}
.story-card__img.chef-photo {
background:
linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),
radial-gradient(circle at 50% 40%, rgba(245, 238, 216, 0.6), transparent 40%),
linear-gradient(160deg, #a89070, #4a3528);
}
.story-card__img.venue-photo {
background:
linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),
radial-gradient(circle at 50% 46%, rgba(245, 238, 216, 0.75), transparent 35%),
linear-gradient(140deg, #ede2cc, #4a3528);
}
.story-card__img.dining-photo {
background:
linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),
repeating-linear-gradient(90deg, #735532 0 22px, #caa76d 22px 28px, #2e261f 28px 44px);
}
.story-card__img.bar-photo {
background:
linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),
radial-gradient(circle at 40% 55%, rgba(200, 170, 120, 0.6), transparent 45%),
linear-gradient(180deg, #3a2a1e, #6b5540);
}
.story-card__img.garden-photo {
background:
linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.15)),
radial-gradient(circle at 55% 45%, rgba(120, 140, 80, 0.5), transparent 50%),
linear-gradient(150deg, #5a6b3a, #3a4a28);
}
.story-card__placeholder {
opacity: 0.6;
}
.story-card__caption {
margin: 12px 0 0;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #4b3025;
}
/* Tablet */
@media (max-width: 920px) {
.story-carousel {
height: 480px;
}
.story-card {
flex: 0 0 calc((100vw - 16px) / 2.2);
}
.story-card__img {
height: 380px;
}
.story-card.is-active .story-card__img {
height: 480px;
}
}
/* Mobile */
@media (max-width: 600px) {
.home-story {
padding: 80px 0;
}
.story-carousel {
margin-top: 64px;
height: 440px;
}
.story-card {
flex: 0 0 calc(100vw - 80px);
}
.story-card__img {
height: 360px;
}
.story-card.is-active .story-card__img {
height: 440px;
}
}
/* ---- Newsletter band (grey panel, sitewide) ---- */
.newsletter-band {
background: var(--soft);
padding: 100px 24px;
text-align: center;
}
.newsletter-band__inner {
max-width: 520px;
margin: 0 auto;
}
.newsletter-band__heading {
margin: 0;
font-family: var(--font-heading);
font-size: clamp(36px, 5vw, 48px);
font-weight: 400;
line-height: calc(1em + 8px);
text-transform: uppercase;
color: var(--ink);
}
.newsletter-band__body {
margin: 20px 0 0;
font-size: 16px;
line-height: calc(1em + 8px);
color: var(--muted);
}
.newsletter-band__body em {
font-style: italic;
color: var(--ink);
}
.newsletter-band__form {
display: flex;
gap: 0;
margin-top: 32px;
max-width: 420px;
margin-inline: auto;
}
.newsletter-band__input {
flex: 1;
min-height: 48px;
padding: 0 16px;
border: 1px solid var(--line);
border-right: 0;
border-radius: var(--radius) 0 0 var(--radius);
background: transparent;
font-family: var(--font-body);
font-size: 14px;
color: var(--ink);
}
.newsletter-band__input::placeholder {
color: var(--muted);
opacity: 0.7;
}
.newsletter-band__input:focus {
outline: 0;
border-color: var(--ink);
}
.newsletter-band__input:focus-visible {
outline: 2px solid var(--verde-gold);
outline-offset: 2px;
}
.newsletter-band__submit {
border-radius: 0 var(--radius) var(--radius) 0;
min-height: 48px;
}
@media (max-width: 600px) {
.newsletter-band {
padding: 72px 24px;
}
.newsletter-band__form {
flex-direction: column;
gap: 12px;
}
.newsletter-band__input {
border-right: 1px solid var(--line);
border-radius: var(--radius);
}
.newsletter-band__submit {
border-radius: var(--radius);
}
}
.home-footer {
--home-gold: var(--verde-gold);
background: var(--verde-ink);
color: rgba(246, 240, 232, 0.74);
padding: 0 0 70px;
}
.footer-gold-strip {
height: 96px;
background: var(--home-gold);
}
.home-footer-inner {
width: calc(100% - 100px);
max-width: none;
margin-inline: auto;
padding: 118px 0 0;
}
.footer-logo {
color: var(--home-gold);
text-transform: uppercase;
}
.footer-logo h2 {
margin: 0;
font-family: var(--font-heading);
font-size: 52px;
font-weight: 400;
line-height: calc(1em + 8px);
}
.footer-logo p {
margin: 14px 0 0;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.46em;
}
.footer-logo span {
display: block;
max-width: 280px;
margin-top: 28px;
color: rgba(246, 240, 232, 0.62);
font-size: 16px;
line-height: calc(1em + 8px);
text-transform: none;
}
.footer-social {
margin: 58px auto 48px;
padding-bottom: 28px;
max-width: 940px;
border-bottom: 1px solid rgba(246, 240, 232, 0.18);
display: grid;
justify-items: center;
gap: 18px;
color: #f6f0e8;
text-transform: uppercase;
}
.home-footer-grid {
display: grid;
grid-template-columns: 1.5fr 1.35fr 0.9fr 0.9fr 0.75fr;
gap: clamp(28px, 3.6vw, 64px);
width: 100%;
max-width: none;
margin-inline: auto;
}
.footer-heading {
margin: 0 0 20px;
color: #f6f0e8;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
}
.home-footer p {
font-size: 16px;
line-height: calc(1em + 8px);
}
.home-footer a {
color: inherit;
text-decoration: underline;
text-decoration-color: rgba(246, 240, 232, 0.28);
text-underline-offset: 3px;
}
.footer-venue-button {
width: 100%;
min-height: 46px;
margin-bottom: 14px;
display: grid;
place-items: center;
border: 1px solid rgba(246, 240, 232, 0.22);
color: #f6f0e8;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none !important;
}
.home-footer-bottom {
width: 100%;
max-width: none;
margin: 92px auto 0;
padding-top: 28px;
display: flex;
justify-content: space-between;
gap: 24px;
border-top: 1px solid rgba(246, 240, 232, 0.16);
color: rgba(246, 240, 232, 0.38);
font-size: 12px;
line-height: calc(1em + 8px);
}
@media (max-width: 1199px) {
.home-footer-grid {
grid-template-columns: 1.2fr 1fr 0.8fr;
}
}
@media (max-width: 809px) {
.home-hero {
min-height: 430px;
}
.home-hero-copy h1 {
font-size: clamp(68px, 23vw, 96px);
}
.home-intro {
min-height: 520px;
padding: 76px 18px;
}
.home-intro h2 {
font-size: 36px;
}
.marble-reveal {
min-height: 220px;
}
.verde-seal {
width: 112px;
height: 112px;
transform: translateY(44px);
}
.home-venues {
padding-left: 24px;
padding-right: 24px;
}
.venue-pair,
.home-footer-grid {
grid-template-columns: 1fr;
}
/* Mobile: image above text for Darlinghurst */
.venue-blurb-left { order: 2; }
.venue-circle-right { order: 1; }
.venue-circle-left { order: 3; }
.venue-blurb-right { order: 4; justify-self: start; }
.venue-circle {
width: min(100%, 280px);
}
.venues-marquee {
margin-left: -24px;
margin-right: -24px;
}
.venues-marquee__text {
font-size: 56px;
white-space: normal;
}
.venue-blurb h3 {
font-size: 32px;
}
.produce-reveal {
height: 50vh;
min-height: 260px;
}
.home-footer-inner {
width: calc(100% - 28px);
padding: 82px 0 0;
}
.footer-logo h2 {
font-size: 44px;
}
.home-footer-bottom {
display: grid;
}
}
/* =================================================================
Newsletter panel — full-bleed produce photo + white signup card.
Last section inside on every page; because keeps its
solid background and z-index, the sticky footer still unveils from
underneath this panel. Reference: Figma 430:39.
================================================================= */
.newsletter {
position: relative;
z-index: 1; /* keep above the pinned boat-between */
display: flex;
align-items: center;
justify-content: center;
padding: clamp(72px, 12vw, 139px) clamp(24px, 6vw, 80px);
overflow: hidden;
background: #1A1A1A;
}
/* Velvet-curtain variant (What's On) — the curtain backdrop from the
section above continues here so the cream V-List card floats on the
velvet rather than a solid panel. No photo, no tint. */
.newsletter--curtain {
background-color: #15100a;
background-image: url("/assets/velvet-curtain-1536.webp");
background-repeat: no-repeat;
background-position: top center;
background-size: 100% 120%;
}
.newsletter--curtain::after { display: none; }
.newsletter__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
/* Soft 20% black tint over the background photo so it doesn't read
too harsh behind the signup card. */
.newsletter::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: rgba(0, 0, 0, 0.2);
pointer-events: none;
}
.newsletter__card {
position: relative;
z-index: 1;
width: 100%;
max-width: 500px;
/* Warm paper rather than pure white — reads as hospitality, not SaaS. */
background: #F7F2E6;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(20px, 2.6vw, 24px);
padding: clamp(44px, 6vw, 64px) clamp(28px, 5vw, 35px);
}
.newsletter__seal {
width: clamp(78px, 9vw, 97px);
height: auto;
display: block;
}
.newsletter__heading {
margin: 0;
font-family: var(--font-heading, "Aboreto", serif);
font-weight: 400;
font-size: clamp(26px, 3.2vw, 32px);
line-height: calc(1em + 8px);
letter-spacing: 0.03em;
text-transform: uppercase;
color: #B8924A;
}
.newsletter__body {
margin: 0;
max-width: 380px;
font-family: var(--font-body, "Figtree", sans-serif);
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.6;
color: #1A1A1A;
text-wrap: pretty;
}
.newsletter__form {
display: flex;
gap: 10px;
width: 100%;
max-width: 430px;
}
.newsletter__input {
flex: 1 1 auto;
min-width: 0;
background: #EAE3D2;
border: 0;
padding: 15px;
font-family: var(--font-body, "Figtree", sans-serif);
font-size: 16px;
color: #1A1A1A;
}
.newsletter__input::placeholder {
color: rgba(0, 0, 0, 0.3);
}
.newsletter__input:focus-visible {
outline: 2px solid #B8924A;
outline-offset: 2px;
}
.newsletter__submit {
flex: 0 0 auto;
background: #1A1A1A;
color: #fff;
border: 0;
padding: 16px 24px;
font-family: var(--font-body, "Figtree", sans-serif);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 200ms ease;
}
.newsletter__submit:hover,
.newsletter__submit:focus-visible {
background: #1A1A1A;
outline: none;
}
@media (max-width: 540px) {
.newsletter__form {
flex-direction: column;
}
}
/* =================================================================
Site footer (v4) — centred hero + 4-column content grid.
Top: seal · VERDE wordmark · tagline.
Grid: Menu | Darlinghurst | Alexandria | Follow.
Bottom: legal bar.
================================================================= */
/* Footer appears "underneath" — the content panel slides
away to unveil it as the user scrolls down. */
.site-footer {
position: sticky;
bottom: calc(-1 * max(0px, var(--footer-h, 1165px) - 100vh));
z-index: 1;
/* Clip the vine pattern to the footer so it is cropped cleanly at
the top edge. Clips own content only — the sticky reveal is
unaffected. */
overflow: hidden;
background: var(--verde-ink);
color: rgba(235, 220, 196, 0.74); /* Panna at 74% */
/* Always at least viewport-tall, content centred, so the footer
reveals flush as the last panel scrolls up. A shorter footer left
a dark gap above it (it sat at the viewport bottom with empty
space showing through). */
box-sizing: border-box;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
padding-block: clamp(64px, 7vw, 104px);
padding-inline: clamp(24px, 6vw, 96px);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
}
.site-footer__inner {
/* Hold the footer content together on wide screens rather than
letting the four columns drift to the window edges. */
max-width: 1180px;
margin-inline: auto;
display: grid;
gap: clamp(48px, 6vw, 80px);
}
/* ---- Hero: wordmark + tagline with vine background (centred) ---- */
.site-footer__hero {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
text-align: center;
}
.site-footer__vine {
position: absolute;
inset: -52% -45%;
/* Shifted up so the squiggle runs off the top edge of the footer
and is cropped there — it reads as flowing in from above. */
transform: translateY(-25%);
background: url("assets/twizzl.svg") no-repeat center / contain;
opacity: 0.22;
pointer-events: none;
/* Fade the lower half of the squiggle out so it frames the top of
the logo and dissolves toward the wordmark. */
-webkit-mask-image: linear-gradient(to bottom, #000000 0%, #000000 42%, transparent 75%);
mask-image: linear-gradient(to bottom, #000000 0%, #000000 42%, transparent 75%);
}
.verde-logo--footer {
position: relative;
display: block;
width: min(46vw, 260px);
height: auto;
/* Soft black shadow for depth over the vine pattern. Safe here —
this is an ![]()
, not a mask-image element. */
filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.6));
}
.site-footer__tagline {
position: relative;
margin: 0;
max-width: 42ch;
color: rgba(235, 220, 196, 0.62);
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
line-height: calc(1em + 8px);
}
/* ---- Content grid: 3 columns ---- */
/*
Grid areas on desktop:
venues venues follow
darlo alex follow
*/
.site-footer__grid {
display: grid;
grid-template-columns: minmax(130px, 0.85fr) 1fr 1fr minmax(84px, 0.5fr);
grid-template-rows: auto auto;
gap: 16px clamp(28px, 3.4vw, 56px);
align-items: start;
}
/* Column 1 — Explore (site navigation) */
.site-footer__nav {
grid-column: 1;
grid-row: 1 / 3;
}
/* "VENUES" heading spans the two venue columns */
.site-footer__venues-heading {
grid-column: 2 / 4;
grid-row: 1;
margin: 0;
font-family: var(--font-body);
/* A touch smaller than the links below, so the column labels read
as headers, not clickable items. */
font-size: 10px;
font-weight: 500;
letter-spacing: 4px;
line-height: calc(1em + 8px);
text-transform: uppercase;
color: rgba(235, 220, 196, 0.74);
}
.site-footer__venue--darlinghurst {
grid-column: 2;
grid-row: 2;
}
.site-footer__venue--alexandria {
grid-column: 3;
grid-row: 2;
}
.site-footer__follow {
grid-column: 4;
grid-row: 1 / 3;
}
/* Column headings (EXPLORE, FOLLOW) — a touch smaller than the links
below them so the labels read as headers, not clickable items. */
.site-footer__col-heading {
margin: 0 0 16px;
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 4px;
line-height: calc(1em + 8px);
text-transform: uppercase;
color: rgba(235, 220, 196, 0.74);
}
/* Sitemap — vertical link list */
.site-footer__sitemap {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
text-align: left;
}
.site-footer__sitemap a {
display: inline-flex;
align-items: flex-start;
color: rgba(235, 220, 196, 0.74);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 4px;
line-height: calc(1em + 8px);
text-transform: uppercase;
text-decoration: none;
transition: color 200ms ease;
}
.site-footer__sitemap a:hover,
.site-footer__sitemap a:focus-visible {
color: var(--verde-cream);
}
/* Venue blocks */
.site-footer__venue {
display: grid;
gap: 12px;
width: 100%;
align-content: start;
justify-items: start;
text-align: left;
}
.site-footer__venue-heading {
margin: 0;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 4px;
line-height: calc(1em + 8px);
text-transform: uppercase;
}
.site-footer__venue-heading a {
display: inline-flex;
align-items: center;
gap: 8px;
padding-block: 0;
color: var(--verde-cream);
text-decoration: underline;
text-decoration-color: rgba(235, 220, 196, 0.32);
text-decoration-thickness: 1px;
text-underline-offset: 6px;
transition: opacity 200ms ease;
}
.site-footer__venue-meta {
display: grid;
gap: 8px;
margin: 0;
font-style: normal;
color: rgba(235, 220, 196, 0.74);
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
line-height: calc(1em + 8px);
}
.site-footer__venue-meta a {
color: inherit;
text-decoration: none;
transition: opacity 200ms ease;
}
.site-footer__venue-meta a:hover,
.site-footer__venue-meta a:focus-visible {
text-decoration: underline;
text-decoration-color: rgba(235, 220, 196, 0.6);
text-underline-offset: 4px;
}
/* Inline hours (replaces accordion) */
.site-footer__hours-inline {
margin: 0;
color: rgba(235, 220, 196, 0.62);
font-family: var(--font-body);
font-size: 13px;
font-weight: 400;
line-height: calc(1em + 8px);
padding-top: 4px;
border-top: 1px solid rgba(235, 220, 196, 0.16);
}
/* Social icons (Follow column) */
.site-footer__social {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
gap: 20px;
}
.site-footer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
color: rgba(235, 220, 196, 0.74);
text-decoration: none;
transition: color 200ms ease;
}
.site-footer__social a:hover,
.site-footer__social a:focus-visible {
color: var(--verde-cream);
}
.site-footer__social svg {
display: block;
width: 24px;
height: 24px;
}
/* ---- Legal row — split with hairline above ---- */
.site-footer__base {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
padding-top: clamp(24px, 3vw, 32px);
border-top: 1px solid rgba(235, 220, 196, 0.16);
color: rgba(235, 220, 196, 0.50);
font-family: var(--font-body);
font-size: 12px;
font-weight: 400;
line-height: calc(1em + 8px);
}
.site-footer__copyright,
.site-footer__legal {
margin: 0;
}
.site-footer__legal {
text-align: right;
}
.site-footer__legal a {
color: inherit;
text-decoration: underline;
text-decoration-color: rgba(235, 220, 196, 0.32);
text-decoration-thickness: 1px;
text-underline-offset: 4px;
transition: color 200ms ease;
}
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
color: var(--verde-cream);
}
/* ---- Tablet (≤ 1024px) — tighter 3-column grid ---- */
@media (max-width: 1024px) {
.site-footer__grid {
grid-template-columns: minmax(108px, 0.8fr) 1fr 1fr minmax(64px, 0.5fr);
gap: 16px clamp(16px, 2.4vw, 30px);
}
}
/* ---- Mobile (≤ 768px) — single column, centred ---- */
@media (max-width: 600px) {
.venue-sticky-cta__name { display: none; }
.venue-sticky-cta__inner { justify-content: center; }
.venue-sticky-cta .button { min-height: 38px; font-size: 11px; }
}
@media (max-width: 768px) {
.site-footer {
padding-block: clamp(48px, 8vw, 64px) calc(clamp(48px, 8vw, 64px) + 72px);
padding-inline: 24px;
}
.site-footer__inner {
gap: 24px;
}
.site-footer__hero {
display: none;
}
.site-footer__grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 16px;
text-align: center;
justify-items: center;
}
.site-footer__nav,
.site-footer__venue--darlinghurst,
.site-footer__venue--alexandria,
.site-footer__follow {
grid-column: 1;
grid-row: auto;
}
.site-footer__sitemap {
align-items: center;
text-align: center;
}
.site-footer__venues-heading {
display: none;
}
.site-footer__col-heading {
margin-bottom: 12px;
}
.site-footer__venue {
max-width: 320px;
margin-inline: auto;
justify-items: center;
text-align: center;
}
.site-footer__venue-heading a {
min-height: 44px;
padding-block: 8px;
}
.site-footer__hours-inline {
text-align: center;
}
.site-footer__social {
justify-content: center;
}
.site-footer__base {
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
}
.site-footer__legal {
text-align: center;
}
}
/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
.site-footer a {
transition: none;
}
/* Nav still hides over the footer, but without the slide. */
.site-nav {
transition: none;
}
}
/* =================================================================
Site nav (v2) — sits over hero on home page; opaque elsewhere
================================================================= */
.site-nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 50;
padding: 16px clamp(20px, 4vw, 48px);
background: transparent; /* surface lives on ::before */
transition: padding 240ms ease,
transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Footer reveal — the top nav slides up out of view once the footer
is on screen, and slides back when scrolling up out of it. */
.site-nav.is-hidden-by-footer {
transform: translateY(-100%);
pointer-events: none;
}
/* The visible nav surface is a pseudo-element that fades in.
On non-hero pages it is always opaque; on hero pages it starts
transparent and fades in once the hero leaves the viewport. */
.site-nav::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--verde-ink);
opacity: 1;
transition:
opacity 360ms cubic-bezier(0.4, 0, 0.2, 1),
background 320ms ease,
-webkit-backdrop-filter 320ms ease,
backdrop-filter 320ms ease,
border-color 320ms ease;
}
/* HOME / HERO-NAV — panel transparent over the hero; fades in on scroll.
Charcoal with glass blur so cream text clears 7:1 contrast at 0.82 alpha. */
.home-page .site-nav::before,
.has-hero-nav .site-nav::before {
background: rgba(26, 26, 26, 0.82);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid rgba(235, 220, 196, 0.16);
opacity: 0;
}
.home-page .site-nav.is-scrolled::before,
.has-hero-nav .site-nav.is-scrolled::before,
body.drawer-open .home-page .site-nav::before,
body.drawer-open .has-hero-nav .site-nav::before {
opacity: 1;
}
/* HERO-NAV TOP SCRIM — a whisper-light gradient that keeps the cream nav
text legible over varied hero photography without visibly tinting the
image. Stays well below the perception threshold (~22 % at peak) so the
nav reads as fully transparent. Text-shadow on the links carries the
remaining legibility load. Fades to zero once the frosted panel arrives. */
.home-page .site-nav::after,
.has-hero-nav .site-nav::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 96px;
z-index: -2;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.22) 0%,
rgba(0, 0, 0, 0) 100%
);
pointer-events: none;
transition: opacity 320ms ease;
}
.home-page .site-nav.is-scrolled::after,
.has-hero-nav .site-nav.is-scrolled::after {
opacity: 0;
}
/* TEXT-SHADOW legibility on transparent nav — compensates for the reduced
scrim so cream labels read clearly over any hero image. Fades out once
the frosted panel slides in (contrast handled by the dark background). */
.home-page .site-nav:not(.is-scrolled) .site-nav__link,
.has-hero-nav .site-nav:not(.is-scrolled) .site-nav__link {
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.home-page .site-nav.is-scrolled .site-nav__link,
.has-hero-nav .site-nav.is-scrolled .site-nav__link {
text-shadow: none;
}
/* DRAWER OPEN — nav panel stays put and the drawer slides DOWN beneath
it (mobile-menu z-index 60 < site-nav z-index 80). The Verde logo
bar reads as a fixed lid the menu emerges from. */
.site-nav__inner {
/* Fluid — content stretches edge-to-edge with the viewport. */
max-width: none;
position: relative;
/* Mobile-first: simple flex bar, hamburger holds the right edge
(pre-grid behaviour). The desktop 3-column grid is scoped to
min-width 970px below — grid auto-placement breaks when the link
list is display:none (children shift one column left), which is
exactly what happened on phones. */
display: flex;
align-items: center;
justify-content: flex-end;
gap: clamp(16px, 3vw, 40px);
}
@media (min-width: 970px) {
/* 3-column grid: [left links] [wordmark] [contact + CTA]. Equal 1fr
side columns keep the wordmark geometrically centred at every
width; the gap floors at 32px and tightens from its fluid value
as the viewport narrows. All three children are visible at this
width, so auto-placement maps 1:1 onto the tracks. */
.site-nav__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
justify-content: normal;
column-gap: clamp(32px, 3.5vw, 56px);
}
/* Compound selector (0,2,0) so it beats the base
.site-nav__wordmark-link { position: absolute } that appears LATER
in source. Without this the wordmark stays absolute, leaves only
two in-flow grid items, and the right cluster auto-places into the
centre column — overlapping the wordmark. */
.site-nav .site-nav__wordmark-link {
position: static;
transform: none;
justify-self: center;
}
.site-nav .site-nav__right {
justify-self: end;
}
}
.site-nav__cta { flex: 0 0 auto; }
/* Gold wordmark centred in the nav bar — fades in with the panel.
On hero pages: transparent at the top, opaque once is-scrolled.
On non-hero pages: always opaque (panel is always visible). */
.site-nav__wordmark-link {
/* Mobile bar: absolute-centred over the flex row (pre-grid
behaviour). Desktop ≥970px overrides to static grid centring. */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block;
line-height: 0;
opacity: 1;
transition: opacity 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Right cluster: CONTACT + Book a Table (+ hamburger on mobile). */
.site-nav__right {
display: flex;
align-items: center;
gap: clamp(20px, 2vw, 32px);
}
.site-nav__wordmark {
display: block;
height: 33px;
width: auto;
user-select: none;
}
/* Hero pages: hidden at the top, fades in with the panel */
.home-page .site-nav .site-nav__wordmark-link,
.has-hero-nav .site-nav .site-nav__wordmark-link {
opacity: 0;
}
.home-page .site-nav.is-scrolled .site-nav__wordmark-link,
.has-hero-nav .site-nav.is-scrolled .site-nav__wordmark-link,
body.drawer-open.home-page .site-nav .site-nav__wordmark-link,
body.drawer-open.has-hero-nav .site-nav .site-nav__wordmark-link {
opacity: 1;
}
/* Verde logo (mask-based — kept for hero / menu instances) */
.verde-logo {
display: block;
background-color: currentColor;
aspect-ratio: 909.09 / 330.82;
-webkit-mask: url("assets/verde-logo.svg") no-repeat center / contain;
mask: url("assets/verde-logo.svg") no-repeat center / contain;
}
.verde-logo--nav {
width: 96px;
}
.verde-logo--hero {
width: 100%;
max-width: 840px;
background: linear-gradient(to bottom, #CBAA6A, #B8924A 50%, #9D7B3A);
filter: drop-shadow(3px 4px 0px rgba(0, 0, 0, 0.7));
}
.site-nav__links {
list-style: none;
margin: 0;
padding: 0;
justify-self: start;
display: flex;
align-items: center;
/* Tighter gap so the four labels read as one cluster on the left. */
gap: clamp(8px, 1.2vw, 20px);
}
.site-nav__link {
display: inline-flex;
align-items: center;
padding: 8px;
color: var(--verde-cream);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
line-height: calc(1em + 8px);
letter-spacing: 4px;
text-transform: uppercase;
text-decoration: none;
transition: opacity 200ms ease;
}
.site-nav__link:hover,
.site-nav__link:focus-visible {
opacity: 0.7;
}
/* Active state: no underline; opacity is the only visual signal. */
.site-nav__link.is-current {
opacity: 1;
}
/* Button used as the Venues trigger needs to look identical to anchor links. */
button.site-nav__link {
border: 0;
background: transparent;
cursor: pointer;
font: inherit;
font-size: 12px;
font-weight: 500;
line-height: calc(1em + 8px);
letter-spacing: 4px;
}
.site-nav__link--dropdown {
display: inline-flex;
align-items: center;
gap: 4px;
}
.nav-chevron {
transition: transform 200ms ease-out;
}
.site-nav__link--dropdown[aria-expanded="true"] .nav-chevron {
transform: rotate(180deg);
}
/* ---- Venues dropdown ---- */
.site-nav__item--has-menu {
position: relative;
}
.site-nav__submenu {
position: absolute;
top: 100%;
/* Left-aligned with the Venues trigger — type starts at the same x. */
left: 0;
transform-origin: top left; /* grow from the trigger, not centre */
transform: translateY(8px) scale(0.98);
/* 16px gutter left/right, 8px top/bottom; panel hugs the longest item. */
width: max-content;
list-style: none;
margin: 0;
padding: 8px 16px;
background: rgba(26, 26, 26, 0.78);
border: 1px solid rgba(235, 220, 196, 0.16);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
display: grid;
gap: 4px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 200ms;
}
.site-nav__item--has-menu:hover .site-nav__submenu,
.site-nav__item--has-menu:focus-within .site-nav__submenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.site-nav__submenu a {
display: block;
/* Outer 8px gutter on the panel handles the inline space, so items
only need vertical padding here. */
padding: 8px 0;
color: var(--verde-cream);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
line-height: calc(1em + 8px);
letter-spacing: 4px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: opacity 200ms ease;
}
.site-nav__submenu a:hover,
.site-nav__submenu a:focus-visible {
opacity: 0.7;
}
/* What's On always shown in the Events dropdown — nav-state
conditional hiding removed at client request. */
/* Primary CTA — the booking action. Solid antique gold so it reads as
the single highest-priority action, matching the mobile book bar. */
.site-nav__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 22px;
background: linear-gradient(to bottom, #CBAA6A, #B8924A 50%, #9D7B3A);
border: 1px solid #B8924A;
border-radius: 0;
color: var(--verde-ink);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
line-height: calc(1em + 8px);
letter-spacing: 4px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background-color 250ms ease-in-out, color 250ms ease-in-out, border-color 250ms ease-in-out, transform 160ms var(--ease-out);
}
.site-nav__cta:active {
transform: scale(0.97);
}
.site-nav__cta:hover,
.site-nav__cta:focus-visible {
background: #1A1A1A; /* Nero Carbone */
border-color: #B8924A; /* gold keyline on rollover */
color: #B8924A; /* Oro Antico */
}
.site-nav__menu {
display: none;
position: relative;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
}
/* Hamburger -> X morph (RRoberts CodePen, first variant).
Three absolutely-positioned bars; on .drawer-open the top and bottom
collapse to the centre line and rotate ±45° while the middle fades. */
.site-nav__menu span {
position: absolute;
left: 50%;
width: 22px;
height: 2px;
margin-left: -11px;
background: var(--verde-cream);
border-radius: 1px;
transition:
top 240ms cubic-bezier(0.4, 0, 0.2, 1),
transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 200ms ease,
background 240ms ease;
}
.site-nav__menu span:nth-child(1) { top: 14px; }
.site-nav__menu span:nth-child(2) { top: 19px; }
.site-nav__menu span:nth-child(3) { top: 24px; }
body.drawer-open .site-nav__menu span:nth-child(1) {
top: 19px;
transform: rotate(45deg);
}
body.drawer-open .site-nav__menu span:nth-child(2) {
opacity: 0;
}
body.drawer-open .site-nav__menu span:nth-child(3) {
top: 19px;
transform: rotate(-45deg);
}
@media (max-width: 969px) {
.site-nav__links,
.site-nav__cta,
.site-nav__right > .site-nav__link {
display: none;
}
.site-nav__menu {
display: inline-flex;
}
/* Open drawer: the wordmark keeps its absolute centring (mobile base)
so it reads centred over the bar, matching the centred drawer content
below; the close X holds the right edge (inner reverts to flex-end). */
body.drawer-open .site-nav__wordmark-link,
body.drawer-open.home-page .site-nav .site-nav__wordmark-link,
body.drawer-open.has-hero-nav .site-nav .site-nav__wordmark-link {
opacity: 1;
}
/* Mobile nav over hero stays transparent (matching the desktop
pattern). The translucent panel and the brand wordmark only
appear once the user has scrolled out of the hero, at which
point the brand reads in gold against the dark panel. */
}
@media (prefers-reduced-motion: reduce) {
.site-nav,
.site-nav__brand,
.site-nav__link,
.site-nav__cta,
.site-nav__menu span {
transition: none;
}
}
/* =================================================================
Home hero (v2) — full-bleed photo, dark overlay, three-line stack
================================================================= */
.home-page .home-hero {
position: relative;
min-height: 100vh;
min-height: 100dvh;
display: grid;
place-items: center;
padding: clamp(96px, 14vh, 160px) clamp(20px, 5vw, 64px);
overflow: hidden;
isolation: isolate;
background: #2D241F;
color: var(--verde-bone);
}
@media (max-width: 768px) {
.home-page .home-hero {
min-height: 100vh;
min-height: 100dvh;
}
}
.home-hero__media {
position: absolute;
inset: 0;
z-index: -2;
}
.home-hero__media img,
.home-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
filter: saturate(0.95);
display: block;
opacity: 0;
}
/* First video visible by default (GSAP takes over) */
.home-hero__video[data-hero-video="1"] {
opacity: 1;
}
/* Home hero sits over autoplaying video — unknown, changing content — so
the scrim has to be strong and deterministic. A vertical gradient holds
the centre band where the wordmark + taglines sit; the radial adds a
gentle vignette so the corners of the footage still breathe. */
.home-hero__overlay {
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(
ellipse at center,
transparent 28%,
rgba(0, 0, 0, 0.34) 100%
),
linear-gradient(
180deg,
rgba(0, 0, 0, 0.48) 0%,
rgba(0, 0, 0, 0.42) 22%,
rgba(0, 0, 0, 0.60) 50%,
rgba(0, 0, 0, 0.72) 100%
);
}
.home-hero__inner {
width: 100%;
max-width: 980px;
display: grid;
justify-items: center;
gap: 16px;
text-align: center;
}
.home-hero__eyebrow {
margin: 0 0 clamp(16px, 3vh, 32px) 0;
padding: 0;
font-family: var(--font-body);
/* Matches the venue/internal hero eyebrow (.hero--venue__eyebrow) */
font-size: clamp(13px, 1.4vw, 20px);
font-weight: 400;
letter-spacing: 0.24em;
text-transform: uppercase;
line-height: calc(1em + 8px);
color: rgb(239, 231, 216);
}
/* Forces "Soul." onto its own line on narrow viewports so the
eyebrow visually echoes the wordmark stack and the cross-fade
between "Old World Soul." and "Modern Italian Dining." doesn't
feel jarring. Inline by default; block under 640px. */
.home-hero__break { display: inline; }
@media (max-width: 640px) {
.home-hero__break { display: block; }
}
.home-hero__eyebrow > span,
.home-hero__locality > span {
grid-area: 1 / 1;
opacity: 0;
}
/* Frame A visible by default (GSAP takes over) */
.home-hero__eyebrow > span[data-hero-state="1"],
.home-hero__locality > span[data-hero-state="1"] {
opacity: 1;
}
.home-hero__wordmark {
width: 100%;
max-width: 840px;
color: var(--verde-bone);
line-height: calc(1em + 8px);
}
/* Centred inner variant for display-name hero layout */
.home-hero__inner--centered {
justify-items: center;
text-align: center;
gap: 0;
}
/* Large "VERDE" display text in home hero */
.home-hero__display-name {
font-family: var(--font-heading);
font-size: clamp(64px, 20vw, 320px);
font-weight: 400;
line-height: calc(1em + 8px);
letter-spacing: 0.02em;
color: var(--verde-bone);
text-transform: uppercase;
margin: 0;
max-width: none;
}
/* Home hero logo — matches verde-logo--hero sizing within home hero */
.home-hero__logo {
display: block;
width: 100%;
max-width: 840px;
margin-inline: auto;
aspect-ratio: 909.09 / 330.82;
overflow: visible;
}
/* Hard drop-shadow on the filled letters. Each letter's outline self-draws
in gold (initHeroOpening), then the fill settles in behind it. */
.home-hero__logo-fill {
filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.7));
}
/* The self-drawing stroke is JS-driven; hidden at rest so a no-JS /
reduced-motion load shows only the filled gold wordmark, no raw outline. */
.home-hero__logo-stroke { opacity: 0; }
/* Reduced motion: no Ken Burns */
@media (prefers-reduced-motion: reduce) {
.home-hero__media {
transform: none !important;
}
}
.home-hero__locality {
margin: clamp(16px, 3vh, 32px) 0 0;
padding: 0;
font-family: var(--font-body);
/* Matches the venue/internal hero sub-line (.hero--venue__sub) */
font-size: clamp(13px, 1.4vw, 20px);
font-weight: 300;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgb(239, 231, 216);
}
/* ---- Scroll cue — animated mouse/wheel hint at the foot of every
hero header. The dot drifts down and fades on a GSAP loop
(verde-script.js); under reduced motion it sits still. ---- */
.scroll-cue {
position: absolute;
left: 50%;
bottom: clamp(22px, 4vh, 46px);
transform: translateX(-50%);
z-index: 3;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.scroll-cue__label {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
font-variant-caps: all-small-caps;
letter-spacing: 0.3em;
/* trailing letter-spacing pushes the glyphs right; nudge back to centre */
padding-left: 0.3em;
color: rgba(239, 231, 216, 0.9);
}
.scroll-cue__mouse {
display: block;
width: 26px;
height: 42px;
border: 2px solid rgba(239, 231, 216, 0.7);
border-radius: 14px;
}
.scroll-cue__dot {
display: block;
width: 4px;
height: 8px;
margin: 8px auto 0;
border-radius: 2px;
background: rgba(239, 231, 216, 0.95);
}
/* Inverted cue for light sections (e.g. the cream World of Verde stage). */
.scroll-cue--dark .scroll-cue__mouse { border-color: rgba(26, 26, 26, 0.55); }
.scroll-cue--dark .scroll-cue__dot { background: rgba(26, 26, 26, 0.9); }
.scroll-cue--dark .scroll-cue__label { color: rgba(26, 26, 26, 0.78); }
/* On mobile the fixed "Book a Table" bar occupies the foot of the
viewport — hide the scroll cue so the two never collide. */
@media (max-width: 768px) {
.scroll-cue { display: none; }
}
/* visually hidden — reserves heading semantics without showing text */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* =================================================================
"Two Venues. One Soul." — first cream band on the home page
================================================================= */
.intro {
position: relative;
z-index: 1;
background: #E6DFCD;
color: var(--verde-ink);
padding-block: clamp(96px, 12vw, 168px);
padding-inline: clamp(24px, 5vw, 88px);
}
.intro__inner {
max-width: 940px;
margin-inline: auto;
display: grid;
justify-items: center;
gap: clamp(20px, 2.4vw, 32px);
text-align: center;
}
.intro__mark {
width: clamp(126px, 14.7vw, 189px);
height: auto;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.wine-anim-wrap {
position: relative;
width: clamp(126px, 14.7vw, 189px);
aspect-ratio: 1 / 1;
display: block;
margin-inline: auto;
margin-bottom: calc(-1 * clamp(20px, 2.4vw, 32px));
background: #E6DFCD;
pointer-events: none;
}
.wine-illustration {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
}
.wine-static {
opacity: 1;
transition: opacity 220ms ease;
z-index: 1;
}
.wine-motion {
opacity: 0;
transition: opacity 220ms ease;
z-index: 2;
}
body.is-scrolling .wine-motion {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.wine-motion {
display: none;
}
.wine-static {
opacity: 1 !important;
}
}
.intro__title {
margin: 0;
font-family: var(--font-heading);
font-weight: 400;
color: var(--verde-gold);
font-size: clamp(30px, 1.5rem + 2.4vw, 46px);
line-height: calc(1em + 8px);
letter-spacing: 0.01em;
text-transform: uppercase;
}
/* First line — block so GSAP can animate it independently of the accent. */
.intro__title-line {
display: block;
}
/* Second line of the intro title. Shares the heading face with the
"Two Venues." line above; set larger for an editorial flourish and
sits just below it without crowding. */
.intro__title-accent {
display: block;
font-family: var(--font-heading);
font-weight: 400;
text-transform: none;
font-size: clamp(38px, 1.9rem + 3.4vw, 62px);
line-height: 1.05;
color: var(--verde-ink);
margin-top: 0.06em;
letter-spacing: 0.01em;
}
.intro__lede {
margin: 0;
max-width: 62ch;
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(16px, 1.5vw, 24px);
line-height: calc(1em + 8px);
color: var(--verde-ink);
}
/* Secondary CTA — section-level action. Bordered, transparent fill.
Shares its metrics with .private-events__cta for a consistent tier. */
.intro__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 264px;
min-height: 48px;
margin-top: clamp(8px, 1.2vw, 16px);
padding: 15px 28px; /* visually centre tracked text */
border: 1px solid var(--verde-ink);
background: transparent;
color: var(--verde-ink);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
line-height: calc(1em + 8px);
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
transition: background 200ms ease, color 200ms ease;
}
.intro__cta:hover,
.intro__cta:focus-visible {
background: var(--verde-ink);
color: var(--verde-cream);
}
@media (prefers-reduced-motion: reduce) {
.intro__cta { transition: none; }
}
/* =================================================================
Marble texture band — full-bleed parallax with Verde badge
================================================================= */
.marble-band {
position: relative;
z-index: 1;
min-height: clamp(320px, 40vw, 520px);
display: grid;
place-items: center;
overflow: hidden;
background: url("/.netlify/images?url=%2Fassets%2Fmarble.jpg&w=1600") center 70% / cover no-repeat;
}
/* Darlinghurst Butcher Shop uses a brass texture in place of marble */
.marble-band--brass {
background-image: url("/.netlify/images?url=%2Fassets%2Fbrass.jpg&w=1600");
}
/* Alexandria uses its own square-crop marble */
.marble-band--alexandria {
background-image: url("/.netlify/images?url=%2Fassets%2Fmarble-square.jpg&w=1600");
}
.marble-band__badge {
position: relative;
z-index: 1;
width: clamp(140px, 18vw, 224px);
height: auto;
filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.25));
user-select: none;
-webkit-user-drag: none;
}
@media (max-width: 768px) {
.marble-band {
min-height: clamp(240px, 50vw, 360px);
}
.marble-band__badge {
width: clamp(120px, 30vw, 160px);
}
}
/* =================================================================
Mobile-only persistent Book CTA
Sits at the bottom of the viewport on phones, hidden on desktop
where the nav already carries the same action.
================================================================= */
.mobile-book-cta {
display: none;
}
@media (max-width: 969px) {
.mobile-book-cta {
position: fixed;
bottom: calc(8px + env(safe-area-inset-bottom, 0px));
left: 8px;
right: 8px;
z-index: 70;
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 24px;
/* Match the nav "Book a Table" gradient + gold edge. */
background: linear-gradient(to bottom, #CBAA6A, #B8924A 50%, #9D7B3A);
border: 1px solid #B8924A;
border-radius: 0;
color: var(--verde-ink);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
line-height: calc(1em + 8px);
letter-spacing: 4px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
transition: background-color 250ms ease-in-out, color 250ms ease-in-out, transform 200ms ease;
}
.mobile-book-cta:hover,
.mobile-book-cta:focus-visible {
background: #1A1A1A; /* Nero Carbone */
border-color: #B8924A; /* gold keyline on rollover */
color: #B8924A; /* Oro Antico */
}
.mobile-book-cta:active {
transform: translateY(1px);
}
/* Hides the persistent bar when the footer scrolls into view — the
footer carries the same Book action via the venue links. */
.mobile-book-cta.is-hidden-by-footer {
opacity: 0;
pointer-events: none;
transform: translateY(100%);
transition: opacity 200ms ease, transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
}
@media (prefers-reduced-motion: reduce) {
.mobile-book-cta { transition: none; }
}
/* =================================================================
Scroll-to-top — a charcoal-and-gold control that fades in once the
page has been scrolled, and carries the reader back to the top.
Bottom-right on desktop; on mobile it lifts clear of the fixed
"Book a Table" bar. Built and wired by initScrollTop.
================================================================= */
.scroll-top {
position: fixed;
z-index: 50;
right: clamp(20px, 3vw, 40px);
bottom: clamp(20px, 3vw, 40px);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
border: 1px solid var(--verde-gold, #B8924A);
border-radius: 50%;
background: #1A1A1A;
color: var(--verde-gold, #B8924A);
cursor: pointer;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 340ms ease,
transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
background-color 200ms ease,
visibility 0s linear 420ms;
-webkit-tap-highlight-color: transparent;
}
.scroll-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 340ms ease,
transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
background-color 200ms ease,
visibility 0s;
}
.scroll-top:hover { background: #1A1A1A; }
.scroll-top:focus-visible {
outline: 2px solid var(--verde-gold, #B8924A);
outline-offset: 3px;
}
.scroll-top:active { transform: translateY(0) scale(0.93); }
.scroll-top__icon {
width: 16px;
height: 16px;
display: block;
}
/* Mobile — lift clear of the fixed "Book a Table" bar (~60px tall). */
@media (max-width: 969px) {
.scroll-top {
right: 14px;
bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
}
@media (prefers-reduced-motion: reduce) {
.scroll-top {
transform: none;
transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.scroll-top.is-visible {
transform: none;
transition: opacity 200ms ease, visibility 0s;
}
.scroll-top:active { transform: scale(0.97); }
}
/* =================================================================
Mobile menu — Panna panel that slides DOWN from above the viewport.
The site nav is layered above (z 80) so its VERDE wordmark stays put
while the drawer arrives behind it; the logo simply flips colour
(cream → ink) as the panel meets the bar.
================================================================= */
.mobile-menu {
position: fixed;
inset: 0;
width: 100%;
z-index: 60;
/* Solid Verde Bosco so the drawer and the nav band above it read
as one continuous surface. Links are Panna against it; group
titles and social marks pick up the brand gold. */
background: var(--verde-bosco, #1E4A43);
color: #EBDCC4; /* Panna */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateY(-100%);
transition: transform 480ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.drawer-open .mobile-menu {
transform: translateY(0);
}
/* Site nav stays above the drawer and switches to Panna so the logo and
hamburger blend with the menu surface as it slides into view. */
.site-nav {
z-index: 80;
}
/* Drawer open: kill every nav surface — background, blur, hairline, shadow.
Both selectors so this beats .home-page .site-nav.is-scrolled (the frosted
glass state) which would otherwise win on specificity. The Panna canvas
of the drawer below shows straight through. */
/* Drawer open: nav surface stays put — the Verde logo keeps its
cream colour against the nav panel as the drawer slides under. */
/* Persistent mobile Book CTA stays visible while the menu is open — the
drawer slides over the page beneath it, the bar holds at the bottom. */
.mobile-menu__inner {
min-height: 100%;
display: flex;
flex-direction: column;
/* Top: clears the fixed nav (~72px). Bottom: clears the persistent
mobile Book CTA (~56px) plus the iOS safe-area inset. */
padding:
88px
clamp(20px, 5vw, 32px)
calc(80px + env(safe-area-inset-bottom, 0));
}
/* ---- Top bar (logo + close) ---- */
.mobile-menu__top {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 8px;
}
.mobile-menu__brand {
display: inline-flex;
align-items: center;
width: 96px;
color: var(--verde-gold);
text-decoration: none;
transition: opacity 200ms ease;
}
.mobile-menu__brand:hover,
.mobile-menu__brand:focus-visible { opacity: 0.7; }
.verde-logo--menu {
display: block;
width: 100%;
aspect-ratio: 909.09 / 330.82;
background-color: currentColor;
-webkit-mask: url("assets/verde-logo.svg") no-repeat center / contain;
mask: url("assets/verde-logo.svg") no-repeat center / contain;
}
.mobile-menu__close {
width: 44px;
height: 44px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: var(--verde-gold);
display: inline-flex;
align-items: center;
justify-content: center;
transition: opacity 200ms ease;
}
.mobile-menu__close:hover,
.mobile-menu__close:focus-visible { opacity: 0.7; }
.mobile-menu__close svg {
width: 28px;
height: 28px;
}
/* ---- Body (centred stack of links + sections) ---- */
.mobile-menu__body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(24px, 5vw, 48px);
padding-block-start: clamp(16px, 4vw, 28px);
/* Extra bottom clearance so social icons never hide behind the
persistent Book a Table bar (~60px) + safe area. */
padding-block-end: clamp(72px, 10vw, 96px);
}
.mobile-menu__primary {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.mobile-menu__primary a {
display: inline-flex;
font-family: var(--font-heading);
/* Matches Darlinghurst / Alexandria so the whole menu reads at one
consistent type size. */
font-size: clamp(32px, 7vw, 44px);
font-weight: 400;
line-height: calc(1em + 8px);
color: #EBDCC4; /* Panna */
text-decoration: none;
text-transform: uppercase;
transition: opacity 200ms ease;
}
.mobile-menu__primary a:hover,
.mobile-menu__primary a:focus-visible { opacity: 0.7; }
.mobile-menu__cta {
/* Sits near the bottom of the menu — margin-top: auto pushes the CTA
down within the flex column so Venues stays clustered with the
primary links and Book a Table anchors above Follow Us. */
margin-top: auto;
font-family: var(--font-heading);
font-size: clamp(36px, 8vw, 48px);
font-weight: 400;
line-height: calc(1em + 8px);
letter-spacing: 0;
color: var(--verde-gold);
text-decoration: none;
text-transform: uppercase;
transition: opacity 200ms ease;
}
.mobile-menu__cta:hover,
.mobile-menu__cta:focus-visible { opacity: 0.7; }
.mobile-menu__group {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.mobile-menu__group-title {
margin: 0;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
line-height: calc(1em + 8px);
letter-spacing: 4px;
text-transform: uppercase;
color: var(--verde-gold, #B8924A);
}
.mobile-menu__group-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.mobile-menu__group-list a {
font-family: var(--font-heading);
font-size: clamp(32px, 7vw, 44px);
font-weight: 400;
line-height: calc(1em + 8px);
color: #EBDCC4; /* Panna */
text-decoration: none;
text-transform: uppercase;
transition: opacity 200ms ease;
}
.mobile-menu__group-list a:hover,
.mobile-menu__group-list a:focus-visible { opacity: 0.7; }
.mobile-menu__social {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 24px;
}
.mobile-menu__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: var(--verde-gold, #B8924A); /* Oro */
text-decoration: none;
transition: opacity 200ms ease;
}
.mobile-menu__social a svg { width: 24px; height: 24px; }
.mobile-menu__social a:hover,
.mobile-menu__social a:focus-visible { opacity: 0.7; }
.mobile-menu__social svg {
width: 100%;
height: 100%;
}
@media (prefers-reduced-motion: reduce) {
/* The drawer's slide is functional UX feedback (open/close cue),
not decorative motion — explicitly KEEP it, just shorter. Never
`transition: none` on .mobile-menu. */
.mobile-menu {
transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Strip the hover/opacity micro-transitions on inner elements. */
.mobile-menu__brand,
.mobile-menu__close,
.mobile-menu__primary a,
.mobile-menu__cta,
.mobile-menu__group-list a,
.mobile-menu__social a {
transition: none;
}
}
/* =================================================================
Micro-interactions
================================================================= */
/* ---- Press feedback — every tappable element scales on :active ---- */
.intro__cta,
.site-nav__cta,
.venue-blurb a,
.mobile-book-cta,
.site-footer__hours-toggle {
transition: transform 160ms var(--ease-out), background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.intro__cta:active,
.site-nav__cta:active,
.venue-blurb a:active,
.mobile-book-cta:active,
.site-footer__hours-toggle:active {
transform: scale(0.97);
}
/* ---- Venue circles — hover lift + subtle scale ---- */
@media (hover: hover) and (pointer: fine) {
.venue-circle {
transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.venue-circle:hover {
transform: scale(1.04);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
}
.venue-circle:active {
transform: scale(0.98);
}
}
/* ---- Scroll reveals — IntersectionObserver adds .is-visible ---- */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 900ms cubic-bezier(0.19, 1, 0.22, 1) 200ms,
transform 900ms cubic-bezier(0.19, 1, 0.22, 1) 200ms;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 768px) {
.reveal {
transform: translateY(10px);
transition: opacity 700ms cubic-bezier(0.19, 1, 0.22, 1) 150ms,
transform 700ms cubic-bezier(0.19, 1, 0.22, 1) 150ms;
}
}
/* ---- Venue blurb link underline reveal ---- */
@media (hover: hover) and (pointer: fine) {
.venue-blurb a {
position: relative;
border-bottom: none;
text-decoration: none;
}
.venue-blurb a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms var(--ease-out);
}
.venue-blurb a:hover::after {
transform: scaleX(1);
}
}
/* ---- Reduced motion — strip interactive motion back ---- */
@media (prefers-reduced-motion: reduce) {
.venue-circle {
transition: none !important;
}
.intro__cta:active,
.site-nav__cta:active,
.venue-blurb a:active,
.mobile-book-cta:active {
transform: none;
}
}
/* =================================================================
Booking overlay — full-screen lightbox, slides up from bottom
================================================================= */
/* Backdrop — dark scrim behind the panel */
.booking-overlay {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: stretch;
justify-content: center;
/* closed state */
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1),
visibility 0s 400ms;
}
.booking-overlay::before {
content: "";
position: absolute;
inset: 0;
background: rgba(26, 26, 26, 0.82);
-webkit-backdrop-filter: saturate(180%) blur(8px);
backdrop-filter: saturate(180%) blur(8px);
}
.booking-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1),
visibility 0s 0s;
}
body.booking-open {
overflow: hidden;
}
/* Close button — sits inside the panel top-right */
.booking-overlay__close {
position: absolute;
top: 16px;
right: 16px;
z-index: 215;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--verde-ink, #1A1A1A);
color: var(--verde-cream, #EBDCC4);
cursor: pointer;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
transition: transform 160ms ease-out, background 200ms ease;
}
.booking-overlay__close:hover,
.booking-overlay__close:focus-visible {
background: #1A1A1A;
transform: scale(1.06);
}
.booking-overlay__close:active {
transform: scale(0.97);
}
.booking-overlay__close svg {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 1.5;
fill: none;
}
/* Panel — white card that slides up from the bottom */
/* Full-screen takeover on every breakpoint: the panel fills the whole
viewport (edge to edge) so the booking flow covers the nav; the user
closes out via the X. dvh keeps it flush under mobile browser bars. */
.booking-overlay__iframe-wrap {
position: relative;
z-index: 210;
width: 100%;
max-width: none;
align-self: stretch;
height: 100vh;
height: 100dvh;
max-height: none;
margin: 0;
background: #fff;
border-radius: 0;
overflow: hidden;
box-shadow: none;
/* gentle rise entrance */
transform: translateY(16px);
transition: transform 480ms cubic-bezier(0.32, 0.72, 0, 1);
}
.booking-overlay.is-open .booking-overlay__iframe-wrap {
transform: translateY(0);
}
/* Mobile: slide the panel up from the bottom like a sheet. */
@media (max-width: 768px) {
.booking-overlay__iframe-wrap {
transform: translateY(100%);
transition: transform 480ms cubic-bezier(0.32, 0.72, 0, 1);
}
.booking-overlay.is-open .booking-overlay__iframe-wrap {
transform: translateY(0);
}
}
/* iframe fills the panel */
.booking-overlay__iframe {
width: 100%;
height: 100%;
border: 0;
background: #fff;
border-radius: 0;
}
/* Reduced motion: no slide/rise — the overlay simply appears. */
@media (prefers-reduced-motion: reduce) {
.booking-overlay__iframe-wrap {
transition: none;
transform: none;
}
}
/* =================================================================
SevenRooms subscription lightbox — full-screen overlay.
SR's injected backdrop only dims to ~30% and the page scrolls behind
it. initSubscriptionModal tags the backdrop/panel/dialog (hashed class
names) so we can: darken the scrim to cover the nav, lock page scroll
(forcing close via the X), and fill the screen on mobile.
================================================================= */
body.sr-modal-open { overflow: hidden; }
/* The SR backdrop is injected inside #sr-subscription-root → inside the
.newsletter stacking context (z-index:1). On What's On the sibling
curtain section (.whats-on, z-index:2) would otherwise poke through above
the scrim. Lift the newsletter — and thus its backdrop — above every
section while the modal is open so it covers the whole page. */
body.sr-modal-open .newsletter { z-index: 2000; }
/* Hide the site's fixed chrome while the lightbox is open so the nav and
booking bar can't float above it (its deeply-nested backdrop can't
reliably out-stack the fixed nav). Restored on close. */
body.sr-modal-open .site-nav,
body.sr-modal-open .mobile-book-cta {
opacity: 0 !important;
pointer-events: none !important;
}
.sr-modal-cover {
/* Force the scrim to fill the whole viewport. On pages like What's On
the SR wrapper can otherwise be sized to a sub-region, leaving the
page visible around it ("doesn't overlay the whole site"). */
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100dvh !important;
background: rgba(10, 10, 10, 0.88) !important;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
@media (max-width: 640px) {
/* the dialog's positioning parent (absolute, inset-from-bottom) -> fill */
.sr-modal-cover *:has(> [role="dialog"]) {
inset: 0 !important;
transform: none !important;
}
.sr-modal-cover [role="dialog"] {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
border-radius: 0 !important;
}
}
/* Desktop: frame the card around the form rather than a viewport-tall box.
SR stretches the dialog/iframe to ~full height; cap it to a content-ish
size and centre it in the dark backdrop. The iframe fills the capped card
(scrolls internally if the form ever grows). */
@media (min-width: 641px) {
.sr-modal-cover *:has(> [role="dialog"]) {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.sr-modal-cover [role="dialog"] {
flex: 0 0 auto !important;
width: 560px !important;
max-width: calc(100vw - 48px) !important;
height: min(700px, calc(100vh - 48px)) !important;
max-height: calc(100vh - 48px) !important;
overflow: hidden !important; /* clip SR's bottom-anchored footer/empty */
}
/* Oversize the iframe so it has no internal scrollbar of its own; the
card's overflow:hidden crops the SR page's empty tail + footer. */
.sr-modal-cover [role="dialog"] iframe {
height: 1600px !important;
}
}
/* =================================================================
Contact page — Book a table panel, Locations band, FAQ accordion.
Adapted from the Framer reference into the Verde style system.
================================================================= */
/* --- Book a table panel ----------------------------------------- */
.bookpanel {
background: var(--paper);
padding-block-start: clamp(32px, 4vw, 48px);
}
.bookpanel__email {
margin: 0 0 clamp(28px, 4vw, 44px);
text-align: center;
font-family: var(--font-body);
font-size: clamp(13px, 1.1vw, 15px);
color: var(--muted);
}
.bookpanel__email a {
display: block;
margin-top: 6px;
color: var(--verde-ink);
text-transform: uppercase;
letter-spacing: 0.12em;
text-decoration: underline;
text-underline-offset: 4px;
}
.bookpanel__card {
max-width: 720px;
margin: 0 auto;
background: #FAF7F2;
padding: clamp(28px, 5vw, 56px);
border: 1px solid rgba(26, 26, 26, 0.08);
}
.bookpanel__form {
display: flex;
flex-direction: column;
gap: clamp(18px, 2.4vw, 24px);
}
.bookpanel__legend {
margin: 0;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.bookpanel__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(16px, 2vw, 20px);
}
.bookpanel__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.bookpanel__field label {
font-family: var(--font-body);
font-size: 14px;
color: var(--verde-ink);
}
.bookpanel__field input,
.bookpanel__field textarea {
width: 100%;
background: #EBEBEB;
border: 1px solid transparent;
border-radius: 2px;
padding: 14px;
font-family: var(--font-body);
font-size: 16px;
color: var(--verde-ink);
}
.bookpanel__field textarea {
resize: vertical;
min-height: 120px;
}
.bookpanel__field input::placeholder,
.bookpanel__field textarea::placeholder {
color: rgba(26, 26, 26, 0.35);
}
.bookpanel__field input:focus-visible,
.bookpanel__field textarea:focus-visible {
outline: none;
border-color: #B8924A;
box-shadow: 0 0 0 2px rgba(184, 146, 74, 0.3);
}
.bookpanel__check {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: 14px;
color: var(--verde-ink);
cursor: pointer;
}
.bookpanel__check input {
width: 16px;
height: 16px;
accent-color: #B8924A;
flex: 0 0 auto;
}
.bookpanel__submit {
margin-top: 4px;
background: #1A1A1A;
color: #fff;
border: 0;
padding: 18px 24px;
font-family: var(--font-body);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 200ms ease;
}
.bookpanel__submit:hover,
.bookpanel__submit:focus-visible {
background: var(--verde-ink);
outline: none;
}
.bookpanel__submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.bookpanel__gift {
display: flex;
align-items: center;
justify-content: center;
width: max-content;
max-width: 100%;
margin: 0 auto clamp(28px, 4vw, 44px);
min-height: 48px;
padding: 0 32px;
border: 1px solid var(--verde-ink, #1A1A1A);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
text-decoration: none;
color: var(--verde-ink, #1A1A1A);
transition: background 200ms ease, color 200ms ease;
}
.bookpanel__gift:hover,
.bookpanel__gift:focus-visible {
background: var(--verde-ink, #1A1A1A);
color: var(--paper, #F5F0E8);
}
/* --- Locations band --------------------------------------------- */
.locations {
padding: 0;
}
/* Two full-bleed colour panels meeting at the centre — Darlinghurst on
forest green, Alexandria on charcoal. Echoes the venue badges and
the Visit Verde cross-link cards. */
.locations__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.location {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: clamp(48px, 6.5vw, 104px) clamp(24px, 5vw, 80px);
}
.location--green { background: var(--verde-forest, #1E4A43); }
.location--dark { background: var(--verde-ink, #1A1A1A); }
/* Content column, constrained within each panel. */
.location__inner {
width: 100%;
max-width: 540px;
}
/* Badge + details row — the floating-gold seal sits to the left of the
venue name + address. Each seal's circle matches its panel colour
(green / dark) so the gold detail reads as a stamp floating on the panel. */
.location__head {
display: flex;
align-items: flex-start;
gap: clamp(16px, 2.5vw, 28px);
margin-top: clamp(20px, 2.4vw, 28px);
}
.location__badge {
flex: 0 0 auto;
width: clamp(76px, 12vw, 108px);
height: auto;
margin-top: 2px;
}
.location__details { min-width: 0; }
.location__head .location__name { margin-top: 0; }
.location__map {
position: relative;
display: block;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: 2px;
/* Black keyline frame around each map. */
border: 1px solid var(--verde-ink);
background: rgba(26, 26, 26, 0.12);
}
.location__map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
/* Static locator — the address link below opens the live map.
Disabling interaction keeps the badge marker aligned on the venue. */
pointer-events: none;
}
/* Verde olive badge as the map marker — centred over the venue,
covering Google's default pin. */
.location__map-marker {
position: absolute;
top: 50%;
left: 50%;
width: clamp(46px, 7vw, 58px);
height: auto;
transform: translate(-50%, calc(-50% - 20px));
z-index: 2;
pointer-events: none;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}
/* When the interactive JS-API map renders (verde-map.js) it draws its
own badge marker — hide the iframe overlay. */
.location__map--live .location__map-marker {
display: none;
}
/* Interactive Verde-styled map (Google Maps JS API — see verde-map.js).
Once it renders, the static iframe embed is swapped out for it. */
.location__map-canvas {
width: 100%;
height: 100%;
}
.location__map--live iframe {
display: none;
}
/* Card text — venue name in gold, the rest in white, on the dark cards. */
.location__name {
margin: clamp(20px, 2.4vw, 28px) 0 0;
font-family: var(--font-heading);
font-weight: 400;
font-size: clamp(20px, 2vw, 26px);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--verde-gold, #B8924A);
}
.location__address {
margin: 12px 0 0;
font-family: var(--font-body);
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.55;
color: var(--verde-cream);
}
.location__address a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid rgba(231, 224, 203, 0.4);
transition: border-color 200ms ease;
}
.location__address a:hover,
.location__address a:focus-visible {
border-color: var(--verde-cream);
outline: none;
}
.location__phone {
display: inline-block;
margin: 14px 0 0;
font-family: var(--font-body);
font-size: clamp(15px, 1.3vw, 17px);
color: var(--verde-cream);
text-decoration: underline;
text-underline-offset: 3px;
}
.location__email {
display: inline-block;
margin: 6px 0 0;
font-family: var(--font-body);
font-size: clamp(13px, 1.1vw, 15px);
color: rgba(231, 224, 203, 0.78);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.location__email:hover,
.location__email:focus-visible {
color: var(--verde-cream);
}
.location__phone,
.location__email {
display: block;
}
.location__hours {
margin: 14px 0 0;
font-family: var(--font-body);
font-size: clamp(14px, 1.2vw, 16px);
line-height: 1.55;
color: rgba(231, 224, 203, 0.78);
}
/* Uber deep-link button — opens the Uber app with the venue preset
as the destination. Bordered to read against both panel colours. */
/* Official "Ride there with Uber" button — white variant, so it reads
on both the green and the black contact panels. */
.location__uber {
display: flex;
width: max-content;
max-width: 100%;
align-items: center;
justify-content: center;
min-height: 44px;
margin-top: clamp(18px, 2.4vw, 26px);
padding: 12px 24px;
background: #FFFFFF;
border: 0;
border-radius: 2px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
color: #000000;
transition: background-color 200ms ease;
}
.location__uber:hover,
.location__uber:focus-visible {
background: #ECEAE2;
outline: none;
}
/* --- Good to Know — FAQ accordion ------------------------------- */
.faq {
background: var(--paper);
}
.faq__heading {
margin: 0;
font-family: var(--font-heading);
font-weight: 400;
font-size: var(--type-h2);
line-height: var(--lh-h2);
letter-spacing: 0.02em;
text-transform: uppercase;
text-align: center;
color: #B8924A; /* Oro Antico */
}
.faq__intro {
margin: 12px auto clamp(36px, 5vw, 60px);
font-family: var(--font-body);
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.6;
text-align: center;
color: var(--verde-ink, #1A1A1A);
max-width: 520px;
}
/* Accordion sits as a centred column, roughly half the page width. */
.faq__list {
max-width: 760px;
margin-inline: auto;
}
.faq__item {
border-top: 1px solid rgba(26, 26, 26, 0.16);
}
.faq__item:last-child {
border-bottom: 1px solid rgba(26, 26, 26, 0.16);
}
.faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: clamp(20px, 2.4vw, 28px) 0;
cursor: pointer;
list-style: none;
font-family: var(--font-heading);
font-weight: 400;
font-size: clamp(17px, 1.7vw, 24px);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--verde-ink);
}
.faq__q::-webkit-details-marker { display: none; }
/* + marker on the right; rotates to × when the item is open */
.faq__q::after {
content: "";
flex: 0 0 auto;
width: 18px;
height: 18px;
background:
linear-gradient(var(--verde-ink), var(--verde-ink)) center / 100% 1.5px no-repeat,
linear-gradient(var(--verde-ink), var(--verde-ink)) center / 1.5px 100% no-repeat;
transition: transform 240ms ease;
}
.faq__item[open] .faq__q::after {
transform: rotate(45deg);
}
.faq__q:focus-visible {
outline: 2px solid #B8924A;
outline-offset: 2px;
}
.faq__a {
margin: 0;
padding: 0 0 clamp(20px, 2.4vw, 28px);
max-width: 760px;
font-family: var(--font-body);
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.65;
color: var(--muted);
text-wrap: pretty;
}
.faq__item[open] .faq__a {
animation: faqReveal 260ms ease;
}
@keyframes faqReveal {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Contact sections: tablet / mobile -------------------------- */
@media (max-width: 768px) {
.bookpanel__row,
.locations__grid {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.faq__q::after { transition: none; }
.faq__item[open] .faq__a { animation: none; }
}
/* =====================================================================
FORM SECURITY & FEEDBACK — shared across verde-events + verde-contact
===================================================================== */
/* Honeypot — hidden from real users; bots fill it in.
Visually hidden but still present in DOM so bots see it. */
.form-honeypot {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
padding: 0;
}
/* ---------------------------------------------------------------
Cloudflare Turnstile widget containers
--------------------------------------------------------------- */
.ev-form__turnstile,
.bookpanel__turnstile {
margin: 20px 0 8px;
}
/* ---------------------------------------------------------------
Form error banners (below Turnstile, above submit button)
--------------------------------------------------------------- */
/* Override UA [hidden] — same pattern as .wo-state[hidden] */
.ev-form__error-banner[hidden],
.bookpanel__error-banner[hidden] {
display: none !important;
}
.ev-form__error-banner,
.bookpanel__error-banner {
display: block;
margin: 12px 0 0;
padding: 12px 16px;
background: #fef2f2;
border-left: 3px solid #b91c1c;
color: #7f1d1d;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0 4px 4px 0;
}
/* ---------------------------------------------------------------
Private events form — success state
--------------------------------------------------------------- */
.ev-form__success {
max-width: 560px;
margin: 48px auto;
text-align: center;
}
.ev-form__success-heading {
font-family: var(--font-heading, "Aboreto", cursive);
font-size: clamp(1.25rem, 2vw, 1.75rem);
color: var(--color-charcoal, #1a1a1a);
margin: 0 0 16px;
}
.ev-form__success-body {
font-size: 1rem;
color: rgba(26, 26, 26, 0.7);
line-height: 1.6;
}
/* ---------------------------------------------------------------
Contact form — bookpanel success + error
--------------------------------------------------------------- */
.bookpanel__success {
padding: 24px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #166534;
font-size: 1rem;
line-height: 1.6;
border-radius: 4px;
text-align: center;
margin-top: 8px;
}
/* =================================================================
Page cross-fade — View Transitions API (MPA)
Full-page opacity fade matching 100georgest.com reference.
Timing: 400ms exit, 400ms enter, cubic-bezier(0.25, 0.1, 0.25, 1).
@view-transition { navigation: auto } activates in Chrome 126+.
verde-transitions.js provides the vanilla JS fallback.
================================================================= */
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 400ms;
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
::view-transition-old(root) {
animation-name: fade-out;
}
::view-transition-new(root) {
animation-name: fade-in;
}
@keyframes fade-out {
to { opacity: 0; }
}
@keyframes fade-in {
from { opacity: 0; }
}
/* Reduced motion — instant cut */
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0s;
}
.reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* =================================================================
AWARDS — nav scroll treatment (awards branch)
Bosco #1E4A43 @97% panel + Oro #B8924A 20% hairline. Panna nav
links/hamburger on the panel; Oro for hover/active and the Book
CTA. One unified 350ms ease-in-out motion with a 6px settle.
Cream nav preserved over heroes (hero pages, not scrolled).
================================================================= */
/* Unified panel motion — 350ms ease-in-out, opacity + 6px settle */
.site-nav::before {
transition:
opacity 350ms ease-in-out,
transform 350ms ease-in-out,
background 350ms ease-in-out,
border-color 350ms ease-in-out;
}
/* Cream panel wherever the surface is visible:
hero pages once scrolled (or drawer open), and non-hero pages. */
.home-page .site-nav.is-scrolled::before,
.has-hero-nav .site-nav.is-scrolled::before,
body.drawer-open .home-page .site-nav::before,
body.drawer-open .has-hero-nav .site-nav::before,
body.show-nav-brand .site-nav::before,
body:not(.home-page):not(.has-hero-nav) .site-nav::before {
background: #1E4A43; /* Bosco, 100% opaque — cannot mismatch */
border-bottom: 1px solid rgba(184, 146, 74, 0.20); /* Oro #B8924A @ 20% */
-webkit-backdrop-filter: none;
backdrop-filter: none;
transform: translateY(0);
}
/* Hero pages, panel hidden over the hero — parked 6px up so it
settles DOWN into place as it fades in on scroll. */
.home-page .site-nav:not(.is-scrolled)::before,
.has-hero-nav .site-nav:not(.is-scrolled)::before {
transform: translateY(-6px);
}
/* Panna nav elements on the Bosco panel (chevron inherits via
currentColor; links stay cream over heroes via the base rule). */
body.show-nav-brand .site-nav__link,
body:not(.home-page):not(.has-hero-nav) .site-nav__link,
.home-page .site-nav.is-scrolled .site-nav__link,
.has-hero-nav .site-nav.is-scrolled .site-nav__link {
color: #EBDCC4; /* Panna */
}
body.show-nav-brand .site-nav__menu span,
body:not(.home-page):not(.has-hero-nav) .site-nav__menu span,
.home-page .site-nav.is-scrolled .site-nav__menu span,
.has-hero-nav .site-nav.is-scrolled .site-nav__menu span {
background: #EBDCC4; /* Panna */
}
/* Hover / active link state on the panel: Oro Antico, held solid
(overrides the base opacity-dim so the gold reads crisply). */
body.show-nav-brand .site-nav__link:hover,
body.show-nav-brand .site-nav__link:focus-visible,
body.show-nav-brand .site-nav__link.is-current,
body:not(.home-page):not(.has-hero-nav) .site-nav__link:hover,
body:not(.home-page):not(.has-hero-nav) .site-nav__link:focus-visible,
body:not(.home-page):not(.has-hero-nav) .site-nav__link.is-current,
.home-page .site-nav.is-scrolled .site-nav__link:hover,
.home-page .site-nav.is-scrolled .site-nav__link:focus-visible,
.home-page .site-nav.is-scrolled .site-nav__link.is-current,
.has-hero-nav .site-nav.is-scrolled .site-nav__link:hover,
.has-hero-nav .site-nav.is-scrolled .site-nav__link:focus-visible,
.has-hero-nav .site-nav.is-scrolled .site-nav__link.is-current {
color: #B8924A; /* Oro Antico */
opacity: 1;
}
/* Nav brand: the original VERDE wordmark (word only) — the arch-crest
swap was tried and reverted by request. The wordmark img renders
as-is; no overrides needed. */
/* Seam fix — the About "1889. 1966." section (.boat-between) used a
sibling green (#1F3D38) plus a warm light-shaft gradient and noise
that reach the section's top edge. Behind the opaque Bosco panel
that read as a tonal seam. Unify: same base green as the panel, and
fade both overlays in below the nav zone so the first ~140px is
flat #1E4A43 — panel and section merge into one surface, the gold
hairline the only separator. Mask ramp is gradual (no new seam). */
.boat-between {
background: var(--verde-bosco); /* was #1F3D38 — now matches the panel exactly */
}
.boat-between::before,
.boat-between::after {
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000000 140px);
mask-image: linear-gradient(to bottom, transparent 0, #000000 140px);
}
/* Mobile drawer (awards) — Bosco surface refinements. */
/* One continuous surface: while the drawer is open the nav band above
it is the same Bosco, so drop the gold hairline (and let the panel
merge into the drawer). The hairline returns the moment it closes. */
body.drawer-open .site-nav::before,
body.drawer-open.home-page .site-nav::before,
body.drawer-open.has-hero-nav .site-nav::before,
body.drawer-open.show-nav-brand .site-nav::before {
border-bottom-color: transparent !important;
box-shadow: none;
}
/* Active / current page link reads gold in the drawer. */
.mobile-menu__primary a[aria-current="page"],
.mobile-menu__primary a.is-current,
.mobile-menu__group-list a[aria-current="page"],
.mobile-menu__group-list a.is-current {
color: #B8924A; /* Oro Antico */
}
/* Focus ring on drawer links/icons: 1px Oro with offset, replacing the
UA blue ring. focus-visible only — pointer taps stay ringless. */
.mobile-menu a:focus-visible,
.mobile-menu button:focus-visible {
outline: 1px solid #B8924A;
outline-offset: 4px;
}
/* Reduced motion — instant panel toggle, no settle */
@media (prefers-reduced-motion: reduce) {
.site-nav::before { transition: none; transform: none; }
}
/* =================================================================
AWARDS — shared-element venue morph (home venue image → venue hero)
Chrome MPA View Transitions only. Safari/Firefox fall back to the
existing verde-transitions.js cross-fade (that file is untouched).
================================================================= */
.venue-row__image-link { display: block; }
/* The shared-element morph was tried and reverted — it read as jarring,
especially into the Darlinghurst video hero. Replaced with a CREAM
WASH: the old page fades out to a Panna field, a breath of solid
cream, then the new page fades in. One calm, branded beat instead of
a hard cut. Chrome MPA View Transitions only; Safari/Firefox keep the
untouched verde-transitions.js cross-fade. */
/* The transition overlay root carries the Panna field that shows
between the two page snapshots. */
::view-transition {
background-color: #EBDCC4; /* Panna */
}
/* Old page: 250ms fade-out (ease-in) reveals the cream… */
::view-transition-old(root) {
animation-name: fade-out;
animation-duration: 250ms;
animation-timing-function: cubic-bezier(0.4, 0, 0.7, 0.2);
animation-fill-mode: both;
}
/* …a ~120ms cream hold, then the new page fades in over 350ms. */
::view-transition-new(root) {
animation-name: fade-in;
animation-duration: 350ms;
animation-delay: 370ms;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
animation-fill-mode: both;
}
/* Reduced motion — instant cut, no wash, no delay */
@media (prefers-reduced-motion: reduce) {
::view-transition { background-color: transparent; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0s;
animation-delay: 0s;
}
}
/* =================================================================
PHASE 2B — Hero opening sequence: pre-animation hidden states.
Gated on html.hero-anim, added PRE-PAINT by an inline script
only when JS is on AND motion is allowed. No class (no-JS or
reduced-motion) -> final state shown instantly. opacity + scale + clip-path
are paint-only on pre-reserved boxes, so no FOUC and no CLS. GSAP
(initHeroOpening) removes the gate and plays the timeline.
================================================================= */
.hero-anim .home-hero__media { transform: scale(1.04); transform-origin: center; }
.hero-anim .home-hero__eyebrow,
.hero-anim .home-hero__locality { opacity: 0; transform: translateY(16px); }
/* Each letter's fill hidden pre-JS (the stroke draws first, then the fill
settles in behind it), so the wordmark is hidden before paint with zero
CLS (the SVG box is reserved). No JS / reduced-motion -> no gate -> the
filled gold wordmark shows instantly. */
.hero-anim .home-hero__logo-fill path { opacity: 0; }
.hero-anim .home-hero .scroll-cue { opacity: 0; }
.hero-anim .hero__bg { transform: scale(1.03); transform-origin: center; }
.hero-anim .hero--venue__eyebrow,
.hero-anim .hero--venue__heading,
.hero-anim .hero--venue__sub { opacity: 0; transform: translateY(16px); }
.hero-anim .hero .scroll-cue { opacity: 0; }
@media (max-width: 768px) {
.hero-anim .home-hero__media { transform: scale(1.02); }
.hero-anim .hero__bg { transform: scale(1.02); }
}
/* =================================================================
CONTACT HERO — editorial Italian-poster invitation.
Text-led left, illustrated woman bleeding off the right. Near-black
ground so the illustration's black background blends cleanly (and a
screen blend drops any residual block). Nav is the solid near-black
default (body.contact-page, no .has-hero-nav) with the centred gold
wordmark always visible.
================================================================= */
.contact-hero {
position: relative;
background: #1A1A1A; /* exact match to the illustration's ground */
color: var(--verde-cream, #E7E0CB);
overflow: hidden; /* clip the right-edge bleed → no h-scroll */
min-height: 100svh;
min-height: 100vh;
display: flex;
align-items: center;
}
.contact-hero__inner {
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding: clamp(132px, 18vh, 220px) clamp(24px, 5vw, 80px) clamp(72px, 10vh, 120px);
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: clamp(24px, 4vw, 72px);
}
/* Text sits slightly above vertical centre. */
.contact-hero__copy {
align-self: center;
transform: translateY(-5%);
max-width: 620px;
}
.contact-hero__eyebrow {
margin: 0 0 clamp(20px, 3vh, 34px);
font-family: var(--font-body);
font-size: clamp(11px, 0.8vw, 13px);
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--verde-gold, #B8924A);
}
.contact-hero__title {
margin: 0;
font-family: var(--font-heading);
font-weight: 400;
font-size: clamp(64px, 9vw, 132px);
line-height: 0.92;
letter-spacing: 0.005em;
text-transform: uppercase;
color: var(--verde-cream, #E7E0CB);
}
.contact-hero__lede {
margin: clamp(26px, 4vh, 44px) 0 0;
max-width: 32ch;
font-family: var(--font-body);
font-size: clamp(15px, 1.3vw, 20px);
line-height: 1.5;
color: rgba(231, 224, 203, 0.8);
}
/* Location line — sits below the CTA at a quiet footer weight, lower
visual priority than the button. */
.contact-hero__places {
margin: clamp(24px, 3.5vh, 36px) 0 0;
font-family: var(--font-body);
font-size: clamp(12px, 0.9vw, 14px);
font-weight: 400;
letter-spacing: 0.04em;
text-transform: none;
color: rgba(231, 224, 203, 0.45);
}
/* Keyline button — transparent fill, Oro Antico border + text; fills
gold on the established hover/touch state. Distinct, lighter weight
than the solid-gold nav "Book a Table". */
.contact-hero__cta {
display: inline-block;
margin-top: clamp(34px, 5vh, 52px);
padding: 16px 36px;
min-height: 44px;
border: 1px solid var(--verde-gold, #B8924A);
background: transparent;
color: var(--verde-gold, #B8924A);
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.25s ease, color 0.25s ease;
}
.contact-hero__cta:hover,
.contact-hero__cta:focus-visible {
background: var(--verde-gold, #B8924A);
color: #1a1a1a;
}
.contact-hero__cta:focus-visible {
outline: 2px solid var(--verde-gold, #B8924A);
outline-offset: 3px;
}
/* Illustration — large, floating, bleeding toward the right edge.
No box; screen blend removes the black ground over the near-black hero. */
.contact-hero__art {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
}
.contact-hero__img {
display: block;
width: 100%;
max-width: 700px;
height: auto;
margin-right: clamp(-96px, -3vw, -16px);
/* The illustration's #1A1A1A ground matches the hero background exactly,
so the rectangle edges disappear with no blend mode needed. */
}
/* Gentle fade/slide-in on load only. */
@media (prefers-reduced-motion: no-preference) {
.contact-hero__copy > * {
opacity: 0;
animation: contact-hero-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.contact-hero__title { animation-delay: 0.08s; }
.contact-hero__lede { animation-delay: 0.20s; }
.contact-hero__cta { animation-delay: 0.32s; }
.contact-hero__places { animation-delay: 0.42s; }
.contact-hero__img {
opacity: 0;
animation: contact-hero-fade 1s ease 0.2s forwards;
}
@keyframes contact-hero-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
@keyframes contact-hero-fade {
from { opacity: 0; }
to { opacity: 1; }
}
}
/* Tablet — keep side-by-side but ease the headline + image scale. */
@media (max-width: 1024px) {
.contact-hero__inner { gap: clamp(20px, 3vw, 40px); }
.contact-hero__img { max-width: 560px; margin-right: clamp(-48px, -2vw, 0px); }
}
/* Mobile — stack: text first, illustration below, CTA stays reachable. */
@media (max-width: 768px) {
.contact-hero { min-height: auto; }
.contact-hero__inner {
grid-template-columns: 1fr;
gap: clamp(28px, 6vh, 48px);
padding: clamp(112px, 20vh, 150px) clamp(22px, 6vw, 40px) clamp(56px, 9vh, 88px);
}
.contact-hero__copy { transform: none; max-width: none; order: 1; }
.contact-hero__art { order: 2; justify-content: center; }
.contact-hero__title { font-size: clamp(52px, 15vw, 88px); }
.contact-hero__img {
max-width: min(74vw, 380px);
margin-right: 0;
}
}
/* Contact page nav — near-black surface instead of the default Bosco
green (matches the green rule's specificity, wins by source order).
Applies whether scrolled or drawer-open. */
body.contact-page:not(.home-page) .site-nav::before {
background: #1A1A1A; /* exact match to the contact hero */
border-bottom: 1px solid rgba(184, 146, 74, 0.20); /* Oro @ 20% */
}
/* Graceful fallback if the illustration file is not present yet:
collapse to a single, left-aligned editorial text column. */
.contact-hero.is-art-missing .contact-hero__inner {
grid-template-columns: 1fr;
max-width: 1100px;
}
.contact-hero.is-art-missing .contact-hero__art { display: none; }
/* =================================================================
Legal / policy prose (Privacy Policy). 8px rhythm, Aboreto headings.
================================================================= */
.legal-prose {
max-width: 720px;
margin-inline: auto;
}
.legal-prose h2 {
font-family: var(--font-heading);
font-size: clamp(20px, 2vw, 28px);
font-weight: 400;
letter-spacing: 0.02em;
margin: 40px 0 8px;
color: var(--verde-ink, #1A1A1A);
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
margin: 0 0 16px;
color: rgba(26, 26, 26, 0.82);
}
.legal-prose a {
color: var(--verde-gold, #B8924A);
text-underline-offset: 2px;
}
.legal-prose ul {
margin: 0 0 16px;
padding-left: 22px;
}
.legal-prose li {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
margin: 0 0 8px;
color: rgba(26, 26, 26, 0.82);
}
.legal-prose__updated {
font-family: var(--font-body);
font-size: 14px;
color: rgba(26, 26, 26, 0.55);
margin: 0 0 28px;
}
/* =================================================================
Polish — press feedback on the primary CTAs (Emil: every pressable
element should feel responsive). Transitions standardised to specific
properties + a strong ease-out; a subtle scale on :active confirms
the press. Reduced-motion users keep the colour transition, no scale.
================================================================= */
.location__uber,
.dh-private-feature__btn,
.alex-intro__cta,
.dh-intro__cta,
.bookpanel__submit,
.bookpanel__gift,
.alex-cooking__btn {
transition: background 200ms var(--ease-ui),
color 200ms var(--ease-ui),
border-color 200ms var(--ease-ui),
transform 160ms var(--ease-out);
}
.location__uber:active,
.dh-private-feature__btn:active,
.alex-intro__cta:active,
.dh-intro__cta:active,
.bookpanel__submit:active,
.bookpanel__gift:active,
.alex-cooking__btn:active {
transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
.location__uber:active,
.dh-private-feature__btn:active,
.alex-intro__cta:active,
.dh-intro__cta:active,
.bookpanel__submit:active,
.bookpanel__gift:active,
.alex-cooking__btn:active {
transform: none;
}
}
/* =================================================================
Booking notice — "Alexandria bookings soon" interstitial shown
before the Darlinghurst booking overlay. Injected into the body by
initBookingOverlay so it exists on every page.
================================================================= */
.book-notice {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 300ms var(--ease-out), visibility 0s 300ms;
}
.book-notice::before {
content: "";
position: absolute;
inset: 0;
background: rgba(26, 26, 26, 0.82);
-webkit-backdrop-filter: saturate(180%) blur(8px);
backdrop-filter: saturate(180%) blur(8px);
}
.book-notice.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 300ms var(--ease-out), visibility 0s 0s;
}
.book-notice__card {
position: relative;
z-index: 1;
width: 100%;
max-width: 420px;
padding: clamp(32px, 5vw, 48px);
text-align: center;
background: #FAF7F2;
color: var(--verde-ink, #1A1A1A);
border: 1px solid rgba(26, 26, 26, 0.08);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
transform: translateY(16px) scale(0.98);
transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
}
.book-notice.is-open .book-notice__card { transform: none; }
.book-notice__eyebrow {
margin: 0 0 10px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--verde-gold, #B8924A);
}
.book-notice__title {
margin: 0 0 14px;
font-family: var(--font-heading);
font-size: clamp(26px, 4vw, 34px);
font-weight: 400;
line-height: 1.1;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--verde-ink, #1A1A1A);
}
.book-notice__body {
margin: 0 0 28px;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: #6b6259;
}
.book-notice__cta {
display: inline-block;
width: 100%;
min-height: 48px;
padding: 15px 24px;
border: 0;
border-radius: 2px;
cursor: pointer;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1A1A1A;
background: linear-gradient(to bottom, #CBAA6A, #B8924A 50%, #9D7B3A);
transition: filter 200ms ease, transform 120ms var(--ease-ui);
}
.book-notice__cta:hover { filter: brightness(1.05); }
.book-notice__cta:active { transform: scale(0.98); }
.book-notice__cta:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; }
.book-notice__close {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
display: grid;
place-items: center;
background: none;
border: 0;
cursor: pointer;
color: var(--verde-ink, #1A1A1A);
}
.book-notice__close svg { width: 20px; height: 20px; }
.book-notice__close line { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
body.notice-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.book-notice { transition: opacity 200ms linear, visibility 0s 200ms; }
.book-notice.is-open { transition: opacity 200ms linear, visibility 0s 0s; }
.book-notice__card { transition: none; transform: none; }
}