/* ========================================================================== bright color, quiet sibling ("Werkzeug"): components. Load after bca-tokens.css and a stylesheet that provides the three house fonts; put class "bca" on . The rules this sheet encodes: - one accent per product, everything else ink, paper and white - 1 px lines, 6 px radius, a hairline instead of a hard offset - Anton only in the product name; headings in Atkinson 700 - states carry a small square and their word, as in the main skill ========================================================================== */ /* Base --------------------------------------------------------------------- */ .bca { margin: 0; background: var(--bca-paper); color: var(--bca-ink); font-family: var(--bca-font-text); font-size: var(--bca-size-body); line-height: var(--bca-leading); -webkit-font-smoothing: antialiased; } .bca *, .bca *::before, .bca *::after { box-sizing: border-box; } :where(.bca) h1, :where(.bca) h2, :where(.bca) h3 { margin: 0 0 .4em; font-family: var(--bca-font-text); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; color: var(--bca-ink); } :where(.bca) h1 { font-size: var(--bca-size-h1); } :where(.bca) h2 { font-size: var(--bca-size-h2); } :where(.bca) h3 { font-size: var(--bca-size-h3); } :where(.bca) p { margin: 0 0 .9em; max-width: var(--bca-measure); text-wrap: pretty; } :where(.bca) p:last-child { margin-bottom: 0; } :where(.bca) a { color: var(--bca-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } :where(.bca) a:where(:hover) { text-decoration-color: var(--bca-accent); text-decoration-thickness: 2px; } .bca :focus-visible { outline: 2px solid var(--bca-accent); outline-offset: 2px; } .bca ::selection { background: var(--bca-accent-soft); color: var(--bca-ink); } .bca ::placeholder { color: var(--bca-ink-quiet); opacity: 1; } :where(.bca) code, :where(.bca) kbd { padding: .05em .3em; background: var(--bca-sunken); border-radius: var(--bca-radius-sm); font-family: var(--bca-font-mono); font-size: .875em; } :where(.bca) :is(img, video) { max-width: 100%; height: auto; } :where(.bca) hr { width: 2rem; height: 2px; margin: var(--bca-space-6) 0; border: 0; background: var(--bca-accent); } :where(.bca) ul:not([class]) { padding-left: 1.1rem; list-style: square; } :where(.bca) ul:not([class]) > li::marker { color: var(--bca-accent); } .bca-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .bca-mono { font-family: var(--bca-font-mono); font-variant-numeric: tabular-nums; } .bca-quiet { color: var(--bca-ink-quiet); } /* Layout ------------------------------------------------------------------- */ .bca-wrap { max-width: calc(var(--bca-width) + 2 * var(--bca-gutter)); margin-inline: auto; padding-inline: var(--bca-gutter); } .bca-section { padding-block: var(--bca-space-8); } .bca-stack > * + * { margin-top: var(--bca-space-4); } /* The quiet echo of the four-colour band: one accent line above the app bar. */ .bca-accentline { height: 2px; background: var(--bca-accent); } /* The family mark, once, in the footer. */ .bca-familybar { height: 2px; background: linear-gradient(90deg, #ee318a 0 25%, #1dc3f3 25% 50%, #bfd535 50% 75%, #fed329 75% 100%); } /* App bar ------------------------------------------------------------------ */ .bca-top { position: sticky; top: 0; z-index: 50; background: var(--bca-surface); border-bottom: 1px solid var(--bca-line); } .bca-top__inner { display: flex; align-items: center; gap: var(--bca-space-4); min-height: 56px; max-width: calc(var(--bca-width) + 2 * var(--bca-gutter)); margin-inline: auto; padding-inline: var(--bca-gutter); } /* The product name is the only place where Anton appears. */ .bca-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; } .bca-brand::before { content: ""; width: 10px; height: 10px; background: var(--bca-accent); } .bca .bca-brand__name { margin: 0; font-family: var(--bca-font-name); font-size: 1.125rem; font-weight: 400; letter-spacing: .04em; line-height: 1; text-transform: uppercase; } .bca-brand__note { font-family: var(--bca-font-mono); font-size: var(--bca-size-label); color: var(--bca-ink-quiet); } .bca-nav { display: flex; align-items: center; gap: var(--bca-space-4); margin: 0 0 0 auto; padding: 0; list-style: none; } .bca-nav a { display: block; padding: 6px 0; border-bottom: 2px solid transparent; color: var(--bca-ink-quiet); font-size: var(--bca-size-small); font-weight: 700; text-decoration: none; } .bca-nav a:hover { color: var(--bca-ink); } .bca-nav a[aria-current="page"] { color: var(--bca-ink); border-bottom-color: var(--bca-accent); } /* Phone: the menu drops under the name and scrolls sideways on its own, so the bar stays one line high and the page never scrolls with it. */ @media (max-width: 719.98px) { .bca-top__inner { flex-wrap: wrap; min-height: 0; padding-block: var(--bca-space-2); gap: var(--bca-space-2) var(--bca-space-3); } .bca-nav { order: 3; flex: 1 0 100%; margin: 0; gap: var(--bca-space-4); overflow-x: auto; scrollbar-width: none; } .bca-nav a { white-space: nowrap; } .bca-top .bca-btn { margin-left: auto; } } /* Label, heads ------------------------------------------------------------- */ .bca-label { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--bca-space-2); font-size: var(--bca-size-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bca-ink-quiet); } .bca-label::before { content: ""; width: 6px; height: 6px; background: var(--bca-accent); } .bca .bca-lede { max-width: var(--bca-measure); color: var(--bca-ink-quiet); font-size: 1rem; } /* Cards, rows -------------------------------------------------------------- */ .bca-card { padding: var(--bca-space-6); background: var(--bca-surface); border: 1px solid var(--bca-line); border-radius: var(--bca-radius); box-shadow: var(--bca-shadow); } .bca-card > :last-child { margin-bottom: 0; } .bca-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bca-space-3); margin-bottom: var(--bca-space-3); } .bca .bca-card__title { margin: 0; font-size: var(--bca-size-h3); } .bca-grid { display: grid; gap: var(--bca-space-3); grid-template-columns: minmax(0, 1fr); } @media (min-width: 620px) { .bca-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .bca-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* A list of things the tool watches. The accent appears on hover, as an edge. */ .bca-rows { margin: 0; padding: 0; list-style: none; background: var(--bca-surface); border: 1px solid var(--bca-line); border-radius: var(--bca-radius); overflow: hidden; } .bca-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bca-space-2) var(--bca-space-4); padding: var(--bca-space-3) var(--bca-space-4); border-bottom: 1px solid var(--bca-line); box-shadow: inset 3px 0 0 transparent; transition: background var(--bca-move) ease, box-shadow var(--bca-move) ease; } .bca-row:last-child { border-bottom: 0; } .bca-row:hover { background: var(--bca-sunken); box-shadow: inset 3px 0 0 var(--bca-accent); } .bca-row__main { flex: 1 1 14rem; min-width: 0; } .bca .bca-row__title { margin: 0; font-size: var(--bca-size-body); } .bca .bca-row__note { margin: 0; color: var(--bca-ink-quiet); font-size: var(--bca-size-small); } .bca-row__value { font-family: var(--bca-font-mono); font-variant-numeric: tabular-nums; font-size: var(--bca-size-small); } /* Buttons ------------------------------------------------------------------ */ .bca-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--bca-control); padding: 0 1rem; background: var(--bca-ink); border: 1px solid var(--bca-ink); border-radius: var(--bca-radius); color: var(--bca-surface); font-family: inherit; font-size: var(--bca-size-small); font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background var(--bca-move) ease, border-color var(--bca-move) ease, color var(--bca-move) ease; } .bca .bca-btn:hover { background: color-mix(in srgb, var(--bca-ink) 86%, var(--bca-surface)); color: var(--bca-surface); } .bca .bca-btn:active { transform: translateY(1px); } .bca-btn--ghost { background: var(--bca-surface); border-color: var(--bca-line-loud); color: var(--bca-ink); } .bca .bca-btn--ghost:hover { background: var(--bca-sunken); border-color: var(--bca-ink); color: var(--bca-ink); } .bca-btn--accent { background: var(--bca-accent); border-color: var(--bca-accent); color: var(--bca-on-accent); } .bca .bca-btn--accent:hover { background: color-mix(in srgb, var(--bca-accent) 86%, #111111); color: var(--bca-on-accent); } .bca-btn--danger { background: var(--bca-bad); border-color: var(--bca-bad); color: #ffffff; } .bca .bca-btn--danger:hover { background: color-mix(in srgb, var(--bca-bad) 85%, #111111); color: #ffffff; } .bca-btn--small { min-height: 32px; padding: 0 .7rem; font-size: var(--bca-size-label); } .bca-btn[disabled] { background: var(--bca-sunken); border-color: var(--bca-line); color: var(--bca-ink-quiet); cursor: not-allowed; } .bca-actions { display: flex; flex-wrap: wrap; gap: var(--bca-space-2); } /* Fields ------------------------------------------------------------------- */ .bca-field { display: grid; gap: .3rem; align-content: start; min-width: 0; } .bca-field > label { font-size: var(--bca-size-small); font-weight: 700; } .bca-field :is(input, select, textarea) { width: 100%; min-height: var(--bca-control); padding: .5rem .7rem; background: var(--bca-surface); border: 1px solid var(--bca-line-loud); border-radius: var(--bca-radius); color: var(--bca-ink); font: inherit; line-height: 1.35; caret-color: var(--bca-accent); } .bca-field textarea { min-height: 6rem; resize: vertical; } .bca-field :is(input, select, textarea):focus-visible { outline: 2px solid var(--bca-accent); outline-offset: 1px; border-color: var(--bca-accent); } .bca-field [aria-invalid="true"] { border-color: var(--bca-bad); } .bca .bca-field__hint { margin: 0; color: var(--bca-ink-quiet); font-size: var(--bca-size-small); } .bca .bca-field__error { margin: 0; color: var(--bca-bad-text); font-size: var(--bca-size-small); font-weight: 700; } /* One line that does one thing: field plus button. */ .bca-inline { display: flex; flex-wrap: wrap; gap: var(--bca-space-2); align-items: end; } .bca-inline .bca-field { flex: 1 1 16rem; } /* States ------------------------------------------------------------------- */ .bca-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .1rem .45rem; border: 1px solid var(--bca-line-loud); border-radius: var(--bca-radius-sm); font-size: var(--bca-size-label); font-weight: 700; white-space: nowrap; } .bca-chip::before { content: ""; width: 7px; height: 7px; background: var(--bca-ink-quiet); } .bca-chip--ok::before { background: var(--bca-ok); } .bca-chip--warn::before { background: var(--bca-warn); } .bca-chip--bad::before { background: var(--bca-bad); } .bca-chip--accent::before { background: var(--bca-accent); } /* A message keeps the family idea (colour plus word), tinted instead of full. */ .bca-note { padding: var(--bca-space-3) var(--bca-space-4); background: var(--bca-accent-soft); border: 1px solid var(--bca-accent-edge); border-left-width: 3px; border-radius: var(--bca-radius); color: var(--bca-ink); } .bca-note > :last-child { margin-bottom: 0; } .bca .bca-note__title { margin: 0 0 .15rem; font-size: var(--bca-size-body); font-weight: 700; } .bca-note--ok { background: var(--bca-ok-soft); border-color: var(--bca-ok); } .bca-note--warn { background: var(--bca-warn-soft); border-color: var(--bca-warn); } .bca-note--bad { background: var(--bca-bad-soft); border-color: var(--bca-bad); } .bca .bca-note--bad .bca-note__title { color: var(--bca-bad-text); } /* Table -------------------------------------------------------------------- */ .bca-table-wrap { overflow-x: auto; background: var(--bca-surface); border: 1px solid var(--bca-line); border-radius: var(--bca-radius); scrollbar-width: thin; } .bca-table { width: 100%; border-collapse: collapse; font-size: var(--bca-size-small); } .bca-table th, .bca-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--bca-line); text-align: left; vertical-align: top; } .bca-table thead th { font-family: var(--bca-font-mono); font-size: var(--bca-size-label); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--bca-ink-quiet); } .bca-table tbody tr:last-child > * { border-bottom: 0; } .bca-table tbody tr:hover { background: var(--bca-sunken); } .bca-num { text-align: right !important; font-family: var(--bca-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Nothing here yet --------------------------------------------------------- */ .bca-empty { display: grid; justify-items: center; gap: var(--bca-space-3); padding: var(--bca-space-12) var(--bca-space-4); text-align: center; } .bca-empty::before { content: ""; width: 14px; height: 14px; background: var(--bca-accent); } .bca .bca-empty p { max-width: 28rem; color: var(--bca-ink-quiet); } /* Footer ------------------------------------------------------------------- */ .bca-foot { margin-top: var(--bca-space-12); border-top: 1px solid var(--bca-line); background: var(--bca-surface); } .bca-foot__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bca-space-3); padding-block: var(--bca-space-4); font-size: var(--bca-size-small); color: var(--bca-ink-quiet); } .bca-foot__by { display: inline-flex; align-items: center; gap: .5rem; } .bca-foot__by img { display: block; height: 18px; width: auto; } .bca .bca-foot a { color: var(--bca-ink-quiet); } .bca .bca-foot a:hover { color: var(--bca-ink); } /* Motion, contrast, print --------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .bca *, .bca *::before, .bca *::after { transition: none !important; animation: none !important; } } @media (prefers-contrast: more) { .bca { --bca-line: var(--bca-line-loud); } :where(.bca) a { text-decoration-thickness: 2px; } } @media (forced-colors: active) { .bca-card, .bca-rows, .bca-note, .bca-btn, .bca-chip { border: 1px solid ButtonText; } .bca-label::before, .bca-brand::before, .bca-chip::before, .bca-empty::before { background: CanvasText; } .bca-accentline { border-top: 2px solid CanvasText; background: none; } } @media print { .bca-top, .bca-actions, .bca-foot { display: none !important; } .bca { background: #ffffff; } .bca-card, .bca-rows, .bca-note, .bca-table tr { break-inside: avoid; } }