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

entrance: "Backed by Innovationsfonden" below the welcome-logo

Browse source 
A small supporter lockup (uppercase "Backed by" + redrawn
Innovationsfonden wordmark, same treatment as the hero's .support
block) sits directly under the fixed welcome-logo at left:75%,
~45px below the logo's centre. Fades in with the welcome step via
the same body:has(#step-welcome.is-active) trigger the logo uses,
hidden on the email step and on narrow viewports.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arlind Ukshini 2026-04-24 11:00:19 +02:00
parent 91cc7aa729
commit 0b07b2a8f6
1 changed files with 42 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
public/entrance.html
View file

@ -148,6 +148,35 @@
opacity: 0.92;
}
/* "Backed by Innovationsfonden" — sits directly beneath the fixed
welcome-logo at the same horizontal centre (left:75%). Fades in
with the welcome step (same trigger as the logo above it). */
.welcome-backer {
position: fixed;
/* welcome-logo is centred at top:50% with width 280px and h:~46px,
so the bottom edge is ~50% + 23px. This sits ~22px below that. */
top: calc(50% + 45px);
left: 75%;
transform: translate(-50%, 0);
display: inline-flex;
align-items: center;
gap: 10px;
font-family: "Manrope", system-ui, -apple-system, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
opacity: 0;
pointer-events: none;
z-index: 5;
transition: opacity 640ms var(--ease) 160ms;
}
.welcome-backer svg { height: 16px; width: auto; display: block; }
body:has(#step-welcome.is-active) .welcome-backer {
opacity: 0.85;
}
/* ───── Welcome ───── */
.welcome-title {
font-family: "Newsreader", Georgia, "Times New Roman", serif;
@ -288,6 +317,7 @@
.welcome-title { font-size: 38px; }
.welcome-body { font-size: 18px; }
.welcome-logo { display: none; }
.welcome-backer { display: none; }
}
</style>
</head>
@ -296,6 +326,18 @@
<div class="currents" id="currents" aria-hidden="true"></div>
<img class="welcome-logo" src="/fenja/fenja-wordmark-black.svg" alt="Fenja" aria-hidden="true" />
<div class="welcome-backer" aria-label="Backed by Innovationsfonden" aria-hidden="true">
<span>Backed by</span>
<!-- Simplified Innovationsfonden wordmark — same redrawn lockup
as the hero's .support block. 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">
<path d="M4 2 L12 18 L10 2 Z" />
<text x="18" y="15" font-family="Manrope, sans-serif" font-weight="600" font-size="13" letter-spacing="0.2" fill="#3c6b6b">nnovationsfonden</text>
</g>
</svg>
</div>
<main class="entrance">
<div class="entrance-inner">