dan/volcanantiguaroasters
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1620a36d95cb33730b11c407ce56aa506435dfd7
volcanantiguaroasters/process.html
T
Daniel Lee c2a3926cd1 Add files via upload
2026-05-09 15:54:37 -07:00

892 lines
43 KiB
HTML
Raw Blame History

<!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('assets/farm/hero-beneficio.webp');
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('assets/farm/source-cherries.webp'); }
.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>
<button class="lang-toggle" type="button" aria-label="Switch language"><span data-lang-en class="lang-active">EN</span><span class="lang-sep">|</span><span data-lang-ko>KO</span></button></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">Beneficio Moderno · Finca La Azotea · 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 Finca La Azotea, a 150-year-old 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 at Beneficio Moderno La Azotea.</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">Farm</span>
<span class="step-meta-val">Finca La Azotea</span>
</div>
<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">Species</span>
<span class="step-meta-val">Arabica</span>
</div>
<div class="step-meta-item">
<span class="step-meta-key">Certified</span>
<span class="step-meta-val">Rainforest Alliance</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">&lt; 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 hero image and the cherries above are real — photographed at Finca La Azotea in Antigua, Guatemala, where our green beans are sourced. The roastery and packaging photos further down are still editorial stock, since our Rancho Palos Verdes roastery hasn't been photographed yet. We'll replace those with our own as we go.</p>
<p>If you want to see what we're working on next — micro-lot releases, producer profiles, the actual roastery in California — 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>
<style>
/* Language toggle */
.lang-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: 24px;
padding: 6px 14px;
font-family: var(--sans);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--cream-dim);
border: 1px solid rgba(200,169,106,0.28);
background: transparent;
cursor: pointer;
transition: all 0.3s;
border-radius: 0;
}
.lang-toggle:hover {
border-color: var(--gold);
color: var(--gold);
}
.lang-toggle .lang-active {
color: var(--gold);
font-weight: 700;
}
.lang-toggle .lang-sep {
opacity: 0.4;
}
@media (max-width: 768px) {
.lang-toggle {
margin-left: 0;
padding: 5px 10px;
font-size: 0.62rem;
}
}
/* Korean-only typography refinements */
html[lang="ko"] body { font-family: 'Manrope', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; }
html[lang="ko"] .eyebrow { letter-spacing: 0.18em; }
html[lang="ko"] .micro { letter-spacing: 0.14em; }
html[lang="ko"] .nav-links a { letter-spacing: 0.1em; }
html[lang="ko"] .btn { letter-spacing: 0.14em; font-weight: 500; }
html[lang="ko"] .lang-toggle { letter-spacing: 0.2em; }
html[lang="ko"] .ticker-item { letter-spacing: 0.06em; }
html[lang="ko"] .display, html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3, html[lang="ko"] h4, html[lang="ko"] h5 {
font-family: 'Playfair Display', 'Noto Serif KR', 'Apple SD Gothic Neo', Georgia, serif;
letter-spacing: -0.005em;
}
html[lang="ko"] .italic, html[lang="ko"] em, html[lang="ko"] i {
font-style: normal;
color: var(--gold);
font-weight: 500;
}
html[lang="ko"] .step-eyebrow { letter-spacing: 0.18em; }
html[lang="ko"] .step-meta-key { letter-spacing: 0.14em; }
html[lang="ko"] h4 { letter-spacing: -0.005em; }
html[lang="ko"] h5 { letter-spacing: 0.14em; }
html[lang="ko"] .label { letter-spacing: 0.18em; }
html[lang="ko"] .badge { letter-spacing: 0.14em; }
html[lang="ko"] .process-hero-credit { letter-spacing: 0.1em; }
html[lang="ko"] .footer-col h5 { letter-spacing: 0.14em; }
html[lang="ko"] .footer-bot p, html[lang="ko"] .footer-bot span { letter-spacing: 0.06em; }
html[lang="ko"] .step-meta-val { letter-spacing: 0.005em; }
</style>
<script>
(function() {
var TRANSLATIONS_KO = {"Origin":"원산지","Coffee":"커피","Subscribe":"구독","Process":"과정","Born from volcanic soil. Roasted with intention.":"화산토에서 자라, 정성으로 로스팅.","Antigua, Guatemala · Est. 2025":"과테말라 안티구아 · 2025년 설립","Start Your Subscription":"구독 시작하기","Our Origin":"원산지 보기","Scroll":"스크롤","Single Origin":"싱글 오리진","Antigua, Guatemala":"과테말라 안티구아","1,500m Elevation":"해발 1,500m","Small Batch Roasted":"소량 로스팅","Free Shipping":"무료 배송","Subscribe & Save":"구독하고 할인받기","1,500M ELEVATION":"해발 1,500M","The Origin":"원산지","Grown in the shadow of":"세 화산이 굽어보는 곳에서","three volcanoes":"자란 커피","Antigua Guatemala sits in a valley ringed by Volcán de Agua, Volcán de Fuego, and Acatenango. The volcanic soil is rich in minerals. The altitude is perfect. The microclimate creates conditions that coffee obsessives dream about.":"과테말라 안티구아는 아구아 화산, 푸에고 화산, 아카테낭고 화산이 둘러싼 계곡에 자리합니다. 미네랄이 풍부한 화산토, 완벽한 해발, 그리고 커피 애호가들이 꿈꾸는 미기후가 모두 이곳에 있습니다.","We source directly from Finca La Azotea, a 150-year-old plantation in the Antigua valley, where coffee has been grown at 1,500 meters above sea level since 1883.":"150년 역사의 핀카 라 아소테아 농장에서 직접 수급합니다. 1883년부터 안티구아 계곡 해발 1,500m에서 커피를 재배해온 곳입니다.","Altitude":"해발","Region":"지역","Antigua":"안티구아","Species":"품종","Arabica":"아라비카","The Coffee":"커피","Three expressions, one origin":"한 원산지, 세 가지 표현","Light · Bright":"라이트 · 산뜻함","Antigua Bright":"안티구아 브라이트","Light Roast":"라이트 로스트","Citrus brightness, floral aromatics, honey sweetness. For pour-over purists.":"감귤의 산뜻함, 꽃향, 꿀의 단맛. 푸어오버 애호가를 위해.","/ 12oz bag":"/ 340g 한 팩","Medium · Classic":"미디엄 · 클래식","Antigua Classic":"안티구아 클래식","Medium Roast":"미디엄 로스트","Chocolate, caramel, toasted almond. The everyday cup that never gets old.":"초콜릿, 카라멜, 구운 아몬드. 매일 마셔도 질리지 않는 한 잔.","Dark · Bold":"다크 · 묵직함","Antigua Bold":"안티구아 볼드","Dark Roast":"다크 로스트","Dark cocoa, smoky depth, molasses body. Full-throttle espresso fuel.":"다크 코코아, 스모키한 깊이, 당밀의 바디감. 진한 에스프레소를 위해.","Never run out of":"좋은 커피가 떨어질","good coffee":"일은 없도록","Choose your roast, pick your frequency, and we handle the rest. Free shipping on every subscription. Cancel anytime.":"로스트와 주기를 고르시면 나머지는 저희가 챙기겠습니다. 구독은 모두 무료 배송, 언제든 해지 가능합니다.","Explorer":"익스플로러","/mo":"/월","1 bag · monthly":"월 1팩","Choose your roast":"로스트 선택","Free shipping":"무료 배송","Cancel anytime":"언제든 해지","Most Popular":"가장 인기","Ritual":"리츄얼","2 bags · monthly":"월 2팩","Mix two roasts":"두 가지 로스트 조합","Early access to limited runs":"한정판 우선 구매","10% savings":"10% 할인","Obsession":"옵세션","3 bags · monthly":"월 3팩","All three roasts":"세 가지 로스트 모두","Priority access":"우선 접근권","20% savings":"20% 할인","The Process":"공정","From highland farm to your cup":"고산지 농장에서 당신의 컵까지","Sourced":"수급","Direct relationships with Antigua highland farms growing at 1,500m elevation in volcanic soil.":"해발 1,500m 화산토에서 자라는 안티구아 고산지 농장과 직거래.","Roasted":"로스팅","Three profiles, dialed in by hand. We taste every batch before it leaves.":"세 가지 프로파일, 한 배치씩 손으로 잡습니다. 출하 전 모든 배치를 직접 시음합니다.","Sealed":"포장","Bagged the same day with one-way valves. Zero oxygen, full aroma. The flavor you taste is what we tasted.":"당일 일방향 밸브 백에 밀봉. 산소 차단, 향은 그대로. 우리가 맛본 그대로 당신에게.","Shipped":"배송","Out the door within 48 hours of roasting. On your counter within a week. Coffee was never meant to sit in a warehouse.":"로스팅 후 48시간 내 출하. 일주일 안에 당신의 주방으로. 커피는 창고에 있어야 할 것이 아닙니다.","See the full process →":"전체 공정 보기 →","First Bag, 20% Off":"첫 팩 20% 할인","Try it once.":"한 번만 마셔보세요.","You'll know.":"느낌이 옵니다.","We'll send your discount code, plus a short note about the farm your beans came from. No spam — just coffee.":"할인 코드와 함께, 당신의 원두가 자란 농장 이야기를 짧게 보내드립니다. 스팸은 없습니다 — 오직 커피.","Send Me My Code →":"코드 받기 →","No credit card · Unsubscribe anytime · One email a month, max":"신용카드 불필요 · 언제든 해지 · 한 달에 최대 한 통","Volcán Antigua Roasters":"Volcán Antigua Roasters","Single-origin coffee from Antigua, Guatemala. Roasted in small batches in Southern California. Built by people who actually go to the farms.":"과테말라 안티구아의 싱글 오리진 커피. 남부 캘리포니아에서 소량 로스팅. 직접 농장을 찾아가는 사람들이 만듭니다.","Reserve Lots":"리저브 랏","Brand":"브랜드","Our Process":"공정","Wholesale":"도매","Connect":"연결","Instagram":"인스타그램","Contact":"문의","Returns":"반품","FAQ":"자주 묻는 질문","© 2026 Volcán Antigua Roasters · Antigua, Guatemala → Rancho Palos Verdes, CA":"© 2026 Volcán Antigua Roasters · 과테말라 안티구아 → 캘리포니아 란초 팰로스 버디스","Roasted with intention":"정성으로 로스팅","You\\'re in. Check your inbox for your 20% code. ☕":"감사합니다. 받은 편지함에서 20% 할인 코드를 확인하세요. ☕","Volcanic soil to your counter —":"화산토에서 당신의 주방까지 —","nothing in between we can't name.":"그 사이의 모든 것을, 우리가 압니다.","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.":"과테말라 안티구아는 활화산 셋이 굽어보는 곳에 있습니다. 미네랄이 풍부한 토양과 해발 1,500m가 만들어내는, 세계에서 가장 밀도 높고 복합적인 아라비카 원두. 그 원두가 당신에게 닿기까지의 여정입니다.","Beneficio Moderno · Finca La Azotea · Antigua, Guatemala":"베네피시오 모데르노 · 핀카 라 아소테아 · 과테말라 안티구아","A short version":"요약","Four steps. Zero brokers. No mystery beans.":"네 단계. 중간 유통 없음. 출처 불분명한 원두 없음.","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.":"대부분의 스페셜티 커피는 농장에서 당신의 주방까지 다섯 여섯 단계의 중간 유통을 거칩니다. 봉투에 담길 무렵이면 재배자는 익명이고, 랏은 섞여 있고, 로스팅 날짜는 알 수 없습니다.","We do this differently.":"저희는 다르게 합니다.","We buy green beans direct from a single farm in Antigua, Guatemala.":"과테말라 안티구아의 단일 농장에서 생두를 직접 구매합니다.","We roast them in small batches in Southern California. We ship within 48 hours. That's the whole supply chain.":"남부 캘리포니아에서 소량 로스팅합니다. 48시간 안에 배송합니다. 이것이 공급망의 전부입니다.","What follows is the actual four-step process behind every bag we sell — written honestly, including the parts that aren't yet finished.":"다음은 저희가 파는 모든 봉투 뒤의 실제 네 단계 공정입니다 — 아직 완성되지 않은 부분까지 솔직하게 적었습니다.","Step 01":"Step 01","direct from Antigua.":"안티구아에서 직접.","Our green beans come from Finca La Azotea, a 150-year-old 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 at Beneficio Moderno La Azotea.":"저희 생두는 안티구아 재배지의 150년 역사 커피 농장, 핀카 라 아소테아에서 옵니다 — 화산토, 해발 약 1,500m, 자생 수림 아래의 그늘 재배. 체리는 가장 잘 익었을 때 손으로 따고, 농장 내 베네피시오 모데르노 라 아소테아에서 워시드 가공합니다.","We buy at the green-bean level, wholesale. No brokers, no aggregators, no \"blended Central American\" mystery. One region, one farm, one harvest.":"저희는 생두 단계에서 도매로 구매합니다. 중개인 없음, 통합업체 없음, \"중미 블렌드\"의 모호함 없음. 한 지역, 한 농장, 한 수확.","Farm":"농장","Finca La Azotea":"핀카 라 아소테아","Elevation":"해발","~1,500m / 5,000ft":"~1,500m / 5,000ft","Certified":"인증","Rainforest Alliance":"레인포레스트 얼라이언스","Step 02":"Step 02","by hand, in small batches.":"손으로, 소량씩.","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.":"생두는 캘리포니아 란초 팰로스 버디스의 저희 로스터리로 도착합니다. 드럼 로스터에서 1파운드(약 450g) 단위로 로스팅합니다 — 첫 크랙 소리를 듣고, 색 변화를 관찰하고, 프로파일에 도달한 순간 빼낼 수 있을 만큼 적은 양입니다.","Three roast levels:":"세 가지 로스트 레벨:","Bright":"브라이트","(lighter, fruit-forward),":"(밝고, 과일 향),","Classic":"클래식","(medium, balanced), and":"(미디엄, 균형감), 그리고","Bold":"볼드","(full-city, deeper body). We taste every batch before it leaves the roastery.":"(풀시티, 깊은 바디감). 모든 배치를 출고 전 직접 시음합니다.","Batch Size":"배치 크기","1 lb / drum":"1파운드 / 드럼","Profiles":"프로파일","Bright · Classic · Bold":"브라이트 · 클래식 · 볼드","Roasted In":"로스팅 지역","Southern California":"남부 캘리포니아","Step 03":"Step 03","the same day.":"당일에.","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.":"로스팅된 원두는 잠시 가스를 빼낸 뒤, 일방향 디개싱 밸브가 달린 매트 블랙 파우치에 들어갑니다. 밸브는 CO₂를 내보내되 아무것도 들이지 않습니다. 산소 차단, 습기 차단, 빛 차단.","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.":"모든 봉투는 340g(12oz)으로 손수 계량하고, 밀봉하고, 날짜를 기입하고, 로스트 프로파일과 원산지를 표시합니다. 당신이 맛보는 풍미는 저희가 로스터리에서 맛본 그 풍미입니다 — 단지 도착까지의 시간만큼 줄어들 뿐입니다.","Bag Size":"봉투 크기","12 oz · 340g":"340g · 12oz","Valve":"밸브","One-way · degassing":"일방향 · 디개싱","Roast Date":"로스팅 날짜","Printed on every bag":"모든 봉투에 인쇄","Step 04":"Step 04","within 48 hours.":"48시간 안에.","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.":"밀봉부터 출고까지 이틀이 채 걸리지 않습니다. USPS Ground Advantage와 Priority로 발송합니다 — 미국 내 대부분의 주문은 영업일 3~5일 안에 도착합니다. 당신이 드립할 무렵, 커피는 보통 로스터에서 일주일이 채 지나지 않은 상태입니다.","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.":"구독자는 무료 배송입니다. 모든 봉투는 앞면에 로스팅 날짜, 뒷면에 원산지, 그리고 해당 랏에 관한 짧은 메모와 함께 도착합니다. 커피는 6개월 동안 창고에 있어야 할 것이 아닙니다.","Lead Time":"리드타임","&lt; 48 hrs · roast to ship":"< 48시간 · 로스팅에서 출하까지","Carrier":"배송사","USPS · Domestic":"USPS · 국내","Subscribers":"구독자","A note on this page":"이 페이지에 관하여","What's":"지금","real":"진짜인 것","right now, and what's coming.":", 그리고 다가올 것.","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.":"저희는 2026년에 이 브랜드를 시작했고, 지금 어디쯤 와 있는지 솔직하게 말씀드립니다. 생두, 로스트 프로파일, 봉투 스펙, 48시간 배송 — 모두 실제이고, 모두 지금의 모습입니다.","The hero image and the cherries above are real — photographed at Finca La Azotea in Antigua, Guatemala, where our green beans are sourced. The roastery and packaging photos further down are still editorial stock, since our Rancho Palos Verdes roastery hasn't been photographed yet. We'll replace those with our own as we go.":"위의 메인 이미지와 체리 사진은 실제입니다 — 저희 생두를 수급하는 과테말라 안티구아의 핀카 라 아소테아 농장에서 촬영했습니다. 아래쪽 로스터리와 포장 사진은 아직 에디토리얼 스톡 이미지입니다. 저희 란초 팰로스 버디스 로스터리는 아직 촬영하지 못했기 때문입니다. 진행되는 대로 직접 찍은 사진으로 교체하겠습니다.","If you want to see what we're working on next — micro-lot releases, producer profiles, the actual roastery in California — subscribe below. We'll send you what we know, when we know it.":"다음에 저희가 무엇을 준비하는지 — 마이크로 랏 출시, 생산자 프로필, 실제 캘리포니아 로스터리 — 보고 싶으시다면 아래에서 구독해주세요. 알게 되는 대로 알려드립니다.","Try it once":"한 번만 마셔보세요","The whole process —":"전체 공정을 —","in your cup, by next week.":"다음 주, 당신의 컵에서.","First-time subscribers get 20% off their first bag. Pick a roast, pick a frequency. Skip, swap, or cancel anytime.":"첫 구독자는 첫 팩 20% 할인. 로스트 선택, 주기 선택. 언제든 건너뛰기, 변경, 해지 가능합니다.","Start Your Subscription →":"구독 시작하기 →","See the Coffee":"커피 둘러보기"};
var currentLang = 'en';
var originalTexts = new WeakMap();
var koFontsLoaded = false;
function loadKoFonts() {
if (koFontsLoaded) return;
koFontsLoaded = true;
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&family=Noto+Serif+KR:wght@400;500;700&display=swap';
document.head.appendChild(link);
}
function walkAndCollect(node, found) {
if (!node) return;
if (node.nodeType === 3) {
var trimmed = node.textContent.trim();
if (trimmed && trimmed.length > 0) {
found.push(node);
}
return;
}
if (node.nodeType !== 1) return;
var tag = node.tagName;
if (tag === 'SCRIPT' || tag === 'STYLE' || tag === 'NOSCRIPT') return;
if (node.classList && node.classList.contains('lang-toggle')) return;
if (node.classList && node.classList.contains('lang-skip')) return;
for (var i = 0; i < node.childNodes.length; i++) {
walkAndCollect(node.childNodes[i], found);
}
}
function setLang(lang) {
if (lang === 'ko') loadKoFonts();
var nodes = [];
walkAndCollect(document.body, nodes);
for (var i = 0; i < nodes.length; i++) {
var n = nodes[i];
if (!originalTexts.has(n)) {
originalTexts.set(n, n.textContent);
}
var orig = originalTexts.get(n);
var trimmedOrig = orig.trim();
if (lang === 'ko' && TRANSLATIONS_KO[trimmedOrig]) {
var leading = orig.match(/^\s*/)[0];
var trailing = orig.match(/\s*$/)[0];
n.textContent = leading + TRANSLATIONS_KO[trimmedOrig] + trailing;
} else if (lang === 'en') {
n.textContent = orig;
}
}
var inputs = document.querySelectorAll('input[placeholder]');
inputs.forEach(function(inp) {
if (!inp.dataset.origPlaceholder) {
inp.dataset.origPlaceholder = inp.placeholder;
}
if (lang === 'ko' && TRANSLATIONS_KO[inp.dataset.origPlaceholder]) {
inp.placeholder = TRANSLATIONS_KO[inp.dataset.origPlaceholder];
} else {
inp.placeholder = inp.dataset.origPlaceholder;
}
});
document.querySelectorAll('.lang-toggle').forEach(function(btn) {
var enSpan = btn.querySelector('[data-lang-en]');
var koSpan = btn.querySelector('[data-lang-ko]');
if (enSpan && koSpan) {
enSpan.classList.toggle('lang-active', lang === 'en');
koSpan.classList.toggle('lang-active', lang === 'ko');
}
});
document.documentElement.setAttribute('lang', lang === 'ko' ? 'ko' : 'en');
currentLang = lang;
}
function init() {
document.querySelectorAll('.lang-toggle').forEach(function(btn) {
btn.addEventListener('click', function() {
setLang(currentLang === 'en' ? 'ko' : 'en');
});
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink