/* Moneyness — institutional structure, crypto surface. * * Reference mix: DeGiro / BNP dense professional tables, Aave's soft depth, * Hyperliquid's mint-on-near-black. Serious enough for a desk, modern enough * for a DEX. * * Validated against the #fdfcf7 paper ground before use: * recency ramp #4dabf7 -> #0d4478 all checks pass, light end 2.41:1 * venue hues #2563eb #d97706 #db2777 all-pairs CVD + contrast pass * skew poles #f87171 <-> #60a5fa dE 20.0 protan, 27.8 normal * Rejected: blue+magenta+violet sets at dE 4.7-5.4 protan — indistinguishable * to a red-green colourblind reader however good they look. */ :root{ /* Paper — the first palette chosen. Warm ground, blue data ramp. * All values previously validated: ramp light end clears the surface at * 2.41:1, venue trio passes all-pairs CVD, skew poles pass. The dark mint * variant is preserved at /tmp/style.mint.bak if it is ever wanted back. * * Note the ramp direction flips with the ground: on paper the DARKEST step * is the strongest, so the freshest trades are the darkest cells. On the * dark theme it was the reverse. grid.js maps freshest -> --q5 either way, * so the token values carry that difference and the JS does not change. */ /* WISE RETHEME (2026-08-05). Ground moves from warm paper to pure white with * sage-tinted surfaces (#e8ebe6 family); ink moves to the olive near-black * #0e0f0c; the interactive accent moves from brand blue to the green family, * with the lime #9fe870 reserved for FILLS (brand tokens below) and a deep * green #157033 for accent TEXT, because lime on white is 1.5:1 and can * never carry a glyph. All values below re-measured this session: * ink 19.2:1 white / 16.0:1 sage · ink2 9.4:1 · ink3 5.3:1 white * mint #157033 6.2:1 white, 5.1:1 sage — AA at caption size * ramp q1 #4dabf7 2.48:1 white — clears the 2:1 floor the paper ground set * The blue data ramp and venue trio are KEPT: they are data-viz, already * CVD-validated, and the Wise system itself keeps green out of data. */ /* MINIMAL / SCIENCE (2026-08-05, direction call by Danny). The surface is * an instrument, not a brand moment: warm-white paper, neutral hairlines, * near-black ink, ONE restrained green for interaction, and no fills where * a line will do. The lime brand fill is retired from chrome; ink itself is * the fill for primary controls, which is as quiet as a button can be. * Re-measured this session: ink 18.3:1, ink2 8.4:1, ink3 5.2:1, * mint 6.0:1 on bg, all AA or better on bg and s1. */ /* BINANCE VIBE (2026-08-05, direction call by Danny). The instrument * becomes an exchange: three grey levels carry ALL elevation (bg, surface, * elevated), shadow exists only on popovers, and the accent is the Binance * yellow #F0B90B. Yellow cannot carry text on a light ground (1.6:1), so * on light the accent TEXT is the deep gold #8A6600 (5.0:1) and yellow * appears only as a FILL with dark text. Re-measured this session: * ink 15.2:1, ink2 8.2:1, ink3 4.9:1 bg / 4.3:1 s2 large-only. */ --bg:#fafafa; --card:#ffffff; --elev:0 4px 16px rgba(24,26,32,.16), 0 0 0 1px rgba(24,26,32,.04); --elev-sm:none; --s1:#f5f5f5; --s2:#eaecef; --s3:#dfe2e7; --line:#eaecef; --line2:#d5d9de; --glass:rgba(24,26,32,.04); --ink:#1e2329; --ink2:#474d57; --ink3:#5f6873; --mint:#8a6600; --mint2:#5c4400; --mint-dim:rgba(240,185,11,.16); --q1:#4dabf7; --q2:#3388d8; --q3:#2470b5; --q4:#175d97; --q5:#0d4478; --v1:#1971c2; --v2:#e8590c; --v3:#087f5b; --neg:#e03131; --mid:#868e96; --pos:#1971c2; --empty:#e3e5e8; --good:#087f5b; --warn:#e8590c; --bad:#e03131; /* Category hues 4 and 5, for the Flow treemap. The map drew five * categories from three hues: equity and gold both landed on the warn * orange, and crypto/index/pre-IPO were three blues a CVD reader cannot * split. Gold gets the gold family, pre-IPO the violet. */ /* v4 moved off the gold family: the Binance accent IS gold now, and a * data category wearing the interactive colour would read as a control. */ --v4:#0f766e; --v5:#7048e8; /* Category tokens, light. See the dark block for why these exist and for the * measured limit on six-way separation. Values are the current effective * ones — --cat-crypto was --q4, the fourth step of the recency ramp. */ --cat-crypto:#175d97; --cat-equity:var(--v2); --cat-etf:var(--v3); --cat-index:var(--v1); --cat-gold:var(--v4); --cat-preipo:var(--v5); /* Chip ink, light. Defined for the first time — see the dark block. */ --good-ink:#065f46; --warn-ink:#9a3412; /* THE BRAND FILL. Lime is a surface colour, never a text colour: it ships * with its own ink because #9fe870 carries 1.5:1 against white and no glyph * survives on it except the near-black. Same values in both themes — the * flag does not change colour at night. */ /* The primary fill is the Binance yellow, dark text on it (9.7:1). */ --brand-fill:#f0b90b; --brand-fill-2:#fcd535; --on-brand:#181a20; --focus:rgba(148,110,0,.6); --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --sans:"Inter","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; /* THE ALPHA LADDER — four roles, one overlay hue. * Audited before this existed: 48 filled elements on the overview alone, all * SOLID, drawn from 9 distinct background colours. A solid fill has to be * re-picked every time the thing behind it changes, which is why --s1..--s3 * kept multiplying; a translucent overlay is correct over the paper ground, * over the body's two radial gradients, and over another panel, unchanged. * * --ov is the overlay HUE as raw channels so the alphas can be authored per * theme. On paper it is the warm ink that --s1..--s3 and --line already walk * toward, NOT neutral black: solved against the existing tokens, .17 of * rgb(61,52,35) over --bg reproduces --line and .28 reproduces --line2, so * the ladder lands on the palette that was already contrast-validated rather * than greying the page out. * * DO NOT copy dark's values onto light. rgba(255,255,255,.04) is the * reference implementation and it is invisible on a #fdfcf7 ground — that is * the whole reason this is a token and not a literal. */ /* Re-solved for the sage ground: the overlay hue is now the deep forest the * surface family already walks toward, not the old warm ink. .17 over white * lands on the sage line family rather than greying the page. */ --ov:24,26,32; --fill-1:rgba(var(--ov),.05); /* card / panel fill */ --fill-2:rgba(var(--ov),.09); /* control fill */ --edge-1:rgba(var(--ov),.17); /* card / panel border */ --edge-2:rgba(var(--ov),.28); /* control border */ /* ONE RADIUS SCALE. Measured before this: TEN live radii — 5px on 82 * elements, 3px on 69, 4px on 30, 6px on 28, then 8, 99, 10, 2, 7 and 50%. * Nothing chose those; each was picked next to whatever was already there. * Four steps, each with a job, and --r is kept pointing at the card step so * the stylesheets that already say var(--r) move with the scale instead of * being left behind at 8px. */ /* Wise scale: the reference runs 8/12/16/24 with 24 as the card signature. * On a data surface this dense, 24 rounds away real table corners, so the * card step sits at 16 and controls at 12 — the same ratios, one notch in. */ /* One display step. The whole app ran 9px to 15.5px and hierarchy was * carried by weight alone; the numbers that ARE the pitch (the recording * counter, the footer counter) now get scale. Inter 900 is loaded and was * previously unused at any size a reader notices. */ --fs-display:24px; --r-mark:3px; /* data swatches: legend keys, bars, coverage cells */ --r-ctl:6px; /* every control */ --r-card:8px; /* every card and panel */ --r-pill:999px; /* status chips only */ --r:var(--r-card); /* Height of the fixed chrome: header 61 + trust 40 + ticker 46. Published * the way the reference implementations publish theirs, so nothing else has * to hard-code it. It is EXACT rather than approximate only because the * three bands above are given explicit heights — the trust bar used to wrap * to a second line at 1280 and silently make this number wrong by 23px. * Note the stage no longer needs it to position sticky children: a pane is * its own scrollport now, so its sticky rows stick at 0. */ /* header 61 + trust bar 40. Was 147 when a 46px ticker sat between them; removing the ticker without correcting this left 46px of dead space above every section, because the stage sizes itself from this number. If the chrome changes height again, this must change with it — it is the one value in the layout that cannot be derived from the elements it describes. */ --layout-top-offset:101px; /* One named z-scale. Measured before this: 14 of 17 sticky elements sat at * z-index:auto, so wherever two of them crossed the winner was decided by * DOM order — the frozen first column of the coverage table and the sticky * header resolved differently depending on which section rendered first. */ --z-raised:1; --z-sticky:20; --z-header:30; --z-pop:60; } /* NIGHT SHIFT — the palette this app shipped with before the paper conversion. * Recovered rather than reinvented: these exact values were already contrast- * and CVD-validated, and every token name matches the block above, so no rule * anywhere else in the app has to know which theme is active. * * READ BEFORE CHANGING THE RAMP. q1..q5 runs LIGHT -> DARK on paper and * DARK -> BRIGHT here. That is not an inconsistency to tidy up: grid.js maps * the freshest trade to --q5 in both themes, so the reversal has to live in the * token VALUES or the freshest cells would render as the faintest ones on one * of the two grounds. The JavaScript stays identical because of this. */ :root[data-theme="dark"]{ /* WISE NIGHT (2026-08-05). The ground is the Wise ink itself — #0e0f0c with * its olive cast — and the accent is the lime at full strength: #9fe870 * measures 13.05:1 here, so at night the lime IS a legal text colour and * --mint carries it directly. Surfaces walk the ink toward olive, not teal. * All values re-measured this session: ink 17.7:1, ink2 9.7:1, ink3 6.2:1, * good 10.0:1, pos 7.6:1, neg 6.9:1 — every one clears AA on both --bg and * --s1. */ /* MINIMAL / SCIENCE, night. Neutral near-black, not olive: at night the * instrument goes monochrome and the data ramp is the only bright thing. * The interactive green steps down from brand lime to a phosphor that * still reads 11.4:1. Re-measured: ink 16.6:1, ink2 8.3:1, ink3 5.3:1. */ /* BINANCE DARK, the brand default. Three greys are the whole elevation * story: #181A20 ground, #1E2329 surface, #2B3139 raised/hover. Yellow is * a legal text colour here (9.7:1). Re-measured: ink 14.7:1, ink2 9.2:1, * ink3 5.9:1 bg / 4.5:1 s2. */ --bg:#181a20; --card:#1e2329; --elev:0 4px 16px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04); --elev-sm:none; --s1:#242930; --s2:#2b3139; --s3:#353b45; --line:#2b3139; --line2:#3b424d; --glass:rgba(255,255,255,.04); --ink:#eaecef; --ink2:#b7bdc6; --ink3:#949ead; --mint:#f0b90b; --mint2:#fcd535; --mint-dim:rgba(240,185,11,.12); /* Recency ramp, rebuilt in the lime family. Same contract as before: the * freshest trade maps to --q5, so on this ground the ramp runs DARK -> BRIGHT * and the brightest cell is the brand lime. Monotone in relative luminance * (.070 .137 .263 .448 .663 — measured, each step ≥ .06 apart) and the dark * end clears the ground at 2.19:1. */ /* RECENCY RAMP, REBUILT IN BLUE (2026-08-05 visual direction pass). * * It was lime (#375721 -> #9fe870), left over from the Wise theme. Two * things were wrong with that once the accent became Binance yellow: * * 1. HUE COLLISION. Lime and #f0b90b are neighbours. The brightest ramp * step — "traded in the last hour", the single most important state on * the board — sat one hue step from the colour that means "control, * click me". A fresh trade and a button read as the same family. * 2. THE RAMP CHANGED HUE WITH THE THEME. Light ran blue, dark ran lime. * One encoding, two hues, depending on time of day. * * Blue is the fix for both: it is the complement of the yellow accent, so a * data cell can never be mistaken for a control, and it is the hue light was * already using, so the ramp now means the same thing in both themes. * * Steps are the documented blue ramp's 600/500/400/300/200. Validated as an * ORDINAL ramp (the correct gate for a sequential encoding) on this ground: * lightness monotone PASS, adjacent dL >= 0.06 PASS, hue spread 3 deg PASS, * and the dark end #184f95 clears the surface at 2.15:1 against the 2:1 * floor. The first draft ran darker (#1b3a5c) and measured 1.50:1 — it * failed, which is why these are the reference steps and not hand-mixed. * * Direction is unchanged: grid.js maps freshest -> --q5 in both themes, so * on this ground the ramp runs DARK -> BRIGHT and the freshest cell is the * brightest. The token values carry the flip; the JS does not change. */ --q1:#184f95; --q2:#256abf; --q3:#3987e5; --q4:#6da7ec; --q5:#9ec5f4; --v1:#2563eb; --v2:#d97706; --v3:#db2777; --neg:#f87171; --mid:#7f837b; --pos:#60a5fa; --empty:#20241a; /* Good is emerald, not lime: the brand fill cannot double as a status * colour or every CTA reads as "success". #34d399 sits a full hue step * toward cyan and still measures 10:1 here. */ /* Status speaks exchange: Binance green up, Binance red down. The skew * poles --neg/--pos stay blue/red on purpose - that pair is the * CVD-validated DATA encoding and profit/loss language must not eat it. */ --good:#0ecb81; --warn:#f0b90b; --bad:#f6465d; --v4:#14b8a6; --v5:#9775fa; /* CATEGORY TOKENS — the Flow treemap's six asset classes. * * These exist because tools.js mapped `crypto` to --q4, a step of the * RECENCY RAMP. A categorical encoding was borrowing ink from a sequential * one, which meant the ramp could not be retuned without silently repainting * the treemap: moving the dark ramp from lime to blue would have turned the * largest category on the page from green to blue as a side effect, with * nothing in either file to warn anyone. Decoupling costs one indirection * and zero pixels — the values below are the CURRENT effective ones. */ --cat-crypto:#82c44e; --cat-equity:var(--v2); --cat-etf:var(--v3); --cat-index:var(--v1); --cat-gold:var(--v4); --cat-preipo:var(--v5); /* MEASURED LIMIT, recorded here so it is not rediscovered. * Six categories cannot be separated to standard by colour alone. Searched * this session with the dataviz validator (all-pairs) across five runs — * randomized free hue/lightness/chroma per slot, ~2.4M samples in the final * run alone, plus every 6-subset of the skill's own documented palette and * several hand-designed semantic sets. Best achievable worst-pair * normal-vision dE, over all of them: * 6 slots 13.6 light / 10.8 dark — floor is 15, unreachable * 5 slots 16.1 light / 13.6 dark — light only * 4 slots 25.7 light / 19.1 dark — both PASS, with headroom * The shipped six measure dE 4.7 light / 13.4 dark, so light is genuinely * bad. Every hue reassignment tried either regressed dark or broke a * category's hue identity across themes without reaching the floor, so the * hues are LEFT ALONE rather than churned. The only change that reaches * standard is fewer categories: fold to four (crypto, equity, index, gold) * plus a neutral "Other". That is a product call, flagged not taken. * Until then the treemap's direct box labels are the mandatory secondary * encoding the relief rule requires — do not remove them. */ /* Ink for the tinted status chips on the Strategies board. These were * REFERENCED by opps.css (.cf.credit, .cf.rfq, .cf.two) and DEFINED * NOWHERE: `color: var(--good-ink)` with no fallback is invalid at computed * value time, so those chips silently inherited their parent's colour * instead of taking a semantic one. Measured against the rendered chip * background, not the declared one. */ --good-ink:#5ee9b5; --warn-ink:#fcd535; --brand-fill:#f0b90b; --brand-fill-2:#fcd535; --on-brand:#181a20; --focus:rgba(240,185,11,.55); /* The ladder, dark side. White overlay, and these four alphas ARE the * reference values — they were authored for a near-black ground and this one * is #08110f. The alphas differ from paper's on purpose: the same alpha does * not carry the same weight lightening a dark ground as it does darkening a * light one, which is exactly what a single hard-coded rgba would have got * wrong in one of the two themes. */ --ov:255,255,255; --fill-1:rgba(var(--ov),.04); --fill-2:rgba(var(--ov),.08); --edge-1:rgba(var(--ov),.12); --edge-2:rgba(var(--ov),.16); } /* The toggle. Only one icon is ever rendered: the one for the theme you would * be switching TO, because a control that shows its current state reads as a * status light and gets ignored. */ .theme-btn{ display:inline-grid; place-items:center; width:30px; height:30px; padding:0; background:var(--fill-2); color:var(--ink2); border:1px solid var(--edge-2); border-radius:var(--r-ctl); cursor:pointer; transition:color var(--t), border-color var(--t), background-color var(--t); } .theme-btn:hover{ color:var(--mint); border-color:var(--mint-dim); background:var(--fill-1); } .theme-btn svg{ width:15px; height:15px; grid-area:1/1; } .theme-btn .th-sun{ display:none; } :root[data-theme="dark"] .theme-btn .th-sun{ display:block; } :root[data-theme="dark"] .theme-btn .th-moon{ display:none; } *{box-sizing:border-box} /* ── THE LOCKED SHELL ─────────────────────────────────────────────────────── * The document does not scroll. Only panes do. * * Before this, the page was a 1240px document in a 900px viewport with a * sticky header riding it — which is where scroll chaining, mobile * address-bar resize jank and scroll-restoration ambiguity all come from. Now * html/body are exactly one viewport and hidden, the chrome is a fixed-height * band, and the rail and the stage each own their own scrollTop. * * dvh, not vh, and in that order: vh first as the fallback for engines without * dvh, dvh second so it wins where supported. vh alone is measured against the * LARGEST viewport, so on mobile the bottom of the shell sits behind the * address bar until it retracts — reintroducing exactly the resize jank this * change exists to remove. * * ⚠️ CONTRACT FOR OTHER FILES: window.scrollTo() and window.scrollY are now * inert app-wide. The stage's scroller is `main.stage`. Anything that used to * scroll the window must scroll that element instead. detail.js's * scrollToPanel() and nav.js's reset-to-top both still call window.scrollTo and * are no-ops until they are updated — written up in the handover, NOT patched * here, because those files belong to other agents. */ html{height:100%} body{ height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; } /* The chrome. Fixed height, so --layout-top-offset below is exact rather than a number that drifts when the trust bar wraps. */ .top,.trust,.ticker,footer{flex:none} /* The one flexible band. min-height:0 is load-bearing: without it a flex item refuses to shrink below its content and the panes inside never scroll — they just push the shell taller than the viewport it is pinned to. */ .app{flex:1 1 auto;min-height:0} body{ margin:0;color:var(--ink);font:13.5px/1.55 var(--sans); -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums; background:var(--bg); } a{color:var(--mint);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-mark)} /* ── header ─────────────────────────────────────────────── */ .top{ display:flex;justify-content:space-between;align-items:center;gap:14px; padding:12px 20px;position:sticky;z-index:var(--z-header); height:61px; /* -1px, not 0. At fractional browser zoom a sticky band pinned to 0 leaves a sub-pixel seam that the row border underneath bleeds through as a flicker while scrolling. One pixel of overlap removes it permanently. */ top:-1px; /* THEME-BLIND BUG, fixed. These two stops were the literal paper --bg (#fdfcf7) and never followed night shift, so the sticky header stayed near-white on the dark theme — and h1 inherits --ink, which is ALSO near-white there. The product's own name was rendering invisible in dark mode, and it screenshotted as an empty header rather than as an error. color-mix keeps the frosted translucency the backdrop-filter needs while taking its colour from whichever --bg is live. */ background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, transparent), color-mix(in srgb, var(--bg) 90%, transparent)); backdrop-filter:blur(14px); border-bottom:1px solid var(--edge-1); box-shadow:0 1px 0 var(--edge-1); } .brand{display:flex;align-items:center;gap:11px} .logo{ /* Was a text glyph. Now a drawn mark: the payoff line breaking out of its ring. Same tile, same gradient, same 30px — only the contents changed. */ color:var(--on-brand);width:30px;height:30px;border-radius:var(--r-ctl); display:grid;place-items:center; background:var(--brand-fill); } h1{font:700 15.5px/1.1 var(--sans);margin:0;letter-spacing:-.02em} .logo svg{width:19px;height:19px;display:block} /* ---- the CAP mark, assembling ------------------------------------------- */ /* ONE curve for the whole gesture, and it is not the control curve. Controls run --t-ease (cubic-bezier(.2,.6,.3,1)) because an affordance should answer the cursor. This is a statement, not an affordance, so it runs the reference expo-out — measured off paradigm.xyz's own transitions, where every positional move uses cubic-bezier(.16,1,.3,1): it covers most of its distance almost immediately and then settles hard, which is what reads as "machined" rather than "eased". Durations stay in the app's band (the slowest control step is 260ms; the ticker's data-arrival fade is 500ms) and the whole sequence is under the ~1.1s a first paint gets before it becomes something you wait for. */ :root{ --cm-ease:cubic-bezier(.16,1,.3,1); } /* The payoff draws through the ticks. Path length is 21.05 user units (9.3/9.3 diagonal = 13.15, plus the 7.9 flat) — measured off the geometry, not guessed, because a dasharray shorter than the path leaves a visible gap that never closes. */ .capmark .cm-pay{ stroke-dasharray:21.1; stroke-dashoffset:21.1; animation:cm-draw 640ms var(--cm-ease) 200ms forwards; } /* The ticks are the fills arriving — and they LEAVE. Held at rest they turned a 19px tile into a comb: five hairlines under a heavy stroke read as noise, not as structure, which is the opposite of the brief. So they are purely transitional. They rise, the payoff draws through them, and they fade out, leaving the resting mark as just the payoff and its strike — which is what has to survive at 16px and in one colour. The gesture keeps its meaning and loses its clutter: you see the trades add up to the shape, then the shape is what remains. Hover brings them back — the mark showing its working on demand rather than permanently. transform-box:fill-box is required. The default (view-box) puts the origin at the SVG's corner, not the tick's, and the scale throws each tick across the tile. */ .capmark .cm-tk{ opacity:0; transform:scaleY(.15); transform-box:fill-box; transform-origin:50% 100%; animation:cm-tick 1000ms var(--cm-ease) forwards; } .capmark .cm-tk:nth-child(1){animation-delay:0ms} .capmark .cm-tk:nth-child(2){animation-delay:55ms} .capmark .cm-tk:nth-child(3){animation-delay:110ms} .capmark .cm-tk:nth-child(4){animation-delay:165ms} .capmark .cm-tk:nth-child(5){animation-delay:220ms} /* The strike locks in last: it is the conclusion, not the setup. */ .capmark .cm-strike{opacity:0;animation:cm-strike 260ms var(--t-ease) 800ms forwards} @keyframes cm-draw {to{stroke-dashoffset:0}} @keyframes cm-tick{ 0% {opacity:0; transform:scaleY(.15)} 25% {opacity:.5; transform:none} 55% {opacity:.5; transform:none} 100%{opacity:0; transform:none} } @keyframes cm-strike{to{opacity:.5}} /* Hover is a TRANSITION, not a replay. Restarting a CSS animation needs a class toggle and a forced reflow in JS; a transition on the already-settled end state costs nothing and cannot get stuck half-drawn if the pointer leaves mid-run. The ticks and strike step up, the payoff does not move — the number the mark stands for should not appear to change on hover. */ .brand .logo .cm-tk, .brand .logo .cm-strike{transition:opacity var(--t)} .brand:hover .logo .cm-tk{opacity:.6;animation:none} .brand:hover .logo .cm-strike{opacity:.85} /* Reduced motion: the finished mark, immediately. Not a shorter animation — none at all, and every element already at its end state. */ @media (prefers-reduced-motion:reduce){ .capmark .cm-pay{stroke-dashoffset:0;animation:none} /* The ticks are transitional, so with no transition there is nothing for them to be: the reduced-motion mark is the RESTING mark, payoff and strike, not a frozen mid-build frame. */ .capmark .cm-tk{opacity:0;transform:none;animation:none} .capmark .cm-strike{opacity:.5;animation:none} .brand .logo .cm-tk,.brand .logo .cm-strike{transition:none} } .tag{margin:2px 0 0;font-size:11px;color:var(--ink3);letter-spacing:.01em} .status{ display:flex;align-items:center;gap:7px;font:10.5px/1 var(--mono);color:var(--ink2); padding:6px 11px;border:1px solid var(--edge-2);border-radius:var(--r-pill);background:var(--fill-2); } .dot{width:6px;height:6px;border-radius:50%;background:var(--ink3);flex:none} .dot.live{background:var(--mint);box-shadow:0 0 0 3px var(--mint-dim);position:relative} .dot.stale{background:var(--warn)} .dot.down{background:var(--bad)} /* THE LIVE PULSE. The one continuous animation in the app, and it is allowed to exist because it is the only thing on the page whose whole meaning is "this is still happening". It rides .dot.live ONLY — a stale or down feed goes still, so the motion can never claim a connection the app does not have. That rule matters more here than anywhere: this product's claim is that it shows what actually traded, and a pulse under a dead feed would be the interface lying. Cost: a pseudo-element animating transform + opacity only, which the compositor owns outright — no layout, no paint, no main-thread work per frame. Deliberately NOT the box-shadow above, which would repaint a ring every frame on a page already polling live data. Measured after shipping: no scripting cost attributable to it over a 5s idle capture. */ .dot.live::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--mint); opacity:.55; animation:dot-pulse 2.4s var(--t-ease) infinite; } @keyframes dot-pulse{ 0% {transform:scale(1); opacity:.5} 70% {transform:scale(2.6); opacity:0} 100%{transform:scale(2.6); opacity:0} } /* SECTION ENTRY. The rail swaps whole views by toggling [hidden], which was an instant cut — the densest surfaces in the app replaced themselves with no indication anything had happened, and on the wider sections it read as a page reload. This is the reference's entrance, measured off paradigm.xyz: transform + opacity, ~500ms, cubic-bezier(.16,1,.3,1). Toggling [hidden] flips display, and leaving display:none restarts a CSS animation, so this re-runs on every section change without a line of JS. 6px, not more. The move only has to say "this is new content"; a larger travel on a 1200px-tall table turns navigation into an event. Data does not animate in — only the container does, so no number ever appears to arrive that was already there. */ .view:not([hidden]){animation:view-in 460ms var(--cm-ease) both} @keyframes view-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .dot.live::after{animation:none;opacity:0} .view:not([hidden]){animation:none} } /* ── stat rail ──────────────────────────────────────────── */ /* ---- live ticker -------------------------------------------------------- Replaced the statbar. A marquee of what just traded, on every section. */ .ticker{ border-bottom:1px solid var(--line); background:linear-gradient(90deg,var(--s1),var(--bg) 22%,var(--bg) 78%,var(--s1)); overflow:hidden; position:relative; height:46px; } /* Fade the ends so items enter and leave instead of being guillotined. */ .ticker::before,.ticker::after{ content:""; position:absolute; top:0; bottom:0; width:52px; z-index:2; pointer-events:none; } .ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)} .ticker::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)} .tk-track{ display:flex; align-items:center; gap:0; height:100%; width:max-content; animation:tkroll linear infinite; } /* -50% exactly: the track is duplicated, so the second copy sits under the cursor at the instant the first ends. Any other value stutters at the wrap. */ @keyframes tkroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .ticker:hover .tk-track{animation-play-state:paused} @media (prefers-reduced-motion:reduce){ .tk-track{animation:none} .ticker{overflow-x:auto} } .tk-i{ display:inline-flex; align-items:baseline; gap:7px; flex:none; padding:0 18px; border-right:1px solid var(--line); font:11.5px/1 var(--mono); white-space:nowrap; color:var(--ink2); } .tk-age{font-style:normal;color:var(--ink3);font-size:10px;min-width:26px} .tk-a{font-weight:700;color:var(--ink);font-size:12px} .tk-act{font-style:normal;font-weight:600} .tk-act.put{color:var(--v1)} .tk-act.call{color:var(--v3)} .tk-act.sell{opacity:.85} .tk-d{font-style:normal;color:var(--ink3);font-size:10.5px} .tk-p{font-style:normal;font-weight:700;color:var(--ink)} /* Anything under five minutes old gets the pulse. That is the "something is happening" signal; older rows are just context. */ .tk-i.tk-new .tk-a{color:var(--mint)} .tk-i.tk-new{animation:tkflash 2.4s ease-out} @keyframes tkflash{from{background:var(--mint-dim)}to{background:transparent}} /* The .stat rules that sat here are GONE. The statbar they styled was replaced by the ticker, and they were left behind matching nothing — measured 0 across all five sections. They were not merely dead: `.stat` is a one-word global, and it captured an unrelated `.op-chip.stat` on the Strategies board, giving it a ::before gradient bar and a padding override that only fired under 720px. A dead rule with a common name is worse than a dead rule. */ /* The stage FILLS its grid column. It used to carry `max-width:1440px;margin:0 auto`, and auto inline margins on a grid item switch it out of stretch and into fit-content sizing — so the stage collapsed to its own max-content and centred the remainder as empty page. Measured at 1920x1080 before the fix: Strategies 912px, Venues 820px, Flow 819px, Activity 865px, all IDENTICAL at 1280 and 1440, which is the tell that viewport width was reaching nothing. That left 398-444px of dead gutter. The 1440 cap was never even reached, so it was capping a width the page could not produce. */ /* THE STAGE IS THE SCROLLER. This is the element other files must scroll instead of the window. overscroll-behavior stops a pane that has hit its end from handing the gesture to anything else — with the document locked there is nothing to hand it to, and the browser would otherwise rubber-band. */ main{padding:12px 14px 40px;width:100%;min-width:0; height:100%;overflow-y:auto;overscroll-behavior:contain; display:flex;flex-direction:column;gap:14px} /* ── panels ─────────────────────────────────────────────── */ .panel{ background:var(--card); border:0;border-radius:var(--r-card);overflow:hidden; } .hero-panel{border:0} .panel-head{ display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap; padding:10px 14px 9px;border-bottom:1px solid var(--line); } .panel-head h2{font:700 14px/1.25 var(--sans);margin:0;letter-spacing:-.01em} .panel-head .sub{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--ink3);max-width:80ch} .controls{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink2);flex-wrap:wrap} .controls label{font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink3)} .controls select{ background:var(--fill-2);color:var(--ink);border:1px solid var(--edge-2); border-radius:var(--r-ctl);padding:5px 9px;font:11.5px/1 var(--mono);cursor:pointer; } .controls select:hover{border-color:var(--mint-dim)} .check{display:flex;align-items:center;gap:5px;cursor:pointer; font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink3)} .seg{display:inline-flex;border:1px solid var(--edge-2);border-radius:var(--r-ctl);overflow:hidden;background:var(--fill-2)} .seg button{background:transparent;color:var(--ink2);border:0;padding:5px 12px; font:600 11.5px/1 inherit;cursor:pointer;transition:color var(--t),background-color var(--t)} .seg button+button{border-left:1px solid var(--line2)} .seg button:hover{color:var(--ink)} .seg button.on{ background:var(--brand-fill);color:var(--on-brand);font-weight:700; } .chart-wrap,#where-grid{padding:14px 15px 6px;overflow-x:auto} #where-grid svg,.chart-wrap svg{height:auto;width:auto;max-width:100%;overflow:visible} .legend{display:flex;align-items:center;gap:11px;padding:0 15px 11px;margin:6px 0 0; font:10px/1 var(--mono);color:var(--ink3);flex-wrap:wrap; text-transform:uppercase;letter-spacing:.06em} .lg{display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .lg i{width:11px;height:11px;border-radius:var(--r-mark);display:inline-block;flex:none} .lg i.dash{background:none;border:1px dashed var(--empty)} .lg i.hatch{background:none;border:1px solid var(--empty); background-image:repeating-linear-gradient(45deg,var(--empty) 0 1.5px,transparent 1.5px 4px)} .lg.lead{color:var(--ink2);font-weight:700} .rowsub{padding:8px 15px 13px;margin:0;font-size:12px;color:var(--ink2);max-width:104ch;line-height:1.6} .rowsub strong{color:var(--ink);font-weight:650} /* grid.js renders a venue name inside this sentence as a bare