/* AUTO-GENERATED by assets/build.php - do not edit this file directly.
Edit the numbered source files in assets/css/src/ instead, then run:
php assets/build.php */
:root{
/* Dark palette lifted from the live Shopify store (shop.tuangcoffee.com,
Horizon theme config/settings_data.json): background #241109, foreground #f4eadd. */
--clr-terracotta: #C1502A;
--clr-terracotta-dark: #9A3D1F;
--clr-ink: #F4EADD;
--clr-ink-soft: #D8CFC0;
--clr-bg: #241109;
--clr-bg-alt: #2C160C;
--clr-surface: #34190F;
--clr-panel-dark: #1A0B05;
--clr-moss: #6E7350;
--clr-moss-rgb: 110,115,80;
--clr-gray-light: #ADA79C;
--clr-gray-light-rgb: 173,167,156;
--clr-gold: #D9A441;
--clr-line: rgba(244,234,221,0.14);
/* Warmer, lighter browns for section gradients - the flat near-black
background (#241109) reads as heavy over a long scroll, so these give
sections somewhere to gradient *toward* without leaving the dark/premium
palette entirely (no light mode - just less flat). */
--clr-bg-warm: #341B0E;
--clr-bg-warm-2: #3D2011;
--font-display: "Anton", "Arial Narrow", sans-serif;
--font-body: "Poppins", -apple-system, sans-serif;
--font-mono: "IBM Plex Mono", monospace;
--container: 1200px;
--radius-sm: 4px;
--radius-md: 10px;
--nav-h: 70px;
--announce-h: 38px;
--ease: cubic-bezier(.22,.61,.36,1);
/* Fixed (never overridden by [data-theme="light"]) - for text/icons that
sit on the navbar, announce bar, search panel, or footer specifically.
Those four stay a dark brown "anchor chrome" in both themes (see the
[data-theme="light"] block below), so their own text must stay light
regardless of theme rather than following --clr-ink/--clr-ink-soft,
which flip to dark-on-light and would go illegible there. */
--clr-ink-on-dark: #F4EADD;
--clr-ink-soft-on-dark: #D8CFC0;
--clr-line-on-dark: rgba(244,234,221,0.14);
}
/* Light theme - the site above is dark by default (no attribute = dark,
unchanged from before this existed). [data-theme="light"] on is
set by the toggle in the navbar (see main_1.js) and persisted to
localStorage. Terracotta/gold/moss stay identical across both themes -
only surfaces, ink, and line opacity invert. Photo scrims (hero/card
gradients, modal close buttons sitting on top of images) intentionally
stay fixed-dark in both themes - same reason a photo viewer's own
controls don't reflow with the app's theme. */
[data-theme="light"]{
--clr-ink: #2B2019;
--clr-ink-soft: #6B5D4F;
--clr-bg: #FAF3E7;
--clr-bg-alt: #F2E6D3;
--clr-surface: #FFFFFF;
--clr-panel-dark: #1A0B05;
--clr-gray-light: #8A7F70;
--clr-line: rgba(43,32,20,0.14);
--clr-bg-warm: #F0E2CB;
--clr-bg-warm-2: #E8D6B8;
}
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
html, body{ margin:0; padding:0; overflow-x:hidden; }
body{
font-family:var(--font-body);
color:var(--clr-ink);
background:var(--clr-bg);
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* Faint film-grain overlay across the whole page - breaks up flat color
banding on the dark gradients, sits above everything (z-index:9999) but
pointer-events:none so it never blocks clicks. */
body::before{
content:"";
position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:9999; pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity:.04; mix-blend-mode:overlay;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--clr-terracotta); outline-offset:3px; }
.container{
width:100%;
max-width:var(--container);
margin:0 auto;
padding:0 24px;
}
.eyebrow{
font-family:var(--font-mono);
font-size:.72rem;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--clr-terracotta);
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:18px;
}
.eyebrow::before{
content:"";
width:28px; height:1px;
background:var(--clr-terracotta);
display:inline-block;
}
h1,h2,h3,h4{
font-family:var(--font-display);
/* Anton ships one weight (400, already very heavy/condensed by design) -
asking for 600 here would make the browser fake-bold it, blurring the
letterforms instead of using Anton's real weight. */
font-weight:400;
color:var(--clr-ink);
margin:0 0 .5em;
letter-spacing:0;
}
h2.section-title{
font-size:clamp(2.1rem, 4.6vw, 3.4rem);
line-height:1.05;
max-width:14ch;
}
p{ margin:0 0 1em; color:var(--clr-ink-soft); }
p.lead{ font-size:1.08rem; }
.btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:14px 28px;
border-radius:999px;
font-size:.92rem;
font-weight:600;
letter-spacing:.01em;
border:1px solid transparent;
transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn-primary{
background:var(--clr-terracotta);
color:#fff;
}
.btn-primary:hover{ background:var(--clr-terracotta-dark); transform:translateY(-2px); }
.btn-outline{
background:transparent;
border-color:currentColor;
color:var(--clr-ink);
}
.btn-outline:hover{ background:var(--clr-terracotta); color:#fff; border-color:var(--clr-terracotta); transform:translateY(-2px); }
.btn-outline.light{ color:#fff; }
.btn-outline.light:hover{ background:#fff; color:var(--clr-bg); }
.btn-sm{ padding:9px 18px; font-size:.82rem; gap:6px; }
/* Top announcement strip - sits above the navbar. Only shown while the page
is scrolled to the top; slides up and out once the user scrolls past the
navbar's is-scrolled threshold, and the navbar takes over row 0. */
.announce-bar{
position:fixed;
top:0; left:0; right:0;
z-index:1001;
height:var(--announce-h);
display:flex;
align-items:center;
justify-content:center;
background:var(--clr-panel-dark);
border-top:1px solid var(--clr-line-on-dark);
border-bottom:1px solid var(--clr-line-on-dark);
transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.announce-bar.is-scrolled{
transform:translateY(-100%);
opacity:0;
pointer-events:none;
}
.announce-bar p{
margin:0;
font-family:'Poppins', sans-serif;
font-weight:400;
font-size:.76rem;
letter-spacing:.01em;
color:var(--clr-ink-soft-on-dark);
text-align:center;
padding:0 16px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:100%;
}
.announce-bar a{
color:var(--clr-gold);
font-weight:500;
margin-left:6px;
text-decoration:underline;
text-underline-offset:2px;
}
.announce-bar a:hover{ color:#fff; }
.navbar{
position:fixed;
top:var(--announce-h); left:0; right:0;
z-index:1000;
height:var(--nav-h);
display:flex;
/* flex-start + an explicit top padding (instead of align-items:center)
keeps the gap above the logo as-is but lets the box's bottom edge sit
closer to the logo - trimmed on request, not flush against it. */
align-items:flex-start;
padding-top:10px;
background:rgba(36,17,9,0);
transition:background .4s var(--ease), box-shadow .4s var(--ease), height .3s var(--ease), top .3s var(--ease);
}
.navbar.is-scrolled{
top:0;
background:color-mix(in srgb, var(--clr-panel-dark) 92%, transparent);
backdrop-filter:blur(10px);
box-shadow:0 1px 0 var(--clr-line-on-dark);
height:64px;
}
.navbar .container{
display:flex;
align-items:center;
justify-content:space-between;
}
.nav-logo{ display:flex; align-items:center; gap:10px; }
/* Wordmark text removed - the logo image now carries the brand alone, so it
runs bigger than before to stay legible/prominent on its own. */
/* Brand mark ships as solid terracotta - brightness(0) flattens any opaque
pixel to black regardless of source hue, then invert(1) flips that to
pure white, so it reads clean against the dark hero/navbar without a
separate white logo asset. */
.nav-logo img{ height:56px; width:auto; transition:height .3s var(--ease), filter .3s var(--ease); filter:brightness(0) invert(1); }
.navbar.is-scrolled .nav-logo img{ height:44px; }
/* Light theme: logo renders terracotta instead of white (owner request
2026-08-19) - same brightness(0) flatten-to-silhouette trick as the dark
variant, then a filter chain tuned to land on --clr-terracotta (#C1502A)
instead of inverting to white. Applies regardless of scroll position -
terracotta reads fine both over the dark hero scrim (unscrolled) and the
light navbar chrome (scrolled, see below). */
[data-theme="light"] .nav-logo img{
filter: brightness(0) saturate(100%) invert(33%) sepia(84%) saturate(1274%) hue-rotate(346deg) brightness(94%) contrast(91%);
}
/* Light theme, scrolled state only: the navbar's solid chrome flips from
the fixed dark "anchor chrome" (used everywhere else - announce bar,
footer, mobile menu overlay - by design, see 00-base.css) to a light
surface, so menu text/icons need to flip from the fixed on-dark cream
tokens to the theme-aware --clr-ink (dark brown in light theme) to stay
legible. Scoped to .is-scrolled only - unscrolled navbar sits transparent
over the hero photo's fixed-dark scrim, where cream text is still correct
in both themes, so that state is untouched. */
[data-theme="light"] .navbar.is-scrolled{
background: color-mix(in srgb, var(--clr-surface) 94%, transparent);
box-shadow: 0 1px 0 var(--clr-line);
}
[data-theme="light"] .navbar.is-scrolled .nav-menu a,
[data-theme="light"] .navbar.is-scrolled .nav-icon-btn,
[data-theme="light"] .navbar.is-scrolled #theme-toggle .theme-icon-moon,
[data-theme="light"] .navbar.is-scrolled #theme-toggle .theme-icon-sun{
color: var(--clr-ink);
}
[data-theme="light"] .navbar.is-scrolled .nav-toggle span{
background: var(--clr-ink);
}
[data-theme="light"] .navbar.is-scrolled .nav-icon-btn:hover{
background: rgba(43,32,20,.08);
}
[data-theme="light"] .navbar.is-scrolled .nav-icon-btn[aria-expanded="true"]{
background: rgba(43,32,20,.1);
}
[data-theme="light"] .navbar.is-scrolled #theme-toggle{
/* Plain 10% fill + the standard hairline border read as almost invisible
against this navbar's near-white background - bumped both so the rail
itself stays legible, not just the thumb/icons. */
background: rgba(43,32,20,.16);
border-color: rgba(43,32,20,.4);
}
[data-theme="light"] .navbar.is-scrolled #theme-toggle:hover{
background: rgba(43,32,20,.22);
}
.nav-menu{ display:flex; align-items:center; gap:38px; }
.nav-menu a{
font-size:.9rem;
font-weight:500;
color:var(--clr-ink-on-dark);
position:relative;
padding:6px 0;
}
.nav-menu a::after{
content:"";
position:absolute; left:0; bottom:0;
width:0; height:1.5px;
background:var(--clr-terracotta);
transition:width .3s var(--ease);
}
.nav-menu a:hover::after,
.nav-menu a.active::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:22px; }
/* Right-side icon row: Search / Account / Shop - replaces the old text
"Shop Green Beans" button, minimal SVG icons instead. */
.nav-icons{ display:flex; align-items:center; gap:6px; }
.nav-icon-btn{
display:flex; align-items:center; justify-content:center;
width:38px; height:38px;
border-radius:50%;
background:none; border:none;
color:var(--clr-ink-on-dark);
cursor:pointer;
transition:background .25s var(--ease), color .25s var(--ease);
}
.nav-icon-btn svg{ width:19px; height:19px; }
.nav-icon-btn:hover{ background:rgba(244,234,221,.1); color:var(--clr-terracotta); }
.nav-icon-btn[aria-expanded="true"]{ background:rgba(244,234,221,.14); color:var(--clr-terracotta); }
/* Theme toggle - built as an on/off switch (track + sliding thumb) instead
of a plain icon button, so the state reads at a glance instead of relying
on remembering what the single icon means. The visible icon now reflects
the CURRENT theme (moon = dark active, sun = light active), not the
destination - clearer than the old "icon = what clicking does" pattern.
Thumb sits left in dark (default, no [data-theme] yet - matches the dark
default so there's no flash/jump on load), slides right in light. */
#theme-toggle{
position:relative;
width:50px; height:27px;
border-radius:999px;
background:rgba(244,234,221,.14);
border:1px solid var(--clr-line-on-dark);
flex-shrink:0;
padding:0;
}
#theme-toggle:hover{ background:rgba(244,234,221,.14); }
#theme-toggle::before{
content:"";
position:absolute;
top:2px; left:2px;
width:21px; height:21px;
border-radius:50%;
background:var(--clr-terracotta);
transition:transform .3s var(--ease);
}
[data-theme="light"] #theme-toggle::before{ transform:translateX(23px); }
#theme-toggle svg{
position:absolute; top:50%;
width:13px; height:13px;
transform:translateY(-50%);
color:var(--clr-ink-on-dark);
pointer-events:none;
}
#theme-toggle .theme-icon-moon{ left:6px; }
#theme-toggle .theme-icon-sun{ right:6px; display:none; }
[data-theme="light"] #theme-toggle .theme-icon-moon{ display:none; }
[data-theme="light"] #theme-toggle .theme-icon-sun{ display:block; }
/* Search panel - slides down from directly under the navbar, full width.
Combined Produk + Artikel search, see search.php + 06-header-search.js. */
.nav-search-panel{
position:fixed;
top:calc(var(--announce-h) + var(--nav-h));
left:0; right:0;
z-index:999;
background:color-mix(in srgb, var(--clr-panel-dark) 97%, transparent);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--clr-line-on-dark);
max-height:0;
overflow:hidden;
opacity:0;
transition:max-height .35s var(--ease), opacity .3s var(--ease);
}
/* Tall enough for the form row plus ~4 result rows before the internal
scroll (.nav-search-results) takes over - the panel itself only ever
animates this one max-height, never its actual content height. */
.nav-search-panel.is-open{ max-height:480px; opacity:1; }
.nav-search-form{
display:flex; align-items:center; gap:14px;
padding:22px 0;
border-bottom:1px solid var(--clr-line-on-dark);
}
.nav-search-form svg{ width:20px; height:20px; color:var(--clr-ink-soft-on-dark); flex-shrink:0; }
.nav-search-form input{
flex:1;
background:none; border:none; outline:none;
font-family:'Poppins', sans-serif;
font-size:1.1rem;
color:var(--clr-ink-on-dark);
}
.nav-search-form input::placeholder{ color:var(--clr-ink-soft-on-dark); opacity:.6; }
/* type="search" ships its own native clear-icon in Chrome/Safari/Edge - it
was rendering directly on top of our own .nav-search-close button right
next to it (two overlapping "x" glyphs). We already have a custom close
button, so the native one is redundant - hide it everywhere it can appear. */
.nav-search-form input[type="search"]::-webkit-search-cancel-button,
.nav-search-form input[type="search"]::-webkit-search-decoration{
-webkit-appearance:none;
appearance:none;
}
.nav-search-form input[type="search"]::-ms-clear{ display:none; width:0; height:0; }
.nav-search-close{
background:none; border:none; color:var(--clr-ink-soft-on-dark);
font-size:1.4rem; line-height:1; cursor:pointer; padding:4px 8px;
}
.nav-search-close:hover{ color:var(--clr-terracotta); }
.nav-search-results{
padding:14px 0;
font-size:.85rem;
color:var(--clr-ink-soft-on-dark);
max-height:400px;
overflow-y:auto;
}
.nav-search-results:empty{ padding:0; }
.nav-search-empty{ padding:8px 2px; }
.nav-search-list{ display:flex; flex-direction:column; gap:2px; }
.nav-search-item{
display:flex; align-items:center; gap:12px;
padding:8px;
border-radius:8px;
color:var(--clr-ink-on-dark);
transition:background .2s var(--ease);
}
.nav-search-item:hover{ background:rgba(244,234,221,.08); }
.nav-search-item img{
width:40px; height:40px;
border-radius:6px;
object-fit:cover;
flex-shrink:0;
}
.nav-search-item-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.nav-search-item-info strong{
font-size:.88rem; font-weight:600;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-search-item-info span{ font-size:.76rem; color:var(--clr-ink-soft-on-dark); }
@media (max-width:640px){
.nav-icon-btn{ width:34px; height:34px; }
.nav-icon-btn svg{ width:17px; height:17px; }
}
.nav-toggle{
display:none;
flex-direction:column;
gap:5px;
background:none; border:none; padding:8px;
outline:none;
}
.nav-toggle:focus, .nav-toggle:focus-visible{
outline:none;
}
.nav-toggle span{ width:22px; height:2px; background:var(--clr-ink-on-dark); border-radius:2px; }
.mobile-menu{
position:fixed; inset:0;
background:var(--clr-bg);
z-index:999;
display:flex; flex-direction:column;
align-items:flex-start;
/* flex-start, not center: centered content that's taller than the
container can overflow past its own top padding when combined with
overflow-y:auto (the overlap into the fixed navbar seen in testing).
flex-start + top padding guarantees the first item never starts above
that padding line, regardless of how many menu items there are. */
justify-content:flex-start;
gap:22px;
padding:calc(var(--announce-h) + var(--nav-h) + 24px) 32px 32px;
overflow-y:auto;
transform:translateY(-100%);
transition:transform .45s var(--ease);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--font-display); font-size:1.4rem; font-weight:400; }
.mobile-menu .btn{ margin-top:12px; font-size:0.85rem; padding:12px 24px; }
.hero{
position:relative;
min-height:100vh;
display:flex;
align-items:flex-end;
/* Guaranteed clearance under the fixed announce bar + navbar stacked above
it. Without this, hero copy that grows tall on wide screens - h1 is sized
off vw, so it can get very large on wide laptops even when the viewport
isn't short - can visually collide with the bars above it. Padding is
always respected by flex children regardless of how tall the content
block gets, so this holds at any viewport width/height combination. */
padding-top:calc(var(--announce-h) + var(--nav-h) + 24px);
/* Trimmed down from 140px - with the eyebrow tag and old "Shop Green Beans"
nav button gone, the whole content block is shorter now, so less bottom
cushion is needed to keep the two action buttons guaranteed above the
fold (no scroll) on both common desktop and mobile viewport heights. */
padding-bottom:56px;
overflow:hidden;
}
.hero-bg{
position:absolute; inset:0;
overflow:hidden;
}
/* Plain single-image hero (shop.php, journey.php -
anywhere with a static `![]()
` right inside .hero-bg
instead of the .hero-slide wrapper below). The direct-child selector
keeps this from ever matching images nested inside .hero-slide. */
.hero-bg > img{
width:100%; height:100%;
object-fit:cover;
object-position:center 32%;
transform:scale(1.06);
animation:heroZoom 16s ease-out forwards;
}
/* Auto-slider (index.php only, for now): each slide is a full-bleed
absolutely-positioned layer, stacked on top of each other. Crossfade +
Ken Burns zoom are both driven by GSAP (assets/js/main_1.js, heroSlider)
purely through opacity/transform - never width/height/top/left - so the
browser only ever has to composite, not reflow, on every animated frame. */
.hero-slide{
position:absolute; inset:0;
opacity:0;
}
.hero-slide.is-active{ opacity:1; z-index:1; }
.hero-slide img{
width:100%; height:100%;
object-fit:cover;
object-position:center 32%;
transform:scale(1.06);
will-change:transform;
}
/* Used by the plain single-image .hero-bg > img rule above. The GSAP
slider drives its own zoom per-slide in JS instead of this keyframe. */
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero::before{
content:"";
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(20,15,10,.4) 0%, rgba(20,15,10,.25) 35%, rgba(20,15,10,.92) 100%);
z-index:1;
}
.hero .container{ position:relative; z-index:2; }
.hero-tag{
font-family:var(--font-mono);
font-size:.78rem;
letter-spacing:.22em;
text-transform:uppercase;
color:#EADFC9;
display:flex; align-items:center; gap:12px;
margin-bottom:28px;
}
.hero-tag::before{ content:""; width:36px; height:1px; background:var(--clr-gold); }
/* Shared column width for the title + description, so the description box
never runs wider than the title above it - also keeps the whole copy
group hugging the left edge instead of spreading toward the middle of
the frame, where the hero photos' subjects tend to sit. */
.hero .container{ --hero-copy-width: 620px; }
.hero h1{
color:#fff;
/* Trimmed down from clamp(3rem, 8.5vw, 7.2rem) - the old max size ran
text straight across the subjects in the hero photo on wide screens. */
font-size:clamp(2.4rem, 5.5vw, 4.8rem);
line-height:1.04;
letter-spacing:-.02em;
max-width:var(--hero-copy-width);
/* Anton only ships weight 400 - see the h1-h4 rule near the top of this
file for the full explanation. This selector is more specific than that
one (.hero h1 beats the bare h1,h2,h3,h4 list), so it needs its own
explicit 400 or it'll ask the browser to fake-bold an already-bold font. */
font-weight:400;
}
.hero h1 em{ font-style:italic; color:#EFC182; font-weight:400; }
.hero p{
color:#E9E1D2;
/* Matches .hero h1's max-width exactly (both read off the same
--hero-copy-width var) instead of the old independent 44ch, which ran
wider than the title and back under the photo's subjects. */
max-width:var(--hero-copy-width);
font-size:1.05rem;
margin-top:22px;
}
.hero-actions{
display:flex; gap:16px; flex-wrap:wrap;
margin-top:32px;
}
/* Short viewports (landscape phones, a resized/short browser window) - 100vh
plus this much hero copy can overflow past the top of the section and
collide with the fixed navbar above it. Shrink everything to fit instead
of trusting min-height:100vh to always have enough room. */
@media (max-height: 480px){
.hero{ min-height:auto; padding-top:calc(var(--announce-h) + var(--nav-h) + 20px); padding-bottom:24px; }
.hero-tag{ margin-bottom:10px; }
.hero h1{ font-size:1.5rem; line-height:1.08; }
.hero p{ font-size:.85rem; margin-top:10px; }
.hero-actions{ margin-top:14px; gap:10px; }
.hero-actions .btn{ padding:9px 18px; font-size:.78rem; }
.hero-scroll{ display:none; }
}
@media (max-width: 640px){
.hero p{
font-size:1rem;
margin-top:16px;
/* Truncation removed on request - description reads in full now, no
-webkit-line-clamp. .hero{align-items} below still bottom-anchors the
whole group instead of centering, which is what actually protects
the action buttons from the fold now that the text can run long. */
}
.hero-actions{ margin-top:20px; }
}
/* Marquee ticker - a thin scrolling strip that bridges the hero into the
Story section, the first "this is not the same site" signal past the fold. */
.marquee{
position:relative;
overflow:hidden;
background:var(--clr-panel-dark);
border-top:1px solid var(--clr-line-on-dark);
border-bottom:1px solid var(--clr-line-on-dark);
padding:18px 0;
}
.marquee-track{
display:flex;
width:max-content;
animation:marqueeScroll 32s linear infinite;
}
.marquee-track span{
display:inline-flex;
align-items:center;
gap:18px;
font-family:var(--font-mono);
font-size:.82rem;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--clr-ink-soft-on-dark);
padding:0 28px;
white-space:nowrap;
}
.marquee-track span::after{ content:"\2022"; color:var(--clr-terracotta); margin-left:18px; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
.marquee-track{ animation:none; }
}
.hero-scroll{
position:absolute; bottom:28px; left:0; right:0;
z-index:2;
display:flex; justify-content:center;
}
.hero-scroll span{
width:1px; height:52px;
background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));
display:block;
animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
/* Two very soft radial glows (terracotta, gold) instead of a flat fill - just
enough warmth to keep a long scroll from feeling like one dark wall, low
enough opacity that nothing glares or fights the content on top of it. */
.section{
padding:120px 0;
position:relative;
/* --glow1-x/y/--glow2-x/y default to the original fixed positions; GSAP
(assets/js/animations.js) tweens them slowly for a living-atmosphere
effect - falls back to this static state with no JS/reduced-motion. */
background:
radial-gradient(ellipse 900px 500px at var(--glow1-x, 12%) var(--glow1-y, -5%), rgba(193,80,42,.035), transparent 60%),
radial-gradient(ellipse 800px 550px at var(--glow2-x, 88%) var(--glow2-y, 105%), rgba(217,164,65,.025), transparent 60%),
var(--clr-bg);
}
/* Alternating sections get an actual gradient band (dark -> warm brown ->
dark) through the middle, so the rhythm between .section/.section-alt
reads as light-dark variation while scrolling, not just a color swap. */
.section-alt{
background:
radial-gradient(ellipse 700px 460px at var(--glow1-x, 85%) var(--glow1-y, -5%), rgba(193,80,42,.03), transparent 60%),
radial-gradient(ellipse 650px 480px at var(--glow2-x, 15%) var(--glow2-y, 105%), rgba(217,164,65,.02), transparent 60%),
linear-gradient(180deg, var(--clr-bg-alt) 0%, var(--clr-bg-warm) 50%, var(--clr-bg-alt) 100%);
}
.section-head{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:40px;
margin-bottom:64px;
flex-wrap:wrap;
}
.section-head p{ max-width:38ch; margin:0; }
.story-grid{
position:relative;
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:72px;
align-items:center;
}
/* Giant faint outline word behind the section - the kind of editorial
signature move that makes a section unmistakably "not a generic template." */
.story-bgword{
position:absolute;
top:-64px; left:50%;
transform:translateX(-50%);
font-family:var(--font-display);
font-size:clamp(4.5rem, 15vw, 12rem);
font-weight:400;
color:transparent;
-webkit-text-stroke:1px var(--clr-line);
white-space:nowrap;
z-index:0;
pointer-events:none;
user-select:none;
line-height:1;
}
.story-media, .story-copy{ position:relative; z-index:1; }
.story-media{ position:relative; overflow:hidden; border-radius:var(--radius-md); }
.story-media img{
border-radius:var(--radius-md);
width:100%;
aspect-ratio:4/5;
object-fit:cover;
filter:sepia(.14) saturate(1.1) contrast(1.05);
}
.story-media .story-badge{
position:absolute;
bottom:-28px; left:-28px;
background:var(--clr-terracotta);
color:#fff;
padding:22px 26px;
border-radius:var(--radius-md);
max-width:220px;
box-shadow:0 20px 40px -12px rgba(154,61,31,.45);
}
.story-badge strong{ display:block; font-family:var(--font-display); font-weight:400; font-size:2.1rem; line-height:1; }
.story-badge span{ font-size:.78rem; opacity:.85; letter-spacing:.02em; }
.story-copy p{ font-size:1.02rem; }
/* Stat pair for the plantation/harvest facts, sits under the Our Process
section-head rather than bundled into Our Story. */
.process-stats{
display:grid;
grid-template-columns:repeat(2,minmax(180px,240px));
gap:32px;
margin:0 0 48px;
}
.process-stats div strong{
display:block;
font-family:var(--font-display);
font-weight:400;
font-size:1.7rem;
color:var(--clr-terracotta);
}
.process-stats div span{ font-size:.82rem; color:var(--clr-ink-soft); }
/* Single café-location stat, sits with the address block in Contact. */
.location-stat{ margin-bottom:18px; }
.location-stat strong{
display:block;
font-family:var(--font-display);
font-weight:400;
font-size:1.4rem;
color:var(--clr-terracotta);
}
.location-stat span{ font-size:.82rem; color:var(--clr-ink-soft); }
/* ---------- Journey - a set of standalone photo stories, not a numbered
process. ---------- */
.journey{ padding-top:0; }
.journey-card{
position:relative;
display:flex;
flex-direction:column;
border-radius:var(--radius-md);
overflow:hidden;
outline:none;
background:var(--clr-surface);
}
/* Arrows hidden on request (2026-08-13) - with only 4 process cards, they
all already fit on screen with nothing to scroll to, so the arrows had
nothing to do. Markup/JS left untouched (still float over the left/right
edges of .journey-scroll when re-enabled) - flip this back to
`display:contents` once enough cards are added that scrolling is needed
again. */
.journey-nav{ display:none; }
.journey-arrow{
position:absolute;
top:calc(50% + 18px);
transform:translateY(-50%);
z-index:3;
width:44px; height:44px; border-radius:50%;
background:rgba(26,11,5,.65);
backdrop-filter:blur(3px);
border:1px solid rgba(244,234,221,.25);
display:flex; align-items:center; justify-content:center;
font-size:1.3rem; line-height:1; color:var(--clr-ink-on-dark);
cursor:pointer;
box-shadow:0 6px 18px rgba(0,0,0,.35);
transition:background .3s, border-color .3s;
}
.journey-arrow.prev{ left:8px; }
.journey-arrow.next{ right:8px; }
.journey-arrow:hover{ background:var(--clr-terracotta); border-color:var(--clr-terracotta); color:#fff; }
/* Story cards (scrolling row): text panel above, photo below - same structure
as the reference layout, just recolored to the site's dark palette instead
of copying its bright per-category colors. */
.journey-scroll{ position:relative; padding-bottom:100px; }
.journey-cards{
display:flex;
gap:18px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-padding-inline:50%;
padding:4px 4px 8px;
cursor:grab;
scrollbar-width:none;
-ms-overflow-style:none;
}
.journey-cards::-webkit-scrollbar{ display:none; }
.journey-cards.is-dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.journey-cards .journey-card{
flex:0 0 240px;
scroll-snap-align:center;
}
.journey-card-info{ padding:18px 18px 8px; }
.journey-card-info h3{ font-family:var(--font-display); font-size:1.1rem; margin:0 0 8px; color:var(--clr-ink); }
.journey-card-desc{
font-size:.85rem;
line-height:1.5;
color:var(--clr-ink-soft);
margin:0;
}
/* ~20% taller than a plain 4:3 photo, so the image fills more of the card
underneath the (now always-fully-visible, variable-length) text above it. */
.journey-card-media{ position:relative; aspect-ratio:10/9; margin-top:auto; overflow:hidden; }
.journey-card-media img{
width:100%; height:100%;
object-fit:cover;
/* Ties photos shot in very different light (misty highlands, tin-roof
sheds, warm indoor bokeh) into one consistent, slightly warm palette. */
filter:sepia(.14) saturate(1.1) contrast(1.05);
transition:transform .6s var(--ease);
/* Browsers natively let you drag an ![]()
(ghost-drag to desktop/another
tab, cursor shows a "no drop" badge) - that native drag was hijacking
our custom click-and-drag scroll whenever the pointer started on top of
a photo instead of the card's empty space. Disabling native image drag
leaves our JS drag-to-scroll (main_1.js) as the only thing responding. */
-webkit-user-drag:none;
user-select:none;
will-change:transform;
}
.journey-card:hover .journey-card-media img{ transform:scale(1.08); }
/* Steps added before their real photo is ready (e.g. via "Manage Process
Steps") get a labeled placeholder instead of a missing/broken image -
same treatment as .location-card-media--placeholder. */
.journey-card-media--placeholder{
width:100%; height:100%;
display:flex; align-items:center; justify-content:center;
text-align:center;
padding:20px;
background:var(--clr-bg-alt);
}
.journey-card-media--placeholder span{
font-family:var(--font-mono);
font-size:.72rem;
letter-spacing:.02em;
color:var(--clr-ink-soft);
}
/* ---------- Portal Card teaser (2x2): homepage-only preview for content
that would otherwise grow unbounded (Articles now, Activities later once
its nav tab comes back). Just the 2 latest content tiles, side by side -
the homepage itself never grows past these 2 no matter how much content
exists in the DB. "Explore The Journey" sits below as its own centered
link (.portal-teaser-cta), not a third grid tile. Sized at 60% of the
original 260px tile height. */
.portal-teaser{
display:grid;
grid-template-columns:repeat(2, 1fr);
grid-template-rows:156px;
gap:20px;
}
.portal-teaser-cta{
display:flex;
justify-content:center;
margin-top:24px;
}
.portal-card{
position:relative;
display:block;
border-radius:var(--radius-md);
overflow:hidden;
border:1px solid var(--clr-line);
background:var(--clr-surface);
}
.portal-card img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover;
transition:transform .5s var(--ease);
}
.portal-card:hover img{ transform:scale(1.06); }
.portal-card::after{
content:"";
position:absolute; inset:0;
background:linear-gradient(to top, rgba(26,11,5,.85), rgba(26,11,5,.05) 55%);
}
.portal-card-info{ position:absolute; left:0; right:0; bottom:0; padding:18px; z-index:1; }
.portal-card-info .portal-cat{
font-family:var(--font-mono); font-size:.68rem;
text-transform:uppercase; letter-spacing:.06em;
color:var(--clr-gold); display:block; margin-bottom:4px;
}
.portal-card-info h4{ font-size:1.05rem; margin:0; color:var(--clr-ink-on-dark); line-height:1.3; }
/* Solid terracotta, sized to its own text (not a big decorative shape) -
now sits in .portal-teaser-cta below the 2 tiles instead of occupying a
grid tile of its own. Matches .btn-primary's color/hover exactly (was a
translucent frosted-glass pill, read as too pale next to the solid
"Explore All Coffees" button above it - owner request 2026-08-19). */
.portal-cta-label{
position:relative;
display:inline-flex; align-items:center; gap:8px;
padding:14px 30px;
white-space:nowrap;
border-radius:999px;
font-family:var(--font-display);
font-size:1.05rem; font-weight:400;
color:#fff;
background:var(--clr-terracotta);
border:1px solid transparent;
transition:transform .3s var(--ease), background .3s var(--ease);
}
.portal-cta-label:hover{
background:var(--clr-terracotta-dark);
transform:translateY(-2px);
}
/* ---------- Journey: asymmetric bento grid +