Pages Easy
Shop — Brand Story / About
A warm, premium brand-story page for an e-commerce shop. A full-bleed hero carries the mission statement, then a four-step milestone timeline with an animated progress bar, three values cards, and a dark materials section where stat counters tick up on scroll. A founder note closes with a handwritten signature, followed by a press-logo strip and a shop call-to-action with a working newsletter sign-up and scroll-reveal animation throughout.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #fffdf9;
--bg-warm: #fbf4ea;
--bg-deep: #1d1812;
--ink: #211c16;
--muted: #756b5c;
--brand: #b5772f;
--brand-d: #935c1e;
--accent: #e8a13a;
--ok: #2f8a5b;
--line: rgba(33, 28, 22, 0.12);
--card: #ffffff;
--shadow: 0 18px 50px -24px rgba(45, 33, 16, 0.45);
--radius: 18px;
--maxw: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--bg);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, blockquote {
font-family: "Fraunces", "Fraunces fallback", Georgia, serif;
line-height: 1.1;
margin: 0;
letter-spacing: -0.01em;
}
img { max-width: 100%; }
a { color: inherit; }
.wrap {
width: min(100% - 2.5rem, var(--maxw));
margin-inline: auto;
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
.skip {
position: absolute;
left: 1rem; top: -3rem;
background: var(--ink);
color: #fff;
padding: 0.6rem 1rem;
border-radius: 10px;
z-index: 100;
transition: top 0.2s;
text-decoration: none;
}
.skip:focus { top: 1rem; }
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
border-radius: 6px;
}
/* ---------- Buttons ---------- */
.btn {
--b: var(--brand);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
font: 600 0.95rem/1 "Inter", sans-serif;
padding: 0.85rem 1.4rem;
border-radius: 999px;
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: transform 0.12s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--solid {
background: var(--brand);
color: #fff;
box-shadow: 0 10px 24px -12px rgba(149, 92, 30, 0.7);
}
.btn--solid:hover { background: var(--brand-d); box-shadow: 0 14px 30px -12px rgba(149, 92, 30, 0.8); }
.btn--ghost {
background: transparent;
color: var(--ink);
border-color: var(--line);
}
.btn--ghost:hover { background: var(--bg-warm); border-color: var(--brand); color: var(--brand-d); }
.link {
font-weight: 600;
color: var(--brand-d);
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-color 0.18s;
}
.link:hover { border-color: var(--brand); }
.eyebrow {
font: 600 0.78rem/1 "Inter", sans-serif;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-d);
margin: 0 0 0.9rem;
}
.center { text-align: center; }
/* ---------- Topbar ---------- */
.topbar {
position: sticky;
top: 0;
z-index: 40;
background: rgba(255, 253, 249, 0.82);
backdrop-filter: saturate(140%) blur(12px);
border-bottom: 1px solid var(--line);
}
.topbar__inner {
display: flex;
align-items: center;
gap: 1.5rem;
height: 66px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
color: var(--ink);
font-weight: 700;
}
.brand__mark { color: var(--brand); display: inline-flex; }
.brand__name {
font-family: "Fraunces", serif;
font-size: 1.18rem;
letter-spacing: -0.01em;
}
.topnav {
display: flex;
gap: 1.4rem;
margin-left: auto;
}
.topnav a {
text-decoration: none;
color: var(--muted);
font-weight: 500;
font-size: 0.92rem;
padding: 0.3rem 0;
position: relative;
}
.topnav a::after {
content: "";
position: absolute;
left: 0; bottom: -2px;
width: 0; height: 2px;
background: var(--brand);
transition: width 0.2s;
}
.topnav a:hover { color: var(--ink); }
.topnav a:hover::after { width: 100%; }
.topbar__cta { padding: 0.6rem 1.1rem; }
/* ---------- Hero ---------- */
.hero {
position: relative;
overflow: hidden;
background:
radial-gradient(120% 90% at 80% -10%, #fbe6c4 0%, rgba(251, 230, 196, 0) 55%),
linear-gradient(180deg, #fdf6ec 0%, var(--bg) 100%);
padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
}
.hero__glow {
position: absolute;
width: 520px; height: 520px;
right: -120px; top: -160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(232, 161, 58, 0.35), rgba(232, 161, 58, 0) 68%);
filter: blur(8px);
pointer-events: none;
}
.hero__inner { position: relative; max-width: 760px; }
.hero__title {
font-size: clamp(2.5rem, 7vw, 4.4rem);
font-weight: 600;
margin-bottom: 1.2rem;
}
.hero__lede {
font-size: clamp(1.05rem, 2.2vw, 1.28rem);
color: var(--muted);
max-width: 56ch;
margin: 0 0 1.8rem;
}
.hero__cta {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-bottom: 2rem;
}
.hero__trust {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1.4rem;
font-size: 0.9rem;
color: var(--muted);
font-weight: 500;
}
.hero__trust span { display: inline-flex; align-items: center; gap: 0.3rem; }
/* ---------- Story ---------- */
.story { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.story__grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.story__art {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
aspect-ratio: 1 / 1.05;
}
.story__tile {
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.story__tile--a {
background: linear-gradient(155deg, #d99e52, #b5772f 70%);
grid-row: span 2;
}
.story__tile--b {
display: grid;
place-items: center;
background: linear-gradient(160deg, #3a3128, #20180f);
align-self: stretch;
padding: 1rem;
}
.story__body h2 {
font-size: clamp(1.7rem, 4vw, 2.6rem);
margin-bottom: 1.1rem;
}
.story__body p {
color: var(--muted);
margin: 0 0 1rem;
font-size: 1.04rem;
}
.story__body .link { margin-top: 0.4rem; display: inline-block; }
/* ---------- Timeline ---------- */
.timeline {
background: var(--bg-warm);
padding: clamp(3.5rem, 8vw, 6rem) 0;
border-block: 1px solid var(--line);
}
.timeline h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-bottom: 2.8rem; }
.tl {
position: relative;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.tl__progress {
position: absolute;
left: 0; right: 0; top: 9px;
height: 3px;
background: var(--line);
border-radius: 2px;
overflow: hidden;
}
.tl__progress i {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, var(--brand), var(--accent));
border-radius: 2px;
transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.tl__item { position: relative; padding-top: 2.4rem; }
.tl__dot {
position: absolute;
top: 2px; left: 0;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--bg-warm);
border: 3px solid var(--brand);
box-shadow: 0 0 0 4px var(--bg-warm);
}
.tl__year {
display: inline-block;
font-family: "Fraunces", serif;
font-weight: 600;
color: var(--brand-d);
font-size: 1.1rem;
margin-bottom: 0.35rem;
}
.tl__item h3 { font-size: 1.12rem; margin-bottom: 0.45rem; font-weight: 600; }
.tl__item p { color: var(--muted); font-size: 0.95rem; margin: 0; }
/* ---------- Values ---------- */
.values { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.values h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-bottom: 2.6rem; }
.vgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
}
.vcard {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.8rem 1.6rem;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.vcard:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: rgba(181, 119, 47, 0.4);
}
.vcard__ico {
display: inline-grid;
place-items: center;
width: 52px; height: 52px;
font-size: 1.6rem;
border-radius: 14px;
background: var(--bg-warm);
margin-bottom: 1rem;
}
.vcard h3 { font-size: 1.25rem; margin-bottom: 0.5rem; font-weight: 600; }
.vcard p { color: var(--muted); margin: 0; }
/* ---------- Materials + Stats ---------- */
.materials {
background:
radial-gradient(80% 120% at 100% 0%, rgba(232, 161, 58, 0.1), transparent 60%),
var(--bg-deep);
color: #f6efe3;
padding: clamp(3.5rem, 8vw, 6rem) 0;
}
.materials__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.materials .eyebrow { color: var(--accent); }
.materials h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-bottom: 1.1rem; color: #fff; }
.materials__copy p { color: #cdc2b1; max-width: 46ch; }
.chips {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
padding: 0;
margin: 1.5rem 0 0;
}
.chips li {
font-size: 0.82rem;
font-weight: 500;
padding: 0.4rem 0.85rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
color: #f0e7d8;
}
.stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.stat {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius);
padding: 1.5rem 1.3rem;
}
.stat__num {
display: block;
font-family: "Fraunces", serif;
font-weight: 600;
font-size: clamp(2rem, 5vw, 2.8rem);
color: var(--accent);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.stat__label {
display: block;
margin-top: 0.5rem;
color: #c9bda9;
font-size: 0.9rem;
}
/* ---------- Founder ---------- */
.founder { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.founder__card {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
background: var(--bg-warm);
border: 1px solid var(--line);
border-radius: 26px;
padding: clamp(1.8rem, 5vw, 3rem);
}
.founder__avatar {
width: 96px; height: 96px;
border-radius: 50%;
display: grid;
place-items: center;
font-family: "Fraunces", serif;
font-weight: 600;
font-size: 1.7rem;
color: #fff;
background: linear-gradient(150deg, #d99e52, #935c1e);
box-shadow: var(--shadow);
}
.founder blockquote {
font-size: clamp(1.25rem, 2.6vw, 1.7rem);
font-weight: 500;
margin: 0.4rem 0 0.8rem;
max-width: 60ch;
}
.founder__sign {
font-family: "Fraunces", serif;
font-style: italic;
font-size: 2rem;
color: var(--brand-d);
margin: 0;
transform: rotate(-4deg);
transform-origin: left;
}
.founder__role {
color: var(--muted);
font-size: 0.92rem;
margin: 0.6rem 0 0;
font-weight: 500;
}
/* ---------- Press ---------- */
.press {
padding: clamp(2.5rem, 6vw, 4rem) 0;
border-top: 1px solid var(--line);
}
.press__title {
text-align: center;
font-size: 0.8rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 1.6rem;
}
.press__row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: clamp(1.5rem, 5vw, 3.5rem);
}
.press__logo {
font-weight: 700;
letter-spacing: 0.08em;
font-size: 1.15rem;
color: var(--muted);
opacity: 0.7;
transition: opacity 0.2s, color 0.2s;
}
.press__logo.serif { font-family: "Fraunces", serif; font-style: italic; letter-spacing: 0; }
.press__logo:hover { opacity: 1; color: var(--ink); }
/* ---------- CTA ---------- */
.cta { padding: 0 0 clamp(3rem, 7vw, 5rem); }
.cta__card {
text-align: center;
background:
radial-gradient(120% 120% at 50% 0%, #fbe6c4, var(--bg-warm) 70%);
border: 1px solid var(--line);
border-radius: 28px;
padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}
.cta__card h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-bottom: 0.8rem; }
.cta__card > p { color: var(--muted); max-width: 50ch; margin: 0 auto 2rem; }
.cta__actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
align-items: center;
}
.cta__news {
display: flex;
gap: 0.5rem;
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.3rem 0.3rem 0.3rem 0.4rem;
}
.cta__news input {
border: 0;
background: transparent;
padding: 0.5rem 0.7rem;
font: 500 0.92rem "Inter", sans-serif;
color: var(--ink);
min-width: 180px;
}
.cta__news input:focus { outline: none; }
.cta__news .btn { padding: 0.65rem 1.1rem; }
/* ---------- Footer ---------- */
.foot {
border-top: 1px solid var(--line);
padding: 1.6rem 0;
}
.foot__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem;
align-items: center;
}
.foot__brand { font-family: "Fraunces", serif; font-weight: 600; }
.foot__note { color: var(--muted); font-size: 0.85rem; }
/* ---------- Toast ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 1.6rem;
transform: translate(-50%, 1.5rem);
background: var(--ink);
color: #fff;
padding: 0.8rem 1.3rem;
border-radius: 999px;
font-size: 0.92rem;
font-weight: 500;
box-shadow: var(--shadow);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s, transform 0.25s;
z-index: 90;
max-width: calc(100% - 2rem);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Reveal ---------- */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.topnav { display: none; }
.story__grid,
.materials__grid { grid-template-columns: 1fr; }
.story__art { max-width: 420px; aspect-ratio: 1.4 / 1; }
.tl { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
.tl__progress { display: none; }
.vgrid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.topbar__cta { display: none; }
.hero__trust { gap: 0.5rem 1rem; }
.tl { grid-template-columns: 1fr; }
.stats { grid-template-columns: 1fr; }
.founder__card { grid-template-columns: 1fr; text-align: center; }
.founder__avatar { margin: 0 auto; }
.founder__sign { transform: rotate(-4deg); transform-origin: center; }
.cta__news { flex-direction: column; border-radius: 18px; padding: 0.6rem; }
.cta__news input { text-align: center; }
.cta__news .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.reveal { opacity: 1; transform: none; transition: none; }
.tl__progress i { transition: none; }
}(function () {
"use strict";
var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 2600);
}
/* ---------- Animated stat counters ---------- */
function formatCount(el, value) {
var prefix = el.getAttribute("data-prefix") || "";
var suffix = el.getAttribute("data-suffix") || "";
el.textContent = prefix + Math.round(value) + suffix;
}
function runCounter(el) {
if (el.dataset.done === "1") return;
el.dataset.done = "1";
var target = parseFloat(el.getAttribute("data-count")) || 0;
if (reduceMotion) {
formatCount(el, target);
return;
}
var duration = 1300;
var start = null;
function step(ts) {
if (start === null) start = ts;
var p = Math.min((ts - start) / duration, 1);
// easeOutCubic
var eased = 1 - Math.pow(1 - p, 3);
formatCount(el, target * eased);
if (p < 1) requestAnimationFrame(step);
else formatCount(el, target);
}
requestAnimationFrame(step);
}
/* ---------- Timeline progress fill ---------- */
var tlFill = document.querySelector(".tl__progress i");
var tlDone = false;
function fillTimeline() {
if (tlDone || !tlFill) return;
tlDone = true;
requestAnimationFrame(function () {
tlFill.style.width = "100%";
});
}
/* ---------- Scroll reveal + triggers via IntersectionObserver ---------- */
var reveals = Array.prototype.slice.call(document.querySelectorAll(".reveal"));
function revealAll() {
reveals.forEach(function (el) { el.classList.add("in"); });
}
if (!("IntersectionObserver" in window) || reduceMotion) {
revealAll();
document.querySelectorAll(".stat__num").forEach(runCounter);
fillTimeline();
} else {
var io = new IntersectionObserver(function (entries, obs) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
var el = entry.target;
el.classList.add("in");
if (el.classList.contains("stat")) {
var num = el.querySelector(".stat__num");
if (num) runCounter(num);
}
if (el.closest(".timeline")) fillTimeline();
obs.unobserve(el);
});
}, { threshold: 0.18, rootMargin: "0px 0px -8% 0px" });
reveals.forEach(function (el) { io.observe(el); });
}
/* ---------- Newsletter form ---------- */
var form = document.getElementById("newsForm");
if (form) {
form.addEventListener("submit", function (e) {
e.preventDefault();
var input = document.getElementById("email");
var value = (input.value || "").trim();
var valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
if (!valid) {
toast("Please enter a valid email address.");
input.focus();
return;
}
input.value = "";
input.blur();
toast("Thanks for joining — watch your inbox for our story.");
});
}
/* ---------- Shop CTA button ---------- */
var shopBtn = document.getElementById("shopBtn");
if (shopBtn) {
shopBtn.addEventListener("click", function () {
toast("The collection is fictional — but thanks for the click!");
});
}
/* ---------- Smooth in-page nav (respects reduced motion) ---------- */
document.querySelectorAll('a[href^="#"]').forEach(function (a) {
a.addEventListener("click", function (e) {
var id = a.getAttribute("href");
if (id === "#" || id.length < 2) return;
var target = document.querySelector(id);
if (!target) return;
e.preventDefault();
target.scrollIntoView({
behavior: reduceMotion ? "auto" : "smooth",
block: "start"
});
if (target.id && history.replaceState) {
history.replaceState(null, "", id);
}
});
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lumen & Field — Our Story</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=Fraunces:opsz,[email protected],400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="topbar" role="banner">
<div class="wrap topbar__inner">
<a class="brand" href="#top" aria-label="Lumen and Field home">
<span class="brand__mark" aria-hidden="true">
<svg viewBox="0 0 32 32" width="28" height="28" fill="none">
<circle cx="16" cy="16" r="14" stroke="currentColor" stroke-width="2"/>
<path d="M16 6c4 4 4 16 0 20-4-4-4-16 0-20Z" fill="currentColor"/>
</svg>
</span>
<span class="brand__name">Lumen & Field</span>
</a>
<nav class="topnav" aria-label="Primary">
<a href="#story">Story</a>
<a href="#timeline">Journey</a>
<a href="#values">Values</a>
<a href="#materials">Materials</a>
</nav>
<a class="btn btn--solid topbar__cta" href="#shop-cta">Shop the collection</a>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero" id="top" aria-labelledby="hero-h">
<div class="hero__glow" aria-hidden="true"></div>
<div class="wrap hero__inner">
<p class="eyebrow reveal">Est. 2014 · Portland, Oregon</p>
<h1 id="hero-h" class="hero__title reveal">
We make daylight<br />you can keep.
</h1>
<p class="hero__lede reveal">
Lumen & Field began as a single hand-poured candle on a kitchen table.
A decade later we craft lighting and home goods designed to slow a room
down — warm, honest, and built to outlast a trend.
</p>
<div class="hero__cta reveal">
<a class="btn btn--solid" href="#shop-cta">Explore the collection</a>
<a class="btn btn--ghost" href="#story">Read our story</a>
</div>
<div class="hero__trust reveal" role="list" aria-label="Brand promises">
<span role="listitem">🌱 Carbon-neutral shipping</span>
<span role="listitem">⭐ 4.9 · 12,800 reviews</span>
<span role="listitem">♾️ Lifetime repair pledge</span>
</div>
</div>
</section>
<!-- STORY -->
<section class="story" id="story" aria-labelledby="story-h">
<div class="wrap story__grid">
<div class="story__art reveal" aria-hidden="true">
<div class="story__tile story__tile--a"></div>
<div class="story__tile story__tile--b">
<svg viewBox="0 0 120 160" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
<rect x="44" y="40" width="32" height="86" rx="4" fill="rgba(255,255,255,.85)"/>
<ellipse cx="60" cy="40" rx="16" ry="6" fill="rgba(255,255,255,.6)"/>
<path d="M60 14c5 8 5 16 0 24-5-8-5-16 0-24Z" fill="#f5b942"/>
<path d="M60 18c3 5 3 10 0 16-3-6-3-11 0-16Z" fill="#fff2cc"/>
</svg>
</div>
</div>
<div class="story__body">
<p class="eyebrow reveal">Our mission</p>
<h2 id="story-h" class="reveal">Make the everyday feel intentional.</h2>
<p class="reveal">
Mass production taught us to expect less from the objects we live with.
We wanted the opposite — pieces you notice, repair, and pass on. Every
Lumen & Field product starts with a question: will this still feel
good to own in ten years?
</p>
<p class="reveal">
We answer it with slow materials, small batches, and a workshop that
knows every maker by name. No outsourced anonymity, no planned
obsolescence — just light, warmth, and craft you can stand behind.
</p>
<a class="link reveal" href="#materials">See how we make things →</a>
</div>
</div>
</section>
<!-- TIMELINE -->
<section class="timeline" id="timeline" aria-labelledby="tl-h">
<div class="wrap">
<p class="eyebrow center reveal">The journey</p>
<h2 id="tl-h" class="center reveal">A decade, milestone by milestone</h2>
<ol class="tl" aria-label="Brand milestones">
<span class="tl__progress" aria-hidden="true"><i></i></span>
<li class="tl__item reveal">
<span class="tl__dot" aria-hidden="true"></span>
<span class="tl__year">2014</span>
<h3>One candle, one table</h3>
<p>Founder Mara Quinn pours the first 40 candles by hand and sells out at a Saturday market.</p>
</li>
<li class="tl__item reveal">
<span class="tl__dot" aria-hidden="true"></span>
<span class="tl__year">2017</span>
<h3>The first workshop</h3>
<p>A 600 sq ft studio opens. We hire three makers and add ceramics to the line.</p>
</li>
<li class="tl__item reveal">
<span class="tl__dot" aria-hidden="true"></span>
<span class="tl__year">2020</span>
<h3>Closing the loop</h3>
<p>We launch refill jars and a take-back program — 90% less packaging waste per order.</p>
</li>
<li class="tl__item reveal">
<span class="tl__dot" aria-hidden="true"></span>
<span class="tl__year">2024</span>
<h3>Carbon-neutral, certified</h3>
<p>Every shipment offsets its footprint. The repair pledge becomes lifetime, for good.</p>
</li>
</ol>
</div>
</section>
<!-- VALUES -->
<section class="values" id="values" aria-labelledby="val-h">
<div class="wrap">
<p class="eyebrow center reveal">What we stand for</p>
<h2 id="val-h" class="center reveal">Three promises in every box</h2>
<div class="vgrid">
<article class="vcard reveal">
<span class="vcard__ico" aria-hidden="true">🤲</span>
<h3>Made by hand</h3>
<p>Small batches, real names. Nothing leaves the workshop without a maker's mark.</p>
</article>
<article class="vcard reveal">
<span class="vcard__ico" aria-hidden="true">🌍</span>
<h3>Kind to the planet</h3>
<p>Renewable materials, recyclable packaging, and carbon-neutral delivery as standard.</p>
</article>
<article class="vcard reveal">
<span class="vcard__ico" aria-hidden="true">🛠️</span>
<h3>Built to be kept</h3>
<p>Free repairs for life. If we can mend it, we will — so it never becomes landfill.</p>
</article>
</div>
</div>
</section>
<!-- MATERIALS / SUSTAINABILITY + STATS -->
<section class="materials" id="materials" aria-labelledby="mat-h">
<div class="wrap materials__grid">
<div class="materials__copy">
<p class="eyebrow reveal">Materials & impact</p>
<h2 id="mat-h" class="reveal">Honest materials, measured impact.</h2>
<p class="reveal">
We choose renewable coconut-soy wax, reclaimed oak, and lead-free
cotton wicks — then track every kilo. Here's where a decade of slow
choices has landed us.
</p>
<ul class="chips reveal" aria-label="Materials">
<li>Coconut-soy wax</li>
<li>Reclaimed oak</li>
<li>Recycled glass</li>
<li>Plastic-free packaging</li>
</ul>
</div>
<div class="stats" role="list" aria-label="Sustainability stats">
<div class="stat reveal" role="listitem">
<span class="stat__num" data-count="100" data-suffix="%">0</span>
<span class="stat__label">Carbon-neutral shipping</span>
</div>
<div class="stat reveal" role="listitem">
<span class="stat__num" data-count="92" data-suffix="%">0</span>
<span class="stat__label">Less packaging waste</span>
</div>
<div class="stat reveal" role="listitem">
<span class="stat__num" data-count="46" data-prefix="" data-suffix="k">0</span>
<span class="stat__label">Items repaired, not replaced</span>
</div>
<div class="stat reveal" role="listitem">
<span class="stat__num" data-count="18" data-suffix=" t">0</span>
<span class="stat__label">CO₂ offset this year</span>
</div>
</div>
</div>
</section>
<!-- FOUNDER NOTE -->
<section class="founder" aria-labelledby="fn-h">
<div class="wrap founder__card reveal">
<div class="founder__avatar" aria-hidden="true">MQ</div>
<div class="founder__body">
<p class="eyebrow">A note from our founder</p>
<blockquote id="fn-h">
“I never set out to build a brand. I set out to make one good thing,
then another. Every order you place keeps a maker's hands busy and a
little more landfill empty. Thank you for choosing slow.”
</blockquote>
<p class="founder__sign" aria-hidden="true">Mara</p>
<p class="founder__role">Mara Quinn · Founder & Head of Craft</p>
</div>
</div>
</section>
<!-- PRESS -->
<section class="press" aria-labelledby="press-h">
<div class="wrap">
<p id="press-h" class="press__title reveal">As featured in</p>
<div class="press__row reveal" role="list" aria-label="Press logos">
<span class="press__logo" role="listitem">KINFOLK</span>
<span class="press__logo" role="listitem">Dwell</span>
<span class="press__logo serif" role="listitem">The Edit</span>
<span class="press__logo" role="listitem">GOOP</span>
<span class="press__logo" role="listitem">MONOCLE</span>
</div>
</div>
</section>
<!-- SHOP CTA -->
<section class="cta" id="shop-cta" aria-labelledby="cta-h">
<div class="wrap cta__card reveal">
<h2 id="cta-h">Ready to bring some light home?</h2>
<p>Explore the pieces ten years of craft have led us to. Free carbon-neutral shipping over $75.</p>
<div class="cta__actions">
<button class="btn btn--solid" type="button" id="shopBtn">Shop the collection</button>
<form class="cta__news" id="newsForm" novalidate>
<label class="sr-only" for="email">Email address</label>
<input id="email" type="email" name="email" placeholder="[email protected]" autocomplete="email" required />
<button class="btn btn--ghost" type="submit">Join the list</button>
</form>
</div>
</div>
</section>
</main>
<footer class="foot" role="contentinfo">
<div class="wrap foot__inner">
<span class="foot__brand">Lumen & Field</span>
<span class="foot__note">Illustrative storefront UI · fictional products & reviews</span>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Brand Story / About
A brand-building About page for the fictional homewares label Lumen & Field. It opens on a full-bleed gradient hero with the mission statement and trust signals, flows into a two-column origin story with a CSS-rendered product tile, then a four-step journey timeline whose progress bar fills in as it enters view. Three values cards and a dark “materials & impact” band follow, where four stat counters animate from zero on scroll.
A founder note rounds things off with a gradient avatar and a handwritten signature, then a press-logo strip and a final shop call-to-action. Interactions are pure vanilla JS: an IntersectionObserver drives the scroll-reveal, the timeline fill, and the counters, while the newsletter form validates the email and confirms with a toast.
Built with the shared e-commerce design system — clean warm whites, a single amber brand accent, Fraunces display type over Inter — and responsive down to ~360px, collapsing the timeline and stats to a single column.
Illustrative storefront UI only — fictional products, prices, and reviews. No real checkout.