deck: second round of board-meeting refinements

- Slide 1: lift + enlarge 'Velkommen til', nudge 'Project Bifrost' down,
  change lower line to 'Bifrost Advisory Meeting - 001' at ~2x, upright.
- Slide 3: drop 'Mød' + the eyebrow, plain (non-accent) title, shorten
  to 'Ulla Eliassen', titles/companies +20%.
- Slide 4: remove the Project Bifrost lockup; wider logo spacing; lift
  caption + logos off the bottom; crop Innovationsfonden's padding and
  size it largest; BII -20%, Datatilsynet -10%.
- Question slides: Fenja wordmark above the menu, text lifted ~10%.
- Slide 6: clock +50%.
- Slide 7: 'Suveræn af design' → 'Din AI'.
- Slide 12: sovereignty divider title on one line.
- Slide 17: title +10%, body +20%, Digitaliseringsstyrelsen +10%.
- Slide 19: lift text above the arc, 'Tak for jeres rådgivning', and
  use the Project Bifrost wordmark instead of the Fenja lockup.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-06-18 14:17:00 +02:00
parent eca79752f4
commit b95999bc04
3 changed files with 75 additions and 54 deletions

View file

@ -276,6 +276,20 @@ img { display: block; max-width: 100%; }
.question-prompts span { white-space: nowrap; } .question-prompts span { white-space: nowrap; }
.question-prompts .sep { color: var(--ink-faint); font-style: normal; padding: 0 0.35em; } .question-prompts .sep { color: var(--ink-faint); font-style: normal; padding: 0 0.35em; }
/* Question slides: lift the text ~10% higher and drop a quiet Fenja
wordmark just above the menu. */
.q-slide .slide-inner { transform: translateY(-9vh); }
.q-fenja {
position: absolute;
left: 50%;
bottom: clamp(76px, 13vh, 128px);
transform: translateX(-50%);
width: clamp(96px, 10vw, 138px);
height: auto;
opacity: 0.82;
pointer-events: none;
}
/* ════════════════════ Logo lockups ════════════════════ */ /* ════════════════════ Logo lockups ════════════════════ */
/* The Bifrost logo: aurora arc above a Newsreader wordmark. Reusable. */ /* The Bifrost logo: aurora arc above a Newsreader wordmark. Reusable. */
.bifrost-logo { .bifrost-logo {
@ -363,12 +377,13 @@ img { display: block; max-width: 100%; }
} }
.hero-eyebrow { .hero-eyebrow {
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: clamp(0.74rem, 1vw, 0.92rem); font-size: clamp(1rem, 1.5vw, 1.35rem); /* larger */
letter-spacing: 0.34em; letter-spacing: 0.32em;
text-transform: uppercase; text-transform: uppercase;
color: var(--ink-dim); color: var(--ink-dim);
font-weight: 600; font-weight: 600;
margin: 0; /* Lifted higher above the wordmark. */
margin: 0 0 clamp(1rem, 4vh, 2.6rem);
} }
/* "Project Bifrost" wordmark — the old reveal's typography. */ /* "Project Bifrost" wordmark — the old reveal's typography. */
.bifrost-name { .bifrost-name {
@ -378,7 +393,7 @@ img { display: block; max-width: 100%; }
line-height: 1.02; line-height: 1.02;
letter-spacing: -0.03em; letter-spacing: -0.03em;
color: var(--ink); color: var(--ink);
margin: 0; margin: clamp(0.4rem, 1.8vh, 1.4rem) 0 0; /* nudged slightly lower */
} }
.bifrost-name .accent { .bifrost-name .accent {
font-style: italic; font-style: italic;
@ -390,8 +405,9 @@ img { display: block; max-width: 100%; }
} }
.hero-sub { .hero-sub {
font-family: var(--font-serif); font-family: var(--font-serif);
font-style: italic; font-style: normal; /* italic removed */
font-size: clamp(1.2rem, 2.1vw, 1.75rem); font-size: clamp(2.4rem, 4.2vw, 3.5rem); /* ~double */
letter-spacing: -0.02em;
color: var(--ink-soft); color: var(--ink-soft);
margin: 0; margin: 0;
} }
@ -464,14 +480,14 @@ img { display: block; max-width: 100%; }
} }
.bm-title { .bm-title {
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: clamp(0.74rem, 0.92vw, 0.84rem); font-size: clamp(0.89rem, 1.1vw, 1.01rem); /* +20% */
color: var(--ink-soft); color: var(--ink-soft);
margin: 0 0 0.1rem; margin: 0 0 0.15rem;
line-height: 1.35; line-height: 1.35;
} }
.bm-company { .bm-company {
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: clamp(0.66rem, 0.82vw, 0.76rem); font-size: clamp(0.79rem, 0.98vw, 0.91rem); /* +20% */
letter-spacing: 0.14em; letter-spacing: 0.14em;
text-transform: uppercase; text-transform: uppercase;
color: var(--ink-dim); color: var(--ink-dim);
@ -490,7 +506,7 @@ img { display: block; max-width: 100%; }
grid-template-rows: 1fr auto; grid-template-rows: 1fr auto;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
padding-bottom: clamp(4.5rem, 9vh, 6.5rem); padding-bottom: clamp(6rem, 12vh, 9rem); /* lift the supporter row off the bottom */
} }
.mission-main { .mission-main {
align-self: center; align-self: center;
@ -508,16 +524,13 @@ img { display: block; max-width: 100%; }
color: var(--ink); color: var(--ink);
margin: 0; margin: 0;
} }
.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. */ /* Foot — pinned to the bottom row of the slide. */
.mission-foot { .mission-foot {
align-self: end; align-self: end;
text-align: center; text-align: center;
display: grid; display: grid;
justify-items: center; justify-items: center;
gap: clamp(1.2rem, 3vh, 2rem); gap: clamp(1.8rem, 4.5vh, 3rem); /* lift the caption a little off the logos */
} }
.mission-foot .partner-caption { .mission-foot .partner-caption {
font-size: clamp(0.85rem, 1.5vw, 1.2rem); font-size: clamp(0.85rem, 1.5vw, 1.2rem);
@ -527,14 +540,19 @@ img { display: block; max-width: 100%; }
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
} }
/* Mission supporter logos — all the same height, bumped ~50%, with more air. */ /* Mission supporter logos wide spacing between them, with per-logo
.mission-logos { gap: clamp(2.4rem, 6vw, 5.5rem); } size adjustments. Innovationsfonden is the largest footprint, BII and
.mission-logos .partner-logo img, Datatilsynet held back. (Innovationsfonden's PNG is cropped tight so its
.mission-logos .partner-logo.tall img { height reads true.) */
height: clamp(36px, 4.4vw, 56px); .mission-logos { gap: clamp(2.75rem, 5.8vw, 5.8rem); }
max-width: clamp(150px, 22vw, 280px); .mission-logos .partner-logo img {
height: clamp(34px, 4vw, 48px);
max-width: clamp(140px, 20vw, 250px);
opacity: 0.82; opacity: 0.82;
} }
.mission-logos .partner-logo img.logo-inf { height: clamp(40px, 4.8vw, 58px); max-width: clamp(200px, 28vw, 320px); } /* +50% footprint */
.mission-logos .partner-logo img.logo-bii { height: clamp(27px, 3.2vw, 40px); } /* -20% */
.mission-logos .partner-logo img.logo-dt { height: clamp(30px, 3.6vw, 45px); } /* -10% */
/* Quiet partner-logo row (sandbox) */ /* Quiet partner-logo row (sandbox) */
.partner-row { .partner-row {
@ -568,7 +586,7 @@ img { display: block; max-width: 100%; }
mission row, digitaliseringsstyrelsen a further 10% on top. */ mission row, digitaliseringsstyrelsen a further 10% on top. */
.partner-row.lg { gap: clamp(2.4rem, 6vw, 5rem); } .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 { height: clamp(39px, 4.7vw, 60px); opacity: 0.85; }
.partner-row.lg .partner-logo img.ds-logo { height: clamp(43px, 5.2vw, 66px); } .partner-row.lg .partner-logo img.ds-logo { height: clamp(47px, 5.7vw, 73px); }
/* ════════════════════ Slide 6 — Pause ════════════════════ */ /* ════════════════════ Slide 6 — Pause ════════════════════ */
#slide-pause { } #slide-pause { }
@ -591,7 +609,7 @@ img { display: block; max-width: 100%; }
} }
.pause-clock { .pause-clock {
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: clamp(0.72rem, 0.95vw, 0.84rem); font-size: clamp(1.08rem, 1.45vw, 1.26rem); /* +50% */
letter-spacing: 0.28em; letter-spacing: 0.28em;
text-transform: uppercase; text-transform: uppercase;
color: var(--ink-dim); color: var(--ink-dim);
@ -721,6 +739,12 @@ img { display: block; max-width: 100%; }
text-wrap: balance; text-wrap: balance;
} }
.section-title em { font-style: italic; font-weight: 460; color: var(--terracotta); } .section-title em { font-style: italic; font-weight: 460; color: var(--terracotta); }
/* One-line variant (Suverænitet divider) — fits on a single line. */
.section-title.one-line {
max-width: none;
white-space: nowrap;
font-size: clamp(1.3rem, 3.1vw, 2.9rem);
}
/* Reserved-points layout (slide 14) */ /* Reserved-points layout (slide 14) */
.approach-points { .approach-points {
@ -852,7 +876,7 @@ img { display: block; max-width: 100%; }
.sandbox-title { .sandbox-title {
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 360; font-weight: 360;
font-size: clamp(2.6rem, 5.6vw, 4.6rem); font-size: clamp(2.86rem, 6.2vw, 5.1rem); /* +10% */
line-height: 1.06; line-height: 1.06;
letter-spacing: -0.025em; letter-spacing: -0.025em;
color: var(--ink); color: var(--ink);
@ -862,7 +886,7 @@ img { display: block; max-width: 100%; }
} }
.sandbox-body { .sandbox-body {
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-size: clamp(1.38rem, 2.2vw, 1.8rem); /* +20% */
line-height: 1.5; line-height: 1.5;
color: var(--ink-soft); color: var(--ink-soft);
margin: 0; margin: 0;
@ -871,7 +895,9 @@ img { display: block; max-width: 100%; }
} }
/* ════════════════════ Slide 19 — Closing ════════════════════ */ /* ════════════════════ Slide 19 — Closing ════════════════════ */
#slide-thanks .hero-text { gap: clamp(1.6rem, 4vh, 2.8rem); } /* Closing text lifted ~20% so it sits clear above the aurora arc. */
#slide-thanks .hero-text { gap: clamp(1.2rem, 3vh, 2rem); }
.thanks-text { transform: translateY(-19vh); }
.thanks-title { .thanks-title {
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 340; font-weight: 340;
@ -882,6 +908,8 @@ img { display: block; max-width: 100%; }
line-height: 1; line-height: 1;
} }
.thanks-title em { font-style: italic; font-weight: 440; } .thanks-title em { font-style: italic; font-weight: 440; }
/* "Project Bifrost" wordmark on the closing slide — smaller than slide 1. */
.thanks-bifrost { font-size: clamp(1.8rem, 4vw, 3.2rem); margin: 0; }
/* Small responsive guard for very short viewports */ /* Small responsive guard for very short viewports */
@media (max-height: 640px) { @media (max-height: 640px) {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View file

@ -47,7 +47,7 @@
<div class="hero-text reveal"> <div class="hero-text reveal">
<p class="hero-eyebrow">Velkommen til</p> <p class="hero-eyebrow">Velkommen til</p>
<h1 class="bifrost-name"><span>Project</span> <span class="accent">Bifrost</span></h1> <h1 class="bifrost-name"><span>Project</span> <span class="accent">Bifrost</span></h1>
<p class="hero-sub">001 Bifrost Advisory Meeting</p> <p class="hero-sub">Bifrost Advisory Meeting - 001</p>
</div> </div>
</section> </section>
@ -88,8 +88,7 @@
<section class="slide" id="slide-board" data-label="Introduktioner"> <section class="slide" id="slide-board" data-label="Introduktioner">
<div class="slide-inner"> <div class="slide-inner">
<div class="board-head reveal"> <div class="board-head reveal">
<p class="eyebrow center">Rådgivning &amp; vejledning</p> <h2 class="slide-title">Fenja AI&rsquo;s Advisory Board</h2>
<h2 class="slide-title">Mød Fenja AI&rsquo;s <em>Advisory Board</em></h2>
</div> </div>
<div class="board-grid reveal"> <div class="board-grid reveal">
<figure class="board-member"> <figure class="board-member">
@ -109,9 +108,9 @@
</figcaption> </figcaption>
</figure> </figure>
<figure class="board-member"> <figure class="board-member">
<div class="board-portrait"><img src="assets/board/ulla-nygaard-eliassen.jpg" alt="Ulla Nygaard Eliassen" /></div> <div class="board-portrait"><img src="assets/board/ulla-nygaard-eliassen.jpg" alt="Ulla Eliassen" /></div>
<figcaption> <figcaption>
<p class="bm-name">Ulla Nygaard Eliassen</p> <p class="bm-name">Ulla Eliassen</p>
<p class="bm-title">Associeret direktør, forbedringsprojekter</p> <p class="bm-title">Associeret direktør, forbedringsprojekter</p>
<p class="bm-company">Novo Nordisk</p> <p class="bm-company">Novo Nordisk</p>
</figcaption> </figcaption>
@ -165,17 +164,13 @@
<div class="mission-main reveal"> <div class="mission-main reveal">
<img class="mission-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" /> <img class="mission-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
<p class="mission-values">Sovereign. Trusted. Innovative.</p> <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>
<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 mission-logos"> <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 class="logo-inf" 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 class="logo-bii" 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 class="logo-dt" 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"><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>
@ -183,12 +178,13 @@
</section> </section>
<!-- ░░░ 5 — Big question ░░░ --> <!-- ░░░ 5 — Big question ░░░ -->
<section class="slide" id="slide-q1" data-label="Spørgsmål"> <section class="slide q-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">
<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-text">&ldquo;Hvordan gør vi Projekt Bifrost til en <em>success</em> — for jer, for platformen, for dansk AI-suverænitet?&rdquo;</p>
</div> </div>
</div> </div>
<img class="q-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
</section> </section>
<!-- ░░░ 6 — Pause ░░░ --> <!-- ░░░ 6 — Pause ░░░ -->
@ -213,7 +209,7 @@
<section class="arch-group"> <section class="arch-group">
<header class="arch-group-head"> <header class="arch-group-head">
<span class="arch-group-label">Foundation</span> <span class="arch-group-label">Foundation</span>
<span class="arch-group-caption">Suveræn af design</span> <span class="arch-group-caption">Din AI</span>
</header> </header>
<div class="arch-cards c3"> <div class="arch-cards c3">
<article class="arch-card"> <article class="arch-card">
@ -303,12 +299,13 @@
</section> </section>
<!-- ░░░ 9 — Question ░░░ --> <!-- ░░░ 9 — Question ░░░ -->
<section class="slide" id="slide-q2" data-label="Spørgsmål"> <section class="slide q-slide" id="slide-q2" data-label="Spørgsmål">
<div class="slide-inner reveal"> <div class="slide-inner reveal">
<div class="question"> <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> <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>
</div> </div>
<img class="q-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
</section> </section>
<!-- ░░░ 10 — Roadmap ░░░ --> <!-- ░░░ 10 — Roadmap ░░░ -->
@ -319,19 +316,20 @@
</section> </section>
<!-- ░░░ 11 — Question ░░░ --> <!-- ░░░ 11 — Question ░░░ -->
<section class="slide" id="slide-q3" data-label="Spørgsmål"> <section class="slide q-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">
<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-text">&ldquo;Hvor ser I de største <em>barrierer</em> for praktisk anvendelse af AI i hverdagen?&rdquo;</p>
</div> </div>
</div> </div>
<img class="q-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
</section> </section>
<!-- ░░░ 12 — 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">
<img class="divider-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" /> <img class="divider-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
<h2 class="section-title">Suverænitet, Sikkerhed &amp; Governance</h2> <h2 class="section-title one-line">Suverænitet, Sikkerhed &amp; Governance</h2>
</div> </div>
</section> </section>
@ -401,7 +399,7 @@
</section> </section>
<!-- ░░░ 15 — Question ░░░ --> <!-- ░░░ 15 — Question ░░░ -->
<section class="slide" id="slide-q4" data-label="Spørgsmål"> <section class="slide q-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">
<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-text">&ldquo;Hvad er vigtigst for jer, når AI skal bruges <em>sikkert</em> og ansvarligt i en organisation?&rdquo;</p>
@ -410,6 +408,7 @@
</p> </p>
</div> </div>
</div> </div>
<img class="q-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
</section> </section>
<!-- ░░░ 16 — Section divider + reserved points ░░░ --> <!-- ░░░ 16 — Section divider + reserved points ░░░ -->
@ -439,12 +438,13 @@
</section> </section>
<!-- ░░░ 18 — Question ░░░ --> <!-- ░░░ 18 — Question ░░░ -->
<section class="slide" id="slide-q5" data-label="Spørgsmål"> <section class="slide q-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">
<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-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>
</div> </div>
</div> </div>
<img class="q-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
</section> </section>
<!-- ░░░ 19 — Closing (inspired by the welcome arc) ░░░ --> <!-- ░░░ 19 — Closing (inspired by the welcome arc) ░░░ -->
@ -456,16 +456,9 @@
<path class="arc-thin" pathLength="1" d="M 80 420 Q 700 -20 1320 420"/> <path class="arc-thin" pathLength="1" d="M 80 420 Q 700 -20 1320 420"/>
</svg> </svg>
</div> </div>
<div class="hero-text reveal"> <div class="hero-text reveal thanks-text">
<h2 class="thanks-title">Tak for <em>i dag</em></h2> <h2 class="thanks-title">Tak for <em>jeres rådgivning</em></h2>
<div class="brand-lockup"> <p class="bifrost-name thanks-bifrost"><span>Project</span> <span class="accent">Bifrost</span></p>
<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>
</div> </div>
</section> </section>