/* ========================================================================== Innmelding — design tokens and shared shell. Loaded ONLY by _LayoutNew.cshtml. The legacy shell keeps site.css / header.css / footer.css and never sees this file, which is why the two can diverge safely. Rules this file must keep: - no `zoom`, anywhere (the legacy html rule is a 200%-zoom accessibility trap) - no `overflow: hidden` on html or body - no fixed height on the shell, the wrapper or the body container — the layout is flow-based, so no JavaScript ever has to measure and set pixel heights - no `!important` on a hook a tenant override needs to win - no external font or icon dependency (decision D9: system stack, inline SVG) ========================================================================== */ /* -------------------------------------------------------------------------- Tenant-tunable variable, deliberately declared on :root. wwwroot/css/Cust/65/65.css overrides `--footer-height` with `:root { … !important }`. Declaring it here on :root (rather than on .inn-body) keeps that override winning — a custom property set on would otherwise beat the inherited value. This is the only :root declaration in the file; every design token below is scoped to the new shell so it can never leak into the legacy page. -------------------------------------------------------------------------- */ :root { --footer-height: 60px; } /* -------------------------------------------------------------------------- Design tokens — ported 1:1 from the handoff prototype (Innmelding.dc.html), except the font stack, which is the existing system stack per decision D9. No [data-theme="dark"] block: dark mode is out of scope for the pilot (D13). The tokens are authored as custom properties so a later dark palette is an override rather than a rewrite. -------------------------------------------------------------------------- */ .inn-body { --c-fg: #12181f; --c-fg-muted: #22282f; --c-fg-soft: #414a57; --c-invert: #101922; --c-bg: #ffffff; --c-surface: #f4f7fa; --c-surface-2: #eef1f5; --c-divider: #e9eef4; --c-ghost: #dde4ec; --c-ghost-2: #e4e9ef; --c-border: #cfd5dd; --c-border-strong: #8a93a0; /* Derived, not literal — Phase 2C. These four used to be hard-coded and no tenant sheet could reach them, so a component only followed the tenant if its author remembered to name `--k-brand` by hand. That is how finding F33 survived for months and why the membership cards needed a contract test to stay correct. The mapping is Min side 2026's, line for line (`minside2026/css/tokens.css:56-60`), so one tenant profile now means the same thing in both products. Value-preserving on the base profile: every `--k-*` default below is the same literal these lines used to hold, so nothing moves until a tenant profile declares one. */ --c-primary: var(--k-primary); --c-primary-soft: var(--k-soft); --c-primary-soft-border: var(--k-soft-border); --c-primary-tint: var(--k-tint); --c-ok: #0c4d34; --c-ok-bg: #e3f0e9; --c-ok-border: #9dc3b1; --c-warn: #8a3a00; --c-warn-bg: #fbf3e8; --c-warn-border: #d8b78a; --c-err: #8c1c13; --c-err-bg: #fbeae8; --c-err-border: #e0a9a3; --c-accent: var(--k-accent); /* -------------------------------------------------------------------------- Tenant tokens. A tenant sheet may set these and NOTHING else — see `wwwroot/css/Cust/README.md`, and the contract tests that enforce it. `--k-brand` and `--k-primary` are separate roles, not duplicates, and the distinction is Min side's: `--k-brand` is the raw mark used for large surfaces — the stripe, the badge, the action button — while `--k-primary` is the one that has to carry TEXT and icons, and therefore has to hold **7:1 against white**. A tenant whose mark is too light for text sets them differently; the base has no such problem and sets both to the same value. Contrast target: **WCAG 2.2 AAA on text (7:1)**, decided 2026-08-21. It was AA (4.5:1) from Phase 0 until Min side shipped the same tenants against AAA, and two products with the same organisations and two different floors is not a stable position. Master plan §17.1 item 1. -------------------------------------------------------------------------- */ --k-brand: #0c3a6b; --k-primary: #0c3a6b; /* Declared for profile compatibility with Min side and deliberately unread here: dark mode is out of scope for this pilot (decision D13). A shared profile file stays valid for both products. */ --k-primary-dark: #9dc4ee; --k-soft: #e0e9f5; --k-soft-border: #b9cbe2; --k-tint: #eef3f9; --k-stripe: #0c3a6b; --k-radius: 8px; --k-font: Verdana, Arial, sans-serif; /* `--k-accent` is the signal colour, and it is never the only carrier of meaning. Added 2026-08-21 to match Min side 2026's token contract (`minside2026/css/tokens.css`), which the tenant profiles below now share. */ --k-accent: #ffd24a; /* Footer tokens, renamed to Min side 2026's names so one tenant profile can describe both products: `--k-footer-kant` was this file's own coinage and is now `--k-footer-border`. **There is deliberately no `--k-footer-logo` token, and the reason is a real defect it caused.** Min side hardcodes one grey mark for every tenant — it can, because its footer is always on a brand colour. Innmelding cannot: tenants 61 and 71 still paint the footer light from their legacy sheets, and `Cust/71/71.js` swaps the mark to a dark variant by matching the literal `PoweredByConsio.png` in the `src`. So the mark is a per-tenant decision — but it is written as a rule in the tenant's own sheet, never as a token here, because **a relative `url()` inside a custom property is resolved against the DOCUMENT, not against the stylesheet that declared it.** Served from a virtual directory that silently produces a path off the site root. A `url()` in an ordinary declaration resolves against its own stylesheet, which is the whole reason relative URLs in CSS work. `Cust/72/72.css` carries the worked example, and a contract test fails if a `url()` reappears inside a custom property. */ --k-footer-bg: transparent; --k-footer-fg: var(--c-fg-soft); --k-footer-border: 1px solid var(--c-border); --k-footer-lenke: var(--c-primary); --k-gap: 14px; --k-pad-side: 18px; --k-shell-max: 1280px; /* Shell icon, not a tenant token — hence the `--inn-` prefix rather than `--k-`. Used as a mask so the glyph takes `currentColor`; the stroke colour inside the SVG is irrelevant, only its alpha is read. Inline rather than a file because it is 200 bytes and a separate request for a close cross is not worth a round trip. `#` is written `%23`, which a data URI in CSS requires. */ --inn-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); /* Consent-step glyphs — Phase 5C, same mechanism and the same reasoning as the close cross above: used as a mask so each one takes `currentColor`, inline because five outline glyphs are cheaper than five requests, and `#` written `%23` because a data URI in CSS requires it. They replace the prototype's Font Awesome classes (decision D9 and §7 D2 of plan.md rev 12). The one that decided it: the unanswered state is `far fa-circle`, which needs the Regular family that free kits routinely leave out — a missing glyph would put an empty box on every consent nobody had answered yet. As masks the state also changes in CSS on `:checked`, so the markup carries no per-state branch. The set is an outline family on purpose: `circle` is "not answered", and the check and cross are the same circle with a mark in it, so the three read as one control rather than three icons. */ --inn-icon-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); --inn-icon-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M5.2 8.3l2 2.1 3.6-4.2'/%3E%3C/g%3E%3C/svg%3E"); --inn-icon-cross-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M5.9 5.9l4.2 4.2M10.1 5.9l-4.2 4.2'/%3E%3C/g%3E%3C/svg%3E"); --inn-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.2H3.4A1.2 1.2 0 002.2 4.4v8.2a1.2 1.2 0 001.2 1.2h8.2a1.2 1.2 0 001.2-1.2V9.2'/%3E%3Cpath d='M9.6 2.4h4v4M13.6 2.4L8.2 7.8'/%3E%3C/g%3E%3C/svg%3E"); --inn-icon-check-double: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.6 8.4l2.8 2.8 4.8-5.6'/%3E%3Cpath d='M7.4 11.2l1 1 6-7'/%3E%3C/g%3E%3C/svg%3E"); /* Phase 5D. Solid rather than stroked, unlike the consent glyphs above: these are painted at 22px and 32px inside a coloured badge, where a 1.5px stroke scaled up reads as a hairline sketch. The viewBox stays 0 0 16 16 so `center / contain` sizes them exactly as it sizes the stroked ones. */ --inn-icon-check-circle-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 .9a7.1 7.1 0 100 14.2A7.1 7.1 0 008 .9zm3.6 5.4l-4.3 5a.9.9 0 01-1.3.1L4 9.6a.9.9 0 111.2-1.3l1.3 1.2 3.7-4.3a.9.9 0 011.4 1.1z'/%3E%3C/svg%3E"); --inn-icon-bug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000'%3E%3Cpath d='M5.3 1.1a.6.6 0 011.1-.4l.6 1.2a4.4 4.4 0 012 0l.6-1.2a.6.6 0 111.1.4l-.5 1.1a4.4 4.4 0 011.7 2.5H4a4.4 4.4 0 011.8-2.5l-.5-1.1z'/%3E%3Cpath d='M3.6 6.7h3.8v8.2A4.4 4.4 0 013.6 11v-.6H2a.6.6 0 010-1.2h1.6V7.9H2a.6.6 0 010-1.2h1.6zM8.6 6.7h3.8v1.2H14a.6.6 0 010 1.2h-1.6v1.3H14a.6.6 0 010 1.2h-1.6v.2a4.4 4.4 0 01-3.8 3z'/%3E%3C/g%3E%3C/svg%3E"); }