diff --git a/assets/css/deck.css b/assets/css/deck.css index 3ed11c9..d12db27 100644 --- a/assets/css/deck.css +++ b/assets/css/deck.css @@ -1,6 +1,6 @@ /* ============================================================= Bifrost Advisory Board — deck stylesheet - Full-screen scroll-snap presentation. 17 slides. + Full-screen scroll-snap presentation. 19 slides. Nordic-editorial system; Bifrost aurora used as a quiet accent. ============================================================= */ @@ -107,7 +107,7 @@ img { display: block; max-width: 100%; } .slide-counter b { font-style: normal; font-weight: 600; color: var(--ink-soft); } /* ───────────────────── Dot-nav (bottom) ───────────────────── - 17 dots, centred. Active = filled ink. Hover/focus floats a + One dot per slide, centred. Active = filled ink. Hover/focus floats a Danish label tooltip above the dot. Every slide is reachable. */ .dot-nav-tray { position: fixed; @@ -126,16 +126,16 @@ img { display: block; max-width: 100%; } left: 50%; transform: translateX(-50%); display: flex; - gap: clamp(10px, 1.4vw, 20px); + gap: clamp(6px, 0.85vw, 13px); z-index: 50; - max-width: 94vw; + max-width: 96vw; flex-wrap: wrap; justify-content: center; } .dot-btn { all: unset; position: relative; - padding: 9px; + padding: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; } @@ -237,41 +237,20 @@ img { display: block; max-width: 100%; } } /* ════════════════════ THE BIG-QUESTION COMPONENT ════════════════════ - Reusable "pause and think" treatment (slides 5, 8, 9, 13, 16). - Large confident serif, centred, lots of air. A short aurora rule and - an aurora-tinted opening mark are the only colour. Deliberately calm. */ + Stripped to just the quoted question — no eyebrow, no rule, no aurora. + Large confident serif, centred, lots of air. A deliberate pause. */ .question { text-align: center; - max-width: min(92vw, 920px); /* generous frame; the text controls the measure */ + max-width: min(94vw, 1100px); margin-inline: auto; display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.6rem); } -.question-mark { - font-family: var(--font-serif); - font-style: italic; - font-size: clamp(2.4rem, 5vw, 4rem); - line-height: 1; - background: linear-gradient(120deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4)); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - opacity: 0.9; - user-select: none; -} -.question-eyebrow { - font-family: var(--font-sans); - font-size: clamp(0.72rem, 0.95vw, 0.82rem); - letter-spacing: 0.3em; - text-transform: uppercase; - color: var(--ink-dim); - font-weight: 600; -} .question-text { font-family: var(--font-serif); font-weight: 360; - font-size: clamp(1.9rem, 3.8vw, 3.4rem); + font-size: clamp(2.5rem, 4.9vw, 4.4rem); /* ~30% larger than before */ line-height: 1.16; letter-spacing: -0.02em; color: var(--ink); @@ -279,30 +258,19 @@ img { display: block; max-width: 100%; } max-width: 100%; text-wrap: balance; } -/* A restrained aurora wash on the emphasised keyword */ +/* Emphasis stays as quiet serif italic — no rainbow. */ .question-text em { font-style: italic; - font-weight: 460; - background: linear-gradient(115deg, var(--aurora-2), var(--aurora-3), var(--aurora-4)); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; -} -.question-rule { - width: clamp(70px, 9vw, 120px); - height: 2px; - border: 0; - border-radius: 2px; - background: linear-gradient(to right, - var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4)); + font-weight: 500; + color: var(--ink); } .question-prompts { font-family: var(--font-serif); font-style: italic; - font-size: clamp(1rem, 1.5vw, 1.3rem); + font-size: clamp(1.05rem, 1.6vw, 1.4rem); color: var(--ink-soft); margin: 0; - max-width: 40ch; + max-width: 44ch; line-height: 1.7; } .question-prompts span { white-space: nowrap; } @@ -351,105 +319,85 @@ img { display: block; max-width: 100%; } transform: translateY(-0.08em); } -/* ════════════════════ Slide 1 — Ambient welcome ════════════════════ */ -#slide-welcome { place-items: center; } -#slide-welcome .slide-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.6rem); } -.welcome-kicker { +/* ════════════════════ Hero slides (1 welcome · 19 closing) ════════════════════ + The old Project Bifrost intro: a single luminous aurora arc spanning the + stage, drawing in on load and breathing slowly so it looks alive when + left running. Centred text sits beneath the apex. */ +.hero-slide { place-items: center; } + +.bifrost-arc { + position: absolute; + inset: 0; + z-index: 0; + display: grid; + place-items: center; + pointer-events: none; + overflow: hidden; +} +.bifrost-arc svg { + width: min(122vw, 1560px); + height: auto; + overflow: visible; + transform: translateY(-7%); +} +.bifrost-arc path { fill: none; stroke-linecap: round; } +.bifrost-arc .arc-halo { stroke: url(#bifrostAurora); stroke-width: 26; filter: url(#auroraGlow); opacity: 0.5; } +.bifrost-arc .arc-main { stroke: url(#bifrostAurora); stroke-width: 3.5; } +.bifrost-arc .arc-thin { stroke: url(#bifrostAurora); stroke-width: 1.2; opacity: 0.6; } + +/* Draw-in: pathLength is normalised to 1 so the dash math is resolution-free. */ +.js .bifrost-arc path { stroke-dasharray: 1; stroke-dashoffset: 1; } +.slide.in-view .bifrost-arc .arc-halo { animation: arc-draw 2.6s var(--ease-entrance) 0.1s forwards, halo-breathe 7s ease-in-out 3s infinite; } +.slide.in-view .bifrost-arc .arc-main { animation: arc-draw 2.6s var(--ease-entrance) 0.35s forwards; } +.slide.in-view .bifrost-arc .arc-thin { animation: arc-draw 2.6s var(--ease-entrance) 0.6s forwards; } +@keyframes arc-draw { to { stroke-dashoffset: 0; } } +@keyframes halo-breathe { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.62; } } + +.hero-text { + position: relative; + z-index: 2; + text-align: center; + display: grid; + justify-items: center; + gap: clamp(0.9rem, 2.5vh, 1.6rem); +} +.hero-eyebrow { font-family: var(--font-sans); - font-size: clamp(0.74rem, 1vw, 0.9rem); + font-size: clamp(0.74rem, 1vw, 0.92rem); letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; + margin: 0; } -.welcome-headline { +/* "Project Bifrost" wordmark — the old reveal's typography. */ +.bifrost-name { font-family: var(--font-serif); - font-weight: 350; - font-size: clamp(2.2rem, 5.2vw, 4.6rem); - line-height: 1.07; - letter-spacing: -0.025em; + font-weight: 330; + font-size: clamp(3rem, 8vw, 6.5rem); + line-height: 1.02; + letter-spacing: -0.03em; color: var(--ink); margin: 0; - max-width: 18ch; - text-wrap: balance; } -.welcome-headline .seq { +.bifrost-name .accent { font-style: italic; - font-weight: 500; + font-weight: 400; background: linear-gradient(115deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } - -/* Ambient aurora background — full-bleed, slow looping. Lives behind - slide 1's content. Three drifting aurora bands + the signature arc. */ -.ambient { - position: absolute; - inset: 0; - z-index: 0; - overflow: hidden; - pointer-events: none; +.hero-sub { + font-family: var(--font-serif); + font-style: italic; + font-size: clamp(1.2rem, 2.1vw, 1.75rem); + color: var(--ink-soft); + margin: 0; } -.ambient .band { - position: absolute; - left: -25%; - width: 150%; - height: 46%; - filter: blur(60px); - opacity: 0.5; - border-radius: 50%; - mix-blend-mode: multiply; - will-change: transform, opacity; -} -.ambient .band.b1 { - top: 8%; - background: radial-gradient(ellipse 50% 60% at 30% 50%, var(--aurora-1) 0%, transparent 70%), - radial-gradient(ellipse 55% 60% at 70% 50%, var(--aurora-2) 0%, transparent 72%); - animation: drift1 26s ease-in-out infinite alternate; -} -.ambient .band.b2 { - top: 30%; - background: radial-gradient(ellipse 55% 60% at 40% 50%, var(--aurora-3) 0%, transparent 70%), - radial-gradient(ellipse 50% 55% at 75% 50%, var(--aurora-4) 0%, transparent 72%); - animation: drift2 32s ease-in-out infinite alternate; - opacity: 0.42; -} -.ambient .band.b3 { - top: 52%; - background: radial-gradient(ellipse 50% 55% at 55% 50%, var(--aurora-2) 0%, transparent 70%), - radial-gradient(ellipse 48% 52% at 25% 50%, var(--aurora-3) 0%, transparent 72%); - animation: drift3 38s ease-in-out infinite alternate; - opacity: 0.34; -} -@keyframes drift1 { - 0% { transform: translate3d(-6%, -4%, 0) scale(1.05); } - 100% { transform: translate3d(8%, 5%, 0) scale(1.18); } -} -@keyframes drift2 { - 0% { transform: translate3d(7%, 3%, 0) scale(1.1); } - 100% { transform: translate3d(-8%, -5%, 0) scale(1.22); } -} -@keyframes drift3 { - 0% { transform: translate3d(-5%, 5%, 0) scale(1.08); } - 100% { transform: translate3d(9%, -4%, 0) scale(1.2); } -} -/* Large ambient arc — the Bifrost bridge, breathing slowly */ -.ambient-arc { - position: absolute; - left: 50%; top: 46%; - width: min(120vw, 1500px); - transform: translate(-50%, -50%); - opacity: 0.6; - animation: arc-breathe 14s ease-in-out infinite; -} -@keyframes arc-breathe { - 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } - 50% { opacity: 0.7; transform: translate(-50%, -51%) scale(1.02); } -} -#slide-welcome .slide-inner { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { - .ambient .band, .ambient-arc { animation: none; } + .js .bifrost-arc path { stroke-dashoffset: 0; } + .slide.in-view .bifrost-arc path { animation: none; } } /* ════════════════════ Slide 2 — Agenda ════════════════════ */ @@ -491,24 +439,28 @@ img { display: block; max-width: 100%; } gap: clamp(1rem, 2vw, 2rem) clamp(1rem, 2.2vw, 2.4rem); } .board-member { margin: 0; text-align: center; } +/* Portraits at half size — sit centred in their cell, names lead. */ .board-portrait { - width: 100%; + width: 50%; aspect-ratio: 1 / 1; + margin: 0 auto 0.9rem; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-3); box-shadow: 0 0 0 0.5px rgba(56,56,49,0.06), 0 14px 28px -18px rgba(56,56,49,0.22); - margin-bottom: 0.85rem; } .board-portrait img { width: 100%; height: 100%; object-fit: cover; } +/* Names at roughly double size — the dominant element of each card. */ .bm-name { font-family: var(--font-serif); - font-size: clamp(1rem, 1.35vw, 1.22rem); + font-size: clamp(1.55rem, 2.5vw, 2.3rem); + line-height: 1.12; color: var(--ink); - margin: 0 0 0.15rem; - letter-spacing: -0.01em; + margin: 0 0 0.3rem; + letter-spacing: -0.015em; + text-wrap: balance; } .bm-title { font-family: var(--font-sans); @@ -530,25 +482,61 @@ img { display: block; max-width: 100%; } .board-grid { grid-template-columns: repeat(2, 1fr); } } -/* ════════════════════ Slide 4 — Mission ════════════════════ */ -#slide-mission .slide-inner { text-align: center; display: grid; justify-items: center; gap: clamp(2rem, 5vh, 3.5rem); } +/* ════════════════════ Slide 4 — Mission ════════════════════ + Big Fenja wordmark centred; values directly beneath in the same ink; + Project Bifrost lockup below. The supporter row is pinned to the very + bottom of the slide, just above the menu. */ +.mission-slide { + grid-template-rows: 1fr auto; + align-items: center; + justify-items: center; + padding-bottom: clamp(4.5rem, 9vh, 6.5rem); +} +.mission-main { + align-self: center; + text-align: center; + display: grid; + justify-items: center; + gap: clamp(1.4rem, 3.5vh, 2.4rem); +} +.mission-fenja { width: clamp(240px, 32vw, 460px); height: auto; } .mission-values { - font-family: var(--font-serif); - font-weight: 360; - font-size: clamp(1.6rem, 3.4vw, 2.8rem); - letter-spacing: -0.01em; + font-family: var(--font-sans); + font-weight: 600; + font-size: clamp(1rem, 1.8vw, 1.5rem); + letter-spacing: 0.01em; color: var(--ink); margin: 0; } -.mission-values b { - font-weight: 400; - background: linear-gradient(115deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4)); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; +.bifrost-logo.projbifrost { margin-top: clamp(0.3rem, 1.5vh, 1rem); } +.bifrost-logo.projbifrost .word em { font-style: italic; } + +/* Foot — pinned to the bottom row of the slide. */ +.mission-foot { + align-self: end; + text-align: center; + display: grid; + justify-items: center; + gap: clamp(1.2rem, 3vh, 2rem); +} +.mission-foot .partner-caption { + font-size: clamp(0.85rem, 1.5vw, 1.2rem); + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--ink-dim); + font-weight: 600; + margin: 0; +} +/* Mission supporter logos — all the same height, bumped ~50%, with more air. */ +.mission-logos { gap: clamp(2.4rem, 6vw, 5.5rem); } +.mission-logos .partner-logo img, +.mission-logos .partner-logo.tall img { + height: clamp(36px, 4.4vw, 56px); + max-width: clamp(150px, 22vw, 280px); + opacity: 0.82; } -/* Quiet partner-logo row (mission foot + sandbox) */ +/* Quiet partner-logo row (sandbox) */ .partner-row { display: flex; align-items: center; @@ -576,19 +564,11 @@ 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 — used where only a couple of logos sit alone - (the regulatory-sandbox slide) and can take more presence. */ -.partner-row.lg { gap: clamp(2rem, 5vw, 4rem); } -.partner-row.lg .partner-logo img { height: clamp(30px, 3.6vw, 46px); opacity: 0.82; } -.mission-foot { margin-top: clamp(0.5rem, 2vh, 1.5rem); } -.mission-foot .partner-caption { - font-size: clamp(0.62rem, 0.8vw, 0.72rem); - letter-spacing: 0.2em; - text-transform: uppercase; - color: var(--ink-faint); - font-weight: 600; - margin: 0 0 1rem; -} +/* 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); } +.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(43px, 5.2vw, 66px); } /* ════════════════════ Slide 6 — Pause ════════════════════ */ #slide-pause { } @@ -619,12 +599,12 @@ img { display: block; max-width: 100%; } } /* ════════════════════ Slide 7 — Platform architecture ════════════════════ */ -#slide-arch .slide-inner { max-width: 1240px; } -.arch-head { text-align: center; margin-bottom: clamp(1.4rem, 3.2vh, 2.4rem); } +.arch-inner { max-width: 1200px; } +.arch-head { text-align: center; margin-bottom: clamp(1.2rem, 3vh, 2.2rem); } .arch-head .arch-title { font-family: var(--font-serif); font-weight: 400; - font-size: clamp(1.7rem, 3.2vw, 2.6rem); + font-size: clamp(2.2rem, 4.2vw, 3.4rem); /* ~30% larger */ letter-spacing: -0.02em; color: var(--ink); margin: 0; @@ -632,7 +612,7 @@ img { display: block; max-width: 100%; } .arch-head .arch-sub { font-family: var(--font-serif); font-style: italic; - font-size: clamp(1rem, 1.5vw, 1.25rem); + font-size: clamp(1.3rem, 2vw, 1.65rem); color: var(--ink-soft); margin: 0.35rem 0 0; } @@ -640,60 +620,58 @@ img { display: block; max-width: 100%; } position: relative; border: 1px solid rgba(56,56,49,0.16); border-radius: var(--radius-xl); - padding: clamp(1.4rem, 2.8vw, 2.4rem) clamp(1.2rem, 2.4vw, 2rem) clamp(1.6rem, 3vw, 2.4rem); + /* More air on the sides + a clear top inset so the corner label sits clean. */ + padding: clamp(2rem, 3.6vw, 3.2rem) clamp(2.2rem, 4.5vw, 4rem) clamp(1.8rem, 3.2vw, 2.6rem); background: linear-gradient(180deg, rgba(255,252,247,0.6), rgba(246,242,232,0.35)); display: grid; - gap: clamp(1rem, 2vh, 1.6rem); + gap: clamp(0.9rem, 1.9vh, 1.5rem); } +/* "Everything Client-Managed" — up in the top-right corner. */ .arch-frame-label { position: absolute; - top: 0; left: 50%; - transform: translate(-50%, -50%); - background: var(--paper); - padding: 0 1rem; + top: clamp(0.9rem, 1.8vw, 1.4rem); + right: clamp(1.4rem, 3vw, 2.4rem); font-family: var(--font-sans); - font-size: clamp(0.64rem, 0.82vw, 0.74rem); - letter-spacing: 0.22em; + font-size: clamp(0.72rem, 0.92vw, 0.84rem); + letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; } .arch-group { display: grid; gap: 0.7rem; } -.arch-group-head { display: flex; align-items: baseline; gap: 0.75rem; } +.arch-group-head { display: flex; align-items: baseline; gap: 0.9rem; } .arch-group-label { font-family: var(--font-sans); font-weight: 700; - font-size: clamp(0.85rem, 1.1vw, 1rem); + font-size: clamp(1.1rem, 1.45vw, 1.32rem); letter-spacing: 0.02em; color: var(--ink); } .arch-group-caption { font-family: var(--font-serif); font-style: italic; - font-size: clamp(0.8rem, 1vw, 0.95rem); + font-size: clamp(1rem, 1.3vw, 1.24rem); color: var(--ink-soft); } -.arch-cards { display: grid; gap: clamp(0.6rem, 1.2vw, 1rem); } +.arch-cards { display: grid; gap: clamp(0.7rem, 1.3vw, 1.1rem); } .arch-cards.c3 { grid-template-columns: repeat(3, 1fr); } .arch-cards.c4 { grid-template-columns: repeat(4, 1fr); } .arch-card { background: var(--paper-high); border-radius: var(--radius-md); - padding: clamp(0.7rem, 1.3vw, 1.05rem) clamp(0.8rem, 1.4vw, 1.1rem); + padding: clamp(1rem, 1.7vw, 1.5rem) clamp(1rem, 1.6vw, 1.35rem); box-shadow: 0 0 0 0.5px rgba(56,56,49,0.06), 0 10px 22px -16px rgba(56,56,49,0.22); display: grid; - gap: 0.2rem; + gap: 0.3rem; align-content: start; + min-height: clamp(118px, 15vh, 158px); /* taller boxes */ } -.arch-card[data-accent="foundation"] { border-top: 2px solid var(--copper); } -.arch-card[data-accent="tools"] { border-top: 2px solid var(--ochre); } -.arch-card[data-accent="agents"] { border-top: 2px solid var(--heather); } .arch-card .ac-name { font-family: var(--font-sans); font-weight: 600; - font-size: clamp(0.82rem, 1.05vw, 0.98rem); + font-size: clamp(1.05rem, 1.35vw, 1.28rem); color: var(--ink); margin: 0; line-height: 1.2; @@ -701,24 +679,36 @@ img { display: block; max-width: 100%; } .arch-card .ac-italic { font-family: var(--font-serif); font-style: italic; - font-size: clamp(0.75rem, 0.95vw, 0.88rem); + font-size: clamp(0.95rem, 1.2vw, 1.14rem); color: var(--ink-soft); margin: 0; } .arch-card .ac-mono { font-family: var(--font-sans); - font-size: clamp(0.6rem, 0.76vw, 0.7rem); - letter-spacing: 0.04em; + font-size: clamp(0.78rem, 0.98vw, 0.9rem); + letter-spacing: 0.03em; color: var(--ink-dim); - margin: 0.1rem 0 0; + margin: 0.15rem 0 0; } @media (max-width: 860px) { .arch-cards.c3, .arch-cards.c4 { grid-template-columns: repeat(2, 1fr); } } -/* ════════════════════ Slide 10 / 14 — Section dividers ════════════════════ */ +/* ════════════════════ Solo word slides (Demo · Roadmap) ════════════════════ */ +.solo-slide .slide-inner { text-align: center; display: grid; justify-items: center; } +.solo-word { + font-family: var(--font-serif); + font-weight: 330; + font-size: clamp(4rem, 13vw, 11rem); + letter-spacing: -0.035em; + line-height: 1; + color: var(--ink); + margin: 0; +} + +/* ════════════════════ Section dividers (Suverænitet · Vores tilgang) ════════════════════ */ .section-divider .slide-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.5rem); } -.section-divider .bifrost-logo { margin-bottom: 0.5rem; } +.divider-fenja { width: clamp(150px, 18vw, 240px); height: auto; margin-bottom: 0.5rem; opacity: 0.92; } .section-title { font-family: var(--font-serif); font-weight: 360; @@ -832,7 +822,15 @@ img { display: block; max-width: 100%; } } /* ════════════════════ Slide 12 — Meme ════════════════════ */ -#slide-meme .slide-inner { display: grid; justify-items: center; gap: clamp(1.4rem, 3.5vh, 2.2rem); text-align: center; } +#slide-meme .slide-inner { display: grid; justify-items: center; gap: clamp(1.2rem, 3vh, 1.9rem); text-align: center; } +.meme-title { + font-family: var(--font-serif); + font-weight: 400; + font-size: clamp(2rem, 4vw, 3.2rem); + letter-spacing: -0.02em; + color: var(--ink); + margin: 0; +} .meme-frame { padding: clamp(0.6rem, 1.4vw, 1rem); background: var(--paper-high); @@ -841,64 +839,43 @@ img { display: block; max-width: 100%; } 0 0 0 0.5px rgba(56,56,49,0.07), 0 30px 60px -28px rgba(56,56,49,0.34), 0 6px 16px -8px rgba(56,56,49,0.16); - max-width: min(640px, 78vw); + max-width: min(820px, 86vw); } .meme-frame img { border-radius: calc(var(--radius-lg) - 6px); - max-height: 62vh; + max-height: 70vh; width: auto; } -.meme-caption { - font-family: var(--font-serif); - font-style: italic; - font-size: clamp(1rem, 1.5vw, 1.25rem); - color: var(--ink-soft); - margin: 0; -} /* ════════════════════ Slide 15 — Regulatory sandbox ════════════════════ */ -#slide-sandbox .slide-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.6rem); max-width: 920px; } -.sandbox-badge { - display: inline-flex; - align-items: center; - gap: 0.6rem; - font-family: var(--font-sans); - font-size: clamp(0.7rem, 0.92vw, 0.82rem); - letter-spacing: 0.22em; - text-transform: uppercase; - font-weight: 600; - color: var(--copper); - padding: 0.5rem 1.1rem; - border: 1px solid rgba(109,140,124,0.4); - border-radius: var(--radius-full); -} +.sandbox-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.6rem); max-width: 980px; align-content: center; } .sandbox-title { font-family: var(--font-serif); font-weight: 360; - font-size: clamp(2rem, 4.4vw, 3.6rem); - line-height: 1.1; - letter-spacing: -0.022em; + font-size: clamp(2.6rem, 5.6vw, 4.6rem); + line-height: 1.06; + letter-spacing: -0.025em; color: var(--ink); margin: 0; - max-width: 20ch; + max-width: 18ch; text-wrap: balance; } -.sandbox-title em { font-style: italic; font-weight: 460; color: var(--terracotta); } -.sandbox-sub { +.sandbox-body { font-family: var(--font-serif); - font-style: italic; - font-size: clamp(1.1rem, 1.8vw, 1.5rem); + font-size: clamp(1.15rem, 1.8vw, 1.5rem); + line-height: 1.5; color: var(--ink-soft); margin: 0; - max-width: 34ch; + max-width: 52ch; + text-wrap: pretty; } -/* ════════════════════ Slide 17 — Closing ════════════════════ */ -#slide-thanks .slide-inner { text-align: center; display: grid; justify-items: center; gap: clamp(2rem, 5vh, 3.5rem); position: relative; z-index: 2; } +/* ════════════════════ Slide 19 — Closing ════════════════════ */ +#slide-thanks .hero-text { gap: clamp(1.6rem, 4vh, 2.8rem); } .thanks-title { font-family: var(--font-serif); font-weight: 340; - font-size: clamp(2.6rem, 6.5vw, 5.5rem); + font-size: clamp(2.8rem, 7vw, 6rem); letter-spacing: -0.03em; color: var(--ink); margin: 0; diff --git a/assets/js/deck.js b/assets/js/deck.js index 51b53c5..8c73023 100644 --- a/assets/js/deck.js +++ b/assets/js/deck.js @@ -22,11 +22,15 @@ const deck = document.getElementById('deck'); const nav = document.getElementById('dot-nav'); const counter = document.getElementById('counter-now'); + const counterTotal = document.getElementById('counter-total'); const slides = Array.from(document.querySelectorAll('.slide')); if (!deck || !nav || !slides.length) return; const pad = (n) => String(n).padStart(2, '0'); + // Keep the "/ NN" total in sync with however many slides exist. + if (counterTotal) counterTotal.textContent = pad(slides.length); + // ─── Build the dot-nav ─────────────────────────────────────── const dots = slides.map((slide, i) => { const btn = document.createElement('button'); diff --git a/index.html b/index.html index f427d18..0be3dac 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ + by every arc lockup and the spanning hero arc. --> Fenja AI - +
- -
-
@@ -168,27 +161,23 @@ -
-
-
- Fenja AI - · - -
-

