/* ============================================================================ MULTI-BRAND OVERRIDES (VICI-113 / VICI-32) ---------------------------------------------------------------------------- HOW THIS WORKS (for the UX/UI designer): The portal resolves a brand from the hostname BEFORE first paint and sets it on the root element: or - lavalamp.ai / portal.lavaretail.com -> data-brand="lava" (default look) - vici.mpgllc.com -> data-brand="mpg" - any host + "?brand=mpg" / "?brand=lava" -> override (for local testing) LAVA is the BASE look and is defined everywhere else in the app. DO NOT add unscoped rules here — this file is the MPG DIFF ONLY. Everything you write must be scoped under html[data-brand="mpg"] so LAVA stays untouched. html[data-brand="mpg"] .your-selector { ... } Because it's scoped on the root attribute (set pre-paint) and this file is render-blocking, there is NO flash of the LAVA look on the MPG domain. CAVEAT: CSS can restyle/hide ELEMENTS, but it cannot remove an emoji baked into a JS text string (e.g. a button literally rendering "🎮 Fun Zone"). Those need a code-level brand gate (window.LAVA_BRAND === "mpg") — list any you find and engineering will gate them. Fun Zone is already org-gated. Test MPG locally: open the app with ?brand=mpg appended to the URL. ============================================================================ */ /* ---- MPG brand overrides — designer fills these in ------------------------- Examples (commented out; uncomment + edit, or replace): html[data-brand="mpg"] { --t-accent: #2563eb; } html[data-brand="mpg"] .some-decorative-flourish { display: none; } html[data-brand="mpg"] .sidebar-icon::before { content: none; } --------------------------------------------------------------------------- */ /* ── Onboarding tour (VICI-496) — CSS-driven ViCi recolor. LAVA classes are inert. ── */ html[data-brand="mpg"] .ob-modal { background: radial-gradient(95% 70% at 16% -10%, rgba(86,153,205,0.26), transparent 58%), radial-gradient(80% 85% at 100% 112%, rgba(61,147,148,0.16), transparent 58%), linear-gradient(155deg,#003A5D 0%,#01202E 100%) !important; border-color: #124b70 !important; overflow: hidden; isolation: isolate; } html[data-brand="mpg"] .ob-modal::before, html[data-brand="mpg"] .ob-modal::after { content: ""; position: absolute; z-index: -1; pointer-events: none; background: url("/assets/vici-logomark.svg") center/contain no-repeat; filter: brightness(0) invert(1); opacity: 0.05; } html[data-brand="mpg"] .ob-modal::before { width: 230px; height: 180px; left: -62px; bottom: -58px; } html[data-brand="mpg"] .ob-modal::after { width: 150px; height: 118px; right: -44px; top: -46px; transform: rotate(10deg); } html[data-brand="mpg"] .ob-icon { font-size: 0 !important; width: 60px; height: 46px; margin: 0 auto 14px; background: url("/assets/vici-logomark.svg") center/contain no-repeat; } html[data-brand="mpg"] .ob-dot.on { background: #1378BE !important; } html[data-brand="mpg"] .ob-dot.done { background: #8DB402 !important; } html[data-brand="mpg"] .ob-tip { background: rgba(19,120,190,0.08) !important; border-color: rgba(19,120,190,0.22) !important; } html[data-brand="mpg"] .ob-tip span { color: #5699CD !important; } html[data-brand="mpg"] .ob-next { background: linear-gradient(118deg,#1378BE 0%,#4892AB 40%,#619EA3 58%,#79B38D 80%,#97CD74 100%) !important; box-shadow: 0 6px 20px -6px rgba(19,120,190,0.55) !important; }