diff --git a/assets/css/deck.css b/assets/css/deck.css index 2dad36f..edf2819 100644 --- a/assets/css/deck.css +++ b/assets/css/deck.css @@ -383,7 +383,7 @@ img { display: block; max-width: 100%; } color: var(--ink-dim); font-weight: 600; /* Lifted higher above the wordmark. */ - margin: 0 0 clamp(1.8rem, 5.5vh, 3.6rem); + margin: 0 0 clamp(2.8rem, 8.5vh, 5.5rem); } /* "Project Bifrost" wordmark — the old reveal's typography. */ .bifrost-name { @@ -412,7 +412,7 @@ img { display: block; max-width: 100%; } text-transform: uppercase; font-weight: 600; color: var(--ink-dim); - margin: 0; + margin: clamp(1.2rem, 3.5vh, 2.4rem) 0 0; /* dropped a little lower */ } @media (prefers-reduced-motion: reduce) { .js .bifrost-arc path { stroke-dashoffset: 0; } @@ -451,7 +451,7 @@ 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(-4vh); } +#slide-board .slide-inner { max-width: 1320px; transform: translateY(-9vh); } .board-head { text-align: center; margin-bottom: clamp(1.8rem, 4vh, 3rem); } .board-head .slide-title { margin-inline: auto; max-width: 20ch; } .board-grid { @@ -521,17 +521,26 @@ 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. */ .mission-values { font-family: var(--font-sans); font-weight: 600; - font-size: clamp(1.4rem, 2.5vw, 2.1rem); /* +40% */ + font-size: clamp(1.36rem, 2.42vw, 2.04rem); /* +40%, then -3% */ letter-spacing: 0.01em; color: var(--ink); margin: 0; + width: clamp(240px, 32vw, 460px); + box-sizing: border-box; + padding-left: 27%; + text-align: left; } -/* Foot — pinned to the bottom row of the slide. */ +/* Foot — pinned to the bottom row of the slide, full width so the logos + can spread out to the edges. */ .mission-foot { align-self: end; + justify-self: stretch; + width: 100%; text-align: center; display: grid; justify-items: center; @@ -549,10 +558,12 @@ img { display: block; max-width: 100%; } size adjustments. Innovationsfonden is the largest footprint, BII and Datatilsynet held back. (Innovationsfonden's PNG is cropped tight so its height reads true.) */ -/* Spread the logos across the full width — they push out to the sides - with maximum air between them. */ +/* Spread the logos across the full width — Innovationsfonden hard left, + 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); @@ -564,9 +575,9 @@ img { display: block; max-width: 100%; } } .mission-logos .partner-logo img.logo-inf { height: clamp(40px, 4.8vw, 58px); max-width: clamp(200px, 26vw, 300px); } /* +50% footprint */ .mission-logos .partner-logo img.logo-bii { height: clamp(27px, 3.2vw, 40px); } /* -20% */ -.mission-logos .partner-logo img.logo-dt { height: clamp(32px, 3.8vw, 47px); } /* -10%, then +5% */ -.mission-logos .partner-logo img.logo-ds { height: clamp(37px, 4.4vw, 53px); } /* +10% */ -.mission-logos .partner-logo img.logo-dcai { height: clamp(37px, 4.4vw, 53px); } /* +10% */ +.mission-logos .partner-logo img.logo-dt { height: clamp(34px, 4vw, 49px); } /* +5% */ +.mission-logos .partner-logo img.logo-ds { height: clamp(43px, 5.1vw, 61px); } /* +15% */ +.mission-logos .partner-logo img.logo-dcai { height: clamp(43px, 5.1vw, 61px); } /* +15% */ /* Quiet partner-logo row (sandbox) */ .partner-row { @@ -600,8 +611,8 @@ img { display: block; max-width: 100%; } 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(70px, 8.5vw, 110px); } /* +50% */ -.partner-row.lg .partner-logo img.dt-logo { height: clamp(51px, 6.1vw, 78px); } /* +30% */ +.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% */ /* ════════════════════ Slide 6 — Pause ════════════════════ */ #slide-pause { } @@ -761,84 +772,140 @@ img { display: block; max-width: 100%; } font-size: clamp(1.55rem, 3.85vw, 3.6rem); } -/* ════════════════════ Highlight / solution boxes (slides 13 & 16) ════════════════════ - Text-forward cards: number + title, a bold lead, three supporting - bullets. A coloured top rule carries the category; the green-washed - `.solutions` variant signals "these are the answers". */ -.hl-inner { max-width: 1460px; } -.highlights-head { text-align: center; margin-bottom: clamp(0.8rem, 2.2vh, 1.6rem); } +/* ════════════════════ 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); } .highlight-grid { display: grid; grid-template-columns: repeat(4, 1fr); - gap: clamp(0.8rem, 1.5vw, 1.4rem); + gap: clamp(0.9rem, 1.8vw, 1.5rem); align-items: stretch; } .highlight-box { - --tone: var(--ink-dim); + position: relative; + border-radius: var(--radius-lg); + overflow: hidden; background: var(--paper-high); - border-radius: var(--radius-md); - border-top: 3px solid var(--tone); 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(1rem, 1.6vw, 1.45rem) clamp(1rem, 1.5vw, 1.3rem) clamp(1.1rem, 1.8vw, 1.5rem); + 0 18px 36px -22px rgba(56,56,49,0.28); + display: flex; + flex-direction: column; +} +.highlight-art { + height: clamp(108px, 15vh, 150px); + flex: 0 0 auto; display: grid; - gap: clamp(0.5rem, 1vh, 0.85rem); + place-items: center; + overflow: hidden; +} +.highlight-art svg { width: 44%; height: 44%; 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); + display: grid; + gap: 0.4rem; align-content: start; - text-align: left; + flex: 1; } -.highlight-box[data-tone="indigo"] { --tone: var(--indigo); } -.highlight-box[data-tone="terracotta"] { --tone: var(--terracotta); } -.highlight-box[data-tone="heather"] { --tone: var(--heather); } -.highlight-box[data-tone="ochre"] { --tone: var(--ochre); } -.highlight-box[data-tone="copper"] { --tone: var(--copper); } -/* Solutions — quiet green wash so the slide reads as the answers. */ -.highlight-grid.solutions .highlight-box { - --tone: var(--copper); - background: linear-gradient(180deg, rgba(109,140,124,0.12), rgba(255,252,247,0.65)); -} -.hl-head { - font-family: var(--font-sans); - font-weight: 700; - font-size: clamp(0.92rem, 1.2vw, 1.12rem); - letter-spacing: -0.01em; - color: var(--ink); - margin: 0; -} -.hl-head .hl-num { color: var(--tone); } -.hl-lead { +.highlight-num { font-family: var(--font-serif); font-style: italic; font-size: 0.85rem; color: var(--ink-dim); } +.highlight-name { font-family: var(--font-serif); - font-size: clamp(0.9rem, 1.12vw, 1.06rem); - line-height: 1.32; + font-weight: 400; + font-size: clamp(1.1rem, 1.55vw, 1.38rem); + line-height: 1.12; + letter-spacing: -0.015em; color: var(--ink); margin: 0; } -.hl-list { - list-style: none; - margin: 0; - padding: 0; - display: grid; - gap: clamp(0.4rem, 0.9vh, 0.7rem); -} -.hl-list li { - position: relative; - padding-left: 0.95rem; +.highlight-lead { font-family: var(--font-sans); - font-size: clamp(0.72rem, 0.9vw, 0.84rem); - line-height: 1.4; + font-weight: 600; + font-size: clamp(0.8rem, 1vw, 0.92rem); + line-height: 1.38; + color: var(--ink); + margin: 0.2rem 0 0; +} +.highlight-bullets { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 0.35rem; } +.highlight-bullets li { + position: relative; + padding-left: 0.85rem; + font-family: var(--font-sans); + font-size: clamp(0.72rem, 0.9vw, 0.82rem); + line-height: 1.38; color: var(--ink-soft); } -.hl-list li::before { +.highlight-bullets li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; - background: var(--tone); + background: var(--ink-faint); +} + +/* ════════════════════ Slide 16 — solution boxes (green text cards) ════════════════════ */ +.sol-inner { max-width: 1380px; } +.solution-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: clamp(0.8rem, 1.5vw, 1.4rem); + align-items: stretch; +} +.solution-box { + background: linear-gradient(180deg, rgba(109,140,124,0.12), rgba(255,252,247,0.65)); + border-radius: var(--radius-md); + border-top: 3px solid var(--copper); + 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); + display: grid; + gap: clamp(0.6rem, 1.2vh, 1rem); + 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); + letter-spacing: -0.01em; + 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; + 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 li { + position: relative; + padding-left: 0.95rem; + font-family: var(--font-sans); + font-size: clamp(0.78rem, 0.95vw, 0.9rem); + line-height: 1.42; + color: var(--ink-soft); +} +.sol-list li::before { + content: ""; + position: absolute; + left: 0; top: 0.5em; + width: 5px; height: 5px; + border-radius: 50%; + background: var(--copper); } @media (max-width: 980px) { - .highlight-grid { grid-template-columns: repeat(2, 1fr); } + .highlight-grid, .solution-grid { grid-template-columns: repeat(2, 1fr); } } /* ════════════════════ Slide 12 — Meme ════════════════════ */ diff --git a/index.html b/index.html index b17a6a1..aadb327 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,7 @@

