—
rows you read, with their own buttons inside them. A row that flinched
because a thumb landed on it mid-scroll would be noise, which is the same
reason the cards are not in this block. */
/* Each letter of the nameplate tips under a pointer; on a phone the one you
actually touch tips. The rest of the word is left alone. */
.ink-block .huge .ltr:active { transform: translateY(-10%) rotate(-5deg) scale(1.06); color: var(--pop); }
/* The transition has to be quick enough to be seen at all: a finger is down
for a fraction of a second, and a 200ms ease would still be animating
when it lifts. */
.btn, .chip, .topbar nav a, .me-chip, .ink-block .huge .ltr {
transition-duration: 90ms;
}
}
/* Reduced motion means no press animation either — the colour change on its
own is still an acknowledgement, and it is the part that carries meaning. */
@media (prefers-reduced-motion: reduce) {
.btn:active, .chip:active, .topbar nav a:active, .me-chip:active, .me-chip:active .av,
.ticker a.tk:active, .av-ring:active, .ink-block .huge .ltr:active {
transform: none !important;
}
}
/* ======================================================================
LOADING: a shape, not a sentence
Every panel on the site used to say "Loading…" in muted type while its
data arrived. On a fast connection that is a flash of the word "Loading";
on a slow one it is a paragraph-shaped hole, and on a dead one it is
indistinguishable from a panel that has quietly broken. Worse, the page
reflows the moment the real content lands, so the thing you were about to
tap moves.
A skeleton fixes all three: it occupies the shape the content will occupy,
it is obviously a placeholder rather than a result, and it is visibly
alive. The sweep is the only motion — no pulse, because a panel that
breathes next to a panel that does not reads as a fault.
====================================================================== */
.skel {
--skel-ink: color-mix(in srgb, var(--ink) 11%, transparent);
position: relative; overflow: hidden; border-radius: 8px;
background: var(--skel-ink);
/* It is furniture, not text: a screen reader hears the aria-busy on the
panel and has no use for the bones. */
color: transparent; user-select: none;
}
.skel::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--paper) 70%, transparent) 50%, transparent 80%);
transform: translateX(-100%);
animation: skel-sweep 1.4s ease-in-out infinite;
}
.skel.line { height: 14px; margin: 9px 0; }
.skel.line.title { height: 26px; width: 62%; margin: 4px 0 12px; border-radius: 6px; }
.skel.line.short { width: 38%; }
.skel.line.medium { width: 72%; }
.skel.dot { width: 34px; height: 34px; border-radius: 50%; margin: 0; }
.skel-row { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 14px 0; }
.skel-row + .skel-row { border-top: 1px solid var(--line); }
.skel-stack { display: grid; gap: 10px; }
@keyframes skel-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; opacity: .35; transform: none; } }
/* ======================================================================
EMPTY STATES
The other half of the same problem. A panel with nothing in it said
"Nothing matches that right now." in grey, left-aligned, in the top-left
corner of a box the size of a list — which looks like the list failed. An
empty state is a small piece of design: centred, with a mark, a sentence
that says what happened, and wherever possible the way out of it.
====================================================================== */
.nothing {
display: grid; justify-items: center; gap: 6px; text-align: center;
padding: 28px 20px; margin: 0;
border: 2px dashed var(--line); border-radius: var(--wob, 14px);
color: var(--ink-soft);
}
.nothing .mark { font-size: 30px; line-height: 1; filter: grayscale(.25); }
.nothing b { font-family: var(--font-display); font-weight: 900; font-size: 19px; color: var(--ink); text-transform: uppercase; letter-spacing: -.01em; }
.nothing p { margin: 0; font-size: 15px; max-width: 42ch; }
.nothing .btn { margin-top: 8px; }
/* ======================================================================
DETAILS PANELS
A
is a panel whose whole body can be shut. The
heading pill is pulled 26px above the card's top edge, which is correct for
a panel with content under it and wrong for one with nothing under it: the
title floats while the box keeps its full padded height, and the result
reads as a panel that failed rather than one you can open.
Any card that is also a disclosure gets its padding from the summary and
the body instead of from itself.
====================================================================== */
details.card { padding: 0; }
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary > h2 { margin: 0; }
/* Text that is only for a screen reader: a rank column that reads "—" to the
eye has to read "unranked" to a voice. */
.sr-only {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ======================================================================
COLLECTIBLE STAMPS
One per bar you have ever told us you were at. The look is a rubber stamp
rather than a badge or a card, because a stamp is the one collectible whose
real-world version you get for *having been somewhere* — a passport, a
loyalty card, the back of your hand at a venue door. A badge would read as
something the site awarded you; a stamp reads as something the night left
on you.
Ink colours are deliberately slightly faded and the keyline is slightly
broken, because a stamp that is perfectly crisp looks like a logo.
====================================================================== */
.stamp {
--si: var(--red);
margin: 0; display: grid; gap: 8px; justify-items: center; text-align: center;
rotate: var(--tilt, -2deg);
transition: rotate .35s var(--spring), scale .35s var(--spring);
}
@media (hover: hover) { .stamp:hover { rotate: 0deg; scale: 1.05; } }
.stamp-face {
position: relative; display: grid; align-content: center; gap: 2px;
width: 100%; aspect-ratio: 1; padding: 10px 12px;
color: var(--si); border: 3px solid var(--si); border-radius: 50%;
background: color-mix(in srgb, var(--si) 7%, transparent);
/* The second keyline, drawn inside rather than as another element. */
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--si) 35%, transparent);
overflow: hidden;
}
/* The ink is never perfectly even. A faint blotch, fixed per shape, is what
stops four stamps in a row looking like four copies of a button. */
.stamp-face::after {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
background:
radial-gradient(60% 40% at 25% 20%, color-mix(in srgb, var(--paper) 65%, transparent), transparent 70%),
radial-gradient(45% 35% at 80% 75%, color-mix(in srgb, var(--paper) 50%, transparent), transparent 70%);
}
.stamp-top, .stamp-date {
font-family: var(--font-body); font-weight: 700; font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
opacity: .85;
}
.stamp-name {
font-family: var(--font-display); font-weight: 900; font-size: 14px; line-height: 1.1;
text-transform: uppercase; letter-spacing: -0.01em; word-break: normal; overflow-wrap: break-word; margin: 2px 0;
max-width: 95%;
}
.stamp-hood { font-family: var(--font-body); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stamp-line {
font-family: var(--font-hand); font-size: 14px; line-height: 1.25; color: var(--ink-soft);
max-width: 24ch; word-break: normal; overflow-wrap: break-word;
}
/* Rarity Badge & Tiers for repeat visits */
.stamp-badge {
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-body);
font-weight: 800;
font-size: 8px;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
padding: 1px 7px;
border-radius: 8px;
line-height: 1.2;
z-index: 2;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.stamp-badge.rarity-rare {
background: #2b3544;
color: #e2e8f0;
border: 1px solid #94a3b8;
}
.stamp-badge.rarity-epic {
background: #78350f;
color: #fef08a;
border: 1px solid #eab308;
}
.stamp-badge.rarity-legendary {
background: linear-gradient(135deg, #4c1d95, #7c3aed);
color: #fff;
border: 1px solid #c084fc;
}
/* Upgraded border/sheen for repeat visits */
.stamp.rarity-rare .stamp-face {
box-shadow: inset 0 0 0 2.5px rgba(148, 163, 184, 0.75), 0 2px 8px rgba(0, 0, 0, 0.08);
}
.stamp.rarity-epic .stamp-face {
box-shadow: inset 0 0 0 2.5px rgba(234, 179, 8, 0.85), 0 3px 10px rgba(234, 179, 8, 0.22);
}
.stamp.rarity-legendary .stamp-face {
box-shadow: inset 0 0 0 2.5px rgba(192, 132, 252, 0.9), 0 3px 12px rgba(124, 58, 237, 0.3);
}
/* ---- the four shapes ---- */
.stamp-oval .stamp-face { border-radius: 50% / 62%; }
.stamp-shield .stamp-face { border-radius: 48% 48% 44% 44% / 18% 18% 72% 72%; }
.stamp-square .stamp-face { border-radius: 14px; aspect-ratio: 1 / .92; }
/* ---- the four inks ---- */
.stamp.ink-red { --si: #a6382a; }
.stamp.ink-ink { --si: #2f3a52; }
.stamp.ink-gold { --si: #8a6212; }
.stamp.ink-green { --si: #2c6245; }
:root[data-theme="dark"] .stamp.ink-red { --si: #e07a63; }
:root[data-theme="dark"] .stamp.ink-ink { --si: #8ea2cc; }
:root[data-theme="dark"] .stamp.ink-gold { --si: #d9ad4a; }
:root[data-theme="dark"] .stamp.ink-green { --si: #6fb98e; }
/* ---- sizes ---- */
.stamp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 18px 14px; }
.stamp.lg { gap: 12px; }
.stamp.lg .stamp-face { width: 210px; }
.stamp.lg .stamp-name { font-size: 22px; }
.stamp.lg .stamp-top, .stamp.lg .stamp-date { font-size: 11px; }
.stamp.lg .stamp-hood { font-size: 12px; }
.stamp.lg .stamp-line { font-size: 19px; max-width: 26ch; }
/* The moment it is earned: the stamp comes down on the page. */
.stamp.fresh { animation: stamp-down .5s cubic-bezier(.2, 1.5, .4, 1) backwards; }
@keyframes stamp-down {
from { opacity: 0; scale: 2.1; rotate: -14deg; }
70% { opacity: 1; scale: .94; }
to { opacity: 1; scale: 1; rotate: var(--tilt, -2deg); }
}
@media (prefers-reduced-motion: reduce) {
.stamp, .stamp.fresh { animation: none; transition: none; }
.stamp:hover { rotate: var(--tilt, -2deg); scale: 1; }
}
@media (max-width: 420px) {
.stamp-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 16px 10px; }
.stamp.lg .stamp-face { width: 176px; }
}
/* Earned weekly podium title, shown in profiles and leaderboard reward previews. */
.title-weekly-glow { color:var(--warn-ink); text-shadow:0 0 8px color-mix(in srgb,var(--warn) 48%,transparent); animation:weekly-title-glow 3s ease-in-out 3 alternate; }
@keyframes weekly-title-glow { from { text-shadow:0 0 3px color-mix(in srgb,var(--warn) 22%,transparent); } to { text-shadow:0 0 12px color-mix(in srgb,var(--warn) 65%,transparent); } }
@media (prefers-reduced-motion:reduce) { .title-weekly-glow { animation:none; } }
.title-games-celestial,.title-games-circuit,.title-games-clockwork{font-weight:700;animation:weekly-title-glow 3s ease-in-out 3 alternate}
.title-games-celestial{text-shadow:0 0 10px #e8bd6788;color:var(--warn-ink)}
.title-games-circuit{text-shadow:0 0 10px #b58bd988;color:var(--ink)}
.title-games-clockwork{text-shadow:0 0 8px #83e7df88;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.title-games-celestial,.title-games-circuit,.title-games-clockwork{animation:none}}
/* Category silhouettes remain recognizable across repeat-visit tiers. */
.stamp.category-bar { --si:#803c70; }
.stamp.category-bar .stamp-face { border-radius:50%; border-style:dashed; }
.stamp.category-restaurant { --si:#a8482e; }
.stamp.category-restaurant .stamp-face { border-radius:28%; border:5px double var(--si); outline:2px dashed var(--si); outline-offset:3px; }
.stamp.category-event { --si:#176f78; }
.stamp.category-event .stamp-face { border-radius:6px; border-inline:4px dotted var(--si); aspect-ratio:1/.86; background:radial-gradient(circle at 0 50%,var(--paper) 0 8px,transparent 9px),radial-gradient(circle at 100% 50%,var(--paper) 0 8px,transparent 9px),color-mix(in srgb,var(--si) 8%,transparent); }
.stamp-event-date { font-size:9px; font-weight:700; }
.stamp-edition { display:block; font:700 9px var(--font-body); letter-spacing:.06em; margin-top:5px; text-transform:uppercase; color:var(--si); }
:root[data-theme="dark"] .stamp.category-bar { --si:#d79bc8; }
:root[data-theme="dark"] .stamp.category-restaurant { --si:#ef9e7e; }
:root[data-theme="dark"] .stamp.category-event { --si:#7dd3d8; }
.stamp.fresh .stamp-face::after { animation:ink-settle .65s ease-out; }
@keyframes ink-settle { from {opacity:1} to {opacity:.5} }
.event-passport { margin-top:12px; }
.event-passport [data-event-stamp] { max-width:200px; margin:16px 0; }
@media(prefers-reduced-motion:reduce) { .stamp.fresh .stamp-face::after { animation:none; } }
.stamp.category-restaurant .stamp-face { clip-path:polygon(99.50% 50.00%,98.98% 51.92%,97.63% 53.75%,95.91% 55.43%,94.42% 57.04%,93.64% 58.68%,93.73% 60.50%,94.49% 62.55%,95.43% 64.76%,95.99% 66.97%,95.73% 68.94%,94.52% 70.52%,92.57% 71.69%,90.33% 72.59%,88.35% 73.50%,87.00% 74.72%,86.39% 76.44%,86.30% 78.62%,86.33% 81.03%,86.00% 83.28%,85.00% 85.00%,83.28% 86.00%,81.03% 86.33%,78.62% 86.30%,76.44% 86.39%,74.72% 87.00%,73.50% 88.35%,72.59% 90.33%,71.69% 92.57%,70.52% 94.52%,68.94% 95.73%,66.97% 95.99%,64.76% 95.43%,62.55% 94.49%,60.50% 93.73%,58.68% 93.64%,57.04% 94.42%,55.43% 95.91%,53.75% 97.63%,51.92% 98.98%,50.00% 99.50%,48.08% 98.98%,46.25% 97.63%,44.57% 95.91%,42.96% 94.42%,41.32% 93.64%,39.50% 93.73%,37.45% 94.49%,35.24% 95.43%,33.03% 95.99%,31.06% 95.73%,29.48% 94.52%,28.31% 92.57%,27.41% 90.33%,26.50% 88.35%,25.28% 87.00%,23.56% 86.39%,21.38% 86.30%,18.97% 86.33%,16.72% 86.00%,15.00% 85.00%,14.00% 83.28%,13.67% 81.03%,13.70% 78.62%,13.61% 76.44%,13.00% 74.72%,11.65% 73.50%,9.67% 72.59%,7.43% 71.69%,5.48% 70.52%,4.27% 68.94%,4.01% 66.97%,4.57% 64.76%,5.51% 62.55%,6.27% 60.50%,6.36% 58.68%,5.58% 57.04%,4.09% 55.43%,2.37% 53.75%,1.02% 51.92%,0.50% 50.00%,1.02% 48.08%,2.37% 46.25%,4.09% 44.57%,5.58% 42.96%,6.36% 41.32%,6.27% 39.50%,5.51% 37.45%,4.57% 35.24%,4.01% 33.03%,4.27% 31.06%,5.48% 29.48%,7.43% 28.31%,9.67% 27.41%,11.65% 26.50%,13.00% 25.28%,13.61% 23.56%,13.70% 21.38%,13.67% 18.97%,14.00% 16.72%,15.00% 15.00%,16.72% 14.00%,18.97% 13.67%,21.38% 13.70%,23.56% 13.61%,25.28% 13.00%,26.50% 11.65%,27.41% 9.67%,28.31% 7.43%,29.48% 5.48%,31.06% 4.27%,33.03% 4.01%,35.24% 4.57%,37.45% 5.51%,39.50% 6.27%,41.32% 6.36%,42.96% 5.58%,44.57% 4.09%,46.25% 2.37%,48.08% 1.02%,50.00% 0.50%,51.92% 1.02%,53.75% 2.37%,55.43% 4.09%,57.04% 5.58%,58.68% 6.36%,60.50% 6.27%,62.55% 5.51%,64.76% 4.57%,66.97% 4.01%,68.94% 4.27%,70.52% 5.48%,71.69% 7.43%,72.59% 9.67%,73.50% 11.65%,74.72% 13.00%,76.44% 13.61%,78.62% 13.70%,81.03% 13.67%,83.28% 14.00%,85.00% 15.00%,86.00% 16.72%,86.33% 18.97%,86.30% 21.38%,86.39% 23.56%,87.00% 25.28%,88.35% 26.50%,90.33% 27.41%,92.57% 28.31%,94.52% 29.48%,95.73% 31.06%,95.99% 33.03%,95.43% 35.24%,94.49% 37.45%,93.73% 39.50%,93.64% 41.32%,94.42% 42.96%,95.91% 44.57%,97.63% 46.25%,98.98% 48.08%); border:0; border-radius:0; outline:0; background:color-mix(in srgb,var(--si) 15%,var(--paper)); box-shadow:inset 0 0 0 6px var(--si); }
.stamp.category-restaurant .stamp-face::before { content:""; position:absolute; inset:12px; border:2px dashed var(--si); border-radius:50%; pointer-events:none; }
.stamp.edition-special { --si:#996b16; }
.stamp.edition-special .stamp-face { background-color:color-mix(in srgb,#eab54c 16%,var(--paper)); outline:2px dashed var(--si); outline-offset:4px; }
:root[data-theme="dark"] .stamp.edition-special { --si:#efd17b; }
/* One souvenir reveal across every place and event. */
.passport-stamp-dialog { width:min(400px,calc(100vw - 28px)); padding:22px; text-align:center; background:var(--paper); }
.passport-stamp-dialog::backdrop { background:rgb(27 26 23 / .5); backdrop-filter:blur(2px); }
.passport-stamp-dialog [data-reveal-stamp] { display:grid; justify-items:center; padding:18px 0; }
.passport-stamp-dialog .actions { flex-wrap:wrap; justify-content:center; }
.passport-stamp-dialog .actions .btn { flex:1 1 auto; }
.bar-expand, .event-expand { min-width:0; }
.bar-preview, .event-summary { cursor:pointer; list-style:none; }
.bar-preview::-webkit-details-marker, .event-summary::-webkit-details-marker { display:none; }
.bar-preview:focus-visible, .event-summary:focus-visible { outline:3px solid var(--red-ink); outline-offset:4px; border-radius:8px; }
.bar-expand-hint, .event-expand-hint { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; }
.bar-expand-hint > span, .event-expand-hint > span { display:inline-block; transition:transform .32s cubic-bezier(.22,1,.36,1); }
.bar-expand[open] .bar-expand-hint > span, .event-expand[open] .event-expand-hint > span { transform:rotate(45deg); }
.bar-slide-body, .event-slide-body { border-top:1px solid var(--line); margin-top:14px; padding-top:14px; }
.bar-slide-body > .venue-visit > summary, .restaurant-body > .venue-visit > summary { display:none; }
@media(prefers-reduced-motion:reduce) { .bar-expand-hint > span, .event-expand-hint > span { transition:none; } }
.title-seasonal, [class*="title-games-season-"] { color:var(--warn-ink); font-weight:700; text-shadow:0 0 9px color-mix(in srgb,var(--warn) 40%,transparent); }