helix/book/custom.css

html {
  font-family: "Inter", sans-serif;
}

.sidebar .sidebar-scrollbox {
  padding: 0;
}

.chapter {
  margin: 0.25rem 0;
}

.chapter li.chapter-item {
  line-height: initial;
  margin: 0;
  padding: 1rem 1.5rem;
}

.chapter .section li.chapter-item {
  line-height: inherit;
  padding: .5rem .5rem 0 .5rem;
}

.content {
  overflow-y: auto;
  padding: 0 15px;
  padding-bottom: 50px;
  line-height: 1.6;
}

/* 2 1.75 1.5 1.25 1 .875 */
.content h1 { font-size: 2em }
.content h2 { font-size: 1.75em }
.content h3 { font-size: 1.5em }
.content h4 { font-size: 1.25em }
.content h5 { font-size: 1em }
.content h6 { font-size: .875em }

.content h1,
.content h2,
.content h3,
.content h4 {
  font-weight: 500;
}

.content h1 { margin-top: 1.75em; margin-bottom: .875em; }
.content h2 { margin-top: 2em;    margin-bottom: .75em; }
.content h3 { margin-top: 1.75em; margin-bottom: .65em; }
.content h4 { margin-top: 1.5em;  margin-bottom: .5em; }
.content h1:first-child,
.content h2:first-child { margin-top: 0; }

.content p,
.content ol,
.content ul {
  margin-top: 0;
  margin-bottom: 1em;
}

.content table {
  margin-top: 1.5em;
  margin-bottom: 1.75em;
}

.content pre {
  margin-top: 1em;
  margin-bottom: 1.25em;
}

.content ul li,
.content ol li {
  margin-bottom: .35rem;
}

.content ul {
  list-style-type: square;
}

.content ul ul,
.content ol ul {
  margin-bottom: .5rem;
}

.content li p {
  margin-bottom: .5em;
}

blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  color: var(--fg);
  opacity: .9;
  background-color: var(--quote-bg);
  border-left: 4px solid var(--quote-border);
  border-top: none;
  border-bottom: none;
}

blockquote *:last-child {
  margin-bottom: 0;
}

table {
  width: 100%;
}

table thead th {
  padding: .75rem;
  text-align: left;
  font-weight: 500;
  line-height: 1.5;
  width: auto;
}

table td {
  padding: .75rem;
  border: none;
}

table thead tr {
  border: none;
  border-bottom: 2px var(--table-border-color) solid;
}

table tbody tr {
  border-bottom: 1px var(--table-border-line) solid;
}

table tbody tr:nth-child(2n) {
  background: unset;
}

pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

code.hljs {
  padding: 3px 5px;
}

.colibri {
  --bg: #281733;
  --fg: #bcbdd0;
  --heading-fg: #fff;

  --sidebar-bg: hsl(276.4, 37.8%, 11%);
  --sidebar-fg: #c8c9db;
  --sidebar-non-existent: #505274;
  --sidebar-active: #a4a0e8;
  --sidebar-spacer: #2d334f;

  --scrollbar: var(--sidebar-fg);

  --icons: #737480;
  --icons-hover: #b7b9cc;

  /* --links: #a4a0e8; */
  --links: #ECCDBA;

  --inline-code-color: hsl(48.7, 7.8%, 70%);

  --theme-popup-bg: #161923;
  --theme-popup-border: #737480;
  --theme-hover: rgba(0, 0, 0, .2);

  --quote-bg: rgba(0, 0, 0, .25);
  --quote-border: hsl(226, 15%, 22%);

  --table-border-color: hsl(226, 23%, 76%);
  --table-header-bg: hsla(226, 23%, 31%, 0);
  --table-alternate-bg: hsl(226, 23%, 14%);
  --table-border-line: hsla(201deg, 20%, 92%, 0.2);

  --searchbar-border-color: #aaa;
  --searchbar-bg: #aeaec6;
  --searchbar-fg: #000;
  --searchbar-shadow-color: #aaa;
  --searchresults-header-fg: #5f5f71;
  --searchresults-border-color: #5c5c68;
  --searchresults-li-bg: #242430;
  --search-mark-bg: #a2cff5;
}

