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/* The demo entry wears the demo's own magma dress — the incident board's97 report button: heat gradient, sharp 2px corners, char text, ember glow on98 hover, warm focus ring. Self-contained, so it reads the same on both color99 modes and in the mobile drawer. */100.navbar-demo-link {101 background: linear-gradient(120deg, #b3122e, #ff3d00 55%, #ff9d45);102 border-radius: 2px;103 color: #1a0703;104 font-weight: 800;105 letter-spacing: 0.05em;106 text-transform: uppercase;107}108.navbar__items .navbar-demo-link {109 margin-left: 0.25rem;110 padding: 0.25rem 0.75rem;111}112.navbar-sidebar .menu__link.navbar-demo-link {113 color: #1a0703;114 margin: 0.25rem 0;115 width: fit-content;116}117.navbar-demo-link:hover {118 box-shadow: 0 0 20px rgba(255, 61, 0, 0.4);119 color: #1a0703;120}121.navbar-demo-link:focus-visible {122 outline: 3px solid #ffcf99;123 outline-offset: 2px;124}125126/* Dracula's comment color fails WCAG contrast on its background; sage127 clears 4.5:1. prism-react-renderer inlines token colors, so !important. */128[data-theme="dark"] .theme-code-block .token.comment,129[data-theme="dark"] .theme-code-block .token.prolog,130[data-theme="dark"] .theme-code-block .token.cdata {131 color: #8fae9f ;132}133134/* Tables everywhere share the landing pages' editorial style instead of135 Infima's boxed default: no outer borders, no striped rows, no header136 background — mono uppercase section-label headers over a strong rule,137 hairline row rules, and a symmetric 1rem inset on the outer columns.138 Colors ride the theme variables, so light and dark both work. */139.markdown table {140 border-collapse: collapse;141}142.markdown table thead,143.markdown table tr,144.markdown table tr:nth-child(2n) {145 background: none;146 border: 0;147}148.markdown table th {149 background: none;150 border: 0;151 border-bottom: 1px solid var(--ifm-color-emphasis-500);152 font-family: var(--ifm-font-family-monospace);153 font-weight: 500;154 font-size: 0.82rem;155 letter-spacing: 0.14em;156 text-transform: uppercase;157 text-align: left;158 color: var(--ifm-color-primary);159 vertical-align: middle;160 padding: 0.55rem 1rem 0.55rem 0;161}162.markdown table td {163 background: none;164 border: 0;165 border-bottom: 1px solid var(--ifm-color-emphasis-200);166 padding: 0.7rem 1rem 0.7rem 0;167 vertical-align: top;168}169.markdown table th:first-child,170.markdown table td:first-child {171 padding-left: 1rem;172}173174/* The footer wears the brand forest, like the navbar — but muted: it is a175 jump table, not a destination, so links sit dim until hovered. */176.footer--dark {177 --ifm-footer-background-color: #18231f;178 --ifm-footer-color: #8fae9f;179 --ifm-footer-link-color: #8fae9f;180 --ifm-footer-link-hover-color: #f3faf6;181 --ifm-footer-title-color: #6f9d88;182 --ifm-footer-padding-vertical: 2rem;183}184.footer--dark .footer__title {185 font-size: 0.85rem;186 margin-bottom: 0.35rem;187}188/* Each product's links flow in one row where space allows and wrap to a189 compact grid where it doesn't. */190.footer--dark .footer__items {191 display: flex;192 flex-wrap: wrap;193 gap: 0.2rem 1.6rem;194}195.footer--dark .footer__item {196 margin: 0;197}198.footer--dark .footer__copyright {199 font-size: 0.82rem;200}