joh/AdvisoryBoardMeeting_june2026
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

deck: board-meeting revisions across the slide set

Browse source 
- Slide 1 + 19: restore the old Project Bifrost intro — a spanning
  aurora arc that draws in and breathes; welcome adds the meeting line,
  closing reuses the same treatment.
- Questions: strip to the quoted question only (no eyebrow/rule/rainbow),
  ~30% larger.
- Board: names ~2x, portraits ~half size.
- Mission: big centred Fenja, ink values beneath, Project Bifrost lockup;
  supporter caption enlarged and the equal-height logos pinned above the
  menu with more air.
- Pause: drop the colour wash.
- Architecture: remove accent highlight, label to top-right, +30% text,
  more side air, taller cards.
- New Demo and Roadmap solo-word slides (now 19 total; counter dynamic).
- Section dividers: Fenja logo instead of Bifrost; sov title de-emphasised.
- Meme: larger, captionless, with a quoted "Sovereign Cloud" title.
- Sandbox: big title, one cohesive paragraph, no rule, larger logos.
- Tighten dot-nav so all 19 dots stay on one row.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-06-18 13:48:48 +02:00
parent fbdbe1fd15
commit eca79752f4
3 changed files with 296 additions and 340 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

423
assets/css/deck.css
View file

@ -1,6 +1,6 @@
/* ============================================================= /* =============================================================
Bifrost Advisory Board — deck stylesheet Bifrost Advisory Board — deck stylesheet
Full-screen scroll-snap presentation. 17 slides. Full-screen scroll-snap presentation. 19 slides.
Nordic-editorial system; Bifrost aurora used as a quiet accent. Nordic-editorial system; Bifrost aurora used as a quiet accent.
============================================================= */ ============================================================= */
@ -107,7 +107,7 @@ img { display: block; max-width: 100%; }
.slide-counter b { font-style: normal; font-weight: 600; color: var(--ink-soft); } .slide-counter b { font-style: normal; font-weight: 600; color: var(--ink-soft); }
/* ───────────────────── Dot-nav (bottom) ───────────────────── /* ───────────────────── Dot-nav (bottom) ─────────────────────
17 dots, centred. Active = filled ink. Hover/focus floats a One dot per slide, centred. Active = filled ink. Hover/focus floats a
Danish label tooltip above the dot. Every slide is reachable. */ Danish label tooltip above the dot. Every slide is reachable. */
.dot-nav-tray { .dot-nav-tray {
position: fixed; position: fixed;
@ -126,16 +126,16 @@ img { display: block; max-width: 100%; }
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
display: flex; display: flex;
gap: clamp(10px, 1.4vw, 20px); gap: clamp(6px, 0.85vw, 13px);
z-index: 50; z-index: 50;
max-width: 94vw; max-width: 96vw;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
.dot-btn { .dot-btn {
all: unset; all: unset;
position: relative; position: relative;
padding: 9px; padding: 7px;
cursor: pointer; cursor: pointer;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
} }
@ -237,41 +237,20 @@ img { display: block; max-width: 100%; }
} }
/* ════════════════════ THE BIG-QUESTION COMPONENT ════════════════════ /* ════════════════════ THE BIG-QUESTION COMPONENT ════════════════════
Reusable "pause and think" treatment (slides 5, 8, 9, 13, 16). Stripped to just the quoted question — no eyebrow, no rule, no aurora.
Large confident serif, centred, lots of air. A short aurora rule and Large confident serif, centred, lots of air. A deliberate pause. */
an aurora-tinted opening mark are the only colour. Deliberately calm. */
.question { .question {
text-align: center; text-align: center;
max-width: min(92vw, 920px); /* generous frame; the text controls the measure */ max-width: min(94vw, 1100px);
margin-inline: auto; margin-inline: auto;
display: grid; display: grid;
justify-items: center; justify-items: center;
gap: clamp(1.6rem, 4vh, 2.6rem); gap: clamp(1.6rem, 4vh, 2.6rem);
} }
.question-mark {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(2.4rem, 5vw, 4rem);
line-height: 1;
background: linear-gradient(120deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.9;
user-select: none;
}
.question-eyebrow {
font-family: var(--font-sans);
font-size: clamp(0.72rem, 0.95vw, 0.82rem);
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-dim);
font-weight: 600;
}
.question-text { .question-text {
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 360; font-weight: 360;
font-size: clamp(1.9rem, 3.8vw, 3.4rem); font-size: clamp(2.5rem, 4.9vw, 4.4rem); /* ~30% larger than before */
line-height: 1.16; line-height: 1.16;
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: var(--ink); color: var(--ink);
@ -279,30 +258,19 @@ img { display: block; max-width: 100%; }
max-width: 100%; max-width: 100%;
text-wrap: balance; text-wrap: balance;
} }
/* A restrained aurora wash on the emphasised keyword */ /* Emphasis stays as quiet serif italic — no rainbow. */
.question-text em { .question-text em {
font-style: italic; font-style: italic;
font-weight: 460; font-weight: 500;
background: linear-gradient(115deg, var(--aurora-2), var(--aurora-3), var(--aurora-4)); color: var(--ink);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.question-rule {
width: clamp(70px, 9vw, 120px);
height: 2px;
border: 0;
border-radius: 2px;
background: linear-gradient(to right,
var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4));
} }
.question-prompts { .question-prompts {
font-family: var(--font-serif); font-family: var(--font-serif);
font-style: italic; font-style: italic;
font-size: clamp(1rem, 1.5vw, 1.3rem); font-size: clamp(1.05rem, 1.6vw, 1.4rem);
color: var(--ink-soft); color: var(--ink-soft);
margin: 0; margin: 0;
max-width: 40ch; max-width: 44ch;
line-height: 1.7; line-height: 1.7;
} }
.question-prompts span { white-space: nowrap; } .question-prompts span { white-space: nowrap; }
@ -351,105 +319,85 @@ img { display: block; max-width: 100%; }
transform: translateY(-0.08em); transform: translateY(-0.08em);
} }
/* ════════════════════ Slide 1 — Ambient welcome ════════════════════ */ /* ════════════════════ Hero slides (1 welcome · 19 closing) ════════════════════
#slide-welcome { place-items: center; } The old Project Bifrost intro: a single luminous aurora arc spanning the
#slide-welcome .slide-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.6rem); } stage, drawing in on load and breathing slowly so it looks alive when
.welcome-kicker { left running. Centred text sits beneath the apex. */
.hero-slide { place-items: center; }
.bifrost-arc {
position: absolute;
inset: 0;
z-index: 0;
display: grid;
place-items: center;
pointer-events: none;
overflow: hidden;
}
.bifrost-arc svg {
width: min(122vw, 1560px);
height: auto;
overflow: visible;
transform: translateY(-7%);
}
.bifrost-arc path { fill: none; stroke-linecap: round; }
.bifrost-arc .arc-halo { stroke: url(#bifrostAurora); stroke-width: 26; filter: url(#auroraGlow); opacity: 0.5; }
.bifrost-arc .arc-main { stroke: url(#bifrostAurora); stroke-width: 3.5; }
.bifrost-arc .arc-thin { stroke: url(#bifrostAurora); stroke-width: 1.2; opacity: 0.6; }
/* Draw-in: pathLength is normalised to 1 so the dash math is resolution-free. */
.js .bifrost-arc path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.slide.in-view .bifrost-arc .arc-halo { animation: arc-draw 2.6s var(--ease-entrance) 0.1s forwards, halo-breathe 7s ease-in-out 3s infinite; }
.slide.in-view .bifrost-arc .arc-main { animation: arc-draw 2.6s var(--ease-entrance) 0.35s forwards; }
.slide.in-view .bifrost-arc .arc-thin { animation: arc-draw 2.6s var(--ease-entrance) 0.6s forwards; }
@keyframes arc-draw { to { stroke-dashoffset: 0; } }
@keyframes halo-breathe { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.62; } }
.hero-text {
position: relative;
z-index: 2;
text-align: center;
display: grid;
justify-items: center;
gap: clamp(0.9rem, 2.5vh, 1.6rem);
}
.hero-eyebrow {
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: clamp(0.74rem, 1vw, 0.9rem); font-size: clamp(0.74rem, 1vw, 0.92rem);
letter-spacing: 0.34em; letter-spacing: 0.34em;
text-transform: uppercase; text-transform: uppercase;
color: var(--ink-dim); color: var(--ink-dim);
font-weight: 600; font-weight: 600;
margin: 0;
} }
.welcome-headline { /* "Project Bifrost" wordmark — the old reveal's typography. */
.bifrost-name {
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 350; font-weight: 330;
font-size: clamp(2.2rem, 5.2vw, 4.6rem); font-size: clamp(3rem, 8vw, 6.5rem);
line-height: 1.07; line-height: 1.02;
letter-spacing: -0.025em; letter-spacing: -0.03em;
color: var(--ink); color: var(--ink);
margin: 0; margin: 0;
max-width: 18ch;
text-wrap: balance;
} }
.welcome-headline .seq { .bifrost-name .accent {
font-style: italic; font-style: italic;
font-weight: 500; font-weight: 400;
background: linear-gradient(115deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4)); background: linear-gradient(115deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4));
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.hero-sub {
/* Ambient aurora background — full-bleed, slow looping. Lives behind font-family: var(--font-serif);
slide 1's content. Three drifting aurora bands + the signature arc. */ font-style: italic;
.ambient { font-size: clamp(1.2rem, 2.1vw, 1.75rem);
position: absolute; color: var(--ink-soft);
inset: 0; margin: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
} }
.ambient .band {
position: absolute;
left: -25%;
width: 150%;
height: 46%;
filter: blur(60px);
opacity: 0.5;
border-radius: 50%;
mix-blend-mode: multiply;
will-change: transform, opacity;
}
.ambient .band.b1 {
top: 8%;
background: radial-gradient(ellipse 50% 60% at 30% 50%, var(--aurora-1) 0%, transparent 70%),
radial-gradient(ellipse 55% 60% at 70% 50%, var(--aurora-2) 0%, transparent 72%);
animation: drift1 26s ease-in-out infinite alternate;
}
.ambient .band.b2 {
top: 30%;
background: radial-gradient(ellipse 55% 60% at 40% 50%, var(--aurora-3) 0%, transparent 70%),
radial-gradient(ellipse 50% 55% at 75% 50%, var(--aurora-4) 0%, transparent 72%);
animation: drift2 32s ease-in-out infinite alternate;
opacity: 0.42;
}
.ambient .band.b3 {
top: 52%;
background: radial-gradient(ellipse 50% 55% at 55% 50%, var(--aurora-2) 0%, transparent 70%),
radial-gradient(ellipse 48% 52% at 25% 50%, var(--aurora-3) 0%, transparent 72%);
animation: drift3 38s ease-in-out infinite alternate;
opacity: 0.34;
}
@keyframes drift1 {
0% { transform: translate3d(-6%, -4%, 0) scale(1.05); }
100% { transform: translate3d(8%, 5%, 0) scale(1.18); }
}
@keyframes drift2 {
0% { transform: translate3d(7%, 3%, 0) scale(1.1); }
100% { transform: translate3d(-8%, -5%, 0) scale(1.22); }
}
@keyframes drift3 {
0% { transform: translate3d(-5%, 5%, 0) scale(1.08); }
100% { transform: translate3d(9%, -4%, 0) scale(1.2); }
}
/* Large ambient arc — the Bifrost bridge, breathing slowly */
.ambient-arc {
position: absolute;
left: 50%; top: 46%;
width: min(120vw, 1500px);
transform: translate(-50%, -50%);
opacity: 0.6;
animation: arc-breathe 14s ease-in-out infinite;
}
@keyframes arc-breathe {
0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.7; transform: translate(-50%, -51%) scale(1.02); }
}
#slide-welcome .slide-inner { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.ambient .band, .ambient-arc { animation: none; } .js .bifrost-arc path { stroke-dashoffset: 0; }
.slide.in-view .bifrost-arc path { animation: none; }
} }
/* ════════════════════ Slide 2 — Agenda ════════════════════ */ /* ════════════════════ Slide 2 — Agenda ════════════════════ */
@ -491,24 +439,28 @@ img { display: block; max-width: 100%; }
gap: clamp(1rem, 2vw, 2rem) clamp(1rem, 2.2vw, 2.4rem); gap: clamp(1rem, 2vw, 2rem) clamp(1rem, 2.2vw, 2.4rem);
} }
.board-member { margin: 0; text-align: center; } .board-member { margin: 0; text-align: center; }
/* Portraits at half size — sit centred in their cell, names lead. */
.board-portrait { .board-portrait {
width: 100%; width: 50%;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
margin: 0 auto 0.9rem;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
overflow: hidden; overflow: hidden;
background: var(--paper-3); background: var(--paper-3);
box-shadow: box-shadow:
0 0 0 0.5px rgba(56,56,49,0.06), 0 0 0 0.5px rgba(56,56,49,0.06),
0 14px 28px -18px rgba(56,56,49,0.22); 0 14px 28px -18px rgba(56,56,49,0.22);
margin-bottom: 0.85rem;
} }
.board-portrait img { width: 100%; height: 100%; object-fit: cover; } .board-portrait img { width: 100%; height: 100%; object-fit: cover; }
/* Names at roughly double size — the dominant element of each card. */
.bm-name { .bm-name {
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: clamp(1rem, 1.35vw, 1.22rem); font-size: clamp(1.55rem, 2.5vw, 2.3rem);
line-height: 1.12;
color: var(--ink); color: var(--ink);
margin: 0 0 0.15rem; margin: 0 0 0.3rem;
letter-spacing: -0.01em; letter-spacing: -0.015em;
text-wrap: balance;
} }
.bm-title { .bm-title {
font-family: var(--font-sans); font-family: var(--font-sans);
@ -530,25 +482,61 @@ img { display: block; max-width: 100%; }
.board-grid { grid-template-columns: repeat(2, 1fr); } .board-grid { grid-template-columns: repeat(2, 1fr); }
} }
/* ════════════════════ Slide 4 — Mission ════════════════════ */ /* ════════════════════ Slide 4 — Mission ════════════════════
#slide-mission .slide-inner { text-align: center; display: grid; justify-items: center; gap: clamp(2rem, 5vh, 3.5rem); } Big Fenja wordmark centred; values directly beneath in the same ink;
Project Bifrost lockup below. The supporter row is pinned to the very
bottom of the slide, just above the menu. */
.mission-slide {
grid-template-rows: 1fr auto;
align-items: center;
justify-items: center;
padding-bottom: clamp(4.5rem, 9vh, 6.5rem);
}
.mission-main {
align-self: center;
text-align: center;
display: grid;
justify-items: center;
gap: clamp(1.4rem, 3.5vh, 2.4rem);
}
.mission-fenja { width: clamp(240px, 32vw, 460px); height: auto; }
.mission-values { .mission-values {
font-family: var(--font-serif); font-family: var(--font-sans);
font-weight: 360; font-weight: 600;
font-size: clamp(1.6rem, 3.4vw, 2.8rem); font-size: clamp(1rem, 1.8vw, 1.5rem);
letter-spacing: -0.01em; letter-spacing: 0.01em;
color: var(--ink); color: var(--ink);
margin: 0; margin: 0;
} }
.mission-values b { .bifrost-logo.projbifrost { margin-top: clamp(0.3rem, 1.5vh, 1rem); }
font-weight: 400; .bifrost-logo.projbifrost .word em { font-style: italic; }
background: linear-gradient(115deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4));
-webkit-background-clip: text; /* Foot — pinned to the bottom row of the slide. */
background-clip: text; .mission-foot {
-webkit-text-fill-color: transparent; align-self: end;
text-align: center;
display: grid;
justify-items: center;
gap: clamp(1.2rem, 3vh, 2rem);
}
.mission-foot .partner-caption {
font-size: clamp(0.85rem, 1.5vw, 1.2rem);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-dim);
font-weight: 600;
margin: 0;
}
/* Mission supporter logos — all the same height, bumped ~50%, with more air. */
.mission-logos { gap: clamp(2.4rem, 6vw, 5.5rem); }
.mission-logos .partner-logo img,
.mission-logos .partner-logo.tall img {
height: clamp(36px, 4.4vw, 56px);
max-width: clamp(150px, 22vw, 280px);
opacity: 0.82;
} }
/* Quiet partner-logo row (mission foot + sandbox) */ /* Quiet partner-logo row (sandbox) */
.partner-row { .partner-row {
display: flex; display: flex;
align-items: center; align-items: center;
@ -576,19 +564,11 @@ img { display: block; max-width: 100%; }
optical weight matches the wide wordmark lockups beside them. */ optical weight matches the wide wordmark lockups beside them. */
.partner-logo.tall img { height: clamp(34px, 4vw, 52px); } .partner-logo.tall img { height: clamp(34px, 4vw, 52px); }
/* Larger, airier variant — used where only a couple of logos sit alone /* Larger, airier variant — sandbox slide: logos ~30% bigger than the
(the regulatory-sandbox slide) and can take more presence. */ mission row, digitaliseringsstyrelsen a further 10% on top. */
.partner-row.lg { gap: clamp(2rem, 5vw, 4rem); } .partner-row.lg { gap: clamp(2.4rem, 6vw, 5rem); }
.partner-row.lg .partner-logo img { height: clamp(30px, 3.6vw, 46px); opacity: 0.82; } .partner-row.lg .partner-logo img { height: clamp(39px, 4.7vw, 60px); opacity: 0.85; }
.mission-foot { margin-top: clamp(0.5rem, 2vh, 1.5rem); } .partner-row.lg .partner-logo img.ds-logo { height: clamp(43px, 5.2vw, 66px); }
.mission-foot .partner-caption {
font-size: clamp(0.62rem, 0.8vw, 0.72rem);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-faint);
font-weight: 600;
margin: 0 0 1rem;
}
/* ════════════════════ Slide 6 — Pause ════════════════════ */ /* ════════════════════ Slide 6 — Pause ════════════════════ */
#slide-pause { } #slide-pause { }
@ -619,12 +599,12 @@ img { display: block; max-width: 100%; }
} }
/* ════════════════════ Slide 7 — Platform architecture ════════════════════ */ /* ════════════════════ Slide 7 — Platform architecture ════════════════════ */
#slide-arch .slide-inner { max-width: 1240px; } .arch-inner { max-width: 1200px; }
.arch-head { text-align: center; margin-bottom: clamp(1.4rem, 3.2vh, 2.4rem); } .arch-head { text-align: center; margin-bottom: clamp(1.2rem, 3vh, 2.2rem); }
.arch-head .arch-title { .arch-head .arch-title {
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 400; font-weight: 400;
font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-size: clamp(2.2rem, 4.2vw, 3.4rem); /* ~30% larger */
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: var(--ink); color: var(--ink);
margin: 0; margin: 0;
@ -632,7 +612,7 @@ img { display: block; max-width: 100%; }
.arch-head .arch-sub { .arch-head .arch-sub {
font-family: var(--font-serif); font-family: var(--font-serif);
font-style: italic; font-style: italic;
font-size: clamp(1rem, 1.5vw, 1.25rem); font-size: clamp(1.3rem, 2vw, 1.65rem);
color: var(--ink-soft); color: var(--ink-soft);
margin: 0.35rem 0 0; margin: 0.35rem 0 0;
} }
@ -640,60 +620,58 @@ img { display: block; max-width: 100%; }
position: relative; position: relative;
border: 1px solid rgba(56,56,49,0.16); border: 1px solid rgba(56,56,49,0.16);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: clamp(1.4rem, 2.8vw, 2.4rem) clamp(1.2rem, 2.4vw, 2rem) clamp(1.6rem, 3vw, 2.4rem); /* More air on the sides + a clear top inset so the corner label sits clean. */
padding: clamp(2rem, 3.6vw, 3.2rem) clamp(2.2rem, 4.5vw, 4rem) clamp(1.8rem, 3.2vw, 2.6rem);
background: linear-gradient(180deg, rgba(255,252,247,0.6), rgba(246,242,232,0.35)); background: linear-gradient(180deg, rgba(255,252,247,0.6), rgba(246,242,232,0.35));
display: grid; display: grid;
gap: clamp(1rem, 2vh, 1.6rem); gap: clamp(0.9rem, 1.9vh, 1.5rem);
} }
/* "Everything Client-Managed" — up in the top-right corner. */
.arch-frame-label { .arch-frame-label {
position: absolute; position: absolute;
top: 0; left: 50%; top: clamp(0.9rem, 1.8vw, 1.4rem);
transform: translate(-50%, -50%); right: clamp(1.4rem, 3vw, 2.4rem);
background: var(--paper);
padding: 0 1rem;
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: clamp(0.64rem, 0.82vw, 0.74rem); font-size: clamp(0.72rem, 0.92vw, 0.84rem);
letter-spacing: 0.22em; letter-spacing: 0.2em;
text-transform: uppercase; text-transform: uppercase;
color: var(--ink-dim); color: var(--ink-dim);
font-weight: 600; font-weight: 600;
} }
.arch-group { display: grid; gap: 0.7rem; } .arch-group { display: grid; gap: 0.7rem; }
.arch-group-head { display: flex; align-items: baseline; gap: 0.75rem; } .arch-group-head { display: flex; align-items: baseline; gap: 0.9rem; }
.arch-group-label { .arch-group-label {
font-family: var(--font-sans); font-family: var(--font-sans);
font-weight: 700; font-weight: 700;
font-size: clamp(0.85rem, 1.1vw, 1rem); font-size: clamp(1.1rem, 1.45vw, 1.32rem);
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: var(--ink); color: var(--ink);
} }
.arch-group-caption { .arch-group-caption {
font-family: var(--font-serif); font-family: var(--font-serif);
font-style: italic; font-style: italic;
font-size: clamp(0.8rem, 1vw, 0.95rem); font-size: clamp(1rem, 1.3vw, 1.24rem);
color: var(--ink-soft); color: var(--ink-soft);
} }
.arch-cards { display: grid; gap: clamp(0.6rem, 1.2vw, 1rem); } .arch-cards { display: grid; gap: clamp(0.7rem, 1.3vw, 1.1rem); }
.arch-cards.c3 { grid-template-columns: repeat(3, 1fr); } .arch-cards.c3 { grid-template-columns: repeat(3, 1fr); }
.arch-cards.c4 { grid-template-columns: repeat(4, 1fr); } .arch-cards.c4 { grid-template-columns: repeat(4, 1fr); }
.arch-card { .arch-card {
background: var(--paper-high); background: var(--paper-high);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: clamp(0.7rem, 1.3vw, 1.05rem) clamp(0.8rem, 1.4vw, 1.1rem); padding: clamp(1rem, 1.7vw, 1.5rem) clamp(1rem, 1.6vw, 1.35rem);
box-shadow: box-shadow:
0 0 0 0.5px rgba(56,56,49,0.06), 0 0 0 0.5px rgba(56,56,49,0.06),
0 10px 22px -16px rgba(56,56,49,0.22); 0 10px 22px -16px rgba(56,56,49,0.22);
display: grid; display: grid;
gap: 0.2rem; gap: 0.3rem;
align-content: start; align-content: start;
min-height: clamp(118px, 15vh, 158px); /* taller boxes */
} }
.arch-card[data-accent="foundation"] { border-top: 2px solid var(--copper); }
.arch-card[data-accent="tools"] { border-top: 2px solid var(--ochre); }
.arch-card[data-accent="agents"] { border-top: 2px solid var(--heather); }
.arch-card .ac-name { .arch-card .ac-name {
font-family: var(--font-sans); font-family: var(--font-sans);
font-weight: 600; font-weight: 600;
font-size: clamp(0.82rem, 1.05vw, 0.98rem); font-size: clamp(1.05rem, 1.35vw, 1.28rem);
color: var(--ink); color: var(--ink);
margin: 0; margin: 0;
line-height: 1.2; line-height: 1.2;
@ -701,24 +679,36 @@ img { display: block; max-width: 100%; }
.arch-card .ac-italic { .arch-card .ac-italic {
font-family: var(--font-serif); font-family: var(--font-serif);
font-style: italic; font-style: italic;
font-size: clamp(0.75rem, 0.95vw, 0.88rem); font-size: clamp(0.95rem, 1.2vw, 1.14rem);
color: var(--ink-soft); color: var(--ink-soft);
margin: 0; margin: 0;
} }
.arch-card .ac-mono { .arch-card .ac-mono {
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: clamp(0.6rem, 0.76vw, 0.7rem); font-size: clamp(0.78rem, 0.98vw, 0.9rem);
letter-spacing: 0.04em; letter-spacing: 0.03em;
color: var(--ink-dim); color: var(--ink-dim);
margin: 0.1rem 0 0; margin: 0.15rem 0 0;
} }
@media (max-width: 860px) { @media (max-width: 860px) {
.arch-cards.c3, .arch-cards.c4 { grid-template-columns: repeat(2, 1fr); } .arch-cards.c3, .arch-cards.c4 { grid-template-columns: repeat(2, 1fr); }
} }
/* ════════════════════ Slide 10 / 14 — Section dividers ════════════════════ */ /* ════════════════════ Solo word slides (Demo · Roadmap) ════════════════════ */
.solo-slide .slide-inner { text-align: center; display: grid; justify-items: center; }
.solo-word {
font-family: var(--font-serif);
font-weight: 330;
font-size: clamp(4rem, 13vw, 11rem);
letter-spacing: -0.035em;
line-height: 1;
color: var(--ink);
margin: 0;
}
/* ════════════════════ Section dividers (Suverænitet · Vores tilgang) ════════════════════ */
.section-divider .slide-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.5rem); } .section-divider .slide-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.5rem); }
.section-divider .bifrost-logo { margin-bottom: 0.5rem; } .divider-fenja { width: clamp(150px, 18vw, 240px); height: auto; margin-bottom: 0.5rem; opacity: 0.92; }
.section-title { .section-title {
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 360; font-weight: 360;
@ -832,7 +822,15 @@ img { display: block; max-width: 100%; }
} }
/* ════════════════════ Slide 12 — Meme ════════════════════ */ /* ════════════════════ Slide 12 — Meme ════════════════════ */
#slide-meme .slide-inner { display: grid; justify-items: center; gap: clamp(1.4rem, 3.5vh, 2.2rem); text-align: center; } #slide-meme .slide-inner { display: grid; justify-items: center; gap: clamp(1.2rem, 3vh, 1.9rem); text-align: center; }
.meme-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(2rem, 4vw, 3.2rem);
letter-spacing: -0.02em;
color: var(--ink);
margin: 0;
}
.meme-frame { .meme-frame {
padding: clamp(0.6rem, 1.4vw, 1rem); padding: clamp(0.6rem, 1.4vw, 1rem);
background: var(--paper-high); background: var(--paper-high);
@ -841,64 +839,43 @@ img { display: block; max-width: 100%; }
0 0 0 0.5px rgba(56,56,49,0.07), 0 0 0 0.5px rgba(56,56,49,0.07),
0 30px 60px -28px rgba(56,56,49,0.34), 0 30px 60px -28px rgba(56,56,49,0.34),
0 6px 16px -8px rgba(56,56,49,0.16); 0 6px 16px -8px rgba(56,56,49,0.16);
max-width: min(640px, 78vw); max-width: min(820px, 86vw);
} }
.meme-frame img { .meme-frame img {
border-radius: calc(var(--radius-lg) - 6px); border-radius: calc(var(--radius-lg) - 6px);
max-height: 62vh; max-height: 70vh;
width: auto; width: auto;
} }
.meme-caption {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1rem, 1.5vw, 1.25rem);
color: var(--ink-soft);
margin: 0;
}
/* ════════════════════ Slide 15 — Regulatory sandbox ════════════════════ */ /* ════════════════════ Slide 15 — Regulatory sandbox ════════════════════ */
#slide-sandbox .slide-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.6rem); max-width: 920px; } .sandbox-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.6rem); max-width: 980px; align-content: center; }
.sandbox-badge {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-sans);
font-size: clamp(0.7rem, 0.92vw, 0.82rem);
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--copper);
padding: 0.5rem 1.1rem;
border: 1px solid rgba(109,140,124,0.4);
border-radius: var(--radius-full);
}
.sandbox-title { .sandbox-title {
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 360; font-weight: 360;
font-size: clamp(2rem, 4.4vw, 3.6rem); font-size: clamp(2.6rem, 5.6vw, 4.6rem);
line-height: 1.1; line-height: 1.06;
letter-spacing: -0.022em; letter-spacing: -0.025em;
color: var(--ink); color: var(--ink);
margin: 0; margin: 0;
max-width: 20ch; max-width: 18ch;
text-wrap: balance; text-wrap: balance;
} }
.sandbox-title em { font-style: italic; font-weight: 460; color: var(--terracotta); } .sandbox-body {
.sandbox-sub {
font-family: var(--font-serif); font-family: var(--font-serif);
font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.5rem);
font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.5;
color: var(--ink-soft); color: var(--ink-soft);
margin: 0; margin: 0;
max-width: 34ch; max-width: 52ch;
text-wrap: pretty;
} }
/* ════════════════════ Slide 17 — Closing ════════════════════ */ /* ════════════════════ Slide 19 — Closing ════════════════════ */
#slide-thanks .slide-inner { text-align: center; display: grid; justify-items: center; gap: clamp(2rem, 5vh, 3.5rem); position: relative; z-index: 2; } #slide-thanks .hero-text { gap: clamp(1.6rem, 4vh, 2.8rem); }
.thanks-title { .thanks-title {
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 340; font-weight: 340;
font-size: clamp(2.6rem, 6.5vw, 5.5rem); font-size: clamp(2.8rem, 7vw, 6rem);
letter-spacing: -0.03em; letter-spacing: -0.03em;
color: var(--ink); color: var(--ink);
margin: 0; margin: 0;

4
assets/js/deck.js
View file

@ -22,11 +22,15 @@
const deck = document.getElementById('deck'); const deck = document.getElementById('deck');
const nav = document.getElementById('dot-nav'); const nav = document.getElementById('dot-nav');
const counter = document.getElementById('counter-now'); const counter = document.getElementById('counter-now');
const counterTotal = document.getElementById('counter-total');
const slides = Array.from(document.querySelectorAll('.slide')); const slides = Array.from(document.querySelectorAll('.slide'));
if (!deck || !nav || !slides.length) return; if (!deck || !nav || !slides.length) return;
const pad = (n) => String(n).padStart(2, '0'); const pad = (n) => String(n).padStart(2, '0');
// Keep the "/ NN" total in sync with however many slides exist.
if (counterTotal) counterTotal.textContent = pad(slides.length);
// ─── Build the dot-nav ─────────────────────────────────────── // ─── Build the dot-nav ───────────────────────────────────────
const dots = slides.map((slide, i) => { const dots = slides.map((slide, i) => {
const btn = document.createElement('button'); const btn = document.createElement('button');

189
index.html
View file

@ -10,7 +10,7 @@
<body> <body>
<!-- Shared SVG defs: the Bifrost aurora gradient + soft glow, referenced <!-- Shared SVG defs: the Bifrost aurora gradient + soft glow, referenced
by every arc lockup and the ambient background. --> by every arc lockup and the spanning hero arc. -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false"> <svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<defs> <defs>
<linearGradient id="bifrostAurora" x1="0" x2="1" y1="0" y2="0"> <linearGradient id="bifrostAurora" x1="0" x2="1" y1="0" y2="0">
@ -31,30 +31,23 @@
<a class="masthead" href="#slide-welcome" aria-label="Til forsiden"> <a class="masthead" href="#slide-welcome" aria-label="Til forsiden">
<img src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" /> <img src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
</a> </a>
<div class="slide-counter" aria-hidden="true"><b id="counter-now">01</b> / 17</div> <div class="slide-counter" aria-hidden="true"><b id="counter-now">01</b> / <span id="counter-total">19</span></div>
<main class="deck" id="deck"> <main class="deck" id="deck">
<!-- ░░░ 1 — Ambient welcome ░░░ --> <!-- ░░░ 1 — Welcome — Project Bifrost arc reveal ░░░ -->
<section class="slide" id="slide-welcome" data-label="Velkomst"> <section class="slide hero-slide" id="slide-welcome" data-label="Velkomst">
<div class="ambient" aria-hidden="true"> <div class="bifrost-arc" aria-hidden="true">
<div class="band b1"></div> <svg viewBox="0 0 1400 500" preserveAspectRatio="xMidYMid meet">
<div class="band b2"></div> <path class="arc-halo" pathLength="1" d="M 60 420 Q 700 -40 1340 420"/>
<div class="band b3"></div> <path class="arc-main" pathLength="1" d="M 60 420 Q 700 -40 1340 420"/>
<svg class="ambient-arc" viewBox="0 0 1400 500" preserveAspectRatio="xMidYMid meet"> <path class="arc-thin" pathLength="1" d="M 80 420 Q 700 -20 1320 420"/>
<path d="M 60 420 Q 700 -40 1340 420" fill="none" stroke="url(#bifrostAurora)"
stroke-width="22" stroke-linecap="round" filter="url(#auroraGlow)" opacity="0.55"/>
<path d="M 60 420 Q 700 -40 1340 420" fill="none" stroke="url(#bifrostAurora)"
stroke-width="3" stroke-linecap="round"/>
</svg> </svg>
</div> </div>
<div class="slide-inner reveal"> <div class="hero-text reveal">
<p class="welcome-kicker">Velkommen til</p> <p class="hero-eyebrow">Velkommen til</p>
<span class="bifrost-logo lg"> <h1 class="bifrost-name"><span>Project</span> <span class="accent">Bifrost</span></h1>
<svg class="arc" viewBox="0 0 100 50"><path d="M5 45 Q50 -6 95 45" fill="none" stroke="url(#bifrostAurora)" stroke-width="3.5" stroke-linecap="round"/></svg> <p class="hero-sub">001 Bifrost Advisory Meeting</p>
<span class="word"><em>Bifrost</em></span>
</span>
<h1 class="welcome-headline"><span class="seq">001</span> Bifrost Advisory Meeting</h1>
</div> </div>
</section> </section>
@ -168,27 +161,23 @@
</section> </section>
<!-- ░░░ 4 — Fenja AI mission ░░░ --> <!-- ░░░ 4 — Fenja AI mission ░░░ -->
<section class="slide" id="slide-mission" data-label="Mission"> <section class="slide mission-slide" id="slide-mission" data-label="Mission">
<div class="slide-inner reveal"> <div class="mission-main reveal">
<div class="brand-lockup"> <img class="mission-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
<img class="fenja-mark" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" /> <p class="mission-values">Sovereign. Trusted. Innovative.</p>
<span class="dot-sep">·</span> <span class="bifrost-logo projbifrost">
<span class="bifrost-logo">
<svg class="arc" viewBox="0 0 100 50"><path d="M5 45 Q50 -6 95 45" fill="none" stroke="url(#bifrostAurora)" stroke-width="3.5" stroke-linecap="round"/></svg> <svg class="arc" viewBox="0 0 100 50"><path d="M5 45 Q50 -6 95 45" fill="none" stroke="url(#bifrostAurora)" stroke-width="3.5" stroke-linecap="round"/></svg>
<span class="word"><em>Bifrost</em></span> <span class="word">Project <em>Bifrost</em></span>
</span> </span>
</div> </div>
<p class="mission-values"><b>Sovereign. Trusted. Innovative.</b></p>
<hr class="aurora-rule" style="width:clamp(80px,10vw,140px)" />
<div class="mission-foot"> <div class="mission-foot">
<p class="partner-caption">Støttet af &amp; i samarbejde med</p> <p class="partner-caption">Støttet af &amp; i samarbejde med</p>
<div class="partner-row"> <div class="partner-row mission-logos">
<div class="partner-logo tall"><img src="assets/logos/innovationsfonden_logo_dk_teal_rgb_0.png" alt="Innovationsfonden" /></div> <div class="partner-logo"><img src="assets/logos/innovationsfonden_logo_dk_teal_rgb_0.png" alt="Innovationsfonden" /></div>
<div class="partner-logo"><img src="assets/logos/BII_Logo_Petroleum_RGB.png" alt="BioInnovation Institute" /></div> <div class="partner-logo"><img src="assets/logos/BII_Logo_Petroleum_RGB.png" alt="BioInnovation Institute" /></div>
<div class="partner-logo"><img src="assets/logos/datatilsynet.png" alt="Datatilsynet" /></div> <div class="partner-logo"><img src="assets/logos/datatilsynet.png" alt="Datatilsynet" /></div>
<div class="partner-logo"><img src="assets/logos/digitaliseringsstyrelsen.png" alt="Digitaliseringsstyrelsen" /></div> <div class="partner-logo"><img src="assets/logos/digitaliseringsstyrelsen.png" alt="Digitaliseringsstyrelsen" /></div>
<div class="partner-logo tall"><img src="assets/logos/dcai-logo-white.png" alt="Gefion · DCAI" /></div> <div class="partner-logo"><img src="assets/logos/dcai-logo-white.png" alt="Gefion · DCAI" /></div>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -197,20 +186,13 @@
<section class="slide" id="slide-q1" data-label="Spørgsmål"> <section class="slide" id="slide-q1" data-label="Spørgsmål">
<div class="slide-inner reveal"> <div class="slide-inner reveal">
<div class="question"> <div class="question">
<span class="question-mark">&ldquo;</span> <p class="question-text">&ldquo;Hvordan gør vi Projekt Bifrost til en <em>success</em> — for jer, for platformen, for dansk AI-suverænitet?&rdquo;</p>
<p class="question-eyebrow">Til eftertanke</p>
<p class="question-text">Hvordan gør vi Projekt Bifrost til en <em>success</em> — for jer, for platformen, for dansk AI-suverænitet?</p>
<hr class="question-rule" />
</div> </div>
</div> </div>
</section> </section>
<!-- ░░░ 6 — Pause ░░░ --> <!-- ░░░ 6 — Pause ░░░ -->
<section class="slide" id="slide-pause" data-label="Pause"> <section class="slide" id="slide-pause" data-label="Pause">
<div class="ambient" aria-hidden="true">
<div class="band b1"></div>
<div class="band b3"></div>
</div>
<div class="slide-inner reveal"> <div class="slide-inner reveal">
<p class="pause-clock">10:20 – 10:35</p> <p class="pause-clock">10:20 – 10:35</p>
<h2 class="pause-word">Pause</h2> <h2 class="pause-word">Pause</h2>
@ -220,7 +202,7 @@
<!-- ░░░ 7 — Platform architecture ░░░ --> <!-- ░░░ 7 — Platform architecture ░░░ -->
<section class="slide" id="slide-arch" data-label="Arkitektur"> <section class="slide" id="slide-arch" data-label="Arkitektur">
<div class="slide-inner"> <div class="slide-inner arch-inner">
<div class="arch-head reveal"> <div class="arch-head reveal">
<p class="arch-title">Fenja AI Platform Architecture</p> <p class="arch-title">Fenja AI Platform Architecture</p>
<p class="arch-sub">Simply Explained</p> <p class="arch-sub">Simply Explained</p>
@ -234,17 +216,17 @@
<span class="arch-group-caption">Suveræn af design</span> <span class="arch-group-caption">Suveræn af design</span>
</header> </header>
<div class="arch-cards c3"> <div class="arch-cards c3">
<article class="arch-card" data-accent="foundation"> <article class="arch-card">
<p class="ac-name">Sprogmodel</p> <p class="ac-name">Sprogmodel</p>
<p class="ac-italic">State-of-the-art, open-source</p> <p class="ac-italic">State-of-the-art, open-source</p>
<p class="ac-mono">On-prem</p> <p class="ac-mono">On-prem</p>
</article> </article>
<article class="arch-card" data-accent="foundation"> <article class="arch-card">
<p class="ac-name">Wiki</p> <p class="ac-name">Wiki</p>
<p class="ac-italic">Virksomheds- og domæneviden</p> <p class="ac-italic">Virksomheds- og domæneviden</p>
<p class="ac-mono">Organisation · Afdeling · Personlig</p> <p class="ac-mono">Organisation · Afdeling · Personlig</p>
</article> </article>
<article class="arch-card" data-accent="foundation"> <article class="arch-card">
<p class="ac-name">Rutiner &amp; hukommelse</p> <p class="ac-name">Rutiner &amp; hukommelse</p>
<p class="ac-italic">Hvordan Fenja arbejder i den</p> <p class="ac-italic">Hvordan Fenja arbejder i den</p>
<p class="ac-mono">Stand-ups · Faste opgaver · Arbejdshukommelse</p> <p class="ac-mono">Stand-ups · Faste opgaver · Arbejdshukommelse</p>
@ -258,22 +240,22 @@
<span class="arch-group-caption">Hvordan Fenja handler</span> <span class="arch-group-caption">Hvordan Fenja handler</span>
</header> </header>
<div class="arch-cards c4"> <div class="arch-cards c4">
<article class="arch-card" data-accent="tools"> <article class="arch-card">
<p class="ac-name">Dokumentsøgning</p> <p class="ac-name">Dokumentsøgning</p>
<p class="ac-italic">Find og citér</p> <p class="ac-italic">Find og citér</p>
<p class="ac-mono">RAG</p> <p class="ac-mono">RAG</p>
</article> </article>
<article class="arch-card" data-accent="tools"> <article class="arch-card">
<p class="ac-name">Strukturerede data (fx SQL)</p> <p class="ac-name">Strukturerede data (fx SQL)</p>
<p class="ac-italic">Forespørg og udtræk</p> <p class="ac-italic">Forespørg og udtræk</p>
<p class="ac-mono">NL → SQL</p> <p class="ac-mono">NL → SQL</p>
</article> </article>
<article class="arch-card" data-accent="tools"> <article class="arch-card">
<p class="ac-name">Systemhandlinger</p> <p class="ac-name">Systemhandlinger</p>
<p class="ac-italic">Læs og skriv</p> <p class="ac-italic">Læs og skriv</p>
<p class="ac-mono">API&rsquo;er · integrationer</p> <p class="ac-mono">API&rsquo;er · integrationer</p>
</article> </article>
<article class="arch-card" data-accent="tools"> <article class="arch-card">
<p class="ac-name">Skræddersyede værktøjer</p> <p class="ac-name">Skræddersyede værktøjer</p>
<p class="ac-italic">Jeres specifikke arbejde</p> <p class="ac-italic">Jeres specifikke arbejde</p>
<p class="ac-mono">Defineret af jer</p> <p class="ac-mono">Defineret af jer</p>
@ -287,22 +269,22 @@
<span class="arch-group-caption">Hvordan Fenja skalerer</span> <span class="arch-group-caption">Hvordan Fenja skalerer</span>
</header> </header>
<div class="arch-cards c4"> <div class="arch-cards c4">
<article class="arch-card" data-accent="agents"> <article class="arch-card">
<p class="ac-name">Supervisor</p> <p class="ac-name">Supervisor</p>
<p class="ac-italic">Planlæg og dirigér</p> <p class="ac-italic">Planlæg og dirigér</p>
<p class="ac-mono">Orkestrering</p> <p class="ac-mono">Orkestrering</p>
</article> </article>
<article class="arch-card" data-accent="agents"> <article class="arch-card">
<p class="ac-name">Specialister</p> <p class="ac-name">Specialister</p>
<p class="ac-italic">Fokuseret ekspertise</p> <p class="ac-italic">Fokuseret ekspertise</p>
<p class="ac-mono">Subagenter</p> <p class="ac-mono">Subagenter</p>
</article> </article>
<article class="arch-card" data-accent="agents"> <article class="arch-card">
<p class="ac-name">Skills</p> <p class="ac-name">Skills</p>
<p class="ac-italic">Genbrugelig kapabilitet</p> <p class="ac-italic">Genbrugelig kapabilitet</p>
<p class="ac-mono">Portabel på tværs af specialister</p> <p class="ac-mono">Portabel på tværs af specialister</p>
</article> </article>
<article class="arch-card" data-accent="agents"> <article class="arch-card">
<p class="ac-name">Workflows</p> <p class="ac-name">Workflows</p>
<p class="ac-italic">Sammensat af jer</p> <p class="ac-italic">Sammensat af jer</p>
<p class="ac-mono">Styret fra ende til ende</p> <p class="ac-mono">Styret fra ende til ende</p>
@ -313,42 +295,47 @@
</div> </div>
</section> </section>
<!-- ░░░ 8 — Question ░░░ --> <!-- ░░░ 8 — Demo ░░░ -->
<section class="slide" id="slide-q2" data-label="Spørgsmål"> <section class="slide solo-slide" id="slide-demo" data-label="Demo">
<div class="slide-inner reveal"> <div class="slide-inner reveal">
<div class="question"> <h2 class="solo-word">Demo</h2>
<span class="question-mark">&ldquo;</span>
<p class="question-eyebrow">Til eftertanke</p>
<p class="question-text">Hvilke konkrete AI-features ville skabe størst <em>værdi</em> for dig eller din organisation, hvis I fik adgang til dem i morgen?</p>
<hr class="question-rule" />
</div>
</div> </div>
</section> </section>
<!-- ░░░ 9 — Question ░░░ --> <!-- ░░░ 9 — Question ░░░ -->
<section class="slide" id="slide-q2" data-label="Spørgsmål">
<div class="slide-inner reveal">
<div class="question">
<p class="question-text">&ldquo;Hvilke konkrete AI-features ville skabe størst <em>værdi</em> for dig eller din organisation, hvis I fik adgang til dem i morgen?&rdquo;</p>
</div>
</div>
</section>
<!-- ░░░ 10 — Roadmap ░░░ -->
<section class="slide solo-slide" id="slide-roadmap" data-label="Roadmap">
<div class="slide-inner reveal">
<h2 class="solo-word">Roadmap</h2>
</div>
</section>
<!-- ░░░ 11 — Question ░░░ -->
<section class="slide" id="slide-q3" data-label="Spørgsmål"> <section class="slide" id="slide-q3" data-label="Spørgsmål">
<div class="slide-inner reveal"> <div class="slide-inner reveal">
<div class="question"> <div class="question">
<span class="question-mark">&ldquo;</span> <p class="question-text">&ldquo;Hvor ser I de største <em>barrierer</em> for praktisk anvendelse af AI i hverdagen?&rdquo;</p>
<p class="question-eyebrow">Til eftertanke</p>
<p class="question-text">Hvor ser I de største <em>barrierer</em> for praktisk anvendelse af AI i hverdagen?</p>
<hr class="question-rule" />
</div> </div>
</div> </div>
</section> </section>
<!-- ░░░ 10 — Section divider: Sovereignty ░░░ --> <!-- ░░░ 12 — Section divider: Sovereignty ░░░ -->
<section class="slide section-divider" id="slide-sov" data-label="Suverænitet"> <section class="slide section-divider" id="slide-sov" data-label="Suverænitet">
<div class="slide-inner reveal"> <div class="slide-inner reveal">
<span class="bifrost-logo sm"> <img class="divider-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
<svg class="arc" viewBox="0 0 100 50"><path d="M5 45 Q50 -6 95 45" fill="none" stroke="url(#bifrostAurora)" stroke-width="3.5" stroke-linecap="round"/></svg> <h2 class="section-title">Suverænitet, Sikkerhed &amp; Governance</h2>
<span class="word"><em>Bifrost</em></span>
</span>
<h2 class="section-title">Suverænitet, <em>Sikkerhed</em> &amp; Governance</h2>
</div> </div>
</section> </section>
<!-- ░░░ 11 — Highlight boxes ░░░ --> <!-- ░░░ 13 — Highlight boxes ░░░ -->
<section class="slide" id="slide-highlights" data-label="Risici"> <section class="slide" id="slide-highlights" data-label="Risici">
<div class="slide-inner"> <div class="slide-inner">
<div class="highlights-head reveal"> <div class="highlights-head reveal">
@ -403,24 +390,21 @@
</div> </div>
</section> </section>
<!-- ░░░ 12 — Meme ░░░ --> <!-- ░░░ 14 — Meme ░░░ -->
<section class="slide" id="slide-meme" data-label="Meme"> <section class="slide" id="slide-meme" data-label="Meme">
<div class="slide-inner reveal"> <div class="slide-inner reveal">
<h2 class="meme-title">&ldquo;Sovereign Cloud&rdquo;</h2>
<div class="meme-frame"> <div class="meme-frame">
<img src="assets/img/meme.jpg" alt="Meme" /> <img src="assets/img/meme.jpg" alt="Sovereign Cloud meme" />
</div> </div>
<p class="meme-caption">Lidt selvironi mellem de tunge emner.</p>
</div> </div>
</section> </section>
<!-- ░░░ 13 — Question ░░░ --> <!-- ░░░ 15 — Question ░░░ -->
<section class="slide" id="slide-q4" data-label="Spørgsmål"> <section class="slide" id="slide-q4" data-label="Spørgsmål">
<div class="slide-inner reveal"> <div class="slide-inner reveal">
<div class="question"> <div class="question">
<span class="question-mark">&ldquo;</span> <p class="question-text">&ldquo;Hvad er vigtigst for jer, når AI skal bruges <em>sikkert</em> og ansvarligt i en organisation?&rdquo;</p>
<p class="question-eyebrow">Til eftertanke</p>
<p class="question-text">Hvad er vigtigst for jer, når AI skal bruges <em>sikkert</em> og ansvarligt i en organisation?</p>
<hr class="question-rule" />
<p class="question-prompts"> <p class="question-prompts">
<span>Certificeringer?</span><span class="sep">·</span><span>Mennesker i processen?</span><span class="sep">·</span><span>At det kører lokalt?</span> <span>Certificeringer?</span><span class="sep">·</span><span>Mennesker i processen?</span><span class="sep">·</span><span>At det kører lokalt?</span>
</p> </p>
@ -428,13 +412,10 @@
</div> </div>
</section> </section>
<!-- ░░░ 14 — Section divider + reserved points ░░░ --> <!-- ░░░ 16 — Section divider + reserved points ░░░ -->
<section class="slide section-divider" id="slide-approach" data-label="Vores tilgang"> <section class="slide section-divider" id="slide-approach" data-label="Vores tilgang">
<div class="slide-inner reveal"> <div class="slide-inner reveal">
<span class="bifrost-logo sm"> <img class="divider-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
<svg class="arc" viewBox="0 0 100 50"><path d="M5 45 Q50 -6 95 45" fill="none" stroke="url(#bifrostAurora)" stroke-width="3.5" stroke-linecap="round"/></svg>
<span class="word"><em>Bifrost</em></span>
</span>
<h2 class="section-title">Vores tilgang til <em>Suverænitet</em>, Sikkerhed &amp; Governance</h2> <h2 class="section-title">Vores tilgang til <em>Suverænitet</em>, Sikkerhed &amp; Governance</h2>
<ul class="approach-points" aria-label="Punkter tilføjes senere"> <ul class="approach-points" aria-label="Punkter tilføjes senere">
<li><span class="ph-text">Punkt tilføjes</span></li> <li><span class="ph-text">Punkt tilføjes</span></li>
@ -445,43 +426,37 @@
</div> </div>
</section> </section>
<!-- ░░░ 15 — Regulatory sandbox ░░░ --> <!-- ░░░ 17 — Regulatory sandbox ░░░ -->
<section class="slide" id="slide-sandbox" data-label="Sandkasse"> <section class="slide" id="slide-sandbox" data-label="Sandkasse">
<div class="slide-inner reveal"> <div class="slide-inner reveal sandbox-inner">
<span class="sandbox-badge">Regulatorisk AI-sandkasse</span> <h2 class="sandbox-title">Regulatorisk AI-sandkasse</h2>
<h2 class="sandbox-title">Fenja AI er optaget i <em>Den Regulatoriske AI-sandkasse</em></h2> <p class="sandbox-body">Fenja AI er optaget i Den Regulatoriske AI-sandkasse — et forløb under Datatilsynet og Digitaliseringsstyrelsen, hvor udvalgte virksomheder udvikler og afprøver deres AI i tæt dialog med myndighederne og inden for de regulatoriske rammer. Vi er en ud af kun to virksomheder, som er blevet optaget i år.</p>
<p class="sandbox-sub">Vi er en ud af kun to virksomheder, som er blevet optaget i år.</p> <div class="partner-row lg sandbox-logos">
<hr class="aurora-rule" style="width:clamp(80px,10vw,140px)" /> <div class="partner-logo"><img class="ds-logo" src="assets/logos/digitaliseringsstyrelsen.png" alt="Digitaliseringsstyrelsen" /></div>
<div class="partner-row lg">
<div class="partner-logo"><img src="assets/logos/digitaliseringsstyrelsen.png" alt="Digitaliseringsstyrelsen" /></div>
<div class="partner-logo"><img src="assets/logos/datatilsynet.png" alt="Datatilsynet" /></div> <div class="partner-logo"><img src="assets/logos/datatilsynet.png" alt="Datatilsynet" /></div>
</div> </div>
</div> </div>
</section> </section>
<!-- ░░░ 16 — Question ░░░ --> <!-- ░░░ 18 — Question ░░░ -->
<section class="slide" id="slide-q5" data-label="Spørgsmål"> <section class="slide" id="slide-q5" data-label="Spørgsmål">
<div class="slide-inner reveal"> <div class="slide-inner reveal">
<div class="question"> <div class="question">
<span class="question-mark">&ldquo;</span> <p class="question-text">&ldquo;Hvilke krav eller bekymringer skal være <em>håndteret</em>, før I ville være trygge ved at bruge en AI-platform på tværs af vigtige forretningsprocesser?&rdquo;</p>
<p class="question-eyebrow">Til eftertanke</p>
<p class="question-text">Hvilke krav eller bekymringer skal være <em>håndteret</em>, før I ville være trygge ved at bruge en AI-platform på tværs af vigtige forretningsprocesser?</p>
<hr class="question-rule" />
</div> </div>
</div> </div>
</section> </section>
<!-- ░░░ 17 — Closing ░░░ --> <!-- ░░░ 19 — Closing (inspired by the welcome arc) ░░░ -->
<section class="slide" id="slide-thanks" data-label="Tak"> <section class="slide hero-slide" id="slide-thanks" data-label="Tak">
<div class="ambient" aria-hidden="true"> <div class="bifrost-arc" aria-hidden="true">
<div class="band b2"></div> <svg viewBox="0 0 1400 500" preserveAspectRatio="xMidYMid meet">
<div class="band b3"></div> <path class="arc-halo" pathLength="1" d="M 60 420 Q 700 -40 1340 420"/>
<svg class="ambient-arc" viewBox="0 0 1400 500" preserveAspectRatio="xMidYMid meet" style="opacity:.4"> <path class="arc-main" pathLength="1" d="M 60 420 Q 700 -40 1340 420"/>
<path d="M 60 420 Q 700 -40 1340 420" fill="none" stroke="url(#bifrostAurora)" <path class="arc-thin" pathLength="1" d="M 80 420 Q 700 -20 1320 420"/>
stroke-width="18" stroke-linecap="round" filter="url(#auroraGlow)" opacity="0.5"/>
</svg> </svg>
</div> </div>
<div class="slide-inner reveal"> <div class="hero-text reveal">
<h2 class="thanks-title">Tak for <em>i dag</em></h2> <h2 class="thanks-title">Tak for <em>i dag</em></h2>
<div class="brand-lockup"> <div class="brand-lockup">
<img class="fenja-mark" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" /> <img class="fenja-mark" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />