/* --------------------------------------------------------------------------
WEBFONTS — all three are self-hosted from assets/fonts/ and preloaded in
each page's . Oswald and Epilogue used to come from Google Fonts;
serving them from our own origin removes two extra DNS+TLS handshakes and
a second round trip, which is what let headings paint in Arial Narrow and
then jump to Oswald.
Both are VARIABLE fonts — one file covers the whole weight range, which is
why there is a range in font-weight rather than a single number. Don't
replace these with static per-weight files; you'd ship more bytes.
Only the `latin` subset is stored. Every character the site actually
renders lives in it. The arrows and stars sit outside latin and already
fell back to a system face under Google Fonts, so nothing has changed.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Oswald';
src: url('assets/fonts/Oswald-Variable.woff2') format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Epilogue';
src: url('assets/fonts/Epilogue-Variable.woff2') format('woff2');
font-weight: 300 700;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Beautifully Delicious';
src: url('assets/fonts/BDScript-Regular.woff2') format('woff2'),
url('assets/fonts/BDScript-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
/* block, not swap: swap paints Brush Script MT first and then jumps to this
face, which is the flicker. block holds that one word invisible for up to
~3s instead, and since menu.html preloads the file it is normally in hand
before first paint, so nothing is held at all. Only this word is affected
— every other element paints immediately. */
font-display: block;
}
/* ==========================================================================
SILK ROAD CHAI & COFFEE — styles.css
MOBILE-FIRST. Rules outside any @media block ARE the phone layout. Larger
screens only ever add to it, never undo it.
┌── BREAKPOINTS — there are only three. Please don't invent a fourth. ────┐
│ │
│ (none) 0–599px Phone. Single column, everything full width. │
│ 600px 600–899 Large phone landscape / tablet portrait. │
│ Two-column grids appear. Still hamburger nav. │
│ 900px 900–1199 Tablet landscape / laptop. Desktop nav appears, │
│ header grows, side-by-side layouts. │
│ 1200px 1200+ Wide desktop. Three-column package grid. │
│ │
│ 900px is the important one: it's where the hamburger becomes the │
│ full nav, so every mobile-only behaviour keys off it. │
└────────────────────────────────────────────────────────────────────────┘
CONTENTS
1. Design tokens 6. Packages
2. Reset & base 7. Community / Events
3. Layout helpers 8. Book / About / Menu
4. Header & navigation 9. Footer & utilities
5. Hero
========================================================================== */
/* ==========================================================================
1. DESIGN TOKENS
>> CHANGE BRAND COLOURS HERE and the whole site re-themes.
========================================================================== */
:root {
/* ---- THE BRAND PALETTE — these five are the whole system --------------
#FFFFFF white page background
#EEEDEB warm grey quiet bands, hairlines
#FFF9E9 cream warm accent, button fill
#4D5347 sage green dark bands, primary buttons
#000000 black all body text
--------------------------------------------------------------------- */
--white: #FFFFFF;
--grey: #EEEDEB;
--cream: #FFF9E9;
--green: #4D5347;
--black: #000000;
/* Same sage as --green, as raw channels, so it can be used at partial
opacity: rgba(var(--green-rgb), .9). Keep the two in sync. */
--green-rgb: 77, 83, 71;
/* Header glass. A near-neutral charcoal — deliberately NOT the brand green,
which read as a solid bar rather than as glass. The two-point green cast
stops it going cold against the warm photography. */
--header-glass-rgb: 18, 20, 17;
/* ---- Working aliases (what the rest of the file actually calls) ------- */
--bg: var(--white);
--ink: var(--black); /* body text */
--bone: var(--grey); /* the About band */
/* ---- Derived shades — NOT new brand colours -------------------------
Every value below is one of the five above, either darkened or set at
partial opacity. Nothing here introduces a sixth colour.
--------------------------------------------------------------------- */
--green-dark: #3A3F36; /* sage at 76% — button/link hover */
--green-soft: var(--grey); /* quiet tinted background */
--cream-soft: #FFFCF4; /* cream lightened toward white */
--muted: rgba(0, 0, 0, .62); /* black at 62% — secondary text */
--line: rgba(0, 0, 0, .13); /* black at 13% — hairline borders */
/* ---- Typography — matches the Squarespace theme ----------------------
Headings Oswald
Body/misc Epilogue
Base size 16px
Both are open-source (OFL), so unlike an Adobe Fonts face they may be
self-hosted. See the README if you want to drop the Google request.
--------------------------------------------------------------------- */
/* Arial Narrow sits first in the fallback because it's condensed like
Oswald. Before the webfont arrives, headlines then occupy roughly the
right width instead of ballooning and reflowing when it loads. */
--font-display: 'Oswald', 'Arial Narrow', 'Helvetica Neue Condensed', 'Helvetica Neue', sans-serif;
--font-body: 'Epilogue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
/* Header height follows the logo — it grew when the logo doubled so the
wordmark keeps breathing room rather than touching the edges. Everything
that needs to clear the fixed header (anchor scrolling, hero top padding,
the menu jump bar) reads this variable, so changing it here is enough. */
--header-h: 70px;
--radius: 10px;
--ease: cubic-bezier(.2, .8, .2, 1);
--shell: 1240px; /* max content width */
/* Fluid page gutter: 20px on a phone, up to 48px on a desktop */
--gutter: clamp(20px, 5vw, 48px);
}
@media (min-width: 900px) { :root { --header-h: 96px; } }
/* ==========================================================================
2. RESET & BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* Stops anchor links from tucking their target under the fixed header */
scroll-padding-top: var(--header-h);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-body);
/* 16px to match the Squarespace theme's base size. Epilogue has a large
x-height, so it reads slightly bigger than its point size suggests. */
font-size: 16px;
line-height: 1.62;
color: var(--ink);
background: var(--bg);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* Locked while the mobile menu is open */
body.nav-open { overflow: hidden; }
img {
max-width: 100%;
height: auto;
display: block;
}
a { color: inherit; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.08;
letter-spacing: .005em;
margin: 0 0 .5em;
text-wrap: balance;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
::selection { background: var(--green); color: var(--cream); }
/* Visible focus ring for keyboard users only */
:focus-visible {
outline: 3px solid var(--cream);
outline-offset: 3px;
border-radius: 4px;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
background: var(--cream);
color: var(--ink);
padding: 12px 20px;
font-weight: 600;
text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }
/* ==========================================================================
3. LAYOUT HELPERS
========================================================================== */
.container {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Vertical rhythm. The vw term makes this breathe with the screen; the 48px
floor keeps phone sections from feeling cramped without wasting a third of
the viewport on empty space. */
.section { padding-block: clamp(48px, 9vw, 110px); }
.section--dark {
background: var(--green);
color: #fff;
}
/* For pages that open on a section instead of a photo hero (Book, Menu):
adds enough top padding to clear the fixed header. */
.section--page-top { padding-top: calc(var(--header-h) + clamp(36px, 7vw, 76px)); }
/* Fluid type scale — no media queries needed, it just breathes with the viewport */
.h2 {
font-size: clamp(1.9rem, 5.2vw, 3.1rem);
color: var(--ink);
}
.h2--light { color: #fff; }
.lead {
font-size: clamp(1rem, 2.4vw, 1.08rem);
color: var(--ink);
max-width: 56ch;
}
.lead--light { color: rgba(255,255,255,.9); }
/* Hand-drawn style underline behind key words */
.u-mark {
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 100% 3px;
background-position: 0 92%;
padding-bottom: 2px;
}
.u-mark--cream { color: var(--cream); }
.link-underline {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1.5px;
transition: opacity .25s var(--ease);
}
.link-underline:hover { opacity: .7; }
/* --------------------------------------------------------------------------
BUTTONS — shared transition system.
Every button lifts 2px, deepens its shadow, and shifts colour on hover.
-------------------------------------------------------------------------- */
.btn {
--btn-bg: var(--cream);
--btn-fg: var(--ink);
--btn-bg-alt: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
min-height: 48px; /* comfortable thumb target */
padding: 13px 30px;
background: var(--btn-bg);
color: var(--btn-fg);
font-family: var(--font-body);
font-size: .95rem;
font-weight: 500;
letter-spacing: .01em;
text-decoration: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,.10);
transition:
background-color .3s var(--ease),
transform .3s var(--ease),
box-shadow .3s var(--ease),
color .3s var(--ease);
}
.btn:hover {
background: var(--btn-bg-alt);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.btn--cream { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-bg-alt: #fff; }
.btn--green { --btn-bg: var(--green); --btn-fg: #fff; --btn-bg-alt: var(--green-dark); }
.btn--sm { min-height: 42px; padding: 10px 20px; font-size: .88rem; }
/* SECONDARY BUTTON ON A LIGHT BACKGROUND.
A cream button on the cream closing band was cream-on-cream — a measured
contrast of 1.00:1, i.e. completely invisible apart from its shadow. This
outlined version reads at 7.6:1 and still sits back from the primary. */
.btn--outline {
--btn-bg: transparent;
--btn-fg: var(--green);
--btn-bg-alt: var(--green);
border-color: var(--green);
box-shadow: none;
}
.btn--outline:hover,
.btn--outline:focus-visible { color: #fff; }
/* SECONDARY BUTTON ON A DARK BACKGROUND (the sticky bar). */
.btn--ghost {
--btn-bg: transparent;
--btn-fg: #fff;
--btn-bg-alt: rgba(255, 255, 255, .16);
border-color: rgba(255, 255, 255, .6);
box-shadow: none;
}
/* --------------------------------------------------------------------------
SCROLL-REVEAL
Elements start slightly down + transparent, then settle when they enter the
viewport. Only opacity and transform animate, so this is GPU-composited and
causes zero layout shift.
-------------------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translate3d(0, 22px, 0);
transition: opacity .7s var(--ease), transform .7s var(--ease);
transition-delay: calc(var(--d, 0) * 110ms);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* Once settled, release the compositor hint */
.reveal.is-done { will-change: auto; }
/* If JS is unavailable, never hide content */
.no-js .reveal { opacity: 1; transform: none; }
/* ==========================================================================
4. HEADER & NAVIGATION
========================================================================== */
/* ┌── HEADER SCRIM ───────────────────────────────────────────────────────┐
│ At the very top of a page the header is fully transparent, sitting │
│ over the hero photograph. The moment you scroll it fades in a green │
│ scrim that is dense at the top and tapers to nothing at the bottom, │
│ so there's no hard edge cutting across the page. │
│ │
│ Built from two stacked pseudo-elements, both extending 18px BELOW │
│ the header's layout box so the fade has somewhere to finish. Because │
│ they're absolutely positioned inside a fixed parent, that overhang │
│ is purely visual — it changes no layout and no anchor offsets. │
│ │
│ ::before a tapered blur of whatever is behind │
│ ::after the tapered green gradient itself │
│ │
│ Density is driven by --header-tint, which app.js ramps 0 -> 1 over │
│ the first 180px of scroll, so the glass DARKENS as you travel down │
│ rather than snapping on at a threshold. │
│ │
│ CONTRAST FLOOR. Nav text is pure #fff. The gradient holds .66-.72 │
│ through the top 50%, where the logo and links sit. Composited over │
│ pure white — the worst backdrop there is — that lands at 5.8:1, │
│ clear of the 4.5:1 minimum. Soften those first two stops and you │
│ drop below it: at .50 the same test gives 3.6:1 and fails. │
│ │
│ The ramp only matters where it is still weak, i.e. the first ~180px │
│ of each page. That strip is a dark hero photo, the green --dark │
│ section or the terracotta panel on every one of the six pages, so │
│ white text is safe there even at tint 0. If a page ever opens on a │
│ light background, revisit this. │
└───────────────────────────────────────────────────────────────────────┘ */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
height: var(--header-h);
background: transparent;
/* 0 at the top of the page, 1 once fully darkened. app.js writes this on
scroll; with JS off it stays 0 and the header is transparent, which is
exactly how it behaved before. */
--header-tint: 0;
}
.site-header::before,
.site-header::after {
content: "";
position: absolute;
inset: 0 0 -18px 0; /* the 18px is the visual overhang */
pointer-events: none;
opacity: var(--header-tint);
/* No transition: the value is rewritten per animation frame, and a
transition would lag a frame behind the scroll and feel rubbery. */
}
/* Blur layer. Masked with the same taper as the gradient — without the mask
the blur would stop dead at the element's edge and draw a visible seam. */
.site-header::before {
-webkit-backdrop-filter: blur(18px) saturate(180%);
backdrop-filter: blur(18px) saturate(180%);
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.35) 78%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.35) 78%, transparent 100%);
}
/* The tint itself. Same taper as before so the bottom edge still dissolves
instead of cutting a line across the page. */
.site-header::after {
background: linear-gradient(
180deg,
rgba(var(--header-glass-rgb), .72) 0%,
rgba(var(--header-glass-rgb), .66) 50%,
rgba(var(--header-glass-rgb), .42) 74%,
rgba(var(--header-glass-rgb), .16) 90%,
rgba(var(--header-glass-rgb), 0) 100%
);
}
/* Without backdrop-filter there is no glass to see through, so the tint has
to carry the contrast on its own. Firefox before 103 and older Safari. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header::after {
background: linear-gradient(
180deg,
rgba(var(--header-glass-rgb), .94) 0%,
rgba(var(--header-glass-rgb), .90) 50%,
rgba(var(--header-glass-rgb), .60) 74%,
rgba(var(--header-glass-rgb), .24) 90%,
rgba(var(--header-glass-rgb), 0) 100%
);
}
}
.header-inner {
position: relative; /* keeps logo and nav above both scrim layers */
z-index: 1;
height: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.brand { display: block; flex: none; }
/* LOGO SIZING — roughly double the previous on-screen size.
Two thirds of that came for free: the source file had a big transparent
margin baked in, so the wordmark only occupied 58% of its own canvas. At a
40px box the visible mark was ~23px. The asset is now cropped to the artwork
(1059×500 instead of 1257×837), so the box height IS the mark height.
The remaining difference comes from the modest bump below.
⚠️ If you ever re-export the logo, keep it tightly cropped and update the
width/height attributes on the in all five HTML files — they set the
reserved aspect ratio, and stale numbers distort it. */
.brand-logo {
width: auto;
height: 48px;
/* Lifts the white wordmark off busy hero photography */
filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .45));
transition: opacity .3s var(--ease);
}
.brand:hover .brand-logo { opacity: .8; }
@media (min-width: 900px) { .brand-logo { height: 70px; } }
/* ---------- Desktop nav ---------- */
.nav-desktop { display: none; }
@media (min-width: 900px) {
.nav-desktop {
display: flex;
align-items: center;
gap: clamp(16px, 2vw, 30px);
}
.nav-link {
position: relative;
color: #fff;
font-size: 1rem;
text-decoration: none;
padding-block: 6px;
transition: opacity .25s var(--ease);
}
/* Underline grows out from the centre on hover */
.nav-link::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 1.5px;
background: currentColor;
transform: scaleX(0);
transform-origin: center;
transition: transform .32s var(--ease);
}
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link:hover { opacity: .85; }
}
/* The page you are currently on, in both navs */
.nav-mobile-link.is-active { color: var(--cream); }
/* ---------- Animated hamburger ---------- */
.hamburger {
display: grid;
place-items: center;
width: 46px; height: 46px;
margin-right: -10px;
background: none;
border: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
@media (min-width: 900px) { .hamburger { display: none; } }
.hamburger-box {
position: relative;
display: block;
width: 26px; height: 18px;
}
.hamburger-bar {
position: absolute;
left: 0;
width: 100%; height: 2px;
background: #fff;
border-radius: 2px;
transition: transform .38s var(--ease), opacity .2s var(--ease);
}
.hamburger-bar:nth-child(1) { top: 0; }
.hamburger-bar:nth-child(2) { top: 8px; }
.hamburger-bar:nth-child(3) { top: 16px; }
/* Bars converge and cross into an X */
.hamburger.is-open .hamburger-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.is-open .hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.hamburger.is-open .hamburger-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* ---------- Full-screen mobile menu ---------- */
.nav-mobile {
position: fixed;
inset: 0;
z-index: 95;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--header-h) var(--gutter) 40px;
background: var(--green);
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity .38s var(--ease), transform .38s var(--ease), visibility .38s;
}
.nav-mobile[hidden] { display: flex; } /* we animate it, so keep it in flow */
.nav-mobile.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (min-width: 900px) { .nav-mobile { display: none !important; } }
.nav-mobile-list {
list-style: none;
margin: 0 0 auto;
padding: 0;
}
.nav-mobile-list li {
opacity: 0;
transform: translateY(16px);
transition: opacity .45s var(--ease), transform .45s var(--ease);
/* Each link starts 60ms after the one above it */
transition-delay: calc(var(--i) * 60ms + 90ms);
}
.nav-mobile.is-open .nav-mobile-list li { opacity: 1; transform: translateY(0); }
.nav-mobile-link {
display: block;
padding: 14px 0;
color: #fff;
font-family: var(--font-display);
font-size: clamp(2rem, 9vw, 2.9rem);
font-weight: 500;
text-decoration: none;
transition: color .25s var(--ease), transform .25s var(--ease);
}
.nav-mobile-link:hover,
.nav-mobile-link:focus { color: var(--cream); transform: translateX(6px); }
.nav-mobile-foot {
color: rgba(255,255,255,.72);
font-size: .92rem;
opacity: 0;
transform: translateY(16px);
transition: opacity .45s var(--ease), transform .45s var(--ease);
transition-delay: calc(var(--i) * 60ms + 90ms);
}
.nav-mobile.is-open .nav-mobile-foot { opacity: 1; transform: translateY(0); }
.nav-mobile-foot a { color: var(--cream); }
.nav-mobile-foot p { margin: 6px 0 0; font-family: var(--font-display); letter-spacing: .04em; }
/* ==========================================================================
5. HERO
.hero-media is absolutely positioned and 120% tall so there is headroom for
the parallax translate — the image never runs out of pixels at either end.
========================================================================== */
/* PHONE SIZING NOTE
Heroes used to be 74–86svh, which on a phone meant the entire first screen
was a photo and a headline — you had to scroll before seeing a single word
about what the business does. They're now sized to end just below the
button, so the next section peeks above the fold and invites a scroll.
Full-height drama is reserved for 900px and up, where there's room for it. */
.hero {
position: relative;
display: flex;
align-items: center;
isolation: isolate;
overflow: hidden;
min-height: 62svh; /* svh dodges the iOS URL-bar resize jump */
padding-block: calc(var(--header-h) + 28px) 44px;
color: #fff;
}
@supports not (min-height: 62svh) { .hero { min-height: 62vh; } }
.hero--home { min-height: 72svh; }
@supports not (min-height: 72svh) { .hero--home { min-height: 72vh; } }
.hero--band { min-height: 42svh; }
@supports not (min-height: 42svh) { .hero--band { min-height: 42vh; } }
/* Roomier once there's screen to spare */
@media (min-width: 900px) {
.hero { min-height: 74svh; padding-block: calc(var(--header-h) + 40px) 60px; }
.hero--home { min-height: 86svh; }
.hero--band { min-height: 56svh; }
@supports not (min-height: 74svh) {
.hero { min-height: 74vh; }
.hero--home { min-height: 86vh; }
.hero--band { min-height: 56vh; }
}
}
.hero-media {
position: absolute;
inset: -10% 0; /* the parallax headroom */
z-index: -2;
will-change: transform;
}
.hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Dark wash so white text always clears WCAG contrast, whatever the photo */
.hero-scrim {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.66) 100%);
}
.hero-scrim--left {
background:
linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.50) 55%, rgba(0,0,0,.28) 100%);
}
.hero-content { position: relative; text-align: center; }
.hero-content--left { text-align: left; }
/* The vw term is what does the work on phones; the rem floor/ceiling only
catch the extremes. Tuned so the homepage headline lands on two lines at
390px rather than three, which is what pushed the button off-screen. */
.hero-title {
font-size: clamp(1.85rem, 7.6vw, 4.2rem);
color: #fff;
margin-bottom: .38em;
text-shadow: 0 2px 20px rgba(0,0,0,.30);
/* Prevents a lone orphan word on the last line */
text-wrap: balance;
}
.hero-title--band { font-size: clamp(1.6rem, 6.4vw, 3.6rem); }
.hero-sub {
max-width: 62ch;
margin-inline: auto;
font-size: clamp(1rem, 2.9vw, 1.28rem);
color: rgba(255,255,255,.94);
text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 30px;
}
.hero-actions--left { justify-content: flex-start; margin-top: 24px; }
.about-intro {
max-width: 30ch;
font-size: clamp(1.05rem, 3.4vw, 1.42rem);
line-height: 1.5;
color: #fff;
text-shadow: 0 1px 14px rgba(0,0,0,.4);
}
/* Scroll cue */
.scroll-cue {
position: absolute;
left: 50%;
bottom: 22px;
translate: -50% 0;
width: 26px; height: 42px;
border: 2px solid rgba(255,255,255,.6);
border-radius: 14px;
display: none;
transition: border-color .3s var(--ease);
}
.scroll-cue span {
position: absolute;
left: 50%; top: 8px;
translate: -50% 0;
width: 3px; height: 7px;
background: #fff;
border-radius: 2px;
animation: cue 1.9s var(--ease) infinite;
}
.scroll-cue:hover { border-color: #fff; }
@keyframes cue {
0%, 100% { transform: translateY(0); opacity: 1; }
60% { transform: translateY(14px); opacity: 0; }
}
@media (min-width: 900px) { .scroll-cue { display: block; } }
/* ==========================================================================
6. MOBILE COFFEE CATERING
========================================================================== */
/* ┌── WHY THESE PHOTOS ARE CROPPED RATHER THAN SCALED ────────────────────┐
│ │
│ Both source images are portrait (2:3 and 3:4). Previously they were │
│ set to width:100% with height:auto, so their height was whatever │
│ the aspect ratio produced. On a 600px screen that made the first │
│ photo 460×690 — the two images accounted for 72–79% of the entire │
│ section's height, for three sentences of copy. │
│ │
│ Now the FIGURE owns the height and the image fills it with │
│ object-fit: cover. Height is a clamp() tied to viewport width, so │
│ it can never run away, and any replacement photo — portrait, │
│ landscape, square — drops in without moving the layout. │
└──────────────────────────────────────────────────────────────────────┘ */
.catering-grid {
display: grid;
gap: clamp(14px, 2.6vw, 24px) clamp(12px, 2.4vw, 24px);
/* Phones and tablets: copy first, then the two photos as a pair.
Leading with a 500px portrait meant scrolling past a photograph before
reading a single word about what the business does. */
grid-template-columns: 1fr 1fr;
grid-template-areas:
"copy copy"
"a b";
}
.catering-copy { grid-area: copy; margin-bottom: clamp(4px, 1.5vw, 14px); }
.catering-photo--a { grid-area: a; }
.catering-photo--b { grid-area: b; }
.catering-photo {
position: relative; /* see the note on the below */
margin: 0;
/* The figure owns the height — see the note above. */
height: clamp(190px, 30vw, 280px);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 14px 38px rgba(0, 0, 0, .14);
}
/* The image is positioned absolutely rather than sized with height: 100%.
That percentage only resolves against a parent with a DEFINITE height, and
the tall photo at 900px+ gets its height from stretching across two grid
rows — which is not definite at the time the image is laid out. The
percentage silently fell back to the image's intrinsic ratio and rendered
544×816 instead of the intended crop. Absolute fill has no such dependency,
and it also keeps the image out of grid row sizing, so there's no
circularity between the row height and the photo height. */
.catering-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Crop anchors. Both sources are portrait, so a wide box has to discard the
top and bottom — these keep the subject in frame.
>> If you swap a photo and the crop looks wrong, adjust here. */
.catering-photo--a img { object-position: center 30%; } /* keeps the barista and cup */
.catering-photo--b img { object-position: center 52%; } /* keeps the pink menu card in frame */
/* ---------- 900px and up: the original editorial layout ----------
Tall photo down the left, copy top-right, second photo beneath it. Source
order is unchanged; only the grid areas move. */
@media (min-width: 900px) {
.catering-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"a copy"
"a b";
gap: clamp(20px, 2.4vw, 32px) clamp(28px, 4vw, 56px);
align-items: stretch;
}
.catering-copy { padding-top: 6px; margin-bottom: 0; }
/* Spans both rows, so it stretches to the height of copy + photo B.
min-height stops it collapsing when the copy is short. */
.catering-photo--a { height: auto; min-height: clamp(340px, 32vw, 480px); }
.catering-photo--b { height: clamp(200px, 18vw, 280px); }
}
/* ==========================================================================
7. CATERING PACKAGES
========================================================================== */
.packages .h2 { margin-bottom: clamp(30px, 5vw, 54px); }
/* ┌── PACKAGES LAYOUT — one switch point, at 720px ───────────────────────┐
│ │
│ ≤ 719px Stacked. Photo beside the title, hairline between cards. │
│ ≥ 720px All three side by side, always. Never two. │
│ │
│ 720px rather than the site's usual 600px is deliberate. These are │
│ text-heavy cards: at a 600px viewport, three columns work out to │
│ about 170px each, which is roughly 15 characters a line — copy │
│ breaks into confetti. 720px is the narrowest width where three │
│ columns still hold a readable line. This is a component-level │
│ breakpoint, not a fourth site-wide tier. │
│ │
│ Everything between 720px and 1440px scales fluidly (see the clamp() │
│ values below) so there's no jump — the circles and type simply grow │
│ with the column. │
└──────────────────────────────────────────────────────────────────────┘ */
.pkg-grid {
display: grid;
gap: clamp(38px, 5vw, 44px);
}
.pkg { display: flex; flex-direction: column; }
/* ---------- ≤719px: stacked, photo beside title ---------- */
/* Stacked in one column, three packages read as one continuous wall of text —
there's no cue for where "The Espresso Bar" ends and "On Tap" begins. Each
gets a hairline rule, and the photo sits beside the title rather than above
it, saving roughly 150px of scrolling per card. */
@media (max-width: 719px) {
.pkg-grid { gap: 0; }
.pkg {
display: grid;
grid-template-columns: 104px 1fr;
grid-template-areas:
"media title"
"body body";
column-gap: 16px;
align-items: center;
padding-block: 24px;
border-top: 1px solid rgba(255,255,255,.18);
}
.pkg:first-child { border-top: 0; padding-top: 4px; }
.pkg-media { grid-area: media; width: 104px; margin-bottom: 0; }
.pkg-title { grid-area: title; margin-bottom: 0; }
.pkg-body {
grid-area: body;
margin-top: 12px;
/* Full width, this runs to ~87 characters a line on a 700px screen —
long enough that the eye loses its place returning to the next line. */
max-width: 62ch;
}
}
/* ---------- ≥720px: three across, fluid ---------- */
@media (min-width: 720px) {
.pkg-grid {
grid-template-columns: repeat(3, 1fr);
column-gap: clamp(20px, 2.6vw, 44px);
row-gap: 0;
}
}
/* Align the three rows ACROSS the columns.
Without this, "The Espresso Bar" (one line) and "The Silk Road Mobile
Trailer" (two lines) push their body copy to different heights, and the
row of circles no longer reads as a row. Subgrid makes all three cards
share the grid's rows, so photos line up with photos and body copy starts
on the same baseline in every column.
Wrapped in @supports because browsers without subgrid fall back to the
flex column above, which still stacks correctly — just less tidily. */
@supports (grid-template-rows: subgrid) {
@media (min-width: 720px) {
.pkg-grid {
grid-template-rows: auto auto auto; /* photo | title | body */
row-gap: clamp(12px, 1.5vw, 20px);
}
.pkg {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}
.pkg-media, .pkg-title { margin-bottom: 0; }
}
}
/* Perfect circle crop, matching the original design.
The vw term is what scales it between 720px and 1440px: ~125px on a tablet,
~215px on a wide desktop, with no step change in between. */
.pkg-media {
width: min(clamp(118px, 15vw, 220px), 62%);
aspect-ratio: 1;
margin-bottom: 22px;
border-radius: 50%;
overflow: hidden;
background: rgba(255,255,255,.08);
}
.pkg-media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .6s var(--ease);
}
.pkg:hover .pkg-media img { transform: scale(1.07); }
.pkg-title {
font-size: clamp(1.3rem, 3.4vw, 1.62rem);
color: #fff;
margin-bottom: .6em;
}
.pkg-body {
font-size: .96rem;
line-height: 1.66;
color: rgba(255,255,255,.88);
}
.pkg-body p { margin-bottom: .95em; }
/* Once the cards are three across, both title and body have to live inside a
third of the page rather than the whole of it, so they scale down with the
column. Measured line lengths land at roughly 27–34 characters from tablet
to desktop — tight, which is the nature of three columns, but comfortably
above the ~25 mark where prose starts to feel choppy. */
@media (min-width: 720px) {
.pkg-title { font-size: clamp(1.08rem, 1.9vw, 1.62rem); }
/* .88rem floor, not .85rem — 14px is about as small as this body copy
should get on a tablet, and it still leaves ~30 characters a line. */
.pkg-body { font-size: clamp(.88rem, 1.15vw, .96rem); line-height: 1.62; }
}
.pkg-body strong { color: #fff; }
.pkg-cta {
display: flex;
justify-content: center;
margin-top: clamp(38px, 5vw, 56px);
}
/* ==========================================================================
8. COMMUNITY STRIP
========================================================================== */
.community-grid {
display: grid;
gap: clamp(28px, 5vw, 60px);
align-items: center;
}
@media (min-width: 900px) {
.community-grid { grid-template-columns: minmax(0, 380px) 1fr; }
}
/* The arched crop from the original site */
.community-photo {
margin: 0;
max-width: 340px;
}
.community-photo img {
width: 100%;
border-radius: 999px 999px 8px 8px;
box-shadow: 0 18px 46px rgba(0,0,0,.16);
}
.community-copy .btn { margin-top: 22px; }
/* ==========================================================================
9. UPCOMING EVENTS
========================================================================== */
.events-body {
padding-top: clamp(28px, 4vw, 48px);
padding-bottom: clamp(48px, 7vw, 84px);
}
/* --------------------------------------------------------------------------
ICONS
One hidden