joh/customer-presentation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

hero: center vertically, widen copy, +10% type, shrink backer

Browse source 
- #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) <noreply@anthropic.com>
This commit is contained in:
Arlind Ukshini 2026-04-24 10:58:56 +02:00
parent 7e3f0e6ada
commit 91cc7aa729
1 changed files with 22 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
protected/index.html
View file

@ -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;