/* =========================================================================== THE PALETTE — one file, identical in sys1-yard-console and sys3-hris. The two systems grew their own. The yard console was teal and rust on warm paper; the HRIS was green on cool grey. Side by side in one console they read as two products, which is the thing the shared shell exists to stop. This settles it on the terminal's own colours — the navy and gold of the CICT mark — and it does so WITHOUT rewriting either system's component rules. Each app names its colours differently (the yard says --surface and --text, the HRIS says --card and --ink), so both vocabularies are defined here against one palette. Every existing rule keeps working and quietly changes colour together. It loads LAST, after each app's own stylesheet, because its whole job is to have the final word on what a colour is. Dark is a real design, not an inversion: navy is already dark, so on a dark ground the accent lifts to a lighter blue and the gold warms slightly. Both are checked against the ground they sit on, not against white. =========================================================================== */ /* The typefaces, self-hosted. Both systems set type the same way and neither fetches anything from anywhere — which is what lets the policy keep font-src and style-src at 'self' with no exceptions, and what keeps the gate terminal working when the connection is not. */ @import url("fonts/faces.css"); :root { /* The mark's own two colours, and the only place they are written down. */ --cict-navy: #17275c; --cict-navy-lift: #24407f; --cict-gold: #c8a233; --cict-gold-wash: #f6ecd2; --cict-ground: #f6f7fa; --cict-card: #ffffff; --cict-line: #dfe3ec; --cict-line-soft: #eef1f6; --cict-ink: #141a2b; --cict-ink-soft: #5a6478; --cict-ink-faint: #8b93a5; --cict-accent-wash: #e7ecf8; --cict-warn: #8a5a12; --cict-warn-wash: #fbf0d9; --cict-bad: #9a3626; --cict-bad-wash: #fbeae7; --cict-good: #2f6b4f; --cict-good-wash: #e6f0ea; /* --- what the HRIS calls things ------------------------------------- */ --ink: var(--cict-ink); --ink-soft: var(--cict-ink-soft); --ink-faint: var(--cict-ink-faint); --ground: var(--cict-ground); --card: var(--cict-card); --line: var(--cict-line); --line-soft: var(--cict-line-soft); --accent: var(--cict-navy); --accent-ink: #ffffff; --accent-wash: var(--cict-accent-wash); --warn: var(--cict-warn); --warn-wash: var(--cict-warn-wash); --bad: var(--cict-bad); --bad-wash: var(--cict-bad-wash); --radius: 6px; /* --- what the yard console calls things ------------------------------ */ --bg: var(--cict-ground); --surface: var(--cict-card); --surface-2: var(--cict-line-soft); --surface-3: var(--cict-line); --border: var(--cict-line); --text: var(--cict-ink); --text-muted: var(--cict-ink-soft); --text-faint: var(--cict-ink-faint); --accent-soft: var(--cict-accent-wash); --accent-2: var(--cict-gold); --accent-2-soft: var(--cict-gold-wash); --success: var(--cict-good); --success-soft: var(--cict-good-wash); --warning: var(--cict-warn); --warning-soft: var(--cict-warn-wash); --critical: var(--cict-bad); --critical-soft: var(--cict-bad-wash); --info: var(--cict-navy-lift); --info-soft: var(--cict-accent-wash); --extreme: #6b3fa0; --extreme-soft: #ece4f6; --muted: var(--cict-ink-soft); --shadow: 0 1px 2px rgba(20,26,43,.06), 0 6px 20px -8px rgba(20,26,43,.18); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cict-navy: #8fa9e8; --cict-navy-lift: #a8bdf0; --cict-gold: #d9b84f; --cict-gold-wash: #342c16; --cict-ground: #10141f; --cict-card: #171d2c; --cict-line: #2a3349; --cict-line-soft: #202839; --cict-ink: #e9ecf4; --cict-ink-soft: #a3abbd; --cict-ink-faint: #767f94; --cict-accent-wash: #1d2944; --cict-warn: #d6a65a; --cict-warn-wash: #2c2417; --cict-bad: #e08a7c; --cict-bad-wash: #2e1d1a; --cict-good: #6fba8e; --cict-good-wash: #16281f; --accent-ink: #0d1322; --extreme: #b79ae0; --extreme-soft: #241b33; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px -8px rgba(0,0,0,.6); } } :root[data-theme="dark"] { --cict-navy: #8fa9e8; --cict-navy-lift: #a8bdf0; --cict-gold: #d9b84f; --cict-gold-wash: #342c16; --cict-ground: #10141f; --cict-card: #171d2c; --cict-line: #2a3349; --cict-line-soft: #202839; --cict-ink: #e9ecf4; --cict-ink-soft: #a3abbd; --cict-ink-faint: #767f94; --cict-accent-wash: #1d2944; --accent-ink: #0d1322; } /* --- type, the same in both systems ------------------------------------ The yard console already set these for itself; the HRIS set none of them. Naming them here means one answer rather than two. The display face is on h1 only. The HRIS uses h2 and h3 as small letter-spaced labels and a condensed display face at 12px is a worse label than the one it has; the yard console sets its own h2 and that rule still stands. */ body { font-family: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } h1 { font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; letter-spacing: .01em; } code, .mono, .num, .id, td.num, th.num { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; } /* --- the page, the same size in both systems ----------------------------- TWO THINGS MADE THE VIEW JUMP when moving between areas. The scrollbar. A page tall enough to scroll is 15px narrower than one that is not, so every margin moved as soon as a screen's content changed length — and moving between the Yard and the HRIS does exactly that. The gutter is reserved on every page now, scrolling or not, so the width never changes. It costs 15px that were already being spent half the time. The padding. The yard console set 30px at the sides and the HRIS 24px, so the first column of a table started six pixels apart depending on which system drew it. One value, named once. The width cap is the yard console's, which was already tuned: past about 1180px a table stops being easier to read and starts being harder, because the eye loses the row on the way across. */ html { scrollbar-gutter: stable; } main, .main { padding: 22px 28px 60px; max-width: 1180px; } /* Narrow screens. Both systems already agreed on this value; they each kept their own copy of it, and the rule above — later in the cascade and no less specific — was quietly overriding both. One copy. */ @media (max-width: 860px) { main, .main { padding: 16px 16px 48px; } } /* --- one format, both systems ------------------------------------------- The two systems were built weeks apart, and each quietly grew its own idea of how big a page title is, how dense a list is and what a button looks like. None of it mattered while they were two products. Behind one navigation it matters a great deal: every change of area looked like a change of product. Everything below is a SINGLE definition of something both systems have. It lives here, in the file they both load last, and the per-system stylesheets no longer set it — so there is one place to change it, and no way for the two to drift apart again without someone deleting this. Where they disagreed, the yard console's value won: it was tuned against these typefaces first, and the HRIS was running a point larger throughout. WHAT WAS DIFFERENT, measured: body text 14px vs 15px. Page title 27px uppercase vs 21px sentence case. Table text 13px vs 15px. Header cells 10.5px on a rule vs 12px on a grey band. Row padding 9/10 vs 10/14. Buttons gold and uppercase vs bordered and sentence case. */ /* The base size. Everything else is relative to it. */ body { font-size: 14px; line-height: 1.5; } /* The page title. Big Shoulders is condensed enough that 26px of it takes about the room 21px of the body face would — which is why the HRIS's 21px read as timid and the yard's 27px did not read as shouting. */ h1 { font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0; text-wrap: balance; } /* The line under the title. Both systems spell this one the same way, as a paragraph: the yard calls it .desc and the HRIS calls it .sub. The element is part of the selector on purpose. BOTH systems also use .sub for other things — a sub-heading inside a card, a second line in a table cell, a prompt on a handheld — and none of those is a

, so none of them is caught here. The yard calls it .desc and the HRIS calls it .sub, and both systems also use .sub for something else entirely: a sub-heading inside a card, a second line on a handheld screen. Only the one immediately after the page title is the standfirst, and only that one is styled here. */ p.sub, p.desc { font-size: 13.5px; color: var(--text-muted); max-width: 80ch; margin: 3px 0 0; } /* The yard's .topbar already carries the gap below the heading block; in the HRIS the standfirst is the last thing in it, so it carries its own. */ p.sub { margin-bottom: 22px; } /* Lists. The header is small capitals on a rule rather than on a grey band. The band is what gave away the one thing the two systems still disagree about — a card wrapping prose is padded, a card wrapping a list is flush — because you could see exactly where each card's inset began. */ table { font-size: 13.5px; } thead th { text-align: left; padding: 0 12px 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); background: none; border-bottom: 1px solid var(--border); white-space: nowrap; } tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--line-soft); } td.num, th.num { text-align: right; } /* A card. The chrome is one thing in both systems now; the padding is still each system's own — see F383. */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); } /* Buttons. One kind of each, under two names apiece: the yard writes .btn and .btn.secondary, the HRIS writes