/* klapp.css — felles stilark for klapp.as (forside, /musikere/, /byraaer/). Brand-verdier fra ../brand-klapp/SPESIFIKASJON.md. Endre tallene der, ikke her. */ @font-face { font-family: "Schibsted Grotesk"; src: url("/fonter/schibsted-grotesk-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* ── Tokens ─────────────────────────────────────────────────────────── */ /* Tre tilstander: systemvalg (media query), og eksplisitt valg via data-theme på (bryteren i toppen, lagret i localStorage). */ :root { color-scheme: light dark; --petrol:#0E7C99; --petrol-moerk:#0B637A; --petrol-lys:#54A6BB; --blekk:#07161c; --hvit:#FDFDFD; --grunn:#F4F7F8; /* sidegrunn */ --kort:#FFFFFF; /* kortflate */ --tekst:#07161c; --dus:#51646B; --linje:rgba(7,22,28,.12); --aksent-tekst:#0E7C99; /* eyebrow, lenker i kort */ --scene:#07161c; /* den mørke seksjonen */ --scene-tekst:#FDFDFD; --scene-dus:rgba(253,253,253,.78); --scene-linje:rgba(253,253,253,.12); --hake:#54a6bb; --disp:"Schibsted Grotesk",system-ui,-apple-system,sans-serif; --sans:"Schibsted Grotesk",system-ui,-apple-system,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grunn:#0A1418; --kort:#182A32; --tekst:#FDFDFD; --dus:rgba(253,253,253,.68); --linje:rgba(253,253,253,.14); --aksent-tekst:#54A6BB; /* petrol ren gir 3,8 mot blekk — for lavt til liten tekst */ --scene:#07161c; --scene-tekst:#FDFDFD; --scene-dus:rgba(253,253,253,.78); --scene-linje:rgba(253,253,253,.12); } } :root[data-theme="dark"] { --grunn:#0A1418; --kort:#182A32; --tekst:#FDFDFD; --dus:rgba(253,253,253,.68); --linje:rgba(253,253,253,.14); --aksent-tekst:#54A6BB; --scene:#07161c; --scene-tekst:#FDFDFD; --scene-dus:rgba(253,253,253,.78); --scene-linje:rgba(253,253,253,.12); } /* ── Grunnlag ───────────────────────────────────────────────────────── */ * { box-sizing:border-box; } html { scroll-behavior:smooth; } /* Brede vinduer: Jonathans skjerm er 2854 CSS-px bred. Med 16 px rot ble rammen på 1280 px et smalt bånd midt på. Alt er satt i rem, så rot-fonten skalerer hele siden — ikke bare teksten. */ @media (min-width:1800px) { html { font-size:18px; } } @media (min-width:2300px) { html { font-size:21px; } } @media (min-width:2700px) { html { font-size:24px; } } body { margin:0; background:var(--grunn); color:var(--tekst); font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } strong { font-weight:600; } /* Én ramme for alle sider — undersidene lå på 66rem og logoen hoppet mellom sidene. Bare sidepaddingen settes her: `padding:0 2rem` nullet en gang ut menyens topp og bunn (Jonathan, 2026-09-07). */ .ramme { max-width:80rem; margin:0 auto; padding-left:2rem; padding-right:2rem; } @media (max-width:40rem) { .ramme { padding-left:1.4rem; padding-right:1.4rem; } } /* ── Topp ───────────────────────────────────────────────────────────── */ header { position:sticky; top:0; z-index:10; background:var(--grunn); border-bottom:1px solid var(--linje); } .topp { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1rem; padding-bottom:1rem; } .topp .merke { display:block; color:var(--tekst); } .topp .merke svg { height:2.2rem; width:auto; display:block; } /* Ordmerket i SVG-en har hardkodet blekk-fyll. Fyll via CSS følger tekstfargen, så ordet blir hvitt i mørk modus uten at SVG-fila røres. Merket (rect) er petrol i begge. */ .topp .merke svg path { fill:currentColor; } .topp nav { display:flex; align-items:center; gap:1.4rem; } .topp nav a { white-space:nowrap; } .topp nav .lenke { font-size:.95rem; } .tema { width:36px; height:36px; border-radius:10px; border:1px solid var(--linje); background:transparent; color:var(--tekst); display:grid; place-items:center; cursor:pointer; padding:0; } .tema:hover { border-color:var(--aksent-tekst); color:var(--aksent-tekst); } .tema svg { width:18px; height:18px; } .tema .sol { display:none; } :root[data-theme="dark"] .tema .sol { display:block; } :root[data-theme="dark"] .tema .maane { display:none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tema .sol { display:block; } :root:not([data-theme="light"]) .tema .maane { display:none; } } :focus-visible { outline:2px solid var(--petrol-lys); outline-offset:3px; } @media (max-width:40rem) { .topp nav .skjul-smal { display:none; } .topp nav { gap:.8rem; } .topp .merke svg { height:28px; } .topp .knapp { padding:.55rem 1rem; font-size:.95rem; } } /* ── Knapper og lenker ──────────────────────────────────────────────── */ .knapp { display:inline-block; background:var(--petrol); color:var(--hvit); font-family:var(--disp); font-weight:600; font-size:1rem; text-decoration:none; padding:.65rem 1.4rem; border-radius:10px; transition:background .15s, transform .15s; } .knapp:hover { background:var(--petrol-moerk); transform:translateY(-1px); } .knapp.stor { font-size:1.1rem; padding:.85rem 1.8rem; } .knapp.omvendt { background:var(--hvit); color:var(--petrol); } .knapp.omvendt:hover { background:#fff; } .knapp.ramme-knapp { background:transparent; color:var(--aksent-tekst); border:1.5px solid var(--linje); } .knapp.ramme-knapp:hover { background:var(--kort); border-color:var(--aksent-tekst); } .lenke { color:inherit; font-weight:500; text-underline-offset:4px; } .lenke:hover { color:var(--aksent-tekst); } /* Telefonrammen — samme mørke ramme i begge moduser, det er en gjenstand, ikke en flate */ .tlf { width:min(72vw,300px); border-radius:40px 40px 0 0; border:9px solid #0a1418; border-bottom:0; background:#0a1418; overflow:hidden; box-shadow:0 24px 60px rgba(4,20,26,.45); } .tlf.hel { border-radius:40px; border-bottom:9px solid #0a1418; box-shadow:0 18px 48px rgba(4,20,26,.28); } .tlf img { display:block; width:100%; height:auto; } /* ── Forsiden: et år i Klapp ──────────────────────────────────────── Hvert kapittel har sin egen grunn, så siden ikke går i ett: konsertfoto → lys reise med telefon → studiofoto → lys liste → vinyl → priser. */ /* Scenen: konsertfoto bak, naturlige farger, mørkt bare der teksten står. */ .hero-scene { position:relative; background:var(--blekk); color:var(--hvit); overflow:hidden; isolation:isolate; } .hero-scene .foto { position:absolute; inset:0; z-index:-2; } .hero-scene .foto img { width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; animation:kenburns 26s ease-in-out infinite alternate; } @keyframes kenburns { from { transform:scale(1); } to { transform:scale(1.08); } } .hero-scene::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(7,22,28,.9) 0%, rgba(7,22,28,.7) 38%, rgba(7,22,28,.2) 68%, rgba(7,22,28,.35) 100%), linear-gradient(0deg, rgba(7,22,28,.85) 0%, transparent 40%); } .hero-scene-indre { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:3rem; align-items:center; padding-top:5rem; padding-bottom:7.5rem; min-height:min(88vh,760px); } @media (max-width:52rem) { .hero-scene-indre { grid-template-columns:1fr; padding-top:3rem; padding-bottom:3rem; min-height:0; } } /* Appen i hero: oversikten i en telefon, svakt vippet, svever. Under 52rem bærer reisen telefonen, så den skjules her. */ .hero-tlf { justify-self:end; align-self:center; perspective:1400px; } .hero-tlf .tlf { width:min(30vw,330px); transform:rotate(-4deg); animation:sveve 7s ease-in-out infinite; box-shadow:0 40px 90px rgba(4,20,26,.6); } @keyframes sveve { 0%,100% { transform:rotate(-4deg) translateY(0); } 50% { transform:rotate(-4deg) translateY(-10px); } } @media (max-width:52rem) { .hero-tlf { display:none; } } /* Undersidene: samme scene, lavere, uten telefon. */ .hero-scene.liten .hero-scene-indre { grid-template-columns:minmax(0,1fr); min-height:min(62vh,560px); padding-top:4.5rem; padding-bottom:5rem; } .hero-scene.liten h1 { font-size:clamp(2.4rem,5.4vw,4.4rem); max-width:16ch; } /* Fokuspunkt per foto: musikeren står midt i scenebildet, øvingslokalet er jevnt, miksepulten har målerne øverst. */ body.forside .hero-scene .foto img { object-position:center 40%; } .hero-scene.trompet .foto img { object-position:center 45%; } .hero-scene.miks .foto img { object-position:center 35%; } .hero-scene .eyebrow { color:var(--petrol-lys); } .hero-scene h1 { font-family:var(--disp); font-weight:600; letter-spacing:-.035em; font-size:clamp(3rem,7.2vw,6rem); line-height:.95; margin:0 0 1.3rem; text-wrap:balance; max-width:12ch; } .hero-scene h1 em { font-style:normal; color:var(--petrol-lys); } .hero-scene p.ing { font-size:clamp(1.05rem,1.6vw,1.25rem); max-width:30rem; margin:0 0 1.8rem; color:rgba(253,253,253,.85); line-height:1.5; } .hero-scene .cta { display:flex; gap:1.1rem; align-items:center; flex-wrap:wrap; margin-bottom:1.4rem; } .hero-scene .cta .lenke { color:var(--hvit); } .hero-scene .cta .lenke:hover { color:var(--petrol-lys); } .hero-scene .tillit { font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(253,253,253,.6); margin:0; } .hero-scene .knapp.omvendt { background:var(--hvit); color:var(--blekk); } .hero-scene .knapp.omvendt:hover { background:#fff; } .bla { position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:1; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(253,253,253,.6); display:grid; justify-items:center; gap:.4rem; text-decoration:none; } .bla svg { width:16px; height:16px; animation:dupp 1.8s ease-in-out infinite; } @keyframes dupp { 0%,100% { transform:translateY(0); } 50% { transform:translateY(6px); } } /* Reisen: stegene til venstre, telefonen står stille til høyre og bytter skjerm. */ .reise { padding:5.5rem 0 5rem; } .reise-hode { max-width:44rem; margin-bottom:3.5rem; } .reise-hode .ingress { margin-bottom:0; } .reise-indre { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:4rem; align-items:start; } @media (max-width:52rem) { .reise-indre { grid-template-columns:1fr; gap:2rem; } } .steg { display:grid; gap:0; } .steg-rad { display:grid; grid-template-columns:5.2rem minmax(0,1fr); gap:1.4rem; align-items:start; padding:2.2rem 0; border-top:1px solid var(--linje); min-height:min(30vh,260px); opacity:.55; transition:opacity .4s ease; } .steg-rad.aktiv { opacity:1; } .steg-rad .mnd { font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--aksent-tekst); padding-top:.5rem; } .steg-rad h3 { font-size:clamp(1.5rem,3vw,2.3rem); letter-spacing:-.025em; line-height:1.05; margin:0 0 .6rem; } .steg-rad p { color:var(--dus); margin:0; max-width:30rem; font-size:1.05rem; } .steg-rad .lenke { display:inline-block; margin-top:.8rem; font-size:.95rem; } @media (max-width:52rem) { .steg-rad { min-height:0; padding:1.6rem 0; grid-template-columns:4rem 1fr; opacity:1; transform:none; } } .telefon-kolonne { position:sticky; top:5.5rem; display:grid; justify-items:center; gap:1.2rem; padding-top:.4rem; } .reise { background:var(--kort); border-bottom:1px solid var(--linje); } @media (max-width:52rem) { .telefon-kolonne { position:relative; top:auto; order:-1; } } .tlf.reise-tlf { width:min(64vw,340px); position:relative; } .tlf.reise-tlf .skjermer { position:relative; aspect-ratio:390/844; } .tlf.reise-tlf img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transition:opacity .55s ease; } .tlf.reise-tlf img.vises { opacity:1; } /* Setlista under telefonen: fem staver (merkets motiv) som fylles steg for steg. */ .setliste-kolonne { width:min(64vw,340px); } .setliste { display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; width:100%; height:12px; } .setliste i { display:block; height:100%; background:var(--linje); border-radius:3px; transition:background .5s ease; } .setliste i.fylt { background:var(--petrol); } .setliste-navn { width:100%; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--aksent-tekst); margin-top:.55rem; text-align:center; } .setliste-navn span { display:none; } .setliste-navn span.aktiv { display:block; } /* Kapittel med foto: studio (opptakt), stage door (bak scenen) og vinyl (gullplata). */ .kapittel { position:relative; color:var(--hvit); overflow:hidden; isolation:isolate; background:var(--blekk); } .kapittel .foto { position:absolute; inset:0; z-index:-2; } .kapittel .foto img { width:100%; height:100%; object-fit:cover; display:block; } .kapittel::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(7,22,28,.92) 0%, rgba(7,22,28,.55) 55%, rgba(7,22,28,.25) 100%); } .kapittel-indre { padding:6.5rem 0 6rem; display:grid; gap:2.2rem; } .kapittel { border-top:1px solid rgba(253,253,253,.08); border-bottom:1px solid rgba(253,253,253,.08); } .kapittel.opptakt .kapittel-indre { padding:7rem 0 6rem; } .kapittel.bakscenen .foto img { object-position:center 45%; } .kapittel.bakscenen::before { background:linear-gradient(90deg, rgba(7,22,28,.9) 0%, rgba(7,22,28,.7) 50%, rgba(7,22,28,.45) 100%); } .kapittel.bakscenen .tre-ord p { color:rgba(253,253,253,.8); } .kapittel.opptakt::before { background:linear-gradient(90deg, rgba(7,22,28,.88) 0%, rgba(7,22,28,.6) 55%, rgba(7,22,28,.3) 100%); } /* Resten av regnskapet: tonet bånd mellom reisen og lista, så flatene ikke går i ett */ .resten { background:var(--grunn); border-bottom:1px solid var(--linje); } .resten h2 { max-width:22ch; } .resten .tre-ord { margin-top:1.8rem; } .resten .tre-ord div { border-top:1px solid var(--linje); } .resten .tre-ord p { color:var(--dus); font-size:.98rem; margin:0; } .kapittel .eyebrow { color:var(--petrol-lys); } .kapittel h2 { color:var(--hvit); font-size:clamp(2rem,5vw,3.6rem); letter-spacing:-.03em; line-height:1; max-width:22ch; } .kapittel p { color:rgba(253,253,253,.82); max-width:34rem; margin:0; font-size:1.08rem; } .tre-ord { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6rem; margin-top:.6rem; } @media (max-width:46rem) { .tre-ord { grid-template-columns:1fr; } } .tre-ord div { border-top:1px solid rgba(253,253,253,.25); padding-top:1rem; } .tre-ord b { font-family:var(--disp); font-weight:600; font-size:clamp(1.3rem,2.4vw,1.7rem); letter-spacing:-.02em; display:block; margin-bottom:.35rem; } .tre-ord p { font-size:.98rem; } .kapittel.vinyl .kapittel-indre { grid-template-columns:minmax(0,1fr) auto; align-items:center; } @media (max-width:52rem) { .kapittel.vinyl .kapittel-indre { grid-template-columns:1fr; } } .kapittel.vinyl::before { background:linear-gradient(90deg, rgba(7,22,28,.85) 0%, rgba(7,22,28,.45) 60%, rgba(7,22,28,.2) 100%); } /* Gullplata: en ekte gullplate — gull med spor, og en etikett med året. Snurrer sakte inn når kapitlet kommer i bildet. */ .plate { width:min(50vw,15rem); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; justify-self:center; position:relative; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,228,150,.25); background: repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.18) 0 1px, transparent 1px 5px), conic-gradient(from 210deg, #b8891c, #f3d67a 18%, #a87c14 36%, #f7e3a1 52%, #b28a25 70%, #f1d27a 86%, #b8891c); transform:rotate(-40deg) scale(.96); opacity:.85; transition:transform 1.2s cubic-bezier(.4,0,.3,1), opacity .8s ease; } .inn .plate { transform:rotate(0) scale(1); opacity:1; } .plate::after { content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(255,255,255,.08) 35% 36%, transparent 37%), linear-gradient(135deg, rgba(255,255,255,.28), transparent 45%, rgba(0,0,0,.18)); pointer-events:none; } .plate .etikett { width:44%; aspect-ratio:1; border-radius:50%; background:var(--blekk); color:var(--hvit); display:grid; place-items:center; text-align:center; padding:12%; box-sizing:border-box; overflow:hidden; box-shadow:inset 0 0 0 2px rgba(255,228,150,.6); z-index:1; } .plate .etikett b { font-family:var(--disp); font-weight:600; font-size:clamp(1rem,1.5vw,1.4rem); letter-spacing:-.02em; line-height:1; display:block; } .plate .etikett span { font-family:var(--mono); font-size:.42rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(253,253,253,.7); display:block; margin-top:.3rem; line-height:1.3; } /* Hva Klapp gjør: studiofoto til venstre, typografiske rader til høyre. */ .liste-indre { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:3.5rem; align-items:start; } @media (max-width:52rem) { .liste-indre { grid-template-columns:1fr; gap:2rem; } } .liste-foto { position:sticky; top:6rem; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(4,20,26,.28); } .liste-foto img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; } @media (max-width:52rem) { .liste-foto { position:static; } .liste-foto img { aspect-ratio:3/2; } } .liste { border-top:1px solid var(--linje); } .liste-rad { display:grid; grid-template-columns:52px minmax(0,1.1fr) minmax(0,1.4fr); gap:1.4rem; align-items:baseline; padding:1.5rem 0; border-bottom:1px solid var(--linje); } @media (max-width:46rem) { .liste-rad { grid-template-columns:44px 1fr; } .liste-rad p { grid-column:2; margin-top:.2rem; } } .liste-rad .ikon { width:44px; height:44px; border-radius:11px; background:var(--kort); border:1px solid var(--linje); color:var(--aksent-tekst); display:grid; place-items:center; align-self:center; } .liste-rad .ikon svg { width:100%; height:100%; } .liste-rad h3 { font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:-.02em; line-height:1.05; margin:0; } .liste-rad p { color:var(--dus); margin:0; font-size:1rem; max-width:34rem; } .liste-rad:hover .ikon { border-color:var(--aksent-tekst); } /* Ikonene er appens egne menyikoner (kunde-nav.tsx: receipt, invoice, banknote, calendar). Alle fire får samme lille løft når raden kommer i bildet, og på hover. */ .liste-rad .ikon svg { width:22px; height:22px; } .liste-rad.inn .ikon svg, .liste-rad:hover .ikon svg { animation:loeft .7s cubic-bezier(.4,0,.3,1) 1; } @keyframes loeft { 0% { transform:translateY(0) scale(1); } 40% { transform:translateY(-3px) scale(1.12); } 100% { transform:translateY(0) scale(1); } } /* Innfading når ting kommer i bildet (IntersectionObserver setter .inn). */ .fade { opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; } .fade.inn { opacity:1; transform:none; } /* ── Seksjoner og typografi ─────────────────────────────────────────── */ section { padding:4rem 0; } .eyebrow { font-family:ui-monospace,monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--aksent-tekst); margin:0 0 .7rem; } h2 { font-family:var(--disp); font-weight:600; letter-spacing:-.015em; font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1.15; margin:0 0 .6rem; text-wrap:balance; } h3 { font-family:var(--disp); font-weight:600; } .ingress { color:var(--dus); max-width:40rem; margin:0 0 2.2rem; } /* ── Kort ───────────────────────────────────────────────────────────── */ .kort-rad { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; } .kort-rad.tre { grid-template-columns:repeat(3,1fr); } @media (max-width:52rem) { .kort-rad, .kort-rad.tre { grid-template-columns:repeat(2,1fr); } } @media (max-width:30rem) { .kort-rad, .kort-rad.tre { grid-template-columns:1fr; } } .kort { background:var(--kort); border:1px solid var(--linje); border-radius:14px; padding:1.3rem 1.2rem 1.2rem; } .kort .ikon { width:52px; height:52px; border-radius:12px; background:var(--petrol); color:var(--hvit); display:grid; place-items:center; margin-bottom:.9rem; } .kort .ikon svg { width:100%; height:100%; } .kort h3 { font-size:1.06rem; margin:0 0 .3rem; } .kort p { font-size:.92rem; color:var(--dus); margin:0; } /* ── Priser (modellen, ikke tallene) ────────────────────────────────── */ .pris-rad { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:stretch; } @media (max-width:52rem) { .pris-rad { grid-template-columns:1fr; } } .pris { background:var(--kort); border:1px solid var(--linje); border-radius:16px; padding:1.5rem 1.4rem 1.4rem; display:flex; flex-direction:column; gap:.9rem; } .pris.fremhevet { border-color:var(--petrol); box-shadow:0 0 0 1px var(--petrol) inset; } .pris .eyebrow { margin:0; } .pris h3 { font-size:1.35rem; margin:0; letter-spacing:-.01em; } .pris .lead { color:var(--dus); margin:0; font-size:.98rem; } .pris ul { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; flex:1; } .pris li { display:flex; gap:.6rem; align-items:baseline; font-size:.95rem; } .pris li svg { width:13px; height:13px; flex:none; transform:translateY(1px); } .pris .knapp { align-self:flex-start; margin-top:.4rem; } .pris-fot { display:flex; gap:1rem 1.6rem; align-items:center; flex-wrap:wrap; margin-top:1.6rem; color:var(--dus); font-size:.95rem; } /* ── Scene (mørk seksjon) ───────────────────────────────────────────── */ .scene { background:var(--scene); color:var(--scene-tekst); } .scene .eyebrow { color:var(--hake); } .scene h2 { color:var(--scene-tekst); } .scene .ingress { color:var(--scene-dus); } .scene-indre { display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:center; padding-top:4.2rem; padding-bottom:4.2rem; } @media (max-width:52rem) { .scene-indre { grid-template-columns:1fr; } } .scene ul { margin:0 0 1.8rem; padding:0; list-style:none; display:grid; gap:.65rem; } .scene li { display:flex; gap:.7rem; align-items:baseline; color:rgba(253,253,253,.88); } .scene li svg { width:14px; height:14px; flex:none; transform:translateY(1px); } .scene-tlf { display:flex; gap:1.2rem; align-items:flex-start; } .scene-tlf .tlf { width:min(38vw,220px); } .scene-tlf .tlf:last-child { margin-top:2.6rem; } @media (max-width:52rem) { .scene-tlf { justify-content:center; } } .scene .knapp.omvendt { background:var(--hvit); color:var(--blekk); } /* ── Veksel (undersidene) ─────────────────────────────────────────── Hvert bånd har sin egen grunn (grunn/kort om hverandre) så sidene ikke går i ett, og teksten er stor nok til å leses fra en armlengde. */ .baand { border-bottom:1px solid var(--linje); } .baand:nth-of-type(even) { background:var(--kort); } .veksel { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:3rem; align-items:center; padding-top:3.4rem; padding-bottom:3.4rem; } .baand:nth-of-type(even) .veksel > .tekst { order:2; } @media (max-width:46rem) { .veksel { grid-template-columns:1fr; gap:1.6rem; padding-top:2.4rem; padding-bottom:2.4rem; } .baand:nth-of-type(even) .veksel > .tekst { order:0; } } .veksel .tlf { width:min(56vw,300px); justify-self:center; } .veksel h2 { font-size:clamp(1.7rem,3.2vw,2.6rem); letter-spacing:-.025em; line-height:1.05; } .veksel p { color:var(--dus); max-width:32rem; font-size:1.08rem; } /* ── Navnet ─────────────────────────────────────────────────────────── */ .navn { background:var(--petrol); color:var(--hvit); } .navn-indre { display:grid; grid-template-columns:auto 1fr; gap:2.4rem; align-items:center; padding-top:3.6rem; padding-bottom:3.6rem; } @media (max-width:46rem) { .navn-indre { grid-template-columns:1fr; gap:1.4rem; } } .navn svg.m { width:120px; height:auto; color:var(--hvit); } .navn h2 { color:var(--hvit); } .navn .eyebrow { color:rgba(253,253,253,.7); } .navn p { color:rgba(253,253,253,.82); max-width:38rem; margin:.4rem 0 0; } /* ── Slutt-CTA og footer ────────────────────────────────────────────── */ /* Avslutningen på egen flate — petrol — så den ikke går i ett med prisene over. */ .cta-slutt { text-align:center; padding:5rem 0 5.4rem; background:var(--petrol); color:var(--hvit); } .cta-slutt h2 { margin-bottom:1.4rem; color:var(--hvit); } .cta-slutt .knapp { background:var(--hvit); color:var(--blekk); } .cta-slutt .knapp:hover { background:#fff; } .cta-slutt .lenke { color:var(--hvit); } .cta-slutt .lenke:hover { color:rgba(253,253,253,.8); } /* Undersidenes avslutning har en ingress — grå (--dus) på petrol var uleselig. */ .cta-slutt .ingress { color:rgba(253,253,253,.85); } .cta-slutt .ingress .lenke { color:var(--hvit); } footer { border-top:0; } .cta-slutt .cta { display:flex; gap:1.1rem; justify-content:center; align-items:center; flex-wrap:wrap; } footer { border-top:1px solid var(--linje); padding:2rem 0 2.6rem; color:var(--dus); font-size:.9rem; } .fot { display:flex; justify-content:space-between; gap:1rem 1.6rem; flex-wrap:wrap; align-items:baseline; } .fot nav { display:flex; gap:1.1rem; flex-wrap:wrap; } footer a { color:inherit; } footer a:hover { color:var(--aksent-tekst); } /* ── Bevegelse — «hel i ro, myk i bevegelse» ────────────────────────── */ .heleA { transform-box:fill-box; transform-origin:100% 50%; animation:heleA 7s cubic-bezier(.4,0,.3,1) infinite; } .heleB { transform-box:fill-box; transform-origin:0% 50%; animation:heleB 7s cubic-bezier(.4,0,.3,1) infinite; } @keyframes heleA { 0%,7% { transform:translateX(-11px) rotate(0); } 16% { transform:translateX(1.6px) rotate(0); } 22%,34% { transform:translateX(0) rotate(0); } 44% { transform:translateX(0) rotate(24deg); } 50% { transform:translateX(0) rotate(22deg); } 56% { transform:translateX(0) rotate(-4deg); } 61% { transform:translateX(0) rotate(2deg); } 66%,84% { transform:translateX(0) rotate(0); } 95%,100% { transform:translateX(-11px) rotate(0); } } @keyframes heleB { 0%,7% { transform:translateX(11px) rotate(0); } 16% { transform:translateX(-1.6px) rotate(0); } 22%,34% { transform:translateX(0) rotate(0); } 44% { transform:translateX(0) rotate(24deg); } 50% { transform:translateX(0) rotate(22deg); } 56% { transform:translateX(0) rotate(-4deg); } 61% { transform:translateX(0) rotate(2deg); } 66%,84% { transform:translateX(0) rotate(0); } 95%,100% { transform:translateX(11px) rotate(0); } } .eq { transform-box:fill-box; transform-origin:center; animation:eqp 1.9s ease-in-out infinite; } .eq1{animation-delay:0s}.eq2{animation-delay:.14s}.eq3{animation-delay:.28s} .eq4{animation-delay:.42s}.eq5{animation-delay:.56s} @keyframes eqp { 0%,100% { transform:scaleY(.6); } 30% { transform:scaleY(1.12); } 55% { transform:scaleY(.8); } 75% { transform:scaleY(1); } } @media (max-width:46rem) { section { padding:2.8rem 0; } .scene-indre { padding-top:2.8rem; padding-bottom:2.8rem; gap:2rem; } .veksel { padding-top:2.2rem; padding-bottom:2.2rem; } .navn-indre { padding-top:2.6rem; padding-bottom:2.6rem; } .navn svg.m { width:84px; } .cta-slutt { padding:3.2rem 0 3.8rem; } } @media (prefers-reduced-motion: reduce) { .heleA,.heleB,.eq,.bla svg,.hero-scene .foto img,.liste-rad .ikon svg { animation:none !important; } .plate { transform:none; opacity:1; transition:none; } .fade { opacity:1; transform:none; transition:none; } .steg-rad { opacity:1; transform:none; } }