From 7240e4bdc55313fb34ab6bf5920f5a92e92100c3 Mon Sep 17 00:00:00 2001 From: Jonathan Hvid Date: Thu, 18 Jun 2026 15:54:47 +0200 Subject: [PATCH] =?UTF-8?q?deck:=20fifth=20round=20=E2=80=94=20slide=203/4?= =?UTF-8?q?=20positioning,=20bigger=20boxes,=20sandbox=20logos?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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) --- assets/css/deck.css | 102 ++++++++++++++++++++++++-------------------- index.html | 3 +- 2 files changed, 57 insertions(+), 48 deletions(-) diff --git a/assets/css/deck.css b/assets/css/deck.css index edf2819..c9cb250 100644 --- a/assets/css/deck.css +++ b/assets/css/deck.css @@ -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; diff --git a/index.html b/index.html index aadb327..5783935 100644 --- a/index.html +++ b/index.html @@ -337,8 +337,7 @@
-

Hvorfor suverænitet betyder noget

-

Fire grunde til at tænke sig om

+

Hvorfor suverænitet er vigtig for AI