Add dedicated process page with editorial photography
This commit is contained in:
Claude
+725
@@ -0,0 +1,725 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="From volcanic highland farms in Antigua, Guatemala, to small-batch roasting in Southern California. The four-step process behind every Volcán Antigua bag.">
|
||||
<title>Our Process — Volcán Antigua Roasters</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400&family=Manrope:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--logo-img: url("assets/logo-main.webp");
|
||||
--bg: #000000;
|
||||
--bg-2: #141414;
|
||||
--bg-3: #1c1c1c;
|
||||
--gold: #c8a96a;
|
||||
--gold-soft: #a88a4d;
|
||||
--gold-bright: #d9bd82;
|
||||
--cream: #f5f1e8;
|
||||
--cream-dim: #d9d5cc;
|
||||
--line: rgba(200,169,106,0.18);
|
||||
--display: 'Playfair Display', Georgia, serif;
|
||||
--sans: 'Manrope', system-ui, sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--cream);
|
||||
font-family: var(--sans);
|
||||
font-weight: 300;
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0.01em;
|
||||
overflow-x: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed; inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
|
||||
opacity: 0.04;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
img, svg { max-width: 100%; display: block; }
|
||||
a { color: inherit; text-decoration: none; transition: color 0.3s; }
|
||||
a:hover { color: var(--gold); }
|
||||
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
|
||||
|
||||
.eyebrow {
|
||||
font-family: var(--sans);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
}
|
||||
.micro {
|
||||
font-family: var(--sans);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.32em;
|
||||
text-transform: uppercase;
|
||||
color: var(--cream-dim);
|
||||
}
|
||||
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
|
||||
@media (max-width: 600px) { .container { padding: 0 22px; } }
|
||||
|
||||
/* === NAV === */
|
||||
.nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
padding: 18px 32px;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
background: linear-gradient(to bottom, rgba(13,13,13,0.95), rgba(13,13,13,0));
|
||||
transition: background 0.4s;
|
||||
}
|
||||
.nav.scrolled {
|
||||
background: rgba(13,13,13,0.97);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.nav-icon {
|
||||
width: 30px;
|
||||
height: 26px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.nav-links { display: flex; gap: 28px; }
|
||||
.nav-links a {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--cream-dim);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.nav-links a.active { color: var(--gold); }
|
||||
.nav-links a:hover { color: var(--gold); }
|
||||
@media (max-width: 768px) { .nav-links { display: none; } }
|
||||
|
||||
/* === BUTTONS === */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 12px;
|
||||
padding: 17px 30px;
|
||||
font-family: var(--sans);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.28em;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid var(--gold);
|
||||
background: var(--gold);
|
||||
color: var(--bg);
|
||||
transition: all 0.4s cubic-bezier(0.2,0.8,0.2,1);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:hover {
|
||||
background: var(--gold-bright);
|
||||
border-color: var(--gold-bright);
|
||||
color: var(--bg);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--cream);
|
||||
}
|
||||
.btn-ghost:hover {
|
||||
background: var(--gold);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
/* === HERO === */
|
||||
.process-hero {
|
||||
position: relative;
|
||||
min-height: 92vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
padding: 0 0 80px;
|
||||
}
|
||||
.process-hero-img {
|
||||
position: absolute; inset: 0;
|
||||
background-image: url('https://images.pexels.com/photos/11534623/pexels-photo-11534623.jpeg?auto=compress&cs=tinysrgb&w=2000');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
z-index: 0;
|
||||
}
|
||||
.process-hero::after {
|
||||
content: '';
|
||||
position: absolute; inset: 0;
|
||||
background:
|
||||
linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 35%, rgba(0,0,0,0.95) 100%),
|
||||
radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0,0,0,0.6), transparent);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.process-hero .container { position: relative; z-index: 2; }
|
||||
.process-hero .eyebrow {
|
||||
display: inline-block;
|
||||
margin-bottom: 22px;
|
||||
animation: fadeInUp 1.2s 0.1s both ease-out;
|
||||
}
|
||||
.process-hero h1 {
|
||||
font-family: var(--display);
|
||||
font-weight: 400;
|
||||
font-size: clamp(2.4rem, 6vw, 4.8rem);
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.015em;
|
||||
color: var(--cream);
|
||||
max-width: 880px;
|
||||
margin-bottom: 28px;
|
||||
animation: fadeInUp 1.2s 0.3s both ease-out;
|
||||
}
|
||||
.process-hero h1 em {
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: var(--gold);
|
||||
}
|
||||
.process-hero-sub {
|
||||
font-size: 1.05rem;
|
||||
color: var(--cream-dim);
|
||||
max-width: 580px;
|
||||
line-height: 1.7;
|
||||
animation: fadeInUp 1.2s 0.5s both ease-out;
|
||||
}
|
||||
.process-hero-credit {
|
||||
position: absolute;
|
||||
bottom: 18px; right: 28px;
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(245,241,232,0.35);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* === INTRO === */
|
||||
.intro {
|
||||
padding: 120px 0 100px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.intro-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.4fr;
|
||||
gap: 80px;
|
||||
align-items: start;
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.intro-grid { grid-template-columns: 1fr; gap: 36px; }
|
||||
.intro { padding: 90px 0 70px; }
|
||||
}
|
||||
.intro-eyebrow h2 {
|
||||
font-family: var(--display);
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
|
||||
line-height: 1.15;
|
||||
color: var(--cream);
|
||||
margin-top: 16px;
|
||||
}
|
||||
.intro-body p {
|
||||
font-size: 1.02rem;
|
||||
line-height: 1.85;
|
||||
color: var(--cream-dim);
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.intro-body p:last-child { margin-bottom: 0; }
|
||||
.intro-body strong {
|
||||
color: var(--cream);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* === STEP CARDS === */
|
||||
.steps-wrap {
|
||||
padding: 100px 0 140px;
|
||||
background: var(--bg);
|
||||
}
|
||||
.steps-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 28px;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media (max-width: 800px) { .steps-grid { grid-template-columns: 1fr; } }
|
||||
|
||||
.step-card {
|
||||
position: relative;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid rgba(200,169,106,0.08);
|
||||
overflow: hidden;
|
||||
transition: border-color 0.4s, transform 0.4s;
|
||||
}
|
||||
.step-card:hover {
|
||||
border-color: rgba(200,169,106,0.24);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.step-img {
|
||||
position: relative;
|
||||
aspect-ratio: 16 / 10;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.step-img::after {
|
||||
content: '';
|
||||
position: absolute; inset: 0;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%);
|
||||
}
|
||||
.step-num {
|
||||
position: absolute;
|
||||
top: 18px; left: 22px;
|
||||
z-index: 2;
|
||||
font-family: var(--display);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: 0.95rem;
|
||||
color: var(--gold);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.step-img-1 { background-image: url('https://images.pexels.com/photos/7125541/pexels-photo-7125541.jpeg?auto=compress&cs=tinysrgb&w=1400'); }
|
||||
.step-img-2 { background-image: url('https://images.pexels.com/photos/894695/pexels-photo-894695.jpeg?auto=compress&cs=tinysrgb&w=1400'); }
|
||||
.step-img-3 { background-image: url('https://images.pexels.com/photos/773958/pexels-photo-773958.jpeg?auto=compress&cs=tinysrgb&w=1400'); }
|
||||
.step-img-4 { background-image: url('https://images.pexels.com/photos/302899/pexels-photo-302899.jpeg?auto=compress&cs=tinysrgb&w=1400'); }
|
||||
|
||||
.step-body {
|
||||
padding: 36px 32px 40px;
|
||||
}
|
||||
@media (max-width: 600px) { .step-body { padding: 28px 24px 32px; } }
|
||||
|
||||
.step-eyebrow {
|
||||
font-family: var(--sans);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.36em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.step-card h3 {
|
||||
font-family: var(--display);
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.55rem, 2.4vw, 1.85rem);
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--cream);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.step-card h3 em {
|
||||
font-style: italic;
|
||||
color: var(--gold);
|
||||
}
|
||||
.step-card p {
|
||||
font-size: 0.96rem;
|
||||
line-height: 1.8;
|
||||
color: var(--cream-dim);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.step-card p:last-child { margin-bottom: 0; }
|
||||
|
||||
.step-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px 22px;
|
||||
margin-top: 24px;
|
||||
padding-top: 22px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.step-meta-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.step-meta-key {
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.28em;
|
||||
text-transform: uppercase;
|
||||
color: var(--cream-dim);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.step-meta-val {
|
||||
font-family: var(--display);
|
||||
font-style: italic;
|
||||
font-size: 0.95rem;
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
/* === HONEST NOTE === */
|
||||
.honest {
|
||||
padding: 100px 0;
|
||||
background: var(--bg-2);
|
||||
border-top: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.honest-inner {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
.honest h3 {
|
||||
font-family: var(--display);
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.6rem, 3vw, 2.1rem);
|
||||
line-height: 1.2;
|
||||
color: var(--cream);
|
||||
margin: 14px 0 24px;
|
||||
}
|
||||
.honest h3 em {
|
||||
font-style: italic;
|
||||
color: var(--gold);
|
||||
}
|
||||
.honest p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.85;
|
||||
color: var(--cream-dim);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.honest p:last-child { margin-bottom: 0; }
|
||||
|
||||
/* === CTA === */
|
||||
.cta {
|
||||
padding: 130px 0 140px;
|
||||
text-align: center;
|
||||
}
|
||||
.cta h2 {
|
||||
font-family: var(--display);
|
||||
font-weight: 400;
|
||||
font-size: clamp(2.2rem, 5vw, 3.6rem);
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.015em;
|
||||
color: var(--cream);
|
||||
margin: 18px 0 22px;
|
||||
}
|
||||
.cta h2 em {
|
||||
font-style: italic;
|
||||
color: var(--gold);
|
||||
}
|
||||
.cta p {
|
||||
font-size: 1.05rem;
|
||||
color: var(--cream-dim);
|
||||
max-width: 540px;
|
||||
margin: 0 auto 40px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.cta-row {
|
||||
display: flex; gap: 16px; flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* === FOOTER === */
|
||||
footer {
|
||||
background: var(--bg-2);
|
||||
padding: 80px 0 40px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||||
gap: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; gap: 40px; } }
|
||||
.footer-brand h3 {
|
||||
font-family: var(--display);
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 14px;
|
||||
color: var(--cream);
|
||||
}
|
||||
.footer-brand p {
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.7;
|
||||
color: var(--cream-dim);
|
||||
max-width: 360px;
|
||||
}
|
||||
.footer-col h5 {
|
||||
font-family: var(--sans);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.28em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.footer-col ul { list-style: none; }
|
||||
.footer-col li { margin-bottom: 10px; }
|
||||
.footer-col a {
|
||||
font-size: 0.88rem;
|
||||
color: var(--cream-dim);
|
||||
}
|
||||
.footer-bot {
|
||||
padding-top: 32px;
|
||||
border-top: 1px solid var(--line);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
.footer-bot p {
|
||||
font-size: 0.78rem;
|
||||
color: var(--cream-dim);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* === REVEAL === */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
transition: opacity 0.9s ease, transform 0.9s ease;
|
||||
}
|
||||
.reveal.in { opacity: 1; transform: translateY(0); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav" id="nav">
|
||||
<a href="index.html"><img src="assets/logo-nav.webp" alt="Volcán Antigua" class="nav-icon"></a>
|
||||
<div class="nav-links">
|
||||
<a href="index.html#story">Origin</a>
|
||||
<a href="index.html#products">Coffee</a>
|
||||
<a href="index.html#subscribe">Subscribe</a>
|
||||
<a href="process.html" class="active">Process</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="process-hero">
|
||||
<div class="process-hero-img"></div>
|
||||
<div class="container">
|
||||
<span class="eyebrow">The Process</span>
|
||||
<h1>Volcanic soil to your counter — <em>nothing in between we can't name.</em></h1>
|
||||
<p class="process-hero-sub">Antigua, Guatemala sits in the shadow of three active volcanoes. The mineral-rich soil and 1,500-meter elevation produce some of the densest, most complex Arabica beans in the world. This is how we get them from there to you.</p>
|
||||
</div>
|
||||
<span class="process-hero-credit">Volcán de Fuego · Antigua, Guatemala</span>
|
||||
</section>
|
||||
|
||||
<!-- INTRO -->
|
||||
<section class="intro">
|
||||
<div class="container">
|
||||
<div class="intro-grid">
|
||||
<div class="intro-eyebrow reveal">
|
||||
<span class="eyebrow">A short version</span>
|
||||
<h2>Four steps. Zero brokers. No mystery beans.</h2>
|
||||
</div>
|
||||
<div class="intro-body reveal">
|
||||
<p>Most specialty coffee passes through five or six middlemen between the farm and your kitchen. By the time it lands in your bag, the people who grew it are anonymous, the lot is blended, and the roast date is anyone's guess.</p>
|
||||
<p>We do this differently. <strong>We buy green beans direct from a single farm in Antigua, Guatemala.</strong> We roast them in small batches in Southern California. We ship within 48 hours. That's the whole supply chain.</p>
|
||||
<p>What follows is the actual four-step process behind every bag we sell — written honestly, including the parts that aren't yet finished.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- STEPS -->
|
||||
<section class="steps-wrap">
|
||||
<div class="container">
|
||||
<div class="steps-grid">
|
||||
|
||||
<!-- STEP 01 — SOURCE -->
|
||||
<article class="step-card reveal">
|
||||
<div class="step-img step-img-1">
|
||||
<span class="step-num">/ 01</span>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
<p class="step-eyebrow">Step 01</p>
|
||||
<h3>Sourced <em>direct from Antigua.</em></h3>
|
||||
<p>Our green beans come from a working coffee plantation in the Antigua growing region — volcanic soil, roughly 1,500m elevation, shade-grown under a canopy of native trees. The cherries are hand-picked at peak ripeness and wet-processed on the farm.</p>
|
||||
<p>We buy at the green-bean level, wholesale. No brokers, no aggregators, no "blended Central American" mystery. One region, one farm, one harvest.</p>
|
||||
<div class="step-meta">
|
||||
<div class="step-meta-item">
|
||||
<span class="step-meta-key">Region</span>
|
||||
<span class="step-meta-val">Antigua, Guatemala</span>
|
||||
</div>
|
||||
<div class="step-meta-item">
|
||||
<span class="step-meta-key">Elevation</span>
|
||||
<span class="step-meta-val">~1,500m / 5,000ft</span>
|
||||
</div>
|
||||
<div class="step-meta-item">
|
||||
<span class="step-meta-key">Variety</span>
|
||||
<span class="step-meta-val">Arabica · SHB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- STEP 02 — ROAST -->
|
||||
<article class="step-card reveal">
|
||||
<div class="step-img step-img-2">
|
||||
<span class="step-num">/ 02</span>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
<p class="step-eyebrow">Step 02</p>
|
||||
<h3>Roasted <em>by hand, in small batches.</em></h3>
|
||||
<p>Green beans arrive at our roastery in Rancho Palos Verdes, California. We roast in 1-pound batches on a drum roaster — small enough to hear the first crack, watch the color change, and pull the moment we hit profile.</p>
|
||||
<p>Three roast levels: <strong>Bright</strong> (lighter, fruit-forward), <strong>Classic</strong> (medium, balanced), and <strong>Bold</strong> (full-city, deeper body). We taste every batch before it leaves the roastery.</p>
|
||||
<div class="step-meta">
|
||||
<div class="step-meta-item">
|
||||
<span class="step-meta-key">Batch Size</span>
|
||||
<span class="step-meta-val">1 lb / drum</span>
|
||||
</div>
|
||||
<div class="step-meta-item">
|
||||
<span class="step-meta-key">Profiles</span>
|
||||
<span class="step-meta-val">Bright · Classic · Bold</span>
|
||||
</div>
|
||||
<div class="step-meta-item">
|
||||
<span class="step-meta-key">Roasted In</span>
|
||||
<span class="step-meta-val">Southern California</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- STEP 03 — SEAL -->
|
||||
<article class="step-card reveal">
|
||||
<div class="step-img step-img-3">
|
||||
<span class="step-num">/ 03</span>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
<p class="step-eyebrow">Step 03</p>
|
||||
<h3>Sealed <em>the same day.</em></h3>
|
||||
<p>Roasted beans rest briefly to off-gas, then go into a matte-black pouch with a one-way degassing valve. The valve lets CO₂ escape; nothing gets back in. No oxygen. No moisture. No light.</p>
|
||||
<p>Each bag is hand-weighed to 12 oz, sealed, dated, and labeled with the roast profile and origin. The flavor you taste is the flavor we tasted at the roastery — minus the time it spent reaching you.</p>
|
||||
<div class="step-meta">
|
||||
<div class="step-meta-item">
|
||||
<span class="step-meta-key">Bag Size</span>
|
||||
<span class="step-meta-val">12 oz · 340g</span>
|
||||
</div>
|
||||
<div class="step-meta-item">
|
||||
<span class="step-meta-key">Valve</span>
|
||||
<span class="step-meta-val">One-way · degassing</span>
|
||||
</div>
|
||||
<div class="step-meta-item">
|
||||
<span class="step-meta-key">Roast Date</span>
|
||||
<span class="step-meta-val">Printed on every bag</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- STEP 04 — SHIP -->
|
||||
<article class="step-card reveal">
|
||||
<div class="step-img step-img-4">
|
||||
<span class="step-num">/ 04</span>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
<p class="step-eyebrow">Step 04</p>
|
||||
<h3>Shipped <em>within 48 hours.</em></h3>
|
||||
<p>From sealed bag to out-the-door, less than two days. We ship USPS Ground Advantage and Priority — most US orders arrive within 3 to 5 business days. By the time you brew, the coffee is typically less than a week off the roaster.</p>
|
||||
<p>Subscribers get free shipping. Every bag arrives with the roast date on the front, the origin on the back, and a short note about the lot. Coffee was never meant to sit in a warehouse for six months.</p>
|
||||
<div class="step-meta">
|
||||
<div class="step-meta-item">
|
||||
<span class="step-meta-key">Lead Time</span>
|
||||
<span class="step-meta-val">< 48 hrs · roast to ship</span>
|
||||
</div>
|
||||
<div class="step-meta-item">
|
||||
<span class="step-meta-key">Carrier</span>
|
||||
<span class="step-meta-val">USPS · Domestic</span>
|
||||
</div>
|
||||
<div class="step-meta-item">
|
||||
<span class="step-meta-key">Subscribers</span>
|
||||
<span class="step-meta-val">Free shipping</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HONEST NOTE -->
|
||||
<section class="honest">
|
||||
<div class="container">
|
||||
<div class="honest-inner reveal">
|
||||
<span class="eyebrow">A note on this page</span>
|
||||
<h3>What's <em>real</em> right now, and what's coming.</h3>
|
||||
<p>We launched this brand in 2026, so we're being upfront about where we are. The green beans, the roast profiles, the bag spec, the 48-hour ship window — all real, all current.</p>
|
||||
<p>The photography on this page is editorial stock, not pictures of our specific farm. As we build deeper relationships with our producers and visit the farm in person, we'll replace these images with the real thing — the actual rows of cherries we sourced from, the actual hands that picked them, the actual roastery in Rancho Palos Verdes.</p>
|
||||
<p>If you want to see what we're working on next — micro-lot single-farm releases, producer profiles, harvest reports — subscribe below. We'll send you what we know, when we know it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<span class="eyebrow">Try it once</span>
|
||||
<h2>The whole process — <em>in your cup, by next week.</em></h2>
|
||||
<p>First-time subscribers get 20% off their first bag. Pick a roast, pick a frequency. Skip, swap, or cancel anytime.</p>
|
||||
<div class="cta-row">
|
||||
<a href="index.html#subscribe" class="btn">Start Your Subscription →</a>
|
||||
<a href="index.html#products" class="btn btn-ghost">See the Coffee</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
<h3>Volcán Antigua Roasters</h3>
|
||||
<p>Single-origin coffee from Antigua, Guatemala. Roasted in small batches in Southern California. Built by people who actually go to the farms.</p>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>Coffee</h5>
|
||||
<ul>
|
||||
<li><a href="index.html#products">Antigua Classic</a></li>
|
||||
<li><a href="index.html#products">Antigua Bright</a></li>
|
||||
<li><a href="index.html#products">Antigua Bold</a></li>
|
||||
<li><a href="index.html#subscribe">Reserve Lots</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>Brand</h5>
|
||||
<ul>
|
||||
<li><a href="index.html#story">Origin</a></li>
|
||||
<li><a href="process.html">Our Process</a></li>
|
||||
<li><a href="index.html#subscribe">Subscribe</a></li>
|
||||
<li><a href="#">Wholesale</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>Connect</h5>
|
||||
<ul>
|
||||
<li><a href="#">Instagram</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li><a href="#">Returns</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bot">
|
||||
<p>© 2026 Volcán Antigua Roasters · Antigua, Guatemala → Rancho Palos Verdes, CA</p>
|
||||
<span class="micro">Roasted with intention</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const nav = document.getElementById('nav');
|
||||
window.addEventListener('scroll', () => {
|
||||
nav.classList.toggle('scrolled', window.scrollY > 60);
|
||||
});
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(e => {
|
||||
if (e.isIntersecting) {
|
||||
e.target.classList.add('in');
|
||||
observer.unobserve(e.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.15 });
|
||||
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user