sits on the text baseline: its bottom edge lines up with the
bottom of "Saved" rather than its middle, which put the heart 4px above
the word it belongs to. Nothing nudges it back into place as reliably as
not having the problem -- a flex line centres the two whatever the icon
ends up being. */
display: inline-flex;
align-items: center;
font-size: .85rem;
font-weight: 500;
text-decoration: none;
color: var(--ink-soft);
background: var(--paper);
border: 1px solid var(--line);
border-radius: 50px;
padding: .4rem .9rem;
}
/* Sized and stroked in saved.css, which also sets the gap this chip needed a
flex line to honour. All that belongs here is refusing to be squashed. */
.mk-chip > svg { flex: 0 0 auto; }
.mk-chip:hover { border-color: var(--accent); color: var(--ink); }
.mk-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mk-chip-n { opacity: .55; margin-left: .25rem; font-variant-numeric: tabular-nums; }
/* ══════════════════════════════════════════════════════════════
Rows that are wider than the screen
Two of them: the curated collections and the shop chips. Both are
directly swipeable and always were; what they lacked was any sign
that there was more of them past the right edge. The fades say
where you are, the arrows give a mouse a way in, and both take
themselves away when there is nothing further to reach --
assets/search.js measures, this file draws.
══════════════════════════════════════════════════════════════ */
.mk-strip { position: relative; isolation: isolate; }
.mk-strip::before,
.mk-strip::after {
content: '';
position: absolute;
z-index: 1;
top: 0;
bottom: .3rem;
width: 3.2rem;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.mk-strip::before { left: 0; background: linear-gradient(to right, var(--ground) 24%, transparent); }
.mk-strip::after { right: 0; background: linear-gradient(to left, var(--ground) 24%, transparent); }
.mk-strip.can-left::before,
.mk-strip.can-right::after { opacity: 1; }
.mk-strip-arrow {
position: absolute;
z-index: 2;
top: calc(50% - .15rem);
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--paper);
color: var(--ink);
box-shadow: 0 3px 12px rgba(28,26,23,.10);
cursor: pointer;
}
.mk-strip-arrow[hidden] { display: none; }
.mk-strip-arrow.left { left: 0; }
.mk-strip-arrow.right { right: 0; }
.mk-strip-arrow svg { width: 17px; height: 17px; }
.mk-strip-arrow path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ── Curated collections ──
Four ways in for somebody who has not decided what they want, which is most
of the people who open a marketplace. Links, not buttons, so each one is a
real address before any script runs. */
.mk-curated-row {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: .9rem;
}
.mk-curated-btn {
font-size: .85rem;
font-weight: 600;
text-decoration: none;
color: var(--ink);
background: var(--paper);
border: 1px solid var(--line);
border-radius: 50px;
padding: .45rem 1rem;
white-space: nowrap;
transition: border-color .2s, background .2s, color .2s;
}
.mk-curated-btn:hover { border-color: var(--accent); }
.mk-curated-btn.on {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
}
/* ── The toolbar ── */
.mk-toolbar { flex-wrap: wrap; gap: .55rem; }
.mk-toolbar select {
max-width: 15rem;
text-overflow: ellipsis;
}
.mk-filters { position: relative; z-index: 20; }
.mk-filters summary {
display: inline-flex;
align-items: center;
gap: .4rem;
min-height: 34px;
padding: .35rem .8rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--paper);
color: var(--ink);
font-size: .85rem;
font-weight: 600;
cursor: pointer;
list-style: none;
user-select: none;
}
.mk-filters summary::-webkit-details-marker { display: none; }
.mk-filters summary:hover,
.mk-filters[open] summary { border-color: var(--accent); }
.mk-filters summary svg { width: 16px; height: 16px; }
.mk-filters summary svg path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mk-filter-n {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 .25rem;
border-radius: 50px;
background: var(--accent);
color: var(--on-accent);
font-size: .68rem;
}
.mk-filter-n[hidden] { display: none; }
.mk-filters-panel {
position: absolute;
top: calc(100% + .5rem);
right: 0;
width: min(360px, calc(100vw - 2rem));
padding: 1rem;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--paper);
box-shadow: 0 14px 38px rgba(28,26,23,.16);
text-align: left;
}
.mk-filter-label {
display: block;
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: .5rem;
}
.mk-price-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.mk-price-btn {
font: inherit;
font-size: .8rem;
font-weight: 600;
padding: .35rem .8rem;
border: 1px solid var(--line);
border-radius: 50px;
background: var(--paper);
color: var(--ink);
cursor: pointer;
white-space: nowrap;
}
.mk-price-btn:hover { border-color: var(--accent); }
.mk-price-btn.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mk-filters-foot {
display: flex;
align-items: center;
gap: .9rem;
flex-wrap: wrap;
margin-top: .9rem;
padding-top: .8rem;
border-top: 1px solid var(--line);
}
.mk-filters-foot label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.mk-filter-reset {
margin-left: auto;
color: var(--ink-soft);
font-size: .8rem;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
}
.mk-filter-reset:hover { color: var(--accent); }
.mk-filter-reset[hidden] { display: none; }
/* ── The rest of the shops ──
The chip row holds the busiest few; everything else is behind this, with a
box to type into. index.php explains where the cut is and why. */
.mk-shoppicker { position: relative; flex-shrink: 0; }
.mk-shoppicker summary {
display: inline-flex;
align-items: center;
gap: .3rem;
cursor: pointer;
list-style: none;
white-space: nowrap;
}
.mk-shoppicker summary::-webkit-details-marker { display: none; }
.mk-shoppicker[open] summary { border-color: var(--accent); color: var(--ink); }
.mk-shoppicker summary svg { width: 14px; height: 14px; }
.mk-shoppicker summary path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-shoppicker summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-shoppicker-panel {
position: absolute;
z-index: 30;
top: calc(100% + .45rem);
left: 0;
width: min(300px, calc(100vw - 2.5rem));
padding: .75rem;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--paper);
box-shadow: 0 14px 38px rgba(28,26,23,.16);
}
.mk-shopfilter span {
display: block;
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: .35rem;
}
.mk-shopfilter input {
width: 100%;
min-width: 0;
font: inherit;
font-size: .88rem;
padding: .45rem .7rem;
border: 1px solid var(--line);
border-radius: 50px;
background: var(--ground);
color: var(--ink);
}
.mk-shopfilter input:focus { outline: none; border-color: var(--accent); background: var(--paper); }
.mk-shoplist {
/* Scrolls rather than growing: the panel has to stay a panel whether the
marketplace has twelve shops or two hundred. */
max-height: min(46vh, 320px);
overflow-y: auto;
overscroll-behavior: contain;
margin-top: .6rem;
}
.mk-shoplist a {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
padding: .5rem .6rem;
border-radius: 8px;
color: var(--ink);
text-decoration: none;
font-size: .88rem;
}
.mk-shoplist a[hidden] { display: none; }
.mk-shoplist a:hover { background: var(--ground); }
.mk-shoplist a.on { background: var(--ink); color: var(--paper); }
.mk-shoplist a.on .mk-chip-n { opacity: .8; }
.mk-shoplist-none,
.mk-shoplist-note { margin: .6rem .1rem 0; font-size: .8rem; color: var(--ink-soft); }
.mk-shoplist-none[hidden] { display: none; }
/* ── One shop's header ── */
.mk-shopbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.1rem 1.3rem;
margin-bottom: 1.2rem;
}
.mk-shopbar h1 { font-family: var(--ff-head); font-size: 1.4rem; margin: 0; }
.mk-shopbar-logo {
width: 58px; height: 58px; flex: 0 0 auto; object-fit: contain;
border: 1px solid var(--line); border-radius: 12px; background: var(--ground); padding: .35rem;
}
.mk-shopbar-copy { flex: 1 1 320px; min-width: 0; }
.mk-shop-tagline {
color: var(--accent); font-size: .72rem; font-weight: 600; letter-spacing: .06em;
margin: .2rem 0 0; text-transform: uppercase;
}
.mk-blurb { margin: .3rem 0 0; color: var(--ink-soft); font-size: .92rem; }
.mk-shopbar-actions { align-items: center; display: flex; flex: 0 0 auto; gap: .75rem; }
.mk-shop-updates { color: var(--accent); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.mk-visit {
font-weight: 600;
font-size: .9rem;
text-decoration: none;
color: var(--on-accent);
background: var(--accent);
padding: .55rem 1.1rem;
border-radius: 50px;
white-space: nowrap;
}
.mk-visit:hover { background: var(--accent-dk); }
/* ── Result bar ── */
.mk-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.mk-count { color: var(--ink-soft); font-size: .9rem; }
.mk-sort { display: flex; align-items: center; gap: 1rem; font-size: .88rem; color: var(--ink-soft); }
.mk-sort label { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.mk-sort select {
font: inherit;
padding: .35rem .6rem;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--paper);
color: var(--ink);
}
/* ── Listings ── */
.mk-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.1rem;
}
.mk-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
transition: box-shadow .2s ease, transform .2s ease;
}
.mk-card:hover { box-shadow: 0 8px 26px rgba(28,26,23,.10); transform: translateY(-2px); }
.mk-card.out { opacity: .68; }
.mk-card-link { text-decoration: none; color: inherit; display: block; }
.mk-thumb {
position: relative;
aspect-ratio: 1;
background: var(--ground);
display: flex;
align-items: center;
justify-content: center;
}
.mk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-thumb-ph { font-size: 2rem; color: var(--ink-faint); }
.mk-oos, .mk-sale {
position: absolute;
top: .6rem;
left: .6rem;
font-size: .68rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
padding: .22rem .55rem;
border-radius: 50px;
}
/* Both badges take their text colour from the background they sit on rather
than a flat white. After dark --ink is the light end of the palette, so a
white "SOLD OUT" on it was white on cream. A background and its text colour
are one unit; neither is ever set without the other. */
.mk-oos { background: var(--ink); color: var(--paper); }
.mk-sale { background: var(--sale); color: var(--on-sale); }
.mk-card-body { padding: .85rem .95rem 1rem; }
.mk-shopname {
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: .3rem;
}
.mk-card-body h3 {
font-family: var(--ff-head);
font-size: 1rem;
font-weight: 500;
line-height: 1.3;
margin: 0 0 .5rem;
}
.mk-price { display: flex; align-items: baseline; gap: .45rem; font-size: .98rem; }
.mk-price s { color: var(--ink-faint); font-size: .85rem; }
/* ── Empty and footer ── */
.mk-empty { text-align: center; padding: 4rem 1rem; color: var(--ink-soft); }
.mk-empty h1, .mk-empty h2 { font-family: var(--ff-head); color: var(--ink); margin: 0 0 .5rem; }
.mk-empty a { color: var(--accent); }
/* ── Live results ──
The grid is one page deep and grows as you reach the bottom of it; see
assets/search.js. What follows is only the states that appear while that is
happening -- the cards themselves are the same cards either way. */
/* Placeholders while a search is in flight.
They exist so the page does not empty itself and jump the scroll position
back to the top between one query and the next, which is what a shopper
correcting a typo would otherwise feel: the results are not gone, they are
being replaced, and the layout should say so. */
.mk-skel { pointer-events: none; border-color: transparent; }
.mk-skel .mk-thumb,
.mk-skel .sale-card-img,
.mk-skel .mk-card-body span,
.mk-skel .sale-card-body span {
background: linear-gradient(90deg, var(--line) 25%, var(--ground) 37%, var(--line) 63%);
background-size: 400% 100%;
animation: mk-shimmer 1.4s ease infinite;
border-radius: 6px;
}
.mk-skel .mk-card-body,
.mk-skel .sale-card-body { display: grid; gap: .5rem; }
.mk-skel .mk-card-body span,
.mk-skel .sale-card-body span { height: .7rem; }
.mk-skel .mk-card-body span:last-child,
.mk-skel .sale-card-body span:last-child { width: 45%; }
.mk-skel:hover { box-shadow: none; transform: none; }
/* A sale card carries a coloured spine; a placeholder should not pretend to. */
.sale-card.mk-skel { border-left-color: var(--line); pointer-events: none; }
.mk-skel .sale-card-img { height: 120px; }
@keyframes mk-shimmer {
from { background-position: 100% 0; }
to { background-position: 0 0; }
}
/* Somebody who has asked not to be moved gets a still placeholder rather than
no placeholder: the layout still holds, nothing pulses. */
@media (prefers-reduced-motion: reduce) {
.mk-skel .mk-thumb,
.mk-skel .sale-card-img,
.mk-skel .mk-card-body span,
.mk-skel .sale-card-body span { animation: none; background: var(--line); }
}
/* Appending leaves the grid alone and dims only the control that is working,
because everything above it is still exactly what the shopper was reading. */
.mk-results.is-appending .mk-more { opacity: .6; }
.mk-more { display: flex; justify-content: center; padding: 2rem 0 .5rem; }
/* `hidden` is how the script puts these two away, and a `display` of its own
beats the browser's rule for it. Without this the pager stays on screen
after the last page and the grid keeps its gaps when nothing matched. */
.mk-more[hidden], .mk-grid[hidden], .sale-grid[hidden] { display: none; }
.sale-page-clear[hidden] { display: none; }
.mk-more-link, .mk-more-btn {
font: inherit;
font-weight: 600;
color: var(--ink);
background: var(--paper);
border: 1px solid var(--line);
border-radius: 999px;
padding: .7rem 1.6rem;
cursor: pointer;
text-decoration: none;
transition: border-color .2s, box-shadow .2s;
}
.mk-more-link:hover, .mk-more-btn:hover {
border-color: var(--accent);
box-shadow: 0 4px 14px rgba(28,26,23,.08);
}
.mk-more-btn:focus-visible, .mk-more-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.mk-more-rest { color: var(--ink-soft); font-weight: 400; }
/* The thing the observer watches for. It has to occupy a line of its own or a
grid that ends flush with the viewport never reports it as reached. */
.mk-sentinel { height: 1px; }
.mk-pagenote { text-align: center; color: var(--ink-soft); font-size: .88rem; }
.mk-pagenote a { color: var(--accent); }
.mk-foot {
border-top: 1px solid var(--line);
background: var(--paper);
padding: 1.8rem 0;
color: var(--ink-soft);
font-size: .88rem;
text-align: center;
}
.mk-foot p { margin: 0 0 .35rem; }
.mk-synced { color: var(--ink-faint); font-size: .82rem; }
@media (max-width: 640px) {
.mk-head-in {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: .5rem;
padding-top: .55rem;
padding-bottom: .55rem;
}
.mk-brand { grid-column: 1; grid-row: 1; font-size: 1.15rem; }
.mk-brand img { height: 28px; max-width: 46vw; }
.mk-headnav { grid-column: 2; grid-row: 1; margin-left: 0; flex-wrap: nowrap; }
.mk-nav-secondary { display: none !important; }
.mk-mobile-menu { display: block; position: relative; }
.mk-theme,
.mk-mobile-menu summary,
.mk-basket-link {
width: 44px;
height: 44px;
min-height: 44px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--paper);
color: var(--ink);
cursor: pointer;
list-style: none;
}
.mk-mobile-menu summary::-webkit-details-marker { display: none; }
.mk-mobile-menu summary svg,
.mk-basket-icon { display: block; width: 20px; height: 20px; }
.mk-mobile-menu summary path,
.mk-basket-icon path,
.mk-basket-icon circle { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mk-mobile-menu[open] summary { border-color: var(--accent); background: var(--ground); }
.mk-mobile-menu-panel {
position: absolute;
top: calc(100% + .45rem);
right: calc(-44px - .5rem);
z-index: 30;
width: 220px;
padding: .4rem;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--paper);
box-shadow: 0 12px 30px rgba(28,26,23,.16);
}
.mk-mobile-menu-panel a {
display: block;
padding: .7rem .75rem;
border-radius: 7px;
color: var(--ink);
text-decoration: none;
font-size: .9rem;
}
.mk-mobile-menu-panel a:hover,
.mk-mobile-menu-panel a[aria-current="page"] { background: var(--ground); color: var(--accent-dk); }
.mk-basket-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.mk-basket-link { position: relative; }
.mk-basket-link.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mk-basket-link .mk-chip-n {
position: absolute;
top: -.25rem;
right: -.2rem;
min-width: 18px;
height: 18px;
margin: 0;
padding: 0 .25rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50px;
background: var(--accent);
color: var(--paper);
font-size: .68rem;
opacity: 1;
}
/* Only the placement changes here now: the button has been inside the
field at every width since it stopped being a pill. */
.mk-search {
grid-column: 1 / -1;
grid-row: 2;
order: initial;
width: 100%;
min-width: 0;
}
.mk-search { --search-btn: 36px; }
.mk-search input { min-height: 44px; padding: .65rem 3.15rem .65rem 1rem; }
.mk-main { padding-top: 1rem; }
.mk-shops,
.mk-curated-row {
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: none;
margin: 0 -1.25rem .8rem 0;
padding-right: 2.6rem;
scroll-padding-inline: 2.6rem;
scroll-snap-type: x proximity;
}
.mk-shops::-webkit-scrollbar,
.mk-curated-row::-webkit-scrollbar { display: none; }
.mk-chip, .mk-curated-btn { flex-shrink: 0; scroll-snap-align: start; }
/* Two selects and a Filters button, on one row that has to fit a phone.
The category name is the part that can be long, so it is the part that
gets to shrink. */
.mk-toolbar { width: 100%; gap: .45rem; }
.mk-toolbar select { flex: 1 1 0; min-width: 0; max-width: none; font-size: .82rem; }
.mk-filters { flex: 0 0 auto; position: static; }
.mk-filters-panel { right: 1.25rem; left: 1.25rem; width: auto; max-height: 70vh; overflow-y: auto; }
.mk-shops::-webkit-scrollbar { display: none; }
.mk-shops .mk-chip { flex: 0 0 auto; }
.mk-bar { flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.mk-count { flex-basis: 100%; margin-right: 0; font-size: .82rem; white-space: nowrap; }
.mk-sort { gap: .45rem; }
.mk-sort label {
min-height: 44px;
padding: 0 .7rem;
border: 1px solid var(--line);
border-radius: 50px;
background: var(--paper);
color: var(--ink-soft);
white-space: nowrap;
}
.mk-sort select { width: clamp(108px, 30vw, 140px); min-height: 44px; }
.mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.mk-card-body { padding: .7rem .75rem .8rem; }
}
/* ══════════════════════════════════════════════════════════════
Moderation — a tool, not a shop
The prefix is `mod-`, and it must not become `ad-` again. It was
`ad-` for "admin", and every content blocker reads that as
"advertisement": EasyList carries generic cosmetic rules that hide
elements whose class begins with `ad-`. Hiding `.ad-wrap` removed the
entire page, so the screen rendered as a blank dark rectangle with a
completely clean network log — 200s all round, full HTML in view
source, and nothing on screen. Very hard to diagnose, trivial to
avoid.
══════════════════════════════════════════════════════════════ */
/* The same values as the operator console and the shop admin's dark mode.
Three applications in three repositories cannot share a stylesheet, so
they share a set of numbers instead -- warm near-black neutrals and a
verdigris accent. This screen is a tool Peter uses, not a page shoppers
see, so it belongs with the other tools; the marketplace's own bronze
stays where it means something, on the public pages above. */
body.mk-admin {
--bg: #191512;
--panel: #221D19;
--panel-2: #2C2621;
--edge: #362F28;
--txt: #EDE7DF;
--txt-dim: #A79C90;
--brand: #4FB3A2;
--on-brand:#10221F;
--good: #3FB984;
--bad: #E4635C;
/* The same two colours as channels, for the translucent tints below. They
were spelled out as literal rgba() and so did not follow --good/--bad
when those moved, leaving the tint a different green from its text. */
--good-rgb: 63, 185, 132;
--bad-rgb: 228, 99, 92;
background: var(--bg);
color: var(--txt);
}
.mod-wrap { max-width: 1100px; margin: 0 auto; padding: 1.6rem 1.25rem 4rem; }
/* flex-wrap because the three header links, once each is a 44px touch target,
no longer fit beside the heading on a 320px screen. The spacer keeps them
right-aligned on a wide one and simply collapses when they wrap. */
/* ── Brand, on the moderation screen ── */
.mod-brand { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.mod-brand-preview { flex: 0 0 auto; }
.mod-brand-label,
.mod-brand-dims { display: block; font-size: .75rem; opacity: .65; margin: 0 0 .4rem; }
.mod-brand-dims { margin: .4rem 0 0; }
/* A chequerboard, because most logos are transparent and a transparent logo
on a dark panel looks identical to one that failed to load. */
.mod-brand-box {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 72px;
padding: .8rem 1.1rem;
border: 1px solid rgba(255,255,255,.14);
border-radius: 10px;
background-color: #fff;
background-image:
linear-gradient(45deg, #e9e9e9 25%, transparent 25%, transparent 75%, #e9e9e9 75%),
linear-gradient(45deg, #e9e9e9 25%, transparent 25%, transparent 75%, #e9e9e9 75%);
background-size: 16px 16px;
background-position: 0 0, 8px 8px;
}
.mod-brand-box img { display: block; width: auto; height: 40px; max-width: 240px; object-fit: contain; }
.mod-brand-word { font-family: var(--ff-head, Georgia, serif); font-size: 1.35rem; font-weight: 700; color: #1c1a17; }
.mod-brand-actions { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.mod-brand-file { display: block; }
.mod-brand-file span { display: block; font-size: .78rem; opacity: .65; margin-bottom: .35rem; }
.mod-brand-file input { font: inherit; font-size: .85rem; color: inherit; max-width: 100%; }
.mod-top { display: flex; align-items: center; gap: .5rem 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.mod-top h1 { font-size: 1.3rem; margin: 0; }
.mod-spacer { flex: 1; }
.mod-act { color: var(--txt-dim); text-decoration: none; font-size: .88rem; }
.mod-act:hover { color: var(--brand); }
.mod-flash {
background: rgba(var(--good-rgb), .12);
border: 1px solid rgba(var(--good-rgb), .4);
color: var(--txt);
border-radius: 8px;
padding: .6rem .9rem;
margin-bottom: 1rem;
font-size: .9rem;
}
.mod-block {
background: var(--panel);
border: 1px solid var(--edge);
border-radius: 12px;
padding: 1.2rem 1.3rem 1.4rem;
margin-bottom: 1.4rem;
}
.mod-block h2 {
font-size: 1.02rem;
margin: 0 0 .5rem;
display: flex;
align-items: center;
gap: .6rem;
}
/* A group heading inside a moderation block -- "Waiting for you", "Live now".
Quieter than the block's own , because it divides one list rather than
starting a new subject. */
.mod-subh {
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--txt-dim);
margin: 1.4rem 0 .6rem;
display: flex;
align-items: center;
gap: .5rem;
}
.mod-subh:first-of-type { margin-top: .9rem; }
.mod-count {
background: var(--brand);
color: var(--on-brand);
font-size: .74rem;
font-weight: 700;
border-radius: 50px;
padding: .1rem .5rem;
}
.mod-clear { font-size: .78rem; font-weight: 400; color: var(--txt-dim); }
.mod-note { color: var(--txt-dim); font-size: .86rem; line-height: 1.6; margin: 0 0 1rem; }
.mod-note code { background: var(--panel-2); padding: .1rem .35rem; border-radius: 4px; }
.mod-empty { color: var(--txt-dim); font-size: .9rem; margin: 0; }
/* Shops */
.mod-store {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
background: var(--panel-2);
border: 1px solid var(--edge);
border-left: 3px solid var(--edge);
border-radius: 10px;
padding: .85rem 1rem;
margin-bottom: .6rem;
}
.mod-store.on { border-left-color: var(--good); }
.mod-store-main { flex: 1; min-width: 240px; }
.mod-store-name { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 600; }
.mod-store-meta { color: var(--txt-dim); font-size: .8rem; margin-top: .3rem; }
.mod-store-actions { display: flex; align-items: center; gap: .5rem; }
.mod-tag {
font-size: .68rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
padding: .16rem .5rem;
border-radius: 50px;
background: var(--edge);
color: var(--txt-dim);
}
.mod-tag.ok { background: rgba(var(--good-rgb), .18); color: var(--good); }
.mod-tag.bad { background: rgba(var(--bad-rgb), .18); color: var(--bad); }
.mod-btn {
font: inherit;
font-size: .85rem;
font-weight: 600;
padding: .45rem 1rem;
border: 1px solid var(--brand);
border-radius: 50px;
background: var(--brand);
color: var(--on-brand);
cursor: pointer;
text-decoration: none;
display: inline-block;
}
.mod-btn:hover { filter: brightness(1.08); }
/* Touch, matching the console and the shop admin. The moderation actions --
Review, Publish, Unpublish -- were 32px, and the header links 34px. */
@media (pointer: coarse) {
.mod-btn, .mod-act {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mod-block-form input[type=text],
.mod-login-card input { min-height: 44px; }
}
.mod-btn.ghost { background: transparent; border-color: var(--edge); color: var(--txt); }
.mod-btn.ghost:hover { border-color: var(--brand); color: var(--brand); }
.mod-btn.warn { background: transparent; border-color: var(--bad); color: var(--bad); }
.mod-btn.warn:hover { background: var(--bad); color: #fff; }
.mod-btn.sm { padding: .28rem .7rem; font-size: .78rem; }
/* Review queue */
.mod-item {
display: flex;
gap: 1rem;
background: var(--panel-2);
border: 1px solid var(--edge);
border-left: 3px solid var(--edge);
border-radius: 10px;
padding: .9rem 1rem;
margin-bottom: .7rem;
}
.mod-item.held { border-left-color: var(--bad); }
.mod-item-img {
width: 84px;
height: 84px;
flex: none;
border-radius: 8px;
overflow: hidden;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
color: var(--txt-dim);
font-size: 1.6rem;
}
.mod-item-img img { width: 100%; height: 100%; object-fit: cover; }
.mod-item-body { flex: 1; min-width: 0; }
.mod-item-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mod-item-shop { color: var(--txt-dim); font-size: .82rem; }
.mod-item-price { color: var(--txt-dim); font-size: .82rem; font-variant-numeric: tabular-nums; }
.mod-item-desc { color: var(--txt-dim); font-size: .85rem; line-height: 1.55; margin: .5rem 0 .6rem; }
.mod-flags { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.mod-flags li {
font-size: .76rem;
padding: .15rem .55rem;
border-radius: 50px;
background: var(--edge);
color: var(--txt-dim);
}
.mod-flags li.hold { background: rgba(var(--bad-rgb), .18); color: var(--bad); }
.mod-item-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.mod-block-form { display: flex; gap: .4rem; }
.mod-block-form input[type=text] {
font: inherit;
font-size: .84rem;
padding: .4rem .7rem;
border: 1px solid var(--edge);
border-radius: 50px;
background: var(--bg);
color: var(--txt);
min-width: 190px;
}
.mod-block-form input[type=text]:focus { outline: none; border-color: var(--brand); }
/* Decisions */
.mod-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.mod-table th {
text-align: left;
color: var(--txt-dim);
font-weight: 600;
font-size: .76rem;
letter-spacing: .04em;
text-transform: uppercase;
padding: .4rem .6rem;
border-bottom: 1px solid var(--edge);
}
.mod-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--edge); vertical-align: middle; }
/* Login */
.mod-login { max-width: 380px; margin: 12vh auto; padding: 0 1.25rem; text-align: center; }
.mod-login h1 { font-size: 1.4rem; margin: 0 0 .3rem; }
.mod-login > p { color: var(--txt-dim); font-size: .9rem; margin: 0 0 1.5rem; }
.mod-login-card {
background: var(--panel);
border: 1px solid var(--edge);
border-radius: 12px;
padding: 1.4rem;
text-align: left;
}
.mod-login-card label {
display: block;
font-size: .8rem;
font-weight: 600;
color: var(--txt-dim);
margin-bottom: .35rem;
}
.mod-login-card input {
width: 100%;
font: inherit;
padding: .6rem .8rem;
border: 1px solid var(--edge);
border-radius: 8px;
background: var(--bg);
color: var(--txt);
margin-bottom: .9rem;
}
.mod-login-card input:focus { outline: none; border-color: var(--brand); }
.mod-login-card button {
width: 100%;
font: inherit;
font-weight: 600;
padding: .6rem;
border: 0;
border-radius: 8px;
background: var(--brand);
color: var(--on-brand);
cursor: pointer;
}
.mod-err {
background: rgba(var(--bad-rgb), .14);
border: 1px solid rgba(var(--bad-rgb), .45);
color: var(--bad);
border-radius: 8px;
padding: .5rem .75rem;
margin-bottom: .9rem;
font-size: .86rem;
}
.mod-login-back { margin-top: 1rem; font-size: .85rem; }
.mod-login-back a { color: var(--txt-dim); text-decoration: none; }
.mod-login-back a:hover { color: var(--brand); }
/* ══════════════════════════════════════════════════════════════
Sell with us — the pitch
Quiet on purpose. The people this speaks to have been sold at
loudly by everyone else; the strongest move available is to say
what is true, in a readable size, and stop.
══════════════════════════════════════════════════════════════ */
.sell-hero {
background: var(--paper);
border-bottom: 1px solid var(--line);
padding: 4rem 0 3.5rem;
text-align: center;
}
.sell-hero h1 {
font-family: var(--ff-head);
font-size: clamp(1.9rem, 4.6vw, 3rem);
line-height: 1.12;
max-width: 18ch;
margin: 0 auto 1.1rem;
color: var(--ink);
}
.sell-lede {
max-width: 56ch;
margin: 0 auto 1.8rem;
font-size: 1.06rem;
line-height: 1.7;
color: var(--ink-soft);
}
.sell-cta { display: inline-block; padding: .8rem 2rem; font-size: 1rem; }
.sell-sub { margin: .9rem 0 0; font-size: .88rem; color: var(--ink-faint); }
.sell-oneoff {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-block: 2rem;
padding: 1.4rem 1.5rem;
border: 1px solid var(--line);
border-left: 4px solid var(--sale);
border-radius: var(--radius);
background: var(--paper);
}
.sell-oneoff-copy { max-width: 62ch; }
.sell-kicker {
margin: 0 0 .3rem;
color: var(--sale);
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.sell-oneoff h2 {
margin: 0 0 .4rem;
color: var(--ink);
font-family: var(--ff-head);
font-size: 1.25rem;
}
.sell-oneoff p:last-child { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.65; }
.sell-oneoff-actions { display: flex; flex-direction: column; align-items: center; gap: .7rem; flex: 0 0 auto; }
.sell-textlink { color: var(--accent); font-size: .82rem; text-decoration: none; }
.sell-textlink:hover { text-decoration: underline; }
.sell-promises {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2rem;
padding: 3.5rem 1.25rem;
}
.sell-promise h2 {
font-family: var(--ff-head);
font-size: 1.15rem;
margin: 0 0 .5rem;
color: var(--ink);
}
.sell-promise p { margin: 0; color: var(--ink-soft); line-height: 1.65; font-size: .95rem; }
.sell-band { background: var(--paper); border-block: 1px solid var(--line); padding: 3.2rem 0; }
.sell-h {
font-family: var(--ff-head);
font-size: 1.6rem;
margin: 0 0 1.4rem;
color: var(--ink);
}
.sell-compare {
max-width: 60ch;
font-size: 1.02rem;
line-height: 1.75;
color: var(--ink-soft);
margin: 0;
}
/* ── Plans ── */
.sell-plans { padding: 3.5rem 1.25rem; }
.sell-plans-intro {
max-width: 72ch;
margin: -.45rem 0 1.8rem;
color: var(--ink-soft);
font-size: .96rem;
line-height: 1.7;
}
.plan-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1.2rem;
align-items: start;
}
.plan {
position: relative;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.5rem 1.3rem 1.6rem;
}
.plan.popular { border-color: var(--accent); box-shadow: 0 6px 28px rgba(138,90,43,.13); }
.plan-flag {
position: absolute;
top: -.7rem; left: 1.3rem;
background: var(--accent);
color: var(--on-accent);
font-size: .68rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
padding: .2rem .6rem;
border-radius: 50px;
}
.plan h3 { font-family: var(--ff-head); font-size: 1.25rem; margin: 0 0 .3rem; }
.plan-price { font-size: 2rem; font-weight: 600; color: var(--ink); margin-bottom: .5rem; }
.plan-price span { font-size: .85rem; font-weight: 400; color: var(--ink-faint); }
.plan-tagline { font-size: .92rem; color: var(--ink); margin: 0 0 .6rem; }
.plan-blurb { font-size: .88rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 1rem; }
.plan-features { list-style: none; margin: 0; padding: 0; }
.plan-features li {
font-size: .88rem;
color: var(--ink-soft);
padding: .3rem 0 .3rem 1.3rem;
position: relative;
line-height: 1.5;
}
.plan-features li::before {
content: '';
position: absolute;
left: .1rem; top: .72rem;
width: .42rem; height: .42rem;
border-radius: 50%;
background: var(--accent);
}
.plan-note { font-size: .82rem; color: var(--ink-faint); margin: .9rem 0 0; font-style: italic; }
.sell-plan-action { display: inline-flex; align-items: center; min-height: 44px; margin-top: .7rem; color: var(--accent); font-size: .88rem; font-weight: 600; }
.sell-fineprint {
max-width: 62ch;
margin: 1.8rem 0 0;
font-size: .9rem;
line-height: 1.7;
color: var(--ink-soft);
}
/* ── Who it is for ── */
.sell-who {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.8rem;
}
.sell-who h3 { font-family: var(--ff-head); font-size: 1.1rem; margin: 0 0 .4rem; }
.sell-who p { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--ink-soft); }
/* ── Apply ── */
.sell-apply { padding: 3.5rem 1.25rem 4.5rem; max-width: 720px; }
.sell-applylede { color: var(--ink-soft); line-height: 1.7; margin: 0 0 1.6rem; }
.sell-next { display: grid; gap: .7rem; margin: 0 0 1.5rem; padding-left: 1.4rem; }
.sell-next li { padding-left: .25rem; }
.sell-next li::marker { color: var(--accent); font-weight: 700; }
.sell-next strong { color: var(--ink); font-size: .9rem; }
.sell-next span { color: var(--ink-soft); font-size: .86rem; line-height: 1.5; }
.sell-form { display: flex; flex-direction: column; gap: 1.1rem; }
.sell-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem; }
.sell-field { display: flex; flex-direction: column; }
.sell-field label {
font-size: .84rem;
font-weight: 600;
color: var(--ink);
margin-bottom: .35rem;
}
.sell-field .opt { font-weight: 400; color: var(--ink-faint); }
.sell-field-hint { margin-top: .35rem; color: var(--ink-faint); font-size: .8rem; }
.sell-field input,
.sell-field select,
.sell-field textarea {
font: inherit;
font-size: .95rem;
padding: .65rem .8rem;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--paper);
color: var(--ink);
width: 100%;
}
.sell-field input, .sell-field select { min-height: 44px; }
.sell-field input:focus,
.sell-field select:focus,
.sell-field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(138,90,43,.13);
}
.sell-field textarea { resize: vertical; }
.sell-submit { align-self: flex-start; min-height: 44px; border: 0; cursor: pointer; padding: .75rem 2rem; font-size: .98rem; }
.sell-submit:disabled { cursor: not-allowed; opacity: .5; }
.sell-privacy { font-size: .85rem; color: var(--ink-faint); margin: 0; line-height: 1.6; }
.sell-start { border-bottom: 1px solid var(--line); }
.signup-notice { padding: .8rem 1rem; margin: 0 0 1.2rem; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); }
.signup-notice.bad { color: #8b2c27; border-color: #d8aaa5; background: #fff7f5; }
.signup-status-wrap { width: min(680px, calc(100% - 2rem)); margin: 3rem auto 5rem; }
.signup-status-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.25rem, 5vw, 2.5rem); }
.signup-status-card h1 { font-family: var(--ff-head); font-size: clamp(1.8rem, 5vw, 2.7rem); margin: .2rem 0 1rem; }
.signup-status-card p { color: var(--ink-soft); line-height: 1.7; }
.signup-status-summary { font-size: 1.03rem; }
.signup-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1.4rem 0; }
.signup-facts div { padding: .8rem; border-radius: 8px; background: var(--wash); }
.signup-facts small { display: block; color: var(--ink-faint); margin-bottom: .2rem; }
.signup-guidance { display: grid; gap: .75rem; margin: 1.3rem 0; }
.signup-guidance div { padding: .9rem 1rem; border-left: 3px solid var(--accent); background: var(--wash); }
.signup-guidance h2 { margin: 0 0 .25rem; font-size: .92rem; color: var(--ink); }
.signup-guidance p { margin: 0; font-size: .9rem; }
.signup-status-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.25rem; }
.signup-status-actions form, .signup-status-actions p { margin: 0; }
.signup-status-action { display: inline-flex; align-items: center; min-height: 44px; border: 0; cursor: pointer; font: inherit; }
.signup-refresh { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; }
.signup-fineprint { font-size: .85rem; }
@media (max-width: 520px) { .signup-facts { grid-template-columns: 1fr; } }
/* Off-screen rather than display:none — some bots skip hidden fields. */
.sell-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.sell-thanks {
background: var(--paper);
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
padding: 1.6rem 1.5rem;
}
.sell-thanks h3 { font-family: var(--ff-head); font-size: 1.2rem; margin: 0 0 .5rem; }
.sell-thanks p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 .6rem; }
.sell-thanks a { color: var(--accent); }
@media (max-width: 640px) {
.sell-hero { padding: 2.8rem 0 2.5rem; }
.sell-oneoff { align-items: stretch; flex-direction: column; gap: 1rem; margin-block: 1.25rem; }
.sell-oneoff-actions { align-items: stretch; }
.sell-oneoff-actions .mk-visit { text-align: center; }
.sell-textlink { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.sell-promises { gap: 1.4rem; padding-block: 2.5rem; }
.sell-band { padding: 2.5rem 0; }
.sell-plans { padding-block: 2.7rem; }
}
/* ══════════════════════════════════════════════════════════════
Quick look
Browsing a marketplace is comparing, and comparing means opening
and closing a lot of things. A full page load per glance makes
that miserable, and a marketplace whose every click ejects you
somewhere else never feels like a place.
══════════════════════════════════════════════════════════════ */
.ql {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(28, 26, 23, .62);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
overflow-y: auto;
}
.ql[hidden] { display: none !important; }
.ql-box {
position: relative;
background: var(--paper);
border-radius: var(--radius);
max-width: 820px;
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
overflow: hidden;
box-shadow: 0 24px 60px rgba(28, 26, 23, .3);
}
.ql-close {
position: absolute;
top: .5rem; right: .6rem;
z-index: 2;
border: 0;
/* Deliberately not palette colours. This sits on top of a photograph, so
the circle stays white and its cross stays dark in both themes -- taking
--ink here painted a pale cross onto a pale disc after dark. */
background: rgba(255, 255, 255, .85);
color: #1c1a17;
font-size: 1.6rem;
line-height: 1;
width: 2rem; height: 2rem;
border-radius: 50%;
cursor: pointer;
}
.ql-close:hover { background: #fff; }
.ql-media {
position: relative;
background: var(--ground);
display: flex;
align-items: center;
justify-content: center;
min-height: 280px;
/* The gallery pages sideways on a touch screen, and the browser must not
take the horizontal drag for a scroll of its own before the handler in
quicklook.js sees it. */
touch-action: pan-y;
}
.ql-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ql-ph { font-size: 3rem; color: var(--ink-faint); }
/* ── The gallery ──
Every control here hides itself when the listing has one photograph, so a
single-image listing looks exactly as it did before any of this existed. */
.ql-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,.9);
color: var(--ink);
box-shadow: 0 2px 10px rgba(28,26,23,.22);
cursor: pointer;
transition: background .15s;
}
.ql-nav:hover { background: #fff; }
.ql-nav[hidden] { display: none; }
.ql-nav.prev { left: .6rem; }
.ql-nav.next { right: .6rem; }
.ql-nav svg { width: 20px; height: 20px; }
.ql-nav path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ql-count {
position: absolute;
top: .6rem;
left: .6rem;
padding: .2rem .55rem;
border-radius: 50px;
background: rgba(28,26,23,.62);
color: #fff;
font-size: .72rem;
font-variant-numeric: tabular-nums;
}
.ql-count[hidden] { display: none; }
.ql-dots {
position: absolute;
left: 0;
right: 0;
bottom: .6rem;
display: flex;
justify-content: center;
gap: .35rem;
}
.ql-dots[hidden] { display: none; }
.ql-dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,.55);
box-shadow: 0 0 0 1px rgba(28,26,23,.25);
cursor: pointer;
transition: background .15s, transform .15s;
}
.ql-dot.on { background: #fff; transform: scale(1.25); }
/* A dot is 8px of paint and needs to be a 44px target, so the target is a
transparent box around it rather than a bigger dot. */
@media (pointer: coarse) {
.ql-dots { gap: 0; bottom: .3rem; }
.ql-dot {
width: 30px;
height: 30px;
background: none;
box-shadow: none;
position: relative;
}
.ql-dot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
border-radius: 50%;
background: rgba(255,255,255,.55);
box-shadow: 0 0 0 1px rgba(28,26,23,.25);
}
.ql-dot.on { transform: none; }
.ql-dot.on::after { background: #fff; transform: scale(1.25); }
}
.ql-body { padding: 1.7rem 1.6rem; }
.ql-shop {
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: .4rem;
}
.ql-name {
font-family: var(--ff-head);
font-size: 1.5rem;
line-height: 1.2;
margin: 0 0 .5rem;
color: var(--ink);
/* Shop owners name their own products, and some of those names are one
unbroken run of characters. Without this the tail of the name pushed past
the edge of the box and was clipped by it. */
overflow-wrap: anywhere;
hyphens: auto;
}
.ql-meta { min-height: 1rem; }
.ql-cond {
font-size: .72rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink-faint);
}
.ql-price { display: flex; align-items: baseline; gap: .5rem; margin: .5rem 0 .9rem; }
.ql-price strong { font-size: 1.6rem; color: var(--ink); }
.ql-price s { color: var(--ink-faint); font-size: .95rem; }
/* The description keeps the panel one size and moves inside it.
It has been three things now. It was max-height with overflow:hidden, which
cut a long description off mid-word with nothing to say it had happened.
Then it was trimmed to a couple of hundred characters in JavaScript, which
was honest about the cut but made the pop-up useless for exactly the
listings that had something worth reading. Now the whole of what the index
carries is here, and the box scrolls -- so the panel does not grow, the
buttons under it do not move down the screen, and nothing is hidden. */
.ql-descbox {
position: relative;
max-height: 10rem;
overflow-y: auto;
overscroll-behavior: contain;
margin: 0 0 1.2rem;
}
.ql-descbox[hidden] { display: none; }
.ql-desc {
color: var(--ink-soft);
line-height: 1.7;
font-size: .93rem;
margin: 0;
overflow-wrap: anywhere;
}
/* "There is more below", and only while there is. Sticky rather than absolute
so it stays at the foot of the box as the text moves under it; the class
comes off at the bottom, from quicklook.js. */
.ql-descbox::after {
content: '';
position: sticky;
bottom: 0;
display: block;
height: 1.75rem;
margin-top: -1.75rem;
background: linear-gradient(to top, var(--paper), transparent);
pointer-events: none;
transition: opacity .15s ease;
}
.ql-descbox.at-end::after { opacity: 0; }
.ql-details {
display: grid; grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
gap: .35rem .8rem; border-top: 1px solid var(--line); margin: -.35rem 0 1rem;
padding-top: .75rem; font-size: .8rem;
}
.ql-details[hidden] { display: none; }
.ql-details dt { color: var(--ink-faint); font-weight: 600; }
.ql-details dd { color: var(--ink-soft); margin: 0; overflow-wrap: anywhere; }
.ql-oos {
font-weight: 700;
color: var(--sale);
text-transform: uppercase;
letter-spacing: .05em;
font-size: .82rem;
margin: 0 0 .9rem;
}
.ql-go { display: inline-block; margin-bottom: .7rem; }
/* The row below the primary action: where to go next, and how to send it to
somebody. Both secondary to "See it in the shop", which is the point of the
whole panel. */
.ql-secondary {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .5rem 1rem;
margin-bottom: 1rem;
}
.ql-shoplink {
font-size: .88rem;
color: var(--ink-soft);
text-decoration: none;
}
.ql-shoplink:hover { color: var(--accent); text-decoration: underline; }
.ql-share {
background: none;
border: 1px solid var(--line);
border-radius: 50px;
padding: .35rem .85rem;
font: inherit;
font-size: .82rem;
color: var(--ink-soft);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: .35rem;
}
.ql-share:hover { border-color: var(--accent); color: var(--accent); }
.ql-share:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Feedback as a tooltip over the button, not a line in the flow: as a
paragraph it grew and shrank the panel by a line each time somebody copied
a link, moving everything below it. Absolutely positioned, so it costs no
layout, and still role="status" so it is announced. */
.ql-share-wrap { position: relative; display: inline-flex; }
.ql-said {
position: absolute;
bottom: calc(100% + .45rem);
left: 50%;
transform: translate(-50%, .25rem);
z-index: 5;
background: var(--ink);
color: var(--paper);
font-size: .76rem;
line-height: 1.3;
white-space: nowrap;
padding: .34rem .6rem;
border-radius: 6px;
box-shadow: 0 4px 14px rgba(28, 26, 23, .22);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.ql-said::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--ink);
}
.ql-said.show {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
.ql-said { transition: opacity .01s, visibility 0s linear .01s; }
.ql-said.show { transition: opacity .01s, visibility 0s; }
}
/* Centred. It is a disclaimer under a pair of buttons, not a paragraph of
the listing, and ranged left it read as the start of another sentence
about the product. */
.ql-note {
text-align: center;
font-size: .8rem;
color: var(--ink-faint);
line-height: 1.55;
margin: 0;
padding-top: .9rem;
border-top: 1px solid var(--line);
}
@media (max-width: 660px) {
.ql { align-items: flex-end; padding: 0; overflow: hidden; }
.ql-box {
grid-template-columns: 1fr;
max-width: none;
max-height: 92vh;
max-height: 92dvh;
border-radius: 18px 18px 0 0;
overflow-y: auto;
}
.ql-close { top: .6rem; right: .65rem; width: 44px; height: 44px; font-size: 1.5rem; }
.ql-media { min-height: 0; height: clamp(190px, 30vh, 250px); }
.ql-body { padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
.ql-name { font-size: 1.3rem; }
.ql-price { margin: .35rem 0 .7rem; }
.ql-price strong { font-size: 1.4rem; }
.ql-desc { font-size: .88rem; line-height: 1.55; }
/* Shorter here, because the sheet itself scrolls: the actions have to stay
within reach of the first view rather than sitting under a wall of text. */
.ql-descbox { max-height: 7.5rem; margin-bottom: .9rem; }
.ql-nav { width: 44px; height: 44px; }
.ql-nav.prev { left: .4rem; }
.ql-nav.next { right: .4rem; }
/* Stacked on a narrow screen, side by side is a squeeze and the share pill
ends up a 30px tap target. */
.ql-secondary { flex-direction: column; align-items: stretch; }
.ql-share-wrap { display: flex; }
.ql-share { flex: 1; justify-content: center; padding: .55rem .85rem; }
}
/* ── Footer nav ── */
.mk-footnav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.2rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--line);
}
/* Any link in the footer, not only the ones in the nav.
"Browse the marketplace" on sell.php sat in a outside the nav and so
had no styling at all: it fell back to the browser's default blue and
underline, which is loud against the warm light palette and close to
unreadable on the dark one. Fixing that one link would have left the next
one to make the same mistake, so the footer styles its own links and the
nav's rules below simply narrow it. */
.mk-foot a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.mk-foot a:hover { color: var(--accent); }
.mk-footnav a { color: var(--ink-soft); text-decoration: none; font-size: .88rem; }
.mk-footnav a:hover { color: var(--accent); text-decoration: underline; }
/* The page you are on, in the footer as in the header: weight, never colour.
A colour here would have to be paired with a background to stay legible in
both themes, and a footer link is not a chip. */
.mk-footnav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
/* The way back out of a page that hangs off another one. */
.mk-backlink { margin: 0 0 .9rem; font-size: .88rem; }
.mk-backlink a { color: var(--ink-soft); text-decoration: none; }
.mk-backlink a:hover { color: var(--accent); }
/* Was an inline style with a fixed dark red in it, which after dark became
dark red on near-black. */
.mk-formerror {
margin: 0 0 1rem;
padding: .7rem .9rem;
border: 1px solid var(--sale);
border-radius: 10px;
background: color-mix(in srgb, var(--sale) 12%, var(--paper));
color: var(--ink);
font-size: .9rem;
}
/* ══════════════════════════════════════════════════════════════
The basket — a route sheet
Reads as an itinerary rather than a checkout, because that is what
it is. Each shop takes its own payment; this page never does.
══════════════════════════════════════════════════════════════ */
.bk-main { padding: 2.2rem 1.25rem 4rem; max-width: 820px; }
.bk-h1 { font-family: var(--ff-head); font-size: 1.9rem; margin: 0 0 .6rem; }
.bk-lede { color: var(--ink-soft); line-height: 1.7; margin: 0 0 1.6rem; }
.bk-progress {
background: var(--paper);
border: 1px solid var(--accent);
border-radius: var(--radius);
padding: .8rem 1.1rem;
margin-bottom: 1.4rem;
font-size: .93rem;
}
.bk-leg {
background: var(--paper);
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
padding: 1.2rem 1.3rem;
margin-bottom: 1rem;
}
.bk-leg.done { border-left-color: #57a773; opacity: .72; }
.bk-leg-head { display: flex; align-items: flex-start; gap: .9rem; }
.bk-leg-head h2 { font-family: var(--ff-head); font-size: 1.2rem; margin: 0; }
.bk-step {
flex: none;
width: 1.7rem; height: 1.7rem;
border-radius: 50%;
background: var(--accent);
color: var(--on-accent);
display: flex; align-items: center; justify-content: center;
font-size: .85rem; font-weight: 700;
}
.bk-leg.done .bk-step { background: #57a773; }
.bk-leg-meta { color: var(--ink-soft); font-size: .86rem; margin-top: .2rem; }
.bk-warn { color: var(--sale); }
.bk-tag {
margin-left: auto;
font-size: .68rem; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
padding: .18rem .55rem; border-radius: 50px;
}
.bk-tag.ok { background: rgba(87,167,115,.16); color: #3d7a53; }
.bk-items { list-style: none; margin: .9rem 0 0; padding: 0; }
.bk-items li {
display: flex; align-items: center; gap: .6rem;
padding: .4rem 0;
border-top: 1px solid var(--line);
font-size: .93rem;
}
.bk-items a { color: var(--ink); text-decoration: none; flex: 1; }
.bk-items a:hover { color: var(--accent); text-decoration: underline; }
.bk-qty { color: var(--ink-faint); }
.bk-price { font-variant-numeric: tabular-nums; }
.bk-rm button {
border: 0; background: none; color: var(--ink-faint);
font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0 .2rem;
}
.bk-rm button:hover { color: var(--sale); }
.bk-go { display: inline-block; margin-top: 1rem; }
.bk-go-note { font-size: .85rem; color: var(--ink-soft); margin: .55rem 0 0; line-height: 1.6; }
.bk-foot { margin-top: 2rem; }
.bk-total { font-size: 1.1rem; font-weight: 600; }
.bk-fineprint { font-size: .85rem; color: var(--ink-faint); line-height: 1.65; margin: .5rem 0 0; }
.bk-details { margin: 1.4rem 0; }
.bk-details summary { cursor: pointer; font-weight: 600; font-size: .93rem; }
.bk-shopper { display: flex; flex-direction: column; gap: .4rem; max-width: 380px; margin-top: .8rem; }
.bk-shopper label { font-size: .82rem; font-weight: 600; }
.bk-shopper input {
font: inherit; padding: .55rem .7rem;
border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
}
.bk-shopper button { align-self: flex-start; border: 0; cursor: pointer; margin-top: .4rem; }
.bk-clear { margin-top: 1.4rem; }
.bk-clear button {
border: 0; background: none; color: var(--ink-faint);
font-size: .85rem; text-decoration: underline; cursor: pointer; padding: 0;
}
.bk-clear button:hover { color: var(--sale); }
.ql-basket { margin: 0 0 .7rem; }
.ql-add {
font: inherit;
font-weight: 600;
font-size: .95rem;
padding: .7rem 1.6rem;
border: 1px solid var(--accent);
border-radius: 50px;
background: var(--accent);
color: var(--on-accent);
cursor: pointer;
width: 100%;
}
.ql-add:hover { background: var(--accent-dk); }
.ql-go { display: block; text-align: center; }
/* ══════════════════════════════════════════════════════════════
Clearing-out sales
Visually distinct from the shops, because they are a different
promise: a neighbour with a loft to empty, not a business. Above
the grid because this is the inventory that changes week to week,
and changing inventory is what makes a marketplace worth
revisiting.
══════════════════════════════════════════════════════════════ */
.sale-strip { margin-bottom: 2rem; }
.sale-strip-h {
font-family: var(--ff-head);
font-size: 1.25rem;
margin: 0 0 .9rem;
display: flex;
align-items: baseline;
gap: 1rem;
}
.sale-strip-h a { font-family: var(--ff-body); font-size: .85rem; color: var(--accent); text-decoration: none; }
.sale-strip-h a:hover { text-decoration: underline; }
.sale-strip-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 1rem;
}
.sale-card {
background: var(--paper);
border: 1px solid var(--line);
border-left: 3px solid var(--spine);
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
color: inherit;
display: block;
transition: box-shadow .2s ease, transform .2s ease;
}
.sale-card:hover { box-shadow: 0 8px 26px rgba(28,26,23,.10); transform: translateY(-2px); }
.sale-card-img {
height: 120px;
background-size: cover;
background-position: center;
background-color: var(--ground);
}
.sale-card-img.empty {
/* Drawn once as a real file rather than inlined per-card: a background-image
loaded this way is a cacheable, unchanging asset -- there is exactly one
"no photo" state, so it does not belong in the markup PHP repeats for
every listing that lacks one. */
background-image: url('sale-placeholder.svg');
background-repeat: no-repeat;
background-position: center 62%;
background-size: 108px auto;
}
.sale-card-body { padding: .8rem .9rem 1rem; }
.sale-card-body h3 { font-family: var(--ff-head); font-size: 1rem; font-weight: 500; margin: .35rem 0 .3rem; }
.sale-card-meta { font-size: .82rem; color: var(--ink-soft); }
/* ── The clearing-out page ──
The same cards as the strip, laid out down the page instead of off the side
of it. sales.php explains why that is a different page rather than a taller
strip. */
.sale-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 1.1rem;
}
.sale-page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 1.4rem;
}
.sale-page-head h1 { font-family: var(--ff-head); font-size: 1.9rem; margin: 0 0 .35rem; }
.sale-page-head .mk-blurb { margin: 0; max-width: 46ch; }
.sale-page-filter {
display: flex;
align-items: center;
gap: .55rem;
flex-wrap: wrap;
margin-bottom: 1.2rem;
}
.sale-page-filter label { font-size: .82rem; color: var(--ink-soft); }
/* The field and its button, as one object -- the same arrangement the header
uses. The wrapper exists because this form also carries a label and a Clear
link, so the button has to be positioned against the input rather than
against the form. */
.sale-page-field { position: relative; display: flex; flex: 1 1 240px; min-width: 0; --search-btn: 30px; }
.sale-page-filter input {
flex: 1;
min-width: 0;
font: inherit;
padding: .55rem 3rem .55rem 1rem;
border: 1px solid var(--line);
border-radius: 50px;
background: var(--paper);
color: var(--ink);
}
.sale-page-filter input:focus { outline: none; border-color: var(--accent); }
.sale-page-filter button {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
width: var(--search-btn);
height: var(--search-btn);
min-height: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--accent);
color: var(--on-accent);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sale-page-filter button:hover { background: var(--accent-dk); }
.sale-page-filter button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sale-page-filter button svg { width: 17px; height: 17px; display: block; }
.sale-page-filter button circle,
.sale-page-filter button path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sale-page-clear { color: var(--ink-soft); font-size: .85rem; }
.sale-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
padding: 2rem 0 .5rem;
}
.sale-pager .mk-pagenote { margin: 0; }
/* Two links in the strip's heading now, so they get a row of their own rather
than one being pushed against the title. */
.sale-strip-links { display: inline-flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 640px) {
.sale-page-field { --search-btn: 36px; }
.sale-page-filter input { min-height: 44px; }
.sale-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.sale-page-head h1 { font-size: 1.5rem; }
.sale-page-filter label { flex-basis: 100%; }
}
@media (pointer: coarse) {
/* The input only. The button is a circle sized to sit inside it, and a
touch-target rule must not reach a control that is already sized to fit
within something else -- that is how the header's ended up a 36x44 oval. */
.sale-page-filter input { min-height: 44px; }
}
/* Moderator preview banner. Deliberately loud: this page looks exactly like a
published sale, and the one thing the reader must not do is assume it is
one. */
.sale-preview {
background: rgba(var(--bad-rgb, 228, 99, 92), .10);
border: 1px solid var(--sale);
border-left-width: 4px;
border-radius: var(--radius);
padding: .9rem 1.1rem;
margin-bottom: 1.4rem;
font-size: .9rem;
line-height: 1.6;
}
.sale-preview p { margin: 0 0 .35rem; }
.sale-preview p:last-child { margin-bottom: 0; }
.sale-preview-h {
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
font-size: .74rem;
color: var(--sale);
}
.sale-preview a { color: var(--accent); }
.sale-badge {
display: inline-block;
font-size: .66rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--on-spine);
background: var(--spine);
padding: .18rem .5rem;
border-radius: 50px;
}
/* ── One sale ── */
.sale-blurb { line-height: 1.75; color: var(--ink-soft); max-width: 62ch; }
.sale-photos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: .8rem;
margin: 1.4rem 0;
}
.sale-photos img { width: 100%; border-radius: var(--radius); display: block; }
.sale-list { list-style: none; margin: 0; padding: 0; max-width: 560px; }
.sale-list li {
display: flex; justify-content: space-between; gap: 1rem;
padding: .55rem 0;
border-bottom: 1px solid var(--line);
}
.sale-contact {
margin-top: 2.2rem;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.3rem 1.4rem;
max-width: 620px;
}
.sale-contact h2 { font-family: var(--ff-head); font-size: 1.2rem; margin: 0 0 .5rem; }
.sale-contact a { color: var(--accent); }
.sale-contact { scroll-margin-top: 9rem; }
.sale-contact-intro { color: var(--ink-soft); font-size: .93rem; line-height: 1.65; }
.sale-contact-details summary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: .6rem 1.2rem;
background: var(--accent);
color: var(--on-accent);
border-radius: 50px;
font-weight: 600;
font-size: .9rem;
cursor: pointer;
list-style: none;
}
.sale-contact-details summary::-webkit-details-marker { display: none; }
.sale-contact-details summary::after { content: '+'; margin-left: .6rem; }
.sale-contact-details[open] summary::after { content: '\2212'; }
.sale-contact-details summary:hover { background: var(--accent-dk); }
.sale-contact-details summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sale-contact-form { margin-top: 1.2rem; }
.sale-contact-form .sell-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.sale-contact-form input, .sale-contact-form textarea { min-width: 0; font-size: 1rem; }
.sale-contact-error { color: var(--sale); line-height: 1.6; }
.sale-contact-success { border-left: 3px solid var(--accent); padding-left: 1rem; margin-top: 1rem; }
.sale-contact-success h3 { margin: 0 0 .5rem; font-size: 1rem; }
.sale-contact-success p { color: var(--ink-soft); line-height: 1.6; }
/* Wanted board — intentionally text-first. Requests are a noticeboard, not
pretend products, so the useful details get the space an image would take. */
.request-filter {
display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
margin: 1.4rem 0 .8rem;
}
.request-filter .sale-page-field { min-width: min(100%, 280px); }
.request-filter input, .request-filter select {
min-height: 42px; border: 1px solid var(--line); border-radius: 999px;
background: var(--paper); color: var(--ink); padding: .65rem 1rem; font: inherit;
}
.request-filter input { width: 100%; }
.request-filter select { padding-right: 2.2rem; }
.request-filter .mk-visit { border: 0; cursor: pointer; min-height: 42px; padding-block: .65rem; }
.request-filter > a { color: var(--ink-soft); font-size: .85rem; }
.request-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.request-card {
display: flex; flex-direction: column; min-width: 0; padding: 1.2rem;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.request-card:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(28,26,23,.09); }
.request-kind { color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.request-card h2 { font-family: var(--ff-head); font-size: 1.2rem; margin: .45rem 0 .55rem; }
.request-card p { color: var(--ink-soft); line-height: 1.55; margin: 0 0 1rem; }
.request-meta { display: flex; justify-content: space-between; gap: .75rem; margin-top: auto; color: var(--ink-soft); font-size: .8rem; }
.request-meta strong { color: var(--ink); white-space: nowrap; }
.request-card small { margin-top: .55rem; color: var(--ink-faint); }
.request-details { max-width: 66ch; color: var(--ink-soft); font-size: 1.03rem; line-height: 1.8; }
.request-form-page .bk-lede { max-width: 64ch; }
@media (max-width: 760px) {
.request-grid { grid-template-columns: 1fr; gap: .75rem; }
.request-filter .sale-page-field { flex: 1 1 100%; }
.request-filter select { flex: 1; }
}
/* ── Posting one ── */
/* min-inline-size, because
is special: its default is min-content
rather than auto, so it refuses to shrink below the widest thing inside it
no matter what the children are told. Letting the inputs shrink was not
enough on its own. */
.sale-items {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1rem 1.1rem;
min-inline-size: 0;
}
.sale-items legend { font-size: .84rem; font-weight: 600; padding: 0 .4rem; }
.sale-item-row { display: flex; gap: .6rem; margin-bottom: .5rem; }
/* min-width:0 for the same reason the header search needs it: a flex item
defaults to min-width:auto, and an