/* Inference Cooperative brand layer for the documentation site. * * Design-system source of truth: the co-op's chat/dashboard/portal/panel * palette, carried in two places and kept identical there — * repos/librechat-custom/assets/custom.css (html.light / html.dark RGB triples) * repos/member-dashboard/app/main.py (the dashboard's :root palette) * This file reuses those exact values so the documentation reads as the same * organisation in both schemes, not a default Material theme. * * Standing constraint: everything here is local. No third-party font service, * no CDN, no other external host. */ :root { /* -- the co-op's light palette (dashboard/portal/panel design system) -- */ --cream: #faf8f5; /* page background */ --white: #ffffff; /* cards */ --ink: #2d3327; /* primary text (warm, not near-black) */ --muted: #6b7a62; /* secondary text */ --light-muted: #94a08c; /* tertiary text */ --green-deep: #5b8c5a; --green-mid: #6ba86b; --green-light: #7ab87a; --green-link: #4e7a4d; /* dashboard link green — 4.7:1 on cream */ --green-ink: #2f5c30; --border: #e4e0d8; /* warm neutral border (design-system value) */ --wash: #eaf3ea; /* the dashboard's green wash, used sparingly */ --chip: #f4f2ec; /* warm chip / code background */ --hover: #f0ede6; /* warm hover */ --bar-track: #eef0ea; /* neutral track for meters */ --earth-red: #a04b3a; --earth-red-wash: #f3e6e1; --bronze: #a97a4a; --bronze-wash: #f1e8da; /* -- the co-op's dark palette: the deep-pine family from the chat overlay -- */ --pine: #22271f; /* 34 39 31 — page background */ --pine-2: #2a3027; /* 42 48 39 — raised surface (footer, cards) */ --pine-3: #343b30; /* 52 59 48 — chips / code background */ --pine-hover: #2d3327; /* --ink reused as the hover band */ --dark-border: #4a5240; /* 74 82 64 — warm dark border */ --dark-text: #e8f5e8; /* 232 245 232 — light warm text */ --dark-muted: #94a08c; /* 148 160 140 — muted text */ } /* ---------- Material for MkDocs: map the palette onto the theme ---------- */ /* Light scheme: the header is a pale green WASH with dark text, not a saturated green * bar. The colour is the homepage's "open source" pill (#e8f5e8). The deep greens stay * for ACCENTS -- links, active navigation, rules -- rather than as large background fills. */ :root, [data-md-color-scheme="default"] { --md-default-bg-color: var(--cream); --md-default-fg-color: var(--ink); --md-default-fg-color--light: var(--muted); --md-default-fg-color--lighter: var(--light-muted); --md-default-fg-color--lightest: var(--border); --md-primary-fg-color: #e8f5e8; --md-primary-fg-color--light: #eef4ea; --md-primary-fg-color--dark: var(--green-deep); --md-primary-bg-color: var(--ink); --md-primary-bg-color--light: rgba(250, 248, 245, 0.7); --md-accent-fg-color: var(--earth-red); --md-typeset-a-color: var(--green-link); --md-typeset-color: var(--ink); --md-typeset-table-color: var(--border); --md-code-bg-color: var(--chip); --md-code-fg-color: var(--ink); --md-footer-bg-color: var(--wash); --md-footer-fg-color: var(--ink); --md-footer-fg-color--light: var(--muted); --md-admonition-bg-color: var(--wash); } /* Dark scheme: the co-op's own deep pine, not Material's cold blue-grey slate. * The old page background measured #1e2129 (a blue-grey); this scheme is the * chat overlay's dark palette (--surface-primary #22271f and its family), so a * dark screen reads as the co-op's green identity, not stock Material. */ [data-md-color-scheme="slate"] { --md-default-bg-color: var(--pine); --md-default-fg-color: var(--dark-text); --md-default-fg-color--light: var(--dark-muted); --md-default-fg-color--lighter: #6f7a68; --md-default-fg-color--lightest: rgba(148, 160, 140, 0.12); /* Header bar now matches the chat overlay's dark menu: #171717 with white * text (operator request 2026-11-09) — neutral dark, not green. */ --md-primary-fg-color: #171717; --md-primary-fg-color--light: #171717; --md-primary-fg-color--dark: #171717; --md-primary-bg-color: #ffffff; --md-primary-bg-color--light: rgba(255, 255, 255, 0.7); --md-accent-fg-color: var(--green-light); --md-typeset-a-color: var(--green-light); --md-typeset-color: var(--dark-text); --md-typeset-table-color: var(--dark-border); --md-code-bg-color: var(--pine-3); --md-code-fg-color: var(--dark-text); --md-footer-bg-color: var(--pine-2); --md-footer-fg-color: var(--dark-text); --md-footer-fg-color--light: var(--dark-muted); --md-admonition-bg-color: var(--pine-2); } /* ---------- Typography: Figtree, self-hosted (SIL OFL 1.1) ---------- */ @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/figtree-400.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/figtree-500.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/figtree-600.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/figtree-700.woff2") format("woff2"); } :root { --md-text-font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --md-code-font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; } /* ---------- Friendly details ---------- */ /* Links read like the website's: brand green, semibold, underline on hover. */ .md-typeset a { font-weight: 600; } .md-typeset a:hover, .md-typeset a:focus { text-decoration: underline; } /* Rounder cards and tables; a warm neutral border, never a near-black one. */ .md-typeset .grid.cards > ul > li, .md-typeset .grid > .card, .md-typeset table:not([class]) { border-radius: 0.6rem; } .md-typeset table:not([class]) { border: 1px solid var(--md-typeset-table-color); } /* Header: co-op green with the cream wordmark. */ .md-header { box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); } [data-md-color-scheme="slate"] .md-header { border-bottom: 1px solid rgba(0, 0, 0, 0.22); } .md-header .md-header__title { font-weight: 600; } /* The menu-bar (tab) strip. In light it is the same pale green WASH as the * header — #e8f5e8, the homepage's "open source" pill — not a saturated fill: * the deep greens are accents (links, active navigation, rules), and a large * --green-deep bar clashed with the rest of the light palette. A warm hairline * separates the wash from the cream page below it. Dark is unchanged. */ .md-tabs { background-color: #e8f5e8; border-bottom: 1px solid var(--border); } /* In dark, keep the tab row the same green as the header bar so the text on it * clears 4.5:1 against green-mid (green-deep against near-black text is only * ~4.2:1 — marginal for the small tab labels). */ [data-md-color-scheme="slate"] .md-tabs { background-color: var(--green-mid); border-bottom: none; } .md-search__input { background-color: rgba(255, 255, 255, 0.92); } /* Admonitions get the co-op's washes instead of stock greys. */ .md-typeset .admonition, .md-typeset details { border-radius: 0.6rem; } .md-typeset .admonition.tip, .md-typeset .admonition.note { border-color: var(--green-mid); } .md-typeset .admonition.warning { border-color: var(--earth-red); } /* ---------- Typography: make Figtree actually apply ---------- * Material renders body and headings with var(--md-text-font-family) and defines that * variable on , so a :root definition loses to it by proximity in the DOM -- the * same way the colours lost to the palette. Declare the font on the elements themselves * as well. Sizing lives in publishing/typography.css, which loads after this file. */ body, .md-typeset, .md-nav, .md-header, .md-tabs { font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6, .md-header__title { font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }