/* * ════════════════════════════════════════════════════════════════════════ * Notarium design system — tokens + components * ════════════════════════════════════════════════════════════════════════ * * Identity: the wax seal and the bound protocol — authority, permanence, * calm. Bordeaux (#7f1d2b) is *identity*; compliance green (#1e6b4f) is the * emotional promise ("i orden") and is therefore semantically load-bearing: * cleared frister and signed/registered documents are green, never bordeaux. * Amber is "a frist is approaching". Red is "overdue" and nothing else — if * red ever becomes decoration it stops meaning danger. * * ── How the file is layered ───────────────────────────────────────────── * 1. Raw palette (--nt-c-*) — hue ramps. Theme-independent. Never used * directly in a component; only referenced * by semantic tokens. * 2. Semantic (--nt-*) — what a color *means* (surface, border, * ok, danger…). Redefined per theme. * 3. Domain alias (--nt-frist-*, --nt-doc-*) — a frist/document status * named by the domain, pointing at a * semantic family. Declared once: custom * properties resolve against the computed * value on the same element (:root), so the * dark override of the family flows through. * 4. Components (.nt-*) — the visual system, built only from (2)+(3). * * ── Theme ─────────────────────────────────────────────────────────────── * 3-state, set on by the theme_toggle Stimulus controller: * data-theme="dark" → force dark * data-theme="light" → force light * absent → follow the OS (prefers-color-scheme) * The two dark blocks below are byte-identical on purpose — CSS has no way * to share one declaration list between a selector and a media query, and we * refuse to make no-JS users lose their OS dark preference. KEEP THEM IN SYNC. * * ── Cascade note (load-bearing) ───────────────────────────────────────── * This file is unlayered; Tailwind's output lives in @layer, so unlayered * rules here WIN over Tailwind utilities on the same property. Therefore: * never style bare h1/h2/p/a globally (a view's `text-3xl` would lose), and * give components size *modifiers* (.nt-btn-sm) rather than expecting * utilities to override their padding. */ /* ══════════════════════════════════════════════════════════════════════ 1. RAW PALETTE — hue ramps, theme-independent ══════════════════════════════════════════════════════════════════════ */ :root { --nt-c-white: #ffffff; /* Warm paper ground */ --nt-c-paper-50: #faf8f4; --nt-c-paper-100: #f5f2ea; --nt-c-paper-200: #ece8de; --nt-c-paper-300: #e2dccf; --nt-c-paper-400: #ddd6c9; --nt-c-paper-500: #c6bda9; /* Ink (light-theme text + inverse surfaces) */ --nt-c-ink-900: #16181d; --nt-c-ink-800: #23262d; --nt-c-ink-700: #34383f; --nt-c-ink-600: #4b4f58; --nt-c-ink-500: #6b6f78; --nt-c-ink-400: #83878f; --nt-c-ink-300: #9fa3a9; --nt-c-ink-200: #c2c5c9; /* Night (dark-theme grounds — warm, never blue-black) */ --nt-c-night-950: #0d0c0a; --nt-c-night-900: #15130f; --nt-c-night-850: #1a1713; --nt-c-night-800: #1d1a15; --nt-c-night-700: #24211b; --nt-c-night-600: #2c2822; --nt-c-night-500: #37332b; --nt-c-night-400: #494336; --nt-c-night-300: #6a6355; /* Bone (dark-theme text) */ --nt-c-bone-100: #ece9e2; --nt-c-bone-200: #d5d1c8; --nt-c-bone-300: #b3afa6; --nt-c-bone-400: #8f8b82; /* Seal bordeaux — identity */ --nt-c-seal-50: #f9edee; --nt-c-seal-100: #f1dade; --nt-c-seal-200: #e0b8be; --nt-c-seal-300: #d98d97; --nt-c-seal-350: #c05a68; --nt-c-seal-400: #b04b59; --nt-c-seal-500: #93283a; --nt-c-seal-600: #7f1d2b; --nt-c-seal-700: #6a1824; --nt-c-seal-800: #52121b; /* Compliance green — "i orden" */ --nt-c-green-50: #e6f0eb; --nt-c-green-100: #cfe4d8; --nt-c-green-200: #a8cdba; --nt-c-green-300: #8fc7b0; --nt-c-green-400: #4d9d7c; --nt-c-green-500: #2a7f5e; --nt-c-green-600: #1e6b4f; --nt-c-green-700: #17553f; --nt-c-green-800: #113f2f; /* Amber — a frist is approaching */ --nt-c-amber-50: #f9efe2; --nt-c-amber-100: #f2e0c8; --nt-c-amber-200: #ecd0ab; --nt-c-amber-300: #e2b184; --nt-c-amber-400: #cf8a4a; --nt-c-amber-500: #b0611b; --nt-c-amber-600: #9c5517; --nt-c-amber-700: #8d4d14; /* Red — overdue, and nothing else */ --nt-c-red-50: #f8e8e6; --nt-c-red-100: #f2d3cf; --nt-c-red-200: #e8b3ac; --nt-c-red-300: #d97a70; --nt-c-red-400: #c65a4f; --nt-c-red-500: #a12a1f; --nt-c-red-600: #8d241a; --nt-c-red-700: #7a1f16; /* Petrol — informational / "upcoming", calm and unalarming */ --nt-c-petrol-50: #e7eef3; --nt-c-petrol-100: #d3e0e9; --nt-c-petrol-200: #aec8d8; --nt-c-petrol-300: #79a9c7; --nt-c-petrol-400: #4f83a4; --nt-c-petrol-500: #35678a; --nt-c-petrol-600: #2f5d7c; --nt-c-petrol-700: #244a64; /* Dark-mode tint grounds: each status hue mixed down into the night ground. These are NOT on the ramps above — a saturated dark green is a different color from "green mixed into near-black". */ --nt-c-green-ink: #17251f; --nt-c-green-ink-2: #22392e; --nt-c-amber-ink: #2a2016; --nt-c-amber-ink-2: #3d3020; --nt-c-red-ink: #2b1a17; --nt-c-red-ink-2: #402521; --nt-c-petrol-ink: #16222b; --nt-c-petrol-ink-2: #21353f; --nt-c-seal-ink: #2c1a1d; --nt-c-seal-ink-2: #452429; } /* ══════════════════════════════════════════════════════════════════════ 2a. NON-COLOR TOKENS — identical in both themes ══════════════════════════════════════════════════════════════════════ */ :root { /* Type */ --nt-font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --nt-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --nt-font-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif; --nt-font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace; --nt-text-xs: 0.72rem; --nt-text-sm: 0.82rem; --nt-text-base: 0.94rem; --nt-text-md: 1.02rem; --nt-text-lg: 1.18rem; --nt-text-xl: 1.45rem; --nt-text-2xl: 1.85rem; --nt-text-3xl: 2.35rem; /* Spacing — 4px base */ --nt-space-1: 0.25rem; --nt-space-2: 0.5rem; --nt-space-3: 0.75rem; --nt-space-4: 1rem; --nt-space-5: 1.25rem; --nt-space-6: 1.5rem; --nt-space-8: 2rem; --nt-space-10: 2.5rem; --nt-space-12: 3rem; --nt-space-16: 4rem; --nt-space-20: 5rem; --nt-space-24: 6rem; /* Radius */ --nt-radius-xs: 4px; --nt-radius-sm: 6px; --nt-radius: 10px; --nt-radius-lg: 16px; --nt-radius-xl: 22px; --nt-radius-full: 999px; /* Motion. Every transition in this file uses these, so the prefers-reduced-motion block at the bottom only has to zero them. */ --nt-ease: cubic-bezier(0.22, 1, 0.36, 1); --nt-ease-in: cubic-bezier(0.55, 0, 1, 0.45); --nt-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --nt-ease-seal: cubic-bezier(0.34, 1.4, 0.5, 1); --nt-duration-fast: 120ms; --nt-duration: 180ms; --nt-duration-slow: 280ms; --nt-duration-slower: 420ms; /* Stacking */ --nt-z-sticky: 20; --nt-z-dropdown: 40; --nt-z-overlay: 60; --nt-z-toast: 80; /* Measure */ --nt-page-max: 72rem; --nt-prose-max: 44rem; --nt-doc-width: 46rem; } /* ══════════════════════════════════════════════════════════════════════ 2b. SEMANTIC TOKENS — light (the default) ══════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* Ground & surfaces, sunken → raised */ --nt-bg: var(--nt-c-paper-50); --nt-bg-accent: var(--nt-c-paper-100); --nt-surface-sunken: var(--nt-c-paper-200); --nt-surface: var(--nt-c-white); --nt-surface-raised: var(--nt-c-paper-100); --nt-surface-overlay: var(--nt-c-white); --nt-surface-inverse: var(--nt-c-ink-900); --nt-scrim: rgba(22, 24, 29, 0.44); /* The staff bar has its own pair rather than reusing surface-inverse: inverting in dark mode would put a near-white slab across the top of a dark screen, which is loud rather than distinct. In dark it goes bordeaux-tinted black instead — still unmistakably not the customer app. */ --nt-staff-bar: var(--nt-c-ink-900); --nt-staff-bar-text: var(--nt-c-paper-50); /* Text */ --nt-text: var(--nt-c-ink-900); --nt-text-secondary: var(--nt-c-ink-600); --nt-text-tertiary: var(--nt-c-ink-500); --nt-text-disabled: var(--nt-c-ink-300); --nt-text-inverse: var(--nt-c-paper-50); /* Borders */ --nt-border-subtle: var(--nt-c-paper-300); --nt-border: var(--nt-c-paper-400); --nt-border-strong: var(--nt-c-paper-500); --nt-border-inverse: var(--nt-c-ink-700); /* Identity */ --nt-seal: var(--nt-c-seal-600); --nt-seal-hover: var(--nt-c-seal-700); --nt-seal-active: var(--nt-c-seal-800); --nt-seal-soft: var(--nt-c-seal-50); --nt-seal-tint: var(--nt-c-seal-100); --nt-seal-border: var(--nt-c-seal-200); --nt-seal-text: var(--nt-c-seal-600); --nt-on-seal: #fdf9f5; /* Focus */ --nt-focus: var(--nt-c-seal-600); --nt-focus-ring: rgba(127, 29, 43, 0.28); /* Status family: ok — "i orden" */ --nt-ok: var(--nt-c-green-600); --nt-ok-soft: var(--nt-c-green-50); --nt-ok-tint: var(--nt-c-green-100); --nt-ok-border: var(--nt-c-green-200); --nt-ok-text: var(--nt-c-green-700); --nt-on-ok: #f4faf7; /* Status family: warn — approaching */ --nt-warn: var(--nt-c-amber-500); --nt-warn-soft: var(--nt-c-amber-50); --nt-warn-tint: var(--nt-c-amber-100); --nt-warn-border: var(--nt-c-amber-200); --nt-warn-text: var(--nt-c-amber-700); --nt-on-warn: #fffaf3; /* Status family: danger — overdue / destructive */ --nt-danger: var(--nt-c-red-500); --nt-danger-soft: var(--nt-c-red-50); --nt-danger-tint: var(--nt-c-red-100); --nt-danger-border: var(--nt-c-red-200); --nt-danger-text: var(--nt-c-red-600); --nt-on-danger: #fff7f5; /* Status family: info — planned, nothing to do yet */ --nt-info: var(--nt-c-petrol-600); --nt-info-soft: var(--nt-c-petrol-50); --nt-info-tint: var(--nt-c-petrol-100); --nt-info-border: var(--nt-c-petrol-200); --nt-info-text: var(--nt-c-petrol-700); --nt-on-info: #f5fafd; /* Status family: neutral — draft, archived, cancelled */ --nt-neutral: var(--nt-c-ink-500); --nt-neutral-soft: var(--nt-c-paper-100); --nt-neutral-tint: var(--nt-c-paper-200); --nt-neutral-border: var(--nt-c-paper-400); --nt-neutral-text: var(--nt-c-ink-600); --nt-on-neutral: var(--nt-c-paper-50); /* Document paper (preview sheets keep looking like paper in both themes; in dark it dims rather than glares — see the dark block). */ --nt-doc-paper: var(--nt-c-white); --nt-doc-paper-edge: var(--nt-c-paper-300); --nt-doc-ink: #1a1a18; --nt-doc-ink-soft: #55534d; --nt-doc-rule: #e3ded2; /* Elevation — three steps, no more. 1 = resting, 2 = card, 3 = floating. */ --nt-shadow-1: 0 1px 2px rgba(22, 24, 29, 0.05); --nt-shadow-2: 0 1px 2px rgba(22, 24, 29, 0.04), 0 3px 10px rgba(22, 24, 29, 0.06); --nt-shadow-3: 0 2px 6px rgba(22, 24, 29, 0.06), 0 16px 40px rgba(22, 24, 29, 0.14); --nt-shadow-focus: 0 0 0 3px var(--nt-focus-ring); } /* ══════════════════════════════════════════════════════════════════════ 2c. SEMANTIC TOKENS — dark, forced ⚠ KEEP IDENTICAL TO 2d BELOW. ══════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { color-scheme: dark; --nt-bg: var(--nt-c-night-900); --nt-bg-accent: var(--nt-c-night-850); --nt-surface-sunken: var(--nt-c-night-950); --nt-surface: var(--nt-c-night-800); --nt-surface-raised: var(--nt-c-night-700); --nt-surface-overlay: var(--nt-c-night-700); --nt-surface-inverse: var(--nt-c-bone-100); --nt-scrim: rgba(0, 0, 0, 0.64); --nt-staff-bar: var(--nt-c-seal-ink); --nt-staff-bar-text: var(--nt-c-bone-100); --nt-text: var(--nt-c-bone-100); --nt-text-secondary: var(--nt-c-bone-300); --nt-text-tertiary: var(--nt-c-bone-400); --nt-text-disabled: var(--nt-c-night-300); --nt-text-inverse: var(--nt-c-night-900); --nt-border-subtle: var(--nt-c-night-600); --nt-border: var(--nt-c-night-500); --nt-border-strong: var(--nt-c-night-400); --nt-border-inverse: var(--nt-c-bone-200); --nt-seal: var(--nt-c-seal-400); --nt-seal-hover: var(--nt-c-seal-350); --nt-seal-active: var(--nt-c-seal-300); --nt-seal-soft: var(--nt-c-seal-ink); --nt-seal-tint: var(--nt-c-seal-ink-2); --nt-seal-border: var(--nt-c-seal-ink-2); --nt-seal-text: var(--nt-c-seal-300); --nt-on-seal: #fdf9f5; --nt-focus: var(--nt-c-seal-300); --nt-focus-ring: rgba(217, 141, 151, 0.32); --nt-ok: var(--nt-c-green-400); --nt-ok-soft: var(--nt-c-green-ink); --nt-ok-tint: var(--nt-c-green-ink-2); --nt-ok-border: var(--nt-c-green-ink-2); --nt-ok-text: var(--nt-c-green-300); --nt-on-ok: var(--nt-c-night-950); --nt-warn: var(--nt-c-amber-400); --nt-warn-soft: var(--nt-c-amber-ink); --nt-warn-tint: var(--nt-c-amber-ink-2); --nt-warn-border: var(--nt-c-amber-ink-2); --nt-warn-text: var(--nt-c-amber-300); --nt-on-warn: var(--nt-c-night-950); --nt-danger: var(--nt-c-red-400); --nt-danger-soft: var(--nt-c-red-ink); --nt-danger-tint: var(--nt-c-red-ink-2); --nt-danger-border: var(--nt-c-red-ink-2); --nt-danger-text: var(--nt-c-red-300); --nt-on-danger: var(--nt-c-night-950); --nt-info: var(--nt-c-petrol-400); --nt-info-soft: var(--nt-c-petrol-ink); --nt-info-tint: var(--nt-c-petrol-ink-2); --nt-info-border: var(--nt-c-petrol-ink-2); --nt-info-text: var(--nt-c-petrol-300); --nt-on-info: var(--nt-c-night-950); --nt-neutral: var(--nt-c-bone-400); --nt-neutral-soft: var(--nt-c-night-700); --nt-neutral-tint: var(--nt-c-night-600); --nt-neutral-border: var(--nt-c-night-500); --nt-neutral-text: var(--nt-c-bone-300); --nt-on-neutral: var(--nt-c-night-950); --nt-doc-paper: #e9e5db; --nt-doc-paper-edge: #cbc5b6; --nt-doc-ink: #1d1c19; --nt-doc-ink-soft: #55534d; --nt-doc-rule: #cfc9ba; --nt-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45); --nt-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.45); --nt-shadow-3: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.6); --nt-shadow-focus: 0 0 0 3px var(--nt-focus-ring); } /* ══════════════════════════════════════════════════════════════════════ 2d. SEMANTIC TOKENS — dark, following the OS ⚠ KEEP IDENTICAL TO 2c ABOVE. ══════════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --nt-bg: var(--nt-c-night-900); --nt-bg-accent: var(--nt-c-night-850); --nt-surface-sunken: var(--nt-c-night-950); --nt-surface: var(--nt-c-night-800); --nt-surface-raised: var(--nt-c-night-700); --nt-surface-overlay: var(--nt-c-night-700); --nt-surface-inverse: var(--nt-c-bone-100); --nt-scrim: rgba(0, 0, 0, 0.64); --nt-staff-bar: var(--nt-c-seal-ink); --nt-staff-bar-text: var(--nt-c-bone-100); --nt-text: var(--nt-c-bone-100); --nt-text-secondary: var(--nt-c-bone-300); --nt-text-tertiary: var(--nt-c-bone-400); --nt-text-disabled: var(--nt-c-night-300); --nt-text-inverse: var(--nt-c-night-900); --nt-border-subtle: var(--nt-c-night-600); --nt-border: var(--nt-c-night-500); --nt-border-strong: var(--nt-c-night-400); --nt-border-inverse: var(--nt-c-bone-200); --nt-seal: var(--nt-c-seal-400); --nt-seal-hover: var(--nt-c-seal-350); --nt-seal-active: var(--nt-c-seal-300); --nt-seal-soft: var(--nt-c-seal-ink); --nt-seal-tint: var(--nt-c-seal-ink-2); --nt-seal-border: var(--nt-c-seal-ink-2); --nt-seal-text: var(--nt-c-seal-300); --nt-on-seal: #fdf9f5; --nt-focus: var(--nt-c-seal-300); --nt-focus-ring: rgba(217, 141, 151, 0.32); --nt-ok: var(--nt-c-green-400); --nt-ok-soft: var(--nt-c-green-ink); --nt-ok-tint: var(--nt-c-green-ink-2); --nt-ok-border: var(--nt-c-green-ink-2); --nt-ok-text: var(--nt-c-green-300); --nt-on-ok: var(--nt-c-night-950); --nt-warn: var(--nt-c-amber-400); --nt-warn-soft: var(--nt-c-amber-ink); --nt-warn-tint: var(--nt-c-amber-ink-2); --nt-warn-border: var(--nt-c-amber-ink-2); --nt-warn-text: var(--nt-c-amber-300); --nt-on-warn: var(--nt-c-night-950); --nt-danger: var(--nt-c-red-400); --nt-danger-soft: var(--nt-c-red-ink); --nt-danger-tint: var(--nt-c-red-ink-2); --nt-danger-border: var(--nt-c-red-ink-2); --nt-danger-text: var(--nt-c-red-300); --nt-on-danger: var(--nt-c-night-950); --nt-info: var(--nt-c-petrol-400); --nt-info-soft: var(--nt-c-petrol-ink); --nt-info-tint: var(--nt-c-petrol-ink-2); --nt-info-border: var(--nt-c-petrol-ink-2); --nt-info-text: var(--nt-c-petrol-300); --nt-on-info: var(--nt-c-night-950); --nt-neutral: var(--nt-c-bone-400); --nt-neutral-soft: var(--nt-c-night-700); --nt-neutral-tint: var(--nt-c-night-600); --nt-neutral-border: var(--nt-c-night-500); --nt-neutral-text: var(--nt-c-bone-300); --nt-on-neutral: var(--nt-c-night-950); --nt-doc-paper: #e9e5db; --nt-doc-paper-edge: #cbc5b6; --nt-doc-ink: #1d1c19; --nt-doc-ink-soft: #55534d; --nt-doc-rule: #cfc9ba; --nt-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45); --nt-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.45); --nt-shadow-3: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.6); --nt-shadow-focus: 0 0 0 3px var(--nt-focus-ring); } } /* ══════════════════════════════════════════════════════════════════════ 3. DOMAIN ALIASES — frist + document statuses Screens name the domain, not the color; the mapping lives here so that "what color is an overdue frist" has exactly one answer in the codebase. Declared once — they resolve against the theme-resolved family on :root. ══════════════════════════════════════════════════════════════════════ */ :root { /* Frister (deadlines.status) */ --nt-frist-upcoming: var(--nt-info); --nt-frist-upcoming-soft: var(--nt-info-soft); --nt-frist-upcoming-text: var(--nt-info-text); --nt-frist-upcoming-border: var(--nt-info-border); --nt-frist-due-soon: var(--nt-warn); --nt-frist-due-soon-soft: var(--nt-warn-soft); --nt-frist-due-soon-text: var(--nt-warn-text); --nt-frist-due-soon-border: var(--nt-warn-border); --nt-frist-overdue: var(--nt-danger); --nt-frist-overdue-soft: var(--nt-danger-soft); --nt-frist-overdue-text: var(--nt-danger-text); --nt-frist-overdue-border: var(--nt-danger-border); --nt-frist-cleared: var(--nt-ok); --nt-frist-cleared-soft: var(--nt-ok-soft); --nt-frist-cleared-text: var(--nt-ok-text); --nt-frist-cleared-border: var(--nt-ok-border); --nt-frist-cancelled: var(--nt-neutral); --nt-frist-cancelled-soft: var(--nt-neutral-soft); --nt-frist-cancelled-text: var(--nt-neutral-text); --nt-frist-cancelled-border: var(--nt-neutral-border); /* Documents (documents.status). "registered" is the terminal in-orden state — same green as signed, but rendered solid, so the two read as one family with a clear final step rather than as two different ideas. */ --nt-doc-draft: var(--nt-neutral); --nt-doc-draft-soft: var(--nt-neutral-soft); --nt-doc-draft-text: var(--nt-neutral-text); --nt-doc-draft-border: var(--nt-neutral-border); --nt-doc-in-review: var(--nt-info); --nt-doc-in-review-soft: var(--nt-info-soft); --nt-doc-in-review-text: var(--nt-info-text); --nt-doc-in-review-border: var(--nt-info-border); --nt-doc-in-signing: var(--nt-warn); --nt-doc-in-signing-soft: var(--nt-warn-soft); --nt-doc-in-signing-text: var(--nt-warn-text); --nt-doc-in-signing-border: var(--nt-warn-border); --nt-doc-signed: var(--nt-ok); --nt-doc-signed-soft: var(--nt-ok-soft); --nt-doc-signed-text: var(--nt-ok-text); --nt-doc-signed-border: var(--nt-ok-border); --nt-doc-registered: var(--nt-ok); --nt-doc-registered-soft: var(--nt-ok); --nt-doc-registered-text: var(--nt-on-ok); --nt-doc-registered-border: var(--nt-ok); --nt-doc-archived: var(--nt-neutral); --nt-doc-archived-soft: var(--nt-neutral-soft); --nt-doc-archived-text: var(--nt-neutral-text); --nt-doc-archived-border: var(--nt-neutral-border); --nt-doc-superseded: var(--nt-neutral); --nt-doc-superseded-soft: var(--nt-neutral-soft); --nt-doc-superseded-text: var(--nt-neutral-text); --nt-doc-superseded-border: var(--nt-neutral-border); --nt-doc-void: var(--nt-danger); --nt-doc-void-soft: var(--nt-danger-soft); --nt-doc-void-text: var(--nt-danger-text); --nt-doc-void-border: var(--nt-danger-border); } /* ══════════════════════════════════════════════════════════════════════ 4. BASE ══════════════════════════════════════════════════════════════════════ */ html { background: var(--nt-bg); } body { background: var(--nt-bg); color: var(--nt-text); font-family: var(--nt-font-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--nt-seal-tint); color: var(--nt-text); } /* Zero-specificity so any component can state its own focus treatment. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--nt-focus); outline-offset: 2px; } .nt-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .nt-page { max-width: var(--nt-page-max); margin: 0 auto; padding: var(--nt-space-8) var(--nt-space-6) var(--nt-space-16); } .nt-page-narrow { max-width: 52rem; } /* The workspace measure: sidebar + a table that has to fit five columns. Same value as --nt-page-max; named so a screen can ask for it explicitly rather than relying on the default. */ .nt-page-wide { max-width: var(--nt-page-max); } /* ══════════════════════════════════════════════════════════════════════ 5. TYPOGRAPHY ══════════════════════════════════════════════════════════════════════ */ .nt-display { font-family: var(--nt-font-display); font-weight: 600; font-optical-sizing: auto; letter-spacing: -0.015em; line-height: 1.14; } .nt-serif { font-family: var(--nt-font-serif); } .nt-mono { font-family: var(--nt-font-mono); font-size: 0.85em; letter-spacing: 0.01em; font-variant-ligatures: none; } /* Numbers that must line up in a column (kroner, dates, CVR). */ .nt-tabular { font-variant-numeric: tabular-nums; } .nt-eyebrow { font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--nt-text-tertiary); } .nt-lede { font-size: var(--nt-text-md); color: var(--nt-text-secondary); max-width: var(--nt-prose-max); } .nt-muted { color: var(--nt-text-secondary); } .nt-faint { color: var(--nt-text-tertiary); } .nt-ink { color: var(--nt-text); } .nt-ok-fg { color: var(--nt-ok-text); } .nt-warn-fg { color: var(--nt-warn-text); } .nt-danger-fg { color: var(--nt-danger-text); } .nt-seal-fg { color: var(--nt-seal-text); } .nt-link { color: var(--nt-seal-text); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; text-decoration-color: var(--nt-seal-border); transition: text-decoration-color var(--nt-duration-fast) var(--nt-ease); } .nt-link:hover { text-decoration-color: currentColor; } .nt-hr { border: 0; border-top: 1px solid var(--nt-border-subtle); margin: var(--nt-space-6) 0; } /* ══════════════════════════════════════════════════════════════════════ 6. WORDMARK & SEAL MARK ══════════════════════════════════════════════════════════════════════ */ .nt-wordmark { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--nt-font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--nt-text); text-decoration: none; } .nt-wordmark .nt-seal-mark { flex: none; transition: transform var(--nt-duration-slow) var(--nt-ease-seal); } .nt-wordmark:hover .nt-seal-mark { transform: rotate(-8deg); } /* The seal mark is a line-art SVG that inherits currentColor; the ring is drawn in the seal color, the interior letterform in the same ink as its surroundings, so it works on paper, on inverse chrome, and on a card. */ .nt-seal-mark { display: inline-block; color: var(--nt-seal); vertical-align: middle; } .nt-seal-mark-inverse { color: var(--nt-c-seal-300); } /* ══════════════════════════════════════════════════════════════════════ 7. BUTTONS ══════════════════════════════════════════════════════════════════════ */ .nt-btn { --nt-btn-px: 1.15rem; --nt-btn-py: 0.6rem; --nt-btn-fs: 0.92rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: var(--nt-btn-py) var(--nt-btn-px); border-radius: var(--nt-radius); border: 1px solid transparent; font-family: var(--nt-font-body); font-size: var(--nt-btn-fs); font-weight: 550; line-height: 1.25; white-space: nowrap; cursor: pointer; text-decoration: none; -webkit-appearance: none; appearance: none; transition: background-color var(--nt-duration-fast) var(--nt-ease), border-color var(--nt-duration-fast) var(--nt-ease), color var(--nt-duration-fast) var(--nt-ease), box-shadow var(--nt-duration-fast) var(--nt-ease), transform var(--nt-duration-fast) var(--nt-ease); } .nt-btn:active { transform: translateY(1px); } .nt-btn-sm { --nt-btn-px: 0.75rem; --nt-btn-py: 0.36rem; --nt-btn-fs: 0.82rem; } .nt-btn-lg { --nt-btn-px: 1.5rem; --nt-btn-py: 0.8rem; --nt-btn-fs: 1rem; } .nt-btn-block { width: 100%; } .nt-btn-primary { background: var(--nt-seal); color: var(--nt-on-seal); box-shadow: var(--nt-shadow-1); } .nt-btn-primary:hover { background: var(--nt-seal-hover); } .nt-btn-primary:active { background: var(--nt-seal-active); } .nt-btn-ok { background: var(--nt-ok); color: var(--nt-on-ok); box-shadow: var(--nt-shadow-1); } .nt-btn-ok:hover { filter: brightness(1.08); } .nt-btn-ghost { background: var(--nt-surface); color: var(--nt-text); border-color: var(--nt-border); } .nt-btn-ghost:hover { border-color: var(--nt-border-strong); background: var(--nt-surface-raised); } .nt-btn-quiet { background: transparent; color: var(--nt-text-secondary); } .nt-btn-quiet:hover { background: var(--nt-surface-raised); color: var(--nt-text); } .nt-btn-danger { background: transparent; color: var(--nt-danger-text); border-color: var(--nt-danger-border); } .nt-btn-danger:hover { background: var(--nt-danger-soft); border-color: var(--nt-danger); } .nt-btn[disabled], .nt-btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; box-shadow: none; } /* Square icon-only button — 40px hit target at default size. */ .nt-btn-icon { --nt-btn-px: 0; --nt-btn-py: 0; width: 2.35rem; height: 2.35rem; } /* ══════════════════════════════════════════════════════════════════════ 8. CARDS ══════════════════════════════════════════════════════════════════════ */ .nt-card { background: var(--nt-surface); border: 1px solid var(--nt-border-subtle); border-radius: var(--nt-radius-lg); box-shadow: var(--nt-shadow-2); } .nt-card-flat { box-shadow: none; } .nt-card-sunken { background: var(--nt-surface-raised); box-shadow: none; } .nt-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nt-space-4); padding: var(--nt-space-5) var(--nt-space-6); border-bottom: 1px solid var(--nt-border-subtle); } .nt-card-title { font-family: var(--nt-font-display); font-weight: 600; font-size: var(--nt-text-lg); letter-spacing: -0.01em; line-height: 1.2; } .nt-card-subtitle { font-size: var(--nt-text-sm); color: var(--nt-text-secondary); margin-top: 0.15rem; } .nt-card-body { padding: var(--nt-space-6); } .nt-card-body-tight { padding: var(--nt-space-4) var(--nt-space-5); } .nt-card-foot { padding: var(--nt-space-4) var(--nt-space-6); border-top: 1px solid var(--nt-border-subtle); background: var(--nt-surface-raised); border-radius: 0 0 var(--nt-radius-lg) var(--nt-radius-lg); } /* Whole-card link: lifts a hair and warms its border. */ .nt-card-link { display: block; text-decoration: none; color: inherit; transition: transform var(--nt-duration) var(--nt-ease), box-shadow var(--nt-duration) var(--nt-ease), border-color var(--nt-duration) var(--nt-ease); } .nt-card-link:hover { transform: translateY(-2px); box-shadow: var(--nt-shadow-3); border-color: var(--nt-border); } /* Accent rail — the card is "about" a status. */ .nt-card-accent { border-left: 3px solid var(--nt-accent, var(--nt-seal)); } .nt-accent-ok { --nt-accent: var(--nt-ok); } .nt-accent-warn { --nt-accent: var(--nt-warn); } .nt-accent-danger { --nt-accent: var(--nt-danger); } .nt-accent-info { --nt-accent: var(--nt-info); } .nt-accent-seal { --nt-accent: var(--nt-seal); } /* ══════════════════════════════════════════════════════════════════════ 9. PAGE HEADER ══════════════════════════════════════════════════════════════════════ */ .nt-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nt-space-4); flex-wrap: wrap; margin-bottom: var(--nt-space-6); } .nt-page-header-title { font-family: var(--nt-font-display); font-weight: 600; font-size: var(--nt-text-2xl); letter-spacing: -0.02em; line-height: 1.12; } .nt-page-header-subtitle { margin-top: 0.35rem; font-size: var(--nt-text-base); color: var(--nt-text-secondary); max-width: var(--nt-prose-max); } .nt-page-header-actions { display: flex; align-items: center; gap: var(--nt-space-2); flex-wrap: wrap; } /* ══════════════════════════════════════════════════════════════════════ 10. STAT CARD ══════════════════════════════════════════════════════════════════════ */ .nt-stat { display: block; padding: var(--nt-space-5); text-decoration: none; color: inherit; } .nt-stat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--nt-space-3); margin-bottom: var(--nt-space-3); } .nt-stat-label { font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); text-transform: uppercase; letter-spacing: 0.09em; color: var(--nt-text-tertiary); } .nt-stat-icon { color: var(--nt-accent, var(--nt-seal)); flex: none; } .nt-stat-value { font-family: var(--nt-font-display); font-weight: 600; font-size: var(--nt-text-3xl); line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--nt-stat-value-color, var(--nt-text)); } .nt-stat-sub { margin-top: 0.5rem; font-size: var(--nt-text-sm); color: var(--nt-text-secondary); } .nt-stat-ok { --nt-accent: var(--nt-ok); --nt-stat-value-color: var(--nt-ok-text); } .nt-stat-warn { --nt-accent: var(--nt-warn); --nt-stat-value-color: var(--nt-warn-text); } .nt-stat-danger { --nt-accent: var(--nt-danger); --nt-stat-value-color: var(--nt-danger-text); } .nt-stat-info { --nt-accent: var(--nt-info); --nt-stat-value-color: var(--nt-info-text); } /* ══════════════════════════════════════════════════════════════════════ 11. BADGES / STATUS CHIPS & LAW CHIPS ══════════════════════════════════════════════════════════════════════ */ .nt-badge { --nt-badge-fg: var(--nt-neutral-text); --nt-badge-bg: var(--nt-neutral-soft); --nt-badge-bd: var(--nt-neutral-border); --nt-badge-dot: var(--nt-neutral); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.18rem 0.6rem; border-radius: var(--nt-radius-full); border: 1px solid var(--nt-badge-bd); background: var(--nt-badge-bg); color: var(--nt-badge-fg); font-size: var(--nt-text-xs); font-weight: 600; line-height: 1.5; white-space: nowrap; } .nt-badge-dot::before { content: ""; width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--nt-badge-dot); flex: none; } .nt-badge-neutral { --nt-badge-fg: var(--nt-neutral-text); --nt-badge-bg: var(--nt-neutral-soft); --nt-badge-bd: var(--nt-neutral-border); --nt-badge-dot: var(--nt-neutral); } .nt-badge-ok { --nt-badge-fg: var(--nt-ok-text); --nt-badge-bg: var(--nt-ok-soft); --nt-badge-bd: var(--nt-ok-border); --nt-badge-dot: var(--nt-ok); } .nt-badge-warn { --nt-badge-fg: var(--nt-warn-text); --nt-badge-bg: var(--nt-warn-soft); --nt-badge-bd: var(--nt-warn-border); --nt-badge-dot: var(--nt-warn); } .nt-badge-danger { --nt-badge-fg: var(--nt-danger-text); --nt-badge-bg: var(--nt-danger-soft); --nt-badge-bd: var(--nt-danger-border); --nt-badge-dot: var(--nt-danger); } .nt-badge-info { --nt-badge-fg: var(--nt-info-text); --nt-badge-bg: var(--nt-info-soft); --nt-badge-bd: var(--nt-info-border); --nt-badge-dot: var(--nt-info); } .nt-badge-seal { --nt-badge-fg: var(--nt-seal-text); --nt-badge-bg: var(--nt-seal-soft); --nt-badge-bd: var(--nt-seal-border); --nt-badge-dot: var(--nt-seal); } /* Solid: the terminal state (registered) — the stamp has landed. */ .nt-badge-solid { --nt-badge-bd: transparent; } .nt-badge-solid.nt-badge-ok { --nt-badge-bg: var(--nt-ok); --nt-badge-fg: var(--nt-on-ok); --nt-badge-dot: var(--nt-on-ok); } .nt-badge-solid.nt-badge-warn { --nt-badge-bg: var(--nt-warn); --nt-badge-fg: var(--nt-on-warn); --nt-badge-dot: var(--nt-on-warn); } .nt-badge-solid.nt-badge-danger { --nt-badge-bg: var(--nt-danger); --nt-badge-fg: var(--nt-on-danger); --nt-badge-dot: var(--nt-on-danger); } .nt-badge-solid.nt-badge-info { --nt-badge-bg: var(--nt-info); --nt-badge-fg: var(--nt-on-info); --nt-badge-dot: var(--nt-on-info); } .nt-badge-solid.nt-badge-neutral { --nt-badge-bg: var(--nt-neutral); --nt-badge-fg: var(--nt-on-neutral); --nt-badge-dot: var(--nt-on-neutral); } .nt-badge-solid.nt-badge-seal { --nt-badge-bg: var(--nt-seal); --nt-badge-fg: var(--nt-on-seal); --nt-badge-dot: var(--nt-on-seal); } .nt-badge-mono { font-family: var(--nt-font-mono); font-weight: 500; letter-spacing: 0.01em; } /* Generic metadata chip (CVR numbers, kickers, counts). */ .nt-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.18rem 0.6rem; border-radius: var(--nt-radius-full); border: 1px solid var(--nt-border-subtle); background: var(--nt-surface-raised); font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); color: var(--nt-text-secondary); } /* § reference. Monospace by rule: a paragraph number is a citation, not prose, and the reader must be able to copy it exactly. */ .nt-law-chip { display: inline-flex; align-items: baseline; gap: 0.28rem; padding: 0.1rem 0.45rem; border-radius: var(--nt-radius-xs); border: 1px solid var(--nt-seal-border); background: var(--nt-seal-soft); color: var(--nt-seal-text); font-family: var(--nt-font-mono); font-size: 0.78em; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; text-decoration: none; } a.nt-law-chip { transition: background-color var(--nt-duration-fast) var(--nt-ease); } a.nt-law-chip:hover { background: var(--nt-seal-tint); } .nt-law-chip-source { color: var(--nt-text-tertiary); font-size: 0.9em; } /* ══════════════════════════════════════════════════════════════════════ 12. FORMS ══════════════════════════════════════════════════════════════════════ */ .nt-field { display: block; margin-bottom: var(--nt-space-4); } .nt-label { display: block; font-size: var(--nt-text-sm); font-weight: 600; color: var(--nt-text-secondary); margin-bottom: 0.35rem; letter-spacing: 0.01em; } .nt-input, .nt-textarea, .nt-select { width: 100%; padding: 0.6rem 0.85rem; border-radius: var(--nt-radius); border: 1px solid var(--nt-border); background: var(--nt-surface); color: var(--nt-text); font-family: var(--nt-font-body); font-size: 0.95rem; line-height: 1.5; transition: border-color var(--nt-duration-fast) var(--nt-ease), box-shadow var(--nt-duration-fast) var(--nt-ease); } .nt-input::placeholder, .nt-textarea::placeholder { color: var(--nt-text-disabled); } .nt-input:focus, .nt-textarea:focus, .nt-select:focus { outline: none; border-color: var(--nt-focus); box-shadow: var(--nt-shadow-focus); } .nt-input[aria-invalid="true"], .nt-textarea[aria-invalid="true"] { border-color: var(--nt-danger); } .nt-textarea { min-height: 7rem; resize: vertical; } .nt-select { -webkit-appearance: none; appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 1rem center, right 0.72rem center; background-size: 0.28rem 0.28rem, 0.28rem 0.28rem; background-repeat: no-repeat; } .nt-hint { margin-top: 0.35rem; font-size: var(--nt-text-xs); color: var(--nt-text-tertiary); } .nt-error { margin-top: 0.35rem; font-size: var(--nt-text-xs); color: var(--nt-danger-text); } /* Radio "cards" — the wizard's default answer pattern. */ .nt-choice { display: flex; gap: var(--nt-space-3); padding: var(--nt-space-4); border: 1px solid var(--nt-border); border-radius: var(--nt-radius); background: var(--nt-surface); cursor: pointer; transition: border-color var(--nt-duration-fast) var(--nt-ease), background-color var(--nt-duration-fast) var(--nt-ease); } .nt-choice:hover { border-color: var(--nt-border-strong); } .nt-choice:has(input:checked) { border-color: var(--nt-seal); background: var(--nt-seal-soft); } .nt-choice:has(input:focus-visible) { box-shadow: var(--nt-shadow-focus); } /* Validation summary — shared/_form_errors. Danger-toned but quiet: a rejected form is a correction, not a catastrophe, and shouting at someone who mistyped a CVR number is the wrong register for a legal product. */ .nt-form-errors { margin-bottom: var(--nt-space-5); padding: var(--nt-space-4) var(--nt-space-5); border-radius: var(--nt-radius); background: var(--nt-danger-soft); border: 1px solid var(--nt-danger-border); border-left: 3px solid var(--nt-danger); color: var(--nt-danger-text); } .nt-form-errors-title { display: flex; align-items: center; gap: var(--nt-space-2); font-weight: 600; font-size: var(--nt-text-base); } .nt-form-errors-list { margin: var(--nt-space-2) 0 0; padding-left: 1.6rem; list-style: disc; font-size: var(--nt-text-sm); color: var(--nt-text-secondary); } .nt-form-errors-list li + li { margin-top: 0.15rem; } /* Rails wraps an invalid input in
, which turns a grid cell into a block and visibly breaks the form on the exact render where the user most needs it to hold still. config/initializers/form_errors.rb turns the wrapper into an inline marker; this is what it looks like. */ .field_with_errors { display: contents; } .field_with_errors .nt-input, .field_with_errors .nt-textarea, .field_with_errors .nt-select { border-color: var(--nt-danger); background: var(--nt-danger-soft); } /* ══════════════════════════════════════════════════════════════════════ 13. TABLES ══════════════════════════════════════════════════════════════════════ */ .nt-table { width: 100%; border-collapse: collapse; font-size: var(--nt-text-base); } .nt-table th { text-align: left; font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; color: var(--nt-text-tertiary); padding: var(--nt-space-3) var(--nt-space-5); border-bottom: 1px solid var(--nt-border-subtle); white-space: nowrap; } .nt-table td { padding: var(--nt-space-4) var(--nt-space-5); border-bottom: 1px solid var(--nt-border-subtle); vertical-align: middle; } .nt-table tbody tr:last-child td { border-bottom: 0; } /* The summing row on the ejerbog — "I alt" must read as a rule under the column, not as one more line of data. */ .nt-table-total td { border-top: 2px solid var(--nt-border); font-weight: 600; } .nt-table tfoot .nt-table-total td { border-bottom: 0; } .nt-table .text-right { text-align: right; } .nt-table tbody tr { transition: background-color var(--nt-duration-fast) var(--nt-ease); } .nt-table-hover tbody tr:hover { background: var(--nt-surface-raised); } /* ══════════════════════════════════════════════════════════════════════ 14. PAGINATION ══════════════════════════════════════════════════════════════════════ */ .nt-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--nt-space-4); flex-wrap: wrap; padding: var(--nt-space-4) var(--nt-space-5); border-top: 1px solid var(--nt-border-subtle); } .nt-pagination-nav { display: flex; align-items: center; gap: 0.25rem; } .nt-page-link, .nt-page-current, .nt-page-gap { min-width: 2rem; text-align: center; padding: 0.3rem 0.6rem; border-radius: var(--nt-radius-sm); font-size: var(--nt-text-sm); font-variant-numeric: tabular-nums; text-decoration: none; } .nt-page-link { color: var(--nt-text-secondary); transition: background-color var(--nt-duration-fast) var(--nt-ease), color var(--nt-duration-fast) var(--nt-ease); } .nt-page-link:hover { background: var(--nt-surface-raised); color: var(--nt-text); } .nt-page-current { background: var(--nt-seal); color: var(--nt-on-seal); font-weight: 600; } .nt-page-gap { color: var(--nt-text-disabled); user-select: none; } /* ══════════════════════════════════════════════════════════════════════ 14b. KEY / VALUE — structured jsonb rendered for humans Used by shared/_param_value (vedtægter params, filing data, wizard answers). ══════════════════════════════════════════════════════════════════════ */ .nt-kv { display: grid; gap: var(--nt-space-3); } .nt-kv-nested { gap: var(--nt-space-1); margin-top: var(--nt-space-1); padding-left: var(--nt-space-4); border-left: 1px solid var(--nt-border-subtle); } .nt-kv-row { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: var(--nt-space-4); align-items: baseline; } /* Below ~34rem the two columns become one; a 9rem label column next to a sentence is unreadable on a phone. */ @media (max-width: 34rem) { .nt-kv-row { grid-template-columns: 1fr; gap: 0.15rem; } } .nt-kv-key { font-size: var(--nt-text-sm); font-weight: 600; color: var(--nt-text-secondary); } /* overflow-wrap is load-bearing: these values come from a jsonb column and can be one unbroken 200-character string, which used to run out of its grid cell and print over the neighbouring one. */ .nt-kv-value { font-size: var(--nt-text-base); min-width: 0; overflow-wrap: anywhere; } .nt-kv-list { list-style: disc; padding-left: 1.2rem; display: grid; gap: var(--nt-space-1); } .nt-kv-list .nt-kv-nested { border-left: 0; padding-left: 0; } /* ══════════════════════════════════════════════════════════════════════ 15. EMPTY STATE ══════════════════════════════════════════════════════════════════════ */ .nt-empty { padding: var(--nt-space-12) var(--nt-space-6); text-align: center; } .nt-empty-icon { width: 3rem; height: 3rem; margin: 0 auto var(--nt-space-4); border-radius: var(--nt-radius); display: flex; align-items: center; justify-content: center; background: var(--nt-surface-raised); border: 1px solid var(--nt-border-subtle); color: var(--nt-text-tertiary); } .nt-empty-title { font-family: var(--nt-font-display); font-weight: 600; font-size: var(--nt-text-lg); letter-spacing: -0.01em; } .nt-empty-body { margin: 0.4rem auto 0; max-width: 30rem; font-size: var(--nt-text-base); color: var(--nt-text-secondary); } .nt-empty-cta { margin-top: var(--nt-space-5); display: flex; align-items: center; justify-content: center; gap: var(--nt-space-2); flex-wrap: wrap; } /* ══════════════════════════════════════════════════════════════════════ 16. SKELETONS ══════════════════════════════════════════════════════════════════════ */ .nt-skeleton { position: relative; overflow: hidden; border-radius: var(--nt-radius-xs); background: var(--nt-surface-raised); } .nt-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--nt-surface-sunken), transparent); animation: nt-shimmer 1.5s var(--nt-ease-in-out) infinite; } .nt-skeleton-line { height: 0.7rem; } .nt-skeleton-short { width: 45%; } /* shared/_skeleton_block — the non-table placeholder. */ .nt-skeleton-block { display: flex; flex-direction: column; gap: var(--nt-space-3); padding: var(--nt-space-5); } .nt-skeleton-block-paragraph { gap: var(--nt-space-2); } .nt-skeleton-block-paragraph .nt-skeleton-line { height: 0.6rem; } /* Chat: alternating sides, so the placeholder has the SHAPE of a conversation rather than the shape of a list. Recognising "this is a thread loading" at a glance is the whole job. */ .nt-skeleton-block-thread { gap: var(--nt-space-4); } .nt-skeleton-block-thread .nt-skeleton-line { height: 2.1rem; border-radius: var(--nt-radius); } .nt-skeleton-block-thread .nt-skeleton-line.is-alt { align-self: flex-end; } /* The shimmer is a nice-to-have; the layout reservation is the point. With reduced motion the block still holds the space, it just sits still — a travelling highlight is exactly the kind of movement that setting is for. */ @media (prefers-reduced-motion: reduce) { .nt-skeleton::after { display: none; } .nt-skeleton { background: var(--nt-surface-sunken); } } /* Anything mid-fetch dims slightly and stops taking clicks. Applied to the turbo-frame itself via aria-busy, so it needs no wrapper markup and it works for every frame in the app, including ones added later. */ [aria-busy="true"] { cursor: progress; } [aria-busy="true"] > * { opacity: 0.72; transition: opacity var(--nt-duration) var(--nt-ease); } @keyframes nt-shimmer { 100% { transform: translateX(100%); } } /* ══════════════════════════════════════════════════════════════════════ 17. TOASTS & FLASH ══════════════════════════════════════════════════════════════════════ */ .nt-toast-region { position: fixed; top: var(--nt-space-4); right: var(--nt-space-4); z-index: var(--nt-z-toast); display: flex; flex-direction: column; gap: var(--nt-space-2); width: min(24rem, calc(100vw - 2rem)); pointer-events: none; } .nt-toast-region > * { pointer-events: auto; } .nt-toast { --nt-toast-accent: var(--nt-neutral); display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.75rem 0.85rem; border-radius: var(--nt-radius); border: 1px solid var(--nt-border-subtle); border-left: 3px solid var(--nt-toast-accent); background: var(--nt-surface-overlay); box-shadow: var(--nt-shadow-3); font-size: var(--nt-text-base); color: var(--nt-text); animation: nt-toast-in var(--nt-duration-slow) var(--nt-ease) both; } .nt-toast-ok { --nt-toast-accent: var(--nt-ok); } .nt-toast-warn { --nt-toast-accent: var(--nt-warn); } .nt-toast-danger { --nt-toast-accent: var(--nt-danger); } .nt-toast-info { --nt-toast-accent: var(--nt-info); } .nt-toast-icon { color: var(--nt-toast-accent); flex: none; margin-top: 0.1rem; } .nt-toast-body { flex: 1; min-width: 0; } .nt-toast-close { flex: none; border: 0; background: transparent; color: var(--nt-text-tertiary); cursor: pointer; padding: 0.15rem; border-radius: var(--nt-radius-xs); line-height: 0; transition: color var(--nt-duration-fast) var(--nt-ease); } .nt-toast-close:hover { color: var(--nt-text); } .nt-toast-dismissing { animation: nt-toast-out var(--nt-duration-slow) var(--nt-ease-in) both; } @keyframes nt-toast-in { from { opacity: 0; transform: translateX(0.75rem) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes nt-toast-out { from { opacity: 1; transform: none; max-height: 12rem; } to { opacity: 0; transform: translateX(0.75rem); max-height: 0; margin-bottom: -0.5rem; } } /* Inline flash — same semantics, in the document flow (auth cards, forms). */ .nt-flash { --nt-flash-accent: var(--nt-neutral); display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: var(--nt-radius); border: 1px solid var(--nt-border-subtle); border-left: 3px solid var(--nt-flash-accent); background: var(--nt-surface); font-size: var(--nt-text-base); } .nt-flash-ok { --nt-flash-accent: var(--nt-ok); background: var(--nt-ok-soft); color: var(--nt-ok-text); } .nt-flash-warn { --nt-flash-accent: var(--nt-warn); background: var(--nt-warn-soft); color: var(--nt-warn-text); } .nt-flash-danger { --nt-flash-accent: var(--nt-danger); background: var(--nt-danger-soft); color: var(--nt-danger-text); } .nt-flash-info { --nt-flash-accent: var(--nt-info); background: var(--nt-info-soft); color: var(--nt-info-text); } /* ══════════════════════════════════════════════════════════════════════ 18. MODAL & SLIDE-OVER (native ) ══════════════════════════════════════════════════════════════════════ */ .nt-dialog { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100dvh; color: var(--nt-text); } .nt-dialog::backdrop { background: var(--nt-scrim); backdrop-filter: blur(2px); } /* — Modal — */ .nt-modal-dialog { width: 100%; margin: auto; } .nt-modal { width: min(var(--nt-modal-w, 34rem), calc(100vw - 2rem)); margin: 0 auto; background: var(--nt-surface-overlay); border: 1px solid var(--nt-border-subtle); border-radius: var(--nt-radius-lg); box-shadow: var(--nt-shadow-3); overflow: hidden; animation: nt-modal-in var(--nt-duration-slow) var(--nt-ease) both; } .nt-modal-sm { --nt-modal-w: 26rem; } .nt-modal-md { --nt-modal-w: 34rem; } .nt-modal-lg { --nt-modal-w: 46rem; } .nt-modal-exit { animation: nt-modal-out var(--nt-duration-fast) var(--nt-ease-in) both; } @keyframes nt-modal-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.985); } to { opacity: 1; transform: none; } } @keyframes nt-modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(0.4rem) scale(0.99); } } /* — Slide-over — */ .nt-slideover-dialog { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; } .nt-slideover { display: flex; flex-direction: column; width: min(var(--nt-slideover-w, 30rem), 100vw); height: 100dvh; background: var(--nt-surface-overlay); border-left: 1px solid var(--nt-border-subtle); box-shadow: var(--nt-shadow-3); transform: translateX(100%); transition: transform var(--nt-duration-slow) var(--nt-ease); } .nt-slideover-sm { --nt-slideover-w: 24rem; } .nt-slideover-md { --nt-slideover-w: 30rem; } .nt-slideover-lg { --nt-slideover-w: 40rem; } .nt-slideover-xl { --nt-slideover-w: 50rem; } .nt-slideover-enter { transform: translateX(0); } .nt-slideover-exit { transform: translateX(100%); } /* — Shared panel chrome — */ .nt-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--nt-space-4); padding: var(--nt-space-4) var(--nt-space-5); border-bottom: 1px solid var(--nt-border-subtle); flex: none; } .nt-panel-title { font-family: var(--nt-font-display); font-weight: 600; font-size: var(--nt-text-lg); letter-spacing: -0.01em; } .nt-panel-body { padding: var(--nt-space-5); overflow-y: auto; flex: 1; } .nt-panel-close { border: 0; background: transparent; color: var(--nt-text-tertiary); cursor: pointer; padding: 0.3rem; border-radius: var(--nt-radius-sm); line-height: 0; transition: background-color var(--nt-duration-fast) var(--nt-ease), color var(--nt-duration-fast) var(--nt-ease); } .nt-panel-close:hover { background: var(--nt-surface-raised); color: var(--nt-text); } .nt-panel-loading { display: flex; flex-direction: column; gap: 0.6rem; } /* ══════════════════════════════════════════════════════════════════════ 19. DROPDOWN / MENU ══════════════════════════════════════════════════════════════════════ */ .nt-dropdown { position: relative; display: inline-flex; } .nt-menu { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: var(--nt-z-dropdown); min-width: 12rem; padding: 0.3rem; background: var(--nt-surface-overlay); border: 1px solid var(--nt-border-subtle); border-radius: var(--nt-radius); box-shadow: var(--nt-shadow-3); animation: nt-menu-in var(--nt-duration-fast) var(--nt-ease) both; } .nt-menu-left { right: auto; left: 0; } .nt-menu-exit { animation: nt-menu-out var(--nt-duration-fast) var(--nt-ease-in) both; } @keyframes nt-menu-in { from { opacity: 0; transform: translateY(-0.25rem) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes nt-menu-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-0.2rem) scale(0.99); } } .nt-menu-item { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.45rem 0.6rem; border: 0; border-radius: var(--nt-radius-sm); background: transparent; color: var(--nt-text); font-family: var(--nt-font-body); font-size: var(--nt-text-base); text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--nt-duration-fast) var(--nt-ease); } .nt-menu-item:hover, .nt-menu-item:focus-visible { background: var(--nt-surface-raised); } .nt-menu-item[aria-current="true"] { color: var(--nt-seal-text); font-weight: 600; } .nt-menu-item-danger { color: var(--nt-danger-text); } .nt-menu-sep { height: 1px; margin: 0.3rem 0; background: var(--nt-border-subtle); } .nt-menu-label { padding: 0.4rem 0.6rem 0.25rem; font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--nt-text-tertiary); } /* ══════════════════════════════════════════════════════════════════════ 20. THEME TOGGLE (3-state segmented control) ══════════════════════════════════════════════════════════════════════ */ .nt-theme-toggle { display: inline-flex; align-items: center; gap: 0.1rem; padding: 0.15rem; border-radius: var(--nt-radius-full); border: 1px solid var(--nt-border-subtle); background: var(--nt-surface-raised); } .nt-theme-option { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border: 0; border-radius: var(--nt-radius-full); background: transparent; color: var(--nt-text-tertiary); cursor: pointer; line-height: 0; transition: background-color var(--nt-duration-fast) var(--nt-ease), color var(--nt-duration-fast) var(--nt-ease); } .nt-theme-option:hover { color: var(--nt-text); } .nt-theme-option[aria-pressed="true"] { background: var(--nt-surface); color: var(--nt-seal-text); box-shadow: var(--nt-shadow-1); } /* ══════════════════════════════════════════════════════════════════════ 21. APP CHROME — topbar, sysadmin bar, footer ══════════════════════════════════════════════════════════════════════ */ .nt-topbar { position: sticky; top: 0; z-index: var(--nt-z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--nt-space-4); padding: 0.7rem var(--nt-space-6); background: color-mix(in srgb, var(--nt-surface) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--nt-border-subtle); } .nt-topbar-group { display: flex; align-items: center; gap: var(--nt-space-3); } /* Sysadmin chrome: inverted, so staff can never mistake which surface they are on — the same mistake that gets a customer's data edited by accident. The bordeaux hairline under it is the "you are inside Notarium" tell. */ .nt-topbar-sysadmin { background: var(--nt-staff-bar); border-bottom: 2px solid var(--nt-seal); color: var(--nt-staff-bar-text); } .nt-topbar-sysadmin .nt-wordmark { color: var(--nt-staff-bar-text); } .nt-topbar-sysadmin .nt-muted, .nt-topbar-sysadmin .nt-faint { color: color-mix(in srgb, var(--nt-staff-bar-text) 72%, transparent); } .nt-topbar-sysadmin .nt-navlink { color: color-mix(in srgb, var(--nt-staff-bar-text) 68%, transparent); } .nt-topbar-sysadmin .nt-navlink:hover { background: color-mix(in srgb, var(--nt-staff-bar-text) 12%, transparent); color: var(--nt-staff-bar-text); } .nt-topbar-sysadmin .nt-navlink[aria-current="page"] { color: var(--nt-staff-bar-text); background: color-mix(in srgb, var(--nt-staff-bar-text) 14%, transparent); } .nt-topbar-sysadmin .nt-btn-ghost { background: transparent; color: var(--nt-staff-bar-text); border-color: color-mix(in srgb, var(--nt-staff-bar-text) 32%, transparent); } .nt-topbar-sysadmin .nt-btn-ghost:hover { background: color-mix(in srgb, var(--nt-staff-bar-text) 12%, transparent); border-color: color-mix(in srgb, var(--nt-staff-bar-text) 55%, transparent); } .nt-topbar-sysadmin .nt-theme-toggle { background: color-mix(in srgb, var(--nt-staff-bar-text) 10%, transparent); border-color: color-mix(in srgb, var(--nt-staff-bar-text) 22%, transparent); } .nt-topbar-sysadmin .nt-theme-option { color: color-mix(in srgb, var(--nt-staff-bar-text) 65%, transparent); } .nt-topbar-sysadmin .nt-theme-option:hover { color: var(--nt-staff-bar-text); } .nt-topbar-sysadmin .nt-theme-option[aria-pressed="true"] { background: color-mix(in srgb, var(--nt-staff-bar-text) 20%, transparent); color: var(--nt-staff-bar-text); box-shadow: none; } /* The staff label. Mono + caps: this is a system marker, not brand voice. */ .nt-staff-badge { font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); text-transform: uppercase; letter-spacing: 0.11em; padding: 0.15rem 0.5rem; border-radius: var(--nt-radius-xs); background: var(--nt-seal); color: var(--nt-on-seal); white-space: nowrap; } .nt-topbar-badge { font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); text-transform: uppercase; letter-spacing: 0.09em; padding: 0.15rem 0.5rem; border-radius: var(--nt-radius-xs); background: var(--nt-seal-soft); color: var(--nt-seal-text); white-space: nowrap; } .nt-navlink { padding: 0.35rem 0.6rem; border-radius: var(--nt-radius-sm); font-size: var(--nt-text-base); color: var(--nt-text-secondary); text-decoration: none; transition: background-color var(--nt-duration-fast) var(--nt-ease), color var(--nt-duration-fast) var(--nt-ease); } .nt-navlink:hover { background: var(--nt-surface-raised); color: var(--nt-text); } .nt-navlink[aria-current="page"] { color: var(--nt-seal-text); font-weight: 600; } .nt-footer { max-width: var(--nt-page-max); margin: 0 auto; padding: var(--nt-space-10) var(--nt-space-6); border-top: 1px solid var(--nt-border-subtle); display: flex; justify-content: space-between; align-items: center; gap: var(--nt-space-4); flex-wrap: wrap; font-size: var(--nt-text-sm); color: var(--nt-text-tertiary); } /* ══════════════════════════════════════════════════════════════════════ 22. AUTH SHELL ══════════════════════════════════════════════════════════════════════ */ .nt-auth-shell { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--nt-space-8) var(--nt-space-5); gap: var(--nt-space-6); /* A single wide, very soft bordeaux wash behind the card — the wax on the page, not a gradient for its own sake. */ background: radial-gradient(60rem 32rem at 50% -12rem, var(--nt-seal-soft), transparent 70%), var(--nt-bg); } .nt-auth-card { width: 100%; max-width: 26rem; padding: var(--nt-space-8) var(--nt-space-6); } .nt-auth-aside { display: flex; align-items: center; gap: var(--nt-space-3); font-size: var(--nt-text-sm); color: var(--nt-text-tertiary); } /* ══════════════════════════════════════════════════════════════════════ 22b. ERROR PAGES The 404/403/422/500/503 surface. Same wax-on-paper wash as the auth shell, because both are "you are outside the app but still inside Notarium". ⚠ EVERY RULE IN THIS SECTION IS DUPLICATED, RESOLVED TO LITERAL COLORS, INSIDE public/400.html, public/403.html, public/404.html, public/406-…html, public/422.html, public/500.html AND public/503.html. Those files are served when Rails cannot run at all (boot failure, between deploys), so they cannot use the asset pipeline. If you change a rule here, change it in all seven — the whole point is that a customer cannot tell which one they got. ══════════════════════════════════════════════════════════════════════ */ .nt-error-shell { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--nt-space-8) var(--nt-space-5); gap: var(--nt-space-6); background: radial-gradient(60rem 32rem at 50% -12rem, var(--nt-seal-soft), transparent 70%), var(--nt-bg); } .nt-error-wordmark { color: var(--nt-text); text-decoration: none; } .nt-error-main { width: 100%; display: flex; justify-content: center; } .nt-error-card { width: 100%; max-width: 34rem; padding: var(--nt-space-8) var(--nt-space-8) var(--nt-space-6); background: var(--nt-surface); border: 1px solid var(--nt-border-subtle); border-radius: var(--nt-radius-lg); box-shadow: var(--nt-shadow-2); /* The status colour arrives as a 3px rail on the left edge, the same signal the frist cards use — colour is never the only cue, the code chip repeats it in text. */ border-left: 3px solid var(--nt-accent-color, var(--nt-seal)); } .nt-error-seal { --nt-accent-color: var(--nt-seal); --nt-accent-soft: var(--nt-seal-soft); --nt-accent-text: var(--nt-seal-text); } .nt-error-warn { --nt-accent-color: var(--nt-warn); --nt-accent-soft: var(--nt-warn-soft); --nt-accent-text: var(--nt-warn-text); } .nt-error-danger { --nt-accent-color: var(--nt-danger); --nt-accent-soft: var(--nt-danger-soft); --nt-accent-text: var(--nt-danger-text); } .nt-error-info { --nt-accent-color: var(--nt-info); --nt-accent-soft: var(--nt-info-soft); --nt-accent-text: var(--nt-info-text); } .nt-error-ok { --nt-accent-color: var(--nt-ok); --nt-accent-soft: var(--nt-ok-soft); --nt-accent-text: var(--nt-ok-text); } /* The status code as a struck chip, in the mono face the app already uses for CVR numbers and § references — a number you might have to read aloud. */ .nt-error-code { display: inline-block; font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); font-weight: 600; letter-spacing: 0.14em; padding: 0.2rem 0.55rem; border-radius: var(--nt-radius-full); background: var(--nt-accent-soft); color: var(--nt-accent-text); border: 1px solid currentColor; } .nt-error-title { margin-top: var(--nt-space-4); font-family: var(--nt-font-display); font-weight: 600; font-optical-sizing: auto; font-size: var(--nt-text-2xl); letter-spacing: -0.015em; line-height: 1.14; color: var(--nt-text); } .nt-error-body { margin-top: var(--nt-space-3); font-size: var(--nt-text-md); color: var(--nt-text-secondary); } /* "Nothing was half-saved." On a system of record this line is the point of the page, so it gets its own tinted block rather than being a third paragraph nobody reads. */ .nt-error-reassurance { margin-top: var(--nt-space-4); padding: var(--nt-space-3) var(--nt-space-4); border-radius: var(--nt-radius); background: var(--nt-surface-raised); border: 1px solid var(--nt-border-subtle); font-size: var(--nt-text-sm); color: var(--nt-text-secondary); } .nt-error-actions { margin-top: var(--nt-space-6); padding-top: var(--nt-space-5); border-top: 1px solid var(--nt-border-subtle); } .nt-error-actions-label { font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--nt-text-tertiary); } .nt-error-actions-row { margin-top: var(--nt-space-3); display: flex; flex-wrap: wrap; gap: var(--nt-space-2); } .nt-error-ref { margin-top: var(--nt-space-5); padding: var(--nt-space-4); border-radius: var(--nt-radius); background: var(--nt-surface-sunken); border: 1px dashed var(--nt-border); } .nt-error-ref-label { font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--nt-text-tertiary); } .nt-error-ref-value { margin-top: 0.15rem; font-family: var(--nt-font-mono); font-size: var(--nt-text-base); font-weight: 600; color: var(--nt-text); overflow-wrap: anywhere; user-select: all; } .nt-error-ref-help { margin-top: var(--nt-space-2); font-size: var(--nt-text-xs); color: var(--nt-text-tertiary); } .nt-error-footline { font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); letter-spacing: 0.08em; color: var(--nt-text-tertiary); } @media (max-width: 30rem) { .nt-error-card { padding: var(--nt-space-6) var(--nt-space-5); } .nt-error-actions-row .nt-btn { width: 100%; } } /* ══════════════════════════════════════════════════════════════════════ 23. DOCUMENT PAGE — the paper frame live previews live inside ══════════════════════════════════════════════════════════════════════ */ .nt-doc-frame { padding: var(--nt-space-6); background: var(--nt-surface-sunken); border-radius: var(--nt-radius-lg); display: flex; justify-content: center; overflow-x: auto; } .nt-doc-frame-bare { padding: 0; background: transparent; } /* * A4 by aspect-ratio, not by fixed height: a short document still reads as * a page, and a long one grows instead of clipping (min-height:auto on an * aspect-ratio box resolves to the content size). */ .nt-doc-sheet { position: relative; width: 100%; max-width: var(--nt-doc-width); aspect-ratio: 1 / 1.4142; padding: clamp(1.75rem, 6%, 3.5rem) clamp(1.5rem, 8%, 4rem); background: var(--nt-doc-paper); color: var(--nt-doc-ink); border: 1px solid var(--nt-doc-paper-edge); border-radius: 2px; font-family: var(--nt-font-serif); font-size: 0.95rem; line-height: 1.65; /* Two stacked shadows fake the sheet lifting off the desk. */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.13); } .nt-doc-sheet-a5 { aspect-ratio: 1 / 1.4142; max-width: 32rem; } /* Bound edge: the faint gutter shadow of a page in a protokol. */ .nt-doc-sheet::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 1.5rem; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.05), transparent); pointer-events: none; } .nt-doc-eyebrow { font-family: var(--nt-font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--nt-doc-ink-soft); margin-bottom: 1.4rem; } .nt-doc-title { font-family: var(--nt-font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.012em; margin-bottom: 0.4rem; color: var(--nt-doc-ink); } .nt-doc-subtitle { font-family: var(--nt-font-serif); font-size: 0.92rem; color: var(--nt-doc-ink-soft); margin-bottom: 1.6rem; } .nt-doc-section { margin-top: 1.3rem; } .nt-doc-section-title { font-family: var(--nt-font-serif); font-weight: 600; font-size: 0.95rem; margin-bottom: 0.3rem; color: var(--nt-doc-ink); } .nt-doc-rule { border: 0; border-top: 1px solid var(--nt-doc-rule); margin: 1.4rem 0; } .nt-doc-signature { margin-top: 2rem; border-top: 1px solid var(--nt-doc-ink-soft); padding-top: 0.4rem; width: 14rem; font-size: 0.8rem; color: var(--nt-doc-ink-soft); } .nt-doc-footer { position: absolute; left: clamp(1.5rem, 8%, 4rem); right: clamp(1.5rem, 8%, 4rem); bottom: clamp(1rem, 4%, 2rem); display: flex; justify-content: space-between; gap: 1rem; font-family: var(--nt-font-mono); font-size: 0.62rem; letter-spacing: 0.04em; color: var(--nt-doc-ink-soft); border-top: 1px solid var(--nt-doc-rule); padding-top: 0.4rem; } /* Turbo-stream previews flash the section that just changed. */ .nt-doc-flash { animation: nt-doc-flash var(--nt-duration-slower) var(--nt-ease) 2 alternate; } @keyframes nt-doc-flash { from { background: transparent; } to { background: rgba(176, 97, 27, 0.14); } } /* ══════════════════════════════════════════════════════════════════════ 24. HOMEPAGE ══════════════════════════════════════════════════════════════════════ */ .nt-home-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--nt-space-4); max-width: var(--nt-page-max); margin: 0 auto; padding: var(--nt-space-5) var(--nt-space-6); } .nt-hero { position: relative; max-width: var(--nt-page-max); margin: 0 auto; padding: var(--nt-space-20) var(--nt-space-6) var(--nt-space-16); text-align: center; } .nt-hero::before { content: ""; position: absolute; inset: -6rem 0 auto; height: 34rem; background: radial-gradient(48rem 24rem at 50% 0%, var(--nt-seal-soft), transparent 72%); pointer-events: none; z-index: -1; } .nt-hero h1 { font-family: var(--nt-font-display); font-size: clamp(2.5rem, 6vw, 4.1rem); font-weight: 600; font-optical-sizing: auto; letter-spacing: -0.025em; line-height: 1.04; margin: 0 0 var(--nt-space-5); text-wrap: balance; } .nt-hero-pitch { max-width: 36rem; margin: 0 auto var(--nt-space-8); font-size: var(--nt-text-md); color: var(--nt-text-secondary); text-wrap: pretty; } .nt-hero-cta { display: flex; gap: var(--nt-space-3); justify-content: center; flex-wrap: wrap; } .nt-section { max-width: var(--nt-page-max); margin: 0 auto; padding: 0 var(--nt-space-6) var(--nt-space-20); } /* ══════════════════════════════════════════════════════════════════════ 25. STYLEGUIDE HELPERS (/sysadmin/styleguide only) ══════════════════════════════════════════════════════════════════════ */ .nt-sg-section { scroll-margin-top: 5rem; margin-bottom: var(--nt-space-16); } .nt-sg-section-title { font-family: var(--nt-font-display); font-size: var(--nt-text-xl); font-weight: 600; letter-spacing: -0.015em; padding-bottom: var(--nt-space-2); border-bottom: 1px solid var(--nt-border); margin-bottom: var(--nt-space-5); } .nt-sg-swatch { border: 1px solid var(--nt-border-subtle); border-radius: var(--nt-radius); overflow: hidden; background: var(--nt-surface); } .nt-sg-swatch-chip { height: 3.25rem; } .nt-sg-swatch-meta { padding: 0.4rem 0.55rem; border-top: 1px solid var(--nt-border-subtle); font-family: var(--nt-font-mono); font-size: 0.66rem; color: var(--nt-text-secondary); word-break: break-all; } .nt-sg-spec { margin-top: var(--nt-space-3); padding: var(--nt-space-3) var(--nt-space-4); background: var(--nt-surface-sunken); border: 1px solid var(--nt-border-subtle); border-radius: var(--nt-radius-sm); font-family: var(--nt-font-mono); font-size: 0.7rem; line-height: 1.7; color: var(--nt-text-secondary); white-space: pre-wrap; overflow-x: auto; } .nt-sg-demo { padding: var(--nt-space-5); border: 1px dashed var(--nt-border); border-radius: var(--nt-radius); background: var(--nt-bg-accent); } .nt-sg-toc { position: sticky; top: 4.5rem; align-self: start; display: flex; flex-direction: column; gap: 0.1rem; } /* ══════════════════════════════════════════════════════════════════════ 26. STAFF SURFACE Components that exist only under /sysadmin — the filing checklist, the queue rows, the impersonation bar. They reuse the same tokens as the customer surface; only the density changes. Staff read these screens forty times a day, so they are tighter than anything a customer sees. ══════════════════════════════════════════════════════════════════════ */ /* -- Impersonation ---------------------------------------------------- */ /* Fixed, bordeaux, undismissable. Bottom-right so it never covers a form's submit row, and above every overlay so a modal cannot hide it. */ .nt-impersonation-bar { position: fixed; right: var(--nt-space-4); bottom: var(--nt-space-4); z-index: 9999; display: flex; align-items: center; gap: var(--nt-space-3); padding: var(--nt-space-2) var(--nt-space-3); border-radius: var(--nt-radius); background: var(--nt-seal); color: var(--nt-on-seal, #fff); box-shadow: var(--nt-shadow-3); font-size: var(--nt-text-sm); max-width: min(30rem, calc(100vw - 2rem)); } .nt-impersonation-text { line-height: 1.3; } .nt-impersonation-stop { flex: none; padding: 0.15rem 0.55rem; border-radius: var(--nt-radius-xs); border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.18); color: inherit; font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: background-color var(--nt-duration-fast) var(--nt-ease); } .nt-impersonation-stop:hover { background: rgba(255, 255, 255, 0.32); } /* -- Staff toolbar (filters + search above a list) --------------------- */ .nt-toolbar { display: flex; align-items: flex-end; gap: var(--nt-space-3); flex-wrap: wrap; margin-bottom: var(--nt-space-4); } .nt-filter-row { display: flex; gap: 0.25rem; flex-wrap: wrap; } .nt-filter { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: var(--nt-radius-full); border: 1px solid var(--nt-border-subtle); background: var(--nt-surface); color: var(--nt-text-secondary); font-size: var(--nt-text-sm); white-space: nowrap; transition: border-color var(--nt-duration-fast) var(--nt-ease), color var(--nt-duration-fast) var(--nt-ease); } .nt-filter:hover { border-color: var(--nt-border-strong); color: var(--nt-text); } .nt-filter[aria-current="true"] { background: var(--nt-seal); border-color: var(--nt-seal); color: var(--nt-on-seal, #fff); } .nt-filter-count { font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); opacity: 0.75; } /* An input sized to sit inside a table row without changing its height. */ .nt-input-sm { padding: 0.3rem 0.5rem; font-size: var(--nt-text-sm); } /* -- Queue rows -------------------------------------------------------- */ /* The frist column is the reason this table exists; it gets a colour rail so the eye lands on the most urgent row before reading a single word. */ .nt-queue-rail { display: inline-block; width: 3px; align-self: stretch; border-radius: 2px; background: var(--nt-border); } .nt-queue-rail-danger { background: var(--nt-danger); } .nt-queue-rail-warn { background: var(--nt-warn); } .nt-queue-rail-info { background: var(--nt-info); } .nt-queue-rail-ok { background: var(--nt-ok); } .nt-queue-frist { display: flex; align-items: center; gap: var(--nt-space-3); } .nt-queue-days { font-family: var(--nt-font-mono); font-variant-numeric: tabular-nums; font-size: var(--nt-text-sm); white-space: nowrap; } .nt-queue-days-danger { color: var(--nt-danger-text); font-weight: 600; } .nt-queue-days-warn { color: var(--nt-warn-text); } /* -- Checklist (the Virk copy surface) --------------------------------- */ .nt-checklist-section + .nt-checklist-section { margin-top: var(--nt-space-6); } .nt-checklist-field { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr auto; gap: var(--nt-space-3); align-items: start; padding: var(--nt-space-3) 0; border-bottom: 1px solid var(--nt-border-subtle); } .nt-checklist-field:last-child { border-bottom: 0; } @media (max-width: 640px) { .nt-checklist-field { grid-template-columns: 1fr auto; } .nt-checklist-label { grid-column: 1 / -1; } } .nt-checklist-label { font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--nt-text-tertiary); padding-top: 0.15rem; } /* Values are pasted into Virk verbatim, so they must preserve their own line breaks (a ledelse field is several people) and never be re-wrapped by us. */ .nt-checklist-value { white-space: pre-wrap; word-break: break-word; color: var(--nt-text); } .nt-checklist-value-mono { font-family: var(--nt-font-mono); font-variant-numeric: tabular-nums; } .nt-checklist-missing { color: var(--nt-danger-text); font-style: italic; } .nt-copy-btn { flex: none; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem; border-radius: var(--nt-radius-xs); border: 1px solid var(--nt-border-subtle); background: var(--nt-surface); color: var(--nt-text-tertiary); font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); cursor: pointer; transition: color var(--nt-duration-fast) var(--nt-ease), border-color var(--nt-duration-fast) var(--nt-ease); } .nt-copy-btn:hover { color: var(--nt-text); border-color: var(--nt-border-strong); } .nt-copy-btn[data-copied="true"] { color: var(--nt-ok-text); border-color: var(--nt-ok-border); } /* -- The CPR block ----------------------------------------------------- */ /* Deliberately loud. This is the one place in Notarium where CPR is on screen; the operator must know it is temporary before they read a digit. */ .nt-cpr-block { border: 1px solid var(--nt-danger-border); background: var(--nt-danger-soft); border-radius: var(--nt-radius); padding: var(--nt-space-4) var(--nt-space-5); } .nt-cpr-notice { display: flex; gap: var(--nt-space-2); align-items: flex-start; color: var(--nt-danger-text); font-size: var(--nt-text-sm); margin-bottom: var(--nt-space-3); } .nt-cpr-value { font-family: var(--nt-font-mono); font-size: var(--nt-text-md); letter-spacing: 0.03em; } /* -- Definition lists (detail pages) ----------------------------------- */ .nt-dl { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: var(--nt-space-2) var(--nt-space-4); font-size: var(--nt-text-sm); } .nt-dl dt { font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--nt-text-tertiary); } .nt-dl dd { color: var(--nt-text); margin: 0; word-break: break-word; } /* -- Code / payload rendering ------------------------------------------ */ .nt-code { font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); line-height: 1.55; white-space: pre; overflow-x: auto; padding: var(--nt-space-4); border-radius: var(--nt-radius-sm); background: var(--nt-surface-sunken); color: var(--nt-text-secondary); max-height: 32rem; } .nt-hash { font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); color: var(--nt-text-tertiary); word-break: break-all; } /* ══════════════════════════════════════════════════════════════════════ 26b. THE WIZARD — layout, controls, the decide moment Everything below is either a control the pack's field vocabulary needs (money_cents, percent, boolean, table, stakeholder_list, document_upload) or one of the three moments the wizard is judged on: the hard stop, the jurist hand-off, and the beslutning. ══════════════════════════════════════════════════════════════════════ */ :root { /* Document typography. Theme-independent — the sheet's COLOURS come from the --nt-doc-* aliases in section 3; these are its proportions. */ --nt-doc-lead: 1.62; --nt-doc-gap: 1.4rem; --nt-doc-clause-indent: 3rem; /* Two panes. The paper column is allowed to be a little wider than the question column: a document that has to wrap every eight words does not read like a document. */ --nt-wizard-gap: 1.5rem; /* Clears the sticky .nt-topbar (0.7rem padding either side of a ~1.6rem row) plus a breath of air, so the pinned sheet does not slide under it. */ --nt-wizard-sticky: 4.5rem; } /* ── the two panes ───────────────────────────────────────────────────── */ /* The wizard is the one page in the workspace that needs the whole window: two panes, and one of them is a sheet of A4. The reading-width column that is right for a settings form starves it, so the page container widens when a wizard is on it — no layout template has to know the wizard exists. */ .nt-page:has(.nt-wizard) { max-width: 92rem; } .nt-wizard-shell { container-type: inline-size; } .nt-wizard { display: grid; gap: var(--nt-wizard-gap); align-items: start; } /* A container query, not a media query: what decides whether two panes fit is the width left inside the workspace column after the sidebar and the page gutters have taken their share — a different number from the viewport's. */ @container (min-width: 62rem) { .nt-wizard { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } /* The paper stays in view while the question column scrolls — and, because this container lives OUTSIDE the turbo-frame that is replaced after every answer, its scroll position survives the swap for free. */ .nt-wizard-paper { position: sticky; top: var(--nt-wizard-sticky); max-height: calc(100vh - (var(--nt-wizard-sticky) * 2)); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--nt-radius-lg); } } .nt-wizard-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nt-space-3); } .nt-wizard-actions-right { display: flex; align-items: center; gap: var(--nt-space-3); } /* ── the question ────────────────────────────────────────────────────── */ .nt-question-help { color: var(--nt-text-secondary); margin-bottom: var(--nt-space-5); max-width: 48ch; } /* The line that explains why a screen the customer never asked for is in front of them: "det her er en generalforsamling, og sådan er det". */ .nt-reassurance { margin-bottom: var(--nt-space-4); padding: var(--nt-space-2) var(--nt-space-3); border-left: 2px solid var(--nt-seal); border-radius: 0 var(--nt-radius-xs) var(--nt-radius-xs) 0; background: var(--nt-seal-soft); color: var(--nt-text-secondary); font-size: var(--nt-text-sm); } .nt-legal-note { margin-top: var(--nt-space-6); padding-top: var(--nt-space-4); border-top: 1px solid var(--nt-border-subtle); } .nt-legal-note-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nt-space-2); } /* ── fields ──────────────────────────────────────────────────────────── */ .nt-field + .nt-field { margin-top: var(--nt-space-5); } .nt-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .nt-optional { font-weight: 400; color: var(--nt-text-tertiary); } .nt-hint-quiet { color: var(--nt-text-disabled); } /* The "foreslået" marker. Small, quiet, and the whole reason a screen full of pre-filled answers reads as a confirmation rather than as someone else's form. */ .nt-suggested { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.4rem; padding: 0.05rem 0.4rem 0.1rem; border-radius: var(--nt-radius-full); background: var(--nt-ok-soft); color: var(--nt-ok-text); border: 1px solid var(--nt-ok-border); font-family: var(--nt-font-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; vertical-align: 0.06em; white-space: nowrap; } .nt-suggested-icon { flex: none; } /* ── enum: the radio cards ───────────────────────────────────────────── */ .nt-choice-set { display: flex; flex-direction: column; gap: var(--nt-space-2); margin-top: var(--nt-space-2); } .nt-choice { align-items: flex-start; } .nt-choice input[type="radio"] { margin-top: 0.22rem; flex: none; accent-color: var(--nt-seal); } .nt-choice-body { min-width: 0; display: block; } .nt-choice-title { display: block; font-weight: 600; line-height: 1.35; } .nt-choice-help { display: block; margin-top: 0.2rem; font-size: var(--nt-text-sm); color: var(--nt-text-secondary); line-height: 1.45; } /* ── boolean: Ja / Nej ───────────────────────────────────────────────── */ .nt-segmented { display: inline-flex; margin-top: var(--nt-space-2); padding: 3px; gap: 3px; border: 1px solid var(--nt-border); border-radius: var(--nt-radius); background: var(--nt-surface-sunken); } .nt-segment { position: relative; display: block; cursor: pointer; } /* The radio is real and focusable — only its painted box is hidden, so the control is a radiogroup to a screen reader and a segmented control to everyone else. */ .nt-segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .nt-segment-face { display: flex; align-items: center; justify-content: center; gap: 0.3rem; min-width: 5.5rem; padding: 0.44rem 0.95rem; border-radius: calc(var(--nt-radius) - 3px); color: var(--nt-text-secondary); font-size: var(--nt-text-base); font-weight: 600; transition: background-color var(--nt-duration-fast) var(--nt-ease), color var(--nt-duration-fast) var(--nt-ease); } .nt-segment:hover .nt-segment-face { color: var(--nt-text); } .nt-segment input:checked + .nt-segment-face { background: var(--nt-surface); color: var(--nt-text); box-shadow: var(--nt-shadow-1); } .nt-segment input:focus-visible + .nt-segment-face { box-shadow: var(--nt-shadow-focus); } .nt-segment .nt-suggested { margin-left: 0.1rem; } /* ── affixed inputs: kr., % ──────────────────────────────────────────── */ .nt-affix-field { position: relative; display: block; max-width: 20rem; } .nt-affix-field-narrow { max-width: 11rem; } .nt-affix-field .nt-input { padding-right: 3rem; } .nt-affix { position: absolute; top: 50%; right: 0.85rem; transform: translateY(-50%); font-size: var(--nt-text-sm); color: var(--nt-text-tertiary); pointer-events: none; } /* Amounts are read down a column, not along a sentence: tabular figures and right alignment are what let a customer check a fordeling at a glance. */ .nt-input-amount { text-align: right; font-variant-numeric: tabular-nums; } .nt-input-date { max-width: 12rem; } .nt-input-person { max-width: 26rem; } .nt-textarea-grow { min-height: 4.5rem; resize: none; } /* ── date, echoed in Danish ──────────────────────────────────────────── */ .nt-date-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nt-space-3); } .nt-date-echo { font-family: var(--nt-font-serif); font-size: var(--nt-text-md); color: var(--nt-text-secondary); } /* ── repeatable rows (stakeholder_list) ──────────────────────────────── */ .nt-repeat { display: flex; flex-direction: column; gap: var(--nt-space-2); margin-top: var(--nt-space-2); } .nt-repeat-row { display: flex; align-items: center; gap: var(--nt-space-2); } .nt-repeat-row .nt-input { flex: 1 1 auto; } .nt-repeat-foot { margin-top: var(--nt-space-2); } .nt-icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 1px solid transparent; border-radius: var(--nt-radius-sm); background: transparent; color: var(--nt-text-tertiary); cursor: pointer; transition: color var(--nt-duration-fast) var(--nt-ease), background-color var(--nt-duration-fast) var(--nt-ease); } .nt-icon-btn:hover { background: var(--nt-surface-sunken); color: var(--nt-danger-text); } .nt-icon-btn:focus-visible { outline: none; box-shadow: var(--nt-shadow-focus); } /* ── table: the editable grid ────────────────────────────────────────── */ .nt-grid-wrap { margin-top: var(--nt-space-2); } .nt-grid-scroll { overflow-x: auto; border: 1px solid var(--nt-border-subtle); border-radius: var(--nt-radius); background: var(--nt-surface); } .nt-grid { width: 100%; border-collapse: collapse; font-size: var(--nt-text-sm); } .nt-grid th { text-align: left; padding: 0.5rem 0.6rem; font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--nt-text-tertiary); background: var(--nt-surface-raised); border-bottom: 1px solid var(--nt-border-subtle); white-space: nowrap; } .nt-grid td { padding: 0.25rem 0.35rem; border-bottom: 1px solid var(--nt-border-subtle); vertical-align: middle; } .nt-grid tbody tr:last-child td { border-bottom: 0; } .nt-grid .nt-grid-numeric { text-align: right; } .nt-grid th.nt-grid-actions, .nt-grid td.nt-grid-actions { width: 2.4rem; text-align: center; padding: 0.25rem; } /* Cell inputs are borderless until touched: a grid where every cell is drawn as a box is a spreadsheet, and a fordeling should read as a table you may correct — not as a data-entry form. */ .nt-grid-input { width: 100%; min-width: 5rem; padding: 0.35rem 0.45rem; border: 1px solid transparent; border-radius: var(--nt-radius-xs); background: transparent; color: var(--nt-text); font-family: var(--nt-font-body); font-size: var(--nt-text-sm); transition: border-color var(--nt-duration-fast) var(--nt-ease), background-color var(--nt-duration-fast) var(--nt-ease); } /* A name needs room; an amount does not. Names truncated to "Sønderby Inves" in a fordeling the customer is about to sign is not acceptable, so the text cells claim width and the wrapper scrolls sideways if the sum overflows. */ .nt-grid-input:not(.nt-input-amount) { min-width: 9rem; } .nt-grid-input:hover { border-color: var(--nt-border-subtle); } .nt-grid-input:focus { outline: none; border-color: var(--nt-focus); background: var(--nt-surface); box-shadow: var(--nt-shadow-focus); } .nt-grid-select { appearance: auto; } .nt-grid-affix { position: relative; display: flex; align-items: center; } .nt-grid-affix .nt-grid-input { padding-right: 2.1rem; } .nt-grid-affix-unit { position: absolute; right: 0.5rem; font-size: var(--nt-text-xs); color: var(--nt-text-disabled); pointer-events: none; } .nt-grid tfoot td, .nt-grid tfoot th { padding: 0.5rem 0.6rem; border-top: 1.5px solid var(--nt-border); background: var(--nt-surface-raised); font-weight: 600; color: var(--nt-text); } .nt-grid tfoot th { text-transform: none; font-family: var(--nt-font-body); letter-spacing: 0; font-size: var(--nt-text-sm); } .nt-grid-total { font-variant-numeric: tabular-nums; white-space: nowrap; } .nt-grid-empty { padding: var(--nt-space-4); font-size: var(--nt-text-sm); color: var(--nt-text-tertiary); } .nt-grid-foot { margin-top: var(--nt-space-2); } /* ── document_upload: the honest stub ────────────────────────────────── */ .nt-dropzone { display: flex; align-items: flex-start; gap: var(--nt-space-3); margin-top: var(--nt-space-2); padding: var(--nt-space-4); border: 1px dashed var(--nt-border); border-radius: var(--nt-radius); background: var(--nt-surface-sunken); } .nt-dropzone-filled { border-style: solid; border-color: var(--nt-ok-border); background: var(--nt-ok-soft); } .nt-dropzone-icon { flex: none; margin-top: 0.1rem; color: var(--nt-text-tertiary); } .nt-dropzone-filled .nt-dropzone-icon { color: var(--nt-ok); } .nt-dropzone-title { font-weight: 600; font-size: var(--nt-text-base); } .nt-dropzone-body { font-size: var(--nt-text-sm); color: var(--nt-text-secondary); margin-top: 0.1rem; } .nt-dropzone-filled .nt-dropzone-body { color: var(--nt-ok-text); } /* "Dokumentet eftersendes" — a deliberate answer, not a default. Rendered as a real checkbox because that is exactly what it is: one thing the customer is asserting about a document that is not here yet. */ .nt-defer { display: flex; align-items: center; gap: 0.55rem; margin-top: var(--nt-space-3); font-size: var(--nt-text-sm); color: var(--nt-text-secondary); cursor: pointer; } .nt-defer input[type="checkbox"] { width: 1rem; height: 1rem; flex: none; accent-color: var(--nt-seal); cursor: pointer; } .nt-defer:hover { color: var(--nt-text); } /* "Dokumentet eftersendes". A deliberate answer, so it looks like a control the customer operates — not like fine print under a disabled dropzone. */ .nt-defer { display: flex; align-items: center; gap: var(--nt-space-2); margin-top: var(--nt-space-2); padding: var(--nt-space-2) var(--nt-space-3); border: 1px solid var(--nt-border-subtle); border-radius: var(--nt-radius-sm); font-size: var(--nt-text-sm); color: var(--nt-text-secondary); cursor: pointer; transition: border-color var(--nt-duration-fast) var(--nt-ease), background var(--nt-duration-fast) var(--nt-ease); } .nt-defer:hover { border-color: var(--nt-border); background: var(--nt-surface-sunken); } .nt-defer:has(input:checked) { border-color: var(--nt-seal); color: var(--nt-text); } .nt-defer input { accent-color: var(--nt-seal); } /* ── errors and the hard stop ────────────────────────────────────────── */ .nt-error-region { margin-top: 0.4rem; } .nt-error-stop { font-weight: 600; } .nt-fieldset-invalid .nt-choice, .nt-fieldset-invalid .nt-segmented { border-color: var(--nt-danger-border); } /* § 180 and its siblings. A red border alone says "typo"; this says "we will not write that down", which is a different sentence. */ .nt-stop { display: flex; align-items: flex-start; gap: var(--nt-space-3); padding: var(--nt-space-4) var(--nt-space-5); border: 1px solid var(--nt-danger-border); border-left: 3px solid var(--nt-danger); border-radius: var(--nt-radius); background: var(--nt-danger-soft); } .nt-stop-icon { flex: none; margin-top: 0.1rem; color: var(--nt-danger); } .nt-stop-title { font-weight: 700; color: var(--nt-danger-text); } .nt-stop-body { margin-top: 0.15rem; font-size: var(--nt-text-sm); color: var(--nt-text-secondary); } /* Næste is held back, never disabled: the server is what refuses, and a dead control the customer cannot press is a control that cannot explain itself. */ .nt-btn-held { background: var(--nt-neutral-tint); color: var(--nt-text-tertiary); box-shadow: none; } .nt-btn-held:hover { background: var(--nt-neutral-tint); color: var(--nt-text-secondary); } /* ── the jurist hand-off ─────────────────────────────────────────────── */ .nt-handoff { padding: var(--nt-space-5) var(--nt-space-6); border: 1px solid var(--nt-seal-border); border-radius: var(--nt-radius-lg); background: linear-gradient(180deg, color-mix(in srgb, var(--nt-seal) 7%, var(--nt-surface)), var(--nt-surface)); box-shadow: var(--nt-shadow-1); } .nt-handoff[data-state="arriving"] { animation: nt-handoff-in var(--nt-duration-slow) var(--nt-ease) both; } @keyframes nt-handoff-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .nt-handoff-eyebrow { display: flex; align-items: center; gap: 0.35rem; font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--nt-seal-text); } .nt-handoff-title { margin-top: 0.35rem; font-family: var(--nt-font-display); font-size: var(--nt-text-lg); font-weight: 600; color: var(--nt-text); } .nt-handoff-message { margin-top: var(--nt-space-3); color: var(--nt-text); line-height: 1.6; max-width: 60ch; } .nt-handoff-note { margin-top: var(--nt-space-3); font-size: var(--nt-text-sm); color: var(--nt-text-secondary); } .nt-handoff-included { margin-top: var(--nt-space-3); padding-top: var(--nt-space-3); border-top: 1px solid var(--nt-seal-border); font-size: var(--nt-text-sm); font-weight: 600; color: var(--nt-seal-text); } /* ── autosave ────────────────────────────────────────────────────────── */ .nt-autosave { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 1.2rem; font-size: var(--nt-text-xs); color: var(--nt-text-tertiary); opacity: 0; transition: opacity var(--nt-duration) var(--nt-ease); } .nt-autosave[data-state="saving"], .nt-autosave[data-state="saved"], .nt-autosave[data-state="failed"] { opacity: 1; } .nt-autosave-mark { width: 0.65rem; height: 0.65rem; border-radius: var(--nt-radius-full); flex: none; } .nt-autosave[data-state="saving"] .nt-autosave-mark { border: 1.5px solid var(--nt-border-strong); border-top-color: var(--nt-seal); animation: nt-spin 700ms linear infinite; } .nt-autosave[data-state="saved"] { color: var(--nt-ok-text); } .nt-autosave[data-state="saved"] .nt-autosave-mark { background: var(--nt-ok); box-shadow: 0 0 0 2px var(--nt-ok-soft); } .nt-autosave[data-state="failed"] { color: var(--nt-danger-text); font-weight: 600; } .nt-autosave[data-state="failed"] .nt-autosave-mark { background: var(--nt-danger); } @keyframes nt-spin { to { transform: rotate(360deg); } } /* ── the decide moment ───────────────────────────────────────────────── */ .nt-commit { display: block; } .nt-commit-panel { padding: var(--nt-space-6); border: 1px solid var(--nt-seal-border); border-radius: var(--nt-radius-lg); background: var(--nt-surface); box-shadow: var(--nt-shadow-2); } .nt-commit-panel[data-state="open"] { animation: nt-commit-in var(--nt-duration) var(--nt-ease) both; } .nt-commit-panel:focus-visible { outline: none; box-shadow: var(--nt-shadow-focus), var(--nt-shadow-2); } @keyframes nt-commit-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .nt-commit-eyebrow { font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--nt-seal-text); } .nt-commit-title { margin-top: 0.3rem; font-family: var(--nt-font-display); font-size: var(--nt-text-xl); font-weight: 600; line-height: 1.2; } .nt-commit-body { margin-top: var(--nt-space-3); color: var(--nt-text-secondary); max-width: 56ch; } .nt-commit-list { margin-top: var(--nt-space-4); display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--nt-text-sm); } .nt-commit-list li { display: flex; align-items: center; gap: 0.5rem; color: var(--nt-text); } .nt-commit-list svg { color: var(--nt-text-tertiary); flex: none; } .nt-commit-actions { margin-top: var(--nt-space-5); padding-top: var(--nt-space-4); border-top: 1px solid var(--nt-border-subtle); display: flex; flex-wrap: wrap; align-items: center; gap: var(--nt-space-3); } /* ── progress ────────────────────────────────────────────────────────── */ .nt-progress-card { padding: var(--nt-space-4) var(--nt-space-5); } .nt-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nt-space-4); } .nt-progress { margin-top: var(--nt-space-3); height: 4px; border-radius: var(--nt-radius-full); background: var(--nt-surface-sunken); overflow: hidden; } /* The one moving pixel in this product that is doing real work: it says "you moved", and it keeps saying it honestly when the TOTAL itself changes. */ .nt-progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--nt-seal); transition: width var(--nt-duration-slow) var(--nt-ease); } .nt-rail { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: var(--nt-space-3); } .nt-rail-step { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.22rem 0.6rem; border-radius: var(--nt-radius-full); font-size: var(--nt-text-xs); line-height: 1.4; border: 1px solid transparent; transition: background-color var(--nt-duration-fast) var(--nt-ease), color var(--nt-duration-fast) var(--nt-ease); } .nt-rail-here { background: var(--nt-seal); color: var(--nt-on-seal); font-weight: 600; } .nt-rail-done { background: var(--nt-ok-soft); color: var(--nt-ok-text); border-color: var(--nt-ok-border); } .nt-rail-done:hover { background: var(--nt-ok-tint); } .nt-rail-todo { background: var(--nt-surface-sunken); color: var(--nt-text-tertiary); } .nt-rail-tick { flex: none; } .nt-progress-note { margin-top: var(--nt-space-2); font-size: var(--nt-text-xs); color: var(--nt-text-tertiary); opacity: 0; max-height: 0; overflow: hidden; transition: opacity var(--nt-duration) var(--nt-ease), max-height var(--nt-duration) var(--nt-ease); } .nt-progress-note[data-state="shown"] { opacity: 1; max-height: 3rem; } /* ── review ──────────────────────────────────────────────────────────── */ .nt-review { display: flex; flex-direction: column; gap: var(--nt-space-5); } .nt-review-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nt-space-3); margin-bottom: 0.35rem; } .nt-review-card { border: 1px solid var(--nt-border-subtle); border-radius: var(--nt-radius); background: var(--nt-surface-raised); padding: var(--nt-space-3) var(--nt-space-4); } .nt-review-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--nt-space-3); padding: 0.3rem 0; } .nt-review-row + .nt-review-row { border-top: 1px solid var(--nt-border-subtle); } .nt-review-term { font-size: var(--nt-text-sm); color: var(--nt-text-tertiary); } .nt-review-value { margin: 0; font-size: var(--nt-text-sm); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } .nt-consequences { margin-top: var(--nt-space-6); padding-top: var(--nt-space-5); border-top: 1px solid var(--nt-border-subtle); } .nt-consequence-list { margin-top: var(--nt-space-2); display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--nt-text-base); } .nt-consequence-list li { display: flex; align-items: flex-start; gap: 0.5rem; } .nt-consequence-icon { flex: none; margin-top: 0.18rem; color: var(--nt-text-tertiary); } .nt-consequence-list-quiet { font-size: var(--nt-text-sm); color: var(--nt-text-secondary); } .nt-standing { margin-top: var(--nt-space-5); padding: var(--nt-space-4); border-radius: var(--nt-radius); background: var(--nt-surface-sunken); } .nt-standing-title { font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--nt-text-tertiary); } /* ══════════════════════════════════════════════════════════════════════ 26c. DOCUMENT TYPOGRAPHY — the .doc-* classes the country pack emits The pack's Liquid templates are SEMANTIC HTML with structural classes and nothing else: no inline styles, no