/* Siglos ISMS console — stylesheet Status: draft | Version: 0.4.0 | Owner: Moheb | Reviewer: PENDING Controls: ISO 27001 A.8.28 (Secure coding) Dense, quiet, legible. This is a tool people open every morning to find out what is waiting on them; it is not a marketing page. Colour carries meaning (overdue, blocked, effective) and is used nowhere decorative. --------------------------------------------------------------------------- DESIGN LANGUAGE — inherited from the public sites (build u52) --------------------------------------------------------------------------- Tokens are taken from cloudflare-deploy-v2/index.html (sigloscard.ch, u52), which is the only Siglos file that defines a full light theme. siglos.ch (siglos-finance-corporate/index.html) carries the same gold ramp and the same font stack — its own comment says the naming is "mirrored deliberately from sigloscard.ch so the two files stay copy-paste compatible". NAMING TRAP — READ THIS BEFORE EDITING. The public sites invert the usual meaning: --ink = the BACKGROUND --paper = the TEXT This console uses the conventional meaning (--ink is text) and has 200+ rules depending on it. So the public palette is mapped onto this file's names rather than copied. Do not paste a :root block from the public sites into this file: every colour in the console would invert. THEME SWITCHING WITHOUT JAVASCRIPT. The console sends `Content-Security-Policy: script-src 'none'`, so the public sites' JS theme toggle cannot be reused. Instead: 1. No preference stored -> follow the operating system (@media prefers-color-scheme). 2. Explicit choice -> the server writes a `theme` cookie and stamps , which wins over the media query. The toggle is a form POST to /theme. No script, no flash of wrong theme, and the choice survives a hard refresh. */ /* ------------------------------------------------------------------ fonts */ /* Self-hosted, not fetched from Google. Three reasons, in order of weight: 1. `font-src 'self'` keeps the CSP tight — no third-party origin. 2. A runtime call to fonts.gstatic.com would make Google a sub-processor receiving the IP address of every ISMS user, which then belongs in the DORA Register of Information and needs a DPA. Self-hosting avoids the entire question. 3. The console must render correctly on a restricted network. The .woff2 files are fetched once at Docker build time — see Dockerfile. */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/source-sans-pro-400.woff2') format('woff2'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/source-sans-pro-600.woff2') format('woff2'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/source-sans-pro-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'); } /* Source Serif 4 is used for exactly one thing — the "Siglos" wordmark — which is the same restraint the public sites apply. */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/source-serif-4-600.woff2') format('woff2'); } /* ------------------------------------------------------------------ tokens */ :root { --serif: 'Source Serif 4', Georgia, serif; /* wordmark only */ --sans: 'Source Sans Pro', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius: 4px; /* u52 uses --r:4px — tighter than the old 7px */ --radius-lg: 6px; /* Gold ramp — identical in both public sites. */ --gold-hi: #fff2c9; --gold: #e7c165; --gold-mid: #c79a34; --gold-lo: #8a6a1f; --gold-deep: #6b4f14; } /* ---------- DARK (default, matching the public sites) ---------- */ :root { --bg: oklch(0.16 0.01 265); --bg-glow: rgba(231, 193, 101, .07); --surface: oklch(0.225 0.012 265); --surface-2: oklch(0.265 0.013 265); --line: oklch(0.33 0.012 265); --line-2: oklch(0.285 0.012 265); --ink: oklch(0.975 0.004 90); /* public --paper */ --ink-2: oklch(0.74 0.01 265); /* public --silver */ --ink-3: oklch(0.60 0.012 265); /* public --neutral, lifted for contrast */ --accent: #e7c165; --accent-ink:#1b1d23; /* text on a gold fill */ --accent-2: rgba(231, 193, 101, .13); --good: oklch(0.75 0.15 150); --good-bg: rgba(64, 190, 130, .13); --warn: #e7c165; --warn-bg: rgba(231, 193, 101, .13); --bad: #e8837c; --bad-bg: rgba(181, 52, 44, .20); --info: oklch(0.78 0.01 265); --info-bg: rgba(167, 170, 177, .12); --muted: oklch(0.66 0.012 265); --muted-bg: rgba(255, 255, 255, .07); --shadow: 0 1px 2px rgba(0,0,0,.35); color-scheme: dark; } /* ---------- LIGHT ---------- */ /* Values from u52's [data-theme="light"] block. Gold is darkened there (--gold-hi:#9c6f1c, --gold:#b1841e) because the light ramp is unreadable on paper; the same substitution is made here. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f6f4ef; --bg-glow: rgba(231, 193, 101, .16); --surface: #ffffff; --surface-2: #faf8f2; --line: #e5e1d7; --line-2: #efece5; --ink: #1b1d23; --ink-2: #4a4f57; --ink-3: #6b7079; --accent: #9c6f1c; --accent-ink:#ffffff; --accent-2: rgba(177, 132, 30, .12); --good: #1f7a4d; --good-bg: #e6f4ec; --warn: #8a6a1f; --warn-bg: #faf1dc; --bad: #8f2b23; --bad-bg: #fbeae8; --info: #5a6570; --info-bg: #eef0f2; --muted: #6b7079; --muted-bg: #f1efe9; --shadow: 0 1px 2px rgba(27,29,35,.06); color-scheme: light; } } /* Explicit choice overrides the OS. Duplicated rather than nested so that a browser without :is() support still applies it. */ :root[data-theme="light"] { --bg: #f6f4ef; --bg-glow: rgba(231, 193, 101, .16); --surface: #ffffff; --surface-2: #faf8f2; --line: #e5e1d7; --line-2: #efece5; --ink: #1b1d23; --ink-2: #4a4f57; --ink-3: #6b7079; --accent: #9c6f1c; --accent-ink:#ffffff; --accent-2: rgba(177, 132, 30, .12); --good: #1f7a4d; --good-bg: #e6f4ec; --warn: #8a6a1f; --warn-bg: #faf1dc; --bad: #8f2b23; --bad-bg: #fbeae8; --info: #5a6570; --info-bg: #eef0f2; --muted: #6b7079; --muted-bg: #f1efe9; --shadow: 0 1px 2px rgba(27,29,35,.06); color-scheme: light; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; color: var(--ink); font: 400 14px/1.55 var(--sans); -webkit-font-smoothing: antialiased; /* The gold wash from the public sites, at a fraction of the intensity. On a page of tables it should be barely perceptible — enough to feel related to siglos.ch, not enough to compete with status colour. */ background: radial-gradient(1100px 620px at 82% -12%, var(--bg-glow), transparent 60%), var(--bg); background-attachment: fixed; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code, .mono { font-family: var(--mono); font-size: .92em; } ::selection { background: var(--accent-2); color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ---------------------------------------------------------------- shell */ .shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; } .sidebar { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { display: flex; gap: 10px; align-items: center; padding: 18px 16px 16px; color: var(--ink); } .brand:hover { text-decoration: none; } .brand__mark { width: 30px; height: 30px; border-radius: var(--radius); background: linear-gradient(150deg, var(--gold-hi), var(--gold) 45%, var(--gold-mid)); color: #2a2109; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 16px; letter-spacing: -.02em; } .brand__text { display: flex; flex-direction: column; line-height: 1.25; } /* The wordmark is the one place Source Serif 4 appears, exactly as on the public sites. */ .brand__text strong { font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: -.01em; } .brand__text span { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; } .nav { flex: 1; overflow-y: auto; padding: 4px 8px; } .nav__group { margin-bottom: 14px; } .nav__grouplabel { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); padding: 6px 8px 4px; font-weight: 600; } .nav__link { display: block; padding: 6px 8px; border-radius: var(--radius); color: var(--ink-2); font-size: 13.5px; margin-bottom: 1px; border-left: 2px solid transparent; } .nav__link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } .nav__link.is-active { background: var(--accent-2); color: var(--accent); font-weight: 600; border-left-color: var(--accent); } .sidebar__foot { border-top: 1px solid var(--line); padding: 12px 14px; } .whoami__name { font-weight: 600; font-size: 13px; } .whoami__meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; word-break: break-all; } .whoami { margin-bottom: 10px; } .sidebar__note { font-size: 10.5px; color: var(--ink-3); line-height: 1.45; margin: 10px 0 0; } .sidebar__actions { display: flex; gap: 6px; align-items: center; } /* Theme toggle — a form button, because script-src is 'none'. */ .themetoggle { display: inline-flex; } .themetoggle button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; font-size: 11.5px; font-family: inherit; font-weight: 550; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; } .themetoggle button:hover { color: var(--ink); border-color: var(--accent); } .themetoggle svg { width: 12px; height: 12px; fill: currentColor; } .main { padding: 0 28px 56px; max-width: 1220px; } /* ---------------------------------------------------------------- banners */ .banner { margin: 14px 0 0; padding: 9px 13px; border-radius: var(--radius); font-size: 12.5px; border: 1px solid; } .banner--danger { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); } .banner--warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); } .banner code { background: var(--muted-bg); padding: 1px 4px; border-radius: 3px; } /* ---------------------------------------------------------------- header */ .pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 26px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; } .pagehead h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; } .pagehead__sub { margin: 5px 0 0; color: var(--ink-3); font-size: 13px; max-width: 68ch; } .pagehead__actions { display: flex; gap: 8px; flex-shrink: 0; } /* ---------------------------------------------------------------- cards */ .grid { display: grid; gap: 14px; } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1080px) { .grid--4 { grid-template-columns: repeat(2,1fr);} .grid--3,.grid--2 { grid-template-columns: 1fr; } } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .card__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); } .card__head h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -.005em; } .card__head a { font-size: 12px; } .card__body { padding: 15px; } .card__body--flush { padding: 0; } .stat { padding: 15px; } .stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 600; } .stat__value { font-size: 30px; font-weight: 600; letter-spacing: -.03em; margin: 5px 0 0; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat__value.is-bad { color: var(--bad); } .stat__value.is-warn { color: var(--warn); } .stat__value.is-good { color: var(--good); } .stat__note { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; } /* ---------------------------------------------------------------- tables */ .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 600; padding: 9px 13px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; } .table td { padding: 9px 13px; border-bottom: 1px solid var(--line-2); vertical-align: top; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--surface-2); } .table td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); } .table .t-dim { color: var(--ink-3); } .table .t-wrap { max-width: 460px; } /* ---------------------------------------------------------------- pills */ .pill { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; border: 1px solid transparent; } .pill--good { background: var(--good-bg); color: var(--good); } .pill--warn { background: var(--warn-bg); color: var(--warn); } .pill--bad { background: var(--bad-bg); color: var(--bad); } .pill--info { background: var(--info-bg); color: var(--info); } .pill--muted { background: var(--muted-bg); color: var(--muted); } .pill--neutral { background: var(--muted-bg); color: var(--ink-2); } /* ---------------------------------------------------------------- buttons + forms */ .btn { display: inline-block; padding: 6px 12px; border-radius: var(--radius); font-size: 13px; font-weight: 600; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; font-family: inherit; line-height: 1.4; } .btn:hover { filter: brightness(1.08); text-decoration: none; } .btn--ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); } .btn--ghost:hover { background: var(--surface-2); color: var(--ink); filter: none; } .btn--sm { padding: 4px 9px; font-size: 12px; } .form { display: grid; gap: 12px; } .form__row { display: grid; gap: 5px; } .form__row label { font-size: 12px; font-weight: 600; color: var(--ink-2); } .form__hint { font-size: 11.5px; color: var(--ink-3); } .form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } input[type=text], input[type=number], input[type=date], select, textarea { width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-2); border-color: var(--accent); } textarea { min-height: 74px; resize: vertical; } .filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .filters select, .filters input { width: auto; min-width: 130px; } /* ---------------------------------------------------------------- misc */ .empty { padding: 30px 18px; text-align: center; color: var(--ink-3); } .empty p { margin: 0; font-size: 13px; } .empty__hint { margin-top: 6px !important; font-size: 12px !important; opacity: .85; } .sectionhead { margin: 30px 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .note { background: var(--accent-2); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--radius); padding: 11px 14px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 16px; } .note strong { color: var(--accent); } .matrix { border-collapse: collapse; font-size: 12px; } .matrix td, .matrix th { border: 1px solid var(--line); padding: 7px 9px; text-align: center; } .matrix th { background: var(--surface-2); font-size: 10.5px; color: var(--ink-3); } .matrix td.cell { font-weight: 600; font-variant-numeric: tabular-nums; } .cell--good { background: var(--good-bg); color: var(--good); } .cell--warn { background: var(--warn-bg); color: var(--warn); } .cell--bad { background: var(--bad-bg); color: var(--bad); } .bar { height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; min-width: 90px; } .bar__fill { height: 100%; background: var(--accent); } .bar__fill--good { background: var(--good); } .bar__fill--warn { background: var(--warn); } .doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 32px; box-shadow: var(--shadow); } .doc h1, .doc h2, .doc h3 { letter-spacing: -.015em; margin: 1.5em 0 .5em; } .doc h1 { font-size: 22px; margin-top: 0; } .doc h2 { font-size: 17px; border-bottom: 1px solid var(--line-2); padding-bottom: 5px; } .doc h3 { font-size: 14.5px; } .doc table { border-collapse: collapse; font-size: 13px; margin: 1em 0; width: 100%; } .doc th, .doc td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; } .doc th { background: var(--surface-2); } .doc pre { background: var(--surface-2); border: 1px solid var(--line); padding: 11px 13px; border-radius: var(--radius); overflow-x: auto; font-size: 12.5px; } .doc code { background: var(--muted-bg); padding: 1px 4px; border-radius: 3px; } .doc pre code { background: none; padding: 0; } .doc blockquote { margin: 1em 0; padding: 8px 14px; border-left: 3px solid var(--accent); background: var(--accent-2); border-radius: 0 var(--radius) var(--radius) 0; } .doc blockquote p { margin: .3em 0; } .doc hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; } .metabar { display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 15px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; font-size: 12.5px; } .metabar div span { color: var(--ink-3); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .body--centred { display: grid; place-items: center; min-height: 100vh; padding: 20px; background: radial-gradient(900px 500px at 50% -10%, var(--bg-glow), transparent 60%), var(--bg); } .errorcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 40px; max-width: 520px; text-align: center; box-shadow: var(--shadow); } .errorcard__code { font-size: 42px; font-weight: 600; color: var(--ink-3); letter-spacing: -.03em; } .errorcard h1 { font-size: 19px; margin: 6px 0 10px; } .errorcard p { color: var(--ink-2); font-size: 13.5px; } .errorcard__detail { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; font-size: 12px; text-align: left; overflow-x: auto; } .errorcard .btn { margin-top: 16px; } /* ---------------------------------------------------------------- print An auditor asked for a page they could file. Print always uses the light palette regardless of the on-screen theme — a dark screenshot wastes toner and reads badly in a binder. */ @media print { :root { --bg: #fff; --bg-glow: transparent; --surface: #fff; --surface-2: #fafafa; --line: #ccc; --line-2: #e2e2e2; --ink: #000; --ink-2: #333; --ink-3: #555; --accent: #6b4f14; --accent-2: #f5efe0; --shadow: none; } body { background: #fff; } .sidebar, .pagehead__actions, .themetoggle { display: none; } .shell { grid-template-columns: 1fr; } .main { max-width: none; padding: 0; } .card, .doc { break-inside: avoid; } } /* Users who ask for less motion get none. Nothing here animates today; this is a standing guard so a future addition does not have to remember. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }