deck: board-meeting revisions across the slide set
- 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:
parent
fbdbe1fd15
commit
eca79752f4
3 changed files with 296 additions and 340 deletions
|
|
@ -1,6 +1,6 @@
|
|||
/* =============================================================
|
||||
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.
|
||||
============================================================= */
|
||||
|
||||
|
|
@ -107,7 +107,7 @@ img { display: block; max-width: 100%; }
|
|||
.slide-counter b { font-style: normal; font-weight: 600; color: var(--ink-soft); }
|
||||
|
||||
/* ───────────────────── 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. */
|
||||
.dot-nav-tray {
|
||||
position: fixed;
|
||||
|
|
@ -126,16 +126,16 @@ img { display: block; max-width: 100%; }
|
|||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: clamp(10px, 1.4vw, 20px);
|
||||
gap: clamp(6px, 0.85vw, 13px);
|
||||
z-index: 50;
|
||||
max-width: 94vw;
|
||||
max-width: 96vw;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.dot-btn {
|
||||
all: unset;
|
||||
position: relative;
|
||||
padding: 9px;
|
||||
padding: 7px;
|
||||
cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
|
|
@ -237,41 +237,20 @@ img { display: block; max-width: 100%; }
|
|||
}
|
||||
|
||||
/* ════════════════════ THE BIG-QUESTION COMPONENT ════════════════════
|
||||
Reusable "pause and think" treatment (slides 5, 8, 9, 13, 16).
|
||||
Large confident serif, centred, lots of air. A short aurora rule and
|
||||
an aurora-tinted opening mark are the only colour. Deliberately calm. */
|
||||
Stripped to just the quoted question — no eyebrow, no rule, no aurora.
|
||||
Large confident serif, centred, lots of air. A deliberate pause. */
|
||||
.question {
|
||||
text-align: center;
|
||||
max-width: min(92vw, 920px); /* generous frame; the text controls the measure */
|
||||
max-width: min(94vw, 1100px);
|
||||
margin-inline: auto;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
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 {
|
||||
font-family: var(--font-serif);
|
||||
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;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--ink);
|
||||
|
|
@ -279,30 +258,19 @@ img { display: block; max-width: 100%; }
|
|||
max-width: 100%;
|
||||
text-wrap: balance;
|
||||
}
|
||||
/* A restrained aurora wash on the emphasised keyword */
|
||||
/* Emphasis stays as quiet serif italic — no rainbow. */
|
||||
.question-text em {
|
||||
font-style: italic;
|
||||
font-weight: 460;
|
||||
background: linear-gradient(115deg, var(--aurora-2), var(--aurora-3), var(--aurora-4));
|
||||
-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));
|
||||
font-weight: 500;
|
||||
color: var(--ink);
|
||||
}
|
||||
.question-prompts {
|
||||
font-family: var(--font-serif);
|
||||
font-style: italic;
|
||||
font-size: clamp(1rem, 1.5vw, 1.3rem);
|
||||
font-size: clamp(1.05rem, 1.6vw, 1.4rem);
|
||||
color: var(--ink-soft);
|
||||
margin: 0;
|
||||
max-width: 40ch;
|
||||
max-width: 44ch;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.question-prompts span { white-space: nowrap; }
|
||||
|
|
@ -351,105 +319,85 @@ img { display: block; max-width: 100%; }
|
|||
transform: translateY(-0.08em);
|
||||
}
|
||||
|
||||
/* ════════════════════ Slide 1 — Ambient welcome ════════════════════ */
|
||||
#slide-welcome { place-items: center; }
|
||||
#slide-welcome .slide-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.6rem); }
|
||||
.welcome-kicker {
|
||||
/* ════════════════════ Hero slides (1 welcome · 19 closing) ════════════════════
|
||||
The old Project Bifrost intro: a single luminous aurora arc spanning the
|
||||
stage, drawing in on load and breathing slowly so it looks alive when
|
||||
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-size: clamp(0.74rem, 1vw, 0.9rem);
|
||||
font-size: clamp(0.74rem, 1vw, 0.92rem);
|
||||
letter-spacing: 0.34em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-dim);
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
.welcome-headline {
|
||||
/* "Project Bifrost" wordmark — the old reveal's typography. */
|
||||
.bifrost-name {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 350;
|
||||
font-size: clamp(2.2rem, 5.2vw, 4.6rem);
|
||||
line-height: 1.07;
|
||||
letter-spacing: -0.025em;
|
||||
font-weight: 330;
|
||||
font-size: clamp(3rem, 8vw, 6.5rem);
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--ink);
|
||||
margin: 0;
|
||||
max-width: 18ch;
|
||||
text-wrap: balance;
|
||||
}
|
||||
.welcome-headline .seq {
|
||||
.bifrost-name .accent {
|
||||
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));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* Ambient aurora background — full-bleed, slow looping. Lives behind
|
||||
slide 1's content. Three drifting aurora bands + the signature arc. */
|
||||
.ambient {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
.hero-sub {
|
||||
font-family: var(--font-serif);
|
||||
font-style: italic;
|
||||
font-size: clamp(1.2rem, 2.1vw, 1.75rem);
|
||||
color: var(--ink-soft);
|
||||
margin: 0;
|
||||
}
|
||||
.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) {
|
||||
.ambient .band, .ambient-arc { animation: none; }
|
||||
.js .bifrost-arc path { stroke-dashoffset: 0; }
|
||||
.slide.in-view .bifrost-arc path { animation: none; }
|
||||
}
|
||||
|
||||
/* ════════════════════ Slide 2 — Agenda ════════════════════ */
|
||||
|
|
@ -491,24 +439,28 @@ img { display: block; max-width: 100%; }
|
|||
gap: clamp(1rem, 2vw, 2rem) clamp(1rem, 2.2vw, 2.4rem);
|
||||
}
|
||||
.board-member { margin: 0; text-align: center; }
|
||||
/* Portraits at half size — sit centred in their cell, names lead. */
|
||||
.board-portrait {
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
aspect-ratio: 1 / 1;
|
||||
margin: 0 auto 0.9rem;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
background: var(--paper-3);
|
||||
box-shadow:
|
||||
0 0 0 0.5px rgba(56,56,49,0.06),
|
||||
0 14px 28px -18px rgba(56,56,49,0.22);
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
.board-portrait img { width: 100%; height: 100%; object-fit: cover; }
|
||||
/* Names at roughly double size — the dominant element of each card. */
|
||||
.bm-name {
|
||||
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);
|
||||
margin: 0 0 0.15rem;
|
||||
letter-spacing: -0.01em;
|
||||
margin: 0 0 0.3rem;
|
||||
letter-spacing: -0.015em;
|
||||
text-wrap: balance;
|
||||
}
|
||||
.bm-title {
|
||||
font-family: var(--font-sans);
|
||||
|
|
@ -530,25 +482,61 @@ img { display: block; max-width: 100%; }
|
|||
.board-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
/* ════════════════════ Slide 4 — Mission ════════════════════ */
|
||||
#slide-mission .slide-inner { text-align: center; display: grid; justify-items: center; gap: clamp(2rem, 5vh, 3.5rem); }
|
||||
/* ════════════════════ Slide 4 — Mission ════════════════════
|
||||
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 {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 360;
|
||||
font-size: clamp(1.6rem, 3.4vw, 2.8rem);
|
||||
letter-spacing: -0.01em;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 600;
|
||||
font-size: clamp(1rem, 1.8vw, 1.5rem);
|
||||
letter-spacing: 0.01em;
|
||||
color: var(--ink);
|
||||
margin: 0;
|
||||
}
|
||||
.mission-values b {
|
||||
font-weight: 400;
|
||||
background: linear-gradient(115deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
.bifrost-logo.projbifrost { margin-top: clamp(0.3rem, 1.5vh, 1rem); }
|
||||
.bifrost-logo.projbifrost .word em { font-style: italic; }
|
||||
|
||||
/* Foot — pinned to the bottom row of the slide. */
|
||||
.mission-foot {
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -576,19 +564,11 @@ img { display: block; max-width: 100%; }
|
|||
optical weight matches the wide wordmark lockups beside them. */
|
||||
.partner-logo.tall img { height: clamp(34px, 4vw, 52px); }
|
||||
|
||||
/* Larger, airier variant — used where only a couple of logos sit alone
|
||||
(the regulatory-sandbox slide) and can take more presence. */
|
||||
.partner-row.lg { gap: clamp(2rem, 5vw, 4rem); }
|
||||
.partner-row.lg .partner-logo img { height: clamp(30px, 3.6vw, 46px); opacity: 0.82; }
|
||||
.mission-foot { margin-top: clamp(0.5rem, 2vh, 1.5rem); }
|
||||
.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;
|
||||
}
|
||||
/* Larger, airier variant — sandbox slide: logos ~30% bigger than the
|
||||
mission row, digitaliseringsstyrelsen a further 10% on top. */
|
||||
.partner-row.lg { gap: clamp(2.4rem, 6vw, 5rem); }
|
||||
.partner-row.lg .partner-logo img { height: clamp(39px, 4.7vw, 60px); opacity: 0.85; }
|
||||
.partner-row.lg .partner-logo img.ds-logo { height: clamp(43px, 5.2vw, 66px); }
|
||||
|
||||
/* ════════════════════ Slide 6 — Pause ════════════════════ */
|
||||
#slide-pause { }
|
||||
|
|
@ -619,12 +599,12 @@ img { display: block; max-width: 100%; }
|
|||
}
|
||||
|
||||
/* ════════════════════ Slide 7 — Platform architecture ════════════════════ */
|
||||
#slide-arch .slide-inner { max-width: 1240px; }
|
||||
.arch-head { text-align: center; margin-bottom: clamp(1.4rem, 3.2vh, 2.4rem); }
|
||||
.arch-inner { max-width: 1200px; }
|
||||
.arch-head { text-align: center; margin-bottom: clamp(1.2rem, 3vh, 2.2rem); }
|
||||
.arch-head .arch-title {
|
||||
font-family: var(--font-serif);
|
||||
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;
|
||||
color: var(--ink);
|
||||
margin: 0;
|
||||
|
|
@ -632,7 +612,7 @@ img { display: block; max-width: 100%; }
|
|||
.arch-head .arch-sub {
|
||||
font-family: var(--font-serif);
|
||||
font-style: italic;
|
||||
font-size: clamp(1rem, 1.5vw, 1.25rem);
|
||||
font-size: clamp(1.3rem, 2vw, 1.65rem);
|
||||
color: var(--ink-soft);
|
||||
margin: 0.35rem 0 0;
|
||||
}
|
||||
|
|
@ -640,60 +620,58 @@ img { display: block; max-width: 100%; }
|
|||
position: relative;
|
||||
border: 1px solid rgba(56,56,49,0.16);
|
||||
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));
|
||||
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 {
|
||||
position: absolute;
|
||||
top: 0; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: var(--paper);
|
||||
padding: 0 1rem;
|
||||
top: clamp(0.9rem, 1.8vw, 1.4rem);
|
||||
right: clamp(1.4rem, 3vw, 2.4rem);
|
||||
font-family: var(--font-sans);
|
||||
font-size: clamp(0.64rem, 0.82vw, 0.74rem);
|
||||
letter-spacing: 0.22em;
|
||||
font-size: clamp(0.72rem, 0.92vw, 0.84rem);
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-dim);
|
||||
font-weight: 600;
|
||||
}
|
||||
.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 {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 700;
|
||||
font-size: clamp(0.85rem, 1.1vw, 1rem);
|
||||
font-size: clamp(1.1rem, 1.45vw, 1.32rem);
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--ink);
|
||||
}
|
||||
.arch-group-caption {
|
||||
font-family: var(--font-serif);
|
||||
font-style: italic;
|
||||
font-size: clamp(0.8rem, 1vw, 0.95rem);
|
||||
font-size: clamp(1rem, 1.3vw, 1.24rem);
|
||||
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.c4 { grid-template-columns: repeat(4, 1fr); }
|
||||
.arch-card {
|
||||
background: var(--paper-high);
|
||||
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:
|
||||
0 0 0 0.5px rgba(56,56,49,0.06),
|
||||
0 10px 22px -16px rgba(56,56,49,0.22);
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
gap: 0.3rem;
|
||||
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 {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 600;
|
||||
font-size: clamp(0.82rem, 1.05vw, 0.98rem);
|
||||
font-size: clamp(1.05rem, 1.35vw, 1.28rem);
|
||||
color: var(--ink);
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
|
|
@ -701,24 +679,36 @@ img { display: block; max-width: 100%; }
|
|||
.arch-card .ac-italic {
|
||||
font-family: var(--font-serif);
|
||||
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);
|
||||
margin: 0;
|
||||
}
|
||||
.arch-card .ac-mono {
|
||||
font-family: var(--font-sans);
|
||||
font-size: clamp(0.6rem, 0.76vw, 0.7rem);
|
||||
letter-spacing: 0.04em;
|
||||
font-size: clamp(0.78rem, 0.98vw, 0.9rem);
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--ink-dim);
|
||||
margin: 0.1rem 0 0;
|
||||
margin: 0.15rem 0 0;
|
||||
}
|
||||
@media (max-width: 860px) {
|
||||
.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 .bifrost-logo { margin-bottom: 0.5rem; }
|
||||
.divider-fenja { width: clamp(150px, 18vw, 240px); height: auto; margin-bottom: 0.5rem; opacity: 0.92; }
|
||||
.section-title {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 360;
|
||||
|
|
@ -832,7 +822,15 @@ img { display: block; max-width: 100%; }
|
|||
}
|
||||
|
||||
/* ════════════════════ 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 {
|
||||
padding: clamp(0.6rem, 1.4vw, 1rem);
|
||||
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 30px 60px -28px rgba(56,56,49,0.34),
|
||||
0 6px 16px -8px rgba(56,56,49,0.16);
|
||||
max-width: min(640px, 78vw);
|
||||
max-width: min(820px, 86vw);
|
||||
}
|
||||
.meme-frame img {
|
||||
border-radius: calc(var(--radius-lg) - 6px);
|
||||
max-height: 62vh;
|
||||
max-height: 70vh;
|
||||
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-sandbox .slide-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.6rem); max-width: 920px; }
|
||||
.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-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.6rem); max-width: 980px; align-content: center; }
|
||||
.sandbox-title {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 360;
|
||||
font-size: clamp(2rem, 4.4vw, 3.6rem);
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.022em;
|
||||
font-size: clamp(2.6rem, 5.6vw, 4.6rem);
|
||||
line-height: 1.06;
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--ink);
|
||||
margin: 0;
|
||||
max-width: 20ch;
|
||||
max-width: 18ch;
|
||||
text-wrap: balance;
|
||||
}
|
||||
.sandbox-title em { font-style: italic; font-weight: 460; color: var(--terracotta); }
|
||||
.sandbox-sub {
|
||||
.sandbox-body {
|
||||
font-family: var(--font-serif);
|
||||
font-style: italic;
|
||||
font-size: clamp(1.1rem, 1.8vw, 1.5rem);
|
||||
font-size: clamp(1.15rem, 1.8vw, 1.5rem);
|
||||
line-height: 1.5;
|
||||
color: var(--ink-soft);
|
||||
margin: 0;
|
||||
max-width: 34ch;
|
||||
max-width: 52ch;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
/* ════════════════════ Slide 17 — 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 19 — Closing ════════════════════ */
|
||||
#slide-thanks .hero-text { gap: clamp(1.6rem, 4vh, 2.8rem); }
|
||||
.thanks-title {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 340;
|
||||
font-size: clamp(2.6rem, 6.5vw, 5.5rem);
|
||||
font-size: clamp(2.8rem, 7vw, 6rem);
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--ink);
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -22,11 +22,15 @@
|
|||
const deck = document.getElementById('deck');
|
||||
const nav = document.getElementById('dot-nav');
|
||||
const counter = document.getElementById('counter-now');
|
||||
const counterTotal = document.getElementById('counter-total');
|
||||
const slides = Array.from(document.querySelectorAll('.slide'));
|
||||
if (!deck || !nav || !slides.length) return;
|
||||
|
||||
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 ───────────────────────────────────────
|
||||
const dots = slides.map((slide, i) => {
|
||||
const btn = document.createElement('button');
|
||||
|
|
|
|||
209
index.html
209
index.html
|
|
@ -10,7 +10,7 @@
|
|||
<body>
|
||||
|
||||
<!-- 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">
|
||||
<defs>
|
||||
<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">
|
||||
<img src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
|
||||
</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">
|
||||
|
||||
<!-- ░░░ 1 — Ambient welcome ░░░ -->
|
||||
<section class="slide" id="slide-welcome" data-label="Velkomst">
|
||||
<div class="ambient" aria-hidden="true">
|
||||
<div class="band b1"></div>
|
||||
<div class="band b2"></div>
|
||||
<div class="band b3"></div>
|
||||
<svg class="ambient-arc" viewBox="0 0 1400 500" preserveAspectRatio="xMidYMid meet">
|
||||
<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"/>
|
||||
<!-- ░░░ 1 — Welcome — Project Bifrost arc reveal ░░░ -->
|
||||
<section class="slide hero-slide" id="slide-welcome" data-label="Velkomst">
|
||||
<div class="bifrost-arc" aria-hidden="true">
|
||||
<svg viewBox="0 0 1400 500" preserveAspectRatio="xMidYMid meet">
|
||||
<path class="arc-halo" pathLength="1" d="M 60 420 Q 700 -40 1340 420"/>
|
||||
<path class="arc-main" pathLength="1" d="M 60 420 Q 700 -40 1340 420"/>
|
||||
<path class="arc-thin" pathLength="1" d="M 80 420 Q 700 -20 1320 420"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="slide-inner reveal">
|
||||
<p class="welcome-kicker">Velkommen til</p>
|
||||
<span class="bifrost-logo lg">
|
||||
<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>
|
||||
<h1 class="welcome-headline"><span class="seq">001</span> Bifrost Advisory Meeting</h1>
|
||||
<div class="hero-text reveal">
|
||||
<p class="hero-eyebrow">Velkommen til</p>
|
||||
<h1 class="bifrost-name"><span>Project</span> <span class="accent">Bifrost</span></h1>
|
||||
<p class="hero-sub">001 Bifrost Advisory Meeting</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -168,27 +161,23 @@
|
|||
</section>
|
||||
|
||||
<!-- ░░░ 4 — Fenja AI mission ░░░ -->
|
||||
<section class="slide" id="slide-mission" data-label="Mission">
|
||||
<div class="slide-inner reveal">
|
||||
<div class="brand-lockup">
|
||||
<img class="fenja-mark" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
|
||||
<span class="dot-sep">·</span>
|
||||
<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>
|
||||
<span class="word"><em>Bifrost</em></span>
|
||||
</span>
|
||||
</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">
|
||||
<p class="partner-caption">Støttet af & i samarbejde med</p>
|
||||
<div class="partner-row">
|
||||
<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/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/digitaliseringsstyrelsen.png" alt="Digitaliseringsstyrelsen" /></div>
|
||||
<div class="partner-logo tall"><img src="assets/logos/dcai-logo-white.png" alt="Gefion · DCAI" /></div>
|
||||
</div>
|
||||
<section class="slide mission-slide" id="slide-mission" data-label="Mission">
|
||||
<div class="mission-main reveal">
|
||||
<img class="mission-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
|
||||
<p class="mission-values">Sovereign. Trusted. Innovative.</p>
|
||||
<span class="bifrost-logo projbifrost">
|
||||
<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">Project <em>Bifrost</em></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mission-foot">
|
||||
<p class="partner-caption">Støttet af & i samarbejde med</p>
|
||||
<div class="partner-row mission-logos">
|
||||
<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/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/dcai-logo-white.png" alt="Gefion · DCAI" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -197,20 +186,13 @@
|
|||
<section class="slide" id="slide-q1" data-label="Spørgsmål">
|
||||
<div class="slide-inner reveal">
|
||||
<div class="question">
|
||||
<span class="question-mark">“</span>
|
||||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ░░░ 6 — 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">
|
||||
<p class="pause-clock">10:20 – 10:35</p>
|
||||
<h2 class="pause-word">Pause</h2>
|
||||
|
|
@ -220,7 +202,7 @@
|
|||
|
||||
<!-- ░░░ 7 — Platform architecture ░░░ -->
|
||||
<section class="slide" id="slide-arch" data-label="Arkitektur">
|
||||
<div class="slide-inner">
|
||||
<div class="slide-inner arch-inner">
|
||||
<div class="arch-head reveal">
|
||||
<p class="arch-title">Fenja AI Platform Architecture</p>
|
||||
<p class="arch-sub">Simply Explained</p>
|
||||
|
|
@ -234,17 +216,17 @@
|
|||
<span class="arch-group-caption">Suveræn af design</span>
|
||||
</header>
|
||||
<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-italic">State-of-the-art, open-source</p>
|
||||
<p class="ac-mono">On-prem</p>
|
||||
</article>
|
||||
<article class="arch-card" data-accent="foundation">
|
||||
<article class="arch-card">
|
||||
<p class="ac-name">Wiki</p>
|
||||
<p class="ac-italic">Virksomheds- og domæneviden</p>
|
||||
<p class="ac-mono">Organisation · Afdeling · Personlig</p>
|
||||
</article>
|
||||
<article class="arch-card" data-accent="foundation">
|
||||
<article class="arch-card">
|
||||
<p class="ac-name">Rutiner & hukommelse</p>
|
||||
<p class="ac-italic">Hvordan Fenja arbejder i den</p>
|
||||
<p class="ac-mono">Stand-ups · Faste opgaver · Arbejdshukommelse</p>
|
||||
|
|
@ -258,22 +240,22 @@
|
|||
<span class="arch-group-caption">Hvordan Fenja handler</span>
|
||||
</header>
|
||||
<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-italic">Find og citér</p>
|
||||
<p class="ac-mono">RAG</p>
|
||||
</article>
|
||||
<article class="arch-card" data-accent="tools">
|
||||
<article class="arch-card">
|
||||
<p class="ac-name">Strukturerede data (fx SQL)</p>
|
||||
<p class="ac-italic">Forespørg og udtræk</p>
|
||||
<p class="ac-mono">NL → SQL</p>
|
||||
</article>
|
||||
<article class="arch-card" data-accent="tools">
|
||||
<article class="arch-card">
|
||||
<p class="ac-name">Systemhandlinger</p>
|
||||
<p class="ac-italic">Læs og skriv</p>
|
||||
<p class="ac-mono">API’er · integrationer</p>
|
||||
</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-italic">Jeres specifikke arbejde</p>
|
||||
<p class="ac-mono">Defineret af jer</p>
|
||||
|
|
@ -287,22 +269,22 @@
|
|||
<span class="arch-group-caption">Hvordan Fenja skalerer</span>
|
||||
</header>
|
||||
<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-italic">Planlæg og dirigér</p>
|
||||
<p class="ac-mono">Orkestrering</p>
|
||||
</article>
|
||||
<article class="arch-card" data-accent="agents">
|
||||
<article class="arch-card">
|
||||
<p class="ac-name">Specialister</p>
|
||||
<p class="ac-italic">Fokuseret ekspertise</p>
|
||||
<p class="ac-mono">Subagenter</p>
|
||||
</article>
|
||||
<article class="arch-card" data-accent="agents">
|
||||
<article class="arch-card">
|
||||
<p class="ac-name">Skills</p>
|
||||
<p class="ac-italic">Genbrugelig kapabilitet</p>
|
||||
<p class="ac-mono">Portabel på tværs af specialister</p>
|
||||
</article>
|
||||
<article class="arch-card" data-accent="agents">
|
||||
<article class="arch-card">
|
||||
<p class="ac-name">Workflows</p>
|
||||
<p class="ac-italic">Sammensat af jer</p>
|
||||
<p class="ac-mono">Styret fra ende til ende</p>
|
||||
|
|
@ -313,42 +295,47 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ░░░ 8 — Question ░░░ -->
|
||||
<section class="slide" id="slide-q2" data-label="Spørgsmål">
|
||||
<!-- ░░░ 8 — Demo ░░░ -->
|
||||
<section class="slide solo-slide" id="slide-demo" data-label="Demo">
|
||||
<div class="slide-inner reveal">
|
||||
<div class="question">
|
||||
<span class="question-mark">“</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>
|
||||
<h2 class="solo-word">Demo</h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ░░░ 9 — Question ░░░ -->
|
||||
<section class="slide" id="slide-q3" data-label="Spørgsmål">
|
||||
<section class="slide" id="slide-q2" data-label="Spørgsmål">
|
||||
<div class="slide-inner reveal">
|
||||
<div class="question">
|
||||
<span class="question-mark">“</span>
|
||||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ░░░ 10 — Section divider: Sovereignty ░░░ -->
|
||||
<section class="slide section-divider" id="slide-sov" data-label="Suverænitet">
|
||||
<!-- ░░░ 10 — Roadmap ░░░ -->
|
||||
<section class="slide solo-slide" id="slide-roadmap" data-label="Roadmap">
|
||||
<div class="slide-inner reveal">
|
||||
<span class="bifrost-logo sm">
|
||||
<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">Suverænitet, <em>Sikkerhed</em> & Governance</h2>
|
||||
<h2 class="solo-word">Roadmap</h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ░░░ 11 — Highlight boxes ░░░ -->
|
||||
<!-- ░░░ 11 — Question ░░░ -->
|
||||
<section class="slide" id="slide-q3" data-label="Spørgsmål">
|
||||
<div class="slide-inner reveal">
|
||||
<div class="question">
|
||||
<p class="question-text">“Hvor ser I de største <em>barrierer</em> for praktisk anvendelse af AI i hverdagen?”</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ░░░ 12 — Section divider: Sovereignty ░░░ -->
|
||||
<section class="slide section-divider" id="slide-sov" data-label="Suverænitet">
|
||||
<div class="slide-inner reveal">
|
||||
<img class="divider-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
|
||||
<h2 class="section-title">Suverænitet, Sikkerhed & Governance</h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ░░░ 13 — Highlight boxes ░░░ -->
|
||||
<section class="slide" id="slide-highlights" data-label="Risici">
|
||||
<div class="slide-inner">
|
||||
<div class="highlights-head reveal">
|
||||
|
|
@ -403,24 +390,21 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ░░░ 12 — Meme ░░░ -->
|
||||
<!-- ░░░ 14 — Meme ░░░ -->
|
||||
<section class="slide" id="slide-meme" data-label="Meme">
|
||||
<div class="slide-inner reveal">
|
||||
<h2 class="meme-title">“Sovereign Cloud”</h2>
|
||||
<div class="meme-frame">
|
||||
<img src="assets/img/meme.jpg" alt="Meme" />
|
||||
<img src="assets/img/meme.jpg" alt="Sovereign Cloud meme" />
|
||||
</div>
|
||||
<p class="meme-caption">Lidt selvironi mellem de tunge emner.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ░░░ 13 — Question ░░░ -->
|
||||
<!-- ░░░ 15 — Question ░░░ -->
|
||||
<section class="slide" id="slide-q4" data-label="Spørgsmål">
|
||||
<div class="slide-inner reveal">
|
||||
<div class="question">
|
||||
<span class="question-mark">“</span>
|
||||
<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-text">“Hvad er vigtigst for jer, når AI skal bruges <em>sikkert</em> og ansvarligt i en organisation?”</p>
|
||||
<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>
|
||||
</p>
|
||||
|
|
@ -428,13 +412,10 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ░░░ 14 — Section divider + reserved points ░░░ -->
|
||||
<!-- ░░░ 16 — Section divider + reserved points ░░░ -->
|
||||
<section class="slide section-divider" id="slide-approach" data-label="Vores tilgang">
|
||||
<div class="slide-inner reveal">
|
||||
<span class="bifrost-logo sm">
|
||||
<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>
|
||||
<img class="divider-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
|
||||
<h2 class="section-title">Vores tilgang til <em>Suverænitet</em>, Sikkerhed & Governance</h2>
|
||||
<ul class="approach-points" aria-label="Punkter tilføjes senere">
|
||||
<li><span class="ph-text">Punkt tilføjes</span></li>
|
||||
|
|
@ -445,43 +426,37 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ░░░ 15 — Regulatory sandbox ░░░ -->
|
||||
<!-- ░░░ 17 — Regulatory sandbox ░░░ -->
|
||||
<section class="slide" id="slide-sandbox" data-label="Sandkasse">
|
||||
<div class="slide-inner reveal">
|
||||
<span class="sandbox-badge">Regulatorisk AI-sandkasse</span>
|
||||
<h2 class="sandbox-title">Fenja AI er optaget i <em>Den Regulatoriske AI-sandkasse</em></h2>
|
||||
<p class="sandbox-sub">Vi er en ud af kun to virksomheder, som er blevet optaget i år.</p>
|
||||
<hr class="aurora-rule" style="width:clamp(80px,10vw,140px)" />
|
||||
<div class="partner-row lg">
|
||||
<div class="partner-logo"><img src="assets/logos/digitaliseringsstyrelsen.png" alt="Digitaliseringsstyrelsen" /></div>
|
||||
<div class="slide-inner reveal sandbox-inner">
|
||||
<h2 class="sandbox-title">Regulatorisk AI-sandkasse</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>
|
||||
<div class="partner-row lg sandbox-logos">
|
||||
<div class="partner-logo"><img class="ds-logo" src="assets/logos/digitaliseringsstyrelsen.png" alt="Digitaliseringsstyrelsen" /></div>
|
||||
<div class="partner-logo"><img src="assets/logos/datatilsynet.png" alt="Datatilsynet" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ░░░ 16 — Question ░░░ -->
|
||||
<!-- ░░░ 18 — Question ░░░ -->
|
||||
<section class="slide" id="slide-q5" data-label="Spørgsmål">
|
||||
<div class="slide-inner reveal">
|
||||
<div class="question">
|
||||
<span class="question-mark">“</span>
|
||||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ░░░ 17 — Closing ░░░ -->
|
||||
<section class="slide" id="slide-thanks" data-label="Tak">
|
||||
<div class="ambient" aria-hidden="true">
|
||||
<div class="band b2"></div>
|
||||
<div class="band b3"></div>
|
||||
<svg class="ambient-arc" viewBox="0 0 1400 500" preserveAspectRatio="xMidYMid meet" style="opacity:.4">
|
||||
<path d="M 60 420 Q 700 -40 1340 420" fill="none" stroke="url(#bifrostAurora)"
|
||||
stroke-width="18" stroke-linecap="round" filter="url(#auroraGlow)" opacity="0.5"/>
|
||||
<!-- ░░░ 19 — Closing (inspired by the welcome arc) ░░░ -->
|
||||
<section class="slide hero-slide" id="slide-thanks" data-label="Tak">
|
||||
<div class="bifrost-arc" aria-hidden="true">
|
||||
<svg viewBox="0 0 1400 500" preserveAspectRatio="xMidYMid meet">
|
||||
<path class="arc-halo" pathLength="1" d="M 60 420 Q 700 -40 1340 420"/>
|
||||
<path class="arc-main" pathLength="1" d="M 60 420 Q 700 -40 1340 420"/>
|
||||
<path class="arc-thin" pathLength="1" d="M 80 420 Q 700 -20 1320 420"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="slide-inner reveal">
|
||||
<div class="hero-text reveal">
|
||||
<h2 class="thanks-title">Tak for <em>i dag</em></h2>
|
||||
<div class="brand-lockup">
|
||||
<img class="fenja-mark" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue