deck: fifth round — slide 3/4 positioning, bigger boxes, sandbox logos
- 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:
parent
c748ef1576
commit
7240e4bdc5
2 changed files with 57 additions and 48 deletions
|
|
@ -450,9 +450,11 @@ img { display: block; max-width: 100%; }
|
|||
|
||||
/* ════════════════════ Slide 3 — Board / introductions ════════════════════ */
|
||||
/* Wider container + slightly larger portraits keep the same air between
|
||||
people (they just spread further out). Whole block lifted a touch. */
|
||||
#slide-board .slide-inner { max-width: 1320px; transform: translateY(-9vh); }
|
||||
.board-head { text-align: center; margin-bottom: clamp(1.8rem, 4vh, 3rem); }
|
||||
people (they just spread further out). */
|
||||
#slide-board .slide-inner { max-width: 1320px; }
|
||||
/* 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-grid {
|
||||
display: grid;
|
||||
|
|
@ -521,8 +523,8 @@ img { display: block; max-width: 100%; }
|
|||
gap: clamp(1.4rem, 3.5vh, 2.4rem);
|
||||
}
|
||||
.mission-fenja { width: clamp(240px, 32vw, 460px); height: auto; }
|
||||
/* Values share the logo's box width and indent to where the "Fenja AI"
|
||||
wordmark begins, so the text sits left-aligned under the wordmark. */
|
||||
/* Values left-aligned under the wordmark — same box width as the logo,
|
||||
one line (it may run a touch past the logo's right edge). */
|
||||
.mission-values {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 600;
|
||||
|
|
@ -531,9 +533,8 @@ img { display: block; max-width: 100%; }
|
|||
color: var(--ink);
|
||||
margin: 0;
|
||||
width: clamp(240px, 32vw, 460px);
|
||||
box-sizing: border-box;
|
||||
padding-left: 27%;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* Foot — pinned to the bottom row of the slide, full width so the logos
|
||||
can spread out to the edges. */
|
||||
|
|
@ -562,8 +563,6 @@ img { display: block; max-width: 100%; }
|
|||
DCAI hard right, the rest evenly spaced between. */
|
||||
.mission-logos {
|
||||
width: 100%;
|
||||
max-width: 1500px;
|
||||
margin-inline: auto;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
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. */
|
||||
.partner-logo.tall img { height: clamp(34px, 4vw, 52px); }
|
||||
|
||||
/* Larger, airier variant — sandbox slide: logos ~30% bigger than the
|
||||
mission row, digitaliseringsstyrelsen a further 10% on top. */
|
||||
.partner-row.lg { gap: clamp(2.4rem, 6vw, 5rem); }
|
||||
/* Larger, airier variant — sandbox slide. Logos are wide wordmarks, so
|
||||
they're sized as large as fits side by side (width-capped); ds is the
|
||||
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.ds-logo { height: clamp(91px, 11vw, 143px); } /* +50%, then +30% */
|
||||
.partner-row.lg .partner-logo img.dt-logo { height: clamp(66px, 7.9vw, 101px); } /* +30%, then +30% */
|
||||
/* The two sandbox wordmarks are stacked so each can be large without the
|
||||
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-pause { }
|
||||
|
|
@ -775,13 +784,13 @@ 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: 1200px; }
|
||||
.highlights-head { text-align: center; margin-bottom: clamp(1rem, 2.6vh, 1.8rem); }
|
||||
.highlights-head .slide-title { font-size: clamp(1.5rem, 2.8vw, 2.3rem); }
|
||||
.hl-inner { max-width: 1360px; }
|
||||
.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 {
|
||||
display: grid;
|
||||
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;
|
||||
}
|
||||
.highlight-box {
|
||||
|
|
@ -796,30 +805,30 @@ img { display: block; max-width: 100%; }
|
|||
flex-direction: column;
|
||||
}
|
||||
.highlight-art {
|
||||
height: clamp(108px, 15vh, 150px);
|
||||
height: clamp(120px, 17vh, 172px);
|
||||
flex: 0 0 auto;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
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="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-body {
|
||||
padding: clamp(1rem, 1.6vw, 1.35rem);
|
||||
padding: clamp(1.3rem, 2.1vw, 1.9rem);
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
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-num { font-family: var(--font-serif); font-style: italic; font-size: clamp(1rem, 1.2vw, 1.15rem); color: var(--ink-dim); }
|
||||
.highlight-name {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.1rem, 1.55vw, 1.38rem);
|
||||
line-height: 1.12;
|
||||
font-size: clamp(1.55rem, 2.3vw, 2.1rem);
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.015em;
|
||||
color: var(--ink);
|
||||
margin: 0;
|
||||
|
|
@ -827,25 +836,25 @@ img { display: block; max-width: 100%; }
|
|||
.highlight-lead {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 600;
|
||||
font-size: clamp(0.8rem, 1vw, 0.92rem);
|
||||
line-height: 1.38;
|
||||
font-size: clamp(1.15rem, 1.5vw, 1.45rem);
|
||||
line-height: 1.34;
|
||||
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 {
|
||||
position: relative;
|
||||
padding-left: 0.85rem;
|
||||
padding-left: 1.1rem;
|
||||
font-family: var(--font-sans);
|
||||
font-size: clamp(0.72rem, 0.9vw, 0.82rem);
|
||||
line-height: 1.38;
|
||||
font-size: clamp(1.05rem, 1.35vw, 1.28rem);
|
||||
line-height: 1.36;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
.highlight-bullets li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0; top: 0.5em;
|
||||
width: 5px; height: 5px;
|
||||
left: 0; top: 0.55em;
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--ink-faint);
|
||||
}
|
||||
|
|
@ -865,42 +874,43 @@ img { display: block; max-width: 100%; }
|
|||
box-shadow:
|
||||
0 0 0 0.5px rgba(56,56,49,0.06),
|
||||
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;
|
||||
gap: clamp(0.6rem, 1.2vh, 1rem);
|
||||
gap: clamp(0.85rem, 1.7vh, 1.4rem);
|
||||
align-content: start;
|
||||
text-align: left;
|
||||
}
|
||||
.sol-head {
|
||||
font-family: var(--font-sans);
|
||||
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;
|
||||
line-height: 1.18;
|
||||
color: var(--ink);
|
||||
margin: 0;
|
||||
}
|
||||
.sol-head .sol-num { color: var(--copper); }
|
||||
.sol-lead {
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(0.95rem, 1.18vw, 1.12rem);
|
||||
line-height: 1.32;
|
||||
font-size: clamp(1.4rem, 1.7vw, 1.62rem);
|
||||
line-height: 1.3;
|
||||
color: var(--ink);
|
||||
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 {
|
||||
position: relative;
|
||||
padding-left: 0.95rem;
|
||||
padding-left: 1.15rem;
|
||||
font-family: var(--font-sans);
|
||||
font-size: clamp(0.78rem, 0.95vw, 0.9rem);
|
||||
line-height: 1.42;
|
||||
font-size: clamp(1.25rem, 1.5vw, 1.42rem);
|
||||
line-height: 1.38;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
.sol-list li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0; top: 0.5em;
|
||||
width: 5px; height: 5px;
|
||||
left: 0; top: 0.6em;
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--copper);
|
||||
}
|
||||
|
|
@ -935,7 +945,7 @@ img { display: block; max-width: 100%; }
|
|||
}
|
||||
|
||||
/* ════════════════════ 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 {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 360;
|
||||
|
|
|
|||
|
|
@ -337,8 +337,7 @@
|
|||
<section class="slide" id="slide-highlights" data-label="Risici">
|
||||
<div class="slide-inner hl-inner">
|
||||
<div class="highlights-head reveal">
|
||||
<p class="eyebrow center">Hvorfor suverænitet betyder noget</p>
|
||||
<h2 class="slide-title">Fire grunde til at <em>tænke sig om</em></h2>
|
||||
<h2 class="slide-title">Hvorfor suverænitet er vigtig for <em>AI</em></h2>
|
||||
</div>
|
||||
<div class="highlight-grid reveal">
|
||||
<article class="highlight-box" data-tone="indigo">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue