deck: slide 13 — wider boxes, taller colored header, numbers in color, new title

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-06-18 16:15:53 +02:00
parent 9e156218d7
commit 088de7292f
2 changed files with 19 additions and 9 deletions

View file

@ -786,7 +786,7 @@ img { display: block; max-width: 100%; }
/* Slide 13 risk boxes (icon-art styling)
The original card: a coloured gradient header with a line icon, then a
body of number / name / lead / two bullets. */
.hl-inner { max-width: 1360px; }
.hl-inner { max-width: 1580px; }
.highlights-head { text-align: center; margin-bottom: clamp(1.2rem, 3vh, 2.2rem); }
.highlights-head .slide-title { font-size: clamp(2rem, 3.6vw, 3rem); }
.highlight-grid {
@ -807,13 +807,14 @@ img { display: block; max-width: 100%; }
flex-direction: column;
}
.highlight-art {
height: clamp(120px, 17vh, 172px);
position: relative;
height: clamp(160px, 23vh, 232px);
flex: 0 0 auto;
display: grid;
place-items: center;
overflow: hidden;
}
.highlight-art svg { width: 42%; height: 42%; stroke: rgba(255,252,247,0.92); }
.highlight-art svg { width: 38%; height: 38%; stroke: rgba(255,252,247,0.92); }
.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); }
@ -825,7 +826,16 @@ img { display: block; max-width: 100%; }
align-content: start;
flex: 1;
}
.highlight-num { font-family: var(--font-serif); font-style: italic; font-size: clamp(1rem, 1.2vw, 1.15rem); color: var(--ink-dim); }
.highlight-num {
position: absolute;
top: clamp(0.7rem, 1.4vh, 1.1rem);
left: clamp(0.9rem, 1.5vw, 1.4rem);
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.5rem, 2.1vw, 2rem);
line-height: 1;
color: rgba(255,252,247,0.9);
}
.highlight-name {
font-family: var(--font-serif);
font-weight: 400;

View file

@ -337,15 +337,15 @@
<section class="slide" id="slide-highlights" data-label="Risici">
<div class="slide-inner hl-inner">
<div class="highlights-head reveal">
<h2 class="slide-title">Hvorfor suverænitet er vigtig for <em>AI</em></h2>
<h2 class="slide-title">Hvorfor suverænitet er vigtigt når det gælder <em>AI</em></h2>
</div>
<div class="highlight-grid reveal">
<article class="highlight-box" data-tone="indigo">
<div class="highlight-art">
<span class="highlight-num">01</span>
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16a4 4 0 0 1 0-8 5 5 0 0 1 9.6-1.5A4.5 4.5 0 0 1 18 16z"/><path d="M9 20l1.5-3M13 20l1.5-3"/></svg>
</div>
<div class="highlight-body">
<span class="highlight-num">01</span>
<h3 class="highlight-name">US Cloud Act</h3>
<p class="highlight-lead">Amerikanske myndigheder kan få adgang til dine data. Også når de ligger i EU.</p>
<ul class="highlight-bullets">
@ -357,10 +357,10 @@
<article class="highlight-box" data-tone="terracotta">
<div class="highlight-art">
<span class="highlight-num">02</span>
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.8 2.6 2.8 15.4 0 18M12 3c-2.8 2.6-2.8 15.4 0 18"/></svg>
</div>
<div class="highlight-body">
<span class="highlight-num">02</span>
<h3 class="highlight-name">Geopolitisk uro</h3>
<p class="highlight-lead">Alliancer skifter. Det gør ét lands teknologi til en risiko, du ikke selv styrer.</p>
<ul class="highlight-bullets">
@ -372,10 +372,10 @@
<article class="highlight-box" data-tone="heather">
<div class="highlight-art">
<span class="highlight-num">03</span>
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.4"/><path d="M5.5 20a6.5 6.5 0 0 1 13 0z"/><path d="M17 3l.9 1.9L20 5.3l-1.5 1.4.4 2.1L17 7.8l-1.9 1 .4-2.1L14 5.3l2.1-.4z"/></svg>
</div>
<div class="highlight-body">
<span class="highlight-num">03</span>
<h3 class="highlight-name">Fable 5 / Mythos</h3>
<p class="highlight-lead">En regering kan lukke din AI med ét brev.</p>
<ul class="highlight-bullets">
@ -387,10 +387,10 @@
<article class="highlight-box" data-tone="ochre">
<div class="highlight-art">
<span class="highlight-num">04</span>
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/><circle cx="12" cy="15.5" r="1.2"/></svg>
</div>
<div class="highlight-body">
<span class="highlight-num">04</span>
<h3 class="highlight-name">Vendor lock-in</h3>
<p class="highlight-lead">Lock-in på data var til at leve med. På intelligensen er det en anden sag.</p>
<ul class="highlight-bullets">