/* ═══════════════════════════════════════════════════════════════════════════ Outside Analytics — the whole stylesheet. Replaces Bootstrap and the old styles.css. Bootstrap was a CDN dependency serving three pages, and every element that gives this product its look - the pill controls, the ghost cards, the ranked rows, the ring, the drawer - was custom CSS sitting on top of it anyway. What is left is the part that was doing the work. The subject is a marketplace instrument: a seller opens it to find out what the market is worth today and what is winning inside it. So it is built like an instrument - a quiet mint ground, white cards that float rather than frame, and every figure set in a monospace face with tabular numerals so a column of сум stays aligned as the values change. Colour is used to MEAN something and almost never to decorate: mint is the money, warm orange is the quantity, and nothing else is coloured at all. ═══════════════════════════════════════════════════════════════════════════ */ /* ── tokens ────────────────────────────────────────────────────────────────── Contrast is checked, not eyeballed. Mint at #12A87A is 3.04:1 on white - fine for a chart stroke, a filled pill or a 2rem headline, and NOT fine for a 12px label, which is why green text has its own darker token at 5.1:1. */ :root { /* Design 1d, "Top band". Values taken from the canvas rather than eyeballed: the page ground is the #eef3f4 the artboard paints under its cards, and #dfe9ea is the canvas behind the artboard itself - not part of the app. */ --an-ground:#eef3f4; --an-canvas:#dfe9ea; /* the ground the artboard's own frame sits on */ --an-surface:#FFFFFF; --an-ink:#12181c; --an-ink-2:#3b464e; --an-muted:#61707a; --an-faint:#7d8a90; --an-faintest:#98a2aa; --an-line:#eceff0; --an-line-soft:#f2f5f6; --an-track:#f0f3f4; /* Three greys the canvas uses for text that must recede completely: the date under a chart column, a rank numeral, and a product's shop line. None of them is ever the only carrier of a fact. */ --an-hair:#c3ccd2; --an-rank:#b3bdc4; --an-sub:#a3adb4; /* The active control is INK, not a colour. In this direction colour belongs to the data - the donut, the category bars - and the chrome stays neutral, which is the opposite of the mint version this replaces. */ --an-accent:#12181c; --an-link:#3f6fd0; --an-bar:#67BBFF; /* the column */ --an-bar-2:#b3df6a; /* the quantity, in the readout only */ --an-bar-line:#6f9ae4; /* The calendar. Blue, not the ink the rest of the chrome uses: a picked date is a value, and the band between the window's two ends is data about what is on screen - not a control in its active state. #3f6fd0 carries white at 5.4:1; the bar colour beside it would not. */ --an-cal-on:#3f6fd0; --an-cal-band:#e9f0fb; --an-cal-off:#c9d1d6; --an-up:#4b9e3f; --an-up-soft:#eef7e8; --an-down:#e0574f; --an-down-soft:#fdeeed; --an-r-lg:26px; /* the page's own frame */ --an-r:20px; /* a card */ --an-r-sm:16px; /* a metric tile */ --an-r-xs:12px; /* a control */ --an-r-2xs:9px; /* a pill inside a control, a thumbnail */ --an-pill:999px; --an-shadow:0 1px 2px rgba(16,32,48,.04); --an-shadow-lg:0 30px 70px -40px rgba(16,40,56,.4); --an-sans:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif; --an-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; } /* Rank-ordered, and used by two elements at once: slice N and category row N carry the same hue, which is what lets the ring be read without a legend. */ :root { --an-c1:#6f9ae4; --an-c2:#b3df6a; --an-c3:#5fc9b0; --an-c4:#f9c56b; --an-c5:#f4826b; --an-c6:#a99cf2; --an-c7:#8fd3f4; --an-c8:#c6d0d6; } /* ── reset ─────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing:border-box; } /* The UA sheet hides [hidden] with `display:none`, and ANY class that sets display beats it - .an-drawer is display:flex, so `drawer.hidden = true` did nothing at all. The panel only LOOKED shut because it was also translated off-screen: it stayed in the layout, kept its tab stops, and was still read out by a screen reader. This is the rule that actually closes it. */ [hidden] { display:none !important; } html { -webkit-text-size-adjust:100%; } body { margin:0; background:var(--an-canvas); color:var(--an-ink); font-family:var(--an-sans); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } h1, h2, h3, h4, p, ul, ol, figure { margin:0; } ul, ol { padding:0; list-style:none; } a { color:inherit; text-decoration:none; } img, svg { max-width:100%; } button, input, select { font:inherit; color:inherit; } button { cursor:pointer; border:0; background:none; } table { border-collapse:collapse; width:100%; } :focus-visible { outline:2px solid var(--an-bar-line); outline-offset:2px; border-radius:var(--an-r-2xs); } /* ── chrome ────────────────────────────────────────────────────────────────── A single bar. Two destinations survive - what the market is worth, and who holds it - so the nav is two words and does not need to be anything more. */ .sh-nav { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.7rem clamp(.9rem,3vw,1.75rem); background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--an-line); } .sh-brand { display:flex; align-items:baseline; gap:.5rem; font-weight:700; letter-spacing:-.02em; margin-right:.25rem; } .sh-brand b { font-size:1rem; } .sh-brand span { font-size:.7rem; font-weight:600; color:var(--an-muted); text-transform:uppercase; letter-spacing:.1em; } /* The mark. It was a hand-drawn ring standing in for a logo that did not exist yet; this is the real one, and the same file the browser tab loads. */ .sh-mark { width:26px; height:26px; flex:0 0 auto; align-self:center; border-radius:7px; display:block; } .sh-links { display:flex; align-items:center; gap:.15rem; margin-right:auto; overflow-x:auto; scrollbar-width:none; min-width:0; } .sh-links::-webkit-scrollbar { display:none; } .sh-links a { padding:.4rem .75rem; border-radius:var(--an-pill); font-size:.85rem; font-weight:550; color:var(--an-muted); white-space:nowrap; } .sh-links a:hover { color:var(--an-ink); background:var(--an-line-soft); } .sh-links a.on { color:#fff; background:var(--an-accent); font-weight:600; } .sh-lang { display:inline-flex; gap:2px; background:var(--an-line-soft); border-radius:var(--an-pill); padding:3px; flex:0 0 auto; } .sh-lang a { padding:.2rem .55rem; border-radius:var(--an-pill); font-size:.7rem; font-weight:700; letter-spacing:.06em; color:var(--an-muted); } .sh-lang a.on { background:var(--an-surface); color:var(--an-ink); box-shadow:0 1px 2px rgba(16,42,32,.12); } .sh-btn { display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; padding:.44rem .9rem; border-radius:var(--an-pill); font-size:.82rem; font-weight:650; color:#fff; background:var(--an-accent); box-shadow:0 1px 2px rgba(16,42,32,.14); transition:background .14s ease; } .sh-btn:hover:not(:disabled) { background:#2b343a; } .sh-btn:disabled { background:var(--an-faint); cursor:default; } .sh-quiet { font-size:.78rem; color:var(--an-muted); padding:.3rem .5rem; } .sh-quiet:hover { color:var(--an-ink); } /* The page is one card on a darker ground. That frame is the artboard's own, and it is what makes the white cards inside read as floating on a surface rather than scattered loose on the page. Below 520px it is dropped whole: the narrow layout was measured against the full 320px and every pixel the frame takes comes off the one column that cannot give, the product name. */ main { background:var(--an-ground); border-radius:var(--an-r-lg); margin:clamp(10px,1.4vw,18px); padding:clamp(16px,2.2vw,30px); box-shadow:var(--an-shadow-lg); } @media (max-width:520px) { main { margin:0; border-radius:0; box-shadow:none; padding:1rem .9rem 3rem; } } /* ── the few utilities market.html still asks for ─────────────────────────── */ .small { font-size:.82rem; } .text-muted { color:var(--an-muted); } .h4 { font-size:1.2rem; font-weight:700; letter-spacing:-.02em; } .mb-1 { margin-bottom:.25rem; } .mb-3 { margin-bottom:1rem; } .me-1 { margin-right:.25rem; } .ms-3 { margin-left:1rem; } .alert { padding:.7rem 1rem; border-radius:var(--an-r-sm); margin-bottom:1rem; background:#fdf6e8; color:var(--an-ink); border:1px solid #F3DCC2; font-size:.88rem; } /* ── page rhythm ──────────────────────────────────────────────────────────── Design 1d, "Top band": the donut, the trend and the headline metrics sit in ONE band across the top, and the two rankings fill the row beneath. Every number the page exists to report is above the fold; you scroll for detail, never for the answer. */ .an-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; } .an-title { font:600 32px/1.1 var(--an-sans); letter-spacing:-.02em; color:var(--an-ink); } .an-top { display:grid; grid-template-columns:392px minmax(0,1fr) 216px; gap:14px; margin-bottom:14px; align-items:stretch; } /* A leaf category has no ring, so the band drops to two parts. */ .an-top-2 { grid-template-columns:minmax(0,1fr) 216px; } .an-mid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:14px; align-items:stretch; } .an-mid > .an-card { display:flex; flex-direction:column; min-width:0; } /* ── surfaces ─────────────────────────────────────────────────────────────── */ .an-card { background:var(--an-surface); border:1px solid var(--an-line); border-radius:var(--an-r); box-shadow:var(--an-shadow); overflow:hidden; } .an-pad { padding:24px; } .an-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:20px 24px 12px; } .an-card-head > * { min-width:0; } .an-card-head-col { flex-direction:column; align-items:stretch; gap:12px; } .an-card-title { font:600 17px/1.2 var(--an-sans); color:var(--an-ink); } .an-label { font:600 10px/1.2 var(--an-sans); color:var(--an-faint); text-transform:uppercase; letter-spacing:.11em; } .an-sub { display:block; font:400 12px/1.3 var(--an-sans); color:var(--an-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .an-num { font-family:var(--an-mono); font-variant-numeric:tabular-nums lining-nums; font-weight:700; color:var(--an-ink); letter-spacing:-.02em; } .an-unit { font-family:var(--an-sans); font-weight:500; color:var(--an-faint); letter-spacing:0; margin-left:.35em; } .an-empty { padding:44px 24px; text-align:center; color:var(--an-muted); font-size:14px; } .seed-cmd { display:inline-block; background:var(--an-ink); color:#b3df6a; padding:.6rem 1rem; border-radius:var(--an-r-xs); font-family:var(--an-mono); font-size:13px; } /* ── the headline ─────────────────────────────────────────────────────────── */ .an-money { font:700 46px/1 var(--an-mono); letter-spacing:-.04em; color:var(--an-ink); } .an-money .an-unit { font:500 17px/1 var(--an-sans); color:var(--an-muted); white-space:nowrap; } /* The fraction was set smaller here to close the digit-wide cell JetBrains Mono gives its comma. The canvas sets the whole figure at one size and the -.04em tracking closes the same gap, so the two halves now match. */ .an-frac { font-size:1em; } .an-fig-v { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; } .an-range { font:400 12px/1 var(--an-mono); color:var(--an-sub); white-space:nowrap; } .an-hero-note { margin-top:14px; font:400 12px/1.5 var(--an-sans); color:var(--an-faint); } /* Four tiles in their own column, one fact each. */ .an-metrics { display:flex; flex-direction:column; gap:10px; } .an-metric { flex:1; background:var(--an-surface); border:1px solid var(--an-line); border-radius:var(--an-r-sm); padding:16px 18px; box-shadow:var(--an-shadow); display:flex; flex-direction:column; justify-content:center; gap:8px; } .an-metric .an-num { font:700 30px/1 var(--an-mono); letter-spacing:-.035em; } .an-metric .an-unit { font-size:13px; } .an-delta { display:inline-flex; align-items:center; justify-content:center; font:600 13px/1 var(--an-mono); font-variant-numeric:tabular-nums; padding:5px 9px; border-radius:7px; white-space:nowrap; } .an-up { color:var(--an-up); background:var(--an-up-soft); } .an-down { color:var(--an-down); background:var(--an-down-soft); } .an-flat { color:var(--an-faint); background:var(--an-line-soft); } /* ── the chart ────────────────────────────────────────────────────────────── HTML columns, not SVG. Percentage heights inside a fixed-height rail: the rail is what makes the percentages resolve, and the whole column - the bar plus its date - is one hit target. ONE series, per design 1d. The quantity used to stand beside the money as a second column, which put two scales in one picture and made the card the loudest thing on the page. It is not lost: the readout for the day under the pointer still hands over both figures, which is the only place the two were ever read anyway. */ .an-chart { position:relative; margin-top:4px; flex:1; display:flex; flex-direction:column; justify-content:flex-end; } /* Grows to fill the card, so the band's three cards agree on a height without the chart leaving a hole under itself. */ .an-cols { display:flex; align-items:flex-end; gap:5px; flex:1 1 0; height:132px; min-height:82px; } /* Overrides the absolute positioning .an-hit carries for other uses. */ .an-chart .an-col { position:static; top:auto; bottom:auto; flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; cursor:pointer; border-radius:var(--an-r-2xs); } .an-chart .an-col:hover, .an-chart .an-col.on { background:rgba(18,24,28,.045); } /* The bar fills its column, at every span. What stays constant across the spans is the GAP - 5px, whether the window holds one day or ninety - so the columns are equally close at 3 days as at 14 and the plot is always the full width of the rail. A max-width here looked reasonable in the abstract and was wrong on screen: it made a 7-day window a row of thin bars adrift in white space, next to a 14-day window that was packed. Same chart, two densities, for no reason a reader could see. */ .an-colbars { display:flex; align-items:flex-end; width:100%; flex:1; } .an-colbars i { flex:1 1 0; display:block; border-radius:5px; min-height:2px; background:var(--an-bar); } .an-colday { font:400 9px/1 var(--an-mono); color:var(--an-hair); } .an-tip { position:absolute; top:-.35rem; z-index:6; pointer-events:none; background:var(--an-ink); color:#fff; border-radius:var(--an-r-xs); padding:.5rem .7rem; box-shadow:0 8px 24px rgba(16,32,48,.28); white-space:nowrap; } .an-tip-v { display:block; font-family:var(--an-mono); font-weight:700; font-size:.82rem; } .an-tip-u, .an-tip-d { display:block; font-size:.68rem; color:#9aa4ac; } .an-tip-u { margin-top:.05rem; color:var(--an-bar-2); } .an-tip-d { margin-top:.18rem; font-family:var(--an-mono); } .an-tip-ring { top:0; left:0; } /* ── the ring ──────────────────────────────────────────────────────────────── Donut left, legend right, in one card. Slice N and category row N carry the same hue, so the ring and the ranked list read as one object. */ .an-top > .an-card:first-child { display:flex; } .an-ring { flex:1; display:flex; align-items:center; gap:20px; padding:24px; position:relative; } .an-ring-svg { position:relative; width:150px; height:150px; flex:0 0 auto; } .an-donut { width:100%; height:100%; display:block; } .an-donut .track { fill:none; stroke:var(--an-track); } .an-donut .sl { fill:none; transition:opacity .12s ease; } .an-ring.dim .sl { opacity:.28; } .an-ring.dim .sl.on { opacity:1; } .an-ring-mid { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; pointer-events:none; text-align:center; } .an-ring-mid .an-num { font:700 23px/1 var(--an-mono); letter-spacing:-.03em; } .an-ring-mid .an-label { font-size:9px; letter-spacing:.1em; } /* The legend is titled. With the ring this thick the hole no longer has room to say what the figure in it counts, so the card says it once, here. */ .an-ring-head { font:600 15px/1 var(--an-sans); color:var(--an-ink); margin-bottom:2px; } .an-legend { flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; } .an-legend a, .an-legend > li > span { display:flex; align-items:center; gap:8px; min-width:0; border-radius:6px; } .an-legend a:hover .nm { color:var(--an-ink); } .an-legend .sw { flex:0 0 auto; width:8px; height:8px; border-radius:2px; } .an-legend .nm { flex:1 1 auto; min-width:0; font:400 12px/1.2 var(--an-sans); color:var(--an-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .an-legend .pc { flex:0 0 auto; font:600 12px/1 var(--an-mono); color:var(--an-ink); } /* ── ranked rows ──────────────────────────────────────────────────────────── */ .an-row { display:grid; align-items:center; gap:14px; grid-template-columns:minmax(0,1fr) 116px 86px 62px; padding:10px 24px; border-top:1px solid var(--an-line-soft); position:relative; color:inherit; } .an-row > * { min-width:0; } a.an-row:hover { background:#fafcfc; } .an-rank { font:500 12px/1 var(--an-mono); color:var(--an-rank); } .an-namebox { display:flex; align-items:center; gap:12px; min-width:0; } .an-name { font:500 14px/1.2 var(--an-sans); color:var(--an-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto; } .an-nameline { display:flex; align-items:center; gap:8px; min-width:0; } /* Inline with the name, not beneath it: the row is one line in this design. */ .an-bar { flex:1 1 auto; height:6px; border-radius:3px; background:var(--an-track); overflow:hidden; min-width:40px; } .an-bar > span { display:block; height:100%; border-radius:3px; background:var(--an-c1); transform-origin:left center; animation:an-grow .5s cubic-bezier(.22,1,.36,1) both; } @keyframes an-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } } .an-cell { text-align:right; } .an-row .an-name { font-size:15px; } .an-row .an-num { font:700 16px/1 var(--an-mono); } .an-row .an-unit { font:500 12px/1 var(--an-sans); } /* The quantity column recedes behind the money column beside it: same row, but it is the second thing anyone reads. */ .an-cell-q .an-num { font:500 14px/1 var(--an-mono); color:var(--an-muted); } .an-cell-q .an-unit { font:400 11px/1 var(--an-sans); color:var(--an-sub); } /* A movement figure fills its column rather than shrink-wrapping, so the pills stack into a clean edge down the right of the list. */ .an-row .an-delta { display:block; width:100%; padding:5px 0; text-align:center; } .an-row-c .an-bar { display:none; } .an-chip { display:inline-block; font:600 10px/1.4 var(--an-sans); padding:2px 7px; border-radius:5px; background:var(--an-line-soft); color:var(--an-muted); } .an-chip-new { background:#eef7e8; color:var(--an-up); } /* Products: a thumbnail, a two-line name, and the way out to Uzum. */ .an-prow { grid-template-columns:26px 34px minmax(0,1fr) 104px 24px; gap:12px; } .an-prow-c { grid-template-columns:26px 34px minmax(0,1fr) 96px 24px; } .an-prow .an-rank { text-align:right; } .an-prow .an-name { font-size:14px; } .an-prow .an-sub { font:400 11px/1.2 var(--an-sans); color:var(--an-sub); } .an-prow .an-num { font:700 15px/1 var(--an-mono); } .an-prow .an-unit { font:500 11px/1 var(--an-sans); } .an-thumb { display:block; width:34px; height:34px; border-radius:10px; object-fit:cover; background:var(--an-line-soft); } .an-prow .an-namebox { flex-direction:column; align-items:flex-start; gap:4px; min-width:0; } .an-prow .an-nameline { width:100%; min-width:0; } .an-prow .an-name, .an-prow .an-sub { display:block; width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .an-prow .an-name { white-space:nowrap; width:100%; } /* The row is a DIV with a stretched link UNDER the two children that need their own click. Nested anchors are invalid and browsers unnest them, which is exactly how a link out disappears. */ .an-rowlink { position:absolute; inset:0; z-index:1; } .an-prow > .an-rank, .an-prow > .an-namebox, .an-prow > .an-cell { pointer-events:none; } .an-thumbwrap, .an-ext { position:relative; z-index:2; } .an-thumbwrap { display:block; line-height:0; border-radius:10px; } .an-ext { display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px; color:var(--an-faintest); justify-self:end; } .an-ext svg { width:12px; height:12px; } .an-ext:hover { background:var(--an-line-soft); color:var(--an-link); } .an-row .an-num.an-up, .an-row .an-num.an-down { background:none; padding:0; } .an-row .an-num.an-up { color:var(--an-up); } .an-row .an-num.an-down { color:var(--an-down); } /* A hundred products is a column three screens tall beside a category list of twenty-three rows. The canvas caps it and scrolls it in place, which is what keeps the two halves of the row the same object. */ .an-scroll { flex:1 1 0; min-height:470px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--an-line) transparent; } .an-scroll::-webkit-scrollbar { width:8px; } .an-scroll::-webkit-scrollbar-thumb { background:var(--an-line); border-radius:4px; } /* ── controls ───────────────────────────────────────────────────────────── The active state is INK. Colour on this page belongs to the data. */ .an-ctl { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; } .an-ctl > * { min-width:0; } .an-seg { display:flex; background:var(--an-surface); border:1px solid var(--an-line); border-radius:var(--an-r-xs); padding:4px; gap:2px; } .an-seg a { padding:7px 15px; border-radius:var(--an-r-2xs); font:600 13px/1 var(--an-sans); color:var(--an-faint); white-space:nowrap; } .an-seg a:hover { color:var(--an-ink); } .an-seg a.on { background:var(--an-accent); color:#fff; } .an-seg-wide { max-width:100%; min-width:0; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; } .an-seg-wide::-webkit-scrollbar { display:none; } .an-seg-wide a { flex:0 0 auto; } .an-date { display:inline-flex; align-items:center; gap:10px; background:var(--an-surface); border:1px solid var(--an-line); border-radius:var(--an-r-xs); padding:10px 34px 10px 14px; font:500 14px/1 var(--an-mono); color:var(--an-ink-2); appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d8a90' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:10px; } .an-date:hover { border-color:var(--an-faintest); } /* ── the calendar ──────────────────────────────────────────────────────── Drawn over the