/* * Mogul Deal Evaluator brand theme (white-label token migration). * * Overrides the --dwi-* token contract (themes/tokens.css) for * and bridges the Metronic/Bootstrap * --bs-/--kt- primary variables onto those tokens, so BOTH the new .dwi-* * components and the legacy bundle components follow the brand primary. * * The bundle also bakes its accent as compiled-in literals (#657ED4 bootstrap * primary, #009ef7 Metronic KT blue). Those are re-pointed separately by the * generated themes/theme-moguldealevaluator-components.css, which loads AFTER * this file. * * Palette: config/brands/moguldealevaluator.php colors.primary / colors.secondary * (var(--dwi-color-primary) / var(--dwi-color-primary-strong)). Neutrals intentionally stay at the tokens.css defaults — * Mogul's app rides Metronic's neutral surfaces, which are unchanged. * * Load order (layout.html): plugins.bundle.css -> /style.bundle.css -> * themes/tokens.css -> THIS FILE -> theme-moguldealevaluator-components.css. */ [data-brand=moguldealevaluator] { /* Brand primary family — near-black brand primary. STATIC FALLBACK: the layouts inject Brand::dynamicThemeCss() from config theme.colors AFTER this file, overriding these. Every rule below references the tokens via var(). */ --dwi-color-primary: #150e0e; --dwi-color-primary-rgb: 21, 14, 14; --dwi-color-primary-strong: #2a1c1c; --dwi-color-primary-press: #0a0606; --dwi-color-primary-soft: rgba(21, 14, 14, 0.10); --dwi-color-accent: #150e0e; --dwi-color-accent-rgb: 21, 14, 14; /* Typography — match DealWorthIt exactly. The white-label app rides the same IBM Plex family and rem-based sizing as DealWorthIt; only the brand color family differs. Mirrors theme-dealworthit.css so the two brands render identical type. The font itself is loaded by the layouts for every token-themed brand (IBM Plex link, gated on $brand_theme_css). */ --dwi-font-sans: 'IBM Plex Sans', -apple-system, system-ui, sans-serif; --dwi-font-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* Bridge the Metronic/Bootstrap primary variables onto the brand tokens. html[data-brand=...] (specificity 0,1,1) outranks the bundle's :root/.class variable definitions and loads after them, so the legacy UI follows the brand primary. Only the primary/accent family is bridged — neutrals keep the bundle values. (Parallels the DealWorthIt bridge in themes/tokens.css.) */ html[data-brand=moguldealevaluator] { --bs-primary: var(--dwi-color-accent); --bs-primary-rgb: var(--dwi-color-accent-rgb); --kt-primary: var(--dwi-color-primary); --kt-primary-rgb: var(--dwi-color-primary-rgb); --kt-primary-active: var(--dwi-color-primary-strong); --kt-primary-light: var(--dwi-color-primary-soft); /* Typography bridge — re-point the body/bundle font chain onto the brand tokens so both the new .dwi-* components (body{font-family:var(--app-font-sans)}) and legacy bundle components (--bs-font-sans-serif consumers) render IBM Plex, matching DealWorthIt. html[data-brand=...] (specificity 0,1,1) out-ranks the common_styles.css :root { --app-font-sans:'Inter' } fallback that loads after this file. Parallels the DealWorthIt bridge in themes/tokens.css. */ --app-font-sans: var(--dwi-font-sans); --bs-font-sans-serif: var(--dwi-font-sans); --bs-font-monospace: var(--dwi-font-mono); /* Semantic success = green (positive metrics/returns). Mogul's bundle compiled the base success + info hue to one teal (#177E89), so positive numbers rendered teal instead of green. Re-point the success family to the standard green (matches DealWorthIt's #50CD89; the bundle's -rgb/-active/ -light success variants are already this green). The baked #177E89 literals in the success/valid component rules are flipped to var(--kt-success) by the generated theme-moguldealevaluator-components.css. Info keeps its own teal (--kt-info), and danger stays the bundle's red (#BD1010) — negative metrics stay red. */ --bs-success: #50CD89; --kt-success: #50CD89; --kt-text-success: #50CD89; } /* Markets page — themes/theme-dealworthit-markets.css defines a local emerald accent palette (--mk-emerald*) on .dwi-markets. Re-point just that primary family to the brand red for Mogul; the page's semantic --mk-red / --mk-amber stay put. Higher specificity than the markets file's own .dwi-markets rule, and scoped to this brand, so DealWorthIt's exact values are untouched. .mk-modal is included because the Add-market modal renders at document root (OUTSIDE .dwi-markets) and re-declares its own --mk-emerald* on .mk-modal, so the .dwi-markets re-point alone can't reach the modal's icon + Save button. */ [data-brand=moguldealevaluator] .dwi-markets, [data-brand=moguldealevaluator] .mk-modal { --mk-emerald: var(--dwi-color-primary); --mk-emerald-dark: var(--dwi-color-primary-strong); --mk-emerald-press: var(--dwi-color-primary-press); --mk-emerald-tint: rgba(var(--dwi-color-primary-rgb), 0.09); --mk-emerald-line: rgba(var(--dwi-color-primary-rgb), 0.22); } /* The modal's input focus ring is a hardcoded emerald rgba (not a token), so token re-pointing can't reach it — brand-tint it directly. */ [data-brand=moguldealevaluator] .mk-modal .mk-field .form-control:focus, [data-brand=moguldealevaluator] .mk-modal .mk-field .form-select:focus { box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.12); } /* ──────────────────────────────────────────────────────────────────────── Feature-page accent palettes. Several feature skins define their own local emerald ramp (--tm-green, --miv2-green, --dwin-emerald, --emerald …) instead of the shared tokens. Re-point each to the brand primary, scoped to this brand (and, for the :root-level notify palette, via html[...] to out-specify it), so DealWorthIt's values are untouched. Success/"ok" status chips are kept green below — a red "Accepted" would read as an error. ──────────────────────────────────────────────────────────────────────── */ /* Team (theme-dealworthit-team.css) */ [data-brand=moguldealevaluator] .dwi-team, [data-brand=moguldealevaluator] .tm-modal { --tm-green: var(--dwi-color-primary); --tm-green-dark: var(--dwi-color-primary-strong); --tm-green-press: var(--dwi-color-primary-press); --tm-green-soft: rgba(var(--dwi-color-primary-rgb), 0.09); --tm-green-faint: rgba(var(--dwi-color-primary-rgb), 0.05); --tm-green-tint: rgba(var(--dwi-color-primary-rgb), 0.09); --tm-green-line: rgba(var(--dwi-color-primary-rgb), 0.22); } /* Keep the green "ok" status chip green (Accepted / Active), not brand red. */ [data-brand=moguldealevaluator] .dwi-team .tm-badge.green { color: #0E6E59; background: rgba(14, 110, 89, 0.10); } /* Market Insights (market_insights.css) */ [data-brand=moguldealevaluator] .mi-v2, [data-brand=moguldealevaluator] .mi-apply-modal { --miv2-green: var(--dwi-color-primary); --miv2-green-dark: var(--dwi-color-primary-strong); --miv2-green-soft-text: var(--dwi-color-primary); --miv2-green-soft-bg: rgba(var(--dwi-color-primary-rgb), 0.08); --miv2-green-faint: rgba(var(--dwi-color-primary-rgb), 0.05); --miv2-green-line: rgba(var(--dwi-color-primary-rgb), 0.22); } /* Notifications + confirm dialogs (theme-dealworthit-notify.css). Its palette sits on :root, so out-specify with html[...]. .s-success keeps its own green. */ html[data-brand=moguldealevaluator] { --dwin-emerald: var(--dwi-color-primary); --dwin-emerald-tint: rgba(var(--dwi-color-primary-rgb), 0.09); --dwin-emerald-line: rgba(var(--dwi-color-primary-rgb), 0.22); } /* T12 review (theme-dealworthit-t12-review.css) */ [data-brand=moguldealevaluator] .t12r { --emerald: var(--dwi-color-primary); --emerald-700: var(--dwi-color-primary-strong); --emerald-tint: rgba(var(--dwi-color-primary-rgb), 0.09); --emerald-tint-2: rgba(var(--dwi-color-primary-rgb), 0.05); } /* Deal-assumptions / property-settings modal (inline --ps-green palette, a distinct #15795f green). */ [data-brand=moguldealevaluator] #kt_modal_property_settings { --ps-green: var(--dwi-color-primary); --ps-green-dark: var(--dwi-color-primary-strong); --ps-green-soft: rgba(var(--dwi-color-primary-rgb), 0.09); } /* ──────────────────────────────────────────────────────────────────────── Positive metric VALUES stay green (green = good / red = bad). The re-pointed feature palettes above turn --miv2-green / --emerald near-black so page CHROME (pills, buttons, fills, card accents) follows the brand — but a handful of selectors use those same tokens to color a NUMERIC value / trend delta whose sibling --*--neg / --*--down stays red. Re-pointing only the green half would read a positive number in brand near-black next to a red negative, inverting the financial signal. Point just those value selectors at the semantic --dwi-color-positive (not re-pointed for this brand → #0E6E59, matching the green these surfaces show on DealWorthIt in both light and dark). The [data-brand] prefix raises specificity above each base rule, so this wins regardless of load order; negatives already stay red via --miv2-red / --red. ──────────────────────────────────────────────────────────────────────── */ [data-brand=moguldealevaluator] .mi-v2 .mi-v2-kpi-value--upside, [data-brand=moguldealevaluator] .mi-v2 .mi-v2-kpi-trend--up, [data-brand=moguldealevaluator] .mi-v2 .mi-v2-table tbody td.t-delta, [data-brand=moguldealevaluator] .mi-v2 .mi-v2-mini-trend--up, [data-brand=moguldealevaluator] .mi-v2 .mi-v2-yoy--up, [data-brand=moguldealevaluator] .mi-v2 .mi-v2-decision-val--green, [data-brand=moguldealevaluator] .mi-v2 .mi-v2-emp-v--pos, [data-brand=moguldealevaluator] .mi-v2 .mi-v2-td-v--pos, [data-brand=moguldealevaluator] .mi-v2 .mi-v2-impact-row .v--suggest, [data-brand=moguldealevaluator] .mi-v2 .mi-v2-glance-v--pos, [data-brand=moguldealevaluator] .t12r .iss-metric .v.pos { color: var(--dwi-color-positive); } /* ──────────────────────────────────────────────────────────────────────── Primary CTAs styled with Bootstrap's .btn-success (the app's convention — Continue underwriting, Add note, Upload, Send invite, Convert, Generate …). The bundle compiles these green; for a red brand that clashes, so recolor the success BUTTON classes to the brand primary. Deliberately NOT .text-success / .bg-success / .badge-*success, which stay green for genuine success/positive signals. Scoped to this brand + !important to beat the bundle's compiled literals; DealWorthIt (never [data-brand=moguldealevaluator]) is untouched. ──────────────────────────────────────────────────────────────────────── */ html[data-brand=moguldealevaluator] .btn-success { color: #fff !important; background-color: var(--dwi-color-primary, var(--dwi-color-primary)) !important; border-color: var(--dwi-color-primary, var(--dwi-color-primary)) !important; } html[data-brand=moguldealevaluator] .btn-success:hover, html[data-brand=moguldealevaluator] .btn-success:focus, html[data-brand=moguldealevaluator] .btn-success:active, html[data-brand=moguldealevaluator] .btn-success.active, html[data-brand=moguldealevaluator] .btn-success:disabled, html[data-brand=moguldealevaluator] .show > .btn-success.dropdown-toggle { color: #fff !important; background-color: var(--dwi-color-primary-strong, var(--dwi-color-primary-strong)) !important; border-color: var(--dwi-color-primary-strong, var(--dwi-color-primary-strong)) !important; } /* Soft variant: light red fill + red label/icon; solid red on hover. */ html[data-brand=moguldealevaluator] .btn-light-success, html[data-brand=moguldealevaluator] .btn-light-success i { color: var(--dwi-color-primary, var(--dwi-color-primary)) !important; } html[data-brand=moguldealevaluator] .btn-light-success { background-color: var(--dwi-color-primary-soft, rgba(var(--dwi-color-primary-rgb), 0.10)) !important; border-color: transparent !important; } html[data-brand=moguldealevaluator] .btn-light-success:hover, html[data-brand=moguldealevaluator] .btn-light-success:focus, html[data-brand=moguldealevaluator] .btn-light-success:active, html[data-brand=moguldealevaluator] .btn-light-success:hover i { color: #fff !important; background-color: var(--dwi-color-primary, var(--dwi-color-primary)) !important; border-color: var(--dwi-color-primary, var(--dwi-color-primary)) !important; } /* Outline variant: red outline + label; fills red on hover. */ html[data-brand=moguldealevaluator] .btn-outline-success { color: var(--dwi-color-primary, var(--dwi-color-primary)) !important; border-color: var(--dwi-color-primary, var(--dwi-color-primary)) !important; } html[data-brand=moguldealevaluator] .btn-outline-success:hover, html[data-brand=moguldealevaluator] .btn-outline-success:focus, html[data-brand=moguldealevaluator] .btn-outline-success:active { color: #fff !important; background-color: var(--dwi-color-primary, var(--dwi-color-primary)) !important; border-color: var(--dwi-color-primary, var(--dwi-color-primary)) !important; } /* Documents + Notes tabs. Both feature skins use their own #0F6E5F emerald (documents_v2.css via --docs-green; notes_list.html hardcoded inline) — distinct from the shared token, so override scoped to this brand. Covers the Upload / Add note / Save note buttons and the green accents. */ [data-brand=moguldealevaluator] .docs-v2 { --docs-green: var(--dwi-color-primary); --docs-green-dark: var(--dwi-color-primary-strong); --docs-green-soft: rgba(var(--dwi-color-primary-rgb), 0.08); } [data-brand=moguldealevaluator] .notes-v2 .notes-v2-btn--primary, [data-brand=moguldealevaluator] .notes-v2 .notes-save-btn { background: var(--dwi-color-primary) !important; border-color: var(--dwi-color-primary) !important; color: #fff !important; } [data-brand=moguldealevaluator] .notes-v2 .notes-v2-btn--primary:hover, [data-brand=moguldealevaluator] .notes-v2 .notes-save-btn:hover { background: var(--dwi-color-primary-strong) !important; border-color: var(--dwi-color-primary-strong) !important; color: #fff !important; } [data-brand=moguldealevaluator] .notes-v2 .notes-v2-search input:focus { border-color: var(--dwi-color-primary) !important; box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.12) !important; } [data-brand=moguldealevaluator] .notes-v2 .notes-v2-vt button.is-active { background: rgba(var(--dwi-color-primary-rgb), 0.08) !important; color: var(--dwi-color-primary) !important; } [data-brand=moguldealevaluator] .notes-v2 .notes-filter-btn.active, [data-brand=moguldealevaluator] .notes-v2 .notes-v2-action:hover, [data-brand=moguldealevaluator] .notes-v2 .notes-doc-link { color: var(--dwi-color-primary) !important; } /* ──────────────────────────────────────────────────────────────────────── Public-report sticky CTA bar ("Want to underwrite your own deal?"). The report markup + the shared theme-dealworthit-reports.css (loaded on every brand's report) hardcode a dark-EMERALD bar with an emerald primary button that sits LIGHTER than the bar. On this near-black brand the emerald bar is off-brand, so re-skin the bar to the brand's dark ramp. The primary CTA uses --dwi-color-primary (var(--dwi-color-primary)) and would vanish into a near-black bar, so it inverts to white-on-dark — the faithful analog of DealWorthIt's button being lighter than its bar. Scoped by [data-brand] (specificity beats the base .dwi-sticky-* rules, so this wins wherever the file loads). Negatives/ghost/ title inherit the white-on-dark base, which already reads on the dark bar. ──────────────────────────────────────────────────────────────────────── */ [data-brand=moguldealevaluator] .dwi-sticky-cta { background: linear-gradient(135deg, var(--dwi-color-primary-strong) 0%, var(--dwi-color-primary) 100%); } [data-brand=moguldealevaluator] .dwi-sticky-cta-icon { color: rgba(255, 255, 255, 0.72); } [data-brand=moguldealevaluator] .dwi-sticky-btn-primary { background: #fff; color: var(--dwi-color-primary); border-color: #fff; } [data-brand=moguldealevaluator] .dwi-sticky-btn-primary:hover { background: rgba(255, 255, 255, 0.88); color: var(--dwi-color-primary); border-color: rgba(255, 255, 255, 0.88); } /* Same treatment for the detailed report's inline public-CTA panel (.dwi-pub-cta), the non-sticky sibling of the bar above. Its base reports.css rules carry !important, so match it here to win. */ [data-brand=moguldealevaluator] .dwi-pub-cta { background: linear-gradient(135deg, var(--dwi-color-primary-strong) 0%, var(--dwi-color-primary) 100%) !important; } [data-brand=moguldealevaluator] .dwi-pub-cta .btn-primary, [data-brand=moguldealevaluator] .dwi-pub-cta .dwi-pub-cta-btn { background: #fff !important; border-color: #fff !important; color: var(--dwi-color-primary) !important; } /* ──────────────────────────────────────────────────────────────────────── Modals rendered at document root (outside their re-pointed feature container) still show DealWorthIt emerald on this brand — some via a local emerald palette, most via hardcoded #0E6E59 / rgba(14,110,89,x) literals that token re-pointing can't reach. Re-skin each modal's BRAND-ACCENT emerald (icons, focus rings, borders, tints, stepper/selection chrome) to the brand near-black. Genuine success / "good" indicators stay green (left untouched). Scoped by [data-brand]; the added attribute out-specifies each base rule, and !important is matched where the base uses it. These skins all load on Mogul — their host s are gated on $brand_theme_css, which is truthy for this brand. ──────────────────────────────────────────────────────────────────────── */ /* Guided intake modal (.dwi-im). Its stepper, asset-selection ring and focus outlines are colored with the positive token used as a brand accent (not a metric), so re-point it for this modal only; plus two hardcoded rgba literals. */ [data-brand=moguldealevaluator] .dwi-im { --dwi-color-positive: var(--dwi-color-primary); } [data-brand=moguldealevaluator] .dwi-im .form-control:focus, [data-brand=moguldealevaluator] .dwi-im .form-select:focus { box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.12); } [data-brand=moguldealevaluator] .dwi-im-success-staged { border-color: rgba(var(--dwi-color-primary-rgb), 0.18); } /* CSV / AIP import result modal (.csv_modal / .aip-result-modal). Brand-accent chips + insight icon → near-black; the .text-success / .bg-success / .badge-light-success / .rrv-al--good success signals keep their green. */ [data-brand=moguldealevaluator] .rrv-banner-rec { color: var(--dwi-color-primary); background: rgba(var(--dwi-color-primary-rgb), 0.10); } [data-brand=moguldealevaluator] .rrv-ins-ic { background: rgba(var(--dwi-color-primary-rgb), 0.10); color: var(--dwi-color-primary); } [data-brand=moguldealevaluator] .rrv-tab .badge.bg-dark { background: rgba(var(--dwi-color-primary-rgb), 0.12) !important; color: var(--dwi-color-primary) !important; } [data-brand=moguldealevaluator] .rrv-imp { color: var(--dwi-color-primary); background: rgba(var(--dwi-color-primary-rgb), 0.08); } /* Underwrite-inputs modal (.dwi-umx) — emerald focus ring (its border already follows the brand via --dwi-color-primary). */ [data-brand=moguldealevaluator] .dwi-umx .dwi-umx-inp .form-select:focus { box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.12); } /* Syndication / equity-split modal (.modal_equity_split) — hardcoded emerald rgba borders / tints / focus rings (buttons already follow the brand). */ [data-brand=moguldealevaluator] .dwi-shell-modern .modal_equity_split .dwi-synd-recon { border-color: rgba(var(--dwi-color-primary-rgb), 0.20); background: rgba(var(--dwi-color-primary-rgb), 0.05); } [data-brand=moguldealevaluator] .dwi-shell-modern .modal_equity_split .dwi-synd-recon-head:hover { background: rgba(var(--dwi-color-primary-rgb), 0.06); } [data-brand=moguldealevaluator] .dwi-shell-modern .modal_equity_split .dwi-synd-recon-head:focus-visible { outline-color: rgba(var(--dwi-color-primary-rgb), 0.45); } [data-brand=moguldealevaluator] .dwi-shell-modern .modal_equity_split .form-select:focus { box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.07) !important; } [data-brand=moguldealevaluator] .dwi-shell-modern .modal_equity_split .select2-container--open .select2-selection { box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.07) !important; } [data-brand=moguldealevaluator] body.dwi-shell-modern .modal_equity_split .add_new_manager_equity:hover { background-color: rgba(var(--dwi-color-primary-rgb), 0.12) !important; } [data-brand=moguldealevaluator] .dwi-shell-modern .modal_equity_split .dwi-sym-half.lp { background: rgba(var(--dwi-color-primary-rgb), 0.05); } [data-brand=moguldealevaluator] .dwi-shell-modern .modal_equity_split .dwi-sym-ein:focus-within { box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.07); } [data-brand=moguldealevaluator] .dwi-shell-modern .modal_equity_split .dwi-sym-feecard.tint { background: rgba(var(--dwi-color-primary-rgb), 0.05); } [data-brand=moguldealevaluator] .dwi-shell-modern .modal_equity_split .dwi-sym-select:focus { box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.07); } [data-brand=moguldealevaluator] .dwi-shell-modern .modal_equity_split .dwi-sym-chips b { background: rgba(var(--dwi-color-primary-rgb), 0.05); } /* Investor-projection modal ([id^=kt_modal_investor_projection_]) — emerald KPI + table-header tints. */ [data-brand=moguldealevaluator] .dwi-shell-modern [id^="kt_modal_investor_projection_"] .dwi-ib-kpi.hl { background: linear-gradient(160deg, rgba(var(--dwi-color-primary-rgb), 0.05), transparent 70%); } [data-brand=moguldealevaluator] .dwi-shell-modern [id^="kt_modal_investor_projection_"] table.table th.bg-light { background: rgba(var(--dwi-color-primary-rgb), 0.05) !important; } [data-brand=moguldealevaluator] .dwi-shell-modern [id^="kt_modal_investor_projection_"] table.table th.bg-light-info { background: rgba(var(--dwi-color-primary-rgb), 0.05) !important; } /* Markets add-modal STATE dropdown focus rings (hardcoded; not reached by the --mk-emerald re-point above). */ [data-brand=moguldealevaluator] #markets_add_modal .mk-statedd.open .mk-statedd-toggle, [data-brand=moguldealevaluator] #markets_add_modal .mk-statedd-input:focus { box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.12); } /* Reports create-modal upsell button hover glow (button fill already brand). */ [data-brand=moguldealevaluator] .dwi-cr-sec-upsell-btn:hover { box-shadow: 0 4px 12px -4px rgba(var(--dwi-color-primary-rgb), 0.40); } /* Dark mode — lighten the red for contrast on Metronic's dark surfaces (~4.5:1 on #1e1e2d); neutrals stay at Metronic's dark values. */ [data-brand=moguldealevaluator][data-theme=dark] { --dwi-color-primary: #5c4949; --dwi-color-primary-rgb: 92, 73, 73; --dwi-color-primary-strong: #6e5858; --dwi-color-primary-press: #2a1c1c; --dwi-color-primary-soft: rgba(92, 73, 73, 0.16); --dwi-color-accent: #5c4949; --dwi-color-accent-rgb: 92, 73, 73; }