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

hero: drop eyebrow, tighten type, indent copy column

Browse source 
- "Meet Fenja AI" eyebrow removed — headline + wordmark pairing
  is enough to anchor the scene.
- Type scale reduced inside #hero: title clamp(1.65rem, 4vw, 3.4rem)
  (was clamp(2rem, 5.1vw, 4.4rem) via --step-hero), lede
  clamp(1rem, 1.7vw, 1.4rem). Reads calmer and keeps the headline
  from overshadowing the lede.
- .hero-copy gets padding-left: clamp(2rem, 8vw, 8rem) so the text
  block floats in the same way the wordmark does in its column —
  symmetric breathing room on both sides of the viewport rather
  than the copy hugging the left edge.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arlind Ukshini 2026-04-24 10:54:47 +02:00
parent 3e73313c3b
commit 7e3f0e6ada
1 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
protected/index.html
View file

@ -849,7 +849,22 @@
padding-top: 0;
}
#page-overview #hero .hero-copy {
max-width: 62ch;
/* Indent from the left so the text block floats with breathing
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;
}
/* Tighter type specifically inside the hero — the lockup reads
clearer when the headline isn't shouting at 4.4rem. */
#page-overview #hero .hero-title {
font-size: clamp(1.65rem, 4vw, 3.4rem);
line-height: 1.08;
}
#page-overview #hero .hero-lede {
font-size: clamp(1rem, 1.7vw, 1.4rem);
line-height: 1.45;
max-width: 44ch;
}
/* Right-column wordmark — sized to match the welcome page's
@ -2481,11 +2496,11 @@ html {
============================================================ -->
<section id="hero" class="scene" aria-labelledby="hero-title">
<div class="hero-wrap">
<!-- Left column: eyebrow + headline + lede + foot row. The
right column (.hero-mark) holds the Fenja wordmark,
mirroring the welcome page's right-side lockup. -->
<!-- Left column: headline + lede + foot row. The right column
(.hero-mark) holds the Fenja wordmark, mirroring the
welcome page's right-side lockup. No eyebrow here — the
headline + logo pairing is enough to anchor the scene. -->
<div class="hero-copy">
<div class="eyebrow" data-reveal>Meet Fenja AI</div>
<h1 id="hero-title" class="hero-title" data-reveal-lines>
Trusted &amp; <em>Sovereign AI</em><br/>
built in Denmark, for <em>Europe.</em>