diff --git a/content/_index.md b/content/_index.md
index 35165fa..3f1963f 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,8 +1,7 @@
---
title: data.altinn.no
-description: data.altinn.no (DAN) er laget for å kunne forenkle deling av data fra virksomheter, med formål om å gjenbruke informasjon direkte fra kilden.
+description: data.altinn.no (DAN) er laget for å kunne forenkle deling av data fra virksomheter, med formål om å gjenbruke informasjon direkte fra kilden.
weight: 100
-toc: true
aliases:
- /guides/nadobe/
- /guides/dokumentasjonsbevis/
@@ -10,37 +9,8 @@ aliases:
- /utviklingsguider/data.altinn.no/ebevis
---
-## Innledning
+data.altinn.no (DAN) gjør det enklere å komme i gang med datadeling, både for datakilder og konsumenter. Gjennom ett generisk API kan ulike _datasett_ hentes rett fra kilden på en måte som sikrer konfidensialitet, integritet og tilgjengelighet.
-data.altinn.no (DAN) gjør det enklere å komme i gang med datadeling både for datakilder og konsumenter. Gjennom et enkelt, generisk API kan ulike _datasett_ utveksles på en måte som sikrer konfidensialitet, integritet og tilgjengelighet - selv for datakilder som mangler kapabilitetene som kreves for å kunne dele data med mange konsumenter.
+All uthenting skjer i kontekst av en _tjeneste_, som regulerer hvem som får hente hva og på hvilket grunnlag: hjemmel, samtykke fra en representant for virksomheten i Altinn, eller en kombinasjon. Løsningen brukes i dag av blant annet eBevis for leverandørkvalifisering i offentlige anskaffelser og Tilda for deling av tilsynsdata.
-Gjennom å sikre tilganger til ulike konsumentgrupper gjennom rike autorisasjonsregler, f.eks. ved bruk av [Altinns samtykkeløsning](https://altinn.github.io/docs/utviklingsguider/samtykke/), vil informasjonen kunne hentes direkte fra datakilden sikkert og effektivt.
-
-Løsningen er generisk og vil kunne brukes på ulike forretningsområder, med nye tilknyttede registre og nye brukergrupper.
-
-Denne dokumentasjonen dekker den tekniske bruken av data.altinn.no. Informasjon om kostnader, vilkår, bruksstatistikk og utviklingsplan finner du på [data.altinn.no på Samarbeidsportalen](https://samarbeid.digdir.no/altinn/dataaltinnno/1929), Digdirs felles nettsted for fellesløsningene.
-
-## Tjenester på data.altinn.no
-
-All uthenting av datasett tilgjengeliggjort på data.altinn.no gjøres i kontekst av en _tjeneste_. Tjenestene forteller noe om hvilken sammenheng datauthentingen gjøres i, og regulerer bl.a. autorisasjon. Et eksempel på en slik tjeneste på data.altinn.no er eBevis, som forenkler kvalifisering av leverandører i forbindelse med offentlige anskaffelser.
-
-Ulike tjenester kan benytte de samme datasettene, men være underlagt andre regler for uthentingen av dataene. F.eks. vil det i noen _tjenestekontekster_ være nødvendig å innhente et samtykke, mens det i andre foreligger hjemmel til å kunne hente dataene direkte.
-
-## Datakilder og datasett
-
-Løsningen baseres på at en aktør kan sende forespørsler på én eller flere _datasett_ (tidligere kalt _beviskoder_). Datasettene er en informasjonspakke som kan inneholde ett eller flere felter med strukturert eller ustrukturert informasjon. Forespørsler inneholder 1) hvem som spør, 2) hvem forespørselen gjelder, og 3) hvilke datasett spørres det om.
-
-## Sikring av data og tilgangskontroll
-
-Løsningen er tilrettelagt for formidling av også ikke-åpne data og personopplysninger. Behandlingsgrunnlaget som kreves for å hente disse dataene oppstår gjennom at konsumenten har en hjemmel til å hente informasjonen, eller at det innhentes samtykke fra en bemyndiget representant for parten det innhentes opplysninger om.
-
-data.altinn.no tilbyr ulike mekanismer som gjør det mulig for konsumenten å dokumentere at behandlingsgrunnlag foreligger, f.eks. gjennom Altinns samtykkeløsning, gjennom et spesifikt token fra Maskinporten, gjennom et strukturert verifiserbart vedlegg i forespørselen, gjennom å verifisere identiteten til den som utfører forespørselen - eller en kombinasjon av disse.
-
-I de tilfellene hvor datakilder avgir personopplysninger eller andre data som er underlagt taushetsplikt eller andre restriksjoner, kreves det at Digitaliseringsdirektoratet inngår databehandleravtaler med de partene som har behandlingsansvar.
-
-## Bruk av samtykke
-
-Datasettene som krever samtykke vil igangsette en samtykkeprosess i Altinn. I de tilfeller hvor det skal hentes ut informasjon om en juridisk person, må en representant fra virksomheten, med tilstrekkelig tilgangsnivå, logge seg inn i Altinn-portalen og aktivt samtykke til at dataene skal tilgjengeliggjøres. Varsel om samtykkeforespørsel sendes som en melding til den aktuelle innboksen i Altinn, og inneholder en lenke som lar representanten ta stilling til om samtykke skal gis eller ikke.
-
-* [Mer informasjon om samtykkeprosessen](/samtykkeprosessen)
-* [Rollekrav i Altinn for samtykketjenestene](/rollekrav-i-altinn)
\ No newline at end of file
+Denne dokumentasjonen dekker den tekniske bruken. Kostnader, vilkår, bruksstatistikk og utviklingsplan finner du på [data.altinn.no på Samarbeidsportalen](https://samarbeid.digdir.no/altinn/dataaltinnno/1929).
diff --git a/content/om/_index.md b/content/om/_index.md
new file mode 100644
index 0000000..2ebdbfb
--- /dev/null
+++ b/content/om/_index.md
@@ -0,0 +1,42 @@
+---
+title: Om data.altinn.no
+linktitle: Om løsningen
+description: Hva data.altinn.no er, og hvordan tjenester, datasett, tilgangskontroll og samtykke henger sammen.
+weight: 5
+toc: true
+---
+
+## Innledning
+
+data.altinn.no (DAN) gjør det enklere å komme i gang med datadeling både for datakilder og konsumenter. Gjennom et enkelt, generisk API kan ulike _datasett_ utveksles på en måte som sikrer konfidensialitet, integritet og tilgjengelighet - selv for datakilder som mangler kapabilitetene som kreves for å kunne dele data med mange konsumenter.
+
+Gjennom å sikre tilganger til ulike konsumentgrupper gjennom rike autorisasjonsregler, f.eks. ved bruk av [Altinns samtykkeløsning](https://altinn.github.io/docs/utviklingsguider/samtykke/), vil informasjonen kunne hentes direkte fra datakilden sikkert og effektivt.
+
+Løsningen er generisk og vil kunne brukes på ulike forretningsområder, med nye tilknyttede registre og nye brukergrupper.
+
+Denne dokumentasjonen dekker den tekniske bruken av data.altinn.no. Informasjon om kostnader, vilkår, bruksstatistikk og utviklingsplan finner du på [data.altinn.no på Samarbeidsportalen](https://samarbeid.digdir.no/altinn/dataaltinnno/1929), Digdirs felles nettsted for fellesløsningene.
+
+## Tjenester på data.altinn.no
+
+All uthenting av datasett tilgjengeliggjort på data.altinn.no gjøres i kontekst av en _tjeneste_. Tjenestene forteller noe om hvilken sammenheng datauthentingen gjøres i, og regulerer bl.a. autorisasjon. Et eksempel på en slik tjeneste på data.altinn.no er eBevis, som forenkler kvalifisering av leverandører i forbindelse med offentlige anskaffelser.
+
+Ulike tjenester kan benytte de samme datasettene, men være underlagt andre regler for uthentingen av dataene. F.eks. vil det i noen _tjenestekontekster_ være nødvendig å innhente et samtykke, mens det i andre foreligger hjemmel til å kunne hente dataene direkte.
+
+## Datakilder og datasett
+
+Løsningen baseres på at en aktør kan sende forespørsler på én eller flere _datasett_ (tidligere kalt _beviskoder_). Datasettene er en informasjonspakke som kan inneholde ett eller flere felter med strukturert eller ustrukturert informasjon. Forespørsler inneholder 1) hvem som spør, 2) hvem forespørselen gjelder, og 3) hvilke datasett spørres det om.
+
+## Sikring av data og tilgangskontroll
+
+Løsningen er tilrettelagt for formidling av også ikke-åpne data og personopplysninger. Behandlingsgrunnlaget som kreves for å hente disse dataene oppstår gjennom at konsumenten har en hjemmel til å hente informasjonen, eller at det innhentes samtykke fra en bemyndiget representant for parten det innhentes opplysninger om.
+
+data.altinn.no tilbyr ulike mekanismer som gjør det mulig for konsumenten å dokumentere at behandlingsgrunnlag foreligger, f.eks. gjennom Altinns samtykkeløsning, gjennom et spesifikt token fra Maskinporten, gjennom et strukturert verifiserbart vedlegg i forespørselen, gjennom å verifisere identiteten til den som utfører forespørselen - eller en kombinasjon av disse.
+
+I de tilfellene hvor datakilder avgir personopplysninger eller andre data som er underlagt taushetsplikt eller andre restriksjoner, kreves det at Digitaliseringsdirektoratet inngår databehandleravtaler med de partene som har behandlingsansvar.
+
+## Bruk av samtykke
+
+Datasettene som krever samtykke vil igangsette en samtykkeprosess i Altinn. I de tilfeller hvor det skal hentes ut informasjon om en juridisk person, må en representant fra virksomheten, med tilstrekkelig tilgangsnivå, logge seg inn i Altinn-portalen og aktivt samtykke til at dataene skal tilgjengeliggjøres. Varsel om samtykkeforespørsel sendes som en melding til den aktuelle innboksen i Altinn, og inneholder en lenke som lar representanten ta stilling til om samtykke skal gis eller ikke.
+
+* [Mer informasjon om samtykkeprosessen](/samtykkeprosessen)
+* [Rollekrav i Altinn for samtykketjenestene](/rollekrav-i-altinn)
diff --git a/data/landing.yaml b/data/landing.yaml
new file mode 100644
index 0000000..8a342fa
--- /dev/null
+++ b/data/landing.yaml
@@ -0,0 +1,36 @@
+# Landing page (layouts/index.html): the three link groups under the hero.
+# `page` is a content path resolved with .Site.GetPage, so titles follow the
+# front matter (linktitle, then title) unless `title` overrides it here.
+groups:
+ - title: Kom i gang
+ icon: fa-plug
+ text: Integrer systemet ditt med API-et, følg flyten steg for steg og prøv det ut i testmiljøet.
+ links:
+ - page: /api
+ title: Kom i gang med API
+ - page: /api/steg-for-steg
+ title: Fra forespørsel til data, steg for steg
+ - page: /api/oas
+ title: OpenAPI-spesifikasjon
+ - page: /testing
+ title: Testing mot data.altinn.no
+ - title: Tilgang og samtykke
+ icon: fa-lock
+ text: Hjemmel, samtykke og fullmakt gir tilgang til data. Her står hva som kreves i Altinn, og hvordan apper kan bruke løsningen.
+ links:
+ - page: /samtykkeprosessen
+ - page: /rollekrav-i-altinn
+ title: Rollekrav i Altinn
+ - page: /altinnstudio
+ - title: Tjenester og datasett
+ icon: fa-database
+ text: Tjenestene som henter data gjennom data.altinn.no, og datasettene som er tilgjengelige i prod og test.
+ links:
+ - page: /tjenester
+ title: Alle tjenester
+ - page: /tjenester/ebevis
+ title: eBevis
+ - page: /tjenester/tilsynsdata
+ title: Tilda
+ - page: /datasett
+ - page: /ofte-stilte-spørsmål
diff --git a/layouts/index.html b/layouts/index.html
new file mode 100644
index 0000000..9333578
--- /dev/null
+++ b/layouts/index.html
@@ -0,0 +1,123 @@
+{{- /* Landing page for docs.data.altinn.no. Standalone skeleton (no sidebar): shares
and the
+ top bar with the doc pages, uses Designsystemet (static/css/designsystemet.css) for cards,
+ buttons and type, and static/css/landing.css for layout. Link groups come from data/landing.yaml. */ -}}
+
+
+
+ {{ partial "head.html" . }}
+
+
+ {{ partial "topbar.html" . }}
+
+
+
+
+
+
+
Teknisk dokumentasjon
+
Bygg på data.altinn.no
+
{{ .Site.Params.description }}
+
+
+ {{- if not .Site.Params.noSearch }}
+
+ {{ partial "search.html" . }}
+
+ {{- end }}
+
+
+ {{- /* Band art: the data.altinn.no market icon (white, as the profile requires on dark
+ surfaces) with the design element beside it: the emblem's circle-and-square shape in
+ the profile's graphic colours, at the right edge and low on the surface. */ -}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Finn fram i dokumentasjonen
+
+ {{- range .Site.Data.landing.groups }}
+
+
+
+
{{ .title }}
+
{{ .text }}
+
+
+
+ {{- range .links }}
+ {{- $title := .title }}
+ {{- with $.Site.GetPage .page }}
+ {{ $title | default .LinkTitle }}
+ {{- else }}
+ {{- warnf "landing.yaml: page %q not found" .page }}
+ {{- end }}
+ {{- end }}
+
+
+
+ {{- end }}
+
+
+
+
+
+
+
+
Hva er data.altinn.no?
+
{{ .Content }}
+
+
+
+
+
+
+
+
+
+ {{- partial "footer-content.html" . }}
+ {{- partial "custom-footer.html" . }}
+
+
diff --git a/layouts/partials/custom-head.html b/layouts/partials/custom-head.html
index 107c56d..bcff12f 100644
--- a/layouts/partials/custom-head.html
+++ b/layouts/partials/custom-head.html
@@ -1,3 +1,7 @@
-
-
\ No newline at end of file
+
+
+{{- if .IsHome }}
+
+
+{{- end }}
diff --git a/layouts/partials/footer-content.html b/layouts/partials/footer-content.html
index d5dd078..bd1a08b 100644
--- a/layouts/partials/footer-content.html
+++ b/layouts/partials/footer-content.html
@@ -36,13 +36,13 @@
Telefon:
-->
-
-
-
diff --git a/layouts/partials/topbar.html b/layouts/partials/topbar.html
index 0f4ebee..e61e1ed 100644
--- a/layouts/partials/topbar.html
+++ b/layouts/partials/topbar.html
@@ -1,15 +1,20 @@
-
+
-
-
+
+
-
-
+ {{- /* Profile: the all-white logo on dark surfaces (the landing page band). */ -}}
+ {{- $variant := cond .IsHome "-white" "" }}
+
+
diff --git a/static/css/custom.css b/static/css/custom.css
index 8a9d223..844f63b 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -58,11 +58,12 @@ footer .container {
max-width: 1240px;
}
+/* The three footer columns share one grid: the logo's ink sits level with the column headings,
+ and every column's first text row starts 48px below the top of the footer content. */
.footer-brand__logo,
.footer .footer-brand__logo {
height: 38px;
- margin-bottom: 13px;
- margin-left: -8px;
+ margin: 6px 0 4px -8px;
}
.footer-brand__text,
@@ -70,7 +71,7 @@ footer .container {
color: #d7d7d7;
font-weight: 400;
font-size: 15px;
- line-height: 2em;
+ line-height: 24px;
}
.footer__heading {
@@ -131,7 +132,8 @@ footer .container {
color: #d7d7d7;
font-weight: 400;
font-size: 15px;
- margin-bottom: 15px;
+ margin-bottom: 4px;
+ line-height: 24px;
}
.footer-contact__item a,
@@ -229,10 +231,10 @@ footer .container {
the product name set in NB International Pro (outlined), proportioned like the ID-porten lockup.
Narrow screens show the bare emblem, as idporten.no does. The breakpoint is where the full lockup
plus the four navigation items stop fitting on one row (about 675px), so the last item never wraps. */
-.d-logo { display: inline-block; margin: 14px 20px 20px 20px; border-bottom: none !important; }
+.d-logo { display: inline-block; margin: 10px 20px 24px 20px; border-bottom: none !important; } /* logo top at 25px, same as on data.altinn.no */
.d-logo img { display: block; height: 27px; width: auto; }
.d-logo .d-logo__compact { display: none; height: 24px; }
-@media (max-width: 680px) {
+@media (max-width: 700px) {
.d-logo .d-logo__full { display: none; }
.d-logo .d-logo__compact { display: block; }
}
@@ -307,6 +309,7 @@ footer .container {
.nav-link {
color: #000;
+ font-size: 16px; /* fixed: the landing page's body text is 18px (Designsystemet), the doc pages' 16px */
margin-left: 1px;
padding-top: 8px;
margin-right: 1px;
@@ -406,20 +409,21 @@ a {
:root, and the modal inherits from body first. */
body {
--pf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
- --pf-text: #000;
- --pf-text-secondary: #4a4a4a;
- --pf-text-muted: #6a6a6a;
- --pf-border: #bcc7d1;
- --pf-border-focus: #1e2b3c;
- --pf-outline-focus: #1e2b3c;
- --pf-hover: #eef6fc;
- --pf-mark: #1e2b3c;
- --pf-border-radius: 4px;
+ --pf-text: #1f2c3d; /* Designsystemet neutral text (blåsvart) */
+ --pf-text-secondary: #545e6b; /* text subtle, same grey as the landing cards */
+ --pf-text-muted: #545e6b;
+ --pf-border: #b8bcc1; /* border subtle, same as the landing cards */
+ --pf-border-focus: #1f2c3d; /* focus outer */
+ --pf-outline-focus: #1f2c3d;
+ --pf-hover: #ddeaf6; /* accent surface tinted, the card icon circle */
+ --pf-mark: #005db1; /* accent text, the card link colour */
+ --pf-border-radius: 8px; /* Designsystemet large radius, as on the cards */
--pf-input-height: 44px;
--pf-result-title-font-size: 15px;
--pf-result-excerpt-font-size: 13.5px;
--pf-modal-max-width: 720px;
- --pf-modal-top: 8dvh;
+ --pf-modal-top: 16dvh; /* opens near the sidebar search box rather than at the top edge */
+ --pf-modal-max-height: min(72dvh, 720px);
}
.site-search { margin: 0 0 1em; }
.site-search pagefind-modal-trigger { display: block; width: 100%; }
diff --git a/static/css/designsystemet.css b/static/css/designsystemet.css
new file mode 100644
index 0000000..4f63354
--- /dev/null
+++ b/static/css/designsystemet.css
@@ -0,0 +1,1178 @@
+/* Designsystemet (designsystemet.no), vendored for the landing page.
+ Theme: @digdir/designsystemet-theme@1.11.0 brand/digdir.css
+ Components: @digdir/designsystemet-css@1.22.0 dist/src/{base,heading,paragraph,link,list,button,card,divider,skip-link}.css
+ Do not edit by hand; re-vendor from npm/jsDelivr when upgrading. */
+@charset "UTF-8";
+/*
+build: v1.8.0
+design-tokens: v1.8.0
+*/
+
+@layer ds.theme.size-mode {
+:root /* small */ {
+ --ds-size-mode-font-size--sm: 1;
+}
+}
+
+@layer ds.theme.size-mode {
+:root /* medium */ {
+ --ds-size-mode-font-size--md: 1.125;
+}
+}
+
+@layer ds.theme.size-mode {
+:root /* large */ {
+ --ds-size-mode-font-size--lg: 1.3125;
+}
+}
+
+@layer ds.theme.size-mode {
+:root, [data-size] {
+ --ds-size: var(--ds-size--md);
+ --ds-size--sm: var(--ds-size,);
+ --ds-size--md: var(--ds-size,);
+ --ds-size--lg: var(--ds-size,);
+ --ds-size-mode-font-size:
+ var(--ds-size--sm, var(--ds-size-mode-font-size--sm))
+ var(--ds-size--md, var(--ds-size-mode-font-size--md))
+ var(--ds-size--lg, var(--ds-size-mode-font-size--lg));
+}
+
+[data-size='sm'] { --ds-size: var(--ds-size--sm); }
+[data-size='md'] { --ds-size: var(--ds-size--md); }
+[data-size='lg'] { --ds-size: var(--ds-size--lg); }
+}
+
+@layer ds.theme.type-scale {
+:root, [data-size] {
+ --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / 16));
+ --ds-font-size-1: calc(0.75rem * var(--_ds-font-size-factor));
+ --ds-font-size-2: calc(0.875rem * var(--_ds-font-size-factor));
+ --ds-font-size-3: calc(1rem * var(--_ds-font-size-factor));
+ --ds-font-size-4: calc(1.125rem * var(--_ds-font-size-factor));
+ --ds-font-size-5: calc(1.3125rem * var(--_ds-font-size-factor));
+ --ds-font-size-6: calc(1.5rem * var(--_ds-font-size-factor));
+ --ds-font-size-7: calc(1.875rem * var(--_ds-font-size-factor));
+ --ds-font-size-8: calc(2.25rem * var(--_ds-font-size-factor));
+ --ds-font-size-9: calc(3rem * var(--_ds-font-size-factor));
+ --ds-font-size-10: calc(3.75rem * var(--_ds-font-size-factor));
+ --ds-heading-2xl-font-size: var(--ds-font-size-10);
+ --ds-heading-xl-font-size: var(--ds-font-size-9);
+ --ds-heading-lg-font-size: var(--ds-font-size-8);
+ --ds-heading-md-font-size: var(--ds-font-size-7);
+ --ds-heading-sm-font-size: var(--ds-font-size-6);
+ --ds-heading-xs-font-size: var(--ds-font-size-5);
+ --ds-heading-2xs-font-size: var(--ds-font-size-4);
+ --ds-body-xl-font-size: var(--ds-font-size-6);
+ --ds-body-lg-font-size: var(--ds-font-size-5);
+ --ds-body-md-font-size: var(--ds-font-size-4);
+ --ds-body-sm-font-size: var(--ds-font-size-3);
+ --ds-body-xs-font-size: var(--ds-font-size-2);
+ --ds-body-short-xl-font-size: var(--ds-font-size-6);
+ --ds-body-short-lg-font-size: var(--ds-font-size-5);
+ --ds-body-short-md-font-size: var(--ds-font-size-4);
+ --ds-body-short-sm-font-size: var(--ds-font-size-3);
+ --ds-body-short-xs-font-size: var(--ds-font-size-2);
+ --ds-body-long-xl-font-size: var(--ds-font-size-6);
+ --ds-body-long-lg-font-size: var(--ds-font-size-5);
+ --ds-body-long-md-font-size: var(--ds-font-size-4);
+ --ds-body-long-sm-font-size: var(--ds-font-size-3);
+ --ds-body-long-xs-font-size: var(--ds-font-size-2);
+
+ @supports (width: round(down, .1em, 1px)) {
+ --ds-font-size-1: round(calc(0.75rem * var(--_ds-font-size-factor)), 1px);
+ --ds-font-size-2: round(calc(0.875rem * var(--_ds-font-size-factor)), 1px);
+ --ds-font-size-3: round(calc(1rem * var(--_ds-font-size-factor)), 1px);
+ --ds-font-size-4: round(calc(1.125rem * var(--_ds-font-size-factor)), 1px);
+ --ds-font-size-5: round(calc(1.3125rem * var(--_ds-font-size-factor)), 1px);
+ --ds-font-size-6: round(calc(1.5rem * var(--_ds-font-size-factor)), 1px);
+ --ds-font-size-7: round(calc(1.875rem * var(--_ds-font-size-factor)), 1px);
+ --ds-font-size-8: round(calc(2.25rem * var(--_ds-font-size-factor)), 1px);
+ --ds-font-size-9: round(calc(3rem * var(--_ds-font-size-factor)), 1px);
+ --ds-font-size-10: round(calc(3.75rem * var(--_ds-font-size-factor)), 1px);
+ }
+}
+}
+@layer ds.theme.color-scheme.light {
+:root, [data-color-scheme="light"] {
+ --ds-color-accent-background-default: #ffffff;
+ --ds-color-accent-background-tinted: #eef4fa;
+ --ds-color-accent-surface-default: #ffffff;
+ --ds-color-accent-surface-tinted: #ddeaf6;
+ --ds-color-accent-surface-hover: #c7ddf0;
+ --ds-color-accent-surface-active: #afcee9;
+ --ds-color-accent-border-subtle: #99c0e3;
+ --ds-color-accent-border-default: #2a7cc5;
+ --ds-color-accent-border-strong: #005db1;
+ --ds-color-accent-text-subtle: #005db1;
+ --ds-color-accent-text-default: #002c54;
+ --ds-color-accent-base-default: #0062BA;
+ --ds-color-accent-base-hover: #004f96;
+ --ds-color-accent-base-active: #003d75;
+ --ds-color-accent-base-contrast-subtle: #dbe9f5;
+ --ds-color-accent-base-contrast-default: #ffffff;
+ --ds-color-neutral-background-default: #ffffff;
+ --ds-color-neutral-background-tinted: #f3f4f4;
+ --ds-color-neutral-surface-default: #ffffff;
+ --ds-color-neutral-surface-tinted: #e7e9ea;
+ --ds-color-neutral-surface-hover: #d8dadd;
+ --ds-color-neutral-surface-active: #c7cacf;
+ --ds-color-neutral-border-subtle: #b8bcc1;
+ --ds-color-neutral-border-default: #717a84;
+ --ds-color-neutral-border-strong: #545e6b;
+ --ds-color-neutral-text-subtle: #545e6b;
+ --ds-color-neutral-text-default: #1f2c3d;
+ --ds-color-neutral-base-default: #1E2B3C;
+ --ds-color-neutral-base-hover: #313d4d;
+ --ds-color-neutral-base-active: #444f5d;
+ --ds-color-neutral-base-contrast-subtle: #babec4;
+ --ds-color-neutral-base-contrast-default: #ffffff;
+ --ds-color-brand1-background-default: #ffffff;
+ --ds-color-brand1-background-tinted: #fef0f1;
+ --ds-color-brand1-surface-default: #ffffff;
+ --ds-color-brand1-surface-tinted: #fde2e3;
+ --ds-color-brand1-surface-hover: #fccfd1;
+ --ds-color-brand1-surface-active: #fababc;
+ --ds-color-brand1-border-subtle: #f9a5a8;
+ --ds-color-brand1-border-default: #cb4f53;
+ --ds-color-brand1-border-strong: #9e3d40;
+ --ds-color-brand1-text-subtle: #9e3d40;
+ --ds-color-brand1-text-default: #4b1d1e;
+ --ds-color-brand1-base-default: #F45F63;
+ --ds-color-brand1-base-hover: #f78588;
+ --ds-color-brand1-base-active: #f9a6a8;
+ --ds-color-brand1-base-contrast-subtle: #020101;
+ --ds-color-brand1-base-contrast-default: #000000;
+ --ds-color-brand2-background-default: #ffffff;
+ --ds-color-brand2-background-tinted: #fbf3df;
+ --ds-color-brand2-surface-default: #ffffff;
+ --ds-color-brand2-surface-tinted: #f8e7c1;
+ --ds-color-brand2-surface-hover: #f3d797;
+ --ds-color-brand2-surface-active: #edc567;
+ --ds-color-brand2-border-subtle: #e8b43a;
+ --ds-color-brand2-border-default: #9a7216;
+ --ds-color-brand2-border-strong: #775811;
+ --ds-color-brand2-text-subtle: #775811;
+ --ds-color-brand2-text-default: #382908;
+ --ds-color-brand2-base-default: #E5AA20;
+ --ds-color-brand2-base-hover: #c9951c;
+ --ds-color-brand2-base-active: #af8218;
+ --ds-color-brand2-base-contrast-subtle: #2c2006;
+ --ds-color-brand2-base-contrast-default: #000000;
+ --ds-color-brand3-background-default: #ffffff;
+ --ds-color-brand3-background-tinted: #eaf5fe;
+ --ds-color-brand3-surface-default: #ffffff;
+ --ds-color-brand3-surface-tinted: #d5ecfd;
+ --ds-color-brand3-surface-hover: #b9dffc;
+ --ds-color-brand3-surface-active: #99d0fa;
+ --ds-color-brand3-border-subtle: #7bc3f9;
+ --ds-color-brand3-border-default: #197dc9;
+ --ds-color-brand3-border-strong: #13619c;
+ --ds-color-brand3-text-subtle: #13619c;
+ --ds-color-brand3-text-default: #092d49;
+ --ds-color-brand3-base-default: #1E98F5;
+ --ds-color-brand3-base-hover: #53b0f7;
+ --ds-color-brand3-base-active: #81c5f9;
+ --ds-color-brand3-base-contrast-subtle: #010507;
+ --ds-color-brand3-base-contrast-default: #000000;
+ --ds-color-info-background-default: #ffffff;
+ --ds-color-info-background-tinted: #edf5fa;
+ --ds-color-info-surface-default: #ffffff;
+ --ds-color-info-surface-tinted: #dcebf6;
+ --ds-color-info-surface-hover: #c5ddf0;
+ --ds-color-info-surface-active: #abcfe9;
+ --ds-color-info-border-subtle: #94c1e3;
+ --ds-color-info-border-default: #1f7dc5;
+ --ds-color-info-border-strong: #0860a3;
+ --ds-color-info-text-subtle: #0860a3;
+ --ds-color-info-text-default: #042d4d;
+ --ds-color-info-base-default: #0A71C0;
+ --ds-color-info-base-hover: #085d9f;
+ --ds-color-info-base-active: #074a7e;
+ --ds-color-info-base-contrast-subtle: #eff6fb;
+ --ds-color-info-base-contrast-default: #ffffff;
+ --ds-color-success-background-default: #ffffff;
+ --ds-color-success-background-tinted: #ecf6ee;
+ --ds-color-success-surface-default: #ffffff;
+ --ds-color-success-surface-tinted: #daeddd;
+ --ds-color-success-surface-hover: #c3e2c7;
+ --ds-color-success-surface-active: #a8d5ae;
+ --ds-color-success-border-subtle: #8fc997;
+ --ds-color-success-border-default: #108c22;
+ --ds-color-success-border-strong: #056d13;
+ --ds-color-success-text-subtle: #056d13;
+ --ds-color-success-text-default: #023409;
+ --ds-color-success-base-default: #068718;
+ --ds-color-success-base-hover: #057014;
+ --ds-color-success-base-active: #045a10;
+ --ds-color-success-base-contrast-subtle: #fafdfb;
+ --ds-color-success-base-contrast-default: #ffffff;
+ --ds-color-warning-background-default: #ffffff;
+ --ds-color-warning-background-tinted: #fcf2e2;
+ --ds-color-warning-surface-default: #ffffff;
+ --ds-color-warning-surface-tinted: #fae6c6;
+ --ds-color-warning-surface-hover: #f6d5a0;
+ --ds-color-warning-surface-active: #f2c275;
+ --ds-color-warning-border-subtle: #eeb04c;
+ --ds-color-warning-border-default: #a56d13;
+ --ds-color-warning-border-strong: #80540f;
+ --ds-color-warning-text-subtle: #80540f;
+ --ds-color-warning-text-default: #3c2807;
+ --ds-color-warning-base-default: #EA9B1B;
+ --ds-color-warning-base-hover: #cd8818;
+ --ds-color-warning-base-active: #b27614;
+ --ds-color-warning-base-contrast-subtle: #271a04;
+ --ds-color-warning-base-contrast-default: #000000;
+ --ds-color-danger-background-default: #ffffff;
+ --ds-color-danger-background-tinted: #fbf1f1;
+ --ds-color-danger-surface-default: #ffffff;
+ --ds-color-danger-surface-tinted: #f8e4e4;
+ --ds-color-danger-surface-hover: #f3d2d2;
+ --ds-color-danger-surface-active: #edbfbf;
+ --ds-color-danger-border-subtle: #e8adad;
+ --ds-color-danger-border-default: #ce4d4d;
+ --ds-color-danger-border-strong: #b81a1a;
+ --ds-color-danger-text-subtle: #b81a1a;
+ --ds-color-danger-text-default: #590d0d;
+ --ds-color-danger-base-default: #C01B1B;
+ --ds-color-danger-base-hover: #9b1616;
+ --ds-color-danger-base-active: #791111;
+ --ds-color-danger-base-contrast-subtle: #f7e1e1;
+ --ds-color-danger-base-contrast-default: #ffffff;
+ --ds-color-focus-inner: #ffffff;
+ --ds-color-focus-outer: #1f2c3d;
+ --ds-link-color-visited: #663299;
+
+ color-scheme: light;
+}
+
+@media (prefers-color-scheme: light) {
+ [data-color-scheme="auto"] {
+ --ds-color-accent-background-default: #ffffff;
+ --ds-color-accent-background-tinted: #eef4fa;
+ --ds-color-accent-surface-default: #ffffff;
+ --ds-color-accent-surface-tinted: #ddeaf6;
+ --ds-color-accent-surface-hover: #c7ddf0;
+ --ds-color-accent-surface-active: #afcee9;
+ --ds-color-accent-border-subtle: #99c0e3;
+ --ds-color-accent-border-default: #2a7cc5;
+ --ds-color-accent-border-strong: #005db1;
+ --ds-color-accent-text-subtle: #005db1;
+ --ds-color-accent-text-default: #002c54;
+ --ds-color-accent-base-default: #0062BA;
+ --ds-color-accent-base-hover: #004f96;
+ --ds-color-accent-base-active: #003d75;
+ --ds-color-accent-base-contrast-subtle: #dbe9f5;
+ --ds-color-accent-base-contrast-default: #ffffff;
+ --ds-color-neutral-background-default: #ffffff;
+ --ds-color-neutral-background-tinted: #f3f4f4;
+ --ds-color-neutral-surface-default: #ffffff;
+ --ds-color-neutral-surface-tinted: #e7e9ea;
+ --ds-color-neutral-surface-hover: #d8dadd;
+ --ds-color-neutral-surface-active: #c7cacf;
+ --ds-color-neutral-border-subtle: #b8bcc1;
+ --ds-color-neutral-border-default: #717a84;
+ --ds-color-neutral-border-strong: #545e6b;
+ --ds-color-neutral-text-subtle: #545e6b;
+ --ds-color-neutral-text-default: #1f2c3d;
+ --ds-color-neutral-base-default: #1E2B3C;
+ --ds-color-neutral-base-hover: #313d4d;
+ --ds-color-neutral-base-active: #444f5d;
+ --ds-color-neutral-base-contrast-subtle: #babec4;
+ --ds-color-neutral-base-contrast-default: #ffffff;
+ --ds-color-brand1-background-default: #ffffff;
+ --ds-color-brand1-background-tinted: #fef0f1;
+ --ds-color-brand1-surface-default: #ffffff;
+ --ds-color-brand1-surface-tinted: #fde2e3;
+ --ds-color-brand1-surface-hover: #fccfd1;
+ --ds-color-brand1-surface-active: #fababc;
+ --ds-color-brand1-border-subtle: #f9a5a8;
+ --ds-color-brand1-border-default: #cb4f53;
+ --ds-color-brand1-border-strong: #9e3d40;
+ --ds-color-brand1-text-subtle: #9e3d40;
+ --ds-color-brand1-text-default: #4b1d1e;
+ --ds-color-brand1-base-default: #F45F63;
+ --ds-color-brand1-base-hover: #f78588;
+ --ds-color-brand1-base-active: #f9a6a8;
+ --ds-color-brand1-base-contrast-subtle: #020101;
+ --ds-color-brand1-base-contrast-default: #000000;
+ --ds-color-brand2-background-default: #ffffff;
+ --ds-color-brand2-background-tinted: #fbf3df;
+ --ds-color-brand2-surface-default: #ffffff;
+ --ds-color-brand2-surface-tinted: #f8e7c1;
+ --ds-color-brand2-surface-hover: #f3d797;
+ --ds-color-brand2-surface-active: #edc567;
+ --ds-color-brand2-border-subtle: #e8b43a;
+ --ds-color-brand2-border-default: #9a7216;
+ --ds-color-brand2-border-strong: #775811;
+ --ds-color-brand2-text-subtle: #775811;
+ --ds-color-brand2-text-default: #382908;
+ --ds-color-brand2-base-default: #E5AA20;
+ --ds-color-brand2-base-hover: #c9951c;
+ --ds-color-brand2-base-active: #af8218;
+ --ds-color-brand2-base-contrast-subtle: #2c2006;
+ --ds-color-brand2-base-contrast-default: #000000;
+ --ds-color-brand3-background-default: #ffffff;
+ --ds-color-brand3-background-tinted: #eaf5fe;
+ --ds-color-brand3-surface-default: #ffffff;
+ --ds-color-brand3-surface-tinted: #d5ecfd;
+ --ds-color-brand3-surface-hover: #b9dffc;
+ --ds-color-brand3-surface-active: #99d0fa;
+ --ds-color-brand3-border-subtle: #7bc3f9;
+ --ds-color-brand3-border-default: #197dc9;
+ --ds-color-brand3-border-strong: #13619c;
+ --ds-color-brand3-text-subtle: #13619c;
+ --ds-color-brand3-text-default: #092d49;
+ --ds-color-brand3-base-default: #1E98F5;
+ --ds-color-brand3-base-hover: #53b0f7;
+ --ds-color-brand3-base-active: #81c5f9;
+ --ds-color-brand3-base-contrast-subtle: #010507;
+ --ds-color-brand3-base-contrast-default: #000000;
+ --ds-color-info-background-default: #ffffff;
+ --ds-color-info-background-tinted: #edf5fa;
+ --ds-color-info-surface-default: #ffffff;
+ --ds-color-info-surface-tinted: #dcebf6;
+ --ds-color-info-surface-hover: #c5ddf0;
+ --ds-color-info-surface-active: #abcfe9;
+ --ds-color-info-border-subtle: #94c1e3;
+ --ds-color-info-border-default: #1f7dc5;
+ --ds-color-info-border-strong: #0860a3;
+ --ds-color-info-text-subtle: #0860a3;
+ --ds-color-info-text-default: #042d4d;
+ --ds-color-info-base-default: #0A71C0;
+ --ds-color-info-base-hover: #085d9f;
+ --ds-color-info-base-active: #074a7e;
+ --ds-color-info-base-contrast-subtle: #eff6fb;
+ --ds-color-info-base-contrast-default: #ffffff;
+ --ds-color-success-background-default: #ffffff;
+ --ds-color-success-background-tinted: #ecf6ee;
+ --ds-color-success-surface-default: #ffffff;
+ --ds-color-success-surface-tinted: #daeddd;
+ --ds-color-success-surface-hover: #c3e2c7;
+ --ds-color-success-surface-active: #a8d5ae;
+ --ds-color-success-border-subtle: #8fc997;
+ --ds-color-success-border-default: #108c22;
+ --ds-color-success-border-strong: #056d13;
+ --ds-color-success-text-subtle: #056d13;
+ --ds-color-success-text-default: #023409;
+ --ds-color-success-base-default: #068718;
+ --ds-color-success-base-hover: #057014;
+ --ds-color-success-base-active: #045a10;
+ --ds-color-success-base-contrast-subtle: #fafdfb;
+ --ds-color-success-base-contrast-default: #ffffff;
+ --ds-color-warning-background-default: #ffffff;
+ --ds-color-warning-background-tinted: #fcf2e2;
+ --ds-color-warning-surface-default: #ffffff;
+ --ds-color-warning-surface-tinted: #fae6c6;
+ --ds-color-warning-surface-hover: #f6d5a0;
+ --ds-color-warning-surface-active: #f2c275;
+ --ds-color-warning-border-subtle: #eeb04c;
+ --ds-color-warning-border-default: #a56d13;
+ --ds-color-warning-border-strong: #80540f;
+ --ds-color-warning-text-subtle: #80540f;
+ --ds-color-warning-text-default: #3c2807;
+ --ds-color-warning-base-default: #EA9B1B;
+ --ds-color-warning-base-hover: #cd8818;
+ --ds-color-warning-base-active: #b27614;
+ --ds-color-warning-base-contrast-subtle: #271a04;
+ --ds-color-warning-base-contrast-default: #000000;
+ --ds-color-danger-background-default: #ffffff;
+ --ds-color-danger-background-tinted: #fbf1f1;
+ --ds-color-danger-surface-default: #ffffff;
+ --ds-color-danger-surface-tinted: #f8e4e4;
+ --ds-color-danger-surface-hover: #f3d2d2;
+ --ds-color-danger-surface-active: #edbfbf;
+ --ds-color-danger-border-subtle: #e8adad;
+ --ds-color-danger-border-default: #ce4d4d;
+ --ds-color-danger-border-strong: #b81a1a;
+ --ds-color-danger-text-subtle: #b81a1a;
+ --ds-color-danger-text-default: #590d0d;
+ --ds-color-danger-base-default: #C01B1B;
+ --ds-color-danger-base-hover: #9b1616;
+ --ds-color-danger-base-active: #791111;
+ --ds-color-danger-base-contrast-subtle: #f7e1e1;
+ --ds-color-danger-base-contrast-default: #ffffff;
+ --ds-color-focus-inner: #ffffff;
+ --ds-color-focus-outer: #1f2c3d;
+ --ds-link-color-visited: #663299;
+
+ color-scheme: light;
+}
+
+}
+
+}
+
+@layer ds.theme.typography.secondary {
+[data-typography="secondary"] {
+ --ds-line-height-sm: 1.3;
+ --ds-line-height-md: 1.5;
+ --ds-line-height-lg: 1.7;
+ --ds-letter-spacing-1: -0.01em;
+ --ds-letter-spacing-2: -0.005em;
+ --ds-letter-spacing-3: -0.0025em;
+ --ds-letter-spacing-4: -0.0015em;
+ --ds-letter-spacing-5: 0em;
+ --ds-letter-spacing-6: 0.0015em;
+ --ds-letter-spacing-7: 0.0025em;
+ --ds-letter-spacing-8: 0.005em;
+ --ds-letter-spacing-9: 0.015em;
+ --ds-font-family: IBM Plex Mono;
+ --ds-font-weight-medium: 500;
+ --ds-font-weight-semibold: 600;
+ --ds-font-weight-regular: 400;
+ --ds-heading-2xl-font-weight: 500;
+ --ds-heading-2xl-line-height: 1.3;
+ --ds-heading-2xl-letter-spacing: -0.01em;
+ --ds-heading-xl-font-weight: 500;
+ --ds-heading-xl-line-height: 1.3;
+ --ds-heading-xl-letter-spacing: -0.01em;
+ --ds-heading-lg-font-weight: 500;
+ --ds-heading-lg-line-height: 1.3;
+ --ds-heading-lg-letter-spacing: -0.005em;
+ --ds-heading-md-font-weight: 500;
+ --ds-heading-md-line-height: 1.3;
+ --ds-heading-md-letter-spacing: -0.0025em;
+ --ds-heading-sm-font-weight: 500;
+ --ds-heading-sm-line-height: 1.3;
+ --ds-heading-sm-letter-spacing: 0em;
+ --ds-heading-xs-font-weight: 500;
+ --ds-heading-xs-line-height: 1.3;
+ --ds-heading-xs-letter-spacing: 0.0015em;
+ --ds-heading-2xs-font-weight: 500;
+ --ds-heading-2xs-line-height: 1.3;
+ --ds-heading-2xs-letter-spacing: 0.0015em;
+ --ds-body-xl-font-weight: 400;
+ --ds-body-xl-line-height: 1.5;
+ --ds-body-xl-letter-spacing: 0.005em;
+ --ds-body-lg-font-weight: 400;
+ --ds-body-lg-line-height: 1.5;
+ --ds-body-lg-letter-spacing: 0.005em;
+ --ds-body-md-font-weight: 400;
+ --ds-body-md-line-height: 1.5;
+ --ds-body-md-letter-spacing: 0.005em;
+ --ds-body-sm-font-weight: 400;
+ --ds-body-sm-line-height: 1.5;
+ --ds-body-sm-letter-spacing: 0.0025em;
+ --ds-body-xs-font-weight: 400;
+ --ds-body-xs-line-height: 1.5;
+ --ds-body-xs-letter-spacing: 0.0015em;
+ --ds-body-short-xl-font-weight: 400;
+ --ds-body-short-xl-line-height: 1.3;
+ --ds-body-short-xl-letter-spacing: 0.005em;
+ --ds-body-short-lg-font-weight: 400;
+ --ds-body-short-lg-line-height: 1.3;
+ --ds-body-short-lg-letter-spacing: 0.005em;
+ --ds-body-short-md-font-weight: 400;
+ --ds-body-short-md-line-height: 1.3;
+ --ds-body-short-md-letter-spacing: 0.005em;
+ --ds-body-short-sm-font-weight: 400;
+ --ds-body-short-sm-line-height: 1.3;
+ --ds-body-short-sm-letter-spacing: 0.0025em;
+ --ds-body-short-xs-font-weight: 400;
+ --ds-body-short-xs-line-height: 1.3;
+ --ds-body-short-xs-letter-spacing: 0.0015em;
+ --ds-body-long-xl-font-weight: 400;
+ --ds-body-long-xl-line-height: 1.7;
+ --ds-body-long-xl-letter-spacing: 0.005em;
+ --ds-body-long-lg-font-weight: 400;
+ --ds-body-long-lg-line-height: 1.7;
+ --ds-body-long-lg-letter-spacing: 0.005em;
+ --ds-body-long-md-font-weight: 400;
+ --ds-body-long-md-line-height: 1.7;
+ --ds-body-long-md-letter-spacing: 0.005em;
+ --ds-body-long-sm-font-weight: 400;
+ --ds-body-long-sm-line-height: 1.7;
+ --ds-body-long-sm-letter-spacing: 0.0025em;
+ --ds-body-long-xs-font-weight: 400;
+ --ds-body-long-xs-line-height: 1.7;
+ --ds-body-long-xs-letter-spacing: 0.0015em;
+}
+}
+@layer ds.theme.size {
+:root, [data-size] {
+ --ds-size-base: 18;
+ --ds-size-step: 4;
+
+ --ds-size-0: calc(var(--ds-size-unit) * 0);
+ --ds-size-1: calc(var(--ds-size-unit) * 1);
+ --ds-size-2: calc(var(--ds-size-unit) * 2);
+ --ds-size-3: calc(var(--ds-size-unit) * 3);
+ --ds-size-4: calc(var(--ds-size-unit) * 4);
+ --ds-size-5: calc(var(--ds-size-unit) * 5);
+ --ds-size-6: calc(var(--ds-size-unit) * 6);
+ --ds-size-7: calc(var(--ds-size-unit) * 7);
+ --ds-size-8: calc(var(--ds-size-unit) * 8);
+ --ds-size-9: calc(var(--ds-size-unit) * 9);
+ --ds-size-10: calc(var(--ds-size-unit) * 10);
+ --ds-size-11: calc(var(--ds-size-unit) * 11);
+ --ds-size-12: calc(var(--ds-size-unit) * 12);
+ --ds-size-13: calc(var(--ds-size-unit) * 13);
+ --ds-size-14: calc(var(--ds-size-unit) * 14);
+ --ds-size-15: calc(var(--ds-size-unit) * 15);
+ --ds-size-18: calc(var(--ds-size-unit) * 18);
+ --ds-size-22: calc(var(--ds-size-unit) * 22);
+ --ds-size-26: calc(var(--ds-size-unit) * 26);
+ --ds-size-30: calc(var(--ds-size-unit) * 30);
+ --ds-size-unit: calc(1rem * var(--ds-size-step) / var(--ds-size-base) * var(--ds-size-mode-font-size));
+
+ @supports (width: round(down, .1em, 1px)) {
+ --ds-size-0: round(down, calc(var(--ds-size-unit) * 0), 1px);
+ --ds-size-1: round(down, calc(var(--ds-size-unit) * 1), 1px);
+ --ds-size-2: round(down, calc(var(--ds-size-unit) * 2), 1px);
+ --ds-size-3: round(down, calc(var(--ds-size-unit) * 3), 1px);
+ --ds-size-4: round(down, calc(var(--ds-size-unit) * 4), 1px);
+ --ds-size-5: round(down, calc(var(--ds-size-unit) * 5), 1px);
+ --ds-size-6: round(down, calc(var(--ds-size-unit) * 6), 1px);
+ --ds-size-7: round(down, calc(var(--ds-size-unit) * 7), 1px);
+ --ds-size-8: round(down, calc(var(--ds-size-unit) * 8), 1px);
+ --ds-size-9: round(down, calc(var(--ds-size-unit) * 9), 1px);
+ --ds-size-10: round(down, calc(var(--ds-size-unit) * 10), 1px);
+ --ds-size-11: round(down, calc(var(--ds-size-unit) * 11), 1px);
+ --ds-size-12: round(down, calc(var(--ds-size-unit) * 12), 1px);
+ --ds-size-13: round(down, calc(var(--ds-size-unit) * 13), 1px);
+ --ds-size-14: round(down, calc(var(--ds-size-unit) * 14), 1px);
+ --ds-size-15: round(down, calc(var(--ds-size-unit) * 15), 1px);
+ --ds-size-18: round(down, calc(var(--ds-size-unit) * 18), 1px);
+ --ds-size-22: round(down, calc(var(--ds-size-unit) * 22), 1px);
+ --ds-size-26: round(down, calc(var(--ds-size-unit) * 26), 1px);
+ --ds-size-30: round(down, calc(var(--ds-size-unit) * 30), 1px);
+ }
+}
+
+}
+
+@layer ds.theme.semantic {
+:root {
+ --ds-border-radius-base: 0.25rem;
+ --ds-border-radius-scale: 0.25rem;
+ --ds-border-radius-sm: min(var(--ds-border-radius-base)*0.5,var(--ds-border-radius-scale));
+ --ds-border-radius-md: min(var(--ds-border-radius-base),var(--ds-border-radius-scale)*2);
+ --ds-border-radius-lg: min(var(--ds-border-radius-base)*2,var(--ds-border-radius-scale)*5);
+ --ds-border-radius-xl: min(var(--ds-border-radius-base)*3,var(--ds-border-radius-scale)*7);
+ --ds-border-radius-default: var(--ds-border-radius-base);
+ --ds-border-radius-full: 624.9375rem;
+ --ds-border-width-default: 1px;
+ --ds-border-width-focus: 3px;
+ --ds-shadow-xs: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12);
+ --ds-shadow-sm: 0 0 1px 0 rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.1);
+ --ds-shadow-md: 0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12);
+ --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14);
+ --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16);
+ --ds-opacity-disabled: 30%;
+}
+
+}
+
+@layer ds.theme.color-scheme.dark {
+[data-color-scheme="dark"] {
+ --ds-color-accent-background-default: #0c1927;
+ --ds-color-accent-background-tinted: #102033;
+ --ds-color-accent-surface-default: #142941;
+ --ds-color-accent-surface-tinted: #172f4b;
+ --ds-color-accent-surface-hover: #1a3757;
+ --ds-color-accent-surface-active: #21446d;
+ --ds-color-accent-border-subtle: #285182;
+ --ds-color-accent-border-default: #5a84b4;
+ --ds-color-accent-border-strong: #8eaacb;
+ --ds-color-accent-text-subtle: #8eaacb;
+ --ds-color-accent-text-default: #e7edf4;
+ --ds-color-accent-base-default: #4c91cf;
+ --ds-color-accent-base-hover: #6fa6d8;
+ --ds-color-accent-base-active: #92bce1;
+ --ds-color-accent-base-contrast-subtle: #0d1924;
+ --ds-color-accent-base-contrast-default: #000000;
+ --ds-color-neutral-background-default: #13181f;
+ --ds-color-neutral-background-tinted: #192029;
+ --ds-color-neutral-surface-default: #202834;
+ --ds-color-neutral-surface-tinted: #262e3a;
+ --ds-color-neutral-surface-hover: #2e3641;
+ --ds-color-neutral-surface-active: #3c444e;
+ --ds-color-neutral-border-subtle: #49515a;
+ --ds-color-neutral-border-default: #7c8289;
+ --ds-color-neutral-border-strong: #a4a8ad;
+ --ds-color-neutral-text-subtle: #a4a8ad;
+ --ds-color-neutral-text-default: #ebeced;
+ --ds-color-neutral-base-default: #a6acb2;
+ --ds-color-neutral-base-hover: #90979f;
+ --ds-color-neutral-base-active: #7a828c;
+ --ds-color-neutral-base-contrast-subtle: #1b1c1d;
+ --ds-color-neutral-base-contrast-default: #000000;
+ --ds-color-brand1-background-default: #241313;
+ --ds-color-brand1-background-tinted: #301919;
+ --ds-color-brand1-surface-default: #3c2020;
+ --ds-color-brand1-surface-tinted: #452524;
+ --ds-color-brand1-surface-hover: #502b2a;
+ --ds-color-brand1-surface-active: #653635;
+ --ds-color-brand1-border-subtle: #78403f;
+ --ds-color-brand1-border-default: #c16766;
+ --ds-color-brand1-border-strong: #e39291;
+ --ds-color-brand1-text-subtle: #e39291;
+ --ds-color-brand1-text-default: #f9e8e8;
+ --ds-color-brand1-base-default: #9f3e41;
+ --ds-color-brand1-base-hover: #7f3234;
+ --ds-color-brand1-base-active: #612628;
+ --ds-color-brand1-base-contrast-subtle: #ffffff;
+ --ds-color-brand1-base-contrast-default: #ffffff;
+ --ds-color-brand2-background-default: #1c170d;
+ --ds-color-brand2-background-tinted: #261f11;
+ --ds-color-brand2-surface-default: #2f2716;
+ --ds-color-brand2-surface-tinted: #372c19;
+ --ds-color-brand2-surface-hover: #40341d;
+ --ds-color-brand2-surface-active: #504124;
+ --ds-color-brand2-border-subtle: #5f4e2b;
+ --ds-color-brand2-border-default: #9a7d46;
+ --ds-color-brand2-border-strong: #c8a25b;
+ --ds-color-brand2-text-subtle: #c8a25b;
+ --ds-color-brand2-text-default: #f5ebd8;
+ --ds-color-brand2-base-default: #513c0b;
+ --ds-color-brand2-base-hover: #694e0f;
+ --ds-color-brand2-base-active: #816012;
+ --ds-color-brand2-base-contrast-subtle: #ddd9cf;
+ --ds-color-brand2-base-contrast-default: #ffffff;
+ --ds-color-brand3-background-default: #0e1923;
+ --ds-color-brand3-background-tinted: #12212e;
+ --ds-color-brand3-surface-default: #17293b;
+ --ds-color-brand3-surface-tinted: #1a2f43;
+ --ds-color-brand3-surface-hover: #1e374f;
+ --ds-color-brand3-surface-active: #264563;
+ --ds-color-brand3-border-subtle: #2d5376;
+ --ds-color-brand3-border-default: #4985be;
+ --ds-color-brand3-border-strong: #76ade0;
+ --ds-color-brand3-text-subtle: #76ade0;
+ --ds-color-brand3-text-default: #e2eef8;
+ --ds-color-brand3-base-default: #135f9a;
+ --ds-color-brand3-base-hover: #0f4c7a;
+ --ds-color-brand3-base-active: #0b395d;
+ --ds-color-brand3-base-contrast-subtle: #fbfcfd;
+ --ds-color-brand3-base-contrast-default: #ffffff;
+ --ds-color-info-background-default: #0d1925;
+ --ds-color-info-background-tinted: #112130;
+ --ds-color-info-surface-default: #15293d;
+ --ds-color-info-surface-tinted: #182f46;
+ --ds-color-info-surface-hover: #1c3751;
+ --ds-color-info-surface-active: #234566;
+ --ds-color-info-border-subtle: #2a537a;
+ --ds-color-info-border-default: #5585b4;
+ --ds-color-info-border-strong: #8aabcb;
+ --ds-color-info-text-subtle: #8aabcb;
+ --ds-color-info-text-default: #e6edf4;
+ --ds-color-info-base-default: #2d85c9;
+ --ds-color-info-base-hover: #519ad2;
+ --ds-color-info-base-active: #77b0dc;
+ --ds-color-info-base-contrast-subtle: #050e15;
+ --ds-color-info-base-contrast-default: #000000;
+ --ds-color-success-background-default: #0d1b0d;
+ --ds-color-success-background-tinted: #112411;
+ --ds-color-success-surface-default: #152d15;
+ --ds-color-success-surface-tinted: #183418;
+ --ds-color-success-surface-hover: #1c3c1c;
+ --ds-color-success-surface-active: #244c24;
+ --ds-color-success-border-subtle: #2b5a2b;
+ --ds-color-success-border-default: #528f52;
+ --ds-color-success-border-strong: #89b289;
+ --ds-color-success-text-subtle: #89b289;
+ --ds-color-success-text-default: #e6efe6;
+ --ds-color-success-base-default: #138d24;
+ --ds-color-success-base-hover: #3ca14b;
+ --ds-color-success-base-active: #66b571;
+ --ds-color-success-base-contrast-subtle: #010501;
+ --ds-color-success-base-contrast-default: #000000;
+ --ds-color-warning-background-default: #1e160d;
+ --ds-color-warning-background-tinted: #281e11;
+ --ds-color-warning-surface-default: #322616;
+ --ds-color-warning-surface-tinted: #3a2b19;
+ --ds-color-warning-surface-hover: #43321d;
+ --ds-color-warning-surface-active: #543f24;
+ --ds-color-warning-border-subtle: #654b2b;
+ --ds-color-warning-border-default: #a37a46;
+ --ds-color-warning-border-strong: #d39e5b;
+ --ds-color-warning-text-subtle: #d39e5b;
+ --ds-color-warning-text-default: #f7ebdb;
+ --ds-color-warning-base-default: #60400b;
+ --ds-color-warning-base-hover: #7a510e;
+ --ds-color-warning-base-active: #946211;
+ --ds-color-warning-base-contrast-subtle: #e6e2d9;
+ --ds-color-warning-base-contrast-default: #ffffff;
+ --ds-color-danger-background-default: #2a100e;
+ --ds-color-danger-background-tinted: #371512;
+ --ds-color-danger-surface-default: #451b17;
+ --ds-color-danger-surface-tinted: #4f1f1b;
+ --ds-color-danger-surface-hover: #5c241f;
+ --ds-color-danger-surface-active: #722d27;
+ --ds-color-danger-border-subtle: #88352e;
+ --ds-color-danger-border-default: #bc6b64;
+ --ds-color-danger-border-strong: #d19a96;
+ --ds-color-danger-text-subtle: #d19a96;
+ --ds-color-danger-text-default: #f5eae9;
+ --ds-color-danger-base-default: #d76e6e;
+ --ds-color-danger-base-hover: #df8b8b;
+ --ds-color-danger-base-active: #e7a8a8;
+ --ds-color-danger-base-contrast-subtle: #271414;
+ --ds-color-danger-base-contrast-default: #000000;
+ --ds-color-focus-inner: #13181f;
+ --ds-color-focus-outer: #ebeced;
+ --ds-link-color-visited: #b49acd;
+
+ color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+ [data-color-scheme="auto"] {
+ --ds-color-accent-background-default: #0c1927;
+ --ds-color-accent-background-tinted: #102033;
+ --ds-color-accent-surface-default: #142941;
+ --ds-color-accent-surface-tinted: #172f4b;
+ --ds-color-accent-surface-hover: #1a3757;
+ --ds-color-accent-surface-active: #21446d;
+ --ds-color-accent-border-subtle: #285182;
+ --ds-color-accent-border-default: #5a84b4;
+ --ds-color-accent-border-strong: #8eaacb;
+ --ds-color-accent-text-subtle: #8eaacb;
+ --ds-color-accent-text-default: #e7edf4;
+ --ds-color-accent-base-default: #4c91cf;
+ --ds-color-accent-base-hover: #6fa6d8;
+ --ds-color-accent-base-active: #92bce1;
+ --ds-color-accent-base-contrast-subtle: #0d1924;
+ --ds-color-accent-base-contrast-default: #000000;
+ --ds-color-neutral-background-default: #13181f;
+ --ds-color-neutral-background-tinted: #192029;
+ --ds-color-neutral-surface-default: #202834;
+ --ds-color-neutral-surface-tinted: #262e3a;
+ --ds-color-neutral-surface-hover: #2e3641;
+ --ds-color-neutral-surface-active: #3c444e;
+ --ds-color-neutral-border-subtle: #49515a;
+ --ds-color-neutral-border-default: #7c8289;
+ --ds-color-neutral-border-strong: #a4a8ad;
+ --ds-color-neutral-text-subtle: #a4a8ad;
+ --ds-color-neutral-text-default: #ebeced;
+ --ds-color-neutral-base-default: #a6acb2;
+ --ds-color-neutral-base-hover: #90979f;
+ --ds-color-neutral-base-active: #7a828c;
+ --ds-color-neutral-base-contrast-subtle: #1b1c1d;
+ --ds-color-neutral-base-contrast-default: #000000;
+ --ds-color-brand1-background-default: #241313;
+ --ds-color-brand1-background-tinted: #301919;
+ --ds-color-brand1-surface-default: #3c2020;
+ --ds-color-brand1-surface-tinted: #452524;
+ --ds-color-brand1-surface-hover: #502b2a;
+ --ds-color-brand1-surface-active: #653635;
+ --ds-color-brand1-border-subtle: #78403f;
+ --ds-color-brand1-border-default: #c16766;
+ --ds-color-brand1-border-strong: #e39291;
+ --ds-color-brand1-text-subtle: #e39291;
+ --ds-color-brand1-text-default: #f9e8e8;
+ --ds-color-brand1-base-default: #9f3e41;
+ --ds-color-brand1-base-hover: #7f3234;
+ --ds-color-brand1-base-active: #612628;
+ --ds-color-brand1-base-contrast-subtle: #ffffff;
+ --ds-color-brand1-base-contrast-default: #ffffff;
+ --ds-color-brand2-background-default: #1c170d;
+ --ds-color-brand2-background-tinted: #261f11;
+ --ds-color-brand2-surface-default: #2f2716;
+ --ds-color-brand2-surface-tinted: #372c19;
+ --ds-color-brand2-surface-hover: #40341d;
+ --ds-color-brand2-surface-active: #504124;
+ --ds-color-brand2-border-subtle: #5f4e2b;
+ --ds-color-brand2-border-default: #9a7d46;
+ --ds-color-brand2-border-strong: #c8a25b;
+ --ds-color-brand2-text-subtle: #c8a25b;
+ --ds-color-brand2-text-default: #f5ebd8;
+ --ds-color-brand2-base-default: #513c0b;
+ --ds-color-brand2-base-hover: #694e0f;
+ --ds-color-brand2-base-active: #816012;
+ --ds-color-brand2-base-contrast-subtle: #ddd9cf;
+ --ds-color-brand2-base-contrast-default: #ffffff;
+ --ds-color-brand3-background-default: #0e1923;
+ --ds-color-brand3-background-tinted: #12212e;
+ --ds-color-brand3-surface-default: #17293b;
+ --ds-color-brand3-surface-tinted: #1a2f43;
+ --ds-color-brand3-surface-hover: #1e374f;
+ --ds-color-brand3-surface-active: #264563;
+ --ds-color-brand3-border-subtle: #2d5376;
+ --ds-color-brand3-border-default: #4985be;
+ --ds-color-brand3-border-strong: #76ade0;
+ --ds-color-brand3-text-subtle: #76ade0;
+ --ds-color-brand3-text-default: #e2eef8;
+ --ds-color-brand3-base-default: #135f9a;
+ --ds-color-brand3-base-hover: #0f4c7a;
+ --ds-color-brand3-base-active: #0b395d;
+ --ds-color-brand3-base-contrast-subtle: #fbfcfd;
+ --ds-color-brand3-base-contrast-default: #ffffff;
+ --ds-color-info-background-default: #0d1925;
+ --ds-color-info-background-tinted: #112130;
+ --ds-color-info-surface-default: #15293d;
+ --ds-color-info-surface-tinted: #182f46;
+ --ds-color-info-surface-hover: #1c3751;
+ --ds-color-info-surface-active: #234566;
+ --ds-color-info-border-subtle: #2a537a;
+ --ds-color-info-border-default: #5585b4;
+ --ds-color-info-border-strong: #8aabcb;
+ --ds-color-info-text-subtle: #8aabcb;
+ --ds-color-info-text-default: #e6edf4;
+ --ds-color-info-base-default: #2d85c9;
+ --ds-color-info-base-hover: #519ad2;
+ --ds-color-info-base-active: #77b0dc;
+ --ds-color-info-base-contrast-subtle: #050e15;
+ --ds-color-info-base-contrast-default: #000000;
+ --ds-color-success-background-default: #0d1b0d;
+ --ds-color-success-background-tinted: #112411;
+ --ds-color-success-surface-default: #152d15;
+ --ds-color-success-surface-tinted: #183418;
+ --ds-color-success-surface-hover: #1c3c1c;
+ --ds-color-success-surface-active: #244c24;
+ --ds-color-success-border-subtle: #2b5a2b;
+ --ds-color-success-border-default: #528f52;
+ --ds-color-success-border-strong: #89b289;
+ --ds-color-success-text-subtle: #89b289;
+ --ds-color-success-text-default: #e6efe6;
+ --ds-color-success-base-default: #138d24;
+ --ds-color-success-base-hover: #3ca14b;
+ --ds-color-success-base-active: #66b571;
+ --ds-color-success-base-contrast-subtle: #010501;
+ --ds-color-success-base-contrast-default: #000000;
+ --ds-color-warning-background-default: #1e160d;
+ --ds-color-warning-background-tinted: #281e11;
+ --ds-color-warning-surface-default: #322616;
+ --ds-color-warning-surface-tinted: #3a2b19;
+ --ds-color-warning-surface-hover: #43321d;
+ --ds-color-warning-surface-active: #543f24;
+ --ds-color-warning-border-subtle: #654b2b;
+ --ds-color-warning-border-default: #a37a46;
+ --ds-color-warning-border-strong: #d39e5b;
+ --ds-color-warning-text-subtle: #d39e5b;
+ --ds-color-warning-text-default: #f7ebdb;
+ --ds-color-warning-base-default: #60400b;
+ --ds-color-warning-base-hover: #7a510e;
+ --ds-color-warning-base-active: #946211;
+ --ds-color-warning-base-contrast-subtle: #e6e2d9;
+ --ds-color-warning-base-contrast-default: #ffffff;
+ --ds-color-danger-background-default: #2a100e;
+ --ds-color-danger-background-tinted: #371512;
+ --ds-color-danger-surface-default: #451b17;
+ --ds-color-danger-surface-tinted: #4f1f1b;
+ --ds-color-danger-surface-hover: #5c241f;
+ --ds-color-danger-surface-active: #722d27;
+ --ds-color-danger-border-subtle: #88352e;
+ --ds-color-danger-border-default: #bc6b64;
+ --ds-color-danger-border-strong: #d19a96;
+ --ds-color-danger-text-subtle: #d19a96;
+ --ds-color-danger-text-default: #f5eae9;
+ --ds-color-danger-base-default: #d76e6e;
+ --ds-color-danger-base-hover: #df8b8b;
+ --ds-color-danger-base-active: #e7a8a8;
+ --ds-color-danger-base-contrast-subtle: #271414;
+ --ds-color-danger-base-contrast-default: #000000;
+ --ds-color-focus-inner: #13181f;
+ --ds-color-focus-outer: #ebeced;
+ --ds-link-color-visited: #b49acd;
+
+ color-scheme: dark;
+}
+
+}
+
+}
+
+@layer ds.theme.typography.primary {
+:root, [data-typography="primary"] {
+ --ds-line-height-sm: 1.3;
+ --ds-line-height-md: 1.5;
+ --ds-line-height-lg: 1.7;
+ --ds-letter-spacing-1: -0.01em;
+ --ds-letter-spacing-2: -0.005em;
+ --ds-letter-spacing-3: -0.0025em;
+ --ds-letter-spacing-4: -0.0015em;
+ --ds-letter-spacing-5: 0em;
+ --ds-letter-spacing-6: 0.0015em;
+ --ds-letter-spacing-7: 0.0025em;
+ --ds-letter-spacing-8: 0.005em;
+ --ds-letter-spacing-9: 0.015em;
+ --ds-font-family: Inter;
+ --ds-font-weight-medium: 500;
+ --ds-font-weight-semibold: 600;
+ --ds-font-weight-regular: 400;
+ --ds-heading-2xl-font-weight: 500;
+ --ds-heading-2xl-line-height: 1.3;
+ --ds-heading-2xl-letter-spacing: -0.01em;
+ --ds-heading-xl-font-weight: 500;
+ --ds-heading-xl-line-height: 1.3;
+ --ds-heading-xl-letter-spacing: -0.01em;
+ --ds-heading-lg-font-weight: 500;
+ --ds-heading-lg-line-height: 1.3;
+ --ds-heading-lg-letter-spacing: -0.005em;
+ --ds-heading-md-font-weight: 500;
+ --ds-heading-md-line-height: 1.3;
+ --ds-heading-md-letter-spacing: -0.0025em;
+ --ds-heading-sm-font-weight: 500;
+ --ds-heading-sm-line-height: 1.3;
+ --ds-heading-sm-letter-spacing: 0em;
+ --ds-heading-xs-font-weight: 500;
+ --ds-heading-xs-line-height: 1.3;
+ --ds-heading-xs-letter-spacing: 0.0015em;
+ --ds-heading-2xs-font-weight: 500;
+ --ds-heading-2xs-line-height: 1.3;
+ --ds-heading-2xs-letter-spacing: 0.0015em;
+ --ds-body-xl-font-weight: 400;
+ --ds-body-xl-line-height: 1.5;
+ --ds-body-xl-letter-spacing: 0.005em;
+ --ds-body-lg-font-weight: 400;
+ --ds-body-lg-line-height: 1.5;
+ --ds-body-lg-letter-spacing: 0.005em;
+ --ds-body-md-font-weight: 400;
+ --ds-body-md-line-height: 1.5;
+ --ds-body-md-letter-spacing: 0.005em;
+ --ds-body-sm-font-weight: 400;
+ --ds-body-sm-line-height: 1.5;
+ --ds-body-sm-letter-spacing: 0.0025em;
+ --ds-body-xs-font-weight: 400;
+ --ds-body-xs-line-height: 1.5;
+ --ds-body-xs-letter-spacing: 0.0015em;
+ --ds-body-short-xl-font-weight: 400;
+ --ds-body-short-xl-line-height: 1.3;
+ --ds-body-short-xl-letter-spacing: 0.005em;
+ --ds-body-short-lg-font-weight: 400;
+ --ds-body-short-lg-line-height: 1.3;
+ --ds-body-short-lg-letter-spacing: 0.005em;
+ --ds-body-short-md-font-weight: 400;
+ --ds-body-short-md-line-height: 1.3;
+ --ds-body-short-md-letter-spacing: 0.005em;
+ --ds-body-short-sm-font-weight: 400;
+ --ds-body-short-sm-line-height: 1.3;
+ --ds-body-short-sm-letter-spacing: 0.0025em;
+ --ds-body-short-xs-font-weight: 400;
+ --ds-body-short-xs-line-height: 1.3;
+ --ds-body-short-xs-letter-spacing: 0.0015em;
+ --ds-body-long-xl-font-weight: 400;
+ --ds-body-long-xl-line-height: 1.7;
+ --ds-body-long-xl-letter-spacing: 0.005em;
+ --ds-body-long-lg-font-weight: 400;
+ --ds-body-long-lg-line-height: 1.7;
+ --ds-body-long-lg-letter-spacing: 0.005em;
+ --ds-body-long-md-font-weight: 400;
+ --ds-body-long-md-line-height: 1.7;
+ --ds-body-long-md-letter-spacing: 0.005em;
+ --ds-body-long-sm-font-weight: 400;
+ --ds-body-long-sm-line-height: 1.7;
+ --ds-body-long-sm-letter-spacing: 0.0025em;
+ --ds-body-long-xs-font-weight: 400;
+ --ds-body-long-xs-line-height: 1.7;
+ --ds-body-long-xs-letter-spacing: 0.0015em;
+}
+}
+@layer ds.theme.color {
+:root, [data-color-scheme], [data-color="accent"] {
+ --ds-color-background-default: var(--ds-color-accent-background-default);
+ --ds-color-background-tinted: var(--ds-color-accent-background-tinted);
+ --ds-color-surface-default: var(--ds-color-accent-surface-default);
+ --ds-color-surface-tinted: var(--ds-color-accent-surface-tinted);
+ --ds-color-surface-hover: var(--ds-color-accent-surface-hover);
+ --ds-color-surface-active: var(--ds-color-accent-surface-active);
+ --ds-color-border-subtle: var(--ds-color-accent-border-subtle);
+ --ds-color-border-default: var(--ds-color-accent-border-default);
+ --ds-color-border-strong: var(--ds-color-accent-border-strong);
+ --ds-color-text-subtle: var(--ds-color-accent-text-subtle);
+ --ds-color-text-default: var(--ds-color-accent-text-default);
+ --ds-color-base-default: var(--ds-color-accent-base-default);
+ --ds-color-base-hover: var(--ds-color-accent-base-hover);
+ --ds-color-base-active: var(--ds-color-accent-base-active);
+ --ds-color-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle);
+ --ds-color-base-contrast-default: var(--ds-color-accent-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="brand1"], [data-color-scheme][data-color="brand1"] {
+ --ds-color-background-default: var(--ds-color-brand1-background-default);
+ --ds-color-background-tinted: var(--ds-color-brand1-background-tinted);
+ --ds-color-surface-default: var(--ds-color-brand1-surface-default);
+ --ds-color-surface-tinted: var(--ds-color-brand1-surface-tinted);
+ --ds-color-surface-hover: var(--ds-color-brand1-surface-hover);
+ --ds-color-surface-active: var(--ds-color-brand1-surface-active);
+ --ds-color-border-subtle: var(--ds-color-brand1-border-subtle);
+ --ds-color-border-default: var(--ds-color-brand1-border-default);
+ --ds-color-border-strong: var(--ds-color-brand1-border-strong);
+ --ds-color-text-subtle: var(--ds-color-brand1-text-subtle);
+ --ds-color-text-default: var(--ds-color-brand1-text-default);
+ --ds-color-base-default: var(--ds-color-brand1-base-default);
+ --ds-color-base-hover: var(--ds-color-brand1-base-hover);
+ --ds-color-base-active: var(--ds-color-brand1-base-active);
+ --ds-color-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle);
+ --ds-color-base-contrast-default: var(--ds-color-brand1-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="brand2"], [data-color-scheme][data-color="brand2"] {
+ --ds-color-background-default: var(--ds-color-brand2-background-default);
+ --ds-color-background-tinted: var(--ds-color-brand2-background-tinted);
+ --ds-color-surface-default: var(--ds-color-brand2-surface-default);
+ --ds-color-surface-tinted: var(--ds-color-brand2-surface-tinted);
+ --ds-color-surface-hover: var(--ds-color-brand2-surface-hover);
+ --ds-color-surface-active: var(--ds-color-brand2-surface-active);
+ --ds-color-border-subtle: var(--ds-color-brand2-border-subtle);
+ --ds-color-border-default: var(--ds-color-brand2-border-default);
+ --ds-color-border-strong: var(--ds-color-brand2-border-strong);
+ --ds-color-text-subtle: var(--ds-color-brand2-text-subtle);
+ --ds-color-text-default: var(--ds-color-brand2-text-default);
+ --ds-color-base-default: var(--ds-color-brand2-base-default);
+ --ds-color-base-hover: var(--ds-color-brand2-base-hover);
+ --ds-color-base-active: var(--ds-color-brand2-base-active);
+ --ds-color-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle);
+ --ds-color-base-contrast-default: var(--ds-color-brand2-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="brand3"], [data-color-scheme][data-color="brand3"] {
+ --ds-color-background-default: var(--ds-color-brand3-background-default);
+ --ds-color-background-tinted: var(--ds-color-brand3-background-tinted);
+ --ds-color-surface-default: var(--ds-color-brand3-surface-default);
+ --ds-color-surface-tinted: var(--ds-color-brand3-surface-tinted);
+ --ds-color-surface-hover: var(--ds-color-brand3-surface-hover);
+ --ds-color-surface-active: var(--ds-color-brand3-surface-active);
+ --ds-color-border-subtle: var(--ds-color-brand3-border-subtle);
+ --ds-color-border-default: var(--ds-color-brand3-border-default);
+ --ds-color-border-strong: var(--ds-color-brand3-border-strong);
+ --ds-color-text-subtle: var(--ds-color-brand3-text-subtle);
+ --ds-color-text-default: var(--ds-color-brand3-text-default);
+ --ds-color-base-default: var(--ds-color-brand3-base-default);
+ --ds-color-base-hover: var(--ds-color-brand3-base-hover);
+ --ds-color-base-active: var(--ds-color-brand3-base-active);
+ --ds-color-base-contrast-subtle: var(--ds-color-brand3-base-contrast-subtle);
+ --ds-color-base-contrast-default: var(--ds-color-brand3-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="danger"], [data-color-scheme][data-color="danger"] {
+ --ds-color-background-default: var(--ds-color-danger-background-default);
+ --ds-color-background-tinted: var(--ds-color-danger-background-tinted);
+ --ds-color-surface-default: var(--ds-color-danger-surface-default);
+ --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted);
+ --ds-color-surface-hover: var(--ds-color-danger-surface-hover);
+ --ds-color-surface-active: var(--ds-color-danger-surface-active);
+ --ds-color-border-subtle: var(--ds-color-danger-border-subtle);
+ --ds-color-border-default: var(--ds-color-danger-border-default);
+ --ds-color-border-strong: var(--ds-color-danger-border-strong);
+ --ds-color-text-subtle: var(--ds-color-danger-text-subtle);
+ --ds-color-text-default: var(--ds-color-danger-text-default);
+ --ds-color-base-default: var(--ds-color-danger-base-default);
+ --ds-color-base-hover: var(--ds-color-danger-base-hover);
+ --ds-color-base-active: var(--ds-color-danger-base-active);
+ --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle);
+ --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="info"], [data-color-scheme][data-color="info"] {
+ --ds-color-background-default: var(--ds-color-info-background-default);
+ --ds-color-background-tinted: var(--ds-color-info-background-tinted);
+ --ds-color-surface-default: var(--ds-color-info-surface-default);
+ --ds-color-surface-tinted: var(--ds-color-info-surface-tinted);
+ --ds-color-surface-hover: var(--ds-color-info-surface-hover);
+ --ds-color-surface-active: var(--ds-color-info-surface-active);
+ --ds-color-border-subtle: var(--ds-color-info-border-subtle);
+ --ds-color-border-default: var(--ds-color-info-border-default);
+ --ds-color-border-strong: var(--ds-color-info-border-strong);
+ --ds-color-text-subtle: var(--ds-color-info-text-subtle);
+ --ds-color-text-default: var(--ds-color-info-text-default);
+ --ds-color-base-default: var(--ds-color-info-base-default);
+ --ds-color-base-hover: var(--ds-color-info-base-hover);
+ --ds-color-base-active: var(--ds-color-info-base-active);
+ --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle);
+ --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="neutral"], [data-color-scheme][data-color="neutral"] {
+ --ds-color-background-default: var(--ds-color-neutral-background-default);
+ --ds-color-background-tinted: var(--ds-color-neutral-background-tinted);
+ --ds-color-surface-default: var(--ds-color-neutral-surface-default);
+ --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted);
+ --ds-color-surface-hover: var(--ds-color-neutral-surface-hover);
+ --ds-color-surface-active: var(--ds-color-neutral-surface-active);
+ --ds-color-border-subtle: var(--ds-color-neutral-border-subtle);
+ --ds-color-border-default: var(--ds-color-neutral-border-default);
+ --ds-color-border-strong: var(--ds-color-neutral-border-strong);
+ --ds-color-text-subtle: var(--ds-color-neutral-text-subtle);
+ --ds-color-text-default: var(--ds-color-neutral-text-default);
+ --ds-color-base-default: var(--ds-color-neutral-base-default);
+ --ds-color-base-hover: var(--ds-color-neutral-base-hover);
+ --ds-color-base-active: var(--ds-color-neutral-base-active);
+ --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle);
+ --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="success"], [data-color-scheme][data-color="success"] {
+ --ds-color-background-default: var(--ds-color-success-background-default);
+ --ds-color-background-tinted: var(--ds-color-success-background-tinted);
+ --ds-color-surface-default: var(--ds-color-success-surface-default);
+ --ds-color-surface-tinted: var(--ds-color-success-surface-tinted);
+ --ds-color-surface-hover: var(--ds-color-success-surface-hover);
+ --ds-color-surface-active: var(--ds-color-success-surface-active);
+ --ds-color-border-subtle: var(--ds-color-success-border-subtle);
+ --ds-color-border-default: var(--ds-color-success-border-default);
+ --ds-color-border-strong: var(--ds-color-success-border-strong);
+ --ds-color-text-subtle: var(--ds-color-success-text-subtle);
+ --ds-color-text-default: var(--ds-color-success-text-default);
+ --ds-color-base-default: var(--ds-color-success-base-default);
+ --ds-color-base-hover: var(--ds-color-success-base-hover);
+ --ds-color-base-active: var(--ds-color-success-base-active);
+ --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle);
+ --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="warning"], [data-color-scheme][data-color="warning"] {
+ --ds-color-background-default: var(--ds-color-warning-background-default);
+ --ds-color-background-tinted: var(--ds-color-warning-background-tinted);
+ --ds-color-surface-default: var(--ds-color-warning-surface-default);
+ --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted);
+ --ds-color-surface-hover: var(--ds-color-warning-surface-hover);
+ --ds-color-surface-active: var(--ds-color-warning-surface-active);
+ --ds-color-border-subtle: var(--ds-color-warning-border-subtle);
+ --ds-color-border-default: var(--ds-color-warning-border-default);
+ --ds-color-border-strong: var(--ds-color-warning-border-strong);
+ --ds-color-text-subtle: var(--ds-color-warning-text-subtle);
+ --ds-color-text-default: var(--ds-color-warning-text-default);
+ --ds-color-base-default: var(--ds-color-warning-base-default);
+ --ds-color-base-hover: var(--ds-color-warning-base-hover);
+ --ds-color-base-active: var(--ds-color-warning-base-active);
+ --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle);
+ --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default);
+}
+
+}
+
+/* --- base.css --- */
+.ds-sr-only{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:root{--ds-font-size-minus-1:max(0.9em, 0.875rem);--ds-font-size-plus-1:1.1em;--ds-readonly-icon-size:var(--ds-icon-size);--ds-readonly-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20aria-hidden%3D%22true%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12%202.25A4.75%204.75%200%200%200%207.25%207v2.25H7A1.75%201.75%200%200%200%205.25%2011v9c0%20.41.34.75.75.75h12a.75.75%200%200%200%20.75-.75v-9A1.75%201.75%200%200%200%2017%209.25h-.25V7A4.75%204.75%200%200%200%2012%202.25m3.25%207V7a3.25%203.25%200%200%200-6.5%200v2.25zM12%2013a1.5%201.5%200%200%200-.75%202.8V17a.75.75%200%200%200%201.5%200v-1.2A1.5%201.5%200%200%200%2012%2013%22%2F%3E%3C%2Fsvg%3E");--ds-icon-size:var(--ds-size-6)}@supports (width:round(down,0.1em,1px)){:root{--ds-font-size-minus-1:round(down, max(0.9em, 0.875rem), 1px);--ds-font-size-plus-1:round(down, 1.1em, 1px)}}:root,[data-color-scheme]{--dsc-focus-boxShadow:0 0 0 var(--ds-border-width-focus) var(--ds-color-focus-inner);--dsc-focus-boxShadow-inset:inset 0 0 0 calc(var(--ds-border-width-focus)*2) var(--ds-color-focus-inner);--dsc-focus-boxShadow-middle:inset 0 0 0 var(--ds-border-width-focus) var(--ds-color-focus-inner);--dsc-focus-outline:var(--ds-color-focus-outer) solid var(--ds-border-width-focus)}[data-color-scheme],body{color:var(--ds-color-neutral-text-default);background:var(--ds-color-neutral-background-default)}.ds-icon{display:inline-block;flex-shrink:0;font-size:1em;height:var(--ds-icon-size);vertical-align:middle;width:var(--ds-icon-size)}.ds-readonly-icon:before{background:currentcolor;content:"";display:inline-block;height:calc(1em*var(--ds-line-height-md));height:1lh;margin-inline-end:.25ch;-webkit-mask:center/contain no-repeat var(--ds-readonly-icon-url);mask:center/contain no-repeat var(--ds-readonly-icon-url);vertical-align:bottom;width:var(--ds-readonly-icon-size);-webkit-print-color-adjust:exact;print-color-adjust:exact}@media (forced-colors:active){.ds-readonly-icon:before{background:CanvasText}}.ds-print-preserve{-webkit-print-color-adjust:exact;print-color-adjust:exact}.ds-focus:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-focus:focus-visible *{--_ds--focus:}.ds-focus--inset:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow-inset));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:calc(var(--_ds--focus, var(--ds-border-width-focus))*-1)}.ds-focus--inset:focus-visible *{--_ds--focus:}.ds-focus--middle:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow-middle));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:calc(var(--_ds--focus, 0))}.ds-focus--middle:focus-visible *{--_ds--focus:}.ds-focus--visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-focus--visible *{--_ds--focus:}.ds-focus--visible--inset{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow-inset));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:calc(var(--_ds--focus, var(--ds-border-width-focus))*-1)}.ds-focus--visible--inset *{--_ds--focus:}.ds-focus--visible--middle{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow-middle));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:calc(var(--_ds--focus, 0))}.ds-focus--visible--middle *{--_ds--focus:}.ds-checkbox--checked{--_stroke-width-fallback:0.05em;--_diagonal-1:transparent calc(48% - var(--_stroke-width, var(--_stroke-width-fallback)));--_diagonal-2:currentcolor calc(50% - var(--_stroke-width, var(--_stroke-width-fallback)));--_diagonal-3:currentcolor calc(50% + var(--_stroke-width, var(--_stroke-width-fallback)));--_diagonal-4:transparent calc(52% + var(--_stroke-width, var(--_stroke-width-fallback)));background-origin:content-box;background-repeat:no-repeat;background-position:10% 73%,90% 50%;background-size:35% 35%,65% 65%;background-image:linear-gradient(45deg,var(--_diagonal-1),var(--_diagonal-2),var(--_diagonal-3),var(--_diagonal-4)),linear-gradient(-45deg,var(--_diagonal-1),var(--_diagonal-2),var(--_diagonal-3),var(--_diagonal-4))}@media (forced-colors:active){.ds-checkbox--checked{background-color:LinkText;border-color:LinkText;forced-color-adjust:none}}.ds-list--unstyled{margin:0;padding:0;list-style-type:""}.ds-floating{--_ds-floating:top;--_ds-floating-arrow-size:0;--_ds-floating-arrow-visibility:inherit;animation:ds-fade-in .15s ease-in-out forwards;inset:0 auto auto 0;margin:0;overflow:visible;position:absolute}.ds-floating:before{background:inherit;border:inherit;border-left-color:transparent;border-top-color:transparent;box-sizing:border-box;content:"";height:var(--_ds-floating-arrow-size);left:var(--_ds-floating-arrow-x,50%);position:absolute;rotate:45deg;top:var(--_ds-floating-arrow-y,100%);translate:-50% -50%;visibility:var(--_ds-floating-arrow-visibility);width:var(--_ds-floating-arrow-size)}.ds-floating[data-overscroll=contain]{--_ds-floating-overscroll:contain;overscroll-behavior:contain;overflow:auto}.ds-floating{&[data-floating|=top]:before{top:100%;rotate:45deg}&[data-floating|=right]:before{left:0;rotate:135deg}&[data-floating|=bottom]:before{top:0;rotate:-135deg}&[data-floating|=left]:before{left:100%;rotate:-45deg}}@keyframes ds-fade-in{0%{opacity:0}}body{font-weight:var(--ds-body-md-font-weight);line-height:var(--ds-body-md-line-height);letter-spacing:var(--ds-body-md-letter-spacing)}[data-size],body{font-size:var(--ds-body-md-font-size)}[data-size]{--ds-icon-size:var(--ds-size-6)}
+/* --- heading.css --- */
+.ds-heading{-moz-column-break-after:avoid;break-after:avoid-page;font-size:1.3em;font-size:round(down,1.3em,1px);font-weight:var(--ds-heading-md-font-weight);letter-spacing:var(--ds-heading-md-letter-spacing);line-height:var(--ds-heading-md-line-height);margin:0}.ds-heading[data-size="2xs"]{font-weight:var(--ds-heading-2xs-font-weight);line-height:var(--ds-heading-2xs-line-height);font-size:var(--ds-heading-2xs-font-size);letter-spacing:var(--ds-heading-2xs-letter-spacing)}.ds-heading[data-size=xs]{font-weight:var(--ds-heading-xs-font-weight);line-height:var(--ds-heading-xs-line-height);font-size:var(--ds-heading-xs-font-size);letter-spacing:var(--ds-heading-xs-letter-spacing)}.ds-heading[data-size=sm]{font-weight:var(--ds-heading-sm-font-weight);line-height:var(--ds-heading-sm-line-height);font-size:var(--ds-heading-sm-font-size);letter-spacing:var(--ds-heading-sm-letter-spacing)}.ds-heading[data-size=md]{font-size:var(--ds-heading-md-font-size)}.ds-heading[data-size=lg]{font-weight:var(--ds-heading-lg-font-weight);line-height:var(--ds-heading-lg-line-height);font-size:var(--ds-heading-lg-font-size);letter-spacing:var(--ds-heading-lg-letter-spacing)}.ds-heading[data-size=xl]{font-weight:var(--ds-heading-xl-font-weight);line-height:var(--ds-heading-xl-line-height);font-size:var(--ds-heading-xl-font-size);letter-spacing:var(--ds-heading-xl-letter-spacing)}.ds-heading[data-size="2xl"]{font-weight:var(--ds-heading-2xl-font-weight);line-height:var(--ds-heading-2xl-line-height);font-size:var(--ds-heading-2xl-font-size);letter-spacing:var(--ds-heading-2xl-letter-spacing)}
+/* --- paragraph.css --- */
+:where(.ds-paragraph){margin-block:0}.ds-paragraph[data-size=xs]{font-weight:var(--ds-body-xs-font-weight);line-height:var(--ds-body-xs-line-height);font-size:var(--ds-body-xs-font-size);letter-spacing:var(--ds-body-xs-letter-spacing)}.ds-paragraph[data-size=sm]{font-weight:var(--ds-body-sm-font-weight);line-height:var(--ds-body-sm-line-height);font-size:var(--ds-body-sm-font-size);letter-spacing:var(--ds-body-sm-letter-spacing)}.ds-paragraph[data-size=md]{font-weight:var(--ds-body-md-font-weight);line-height:var(--ds-body-md-line-height);font-size:var(--ds-body-md-font-size);letter-spacing:var(--ds-body-md-letter-spacing)}.ds-paragraph[data-size=lg]{font-weight:var(--ds-body-lg-font-weight);line-height:var(--ds-body-lg-line-height);font-size:var(--ds-body-lg-font-size);letter-spacing:var(--ds-body-lg-letter-spacing)}.ds-paragraph[data-size=xl]{font-weight:var(--ds-body-xl-font-weight);line-height:var(--ds-body-xl-line-height);font-size:var(--ds-body-xl-font-size);letter-spacing:var(--ds-body-xl-letter-spacing)}.ds-paragraph[data-variant=long]{line-height:var(--ds-line-height-lg)}.ds-paragraph[data-variant=short]{line-height:var(--ds-line-height-sm)}
+/* --- link.css --- */
+.ds-link{--dsc-link-color:var(--ds-color-text-subtle);--dsc-link-color--hover:var(--ds-color-text-default);--dsc-link-color--active:var(--ds-color-text-default);--dsc-link-color--visited:var(--dsc-link-color);--dsc-link-background--active:transparent;--dsc-link-text-decoration-thickness--hover:0.12em;--dsc-link-text-decoration-thickness:0.06em;--dsc-link-border-radius:0;color:var(--dsc-link-color);outline:none;text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:var(--dsc-link-text-decoration-thickness);text-underline-offset:.24em;border-radius:var(--dsc-link-border-radius)}.ds-link:is(button){background:none;border:none;cursor:pointer;font:inherit;margin:0;padding:0;text-align:inherit}.ds-link>:is(img,svg){display:inline-block;flex-shrink:0;font-size:1em;height:var(--ds-icon-size);vertical-align:middle;width:var(--ds-icon-size)}:is(.ds-link:has(>span)>:is(img,svg)):first-child{margin-inline-end:var(--ds-size-1)}:is(.ds-link:has(>span)>:is(img,svg)):last-child{margin-inline-start:var(--ds-size-1)}.ds-link[data-color=neutral]{--dsc-link-color--active:var(--ds-color-neutral-text-subtle);--dsc-link-color--hover:var(--ds-color-neutral-text-subtle);--dsc-link-color:var(--ds-color-neutral-text-default)}.ds-link:where(:visited){color:var(--dsc-link-color--visited)}@media (hover:hover) and (pointer:fine){.ds-link:where(:hover){color:var(--dsc-link-color--hover);text-decoration-thickness:var(--dsc-link-text-decoration-thickness--hover)}}.ds-link:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-link:focus-visible *{--_ds--focus:}.ds-link:where(:active){background:var(--dsc-link-background--active);color:var(--dsc-link-color--active)}
+/* --- list.css --- */
+.ds-list{--dsc-list-padding-inline:var(--ds-size-6) 0;--dsc-list-margin-top:var(--ds-size-3);--dsc-list-margin-top-nested:var(--ds-size-2);margin:0;padding-inline:var(--dsc-list-padding-inline)}.ds-list>li+li{margin-top:var(--dsc-list-margin-top)}.ds-list>li>:is(ol,ul)>li+li{margin-top:var(--dsc-list-margin-top-nested)}
+/* --- button.css --- */
+.ds-button{--dsc-button-background--active:var(--ds-color-base-active);--dsc-button-background--hover:var(--ds-color-base-hover);--dsc-button-background:var(--ds-color-base-default);--dsc-button-border-color:transparent;--dsc-button-border-radius:var(--ds-border-radius-default);--dsc-button-border-style:solid;--dsc-button-border-width:var(--ds-border-width-default);--dsc-button-color--active:var(--dsc-button-color--hover);--dsc-button-color--hover:var(--dsc-button-color);--dsc-button-color:var(--ds-color-base-contrast-default);--dsc-button-gap:var(--ds-size-2);--dsc-button-padding:var(--ds-size-2) var(--ds-size-4);--dsc-button-size:var(--ds-size-12);align-items:center;background:var(--dsc-button-background);border-color:var(--dsc-button-border-color);border-radius:var(--dsc-button-border-radius);border-style:var(--dsc-button-border-style);border-width:var(--dsc-button-border-width);box-sizing:border-box;color:var(--dsc-button-color);cursor:pointer;flex-shrink:0;font-family:inherit;font-weight:var(--ds-font-weight-medium);gap:var(--dsc-button-gap);height:-moz-fit-content;height:fit-content;justify-content:center;line-height:var(--ds-line-height-sm);min-height:var(--dsc-button-size);min-width:var(--dsc-button-size);outline:none;padding:var(--dsc-button-padding);text-align:inherit;text-decoration:none;width:-moz-fit-content;width:fit-content;-webkit-print-color-adjust:exact;print-color-adjust:exact}.ds-button:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-button:focus-visible *{--_ds--focus:}.ds-button[data-variant=secondary],.ds-button[data-variant=tertiary]{--dsc-button-background--active:var(--ds-color-surface-active);--dsc-button-background--hover:var(--ds-color-surface-hover);--dsc-button-background:transparent;--dsc-button-color--active:var(--dsc-button-color);--dsc-button-color--hover:var(--dsc-button-color);--dsc-button-color:var(--ds-color-text-subtle)}.ds-button[data-variant=secondary]{--dsc-button-border-color:var(--ds-color-border-strong)}.ds-button:not([data-size]){font-size:inherit}.ds-button :is(img,svg){display:inline-block;flex-shrink:0;font-size:1em;height:var(--ds-icon-size);vertical-align:middle;width:var(--ds-icon-size)}.ds-button:focus-visible{position:relative}.ds-button:not([hidden]){display:flex}.ds-button[data-icon]{width:var(--dsc-button-size);height:var(--dsc-button-size);padding:0}.ds-button[data-fullwidth]{width:100%;text-align:center}@media (hover:hover) and (pointer:fine){.ds-button:hover{background:var(--dsc-button-background--hover);color:var(--dsc-button-color--hover)}}.ds-button:active{background:var(--dsc-button-background--active);color:var(--dsc-button-color--active)}.ds-button[aria-busy=true]{cursor:progress}.ds-button:is(:disabled,[aria-disabled=true],[readonly],[aria-readonly=true],label:has(input[readonly])){cursor:not-allowed;opacity:var(--ds-opacity-disabled);background:var(--dsc-button-background);color:var(--dsc-button-color)}.ds-button[aria-busy=true]:is(:disabled,[aria-disabled=true],[readonly],[aria-readonly=true],label:has(input[readonly])){opacity:1;cursor:progress}
+/* --- card.css --- */
+.ds-card{--dsc-card-background--active:var(--ds-color-surface-active);--dsc-card-background--hover:var(--ds-color-surface-hover);--dsc-card-background:var(--ds-color-surface-default);--dsc-card-border-width:var(--ds-border-width-default);--dsc-card-border-style:solid;--dsc-card-border-color:var(--ds-color-border-subtle);--dsc-card-block-border-width:var(--dsc-card-border-width);--dsc-card-block-border-style:var(--dsc-card-border-style);--dsc-card-block-border-color:var(--dsc-card-border-color);--dsc-card-color:var(--ds-color-text-default);--dsc-card-content-margin-block:var(--ds-size-3) 0;--dsc-card-padding:var(--ds-size-6);--dsc-card-border-radius:var(--ds-border-radius-lg);--dsc-card-link-text-decoration-thickness--hover:0.12em;--dsc-card-link-text-decoration-thickness:0.06em;--dsc-card-link-text-decoration-offset:0.24em;background:var(--dsc-card-background);border-radius:var(--dsc-card-border-radius);border-width:var(--dsc-card-border-width);border-style:var(--dsc-card-border-style);border-color:var(--dsc-card-border-color);box-sizing:border-box;color:var(--dsc-card-color);overflow:clip;padding:var(--dsc-card-padding);text-align:inherit}.ds-card[data-variant=default]{background:var(--ds-color-surface-default)}.ds-card[data-variant=tinted]{background:var(--ds-color-surface-tinted)}.ds-card:not([hidden]){display:block}.ds-card:where(a,button,[role=button],[data-clickdelegatefor]){cursor:pointer;text-decoration:none}.ds-card:where(a,button,[role=button],[data-clickdelegatefor]):focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-card:where(a,button,[role=button],[data-clickdelegatefor]):focus-visible *{--_ds--focus:}.ds-card:where(a,button,[role=button],[data-clickdelegatefor])>.ds-card__block>:is(h1,h2,h3,h4,h5,h6),.ds-card:where(a,button,[role=button],[data-clickdelegatefor])>:is(h1,h2,h3,h4,h5,h6){text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:var(--dsc-card-link-text-decoration-thickness);text-underline-offset:var(--dsc-card-link-text-decoration-offset)}:is(.ds-card:where(a,button,[role=button],[data-clickdelegatefor])>:is(h1,h2,h3,h4,h5,h6),.ds-card:where(a,button,[role=button],[data-clickdelegatefor])>.ds-card__block>:is(h1,h2,h3,h4,h5,h6))>a{text-decoration:none;color:inherit}:is(:is(.ds-card:where(a,button,[role=button],[data-clickdelegatefor])>:is(h1,h2,h3,h4,h5,h6),.ds-card:where(a,button,[role=button],[data-clickdelegatefor])>.ds-card__block>:is(h1,h2,h3,h4,h5,h6))>a):focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}:is(:is(.ds-card:where(a,button,[role=button],[data-clickdelegatefor])>:is(h1,h2,h3,h4,h5,h6),.ds-card:where(a,button,[role=button],[data-clickdelegatefor])>.ds-card__block>:is(h1,h2,h3,h4,h5,h6))>a):focus-visible *{--_ds--focus:}@media (hover:hover) and (pointer:fine){.ds-card:where(a,button,[role=button]):hover,.ds-card[data-clickdelegatefor]:has(.\:click-delegate-hover){background:var(--dsc-card-background--hover)}:is(.ds-card:where(a,button,[role=button]):hover,.ds-card[data-clickdelegatefor]:has(.\:click-delegate-hover))>.ds-card__block>:is(h1,h2,h3,h4,h5,h6),:is(.ds-card:where(a,button,[role=button]):hover,.ds-card[data-clickdelegatefor]:has(.\:click-delegate-hover))>:is(h1,h2,h3,h4,h5,h6){text-decoration-thickness:var(--dsc-card-link-text-decoration-thickness--hover)}:is(.ds-card:where(a,button,[role=button]):hover,.ds-card[data-clickdelegatefor]:has(.\:click-delegate-hover)):active{background:var(--dsc-card-background--active)}}.ds-card:has(>.ds-card__block,>.ds-details){padding:0}.ds-card>.ds-details:first-child{border-top:0}:is(.ds-card>.ds-details:first-child)>summary,:is(.ds-card>.ds-details:first-child)>u-summary{border-top-left-radius:var(--dsc-card-border-radius);border-top-right-radius:var(--dsc-card-border-radius)}.ds-card>.ds-details:last-child{border-bottom:0}:is(.ds-card>.ds-details:last-child):not([open])>summary,:is(.ds-card>.ds-details:last-child):not([open])>u-summary{border-bottom-left-radius:var(--dsc-card-border-radius);border-bottom-right-radius:var(--dsc-card-border-radius)}:where(.ds-card){font:inherit;margin:0}:where(.ds-card,.ds-card__block)>:first-child{margin-block:0}:where(.ds-card,.ds-card__block)>*+*{margin-block:var(--dsc-card-content-margin-block)}.ds-card__block{box-sizing:border-box;margin:0;padding:var(--dsc-card-padding);position:relative}.ds-card__block:before{border-top-width:var(--dsc-card-block-border-width);border-top-style:var(--dsc-card-block-border-style);inset:0 0 auto;translate:0 -100%}.ds-card__block:after,.ds-card__block:before{content:"";border-color:var(--dsc-card-block-border-color);position:absolute}.ds-card__block:after{border-left-width:var(--dsc-card-block-border-width);border-left-style:var(--dsc-card-block-border-style);inset:0 auto 0 0;translate:-100%}.ds-card__block:has(>:is(audio,figure,iframe,img,picture,video):only-child){padding:0}.ds-card__block:has(>:is(audio,figure,iframe,img,picture,video):only-child)>:not([hidden]),.ds-card__block:has(>:is(audio,figure,iframe,img,picture,video):only-child)>picture img:not([hidden]){border:0;display:block;height:auto;width:100%}.ds-card__block:has(>:is(audio,figure,iframe,img,picture,video):only-child)>iframe{aspect-ratio:16/9}
+/* --- divider.css --- */
+.ds-divider{--dsc-divider-border-width:var(--ds-border-width-default);--dsc-divider-border-style:solid;--dsc-divider-border-color:var(--ds-color-neutral-border-subtle);border-width:0;border-top-width:var(--dsc-divider-border-width);border-top-style:var(--dsc-divider-border-style);border-color:var(--dsc-divider-border-color);box-sizing:border-box;margin-block:.5em;width:100%}
+/* --- skip-link.css --- */
+.ds-skip-link,.ds-skiplink{--dsc-skiplink-padding:var(--ds-size-4) var(--ds-size-4) var(--ds-size-5) var(--ds-size-4);--dsc-skiplink-background:var(--ds-color-surface-hover);--dsc-skiplink-color:var(--ds-color-text-default);border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ds-skip-link:focus,.ds-skiplink:focus{place-items:center;outline:0;position:static;width:auto;height:auto;margin:inherit;overflow:visible;clip:auto;clip-path:none;white-space:inherit;padding:var(--dsc-skiplink-padding);color:var(--dsc-skiplink-color);background:var(--dsc-skiplink-background);box-sizing:border-box;text-decoration:underline;text-decoration-thickness:max(1px,.0625rem);text-underline-offset:max(5px,.25rem)}:is(.ds-skip-link:focus,.ds-skiplink:focus):not([hidden]){display:grid}
\ No newline at end of file
diff --git a/static/css/landing.css b/static/css/landing.css
new file mode 100644
index 0000000..48fa0ff
--- /dev/null
+++ b/static/css/landing.css
@@ -0,0 +1,225 @@
+/* Landing page (home) only: loaded from custom-head.html after designsystemet.css.
+ Colours: the band is the same navy as the data.altinn.no portal (#022F51), text is
+ Designsystemet's neutral text (blåsvart), accents come from the Digdir theme tokens. */
+
+:root,
+[data-size] {
+ /* designsystem.css sets html to 62.5% (10px). Designsystemet sizes everything in rem from
+ --ds-size-base (18), and re-declares it on every [data-size] element; 18 × 0.625 keeps its
+ type and spacing at the intended px values. */
+ --ds-size-base: 11.25;
+ --ds-border-radius-base: .4rem;
+ --ds-border-radius-scale: .4rem;
+ --dan-band: #022f51;
+ --dan-band-hover: rgba(255, 255, 255, .16);
+}
+
+body.landing-page {
+ margin: 0;
+ background: #fff;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+body.landing-page .footer { margin-top: 0; }
+
+.landing {
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ color: var(--ds-color-neutral-text-default);
+ flex: 1 0 auto;
+}
+
+.landing-wrap {
+ max-width: 1240px;
+ margin: 0 auto;
+ padding: 0 36px;
+ box-sizing: border-box;
+}
+
+/* Top bar on the band: white logo, white links (profile: all-white logo on dark surfaces). */
+.main-header--dark { background: var(--dan-band); }
+.main-header--dark .nav-link { color: #fff; }
+.main-header--dark .nav-link-active,
+.main-header--dark .nav-link:hover:not(.nav-link-active) { background: var(--dan-band-hover); color: #fff; }
+/* custom.css turns the active item white-on-hover with black text (fine on the white header);
+ on the band it must stay white text on translucent navy. */
+.main-header--dark .nav-link-active:hover { background: var(--dan-band-hover); color: #fff !important; }
+/* Keyboard focus on the band: Chrome's default dark outline is invisible on navy. */
+.main-header--dark .nav-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
+
+/* Hero band */
+.landing-hero {
+ position: relative;
+ overflow: hidden;
+ background: var(--dan-band);
+ color: #fff;
+ padding: 4.8rem 0 6.4rem;
+}
+
+.landing-hero .landing-wrap { position: relative; }
+.landing-hero__text { position: relative; z-index: 1; }
+/* Text and art share the 1240px container: the art takes the right 40 % of it, the text keeps
+ clear of that, so the composition is the same on a 1000px laptop and a 4K monitor. */
+@media (min-width: 901px) {
+ .landing-hero__text { max-width: 56%; }
+}
+
+.landing-hero__kicker {
+ margin: 0 0 .8rem;
+ font-size: 1.4rem;
+ font-weight: 500;
+ letter-spacing: .06em;
+ text-transform: uppercase;
+ color: rgba(255, 255, 255, .72);
+}
+
+.landing-hero__title { color: #fff; max-width: 16em; }
+
+.landing-hero__lead {
+ margin-top: 1.6rem;
+ font-size: 2.1rem;
+ max-width: 38em;
+ color: rgba(255, 255, 255, .88);
+}
+
+.landing-hero__actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1.2rem;
+ margin-top: 3.2rem;
+}
+
+/* Focus ring on the band: Designsystemet's ring is white inside and blåsvart outside, which
+ vanishes against navy and white borders. Swap it: navy inside, white outside. The legacy
+ stylesheet also turns any focused link black, so pin the text colour. */
+.landing-hero,
+.main-header--dark {
+ --dsc-focus-boxShadow: 0 0 0 3px var(--dan-band);
+ --dsc-focus-outline: #fff solid 3px;
+}
+.landing .ds-button:focus,
+.landing .ds-button:focus-visible { color: var(--dsc-button-color); }
+.landing .ds-link:focus,
+.landing .ds-link:focus-visible { color: var(--dsc-link-color); }
+
+.landing-hero .ds-button {
+ --dsc-button-background: #fff;
+ --dsc-button-background--hover: #e3ecf4;
+ --dsc-button-background--active: #cfdde9;
+ --dsc-button-color: var(--dan-band);
+}
+
+.landing-hero .ds-button[data-variant="secondary"] {
+ --dsc-button-background: transparent;
+ --dsc-button-background--hover: var(--dan-band-hover);
+ --dsc-button-background--active: rgba(255, 255, 255, .26);
+ --dsc-button-border-color: #fff;
+ --dsc-button-color: #fff;
+}
+
+/* Buttons and search bar share one column, so the search bar is exactly as wide as the button row. */
+.landing-hero__cta { display: inline-flex; flex-direction: column; max-width: 100%; }
+.landing-hero__search { margin-top: 3.2rem; width: 100%; }
+.landing-hero__search .site-search { margin: 0; --pf-input-height: 52px; --pf-border: rgba(255, 255, 255, .55); --pf-border-focus: #fff; --pf-outline-focus: #fff; }
+.landing-hero__search .site-search__unavailable { color: rgba(255, 255, 255, .72); }
+
+.landing-hero__art {
+ position: absolute;
+ right: 3.6rem; /* = the container's side padding: the art's right edge lines up with the content below */
+ bottom: -8.8rem; /* hangs off the band's bottom edge (the band's padding is 6.4rem) */
+ width: 40%;
+ max-width: 480px;
+ height: auto;
+ pointer-events: none;
+}
+
+/* Laptop widths: a little more room so the three buttons stay on one row, and a smaller art
+ block so the icon clears the buttons. Placed after the base rules above so it wins. */
+@media (min-width: 901px) and (max-width: 1150px) {
+ .landing-hero__text { max-width: 64%; }
+ .landing-hero__art { width: 34%; }
+}
+
+/* Sections */
+.landing-section { padding: 5.6rem 0; }
+.landing-section__title { margin: 0 0 1.2rem; }
+.landing-section__intro { max-width: 64ch; color: var(--ds-color-neutral-text-subtle); }
+
+.landing-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
+ gap: 2.4rem;
+ margin-top: 2.4rem;
+}
+
+/* The intro block and the link block line up across cards (subgrid); flex is the fallback. */
+.landing-cards > .ds-card.landing-card { display: flex; flex-direction: column; }
+.landing-card > .ds-card__block:last-child { flex: 1 1 auto; }
+@supports (grid-template-rows: subgrid) {
+ .landing-cards > .ds-card.landing-card { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
+}
+
+/* The old design-system stylesheet underlines every link with a border; Designsystemet links
+ use text-decoration, so drop the border here. */
+.landing a { border-bottom: 0; }
+
+.landing-card__icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 5.2rem;
+ height: 5.2rem;
+ border-radius: 50%;
+ background: var(--ds-color-accent-surface-tinted);
+ color: var(--ds-color-accent-text-default);
+ font-size: 2.2rem;
+ margin-bottom: 1.6rem;
+}
+
+.landing-card__links li + li { margin-top: 1rem; }
+/* Target size (WCAG 2.5.8): at least 24px tall. */
+.landing-card__links .ds-link { display: inline-block; padding-block: .2rem; }
+.landing-card__links .ds-link { --dsc-link-color: var(--ds-color-accent-text-subtle); --dsc-link-color--hover: var(--ds-color-accent-text-default); font-weight: 500; }
+
+/* About */
+.landing-about { background: var(--ds-color-neutral-background-tinted); }
+.landing-about__grid {
+ display: grid;
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+ gap: 4.8rem;
+}
+.landing-about__aside { padding-top: .6rem; }
+.landing-about__aside .ds-heading { margin-bottom: 1.2rem; }
+
+.landing-prose p { margin: 0 0 1.4rem; font-size: var(--ds-body-md-font-size); line-height: var(--ds-body-md-line-height); }
+.landing-prose p:last-child { margin-bottom: 0; }
+.landing-prose a { color: var(--ds-color-accent-text-subtle); text-decoration: underline; text-underline-offset: .2em; }
+
+/* Contact */
+/* Equal-width buttons that fill the content width: four across, two by two on laptops, one
+ column on phones. */
+.landing-contact__actions {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.2rem;
+ margin-top: 2.4rem;
+}
+.landing-contact__actions .ds-button { justify-content: center; white-space: nowrap; }
+@media (min-width: 1100px) { .landing-contact__actions { grid-template-columns: repeat(4, 1fr); } }
+@media (max-width: 640px) { .landing-contact__actions { grid-template-columns: 1fr; } }
+.landing-contact .ds-button .fa { font-size: 1.1em; }
+
+@media (max-width: 900px) {
+ /* Narrow: the text spans the band, so only the faint tiles stay, low right, behind it. */
+ .landing-hero__art { width: 60%; right: -22%; bottom: -10rem; opacity: .35; }
+ .landing-hero__icon { display: none; }
+ .landing-about__grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
+}
+
+@media (max-width: 680px) {
+ .landing-wrap { padding: 0 20px; }
+ .landing-hero { padding: 3.2rem 0 4.8rem; }
+ .landing-section { padding: 4rem 0; }
+ .landing-hero__art { opacity: .25; }
+}
diff --git a/static/images/dan-logo-white.svg b/static/images/dan-logo-white.svg
new file mode 100644
index 0000000..8969d0e
--- /dev/null
+++ b/static/images/dan-logo-white.svg
@@ -0,0 +1,22 @@
+
+ data.altinn.no
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/images/digdir-emblem-white.svg b/static/images/digdir-emblem-white.svg
new file mode 100644
index 0000000..05eb784
--- /dev/null
+++ b/static/images/digdir-emblem-white.svg
@@ -0,0 +1 @@
+emblem_mørkblå
\ No newline at end of file
diff --git a/static/js/custom.js b/static/js/custom.js
index c9a5769..8af39cd 100644
--- a/static/js/custom.js
+++ b/static/js/custom.js
@@ -4,3 +4,25 @@ $(".nav-link").on('click', function(e) {
active.toggleClass('nav-link-active');
e.target.classList.toggle('nav-link-active');
});
+
+// Open the search dialog level with the box that was clicked, so it feels like that box
+// expanding rather than a panel appearing at the top of the screen. Pagefind positions the
+// dialog with --pf-modal-top / --pf-modal-max-height (defaults in custom.css); the keyboard
+// shortcut (Ctrl/Cmd+K) keeps the defaults since there is no box to line up with.
+(function () {
+ var GAP = 24, MIN_HEIGHT = 360;
+ document.addEventListener('click', function (e) {
+ var trigger = e.target.closest && e.target.closest('pagefind-modal-trigger');
+ if (!trigger) return;
+ var top = trigger.getBoundingClientRect().top - 16; // the field sits 16px inside the dialog
+ top = Math.max(GAP, Math.min(top, window.innerHeight - MIN_HEIGHT - GAP));
+ document.body.style.setProperty('--pf-modal-top', Math.round(top) + 'px');
+ document.body.style.setProperty('--pf-modal-max-height', Math.round(window.innerHeight - top - GAP) + 'px');
+ }, true);
+ document.addEventListener('keydown', function (e) {
+ if ((e.ctrlKey || e.metaKey) && e.key && e.key.toLowerCase() === 'k') {
+ document.body.style.removeProperty('--pf-modal-top');
+ document.body.style.removeProperty('--pf-modal-max-height');
+ }
+ }, true);
+})();
diff --git a/themes/hugo-theme-altinn/layouts/partials/footer.html b/themes/hugo-theme-altinn/layouts/partials/footer.html
index 3852216..6d094f4 100644
--- a/themes/hugo-theme-altinn/layouts/partials/footer.html
+++ b/themes/hugo-theme-altinn/layouts/partials/footer.html
@@ -54,7 +54,7 @@
{{- end -}}
{{- end -}}
-
+
diff --git a/themes/hugo-theme-altinn/layouts/partials/head.html b/themes/hugo-theme-altinn/layouts/partials/head.html
new file mode 100644
index 0000000..de0a52c
--- /dev/null
+++ b/themes/hugo-theme-altinn/layouts/partials/head.html
@@ -0,0 +1,33 @@
+{{- /* Everything inside . Shared by header.html (doc pages) and the landing page (layouts/index.html). */ -}}
+
+
+ {{ partial "meta.html" . }}
+ {{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} - {{ .Site.Title }}{{ end }}
+
+
+
+
+
+
+
+
+ {{with .Site.Params.themeStyle}}
+
+ {{else}}
+
+ {{end}}
+ {{with .Site.Params.themeVariant}}
+
+ {{end}}
+
+
+
+ {{ partial "custom-head.html" . }}
+
+
+
+
diff --git a/themes/hugo-theme-altinn/layouts/partials/header.html b/themes/hugo-theme-altinn/layouts/partials/header.html
index b2294c4..83c673e 100644
--- a/themes/hugo-theme-altinn/layouts/partials/header.html
+++ b/themes/hugo-theme-altinn/layouts/partials/header.html
@@ -1,38 +1,7 @@
-
-
- {{ partial "meta.html" . }}
- {{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} - {{ .Site.Title }}{{ end }}
-
-
-
-
-
-
-
-
- {{with .Site.Params.themeStyle}}
-
- {{else}}
-
- {{end}}
- {{with .Site.Params.themeVariant}}
-
- {{end}}
-
-
-
- {{ partial "custom-head.html" }}
-
-
-
-
+ {{ partial "head.html" . }}
{{ partial "topbar.html" . }}
@@ -44,7 +13,7 @@
{{ partial "menu.html" . }}
-
+
diff --git a/themes/hugo-theme-altinn/layouts/partials/menu.html b/themes/hugo-theme-altinn/layouts/partials/menu.html
index 9da2e27..3095b59 100644
--- a/themes/hugo-theme-altinn/layouts/partials/menu.html
+++ b/themes/hugo-theme-altinn/layouts/partials/menu.html
@@ -1,4 +1,4 @@
-