/* AIVantage branding overlay for LiteLLM /login (Ant Design + Tailwind). Activated by `body.aivantage-auth` class set by branding.js based on URL. Verified against LiteLLM digest sha256:7c510115...4f2ec17 (2026-03-24). Selectors prefer stable antd class names (`.ant-card`, `.ant-input`, etc.) plus partial matches for hashed CSS-modules so the overlay survives minor LiteLLM bumps. */ body.aivantage-auth { --av-black: #050505; --av-black-2: #0d0d0d; --av-gold: #d4af37; --av-gold-2: #e6c14d; --av-gold-glow: rgba(212, 175, 55, 0.18); --av-text: #f7f7f7; --av-muted: #b6b3a9; background: radial-gradient(1100px 700px at 50% -10%, var(--av-gold-glow), transparent 60%), radial-gradient(900px 600px at 90% 110%, rgba(212, 175, 55, 0.10), transparent 60%), var(--av-black) !important; color: var(--av-text); font-family: 'Inter', 'Segoe UI', Arial, sans-serif; min-height: 100vh; } /* Outer wrapper override — Tailwind's .bg-gray-50 light backdrop */ body.aivantage-auth .min-h-screen, body.aivantage-auth [class*="bg-gray"] { background: transparent !important; } /* --- Card (.ant-card) --- */ body.aivantage-auth .ant-card, body.aivantage-auth .ant-card-bordered { background-color: var(--av-black-2) !important; border: 1px solid rgba(212, 175, 55, 0.28) !important; border-radius: 18px !important; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--av-gold-glow) !important; } body.aivantage-auth .ant-card-body { color: var(--av-text); padding: 32px !important; } /* --- Logo: hide the upstream "🚅 LiteLLM" H2 and inject AIVantage logo in its place via the parent .text-center wrapper using :has() so we only catch the wrapper that holds the brand H2 (not other text-center blocks like the "Login" heading row). --- */ body.aivantage-auth .ant-card-body h2.ant-typography { display: none !important; } body.aivantage-auth .ant-card-body .text-center:has(> h2.ant-typography) { background: url('/ui/aivantage-logo.png?v=1777232665') center/contain no-repeat; height: 80px; max-width: 90%; margin: 0 auto 16px; } /* --- Headings + typography --- */ body.aivantage-auth h1.ant-typography, body.aivantage-auth h2.ant-typography, body.aivantage-auth h3.ant-typography, body.aivantage-auth h4.ant-typography { color: var(--av-text) !important; } body.aivantage-auth .ant-typography { color: var(--av-text); } body.aivantage-auth .ant-typography-secondary { color: var(--av-muted) !important; } /* --- Hide the upstream "Access your LiteLLM Admin UI." subtitle --- */ body.aivantage-auth .ant-card-body .ant-typography-secondary { display: none !important; } /* --- Hide the "Default Credentials" info alert entirely. Users of llm.aivantage.co.za already know their creds; the upstream alert reveals implementation details (admin user, MASTER_KEY, LiteLLM SSO docs) that don't belong on a branded surface. --- */ body.aivantage-auth .ant-alert { display: none !important; } /* --- Form item labels (Username, Password) --- */ body.aivantage-auth .ant-form-item-label > label { color: var(--av-text) !important; } body.aivantage-auth .ant-form-item-required::before { color: var(--av-gold) !important; } /* --- Inputs --- */ body.aivantage-auth .ant-input, body.aivantage-auth .ant-input-affix-wrapper { background-color: rgba(255, 255, 255, 0.04) !important; border-color: rgba(212, 175, 55, 0.28) !important; color: var(--av-text) !important; border-radius: 10px !important; } body.aivantage-auth .ant-input::placeholder, body.aivantage-auth .ant-input-affix-wrapper input::placeholder { color: var(--av-muted) !important; } body.aivantage-auth .ant-input:hover, body.aivantage-auth .ant-input-affix-wrapper:hover { border-color: rgba(212, 175, 55, 0.5) !important; } body.aivantage-auth .ant-input:focus, body.aivantage-auth .ant-input-focused, body.aivantage-auth .ant-input-affix-wrapper:focus, body.aivantage-auth .ant-input-affix-wrapper-focused { border-color: var(--av-gold) !important; box-shadow: 0 0 0 3px var(--av-gold-glow) !important; } body.aivantage-auth .ant-input-password-icon { color: var(--av-muted) !important; } /* --- Primary "Login" button: gold gradient pill --- */ body.aivantage-auth .ant-btn.ant-btn-primary { background: linear-gradient(135deg, var(--av-gold-2) 0%, var(--av-gold) 55%, #b8902a 100%) !important; border: none !important; color: var(--av-black) !important; font-weight: 600 !important; letter-spacing: 0.02em; border-radius: 999px !important; box-shadow: 0 10px 30px -10px var(--av-gold-glow) !important; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } body.aivantage-auth .ant-btn.ant-btn-primary:hover, body.aivantage-auth .ant-btn.ant-btn-primary:focus { background: linear-gradient(135deg, var(--av-gold-2) 0%, var(--av-gold) 55%, #b8902a 100%) !important; color: var(--av-black) !important; transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(212, 175, 55, 0.45) !important; filter: brightness(1.05); } body.aivantage-auth .ant-btn.ant-btn-primary[disabled], body.aivantage-auth .ant-btn.ant-btn-primary.ant-btn-loading { background: rgba(212, 175, 55, 0.25) !important; color: rgba(247, 247, 247, 0.5) !important; box-shadow: none !important; } /* --- Secondary "Login with SSO" button --- */ body.aivantage-auth .ant-btn.ant-btn-default { background-color: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(212, 175, 55, 0.28) !important; color: var(--av-muted) !important; border-radius: 999px !important; } body.aivantage-auth .ant-btn.ant-btn-default:hover { border-color: var(--av-gold) !important; color: var(--av-gold) !important; background-color: rgba(212, 175, 55, 0.06) !important; } /* --- Links --- */ body.aivantage-auth a, body.aivantage-auth .ant-typography a { color: var(--av-gold) !important; text-decoration: none; } body.aivantage-auth a:hover { text-decoration: underline; } /* --- Inline code pills inside the alert (admin / MASTER_KEY) --- */ body.aivantage-auth code { background: rgba(212, 175, 55, 0.10) !important; color: var(--av-gold-2) !important; border: 1px solid rgba(212, 175, 55, 0.20) !important; padding: 1px 6px; border-radius: 4px; font-family: 'JetBrains Mono', 'Consolas', monospace; }