/* ========================================================================== cobomi blog — stylesheet Single source of truth for the visual identity. ========================================================================== */ @font-face { font-family: "Geist"; src: url("/fonts/Geist.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* --- brand palette ---------------------------------------------------- */ --cbm-accent-1: #fbce2b; --cbm-accent-1-ink: #111111; --cbm-accent-1-soft: #fef5d5; --cbm-accent-2: #94c3c8; --cbm-accent-2-ink: #002a2f; --cbm-accent-2-soft: #e4f0f1; --cbm-gray-1: #fafafa; --cbm-gray-2: #ebebeb; --cbm-gray-3: #bebebe; --cbm-gray-4: #777b7a; --cbm-gray-5: #25292c; --cbm-gray-6: #222222; --cbm-gray-7: #111111; --cbm-white: #ffffff; /* --- semantic (light theme is the default) ---------------------------- */ --cbm-bg: var(--cbm-gray-1); --cbm-surface: var(--cbm-white); --cbm-surface-alt: var(--cbm-gray-2); --cbm-border: var(--cbm-gray-3); --cbm-text: var(--cbm-gray-6); --cbm-text-strong: var(--cbm-gray-7); --cbm-text-muted: var(--cbm-gray-4); --cbm-link: #0f6d76; --cbm-link-hover: var(--cbm-gray-7); --cbm-code-bg: var(--cbm-gray-2); --cbm-code-ink: var(--cbm-gray-7); --cbm-tag-bg: var(--cbm-accent-2-soft); --cbm-tag-ink: var(--cbm-accent-2-ink); --cbm-tag-border: color-mix(in srgb, var(--cbm-accent-2) 55%, transparent); /* --- typography ------------------------------------------------------- */ --cbm-font-sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif; --cbm-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --cbm-fs-12: 0.75rem; --cbm-fs-14: 0.875rem; --cbm-fs-16: 1rem; --cbm-fs-18: 1.125rem; --cbm-fs-20: 1.25rem; --cbm-fs-24: 1.5rem; --cbm-fs-32: 2rem; --cbm-fs-42: 2.625rem; --cbm-fs-60: 3.75rem; /* --- shape, space, motion --------------------------------------------- */ --cbm-radius: 4px; --cbm-radius-lg: 8px; --cbm-content-width: 72ch; --cbm-wide-width: 1200px; --cbm-motion: 220ms cubic-bezier(0.4, 0, 0.2, 1); } /* Forced dark: set by the switcher as data-theme="dark" on . */ :root[data-theme="dark"], .cbm-dark { --cbm-bg: var(--cbm-gray-6); --cbm-surface: var(--cbm-gray-5); --cbm-surface-alt: #2f3336; --cbm-border: #3c4145; --cbm-text: #d9dcdd; --cbm-text-strong: var(--cbm-white); --cbm-text-muted: #9aa0a0; --cbm-link: var(--cbm-accent-2); --cbm-link-hover: var(--cbm-accent-1); --cbm-code-bg: #1b1f22; --cbm-code-ink: #e6e8e9; /* On dark surfaces a pale wash reads as washed-out; tint the teal instead and let the text carry the accent colour. */ --cbm-tag-bg: rgba(148, 195, 200, 0.12); --cbm-tag-ink: var(--cbm-accent-2); --cbm-tag-border: rgba(148, 195, 200, 0.4); } /* Auto mode: no data-theme attribute is present, so follow the OS. The :not([data-theme="light"]) guard lets an explicit light choice win. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cbm-bg: var(--cbm-gray-6); --cbm-surface: var(--cbm-gray-5); --cbm-surface-alt: #2f3336; --cbm-border: #3c4145; --cbm-text: #d9dcdd; --cbm-text-strong: var(--cbm-white); --cbm-text-muted: #9aa0a0; --cbm-link: var(--cbm-accent-2); --cbm-link-hover: var(--cbm-accent-1); --cbm-code-bg: #1b1f22; --cbm-code-ink: #e6e8e9; --cbm-tag-bg: rgba(148, 195, 200, 0.12); --cbm-tag-ink: var(--cbm-accent-2); --cbm-tag-border: rgba(148, 195, 200, 0.4); } } /* ========================================================================== base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cbm-bg); color: var(--cbm-text); font-family: var(--cbm-font-sans); font-size: var(--cbm-fs-18); line-height: 1.65; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { color: var(--cbm-text-strong); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 2.5rem 0 1rem; text-wrap: balance; } h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, var(--cbm-fs-60)); margin-top: 0; } h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, var(--cbm-fs-42)); } h3 { font-size: var(--cbm-fs-24); } h4 { font-size: var(--cbm-fs-20); } p { margin: 0 0 1.25rem; } a { color: var(--cbm-link); text-decoration-color: color-mix(in srgb, var(--cbm-link) 40%, transparent); text-underline-offset: 0.2em; transition: color var(--cbm-motion), text-decoration-color var(--cbm-motion); } a:hover { color: var(--cbm-link-hover); text-decoration-color: currentColor; } a:focus-visible, button:focus-visible, :focus-visible { outline: 2px solid var(--cbm-accent-1); outline-offset: 3px; border-radius: 2px; } hr { border: 0; border-top: 1px solid var(--cbm-border); margin: 3rem 0; } img, video, svg { max-width: 100%; height: auto; } /* ========================================================================== brand primitives ========================================================================== */ /* Eyebrow: the "/1.0 ●" mono micro-label cobomi uses above every section. */ .cbm-eyebrow { font-family: var(--cbm-font-mono); font-size: var(--cbm-fs-12); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cbm-text-muted); display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.75rem; } .cbm-eyebrow::before { content: "●"; color: var(--cbm-accent-1); font-size: 0.7em; } /* Home-page subtitle under the h1: the lead-in, set larger and muted so it reads as a deck rather than body copy. Slightly narrower than --cbm-content-width because at this size a full measure runs long. */ .cbm-subtitle { max-width: 60ch; margin: 0 0 1.5rem; font-size: var(--cbm-fs-20); line-height: 1.5; color: var(--cbm-text-muted); text-wrap: pretty; } /* Yellow underline swash for the lead heading. */ .cbm-underline { background-image: linear-gradient(var(--cbm-accent-1), var(--cbm-accent-1)); background-repeat: no-repeat; background-size: 100% 0.3em; background-position: 0 88%; } .cbm-tag { display: inline-block; font-family: var(--cbm-font-mono); font-size: var(--cbm-fs-12); letter-spacing: 0.06em; padding: 0.2rem 0.6rem; border-radius: var(--cbm-radius); background: var(--cbm-tag-bg); color: var(--cbm-tag-ink); border: 1px solid var(--cbm-tag-border); text-decoration: none; } .cbm-tag:hover { background: var(--cbm-accent-2); color: var(--cbm-accent-2-ink); } .cbm-meta { font-family: var(--cbm-font-mono); font-size: var(--cbm-fs-14); color: var(--cbm-text-muted); } .cbm-button { display: inline-block; background: var(--cbm-accent-1); color: var(--cbm-accent-1-ink); font-weight: 600; padding: 0.6rem 1.2rem; border-radius: var(--cbm-radius); text-decoration: none; border: 1px solid transparent; transition: transform var(--cbm-motion), background var(--cbm-motion); } .cbm-button:hover { color: var(--cbm-accent-1-ink); background: #ffdb5c; transform: translateY(-1px); } /* Closing call-to-action, appended to every post by templates/page.html. A card rather than a paragraph: it has to read as a deliberate sign-off and not as one more sentence of the article. The yellow rule on the left mirrors the one on 
, so it sits inside the existing visual language. */
.cbm-cta {
  margin: 3.5rem 0 0;
  padding: 1.5rem 1.75rem;
  background: var(--cbm-surface);
  border: 1px solid var(--cbm-border);
  border-left: 3px solid var(--cbm-accent-1);
  border-radius: 0 var(--cbm-radius-lg) var(--cbm-radius-lg) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.cbm-cta > div { flex: 1 1 22ch; }
.cbm-cta .cbm-eyebrow { margin-bottom: 0.4rem; }
.cbm-cta p {
  margin: 0;
  font-size: var(--cbm-fs-18);
  line-height: 1.45;
  color: var(--cbm-text-strong);
  text-wrap: pretty;
}
.cbm-cta .cbm-button { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 34rem) {
  .cbm-cta { padding: 1.25rem 1.25rem; }
  .cbm-cta .cbm-button { width: 100%; text-align: center; }
}

/* ==========================================================================
   long-form article content
   ========================================================================== */

.cbm-prose { max-width: var(--cbm-content-width); }

.cbm-prose blockquote {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--cbm-accent-2);
  background: var(--cbm-accent-2-soft);
  color: var(--cbm-accent-2-ink);
  border-radius: 0 var(--cbm-radius) var(--cbm-radius) 0;
}
.cbm-prose blockquote p:last-child { margin-bottom: 0; }

/* GitHub-style alerts — `> [!NOTE]`, enabled by github_alerts in config.toml.

   Zola emits a 
 and, unlike GitHub,
   no title element. The label below is therefore generated in CSS via ::before,
   which also keeps it out of the RSS description text. */
/* Defaults live on the type classes below, not here, so that a more specific
   type rule is not competing with this one at equal specificity. */
.cbm-prose blockquote[class^="markdown-alert-"] {
  border-left-color: var(--cbm-alert, var(--cbm-accent-2));
  background: color-mix(in srgb, var(--cbm-alert, var(--cbm-accent-2)) 12%, transparent);
  color: inherit;
}
.cbm-prose blockquote[class^="markdown-alert-"]::before {
  content: var(--cbm-alert-label, "Note");
  display: block;
  font-family: var(--cbm-font-mono);
  font-size: var(--cbm-fs-12);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cbm-text-strong);
  margin-bottom: 0.4rem;
}

.cbm-prose .markdown-alert-note      { --cbm-alert: var(--cbm-accent-2); --cbm-alert-label: "Note"; }
.cbm-prose .markdown-alert-tip       { --cbm-alert: #3f9d6a; --cbm-alert-label: "Tip"; }
.cbm-prose .markdown-alert-important { --cbm-alert: #8b6fc4; --cbm-alert-label: "Important"; }
.cbm-prose .markdown-alert-warning   { --cbm-alert: #c9971f; --cbm-alert-label: "Warning"; }
.cbm-prose .markdown-alert-caution   { --cbm-alert: #d1544f; --cbm-alert-label: "Caution"; }

.cbm-prose mark { background: var(--cbm-accent-1-soft); color: inherit; }

.cbm-prose code {
  font-family: var(--cbm-font-mono);
  font-size: 0.875em;
  background: var(--cbm-code-bg);
  color: var(--cbm-code-ink);
  padding: 0.12em 0.38em;
  border-radius: var(--cbm-radius);
}

.cbm-prose pre {
  font-family: var(--cbm-font-mono);
  background: var(--cbm-gray-7);
  color: #e6e8e9;
  padding: 1.1rem 1.25rem;
  border-radius: var(--cbm-radius-lg);
  overflow-x: auto;
  line-height: 1.55;
  font-size: var(--cbm-fs-14);
  border-left: 3px solid var(--cbm-accent-1);
}
.cbm-prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

.cbm-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cbm-fs-16);
  margin: 2rem 0;
}
.cbm-prose th, .cbm-prose td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--cbm-border);
}
.cbm-prose th {
  font-family: var(--cbm-font-mono);
  font-size: var(--cbm-fs-12);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cbm-text-strong);
  border-bottom: 2px solid var(--cbm-accent-1);
}

.cbm-prose ul, .cbm-prose ol { padding-left: 1.3rem; margin: 0 0 1.25rem; }
.cbm-prose li { margin: 0.35rem 0; }
.cbm-prose li::marker { color: var(--cbm-accent-2); }

.cbm-prose figure { margin: 2rem 0; }
.cbm-prose figcaption {
  font-family: var(--cbm-font-mono);
  font-size: var(--cbm-fs-12);
  color: var(--cbm-text-muted);
  margin-top: 0.5rem;
}

/* ==========================================================================
   shell: header / post list / footer
   ========================================================================== */

.cbm-shell {
  max-width: var(--cbm-wide-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.cbm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--cbm-border);
  flex-wrap: wrap;
}

.cbm-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--cbm-text-strong);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Wordmark: CO{BO.MI}. The braces belong to the mark, so they are never allowed
   to wrap away from the letters — and the mark is rendered in ONE colour:
   `color: inherit` makes it take whatever the surrounding context sets
   (heading colour in the h1, brand colour in the header), braces included. */
.cbm-wordmark {
  white-space: nowrap;
  color: inherit;
}

/* logo.svg is fill="currentColor", so the mark simply inherits the brand link's
   colour (--cbm-text-strong). That is the single source of truth for all three
   theme states — light, dark and system — so no per-theme override is needed and
   the logo can never end up drawn in a background colour. No hover tint either:
   it stays in the foreground colour. */
.cbm-brand svg { width: 30px; height: auto; color: inherit; }
.cbm-brand:hover { color: var(--cbm-text-strong); }

.cbm-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-family: var(--cbm-font-mono);
  font-size: var(--cbm-fs-14);
}
.cbm-nav a { color: var(--cbm-text); text-decoration: none; }
.cbm-nav a:hover { color: var(--cbm-link); }

/* Language switch — the "● DE ● EN" idiom from www.cobomi.com, reduced to a
   single link to the other language. */
.cbm-nav a.cbm-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--cbm-border);
  border-radius: var(--cbm-radius);
  font-size: var(--cbm-fs-12);
  letter-spacing: 0.08em;
  color: var(--cbm-text-muted);
  transition: border-color var(--cbm-motion), color var(--cbm-motion);
}
.cbm-nav a.cbm-lang::before {
  content: "●";
  font-size: 0.6em;
  color: var(--cbm-accent-1);
}
.cbm-nav a.cbm-lang:hover {
  border-color: var(--cbm-accent-1);
  color: var(--cbm-text-strong);
}

/* ==========================================================================
   colour scheme switcher, a borderless header icon button cycling system → light → dark, fading on hover.
   Driven by cobomi-theme.js, which sets data-theme-choice on , the CSS below only decides which icon is visible.
   ========================================================================== */

