/* dominikdrag.com · shared system (/assets/site-20261025/site.css) Every page of the preview loads this file, then its own stylesheet for what only it needs: (home.css, consulting.css …) (only on pages with a run trace) (every page) Page rules go in the page file; anything a second page needs moves here. HOUSE RULES No eyebrows or kickers, no 01/02 numbering, no "On this page" strips, no hairlines as page structure (space and tone steps instead; the trace, tables and form fields are exempt), no monospace outside [data-ui] and code, no tiny tracked capitals, no resting shadows (a thing that truly floats may have one), no pill chips for plain facts, no icons in tinted squares, one arrow glyph per screen at most, headings in sentence case without a full stop and two lines or fewer. TOKENS Roles, never raw hex in page files: --bg (ground) --tone (one step from the ground: fields, panels) --tone-2 (second step: hover, pressed) --ink --ink-2 (secondary) --ink-3 (notes) --line-2 (link underlines) --rule (hairline, trace and tables only) --on-ink (text on an ink fill) --focus --error --ok. Lanes: --human --human-ink --lead --plan --build --build-2 --verify --verify-2 --harness --fail --warn, --on-bar / --on-bar-warn (label on a bar). Type: --display --sans --mono (trace data only). Sizes: --t-display --t-section --t-item, body 18px (17 on phones), small 15. Motion: --ease-out (UI) --ease-in-out (things that travel) --ease-expo (section entrances). Layout: --margin --gutter --gap-sec --head-h. GROUNDS .on-paper (white field) and .on-dark (ink field) re-derive every token above, the lane palette included, so any component inside them (buttons, links, form, trace) adapts by itself. Page ground is the default. A dark field also turns the sticky header dark while under it. LAYOUT .wrap (page margins, max 1680) · .grid (12 columns) · .sec (section on the page ground, gap above) · .band (full-width field: add .on-paper or .on-dark) · .panel (rounded surface) · .split (heading left 7 cols, text right 5 cols, bottom-aligned) · .lead (statement under a heading, max 46ch) · .stack (vertical rhythm for prose). COMPONENTS .btn (round, ink) .btn-sm · .text-link (.quiet) · .inline-link (a button that reads as a link) · .replay (button that plays a run in a trace: data-replay="key" data-replay-target="#id") · .list (square-bullet list) · .links (row of text links) · .figs (big numbers with a line) · .ico (inline SVG icon family: 24px grid drawn at 32px, stroke 2, round caps and joins, currentColor; draw new icons to the same rules) · .points/.point (a heading with its icon hung in the margin, text under the heading; .point-lead for the main one) · .index (names with one plain line each, in columns) · [data-showcase] (a list of [data-showcase-item] rows that drives a .stage of .stage-slide pictures: tinted field, floating picture, blur crossfade; a swipeable strip on phones; behaviour in page.js; markup in the home page's #apps section). CHROME Copy the
and