/* * monolisa.css — site-wide MonoLisa typography layer. * * One source of truth that conforms every page to the MonoLisa family: * MonoLisaText → prose + UI (the proportional companion face) * MonoLisaCode → code, pre, kbd, terminals (the monospaced face) * * Injected into the of every standalone tool at build time * (see build/typography.ts); the generated chrome (index / colophon / * by-month) picks up the same families through build/theme.ts. * * Delivery is local() only: browsers with MonoLisa installed render it, and * everyone else falls through to the existing high-quality system stacks — no * licensed font files are committed. To self-host later, add * `src: url("/fonts/…woff2") format("woff2")` ahead of the local() sources. */ /* --- MonoLisaCode (monospaced) ------------------------------------------- */ @font-face { font-family: "MonoLisaCode"; src: local("MonoLisa"), local("MonoLisa Regular"), local("MonoLisaVariable"), local("MonoLisa Variable"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "MonoLisaCode"; src: local("MonoLisa Italic"), local("MonoLisaVariable Italic"); font-weight: 100 900; font-style: italic; font-display: swap; } /* --- MonoLisaText (proportional) ----------------------------------------- */ @font-face { font-family: "MonoLisaText"; src: local("MonoLisa Text"), local("MonoLisa Text Regular"), local("MonoLisaText"), local("MonoLisa Text Variable"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "MonoLisaText"; src: local("MonoLisa Text Italic"), local("MonoLisaText Italic"); font-weight: 100 900; font-style: italic; font-display: swap; } :root { /* Canonical stacks. Kept in sync with build/theme.ts. */ --ml-code: "MonoLisaCode", ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace; --ml-text: "MonoLisaText", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* * Proportional prose + UI → MonoLisaText. * * `html body` (0,0,2) outranks a tool's own bare `body { font-family }` (0,0,1) * on specificity, so no !important is needed — and because this only sets the * font that child elements *inherit*, any element carrying its own font-family * (icon fonts, deliberate monospace widgets) is left untouched. */ html body { font-family: var(--ml-text); } /* Form controls don't inherit font-family by default — opt them back in. */ html button, html input, html select, html textarea, html optgroup { font-family: inherit; } /* Code / monospace contexts → MonoLisaCode. html-prefixed to beat a tool's own bare `pre`/`code` rule on specificity via source-order-independent win. */ html code, html pre, html kbd, html samp, html tt, html .hljs, html [class*="language-"], html [class*="lang-"] { font-family: var(--ml-code); }