/* ========================================================================== DA Insured — LibreChat brand overlay -------------------------------------------------------------------------- Restrained by design: identity only (colour, body font, dark-mode surfaces). LibreChat's shapes, sizes and layout are left alone — forcing the DS's geometry and display type onto it looks broken, not branded. ⚠️ TOKEN FORMAT. LibreChat's Tailwind build stores these tokens as SPACE-SEPARATED RGB CHANNELS, not colours, and composes them itself: .border-border-light { border-color: rgb(var(--border-light) / calc(var(--border-light-alpha,1) * var(--tw-border-opacity))) } .text-text-primary { color: rgb(var(--text-primary) / var(--tw-text-opacity)) } So `--text-primary: #333132` or `rgba(...)` makes the rgb() INVALID, and the property falls back to its initial value — `currentColor` for border-color, which is why borders rendered near-black. Assign channels only: --border-light: 24 48 135; ✅ --border-light: rgba(24,48,135,.1) ❌ silently breaks Per-token alpha goes through the build's own --border-*-alpha hooks. To use one of these as a real colour in ordinary CSS, wrap it: rgb(var(--x)). ========================================================================== */ @font-face { font-family: 'Epilogue'; src: url('/Epilogue-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } :root { /* DS palette as channels. Namespaced --da-c-* so they cannot collide. */ --da-c-bright-blue: 44 117 255; /* #2C75FF */ --da-c-bright-blue-hover: 31 94 224; /* #1F5EE0 — DS --btn-primary-hover */ --da-c-dark-blue: 38 34 97; /* #262261 */ --da-c-medium-blue: 24 48 135; /* #183087 */ --da-c-turquoise: 33 216 202; /* #21D8CA */ --da-c-charcoal: 51 49 50; /* #333132 */ --da-c-muted-fg: 107 114 128; /* #6B7280 — DS --muted-foreground */ --da-c-panel: 245 247 250; /* #F5F7FA — DS --muted */ /* Accent. LibreChat ships a purple accent and a green send button. */ --brand-purple: var(--da-c-bright-blue); --surface-submit: var(--da-c-bright-blue); --surface-submit-hover: var(--da-c-bright-blue-hover); --ring-primary: var(--da-c-bright-blue); /* Text: the DS's foreground levels. */ --text-primary: var(--da-c-charcoal); --text-secondary: var(--da-c-muted-fg); --text-tertiary: var(--da-c-muted-fg); /* Borders. Tinted with Medium Blue #183087 — the DS's mid blue, not Dark Blue #262261, which is the darkest in the palette and read too heavy at 2px. (Counter-intuitively Medium Blue is the LIGHTER of the two: luminance 0.041 vs 0.024.) Softness comes from the build's own alpha hooks. Effective on white: #F1F3F8, #E8EAF3, #D9DDE9. --border-medium-alt has no alpha hook, so it takes a pre-blended value. */ --border-light: var(--da-c-medium-blue); --border-light-alpha: 0.06; --border-medium: var(--da-c-medium-blue); --border-medium-alpha: 0.1; --border-heavy: var(--da-c-medium-blue); --border-heavy-alpha: 0.16; --border-medium-alt: 232 234 243; /* #E8EAF3, matching --border-medium */ } /* --- Dark mode ------------------------------------------------------------ DS README: backgrounds #1A1A1A / #262626 / #333333, text #FFFFFF / #D1D5DB / #9CA3AF, border #404040, brand colours unchanged, never pure black. The border alphas above are inherited, so they are reset to 1 here. */ .dark { --brand-purple: var(--da-c-bright-blue); --surface-submit: var(--da-c-bright-blue); --surface-submit-hover: var(--da-c-bright-blue-hover); --ring-primary: var(--da-c-turquoise); --surface-primary: 26 26 26; --surface-primary-alt: 38 38 38; --surface-primary-contrast: 38 38 38; --surface-secondary: 38 38 38; --surface-secondary-alt: 38 38 38; --surface-tertiary: 51 51 51; --surface-tertiary-alt: 51 51 51; --surface-dialog: 38 38 38; --surface-chat: 38 38 38; --presentation: 26 26 26; --header-primary: 38 38 38; --header-hover: 51 51 51; --header-button-hover: 51 51 51; --text-primary: 255 255 255; --text-secondary: 209 213 219; --text-tertiary: 156 163 175; --border-light: 64 64 64; --border-light-alpha: 1; --border-medium: 64 64 64; --border-medium-alpha: 1; --border-medium-alt: 64 64 64; --border-heavy: 82 82 82; --border-heavy-alpha: 1; } /* --- Type ----------------------------------------------------------------- Epilogue is the DS "everything font" for UI and body. Mulish is display type for decks and covers — applying it to LibreChat's headings turned the landing greeting into a slab, so it is not used here. */ body, input, textarea, button, select { font-family: 'Epilogue', ui-sans-serif, system-ui, -apple-system, sans-serif; } code, pre, kbd, samp { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* --- Focus ---------------------------------------------------------------- The DS focus treatment is a 3px turquoise glow. Kept — but turquoise alone is 1.79:1 on white, below the 3:1 WCAG floor for a focus indicator, so a Bright Blue ring (4.12:1) carries visibility on light surfaces. On dark, turquoise reaches 9.73:1 and leads on its own. */ :where(button, a, input, textarea, select):focus-visible { outline: 2px solid rgb(var(--da-c-bright-blue)); outline-offset: 1px; box-shadow: 0 0 0 3px rgb(var(--da-c-turquoise) / 0.35); } .dark :where(button, a, input, textarea, select):focus-visible { outline-color: rgb(var(--da-c-turquoise)); } /* --- Landing greeting ----------------------------------------------------- LibreChat sizes the greeting as a hero (text-2xl / sm:text-4xl, weight 500) on an otherwise empty screen. Dialled down so it reads calm. `.split-parent` is SplitText's wrapper, used only for this headline. */ p.split-parent { font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.625rem); font-weight: 400; color: rgb(var(--text-secondary)); letter-spacing: -0.01em; } /* --- Control panel -------------------------------------------------------- NOTE: the running image's markup differs from this repo's checked-out source. The panel is NOT `.sidenav` / `.nav` (those match nothing); it renders as