.cbm-palette {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.4rem;
  border: 0;
  background: transparent;
  color: currentcolor;
  cursor: pointer;
  vertical-align: middle;
  line-height: 0;
  transition: opacity 250ms;
}
.cbm-palette:hover { opacity: 0.7; }
.cbm-palette:focus-visible {
  outline: 2px solid var(--cbm-accent-1);
  outline-offset: 2px;
  border-radius: var(--cbm-radius);
}
.cbm-palette svg {
  width: 1.2rem;
  height: 1.2rem;
  display: none;
}

/* Show exactly one icon for the active choice. With no JS (and therefore no
   data-theme-choice attribute) the system icon is the sensible default. */
.cbm-palette .cbm-icon-auto { display: block; }

:root[data-theme-choice="auto"] .cbm-palette .cbm-icon-auto { display: block; }
:root[data-theme-choice="auto"] .cbm-palette .cbm-icon-light,
:root[data-theme-choice="auto"] .cbm-palette .cbm-icon-dark { display: none; }

:root[data-theme-choice="light"] .cbm-palette .cbm-icon-light { display: block; }
:root[data-theme-choice="light"] .cbm-palette .cbm-icon-auto,
:root[data-theme-choice="light"] .cbm-palette .cbm-icon-dark { display: none; }

:root[data-theme-choice="dark"] .cbm-palette .cbm-icon-dark { display: block; }
:root[data-theme-choice="dark"] .cbm-palette .cbm-icon-auto,
:root[data-theme-choice="dark"] .cbm-palette .cbm-icon-light { display: none; }

/* No-JS: hide rather than show a dead control. */
.cbm-no-js .cbm-palette { display: none; }

.cbm-postlist { list-style: none; margin: 3rem 0; padding: 0; }
.cbm-postlist li { padding: 1.75rem 0; border-bottom: 1px solid var(--cbm-border); }
.cbm-postlist h2, .cbm-postlist h3 { margin: 0.35rem 0 0.6rem; font-size: var(--cbm-fs-24); }
.cbm-postlist h2 a, .cbm-postlist h3 a { color: var(--cbm-text-strong); text-decoration: none; }
.cbm-postlist h2 a:hover, .cbm-postlist h3 a:hover { color: var(--cbm-link); }

.cbm-footer {
  margin-top: 5rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--cbm-border);
  font-family: var(--cbm-font-mono);
  font-size: var(--cbm-fs-14);
  color: var(--cbm-text-muted);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.cbm-footer a { color: inherit; }

/* ==========================================================================
   404
   ========================================================================== */

.cbm-404 { margin: 3rem 0; }

/* Numeral + chip as one lockup. Wraps to stacked on narrow screens. */
.cbm-404-hero {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

/* The big 404. Mono, because it is a status code, not a headline — and muted,
   so it reads as a backdrop rather than competing with the h1 beneath it. */
.cbm-404-code {
  margin: 0;
  font-family: var(--cbm-font-mono);
  font-size: clamp(5rem, 4rem + 12vw, 11rem);
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--cbm-text-strong);
  opacity: 0.14;
  user-select: none;
}

/* The cracked MCU. Inherits currentColor from the page text, so it needs no
   per-theme override and cannot end up drawn in a background colour. */
.cbm-404-mcu {
  width: 240px;
  max-width: 100%;
  height: auto;
  color: var(--cbm-text);
}

/* The smoke drifts. Subtle on purpose — it should register as movement, not as
   an animation. Disabled wholesale by the reduced-motion block further down. */
.cbm-404-smoke > path {
  transform-origin: 50% 100%;
  animation: cbm-drift 5s ease-in-out infinite;
}
.cbm-404-smoke > path:nth-child(2) { animation-duration: 6.5s; animation-delay: -1.5s; }
.cbm-404-smoke > path:nth-child(3) { animation-duration: 7.5s; animation-delay: -3s; }

@keyframes cbm-drift {
  0%, 100% { transform: translateX(0) scaleY(1); opacity: .5; }
  50%      { transform: translateX(3px) scaleY(1.06); opacity: .78; }
}

/* The failed path, filled in by the inline script on 404.html. Long URLs must
   wrap rather than widen the page on small screens. */
.cbm-path {
  font-family: var(--cbm-font-mono);
  font-size: var(--cbm-fs-14);
  background: var(--cbm-code-bg);
  color: var(--cbm-code-ink);
  padding: 0.1rem 0.4rem;
  border-radius: var(--cbm-radius);
  overflow-wrap: anywhere;
}

.cbm-404-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 1.75rem 0;
}

/* RSS affordance — every cobomi blog surfaces its feed in the footer + head. */
.cbm-feed-link::before { content: "◈ "; color: var(--cbm-accent-1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}