Back to CSS Hero Sections Oversized Number Pure CSS
Share
HTML
<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>
CSS
.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; } }