/* ============================================================================ mvr-premium.css — Premium result-experience layer for the shared .mvx / .mv-results component system. ADDITIVE + global: loaded LAST in so it wins the cascade over legacy-mvx.css / mvr.css WITHOUT mutating them. Every section's result panels inherit this automatically ("change once" home for the premium look). Design contract (REDESIGN-HANDOFF §5 + the dataviz rules): • Token colors only; color is semantic (purple = action, green = good, gold = watch, red = bad). No neon hardcodes. • NO rainbow: one calm brand accent across tiles; decorative gradient numbers resolve to ink; status color rides a mark, never the whole title. • Text wears ink tokens (--text / --text-2 / --muted), not a series colour. • Depth, not flat and not neon: layered soft shadow + a hairline inset highlight. Motion is subtle and honours prefers-reduced-motion. SAFE-OVERRIDE DISCIPLINE (why this can't break a renderer): enhance box-shadow / pseudo-elements / radius / motion / typography only. Never blanket-replace a card's `background` or `border` — that preserves inline semantic surfaces (e.g. km-row gradients) and left-accent borders. The one number-colour rule is intentionally NON-!important so an inline semantic colour (red for a bad value) still wins. UI/UX only — no markup, data, or logic change. Consumes tokens.css + the .mvx legacy token set. ============================================================================ */ /* ---- 1. Premium primitives (theme-aware; additive, never mutate existing) -- */ .mvx{ --mvp-radius: 14px; --mvp-elev: 0 1px 2px rgba(26,20,48,.05), 0 14px 30px -16px rgba(26,20,48,.20); --mvp-elev-hi: 0 2px 6px rgba(26,20,48,.08), 0 26px 50px -18px rgba(26,20,48,.28); --mvp-inset: inset 0 1px 0 rgba(255,255,255,.72); --mvp-hairline: rgba(26,20,48,.08); --mvp-accent: linear-gradient(90deg, rgba(124,92,252,.50), rgba(124,92,252,0) 78%); --mvp-dot: rgba(124,92,252,.50); --mvp-track: rgba(26,20,48,.07); --mvp-fill: linear-gradient(90deg, #7c5cfc, #9b7bff); --mvp-chart-bg: linear-gradient(180deg, rgba(124,92,252,.03), rgba(124,92,252,0)), #ffffff; --mvp-ease: cubic-bezier(.4,0,.2,1); --mvp-rise: 340ms; } .mvx[data-theme="dark"]{ --mvp-elev: 0 1px 2px rgba(0,0,0,.40), 0 16px 34px -16px rgba(0,0,0,.66); --mvp-elev-hi: 0 3px 8px rgba(0,0,0,.50), 0 30px 58px -18px rgba(0,0,0,.80); --mvp-inset: inset 0 1px 0 rgba(255,255,255,.06); --mvp-hairline: rgba(255,255,255,.08); --mvp-accent: linear-gradient(90deg, rgba(176,156,255,.55), rgba(176,156,255,0) 78%); --mvp-dot: rgba(176,156,255,.55); --mvp-track: rgba(255,255,255,.08); --mvp-fill: linear-gradient(90deg, #7c5cfc, #b09cff); --mvp-chart-bg: linear-gradient(180deg, rgba(124,92,252,.06), rgba(255,255,255,.012)), #13111F; } /* ---- 2. Result container rhythm ------------------------------------------ */ .mvx .mv-results:empty{ display:none; } /* ---- 3. Card system — layered premium depth + calm hover lift ------------ Only box-shadow / radius / transition / transform are forced; `background` and `border` stay owned by the base rules + inline styles (semantic-safe). */ .mvx .glass-card, .mvx .mv-inline-card, .mvx .section-view .glass-card{ border-radius: var(--mvp-radius) !important; box-shadow: var(--mvp-elev), var(--mvp-inset) !important; transition: box-shadow .24s var(--mvp-ease), border-color .24s var(--mvp-ease), transform .24s var(--mvp-ease) !important; } .mvx .glass-card:hover, .mvx .section-view .glass-card:hover{ box-shadow: var(--mvp-elev-hi), var(--mvp-inset) !important; transform: translateY(-2px); } /* Featured card: presence via depth + a whisper brand ring, not a neon glow. */ .mvx .glow-card{ border-color: rgba(124,92,252,.20) !important; box-shadow: var(--mvp-elev-hi), var(--mvp-inset), 0 0 0 1px rgba(124,92,252,.10) !important; } /* ---- 4. Structured hero — premium calm banner ---------------------------- */ .mvx .mv-structured-hero{ border-radius: 16px !important; box-shadow: var(--mvp-elev), var(--mvp-inset) !important; } /* ---- 5. Stat / KPI tiles -------------------------------------------------- */ /* 5a. De-rainbow: ONE consistent brand hairline for every tile (kills the nth-child magenta/gold/green cycle in both variants and both themes). */ .mvx .stat-card::before, .mvx[data-theme="dark"] .stat-card::before, .mvx[data-theme="light"] .stat-card::before, .mvx .stat-card:nth-child(2)::before, .mvx .stat-card:nth-child(3)::before, .mvx .stat-card:nth-child(4)::before, .mvx[data-theme="dark"] .stat-card:nth-child(2)::before, .mvx[data-theme="dark"] .stat-card:nth-child(3)::before, .mvx[data-theme="dark"] .stat-card:nth-child(4)::before, .mvx[data-theme="light"] .stat-card:nth-child(2)::before, .mvx[data-theme="light"] .stat-card:nth-child(3)::before, .mvx[data-theme="light"] .stat-card:nth-child(4)::before, .mvx .section-view .stat-card::before, .mvx .section-view .stat-card:nth-child(4n+2)::before, .mvx .section-view .stat-card:nth-child(4n+3)::before, .mvx .section-view .stat-card:nth-child(4n)::before{ background: var(--mvp-accent) !important; opacity: 1 !important; height: 2px !important; } /* 5b. Depth + refined hover on tiles */ .mvx .stat-card, .mvx .section-view .stat-card{ border-radius: var(--mvp-radius) !important; box-shadow: var(--mvp-elev), var(--mvp-inset) !important; transition: box-shadow .2s var(--mvp-ease), border-color .2s var(--mvp-ease), transform .2s var(--mvp-ease) !important; } .mvx .stat-card:hover, .mvx .section-view .stat-card:hover{ box-shadow: var(--mvp-elev-hi), var(--mvp-inset) !important; transform: translateY(-2px); } /* 5c. De-rainbow the decorative gradient NUMBER → ink. NON-!important on colour so an inline semantic colour (e.g. red for a bad value) still wins. */ .mvx .stat-card .stat-value{ background: none; -webkit-text-fill-color: currentColor; color: var(--text); } /* 5d. The always-green status dot on section-view labels is a false universal "good" signal — calm it to a neutral brand mark (purely decorative). */ .mvx .section-view .stat-card .stat-label::before{ background: var(--mvp-dot) !important; box-shadow: none !important; } /* ---- 6. Metrics, result rows & progress bars ----------------------------- */ .mvx .metric-item{ border-radius: 12px !important; } .mvx .result-bar{ background: var(--mvp-track) !important; border-radius: 999px !important; overflow: hidden; } .mvx .result-bar-fill{ background: var(--mvp-fill) !important; border-radius: 999px !important; } /* ---- 7. Charts & dashboards — premium frame ------------------------------ Frame the canvas; the canvas itself is recoloured at the JS layer (Chart.js defaults) in a separate, verified step — CSS can't reach canvas pixels. */ .mvx .chart-container{ background: var(--mvp-chart-bg) !important; border: 1px solid var(--mvp-hairline) !important; border-radius: var(--mvp-radius) !important; padding: 16px !important; box-shadow: var(--mvp-inset); max-width: 100% !important; } /* Canvas never exceeds its framed container — backstop against overflow from a non-responsive/fixed-size chart or the frame padding, so charts stay inside the card. (box-sizing:border-box is already set globally by .mvx *.) */ .mvx .chart-container > canvas, .mvx .chart-container canvas{ max-width: 100% !important; } /* ---- 8. Status pills / badges inside results ----------------------------- */ .mvx .mv-results .badge, .mvx .section-view .badge{ border-radius: 999px !important; font-weight: 600; letter-spacing: .2px; } /* ---- 9. Card-title typography (hierarchy only — colour left to renderer) -- */ .mvx .glass-card > .card-title, .mvx .section-view .glass-card > .card-title{ font-family: 'Inter Tight','Inter',system-ui,sans-serif; font-weight: 700; letter-spacing: -0.01em; } /* ---- 10. Entrance motion — calm fade-rise as results render -------------- */ @keyframes mvpRise{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } } .mvx .mv-results > *{ animation: mvpRise var(--mvp-rise) var(--mvp-ease) both; } .mvx .mv-results > *:nth-child(2){ animation-delay: 60ms; } .mvx .mv-results > *:nth-child(3){ animation-delay: 120ms; } .mvx .mv-results > *:nth-child(4){ animation-delay: 180ms; } .mvx .mv-results > *:nth-child(n+5){ animation-delay: 240ms; } /* ---- 11. Motion safety --------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .mvx .glass-card, .mvx .section-view .glass-card, .mvx .stat-card, .mvx .section-view .stat-card{ transition:none !important; } .mvx .glass-card:hover, .mvx .section-view .glass-card:hover, .mvx .stat-card:hover, .mvx .section-view .stat-card:hover{ transform:none; } .mvx .mv-results > *{ animation:none !important; } }