/* ─────────────────────────────────────────────────────────────── Kunstigflyt Design System · vanilla-CSS-utgave av concepts/src/styles.css For statiske sider uten byggesteg. Kopieres til hvert nettsted som kf/ (kf.css + kf-theme.js + fonts/). Kilde: concepts/shared/ — endre her og kjør concepts/shared/sync.sh for å oppdatere kopiene. Bruk: + i (setter data-theme før første maling). ─────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Geist'; src: url('fonts/geist-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/source-serif-4-latin-wght-normal.woff2') format('woff2'); font-weight: 200 900; font-display: swap; } :root { --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; --font-serif: 'Source Serif 4', ui-serif, Georgia, serif; --radius: 1.25rem; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ── Tema-knotter ─────────────────────────────────────────────── */ :root, [data-theme='dark'] { color-scheme: dark; --bg-l: 0.145; --bg2-l: 0.185; --card-l: 0.22; --card-a: 0.55; --card-solid-l: 0.2; --line: oklch(1 0 0 / 0.08); --line-strong: oklch(1 0 0 / 0.16); --a-l: 0.78; --a-c: 0.16; --a-soft: 0.14; --a-fg-l: 0.16; --glow-a: 0.45; --fg: oklch(0.975 0.005 90); --fg-2: oklch(0.78 0.01 90); --fg-3: oklch(0.62 0.012 90); --ok: oklch(0.8 0.17 155); --warn: oklch(0.83 0.15 80); --bad: oklch(0.7 0.19 22); --info: oklch(0.75 0.13 235); --shadow: 0 1px 0 oklch(1 0 0 / 0.06) inset, 0 24px 48px -24px oklch(0 0 0 / 0.6); --grain: 0.06; } [data-theme='light'] { color-scheme: light; --bg-l: 0.985; --bg2-l: 0.955; --card-l: 1; --card-a: 0.72; --card-solid-l: 1; --line: oklch(0.2 0.02 270 / 0.09); --line-strong: oklch(0.2 0.02 270 / 0.18); --a-l: 0.55; --a-c: 0.2; --a-soft: 0.1; --a-fg-l: 0.99; --glow-a: 0.3; --fg: oklch(0.2 0.02 270); --fg-2: oklch(0.42 0.02 270); --fg-3: oklch(0.55 0.02 270); --ok: oklch(0.56 0.15 155); --warn: oklch(0.62 0.15 70); --bad: oklch(0.56 0.21 25); --info: oklch(0.55 0.15 245); --shadow: 0 1px 0 oklch(1 0 0) inset, 0 1px 2px oklch(0.2 0.02 270 / 0.06), 0 16px 40px -20px oklch(0.2 0.02 270 / 0.22); --grain: 0.035; } /* ── Hue-avledede tokens ─────────────────────────────────────── */ :root, [data-product] { --bg: oklch(var(--bg-l) 0.012 var(--bg-hue, 275)); --bg-2: oklch(var(--bg2-l) 0.014 var(--bg-hue, 275)); --card: oklch(var(--card-l) 0.014 var(--bg-hue, 275) / var(--card-a)); --card-solid: oklch(var(--card-solid-l) 0.014 var(--bg-hue, 275)); --accent: oklch(var(--a-l) var(--a-c) var(--hue, 285)); --accent-soft: oklch(var(--a-l) var(--a-c) var(--hue, 285) / var(--a-soft)); --accent-fg: oklch(var(--a-fg-l) 0.02 var(--hue, 285)); --glow: oklch(var(--a-l) var(--a-c) var(--hue, 285) / var(--glow-a)); } /* ── Produktaksenter (én hue per produkt, samme som concepts) ── */ [data-product='kunstigflyt'] { --hue: 285; --bg-hue: 275; } [data-product='monstring'] { --hue: 85; --bg-hue: 80; } [data-product='analytics'] { --hue: 38; --bg-hue: 45; } [data-product='spar'] { --hue: 128; --bg-hue: 125; } [data-product='dyroy'] { --hue: 232; --bg-hue: 235; } [data-product='kart'] { --hue: 172; --bg-hue: 190; } [data-product='ordastadr'] { --hue: 55; --bg-hue: 60; } [data-product='podcast'] { --hue: 350; --bg-hue: 340; } [data-product='grjotgar'] { --hue: 68; --bg-hue: 55; } [data-theme='dark'][data-product='spar'], [data-theme='dark'] [data-product='spar'] { --a-l: 0.9; --a-c: 0.2; } /* ── Grunnstiler ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--fg); line-height: 1.55; font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in oklab, var(--accent) 40%, transparent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .mono { font-family: var(--font-mono); } .serif { font-family: var(--font-serif); } .muted { color: var(--fg-2); } .faint { color: var(--fg-3); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .kf-wrap { width: min(72rem, 100% - 2.5rem); margin-inline: auto; } .eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .hairline { background: linear-gradient(90deg, transparent, var(--line-strong), transparent); height: 1px; border: 0; } .text-gradient { background: linear-gradient(180deg, var(--fg) 30%, color-mix(in oklab, var(--fg) 55%, transparent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .text-accent-gradient { background: linear-gradient(100deg, var(--accent), oklch(calc(var(--a-l) + 0.08) 0.15 calc(var(--hue, 285) + 28)) 55%, var(--accent)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: kf-shimmer 6s linear infinite; } .scroll-thin { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } /* ── Signatur: aurora + rutenett + korn ──────────────────────── */ .aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .aurora::before, .aurora::after, .aurora > i { content: ''; position: absolute; border-radius: 9999px; filter: blur(90px); animation: kf-float 14s ease-in-out infinite; } .aurora::before { width: 46rem; height: 46rem; left: -10rem; top: -18rem; background: var(--accent); opacity: 0.28; } .aurora::after { width: 38rem; height: 38rem; right: -8rem; top: -8rem; background: oklch(0.7 0.18 calc(var(--hue, 285) + 70)); opacity: 0.2; animation-delay: -6s; } .aurora > i { width: 30rem; height: 30rem; left: 40%; top: 18rem; background: oklch(0.65 0.2 calc(var(--hue, 285) - 60)); opacity: 0.14; animation-delay: -3s; } [data-theme='light'] .aurora::before { opacity: 0.16; } [data-theme='light'] .aurora::after { opacity: 0.12; } [data-theme='light'] .aurora > i { opacity: 0.08; } .grid-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); } .grain::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: var(--grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } /* ── Glasskort med spotlight (.spot krever kf-theme.js) ───────── */ .glass { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); isolation: isolate; } .glass-solid { background: var(--card-solid); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .spot { --mx: 50%; --my: 0%; } .spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%); opacity: 0; transition: opacity 0.35s var(--ease); } .spot:hover::before { opacity: 1; } /* ── Knapper ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.5rem; padding: 0 1rem; border-radius: 0.75rem; border: 1px solid transparent; font: 500 0.875rem/1 var(--font-sans); white-space: nowrap; cursor: pointer; text-decoration: none; user-select: none; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); } .btn:active { transform: scale(0.97); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.5; pointer-events: none; } .btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; border-radius: 0.5rem; } .btn-lg { height: 3rem; padding: 0 1.5rem; font-size: 0.9375rem; border-radius: 1rem; } .btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 60%, white) inset, 0 8px 28px -6px var(--glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 60%, white) inset, 0 10px 40px -4px var(--glow); } .btn-outline { border-color: var(--line-strong); background: var(--card); color: var(--fg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .btn-outline:hover { border-color: color-mix(in oklab, var(--accent) 60%, transparent); background: var(--accent-soft); } .btn-ghost { background: none; color: var(--fg-2); } .btn-ghost:hover { color: var(--fg); background: var(--accent-soft); } .btn-danger { border-color: color-mix(in oklab, var(--bad) 40%, transparent); background: none; color: var(--bad); } .btn-danger:hover { background: color-mix(in oklab, var(--bad) 10%, transparent); } .icon-btn { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; border: 1px solid var(--line); background: var(--card); color: var(--fg-2); cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; } .icon-btn:hover { color: var(--fg); background: var(--accent-soft); border-color: var(--line-strong); } .icon-btn svg { width: 1rem; height: 1rem; } /* ── Merker ──────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in oklab, var(--fg) 6%, transparent); color: var(--fg-2); font-size: 0.6875rem; font-weight: 500; line-height: 1.25rem; white-space: nowrap; } .badge-accent { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 25%, transparent); } .badge-ok { background: color-mix(in oklab, var(--ok) 10%, transparent); color: var(--ok); border-color: color-mix(in oklab, var(--ok) 25%, transparent); } .badge-warn { background: color-mix(in oklab, var(--warn) 10%, transparent); color: var(--warn); border-color: color-mix(in oklab, var(--warn) 25%, transparent); } .badge-bad { background: color-mix(in oklab, var(--bad) 10%, transparent); color: var(--bad); border-color: color-mix(in oklab, var(--bad) 25%, transparent); } .badge-info { background: color-mix(in oklab, var(--info) 10%, transparent); color: var(--info); border-color: color-mix(in oklab, var(--info) 25%, transparent); } .badge .dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; } /* ── Skjemafelt ──────────────────────────────────────────────── */ .input, .select, .textarea { width: 100%; height: 2.75rem; padding: 0 0.875rem; border-radius: 0.75rem; border: 1px solid var(--line-strong); background: color-mix(in oklab, var(--fg) 4%, transparent); color: var(--fg); font: inherit; font-size: 0.9375rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .textarea { height: auto; min-height: 6rem; padding: 0.75rem 0.875rem; resize: vertical; } .input::placeholder, .textarea::placeholder { color: var(--fg-3); } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; color: var(--fg-2); } input[type='range'].range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; cursor: pointer; outline-offset: 6px; background: linear-gradient(90deg, var(--accent) var(--p, 50%), var(--line-strong) var(--p, 50%)); } input[type='range'].range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 35%, transparent), 0 4px 14px oklch(0 0 0 / 0.4); } input[type='range'].range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 35%, transparent); } /* ── Temabryter (bruk kf-theme.js + data-kf-theme-toggle) ────── */ [data-kf-theme-toggle] .kf-moon { display: none; } [data-theme='light'] [data-kf-theme-toggle] .kf-sun { display: none; } [data-theme='light'] [data-kf-theme-toggle] .kf-moon { display: block; } /* ── Animasjoner ─────────────────────────────────────────────── */ @keyframes kf-float { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(3%, -4%, 0) scale(1.08); } } @keyframes kf-shimmer { to { background-position: -200% 0; } } @keyframes kf-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .reveal { animation: kf-rise 0.7s var(--ease) both; animation-delay: var(--d, 0s); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }