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:
parent
9e156218d7
commit
088de7292f
2 changed files with 19 additions and 9 deletions
|
|
@ -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;
|
||||
|
|
|
|||
10
index.html
10
index.html
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue