/* Brand typography, per the brand manual (assets/branding/index.html) — which is the
canonical source, and this file did not follow it. It loaded Inter + JetBrains Mono
and called them "brand", justified as mirroring outreach/web: it aligned with a SIBLING
SURFACE instead of with the manual, and a copy of a copy is how a brand drifts.
The manual says, and now so does this file:
· IBM Plex Mono 600 — the wordmark (already baked into the logo SVG)
· IBM Plex Mono — code, ids, NCL
· IBM Plex Sans 500 — the tagline
· system font stack — every other UI element and all body text (so NO webfont for
body: the site's --font-sans already resolves to the system
stack, which is what the manual asks for — Inter was the drift)
The faces are SELF-HOSTED. The framework serves `style-src 'self' 'unsafe-inline';
font-src 'self' data:`, so a fonts.googleapis.com stylesheet is blocked outright — the
site loaded unstyled type in every browser that enforces it, and Brave never even sent
the request. fonts-ibm-plex.css and /fonts/*.woff2 are generated by
`just sync-brand-fonts`; the family list lives in scripts/build/sync-brand-fonts.nu.
@import must precede every style rule (comments excepted), so it stays at the top. */
@import url('/styles/fonts-ibm-plex.css');
/* Custom CSS file for static file serving example */
/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* The manual's system stack, verbatim. It was "Segoe UI" first — a Windows face leading
the stack on a brand whose manual prints -apple-system first. */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Typography — headings carry the brand, in the only way the brand allows.
*
* This was `color: #2c3e50` — a literal from the starter theme, with NO dark
* variant: on the dark canvas the headings were slate-on-slate, all but invisible.
*
* The wordmark is `Onto` in SILVER #C0CCD8 + `ref` in AMBER #E8A838, and neither is
* a heading colour on white: silver is 1.6:1 and amber 2.1:1 — amber fails even the
* 3:1 floor for large text. So the brand is DERIVED, never copied: --onto-heading is
* the wordmark silver on the dark canvas and its deep sibling on the light one (both
* >11:1), and the amber survives where it CAN be read — as the h2 rule below, which
* is the typographic echo of the `Onto|ref` seam. See --onto-* tokens further down;
* they already flip on `html.light` / `[data-theme="light"]`, which is what
* actually carries. */
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 1rem;
color: var(--onto-heading, #c0ccd8);
}
/* The element rule above cannot reach the page TITLE: `.ds-heading-xl` carries its own
* `--color-neutral-900` in htmx-components.css, a class selector that loads AFTER this
* file — so the h1 stayed framework-neutral while every h2 below it went brand, which
* is the worst of both. `html .ds-page ...` (0,2,1) outranks both `.ds-heading-xl` and
* its `.dark` twin, so ONE rule brands the title in BOTH themes — the token already
* knows which theme it is in. */
html .ds-page .ds-heading-xl,
html .ds-page .ds-heading-lg {
color: var(--onto-heading, #c0ccd8);
}
/* The amber seam. Scoped to page/prose bodies so it marks SECTIONS, never the
* headings inside nav, cards or the hero — a rule everywhere is a rule nowhere. */
.ds-page-body h2,
.ds-prose h2 {
padding-left: 0.75rem;
border-left: 3px solid var(--onto-rule, #e8a838);
}
h1 {
font-size: 2.5rem;
font-weight: 700;
}
h2 {
font-size: 2rem;
font-weight: 600;
}
h3 {
font-size: 1.5rem;
font-weight: 500;
}
p {
margin-bottom: 1rem;
}
/* Buttons */
.btn-icon {
padding: 2px 4px !important;
}
.btn {
display: inline-block;
/* padding: 12px 24px; */
font-size: 1rem;
font-weight: 500;
text-decoration: none;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary {
background-color: #3498db;
color: white;
}
.btn-primary:hover {
background-color: #2980b9;
transform: translateY(-2px);
}
.btn-secondary {
background-color: #6c757d;
color: white;
}
.btn-secondary:hover {
background-color: #5a6268;
}
.btn-success {
background-color: #28a745;
color: white;
}
.btn-success:hover {
background-color: #218838;
}
/* Cards */
.card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.card-title {
color: #2c3e50;
margin-bottom: 10px;
}
.card-text {
color: #666;
line-height: 1.5;
}
/* Navigation */
.navbar {
background-color: #2c3e50;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
color: white;
font-size: 1.5rem;
font-weight: 700;
text-decoration: none;
}
.navbar-nav {
display: flex;
list-style: none;
gap: 2rem;
margin-left: auto;
}
.nav-link {
color: #ecf0f1;
text-decoration: none;
transition: color 0.3s ease;
}
.nav-link:hover {
color: #3498db;
}
/* Grid system */
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.col {
flex: 1;
padding: 0 15px;
}
.col-1 {
flex: 0 0 8.333333%;
}
.col-2 {
flex: 0 0 16.666667%;
}
.col-3 {
flex: 0 0 25%;
}
.col-4 {
flex: 0 0 33.333333%;
}
.col-6 {
flex: 0 0 50%;
}
.col-8 {
flex: 0 0 66.666667%;
}
.col-12 {
flex: 0 0 100%;
}
/* Utilities */
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 1rem;
}
.mt-4 {
margin-top: 1.5rem;
}
.mt-5 {
margin-top: 3rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 1rem;
}
.mb-4 {
margin-bottom: 1.5rem;
}
.mb-5 {
margin-bottom: 3rem;
}
.p-1 {
padding: 0.25rem;
}
.p-2 {
padding: 0.5rem;
}
.p-3 {
padding: 1rem;
}
.p-4 {
padding: 1.5rem;
}
.p-5 {
padding: 3rem;
}
/* Alerts */
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 6px;
}
.alert-info {
color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
}
.alert-success {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
}
.alert-warning {
color: #856404;
background-color: #fff3cd;
border-color: #ffeaa7;
}
.alert-danger {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
/* Forms */
.form-group {
margin-bottom: 1rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #333;
}
.form-control {
display: block;
width: 100%;
padding: 0.75rem;
font-size: 1rem;
border: 1px solid #ced4da;
border-radius: 6px;
transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.form-control:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
/* Responsive design */
@media (max-width: 768px) {
.container {
padding: 0 15px;
}
.row {
flex-direction: column;
}
.col {
flex: 1;
margin-bottom: 1rem;
}
.navbar-nav {
flex-direction: column;
gap: 1rem;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
}
/* Animation utilities */
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slide-up {
animation: slideUp 0.6s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Static file serving indicator */
.static-file-badge {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #28a745;
color: white;
padding: 8px 12px;
border-radius: 20px;
font-size: 0.8rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.static-file-badge:before {
content: "📁 ";
}
/* All images inside post body: never overflow the column. */
.post-content-body img {
max-width: 100%;
height: auto;
}
/* Post body: lead thumbnail image rendered from markdown (first paragraph, lone img) */
.post-content-body > p:first-child > img:only-child {
width: 100%;
max-height: 24rem;
object-fit: contain;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
/* Hide duplicate H1 title from markdown body — already shown in the header section.
Covers two layouts:
- thumbnail-first: ![]()
→ adjacent sibling after first p
- no thumbnail: as first child */
.post-content-body > p:first-child + h1,
.post-content-body > h1:first-child {
display: none;
}
/* Content grid card thumbnail */
.grid-post-figure {
max-height: 11rem;
}
.grid-post-img {
height: 100%;
max-height: 11rem;
object-fit: contain;
margin: 0 auto;
}
/* Theme-aware thumbnails: show light img on light theme, dark img on dark theme */
.grid-post-img-dark {
display: none;
}
[data-theme="dark"] .grid-post-img-light {
display: none;
}
[data-theme="dark"] .grid-post-img-dark {
display: block;
}
/* ── Content graph mini ────────────────────────────────────────────────────── */
/* Constrain graph to sidebar width; prevent overflow on mobile */
.content-graph-mini-wrapper {
max-width: 280px;
}
/* Preview: scales SVG to wrapper width, zoom-in cursor */
.content-graph-mini-preview {
cursor: zoom-in;
border-radius: 0.5rem;
overflow: hidden;
transition: opacity 0.15s;
}
.content-graph-mini-preview:hover {
opacity: 0.85;
}
.content-graph-mini-preview svg {
width: 100%;
height: auto;
display: block;
}
/* Dark-mode overrides for SVG CSS custom properties.
The SVG embeds