/* Pro-malen, 21.09.2026. Én fil: tokener, grunnlag, komponenter. Rolig, typografisk, én aksentfarge, hårlinjer i stedet for kort. Alt som beveger seg respekterer prefers-reduced-motion. */ @font-face{ font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/skrifter/Geist.woff2") format("woff2"); } /* ── tokener ─────────────────────────────────────────────────────────── */ :root{ --ink:#0B1220; /* tekst, 16,9:1 mot bakgrunn */ --ink-2:#303B4E; /* ingress og forklaring, 10,4:1 */ --dempet:#5C6779; /* småtekst, 5,9:1 */ --linje:#E2E6ED; --linje-sterk:#B9C1CE; --flate:#FFFFFF; --bakgrunn:#F5F7FA; --aksent:#1D4ED8; /* én farge. Hvit tekst på den: 6,6:1 */ --aksent-hover:#1A43BD; --aksent-tekst:#1A43BD; /* aksent brukt som tekst på lys flate, 7,4:1 */ --aksent-flate:#E8EEFF; --fokus:#1D4ED8; --f-xs:.78rem; --f-s:.88rem; --f-base:1.04rem; --f-m:1.18rem; --f-l:1.45rem; --f-xl:1.9rem; --f-h1:clamp(2.5rem, 5.6vw, 4.4rem); --maks:1180px; --marg:clamp(16px, 4vw, 40px); --radius:6px; --skygge:0 1px 2px rgba(11,18,32,.06), 0 8px 24px -12px rgba(11,18,32,.18); --fart:180ms; --lett:cubic-bezier(.2,.7,.2,1); } /* Lys er standard. Moerk foelger systemet, med mindre den besoekende har valgt selv (knappen i toppen setter data-tema paa ). */ @media (prefers-color-scheme: dark){ :root:not([data-tema="lys"]){ --ink:#E9EDF3; --ink-2:#C3CBD8; --dempet:#93A0B4; --linje:#1F2A3D; --linje-sterk:#33415A; --flate:#101827; --bakgrunn:#0B1220; --aksent:#7AA2FF; --aksent-hover:#98B7FF; --aksent-tekst:#9DBBFF; --aksent-flate:#152244; --fokus:#9DBBFF; --skygge:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); } } :root[data-tema="moerk"]{ --ink:#E9EDF3; --ink-2:#C3CBD8; --dempet:#93A0B4; --linje:#1F2A3D; --linje-sterk:#33415A; --flate:#101827; --bakgrunn:#0B1220; --aksent:#7AA2FF; --aksent-hover:#98B7FF; --aksent-tekst:#9DBBFF; --aksent-flate:#152244; --fokus:#9DBBFF; --skygge:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); } /* ── grunnlag ────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--bakgrunn);color:var(--ink); font:400 var(--f-base)/1.6 "Geist",system-ui,-apple-system,"Segoe UI",sans-serif; font-feature-settings:"ss01","cv11"; } h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.1;text-wrap:balance} p{margin:0} a{color:inherit} :focus-visible{outline:2px solid var(--fokus);outline-offset:3px;border-radius:2px} .wrap{max-width:var(--maks);margin:0 auto;padding:0 var(--marg)} .liten{font-size:var(--f-s);color:var(--dempet)} .skjult{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* knapper: én radius, én høyde, to styrker */ .knapp{ display:inline-flex;align-items:center;gap:.5rem;min-height:46px;padding:0 1.15rem; border-radius:var(--radius);border:1px solid transparent;font-weight:600;font-size:var(--f-base); text-decoration:none;cursor:pointer;transition:background var(--fart) var(--lett),border-color var(--fart) var(--lett),transform 80ms var(--lett); } .knapp:active{transform:translateY(1px)} .knapp.fram{background:var(--aksent);color:#fff} .knapp.fram:hover{background:var(--aksent-hover)} .knapp.rolig{background:transparent;color:var(--ink);border-color:var(--linje-sterk)} .knapp.rolig:hover{border-color:var(--ink)} .lenke{color:var(--aksent-tekst);text-decoration:none;font-weight:600;border-bottom:1px solid transparent} .lenke:hover{border-color:currentColor} /* ── topp ────────────────────────────────────────────────────────────── */ .topp{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bakgrunn) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linje)} .topp .wrap{display:flex;align-items:center;gap:2rem;min-height:68px} .merke{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:700;letter-spacing:-.01em;font-size:var(--f-m)} .merke .tegn{width:26px;height:26px;border-radius:6px;background:var(--aksent);display:grid;place-items:center} .merke .tegn svg{width:16px;height:16px} .meny{display:flex;gap:1.6rem;margin-left:auto;list-style:none;padding:0} .meny a{text-decoration:none;color:var(--ink-2);font-weight:500;font-size:var(--f-s)} .meny a:hover{color:var(--ink)} .topp .knapp{min-height:40px;padding:0 .95rem;font-size:var(--f-s)} .temaknapp{background:none;border:1px solid var(--linje-sterk);border-radius:var(--radius);width:40px;height:40px;display:grid;place-items:center;color:var(--ink);cursor:pointer;padding:0} .temaknapp svg{width:18px;height:18px} .temaknapp .sol{display:none} :root[data-tema="moerk"] .temaknapp .sol{display:block} :root[data-tema="moerk"] .temaknapp .maane{display:none} @media (prefers-color-scheme: dark){ :root:not([data-tema="lys"]) .temaknapp .sol{display:block} :root:not([data-tema="lys"]) .temaknapp .maane{display:none} } .menyknapp{display:none;margin-left:auto;background:none;border:1px solid var(--linje-sterk);border-radius:var(--radius);padding:.45rem .7rem;color:var(--ink);font:inherit;font-size:var(--f-s)} @media (max-width:820px){ .meny{display:none;position:absolute;left:0;right:0;top:68px;margin:0;padding:.6rem var(--marg) 1rem;flex-direction:column;gap:.2rem;background:var(--flate);border-bottom:1px solid var(--linje)} .meny.aapen{display:flex} .meny a{display:block;padding:.6rem 0;font-size:var(--f-base)} .menyknapp{display:inline-block} .topp .knapp.fram{display:none} .temaknapp{margin-left:auto} .menyknapp{margin-left:0} } /* ── hero ────────────────────────────────────────────────────────────── */ .hero{padding:clamp(56px,9vw,120px) 0 clamp(40px,6vw,72px)} .hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,80px);align-items:center} .over{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--f-s);font-weight:600;color:var(--aksent-tekst);letter-spacing:.01em} .over::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--aksent)} .hero h1{font-size:var(--f-h1);margin:1rem 0 1.2rem;letter-spacing:-.035em;line-height:1.02;max-width:14ch} .hero .lede{font-size:var(--f-m);line-height:1.5;color:var(--ink-2);max-width:48ch} .hero .handlinger{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;margin-top:1.8rem} .hero .fot{margin-top:1.4rem;font-size:var(--f-s);color:var(--dempet)} /* tegningen: nettverket, ikke pynt. Lys flate, hårlinjer, én aksent. */ .tegning{position:relative;background:var(--flate);border:1px solid var(--linje);border-radius:12px;box-shadow:var(--skygge);padding:18px;overflow:hidden} .tegning::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--linje) 1px,transparent 1px);background-size:22px 22px;opacity:.7;pointer-events:none} .tegning svg{position:relative;display:block;width:100%;height:auto} .tegning .node{fill:var(--flate);stroke:var(--linje-sterk);stroke-width:1.2} .tegning .node.senter{fill:var(--aksent);stroke:var(--aksent)} .tegning text{font:600 12px "Geist",system-ui,sans-serif;fill:var(--ink);letter-spacing:.01em} .tegning .senter-tekst{fill:#fff} .tegning .undertekst{font-weight:500;font-size:10.5px;fill:var(--dempet)} .tegning .linje{fill:none;stroke:var(--linje-sterk);stroke-width:1.4;stroke-linecap:round} .tegning .puls{fill:none;stroke:var(--aksent);stroke-width:2;stroke-linecap:round;stroke-dasharray:14 260;stroke-dashoffset:274;opacity:.95} .tegning .status{fill:var(--flate);stroke:var(--linje)} .tegning .prikk{fill:#1E9E5A} .tegning .status text{font-weight:500;font-size:11px} /* innglidning: bare når skript er lastet, og aldri ved redusert bevegelse */ html.js [data-avsl]{opacity:0;transform:translateY(12px);transition:opacity 520ms var(--lett),transform 520ms var(--lett)} html.js [data-avsl].inne{opacity:1;transform:none} html.js [data-avsl="2"]{transition-delay:90ms} html.js [data-avsl="3"]{transition-delay:180ms} html.js [data-avsl="4"]{transition-delay:270ms} @media (prefers-reduced-motion:no-preference){ .tegning .puls{animation:puls 5.5s linear infinite} .tegning .puls.b{animation-delay:1.8s} .tegning .puls.c{animation-delay:3.6s} .tegning .linje.tegn{stroke-dasharray:400;stroke-dashoffset:400;animation:tegn 1.1s var(--lett) forwards} .tegning .linje.tegn:nth-child(2){animation-delay:.1s} .tegning .linje.tegn:nth-child(3){animation-delay:.2s} .tegning .linje.tegn:nth-child(4){animation-delay:.3s} .tegning .linje.tegn:nth-child(5){animation-delay:.4s} .tegning .linje.tegn:nth-child(6){animation-delay:.5s} } @keyframes puls{to{stroke-dashoffset:0}} @keyframes tegn{to{stroke-dashoffset:0}} @media (prefers-reduced-motion:reduce){ html.js [data-avsl]{opacity:1;transform:none;transition:none} .tegning .puls{display:none} } @media (max-width:900px){ .hero .wrap{grid-template-columns:1fr} .hero h1{max-width:none} } /* ── bevis: fire fakta på en linje, hårlinjer ────────────────────────── */ .bevis{border-top:1px solid var(--linje);border-bottom:1px solid var(--linje)} .bevis .wrap{display:grid;grid-template-columns:repeat(4,1fr)} .bevis .wrap>div{padding:22px 28px 22px 0} .bevis .wrap>div+div{border-left:1px solid var(--linje);padding-left:28px} .bevis b{display:block;font-size:var(--f-l);font-weight:600;letter-spacing:-.02em;line-height:1.15} .bevis span{display:block;color:var(--dempet);font-size:var(--f-s);margin-top:4px} @media (max-width:820px){ .bevis .wrap{grid-template-columns:1fr 1fr} .bevis .wrap>div{padding:16px 16px 16px 0} .bevis .wrap>div+div{border-left:0;padding-left:0} .bevis .wrap>div:nth-child(even){border-left:1px solid var(--linje);padding-left:16px} .bevis .wrap>div:nth-child(n+3){border-top:1px solid var(--linje)} } /* ── seksjoner ───────────────────────────────────────────────────────── */ .blk{padding:clamp(56px,8vw,104px) 0} .blk-hode{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem 4rem;align-items:end;margin-bottom:2.4rem} .blk h2{font-size:var(--f-xl);letter-spacing:-.025em} .blk-hode p{color:var(--ink-2);max-width:52ch} @media (max-width:820px){.blk-hode{grid-template-columns:1fr;gap:.8rem}} /* tjenester: liste med tall, ikke kort */ .tjenester{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linje)} .tjenester li{padding:26px 28px 28px 0;border-bottom:1px solid var(--linje)} .tjenester li:nth-child(3n+2),.tjenester li:nth-child(3n+3){border-left:1px solid var(--linje);padding-left:28px} .tjenester .nr{font-variant-numeric:tabular-nums;color:var(--aksent-tekst);font-weight:600;font-size:var(--f-s)} .tjenester h3{font-size:var(--f-m);margin:.5rem 0 .45rem;letter-spacing:-.015em} .tjenester p{color:var(--ink-2);font-size:var(--f-s);line-height:1.55;max-width:34ch} .tjenester a{display:inline-block;margin-top:.8rem} @media (max-width:820px){ .tjenester{grid-template-columns:1fr} .tjenester li{padding:20px 0} .tjenester li:nth-child(3n+2),.tjenester li:nth-child(3n+3){border-left:0;padding-left:0} } /* ── bunn ────────────────────────────────────────────────────────────── */ .bunn{border-top:1px solid var(--linje);padding:40px 0 48px;color:var(--dempet);font-size:var(--f-s)} .bunn .wrap{display:flex;justify-content:space-between;gap:1.5rem 3rem;flex-wrap:wrap;align-items:flex-start} .bunn .merke{color:var(--ink)} .bunn a{color:var(--ink-2);text-decoration:none} .bunn a:hover{color:var(--ink)} .bunn .kol{display:flex;flex-direction:column;gap:.35rem}