Sovereign. Trusted. Innovative.

-
-
-

Støttet af & i samarbejde med

-
- - - - - -
+
+
+ Fenja AI +

Sovereign. Trusted. Innovative.

+ +
+
+

Støttet af & i samarbejde med

+
+ + + + +
@@ -197,20 +186,13 @@
- “ -

Til eftertanke

-

Hvordan gør vi Projekt Bifrost til en success — for jer, for platformen, for dansk AI-suverænitet?

-
+

“Hvordan gør vi Projekt Bifrost til en success — for jer, for platformen, for dansk AI-suverænitet?”

-

10:20 – 10:35

Pause

@@ -220,7 +202,7 @@
-
+

Fenja AI Platform Architecture

Simply Explained

@@ -234,17 +216,17 @@ Suveræn af design
-
+

Sprogmodel

State-of-the-art, open-source

On-prem

-
+

Wiki

Virksomheds- og domæneviden

Organisation · Afdeling · Personlig

-
+

Rutiner & hukommelse

Hvordan Fenja arbejder i den

Stand-ups · Faste opgaver · Arbejdshukommelse

@@ -258,22 +240,22 @@ Hvordan Fenja handler
-
+

Dokumentsøgning

Find og citér

RAG

-
+

Strukturerede data (fx SQL)

