/* ───────────────────────────────────────────────────────────── theme.css — delt design-token-lag for hele angstpsykologene.no Single source of truth for palett + typografi. Injiseres av build.mjs i på alle sider, FØR nav.css/consent.css. Palett: petrol + korall (nordisk klinisk klarhet). Alle sider konsumerer disse tokenene; ingen side definerer egen :root. ───────────────────────────────────────────────────────────── */ :root{ /* Kanoniske tokens (samme navn som sidene alltid har brukt) */ --bg: oklch(98.2% 0.003 165); /* ren, svakt kjølig off-white */ --bg-2: oklch(96.2% 0.006 170); /* subtil surface */ --paper: oklch(100% 0 0); /* rene kort / hvit */ --ink: oklch(24% 0.018 170); /* nær-svart, grønn undertone */ --ink-2: oklch(38% 0.016 172); /* brødtekst */ --ink-3: oklch(52% 0.014 172); /* småtekst / labels */ --line: oklch(90% 0.008 170); --line-2: oklch(85% 0.010 170); --accent: oklch(45% 0.075 190); /* petrol — trust-anker */ --accent-deep:oklch(38% 0.070 192); --warm: oklch(62% 0.165 35); /* korall (mørk nok for tekst) */ --warm-soft: oklch(90% 0.045 45); /* korall-tint */ /* Semantiske aliaser (forsidens navngivning peker på samme verdier) */ --surface: var(--paper); --muted: var(--ink-3); --petrol: var(--accent); --petrol-deep:var(--accent-deep); --petrol-tint:oklch(96% 0.020 190); --coral: oklch(72% 0.155 38); /* lys/vibrant korall-fyll */ --coral-ink: var(--warm); /* korall som tekst (kontrast) */ --coral-tint: oklch(96.5% 0.020 45); /* Typografi — én familie, vektkontrast bærer hierarkiet */ --font-head: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; --font-body: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; /* Semantisk z-skala */ --z-sticky: 50; --z-overlay: 1000; --z-panel: 1001; } /* Innhold er alltid synlig. Sidenes reveal-on-scroll gates ellers synlighet på en klasse som først legges til ved scroll — det skjulte innhold som allerede lå i viewport (særlig på mobil). Nøytraliseres sentralt her. */ .reveal{opacity:1 !important;transform:none !important} /* Undersidenes hero: to kolonner — tekst til venstre, gradient-ornamentet til høyre (i stedet for å flyte i hjørnet). Sentralt her → gjelder alle sider. */ .phero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:56px;align-items:center} .phero-copy{min-width:0} .phero .ornament.o-hero{position:relative;top:auto;right:auto;left:auto;bottom:auto; width:100%;max-width:340px;height:auto;aspect-ratio:1;justify-self:center; opacity:.9;mix-blend-mode:normal} @media (max-width:900px){ .phero-grid{grid-template-columns:1fr} .phero .ornament.o-hero{display:none} }