/* ========================================================================== KSI docs — theme layer over Material, matched to the paper/blog page (recursive-knowledge.github.io/knowledge-centric-self-improvement). Warm off-white / near-black palette with a single terracotta accent, and Inter as the body typeface (loaded via mkdocs.yml theme.font.text: Inter). mkdocs.yml theme.font.code loads Fira Code for code spans/blocks. Palette tokens mirror the blog's CSS custom properties so the two sites read as one system: accent #c45e3b (light) / #e58a5f (dark) bg #faf9f5 (light) / #181612 (dark) text #1d1c1a (light) / #e9e7e2 (dark) ========================================================================== */ :root { /* Interactive accent (buttons, hovers, active tabs) */ --ksi-accent-light: #c45e3b; --ksi-accent-dark: #e58a5f; /* Link text — the blog uses the darker `accent-hover` for readable body links on the warm background, and the lighter tint on the dark page. */ --ksi-link-light: #a64a2b; --ksi-link-dark: #f0a07d; /* Warm hairline borders + surfaces, per scheme */ --ksi-border-light: #e7e3d8; --ksi-surface-light: #f1efe7; --ksi-border-dark: #2e2a22; --ksi-surface-dark: #221f19; } :root, body { /* theme.font.text: Inter makes Material resolve --md-text-font to "Inter". Restate the full stack here so body/heading text falls back gracefully to the system UI font if the Inter webfont hasn't loaded yet. IMPORTANT: this must be scoped to `body`, not just `:root` — Material's own compiled CSS declares this same custom property directly on the `body` element, and a direct declaration always wins over one merely inherited from an ancestor (:root/). A :root-only override is silently inert. */ --md-text-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ---- Light scheme ("default") -------------------------------------------- */ [data-md-color-scheme="default"] { --md-primary-fg-color: #faf9f5; --md-primary-bg-color: #1d1c1a; --md-accent-fg-color: var(--ksi-accent-light); --md-typeset-a-color: var(--ksi-link-light); --md-default-fg-color: #1d1c1a; --md-default-bg-color: #faf9f5; --md-code-bg-color: var(--ksi-surface-light); } [data-md-color-scheme="default"] .md-header { background: #faf9f5; color: #1d1c1a; border-bottom: 1px solid var(--ksi-border-light); } [data-md-color-scheme="default"] .md-tabs { background: transparent; color: #1d1c1a; border-bottom: 1px solid var(--ksi-border-light); } [data-md-color-scheme="default"] .md-tabs__link--active { color: var(--ksi-accent-light); opacity: 1; } /* ---- Dark scheme ("slate", stays the default on load) -------------------- */ [data-md-color-scheme="slate"] { --md-primary-fg-color: #181612; --md-primary-bg-color: #e9e7e2; --md-accent-fg-color: var(--ksi-accent-dark); --md-typeset-a-color: var(--ksi-link-dark); --md-default-fg-color: #e9e7e2; --md-default-bg-color: #181612; --md-code-bg-color: #161614; } [data-md-color-scheme="slate"] .md-header { background: #181612; border-bottom: 1px solid var(--ksi-border-dark); } [data-md-color-scheme="slate"] .md-tabs { background: transparent; border-bottom: 1px solid var(--ksi-border-dark); } [data-md-color-scheme="slate"] .md-tabs__link--active { color: var(--ksi-accent-dark); opacity: 1; } /* ---- Typographic rhythm --------------------------------------------------- */ .md-typeset h1 { font-weight: 700; letter-spacing: -0.02em; } .md-typeset h2 { font-weight: 650; letter-spacing: -0.01em; margin-top: 2.2rem; } .md-typeset h3, .md-typeset h4 { font-weight: 600; } /* ---- Code-block polish ----------------------------------------------------- */ .md-typeset pre > code { border-radius: 8px; } [data-md-color-scheme="slate"] .md-typeset pre > code { border: 1px solid var(--ksi-border-dark); } [data-md-color-scheme="default"] .md-typeset pre > code { border: 1px solid var(--ksi-border-light); } /* ---- Data tables ----------------------------------------------------------- */ /* Bring Material's default data tables into the same rounded-hairline system as the code blocks and cards: a scheme-matched hairline border, rounded corners, and a subtly tinted header row. Scoped to `:not([class])` so mkdocstrings and other generated tables keep their own styling. */ .md-typeset table:not([class]) { border-radius: 10px; border-spacing: 0; overflow: hidden; } [data-md-color-scheme="slate"] .md-typeset table:not([class]) { border: 1px solid var(--ksi-border-dark); } [data-md-color-scheme="default"] .md-typeset table:not([class]) { border: 1px solid var(--ksi-border-light); } .md-typeset table:not([class]) th { font-weight: 600; } [data-md-color-scheme="slate"] .md-typeset table:not([class]) th { background: var(--ksi-surface-dark); } [data-md-color-scheme="default"] .md-typeset table:not([class]) th { background: var(--ksi-surface-light); } /* Hairline row separators in the scheme border color; drop the trailing rule so it doesn't double up against the rounded outer border. */ [data-md-color-scheme="slate"] .md-typeset table:not([class]) td { border-top: 1px solid var(--ksi-border-dark); } [data-md-color-scheme="default"] .md-typeset table:not([class]) td { border-top: 1px solid var(--ksi-border-light); } .md-typeset table:not([class]) tr:last-child td { border-bottom: 0; } /* ========================================================================== Homepage hero ========================================================================== */ .ksi-hero { margin: 0 0 2.5rem; padding: 3.2rem 1.4rem 3rem; text-align: center; } .ksi-hero h1 { margin: 0 0 0.6rem; font-size: 2.5rem; line-height: 1.1; color: var(--md-default-fg-color); } .ksi-hero .ksi-tagline { margin: 0 auto 1.6rem; max-width: 42rem; font-size: 1.05rem; line-height: 1.6; opacity: 0.72; } .ksi-cta { display: inline-flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; } .ksi-cta .md-button { border-radius: 980px; font-weight: 500; padding: 0.6rem 1.4rem; } /* Primary CTA: solid accent fill, pill-button convention (matches the blog) */ [data-md-color-scheme="default"] .ksi-cta .md-button--primary { background: var(--ksi-accent-light); border-color: transparent; color: #ffffff; } [data-md-color-scheme="default"] .ksi-cta .md-button--primary:hover { background: var(--ksi-link-light); } [data-md-color-scheme="slate"] .ksi-cta .md-button--primary { background: var(--ksi-accent-dark); border-color: transparent; color: #181612; } [data-md-color-scheme="slate"] .ksi-cta .md-button--primary:hover { background: var(--ksi-link-dark); } /* Secondary CTA: hairline outline, no fill */ [data-md-color-scheme="default"] .ksi-cta .md-button:not(.md-button--primary) { border-color: var(--ksi-border-light); color: #1d1c1a; } [data-md-color-scheme="slate"] .ksi-cta .md-button:not(.md-button--primary) { border-color: var(--ksi-border-dark); color: #e9e7e2; } /* ========================================================================== Homepage card grid (Material .grid.cards) ========================================================================== */ .md-typeset .grid.cards > ul > li, .md-typeset .grid > .card { /* Matches the blog's `--radius: 14px` card token — see the header note about the two sites reading as one system. */ border-radius: 14px; transition: transform 0.18s ease, box-shadow 0.18s ease; } [data-md-color-scheme="default"] .md-typeset .grid.cards > ul > li { background: var(--ksi-surface-light); border: 1px solid var(--ksi-border-light); } [data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li { background: var(--ksi-surface-dark); border: 1px solid var(--ksi-border-dark); } .md-typeset .grid.cards > ul > li:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(60, 40, 20, 0.12); } [data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); } /* Card icon glyph in accent */ [data-md-color-scheme="default"] .md-typeset .grid.cards > ul > li > hr + p:first-of-type .twemoji, [data-md-color-scheme="default"] .md-typeset .grid.cards .twemoji svg { fill: var(--ksi-accent-light); } [data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li > hr + p:first-of-type .twemoji, [data-md-color-scheme="slate"] .md-typeset .grid.cards .twemoji svg { fill: var(--ksi-accent-dark); } .md-typeset .grid.cards .twemoji { height: 1.6rem; width: 1.6rem; } /* ========================================================================== Mermaid diagram zoom (see javascripts/mermaid-zoom.js) ========================================================================== */ /* Render diagrams at their native, readable size (the fences set useMaxWidth:false) and let wide ones scroll horizontally inside their own box. Previously Material capped every diagram at the content-column width, so wide flowcharts/sequence diagrams were scaled down until the label text was unreadable. */ .md-typeset .mermaid { overflow-x: auto; overflow-y: hidden; } /* Host the expand button in the top-right of each rendered diagram. */ .md-typeset .mermaid.mermaid-zoomable { position: relative; } .md-typeset .mermaid.mermaid-zoomable > svg { cursor: zoom-in; } .mermaid-expand-btn { position: absolute; top: 0.5rem; right: 0.5rem; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 8px; border: 1px solid var(--md-default-fg-color--lightest, #e7e3d8); background: var(--md-default-bg-color); color: var(--md-default-fg-color--light, currentColor); cursor: pointer; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; z-index: 2; } .md-typeset .mermaid.mermaid-zoomable:hover .mermaid-expand-btn, .mermaid-expand-btn:focus-visible { opacity: 1; } .mermaid-expand-btn:hover { color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); } /* ---- Fullscreen overlay --------------------------------------------------- */ body.mermaid-zoom-lock { overflow: hidden; } .mermaid-zoom-overlay { position: fixed; inset: 0; z-index: 2000; display: none; flex-direction: column; background: color-mix(in srgb, var(--md-default-bg-color) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .mermaid-zoom-overlay.is-open { display: flex; } .mermaid-zoom-toolbar { flex: 0 0 auto; display: flex; gap: 0.4rem; justify-content: flex-end; padding: 0.7rem 0.9rem; } .mermaid-zoom-toolbar button { min-width: 2.2rem; height: 2.2rem; padding: 0 0.7rem; border-radius: 8px; border: 1px solid var(--md-default-fg-color--lightest, #e7e3d8); background: var(--md-default-bg-color); color: var(--md-default-fg-color); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .mermaid-zoom-toolbar button:hover { color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); } .mermaid-zoom-close { margin-left: 0.4rem; } .mermaid-zoom-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: grab; touch-action: none; } .mermaid-zoom-stage.is-grabbing { cursor: grabbing; } .mermaid-zoom-stage > svg { max-width: 92vw; max-height: 82vh; user-select: none; } /* Header title stays "KSI" — don't swap to the current page/section title as the page H1 scrolls out of view (Material's default header-topic behavior). */ .md-header__topic[data-md-component="header-topic"] { display: none; } .md-header__title--active .md-header__topic:first-child { opacity: 1; transform: none; pointer-events: auto; z-index: 0; } /* ========================================================================== Mobile layout ========================================================================== */ /* 44.984375em is Material's own mobile breakpoint — keep them identical so our overrides switch on exactly the same viewport Material does. */ @media screen and (max-width: 44.984375em) { .md-typeset h1 { font-size: 1.75rem; line-height: 1.18; } .md-typeset h2 { margin-top: 1.65rem; } .ksi-hero { margin-bottom: 1.6rem; padding: 2.1rem 0 1.9rem; } /* `text-wrap: balance` evens out the line lengths so the title can't strand a short last line (the original problem here). Prefer it over a hand-tuned max-width, which only works for the current wording. Browsers without it just fall back to normal wrapping. */ .ksi-hero h1 { font-size: 1.8rem; line-height: 1.16; text-wrap: balance; } /* `pretty` rather than `balance`: it keeps full-measure lines but avoids a one-word last line, which reads better for a multi-line paragraph. */ .ksi-hero .ksi-tagline { margin-bottom: 1.25rem; font-size: 0.92rem; line-height: 1.55; text-wrap: pretty; } .ksi-cta { display: block; } .ksi-cta > p { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 19rem); margin: 0 auto; gap: 0.55rem; } .ksi-cta .md-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 2.45rem; padding: 0.45rem 0.75rem; gap: 0.35rem; white-space: nowrap; } .ksi-cta .md-button--primary { grid-column: 1 / -1; } .md-typeset .grid.cards > ul { gap: 0.7rem; } .md-typeset .grid.cards > ul > li { padding: 0.85rem; } .md-typeset .grid.cards > ul > li:hover { transform: none; box-shadow: none; } /* Long inline code (flags, paths, dotted identifiers) is the one thing Material doesn't already break on a narrow screen — `word-break: break-word` leaves an unbroken token to overflow the column. Block code needs nothing: Material gives `pre > code` its own `overflow: auto` and pulls top-level blocks edge-to-edge at this same breakpoint. Wide tables need nothing either — Material wraps every table in `.md-typeset__scrollwrap`, which already scrolls horizontally at all widths. */ .md-typeset :not(pre) > code { overflow-wrap: anywhere; } /* Diagrams keep their native size here too (see the useMaxWidth:false init directives in architecture.md) and scroll inside their own box. Shrinking a wide flowchart to a 360px column would make its labels unreadable — the exact problem native sizing was introduced to fix — so on mobile the always-visible expand button below is the way to read a large diagram. `overscroll-behavior-x` stops a swipe at the diagram's edge from triggering the browser's back-navigation gesture. */ .md-typeset .mermaid { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* No hover on touch, so the expand affordance has to be permanently visible, and sized to a comfortable touch target. */ .mermaid-expand-btn { top: 0.4rem; right: 0.4rem; width: 2.25rem; height: 2.25rem; opacity: 1; } .mermaid-zoom-toolbar { gap: 0.5rem; padding: 0.6rem; } .mermaid-zoom-toolbar button { min-width: 2.5rem; height: 2.5rem; padding: 0 0.65rem; } .mermaid-zoom-toolbar [data-act="reset"] { flex: 1 1 auto; } }