Oversized Number
Vintage wine-label poster — a massive faded burgundy "1924" set behind italic serif copy with gold-leaf accents on cream paper.
The code
<section class="hs-ovn" aria-label="Hero">
<div class="hs-ovn-bg" aria-hidden="true">1924</div>
<div class="hs-ovn-inner">
<span class="hs-ovn-eye">— Estate · Vinifera ·</span>
<h2>A century of <em>quiet wines.</em></h2>
<p>
Six grapes. Four hectares. One family that still skips the marketing and lets the vintage
speak.
</p>
<a class="hs-ovn-cta" href="#cellar">Visit the cellar</a>
</div>
</section> <section class="hs-ovn" aria-label="Hero">
<div class="hs-ovn-bg" aria-hidden="true">1924</div>
<div class="hs-ovn-inner">
<span class="hs-ovn-eye">— Estate · Vinifera ·</span>
<h2>A century of <em>quiet wines.</em></h2>
<p>
Six grapes. Four hectares. One family that still skips the marketing and lets the vintage
speak.
</p>
<a class="hs-ovn-cta" href="#cellar">Visit the cellar</a>
</div>
</section>.hs-ovn {
position: relative; overflow: hidden;
display: grid; place-items: center;
width: 100%; min-height: 480px;
padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
background: #f5ebd4;
font-family: 'Playfair Display', Georgia, serif;
color: #2a0a18;
box-sizing: border-box;
}
.hs-ovn-bg {
position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
font-size: clamp(220px, 38vw, 480px); font-weight: 900; line-height: 1;
color: #6b1230; opacity: 0.12; pointer-events: none;
letter-spacing: -0.02em;
}
.hs-ovn-inner { position: relative; z-index: 1; max-width: 580px; text-align: center; }
.hs-ovn-eye {
display: inline-block;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic; font-size: 16px;
color: #c69e3d; margin-bottom: 16px;
letter-spacing: 0.08em;
}
.hs-ovn h2 {
margin: 0 0 18px;
font-size: clamp(36px, 6vw, 60px);
font-weight: 600; line-height: 1.05;
}
.hs-ovn h2 em { color: #6b1230; font-style: italic; }
.hs-ovn p {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic; font-size: 18px; line-height: 1.55;
color: #5a3848; margin: 0 auto 24px; max-width: 460px;
}
.hs-ovn-cta {
display: inline-block; padding: 12px 28px;
background: transparent; color: #6b1230;
border: 1.5px solid #6b1230; border-radius: 0;
text-decoration: none;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase;
transition: background 0.18s, color 0.18s;
}
.hs-ovn-cta:hover { background: #6b1230; color: #f5ebd4; }
@media (prefers-reduced-motion: reduce) { .hs-ovn-cta { transition: none; } } .hs-ovn {
position: relative; overflow: hidden;
display: grid; place-items: center;
width: 100%; min-height: 480px;
padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
background: #f5ebd4;
font-family: 'Playfair Display', Georgia, serif;
color: #2a0a18;
box-sizing: border-box;
}
.hs-ovn-bg {
position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
font-size: clamp(220px, 38vw, 480px); font-weight: 900; line-height: 1;
color: #6b1230; opacity: 0.12; pointer-events: none;
letter-spacing: -0.02em;
}
.hs-ovn-inner { position: relative; z-index: 1; max-width: 580px; text-align: center; }
.hs-ovn-eye {
display: inline-block;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic; font-size: 16px;
color: #c69e3d; margin-bottom: 16px;
letter-spacing: 0.08em;
}
.hs-ovn h2 {
margin: 0 0 18px;
font-size: clamp(36px, 6vw, 60px);
font-weight: 600; line-height: 1.05;
}
.hs-ovn h2 em { color: #6b1230; font-style: italic; }
.hs-ovn p {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic; font-size: 18px; line-height: 1.55;
color: #5a3848; margin: 0 auto 24px; max-width: 460px;
}
.hs-ovn-cta {
display: inline-block; padding: 12px 28px;
background: transparent; color: #6b1230;
border: 1.5px solid #6b1230; border-radius: 0;
text-decoration: none;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase;
transition: background 0.18s, color 0.18s;
}
.hs-ovn-cta:hover { background: #6b1230; color: #f5ebd4; }
@media (prefers-reduced-motion: reduce) { .hs-ovn-cta { transition: none; } }