credits: redesign supporter lockup + mobile parity pass
Rework the supporter credits ("Backed by" / "Part of") into a
three-tier lockup — a small uppercase label over an upright Newsreader
serif name, with the parent body / issuing authority in a quieter
serif beneath — so the credits read in the deck's editorial voice
instead of as a foreign sans-serif caption. Applied consistently
across all three views:
- Entrance welcome screen: replaced three separately position:fixed
blocks (with hand-tuned top offsets) with one centred .welcome-credits
lockup; drops the brittle magic-number stacking.
- Timeline hero ("Fenja introduction"): left-aligned .support-credit
stack in place of the old .support / .support-bii lines.
- Mobile hero: matching .m-credit stack replacing .m-support / .m-backer.
Credits now read: Backed by Innofounder (Innovationsfonden); Part of
AI Lab (BioInnovation Institute); Part of The AI Regulatory Sandbox
(Datatilsynet & Digitaliseringsstyrelsen).
Also brings the mobile view to parity with the customer-facing desktop
deck: updated hero copy, platform-question framing, architecture layers,
Wiki deep-dive, deployment cards, and implementation roadmap; removes the
old "Join Project Bifrost" CTA + footer (mobile.js loses the join
handler, keeps the session check).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
0c4b3a438e
commit
9703d47407
5 changed files with 943 additions and 440 deletions
|
|
@ -1037,36 +1037,46 @@ html {
|
||||||
color: var(--ink-mute);
|
color: var(--ink-mute);
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
.support {
|
/* Backer credits — funder + affiliations, in the deck's editorial
|
||||||
display: flex;
|
voice: a small uppercase Manrope label over each entity name set
|
||||||
align-items: center;
|
in upright Newsreader serif, with the parent body / issuing
|
||||||
/* Matched to the welcome page's .welcome-backer: 11px uppercase
|
authority in a quieter serif beneath. Left-aligned variant of the
|
||||||
text, 0.18em tracking. The wordmark SVG grows to 24px so the
|
entrance page's centred .welcome-credits lockup. */
|
||||||
Innovationsfonden lockup reads more confidently while the
|
|
||||||
accompanying "Backed by" label stays quiet. */
|
|
||||||
gap: 10px;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.18em;
|
|
||||||
}
|
|
||||||
.support svg { height: 24px; width: auto; }
|
|
||||||
|
|
||||||
/* Two-line backer block: the Innovationsfonden lockup above, the
|
|
||||||
"Part of BioInnovation Institute AI Lab" line directly below.
|
|
||||||
Mirrors the entrance page's .welcome-backer + .welcome-bii pair. */
|
|
||||||
.support-stack {
|
.support-stack {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 6px;
|
gap: 15px;
|
||||||
}
|
}
|
||||||
.support-bii {
|
.support-credit {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
.support-credit-label {
|
||||||
|
font-family: "Manrope", system-ui, sans-serif;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.22em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.18em;
|
color: var(--ink-dim);
|
||||||
color: var(--ink-soft, var(--ink-mute));
|
}
|
||||||
|
.support-credit-name {
|
||||||
|
font-family: "Newsreader", Georgia, serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 1.2;
|
||||||
|
letter-spacing: 0.005em;
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
.support-credit-auth {
|
||||||
|
font-family: "Newsreader", Georgia, serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 13.5px;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: var(--ink-soft);
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-hint {
|
.scroll-hint {
|
||||||
|
|
@ -2540,17 +2550,21 @@ html {
|
||||||
downward (see @keyframes hint below). -->
|
downward (see @keyframes hint below). -->
|
||||||
<div class="hero-foot">
|
<div class="hero-foot">
|
||||||
<div class="support-stack" data-reveal>
|
<div class="support-stack" data-reveal>
|
||||||
<div class="support" aria-label="Backed by Innovationsfonden">
|
<div class="support-credit">
|
||||||
<span>Backed by</span>
|
<span class="support-credit-label">Backed by</span>
|
||||||
<!-- Simplified Innovationsfonden wordmark (redrawn — not their official logo, a respectful representation) -->
|
<span class="support-credit-name">Innofounder</span>
|
||||||
<svg viewBox="0 0 190 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
<span class="support-credit-auth">Innovationsfonden</span>
|
||||||
<g fill="#3c6b6b">
|
</div>
|
||||||
<path d="M4 2 L12 18 L10 2 Z" />
|
<div class="support-credit">
|
||||||
<text x="18" y="15" font-family="Manrope, sans-serif" font-weight="600" font-size="13" letter-spacing="0.2" fill="#3c6b6b">nnovationsfonden</text>
|
<span class="support-credit-label">Part of</span>
|
||||||
</g>
|
<span class="support-credit-name">AI Lab</span>
|
||||||
</svg>
|
<span class="support-credit-auth">BioInnovation Institute</span>
|
||||||
|
</div>
|
||||||
|
<div class="support-credit">
|
||||||
|
<span class="support-credit-label">Part of</span>
|
||||||
|
<span class="support-credit-name">The AI Regulatory Sandbox</span>
|
||||||
|
<span class="support-credit-auth">Datatilsynet & Digitaliseringsstyrelsen</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="support-bii">Part of BioInnovation Institute AI Lab</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="scroll-hint" aria-hidden="true" data-reveal>
|
<div class="scroll-hint" aria-hidden="true" data-reveal>
|
||||||
<span>Scroll</span>
|
<span>Scroll</span>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||||
<meta name="robots" content="noindex, nofollow" />
|
<meta name="robots" content="noindex, nofollow" />
|
||||||
<meta name="theme-color" content="#faf6ee" />
|
<meta name="theme-color" content="#faf6ee" />
|
||||||
<title>Fenja AI — Project Bifrost</title>
|
<title>Fenja AI — Trusted & Sovereign AI</title>
|
||||||
<link rel="stylesheet" href="/fenja/colors_and_type.css" />
|
<link rel="stylesheet" href="/fenja/colors_and_type.css" />
|
||||||
<link rel="stylesheet" href="/mobile/mobile.css" />
|
<link rel="stylesheet" href="/mobile/mobile.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -155,53 +155,28 @@
|
||||||
</div>
|
</div>
|
||||||
<p class="m-eyebrow">For regulated environments</p>
|
<p class="m-eyebrow">For regulated environments</p>
|
||||||
<h2 class="m-hero-title">
|
<h2 class="m-hero-title">
|
||||||
Fenja AI — Secure & <em>Sovereign,</em> hosted where it <em>belongs.</em>
|
Trusted & <em>Sovereign AI</em> built in Denmark, for <em>Europe.</em>
|
||||||
</h2>
|
</h2>
|
||||||
<p class="m-hero-lede">
|
<p class="m-hero-lede">
|
||||||
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>
|
</p>
|
||||||
<div class="m-support">
|
<div class="m-credits">
|
||||||
<span class="m-support-label">Supported by</span>
|
<div class="m-credit">
|
||||||
<span class="m-support-name">Innovationsfonden</span>
|
<span class="m-credit-label">Backed by</span>
|
||||||
|
<span class="m-credit-name">Innofounder</span>
|
||||||
|
<span class="m-credit-auth">Innovationsfonden</span>
|
||||||
|
</div>
|
||||||
|
<div class="m-credit">
|
||||||
|
<span class="m-credit-label">Part of</span>
|
||||||
|
<span class="m-credit-name">AI Lab</span>
|
||||||
|
<span class="m-credit-auth">BioInnovation Institute</span>
|
||||||
|
</div>
|
||||||
|
<div class="m-credit">
|
||||||
|
<span class="m-credit-label">Part of</span>
|
||||||
|
<span class="m-credit-name">The AI Regulatory Sandbox</span>
|
||||||
|
<span class="m-credit-auth">Datatilsynet & Digitaliseringsstyrelsen</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ─── Capabilities (4 layers) ─── -->
|
|
||||||
<section class="m-section m-caps" aria-labelledby="m-caps-head">
|
|
||||||
<p class="m-section-eyebrow">One complete platform</p>
|
|
||||||
<h2 id="m-caps-head" class="m-section-head">The Fenja AI platform in <em>four steps.</em></h2>
|
|
||||||
|
|
||||||
<article class="m-cap">
|
|
||||||
<img class="m-cap-icon" src="/fenja/illustrations/ai.png" alt="" aria-hidden="true" />
|
|
||||||
<span class="m-cap-num">1 / 4</span>
|
|
||||||
<p class="m-cap-eyebrow">The AI</p>
|
|
||||||
<h3 class="m-cap-title">An <b>open-source</b> model, running on your <em>own hardware.</em></h3>
|
|
||||||
<p class="m-cap-body">A state-of-the-art open-source language model deployed directly in your environment. It gives you powerful AI capabilities with full control over data, performance, and security.</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="m-cap">
|
|
||||||
<img class="m-cap-icon" src="/fenja/illustrations/lightbulb%20-%20knowledge.png" alt="" aria-hidden="true" />
|
|
||||||
<span class="m-cap-num">2 / 4</span>
|
|
||||||
<p class="m-cap-eyebrow">The Knowledge</p>
|
|
||||||
<h3 class="m-cap-title">The business context that makes <em>AI understand your world.</em></h3>
|
|
||||||
<p class="m-cap-body">A built-in knowledge layer that helps the platform understand your terminology, processes, and data. It retains what matters, improves over time, and gives the AI the context needed to deliver relevant and accurate results.</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="m-cap">
|
|
||||||
<img class="m-cap-icon" src="/fenja/illustrations/blocs%20tools.png" alt="" aria-hidden="true" />
|
|
||||||
<span class="m-cap-num">3 / 4</span>
|
|
||||||
<p class="m-cap-eyebrow">The Tools</p>
|
|
||||||
<h3 class="m-cap-title">How AI <b>acts</b> — not just what it <em>knows.</em></h3>
|
|
||||||
<p class="m-cap-body">The capabilities that let the platform do real work across your environment. From search and retrieval to data access, automation, and analysis, these are the tools the AI uses to solve tasks in practice.</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="m-cap">
|
|
||||||
<img class="m-cap-icon" src="/fenja/illustrations/agents.png" alt="" aria-hidden="true" />
|
|
||||||
<span class="m-cap-num">4 / 4</span>
|
|
||||||
<p class="m-cap-eyebrow">The Agents</p>
|
|
||||||
<h3 class="m-cap-title">Specialized AI agents <b>working together</b> around <em>real tasks.</em></h3>
|
|
||||||
<p class="m-cap-body">Purpose-built agents designed to handle distinct roles and workflows. Fenja AI includes both ready-made agents and the framework to build new ones, so you can orchestrate AI the same way your organisation already works — through specialisation and coordination.</p>
|
|
||||||
</article>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ─── Project Bifrost reveal ───
|
<!-- ─── Project Bifrost reveal ───
|
||||||
|
|
@ -289,45 +264,359 @@
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ─── Join CTA ─── -->
|
<!-- ─── Advisory board ─── -->
|
||||||
<section class="m-section m-join" aria-labelledby="m-join-head">
|
<section class="m-section m-board" aria-labelledby="m-board-head">
|
||||||
<div class="m-join-panel" id="m-join-cta">
|
<h2 id="m-board-head" class="m-section-head">Meet the Fenja AI <em>Advisory Board</em></h2>
|
||||||
<p class="m-join-eyebrow">Ready?</p>
|
<p class="m-board-sub">Bridging industry & sovereign AI</p>
|
||||||
<h2 id="m-join-head" class="m-join-headline">
|
|
||||||
Join us in shaping the future of <em>trusted sovereign AI.</em>
|
|
||||||
</h2>
|
|
||||||
<button type="button" class="m-join-button" id="m-join-btn">
|
|
||||||
Join Project Bifrost
|
|
||||||
</button>
|
|
||||||
<p class="m-join-subtext">Built in Denmark. Supported by the Innovation Fund.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="m-join-panel m-join-confirmation" id="m-join-confirm" hidden>
|
<div class="m-board-grid">
|
||||||
<p class="m-join-eyebrow">You’re in</p>
|
<figure class="m-board-member">
|
||||||
<h2 class="m-join-headline">Thank you for joining <em>Project Bifrost</em>.</h2>
|
<div class="m-board-portrait"><img src="/fenja/board/soren-friis.jpg" alt="Søren Friis" loading="lazy" /></div>
|
||||||
<ul class="m-confirm-list">
|
<p class="m-bm-name">Søren Friis</p>
|
||||||
<li>The <em>Fenja AI team</em> will reach out to you shortly.</li>
|
<p class="m-bm-title">IT Director</p>
|
||||||
<li>You’ll receive an invitation to the <em>project portal</em> soon — where all project communication, materials, and updates will live.</li>
|
<p class="m-bm-company">DSB</p>
|
||||||
<li>We’re currently setting the date for the <em>first advisory council meeting</em>. You’ll be invited as soon as it’s confirmed.</li>
|
</figure>
|
||||||
<li>We’ll be in touch shortly about your participation in the <em>pilot project</em>.</li>
|
|
||||||
</ul>
|
<figure class="m-board-member">
|
||||||
|
<div class="m-board-portrait"><img src="/fenja/board/william-irving.jpg" alt="William Irving" loading="lazy" /></div>
|
||||||
|
<p class="m-bm-name">William Irving</p>
|
||||||
|
<p class="m-bm-title">Chief Data & Analytics Officer</p>
|
||||||
|
<p class="m-bm-company">Norlys</p>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="m-board-member">
|
||||||
|
<div class="m-board-portrait"><img src="/fenja/board/ulla-nygaard-eliassen.jpg" alt="Ulla Nygaard Eliassen" loading="lazy" /></div>
|
||||||
|
<p class="m-bm-name">Ulla Nygaard Eliassen</p>
|
||||||
|
<p class="m-bm-title">Associate Improvement Project Director</p>
|
||||||
|
<p class="m-bm-company">Novo Nordisk</p>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="m-board-member">
|
||||||
|
<div class="m-board-portrait"><img src="/fenja/board/anna-jessen.jpg" alt="Anna Jessen" loading="lazy" /></div>
|
||||||
|
<p class="m-bm-name">Anna Jessen</p>
|
||||||
|
<p class="m-bm-title">Director, Process Excellence & Digitalization</p>
|
||||||
|
<p class="m-bm-company">Novo Nordisk</p>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="m-board-member">
|
||||||
|
<div class="m-board-portrait"><img src="/fenja/board/mathies-laursen.jpg" alt="Mathies Laursen" loading="lazy" /></div>
|
||||||
|
<p class="m-bm-name">Mathies Laursen</p>
|
||||||
|
<p class="m-bm-title">CDO</p>
|
||||||
|
<p class="m-bm-company">Nationalbanken</p>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="m-board-member">
|
||||||
|
<div class="m-board-portrait"><img src="/fenja/board/torben-schutt.jpg" alt="Torben Schütt" loading="lazy" /></div>
|
||||||
|
<p class="m-bm-name">Torben Schütt</p>
|
||||||
|
<p class="m-bm-title">Office Director, Center for Cyber and Digitalization</p>
|
||||||
|
<p class="m-bm-company">Forsvarsministeriet</p>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="m-board-member">
|
||||||
|
<div class="m-board-portrait"><img src="/fenja/board/mads-nyborg.jpg" alt="Mads Nyborg" loading="lazy" /></div>
|
||||||
|
<p class="m-bm-name">Mads Nyborg</p>
|
||||||
|
<p class="m-bm-title">Chief Consultant, Department of Data and Analytics</p>
|
||||||
|
<p class="m-bm-company">Københavns Kommune</p>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="m-board-member">
|
||||||
|
<div class="m-board-portrait"><img src="/fenja/board/hakon-daltveit.jpg" alt="Håkon Daltveit" loading="lazy" /></div>
|
||||||
|
<p class="m-bm-name">Håkon Daltveit</p>
|
||||||
|
<p class="m-bm-title">Chief Consultant, Department of Data and Analytics</p>
|
||||||
|
<p class="m-bm-company">Københavns Kommune</p>
|
||||||
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer class="m-foot" aria-label="Supporters">
|
<!-- ─── Platform question (framing) ───
|
||||||
<div class="m-foot-mark m-foot-mark--project">
|
Mirrors desktop #platform-question — the lead-in that reframes
|
||||||
Project <em>Bifrost</em>
|
"rent capabilities / install a model" as not enough. -->
|
||||||
|
<section class="m-section m-pq">
|
||||||
|
<h2 class="m-pq-title">
|
||||||
|
Renting a few AI capabilities from American companies isn’t enough. Installing an open-source language model isn’t enough.
|
||||||
|
</h2>
|
||||||
|
<p class="m-pq-body">
|
||||||
|
You need a <em>platform you control</em> — with the tools, the knowledge, and the framework to make AI actually do the work your organization needs done.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ─── Architecture ───
|
||||||
|
Static flatten of desktop #platform-layers: the five narrative
|
||||||
|
beats as colored cards, then the component grid (Foundation /
|
||||||
|
Tools / Agents) under an "Everything Client-Managed" frame. -->
|
||||||
|
<section class="m-section m-arch" aria-labelledby="m-arch-head">
|
||||||
|
<p class="m-section-eyebrow">Fenja AI Platform Architecture</p>
|
||||||
|
<h2 id="m-arch-head" class="m-section-head">Simply <em>explained.</em></h2>
|
||||||
|
|
||||||
|
<article class="m-arch-beat">
|
||||||
|
<p class="m-arch-eyebrow">The foundation</p>
|
||||||
|
<h3 class="m-arch-headline"><em>A model in your environment.</em></h3>
|
||||||
|
<p class="m-arch-body">A state-of-the-art open-source language model, running entirely on your hardware. No data leaves your perimeter. The starting point — but not yet Fenja.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="m-arch-beat">
|
||||||
|
<p class="m-arch-eyebrow">The foundation</p>
|
||||||
|
<h3 class="m-arch-headline"><em>Knowledge.</em></h3>
|
||||||
|
<p class="m-arch-body">What makes the model <em>Fenja</em> — an understanding of your organization, captured in a wiki your team can read and edit. Plus the routines and working memory that turn Fenja into a coworker who knows how things get done.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="m-arch-beat">
|
||||||
|
<p class="m-arch-eyebrow">What Fenja can do</p>
|
||||||
|
<h3 class="m-arch-headline"><em>Tools.</em></h3>
|
||||||
|
<p class="m-arch-body">How knowledge becomes work. Fenja uses tools to find documents, query data, take action across your systems. Some are obvious; others depend on what your work needs.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="m-arch-beat">
|
||||||
|
<p class="m-arch-eyebrow">When one becomes a team</p>
|
||||||
|
<h3 class="m-arch-headline"><em>Agents.</em></h3>
|
||||||
|
<p class="m-arch-body">Real work isn’t one task. Fenja becomes a team — a supervisor and specialists, each focused, each governed, all dispatched by workflows you’ve designed.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="m-arch-beat m-arch-beat--summary">
|
||||||
|
<p class="m-arch-eyebrow">The full picture</p>
|
||||||
|
<h3 class="m-arch-headline"><em>Everything you need and with full control.</em></h3>
|
||||||
|
<p class="m-arch-body">Fenja brings together all the pieces to solve simple and complex AI use cases across your organisation. Every component hosted in your infrastructure with full traceability and governance. Secure and sovereign by design.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Component grid — three labeled groups under the client-managed frame. -->
|
||||||
|
<div class="m-arch-frame">
|
||||||
|
<p class="m-arch-frame-label">Everything Client-Managed</p>
|
||||||
|
|
||||||
|
<div class="m-arch-group">
|
||||||
|
<div class="m-arch-group-head">
|
||||||
|
<span class="m-arch-group-label">Foundation</span>
|
||||||
|
<span class="m-arch-group-caption">Sovereign by design</span>
|
||||||
</div>
|
</div>
|
||||||
<img class="m-foot-mark m-foot-mark--fenja"
|
<div class="m-arch-cards">
|
||||||
src="/fenja/fenja-wordmark-black.svg"
|
<article class="m-arch-card">
|
||||||
alt="Fenja AI" />
|
<h4 class="m-arch-card-name">Language model</h4>
|
||||||
<div class="m-foot-mark m-foot-mark--innov" aria-label="Innovationsfonden">
|
<p class="m-arch-card-italic">State-of-the-art, open-source</p>
|
||||||
<svg class="m-innov-mark" viewBox="0 0 60 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
<p class="m-arch-card-mono">On-prem</p>
|
||||||
<path d="M 22 4 L 55 4 L 38 96 L 5 96 Z" fill="currentColor"/>
|
</article>
|
||||||
</svg>
|
<article class="m-arch-card">
|
||||||
<span class="m-innov-word">nnovationsfonden</span>
|
<h4 class="m-arch-card-name">Wiki</h4>
|
||||||
|
<p class="m-arch-card-italic">Company and domain knowledge</p>
|
||||||
|
<p class="m-arch-card-mono">Organizational · Departmental · Personal</p>
|
||||||
|
</article>
|
||||||
|
<article class="m-arch-card">
|
||||||
|
<h4 class="m-arch-card-name">Routines & memory</h4>
|
||||||
|
<p class="m-arch-card-italic">How Fenja works inside it</p>
|
||||||
|
<p class="m-arch-card-mono">Stand-ups · Recurring tasks · Working memory</p>
|
||||||
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</div>
|
||||||
|
|
||||||
|
<div class="m-arch-group">
|
||||||
|
<div class="m-arch-group-head">
|
||||||
|
<span class="m-arch-group-label">Tools</span>
|
||||||
|
<span class="m-arch-group-caption">How Fenja acts</span>
|
||||||
|
</div>
|
||||||
|
<div class="m-arch-cards">
|
||||||
|
<article class="m-arch-card">
|
||||||
|
<h4 class="m-arch-card-name">Document retrieval</h4>
|
||||||
|
<p class="m-arch-card-italic">Find and cite</p>
|
||||||
|
<p class="m-arch-card-mono">RAG</p>
|
||||||
|
</article>
|
||||||
|
<article class="m-arch-card">
|
||||||
|
<h4 class="m-arch-card-name">Structured data (ie SQL)</h4>
|
||||||
|
<p class="m-arch-card-italic">Query and extract</p>
|
||||||
|
<p class="m-arch-card-mono">NL → SQL</p>
|
||||||
|
</article>
|
||||||
|
<article class="m-arch-card">
|
||||||
|
<h4 class="m-arch-card-name">System actions</h4>
|
||||||
|
<p class="m-arch-card-italic">Read and write</p>
|
||||||
|
<p class="m-arch-card-mono">APIs · integrations</p>
|
||||||
|
</article>
|
||||||
|
<article class="m-arch-card">
|
||||||
|
<h4 class="m-arch-card-name">Custom tools</h4>
|
||||||
|
<p class="m-arch-card-italic">Your specific work</p>
|
||||||
|
<p class="m-arch-card-mono">Defined by you</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="m-arch-group">
|
||||||
|
<div class="m-arch-group-head">
|
||||||
|
<span class="m-arch-group-label">Agents</span>
|
||||||
|
<span class="m-arch-group-caption">How Fenja scales</span>
|
||||||
|
</div>
|
||||||
|
<div class="m-arch-cards">
|
||||||
|
<article class="m-arch-card">
|
||||||
|
<h4 class="m-arch-card-name">Supervisor</h4>
|
||||||
|
<p class="m-arch-card-italic">Plan and dispatch</p>
|
||||||
|
<p class="m-arch-card-mono">Orchestration</p>
|
||||||
|
</article>
|
||||||
|
<article class="m-arch-card">
|
||||||
|
<h4 class="m-arch-card-name">Specialists</h4>
|
||||||
|
<p class="m-arch-card-italic">Focused expertise</p>
|
||||||
|
<p class="m-arch-card-mono">Subagents</p>
|
||||||
|
</article>
|
||||||
|
<article class="m-arch-card">
|
||||||
|
<h4 class="m-arch-card-name">Skills</h4>
|
||||||
|
<p class="m-arch-card-italic">Reusable capability</p>
|
||||||
|
<p class="m-arch-card-mono">Portable across specialists</p>
|
||||||
|
</article>
|
||||||
|
<article class="m-arch-card">
|
||||||
|
<h4 class="m-arch-card-name">Workflows</h4>
|
||||||
|
<p class="m-arch-card-italic">Composed by you</p>
|
||||||
|
<p class="m-arch-card-mono">Governed end-to-end</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ─── Wiki deep-dive ───
|
||||||
|
Static flatten of desktop #wiki-deepdive: scattered knowledge →
|
||||||
|
AI Compiler → structured output, top-to-bottom with chevron
|
||||||
|
connectors. Top stays "messy", bottom stays "calm". -->
|
||||||
|
<section class="m-section m-wiki" aria-labelledby="m-wiki-head">
|
||||||
|
<p class="m-section-eyebrow">From scattered to structured</p>
|
||||||
|
<h2 id="m-wiki-head" class="m-section-head">One structured <em>source of truth.</em></h2>
|
||||||
|
|
||||||
|
<div class="m-wiki-zone m-wiki-zone--scatter">
|
||||||
|
<p class="m-wiki-eyebrow">What you have today</p>
|
||||||
|
<h3 class="m-wiki-name">Scattered knowledge</h3>
|
||||||
|
<p class="m-wiki-sub">Documents · Emails · Notes · Knowledge in people’s heads</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="m-wiki-arrow" aria-hidden="true"></div>
|
||||||
|
|
||||||
|
<div class="m-wiki-zone m-wiki-zone--compiler">
|
||||||
|
<p class="m-wiki-eyebrow">Fenja Compiler</p>
|
||||||
|
<h3 class="m-wiki-name">AI Compiler</h3>
|
||||||
|
<p class="m-wiki-sub">Apply your rules and structure to fit your requirements</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="m-wiki-arrow" aria-hidden="true"></div>
|
||||||
|
|
||||||
|
<div class="m-wiki-zone m-wiki-zone--output">
|
||||||
|
<p class="m-wiki-eyebrow">Fenja Wiki</p>
|
||||||
|
<h3 class="m-wiki-name">Structured output</h3>
|
||||||
|
<p class="m-wiki-sub">Structured output · easy for humans and AIs to read.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ─── Deployment options ───
|
||||||
|
Mirrors desktop #platform-cards "Choose your Capability". -->
|
||||||
|
<section class="m-section m-deploy" aria-labelledby="m-deploy-head">
|
||||||
|
<p class="m-section-eyebrow">Deployment options</p>
|
||||||
|
<h2 id="m-deploy-head" class="m-section-head">Choose your <em>Capability.</em></h2>
|
||||||
|
|
||||||
|
<div class="m-deploy-grid">
|
||||||
|
<article class="m-deploy-card">
|
||||||
|
<h3 class="m-deploy-name">Fenja <em>Core.</em></h3>
|
||||||
|
<p class="m-deploy-tier">Foundational</p>
|
||||||
|
<p class="m-deploy-body">Essential LLM capabilities with Fenja Semantic. Your safe and custom chatbot that understands your organization.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="m-deploy-card">
|
||||||
|
<h3 class="m-deploy-name">Fenja <em>Dev.</em></h3>
|
||||||
|
<p class="m-deploy-tier">Developer toolset</p>
|
||||||
|
<p class="m-deploy-body">Code faster and better with your own secure AI-supported development platform.</p>
|
||||||
|
<p class="m-deploy-includes">+ Core</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="m-deploy-card">
|
||||||
|
<h3 class="m-deploy-name">Fenja <em>Analyze.</em></h3>
|
||||||
|
<p class="m-deploy-tier">Strategic intel</p>
|
||||||
|
<p class="m-deploy-body">Bring real insights to your people. You ask for an insight, and your agents will find, analyze, and present the relevant data.</p>
|
||||||
|
<p class="m-deploy-includes">+ Core</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="m-deploy-card m-deploy-card--dark">
|
||||||
|
<h3 class="m-deploy-name">Fenja <em>Agentic.</em></h3>
|
||||||
|
<p class="m-deploy-tier">Automation</p>
|
||||||
|
<p class="m-deploy-body">The complete framework. Fully governed and controlled agents collaborate to solve your most important processes.</p>
|
||||||
|
<p class="m-deploy-includes">+ Core. Dev. Analyze.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ─── Implementation roadmap ───
|
||||||
|
Mirrors desktop #platform-roadmap. Setup is the one-time
|
||||||
|
foundation; Knowledge / Tools / Agents are waves of use cases.
|
||||||
|
Cards are native <details> so they expand with no JS. -->
|
||||||
|
<section class="m-section m-roadmap" aria-labelledby="m-roadmap-head">
|
||||||
|
<p class="m-section-eyebrow">Implementation roadmap</p>
|
||||||
|
<h2 id="m-roadmap-head" class="m-section-head">One foundation, <em>many use cases.</em></h2>
|
||||||
|
|
||||||
|
<details class="m-rm-card">
|
||||||
|
<summary class="m-rm-summary">
|
||||||
|
<span class="m-rm-name">Setup</span>
|
||||||
|
<span class="m-rm-italic">Platform live in your environment</span>
|
||||||
|
</summary>
|
||||||
|
<div class="m-rm-detail">
|
||||||
|
<p class="m-rm-intro">The one-time foundation. In a single sprint, the platform goes live inside your infrastructure — model deployed, identity wired in, brand voice applied, baseline policies enforced. After this, the platform is ready to receive any use case.</p>
|
||||||
|
<p class="m-rm-label">Key activities</p>
|
||||||
|
<ul class="m-rm-list">
|
||||||
|
<li>Foundation model installed in your environment</li>
|
||||||
|
<li>SSO and identity provider connected</li>
|
||||||
|
<li>Brand voice, tone, and visual style applied</li>
|
||||||
|
<li>Baseline governance and security policies in place</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="m-rm-card">
|
||||||
|
<summary class="m-rm-summary">
|
||||||
|
<span class="m-rm-name">Knowledge</span>
|
||||||
|
<span class="m-rm-italic">Captured into one structured source</span>
|
||||||
|
</summary>
|
||||||
|
<div class="m-rm-detail">
|
||||||
|
<p class="m-rm-intro">The first body of use cases captures what your organisation already knows. For each use case, the team scopes the target output, ingests the right files, and runs AI-led interviews to surface the knowledge that today lives only in people’s heads.</p>
|
||||||
|
<p class="m-rm-label">Key activities</p>
|
||||||
|
<ul class="m-rm-list">
|
||||||
|
<li>Use case scope and target output defined</li>
|
||||||
|
<li>Relevant files ingested and structured</li>
|
||||||
|
<li>AI-led interviews capture tacit expert knowledge</li>
|
||||||
|
<li>Outputs tested and validated against real work</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="m-rm-card">
|
||||||
|
<summary class="m-rm-summary">
|
||||||
|
<span class="m-rm-name">Tools</span>
|
||||||
|
<span class="m-rm-italic">Acting across your systems</span>
|
||||||
|
</summary>
|
||||||
|
<div class="m-rm-detail">
|
||||||
|
<p class="m-rm-intro">Use cases that reach beyond knowledge into your systems. Each tool implementation wires the platform into a specific source or destination — a data warehouse, a SharePoint repository, an API, a structured report. The platform stops being read-only and starts acting on your behalf.</p>
|
||||||
|
<p class="m-rm-label">Key activities</p>
|
||||||
|
<ul class="m-rm-list">
|
||||||
|
<li>Ongoing retrieval from data warehouses and SharePoint</li>
|
||||||
|
<li>Read and write integrations to specific APIs</li>
|
||||||
|
<li>Custom report outputs and structured deliverables</li>
|
||||||
|
<li>Each tool scoped, built, and tested for one specific job</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="m-rm-card">
|
||||||
|
<summary class="m-rm-summary">
|
||||||
|
<span class="m-rm-name">Agents</span>
|
||||||
|
<span class="m-rm-italic">Workflows running under your control</span>
|
||||||
|
</summary>
|
||||||
|
<div class="m-rm-detail">
|
||||||
|
<p class="m-rm-intro">Use cases that compose multiple steps into one governed workflow. For each agent use case, the team defines the task, builds the specialist agents that handle it, and configures monitoring, human checkpoints, and governance at every step. The platform now does work end to end — under your control.</p>
|
||||||
|
<p class="m-rm-label">Key activities</p>
|
||||||
|
<ul class="m-rm-list">
|
||||||
|
<li>Agent tasks defined and scoped per workflow</li>
|
||||||
|
<li>Specialist agents built for specific jobs</li>
|
||||||
|
<li>Monitoring and audit trails configured</li>
|
||||||
|
<li>Human-in-the-loop checkpoints placed where they matter</li>
|
||||||
|
<li>Governance and security checks enforced at each step</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div class="m-rm-band">
|
||||||
|
<p class="m-rm-band-name">Govern & scale</p>
|
||||||
|
<p class="m-rm-band-italic">Security · compliance · change management · training · advisory council feedback</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="m-rm-foot">Setup is bounded · waves of use cases continue as your needs evolve.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -302,83 +302,96 @@ html, body {
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
max-width: 44ch;
|
max-width: 44ch;
|
||||||
}
|
}
|
||||||
.m-support {
|
/* Backer credits — funder + affiliations, in the deck's editorial
|
||||||
display: inline-flex;
|
voice: a small uppercase Manrope label over each entity name set in
|
||||||
align-items: baseline;
|
upright Newsreader serif, with the parent body / issuing authority
|
||||||
gap: 8px;
|
in a quieter serif beneath. Mirrors the desktop hero's left-aligned
|
||||||
padding: 14px 18px 0;
|
.support-credit stack and the entrance page's .welcome-credits. */
|
||||||
|
.m-credits {
|
||||||
|
margin-top: 24px;
|
||||||
|
padding-top: 22px;
|
||||||
border-top: 1px solid var(--line);
|
border-top: 1px solid var(--line);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
}
|
}
|
||||||
.m-support-label {
|
.m-credit {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
.m-credit-label {
|
||||||
font-family: "Manrope", system-ui, sans-serif;
|
font-family: "Manrope", system-ui, sans-serif;
|
||||||
font-size: 10.5px;
|
font-size: 11px;
|
||||||
letter-spacing: 0.16em;
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.22em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: var(--ink-dim);
|
color: var(--ink-dim);
|
||||||
}
|
}
|
||||||
.m-support-name {
|
.m-credit-name {
|
||||||
font-family: "Manrope", system-ui, sans-serif;
|
font-family: "Newsreader", Georgia, serif;
|
||||||
font-weight: 600;
|
font-style: normal;
|
||||||
font-size: 12.5px;
|
font-weight: 500;
|
||||||
letter-spacing: 0.05em;
|
font-size: 19px;
|
||||||
color: #3c6b6b;
|
line-height: 1.2;
|
||||||
|
letter-spacing: 0.005em;
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
.m-credit-auth {
|
||||||
|
font-family: "Newsreader", Georgia, serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 13.5px;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: var(--ink-soft);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Capabilities ───────────────────────────────────────── */
|
/* ─── Platform question (framing) ────────────────────────── */
|
||||||
.m-caps {
|
.m-pq {
|
||||||
padding: 88px 22px 88px;
|
padding: 80px 22px 64px;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
}
|
}
|
||||||
.m-cap {
|
.m-pq-title {
|
||||||
|
font-family: "Newsreader", Georgia, serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: 1.18;
|
||||||
|
letter-spacing: -0.012em;
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
text-wrap: pretty;
|
||||||
|
}
|
||||||
|
.m-pq-body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--ink-soft);
|
||||||
|
}
|
||||||
|
.m-pq-body em { font-style: italic; font-weight: 700; color: var(--ink); }
|
||||||
|
|
||||||
|
/* ─── Architecture ───────────────────────────────────────── */
|
||||||
|
.m-arch {
|
||||||
|
padding: 72px 22px 80px;
|
||||||
|
}
|
||||||
|
/* Narrative beats — colored cards, paper text. Palette mirrors the
|
||||||
|
desktop layer story (sage, slate, clay, plum), with a dark ink
|
||||||
|
"full picture" summary card to close the sequence. */
|
||||||
|
.m-arch-beat {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 24px 22px 24px;
|
padding: 24px 22px;
|
||||||
margin: 0 0 18px 0;
|
margin: 0 0 14px 0;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
background: #7a8c70;
|
||||||
|
color: #fbf6e9;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 16px 28px -22px rgba(46, 46, 40, 0.45),
|
0 16px 28px -22px rgba(46, 46, 40, 0.45),
|
||||||
0 4px 10px -6px rgba(46, 46, 40, 0.18);
|
0 4px 10px -6px rgba(46, 46, 40, 0.18);
|
||||||
min-height: 120px;
|
|
||||||
/* Per-layer backgrounds match the desktop palette: sage, slate,
|
|
||||||
clay, plum. Text is flipped to paper for contrast. */
|
|
||||||
background: #7a8c70; /* default = layer 0, overridden below */
|
|
||||||
color: #fbf6e9;
|
|
||||||
/* Clip the oversized corner icon so it reads as "tucked into the
|
|
||||||
corner" rather than floating outside the tile. */
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
.m-cap:last-child { margin-bottom: 0; }
|
.m-arch-beat:nth-of-type(1) { background: #7a8c70; } /* sage — model */
|
||||||
.m-cap:nth-of-type(1) { background: #7a8c70; } /* sage — The AI */
|
.m-arch-beat:nth-of-type(2) { background: #7b9399; } /* slate — knowledge */
|
||||||
.m-cap:nth-of-type(2) { background: #7b9399; } /* slate — The Knowledge */
|
.m-arch-beat:nth-of-type(3) { background: #b07556; } /* clay — tools */
|
||||||
.m-cap:nth-of-type(3) { background: #b07556; } /* clay — The Tools */
|
.m-arch-beat:nth-of-type(4) { background: #8a7a92; } /* plum — agents */
|
||||||
.m-cap:nth-of-type(4) { background: #8a7a92; } /* plum — The Agents */
|
.m-arch-beat--summary { background: var(--ink); margin-bottom: 0; }
|
||||||
|
.m-arch-eyebrow {
|
||||||
.m-cap-icon {
|
|
||||||
position: absolute;
|
|
||||||
/* Negative offsets push the icon up and into the corner, past the
|
|
||||||
card edges. The parent's overflow: hidden clips the overflow so
|
|
||||||
the icon reads as a corner ornament that's been tucked into the
|
|
||||||
tile rather than sitting inside it. */
|
|
||||||
top: -18px;
|
|
||||||
right: -18px;
|
|
||||||
width: 148px;
|
|
||||||
height: 148px;
|
|
||||||
object-fit: contain;
|
|
||||||
object-position: right top;
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.m-cap-num {
|
|
||||||
display: inline-block;
|
|
||||||
font-family: "Newsreader", Georgia, serif;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 13.5px;
|
|
||||||
color: rgba(251, 246, 233, 0.85);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
/* Keep clear of the icon in the top-right. */
|
|
||||||
padding-right: 120px;
|
|
||||||
}
|
|
||||||
.m-cap-eyebrow {
|
|
||||||
font-family: "Manrope", system-ui, sans-serif;
|
font-family: "Manrope", system-ui, sans-serif;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -386,39 +399,103 @@ html, body {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: rgba(251, 246, 233, 0.8);
|
color: rgba(251, 246, 233, 0.8);
|
||||||
margin: 0 0 10px 0;
|
margin: 0 0 10px 0;
|
||||||
padding-right: 120px;
|
|
||||||
}
|
}
|
||||||
.m-cap-title {
|
.m-arch-headline {
|
||||||
font-family: "Newsreader", Georgia, serif;
|
font-family: "Newsreader", Georgia, serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 20px;
|
font-size: 21px;
|
||||||
line-height: 1.22;
|
line-height: 1.2;
|
||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
margin: 0 0 12px 0;
|
margin: 0 0 12px 0;
|
||||||
color: #fbf6e9;
|
color: #fbf6e9;
|
||||||
text-wrap: pretty;
|
text-wrap: pretty;
|
||||||
padding-right: 120px;
|
|
||||||
}
|
}
|
||||||
.m-cap-title b {
|
.m-arch-headline em { font-style: italic; font-weight: 700; color: #fff9ea; }
|
||||||
font-weight: 700;
|
.m-arch-body {
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
.m-cap-title em {
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #fff9ea;
|
|
||||||
}
|
|
||||||
.m-cap-body {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-right: 0;
|
|
||||||
font-size: 15.5px;
|
font-size: 15.5px;
|
||||||
line-height: 1.55;
|
line-height: 1.55;
|
||||||
color: rgba(251, 246, 233, 0.88);
|
color: rgba(251, 246, 233, 0.88);
|
||||||
}
|
}
|
||||||
.m-cap-body em {
|
.m-arch-body em { font-style: italic; font-weight: 700; color: #fff9ea; }
|
||||||
font-style: italic;
|
|
||||||
|
/* Component grid — light cards on paper, grouped under a labeled
|
||||||
|
"client-managed" frame. */
|
||||||
|
.m-arch-frame {
|
||||||
|
margin-top: 32px;
|
||||||
|
padding: 16px 14px 18px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 12px;
|
||||||
|
background: var(--paper-2);
|
||||||
|
}
|
||||||
|
.m-arch-frame-label {
|
||||||
|
font-family: "Manrope", system-ui, sans-serif;
|
||||||
|
font-size: 10.5px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #fff9ea;
|
letter-spacing: 0.16em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--ink-dim);
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 0 16px 0;
|
||||||
|
}
|
||||||
|
.m-arch-group { margin: 0 0 18px 0; }
|
||||||
|
.m-arch-group:last-child { margin-bottom: 0; }
|
||||||
|
.m-arch-group-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
.m-arch-group-label {
|
||||||
|
font-family: "Manrope", system-ui, sans-serif;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
.m-arch-group-caption {
|
||||||
|
font-family: "Newsreader", Georgia, serif;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 13.5px;
|
||||||
|
color: var(--ink-soft);
|
||||||
|
}
|
||||||
|
.m-arch-cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.m-arch-card {
|
||||||
|
padding: 12px 12px 13px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fffdf6;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.m-arch-card-name {
|
||||||
|
font-family: "Manrope", system-ui, sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.25;
|
||||||
|
color: var(--ink);
|
||||||
|
margin: 0 0 4px 0;
|
||||||
|
}
|
||||||
|
.m-arch-card-italic {
|
||||||
|
font-family: "Newsreader", Georgia, serif;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: var(--ink-soft);
|
||||||
|
margin: 0 0 6px 0;
|
||||||
|
}
|
||||||
|
.m-arch-card-mono {
|
||||||
|
font-family: "Manrope", system-ui, sans-serif;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--ink-dim);
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Project Bifrost reveal ─────────────────────────────── */
|
/* ─── Project Bifrost reveal ─────────────────────────────── */
|
||||||
|
|
@ -541,157 +618,295 @@ html, body {
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Join CTA — the most emphatic section on the page ───── */
|
/* ─── Advisory board — 2-up portrait grid ────────────────── */
|
||||||
.m-join {
|
.m-board {
|
||||||
padding: 100px 22px 120px;
|
padding: 80px 22px 72px;
|
||||||
background: var(--paper-3);
|
|
||||||
border-top: 1px solid var(--line);
|
border-top: 1px solid var(--line);
|
||||||
border-bottom: 1px solid var(--line);
|
|
||||||
}
|
}
|
||||||
.m-join-panel {
|
.m-board-sub {
|
||||||
text-align: center;
|
margin: 6px 0 36px 0;
|
||||||
padding: 40px 24px 36px;
|
font-family: "Newsreader", Georgia, serif;
|
||||||
background: #fffdf6;
|
font-style: italic;
|
||||||
border: 1.5px solid var(--ink);
|
font-size: 17px;
|
||||||
|
color: var(--ink-soft);
|
||||||
|
}
|
||||||
|
.m-board-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 32px 18px;
|
||||||
|
}
|
||||||
|
.m-board-member { margin: 0; }
|
||||||
|
.m-board-portrait {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #efeadc;
|
||||||
|
}
|
||||||
|
.m-board-portrait img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.m-bm-name {
|
||||||
|
font-family: "Newsreader", Georgia, serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 1.18;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
color: var(--ink);
|
||||||
|
margin: 12px 0 4px 0;
|
||||||
|
}
|
||||||
|
.m-bm-title {
|
||||||
|
font-family: "Manrope", system-ui, sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 12.5px;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: var(--ink);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.m-bm-company {
|
||||||
|
font-family: "Manrope", system-ui, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12.5px;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: var(--ink-dim);
|
||||||
|
margin: 2px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Wiki deep-dive — scattered → compiler → structured ─── */
|
||||||
|
.m-wiki {
|
||||||
|
padding: 72px 22px 80px;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.m-wiki-zone {
|
||||||
|
padding: 22px 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow:
|
border: 1px solid var(--line);
|
||||||
0 30px 50px -24px rgba(46, 46, 40, 0.28),
|
background: #fffdf6;
|
||||||
0 8px 18px -10px rgba(46, 46, 40, 0.14);
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
.m-join-panel::before {
|
/* Top zone reads "unsettled": muted surface, dashed edge. */
|
||||||
|
.m-wiki-zone--scatter {
|
||||||
|
background: var(--paper-2);
|
||||||
|
border-style: dashed;
|
||||||
|
border-color: var(--ink-dim);
|
||||||
|
}
|
||||||
|
/* Compiler is the only element carrying the accent — mirrors the
|
||||||
|
desktop's single walnut highlight. */
|
||||||
|
.m-wiki-zone--compiler {
|
||||||
|
background: var(--accent);
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
.m-wiki-zone--compiler .m-wiki-eyebrow { color: rgba(255, 249, 234, 0.85); }
|
||||||
|
.m-wiki-zone--compiler .m-wiki-name { color: #fff9ea; }
|
||||||
|
.m-wiki-zone--compiler .m-wiki-sub { color: rgba(255, 249, 234, 0.92); }
|
||||||
|
.m-wiki-eyebrow {
|
||||||
|
font-family: "Manrope", system-ui, sans-serif;
|
||||||
|
font-size: 10.5px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--ink-dim);
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
.m-wiki-name {
|
||||||
|
font-family: "Newsreader", Georgia, serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 23px;
|
||||||
|
line-height: 1.15;
|
||||||
|
letter-spacing: -0.012em;
|
||||||
|
color: var(--ink);
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
.m-wiki-sub {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: var(--ink-soft);
|
||||||
|
}
|
||||||
|
/* Down-chevron connector between zones. */
|
||||||
|
.m-wiki-arrow {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
margin: 14px auto;
|
||||||
|
border-right: 2px solid var(--ink-dim);
|
||||||
|
border-bottom: 2px solid var(--ink-dim);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Deployment options ─────────────────────────────────── */
|
||||||
|
.m-deploy {
|
||||||
|
padding: 72px 22px 80px;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.m-deploy-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
.m-deploy-card {
|
||||||
|
padding: 22px 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
background: #fffdf6;
|
||||||
|
}
|
||||||
|
.m-deploy-card--dark {
|
||||||
|
background: var(--ink);
|
||||||
|
border-color: var(--ink);
|
||||||
|
}
|
||||||
|
.m-deploy-card--dark .m-deploy-name { color: #fbf6e9; }
|
||||||
|
.m-deploy-card--dark .m-deploy-name em { color: var(--accent); }
|
||||||
|
.m-deploy-card--dark .m-deploy-tier { color: rgba(251, 246, 233, 0.7); }
|
||||||
|
.m-deploy-card--dark .m-deploy-body { color: rgba(251, 246, 233, 0.9); }
|
||||||
|
.m-deploy-card--dark .m-deploy-includes { color: rgba(251, 246, 233, 0.6); }
|
||||||
|
.m-deploy-name {
|
||||||
|
font-family: "Newsreader", Georgia, serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 1.1;
|
||||||
|
letter-spacing: -0.012em;
|
||||||
|
color: var(--ink);
|
||||||
|
margin: 0 0 6px 0;
|
||||||
|
}
|
||||||
|
.m-deploy-name em { font-style: italic; font-weight: 700; color: var(--accent); }
|
||||||
|
.m-deploy-tier {
|
||||||
|
font-family: "Manrope", system-ui, sans-serif;
|
||||||
|
font-size: 10.5px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--ink-dim);
|
||||||
|
margin: 0 0 12px 0;
|
||||||
|
}
|
||||||
|
.m-deploy-body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 15.5px;
|
||||||
|
line-height: 1.55;
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
.m-deploy-includes {
|
||||||
|
margin: 12px 0 0 0;
|
||||||
|
font-family: "Manrope", system-ui, sans-serif;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--ink-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Implementation roadmap ─────────────────────────────── */
|
||||||
|
.m-roadmap {
|
||||||
|
padding: 72px 22px 88px;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.m-rm-card {
|
||||||
|
margin: 0 0 12px 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
background: #fffdf6;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.m-rm-summary {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 18px 44px 18px 20px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.m-rm-summary::-webkit-details-marker { display: none; }
|
||||||
|
/* +/− toggle chevron, top-right of the summary. */
|
||||||
|
.m-rm-summary::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -8px; left: 50%;
|
right: 20px;
|
||||||
transform: translateX(-50%);
|
top: 22px;
|
||||||
width: 48px; height: 1.5px;
|
width: 9px;
|
||||||
background: var(--accent);
|
height: 9px;
|
||||||
|
border-right: 2px solid var(--ink-dim);
|
||||||
|
border-bottom: 2px solid var(--ink-dim);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
}
|
}
|
||||||
.m-join-eyebrow {
|
.m-rm-card[open] .m-rm-summary::after {
|
||||||
|
transform: rotate(-135deg);
|
||||||
|
top: 26px;
|
||||||
|
}
|
||||||
|
.m-rm-name {
|
||||||
|
font-family: "Newsreader", Georgia, serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.1;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
.m-rm-italic {
|
||||||
|
font-family: "Newsreader", Georgia, serif;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--ink-soft);
|
||||||
|
}
|
||||||
|
.m-rm-detail {
|
||||||
|
padding: 0 20px 20px;
|
||||||
|
}
|
||||||
|
.m-rm-intro {
|
||||||
|
margin: 0 0 16px 0;
|
||||||
|
font-size: 15.5px;
|
||||||
|
line-height: 1.55;
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
.m-rm-label {
|
||||||
|
font-family: "Manrope", system-ui, sans-serif;
|
||||||
|
font-size: 10.5px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--ink-dim);
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
.m-rm-list {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 0 0 18px;
|
||||||
|
}
|
||||||
|
.m-rm-list li {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: var(--ink-soft);
|
||||||
|
margin: 0 0 6px 0;
|
||||||
|
}
|
||||||
|
.m-rm-list li:last-child { margin-bottom: 0; }
|
||||||
|
/* Cross-cutting band — neutral surface so it reads as "always on",
|
||||||
|
not as a fifth deliverable. */
|
||||||
|
.m-rm-band {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 18px 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: var(--paper-3);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.m-rm-band-name {
|
||||||
font-family: "Manrope", system-ui, sans-serif;
|
font-family: "Manrope", system-ui, sans-serif;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.22em;
|
letter-spacing: 0.1em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: var(--accent);
|
color: var(--ink);
|
||||||
margin: 0 0 16px 0;
|
margin: 0 0 6px 0;
|
||||||
}
|
}
|
||||||
.m-join-headline {
|
.m-rm-band-italic {
|
||||||
font-family: "Newsreader", Georgia, serif;
|
font-family: "Newsreader", Georgia, serif;
|
||||||
font-weight: 400;
|
font-style: italic;
|
||||||
font-size: 30px;
|
font-size: 14.5px;
|
||||||
line-height: 1.1;
|
line-height: 1.4;
|
||||||
letter-spacing: -0.014em;
|
color: var(--ink-soft);
|
||||||
margin: 0 0 28px 0;
|
margin: 0;
|
||||||
text-wrap: pretty;
|
|
||||||
}
|
}
|
||||||
.m-join-headline em { font-style: italic; font-weight: 700; color: var(--accent); }
|
.m-rm-foot {
|
||||||
.m-join-button {
|
margin: 22px 0 0 0;
|
||||||
all: unset;
|
text-align: center;
|
||||||
display: inline-block;
|
|
||||||
background: var(--ink);
|
|
||||||
color: var(--paper);
|
|
||||||
font-family: "Newsreader", Georgia, serif;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 500;
|
|
||||||
letter-spacing: 0.01em;
|
|
||||||
padding: 18px 34px;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow:
|
|
||||||
0 14px 26px -14px rgba(46, 46, 40, 0.55),
|
|
||||||
0 4px 10px -6px rgba(46, 46, 40, 0.3);
|
|
||||||
}
|
|
||||||
.m-join-button:active {
|
|
||||||
background: #000;
|
|
||||||
transform: translateY(1px);
|
|
||||||
}
|
|
||||||
.m-join-button:disabled { opacity: 0.55; cursor: progress; }
|
|
||||||
.m-join-subtext {
|
|
||||||
margin: 24px 0 0 0;
|
|
||||||
font-family: "Manrope", system-ui, sans-serif;
|
font-family: "Manrope", system-ui, sans-serif;
|
||||||
font-size: 11px;
|
font-size: 11.5px;
|
||||||
letter-spacing: 0.14em;
|
letter-spacing: 0.04em;
|
||||||
text-transform: uppercase;
|
|
||||||
color: var(--ink-dim);
|
color: var(--ink-dim);
|
||||||
}
|
}
|
||||||
.m-confirm-list {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.m-confirm-list li {
|
|
||||||
position: relative;
|
|
||||||
padding: 14px 0 14px 30px;
|
|
||||||
border-top: 1px solid var(--line);
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: var(--ink);
|
|
||||||
}
|
|
||||||
.m-confirm-list li:first-child { border-top: none; }
|
|
||||||
.m-confirm-list li::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 22px;
|
|
||||||
width: 14px;
|
|
||||||
height: 8px;
|
|
||||||
border-left: 2px solid var(--accent);
|
|
||||||
border-bottom: 2px solid var(--accent);
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
}
|
|
||||||
.m-confirm-list em { font-style: italic; font-weight: 700; color: var(--accent); }
|
|
||||||
|
|
||||||
/* ─── Footer (stacked brand marks) ───────────────────────── */
|
|
||||||
.m-foot {
|
|
||||||
padding: 44px 22px 56px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 26px;
|
|
||||||
border-top: 1px solid var(--line);
|
|
||||||
background: var(--paper);
|
|
||||||
}
|
|
||||||
.m-foot-mark {
|
|
||||||
line-height: 0;
|
|
||||||
color: var(--ink);
|
|
||||||
}
|
|
||||||
.m-foot-mark--project {
|
|
||||||
font-family: "Newsreader", Georgia, serif;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 1;
|
|
||||||
letter-spacing: -0.005em;
|
|
||||||
color: var(--ink);
|
|
||||||
}
|
|
||||||
.m-foot-mark--project em {
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
.m-foot-mark--fenja {
|
|
||||||
height: 22px;
|
|
||||||
width: auto;
|
|
||||||
display: block;
|
|
||||||
opacity: 0.92;
|
|
||||||
}
|
|
||||||
.m-foot-mark--innov {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
color: #3c6b6b;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.m-innov-mark {
|
|
||||||
width: 9px;
|
|
||||||
height: 16px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.m-innov-word {
|
|
||||||
font-family: "Manrope", system-ui, sans-serif;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 14.5px;
|
|
||||||
letter-spacing: 0.04em;
|
|
||||||
color: #3c6b6b;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,16 @@
|
||||||
// ─────────────────────────────────────────────────────────────
|
// ─────────────────────────────────────────────────────────────
|
||||||
// protected/mobile/mobile.js — minimal client for the mobile view.
|
// protected/mobile/mobile.js — minimal client for the mobile view.
|
||||||
//
|
//
|
||||||
// Two behaviours, nothing else:
|
// One behaviour, nothing else:
|
||||||
// 1. Confirm the session is still valid on page load. If the
|
// 1. Confirm the session is still valid on page load. If the
|
||||||
// session expired since the server rendered the HTML, bounce
|
// session expired since the server rendered the HTML, bounce
|
||||||
// to "/" so the user doesn't read gated content without a
|
// to "/" so the user doesn't read gated content without a
|
||||||
// session cookie (defensive — requireAuth already gates the
|
// session cookie (defensive — requireAuth already gates the
|
||||||
// page request itself).
|
// page request itself).
|
||||||
// 2. POST /api/bifrost-join on CTA click; swap CTA panel →
|
//
|
||||||
// confirmation panel on success.
|
// The customer-facing deck ends on the implementation roadmap; there
|
||||||
|
// is no "Join" CTA on this view (matching the desktop view), so no
|
||||||
|
// POST to /api/bifrost-join.
|
||||||
//
|
//
|
||||||
// There is no logout button on the mobile view; the masthead is
|
// There is no logout button on the mobile view; the masthead is
|
||||||
// logo-only by design. Users who want to log out can do so from a
|
// logo-only by design. Users who want to log out can do so from a
|
||||||
|
|
@ -32,39 +34,3 @@
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
const joinBtn = document.getElementById('m-join-btn');
|
|
||||||
const joinCta = document.getElementById('m-join-cta');
|
|
||||||
const joinConfirm = document.getElementById('m-join-confirm');
|
|
||||||
|
|
||||||
if (joinBtn && joinCta && joinConfirm) {
|
|
||||||
joinBtn.addEventListener('click', async () => {
|
|
||||||
joinBtn.disabled = true;
|
|
||||||
try {
|
|
||||||
const res = await fetch('/api/bifrost-join', {
|
|
||||||
method: 'POST',
|
|
||||||
credentials: 'same-origin',
|
|
||||||
headers: { 'content-type': 'application/json' },
|
|
||||||
// Server reads email + sessionId from the session cookie, body
|
|
||||||
// just needs to be parseable JSON for express.json() to keep
|
|
||||||
// its rhythm.
|
|
||||||
body: '{}',
|
|
||||||
});
|
|
||||||
if (res.status === 401) {
|
|
||||||
window.location.href = '/';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!res.ok) {
|
|
||||||
joinBtn.disabled = false;
|
|
||||||
joinBtn.textContent = 'Try again';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
joinCta.hidden = true;
|
|
||||||
joinConfirm.hidden = false;
|
|
||||||
joinConfirm.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
||||||
} catch {
|
|
||||||
joinBtn.disabled = false;
|
|
||||||
joinBtn.textContent = 'Try again';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -131,78 +131,90 @@
|
||||||
}
|
}
|
||||||
.field-input:disabled { opacity: 0.55; cursor: default; }
|
.field-input:disabled { opacity: 0.55; cursor: default; }
|
||||||
|
|
||||||
/* ───── Welcome-step wordmark (centered in the right half) ───── */
|
/* ───── Welcome-step brand lockup (centered in the right half) ─────
|
||||||
.welcome-logo {
|
One fixed, centred container holding the Fenja wordmark and its
|
||||||
|
credits (funder + affiliations). Stacking them in a single
|
||||||
|
centred flex column — rather than three separately-pinned fixed
|
||||||
|
elements with hand-tuned top offsets — keeps the credits balanced
|
||||||
|
beneath the logo no matter how many lines they run to, and lets
|
||||||
|
the longest affiliation line wrap cleanly within a fixed width.
|
||||||
|
The whole group fades in together when the welcome step is
|
||||||
|
active. Hidden entirely on narrow screens (see the media query). */
|
||||||
|
.welcome-lockup {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 75%;
|
left: 75%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
width: 280px;
|
width: clamp(280px, 32vw, 360px);
|
||||||
height: auto;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
transition: opacity 640ms var(--ease) 120ms;
|
transition: opacity 640ms var(--ease) 120ms;
|
||||||
}
|
}
|
||||||
body:has(#step-welcome.is-active) .welcome-logo {
|
body:has(#step-welcome.is-active) .welcome-lockup {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.welcome-logo {
|
||||||
|
width: 250px;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
opacity: 0.92;
|
opacity: 0.92;
|
||||||
}
|
}
|
||||||
|
/* Hairline divider between the wordmark and the credits. */
|
||||||
/* "Backed by Innovationsfonden" — sits directly beneath the fixed
|
.welcome-rule {
|
||||||
welcome-logo at the same horizontal centre (left:75%). Fades in
|
width: 56px;
|
||||||
with the welcome step (same trigger as the logo above it). */
|
height: 1px;
|
||||||
.welcome-backer {
|
margin: 26px 0 24px;
|
||||||
position: fixed;
|
background: var(--ink-soft);
|
||||||
/* Sits below the fixed welcome-logo. The logo renders ~70px tall
|
opacity: 0.28;
|
||||||
at width:280px, so its bottom edge is ~50% + 35px; this sits
|
}
|
||||||
clear of that with enough breathing room not to crowd the
|
/* Credits — funder + affiliations, rendered in the deck's editorial
|
||||||
wordmark. Horizontal nudge via the transform pushes the block
|
voice: a small uppercase Manrope label over each entity name set
|
||||||
slightly right of the logo's centreline so it reads as a
|
in Newsreader serif italic. This ties the credits to the Fenja
|
||||||
support line rather than a baseline caption. */
|
wordmark above (and to the serif headlines elsewhere) instead of
|
||||||
top: calc(50% + 80px);
|
reading as a sans-serif caption stuck beneath the logo. */
|
||||||
left: 75%;
|
.welcome-credits {
|
||||||
transform: translate(calc(-38% - 5px), 0);
|
display: flex;
|
||||||
display: inline-flex;
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.welcome-credit {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 5px;
|
||||||
|
}
|
||||||
|
.welcome-credit-label {
|
||||||
font-family: "Manrope", system-ui, -apple-system, sans-serif;
|
font-family: "Manrope", system-ui, -apple-system, sans-serif;
|
||||||
font-size: 11px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.18em;
|
letter-spacing: 0.24em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
color: var(--ink-dim);
|
||||||
|
}
|
||||||
|
.welcome-credit-name {
|
||||||
|
font-family: "Newsreader", Georgia, "Times New Roman", serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 21px;
|
||||||
|
line-height: 1.25;
|
||||||
|
letter-spacing: 0.005em;
|
||||||
|
color: var(--ink);
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
/* Parent body / issuing authority beneath an affiliation name —
|
||||||
|
quieter serif so the name above keeps the spotlight. */
|
||||||
|
.welcome-credit-auth {
|
||||||
|
font-family: "Newsreader", Georgia, "Times New Roman", serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.3;
|
||||||
color: var(--ink-soft);
|
color: var(--ink-soft);
|
||||||
opacity: 0;
|
text-wrap: balance;
|
||||||
pointer-events: none;
|
|
||||||
z-index: 5;
|
|
||||||
transition: opacity 640ms var(--ease) 160ms;
|
|
||||||
}
|
|
||||||
.welcome-backer svg { height: 24px; width: auto; display: block; }
|
|
||||||
body:has(#step-welcome.is-active) .welcome-backer {
|
|
||||||
opacity: 0.85;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* "Part of BioInnovation Institute AI Lab" — sits directly below
|
|
||||||
the welcome-backer line. Same horizontal anchor (left:75%) and
|
|
||||||
transform offset, just nudged down so the two lines stack with
|
|
||||||
consistent breathing room. Fades in with the welcome step. */
|
|
||||||
.welcome-bii {
|
|
||||||
position: fixed;
|
|
||||||
top: calc(50% + 112px);
|
|
||||||
left: 75%;
|
|
||||||
transform: translate(calc(-38% - 5px), 0);
|
|
||||||
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) 200ms;
|
|
||||||
}
|
|
||||||
body:has(#step-welcome.is-active) .welcome-bii {
|
|
||||||
opacity: 0.85;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ───── Welcome ───── */
|
/* ───── Welcome ───── */
|
||||||
|
|
@ -344,9 +356,7 @@
|
||||||
.currents { opacity: 0.5; }
|
.currents { opacity: 0.5; }
|
||||||
.welcome-title { font-size: 38px; }
|
.welcome-title { font-size: 38px; }
|
||||||
.welcome-body { font-size: 18px; }
|
.welcome-body { font-size: 18px; }
|
||||||
.welcome-logo { display: none; }
|
.welcome-lockup { display: none; }
|
||||||
.welcome-backer { display: none; }
|
|
||||||
.welcome-bii { display: none; }
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -354,21 +364,30 @@
|
||||||
|
|
||||||
<div class="currents" id="currents" aria-hidden="true"></div>
|
<div class="currents" id="currents" aria-hidden="true"></div>
|
||||||
|
|
||||||
<img class="welcome-logo" src="/fenja/fenja-wordmark-black.svg" alt="Fenja" aria-hidden="true" />
|
<!-- Welcome-step brand lockup: the Fenja wordmark with its funder +
|
||||||
<div class="welcome-backer" aria-label="Backed by Innovationsfonden" aria-hidden="true">
|
affiliation credits, centred in the right half of the screen.
|
||||||
<span>Backed by</span>
|
Whole group is decorative (the real content is the entrance form),
|
||||||
<!-- Simplified Innovationsfonden wordmark — same redrawn lockup
|
so it's aria-hidden. -->
|
||||||
as the hero's .support block. Not their official logo, a
|
<div class="welcome-lockup" aria-hidden="true">
|
||||||
respectful representation. -->
|
<img class="welcome-logo" src="/fenja/fenja-wordmark-black.svg" alt="" />
|
||||||
<svg viewBox="0 0 190 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
<span class="welcome-rule"></span>
|
||||||
<g fill="#3c6b6b">
|
<div class="welcome-credits">
|
||||||
<path d="M4 2 L12 18 L10 2 Z" />
|
<div class="welcome-credit">
|
||||||
<text x="18" y="15" font-family="Manrope, sans-serif" font-weight="600" font-size="13" letter-spacing="0.2" fill="#3c6b6b">nnovationsfonden</text>
|
<span class="welcome-credit-label">Backed by</span>
|
||||||
</g>
|
<span class="welcome-credit-name">Innofounder</span>
|
||||||
</svg>
|
<span class="welcome-credit-auth">Innovationsfonden</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="welcome-bii" aria-hidden="true">
|
<div class="welcome-credit">
|
||||||
Part of BioInnovation Institute AI Lab
|
<span class="welcome-credit-label">Part of</span>
|
||||||
|
<span class="welcome-credit-name">AI Lab</span>
|
||||||
|
<span class="welcome-credit-auth">BioInnovation Institute</span>
|
||||||
|
</div>
|
||||||
|
<div class="welcome-credit">
|
||||||
|
<span class="welcome-credit-label">Part of</span>
|
||||||
|
<span class="welcome-credit-name">The AI Regulatory Sandbox</span>
|
||||||
|
<span class="welcome-credit-auth">Datatilsynet & Digitaliseringsstyrelsen</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main class="entrance">
|
<main class="entrance">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue