mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
Youssef
455c2654bd
Swap the Hum carousel card from Sprout (hum-02) to Bubble (hum-07), the guided sourdough Narrative Workflow build. Keep only one custom example in the showcase, the Mend Assembly repair-cafe poster; the other bespoke pages stay in the repo but off the landing. Untrack hum-02 so only featured builds ship, refresh the scroll-demos manifest, and bump the cache version.
306 lines
16 KiB
HTML
306 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-theme="hum">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
<title>Bubble — Guided sourdough, one stage at a time.</title>
|
||
<meta name="description" content="Bubble walks you through one loaf of real sourdough — feed, mix, prove, bake — and pings you the moment the dough needs you. About 45 minutes of actual work, spread across two unhurried days." />
|
||
<meta name="theme-color" content="#faf6ee" />
|
||
<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=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="tokens.css" />
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
<body>
|
||
<a class="sr-only" href="#main">Skip to content</a>
|
||
|
||
<!-- ─── Nav · N10 floating-on-scroll morph ─── -->
|
||
<header class="nav" id="nav">
|
||
<div class="nav__inner">
|
||
<a class="nav__brand" href="#" aria-label="Bubble — home">
|
||
<span class="bub-mark" aria-hidden="true"></span>
|
||
Bubble
|
||
</a>
|
||
<nav class="nav__links" aria-label="Primary">
|
||
<a href="#stages">The method</a>
|
||
<a href="#numbers">The math</a>
|
||
<a href="#voices">Kitchen</a>
|
||
<a href="#pricing">Pricing</a>
|
||
</nav>
|
||
<div class="nav__actions">
|
||
<a class="btn btn--text" href="#">Sign in</a>
|
||
<a class="btn btn--mint btn--sm" href="#" data-burst>Start a starter</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="main">
|
||
|
||
<!-- ─── Hero · Narrative Workflow opening ─── -->
|
||
<section class="hero">
|
||
<div class="hero__grid">
|
||
<div class="hero__lead">
|
||
<div class="process" aria-label="The four stages">
|
||
<span class="process__step"><span class="process__dot" style="background:var(--color-mint)"></span><span class="num">01</span> feed</span>
|
||
<span class="process__link"></span>
|
||
<span class="process__step"><span class="process__dot" style="background:var(--color-accent-2)"></span><span class="num">02</span> mix</span>
|
||
<span class="process__link"></span>
|
||
<span class="process__step"><span class="process__dot" style="background:var(--color-accent)"></span><span class="num">03</span> prove</span>
|
||
<span class="process__link"></span>
|
||
<span class="process__step"><span class="process__dot" style="background:var(--color-accent-3)"></span><span class="num">04</span> bake</span>
|
||
</div>
|
||
<h1 class="hero__title">Real sourdough, in about <em>forty-five minutes</em> of actual work.</h1>
|
||
<p class="hero__lede">Bubble walks you through one loaf, one stage at a time, and pings you the moment the dough needs you. The other thirty-six hours it just sits there getting better, while you get on with your life.</p>
|
||
<div class="hero__cta">
|
||
<a class="btn btn--mint btn--lg" href="#" data-burst>Start your first loaf</a>
|
||
<a class="btn btn--outline btn--lg btn--mint" href="#stages">See the four stages <span class="btn__arrow" aria-hidden="true">→</span></a>
|
||
</div>
|
||
<p class="hero__note">Free to read · no account for the recipe · works at the counter, offline</p>
|
||
</div>
|
||
|
||
<div class="hero__stage">
|
||
<div class="starter" id="starter" aria-hidden="true">
|
||
<span class="starter__pulse"></span>
|
||
<span class="starter__jar"><span class="starter__fill"></span></span>
|
||
<span class="starter__lid"></span>
|
||
<span class="starter__bubble"></span>
|
||
<span class="starter__bubble"></span>
|
||
<span class="starter__bubble"></span>
|
||
<span class="starter__bubble"></span>
|
||
</div>
|
||
<div class="remind" role="status">
|
||
<span class="remind__icon" aria-hidden="true"></span>
|
||
<div>
|
||
<p class="remind__head"><b>Bubble</b> · in 35 min</p>
|
||
<p class="remind__body">First stretch & fold — <span class="remind__time">then 45 minutes to yourself.</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── The timeline spine · numbered stages ─── -->
|
||
<section class="section" id="stages" aria-labelledby="stages-title">
|
||
<header class="section__head">
|
||
<p class="eyebrow"><span class="eyebrow__dot eyebrow__dot--mint"></span> The method</p>
|
||
<h2 class="section__title" id="stages-title">Four stages, start to slice.</h2>
|
||
<p class="section__lede">The same four every loaf. You only ever do one at a time — Bubble holds the timeline so you don't have to keep it in your head.</p>
|
||
</header>
|
||
|
||
<div class="stages">
|
||
<!-- 1.0 FEED -->
|
||
<article class="stage stage--mint">
|
||
<div class="stage__rail" aria-hidden="true">
|
||
<div class="stage__node"><b>1<small>.0</small></b></div>
|
||
<div class="stage__line"></div>
|
||
</div>
|
||
<div class="stage__panel">
|
||
<div class="stage__copy">
|
||
<p class="stage__label">1.0 · Feed · The night before</p>
|
||
<h3 class="stage__title">Wake the starter</h3>
|
||
<p class="stage__text">Stir a spoonful of starter into fresh flour and water before bed. By morning it's doubled, domed, and smells like yogurt and green apples — that's ripe. <b>Bubble times the feed to your kitchen's temperature</b>, so it peaks when you wake up, not at 3 a.m.</p>
|
||
<div class="stage__chips">
|
||
<span class="chip"><span class="chip__dot"></span> 10–12 hrs · overnight</span>
|
||
<span class="chip chip--hands"><span class="chip__dot"></span> Hands-on · 5 min</span>
|
||
</div>
|
||
</div>
|
||
<div class="stage__art" aria-hidden="true">
|
||
<div class="art-jar">
|
||
<span class="art-jar__lid"></span>
|
||
<span class="art-jar__body"><span class="art-jar__fill"></span></span>
|
||
<span class="b"></span><span class="b"></span><span class="b"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 2.0 MIX -->
|
||
<article class="stage stage--cyan">
|
||
<div class="stage__rail" aria-hidden="true">
|
||
<div class="stage__node"><b>2<small>.0</small></b></div>
|
||
<div class="stage__line"></div>
|
||
</div>
|
||
<div class="stage__panel">
|
||
<div class="stage__copy">
|
||
<p class="stage__label">2.0 · Mix · Morning</p>
|
||
<h3 class="stage__title">Mix, then let it rest</h3>
|
||
<p class="stage__text">Fold flour, water, the ripe levain and salt into a shaggy dough, then walk away for an hour while the flour drinks and the gluten knits itself — no kneading required. <b>One rest timer, one nudge</b> when it's ready for the first fold.</p>
|
||
<div class="stage__chips">
|
||
<span class="chip"><span class="chip__dot"></span> 1 hr autolyse</span>
|
||
<span class="chip chip--hands"><span class="chip__dot"></span> Hands-on · 10 min</span>
|
||
</div>
|
||
</div>
|
||
<div class="stage__art" aria-hidden="true">
|
||
<div class="art-bowl">
|
||
<span class="art-bowl__bowl"></span>
|
||
<span class="art-bowl__rim"></span>
|
||
<span class="art-bowl__dough"></span>
|
||
<span class="fl"></span><span class="fl"></span><span class="fl"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 3.0 PROVE -->
|
||
<article class="stage stage--pear">
|
||
<div class="stage__rail" aria-hidden="true">
|
||
<div class="stage__node"><b>3<small>.0</small></b></div>
|
||
<div class="stage__line"></div>
|
||
</div>
|
||
<div class="stage__panel">
|
||
<div class="stage__copy">
|
||
<p class="stage__label">3.0 · Prove · Day, then overnight</p>
|
||
<h3 class="stage__title">Fold, shape, and wait</h3>
|
||
<p class="stage__text">Four gentle folds over the first couple of hours build the structure; then the dough bulks for four or five, shapes into a taut round, and rests overnight in the fridge. <b>Bubble paces the folds</b> and tells you when the bulk is genuinely done — by how the dough looks, not just the clock.</p>
|
||
<div class="stage__chips">
|
||
<span class="chip"><span class="chip__dot"></span> 4–5 hrs bulk</span>
|
||
<span class="chip"><span class="chip__dot"></span> + overnight cold proof</span>
|
||
<span class="chip chip--hands"><span class="chip__dot"></span> Hands-on · 20 min</span>
|
||
</div>
|
||
</div>
|
||
<div class="stage__art" aria-hidden="true">
|
||
<div class="art-banneton">
|
||
<span class="art-banneton__dome"></span>
|
||
<span class="art-banneton__rim"></span>
|
||
<span class="art-banneton__basket"></span>
|
||
<span class="art-banneton__tag">+40%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 4.0 BAKE -->
|
||
<article class="stage stage--coral">
|
||
<div class="stage__rail" aria-hidden="true">
|
||
<div class="stage__node"><b>4<small>.0</small></b></div>
|
||
<div class="stage__line"></div>
|
||
</div>
|
||
<div class="stage__panel">
|
||
<div class="stage__copy">
|
||
<p class="stage__label">4.0 · Bake · Dawn</p>
|
||
<h3 class="stage__title">Score it, bake it, slice it</h3>
|
||
<p class="stage__text">Straight from the fridge, slash the top and lower it into a screaming-hot pot — twenty minutes lidded for the rise, twenty more open for the crust. <b>Pull it at the colour you like</b>, then wait the hardest hour of all: letting it cool before you cut.</p>
|
||
<div class="stage__chips">
|
||
<span class="chip"><span class="chip__dot"></span> 45 min bake</span>
|
||
<span class="chip chip--hands"><span class="chip__dot"></span> Hands-on · 10 min</span>
|
||
</div>
|
||
</div>
|
||
<div class="stage__art" aria-hidden="true">
|
||
<div class="art-loaf">
|
||
<span class="art-loaf__boule"></span>
|
||
<span class="art-loaf__score"></span>
|
||
<span class="art-loaf__ear"></span>
|
||
<span class="st"></span><span class="st"></span><span class="st"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── The honest math · counters ─── -->
|
||
<section class="section section--band section--mint" id="numbers" aria-labelledby="num-title">
|
||
<header class="section__head section__head--center">
|
||
<p class="eyebrow"><span class="eyebrow__dot eyebrow__dot--mint"></span> The honest math</p>
|
||
<h2 class="section__title" id="num-title">Mostly, you wait. That's the whole trick.</h2>
|
||
</header>
|
||
<dl class="numbers">
|
||
<div class="bignum">
|
||
<dd class="bignum__v"><span class="bignum__pre">≈</span><span class="count" data-to="45">45</span><span class="bignum__u">min</span></dd>
|
||
<dt class="bignum__k">your hands are actually busy — spread across two unhurried days.</dt>
|
||
</div>
|
||
<div class="bignum">
|
||
<dd class="bignum__v"><span class="count" data-to="36">36</span><span class="bignum__u">hrs</span></dd>
|
||
<dt class="bignum__k">the dough ferments on its own while you do literally anything else.</dt>
|
||
</div>
|
||
<div class="bignum">
|
||
<dd class="bignum__v"><span class="count" data-to="4">4</span></dd>
|
||
<dt class="bignum__k">simple stages — the same four, in the same order, every single loaf.</dt>
|
||
</div>
|
||
</dl>
|
||
</section>
|
||
|
||
<!-- ─── Voices · color-shift cards ─── -->
|
||
<section class="section" id="voices" aria-labelledby="vo-title">
|
||
<header class="section__head">
|
||
<p class="eyebrow"><span class="eyebrow__dot eyebrow__dot--cyan"></span> From the kitchen</p>
|
||
<h2 class="section__title" id="vo-title">People who used to buy their bread.</h2>
|
||
</header>
|
||
<ul class="voices">
|
||
<li class="voice" data-accent="mint">
|
||
<p class="voice__text">"My first three loaves came out like frisbees. Bubble was the first thing to tell me my starter was just hungry, not dead."</p>
|
||
<p class="voice__by"><span class="voice__chip"></span><b>Priya</b> · baking since March</p>
|
||
</li>
|
||
<li class="voice" data-accent="cyan">
|
||
<p class="voice__text">"The fold reminders are the whole product, honestly. I'd always miss the second one and end up with a brick."</p>
|
||
<p class="voice__by"><span class="voice__chip"></span><b>Marcus</b> · Saturday baker</p>
|
||
</li>
|
||
<li class="voice" data-accent="pear">
|
||
<p class="voice__text">"I feed it Thursday night, mix Friday, bake to a podcast on Saturday morning. It finally just fits around my week."</p>
|
||
<p class="voice__by"><span class="voice__chip"></span><b>Lena</b> · 60 loaves in</p>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- ─── Pricing ─── -->
|
||
<section class="section section--band" id="pricing" aria-labelledby="price-title">
|
||
<header class="section__head section__head--center">
|
||
<p class="eyebrow"><span class="eyebrow__dot eyebrow__dot--pear"></span> Pricing</p>
|
||
<h2 class="section__title" id="price-title">Free to bake. Cheap to get good.</h2>
|
||
</header>
|
||
<div class="plans">
|
||
<article class="plan">
|
||
<p class="plan__name">Free</p>
|
||
<p class="plan__price"><span class="plan__num">$0</span></p>
|
||
<p class="plan__note">The recipe, the four stages, and manual timers. Forever.</p>
|
||
<ul class="plan__list">
|
||
<li>The full guided method</li>
|
||
<li>Manual stage timers</li>
|
||
<li>One starter to track</li>
|
||
</ul>
|
||
<a class="btn btn--outline btn--mint btn--block" href="#" data-burst>Read the recipe</a>
|
||
</article>
|
||
<article class="plan plan--feature">
|
||
<span class="plan__badge">Most baked</span>
|
||
<p class="plan__name">Plus</p>
|
||
<p class="plan__price"><span class="plan__num">$4</span><span class="plan__unit">/ month</span></p>
|
||
<p class="plan__note">Reminders that read your kitchen, and every loaf you'll ever bake. Or $30 a year.</p>
|
||
<ul class="plan__list">
|
||
<li>Smart reminders, timed to your kitchen's temperature</li>
|
||
<li>Unlimited bakes & saved recipes</li>
|
||
<li>Hydration & timing calculator</li>
|
||
<li>Apple Watch & home-screen widgets</li>
|
||
</ul>
|
||
<a class="btn btn--mint btn--block" href="#" data-burst>Start a free month</a>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── Final CTA · Narrative Workflow foot ─── -->
|
||
<section class="section closer" aria-labelledby="closer-title">
|
||
<h2 class="closer__title" id="closer-title">Start at stage one.</h2>
|
||
<p class="closer__lede">Feed a starter tonight and you'll have something worth slicing by the weekend. The recipe's free — read the whole thing before you commit to anything.</p>
|
||
<div class="hero__cta" style="justify-content:center">
|
||
<a class="btn btn--mint btn--lg" href="#" data-burst>Feed your starter <span class="btn__arrow" aria-hidden="true">→</span></a>
|
||
<a class="btn btn--outline btn--lg btn--mint" href="#pricing">See pricing</a>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="footer__inner">
|
||
<p class="footer__statement">Bread takes its time.</p>
|
||
<div class="footer__meta">
|
||
<a class="footer__brand" href="#"><span class="bub-mark" aria-hidden="true"></span> Bubble</a>
|
||
<p class="footer__col"><span>Bubble Bakes, Inc.</span><span>Remote · flour everywhere</span></p>
|
||
<p class="footer__col"><a href="#stages">The method</a><a href="#numbers">The math</a><a href="#pricing">Pricing</a><a href="#">hello@bubble.bake</a></p>
|
||
<p class="footer__col footer__copy">© 2024 — 2026 Bubble<br /><span class="footer__hash">feed · mix · prove · bake</span></p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|