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

deck: fifth round — slide 3/4 positioning, bigger boxes, sandbox logos

Browse source 
- Slide 3: lift only the title (transform), leaving the portrait grid put.
- Slide 4: values on one line, left-aligned under the logo; drop the
  width cap on the supporter row so the logos spread on wide screens.
- Slide 13: remove the eyebrow, retitle to 'Hvorfor suverænitet er
  vigtig for AI', and enlarge the cards + text (~double).
- Slide 16: enlarge the solution-card text (~double) and re-fit boxes.
- Slide 17: stack the two sandbox wordmarks so each can be large
  (side by side they clip); ds the bigger of the two.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-06-18 15:54:47 +02:00
parent c748ef1576
commit 7240e4bdc5
2 changed files with 57 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
assets/css/deck.css
View file

@ -450,9 +450,11 @@ img { display: block; max-width: 100%; }
/* ════════════════════ Slide 3 — Board / introductions ════════════════════ */ /* ════════════════════ Slide 3 — Board / introductions ════════════════════ */
/* Wider container + slightly larger portraits keep the same air between /* Wider container + slightly larger portraits keep the same air between
people (they just spread further out). Whole block lifted a touch. */ people (they just spread further out). */
#slide-board .slide-inner { max-width: 1320px; transform: translateY(-9vh); } #slide-board .slide-inner { max-width: 1320px; }
.board-head { text-align: center; margin-bottom: clamp(1.8rem, 4vh, 3rem); } /* Only the title is lifted — transform leaves its layout box in place so
the portrait grid stays put. */
.board-head { text-align: center; margin-bottom: clamp(1.8rem, 4vh, 3rem); transform: translateY(-5vh); }
.board-head .slide-title { margin-inline: auto; max-width: 20ch; } .board-head .slide-title { margin-inline: auto; max-width: 20ch; }
.board-grid { .board-grid {
display: grid; display: grid;
@ -521,8 +523,8 @@ img { display: block; max-width: 100%; }
gap: clamp(1.4rem, 3.5vh, 2.4rem); gap: clamp(1.4rem, 3.5vh, 2.4rem);
} }
.mission-fenja { width: clamp(240px, 32vw, 460px); height: auto; } .mission-fenja { width: clamp(240px, 32vw, 460px); height: auto; }
/* Values share the logo's box width and indent to where the "Fenja AI" /* Values left-aligned under the wordmark — same box width as the logo,
wordmark begins, so the text sits left-aligned under the wordmark. */ one line (it may run a touch past the logo's right edge). */
.mission-values { .mission-values {
font-family: var(--font-sans); font-family: var(--font-sans);
font-weight: 600; font-weight: 600;
@ -531,9 +533,8 @@ img { display: block; max-width: 100%; }
color: var(--ink); color: var(--ink);
margin: 0; margin: 0;
width: clamp(240px, 32vw, 460px); width: clamp(240px, 32vw, 460px);
box-sizing: border-box;
padding-left: 27%;
text-align: left; text-align: left;
white-space: nowrap;
} }
/* Foot — pinned to the bottom row of the slide, full width so the logos /* Foot — pinned to the bottom row of the slide, full width so the logos
can spread out to the edges. */ can spread out to the edges. */
@ -562,8 +563,6 @@ img { display: block; max-width: 100%; }
DCAI hard right, the rest evenly spaced between. */ DCAI hard right, the rest evenly spaced between. */
.mission-logos { .mission-logos {
width: 100%; width: 100%;
max-width: 1500px;
margin-inline: auto;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
gap: clamp(1rem, 2.5vw, 2.5rem); gap: clamp(1rem, 2.5vw, 2.5rem);
@ -607,12 +606,22 @@ img { display: block; max-width: 100%; }
optical weight matches the wide wordmark lockups beside them. */ optical weight matches the wide wordmark lockups beside them. */
.partner-logo.tall img { height: clamp(34px, 4vw, 52px); } .partner-logo.tall img { height: clamp(34px, 4vw, 52px); }
/* Larger, airier variant — sandbox slide: logos ~30% bigger than the /* Larger, airier variant — sandbox slide. Logos are wide wordmarks, so
mission row, digitaliseringsstyrelsen a further 10% on top. */ they're sized as large as fits side by side (width-capped); ds is the
.partner-row.lg { gap: clamp(2.4rem, 6vw, 5rem); } bigger of the two. */
.partner-row.lg { gap: clamp(1.5rem, 4vw, 3rem); }
.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(91px, 11vw, 143px); } /* +50%, then +30% */ /* The two sandbox wordmarks are stacked so each can be large without the
.partner-row.lg .partner-logo img.dt-logo { height: clamp(66px, 7.9vw, 101px); } /* +30%, then +30% */ pair overrunning the viewport width. */
.sandbox-logos {
width: 100%;
flex-direction: column;
align-items: center;
flex-wrap: nowrap;
gap: clamp(0.9rem, 2.2vh, 1.6rem);
}
.partner-row.lg .partner-logo img.ds-logo { height: clamp(120px, 14.5vw, 178px); max-width: min(86vw, 828px); }
.partner-row.lg .partner-logo img.dt-logo { height: clamp(84px, 9.8vw, 118px); max-width: min(64vw, 524px); }
/* ════════════════════ Slide 6 — Pause ════════════════════ */ /* ════════════════════ Slide 6 — Pause ════════════════════ */
#slide-pause { } #slide-pause { }
@ -775,13 +784,13 @@ img { display: block; max-width: 100%; }
/* ════════════════════ Slide 13 — risk boxes (icon-art styling) ════════════════════ /* ════════════════════ Slide 13 — risk boxes (icon-art styling) ════════════════════
The original card: a coloured gradient header with a line icon, then a The original card: a coloured gradient header with a line icon, then a
body of number / name / lead / two bullets. */ body of number / name / lead / two bullets. */
.hl-inner { max-width: 1200px; } .hl-inner { max-width: 1360px; }
.highlights-head { text-align: center; margin-bottom: clamp(1rem, 2.6vh, 1.8rem); } .highlights-head { text-align: center; margin-bottom: clamp(1.2rem, 3vh, 2.2rem); }
.highlights-head .slide-title { font-size: clamp(1.5rem, 2.8vw, 2.3rem); } .highlights-head .slide-title { font-size: clamp(2rem, 3.6vw, 3rem); }
.highlight-grid { .highlight-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: clamp(0.9rem, 1.8vw, 1.5rem); gap: clamp(0.9rem, 1.6vw, 1.4rem);
align-items: stretch; align-items: stretch;
} }
.highlight-box { .highlight-box {
@ -796,30 +805,30 @@ img { display: block; max-width: 100%; }
flex-direction: column; flex-direction: column;
} }
.highlight-art { .highlight-art {
height: clamp(108px, 15vh, 150px); height: clamp(120px, 17vh, 172px);
flex: 0 0 auto; flex: 0 0 auto;
display: grid; display: grid;
place-items: center; place-items: center;
overflow: hidden; overflow: hidden;
} }
.highlight-art svg { width: 44%; height: 44%; stroke: rgba(255,252,247,0.92); } .highlight-art svg { width: 42%; height: 42%; stroke: rgba(255,252,247,0.92); }
.highlight-box[data-tone="terracotta"] .highlight-art { background: linear-gradient(150deg, #c98a78, #a4553b); } .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="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="heather"] .highlight-art { background: linear-gradient(150deg, #a594a0, #6e5a86); }
.highlight-box[data-tone="ochre"] .highlight-art { background: linear-gradient(150deg, #d4b478, #b08a3e); } .highlight-box[data-tone="ochre"] .highlight-art { background: linear-gradient(150deg, #d4b478, #b08a3e); }
.highlight-body { .highlight-body {
padding: clamp(1rem, 1.6vw, 1.35rem); padding: clamp(1.3rem, 2.1vw, 1.9rem);
display: grid; display: grid;
gap: 0.4rem; gap: 0.5rem;
align-content: start; align-content: start;
flex: 1; flex: 1;
} }
.highlight-num { font-family: var(--font-serif); font-style: italic; font-size: 0.85rem; color: var(--ink-dim); } .highlight-num { font-family: var(--font-serif); font-style: italic; font-size: clamp(1rem, 1.2vw, 1.15rem); color: var(--ink-dim); }
.highlight-name { .highlight-name {
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 400; font-weight: 400;
font-size: clamp(1.1rem, 1.55vw, 1.38rem); font-size: clamp(1.55rem, 2.3vw, 2.1rem);
line-height: 1.12; line-height: 1.1;
letter-spacing: -0.015em; letter-spacing: -0.015em;
color: var(--ink); color: var(--ink);
margin: 0; margin: 0;
@ -827,25 +836,25 @@ img { display: block; max-width: 100%; }
.highlight-lead { .highlight-lead {
font-family: var(--font-sans); font-family: var(--font-sans);
font-weight: 600; font-weight: 600;
font-size: clamp(0.8rem, 1vw, 0.92rem); font-size: clamp(1.15rem, 1.5vw, 1.45rem);
line-height: 1.38; line-height: 1.34;
color: var(--ink); color: var(--ink);
margin: 0.2rem 0 0; margin: 0.35rem 0 0;
} }
.highlight-bullets { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 0.35rem; } .highlight-bullets { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.highlight-bullets li { .highlight-bullets li {
position: relative; position: relative;
padding-left: 0.85rem; padding-left: 1.1rem;
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: clamp(0.72rem, 0.9vw, 0.82rem); font-size: clamp(1.05rem, 1.35vw, 1.28rem);
line-height: 1.38; line-height: 1.36;
color: var(--ink-soft); color: var(--ink-soft);
} }
.highlight-bullets li::before { .highlight-bullets li::before {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; top: 0.5em; left: 0; top: 0.55em;
width: 5px; height: 5px; width: 6px; height: 6px;
border-radius: 50%; border-radius: 50%;
background: var(--ink-faint); background: var(--ink-faint);
} }
@ -865,42 +874,43 @@ img { display: block; max-width: 100%; }
box-shadow: box-shadow:
0 0 0 0.5px rgba(56,56,49,0.06), 0 0 0 0.5px rgba(56,56,49,0.06),
0 16px 32px -22px rgba(56,56,49,0.26); 0 16px 32px -22px rgba(56,56,49,0.26);
padding: clamp(1.1rem, 1.7vw, 1.55rem) clamp(1rem, 1.5vw, 1.3rem); padding: clamp(1.4rem, 2.1vw, 1.95rem) clamp(1.2rem, 1.7vw, 1.55rem);
display: grid; display: grid;
gap: clamp(0.6rem, 1.2vh, 1rem); gap: clamp(0.85rem, 1.7vh, 1.4rem);
align-content: start; align-content: start;
text-align: left; text-align: left;
} }
.sol-head { .sol-head {
font-family: var(--font-sans); font-family: var(--font-sans);
font-weight: 700; font-weight: 700;
font-size: clamp(0.95rem, 1.25vw, 1.15rem); font-size: clamp(1.4rem, 1.85vw, 1.7rem);
letter-spacing: -0.01em; letter-spacing: -0.01em;
line-height: 1.18;
color: var(--ink); color: var(--ink);
margin: 0; margin: 0;
} }
.sol-head .sol-num { color: var(--copper); } .sol-head .sol-num { color: var(--copper); }
.sol-lead { .sol-lead {
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: clamp(0.95rem, 1.18vw, 1.12rem); font-size: clamp(1.4rem, 1.7vw, 1.62rem);
line-height: 1.32; line-height: 1.3;
color: var(--ink); color: var(--ink);
margin: 0; margin: 0;
} }
.sol-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.45rem, 0.95vh, 0.75rem); } .sol-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.7rem, 1.4vh, 1.05rem); }
.sol-list li { .sol-list li {
position: relative; position: relative;
padding-left: 0.95rem; padding-left: 1.15rem;
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: clamp(0.78rem, 0.95vw, 0.9rem); font-size: clamp(1.25rem, 1.5vw, 1.42rem);
line-height: 1.42; line-height: 1.38;
color: var(--ink-soft); color: var(--ink-soft);
} }
.sol-list li::before { .sol-list li::before {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; top: 0.5em; left: 0; top: 0.6em;
width: 5px; height: 5px; width: 6px; height: 6px;
border-radius: 50%; border-radius: 50%;
background: var(--copper); background: var(--copper);
} }
@ -935,7 +945,7 @@ img { display: block; max-width: 100%; }
} }
/* ════════════════════ Slide 15 — Regulatory sandbox ════════════════════ */ /* ════════════════════ Slide 15 — Regulatory sandbox ════════════════════ */
.sandbox-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.6rem); max-width: 980px; align-content: center; } .sandbox-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.2rem, 3vh, 2rem); max-width: 980px; align-content: center; }
.sandbox-title { .sandbox-title {
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 360; font-weight: 360;

3
index.html
View file

@ -337,8 +337,7 @@
<section class="slide" id="slide-highlights" data-label="Risici"> <section class="slide" id="slide-highlights" data-label="Risici">
<div class="slide-inner hl-inner"> <div class="slide-inner hl-inner">
<div class="highlights-head reveal"> <div class="highlights-head reveal">
<p class="eyebrow center">Hvorfor suverænitet betyder noget</p> <h2 class="slide-title">Hvorfor suverænitet er vigtig for <em>AI</em></h2>
<h2 class="slide-title">Fire grunde til at <em>tænke sig om</em></h2>
</div> </div>
<div class="highlight-grid reveal"> <div class="highlight-grid reveal">
<article class="highlight-box" data-tone="indigo"> <article class="highlight-box" data-tone="indigo">