:root { --bg: #ffffff; --bg-2: #f7f8fa; --bg-3: #eef1f5; --line: #e3e7ed; --line-2: #c8d0da; --text: #12161d; --muted: #5b6675; /* 4.6:1 on white. Was #8b95a3 at 3.03:1 — below AA for body text, and it is used for the card micro-labels, which are as small as text gets here. */ --dim: #6b7686; --accent: #0d9488; /* A fill dark enough to carry white label text. --accent itself is 3.74:1 against white, under the 4.5 AA needs, and the gate button is a solid block of it with the only words on the page that must be read. Only the light theme needs the shift; on the dark grounds the accent is already bright enough to take dark text. */ --accent-strong: #0f766e; --accent-2: #0369a1; --good: #15803d; --warn: #b45309; --bad: #be123c; /* Price RAISE red — deliberately DARKER than the airdrop --bad, so a mid-mint raise reads as its own, heavier warning and never blurs into an airdrop. */ --raise: #85122e; --purple: #6d28d9; --radius: 10px; /* Chart series get their own tokens rather than borrowing --accent-2 and --warn. Those two are the SAME value in the orchard theme (#e8b62e), so the floor line and the sales line came out identical and the chart read as one series. Semantic tokens are chosen for meaning; a chart needs them chosen for contrast against each other. */ --chart-sales: #0369a1; --chart-floor: #b45309; /* Alerts driven by very few buyers. Cannot borrow --warn: that is the same #e8b62e as --chart-sales in the orchard theme, so the flag would be invisible against the very colour it is meant to contrast with. */ --alert-narrow: #b45309; /* * KIND HUES THAT HAD TO BECOME TOKENS. * * HEATING UP and MARKET OPEN are the two Forest kinds. Heating carried a * single hard-coded #f97316 on its filter chip and NO colour at all on its * row tag; market_open, added 2026-08-20, was never given either — so its * chip fell back to --hue's `var(--dim)` default and its row tag fell back * to the plain .alert-tag colour, which is exactly where heating's row tag * already was. Two Forest kinds, one indistinguishable pair of tags. * * They are tokens rather than literals because one hex cannot clear 4.5:1 * on BOTH a white ground and two near-black ones: #f97316 measures 2.64:1 * on the light tray and 6.23:1 on the dark. Per-theme values are the only * honest way to keep the same meaning readable everywhere. * * Light values (on --bg-2 / --bg-3 / --bg): * heat #c2410c → 4.87 / 4.57 / 5.18 * market #1d4ed8 → 6.31 / 5.92 / 6.70 * Market blue is deliberately outside the family already in use — greens * (minting, earlydemand), teal (confirmed), amber (topsignal), orange * (heating), violet (floor_lifter), rose (price_raise, sellout). */ --kind-heat: #c2410c; --kind-market: #1d4ed8; /* * CHECK-IN, the third Forest kind. Muted plum (~310°), the one gap left in * the wheel the tray already uses: greens 145–175 (minting, earlydemand, * confirmed), ambers 25–45 (heating, topsignal, paidcrowd), blues 199–220 * (riser, market_open), violet 258 (floor_lifter), rose 350 (price_raise, * sellout). Low chroma on purpose — a check-in reports, it does not shout, * and it must not compete with the alert it is following up on. * light #8a4a7f → 5.87 / 5.51 / 6.24 on --bg-2 / --bg-3 / --bg * dark #c98fc2 → 6.81 / 6.09 / 7.27 * orchard #c98fc2 → 6.24 / 5.43 / 6.80 on the forest ground */ --kind-checkin: #8a4a7f; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --head-font: system-ui, -apple-system, "Segoe UI", sans-serif; } /* * Themes. Everything above is the light default; each block below only * redefines the tokens, so no component needs to know which theme is on. * The choice is stamped on and saved per browser — same idea as star * and hide, a preference belonging to the person looking, not to the data. */ html[data-theme="dark"] { --bg: #0f1319; --bg-2: #151a22; --bg-3: #1d242e; --line: #262f3b; --line-2: #3a4655; --text: #e6ebf2; --muted: #9aa7b8; --dim: #728091; /* 4.62:1 — was #6b7889 at 4.14 */ --accent: #2dd4bf; --accent-strong: #2dd4bf; /* bright on a dark ground; the label is dark */ --accent-2: #38bdf8; --good: #4ade80; --warn: #fbbf24; --bad: #fb7185; /* Deeper, more saturated than --bad so it still reads "darker" on the dark ground while staying above 4.5:1 for the bold label. */ --raise: #e11d48; --purple: #a78bfa; --chart-sales: #38bdf8; --alert-narrow: #fbbf24; /* amber vs sky riser, rose sellout */ --chart-floor: #fbbf24; /* 6.23:1 on --bg-2, 5.57 on the hover ground. The original chip orange keeps its look here — only the light theme needed it darkened. */ --kind-heat: #f97316; /* 6.87:1 / 6.15:1. Lighter and less cyan than --accent-2's #38bdf8, so the MARKET OPEN tag never reads as a focus ring or a chart line. */ --kind-market: #60a5fa; --kind-checkin: #c98fc2; /* 6.81:1 / 6.09:1 — plum, clear of the violet buying-wave tag */ } /* * Fruit Trees. The palette is lifted from the collection's own site: the * canopy greens and oak browns the pixel art is built from, on the same dark * forest ground, with Golden Apple as the accent. Corners are squared off and * headings set in a pixel-friendly mono because the art is 32x32 sprites — * rounded cards would fight it. */ html[data-theme="orchard"] { --bg: #141c12; --bg-2: #1b2418; --bg-3: #22301d; --line: #3c5232; --line-2: #4f6b41; --text: #ece7d6; --muted: #9fb392; --dim: #748b68; /* 4.68:1 — was #6f8564 at 4.33 */ --accent: #6fae52; /* Summer Green canopy */ --accent-strong: #6fae52; /* bright on a dark ground; the label is dark */ --accent-2: #e8b62e; /* Golden Apple */ --good: #6fae52; --warn: #e8b62e; /* Apple, lifted to 4.61:1. The collection's own #c8342e reads at 3.31 on this ground, and it carries SUPPLY CUT — the one label that must not be hard to read. */ --bad: #d85b56; --raise: #b23b36; /* deeper apple than --bad, still 4.5:1 on the forest ground */ --purple: #b89ae0; /* Void canopy */ --radius: 0px; /* pixel art has no rounded corners */ --head-font: var(--mono); --chart-sales: #e8b62e; /* Golden Apple */ --chart-floor: #b89ae0; /* Void canopy */ --alert-narrow: #b89ae0; /* Void purple: gold is already the riser here */ --kind-heat: #f97316; /* 5.71:1 on the forest ground */ /* 7.25:1. The one cool colour in a warm palette, which is the point: this board's Void purple (#b89ae0) is already spoken for by --alert-narrow. */ --kind-market: #7cb2f2; /* 6.24:1. Plum reads as a cousin of the Void canopy without being it — #b89ae0 is already --alert-narrow and the buying-wave tag. */ --kind-checkin: #c98fc2; } html[data-theme="orchard"] .brand, html[data-theme="orchard"] th { font-family: var(--head-font); letter-spacing: .04em; text-transform: uppercase; } html[data-theme="orchard"] .brand { color: var(--accent-2); } html[data-theme="orchard"] img { image-rendering: pixelated; } /* The theme switcher itself: icon-only, so it stays out of the way. */ /* gap, because the bell sits here on desktop too — without it the button welded itself to the theme switcher. */ .barend { flex: 1 1 0; display: flex; justify-content: flex-end; align-items: center; gap: 8px; position: relative; z-index: 2; } .tabs.theme button { padding: 4px 9px; font-size: 13px; line-height: 1.4; } * { box-sizing: border-box; } /* * Everything a touch smaller on phones. * * The board and its chrome were sized for comfortable desktop reading; on a * phone that left the header icons and cards feeling oversized, and some rows * not quite fitting. A single ROOT zoom shrinks the whole interface uniformly — * every current browser honours `zoom`, and unlike transform:scale it reflows * cleanly and leaves position:fixed intact — so the careful mobile layout and * every proportion are untouched, just rendered ~10% smaller so more fits. */ @media (max-width: 640px) { html { zoom: 0.9; } } /* * No browser-invented text sizes, anywhere. * * Opera Android (and Chrome's accessibility text scaling) inflate fonts on * pages that do not opt out. The header's wordmark is nowrap, so inflation * widened the first row past the viewport: the logo showed half-clipped and * the wallet-tray bell sat OFF-SCREEN until you panned — on the exact same * build that measured pixel-perfect at 360px in a browser without inflation. * The prefixed form alone was buried on body inside a media block; the * standard property on html is what Opera actually honours. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--accent-2); text-decoration: none; } a:hover { text-decoration: underline; } .mono { font-family: var(--mono); font-size: 12px; } .muted { color: var(--muted); } .dim { color: var(--dim); } .nowrap { white-space: nowrap; } /* ---------- header ---------- */ header { position: sticky; top: 0; z-index: 30; /* Follows the theme. This was hardcoded white, which stayed white behind the dark and orchard palettes. */ background: color-mix(in srgb, var(--bg) 93%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } /* The title row and the filter row are different kinds of thing — one is identity and status, the other is controls you operate. Running them together with no separation read as one undifferentiated block. A hairline and a tint on the controls row is enough to say "these are the knobs". */ .bar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; flex-wrap: wrap; border-bottom: 1px solid var(--line); } /* Brand and the theme switcher take equal flexible space on either side, so the status pills land in the true centre of the bar rather than being shoved right by a margin. min-width:0 lets a long name ellipsize instead of pushing the pills off-centre. */ /* Centre, not baseline: the wordmark now sits beside a 34px image, and baseline alignment would hang the tree off the text's baseline instead of centring it against the mark — the same alignment the main site uses. */ .brand { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; overflow: hidden; position: relative; z-index: 1; } .brand-logo { width: 34px; height: 34px; flex: none; } /* Truncate rather than push: under an inflated text size or a zoomed webview the wordmark must give way with an ellipsis, never grow into the header icons. */ .brand-name { font-weight: 700; font-size: 17px; letter-spacing: 1px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .brand small { color: var(--dim); font-weight: 400; font-size: 12px; white-space: nowrap; } .pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; flex: 0 1 auto; } .pill { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 12px; color: var(--muted); } .pill b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); } .dot.live { background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); animation: pulse 2s infinite; } .dot.err { background: #ef4444; } /* Behind the chain but still working — amber, not red: the scan is running and will close the gap on its own. Red is reserved for a watcher that has stopped. */ .dot.warn { background: var(--warn); } .pill.is-behind { border-color: var(--warn); color: var(--warn); } @keyframes pulse { 70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } /* ---------- add bar ---------- */ .addbar { padding: 0 20px 12px; } .addbar form { display: flex; gap: 8px; align-items: stretch; } .addbar input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 12px; outline: none; } .addbar input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13, 148, 136, .12); } .addbar .btn { white-space: nowrap; } #addMsg:not(:empty) { /* Inset to match the board and the .hidden-bar. #addMsg is a direct child of the padding-less

, so with only a top margin it ran edge-to-edge — a full-bleed pill with rounded corners flush to both browser edges. Side margins make it a tidy inset notice like everything else. */ margin: 8px 20px; font-size: 13px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); } @media (max-width: 767px) { #addMsg:not(:empty) { margin: 8px 12px; } } #addMsg.err { background: color-mix(in srgb, var(--bad) 12%, transparent); border-color: color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad); } #addMsg.ok { background: color-mix(in srgb, var(--good) 12%, transparent); border-color: color-mix(in srgb, var(--good) 35%, transparent); color: var(--good); } #addMsg .choice { display: block; margin-top: 6px; font-family: var(--mono); font-size: 12px; cursor: pointer; color: var(--accent-2); } #addMsg .choice:hover { text-decoration: underline; } /* ---------- empty state ---------- */ .blank { max-width: 620px; margin: 60px auto; text-align: center; color: var(--muted); } .blank h2 { color: var(--text); font-size: 20px; margin: 0 0 10px; letter-spacing: -.3px; } .blank p { margin: 0 0 18px; line-height: 1.65; } .blank .examples { text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-size: 13px; } .blank .examples div { margin: 5px 0; font-family: var(--mono); font-size: 12px; color: var(--muted); } .blank .examples b { color: var(--text); font-family: inherit; font-size: 13px; } .star { background: none; border: 0; color: var(--line-2); cursor: pointer; font-size: 17px; line-height: 1; padding: 3px 6px; border-radius: 5px; } .star:hover { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); } .star.on { color: #f59e0b; } /* ---------- controls ---------- */ .controls { display: flex; gap: 8px; padding: 10px 20px; flex-wrap: wrap; align-items: center; background: var(--bg-2); } .controls input[type=search], .controls select { background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; outline: none; } .controls input[type=search] { min-width: 240px; } .controls input:focus, .controls select:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(3, 105, 161, .12); } .tabs { display: flex; gap: 2px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; padding: 3px; } .tabs button { background: none; border: 0; padding: 5px 13px; border-radius: 6px; color: var(--muted); cursor: pointer; } .tabs button.on { background: var(--bg); color: var(--text); font-weight: 550; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); } .btn { background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 13px; cursor: pointer; color: var(--muted); } .btn:hover { border-color: var(--dim); color: var(--text); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .btn.primary:hover { filter: brightness(1.06); } .btn:disabled { opacity: .5; cursor: default; } /* ---------- table ---------- */ main { padding: 0 20px 60px; } /* * table-layout: fixed, and it is a performance fix, not a cosmetic one. * * Under the default `auto`, the browser measures every cell in every row to * work out column widths — so inserting the chart's row into a 381-row table * cost 191ms of relayout before a single pixel of chart was drawn. That is the * lag on opening a graph. * * Fixed layout takes the widths from the header row alone, which COLUMNS now * declares, so adding a row is O(1) instead of O(rows). */ table { width: 100%; border-collapse: collapse; table-layout: fixed; } /* * With fixed layout a long name would otherwise spill into the next column — * but only text columns get clipped. Applying this to every cell put an * ellipsis after the star and the ✕, because a button is not text that can be * truncated and the browser drew the marker anyway. */ tbody td:not(.act) { overflow: hidden; text-overflow: ellipsis; } thead th.act, tbody td.act { overflow: visible; text-align: center; padding-left: 2px; padding-right: 2px; } thead th { /* --stick-top is measured from the live header height in app.js (setStickTop). The header wraps to 2–3 rows by width, so a fixed 108px pinned the column labels UNDER the 166–208px header and hid them on scroll. The var tracks the real height; 108px is only the pre-JS fallback. */ position: sticky; top: var(--stick-top, 108px); z-index: 10; background: var(--bg); text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); padding: 10px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; } thead th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; } /* sortable headers */ thead th.sortable { cursor: pointer; user-select: none; } thead th.sortable:hover { color: var(--text); background: var(--bg-2); } thead th .arrow { opacity: 0; margin-left: 4px; font-size: 10px; } thead th.sortable:hover .arrow { opacity: .35; } thead th.sorted { color: var(--accent-2); } thead th.sorted .arrow { opacity: 1; } tbody tr { border-bottom: 1px solid var(--bg-3); cursor: pointer; } tbody tr:hover { background: var(--bg-2); } tbody tr.sel { background: color-mix(in srgb, var(--accent-2) 14%, transparent); } tbody td { padding: 9px 10px; vertical-align: middle; } /* * With a change window on, cells align by their FIRST LINE, not their middles. * * The deltas make cells different heights — Minted carries a value, a delta * and a progress bar, Floor carries a value and a delta, Mint take carries * just a value. Centring each of those against the row's height puts their * first lines at three different heights, so reading across a row the numbers * visibly stepped up and down and the table stopped looking like a table. * * Aligning to the top puts every primary value on one line across the whole * row, which is the only thing the eye is tracking. Scoped to has-change so a * board without the deltas keeps the centred look it always had. */ body.has-change tbody td { vertical-align: top; } /* * The controls align to the first line too. * * They were left centred on the grounds that they are not numbers, which was * wrong: with the numeric cells pinned to the top, the Ask AI star and the * graph dropdown floated half a row below the text beside them and the right * end of every row looked detached from the left. Everything a reader scans * across should start on the same line, controls included. */ body.has-change tbody td.act { vertical-align: top; } /* The collection cell keeps its own centring: the artwork is taller than the text line, and topping it out would strand the name against the image. */ body.has-change tbody td:first-child { vertical-align: middle; } .coll { display: flex; align-items: center; gap: 10px; min-width: 0; } .coll img, .thumb-ph { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; background: var(--bg-3); border: 1px solid var(--line); flex: none; } .coll .nm { min-width: 0; } .coll .nm div:first-child { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; } .badge { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; } /* Tint derived from each theme's own semantic colour, so a badge stays legible on a white page and on the orchard's dark forest ground alike. */ .badge.minted_out { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); } /* Finished, but inferred rather than proven — the contract publishes no cap, so this is read from minting having stopped while secondary sales started. Muted against minted_out on purpose: the same outcome, less certainty. */ .badge.mint_ended { background: color-mix(in srgb, var(--good) 10%, transparent); color: color-mix(in srgb, var(--good) 78%, var(--fg)); } .badge.minting { background: color-mix(in srgb, var(--accent-2) 16%, transparent); color: var(--accent-2); } .badge.stalled { background: var(--bg-3); color: var(--muted); } .badge.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } .badge.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); } .badge.info { background: color-mix(in srgb, var(--purple) 16%, transparent); color: var(--purple); } .score { font-weight: 700; font-variant-numeric: tabular-nums; } .score.hi { color: var(--good); } .score.mid { color: var(--warn); } .score.lo { color: var(--dim); } .bar-mini { height: 4px; background: var(--bg-3); border-radius: 3px; overflow: hidden; margin-top: 4px; width: 90px; display: inline-block; } .bar-mini i { display: block; height: 100%; background: var(--accent-2); } .bar-mini.full i { background: #22c55e; } .empty { padding: 60px 20px; text-align: center; color: var(--dim); } /* ---------- detail drawer ---------- */ .scrim { position: fixed; inset: 0; background: color-mix(in srgb, #000 42%, transparent); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 40; } .scrim.on { opacity: 1; pointer-events: auto; } /* * While the collection card is up the BOARD does not scroll. * * Without this, the first swipe on a phone was a coin toss: a finger landing * on the sheet's padding or a non-scrolling child was routed to the page * underneath, the board moved behind the scrim, and the card sat still. The * lock removes the page from the gesture entirely; overscroll-behavior keeps * the sheet's own scroll from chaining back up when it hits its top or * bottom. Applied via a class the open/close paths toggle, so nothing * changes while no card is open. */ body.sheet-open { overflow: hidden; } aside { overscroll-behavior: contain; } aside { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 96vw); background: var(--bg); border-left: 1px solid var(--line); box-shadow: -8px 0 32px rgba(16, 24, 40, .10); transform: translateX(100%); /* * Hidden while closed, for the same reason .controls is. * * A closed sheet parked at translateX(100%) is still a 760px box sitting off * the right edge, and position:fixed escapes the `overflow-x: clip` on html * — clipping ancestors do not contain fixed descendants. It does not widen * document.scrollWidth, which is why it looks fine when measured, but a * pinch-zoom out on a phone pans to it: the content sits in the left half * and the right half is empty. The filter panel was given this treatment * after the same bug; the sheet never was. * * The delay holds it visible for the length of the close animation so it * still slides out instead of vanishing, and it keeps the sheet's controls * out of the tab order while closed. */ visibility: hidden; transition: transform .22s cubic-bezier(.3, .8, .4, 1), visibility 0s linear .22s; z-index: 50; overflow-y: auto; overscroll-behavior: contain; } aside.on { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.3, .8, .4, 1), visibility 0s; } .dhead { padding: 20px; border-bottom: 1px solid var(--line); display: flex; gap: 16px; align-items: flex-start; background: var(--bg-2); } .dhead img, .dhead .thumb-ph { width: 76px; height: 76px; border-radius: 12px; } .dhead h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.3px; } .dhead .links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 9px; font-size: 13px; } .close { margin-left: auto; background: none; border: 0; color: var(--dim); font-size: 22px; cursor: pointer; line-height: 1; padding: 0 4px; } .close:hover { color: var(--text); } /* Match the focus treatment every other control has — a clean accent ring on * keyboard focus, and no chunky default UA box on click. This button was the one * that was missed, so some browsers drew their own box around the x. */ .close:focus { outline: none; } .close:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; } .dsec { padding: 18px 20px; border-bottom: 1px solid var(--line); } .dsec > h3 { margin: 0 0 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--dim); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .kv .k { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; } .kv .v { font-weight: 550; margin-top: 2px; word-break: break-word; } .kv .v.big { font-size: 17px; } table.mini { font-size: 13px; } table.mini th { position: static; padding: 6px 8px; font-size: 10px; } table.mini td { padding: 6px 8px; border-bottom: 1px solid var(--bg-3); } table.mini tbody tr { cursor: default; } table.mini tbody tr:hover { background: none; } .notefield { display: flex; flex-direction: column; gap: 5px; } .notefield label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; } .notefield input, .notefield select, .notefield textarea { background: var(--bg); border: 1px solid var(--line-2); border-radius: 7px; padding: 7px 9px; outline: none; width: 100%; } .notefield textarea { min-height: 76px; resize: vertical; } .notefield input:focus, .notefield select:focus, .notefield textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(3, 105, 161, .12); } .saverow { display: flex; align-items: center; gap: 10px; margin-top: 14px; } .scorelist { display: flex; flex-direction: column; gap: 7px; } .scorerow { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; font-size: 13px; } .scorerow .track { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; } .scorerow .track i { display: block; height: 100%; background: var(--accent-2); } .scorerow.neg .track i { background: var(--bad); } .scorerow .pts { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 62px; text-align: right; } /* ── public tier profile: a real card, in the app's own language ── */ /* * grid-template-columns is LOAD-BEARING, not decoration. * * This card is a one-column grid, and an implicit `auto` track is sized from * its items' MINIMUM contributions — it is never clamped to the container the * way a flex item is. .pt-addr carries `white-space: nowrap`, so its * min-content is the whole string; that travelled up through .pt-id into the * .pt-head flex row (42px roundel + 11px gap + 296px sentence = 349px) and * became the width of the single column. Every row in the card — the head, the * five-step ladder, the "unlocks" line, the two sign-in links — was then * stretched to 349px inside a 267px card and sliced off by the `overflow: * hidden` below. That is why copy that has no nowrap of its own still came out * chopped mid-word: it was wrapping to a box wider than the card. * * minmax(0, 1fr) floors the track at 0 so it can only ever be the card's own * content width, and the text wraps to what is actually visible. */ .pubtier { --tierhue: var(--dim); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; max-width: 100%; box-sizing: border-box; overflow: hidden; } .pubtier[data-t="seed"] { --tierhue: var(--good); } .pubtier[data-t="grove"] { --tierhue: var(--accent); } .pubtier[data-t="orchard"] { --tierhue: var(--warn, #b45309); } .pubtier[data-t="forest"] { --tierhue: #e8b62e; } /* Signed in on the public build the profile card comes first and the tier card sits under it — two sibling blocks in #authbox, so they need the gap the single card never did. Nothing else changes for either one. */ .auth-card + .pubtier { margin-top: 10px; } .pt-head { display: flex; align-items: center; gap: 11px; min-width: 0; } .pt-roundel { flex: none; width: 42px; height: 42px; border-radius: 50%; font-size: 21px; display: grid; place-items: center; background: color-mix(in srgb, var(--tierhue) 16%, var(--bg-3)); border: 1.5px solid color-mix(in srgb, var(--tierhue) 55%, var(--line)); } .pt-id { flex: 1 1 auto; min-width: 0; } .pt-name { font-family: var(--mono, monospace); font-weight: 800; font-size: 14px; letter-spacing: .12em; color: var(--tierhue); min-width: 0; overflow-wrap: anywhere; } .pt-name small { color: var(--dim); font-weight: 500; letter-spacing: .02em; margin-left: 6px; } /* A 0x… address has no break opportunities, so it stays on one line and ellipsizes — that is the intended look for a wallet. */ .pt-addr { color: var(--dim); font-size: 11.5px; font-family: var(--mono, monospace); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* * …but the signed-out slot holds a SENTENCE, not an address, and the address * treatment cut it to "Enter your wallet address to u…". Same slot, different * kind of content, so app.js tags it and it wraps instead of truncating. */ .pt-addr.pt-addr-hint { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.45; } /* the ladder: five steps, filled to the current tier, next step breathing */ .pt-ladder { display: flex; align-items: center; gap: 0; } .pt-step { flex: none; width: 26px; height: 26px; border-radius: 50%; font-size: 12.5px; display: grid; place-items: center; position: relative; background: var(--bg-3); border: 1.5px solid var(--line); filter: grayscale(1) opacity(.55); } .pt-step.done, .pt-step.now { filter: none; background: color-mix(in srgb, var(--tierhue) 14%, var(--bg-3)); border-color: color-mix(in srgb, var(--tierhue) 60%, var(--line)); } .pt-step.now { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tierhue) 22%, transparent); } @media (prefers-reduced-motion: no-preference) { .pt-step.next { animation: ptBreathe 2.2s ease-in-out infinite; } @keyframes ptBreathe { 0%,100% { filter: grayscale(1) opacity(.55); } 50% { filter: grayscale(.4) opacity(.9); } } } .pt-rail { flex: 1 1 4px; height: 2px; background: var(--line); min-width: 3px; } .pt-rail.done { background: color-mix(in srgb, var(--tierhue) 55%, var(--line)); } .pt-step .pt-req { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; font-size: 9px; color: var(--dim); font-family: var(--mono, monospace); white-space: nowrap; } /* 3px of inset keeps the 👀 and 🏆 caps (and their 0 / 100 captions) off the card's inner edge — the rails absorb it, so the ladder still spans the card. */ .pt-ladder { padding: 0 3px 16px; } .pt-next { font-size: 12.5px; color: var(--muted); line-height: 1.5; min-width: 0; overflow-wrap: anywhere; } .pt-next b { color: var(--text); } /* same one-column-grid guard as .pubtier — an auto track would take its width from the Read button's nowrap min-content rather than from the card. */ .pt-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .pt-form[hidden] { display: none; } .pt-testlink { justify-self: start; border: 0; background: none; padding: 0; cursor: pointer; color: var(--dim); font-size: 11.5px; text-decoration: underline dotted; text-underline-offset: 3px; } .pt-form label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); } /* * The address row must be allowed to SHRINK. A flex item's default minimum is * its content width, so on a phone the 0x… input kept its natural width, the * Continue button kept its padding, and the pair pushed straight through the * side of the card. min-width:0 on the row and the form lets the input give way, * and border-box stops the padding adding to the width it was given. */ .pt-form, .pt-row { min-width: 0; max-width: 100%; box-sizing: border-box; } .pt-row { display: flex; gap: 8px; flex-wrap: nowrap; align-items: stretch; } .pt-row > * { box-sizing: border-box; } .pt-in { flex: 1; min-width: 0; padding: 10px 11px; border-radius: 9px; font-family: var(--mono, monospace); font-size: 12.5px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); } .pt-in:focus { outline: none; border-color: var(--accent); } .pt-go { /* narrow phones get a tighter button rather than an overflowing row */ flex: 0 0 auto; padding: 10px 16px; border-radius: 9px; cursor: pointer; font-weight: 700; font-size: 13px; border: 1px solid transparent; background: var(--accent-strong, var(--accent)); color: #fff; white-space: nowrap; } @media (max-width: 420px) { .pt-go { padding: 10px 12px; } .pt-in { font-size: 12px; padding: 10px 9px; } } .pt-out { justify-self: end; padding: 2px 0; border: 0; background: none; cursor: pointer; color: var(--dim); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; } .pt-out:hover { color: var(--bad); } /* * What each tier does NOT see (server enforces the same — this is the chrome). * PHONE-AWARE: the ☰ drawer stays for every tier because it carries things * visitors DO get (live-feed switch, theme, language, and the profile box * that upgrades them). Only the locked controls inside it disappear. */ /* Locked controls GHOST rather than vanish: dimmed, inert, wearing their price tag — the visitor sees exactly what a single tree unlocks. */ body[data-pub-tier="visitor"] .ctrl-field[data-label="Search"], body[data-pub-tier="visitor"] .ctrl-field[data-label="Status"], body[data-pub-tier="visitor"] #source, body[data-pub-tier="visitor"] #scope, body[data-pub-tier="visitor"] #social, body[data-pub-tier="visitor"] #quicksort, body[data-pub-tier="visitor"] #nodata, body[data-pub-tier="visitor"] .sel[data-label="Show change over"] { opacity: .38; pointer-events: none; filter: grayscale(.6); position: relative; } /* * The lock badge sits ON the control it guards, vertically centred against the * control's own box — not floated above it. `top:50%` alone resolved against * differing line-heights per control, which left the glyph riding high on some * of them; centring the glyph's own height with a flex line-box fixes it for * every control the rule touches. * * #quicksort is deliberately NOT in this list: "⚡ Fastest secondary sales" * already reads as one designed unit and a badge crowding its right edge made * it look broken rather than gated. The control is still dimmed and inert for * visitors, and tapping it explains why. */ /* #status is no longer badged here: for a visitor its lock was the only one of these that actually rendered (the Search .ctrl-field is display:contents, so its ::after never paints), which left a lone padlock floating on the Status filter. That single visitor lock now rides the desktop sort hint instead — see the .sort-hint::before rule below. */ body[data-pub-tier="visitor"] .ctrl-field[data-label="Search"]::after { content: '🔒'; position: absolute; right: 8px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 12px; line-height: 1; opacity: 1; filter: none; pointer-events: none; } /* * Any lock that follows a run of TEXT rides the text baseline instead, so it * reads as part of the sentence rather than as a superscript floating off the * top of it. Used by the desktop sort hint. */ .lock-inline { font-size: 11px; line-height: 1; margin-left: 5px; display: inline-block; vertical-align: baseline; position: relative; top: 1px; opacity: .85; } /* * The visitor's single sort-lock padlock, sitting on the desktop sort hint * itself. For a visitor, clicking a column heading does nothing — sorting is * locked to last-mint — so the padlock reads as part of that sentence: it sits * immediately before "Click any column heading to sort". Placed here (not on a * toolbar control) at the Director's request, replacing the lone padlock that * floated on the Status filter. Scoped to visitor, and desktop-only for free: * .sort-hint is display:none at ≤767px (there are no column headings on mobile), * so this ::before never paints there. Holder builds set no pub-tier and never * match. Styling mirrors .lock-inline but hugs the text on its right. */ body[data-pub-tier="visitor"] .sort-hint::before { content: '🔒'; margin-right: 5px; font-size: 11px; line-height: 1; display: inline-block; vertical-align: baseline; position: relative; top: 1px; opacity: .85; } /* sort control stays visible for visitors; every option but last-mint is disabled in JS */ /* LOCKED, NOT GONE: the icon stays, greyed with a lock badge; tapping explains. */ /* ── public chrome: login pill, view segment, locked card body ── */ .acct-loginmode { width: auto !important; padding: 0 4px !important; } /* * The one call to action on a visitor's screen, so it gets the only piece of * dimensional treatment in the header: a soft vertical gradient rather than a * flat fill, a hairline of light along the top edge to catch it, and a shadow * tinted with the accent instead of neutral grey — the difference between a * coloured rectangle and a button that looks pressable. Everything else in * this toolbar stays flat by design, which is what lets this one read as the * primary action without shouting. */ .acct-login-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 18px; border-radius: 999px; font-weight: 650; font-size: 13px; letter-spacing: .01em; color: #fff; white-space: nowrap; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff) 0%, var(--accent-strong, var(--accent)) 100%); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent), 0 1px 2px color-mix(in srgb, var(--accent-strong, #000) 30%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--accent-strong, #000) 42%, transparent); transition: box-shadow .16s ease, transform .16s ease, filter .16s ease; } .acct-loginmode:hover .acct-login-pill { filter: brightness(1.05); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent), 0 2px 4px color-mix(in srgb, var(--accent-strong, #000) 32%, transparent), 0 8px 20px -6px color-mix(in srgb, var(--accent-strong, #000) 52%, transparent); } /* Pressing it should feel like pressing it, not like a page navigation. */ .acct-loginmode:active .acct-login-pill { transform: translateY(1px); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--accent-strong, #000) 45%, transparent), 0 1px 2px color-mix(in srgb, var(--accent-strong, #000) 25%, transparent); } .acct-loginmode:focus-visible .acct-login-pill { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .acct-login-pill { transition: none; } .acct-loginmode:active .acct-login-pill { transform: none; } } .pt-loginways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .pt-way { display: block; padding: 11px 13px; border-radius: 10px; text-decoration: none; background: var(--bg-3); border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; line-height: 1.5; min-width: 0; box-sizing: border-box; overflow-wrap: anywhere; } .pt-way b { color: var(--text); } .pt-way i { color: var(--accent); font-style: normal; } .pt-way:hover { border-color: var(--line-2); } /* * THE SIGNED-OUT CARD'S PRIMARY ACTION. * * A holder does not log in by typing their own address — anyone can type * anyone's. They log in by connecting on fruittrees.xyz, which hands the * address to /enter?a=…, so THAT is what wears the button. Deliberately not a * new style system: the fill, the inner light hairline and the accent-tinted * shadow are the same recipe as .acct-login-pill (the header's primary * control) laid out on the .auth-login row (icon · two lines · arrow), so the * card gains a primary action without gaining a new visual language. * * .pt-way underneath keeps its quiet card treatment and .pt-testlink stays a * dotted whisper — the hierarchy is carried by weight, not by wording alone. */ .pt-signin { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px; text-decoration: none; border: 1px solid transparent; /* * NOT #fff. --accent-strong is a DARK teal on the light theme and a BRIGHT * teal on the dark/orchard ones, so a hardcoded white label is unreadable in * half the themes. var(--bg) is the codebase's own answer (see .dl-unlockbar * etc.): it is light where the accent is dark and dark where it is bright. */ color: var(--bg); /* the card is a minmax(0,1fr) grid — this must be allowed to shrink into it */ min-width: 0; max-width: 100%; box-sizing: border-box; /* * Flat --accent-strong, not a gradient. The .acct-login-pill recipe lightens * its top stop toward --accent, which on the LIGHT theme is the paler #0d9488: * the label then measured 3.33:1 against that stop — below AA for 13.5px, on * the one control the card most needs a holder to read. The fill is now the * codebase pattern for an accent button (background: var(--accent-strong); * color: var(--bg)), and the dimension comes from the inset hairline and the * accent-tinted shadow below instead. Measured: 5.5:1 light, 10:1 dark, * 6.5:1 orchard. */ background: var(--accent-strong, var(--accent)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent), 0 1px 2px color-mix(in srgb, var(--accent-strong, #000) 30%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--accent-strong, #000) 42%, transparent); transition: box-shadow .16s ease, transform .16s ease, filter .16s ease; } .pt-signin:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent), 0 2px 4px color-mix(in srgb, var(--accent-strong, #000) 32%, transparent), 0 8px 20px -6px color-mix(in srgb, var(--accent-strong, #000) 52%, transparent); } .pt-signin:active { transform: translateY(1px); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--accent-strong, #000) 45%, transparent), 0 1px 2px color-mix(in srgb, var(--accent-strong, #000) 25%, transparent); } .pt-signin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pt-signin-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; font-size: 16px; border-radius: 9px; background: color-mix(in srgb, var(--bg) 18%, transparent); } .pt-signin-tx { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } /* 320px: "fruittrees.xyz" has no break opportunity of its own, so let it break */ .pt-signin-tx b { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; overflow-wrap: anywhere; } .pt-signin-tx i { font-size: 11px; font-style: normal; margin-top: 2px; color: color-mix(in srgb, var(--bg) 94%, transparent); overflow-wrap: anywhere; } .pt-signin-go { flex: none; margin-left: auto; padding-left: 6px; font-size: 16px; color: color-mix(in srgb, var(--bg) 88%, transparent); } @media (max-width: 380px) { .pt-signin { padding: 10px 11px; gap: 8px; } .pt-signin-ic { width: 26px; height: 26px; font-size: 14px; } .pt-signin-tx b { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .pt-signin { transition: none; } .pt-signin:active { transform: none; } } .pub-seg { flex: 1 1 auto; min-width: 0; min-height: 40px; display: flex; gap: 0; padding: 3px; box-sizing: border-box; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius); } .pub-seg button { flex: 1; border: 0; cursor: pointer; border-radius: calc(var(--radius) - 3px); background: transparent; color: var(--dim); font-weight: 600; font-size: 13.5px; transition: background-color .15s ease, color .15s ease; } .pub-seg button.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.22); } .pub-viewbar { position: static; border-bottom: 0; margin-bottom: 0; padding-bottom: 2px; } /* on public phones the drawer's own view switch retires — the segment owns it */ @media (max-width: 767px) { body[data-pub-tier] #tabs { display: none; } } @media (min-width: 768px) { .pub-seg { display: none; } } /* visitor lockdown: real card, analysis greyed in place */ #drawer.tier-lockdown > *:not(.dhead):not(.dl-unlockbar) { opacity: .55; pointer-events: none; user-select: none; filter: blur(7px) grayscale(.6); } .dl-unlockbar { display: flex; align-items: center; gap: 12px; margin: 12px 20px 4px; padding: 12px 14px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line-2); } .dl-ico { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); font-size: 15px; } .dl-txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; } .dl-txt b { font-size: 13px; color: var(--text); } .dl-txt span { font-size: 11.5px; color: var(--dim); line-height: 1.4; } .dl-txt span b { font-size: inherit; } .dl-chips { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .dl-chips i { font-style: normal; font-size: 11px; white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); color: var(--muted); } /* detail header: links and the star/close controls sit on ONE baseline */ #drawer .links { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } #drawer .links a { display: inline-flex; align-items: center; height: 26px; } #drawer .d-head, #drawer .links + * { align-items: center; } /* "Fetch details" — the on-demand fill button on a genuinely blank card. A compact accent button, native to the header, sitting under the links row. Adapts per theme (radius/accent/head-font) and reads the same on desktop 1280 and phone 375. Markup: fetchDetailsBtn(); behaviour: wireDetail() in app.js. */ .cd-fetch { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 13px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--bg); color: var(--accent-2); font-family: var(--head-font); font-size: 12.5px; font-weight: 650; line-height: 1; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 120ms ease, color 120ms ease, filter 120ms ease, opacity 120ms ease; } .cd-fetch:hover:not(:disabled) { background: var(--accent); color: var(--bg); } .cd-fetch:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } .cd-fetch:disabled { cursor: progress; opacity: .8; } /* deadline passed with nothing landed yet — amber, invites a retry */ .cd-fetch.is-pending { border-color: var(--warn); color: var(--warn); background: var(--bg); } .cd-fetch.is-pending:hover:not(:disabled) { background: var(--warn); color: var(--bg); } .cd-fetch .cd-fetch-ico { display: inline-grid; place-items: center; width: 13px; height: 13px; font-size: 13px; line-height: 1; } /* the glyph becomes a spinner ring while the fetch is in flight */ .cd-fetch.is-loading .cd-fetch-ico { font-size: 0; box-sizing: border-box; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: cd-fetch-spin .7s linear infinite; } @keyframes cd-fetch-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .cd-fetch { transition: none; } .cd-fetch.is-loading .cd-fetch-ico { animation: none; } } /* the visitor's locked sort pill + the sorts popup */ .sort-lockpill { color: var(--dim); text-align: left; cursor: pointer; display: flex; align-items: center; } .sp-card { max-width: 400px; } .sp-body { padding: 16px 18px 20px; } .sp-lead { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); line-height: 1.5; } .sp-lead b, .sp-foot b { color: var(--text); } .sp-grid { display: flex; flex-wrap: wrap; gap: 7px; } .sp-item { padding: 5px 11px; border-radius: 999px; font-size: 12px; color: var(--dim); background: var(--bg-3); border: 1px solid var(--line); } .sp-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; } .tier-locked { opacity: .4; filter: grayscale(1); position: relative; } .tier-locked-soft { opacity: .55; } .tier-locked-soft option:disabled { color: var(--dim); } /* * Visitor score teaser. On the public build a visitor must not read collection * scores in the clear, so the score chip is rendered with a heavy blur: the * digits are unreadable but the chip still shows, signalling "there is a score * here, unlock it". Same lock language as .tier-locked above (grayscale, so the * hi/mid/lo colour can't leak the magnitude either) plus the blur. Applied ONLY * for visitors, at two sites — the desktop table Score cell (as * `.score.score-locked`) and the card's score stat value (as a bare * `.score-locked` span inside the stat's ) — so it must stand on its own * without depending on .score. Non-visitors never get this class and are * unchanged. The blur (5px) stays well inside the table cell's 9–10px padding, * so `overflow:hidden` on the cell does not clip it. */ .score-locked { filter: blur(5px) grayscale(1); opacity: .6; user-select: none; -webkit-user-select: none; cursor: help; } .tier-toast { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 400; background: var(--bg-3); color: var(--text); border: 1px solid var(--line-2); padding: 10px 16px; border-radius: 10px; font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.35); animation: ttIn .18s ease-out; } @keyframes ttIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } /* * Visitors SEE the sort arrows, greyed, rather than not knowing sorting exists. * * These used to be hidden and the header made unclickable. A reader with no * arrow and no cursor change has no way to learn the column is sortable at all, * so the locked feature was invisible instead of merely locked. Now the arrow is * always drawn, dimmed, and the click is allowed through so the tier gate can * answer it — see #tierlock in TIER_LOCK_MAP. */ body[data-pub-tier="visitor"] thead th .arrow { display: inline; opacity: .3; } body[data-pub-tier="visitor"] thead th.sortable { cursor: pointer; } body[data-pub-tier="visitor"] thead th.sortable:hover .arrow { opacity: .55; } /* the honest lock note in the drawer, injected for visitors */ .tier-locknote { margin: 10px 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; /* No accent rail. The tinted ground is the whole signal — a coloured left edge on a note that is already a distinct surface adds a second frame saying the same thing. Padding stays symmetric now that nothing eats it. */ color: var(--muted); background: var(--bg-3); } /* ── push-alert onboarding (iOS/Android walk-through) ── */ .po-card { max-width: 420px; } .po-body { padding: 16px 18px 20px; } .po-lead { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.5; } .po-lead b, .po-step b { color: var(--text); } .po-step { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--bg-3); font-size: 13.5px; color: var(--muted); line-height: 1.5; } .po-n { flex: none; width: 22px; height: 22px; border-radius: 50%; font-style: normal; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--accent); color: var(--bg); } .po-ic { flex: none; font-size: 17px; line-height: 1.3; } .po-foot { margin: 12px 0 0; font-size: 12.5px; color: var(--dim); } .po-enable { display: block; width: 100%; margin-top: 14px; padding: 11px; font-size: 14px; font-weight: 700; } /* ── the "?" guidance on public-build alerts ── */ /* * ONE affordance, not two. * * The box below used to say `display: block` and nothing else, and an author * `display` beats the UA sheet's `[hidden] { display: none }` — so the help * text was permanently open under every row while the "?" sat above it * offering to reveal what you were already reading. Two controls, one of them * a lie. The `[hidden]` rule here is what makes the attribute actually stick; * everything else is the same look, folded away until asked for. * * The "?" itself rides the label line beside the kind tag (see .bell-hd), so * it costs the row no height at all until it is pressed — identical on the * phone and on the desktop, because the row anatomy is identical there too. */ .bell-help { flex: none; width: 18px; height: 18px; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--dim); font: 700 11px/1 var(--mono, monospace); } .bell-help:hover, .bell-help[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); } .bell-help:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } /* Scoped to .bell-tx so it outweighs the generic `.bell-tx span` sentence styling it now lives inside. */ .bell-tx .bell-helpbox { display: block; margin-top: 5px; padding: 8px 10px; font-size: 12px; /* No accent rail: the tinted panel already separates the explanation from the alert text above it, and a green left edge inside a row that is itself edged read as a nested system. Left padding stays 10px, matching the right — the 3px the border occupied is simply given back to the text, and the box's own outer edge never moved. */ color: var(--muted); background: var(--bg-3); line-height: 1.5; overflow-wrap: anywhere; } .bell-tx .bell-helpbox[hidden] { display: none; } /* Grows downward only — no width, no transform on the row itself. */ @media (prefers-reduced-motion: no-preference) { .bell-tx .bell-helpbox { animation: bell-help-in .16s ease-out; } } @keyframes bell-help-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } /* ── wallet P/L details receipt (the tab inside a wallet's log popup) ── */ .tw-pnl-li { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--bg-3); cursor: pointer; font-size: 13px; } .tw-pnl-li:hover { background: var(--bg-2); } .tw-pnl-n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38%; } .tw-pnl-m { flex: 1; min-width: 0; color: var(--dim); } .tw-pnl-li.up .tw-pnl-m b { color: var(--good, #16a34a); } .tw-pnl-li.down .tw-pnl-m b { color: var(--bad, #dc2626); } .tw-pnl-li.unk .tw-pnl-m { font-style: italic; } .tw-pnl-t { color: var(--dim); font-size: 11px; white-space: nowrap; } .tw-pnl-foot { padding: 10px 12px; border-top: 1px solid var(--line-2); display: grid; gap: 4px; font-size: 12.5px; color: var(--dim); } .tw-pnl-foot b { color: var(--text); } .tw-pnl-chip { font-weight: 700; } .tw-pnl-more { display: block; width: calc(100% - 24px); margin: 8px 12px; text-align: center; } /* the gate's secondary door — quieter than the primary action above it */ .gate-btn-alt { opacity: .75; margin-top: 8px; } .gate-btn-alt:hover { opacity: 1; } /* Detail-sheet skeleton: what fills the opened panel for the few hundred ms before the profile lands. Reuses the list skeleton's shimmer pieces. */ .d-skel { padding: 18px 20px; } .d-skel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .d-skel-head h2 { margin: 0; font-size: 20px; } .d-skel-head img, .d-skel-head .thumb-ph { width: 44px; height: 44px; border-radius: 10px; } .d-skel .sk-line, .d-skel .sk-bar { margin: 10px 0; } /* ---------- live feed ---------- */ .feed { display: flex; flex-direction: column; gap: 1px; } .feedrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--bg-3); cursor: pointer; } .feedrow:hover { background: var(--bg-2); } /* * Arrival: each new row walks in on its own — slide down a few pixels, fade * up, and a brief background wash that hands the eye the newest line, the way * a phone stacks notifications one at a time. Insertion is staggered in * app.js; this is only the entrance itself. Readers who ask for reduced * motion get instant insertion (the class is never applied). */ @media (prefers-reduced-motion: no-preference) { /* * Every mint is its own row (no merging, no counters — the reader asked for * the plain tape back). The ANIMATION alone must therefore tell the story * when several identical rows stack: app.js slides the whole column down * one row height (so the old top line is SEEN moving below), while the new * row sweeps in with a short accent wash + left edge that fades — for that * half-second the newest line is unmistakable even among five twins. */ .feedrow.arriving { animation: feedIn .38s cubic-bezier(0.32, 0.72, 0, 1); } @keyframes feedIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } } } .feedrow img, .feedrow .thumb-ph { width: 28px; height: 28px; border-radius: 6px; } .feedrow .t { margin-left: auto; color: var(--dim); font-size: 12px; white-space: nowrap; } .hint { background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 8px; padding: 11px 13px; font-size: 13px; color: var(--text); margin-bottom: 14px; } .hint b { color: var(--text); } /* * The ▲/▼ change figure under a value. * * On its own line rather than beside the number: these columns are right * aligned and already tight, and appending "▲ 12.4%" after "0.0221 ETH" made * the value itself start wrapping. Below it, the eye reads the figure first * and the movement second, which is the right order. * * Tabular numerals so a column of percentages lines up on the decimal point * instead of shifting with every poll. */ .chg { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; } .chg-up { color: var(--good); } .chg-dn { color: var(--bad); } /* * A row that changed place flashes and settles back. * * Tinting the row's own background rather than a border or an outline: the * table has hairline separators and anything with geometry would shift the * layout for the length of the flash. Colour-mix keeps it a wash over * whatever the row's normal ground is, including the selected state. * * 1.1s and eased out — long enough to catch peripherally on a board that * redraws every 30s, gone before it becomes clutter. */ /* * Strong, held, then faded — and tuned on the dark theme, not the light one. * * The first version went straight from 26% to transparent over 1.1s. On a * white ground that is a clear pulse; on the near-black ground this board * actually runs on, a 26% wash is almost the same colour as the row, and it * spends most of its life fainter still because it starts decaying * immediately. It was firing correctly and could not be seen. * * Now it opens at 55%, HOLDS for the first third so there is something to * catch out of the corner of an eye, and only then fades. A left edge is * carried too: colour alone is weak against a dark background, and it also * gives the direction to anyone who cannot separate the two hues. */ @keyframes rank-up-flash { 0% { background: color-mix(in srgb, var(--good) 55%, transparent); box-shadow: inset 3px 0 0 var(--good); } 35% { background: color-mix(in srgb, var(--good) 45%, transparent); box-shadow: inset 3px 0 0 var(--good); } 100% { background: transparent; box-shadow: inset 3px 0 0 transparent; } } @keyframes rank-dn-flash { 0% { background: color-mix(in srgb, var(--bad) 55%, transparent); box-shadow: inset 3px 0 0 var(--bad); } 35% { background: color-mix(in srgb, var(--bad) 45%, transparent); box-shadow: inset 3px 0 0 var(--bad); } 100% { background: transparent; box-shadow: inset 3px 0 0 transparent; } } tr.rank-up > td { animation: rank-up-flash 1.6s ease-out; } tr.rank-dn > td { animation: rank-dn-flash 1.6s ease-out; } /* The edge marker belongs on the row, not on every cell in it. */ tr.rank-up > td:not(:first-child), tr.rank-dn > td:not(:first-child) { animation-name: rank-up-flash-plain; } tr.rank-dn > td:not(:first-child) { animation-name: rank-dn-flash-plain; } @keyframes rank-up-flash-plain { 0% { background: color-mix(in srgb, var(--good) 55%, transparent); } 35% { background: color-mix(in srgb, var(--good) 45%, transparent); } 100% { background: transparent; } } @keyframes rank-dn-flash-plain { 0% { background: color-mix(in srgb, var(--bad) 55%, transparent); } 35% { background: color-mix(in srgb, var(--bad) 45%, transparent); } 100% { background: transparent; } } /* * The rank flash is NOT disabled under prefers-reduced-motion. * * It used to be, and that was both wrong and possibly why it never appeared: * the setting is reported by more things than the Windows animation toggle — * a browser's battery saver or its own accessibility switch will assert it — * and one media query was silently turning the whole feature off with nothing * to indicate why. * * It is also the wrong rule to apply. Reduced motion is about movement: * parallax, sliding, zooming, things that provoke vestibular symptoms. A * background briefly changing colour in place does not move anything. What it * does get is a shorter, gentler treatment, so it still reads as a highlight * without pulsing at anyone who asked for calm. */ @media (prefers-reduced-motion: reduce) { tr.rank-up > td, tr.rank-dn > td, tr.rank-up > td:not(:first-child), tr.rank-dn > td:not(:first-child) { animation-duration: .9s; animation-timing-function: linear; } } /* * Odometer digits. * * Only the digits that actually changed move, and each moves on its own — a * value going 4,948 -> 4,950 rolls the last two and leaves "4,9" completely * still, which is what makes it readable rather than a blur. A whole-number * cross-fade was the alternative and it is the thing that reads as "an * animation happened"; this reads as the number itself changing. * * Each digit is a column of 0-9 inside a one-character window, moved by * translateY. Height is set in `em` so it tracks whatever font-size the * surrounding cell uses, from the 11px board columns to the 22px card values. */ /* * The window is a positioning context and the column is pinned to its top. * * Earlier versions let the column sit as ordinary in-flow content, and it * rendered half a cell out of register — "300" reading as "ECC" — even though * every measurement said otherwise (window 16.09px, cell 16.09px, column * 160.94px, transform -48.28px = exactly three cells). The measurements were * right; what they did not capture is that an in-flow block inside an * inline-block still answers to the inherited line-height strut and to how the * flex parent resolves its baseline, and those shifted the whole column down * by a fraction of a line. * * position:absolute;top:0 removes all of it. The first cell starts exactly at * the window's top edge, whatever line-height the surrounding table row uses, * and there is no baseline left to negotiate. Verified by asking the browser * which is fully inside the window rather than by looking at it. */ /* * clip-path, NOT overflow:hidden — because of what overflow does to baselines. * * An inline-block with overflow:hidden is required by CSS to use its bottom * MARGIN EDGE as its baseline, ignoring the text inside it. So every digit * window sat on a baseline lower than the font's, which pushed the whole strip * up by a couple of pixels — and only values that had just changed render as * strips, so a number that ticked jumped above the ones beside it that had * not. That is the up-and-down in the report, and it is why it moved around: * it followed whichever figures happened to change. * * clip-path clips exactly the same pixels and leaves the baseline alone. The * hidden .od-g digit is in normal flow purely to give the box a real text * baseline to sit on; the rolling column is painted over it. */ .od { font-variant-numeric: tabular-nums; } .od-d { position: relative; display: inline-block; clip-path: inset(0); height: 1.15em; line-height: 1.15em; /* * A full character wide, not 0.62 of one. * * This is what was actually wrong the whole time, and it was never the * vertical register: overflow:hidden clips both axes, so a window narrower * than the glyph cut the right-hand side off every digit. "0" lost its bowl * and became "C", "8" became "E", "6" became "E" — while "1" and "7" are * narrow enough to survive, which is why only some figures looked broken and * why every vertical measurement agreed. 1ch is exactly the advance width of * a digit, and tabular-nums guarantees all ten share it. */ /* * No fixed width — the hidden in-flow digit sizes the box. * * This was 1ch, and `ch` is the advance of the PROPORTIONAL zero, while the * settled value renders with tabular figures. Where a font's tabular digits * are not exactly the width of its proportional zero, every digit box in a * rolling strip was off by a fraction, so a number went subtly uneven for * the length of the roll and snapped straight again once it settled back to * plain text. Letting .od-g define the width means the strip is laid out by * the same glyph metrics as the text it replaces, so the two are identical * by construction rather than by a unit that happens to agree. */ text-align: center; vertical-align: baseline; font-variant-numeric: tabular-nums; } /* In normal flow and invisible: its only job is to give the box a text baseline for the line it sits on. The rolling column paints over it. */ /* font-weight:inherit, or the box is sized by a BOLD digit. is bold by default. The column's digits already inherit the weight, but this one did not — and since it is the in-flow element, it set the width of every digit box: 8.06px against the 7.55px the same digit occupies in the settled text. That 0.5px per digit is what made a number go uneven for the length of the roll and snap straight when it finished. */ .od-d > .od-g { visibility: hidden; font-weight: inherit; } /* * The column is ten stacked cells and it is moved in TENTHS OF ITSELF, never * in em. * * An em offset has to agree with the browser's own line-box rounding to land * on a digit, and it does not: 11px x 1.15 is 12.65px, line boxes round to * whole pixels, and the error accumulates down the column until the window * shows the bottom of one digit above the top of the next. On screen that * turned "300" into "ECC" and "3,333" into "5,333" — every figure on the * board subtly wrong in a way that still looked like a number. * * A percentage translate is resolved against this element's own rendered * height, so -10% is exactly one cell of ten whatever the fractional pixels * did. The flex column keeps the ten cells exactly equal. */ /* * No will-change here, deliberately. * * It promotes the column to its own compositing layer, and a composited layer * is not reliably clipped by an ancestor's overflow:hidden — so all ten digits * painted at once, stacked, while every geometric measurement still said the * right one was in the window. That is the exact signature of the bug that * survived three fixes: getBoundingClientRect agreed, the raster did not. * These are small, short, infrequent transitions; they do not need the hint. */ .od-d i { position: absolute; top: 0; left: 0; right: 0; display: block; font-style: normal; transition: transform .55s cubic-bezier(.22, .68, .32, 1); } /* Ten cells, each exactly the height of the window, so -10% of the column is precisely one cell however the fractional pixels land. Block, not flex: a flex column inside a fixed-height clipping parent is squashed to the parent's height, which made 10% a fraction of a digit and blanked the row. */ .od-d i > b { display: block; height: 1.15em; line-height: 1.15em; font-weight: inherit; } /* * Separators are the SAME kind of box as a digit window, and aligned the same. * * They were plain inline spans next to inline-block windows. An inline-block * with overflow:hidden takes its baseline from its bottom margin edge, while * ordinary inline text takes its baseline from the font — so inside "3,333" * the comma sat on one baseline and the digits on another, and the number * visibly stepped up and down across its own width. Giving both the same * height, the same line-height and vertical-align:top removes the comparison * entirely: every box in the strip is measured from the same top edge. */ .od-s { white-space: pre; } /* Shortened rather than removed, for the same reason as the rank flash above: one media query was able to turn the whole thing off invisibly, and a half-second roll is not the kind of motion the setting exists to prevent. */ @media (prefers-reduced-motion: reduce) { .od-d i { transition-duration: .3s; } } /* Column shedding for the board. * * The old rule was `max-width: 720px`, which the table never reached — below * 768px renderCards() takes over and there is no table to hide columns in. So * hide-sm was dead code, and every desktop narrower than ~1500px scrolled the * whole page sideways instead. See the COLUMNS comment in app.js. * * Written widest-first so the two rules compose: under 1200px both apply. */ @media (max-width: 1499px) { .hide-md { display: none; } } @media (max-width: 1199px) { .hide-sm { display: none; } } @media (max-width: 720px) { thead th { top: 150px; } } /* Inline "working on it" marker for the minter check, which takes ~30s. */ .spin { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spin { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════ PHONE LAYOUT — under 768px The table becomes a stack of cards. Momentum leads: mint progress and secondary velocity in front, score demoted to a chip, because a stalled drop holding a high score is the exact thing the Hot sort was rewritten to stop surfacing. Everything here is scoped inside the media query, so the desktop table is untouched. ═══════════════════════════════════════════════════════════════════════ */ /* Gap, not a shared border — the cards are separate objects now. */ .cds { display: flex; flex-direction: column; gap: 10px; } /* * A card, not a table row wearing a border-bottom. * * These were transparent with a single hairline underneath, so on a phone the * list read as one undifferentiated column and nothing said where one * collection ended and the next began. A surface of its own, a border and a * radius is what makes each entry an object you can act on — which matters now * that each one carries its own controls and can expand. */ .cd { /* A column, not a two-column grid. The old layout put EVERYTHING in the right-hand column, so the progress bar and stats inherited a 58px indent under the artwork — a sixth of a phone card spent on empty space. Now only the hero row shares a line with the art; the rest runs full width, starting where the artwork starts. */ display: flex; flex-direction: column; gap: 9px; padding: 13px; cursor: pointer; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); text-align: left; width: 100%; color: inherit; transition: border-color .15s ease, background-color .15s ease; } .cd:active { background: var(--bg-3); } .cd:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; } /* * Expanded. The whole card lifts, not just the chart panel inside it — an * accent drawn around the graph alone made the chart look like a separate * floating element rather than part of the collection it belongs to. */ .cd.is-open { border-color: var(--chart-sales); background: color-mix(in srgb, var(--chart-sales) 7%, var(--bg-2)); } @media (prefers-reduced-motion: reduce) { .cd { transition: none; } } .cd-art, .cd .thumb-ph { width: 46px; height: 46px; border-radius: calc(var(--radius) - 2px); object-fit: cover; background: var(--bg-3); border: 1px solid var(--line); flex: none; } .cd-hero { display: flex; gap: 12px; align-items: center; min-width: 0; } .cd-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; } .cd-body { min-width: 0; } /* legacy — the skeleton still uses it */ /* * Every control on this row centres on the collection name's FIRST LINE. * * They previously each grew their own tap target with a hand-picked negative * margin — star 44px/-11, the X 44px/-11, the social icons 30px/-6 — so their * visual centres landed 2px apart and the X-and-website pair sat noticeably * higher than the star and the close button. The row is flex-start aligned on * purpose (a name that wraps must stay top-aligned), which meant those * mismatched offsets showed. * * So the offsets are derived instead of guessed: each control declares only * how big its tap target must be, and the shared formula sizes it symmetrically * around one 20px line box. Every icon then occupies exactly that line box in * layout, and every centre lands on the same pixel — whatever tap size it asks * for, and whatever we add to this row next. */ /* --cd-row-gap separates the name / social pair / action icons across the row; --cd-pair-gap is the tight gap used INSIDE an icon pair. Both the 𝕏↔website social pair and the star↔✕ pair below read --cd-pair-gap, so they stay equal on every platform (see the .cd-hide rule). */ .cd-top { display: flex; align-items: flex-start; gap: var(--cd-row-gap); --icon-line: 20px; --cd-row-gap: 8px; --cd-pair-gap: 2px; } .cd-top .cd-star, .cd-top .cd-soc, .cd-top .cd-hide { box-sizing: content-box; height: var(--icon-line); min-height: 0; padding-block: calc((var(--tap) - var(--icon-line)) / 2); margin-block: calc((var(--icon-line) - var(--tap)) / 2); } .cd-top .cd-star { --tap: 44px; } .cd-top .cd-hide { --tap: 44px; } .cd-top .cd-soc { --tap: 30px; } /* * Star↔✕ spacing. Per the Director the gap between the star and the ✕ close * button must equal the gap between the 𝕏 (Twitter) and 🌐 (website) links in * the social pair. Both are driven off ONE token, --cd-pair-gap: the social pair * uses it as its flex `gap` (see .cd-social), and here the ✕ is pulled in so the * star↔✕ box gap collapses from the row gap down to that same value — * row gap + (pair − row) = pair. * Because it is the token, not a fixed pixel, the two pairs stay equal on every * platform automatically, including mobile where `html { zoom: .9 }` (≤640px) * scales the row gap, the pair gap and this margin together. The result is a * small POSITIVE gap (never an overlap), so the star and the ✕ stay independently * tappable at their full 44px targets. Structural replacement for an earlier * hard-coded -31px that was tuned to one desktop rendering and overlapped on * mobile. */ .cd-top .cd-hide { margin-left: calc(var(--cd-pair-gap) - var(--cd-row-gap)); } /* the social pair is a flex parent of its own; let its children carry the box */ .cd-top .cd-social { align-self: flex-start; } .cd-name { font-weight: 620; font-size: 15px; letter-spacing: -.01em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } /* 44px tap target, per WCAG — the desktop star is 23px and too small to hit. */ .cd-star { background: none; border: 0; cursor: pointer; color: var(--line-2); font-size: 19px; line-height: 1; flex: none; min-width: 44px; min-height: 44px; margin: -11px 0; display: grid; place-items: center; border-radius: 50%; } .cd-star.on { color: #f59e0b; } .cd-star:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -4px; } /* X and website, tucked between the name and the star. Small, dim until touched, and 30px tap targets so they are hittable without crowding. */ .cd-social { display: inline-flex; gap: var(--cd-pair-gap, 2px); flex: none; align-items: center; } .cd-soc { display: grid; place-items: center; min-width: 30px; min-height: 30px; margin: -6px 0; font-size: 14px; text-decoration: none; color: var(--dim); border-radius: 8px; line-height: 1; } .cd-soc:hover, .cd-soc:focus-visible { color: var(--text); background: var(--bg-3); outline: none; } .cd-status { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-top: 1px; } .cd-status.out { color: var(--good); } .cd-status.ing { color: var(--accent-2); } .cd-bar { height: 5px; background: var(--bg-3); border-radius: 999px; overflow: hidden; margin-top: 9px; } .cd-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .cd-bar.done i { background: var(--good); } .cd-head { display: flex; align-items: baseline; gap: 7px; margin-top: 7px; font-family: var(--mono); font-size: 11px; color: var(--muted); min-width: 0; } /* The supply figure is the part that may shrink; the percentage and the sales tag are short and must stay whole. Without this the row simply grew and the sales count was cut off past the right edge. */ .cd-head > .cd-of { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; } .cd-head > .cd-pct, .cd-head > .cd-velo { flex: none; } .cd-foot { min-width: 0; flex-wrap: wrap; } .cd-pct { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .cd-of { color: var(--dim); font-variant-numeric: tabular-nums; } .cd-velo { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--bad); font-variant-numeric: tabular-nums; white-space: nowrap; } .cd-velo.quiet { color: var(--dim); font-weight: 400; } /* * The card's spec strip. * * Four facts, each a dim micro-label above-left of a solid value, separated by * space rather than punctuation. Previously all four were the same grey text * at the same weight — "score 14 floor $0.19 minting since 1h last mint 45s * ago" — which reads as a sentence and has to be decoded word by word instead * of scanned. The label carries the meaning once; the value carries the eye. */ .cd-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 14px; margin-top: 9px; } .cd-stat { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); white-space: nowrap; min-width: 0; } .cd-stat i { font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); } .cd-stat b { font-size: 11.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } /* How old the floor beside it is. Deliberately quieter than the price and not coloured: the age is a qualifier on the number, not a warning about it, and a red "3h ago" would read as an error when it is simply a fact about how often OpenSea can be asked. Reuses --dim, the same weight the labels use. */ .cd-stat em.cd-age { font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--dim); margin-left: 1px; } /* The dated dot on the desktop Floor column — the muted counterpart to .live-dot, carrying its age in the tooltip since the column has no room. */ .floor-age { font-style: normal; margin-left: 5px; color: var(--dim); cursor: help; } /* Score keeps the same three bands as the desktop column, so a glance at the colour says as much as reading the number. */ .cd-stat.sc-hi b { color: var(--good); } .cd-stat.sc-mid b { color: var(--warn); } .cd-stat.sc-lo b { color: var(--muted); } .cd-hidden { padding: 12px 4px; font-size: 12px; color: var(--dim); } /* The way back from a hide. Sits above the list so it is reachable on a phone without scrolling past every row, and reads as an active offer rather than a dim footnote — it is the only undo once the message box has been replaced. */ .hidden-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; /* Top margin, not just bottom: on desktop this lands directly under the filter bar and without it the two borders sit flush and read as one broken control. */ margin: 12px 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; color: var(--fg); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); } .hidden-bar a { font-weight: 600; text-decoration: underline; } /* Respect the OS setting on the sheet and the live dot, not just the spinner. */ @media (prefers-reduced-motion: reduce) { aside, .scrim { transition: none !important; } .dot.live { animation: none !important; } } /* Live feed. This lives here, ABOVE the breakpoint, because the phone rule that stacks it has the same specificity — declared afterwards it would win everywhere. */ /* * ONE column, because there is one tape. It ran three side by side — mints, * milestones and the live listing tape — and the last two have been removed * from the feed. Leaving `repeat(3, 1fr)` behind would have parked the mints * in the left third and left two thirds of the page blank, which is exactly * the hole the removal was supposed to close. The mint rows themselves are * untouched: same markup, same classes, same arrival animation — this only * says how many columns the grid has, and a single full-width feed column is * already what every reader under 720px has always seen. */ .feedgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; } /* * The arrival highlight. One pass of light that peaks as the row settles and * is gone a beat later — enough to catch the eye mid-scan, not enough to leave * the tape looking decorated. Colour comes from the accent so it belongs to * the product rather than reading as a generic "new" badge, and it rides a * pseudo-element so it can never disturb the row's own layout or hit-testing. */ .feedrow { position: relative; } .feed-arrive::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent) 0%, color-mix(in srgb, var(--accent) 6%, transparent) 45%, transparent 78%); animation: feedArrive 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes feedArrive { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .feed-arrive::after { animation: none; opacity: 0; } } /* The panel's theme switcher is phone-only; the header keeps its own. Same ordering trap: this must precede the breakpoint that reveals it. */ .ctrl-theme { display: none; } /* ── hamburger (phone only; hidden on desktop below) ────────────────────── */ .hamb { display: none; position: relative; width: 44px; height: 44px; flex: none; background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .hamb span { display: block; width: 17px; height: 2px; background: var(--text); border-radius: 2px; } .hamb:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } .hamb-n[hidden] { display: none; } .hamb-n { position: absolute; top: -5px; right: -5px; background: var(--accent); color: var(--bg); font-family: var(--mono); font-size: 10px; font-weight: 700; font-style: normal; min-width: 17px; height: 17px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; } .ctrl-head, .ctrl-close { display: none; } .ctrl-scrim { display: none; } /* ═══════════════════════════════════════════════════════════════════════ HOLDER GATE — /login One card, centred, no chrome. Sized in clamp() and vw so it needs no breakpoint of its own; it must sit ABOVE the phone media query below, or those rules could not override it at equal specificity. ═══════════════════════════════════════════════════════════════════════ */ .gate-body { min-height: 100dvh; /* dvh, so mobile browser chrome cannot clip it */ display: grid; place-items: center; padding: 24px 20px; background: var(--bg); } .gate { width: 100%; max-width: 380px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; } .gate-mark { width: 64px; height: 64px; display: block; margin: 0 auto; } .gate h1 { margin: 0; font-family: var(--head-font); font-size: clamp(20px, 5.5vw, 25px); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; color: var(--text); } .gate-sub { margin: -6px 0 4px; font-size: 13.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; } .gate-btn { width: 100%; /* 48px: the minimum comfortable touch target, and this is the only control on the page — nothing here is worth making anyone aim for. */ min-height: 48px; /* Centres the label whether this is a