Pages Medium
Interior — Landing Commercial
A warm editorial landing page for a commercial interior design studio working across offices, retail floors and hospitality. Leads with a brand-experience angle, a discipline switcher that reframes the hero copy, a horizontal case-study strip, a wall of fictional client logos, a services grid and an enquire CTA with a working scoped-brief form — all built in semantic HTML, muted natural palette and Cormorant Garamond headings.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #f6f2ec;
--paper: #fbf9f5;
--ink: #2c2620;
--ink-2: #5a5147;
--muted: #8a8175;
--clay: #b08968;
--clay-d: #8c6a4f;
--walnut: #5c4433;
--sage: #9caf88;
--line: rgba(44, 38, 32, 0.12);
--white: #fff;
--r-sm: 4px;
--r-md: 8px;
--r-lg: 14px;
--shadow: 0 18px 44px -24px rgba(44, 38, 32, 0.4);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: "Inter", system-ui, sans-serif;
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 {
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 500;
color: var(--ink);
line-height: 1.08;
margin: 0;
letter-spacing: 0.2px;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
.wrap {
width: min(1140px, 100% - 3rem);
margin-inline: auto;
}
.skip {
position: absolute;
left: -999px;
top: 0;
background: var(--ink);
color: var(--paper);
padding: 0.6rem 1rem;
border-radius: 0 0 var(--r-md) 0;
z-index: 60;
}
.skip:focus { left: 0; }
:focus-visible {
outline: 2px solid var(--clay-d);
outline-offset: 3px;
border-radius: var(--r-sm);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.72rem 1.35rem;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.2px;
cursor: pointer;
border: 1px solid transparent;
transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.btn-solid {
background: var(--walnut);
color: var(--paper);
box-shadow: 0 10px 24px -14px rgba(92, 68, 51, 0.9);
}
.btn-solid:hover { background: var(--ink); transform: translateY(-2px); }
.btn-solid:active { transform: translateY(0); }
.btn-ghost {
background: transparent;
border-color: var(--line);
color: var(--ink);
}
.btn-ghost:hover { border-color: var(--clay); color: var(--clay-d); transform: translateY(-2px); }
.btn.full { width: 100%; }
/* Header */
.site {
position: sticky;
top: 0;
z-index: 40;
background: rgba(246, 242, 236, 0.82);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.nav {
display: flex;
align-items: center;
gap: 1.5rem;
height: 68px;
}
.brand { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; }
.brand-mark {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: var(--r-md);
background: var(--walnut);
color: var(--paper);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.5px;
}
.brand-name {
font-family: "Cormorant Garamond", serif;
font-size: 1.4rem;
font-weight: 600;
}
.brand-name em { color: var(--clay); font-style: italic; }
.links { display: flex; gap: 1.5rem; }
.links a {
font-size: 0.9rem;
font-weight: 500;
color: var(--ink-2);
position: relative;
padding: 0.2rem 0;
}
.links a::after {
content: "";
position: absolute;
left: 0; bottom: -2px;
width: 0; height: 1.5px;
background: var(--clay);
transition: width 0.22s ease;
}
.links a:hover { color: var(--ink); }
.links a:hover::after { width: 100%; }
/* Hero */
.hero { padding: 4.5rem 0 3.5rem; }
.hero-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 3.5rem;
align-items: center;
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 2.5px;
font-size: 0.72rem;
font-weight: 600;
color: var(--clay-d);
margin-bottom: 1.1rem;
}
.hero-title {
font-size: clamp(2.6rem, 5.5vw, 4.1rem);
margin-bottom: 1.1rem;
}
.hero-sub {
color: var(--ink-2);
font-size: 1.08rem;
max-width: 32ch;
margin-bottom: 1.6rem;
}
.switch {
display: inline-flex;
gap: 0.3rem;
padding: 0.3rem;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 999px;
margin-bottom: 1.6rem;
}
.switch-btn {
border: none;
background: transparent;
font: inherit;
font-size: 0.86rem;
font-weight: 600;
color: var(--ink-2);
padding: 0.5rem 1.05rem;
border-radius: 999px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.switch-btn:hover { color: var(--ink); }
.switch-btn.is-active { background: var(--clay); color: var(--white); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2.4rem; }
.hero-stats {
display: flex;
gap: 2.4rem;
margin: 0;
padding-top: 1.6rem;
border-top: 1px solid var(--line);
}
.hero-stats dt { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 0.3rem; }
.hero-stats dd {
margin: 0;
font-family: "Cormorant Garamond", serif;
font-size: 1.9rem;
font-weight: 600;
color: var(--walnut);
}
/* Hero visual */
.hero-visual {
position: relative;
margin: 0;
height: 420px;
}
.plate {
position: absolute;
border-radius: var(--r-lg);
box-shadow: var(--shadow);
transition: background 0.5s ease, transform 0.5s ease;
}
.plate-1 {
inset: 0 22% 24% 0;
background:
linear-gradient(150deg, rgba(255,255,255,0.14), rgba(0,0,0,0.16)),
linear-gradient(150deg, var(--clay), var(--walnut));
}
.plate-2 {
right: 0; bottom: 0;
width: 55%; height: 58%;
border: 5px solid var(--paper);
background:
linear-gradient(150deg, rgba(255,255,255,0.16), rgba(0,0,0,0.12)),
linear-gradient(150deg, var(--sage), #7d9269);
}
.visual-tag {
position: absolute;
left: 12px; top: 12px;
background: rgba(251, 249, 245, 0.92);
color: var(--ink);
font-size: 0.74rem;
font-weight: 600;
padding: 0.4rem 0.75rem;
border-radius: 999px;
border: 1px solid var(--line);
}
/* Client wall */
.clients { padding: 2.2rem 0; border-block: 1px solid var(--line); }
.rule-label {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.72rem;
font-weight: 600;
color: var(--muted);
}
.logo-wall {
list-style: none;
margin: 1.1rem 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.6rem 2rem;
}
.logo-wall li {
font-family: "Cormorant Garamond", serif;
font-size: 1.35rem;
font-weight: 600;
color: var(--ink-2);
opacity: 0.65;
text-align: center;
padding: 0.6rem 0;
transition: opacity 0.2s ease, color 0.2s ease;
}
.logo-wall li:hover { opacity: 1; color: var(--walnut); }
/* Sections */
.section-head { max-width: 34ch; margin-bottom: 2.2rem; }
.section-head h2 { font-size: clamp(2rem, 4vw, 2.9rem); margin-top: 0.7rem; }
.work { padding: 4rem 0 3rem; }
.case-strip {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 1fr);
gap: 1.4rem;
overflow-x: auto;
padding: 0.5rem 0.3rem 1.4rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.case-strip::-webkit-scrollbar { height: 8px; }
.case-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.case {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
scroll-snap-align: start;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.case:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.case-plate { height: 176px; }
.case-a { background: linear-gradient(150deg, #c39a76, var(--walnut)); }
.case-b { background: linear-gradient(150deg, #d8c4ad, var(--clay-d)); }
.case-c { background: linear-gradient(150deg, #6e553f, #2c2620); }
.case-d { background: linear-gradient(150deg, var(--sage), #6f8459); }
.case-body { padding: 1.3rem 1.4rem 1.5rem; }
.tag {
display: inline-block;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0.28rem 0.6rem;
border-radius: 999px;
margin-bottom: 0.7rem;
}
.tag-work { background: rgba(156, 175, 136, 0.24); color: #566b40; }
.tag-retail { background: rgba(176, 137, 104, 0.24); color: var(--clay-d); }
.tag-hosp { background: rgba(92, 68, 51, 0.16); color: var(--walnut); }
.case-body h3 { font-size: 1.7rem; margin-bottom: 0.4rem; }
.case-body p { color: var(--ink-2); font-size: 0.92rem; }
.metric {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.9rem;
font-size: 0.82rem;
font-weight: 700;
color: var(--walnut);
}
.metric::before {
content: "↗";
color: var(--sage);
font-weight: 800;
}
/* Services */
.services { padding: 3.5rem 0; background: var(--paper); border-block: 1px solid var(--line); }
.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
}
.service {
padding: 1.8rem 1.6rem;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--bg);
transition: transform 0.22s ease, border-color 0.22s ease;
}
.service:hover { transform: translateY(-4px); border-color: var(--clay); }
.num {
font-family: "Cormorant Garamond", serif;
font-size: 2.2rem;
font-weight: 600;
color: var(--clay);
display: block;
margin-bottom: 0.3rem;
}
.service h3 { font-size: 1.55rem; margin-bottom: 0.5rem; }
.service p { color: var(--ink-2); font-size: 0.92rem; margin-bottom: 1rem; }
.service ul {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.service ul li {
font-size: 0.74rem;
font-weight: 600;
color: var(--ink-2);
background: var(--white);
border: 1px solid var(--line);
padding: 0.25rem 0.6rem;
border-radius: 999px;
}
/* Proof */
.proof { padding: 3.5rem 0; }
.proof-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.4rem;
text-align: center;
}
.proof-item { padding: 1rem; }
.count {
font-family: "Cormorant Garamond", serif;
font-size: clamp(2.6rem, 5vw, 3.4rem);
font-weight: 600;
color: var(--walnut);
line-height: 1;
display: block;
}
.proof-item p { margin-top: 0.5rem; color: var(--ink-2); font-size: 0.9rem; }
/* Enquire */
.enquire { padding: 3.5rem 0 4.5rem; }
.enquire-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 3rem;
align-items: start;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 2.6rem;
box-shadow: var(--shadow);
}
.enquire-copy h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0.7rem 0 0.9rem; }
.enquire-copy > p { color: var(--ink-2); }
.assur {
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
display: grid;
gap: 0.7rem;
}
.assur li {
position: relative;
padding-left: 1.6rem;
font-size: 0.9rem;
color: var(--ink-2);
}
.assur li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--sage);
font-weight: 800;
}
.brief { display: grid; gap: 1.1rem; }
.field { border: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.field legend, .field label {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--muted);
padding: 0;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
border: 1px solid var(--line);
background: var(--white);
font: inherit;
font-size: 0.85rem;
font-weight: 600;
color: var(--ink-2);
padding: 0.5rem 0.95rem;
border-radius: 999px;
cursor: pointer;
transition: all 0.18s ease;
}
.chip:hover { border-color: var(--clay); color: var(--clay-d); }
.chip.is-active {
background: var(--walnut);
border-color: var(--walnut);
color: var(--paper);
}
input, textarea {
font: inherit;
color: var(--ink);
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 0.7rem 0.85rem;
width: 100%;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
input:focus, textarea:focus {
outline: none;
border-color: var(--clay);
box-shadow: 0 0 0 3px rgba(176, 137, 104, 0.18);
}
textarea { resize: vertical; }
.summary {
font-size: 0.9rem;
color: var(--ink-2);
padding: 0.7rem 0.9rem;
background: var(--bg);
border: 1px dashed var(--line);
border-radius: var(--r-md);
}
.summary strong { color: var(--walnut); }
/* Footer */
.site-foot { border-top: 1px solid var(--line); padding: 2.4rem 0; }
.foot-grid { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.foot-grid p { color: var(--muted); font-size: 0.85rem; margin-top: 0.3rem; }
.foot-legal { font-size: 0.8rem; }
/* Toast */
.toast {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translate(-50%, 20px);
background: var(--ink);
color: var(--paper);
padding: 0.8rem 1.3rem;
border-radius: 999px;
font-size: 0.88rem;
font-weight: 600;
box-shadow: var(--shadow);
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 80;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Responsive */
@media (max-width: 900px) {
.hero-grid, .enquire-grid { grid-template-columns: 1fr; }
.hero-visual { height: 340px; }
.logo-wall { grid-template-columns: repeat(3, 1fr); }
.service-grid, .proof-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.wrap { width: min(1140px, 100% - 2rem); }
.links { display: none; }
.nav-cta { margin-left: auto; }
.hero { padding: 2.6rem 0; }
.hero-title { font-size: clamp(2.3rem, 11vw, 2.9rem); }
.hero-stats { gap: 1.4rem; }
.hero-stats dd { font-size: 1.5rem; }
.hero-visual { height: 260px; }
.logo-wall { grid-template-columns: repeat(2, 1fr); }
.service-grid, .proof-grid { grid-template-columns: 1fr; }
.enquire-grid { padding: 1.6rem; }
.foot-grid { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; transition: none !important; }
}(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastEl = document.querySelector("[data-toast]");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.hidden = false;
// force reflow so the transition runs
void toastEl.offsetWidth;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
setTimeout(function () { toastEl.hidden = true; }, 300);
}, 2600);
}
/* ---------- Hero discipline switcher ---------- */
var DISCIPLINES = {
workplace: {
eyebrow: "Workplace interiors · Est. 2009",
title: "Offices people choose to come back to.",
sub: "We shape headquarters and studios where focus, daylight and quiet acoustics do the recruiting for you.",
tag: "Aperture HQ · Lisbon",
p1: "linear-gradient(150deg, rgba(255,255,255,0.14), rgba(0,0,0,0.16)), linear-gradient(150deg, var(--clay), var(--walnut))",
p2: "linear-gradient(150deg, rgba(255,255,255,0.16), rgba(0,0,0,0.12)), linear-gradient(150deg, var(--sage), #7d9269)"
},
retail: {
eyebrow: "Retail interiors · Est. 2009",
title: "Stores choreographed like a slow walk.",
sub: "We design flagship and boutique environments where material, light and rhythm turn browsing into buying.",
tag: "Casa Vela Flagship · Porto",
p1: "linear-gradient(150deg, rgba(255,255,255,0.14), rgba(0,0,0,0.14)), linear-gradient(150deg, #d8c4ad, var(--clay-d))",
p2: "linear-gradient(150deg, rgba(255,255,255,0.18), rgba(0,0,0,0.12)), linear-gradient(150deg, #c39a76, var(--walnut))"
},
hospitality: {
eyebrow: "Hospitality interiors · Est. 2009",
title: "Lobbies that welcome before a word is said.",
sub: "We craft hotels, bars and restaurants where walnut, linen and low light make guests want to stay another night.",
tag: "Petra House Hotel · Madrid",
p1: "linear-gradient(150deg, rgba(255,255,255,0.12), rgba(0,0,0,0.2)), linear-gradient(150deg, #6e553f, #2c2620)",
p2: "linear-gradient(150deg, rgba(255,255,255,0.16), rgba(0,0,0,0.14)), linear-gradient(150deg, var(--clay), var(--walnut))"
}
};
var heroEls = {
eyebrow: document.querySelector('[data-hero="eyebrow"]'),
title: document.querySelector('[data-hero="title"]'),
sub: document.querySelector('[data-hero="sub"]'),
tag: document.querySelector('[data-hero="tag"]'),
plate1: document.querySelector('[data-hero="plate1"]'),
plate2: document.querySelector('[data-hero="plate2"]')
};
function setDiscipline(key) {
var d = DISCIPLINES[key];
if (!d) return;
if (heroEls.eyebrow) heroEls.eyebrow.textContent = d.eyebrow;
if (heroEls.title) heroEls.title.textContent = d.title;
if (heroEls.sub) heroEls.sub.textContent = d.sub;
if (heroEls.tag) heroEls.tag.textContent = d.tag;
if (heroEls.plate1) heroEls.plate1.style.backgroundImage = d.p1;
if (heroEls.plate2) heroEls.plate2.style.backgroundImage = d.p2;
}
var switchBtns = Array.prototype.slice.call(document.querySelectorAll(".switch-btn"));
switchBtns.forEach(function (btn) {
btn.addEventListener("click", function () {
switchBtns.forEach(function (b) {
b.classList.remove("is-active");
b.setAttribute("aria-selected", "false");
});
btn.classList.add("is-active");
btn.setAttribute("aria-selected", "true");
setDiscipline(btn.dataset.discipline);
});
});
/* ---------- Case metric badges ---------- */
document.querySelectorAll(".case").forEach(function (card) {
var m = card.querySelector(".metric");
if (m && card.dataset.metric) m.textContent = card.dataset.metric;
});
/* ---------- Animated counters (IntersectionObserver) ---------- */
var counters = Array.prototype.slice.call(document.querySelectorAll(".count"));
function runCounter(el) {
var target = parseFloat(el.dataset.to) || 0;
var suffix = el.dataset.suffix || "";
var start = null;
var dur = 1400;
function step(ts) {
if (start === null) start = ts;
var p = Math.min((ts - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
el.textContent = Math.round(target * eased) + suffix;
if (p < 1) requestAnimationFrame(step);
else el.textContent = target + suffix;
}
requestAnimationFrame(step);
}
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) {
runCounter(e.target);
io.unobserve(e.target);
}
});
}, { threshold: 0.4 });
counters.forEach(function (c) { io.observe(c); });
} else {
counters.forEach(runCounter);
}
/* ---------- Enquire form chips + summary ---------- */
var selection = { discipline: "Workplace", budget: "€50–150k" };
var summaryEl = document.querySelector("[data-summary]");
var areaInput = document.getElementById("area");
function renderSummary() {
if (!summaryEl) return;
var area = (areaInput && areaInput.value) ? areaInput.value : "—";
summaryEl.innerHTML =
"Brief: <strong>" + selection.discipline + "</strong> · <strong>" +
selection.budget + "</strong> · <strong>" + area + " m²</strong>";
}
document.querySelectorAll(".chip").forEach(function (chip) {
chip.addEventListener("click", function () {
var group = chip.dataset.chip;
document.querySelectorAll('.chip[data-chip="' + group + '"]').forEach(function (c) {
c.classList.remove("is-active");
c.setAttribute("aria-pressed", "false");
});
chip.classList.add("is-active");
chip.setAttribute("aria-pressed", "true");
selection[group] = chip.dataset.value;
renderSummary();
});
});
if (areaInput) areaInput.addEventListener("input", renderSummary);
/* ---------- Form submit ---------- */
var form = document.querySelector(".brief");
if (form) {
form.addEventListener("submit", function (e) {
e.preventDefault();
var name = document.getElementById("name");
var email = document.getElementById("email");
if (!name.value.trim()) {
name.focus();
toast("Add your name so we know who to reply to.");
return;
}
if (!email.value.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
email.focus();
toast("Pop in a valid work email.");
return;
}
toast("Brief received — we'll reply within 2 working days.");
form.reset();
// reset chip state to defaults
selection = { discipline: "Workplace", budget: "€50–150k" };
document.querySelectorAll('.chip[data-chip="discipline"]').forEach(function (c) {
var on = c.dataset.value === "Workplace";
c.classList.toggle("is-active", on);
c.setAttribute("aria-pressed", String(on));
});
document.querySelectorAll('.chip[data-chip="budget"]').forEach(function (c) {
var on = c.dataset.value === "€50–150k";
c.classList.toggle("is-active", on);
c.setAttribute("aria-pressed", String(on));
});
if (areaInput) areaInput.value = "600";
renderSummary();
});
}
renderSummary();
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Verro & Lane — Commercial Interior Design</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=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="site" id="top">
<div class="wrap nav">
<a class="brand" href="#top" aria-label="Verro and Lane home">
<span class="brand-mark" aria-hidden="true">V&L</span>
<span class="brand-name">Verro <em>&</em> Lane</span>
</a>
<nav class="links" aria-label="Primary">
<a href="#work">Work</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#enquire">Enquire</a>
</nav>
<a class="btn btn-solid nav-cta" href="#enquire">Start a brief</a>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero">
<div class="wrap hero-grid">
<div class="hero-copy">
<p class="eyebrow" data-hero="eyebrow">Commercial interiors · Est. 2009</p>
<h1 class="hero-title" data-hero="title">Spaces that make a brand felt.</h1>
<p class="hero-sub" data-hero="sub">We design commercial environments where architecture, light and material carry your brand the moment someone walks in.</p>
<div class="switch" role="tablist" aria-label="Choose a discipline">
<button class="switch-btn is-active" role="tab" aria-selected="true" data-discipline="workplace">Workplace</button>
<button class="switch-btn" role="tab" aria-selected="false" data-discipline="retail">Retail</button>
<button class="switch-btn" role="tab" aria-selected="false" data-discipline="hospitality">Hospitality</button>
</div>
<div class="hero-actions">
<a class="btn btn-solid" href="#enquire">Enquire about a project</a>
<a class="btn btn-ghost" href="#work">See selected work</a>
</div>
<dl class="hero-stats">
<div><dt>Projects delivered</dt><dd>210+</dd></div>
<div><dt>Cities</dt><dd>14</dd></div>
<div><dt>Avg. NPS</dt><dd>72</dd></div>
</dl>
</div>
<figure class="hero-visual" aria-hidden="true">
<div class="plate plate-1" data-hero="plate1"></div>
<div class="plate plate-2" data-hero="plate2"></div>
<span class="visual-tag" data-hero="tag">Aperture HQ · Lisbon</span>
</figure>
</div>
</section>
<!-- CLIENT LOGOS -->
<section class="clients" id="clients" aria-label="Selected clients">
<div class="wrap">
<p class="rule-label">Trusted by teams shaping their category</p>
<ul class="logo-wall">
<li>Aperture</li>
<li>Norlund</li>
<li>Casa Vela</li>
<li>Meridian Retail</li>
<li>Halden & Co</li>
<li>Petra Hotels</li>
<li>Fold Studio</li>
<li>Otto Bank</li>
</ul>
</div>
</section>
<!-- WORK -->
<section class="work" id="work">
<div class="wrap">
<header class="section-head">
<p class="rule-label">Selected work</p>
<h2>Environments built around how people move, meet and buy.</h2>
</header>
<div class="case-strip" tabindex="0" aria-label="Case studies, scroll horizontally">
<article class="case" data-metric="+38% dwell time">
<div class="case-plate case-a"></div>
<div class="case-body">
<span class="tag tag-work">Workplace</span>
<h3>Aperture HQ</h3>
<p>A 4,200 m² Lisbon headquarters organised around daylight, oak and quiet acoustic zones.</p>
<span class="metric" aria-hidden="true"></span>
</div>
</article>
<article class="case" data-metric="+22% basket size">
<div class="case-plate case-b"></div>
<div class="case-body">
<span class="tag tag-retail">Retail</span>
<h3>Casa Vela Flagship</h3>
<p>A flagship store choreographed as a slow walk — plaster, clay tile and warm rail lighting.</p>
<span class="metric" aria-hidden="true"></span>
</div>
</article>
<article class="case" data-metric="4.8★ guest score">
<div class="case-plate case-c"></div>
<div class="case-body">
<span class="tag tag-hosp">Hospitality</span>
<h3>Petra House Hotel</h3>
<p>38 keys and a lobby bar where walnut, linen and low light do the welcoming.</p>
<span class="metric" aria-hidden="true"></span>
</div>
</article>
<article class="case" data-metric="-19% churn">
<div class="case-plate case-d"></div>
<div class="case-body">
<span class="tag tag-work">Workplace</span>
<h3>Norlund Studio</h3>
<p>A studio floor for a creative agency — flexible bays, a long shared table, sage accents.</p>
<span class="metric" aria-hidden="true"></span>
</div>
</article>
</div>
</div>
</section>
<!-- SERVICES -->
<section class="services" id="services">
<div class="wrap">
<header class="section-head">
<p class="rule-label">What we do</p>
<h2>A single team from first sketch to handover.</h2>
</header>
<div class="service-grid">
<article class="service">
<span class="num">01</span>
<h3>Brand-led concept</h3>
<p>We translate positioning into material, light and spatial narrative before a single wall moves.</p>
<ul><li>Workshops</li><li>Moodboards</li><li>Space strategy</li></ul>
</article>
<article class="service">
<span class="num">02</span>
<h3>Design & documentation</h3>
<p>Full technical packages, FF&E schedules and lighting design coordinated with your contractor.</p>
<ul><li>Detailing</li><li>FF&E</li><li>Lighting</li></ul>
</article>
<article class="service">
<span class="num">03</span>
<h3>Delivery & care</h3>
<p>On-site oversight through build, plus a snag-free handover and a first-year styling review.</p>
<ul><li>Site oversight</li><li>Handover</li><li>Aftercare</li></ul>
</article>
</div>
</div>
</section>
<!-- PROOF COUNTERS -->
<section class="proof" aria-label="Studio in numbers">
<div class="wrap proof-grid">
<div class="proof-item"><span class="count" data-to="210" data-suffix="+">0</span><p>Commercial projects delivered</p></div>
<div class="proof-item"><span class="count" data-to="640" data-suffix="k m²">0</span><p>Floor area shaped</p></div>
<div class="proof-item"><span class="count" data-to="14" data-suffix="">0</span><p>Cities on the map</p></div>
<div class="proof-item"><span class="count" data-to="96" data-suffix="%">0</span><p>Clients who return</p></div>
</div>
</section>
<!-- ENQUIRE -->
<section class="enquire" id="enquire">
<div class="wrap enquire-grid">
<div class="enquire-copy">
<p class="rule-label">Start a brief</p>
<h2>Tell us about the space.</h2>
<p>Share the shape of the project and we will come back within two working days with a point of view and an approximate fee band.</p>
<ul class="assur">
<li>No obligation, no fee for the first conversation</li>
<li>You keep every sketch we share</li>
<li>Named lead designer from day one</li>
</ul>
</div>
<form class="brief" novalidate aria-label="Project enquiry">
<fieldset class="field">
<legend>Discipline</legend>
<div class="chips" role="group" aria-label="Choose discipline">
<button type="button" class="chip is-active" data-chip="discipline" data-value="Workplace" aria-pressed="true">Workplace</button>
<button type="button" class="chip" data-chip="discipline" data-value="Retail" aria-pressed="false">Retail</button>
<button type="button" class="chip" data-chip="discipline" data-value="Hospitality" aria-pressed="false">Hospitality</button>
</div>
</fieldset>
<fieldset class="field">
<legend>Approx. budget</legend>
<div class="chips" role="group" aria-label="Choose budget band">
<button type="button" class="chip is-active" data-chip="budget" data-value="€50–150k" aria-pressed="true">€50–150k</button>
<button type="button" class="chip" data-chip="budget" data-value="€150–500k" aria-pressed="false">€150–500k</button>
<button type="button" class="chip" data-chip="budget" data-value="€500k+" aria-pressed="false">€500k+</button>
</div>
</fieldset>
<div class="field">
<label for="area">Approx. floor area (m²)</label>
<input id="area" name="area" type="number" min="20" step="10" value="600" inputmode="numeric" />
</div>
<div class="field">
<label for="name">Your name</label>
<input id="name" name="name" type="text" autocomplete="name" placeholder="Mara Voss" required />
</div>
<div class="field">
<label for="email">Work email</label>
<input id="email" name="email" type="email" autocomplete="email" placeholder="[email protected]" required />
</div>
<div class="field">
<label for="message">What are you trying to make people feel?</label>
<textarea id="message" name="message" rows="3" placeholder="A calm flagship in central Porto that still feels premium…"></textarea>
</div>
<p class="summary" data-summary aria-live="polite">Brief: <strong>Workplace</strong> · <strong>€50–150k</strong> · <strong>600 m²</strong></p>
<button class="btn btn-solid full" type="submit">Send the brief</button>
</form>
</div>
</section>
</main>
<footer class="site-foot">
<div class="wrap foot-grid">
<div>
<span class="brand-name">Verro <em>&</em> Lane</span>
<p>Commercial interior design. Lisbon · Porto · Madrid.</p>
</div>
<p class="foot-legal">© 2026 Verro & Lane, fictional studio. All spaces imagined.</p>
</div>
</footer>
<div class="toast" role="status" aria-live="polite" data-toast hidden></div>
<script src="script.js"></script>
</body>
</html>A single-file commercial interiors landing for the fictional studio Verro & Lane, pitched at brands that want their workplaces, stores and hotels to feel like an experience rather than a fit-out. The hero pairs a Cormorant Garamond headline with a discipline switcher (Workplace / Retail / Hospitality) that live-rewrites the eyebrow, headline and supporting line so a visitor can immediately see the studio speak their language.
Below the fold the page runs a horizontal case-study strip with gradient plate imagery, hover lift and a metric badge per project, then a quiet wall of fictional client logos, a three-up services grid, and a proof band of animated counters that tick up when scrolled into view. Everything is keyboard reachable with visible focus rings and AA-contrast text on the warm paper background.
The enquire section closes with a scoped brief: choose a discipline chip, pick an approximate budget band and floor area, drop in a message, and submit to fire a small toast confirmation while the CTA summarises the selection. Interactions are vanilla JS only — an IntersectionObserver for counters, the discipline state machine, chip toggles and the form handler — with a @media (max-width:520px) pass so it holds together down to ~360px.