csaf-crud 1.5.26

/*
 * SPDX-License-Identifier: Apache-2.0
 * SPDX-FileCopyrightText: 2026 ndaal Gesellschaft für Sicherheit in der Informationstechnik mbH & Co KG, Cologne
 * SPDX-FileCopyrightText: Author: Pierre Gronau <Pierre.Gronau@ndaal.eu>
 */

/* csaf-crud base layer: bundled fonts and element defaults.
 *
 * This is the only place element (type) selectors are allowed, because the
 * server-rendered pages and the 49 translation tables emit plain <p>, <li>,
 * <code>, <th>, <td> and form controls that carry no class. The stylelint
 * override for **\/base/**\/*.css permits that; components live in
 * ../csaf-ui.css and use classes only. All colours come from tokens.
 */

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/roboto/roboto-regular.ttf') format('truetype');
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/roboto/roboto-bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/roboto-mono/roboto-mono-regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/roboto-mono/roboto-mono-bold.ttf') format('truetype');
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvb;
  margin: 0;
  background: var(--ndaal-bg);
  color: var(--ndaal-text-primary);
  font-family: var(--ndaal-font-sans);
  font-size: var(--ndaal-text-base);
  font-weight: 400;
  line-height: var(--ndaal-leading-base);
}

/* ---- Headings: type scale from skills/ndaal-design § Typography ---- */
h1,
h2,
h3,
h4 {
  margin-block: 0 var(--ndaal-space-4);
  line-height: var(--ndaal-leading-tight);
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 {
  font-size: var(--ndaal-text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--ndaal-text-2xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

h3 {
  font-size: var(--ndaal-text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

h4 {
  font-size: var(--ndaal-text-lg);
  font-weight: 600;
  line-height: 1.45;
}

p {
  margin-block: 0 var(--ndaal-space-3);
}

a {
  color: var(--ndaal-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 0.15em;
}

small {
  font-size: var(--ndaal-text-sm);
}

hr {
  margin-block: var(--ndaal-space-4);
  border: 0;
  border-block-start: 1px solid var(--ndaal-border-decorative);
}

/* ---- Code and identifiers: the mono face, never letter-spaced ---- */
code,
kbd,
samp,
pre {
  font-family: var(--ndaal-font-mono);
  font-size: var(--ndaal-text-sm);
}

code {
  overflow-wrap: anywhere;
}

/* An identifier is never hyphenated: `csaf_securi-ty_advisory` is a different
 * string to a reader and to a copy-paste. */
code,
kbd,
samp {
  hyphens: none;
}

pre {
  margin: 0;
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ---- Tables ---- */
table {
  inline-size: 100%;
  border-collapse: collapse;
}

/* A data table inside a scroll region (.table-scroll in csaf-ui.css) keeps a
 * readable width: below it the region scrolls instead of squeezing the long
 * columns into a few letters per line. A type selector, so it lives here. */
.table-scroll > table {
  min-inline-size: 36rem;
}

caption {
  padding-block: var(--ndaal-space-2);
  font-weight: 600;
  text-align: start;
}

th,
td {
  padding: var(--ndaal-space-2) var(--ndaal-space-3);
  border-block-end: 1px solid var(--ndaal-border-decorative);
  font-size: var(--ndaal-text-sm);
  overflow-wrap: anywhere;
  text-align: start;
  vertical-align: top;
  hyphens: auto;
}

th {
  background: var(--ndaal-surface);
  color: var(--ndaal-text-secondary);
  font-weight: 700;
  letter-spacing: 0.05em;
  overflow-wrap: break-word;
  text-transform: uppercase;
}

tr:hover td {
  background: var(--csaf-row-hover);
}

/* ---- Forms ---- */
label {
  display: block;
  margin-block-end: var(--ndaal-space-1);
  font-size: var(--ndaal-text-sm);
  font-weight: 600;
}

fieldset {
  min-inline-size: 0;
  margin: 0 0 var(--ndaal-space-4);
  padding: var(--ndaal-space-3) var(--ndaal-space-4);
  border: 1px solid var(--ndaal-border-decorative);
  border-radius: var(--ndaal-radius-md);
}

legend {
  padding-inline: var(--ndaal-space-2);
  font-weight: 600;
}

input:not([type]),
input[type='text'],
input[type='number'],
input[type='url'],
input[type='email'],
input[type='password'],
input[type='search'],
select,
textarea {
  inline-size: 100%;
  min-block-size: var(--ndaal-target-min);
  padding: var(--ndaal-space-2) var(--ndaal-space-3);
  border: 1px solid var(--ndaal-border-interactive);
  border-radius: var(--ndaal-radius-sm);
  background: var(--ndaal-surface-raised);
  color: var(--ndaal-text-primary);
  font: inherit;
}

textarea {
  min-block-size: 8rem;
  font-family: var(--ndaal-font-mono);
  font-size: var(--ndaal-text-sm);
  resize: block;
}

/* Divergence from ndaal-tokens.css: the native box stays 24 px and the
 * wrapping <label> (see .check-row in csaf-ui.css) is the 44 px target. A
 * 44 px native checkbox is a 44 px glyph, which is not usable. */
input[type='checkbox'],
input[type='radio'] {
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  min-inline-size: 1.5rem;
  min-block-size: 1.5rem;
  margin: 0;
  accent-color: var(--ndaal-primary);
}

/* A label that wraps a checkbox or radio is the 44 px pointer target. */
label:has(> input[type='checkbox']),
label:has(> input[type='radio']) {
  display: flex;
  align-items: center;
  gap: var(--ndaal-space-3);
  min-block-size: var(--ndaal-target-min);
  font-weight: 400;
}

button {
  font: inherit;
}

/* ---- Translated rich text: lists and inline code inside cards ---- */
.card p,
.prose p {
  margin-block: 0 var(--ndaal-space-3);
}

.card ul,
.card ol,
.prose ul,
.prose ol {
  margin-block: 0 var(--ndaal-space-3);
  padding-inline-start: var(--ndaal-space-6);
}

.card li,
.prose li {
  margin-block-end: var(--ndaal-space-1);
}

.card,
.prose {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ---- Print: repeat table headers, show link targets, drop chrome ---- */
@media print {
  thead {
    display: table-header-group;
  }

  tr {
    break-inside: avoid;
  }

  a[href^='https']::after {
    content: ' (' attr(href) ')';
    font-size: var(--ndaal-text-sm);
  }
}