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

credits: rename to 'The Regulatory AI-Sandbox'

Browse source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-06-03 15:46:56 +02:00
parent 9703d47407
commit ff368a8314
3 changed files with 220 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

219
protected/index.html
View file

@ -1959,6 +1959,132 @@ html {
will-change: opacity, transform; will-change: opacity, transform;
} }
/* ============================================================
ADVISORY BOARD — dedicated reveal, placed right after the
final treasure-map stop (Pilot Projects) and before the
platform-architecture explainer. Editorial 4×2 portrait grid
adapted from the LinkedIn "board reveal" Layout A. Portraits
are served from /fenja/board/. Revealed on scroll by
bifrost.js; reduced-motion fallback is the @media block below.
============================================================ */
#board-reveal {
position: relative;
padding: clamp(5rem, 12vh, 10rem) var(--edge);
}
.board-wrap { max-width: 1180px; margin: 0 auto; }
.board-head {
text-align: center;
max-width: 62ch;
margin: 0 auto clamp(3.5rem, 8vh, 6rem);
}
.board-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: var(--step-sm);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
margin-bottom: clamp(1.2rem, 3vh, 1.8rem);
}
.board-eyebrow::before,
.board-eyebrow::after {
content: "";
width: 28px; height: 1px;
background: currentColor;
}
.board-title {
font-family: var(--type-display);
font-weight: 330;
font-size: var(--step-xl);
line-height: 1.04;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 clamp(0.8rem, 2vh, 1.2rem);
}
.board-title em { font-style: italic; font-weight: 400; }
.board-sub {
font-family: var(--type-display);
font-style: italic;
font-weight: 300;
font-size: var(--step-lg);
color: var(--ink-soft);
margin: 0;
letter-spacing: -0.005em;
}
.board-grid {
display: grid;
/* Fixed ~150px tiles, centred — roughly half the full-width size,
matching the reference's compact proportions. */
grid-template-columns: repeat(4, minmax(0, 150px));
justify-content: center;
gap: clamp(1.8rem, 3.2vw, 2.8rem) clamp(1.6rem, 2.6vw, 2.6rem);
}
.board-member {
margin: 0;
display: flex;
flex-direction: column;
}
.board-portrait {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 4px;
overflow: hidden;
background: var(--surface-container-high, #e7e1d0);
}
.board-portrait img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.board-member figcaption { margin: 0; }
.bm-name {
font-family: var(--type-display);
font-weight: 700;
color: var(--ink);
font-size: clamp(1.05rem, 1.4vw, 1.3rem);
line-height: 1.15;
letter-spacing: -0.01em;
margin: clamp(0.9rem, 1.6vw, 1.1rem) 0 0.35rem;
}
.bm-title {
font-family: var(--type-body);
font-weight: 600;
color: var(--ink);
font-size: clamp(0.85rem, 1vw, 0.95rem);
line-height: 1.3;
margin: 0;
}
.bm-company {
font-family: var(--type-body);
font-weight: 400;
color: var(--ink-mute);
font-size: clamp(0.85rem, 1vw, 0.95rem);
line-height: 1.3;
margin: 0.15rem 0 0;
}
/* Initial hidden state — only when JS active (reduced-motion override below) */
.js #board-reveal .board-head > *,
.js #board-reveal .board-member {
opacity: 0;
transform: translateY(28px);
will-change: opacity, transform;
}
@media (max-width: 640px) {
.board-grid {
grid-template-columns: repeat(2, minmax(0, 150px));
}
}
@media (prefers-reduced-motion: reduce) {
#board-reveal .board-head > *,
#board-reveal .board-member {
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================================ /* ============================================================
SCENE 6 — PROJECT BIFROST · JOIN SCENE 6 — PROJECT BIFROST · JOIN
A large call-to-action that, on click, crossfades to a A large call-to-action that, on click, crossfades to a
@ -2562,7 +2688,7 @@ html {
</div> </div>
<div class="support-credit"> <div class="support-credit">
<span class="support-credit-label">Part of</span> <span class="support-credit-label">Part of</span>
<span class="support-credit-name">The AI Regulatory Sandbox</span> <span class="support-credit-name">The Regulatory AI-Sandbox</span>
<span class="support-credit-auth">Datatilsynet &amp; Digitaliseringsstyrelsen</span> <span class="support-credit-auth">Datatilsynet &amp; Digitaliseringsstyrelsen</span>
</div> </div>
</div> </div>
@ -2749,6 +2875,97 @@ html {
</div> </div>
</section> </section>
<!-- ============================================================
ADVISORY BOARD — "Meet the Fenja AI Advisory Board"
A dedicated reveal placed right after the final Project
Bifrost stop (Pilot Projects). Editorial 4×2 portrait grid;
portraits live under /fenja/board/. Header bits + members
are staggered in on scroll by bifrost.js.
============================================================ -->
<section id="board-reveal" aria-labelledby="board-reveal-head">
<div class="board-wrap">
<div class="board-head">
<span class="board-eyebrow">Guidance &amp; counsel</span>
<h2 id="board-reveal-head" class="board-title">Meet the Fenja AI <em>Advisory Board</em></h2>
<p class="board-sub">Bridging industry &amp; sovereign AI</p>
</div>
<div class="board-grid">
<figure class="board-member">
<div class="board-portrait"><img src="/fenja/board/soren-friis.jpg" alt="Søren Friis" loading="lazy" /></div>
<figcaption>
<p class="bm-name">Søren Friis</p>
<p class="bm-title">IT Director</p>
<p class="bm-company">DSB</p>
</figcaption>
</figure>
<figure class="board-member">
<div class="board-portrait"><img src="/fenja/board/william-irving.jpg" alt="William Irving" loading="lazy" /></div>
<figcaption>
<p class="bm-name">William Irving</p>
<p class="bm-title">Chief Data &amp; Analytics Officer</p>
<p class="bm-company">Norlys</p>
</figcaption>
</figure>
<figure class="board-member">
<div class="board-portrait"><img src="/fenja/board/ulla-nygaard-eliassen.jpg" alt="Ulla Nygaard Eliassen" loading="lazy" /></div>
<figcaption>
<p class="bm-name">Ulla Nygaard Eliassen</p>
<p class="bm-title">Associate Improvement Project Director</p>
<p class="bm-company">Novo Nordisk</p>
</figcaption>
</figure>
<figure class="board-member">
<div class="board-portrait"><img src="/fenja/board/anna-jessen.jpg" alt="Anna Jessen" loading="lazy" /></div>
<figcaption>
<p class="bm-name">Anna Jessen</p>
<p class="bm-title">Director, Process Excellence &amp; Digitalization</p>
<p class="bm-company">Novo Nordisk</p>
</figcaption>
</figure>
<figure class="board-member">
<div class="board-portrait"><img src="/fenja/board/mathies-laursen.jpg" alt="Mathies Laursen" loading="lazy" /></div>
<figcaption>
<p class="bm-name">Mathies Laursen</p>
<p class="bm-title">CDO</p>
<p class="bm-company">Nationalbanken</p>
</figcaption>
</figure>
<figure class="board-member">
<div class="board-portrait"><img src="/fenja/board/torben-schutt.jpg" alt="Torben Schütt" loading="lazy" /></div>
<figcaption>
<p class="bm-name">Torben Schütt</p>
<p class="bm-title">Office Director, Center for Cyber and Digitalization</p>
<p class="bm-company">Forsvarsministeriet</p>
</figcaption>
</figure>
<figure class="board-member">
<div class="board-portrait"><img src="/fenja/board/mads-nyborg.jpg" alt="Mads Nyborg" loading="lazy" /></div>
<figcaption>
<p class="bm-name">Mads Nyborg</p>
<p class="bm-title">Chief Consultant, Department of Data and Analytics</p>
<p class="bm-company">Københavns Kommune</p>
</figcaption>
</figure>
<figure class="board-member">
<div class="board-portrait"><img src="/fenja/board/hakon-daltveit.jpg" alt="Håkon Daltveit" loading="lazy" /></div>
<figcaption>
<p class="bm-name">Håkon Daltveit</p>
<p class="bm-title">Chief Consultant, Department of Data and Analytics</p>
<p class="bm-company">Københavns Kommune</p>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- ============================================================ <!-- ============================================================
ARCHITECTURE — Fenja AI Platform, simply explained ARCHITECTURE — Fenja AI Platform, simply explained
Inlined from the former standalone /deepdive page so the Inlined from the former standalone /deepdive page so the

2
protected/mobile/index.html
View file

@ -173,7 +173,7 @@
</div> </div>
<div class="m-credit"> <div class="m-credit">
<span class="m-credit-label">Part of</span> <span class="m-credit-label">Part of</span>
<span class="m-credit-name">The AI Regulatory Sandbox</span> <span class="m-credit-name">The Regulatory AI-Sandbox</span>
<span class="m-credit-auth">Datatilsynet &amp; Digitaliseringsstyrelsen</span> <span class="m-credit-auth">Datatilsynet &amp; Digitaliseringsstyrelsen</span>
</div> </div>
</div> </div>

2
public/entrance.html
View file

@ -384,7 +384,7 @@
</div> </div>
<div class="welcome-credit"> <div class="welcome-credit">
<span class="welcome-credit-label">Part of</span> <span class="welcome-credit-label">Part of</span>
<span class="welcome-credit-name">The AI Regulatory Sandbox</span> <span class="welcome-credit-name">The Regulatory AI-Sandbox</span>
<span class="welcome-credit-auth">Datatilsynet &amp; Digitaliseringsstyrelsen</span> <span class="welcome-credit-auth">Datatilsynet &amp; Digitaliseringsstyrelsen</span>
</div> </div>
</div> </div>