hero: two-column layout with Fenja wordmark on the right
- Hero copy moves into a .hero-copy column on the left; a new .hero-mark column on the right holds the Fenja wordmark at clamp(200px, 22vw, 320px) wide — same position as the welcome page's .welcome-logo (~75% across the viewport). - New eyebrow "Meet Fenja AI", headline "Trusted & Sovereign AI / built in Denmark, for Europe.", and expanded lede explaining that Fenja AI is both the company and the platform. - "Supported by" → "Backed by". Both the wordmark font-size and the Innovationsfonden SVG get a 50% size bump (calc(--step-sm * 1.5) on the text, 18px → 27px on the svg). - Responsive: at <780px the grid collapses to a single column so the wordmark stacks below the copy on narrow desktop viewports (the mobile UA still gets the separate static mobile view). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arlind Ukshini
parent
a2cbf57ce2
commit
3e73313c3b
1 changed files with 64 additions and 19 deletions
|
|
@ -838,16 +838,38 @@
|
|||
padding-bottom: clamp(6rem, 16vh, 11rem);
|
||||
}
|
||||
#page-overview #hero .hero-wrap {
|
||||
/* Constrain to the left column so Europe is visible to its right.
|
||||
Widened from 62ch to 74ch (~+20%) so the new longer hero lede
|
||||
("Fenja AI is a sovereign AI platform…") sits comfortably on
|
||||
fewer lines. */
|
||||
max-width: 74ch;
|
||||
/* Zeroed: wrap padding-top was adding down-drift inside the centered
|
||||
container, pushing the hero-foot toward the dot-nav. Vertical
|
||||
position is now controlled entirely by #hero's asymmetric padding. */
|
||||
/* Two-column layout: editorial copy on the left, Fenja wordmark
|
||||
on the right — the right column anchors the logo at the same
|
||||
viewport position the welcome page uses (~75% across). */
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 58%) minmax(0, 42%);
|
||||
gap: clamp(2rem, 5vw, 4rem);
|
||||
align-items: center;
|
||||
max-width: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
#page-overview #hero .hero-copy {
|
||||
max-width: 62ch;
|
||||
}
|
||||
|
||||
/* Right-column wordmark — sized to match the welcome page's
|
||||
.welcome-logo (280px at the top end). Decorative only; the
|
||||
heading remains the left-column <h1>. */
|
||||
#page-overview #hero .hero-mark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
#page-overview #hero .hero-mark img {
|
||||
width: clamp(200px, 22vw, 320px);
|
||||
height: auto;
|
||||
display: block;
|
||||
opacity: 0.92;
|
||||
}
|
||||
/* No separate reveal/opacity rule needed: the whole .hero-wrap
|
||||
fades in as one via bifrost.js's hero tween, so both columns
|
||||
arrive together. */
|
||||
|
||||
/* Make sure scenes don't accidentally inherit `main { position: relative }` */
|
||||
#overview-scroll > section { position: relative; z-index: 2; }
|
||||
|
|
@ -998,12 +1020,16 @@ html {
|
|||
.support {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: var(--step-sm);
|
||||
/* 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);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
}
|
||||
.support svg { height: 18px; width: auto; }
|
||||
.support svg { height: 27px; width: auto; }
|
||||
|
||||
.scroll-hint {
|
||||
display: inline-flex;
|
||||
|
|
@ -1564,6 +1590,14 @@ html {
|
|||
|
||||
.hero-foot { margin-top: 2rem; flex-direction: column; gap: 1rem; align-items: flex-start; }
|
||||
#hero { padding-top: 5rem; padding-bottom: 3rem; min-height: auto; }
|
||||
/* Narrow viewports: collapse the hero's 2-column grid so the
|
||||
wordmark sits below the copy instead of beside it. */
|
||||
#page-overview #hero .hero-wrap {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
#page-overview #hero .hero-mark { justify-content: flex-start; }
|
||||
#page-overview #hero .hero-mark img { width: clamp(160px, 40vw, 220px); }
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
|
|
@ -2447,25 +2481,28 @@ html {
|
|||
============================================================ -->
|
||||
<section id="hero" class="scene" aria-labelledby="hero-title">
|
||||
<div class="hero-wrap">
|
||||
<div>
|
||||
<div class="eyebrow" data-reveal>For regulated environments</div>
|
||||
<!-- Left column: eyebrow + headline + lede + foot row. The
|
||||
right column (.hero-mark) holds the Fenja wordmark,
|
||||
mirroring the welcome page's right-side lockup. -->
|
||||
<div class="hero-copy">
|
||||
<div class="eyebrow" data-reveal>Meet Fenja AI</div>
|
||||
<h1 id="hero-title" class="hero-title" data-reveal-lines>
|
||||
Fenja AI — Secure & <em>Sovereign,</em><br/>
|
||||
hosted where it <em>belongs.</em>
|
||||
Trusted & <em>Sovereign AI</em><br/>
|
||||
built in Denmark, for <em>Europe.</em>
|
||||
</h1>
|
||||
<p class="hero-lede" data-reveal>
|
||||
Fenja AI is a sovereign AI platform, enabling highly advanced AI capabilities hosted within the client's own secure infrastructure.
|
||||
Fenja AI is both our company and our platform — one mission, one name. An entirely client-managed AI platform built in Denmark, so Danish and European organisations can take full control of their own AI.
|
||||
</p>
|
||||
|
||||
<!-- Hero foot: "Supported by Innovationsfonden" on the left and
|
||||
<!-- Hero foot: "Backed by Innovationsfonden" on the left and
|
||||
the scroll-down indicator on the right, both inside the
|
||||
left column at the bottom of the paragraph block. Shared
|
||||
baseline via display:flex + align-items:baseline on
|
||||
.hero-foot. The scroll arrow points DOWN and gently bounces
|
||||
downward (see @keyframes hint below). -->
|
||||
<div class="hero-foot">
|
||||
<div class="support" aria-label="Supported by Innovationsfonden" data-reveal>
|
||||
<span>Supported by</span>
|
||||
<div class="support" aria-label="Backed by Innovationsfonden" data-reveal>
|
||||
<span>Backed by</span>
|
||||
<!-- Simplified Innovationsfonden wordmark (redrawn — not their official logo, a respectful representation) -->
|
||||
<svg viewBox="0 0 190 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<g fill="#3c6b6b">
|
||||
|
|
@ -2480,6 +2517,14 @@ html {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right column: the Fenja wordmark, anchored to the right
|
||||
half of the viewport — same placement the welcome page
|
||||
uses for its .welcome-logo. Decorative; the <h1> above
|
||||
is still the semantic heading. -->
|
||||
<div class="hero-mark" aria-hidden="true" data-reveal>
|
||||
<img src="/fenja/fenja-wordmark-black.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue