2026-03-13 13:09:04 +01:00
<!DOCTYPE html>
< html lang = "nb" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Forskjeller — interaktive visualiseringer< / title >
2026-03-13 13:58:21 +01:00
< meta property = "og:type" content = "website" >
< meta property = "og:locale" content = "nb_NO" >
< meta property = "og:site_name" content = "Forskjeller" >
< meta property = "og:title" content = "Forskjeller" >
< meta property = "og:description" content = "Interaktive visualiseringer som viser hvordan små forskjeller vokser over tid." >
< meta property = "og:url" content = "https://forskjeller.naiv.no/" >
< meta name = "twitter:card" content = "summary" >
2026-03-13 13:09:04 +01:00
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link href = "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel = "stylesheet" >
< style >
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #f5f2eb;
--ink: #1a1714;
--ink2: #5a5650;
--ink3: #8a857e;
--accent: #c0392b;
--border: rgba(26,23,20,0.12);
}
body {
font-family: 'DM Sans', sans-serif;
background: var(--bg);
color: var(--ink);
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
background: var(--ink);
color: var(--bg);
padding: 3.5rem 2rem 3rem;
text-align: center;
position: relative;
overflow: hidden;
}
header::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 40px,
rgba(255,255,255,0.02) 40px,
rgba(255,255,255,0.02) 41px
);
}
header .eyebrow {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245,242,235,0.5);
margin-bottom: 1rem;
font-weight: 400;
}
header h1 {
font-family: 'Fraunces', serif;
font-size: clamp(2.2rem, 6vw, 3.5rem);
font-weight: 600;
line-height: 1.1;
margin-bottom: 1rem;
position: relative;
}
header p.lead {
font-size: clamp(0.95rem, 2vw, 1.1rem);
color: rgba(245,242,235,0.65);
max-width: 520px;
margin: 0 auto;
font-weight: 300;
line-height: 1.7;
}
main {
max-width: 640px;
margin: 0 auto;
padding: 3rem 1.25rem 4rem;
flex: 1;
}
.topics {
display: grid;
gap: 1rem;
}
.topic-card {
display: block;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem 1.75rem;
text-decoration: none;
color: var(--ink);
transition: border-color 0.15s, box-shadow 0.15s;
}
.topic-card:hover {
border-color: var(--accent);
box-shadow: 0 2px 12px rgba(192,57,43,0.08);
}
.topic-card h2 {
font-family: 'Fraunces', serif;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.4rem;
}
.topic-card p {
font-size: 0.95rem;
color: var(--ink2);
line-height: 1.6;
}
.topic-card .arrow {
display: inline-block;
color: var(--accent);
font-size: 0.85rem;
margin-top: 0.75rem;
font-weight: 500;
letter-spacing: 0.02em;
}
footer {
text-align: center;
padding: 2rem 1rem;
font-size: 12px;
color: var(--ink3);
border-top: 1px solid var(--border);
}
2026-03-13 13:18:45 +01:00
footer a { color: var(--ink3); }
2026-03-13 13:09:04 +01:00
< / style >
2026-03-13 18:58:12 +01:00
< script async src = "/implausibly/js/pa-hrD38igEdOJ7wP3NdA40I.js" > < / script >
< script >
window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
plausible.init({ endpoint: "/implausibly/api/event" })
< / script >
2026-03-13 13:09:04 +01:00
< / head >
< body >
< header >
< p class = "eyebrow" > forskjeller.naiv.no< / p >
< h1 > Forskjeller< / h1 >
< p class = "lead" > Interaktive visualiseringer som viser hvordan tilsynelatende små forskjeller vokser over tid.< / p >
< / header >
< main >
< div class = "topics" >
< a href = "lonn/" class = "topic-card" >
< h2 > Lønnsforskjellen vokser< / h2 >
< p > Prosentvise lønnstillegg ser rettferdige ut, men gjør de rike rikere. Se hvordan en liten forskjell i startlønn blir til hundretusener over en karriere.< / p >
< span class = "arrow" > Se kalkulatoren → < / span >
< / a >
2026-03-13 13:38:25 +01:00
< a href = "sparing/" class = "topic-card" >
< h2 > Rentes rente forsterker< / h2 >
< p > Likt sparebeløp, ulik avkastning. Noen få prosentpoeng i forskjell skaper enorme gap over tid — takket være rentes rente-effekten.< / p >
< span class = "arrow" > Se kalkulatoren → < / span >
< / a >
< a href = "bolig/" class = "topic-card" >
< h2 > Boligforskjellen forsterkes< / h2 >
< p > To boliger med ulik pris stiger like mye i prosent — men belåningen forsterker gapet i egenkapital dramatisk.< / p >
< span class = "arrow" > Se kalkulatoren → < / span >
< / a >
< a href = "arv/" class = "topic-card" >
< h2 > Arvens forsprang< / h2 >
< p > Person A starter fra null, person B arver en sum. Begge sparer likt — men gapet lukkes aldri. Arvet formue vokser eksponentielt uavhengig av innsats.< / p >
< span class = "arrow" > Se kalkulatoren → < / span >
< / a >
2026-03-13 13:09:04 +01:00
< / div >
< / main >
< footer >
2026-03-13 13:18:45 +01:00
Tallene er illustrative og ikke finansiell rådgivning · < a href = "https://kode.naiv.no/olemd/forskjeller.naiv.no" > Kildekode< / a >
2026-03-13 13:09:04 +01:00
< / footer >
< / body >
< / html >
