/* Minimal element defaults so specimens, cards and kits share one ground. */ *, *::before, *::after { box-sizing: border-box; } /* ---- SCROLLBARS · CD ruling kixlabs-scrollbars-v1, 24 September 2026 ------------------- Replaces the unruled html::-webkit-scrollbar block the site shipped on 2026-09-15. The design system and the site now carry the same rules. Never the browser default. ONE PATTERN, stated: generic ::-webkit-scrollbar-* rules, coloured from four custom properties. Chrome styles the viewport scrollbar from once any webkit scrollbar rule matches body, and a generic rule does, so there are no html::-webkit-* rules here (they would stop painting the moment this block exists). A container that needs a different bar re-points the properties on itself; its descendants inherit them. TRAP: in Chrome 121+ scrollbar-width or scrollbar-color on an element switches every ::-webkit-scrollbar rule for that element OFF and Chrome draws its own bar, arrows included. On it also switches off the rules on . The standard properties therefore appear ONLY inside the Firefox-only @supports block below. Do not add them anywhere else. (.kx-tabs keeps scrollbar-width:none on purpose: it hides its bar.) Geometry: 10px gutter, square thumb, 2px transparent inset (6px thumb) at rest, full 10px on hover and drag. No arrow buttons. Track undrawn, so the gutter reads as the ground in both themes. Radius 0 because KIX is square everywhere but Tag. Full accent, not 72%: alpha is not used for marks in this system, and 72% accent measures 2.44:1 on paper, below 1.4.11. Measured, thumb on ground: accent 3.18:1 paper / 5.95:1 ink; hover accent-press 4.04:1 paper / 4.69:1 ink. The 10px gutter is load-bearing: site.css measures the dialog chain against it. */ :root { --kx-scrollbar-size: 10px; --kx-scrollbar-inset: var(--kx-rule-thick); --kx-scrollbar-track: transparent; --kx-scrollbar-thumb: var(--kx-accent); --kx-scrollbar-thumb-hover: var(--kx-accent-press); } ::-webkit-scrollbar { width: var(--kx-scrollbar-size); height: var(--kx-scrollbar-size); background: var(--kx-scrollbar-track); } ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } ::-webkit-scrollbar-track { background: var(--kx-scrollbar-track); } ::-webkit-scrollbar-thumb { background-color: var(--kx-scrollbar-thumb); background-clip: padding-box; border: var(--kx-scrollbar-inset) solid transparent; border-radius: 0; } ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--kx-scrollbar-thumb-hover); border-width: 0; } ::-webkit-scrollbar-corner { background: transparent; } /* Firefox only. Thin, same colours; Firefox has no thumb hover form, which is degradation rather than defect. scrollbar-width is not inherited, hence the universal selector; any component rule (.kx-tabs) outranks it. */ @supports (-moz-appearance: none) { * { scrollbar-width: thin; scrollbar-color: var(--kx-scrollbar-thumb) var(--kx-scrollbar-track); } } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--kx-bg); color: var(--kx-text); font-family: var(--kx-font-body); font-size: var(--kx-size-body); line-height: var(--kx-leading-body); -webkit-font-smoothing: antialiased; text-wrap: pretty; } /* NOTE: there is deliberately no `overflow-x: hidden` here. It used to be, and it MASKED a real hero overflow at 375px — the page reported no horizontal scroll while the brand's own accent word ran 82px off-screen. Horizontal overflow must be solved in the layout, not hidden: wide content gets its own scroll container (see .kx-tabs), display type is sized and width-axis-stepped to fit its column (see --kx-display-width-hero), and grid tracks use minmax(0,1fr) so they can shrink. If a page scrolls sideways, that is a bug reporting itself correctly. */ ::selection { background: var(--kx-selection-bg); color: var(--kx-selection-fg); } a { color: var(--kx-text); text-decoration: none; border-bottom: var(--kx-hairline) solid var(--kx-rule-mid); transition: border-color var(--kx-dur-fast) var(--kx-ease); } /* A theme swap is a token swap, not an interaction — it must never animate. Colour is therefore not transitioned on links, and hosts should set data-kx-theme-switching on for one frame around the flip to suppress every other transition. Without this, a component that re-renders during the flip restarts its colour transition each frame and freezes on the outgoing theme's value. */ [data-kx-theme-switching] *, [data-kx-theme-switching] *::before, [data-kx-theme-switching] *::after { transition: none !important; } a:hover { color: var(--kx-text-accent); border-bottom-color: var(--kx-accent); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: var(--kx-focus-ring); outline-offset: var(--kx-focus-offset); } .kx-display { font-family: var(--kx-font-display); font-weight: var(--kx-weight-black); font-variation-settings: "wdth" var(--kx-display-width); text-transform: uppercase; letter-spacing: var(--kx-track-display); line-height: var(--kx-leading-display); } /* Hero modifier: full expansion, tighter tracking, and the width axis steps in at small viewports so an unbreakable word can never exceed its column. Use this for any --kx-size-hero string rather than hand-setting the axis. */ .kx-display--hero { font-variation-settings: "wdth" var(--kx-display-width-hero); letter-spacing: var(--kx-track-hero); } .kx-label { font-family: var(--kx-font-mono); font-size: var(--kx-size-label); text-transform: uppercase; letter-spacing: var(--kx-track-label); font-weight: var(--kx-weight-medium); } .kx-lead { font-size: var(--kx-size-lead); line-height: var(--kx-leading-body); max-width: var(--kx-measure); }