1/**2 * Global overrides on top of Infima, tuned to the lofi brand palette3 * (docs/assets/brand/README.md): forest #18231f, lime #d5f26a,4 * cream #f3faf6, mint #99e5bd, jade #39725c.5 */67/* Self-hosted fonts (Fontsource): bundled and precached, so offline visits8 keep their real faces and no request leaves the origin. Latin subsets and9 only the weights the site actually sets — the full subset files would10 multiply the payload for scripts the docs never use. */11/* brand mark */12@import "@fontsource/nunito/latin-900.css";13/* root landing display */14@import "@fontsource/comfortaa/latin-700.css";15/* landing body */16@import "@fontsource/karla/latin-400.css";17@import "@fontsource/karla/latin-500.css";18@import "@fontsource/karla/latin-700.css";19/* mono: landings, docs code blocks */20@import "@fontsource/ibm-plex-mono/latin-400.css";21@import "@fontsource/ibm-plex-mono/latin-500.css";22@import "@fontsource/ibm-plex-mono/latin-600.css";23/* /node display + mark */24@import "@fontsource/young-serif/latin-400.css";25@import "@fontsource/grenze-gotisch/latin-500.css";26/* /node body */27@import "@fontsource/alegreya-sans/latin-400.css";28@import "@fontsource/alegreya-sans/latin-400-italic.css";29@import "@fontsource/alegreya-sans/latin-500.css";30@import "@fontsource/alegreya-sans/latin-700.css";31/* /node mono */32@import "@fontsource/spline-sans-mono/latin-400.css";33@import "@fontsource/spline-sans-mono/latin-500.css";34@import "@fontsource/spline-sans-mono/latin-600.css";3536:root {37 --ifm-color-primary: #39725c;38 --ifm-color-primary-dark: #336753;39 --ifm-color-primary-darker: #30614e;40 --ifm-color-primary-darkest: #285040;41 --ifm-color-primary-light: #3f7d65;42 --ifm-color-primary-lighter: #42836a;43 --ifm-color-primary-lightest: #4a9477;44 --ifm-code-font-size: 95%;45 --ifm-font-family-monospace: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;46 --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);4748 /* the navbar wears the brand forest on both color modes, so the49 landing page and the docs share one continuous header */50 --ifm-navbar-background-color: #18231f;51 --ifm-navbar-link-color: #f3faf6;52 --ifm-navbar-link-hover-color: #d5f26a;53 --ifm-menu-color-background-active: rgba(57, 114, 92, 0.12);54}5556[data-theme="dark"] {57 /* the active search hit keeps the mint highlight, so its text needs58 forest ink instead of the plugin's default white */59 --search-local-hit-active-color: #18231f;60 --ifm-color-primary: #99e5bd;61 --ifm-color-primary-dark: #7dddac;62 --ifm-color-primary-darker: #6fd9a3;63 --ifm-color-primary-darkest: #46cd8b;64 --ifm-color-primary-light: #b5edce;65 --ifm-color-primary-lighter: #c3f0d8;66 --ifm-color-primary-lightest: #edfbf3;67 --ifm-background-color: #131b18;68 --ifm-background-surface-color: #18231f;69 --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);70}7172.navbar {73 --ifm-navbar-search-input-background-color: #22332c;74 --ifm-navbar-search-input-color: #f3faf6;75 --ifm-navbar-search-input-placeholder-color: #8fae9f;76 /* Infima ships the magnifier as a dark-grey data URI; recolor it to sage */77 --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="%238fae9f" xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" width="16px"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');78}79.navbar__logo {80 /* the wordmark is wide (1120x360); give it room and keep it crisp */81 height: 1.7rem;82 width: auto;83}84.navbar__toggle,85.navbar .clean-btn {86 color: #f3faf6;87}88/* mobile menu inherits the navbar surface */89.navbar-sidebar {90 background-color: #18231f;91}92.navbar-sidebar .menu__link {93 color: #f3faf6;94}9596/* Dracula's comment color fails WCAG contrast on its background; sage97 clears 4.5:1. prism-react-renderer inlines token colors, so !important. */98[data-theme="dark"] .theme-code-block .token.comment,99[data-theme="dark"] .theme-code-block .token.prolog,100[data-theme="dark"] .theme-code-block .token.cdata {101 color: #8fae9f ;102}103104/* Tables everywhere share the landing pages' editorial style instead of105 Infima's boxed default: no outer borders, no striped rows, no header106 background — mono uppercase section-label headers over a strong rule,107 hairline row rules, and a symmetric 1rem inset on the outer columns.108 Colors ride the theme variables, so light and dark both work. */109.markdown table {110 border-collapse: collapse;111}112.markdown table thead,113.markdown table tr,114.markdown table tr:nth-child(2n) {115 background: none;116 border: 0;117}118.markdown table th {119 background: none;120 border: 0;121 border-bottom: 1px solid var(--ifm-color-emphasis-500);122 font-family: var(--ifm-font-family-monospace);123 font-weight: 500;124 font-size: 0.82rem;125 letter-spacing: 0.14em;126 text-transform: uppercase;127 text-align: left;128 color: var(--ifm-color-primary);129 vertical-align: middle;130 padding: 0.55rem 1rem 0.55rem 0;131}132.markdown table td {133 background: none;134 border: 0;135 border-bottom: 1px solid var(--ifm-color-emphasis-200);136 padding: 0.7rem 1rem 0.7rem 0;137 vertical-align: top;138}139.markdown table th:first-child,140.markdown table td:first-child {141 padding-left: 1rem;142}143144/* The footer wears the brand forest, like the navbar — but muted: it is a145 jump table, not a destination, so links sit dim until hovered. */146.footer--dark {147 --ifm-footer-background-color: #18231f;148 --ifm-footer-color: #8fae9f;149 --ifm-footer-link-color: #8fae9f;150 --ifm-footer-link-hover-color: #f3faf6;151 --ifm-footer-title-color: #6f9d88;152 --ifm-footer-padding-vertical: 2rem;153}154.footer--dark .footer__title {155 font-size: 0.85rem;156 margin-bottom: 0.35rem;157}158/* Each product's links flow in one row where space allows and wrap to a159 compact grid where it doesn't. */160.footer--dark .footer__items {161 display: flex;162 flex-wrap: wrap;163 gap: 0.2rem 1.6rem;164}165.footer--dark .footer__item {166 margin: 0;167}168.footer--dark .footer__copyright {169 font-size: 0.82rem;170}