Forespørg og udtræk

NL → SQL

-
+

Systemhandlinger

Læs og skriv

API’er · integrationer

-
+

Skræddersyede værktøjer

Jeres specifikke arbejde

Defineret af jer

@@ -287,22 +269,22 @@ Hvordan Fenja skalerer
-
+

Supervisor

Planlæg og dirigér

Orkestrering

-
+

Specialister

Fokuseret ekspertise

Subagenter

-
+

Skills

Genbrugelig kapabilitet

Portabel på tværs af specialister

-
+

Workflows

Sammensat af jer

Styret fra ende til ende

@@ -313,42 +295,47 @@
- -
+ +
-
- “ -

Til eftertanke

-

Hvilke konkrete AI-features ville skabe størst værdi for dig eller din organisation, hvis I fik adgang til dem i morgen?

-
-
+

Demo

-
+
- “ -

Til eftertanke

-

Hvor ser I de største barrierer for praktisk anvendelse af AI i hverdagen?

-
+

“Hvilke konkrete AI-features ville skabe størst værdi for dig eller din organisation, hvis I fik adgang til dem i morgen?”

- -
+ +
- -

Suverænitet, Sikkerhed & Governance

+

Roadmap

- + +
+
+
+

“Hvor ser I de største barrierer for praktisk anvendelse af AI i hverdagen?”

