/* ==========================================================================
The imported catalogue. Everything here came in with the eBay exports:
stock markers, the back-of-card hover, the empty states, and the card hits
that appear under the home page's search field.
Kept separate from home.css and set.css on purpose. Those two describe the
pages; this one describes the data that arrived later, so an import can add
to the site's styling without reopening either of them.
Loaded last, after styles.css and the page's own sheet.
========================================================================== */
/* --------------------------------------------------------- stock and state */
/* Copies of the same card are one tile, not five. The marker sits in the well
because it is a fact about the photograph's subject, not a sixth fact in the
body — the five facts stay five. */
.card__qty {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.2rem 0.45rem;
background: rgba(11, 60, 107, 0.9);
color: #fff;
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
font-variant-numeric: lining-nums;
}
/* Sold out, and still on the shelf. A card that has just gone is the one a
visitor is most likely to be hunting, and an empty space answers nothing;
the tile stays, dimmed, and says which it is. Amber rather than red — this
is not an error, it is a card that sold. */
.card__qty--out {
background: #8a5a10;
letter-spacing: 0.1em;
}
.card.is-out .card__well img { opacity: 0.62; }
.card.is-out .card__price { color: #8a5a10; font-size: 0.82rem; }
.card.is-out:hover .card__well img,
.card.is-out:focus-within .card__well img { opacity: 0.85; }
.find.is-out .find__price {
color: #8a5a10;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.find.is-out img { opacity: 0.66; }
/* One photograph to a well, in the single grid cell the well defines. */
.card__well img { grid-area: 1 / 1; }
/* Two cards to a row leaves about twenty characters for the metadata line.
Tracking is the first thing to give, before the type size. */
@media (max-width: 30rem) {
.card__meta { letter-spacing: 0.08em; }
.card__cond { letter-spacing: 0.06em; }
}
/* ------------------------------------------------------------ empty shelf */
/* An brings its own clear glyph in WebKit, which lands
right beside the one the page draws. Two crosses in one field is a bug on
sight, so the native one goes. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
/* set.css gives .card its own display, and an author rule beats the browser's
built-in [hidden] { display: none }. So the filter has to say it again, or
hiding a card does nothing at all. */
.card[hidden] { display: none; }
.grid__empty {
grid-column: 1 / -1;
padding: clamp(2rem, 5vw, 3.5rem) 0;
text-align: center;
color: var(--muted);
}
.grid__empty[hidden] { display: none; }
.grid__empty svg { width: 2.4rem; height: auto; stroke: var(--navy); opacity: 0.35; }
.grid__empty p { margin: 0.8rem 0 0.3rem; color: var(--navy-deep); font-size: 1.05rem; }
.grid__empty span { font-size: 0.88rem; }
/* --------------------------------------------------------------- card hits */
/* Card results sit directly under the search field while a query is live --
they used to sit inside the sets panel most of a screen further down.
Deliberately not the card grid from the set pages: this is a way through to
a set, not a shelf to browse, so the photograph is a thumbnail and the row
reads across. */
.finds { padding-bottom: 0; } /* the results column owns the spacing now */
.finds[hidden] { display: none; }
.finds__title { color: var(--navy-deep); margin-bottom: 0.85rem; }
.finds__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: 0.6rem;
}
/* A div with a stretched link inside it, not one big : the stack button has
to sit in the row, and a button cannot go inside an anchor. The whole row is
still a single click through to the card -- .find__go's ::after covers it --
and the button sits above that on its own layer. */
.find {
position: relative;
display: grid;
grid-template-columns: 2.6rem 1fr auto auto;
align-items: center;
gap: 0.15rem 0.85rem;
padding: 0.5rem 0.7rem 0.5rem 0.5rem;
background: var(--white);
border: 1px solid var(--rule-white);
color: inherit;
transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.find:hover, .find:focus-within { border-color: var(--navy); background: var(--white-cool); }
.find__go {
grid-column: 2;
text-decoration: none;
color: inherit;
}
.find__go::after { content: ""; position: absolute; inset: 0; } /* the row is the link */
.find img, .find__blank {
grid-row: 1 / span 2;
width: 2.6rem;
height: 3.6rem;
display: block;
object-fit: cover;
background: var(--wash);
}
.find__name { font-size: 0.95rem; line-height: 1.2; color: var(--navy-deep); }
.find__meta {
grid-column: 2;
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.find__price {
grid-row: 1 / span 2;
grid-column: 3;
font-size: 0.95rem;
font-variant-numeric: lining-nums;
color: var(--navy-deep);
}
.finds__more { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--muted); }
/* The + that stacks a card. Small, quiet until wanted, and above the stretched
link so it is the button that gets the click and not the row. A stacked card
turns the button solid and swaps the + for a tick; pressing it again takes
the card back out, which is why it is a toggle and carries aria-pressed. */
.find__add {
grid-row: 1 / span 2;
grid-column: 4;
position: relative;
z-index: 1;
flex: none;
width: 2rem;
height: 2rem;
display: grid;
place-items: center;
cursor: pointer;
font: inherit;
font-size: 1.1rem;
line-height: 1;
color: var(--navy);
background: var(--white);
border: 1px solid var(--rule-white);
transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
color 0.18s var(--ease), transform 0.18s var(--ease);
}
.find__add:hover { border-color: var(--navy); background: var(--wash); }
.find__add:active { transform: scale(0.92); }
.find__add.is-in {
background: var(--navy);
border-color: var(--navy);
color: #fff;
}
.find.is-out .find__add { display: none; }
/* ------------------------------------------------------------------ stack */
/* The stack: a bar pinned to the bottom of every page, and the panel it opens.
It is a bar rather than a block in the page because it has to be reachable
from the home page results, from a set shelf and from a type shelf, and on
those shelves there is nowhere in the flow it could sit where somebody
scrolling cards would still find it. It only exists once there is a card in
it, so an empty visit never sees it.
What it is not: a checkout. Every card in the shop is its own eBay listing,
so this collects listings and then walks you out to them one at a time. See
the note at the top of stack.js for why the version that tried to fill
eBay's cart directly could not work. */
.stack {
position: fixed;
inset: auto 0 0 0;
z-index: 60;
display: flex;
flex-direction: column;
font-family: inherit;
}
.stack[hidden] { display: none; }
/* The bar covers the last inch of the page, so the page gives it back. */
body.has-stack { padding-bottom: 4.4rem; }
.stack__bar {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.6rem clamp(0.8rem, 3vw, 1.6rem);
background: var(--navy);
color: #fff;
box-shadow: 0 -14px 30px -24px rgba(7, 40, 74, 0.9);
}
.stack__toggle {
display: flex;
align-items: center;
gap: 0.55rem;
margin-right: auto;
padding: 0.3rem 0.1rem;
background: none;
border: 0;
font: inherit;
font-size: 0.92rem;
color: inherit;
cursor: pointer;
}
.stack__pip {
display: grid;
place-items: center;
min-width: 1.55rem;
height: 1.55rem;
padding: 0 0.35rem;
background: #fff;
color: var(--navy-deep);
font-size: 0.82rem;
font-weight: 600;
font-variant-numeric: lining-nums;
border-radius: 999px;
}
.stack__label { text-decoration: underline; text-underline-offset: 0.2em; }
.stack__toggle:hover .stack__label { text-decoration-thickness: 2px; }
.stack__sum {
font-size: 0.8rem;
font-variant-numeric: lining-nums;
color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 34rem) { .stack__sum { display: none; } }
.stack__go {
flex: none;
padding: 0.5rem 0.95rem;
background: #fff;
border: 0;
font: inherit;
font-size: 0.86rem;
font-weight: 600;
color: var(--navy-deep);
cursor: pointer;
transition: background 0.18s var(--ease);
}
.stack__go:hover { background: var(--wash); }
/* The panel opens upward out of the bar, and scrolls inside itself: a stack of
thirty cards must not push the bar off the screen. */
.stack__panel {
max-height: min(62vh, 34rem);
overflow-y: auto;
background: var(--white);
border-top: 1.5px solid var(--navy);
box-shadow: 0 -30px 60px -40px rgba(7, 40, 74, 0.6);
}
.stack__panel[hidden] { display: none; }
.stack__inner {
max-width: 54rem;
margin: 0 auto;
padding: 1.1rem clamp(0.9rem, 3vw, 1.6rem) 1.2rem;
}
.stack__title { color: var(--navy-deep); margin: 0 0 0.7rem; }
.stack__list { list-style: none; margin: 0; padding: 0; }
.stack__row {
display: grid;
grid-template-columns: 1.2rem minmax(0, 1fr) auto auto 1.6rem;
align-items: baseline;
gap: 0.3rem 0.7rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--rule-white);
}
.stack__tick {
font-size: 0.8rem;
color: var(--cyan-on-paper);
font-variant-numeric: lining-nums;
}
.stack__name {
font-size: 0.98rem;
color: var(--navy-deep);
text-decoration: none;
overflow-wrap: anywhere;
}
.stack__name:hover { color: var(--cyan-on-paper); }
.stack__row.is-open .stack__name { color: var(--muted); }
.stack__meta {
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.stack__price {
font-size: 0.9rem;
font-variant-numeric: lining-nums;
color: var(--navy-deep);
}
.stack__ebay {
grid-column: 2 / 5;
justify-self: start;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cyan-on-paper);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.stack__ebay:hover { color: var(--navy); }
.stack__row.is-open .stack__ebay { color: var(--muted); }
.stack__drop {
grid-row: 1;
grid-column: 5;
padding: 0;
background: none;
border: 0;
font: inherit;
font-size: 1.05rem;
line-height: 1;
color: var(--muted);
cursor: pointer;
}
.stack__drop:hover { color: var(--navy); }
.stack__note { margin: 0.9rem 0 0.9rem; font-size: 0.88rem; color: var(--muted); }
.stack__note b { color: var(--navy-deep); }
.stack__foot {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.7rem;
}
.stack__foot--minor { margin-top: 0.9rem; }
/* The one button that does the work, so it is the only one that looks like a
button: everything beside it is a plain word. */
.stack__next {
padding: 0.62rem 1.05rem;
background: var(--navy);
border: 0;
font: inherit;
font-size: 0.9rem;
font-weight: 600;
color: #fff;
cursor: pointer;
transition: background 0.18s var(--ease);
}
.stack__next:hover { background: var(--navy-deep); }
.stack__next[hidden] { display: none; }
.stack__prog { margin: 0; font-size: 0.85rem; color: var(--muted); }
.stack__plain {
padding: 0.4rem 0.2rem;
background: none;
border: 0;
border-bottom: 1px solid var(--rule-strong, #c8d4e0);
font: inherit;
font-size: 0.82rem;
color: var(--muted);
cursor: pointer;
}
.stack__plain:hover { color: var(--navy); border-color: var(--navy); }
.stack__plain[hidden] { display: none; }
.stack__said { font-size: 0.85rem; color: var(--cyan-on-paper); }
@media (max-width: 34rem) {
.stack__row { grid-template-columns: 1.1rem minmax(0, 1fr) auto 1.5rem; }
.stack__price { grid-column: 3; }
.stack__meta { grid-column: 2 / 4; grid-row: 2; }
.stack__ebay { grid-column: 2 / 4; grid-row: 3; }
.stack__drop { grid-column: 4; }
.stack__next { flex: 1 1 100%; text-align: center; }
}
/* ------------------------------------------------------ stacking from a tile */
/* The shelves are the other half of the answer to 'where do I press add?': the
home page results had the button and the set pages did not, which meant the
only way to stack a card while browsing a set was to go back and search for
it. Now every tile carries one, top right of the artwork, over the corner
the picture has least to say in. */
.card__add {
position: absolute;
top: 0.4rem;
right: 0.4rem;
z-index: 2;
display: flex;
align-items: center;
gap: 0.3rem;
height: 1.85rem;
padding: 0 0.5rem;
background: rgba(255, 255, 255, 0.94);
border: 1px solid var(--rule-white);
border-radius: 999px;
font: inherit;
font-size: 1rem;
line-height: 1;
color: var(--navy);
cursor: pointer;
box-shadow: 0 4px 10px -6px rgba(7, 40, 74, 0.5);
transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
color 0.18s var(--ease);
}
/* The word rides in on hover and focus. It is a pseudo-element because the
alternative is eleven more characters on seventeen thousand tiles, and the
button's real label is the screen-reader text inside it either way. */
.card__add::before {
content: "Stack";
max-width: 0;
overflow: hidden;
font-size: 0.63rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
transition: max-width 0.22s var(--ease);
}
.card__add.is-in::before { content: "Stacked"; }
.card:hover .card__add::before,
.card__add:hover::before,
.card__add:focus-visible::before { max-width: 4.2rem; }
.card__add:hover { border-color: var(--navy); background: #fff; }
.card__add:active { transform: scale(0.94); }
.card__add.is-in {
background: var(--navy);
border-color: var(--navy);
color: #fff;
}
.card__add.is-in:hover { background: var(--navy-deep); }
/* Nothing to stack on a card that has sold out, or on one the import never
matched to a listing -- those tiles keep the link and lose the button. */
.card.is-out .card__add { display: none; }
/* The tile is a div with a stretched link inside it rather than one big ,
because a button cannot go inside an anchor. Clicking anywhere on it still
opens the card. */
.card__go { text-decoration: none; color: inherit; }
.card__go::after { content: ""; position: absolute; inset: 0; z-index: 0; }
@media (prefers-reduced-motion: reduce) {
.card__add, .card__add::before { transition: none; }
.card:hover .card__add::before { max-width: 4.2rem; }
}
/* ============================================================ card detail */
/* The panel a card opens into. A