/* hover-chart.css - the leaderboard's hover chart preview card (B15). Its own file, following the pattern lifecycle.css established: this is a feature, not a brand decision, so it can be reverted by deleting one file and one rather than by unpicking rules out of quorum.css. IT NOW READS TWO BRAND CUSTOM PROPERTIES (09/08), which the previous header comment explicitly said it did not. The change is deliberate and the old note was already a half-truth: the two colours were the page black and a hairline chosen to LOOK like the leaderboard's, held in sync by hand. `background: #0a0a09` was --bg spelled out, and `border: rgba(255,255,255,0.14)` was a hairline four times lighter than --border, which is why the card read as a pale rectangle against the table it floats over. Reading the variables means a retune of the palette moves the card with it instead of leaving it behind; the hex fallbacks keep the card renderable if this file is ever loaded on its own, exactly as signal.css does. WHERE THE WHITE CAME FROM, since it was blamed on TradingView. The widget is configured isTransparent:true, which means it paints no background at all - so every pixel behind the chart is OURS. Nothing in the widget config needed changing, and nothing in it was changed. There is exactly one of these elements on the page, created by hover-chart.js and appended to . It is never rendered by a template. */ .tv-hover-card { position: fixed; z-index: 9999; width: 340px; /* 190, down from 232 (09/08). The card was 340x232 around a 160px chart: nearly a third of it was a paragraph of placeholder text and an attribution block. A preview that grows becomes a window, and a window that opens under the pointer covers what you were reading - so the direction here is smaller, never larger. 8 padding + 160 chart + one 12px footer line + 8 padding lands just under 190, and min-height rather than height lets a stray line wrap without clipping. */ min-height: 190px; box-sizing: border-box; padding: 8px; background: var(--bg, #0a0a09); border: 1px solid var(--border, #232220); border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); /* THE CARD IS NOT INTERACTIVE, ON PURPOSE. pointer-events:none means the card can never sit between the pointer and the row underneath. Without it, a card that opens under the cursor immediately fires mouseout on the link that opened it, which tears the card down, which returns the pointer to the link, which opens it again - a flicker loop that is miserable to debug and trivial to avoid. The cost is that TradingView's attribution link inside the card is not clickable. Accepted: the same attribution is clickable on the company page, where the full-size widgets live, and a preview that flickers is not a preview. */ pointer-events: none; } .tv-hover-card[hidden] { display: none; } .tv-hover-card .tradingview-widget-container { width: 100%; } /* ONE FOOTER LINE, CARRYING TWO THINGS. Left: the period label. The widget already prints a percentage next to the price and that percentage IS the twelve-month change - dateRange is '12M'. What was missing was anything saying so, and a reader cannot be expected to infer the window from a number. Naming it costs one line and turns an unlabelled figure into a measurement. Right: TradingView's attribution, which is required by their embed terms. It is reduced here - 0.6rem, half opacity - and that is the most that may be done to it. It is not optional and must not be deleted, whatever a future compaction pass thinks of it. The left span doubles as the status line while the chart loads, which is what removed .tv-hover-note: a whole paragraph existed to say "Loading..." and then delete itself. */ .tv-hover-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; } .tv-hover-period { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); white-space: nowrap; } .tv-hover-card .tradingview-widget-copyright { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.6rem; line-height: 1.2; opacity: 0.5; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tv-hover-card .tradingview-widget-copyright a { color: inherit; text-decoration: none; } /* Belt and braces against a touch device that also reports a fine pointer (hybrid laptops). hover-chart.js already refuses to bind in that case; this makes the element unrenderable too, so a stale card cannot survive a device-mode change mid-session. */ @media (hover: none), (pointer: coarse) { .tv-hover-card { display: none !important; } }