/* Zen — the Hanzo family, sans and mono. Self-hosted beside this file: one variable woff2 per family covers 100–900, so the six static weights this replaced are two requests now, and neither one goes to a host we do not own. The SIL OFL notice travels with the binaries at fonts/LICENSE-Zen.txt. */ @font-face { font-family: 'Zen'; src: url('fonts/Zen-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Zen Mono'; src: url('fonts/ZenMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* Root variables - Light mode defaults */ :root { /* Font families */ --md-text-font: 'Zen', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --md-code-font: 'Zen Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* shadcn/ui inspired colors - light mode */ --md-primary-fg-color: #09090b; --md-primary-fg-color--light: #18181b; --md-primary-fg-color--dark: #000000; --md-primary-bg-color: #ffffff; --md-primary-bg-color--light: #fafafa; --md-accent-fg-color: #09090b; --md-accent-fg-color--transparent: rgba(9, 9, 11, 0.1); --md-accent-bg-color: #f4f4f5; --md-default-fg-color: #09090b; --md-default-fg-color--light: #71717a; --md-default-fg-color--lighter: #a1a1aa; --md-default-fg-color--lightest: #e4e4e7; --md-default-bg-color: #ffffff; --md-default-bg-color--light: #fafafa; --md-default-bg-color--lighter: #f4f4f5; --md-default-bg-color--lightest: #e4e4e7; /* Code */ --md-code-fg-color: #09090b; --md-code-bg-color: #f4f4f5; --md-code-hl-color: rgba(9, 9, 11, 0.1); /* Footer */ --md-footer-fg-color: #71717a; --md-footer-fg-color--light: #a1a1aa; --md-footer-fg-color--lighter: #d4d4d8; --md-footer-bg-color: #09090b; --md-footer-bg-color--dark: #000000; /* Typography */ --md-typeset-color: #09090b; --md-typeset-a-color: #09090b; } /* Dark mode (slate scheme) - Pure black like shadcn */ [data-md-color-scheme="slate"] { /* Pure black background like shadcn dark mode */ --md-default-bg-color: #09090b; --md-default-bg-color--light: #18181b; --md-default-bg-color--lighter: #27272a; --md-default-bg-color--lightest: #3f3f46; /* Light text on dark */ --md-default-fg-color: #fafafa; --md-default-fg-color--light: #a1a1aa; --md-default-fg-color--lighter: #71717a; --md-default-fg-color--lightest: #52525b; /* Primary colors */ --md-primary-fg-color: #fafafa; --md-primary-fg-color--light: #e4e4e7; --md-primary-fg-color--dark: #ffffff; --md-primary-bg-color: #09090b; --md-primary-bg-color--light: #18181b; /* Accent */ --md-accent-fg-color: #fafafa; --md-accent-fg-color--transparent: rgba(250, 250, 250, 0.1); --md-accent-bg-color: #27272a; /* Code blocks */ --md-code-fg-color: #fafafa; --md-code-bg-color: #18181b; --md-code-hl-color: rgba(250, 250, 250, 0.1); /* Typography */ --md-typeset-color: #fafafa; --md-typeset-a-color: #fafafa; /* Footer */ --md-footer-bg-color: #000000; --md-footer-bg-color--dark: #000000; /* Search */ --md-search-result-icon-color: #71717a; } /* Search box styling - dark mode */ [data-md-color-scheme="slate"] .md-search__form { background-color: #18181b; border: 1px solid #27272a; border-radius: 0.5rem; } [data-md-color-scheme="slate"] .md-search__input { background-color: transparent; color: #fafafa; } [data-md-color-scheme="slate"] .md-search__input::placeholder { color: #71717a; } [data-md-color-scheme="slate"] .md-search__icon { color: #71717a; } /* Search modal (Cmd+K) styling */ [data-md-color-scheme="slate"] .md-search__output { background-color: #18181b; border: 1px solid #27272a; border-radius: 0.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } [data-md-color-scheme="slate"] .md-search-result { background-color: transparent; } [data-md-color-scheme="slate"] .md-search-result__meta { background-color: #09090b; color: #71717a; } [data-md-color-scheme="slate"] .md-search-result__item { border-bottom: 1px solid #27272a; } [data-md-color-scheme="slate"] .md-search-result__link { background-color: transparent; } [data-md-color-scheme="slate"] .md-search-result__link:hover, [data-md-color-scheme="slate"] .md-search-result__link:focus { background-color: #27272a; } [data-md-color-scheme="slate"] .md-search-result__article { background-color: transparent; } [data-md-color-scheme="slate"] .md-search-result__title { color: #fafafa; } [data-md-color-scheme="slate"] .md-search-result__teaser { color: #a1a1aa; } /* Search shortcut hint (⌘K) */ .md-search__input::placeholder { opacity: 1; } [data-md-color-scheme="slate"] .md-search__scrollwrap { background-color: #18181b; } /* Sidebar navigation - remove blue links */ [data-md-color-scheme="slate"] .md-nav__link { color: #a1a1aa; } [data-md-color-scheme="slate"] .md-nav__link:hover { color: #fafafa; } [data-md-color-scheme="slate"] .md-nav__link--active, [data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link { color: #fafafa; font-weight: 600; } /* Remove all blue accent colors */ [data-md-color-scheme="slate"] .md-nav__link[data-md-state="blur"] { color: #a1a1aa; } [data-md-color-scheme="slate"] .md-typeset a { color: #fafafa; } [data-md-color-scheme="slate"] .md-typeset a:hover { color: #ffffff; } /* Header - pure black */ .md-header { background-color: #000000; border-bottom: 1px solid #27272a; } .md-header--shadow { box-shadow: none; } /* Tabs in header */ .md-tabs { background-color: #000000; } .md-tabs__link { color: #a1a1aa !important; font-weight: 500; opacity: 1 !important; } .md-tabs__link:hover, .md-tabs__link--active { color: #fafafa !important; } /* Header text and icons */ .md-header__title { color: #fafafa; } .md-header__button { color: #fafafa; } .md-header__source { color: #a1a1aa; } /* Search input in header */ .md-search__input { color: #fafafa; } .md-search__input::placeholder { color: #71717a; } /* Navigation sidebar */ [data-md-color-scheme="slate"] .md-sidebar { background-color: #09090b; } [data-md-color-scheme="slate"] .md-nav { background-color: transparent; } /* Typography */ .md-typeset { font-size: 0.9rem; line-height: 1.7; } .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 { font-weight: 600; letter-spacing: -0.02em; color: var(--md-default-fg-color); } .md-typeset h1 { font-size: 2rem; margin-bottom: 1rem; } .md-typeset h2 { font-size: 1.5rem; margin-top: 2rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--md-default-fg-color--lightest); } .md-typeset h3 { font-size: 1.25rem; margin-top: 1.5rem; } .md-typeset p, .md-typeset li { font-size: 0.95rem; color: var(--md-default-fg-color--light); } [data-md-color-scheme="slate"] .md-typeset p, [data-md-color-scheme="slate"] .md-typeset li { color: #a1a1aa; } /* Links */ .md-typeset a { color: var(--md-typeset-a-color); text-decoration: none; border-bottom: 1px solid var(--md-default-fg-color--lightest); transition: border-color 0.2s; } .md-typeset a:hover { border-color: var(--md-default-fg-color); } /* Code blocks - shadcn style */ .md-typeset code { font-family: var(--md-code-font); font-size: 0.875em; padding: 0.2em 0.4em; border-radius: 0.375rem; background-color: var(--md-code-bg-color); color: var(--md-code-fg-color); } .md-typeset pre { border-radius: 0.5rem; border: 1px solid var(--md-default-fg-color--lightest); } .md-typeset pre > code { font-size: 0.875rem; padding: 1rem; } /* Tables */ .md-typeset table:not([class]) { font-size: 0.875rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 0.5rem; overflow: hidden; } .md-typeset table:not([class]) th { background-color: var(--md-default-bg-color--lighter); font-weight: 600; } .md-typeset table:not([class]) td, .md-typeset table:not([class]) th { border-color: var(--md-default-fg-color--lightest); padding: 0.75rem 1rem; } /* Admonitions - shadcn card style */ .md-typeset .admonition, .md-typeset details { border: 1px solid var(--md-default-fg-color--lightest); border-radius: 0.5rem; background-color: var(--md-default-bg-color--light); box-shadow: none; } .md-typeset .admonition-title, .md-typeset summary { background-color: transparent; border-bottom: 1px solid var(--md-default-fg-color--lightest); font-weight: 600; } /* Navigation */ .md-nav__link { font-size: 0.875rem; } .md-nav__link--active { font-weight: 600; } /* Search */ .md-search__input { background-color: var(--md-default-bg-color--lighter); border-radius: 0.5rem; } [data-md-color-scheme="slate"] .md-search__input { background-color: #18181b; } /* Content area max-width */ .md-content { max-width: 900px; } /* Hide footer */ .md-footer { display: none; } /* Logo sizing */ .md-header__button.md-logo img, .md-header__button.md-logo svg { height: 1.5rem; width: auto; } /* TOC on the right */ .md-sidebar--secondary { border-left: 1px solid var(--md-default-fg-color--lightest); } /* Clipboard button */ .md-clipboard { color: var(--md-default-fg-color--lighter); } /* Tab styling */ .md-typeset .tabbed-labels > label { font-size: 0.875rem; font-weight: 500; } /* Button-like elements */ .md-typeset .md-button { border-radius: 0.375rem; font-weight: 500; padding: 0.5rem 1rem; } /* Scrollbar styling for dark mode */ [data-md-color-scheme="slate"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-md-color-scheme="slate"] ::-webkit-scrollbar-track { background: #18181b; } [data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; } [data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover { background: #52525b; }