Claude
984 lines
28 KiB
HTML
984 lines
28 KiB
HTML
<!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="Single-origin coffee from Antigua, Guatemala. Sourced from volcanic highland farms. Roasted fresh in small batches in Southern California.">
|
|
<title>Volcán Antigua Roasters — Single Origin Coffee from Antigua, Guatemala</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;
|
|
}
|
|
/* Film grain */
|
|
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; }
|
|
|
|
.display { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }
|
|
.italic { font-family: var(--display); font-style: italic; font-weight: 400; }
|
|
.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:hover { color: var(--gold); }
|
|
@media (max-width: 768px) { .nav-links { display: none; } }
|
|
|
|
/* === HERO === */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
text-align: center;
|
|
padding: 120px 32px 80px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute; inset: 0;
|
|
background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(200,169,106,0.06) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
.hero-logo {
|
|
width: 320px;
|
|
height: 320px;
|
|
max-width: 80vw;
|
|
margin-bottom: 22px;
|
|
background-image: var(--logo-img);
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
animation: fadeInUp 1.2s 0.1s both ease-out;
|
|
filter: drop-shadow(0 2px 12px rgba(200,169,106,0.15));
|
|
}
|
|
@media (max-width: 600px) {
|
|
.hero-logo { width: 240px; height: 240px; }
|
|
}
|
|
.hero-tagline {
|
|
font-family: var(--display);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
|
|
color: var(--cream-dim);
|
|
margin-bottom: 12px;
|
|
opacity: 0.85;
|
|
animation: fadeInUp 1.2s 0.3s both ease-out;
|
|
}
|
|
.hero-sub {
|
|
font-size: 0.78rem;
|
|
letter-spacing: 0.32em;
|
|
text-transform: uppercase;
|
|
color: var(--cream-dim);
|
|
opacity: 0.5;
|
|
margin-bottom: 48px;
|
|
animation: fadeInUp 1.2s 0.5s both ease-out;
|
|
}
|
|
.hero-cta-row {
|
|
display: flex; gap: 16px; flex-wrap: wrap;
|
|
justify-content: center;
|
|
animation: fadeInUp 1.2s 0.7s both ease-out;
|
|
}
|
|
.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);
|
|
border: 1px solid rgba(245,241,232,0.3);
|
|
}
|
|
.btn-ghost:hover {
|
|
background: transparent;
|
|
border-color: var(--gold);
|
|
color: var(--gold);
|
|
transform: translateY(-2px);
|
|
}
|
|
.btn .arrow {
|
|
display: inline-block;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.btn:hover .arrow { transform: translateX(4px); }
|
|
|
|
.hero-scroll {
|
|
position: absolute;
|
|
bottom: 36px; left: 50%; transform: translateX(-50%);
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.32em;
|
|
text-transform: uppercase;
|
|
color: var(--cream-dim);
|
|
opacity: 0.7;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; gap: 12px;
|
|
animation: fadeInUp 1.2s 1s both ease-out;
|
|
}
|
|
.hero-scroll .line {
|
|
width: 1px; height: 40px;
|
|
background: var(--gold);
|
|
transform-origin: top;
|
|
animation: scrollLine 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(24px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes scrollLine {
|
|
0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
|
|
50% { transform: scaleY(1); opacity: 1; }
|
|
}
|
|
|
|
/* === TICKER === */
|
|
.ticker {
|
|
background: var(--bg-2);
|
|
border-top: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 18px 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.ticker-track {
|
|
display: flex; gap: 64px;
|
|
white-space: nowrap;
|
|
animation: marquee 35s linear infinite;
|
|
}
|
|
.ticker-item {
|
|
font-size: 0.78rem;
|
|
letter-spacing: 0.32em;
|
|
text-transform: uppercase;
|
|
color: var(--cream-dim);
|
|
display: flex; align-items: center; gap: 64px;
|
|
}
|
|
.ticker-item .dot { color: var(--gold); }
|
|
@keyframes marquee {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
|
|
/* === STORY / ORIGIN === */
|
|
.story {
|
|
padding: 140px 0;
|
|
position: relative;
|
|
}
|
|
.story-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 80px;
|
|
align-items: center;
|
|
}
|
|
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; gap: 48px; } }
|
|
.story-visual {
|
|
position: relative;
|
|
aspect-ratio: 4/5;
|
|
background: var(--bg-2);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.story-visual svg { width: 100%; height: 100%; }
|
|
.story-text h2 {
|
|
font-family: var(--display);
|
|
font-size: clamp(2rem, 4vw, 3rem);
|
|
font-weight: 700;
|
|
line-height: 1.15;
|
|
margin-bottom: 24px;
|
|
}
|
|
.story-text h2 em {
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
color: var(--gold);
|
|
}
|
|
.story-text p {
|
|
font-size: 0.95rem;
|
|
line-height: 1.8;
|
|
color: var(--cream-dim);
|
|
margin-bottom: 16px;
|
|
max-width: 480px;
|
|
}
|
|
.story-detail {
|
|
display: flex; gap: 40px;
|
|
margin-top: 32px; padding-top: 24px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.story-detail .label {
|
|
font-size: 0.62rem;
|
|
letter-spacing: 0.3em;
|
|
text-transform: uppercase;
|
|
color: var(--gold);
|
|
margin-bottom: 4px;
|
|
}
|
|
.story-detail .value {
|
|
font-family: var(--display);
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* === PRODUCTS === */
|
|
.products {
|
|
padding: 140px 0;
|
|
background: var(--bg-2);
|
|
}
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 64px;
|
|
}
|
|
.section-header h2 {
|
|
font-family: var(--display);
|
|
font-size: clamp(2rem, 4vw, 2.8rem);
|
|
font-weight: 700;
|
|
margin-top: 16px;
|
|
}
|
|
.product-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 32px;
|
|
max-width: 1080px;
|
|
margin: 0 auto;
|
|
}
|
|
@media (max-width: 900px) { .product-grid { grid-template-columns: 1fr; max-width: 400px; } }
|
|
.product-card {
|
|
background: var(--bg-3);
|
|
border: 1px solid var(--line);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
transition: all 0.4s;
|
|
position: relative;
|
|
}
|
|
.product-card:hover {
|
|
border-color: var(--gold-soft);
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 16px 48px rgba(0,0,0,0.4);
|
|
}
|
|
.product-card::before {
|
|
content: '';
|
|
position: absolute; top: 0; left: 0; right: 0; height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--gold), transparent);
|
|
opacity: 0; transition: opacity 0.4s;
|
|
}
|
|
.product-card:hover::before { opacity: 1; }
|
|
|
|
.product-bag {
|
|
height: 240px;
|
|
background: linear-gradient(155deg, #0a0a0a 0%, #1c1c1c 50%, #0a0a0a 100%);
|
|
border-bottom: 1px solid var(--line);
|
|
position: relative;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
gap: 14px; overflow: hidden;
|
|
padding: 24px 18px;
|
|
}
|
|
.product-bag::before {
|
|
content: '';
|
|
position: absolute; top: 0; left: 0; right: 0; height: 28px;
|
|
background: #050505;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.bag-logo {
|
|
width: 74%;
|
|
max-width: 180px;
|
|
height: 130px;
|
|
display: block;
|
|
background-image: var(--logo-img);
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
filter: drop-shadow(0 1px 8px rgba(200,169,106,0.12));
|
|
}
|
|
.product-bag-roast {
|
|
font-size: 0.62rem;
|
|
color: var(--cream-dim);
|
|
letter-spacing: 0.36em;
|
|
text-transform: uppercase;
|
|
padding-top: 6px;
|
|
border-top: 1px solid var(--line);
|
|
width: 60%;
|
|
text-align: center;
|
|
}
|
|
.product-info {
|
|
padding: 28px 24px;
|
|
text-align: center;
|
|
}
|
|
.product-name {
|
|
font-family: var(--display);
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
margin-bottom: 4px;
|
|
}
|
|
.product-roast-label {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.25em;
|
|
text-transform: uppercase;
|
|
color: var(--gold);
|
|
margin-bottom: 16px;
|
|
}
|
|
.product-notes {
|
|
font-size: 0.85rem;
|
|
color: var(--cream-dim);
|
|
line-height: 1.7;
|
|
margin-bottom: 20px;
|
|
}
|
|
.product-price {
|
|
font-family: var(--display);
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--gold);
|
|
}
|
|
.product-price span {
|
|
font-size: 0.75rem;
|
|
font-weight: 400;
|
|
color: var(--cream-dim);
|
|
}
|
|
|
|
/* === SUBSCRIBE === */
|
|
.subscribe {
|
|
padding: 140px 0;
|
|
text-align: center;
|
|
}
|
|
.subscribe h2 {
|
|
font-family: var(--display);
|
|
font-size: clamp(2rem, 4vw, 2.8rem);
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
}
|
|
.subscribe h2 em {
|
|
font-style: italic; font-weight: 400; color: var(--gold);
|
|
}
|
|
.subscribe > .container > p {
|
|
font-size: 0.95rem;
|
|
color: var(--cream-dim);
|
|
max-width: 520px;
|
|
margin: 0 auto 48px;
|
|
line-height: 1.7;
|
|
}
|
|
.tiers {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
}
|
|
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; max-width: 380px; } }
|
|
.tier {
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--line);
|
|
border-radius: 4px;
|
|
padding: 36px 24px;
|
|
position: relative;
|
|
transition: all 0.4s;
|
|
}
|
|
.tier:hover { border-color: var(--gold-soft); }
|
|
.tier.featured {
|
|
border-color: var(--gold);
|
|
background: linear-gradient(to bottom, rgba(200,169,106,0.06), var(--bg-2));
|
|
}
|
|
.tier-badge {
|
|
position: absolute;
|
|
top: -12px; left: 50%; transform: translateX(-50%);
|
|
background: var(--gold);
|
|
color: var(--bg);
|
|
font-size: 0.6rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
padding: 4px 14px;
|
|
border-radius: 2px;
|
|
}
|
|
.tier-name {
|
|
font-family: var(--display);
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
.tier-price {
|
|
font-family: var(--display);
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--gold);
|
|
margin-bottom: 4px;
|
|
}
|
|
.tier-price span { font-size: 0.8rem; font-weight: 400; color: var(--cream-dim); }
|
|
.tier-freq {
|
|
font-size: 0.72rem;
|
|
color: var(--cream-dim);
|
|
margin-bottom: 20px;
|
|
}
|
|
.tier-features {
|
|
list-style: none;
|
|
text-align: left;
|
|
font-size: 0.82rem;
|
|
color: var(--cream-dim);
|
|
line-height: 2;
|
|
}
|
|
.tier-features li::before {
|
|
content: '\2713';
|
|
color: var(--gold);
|
|
margin-right: 8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* === PROCESS === */
|
|
.process {
|
|
padding: 140px 0;
|
|
background: var(--bg-2);
|
|
}
|
|
.process-steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 32px;
|
|
max-width: 1080px;
|
|
margin: 48px auto 0;
|
|
}
|
|
@media (max-width: 900px) { .process-steps { grid-template-columns: repeat(2, 1fr); } }
|
|
@media (max-width: 500px) { .process-steps { grid-template-columns: 1fr; } }
|
|
.step { text-align: center; padding: 24px 16px; }
|
|
.step .num {
|
|
font-family: var(--display);
|
|
font-size: 0.9rem;
|
|
font-weight: 400;
|
|
color: var(--gold);
|
|
opacity: 0.5;
|
|
margin-bottom: 12px;
|
|
}
|
|
.step h4 {
|
|
font-family: var(--display);
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
.step p {
|
|
font-size: 0.82rem;
|
|
color: var(--cream-dim);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* === CAPTURE === */
|
|
.capture {
|
|
padding: 120px 0;
|
|
text-align: center;
|
|
}
|
|
.capture h2 {
|
|
font-family: var(--display);
|
|
font-size: clamp(1.6rem, 3vw, 2.2rem);
|
|
font-weight: 700;
|
|
margin-bottom: 12px;
|
|
}
|
|
.capture h2 em { font-style: italic; font-weight: 400; color: var(--gold); }
|
|
.capture p {
|
|
font-size: 0.88rem;
|
|
color: var(--cream-dim);
|
|
margin-bottom: 32px;
|
|
max-width: 500px;
|
|
margin-left: auto; margin-right: auto;
|
|
}
|
|
.capture-form {
|
|
display: flex; gap: 12px;
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
justify-content: center;
|
|
}
|
|
.capture-form input {
|
|
flex: 1;
|
|
padding: 14px 18px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--line);
|
|
border-radius: 2px;
|
|
color: var(--cream);
|
|
font-family: var(--sans);
|
|
font-size: 0.85rem;
|
|
outline: none;
|
|
transition: border-color 0.3s;
|
|
}
|
|
.capture-form input:focus { border-color: var(--gold); }
|
|
.capture-form input::placeholder { color: var(--cream-dim); opacity: 0.5; }
|
|
.capture-form button {
|
|
padding: 14px 28px;
|
|
background: var(--gold);
|
|
color: var(--bg);
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
border-radius: 2px;
|
|
transition: background 0.3s;
|
|
cursor: pointer;
|
|
border: none;
|
|
font-family: var(--sans);
|
|
}
|
|
.capture-form button:hover { background: var(--gold-bright); }
|
|
@media (max-width: 500px) { .capture-form { flex-direction: column; } }
|
|
.capture-note {
|
|
font-size: 0.68rem;
|
|
color: var(--cream-dim);
|
|
opacity: 0.5;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
/* === FOOTER === */
|
|
footer {
|
|
padding: 80px 0 48px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 1fr;
|
|
gap: 48px;
|
|
margin-bottom: 48px;
|
|
}
|
|
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
|
|
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
|
|
.footer-brand h3 {
|
|
font-family: var(--display);
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 12px;
|
|
}
|
|
.footer-brand p {
|
|
font-size: 0.82rem;
|
|
color: var(--cream-dim);
|
|
line-height: 1.7;
|
|
max-width: 320px;
|
|
}
|
|
.footer-col h5 {
|
|
font-size: 0.68rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.3em;
|
|
text-transform: uppercase;
|
|
color: var(--gold);
|
|
margin-bottom: 16px;
|
|
}
|
|
.footer-col ul { list-style: none; }
|
|
.footer-col li { margin-bottom: 10px; }
|
|
.footer-col a {
|
|
font-size: 0.82rem;
|
|
color: var(--cream-dim);
|
|
transition: color 0.3s;
|
|
}
|
|
.footer-col a:hover { color: var(--gold); }
|
|
.footer-bot {
|
|
padding-top: 24px;
|
|
border-top: 1px solid var(--line);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 0.72rem;
|
|
color: var(--cream-dim);
|
|
opacity: 0.6;
|
|
}
|
|
@media (max-width: 600px) { .footer-bot { flex-direction: column; gap: 12px; text-align: center; } }
|
|
|
|
/* === REVEAL === */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(28px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
.reveal.in { opacity: 1; transform: translateY(0); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav class="nav" id="nav">
|
|
<img src="assets/logo-nav.webp" alt="Volcán Antigua" class="nav-icon">
|
|
<div class="nav-links">
|
|
<a href="#story">Origin</a>
|
|
<a href="#products">Coffee</a>
|
|
<a href="#subscribe">Subscribe</a>
|
|
<a href="process.html">Process</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<div class="hero-logo" role="img" aria-label="Volcán Antigua Roasters"></div>
|
|
<p class="hero-tagline">Born from volcanic soil. Roasted with intention.</p>
|
|
<p class="hero-sub">Antigua, Guatemala · Est. 2025</p>
|
|
<div class="hero-cta-row">
|
|
<a href="#subscribe" class="btn">Start Your Subscription <span class="arrow">→</span></a>
|
|
<a href="#story" class="btn btn-ghost">Our Origin</a>
|
|
</div>
|
|
<div class="hero-scroll">
|
|
<span>Scroll</span>
|
|
<div class="line"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TICKER -->
|
|
<div class="ticker">
|
|
<div class="ticker-track">
|
|
<span class="ticker-item">Single Origin <span class="dot">·</span></span>
|
|
<span class="ticker-item">Antigua, Guatemala <span class="dot">·</span></span>
|
|
<span class="ticker-item">1,500m Elevation <span class="dot">·</span></span>
|
|
<span class="ticker-item">Small Batch Roasted <span class="dot">·</span></span>
|
|
<span class="ticker-item">Free Shipping <span class="dot">·</span></span>
|
|
<span class="ticker-item">Subscribe & Save <span class="dot">·</span></span>
|
|
<span class="ticker-item">Single Origin <span class="dot">·</span></span>
|
|
<span class="ticker-item">Antigua, Guatemala <span class="dot">·</span></span>
|
|
<span class="ticker-item">1,500m Elevation <span class="dot">·</span></span>
|
|
<span class="ticker-item">Small Batch Roasted <span class="dot">·</span></span>
|
|
<span class="ticker-item">Free Shipping <span class="dot">·</span></span>
|
|
<span class="ticker-item">Subscribe & Save <span class="dot">·</span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- STORY -->
|
|
<section class="story" id="story">
|
|
<div class="container">
|
|
<div class="story-grid">
|
|
<div class="story-visual reveal">
|
|
<svg viewBox="0 0 400 500" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="mg" x1="0" y1="1" x2="0" y2="0">
|
|
<stop offset="0%" stop-color="#0d0d0d"/>
|
|
<stop offset="100%" stop-color="#1a1a1a"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="400" height="500" fill="url(#mg)"/>
|
|
<g stroke="rgba(200,169,106,0.12)" fill="none" stroke-width="0.8">
|
|
<ellipse cx="200" cy="350" rx="180" ry="40"/>
|
|
<ellipse cx="200" cy="330" rx="160" ry="50"/>
|
|
<ellipse cx="200" cy="305" rx="140" ry="55"/>
|
|
<ellipse cx="200" cy="275" rx="120" ry="58"/>
|
|
<ellipse cx="200" cy="240" rx="95" ry="55"/>
|
|
<ellipse cx="200" cy="210" rx="70" ry="45"/>
|
|
<ellipse cx="200" cy="185" rx="45" ry="30"/>
|
|
<ellipse cx="200" cy="165" rx="22" ry="16"/>
|
|
</g>
|
|
<g transform="translate(200,200)">
|
|
<path d="M-110 100 L-70 30 L-35 -30 L-15 -70 L-8 -85 L8 -83 L20 -55 L50 -10 L85 50 L110 100 Z" fill="none" stroke="var(--gold)" stroke-width="1" opacity="0.3"/>
|
|
<path d="M0 -90 Q-10 -110 2 -125 Q14 -138 5 -155" fill="none" stroke="var(--gold)" stroke-width="0.8" opacity="0.25"/>
|
|
</g>
|
|
<text x="200" y="440" text-anchor="middle" font-family="'Manrope',sans-serif" font-size="9" fill="var(--gold)" opacity="0.35" letter-spacing="0.3em">1,500M ELEVATION</text>
|
|
</svg>
|
|
</div>
|
|
<div class="story-text reveal">
|
|
<span class="eyebrow">The Origin</span>
|
|
<h2>Grown in the shadow of <em>three volcanoes</em></h2>
|
|
<p>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.</p>
|
|
<p>We source directly from highland farms in the Antigua valley, where generations of growers have perfected their craft at 1,500 meters above sea level.</p>
|
|
<div class="story-detail">
|
|
<div>
|
|
<div class="label">Altitude</div>
|
|
<div class="value">1,500m</div>
|
|
</div>
|
|
<div>
|
|
<div class="label">Region</div>
|
|
<div class="value">Antigua</div>
|
|
</div>
|
|
<div>
|
|
<div class="label">Species</div>
|
|
<div class="value">Arabica</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PRODUCTS -->
|
|
<section class="products" id="products">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<span class="eyebrow">The Coffee</span>
|
|
<h2>Three expressions, one origin</h2>
|
|
</div>
|
|
<div class="product-grid">
|
|
<div class="product-card reveal">
|
|
<div class="product-bag">
|
|
<div class="bag-logo" aria-hidden="true"></div>
|
|
<div class="product-bag-roast">Light · Bright</div>
|
|
</div>
|
|
<div class="product-info">
|
|
<div class="product-name">Antigua Bright</div>
|
|
<div class="product-roast-label">Light Roast</div>
|
|
<p class="product-notes">Citrus brightness, floral aromatics, honey sweetness. For pour-over purists.</p>
|
|
<div class="product-price">$20 <span>/ 12oz bag</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="product-card reveal">
|
|
<div class="product-bag">
|
|
<div class="bag-logo" aria-hidden="true"></div>
|
|
<div class="product-bag-roast">Medium · Classic</div>
|
|
</div>
|
|
<div class="product-info">
|
|
<div class="product-name">Antigua Classic</div>
|
|
<div class="product-roast-label">Medium Roast</div>
|
|
<p class="product-notes">Chocolate, caramel, toasted almond. The everyday cup that never gets old.</p>
|
|
<div class="product-price">$20 <span>/ 12oz bag</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="product-card reveal">
|
|
<div class="product-bag">
|
|
<div class="bag-logo" aria-hidden="true"></div>
|
|
<div class="product-bag-roast">Dark · Bold</div>
|
|
</div>
|
|
<div class="product-info">
|
|
<div class="product-name">Antigua Bold</div>
|
|
<div class="product-roast-label">Dark Roast</div>
|
|
<p class="product-notes">Dark cocoa, smoky depth, molasses body. Full-throttle espresso fuel.</p>
|
|
<div class="product-price">$20 <span>/ 12oz bag</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SUBSCRIBE -->
|
|
<section class="subscribe" id="subscribe">
|
|
<div class="container">
|
|
<div class="reveal">
|
|
<span class="eyebrow">Subscribe</span>
|
|
<h2>Never run out of <em>good coffee</em></h2>
|
|
<p>Choose your roast, pick your frequency, and we handle the rest. Free shipping on every subscription. Cancel anytime.</p>
|
|
</div>
|
|
<div class="tiers">
|
|
<div class="tier reveal">
|
|
<div class="tier-name">Explorer</div>
|
|
<div class="tier-price">$20 <span>/mo</span></div>
|
|
<div class="tier-freq">1 bag · monthly</div>
|
|
<ul class="tier-features">
|
|
<li>Choose your roast</li>
|
|
<li>Free shipping</li>
|
|
<li>Cancel anytime</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tier featured reveal">
|
|
<div class="tier-badge">Most Popular</div>
|
|
<div class="tier-name">Ritual</div>
|
|
<div class="tier-price">$36 <span>/mo</span></div>
|
|
<div class="tier-freq">2 bags · monthly</div>
|
|
<ul class="tier-features">
|
|
<li>Mix two roasts</li>
|
|
<li>Free shipping</li>
|
|
<li>Early access to limited runs</li>
|
|
<li>10% savings</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tier reveal">
|
|
<div class="tier-name">Obsession</div>
|
|
<div class="tier-price">$48 <span>/mo</span></div>
|
|
<div class="tier-freq">3 bags · monthly</div>
|
|
<ul class="tier-features">
|
|
<li>All three roasts</li>
|
|
<li>Free shipping</li>
|
|
<li>Priority access</li>
|
|
<li>20% savings</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PROCESS -->
|
|
<section class="process" id="process">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<span class="eyebrow">The Process</span>
|
|
<h2>From highland farm to your cup</h2>
|
|
</div>
|
|
<div class="process-steps">
|
|
<div class="step reveal">
|
|
<div class="num">/ 01</div>
|
|
<h4>Sourced</h4>
|
|
<p>Direct relationships with Antigua highland farms growing at 1,500m elevation in volcanic soil.</p>
|
|
</div>
|
|
<div class="step reveal">
|
|
<div class="num">/ 02</div>
|
|
<h4>Roasted</h4>
|
|
<p>Three profiles, dialed in by hand. We taste every batch before it leaves.</p>
|
|
</div>
|
|
<div class="step reveal">
|
|
<div class="num">/ 03</div>
|
|
<h4>Sealed</h4>
|
|
<p>Bagged the same day with one-way valves. Zero oxygen, full aroma. The flavor you taste is what we tasted.</p>
|
|
</div>
|
|
<div class="step reveal">
|
|
<div class="num">/ 04</div>
|
|
<h4>Shipped</h4>
|
|
<p>Out the door within 48 hours of roasting. On your counter within a week. Coffee was never meant to sit in a warehouse.</p>
|
|
</div>
|
|
</div>
|
|
<div class="reveal" style="text-align:center; margin-top:56px;">
|
|
<a href="process.html" style="display:inline-flex; align-items:center; gap:12px; font-family:var(--sans); font-size:0.74rem; font-weight:500; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); border-bottom:1px solid var(--gold); padding-bottom:6px;">See the full process →</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CAPTURE -->
|
|
<section class="capture" id="capture">
|
|
<div class="container">
|
|
<div class="reveal">
|
|
<span class="eyebrow">First Bag, 20% Off</span>
|
|
<h2>Try it once. <em>You'll know.</em></h2>
|
|
<p>We'll send your discount code, plus a short note about the farm your beans came from. No spam — just coffee.</p>
|
|
<form class="capture-form" onsubmit="handleSubscribe(event)">
|
|
<input type="email" placeholder="your@email.com" required>
|
|
<button type="submit">Send Me My Code →</button>
|
|
</form>
|
|
<p class="capture-note">No credit card · Unsubscribe anytime · One email a month, max</p>
|
|
</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="#products">Antigua Classic</a></li>
|
|
<li><a href="#products">Antigua Bright</a></li>
|
|
<li><a href="#products">Antigua Bold</a></li>
|
|
<li><a href="#subscribe">Reserve Lots</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h5>Brand</h5>
|
|
<ul>
|
|
<li><a href="#story">Origin</a></li>
|
|
<li><a href="process.html">Our Process</a></li>
|
|
<li><a href="#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>
|
|
// Nav scroll
|
|
const nav = document.getElementById('nav');
|
|
window.addEventListener('scroll', () => {
|
|
nav.classList.toggle('scrolled', window.scrollY > 60);
|
|
});
|
|
|
|
// Reveal on scroll
|
|
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));
|
|
|
|
// Email capture
|
|
function handleSubscribe(e) {
|
|
e.preventDefault();
|
|
const email = e.target.querySelector('input').value;
|
|
e.target.innerHTML = '<p style="color:var(--gold);font-size:0.9rem;">You\'re in. Check your inbox for your 20% code. ☕</p>';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|