/* ============================================================
Juntos Offices — Tokens
Source: Juntos Brand Guidelines v1.6 (Jan 2026)
============================================================ */
@font-face {
font-family: "Lora";
src: url("../fonts/Lora-VariableFont_wght.ttf") format("truetype-variations");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lora";
src: url("../fonts/Lora-Italic-VariableFont_wght.ttf") format("truetype-variations");
font-weight: 400 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Lato";
src: url("../fonts/Lato-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lato";
src: url("../fonts/Lato-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Self-hosted weights (replaces Google Fonts ). Latin and Latin-Extended
subsets only — covers all English-language content + Western European
diacritics. Loaded with font-display: swap so they never block render. */
@font-face {
font-family: "Lato";
src: url("../fonts/lato-700-normal-latin.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Lato";
src: url("../fonts/lato-700-normal-latin-ext.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Lato";
src: url("../fonts/lato-900-normal-latin.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Lato";
src: url("../fonts/lato-900-normal-latin-ext.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Bodoni Moda";
src: url("../fonts/bodoni-moda-500-italic-latin.woff2") format("woff2");
font-weight: 500;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Bodoni Moda";
src: url("../fonts/bodoni-moda-500-italic-latin-ext.woff2") format("woff2");
font-weight: 500;
font-style: italic;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Bodoni Moda";
src: url("../fonts/bodoni-moda-700-italic-latin.woff2") format("woff2");
font-weight: 700;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Bodoni Moda";
src: url("../fonts/bodoni-moda-700-italic-latin-ext.woff2") format("woff2");
font-weight: 700;
font-style: italic;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* ------------------------------------------------------------
PRIMARY PALETTE — v1.6 §7
------------------------------------------------------------ */
--c-laurel: #204420; /* HERO — deep racing green */
--c-cream: #fdf8f0; /* PAGE — never pure white */
--c-gold: #ffdb4f; /* ACCENT — dot + CTA accent */
--c-moss: #739e73; /* SECONDARY — daytime sage */
--c-graphite: #424040; /* BODY — warm near-black */
--c-noir: #000000;
--c-blanc: #ffffff;
/* Heritage extension */
--c-terracotta: #b86846;
--c-cognac: #a06a3e;
--c-chestnut: #5e3a1f;
--c-oat: #d9b78a;
/* Cool partner (v1.5) */
--c-indigo: #2c3e57;
/* Foil rules only */
--c-brass: #a78348;
/* Approved 20% tints */
--c-laurel-80: #4d684d;
--c-laurel-60: #79917a;
--c-laurel-40: #a6baa6;
--c-laurel-20: #d2e2d2;
--c-moss-80: #8eb18e;
--c-moss-60: #abc4ab;
--c-moss-40: #c7d7c7;
--c-moss-20: #e3ebe3;
--c-gold-80: #ffe272;
--c-gold-60: #ffe895;
--c-gold-40: #ffefb8;
--c-gold-20: #fff5db;
--c-graphite-80: #686666;
--c-graphite-60: #8d8c8c;
--c-graphite-40: #b3b2b2;
--c-graphite-20: #d9d9d9;
--c-terracotta-80: #c0805f;
--c-terracotta-60: #ce9c81;
--c-terracotta-40: #dcb8a3;
--c-terracotta-20: #ead4c6;
--c-oat-80: #dfc299;
--c-oat-60: #e6cfae;
--c-oat-40: #ecdcc4;
--c-oat-20: #f3e9d9;
--c-indigo-80: #4f5d70;
--c-indigo-60: #707a89;
--c-indigo-40: #9298a3;
--c-indigo-20: #d3d5d9;
/* ------------------------------------------------------------
SEMANTIC SURFACES
------------------------------------------------------------ */
--bg: var(--c-cream);
--bg-card: var(--c-blanc);
--bg-hero: var(--c-laurel); /* v1.6 hero */
--bg-dark: var(--c-graphite);
--fg: var(--c-graphite);
--fg-muted: var(--c-graphite-80);
--fg-soft: var(--c-graphite-60);
--fg-inverse: var(--c-cream);
--accent: var(--c-gold);
--accent-alt: var(--c-moss);
--border: rgba(66, 64, 64, 0.14);
--border-soft: rgba(66, 64, 64, 0.08);
--border-strong: rgba(66, 64, 64, 0.32);
--border-cream: rgba(253, 248, 240, 0.18);
/* ------------------------------------------------------------
TYPOGRAPHY — v1.6 §4
------------------------------------------------------------ */
--font-display: "Bodoni Moda", "Lora", Georgia, serif;
--font-serif: "Lora", Georgia, "Times New Roman", serif;
--font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--fs-display: clamp(56px, 9vw, 96px);
--fs-h1: clamp(40px, 5.4vw, 64px);
--fs-h2: clamp(28px, 3.5vw, 40px);
--fs-h3: 28px;
--fs-h4: 20px;
--fs-eyebrow: 13px;
--fs-lede: 20px;
--fs-body: 16px; /* Body text — the default size */
--fs-small: 14px; /* Small supporting text (cards, meta, helper) */
--fs-caption: 12px;
--fs-quote: clamp(24px, 2.6vw, 30px);
--lh-display: 1.05;
--lh-h1: 1.08;
--lh-h2: 1.10;
--lh-h3: 1.21;
--lh-h4: 1.30;
--lh-body: 1.625;
--lh-lede: 1.50;
--lh-quote: 1.27;
--ls-display: -0.022em;
--ls-h1: -0.012em;
--ls-h2: -0.008em;
--ls-h3: 0;
--ls-eyebrow: 0.22em;
--ls-button: 0.02em;
/* ------------------------------------------------------------
SPACING — 4px base
------------------------------------------------------------ */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
--s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;
--container-sm: 720px;
--container-md: 960px;
--container-lg: 1200px;
--container-xl: 1360px;
--r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px;
--r-xl: 28px; --r-2xl: 40px; --r-pill: 999px;
--shadow-xs: 0 1px 2px rgba(66, 64, 64, 0.06);
--shadow-sm: 0 2px 8px rgba(66, 64, 64, 0.06), 0 1px 2px rgba(66, 64, 64, 0.04);
--shadow-md: 0 8px 24px rgba(66, 64, 64, 0.08), 0 2px 6px rgba(66, 64, 64, 0.04);
--shadow-lg: 0 24px 56px rgba(66, 64, 64, 0.12), 0 4px 12px rgba(66, 64, 64, 0.06);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 140ms;
--dur-base: 220ms;
--dur-slow: 320ms;
/* Emil's stronger easing — exponential, punchy. Applied to UI motion below. */
--ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
--ease-inout-strong: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
/* ============================================================
ELEMENT DEFAULTS
============================================================ */
html {
color: var(--fg);
background: var(--bg);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
html { background-color: var(--c-cream); }
body { margin: 0; background-color: var(--c-cream); }
h1, .h1 {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: var(--fs-h1);
line-height: var(--lh-h1);
letter-spacing: var(--ls-h1);
margin: 0 0 var(--s-4);
color: var(--fg);
text-wrap: balance;
}
.display {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: var(--fs-display);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
margin: 0 0 var(--s-4);
font-optical-sizing: auto;
}
h2, .h2 {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: var(--fs-h2);
line-height: var(--lh-h2);
letter-spacing: var(--ls-h2);
margin: 0 0 var(--s-4);
color: var(--fg);
text-wrap: balance;
}
h3, .h3 {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: var(--fs-h3);
line-height: var(--lh-h3);
letter-spacing: var(--ls-h3);
margin: 0 0 var(--s-3);
color: var(--fg);
}
h4, .h4 {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-h4);
line-height: var(--lh-h4);
margin: 0 0 var(--s-3);
color: var(--fg);
}
.eyebrow {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--fg-muted);
margin: 0 0 var(--s-4);
}
.lede {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-lede);
line-height: var(--lh-lede);
color: var(--fg);
margin: 0 0 var(--s-6);
text-wrap: pretty;
max-width: 56ch;
}
p, .p {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-body);
line-height: var(--lh-body);
margin: 0 0 var(--s-4);
color: var(--fg);
text-wrap: pretty;
max-width: 64ch;
}
small, .small, caption {
font-family: var(--font-sans);
font-size: var(--fs-caption);
color: var(--fg-muted);
}
blockquote, .pull-quote {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: var(--fs-quote);
line-height: var(--lh-quote);
color: var(--fg);
margin: var(--s-8) 0;
padding-left: var(--s-6);
border-left: 2px solid var(--c-gold);
text-wrap: balance;
}
a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--border-strong);
transition: text-decoration-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out);
}
a:hover { text-decoration-color: var(--c-gold); }
::selection { background: var(--c-gold); color: var(--c-graphite); }
.brand-dot {
display: inline-block;
width: 0.30em;
height: 0.30em;
background: var(--c-gold);
border-radius: 999px;
vertical-align: baseline;
margin-left: 0.04em;
transform: translateY(0.02em);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* Juntos — site styles.
Brand Guidelines v1.6 (Jan 2026).
Cream-dominant page, Laurel hero, Gold dot one-per-artefact. */
@import url("./tokens.css");
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--fg); }
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; }
.container {
max-width: var(--container-lg);
margin: 0 auto;
padding: 0 32px;
}
.container-xl {
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 32px;
}
/* =========================================================
Brand wordmark
========================================================= */
.brand-logo {
display: inline-flex;
align-items: baseline;
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: 28px;
line-height: 1;
color: var(--c-graphite);
text-decoration: none;
}
.brand-logo .dot {
width: 0.30em;
height: 0.30em;
background: var(--c-gold);
border-radius: 999px;
display: inline-block;
margin-left: 2px;
align-self: flex-end;
margin-bottom: 0.12em;
}
.brand-logo.cream { color: var(--c-cream); }
/* =========================================================
Site header (sticky)
========================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(253, 248, 240, 0.92);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid var(--border-soft);
}
.site-header .inner {
display: flex;
align-items: center;
gap: 24px;
padding: 18px 32px;
max-width: var(--container-xl);
margin: 0 auto;
}
/* Nav takes the middle column, centred — pushes the CTA group to the right */
.site-header > .inner > nav {
flex: 1;
display: flex;
justify-content: center;
}
/* Members Portal + Book a tour sit as a tight group on the right */
.header-ctas {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.nav-links {
display: flex;
gap: 28px;
list-style: none;
margin: 0;
padding: 0;
align-items: center;
}
.nav-links a {
position: relative;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 400;
color: var(--c-graphite);
text-decoration: none;
opacity: 0.78;
padding: 6px 0;
transition: opacity var(--dur-base) var(--ease-out);
}
.nav-links a:hover { opacity: 1; }
/* v1.6 §9.3 — gold dot as system signal (one per artefact, marking the active nav item) */
.nav-links a.active { opacity: 1; font-weight: 700; }
.nav-links a.active::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--c-gold);
margin-left: 8px;
vertical-align: middle;
transform: translateY(-1px);
}
.nav-toggle {
display: none;
background: transparent;
border: 1px solid rgba(66, 64, 64, 0.22);
border-radius: 999px;
padding: 8px 14px;
font-family: var(--font-sans);
font-size: 13px;
cursor: pointer;
}
/* =========================================================
Buttons
========================================================= */
.btn {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 700;
letter-spacing: var(--ls-button);
border-radius: var(--r-pill);
padding: 13px 22px;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
white-space: nowrap;
transition: background var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.btn:active { transform: scale(0.985); }
.btn:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.btn-primary { background: var(--c-graphite); color: var(--c-cream); }
.btn-primary:hover { background: #585656; }
.btn-laurel { background: var(--c-laurel); color: var(--c-cream); }
.btn-laurel:hover { background: #2a532a; }
.btn-accent { background: var(--c-gold); color: var(--c-graphite); }
.btn-accent:hover { background: var(--c-gold-80); }
.btn-secondary {
background: transparent;
color: var(--c-graphite);
border: 1px solid rgba(66, 64, 64, 0.28);
}
.btn-secondary:hover { background: rgba(66, 64, 64, 0.04); }
.btn-secondary.on-laurel {
color: var(--c-cream);
border-color: rgba(253, 248, 240, 0.32);
}
.btn-secondary.on-laurel:hover { background: rgba(253, 248, 240, 0.06); }
.btn-ghost {
background: transparent;
color: var(--c-graphite);
padding: 10px 4px;
font-weight: 700;
}
.btn-ghost::after { content: " →"; transition: transform 220ms var(--ease-out); display: inline-block; }
.btn-ghost:hover::after { transform: translateX(3px); }
.btn-ghost.cream { color: var(--c-cream); }
.btn-lg { padding: 16px 28px; font-size: 15px; }
/* =========================================================
Pills / tags
========================================================= */
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
background: var(--c-cream);
color: var(--c-graphite);
border: 1px solid rgba(66, 64, 64, 0.16);
}
.pill .dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--c-moss);
}
.pill-laurel { background: var(--c-laurel); color: var(--c-cream); border-color: transparent; }
.pill-laurel .dot { background: var(--c-gold); }
.pill-gold { background: var(--c-gold); color: var(--c-graphite); border-color: transparent; }
.pill-moss { background: var(--c-moss); color: var(--c-cream); border-color: transparent; }
.pill-terracotta { background: var(--c-terracotta); color: var(--c-cream); border-color: transparent; }
.pill-oat { background: var(--c-oat); color: var(--c-graphite); border-color: transparent; }
/* =========================================================
Titles: two lines maximum, site-wide
Manual
breaks were removed from all h1/h2 markup — headings
wrap naturally (one line when it fits) and text-wrap: balance
(tokens.css) splits any wrap into two even lines.
========================================================= */
/* =========================================================
Section blocks
========================================================= */
section.block { padding: 96px 0; }
section.block.tight { padding: 64px 0; }
section.block.cream { background: var(--c-cream); }
section.block.blanc { background: var(--c-blanc); }
section.block.oat { background: var(--c-oat-20); }
section.block.laurel {
background: var(--c-laurel);
color: var(--c-cream);
}
section.block.laurel .eyebrow { color: rgba(253, 248, 240, 0.7); }
section.block.laurel h1,
section.block.laurel h2,
section.block.laurel h3,
section.block.laurel h4 { color: var(--c-cream); }
section.block.laurel p { color: rgba(253, 248, 240, 0.86); }
section.block.dark { background: var(--c-graphite); color: var(--c-cream); }
section.block.dark .eyebrow { color: rgba(253, 248, 240, 0.6); }
section.block.dark h1,
section.block.dark h2,
section.block.dark h3,
section.block.dark h4 { color: var(--c-cream); }
section.block.dark p { color: rgba(253, 248, 240, 0.85); }
.section-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: end;
margin-bottom: 56px;
}
.section-head h2 { margin: 0; max-width: none; text-wrap: balance; }
.section-head .eyebrow { margin-bottom: 12px; }
.gold-dot {
display: inline-block;
width: 0.30em;
height: 0.30em;
border-radius: 999px;
background: var(--c-gold);
margin-left: 0.06em;
vertical-align: baseline;
}
/* =========================================================
Hero — Laurel ground (v1.6)
========================================================= */
.hero {
background: var(--c-laurel);
color: var(--c-cream);
padding: 120px 32px 96px;
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../patterns/moorish-star.svg");
background-size: 220px;
background-repeat: repeat;
opacity: 0.05;
pointer-events: none;
}
.hero .inner {
position: relative;
max-width: var(--container-xl);
margin: 0 auto;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 72px;
align-items: center;
}
.hero .eyebrow { color: rgba(253, 248, 240, 0.72); margin-bottom: 24px; }
.hero h1 {
color: var(--c-cream);
font-size: clamp(48px, 6.8vw, 88px);
line-height: 1.02;
margin: 0 0 28px;
letter-spacing: -0.012em;
}
.hero .display {
color: var(--c-cream);
margin: 0 0 24px;
font-size: clamp(72px, 11vw, 144px);
line-height: 0.96;
}
.hero p.lede {
color: rgba(253, 248, 240, 0.88);
font-size: 20px;
line-height: 1.5;
margin: 0 0 36px;
max-width: 46ch;
}
.hero .ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.hero-art {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 480px;
}
.hero-art .frame {
background: var(--c-cream);
border-radius: var(--r-2xl);
width: 100%;
aspect-ratio: 4/5;
max-width: 460px;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
}
.hero-art .frame img { width: 92%; height: 100%; object-fit: contain; }
/* Space-finder */
.space-finder {
background: var(--c-cream);
border-radius: var(--r-xl);
padding: 14px;
margin-top: 40px;
display: grid;
grid-template-columns: 1.2fr 1fr 1fr auto;
gap: 4px;
align-items: stretch;
max-width: 680px;
box-shadow: var(--shadow-md);
color: var(--c-graphite);
}
.space-finder .field {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 14px;
border-right: 1px solid var(--border-soft);
}
.space-finder .field:nth-child(3) { border-right: 0; }
.space-finder label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--fg-muted);
/* Labels must never wrap onto two lines. Even in narrow columns,
keep the label on one line — the field can absorb the width. */
white-space: nowrap;
}
.space-finder select,
.space-finder input {
font-family: var(--font-sans);
font-size: 14px;
color: var(--c-graphite);
background: transparent;
border: 0;
padding: 2px 0;
appearance: none;
cursor: pointer;
/* Long option text shouldn't push the layout — overflow gracefully */
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.space-finder select:focus,
.space-finder input:focus { outline: none; }
/* =========================================================
Page title
========================================================= */
.page-title {
background: var(--c-cream);
padding: 96px 32px 56px;
}
.page-title .inner { max-width: var(--container-xl); margin: 0 auto; }
.page-title h1 {
font-size: clamp(44px, 5.8vw, 72px);
margin: 12px 0 16px;
}
.page-title p {
font-size: 18px;
max-width: 60ch;
color: var(--fg-muted);
margin: 0;
}
/* =========================================================
Location cards (v1.6 pattern reassignment)
========================================================= */
.location-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.location-card {
background: var(--c-blanc);
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--border-soft);
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.location-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.location-card .photo {
height: 260px;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 16px;
gap: 12px;
position: relative;
isolation: isolate;
background-color: var(--c-graphite);
background-size: 100px;
background-repeat: repeat;
}
.location-card .photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.42) 100%);
z-index: 0;
}
.location-card .photo > * { position: relative; z-index: 1; }
/* Bedford Row — Victorian Encaustic on Graphite */
.location-card .photo.bedford {
background-color: var(--c-graphite);
background-image: url("../patterns/encaustic-victorian.svg");
background-size: 110px;
}
/* Furnival Street — Terracotta Quatrefoil on Terracotta */
.location-card .photo.furnival {
background-color: var(--c-terracotta);
background-image: url("../patterns/terracotta-quatrefoil.svg");
background-size: 110px;
}
/* Sugar House Island — Moorish Star on Laurel */
.location-card .photo.sugar {
background-color: var(--c-laurel);
background-image: url("../patterns/moorish-star.svg");
background-size: 110px;
}
.location-card .photo .corner-mark {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: 18px;
color: var(--c-cream);
display: inline-flex;
align-items: baseline;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
.location-card .photo .corner-mark .dot {
width: 0.28em;
height: 0.28em;
background: var(--c-gold);
border-radius: 999px;
display: inline-block;
margin-left: 2px;
}
.location-card .body { padding: 24px 24px 28px; }
.location-card h3 { margin: 0; font-size: 28px; }
.location-card .area {
font-family: var(--font-sans);
font-size: var(--fs-small);
color: var(--fg-muted);
margin-top: 6px;
}
.location-card .house-line {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: var(--fs-small);
color: var(--c-graphite);
margin-top: 14px;
line-height: 1.5;
max-width: 30ch;
}
.location-card .meta {
display: flex;
gap: 14px;
margin-top: 16px;
font-family: var(--font-sans);
font-size: var(--fs-small);
color: var(--fg-muted);
flex-wrap: wrap;
}
.location-card .meta b { color: var(--c-graphite); font-weight: 700; }
.location-card .cta {
margin-top: 18px;
font-family: var(--font-sans);
font-weight: 700;
font-size: 14px;
color: var(--c-graphite);
display: inline-flex;
gap: 6px;
}
.location-card .cta::after { content: " →"; transition: transform 220ms var(--ease-out); }
.location-card:hover .cta::after { transform: translateX(3px); }
/* =========================================================
Value props (numbered)
========================================================= */
.value-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.value-card { display: flex; flex-direction: column; gap: 12px; }
.value-card .num {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: 44px;
color: var(--c-laurel);
line-height: 1;
}
.value-card h4 { margin: 0; font-size: 22px; }
.value-card p { margin: 0; color: var(--fg-muted); max-width: 32ch; }
/* =========================================================
Price line — used on coworking membership cards
========================================================= */
.value-card .price-line {
display: flex;
align-items: baseline;
gap: 6px;
margin: 0;
color: var(--c-graphite);
}
.value-card .price-from {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--fg-muted);
text-transform: uppercase;
}
.value-card .price {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: 36px;
line-height: 1;
color: var(--c-laurel);
}
.value-card .price-period {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--fg-muted);
}
/* =========================================================
Amenity strip
========================================================= */
.amenity-strip {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 28px;
margin-top: 16px;
}
.amenity {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
font-family: var(--font-sans);
font-size: 14px;
color: var(--c-graphite);
}
.amenity svg {
width: 22px;
height: 22px;
stroke: var(--c-laurel);
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.amenity .label { font-weight: 700; }
.amenity .note { color: var(--fg-muted); font-size: 13px; }
/* =========================================================
Signature Rituals (v1.6 §6.6)
========================================================= */
.rituals {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border-top: 1px solid var(--border);
}
.ritual {
padding: 28px 0;
border-bottom: 1px solid var(--border);
display: grid;
grid-template-columns: 140px 1fr auto;
gap: 24px;
align-items: baseline;
}
.ritual:nth-child(odd) { padding-right: 32px; border-right: 1px solid var(--border); padding-left: 0; }
.ritual:nth-child(even) { padding-left: 32px; }
.ritual .when {
font-family: var(--font-sans);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-muted);
}
.ritual .what {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: 22px;
color: var(--c-graphite);
line-height: 1.25;
}
.ritual .where {
font-family: var(--font-sans);
font-size: 13px;
color: var(--fg-muted);
}
/* =========================================================
Testimonial
========================================================= */
.testimonial {
display: grid;
grid-template-columns: 1fr 1.8fr;
gap: 64px;
align-items: center;
}
.testimonial .face {
background: var(--c-cream);
border-radius: var(--r-xl);
aspect-ratio: 4/5;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
border: 1px solid var(--border-soft);
}
.testimonial .face img { width: 84%; height: 100%; object-fit: contain; }
.testimonial .quote {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(26px, 2.6vw, 34px);
line-height: 1.28;
color: var(--c-graphite);
margin: 0;
text-wrap: balance;
border-left: 0;
padding-left: 0;
}
.testimonial .cite {
margin-top: 28px;
font-family: var(--font-sans);
font-weight: 700;
color: var(--c-graphite);
}
.testimonial .cite small {
display: block;
font-weight: 400;
color: var(--fg-muted);
margin-top: 4px;
font-size: 13px;
}
/* =========================================================
Editorial block (asymmetric, one illustration + copy)
========================================================= */
.editorial {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 96px;
align-items: center;
}
.editorial .art {
background: var(--c-cream);
border-radius: var(--r-xl);
aspect-ratio: 5/6;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
border: 1px solid var(--border-soft);
}
.editorial .art img { width: 86%; height: 100%; object-fit: contain; }
.editorial.flipped .art { order: 2; }
.editorial h2 { margin: 0 0 20px; }
.editorial p { color: var(--fg-muted); max-width: 52ch; }
/* =========================================================
CTA block
========================================================= */
.cta-block {
background: var(--c-laurel);
color: var(--c-cream);
border-radius: var(--r-xl);
padding: 64px;
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 48px;
align-items: center;
position: relative;
overflow: hidden;
}
.cta-block::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../patterns/moorish-star.svg");
background-size: 200px;
background-repeat: repeat;
opacity: 0.06;
pointer-events: none;
}
.cta-block > * { position: relative; }
.cta-block h2 { color: var(--c-cream); margin: 0; }
.cta-block p {
color: rgba(253, 248, 240, 0.82);
margin: 16px 0 0;
max-width: 44ch;
}
.cta-block .ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-self: end;
}
/* =========================================================
Newsletter
========================================================= */
.newsletter {
background: var(--c-oat);
border-radius: var(--r-xl);
padding: 56px;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 48px;
align-items: center;
}
.newsletter h2 { margin: 0 0 12px; }
.newsletter p {
color: var(--c-graphite);
max-width: 40ch;
margin: 0;
opacity: 0.86;
}
.newsletter form {
display: flex;
gap: 4px;
background: var(--c-cream);
border-radius: 999px;
padding: 6px;
box-shadow: var(--shadow-sm);
}
.newsletter input {
flex: 1;
border: 0;
background: transparent;
font-family: var(--font-sans);
font-size: 15px;
padding: 12px 18px;
color: var(--c-graphite);
}
.newsletter input:focus { outline: none; }
/* =========================================================
Footer
========================================================= */
.site-footer {
background: var(--c-graphite);
color: var(--c-cream);
padding: 96px 32px 32px;
position: relative;
overflow: hidden;
}
.site-footer::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../patterns/encaustic-victorian.svg");
background-size: 140px;
background-repeat: repeat;
opacity: 0.04;
pointer-events: none;
}
.site-footer .inner {
position: relative;
max-width: var(--container-xl);
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 56px;
padding-bottom: 40px;
}
.site-footer h5,
.site-footer .footer-section > summary {
font-family: var(--font-sans);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--c-cream);
margin: 0 0 20px;
}
/* Footer sections use for native mobile dropdown behaviour.
Desktop: always show the list, no toggle UI, no triangle. */
.site-footer .footer-section { display: block; }
.site-footer .footer-section > summary {
list-style: none;
cursor: default;
display: block;
}
.site-footer .footer-section > summary::-webkit-details-marker { display: none; }
.site-footer .footer-section > ul { display: block !important; }
.site-footer ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.site-footer a {
color: var(--c-cream);
text-decoration: none;
font-size: 14px;
opacity: 1;
}
.site-footer a:hover {
opacity: 1;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: var(--c-gold);
}
.site-footer .brand-line {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--c-cream);
margin-top: 16px;
max-width: 32ch;
}
.site-footer .legal {
position: relative;
max-width: var(--container-xl);
margin: 24px auto 0;
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--c-cream);
flex-wrap: wrap;
gap: 12px;
}
.social-links {
display: flex;
gap: 10px;
margin-top: 20px;
}
.social-links a {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(253, 248, 240, 0.2);
border-radius: 999px;
opacity: 0.88;
transition: border-color var(--dur-base) var(--ease-out);
}
.social-links svg {
width: 16px;
height: 16px;
stroke: var(--c-cream);
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.social-links a:hover { border-color: var(--c-gold); opacity: 1; }
/* =========================================================
Team grid
========================================================= */
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.team-card {
background: var(--c-cream);
border-radius: var(--r-lg);
padding: 20px 20px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
border: 1px solid var(--border-soft);
transition: background var(--dur-base) var(--ease-out);
}
.team-card:hover { background: var(--c-blanc); }
.team-card .frame {
width: 100%;
aspect-ratio: 4/5;
display: flex;
align-items: flex-end;
justify-content: center;
}
.team-card .frame img { width: 90%; height: 100%; object-fit: contain; }
.team-card h4 { margin: 0; font-size: 18px; text-align: center; }
.team-card .role {
font-family: var(--font-sans);
font-size: 13px;
color: var(--fg-muted);
}
/* =========================================================
Location detail panel
========================================================= */
.location-detail {
background: var(--c-blanc);
border-radius: var(--r-xl);
border: 1px solid var(--border-soft);
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 0;
overflow: hidden;
margin-top: 32px;
}
.location-detail .left { padding: 56px; }
.location-detail .right {
min-height: 480px;
background-color: var(--c-graphite);
background-size: 140px;
background-repeat: repeat;
}
.location-detail .right.bedford {
background-color: var(--c-graphite);
background-image: url("../patterns/encaustic-victorian.svg");
}
.location-detail .right.furnival {
background-color: var(--c-terracotta);
background-image: url("../patterns/terracotta-quatrefoil.svg");
}
.location-detail .right.sugar {
background-color: var(--c-laurel);
background-image: url("../patterns/moorish-star.svg");
}
.location-detail h2 { margin: 8px 0 16px; }
.location-detail .blurb {
font-size: 17px;
color: var(--c-graphite);
max-width: 52ch;
line-height: 1.55;
}
.location-detail dl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 32px;
margin: 32px 0 0;
padding: 0;
}
.location-detail dt {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-muted);
font-weight: 700;
}
.location-detail dd {
margin: 4px 0 0;
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: 28px;
color: var(--c-graphite);
}
.location-detail .amenities {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 28px;
}
.location-detail .actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 32px;
}
/* =========================================================
Stats row (impact page)
========================================================= */
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.stat {
border-top: 1px solid var(--border);
padding-top: 18px;
}
.stat .num {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: clamp(44px, 5.4vw, 72px);
line-height: 1;
color: var(--c-laurel);
}
.stat .label {
font-family: var(--font-sans);
font-size: 14px;
color: var(--fg-muted);
margin-top: 10px;
max-width: 28ch;
}
/* =========================================================
Contact + form
========================================================= */
.contact-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 72px;
align-items: start;
}
.contact-grid .info p {
color: var(--fg-muted);
max-width: 46ch;
margin-bottom: 28px;
}
.contact-grid .info .row {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 18px 0;
border-top: 1px solid var(--border-soft);
}
.contact-grid .info .row:first-of-type { border-top: 0; }
.contact-grid .info .row svg {
width: 22px;
height: 22px;
stroke: var(--c-laurel);
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
margin-top: 2px;
}
.contact-grid .info .row b {
display: block;
font-family: var(--font-sans);
font-weight: 700;
font-size: 14px;
}
.contact-grid .info .row span {
font-family: var(--font-sans);
font-size: 14px;
color: var(--fg-muted);
}
.form {
background: var(--c-cream);
border-radius: var(--r-xl);
border: 1px solid var(--border-soft);
padding: 40px;
}
.field-row {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 18px;
}
.field-row label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-muted);
}
.field-row input,
.field-row textarea,
.field-row select {
font-family: var(--font-sans);
font-size: 15px;
color: var(--c-graphite);
background: var(--c-blanc);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
transition: border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.field-row input:focus,
.field-row textarea:focus,
.field-row select:focus {
outline: none;
border-color: var(--c-laurel);
box-shadow: 0 0 0 3px rgba(32, 68, 32, 0.12);
}
.field-row textarea { min-height: 120px; resize: vertical; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* =========================================================
HubSpot form submission states — success + error
========================================================= */
.form.is-submitted {
display: flex;
align-items: center;
justify-content: center;
min-height: 320px;
text-align: center;
padding: 48px;
}
.form-success {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
max-width: 38ch;
}
.form-success-mark {
width: 64px;
height: 64px;
border-radius: 999px;
background: var(--c-moss-20);
color: var(--c-laurel);
display: flex;
align-items: center;
justify-content: center;
animation: form-success-pop 480ms var(--ease-out-strong) both;
}
@keyframes form-success-pop {
from { transform: scale(0.6); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.form-success h4 {
margin: 0;
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 28px;
color: var(--c-graphite);
}
.form-success p {
margin: 0;
font-family: var(--font-sans);
font-size: 15px;
color: var(--fg-muted);
line-height: 1.5;
}
/* =========================================================
Inline "give us a follow" block inside the form success state.
Appears for contact forms (not the newsletter form, since those
users just opted into emails).
========================================================= */
.form-success-follow {
margin-top: 24px;
padding-top: 22px;
border-top: 1px solid var(--border-soft);
width: 100%;
max-width: 360px;
}
.form-success-follow-lead {
margin: 0 0 14px !important;
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 16px;
line-height: 1.4;
color: var(--c-graphite) !important;
text-wrap: balance;
}
.form-success-follow-ctas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.form-success-follow-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 14px;
border-radius: var(--r-md);
background: var(--c-laurel);
color: var(--c-cream);
font-family: var(--font-sans);
font-weight: 700;
font-size: 13px;
letter-spacing: var(--ls-button);
text-decoration: none;
transition: background var(--dur-base) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.form-success-follow-btn:hover { background: #2a532a; }
.form-success-follow-btn:active { transform: scale(0.985); }
.form-success-follow-btn:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.form-success-follow-btn svg { flex-shrink: 0; }
@media (max-width: 480px) {
.form-success-follow-ctas { grid-template-columns: 1fr; }
}
.form-error {
margin-top: 14px;
padding: 12px 14px;
border-radius: 10px;
background: rgba(184, 104, 70, 0.10);
border: 1px solid rgba(184, 104, 70, 0.40);
color: var(--c-terracotta);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.4;
}
/* =========================================================
Homepage newsletter form — two stacked pills (name row + email/subscribe row)
Matches the original single-pill aesthetic, expanded for first + last name.
========================================================= */
.newsletter form.newsletter-form {
display: flex;
flex-direction: column;
gap: 10px;
background: transparent;
border-radius: 0;
padding: 0;
box-shadow: none;
width: 100%;
}
.newsletter-names,
.newsletter-email-row {
display: flex;
background: var(--c-cream);
border-radius: 999px;
padding: 6px;
box-shadow: var(--shadow-sm);
}
.newsletter-names {
gap: 0;
}
.newsletter-email-row {
gap: 4px;
}
.newsletter-names input,
.newsletter-email-row input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
font-family: var(--font-sans);
font-size: 15px;
padding: 12px 18px;
color: var(--c-graphite);
}
.newsletter-names input:focus,
.newsletter-email-row input:focus { outline: none; }
.newsletter-names input + input {
border-left: 1px solid rgba(66, 64, 64, 0.12);
}
.newsletter-email-row .btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 540px) {
.newsletter-names { flex-direction: column; padding: 4px; }
.newsletter-names input + input { border-left: 0; border-top: 1px solid rgba(66, 64, 64, 0.12); }
.newsletter-email-row { flex-direction: column; padding: 8px; }
.newsletter-email-row .btn { width: 100%; }
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* =========================================================
Form-stack — bookings/events forms on contact page
Matched to .contact-grid so all three form sections align.
========================================================= */
.form-stack {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 72px;
align-items: start;
}
.form-stack .form-intro h2 {
font-size: clamp(28px, 3vw, 36px);
line-height: 1.18;
margin: 8px 0 16px;
}
.form-stack .form-intro p {
color: var(--fg-muted);
max-width: 42ch;
margin-bottom: 12px;
}
.form-stack .form-intro-meta {
font-family: var(--font-sans);
font-size: 13px;
color: var(--fg-muted);
padding-top: 16px;
border-top: 1px solid var(--border-soft);
margin-top: 24px;
}
.form-stack .form-intro-meta b {
color: var(--c-graphite);
font-weight: 700;
}
@media (max-width: 1080px) {
.form-stack {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* =========================================================
Pull quote block
========================================================= */
.pull-quote-block {
text-align: center;
max-width: 900px;
margin: 0 auto;
}
.pull-quote-block blockquote {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.28;
margin: 0;
border: 0;
padding: 0;
color: var(--c-graphite);
text-wrap: balance;
}
.pull-quote-block .cite {
margin-top: 28px;
font-family: var(--font-sans);
font-weight: 700;
font-size: 14px;
}
.pull-quote-block .cite small {
display: block;
font-weight: 400;
color: var(--fg-muted);
margin-top: 2px;
}
/* =========================================================
Partners strip
========================================================= */
.partner-strip {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 32px;
align-items: center;
}
.partner-strip .partner {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: 20px;
color: var(--fg-muted);
text-align: center;
opacity: 0.72;
}
/* =========================================================
Responsive
========================================================= */
@media (max-width: 1080px) {
.hero .inner,
.editorial,
.testimonial,
.cta-block,
.location-detail,
.contact-grid,
.newsletter,
.site-footer .inner { grid-template-columns: 1fr; gap: 40px; }
.location-grid,
.stats-row { grid-template-columns: repeat(2, 1fr); }
.value-grid { grid-template-columns: 1fr; gap: 32px; }
.team-grid { grid-template-columns: repeat(2, 1fr); }
.amenity-strip { grid-template-columns: repeat(3, 1fr); }
.partner-strip { grid-template-columns: repeat(3, 1fr); }
.section-head { grid-template-columns: 1fr; }
.rituals { grid-template-columns: 1fr; }
.ritual:nth-child(odd),
.ritual:nth-child(even) {
padding: 24px 0;
border-right: 0;
padding-left: 0;
padding-right: 0;
}
.ritual { grid-template-columns: 1fr; gap: 6px; }
.hero { padding: 80px 24px; }
.cta-block { padding: 40px; }
.form, .newsletter { padding: 32px; }
.location-detail .left { padding: 36px 28px; }
}
@media (max-width: 640px) {
.container, .container-xl { padding: 0 20px; }
.site-header .inner { padding: 14px 20px; gap: 16px; }
/* Sticky header — fully opaque on mobile so scrolling content doesn't
bleed through the cream tint or the iOS safe-area zone. Extend the
cream into the notch / Dynamic Island area so iOS Safari doesn't
reveal underlying content through the safe-area inset. */
.site-header {
background: var(--c-cream);
-webkit-backdrop-filter: none;
backdrop-filter: none;
padding-top: env(safe-area-inset-top);
}
.site-header::after { opacity: 0; }
/* Paint cream ABOVE the stuck header so the status-bar zone and any
iOS toolbar-collapse overshoot never reveal page content. */
.site-header::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 150px;
background: var(--c-cream);
}
/* Hide selected editorial illustrations on phones (e.g. Mark's
portrait on the impact page) — the text carries the section. */
.editorial .art.art--mobile-hide { display: none; }
/* Location detail articles: reorder on phones so the gallery sits
between the name and the description —
address → name → carousel → blurb → pills → buttons.
`.left` becomes display: contents so its children join the
article's flex order alongside the .right gallery. */
.location-detail {
display: flex;
flex-direction: column;
/* Kill the 40px grid gap inherited from the 1080px rule — spacing
is controlled by explicit margins below. */
gap: 0;
padding: 24px 20px 28px;
}
.location-detail .left {
display: contents;
padding: 0;
}
.location-detail .left > .eyebrow { order: 1; margin: 0; }
.location-detail .left > h2 { order: 2; margin: 8px 0 0; }
.location-detail .right { order: 3; margin: 16px 0 0; min-height: 0; }
.location-detail .left > .blurb { order: 4; margin: 16px 0 0; }
.location-detail .left > .amenities { order: 5; margin: 16px 0 0; }
.location-detail .left > .actions { order: 6; margin: 20px 0 0; }
/* Play It Green third-party widget — overlaps content on narrow viewports.
Hide on phones; still visible on tablet+. */
.pig-widget-toggler,
.pig-toggler,
.pig-window-wrapper { display: none !important; }
/* Footer sections collapse into native dropdowns on phones —
save space and let the user expand what they need. */
.site-footer .footer-section > summary {
cursor: pointer;
margin: 0;
padding: 16px 0;
border-bottom: 1px solid rgba(253, 248, 240, 0.15);
display: flex;
align-items: center;
justify-content: space-between;
}
.site-footer .footer-section > summary::after {
content: "+";
font-family: var(--font-sans);
font-size: 20px;
font-weight: 400;
letter-spacing: 0;
line-height: 1;
color: var(--c-cream);
}
.site-footer .footer-section[open] > summary::after { content: "−"; }
.site-footer .footer-section[open] > summary {
border-bottom-color: transparent;
padding-bottom: 8px;
}
/* Only show the inner list when the details is open. */
.site-footer .footer-section > ul { display: none !important; padding-bottom: 16px; }
.site-footer .footer-section[open] > ul { display: block !important; }
/* Mobile typography baseline — uniform scale, one notch tighter so
the page breathes more on a 390px screen. Body 15px is the
readable floor on iOS Safari; below that gets cramped. */
body { font-size: 15px; }
.page-title h1 { font-size: 32px; line-height: 1.05; }
.page-title p,
.page-title .lede { font-size: 15px; max-width: none; }
.hero h1 { font-size: 32px; line-height: 1.05; }
.hero p,
.hero .lede,
.lede { font-size: 15px; max-width: none; }
section.block h2,
.editorial h2,
.section-head h2 { font-size: 24px; line-height: 1.15; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
/* Hero paragraphs and feature blurbs shouldn't cap their width on
mobile — let them use the container's 20px gutters. */
.editorial p,
.blurb,
section.block p { max-width: none; }
/* nav-links + nav-toggle now handled by v1.24 at 1080px */
.location-grid,
.stats-row,
.partner-strip,
.field-pair { grid-template-columns: 1fr; }
/* Editorial photos: widescreen crop on phones, not the tall 5/6 frame */
.editorial .art { aspect-ratio: 16/10; }
/* Team reads as pairs on a phone, like the amenity tiles. */
.team-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.team-card { padding: 12px 12px 16px; }
.team-card h4 { font-size: 16px; }
/* Amenities ("basics done well") read better as paired tiles on a
phone than as a single column running down the page. */
.amenity-strip { grid-template-columns: repeat(2, 1fr); gap: 18px; }
section.block { padding: 64px 0; }
.hero { padding: 64px 20px; }
.hero h1 { font-size: 44px; }
.hero-art .frame { max-width: 320px; }
.hero-art { min-height: 320px; }
.space-finder {
grid-template-columns: 1fr;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.space-finder .field { border-right: 0; border-bottom: 1px solid var(--border-soft); }
.space-finder .field:last-of-type { border-bottom: 0; }
.cta-block { padding: 32px; }
.cta-block .ctas { justify-self: stretch; }
}
/* =========================================================
v1.6.1 POLISH PATCH
- Emil Kowalski: stronger easing, transform-only hover, active scale,
@starting-style reveal, prefers-reduced-motion, hover gating.
- design-taste-frontend: asymmetric value-grid offset (variance > 4),
stagger reveals across grids, no animated box-shadow (perf).
- Impeccable: hairlines instead of implied card boxes for amenities,
specified transitions (no transition: all), focus polish.
========================================================= */
/* --- Buttons: stronger press, deliberate property list --- */
.btn {
transition:
transform 160ms var(--ease-out-strong),
background var(--dur-base) var(--ease-out-strong),
color var(--dur-base) var(--ease-out-strong),
border-color var(--dur-base) var(--ease-out-strong),
box-shadow var(--dur-base) var(--ease-out-strong);
}
.btn:active { transform: scale(0.97); }
/* Hover gate: only on real pointer devices */
@media (hover: hover) and (pointer: fine) {
/* --- Location cards: transform-only hover, no box-shadow animation --- */
.location-card {
transition: transform 240ms var(--ease-out-strong);
will-change: transform;
}
.location-card:hover { transform: translateY(-4px); }
.location-card:active { transform: translateY(-2px) scale(0.995); }
/* --- Team cards: subtle lift on hover --- */
.team-card {
transition:
background var(--dur-base) var(--ease-out-strong),
transform 240ms var(--ease-out-strong);
}
.team-card:hover { transform: translateY(-2px); }
}
/* --- Stagger reveal for grids (60ms cascade, capped at 6 items) --- */
@keyframes lift-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
.location-grid > *,
.value-grid > *,
.team-grid > *,
.amenity-strip > *,
.partner-strip > *,
.rituals > * {
animation: lift-in 560ms var(--ease-out-strong) both;
}
.location-grid > :nth-child(1), .value-grid > :nth-child(1),
.team-grid > :nth-child(1), .amenity-strip > :nth-child(1),
.partner-strip > :nth-child(1), .rituals > :nth-child(1) { animation-delay: 0ms; }
.location-grid > :nth-child(2), .value-grid > :nth-child(2),
.team-grid > :nth-child(2), .amenity-strip > :nth-child(2),
.partner-strip > :nth-child(2), .rituals > :nth-child(2) { animation-delay: 60ms; }
.location-grid > :nth-child(3), .value-grid > :nth-child(3),
.team-grid > :nth-child(3), .amenity-strip > :nth-child(3),
.partner-strip > :nth-child(3), .rituals > :nth-child(3) { animation-delay: 120ms; }
.team-grid > :nth-child(4), .amenity-strip > :nth-child(4),
.partner-strip > :nth-child(4), .rituals > :nth-child(4) { animation-delay: 180ms; }
.amenity-strip > :nth-child(5), .partner-strip > :nth-child(5),
.rituals > :nth-child(5), .team-grid > :nth-child(5) { animation-delay: 240ms; }
.amenity-strip > :nth-child(6), .partner-strip > :nth-child(6),
.rituals > :nth-child(6) { animation-delay: 300ms; }
}
/* --- Hero entry: @starting-style cascade with graceful fallback --- */
@media (prefers-reduced-motion: no-preference) {
.hero .inner > div > .eyebrow,
.hero .inner > div > h1,
.hero .inner > div > p.lede,
.hero .inner > div > .ctas,
.hero .inner > div > .space-finder {
transition:
opacity 620ms var(--ease-out-strong),
transform 620ms var(--ease-out-strong);
}
.hero .inner > div > h1 { transition-delay: 60ms; }
.hero .inner > div > p.lede { transition-delay: 140ms; }
.hero .inner > div > .ctas { transition-delay: 220ms; }
.hero .inner > div > .space-finder { transition-delay: 300ms; }
@starting-style {
.hero .inner > div > .eyebrow,
.hero .inner > div > h1,
.hero .inner > div > p.lede,
.hero .inner > div > .ctas,
.hero .inner > div > .space-finder {
opacity: 0;
transform: translateY(14px);
}
}
.hero-art .frame {
transition: opacity 720ms var(--ease-out-strong), transform 720ms var(--ease-out-strong);
transition-delay: 200ms;
}
@starting-style {
.hero-art .frame { opacity: 0; transform: translateY(20px) scale(0.98); }
}
}
/* --- design-taste-frontend §3 Rule 3: anti-symmetry. Offset the value-grid. --- */
@media (min-width: 1080px) {
.value-grid {
grid-template-columns: 1.3fr 1fr 1fr;
align-items: start;
}
.value-grid > :nth-child(2) { padding-top: 28px; }
.value-grid > :nth-child(3) { padding-top: 56px; }
}
/* --- Impeccable: amenity strip hairlines instead of implied cards --- */
.amenity {
border-top: 1px solid var(--border);
padding-top: 18px;
}
/* --- Smooth in-page scroll except for reduced-motion users --- */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
/* --- prefers-reduced-motion: kill all decorative motion --- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --- Focus polish: gold ring, never default outline --- */
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--c-gold);
outline-offset: 2px;
}
/* --- Touch-device safety: don't carry over hover-lift on tap --- */
@media (hover: none) {
.location-card:hover,
.team-card:hover { transform: none; }
}
/* --- Newsletter form input: clearer state --- */
.newsletter input { color: var(--c-graphite); }
.newsletter input::placeholder { color: var(--fg-soft); }
/* =========================================================
REAL PHOTOGRAPHY — overrides for v1.7
Photo on the brand surface beats pattern-only fills.
Heritage patterns retained on the hero/footer/CTA block.
========================================================= */
/* Hero photo frame — real Bedford photo replacing the illustration */
.hero-art .frame { background: #1a1a1a; padding: 0; }
.hero-art .frame img.hero-photo {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Location card covers — real photography */
.location-card .photo {
background-color: var(--c-graphite);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.location-card .photo.bedford {
background-color: var(--c-graphite);
background-image:
linear-gradient(180deg, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.55) 100%),
url("../assets/photos/bedford-row-cover.jpg");
background-size: cover;
}
.location-card .photo.furnival {
background-color: var(--c-terracotta);
background-image:
linear-gradient(180deg, rgba(0,0,0,0.0) 50%, rgba(94,58,31,0.55) 100%),
url("../assets/photos/furnival-cover.jpg");
background-size: cover;
}
.location-card .photo.sugar {
background-color: var(--c-laurel);
background-image:
linear-gradient(180deg, rgba(0,0,0,0.0) 50%, rgba(32,68,32,0.55) 100%),
url("../assets/photos/sugar-interior.jpg");
background-size: cover;
}
/* Suppress the duplicate scrim now that we bake one into the photo bg */
.location-card .photo::after { display: none; }
.location-card .photo > * { z-index: 2; }
/* Location detail panels — real interior photography */
.location-detail .right { background-size: cover; background-position: center; background-repeat: no-repeat; }
.location-detail .right.bedford {
background-image: url("../assets/photos/bedford-row-interior.jpg");
}
.location-detail .right.furnival {
background-image: url("../assets/photos/furnival-interior.jpg");
}
.location-detail .right.sugar {
background-image: url("../assets/photos/sugar-interior.jpg");
}
/* Team cards — full-bleed portrait photo, square frame */
.team-card .frame {
width: 100%;
aspect-ratio: 1/1;
background: var(--c-cream);
border-radius: var(--r-md);
overflow: hidden;
border: 1px solid var(--border-soft);
}
.team-card .frame img.photo {
width: 100%; height: 100%;
object-fit: cover; object-position: center top;
display: block;
filter: saturate(0.92);
transition: filter var(--dur-base) var(--ease-out-strong),
transform var(--dur-base) var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
.team-card:hover .frame img.photo { filter: saturate(1); transform: scale(1.02); }
}
/* Partner strip — real logos, single visual weight */
.partner-strip .partner {
display: flex; align-items: center; justify-content: center;
min-height: 56px;
}
.partner-strip .partner img {
max-height: 36px;
max-width: 140px;
width: auto;
filter: grayscale(100%);
opacity: 0.62;
transition: filter var(--dur-base) var(--ease-out-strong),
opacity var(--dur-base) var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
.partner-strip .partner:hover img { filter: grayscale(0%); opacity: 1; }
}
/* Testimonial portrait — switch from illustration to real photo */
.testimonial .face {
background: var(--c-cream);
border-radius: var(--r-xl);
aspect-ratio: 4/5;
overflow: hidden;
border: 1px solid var(--border-soft);
}
.testimonial .face img.photo {
width: 100%; height: 100%; object-fit: cover; object-position: center top;
filter: saturate(0.95);
}
/* Editorial illustration column — when swapped for photo */
.editorial .art img.photo {
width: 100%; height: 100%; object-fit: cover;
}
/* Meeting page room cards — photo headers */
.meeting-room-card .photo {
width: 100%; aspect-ratio: 4/3;
background-size: cover; background-position: center;
border-top-left-radius: var(--r-lg);
border-top-right-radius: var(--r-lg);
}
/* Team grid — 5 members (5-up on desktop) */
@media (min-width: 1080px) {
.team-grid { grid-template-columns: repeat(5, 1fr); }
}
/* Editorial art — illustration peeks over the photo */
.editorial .art { position: relative; isolation: isolate; }
.editorial { position: relative; }
.editorial .art .art-overlay-illu {
/* Attach to the editorial container instead of the photo (escape overflow:hidden) */
position: absolute;
bottom: -24px;
right: -24px;
width: 130px;
height: auto;
z-index: 3;
pointer-events: none;
}
.editorial .art .art-overlay-illu img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.14));
}
@media (max-width: 1080px) {
.editorial .art .art-overlay-illu { width: 100px; bottom: -12px; right: -12px; }
}
@media (max-width: 640px) {
.editorial .art .art-overlay-illu { display: none; }
}
/* =========================================================
v1.7.1 — illustrations back, marquee, patterns, reveals
========================================================= */
@media (prefers-reduced-motion: no-preference) {
.hero::before {
animation: pattern-drift 60s linear infinite;
will-change: background-position;
}
}
@keyframes pattern-drift {
from { background-position: 0 0; }
to { background-position: 220px 220px; }
}
.page-title { position: relative; overflow: hidden; }
.page-title::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0; height: 80px;
background-image: url("../patterns/terracotta-quatrefoil.svg");
background-size: 90px;
background-repeat: repeat-x;
opacity: 0.08;
pointer-events: none;
}
.newsletter { position: relative; overflow: hidden; }
.newsletter::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../patterns/terracotta-quatrefoil.svg");
background-size: 130px;
background-repeat: repeat;
opacity: 0.12;
pointer-events: none;
}
.newsletter > * { position: relative; z-index: 1; }
.stats-row { position: relative; }
.stats-row::before {
content: "";
position: absolute;
inset: -40px -40px -40px -40px;
background-image: url("../patterns/encaustic-victorian.svg");
background-size: 120px;
background-repeat: repeat;
opacity: 0.05;
pointer-events: none;
z-index: 0;
}
.stats-row > * { position: relative; z-index: 1; }
.editorial { position: relative; }
.editorial { isolation: isolate; }
.editorial::before {
content: "";
position: absolute;
top: -40px;
bottom: -40px;
left: -88px;
width: 64px;
background-image: url("../patterns/terracotta-quatrefoil.svg");
background-size: 80px;
background-repeat: repeat;
background-color: rgba(184, 104, 70, 0.06);
opacity: 1;
border-radius: var(--r-md);
z-index: -1;
}
@media (max-width: 1280px) {
.editorial::before { left: -56px; width: 48px; }
}
@media (max-width: 1080px) { .editorial::before { display: none; } }
/* Team cards — dual-image hover flip */
.team-card .frame {
position: relative;
width: 100%;
aspect-ratio: 1/1;
background: var(--c-cream);
border-radius: var(--r-md);
overflow: hidden;
border: 1px solid var(--border-soft);
}
.team-card .frame img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
transition: opacity 360ms var(--ease-out-strong),
transform 480ms var(--ease-out-strong);
}
.team-card .frame img.illu {
object-fit: contain;
padding: 6%;
opacity: 1;
z-index: 2;
}
.team-card .frame img.photo {
object-fit: cover;
object-position: center top;
opacity: 0;
z-index: 1;
transform: scale(1.04);
filter: saturate(0.95);
}
.team-card .frame img.illu-fallback {
object-fit: cover;
object-position: center top;
padding: 0;
filter: grayscale(1) contrast(1.05) brightness(1.04);
}
@media (hover: hover) and (pointer: fine) {
.team-card:hover .frame img.illu { opacity: 0; transform: scale(0.96); }
.team-card:hover .frame img.photo { opacity: 1; transform: scale(1); }
}
.team-card:focus-within .frame img.illu { opacity: 0; transform: scale(0.96); }
.team-card:focus-within .frame img.photo { opacity: 1; transform: scale(1); }
.team-card { transition: transform 240ms var(--ease-out-strong); cursor: pointer; }
.team-card:hover, .team-card:focus-within { transform: translateY(-2px); }
.team-card:active { transform: translateY(0) scale(0.99); }
.team-card:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 4px; }
/* Partner marquee */
.partner-marquee {
overflow: hidden;
position: relative;
padding: 32px 0;
background: var(--c-oat-20);
border-radius: var(--r-xl);
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.partner-marquee .track {
display: flex;
gap: 96px;
width: max-content;
animation: marquee 38s linear infinite;
will-change: transform;
}
.partner-marquee:hover .track { animation-play-state: paused; }
.partner-marquee .partner {
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 60px;
flex-shrink: 0;
}
/* Force every logo to the SAME rendered height regardless of source dimensions
or format (png / svg / webp). Width auto-adjusts to preserve aspect ratio,
capped so a very-wide wordmark doesn't push the bounds. */
.partner-marquee .partner img {
height: 44px;
width: auto;
max-width: 160px;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.78;
transition: filter var(--dur-base) var(--ease-out-strong),
opacity var(--dur-base) var(--ease-out-strong);
}
.partner-marquee .partner img:hover { filter: grayscale(0%); opacity: 1; }
/* Per-logo overrides for visual parity */
/* MXO ships as white-on-transparent — invert to black so it reads on cream */
.partner-marquee .partner img[src*="mxo"] {
filter: invert(1) grayscale(100%);
}
.partner-marquee .partner img[src*="mxo"]:hover {
filter: invert(1) grayscale(0%);
}
/* Office RnD has the circle mark stacked over text — at uniform 44px the
text gets tiny. Bump height + width so it reads at the same visual weight
as the wordmark logos around it. */
.partner-marquee .partner img[src*="office-rnd"] {
height: 60px;
max-width: 100px;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.partner-marquee .track { animation: none; flex-wrap: wrap; justify-content: center; }
}
/* Location card image zoom on hover — softened (was 108%, felt punchy) */
@media (hover: hover) and (pointer: fine) {
.location-card .photo { transition: background-size 900ms var(--ease-out-strong); }
.location-card:hover .photo { background-size: 104%; }
}
/* Scroll-reveal infrastructure */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 720ms var(--ease-out-strong),
transform 720ms var(--ease-out-strong);
}
.reveal.in-view {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* Feature image (event-space hero on meetings page) */
.feature-image {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
aspect-ratio: 21/9;
background-size: cover;
background-position: center;
isolation: isolate;
}
.feature-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
}
.feature-image .corner-mark {
position: absolute;
bottom: 28px;
left: 32px;
z-index: 2;
color: var(--c-cream);
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: 22px;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.feature-image .corner-mark .dot {
display: inline-block;
width: 0.28em; height: 0.28em;
background: var(--c-gold);
border-radius: 999px;
margin-left: 2px;
}
.feature-image .caption {
position: absolute;
bottom: 28px;
right: 32px;
z-index: 2;
color: var(--c-cream);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
opacity: 0.92;
}
@media (max-width: 640px) {
.feature-image { aspect-ratio: 4/3; }
.feature-image .corner-mark { left: 20px; bottom: 20px; font-size: 18px; }
.feature-image .caption { display: none; }
}
/* =========================================================
Blog / Journal — index list + long-form article layout
========================================================= */
.blog-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
max-width: 880px;
margin: 0 auto;
}
.blog-card {
border: 1px solid var(--border-soft);
border-radius: var(--r-xl);
background: var(--c-blanc);
transition: transform 240ms var(--ease-out-strong),
box-shadow 240ms var(--ease-out-strong);
}
.blog-card a {
display: block;
padding: 36px 40px;
color: inherit;
text-decoration: none;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(32, 68, 32, 0.08); }
.blog-card-meta {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--fg-muted);
display: flex;
gap: 10px;
margin-bottom: 16px;
}
.blog-card h2 {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.2;
margin: 0 0 16px;
color: var(--c-graphite);
}
.blog-card p {
margin: 0 0 18px;
color: var(--fg-muted);
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.55;
max-width: 60ch;
}
.blog-card .cta {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--c-laurel);
}
/* Long-form article layout */
.container-md { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.blog-post-header {
padding-top: 64px;
padding-bottom: 32px;
text-align: left;
}
.blog-post-meta {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--fg-muted);
display: flex;
gap: 10px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.blog-post-meta a { color: var(--c-laurel); text-decoration: none; }
.blog-post-meta a:hover { text-decoration: underline; }
.blog-post-header h1 {
font-size: clamp(32px, 4.5vw, 56px);
line-height: 1.08;
margin: 0 0 28px;
}
.blog-post-lede {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(19px, 2vw, 24px);
line-height: 1.4;
color: var(--fg-muted);
max-width: 60ch;
margin: 0;
}
.blog-post-body { padding-top: 24px; padding-bottom: 80px; }
.blog-post-body h2 {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.25;
margin: 48px 0 18px;
color: var(--c-graphite);
}
.blog-post-body h3 {
font-family: var(--font-sans);
font-weight: 700;
font-size: 18px;
margin: 32px 0 12px;
color: var(--c-graphite);
}
.blog-post-body p,
.blog-post-body li {
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.65;
color: var(--c-graphite);
}
.blog-post-body p { margin: 0 0 18px; }
.blog-post-body ul,
.blog-post-body ol { padding-left: 24px; margin: 0 0 24px; }
.blog-post-body li { margin-bottom: 8px; }
.blog-post-body a {
color: var(--c-laurel);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.blog-post-body strong { font-weight: 700; color: var(--c-graphite); }
.blog-post-body em { font-style: italic; }
.blog-post-cta {
margin: 56px 0 24px;
padding: 32px;
background: var(--c-oat-20);
border-radius: var(--r-xl);
}
.blog-post-cta h3 {
margin: 0 0 8px;
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 22px;
color: var(--c-graphite);
}
.blog-post-cta p { margin: 0; color: var(--c-graphite); }
.blog-post-related {
margin-top: 40px;
}
.blog-post-related h3 {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--fg-muted);
margin: 0 0 14px;
}
.blog-post-related ul { list-style: none; padding: 0; margin: 0; }
.blog-post-related li { margin-bottom: 8px; }
.blog-post-related a {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 18px;
color: var(--c-laurel);
text-decoration: none;
}
.blog-post-related a:hover { text-decoration: underline; }
/* =========================================================
FAQ list — semantic /, expandable
========================================================= */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
background: var(--c-blanc);
overflow: hidden;
transition: margin 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* When open, an FAQ card bursts outside the 880px reading column so
the answer text has room to breathe. Disabled below 1280px viewport
so it never overflows the page on tablet/mobile. */
@media (min-width: 1280px) {
.faq-item[open] {
margin-left: -150px;
margin-right: -150px;
}
}
.faq-item > summary {
cursor: pointer;
list-style: none;
padding: 20px 24px;
font-family: var(--font-sans);
font-weight: 700;
font-size: 16px;
color: var(--c-graphite);
position: relative;
padding-right: 56px;
transition: background var(--dur-base) var(--ease-out);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
content: "+";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-serif);
font-size: 26px;
font-weight: 400;
color: var(--c-laurel);
transition: transform 300ms var(--ease-out-strong);
}
.faq-item[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item > summary:hover { background: rgba(32, 68, 32, 0.03); }
.faq-item > p {
margin: 0;
padding: 0 56px 22px 24px;
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.55;
color: var(--fg-muted);
max-width: none;
}
@media (max-width: 720px) {
.why-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}
/* Team hero spot — group photo at top of meet-the-team page with the
Sanita illustration leaning against its left edge. Replaces the small
illu-spot on this page only. */
.team-hero-spot {
position: relative;
width: 100%;
max-width: 460px;
margin-left: auto;
}
.team-hero-spot .team-photo {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: var(--r-xl);
box-shadow: 0 20px 50px rgba(32, 68, 32, 0.10);
display: block;
}
.team-hero-spot .leaning-illu {
position: absolute;
left: -110px; /* Figure's right outline touches the photo's left edge */
bottom: -15px; /* anchored to the photo's bottom */
width: 150px;
height: auto;
z-index: 2;
pointer-events: none;
user-select: none;
}
@media (max-width: 1080px) {
.team-hero-spot {
max-width: 520px;
margin: 0 auto;
}
.team-hero-spot .leaning-illu {
left: -96px;
width: 130px;
}
}
@media (max-width: 640px) {
.team-hero-spot { max-width: 100%; }
/* No room for a side illustration on phones — hide it */
.team-hero-spot .leaning-illu { display: none; }
/* Uniform page-title hero on phones (every page):
full-bleed photo flush under the header, then eyebrow → title →
body text → CTAs. The text wrapper flattens (display: contents)
so its children can be ordered against the photo, and the photo
breaks out of the section padding to span the full viewport
width. Pages with illustrations instead of photos (coworking,
contact) hide the illu-spot and keep the 28px top gap. */
.page-title { padding-top: 28px; padding-bottom: 24px; }
.page-title + .block { padding-top: 40px; }
.page-title.with-illu:has(.team-hero-spot) { padding-top: 0; }
.page-title.with-illu .inner > div:first-child { display: contents; }
.page-title.with-illu .team-hero-spot {
order: 1;
max-width: none;
width: 100vw;
margin: 0 0 18px calc(50% - 50vw);
}
.page-title.with-illu .team-hero-spot .team-photo {
border-radius: 0;
box-shadow: none;
}
.page-title.with-illu .inner .eyebrow { order: 2; margin: 0; }
.page-title.with-illu .inner h1 { order: 3; margin: 6px 0 0; }
.page-title.with-illu .inner p { order: 4; margin: 10px 0 0; }
.page-title.with-illu .inner .ctas { order: 5; margin-top: 18px; }
}
/* Illustration spot (page-title, contact, impact) */
.illu-spot {
width: 180px;
height: 220px;
display: flex;
align-items: flex-end;
justify-content: center;
flex-shrink: 0;
}
.illu-spot img { width: 100%; height: 100%; object-fit: contain; }
/* Photo variant — used on Our Impact when the spot contains a real
photograph instead of a small illustration. Bigger frame, rounded corners,
cover-cropping. */
.illu-spot-photo {
width: 260px;
height: 320px;
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: 0 16px 36px rgba(32, 68, 32, 0.12);
}
/* Split hero lede so the image sits between the title and the body on
mobile. On desktop the lede is inside the page-title section; on
mobile it moves below the feature image. Duplicate copy across two
spots and toggle visibility. */
.page-title__lede--mobile { display: none; }
.page-title__lede--desktop { display: block; }
@media (max-width: 640px) {
.page-title__lede--desktop { display: none; }
.page-title__lede--mobile {
display: block;
margin-top: 20px;
font-size: 15px;
color: var(--fg-muted);
line-height: 1.55;
max-width: 60ch;
}
}
.illu-spot-photo img {
object-fit: cover;
}
.page-title.with-illu .inner {
display: grid;
grid-template-columns: 1fr 200px;
gap: 56px;
align-items: end;
}
.page-title.with-illu:has(.illu-spot-photo) .inner {
grid-template-columns: 1fr 260px;
align-items: center;
}
/* When the right column holds the team-hero-spot, widen + centre-align */
.page-title.with-illu:has(.team-hero-spot) .inner {
grid-template-columns: 1fr 460px;
gap: 88px;
/* start, not center: the photo anchors at the same offset on every
page instead of drifting with the text column's height */
align-items: start;
}
@media (max-width: 640px) {
/* Match the :has() variants' specificity so they actually collapse on
mobile. gap: 0 — the flattened hero children are each their own grid
row, so spacing is set per-element in the uniform-hero block above. */
.page-title.with-illu .inner,
.page-title.with-illu:has(.illu-spot-photo) .inner,
.page-title.with-illu:has(.team-hero-spot) .inner {
grid-template-columns: 1fr;
gap: 0;
}
.page-title.with-illu .illu-spot { display: none; }
}
/* =========================================================
v1.8 — TASTE SKILL pass (editorial, not flashy)
Each technique here is from the design-taste-frontend SKILL.md
§4 Creative Proactivity and §8 Creative Arsenal, filtered
through the Juntos editorial register (warm, quiet, confident).
========================================================= */
/* --- Paper grain — fixed, pointer-events-none overlay --- */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.045;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
}
/* --- Header glass refraction (§4 Liquid Glass) --- */
.site-header { position: sticky; }
.site-header::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-bottom: 1px solid rgba(253, 248, 240, 0.55);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
opacity: 0.6;
}
/* --- Nav magnification on hover (Mac OS dock idea, dialled down) --- */
.nav-links a {
transition: opacity var(--dur-base) var(--ease-out-strong),
transform 220ms var(--ease-out-strong),
letter-spacing 220ms var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
.nav-links a:hover { transform: translateY(-1px); letter-spacing: 0.012em; }
}
/* --- Active nav gold dot — soft pulse --- */
@media (prefers-reduced-motion: no-preference) {
.nav-links a.active::after {
animation: dot-pulse 2.8s var(--ease-inout-strong) infinite;
}
}
@keyframes dot-pulse {
0%, 100% { transform: translateY(-1px) scale(1); box-shadow: 0 0 0 0 rgba(255, 219, 79, 0.0); }
50% { transform: translateY(-1px) scale(1.18); box-shadow: 0 0 0 4px rgba(255, 219, 79, 0.18); }
}
/* --- Magnetic CTAs (§4 Magnetic micro-physics) — softened: barely-there nudge --- */
.btn-magnetic {
position: relative;
transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
transition: transform 520ms var(--ease-out-strong),
background var(--dur-base) var(--ease-out-strong),
box-shadow var(--dur-base) var(--ease-out-strong);
will-change: transform;
}
.btn-magnetic:hover {
box-shadow: 0 6px 20px rgba(32, 68, 32, 0.18);
}
.btn-magnetic:active {
transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
.btn-magnetic { transform: none; }
}
/* --- Spotlight on location cards (§8 Spotlight Border Card) --- */
.location-card {
position: relative;
isolation: isolate;
}
.location-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
border-radius: inherit;
/* Gold spotlight that tracks the cursor — restored to original strength */
background: radial-gradient(
260px circle at var(--mx, -200px) var(--my, -200px),
rgba(255, 219, 79, 0.16),
transparent 60%
);
opacity: 0;
transition: opacity 320ms var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
.location-card:hover::before { opacity: 1; }
}
/* --- Kinetic services band (§8 Kinetic Marquee, brand variant) --- */
.services-band {
background: var(--c-laurel);
color: var(--c-cream);
padding: 28px 0;
overflow: hidden;
border-top: 1px solid rgba(253, 248, 240, 0.08);
border-bottom: 1px solid rgba(253, 248, 240, 0.08);
}
.services-marquee {
display: flex;
width: max-content;
gap: 56px;
align-items: center;
animation: marquee 46s linear infinite;
will-change: transform;
}
.services-marquee:hover { animation-play-state: paused; }
.services-marquee span {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(28px, 4vw, 48px);
line-height: 1;
color: var(--c-cream);
letter-spacing: -0.01em;
white-space: nowrap;
}
.services-marquee .sep {
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--c-gold);
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.services-marquee { animation: none; flex-wrap: wrap; justify-content: center; }
}
/* --- Stats count-up tabular-nums hint --- */
.stat .num { font-variant-numeric: tabular-nums; }
/* --- Hero gold-dot tail (§8 Animated SVG Line Drawing, lite) --- */
.hero h1 .gold-dot,
.hero .display .gold-dot {
position: relative;
}
@media (prefers-reduced-motion: no-preference) {
.hero h1 .gold-dot::after,
.page-title h1 .gold-dot::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 100%; height: 100%;
border-radius: 999px;
background: var(--c-gold);
transform: translate(-50%, -50%) scale(1);
opacity: 0.6;
animation: dot-ping 3.2s var(--ease-out-strong) infinite;
z-index: -1;
}
}
@keyframes dot-ping {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
80% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}
/* (Removed: gold sweep shimmer on ghost CTAs — replaced by the simpler
arrow-nudge on .btn-ghost:hover::after defined earlier.) */
.btn-ghost {
position: relative;
}
/* --- Editorial number underline draw (used on role labels in team page) --- */
.team-card .role {
position: relative;
display: inline-block;
}
.team-card .role::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 1px;
background: var(--c-gold);
transform-origin: left center;
transform: scaleX(0);
transition: transform 360ms var(--ease-out-strong);
}
.team-card:hover .role::after,
.team-card:focus-within .role::after { transform: scaleX(1); }
/* Slower, softer underline sweep on team-card hover (was 360ms, felt like a flash) */
.team-card .role::after { transition: transform 820ms var(--ease-out-strong); }
/* --- Section transitions: subtle "lift in" on h2 inside .section-head.reveal --- */
.section-head.reveal h2 {
transition: opacity 720ms var(--ease-out-strong) 100ms,
transform 720ms var(--ease-out-strong) 100ms;
display: inline-block;
}
/* =========================================================
v1.8.1 — Gold-dot wrap fix
The gold dot is an inline-block. With text-wrap: balance the
browser can put it on its own line. We bind it to the last word
with a non-breaking wrapper, and disable balance on headlines
that already use manual
for line breaks.
========================================================= */
.nowrap { white-space: nowrap; }
.hero h1,
.hero .display,
.page-title h1,
.section-head h2 { text-wrap: pretty; }
/* =========================================================
v1.8.2 — Value cards: aligned tops, heritage chip + big numeral
The earlier asymmetric offset read as broken alignment, not as
intentional editorial variance. Reset to aligned tops, then push
variance back in through scale/colour/pattern on each card.
========================================================= */
@media (min-width: 1080px) {
.value-grid {
grid-template-columns: repeat(3, 1fr);
align-items: start;
}
.value-grid > :nth-child(2) { padding-top: 0; }
.value-grid > :nth-child(3) { padding-top: 0; }
}
.value-card {
display: flex;
flex-direction: column;
gap: 18px;
padding-top: 0;
}
.value-card .value-head {
display: flex;
align-items: center;
gap: 20px;
min-height: 80px;
}
.value-card .chip {
width: 64px;
height: 64px;
flex-shrink: 0;
border-radius: var(--r-md);
/* Show one full tile per chip — the SVG canvas provides its own padding,
so motifs never get clipped at the chip edge. */
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
transition: transform 420ms var(--ease-out-strong);
}
.value-card .chip-azulejo {
background-image: url("../patterns/azulejo-verde.svg");
background-color: var(--c-moss-20);
}
.value-card .chip-quatrefoil {
background-image: url("../patterns/terracotta-quatrefoil.svg");
background-color: var(--c-terracotta-20);
}
.value-card .chip-moorish {
background-image: url("../patterns/moorish-star.svg");
background-color: var(--c-oat-20);
}
.value-card .chip-encaustic {
background-image: url("../patterns/encaustic-victorian.svg");
background-color: var(--c-graphite-20);
}
.value-card .num {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: clamp(56px, 6vw, 84px);
line-height: 0.88;
color: var(--c-laurel);
transition: color var(--dur-base) var(--ease-out-strong),
transform var(--dur-base) var(--ease-out-strong);
}
.value-card h4 {
margin: 0;
font-size: 22px;
}
.value-card p {
margin: 0;
color: var(--fg-muted);
max-width: 34ch;
}
/* Subtle hairline under heading that draws on hover */
.value-card h4 {
position: relative;
display: inline-block;
}
.value-card h4::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 1px;
background: var(--c-gold);
transform-origin: left center;
transform: scaleX(0);
transition: transform 420ms var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
.value-card:hover .chip {
transform: scale(1.02);
}
.value-card:hover .num {
color: var(--c-terracotta);
transform: translateX(4px);
}
.value-card:hover h4::after { transform: scaleX(1); }
}
.value-card:focus-within h4::after { transform: scaleX(1); }
/* =========================================================
v1.9 — Community + events galleries (bento + grid)
========================================================= */
.community-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 240px 240px;
gap: 14px;
}
.community-gallery .tile {
background-size: cover;
background-position: center;
border-radius: var(--r-md);
overflow: hidden;
position: relative;
isolation: isolate;
cursor: pointer;
transition: transform 480ms var(--ease-out-strong),
box-shadow 480ms var(--ease-out-strong);
border: 1px solid var(--border-soft);
}
.community-gallery .tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.30) 100%);
z-index: 1;
transition: opacity 360ms var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
.community-gallery .tile:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.community-gallery .tile:hover::after { opacity: 0.6; }
}
.community-gallery .tile.span-h2 { grid-column: span 2; }
.community-gallery .tile.span-v2 { grid-row: span 2; }
@media (max-width: 1080px) {
.community-gallery {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 220px);
}
.community-gallery .tile.span-h2 { grid-column: span 2; grid-row: span 1; }
.community-gallery .tile.span-v2 { grid-column: span 1; grid-row: span 2; }
}
@media (max-width: 640px) {
/* Phones: horizontal swipe carousel — same pattern as location galleries.
Six stacked 200px tiles collapses to one swipeable strip. */
.community-gallery {
display: flex;
grid: none;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 8px;
padding: 4px 0;
}
.community-gallery::-webkit-scrollbar { display: none; }
.community-gallery .tile,
.community-gallery .tile.span-h2,
.community-gallery .tile.span-v2 {
flex: 0 0 calc(100% - 48px);
width: calc(100% - 48px);
aspect-ratio: 4 / 3;
grid-column: auto;
grid-row: auto;
scroll-snap-align: center;
}
}
/* Events gallery — meetings page (3-up grid) */
.events-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.events-gallery .tile {
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
border-radius: var(--r-md);
overflow: hidden;
position: relative;
border: 1px solid var(--border-soft);
transition: transform 480ms var(--ease-out-strong);
}
.events-gallery .tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,0.22) 100%);
}
@media (hover: hover) and (pointer: fine) {
.events-gallery .tile:hover { transform: translateY(-3px); }
}
@media (max-width: 1080px) {
.events-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
/* Phones: same swipe carousel pattern as the community gallery. */
.events-gallery {
display: flex;
grid: none;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 8px;
padding: 4px 0;
}
.events-gallery::-webkit-scrollbar { display: none; }
.events-gallery .tile {
flex: 0 0 calc(100% - 48px);
width: calc(100% - 48px);
scroll-snap-align: center;
}
}
/* Small caption strip under galleries */
.gallery-caption {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 18px;
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-muted);
}
.gallery-caption .lead {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 16px;
letter-spacing: 0;
text-transform: none;
color: var(--c-graphite);
}
/* =========================================================
v1.10 — CRO additions
Hero perks pill row, trust strip, contact next-steps
========================================================= */
.hero-perks {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: 24px;
font-family: var(--font-sans);
font-size: 14px;
color: rgba(253, 248, 240, 0.78);
letter-spacing: 0.01em;
}
.hero-perks span { display: inline-flex; align-items: center; }
.hero-perks span:nth-child(2n) { color: rgba(253, 248, 240, 0.4); }
.trust-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-bottom: 56px;
padding-bottom: 40px;
border-bottom: 1px solid var(--border);
}
.trust-strip .trust-stat {
display: flex;
flex-direction: column;
gap: 6px;
text-align: center;
}
.trust-strip .trust-stat .num {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: clamp(40px, 4.4vw, 56px);
line-height: 1;
color: var(--c-laurel);
}
.trust-strip .trust-stat .lbl {
font-family: var(--font-sans);
font-size: 13px;
color: var(--fg-muted);
max-width: 28ch;
margin: 0 auto;
}
.next-steps {
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 16px;
}
.next-steps .step {
display: grid;
grid-template-columns: 36px 1fr;
gap: 18px;
align-items: baseline;
}
.next-steps .step > b {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: 28px;
color: var(--c-gold);
line-height: 1;
}
.next-steps .step > div {
display: flex;
flex-direction: column;
gap: 4px;
}
.next-steps .step b { font-family: var(--font-sans); font-weight: 700; font-size: 14px; color: var(--c-graphite); }
.next-steps .step span { font-family: var(--font-sans); font-size: 13px; color: var(--fg-muted); line-height: 1.5; }
@media (max-width: 640px) {
.trust-strip { grid-template-columns: 1fr; gap: 24px; }
.hero-perks { font-size: 13px; }
}
/* =========================================================
v1.10.1 — Spotlight on location-detail panels too
========================================================= */
.location-detail {
position: relative;
isolation: isolate;
}
.location-detail::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
border-radius: inherit;
background: radial-gradient(
340px circle at var(--mx, -200px) var(--my, -200px),
rgba(255, 219, 79, 0.18),
transparent 60%
);
opacity: 0;
transition: opacity 320ms var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
.location-detail:hover::before { opacity: 1; }
}
/* =========================================================
v1.11 — Amenity strip widened to 8 items
========================================================= */
@media (min-width: 1080px) {
.amenity-strip { grid-template-columns: repeat(4, 1fr); row-gap: 36px; }
}
@media (min-width: 1280px) {
.amenity-strip { grid-template-columns: repeat(4, 1fr); }
}
/* Pricing table */
.price-table {
display: grid;
gap: 0;
border-top: 1px solid var(--border);
}
.price-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 16px;
padding: 22px 0;
border-bottom: 1px solid var(--border);
align-items: baseline;
}
.price-row.head {
font-family: var(--font-sans);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-muted);
padding: 16px 0;
}
.price-row .room {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: clamp(22px, 2.2vw, 28px);
color: var(--c-graphite);
}
.price-row .room small {
display: block;
font-family: var(--font-sans);
font-style: normal;
font-weight: 400;
font-size: 13px;
color: var(--fg-muted);
margin-top: 4px;
}
.price-row .rate {
font-family: var(--font-sans);
font-size: 15px;
color: var(--c-graphite);
font-variant-numeric: tabular-nums;
}
.price-row .rate b {
font-weight: 700;
}
.price-row .rate small {
display: block;
font-size: 12px;
color: var(--fg-soft);
margin-top: 2px;
letter-spacing: 0.04em;
}
.price-section h3 {
margin: 56px 0 0;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-strong);
}
.price-section:first-child h3 { margin-top: 0; }
.vat-note {
margin-top: 32px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--fg-muted);
font-style: italic;
}
/* Amenities page — section blocks */
.amenity-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.amenity-card {
background: var(--c-blanc);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
.amenity-card svg {
width: 28px;
height: 28px;
stroke: var(--c-laurel);
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.amenity-card h4 { margin: 4px 0 0; font-size: 20px; }
.amenity-card p { margin: 0; color: var(--fg-muted); font-size: 15px; }
.amenity-card .price-chip {
display: inline-block;
font-family: var(--font-sans);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-graphite);
background: var(--c-gold);
padding: 4px 10px;
border-radius: 999px;
margin-top: 4px;
align-self: flex-start;
}
.amenity-card .price-chip.free { background: var(--c-laurel); color: var(--c-cream); }
@media (max-width: 1080px) { .amenity-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .amenity-card-grid { grid-template-columns: 1fr; } .price-row { grid-template-columns: 1fr; gap: 6px; } .price-row.head { display: none; } }
/* =========================================================
v1.12 — Referral programme feature (homepage + page)
========================================================= */
.referral-feature {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 56px;
align-items: center;
background: var(--c-blanc);
border-radius: var(--r-xl);
border: 1px solid var(--border-soft);
padding: 56px;
position: relative;
overflow: hidden;
isolation: isolate;
}
.referral-feature::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../patterns/azulejo-verde.svg");
background-size: 130px;
background-repeat: repeat;
opacity: 0.06;
pointer-events: none;
z-index: 0;
}
.referral-feature > * { position: relative; z-index: 1; }
.referral-feature h2 { margin: 0 0 16px; }
.referral-feature p {
color: var(--fg-muted);
max-width: 52ch;
margin: 0 0 24px;
}
.rf-tracks {
list-style: none;
padding: 0;
margin: 28px 0 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.rf-tracks li {
display: grid;
grid-template-columns: 56px 1fr;
gap: 18px;
align-items: baseline;
}
.rf-tracks .rf-num {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: 32px;
color: var(--c-laurel);
line-height: 1;
}
.rf-tracks div { display: flex; flex-direction: column; gap: 2px; }
.rf-tracks b {
font-family: var(--font-sans);
font-weight: 700;
font-size: 15px;
color: var(--c-graphite);
}
.rf-tracks span {
font-family: var(--font-sans);
font-size: 14px;
color: var(--fg-muted);
}
/* Coworking page: two-card "ways to join" grid. Sized for desktop,
stacks to a single column on mobile. */
.value-grid--paired { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1080px) {
.value-grid--paired { grid-template-columns: 1fr; }
}
.rf-art {
display: flex;
align-items: flex-end;
justify-content: center;
background: var(--c-cream);
border-radius: var(--r-lg);
aspect-ratio: 4/5;
overflow: hidden;
}
.rf-art img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1080px) {
.referral-feature { grid-template-columns: 1fr; padding: 40px; gap: 32px; }
.rf-art { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 640px) {
.referral-feature { padding: 28px; }
}
/* =========================================================
v1.13 — Card feature lists, transport rows, member chip
========================================================= */
.card-features {
list-style: none;
padding: 0;
margin: 14px 0 0;
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-graphite);
}
.card-features li {
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: var(--c-cream);
border: 1px solid var(--border-soft);
border-radius: 999px;
}
.transport-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px 18px;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid var(--border-soft);
font-family: var(--font-sans);
font-size: 14px;
color: var(--fg-muted);
}
.transport-row .eyebrow { width: 100%; margin: 0 0 4px; }
.transport-row b {
color: var(--c-graphite);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.price-chip.member {
background: var(--c-laurel);
color: var(--c-cream);
}
.price-chip.member::before {
content: "Members ";
opacity: 0.85;
font-weight: 400;
margin-right: 4px;
}
/* =========================================================
v1.14 — Tube roundel icon + transport-row polish
========================================================= */
.tube-icon {
display: inline-block;
width: 14px;
height: 14px;
vertical-align: -2px;
margin-right: 6px;
color: var(--c-laurel);
flex-shrink: 0;
}
.tube-icon.lg {
width: 18px;
height: 18px;
vertical-align: -3px;
margin-right: 8px;
}
/* Card meta — when used for tube stations on the location cards */
.location-card .meta {
flex-wrap: wrap;
row-gap: 8px;
column-gap: 18px;
align-items: center;
}
.location-card .meta .station {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.location-card .meta .station .min {
font-weight: 700;
color: var(--c-graphite);
font-variant-numeric: tabular-nums;
}
/* Locations page detail panel transport row — chip-style stations */
.transport-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid var(--border-soft);
font-family: var(--font-sans);
font-size: 14px;
color: var(--c-graphite);
}
.transport-row .eyebrow {
width: 100%;
margin: 0 0 8px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.transport-row .station {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--c-cream);
border: 1px solid var(--border-soft);
border-radius: 999px;
font-variant-numeric: tabular-nums;
}
.transport-row .station b {
color: var(--c-graphite);
font-weight: 700;
}
/* =========================================================
v1.15 — Station rows stack vertically (one per line)
========================================================= */
.location-card .meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-top: 14px;
font-family: var(--font-sans);
font-size: var(--fs-small);
text-align: left;
}
/* Meetings page: meta is a price row (£42/hr, half-day, day) — keep horizontal */
.location-grid--4 .location-card .meta {
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
column-gap: 12px;
row-gap: 4px;
}
.location-card .meta .station {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
background: transparent;
border: 0;
padding: 0;
color: var(--c-graphite);
}
.location-card .meta .station .tube-icon { color: var(--c-laurel); }
.location-card .meta .station .min {
font-weight: 700;
color: var(--c-graphite);
font-variant-numeric: tabular-nums;
margin-left: 4px;
}
/* Locations-page detail panel station chips stay as pills */
.transport-row .station { white-space: nowrap; }
/* =========================================================
v1.16 — Availability promo chip + dd-small style
========================================================= */
.promo-chip {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 28px;
padding: 10px 16px 10px 12px;
background: var(--c-moss-20);
color: var(--c-laurel);
border-radius: 999px;
border: 1px solid rgba(32, 68, 32, 0.2);
font-family: var(--font-sans);
font-size: 14px;
}
.promo-chip svg {
width: 18px;
height: 18px;
color: var(--c-laurel);
flex-shrink: 0;
}
.promo-chip b {
font-weight: 700;
color: var(--c-laurel);
}
/* =========================================================
v1.17 — Equal-height card bodies, CTAs pinned to bottom
========================================================= */
.location-card .body {
display: flex;
flex-direction: column;
padding: 24px 24px 28px;
}
.location-card .body > .cta {
margin-top: auto;
padding-top: 18px;
}
/* Align supporting text rows so all cards in a row have the same depth */
.location-card .house-line { min-height: 4.5em; }
.location-card .meta { min-height: 2.4em; }
.location-card .card-features { min-height: 28px; }
/* Meetings page: 4 cards on one line on wide viewports */
.location-grid--4 {
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.location-grid--4 .location-card h3 { font-size: 24px; }
@media (max-width: 1100px) {
.location-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.location-grid--4 { grid-template-columns: 1fr; }
}
/* =========================================================
v1.19 — Weekly events calendar
========================================================= */
.events-calendar {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--border);
margin-bottom: 32px;
}
.event-day {
padding: 32px 36px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 16px;
}
.event-day:first-child { padding-left: 0; }
.event-day:last-child { padding-right: 0; border-right: 0; }
.event-day .day-label {
font-family: var(--font-sans);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-muted);
display: flex;
align-items: baseline;
gap: 10px;
}
.event-day .day-label small {
font-family: var(--font-sans);
font-weight: 400;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-gold);
opacity: 0.9;
}
.event-row {
display: flex;
flex-direction: column;
gap: 4px;
}
.event-row .time {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 400;
color: var(--fg-muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.event-row .name {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.15;
color: var(--c-graphite);
}
.calendar-note {
margin: 16px 0 0;
font-family: var(--font-sans);
font-size: 14px;
color: var(--fg-muted);
max-width: 64ch;
line-height: 1.55;
}
.calendar-note strong {
color: var(--c-laurel);
font-weight: 700;
}
/* Wellness side-by-side layout — schedule on the left, studio photo on the
right. Photo becomes context for the schedule without dominating. */
.wellness-layout {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 56px;
align-items: start;
margin-top: 8px;
}
.wellness-layout__schedule { min-width: 0; }
/* Override the global .events-calendar — stack the day cards vertically
inside this narrower column so each day has room to breathe. */
.wellness-layout .events-calendar {
margin-top: 0;
margin-bottom: 0;
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--border);
}
.wellness-layout .event-day {
padding: 24px 0;
border-right: 0;
border-bottom: 1px solid var(--border);
}
.wellness-layout .event-day:first-child { padding-left: 0; }
.wellness-layout .event-day:last-child { padding-right: 0; border-bottom: 0; }
.wellness-layout .calendar-note { margin-top: 24px; }
.wellness-layout__photo {
margin: 0;
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.10);
position: sticky;
top: 100px; /* clears the sticky header on scroll */
align-self: start;
}
.wellness-layout__photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
}
@media (max-width: 1080px) {
.wellness-layout { grid-template-columns: 1fr; gap: 40px; }
.wellness-layout__photo { position: static; }
.wellness-layout__photo img { aspect-ratio: 16 / 10; }
}
@media (max-width: 720px) {
.wellness-layout { gap: 28px; }
.wellness-layout__photo { border-radius: var(--r-md); }
}
@media (max-width: 1080px) {
.events-calendar { grid-template-columns: 1fr; }
.event-day {
padding: 24px 0;
border-right: 0;
}
}
/* =========================================================
v1.21 — Hero image hangs off the right edge of the viewport
The text/CTA/space-finder column stays put. The image frame
extends from its grid position to the viewport's right edge,
giving the photo presence without disrupting anything else.
========================================================= */
.hero .inner { position: relative; }
.hero-art {
/* allow the frame to overflow .hero-art on the right */
overflow: visible;
position: relative;
}
.hero-art .frame {
/* override the 460px cap and extend rightward past the .inner container */
max-width: none !important;
width: calc(100% + ((100vw - var(--container-xl, 1360px)) / 2) + 32px);
/* keep the photo a touch taller now that it has more room */
aspect-ratio: auto;
min-height: 560px;
max-height: 680px;
/* round only the visible (left + top + bottom) corners — right edge bleeds off-screen */
border-radius: var(--r-2xl) 0 0 var(--r-2xl);
}
@media (max-width: 1080px) {
.hero-art .frame {
width: 100%;
max-width: 460px !important;
aspect-ratio: 4/5;
min-height: auto;
border-radius: var(--r-2xl);
}
}
/* =========================================================
v1.22 — Fix the dark band above the hero photo
========================================================= */
.hero-art .frame {
background: var(--c-cream) !important;
}
.hero-art .frame img,
.hero-art .frame img.hero-photo {
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center; /* photo composition handles full frame */
display: block;
}
/* =========================================================
v1.23 — Force hero photo to fill the bled frame
========================================================= */
.hero-art .frame {
position: relative !important;
/* keep flex layout for any non-photo children, but the photo absolute-fills */
}
.hero-art .frame img.hero-photo {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center;
display: block;
}
/* =========================================================
v1.24 — Header / nav fixes (no more squashed mid-width)
========================================================= */
.nav-links a { white-space: nowrap; }
.site-header .btn,
.site-header .btn-magnetic { white-space: nowrap; flex-shrink: 0; }
/* Tighten the gap once we're under 1280px — buys a bit more room */
@media (max-width: 1280px) {
.site-header .inner { gap: 20px; }
.nav-links { gap: 18px; }
.nav-links a { font-size: 13px; }
}
/* At ≤1080px we hand over to the mobile drawer */
@media (max-width: 1080px) {
/* nav-links + nav-toggle now handled by v1.24 at 1080px */
}
/* Mobile drawer */
.mobile-drawer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--c-laurel);
z-index: 60;
display: flex;
flex-direction: column;
padding: 96px 32px 40px;
transform: translateY(-100%);
visibility: hidden;
transition: transform 360ms var(--ease-out-strong),
visibility 0s linear 360ms;
}
.mobile-drawer.is-open {
transform: translateY(0);
visibility: visible;
transition: transform 360ms var(--ease-out-strong),
visibility 0s linear 0s;
}
.mobile-drawer .close {
position: absolute;
top: 22px;
right: 22px;
background: transparent;
border: 1px solid rgba(253, 248, 240, 0.3);
border-radius: 999px;
padding: 10px 16px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--c-cream);
cursor: pointer;
letter-spacing: 0.02em;
}
.mobile-drawer ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.mobile-drawer a {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: 32px;
color: var(--c-cream);
text-decoration: none;
padding: 12px 0;
border-bottom: 1px solid rgba(253, 248, 240, 0.12);
display: block;
transition: color var(--dur-base) var(--ease-out-strong);
}
.mobile-drawer a:hover { color: var(--c-gold); }
.mobile-drawer a[aria-current="page"] {
color: var(--c-gold);
text-shadow: 0 0 16px rgba(255, 219, 79, 0.5);
}
.nav-links a[aria-current="page"] {
text-decoration: underline;
text-decoration-color: var(--c-gold);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
.mobile-drawer .cta-block-row {
margin-top: 32px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
body.drawer-open { overflow: hidden; }
/* =========================================================
v1.25 — Hamburger icon button (replaces 'Menu' text)
========================================================= */
.nav-toggle {
display: none;
background: var(--c-graphite);
border: 0;
border-radius: 999px;
width: 44px;
height: 44px;
padding: 0;
cursor: pointer;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background var(--dur-base) var(--ease-out-strong),
transform var(--dur-fast) var(--ease-out-strong);
}
.nav-toggle:hover { background: #585656; }
.nav-toggle:active { transform: scale(0.96); }
.nav-toggle:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.nav-toggle .bars {
position: relative;
width: 20px;
height: 14px;
display: block;
}
.nav-toggle .bars::before,
.nav-toggle .bars::after,
.nav-toggle .bars span {
content: "";
position: absolute;
left: 0;
right: 0;
height: 2px;
background: var(--c-cream);
border-radius: 2px;
transition: transform 280ms var(--ease-out-strong),
top 180ms var(--ease-out-strong),
opacity 180ms var(--ease-out-strong);
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars span { top: 6px; }
.nav-toggle .bars::after { top: 12px; }
/* X state when drawer is open */
body.drawer-open .nav-toggle .bars::before {
top: 6px;
transform: rotate(45deg);
}
body.drawer-open .nav-toggle .bars span {
opacity: 0;
}
body.drawer-open .nav-toggle .bars::after {
top: 6px;
transform: rotate(-45deg);
}
/* Lift the breakpoint up to 1100px so iPad-landscape gets the drawer too */
@media (max-width: 1100px) {
.nav-links { display: none; }
.nav-toggle { display: inline-flex; }
.site-header .btn { display: none; } /* CTAs (Members Portal, Book a tour) move into the drawer */
}
/* =========================================================
v1.26 — Mobile drawer fits the viewport (scroll if needed)
========================================================= */
.mobile-drawer {
/* constrain to viewport — drawer can never exceed screen height */
bottom: auto;
height: 100vh;
max-height: 100dvh;
/* enable scrolling within the drawer if the nav list still overflows */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* tighter top padding so the menu starts higher */
padding: 84px 28px 32px;
/* slightly faster transition so close feels snappier */
transition: transform 280ms var(--ease-out-strong),
visibility 0s linear 280ms;
}
.mobile-drawer.is-open {
transition: transform 280ms var(--ease-out-strong),
visibility 0s linear 0s;
}
.mobile-drawer .close {
top: 18px;
right: 18px;
padding: 9px 14px;
font-size: 12px;
}
.mobile-drawer ul {
gap: 0;
}
.mobile-drawer a {
font-size: 22px;
padding: 11px 0;
line-height: 1.25;
}
.mobile-drawer .cta-block-row {
margin-top: 24px;
padding-bottom: 12px;
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
@media (max-width: 380px) {
.mobile-drawer a { font-size: 19px; padding: 9px 0; }
.mobile-drawer { padding: 72px 24px 24px; }
}
/* =========================================================
v1.27 — Drawer CTA looks like a button + slower close
========================================================= */
/* Restore real button styling inside the drawer (overriding the
.mobile-drawer a rule that was making it serif/italic/cream/no-padding) */
.mobile-drawer .cta-block-row .btn,
.mobile-drawer a.btn {
font-family: var(--font-sans) !important;
font-style: normal !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: var(--ls-button);
color: #204420 !important; /* laurel, per request */
padding: 14px 28px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-bottom: 0 !important; /* kill the hairline */
line-height: 1;
width: auto;
white-space: nowrap;
border-radius: var(--r-pill);
}
.mobile-drawer .cta-block-row .btn-accent {
background: var(--c-gold);
color: #204420 !important;
}
.mobile-drawer .cta-block-row .btn-accent:hover {
background: var(--c-gold-80);
}
/* Members Portal button on the laurel drawer — cream text, hairline border */
.mobile-drawer .cta-block-row .btn-secondary {
background: transparent;
color: var(--c-cream) !important;
border: 1px solid rgba(253, 248, 240, 0.32) !important;
}
.mobile-drawer .cta-block-row .btn-secondary:hover {
background: rgba(253, 248, 240, 0.08);
}
/* Slower close: 520ms instead of 280ms (open stays snappy at 280ms) */
.mobile-drawer {
transition: transform 520ms var(--ease-out-strong),
visibility 0s linear 520ms;
}
.mobile-drawer.is-open {
transition: transform 280ms var(--ease-out-strong),
visibility 0s linear 0s;
}
/* =========================================================
v1.28 — Real Juntos SVG logo (graphite + cream variants)
========================================================= */
.brand-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
line-height: 0;
}
.brand-logo img {
height: 32px;
width: auto;
display: block;
}
@media (max-width: 640px) {
.brand-logo img { height: 26px; }
}
/* Location-card corner-mark uses the cream SVG */
.location-card .photo .corner-mark {
display: inline-flex;
align-items: center;
line-height: 0;
}
.location-card .photo .corner-mark img {
height: 16px;
width: auto;
display: block;
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
}
/* Feature-image corner-mark (meetings event-space hero) */
.feature-image .corner-mark {
display: inline-flex;
align-items: center;
line-height: 0;
}
.feature-image .corner-mark img {
height: 20px;
width: auto;
display: block;
filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
}
/* =========================================================
v1.29 — Big copy pass adjustments
========================================================= */
/* 1. Hero h1 gold-dot nudged 2mm to the right */
.hero h1 .gold-dot,
.hero h1 .nowrap .gold-dot {
margin-left: calc(0.06em + 2mm);
}
/* 2. Value-card narrow-screen alignment: text expands, head doesn't squeeze */
@media (max-width: 1080px) {
.value-card { gap: 16px; }
.value-card p { max-width: none; }
.value-card .value-head { gap: 16px; }
}
/* 14. Editorial pattern strip width >= tile so it never crops */
.editorial::before {
width: 80px !important;
left: -96px !important;
background-size: 80px !important;
background-position: 0 0 !important;
}
@media (max-width: 1280px) {
.editorial::before { left: -64px !important; }
}
/* 5b. 'Know someone who belongs here?' — yellow dot under the question mark */
.q-yellow {
position: relative;
display: inline-block;
padding-right: 0.08em;
}
.q-yellow::after {
content: "";
position: absolute;
bottom: 0.07em;
right: 0;
width: 0.18em;
height: 0.18em;
background: var(--c-gold);
border-radius: 999px;
/* mask the native ? dot underneath */
box-shadow: 0 0 0 0.01em var(--c-gold);
}
/* =========================================================
v1.31 — Location detail gallery (2x2 grid of 4 images)
========================================================= */
.location-detail .right.gallery {
background-image: none !important;
background-color: transparent !important;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 4px;
padding: 4px;
min-height: 480px;
}
.location-detail .right.gallery img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.location-detail .right.gallery img:nth-child(1) { border-radius: var(--r-md) 0 0 0; }
.location-detail .right.gallery img:nth-child(2) { border-radius: 0 var(--r-md) 0 0; }
.location-detail .right.gallery img:nth-child(3) { border-radius: 0 0 0 var(--r-md); }
.location-detail .right.gallery img:nth-child(4) { border-radius: 0 0 var(--r-md) 0; }
@media (max-width: 1080px) {
.location-detail .right.gallery { min-height: 360px; }
}
@media (max-width: 640px) {
/* On phones, switch the 2x2 grid into a horizontal swipe carousel so
the page doesn't run on for four image-heights. CSS-only scroll-snap
with native iOS momentum scroll — no JS needed. */
.location-detail .right.gallery {
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
grid: none;
gap: 6px;
padding: 6px;
min-height: 0;
}
.location-detail .right.gallery::-webkit-scrollbar { display: none; }
.location-detail .right.gallery img {
flex: 0 0 calc(100% - 12px);
width: calc(100% - 12px);
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
scroll-snap-align: center;
border-radius: var(--r-md) !important;
}
}
/* === Illustration peeks === */
.illu-peek {
position: absolute;
pointer-events: none;
z-index: 2;
width: 140px;
height: auto;
}
.illu-peek img {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.10));
}
.illu-peek--br { bottom: 0; right: 0; transform: translate(18%, 22%); width: 140px; }
.illu-peek--bl { bottom: 0; left: 0; transform: translate(-20%, 20%); width: 150px; }
.illu-peek--tr { top: 0; right: 0; transform: translate(20%, -18%); width: 130px; }
.illu-peek--tl { top: 0; left: 0; transform: translate(-18%, -18%); width: 120px; }
.illu-peek--ml { top: 50%; left: 0; transform: translate(-30%, -50%); width: 120px; }
.illu-peek--mr { top: 50%; right: 0; transform: translate(30%, -50%); width: 120px; }
@media (max-width: 640px) {
.illu-peek { display: none; }
}
/* Sections we apply patterns to must clip the peeks visually */
section.pattern-ground { overflow: hidden; }
/* === Hero patches === */
/* The 80px courtyard floor band at the bottom of the hero */
.hero {
position: relative;
overflow: hidden;
}
.hero-tile-band {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 80px;
background-image: url("../patterns/moorish-star.svg");
background-size: 90px;
background-repeat: repeat;
opacity: 0.9;
pointer-events: none;
z-index: 2;
}
@media (max-width: 640px) {
.hero-tile-band { height: 56px; background-size: 64px; }
}
/* Override the v1.7 hero pattern: bigger tiles, more visible, no drift */
.hero::before {
background-image: url("../patterns/moorish-star.svg") !important;
background-size: 160px !important;
background-repeat: repeat !important;
opacity: 0.16 !important;
animation: none !important;
}
/* === Kill the old narrow editorial strip === */
.editorial::before { display: none !important; }
/* === Kill the page-title bottom strip (we're not using it now) === */
.page-title::after { display: none !important; }
/* === CTA block: bump pattern from 6% to 20% === */
.cta-block::before {
background-size: 180px !important;
opacity: 0.20 !important;
}
/* === Footer: bump pattern from 4% to 12% === */
.site-footer::before {
opacity: 0.12 !important;
background-size: 140px !important;
}
/* === Location-card photo: visible Quatrefoil background showing between cards === */
.location-grid.pattern-ground {
overflow: visible;
}
/* === Newsletter — reuse existing pattern but bump visibility === */
.newsletter::before {
background-size: 130px !important;
opacity: 0.16 !important;
}
/* =========================================================
v2.1 — Soft hero + a touch more pattern on backgrounds
========================================================= */
/* Hero Moorish Star: softer (0.04) + a bit larger tile so the drift reads */
.hero::before {
background-image: url("../patterns/moorish-star.svg") !important;
background-size: 180px !important;
background-repeat: repeat !important;
opacity: 0.04 !important;
}
@media (prefers-reduced-motion: no-preference) {
.hero::before {
animation: pattern-drift 90s linear infinite !important;
}
}
/* Subtle pattern grounds on two homepage sections (low opacity — texture, not focal) */
.homepage-values-bg {
position: relative;
isolation: isolate;
}
.homepage-values-bg::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../patterns/terracotta-quatrefoil.svg");
background-repeat: repeat;
background-size: 140px;
opacity: 0.10;
pointer-events: none;
z-index: 0;
}
.homepage-values-bg > * { position: relative; z-index: 1; }
.homepage-events-bg {
position: relative;
isolation: isolate;
}
.homepage-events-bg::before {
content: "";
position: absolute;
inset: 0;
/* Encaustic Victorian — graphite on cream. Switched from Moorish Star
to avoid the faint yellow-on-grey rendering at low opacity. */
background-image: url("../patterns/encaustic-victorian.svg");
background-repeat: repeat;
background-size: 140px;
opacity: 0.06;
pointer-events: none;
z-index: 0;
}
.homepage-events-bg > * { position: relative; z-index: 1; }
/* Wellbeing section: subtle Terracotta Quatrefoil ground */
.homepage-wellbeing-bg {
position: relative;
isolation: isolate;
}
.homepage-wellbeing-bg::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../patterns/terracotta-quatrefoil.svg");
background-repeat: repeat;
background-size: 150px;
opacity: 0.06;
pointer-events: none;
z-index: 0;
}
.homepage-wellbeing-bg > * { position: relative; z-index: 1; }
/* =========================================================
Google rating badge (in hero)
========================================================= */
.google-rating {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 18px;
padding: 10px 16px;
background: rgba(253, 248, 240, 0.08);
border: 1px solid rgba(253, 248, 240, 0.18);
border-radius: var(--r-pill);
color: var(--c-cream);
text-decoration: none;
font-family: var(--font-sans);
font-size: 14px;
transition: background var(--dur-base) var(--ease-out-strong),
border-color var(--dur-base) var(--ease-out-strong);
}
.google-rating:hover {
background: rgba(253, 248, 240, 0.14);
border-color: rgba(255, 219, 79, 0.5);
}
.google-rating .stars {
display: inline-flex;
align-items: center;
gap: 1px;
color: var(--c-gold);
}
.google-rating .stars svg {
width: 16px;
height: 16px;
display: block;
}
.google-rating .rating-text {
white-space: nowrap;
letter-spacing: 0.01em;
}
.google-rating .rating-text b {
font-weight: 700;
color: var(--c-cream);
}
/* =========================================================
Google Reviews section
========================================================= */
.reviews-section .reviews-head {
text-align: center;
margin-bottom: 56px;
}
.reviews-section .reviews-head .eyebrow {
margin-bottom: 16px;
}
.reviews-section .reviews-head h2 {
margin: 0 0 28px;
}
.reviews-summary {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-sans);
font-size: 16px;
color: var(--c-graphite);
}
.reviews-summary .stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--c-gold);
}
.reviews-summary .stars svg {
width: 18px;
height: 18px;
}
.reviews-summary .rating-text b {
font-weight: 700;
}
.reviews-summary .rating-text a {
color: var(--c-laurel);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
font-weight: 700;
}
.reviews-summary .rating-text a:hover {
color: var(--c-graphite);
}
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.review-card {
background: var(--c-blanc);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 32px;
display: flex;
flex-direction: column;
gap: 18px;
transition: transform var(--dur-base) var(--ease-out-strong),
box-shadow var(--dur-base) var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
.review-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
}
.review-card .stars {
display: inline-flex;
align-items: center;
gap: 1px;
color: var(--c-gold);
}
.review-card .stars svg {
width: 18px;
height: 18px;
}
.review-card .review-text {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 18px;
line-height: 1.5;
color: var(--c-graphite);
margin: 0;
text-wrap: pretty;
}
.review-card .review-meta {
margin-top: auto;
font-family: var(--font-sans);
font-size: 13px;
color: var(--c-graphite);
display: flex;
flex-direction: column;
gap: 2px;
}
.review-card .review-meta b {
font-weight: 700;
font-size: 14px;
}
.review-card .review-meta span {
color: var(--fg-muted);
}
@media (max-width: 1080px) {
.reviews-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.reviews-grid { grid-template-columns: 1fr; gap: 16px; }
.review-card { padding: 24px; }
.reviews-summary { flex-wrap: wrap; justify-content: center; }
}
/* =========================================================
Sticky-scroll showcase (Mindspace-style)
========================================================= */
.sticky-showcase { padding: 120px 0; }
.sticky-showcase-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.sticky-showcase-title {
font-size: clamp(36px, 5vw, 64px);
line-height: 1.05;
margin: 0 0 40px;
max-width: none;
}
.sticky-item {
padding: 56px 0;
border-top: 1px solid var(--border);
min-height: 60vh; /* generous scrub area so the sticky swap has time */
display: flex;
flex-direction: column;
justify-content: center;
}
.sticky-item:last-child {
border-bottom: 1px solid var(--border);
}
.sticky-item h3 {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: clamp(28px, 3vw, 40px);
margin: 0 0 16px;
color: var(--c-graphite);
transition: color var(--dur-base) var(--ease-out-strong);
}
.sticky-item p {
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.55;
color: var(--fg-muted);
margin: 0 0 24px;
max-width: 48ch;
transition: color var(--dur-base) var(--ease-out-strong);
}
.sticky-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-weight: 700;
font-size: 14px;
color: var(--c-graphite);
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 4px;
align-self: flex-start;
letter-spacing: 0.02em;
transition: color var(--dur-base) var(--ease-out-strong);
}
.sticky-link::after {
content: "→";
margin-left: 4px;
transition: transform 220ms var(--ease-out-strong);
}
.sticky-link:hover::after { transform: translateX(3px); }
/* Dim non-active items slightly */
.sticky-item:not(.is-active) h3 { color: var(--c-graphite-60); }
.sticky-item:not(.is-active) p { color: var(--c-graphite-60); }
.sticky-item:not(.is-active) .sticky-link { color: var(--c-graphite-60); }
.sticky-showcase-image-wrap {
position: sticky;
top: 100px; /* offset below the sticky header */
height: max-content;
}
.sticky-showcase-image {
position: relative;
aspect-ratio: 3/2;
border-radius: var(--r-xl);
overflow: hidden;
background: var(--c-cream);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.10);
}
.sticky-showcase-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 500ms var(--ease-out-strong);
pointer-events: none;
}
.sticky-showcase-image img.active {
opacity: 1;
}
/* Meeting Rooms shot: TV sits on the left of the frame, so anchor the crop left */
.sticky-showcase-image img[data-key="meeting-rooms"] {
object-position: left center;
}
/* Per-slide gallery stack beneath the main showcase image.
All 5 galleries occupy the same grid cell — only the active one is
visible. As the user scrolls slides, the gallery cross-fades with the
main image above it. */
.sticky-showcase-gallery-stack {
display: grid;
margin-top: 12px;
}
.sticky-showcase-gallery {
grid-area: 1 / 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
opacity: 0;
pointer-events: none;
transition: opacity 500ms var(--ease-out-strong);
}
.sticky-showcase-gallery.active {
opacity: 1;
pointer-events: auto;
}
.sticky-showcase-gallery-item {
position: relative;
display: block;
aspect-ratio: 1 / 1;
border-radius: var(--r-md);
overflow: hidden;
text-decoration: none;
color: var(--c-cream);
background: var(--c-graphite);
isolation: isolate;
}
.sticky-showcase-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.92);
}
.sticky-showcase-gallery-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 55%);
z-index: 1;
pointer-events: none;
}
.sticky-showcase-gallery-label {
position: absolute;
left: 12px;
bottom: 10px;
z-index: 2;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-cream);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.sticky-showcase-gallery-item:focus-visible {
outline: 2px solid var(--c-gold);
outline-offset: 3px;
}
@media (max-width: 720px) {
.sticky-showcase-gallery { gap: 8px; margin-top: 8px; }
.sticky-showcase-gallery-label { font-size: 10px; left: 8px; bottom: 7px; letter-spacing: 0.14em; }
}
/* Tablet + mobile: single column. The image block pins below the
sticky header (same behaviour as desktop) while the text slides
scroll underneath it; the scroll observer keeps swapping the
active image per slide. Sticky releases naturally when the
section ends after the Podcast slide. */
@media (max-width: 1080px) {
.sticky-showcase { padding: 80px 0; }
.sticky-showcase-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.sticky-showcase-image-wrap {
position: sticky;
top: 64px; /* just below the mobile header */
z-index: 5;
grid-row: 1;
background: var(--c-cream); /* mask text scrolling beneath */
padding: 8px 0 12px;
}
.sticky-showcase-image {
aspect-ratio: auto;
height: 180px; /* letterbox crop — leaves room to read */
margin-bottom: 0;
border-radius: var(--r-md);
}
/* Tiles hidden on small screens — the pinned main image carries
the swap; tiles return on desktop. */
.sticky-showcase-gallery-stack { display: none; }
.sticky-item {
min-height: auto;
padding: 32px 0;
}
.sticky-item h3 { font-size: 22px; }
.sticky-item:not(.is-active) h3,
.sticky-item:not(.is-active) p,
.sticky-item:not(.is-active) .sticky-link { color: var(--c-graphite); }
}
/* =========================================================
Anchor scroll offset — sticky header doesn't cover targets
========================================================= */
[id] {
scroll-margin-top: 90px;
}
@media (max-width: 640px) {
[id] { scroll-margin-top: 72px; }
}
/* =========================================================
Meeting Room 2 photo — gentle brightness lift via background-blend
========================================================= */
.location-card .photo[style*="meeting-room-2.jpg"] {
filter: brightness(1.08) saturate(1.05);
}
/* =========================================================
VIDEO HERO — cinematic full-bleed top banner (homepage)
========================================================= */
.video-hero {
position: relative;
width: 100%;
min-height: 100dvh;
overflow: hidden;
background: var(--c-laurel);
isolation: isolate;
display: flex;
flex-direction: column;
}
.video-hero__media {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
z-index: 0;
}
.video-hero__scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 60%,
rgba(0,0,0,0.12) 100%);
z-index: 1;
pointer-events: none;
}
/* Top-corner glass-pill controls */
.video-hero__controls {
position: absolute; top: 24px; right: 24px;
z-index: 3; display: flex; gap: 8px;
}
.video-hero__btn {
width: 40px; height: 40px;
border-radius: 999px;
border: 1px solid rgba(253,248,240,0.32);
background: rgba(0,0,0,0.35);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--c-cream);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.video-hero__btn:hover { background: rgba(0,0,0,0.55); border-color: rgba(253,248,240,0.6); }
.video-hero__btn:active { transform: scale(0.94); }
.video-hero__btn:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.video-hero__btn svg { width: 16px; height: 16px; }
/* Bottom-anchored content (now flex child, since the form makes it taller) */
.video-hero__content {
position: relative;
z-index: 2;
margin-top: auto; /* push to the bottom of the flex column */
padding:
clamp(96px, 14vh, 160px) /* top — clear from sticky header */
clamp(24px, 5vw, 80px)
clamp(56px, 8vh, 96px);
max-width: 880px;
}
.video-hero__eyebrow {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: rgba(253,248,240,0.82);
margin: 0 0 var(--s-6);
}
.video-hero__title {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(48px, 7.4vw, 96px);
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--c-cream);
margin: 0 0 var(--s-5);
text-wrap: balance;
}
/* Form-only variant: the video hero contains just the space-finder
form, anchored to the very BOTTOM edge of the video with a small
breathing gap. Form itself centred horizontally. */
.video-hero__content--form-only {
margin-top: auto;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0 clamp(24px, 5vw, 80px) clamp(80px, 13vh, 200px);
max-width: 980px;
width: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
/* Dark pill styling for the space-finder inside the video hero —
inverts the light cream frost to a dark translucent pill.
Corners tightened from --r-xl (28px) to --r-md (14px) for a less
pill-like, more panel-like feel. */
.video-hero__content--form-only .video-hero__form {
background: rgba(255, 255, 255, 0.68) !important;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: var(--r-md);
color: var(--c-graphite);
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
}
.video-hero__content--form-only .video-hero__form .btn {
border-radius: var(--r-md);
}
.video-hero__content--form-only .video-hero__form .field {
border-right-color: rgba(66, 64, 64, 0.15);
border-bottom-color: rgba(66, 64, 64, 0.15);
}
.video-hero__content--form-only .video-hero__form label {
color: rgba(66, 64, 64, 0.65);
font-weight: 700;
}
.video-hero__content--form-only .video-hero__form input,
.video-hero__content--form-only .video-hero__form select {
color: var(--c-graphite);
font-weight: 500;
}
.video-hero__content--form-only .video-hero__form input::placeholder,
.video-hero__content--form-only .video-hero__form select { color: rgba(66, 64, 64, 0.45); }
.video-hero__content--form-only .video-hero__form {
animation-delay: 0ms;
margin: 0 auto;
}
/* Intro section — sits between the video and the values section.
Holds the H1 landing statement + Explore link + perks strip.
Plain cream, no pattern — pattern lives on the values section
below. */
.hero-intro {
text-align: left;
}
.hero-intro__title {
font-family: var(--font-serif); /* Lora */
font-style: italic;
font-weight: 600;
font-size: clamp(36px, 6vw, 84px);
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--c-graphite);
margin: 0 0 32px;
text-wrap: balance;
}
.hero-intro__ctas { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.hero-intro__link {
font-family: var(--font-sans);
font-weight: 700;
font-size: 15px;
color: var(--c-graphite);
text-decoration: none;
border-bottom: 1px solid var(--c-graphite);
padding-bottom: 2px;
transition: color var(--dur-base) var(--ease-out-strong);
}
.hero-intro__link:hover { color: var(--c-laurel); border-bottom-color: var(--c-laurel); }
.hero-intro__perks {
color: var(--fg-muted);
font-family: var(--font-sans);
font-size: 14px;
letter-spacing: 0.02em;
}
.hero-intro__perks span:nth-child(2n) { color: rgba(66, 64, 64, 0.3); }
.video-hero__lede {
font-family: var(--font-sans);
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.55;
color: rgba(253,248,240,0.9);
max-width: 56ch;
margin: 0 0 var(--s-8);
text-wrap: pretty;
}
.video-hero__ctas {
display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap;
}
.video-hero__link {
font-family: var(--font-sans);
font-weight: 700;
font-size: 14px;
color: var(--c-cream);
text-decoration: none;
letter-spacing: var(--ls-button);
border-bottom: 1px solid rgba(253,248,240,0.4);
padding-bottom: 4px;
transition: border-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out);
}
.video-hero__link:hover { border-color: var(--c-gold); color: var(--c-gold); }
.video-hero__link:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 4px; border-radius: 2px; }
/* Bottom-center scroll cue */
.video-hero__scroll {
position: absolute;
left: 50%; bottom: 22px;
transform: translateX(-50%);
z-index: 3;
color: rgba(253,248,240,0.78);
text-decoration: none;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.video-hero__scroll-line {
width: 1px; height: 36px;
background: linear-gradient(to bottom,
rgba(253,248,240,0) 0%,
rgba(253,248,240,0.7) 50%,
rgba(253,248,240,0) 100%);
animation: vh-scroll-line 2.4s ease-in-out infinite;
}
@keyframes vh-scroll-line {
0% { transform: translateY(-12px); opacity: 0; }
35% { opacity: 1; }
100% { transform: translateY(12px); opacity: 0; }
}
/* Perks strip inside the video hero — reuses .hero-perks colour rules */
.video-hero__perks { margin-top: var(--s-8); }
/* Space-finder form at 60% cream — backdrop blur keeps text readable */
.video-hero__form {
background: rgba(253, 248, 240, 0.6) !important;
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
margin-top: 32px;
border: 1px solid rgba(253, 248, 240, 0.35);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}
.video-hero__form .field { border-right-color: rgba(66, 64, 64, 0.18); }
.video-hero__form label { color: rgba(66, 64, 64, 0.7); }
/* Hero form is 4 fields + button instead of 3 + button — widen the grid
and re-do divider rules. Column widths use minmax() so each column
has a firm minimum (label width + breathing room) and can't shrink
below it. This guarantees "TEAM SIZE", "FIRST NAME" etc. never wrap. */
.video-hero__form {
grid-template-columns:
minmax(120px, 1fr) /* First name */
minmax(160px, 1.4fr) /* Email — needs room for full addresses */
minmax(135px, 1.2fr) /* Location */
minmax(115px, 1fr) /* Team size */
auto; /* Button */
max-width: 980px;
gap: 6px;
}
.video-hero__form .field { padding: 10px 16px; }
.video-hero__form .field:nth-child(3) { border-right: 1px solid rgba(66, 64, 64, 0.18); }
.video-hero__form .field:nth-child(4) { border-right: 0; }
/* When the form is replaced by the inline success state, switch to a
single-cell block layout so the message doesn't collapse into a grid cell. */
.video-hero__form.is-submitted {
display: block;
text-align: center;
}
.video-hero__form input::placeholder { color: rgba(66, 64, 64, 0.42); }
@media (max-width: 1080px) {
.video-hero__form {
grid-template-columns: 1fr 1fr;
}
.video-hero__form > .btn { grid-column: 1 / -1; margin-top: 4px; }
.video-hero__form .field { border-right: 0 !important; }
}
@media (max-width: 640px) {
/* Phones: compact 2x2 grid so the form doesn't swallow the whole
video. Tight paddings, small labels, full-width button. */
.video-hero__form,
.video-hero__content--form-only .video-hero__form {
grid-template-columns: 1fr 1fr;
gap: 2px 12px;
max-width: 100%;
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
}
.video-hero__form .field {
border-right: 0 !important;
border-bottom: 1px solid rgba(66, 64, 64, 0.15);
padding: 6px 4px 8px;
}
.video-hero__form label {
font-size: 9px;
letter-spacing: 0.14em;
}
.video-hero__form input,
.video-hero__form select { font-size: 13px; }
.video-hero__form > .btn {
grid-column: 1 / -1;
margin-top: 8px;
padding-top: 10px;
padding-bottom: 10px;
}
/* Sit the compact form low so most of the video stays visible */
.video-hero__content--form-only {
padding: 0 16px 20px;
}
}
/* Staggered entrance */
.video-hero__eyebrow,
.video-hero__title,
.video-hero__lede,
.video-hero__ctas,
.video-hero__perks,
.video-hero__form {
opacity: 0;
transform: translateY(18px);
animation: vh-rise 1100ms var(--ease-out-strong) forwards;
}
.video-hero__eyebrow { animation-delay: 240ms; }
.video-hero__title { animation-delay: 380ms; }
.video-hero__lede { animation-delay: 560ms; }
.video-hero__ctas { animation-delay: 720ms; }
.video-hero__perks { animation-delay: 860ms; }
.video-hero__form { animation-delay: 1000ms; }
@keyframes vh-rise { to { opacity: 1; transform: translateY(0); } }
@media (max-width: 720px) {
.video-hero__scroll { display: none; }
.video-hero__controls { top: 16px; right: 16px; }
.video-hero__title { font-size: clamp(40px, 9vw, 56px); }
.video-hero__content { padding-top: clamp(80px, 14vh, 120px); }
.video-hero__form { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.video-hero__eyebrow,
.video-hero__title,
.video-hero__lede,
.video-hero__ctas,
.video-hero__perks,
.video-hero__form {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
.video-hero__scroll-line { animation: none !important; }
}
/* =========================================================
Newsletter signup — lightbox, side tab, footer band
(markup injected by js/newsletter.js)
========================================================= */
.nl-overlay {
position: fixed; inset: 0; z-index: 1200;
background: rgba(42, 38, 34, 0.55);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.nl-overlay[hidden] { display: none; }
body.nl-open { overflow: hidden; }
.nl-card {
position: relative;
background: var(--c-cream);
border-radius: var(--r-xl);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
max-width: 540px; width: 100%;
padding: 44px 44px 32px;
}
.nl-card h3 { font-size: clamp(24px, 3vw, 32px); margin: 10px 0 12px; }
.nl-card .nl-lede { color: var(--fg-muted); margin: 0 0 24px; }
.nl-decline {
display: block; margin: 18px auto 0;
background: none; border: 0; cursor: pointer;
font-family: var(--font-sans); font-size: 13px;
color: var(--fg-muted); text-decoration: underline;
text-underline-offset: 3px;
}
.nl-decline:hover { color: var(--c-graphite); }
.nl-smallprint { font-size: 12px; color: var(--fg-soft); margin: 10px 0 0; }
.nl-error { font-size: 13px; color: #a4423b; margin: 8px 0 0; }
.nl-form .btn { margin-top: 6px; }
.nl-success p { margin: 8px 0; color: var(--c-graphite); }
/* Side tab — right edge, below the fold widgets */
.nl-tab {
position: fixed; right: 0; top: auto; bottom: 140px;
transform: none;
z-index: 900;
writing-mode: vertical-rl;
background: var(--c-laurel); color: var(--c-cream);
border: 0; cursor: pointer;
border-radius: 12px 0 0 12px;
padding: 18px 11px;
font-family: var(--font-sans); font-size: 13px; font-weight: 700;
letter-spacing: 0.12em;
box-shadow: -4px 4px 16px rgba(0, 0, 0, 0.18);
}
.nl-tab:hover { background: var(--c-graphite); }
/* Footer band — sits above the legal strip inside the graphite footer */
.footer-newsletter {
margin-top: 8px;
}
.footer-newsletter .fn-inner {
max-width: var(--container-xl); margin: 0 auto;
display: grid; grid-template-columns: 1.1fr 1fr;
gap: 48px; align-items: center;
padding-bottom: 48px;
}
.footer-newsletter h3 { color: var(--c-cream); margin: 0 0 10px; font-size: 24px; }
.footer-newsletter p { color: rgba(253, 248, 240, 0.75); margin: 0; max-width: 44ch; }
.footer-newsletter .field-row label { color: rgba(253, 248, 240, 0.68); }
.footer-newsletter .nl-success p { color: var(--c-cream); }
@media (max-width: 640px) {
.nl-card { padding: 32px 22px 24px; }
.nl-tab { top: auto; bottom: 96px; padding: 14px 9px; font-size: 12px; }
.footer-newsletter .fn-inner { grid-template-columns: 1fr; gap: 24px; }
.footer-newsletter { margin-top: 0; }
}