/* ==========================================================================
JUSTIN MATERUNI — "Justin the Coffee Man"
style.css · Warm Chagga Highlands Design System
--------------------------------------------------------------------------
0. Fonts & Reset
1. Design Tokens (caramel / espresso colour system)
2. Organic Background (gradients, coffee stains, paper grain)
3. Typography
4. Layout & Spacing Scale
5. The 3-Coffee-Bean Visual Accent ★ signature element
6. Buttons (WhatsApp-first)
7. Navigation
8. Hero
9. Sections & Section Headers
10. Phase Rows ★ locked image-to-text alignment
11. Cards, Grids, Gallery
12. Shop
13. Contact / WhatsApp Booking Card
14. Quotes, Bands, Footer
15. Motion
16. Responsive
========================================================================== */
/* ==========================================================================
0. FONTS & RESET
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 96px;
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
button,
input,
select,
textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
/* ==========================================================================
1. DESIGN TOKENS
--------------------------------------------------------------------------
Nothing here is pure white and nothing here is pure black. Every surface
carries a little roasted warmth so the page feels like a room with a fire
in it, not a laboratory.
========================================================================== */
:root {
/* ======================================================================
THE EXPENSIVE PALETTE
Nothing here is flat white and nothing is corporate black. Every
surface carries roasted warmth so the page reads like a printed
magazine spread rather than a screen.
====================================================================== */
/* --- Antique ivory: the paper the magazine is printed on --- */
--cream-00: #FFFDFA;
--cream-01: #FBF9F4; /* Warm Antique Ivory, the base page */
--cream-02: #F6F1E8;
--cream-03: #EFE7D9;
--sand: #E4D8C6;
--sand-deep: #D4C5B9; /* Luxury Muted Sand */
/* --- Velvety caramel: the appetising mid-tones --- */
--caramel-100: #F0DCC2;
--caramel-200: #E3C4A2;
--caramel-300: #D8A878; /* Rich Velvety Caramel */
--caramel-400: #C48C58; /* primary brand accent */
--caramel-500: #A96F3C;
--caramel-600: #8A5629;
/* --- Espresso charcoal: the deep velvet blocks --- */
--espresso-100: #5C3A24;
--espresso-200: #43281A;
--espresso-300: #2E1B11;
--espresso-400: #1E120C; /* Deep Espresso Charcoal */
--espresso-500: #150C07;
/* --- Sage: the mountain, used sparingly as a cool counterweight --- */
--sage: #556B2F;
--sage-soft: #7C8F58;
--sage-mist: #A8B58C;
/* --- Gold: reserved for hairlines, rules and small marks --- */
--gold: #C9A227;
--gold-soft: #D4C5B9;
/* --- The three beans, in their true lifecycle colours --- */
--bean-cherry: #C62D2D; /* raw red shell cherry */
--bean-green: #8FB45E; /* green unroasted bean */
--bean-roast: #7A4A22; /* roasted brown bean */
/* --- Support --- */
--leaf: #556B2F;
--leaf-soft: #7C8F58;
--whatsapp: #25D366;
--whatsapp-dk: #0F7A3D;
/* --- Text --- */
--ink: #201309;
--ink-body: #4A392C;
--ink-muted: #7C6B5B;
--ink-invert: #FBF9F4;
--ink-invert-b:#DED0BD;
/* --- Hairlines. On an editorial page the rule IS the decoration. --- */
--line: rgba(122, 84, 44, .16);
--line-strong: rgba(122, 84, 44, .32);
--line-gold: rgba(201, 162, 39, .38);
--line-dark: rgba(228, 216, 198, .18);
--shadow-sm: 0 2px 10px rgba(60, 38, 20, .06);
--shadow-md: 0 14px 34px -16px rgba(60, 38, 20, .28);
--shadow-lg: 0 30px 70px -26px rgba(45, 27, 15, .40);
--shadow-xl: 0 50px 110px -40px rgba(30, 18, 12, .52);
/* --- Radii. Editorial design uses restraint here. --- */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
--r-pill: 999px;
/* --- Spacing scale. Every gap on this site comes from this list. --- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 44px;
--sp-8: 60px;
--sp-9: 84px;
--sp-10: 112px;
/* --- The spacing guardrail. One variable drives every section. --- */
--section-y: clamp(4.5rem, 7.4vw, 8.5rem);
--gutter: clamp(22px, 5vw, 56px);
--maxw: 1240px;
--maxw-wide: 1440px;
--maxw-text: 62ch;
/* --- Type --- */
--font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
--font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--t-xs: .78rem;
--t-sm: .90rem;
--t-base: 1.0rem;
--t-lg: clamp(1.10rem, 1.00rem + .44vw, 1.32rem);
--t-h4: clamp(1.28rem, 1.12rem + .60vw, 1.62rem);
--t-h3: clamp(1.70rem, 1.36rem + 1.40vw, 2.55rem);
--t-h2: clamp(2.40rem, 1.62rem + 3.20vw, 4.40rem);
--t-h1: clamp(3.00rem, 1.70rem + 5.60vw, 7.00rem);
--ease: cubic-bezier(.22, .61, .36, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
}
/* ==========================================================================
2. ORGANIC BACKGROUND
--------------------------------------------------------------------------
Three layered radial gradients + a paper grain. The result reads as warm
light falling across a coffee-stained page rather than a flat colour.
========================================================================== */
body {
font-family: var(--font-body);
font-size: var(--t-base);
line-height: 1.8;
color: var(--ink-body);
letter-spacing: .002em;
background-color: var(--cream-02);
background-image:
radial-gradient(1150px 760px at 10% -10%, rgba(237, 193, 137, .55), transparent 62%),
radial-gradient(980px 700px at 96% 2%, rgba(224, 164, 95, .38), transparent 64%),
radial-gradient(1200px 900px at 48% 112%, rgba(122, 84, 44, .20), transparent 66%),
linear-gradient(178deg, var(--cream-01) 0%, var(--cream-02) 46%, var(--cream-03) 100%);
background-attachment: fixed;
background-repeat: no-repeat;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Paper grain — sits above the gradients, below all content. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'200'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.85'%20numOctaves%3D'4'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'200'%20height%3D'200'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E");
background-size: 200px 200px;
opacity: .055;
mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 1; }
/* --- Coffee-stain ring accents ------------------------------------------
Drop inside any
.section to get a faint ring, like a cup was set down on the page. */
.stain {
position: absolute;
z-index: 0;
pointer-events: none;
border-radius: 50%;
background:
radial-gradient(circle,
transparent 0 55%,
rgba(140, 88, 40, .10) 56% 58.5%,
rgba(140, 88, 40, .17) 59% 62%,
rgba(140, 88, 40, .07) 62.5% 65%,
transparent 66%);
}
.stain--a { width: 320px; height: 320px; top: -70px; left: -90px; }
.stain--b { width: 440px; height: 440px; bottom: -140px; right: -120px; transform: rotate(18deg); }
.stain--c { width: 240px; height: 240px; top: 42%; right: 6%; opacity: .7; }
.section--dark .stain {
background:
radial-gradient(circle,
transparent 0 55%,
rgba(237, 193, 137, .10) 56% 58.5%,
rgba(237, 193, 137, .16) 59% 62%,
rgba(237, 193, 137, .06) 62.5% 65%,
transparent 66%);
}
/* ==========================================================================
3. TYPOGRAPHY
========================================================================== */
/* Cormorant Garamond is a high contrast display serif. It is drawn light,
so it wants SIZE and AIR rather than weight. Headings are set at 300 to 500,
never bold, with positive tracking on the large sizes. That combination is
what separates an editorial masthead from a corporate heading. */
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--ink);
font-weight: 400;
line-height: 1.06;
letter-spacing: 0;
text-wrap: balance;
}
h1 {
font-size: var(--t-h1);
font-weight: 300;
line-height: .94;
letter-spacing: -.012em;
}
h2 {
font-size: var(--t-h2);
font-weight: 300;
line-height: 1.0;
letter-spacing: -.008em;
}
h3 { font-size: var(--t-h3); font-weight: 400; line-height: 1.12; }
h4 { font-size: var(--t-h4); font-weight: 500; line-height: 1.24; }
/* Italic is a deliberate device here, not decoration. Used on a single
phrase inside a headline it creates the high fashion cadence the brief
asked for. */
h1 em, h2 em, h3 em { font-style: italic; font-weight: 300; }
p { max-width: var(--maxw-text); line-height: 1.8; }
p + p { margin-top: var(--sp-5); }
.lead {
font-size: var(--t-lg);
line-height: 1.72;
color: var(--ink-body);
font-weight: 300;
}
.muted { color: var(--ink-muted); }
.tiny {
font-size: var(--t-xs);
letter-spacing: .04em;
color: var(--ink-muted);
}
strong, b { font-weight: 700; color: var(--ink); }
em { font-style: italic; }
/* Hand-written-feeling emphasis for Justin's own words */
.script {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: var(--caramel-600);
}
/* Highlighter behind a few key phrases — warm, like a marker swipe.
The band starts at 42% of the line box so it sits *through* the lower half
of the letters like a real highlighter, instead of reading as an underline. */
.mark {
background: linear-gradient(180deg,
transparent 0 42%,
rgba(216, 168, 120, .55) 42% 94%,
transparent 94%);
padding: 0 .14em;
border-radius: 3px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
/* ==========================================================================
4. LAYOUT & SPACING
========================================================================== */
.wrap {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
position: relative;
}
.wrap--narrow { max-width: 880px; }
.wrap--wide { max-width: 1360px; }
.section {
position: relative;
padding-block: var(--section-y);
overflow: hidden;
}
.section--tight { padding-block: clamp(44px, 5.5vw, 76px); }
/* Two light sections stacked on top of each other used to produce a double
dose of padding and an awkward hole in the page. Halve the second one's
top padding so the vertical rhythm stays even all the way down. */
.section:not(.section--dark) + .section:not(.section--dark) {
padding-top: calc(var(--section-y) * .48);
}
.section:not(.section--dark) + .section--tight { padding-top: clamp(28px, 3.2vw, 44px); }
/* Deep velvety espresso block */
.section--dark {
background-color: var(--espresso-400);
background-image:
radial-gradient(900px 560px at 12% 0%, rgba(201, 134, 58, .30), transparent 62%),
radial-gradient(800px 520px at 88% 96%, rgba(122, 74, 30, .38), transparent 64%),
linear-gradient(172deg, var(--espresso-300) 0%, var(--espresso-400) 52%, var(--espresso-500) 100%);
color: var(--ink-invert-b);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--ink-invert); }
.section--dark .muted { color: rgba(227, 207, 178, .74); }
.section--dark .script { color: var(--caramel-200); }
.section--dark .mark { background: linear-gradient(180deg, transparent 58%, rgba(201, 134, 58, .48) 58%); }
/* Warm raised sand block */
.section--sand {
background:
linear-gradient(180deg, rgba(236, 217, 184, .0) 0%, rgba(236, 217, 184, .85) 12%, rgba(236, 217, 184, .95) 88%, rgba(236, 217, 184, 0) 100%);
}
/* Soft top/bottom feathering so blocks melt into each other */
.section--feather::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 90px;
background: linear-gradient(180deg, transparent, var(--cream-03));
pointer-events: none;
}
/* ==========================================================================
5. THE 3-COFFEE-BEAN VISUAL ACCENT ★
--------------------------------------------------------------------------
Bean 1 — the raw red shell cherry (harvest)
Bean 2 — the green unroasted bean (the seed, cleaned and dried)
Bean 3 — the roasted brown bean (the cup in your hand)
Used three ways:
.beans → inline badge beside a kicker or heading
.bean-list → the bullet on every list on the site
.bean-medal → the big chronological step marker
========================================================================== */
/* --- 5a. Inline badge, built from real elements so it scales crisply --- */
.beans {
display: inline-flex;
align-items: center;
gap: 5px;
flex: none;
line-height: 0;
vertical-align: middle;
}
.bean {
position: relative;
display: block;
width: 12px;
height: 16px;
border-radius: 50% / 58% 58% 42% 42%;
transform: rotate(-20deg);
box-shadow:
inset -1px -1.5px 2.5px rgba(0, 0, 0, .30),
inset 1px 1.5px 2px rgba(255, 255, 255, .30),
0 1px 2px rgba(60, 34, 14, .28);
}
/* the crease down the middle of every bean */
.bean::after {
content: "";
position: absolute;
left: 50%;
top: 13%;
width: 1.6px;
height: 74%;
transform: translateX(-50%);
border-radius: 2px;
opacity: .7;
}
.bean--cherry {
background: radial-gradient(circle at 32% 26%, #ff8f78 0%, var(--bean-cherry) 52%, #7d1414 100%);
}
.bean--cherry::after { background: #7a1010; }
.bean--green {
background: radial-gradient(circle at 32% 26%, #d6e8ac 0%, var(--bean-green) 52%, #4f6d2a 100%);
}
.bean--green::after { background: #47632a; }
.bean--roast {
background: radial-gradient(circle at 32% 26%, #b5793f 0%, var(--bean-roast) 52%, #3d2009 100%);
}
.bean--roast::after { background: #351c08; }
/* Size variants */
.beans--sm .bean { width: 9px; height: 12px; }
.beans--lg .bean { width: 16px; height: 21px; }
.beans--xl .bean { width: 22px; height: 29px; }
/* A bean that has not been "reached" yet, used in the step medals */
.bean.is-dim { opacity: .26; filter: saturate(.35); }
/* --- 5b. The kicker: beans + a small caps label. Opens most sections. --- */
.kicker {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 16px 8px 12px;
margin-bottom: var(--sp-4);
border-radius: var(--r-pill);
background: rgba(255, 252, 245, .72);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(8px);
font-family: var(--font-body);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--caramel-600);
line-height: 1;
}
.section--dark .kicker,
.hero .kicker {
background: rgba(255, 244, 227, .10);
border-color: rgba(246, 220, 180, .24);
color: var(--caramel-200);
}
/* --- 5c. Bean bullets: every list item on the site gets three beans. --- */
.bean-list { display: grid; gap: var(--sp-4); }
.bean-list li {
position: relative;
padding-left: 62px;
min-height: 24px;
line-height: 1.62;
}
.bean-list li::before {
content: "";
position: absolute;
left: 0;
top: .30em;
width: 46px;
height: 19px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'54'%20height%3D'22'%20viewBox%3D'0%200%2054%2022'%3E%3Cdefs%3E%3CradialGradient%20id%3D'bA'%20cx%3D'32%25'%20cy%3D'26%25'%20r%3D'78%25'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23ff8f78'%2F%3E%3Cstop%20offset%3D'.55'%20stop-color%3D'%23c62d2d'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%237d1414'%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D'bB'%20cx%3D'32%25'%20cy%3D'26%25'%20r%3D'78%25'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23d6e8ac'%2F%3E%3Cstop%20offset%3D'.55'%20stop-color%3D'%238fb45e'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%234f6d2a'%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D'bC'%20cx%3D'32%25'%20cy%3D'26%25'%20r%3D'78%25'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23b5793f'%2F%3E%3Cstop%20offset%3D'.55'%20stop-color%3D'%237a4a22'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%233d2009'%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D'rotate(-20%209%2011)'%3E%3Cellipse%20cx%3D'9'%20cy%3D'11'%20rx%3D'6.3'%20ry%3D'8.5'%20fill%3D'url(%23bA)'%2F%3E%3Cpath%20d%3D'M9%203.5%20C%207.3%207%2C%207.3%2015%2C%209%2018.5'%20stroke%3D'%23821111'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20fill%3D'none'%20opacity%3D'.72'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'rotate(-20%2026%2011)'%3E%3Cellipse%20cx%3D'26'%20cy%3D'11'%20rx%3D'6.3'%20ry%3D'8.5'%20fill%3D'url(%23bB)'%2F%3E%3Cpath%20d%3D'M26%203.5%20C%2024.3%207%2C%2024.3%2015%2C%2026%2018.5'%20stroke%3D'%2347632a'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20fill%3D'none'%20opacity%3D'.72'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'rotate(-20%2043%2011)'%3E%3Cellipse%20cx%3D'43'%20cy%3D'11'%20rx%3D'6.3'%20ry%3D'8.5'%20fill%3D'url(%23bC)'%2F%3E%3Cpath%20d%3D'M43%203.5%20C%2041.3%207%2C%2041.3%2015%2C%2043%2018.5'%20stroke%3D'%23351c08'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20fill%3D'none'%20opacity%3D'.72'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: left center;
}
.bean-list--tight { gap: var(--sp-3); }
.bean-list--tight li { padding-left: 52px; }
.bean-list--tight li::before { width: 38px; height: 16px; }
.bean-list li strong { display: block; color: inherit; }
.section--dark .bean-list li strong { color: var(--ink-invert); }
/* --- 5d. The step medal: the chronological marker on phase rows. --- */
.bean-medal {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 14px 18px 12px;
border-radius: var(--r-md);
background: linear-gradient(160deg, rgba(255, 252, 245, .96), rgba(246, 231, 205, .88));
border: 1px solid var(--line);
box-shadow: var(--shadow-md);
flex: none;
}
.bean-medal__num {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: var(--caramel-600);
letter-spacing: -.03em;
}
.bean-medal__label {
font-size: .64rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-muted);
line-height: 1;
}
.section--dark .bean-medal {
background: linear-gradient(160deg, rgba(255, 244, 227, .10), rgba(255, 244, 227, .04));
border-color: rgba(246, 220, 180, .22);
}
.section--dark .bean-medal__num { color: var(--caramel-200); }
.section--dark .bean-medal__label { color: rgba(227, 207, 178, .68); }
/* --- 5e. Bean legend — explains the three beans once, on the home page. */
.bean-legend {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-4);
margin-top: var(--sp-6);
}
.bean-legend__item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: var(--r-sm);
background: rgba(255, 252, 245, .60);
border: 1px solid var(--line);
}
.bean-legend__item .bean { width: 15px; height: 20px; }
.bean-legend__txt { font-size: var(--t-sm); line-height: 1.4; }
.bean-legend__txt b { display: block; color: var(--ink); font-size: .92rem; }
.section--dark .bean-legend__item {
background: rgba(255, 244, 227, .06);
border-color: rgba(246, 220, 180, .18);
}
/* ==========================================================================
6. BUTTONS
--------------------------------------------------------------------------
Every booking action on this site is a WhatsApp action. The green button
is therefore the loudest thing on any screen it appears on.
========================================================================== */
.btn {
--btn-bg: linear-gradient(150deg, #F0D2A8, #DDAE7C);
/* espresso on a lighter caramel. White on the old darker gradient was
2.31:1; this pairing measures well past AA and reads more expensive. */
--btn-fg: #24150A;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 26px;
border: 0;
border-radius: var(--r-pill);
background: var(--btn-bg);
color: var(--btn-fg);
font-family: var(--font-body);
font-size: .96rem;
font-weight: 700;
letter-spacing: -.005em;
line-height: 1.2;
cursor: pointer;
text-align: center;
box-shadow: var(--shadow-md);
transition: transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn svg { width: 19px; height: 19px; flex: none; }
/* --- WhatsApp: the primary conversion button --- */
.btn--wa {
--btn-bg: linear-gradient(140deg, #10864A 0%, #0F7A3D 46%, #0A5F30 100%);
--btn-fg: #ffffff;
color: #ffffff;
box-shadow: 0 12px 30px -12px rgba(18, 140, 71, .70);
}
.btn--wa:hover { box-shadow: 0 20px 44px -14px rgba(18, 140, 71, .78); }
/* --- Dark espresso button --- */
.btn--dark {
--btn-bg: linear-gradient(150deg, var(--espresso-200), var(--espresso-400));
--btn-fg: var(--cream-01);
}
/* --- Outline button ------------------------------------------------------
Takes its colour from whatever section it sits in, rather than being told
per context. Three separate dark-on-dark invisibility bugs were caused by
the old approach, which needed a new selector every time a dark block was
added. `color: inherit` plus currentColor borders cannot go wrong. */
.btn--ghost {
--btn-bg: transparent;
color: inherit;
border: 1.5px solid color-mix(in srgb, currentColor 40%, transparent);
box-shadow: none;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.btn--ghost:hover {
background: color-mix(in srgb, currentColor 12%, transparent);
border-color: color-mix(in srgb, currentColor 68%, transparent);
box-shadow: none;
}
/* --- Sizes --- */
.btn--lg { padding: 18px 34px; font-size: 1.04rem; }
.btn--sm { padding: 11px 19px; font-size: .87rem; }
.btn--block { display: flex; width: 100%; }
.btn-row {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
margin-top: var(--sp-6);
}
.btn-row--center { justify-content: center; }
/* Little reassurance line that sits under a WhatsApp button */
.btn-note {
display: flex;
align-items: center;
gap: 8px;
margin-top: var(--sp-4);
font-size: var(--t-sm);
color: var(--ink-muted);
}
.btn-note::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--whatsapp);
box-shadow: 0 0 0 4px rgba(37, 211, 102, .22);
flex: none;
}
.section--dark .btn-note,
.hero .btn-note,
.cta-band .btn-note { color: rgba(227, 207, 178, .82); }
/* ==========================================================================
7. NAVIGATION
========================================================================== */
.nav {
position: sticky;
top: 0;
z-index: 90;
background: rgba(253, 246, 234, .80);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
min-height: 76px;
padding-block: 10px;
}
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
/* --- THE BADGE LOGO ------------------------------------------------------
Justin's circular "Coffee Estate & Waterfalls Hike" badge, sitting where
the bean mark used to be. The name stays in type beside it, because the
lettering inside the badge is unreadable at header size and the business
is called Justin Materuni, so it should be spelled out.
The file lives at images/logo.png, cropped to the circle with a fully
transparent surround, so it drops cleanly onto cream and onto espresso.
------------------------------------------------------------------------ */
.brand__logo {
display: none;
width: 54px;
height: 54px;
flex: none;
border-radius: 50%;
object-fit: contain;
filter: drop-shadow(0 3px 8px rgba(58, 34, 15, .34));
transition: transform .4s var(--ease);
}
.brand:hover .brand__logo { transform: rotate(-6deg) scale(1.05); }
html.has-logo .brand__logo { display: block; }
html.has-logo .brand__mark { display: none; }
.footer .brand__logo {
width: 66px;
height: 66px;
filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5));
}
@media (max-width: 620px) {
.brand__logo { width: 46px; height: 46px; }
.footer .brand__logo { width: 58px; height: 58px; }
}
.brand__mark {
display: flex;
align-items: center;
gap: 4px;
padding: 9px 11px;
border-radius: var(--r-sm);
background: linear-gradient(150deg, var(--espresso-200), var(--espresso-400));
box-shadow: var(--shadow-md);
}
.brand__mark .bean { width: 10px; height: 13px; }
.brand__txt { line-height: 1.05; }
.brand__name {
display: block;
font-family: var(--font-display);
font-size: 1.06rem;
font-weight: 700;
letter-spacing: -.01em;
color: var(--ink);
}
.brand__sub {
display: block;
font-size: .64rem;
font-weight: 700;
letter-spacing: .19em;
text-transform: uppercase;
color: var(--caramel-500);
margin-top: 2px;
}
.nav__links {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.nav__links a {
position: relative;
padding: 10px 15px;
border-radius: var(--r-xs);
font-size: .94rem;
font-weight: 500;
color: var(--ink-body);
transition: color .22s var(--ease), background .22s var(--ease);
}
.nav__links a:hover { color: var(--ink); background: rgba(237, 193, 137, .24); }
.nav__links a.is-active { color: var(--caramel-600); font-weight: 700; }
.nav__links a.is-active::after {
content: "";
position: absolute;
left: 15px; right: 15px; bottom: 4px;
height: 2px;
border-radius: 2px;
background: var(--caramel-400);
}
.nav__cta { flex: none; margin-left: var(--sp-3); }
/* --- CSS-only mobile menu --- */
.nav__toggle { display: none; }
.nav__burger {
display: none;
align-items: center;
justify-content: center;
width: 46px; height: 46px;
border-radius: var(--r-xs);
border: 1px solid var(--line);
background: rgba(255, 252, 245, .8);
cursor: pointer;
flex: none;
}
.nav__burger span {
position: relative;
display: block;
width: 20px; height: 2px;
border-radius: 2px;
background: var(--ink);
}
.nav__burger span::before,
.nav__burger span::after {
content: "";
position: absolute;
left: 0;
width: 20px; height: 2px;
border-radius: 2px;
background: var(--ink);
transition: transform .26s var(--ease);
}
.nav__burger span::before { top: -6px; }
.nav__burger span::after { top: 6px; }
/* ==========================================================================
8. HERO
========================================================================== */
.hero {
position: relative;
isolation: isolate;
display: flex;
align-items: flex-end;
min-height: min(90vh, 860px);
padding-block: clamp(80px, 14vw, 150px) clamp(48px, 7vw, 84px);
color: var(--ink-invert);
overflow: hidden;
}
.hero__media {
position: absolute;
inset: 0;
z-index: -2;
}
.hero__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 34%;
}
/* Warm espresso wash so the photo stays readable and stays *warm*.
No cold grey scrims anywhere on this site. */
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(178deg, rgba(30, 17, 6, .58) 0%, rgba(30, 17, 6, .12) 34%, rgba(30, 17, 6, .74) 78%, rgba(24, 13, 4, .93) 100%),
radial-gradient(720px 520px at 14% 88%, rgba(122, 66, 20, .58), transparent 70%);
}
.hero__content { max-width: 780px; }
.hero h1 { color: var(--ink-invert); text-shadow: 0 2px 30px rgba(20, 10, 2, .45); }
.hero .lead {
color: rgba(253, 243, 228, .90);
margin-top: var(--sp-5);
max-width: 56ch;
font-size: var(--t-lg);
}
.hero--short { min-height: min(62vh, 560px); align-items: flex-end; }
.hero--short h1 { font-size: clamp(2.15rem, 1.5rem + 2.8vw, 3.5rem); }
/* small photo credit / caption strip pinned bottom-right of a hero */
.hero__caption {
position: absolute;
right: var(--gutter);
bottom: var(--sp-5);
font-size: var(--t-xs);
letter-spacing: .04em;
color: rgba(253, 243, 228, .62);
}
/* ==========================================================================
9. SECTION HEADERS
========================================================================== */
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .kicker { justify-content: center; }
.sec-head--center p { margin-inline: auto; }
.sec-head p { margin-top: var(--sp-4); font-size: var(--t-lg); color: var(--ink-body); }
.section--dark .sec-head p { color: var(--ink-invert-b); }
/* Split header: title left, supporting copy right */
.sec-head--split {
max-width: none;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
gap: var(--sp-5) var(--sp-8);
align-items: end;
}
.sec-head--split p { margin-top: 0; }
/* ==========================================================================
10. PHASE ROWS ★ LOCKED IMAGE-TO-TEXT ALIGNMENT
--------------------------------------------------------------------------
The competitor's biggest weakness is text that does not line up with its
picture. Here every phase is one grid row: media and copy are siblings,
vertically centred, with an identical aspect ratio on every image, so the
chronology can never drift out of sync at any screen width.
========================================================================== */
.phases {
display: grid;
gap: clamp(56px, 7vw, 104px);
counter-reset: phase;
}
.phase {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 4.4vw, 68px);
align-items: center;
}
/* Odd rows: image left. Even rows: image right. Handled explicitly so the
reading order in the HTML always stays chronological. */
.phase--flip .phase__media { order: 2; }
.phase--flip .phase__body { order: 1; }
.phase__media {
position: relative;
aspect-ratio: 5 / 6;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-xl);
background: var(--sand);
}
.phase__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
transition: transform 1.1s var(--ease);
}
.phase:hover .phase__media img { transform: scale(1.035); }
/* warm vignette so images sit on the page instead of floating on it */
.phase__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(200deg, rgba(255, 224, 180, .10), transparent 42%, rgba(42, 24, 9, .30));
pointer-events: none;
}
/* floating caption tag that names exactly what you are looking at */
.phase__tag {
position: absolute;
left: var(--sp-4);
bottom: var(--sp-4);
z-index: 2;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border-radius: var(--r-pill);
background: rgba(30, 17, 6, .62);
border: 1px solid rgba(246, 220, 180, .26);
backdrop-filter: blur(10px);
color: var(--cream-01);
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: .03em;
line-height: 1;
}
.phase__body { min-width: 0; }
.phase__head {
display: flex;
align-items: center;
gap: var(--sp-4);
margin-bottom: var(--sp-5);
}
.phase__title { margin-bottom: var(--sp-4); }
.phase__body p { max-width: 54ch; }
.phase__body .bean-list { margin-top: var(--sp-5); }
/* the time chip: "about 45 minutes" */
.phase__time {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: var(--sp-5);
padding: 8px 15px;
border-radius: var(--r-pill);
background: rgba(237, 193, 137, .30);
border: 1px solid var(--line);
font-size: var(--t-sm);
font-weight: 600;
color: var(--caramel-600);
}
.section--dark .phase__time {
background: rgba(201, 134, 58, .18);
border-color: rgba(246, 220, 180, .20);
color: var(--caramel-200);
}
/* ==========================================================================
11. CARDS, GRIDS, GALLERY
========================================================================== */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* --- Base card --- */
.card {
display: flex;
flex-direction: column;
padding: clamp(22px, 2.6vw, 32px);
border-radius: var(--r-lg);
background: linear-gradient(158deg, rgba(255, 252, 245, .92), rgba(248, 238, 218, .78));
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
transition: transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--line-strong);
}
.card h3 { margin-bottom: var(--sp-3); }
.card p { flex: 1; }
.card .btn { margin-top: var(--sp-5); }
.section--dark .card {
background: linear-gradient(158deg, rgba(255, 244, 227, .085), rgba(255, 244, 227, .035));
border-color: rgba(246, 220, 180, .18);
}
.section--dark .card:hover { border-color: rgba(246, 220, 180, .34); }
/* --- Media card: photo on top, body below --- */
.card--media { padding: 0; overflow: hidden; }
.card--media .card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--sand);
}
.card--media .card__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1s var(--ease);
}
.card--media:hover .card__media img { transform: scale(1.06); }
.card--media .card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 2.4vw, 28px); }
.card--media .card__body p { flex: 1; }
/* ribbon on a media card */
.card__ribbon {
position: absolute;
top: var(--sp-3);
left: var(--sp-3);
z-index: 2;
padding: 7px 13px;
border-radius: var(--r-pill);
background: rgba(30, 17, 6, .70);
border: 1px solid rgba(246, 220, 180, .28);
backdrop-filter: blur(8px);
color: var(--cream-01);
font-size: .70rem;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
line-height: 1;
}
.card__ribbon--leaf { background: rgba(63, 107, 58, .82); border-color: rgba(200, 230, 190, .34); }
/* --- Feature card with a bean badge in the corner --- */
.card__beans { margin-bottom: var(--sp-4); }
/* --- Trust strip --- */
.trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-3) var(--sp-6);
padding: var(--sp-5) var(--gutter);
border-block: 1px solid var(--line);
background: rgba(255, 252, 245, .55);
}
.trust__item {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--t-sm);
font-weight: 600;
color: var(--ink-body);
letter-spacing: .01em;
}
.trust__item .beans { margin-right: 2px; }
/* --- Stats --- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.stat__num {
font-family: var(--font-display);
font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
font-weight: 700;
line-height: 1;
color: var(--caramel-400);
letter-spacing: -.03em;
}
.stat__lbl {
margin-top: var(--sp-2);
font-size: var(--t-sm);
color: var(--ink-muted);
line-height: 1.4;
}
.section--dark .stat__num { color: var(--caramel-200); }
.section--dark .stat__lbl { color: rgba(227, 207, 178, .72); }
/* --- Gallery --- */
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: var(--sp-3);
}
.gallery figure {
position: relative;
overflow: hidden;
border-radius: var(--r-md);
box-shadow: var(--shadow-md);
background: var(--sand);
}
.gallery img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1s var(--ease);
}
.gallery figure:hover img { transform: scale(1.07); }
.gallery .tall { grid-row: span 2; }
.gallery .wide { grid-column: span 2; }
.gallery figcaption {
position: absolute;
inset: auto 0 0 0;
padding: 26px 16px 13px;
background: linear-gradient(180deg, transparent, rgba(30, 17, 6, .82));
color: var(--cream-01);
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: .02em;
opacity: 0;
transform: translateY(8px);
transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.gallery figure:hover figcaption { opacity: 1; transform: translateY(0); }
/* --- Split feature: big image + copy panel --- */
.split {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
gap: clamp(28px, 4.4vw, 64px);
align-items: center;
}
.split--flip .split__media { order: 2; }
.split__media {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
background: var(--sand);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
/* a warm frame that peeks out behind the photo */
.split__media::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
border: 1px solid rgba(246, 220, 180, .28);
pointer-events: none;
}
.split__body p { max-width: 52ch; }
/* Headings inside a split panel need breathing room before the copy starts,
otherwise the paragraph looks glued to the bottom of the title. */
.split__body h2,
.split__body h3 { margin-bottom: var(--sp-5); }
.split__body .kicker + h2 { margin-top: var(--sp-1); }
/* Signature block under Justin's quote */
.signature {
margin-top: var(--sp-5);
font-family: var(--font-display);
font-style: italic;
font-size: 1.24rem;
font-weight: 600;
color: var(--caramel-600);
}
.signature small {
display: block;
margin-top: 4px;
font-family: var(--font-body);
font-style: normal;
font-size: .8rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-muted);
}
.section--dark .signature { color: var(--caramel-200); }
.section--dark .signature small { color: rgba(227, 207, 178, .68); }
/* ==========================================================================
12. SHOP
========================================================================== */
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.product { padding: 0; overflow: hidden; }
.product__media {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: linear-gradient(150deg, var(--sand), var(--caramel-100));
}
.product__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1s var(--ease);
}
.product:hover .product__media img { transform: scale(1.05); }
.product__body { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 2.4vw, 28px); }
.product__body h3 { margin-bottom: var(--sp-2); }
.product__body > p { flex: 1; font-size: var(--t-sm); }
.product__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: var(--sp-4) 0 var(--sp-2);
}
.tag {
padding: 6px 12px;
border-radius: var(--r-pill);
background: rgba(237, 193, 137, .34);
border: 1px solid var(--line);
font-size: .74rem;
font-weight: 600;
color: var(--caramel-600);
line-height: 1.2;
}
.tag--leaf { background: rgba(63, 107, 58, .14); color: var(--leaf); border-color: rgba(63, 107, 58, .22); }
/* Where a price would normally sit, we put an invitation instead. */
.price-swap {
display: flex;
align-items: center;
gap: 10px;
margin: var(--sp-4) 0 var(--sp-2);
padding: 12px 14px;
border-radius: var(--r-sm);
background: rgba(37, 211, 102, .10);
border: 1px dashed rgba(18, 140, 71, .34);
font-size: var(--t-sm);
font-weight: 600;
color: var(--whatsapp-dk);
line-height: 1.35;
}
.price-swap svg { width: 18px; height: 18px; flex: none; }
.section--dark .price-swap { color: #7cf0ab; background: rgba(37, 211, 102, .12); }
/* ==========================================================================
13. CONTACT — WHATSAPP BOOKING CARD
========================================================================== */
.wa-layout {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: clamp(28px, 4vw, 56px);
align-items: start;
}
/* --- The big booking card --- */
.wa-card {
position: relative;
overflow: hidden;
border-radius: var(--r-xl);
background: linear-gradient(160deg, #103d24 0%, #0b2c1a 55%, #071d11 100%);
border: 1px solid rgba(37, 211, 102, .26);
box-shadow: 0 40px 90px -34px rgba(6, 40, 22, .70);
color: #d9f5e3;
}
.wa-card::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(600px 380px at 88% -6%, rgba(37, 211, 102, .30), transparent 66%),
radial-gradient(460px 320px at 4% 104%, rgba(201, 134, 58, .22), transparent 68%);
pointer-events: none;
}
.wa-card > * { position: relative; }
.wa-card__top {
display: flex;
align-items: center;
gap: var(--sp-4);
padding: clamp(22px, 3vw, 30px);
border-bottom: 1px solid rgba(37, 211, 102, .20);
}
.wa-avatar {
position: relative;
width: 76px; height: 76px;
border-radius: 50%;
overflow: hidden;
flex: none;
border: 2.5px solid rgba(37, 211, 102, .55);
box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .6);
}
.wa-avatar img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 42%;
}
.wa-ident { min-width: 0; }
.wa-ident h3, .wa-ident .wa-name { color: #f2fff7; font-size: 1.35rem; margin-bottom: 3px; }
.wa-ident .wa-role { font-size: var(--t-sm); color: rgba(217, 245, 227, .72); }
.wa-online {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #6ef2a4;
}
.wa-online::before {
content: "";
width: 9px; height: 9px;
border-radius: 50%;
background: #3ee87f;
box-shadow: 0 0 0 0 rgba(62, 232, 127, .60);
animation: pulse 2.2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(62, 232, 127, .55); }
70% { box-shadow: 0 0 0 11px rgba(62, 232, 127, 0); }
100% { box-shadow: 0 0 0 0 rgba(62, 232, 127, 0); }
}
.wa-card__body { padding: clamp(22px, 3vw, 30px); }
/* fake chat bubbles — shows the visitor what happens when they tap */
.wa-thread { display: grid; gap: 10px; margin-bottom: var(--sp-6); }
.bubble {
max-width: 88%;
padding: 12px 16px;
border-radius: 16px;
font-size: var(--t-sm);
line-height: 1.5;
box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .6);
}
.bubble--them {
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .10);
border-bottom-left-radius: 5px;
color: #e8fbef;
}
.bubble--me {
background: linear-gradient(140deg, #1f7f4c, #14603a);
border-bottom-right-radius: 5px;
margin-left: auto;
color: #eafff2;
}
.bubble time {
display: block;
margin-top: 5px;
font-size: .68rem;
opacity: .58;
}
/* quick-question chips */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: var(--sp-4); }
.chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 15px;
border-radius: var(--r-pill);
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(37, 211, 102, .28);
color: #d9f5e3;
font-size: .84rem;
font-weight: 600;
line-height: 1;
transition: background .24s var(--ease), transform .24s var(--ease), border-color .24s var(--ease);
}
.chip:hover {
background: rgba(37, 211, 102, .18);
border-color: rgba(37, 211, 102, .58);
transform: translateY(-2px);
}
/* light version of the chips, for use on cream sections */
.chips--light .chip {
background: rgba(255, 252, 245, .72);
border-color: var(--line-strong);
color: var(--ink-body);
}
.chips--light .chip:hover { background: #fff; border-color: var(--caramel-300); }
/* --- Side panel: hours & practical info --- */
.info-card {
padding: clamp(22px, 2.8vw, 32px);
border-radius: var(--r-lg);
background: linear-gradient(158deg, rgba(255, 252, 245, .94), rgba(248, 238, 218, .82));
border: 1px solid var(--line);
box-shadow: var(--shadow-md);
}
.info-card + .info-card { margin-top: var(--sp-5); }
.info-card h2, .info-card h3 { margin-bottom: var(--sp-4); font-size: 1.22rem; }
.hours { width: 100%; border-collapse: collapse; }
.hours th,
.hours td {
padding: 11px 0;
text-align: left;
font-size: var(--t-sm);
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.hours tr:last-child th,
.hours tr:last-child td { border-bottom: 0; }
.hours th { font-weight: 600; color: var(--ink-body); }
.hours td { text-align: right; font-weight: 700; color: var(--ink); white-space: nowrap; }
.hours .is-now td { color: #08512A; }
.detail-list { display: grid; gap: var(--sp-4); }
.detail-list li { display: flex; gap: 14px; align-items: flex-start; font-size: var(--t-sm); }
.detail-list .beans { margin-top: 3px; }
.detail-list b { display: block; color: var(--ink); }
/* Sticky mobile WhatsApp bar */
.wa-dock {
position: fixed;
left: 50%;
bottom: 16px;
z-index: 80;
transform: translateX(-50%);
display: none;
width: calc(100% - 32px);
max-width: 460px;
}
/* ==========================================================================
14. QUOTES, BANDS, FOOTER
========================================================================== */
/* --- Testimonials --- */
.quote {
display: flex;
flex-direction: column;
padding: clamp(24px, 2.8vw, 34px);
border-radius: var(--r-lg);
background: linear-gradient(158deg, rgba(255, 252, 245, .92), rgba(248, 238, 218, .76));
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
}
.quote__stars { display: flex; gap: 3px; margin-bottom: var(--sp-4); color: var(--caramel-400); }
.quote__stars svg { width: 17px; height: 17px; }
.quote blockquote {
flex: 1;
font-family: var(--font-display);
font-size: 1.10rem;
line-height: 1.52;
color: var(--ink);
}
.quote figcaption {
display: flex;
align-items: center;
gap: 11px;
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--line);
font-size: var(--t-sm);
}
.quote__who b { display: block; color: var(--ink); }
.quote__who span { color: var(--ink-muted); font-size: var(--t-xs); }
.section--dark .quote {
background: linear-gradient(158deg, rgba(255, 244, 227, .085), rgba(255, 244, 227, .035));
border-color: rgba(246, 220, 180, .18);
}
.section--dark .quote blockquote { color: var(--ink-invert); }
.section--dark .quote figcaption { border-color: rgba(246, 220, 180, .18); }
/* --- Big CTA band --- */
.cta-band {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--r-xl);
padding: clamp(38px, 5.4vw, 76px) clamp(26px, 4.4vw, 68px);
background: linear-gradient(155deg, var(--espresso-200) 0%, var(--espresso-400) 58%, var(--espresso-500) 100%);
box-shadow: var(--shadow-xl);
color: var(--ink-invert-b);
text-align: center;
}
.cta-band::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(620px 420px at 16% 4%, rgba(224, 164, 95, .34), transparent 66%),
radial-gradient(560px 400px at 86% 98%, rgba(37, 211, 102, .18), transparent 68%);
}
.cta-band h2 { color: var(--ink-invert); }
.cta-band p { margin: var(--sp-4) auto 0; color: rgba(227, 207, 178, .88); font-size: var(--t-lg); }
.cta-band .kicker { justify-content: center; }
/* --- FAQ (native details/summary, no JS) --- */
.faq { display: grid; gap: var(--sp-3); }
.faq details {
border-radius: var(--r-md);
background: rgba(255, 252, 245, .70);
border: 1px solid var(--line);
overflow: hidden;
transition: border-color .24s var(--ease), box-shadow .24s var(--ease);
}
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq summary {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-size: 1.06rem;
font-weight: 600;
color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
margin-left: auto;
font-family: var(--font-body);
font-size: 1.4rem;
font-weight: 400;
color: var(--caramel-500);
transition: transform .28s var(--ease);
flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__a { padding: 0 22px 20px 62px; font-size: var(--t-sm); }
.faq .faq__a p { max-width: 62ch; }
/* --- Footer --- */
.footer {
background: linear-gradient(172deg, var(--espresso-400), var(--espresso-500));
color: rgba(227, 207, 178, .78);
padding-block: clamp(48px, 6vw, 76px) var(--sp-6);
}
.footer__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: var(--sp-7) var(--sp-6);
}
.footer h3, .footer h4 {
color: var(--cream-01);
font-family: var(--font-body);
font-size: .74rem;
font-weight: 700;
letter-spacing: .17em;
text-transform: uppercase;
margin-bottom: var(--sp-4);
}
.footer a { color: rgba(227, 207, 178, .78); transition: color .2s var(--ease); }
.footer a:hover { color: var(--caramel-200); }
.footer ul { display: grid; gap: 11px; font-size: var(--t-sm); }
.footer p { font-size: var(--t-sm); }
.footer .brand__name { color: var(--cream-01); }
.footer .brand__sub { color: var(--caramel-300); }
.footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
margin-top: var(--sp-8);
padding-top: var(--sp-5);
border-top: 1px solid var(--line-dark);
font-size: var(--t-xs);
color: rgba(227, 207, 178, .58);
}
/* ==========================================================================
15. MOTION
========================================================================== */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity .8s var(--ease), transform .8s var(--ease);
will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
/* slow drift on the hero image so the page feels alive on arrival */
@keyframes heroDrift {
from { transform: scale(1.06); }
to { transform: scale(1.13); }
}
.hero__media img { animation: heroDrift 22s var(--ease) forwards; }
:focus-visible {
outline: 3px solid var(--caramel-400);
outline-offset: 3px;
border-radius: 4px;
}
.skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
padding: 12px 20px;
background: var(--espresso-400);
color: var(--cream-01);
border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
}
/* ==========================================================================
16. RESPONSIVE
========================================================================== */
@media (max-width: 1080px) {
.footer__grid { grid-template-columns: 1fr 1fr; }
.gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 175px; }
.sec-head--split { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 940px) {
:root { --section-y: clamp(48px, 8vw, 72px); }
/* --- Mobile nav --- */
.nav__burger { display: flex; }
.nav__cta { display: none; }
.nav__links {
position: absolute;
left: 0; right: 0; top: 100%;
display: grid;
gap: 2px;
padding: var(--sp-4) var(--gutter) var(--sp-6);
background: rgba(253, 246, 234, .97);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(18px);
box-shadow: var(--shadow-lg);
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
padding-block: 0;
transition: max-height .34s var(--ease), opacity .28s var(--ease), padding .34s var(--ease);
}
.nav__toggle:checked ~ .nav__links {
max-height: 460px;
opacity: 1;
visibility: visible;
padding-block: var(--sp-4) var(--sp-6);
}
.nav__links a { padding: 14px 12px; font-size: 1.02rem; border-radius: var(--r-sm); }
.nav__links a.is-active::after { display: none; }
.nav__links a.is-active { background: rgba(237, 193, 137, .28); }
.nav__links .btn { margin-top: var(--sp-3); }
.nav__toggle:checked ~ .nav__burger span { background: transparent; }
.nav__toggle:checked ~ .nav__burger span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle:checked ~ .nav__burger span::after { transform: translateY(-6px) rotate(-45deg); }
/* --- Phases stack, media always first so chronology survives --- */
.phase,
.phase--flip {
grid-template-columns: 1fr;
gap: var(--sp-5);
}
.phase--flip .phase__media,
.phase .phase__media { order: 1; }
.phase--flip .phase__body,
.phase .phase__body { order: 2; }
.phase__media { aspect-ratio: 4 / 3; }
.split, .split--flip { grid-template-columns: 1fr; gap: var(--sp-6); }
.split--flip .split__media { order: 1; }
.split__media { aspect-ratio: 4 / 3; }
.wa-layout { grid-template-columns: 1fr; }
.grid--3, .grid--4, .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-5); }
.bean-legend { grid-template-columns: 1fr; }
.hero { min-height: min(84vh, 700px); }
.hero__caption { display: none; }
}
@media (max-width: 620px) {
:root { --gutter: 20px; }
.grid--2, .grid--3, .grid--4, .shop-grid { grid-template-columns: 1fr; }
.gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
.gallery .wide { grid-column: span 2; }
.gallery .tall { grid-row: span 1; }
.footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
.footer__bottom { flex-direction: column; align-items: flex-start; }
.btn { width: 100%; }
.btn-row { flex-direction: column; }
.btn-row .btn { width: 100%; }
.nav .btn, .chip, .btn--sm { width: auto; }
.phase__head { flex-wrap: wrap; gap: var(--sp-3); }
.bean-list li { padding-left: 52px; }
.bean-list li::before { width: 38px; height: 16px; }
.wa-card__top { flex-direction: column; align-items: flex-start; }
.faq .faq__a { padding-left: 22px; }
/* sticky WhatsApp dock only on phones */
.wa-dock { display: block; }
body { padding-bottom: 84px; }
.footer { padding-bottom: var(--sp-8); }
}
@media print {
.nav, .wa-dock, .cta-band, .footer { display: none; }
body { background: #fff; }
}
/* ==========================================================================
17. EDITORIAL LAYER ★ the magazine home page
--------------------------------------------------------------------------
Everything below is additive. The four inner pages keep using sections
1 to 16 above; the home page composes itself out of these instead.
17a. Editorial primitives (rules, overlines, drop caps, pull quotes)
17b. Section A · Split-screen hero
17c. Section B · Arabica vs Robusta comparison
17d. Section C · Kilimanjaro terroir band
17e. Section D · Chagga ritual, asymmetric
17f. Section E · Crop to cup checkerboard + lifecycle indicators
17g. Closing invitation
17h. Editorial responsive
========================================================================== */
/* --------------------------------------------------------------------------
17a. PRIMITIVES
-------------------------------------------------------------------------- */
.ed { padding-block: var(--section-y); position: relative; overflow: hidden; }
.ed--flush-top { padding-top: 0; }
.ed--half { padding-block: calc(var(--section-y) * .55); }
.ed-wrap {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
position: relative;
}
.ed-wrap--wide { max-width: var(--maxw-wide); }
.ed-wrap--tight { max-width: 940px; }
/* The hairline. On an editorial page the rule is the decoration. */
.rule {
height: 1px;
border: 0;
background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
margin: 0;
}
.rule--gold {
background: linear-gradient(90deg, transparent, var(--line-gold) 18%, var(--line-gold) 82%, transparent);
}
.rule--short { max-width: 88px; margin-inline: auto; background: var(--caramel-400); opacity: .7; }
.ed--dark .rule { background: linear-gradient(90deg, transparent, var(--line-dark) 18%, var(--line-dark) 82%, transparent); }
/* The overline: tiny letter-spaced caps above a headline, with a rule.
This single element does most of the "expensive" work on the page. */
.overline {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: clamp(20px, 2.4vw, 34px);
font-family: var(--font-body);
font-size: .70rem;
font-weight: 600;
letter-spacing: .34em;
text-transform: uppercase;
color: var(--caramel-600);
line-height: 1;
}
.overline::after {
content: "";
flex: 1;
height: 1px;
background: var(--line-strong);
max-width: 120px;
}
.overline--center { justify-content: center; }
.overline--center::before {
content: "";
flex: 1;
height: 1px;
background: var(--line-strong);
max-width: 120px;
}
.ed--dark .overline { color: var(--caramel-200); }
.ed--dark .overline::before,
.ed--dark .overline::after { background: var(--line-dark); }
/* A numeral used as a design element, the way a magazine numbers a feature */
.folio {
font-family: var(--font-display);
font-size: clamp(3.4rem, 2rem + 5vw, 6.5rem);
font-weight: 300;
line-height: .8;
color: var(--caramel-300);
opacity: .5;
letter-spacing: -.03em;
}
/* Magazine drop cap on the opening paragraph of a section */
.dropcap::first-letter {
float: left;
font-family: var(--font-display);
font-size: 4.1em;
font-weight: 300;
line-height: .78;
padding: .06em .12em 0 0;
color: var(--caramel-500);
}
/* Pull quote */
.pull {
font-family: var(--font-display);
font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
font-weight: 300;
font-style: italic;
line-height: 1.28;
color: var(--ink);
max-width: 22ch;
letter-spacing: -.01em;
}
.ed--dark .pull { color: var(--ink-invert); }
/* Editorial figure caption, always hairline-topped */
.figcap {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--line);
font-size: .76rem;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--ink-muted);
line-height: 1.5;
max-width: 42ch;
}
.ed--dark .figcap { border-color: var(--line-dark); color: rgba(222, 208, 189, .68); }
/* Dark editorial block */
.ed--dark {
background-color: var(--espresso-400);
background-image:
radial-gradient(1000px 620px at 8% -6%, rgba(196, 140, 88, .26), transparent 62%),
radial-gradient(880px 560px at 94% 104%, rgba(85, 107, 47, .20), transparent 64%),
linear-gradient(172deg, var(--espresso-300) 0%, var(--espresso-400) 54%, var(--espresso-500) 100%);
color: var(--ink-invert-b);
}
.ed--dark h1, .ed--dark h2, .ed--dark h3, .ed--dark h4 { color: var(--ink-invert); }
/* Caramel block, used once so it stays special */
.ed--caramel {
background-image:
radial-gradient(900px 560px at 12% 0%, rgba(255, 244, 228, .55), transparent 60%),
linear-gradient(158deg, var(--caramel-200) 0%, var(--caramel-300) 52%, var(--caramel-400) 100%);
}
/* --------------------------------------------------------------------------
17b. SECTION A · SPLIT-SCREEN HERO
-------------------------------------------------------------------------- */
.ed-hero {
position: relative;
display: grid;
grid-template-columns: 1.02fr .98fr;
min-height: min(100vh, 940px);
background: var(--espresso-400);
isolation: isolate;
}
.ed-hero__copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(4rem, 8vw, 8rem) clamp(2rem, 5vw, 5.5rem);
background-image:
radial-gradient(700px 520px at 10% 12%, rgba(196, 140, 88, .22), transparent 64%),
linear-gradient(170deg, var(--espresso-300), var(--espresso-500));
color: var(--ink-invert-b);
}
.ed-hero__copy .overline { color: var(--caramel-200); }
.ed-hero__copy .overline::after { background: var(--line-dark); }
.ed-hero h1 {
color: var(--ink-invert);
max-width: 14ch;
}
.ed-hero h1 em { color: var(--caramel-200); }
.ed-hero__lead {
margin-top: clamp(24px, 3vw, 40px);
max-width: 46ch;
font-size: var(--t-lg);
font-weight: 300;
line-height: 1.78;
color: rgba(222, 208, 189, .90);
}
.ed-hero__media {
position: relative;
overflow: hidden;
background: var(--espresso-500);
}
.ed-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
animation: edDrift 26s var(--ease) forwards;
}
@keyframes edDrift { from { transform: scale(1.08); } to { transform: scale(1.16); } }
/* a caramel wash so the photo belongs to the palette instead of fighting it */
.ed-hero__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(94deg, rgba(30, 18, 12, .72) 0%, rgba(30, 18, 12, .12) 30%, transparent 60%),
linear-gradient(0deg, rgba(30, 18, 12, .48), transparent 45%);
pointer-events: none;
}
.ed-hero__stamp {
position: absolute;
right: clamp(20px, 3vw, 40px);
bottom: clamp(20px, 3vw, 40px);
z-index: 2;
text-align: right;
font-size: .70rem;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(251, 249, 244, .68);
line-height: 1.7;
}
/* scroll cue */
.ed-hero__cue {
position: absolute;
left: clamp(2rem, 5vw, 5.5rem);
bottom: clamp(24px, 3vw, 40px);
z-index: 3;
display: inline-flex;
align-items: center;
gap: 12px;
font-size: .68rem;
letter-spacing: .26em;
text-transform: uppercase;
color: rgba(222, 208, 189, .62);
}
.ed-hero__cue::after {
content: "";
width: 46px;
height: 1px;
background: currentColor;
transform-origin: left;
animation: cueSlide 2.6s var(--ease) infinite;
}
@keyframes cueSlide {
0%, 100% { transform: scaleX(.35); opacity: .5; }
50% { transform: scaleX(1); opacity: 1; }
}
/* --------------------------------------------------------------------------
17c. SECTION B · ARABICA VS ROBUSTA
-------------------------------------------------------------------------- */
.compare {
display: grid;
grid-template-columns: 1fr 1px 1fr;
gap: 0;
margin-top: clamp(48px, 6vw, 84px);
align-items: stretch;
}
/* the elegant luxury divider the brief asked for */
.compare__divider {
background: linear-gradient(180deg, transparent, var(--line-gold) 12%, var(--line-gold) 88%, transparent);
position: relative;
}
.compare__divider::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 7px;
transform: translate(-50%, -50%) rotate(45deg);
background: var(--caramel-400);
box-shadow: 0 0 0 6px var(--cream-01);
}
.compare__col {
display: flex;
flex-direction: column;
padding: clamp(28px, 4vw, 60px) clamp(24px, 4vw, 64px);
}
.compare__col:first-of-type { padding-left: 0; }
.compare__col:last-of-type { padding-right: 0; }
.compare__rank {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
font-size: .68rem;
font-weight: 600;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--ink-muted);
}
.compare__col--royal .compare__rank { color: var(--caramel-600); }
.compare__title {
font-family: var(--font-display);
font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
font-weight: 300;
line-height: 1;
letter-spacing: -.01em;
color: var(--ink);
}
.compare__col--royal .compare__title { font-style: italic; }
.compare__latin {
margin-top: 6px;
font-family: var(--font-display);
font-style: italic;
font-size: 1.02rem;
color: var(--ink-muted);
}
/* The body grows and the table is pushed to the bottom, so the two spec
tables sit on the same line no matter how the prose lengths differ. */
.compare__body {
margin-top: clamp(20px, 2.4vw, 30px);
display: flex;
flex-direction: column;
flex: 1;
}
.compare__body p { max-width: 40ch; }
.compare__body .spec { margin-top: auto; padding-top: clamp(24px, 3vw, 36px); }
/* the bean shown at the head of each column, drawn large */
.compare__bean {
width: 40px;
height: 42px;
border-radius: 50% / 58% 58% 42% 42%;
transform: rotate(-20deg);
position: relative;
flex: none;
box-shadow:
inset -2px -3px 6px rgba(0, 0, 0, .34),
inset 2px 3px 5px rgba(255, 255, 255, .26),
0 4px 12px rgba(60, 38, 20, .26);
}
.compare__bean::after {
content: "";
position: absolute;
left: 50%;
top: 13%;
width: 3px;
height: 74%;
transform: translateX(-50%);
border-radius: 3px;
opacity: .68;
}
/* Robusta: rounder, darker, straight centre cut */
.compare__bean--robusta {
width: 42px;
height: 40px;
border-radius: 50%;
background: radial-gradient(circle at 32% 26%, #6B5540 0%, #3A2617 52%, #1A0E06 100%);
}
.compare__bean--robusta::after { background: #150A03; width: 3.5px; }
/* Arabica: elongated, warmer, with a curved cut */
.compare__bean--arabica {
width: 34px;
height: 48px;
border-radius: 50% / 56% 56% 44% 44%;
background: radial-gradient(circle at 32% 26%, #D19A5C 0%, #96581F 52%, #46240A 100%);
}
.compare__bean--arabica::after {
background: #3A1D06;
width: 3px;
border-radius: 3px;
transform: translateX(-50%) rotate(4deg);
box-shadow: 0 0 0 .5px rgba(255, 220, 180, .12);
}
.compare__head { display: flex; align-items: center; gap: 20px; }
/* --------------------------------------------------------------------------
17d. SECTION C · KILIMANJARO TERROIR
-------------------------------------------------------------------------- */
.terroir {
position: relative;
isolation: isolate;
min-height: min(90vh, 860px);
display: flex;
align-items: flex-end;
padding-block: var(--section-y);
overflow: hidden;
color: var(--ink-invert-b);
}
.terroir__bg { position: absolute; inset: 0; z-index: -2; }
.terroir__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 46%;
transform: scale(1.06);
}
/* the deep caramel gradient the brief specified, blending into the mist */
/* The scrim has one job: guarantee the copy is readable over a busy photo.
It is anchored to the left, so the type column sits on near solid espresso
while the right side stays open and the mountain still reads. The caramel
band in the middle keeps it in palette instead of looking like a grey wash. */
.terroir::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(102deg,
rgba(24, 14, 9, .95) 0%,
rgba(26, 15, 10, .90) 32%,
rgba(74, 42, 22, .72) 52%,
rgba(150, 92, 46, .38) 72%,
rgba(24, 14, 9, .62) 100%),
linear-gradient(180deg, rgba(24, 14, 9, .70) 0%, rgba(24, 14, 9, .10) 28%, rgba(24, 14, 9, .55) 82%, rgba(20, 11, 7, .88) 100%);
}
.terroir__inner { max-width: 780px; }
.terroir h2 { color: var(--ink-invert); }
.terroir .overline { color: var(--caramel-200); }
.terroir .overline::after { background: rgba(228, 216, 198, .34); }
.terroir p { color: rgba(243, 237, 226, .94); font-weight: 300; }
/* the three mineral facts, set as an editorial rail */
.terroir__facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 44px);
margin-top: clamp(40px, 5vw, 64px);
padding-top: clamp(28px, 3vw, 40px);
border-top: 1px solid rgba(228, 216, 198, .26);
}
.terroir__fact b {
display: block;
font-family: var(--font-display);
font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem);
font-weight: 300;
line-height: 1;
color: var(--caramel-200);
margin-bottom: 10px;
}
.terroir__fact span {
font-size: .84rem;
line-height: 1.7;
color: rgba(240, 233, 221, .86);
}
/* --------------------------------------------------------------------------
17e. SECTION D · CHAGGA RITUAL, ASYMMETRIC
-------------------------------------------------------------------------- */
.soul {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: clamp(40px, 6vw, 96px);
align-items: start;
}
/* The picture column holds while the story scrolls past it. This is what
removes the dead space a centred two column block always leaves, and it
is the one moment on the page that feels like a magazine spread turning. */
.soul__figures {
position: sticky;
top: clamp(88px, 11vh, 124px);
}
/* Reverse puts the pictures on the left and the story on the right. The
order has to move .soul__figures, which is the grid child; targeting
.soul__media only reordered a figure inside its own wrapper, so the
modifier silently did nothing except squeeze the text into the narrow
column. Prose keeps the wider column either way. */
.soul--reverse { grid-template-columns: .85fr 1.15fr; }
.soul--reverse .soul__figures { order: -1; }
.soul__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--r-lg);
box-shadow: var(--shadow-xl);
background: var(--sand);
}
.soul__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease-out);
}
.soul:hover .soul__media img { transform: scale(1.04); }
.soul__media::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(251, 249, 244, .16);
background: linear-gradient(200deg, rgba(255, 238, 214, .10), transparent 44%, rgba(30, 18, 12, .34));
pointer-events: none;
}
/* the offset second image that makes the block asymmetric rather than a grid */
.soul__media--offset { margin-top: clamp(30px, 5vw, 70px); }
.soul__body p { max-width: 46ch; }
.soul__body .pull { margin-top: clamp(30px, 4vw, 48px); }
.ritual-list {
display: grid;
gap: 0;
margin-top: clamp(30px, 4vw, 46px);
border-top: 1px solid var(--line);
}
.ed--dark .ritual-list { border-color: var(--line-dark); }
.ritual-list li {
display: grid;
grid-template-columns: 62px 1fr;
gap: 18px;
align-items: baseline;
padding: clamp(16px, 2vw, 22px) 0;
border-bottom: 1px solid var(--line);
}
.ed--dark .ritual-list li { border-color: var(--line-dark); }
.ritual-list__no {
font-family: var(--font-display);
font-size: 1.05rem;
font-style: italic;
color: var(--caramel-500);
letter-spacing: .04em;
}
.ed--dark .ritual-list__no { color: var(--caramel-200); }
.ritual-list__txt b {
display: block;
font-family: var(--font-body);
font-size: .96rem;
font-weight: 600;
color: var(--ink);
margin-bottom: 5px;
letter-spacing: .01em;
}
.ed--dark .ritual-list__txt b { color: var(--ink-invert); }
.ritual-list__txt span { font-size: .90rem; line-height: 1.75; color: var(--ink-body); }
.ed--dark .ritual-list__txt span { color: rgba(222, 208, 189, .82); }
/* --------------------------------------------------------------------------
17f. SECTION E · CROP TO CUP CHECKERBOARD
-------------------------------------------------------------------------- */
.craft { display: grid; gap: clamp(80px, 10vw, 150px); margin-top: clamp(56px, 7vw, 96px); }
.craft__step {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(36px, 5vw, 88px);
align-items: center;
}
/* even steps flip, producing the checkerboard. Media keeps a single fixed
ratio on every row so the two columns can never fall out of alignment. */
.craft__step:nth-child(even) .craft__media { order: 2; }
.craft__step:nth-child(even) .craft__body { order: 1; }
.craft__media {
position: relative;
aspect-ratio: 5 / 4;
overflow: hidden;
border-radius: var(--r-lg);
box-shadow: var(--shadow-xl);
background: var(--sand);
}
.craft__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease-out);
}
.craft__step:hover .craft__media img { transform: scale(1.045); }
.craft__media::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(251, 249, 244, .14);
background: linear-gradient(210deg, rgba(255, 238, 214, .08), transparent 46%, rgba(30, 18, 12, .28));
pointer-events: none;
}
.craft__body { min-width: 0; }
.craft__head {
display: flex;
align-items: center;
gap: clamp(18px, 2.4vw, 28px);
margin-bottom: clamp(22px, 2.6vw, 32px);
}
.craft__no {
font-family: var(--font-display);
font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4rem);
font-weight: 300;
line-height: .8;
color: var(--caramel-300);
letter-spacing: -.03em;
flex: none;
}
.ed--dark .craft__no { color: var(--caramel-400); }
.craft__stage {
font-size: .68rem;
font-weight: 600;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--ink-muted);
line-height: 1.6;
}
.ed--dark .craft__stage { color: rgba(222, 208, 189, .70); }
.craft__title { margin-bottom: clamp(16px, 2vw, 22px); }
.craft__body p { max-width: 44ch; }
.craft__time {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: clamp(24px, 3vw, 34px);
padding-top: 16px;
border-top: 1px solid var(--line);
font-size: .74rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--caramel-600);
}
.ed--dark .craft__time { border-color: var(--line-dark); color: var(--caramel-200); }
/* --- The lifecycle indicator. Four stages, drawn in pure CSS. --------------
Stage 1 red cherry the fruit on the branch
Stage 2 green bean the seed, once the shell is pounded away
Stage 3 roasted bean dark, glossy, off the fire
Stage 4 steaming cup the pour over
-------------------------------------------------------------------------- */
.lifecycle {
display: inline-flex;
align-items: flex-end;
gap: 11px;
flex: none;
padding: 14px 18px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: rgba(255, 253, 250, .68);
box-shadow: var(--shadow-sm);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.ed--dark .lifecycle {
background: rgba(251, 249, 244, .07);
border-color: var(--line-dark);
}
.lc {
position: relative;
width: 15px;
height: 20px;
border-radius: 50% / 58% 58% 42% 42%;
transform: rotate(-20deg);
flex: none;
box-shadow:
inset -1px -1.5px 3px rgba(0, 0, 0, .32),
inset 1px 1.5px 2.5px rgba(255, 255, 255, .30),
0 2px 4px rgba(60, 38, 20, .26);
}
.lc::after {
content: "";
position: absolute;
left: 50%;
top: 13%;
width: 2px;
height: 74%;
transform: translateX(-50%);
border-radius: 2px;
opacity: .72;
}
.lc--cherry { background: radial-gradient(circle at 32% 26%, #FF8F78 0%, var(--bean-cherry) 52%, #7D1414 100%); }
.lc--cherry::after { background: #7A1010; }
.lc--green { background: radial-gradient(circle at 32% 26%, #D6E8AC 0%, var(--bean-green) 52%, #4F6D2A 100%); }
.lc--green::after { background: #47632A; }
.lc--roast { background: radial-gradient(circle at 32% 26%, #B5793F 0%, var(--bean-roast) 52%, #3D2009 100%); }
.lc--roast::after { background: #351C08; }
/* stages not yet reached sit back so the eye reads progress at a glance */
.lc.is-waiting, .lc-cup.is-waiting { opacity: .22; filter: saturate(.3); }
/* the steaming cup, stage four */
.lc-cup {
position: relative;
width: 19px;
height: 20px;
flex: none;
}
.lc-cup__body {
position: absolute;
left: 0;
bottom: 0;
width: 15px;
height: 13px;
border-radius: 2px 2px 7px 7px;
background: linear-gradient(160deg, #FFFDFA, #E4D8C6 62%, #C3B29B);
box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .12), 0 2px 4px rgba(60, 38, 20, .26);
}
/* the coffee inside */
.lc-cup__body::after {
content: "";
position: absolute;
left: 1.5px;
top: 1.5px;
right: 1.5px;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, #6B4220, #3D2009);
}
.lc-cup__handle {
position: absolute;
right: 0;
bottom: 4px;
width: 7px;
height: 8px;
border: 2px solid #D4C5B9;
border-left: 0;
border-radius: 0 6px 6px 0;
}
.lc-cup__steam,
.lc-cup__steam::before,
.lc-cup__steam::after {
position: absolute;
width: 2px;
height: 6px;
border-radius: 2px;
background: linear-gradient(180deg, transparent, rgba(196, 140, 88, .85));
}
.lc-cup__steam {
left: 6px;
top: -1px;
animation: steam 2.4s ease-in-out infinite;
}
.lc-cup__steam::before { content: ""; left: -4px; top: 2px; animation: steam 2.4s ease-in-out .5s infinite; }
.lc-cup__steam::after { content: ""; left: 4px; top: 1px; animation: steam 2.4s ease-in-out .9s infinite; }
@keyframes steam {
0%, 100% { opacity: .25; transform: translateY(1px) scaleY(.8); }
50% { opacity: .95; transform: translateY(-2px) scaleY(1.15); }
}
/* --------------------------------------------------------------------------
17g. CLOSING INVITATION
-------------------------------------------------------------------------- */
.invite {
position: relative;
isolation: isolate;
text-align: center;
padding-block: calc(var(--section-y) * .92);
overflow: hidden;
}
.invite h2 { max-width: 18ch; margin-inline: auto; }
.invite p { margin-inline: auto; }
.invite__frame {
position: relative;
padding: clamp(44px, 6vw, 92px) clamp(26px, 5vw, 76px);
border: 1px solid var(--line-gold);
border-radius: var(--r-xl);
background: rgba(255, 253, 250, .40);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.ed--dark .invite__frame {
background: rgba(251, 249, 244, .04);
border-color: rgba(201, 162, 39, .30);
}
/* small corner ticks, the way a print ad marks its crop */
.invite__frame::before,
.invite__frame::after {
content: "";
position: absolute;
width: 22px;
height: 22px;
border: 1px solid var(--caramel-400);
opacity: .55;
}
.invite__frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: var(--r-xl) 0 0 0; }
.invite__frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 var(--r-xl) 0; }
/* --------------------------------------------------------------------------
17h. EDITORIAL RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.ed-hero { grid-template-columns: 1fr; min-height: 0; }
.ed-hero__media { aspect-ratio: 16 / 11; order: -1; }
.ed-hero__copy { padding-block: clamp(3rem, 8vw, 5rem); }
.ed-hero__cue { display: none; }
.compare { grid-template-columns: 1fr; }
.compare__divider {
height: 1px;
width: 100%;
background: linear-gradient(90deg, transparent, var(--line-gold) 14%, var(--line-gold) 86%, transparent);
margin-block: clamp(24px, 4vw, 40px);
}
.compare__col { padding-inline: 0; }
.soul, .soul--reverse { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 52px); }
.soul__figures { position: static; }
.soul--reverse .soul__media,
.soul--reverse .soul__figures { order: 0; }
.soul__media { aspect-ratio: 4 / 3; }
.soul__media--offset { margin-top: 0; }
.craft__step,
.craft__step:nth-child(even) { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 40px); }
.craft__step:nth-child(even) .craft__media { order: 1; }
.craft__step:nth-child(even) .craft__body { order: 2; }
.craft__media { aspect-ratio: 4 / 3; }
.terroir { min-height: 0; }
.terroir__facts { grid-template-columns: 1fr; gap: clamp(18px, 3vw, 26px); }
}
@media (max-width: 620px) {
.craft__head { flex-wrap: wrap; gap: 16px; }
.lifecycle { padding: 11px 15px; gap: 9px; }
.lc { width: 13px; height: 17px; }
.lc-cup { width: 17px; height: 18px; }
.lc-cup__body { width: 13px; height: 11px; }
.dropcap::first-letter { font-size: 3.4em; }
.ritual-list li { grid-template-columns: 42px 1fr; gap: 12px; }
.invite__frame { padding-inline: clamp(20px, 5vw, 30px); }
}
/* Section heading block used by the editorial sections */
.ed-head { margin-bottom: clamp(40px, 5vw, 72px); }
.ed-hero .btn-note, .terroir .btn-note { color: rgba(222, 208, 189, .82); }
/* ==========================================================================
18. THE KIHAMBA LAYER ★ homepage v3
--------------------------------------------------------------------------
18a. Cinematic hero
18b. Gold rules and metadata accents
18c. Animated statistic counters
18d. Immersive full-bleed ritual band
18e. Horizontal crop-to-cup timeline
========================================================================== */
/* --------------------------------------------------------------------------
18a. CINEMATIC HERO
-------------------------------------------------------------------------- */
.cine {
position: relative;
isolation: isolate;
min-height: min(100svh, 980px);
display: grid;
place-items: center;
text-align: center;
padding: clamp(7rem, 12vw, 10rem) var(--gutter) clamp(4rem, 7vw, 7rem);
overflow: hidden;
background: var(--espresso-500);
color: var(--ink-invert-b);
}
.cine__bg { position: absolute; inset: 0; z-index: -2; }
.cine__bg img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 42%;
animation: cineDrift 30s var(--ease) forwards;
}
@keyframes cineDrift { from { transform: scale(1.1); } to { transform: scale(1.2); } }
/* Mist. A soft caramel veil rather than a grey scrim, so the photograph
stays warm while the type stays absolutely readable. */
.cine::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(115% 78% at 50% 44%, rgba(20, 11, 7, .46) 0%, rgba(20, 11, 7, .82) 62%, rgba(16, 9, 5, .95) 100%),
linear-gradient(180deg, rgba(20, 11, 7, .74) 0%, rgba(20, 11, 7, .18) 26%, rgba(20, 11, 7, .22) 60%, rgba(16, 9, 5, .92) 100%);
}
.cine__inner { max-width: 980px; position: relative; }
/* A soft pool of shade that sits only behind the words. It has no edge, so it
reads as light falling off rather than as a box drawn on the photograph.
This is what carries the headline over the bright highlights on the beans. */
.cine__inner::before {
content: "";
position: absolute;
z-index: -1;
inset: -14% -16%;
background: radial-gradient(58% 54% at 50% 50%,
rgba(14, 8, 4, .74) 0%, rgba(14, 8, 4, .58) 46%, rgba(14, 8, 4, .22) 74%, transparent 100%);
pointer-events: none;
}
@media (max-width: 760px) {
.cine__inner::before {
inset: -8% -32%;
background: radial-gradient(80% 64% at 50% 50%,
rgba(12, 7, 3, .72) 0%, rgba(12, 7, 3, .56) 54%, rgba(12, 7, 3, .24) 82%, transparent 100%);
}
/* dialled back once the stray film above was fixed, so the photograph reads
again on a phone while the measured headline contrast stays well past AA */
.cine::after {
background:
radial-gradient(126% 82% at 50% 46%, rgba(20, 11, 7, .40) 0%, rgba(20, 11, 7, .74) 62%, rgba(16, 9, 5, .93) 100%),
linear-gradient(180deg, rgba(20, 11, 7, .70) 0%, rgba(20, 11, 7, .16) 26%, rgba(20, 11, 7, .20) 60%, rgba(16, 9, 5, .90) 100%);
}
}
.cine h1 {
color: var(--ink-invert);
font-size: clamp(2.7rem, 1.3rem + 6.2vw, 6.6rem);
font-weight: 300;
line-height: 1.02;
letter-spacing: -.014em;
text-shadow: 0 4px 46px rgba(12, 7, 3, .55);
}
.cine h1 em { color: var(--caramel-200); }
.cine__sub {
margin: clamp(26px, 3.4vw, 42px) auto 0;
max-width: 60ch;
font-size: clamp(1.02rem, .94rem + .42vw, 1.28rem);
font-weight: 300;
line-height: 1.82;
color: rgba(238, 231, 217, .90);
}
.cine .btn-row { justify-content: center; margin-top: clamp(32px, 4vw, 50px); }
/* the thin gold frame that makes the whole viewport feel art directed */
.cine__frame {
position: absolute;
inset: clamp(14px, 2.2vw, 30px);
z-index: 1;
border: 1px solid rgba(201, 162, 39, .26);
pointer-events: none;
}
.cine__frame::before,
.cine__frame::after {
content: "";
position: absolute;
width: 30px; height: 30px;
border: 1px solid rgba(201, 162, 39, .55);
}
.cine__frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.cine__frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.cine__meta {
position: absolute;
left: 50%;
bottom: clamp(26px, 4vw, 46px);
transform: translateX(-50%);
z-index: 2;
display: flex;
align-items: center;
gap: 14px;
font-size: .64rem;
font-weight: 500;
letter-spacing: .30em;
text-transform: uppercase;
color: rgba(232, 222, 206, .82);
text-shadow: 0 1px 8px rgba(10, 6, 3, .7);
white-space: nowrap;
}
.cine__meta::before,
.cine__meta::after {
content: "";
width: clamp(24px, 5vw, 60px);
height: 1px;
background: rgba(201, 162, 39, .45);
}
@media (max-width: 620px) {
.cine__meta { font-size: .56rem; letter-spacing: .22em; }
.cine__frame { inset: 10px; }
}
/* --------------------------------------------------------------------------
18b. GOLD ACCENTS
-------------------------------------------------------------------------- */
.gold-rule {
width: 62px;
height: 1px;
border: 0;
margin: 0 0 clamp(22px, 2.6vw, 32px);
background: linear-gradient(90deg, var(--gold), rgba(201, 162, 39, .12));
}
.gold-rule--center { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); width: 96px; }
/* a small metadata tag, refined spaced sans, for numbers and labels */
.tag-meta {
display: inline-block;
font-size: .64rem;
font-weight: 600;
letter-spacing: .30em;
text-transform: uppercase;
color: var(--caramel-600);
}
.ed--dark .tag-meta, .terroir .tag-meta { color: var(--caramel-200); }
/* --------------------------------------------------------------------------
18c. ANIMATED STATISTIC COUNTERS
-------------------------------------------------------------------------- */
.metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(18px, 3vw, 40px);
margin-top: clamp(48px, 6vw, 78px);
padding-top: clamp(30px, 3.6vw, 46px);
border-top: 1px solid var(--line-gold);
}
.metric__val {
display: flex;
align-items: baseline;
gap: 3px;
font-family: var(--font-display);
font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.5rem);
font-weight: 300;
line-height: 1;
letter-spacing: -.02em;
color: var(--caramel-500);
}
.metric__unit { font-size: .42em; font-weight: 400; letter-spacing: .02em; }
.metric__label {
margin-top: 12px;
font-size: .74rem;
line-height: 1.66;
color: var(--ink-muted);
max-width: 24ch;
}
.ed--dark .metric__val, .terroir .metric__val { color: var(--caramel-200); }
.ed--dark .metric__label, .terroir .metric__label { color: rgba(228, 216, 198, .74); }
.ed--dark .metrics, .terroir .metrics { border-top-color: rgba(201, 162, 39, .34); }
@media (max-width: 860px) {
.metrics { grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 5vw, 34px); }
}
/* --------------------------------------------------------------------------
18d. IMMERSIVE RITUAL BAND
-------------------------------------------------------------------------- */
.rite {
position: relative;
isolation: isolate;
min-height: min(94vh, 900px);
display: flex;
align-items: center;
padding-block: var(--section-y);
overflow: hidden;
color: var(--ink-invert-b);
}
.rite__bg { position: absolute; inset: 0; z-index: -2; }
.rite__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.rite::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(258deg,
rgba(16, 9, 5, .96) 0%,
rgba(18, 10, 6, .94) 40%,
rgba(60, 34, 18, .82) 60%,
rgba(130, 80, 40, .42) 80%,
rgba(16, 9, 5, .62) 100%),
linear-gradient(180deg, rgba(18, 10, 6, .60), transparent 26%, rgba(18, 10, 6, .74));
}
.rite__inner { max-width: 660px; margin-left: auto; }
.rite h2 { color: var(--ink-invert); }
.rite p { color: rgba(243, 237, 226, .93); font-weight: 300; }
.rite__quote {
margin-top: clamp(32px, 4vw, 48px);
padding-left: clamp(18px, 2.4vw, 30px);
border-left: 2px solid var(--gold);
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(1.4rem, 1rem + 1.7vw, 2.2rem);
line-height: 1.34;
color: var(--caramel-200);
max-width: 24ch;
}
@media (max-width: 1024px) {
.rite { min-height: 0; }
.rite__inner { margin-left: 0; }
.rite::after {
background:
linear-gradient(180deg, rgba(18, 10, 6, .82) 0%, rgba(20, 12, 7, .90) 40%, rgba(18, 10, 6, .94) 100%);
}
}
/* --------------------------------------------------------------------------
18e. HORIZONTAL CROP TO CUP TIMELINE
-------------------------------------------------------------------------- */
.timeline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: clamp(54px, 6vw, 88px);
border-top: 1px solid var(--line-gold);
}
.tl-step {
position: relative;
display: flex;
flex-direction: column;
padding: clamp(30px, 3.4vw, 46px) clamp(20px, 2.4vw, 34px) clamp(26px, 3vw, 38px);
border-right: 1px solid var(--line);
}
.tl-step:last-child { border-right: 0; }
.ed--dark .tl-step { border-right-color: var(--line-dark); }
/* the marker that sits on the top rule, like a station on a line */
.tl-step::before {
content: "";
position: absolute;
top: -5px;
left: clamp(20px, 2.4vw, 34px);
width: 9px; height: 9px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 5px var(--cream-01);
}
.ed--dark .tl-step::before { box-shadow: 0 0 0 5px var(--espresso-400); }
.tl-step__no {
font-family: var(--font-body);
font-size: .68rem;
font-weight: 600;
letter-spacing: .30em;
color: var(--caramel-600);
margin-bottom: clamp(20px, 2.4vw, 30px);
}
.ed--dark .tl-step__no { color: var(--caramel-300); }
.tl-step__icon { margin-bottom: clamp(18px, 2.2vw, 26px); }
.tl-step h3 {
font-size: clamp(1.24rem, 1.04rem + .8vw, 1.62rem);
font-weight: 400;
line-height: 1.16;
margin-bottom: 14px;
}
.tl-step p {
font-size: .90rem;
line-height: 1.74;
flex: 1;
max-width: none;
}
.tl-step__media {
position: relative;
margin-top: clamp(22px, 2.6vw, 30px);
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--r-sm);
background: var(--sand);
}
.tl-step__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease-out);
}
.tl-step:hover .tl-step__media img { transform: scale(1.06); }
@media (max-width: 1024px) {
.timeline { grid-template-columns: repeat(2, 1fr); }
.tl-step:nth-child(2) { border-right: 0; }
.tl-step:nth-child(3), .tl-step:nth-child(4) { border-top: 1px solid var(--line); }
.ed--dark .tl-step:nth-child(3), .ed--dark .tl-step:nth-child(4) { border-top-color: var(--line-dark); }
.tl-step:nth-child(3)::before, .tl-step:nth-child(4)::before { display: none; }
}
@media (max-width: 620px) {
.timeline { grid-template-columns: 1fr; }
.tl-step { border-right: 0; border-top: 1px solid var(--line); padding-inline: 0; }
.ed--dark .tl-step { border-top-color: var(--line-dark); }
.tl-step:first-child { border-top: 0; }
.tl-step::before { left: 0; }
.tl-step:nth-child(n+2)::before { display: none; }
}
/* ==========================================================================
19. THE SPEC SHEET ★ Arabica / Robusta comparison
--------------------------------------------------------------------------
Built as a real on purpose. Rows are table rows, so the two sides
are aligned by the layout engine itself and can never drift apart, at any
width or content length. The attribute name sits in the centre column as a
row header, which is what makes it read as a spec sheet rather than a list.
Every colour here is declared for the dark block. The previous version
inherited light-section tokens and rendered #201309 on #1E120C, a contrast
ratio of 1.01:1, which is why the values looked blank.
========================================================================== */
.specsheet {
width: 100%;
margin-top: clamp(44px, 5vw, 72px);
border-collapse: collapse;
table-layout: fixed;
font-family: var(--font-body);
}
.specsheet caption {
caption-side: top;
padding-bottom: clamp(20px, 2.4vw, 30px);
font-size: .64rem;
font-weight: 600;
letter-spacing: .30em;
text-transform: uppercase;
color: var(--caramel-600);
text-align: center;
}
.ed--dark .specsheet caption { color: var(--caramel-300); }
/* ---- column heads ---- */
.specsheet thead th {
padding: 0 clamp(14px, 2vw, 26px) clamp(16px, 2vw, 22px);
font-family: var(--font-display);
font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem);
font-weight: 400;
letter-spacing: .01em;
border-bottom: 1px solid var(--line-gold);
color: var(--ink);
}
.ed--dark .specsheet thead th { color: var(--ink-invert); }
.specsheet thead th:first-child { text-align: right; }
.specsheet thead th:last-child { text-align: left; font-style: italic; }
/* the centre column is narrow and holds the attribute names */
.specsheet__axis { width: clamp(112px, 16%, 190px); }
.specsheet thead .specsheet__axis {
font-family: var(--font-body);
font-size: .60rem;
font-weight: 600;
letter-spacing: .26em;
text-transform: uppercase;
text-align: center;
color: var(--ink-muted);
}
.ed--dark .specsheet thead .specsheet__axis { color: rgba(238, 229, 214, .95); }
/* ---- body rows ---- */
.specsheet tbody td,
.specsheet tbody th {
padding: clamp(15px, 1.9vw, 22px) clamp(14px, 2vw, 26px);
border-bottom: 1px solid var(--line);
vertical-align: middle;
font-size: clamp(.90rem, .86rem + .18vw, 1.02rem);
line-height: 1.5;
}
.ed--dark .specsheet tbody td,
.ed--dark .specsheet tbody th { border-bottom-color: rgba(228, 216, 198, .16); }
.specsheet tbody tr:last-child td,
.specsheet tbody tr:last-child th { border-bottom: 0; }
/* the attribute name, centred, quiet, letter-spaced */
.specsheet tbody th[scope="row"] {
text-align: center;
font-family: var(--font-body);
font-size: .62rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--ink-muted);
white-space: nowrap;
}
.ed--dark .specsheet tbody th[scope="row"] { color: rgba(228, 216, 198, .74); }
/* the two value columns */
.specsheet__robusta,
.specsheet__arabica { font-weight: 500; }
.specsheet__robusta { text-align: right; color: var(--ink-body); }
.specsheet__arabica { text-align: left; color: var(--ink); }
.ed--dark .specsheet__robusta { color: rgba(240, 233, 221, .88); }
.ed--dark .specsheet__arabica { color: var(--caramel-200); }
/* a hairline of gold down the arabica side, marking the favoured column */
.specsheet tbody td.specsheet__arabica { border-left: 1px solid transparent; }
.specsheet__mark {
position: relative;
}
.specsheet__mark::after {
content: "";
position: absolute;
left: 0; top: 12%;
width: 1px; height: 76%;
background: var(--line-gold);
}
@media (max-width: 720px) {
/* Stack into cards. The row becomes a grid so the attribute name can be
ordered to the top: in the table source it sits between the two values,
which reads as nonsense once the columns collapse. */
.specsheet, .specsheet thead, .specsheet tbody,
.specsheet tr, .specsheet td, .specsheet th { display: block; width: 100%; }
.specsheet thead { display: none; }
.specsheet caption {
text-align: left;
padding-bottom: var(--sp-5);
font-size: .58rem;
letter-spacing: .18em;
}
.specsheet tbody tr {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
padding-block: clamp(18px, 3.4vw, 24px);
border-bottom: 1px solid var(--line);
}
.ed--dark .specsheet tbody tr { border-bottom-color: rgba(228, 216, 198, .16); }
.specsheet tbody tr:last-child { border-bottom: 0; }
/* attribute name heads the card */
.specsheet tbody th[scope="row"] {
order: -1;
text-align: left;
padding: 0 0 4px;
border-bottom: 0;
font-size: .60rem;
letter-spacing: .20em;
color: var(--caramel-300);
}
.ed--dark .specsheet tbody th[scope="row"] { color: var(--caramel-300); }
.specsheet tbody td {
border-bottom: 0;
padding: 0;
display: flex;
align-items: baseline;
gap: 12px;
text-align: left;
}
/* each value announces its species, since the column heads are gone */
.specsheet tbody td::before {
content: attr(data-species);
flex: none;
min-width: 68px;
font-size: .58rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-muted);
}
.ed--dark .specsheet tbody td::before { color: rgba(228, 216, 198, .52); }
.specsheet__robusta, .specsheet__arabica { text-align: left; }
.specsheet__mark::after { display: none; }
}
/* --------------------------------------------------------------------------
19b. THE BEAN ILLUSTRATIONS
Real SVG seeds. Arabica is the elongated one with the sinuous centre cut;
robusta is rounder with a straight cut. That is the actual botanical tell,
so the graphic teaches something instead of just decorating.
-------------------------------------------------------------------------- */
.bean-fig {
display: block;
width: clamp(58px, 6vw, 76px);
height: auto;
flex: none;
filter: drop-shadow(0 6px 14px rgba(12, 6, 2, .45));
transition: transform .6s var(--ease-out);
}
.compare__head:hover .bean-fig { transform: rotate(-6deg) scale(1.05); }
/* dark-block corrections for the surrounding prose columns */
.ed--dark .compare__title { color: var(--ink-invert); }
.ed--dark .compare__latin { color: rgba(228, 216, 198, .62); }
.ed--dark .compare__rank { color: rgba(228, 216, 198, .62); }
.ed--dark .compare__col--royal .compare__rank { color: var(--caramel-300); }
.ed--dark .compare__body p { color: rgba(238, 231, 217, .86); }
.ed--dark .compare__divider::after { box-shadow: 0 0 0 6px var(--espresso-400); }
/* The About page letter runs long, so it gets a wider measure than the
short marketing blocks the .soul grid was originally built for. */
.soul--letter { grid-template-columns: 1.25fr .75fr; }
.soul--letter .soul__body p { max-width: 58ch; }
.soul--letter .soul__body .pull { max-width: 30ch; }
@media (max-width: 1024px) {
.soul--letter { grid-template-columns: 1fr; }
.soul--letter .soul__body p { max-width: none; }
}
/* ==========================================================================
20. THE CIRCULAR SHOP ★ shop page
--------------------------------------------------------------------------
The premise: a bag of coffee is not a product, it is the last step of a day
on the estate. So the page loops. Each village stage points at the roast it
produces, and each roast points back at the invitation to come and make it.
20a. Shop hero
20b. The loop (three staggered stage-to-roast cards)
20c. The bags (product grid)
20d. The promise band
========================================================================== */
/* --------------------------------------------------------------------------
20a. SHOP HERO
-------------------------------------------------------------------------- */
.shop-hero {
position: relative;
display: grid;
grid-template-columns: 1.08fr .92fr;
align-items: stretch;
background: var(--espresso-400);
isolation: isolate;
overflow: hidden;
}
.shop-hero__copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(4.5rem, 9vw, 9rem) clamp(2rem, 5vw, 5.5rem);
background-image:
radial-gradient(760px 540px at 8% 14%, rgba(196, 140, 88, .24), transparent 64%),
linear-gradient(168deg, var(--espresso-300), var(--espresso-500));
color: var(--ink-invert-b);
}
.shop-hero h1 {
color: var(--ink-invert);
font-size: clamp(2.5rem, 1.5rem + 4.4vw, 5.2rem);
font-weight: 300;
line-height: 1.0;
max-width: 13ch;
}
.shop-hero h1 em { color: var(--caramel-200); }
.shop-hero__lead {
margin-top: clamp(24px, 3vw, 38px);
max-width: 46ch;
font-size: var(--t-lg);
font-weight: 300;
line-height: 1.78;
color: rgba(238, 231, 217, .90);
}
.shop-hero__media { position: relative; overflow: hidden; background: var(--espresso-500); }
.shop-hero__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 42%;
}
.shop-hero__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(96deg, rgba(30, 18, 12, .82) 0%, rgba(30, 18, 12, .14) 34%, transparent 62%),
linear-gradient(0deg, rgba(30, 18, 12, .52), transparent 46%);
pointer-events: none;
}
/* --------------------------------------------------------------------------
20b. THE LOOP
Three cards, deliberately staggered rather than sitting in a flat row, so
the eye travels down the hillside instead of scanning a product shelf.
-------------------------------------------------------------------------- */
.loop {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 3vw, 44px);
margin-top: clamp(52px, 6vw, 84px);
align-items: stretch;
}
.loop__card {
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
background: linear-gradient(162deg, rgba(255, 253, 250, .94), rgba(246, 241, 232, .80));
box-shadow: var(--shadow-sm);
transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out);
}
.loop__card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: var(--line-gold);
}
.loop__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--sand);
}
.loop__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.3s var(--ease-out);
}
.loop__card:hover .loop__media img { transform: scale(1.07); }
.loop__stage {
position: absolute;
left: 14px; top: 14px;
z-index: 2;
padding: 7px 13px;
border-radius: var(--r-pill);
background: rgba(24, 14, 8, .74);
border: 1px solid rgba(201, 162, 39, .40);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: var(--caramel-200);
font-size: .60rem;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
line-height: 1;
}
.loop__body {
display: flex;
flex-direction: column;
flex: 1;
padding: clamp(22px, 2.6vw, 32px);
}
.loop__body h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-bottom: 12px; }
.loop__body p { flex: 1; font-size: .92rem; line-height: 1.72; max-width: none; }
/* the hinge: this is the bit that turns a story card into a product card */
.loop__pair {
display: flex;
align-items: center;
gap: 12px;
margin-top: clamp(20px, 2.4vw, 28px);
padding-top: clamp(16px, 2vw, 20px);
border-top: 1px solid var(--line-gold);
text-decoration: none;
color: inherit;
}
.loop__pair img {
width: 52px; height: 52px;
border-radius: var(--r-sm);
object-fit: cover;
flex: none;
box-shadow: var(--shadow-sm);
}
.loop__pair-txt { min-width: 0; }
.loop__pair-txt small {
display: block;
font-size: .58rem;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 4px;
}
.loop__pair-txt b {
display: block;
font-family: var(--font-display);
font-size: 1.08rem;
font-weight: 500;
color: var(--ink);
line-height: 1.2;
}
.loop__pair-go {
margin-left: auto;
flex: none;
color: var(--caramel-500);
font-size: 1.1rem;
transition: transform .34s var(--ease-out);
}
.loop__pair:hover .loop__pair-go { transform: translateX(4px); }
/* --------------------------------------------------------------------------
20c. THE BAGS
-------------------------------------------------------------------------- */
.bags {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(18px, 2.2vw, 30px);
margin-top: clamp(48px, 6vw, 78px);
}
.bag {
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
background: linear-gradient(162deg, rgba(255, 253, 250, .96), rgba(246, 241, 232, .84));
transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out);
scroll-margin-top: 120px;
}
.bag:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: var(--line-gold);
}
.ed--dark .bag {
background: linear-gradient(162deg, rgba(251, 249, 244, .07), rgba(251, 249, 244, .03));
border-color: rgba(228, 216, 198, .18);
}
.ed--dark .bag:hover { border-color: rgba(201, 162, 39, .45); }
.bag__media {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: linear-gradient(150deg, var(--sand), var(--caramel-100));
}
.bag__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease-out);
}
.bag:hover .bag__media img { transform: scale(1.06); }
.bag__roast {
position: absolute;
left: 14px; bottom: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 14px;
border-radius: var(--r-pill);
background: rgba(24, 14, 8, .76);
border: 1px solid rgba(201, 162, 39, .38);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: var(--cream-01);
font-size: .62rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
line-height: 1;
}
/* the roast strength meter, three beans filling by intensity */
.roast-meter { display: inline-flex; gap: 4px; }
.roast-meter i {
width: 8px; height: 11px;
border-radius: 50% / 58% 58% 42% 42%;
transform: rotate(-20deg);
background: radial-gradient(circle at 32% 26%, #b5793f, #7a4a22 55%, #3d2009);
}
.roast-meter i.is-off { opacity: .24; filter: saturate(.3); }
.bag__body { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.6vw, 32px); }
.bag__body h3 { font-size: clamp(1.28rem, 1.08rem + .8vw, 1.66rem); margin-bottom: 8px; }
.bag__notes {
font-family: var(--font-display);
font-style: italic;
font-size: 1.02rem;
color: var(--caramel-600);
margin-bottom: clamp(14px, 1.8vw, 18px);
}
.ed--dark .bag__notes { color: var(--caramel-200); }
.bag__body > p { flex: 1; font-size: .90rem; line-height: 1.72; max-width: none; }
.bag__spec {
display: grid;
gap: 0;
margin-top: clamp(18px, 2.2vw, 24px);
border-top: 1px solid var(--line);
}
.ed--dark .bag__spec { border-top-color: rgba(228, 216, 198, .16); }
.bag__spec div {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
font-size: .82rem;
}
.ed--dark .bag__spec div { border-bottom-color: rgba(228, 216, 198, .14); }
.bag__spec dt { color: var(--ink-muted); letter-spacing: .05em; }
.ed--dark .bag__spec dt { color: rgba(228, 216, 198, .62); }
.bag__spec dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }
.ed--dark .bag__spec dd { color: var(--ink-invert); }
/* The woodfire provenance line that sits under every bag. */
.bag__origin {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: clamp(16px, 2vw, 22px);
font-size: .80rem;
line-height: 1.6;
color: var(--ink-muted);
}
.ed--dark .bag__origin { color: rgba(228, 216, 198, .70); }
.bag__origin .beans { margin-top: 2px; }
/* --- The price slot ------------------------------------------------------
Currently set to the WhatsApp ask, which is how the rest of the site works.
To show a real figure instead, replace the .bag__ask block with:
45,000 TZS 500g
The styling for that is already here and waiting.
------------------------------------------------------------------------ */
.bag__price {
display: flex;
align-items: baseline;
gap: 6px;
margin: clamp(18px, 2.2vw, 24px) 0 0;
font-family: var(--font-display);
font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.1rem);
font-weight: 400;
color: var(--ink);
letter-spacing: -.01em;
}
.ed--dark .bag__price { color: var(--ink-invert); }
.bag__price span { font-size: .48em; font-weight: 500; letter-spacing: .10em; color: var(--caramel-600); }
.ed--dark .bag__price span { color: var(--caramel-200); }
.bag__price small {
margin-left: auto;
font-family: var(--font-body);
font-size: .70rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-muted);
}
.ed--dark .bag__price small { color: rgba(228, 216, 198, .58); }
.bag__ask {
display: flex;
align-items: center;
gap: 10px;
margin-top: clamp(18px, 2.2vw, 24px);
padding: 12px 14px;
border-radius: var(--r-sm);
border: 1px dashed rgba(201, 162, 39, .46);
background: rgba(201, 162, 39, .07);
font-size: .82rem;
font-weight: 500;
line-height: 1.45;
color: var(--caramel-600);
}
.ed--dark .bag__ask { color: var(--caramel-200); background: rgba(201, 162, 39, .10); }
.bag .btn { margin-top: clamp(16px, 2vw, 20px); }
/* --------------------------------------------------------------------------
20d. THE PROMISE BAND
-------------------------------------------------------------------------- */
.promise {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: clamp(48px, 6vw, 78px);
border-top: 1px solid var(--line-gold);
}
.promise__item {
padding: clamp(28px, 3.2vw, 44px) clamp(18px, 2.2vw, 32px);
border-right: 1px solid var(--line);
position: relative;
}
.promise__item:last-child { border-right: 0; }
.ed--dark .promise__item { border-right-color: var(--line-dark); }
.promise__item::before {
content: "";
position: absolute;
top: -5px;
left: clamp(18px, 2.2vw, 32px);
width: 9px; height: 9px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 5px var(--cream-01);
}
.ed--dark .promise__item::before { box-shadow: 0 0 0 5px var(--espresso-400); }
.promise__no {
font-family: var(--font-display);
font-style: italic;
font-size: 1.05rem;
color: var(--caramel-500);
margin-bottom: clamp(16px, 2vw, 22px);
display: block;
}
.ed--dark .promise__no { color: var(--caramel-200); }
.promise__item h3 {
font-size: clamp(1.1rem, .98rem + .5vw, 1.35rem);
font-weight: 500;
line-height: 1.24;
margin-bottom: 12px;
}
.promise__item p { font-size: .86rem; line-height: 1.72; max-width: none; }
/* --------------------------------------------------------------------------
20e. SHOP RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.shop-hero { grid-template-columns: 1fr; }
.shop-hero__media { aspect-ratio: 16 / 10; order: -1; }
.shop-hero__media::after {
background: linear-gradient(0deg, rgba(30, 18, 12, .68), transparent 52%);
}
.loop { grid-template-columns: repeat(2, 1fr); }
.bags { grid-template-columns: repeat(2, 1fr); }
.promise { grid-template-columns: repeat(2, 1fr); }
.promise__item:nth-child(2) { border-right: 0; }
.promise__item:nth-child(3),
.promise__item:nth-child(4) { border-top: 1px solid var(--line); }
.ed--dark .promise__item:nth-child(3),
.ed--dark .promise__item:nth-child(4) { border-top-color: var(--line-dark); }
.promise__item:nth-child(3)::before,
.promise__item:nth-child(4)::before { display: none; }
}
@media (max-width: 620px) {
.loop, .bags { grid-template-columns: 1fr; }
.promise { grid-template-columns: 1fr; }
.promise__item {
border-right: 0;
border-top: 1px solid var(--line);
padding-inline: 0;
}
.ed--dark .promise__item { border-top-color: var(--line-dark); }
.promise__item:first-child { border-top: 0; }
.promise__item::before { left: 0; }
.promise__item:nth-child(n+2)::before { display: none; }
}
@media (max-width: 620px) {
}
/* ===================================================================
21 · THE PROCESS PHOTOGRAPHY LAYER
Added when the estate's own bean-to-cup photographs replaced the
earlier set. Nothing here changes an existing component.
=================================================================== */
/* a wide lead photograph that opens or closes a chapter */
.craft-lead {
margin: clamp(40px, 4.6vw, 68px) auto 0;
max-width: 980px;
}
.craft-lead--tight { max-width: 780px; }
.craft-lead img {
width: 100%;
height: auto;
display: block;
border-radius: var(--r-md);
box-shadow: var(--shadow-md);
}
.figcap--center {
text-align: center;
max-width: 56ch;
margin-left: auto;
margin-right: auto;
}
/* photographer credit sitting quietly over the hero */
.cine__credit {
position: absolute;
right: clamp(20px, 4vw, 54px);
bottom: clamp(18px, 2.4vw, 30px);
z-index: 3;
font-family: var(--font-body);
font-size: .68rem;
letter-spacing: .01em;
/* measured at 1.60:1 over the bright beans before this was raised */
color: rgba(240, 230, 214, .84);
text-shadow: 0 1px 10px rgba(10, 6, 3, .85);
}
/* its own small pool of shade, edgeless like the one behind the headline */
.cine__credit::before {
content: "";
position: absolute;
z-index: -1;
inset: -160% -40%;
background: radial-gradient(52% 50% at 50% 50%,
rgba(12, 7, 3, .82) 0%, rgba(12, 7, 3, .52) 58%, transparent 100%);
pointer-events: none;
}
.cine__credit a {
color: rgba(238, 226, 208, .86);
text-decoration: none;
border-bottom: 1px solid rgba(238, 226, 208, .34);
}
.cine__credit a:hover { border-bottom-color: rgba(238, 226, 208, .8); }
@media (max-width: 760px) {
/* MUST stay positioned. As `static` its ::before backing re-anchors to the
whole .cine section, where inset:-160% resolves to about -1440px and paints
a dark film across the entire hero. That dropped the headline from 255 to
111 on every phone. */
.cine__credit { position: relative; right: auto; bottom: auto; display: block;
padding: 0 var(--gutter) 18px; text-align: right; }
}
/* ---- the timeline now carries eight steps, so the rules that divide it
have to work per row instead of being pinned to four fixed children. */
.tl-step:nth-child(4n) { border-right: 0; }
.tl-step:nth-child(n+5) { border-top: 1px solid var(--line); }
.ed--dark .tl-step:nth-child(n+5) { border-top-color: var(--line-dark); }
@media (max-width: 1024px) {
.tl-step:nth-child(4n) { border-right: 1px solid var(--line); }
.tl-step:nth-child(2n) { border-right: 0; }
.tl-step:nth-child(n+3) { border-top: 1px solid var(--line); }
.ed--dark .tl-step:nth-child(n+3) { border-top-color: var(--line-dark); }
.tl-step:nth-child(n+3)::before { display: none; }
}
@media (max-width: 620px) {
.tl-step:nth-child(4n),
.tl-step:nth-child(2n) { border-right: 0; }
}
/* ===================================================================
22 · CONTRAST CORRECTIONS
Found by scanning every text node against the pixels actually rendered
behind it. Each fix here is a cause, not a symptom.
=================================================================== */
/* (a) A button inside the nav was losing its own ink. `.nav__links a` is
specificity 0,1,1 and beat `.btn--wa` at 0,1,0, so every header WhatsApp
button drew body-brown text on bright green: measured 2.17:1. */
.nav__links a.btn { color: var(--btn-fg); }
.nav__links a.btn:hover { color: var(--btn-fg); background: var(--btn-bg); }
/* (b) A card in a dark section is meant to be dark glass. `.section--dark`
already did that; `.ed--dark` and `.rite` never got the same treatment, so
the About story cards stayed a near-white surface while inheriting the
section's near-white ink: measured 1.05:1. Extending the existing rule is
the fix, not overriding the ink. */
.ed--dark .card,
.rite .card {
background: linear-gradient(158deg, rgba(255, 244, 227, .085), rgba(255, 244, 227, .035));
border-color: rgba(246, 220, 180, .18);
}
.ed--dark .card:hover, .rite .card:hover { border-color: rgba(246, 220, 180, .34); }
.ed--dark .card .bean-medal, .ed--dark .card .card__beans {
background: linear-gradient(160deg, rgba(255, 244, 227, .10), rgba(255, 244, 227, .04));
}
.ed--dark .card .bean-medal__label { color: var(--caramel-200); }
/* (c) The mirror image of (b): components that carry their own dark ink were
being placed on dark sections and never reassigned. */
.ed--dark .lead, .section--dark .lead, .rite .lead { color: rgba(228, 216, 198, .90); }
.ed--dark .kicker, .section--dark .kicker {
background: rgba(28, 16, 9, .55);
border-color: var(--line-dark);
color: var(--caramel-200);
}
.btn-note { color: var(--caramel-600); }
/* keep the dark-section variants light, the rule above must not leak into them */
.ed--dark .tag-meta, .terroir .tag-meta,
.ed--dark .ritual-list__no { color: var(--caramel-200); }
.ed--dark .metric__label, .terroir .metric__label { color: rgba(228, 216, 198, .86); }
.ed--dark .btn-note, .cta-band .btn-note, .ed-hero .btn-note, .terroir .btn-note { color: rgba(227, 207, 178, .88); }
/* (f) The caramel button's ink is set at its base definition, NOT here.
Declaring --btn-fg in a later rule silently overrode every variant that had
already set its own, which put dark ink back on the dark green and the
espresso buttons. */
/* (g) Leftovers from the dark-glass card change and from kickers that sit on
dark heroes rather than inside a dark section. */
.ed--dark .bean-medal__num, .rite .bean-medal__num,
.ed--dark .card .bean-medal__num { color: var(--caramel-200); }
.hero .kicker, .shop-hero .kicker, .cine .kicker, .ed-hero .kicker {
background: rgba(28, 16, 9, .55);
border-color: rgba(246, 220, 180, .22);
color: var(--caramel-200);
}
.hero .kicker__dot, .shop-hero .kicker__dot { background: var(--caramel-300); }
/* (h) small caption text sitting on dark photography */
.rite .figcap, .cine .figcap, .shop-hero .figcap { color: rgba(228, 216, 198, .82); }
.shop-hero .figcap, .hero .figcap { color: rgba(228, 216, 198, .84); }
/* (j) the short inner-page hero had no veil of its own, so the headline sat
straight on the photograph: measured 2.39:1 */
.hero--short { position: relative; isolation: isolate; }
.hero--short::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(120% 86% at 42% 44%, rgba(20, 11, 7, .52) 0%, rgba(20, 11, 7, .80) 62%, rgba(16, 9, 5, .93) 100%),
linear-gradient(180deg, rgba(20, 11, 7, .70) 0%, rgba(20, 11, 7, .22) 30%, rgba(16, 9, 5, .88) 100%);
}
/* (k) the small WhatsApp chip: it had no background of its own, so the dark
green ink landed on whatever section it was dropped into */
.btn--wa.btn--sm { background: var(--btn-bg); color: var(--btn-fg); }
/* (l) Final pass: the remaining failures were all small secondary labels in
the 3.0 to 4.0 band. Same hues, darker or lighter by one step. */
.figcap { color: #5F4E3E; }
.tag-meta { color: #7A4A22; }
.promise__no, .specsheet__axis { color: #6B5342; }
.tiny, .signature { color: #5F4E3E; }
.footer .footer__legal span, .footer small, .footer .tiny { color: rgba(233, 220, 200, .92); }
/* their dark-section counterparts stay light */
.ed--dark .figcap, .rite .figcap, .cine .figcap,
.shop-hero .figcap, .hero .figcap { color: rgba(230, 220, 204, .86); }
.ed--dark .tag-meta, .terroir .tag-meta, .rite .tag-meta { color: var(--caramel-200); }
.ed--dark .tiny, .section--dark .tiny, .wa-card .tiny { color: rgba(226, 240, 231, .88); }
.section--dark .promise__no, .ed--dark .promise__no { color: var(--caramel-200); }
.ed--dark .bean-medal__label, .section--dark .bean-medal__label { color: var(--caramel-200); }
.hero .kicker, .cine .kicker, .shop-hero .kicker,
.ed-hero .kicker, .section--dark .kicker { color: var(--caramel-200); }
/* (m) two last cases where a light-section style sat on a dark band */
.cta-band .kicker, .invite .kicker {
background: rgba(28, 16, 9, .55);
border-color: rgba(246, 220, 180, .22);
color: var(--caramel-200);
}
/* a caption that belongs to one photograph rather than the whole figure group */
.figcap--inset {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--line);
font-size: .74rem;
letter-spacing: .01em;
text-transform: none;
line-height: 1.6;
max-width: none;
color: #5F4E3E;
}
.ed--dark .figcap--inset, .section--dark .figcap--inset {
border-top-color: var(--line-dark);
color: rgba(230, 220, 204, .88);
}
.compare__latin, .promise__no { color: #46362A; }
.brand__sub, .tag-meta, .compare__rank,
.nav__links a.is-active { color: #6B4119; }
.dropcap, .lead { color: #3E3025; }
/* dark-section counterparts, restated after the darkening above so they win */
.ed--dark .figcap, .ed--dark .figcap--inset, .rite .figcap, .cine .figcap,
.shop-hero .figcap, .hero .figcap, .section--dark .figcap { color: rgba(232, 222, 206, .90); }
.ed--dark .compare__rank { color: var(--caramel-200); }
.ed--dark .metric__label, .terroir .metric__label,
.ed--dark .specsheet__axis, .ed--dark .compare__latin { color: rgba(230, 219, 202, .92); }
.ed--dark .tiny, .section--dark .tiny, .wa-card .tiny { color: rgba(226, 240, 231, .90); }
.ed--dark .lead, .section--dark .lead, .rite .lead { color: rgba(230, 219, 202, .92); }
.section--dark .promise__no, .ed--dark .promise__no { color: var(--caramel-200); }
/* (o) The caramel numerals and small caps sit on tinted panels rather than
plain cream, so they needed a further step down to clear 4.5:1 there. */
.tl-step__no, .ritual-list__no, .promise__no,
.tag-meta, .compare__rank, .bean-medal__label { color: #5A3614; }
.ed--dark .tl-step__no, .ed--dark .ritual-list__no, .ed--dark .promise__no,
.ed--dark .tag-meta, .ed--dark .compare__rank, .ed--dark .bean-medal__label,
.section--dark .bean-medal__label, .terroir .tag-meta,
.rite .tag-meta { color: var(--caramel-200); }
.specsheet__axis, .tiny { color: #3E3025; }
.ed--dark .specsheet__axis, .ed--dark .tiny,
.section--dark .tiny, .wa-card .tiny { color: rgba(230, 219, 202, .92); }
/* (p) Some credits ended up inside the image container itself rather than
below it, so dark ink was sitting straight on the photograph: 1.06:1.
Inside a media box a credit becomes an overlay with its own scrim, which
guarantees contrast whatever the picture underneath happens to be. */
.card__media, .loop__media, .split__media,
.shop-hero__media, .soul__media, .tl-step__media { position: relative; }
.soul__figures > .figcap { grid-column: 1 / -1; }
/* the inset caption belongs to the photograph directly above it, so it sits in
that same grid column rather than spanning the row like the group caption */
.soul__figures > .figcap--inset {
grid-column: auto;
margin-top: 12px;
align-self: start;
}
/* ===================================================================
23 · THE TURNING BADGE
The logo is one flat PNG, so the lettering could not move on its own.
It is now split into two layers cut at 0.63 of the radius: the woman
and the sunset stay still, the ring of lettering turns around her.
Recombined they are pixel-identical to the original badge.
=================================================================== */
.brand__badge {
position: relative;
display: none;
width: 54px;
height: 54px;
flex: none;
border-radius: 50%;
filter: drop-shadow(0 3px 8px rgba(58, 34, 15, .34));
}
html.has-logo .brand__badge { display: block; }
html.has-logo .brand__mark { display: none; }
.brand__badge .brand__logo {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
filter: none;
}
/* The ring turns for as long as the cursor stays on the badge, then stops
where it is. A single 360 degree turn was too easy to miss: it ended exactly
where it started, so unless you were watching at that moment nothing seemed
to happen. */
@keyframes brandRing { to { transform: rotate(360deg); } }
.brand__logo--ring {
transform-origin: 50% 50%;
will-change: transform;
animation: brandRing 9s linear infinite;
animation-play-state: paused;
}
.brand:hover .brand__logo--ring,
.brand:focus-visible .brand__logo--ring { animation-play-state: running; }
/* the badge lifts a little; the core must sit still, and this has to be said
on the core itself. An earlier version neutralised `.brand:hover
.brand__logo`, which has the same specificity as the ring rule and came
later in the file, so it silently cancelled the rotation. */
.brand__badge { transition: transform .4s var(--ease); }
.brand:hover .brand__badge { transform: scale(1.04); }
.brand:hover .brand__logo--core,
.brand:focus-visible .brand__logo--core { transform: none; }
.footer .brand__badge {
width: 66px;
height: 66px;
filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5));
}
@media (prefers-reduced-motion: reduce) {
.brand__logo--ring { animation: none; }
.brand:hover .brand__logo--ring,
.brand:focus-visible .brand__logo--ring { animation: none; }
.brand:hover .brand__badge { transform: none; }
}
/* A banner carrying nothing but its title needs different proportions from one
carrying a kicker, a headline and a paragraph: centred, and larger, so the
words do not sit marooned in the bottom corner. */
.hero--title { text-align: center; }
.hero--title .hero__content {
display: flex;
flex-direction: column;
justify-content: center;
min-height: clamp(180px, 22vw, 300px);
}
.hero--title h1 {
font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5rem);
margin: 0;
letter-spacing: -.012em;
}
.specsheet td, .hours td, table td { color: #3A2C21; }
.kicker { color: #4A2A0F; }
.cta-band .kicker { color: #F2D9AE; }
/* the ribbon floats on photography, so the fix is a firmer plate behind the
words rather than a brighter ink that would glare */
.card__ribbon {
background: rgba(18, 10, 4, .88);
color: #FCF8F1;
text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}
/* footer small print */
.footer .footer__legal span, .footer small, .footer .tiny,
.footer__legal, .footer__legal a { color: rgba(243, 236, 224, .96); }
/* the real selectors, found by reading the markup rather than guessing */
.footer__bottom span, .footer__bottom a { color: rgba(243, 236, 224, .96); }
.info-card td, .info-card th, .hours td, .hours th { color: #3A2C21; }
.ed--dark .info-card td, .section--dark .info-card td { color: #3A2C21; }
.ed .invite .btn-note, .invite .btn-note { color: #3A2C21; }
.ed--dark .invite .btn-note { color: rgba(242, 235, 223, .96); }
/* the rest of the spec sheet's own row labels, same reasoning */
.ed--dark .specsheet th, .ed--dark .specsheet td { color: rgba(240, 232, 218, .95); }
/* a credit sitting on the cinematic hero needs the light treatment */
/* the opening-hours cell was set in WhatsApp green, which is 3.8:1 on cream */
.hours td { color: #3A2C21; }
.hours td strong, .hours .is-open { color: #0B6B34; }
/* Credits that sit immediately under a photograph can have the picture's lower
edge inside their own box. A little more separation, and a darker ink, so
they stay legible wherever that edge falls. */
.craft-lead ~ .photo-credit,
.invite .photo-credit,
.ed--dark .photo-credit, .ed--dark .photo-credit a,
.cine .photo-credit, .rite .photo-credit,
.tl-step__media > .photo-credit,
.card__media > .photo-credit, .loop__media > .photo-credit,
.split__media > .photo-credit, .shop-hero__media > .photo-credit,
/* the link inside the credit carries its own colour, so it needs saying too */
.ed .photo-credit a,
.craft-lead ~ .photo-credit a,
/* ===================================================================
25 · PHOTO CREDITS, RESOLVED IN ONE PLACE
These kept flipping because `.ed--dark` also matches `.ed`, so a later
light rule silently beat the dark one. Order below is deliberate:
light default, then dark sections, then credits that sit on top of a
photograph. Each layer must name the link as well as the paragraph,
because the anchor carries its own colour.
=================================================================== */
.photo-credit { margin-top: 12px; font-size: .72rem; letter-spacing: .01em; line-height: 1.5; text-align: right; }
.photo-credit, .photo-credit a { color: #2A2018; }
.photo-credit a { text-decoration: none; border-bottom: 1px solid rgba(42, 32, 24, .45); }
.ed--dark .photo-credit, .ed--dark .photo-credit a,
.section--dark .photo-credit, .section--dark .photo-credit a,
.rite .photo-credit, .rite .photo-credit a,
.cine .photo-credit, .cine .photo-credit a,
.terroir .photo-credit, .terroir .photo-credit a,
.shop-hero .photo-credit, .shop-hero .photo-credit a,
.hero .photo-credit, .hero .photo-credit a { color: rgba(245, 239, 229, .98); }
.ed--dark .photo-credit a, .section--dark .photo-credit a,
.rite .photo-credit a, .cine .photo-credit a,
.shop-hero .photo-credit a, .hero .photo-credit a { border-bottom-color: rgba(245, 239, 229, .5); }
/* sitting over a photograph: white on its own scrim, wherever the picture is light */
.card__media > .photo-credit, .card__media > .photo-credit a,
.loop__media > .photo-credit, .loop__media > .photo-credit a,
.split__media > .photo-credit, .split__media > .photo-credit a,
.shop-hero__media > .photo-credit, .shop-hero__media > .photo-credit a,
.soul__media > .photo-credit, .soul__media > .photo-credit a,
.tl-step__media > .photo-credit, .tl-step__media > .photo-credit a { color: #FFFFFF; }
.card__media > .photo-credit,
.loop__media > .photo-credit,
.split__media > .photo-credit,
.shop-hero__media > .photo-credit,
.soul__media > .photo-credit,
.tl-step__media > .photo-credit {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0;
padding: 22px 12px 8px; font-size: .66rem; line-height: 1.4;
background: linear-gradient(to top, rgba(10, 6, 3, .88) 0%, rgba(10, 6, 3, .84) 42%,
rgba(10, 6, 3, .58) 72%, transparent 100%);
text-shadow: 0 1px 6px rgba(0, 0, 0, .85);
}
.card__media > .photo-credit a, .loop__media > .photo-credit a,
.split__media > .photo-credit a, .shop-hero__media > .photo-credit a,
.soul__media > .photo-credit a, .tl-step__media > .photo-credit a { border-bottom-color: rgba(255,255,255,.55); }
/* ===================================================================
26 · CAPTIONS, NOTES AND METRIC LABELS
Restored after the credit consolidation above removed rules that
happened to share a selector list with .photo-credit. Same ordering
discipline: light default first, dark contexts after, and remember
that .ed--dark also matches .ed.
=================================================================== */
.figcap, .figcap--inset, .btn-note, .metric__label { color: #2A2018; }
.ed--dark .figcap, .ed--dark .figcap--inset,
.ed--dark .btn-note, .ed--dark .metric__label,
.section--dark .figcap, .section--dark .btn-note, .section--dark .metric__label,
.rite .figcap, .rite .btn-note,
.cine .figcap, .cine .btn-note,
.terroir .figcap, .terroir .btn-note, .terroir .metric__label,
.cta-band .btn-note,
.shop-hero .figcap, .shop-hero .btn-note,
.hero .figcap, .hero .btn-note { color: rgba(243, 236, 224, .96); }
/* the shop banner sits on photography, so its note needs a shadow too */
.shop-hero .btn-note, .hero .btn-note, .cine .btn-note { text-shadow: 0 1px 6px rgba(10, 6, 3, .8); }
/* A line of his own under the banner heading. Kept to one sentence: the banner
is an opening, not the place to tell the story, and his letter is directly
below it. */
.hero--title .hero__quote {
margin: clamp(18px, 2.2vw, 28px) auto 0;
max-width: 46ch;
}
.hero--title .hero__quote blockquote {
margin: 0;
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(1.12rem, .95rem + .75vw, 1.6rem);
line-height: 1.5;
color: rgba(246, 239, 228, .97);
text-shadow: 0 2px 16px rgba(10, 6, 3, .75);
/* stops a single word being left stranded on the last line */
text-wrap: balance;
}
.hero--title .hero__quote figcaption {
margin-top: clamp(12px, 1.4vw, 18px);
font-family: var(--font-body);
font-size: .7rem;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(238, 222, 196, .9);
}
.hero--title .hero__quote figcaption::before {
content: "";
display: block;
width: 42px;
height: 1px;
margin: 0 auto clamp(12px, 1.4vw, 16px);
background: rgba(228, 190, 130, .65);
}