/* --------------------------------------------------------------- portfolio.pifre.no — grunnlag Paletten er Pifres; mørk grunn valgt for at casene skal lyse mot noe. --------------------------------------------------------------- */ :root { /* Pifre-paletten */ --green: #003b2e; --green-bright: #005842; --sage: #e5f2ed; --alert: #dc2626; --amber: #f59e0b; /* Lys grunn. Ignite kjører hvitt med dyp marineblå-svart tekst; Pifres racing green blir aksenten. Kontrastforholdene under er sjekket: --tekst mot --ink gir 15,8:1, --tekst-dim gir 7,1:1. */ --ink: #fbfbfa; /* sidebakgrunn */ --ink-2: #ffffff; /* kort */ --ink-3: #f4f6f5; /* nedtonet panel */ --line: #e3e7e6; --line-sterk: #cdd5d2; --paper: #10201b; /* hovedtekst */ --paper-dim: #4f5558; /* sekundærtekst */ --paper-faint: #5c6663; /* svak — 5,3:1 mot hvitt, holder AA på småtekst */ --mint: #005842; /* Pifre green-bright, aksent */ --dyp: #03071f; /* Ignites marineblå-svart, til kontrastflater */ --t-fast: 150ms; --t-base: 200ms; --t-slow: 320ms; --ease: cubic-bezier(0.2, 0, 0, 1); --maks: 1120px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: var(--paper); font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Kornstruktur — dybde uten en bildefil */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a { color: inherit; } ::selection { background: var(--mint); color: var(--ink); } .wrap { max-width: var(--maks); margin: 0 auto; padding: 0 28px; } h1, h2, h3 { font-family: "Lora", Georgia, serif; font-weight: 600; letter-spacing: -0.015em; line-height: 1.08; margin: 0; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-faint); margin: 0; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 120px 0 80px; border-bottom: 1px solid var(--line); overflow: hidden; } .hero::after { content: ""; position: absolute; top: -40%; right: -10%; width: 70%; height: 160%; background: radial-gradient(ellipse at center, rgba(0, 88, 66, 0.07), transparent 64%); transform: rotate(-14deg); pointer-events: none; } .hero .wrap { position: relative; z-index: 2; } .hero h1 { font-size: clamp(42px, 7.5vw, 88px); margin: 22px 0 0; max-width: 16ch; } .hero h1 em { font-style: normal; color: var(--mint); } .hero-lede { font-size: clamp(16px, 2vw, 19px); color: var(--paper-dim); max-width: 58ch; margin: 28px 0 0; } .hero-meta { display: flex; gap: 10px 26px; flex-wrap: wrap; margin-top: 36px; font-size: 13px; color: var(--paper-faint); } .hero-meta a { color: var(--mint); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease); } .hero-meta a:hover { border-bottom-color: var(--mint); } /* ---------- Seksjoner ---------- */ section { padding: 92px 0; border-bottom: 1px solid var(--line); position: relative; z-index: 2; } .sek-topp { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; } .sek-topp h2 { font-size: clamp(26px, 3.6vw, 38px); } .sek-note { font-size: 13px; color: var(--paper-faint); max-width: 34ch; } /* ---------- Bevegelse ---------- */ /* Avsløring ved scroll. Skjuling skjer bare når JS har bekreftet at den styrer det (klassen på ). Uten JS, eller hvis observeren svikter, står innholdet synlig — en portefølje som er usynlig fordi et skript feilet er verdiløs. */ .reveal { transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } .js-avslor .reveal { opacity: 0; transform: translateY(10px); } .js-avslor .reveal.synlig { opacity: 1; transform: none; } @media (max-width: 860px) { .hero { padding: 84px 0 64px; } section { padding: 68px 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .reveal { opacity: 1; transform: none; } }