/* hiddenprimary.ch — Swiss Refined
Typography: IBM Plex Sans (UI) + IBM Plex Mono (data/code)
Palette: warm neutrals + Swiss red accent
*/
/* ---------------------------------------------------------------- */
/* Fonts (self-hosted — no third-party requests, revDSG-safe) */
/* ---------------------------------------------------------------- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('/static/fonts/ibm-plex-sans-300.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/ibm-plex-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/ibm-plex-mono-600.woff2') format('woff2'); }
/* ---------------------------------------------------------------- */
/* Tokens */
/* ---------------------------------------------------------------- */
:root {
--bg: #f7f7f5;
--surface: #ffffff;
--surface-2: #f0efec;
--surface-dark: #1a1a1a;
--border: #ddd9d3;
--border-heavy: #1a1a1a;
--text: #1a1a1a;
--text-2: #555;
--text-3: #666666; /* muted but still WCAG AA (≥4.5:1) on --bg, white AND --surface-2 (table headers, badge-muted) */
--text-inv: #f7f7f5;
--red: #d93025;
--red-light: #fce8e6;
--red-dark: #b71c1c;
--green: #1e8e3e;
--green-light: #e6f4ea;
--amber: #b25b00; /* 4.46:1 on --amber-light — NOT enough for small text; use --amber-text there */
--amber-light: #fef7e0;
--blue: #1a73e8;
--blue-light: #e8f0fe;
/* Small-text-on-tinted-chip colors. The brand hues above keep serving large
text, borders and status dots (non-text needs only 3:1); these darkened
variants are for SMALL text on the matching *-light / --surface-2
backgrounds. Badge text is ~9px at weight 600, so the WCAG large-text
exemption does not apply and 4.5:1 is the floor. Ratios are pinned by
TestBadgeTextContrastMeetsWCAGAA (internal/handler/portal/ui_contrast_test.go). */
--green-text: #177a33; /* 4.78:1 on --green-light, 4.72:1 on --surface-2 */
--red-text: #c02a20; /* 4.96:1 on --red-light, 5.08:1 on --surface-2 */
--amber-text: #a85600; /* 4.90:1 on --amber-light */
--blue-text: #1566cc; /* 4.82:1 on --blue-light */
/* The accent used for "you are here" markers. Was referenced by
.sidebar li a.active without ever being defined, which silently dropped
that rule's inset bar (an undefined var() invalidates the declaration). */
--accent: var(--red);
--font: 'IBM Plex Sans', -apple-system, sans-serif;
--mono: 'IBM Plex Mono', monospace;
--radius: 6px;
--shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
--shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
--shadow-lg: 0 12px 40px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-padding-top: 4.5rem; /* sticky nav must not cover anchor targets */ }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; }
/* Links are unstyled by default: nav items, cards, tab bars, sidebar entries
and .btn anchors are all and must not be underlined. Anything that is a
link INSIDE a block of running text opts in with .link instead — WCAG 2.1
SC 1.4.1 (failure F73) forbids colour as the only distinction unless the
link reaches 3:1 against the surrounding copy, which no accent on this
palette does. `.link.text-muted` keeps the underline and takes the grey (the
utility is declared later in this file, so it wins the colour). */
a { color: inherit; text-decoration: none; }
.link { color: var(--red-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.link:hover, .link:focus-visible { text-decoration-thickness: 2px; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 2rem; }
/* Portal pages carry wide data tables; the marketing pages keep the narrower
measure that the type is designed for. */
.container-wide { max-width: 1400px; }
/* For cells whose value is meaningless when broken across lines. */
.nowrap { white-space: nowrap; }
.section-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); font-weight: 600; margin-bottom: 1.75rem; }
/* Skip link: first focusable element, visible only on keyboard focus */
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--text); color: white;
padding: .6rem 1rem; border-radius: 0 0 6px 0;
font-size: .8rem; font-weight: 600;
}
.skip-link:focus { left: 0; }
/* Admin impersonation banner */
.impersonation-banner {
background: var(--red); color: white; text-align: center;
padding: .4rem; font-size: .8rem; font-weight: 600;
position: relative; z-index: 101;
}
/* The shipped exit control is an (class .impersonation-exit-link): only a
server-side round trip can clear the HttpOnly session cookie, so the