diff --git a/assets/film/var-film1-poster.jpg b/assets/film/var-film1-poster.jpg index b6ee3a2..5675c6c 100644 Binary files a/assets/film/var-film1-poster.jpg and b/assets/film/var-film1-poster.jpg differ diff --git a/assets/film/var-film1.mp4 b/assets/film/var-film1.mp4 index 5319d02..9d9cb42 100644 Binary files a/assets/film/var-film1.mp4 and b/assets/film/var-film1.mp4 differ diff --git a/index.html b/index.html index e2ba922..f7f2395 100644 --- a/index.html +++ b/index.html @@ -221,6 +221,9 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; transform-origin: top; animation: scrollLine 2s ease-in-out infinite; } +/* letter-spacing adds trailing space after the last glyph, nudging the + word left of the line; a matching indent re-centers it over the line. */ +.hero-scroll span { text-indent: 0.32em; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } @@ -243,7 +246,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; .ticker-track { display: flex; gap: 64px; white-space: nowrap; - animation: marquee 35s linear infinite; + animation: marquee 20s linear infinite; } .ticker-item { font-size: 0.78rem; @@ -278,6 +281,23 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; overflow: hidden; } .story-visual svg { width: 100%; height: 100%; } +/* film that plays in the story visual slot (replaces the static photo) */ +.story-visual.has-film { aspect-ratio: 16 / 9; background: #000; } +.story-visual-video { width: 100%; height: 100%; object-fit: cover; display: block; } +.film-unmute { + position: absolute; bottom: 14px; left: 14px; + display: inline-flex; align-items: center; gap: 7px; + padding: 8px 14px; + font-family: var(--sans); font-size: 0.66rem; font-weight: 600; + letter-spacing: 0.18em; text-transform: uppercase; + color: var(--cream, #f3ead6); cursor: pointer; + background: rgba(20,16,12,0.55); + border: 1px solid rgba(200,169,106,0.55); border-radius: 999px; + backdrop-filter: blur(6px); + transition: background 0.25s ease, border-color 0.25s ease; +} +.film-unmute:hover { background: rgba(20,16,12,0.8); border-color: var(--gold); } +.film-unmute .film-unmute-icon { font-size: 0.85rem; line-height: 1; } .story-text h2 { font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); @@ -744,7 +764,15 @@ footer {
-
+
+ + +
The Origin

Grown in the shadow of three volcanoes

@@ -767,20 +795,6 @@ footer {
-
- The Film -

From volcanic soil to your cup

- -
@@ -803,7 +817,7 @@ footer {
Single Medium-Dark Roast · 2 oz
SHB · 5,000 ft · Arabica · Medium-Dark Roast

Strictly Hard Bean from a single estate, 5,000 ft above sea level. Dark cocoa, toasted almond, and a deep, smoky finish — a small-batch taste of our signature roast.

-
$18 / 2 oz tasting bag
+
$9 / 2 oz tasting bag
@@ -822,7 +836,7 @@ footer {
Explorer
$20 /mo
-
1 bag · monthly
+
1 bag (12 oz) · monthly
+
+ Or scan to subscribe +
+ Scan to subscribe — volcanantiguaroasters.com +
+

Point your phone camera at the code to start your subscription. Free shipping · Cancel anytime.

+
@@ -966,6 +987,24 @@ const observer = new IntersectionObserver((entries) => { }, { threshold: 0.15 }); document.querySelectorAll('.reveal').forEach(el => observer.observe(el)); +// Story film: toggle sound. Autoplay requires the video to start muted; +// this lets visitors turn the voiceover + music on. +(function () { + var video = document.querySelector('.story-visual-video'); + var btn = document.querySelector('.film-unmute'); + if (!video || !btn) return; + var label = btn.querySelector('.film-unmute-label'); + var icon = btn.querySelector('.film-unmute-icon'); + btn.addEventListener('click', function () { + video.muted = !video.muted; + if (!video.muted && video.paused) { video.play(); } + var on = !video.muted; + if (label) label.textContent = on ? 'Sound off' : 'Sound on'; + if (icon) icon.innerHTML = on ? '🔊' : '🔈'; + btn.setAttribute('aria-label', on ? 'Turn film sound off' : 'Turn film sound on'); + }); +})(); + // Email capture function handleSubscribe(e) { e.preventDefault(); @@ -1041,7 +1080,7 @@ html[lang="ko"] .step-meta-val { letter-spacing: 0.005em; }