/* * Pratimāna Matrix — the record's own rules. * * Loaded on every Matrix page immediately after pratimana.css, before * shell.css and workbench.css. pratimana.css is the kit the four Pratimāna * properties share byte for byte (assets/README.md, rule 1), so nothing in * it changes here; this file is where Matrix diverges from the kit, in the * way shell.css and workbench.css already do (rule 2: what only one * property renders lives in that property's own file). * * The direction it carries is the one the design review named Docket: * Matrix is the register where findings are numbered, dated, rated and * paid, so the page should read as a record, not a launch. Rules instead * of boxes; hue only where it means severity, report state or the sign * of money; ink for everything else; nothing decorative moves. Each * section below says which kit rule it overrides and why. */ /* ============================================================ 1. TOKENS The kit's anchors (--void, --text, --hairline and the semantic colours) stay exactly as they are, and so do the kit's type stacks: Matrix draws in the reader's system fonts like every other property, so no font is downloaded. --font-body is an alias for the kit's --font-display, which Matrix uses for headings and running text alike. ============================================================ */ :root{ /* The focus ring: a 2px ground gap, then a 2px ink ring. It is a box-shadow so it follows the radius and keeps its gap on an ink-filled button — and that has a price. box-shadow is one property, so anything else that draws a box-shadow on the same element (a "you are here" mark, the kit's frost, a hover reset to none) REPLACES the ring rather than sitting beside it. Such an element must draw its own shadow and then this one in its :focus-visible rule, or it has no focus indicator at all. ci/css-states.mjs fails the build when one does not. */ --ring:0 0 0 2px var(--void), 0 0 0 4px var(--text); --font-body:var(--font-display); /* --rule-strong — the head rule of a register and the edge of anything you can type into or press, the one rule that has to clear WCAG 1.4.11's 3:1 against its ground (#616161 on black is 3.4:1; #8A8A8A on white 3.5:1) — and color-scheme now come from the kit (pratimana.css), with the values Matrix used to set here. The kit's --hairline (.14 / .12) is for the lines between rows, where it is a separator and not an edge. */ /* The only fill on a page apart from the ground: under an input, a code block, held money or a destructive action. --panel is invisible against white, so the light theme maps it to the raised tone. */ --well:var(--panel); } [data-theme="light"]{ --well:var(--panel-raised); } /* ============================================================ 2. TYPE The kit sets h1-h3 at 800 with -0.02em of tracking, a launch-page weight. A record's title is 500 and untracked; the size carries the hierarchy. The scale on Matrix is 12 · 13 · 14 · 16 · 18 · 21 · 26 · 34, whole pixels only, as the kit's own comment asks. ============================================================ */ body{ font-family:var(--font-body); } h1, h2, h3{ font-weight:500; letter-spacing:0; } /* Tabular figures wherever a number might sit above another one: the system stacks Matrix draws in are proportional by default. Identifiers get the slashed zero only at 12px and up, where the slash still has room inside the counter on black. */ .mx-num, .mx-id, .mx-th, .mx-register td{ font-variant-numeric:tabular-nums; } .mx-id{ font-family:var(--font-mono); font-feature-settings:"zero"; } /* The kit's marketing rhythm is 96px above and below every section, which leaves the right half of a 1180px page empty above every block. A record breathes at 48px. */ section{ padding:48px 0; } /* The kit's masthead is wider than its content column so seven languages' worth of holding-company links would fit. The product bar that replaces them sits on the same 1180px as everything else. */ nav.wrap{ max-width:1180px; } /* The [MATRIX] mark's field is calculated to be exactly six cells wide, and a mono face's advances can round a hair past it, which dropped the last cell onto a second line. Nothing inside the mark may wrap. */ .brand-sub, .brand-sub .mx-field, .brand-sub .mx-text{ white-space:nowrap; } /* ============================================================ 3. INK, NOT BLUE The kit paints selection and focus in --blue; on Matrix blue means the NEW report state and nothing else. Focus is a 2px ink ring outside a 2px ground gap, so it stays visible on the ink-filled primary button as well as on the ground. The outline is kept transparent rather than none so forced-colours mode still draws one. ============================================================ */ ::selection{ background:rgba(var(--ink-rgb),.18); } :focus-visible, .btn:focus-visible, .wb-chip:focus-visible{ outline:2px solid transparent; outline-offset:0; box-shadow:var(--ring); } /* The first thing Tab reaches on every page: a way past the masthead, the mega-menu and (signed in) the rail, to the page's
. Off screen until it has focus, then an ink control in the corner. */ .skip-link{ position:absolute; top:12px; inset-inline-start:16px; z-index:1000; display:inline-flex; align-items:center; min-height:44px; padding:0 16px; background:var(--text); color:var(--void); border-radius:4px; font-family:var(--font-body); font-size:14px; font-weight:500; text-decoration:none; transform:translateY(-200%); } .skip-link:focus{ transform:none; } /* Text for assistive technology only: a register's caption, a heading a page needs for its outline but draws no other way. */ .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* ============================================================ 4. CONTROLS The kit's buttons lift and cast a shadow on hover, the light theme frosts every unfilled button into glass, and the pages grew one 999px mono pill that plays filter, toggle, pager and Delete. Three shapes replace it: a text-toggle, a button, and a field. All at 4px, none moving. (The kit's frost rule is matched at equal specificity and out-ranked by source order.) ============================================================ */ /* The masthead's current section. It was a two-line