From 7a83b06a3f322c7e98c5baaf68fc0fcedcd39fac Mon Sep 17 00:00:00 2001 From: Jonathan Hvid Date: Thu, 18 Jun 2026 12:16:08 +0200 Subject: [PATCH] deck: 17-slide presentation + reusable big-question component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Full-screen CSS scroll-snap deck with all 17 board-meeting slides in Danish: ambient welcome (animated Bifrost aurora), agenda, board intro, mission lockup, platform architecture, four highlight boxes, meme, section dividers, regulatory sandbox, closing — plus a fresh, calm 'pause and think' question treatment used on slides 5/8/9/13/16. Co-Authored-By: Claude Opus 4.8 (1M context) --- assets/css/deck.css | 918 ++++++++++++++++++++++++++++++++++++++++++++ index.html | 526 +++++++++++++++++++++++++ 2 files changed, 1444 insertions(+) create mode 100644 assets/css/deck.css create mode 100644 index.html diff --git a/assets/css/deck.css b/assets/css/deck.css new file mode 100644 index 0000000..975f327 --- /dev/null +++ b/assets/css/deck.css @@ -0,0 +1,918 @@ +/* ============================================================= + Bifrost Advisory Board — deck stylesheet + Full-screen scroll-snap presentation. 17 slides. + Nordic-editorial system; Bifrost aurora used as a quiet accent. + ============================================================= */ + +*, *::before, *::after { box-sizing: border-box; } + +html { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; +} + +html, body { + margin: 0; + padding: 0; + height: 100%; + background: var(--paper); + color: var(--ink); + font-family: var(--font-sans); + line-height: 1.6; +} + +body { + background: + radial-gradient(1200px 800px at 18% 30%, #fffcf7 0%, var(--paper) 55%, #f4efe2 100%); +} + +img { display: block; max-width: 100%; } + +/* ───────────────────── Scroll-snap scaffolding ───────────────────── */ +.deck { + height: 100vh; + height: 100dvh; + overflow-y: scroll; + overflow-x: hidden; + scroll-snap-type: y mandatory; + scroll-behavior: smooth; + scrollbar-width: none; /* Firefox — hide the bar, the dot-nav is the wayfinder */ +} +.deck::-webkit-scrollbar { width: 0; height: 0; } + +.slide { + position: relative; + min-height: 100vh; + min-height: 100dvh; + scroll-snap-align: start; + scroll-snap-stop: always; + display: grid; + place-items: center; + padding: clamp(4rem, 9vh, 7rem) var(--edge) clamp(5rem, 11vh, 8rem); + overflow: hidden; +} + +/* Inner column — keeps content measured and centred */ +.slide-inner { + width: 100%; + max-width: 1180px; + margin-inline: auto; +} + +/* Reveal-on-enter — subtle fade/rise, applied by the IntersectionObserver. + Gated behind `.js` so the deck stays fully visible if the script fails + to load (graceful degradation — content over animation). */ +.js .reveal > * { + opacity: 0; + transform: translateY(22px); + transition: opacity 720ms var(--ease-entrance), transform 720ms var(--ease-entrance); +} +.slide.in-view .reveal > * { opacity: 1; transform: none; } +.slide.in-view .reveal > *:nth-child(2) { transition-delay: 90ms; } +.slide.in-view .reveal > *:nth-child(3) { transition-delay: 170ms; } +.slide.in-view .reveal > *:nth-child(4) { transition-delay: 250ms; } +.slide.in-view .reveal > *:nth-child(5) { transition-delay: 330ms; } + +@media (prefers-reduced-motion: reduce) { + .deck { scroll-behavior: auto; } + .reveal > * { opacity: 1 !important; transform: none !important; transition: none !important; } +} + +/* ───────────────────── Persistent chrome ───────────────────── */ +/* Top-left wordmark — quiet masthead present on every slide */ +.masthead { + position: fixed; + top: clamp(20px, 3vh, 34px); + left: clamp(22px, 3vw, 44px); + z-index: 60; + width: clamp(92px, 9vw, 124px); + opacity: 0.82; + pointer-events: none; +} +.masthead img { width: 100%; height: auto; } + +/* Slide number — quiet top-right counter */ +.slide-counter { + position: fixed; + top: clamp(22px, 3vh, 36px); + right: clamp(24px, 3vw, 46px); + z-index: 60; + font-family: var(--font-serif); + font-style: italic; + font-size: clamp(0.85rem, 1.1vw, 1rem); + color: var(--ink-dim); + letter-spacing: 0.02em; +} +.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 + Danish label tooltip above the dot. Every slide is reachable. */ +.dot-nav-tray { + position: fixed; + left: 0; right: 0; bottom: 0; + height: 96px; + z-index: 45; + pointer-events: none; + background: linear-gradient(to bottom, + rgba(250,246,238,0) 0%, + rgba(250,246,238,0.82) 55%, + rgba(250,246,238,0.96) 100%); +} +.dot-nav { + position: fixed; + bottom: clamp(20px, 3.2vh, 34px); + left: 50%; + transform: translateX(-50%); + display: flex; + gap: clamp(10px, 1.4vw, 20px); + z-index: 50; + max-width: 94vw; + flex-wrap: wrap; + justify-content: center; +} +.dot-btn { + all: unset; + position: relative; + padding: 9px; + cursor: pointer; + display: flex; align-items: center; justify-content: center; +} +.dot-btn .dot { + width: 9px; height: 9px; + border-radius: 50%; + background: transparent; + box-shadow: inset 0 0 0 1.5px var(--ink-dim); + transition: background var(--dur-fast) var(--ease), + box-shadow var(--dur-fast) var(--ease), + transform var(--dur-fast) var(--ease); +} +.dot-btn:hover .dot, +.dot-btn:focus-visible .dot { box-shadow: inset 0 0 0 1.5px var(--ink); transform: scale(1.15); } +.dot-btn.is-active .dot { + background: var(--ink); + box-shadow: inset 0 0 0 1.5px var(--ink); +} +.dot-btn .label { + position: absolute; + bottom: calc(100% - 3px); + left: 50%; + transform: translate(-50%, 4px); + background: var(--paper-high); + color: var(--ink); + font-size: 10.5px; + letter-spacing: 0.16em; + text-transform: uppercase; + font-weight: 600; + padding: 7px 11px; + white-space: nowrap; + pointer-events: none; + opacity: 0; + box-shadow: + 0 0 0 0.5px rgba(56,56,49,0.08), + 0 10px 18px -10px rgba(56,56,49,0.24), + 0 2px 6px -3px rgba(56,56,49,0.1); + transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); +} +.dot-btn:hover .label, +.dot-btn:focus-visible .label { opacity: 1; transform: translate(-50%, 0); } +.dot-btn .label::before { + content: counter(dot) " · "; + color: var(--ink-dim); +} +.dot-nav { counter-reset: dot; } +.dot-btn { counter-increment: dot; } + +/* ───────────────────── Shared editorial primitives ───────────────────── */ +.eyebrow { + font-family: var(--font-sans); + font-size: clamp(0.72rem, 0.95vw, 0.84rem); + letter-spacing: 0.26em; + text-transform: uppercase; + color: var(--ink-dim); + font-weight: 600; + margin: 0 0 var(--space-5); + display: inline-flex; + align-items: center; + gap: 0.85rem; +} +.eyebrow::before { + content: ""; + width: 30px; height: 1px; + background: currentColor; +} +.eyebrow.center { justify-content: center; } + +.slide-title { + font-family: var(--font-serif); + font-weight: 400; + font-size: clamp(2.1rem, 4.4vw, 3.6rem); + line-height: 1.08; + letter-spacing: -0.022em; + color: var(--ink); + margin: 0; + text-wrap: pretty; +} +.slide-title em { font-style: italic; font-weight: 600; color: var(--terracotta); } + +.lede { + font-family: var(--font-serif); + font-style: italic; + font-size: clamp(1.15rem, 1.7vw, 1.5rem); + line-height: 1.5; + color: var(--ink-soft); + max-width: 46ch; + margin: var(--space-5) 0 0; +} + +/* Thin aurora rule — the signature Bifrost accent line */ +.aurora-rule { + height: 2px; + border: 0; + border-radius: 2px; + background: linear-gradient(to right, + var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4)); + opacity: 0.9; +} + +/* ════════════════════ 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. */ +.question { + text-align: center; + max-width: 22ch; /* forces a tall, contemplative measure */ + margin-inline: auto; + display: grid; + justify-items: center; + gap: clamp(2rem, 5vh, 3.25rem); +} +.question-mark { + font-family: var(--font-serif); + font-style: italic; + font-size: clamp(3rem, 7vw, 5.5rem); + line-height: 0.6; + height: 0.5em; + 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.95; + 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(2rem, 4.6vw, 4rem); + line-height: 1.14; + letter-spacing: -0.02em; + color: var(--ink); + margin: 0; + max-width: 18ch; + text-wrap: balance; +} +/* A restrained aurora wash on the emphasised keyword */ +.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)); +} +.question-prompts { + font-family: var(--font-serif); + font-style: italic; + font-size: clamp(1rem, 1.5vw, 1.3rem); + color: var(--ink-soft); + margin: 0; + max-width: 40ch; + line-height: 1.7; +} +.question-prompts span { white-space: nowrap; } +.question-prompts .sep { color: var(--ink-faint); font-style: normal; padding: 0 0.35em; } + +/* ════════════════════ Logo lockups ════════════════════ */ +/* The Bifrost logo: aurora arc above a Newsreader wordmark. Reusable. */ +.bifrost-logo { + display: inline-flex; + flex-direction: column; + align-items: center; + gap: 0.35em; + line-height: 1; +} +.bifrost-logo .arc { + width: 1.7em; + height: 0.85em; + overflow: visible; +} +.bifrost-logo .word { + font-family: var(--font-serif); + font-weight: 420; + letter-spacing: -0.012em; + color: var(--ink); +} +.bifrost-logo .word em { font-style: italic; } +/* size variants driven by font-size on the lockup */ +.bifrost-logo { font-size: clamp(1.6rem, 3.4vw, 2.6rem); } +.bifrost-logo.lg { font-size: clamp(2.4rem, 6vw, 5rem); } +.bifrost-logo.sm { font-size: clamp(1.15rem, 2vw, 1.5rem); } + +/* Fenja · Bifrost combined lockup (mission + closing slides) */ +.brand-lockup { + display: flex; + align-items: center; + justify-content: center; + gap: clamp(1.4rem, 3.5vw, 3rem); + flex-wrap: wrap; +} +.brand-lockup .fenja-mark { width: clamp(150px, 18vw, 270px); height: auto; opacity: 0.92; } +.brand-lockup .dot-sep { + font-family: var(--font-serif); + font-size: clamp(2rem, 4vw, 3.2rem); + color: var(--ink-dim); + line-height: 1; + 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 { + font-family: var(--font-sans); + font-size: clamp(0.74rem, 1vw, 0.9rem); + letter-spacing: 0.34em; + text-transform: uppercase; + color: var(--ink-dim); + font-weight: 600; +} +.welcome-headline { + 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; + color: var(--ink); + margin: 0; + max-width: 18ch; + text-wrap: balance; +} +.welcome-headline .seq { + font-style: italic; + font-weight: 500; + 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; +} +.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; } +} + +/* ════════════════════ Slide 2 — Agenda ════════════════════ */ +#slide-agenda .slide-inner { max-width: 900px; } +.agenda-title { margin-bottom: clamp(2rem, 5vh, 3.25rem); } +.agenda-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } +.agenda-row { + display: grid; + grid-template-columns: minmax(150px, 0.32fr) 1fr; + gap: clamp(1.2rem, 3vw, 2.6rem); + align-items: baseline; + padding: clamp(0.85rem, 1.9vh, 1.25rem) 0; + border-top: 1px solid rgba(56,56,49,0.12); +} +.agenda-row:last-child { border-bottom: 1px solid rgba(56,56,49,0.12); } +.agenda-time { + font-family: var(--font-serif); + font-style: italic; + font-size: clamp(1rem, 1.5vw, 1.3rem); + color: var(--ink-soft); + white-space: nowrap; +} +.agenda-label { + font-family: var(--font-sans); + font-weight: 500; + font-size: clamp(1.05rem, 1.7vw, 1.45rem); + color: var(--ink); + letter-spacing: -0.01em; +} +.agenda-row.is-break .agenda-label { color: var(--ink-dim); font-weight: 400; font-style: normal; } + +/* ════════════════════ Slide 3 — Board / introductions ════════════════════ */ +#slide-board .slide-inner { max-width: 1240px; } +.board-head { text-align: center; margin-bottom: clamp(1.8rem, 4vh, 3rem); } +.board-head .slide-title { margin-inline: auto; max-width: 20ch; } +.board-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: clamp(1rem, 2vw, 2rem) clamp(1rem, 2.2vw, 2.4rem); +} +.board-member { margin: 0; text-align: center; } +.board-portrait { + width: 100%; + aspect-ratio: 1 / 1; + 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; } +.bm-name { + font-family: var(--font-serif); + font-size: clamp(1rem, 1.35vw, 1.22rem); + color: var(--ink); + margin: 0 0 0.15rem; + letter-spacing: -0.01em; +} +.bm-title { + font-family: var(--font-sans); + font-size: clamp(0.74rem, 0.92vw, 0.84rem); + color: var(--ink-soft); + margin: 0 0 0.1rem; + line-height: 1.35; +} +.bm-company { + font-family: var(--font-sans); + font-size: clamp(0.66rem, 0.82vw, 0.76rem); + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--ink-dim); + font-weight: 600; + margin: 0; +} +@media (max-width: 900px) { + .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); } +.mission-values { + font-family: var(--font-serif); + font-weight: 360; + font-size: clamp(1.6rem, 3.4vw, 2.8rem); + 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; +} + +/* Quiet partner-logo row (mission foot + sandbox) */ +.partner-row { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: clamp(1.2rem, 3vw, 2.6rem); +} +.partner-logo { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.4rem; + opacity: 0.7; +} +/* Clearly-labelled placeholder for a missing authority logo */ +.logo-ph { + width: clamp(64px, 7vw, 88px); + height: clamp(40px, 4.4vw, 52px); + border: 1px dashed rgba(56,56,49,0.28); + border-radius: var(--radius-md); + display: grid; + place-items: center; + background: rgba(255,252,247,0.5); +} +.logo-ph svg { width: 46%; height: 46%; opacity: 0.5; } +.partner-name { + font-family: var(--font-sans); + font-size: clamp(0.6rem, 0.78vw, 0.72rem); + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--ink-dim); + font-weight: 600; + text-align: center; + max-width: 12ch; + line-height: 1.3; +} +.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; +} + +/* ════════════════════ Slide 6 — Pause ════════════════════ */ +#slide-pause { } +#slide-pause .slide-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.5rem, 4vh, 2.5rem); position: relative; z-index: 2; } +.pause-word { + font-family: var(--font-serif); + font-weight: 330; + font-size: clamp(3.5rem, 11vw, 9rem); + letter-spacing: -0.03em; + color: var(--ink); + margin: 0; + line-height: 1; +} +.pause-sub { + font-family: var(--font-serif); + font-style: italic; + font-size: clamp(1.1rem, 1.8vw, 1.5rem); + color: var(--ink-soft); + margin: 0; +} +.pause-clock { + font-family: var(--font-sans); + font-size: clamp(0.72rem, 0.95vw, 0.84rem); + letter-spacing: 0.28em; + text-transform: uppercase; + color: var(--ink-dim); + font-weight: 600; +} + +/* ════════════════════ 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-head .arch-title { + font-family: var(--font-serif); + font-weight: 400; + font-size: clamp(1.7rem, 3.2vw, 2.6rem); + letter-spacing: -0.02em; + color: var(--ink); + margin: 0; +} +.arch-head .arch-sub { + font-family: var(--font-serif); + font-style: italic; + font-size: clamp(1rem, 1.5vw, 1.25rem); + color: var(--ink-soft); + margin: 0.35rem 0 0; +} +.arch-frame { + 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); + background: linear-gradient(180deg, rgba(255,252,247,0.6), rgba(246,242,232,0.35)); + display: grid; + gap: clamp(1rem, 2vh, 1.6rem); +} +.arch-frame-label { + position: absolute; + top: 0; left: 50%; + transform: translate(-50%, -50%); + background: var(--paper); + padding: 0 1rem; + font-family: var(--font-sans); + font-size: clamp(0.64rem, 0.82vw, 0.74rem); + letter-spacing: 0.22em; + 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-label { + font-family: var(--font-sans); + font-weight: 700; + font-size: clamp(0.85rem, 1.1vw, 1rem); + 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); + color: var(--ink-soft); +} +.arch-cards { display: grid; gap: clamp(0.6rem, 1.2vw, 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); + 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; + align-content: start; +} +.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); + color: var(--ink); + margin: 0; + line-height: 1.2; +} +.arch-card .ac-italic { + font-family: var(--font-serif); + font-style: italic; + font-size: clamp(0.75rem, 0.95vw, 0.88rem); + 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; + color: var(--ink-dim); + margin: 0.1rem 0 0; +} +@media (max-width: 860px) { + .arch-cards.c3, .arch-cards.c4 { grid-template-columns: repeat(2, 1fr); } +} + +/* ════════════════════ Slide 10 / 14 — Section dividers ════════════════════ */ +.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; } +.section-title { + font-family: var(--font-serif); + font-weight: 360; + font-size: clamp(2.2rem, 5vw, 4.2rem); + line-height: 1.08; + letter-spacing: -0.025em; + color: var(--ink); + margin: 0; + max-width: 16ch; + text-wrap: balance; +} +.section-title em { font-style: italic; font-weight: 460; color: var(--terracotta); } + +/* Reserved-points layout (slide 14) */ +.approach-points { + list-style: none; + margin: clamp(1.5rem, 4vh, 2.5rem) 0 0; + padding: 0; + display: grid; + gap: clamp(0.7rem, 1.6vh, 1.1rem); + width: min(640px, 100%); + text-align: left; +} +.approach-points li { + display: flex; + align-items: center; + gap: 1rem; + padding: clamp(0.85rem, 1.8vh, 1.15rem) clamp(1.1rem, 2vw, 1.5rem); + border: 1px dashed rgba(56,56,49,0.2); + border-radius: var(--radius-md); + color: var(--ink-dim); + background: rgba(255,252,247,0.35); +} +.approach-points li::before { + content: ""; + width: 8px; height: 8px; + border-radius: 50%; + background: linear-gradient(120deg, var(--aurora-2), var(--aurora-4)); + flex: 0 0 auto; +} +.approach-points .ph-text { + font-family: var(--font-serif); + font-style: italic; + font-size: clamp(0.95rem, 1.3vw, 1.1rem); +} + +/* ════════════════════ Slide 11 — Highlight boxes ════════════════════ */ +#slide-highlights .slide-inner { max-width: 1140px; } +.highlights-head { text-align: center; margin-bottom: clamp(1.6rem, 4vh, 2.6rem); } +.highlight-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: clamp(0.9rem, 1.8vw, 1.5rem); +} +.highlight-box { + position: relative; + border-radius: var(--radius-lg); + overflow: hidden; + background: var(--paper-high); + box-shadow: + 0 0 0 0.5px rgba(56,56,49,0.06), + 0 18px 36px -22px rgba(56,56,49,0.28); + display: flex; + flex-direction: column; + min-height: clamp(300px, 44vh, 420px); +} +.highlight-art { + height: 42%; + display: grid; + place-items: center; + position: relative; + overflow: hidden; +} +.highlight-art svg { width: 56%; height: 56%; } +.highlight-box[data-tone="terracotta"] .highlight-art { background: linear-gradient(150deg, #c98a78, #a4553b); } +.highlight-box[data-tone="indigo"] .highlight-art { background: linear-gradient(150deg, #7b91a6, #5a6d83); } +.highlight-box[data-tone="heather"] .highlight-art { background: linear-gradient(150deg, #a594a0, #6e5a86); } +.highlight-box[data-tone="ochre"] .highlight-art { background: linear-gradient(150deg, #d4b478, #b08a3e); } +.highlight-art svg { stroke: rgba(255,252,247,0.92); } +.highlight-body { + padding: clamp(1rem, 1.8vw, 1.4rem); + display: grid; + gap: 0.5rem; + align-content: start; + flex: 1; +} +.highlight-num { + font-family: var(--font-serif); + font-style: italic; + font-size: 0.85rem; + color: var(--ink-dim); +} +.highlight-name { + font-family: var(--font-serif); + font-weight: 400; + font-size: clamp(1.15rem, 1.7vw, 1.45rem); + line-height: 1.12; + letter-spacing: -0.015em; + color: var(--ink); + margin: 0; +} +.highlight-note { + font-family: var(--font-sans); + font-size: clamp(0.78rem, 0.98vw, 0.9rem); + color: var(--ink-soft); + margin: 0; + line-height: 1.45; +} +@media (max-width: 980px) { + .highlight-grid { grid-template-columns: repeat(2, 1fr); } +} + +/* ════════════════════ Slide 12 — Meme ════════════════════ */ +#slide-meme .slide-inner { display: grid; justify-items: center; gap: clamp(1.4rem, 3.5vh, 2.2rem); text-align: center; } +.meme-frame { + padding: clamp(0.6rem, 1.4vw, 1rem); + background: var(--paper-high); + border-radius: var(--radius-lg); + box-shadow: + 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); +} +.meme-frame img { + border-radius: calc(var(--radius-lg) - 6px); + max-height: 62vh; + 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-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; + color: var(--ink); + margin: 0; + max-width: 20ch; + text-wrap: balance; +} +.sandbox-title em { font-style: italic; font-weight: 460; color: var(--terracotta); } +.sandbox-sub { + font-family: var(--font-serif); + font-style: italic; + font-size: clamp(1.1rem, 1.8vw, 1.5rem); + color: var(--ink-soft); + margin: 0; + max-width: 34ch; +} + +/* ════════════════════ 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; } +.thanks-title { + font-family: var(--font-serif); + font-weight: 340; + font-size: clamp(2.6rem, 6.5vw, 5.5rem); + letter-spacing: -0.03em; + color: var(--ink); + margin: 0; + line-height: 1; +} +.thanks-title em { font-style: italic; font-weight: 440; } + +/* Small responsive guard for very short viewports */ +@media (max-height: 640px) { + .slide { padding-top: clamp(3rem, 6vh, 4rem); padding-bottom: clamp(3.5rem, 7vh, 5rem); } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..7a93ce8 --- /dev/null +++ b/index.html @@ -0,0 +1,526 @@ + + + + + +001 Bifrost Advisory Meeting + + + + + + + + + + + Fenja AI + + + +
+ + +
+ +
+

Velkommen til

+ +

001 Bifrost Advisory Meeting

+
+
+ + +
+
+

Agenda

+
    +
  • + 09:00–09:30 + Velkomst og introduktioner +
    • +
  • + 09:30–10:20 + Project Bifrost & Bifrost-portalen +
    • +
  • + 10:20–10:35 + Pause +
    • +
  • + 10:35–11:20 + Features: platformdemo, roadmap og prioritering +
    • +
  • + 11:20–12:15 + Suverænitet, sikkerhed og governance +
    • +
  • + 12:15–13:00 + Frokost +
    • +
+
+
+ + +
+
+
+

Rådgivning & vejledning

+

Mød Fenja AI’s Advisory Board

+
+
+
+
Søren Friis
+
+

Søren Friis

+

IT-direktør

+

DSB

+
+
+
+
William Irving
+
+

William Irving

+

Data- & analysedirektør

+

Norlys

+
+
+
+
Ulla Nygaard Eliassen
+
+

Ulla Nygaard Eliassen

+

Associeret direktør, forbedringsprojekter

+

Novo Nordisk

+
+
+
+
Anna Jessen
+
+

Anna Jessen

+

Direktør, Process Excellence & Digitalisering

+

Novo Nordisk

+
+
+
+
Mathies Laursen
+
+

Mathies Laursen

+

Digitaliseringsdirektør (CDO)

+

Nationalbanken

+
+
+
+
Torben Schütt
+
+

Torben Schütt

+

Kontorchef, Center for Cyber og Digitalisering

+

Forsvarsministeriet

+
+
+
+
Mads Nyborg
+
+

Mads Nyborg

+

Chefkonsulent, Data og Analyse

+

Københavns Kommune

+
+
+
+
Håkon Daltveit
+
+

Håkon Daltveit

+

Chefkonsulent, Data og Analyse

+

Københavns Kommune

+
+
+
+
+
+ + +
+
+
+ Fenja AI + · + +
+

Sovereign. Trusted. Innovative.

+
+
+

Støttet af & i samarbejde med

+
+ + + + + +
+
+
+
+ + +
+
+
+ “ +

Til eftertanke

+

Hvordan gør vi Projekt Bifrost til en success — for jer, for platformen, for dansk AI-suverænitet?

+
+
+
+
+ + +
+ +
+

10:20 – 10:35

+

Pause

+

Vi fortsætter om et kvarter.

+
+
+ + +
+
+
+

Fenja AI Platform Architecture

+

Simply Explained

+
+
+ Everything Client-Managed + +
+
+ Foundation + Suveræn af design +
+
+
+

Sprogmodel

+

State-of-the-art, open-source

+

On-prem

+
+
+

Wiki

+

Virksomheds- og domæneviden

+

Organisation · Afdeling · Personlig

+
+
+

Rutiner & hukommelse

+

Hvordan Fenja arbejder i den

+

Stand-ups · Faste opgaver · Arbejdshukommelse

+
+
+
+ +
+
+ Tools + Hvordan Fenja handler +
+
+
+

Dokumentsøgning

+

Find og citér

+

RAG

+
+
+

Strukturerede data (fx SQL)

+

Forespørg og udtræk

+

NL → SQL

+
+
+

Systemhandlinger

+

Læs og skriv

+

API’er · integrationer

+
+
+

Skræddersyede værktøjer

+

Jeres specifikke arbejde

+

Defineret af jer

+
+
+
+ +
+
+ Agents + Hvordan Fenja skalerer +
+
+
+

Supervisor

+

Planlæg og dirigér

+

Orkestrering

+
+
+

Specialister

+

Fokuseret ekspertise

+

Subagenter

+
+
+

Skills

+

Genbrugelig kapabilitet

+

Portabel på tværs af specialister

+
+
+

Workflows

+

Sammensat af jer

+

Styret fra ende til ende

+
+
+
+
+
+
+ + +
+
+
+ “ +

Til eftertanke

+

Hvilke konkrete AI-features ville skabe størst værdi for dig eller din organisation, hvis I fik adgang til dem i morgen?

+
+
+
+
+ + +
+
+
+ “ +

Til eftertanke

+

Hvor ser I de største barrierer for praktisk anvendelse af AI i hverdagen?

+
+
+
+
+ + +
+
+ +

Suverænitet, Sikkerhed & Governance

+
+
+ + +
+
+
+

Hvorfor suverænitet betyder noget

+

Fire grunde til at tænke sig om

+
+
+
+
+ +
+
+ 01 +

US Cloud Act

+

Amerikansk lovgivning kan give myndigheder adgang til data hos amerikanske udbydere — uanset hvor data fysisk ligger.

+
+
+ +
+
+ +
+
+ 02 +

Geopolitisk uro

+

Skiftende alliancer og handelspolitik gør afhængighed af enkelte landes teknologi til en strategisk risiko.

+
+
+ +
+
+ +
+
+ 03 +

Fable 5 — kun for amerikanske statsborgere

+

Når de mest avancerede modeller forbeholdes bestemte nationaliteter, står resten uden adgang til frontteknologien.

+
+
+ +
+
+ +
+
+ 04 +

Vendor lock-in

+

Bindes I til én leverandørs lukkede økosystem, mister I forhandlingskraft, fleksibilitet og kontrol over fremtiden.

+
+
+
+
+
+ + +
+
+
+ Meme +
+

Lidt selvironi mellem de tunge emner.

+
+
+ + +
+
+
+ “ +

Til eftertanke

+

Hvad er vigtigst for jer, når AI skal bruges sikkert og ansvarligt i en organisation?

+
+

+ Certificeringer?·Mennesker i processen?·At det kører lokalt? +

+
+
+
+ + +
+
+ +

Vores tilgang til Suverænitet, Sikkerhed & Governance

+
    +
  • Punkt tilføjes
    • +
  • Punkt tilføjes
    • +
  • Punkt tilføjes
    • +
  • Punkt tilføjes
    • +
+
+
+ + +
+
+ Regulatorisk AI-sandkasse +

Fenja AI er optaget i Den Regulatoriske AI-sandkasse

+

Vi er en ud af kun to virksomheder, som er blevet optaget i år.

+
+
+ + +
+
+
+ + +
+
+
+ “ +

Til eftertanke

+

Hvilke krav eller bekymringer skal være håndteret, før I ville være trygge ved at bruge en AI-platform på tværs af vigtige forretningsprocesser?

+
+
+
+
+ + +
+ +
+

Tak for i dag

+
+ Fenja AI + · + +
+
+
+ +
+ + + + + + + +