librechat-custom/assets/custom.css

/* ============================================================
   Inference Co-op branding — LibreChat overlay (v4)
   Palette = the dashboard/portal/panel design system, read from the
   DEPLOYED CSS of each and kept identical: --cream #faf8f5 (page
   background), white #ffffff (cards/sidebar), warm neutrals #f4f2ec /
   #f0ede6 (chips, hovers), border #e4e0d8, ink #2d3327, muted #6b7a62,
   accents --green-deep #5b8c5a / --green-mid #6ba86b / --green-light
   #7ab87a, danger #b3543a, font Figtree.
   The green wash #eaf3ea lives in the dashboard's vocabulary but is
   used there only sparingly (badges, table headers) — NOT as a page
   background. v3 used it for surfaces, which read as "too green".
   LibreChat resolves its Tailwind colors through CSS variables on
   html.light / html.dark (space-separated RGB) — overriding them
   rebrands the WHOLE app through the existing theme system.
   ============================================================ */

html.light {
  --surface-primary: 250 248 245;   /* --cream #faf8f5 — PAGE background, as on the dashboard */
  --surface-secondary: 255 255 255; /* sidebar + composer box: white cards, as on the dashboard */
  --surface-tertiary: 244 242 236;  /* #f4f2ec warm chip background (was green-tinted) */
  --surface-hover: 240 237 230;     /* #f0ede6 warm hover (was green) */
  --surface-submit: 91 140 90;      /* --green-deep #5b8c5a */
  --surface-submit-hover: 107 168 107; /* --green-mid #6ba86b */
  --accent-primary: 91 140 90;      /* --green-deep */
  --accent-primary-hover: 107 168 107; /* --green-mid */
  --ring-primary: 91 140 90;
  --link: 78 122 77;                /* #4e7a4d — the deeper green the dashboard uses; 4.7:1 on cream */
  --text-primary: 45 51 39;         /* --ink #2d3327 */
  --text-secondary: 107 122 98;     /* --muted #6b7a62 */
  --border-light: 228 224 216;      /* --border #e4e0d8 — warm neutral, was green-tinted */
  --presentation: 250 248 245;      /* composer band matches the cream page */
  --surface-chat: 255 255 255;      /* chat box text areas: white */
  --surface-composer-hover: 240 237 230;
}

html.dark {
  --surface-primary: 34 39 31;      /* deep pine */
  --surface-secondary: 42 48 39;
  --surface-tertiary: 52 59 48;
  --surface-hover: 45 51 39;        /* --ink */
  --surface-submit: 122 184 122;    /* --green-light #7ab87a */
  --surface-submit-hover: 142 200 142;
  --accent-primary: 122 184 122;
  --accent-primary-hover: 142 200 142;
  --ring-primary: 142 200 142;
  --link: 142 200 142;
  --text-primary: 232 245 232;      /* #e8f5e8 */
  --text-secondary: 148 160 140;
  --border-light: 74 82 64;
  --presentation: 34 39 31;
  --surface-chat: 34 39 31;
  --surface-composer-hover: 42 48 39;
}

/* ---- Figtree font (design kit, SIL OFL) — matches homepage & dashboard ---- */
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Loading screen: brand the pre-React flash instead of white/black ---- */
#loading-container {
  background-color: rgb(250, 248, 245); /* cream, matches the page */
}
@media (prefers-color-scheme: dark) {
  #loading-container {
    background-color: rgb(34, 39, 31);  /* deep pine */
  }
}


/* Homepage font stack — Figtree first, self-hosted above */
html, body, button, input, select, textarea, [class*='font-'] {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
}

/* ---- Remove the "Don't have an account? Sign up" line ----
   The <p> wraps the register link on auth pages. :has() hides the
   whole paragraph (custom2.js is the MutationObserver fallback). */
p:has(> a[href*="register"]) {
  display: none !important;
}
/* Belt-and-braces: hide any residual register/signup links */
a[href*="register"],
a[href*="signup"] {
  display: none !important;
}

/* ---- Footer: the LibreChat tagline is replaced at build time
      (patch_ui_strings.py) with the co-op footer text; CSS just centers it ---- */
footer {
  text-align: center;
  padding: 1rem;
}
footer a {
  color: rgb(var(--accent-primary));
  font-weight: 600;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

/* Bare page background: cream in light, deep pine in dark — so any viewport
   area the app UI does not cover (e.g. PWA navigation-bar insets) matches.
   These are the PWA band colors; keep them in sync with custom2.js COOP_BG
   and the manifest theme_color, or the system bars mismatch the page. */
html:not(.dark), html:not(.dark) body { background-color: rgb(250, 248, 245); }
html.dark, html.dark body { background-color: rgb(34, 39, 31); }

/* ---- PWA safe areas: with viewport-fit=cover the page draws under system
   bars — the bands then show the theme-correct page background instead of
   OS-default white, and this padding keeps app content clear of the bars. ---- */
@media (display-mode: standalone) {
  #root {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}