/* Shared shell + typography for Nox Omnia legal pages (personvern.html, informasjonskapsler.html). Uses the same design tokens and self-hosted fonts as the main site so the pages feel native. */ :root { --color-ink: #05070a; --color-ink-elev: #0b0e14; --color-ink-line: #1a1f2a; --color-chrome-1: #e6e9ee; --color-chrome-2: #a6adba; --color-chrome-3: #5a6473; --color-arc: #5ba8ff; --color-arc-strong: #8cc2ff; --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --font-display: "Fraunces", serif; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { margin: 0; padding: 0; background: var(--color-ink); color: var(--color-chrome-1); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } h1, h2, h3, p { margin: 0; } ::selection { background: color-mix(in oklab, var(--color-arc) 35%, transparent); color: #fff; } :focus-visible { outline: 2px solid var(--color-arc); outline-offset: 3px; border-radius: 4px; } .wrap { max-width: 60rem; margin: 0 auto; padding-inline: 1.5rem; } @media (min-width: 1024px) { .wrap { padding-inline: 2.5rem; } } /* Flash-free language switching: the inactive language is hidden purely by the attribute, which is set synchronously in . */ html[data-lang-pref="nb"] [data-lang="en"], html[data-lang-pref="en"] [data-lang="nb"] { display: none; } /* Header */ .header { position: fixed; inset-inline: 0; top: 0; z-index: 50; transition: background-color .3s, backdrop-filter .3s, border-color .3s; border-bottom: 1px solid transparent; } .header.scrolled { background: rgba(5,7,10,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: rgba(255,255,255,.06); } @media (max-width: 767px) { .header.scrolled { background: rgba(5,7,10,.94); backdrop-filter: none; -webkit-backdrop-filter: none; } } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; gap: 1rem; } .wordmark { font-family: var(--font-mono); font-size: 13px; letter-spacing: .28em; font-weight: 500; color: var(--color-chrome-1); } @media (min-width: 640px) { .wordmark { font-size: 14px; } } .header-right { display: flex; align-items: center; gap: 1.25rem; } .locale-toggle { display: inline-flex; align-items: center; gap: .35ch; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; } .locale-toggle button { font: inherit; color: var(--color-chrome-3); background: none; border: none; cursor: pointer; padding: 2px; } .locale-toggle button[aria-pressed="true"] { color: var(--color-chrome-1); } .locale-toggle .sep { color: var(--color-chrome-3); opacity: .5; } .back-home { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--color-chrome-2); display: inline-flex; align-items: center; gap: .5ch; transition: color .18s; } .back-home:hover { color: var(--color-chrome-1); } /* Legal content */ .legal-main { padding-top: 4rem; } .legal-head { padding: 4rem 0 2.25rem; border-bottom: 1px solid var(--color-ink-line); } .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--color-arc); } .legal-title { font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; margin-top: .6rem; } .legal-title em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--color-arc-strong); } .legal-meta { margin-top: 1rem; font-family: var(--font-mono); font-size: 12.5px; color: var(--color-chrome-3); } .legal-body { padding: 2.25rem 0 3rem; max-width: 44rem; } .legal-body h2 { font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; margin: 2.5rem 0 .6rem; color: var(--color-chrome-1); } .legal-body h3 { font-size: 1.05rem; font-weight: 600; margin: 1.4rem 0 .4rem; color: var(--color-chrome-1); } .legal-body p, .legal-body li { color: var(--color-chrome-2); line-height: 1.7; font-size: 1rem; } .legal-body p { margin: .7rem 0; } .legal-body ul { margin: .5rem 0 1rem; padding-left: 1.2rem; list-style: disc; } .legal-body li { margin: .35rem 0; } .legal-body li::marker { color: var(--color-chrome-3); } .legal-body a { color: var(--color-arc-strong); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(140,194,255,.4); } .legal-body a:hover { text-decoration-color: var(--color-arc-strong); } .legal-body strong { color: var(--color-chrome-1); font-weight: 600; } .lead { font-size: 1.12rem; color: var(--color-chrome-1); line-height: 1.6; } .callout { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid var(--color-ink-line); border-left: 3px solid var(--color-arc); border-radius: 8px; background: var(--color-ink-elev); } .callout p { margin: .2rem 0; color: var(--color-chrome-1); } /* Cookie table */ .legal-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .92rem; } .legal-table th, .legal-table td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--color-ink-line); vertical-align: top; } .legal-table th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-chrome-3); font-weight: 500; } .legal-table td { color: var(--color-chrome-2); } /* Footer */ .footer { border-top: 1px solid var(--color-ink-line); padding: 3rem 0 2.5rem; margin-top: 1rem; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 680px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } } .footer-brand-mark { font-family: var(--font-mono); letter-spacing: .26em; font-size: 14px; } .footer-tagline { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--color-chrome-3); margin-top: .5rem; } .footer-h { font-size: 12px; font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--color-chrome-3); margin-bottom: .75rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .footer-col a { color: var(--color-chrome-2); transition: color .18s; } .footer-col a:hover { color: var(--color-chrome-1); } .footer-bottom { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-ink-line); } .footer-bottom .addr { font-size: 13px; color: var(--color-chrome-3); } .footer .legal { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; font-size: 13px; } .footer .legal a { color: var(--color-chrome-3); transition: color .18s; } .footer .legal a:hover { color: var(--color-chrome-1); }