/*
FastPlass — rutenett-rammen.
Alt ligger på ett kvadratisk rutenett som regnes ut fra flaten i
assets/js/fastplass.js. CSS-en her eier utseendet på rutene; JS eier hvor
de ligger. Størrelsene som avhenger av cellestørrelsen (--pad, --fsS …)
settes av JS på .fp-rot; verdiene under er reserve for første maling og
for visning uten JavaScript.
Ingen hjørneradius, ingen skygger. Kanter er 2px solid --ink (rammer) eller
2px dashed (mål). Hover er enten invertering (--ink ↔ --bg) eller
--signal-fyll. Ingen andre hover-effekter.
Fargene (--bg, --surface, --ink, --signal, --line) settes i fra
design-globalen.
*/
/* ---------------------------------------------------------------- fonter */
/* Selvhostet (GDPR): ingen kall til Google Fonts. Relativ sti fra denne fila. */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../../fonts/manrope-latin-500-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../../fonts/manrope-latin-ext-500-normal.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../../fonts/manrope-latin-700-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../../fonts/manrope-latin-ext-700-normal.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('../../fonts/manrope-latin-800-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('../../fonts/manrope-latin-ext-800-normal.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../../fonts/figtree-latin-400-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../../fonts/figtree-latin-ext-400-normal.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../../fonts/figtree-latin-600-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../../fonts/figtree-latin-ext-600-normal.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ----------------------------------------------------------------- basis */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
}
body {
font-family: Figtree, system-ui, -apple-system, 'Segoe UI', sans-serif;
color: var(--ink);
-webkit-text-size-adjust: 100%;
}
a { color: inherit; }
a:hover { color: inherit; text-decoration: underline; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; border-radius: 0; }
:focus-visible {
outline: 3px solid var(--signal);
outline-offset: 3px;
}
/* Reservestørrelser til første maling og til visning uten JavaScript. */
:root {
--g: 12px;
--cell: 160px;
--pad: 14px;
--play: 64px;
--fsS: 13px;
--fsB: 16px;
--fsH2: 26px;
--fsH1: 40px;
--fsNum: 56px;
}
.fp-visuelt-skjult {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
margin: -1px;
}
.fp-skiplenke {
position: absolute;
left: -999px;
top: 0;
z-index: 40;
background: var(--ink);
color: var(--bg);
padding: 10px 14px;
font: 600 14px/1 Figtree, sans-serif;
text-decoration: none;
}
.fp-skiplenke:focus { left: 8px; }
/* ------------------------------------------------------------- rutenett */
.fp-rot {
position: relative;
width: 100%;
background: var(--bg);
}
/* Med JS eier motoren plasseringen; uten JS faller vi tilbake til flyt.
clip på begge akser, ikke hidden: hidden gjør rota til en rullecontainer.
Bakgrunnslaget er høyere enn rota, så nettleserens egen ankerhopping
rullet DEN i stedet for vinduet — headeren forsvant og bakgrunnsrader
dukket opp under footeren. Med clip kan ingen rulle rota, heller ikke
programmatisk, og bakgrunnen klippes fortsatt mot kanten. */
.js .fp-rot {
overflow: clip;
transition: height .6s cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
.js .fp-rot { transition: none; }
}
.fp-bakgrunn { position: absolute; inset: 0; pointer-events: none; }
.fp-celle { position: absolute; background: var(--surface); }
.js .fp-innhold { position: absolute; inset: 0; }
.js .fp-b {
position: absolute;
visibility: hidden;
opacity: 0;
}
/* Ruter som er plassert av motoren, men ennå ikke sluppet inn i overgangen. */
.js .fp-b[data-plassert] { visibility: visible; }
.js .fp-b[data-inne] { opacity: 1; }
.fp-b > * { width: 100%; height: 100%; }
/* «Setter seg»-nikket når firkanten smetter på plass. */
@keyframes fp-setter-seg {
0% { transform: translateY(0); }
40% { transform: translateY(3px); }
100% { transform: translateY(0); }
}
@keyframes fp-puls {
0% { box-shadow: 0 0 0 0 var(--signal); }
100% { box-shadow: 0 0 0 14px transparent; }
}
/* ------------------------------------------------------- inngangsskjerm */
.fp-inngang { position: absolute; inset: 0; z-index: 4; }
/* Inngangen finnes bare med JS, og bare før den er ryddet. Ingen blink. */
.no-js .fp-inngang,
.fp-ryddet .fp-inngang { display: none; }
.fp-mal {
position: absolute;
border: 2px dashed var(--ink);
opacity: .55;
transition: opacity .25s, border-color .2s;
pointer-events: none;
}
.fp-inngang[data-naer] .fp-mal {
border-color: var(--signal);
opacity: 1;
animation: fp-puls 1s ease-out infinite;
}
.fp-inngang[data-fase="plassert"] .fp-mal { opacity: 0; animation: none; }
.fp-firkant {
position: absolute;
background: var(--signal);
cursor: grab;
touch-action: none;
user-select: none;
z-index: 5;
outline-offset: 4px;
transition: transform .32s cubic-bezier(.2, .9, .25, 1), opacity .4s;
}
.fp-inngang[data-drar] .fp-firkant {
cursor: grabbing;
transition: none;
box-shadow: 0 0 0 3px var(--ink);
}
.fp-inngang[data-fase="plassert"] .fp-firkant { animation: fp-puls .6s ease-out; }
.fp-hopp { position: absolute; z-index: 6; }
.fp-hopp button {
width: 100%;
height: 100%;
border: 2px solid var(--ink);
background: var(--surface);
color: var(--ink);
font: 600 var(--fsS)/1.2 Figtree, sans-serif;
cursor: pointer;
padding: 6px;
}
.fp-hopp button:hover { background: var(--ink); color: var(--bg); }
.fp-rot[data-fase="plassert"] .fp-bakgrunn {
animation: fp-setter-seg .45s cubic-bezier(.2, .8, .2, 1) .18s;
}
/* ------------------------------------------------------------ rutetyper */
.fp-rute {
display: flex;
flex-direction: column;
background: var(--surface);
color: var(--ink);
padding: var(--pad);
overflow: hidden;
}
.fp-rute--ramme { border: 2px solid var(--ink); }
.fp-rute--mork { background: var(--ink); color: var(--bg); }
.fp-rute--signal { background: var(--signal); color: var(--ink); }
.fp-rute--bilde { padding: 0; background: var(--ink); }
a.fp-rute, button.fp-rute { text-decoration: none; cursor: pointer; border: 0; text-align: left; }
a.fp-rute:hover, button.fp-rute:hover { text-decoration: none; }
/* Hover: invertering eller signalfyll. Ingen andre hover-effekter. */
.fp-inverter:hover { background: var(--ink); color: var(--bg); }
.fp-rute--mork.fp-inverter:hover { background: var(--signal); color: var(--ink); }
/* --- logo --- */
.fp-logo {
flex-direction: row;
align-items: center;
gap: 10px;
}
.fp-logo__mark {
display: grid;
grid-template-columns: repeat(3, 8px);
gap: 2px;
flex: none;
}
.fp-logo__mark i {
display: block;
height: 8px;
background: var(--ink);
transition: transform .35s cubic-bezier(.2, .9, .25, 1);
}
.fp-logo__mark i:nth-child(6) { background: var(--signal); }
.fp-logo:hover .fp-logo__mark i:nth-child(5) { transform: translateX(10px); }
.fp-logo:hover .fp-logo__mark i:nth-child(6) { transform: translateX(-10px); }
.fp-logo__ord {
font: 800 var(--fsB)/1 Manrope, sans-serif;
letter-spacing: -0.02em;
color: var(--ink);
}
/* --- tagline --- */
.fp-tagline {
justify-content: center;
font: 400 var(--fsS)/1.4 Figtree, sans-serif;
text-wrap: pretty;
}
/* --- linjebryting i tekst ---
Overskrifter deles i setninger av tekst.setninger(); hver setning er en
inline-block, så nettleseren bryter helst mellom setningene. Er det plass
til hele overskriften på én linje, står den på én linje; er én setning
lengre enn linja, brytes den normalt inni seg selv.
balance jevner ut linjene i korte overskrifter, pretty unngår at siste
linje i brødtekst blir stående med ett ord alene. */
.setning { display: inline-block; }
h1, h2, h3,
.fp-etikett__tittel,
.fp-menypunkt,
.fp-cta,
.fp-menycta { text-wrap: balance; }
p,
.fp-tagline,
.fp-tekst,
.fp-prosa,
.fp-tjeneste__setning,
.fp-steg__setning,
.fp-kort__setning { text-wrap: pretty; }
/* --- retningsikoner ---
Pil og kryss er SVG, ikke tekstsymboler: en fallback-glyf fra systemfonten
fikk feil vekt og høyde ved siden av Manrope. Boksen er nøyaktig én
tekstlinje høy (1em), og stroke følger currentColor, så ikonet snur farge
sammen med ruta ved invertering. */
.fp-ikon {
width: 1em;
height: 1em;
flex: none;
display: block;
}
/* --- knapper --- */
.fp-cta {
align-items: center;
justify-content: center;
text-align: center;
font: 700 var(--fsB)/1.15 Manrope, sans-serif;
text-wrap: balance;
}
.fp-book {
flex-direction: row;
align-items: center;
justify-content: space-between;
font: 700 var(--fsB)/1 Manrope, sans-serif;
}
/* --- menyknapp --- */
.fp-menyknapp {
align-items: center;
justify-content: center;
gap: 5px;
padding: var(--pad);
}
.fp-menyknapp i { display: block; width: 22px; height: 3px; background: currentColor; }
/* --- video --- */
.fp-video { position: relative; }
.fp-video__plakat {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
padding: 0;
cursor: pointer;
background: var(--ink) center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
.fp-video__play {
width: var(--play);
height: var(--play);
background: var(--signal);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.fp-video__merke {
position: absolute;
left: var(--pad);
bottom: var(--pad);
background: var(--ink);
color: var(--bg);
padding: 6px 10px;
font: 600 var(--fsS)/1 Figtree, sans-serif;
}
.fp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* --- head/hero --- */
.fp-head {
position: relative;
justify-content: flex-end;
align-items: flex-start;
padding: 0;
background: var(--ink);
color: var(--bg);
}
.fp-head__bilde { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fp-head__tekst {
position: relative;
background: var(--ink);
color: var(--bg);
padding: var(--pad);
display: flex;
flex-direction: column;
gap: 8px;
max-width: 100%;
}
.fp-head h1 {
margin: 0;
font: 800 var(--fsH1)/1 Manrope, sans-serif;
letter-spacing: -0.035em;
color: var(--bg);
text-wrap: balance;
}
.fp-head p {
margin: 0;
font: 400 var(--fsB)/1.4 Figtree, sans-serif;
color: var(--bg);
text-wrap: pretty;
}
/* --- ok-rute --- */
.fp-ok {
justify-content: flex-end;
font: 600 var(--fsS)/1.25 Figtree, sans-serif;
}
/* --- seksjonsetikett --- */
/* Etiketten er +
(eller på undersidene via en skjult tittel).
Margin nullstilles, så utseendet er nøyaktig som da det var . */
.fp-etikett { justify-content: space-between; }
.fp-etikett__kicker {
margin: 0;
font: 600 var(--fsS)/1 Figtree, sans-serif;
opacity: .8;
}
.fp-etikett__tittel {
margin: 0;
font: 800 var(--fsH2)/1.05 Manrope, sans-serif;
letter-spacing: -0.02em;
text-wrap: balance;
}
.fp-etikett--enlinje { justify-content: flex-end; }
/* --- tjeneste --- */
.fp-tjeneste { justify-content: space-between; }
.fp-tjeneste svg { flex: none; display: block; }
.fp-tjeneste__navn {
font: 700 var(--fsB)/1.15 Manrope, sans-serif;
margin: 0 0 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fp-tjeneste__setning {
font: 400 var(--fsS)/1.3 Figtree, sans-serif;
text-wrap: pretty;
min-height: 2.6em;
}
/* --- steg --- */
.fp-steg { justify-content: space-between; }
.fp-steg__tall {
font: 800 var(--fsNum)/0.9 Manrope, sans-serif;
letter-spacing: -0.05em;
color: var(--signal);
}
.fp-steg__navn { margin: 0; font: 700 var(--fsB)/1.15 Manrope, sans-serif; }
.fp-steg__setning {
font: 400 var(--fsS)/1.3 Figtree, sans-serif;
margin-top: 4px;
min-height: 2.6em;
}
/* --- bilder, portretter, før/etter --- */
.fp-figur { position: relative; padding: 0; background: var(--surface); }
.fp-figur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-figur--ramme { border: 2px solid var(--ink); }
.fp-merke {
position: absolute;
left: 0;
bottom: 0;
padding: 6px 10px;
font: 700 var(--fsS)/1 Manrope, sans-serif;
background: var(--ink);
color: var(--bg);
z-index: 1;
}
.fp-merke--signal { background: var(--signal); color: var(--ink); }
/* --- tekstruter --- */
.fp-tekst {
justify-content: flex-end;
font: 400 var(--fsB)/1.4 Figtree, sans-serif;
text-wrap: pretty;
white-space: pre-line;
}
.fp-kort { justify-content: space-between; }
.fp-kort__navn { margin: 0; font: 700 var(--fsB)/1 Manrope, sans-serif; }
.fp-kort__setning { font: 400 var(--fsS)/1.35 Figtree, sans-serif; text-wrap: pretty; }
/* --- sitat --- */
.fp-sitat { justify-content: space-between; }
.fp-sitat blockquote { margin: 0; font: 700 var(--fsB)/1.3 Manrope, sans-serif; text-wrap: pretty; }
.fp-sitat figcaption { font: 400 var(--fsS)/1.3 Figtree, sans-serif; opacity: .8; }
/* --- kontaktkort --- */
.fp-kontaktkort { justify-content: space-between; }
.fp-kontaktkort__merkelapp { font: 600 var(--fsS)/1 Figtree, sans-serif; opacity: .7; }
.fp-kontaktkort__verdi { font: 700 var(--fsB)/1.1 Manrope, sans-serif; overflow-wrap: anywhere; }
/* --- skjema ---
Hver felt-rute har en synlig etikett øverst til venstre, i samme stil som
stikktittelen på seksjonsetikettene, og inputen fyller resten av ruta.
Plassholderteksten er et eksempel, aldri den eneste etiketten. */
.fui-i, .fui-form { display: contents; }
.fp-felt {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
height: 100%;
border: 2px solid var(--ink);
background: var(--bg);
color: var(--ink);
padding: var(--pad);
margin: 0;
min-width: 0;
}
.fp-felt__etikett {
font: 600 var(--fsS)/1.1 Figtree, sans-serif;
color: var(--ink);
opacity: .7;
padding: 0;
}
.fp-felt__input {
flex: 1 1 auto;
min-height: 0;
width: 100%;
border: 0;
background: transparent;
color: var(--ink);
padding: 0;
font: 400 var(--fsB)/1.35 Figtree, sans-serif;
}
textarea.fp-felt__input { resize: none; display: block; }
.fp-felt__input::placeholder { color: var(--ink); opacity: .4; }
.fp-felt__input:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.fp-felt--segment { gap: 6px; }
.fp-segment {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
border: 2px solid var(--ink);
width: 100%;
flex: 1 1 auto;
min-height: 0;
}
/* Ekte radioknapper, visuelt skjult: valget virker uten JavaScript, og
skjermlesere får riktig semantikk. Etikettene er klikkflaten. */
.fp-segment input {
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
.fp-segment label {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: var(--bg);
color: var(--ink);
font: 600 var(--fsS)/1 Figtree, sans-serif;
}
.fp-segment input:checked + label {
background: var(--ink);
color: var(--bg);
font: 700 var(--fsS)/1 Manrope, sans-serif;
}
.fp-segment input:focus-visible + label { outline: 3px solid var(--signal); outline-offset: -5px; }
/* «Send» står alene i ruta, plassert som «Book en prat»: venstrestilt,
vertikalt sentrert, samme --pad fra .fp-rute. */
.fp-send {
flex-direction: row;
align-items: center;
justify-content: flex-start;
font: 700 var(--fsB)/1 Manrope, sans-serif;
border: 0;
width: 100%;
height: 100%;
}
.fp-send__kvittering {
font: 700 var(--fsB)/1.2 Manrope, sans-serif;
text-wrap: balance;
}
.fp-feil {
font: 400 var(--fsS)/1.3 Figtree, sans-serif;
color: var(--ink);
background: var(--signal);
padding: 4px 8px;
margin: 0;
flex: none;
}
.fp-skjulunna { position: absolute; left: -9999px; top: 0; }
/* --- footer --- */
.fp-foot {
background: var(--ink);
color: var(--bg);
justify-content: space-between;
font: 400 var(--fsS)/1.35 Figtree, sans-serif;
}
.fp-foot a { color: inherit; }
.fp-foot__navn { font: 800 var(--fsB)/1 Manrope, sans-serif; }
.fp-foot__merkelapp { opacity: .7; }
.fp-foot__personer { display: flex; flex-direction: column; gap: 4px; font-size: .92em; }
.fp-foot__personer[data-mobil] { flex-direction: row; gap: 12px; font-size: 1em; }
.fp-foot__person { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.fp-foot__person img { display: block; flex: none; width: 36px; height: 36px; object-fit: cover; }
.fp-foot__person span { min-width: 0; overflow-wrap: anywhere; }
.fp-foot__some { display: flex; gap: 8px; }
.fp-foot__some a { display: flex; }
.fp-foot__lenker { display: flex; flex-wrap: wrap; gap: 2px 10px; }
/* --------------------------------------------------------------- menylag */
.fp-menylag {
position: fixed;
inset: 0;
z-index: 30;
background: var(--bg);
overflow-x: clip;
overflow-y: auto;
}
.fp-menylag[hidden] { display: none; }
/* Bakgrunnsrutene tegnes én rad utenfor på hver kant (se tegnBakgrunn).
I menylaget, som ruller, ville den nederste raden gitt tom rulleflate
under siste knapp. Flata klipper derfor sitt eget ytterpunkt. */
.fp-menyflate { position: relative; overflow: clip; }
.fp-menypunkt {
justify-content: flex-end;
font: 800 var(--fsH2)/1 Manrope, sans-serif;
letter-spacing: -0.02em;
}
.fp-menypunkt__rad { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.fp-menypunkt__nr { font: 600 var(--fsS)/1 Figtree, sans-serif; opacity: .6; flex: none; }
.fp-menypunkt:hover { background: var(--signal); }
.fp-lukk {
align-items: center;
justify-content: center;
font: 500 28px/1 Manrope, sans-serif;
padding: 0;
}
.fp-lukk .fp-ikon { width: 28px; height: 28px; }
/* --------------------------------------------- reserve: ingen JavaScript */
.no-js .fp-innhold {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
padding: 12px;
}
.no-js .fp-b { aspect-ratio: 1; }
.no-js .fp-b[data-bred] { grid-column: span 2; aspect-ratio: 2 / 1; }
.no-js .fp-bakgrunn { display: none; }
.no-js .fp-menylag { position: static; }
.no-js .fp-menyflate { display: none; }
/* ---------------------------------------------------- redusert bevegelse */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition-duration: .15s !important;
}
}
/* ------------------------------------------- innhold per bruddpunkt
Motoren setter data-bp på .fp-rot (d = 8 kol, t = 6, m = 4), så
innholdet følger nøyaktig samme bruddpunkt som rutenettet. Media
queries under er reserven for visning uten JavaScript.
*/
.fp-kun-m { display: none; }
[data-bp="m"] .fp-kun-m { display: inline; }
[data-bp="m"] .fp-ikke-m { display: none; }
[data-bp="m"] .fp-foot__personer { flex-direction: row; gap: 12px; font-size: 1em; }
.no-js .fp-kun-m { display: none; }
@media (max-width: 699px) {
.no-js .fp-kun-m { display: inline; }
.no-js .fp-ikke-m { display: none; }
.no-js .fp-foot__personer { flex-direction: row; gap: 12px; font-size: 1em; }
}
/* ------------------------------------------------------ menyens småting */
.fp-menypunkt--liten .fp-menypunkt__rad { font: 700 var(--fsB)/1 Manrope, sans-serif; }
.fp-menycta {
justify-content: flex-end;
font: 700 var(--fsB)/1.15 Manrope, sans-serif;
text-wrap: balance;
}
.fp-etikett__under { margin: 0; font: 400 var(--fsS)/1.3 Figtree, sans-serif; }
/* ------------------------------------------- utfyllende tjeneste-/stegruter
På de egne sidene er rutene to celler høye og rommer den lange teksten.
Lenkede ruter på forsiden får signalfyll på hover, som menypunktene —
ingen andre hover-effekter. */
.fp-prosa {
font: 400 var(--fsS)/1.45 Figtree, sans-serif;
margin-top: 8px;
text-wrap: pretty;
}
.fp-prosa p { margin: 0 0 0.5em; }
.fp-prosa p:last-child { margin-bottom: 0; }
.fp-prosa a { color: inherit; }
/* Utfyllende tjenesteruter: ikon øverst, tittel og kort tekst på fast plass
rett under ikonet, utfyllende tekst under det. Alt toppjustert med faste
mellomrom, så titlene står på samme linje i hele raden uansett hvor lang
teksten er. Forsidens 1x1-ruter beholder bunnjusteringen. */
.fp-tjeneste--stor {
justify-content: flex-start;
gap: var(--pad);
}
.fp-tjeneste--stor .fp-tjeneste__navn { white-space: normal; overflow: visible; }
.fp-steg--stor .fp-steg__setning { min-height: 0; }
a.fp-tjeneste:hover,
a.fp-steg:hover { background: var(--signal); }
a.fp-etikett:hover { background: var(--signal); color: var(--ink); }