/* ============================================================================= HrChronicle — base element styles. Loaded AFTER tokens.css. References semantic tokens only, never primitives. Logical properties throughout (margin-inline-start, never margin-left): the UI is LTR-only by decision, but logical properties cost nothing and keep an RTL skin open. ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { /* The canvas colour must be on too, or an over-scroll bounce shows white in dark mode before paints. */ background-color: var(--hrc-canvas); -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--hrc-canvas); color: var(--hrc-ink); font-family: var(--hrc-font); font-size: var(--hrc-density-text); line-height: var(--hrc-leading); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* -- flow ------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin-block: 0; font-weight: var(--hrc-weight-semibold); line-height: var(--hrc-leading-tight); letter-spacing: -0.01em; text-wrap: balance; } h1 { font-size: var(--hrc-text-2xl); } h2 { font-size: var(--hrc-text-xl); } h3 { font-size: var(--hrc-text-lg); } h4, h5, h6 { font-size: var(--hrc-density-text); } p, ul, ol, dl, figure, pre, table { margin-block: 0; } /* -- links ------------------------------------------------------------------ */ a { color: var(--hrc-accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover { color: var(--hrc-accent-hover); } /* -- code ------------------------------------------------------------------- */ code, kbd, samp, pre { font-family: var(--hrc-font-mono); font-size: 0.9em; } code { background-color: var(--hrc-neutral-soft); border-radius: var(--hrc-radius-xs); padding-inline: 0.35em; padding-block: 0.1em; } pre { overflow-x: auto; padding: var(--hrc-space-md); background-color: var(--hrc-surface-raised); border: 1px solid var(--hrc-border); border-radius: var(--hrc-radius-sm); } pre code { background: none; padding: 0; } hr { border: 0; border-block-start: 1px solid var(--hrc-border); margin-block: var(--hrc-space-lg); } /* -- media ------------------------------------------------------------------ */ img, svg, video, canvas { max-inline-size: 100%; block-size: auto; vertical-align: middle; } /* -- forms ------------------------------------------------------------------ */ input, button, textarea, select { font: inherit; color: inherit; } /* -- focus ------------------------------------------------------------------ WCAG 2.2 AA. `:focus-visible` only, so a mouse click does not leave a ring but keyboard navigation always does. Never remove this without replacing it. */ :focus-visible { outline: var(--hrc-focus-ring); outline-offset: var(--hrc-focus-offset); border-radius: var(--hrc-radius-xs); } /* -- standalone notice pages ------------------------------------------------ Pages served before (or instead of) a resolved tenant: the unknown-host 404, and any future maintenance or licence-expired page. They have no shell and no components, so they need one class that makes them readable on their own. */ .hrc-notice { max-inline-size: 40rem; margin-inline: auto; margin-block: var(--hrc-space-2xl); padding-inline: var(--hrc-space-md); } /* -- accessibility helpers -------------------------------------------------- */ .hrc-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Respect the OS setting. Motion is decoration here; nothing depends on it. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -- print ------------------------------------------------------------------ Grid print/PDF is the browser's own print plus this stylesheet — no PDF library (CLAUDE.md grid standard). Fleshed out with the grid in 3.4. */ @media print { html, body { background: #fff; color: #000; } .hrc-no-print { display: none !important; } }