/* GENERATED by landing/sync-ui.mjs from src/content/loupeCss.ts. Do not edit. */ /* When a LOUPE panel is mounted, strip the legacy tooltip chrome so the glass panel IS the panel (no double background/border/padding). */ .tq-tooltip.hvx-loupe-host{ padding:0 !important; background:transparent !important; border:none !important; box-shadow:none !important; overflow:visible !important; min-width:0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* Kill the legacy tooltip's "green glass" pseudo-layer — it bled a blurry pane around the edges/bottom of the LOUPE card (esp. mid height-transition). */ .tq-tooltip.hvx-loupe-host::after, .tq-tooltip.hvx-loupe-host::before{ content:none !important; display:none !important; background:none !important; } .hvx-lp{ /* Brand tokens, matching src/content/dockCss.ts. Three meanings kept apart on purpose: mint = the primary action and anything confirmed, danger = the SELL side, plus loss and destructive controls (red means "out" — the market convention, and what traders expect), flux = connection and in-progress: the connected wallet, live/pending states, chain marks, informational links. Never transactional. Flux was previously commented here as "the sell side, and only that", which is the opposite of the rule above; the token then went unused in this file entirely while sell went red. Comment and usage now agree. */ --mint:#C6F24E; --mint-deep:#9BD11F; --core:#E8FBB4; --danger:#FF6B4A; --flux:#5AD1E6; --amber:#FFC773; --frost:#F2F4F3; --muted:#8A9199; width:360px; user-select:none; font-family:'Inter',system-ui,'SF Pro Text','Segoe UI',Roboto,sans-serif; color:var(--frost); -webkit-font-smoothing:antialiased; } .hvx-lp .num{ font-family:ui-monospace,'JetBrains Mono',Menlo,monospace; font-variant-numeric:tabular-nums; } .hvx-lp .scene{ perspective:1150px; perspective-origin:50% 42%; width:360px; } /* The panel GROWS DOWNWARD on hover to open the action box. Positioning pins the top (see panel.ts position keepTop) so this growth never slides the panel out from under the cursor. No cast shadow (rendered too hard). */ .hvx-lp .loupe{ position:relative; width:100%; height:calc(var(--intelh) + var(--deckh)); transform-style:preserve-3d; transition:transform .1s ease-out, height .36s cubic-bezier(.2,.85,.3,1); } .hvx-lp .loupe.open{ height:calc(var(--intelh) + var(--deckh-open)); } /* FLIP to the review/sign back face. .flipping slows the transform transition so the turn is legible (the tilt loop uses a snappy .1s); .confirmed does the 180. */ .hvx-lp .loupe.flipping{ transition:transform .55s cubic-bezier(.45,.05,.25,1), height .36s cubic-bezier(.2,.85,.3,1); } .hvx-lp .loupe.confirmed{ transform:rotateY(180deg); } /* Final flip-away: continue the flip past edge-on while shrinking + fading, so the celebration turns and vanishes without ever flashing the front face. */ /* Dismissal RECEDES, it does not keep rotating. Turning past 180deg swings the back face away from the viewer, and its inner .review had no backface rule, so a mirrored frame of the success screen flashed on the way out. Holding 180deg and scaling down cannot show a reversed face at all. */ .hvx-lp .loupe.finishing{ transition:transform .42s cubic-bezier(.4,0,.2,1), opacity .34s ease .05s; transform:rotateY(180deg) scale(.86); opacity:0; pointer-events:none; } /* Belt and braces: nothing inside a face may render its reverse. */ .hvx-lp .review, .hvx-lp .fin{ backface-visibility:hidden; -webkit-backface-visibility:hidden; } .hvx-lp .face{ position:absolute; inset:0; border-radius:18px; backface-visibility:hidden; transform-style:preserve-3d; } /* Front face is a transparent 3D stage — the INTEL box and the ACTION deck are two separate stacked cards (the "back box" is now just the intel card). */ .hvx-lp .face.front{ overflow:visible; background:transparent; border:none; box-shadow:none; } /* HIT-TESTING ON A TILTED 3D CARD. backface-visibility hides the FRONT face while flipped but does not reliably remove its PLANE from hit-testing, and under the cursor tilt that plane can sit geometrically in front of the back face - measured as the Back to token button going dead for seconds after a cancelled swap until the 12s auto-recovery flipped the card itself. While the card shows its back, the front face must not exist to the mouse. */ .hvx-lp .loupe.confirmed .face.front{ pointer-events:none; } .hvx-lp .loupe.confirmed .face.back{ pointer-events:auto; } /* The three live reports of a result button eating clicks were never about hit-testing on rotated planes. The turn is THIS stylesheet rule; the cursor tilt is an INLINE transform written every 16ms, and inline wins - so the card silently un-turned to a few degrees while still showing the back face's markup, leaving the FRONT face pointed at the cursor to swallow the click. The tilt loop now yields the property whenever the card is turned (see the tick in loupePanel), which is why the 3D flip is back on every result screen instead of being collapsed to 2D to dodge the symptom. */ .hvx-lp .face.back{ transform:rotateY(180deg); overflow:hidden; background:linear-gradient(150deg, rgba(30,34,40,.98), rgba(11,12,14,.99)); border:1px solid rgba(245,247,246,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } /* INTEL BOX (the "back box") — extends DOWN behind the raised deck for overlap; does NOT grow on hover. No drop shadow, just an inner rim. */ /* --intelh is MEASURED after render (see sizePanel in loupePanel.ts), not guessed. Everything below it — the deck offset and both panel heights — derives from that one number, so a row appearing or disappearing moves the whole stack correctly instead of overlapping it. The fallback is the old constant, for the frame before measurement lands. */ .hvx-lp{ --intelh:240px; --deckh:74px; --deckh-open:288px; /* ONE spacing unit for the stats cluster. The four cells and the flow bar under them are one group, and they were built with three different numbers — 5px between cells, 7px above the bar, and cell padding that matched neither — so the group read as two rows that happened to be near each other. Same gap between the cells as between the cells and the bar, and the bar carries the cells' exact padding and radius so it reads as one more cell rather than a different kind of object. */ --cellgap:5px; --cellpad:6px 7px 7px; --cellr:7px; } /* The intel card runs 26px PAST where the deck begins, so the deck sits over its bottom edge and that edge is never seen — which is what makes the two read as one card with a raised panel on it rather than two cards stacked. The extra height is hidden, not content: everything lays out from the top. Radius matches the deck's 18 — 26 read soft beside the deck's crisper corner, and two different roundnesses on the same object look like an accident. */ .hvx-lp .intel{ position:absolute; left:0; right:0; top:0; height:calc(var(--intelh) + 26px); padding:16px 18px 0; transform:translateZ(0); border-radius:18px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:linear-gradient(160deg, rgba(174,184,196,.06), rgba(13,16,20,0) 42%), linear-gradient(150deg, rgba(32,36,42,.96), rgba(12,13,16,.99)); border:1px solid rgba(245,247,246,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } .hvx-lp.safe .intel{ box-shadow:inset 0 0 0 1px rgba(198,242,78,.15), inset 0 1px 0 rgba(255,255,255,.06); } .hvx-lp.danger .intel{ box-shadow:inset 0 0 0 1px rgba(255,107,74,.26), inset 0 1px 0 rgba(255,255,255,.06); } .hvx-lp .etch{ text-shadow:0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(255,255,255,.05); } .hvx-lp .ihead{ display:flex; align-items:center; gap:12px; } /* Ticker and price at the SAME size on the SAME line, name and change likewise underneath — the head is two pairs, not four type sizes. */ .hvx-lp .pricecol{ margin-left:auto; text-align:right; flex:0 0 auto; } .hvx-lp .chrome{ display:flex; align-items:center; margin-top:15px; } .hvx-lp .chrome .range{ margin-left:auto; } .hvx-lp .bezel{ width:38px; height:38px; border-radius:11px; flex:0 0 38px; overflow:hidden; background:radial-gradient(circle at 35% 30%, #2a323b, #12161a); border:1px solid rgba(245,247,246,.12); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--frost); font-size:16px; } .hvx-lp .bezel img{ width:100%; height:100%; object-fit:cover; } .hvx-lp .tk{ font-size:20px; font-weight:800; letter-spacing:-.45px; line-height:1; color:var(--frost); min-width:0; flex:1 1 auto; } /* The name and the change are ONE pair and have to sit on one line, which means the two columns must be identical in structure, not merely similar: same line-height, same margin above. They were 4px and 7px with default leading, so the columns came out 36px and 39px, centred, and every line in the head was off by a pixel and a half — close enough to look like a mistake and not close enough to look intentional. */ .hvx-lp .tk .name{ display:block; font-size:10px; line-height:1; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; } /* SCREENING SEAL — lifted out of the header row onto the card's top-RIGHT corner, mirroring .pincorner top-left. Same footprint and same plane, so the two controls read as a matched pair framing the card, and the header row is freed for the token selector. */ /* Rounded square, not a circle — the list's icons set the 28%-radius corner language and the seal was the one circle left in the product. RIGHT corner: the top-left belongs to the swap HUD's live trading updates. */ /* THE VERDICT RIDES THE AVATAR, top-left. It used to float past the card's top-right corner, where it overhung onto whatever the page was drawing underneath — on a timeline that meant landing on X's own chrome — and where it was the only thing stopping the card from being a rectangle. On the avatar it is the one mark in the panel that is ABOUT the token rather than beside it, it stays in the first read, and it stops competing with the ticker for row width. Filled rather than outlined: at 19px a bordered chip is mostly border. */ .hvx-lp .bezelwrap{ position:relative; flex:0 0 38px; } .hvx-lp .seal{ position:absolute; left:-6px; top:-6px; z-index:30; appearance:none; padding:0; cursor:pointer; width:19px; height:19px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--ink,#0b0c0e); background:var(--mint); border:2px solid #12161c; transition:transform .12s ease; } .hvx-lp .seal svg{ width:10px; height:10px; display:block; } /* FILLED, not outlined. The states used to recolour the glyph and the border of a dark chip, which works at 34px and does not at 19px — a bordered chip that small is mostly border. The badge is now a solid patch of the verdict's colour with the glyph knocked out of it, which is legible at any size and reads at a glance without being read. */ .hvx-lp .seal:hover{ transform:scale(1.08); } .hvx-lp.danger .seal{ background:var(--danger); color:#2A0E06; } .hvx-lp.warn .seal{ background:var(--amber); color:#2A1C06; } /* Unscreened: grey, deliberately quiet — "we don't know" must never share a colour family with "checked and clean". The query glyph carries the meaning; the colour only has to avoid claiming anything. */ .hvx-lp.unscreened .seal{ background:#39414a; color:#D5DBE1; } /* ---- Tokenized equities ------------------------------------------------- Crypto is mint; equities are flux (cyan). The split is carried by a class on the panel root so a reused panel cannot keep the previous token's chrome. The market strip is the whole reason this feels like a brokerage rather than a coin app: a share of Apple has a market that opens and closes, and while it is shut nothing arbitrages the on-chain price back to the real one. It sits directly above the price it qualifies. */ /* The intel card is a FIXED 400px, so this strip cannot simply be extra height — the first version pushed MCAP/LIQ/VOL out under the swap deck. It costs ~22px, and .isstock .chart gives exactly that back below. Change one and the stats vanish again; they are a pair. */ .hvx-lp .mktbar{ display:flex; align-items:baseline; gap:8px; margin:9px 0 -5px; font-size:11.5px; letter-spacing:.01em; color:var(--muted); cursor:default; } /* Session label leads, countdown sits on the far right. Both rules were lost with the status dot they happened to sit beside — the label went flat grey and the countdown slid up against it. The countdown is pushed, not spaced, so the strip lines up with the stats row beneath it whatever the text says. */ .hvx-lp .mktbar .lbl{ font-weight:650; color:var(--frost); } /* Shut is the common state, so it stays legible — dimmed to muted, it read as disabled chrome rather than as the fact it is. */ .hvx-lp .mktbar.shut .lbl{ color:#C3CBD2; } .hvx-lp .mktbar .cd{ margin-left:auto; opacity:.85; font-size:11px; } /* The ticker wears the asset class. An equity gets a hairline plate around the symbol — the visual grammar of a quote board, and impossible to confuse with the bare mint ticker a memecoin gets. */ .hvx-lp .loupe.isstock .tksym{ color:#9BE4F2; border:1px solid rgba(90,209,230,.34); border-radius:5px; padding:1px 6px 2px; margin-right:1px; } /* The logo is a company mark, not a coin: square it off so it does not read as another circular token avatar. */ .hvx-lp .loupe.isstock .bezel{ border-radius:8px; } .hvx-lp .loupe.isstock .bezel img{ border-radius:7px; } /* Sparkline and price accents follow the class through. */ .hvx-lp .loupe.isstock .price{ color:#EAF7FA; } /* Pays for the market strip above. The sparkline is the most compressible thing on the card — an equity's headline numbers are the price and the session, not the squiggle. */ .hvx-lp .loupe.isstock .chart{ height:22px; } /* ---- Colour carries asset class AND action ------------------------------- green buy a token blue buy a stock red sell anything Selling is red regardless of what you are selling, so every equity rule here is guarded — otherwise blue wins on a sell and the one unambiguous signal in the panel (red means money leaving) is lost. THE GUARD GOES ON .hvx-lp, NOT ON .loupe. the selling class is toggled on the ROOT (loupePanel.ts: rootEl.classList.toggle("selling", …)). The first version wrote .loupe.isstock:not(.selling), which asks whether the LOUPE has a class it can never have — so the guard always passed, and at (0,4,0) it outranked .hvx-lp.selling .swapbtn at (0,3,0). HOVER TO SELL rendered blue. Caught in the harness, not by reading. The .selling rules live earlier in this file and already use --danger, so nothing about the sell path changes. This is purely the buy half. */ .hvx-lp:not(.selling) .loupe.isstock .swapbtn{ color:#9BE4F2; border-color:rgba(90,209,230,.55); background:rgba(90,209,230,.08); } .hvx-lp:not(.selling) .loupe.isstock .swapbtn:hover{ border-color:rgba(90,209,230,.75); } /* Equity tiles take the cyan accent on hover, matching their button. */ .hvx-lp:not(.selling) .loupe.isstock .tile:hover{ border-color:rgba(90,209,230,.55); } /* Approve keeps amber everywhere. It is a DIFFERENT question — "let the router move this token" — and dressing it as a buy would hide that a second signature is coming. */ .hvx-lp:not(.selling) .loupe.isstock .swapbtn.approve{ color:var(--amber); border-color:rgba(255,199,115,.55); background:rgba(255,199,115,.08); } /* The seal, when it is stating identity rather than a screening verdict. Cyan, never the mint/amber/red of the risk states — a verdict palette on an identity mark invites reading it as "passed", which is not what it says. */ /* Solid, not a tint. Every other seal state is a VERDICT and earns its translucency by sitting lightly on the card; this one states identity, and identity should look settled. */ .hvx-lp .seal.equity{ color:#0A1519; border-color:#5AD1E6; background:#5AD1E6; } .hvx-lp .seal.equity svg{ color:#0A1519; } .hvx-lp .seal.equity:hover{ background:#7BDCEC; border-color:#7BDCEC; box-shadow:0 8px 20px rgba(0,0,0,.5), 0 0 16px -4px rgba(90,209,230,.65); } /* THE SANS FACE, not the mono one. The price sits on the ticker's line and the change sits on the name's, and a monospaced number beside a typeset word reads as a different kind of thing — a readout stuck to a heading rather than the other half of the line. Tabular figures are kept, which is the only thing the mono face was really earning. */ .hvx-lp .price{ font-family:'Inter',system-ui,'SF Pro Text','Segoe UI',Roboto,sans-serif; font-size:20px; font-weight:800; color:var(--mint); line-height:1; white-space:nowrap; letter-spacing:-.45px; font-variant-numeric:tabular-nums; } .hvx-lp .price sub{ font-size:.56em; font-weight:800; vertical-align:-.12em; margin:0 .5px; } .hvx-lp .chg{ font-family:'Inter',system-ui,'SF Pro Text','Segoe UI',Roboto,sans-serif; font-size:10px; line-height:1; font-weight:600; letter-spacing:.11em; white-space:nowrap; margin-top:6px; font-variant-numeric:tabular-nums; } .hvx-lp .chg.up{ color:var(--mint);} .hvx-lp .chg.dn{ color:var(--danger);} /* Same in reverse: the last chip's ink lands on the price's right edge. */ .hvx-lp .range{ margin-left:auto; display:flex; gap:9px; margin-right:-4px; } /* Unboxed too, and for the same reason. The selected range is carried by colour alone — it is the only one of these that has a state worth showing. */ .hvx-lp .range button{ font:800 10.5px/1 ui-monospace,monospace; color:var(--muted); background:transparent; border:0; border-radius:7px; height:24px; min-width:24px; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:color .15s ease; } .hvx-lp .range button:hover{ color:var(--frost); } .hvx-lp .range button.on{ color:var(--mint); } /* One direction, one colour family: when the selected range is DOWN the price and the active range chip follow the chart into the danger palette — green price over a red chart read as two opinions about one number. */ .hvx-lp.pricedown .price{ color:var(--danger); } .hvx-lp.pricedown .range button.on{ color:#FFA98F; } .hvx-lp .chart{ position:relative; z-index:0; height:50px; margin:12px -18px 0; pointer-events:none; } /* The plot's fill is allowed to run past the chart's own box so the tint carries down into the card. Without overflow:visible the svg clips to its viewBox and the gradient stops dead at the foot of the plot. */ .hvx-lp .chart svg{ overflow:visible; } /* ...and everything below it stays on top of that tint, so the numbers are never read through a wash of colour. */ .hvx-lp .statsRow, .hvx-lp .flowBar{ position:relative; z-index:1; } .hvx-lp .chart svg{ width:100%; height:100%; display:block; opacity:0; transform:translateY(4px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1); } .hvx-lp .chart svg.in{ opacity:1; transform:none; } .hvx-lp .chart [data-el="line"]{ transition:stroke .3s ease; } .hvx-lp .chart [data-el="area"]{ transition:opacity .3s ease; } /* Stats own the whole row now (links moved up beside the ticker): equal columns, 3 or 4 of them depending on what we can honestly show — the grid makes the rhythm predictable either way. */ /* Stats as minimal cells rather than four numbers floating in space. The boxes are barely there — a hairline and a hint of fill — but they give the row a shape, so it reads as a set of facts instead of leftover text. And the brand face, not the mono one: mono is used nowhere else in the panel and it made the most-read row look like a debug dump. Tabular figures are kept, because that is the only thing mono was actually earning here. */ .hvx-lp .statsRow{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--cellgap); padding:11px 0 0; min-width:0; } .hvx-lp .s{ min-width:0; padding:var(--cellpad); border-radius:var(--cellr); background:rgba(255,255,255,.022); box-shadow:inset 0 0 0 1px rgba(255,255,255,.045); } .hvx-lp .s .l{ font-size:8px; letter-spacing:.11em; text-transform:uppercase; color:#B6BDC5; white-space:nowrap; } /* 12px, not 12.5. At four columns each cell has about 61px of usable width and "$265.93M" needed 63 — so a real large-cap market cap ellipsised to "$265.9…" in the one row people read first. Caught by rendering it rather than by reasoning about it. */ .hvx-lp .s .v{ font-size:12px; font-weight:650; letter-spacing:-.015em; color:var(--frost); font-variant-numeric:tabular-nums; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Title line: ticker + chain mark left, links pinned RIGHT with a tight, even gap. The ticker truncates; the icons never wrap or move — which is what makes long tickers safe. Icons are the services' own marks in their own colours (dex/pump images, white X, brand Telegram/Discord, 🌐) — no chip boxes; our green boxes read as our buttons, not their links. */ /* Offscreen ruler for fitStats. Must carry no width constraint of its own — the entire point is to learn what the string WANTS. */ .hvx-lp .statruler{ position:absolute; left:-9999px; top:0; white-space:nowrap; visibility:hidden; pointer-events:none; } .hvx-lp .tkline{ display:flex; align-items:center; min-width:0; } .hvx-lp .tksym{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } /* Age, beside the ticker. NOT in the stats row: that grid is tuned for four columns and a fifth drops each cell to ~48px, which ellipsises a real large-cap market cap — the exact bug the 12px note below records. It reads better here anyway, because age qualifies which token this IS rather than how it is trading. Zero-grow, zero-shrink, so a long ticker eats its own width and never this. Empty collapses, so an unknown age leaves no gap. */ .hvx-lp .tkage{ flex:0 0 auto; margin-left:8px; font-size:9.5px; font-weight:650; letter-spacing:.06em; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; } .hvx-lp .tkage:empty{ display:none; } /* Pulled back by the chip's own side padding so the FIRST GLYPH lines up with the avatar's left edge rather than the chip's. Every mark centres itself in a box wider than it is, so without this the row starts a few pixels inboard of everything above it — which reads as a misalignment precisely because everything else in the card shares one left edge. */ .hvx-lp .linkrow{ display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; margin-left:-4px; } .hvx-lp .linkrow .chartlink{ margin-left:0; } /* Sized to the range chips deliberately: both are small controls that are not the point, and building them from one set of numbers is what makes the row read as a row rather than as two unrelated clusters. */ /* These are BUTTONS that happen to be anchors, so they get a colour of their own and keep it. Without one they inherit the UA's :link blue and :visited purple — and because the marks are drawn in currentColor, the icons themselves came out blue, then turned purple once you had clicked them. A button does not change colour because you used it once. */ /* UNBOXED. Six chips and three more beside them was a row of nine little buttons competing with the card they sit on, for controls nobody came here to press. The hit area stays — it is the box that goes, not the target. */ .hvx-lp .lnk, .hvx-lp .lnk:link, .hvx-lp .lnk:visited, .hvx-lp .lnk:active{ height:24px; min-width:24px; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:7px; color:#98A2AC; text-decoration:none; line-height:1; cursor:pointer; flex:0 0 auto; transition:color .15s ease; } /* ONE box, one size, no per-mark arithmetic. The previous pass cropped every viewBox to its own measured ink and scaled each mark to match. It was too clever and it broke things: getBBox reports GEOMETRY and ignores stroke width, so the globe's outline got clipped at the extremes and grew spikes, and the rotated pill measured on its diagonal and came out small and fat. Every mark is drawn to fill a plain 24 box instead, and they are all rendered at the same size. Boring, and correct. */ .hvx-lp .lnk svg{ width:16px; height:16px; display:block; } .hvx-lp .lnk .owl{ display:block; width:13.7px; height:16px; background:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .hvx-lp .lnk:hover{ color:var(--frost); } .hvx-lp .stud.copied{ color:var(--core); } /* pump.fun link sits beside the chart link, in pump's own green so it's recognisable at a glance. */ /* The capsule carries pump's own fills, so there is no currentColor to set. */ .hvx-lp .pumplink:hover{ filter:drop-shadow(0 0 6px rgba(74,222,128,.7)); } /* Still on the bonding curve = the early window. Make it unmistakable. */ .hvx-lp .pumplink.oncurve{ filter:drop-shadow(0 0 5px rgba(74,222,128,.75)); animation:hvxPumpPulse 1.9s ease-in-out infinite; } @keyframes hvxPumpPulse{ 0%,100%{ opacity:.72; } 50%{ opacity:1; } } @media (prefers-reduced-motion: reduce){ .hvx-lp .pumplink.oncurve{ animation:none; } } /* Dedicated pin control — a circular toggle floating on the panel's top-left corner, on its own plane above the card. Grey when unpinned, mint when pinned. */ .hvx-lp .pincorner{ position:absolute; top:-11px; left:-11px; z-index:30; appearance:none; cursor:pointer; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#aeb9b4; background:linear-gradient(180deg,#20252b,#151a1f); border:1px solid rgba(245,247,246,.16); box-shadow:0 8px 20px rgba(0,0,0,.5); transition:color .15s ease, border-color .15s ease, background .15s ease, transform .12s ease; } .hvx-lp .pincorner svg{ width:16px; height:16px; } .hvx-lp .pincorner:hover{ color:var(--frost); border-color:var(--mint-deep); transform:translateY(-1px); } .hvx-lp .pincorner.on{ color:var(--ink,#0b0c0e); background:linear-gradient(180deg,#DDF98F,var(--mint)); border-color:var(--mint); } .hvx-lp .pincorner.on svg{ fill:currentColor; } /* MODE TOGGLE reuses the pin control's slot and plane. Pinning died with the the rail (holdings are derived from the wallet, so there is nothing to pin), and this corner was already the one place with a floating control that costs the fixed-height card nothing — a toggle in the deck would have pushed the loupe past its 400/478 heights and dragged the .hasrisk variants with it. Widened to a pill for a text label. */ /* THE SPLIT — two buttons where a floating toggle used to be. Direction is the button, so there is no mode to be in and nothing hanging above the card onto the page. Each half lights in its own colour on hover and the drawer below opens in that direction. When there is nothing to sell the buy half spans the row rather than sitting beside a dead control. */ .hvx-lp .split{ display:grid; grid-template-columns:1fr 1fr; gap:9px; } .hvx-lp .split[hidden]{ display:none; } .hvx-lp .half{ position:relative; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; text-align:center; white-space:nowrap; cursor:pointer; font-family:'Inter',system-ui,'SF Pro Text','Segoe UI',Roboto,sans-serif; font-size:11.5px; font-weight:800; letter-spacing:.1em; color:var(--muted); border:1px solid rgba(245,247,246,.14); background:linear-gradient(150deg,#141a1f,#0c0f13); transition:color .14s ease, border-color .14s ease, background .14s ease; } /* AT REST both halves already wear their own colour, so the two directions are visible as a pair before you touch either one. Hover adds the text and the fill on top — the reveal, not the introduction. */ .hvx-lp .half.buy{ border-color:rgba(198,242,78,.38); } .hvx-lp .half.sell{ border-color:rgba(255,107,74,.38); } .hvx-lp .half[hidden]{ display:none; } .hvx-lp .half.solo{ grid-column:1 / -1; } .hvx-lp .half.buy:hover, .hvx-lp .half.buy.on{ color:var(--mint); border-color:rgba(198,242,78,.75); background:rgba(198,242,78,.10); } .hvx-lp .half.sell:hover, .hvx-lp .half.sell.on{ color:var(--danger); border-color:rgba(255,107,74,.75); background:rgba(255,107,74,.10); } /* DECK — the raised ACTION card; overlaps the intel "back box" above. No drop shadow (a subtle mint rim gives the raised read). */ .hvx-lp .deck{ position:absolute; left:0; right:0; top:calc(var(--intelh) - 7px); transform:translateZ(54px); transform-style:preserve-3d; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:linear-gradient(150deg, rgba(28,32,38,.98), rgba(14,16,20,.99)); border:1px solid rgba(245,247,246,.14); border-radius:18px; padding:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } /* PAY FROM — one unified control: label, then a bordered box with two rows (wallet / token · balance), each a full-width selector. Clean, never wraps. */ .hvx-lp .payfrom{ margin-bottom:0; position:relative; } /* SELL summary, stacked ON the paybox rather than replacing it. inset:0 means it inherits the paybox's exact height, so switching direction cannot shift the deck by a pixel — and the buy-side pay-with wiring keeps running untouched underneath, which is the point: no shared state to desync. A sell has nothing to choose anyway (it always cashes out to native, never bridges), so every row here is read-only. */ /* Neutral, like the buy face's paybox. The red wash on these four rows made sense when the sell face had little else marking it; with the deck now split and the sell half already red, tinting the detail rows as well is the same thing said three times. */ .hvx-lp .sellbox{ position:absolute; inset:0; z-index:5; border:1px solid rgba(245,247,246,.12); border-radius:11px; background:#0e1114; display:flex; flex-direction:column; justify-content:center; } .hvx-lp .sellbox[hidden]{ display:none !important; } .hvx-lp .sellbox .seg:first-child{ border-top-left-radius:11px; border-top-right-radius:11px; } .hvx-lp .sellbox .seg:last-child{ border-bottom-left-radius:11px; border-bottom-right-radius:11px; } .hvx-lp .sellbox .seg+.seg{ border-top:1px solid rgba(245,247,246,.08); } .hvx-lp .sellbox .main{ color:var(--frost); } /* SELL accents. Red means "out" — the market convention and this file's own documented rule for --danger, the same token the risk bar uses. */ .hvx-lp.selling .swapbtn{ color:var(--danger); border-color:rgba(255,107,74,.55); background:rgba(255,107,74,.08); } /* Awaiting an ERC-20 allowance. Amber, not red: nothing is wrong and nothing is being sold — this is a required step, and dressing it as danger would read as a failure. Clickable, unlike the hover-to-charge states around it. */ .hvx-lp .swapbtn.approve{ color:var(--amber); border-color:rgba(255,199,115,.55); background:rgba(255,199,115,.08); } /* View only — the chain can be shown but not traded (no router, or paused from config). Deliberately NOT the danger or amber treatment: nothing has gone wrong for this user, and an alarm colour on a token they were merely reading about is a lie about severity. Muted, inert, and it does not invite a hover: no pointer, no hover transition, and the tiles never reveal behind it. */ .hvx-lp .swapbtn.viewonly, .hvx-lp.selling .swapbtn.viewonly{ color:var(--muted); border-color:var(--hairline); background:rgba(255,255,255,.02); cursor:default; letter-spacing:.06em; } .hvx-lp .swapbtn.viewonly:hover{ border-color:var(--hairline); background:rgba(255,255,255,.02); } .hvx-lp .swapbtn.viewonly small{ opacity:.72; } .hvx-lp.selling .swapbtn.approve{ color:var(--amber); border-color:rgba(255,199,115,.55); } /* The slices are ABSENT until the allowance exists, not dimmed. Showing four greyed percentages under an approval prompt asks the user to read two states at once and offers them a row of controls that cannot fire; removing them leaves exactly one thing to do. They come back the moment approval lands. */ .hvx-lp.needsapprove .amounts{ display:none; } /* Approve is a TAP now, like every other money action in the panel. The conic ring that used to fill on this button went with the dwell. */ .hvx-lp .swapbtn.approve.fired{ animation:hvxpop .42s cubic-bezier(.2,1.3,.3,1); } .hvx-lp.selling .tile:hover{ border-color:rgba(255,107,74,.55); } .hvx-lp .payfrom .l{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 2px 6px; } /* NO overflow:hidden — it would clip the wallet/token/slippage dropdown menus. Rows round their own outer corners so the box still reads clean. */ .hvx-lp .paybox{ position:relative; border:1px solid rgba(245,247,246,.12); border-radius:11px; background:#0e1114; } .hvx-lp .paybox .seg:first-child{ border-top-left-radius:11px; border-top-right-radius:11px; } .hvx-lp .paybox .seg:last-child{ border-bottom-left-radius:11px; border-bottom-right-radius:11px; } .hvx-lp .seg{ position:relative; box-sizing:border-box; display:flex; align-items:center; gap:8px; width:100%; font-size:12.5px; color:var(--frost); padding:9px 11px; cursor:default; white-space:nowrap; } .hvx-lp .seg.pick{ cursor:pointer; } /* menu is width-matched to the paybox row and never spills past it */ .hvx-lp .hvx-lp-menu{ position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:40; box-sizing:border-box; max-width:100%; background:#141a1f; border:1px solid rgba(245,247,246,.14); border-radius:11px; padding:4px; box-shadow:0 16px 34px rgba(0,0,0,.62); overflow:hidden; } .hvx-lp .hvx-lp-mi{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 9px; border-radius:7px; font-size:11.5px; color:var(--frost); cursor:pointer; min-width:0; } .hvx-lp .hvx-lp-mi>span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hvx-lp .hvx-lp-mi:hover{ background:rgba(198,242,78,.08); } .hvx-lp .hvx-lp-mi .mb{ color:var(--muted); font-family:ui-monospace,'JetBrains Mono',Menlo,monospace; flex:0 0 auto; } .hvx-lp .seg+.seg{ border-top:1px solid rgba(245,247,246,.08); } .hvx-lp .seg.pick:hover{ background:rgba(198,242,78,.05); } /* SLIPPAGE is the longest label — give every label the same gutter so all four values start on one vertical line instead of stepping around it. */ .hvx-lp .seg .k{ font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); flex:0 0 64px; } .hvx-lp .seg .main{ font-weight:600; color:var(--frost); } /* The amount and its fiat value are ONE tier, not two. The row read as three sizes stepping down — 12.5px ticker, 12.5px amount, 11px value — which is a lot of hierarchy for "how much of this do I have". Both details now sit at 11px and separate by COLOUR instead, leaving one size change in the row: the thing being sold, then everything about it. */ .hvx-lp .seg .bal{ color:var(--muted); font-weight:500; font-size:11px; } .hvx-lp .seg .cv{ color:#6b7680; font-size:11px; } /* Truncated address beside the wallet name, on both faces. The name alone is ambiguous the moment you hold two Phantoms — and which one is about to be charged is exactly the thing you check before committing. */ .hvx-lp .seg .waddr{ color:#6b7680; font-size:11px; font-variant-numeric:tabular-nums; } /* Position P&L, on the row that already carries the position's value. It sits on the Selling seg rather than in a row of its own because .sellbox is inset:0 over the paybox — a fifth seg would overflow a box whose height is fixed. Two states only: a percentage, or the chip is not rendered. There is deliberately no "partial" variant — see paintPositionPnl. (No backticks in this file's comments — they close the template literal and the failure is a bare TS1005 miles from the cause.) */ .hvx-lp .seg .pnl{ font-size:11px; font-weight:750; font-family:ui-monospace,'JetBrains Mono',Menlo,monospace; font-variant-numeric:tabular-nums; padding:2px 6px; border-radius:6px; cursor:help; } .hvx-lp .seg .pnl.up{ color:var(--mint); background:rgba(198,242,78,.12); } .hvx-lp .seg .pnl.down{ color:var(--danger); background:rgba(255,107,74,.13); } .hvx-lp .seg .pnl[hidden]{ display:none !important; } /* Wallet reads plain white like every other row value — the cyan "connection colour" made it look like a link/state rather than a fact (Devon, 08-07). */ .hvx-lp [data-el="segw"] .main{ color:var(--frost); } /* Source-chain mark beside the native symbol in the Selling row. */ .hvx-lp .seg .sellchain{ display:inline-flex; align-items:center; flex:0 0 auto; margin-left:-2px; } .hvx-lp .seg .sellchain svg{ width:15px; height:15px; display:block; } /* Funding-source dropdown rows: symbol · chain glyph · optional "bridges". */ .hvx-lp .hvx-lp-mi .fopt{ display:inline-flex; align-items:center; gap:7px; min-width:0; } .hvx-lp .hvx-lp-mi .fopt .fchain{ display:inline-flex; align-items:center; flex:0 0 auto; } .hvx-lp .hvx-lp-mi .fopt .fchain svg{ width:15px; height:15px; display:block; } .hvx-lp .hvx-lp-mi .fopt .fbridge{ font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border:1px solid rgba(245,247,246,.14); border-radius:5px; padding:1px 5px; flex:0 0 auto; } .hvx-lp .seg .car{ margin-left:auto; width:13px; height:13px; color:var(--muted); flex:0 0 13px; transition:transform .2s ease; } .hvx-lp .seg.pick:hover .car{ color:var(--mint); } /* Caret points RIGHT when closed; on open it rotates 90° clockwise to point down, and unwinds counter-clockwise back to right on close (transition). */ .hvx-lp .seg.open .car{ transform:rotate(90deg); color:var(--mint); } .hvx-lp .swapzone{ position:relative; } .hvx-lp .swapbtn{ text-align:center; font-size:14px; font-weight:800; letter-spacing:.16em; color:var(--mint); padding:12px 15px; border:1px solid var(--mint-deep); border-radius:13px; background:rgba(198,242,78,.07); cursor:pointer; position:relative; z-index:3; /* Centre a single line, and hold one height so the box doesn't jump between "HOVER TO SWAP" and the two-line connect/error states. */ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:58px; box-sizing:border-box; } /* Still used by CONNECT WALLET / CONNECTING… / error states, which carry real sub-text; only the redundant "hover to reveal amounts" line was dropped. */ .hvx-lp .swapbtn small{ display:block; font-size:9px; letter-spacing:.1em; color:var(--muted); margin-top:5px; font-weight:500; } .hvx-lp .swapbtn.connect{ color:var(--core); } /* Amounts live INSIDE the action box and the box GROWS DOWNWARD to reveal them (max-height) — fluent, contained, and the box overflows the fixed-height loupe so the wrapper never resizes (no reposition, no vanish-on-hover). */ .hvx-lp .swapzone{ position:relative; } /* THE DRAWER. Closed, the panel is the token and one button; open, it is the whole swap. Four rows of selling/buying/slippage/wallet were on screen at all times, which is a third of the panel's height spent on detail nobody reads until they are already committing — and it left no room for anything useful at the top. */ .hvx-lp .drawer{ max-height:0; opacity:0; overflow:hidden; pointer-events:none; transition:max-height .34s cubic-bezier(.2,.85,.3,1), opacity .22s ease; } .hvx-lp .loupe.open .drawer{ max-height:340px; opacity:1; pointer-events:auto; margin-top:12px; } .hvx-lp .amounts{ max-height:0; opacity:0; overflow:hidden; transform:translateY(-6px); transition:max-height .36s cubic-bezier(.2,.85,.3,1), opacity .26s ease, transform .36s cubic-bezier(.2,.85,.3,1); pointer-events:none; } .hvx-lp .loupe.open .amounts{ max-height:150px; opacity:1; transform:none; margin-top:10px; pointer-events:auto; } .hvx-lp .tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; } .hvx-lp .tile{ position:relative; height:62px; border-radius:13px; background:linear-gradient(150deg,#141a1f,#0c0f13); border:1px solid rgba(245,247,246,.12); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 5px 10px rgba(0,0,0,.45); transition:transform .12s; } .hvx-lp .tile:hover{ border-color:var(--mint-deep); } .hvx-lp .tile .cap{ position:relative; z-index:2; font-size:16px; font-weight:800; color:var(--frost); transition:transform .15s cubic-bezier(.2,.85,.3,1); } /* THE REVEAL. At rest a tile is one number, centred. On hover the number lifts three pixels and what it buys fades in underneath, inside the height the tile already had. The estimate used to be two permanent lines on every tile, which is twelve numbers on screen to answer a question you only have about the one you are pointing at. Three pixels, not seven: seven read as the number jumping out of the tile rather than making room. */ .hvx-lp .tile:hover .cap{ transform:translateY(-3px); } .hvx-lp .tile .est{ position:absolute; left:3px; right:3px; bottom:7px; z-index:2; text-align:center; font-size:10.5px; font-weight:700; color:var(--muted); font-family:ui-monospace,'JetBrains Mono',Menlo,monospace; font-variant-numeric:tabular-nums; opacity:0; transform:translateY(3px); transition:opacity .15s, transform .15s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hvx-lp .tile:hover .est{ opacity:1; transform:none; } /* THE CUSTOM TILE. Dashed while empty so it reads as a slot rather than a button, solid once it holds a number and behaves like any other tile. It does NOT lift on hover: there is no estimate underneath to make room for, so the motion would be decoration on the one tile that should read as a field. */ .hvx-lp .tile.custom{ background:linear-gradient(150deg,#12171c,#0a0d10); border-style:dashed; border-color:rgba(245,247,246,.22); } /* Border-COLOUR too, not just the style. .hvx-lp .tile.custom and .hvx-lp .tile:hover both weigh (0,3,0), and the custom rule comes later, so the dashed grey was winning the hover on the buy face — while the sell face looked right purely because .hvx-lp.selling .tile:hover carries an extra class and outranked it. */ .hvx-lp .tile.custom:hover{ border-style:solid; border-color:var(--mint-deep); } .hvx-lp.selling .tile.custom:hover{ border-color:rgba(255,107,74,.55); } .hvx-lp .tile.custom:hover .cap{ transform:none; } .hvx-lp .tile.custom .cap{ color:var(--muted); } .hvx-lp .tile .chint{ position:relative; z-index:2; font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:3px; } .hvx-lp .tile.custom.typing{ border-style:solid; border-color:var(--mint-deep); } .hvx-lp.selling .tile.custom.typing{ border-color:rgba(255,107,74,.6); } /* The field. The dollar sign is a sibling span, not part of the value, so the caret can never land before it and backspace can never eat it. The pair is centred as one unit and the input grows with its content. */ .hvx-lp .tile .cwrap{ position:relative; z-index:2; display:flex; align-items:baseline; justify-content:center; max-width:100%; } .hvx-lp .tile .cpre{ font-size:16px; font-weight:800; color:var(--frost); } .hvx-lp .tile .cin{ min-width:1ch; max-width:100%; box-sizing:content-box; padding:0; background:transparent; border:0; outline:0; text-align:left; color:var(--frost); font-family:'Inter',system-ui,'SF Pro Text','Segoe UI',Roboto,sans-serif; font-size:16px; font-weight:800; -webkit-font-smoothing:antialiased; } .hvx-lp .tile.fired{ animation:hvxpop .42s cubic-bezier(.2,1.3,.3,1); } /* More than the wallet can cover. The tile stays READABLE — you should still be able to read what \$250 would have bought — but it stops looking pressable: no pointer, no hover border, and the charge gesture is refused upstream. The cursor is the honest tell; opacity alone reads as "loading". */ /* Sell-face gas warning. Amber, not red: nothing is wrong yet and nothing is blocked — this is the one thing the wallet's own error will not tell you clearly, said before the wallet opens. */ .hvx-lp .gasnote{ margin:8px 10px 0; padding:8px 11px; border-radius:10px; font-size:11.5px; font-weight:650; line-height:1.35; color:var(--amber); background:rgba(255,199,115,.10); border:1px solid rgba(255,199,115,.30); } .hvx-lp .tile.short{ cursor:not-allowed; opacity:.4; } .hvx-lp .tile.short:hover{ border-color:rgba(245,247,246,.12); } .hvx-lp .tile.short .cap{ color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; } @keyframes hvxpop{ 0%{ transform:scale(1) } 40%{ transform:scale(.93) } 100%{ transform:scale(1) } } /* BACK — review & sign */ .hvx-lp .review{ position:absolute; inset:0; padding:18px; display:flex; flex-direction:column; } /* Abort/back control, top-right of the review face (same footprint as the spinner). */ .hvx-lp .rabort{ position:absolute; top:15px; right:15px; z-index:5; width:26px; height:26px; display:grid; place-items:center; appearance:none; border-radius:50%; border:1px solid rgba(245,247,246,.16); background:rgba(255,255,255,.05); color:var(--muted); cursor:pointer; transition:color .15s ease, background .15s ease, border-color .15s ease; } .hvx-lp .rabort svg{ width:13px; height:13px; } .hvx-lp .rabort:hover{ color:var(--frost); background:rgba(255,255,255,.1); border-color:rgba(245,247,246,.3); } .hvx-lp .rh{ display:flex; align-items:center; gap:10px; } .hvx-lp .spin{ width:26px; height:26px; border-radius:50%; border:2px solid rgba(198,242,78,.25); border-top-color:var(--mint); animation:hvxspin 1s linear infinite; } @keyframes hvxspin{ to{ transform:rotate(360deg) } } .hvx-lp .rh .ok{ width:26px;height:26px;border-radius:50%;border:2px solid var(--mint);display:flex;align-items:center;justify-content:center;color:var(--mint);font-size:15px; } .hvx-lp .rh .bad{ width:26px;height:26px;border-radius:50%;border:2px solid var(--danger);display:flex;align-items:center;justify-content:center;color:var(--danger);font-size:14px; } .hvx-lp .rt .t{ font-size:15px; font-weight:800; color:var(--frost); } .hvx-lp .rt .st{ font-size:11px; color:var(--muted); margin-top:2px; } /* Two separate boxes (no floating arrow between them). */ .hvx-lp .legs2{ margin:16px 0 4px; display:flex; flex-direction:column; gap:8px; } .hvx-lp .legbox{ display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid rgba(245,247,246,.1); border-radius:13px; background:rgba(255,255,255,.02); } .hvx-lp .legbox .lbl{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .hvx-lp .legbox .amt{ font-size:18px; font-weight:800; color:var(--frost); margin-top:1px; } .hvx-lp .legbox .amt.recv{ color:var(--mint); } .hvx-lp .legbox .fiat{ margin-left:auto; font-size:12px; color:var(--muted); } .hvx-lp .meta{ margin-top:11px; display:grid; grid-template-columns:1fr auto; gap:5px 14px; font-size:11px; } .hvx-lp .meta .k{ color:var(--muted); } .hvx-lp .meta .val{ color:#dfe6ec; text-align:right; } /* Price-impact severity on the review row. */ .hvx-lp .meta .val.impact-warn{ color:var(--amber); font-weight:700; } .hvx-lp .meta .val.impact-danger{ color:var(--danger); font-weight:800; } /* "Swap anyway" — the danger action on the high-impact gate. A red-tinted sibling of the neutral .fail-back, so the safe Cancel stays dominant. */ .hvx-lp .fail-back.go{ color:var(--danger); background:rgba(255,107,74,.1); border-color:rgba(255,107,74,.4); } .hvx-lp .fail-back.go:hover{ background:rgba(255,107,74,.16); border-color:rgba(255,107,74,.55); } /* HP reward earned by completing the trade — fills the space above the verify note. */ .hvx-lp .hpearn{ margin-top:12px; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px; border:1px solid rgba(198,242,78,.28); border-radius:11px; background:linear-gradient(120deg, rgba(198,242,78,.12), rgba(198,242,78,.04)); } .hvx-lp .hpearn .hpk{ font-size:11px; font-weight:600; color:var(--mint-text, #E8FBB4); letter-spacing:.02em; } .hvx-lp .hpearn .hpv{ font-size:14px; font-weight:800; color:var(--mint); font-variant-numeric:tabular-nums; } /* The campaign multiplier riding the HP line — mint-filled like the board's badge, because it is the same fact stated in the same voice. */ .hvx-lp .hpearn .hpboosttag{ display:inline-flex; align-items:center; line-height:1; font-size:8.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 6px 2.5px; border-radius:5px; color:#0B0E11; background:var(--mint); vertical-align:2px; margin-left:6px; } /* The live-campaign strip above the buy control. Announces the multiplier where the decision happens; buys only, and it says so. */ .hvx-lp .hpboostline{ display:flex; align-items:center; justify-content:center; line-height:1; font-size:9px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:#0B0E11; background:var(--mint); border-radius:8px; padding:6px 10px 5.5px; margin:8px 0 -2px; } .hvx-lp .verify{ margin-top:auto; font-size:10.5px; color:var(--amber); text-align:center; line-height:1.5; border-top:1px dashed rgba(255,199,115,.3); padding-top:10px; } /* Bridging (cross-chain in transit) — a calm amber state, NOT the red fail. */ .hvx-lp .fin.bridging .fin-check{ color:#2a1c05; background:radial-gradient(circle at 35% 30%, #FFD79A, var(--amber)); box-shadow:0 8px 28px rgba(255,199,115,.5), inset 0 1px 0 rgba(255,255,255,.55); } .hvx-lp .fin.bridging .fin-ring{ border-color:var(--amber); } .hvx-lp .fin.bridging .bridge-spin svg{ width:26px; height:26px; animation:hvxBridgeSpin 1.1s linear infinite; } .hvx-lp .fin.bridging .fin-title{ color:var(--frost); } .hvx-lp .fin.bridging .fin-sub{ color:var(--amber); } .hvx-lp .fin.bridging .fail-reason{ border-color:rgba(255,199,115,.3); background:rgba(255,199,115,.07); } .hvx-lp .fin.bridging .fail-reason-lbl{ color:rgba(255,199,115,.95); } .hvx-lp .fin.bridging .fail-reason-msg{ color:#ffe2b0; } @keyframes hvxBridgeSpin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .hvx-lp .fin.bridging .bridge-spin svg{ animation:none; } } /* ===== FINISH — the feel-good success moment (shown, then flips away & closes) ===== */ /* Content-sized: the card is grown to fit .fin (see fitBack), never the other way round. NO min-height:100% and NO vertical centering — those let a too-short card squish the children (that's what turned the badge circle into an ellipse). */ .hvx-lp .fin{ box-sizing:border-box; display:flex; flex-direction:column; align-items:center; text-align:center; } /* Nothing in a finish/review card may ever shrink — heights stay honest so the fit measures true content, and the circle stays a circle. */ .hvx-lp .fin > *, .hvx-lp .review > *{ flex-shrink:0; } /* Fail content sits a little further in so the red reason box doesn't kiss the edge. */ .hvx-lp .fin.fail, .hvx-lp .fin.bridging{ padding:0 8px; } .hvx-lp .fin-badge{ position:relative; flex:0 0 auto; width:66px; height:66px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; } .hvx-lp .fin-check{ position:relative; z-index:2; flex:0 0 auto; width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#0a0c0e; background:radial-gradient(circle at 35% 30%, var(--core), var(--mint)); box-shadow:0 8px 28px rgba(198,242,78,.5), inset 0 1px 0 rgba(255,255,255,.55); animation:finpop .5s cubic-bezier(.2,1.4,.3,1) both; } .hvx-lp .fin-check svg{ width:32px; height:32px; } .hvx-lp .fin-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--mint); animation:finring 1.15s ease-out .12s both; } .hvx-lp .fin-ring.d2{ animation-delay:.36s; } .hvx-lp .fin-title{ font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--frost); animation:finrise .26s ease .04s both; } .hvx-lp .fin-sub{ font-size:11.5px; color:var(--muted); margin-top:3px; animation:finrise .26s ease .08s both; } /* Equity success lines. The badge above stays green — green is SUCCEEDED here, not "bought a token" — so the asset class speaks in words instead. */ .hvx-lp .fin-recv-note{ margin-top:3px; font-size:11px; color:var(--muted); letter-spacing:.01em; } .hvx-lp .fin-mkt{ margin-top:9px; font-size:11px; font-weight:650; color:#9BE4F2; animation:finrise .26s ease .12s both; } .hvx-lp .fin-mkt.shut{ color:var(--muted); font-weight:600; } .hvx-lp .fin-recv{ margin-top:14px; padding:12px 20px; border:1px solid rgba(245,247,246,.1); border-radius:13px; background:rgba(255,255,255,.02); animation:finrise .26s ease .12s both; min-width:210px; } .hvx-lp .fin-recv-lbl{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .hvx-lp .fin-recv-amt{ font-size:20px; font-weight:800; color:var(--mint); margin-top:3px; } /* Receipt box holds only the result (amount + its fiat), centered. The reward lives on its own pill below, so neither crowds the other. */ .hvx-lp .fin-recv-fiat{ font-size:12px; color:var(--muted); margin-top:4px; } .hvx-lp .fin-hp-pill{ display:inline-flex; align-items:center; margin-top:13px; font-size:12px; font-weight:800; letter-spacing:.01em; color:#04120a; background:linear-gradient(180deg,var(--core),var(--mint)); border-radius:9px; padding:4px 12px; box-shadow:0 0 20px rgba(198,242,78,.4), inset 0 1px 0 rgba(255,255,255,.5); animation:finpop .55s cubic-bezier(.2,1.4,.3,1) .42s both; } /* Share charge — the same conic-gradient + mask-composite ring the buy tiles use, swept around the whole card instead of a tile. Driven from JS via --c so it reads as "building your card", not a spinner. */ .hvx-lp .share-ring{ position:absolute; inset:0; border-radius:26px; pointer-events:none; z-index:6; opacity:0; padding:2px; transition:opacity .2s ease; background:conic-gradient(from 0deg, var(--mint) calc(var(--c,0)*1%), transparent 0); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; } .hvx-lp .face.back.sharing .share-ring{ opacity:1; } /* Button goes dark and inert for the duration so it can't be double-fired. */ .hvx-lp .fin-share:disabled{ cursor:default; transform:none; box-shadow:none; background:rgba(198,242,78,.10); color:var(--mint-text,#E8FBB4); border:1px solid rgba(198,242,78,.22); } .hvx-lp .fin-share:disabled svg{ opacity:.55; } /* Success actions. Every action button across the finish/fail/bridging cards shares one shape: full-width, same padding/radius/weight. Only the fill differs (Share is the green primary; the rest are ghost), so the set reads as a clean stack instead of pills floating at different widths. */ .hvx-lp .fin-actions{ margin-top:15px; width:100%; box-sizing:border-box; display:flex; flex-direction:column; align-items:stretch; gap:9px; animation:finpop .55s cubic-bezier(.2,1.4,.3,1) .55s both; } /* Kill the standalone top-margin when a fail-back lives inside the stack — the gap already spaces it (that margin is only for the lone button on the fail card). */ .hvx-lp .fin-actions .fail-back{ margin-top:0; } .hvx-lp .fin-share{ appearance:none; box-sizing:border-box; width:100%; display:flex; align-items:center; justify-content:center; gap:9px; font:inherit; font-size:14px; font-weight:800; letter-spacing:.01em; color:#0b0c0e; background:linear-gradient(180deg,var(--core),var(--mint)); border:none; border-radius:13px; padding:13px; cursor:pointer; box-shadow:0 6px 18px rgba(198,242,78,.22); transition:transform .15s cubic-bezier(.2,.9,.3,1), box-shadow .15s ease; } .hvx-lp .fin-share svg{ width:15px; height:15px; } .hvx-lp .fin-share:hover{ transform:translateY(-1px); box-shadow:0 9px 24px rgba(198,242,78,.3); } .hvx-lp .fin-share:active{ transform:translateY(0); } /* Secondary to Share: a quiet ghost button. EVM tokens don't auto-appear in MetaMask, so this is the one-tap "make my new balance visible" affordance. */ .hvx-lp .fin-watch{ appearance:none; box-sizing:border-box; width:100%; display:flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:14px; font-weight:800; letter-spacing:.01em; color:var(--frost); background:rgba(255,255,255,.05); border:1px solid rgba(245,247,246,.18); border-radius:13px; padding:13px; cursor:pointer; transition:color .15s ease, border-color .15s ease, background .15s ease; } .hvx-lp .fin-watch svg{ width:15px; height:15px; opacity:.85; } .hvx-lp .fin-watch:hover{ color:var(--text); border-color:rgba(245,247,246,.28); background:rgba(255,255,255,.07); } .hvx-lp .fin-watch:disabled{ cursor:default; } .hvx-lp .fin-watch.done{ color:var(--mint-text,#E8FBB4); border-color:rgba(198,242,78,.4); background:rgba(198,242,78,.08); } .hvx-lp .fin-watch.done svg{ opacity:1; color:var(--mint); } .hvx-lp .fin-close{ position:absolute; top:14px; right:14px; appearance:none; background:rgba(255,255,255,.05); border:1px solid rgba(245,247,246,.14); border-radius:9px; width:28px; height:28px; padding:0; cursor:pointer; color:var(--muted); display:flex; align-items:center; justify-content:center; transition:color .15s ease, border-color .15s ease, background .15s ease; } .hvx-lp .fin-close svg{ width:13px; height:13px; } .hvx-lp .fin-pin{ position:absolute; top:14px; left:14px; appearance:none; background:rgba(255,255,255,.05); border:1px solid rgba(245,247,246,.16); color:var(--muted); width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; z-index:5; transition:color .15s ease, border-color .15s ease, background .15s ease; } .hvx-lp .fin-pin svg{ width:13px; height:13px; } .hvx-lp .fin-pin:hover{ color:var(--frost); border-color:var(--mint-deep); } .hvx-lp .fin-pin.on{ color:var(--ink,#0b0c0e); background:var(--mint); border-color:var(--mint); } .hvx-lp .fin-pin.on svg{ fill:currentColor; } .hvx-lp .fin-close:hover{ color:var(--frost); border-color:rgba(245,247,246,.3); background:rgba(255,255,255,.09); } .hvx-lp .fin-meta{ margin-top:11px; display:flex; align-items:center; gap:8px; font-size:10.5px; color:#6b7680; animation:finrise .26s ease .24s both; } .hvx-lp .fin-meta .dot{ opacity:.55; } @keyframes finpop{ 0%{ transform:scale(0); opacity:0 } 60%{ transform:scale(1.12) } 100%{ transform:scale(1); opacity:1 } } @keyframes finring{ 0%{ transform:scale(.55); opacity:.55 } 100%{ transform:scale(2.3); opacity:0 } } /* THE WHOLE CHOREOGRAPHY LANDS BEFORE THE FLIP DOES. It used to run to 0.74s — a 0.24s delay plus a 0.5s rise on the back button — while the card itself turns face-on at 0.55s. So after a cancel or a failure the panel sat there fully readable with an invisible button on it, and the one control you want at that moment was the last thing to arrive. Every element now settles inside the flip: the card finishes turning and the card is finished. Shorter travel too — 6px, not 9 — because a fast rise over a long distance reads as a lurch. */ @keyframes finrise{ 0%{ transform:translateY(6px); opacity:0 } 100%{ transform:translateY(0); opacity:1 } } /* ===== FAIL — red counterpart of the finish (glow/pulse X + reason + big back) ===== */ .hvx-lp .fin.fail .fin-check{ color:#2A0E06; background:radial-gradient(circle at 35% 30%, #FFA98F, var(--danger)); box-shadow:0 8px 28px rgba(255,107,74,.5), inset 0 1px 0 rgba(255,255,255,.4); animation:finpop .5s cubic-bezier(.2,1.4,.3,1) both, failpulse 1.8s ease-in-out .55s infinite; } .hvx-lp .fin.fail .fin-check svg{ width:28px; height:28px; } .hvx-lp .fin.fail .fin-ring{ border-color:var(--danger); } .hvx-lp .fail-reason{ margin-top:16px; width:100%; padding:11px 14px; border:1px solid rgba(255,107,74,.3); border-radius:12px; background:rgba(255,107,74,.06); text-align:left; animation:finrise .26s ease .12s both; } .hvx-lp .fail-reason-lbl{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,150,120,.9); } .hvx-lp .fail-reason-msg{ font-size:12.5px; font-weight:600; color:#FFC9BA; margin-top:4px; line-height:1.42; white-space:normal; word-break:break-word; max-height:120px; overflow-y:auto; scrollbar-width:thin; } /* CANCELLED — a deliberate decline, not a fault. Same layout as the failure finish so nothing jumps, but drained of alarm: neutral grey instead of danger red, and no pulsing. Red is a claim that something went wrong, and nothing did — the user changed their mind, which is exactly what the confirmation step is for. */ .hvx-lp .fin.fail.cancelled .fin-check{ color:#0B0D0C; background:radial-gradient(circle at 35% 30%, #E8ECEA, #9AA3A0); box-shadow:0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4); animation:finpop .5s cubic-bezier(.2,1.4,.3,1) both; } .hvx-lp .fin.fail.cancelled .fin-ring{ border-color:rgba(245,247,246,.5); } .hvx-lp .fin.fail.cancelled .fail-reason{ border-color:rgba(245,247,246,.18); background:rgba(245,247,246,.05); } .hvx-lp .fin.fail.cancelled .fail-reason-lbl{ color:rgba(245,247,246,.6); } .hvx-lp .fin.fail.cancelled .fail-reason-msg{ color:var(--frost); } .hvx-lp .fail-back{ margin-top:16px; width:100%; box-sizing:border-box; appearance:none; font:inherit; font-size:14px; font-weight:800; color:var(--frost); background:rgba(255,255,255,.05); border:1px solid rgba(245,247,246,.18); border-radius:13px; padding:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; animation:finrise .26s ease .16s both; transition:background .15s ease, border-color .15s ease, transform .1s ease; } .hvx-lp .fail-back:hover{ background:rgba(255,255,255,.09); border-color:rgba(245,247,246,.32); } .hvx-lp .fail-back:active{ transform:scale(.985); } .hvx-lp .fail-back-arrow{ font-size:16px; line-height:1; } @keyframes failpulse{ 0%,100%{ box-shadow:0 8px 28px rgba(255,107,74,.5), 0 0 0 0 rgba(255,107,74,.4), inset 0 1px 0 rgba(255,255,255,.4) } 50%{ box-shadow:0 8px 30px rgba(255,107,74,.62), 0 0 0 13px rgba(255,107,74,0), inset 0 1px 0 rgba(255,255,255,.4) } } /* ===== NOTICE (no-credible-token / service error) ===== */ .hvx-lp .hvx-note{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:26px 22px; border-radius:22px; background:linear-gradient(150deg, rgba(30,34,40,.98), rgba(11,12,14,.99)); border:1px solid rgba(245,247,246,.1); box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); } .hvx-lp .hvx-note-ico{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; margin-bottom:8px; color:var(--muted); background:rgba(255,255,255,.04); border:1px solid rgba(245,247,246,.1); } .hvx-lp .hvx-note-ico svg{ width:22px; height:22px; } .hvx-lp .hvx-note.warn .hvx-note-ico{ color:var(--amber); background:rgba(255,199,115,.08); border-color:rgba(255,199,115,.28); } .hvx-lp .hvx-note-title{ font-size:17px; font-weight:800; color:var(--frost); letter-spacing:-.01em; } .hvx-lp .hvx-note-body{ font-size:12px; color:var(--muted); line-height:1.45; max-width:250px; } /* ===== TOKEN PICKER (disambiguation) ===== */ .hvx-lp .hvx-pick{ position:relative; margin-top:0; padding:16px; border-radius:22px; background:linear-gradient(150deg, rgba(30,34,40,.98), rgba(11,12,14,.99)); border:1px solid rgba(245,247,246,.1); box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); } .hvx-lp .hvx-pick-head{ margin:2px 2px 12px; } .hvx-lp .hvx-pick-title{ font-size:15px; font-weight:800; color:var(--frost); letter-spacing:-.01em; } .hvx-lp .hvx-pick-sub{ font-size:11px; color:var(--muted); margin-top:2px; } .hvx-lp .hvx-pick-list{ display:flex; flex-direction:column; gap:7px; } .hvx-lp .hvx-pick-row{ display:flex; align-items:center; gap:11px; width:100%; box-sizing:border-box; text-align:left; padding:9px 11px; border-radius:13px; border:1px solid rgba(245,247,246,.1); background:rgba(255,255,255,.02); cursor:pointer; font:inherit; color:var(--frost); transition:border-color .15s ease, background .15s ease; } .hvx-lp .hvx-pick-row:hover{ border-color:var(--mint-deep); background:rgba(198,242,78,.05); } .hvx-lp .hvx-pick-logo{ flex:0 0 34px; width:34px; height:34px; border-radius:10px; overflow:hidden; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(245,247,246,.1); font-size:13px; font-weight:800; color:var(--muted); } .hvx-lp .hvx-pick-logo img{ width:100%; height:100%; object-fit:cover; } .hvx-lp .hvx-pick-main{ flex:1; min-width:0; } .hvx-lp .hvx-pick-sym{ display:flex; align-items:center; gap:7px; font-size:14px; font-weight:750; color:var(--frost); } .hvx-lp .hvx-pick-chain{ display:inline-flex; align-items:center; flex:0 0 auto; } .hvx-lp .hvx-pick-chain svg{ width:15px; height:15px; display:block; } .hvx-lp .hvx-pick-tag.warn{ color:var(--danger); background:rgba(255,107,74,.12); border-color:rgba(255,107,74,.32); } /* EQUITY on a picker row. Cyan, matching the timeline mark, the panel plate and the holdings pip — one motif, learned once, meaning the same thing in four places. This tag is load-bearing: on a $AAPL collision it is the ONLY visible difference between Apple Inc and a token that has also named itself Apple. */ .hvx-lp .hvx-pick-tag.equity{ color:#9BE4F2; background:rgba(90,209,230,.13); border-color:rgba(90,209,230,.34); } .hvx-lp .hvx-pick-row.equity .hvx-pick-logo{ border-radius:6px; } .hvx-lp .hvx-pick-tag{ font-size:8px; font-weight:800; letter-spacing:.08em; color:var(--mint-deep); background:rgba(198,242,78,.12); border:1px solid rgba(198,242,78,.3); border-radius:5px; padding:1px 4px; } .hvx-lp .hvx-pick-stats{ font-size:10.5px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* The reason line. Same slot, same colour, the panel's own face instead of the mono one — it is a sentence now, not a row of figures. */ .hvx-lp .hvx-pick-stats.why{ font-family:'Inter',system-ui,'SF Pro Text','Segoe UI',Roboto,sans-serif; font-size:10.5px; letter-spacing:.01em; } .hvx-lp .hvx-pick-car{ flex:0 0 auto; color:var(--muted); } .hvx-lp .hvx-pick-car svg{ width:15px; height:15px; } .hvx-lp .hvx-pick-row:hover .hvx-pick-car{ color:var(--mint); } /* Heat: where the real action is. HOT = surging right now, TRENDING = sustained run, NEW = under 24h old. Never applied to a token the trust model flagged. */ /* THE FLOW BAR — shown only when something is actually happening. Left to right: state icon, state, tags, then the numbers. Everything that CLASSIFIES the token groups on the left; everything that MEASURES it sits on the right, so the two are read as two thoughts rather than one long string. */ .hvx-lp .flowBar{ display:flex; align-items:center; gap:6px; margin:var(--cellgap) 0 0; padding:var(--cellpad); border-radius:var(--cellr); min-width:0; background:rgba(255,255,255,.022); box-shadow:inset 0 0 0 1px rgba(255,255,255,.045); } .hvx-lp .flowBar .fico{ flex:none; display:block; width:11px; height:11px; color:var(--muted); } .hvx-lp .flowBar .fico svg{ display:block; width:100%; height:100%; } .hvx-lp .flowBar .fstage{ flex:none; font-size:9px; font-weight:800; letter-spacing:.11em; line-height:1; color:var(--muted); } .hvx-lp .flowBar .ftags{ flex:0 1 auto; display:inline-flex; gap:3px; min-width:0; overflow:hidden; } .hvx-lp .flowBar .ftag{ font-style:normal; font-size:8px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:0 4px; border-radius:3px; line-height:13px; white-space:nowrap; border:1px solid rgba(138,145,153,.3); color:var(--muted); } .hvx-lp .flowBar .ftag.t-new{ color:var(--amber); border-color:rgba(255,199,115,.4); } .hvx-lp .flowBar .ftag.t-heating{ color:var(--amber); border-color:rgba(255,199,115,.4); } .hvx-lp .flowBar .ftag.t-micro{ color:var(--amber); border-color:rgba(255,199,115,.4); } .hvx-lp .flowBar .ftag.t-steady{ color:var(--flux); border-color:rgba(90,209,230,.4); } .hvx-lp .flowBar .ftag.t-thin, .hvx-lp .flowBar .ftag.t-churn, .hvx-lp .flowBar .ftag.t-selling, .hvx-lp .flowBar .ftag.t-one-sided, .hvx-lp .flowBar .ftag.t-flagged, .hvx-lp .flowBar .ftag.t-impostor, .hvx-lp .flowBar .ftag.t-instant, .hvx-lp .flowBar .ftag.t-dumped, .hvx-lp .flowBar .ftag.t-unlocked{ color:var(--danger); border-color:rgba(255,107,74,.42); } /* The numbers, right-aligned. A filled bar for buy pressure instead of a percentage buried between middle dots — the separators were doing the work a layout should do, and a bar reads at a glance where a sentence has to be parsed. */ .hvx-lp .flowBar .fnums{ flex:none; margin-left:auto; display:inline-flex; align-items:center; gap:6px; } .hvx-lp .flowBar .fpressure{ position:relative; display:block; width:26px; height:3px; border-radius:2px; background:rgba(255,107,74,.4); overflow:hidden; } .hvx-lp .flowBar .fpressure i{ position:absolute; inset:0 auto 0 0; width:var(--p); background:currentColor; border-radius:2px; } .hvx-lp .flowBar .fpct{ font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--frost); letter-spacing:-.01em; } .hvx-lp .flowBar .frate{ font-size:9.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--muted); } /* A control, not a caption — it steps 5m to 1h to 6h to 24h, so it has to invite the click the way the chart's own range buttons do. */ .hvx-lp .flowBar .fwin{ flex:none; margin-left:2px; font:inherit; font-size:8px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); cursor:pointer; background:rgba(255,255,255,.05); border:1px solid rgba(138,145,153,.26); border-radius:4px; padding:2px 5px; line-height:1; min-width:26px; transition:color .15s, border-color .15s, background .15s; } .hvx-lp .flowBar .fwin:hover{ color:var(--frost); border-color:rgba(198,242,78,.45); background:rgba(198,242,78,.1); } .hvx-lp .flowBar .fnone{ font-size:9.5px; font-weight:600; color:var(--muted); } /* Quiet is the default state of the bar: grey, empty meter, and it still carries the numbers. The bar was removed entirely for quiet in one revision and that was wrong — "51% buys over 4 trades" is real information about a token nobody is buying, and the empty gauge shows the headroom above. */ .hvx-lp .flowBar[data-stage="quiet"] .fico, .hvx-lp .flowBar[data-stage="quiet"] .fstage, .hvx-lp .flowBar[data-stage="quiet"] .fpressure{ color:var(--muted); } .hvx-lp .flowBar[data-stage="quiet"] .fpressure{ background:rgba(138,145,153,.25); } /* STATE IS A PROGRESSION, NOT A CHANGE OF SUBJECT. Sending was red, and red means BAD everywhere else in software — on a token that is running hard that is the opposite of the message. The ladder is one colour getting more of itself: dim mint, full mint, then mint with a lit core and a glow. Nothing switches hue, so the steps read as more of the same thing rather than as three different warnings. */ .hvx-lp .flowBar[data-stage="warm"]{ background:rgba(198,242,78,.045); box-shadow:inset 0 0 0 1px rgba(198,242,78,.14); } .hvx-lp .flowBar[data-stage="warm"] .fico, .hvx-lp .flowBar[data-stage="warm"] .fstage, .hvx-lp .flowBar[data-stage="warm"] .fpressure{ color:var(--mint-deep); } .hvx-lp .flowBar[data-stage="running"]{ background:rgba(198,242,78,.08); box-shadow:inset 0 0 0 1px rgba(198,242,78,.26); } .hvx-lp .flowBar[data-stage="running"] .fico, .hvx-lp .flowBar[data-stage="running"] .fstage, .hvx-lp .flowBar[data-stage="running"] .fpressure{ color:var(--mint); } .hvx-lp .flowBar[data-stage="running"] .fico{ filter:drop-shadow(0 0 5px rgba(198,242,78,.5)); } /* The top step goes to the pale core rather than to another hue — the same move the price uses when it is emphatic. */ .hvx-lp .flowBar[data-stage="sending"]{ background:rgba(198,242,78,.13); box-shadow:inset 0 0 0 1px rgba(198,242,78,.42); } .hvx-lp .flowBar[data-stage="sending"] .fico, .hvx-lp .flowBar[data-stage="sending"] .fstage, .hvx-lp .flowBar[data-stage="sending"] .fpressure{ color:var(--core); } .hvx-lp .flowBar[data-stage="sending"] .fico{ filter:drop-shadow(0 0 7px rgba(198,242,78,.95)); } .hvx-lp .flowBar[data-stage="sending"] .fpct{ color:var(--core); } .hvx-lp .hvx-heat{ font-size:8px; font-weight:800; letter-spacing:.08em; border-radius:5px; padding:1px 5px; } .hvx-lp .hvx-heat.hot{ color:#FFB067; background:rgba(255,140,60,.14); border:1px solid rgba(255,140,60,.4); } .hvx-lp .hvx-heat.trending{ color:var(--mint); background:rgba(198,242,78,.12); border:1px solid rgba(198,242,78,.34); } .hvx-lp .hvx-heat.new{ color:#8FC7FF; background:rgba(110,170,255,.12); border:1px solid rgba(110,170,255,.34); } /* Back-to-list chip: a rounded rect on the top-right corner, LEFT of the seal — the two verdict/navigation boxes share one row and one corner language (it used to float inside the header band, which read as clutter under the seal). Anchored to .face.front, not .ihead: .intel is overflow:hidden and would clip a corner-hung element. */ /* THE ANCHOR — the way into the token list, and back out of it. It lives on the WRAPPER, not inside .hvx-lp, and that is what makes it work: the card spins by animating .hvx-lp itself and that animation carries opacity 1 → 0 → 1, so anything inside it both rotates and fades. The control used to do exactly that — it turned over with the card and went transparent halfway through. Out here it is untouched: it stays put at one opacity while the thing it controls turns over behind it, which is also what makes it read as an anchor rather than as part of either face. Centred above the card, in the slot the BUY/SELL segment vacated. A word, no glyph: "OTHER TOKENS" needs no decoding, and it deliberately carries no count — a ticker can be shared by hundreds of tokens, so any number would be either a lie or a list of garbage. */ /* NOTHING is set on the host here. It is position:fixed (tooltipCss) and that is how the panel is placed at the cursor — .tq-tooltip.hvx-loupe-host is two classes against one, so a position declared here silently outranks it and the panel falls out of the viewport into document flow, i.e. into the corner. The anchor does not need it: a fixed element is already a containing block for absolutely positioned children, and overflow:visible is already set on the host at the top of this file. */ .hvx-anchor{ position:absolute; top:-34px; left:50%; transform:translateX(-50%); z-index:40; height:28px; display:inline-flex; align-items:center; justify-content:center; appearance:none; font-family:'Inter',system-ui,'SF Pro Text','Segoe UI',Roboto,sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap; color:var(--muted); background:rgba(13,16,20,.96); border:1px solid rgba(245,247,246,.18); border-radius:14px; padding:0 14px; cursor:pointer; opacity:1; box-shadow:0 8px 20px rgba(0,0,0,.5); transition:color .15s ease, border-color .15s ease, background .15s ease; } .hvx-anchor:hover{ color:var(--frost); border-color:rgba(245,247,246,.34); } /* The back state is the SAME control, so it looks the same: grey and fully opaque. Tinting it mint replaced the opaque base with a 12% wash, so the panel showed straight through it — the exit went pale and green at the exact moment it needed to be the most solid thing on screen. */ /* Author display rules override the UA's [hidden]{display:none} — without this the chip rendered permanently, showing a bare icon and an empty count. */ .hvx-lp [hidden]{ display:none !important; } /* Corner boxes hang on the LEFT now (seal + chip), mostly outside the card — the header only needs its ordinary breathing room on the right. */ /* Card-turn between the candidate list and a token page (both directions) */ @keyframes hvxSpinOut{ from{ transform:perspective(1100px) rotateY(0deg); opacity:1 } to{ transform:perspective(1100px) rotateY(-82deg); opacity:0 } } @keyframes hvxSpinIn{ from{ transform:perspective(1100px) rotateY(82deg); opacity:0 } to{ transform:perspective(1100px) rotateY(0deg); opacity:1 } } .hvx-lp.hvx-spinout{ animation:hvxSpinOut .17s cubic-bezier(.4,0,.9,.5) forwards; transform-origin:center; } .hvx-lp.hvx-spinin{ animation:hvxSpinIn .26s cubic-bezier(.15,.7,.3,1) both; transform-origin:center; } /* ===== IN-PANEL TOOLTIP (native title= cannot survive the cursor tilt) ===== */ .hvx-lp .hvxtip{ position:absolute; z-index:40; max-width:250px; padding:8px 10px; border-radius:9px; background:rgba(10,12,14,.98); border:1px solid rgba(245,247,246,.16); box-shadow:0 10px 26px rgba(0,0,0,.6); color:#dfe6ec; font-size:11px; line-height:1.45; font-weight:500; pointer-events:none; letter-spacing:.005em; } .hvx-lp .hvxtip-l + .hvxtip-l{ margin-top:3px; } /* ===== CHAIN BADGE — sits next to the TICKER so a long name can't push it off ===== */ .hvx-lp .chainbadge{ display:inline-flex; vertical-align:middle; margin-left:7px; } /* Receiving row's chain mark — same no-crop rule and same symbol-then-mark order as .chainbadge and the buy face's Selling row. */ .hvx-lp .sellbox .rchain{ display:inline-flex; vertical-align:-2px; margin:0 7px; } .hvx-lp .sellbox .rchain svg{ width:13px; height:13px; display:block; } /* These are real brand marks, not disc avatars — no crop ring, or a non-circular logo (Solana's bars, Ethereum's diamond) gets clipped. */ .hvx-lp .chainbadge svg{ width:16px; height:16px; display:block; } /* ===== SOURCE MARKS — Dexscreener + pump.fun, beside the chain badge ===== These carry their owners' real marks rather than generic line icons, so they are recognised rather than read. Both sit in a matched 18px well so a raster badge and a vector capsule line up on the same baseline at the same weight. */ /* Dex and pump are .lnk chips like every other mark now, so this rule no longer sizes them — it used to force an 18px well with overflow:hidden, which meant they alone missed the chip and the owl's mask never matched. What is left is only what is specific to these two. */ .hvx-lp .chartlink{ cursor:pointer; } /* ===== RISK BAR — scam-grade findings get a full-width callout, not a corner dot ===== */ .hvx-lp .riskbar{ display:flex; align-items:center; gap:8px; margin:10px -18px -2px; padding:8px 18px; font-size:11px; font-weight:650; line-height:1.35; letter-spacing:.01em; color:#FFD9DD; background:linear-gradient(90deg, rgba(255,107,74,.22), rgba(255,107,74,.10)); border-top:1px solid rgba(255,107,74,.32); border-bottom:1px solid rgba(255,107,74,.32); animation:hvxRiskPulse 2.4s ease-in-out infinite; } .hvx-lp .riskbar svg{ width:15px; height:15px; flex:0 0 15px; color:#FF8A93; } @keyframes hvxRiskPulse{ 0%,100%{ background:linear-gradient(90deg, rgba(255,107,74,.22), rgba(255,107,74,.10)); } 50%{ background:linear-gradient(90deg, rgba(255,107,74,.34), rgba(255,107,74,.16)); } } /* The seal is now a button (it carries the "why" tooltip). */ /* Seal keeps its original look; it is a button only so it can carry the "why" tooltip and take keyboard focus. */ .hvx-lp .seal{ appearance:none; padding:0; cursor:pointer; } .hvx-lp .seal:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; } /* A visible risk bar needs vertical room — grow the card rather than clipping the stats row it sits above. Keeps deck/intel/loupe in lockstep. */ /* The hasrisk variants used to add --riskh to four separate constants. The measurement already includes the risk bar, so they are gone — one number instead of four that had to be kept in step by hand. */ .hvx-lp.hasrisk{ --riskh:38px; } /* ===== BUY row: contract address inline + copy ===== */ .hvx-lp .seg .bal.ca{ font-family:ui-monospace,'JetBrains Mono',Menlo,monospace; font-size:10.5px; letter-spacing:.01em; } /* Copy sits where the dropdown carets sit, in the same muted color — it is the same class of affordance, so it should not read as a call to action. */ .hvx-lp .cabtn{ margin-left:auto; flex:0 0 auto; appearance:none; background:none; border:none; padding:0; width:16px; height:16px; cursor:pointer; color:var(--muted); display:flex; align-items:center; justify-content:center; transition:color .15s ease; position:relative; } .hvx-lp .cabtn svg{ width:13px; height:13px; } .hvx-lp .cabtn:hover{ color:var(--frost); } .hvx-lp .cabtn.copied{ color:var(--mint); } /* Confirmation: the row's address swaps to "Copied" briefly. */ .hvx-lp .seg .bal.ca.copied{ color:var(--mint); } .hvx-lp .seg .bal.ca.copyfail{ color:var(--danger); } /* The override that used to live here set gap:16px and font-size:12.5px under a comment claiming to TIGHTEN the row. It did neither: 16px is three times the gap it overrode, and 12.5px undid the 12px that the truncation note above explicitly calls for — which is why a market cap kept ellipsising after that was supposedly fixed. Both values now come from the cluster tokens alone. */ /* ===== WALLET PICKER (intent-based connect: choose Phantom / MetaMask / …) ===== */ .hvx-lp .wpick{ position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; padding:14px; border-radius:20px; background:linear-gradient(150deg, rgba(24,28,33,.99), rgba(11,12,14,.995)); border:1px solid rgba(245,247,246,.14); box-shadow:0 14px 34px rgba(0,0,0,.55); } .hvx-lp .wpick-h{ font-size:12px; font-weight:750; color:var(--frost); margin:0 2px 10px; } .hvx-lp .wpick-h span{ color:var(--muted); font-weight:600; } .hvx-lp .wpick-list{ display:flex; flex-direction:column; gap:7px; flex:1; overflow-y:auto; } .hvx-lp .wpick-opt{ display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; padding:10px 11px; border-radius:12px; border:1px solid rgba(245,247,246,.12); background:rgba(255,255,255,.03); cursor:pointer; font:inherit; color:var(--frost); transition:border-color .15s ease, background .15s ease; } .hvx-lp .wpick-opt:hover{ border-color:var(--mint-deep); background:rgba(198,242,78,.06); } .hvx-lp .wpick-glyph{ flex:0 0 28px; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(245,247,246,.1); font-size:13px; font-weight:800; color:var(--muted); } /* An replaces the initial square when the wallet announced a valid icon; both carry .wpick-glyph so the row geometry is identical either way. */ .hvx-lp img.wpick-glyph{ object-fit:contain; padding:3px; } .hvx-lp .wpick-glyph svg{ width:15px; height:15px; display:block; color:#8A9199; } .hvx-lp .wpick-name{ flex:1; min-width:0; text-align:left; font-size:13px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hvx-lp .wpick-go{ font-size:11px; font-weight:700; color:var(--mint); } .hvx-lp .wpick-cancel{ margin-top:9px; appearance:none; font:inherit; font-size:11.5px; font-weight:600; color:var(--muted); background:transparent; border:none; cursor:pointer; padding:6px; } .hvx-lp .wpick-cancel:hover{ color:var(--frost); } /* ===== TIP PANEL (LOUPE) — recipient intel + hover-to-tip + flip finish ===== */ .hvx-lp .tipav{ display:grid; place-items:center; background:rgba(198,242,78,.1); border:1px solid rgba(198,242,78,.22); } .hvx-lp .tipav svg{ width:19px; height:19px; color:var(--mint); } .hvx-lp .tk .named{ } /* named recipients render normally in .tk */ /* The tip badge is class="seal tipseal", so it inherits the token panel's seal rules. Those now pin the seal to the card's top-right corner, which would rip this text badge out of the header row — it has to opt back into normal flow explicitly. Keep this reset in step with any change to .seal above. */ .hvx-lp .tipseal{ position:static; top:auto; right:auto; z-index:auto; box-shadow:none; margin-left:auto; width:auto; height:auto; border-radius:999px; padding:3px 9px; flex:0 0 auto; background:rgba(198,242,78,.12); border:1px solid rgba(198,242,78,.32); font-size:9px; font-weight:800; letter-spacing:.12em; color:var(--mint); } .hvx-lp .tipseal:hover{ transform:none; box-shadow:none; } .hvx-lp .tipseal::after{ content:none; } /* The tip intel card carries three stat cells and no chart, so it needs far less height than the token panel it inherits from — without this it left a large dead gap above the deck (worse once the duplicate address row went). */ .hvx-lp.tip .intel{ height:159px; } .hvx-lp.tip .deck{ top:125px; } .hvx-lp.tip .loupe{ height:262px; } .hvx-lp.tip .loupe.open{ height:395px; } .hvx-lp .tipav img{ width:100%; height:100%; object-fit:cover; display:block; } /* An address subtitle keeps its real casing and reads as data, not a label. */ .hvx-lp .tk .name.asaddr{ text-transform:none; letter-spacing:.02em; font-family:ui-monospace,'JetBrains Mono',Menlo,monospace; font-size:9.5px; } /* Copy rides beside the address title instead of repeating it in its own row. */ .hvx-lp .tipcopy{ appearance:none; background:none; border:none; padding:0; margin-left:8px; width:16px; height:16px; cursor:pointer; color:var(--muted); vertical-align:middle; display:inline-flex; align-items:center; justify-content:center; transition:color .15s ease; } .hvx-lp .tipcopy svg{ width:13px; height:13px; display:block; } .hvx-lp .tipcopy:hover{ color:var(--frost); } .hvx-lp .tipcopy.copied{ color:var(--mint); } /* Balance / activity / identity — reuses the token panel's .s/.l/.v stat cells */ .hvx-lp .tipstats{ margin-top:22px; display:flex; align-items:flex-end; gap:20px; min-width:0; } .hvx-lp .tipstats .v.ok{ color:var(--mint); font-weight:700; } .hvx-lp .tipstats .v.warnv{ color:var(--amber); font-weight:700; } .hvx-lp .tiptile .qn{ color:var(--muted); } .hvx-lp .tiptile .qs{ color:var(--muted); } .hvx-lp .tipbtn.connect small{ } /* success: heart in the badge + reply/explorer actions */ .hvx-lp .tipheart svg{ width:26px; height:26px; } .hvx-lp .tipfin-actions{ margin-top:18px; width:100%; display:flex; flex-direction:column; gap:8px; } .hvx-lp .tipfin-btn{ box-sizing:border-box; width:100%; text-align:center; appearance:none; font:inherit; font-size:13px; font-weight:750; padding:11px; border-radius:12px; cursor:pointer; text-decoration:none; transition:background .15s ease, border-color .15s ease, transform .1s ease; } .hvx-lp .tipfin-btn.mint{ color:#0a0c0e; background:linear-gradient(120deg,var(--core),var(--mint)); border:1px solid transparent; } .hvx-lp .tipfin-btn.mint:hover{ filter:brightness(1.05); } .hvx-lp .tipfin-btn.ghost{ color:var(--frost); background:rgba(255,255,255,.05); border:1px solid rgba(245,247,246,.16); } .hvx-lp .tipfin-btn.ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(245,247,246,.3); } .hvx-lp .tipfin-btn:active{ transform:scale(.985); } /* ===== REDUCED MOTION — state changes become instant, fireworks go static ===== The charge ring is deliberately KEPT: it is the progress meter on a hold-to-commit money action (a real timer with a real consequence), i.e. essential feedback under WCAG 2.3.3, not decoration. Colour/opacity fades stay; rotation, parallax, scaling and pulsing go. The tilt parallax and the list<->token spin are gated in JS (loupePanel.ts / panel.ts) because they are driven per-frame from script, not by these rules. */ @media (prefers-reduced-motion: reduce){ /* flip + height growth: instant. The .finishing dismissal keeps only its opacity fade — the scale-down would otherwise jump, so it goes entirely. */ .hvx-lp .loupe, .hvx-lp .loupe.flipping{ transition:none; } .hvx-lp .loupe.finishing{ transition:opacity .3s ease; transform:rotateY(180deg); } /* action drawer: appears in place instead of unfolding */ .hvx-lp .amounts{ transition:none; } /* fired pop + list<->token spin (JS already bypasses the spin; belt+braces) */ .hvx-lp .tile.fired, .hvx-lp .swapbtn.approve.fired{ animation:none; } .hvx-lp.hvx-spinout, .hvx-lp.hvx-spinin{ animation:none; } /* success/fail choreography: everything simply present. All finpop/finrise end states equal the elements' natural styles, so none goes invisible. */ .hvx-lp .fin-check, .hvx-lp .fin-title, .hvx-lp .fin-sub, .hvx-lp .fin-recv, .hvx-lp .fin-hp, .hvx-lp .fin-actions, .hvx-lp .fin-meta, .hvx-lp .fin.fail .fin-check, .hvx-lp .fail-reason, .hvx-lp .fail-back{ animation:none; } /* the expanding rings are pure firework — without their animation they would sit as a static full-size border, so they go entirely */ .hvx-lp .fin-ring{ display:none; } /* attention pulses hold their resting state; the red bar itself remains */ .hvx-lp .riskbar{ animation:none; } /* spinners: match the existing bridge-spinner precedent (loupeCss ~:344) */ .hvx-lp .spin{ animation:none; } }