.colibri .content .header {
  color: #fff;
}

/* highlight.js theme, :where() is used to avoid increasing specificity */

/* Mapped to the helix theme.toml palette */
:where(.colibri) .hljs {
  background: #1f1029;          /* slightly deeper than --bg revolver */
  color: #a4a0e8;                /* lavender — ui.text */
}

:where(.colibri) .hljs-comment,
:where(.colibri) .hljs-quote {
  color: #697C81;                /* sirocco — comment */
}

:where(.colibri) .hljs-keyword,
:where(.colibri) .hljs-name,
:where(.colibri) .hljs-selector-tag {
  color: #eccdba;                /* almond — keyword, tag */
}

:where(.colibri) .hljs-meta,
:where(.colibri) .hljs-attribute,
:where(.colibri) .hljs-attr,
:where(.colibri) .hljs-operator,
:where(.colibri) .hljs-tag {
  color: #dbbfef;                /* lilac — directives, attributes, operators */
}

:where(.colibri) .hljs-built_in,
:where(.colibri) .hljs-symbol,
:where(.colibri) .hljs-addition {
  color: #9ff28f;                /* mint — builtins, additions */
}

:where(.colibri) .hljs-string,
:where(.colibri) .hljs-bullet,
:where(.colibri) .hljs-link {
  color: #cccccc;                /* silver — strings */
}

:where(.colibri) .hljs-regexp,
:where(.colibri) .hljs-formula {
  color: #efba5d;                /* honey — regex, special */
}

:where(.colibri) .hljs-number,
:where(.colibri) .hljs-literal,
:where(.colibri) .hljs-params {
  color: #E8DCA0;                /* chamois — numbers, literals, parameters */
}

:where(.colibri) .hljs-title,
:where(.colibri) .hljs-section,
:where(.colibri) .hljs-type,
:where(.colibri) .hljs-class,
:where(.colibri) .hljs-property,
:where(.colibri) .hljs-selector-id,
:where(.colibri) .hljs-selector-class {
  color: #ffffff;                /* white — types, functions, headings */
}

:where(.colibri) .hljs-variable,
:where(.colibri) .hljs-template-variable {
  color: #a4a0e8;                /* lavender — variables */
}

:where(.colibri) .hljs-deletion {
  color: #f47868;                /* apricot — deletion / error */
}

:where(.colibri) .hljs-emphasis {
  font-style: italic;
}

:where(.colibri) .hljs-strong {
  font-weight: 700;
}

#helix-version-banner {
  margin: 0 0 1.75rem;
  padding: .75rem 1.15rem;
  border-radius: 4px;
  border-inline-start: 4px solid var(--blockquote-warning-color, #efba5d);
  background-color: var(--quote-bg);
  font-size: .95em;
  line-height: 1.55;
}

#helix-version-banner.archived {
  border-inline-start-color: var(--blockquote-note-color, #697C81);
}

#helix-version-banner a {
  white-space: nowrap;
  font-weight: 500;
}

.version-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.75rem 0 2rem;
}

.version-tiles .version-tile,
.version-tiles .version-tile:hover {
  text-decoration: none;
}

.version-tiles .version-tile {
  --tile-accent: var(--blockquote-tip-color, #a4a0e8);
  display: block;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--table-border-line, hsla(201, 20%, 92%, .2));
  border-radius: 8px;
  background-color: var(--quote-bg, rgba(0, 0, 0, .2));
  color: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}

.version-tiles .version-tile:hover,
.version-tiles .version-tile.current {
  border-color: var(--tile-accent);
  background-color: color-mix(in srgb, var(--tile-accent) 9%, var(--quote-bg, transparent));
}

.version-tiles .version-tile strong {
  display: block;
  margin-bottom: .25rem;
  font-size: 1.15em;
  font-weight: 600;
  color: var(--heading-fg);
}

.version-tiles .version-tile .version-tile-sub {
  opacity: .8;
  font-size: .9em;
}