<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lumen & Lark — Modern Home & Lifestyle</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--bg: #0f1222;
--bg-soft: #151935;
--card: #1b2044;
--muted: #aeb3d6;
--text: #f7f8ff;
--accent: #86e3ce;
--accent-2:#b8b8ff;
--ring: rgba(134, 227, 206, 0.5);
--max-w: 1200px;
--radius: 16px;
--shadow: 0 10px 30px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset;
--grad: radial-gradient(1000px 600px at 80% -20%, rgba(134,227,206,.15), transparent 60%),
radial-gradient(800px 500px at -10% 10%, rgba(184,184,255,.18), transparent 55%);
}
/* Reset-ish */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--text);
background: var(--bg);
background-image: var(--grad);
line-height: 1.6;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--max-w); margin:0 auto; padding:0 20px}
/* Header */
header{
position: sticky; top:0; z-index: 50;
backdrop-filter: saturate(160%) blur(10px);
background: color-mix(in oklab, var(--bg), transparent 35%);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar{
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding:16px 0;
}
.brand{
display:flex; align-items:center; gap:12px;
}
.brand-mark{
width:36px; height:36px; border-radius:10px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
box-shadow: 0 8px 20px rgba(184,184,255,.3);
}
.brand-name{
font-family: 'Playfair Display', serif;
font-weight:700; letter-spacing:.3px; font-size:1.25rem;
}
nav{display:flex; gap:18px; align-items:center; flex-wrap: wrap;}
nav a{
padding:8px 10px; border-radius:10px; color: var(--muted); font-weight:500;
}
nav a:hover{ color: var(--text); background: rgba(255,255,255,.06)}
.cta{
display:flex; gap:10px; align-items:center;
}
.btn{
padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.06); color:var(--text); font-weight:600;
box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.1) }
.btn--accent{
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color:#0e1020; border-color: transparent;
}
.btn--accent:hover{ filter: brightness(1.05) }
/* Hero */
.hero{
padding: 56px 0 28px;
}
.hero-wrap{
display:grid; grid-template-columns: 1.15fr .85fr; gap:36px; align-items:center;
}
.eyebrow{
display:inline-flex; align-items:center; gap:8px;
padding:6px 12px; border-radius:999px; background: rgba(184,184,255,.15);
color:#dde0ff; font-size:.85rem; font-weight:600; letter-spacing:.3px;
border:1px solid rgba(255,255,255,.1);
}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background: var(--accent)}
h1{
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 5vw, 3.5rem);
line-height:1.15; margin:.6rem 0 1rem;
}
.lead{color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.15rem); max-width: 60ch}
.hero-card{
border-radius: var(--radius);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.08);
padding: 20px; box-shadow: var(--shadow);
}
.hero-card img{border-radius: 12px}
/* Section header */
.section-head{
display:flex; align-items:end; justify-content:space-between; gap:16px; margin: 36px 0 14px;
}
.section-head h2{
margin:0;
font-family:'Playfair Display', serif;
font-size: clamp(1.4rem, 2.8vw, 2rem);
}
.section-head p{margin:0; color:var(--muted)}
/* Products */
.grid{
display:grid; gap: 18px;
grid-template-columns: repeat(12, 1fr);
}
.card{
grid-column: span 12;
border-radius: var(--radius);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.08);
box-shadow: var(--shadow);
overflow:hidden; display:flex; flex-direction:column;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
transform: translateY(-4px);
border-color: color-mix(in oklab, var(--accent) 40%, white 0%);
box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.card-media{
aspect-ratio: 1/1; overflow: hidden; background: #0b0e1b;
}
.card-media img{
width:100%; height:100%; object-fit: cover; transition: transform .5s ease;
}
.card:hover .card-media img{ transform: scale(1.03) }
.card-body{ padding: 16px 16px 18px }
.title{
font-weight:600; font-size:1.05rem; margin: 0 0 4px;
letter-spacing:.2px;
}
.meta{
display:flex; align-items:center; justify-content:space-between; gap:12px;
margin-top: 10px;
}
.price{font-weight:700; font-size:1.05rem; color: var(--accent)}
.ghost{
padding:10px 12px; border-radius: 12px;
border:1px solid rgba(255,255,255,.12);
background: transparent; color: var(--text); font-weight:600;
}
.ghost:hover{ border-color: var(--ring); box-shadow: 0 0 0 6px var(--ring) }
/* Newsletter band */
.band{
margin: 54px 0 28px; padding: 24px;
border-radius: var(--radius);
background: linear-gradient(135deg, rgba(134,227,206,.15), rgba(184,184,255,.15));
border:1px solid rgba(255,255,255,.12);
display:grid; gap:16px; grid-template-columns: 1.2fr .8fr; align-items:center;
}
.band p{margin:6px 0 0; color: var(--text)}
.subscribe{
display:flex; gap:10px; flex-wrap:wrap;
}
.input{
flex:1 1 220px; min-width: 0;
padding:12px 14px; border-radius: 12px; border:1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.06); color:var(--text); outline: none;
}
.input::placeholder{ color: #cfd3f2 }
.submit{ composes: btn btn--accent } /* no-op hint for devs */
/* Footer */
footer{
border-top:1px solid rgba(255,255,255,.08);
margin-top: 28px; padding: 34px 0 40px;
background: color-mix(in oklab, var(--bg), #0b0d1a 20%);
}
.f-grid{
display:grid; gap:18px; grid-template-columns: repeat(12, 1fr);
}
.f-col{grid-column: span 12}
.f-col h4{
margin:0 0 10px; font-family:'Playfair Display', serif; font-weight:700;
letter-spacing:.3px
}
.f-links{display:grid; gap:8px}
.f-links a{ color: var(--muted) }
.f-links a:hover{ color: var(--text) }
.subtle{ color: var(--muted); font-size:.95rem }
.legal{
margin-top: 24px; padding-top: 16px; border-top:1px dashed rgba(255,255,255,.1);
display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
}
.legal .links{ display:flex; gap:14px; flex-wrap: wrap }
.legal a{ color: var(--muted) }
.legal a:hover{ color: var(--text) }
/* Responsive */
@media (min-width: 560px){
.card{ grid-column: span 6 }
.f-col{grid-column: span 6}
}
@media (min-width: 880px){
.card{ grid-column: span 4 }
.f-col--wide{ grid-column: span 6 }
.f-col{ grid-column: span 3 }
}
@media (max-width: 860px){
.hero-wrap{ grid-template-columns: 1fr; }
.band{ grid-template-columns: 1fr; }
}
/* Nice focus outlines for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible{
outline: 3px solid var(--accent); outline-offset: 2px;
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container topbar">
<a href="#" class="brand" aria-label="Lumen & Lark home">
<span class="brand-mark" aria-hidden="true"></span>
<span class="brand-name">Lumen & Lark</span>
</a>
<nav aria-label="Primary">
<a href="#">Shop</a>
<a href="#">New</a>
<a href="#">Collections</a>
<a href="#">About</a>
<a href="#">Support</a>
</nav>
<div class="cta">
<a class="btn" href="#">Sign in</a>
<a class="btn btn--accent" href="#">Cart (0)</a>
</div>
</div>
</header>
<!-- Hero -->
<section class="hero">
<div class="container hero-wrap">
<div>
<span class="eyebrow"><span class="dot"></span> Autumn Capsule • Limited Drop</span>
<h1>Elevate the everyday with considered design.</h1>
<p class="lead">At <strong>Lumen & Lark</strong>, we craft calming essentials for modern living—pieces that balance warm tactility with a clean, contemporary silhouette.</p>
<div style="display:flex; gap:12px; margin-top:16px; flex-wrap:wrap">
<a href="#" class="btn btn--accent">Shop the Capsule</a>
<a href="#" class="btn">Explore Collections</a>
</div>
</div>
<div class="hero-card">
<img src="https://picsum.photos/1000/700?random=901" alt="Lifestyle banner showcasing Lumen & Lark products">
</div>
</div>
</section>
<!-- Products -->
<section class="container">
<div class="section-head">
<h2>Featured Arrivals</h2>
<p>Five hand-picked pieces to refresh your space</p>
</div>
<div class="grid">
<!-- Product 1 -->
<article class="card">
<div class="card-media">
<img src="https://picsum.photos/600/600?random=321" alt="Product photo of the Solace Stone Diffuser">
</div>
<div class="card-body">
<h3 class="title">Solace Stone Diffuser</h3>
<p class="subtle">Soft-matte ceramic, whisper-quiet aroma diffusion.</p>
<div class="meta">
<span class="price">£59</span>
<a class="ghost" href="#">View details</a>
</div>
</div>
</article>
<!-- Product 2 -->
<article class="card">
<div class="card-media">
<img src="https://picsum.photos/600/600?random=322" alt="Product photo of the Haze Linen Throw">
</div>
<div class="card-body">
<h3 class="title">Haze Linen Throw</h3>
<p class="subtle">Belgian-inspired weave, featherlight warmth.</p>
<div class="meta">
<span class="price">£78</span>
<a class="ghost" href="#">View details</a>
</div>
</div>
</article>
<!-- Product 3 -->
<article class="card">
<div class="card-media">
<img src="https://picsum.photos/600/600?random=323" alt="Product photo of the Arc Glow Table Lamp">
</div>
<div class="card-body">
<h3 class="title">Arc Glow Table Lamp</h3>
<p class="subtle">Dimmable, ambient halo for evening rituals.</p>
<div class="meta">
<span class="price">£89</span>
<a class="ghost" href="#">View details</a>
</div>
</div>
</article>
<!-- Product 4 -->
<article class="card">
<div class="card-media">
<img src="https://picsum.photos/600/600?random=324" alt="Product photo of the Cascade Pour-Over Set">
</div>
<div class="card-body">
<h3 class="title">Cascade Pour-Over Set</h3>
<p class="subtle">Ridges for perfect bloom; ritual-ready.</p>
<div class="meta">
<span class="price">£42</span>
<a class="ghost" href="#">View details</a>
</div>
</div>
</article>
<!-- Product 5 -->
<article class="card">
<div class="card-media">
<img src="https://picsum.photos/600/600?random=325" alt="Product photo of the Ember Oak Organizer">
</div>
<div class="card-body">
<h3 class="title">Ember Oak Organizer</h3>
<p class="subtle">Tidy trays for keys, coins & moments.</p>
<div class="meta">
<span class="price">£36</span>
<a class="ghost" href="#">View details</a>
</div>
</div>
</article>
</div>
</section>
<!-- Newsletter -->
<section class="container">
<div class="band">
<div>
<h3 style="margin:0 0 6px; font-family:'Playfair Display', serif">Join the L&L Circle</h3>
<p>New drops, gentle notes on living well, and friends-only perks—no noise.</p>
</div>
<form action="#" method="get" class="subscribe" aria-label="Newsletter signup (non-functional)">
<input class="input" type="email" placeholder="you@example.com" aria-label="Email address">
<button class="btn btn--accent" type="button">Subscribe</button>
</form>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="f-grid">
<div class="f-col f-col--wide">
<div class="brand" style="margin-bottom:8px">
<span class="brand-mark" aria-hidden="true"></span>
<span class="brand-name">Lumen & Lark</span>
</div>
<p class="subtle">Thoughtful goods for slower moments. Designed in-house, made in small batches.</p>
</div>
<div class="f-col">
<h4>Shop</h4>
<div class="f-links">
<a href="#">All Products</a>
<a href="#">Bundles</a>
<a href="#">Gifts</a>
<a href="#">Last Chance</a>
</div>
</div>
<div class="f-col">
<h4>Company</h4>
<div class="f-links">
<a href="#">Our Story</a>
<a href="#">Journal</a>
<a href="#">Careers</a>
<a href="#">Affiliates</a>
</div>
</div>
<div class="f-col">
<h4>Help</h4>
<div class="f-links">
<a href="#">Shipping & Returns</a>
<a href="#">FAQ</a>
<a href="#">Care Guides</a>
<a href="#">Support</a>
</div>
</div>
</div>
<div class="legal">
<span class="subtle">© <span id="year">2025</span> Lumen & Lark. All rights reserved.</span>
<div class="links">
<a href="#">Terms of Service</a>
<a href="#">Privacy Policy</a>
<a href="#">Contact</a>
</div>
</div>
</div>
</footer>
<!-- No JS interactivity required; the following tiny script only updates the year text content.
If you prefer zero JS, safely remove this block and keep the hard-coded year above. -->
<script>
(function(){
var el=document.getElementById('year');
if(el) el.textContent=new Date().getFullYear();
})();
</script>
</body>
</html>