Velkommen til

Project Bifrost

-

Bifrost Advisory Meeting - 001

+

Advisory Meeting - 001

@@ -342,43 +342,63 @@
-

01 — US Cloud Act

-

Amerikanske myndigheder kan få adgang til dine data. Også når de ligger i EU.

- +
+ +
+
+ 01 +

US Cloud Act

+

Amerikanske myndigheder kan få adgang til dine data. Også når de ligger i EU.

+
    +
  • Vælger du en amerikansk udbyder, gælder amerikansk lov. Også når data står i EU.
    • +
  • Microsoft har under ed indrømmet, at de ikke kan garantere suverænitet. Heller ikke i deres egen “sovereign cloud”.
    • +
+
-

02 — Geopolitisk uro

-

Alliancer skifter. Det gør ét lands teknologi til en risiko, du ikke selv styrer.

- +
+ +
+
+ 02 +

Geopolitisk uro

+

Alliancer skifter. Det gør ét lands teknologi til en risiko, du ikke selv styrer.

+
    +
  • Told og eksportrestriktioner kan ramme uden varsel og sende prisen op.
    • +
  • Er du afhængig af ét lands teknologi, bliver din drift en brik i andres forhandlinger.
    • +
+
-

03 — Fable 5 / Mythos

-

En regering kan lukke din AI med ét brev.

