/* Coinyapper — one stylesheet, no build step.
*
* Cache-busted by ?v={{ css_version }} (md5 of this file, see app/templates.py),
* so it can be served with a long max-age and still update instantly.
*
* Light and dark are both defined here via prefers-color-scheme. There is no
* theme toggle: it would need either a cookie read on every render or a flash of
* the wrong theme on first paint, and neither is worth it yet.
*
* The look, stated once so it does not drift. This is a site about assets people
* lose money on, and the design's whole job is to be *believed*. So: neutral
* surfaces, hairline borders, no gradients, nothing that looks like a trading
* terminal pretending to be exciting. Every figure a reader will compare against
* another figure is set in a tabular mono face, because a column of prices is a
* table of claims and should read like a document.
*
* **The reactions are the one exception, and it is an exception about subject
* matter rather than a relaxation.** They hold no figures — they are people
* arriving — so nothing there can be disbelieved on the strength of looking
* exciting, and being visibly alive is most of what they are for. So the rooms
* get the movement and the glow (--flash, --glow) and nothing else on the site
* does: not a price, not a change, not a market cap, not a counter. If a rule
* here has to bend for something carrying a number, the answer is no.
*
* Colour is spent on four things and nothing else: what you can click, whether
* a number went up or down, the emoji — which are the only genuinely colourful
* thing on the page and should stay that way — and the mark, which is a boy
* mid-yell in a cap whose head is the coin, and is therefore made of gold and
* green rather than of anything else here. That green is a lime, held two hue
* families away from --up's blue-green on purpose: green already means a number
* went up, and the only reason the mark may borrow the family at all is that it
* is the one element on this site with no figure anywhere near it. The --mark-*
* tokens and --beak, his tongue, appear in the logo and nowhere else. A second
* use of any of them makes the mark's palette into a page accent, and then the
* page has two accents fighting; spend --accent.
*
* The up/down pair is green/red because that convention is universal in this
* subject and fighting it would cost comprehension for no gain — but both are
* desaturated well below the usual, and neither is ever the *only* carrier of
* meaning: every percentage is signed with a real + or −, so the sign survives
* for a reader who cannot separate the hues.
*/
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/static/fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('/static/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* --- tokens -------------------------------------------------------------- */
:root {
--bg: #fbfbfa;
--surface: #ffffff;
--surface-2: #f4f4f2;
--text: #16181d;
--text-dim: #5d6470;
--text-faint: #8b929e;
--line: #e3e4e2;
--line-strong: #cbcdc9;
--accent: #1f6feb;
--accent-dim: #dbe7fb;
--beak: #f0872b;
/* The mark, and nowhere else. It is a boy mid-yell, so it is not made of the page's
palette and cannot be: the face IS a coin, so it is gold, and the teeth and
eye-glints are the only light in it. Naming them as tokens rather than
hard-coding them into base.html is only so the nav copy and the favicon can
drift apart per theme without a second SVG. */
--mark-coin: #f6b73c;
--mark-coin-edge: #dd9422;
--mark-light: #fdf3de;
--mark-ink: #2b2016;
/* Green is the one hue this page had already given a job: --up. The cap gets
it anyway because the logo is the only element here with no figure beside
it — nothing next to the mark can be misread as "this went up". The lime is
what keeps that true, so keep the distance if it is ever retuned: a cap
drifting toward --up's #16794a is the bug, not a shade preference. */
--mark-cap: #52a02a;
--mark-cap-band: #3c7a1c;
/* Spent only on a reaction as it lands — see the note at the top of this
file on where colour goes. Every figure on the page stays flat. */
--flash: rgba(31, 111, 235, .16);
--glow: rgba(31, 111, 235, .30);
--up: #16794a;
--down: #b23132;
--danger: #b23132;
--radius: 10px;
/* The sticky header's own height. It is a token because two other things have
to agree with it: `nav` sets its `min-height` from this, and every sticky
offset below the header is measured from it. The room rail sticks *under* a
header that also sticks, and getting that offset wrong hides the top of the
rail behind it — which, now that the feed's newest reaction is its first
row, is the one row somebody came to the front page to see. */
--nav-h: 60px;
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--wrap: 1120px;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0e1013;
--surface: #16191e;
--surface-2: #1c2027;
--text: #e8eaed;
--text-dim: #a0a7b4;
--text-faint: #767d8a;
--line: #262b33;
--line-strong: #363d47;
--accent: #62a0ff;
--accent-dim: #17243a;
--beak: #ffa64d;
--mark-coin: #ffc24d;
--mark-coin-edge: #e8a02c;
--mark-light: #fff5e2;
--mark-ink: #23190e;
--mark-cap: #6fbe3c;
--mark-cap-band: #55992c;
--flash: rgba(98, 160, 255, .18);
--glow: rgba(98, 160, 255, .45);
--up: #4cc38a;
--down: #ef6f6f;
--danger: #ef6f6f;
}
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono, .mono-input, code { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-dim); }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--text-dim); }
/* --- nav ----------------------------------------------------------------- */
header {
border-bottom: 1px solid var(--line);
background: var(--surface);
position: sticky; top: 0; z-index: 40;
}
nav {
max-width: var(--wrap);
margin: 0 auto;
padding: 0 20px;
display: flex; align-items: center; gap: 20px;
min-height: var(--nav-h);
}
.logo { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 700; }
.logo:hover { text-decoration: none; }
/* The mark brings its own ground — a filled circle — so this rule only reserves
* the box. Anything set here that the SVG also sets (a background, a radius) is
* a second mark behind the first one. */
.logo-mark { width: 1.85rem; height: 1.85rem; flex: none; }
.logo-mark svg { display: block; width: 100%; height: 100%; }
.logo-text { letter-spacing: -.015em; }
.nav-search { position: relative; flex: 1; max-width: 340px; }
.nav-search input {
width: 100%; padding: 7px 12px;
border: 1px solid var(--line-strong); border-radius: 8px;
background: var(--bg); color: var(--text); font: inherit; font-size: .9rem;
}
.nav-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.suggestions {
position: absolute; top: calc(100% + 5px); left: 0; right: 0;
background: var(--surface); border: 1px solid var(--line);
border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.10);
overflow: hidden; z-index: 50;
}
.suggestion { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--text); font-size: .9rem; }
.suggestion:hover { background: var(--surface-2); text-decoration: none; }
.suggestion .mono { font-weight: 600; min-width: 62px; }
.suggestion-name { color: var(--text-dim); flex: 1; }
#nav-menu { list-style: none; display: flex; align-items: center; gap: 18px; margin: 0 0 0 auto; padding: 0; }
#nav-menu a { color: var(--text-dim); font-size: .92rem; font-weight: 500; }
#nav-menu a:hover, #nav-menu a.active { color: var(--text); text-decoration: none; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); margin: 4px 0; }
.nav-dd { position: relative; }
.nav-avatar-btn { background: none; border: 0; cursor: pointer; padding: 0; }
.nav-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: var(--surface-2); border: 1px solid var(--line-strong);
display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: var(--text-dim);
}
.nav-dd-panel {
display: none; position: absolute; right: 0; top: calc(100% + 9px);
min-width: 220px; background: var(--surface);
border: 1px solid var(--line); border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 6px; z-index: 50;
}
.nav-dd.open .nav-dd-panel { display: block; }
.nav-dd-head { padding: 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 5px; }
.nav-dd-head strong { display: block; font-size: .9rem; }
.nav-dd-head span { display: block; font-size: .78rem; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; }
.nav-dd-panel a, .nav-dd-form button {
display: block; width: 100%; text-align: left;
padding: 7px 10px; border-radius: 6px; border: 0; background: none;
color: var(--text-dim); font: inherit; font-size: .9rem; cursor: pointer;
}
.nav-dd-panel a:hover, .nav-dd-form button:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-inline-form { display: inline; }
.link-button { background: none; border: 0; color: var(--accent); font: inherit; font-size: .92rem; cursor: pointer; padding: 0; }
@media (max-width: 800px) {
.nav-toggle { display: block; order: 3; margin-left: auto; }
.nav-search { order: 4; flex-basis: 100%; max-width: none; margin-bottom: 12px; }
#nav-menu {
order: 5; flex-basis: 100%; margin: 0 0 12px; display: none;
flex-direction: column; align-items: flex-start; gap: 12px;
}
nav { flex-wrap: wrap; padding-top: 12px; }
nav.menu-open #nav-menu { display: flex; }
.nav-dd-panel { position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; }
}
/* --- layout -------------------------------------------------------------- */
main { max-width: var(--wrap); margin: 0 auto; padding: 32px 20px 64px; }
section { margin-bottom: 44px; }
.narrow { max-width: 680px; }
h1 { font-size: 1.85rem; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 8px; }
h2 { font-size: 1.15rem; letter-spacing: -.01em; margin: 0 0 6px; }
.hero { margin-bottom: 40px; }
.hero h1 { font-size: 2.3rem; }
.lede { font-size: 1.05rem; color: var(--text-dim); max-width: 62ch; margin: 0; }
.section-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.section-head h1, .section-head h2 { margin: 0; }
.section-sub { color: var(--text-dim); font-size: .9rem; margin: 0; flex: 1 1 100%; }
.page-head { display: block; margin-bottom: 24px; }
.page-head .section-sub { max-width: 68ch; margin-top: 6px; }
.section-more { font-size: .85rem; margin-left: auto; }
.notice { background: var(--accent-dim); border: 1px solid var(--accent); color: var(--text); padding: 10px 14px; border-radius: 8px; font-size: .9rem; }
.form-error { background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid var(--danger); color: var(--text); padding: 10px 14px; border-radius: 8px; font-size: .9rem; }
.empty-state { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 32px; text-align: center; }
.empty-state h1, .empty-state h2 { margin-bottom: 8px; }
.empty-state p { color: var(--text-dim); margin: 0 auto; max-width: 54ch; }
/* --- coin cards ---------------------------------------------------------- */
.coin-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
/* Up today and down today, beside each other once there is width for it. They
are the same question asked both ways up, and reading one under the other
meant scrolling past eight rising coins to find out what fell — on a page
whose subject is what moved today, the two halves of that answer belong in
one glance.
`auto-fit`, not `auto-fill`: either section is omitted entirely on a quiet
day (see the `{% if %}` around each in index.html), and the survivor should
take the whole width rather than sit in a half-width column beside a hole. */
@media (min-width: 900px) {
.day-pair { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; margin-bottom: 44px; }
/* The 44px every section carries is vertical rhythm between stacked
sections; side by side it is the taller column's trailing whitespace, and
the pair itself now carries it instead. */
.day-pair > section { margin-bottom: 0; }
}
.coin-card {
display: block; padding: 14px 16px;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); color: var(--text);
}
.coin-card:hover { border-color: var(--line-strong); text-decoration: none; }
/* A written-up coin is marked. A card that looks the same either way teaches a
reader that the site's own writing is not worth seeking out. */
.coin-card-head { display: flex; align-items: baseline; gap: 8px; }
/* The coin's logo, mirrored locally and served from /icons — never hotlinked
from the provider. See services/icons.py; the template is
partials/coin_icon.html.
`align-self: center` rather than switching the two containers to
`align-items: center`: the symbol and the name are still baseline-aligned to
each other, which is what makes a ticker and a name read as one line, and an
image has no useful baseline of its own — left alone it would sit its bottom
edge on the text baseline and push the whole row down.
The box is sized by the `width`/`height` attributes the macro writes, so the
space is reserved before the image lands and forty of them do not reflow the
page one at a time. `object-fit: contain` is for the handful of logos that
are not square; `background` gives a transparent PNG something to sit on in
dark mode, where a black-on-transparent logo would otherwise vanish. */
.coin-icon {
flex: 0 0 auto; align-self: center;
object-fit: contain; border-radius: 50%;
background: var(--surface-2);
}
/* No logo yet — a letter from the coin's own ticker. Deliberately not a shared
placeholder glyph: this is drawn on every coin the fetch pass has not reached,
which early on is most of the catalog, and a grid of identical grey circles
says less than nothing. Same box as the image, so the two states are
interchangeable without moving anything. */
.coin-icon-none {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--mono); font-weight: 600; line-height: 1;
color: var(--text-faint); border: 1px solid var(--line);
background: var(--surface-2);
}
.coin-symbol { font-family: var(--mono); font-weight: 600; font-size: .85rem; color: var(--text); }
.coin-symbol.big { font-size: 1rem; color: var(--text-dim); }
.coin-name { color: var(--text-dim); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin-card-line { margin: 6px 0 10px; font-size: .92rem; line-height: 1.45; }
.coin-card-line.muted { font-size: .85rem; }
.coin-card-figures { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: .8rem; font-variant-numeric: tabular-nums; }
.coin-card-figures .figure.muted, .coin-card-figures .reactions { color: var(--text-faint); }
/* Bull votes are a count, not a price move, so they get the up colour but not
the weight of one — a card should not read as though the site is calling a
coin green. */
.coin-card-figures .figure.bulls { color: var(--up); opacity: .85; }
/* --- coin page ----------------------------------------------------------- */
.coin-page { max-width: 760px; }
.coin-head { margin-bottom: 20px; }
.coin-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.byline { color: var(--text-faint); font-size: .85rem; margin: 6px 0 0; }
.market { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.market-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; margin: 0; }
.market-figures div { margin: 0; }
.market-figures dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.market-figures dd { margin: 2px 0 0; font-size: 1rem; font-weight: 600; }
/* Now only the "no market data yet" line; the per-figure provenance line was
removed from the coin page by request. */
.market-age { color: var(--text-faint); font-size: .8rem; margin: 14px 0 0; }
.contract { margin: 10px 0 0; font-size: .78rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.contract-label { text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-size: .7rem; }
.contract code { color: var(--text-dim); word-break: break-all; }
/* --- the ingested profile -------------------------------------------------
Replaced the article block. The quote is visually set apart from everything
else on the page on purpose: it is the only text here this site did not
write, and a reader has to be able to see that at a glance rather than by
reading the caption. */
.profile { margin-top: 28px; }
/* The composed summary. Set as body text, not as a quote: this is the site
speaking, and the blockquote below it is not. */
.profile-summary { font-size: 1.02rem; line-height: 1.7; margin: 0 0 22px; max-width: 62ch; }
.coin-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }
/* Every one of these is a link now — see the note in coin.html. They keep the
quiet pill they had as inert labels rather than taking the accent: a header
with four blue pills under the coin's name would compete with the name, and
these are a classification rather than a call to action. The border moving on
hover is what says they are clickable. */
.tag { display: inline-block; font-size: .72rem; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
a.tag:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.profile-quote { margin: 0 0 24px; border-left: 3px solid var(--line-strong); padding-left: 18px; }
.profile-quote blockquote { margin: 0; color: var(--text-dim); }
.profile-quote figcaption { margin-top: 10px; font-size: .78rem; color: var(--text-faint); }
.profile-supply { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin: 0 0 24px; }
.profile-supply div { margin: 0; }
.profile-supply dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.profile-supply dd { margin: 2px 0 0; font-size: 1rem; font-weight: 600; }
.profile-links h2 { font-size: 1rem; margin: 0 0 10px; }
.profile-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.profile-links li { display: inline-flex; align-items: center; gap: 6px; }
.profile-link { font-size: .88rem; border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px; text-decoration: none; color: var(--text); background: var(--surface); }
.profile-link:hover { border-color: var(--accent); background: var(--accent-dim); }
/* A dead link stays clickable. The claim is "this did not answer when we
checked", not "we have decided this is gone" — and a reader is entitled to
go and find out for themselves. */
.profile-link.dead { color: var(--text-faint); border-style: dashed; text-decoration: line-through; }
.link-dead { font-size: .72rem; color: var(--danger); }
.profile-checked { color: var(--text-faint); font-size: .78rem; margin: 12px 0 0; }
/* The supply block's date. Same typography as .profile-checked above — both are
a caption saying when a borrowed number was read — but its own margins,
because it sits under a dl that already carries 24px of bottom margin and a
caption 36px from the figures it dates reads as unrelated to them. */
.profile-supply-age { color: var(--text-faint); font-size: .78rem; margin: -14px 0 24px; }
.profile-pending { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 22px; }
.profile-pending h2 { margin-bottom: 8px; font-size: 1.05rem; }
.profile-pending p { color: var(--text-dim); font-size: .92rem; max-width: 58ch; }
/* --- pager ----------------------------------------------------------------
Real links, one per page, because each one is a URL a crawler can reach and a
reader can bookmark — which a "load more" button is not. */
.pager { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 28px; justify-content: center; }
.pager-page, .pager-step { font-size: .88rem; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--text-dim); background: var(--surface); }
.pager-page:hover, .pager-step:hover { border-color: var(--accent); color: var(--text); }
.pager-page.current { background: var(--accent-dim); border-color: var(--accent); color: var(--text); font-weight: 600; }
.pager-gap { color: var(--text-faint); padding: 0 2px; }
/* --- prose --------------------------------------------------------------- */
.prose { font-size: 1.02rem; line-height: 1.72; }
.prose h2 { font-size: 1.3rem; margin: 32px 0 10px; }
.prose h3 { font-size: 1.08rem; margin: 24px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose blockquote {
margin: 0 0 16px; padding: 2px 0 2px 16px;
border-left: 3px solid var(--line-strong); color: var(--text-dim);
}
.prose code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: .88em; }
/* --- signals ------------------------------------------------------------- */
.signal-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 20px 0; }
.signal-bar form { margin: 0; }
.signal-btn {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 999px;
background: var(--surface); color: var(--text-dim);
font: inherit; font-size: .86rem; cursor: pointer;
}
.signal-btn:hover { border-color: var(--accent); color: var(--text); }
.signal-btn.on { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
.signal-btn b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .8rem; }
/* A drawn bull and bear rather than 🐂 / 🐻 — see the note in signal_bar.html on
why the animal was never the problem and the glyph was. Coloured with the
up/down pair, because direction is most of what the mark says; the word beside
it carries the meaning for anyone who cannot separate the hues.
`currentColor` on the stroke is what makes the two rules below enough: the
icon takes the button's colour, including the dim resting colour and the
brighter `:hover` and `.on` states, so there is no second set of states to
keep in step. The ledger has no rule and therefore no tint — a watchlist has
no direction. */
.signal-icon { width: 17px; height: 17px; flex: 0 0 auto; }
.signal-bull .signal-icon { color: var(--up); }
.signal-bear .signal-icon { color: var(--down); }
.signal-flag { margin-left: auto; font-size: .82rem; color: var(--text-faint); }
/* --- the two-column layouts ----------------------------------------------
Content left, room right, on anything wide enough to spare 340px. The room
is the half of this site that moves; below a long page it was only ever seen
by someone who had finished reading.
One DOM order serves both layouts. On a narrow screen these collapse to a
flex column — and the home page's rail takes `order: -1` so the feed stays
above the coin lists, which is the position it is supposed to hold at every
width. The coin page keeps source order instead: there, the market figures
and the profile are what the visitor came for and the room follows them. */
.coin-layout, .home-layout { display: flex; flex-direction: column; gap: 28px; }
.home-layout > .room-rail { order: -1; }
@media (min-width: 1040px) {
.coin-layout, .home-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
align-items: start;
gap: 32px;
}
.home-layout > .room-rail { order: 0; }
/* Pinned, so the room stays on screen for the whole scroll. `align-self:
start` is what makes sticky work inside a grid — a stretched item is
already as tall as the row and has nothing to stick within. */
/* Under the header, not behind it: `--nav-h` plus its bottom hairline plus the
same 16px of air the rail would have had on its own. `top: 16px` measured
from the viewport, so the first 45px of the rail sat beneath a header that
is opaque and `z-index: 40`. On a coin page that hid the heading and the
tally, which is why it went unnoticed for so long. */
.room-rail { position: sticky; top: calc(var(--nav-h) + 17px); }
/* The feed has no height rule here any more, because it has no box: it is a
plain list of `chat.FEED_LIMIT` rows that ends where it ends. The clamp that
used to live here existed to keep a *scrolling* box from hanging its bottom
— where the newest reaction was — off the bottom of a pinned rail. Newest
first removes the reason: what hangs off a short window now is the oldest
rows, and the sticky rail keeps the ones that matter on screen for the whole
scroll. */
/* The reading column no longer needs its own cap: the grid track is the
measure now, and 760px inside a 1fr track would leave a ragged gap. */
.coin-page { max-width: none; }
}
/* --- the rooms -----------------------------------------------------------
The one part of this site that is allowed to be loud, and the restraint
everywhere else is what pays for it. Everything holding a *figure* stays
flat — a price in a box that flashes is a price nobody believes. The
reactions carry no figures: they are people, arriving, and the emoji are
already the only colour on the page (see the note at the top of this file),
so the flash is spent on them and on nothing else.
Which is also why the room has no frame any more. A bordered, filled panel
with a bordered, filled box inside it drew a *chat widget* — a thing bolted
onto the page whose first-class visual feature was its own edge. Two borders
removed and it reads as part of the page, with the emoji doing the work the
chrome was doing badly. The scroll region is bounded by a fade rather than a
line, so nothing draws where the box stops. */
.room .section-head, .feed .section-head { margin-bottom: 10px; }
/* A live indicator on the heading, because the box no longer has an edge to
say "this moves". Cheap in every sense: one pseudo-element, no markup, and it
is the only pulsing thing on the site. */
.room .section-head h2, .feed .section-head h2 { display: flex; align-items: center; gap: 9px; }
.room .section-head h2::before, .feed .section-head h2::before {
content: ""; flex: 0 0 auto;
width: 8px; height: 8px; border-radius: 50%;
background: var(--up); box-shadow: 0 0 0 0 var(--glow);
animation: room-live 2.4s ease-out infinite;
}
@keyframes room-live {
0% { box-shadow: 0 0 0 0 var(--glow); }
70% { box-shadow: 0 0 0 7px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* Where the front page says what it cannot do: there is no picker under the
feed, so the space one would have taken says where to react instead. A dead
end is worse than a signpost. */
.feed-note { margin: 12px 0 0; font-size: .82rem; color: var(--text-faint); line-height: 1.5; }
/* The standing tally. Pills without borders: sixteen hairline boxes above a
frameless strip only move the chrome one row up the panel. */
.chat-summary { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chat-tally {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 9px 3px 7px; border-radius: 999px;
background: var(--surface-2); font-size: 1.15rem; line-height: 1.2;
}
.chat-tally b { font-family: var(--mono); font-size: .74rem; color: var(--text-dim); font-weight: 600; }
/* A vertical feed, newest at the bottom — a chat, not a ticker.
It used to be a horizontal strip, on the reasoning that emoji have no reading
order and a vertical list owns the screen. In a 340px rail that trade goes
the other way: the column has height to spend and no width, and arrivals
stacking downward is the shape everyone already reads as "live".
**The mask is what replaces the border.** Rows fade out at the top edge
instead of being cut off by a line, which says "there is more above" more
honestly than a frame does and lets the strip sit straight on the page
background. There is deliberately no fade at the bottom: the newest reaction
lives there and is the one row that must always be fully legible. */
.chat-strip {
display: flex; flex-direction: column; gap: 2px;
/* **Both axes stated, and `hidden` on x is the load-bearing half.**
`overflow-y: auto` on its own computes x to `auto` too, which makes this a
scroll container in *both* directions — and a transform contributes to a
scroll container's overflow region, so the arrival pop could put a
horizontal scrollbar across the bottom of the room for the length of the
animation and take it away again. Nothing in a row is meant to scroll
sideways: the sender's name ellipsises to fit, by design. */
overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain;
/* And the vertical gutter is reserved whether or not there is a scrollbar, so
a room crossing the overflow threshold — which is what sending the reaction
that fills the box does — does not reflow every row by the width of one. */
scrollbar-gutter: stable;
/* The bottom padding is not decoration: it is what the arrival keyframe rises
*through*. A reaction animating in from 10px below its resting place grows
the scrollable area unless there is padding under it to move inside, and a
scroll area that grows for 400ms is a scrollbar that blinks. Keep this
larger than the keyframe's translate. */
padding: 10px 0 12px; height: 340px;
scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px, #000 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 34px, #000 100%);
}
/* Few enough reactions to fit and they sit at the *bottom*, where the scrolled
state puts them — so a room filling up does not move its newest row from the
top of the box to the bottom of it. Resolves to 0 the moment the content
overflows, so it cannot fight the scrolling. */
.chat-strip > *:first-child { margin-top: auto; }
/* The feed is not a box and must not be one. A scrollable panel halfway down the
front page catches the wheel on the way past and scrolls its own forty rows
instead of the page — the reader's scroll goes somewhere they did not aim it,
and `overscroll-behavior: contain` below means it does not chain back out
either. So: no height, no overflow, no gutter, and no fade, since there is no
longer an edge for content to be cut off at. Newest at the top, which is what
makes a list with no scrollbar work at all — see partials/chat_strip.html. */
.feed .chat-strip {
height: auto; padding: 2px 0 0;
scrollbar-gutter: auto;
-webkit-mask-image: none; mask-image: none;
/* Bounded by the window, and `clip` rather than `auto` or `hidden`.
The list has to fit beside the coin lists in a rail that sticks under the
header, because a sticky panel taller than the viewport hangs its bottom
off the screen *and* runs out of travel inside its grid area early — after
which it rides up and off the top, taking the newest reactions with it. A
733px rail in an 820px window ran out after 392px of a 880px scroll, so for
most of the front page the top row on screen was not the newest one. That is
what "the newest is not at the top" looked like.
`clip` is what keeps that from re-introducing the wheel trap: it bounds the
box without making it a scroll container at all, so there is nothing to
catch a scroll and no scrollbar to appear. What falls outside is the oldest
end of a list whose newest row is its first, which is the right thing to
lose. The subtrahend is the rest of the rail — sticky offset, heading, tally
and note — measured at 205px plus slack. */
max-height: calc(100vh - var(--nav-h) - 225px);
/* And snapped down to a whole number of rows, so the clip lands between two
reactions instead of through the middle of one. 44px is a row: 42 plus the
2px gap. Declared after the plain `calc` above, so a browser without
`round()` drops this line and keeps the unsnapped bound — the fallback is a
half-row, not a broken layout. */
max-height: round(down, calc(100vh - var(--nav-h) - 225px), 44px);
overflow: clip;
}
.chat-item, .chat-ghost {
display: flex; align-items: center; gap: 10px;
flex: 0 0 auto; padding: 4px 8px; border-radius: 10px;
}
/* In the feed every row is a link to the coin it came from. Styled as a row
rather than as a link — an underlined blue line per reaction would turn the
rail into a wall of chrome — with the hover doing the work of saying so. */
a.chat-item { color: inherit; text-decoration: none; transition: background .12s ease; }
a.chat-item:hover, a.chat-item:focus-visible { background: var(--surface-2); }
/* The emoji is the content. Everything else on the row is a caption for it, so
it is set several times their size and is the only thing that ever glows. */
.chat-emoji {
/* `inline-block` is load-bearing, not tidiness: a transform does not apply to
a non-replaced *inline* element, so the arrival keyframes below animated
nothing but opacity while this was a bare span — which is why the old pop
never looked like one. */
display: inline-block; font-size: 1.85rem; line-height: 1.15;
}
/* The ticker the reaction was sent about, and the reason the feed is worth
reading at all: an emoji with nothing beside it is a reaction to nothing.
Given the room the sender's name gives up — `min-width: 0` on the flex child
is what lets the name ellipsis instead of squeezing this. */
.chat-ticker {
font-family: var(--mono); font-size: .74rem; font-weight: 600;
color: var(--text); flex: 0 0 auto;
}
.chat-sender { font-size: .72rem; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chat-empty { color: var(--text-faint); font-size: .88rem; padding: 4px 8px; margin: auto 0; }
/* Arrivals. Applied by the hook in base.html to items that were not on the page
before the swap, and removed again once it has played — so a reaction that
arrives while you are watching lands with some weight, and the forty
server-rendered ones on first paint do not all fire at once. */
@keyframes chat-arrive {
/* 10px, against the strip's 12px of bottom padding — see the note there. */
from { opacity: 0; transform: translateY(10px) scale(.55); }
55% { opacity: 1; transform: translateY(0) scale(1.22); }
to { opacity: 1; transform: none; }
}
/* The row behind it, lit for a beat. It ends on `transparent` rather than on a
surface colour so it leaves nothing behind — the row has no background of its
own to return to. */
@keyframes chat-flash {
from { background: var(--flash); }
to { background: transparent; }
}
@keyframes chat-glow {
from { filter: drop-shadow(0 0 12px var(--glow)); }
to { filter: none; }
}
.chat-item.is-new { animation: chat-flash .9s ease-out; }
.chat-item.is-new .chat-emoji {
animation: chat-arrive .42s cubic-bezier(.2, .9, .3, 1.6), chat-glow .9s ease-out;
}
/* Your own reaction, echoed locally the instant you click rather than waiting
for the next poll to bring it back. Deliberately dimmed: it is not in the
database yet, and it is replaced by the real row a beat later. Not a
`.chat-item` — the poll cursor reads the last `.chat-item[data-id]`, and a
ghost in that list would reset the cursor to 0 and re-send the entire tail. */
.chat-ghost { opacity: .45; }
.chat-ghost .chat-emoji { animation: chat-arrive .34s ease-out; }
@media (prefers-reduced-motion: reduce) {
.chat-item.is-new, .chat-item.is-new .chat-emoji, .chat-ghost .chat-emoji,
.room .section-head h2::before, .feed .section-head h2::before { animation: none; }
}
/* The picker. Frameless like the strip: sixteen bordered boxes under a strip
with no border is the chrome coming back in through the bottom of the panel.
The hover lift is the affordance the border was carrying, and
`:focus-visible` is what keeps that honest for a keyboard — a button whose
only "I am a button" is a mouse hover is not a button for everybody. */
/* The picker reserves a strip at its top for the refusal to appear in, at every
state, whether or not there is one. That strip is why a refusal no longer
moves anything: the countdown is positioned into space that was already
there, the buttons stay exactly where they were, and the panel keeps its
height. `margin-top` gives back most of what the padding takes, so the gap
between the reactions and the buttons is what it was. */
.picker { position: relative; margin-top: 12px; }
/* And the strip is reserved only where a refusal can actually land, which is
exactly where there is an account: `data-me` is set on the signed-in arm and
nowhere else. Signed out there is nothing to hold space for. */
.picker[data-me] { margin-top: 4px; padding-top: 22px; }
.picker-groups { display: flex; gap: 16px; flex-wrap: wrap; }
.picker-group { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.picker-heading { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-right: 2px; }
.emoji-btn {
background: none; border: 0; border-radius: 12px; cursor: pointer;
font-size: 1.7rem; line-height: 1; padding: 5px 6px;
transition: transform .12s cubic-bezier(.2, .9, .3, 1.5), background .12s ease, filter .12s ease;
}
.emoji-btn:hover {
background: var(--surface-2); transform: translateY(-3px) scale(1.16);
filter: drop-shadow(0 0 9px var(--glow));
}
.emoji-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface-2); }
.emoji-btn:active { transform: translateY(0) scale(.92); }
/* Cooling down. The hover rules match a disabled button too — `:hover` does not
care — so each one has to be put back, or a refused picker still lifts and
glows under the cursor and reads as clickable. */
.emoji-btn:disabled { opacity: .28; cursor: default; }
.emoji-btn:disabled:hover {
transform: none; filter: none; background: none;
}
@media (prefers-reduced-motion: reduce) {
.emoji-btn { transition: background .12s ease; }
.emoji-btn:hover { transform: none; filter: none; }
}
.picker-signin, .picker-refused { color: var(--text-dim); font-size: .9rem; margin: 0; }
/* `.picker-signin` is a div wrapping either a