Pages Medium
Law Firm — Boutique Firm Landing
An editorial boutique law-firm landing page with a minimalist navy and gold hero, a short firm manifesto, four specialised practice areas, a partner spotlight, selected case results with animated counters, an elegant contact form and footer, all built with restrained typography.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--navy: #1b2a4a;
--navy-d: #101b33;
--gold: #b08d57;
--gold-soft: #efe3cf;
--ink: #1a1f2b;
--muted: #5b6577;
--bg: #f5f3ee;
--white: #ffffff;
--line: rgba(27, 42, 74, 0.12);
--serif: "Georgia", "Times New Roman", serif;
--sans: "Inter", system-ui, -apple-system, sans-serif;
--maxw: 1080px;
--radius: 4px;
--shadow: 0 18px 48px -28px rgba(16, 27, 51, 0.55);
}
* { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--sans);
color: var(--ink);
background: var(--bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.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-link {
position: absolute; left: 12px; top: -48px; z-index: 50;
background: var(--navy); color: var(--white); padding: 10px 16px;
border-radius: var(--radius); text-decoration: none; transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
/* ---------- Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 40;
background: rgba(245, 243, 238, 0.86);
backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
display: grid; place-items: center; width: 38px; height: 38px;
font-family: var(--serif); font-size: 0.78rem; letter-spacing: 0.02em;
color: var(--gold); border: 1px solid var(--gold); border-radius: var(--radius);
}
.brand-name { font-family: var(--serif); font-size: 1.18rem; color: var(--navy); }
.nav { display: flex; align-items: center; }
.nav-menu { list-style: none; display: flex; align-items: center; gap: 32px; padding: 0; }
.nav-menu a {
text-decoration: none; color: var(--navy); font-size: 0.92rem; font-weight: 500;
position: relative; padding: 4px 0; transition: color 0.18s ease;
}
.nav-menu a:not(.nav-cta)::after {
content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
background: var(--gold); transition: width 0.22s ease;
}
.nav-menu a:not(.nav-cta):hover::after { width: 100%; }
.nav-cta {
border: 1px solid var(--navy); padding: 8px 18px !important; border-radius: var(--radius);
transition: background 0.18s ease, color 0.18s ease;
}
.nav-cta:hover { background: var(--navy); color: var(--white); }
.nav-toggle {
display: none; width: 42px; height: 42px; border: 1px solid var(--line);
background: transparent; border-radius: var(--radius); cursor: pointer; position: relative;
}
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
content: ""; position: absolute; left: 11px; width: 20px; height: 2px;
background: var(--navy); transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bar { top: 20px; }
.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-6px) rotate(-45deg); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--sans); font-size: 0.95rem; font-weight: 500;
padding: 13px 26px; border-radius: var(--radius); text-decoration: none;
border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.btn-gold { background: var(--gold); color: var(--navy-d); }
.btn-gold:hover { background: #c39c63; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }
.btn-block { width: 100%; }
/* ---------- Section primitives ---------- */
.section-kicker {
font-family: var(--sans); font-size: 0.74rem; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.section-kicker--gold { color: var(--gold); }
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--navy); }
.section-head { margin-bottom: 44px; }
.section-head--center { text-align: center; }
.rule { height: 1px; border: 0; background: var(--gold); opacity: 0.55; margin: 0; }
/* ---------- Hero ---------- */
.hero { padding: clamp(56px, 9vw, 110px) 0 clamp(48px, 7vw, 88px); }
.eyebrow {
font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--gold); margin-bottom: 22px;
}
.hero-title { font-size: clamp(2.3rem, 6.2vw, 4.1rem); color: var(--navy); max-width: 14ch; }
.hero-lead {
margin-top: 24px; max-width: 56ch; font-size: 1.1rem; color: var(--muted);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero .rule { margin: 48px 0 28px; max-width: 240px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 48px; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats dt { font-family: var(--serif); font-size: 2.1rem; color: var(--navy); }
.hero-stats dd { font-size: 0.86rem; color: var(--muted); margin-top: 4px; }
/* ---------- Manifesto ---------- */
.manifesto { background: var(--navy); color: var(--white); padding: clamp(56px, 8vw, 96px) 0; }
.manifesto-inner { max-width: 760px; }
.manifesto .section-kicker { color: var(--gold); }
.manifesto-quote {
font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.4;
color: var(--white); border: 0; padding: 0;
}
.manifesto-by { margin-top: 22px; color: var(--gold-soft); font-size: 0.92rem; letter-spacing: 0.02em; }
/* ---------- Practice ---------- */
.practice { padding: clamp(64px, 9vw, 110px) 0; }
.practice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.practice-card {
background: var(--white); padding: 36px 32px; position: relative;
transition: background 0.2s ease, transform 0.2s ease;
}
.practice-card:hover { background: #fbfaf7; }
.practice-num {
font-family: var(--serif); font-size: 0.95rem; color: var(--gold); letter-spacing: 0.04em;
}
.practice-card h3 { font-size: 1.35rem; color: var(--navy); margin: 14px 0 12px; }
.practice-card p { color: var(--muted); font-size: 0.96rem; }
.practice-card::after {
content: ""; position: absolute; left: 32px; bottom: 0; width: 0; height: 2px;
background: var(--gold); transition: width 0.3s ease;
}
.practice-card:hover::after { width: 44px; }
/* ---------- Partner ---------- */
.partner { background: var(--gold-soft); padding: clamp(64px, 9vw, 110px) 0; }
.partner-inner { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: center; }
.partner-portrait {
aspect-ratio: 4 / 5; border-radius: var(--radius); display: grid; place-items: center;
background: linear-gradient(160deg, var(--navy), var(--navy-d));
border: 1px solid rgba(176, 141, 87, 0.4); box-shadow: var(--shadow);
}
.partner-initials { font-family: var(--serif); font-size: 3.4rem; color: var(--gold); }
.partner-role { color: var(--gold); font-weight: 600; font-size: 0.9rem; margin: 8px 0 18px; letter-spacing: 0.04em; }
.partner-text { color: var(--ink); max-width: 56ch; }
.partner-creds { list-style: none; padding: 0; margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.partner-creds li {
font-size: 0.82rem; color: var(--navy); background: var(--white);
border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
}
/* ---------- Results ---------- */
.results { background: var(--navy-d); color: var(--white); padding: clamp(64px, 9vw, 110px) 0; }
.results .section-title { color: var(--white); }
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.result-stat { text-align: center; padding: 28px 18px; border: 1px solid rgba(176, 141, 87, 0.28); border-radius: var(--radius); }
.result-num {
font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 3.6rem); color: var(--gold);
font-variant-numeric: tabular-nums;
}
.result-stat dd { margin-top: 10px; color: var(--gold-soft); font-size: 0.92rem; }
.results-note { text-align: center; margin-top: 30px; color: rgba(239, 227, 207, 0.6); font-size: 0.8rem; }
/* ---------- Contact ---------- */
.contact { padding: clamp(64px, 9vw, 110px) 0; }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact-lead { color: var(--muted); margin-top: 16px; max-width: 44ch; }
.contact-meta { font-style: normal; margin-top: 28px; color: var(--muted); font-size: 0.92rem; display: grid; gap: 16px; }
.contact-meta a { color: var(--navy); text-decoration: none; }
.contact-meta a:hover { color: var(--gold); }
.contact-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.84rem; font-weight: 600; color: var(--navy); margin-bottom: 7px; letter-spacing: 0.02em; }
.field input, .field select, .field textarea {
width: 100%; font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
background: var(--bg); transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--gold); background: var(--white);
box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.18);
}
.field.invalid input, .field.invalid textarea { border-color: #b3403a; background: #fdf4f3; }
.field-error { display: block; min-height: 1em; margin-top: 6px; font-size: 0.78rem; color: #b3403a; }
.form-status { margin-top: 14px; font-size: 0.9rem; color: var(--gold); min-height: 1.2em; }
.form-status.ok { color: #2f7d4f; }
/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--gold-soft); padding: 52px 0 36px; }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 28px 48px; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand p { color: var(--white); font-family: var(--serif); font-size: 1.05rem; line-height: 1.4; }
.footer-muted { font-family: var(--sans); font-size: 0.82rem; color: rgba(239, 227, 207, 0.7); }
.footer-nav { display: flex; gap: 26px; }
.footer-nav a { text-decoration: none; color: var(--gold-soft); font-size: 0.9rem; transition: color 0.18s ease; }
.footer-nav a:hover { color: var(--gold); }
.footer-fine { grid-column: 1 / -1; border-top: 1px solid rgba(176, 141, 87, 0.25); padding-top: 22px; font-size: 0.78rem; color: rgba(239, 227, 207, 0.55); }
/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
.btn:hover { transform: none; }
}
/* ---------- Responsive ---------- */
@media (max-width: 860px) {
.partner-inner { grid-template-columns: 1fr; gap: 32px; }
.partner-portrait { max-width: 240px; }
.contact-inner { grid-template-columns: 1fr; gap: 40px; }
.results-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.wrap { padding-inline: 18px; }
.nav-toggle { display: block; }
.nav-menu {
position: absolute; left: 0; right: 0; top: 72px;
flex-direction: column; align-items: stretch; gap: 0;
background: var(--bg); border-bottom: 1px solid var(--line);
padding: 8px 18px 18px; box-shadow: var(--shadow);
transform: translateY(-12px); opacity: 0; pointer-events: none;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-menu.open { transform: none; opacity: 1; pointer-events: auto; }
.nav-menu li { width: 100%; }
.nav-menu a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
.nav-menu li:last-child a { border-bottom: 0; }
.nav-cta { text-align: center; margin-top: 8px; }
.practice-grid { grid-template-columns: 1fr; }
.hero-stats { gap: 28px; }
.hero-stats dt { font-size: 1.7rem; }
.footer-inner { grid-template-columns: 1fr; }
.contact-form { padding: 24px; }
}(function () {
"use strict";
/* ---------- Mobile nav toggle ---------- */
var toggle = document.getElementById("navToggle");
var menu = document.getElementById("navMenu");
if (toggle && menu) {
toggle.addEventListener("click", function () {
var open = menu.classList.toggle("open");
toggle.setAttribute("aria-expanded", open ? "true" : "false");
});
// Close the menu after picking a link (mobile)
menu.addEventListener("click", function (e) {
if (e.target.tagName === "A" && menu.classList.contains("open")) {
menu.classList.remove("open");
toggle.setAttribute("aria-expanded", "false");
}
});
}
/* ---------- Scroll reveal + counters ---------- */
var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
// Tag sections for reveal
var revealTargets = document.querySelectorAll(
".section-head, .practice-card, .partner-inner, .manifesto-inner, .contact-inner, .result-stat"
);
revealTargets.forEach(function (el) { el.classList.add("reveal"); });
function formatCount(el, value) {
var prefix = el.getAttribute("data-prefix") || "";
var suffix = el.getAttribute("data-suffix") || "";
el.textContent = prefix + value + suffix;
}
function animateCounter(el) {
if (el.dataset.done === "1") return;
el.dataset.done = "1";
var target = parseInt(el.getAttribute("data-count"), 10) || 0;
if (reduceMotion) { formatCount(el, target); return; }
var duration = 1100;
var start = null;
function step(ts) {
if (start === null) start = ts;
var p = Math.min((ts - start) / duration, 1);
var eased = 1 - Math.pow(1 - p, 3); // easeOutCubic
formatCount(el, Math.round(target * eased));
if (p < 1) requestAnimationFrame(step);
else formatCount(el, target);
}
requestAnimationFrame(step);
}
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
entry.target.classList.add("is-visible");
var counters = entry.target.querySelectorAll(".result-num");
counters.forEach(animateCounter);
io.unobserve(entry.target);
});
},
{ threshold: 0.18, rootMargin: "0px 0px -8% 0px" }
);
revealTargets.forEach(function (el) { io.observe(el); });
} else {
// Fallback: show everything, set final counts
revealTargets.forEach(function (el) { el.classList.add("is-visible"); });
document.querySelectorAll(".result-num").forEach(function (el) {
formatCount(el, parseInt(el.getAttribute("data-count"), 10) || 0);
});
}
/* ---------- Contact form validation ---------- */
var form = document.getElementById("contactForm");
var status = document.getElementById("formStatus");
function setError(field, message) {
var wrap = field.closest(".field");
var slot = wrap ? wrap.querySelector(".field-error") : null;
if (wrap) wrap.classList.toggle("invalid", !!message);
if (slot) slot.textContent = message || "";
field.setAttribute("aria-invalid", message ? "true" : "false");
}
function validateField(field) {
var value = field.value.trim();
if (field.hasAttribute("required") && !value) {
setError(field, "This field is required.");
return false;
}
if (field.type === "email" && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
setError(field, "Enter a valid email address.");
return false;
}
setError(field, "");
return true;
}
if (form) {
var required = form.querySelectorAll("[required]");
required.forEach(function (field) {
field.addEventListener("blur", function () { validateField(field); });
field.addEventListener("input", function () {
if (field.closest(".field").classList.contains("invalid")) validateField(field);
});
});
form.addEventListener("submit", function (e) {
e.preventDefault();
var ok = true;
required.forEach(function (field) { if (!validateField(field)) ok = false; });
if (!ok) {
status.textContent = "Please correct the highlighted fields.";
status.classList.remove("ok");
return;
}
var name = form.querySelector("#name").value.trim().split(" ")[0] || "there";
form.reset();
status.textContent = "Thank you, " + name + ". A partner will respond within one business day.";
status.classList.add("ok");
});
}
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hale & Wren — Boutique Litigation</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="site-header" id="top">
<div class="wrap header-inner">
<a class="brand" href="#top">
<span class="brand-mark" aria-hidden="true">H&W</span>
<span class="brand-name">Hale & Wren</span>
</a>
<nav class="nav" aria-label="Primary">
<button class="nav-toggle" id="navToggle" aria-expanded="false" aria-controls="navMenu">
<span class="nav-toggle-bar" aria-hidden="true"></span>
<span class="sr-only">Toggle menu</span>
</button>
<ul class="nav-menu" id="navMenu">
<li><a href="#practice">Practice</a></li>
<li><a href="#partner">Partners</a></li>
<li><a href="#results">Results</a></li>
<li><a class="nav-cta" href="#contact">Consultation</a></li>
</ul>
</nav>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero">
<div class="wrap hero-inner">
<p class="eyebrow">Boutique litigation & advisory · Est. 2009</p>
<h1 class="hero-title">Considered counsel<br />for high-stakes decisions.</h1>
<p class="hero-lead">
A small firm by design. We take a limited number of matters each year so every client
works directly with a partner — not a rotating bench of associates.
</p>
<div class="hero-actions">
<a class="btn btn-gold" href="#contact">Request a consultation</a>
<a class="btn btn-ghost" href="#practice">See how we work</a>
</div>
<hr class="rule" />
<dl class="hero-stats">
<div><dt>15</dt><dd>years in practice</dd></div>
<div><dt>2</dt><dd>founding partners</dd></div>
<div><dt>40+</dt><dd>matters resolved</dd></div>
</dl>
</div>
</section>
<!-- MANIFESTO -->
<section class="manifesto" aria-labelledby="manifesto-h">
<div class="wrap manifesto-inner">
<h2 id="manifesto-h" class="section-kicker">Our posture</h2>
<blockquote class="manifesto-quote">
“We measure our work in outcomes, not hours. The right answer is often the quiet one —
a settlement reached before the courtroom, a clause negotiated before the dispute.”
</blockquote>
<p class="manifesto-by">— The partners of Hale & Wren</p>
</div>
</section>
<!-- PRACTICE AREAS -->
<section class="practice" id="practice" aria-labelledby="practice-h">
<div class="wrap">
<header class="section-head">
<p class="section-kicker">What we do</p>
<h2 id="practice-h" class="section-title">Four areas. Deep, not wide.</h2>
</header>
<div class="practice-grid">
<article class="practice-card">
<span class="practice-num" aria-hidden="true">01</span>
<h3>Commercial Litigation</h3>
<p>Contract, partnership and shareholder disputes — from pre-suit strategy through trial and appeal.</p>
</article>
<article class="practice-card">
<span class="practice-num" aria-hidden="true">02</span>
<h3>M&A & Advisory</h3>
<p>Diligence, deal structuring and post-close integration for founder-led and lower-middle-market companies.</p>
</article>
<article class="practice-card">
<span class="practice-num" aria-hidden="true">03</span>
<h3>Intellectual Property</h3>
<p>Trademark portfolios, licensing, and trade-secret protection for design, software and consumer brands.</p>
</article>
<article class="practice-card">
<span class="practice-num" aria-hidden="true">04</span>
<h3>Employment Counsel</h3>
<p>Executive agreements, restrictive covenants and sensitive workplace investigations, handled discreetly.</p>
</article>
</div>
</div>
</section>
<!-- PARTNER SPOTLIGHT -->
<section class="partner" id="partner" aria-labelledby="partner-h">
<div class="wrap partner-inner">
<div class="partner-portrait" aria-hidden="true">
<span class="partner-initials">EH</span>
</div>
<div class="partner-body">
<p class="section-kicker">Partner spotlight</p>
<h2 id="partner-h" class="section-title">Eleanor Hale</h2>
<p class="partner-role">Founding Partner · Commercial Litigation</p>
<p class="partner-text">
Before founding the firm, Eleanor spent a decade in complex commercial trials at a
national practice. She is admitted in New York and Delaware and has been recognised as a
Super Lawyer for business litigation each year since 2018.
</p>
<ul class="partner-creds">
<li>J.D., Columbia Law School</li>
<li>Admitted: NY & DE</li>
<li>Chambers-ranked, 2021–2025</li>
</ul>
</div>
</div>
</section>
<!-- SELECTED RESULTS -->
<section class="results" id="results" aria-labelledby="results-h">
<div class="wrap">
<header class="section-head section-head--center">
<p class="section-kicker section-kicker--gold">Selected results</p>
<h2 id="results-h" class="section-title">Outcomes worth noting.</h2>
</header>
<dl class="results-grid">
<div class="result-stat">
<dt class="result-num" data-count="92" data-suffix="%">0%</dt>
<dd>of matters resolved before trial</dd>
</div>
<div class="result-stat">
<dt class="result-num" data-count="310" data-prefix="$" data-suffix="M">$0M</dt>
<dd>recovered or protected for clients</dd>
</div>
<div class="result-stat">
<dt class="result-num" data-count="48" data-suffix="hrs">0hrs</dt>
<dd>median time to first partner response</dd>
</div>
</dl>
<p class="results-note">Figures are illustrative and aggregated across representative engagements.</p>
</div>
</section>
<!-- CONTACT CTA -->
<section class="contact" id="contact" aria-labelledby="contact-h">
<div class="wrap contact-inner">
<div class="contact-intro">
<p class="section-kicker section-kicker--gold">Get in touch</p>
<h2 id="contact-h" class="section-title">Request a consultation.</h2>
<p class="contact-lead">
Tell us a little about your matter. A partner will respond within one business day. All
inquiries are treated as confidential.
</p>
<address class="contact-meta">
<p>40 Worth Street, Suite 1200<br />New York, NY 10013</p>
<p><a href="tel:+12125550148">+1 (212) 555-0148</a><br /><a href="mailto:[email protected]">[email protected]</a></p>
</address>
</div>
<form class="contact-form" id="contactForm" novalidate>
<div class="field">
<label for="name">Full name</label>
<input type="text" id="name" name="name" autocomplete="name" required />
<span class="field-error" data-for="name"></span>
</div>
<div class="field">
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email" required />
<span class="field-error" data-for="email"></span>
</div>
<div class="field">
<label for="area">Area of need</label>
<select id="area" name="area">
<option value="">Select an area…</option>
<option>Commercial Litigation</option>
<option>M&A & Advisory</option>
<option>Intellectual Property</option>
<option>Employment Counsel</option>
<option>Something else</option>
</select>
</div>
<div class="field">
<label for="message">Brief summary</label>
<textarea id="message" name="message" rows="4" required></textarea>
<span class="field-error" data-for="message"></span>
</div>
<button type="submit" class="btn btn-gold btn-block">Send inquiry</button>
<p class="form-status" id="formStatus" role="status" aria-live="polite"></p>
</form>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-inner">
<div class="footer-brand">
<span class="brand-mark" aria-hidden="true">H&W</span>
<p>Hale & Wren LLP<br /><span class="footer-muted">Boutique litigation & advisory</span></p>
</div>
<nav class="footer-nav" aria-label="Footer">
<a href="#practice">Practice</a>
<a href="#partner">Partners</a>
<a href="#results">Results</a>
<a href="#contact">Consultation</a>
</nav>
<p class="footer-fine">
© 2026 Hale & Wren LLP. Attorney advertising. Prior results do not guarantee a similar outcome.
</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>Boutique Firm Landing
A trust-first landing page for a small, specialised law firm. The editorial hero pairs a modern serif headline with restrained navy and gold, leaving generous whitespace and a thin gold rule to anchor the eye. A short manifesto sets the firm’s posture before four focused practice areas spell out where the partners actually work.
A partner spotlight humanises the firm, and a Selected Results band animates discreet outcome figures into view as you scroll. The page closes with an elegant consultation form — labelled, focus-styled, and inline-validated — and a quiet footer. Everything is keyboard-reachable, the mobile nav collapses into a toggle, and all interactions are vanilla JS with no dependencies.
Illustrative UI only — not legal advice and not affiliated with any real firm.