/* ============================================================================= * Voltava branding for LibreChat — LIGHT THEME ONLY * ----------------------------------------------------------------------------- * This file is injected by nginx (sub_filter) right before . It never * touches LibreChat source, so it survives every image/version upgrade. * * Strategy: override LibreChat's own CSS custom properties (defined in * client/src/style.css) rather than individual components. Color overrides are * scoped to `html:not(.dark)` so the DARK theme is left completely stock. * * Brand tokens (project-management/_brand-tokens.js + events.voltava.com): * Navy #002561 primary brand * Lime #B2D324 signature accent * Fonts Arial Nova -> Arial fallback * ========================================================================== */ /* --------------------------------------------------------------------------- * Brand palette (private vars; mapped into LibreChat tokens below) * ------------------------------------------------------------------------- */ :root { --vt-navy: #002561; --vt-navy-deep: #0B255E; --vt-navy-darker: #0E1A33; --vt-lime: #B2D324; --vt-lime-deep: #9CBA1F; --vt-surface: #F4F6FB; --vt-surface-mid: #E2E7F0; } /* --------------------------------------------------------------------------- * Typography — applied to BOTH themes (font is brand-neutral, not a color). * Plus Jakarta Sans Variable is the platform typeface (matches the management * dashboard). It is self-hosted: nginx serves the woff2 files at /brand/fonts/ * (see nginx.conf + Dockerfile), so no external font CDN and no LibreChat source * changes. Arial Nova / Arial remain as graceful fallbacks while the font loads * (font-display: swap) or if a request for the woff2 fails. * ------------------------------------------------------------------------- */ @font-face { font-family: "Plus Jakarta Sans Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/brand/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Plus Jakarta Sans Variable"; font-style: italic; font-display: swap; font-weight: 200 800; src: url(/brand/fonts/plus-jakarta-sans-latin-wght-italic.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Plus Jakarta Sans Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/brand/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Plus Jakarta Sans Variable"; font-style: italic; font-display: swap; font-weight: 200 800; src: url(/brand/fonts/plus-jakarta-sans-latin-ext-wght-italic.woff2) format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Plus Jakarta Sans Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/brand/fonts/plus-jakarta-sans-vietnamese-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } @font-face { font-family: "Plus Jakarta Sans Variable"; font-style: italic; font-display: swap; font-weight: 200 800; src: url(/brand/fonts/plus-jakarta-sans-vietnamese-wght-italic.woff2) format("woff2-variations"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } @font-face { font-family: "Plus Jakarta Sans Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/brand/fonts/plus-jakarta-sans-cyrillic-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: "Plus Jakarta Sans Variable"; font-style: italic; font-display: swap; font-weight: 200 800; src: url(/brand/fonts/plus-jakarta-sans-cyrillic-ext-wght-italic.woff2) format("woff2-variations"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } html body { font-family: "Plus Jakarta Sans Variable", "Arial Nova", Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* =========================================================================== * LIGHT THEME ONLY — everything below is scoped to html:not(.dark) * ========================================================================= */ /* Map brand colors onto LibreChat's design tokens. Overriding these variables * re-themes accents, the submit/send button, focus rings, etc. site-wide * without targeting individual components. */ html:not(.dark) { /* Primary accent (links, highlights, misc. brand purple usages) */ --brand-purple: var(--vt-navy); /* Send / submit / primary action button -> navy with deeper navy hover */ --surface-submit: var(--vt-navy); --surface-submit-hover: var(--vt-navy-deep); /* Focus ring + heavy borders pick up the navy */ --ring-primary: var(--vt-navy); /* shadcn-style tokens (HSL triplets) used by buttons/cards. * #002561 = hsl(217 100% 19%) */ --primary: 217 100% 19%; --primary-foreground: 0 0% 100%; --ring: 217 100% 19%; } /* Text selection uses the signature lime, light theme only */ html:not(.dark) ::selection { background: var(--vt-lime); color: var(--vt-navy-darker); } /* Links / anchors in chat content -> navy */ html:not(.dark) a:not([class*="btn"]):not([role="button"]) { color: var(--vt-navy); } /* Lime underline accent on link hover */ html:not(.dark) a:not([class*="btn"]):not([role="button"]):hover { text-decoration-color: var(--vt-lime); } /* --------------------------------------------------------------------------- * Auth/login page — AVA hero. * The whole auth surface is branded, not just the logo: the page becomes a navy * spotlight (in BOTH themes — this is the front door, it should always look * like Voltava), the AVA lockup sits directly on it, and the login box floats * above it as an elevated panel. * * nginx serves librechat/docker/brand-logo.png at /assets/logo.svg (the path * LibreChat's AuthLayout hardcodes). That asset is the card-less AVA lockup * (lime "AVA" + bloom > lime rule > "YOUR AI ASSISTANT" > white Voltava * wordmark), generated by `scripts/generate_login_logo.py --style plain`. * * AuthLayout renders it as `div.mt-6.h-10 > img.h-full.w-full.object-contain` * — a 40px slot sized for a wordmark, stranded at the top of the viewport. So * we size the img by WIDTH, let the slot auto-height, and push it down so it * groups with the login panel. * * Everything hangs off :has(), which also scopes it to auth pages (no other * route renders /assets/logo.svg). Browsers without :has() fall back to the * stock white/gray page — degraded, never broken. Motion respects * prefers-reduced-motion. * ------------------------------------------------------------------------- */ @keyframes vt-logo-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes vt-aura { from { opacity: 0.35; transform: translate(-50%, -50%) scale(0.94); } to { opacity: 0.9; transform: translate(-50%, -50%) scale(1.05); } } /* The page: navy spotlight, both themes */ div.min-h-screen:has(img[src$="assets/logo.svg"]) { background-color: #00142c; background-image: radial-gradient(115% 62% at 50% -10%, #0b4093 0%, rgba(11, 64, 147, 0) 60%), radial-gradient(60% 32% at 50% 16%, rgba(178, 211, 36, 0.10), rgba(178, 211, 36, 0) 70%), radial-gradient(95% 55% at 50% 115%, rgba(10, 62, 140, 0.50), rgba(10, 62, 140, 0) 70%); background-repeat: no-repeat; } /* The logo slot */ div:has(> img[src$="assets/logo.svg"]) { position: relative; height: auto; display: flex; justify-content: center; margin-top: clamp(2.5rem, 14vh, 9rem); } div:has(> img[src$="assets/logo.svg"]) > img { position: relative; z-index: 1; width: min(460px, 88vw); height: auto; filter: drop-shadow(0 12px 34px rgba(0, 0, 0, 0.5)); } /* Lime aura breathing behind the lockup */ div:has(> img[src$="assets/logo.svg"])::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 0; width: min(640px, 104vw); height: min(360px, 60vw); transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(178, 211, 36, 0.14), rgba(178, 211, 36, 0) 70%); } /* The login panel — only geometry/elevation is forced; the surface color stays * theme-driven so the controls inside keep their own contrast. */ div.min-h-screen:has(img[src$="assets/logo.svg"]) div[class*="w-authPageWidth"] { border-radius: 18px !important; padding: 2rem 1.75rem; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 30px 70px -20px rgba(0, 8, 24, 0.85); } html.dark div.min-h-screen:has(img[src$="assets/logo.svg"]) div[class*="w-authPageWidth"] { background-color: rgba(15, 23, 42, 0.94); border-color: rgba(255, 255, 255, 0.10); } html:not(.dark) div.min-h-screen:has(img[src$="assets/logo.svg"]) div[class*="w-authPageWidth"] h1 { color: var(--vt-navy); } /* Chrome that now sits on navy in the LIGHT theme: theme toggle + footer links */ div.min-h-screen:has(img[src$="assets/logo.svg"]) > div.absolute { color: rgba(255, 255, 255, 0.6); } div.min-h-screen:has(img[src$="assets/logo.svg"]) div[role="contentinfo"], div.min-h-screen:has(img[src$="assets/logo.svg"]) div[role="contentinfo"] a { color: rgba(226, 234, 246, 0.85); } div.min-h-screen:has(img[src$="assets/logo.svg"]) div[role="contentinfo"] a:hover { color: #ffffff; background: transparent; text-decoration-color: var(--vt-lime); } @media (prefers-reduced-motion: no-preference) { div:has(> img[src$="assets/logo.svg"]) > img { animation: vt-logo-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; } div:has(> img[src$="assets/logo.svg"])::before { animation: vt-aura 6s ease-in-out infinite alternate; } } /* --------------------------------------------------------------------------- * Chat footer — accuracy disclaimer only. * LibreChat renders the CUSTOM_FOOTER app setting through react-markdown inside * `div[role="contentinfo"]`, positioned `absolute bottom-0` under the composer. * It therefore MUST stay a single short line — a second line eats into the * composer as soon as a conversation is on screen. * * The disclaimer used to be `interface.customWelcome`, i.e. the 24px landing * headline (see the note in librechat.yaml); it belongs here as small print. * The "Need help?" link that used to share this row was removed — the guide * still lives at /support/help/. * ------------------------------------------------------------------------- */ div[role="contentinfo"] { font-size: 0.6875rem; /* 11px */ line-height: 1.4; font-weight: 400; opacity: 0.6; letter-spacing: 0.01em; flex-wrap: nowrap; white-space: nowrap; } div[role="contentinfo"] a { font-weight: 600; text-underline-offset: 2px; } html:not(.dark) div[role="contentinfo"] a { color: var(--vt-navy); text-decoration-color: var(--vt-lime); } html:not(.dark) div[role="contentinfo"] a:hover { color: var(--vt-navy-darker); } html.dark div[role="contentinfo"] a { color: var(--vt-lime); text-decoration-color: var(--vt-lime); } html.dark div[role="contentinfo"] a:hover { color: #ffffff; } /* --------------------------------------------------------------------------- * Empty-chat landing — AVA identity. * LibreChat's Landing renders the greeting + starter chips inside * `div.flex.h-full.transform-gpu.flex-col.items-center.justify-center.pb-16`. * Give that block a faint brand wash and put the lime AVA mark above the * greeting, so the screen users spend the most time on has a face. Both are * scoped to the landing container, so they vanish the moment a conversation * starts and never compete with message content. * * The mark is served by nginx at /brand/ava-mark.png (see Dockerfile + * nginx.conf); it is generated by scripts/generate_login_logo.py's polygon * helpers. Attribute selectors are used because the class list is Tailwind * utilities — re-check this hook on a LibreChat upgrade. * ------------------------------------------------------------------------- */ div[class*="transform-gpu"][class*="pb-16"] { background-repeat: no-repeat; background-image: radial-gradient(46% 26% at 50% 24%, rgba(178, 211, 36, 0.09), rgba(178, 211, 36, 0) 72%), radial-gradient(90% 50% at 50% -14%, rgba(0, 37, 97, 0.09), rgba(0, 37, 97, 0) 62%); } html.dark div[class*="transform-gpu"][class*="pb-16"] { background-image: radial-gradient(46% 26% at 50% 24%, rgba(178, 211, 36, 0.10), rgba(178, 211, 36, 0) 72%), radial-gradient(90% 50% at 50% -14%, rgba(10, 62, 140, 0.30), rgba(10, 62, 140, 0) 62%); } div[class*="transform-gpu"][class*="pb-16"]::before { content: ""; display: block; flex: none; width: 92px; height: 35px; /* mark is 440x167 -> 0.3795 aspect */ margin-bottom: 18px; background: url(/brand/ava-mark.png) center / contain no-repeat; filter: drop-shadow(0 6px 16px rgba(178, 211, 36, 0.3)); } /* Landing renders the spec's iconURL (the small lime triangle) inline to the * LEFT of the greeting in a `div.relative.size-10`. With the AVA mark above it * that is redundant, and it pushes the greeting off-center. Hide it. */ div[class*="transform-gpu"][class*="pb-16"] div[class*="size-10"] { display: none; } @media (prefers-reduced-motion: no-preference) { div[class*="transform-gpu"][class*="pb-16"]::before { animation: vt-logo-in 600ms cubic-bezier(0.16, 1, 0.3, 1) both; } }