From 91cc7aa72971291c7348acb7f23921f49d181dba Mon Sep 17 00:00:00 2001 From: Arlind Ukshini Date: Fri, 24 Apr 2026 10:58:56 +0200 Subject: [PATCH] hero: center vertically, widen copy, +10% type, shrink backer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - #page-overview #hero padding rebalanced to clamp(3,8vh,6rem) top and clamp(4,10vh,7rem) bottom so the grid-centered content sits on the true vertical midline rather than being pushed upward by an asymmetric padding-bottom. - .hero-copy max-width 58ch → 70ch (~+20%). .hero-lede follows to 53ch (was 44ch). Headline size clamp(1.65rem,4vw,3.4rem) → clamp(1.8rem,4.4vw,3.75rem), lede follows in proportion. - .support type + svg drop to half the previous (0.75x the base --step-sm, svg 27→14px). The "Backed by Innovationsfonden" line now reads as a quiet footnote instead of competing with the main copy above it. Co-Authored-By: Claude Opus 4.7 (1M context) --- protected/index.html | 40 ++++++++++++++++++++++------------------ 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/protected/index.html b/protected/index.html index 8528ee8..90fa825 100644 --- a/protected/index.html +++ b/protected/index.html @@ -831,11 +831,12 @@ display: grid; align-items: center; position: relative; - /* Asymmetric block padding — the larger padding-bottom shifts the - centered hero content upward, leaving breathing room between the - hero-foot row and the dot-nav at the bottom of the viewport. */ - padding-top: clamp(1.5rem, 3vh, 2.5rem); - padding-bottom: clamp(6rem, 16vh, 11rem); + /* Balanced block padding so the grid-centered content sits on + the true vertical midline instead of being pushed upward by a + big padding-bottom (the previous asymmetric rule was tuned for + a taller headline + more foot clearance to the dot-nav). */ + padding-top: clamp(3rem, 8vh, 6rem); + padding-bottom: clamp(4rem, 10vh, 7rem); } #page-overview #hero .hero-wrap { /* Two-column layout: editorial copy on the left, Fenja wordmark @@ -853,18 +854,21 @@ room on both sides of the viewport, mirroring the space that the right-column wordmark has around it. */ padding-left: clamp(2rem, 8vw, 8rem); - max-width: 58ch; + /* Widened ~20% from 58ch so the column gets more horizontal + room to breathe; the lede follows to 53ch. */ + max-width: 70ch; } - /* Tighter type specifically inside the hero — the lockup reads - clearer when the headline isn't shouting at 4.4rem. */ + /* Hero type — tighter than --step-hero, with a +10% bump from the + previous clamp so the headline has a little more presence at + this wider column width. */ #page-overview #hero .hero-title { - font-size: clamp(1.65rem, 4vw, 3.4rem); + font-size: clamp(1.8rem, 4.4vw, 3.75rem); line-height: 1.08; } #page-overview #hero .hero-lede { - font-size: clamp(1rem, 1.7vw, 1.4rem); + font-size: clamp(1.1rem, 1.87vw, 1.54rem); line-height: 1.45; - max-width: 44ch; + max-width: 53ch; } /* Right-column wordmark — sized to match the welcome page's @@ -1035,16 +1039,16 @@ html { .support { display: flex; align-items: center; - /* All three axes bumped ~50% from the original: gap 0.75→1.1rem, - font-size ×1.5 via a calc on --step-sm, and the svg wordmark - grows 18→27px so the Innovationsfonden lockup reads with more - weight. */ - gap: 1.1rem; - font-size: calc(var(--step-sm) * 1.5); + /* "Backed by Innovationsfonden" halved from the previous 1.5x + treatment — the lockup was competing with the main copy, and + the reader already knows the hierarchy. Type and svg both + drop so the row reads as a quiet footnote. */ + gap: 0.55rem; + font-size: calc(var(--step-sm) * 0.75); text-transform: uppercase; letter-spacing: 0.18em; } - .support svg { height: 27px; width: auto; } + .support svg { height: 14px; width: auto; } .scroll-hint { display: inline-flex;