Innhold
5 tekster
Vi kan ikke endre HTML-en, men vi kan kjenne igjen hvert
kort på adressen (href) og gi det ikon og egen stil.
========================================= */
/* --- Kortene legges i et rutenett --- */
.category-list {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap: var(--rom-m);
}
.category-list::before,
.category-list::after {
content: none !important; /* fjerner gammel «clearfix» */
}
.category-list .category {
float: none !important;
width: auto !important;
margin: 0 !important;
display: block;
padding: var(--rom-l) var(--rom-m);
border: var(--kant);
background: var(--farge-bakgrunn);
color: var(--farge-tekst);
text-align: center;
text-decoration: none !important;
}
.category-list .category:not(:is([href*="overgang"], [href*="/category/288-"])):hover {
border-color: var(--farge-aksent) !important;
box-shadow: inset 0 0 0 1px var(--farge-aksent); /* 2 px ramme uten at kortet hopper */
background: var(--farge-flate) !important;
}
.category-list .category h3 {
font-size: 1.375rem !important;
font-weight: 600 !important;
line-height: 1.3;
margin: 0 0 var(--rom-xs) !important;
color: var(--farge-tekst) !important;
}
.category-list .category .article-count {
font-size: var(--tekst-normal) !important;
color: var(--farge-tekst-dempet) !important;
margin: 0 !important;
}
.collection-category {
margin-top: var(--rom-xl);
}
.collection-category > h2,
.collection-category > h2 a {
font-size: 2rem !important;
font-weight: 600 !important;
color: var(--farge-tekst) !important;
}
.collection-category > h2 {
margin: 0 0 var(--rom-l) !important;
}
/* --- Ikoner på kortene ---
Hvert kort kjennes igjen på en del av adressen sin.
Står det et annet ord i adressen hos dere, endrer dere
bare teksten i hakeparentesen. */
.category-list .category::before {
content: "";
display: block;
width: 2.75rem;
height: 2.75rem;
margin: 0 auto var(--rom-m);
background-color: var(--farge-tekst);
-webkit-mask: var(--ikon-bilde, var(--ikon-dokumenter)) no-repeat center / contain;
mask: var(--ikon-bilde, var(--ikon-dokumenter)) no-repeat center / contain;
}
.category-list .category:hover::before {
background-color: var(--farge-aksent);
}
/* --- Nye Lovdata Pro --- */
.category[href*="kom-i-gang"] { --ikon-bilde: var(--ikon-veiviser); }
.category[href*="og-finn"] { --ikon-bilde: var(--ikon-lovkilder); } /* søk og finn */
.category:is([href*="mine-verkt"], [href*="innarbeidelse"])
{ --ikon-bilde: var(--ikon-utvalg); }
.category[href*="hold-deg-oppdatert"] { --ikon-bilde: var(--ikon-bjelle); }
.category[href*="jobb-sammen"] { --ikon-bilde: var(--ikon-handtrykk); }
/* --- Lovdata Pro Klassisk --- */
.category[href*="nyttige-funksjoner"] { --ikon-bilde: var(--ikon-funksjoner); }
.category[href*="innhold"] { --ikon-bilde: var(--ikon-dokumenter); }
.category[href*="navig"] { --ikon-bilde: var(--ikon-navigasjon); }
.category[href*="personlige-verkt"] { --ikon-bilde: var(--ikon-utvalg); }
.category:is([href*="sking-i"], [href*="soking"], [href$="king"])
{ --ikon-bilde: var(--ikon-sok); } /* søking */
/* --- Andre tjenester --- */
.category[href*="europalov"] { --ikon-bilde: var(--ikon-europalov); }
.category[href*="lovdata-api"] { --ikon-bilde: var(--ikon-api); }
.category:is([href*="lovdatano"], [href*="lovdata-no"], [href*="pne-sider"])
{ --ikon-bilde: var(--ikon-lovdata); } /* Lovdata.no (åpne sider) */
.category[href*="eksamen"] { --ikon-bilde: var(--ikon-eksamen); }
.category[href*="bibliotek"] { --ikon-bilde: var(--ikon-bibliotek); }
.category[href*="karnov"] { --ikon-bilde: var(--ikon-karnov); }
/* --- Kundeinformasjon --- */
.category:is([href*="brukeravtale"], [href*="avtalevilk"])
{ --ikon-bilde: var(--ikon-avtale); }
.category[href*="priser"] { --ikon-bilde: var(--ikon-prislapp); }
.category[href*="kurs-og-oppl"] { --ikon-bilde: var(--ikon-kurs); }
.category[href*="tariff"] { --ikon-bilde: var(--ikon-tariff); }
/* --- hjelp.lovdata.no: kategorier som har beholdt adressen fra
et gammelt navn. Kjennes igjen på kategorinummeret, som aldri
endres, selv om kategorien får nytt navn. --- */
.category[href*="/category/289-"] { --ikon-bilde: var(--ikon-lovkilder); } /* Søk og finn (rettskildesk) */
.category[href*="/category/376-"] { --ikon-bilde: var(--ikon-handtrykk); } /* Jobb sammen (samarbeid) */
.category[href*="/category/8-"] { --ikon-bilde: var(--ikon-navigasjon); } /* Navigere i Lovdata Pro (avansert-sk) */
/* --- Eldre kategorier (testsiden) --- */
.category[href*="kunstig-intelligens"] { --ikon-bilde: var(--ikon-ki); }
.category[href*="diverse-informasjon"] { --ikon-bilde: var(--ikon-info); }
.category[href*="film"] { --ikon-bilde: var(--ikon-film); }
.category[href*="organiser"] { --ikon-bilde: var(--ikon-utvalg); }
.category[href*="administrer"] { --ikon-bilde: var(--ikon-innstillinger); }
/* --- Overgangsbanneret ---
Opprett en kategori i Help Scout som heter
«Overgangen til nye Lovdata Pro» (adressen vil da
inneholde «overgang»). CSS-en gjør kortet om til en bred,
kardinalrød stripe øverst. Ligger kategorien alene i en
egen samling som er sortert først, legger banneret seg
rett under søket, og samlingens overskrift skjules. */
.category-list .category:is([href*="overgang"], [href*="/category/288-"]) {
grid-column: 1 / -1;
order: -1;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"ikon tittel knapp"
"ikon tekst knapp";
align-items: center;
column-gap: var(--rom-l);
row-gap: var(--rom-xs);
padding: var(--rom-l) var(--rom-xl);
background: var(--kardinalrod);
border: 0;
color: #ffffff;
text-align: left;
}
.category-list .category:is([href*="overgang"], [href*="/category/288-"])::before {
grid-area: ikon;
width: 3.5rem;
height: 3.5rem;
margin: 0;
background-color: #ffffff;
-webkit-mask-image: var(--ikon-overgang);
mask-image: var(--ikon-overgang);
}
.category-list .category:is([href*="overgang"], [href*="/category/288-"]) h3 {
grid-area: tittel;
align-self: end;
font-size: 2rem !important;
color: #ffffff !important;
margin: 0 !important;
}
.category-list .category:is([href*="overgang"], [href*="/category/288-"])::after {
grid-area: tekst;
align-self: start;
content: "Fra 26. november blir nye Lovdata Pro løsningen du møter når du logger inn. Her finner du det du trenger for å komme i gang.";
font-size: var(--tekst-mellom);
line-height: 1.5;
max-width: 40rem;
}
/* «5 tekster» byttes ut med en hvit knapp */
.category-list .category:is([href*="overgang"], [href*="/category/288-"]) .article-count {
grid-area: knapp;
font-size: 0 !important;
color: transparent !important;
}
.category-list .category:is([href*="overgang"], [href*="/category/288-"]) .article-count::before {
content: "Les om overgangen";
display: inline-block;
font-size: var(--tekst-mellom);
font-weight: 600;
padding: var(--rom-m) var(--rom-l);
background: #ffffff;
color: var(--kardinalrod);
border-radius: var(--radius);
white-space: nowrap;
}
.category-list .category:is([href*="overgang"], [href*="/category/288-"]):hover .article-count::before {
background: var(--stortingsrod);
color: #ffffff;
}
.category-list .category:is([href*="overgang"], [href*="/category/288-"]):focus-visible {
outline: 3px solid var(--kardinalrod);
outline-offset: 3px;
}
/* Banneret skal ligge tett under søket */
.collection-category:has(.category:is([href*="overgang"], [href*="/category/288-"])) {
margin-top: var(--rom-l);
}
/* Når banneret ligger alene i en egen samling: skjul overskriften */
.collection-category:has(.category:is([href*="overgang"], [href*="/category/288-"])):not(:has(.category:not(:is([href*="overgang"], [href*="/category/288-"])))) > h2 {
display: none !important;
}
@media (max-width: 48rem) {
.category-list .category:is([href*="overgang"], [href*="/category/288-"]) {
grid-template-columns: 1fr;
grid-template-areas: "ikon" "tittel" "tekst" "knapp";
row-gap: var(--rom-m);
padding: var(--rom-l) var(--rom-m);
}
.category-list .category:is([href*="overgang"], [href*="/category/288-"]) h3 {
font-size: 1.5rem !important;
}
.category-list .category:is([href*="overgang"], [href*="/category/288-"]) .article-count::before {
display: block;
text-align: center;
white-space: normal;
}
.collection-category > h2,
.collection-category > h2 a {
font-size: 1.5rem !important;
}
}
/* =========================================
5d. SØK ØVERST I KATEGORIER OG SAMLINGER
På undersider legger Help Scout et lite søkefelt
(