/* Casa Nueva - v0 proof
Note: Gotham is proprietary; add your own font files in /assets/fonts and wire via @font-face.
*/
/* ==========================================================================
Casa Nueva — style.css (refactor layer)
Strati consigliati: Tokens | Base | Layout | Components | Utilities | Media | Patch
Nota: l'ordine nel CSS conta. In questo file NON spostare blocchi a caso:
prima si rende leggibile, poi si consolida componente per componente.
========================================================================== */
/* --- Local fonts --- */
@font-face {
font-family: 'Gotham';
src: url('../assets/fonts/Gotham-Light.woff2') format('woff2'),
url('../assets/fonts/Gotham-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap; }
/* Promise responsiveness */
@media (max-width: 900px) {
/* Keep desktop proportions, just slightly tighter */
.promise { --promise-gap: 72px; }
.promise-copy { margin-top: 56px; }
.promise-divider { margin-top: var(--promise-gap); }
}
/* Mobile: move "THE RYTHM OF THE DAY" down inside the inner textured panel */
@media (max-width: 600px){
body.home .rhythm-frame .section-divider{
padding-top: 44px;
}
}
@media (max-width: 600px) {
.promise { --promise-gap: 64px; }
.promise-title { font-size: 22px; margin-top: clamp(14px, 2vh, 24px); }
.promise-copy p { font-size: 16px; letter-spacing: 0.08em; line-height: 1.7; }
.promise-divider { gap: 18px; margin-top: var(--promise-gap); }
.promise-divider-label { font-size: 14px; letter-spacing: 0.08em; }
}
@font-face {
font-family: 'Mrs Saint Delafield';
src: url('../assets/fonts/MrsSaintDelafield-Regular.woff2') format('woff2'),
url('../assets/fonts/MrsSaintDelafield-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap; }
@font-face {
font-family: 'Proxima Nova';
src: url('../assets/fonts/ProximaNova-Bold.woff2') format('woff2'),
url('../assets/fonts/ProximaNova-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap; }
:root {
--bg: #F7F3ED;
--ink: #344C57;
--hero-ink: #F7F3ED;
/* sampled from the Aperitivo photo sky */
--sky-ink: #032C3C;
--maxw: 1280px; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
/* Sticky footer (in-flow): footer sits at the bottom on short pages, and scrolls away on long pages */
body.has-footer {
min-height: 100vh;
display: flex;
flex-direction: column; }
/* Make the main area consume remaining space so the footer can sit at the very bottom on short pages */
body.has-footer .page-body,
body.has-footer .menu-choice {
flex: 1 0 auto; }
/* --- Menu&Bar page (scoped) --- */
body.menu-page {
/* Override hero overlay palette: menu page uses ink on paper texture */
color: #3E5F63;
background: #F7F3ED; }
body.menu-page .menu-page-bg {
position: fixed;
inset: 0;
background: url('../assets/Texturemenuandbarpage.png') center / cover no-repeat;
/* The paper texture should feel airy (like Home), not heavy */
opacity: 0.55;
z-index: 0; }
/* Keep the header in the exact same layout grid, but on a plain page */
body.menu-page .site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
color: #3E5F63; }
/* Disable hero-only text shadow so it stays crisp on light background */
body.menu-page .site-header .nav-link,
body.menu-page .site-header .logo,
body.menu-page .site-header .casa,
body.menu-page .site-header .nueva,
body.menu-page .site-header .tagline {
text-shadow: none; }
/* Active nav (Menu&Bar) */
body.menu-page .nav-link.is-active {
color: #C4BFB2;
opacity: 1; }
/* On the Menu&Bar page keep the center logo perfectly centered.
The home page applies small micro-position tweaks to .logo; we neutralize them here. */
body.menu-page .site-header .logo {
top: 0 !important;
left: 0 !important; }
/* Menu logo variant: shell + stacked text */
body.menu-page .logo--menu {
position: relative;
top: 0;
left: 0; }
body.menu-page .menu-shell {
position: relative;
/* Keep blend effects contained (but we rely on the ![]()
so it's optional) */
isolation: isolate;
/* Conchiglia: deve essere chiaramente percepibile sulla texture.
La reference la mostra più grande del testo, non "tiny". */
/* Desktop target: shell ≈ 1/8–1/9 of viewport width (your reference).
Clamp keeps it balanced across screens. */
width: clamp(180px, 16vw, 250px);
height: clamp(150px, 12vw, 190px);
margin-inline: auto;
display: grid;
place-items: center; }
/* Use the real PNG element so paths never go wrong and we avoid the "square" artifact */
body.menu-page .menu-shell-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
/* Visible on paper texture: present but still elegant */
opacity: 0.22;
mix-blend-mode: normal;
filter: contrast(1.08) brightness(1.02) drop-shadow(0 2px 10px rgba(62,95,99,0.10));
pointer-events: none;
z-index: 0; }
body.menu-page .menu-shell-text {
position: absolute;
left: 50%;
/* A tiny nudge down matches the visual center of the shell in your reference */
top: 52%;
transform: translate(-50%, -50%);
text-align: center;
line-height: 1.05;
z-index: 1; }
body.menu-page .menu-casa {
font-family: 'Gotham Light','Gotham','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-weight: 300;
font-size: 10px;
letter-spacing: 0.08em; }
body.menu-page .menu-nueva {
font-family: 'Cormorant Upright', 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 15.2px;
letter-spacing: 0.02em;
margin-top: 2px; }
body.menu-page .menu-ibiza {
font-family: 'Gotham Light','Gotham','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-weight: 300;
font-size: 8.2px;
letter-spacing: 0.36em;
margin-top: 6px; }
/* Home page: use the same shell logo as Menu&Bar, but with the hero colour */
/* NOTE: scoped to .hero so it won't depend on body classes and won't affect other pages. */
.hero .logo--home { position: relative; align-self: flex-start; }
.hero .logo--home .menu-shell {
position: relative;
isolation: isolate;
/* Larger on Home, same proportions */
width: clamp(220px, 16vw, 285px);
height: clamp(220px, 16vw, 285px);
/* Remove the shell background used elsewhere */
background: transparent;
background-image: none;
margin-inline: auto;
display: grid;
place-items: center; }
/* Home header: keep the logo aligned with the nav items (no vertical offset) */
.hero .site-header .logo {
top: 0; }
.hero .logo--home .menu-shell-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0.38;
mix-blend-mode: normal;
filter: contrast(1.06) brightness(1.02) drop-shadow(0 2px 10px rgba(0,0,0,0.12));
pointer-events: none;
z-index: 0; }
/* No shell image on Home (text-only logo) */
.hero .logo--home .menu-shell-img { display: none; }
.hero .logo--home .menu-shell-text {
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%, -50%);
text-align: center;
line-height: 1.05;
color: #F7F3ED;
text-shadow: 0 1px 8px rgba(0,0,0,0.25);
z-index: 1; }
.hero .logo--home .menu-casa {
font-family: 'Gotham Light','Gotham','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-weight: 300;
font-size: 16px;
letter-spacing: 0.18em; }
.hero .logo--home .menu-nueva {
font-family: 'Cormorant Upright', 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 34px;
letter-spacing: 0.06em;
margin-top: 2px; }
.hero .logo--home .menu-ibiza {
font-family: 'Gotham Light','Gotham','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-weight: 300;
font-size: 14px;
letter-spacing: 0.55em;
margin-top: 6px;
/* Avoid shadow making it feel heavier */
text-shadow: none;
opacity: 0.88; }
/* Center choice links */
body.menu-page .menu-choice {
/* Must stay in normal flow so the footer can sit at the very bottom */
position: relative;
transform: none;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Cormorant Unicase', 'Cormorant Garamond', serif;
font-weight: 500;
font-size: 22px;
letter-spacing: 0.02em; }
/* Menu page layout: keep links centered-ish, and footer anchored at bottom */
body.menu-page {
display: flex;
flex-direction: column;
min-height: 100vh; }
body.menu-page .page-body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
/* Header is positioned like the landing; give breathing room so links sit lower */
padding-top: clamp(140px, 22vh, 220px);
padding-bottom: clamp(28px, 6vh, 56px);
min-height: 0; }
body.menu-page .menu-choice-link {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px; }
body.menu-page .menu-choice-link:hover { opacity: 0.68; }
@media (max-width: 600px) {
/* Mobile: keep it legible (your reference shows the shell clearly) */
body.menu-page .menu-shell { width: clamp(220px, 62vw, 320px); height: clamp(220px, 62vw, 320px); }
body.menu-page .menu-shell-img { opacity: 0.22; }
body.menu-page .menu-choice { font-size: 18px; }
body.menu-page .page-body { padding-top: clamp(120px, 18vh, 190px); }
}
img { max-width: 100%; display:block; }
a { color: inherit; text-decoration: none; }
/* --- Fonts (Google for Cormorant) --- */
/* Loaded via in head. */
/* --- Layout helpers --- */
.container {
width: min(var(--maxw), 100%);
margin-inline: auto;
padding-inline: clamp(16px, 4vw, 64px); }
/* --- Hero --- */
.hero {
/* Outer sand frame: same padding top/left/right (and bottom for balance). */
--outer-pad: clamp(16px, 2.4vw, 36px);
/* Inner padding: distance between water and pink (equal on all sides). */
--inner-pad: clamp(44px, 5vw, 120px);
padding: var(--outer-pad); }
/* Water background lives INSIDE the sand padding (so the water has a visible "frame"). */
.hero-water {
background: url('../assets/img/sandpattern-desktop.png') center / cover no-repeat;
padding: var(--inner-pad);
/* Fill the screen on normal devices; capped so it doesn't get silly on huge displays. */
/* Taller frame = less crop + more "full screen" feel on normal displays */
height: clamp(720px, 94vh, 1100px); }
/* Pink wall image area, centered inside the water with equal margins. */
.hero-pink {
position: relative;
width: 100%;
height: 100%;
overflow: hidden; }
.hero-pink::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: url('../assets/img/grain.png') 0 0 / 180px 180px repeat;
opacity: 0.55; /* stronger film grain */
mix-blend-mode: soft-light;
pointer-events: none; }
.hero-img {
z-index: 0;
opacity: 0.96;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Keep the arch centered; crop happens a bit top+bottom as needed */
object-position: center 60%; }
/* Header overlay sitting on top of the hero image */
.site-header {
color: var(--hero-ink);
z-index: 2;
position: absolute;
top: 0;
left: 0;
right: 0;
/* Push the logo/navigation clearly above the arch (no overlap). */
/* Lift it a bit so it sits higher, but still not glued to the top edge. */
/* Move the whole header (nav + centered logo) closer to the top */
padding-top: clamp(6px, 1.2vw, 22px);
padding-inline: clamp(36px, 4.4vw, 86px);
pointer-events: none; /* so the visual aligns even if you click through; links re-enabled below */
}
/* Hero intro copy + CTA over the arch */
.hero-overlay {
position: absolute;
left: 50%;
/* Lowered so the block sits comfortably within the arch like your reference */
top: 71%;
/* Slightly lower the whole copy block so it sits just under the arch */
/* Fine-tune vertical placement under the arch */
/* Copy block is shorter now (no all-caps paragraph), so push it down slightly */
transform: translate(-50%, -50%) translateY(70px);
z-index: 2;
width: min(520px, 86%);
text-align: center;
color: var(--hero-ink);
pointer-events: none; /* keep image area inert; CTA re-enables */
isolation: isolate; }
/* Subtle local veil behind the hero copy/CTA so it reads without changing the vibe */
.hero-overlay::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: min(560px, 110%);
height: min(360px, 140%);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
background: radial-gradient(closest-side, rgba(247, 243, 237, 0.12), rgba(247, 243, 237, 0)); }
/* Layered legibility treatment (helper copy + subtle shadow on main copy) */
.legibility-layered {
position: relative;
z-index: 1; }
.legibility-layered .legibility-helper {
position: absolute;
inset: 0;
transform: translate(1px, 1px);
color: rgba(47, 73, 80, 0.38);
-webkit-text-stroke: 1px rgba(47, 73, 80, 0.30);
text-stroke: 1px rgba(47, 73, 80, 0.30);
pointer-events: none;
z-index: 0; }
.legibility-layered .legibility-main {
position: relative;
z-index: 1;
text-shadow: 0 1px 10px rgba(47, 73, 80, 0.18); }
/* Mobile: slightly smaller + a bit lower for harmony */
@media (max-width: 600px) {
.hero-overlay { top: 62%; width: min(92%, 420px); }
/* Mobile tuning: slightly smaller + tighter, and slimmer weight */
.hero-script {
font-size: 18px;
line-height: 1.08;
/* Nudge up slightly on mobile without shifting the whole overlay */
margin: -8px 0 8px 0; }
.hero-copy {
font-size: 11px;
line-height: 1.38;
letter-spacing: 0.14em;
font-weight: 600;
max-width: 300px;
margin: 0 0 16px 0; }
.hero-cta {
margin-top: 14px;
padding: 10px 18px;
font-size: 11px;
letter-spacing: 0.22em;
font-weight: 400;
font-family: var(--font-gotham);
text-shadow: 0 1px 10px rgba(47, 73, 80, 0.18);
filter: drop-shadow(0 1px 10px rgba(47, 73, 80, 0.14)); }
}
/* Text styles (NO borders — only the button has a border) */
.hero-script {
display: block;
font-family: 'Mrs Saint Delafield', cursive;
font-weight: 400;
/* Slightly larger, to replace the removed all-caps paragraph and keep balance */
font-size: clamp(20px, 1.9vw, 26px);
line-height: 1.08;
letter-spacing: 0.02em;
margin: 0 0 16px 0;
text-shadow: none; }
.hero-copy {
display: block;
font-family: 'Proxima Nova', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
/* Toned down vs Bold */
font-weight: 600;
font-size: 12px;
line-height: 1.41;
letter-spacing: 0.15em; /* 15% */
text-transform: uppercase;
margin: 0 0 16px 0;
text-shadow: none; }
/* Phone: Proxima sizing/weight handled in the hero-overlay mobile block above. */
/* CTA button */
.hero-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 236px;
height: 34px;
padding: 0 16px;
border: 1px solid var(--hero-ink);
border-radius: 1px;
color: var(--hero-ink);
text-decoration: none;
font-family: var(--font-gotham);
font-weight: 400;
font-size: 11px;
line-height: 1;
letter-spacing: 0.22em;
text-transform: uppercase;
background: transparent;
pointer-events: auto;
transition: opacity 160ms ease;
/* soft, inky lift for readability over the photo */
text-shadow: 0 1px 10px rgba(47, 73, 80, 0.18);
filter: drop-shadow(0 1px 10px rgba(47, 73, 80, 0.14)); }
.hero-cta:hover { opacity: 0.78;
text-shadow: 0 1px 10px rgba(47, 73, 80, 0.18);
filter: drop-shadow(0 1px 10px rgba(47, 73, 80, 0.14)); }
.hero-cta:active { opacity: 0.68; }
/* Subtle text shadow for depth (very light). */
.site-header .nav-link,
.site-header .logo,
.site-header .casa,
.site-header .nueva,
.site-header .tagline {
text-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.header-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: start;
gap: clamp(56px, 8vw, 150px);
width: min(100%, clamp(860px, 86vw, 1080px));
margin-inline: auto; }
@media (min-width: 1280px) {
.header-grid {
width: min(100%, clamp(720px, 74vw, 920px)); }
}
.nav-left,
.nav-right {
display: flex;
gap: clamp(24px, 3.5vw, 56px);
pointer-events: auto; }
.nav-left { justify-content: flex-start; }
.nav-right { justify-content: flex-end; }
.nav-link {
font-family: 'Cormorant Unicase', 'Cormorant Garamond', serif;
font-weight: 500; /* medium */
font-size: 24px;
letter-spacing: 0.02em;
line-height: 1;
text-decoration: none;
transition: opacity 140ms ease; }
/* Desktop: on hover the text becomes lighter (lower opacity), no underline */
.nav-link:hover { opacity: 0.6; }
/* Mobile: brief lighter flash on tap, then return to normal */
.nav-link.tap-flash { opacity: 0.6; }
/* Logo should behave like a link: hover/tap lowers opacity, no underline. */
.logo { pointer-events: auto; transition: opacity 140ms ease; }
.logo:hover { opacity: 0.6; }
.logo.tap-flash { opacity: 0.6; }
/* Keep keyboard navigation visible */
.nav-link:focus-visible {
outline: 1px solid currentColor;
outline-offset: 6px;
border-radius: 6px; }
.logo {
text-align: center;
pointer-events: auto; }
/* --- Logo micro-positioning (desktop only): avoid overlapping the arch texture --- */
@media (min-width: 601px) {
.site-header .logo {
position: relative;
top: -72px !important;
left: 7px;
transform: none !important;
margin-top: 0 !important; }
}
/* --- Logo micro-positioning (mobile): lower slightly as requested --- */
@media (max-width: 600px) {
.site-header .logo {
position: relative;
top: 10px; }
}
.logo .casa {
font-family: 'Gotham Light','Gotham','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-weight: 300; /* light */
font-size: 20px;
letter-spacing: 0.08em;
line-height: 1.1; }
.logo .nueva {
font-family: 'Cormorant Upright', serif;
font-weight: 400;
font-size: 32px;
letter-spacing: 0.04em;
line-height: 1.05;
margin-top: 2px; }
.logo .tagline {
font-family: 'Cormorant Upright', serif;
font-weight: 400;
font-size: 16px;
letter-spacing: 0.02em;
margin-top: 6px; }
/* --- Footer (shared) --- */
.footer-wrap {
width: 100%;
/* Default: no background so textured pages (Menu&Bar) keep their paper */
background: transparent;
padding: 22px 0; /* balanced height */
position: relative;
z-index: 2; }
/* Home: sand band behind footer (as in your reference) */
.hero .footer-wrap {
background: var(--bg); }
.site-footer {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 0; /* padding handled by .footer-wrap */
color: #3E5F63;
margin-top: auto; /* pushes footer to the bottom on short pages */
}
.site-footer .footer-line {
flex: 1;
height: 1px;
background: currentColor;
opacity: 0.55; }
.site-footer .footer-text {
font-family: 'Cormorant Upright', serif;
font-weight: 400;
font-size: 9.8px;
letter-spacing: 0.02em;
padding: 0 34px; /* gap around the centered text */
white-space: nowrap; }
@media (max-width: 600px) {
.footer-wrap { padding: 18px 0; }
.site-footer .footer-text { padding: 0 18px; }
}
/* --- Below hero placeholder area (cream block like your Figma) --- */
.page-body {
padding-top: clamp(14px, 2.2vw, 24px);
padding-bottom: clamp(30px, 5vw, 60px);
min-height: 40vh; }
.page-title {
font-family: 'Cormorant Upright', serif;
font-size: clamp(28px, 3.2vw, 44px);
letter-spacing: 0.02em;
margin: 0 0 18px 0; }
.page-text {
font-family: 'Cormorant Upright', serif;
font-size: 18px;
line-height: 1.6;
max-width: 62ch;
margin: 0; }
/* Our Promise section */
.promise {
/* Keep it airy, but avoid huge empty space */
--promise-gap: clamp(56px, 6vw, 72px);
padding: var(--promise-gap) 0 0; }
.promise-inner {
max-width: 1040px;
margin: 0 auto;
/* Reduce excessive vertical emptiness while keeping the airy feel */
min-height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center; }
.promise-title {
font-family: 'Cormorant Garamond', serif;
font-size: 24px;
font-weight: 400;
color: #3E5F63;
letter-spacing: 0.02em;
margin: 0; }
.promise-copy {
max-width: 620px;
margin-top: 8px; }
.promise-frame {
position: relative;
width: min(1120px, 92vw);
margin: 0 auto var(--promise-gap); }
.promise-frame-art {
width: 100%;
height: auto;
display: block; }
.promise-frame-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: clamp(38px, 5.5vw, 88px) clamp(40px, 6vw, 112px); }
.promise-frame-content .promise-title {
margin: 0 0 18px; }
.promise-frame-content .promise-copy {
margin-top: 0; }
.promise-frame-content .promise-copy p + p {
margin-top: 22px; }
.promise-copy p {
font-family: 'Gotham-Light', sans-serif;
font-size: 18px;
font-style: italic;
color: #7B7871;
line-height: 1.85;
letter-spacing: 0.08em;
margin: 0; }
.promise-divider {
width: 100%;
display: flex;
align-items: center;
gap: 34px;
margin-top: var(--promise-gap); }
.promise-divider .line {
height: 1px;
background: #C4BFB2;
flex: 1;
min-width: 120px; }
.promise-divider .label {
font-family: 'Cormorant SC', serif;
font-weight: 700;
font-size: 18px;
color: #3E5F63;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap; }
/* The page uses this structure in HTML: keep it identical to .promise-divider */
.section-divider {
/* Let the divider breathe across the whole layout (not limited by promise-inner max-width) */
width: min(var(--maxw), calc(100vw - 2 * clamp(16px, 4vw, 64px)));
/* Keep perfectly centered (no translate hacks). */
margin: 0 auto 0;
display: flex;
align-items: center;
gap: 36px;
justify-content: center; }
.section-divider .divider-line {
height: 1px;
background: #C4BFB2;
flex: 1;
min-width: 220px; }
.section-divider .divider-title {
font-family: 'Cormorant SC', serif;
font-weight: 700;
font-size: 18px;
color: #3E5F63;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap; }
.cta {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 22px;
padding: 14px 18px;
border: 1px solid rgba(52, 76, 87, .35);
border-radius: 999px;
font-family: 'Cormorant Unicase', serif;
font-weight: 500;
letter-spacing: 0.02em; }
.cta:hover {
border-color: rgba(52, 76, 87, .7); }
/* --- Responsive image swap: we use different crops for desktop vs mobile --- */
.hero-img--desktop { display:block; }
.hero-img--mobile { display:none; }
@media (max-width: 1279px) {
/* Mobile/tablet: keep the hero tall enough so the window stays centered and not overly cropped. */
.hero-water { height: min(92vh, 880px); background: url('../assets/img/sandpattern-mobile.jpg') center / cover no-repeat; }
/* Slightly tighter padding on smaller screens. */
.hero {
--outer-pad: clamp(14px, 4vw, 24px);
--inner-pad: clamp(44px, 5vw, 120px); }
.nav-link { font-size: 12px; letter-spacing: 0.03em; }
.logo .casa { font-size: 16px; }
.logo .nueva { font-size: 28px; }
.logo .tagline { font-size: 14px; }
.header-grid { gap: 10px; }
.nav-left, .nav-right { gap: 14px; }
.hero-img--desktop { display:none; }
.hero-img--mobile { display:block; }
}
/* Phone-specific header tuning: keep desktop/tablet perfect, but ensure all nav items fit on iPhone widths. */
@media (max-width: 600px) {
.site-header {
/* less side padding so the right nav doesn't get clipped by the hero frame */
padding-inline: calc(12px + env(safe-area-inset-left)) calc(12px + env(safe-area-inset-right));
/* slightly lift the whole block to gain horizontal breathing room */
padding-top: clamp(18px, 5vw, 28px); }
.header-grid {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"navl navr"
"logo logo";
gap: 8px; }
.nav-left { grid-area: navl; }
.nav-right { grid-area: navr; }
.logo { grid-area: logo; }
.nav-left, .nav-right {
min-width: 0;
gap: 10px;
flex-wrap: wrap;
row-gap: 6px; }
.nav-link {
font-size: 12px;
letter-spacing: 0.03em;
white-space: nowrap; }
/* Give the logo a tiny shrink to avoid crowding on small devices */
.logo .casa { font-size: 15px; }
.logo .nueva { font-size: 26px; }
.logo .tagline { font-size: 13px; }
}
@media (max-width: 420px) {
.nav-left, .nav-right { gap: 10px; }
}
@media (min-width: 768px) {
.hero-cta { position: relative; left: 3px;
text-shadow: 0 1px 10px rgba(47, 73, 80, 0.18);
filter: drop-shadow(0 1px 10px rgba(47, 73, 80, 0.14)); }
}
/* --- Mobile fixes (override base rules) --- */
@media (max-width: 600px) {
/* Move the overlay block up and make it lighter/smaller for small screens */
.hero-overlay {
top: 58%;
width: min(520px, 90%); }
.hero-script {
font-size: 16px;
margin: 0 0 6px;
opacity: 0.92; }
.hero-copy {
/* Mobile: keep EXACT 3-line layout (no extra wrapping) */
font-size: clamp(7px, 2.2vw, 9px);
line-height: 1.18;
letter-spacing: clamp(0.06em, 0.2vw, 0.09em);
max-width: 94%;
margin-inline: auto; }
.hero-cta {
font-size: 10px;
padding: 10px 18px;
min-width: 0;
width: min(240px, 72vw);
height: auto;
/* Bring CTA slightly closer to the arch on mobile */
margin: 12px auto 0;
transform: translateY(-8px);
display: flex;
justify-content: center;
left: 0;
text-shadow: 0 1px 10px rgba(47, 73, 80, 0.18);
filter: drop-shadow(0 1px 10px rgba(47, 73, 80, 0.14)); }
.hero-cta span {
letter-spacing: 0.14em; }
/* Divider lines around "THE RHYTHM OF THE DAY" on small screens */
.section-divider {
gap: 18px; }
.section-divider .divider-line {
min-width: 60px; }
.section-divider .divider-title {
font-size: 14px;
letter-spacing: 0.08em; }
}
.rhythm-grid {display:flex;gap: 24px;margin-top: 40px;justify-content:center}
.rhythm-item {position:relative;flex: 1}
.rhythm-img {width: 100%;display:block;filter:brightness(0.88)}
.rhythm-label {position:absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);color: #fff;letter-spacing: 0.05em}
.section-divider {
display:flex;
align-items:center;
justify-content:center;
gap: 24px;
width: 100%; }
.section-divider .divider-line {
flex: 1;
height: 1px;
background: #b5a98f; }
.rhythm-label {
font-family:'MrsSaintDelafield-Regular' !important;
font-size: 36px !important;
letter-spacing: 0.04em; }
.promise-copy {
max-width: 820px;
margin: 0 auto; }
/* Proportion tuning to match reference */
.promise {
padding-top: 140px;
padding-bottom: 120px; }
.promise-title {
margin-bottom: 32px; }
.promise-copy {
margin-top: 28px;
margin-bottom: 110px; }
.section-divider {
max-width: 960px;
margin: 0 auto 80px auto; }
.section-divider .divider-line {
opacity: 0.7; }
/* --- Promise typography (match reference) --- */
.promise-title {
font-family: 'Cormorant Garamond', serif;
font-size: 24px;
font-weight: 400;
text-align: center;
margin: 0 0 34px 0;
color: #2f4b55; }
.promise-copy {
max-width: 900px;
margin: 0 auto; }
.promise-text {
font-family: 'Gotham', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
font-size: 18px;
font-style: italic;
font-weight: 300;
letter-spacing: 0.09em;
line-height: 1.85;
text-align: center;
color: rgba(40,40,40,0.55);
margin: 0; }
.promise-gap {
display: block;
height: 18px; }
.br-desktop { display: inline; }
@media (max-width: 720px) {
.br-desktop { display: none; }
.promise-gap { height: 10px; }
.promise-text { font-size: 16px; letter-spacing: 0.07em; line-height: 1.75; }
}
/* --- Divider typography + symmetry --- */
.section-divider {
display:flex;
align-items:center;
justify-content:center;
gap: 22px;
width: 100%;
max-width: 1040px;
margin: 95px auto 0 auto; }
.section-divider .divider-line {
flex: 1;
height: 1px;
background: rgba(181,169,143,0.70); }
.section-divider .divider-text {
font-family: 'Cormorant SC', serif;
font-size: 20px;
letter-spacing: 0.12em;
color: #2f4b55;
white-space: nowrap; }
/* --- Rhythm grid crop + exposure --- */
.rhythm-grid {
display:flex;
gap: 60px;
margin-top: 70px;
justify-content:center; }
.rhythm-item {
position: relative;
width: min(340px, 28vw);
aspect-ratio: 1 / 1;
overflow: hidden; }
.rhythm-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.78) contrast(1.05) saturate(0.98); }
.rhythm-label {
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
font-family:'MrsSaintDelafield-Regular', cursive;
font-size: 36px;
letter-spacing: 0.04em;
color: #f6f2ea;
text-shadow: 0 2px 10px rgba(0,0,0,0.20); }
@media (max-width: 900px) {
.rhythm-grid { gap: 24px; }
.rhythm-item { width: min(320px, 30vw); }
}
@media (max-width: 720px) {
.rhythm-grid { flex-direction: column; gap: 22px; margin-top: 42px; }
.rhythm-item { width: 100%; max-width: 380px; margin: 0 auto; }
}
/* --- Premium reveal (on load + on scroll) --- */
.reveal {
opacity: 0;
transform: translateY(14px);
filter: blur(6px);
transition: opacity 1050ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1050ms cubic-bezier(0.22, 1, 0.36, 1),
filter 1050ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform, filter; }
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; filter: none; transition: none; }
}
/* =========================================================
FINAL OVERRIDES (premium symmetry + predictable spacing)
These rules intentionally override earlier experimental blocks.
========================================================= */
.promise-inner {
padding-top: 120px;
padding-bottom: 90px; }
.promise-title {
margin-top: 0;
margin-bottom: 30px; }
.promise-copy {
max-width: 860px;
margin: 0 auto;
margin-bottom: 85px; }
.section-divider {
max-width: 1040px;
margin: 0 auto;
margin-top: 0;
margin-bottom: 78px; }
.section-divider .divider-line {
flex: 1 1 auto;
height: 1px;
background: rgba(181,169,143,0.70); }
.section-divider .divider-text {
font-family: 'Cormorant SC', serif;
font-size: 20px;
letter-spacing: 0.12em;
white-space: nowrap; }
/* Rhythm grid centered (no flex: 1 stretching) */
.rhythm-grid {
display: flex;
justify-content: center;
align-items: stretch;
gap: 64px;
width: 100%;
max-width: 1040px;
margin: 0 auto;
padding: 0 0 120px 0; }
.rhythm-item {
flex: 0 0 auto;
width: 320px;
aspect-ratio: 1 / 1;
overflow: hidden;
position: relative; }
.rhythm-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.78) contrast(1.05) saturate(0.98); }
/* Use the project's real font-face name */
.rhythm-label {
font-family: 'Mrs Saint Delafield', cursive !important;
font-size: 36px;
letter-spacing: 0.04em;
color: #f6f2ea; }
@media (max-width: 1100px) {
.rhythm-grid { gap: 40px; max-width: 980px; }
.rhythm-item { width: min(300px, 28vw); }
}
@media (max-width: 720px) {
.promise-inner { padding-top: 90px; padding-bottom: 70px; }
.promise-copy { margin-bottom: 60px; }
.section-divider { margin-bottom: 56px; }
.rhythm-grid { flex-direction: column; gap: 22px; padding-bottom: 90px; }
.rhythm-item { width: 100%; max-width: 380px; margin: 0 auto; }
}
/* --- HERO NAV SYMMETRY FIX (true optical centering) --- */
.header-grid { width: min(100%, clamp(860px, 86vw, 1080px)); margin-inline: auto; }
.nav-left { justify-self: start; justify-content: flex-start; width: 100%; }
.nav-right { justify-self: end; justify-content: flex-end; width: 100%; }
/* keep the center logo truly centered even with unequal nav widths */
.logo { justify-self: center; }
/* =========================
PREMIUM FIX PACK (v4)
========================= */
@font-face {
font-family:'Mrs Saint Delafield';
src:url('../assets/fonts/MrsSaintDelafield-Regular.woff') format('woff');
font-weight: 400;
font-style:normal; }
/* promise: equal top & bottom breathing, but not oversized */
:root { --promise-gap: 72px; }
.promise-inner {
width: 100%;
display:flex;
flex-direction:column;
align-items:center;
padding-top: var(--promise-gap);
padding-bottom: 0; }
.promise-title {
font-family:'Cormorant Garamond', serif;
font-size: 24px;
font-weight: 400;
color: #2f4b55;
margin: 0 0 34px 0;
text-align:center; }
.promise-copy {
margin: 0 auto var(--promise-gap) auto;
max-width: 860px; }
.promise-text {
font-family:'Gotham', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
font-size: 18px;
font-style:italic;
font-weight: 300;
letter-spacing: 0.09em;
line-height: 1.85;
text-align:center;
color: rgba(40,40,40,0.55);
margin: 0; }
.promise-text--p1 { margin-bottom: 18px; }
.br-desktop { display:inline; }
@media (max-width: 720px) {
:root { --promise-gap: 56px; }
.br-desktop { display:none; }
/* Mobile typography tuned to match the reference (letter spacing ~167, line spacing 1.4) */
.promise-text { font-size: 16px; letter-spacing: 0.167em; line-height: 1.4; }
.promise-text--p1 { margin-bottom: 12px; }
}
/* Divider symmetry */
.section-divider {
display:flex;
align-items:center;
justify-content:center;
gap: 22px;
width: 100%;
max-width: 1040px;
margin: 0 auto 64px auto; }
.section-divider .divider-line {
flex: 1 1 auto;
height: 1px;
background: rgba(181,169,143,0.70); }
.section-divider .divider-text {
font-family:'Cormorant SC', serif;
font-size: 20px;
letter-spacing: 0.12em;
color: #2f4b55;
white-space:nowrap; }
/* Rhythm */
.rhythm-grid {
display:flex;
justify-content:center;
gap: 64px;
width: 100%;
max-width: 1040px;
margin: 0 auto;
padding: 0 0 110px 0; }
.rhythm-item {
width: 320px;
aspect-ratio: 1 / 1;
overflow:hidden;
position:relative; }
.rhythm-img {
width: 100%;
height: 100%;
object-fit:cover;
display:block;
filter: brightness(0.78) contrast(1.05) saturate(0.98); }
.rhythm-label {
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
font-family:'Mrs Saint Delafield', cursive;
font-size: 36px;
letter-spacing: 0.04em;
color: #f6f2ea;
text-shadow: 0 2px 10px rgba(0,0,0,0.20);
text-align:center; }
.rhythm-label-line { display:inline-block; white-space:nowrap; }
@media (max-width: 720px) {
.rhythm-grid { flex-direction:column; gap: 22px; padding-bottom: 90px; }
.rhythm-item { width: 100%; max-width: 380px; margin: 0 auto; }
}
/* Hero button hover (keep premium) */
.hero-cta {
transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, transform 300ms ease; }
.hero-cta:hover {
background-color: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.55);
transform: translateY(-1px); }
/* Reveal: slightly longer + luxe easing */
.reveal {
opacity: 0;
transform: translateY(14px);
filter: blur(6px);
transition: opacity 1450ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1450ms cubic-bezier(0.22, 1, 0.36, 1),
filter 1450ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform, filter; }
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform:none; filter:none; transition:none; }
}
/* --- v4.1 tune: promise + divider rhythm --- */
.promise-inner {
padding-top: 52px !important; /* less above title */
}
.promise-copy {
margin-bottom: 92px !important; /* more before divider */
}
.section-divider {
margin-bottom: 68px !important; }
/* ensure divider is perfectly centered with two symmetrical lines */
.section-divider {
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap: 28px !important; }
.section-divider .divider-line {
flex: 1 1 0 !important;
height: 1px !important;
background: rgba(181,169,143,0.70) !important; }
.section-divider .divider-text {
text-align:center !important; }
@media (max-width: 720px) {
.promise-inner { padding-top: 46px !important; }
.promise-copy { margin-bottom: 72px !important; }
.section-divider { margin-bottom: 56px !important; gap: 18px !important; }
}
/* --- v4.1 tune: hero CTA smaller --- */
.hero-cta {
font-size: 12px !important;
letter-spacing: 0.14em !important;
padding: 10px 22px !important;
min-width: 0 !important; }
/* --- v4.2: promise vertical symmetry + premium rhythm --- */
:root {
--promise-breath: clamp(44px, 6vh, 72px);
--promise-divider-gap: clamp(44px, 5.5vh, 74px); /* space between copy and divider (tighter) */
}
/* Hard reset any accidental huge spacing coming from earlier patches */
.promise-inner {
padding-top: calc(var(--promise-breath) + 16px) !important; /* space between sand texture and title */
padding-bottom: 0 !important;
margin-top: 0 !important; }
.promise-title { margin-top: 0 !important; }
/* This is the key: match the top breath with the space below copy */
.promise-copy {
margin-bottom: var(--promise-divider-gap) !important; }
/* Divider spacing stays calm */
.section-divider {
margin-top: 0 !important;
margin-bottom: clamp(56px, 7vh, 76px) !important; }
/* If the section wrapper itself has padding, neutralize it */
.promise { padding-top: 0 !important; padding-bottom: 0 !important; }
/* --- v4.2: long rhythm label (single line) --- */
.rhythm-label--long {
font-size: 34px !important;
letter-spacing: 0.03em !important;
white-space: nowrap !important; }
@media (max-width: 720px) {
.rhythm-label--long { font-size: 32px !important; }
}
/* --- v4.3: restore landing (hero) text shadows for legibility --- */
.site-header, .site-header * {
text-shadow: 0 2px 10px rgba(0,0,0,0.22); }
.hero-script, .hero-copy {
text-shadow: 0 2px 14px rgba(0,0,0,0.26); }
.hero-cta {
text-shadow: 0 2px 10px rgba(0,0,0,0.18); }
/* keep hover crisp */
.hero-cta:hover { text-shadow: 0 2px 12px rgba(0,0,0,0.20); }
/* --- v4.4: rhythm labels restore (only size tuning) --- */
.rhythm-label {
font-family:'Mrs Saint Delafield', cursive !important;
font-size: 36px !important;
font-weight: 400 !important;
white-space:normal; }
.rhythm-label--long {
font-size: 34px !important; /* 1–2px smaller as requested */
white-space:nowrap !important; }
/* --- v4.4: stronger landing text shadow (legibility) --- */
:root {
--hero-shadow-color: rgba(39, 32, 26, 0.78); /* warm deep shadow */
}
.hero,
.hero * {
text-shadow: 0 2px 0 rgba(0,0,0,0.12),
0 6px 22px var(--hero-shadow-color),
0 1px 12px rgba(0,0,0,0.35); }
/* keep button crisp */
.hero-cta { text-shadow: 0 6px 18px rgba(39,32,26,0.55); }
/* --- v4.6: promise typography (2 paragraphs, tighter leading, clearer gap) --- */
.promise-copy {
max-width: 820px;
margin: 0 auto; }
/* small centered 'n' under hero button */
.hero-n {
margin-top: 10px;
text-align: center;
font-family: "Cormorant SC", serif;
font-size: 18px;
letter-spacing: 0.02em;
color: #3E5F63;
opacity: 0.95;
line-height: 1;
pointer-events: none; }
.promise-text {
line-height: 1.4 !important; /* tighter within each paragraph */
}
.promise-text--p2 {
margin-top: clamp(18px, 2.2vh, 30px) !important; /* clearer paragraph separation */
}
/* --- v4.9: tune divider breathing + reduce space under rhythm photos --- */
/* More breathing room around THE RYTHM OF THE DAY (adds ~10–15px vs v4.7) */
.section-divider {
padding-top: clamp(30px, 4.4vh, 45px) !important;
padding-bottom: clamp(34px, 5.0vh, 52px) !important; }
/* Reduce bottom whitespace under the 3 rhythm photos (≈ 2/3 less than section default) */
.promise {
padding-bottom: clamp(10px, 1.2vh, 16px) !important; }
/* Safety: if any theme margin is applied under the grid, neutralize it */
.rhythm-grid {
margin-bottom: 0 !important; }
/* =============================
Bottom MENU button (after Rhythm photos)
============================= */
/* Keep the promise section tight and let the CTA control the final spacing */
.promise-section { padding-bottom: 0 !important; }
.rhythm-bottom-cta {
display: flex;
justify-content: center;
/* Bring the last CTA closer to the photos (raise ~20px on desktop) */
margin-top: clamp(10px, 2.6vh, 26px);
padding-bottom: clamp(34px, 5vh, 54px); }
.menu-cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 160px;
height: 44px;
border: 1px solid var(--sky-ink);
background: var(--sky-ink);
color: #F7F3ED;
text-decoration: none;
font-family: 'Gotham-Light', sans-serif;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 13px;
border-radius: 0;
transition: background .25s ease, color .25s ease, border-color .25s ease; }
.menu-cta:hover {
background: transparent;
color: var(--sky-ink); }
/* --------------------------
Rhythm section full-bleed background
-------------------------- */
/* On home: remove any residual bottom padding so the page ends on the sea image */
.hero .page-body { padding-bottom: 0 !important; min-height: 0 !important; }
.hero .promise { padding-bottom: 0 !important; }
.hero .promise-inner { padding-bottom: 0 !important; }
.rhythm-section {
position: relative;
margin-top: clamp(54px, 6vw, 84px); }
/* Full-bleed background layer (outside container width) */
/* Background image layer (disabled on home – the pink sea felt "cheap") */
.rhythm-bg {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100vw;
top: 0;
bottom: 0;
z-index: 0;
pointer-events: none;
background-image: url('../assets/img/rhythm-bg.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center 80%; }
/* Remove the sea background on both desktop + mobile (home only) */
.hero .rhythm-bg { display: none !important; }
/* Soft blend from cream into the image (no harsh edge) */
.rhythm-bg::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(247,243,237,1) 0%,
rgba(247,243,237,1) 16%,
rgba(247,243,237,0.35) 20%,
rgba(247,243,237,0) 26%
); }
/* Keep content above the background */
.rhythm-section-inner {
position: relative;
z-index: 2; }
/* Ensure CTA stays clickable/visible even over the background */
.rhythm-bottom-cta { position: relative; z-index: 3; }
/* With the sea image removed, restore a normal page ending */
.hero .page-body { padding-bottom: clamp(44px, 6vw, 82px) !important; }
.hero .promise { padding-bottom: 0 !important; }
.hero .promise-inner { padding-bottom: 0 !important; }
.rhythm-bottom-cta { padding-bottom: clamp(34px, 5vh, 54px); }
/* ============================
FIXES: OUR PROMISE (final)
Scoped to the Promise frame only.
============================ */
/* Desktop-only line breaks inside Promise copy */
.br-desktop { display: inline; }
@media (max-width: 600px) {
.br-desktop { display: none; }
}
/* Promise layout tuned to match the reference image */
body.home { overflow-x: hidden; }
.hero .promise {
/* Symmetric breathing room above and below the Promise frame */
--promise-gap: clamp(64px, 6.2vw, 96px) !important;
padding: var(--promise-gap) 0 0 !important; }
/* Let the frame be bigger than the inner column constraints */
.hero .promise-inner {
/* Break out of .container so the decorative frame can be truly centered */
max-width: none !important;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-top: 0 !important; }
/* Re-constrain Rhythm content so only the Promise frame goes full-bleed */
.hero .rhythm-section-inner {
width: min(var(--maxw), 100%) !important;
margin-inline: auto !important;
padding-inline: clamp(16px, 4vw, 64px) !important; }
/* Avoid double spacing between Promise and Rhythm (Promise already provides it) */
.hero .rhythm-section {
margin-top: 0 !important; }
/* Keep frame big and perfectly centered */
.hero .promise-frame {
width: min(1280px, 92vw) !important;
margin: 0 auto var(--promise-gap) !important; }
/* IMPORTANT: move content up and add inner breathing room */
.hero .promise-frame-content {
justify-content: flex-start !important;
/* The PNG has been trimmed (no transparent margins), so padding can be accurate */
padding-top: clamp(56px, 4.3vw, 74px) !important;
padding-right: clamp(120px, 12vw, 250px) !important;
padding-bottom: clamp(52px, 4vw, 70px) !important;
padding-left: clamp(120px, 12vw, 250px) !important; }
/* Slightly calmer spacing between title and copy */
.hero .promise-frame-content .promise-title {
margin-bottom: clamp(26px, 2.8vh, 40px) !important; }
/* Nudge the copy block a touch lower without shifting the title */
.hero .promise-frame-content .promise-copy {
margin-top: clamp(6px, 1vh, 12px) !important; }
/* Default: desktop uses the decorative frame, mobile uses a simpler copy-only layout */
.hero .promise-mobile { display: none; }
/* Mobile homepage: revert Promise to the previous text-only layout + fast dissolve */
@media (max-width: 720px) {
/* Use the same breathing room above/below as desktop, but keep it compact */
body.home .promise {
padding-top: var(--promise-gap) !important;
padding-bottom: var(--promise-gap) !important; }
/* Undo full-bleed breakout on small screens (keeps the layout clean and centered) */
body.home .promise-inner {
width: auto !important;
max-width: var(--maxw) !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-inline: clamp(16px, 6vw, 44px) !important; }
/* Hide decorative frame on mobile */
body.home .promise-frame { display: none !important; }
/* Show copy-only block */
body.home .promise-mobile {
display: block !important;
text-align: center; }
body.home .promise-mobile .promise-title {
margin-bottom: clamp(22px, 3vh, 32px) !important; }
body.home .promise-mobile .promise-text {
font-size: 16px;
letter-spacing: 0.12em;
line-height: 1.6; }
/* Fast dissolve, like the desktop frame reveal */
/*
IMPORTANT:
We only speed up the transition here.
We DO NOT override opacity/transform/filter, so:
- the global .reveal rules stay the single source of truth
- prefers-reduced-motion users still see the text (no accidental invisibility)
*/
body.home .promise-mobile .reveal {
transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
filter 420ms cubic-bezier(0.22, 1, 0.36, 1); }
}
/* If the user has Reduce Motion enabled, force visibility (and no transitions) */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
body.home .promise-mobile .reveal {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important; }
}
/* Mobile homepage: tighten and equalize Rhythm → MENU → footer spacing */
@media (max-width: 720px) {
/* Keep footer padding consistent so the spacing math is predictable */
body.home .footer-wrap { padding: 18px 0 !important; }
/* One knob to rule them all */
body.home { --menu-gap-mobile: clamp(28px, 7vw, 40px); }
/* Remove the extra page bottom padding (it was creating the huge empty block) */
body.home .page-body { padding-bottom: 0 !important; }
/* Photo → MENU gap */
body.home .rhythm-bottom-cta {
margin-top: var(--menu-gap-mobile) !important;
/* MENU → footer gap equals Photo → MENU gap.
Footer adds 18px top padding, so we subtract it here. */
padding-bottom: calc(var(--menu-gap-mobile) - 18px) !important; }
}
/* ============================
FIX: Desktop spacing around the bottom MENU CTA
(tighten photo → button → footer rhythm)
============================ */
@media (min-width: 768px) {
/* Bring MENU button a bit closer to the photos above */
body.home .rhythm-bottom-cta {
margin-top: clamp(6px, 1.4vh, 14px) !important;
padding-bottom: clamp(18px, 2.8vh, 30px) !important; }
/* Reduce the extra page-bottom padding on desktop so the footer sits closer */
body.home .page-body {
padding-bottom: clamp(26px, 3.0vw, 44px) !important; }
}
/* ============================
HOME — Promise + Rhythm (refined, typography preserved)
Notes:
- Layout-only overrides to match the reference.
- No font-size / letter-spacing overrides (we keep the site’s original typography).
============================ */
/* PROMISE spacing */
/* HOME: the global .page-body min-height creates a huge empty band on short pages.
On the homepage we control spacing via the Promise/Rhythm system instead. */
body.home .page-body{
min-height: 0 !important;
padding-bottom: 0 !important;
}
/* RHYTHM frame background + aligned squares */
body.home .rhythm-section{
margin-top: clamp(96px, 9vw, 136px) !important;
display: flex;
flex-direction: column;
padding-bottom: 0;
}
body.home .rhythm-frame{
position: relative;
width: min(1240px, 92vw);
margin: clamp(18px, 2vw, 30px) auto 0;
padding:
calc(var(--rhythm-pad-y) + clamp(44px, 4.2vw, 66px))
var(--rhythm-pad-x)
clamp(96px, 9vw, 136px);
}
/* Seamless thin stripes in pure CSS */
body.home .rhythm-frame::before{
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
to right,
#1f4f56 0 1.5px,
#f6f0e7 1.5px 10px
);
z-index: 0;
pointer-events: none;
}
body.home .rhythm-frame > *{
position: relative;
z-index: 1;
}
/* In the reference, the rhythm title has NO side lines */
body.home .rhythm-frame .divider-line{
display: none !important;
}
body.home .rhythm-frame .section-divider{
/* Give the title a touch more drop without pushing the photos down */
padding-top: clamp(18px, 2vw, 30px) !important;
padding-bottom: var(--rhythm-gap-title) !important;
}
body.home .rhythm-grid{
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
gap: clamp(22px, 2.6vw, 42px) !important;
margin-top: 0 !important;
margin-bottom: var(--rhythm-gap-cta);
}
body.home .rhythm-item{
flex: 0 0 auto !important;
width: clamp(150px, 14.2vw, 220px) !important; /* slightly smaller */
text-align: center;
}
body.home .rhythm-img{
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
/* Keep your original grade; avoid aggressive darkening */
filter: none;
}
/* HOME: ensure the long label always fits (older patches force it huge + nowrap) */
body.home .rhythm-label{
font-size: clamp(28px, 3.2vw, 36px) !important;
letter-spacing: 0.04em !important;
}
body.home .rhythm-label--long{
font-size: clamp(22px, 2.4vw, 30px) !important;
letter-spacing: 0.02em !important;
max-width: 92% !important;
white-space: nowrap !important;
text-align: center;
}
/* Let the grid control vertical rhythm; keep CTA centered without extra offsets */
body.home .rhythm-bottom-cta{
/*
The page uses an in-flow sticky footer (body is a column, main flexes).
On short pages, extra height appears between last content and footer.
We intentionally place that extra height INSIDE this CTA area and center the button,
so MENU sits visually between the striped frame and the footer.
*/
flex: 1 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0 !important;
padding: clamp(26px, 4.4vh, 46px) 0 !important;
}
/* HOME: nudge the MENU button slightly lower without changing page length */
body.home .rhythm-bottom-cta .btn{
transform: translateY(8px);
}
@media (max-width: 760px){
body.home .rhythm-bottom-cta .btn{ transform: translateY(16px) !important; }
}
/* ============================
MENU PAGE (Menu&Bar) — tiles layout
The HTML uses .menu-layout/.menu-tiles/.menu-tile.
These rules are scoped to body.menu-page so they can't break Home.
============================ */
body.menu-page .page-body{
/* Override the legacy centered-link layout */
align-items: flex-start;
justify-content: center;
/* Give the shell logo breathing room so the copy never collides with it */
/* More top breathing room so the intro never visually collides with the shell logo */
padding-top: clamp(170px, 20vh, 250px);
/* Prevent the footer line/copyright from visually overlapping the tiles */
padding-bottom: clamp(110px, 12vh, 180px);
}
body.menu-page .menu-layout{
width: min(1240px, 92vw);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(44px, 7vh, 84px);
}
body.menu-page .menu-intro{
width: min(980px, 92vw);
text-align: center;
/* Drop the copy further down (avoid shell overlap + match reference) */
margin-top: clamp(28px, 5vh, 64px);
}
/* Match Home "Our Promise" typographic voice (Gotham Light Italic) */
body.menu-page .menu-philosophy p{
margin: 0;
font-family: 'Gotham-Light', sans-serif;
font-style: italic;
font-weight: 300;
font-size: clamp(16px, 1.05vw, 17px);
line-height: 1.85;
letter-spacing: 0.08em;
/* Match Home "Our Promise" copy */
color: #7B7871;
}
/* Decorative hairlines above/below the Menu&Bar intro copy (desktop only) */
@media (min-width: 761px){
/* Desktop refinement: slightly smaller + a touch tighter leading */
body.menu-page .menu-philosophy p{
font-size: 16px; /* exactly -1px from the previous desktop feel */
line-height: 1.75;
}
body.menu-page .menu-philosophy::before,
body.menu-page .menu-philosophy::after{
content: "";
display: block;
height: 1px;
background: #C4BFB2;
opacity: 0.75;
margin-left: auto;
margin-right: auto;
}
/* Match reference: short hairline above, longer hairline below */
body.menu-page .menu-philosophy::before{ width: min(180px, 22vw); }
body.menu-page .menu-philosophy::after{ width: min(520px, 60vw); }
body.menu-page .menu-philosophy::before{ margin-bottom: clamp(22px, 2.6vw, 34px); }
body.menu-page .menu-philosophy::after{ margin-top: clamp(22px, 2.6vw, 34px); }
}
/* Nudge the first line slightly lower and tighten the gap between lines (match reference) */
body.menu-page .menu-philosophy p:first-child{ margin-top: 10px; }
body.menu-page .menu-philosophy p + p{ margin-top: 14px; }
body.menu-page .menu-tiles{
/* Bounded grid = tiles stay aligned + evenly spaced */
/* Slightly narrower container so the three blocks sit closer, like the reference */
width: min(860px, 92vw);
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
justify-items: center;
align-items: center;
/* Bring tiles closer together (still breathable) */
gap: clamp(14px, 2.2vw, 34px);
/* Keep breathing room above footer without creating a giant blank page */
padding-bottom: clamp(48px, 6vh, 86px);
}
body.menu-page .menu-tile{
position: relative;
/* All three squares must be the same size and align */
width: clamp(180px, 16.5vw, 240px);
aspect-ratio: 1 / 1;
}
body.menu-page .menu-tile-frame{ width: 100%; height: auto; display: block; }
/* Clickable area = inner “sand” square only */
body.menu-page .menu-tile-hit{
position: absolute;
inset: 13% 13% 13% 13%;
display: grid;
place-items: center;
}
body.menu-page .menu-tile-label{
font-family: 'Gotham', sans-serif;
font-weight: 300;
font-size: clamp(8px, 0.7vw, 11px);
letter-spacing: 0.08em;
color: #1f4f56;
/* True centering (user preference + avoids perceived misalignment) */
transform: none;
}
/* Allow wrapping earlier if the viewport is too narrow for 3 tiles */
@media (max-width: 1060px){
body.menu-page .menu-tiles{
grid-template-columns: repeat(2, minmax(0, 1fr));
width: min(760px, 92vw);
}
}
/* Center mood tile (pure image, cropped + no overflow text) */
body.menu-page .menu-tile--mood{
pointer-events: none;
/* EXACT same size as the framed tiles + hard crop */
width: clamp(180px, 16.5vw, 240px);
aspect-ratio: 1 / 1;
overflow: hidden;
}
body.menu-page .menu-tile--mood .menu-mood-img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
body.menu-page .menu-tile-hit:hover .menu-tile-label{ opacity: 0.78; }
@media (max-width: 760px){
body.menu-page .menu-layout{ gap: 40px; }
body.menu-page .menu-tile{ width: min(320px, 84vw); }
body.menu-page .menu-tile-hit{ inset: 14% 14% 14% 14%; }
}
@media (max-width: 760px){
body.home .rhythm-frame{
padding: 46px 22px 54px;
width: min(520px, 92vw);
}
body.home{ --rhythm-gap-cta: 22px; }
body.home .rhythm-grid{
flex-direction: column !important;
gap: 20px !important;
}
body.home .rhythm-item{
width: min(320px, 82vw) !important;
}
/* Home (mobile): move ONLY the title lower inside the textured inner panel
while keeping the overall block height stable (so nothing else shifts). */
body.home .section-divider{
padding-top: 36px;
padding-bottom: 0px;
}
}
/* ============================
HOME — MENU CTA balance
Goal: MENU has roughly equal space above and below
(fixes: button "stuck" to top + too much space below)
============================ */
/* Kill legacy desktop padding that was re-introducing a big empty band */
body.home .page-body{
padding-bottom: 0 !important;
}
/* Make the CTA area absorb any leftover height and truly center the button */
body.home .rhythm-bottom-cta{
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding-top: clamp(86px, 8vw, 120px) !important;
padding-bottom: clamp(18px, 2.2vw, 34px) !important;
margin-top: 0 !important;
min-height: clamp(156px, 14vh, 220px);
}
/* Lower MENU a bit without changing anything else */
body.home .rhythm-bottom-cta .menu-cta,
body.home .rhythm-bottom-cta .btn{
transform: translateY(14px) !important;
margin: 0 !important;
}
/* ============================
HOME — Mobile refinements (ONLY <= 600px)
- lift logo slightly (avoid overlapping the arch)
- make script line a touch bigger + lower
- push CTA a bit lower
- ensure RHYTHM title is readable and photos fit inside the striped frame
============================ */
@media (max-width: 600px){
/* Logo: lift a little so it doesn't sit on the arch opening */
.hero .logo--home .menu-shell-text{
/* higher = less overlap with the arch */
top: 36%;
}
/* Copy block: slightly lower overall (script + CTA) */
.hero-overlay{
top: 64%;
transform: translate(-50%, -50%) translateY(92px);
}
/* Script line: a bit bigger + a bit lower */
.hero-script{
font-size: 20px;
margin: 6px 0 10px 0;
}
/* CTA: lower by spacing, not by changing typography */
.hero-cta{
margin-top: 18px;
}
/* RHYTHM: keep everything inside the frame and avoid overlaps */
body.home .rhythm-frame{
/* Crop the striped frame vertically (less "tall"), symmetrically top/bottom */
padding-top: calc(var(--rhythm-pad-y) + 32px) !important;
padding-bottom: calc(var(--rhythm-pad-y) + 32px) !important;
}
body.home .rhythm-frame .section-divider{
position: relative;
z-index: 3;
/* keep the title fully inside the inner paper area */
max-width: 92%;
margin-inline: auto;
padding-top: 14px !important;
padding-bottom: 12px !important; /* title → photos */
margin-top: 0 !important;
}
/* RHYTHM title: smaller on mobile so it never clips or sits on stripes */
body.home .rhythm-frame .divider-text{
font-size: 12px !important;
line-height: 1.2 !important;
letter-spacing: 0.16em !important;
display: inline-block;
text-align: center;
max-width: 100%;
/* Move ONLY the title down into the inner paper area (no layout shift) */
transform: translateY(46px);
}
body.home .rhythm-grid{
margin-top: 0 !important;
gap: 18px !important;
padding-inline: 10px;
}
body.home .rhythm-item{
max-width: 230px !important;
}
/* MENU button: a touch farther from the striped frame (without extending page) */
body.home .rhythm-bottom-cta{
padding-top: clamp(62px, 7vh, 86px) !important;
padding-bottom: clamp(10px, 1.6vh, 20px) !important;
}
}
/* ============================
CONTACTS PAGE (reset pulito)
============================ */
/* ============================
GALLERY PAGE — tile scale + breathing room
Goal:
- prevent any visual overlaps on shorter viewports
- keep the reference grid (5×2) but slightly smaller tiles
- move the tile block a bit lower (more air under the divider line)
- scoped to body.gallery-page so other pages stay untouched
============================ */
body.gallery-page{
/* Slightly smaller than Menu tiles (subtle), but enough to avoid overlaps */
--gallery-tile: clamp(160px, 14.0vw, 210px);
--gallery-gap: clamp(16px, 2.0vw, 26px);
/* Push the grid a bit lower (more air under the divider line) */
--gallery-grid-top: clamp(52px, 6.0vh, 82px);
}
/* Keep the same header/foot rhythm as other menu-layout pages.
We only control spacing via the grid margin + tile scale. */
body.menu-page.gallery-page .page-body{
padding-top: clamp(170px, 20vh, 250px);
padding-bottom: clamp(110px, 12vh, 180px);
}
body.menu-page.gallery-page .gallery-layout{
width: min(1240px, 92vw);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
body.menu-page.gallery-page .gallery-intro{
width: min(980px, 92vw);
text-align: center;
margin-top: clamp(24px, 4.0vh, 52px);
margin-bottom: 0;
}
body.menu-page.gallery-page .gallery-divider-line{
display: none;
}
body.menu-page.gallery-page .gallery-grid{
margin-top: var(--gallery-grid-top);
display: grid;
grid-template-columns: repeat(5, var(--gallery-tile));
gap: var(--gallery-gap);
justify-content: center;
align-items: center;
}
body.menu-page.gallery-page .gallery-tile{
width: var(--gallery-tile);
aspect-ratio: 1 / 1;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
position: relative;
display: block;
}
body.menu-page.gallery-page .gallery-tile:focus-visible{
outline: 1px solid rgba(62,95,99,0.55);
outline-offset: 6px;
border-radius: 2px;
}
body.menu-page.gallery-page .gallery-frame{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: contain;
pointer-events: none;
z-index: 0;
}
body.menu-page.gallery-page .gallery-photo-wrap{
position: absolute;
inset: 0;
display: block;
z-index: 1;
}
/* Inner “paper” square inside the striped frame */
body.menu-page.gallery-page .gallery-tile--framed .gallery-photo-wrap{
inset: 12% 12% 12% 12%;
}
body.menu-page.gallery-page .gallery-photo{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: opacity 240ms ease, transform 240ms ease;
}
/* JS adds .is-swapping during shuffle */
body.menu-page.gallery-page .gallery-photo.is-swapping{
opacity: 0;
transform: scale(0.995);
}
/* Responsive: keep proportions clean, reduce columns as needed */
@media (max-width: 1180px){
body.menu-page.gallery-page .gallery-grid{ grid-template-columns: repeat(4, var(--gallery-tile)); }
}
@media (max-width: 940px){
body.menu-page.gallery-page{
--gallery-tile: clamp(160px, 20vw, 220px);
}
body.menu-page.gallery-page .gallery-grid{ grid-template-columns: repeat(3, var(--gallery-tile)); }
}
@media (max-width: 680px){
body.menu-page.gallery-page{
--gallery-tile: min(42vw, 240px);
--gallery-gap: 18px;
}
body.menu-page.gallery-page .gallery-grid{ grid-template-columns: repeat(2, var(--gallery-tile)); }
}
.contacts-page .page-body{
display:flex;
justify-content:center;
align-items:flex-start;
padding: 26px 0 0;
}
.contacts-page .contacts-card{
width: min(1240px, 84vw);
min-height: 520px;
margin: 14px auto 0;
border: 1px solid #B97560;
box-sizing: border-box;
position: relative;
padding: 82px 84px 88px;
background: transparent;
}
.contacts-page .contacts-watercolor{
position: relative;
display:block;
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
opacity: .74;
text-decoration:none;
}
.contacts-page .contacts-watercolor picture,
.contacts-page .contacts-watercolor img{
display:block;
width:100%;
height:auto;
}
.contacts-page .contacts-address{
position:absolute;
left:50%;
transform: translateX(-50%);
bottom: 14px;
width: calc(100% - 64px);
display:flex;
align-items:center;
justify-content:center;
gap:10px;
color:#957053;
text-align:center;
pointer-events:none;
}
.contacts-page .contacts-address .contacts-ico{
width:15px;
height:15px;
min-width:15px;
color:#B97560;
}
.contacts-page .contacts-address .contacts-address-text{
font-family: var(--font-sans, 'Gotham', 'Montserrat', Arial, sans-serif);
font-size:12.7px;
line-height:1.2;
letter-spacing:.02em;
white-space: nowrap;
}
.contacts-page .contacts-links{
width: fit-content;
margin: 54px auto 0;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:10px;
}
.contacts-page .contacts-row{
display:flex;
align-items:center;
gap:12px;
color:#957053;
text-decoration:none;
transition: opacity .2s ease;
}
.contacts-page .contacts-row:hover{ opacity:.78; }
.contacts-page .contacts-row .contacts-ico{
width:15px;
height:15px;
min-width:15px;
color:#B97560;
}
.contacts-page .contacts-row .contacts-text{
font-family: var(--font-sans, 'Gotham', 'Montserrat', Arial, sans-serif);
font-size:12.7px;
line-height:1.15;
letter-spacing:.02em;
font-style: normal;
}
@media (max-width: 900px){
.contacts-page .page-body{ padding-top: 10px; }
.contacts-page .contacts-card{
width:min(94vw, 680px);
min-height:auto;
margin-top:8px;
padding: 18px 14px 28px;
}
.contacts-page .contacts-watercolor{
width:100%;
opacity:.78;
}
.contacts-page .contacts-address{
position: static;
left:auto;
bottom:auto;
transform:none;
width:100%;
margin-top:12px;
padding:0 6px;
pointer-events:auto;
}
.contacts-page .contacts-address .contacts-address-text{
white-space: normal;
font-size: 12px;
line-height: 1.35;
}
.contacts-page .contacts-links{
margin-top:20px;
align-items:flex-start;
gap:10px;
}
.contacts-page .contacts-row .contacts-text{
font-size: 12px;
}
}
/* ============================
CONTACTS PAGE OVERRIDE (zombie-killer)
============================ */
body.contacts-page .site-header{position:relative;z-index:30;}
body.contacts-page .site-header .nav-link{color:#B97560!important;}
body.contacts-page .site-header .nav-link.is-active{color:#c9c1b8!important;}
body.contacts-page .logo--menu{top:20px!important;opacity:.22!important;}
body.contacts-page .logo--menu .menu-shell{width:230px!important;max-width:26vw!important;}
body.contacts-page .page-body{
width:min(1400px,92vw)!important;
margin:78px auto 40px!important;
border:1px solid #B97560!important;
padding:66px 72px 58px!important;
display:block!important;
box-sizing:border-box!important;
position:relative!important;
z-index:5!important;
}
body.contacts-page .contacts-card{
width:100%!important; min-height:0!important; margin:0!important; border:0!important; padding:0!important;
position:relative!important; background:transparent!important;
}
body.contacts-page .contacts-watercolor{
position:relative!important; display:block!important; width:min(1240px,100%)!important; margin:0 auto 44px!important; opacity:1!important;
text-decoration:none!important;
}
body.contacts-page .contacts-watercolor picture,
body.contacts-page .contacts-watercolor img{display:block!important;width:100%!important;height:auto!important;}
body.contacts-page .contacts-watercolor img{opacity:.72!important;}
body.contacts-page .contacts-address{
position:absolute!important; left:50%!important; bottom:16px!important; transform:translateX(-50%)!important;
width:calc(100% - 52px)!important; margin:0!important; padding:0!important;
display:flex!important; align-items:center!important; justify-content:center!important; gap:10px!important;
color:#957053!important; text-align:center!important; white-space:nowrap!important;
font-family:'Gotham',sans-serif!important; font-size:12.7px!important; line-height:1.2!important; letter-spacing:.01em!important;
opacity:1!important; pointer-events:none!important;
}
body.contacts-page .contacts-address .contacts-ico,
body.contacts-page .contacts-row .contacts-ico{
position:static!important; transform:none!important; opacity:1!important; filter:none!important;
display:inline-flex!important; align-items:center!important; justify-content:center!important;
width:16px!important; height:16px!important; min-width:16px!important;
color:#B97560!important;
}
body.contacts-page .contacts-address .contacts-ico svg,
body.contacts-page .contacts-row .contacts-ico svg{width:100%!important;height:100%!important;display:block!important;}
body.contacts-page .contacts-address .contacts-address-text{
font-family:'Gotham',sans-serif!important; font-style:normal!important; font-size:12.7px!important; line-height:1.2!important;
color:#957053!important; white-space:nowrap!important;
}
body.contacts-page .contacts-links{
width:fit-content!important; margin:0 auto!important; padding:0!important;
display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:flex-start!important;
gap:10px!important; position:relative!important;
}
body.contacts-page .contacts-links::before,
body.contacts-page .contacts-links::after{content:none!important;display:none!important;}
body.contacts-page .contacts-row{
margin:0!important; padding:0!important; width:auto!important;
display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:10px!important;
position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important;
transform:none!important; opacity:1!important; filter:none!important;
color:#957053!important; text-decoration:none!important;
}
body.contacts-page .contacts-row .contacts-text{
font-family:'Gotham',sans-serif!important; font-style:normal!important; font-weight:400!important;
font-size:12.7px!important; line-height:1.2!important; letter-spacing:.01em!important; color:#957053!important;
white-space:nowrap!important;
}
body.contacts-page .contacts-row:hover{opacity:.82!important;}
body.contacts-page footer .footer-line{background:#B97560!important;}
@media (max-width:900px){
body.contacts-page .page-body{width:min(92vw,640px)!important;margin:40px auto 24px!important;padding:22px 16px 26px!important;}
body.contacts-page .logo--menu{top:12px!important;opacity:.18!important;}
body.contacts-page .logo--menu .menu-shell{width:150px!important;max-width:42vw!important;}
body.contacts-page .contacts-watercolor{margin-bottom:18px!important;}
body.contacts-page .contacts-address{position:static!important;transform:none!important;width:100%!important;margin-top:10px!important;padding:0 6px!important;white-space:normal!important;font-size:11px!important;line-height:1.15!important;pointer-events:auto!important;}
body.contacts-page .contacts-address .contacts-address-text{white-space:normal!important;font-size:11px!important;line-height:1.15!important;}
body.contacts-page .contacts-address .contacts-ico,
body.contacts-page .contacts-row .contacts-ico{width:14px!important;height:14px!important;min-width:14px!important;}
body.contacts-page .contacts-links{gap:8px!important;}
body.contacts-page .contacts-row .contacts-text{font-size:11.2px!important;}
}
/* ============================
CONTACTS PAGE — ZOMBIE KILLER STEP 3
Clean, isolated layout for contacts card only
============================ */
body.contacts-page .contacts-card,
body.contacts-page .contacts-card *{
box-sizing:border-box;
}
/* Hide accidental orphan icons/text nodes injected by older contact iterations */
body.contacts-page .contacts-card > .contacts-ico,
body.contacts-page .contacts-card > img,
body.contacts-page .contacts-card > svg,
body.contacts-page .contacts-card > .contacts-address-text,
body.contacts-page .contacts-card > .contacts-row,
body.contacts-page .contacts-card > .contacts-text{
display:none !important;
}
/* Also kill any old "floating icon strip" wrappers from previous versions */
body.contacts-page .contacts-card .contacts-icons,
body.contacts-page .contacts-card .contacts-icons-row,
body.contacts-page .contacts-card .contacts-address-legacy,
body.contacts-page .contacts-card .contacts-extra-icons,
body.contacts-page .contacts-card .contacts-middle-icons{
display:none !important;
}
/* Strong layout reset for current structure only */
body.contacts-page .contacts-card{
position:relative !important;
width:min(1360px,88vw) !important;
margin:0 auto !important;
border:1px solid #B97560 !important;
padding:64px 64px 54px !important;
background:transparent !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:34px !important;
overflow:visible !important;
}
body.contacts-page .contacts-watercolor{
position:relative !important;
display:block !important;
width:min(1240px, 84vw) !important;
margin:0 auto !important;
line-height:0 !important;
}
body.contacts-page .contacts-watercolor picture,
body.contacts-page .contacts-watercolor img{
display:block !important;
width:100% !important;
height:auto !important;
}
body.contacts-page .contacts-watercolor img{ opacity:.72 !important; }
/* Address INSIDE watercolor (reference) */
body.contacts-page .contacts-watercolor .contacts-address{
position:absolute !important;
left:50% !important;
bottom:18px !important;
transform:translateX(-50%) !important;
width:calc(100% - 56px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
pointer-events:none !important;
z-index:2 !important;
white-space:nowrap !important;
}
body.contacts-page .contacts-watercolor .contacts-address .contacts-ico{
display:inline-flex !important;
width:14px !important;
height:14px !important;
min-width:14px !important;
color:#957053 !important;
opacity:1 !important;
}
body.contacts-page .contacts-watercolor .contacts-address .contacts-address-text{
display:inline !important;
font-family:'Gotham', sans-serif !important;
font-weight:300 !important;
font-style:normal !important;
font-size:12.7px !important;
line-height:1.15 !important;
letter-spacing:0.02em !important;
color:#957053 !important;
opacity:1 !important;
}
/* Contact rows under watercolor */
body.contacts-page .contacts-links{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:center !important;
gap:10px !important;
margin:4px auto 0 !important;
padding:0 !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
}
body.contacts-page .contacts-links::before,
body.contacts-page .contacts-links::after{ content:none !important; display:none !important; }
body.contacts-page .contacts-row{
display:flex !important;
align-items:center !important;
gap:12px !important;
text-decoration:none !important;
color:#957053 !important;
opacity:1 !important;
position:relative !important;
transform:none !important;
}
body.contacts-page .contacts-row .contacts-ico{
display:inline-flex !important;
width:16px !important;
height:16px !important;
min-width:16px !important;
color:#B97560 !important;
opacity:1 !important;
}
body.contacts-page .contacts-row .contacts-text{
display:inline !important;
font-family:'Gotham', sans-serif !important;
font-weight:300 !important;
font-style:normal !important;
font-size:12.7px !important;
line-height:1.15 !important;
letter-spacing:0.02em !important;
color:#957053 !important;
}
body.contacts-page .contacts-row:hover{ opacity:.82 !important; }
/* mobile (safe) */
@media (max-width: 760px){
body.contacts-page .contacts-card{
width:min(92vw, 640px) !important;
padding:22px 16px 26px !important;
gap:18px !important;
}
body.contacts-page .contacts-watercolor{
width:100% !important;
}
body.contacts-page .contacts-watercolor .contacts-address{
width:calc(100% - 18px) !important;
bottom:10px !important;
gap:6px !important;
white-space:normal !important;
text-align:center !important;
}
body.contacts-page .contacts-watercolor .contacts-address .contacts-address-text{
font-size:11px !important;
line-height:1.15 !important;
}
body.contacts-page .contacts-links{gap:8px !important;}
body.contacts-page .contacts-row .contacts-text{font-size:11px !important;}
}
/* ===== CONTACTS PAGE FINAL ZOMBIE-KILLER OVERRIDE ===== */
body.contacts-page main.page-body,
body.contacts-page .page-body,
body.contacts-page .contacts-page-body{
border:none !important;
outline:none !important;
box-shadow:none !important;
min-height:auto !important;
padding-top: 12px !important;
padding-bottom: 0 !important;
}
body.contacts-page .contacts-shell{
width:min(1240px, calc(100vw - 84px)) !important;
margin: 8px auto 0 !important;
padding: 0 !important;
border: none !important;
outline:none !important;
box-shadow:none !important;
}
body.contacts-page .contacts-card{
width: 100% !important;
margin: 0 auto !important;
border: 1px solid #B97560 !important;
box-sizing: border-box !important;
padding: 32px 34px 28px !important;
min-height: unset !important;
height: auto !important;
display: grid !important;
grid-template-rows: auto auto auto !important;
row-gap: 22px !important;
overflow: hidden !important;
}
/* kill accidental nested frame if any zombie wrapper gets reintroduced */
body.contacts-page .contacts-card .contacts-card,
body.contacts-page .contacts-card .contacts-frame,
body.contacts-page .contacts-card .contacts-inner{
border: none !important;
outline: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.contacts-page .contacts-watercolor{
width: min(1120px, calc(100% - 40px)) !important;
margin: 0 auto !important;
display:block !important;
opacity: .62 !important;
position: relative !important;
overflow: hidden !important;
}
body.contacts-page .contacts-watercolor img{
width:100% !important;
height:auto !important;
display:block !important;
}
body.contacts-page .contacts-watercolor .contacts-address{
position:absolute !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
bottom: 14px !important;
width: calc(100% - 70px) !important;
max-width: 980px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap: 10px !important;
text-align:center !important;
white-space: nowrap !important;
color:#957053 !important;
z-index:2 !important;
pointer-events:auto !important;
}
body.contacts-page .contacts-watercolor .contacts-address .contacts-address-text{
font-family:'Gotham','Montserrat',Arial,sans-serif !important;
font-size: 12.7px !important;
line-height: 1.2 !important;
letter-spacing: .01em !important;
color:#957053 !important;
}
body.contacts-page .contacts-watercolor .contacts-address svg,
body.contacts-page .contacts-watercolor .contacts-address .contacts-address-icon{
width: 15px !important;
height: 15px !important;
flex: 0 0 15px !important;
color:#957053 !important;
fill: currentColor !important;
opacity: .95 !important;
}
/* remove old floating/placeholder icons in the middle */
body.contacts-page .contacts-float-icons,
body.contacts-page .contacts-floating-icons,
body.contacts-page .contacts-ghost-icons,
body.contacts-page .contacts-card .contact-icons-placeholder{
display:none !important;
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}
body.contacts-page .contacts-links{
width: fit-content !important;
margin: 0 auto !important;
display:flex !important;
flex-direction:column !important;
gap: 8px !important;
align-items:flex-start !important;
}
body.contacts-page .contacts-row{
display:flex !important;
align-items:center !important;
gap: 10px !important;
}
body.contacts-page .contacts-row .contacts-icon,
body.contacts-page .contacts-row svg{
width: 18px !important;
height: 18px !important;
flex: 0 0 18px !important;
color:#B97560 !important;
fill: currentColor !important;
}
body.contacts-page .contacts-row .contacts-text{
font-family:'Gotham','Montserrat',Arial,sans-serif !important;
font-size: 12.7px !important;
line-height: 1.2 !important;
letter-spacing: .01em !important;
color:#957053 !important;
}
body.contacts-page .contacts-links a{
color:#957053 !important;
text-decoration:none !important;
}
body.contacts-page .contacts-links a:hover{opacity:.82 !important;}
/* keep everything in one viewport on desktop-like widths */
@media (min-width: 1024px){
body.contacts-page .contacts-shell{ margin-top: 2px !important; }
body.contacts-page .contacts-card{ padding-top: 26px !important; padding-bottom: 22px !important; row-gap: 18px !important; }
body.contacts-page .contacts-watercolor{ width:min(1080px, calc(100% - 56px)) !important; }
}
@media (max-width: 900px){
body.contacts-page .contacts-shell{
width: calc(100vw - 26px) !important;
margin-top: 10px !important;
}
body.contacts-page .contacts-card{
padding: 16px 12px 14px !important;
row-gap: 12px !important;
}
body.contacts-page .contacts-watercolor{
width:100% !important;
opacity:.68 !important;
}
body.contacts-page .contacts-watercolor .contacts-address{
width: calc(100% - 16px) !important;
bottom: 8px !important;
gap: 6px !important;
white-space: normal !important;
}
body.contacts-page .contacts-watercolor .contacts-address .contacts-address-text,
body.contacts-page .contacts-row .contacts-text{
font-size: 11px !important;
line-height: 1.15 !important;
}
body.contacts-page .contacts-row .contacts-icon,
body.contacts-page .contacts-row svg{ width:16px !important; height:16px !important; }
}
/* =========================
CONTACTS PAGE (clean scoped rewrite)
Uses cnc-* classes so legacy contacts CSS cannot interfere
========================= */
body.cnc-contacts-page{
color:#B97560;
min-height: 100vh;
display: flex;
flex-direction: column;
}
body.cnc-contacts-page .menu-page-bg{
opacity:.48;
background-position:center top;
}
body.cnc-contacts-page .site-header{
position:relative;
z-index:30;
}
body.cnc-contacts-page .site-header .nav-link{
color:#B97560;
}
body.cnc-contacts-page .site-header .nav-link.is-active{
color:#C9C1B8;
opacity:1;
}
body.cnc-contacts-page .logo--menu{
top:8px;
}
body.cnc-contacts-page .logo--menu .menu-shell{
width: clamp(168px, 15vw, 220px);
height: clamp(150px, 13vw, 190px);
}
body.cnc-contacts-page .logo--menu .menu-shell-img{
opacity:.14;
filter: contrast(1.02) brightness(1.04);
}
body.cnc-contacts-page .page-body{
position:relative;
z-index:2;
width:min(94vw, 1600px);
margin: clamp(120px, 17vh, 180px) auto 28px;
padding: 0 clamp(10px, 1.3vw, 18px);
display:flex;
align-items:flex-start;
justify-content:center;
}
body.cnc-contacts-page .cnc-contact-panel{
width:100%;
border:1px solid rgba(185,117,96,.62);
padding: clamp(16px, 2.1vw, 34px);
background: rgba(247,243,237,.10);
}
body.cnc-contacts-page .cnc-contact-art{
position:relative;
width:100%;
overflow:hidden;
background: rgba(229, 211, 196, .30);
}
body.cnc-contacts-page .cnc-contact-art picture,
body.cnc-contacts-page .cnc-contact-art img{
display:block;
width:100%;
height:auto;
}
body.cnc-contacts-page .cnc-contact-art img{
opacity:.78;
}
body.cnc-contacts-page .cnc-contact-overlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap: clamp(10px, 1.2vw, 18px);
padding: clamp(12px, 2vw, 24px);
text-align:center;
pointer-events:none;
}
body.cnc-contacts-page .cnc-contact-inline{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap: clamp(14px, 1.8vw, 28px);
}
body.cnc-contacts-page .cnc-contact-link{
pointer-events:auto;
display:inline-flex;
align-items:center;
gap: 9px;
color:#B97560;
text-decoration:none;
font-family:'Gotham Light','Gotham','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-weight:300;
letter-spacing:.02em;
line-height:1.2;
transition:opacity .18s ease;
opacity:.96;
}
body.cnc-contacts-page .cnc-contact-link:hover{
opacity:.74;
}
body.cnc-contacts-page .cnc-contact-link--address{
font-size: clamp(14px, 1.7vw, 22px);
max-width:min(96%, 1100px);
justify-content:center;
}
body.cnc-contacts-page .cnc-contact-inline .cnc-contact-link{
font-size: clamp(13px, 1.35vw, 18px);
}
body.cnc-contacts-page .cnc-contact-icon{
width: clamp(15px, 1.15vw, 19px);
height: clamp(15px, 1.15vw, 19px);
min-width: clamp(15px, 1.15vw, 19px);
display:inline-flex;
align-items:center;
justify-content:center;
}
body.cnc-contacts-page .cnc-contact-icon svg{
width:100%;
height:100%;
display:block;
fill: currentColor;
}
@media (max-width: 900px){
body.cnc-contacts-page .page-body{
margin-top: clamp(96px, 15vh, 132px);
width:min(96vw, 760px);
padding-inline:10px;
}
body.cnc-contacts-page .cnc-contact-panel{
padding: 14px;
}
body.cnc-contacts-page .cnc-contact-overlay{
gap: 10px;
padding: 12px 14px;
}
body.cnc-contacts-page .cnc-contact-link--address{
font-size: 13px;
line-height:1.2;
}
body.cnc-contacts-page .cnc-contact-inline{
gap: 8px 14px;
}
body.cnc-contacts-page .cnc-contact-inline .cnc-contact-link{
font-size: 12.5px;
}
body.cnc-contacts-page .cnc-contact-icon{
width:14px;
height:14px;
min-width:14px;
}
}
@media (max-width: 680px){
body.cnc-contacts-page .logo--menu{
top:2px;
}
body.cnc-contacts-page .logo--menu .menu-shell{
width: clamp(132px, 34vw, 170px);
height: clamp(112px, 28vw, 144px);
}
body.cnc-contacts-page .logo--menu .menu-shell-img{
opacity:.11;
}
body.cnc-contacts-page .page-body{
margin-top: 84px;
margin-bottom: 18px;
}
body.cnc-contacts-page .cnc-contact-panel{
padding: 10px;
}
body.cnc-contacts-page .cnc-contact-art{
background: transparent;
}
body.cnc-contacts-page .cnc-contact-art img{
opacity:.74;
}
body.cnc-contacts-page .cnc-contact-overlay{
position:static;
inset:auto;
padding: 14px 8px 4px;
gap: 10px;
background: transparent;
pointer-events:auto;
}
body.cnc-contacts-page .cnc-contact-link{
width:100%;
justify-content:center;
}
body.cnc-contacts-page .cnc-contact-link--address{
max-width:100%;
white-space:normal;
}
body.cnc-contacts-page .cnc-contact-inline{
width:100%;
flex-direction:column;
gap: 8px;
}
}
/* =========================
CONTACTS PAGE (cleanup follow-up)
Fix logo/footer palette + hide legacy floating icons if stale markup survives
========================= */
body.cnc-contacts-page .site-header,
body.cnc-contacts-page .site-header .logo,
body.cnc-contacts-page .site-header .menu-shell-text,
body.cnc-contacts-page .site-header .menu-casa,
body.cnc-contacts-page .site-header .menu-nueva,
body.cnc-contacts-page .site-header .menu-ibiza{
color:#B97560 !important;
}
body.cnc-contacts-page .site-footer{
color:#B97560;
}
body.cnc-contacts-page .site-footer .footer-line{
opacity:.6;
}
body.cnc-contacts-page .footer-wrap{
z-index: 6;
margin-top: auto;
}
/* If an older contacts markup version is still present, suppress it entirely */
body.cnc-contacts-page .contacts-card,
body.cnc-contacts-page .contacts-links,
body.cnc-contacts-page .contacts-row,
body.cnc-contacts-page .contacts-icons,
body.cnc-contacts-page .contacts-icons-row,
body.cnc-contacts-page .contacts-float-icons,
body.cnc-contacts-page .contacts-floating-icons,
body.cnc-contacts-page .contacts-ghost-icons,
body.cnc-contacts-page .contacts-middle-icons,
body.cnc-contacts-page .contacts-extra-icons,
body.cnc-contacts-page .contacts-address-legacy,
body.cnc-contacts-page .contact-icons-placeholder{
display:none !important;
}
/* Stray legacy icon nodes occasionally injected/left in the panel */
body.cnc-contacts-page .cnc-contact-panel > .contacts-ico,
body.cnc-contacts-page .cnc-contact-panel > .contacts-icon,
body.cnc-contacts-page .cnc-contact-panel > img.contacts-icon,
body.cnc-contacts-page .cnc-contact-panel > svg,
body.cnc-contacts-page .cnc-contact-panel > i,
body.cnc-contacts-page .cnc-contact-art + .contacts-ico,
body.cnc-contacts-page .cnc-contact-art + .contacts-icon,
body.cnc-contacts-page .cnc-contact-art + svg,
body.cnc-contacts-page .cnc-contact-art + i{
display:none !important;
}
/* =========================
CONTACTS PAGE (final visual fix)
Root cause: desktop watercolor PNG includes embedded icon artwork in lower transparent area.
Crop it via container aspect ratio + object-fit on desktop, so no stray icons / no fake extra height.
========================= */
@media (min-width: 681px){
body.cnc-contacts-page .page-body{
margin-bottom: 54px;
}
body.cnc-contacts-page .cnc-contact-panel{
background: rgba(247,243,237,.18);
}
body.cnc-contacts-page .cnc-contact-art{
aspect-ratio: 1042 / 182; /* crop out lower icon area baked into desktop PNG */
background: rgba(229, 211, 196, .24);
}
body.cnc-contacts-page .cnc-contact-art picture,
body.cnc-contacts-page .cnc-contact-art img{
width: 100%;
height: 100%;
}
body.cnc-contacts-page .cnc-contact-art img{
object-fit: cover;
object-position: center top;
opacity: .83;
}
body.cnc-contacts-page .cnc-contact-overlay{
gap: clamp(7px, 1vw, 14px);
padding: clamp(10px, 1.35vw, 18px);
}
body.cnc-contacts-page .cnc-contact-link--address{
font-size: clamp(14px, 1.45vw, 20px);
max-width: min(96%, 1180px);
}
body.cnc-contacts-page .cnc-contact-inline{
gap: clamp(12px, 1.4vw, 22px);
}
body.cnc-contacts-page .cnc-contact-inline .cnc-contact-link{
font-size: clamp(12.5px, 1.15vw, 16.5px);
}
body.cnc-contacts-page .cnc-contact-icon{
width: clamp(13px, .95vw, 16px);
height: clamp(13px, .95vw, 16px);
min-width: clamp(13px, .95vw, 16px);
}
}
/* =========================
CONTACTS PAGE — precise restore add-ons
(built on the "okay ora è perfetto" baseline)
========================= */
/* 1) Watercolor map is clickable, but NOT on the white translucent veil */
body.cnc-contacts-page .cnc-map-stage{
position: relative;
}
body.cnc-contacts-page .cnc-watercolor-map{
position: relative;
z-index: 0;
}
body.cnc-contacts-page .cnc-map-hitarea{
position: absolute;
inset: 0;
display: block;
z-index: 1;
background: transparent;
}
/* desktop/tablet veil + click blocker */
@media (min-width: 681px){
body.cnc-contacts-page .cnc-map-stage{
--cnc-veil-w: min(78%, 1260px);
--cnc-veil-h: clamp(190px, 24%, 320px);
--cnc-veil-r: clamp(18px, 1.8vw, 28px);
}
body.cnc-contacts-page .cnc-contact-veil{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: var(--cnc-veil-w);
height: var(--cnc-veil-h);
border-radius: var(--cnc-veil-r);
background: rgba(247, 242, 236, 0.70);
border: 1px solid rgba(220, 194, 179, 0.35);
box-shadow: 0 12px 28px rgba(72, 52, 40, 0.06);
backdrop-filter: blur(14px) saturate(0.95);
-webkit-backdrop-filter: blur(14px) saturate(0.95);
pointer-events: none;
z-index: 2;
}
body.cnc-contacts-page .cnc-contact-overlay{
z-index: 3;
pointer-events: none;
}
body.cnc-contacts-page .cnc-veil-click-blocker{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: var(--cnc-veil-w);
height: var(--cnc-veil-h);
border-radius: var(--cnc-veil-r);
background: transparent;
z-index: 4;
pointer-events: auto;
}
}
/* mobile: map remains clickable; no veil blocker over the content card layout */
@media (max-width: 680px){
body.cnc-contacts-page .cnc-contact-veil,
body.cnc-contacts-page .cnc-veil-click-blocker{
display: none;
}
body.cnc-contacts-page .cnc-map-hitarea{
z-index: 2;
}
body.cnc-contacts-page .cnc-contact-overlay{
z-index: 3;
}
}
/* 2) Contacts logo = Gallery shell logo (same placement/size/opacity/text geometry),
but keep the contacts rose-orange palette for the text/nav */
body.cnc-contacts-page .site-header .logo.logo--menu{
top: 0 !important;
left: 0 !important;
}
body.cnc-contacts-page .logo--menu{
top: 0;
left: 0;
}
body.cnc-contacts-page .logo--menu .menu-shell{
width: clamp(180px, 16vw, 250px);
height: clamp(150px, 12vw, 190px);
}
body.cnc-contacts-page .logo--menu .menu-shell .menu-shell-img{
opacity: 0.28;
mix-blend-mode: normal;
filter: contrast(1.08) brightness(1.02) drop-shadow(0 2px 10px rgba(62,95,99,0.10));
transform: none;
}
body.cnc-contacts-page .logo--menu .menu-shell .menu-shell-text{
top: 52%;
width: auto;
color: #B97560;
}
/* Match the Menu&Bar / Gallery mobile shell exactly as well */
@media (max-width: 680px){
body.cnc-contacts-page .logo--menu{
top: 0 !important;
left: 0 !important;
}
}
@media (max-width: 600px){
body.cnc-contacts-page .logo--menu .menu-shell{
width: clamp(220px, 62vw, 320px) !important;
height: clamp(220px, 62vw, 320px) !important;
}
body.cnc-contacts-page .logo--menu .menu-shell .menu-shell-img{
opacity: 0.32 !important;
}
body.cnc-contacts-page .logo--menu .menu-shell .menu-shell-text{
top: 52% !important;
width: auto !important;
}
}
/* =========================
CONTACTS PAGE — restore form layout + spacing (non-regression)
NOTE: scoped to cnc-contacts-page only; does not affect other pages.
========================= */
/* =========================
CONTACTS PAGE — map strip up + thin + contact form
========================= */
/* Bring the map strip higher and make the whole page flow like the form reference */
body.cnc-contacts-page .page-body{
width: min(92vw, 1320px) !important;
/* Move the whole block up (reduce empty space above) without changing the layout */
margin: clamp(58px, 8vh, 96px) auto 54px !important;
padding-inline: clamp(10px, 1.3vw, 18px) !important;
display: flex !important;
flex: 1 0 auto !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: clamp(66px, 9vh, 150px) !important;
}
/* Keep the map strip clean (no big outer card), but still subtly framed */
body.cnc-contacts-page .cnc-contact-panel{
width: 100% !important;
max-width: min(1320px, 92vw) !important;
border: 0 !important;
padding: 0 !important;
background: transparent !important;
}
body.cnc-contacts-page .cnc-contact-art{
border: 1px solid rgba(185,117,96,.32);
background: rgba(229, 211, 196, .18);
}
@media (min-width: 681px){
/* Thinner strip */
body.cnc-contacts-page .cnc-contact-art{
aspect-ratio: 1042 / 128 !important;
--cnc-veil-w: min(76%, 1100px);
--cnc-veil-h: clamp(92px, 9vw, 132px);
--cnc-veil-r: clamp(16px, 1.4vw, 24px);
}
/* Glass effect (visual only) */
body.cnc-contacts-page .cnc-contact-veil{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: var(--cnc-veil-w);
height: var(--cnc-veil-h);
border-radius: var(--cnc-veil-r);
background: linear-gradient(180deg, rgba(247,242,236,0.55), rgba(247,242,236,0.34));
border: 1px solid rgba(220, 194, 179, 0.30);
box-shadow: 0 14px 34px rgba(72, 52, 40, 0.06);
backdrop-filter: blur(16px) saturate(1.05);
-webkit-backdrop-filter: blur(16px) saturate(1.05);
pointer-events: none;
z-index: 2;
}
/* Prevent map clicks under the band, but allow text links above it */
body.cnc-contacts-page .cnc-veil-click-blocker{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: var(--cnc-veil-w);
height: var(--cnc-veil-h);
border-radius: var(--cnc-veil-r);
background: transparent;
pointer-events: auto;
z-index: 3;
}
body.cnc-contacts-page .cnc-contact-overlay{
z-index: 4;
pointer-events: none;
gap: clamp(8px, 1vw, 12px);
padding: clamp(10px, 1.2vw, 16px);
}
body.cnc-contacts-page .cnc-contact-link--address{
font-size: clamp(13.5px, 1.18vw, 16.5px);
}
body.cnc-contacts-page .cnc-contact-inline .cnc-contact-link{
font-size: clamp(12.2px, 1.02vw, 14.5px);
}
}
/* =========================
Contact form (same fonts + chic minimal lines)
========================= */
body.cnc-contacts-page .cnc-contact-form{
width: min(860px, 92vw);
margin: 0 auto 12px;
margin-top: clamp(18px, 2.6vh, 44px);
padding: 0 6px 10px;
text-align: center;
}
body.cnc-contacts-page .cnc-form-title{
font-family: 'Mrs Saint Delafield', cursive;
font-weight: 400;
font-size: clamp(46px, 6vw, 82px);
line-height: 0.92;
margin: 0 0 26px;
color: #B97560;
}
body.cnc-contacts-page .cnc-form-status{
margin: 0 auto 18px;
max-width: 640px;
font-family: 'Gotham Light','Gotham','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-weight: 300;
font-size: 13.5px;
letter-spacing: .02em;
color: #957053;
}
body.cnc-contacts-page .cnc-form-status a{
color: inherit;
text-decoration: underline;
}
body.cnc-contacts-page .cnc-form{
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 22px;
}
body.cnc-contacts-page .cnc-form-row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
}
@media (max-width: 720px){
body.cnc-contacts-page .cnc-form-row{
grid-template-columns: 1fr;
gap: 22px;
}
}
body.cnc-contacts-page .cnc-field label{
display: block;
text-align: left;
font-family: 'Gotham Light','Gotham','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-weight: 300;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(149,112,83,0.80);
margin-bottom: 10px;
}
body.cnc-contacts-page .cnc-field input,
body.cnc-contacts-page .cnc-field textarea{
width: 100%;
border: 0;
border-bottom: 1px solid rgba(185,117,96,0.35);
background: transparent;
padding: 6px 0 12px;
font-family: 'Gotham Light','Gotham','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-weight: 300;
font-size: 15px;
letter-spacing: 0.02em;
color: #957053;
outline: none;
}
body.cnc-contacts-page .cnc-field textarea{
resize: vertical;
min-height: 120px;
padding-top: 8px;
}
body.cnc-contacts-page .cnc-field input:focus,
body.cnc-contacts-page .cnc-field textarea:focus{
border-bottom-color: rgba(185,117,96,0.85);
}
body.cnc-contacts-page .cnc-honey{
position: absolute !important;
left: -9999px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
}
body.cnc-contacts-page .cnc-form-actions{
display: flex;
justify-content: flex-start;
margin-top: 14px;
}
@media (max-width: 720px){
body.cnc-contacts-page .cnc-form-actions{
justify-content: center;
}
}
/* Button = Home MENU style, but Contacts palette */
body.cnc-contacts-page .menu-cta.cnc-submit{
border-color: #B97560;
background: #B97560;
color: #F7F3ED;
}
body.cnc-contacts-page .menu-cta.cnc-submit:hover{
background: transparent;
color: #B97560;
}
/* ============================
GLOBAL — FLAT BACKGROUND (no textures)
Applies site-wide on desktop + mobile.
Leaves layout/typography/components untouched.
============================ */
/* Menu&Bar paper texture layer */
body.menu-page .menu-page-bg{ display:none !important; }
/* Home: keep the sand frame texture (user preference). */
/* Home: remove film grain overlay */
.hero-pink::after{
background-image: none !important;
opacity: 0 !important;
}
/* Safety: if any legacy rhythm background image is present, disable it */
.rhythm-bg{ background-image: none !important; }
/* ============================
CONTACTS — Teal ink for text & icons only
Scope: Contacts page only. Does NOT touch layout or other pages.
============================ */
body.cnc-contacts-page{
color: #3E5F63;
}
/* Header/nav on Contacts */
body.cnc-contacts-page .site-header,
body.cnc-contacts-page .site-header .nav-link{
color: #3E5F63 !important;
}
/* Contact overlay (text + icons) */
body.cnc-contacts-page .cnc-contact-overlay,
body.cnc-contacts-page .cnc-contact-link,
body.cnc-contacts-page .cnc-contact-link span,
body.cnc-contacts-page .cnc-contact-inline{
color: #3E5F63 !important;
}
body.cnc-contacts-page .cnc-contact-icon svg,
body.cnc-contacts-page .cnc-contact-icon svg path{
fill: currentColor !important;
}
/* Form text (labels, titles, status messages, input text) */
body.cnc-contacts-page .cnc-form-title,
body.cnc-contacts-page .cnc-form-status,
body.cnc-contacts-page .cnc-form label,
body.cnc-contacts-page .cnc-form input,
body.cnc-contacts-page .cnc-form textarea,
body.cnc-contacts-page .cnc-form ::placeholder{
color: #3E5F63 !important;
}
/* Footer text on Contacts */
body.cnc-contacts-page footer,
body.cnc-contacts-page footer *{
color: #3E5F63 !important;
}
/* ============================
HOME — Rhythm section editorial layout
============================ */
/* =========================================================
Gallery uploader — mobile only, camera-first
========================================================= */
body.gallery-page .gallery-upload{
width: min(100%, 1040px);
margin: 10px auto 0;
display: grid;
justify-items: center;
gap: 18px;
position: relative;
z-index: 1;
}
body.gallery-page .gallery-upload-copy,
body.gallery-page .gallery-upload-desktop-note,
body.gallery-page .gallery-upload-status{
font-family: 'Gotham','Montserrat',system-ui,sans-serif;
font-weight: 300;
letter-spacing: 0.08em;
line-height: 1.7;
color: rgba(52,76,87,.88);
}
body.gallery-page .gallery-upload-copy{
margin: 0;
max-width: 860px;
text-align: center;
font-size: 13px;
text-transform: none;
}
body.gallery-page .gallery-upload-desktop-note{
display: none;
margin: 0;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .14em;
}
body.gallery-page .gallery-upload-form{
display: grid;
justify-items: center;
gap: 14px;
width: 100%;
}
body.gallery-page .gallery-upload-input{
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
body.gallery-page .gallery-camera-trigger{
appearance: none;
display: inline-grid;
place-items: center;
width: 54px;
height: 54px;
border: 1px solid rgba(52,76,87,.32);
border-radius: 50%;
background: rgba(247,243,237,.82);
color: #567178;
cursor: pointer;
transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
body.gallery-page .gallery-camera-trigger svg{
width: 21px;
height: 21px;
display: block;
}
body.gallery-page .gallery-camera-trigger:hover{
transform: translateY(-1px);
}
body.gallery-page .gallery-upload[data-sending="true"] .gallery-camera-trigger{
opacity: .45;
pointer-events: none;
}
body.gallery-page .gallery-upload-status{
min-height: 1.2em;
margin: 0;
font-size: 10px;
text-transform: uppercase;
letter-spacing: .16em;
text-align: center;
}
body.gallery-page .gallery-upload-status[data-tone="error"]{ color: #8b4a46; }
body.gallery-page .gallery-upload-status[data-tone="success"]{ color: rgba(52,76,87,.82); }
@media (min-width: 769px){
body.gallery-page .gallery-upload-copy,
body.gallery-page .gallery-upload-form{
display: none;
}
body.gallery-page .gallery-upload-desktop-note{
display: block;
}
}
@media (max-width: 768px){
body.gallery-page .gallery-upload{
margin-top: 8px;
gap: 12px;
padding-inline: 18px;
}
body.gallery-page .gallery-upload-copy{
font-size: 12px;
letter-spacing: .05em;
line-height: 1.65;
}
body.gallery-page .gallery-upload-desktop-note{
display: none;
}
body.gallery-page .gallery-upload-form{
display: grid;
}
body.gallery-page .gallery-camera-trigger{
width: 48px;
height: 48px;
}
body.gallery-page .gallery-camera-trigger svg{
width: 18px;
height: 18px;
}
}
/* =========================================================
Gallery uploader — final cleanup override
========================================================= */
body.gallery-page .gallery-upload-form{
position: relative;
}
body.gallery-page .gallery-upload-input,
body.gallery-page input.gallery-upload-input,
body.gallery-page #gallery-camera-input{
position: absolute !important;
inset: auto !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
appearance: none !important;
-webkit-appearance: none !important;
clip-path: inset(50%) !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
display: block !important;
}
body.gallery-page .gallery-camera-trigger{
width: 42px !important;
height: 42px !important;
border-radius: 999px;
border: 1px solid rgba(52,76,87,.24);
background: rgba(247,243,237,.82);
box-shadow: 0 1px 8px rgba(52,76,87,.06);
}
body.gallery-page .gallery-camera-trigger svg{
width: 16px !important;
height: 16px !important;
}
body.gallery-page .gallery-upload-status{
max-width: 340px;
min-height: 0;
font-size: 9.5px;
letter-spacing: .14em;
line-height: 1.6;
}
@media (max-width: 768px){
body.gallery-page .gallery-upload{
gap: 10px;
}
body.gallery-page .gallery-upload-desktop-note{
display: none !important;
}
body.gallery-page .gallery-camera-trigger{
width: 38px !important;
height: 38px !important;
}
body.gallery-page .gallery-camera-trigger svg{
width: 14px !important;
height: 14px !important;
}
body.gallery-page .gallery-upload-status{
margin-top: 2px;
font-size: 9px;
letter-spacing: .12em;
}
}
@media (min-width: 769px){
body.gallery-page .gallery-upload-copy{
display: none !important;
}
body.gallery-page .gallery-upload-form{
display: none !important;
}
body.gallery-page .gallery-upload-desktop-note{
display: block !important;
max-width: 720px;
text-align: center;
font-size: 10px;
line-height: 1.9;
letter-spacing: .1em;
text-transform: none;
color: rgba(52,76,87,.66);
}
}
/* =========================================================
Gallery upload — refined mobile/desktop behavior
========================================================= */
body.gallery-page .gallery-upload{
position: relative;
z-index: 2;
}
body.gallery-page .gallery-upload-desktop-note{
display: none !important;
}
body.gallery-page .gallery-upload-sheet{
display: none;
}
body.gallery-page .gallery-upload[data-sheet-open="true"] .gallery-upload-sheet{
display: block;
width: min(100%, 320px);
}
body.gallery-page .gallery-upload-sheet__inner{
background: rgba(247,243,237,.94);
border: 1px solid rgba(52,76,87,.18);
padding: 14px 14px 12px;
box-shadow: 0 6px 18px rgba(52,76,87,.08);
}
body.gallery-page .gallery-upload-sheet__preview{
width: 100%;
aspect-ratio: 1 / 1.18;
overflow: hidden;
margin-bottom: 12px;
background: rgba(52,76,87,.04);
}
body.gallery-page .gallery-upload-sheet__preview img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
body.gallery-page .gallery-upload-sheet__field{
display: grid;
gap: 7px;
margin: 0 0 12px;
}
body.gallery-page .gallery-upload-sheet__field span,
body.gallery-page .gallery-upload-sheet__field input,
body.gallery-page .gallery-upload-sheet__actions button{
font-family: 'Gotham','Montserrat',system-ui,sans-serif;
}
body.gallery-page .gallery-upload-sheet__field span{
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(52,76,87,.72);
}
body.gallery-page .gallery-upload-sheet__field span em{
font-style: normal;
opacity: .7;
}
body.gallery-page .gallery-upload-sheet__field input{
appearance: none;
width: 100%;
border: 0;
border-bottom: 1px solid rgba(52,76,87,.38);
background: transparent;
color: rgba(52,76,87,.92);
padding: 0 0 8px;
font-size: 12px;
letter-spacing: .08em;
}
body.gallery-page .gallery-upload-sheet__field input:focus{
outline: none;
border-bottom-color: rgba(52,76,87,.7);
}
body.gallery-page .gallery-upload-sheet__actions{
display: flex;
justify-content: space-between;
gap: 10px;
}
body.gallery-page .gallery-upload-sheet__actions button{
appearance: none;
border: 1px solid rgba(52,76,87,.28);
background: transparent;
color: rgba(52,76,87,.84);
padding: 9px 14px;
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
cursor: pointer;
}
body.gallery-page .gallery-upload-sheet__primary{
background: rgba(52,76,87,.08);
}
body.gallery-page .gallery-upload-status{
max-width: 360px;
min-height: 0;
}
@media (min-width: 769px){
body.gallery-page .gallery-upload-copy{
display: block !important;
max-width: 780px;
text-align: center;
font-size: 13px;
line-height: 1.8;
letter-spacing: .06em;
color: rgba(52,76,87,.82) !important;
}
body.gallery-page .gallery-upload-form{
display: none !important;
}
body.gallery-page .gallery-upload-desktop-note{
display: block !important;
margin: -2px 0 0;
max-width: 720px;
text-align: center;
font-size: 10px;
line-height: 1.8;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(52,76,87,.56) !important;
}
}
@media (max-width: 768px){
body.gallery-page .gallery-upload{
margin-top: 44px !important;
gap: 14px;
padding-inline: 18px;
}
body.gallery-page .gallery-upload-copy{
margin-top: 0;
padding-top: 0;
font-size: 11px;
line-height: 1.62;
letter-spacing: .04em;
max-width: 330px;
}
body.gallery-page .gallery-upload-desktop-note{
display: none !important;
}
body.gallery-page .gallery-camera-trigger{
width: 34px !important;
height: 34px !important;
border-width: 1px;
}
body.gallery-page .gallery-camera-trigger svg{
width: 13px !important;
height: 13px !important;
}
body.gallery-page .gallery-upload-status{
font-size: 8.8px;
letter-spacing: .14em;
line-height: 1.6;
}
}
/* =========================================================
Gallery mobile polish — nickname step + footer separation
========================================================= */
body.gallery-page .gallery-upload-sheet__field input{
position: relative;
z-index: 6;
pointer-events: auto;
}
body.gallery-page .gallery-upload-sheet{
position: relative;
z-index: 5;
}
body.gallery-page .gallery-upload-sheet__inner{
position: relative;
z-index: 5;
}
body.gallery-page .gallery-upload-sheet__preview{
border: 1px solid rgba(52,76,87,.12);
}
@media (min-width: 769px){
body.gallery-page .gallery-upload-desktop-note{
display: block !important;
}
}
@media (max-width: 768px){
body.menu-page.gallery-page .page-body{
padding-top: clamp(220px, 26vh, 300px) !important;
padding-bottom: 120px !important;
}
body.gallery-page .gallery-upload{
margin-top: 92px !important;
margin-bottom: 72px !important;
gap: 12px;
}
body.gallery-page .gallery-upload-copy{
max-width: 320px;
margin-inline: auto;
}
body.gallery-page .gallery-upload[data-sheet-open="true"]{
margin-bottom: 130px !important;
}
body.gallery-page .gallery-upload[data-sheet-open="true"] .gallery-upload-sheet{
width: min(100%, 320px);
}
body.gallery-page .gallery-upload-sheet__inner{
padding: 14px 14px 16px;
}
body.gallery-page .gallery-upload-sheet__field{
margin-bottom: 16px;
}
body.gallery-page .gallery-upload-sheet__field span{
font-size: 9.6px;
letter-spacing: .15em;
}
body.gallery-page .gallery-upload-sheet__field input{
font-size: 16px;
line-height: 1.3;
padding: 4px 0 10px;
border-radius: 0;
-webkit-text-fill-color: rgba(52,76,87,.92);
}
body.gallery-page .gallery-upload-sheet__actions{
margin-top: 6px;
}
body.gallery-page .gallery-upload-status{
margin-top: 8px;
}
body.gallery-page .footer-wrap{
position: relative;
z-index: 1;
}
}
/* Gallery — keep the intro sentence visible and centered on all breakpoints */
body.gallery-page .gallery-upload-copy{display:block !important;}
body.gallery-page .gallery-upload-copy, body.gallery-page .gallery-upload-desktop-note{text-align:center !important;}
@media (min-width:769px){body.gallery-page .gallery-upload-copy{max-width:780px; margin:0 auto !important;}}
/* ============================
HOME — Rhythm section / final layout
Compact-luxury proportions: shorter teal panel, bigger cards,
cleaner stripes, centered CTA.
============================ */
@media (min-width: 981px){
body.home .promise{
padding-top: clamp(34px, 4.2vw, 64px);
padding-bottom: clamp(28px, 3.4vw, 48px);
}
body.home .promise-inner{
width: 100%;
max-width: 980px;
margin: 0 auto;
padding-top: 0;
padding-bottom: 0;
}
body.home #promise > .promise-inner > .section-divider{
padding-top: 0;
padding-bottom: clamp(36px, 4.6vh, 58px);
}
body.home .promise-copy{
max-width: 700px;
margin: clamp(78px, 6.2vw, 112px) auto clamp(104px, 7.8vw, 146px);
}
body.home .rhythm-section.rhythm-section--editorial{
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: clamp(88px, 7vw, 126px);
padding: clamp(50px, 4.2vw, 72px) 0 clamp(42px, 3.8vw, 62px);
overflow: visible;
background: repeating-linear-gradient(90deg, #567b81 0 2px, #f5efe8 2px 10px);
}
body.home .rhythm-section--editorial .rhythm-top-panel{
position: relative;
z-index: 2;
width: min(1500px, 92vw);
margin: 0 auto;
padding: clamp(54px, 4vw, 72px) clamp(52px, 4.2vw, 76px) clamp(118px, 8.2vw, 150px);
background: #456b72;
}
body.home .rhythm-section--editorial .rhythm-top-panel::before,
body.home .rhythm-section--editorial .rhythm-top-panel::after{ content: none; }
body.home .rhythm-section--editorial .rhythm-heading{
width: min(1120px, 78vw);
margin: 0 auto clamp(46px, 3.7vw, 60px);
display: grid;
grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
align-items: center;
column-gap: clamp(34px, 3.6vw, 58px);
}
body.home .rhythm-section--editorial .rhythm-heading-line{
display: block;
height: 1px;
background: rgba(247, 241, 233, 0.80);
}
body.home .rhythm-section--editorial .rhythm-heading-copy{
text-align: center;
transform: translateY(1px);
}
body.home .rhythm-section--editorial .rhythm-heading-script{
margin: 0;
color: #f6f0e9;
font-family: 'Mrs Saint Delafield', cursive;
font-size: clamp(56px, 4.25vw, 76px);
line-height: 0.88;
font-weight: 400;
letter-spacing: 0;
}
body.home .rhythm-section--editorial .rhythm-heading-small{
margin-top: 8px;
color: #f6f0e9;
font-family: 'Cormorant SC', serif;
font-size: clamp(15px, 1vw, 19px);
line-height: 1;
letter-spacing: 0.07em;
text-transform: none;
}
body.home .rhythm-section--editorial .rhythm-card-grid{
width: min(950px, 66vw);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(42px, 4.9vw, 78px);
justify-items: center;
align-items: start;
}
body.home .rhythm-section--editorial .rhythm-card{
position: relative;
width: clamp(222px, 15.2vw, 270px);
aspect-ratio: 1 / 1;
overflow: hidden;
}
body.home .rhythm-section--editorial .rhythm-card-image{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.53) saturate(0.78);
}
body.home .rhythm-section--editorial .rhythm-card-overlay{
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: clamp(23px, 1.65vw, 30px) 16px 24px;
color: #f7f1ea;
}
body.home .rhythm-section--editorial .rhythm-card-title{
margin: 0;
font-family: 'Cormorant Upright', serif;
font-size: clamp(20px, 1.48vw, 25px);
line-height: 1.06;
font-weight: 400;
}
body.home .rhythm-section--editorial .rhythm-card-text{
margin: auto 0 0;
font-family: 'Gotham Light','Gotham','Montserrat',system-ui,sans-serif;
font-size: clamp(12.5px, 0.94vw, 15.5px);
line-height: 1.34;
font-weight: 300;
letter-spacing: 0.01em;
}
body.home .rhythm-section--editorial .rhythm-stripes-panel{
position: relative;
z-index: 3;
margin-top: 0;
padding: clamp(34px, 2.8vw, 48px) 0 0;
background: transparent;
}
body.home .rhythm-section--editorial .rhythm-stripes-inner{
width: min(1500px, 92vw);
min-height: clamp(132px, 9.5vw, 174px);
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 0;
}
body.home .rhythm-section--editorial .menu-cta{
position: static;
transform: none;
margin-top: clamp(30px, 2.8vw, 46px);
}
}
@media (max-width: 980px){
body.home .rhythm-section.rhythm-section--editorial{
margin-top: 82px;
padding-top: 48px;
padding-bottom: 50px;
background: repeating-linear-gradient(90deg, #567b81 0 1.5px, #f5efe8 1.5px 8px);
}
body.home .rhythm-section--editorial .rhythm-top-panel{
width: min(92vw, 680px);
padding: 62px 28px 96px;
}
body.home .rhythm-section--editorial .rhythm-heading{
grid-template-columns: 1fr;
row-gap: 18px;
margin-bottom: 38px;
}
body.home .rhythm-section--editorial .rhythm-heading-line{ display: none; }
body.home .rhythm-section--editorial .rhythm-card-grid{
grid-template-columns: 1fr;
gap: 22px;
width: min(420px, 86vw);
margin-top: 0;
}
body.home .rhythm-section--editorial .rhythm-card{
width: 100%;
max-width: 320px;
}
body.home .rhythm-section--editorial .rhythm-stripes-panel{ padding-top: 32px; }
body.home .rhythm-section--editorial .rhythm-stripes-inner{ min-height: 132px; }
body.home .rhythm-section--editorial .menu-cta{ margin-top: 18px; }
}
/* ============================
GALLERY + SHELLS — micro adjustments
- Gallery a touch higher on desktop
- Desktop mobile-only note slightly smaller
- Shells more opaque across pages
============================ */
@media (min-width: 769px){
body.menu-page.gallery-page .page-body{
padding-top: clamp(156px, 18.5vh, 236px) !important;
}
body.gallery-page .gallery-upload-desktop-note{
font-size: 10px !important;
letter-spacing: .13em !important;
}
}
/* Keep shell graphics soft and elegant across pages without changing size/placement */
body.menu-page .menu-shell-img,
body.cnc-contacts-page .logo--menu .menu-shell-img,
body.cnc-contacts-page .logo--menu .menu-shell .menu-shell-img{
opacity: 0.22 !important;
}
@media (max-width: 600px){
body.menu-page .menu-shell-img,
body.cnc-contacts-page .logo--menu .menu-shell .menu-shell-img{
opacity: 0.24 !important;
}
}
/* ============================
GALLERY — footer-safe spacing
Keeps the footer in the normal document flow, below the gallery.
============================ */
body.gallery-page.has-footer{
min-height: 100vh;
display: flex;
flex-direction: column;
}
body.gallery-page.has-footer .page-body{
flex: 1 0 auto;
}
body.menu-page.gallery-page .page-body{
overflow: visible;
padding-bottom: clamp(150px, 15vh, 220px) !important;
}
body.menu-page.gallery-page .gallery-layout{
position: relative;
z-index: 1;
}
body.gallery-page .footer-wrap{
position: relative;
z-index: 2;
flex: 0 0 auto;
margin-top: clamp(24px, 4vh, 56px);
clear: both;
}
@media (max-width: 768px){
body.menu-page.gallery-page .page-body{
overflow: visible;
padding-bottom: 150px !important;
}
body.gallery-page .gallery-mobile{
margin-bottom: 56px;
}
body.gallery-page .footer-wrap{
margin-top: 34px;
}
}
/* ============================
FINAL MOBILE FIX — Rhythm teal panel restored
Keeps desktop untouched and restores the compact teal rectangle on phone/tablet.
============================ */
@media (max-width: 980px){
body.home .rhythm-section.rhythm-section--editorial{
padding-top: clamp(34px, 8vw, 48px) !important;
padding-bottom: clamp(34px, 8vw, 48px) !important;
}
body.home .rhythm-section--editorial .rhythm-top-panel{
background: #456b72 !important;
width: min(92vw, 680px) !important;
margin: 0 auto !important;
padding: clamp(48px, 9vw, 64px) clamp(22px, 6vw, 34px) clamp(58px, 10vw, 82px) !important;
}
body.home .rhythm-section--editorial .rhythm-heading-script,
body.home .rhythm-section--editorial .rhythm-heading-small{
color: #f6f0e9 !important;
}
body.home .rhythm-section--editorial .rhythm-card-grid{
width: min(330px, 82vw) !important;
gap: 24px !important;
}
body.home .rhythm-section--editorial .rhythm-card{
max-width: 300px !important;
}
body.home .rhythm-section--editorial .rhythm-stripes-panel{
padding-top: clamp(24px, 7vw, 34px) !important;
}
body.home .rhythm-section--editorial .rhythm-stripes-inner{
min-height: clamp(104px, 24vw, 132px) !important;
}
}
@media (max-width: 600px){
body.home .rhythm-section--editorial .rhythm-heading-script{
font-size: clamp(42px, 12vw, 56px) !important;
line-height: .94 !important;
}
body.home .rhythm-section--editorial .rhythm-heading-small{
font-size: 14px !important;
margin-top: 10px !important;
}
body.home .rhythm-section--editorial .rhythm-card-title{
font-size: clamp(20px, 6vw, 24px) !important;
}
body.home .rhythm-section--editorial .rhythm-card-text{
font-size: 13px !important;
}
}
/* ============================
FINAL FIX 2026-04-25
1) Mobile rhythm: teal panel + sand typography restored
2) Desktop gallery: block moved lower, footer space reduced
============================ */
@media (max-width: 980px){
body.home .rhythm-section.rhythm-section--editorial{
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: clamp(72px, 14vw, 104px) !important;
padding: clamp(32px, 7vw, 46px) 0 clamp(30px, 7vw, 44px) !important;
background: repeating-linear-gradient(90deg, #567b81 0 1.5px, #f5efe8 1.5px 8px) !important;
}
body.home .rhythm-section--editorial .rhythm-top-panel{
position: relative !important;
width: min(91vw, 640px) !important;
margin: 0 auto !important;
padding: clamp(54px, 12vw, 76px) clamp(22px, 6vw, 34px) clamp(64px, 13vw, 92px) !important;
background: #456b72 !important;
z-index: 1 !important;
}
body.home .rhythm-section--editorial .rhythm-heading{
display: grid !important;
grid-template-columns: 1fr !important;
justify-items: center !important;
text-align: center !important;
margin: 0 auto clamp(36px, 8vw, 48px) !important;
}
body.home .rhythm-section--editorial .rhythm-heading-line{
display: none !important;
}
body.home .rhythm-section--editorial .rhythm-heading-script{
margin: 0 !important;
color: #f6f0e9 !important;
font-family: 'Mrs Saint Delafield', cursive !important;
font-size: clamp(42px, 12vw, 56px) !important;
line-height: .94 !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
body.home .rhythm-section--editorial .rhythm-heading-small{
margin-top: 10px !important;
color: #f6f0e9 !important;
font-family: 'Cormorant SC', serif !important;
font-size: 14px !important;
line-height: 1 !important;
letter-spacing: .07em !important;
}
body.home .rhythm-section--editorial .rhythm-card-grid{
width: min(330px, 82vw) !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
justify-items: center !important;
}
body.home .rhythm-section--editorial .rhythm-card{
position: relative !important;
width: 100% !important;
max-width: 300px !important;
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
}
body.home .rhythm-section--editorial .rhythm-card-image{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
filter: brightness(.53) saturate(.78) !important;
}
body.home .rhythm-section--editorial .rhythm-card-overlay{
position: absolute !important;
inset: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: center !important;
padding: 24px 16px 24px !important;
color: #f6f0e9 !important;
z-index: 2 !important;
}
body.home .rhythm-section--editorial .rhythm-card-title{
margin: 0 !important;
color: #f6f0e9 !important;
font-family: 'Cormorant Upright', serif !important;
font-size: clamp(20px, 6vw, 24px) !important;
line-height: 1.06 !important;
font-weight: 400 !important;
}
body.home .rhythm-section--editorial .rhythm-card-text{
margin: auto 0 0 !important;
color: #f6f0e9 !important;
font-family: 'Gotham Light','Gotham','Montserrat',system-ui,sans-serif !important;
font-size: 13px !important;
line-height: 1.34 !important;
font-weight: 300 !important;
letter-spacing: .01em !important;
}
body.home .rhythm-section--editorial .rhythm-stripes-panel{
padding-top: clamp(24px, 7vw, 34px) !important;
}
body.home .rhythm-section--editorial .rhythm-stripes-inner{
width: min(91vw, 640px) !important;
min-height: clamp(104px, 24vw, 132px) !important;
margin: 0 auto !important;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
}
}
@media (min-width: 769px){
body.menu-page.gallery-page .page-body{
padding-top: clamp(210px, 24vh, 300px) !important;
padding-bottom: clamp(66px, 7vh, 98px) !important;
}
body.menu-page.gallery-page .gallery-intro{
margin-top: 0 !important;
}
body.menu-page.gallery-page .gallery-grid{
margin-top: clamp(58px, 6.5vh, 92px) !important;
}
body.gallery-page .footer-wrap{
margin-top: clamp(10px, 2vh, 26px) !important;
}
}
/* ============================
MENU&BAR — mobile descriptive page
Mobile now mirrors the desktop page instead of opening the PDF directly:
terracotta arch first, descriptive copy below.
============================ */
@media (max-width: 768px){
body.menu-page{
background-color: #f7f3ed;
min-height: 100vh;
}
body.menu-page .menu-page-bg{
opacity: .40;
background-position: center top;
}
body.menu-page .page-body{
align-items: flex-start !important;
justify-content: flex-start !important;
padding-top: clamp(164px, 23vh, 220px) !important;
padding-bottom: clamp(150px, 20vh, 210px) !important;
}
body.menu-page .menu-layout{
width: min(100%, 520px);
margin: 0 auto;
padding: 0 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(46px, 9vh, 68px);
}
body.menu-page .menu-tiles.menu-tiles--single{
order: 1;
width: 100%;
margin: 0 auto;
padding: 0 !important;
display: flex !important;
justify-content: center;
align-items: center;
}
body.menu-page .menu-intro{
order: 2;
width: 100%;
margin: 0 auto !important;
text-align: center;
}
body.menu-page .menu-philosophy{
width: min(100%, 342px);
margin: 0 auto;
}
body.menu-page .menu-philosophy::before,
body.menu-page .menu-philosophy::after{
content: "";
display: block;
height: 1px;
background: #C4BFB2;
opacity: .64;
margin-left: auto;
margin-right: auto;
}
body.menu-page .menu-philosophy::before{
width: 86px;
margin-bottom: 26px;
}
body.menu-page .menu-philosophy::after{
width: min(230px, 68vw);
margin-top: 24px;
}
body.menu-page .menu-philosophy p{
color: #7B7871;
font-family: 'Gotham-Light', 'Gotham Light', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-style: italic;
font-weight: 300;
font-size: 12.8px;
line-height: 1.72;
letter-spacing: .075em;
text-shadow: 0 16px 26px rgba(118,106,94,.14);
}
body.menu-page .menu-philosophy p:first-child{ margin-top: 0 !important; }
body.menu-page .menu-philosophy p + p{ margin-top: 16px !important; }
body.menu-page .menu-philosophy br{ display: none; }
body.menu-page .menu-card{
--arch-outline: #b77752;
--arch-fill: #cf997b;
--arch-core: #b2673e;
position: relative;
width: clamp(182px, 50vw, 224px);
height: clamp(284px, 76vw, 344px);
display: block;
margin: 0 auto;
text-decoration: none;
background: transparent;
overflow: visible;
-webkit-tap-highlight-color: transparent;
transition: opacity .2s ease, transform .2s ease;
}
body.menu-page .menu-card::before,
body.menu-page .menu-card::after{
content: "";
position: absolute;
inset: 0;
border: 2px solid var(--arch-outline);
border-radius: 999px 999px 0 0;
box-sizing: border-box;
pointer-events: none;
}
body.menu-page .menu-card::after{ inset: 9px; }
body.menu-page .menu-card__label{
position: absolute;
inset: 17px;
border-radius: 999px 999px 0 0;
background: var(--arch-fill);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: 6px;
color: #f7efe6;
text-align: center;
z-index: 1;
box-sizing: border-box;
overflow: hidden;
}
body.menu-page .menu-card__label::before{
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 48%;
height: 84%;
border-radius: 999px 999px 0 0;
background: var(--arch-core);
z-index: -1;
}
body.menu-page .menu-card__label span{
display: block;
position: relative;
z-index: 2;
color: #f7efe6;
}
body.menu-page .menu-card__label span:first-child{
font-family: 'Gotham Light','Gotham','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-size: 11.5px;
letter-spacing: .09em;
line-height: 1;
margin-bottom: 4px;
}
body.menu-page .menu-card__label span:last-child{
font-family: 'Cormorant Upright', 'Cormorant Garamond', serif;
font-size: 19px;
letter-spacing: .03em;
line-height: .95;
}
body.menu-page .menu-card:active{
opacity: .82;
transform: translateY(1px);
}
}
/* =========================================================
MENU&BAR MOBILE — overlap fix
Header/logo, arch, description and footer are kept in normal flow.
========================================================= */
@media (max-width: 768px){
body.menu-page.has-footer,
body.menu-page{
display: flex !important;
flex-direction: column !important;
min-height: 100svh !important;
overflow-x: hidden !important;
}
body.menu-page .menu-page-bg{
position: fixed !important;
inset: 0 !important;
z-index: 0 !important;
opacity: .32 !important;
}
body.menu-page .site-header{
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
z-index: 3 !important;
padding-top: calc(18px + env(safe-area-inset-top)) !important;
padding-bottom: 18px !important;
padding-inline: calc(12px + env(safe-area-inset-left)) calc(12px + env(safe-area-inset-right)) !important;
}
body.menu-page .header-grid{
grid-template-columns: 1fr 1fr !important;
grid-template-areas:
"navl navr"
"logo logo" !important;
row-gap: 14px !important;
column-gap: 8px !important;
}
body.menu-page .nav-left{ grid-area: navl !important; }
body.menu-page .nav-right{ grid-area: navr !important; }
body.menu-page .logo--menu{ grid-area: logo !important; justify-self: center !important; }
body.menu-page .menu-shell{
width: clamp(176px, 48vw, 230px) !important;
height: clamp(142px, 39vw, 188px) !important;
}
body.menu-page .menu-shell-img{
opacity: .14 !important;
}
body.menu-page .page-body{
position: relative !important;
z-index: 2 !important;
flex: 0 0 auto !important;
min-height: auto !important;
display: block !important;
padding-top: 30px !important;
padding-bottom: 54px !important;
}
body.menu-page .menu-layout{
width: min(100%, 520px) !important;
margin: 0 auto !important;
padding: 0 24px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 58px !important;
}
body.menu-page .menu-tiles.menu-tiles--single{
order: 1 !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
body.menu-page .menu-card{
width: clamp(190px, 54vw, 232px) !important;
height: clamp(296px, 84vw, 358px) !important;
margin: 0 auto !important;
}
body.menu-page .menu-intro{
order: 2 !important;
width: 100% !important;
margin: 0 auto !important;
text-align: center !important;
}
body.menu-page .menu-philosophy{
width: min(100%, 350px) !important;
margin: 0 auto !important;
}
body.menu-page .menu-philosophy p{
font-size: 13px !important;
line-height: 1.86 !important;
}
body.menu-page .footer-wrap{
position: relative !important;
z-index: 2 !important;
flex: 0 0 auto !important;
margin-top: 10px !important;
padding: 22px 0 calc(22px + env(safe-area-inset-bottom)) !important;
}
}
/* Global shell opacity softening */
body.menu-page .menu-shell-img{
opacity: .14 !important;
}