<!doctype html>

<head>

<title>Lumen & Co. — Modern Home Goods</title>

<style>

/* -------------------------

Theme (Lumen & Co.)

Clean, warm, modern — unique color + font stack

------------------------- */

:root{

--bg: #faf9f6;

--card: #ffffff;

--muted: #7a7a7a;

--accent: #2b7a78; /* teal */

--accent-2: #f4a261; /* warm highlight */

--radius: 12px;

--shadow: 0 6px 20px rgba(20,20,20,0.06);

--max-width: 1100px;

--gap: 20px;

--nav-height: 72px;

font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, -apple-system;

}

/* Global reset */

*{box-sizing:border-box}

html,body{height:100%}

body{

margin:0;

background: linear-gradient(180deg, var(--bg), #fff);

color:#111;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

line-height:1.45;

padding-bottom:60px; /* for footer breathing on small screens */

}

.container{

max-width:var(--max-width);

margin:0 auto;

padding:28px;

}

/* Header */

header.site-header{

background:transparent;

position:sticky;

top:0;

z-index:40;

backdrop-filter: blur(6px);

-webkit-backdrop-filter: blur(6px);

border-bottom:1px solid rgba(17,17,17,0.04);

}

.header-inner{

max-width:var(--max-width);

margin:0 auto;

height:var(--nav-height);

display:flex;

align-items:center;

justify-content:space-between;

padding:0 20px;

}

.brand{

display:flex;

gap:14px;

align-items:center;

text-decoration:none;

color:inherit;

}

.logo {

width:48px;

height:48px;

border-radius:10px;

background:linear-gradient(135deg,var(--accent),#145f5d);

display:flex;

align-items:center;

justify-content:center;

color:white;

font-weight:700;

box-shadow: var(--shadow);

font-size:18px;

}

.brand h1{

margin:0;

font-size:16px;

letter-spacing:0.2px;

}

.brand p{margin:0;font-size:12px;color:var(--muted)}

nav.top-nav{

display:flex;

gap:18px;

align-items:center;

}

nav.top-nav a{

text-decoration:none;

color:var(--muted);

font-size:14px;

padding:8px 10px;

border-radius:8px;

}

nav.top-nav a:hover{color:var(--accent); background:rgba(43,122,120,0.06)}

.cart{

display:inline-flex;

align-items:center;

gap:10px;

background:var(--accent);

color:white;

padding:10px 12px;

border-radius:10px;

text-decoration:none;

font-weight:600;

box-shadow: 0 8px 18px rgba(43,122,120,0.12);

}

/* Hero */

.hero{

display:grid;

grid-template-columns: 1fr 420px;

gap:var(--gap);

align-items:stretch;

margin-top:28px;

padding:28px;

}

.hero-card{

background:linear-gradient(180deg, rgba(255,255,255,0.9), var(--card));

border-radius: var(--radius);

padding:28px;

box-shadow:var(--shadow);

}

.hero h2{

margin:0 0 10px 0;

font-size:28px;

letter-spacing:-0.3px;

}

.hero p{margin:0 0 16px 0; color:var(--muted)}

.hero .cta{

display:inline-block;

background:var(--accent);

color:white;

padding:12px 18px;

border-radius:10px;

text-decoration:none;

font-weight:700;

}

.hero-side{

border-radius:var(--radius);

overflow:hidden;

background:linear-gradient(180deg,#fff,#f7f7f7);

box-shadow:var(--shadow);

padding:0;

display:flex;

align-items:center;

justify-content:center;

}

.hero-side img{display:block; width:100%; height:100%; object-fit:cover}

/* Products */

.section-title{

margin:40px 0 18px 0;

display:flex;

justify-content:space-between;

align-items:center;

gap:16px;

}

.section-title h3{margin:0;font-size:18px}

.grid{

display:grid;

grid-template-columns: repeat(3, 1fr);

gap:18px;

}

.card{

background:var(--card);

border-radius:14px;

overflow:hidden;

box-shadow:var(--shadow);

display:flex;

flex-direction:column;

transition:transform .18s ease, box-shadow .18s ease;

}

.card:hover{ transform: translateY(-6px) }

.card img{ width:100%; height:0; padding-bottom:100%; object-fit:cover; display:block }

.card-body{

padding:14px;

display:flex;

gap:10px;

align-items:center;

justify-content:space-between;

}

.product-info{flex:1}

.product-title{margin:0 0 6px 0; font-size:15px; font-weight:600}

.product-meta{font-size:13px; color:var(--muted)}

.price{

font-weight:800;

color:var(--accent-2);

font-size:16px;

}

.card-footer{

padding:12px 14px 18px 14px;

display:flex;

gap:10px;

align-items:center;

}

.btn{

border:0;

background:linear-gradient(90deg,var(--accent), #1b5e5d);

color:white;

padding:10px 14px;

border-radius:10px;

text-decoration:none;

display:inline-flex;

align-items:center;

gap:8px;

font-weight:700;

cursor:pointer;

font-size:13px;

}

.btn.secondary{

background:transparent;

color:var(--muted);

border:1px solid rgba(17,17,17,0.06);

font-weight:600;

}

/* Footer */

footer.site-footer{

margin-top:46px;

border-top:1px solid rgba(17,17,17,0.04);

background:transparent;

padding:28px 0;

position:relative;

}

.footer-inner{

max-width:var(--max-width);

margin:0 auto;

padding:0 20px;

display:flex;

gap:20px;

align-items:flex-start;

justify-content:space-between;

}

.footer-col{min-width:160px}

.footer-col h4{margin:0 0 8px 0; font-size:14px}

.footer-links{display:flex;flex-direction:column;gap:8px}

.footer-links a{color:var(--muted); text-decoration:none; font-size:14px}

.legal{color:var(--muted); font-size:13px; margin-top:14px}

/* Responsive */

@media (max-width:980px){

.hero{ grid-template-columns: 1fr; }

.grid{ grid-template-columns: repeat(2, 1fr) }

.header-inner{ padding:0 14px }

}

@media (max-width:560px){

.grid{ grid-template-columns: 1fr }

.header-inner{ gap:8px }

nav.top-nav{ display:none }

.brand p{display:none}

.hero{ padding:20px }

}

/* subtle product badge */

.badge{

position:absolute;

margin:12px;

background:var(--accent);

color:white;

padding:6px 9px;

border-radius:8px;

font-size:12px;

font-weight:700;

box-shadow: 0 6px 16px rgba(43,122,120,0.12);

}

/* small helpers */

.muted{color:var(--muted)}

</style>

</head>

<body>

<div>

<h1>Lumen & Co.</h1>

<p>Curated home goods</p>

</div>

</a>

<a href="#">Collections</a>

<a href="#">Journal</a>

<a href="#">About</a>

</nav>

🧾 Cart (0)

</a>

</div>

</header>

<main>

<h2>Handpicked pieces that feel like home</h2>

<p class="muted">Simple, functional, and thoughtfully designed small-batch goods for everyday living. Free shipping on orders over $80.</p>

<a href="#" class="cta" role="button">Shop New Arrivals</a>

<a href="#" class="btn secondary" role="button">View Bestsellers</a>

</div>

<div>

<div style="font-weight:700">Sustainable materials</div>

<div class="muted" style="font-size:13px">Carefully sourced & low-waste</div>

</div>

<div>

<div style="font-weight:700">Quick dispatch</div>

<div class="muted" style="font-size:13px">Ships within 24–48 hrs</div>

</div>

</div>

</section>

<h3>Featured Products</h3>

<p class="muted">New arrivals curated for simplicity</p>

</div>

</div>

<h4 id="p1-title" class="product-title">Arcus Ceramic Lamp</h4>

<div class="product-meta muted">Hand-glazed ceramic with dimmer</div>

</div>

</div>

<a class="btn secondary" href="#" role="button" aria-label="View Arcus Ceramic Lamp">Quick view</a>

</div>

</article>

</div>

<h4 id="p2-title" class="product-title">Pebble Throw Blanket</h4>

<div class="product-meta muted">Lightweight woven cotton, 130x180cm</div>

</div>

</div>

<a class="btn secondary" href="#" role="button" aria-label="View Pebble Throw Blanket">Quick view</a>

</div>

</article>

</div>

<h4 id="p3-title" class="product-title">Morrow Oak Tray</h4>

<div class="product-meta muted">Solid oak, natural oil finish</div>

</div>

</div>

<a class="btn secondary" href="#" role="button" aria-label="View Morrow Oak Tray">Quick view</a>

</div>

</article>

</div>

<h4 id="p4-title" class="product-title">Noble Stone Coasters (set)</h4>

<div class="product-meta muted">Marbled slate, pack of 4</div>

</div>

</div>

<a class="btn secondary" href="#" role="button" aria-label="View Noble Stone Coasters">Quick view</a>

</div>

</article>

</div>

<h4 id="p5-title" class="product-title">Hearth Reed Diffuser</h4>

<div class="product-meta muted">Cedar + bergamot, 180ml</div>

</div>

</div>

<a class="btn secondary" href="#" role="button" aria-label="View Hearth Reed Diffuser">Quick view</a>

</div>

</article>

</section>

</div>

</main>

<h4 style="margin:0">Lumen & Co.</h4>

<div class="muted" style="font-size:13px">Handpicked home essentials</div>

</div>

</a>

</div>

<h4>Support</h4>

<a href="#">Help Center</a>

<a href="#">Shipping & Returns</a>

<a href="#">Track Order</a>

</div>

<h4>Legal</h4>

<a href="#">Terms of Service</a>

<a href="#">Privacy Policy</a>

<a href="#">Contact</a>

</div>

</footer>

// small dynamic nicety: set current year; no other behavior

document.getElementById('year').textContent = new Date().getFullYear();

</script>

</body>

</html>