/* ══════════════════════════════════════════════════════════════════════ BuildingPulse - customer appearance skin (2026-07-27) The dashboard is the one customer surface that does not extend _portal_base.html: it ships its own , its own and about 227KB of inline CSS. That is why it was the last Hub page still bone in Dark, and it is why this file exists rather than a few rules inside fmc-hub-theme.css. It is gated on exactly the same three conditions as every other themed Hub surface: html[data-hub-theme="dark"] body.portal-light.hub-theme-surface so it is inert unless (a) the resolved theme is dark, (b) the page is a Hub page, and (c) the page opted in. BuildingPulse opts in only on the CUSTOMER render; an employee looking at a customer's dashboard in support view keeps the light page, matching the Location page and the Dashboard. The preference itself is owned by fmc-hub-theme.js and the pre-paint bootstrap in the template head, both shared with the rest of the Hub, so one choice on the Dashboard moves BuildingPulse too. Three sections: 1. Tokens. The high-leverage block. Same names the page already uses, pointed at the Hub's dark palette so the two surfaces share one floor colour, one teal, one status ramp. 2. Derived overrides. The page hardcodes roughly 700 colour literals outside the token block, so those rules are DERIVED from the real stylesheet by scripts/gen_bp_dark.py rather than hand-copied: it reads the page's own CSS, maps each light literal to its dark counterpart, and emits only the rules that genuinely change. Do not hand-edit that section; change the map and regenerate. 3. Chrome. Page ground, navbar and the appearance control, written by hand because they are design decisions rather than transforms, and placed last so they win against the derived block. Light rendering is untouched. Delete this file and BuildingPulse is exactly what it was. ══════════════════════════════════════════════════════════════════════ */ /* ── 1. Tokens ───────────────────────────────────────────────────────── Values mirror fmc-hub-theme.css exactly. A customer moving between the Dashboard, the Location page and BuildingPulse must not see the ground colour shift under them. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface { color-scheme: dark; --d-void: #0F1622; --d-void-2: #0B111B; --d-raise: rgba(255,255,255,0.045); --d-raise-2: rgba(255,255,255,0.075); --d-raise-3: rgba(255,255,255,0.11); --d-panel: rgba(21, 30, 45, 0.92); --d-panel-solid: #151E2D; --p-bg: var(--d-void); --p-bg-2: #131C2A; --p-ink: #EAF0F6; --p-ink-2: #C3CEDA; --p-ink-3: #97A4B4; --p-ink-4: #7F8C9C; --p-line: rgba(255,255,255,0.13); --p-line-strong: rgba(255,255,255,0.26); --p-teal: #3FD8C8; --p-teal-deep: #7FEADD; --p-teal-bright: #7FEADD; --p-teal-tint: rgba(63,216,200,0.13); --p-teal-tint-2: rgba(63,216,200,0.22); --p-teal-ring: rgba(63,216,200,0.42); /* Same pair fmc-hub-theme.css defines. Missing here, which left .menu-logout with an unresolvable var() and the same ink as the rows above it. */ --p-danger: #FF8A80; --p-danger-tint: rgba(255,138,128,0.15); /* Glass. On bone these are a paper tint over an aurora; here they are a thin white lift over navy, which is what reads as raised on a dark ground. Shadows go deeper and lose the colour bloom, because a coloured glow on navy reads as a bug rather than as depth. */ --p-glass: rgba(255,255,255,0.055); --p-glass-strong: rgba(24, 34, 51, 0.90); --p-glass-hover: rgba(255,255,255,0.085); --p-glass-border: rgba(255,255,255,0.13); --p-glass-rim: rgba(255,255,255,0.07); --p-glass-shadow: 0 30px 62px -34px rgba(0,0,0,0.72), 0 10px 24px -18px rgba(0,0,0,0.55), inset 0 1px 0 var(--p-glass-rim), inset 0 0 0 0.5px rgba(255,255,255,0.05); --p-glass-sat: 140%; --p-card: var(--d-panel); /* The pulse accent. Deep red on white is about 2.6:1 on navy, so the trace and every red call site lift together. Same hue, same identity, legible ground. The heartbeat is the product; it cannot go dim. */ --bp-red: #FF8A80; --bp-red-bright: #FFB3AC; --bp-red-deep: #FFA9A2; --bp-red-tint: rgba(255,138,128,0.14); --bp-red-tint-2: rgba(255,138,128,0.24); --bp-red-ring: rgba(255,138,128,0.40); /* Load ramp. This is data viz, not status: a "red" heatmap cell means a high reading, not an alert. Held as a ramp, raised as a set, so the gradient still reads green to red at a glance on navy. */ --load-green: #4FD69B; --load-green-2: #7FE3AC; --load-yellow: #EFC75C; --load-orange: #F0A46B; --load-red: #FF7A6E; --load-red-deep: #FF9A90; --warn: #EFB25C; --warn-ink: #EFB25C; --warn-tint: rgba(239,178,92,0.14); --warn-ring: rgba(239,178,92,0.34); --alert-red: #FF7A6E; --goal-purple: #BDA6FF; --goal-purple-ink:#BDA6FF; --focus-ring: rgba(63,216,200,0.55); --sev-high: #FF9A90; --sev-med: #E7BC6A; --sev-low: #58D69C; --sev-info: #9AA8B8; } /* ══════════════════════════════════════════════════════════════════════ 2. Derived overrides GENERATED by scripts/gen_bp_dark.py from the dashboard's own CSS. Do not hand-edit: change the colour map in that script and regenerate. ══════════════════════════════════════════════════════════════════════ */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface::after { background: radial-gradient(ellipse 900px 650px at 10% 12%, rgba(255,138,128,0.14) 0%, transparent 62%), radial-gradient(ellipse 780px 560px at 88% 28%, rgba(63,216,200,0.117) 0%, transparent 62%), radial-gradient(ellipse 700px 560px at 35% 85%, rgba(255,138,128,0.084) 0%, transparent 60%) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface::before { background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.046) 1px, transparent 0) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface nav { background: rgba(255,255,255,0.052) !important; border-bottom: 0.5px solid rgba(255,255,255,0.078) !important; box-shadow: inset 0 0.5px 0 0 rgba(255,255,255,0.072), 0 1px 12px rgba(0,0,0,0.096) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-logo img { background: rgba(255,255,255,0.11) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-dropdown-menu { background: #1b2637 !important; box-shadow: 0 16px 40px rgba(0,0,0,0.288) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mobile-dropdown { background: rgba(255,255,255,0.075) !important; box-shadow: inset 0 0.5px 0 0 rgba(255,255,255,0.11), 0 12px 36px rgba(0,0,0,0.24) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .pulse-banner { background: linear-gradient(135deg, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.065) 60%, rgba(255,255,255,0.072) 100%), radial-gradient(ellipse 600px 180px at 12% 50%, rgba(255,138,128,0.084), transparent 70%) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .pulse-banner::before { background: linear-gradient(135deg, rgba(255,255,255,0.072) 0%, rgba(255,255,255,0) 45%) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .pulse-ekg-spark { filter: drop-shadow(0 0 1.5px rgba(255,138,128,0.34)) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .pulse-now-delta.flat { color: #EFB25C !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-live-urgent[data-level="red"] { background: rgba(255,122,110,0.104) !important; border: 0.5px solid rgba(255,122,110,0.286) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-live-urgent[data-level="amber"] { background: rgba(239,178,92,0.12) !important; border: 0.5px solid rgba(239,178,92,0.34) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-live-urgent[data-level="amber"] .bp-live-urgent-ico { background: #EFB25C !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-live-urgent[data-level="amber"] .bp-live-urgent-eta { color: #EFB25C !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-zoom-chip { background: rgba(255,255,255,0.26) !important; box-shadow: 0 12px 30px -12px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.14) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-zoom-chip--corner { box-shadow: 0 10px 24px -14px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.14) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .pulse-empty-state { background: linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.101)), radial-gradient(ellipse 420px 160px at 12% 0%, rgba(255,138,128,0.14), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,0.104) 0 1px, transparent 1px 72px) !important; border: 0.5px solid rgba(255,255,255,0.234) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.11), 0 8px 22px -18px rgba(0,0,0,0.72) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .pulse-source-dot { box-shadow: 0 0 0 3px rgba(79,214,155,0.216) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .cs-bar-track { background: rgba(255,255,255,0.078) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .cs-bar-energy { background: linear-gradient(90deg, #3FD8C8, #4FE0CE) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .cs-bar-demand { background: linear-gradient(90deg, #F0A46B, #F0A46B) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .cs-swatch-energy { background: linear-gradient(135deg, #3FD8C8, #4FE0CE) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .cs-swatch-demand { background: linear-gradient(135deg, #F0A46B, #F0A46B) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .kpi { background: rgba(255,255,255,0.101) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .glass-card::before { background: linear-gradient(135deg, rgba(255,255,255,0.072) 0%, rgba(255,255,255,0) 45%) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .heatmap-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.182) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .heatmap-wrap::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.26) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-tooltip { background: #1b2637 !important; box-shadow: inset 0 0.5px 0 0 rgba(255,255,255,0.11), 0 18px 40px rgba(0,0,0,0.432) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .glass-card.profile-card, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .insights-card { background: linear-gradient(135deg, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.065) 60%, rgba(255,255,255,0.072) 100%), radial-gradient(ellipse 700px 280px at 92% 0%, rgba(189,166,255,0.072), transparent 70%) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .insights-card::before { background: linear-gradient(135deg, rgba(255,255,255,0.072) 0%, rgba(255,255,255,0) 45%) !important; } /* Dashboard preferences dialog (KP, 2026-07-28). Two light-theme leftovers made this unreadable on dark. The SCRIM was white at 26% — on a light page that mutes the background, on a dark one it just hazes it — and the PANEL was an 11% white wash with no blur, so the heatmap read straight through the settings rows. The scrim now dims (dark, not white) and the panel is a solid surface. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-modal-backdrop { background: rgba(6,10,18,0.66) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-modal { background: linear-gradient(180deg, #1b2637, #141d2c) !important; border: 0.5px solid rgba(255,255,255,0.10) !important; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.82), 0 8px 24px -10px rgba(0,0,0,0.55) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-modal-close { background: rgba(255,255,255,0.091) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-modal-close:hover { background: rgba(255,255,255,0.06) !important; } /* The month review is a CARD OVER THE PAGE, not a page surface, so the thin-white-lift idiom is wrong here: 6% white over live charts was a window, and John could read the dashboard through last month's numbers (2026-07-29 pm screenshot). A modal panel is near-opaque - same family as the srm dialog in fmc-hub-theme.css - and its backdrop is a DARK veil, not a white haze, for the same reason. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-backdrop { background: rgba(4, 9, 16, 0.62) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-modal { background: linear-gradient(180deg, rgba(27, 38, 56, 0.985) 0%, rgba(17, 25, 39, 0.985) 100%) !important; border-color: rgba(255,255,255,0.13) !important; box-shadow: 0 48px 110px -34px rgba(0,0,0,0.72), 0 10px 30px -12px rgba(0,0,0,0.48) !important; } /* The fade at the foot of a scrolling review (2026-09-30): the modal's own bottom colour, so the edge reads as the card and not as a bar. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-more { background: linear-gradient(to bottom, rgba(17, 25, 39, 0) 0%, rgba(17, 25, 39, 0.985) 100%) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-close { background: rgba(255,255,255,0.107) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-close:hover { background: rgba(255,255,255,0.06) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-stat { box-shadow: 0 10px 26px -18px rgba(0,0,0,0.48) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-goal { background: linear-gradient(180deg, rgba(255,255,255,0.11), var(--p-teal-tint)) !important; box-shadow: 0 12px 30px -20px rgba(63,216,200,0.42) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-goal[data-metric="peak"], html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-goal[data-metric="usage"] { background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(189,166,255,0.096)) !important; border-color: rgba(189,166,255,0.264) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-goal:hover { border-color: rgba(189,166,255,0.34) !important; box-shadow: 0 16px 34px -18px rgba(189,166,255,0.34) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-goal-edit { background: rgba(189,166,255,0.12) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-goal:hover .mr-goal-edit, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-goal:focus-visible .mr-goal-edit { background: rgba(189,166,255,0.192) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-goals.is-editing .mr-goal { box-shadow: 0 12px 30px -20px rgba(63,216,200,0.42) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-goals.is-editing .mr-goal:hover { border-color: rgba(189,166,255,0.264) !important; box-shadow: 0 12px 30px -20px rgba(63,216,200,0.42) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-goal-input { background: rgba(255,255,255,0.06) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-why-shared { background: rgba(189,166,255,0.06) !important; border: 0.5px solid rgba(189,166,255,0.168) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-bill:hover { background: rgba(63,216,200,0.208) !important; } /* Primary action pill (KP, 2026-07-28). Same token trap as the tab-bar indicator: the fill is built from --p-teal / --p-teal-deep, which dark mode repoints to bright mint (#3FD8C8 -> #7FEADD) for TEXT on dark. As a button fill that gives a pale pill shading LIGHTER downward, carrying white text at ~1.7:1. Keep the mint — it is the accent — and put the dark ink on top, which is how a filled control on a bright colour should read (~9:1). */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-btn-primary { background: linear-gradient(180deg, #46DCC9 0%, #2FBFAE 100%) !important; color: #04231F !important; font-weight: 700 !important; box-shadow: 0 12px 26px -12px rgba(63,216,200,0.45), inset 0 1px 0 rgba(255,255,255,0.22) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-btn-primary:hover { box-shadow: 0 16px 32px -12px rgba(63,216,200,0.42) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-btn-ghost { background: rgba(255,255,255,0.11) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mr-btn-ghost:hover { background: rgba(255,255,255,0.06) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bill-snapshot { background: linear-gradient(135deg, rgba(255,255,255,0.101) 0%, rgba(255,255,255,0.072) 60%, rgba(255,255,255,0.072) 100%), radial-gradient(ellipse 700px 320px at 92% -10%, rgba(255,138,128,0.14), transparent 65%) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bill-snapshot::before { background: linear-gradient(135deg, rgba(255,255,255,0.072) 0%, rgba(255,255,255,0) 45%) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ar-item-action { background: rgba(63,216,200,0.065) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-emp-overlay { background: rgba(255,255,255,0.234) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-emp-panel { background: #1b2637 !important; box-shadow: -28px 0 48px -16px rgba(0,0,0,0.432) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-emp-close:hover { background: rgba(255,255,255,0.052) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-emp-cand:hover { background: rgba(255,255,255,0.11) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-emp-compose textarea { background: rgba(255,255,255,0.11) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-emp-history-item { background: rgba(255,255,255,0.039) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-co2e-info { background: rgba(255,255,255,0.072) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-co2e-info:hover { background: rgba(255,255,255,0.104) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-co2e-info:focus-visible { outline: 2px solid rgba(189,166,255,0.34) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-co2e-info[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(189,166,255,0.216) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-co2e-popover { background: #1b2637 !important; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.528) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-co2e-band { background: rgba(255,255,255,0.072) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-co2e-band.is-current { border-color: rgba(189,166,255,0.34) !important; box-shadow: 0 0 0 2px rgba(189,166,255,0.12) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-co2e-band-swatch { border: 0.5px solid rgba(255,255,255,0.234) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-co2e-band.watch .bs-co2e-band-swatch { background: #EFB25C !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-co2e-now { background: rgba(189,166,255,0.072) !important; border: 0.5px solid rgba(189,166,255,0.24) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-demo-ribbon { background: radial-gradient(130% 200% at 8% -30%, rgba(255,138,128,0.126), transparent 55%), rgba(255,255,255,0.101) !important; border: 0.5px solid rgba(255,255,255,0.13) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.078), 0 8px 22px rgba(0,0,0,0.144) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-demo-ribbon-cta:hover { background: #C3CEDA !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-calib { background: radial-gradient(120% 160% at 12% -20%, rgba(255,138,128,0.098), transparent 55%), rgba(255,255,255,0.094) !important; border: 0.5px solid rgba(255,255,255,0.13) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.085), 0 10px 26px rgba(0,0,0,0.144) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-calib-steps .n { border: 1.5px solid rgba(255,255,255,0.26) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-calib-btn { border: 0.5px solid rgba(255,255,255,0.208) !important; background: rgba(255,255,255,0.104) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-recipients input { border: 0.5px solid rgba(255,255,255,0.208) !important; background: rgba(255,255,255,0.11) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-recipients input:focus { box-shadow: 0 0 0 3px rgba(255,138,128,0.14) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bill-analysis-card .ba-hero-trend[data-state="neutral"] { color: #EFB25C !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-fc2-iconbtn { background: rgba(63,216,200,0.104) !important; border: 0.5px solid rgba(63,216,200,0.286) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-fc2-iconbtn:hover { background: rgba(63,216,200,0.208) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-fc2-dot--kw { background: #F0A46B !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-fc2-row-pct.flat { color: #EFB25C !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-fc2-slider:focus-visible .bp-fc2-thumb { box-shadow: 0 0 0 3px rgba(63,216,200,0.42), 0 4px 12px -2px rgba(0,0,0,0.72) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-fc2-track { background: rgba(255,255,255,0.13) !important; background-image: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0)) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.336), inset 0 -0.5px 0 rgba(255,255,255,0.065) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-fc2-thumb { background: rgba(255,255,255,0.091) !important; border: 0.5px solid rgba(255,255,255,0.11) !important; box-shadow: 0 4px 12px -2px rgba(0,0,0,0.72), inset 0 1px 1px rgba(255,255,255,0.11) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-fc2-receipt { background: linear-gradient(168deg, rgba(255,255,255,0.094), rgba(255,255,255,0.072) 55%, rgba(63,216,200,0.091)) !important; border: 0.5px solid rgba(255,255,255,0.13) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,0.11), 0 10px 24px -18px rgba(0,0,0,0.72) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-fc2-split-bar { background: rgba(255,255,255,0.104) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.288) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-fc2-split-seg--demand { background: linear-gradient(180deg, #F0A46B, #F0A46B) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bill-analysis-card .ba-empty-state { background: linear-gradient(135deg, rgba(255,255,255,0.109), rgba(255,255,255,0.083)), radial-gradient(ellipse 420px 180px at 8% 0%, rgba(63,216,200,0.13), transparent 70%) !important; border: 0.5px solid rgba(255,255,255,0.182) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.104) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface #bsGoalVal { color: #BDA6FF !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-goal-edit:hover { background: rgba(63,216,200,0.078) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-goal-input { background: rgba(255,255,255,0.06) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-dive-title { text-shadow: 0 1px 0 rgba(255,255,255,0.11), 0 -1px 1px rgba(0,0,0,0.528) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-dive-title .bp-dive-accent { text-shadow: 0 1px 0 rgba(255,255,255,0.11), 0 -1px 1px rgba(122,28,20,0.28) !important; } @media (max-width: 540px) { html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-carousel-item .heatmap-wrap::after { background: linear-gradient(90deg, rgba(248,250,252,0), rgba(255,255,255,0.11)) !important; } } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .hm-nav-btn { background: rgba(255,255,255,0.078) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-infopop { background: #1b2637 !important; box-shadow: 0 12px 30px -12px rgba(0,0,0,0.72) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-weather-toggle { background: rgba(255,255,255,0.052) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-weather-toggle[aria-pressed="true"] { background: rgba(63,216,200,0.13) !important; border-color: rgba(63,216,200,0.39) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-usage-goal-val { color: #BDA6FF !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-dbar-track { background: rgba(255,255,255,0.091) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.168) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-dmark-flag { background: rgba(255,255,255,0.11) !important; box-shadow: 0 5px 14px -9px rgba(0,0,0,0.72) !important; } /* The marker inks (2026-07-30, John: "52 MIN", "372 PEAK" and "425 LIMIT" unreadable). The flags flipped to dark chips above but kept the light theme's DEEP inks - forest green, brick red, royal purple - which vanish on navy. Lift each to the theme's own ramp: --p-ok green, --p-danger red, the goal purple already worn by .bp-usage-goal-val, and the avg/gray marker to lifted secondary ink. NOW stays dynamic via --now-color, which is already legible by design. The generic .bs-dmark rule sits BEFORE the variants on purpose - same specificity, so source order is what lets each variant win over it. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-dmark { --m-color: rgba(255,255,255,0.38); --m-ink: #C3CEDA; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-dmark--min { --m-color: #4FD69B; --m-ink: #4FD69B; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-dmark--peak { --m-color: #FF8A80; --m-ink: #FF8A80; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-dmark--goal { --m-color: #BDA6FF; --m-ink: #BDA6FF; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-dmark--now { --m-color: var(--now-color, #FF8A80); --m-ink: var(--now-color, #FF8A80); } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-dmark--now .bs-dmark-stem { box-shadow: 0 0 0 2px rgba(255,255,255,0.11) !important; } /* Demand-bar marker labels (KP, 2026-07-28). Each marker carries two colours: --m-color for the stem/border and --m-ink for the text. --m-ink is deliberately the DARK shade of the hue, because the flag used to sit on a white card. Dark mode restyled the flag's background but never re-pointed the ink, so "52 Min" was #157347 (dark green) and "425 Limit" #5b21b6 (dark purple) on a near-black pill — roughly 2:1 contrast, effectively unreadable. Same hues, lifted to light tints so each marker keeps its identity. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-dmark--min { --m-ink: #4ade80 !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-dmark--peak { --m-ink: #fb7185 !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-dmark--goal { --m-ink: #b39bfb !important; } /* "Now" is coloured live by demand risk (--now-color from JS), so it is lifted relatively rather than pinned to one value. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-dmark--now { --m-ink: color-mix(in srgb, var(--now-color, #c0392b) 45%, #ffffff) !important; } /* Any marker without a variant class falls back to the shared body ink. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-dmark { --m-ink: #eaf0f6; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bs-dbar-toggle:hover { border-color: rgba(255,255,255,0.26) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-tabs { background: linear-gradient(180deg, rgba(255,255,255,0.044), rgba(255,255,255,0.12)) !important; border: 0.5px solid rgba(255,255,255,0.072) !important; box-shadow: 0 8px 20px -10px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.104), inset 0 -1px 1px rgba(0,0,0,0.12) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-tabs-indicator { box-shadow: 0 4px 12px -4px rgba(255,138,128,0.34), inset 0 1px 0 rgba(255,255,255,0.033) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .pulse-mark { background: rgba(255,255,255,0.098) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .pulse-mark.today { border-left: 3px solid #EFB25C !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .demand-watch { background: linear-gradient(135deg, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.065) 60%, rgba(254,247,232,0.65) 100%) !important; border: 0.5px solid rgba(239,178,92,0.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.11), 0 12px 28px -16px rgba(239,178,92,0.34) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .demand-watch.is-clear { background: linear-gradient(135deg, rgba(255,255,255,0.085), rgba(245,250,238,0.55)) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .demand-watch.is-breach { border-color: rgba(255,122,110,0.34) !important; background: linear-gradient(135deg, rgba(255,255,255,0.085), rgba(254,237,237,0.60)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.11), 0 12px 28px -16px rgba(255,122,110,0.34) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .meter-health { background: rgba(255,255,255,0.059) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mh-dot { box-shadow: 0 0 0 3px rgba(79,214,155,0.216) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mh-dot.warn { background: #EFB25C !important; box-shadow: 0 0 0 3px rgba(239,178,92,0.216) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mh-dot.bad { box-shadow: 0 0 0 3px rgba(255,122,110,0.26) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-rate-input input { background: rgba(255,255,255,0.101) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-rate-input input:focus-visible { border-color: rgba(189,166,255,0.34) !important; box-shadow: 0 0 0 3px rgba(189,166,255,0.144) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-rate-input select.ds-select { background: rgba(255,255,255,0.101) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-rate-input select.ds-select:focus-visible { border-color: rgba(189,166,255,0.34) !important; box-shadow: 0 0 0 3px rgba(189,166,255,0.144) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-section { box-shadow: 0 12px 30px -22px rgba(0,0,0,0.528) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-acc-head:hover { background: rgba(255,255,255,0.039) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-section.is-open .ds-acc-head { background: rgba(255,255,255,0.026) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-toggle-thumb { background: rgba(255,255,255,0.06) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.6) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-toggle input:focus-visible + .ds-toggle-track { box-shadow: 0 0 0 3px rgba(255,138,128,0.28) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-options { background: rgba(255,255,255,0.101) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-opt.active { background: rgba(255,255,255,0.06) !important; box-shadow: 0 4px 12px -6px rgba(0,0,0,0.432), inset 0 0 0 0.5px rgba(0,0,0,0.24) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-bill-btn { background: rgba(255,255,255,0.107) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-bill-btn:hover { box-shadow: 0 6px 16px -10px rgba(0,0,0,0.72) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-bill-btn--primary:hover { box-shadow: 0 8px 20px -10px rgba(63,216,200,0.42) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-bill-btn--ghost:hover { background: rgba(255,255,255,0.052) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-bill-cam-guide { border: 2px dashed rgba(255,255,255,0.072) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-bill-spinner { border: 2px solid rgba(63,216,200,0.325) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-bill-review { background: rgba(255,255,255,0.11) !important; box-shadow: 0 10px 30px -18px rgba(0,0,0,0.72) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-search-btn:hover { background: rgba(255,255,255,0.11) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-bell-btn { background: rgba(255,255,255,0.078) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-bell-btn:hover { background: rgba(255,255,255,0.11) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-bell-dot { border: 1.5px solid rgba(255,255,255,0.11) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-bell-menu { background: #1b2637 !important; box-shadow: 0 22px 56px rgba(0,0,0,0.432), 0 0 0 0.5px rgba(255,255,255,0.104) !important; } /* Verbatim from fmc-hub-theme.css: the account pill and its menu are the one piece of chrome a customer carries from the Hub into BuildingPulse, so they cannot restyle under them. This sheet had the pill on a heavier lift and the MENU on translucent white where the Hub drops a near-solid navy card. Change one, change both. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-account-btn { background: var(--d-raise) !important; border-color: var(--p-line) !important; color: var(--p-ink-2) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-account-btn:hover { background: var(--d-raise-2) !important; border-color: var(--p-teal-ring) !important; color: var(--p-ink) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-account-menu { /* Opaque (2026-09-10, John): the same solid sheet the Hub drops. */ background: #0F1622 !important; border: 0.5px solid var(--p-line) !important; box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.05) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .skeleton-shimmer { background-color: rgba(255,255,255,0.091) !important; background-image: linear-gradient(100deg, rgba(14,42,82,0.00) 30%, rgba(255,255,255,0.13) 50%, rgba(14,42,82,0.00) 70%) !important; } @media (prefers-reduced-transparency: reduce) { html[data-hub-theme="dark"] body.portal-light.hub-theme-surface nav, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-glass-nav, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .pulse-banner, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bill-snapshot, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .glass-card, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .ds-modal, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-grid-card { background: rgba(255,255,255,0.11) !important; } } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .pulse-live-status[data-status="normal"] { background: rgba(79,214,155,0.12) !important; border-color: rgba(79,214,155,0.336) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .pulse-live-status[data-status="watch"] { color: #EFB25C !important; background: rgba(239,178,92,0.144) !important; border-color: rgba(239,178,92,0.34) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .pulse-live-status[data-status="action"] { background: rgba(255,122,110,0.13) !important; border-color: rgba(255,122,110,0.34) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .eg-status-chip[data-state="watch"] { color: #EFB25C !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .eg-emit-ind[data-state="watch"] { color: #EFB25C !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-mix-tooltip { background: #1b2637 !important; box-shadow: 0 8px 20px -10px rgba(0,0,0,0.72) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .lf-scale-track { background: linear-gradient(90deg, #FF7A6E 0%, #EFC75C 50%, #4FD69B 100%) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .lf-scale-marker { box-shadow: 0 0 0 3px rgba(255,255,255,0.11), 0 2px 6px rgba(0,0,0,0.72) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .lf-scale-track--invert { background: linear-gradient(90deg, #4FD69B 0%, #EFC75C 50%, #FF7A6E 100%) !important; } /* Legend must match the bars, which dark-mode forks to amber/mint (see the NAVY/TEAL helpers in the dashboard's daily-spend block). The swatches were a washed white and a 42% mint, matching neither the old navy bars nor the new ones (KP, 2026-07-28). */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-ds-leg--wd::before { background: rgba(242,166,60,0.88) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-ds-leg--we::before { background: rgba(63,216,200,0.85) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-ds-leg--avg::before { border-top: 2px dashed rgba(255,255,255,0.26) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .eg-leg-line-swatch--multi { background: linear-gradient(90deg, #4FD69B, #EFB25C, #F0A46B, #FF7A6E) !important; } /* :not(.gpo-status) is load bearing (2026-08-02, John). #gpoOutlookIcon carries BOTH classes, and the grid verdict paints its own colour inline from gridPeakOutlook()'s vColor() - green #4FD69B for "unlikely", amber for "possible", red for "likely". An author !important beats a normal inline declaration, so while MY BUILDING sat in `watch` this rule was reaching across the tab boundary and forcing the grid's green check to amber: John's screenshot had a yellow tick over the words "A grid peak is unlikely today". The template says as much at .gpo-status ("colour is set inline in JS ... so it doesn't inherit the My Building card state"); this restores that. The !important stays for My Building's own icon, which has no inline colour and would otherwise fall back to the light #d6a51c, which is mud on navy. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-outlook-card[data-state="watch"] .bp-outlook-status:not(.gpo-status) { color: #EFB25C !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-ol-kw-peak { color: #FF8A80 !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-ol-kw-goal { color: #BDA6FF !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-fc-sw-band { background: rgba(63,216,200,0.234) !important; border: 0.5px solid rgba(63,216,200,0.42) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-otoggle { background: rgba(255,255,255,0.078) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-otoggle-btn.has-alert.alert-possible::after { color: #EFB25C !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-otoggle-btn.is-on { background: rgba(255,255,255,0.06) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.288), inset 0 0 0 0.5px var(--p-line, rgba(14,42,82,0.10)) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .gpo-zone-green { background: linear-gradient(180deg, rgba(79,214,155,0), rgba(79,214,155,0.06)) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .gpo-zone-amber { background: rgba(239,178,92,0.156) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .gpo-zone-red { background: linear-gradient(180deg, rgba(255,122,110,0.091), rgba(255,122,110,0.026)) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .gpo-peakline { border-top: 1.35px dashed #FF8A80 !important; } /* The label sits ON the dashed annual-peak line and has to MASK it — that is why the light theme fills it 92% opaque. Dark mode had swapped in an 11% white wash, so the dashed line ran straight through the text and the two read as overlapping (KP, 2026-07-28). Opaque again, in the card's own ink. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .gpo-peakline-label { color: #FF8A80 !important; background: #131c2b !important; border: 0.85px solid #FF8A80 !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .gpo-tip { background: #1b2637 !important; box-shadow: 0 8px 20px -10px rgba(0,0,0,0.72) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .gpo-bar[data-v="unlikely"] { background: linear-gradient(180deg, #4FD69B, #4FD69B) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .gpo-bar[data-v="possible"] { background: linear-gradient(180deg, #EFC75C, #EFB25C) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .gpo-bar[data-v="likely"] { background: linear-gradient(180deg, #FF8A80, #FF7A6E) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .gpo-day-v[data-v="possible"] { color: #EFB25C !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bpcap-track { background: rgba(255,255,255,0.091) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-clean--clean { background: rgba(79,214,155,0.34) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-clean--moderate { background: rgba(239,178,92,0.34) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-clean--high { background: rgba(255,122,110,0.34) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-em-proj-sw { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.26) 0 3px, rgba(255,255,255,0.104) 3px 6px) !important; border: 0.5px dashed rgba(255,255,255,0.26) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-gm-cursor { background: rgba(255,255,255,0.26) !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.11) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-carousel-item .bp-gm-card .bp-gm-legend .eg-leg-item { background: rgba(255,255,255,0.072) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.098) !important; } @media (max-width: 1023.98px) { html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-carousel-item .bp-mix-card .bp-mix-ro-row { background: rgba(255,255,255,0.065) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.091) !important; } } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-co2e-legend-bar { background: linear-gradient(90deg, #4FD69B 0%, #EFB25C 45%, #F0A46B 75%, #FF7A6E 100%) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-ow-bar { background: rgba(255,255,255,0.091) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-glass-nav { border: 0.5px solid rgba(255,255,255,0.072) !important; box-shadow: 0 22px 48px -16px rgba(0,0,0,0.72), 0 4px 14px -6px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.11), inset 0 -1px 1.5px rgba(0,0,0,0.144) !important; } /* Section tab bar readability (KP, 2026-07-28). The capsule is "liquid glass": a near-transparent frost plus a specular sheen that travels across it on a 9s loop. On the light page that reads as glass. On the dark dashboard it read as GLARE — the fill was ~5% white, so page copy ("SCROLL DOWN TO DIVE DEEPER") showed straight through the labels, and the moving highlight swept over them. Fix: give the bar a real dark fill so nothing bleeds through, lean on the blur instead of transparency, and retire the travelling band (the static top rim stays, so it still reads as glass). */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-glass-filter { background: linear-gradient(180deg, rgba(23,33,50,0.92), rgba(16,24,38,0.94)) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; backdrop-filter: blur(20px) saturate(150%) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-glass-sheen { background: linear-gradient(180deg, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0) 42%) !important; animation: none !important; } /* Active-tab pill (KP, 2026-07-28). Its gradient is built from --bp-red / --bp-red-deep, and dark mode repoints those to #FF8A80 — correct for TEXT and chart lines on a dark ground, wrong for a filled control: the pill came out pale salmon, shading LIGHTER downward, with white labels on it at ~2:1. Give the fill its own red so the control reads as a control; the salmon token keeps doing its job everywhere else. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-glass-indicator { background: linear-gradient(180deg, #DE4635, #B43224) !important; box-shadow: 0 9px 20px -6px rgba(222,70,53,0.42), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -2px 4px rgba(74,18,12,0.34) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-glass-indicator::after { background: linear-gradient(180deg, rgba(255,255,255,0.044), rgba(255,255,255,0)) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-nav-badge { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.11), 0 1px 2px rgba(0,0,0,0.72) !important; } /* ══════════════════════════════════════════════════════════════════════ 3. Chrome Hand-authored, and last on purpose: these rules share their specificity with the derived block above, so being later is what lets a considered value beat a transformed one. ══════════════════════════════════════════════════════════════════════ */ /* ── Page ground ── The Hub's own navy, flat (2026-09-08, John). The accepted reference is the app's Home / map screen: one quiet #0F1622 ground that darkens a shade toward the foot, and slate cards raised off it by tone alone. The red and teal aurora blobs this page used to restate from its bone theme, and the light-dot grain under them, both competed with that - a coloured wash behind a chart reads as part of the chart on navy - so both are retired here rather than dimmed. The fade mask on ::after stays (it is what lets the foot settle onto --d-void-2), and the ground token itself is unchanged, so BuildingPulse still shares its floor with the Dashboard and the Location page. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface { background: var(--d-void) !important; color: var(--p-ink) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface::after { background: linear-gradient(180deg, var(--d-void) 0%, var(--d-void) 58%, var(--d-void-2) 100%) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface::before { opacity: 0 !important; background-image: none !important; } /* ── Navbar ── Deliberately the SAME treatment fmc-hub-theme.css and fmc-ems-dark.css give the bar, so a customer moving from the Hub into BuildingPulse and on into their EMS sees the navbar hold still across the navigation instead of restyling under them. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface nav { background: linear-gradient(180deg, rgba(17,25,39,0.94) 0%, rgba(13,20,32,0.94) 100%) !important; border-bottom: 0.5px solid var(--p-line) !important; backdrop-filter: blur(24px) saturate(160%) !important; -webkit-backdrop-filter: blur(24px) saturate(160%) !important; box-shadow: inset 0 0.5px 0 0 rgba(255,255,255,0.06), 0 2px 20px rgba(0,0,0,0.34) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-logo img { background: transparent !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-logo-text { color: var(--p-ink) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-logo-text span { color: var(--p-teal-deep) !important; } /* "Hub" goes white on navy (fmc-hub-theme.css does the same). Teal type at 13px on this ground is legible but reads as a link, not a wordmark. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-logo-text.nav-hub-word { color: #fff !important; } /* Request-service paper plane: WHITE on navy, matching fmc-hub-theme.css (2026-07-27, John). The icon carries stroke="#007D71" as a presentation attribute in the markup and the page's own sheet paints the anchor var(--p-teal); on bone that deep teal is the brand mark, on navy it is a dim smudge next to a white account name. This page never loads fmc-hub-theme.css, which is the only reason the Hub's own rule for the same button did not reach it. Hover keeps the teal so the control still answers the pointer. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-service-btn { color: #fff !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-service-btn svg { stroke: #fff !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-service-btn:hover { color: var(--p-teal) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-service-btn:hover svg { stroke: var(--p-teal) !important; } /* Initials avatar keeps the ORIGINAL brand gradient — restated literally, NOT via tokens, and for the same reason fmc-hub-theme.css restates it (see the note there). The token block at the top of this file lifts --p-teal / --p-teal-deep so brand teal survives as TYPE on navy, and the page's own sheet pours those same two tokens into this avatar's fill, so the lift turned a deep teal disc into a bright mint one. The EMS shell is one tap away and still shows #006A60 to #007D71; the two must match. White initials clear AA on it. Photo avatars untouched. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-account-avatar:not(.has-photo) { background: linear-gradient(135deg, #006A60, #007D71) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-account-avatar.has-photo { background: var(--d-raise) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-dropdown-menu, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mobile-dropdown { background: var(--d-panel-solid) !important; border: 0.5px solid var(--p-line) !important; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.72) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-dropdown-menu a, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .mobile-dropdown a { color: var(--p-ink-2) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .nav-dropdown-menu a:hover { background: var(--bp-red-tint) !important; color: var(--bp-red) !important; } /* ── The floating tab bar (Live / Usage / Emissions / Costs) ── The tabs are #43514d, a slate green picked to sit quietly on the bone page's frosted capsule. On navy that same value is very nearly the bar itself: three of the four destinations in this product went effectively unlabelled in Dark, which is not a subtlety worth defending. The labels and their icons go white here (2026-07-27, John). Active still reads as active without a colour contrast to carry it: the red capsule slides under the current tab and is the loudest thing on the bar. The 0.82 alpha on the inactive three is the only hierarchy left, and it is enough at 10.5px on this ground. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-glass-btn { color: rgba(255,255,255,0.82) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-glass-btn:hover, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bp-glass-btn.is-active { color: #fff !important; } /* ── The cards: one raised slate panel (2026-09-08, John) ── The four hero cards (.pulse-banner carries Live, Usage, Emissions and the grid card; .bill-snapshot is Costs) and the Dive Deeper decks (.glass-card, .insights-card) all sit on the Hub's solid raised panel, --d-panel-solid, the same token the native app paints its cards with. Flat on purpose: the derived block above gives each family a white lift gradient plus a coloured bloom (red on the banner and the bill, violet on insights) and a screen-blended sheen in ::before, which on navy read as four slightly different tints of grey-pink. The map screen's cards are one tone, raised by contrast and a hairline; so are these now. The trace keeps its full weight, the border and the deep shadow stay, and the chart tooltips keep their glass (see the end of this file) because they float OVER a panel rather than being one. */ html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .pulse-banner, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bill-snapshot, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .glass-card, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .glass-card.profile-card, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .insights-card { background: var(--d-panel-solid) !important; border-color: var(--p-glass-border) !important; box-shadow: var(--p-glass-shadow) !important; } html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .pulse-banner::before, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .bill-snapshot::before, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .glass-card::before, html[data-hub-theme="dark"] body.portal-light.hub-theme-surface .insights-card::before { background: none !important; } /* ── Appearance control ── Since 2026-07-27 this styles the per-dashboard override in Settings → Appearance, not the Hub-wide Light / Dark / Auto control that used to sit in the page footer. That one moved out entirely: the Hub's own appearance is chosen in the Customize toolbars on the Dashboard and the Location page, and a third copy under a dashboard implied it governed this page alone. The class names are the partial's on purpose. The two controls do different jobs and must not share a JS binding, but they are the same control to look at, and a customer who has used one should not have to learn the other. Styled here rather than in fmc-hub-theme.css because this page never loads the shell sheets that style it everywhere else, and written unprefixed by the dark attribute for the same reason: it has to look right in BOTH themes, and Light is the theme it is most often used FROM. */ body.portal-light .hub-theme { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 4px 2px; } /* In a Settings group the surrounding .ds-group-head already supplies the heading and the explanation, so the control needs the top padding back rather than a second gap above it. */ body.portal-light .bp-appearance { padding: 2px 0 0; } body.portal-light .hub-theme-title { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--p-ink-3); } body.portal-light .hub-theme-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 0.5px solid var(--p-glass-border); background: var(--p-glass); } body.portal-light .hub-theme-opt { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--p-ink-3); font: inherit; font-size: 12px; font-weight: 650; transition: background .16s ease, color .16s ease; } body.portal-light .hub-theme-opt svg { width: 14px; height: 14px; } body.portal-light .hub-theme-opt:hover { color: var(--p-ink); } body.portal-light .hub-theme-opt.is-active { background: var(--p-teal-tint); color: var(--p-teal-deep); } body.portal-light .hub-theme-opt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } body.portal-light .hub-theme-note { flex: 1 1 100%; font-size: 10.5px; line-height: 1.5; color: var(--p-ink-4, #7d879a); } @media (prefers-reduced-motion: reduce) { body.portal-light .hub-theme-opt { transition: none; } } /* ── Native