/* ============================================================================ nordjouren-ui.css — Shared public UI layer (loaded on every layout page) ---------------------------------------------------------------------------- PURPOSE: One consistent, in-brand polish + component layer so the public site feels cohesive. This does NOT introduce a new colour theme. Every colour here references the EXISTING brand tokens defined in style.css :root (--heading-color #102529, --normal-dark-color #000, --primary-color #f8f8f8, --secondary-color #f5fbff, --note-text-color #47857F, etc.), with literal fallbacks equal to those same values. Radii / shadows reuse the brand's existing scale (card 15px, panel 20px, pill 300px, dark-CTA 24px; elevated shadow 0 0 45px rgba(0,0,0,.2)). Loaded AFTER the breakpoint files. New-page components are namespaced `.nj-` so they can never collide with existing rules. Global tweaks are intentionally light and never use !important (except the reduced-motion safety block). ============================================================================ */ :root{ /* Aliases to the established brand palette — no new hues introduced. */ --nj-ink: var(--heading-color, #102529); --nj-ink-soft: #3f5257; /* desaturated tint of #102529 for body copy */ --nj-black: var(--normal-dark-color, #000); --nj-surface: var(--normal-color, #fff); --nj-surface-2: var(--primary-color, #f8f8f8); --nj-surface-3: var(--secondary-color, #f5fbff); --nj-teal: var(--note-text-color, #47857F); --nj-border: #e7ecee; /* light neutral hairline (tint of ink) */ --nj-radius: 15px; /* brand card radius */ --nj-radius-lg: 20px; /* brand panel radius */ --nj-radius-pill:300px; --nj-shadow-sm: 0 4px 16px rgba(16,37,41,.06); --nj-shadow-md: 0 10px 30px rgba(16,37,41,.10); --nj-shadow-lg: 0 0 45px rgba(0,0,0,.14); /* softened brand elevated shadow */ --nj-ease: .2s ease; } /* --------------------------------------------------------------------------- 1. Global interaction polish (moved out of the layout's inline