+
+
+
+ + +
+
+ Fenja AI +

Suverænitet, Sikkerhed & Governance

+
+
+ +
@@ -403,24 +390,21 @@
- +
+

“Sovereign Cloud”

- Meme + Sovereign Cloud meme
-

Lidt selvironi mellem de tunge emner.

- +
- “ -

Til eftertanke

-

Hvad er vigtigst for jer, når AI skal bruges sikkert og ansvarligt i en organisation?

-
+

“Hvad er vigtigst for jer, når AI skal bruges sikkert og ansvarligt i en organisation?”

Certificeringer?·Mennesker i processen?·At det kører lokalt?

@@ -428,13 +412,10 @@
- +
- + Fenja AI

Vores tilgang til Suverænitet, Sikkerhed & Governance

  • Punkt tilføjes
    • @@ -445,43 +426,37 @@
- +
-
- Regulatorisk AI-sandkasse -

Fenja AI er optaget i Den Regulatoriske AI-sandkasse

-

Vi er en ud af kun to virksomheder, som er blevet optaget i år.

-
-
- +
+

Regulatorisk AI-sandkasse

+

Fenja AI er optaget i Den Regulatoriske AI-sandkasse — et forløb under Datatilsynet og Digitaliseringsstyrelsen, hvor udvalgte virksomheder udvikler og afprøver deres AI i tæt dialog med myndighederne og inden for de regulatoriske rammer. Vi er en ud af kun to virksomheder, som er blevet optaget i år.

+
+
- +
- “ -

Til eftertanke

-

Hvilke krav eller bekymringer skal være håndteret, før I ville være trygge ved at bruge en AI-platform på tværs af vigtige forretningsprocesser?

-
+

“Hvilke krav eller bekymringer skal være håndteret, før I ville være trygge ved at bruge en AI-platform på tværs af vigtige forretningsprocesser?”

- -
-