From cd91fbbb95a50ea8f1ffcfa367d518b280a18c7b Mon Sep 17 00:00:00 2001 From: Devin Willis Date: Wed, 26 Aug 2026 14:19:03 -0400 Subject: [PATCH] Size the hero by its content instead of 100dvh --- public/css/style.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 6c8b065..6617006 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -127,11 +127,13 @@ a { color: var(--accent2); } /* ── Hero: asymmetric split ───────────────────────────────── */ +/* Sized by its content, not by 100dvh. A viewport-height hero centred its copy + a third of the way down a laptop screen and buried the details strip; this + still clears the fold on a 900px screen and lets the next section peek. */ .hero { max-width: var(--shell); margin: 0 auto; - min-height: 100dvh; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 4rem; align-items: center; - padding: calc(64px + 3rem) var(--gut) 4rem; + padding: calc(64px + 3.5rem) var(--gut) 5rem; } .eyebrow { @@ -310,7 +312,7 @@ form { margin-top: 2rem; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 1000px) { - .hero { grid-template-columns: 1fr; gap: 2.8rem; min-height: 0; padding-top: calc(64px + 2.5rem); } + .hero { grid-template-columns: 1fr; gap: 2.8rem; padding: calc(64px + 2.5rem) var(--gut) 3.5rem; } .hero-figure { order: -1; } .hero-figure img { aspect-ratio: 16 / 10; } .bento { grid-template-columns: 1fr 1fr; }