- +
+ +
+
+ 03 +

Fable 5 / Mythos

+

En regering kan lukke din AI med ét brev.

+
    +
  • Den 1. juni 2026 lukkede USA adgangen til Anthropics bedste modeller, få dage efter de var udkommet.
    • +
  • Alle brugere uden for USA mistede adgangen på timer. Uanset hvad kontrakten sagde.
    • +
+
-

04 — Vendor lock-in

-

Lock-in på data var til at leve med. På intelligensen er det en anden sag.

- +
+ +
+
+ 04 +

Vendor lock-in

+

Lock-in på data var til at leve med. På intelligensen er det en anden sag.

+
    +
  • Vi så det med dataplatforme. Da udbyderne havde markedet, steg priserne.
    • +
  • Er din kerneproces bundet til én udbyders model, sætter de prisen. Og du betaler.
    • +
+
@@ -409,49 +429,45 @@
-
+

Vores tilgang til suverænitet, sikkerhed & governance

Fire svar på de samme bekymringer

-
-
-

01 — Datasuverænitet by design

-

Svaret på Cloud Act, og på at et EU-datacenter ikke er nok.

-
    -
  • Kører i jeres eget miljø, on-prem eller i egen sky. Data forlader aldrig jeres perimeter.
    • -
  • Vi ser aldrig jeres prompts eller data. Der er ingen kæde at lække igennem.
    • -
  • Ingen Cloud Act-eksponering. Der står ingen amerikansk udbyder mellem dig og din intelligens. For den sags skyld ingen ekstern udbyder overhovedet.
    • +
    +
    +

    01 — Datasuverænitet by design

    +

    Svaret på Cloud Act. Et EU-datacenter er ikke nok.

    +
      +
    • Kører i jeres eget miljø. Data forlader aldrig jeres perimeter.
      • +
    • Ingen ekstern udbyder mellem dig og din intelligens. Ingen Cloud Act-bagdør.
    -
    -

    02 — Driftssikkerhed & kontinuitet

    -

    Svaret på Fable 5-lukningen. Ingen kill-switch udefra.

    -
      -
    • Modellen og vægtene ligger hos dig. Ingen kan slukke den udefra med et brev. Fable 5-scenariet kan ikke ske her.
      • -
    • Ingen ekstern API-afhængighed. Drift og failover ligger inden for jeres egen kontrol.
      • -
    • Du ejer livscyklussen. Ingen udefra kan tvinge dig til at opgradere eller lukke ned.
      • +
      +

      02 — Driftssikkerhed & kontinuitet

      +

      Svaret på Fable 5-lukningen. Ingen kill-switch udefra.

      +
        +
      • Modellen og vægtene ligger hos dig. Ingen kan slukke den med et brev.
        • +
      • Drift og failover er jeres egen. Ingen ekstern API at miste.
      -
      -

      03 — Sikkerhed i flere lag

      -

      Her er sikkerhed en del af fundamentet. Ikke noget, der er sat ovenpå bagefter.

      -
        -
      • Det hele kører bag jeres egne firewalls og adgangskontroller. Jeres eksisterende sikkerhedsstack gælder også for AI’en.
        • -
      • Fuldt auditspor lokalt. I kan se, hvem der spurgte om hvad, hvornår, og hvilken model der svarede. Loggene forlader aldrig huset.
        • -
      • Løbende red-teaming og hærdede modeller leveret til jer, så sårbarheder bliver fanget, før de bliver til hændelser.
        • +
        +

        03 — Sikkerhed i flere lag

        +

        Sikkerhed er en del af fundamentet, ikke en feature ovenpå.

        +
          +
        • Kører bag jeres egne firewalls. Jeres sikkerhedsstack gælder også AI’en.
          • +
        • Fuldt auditspor lokalt. Loggene forlader aldrig huset.
        -
        -

        04 — Governance & frihed fra lock-in

        -

        Svaret på vendor lock-in og geopolitisk afhængighed.

        -
          -
        • Modelagnostisk, og det er dit at beholde. Skift eller kombinér modeller i dit eget miljø uden at bygge om.
          • -
        • Ingen forbrugsbaseret afhængighed. Prisen kan ikke skrues op, for driften ligger ikke i vores hænder.
          • -
        • Compliance, der kan revideres og ligger inden for jeres egen kontrol. Klar til EU AI Act og GDPR fra dag ét.
          • +
          +

          04 — Governance & frihed fra lock-in

          +

          Svaret på vendor lock-in og geopolitisk afhængighed.

          +
            +
          • Modelagnostisk. Skift eller kombinér modeller uden at bygge om.
            • +
          • Ingen forbrugsbaseret afhængighed. Prisen kan ikke skrues op udefra.