/**
* Filename: adam.css
* Location: /adam-collection/adam.css
* Revision: 3
* Date: 2026-08-06
* Changes: The page goes light. Rev 2 read adamarchive.org's theme.css,
* which forces #000 onto html and body, and painted the page black
* to match; the site as it actually renders puts its dark boxes on
* a light page instead. So --adam-page is now a light neutral, the
* content shell is a dark box floating on it with a slate border,
* and the masthead is a framed banner box rather than a full-bleed
* band. Everything inside the boxes is untouched.
* Prior Rev: 2 (adamarchive palette on a black page)
* 1 (Almond beige)
*
* WHAT THIS MEANS FOR THE TWO INTERFACES
* The original plan had the ADAM interface beige against the ColecoVision
* manager's black, on the reasoning that the two machines had different
* cases. What separates them now is the whole treatment, not one colour: the
* ColecoVision manager is a flat black page with yellow-on-black nav, and
* this one is adamarchive.org - a light page carrying framed dark boxes,
* blue-grey panels edged in red, brass header bars. A visitor knows which
* side they are on at a glance, and this side matches the sister site it
* shares a subject with.
*
* WHY EVERY COLOUR IS STILL A VARIABLE
* The palette has now changed twice. Keeping it in one block at the top means
* each change is an edit to that block rather than a search across the file -
* which is why rev 2 was a fifteen-line diff and rev 3 not much more.
*
* TWO DELIBERATE DEPARTURES FROM adamarchive.org's theme.css
* 1. The gold gradient is lifted about 12% in luminance. The original runs
* to #5B4D1A at its last stop, and black text on that is 2.5:1 - under
* the 3:1 floor even for large bold text, so the right-hand end of a
* header bar was the part you could not read. The lifted ramp keeps the
* brass look and puts the darkest stop at 3.9:1.
* 2. Small text does not use #4a7fc7. On these panels it is 3.5:1, which is
* fine for the 20px stat figures adamarchive uses it for and not fine for
* an 11px label. Small labels and catalogue ids use --adam-label instead,
* at 5.6:1.
*
* Contrast on the panel gradient, all past WCAG AA:
* body text #ffffff 14.4:1 muted #9fb0c4 6.5:1
* heading #ffff00 13.5:1 link #60a5fa 5.7:1
* label / id #8fb4e8 6.5:1 black on gold, darkest stop 3.9:1
*/
:root {
/* Page and frames.
The page is light and the content sits on it in dark boxes - which is
how adamarchive.org actually renders, whatever its theme.css says about
forcing black onto html and body. Nothing on this interface prints text
straight onto the page colour: every word is inside one of the dark
shells below, so the light background is a mat rather than a surface,
and no contrast pair depends on it.
--adam-page is a light neutral grey rather than #ffffff on purpose. Pure
white leaves the dark shells looking cut out of the screen; a couple of
percent of grey lets their borders and drop shadows read. Set it to
#ffffff if you want the harder edge. */
--adam-page: #ececec;
--adam-shell: #101922;
--adam-frame: #4a6076;
--adam-inner: #101922;
/* The signature panel: blue-grey, edged in red.
adamarchive.org's theme.css ends this ramp on rgba(26,26,26) - a neutral
near-black. On its page that reads blue because the panels there are tall
squares, so the 145deg sweep spends most of its length in the blue half.
These panels are wide and short: on a 260px card 96px high the sweep
clears the blue in the first inch and the rest is grey, which made a row
of cards look black rather than blue. The last two stops are pulled back
toward the blue so the ramp reads the same on any box shape. */
--adam-panel: linear-gradient(145deg,
rgba(40, 65, 93, .96) 0%,
rgba(29, 44, 66, .96) 55%,
rgba(22, 31, 46, .96) 100%);
--adam-panel-flat: #1e2a3d;
--adam-sunken: rgba(45, 55, 72, .95);
--adam-sunken-alt: rgba(58, 70, 88, .95);
--adam-hover-row: rgba(74, 127, 199, .35);
/* Lines */
--adam-rule: #cc3300;
--adam-rule-lt: #ff6633;
--adam-border: #cc3300;
--adam-border-soft: rgba(85, 105, 130, .55);
/* Type */
--adam-text: #ffffff;
--adam-muted: #9fb0c4;
--adam-faint: #7d8fa5;
--adam-heading: #ffff00;
--adam-link: #60a5fa;
--adam-label: #8fb4e8;
/* The brass header bar. See the note above on the luminance lift. */
--adam-gold: linear-gradient(135deg,
#a8985a 0%, #b9a96b 25%, #8a7a3e 50%,
#b9a96b 75%, #7a6a32 100%);
/* Buttons */
--adam-btn: linear-gradient(135deg, #2154a6 0%, #2968c4 50%, #1a4088 100%);
--adam-btn-hi: linear-gradient(135deg, #ffff00 0%, #ffd700 50%, #ffff00 100%);
--adam-btn-edge: #2154a6;
--adam-shadow: rgba(0, 0, 0, .5);
}
/* ---------------------------------------------------------------------------
Reset and base
--------------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Always reserve room for the vertical scrollbar.
*
* Without this, a page short enough to fit the window has no scrollbar and a
* long one does - so the viewport is 15px wider on the short page, and every
* centred thing on it sits 7 or 8px further right than on the page before.
* Measured: the wishlist reported clientWidth 1200 and browse 1185, and the
* content box moved with it. It reads as the layout twitching when you change
* page, which is exactly what it is.
*
* scrollbar-gutter is the modern way to say it and leaves no visible track.
* The fallback keeps older browsers steady the blunt way, and is behind
* @supports so the two can never both apply and reserve the gutter twice. */
html {
background: var(--adam-page);
scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
html { overflow-y: scroll; }
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: var(--adam-page);
color: var(--adam-text);
line-height: 1.6;
min-height: 100vh;
}
a { color: var(--adam-link); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--adam-heading); text-shadow: 0 0 8px rgba(255, 255, 0, .5); }
/* ---------------------------------------------------------------------------
Masthead
Same markup and same sticky wrapper as /collection/masthead.php - only the
paint differs. The logo band stays black because the logo is a JPEG on a
black field; underneath it the red rule and then the nav on a panel, which
is how adamarchive.org stacks its banner and its icon strip.
--------------------------------------------------------------------------- */
.cvhdr { background: #000000; border-radius: 9px 9px 0 0; overflow: hidden; }
.cvhdr-inner {
max-width: 1400px; margin: 0 auto; padding: 8px 22px;
display: flex; align-items: center; gap: 26px; flex-wrap: wrap; min-height: 86px;
}
.cvhdr-brand { display: block; flex: 0 0 auto; }
.cvhdr-brand img { display: block; height: auto; max-width: 100%; }
.cvhdr-spacer { flex: 1 1 auto; }
.cvhdr-ctx { text-align: right; flex: 0 1 auto; }
.cvhdr-where {
color: var(--adam-heading); font-size: 26px; font-weight: bold; line-height: 1.1;
text-transform: uppercase; letter-spacing: 1px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, .8), 0 0 20px rgba(255, 255, 0, .3);
}
.cvhdr-stats { color: var(--adam-muted); font-size: 12.5px; margin-top: 6px; }
.cvhdr-stats b {
color: var(--adam-heading); font-weight: normal;
font-family: 'Courier New', monospace;
}
.cvhdr-rule {
height: 3px;
background: linear-gradient(90deg, var(--adam-rule), var(--adam-rule-lt), var(--adam-rule));
}
.cvhdr-nav {
background: var(--adam-panel);
border-radius: 0 0 9px 9px;
}
.cvhdr-nav .nav-menu { max-width: 1400px; margin: 0 auto; padding: 8px 18px; text-align: left; }
/* The whole masthead pins as one block: branding, red rule and nav together,
so nothing has to be offset by the height of the thing above it at every
breakpoint.
On a light page the block also has to be a box rather than a full-bleed band,
or it reads as a black bar welded to the top of the window instead of the
framed banner adamarchive.org floats above its content. .cvhdr-stick is
therefore the mat - it carries the page colour so rows scrolling underneath
are hidden - and .cvhdr-box inside it is the framed banner. */
.site-header.cvhdr { position: static; }
.cvhdr-stick {
position: sticky; top: 0; z-index: 900;
background: var(--adam-page);
padding: 12px 14px 10px 14px;
}
.cvhdr-stick > * {
max-width: 1430px; margin-left: auto; margin-right: auto;
}
.cvhdr-stick .site-header.cvhdr { border: 2px solid var(--adam-frame); border-bottom: none; }
.cvhdr-stick .cvhdr-nav {
border: 2px solid var(--adam-frame); border-top: none;
box-shadow: 0 5px 16px var(--adam-shadow);
}
:root { --cvhdr-stick-h: 150px; }
/* The widths below are the ColecoVision manager's values scaled by the
difference in logo aspect ratio (7.33:1 here against 6.15:1 there), so the
branding block is the same height on both sides at every breakpoint rather
than only at desktop. See adam_masthead.php for the arithmetic. */
@media (max-width: 900px) {
.cvhdr-inner { gap: 14px; padding: 8px 16px; min-height: 0; }
.cvhdr-brand img { width: 393px; }
.cvhdr-where { font-size: 21px; }
}
@media (max-width: 768px) {
.cvhdr-stick { max-height: 100vh; overflow-y: auto; }
}
@media (max-width: 600px) {
.cvhdr-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
.cvhdr-brand img { width: 322px; }
.cvhdr-ctx { text-align: left; }
.cvhdr-where { font-size: 18px; }
.cvhdr-spacer { display: none; }
}
/* ---------------------------------------------------------------------------
Navigation
--------------------------------------------------------------------------- */
.nav-menu a {
display: inline-block; color: var(--adam-link); font-size: 14px; font-weight: bold;
text-transform: uppercase; letter-spacing: .5px;
padding: 6px 12px; border-radius: 4px;
transition: all .3s ease;
}
.nav-menu a:hover {
background: var(--adam-rule); color: #ffffff; text-shadow: none;
}
.nav-menu a.active {
background: rgba(74, 127, 199, .28); color: var(--adam-heading);
box-shadow: inset 0 0 0 1px rgba(74, 127, 199, .55);
}
/* Mobile hamburger, matching the pure-CSS behaviour in nav_menu.php. */
.cvnav-toggle { display: none; }
.cvnav-burger { display: none; }
@media (max-width: 768px) {
.cvnav-burger {
display: block; margin: 6px auto; padding: 10px 18px; max-width: 240px;
text-align: center; color: var(--adam-heading); background: rgba(0, 0, 0, .45);
border: 2px solid var(--adam-rule); border-radius: 6px;
font-size: 16px; font-weight: bold; cursor: pointer;
-webkit-user-select: none; user-select: none;
}
.cvnav-burger:active { background: var(--adam-rule); color: #fff; }
.nav-menu { display: none !important; }
.cvnav-toggle:checked ~ .nav-menu {
display: block !important; width: 100%; max-width: 320px;
margin: 2px auto 12px; padding: 0;
border: 1px solid var(--adam-border-soft); border-radius: 8px;
overflow: hidden; background: rgba(0, 0, 0, .45);
}
.nav-menu > a {
display: block; width: 100%; box-sizing: border-box; text-align: center;
font-size: 15px; padding: 13px 12px; border-radius: 0;
border-bottom: 1px solid var(--adam-border-soft);
}
.nav-menu > a:last-child { border-bottom: none; }
/* The signed-in label is a span, so the rule above misses it. Same full
row, so the account block does not sit ragged above Sign Out. */
.nav-menu > .nav-who {
display: block; width: 100%; text-align: center;
padding: 11px 12px; border-bottom: 1px solid var(--adam-border-soft);
}
}
/* ---------------------------------------------------------------------------
Page shell
The dark content box floating on the light page - adamarchive.org's main
container. Everything a visitor reads lives inside this, which is why the
light page colour never has to carry text.
--------------------------------------------------------------------------- */
/* The width is held off the viewport edge rather than run to it, so the light
page shows as a margin down both sides. Without that gutter the shell reads
as the page and the light background is only ever a sliver above the
masthead. The 14px matches the padding on .cvhdr-stick so the banner box and
the content box line up. */
.cat-wrap {
width: calc(100% - 28px);
max-width: 1430px; margin: 0 auto 26px auto; padding: 26px 24px;
background: var(--adam-shell);
border: 2px solid var(--adam-frame);
border-radius: 12px;
box-shadow: 0 6px 22px var(--adam-shadow);
}
.cat-intro {
color: var(--adam-text); font-size: 15px; line-height: 1.8;
max-width: 820px; margin: 0 0 22px 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.cat-empty {
background: var(--adam-panel);
border: 2px solid var(--adam-rule); border-radius: 8px;
color: var(--adam-text); line-height: 1.7;
padding: 16px 20px; max-width: 820px;
}
.cat-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px 0; }
.cat-jump a {
font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: .5px;
padding: 6px 13px; border-radius: 14px;
background: var(--adam-sunken); border: 1px solid var(--adam-border-soft);
color: var(--adam-link);
}
.cat-jump a:hover {
background: var(--adam-hover-row); border-color: var(--adam-rule-lt);
color: var(--adam-heading);
}
/* ---------------------------------------------------------------------------
Section headings - the gold bar
adamarchive.org's .section-header: a brass gradient plate with black
uppercase text and a highlight that slides across it. The bar bleeds to the
edge of the panel it sits in, which is what the negative margins do.
--------------------------------------------------------------------------- */
.cat-sec { margin: 0 0 34px 0; scroll-margin-top: 150px; }
.cat-sec h2 {
background: var(--adam-gold);
color: #000000;
font-size: 20px; font-weight: bold;
text-transform: uppercase; letter-spacing: 2px; text-align: center;
padding: 13px 18px; margin: 0 0 16px 0;
border-radius: 8px;
position: relative; overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.cat-sec h2::before {
content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg,
transparent 0%, rgba(255, 255, 255, .3) 50%, transparent 100%);
animation: adamSlideGlow 3s ease-in-out infinite;
}
.cat-count { color: rgba(0, 0, 0, .62); font-size: 13px; font-weight: bold; }
@keyframes adamSlideGlow {
0% { left: -100%; }
100% { left: 100%; }
}
/* ---------------------------------------------------------------------------
Item grid. One per card, so the whole card is the link target and there
is exactly one anchor per item on the page.
--------------------------------------------------------------------------- */
.cat-grid {
display: grid; gap: 12px; margin-top: 12px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.cat-item {
display: flex; gap: 12px; align-items: center; padding: 11px 13px;
background: var(--adam-panel);
border: 2px solid var(--adam-rule); border-radius: 8px;
color: var(--adam-text);
box-shadow: 0 3px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07);
transition: all .3s ease;
}
.cat-item:hover {
border-color: var(--adam-rule-lt);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(204, 51, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .12);
text-shadow: none;
}
.cat-thumb {
width: 56px; height: 56px; object-fit: contain;
background: #0a1018; border: 1px solid var(--adam-border-soft);
border-radius: 4px; flex: 0 0 auto;
}
.cat-nothumb {
width: 56px; height: 56px; line-height: 56px; text-align: center;
background: #0a1018; border: 1px dashed var(--adam-border-soft);
border-radius: 4px; color: var(--adam-faint); flex: 0 0 auto; font-size: 20px;
}
.cat-txt { min-width: 0; }
.cat-title {
display: block; font-size: 14px; color: var(--adam-text);
font-weight: bold; line-height: 1.35;
}
.cat-item:hover .cat-title { color: var(--adam-heading); }
.cat-meta { display: block; font-size: 11.5px; color: var(--adam-muted); margin-top: 4px; }
.cat-id {
font-family: 'Courier New', monospace; color: var(--adam-label);
font-size: 11px; font-weight: bold;
}
.region-flag {
height: 11px; width: auto; margin-left: 5px; vertical-align: middle;
border: 1px solid var(--adam-border-soft); border-radius: 2px;
}
/* ---------------------------------------------------------------------------
Filter bar
--------------------------------------------------------------------------- */
.adam-filters {
background: var(--adam-panel);
border: 2px solid var(--adam-rule); border-radius: 8px;
padding: 16px 18px; margin: 0 0 22px 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.adam-frow { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.adam-field { display: flex; flex-direction: column; gap: 4px; }
.adam-field label {
font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
font-weight: bold; color: var(--adam-label);
}
.adam-field select,
.adam-field input[type="text"] {
font-family: inherit; font-size: 13px; padding: 9px 10px;
background: rgba(10, 16, 24, .92); color: var(--adam-text);
border: 1px solid var(--adam-border-soft); border-radius: 4px;
min-width: 150px; max-width: 250px;
transition: all .3s ease;
}
.adam-field input[type="text"] { min-width: 210px; }
.adam-field input[type="text"]::placeholder { color: var(--adam-faint); }
.adam-field select:focus,
.adam-field input[type="text"]:focus {
border-color: #4a7fc7; outline: none;
box-shadow: 0 0 6px rgba(74, 127, 199, .6);
}
.adam-btn {
font-family: inherit; font-size: 13px; font-weight: bold;
text-transform: uppercase; letter-spacing: 1px;
padding: 10px 22px;
background: var(--adam-btn); color: #ffffff;
border: 2px solid var(--adam-btn-edge); border-radius: 6px;
cursor: pointer; display: inline-block;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
transition: all .3s ease;
}
.adam-btn:hover {
background: var(--adam-btn-hi); color: #000000; border-color: #ffff00;
transform: translateY(-2px); text-shadow: none;
box-shadow: 0 4px 15px rgba(255, 255, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.adam-btn-clear {
background: transparent; color: var(--adam-muted);
border-color: var(--adam-border-soft); font-weight: normal;
}
.adam-btn-clear:hover {
background: var(--adam-hover-row); color: var(--adam-text);
border-color: #4a7fc7; box-shadow: 0 4px 12px rgba(74, 127, 199, .35);
}
.adam-resultline { font-size: 13.5px; color: var(--adam-muted); margin: 0 0 16px 0; }
.adam-resultline b { color: var(--adam-heading); font-family: 'Courier New', monospace; }
.adam-flag {
display: inline-block; font-size: 10px; font-weight: bold;
text-transform: uppercase; letter-spacing: .5px;
padding: 2px 8px; border-radius: 10px;
background: rgba(255, 255, 0, .14); color: var(--adam-heading);
border: 1px solid rgba(255, 255, 0, .45);
margin-left: 6px; vertical-align: middle;
}
/* ---------------------------------------------------------------------------
Landing page
--------------------------------------------------------------------------- */
.adam-hero { margin: 0 0 26px 0; }
.adam-hero h1 {
color: var(--adam-heading);
font-size: 34px; font-weight: bold;
text-transform: uppercase; letter-spacing: 2px; text-align: center;
margin: 6px 0 20px 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, .8), 0 0 20px rgba(255, 255, 0, .3);
}
/* The stat tiles are adamarchive.org's stats block: a blue label over a yellow
monospace figure, which is how the archive counts are shown there. */
.adam-tiles {
display: grid; gap: 14px; margin: 0 0 30px 0;
grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.adam-tile {
background: linear-gradient(135deg, rgba(42, 42, 42, .9) 0%, rgba(26, 26, 26, .9) 100%);
border: 1px solid rgba(85, 105, 130, .5); border-radius: 6px;
padding: 16px 14px; text-align: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.adam-tile-n {
display: block; font-family: 'Courier New', monospace;
font-size: 30px; font-weight: bold; color: var(--adam-heading); line-height: 1.1;
text-shadow: 1px 1px 2px rgba(0, 0, 0, .8), 0 0 10px rgba(255, 255, 0, .3);
}
.adam-tile-l {
display: block; font-size: 11px; font-weight: bold;
text-transform: uppercase; letter-spacing: 1px;
color: var(--adam-label); margin-top: 7px;
}
.adam-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.adam-card {
display: block; background: var(--adam-panel);
border: 2px solid var(--adam-rule); border-radius: 8px;
padding: 0 0 18px 0; overflow: hidden;
color: var(--adam-text);
box-shadow: 0 5px 15px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
transition: all .3s ease;
}
.adam-card:hover {
border-color: var(--adam-rule-lt); transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(204, 51, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .12);
text-shadow: none;
}
/* The card heading is the same brass plate as a section heading, bled to the
card edges - so an entry card reads as a titled panel, which is the shape
adamarchive.org uses for WELCOME and ARCHIVE CONTENTS. */
.adam-card h2 {
background: var(--adam-gold); color: #000000;
font-size: 17px; font-weight: bold;
text-transform: uppercase; letter-spacing: 1.5px; text-align: center;
padding: 12px 16px; margin: 0 0 14px 0;
position: relative; overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.adam-card h2::before {
content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg,
transparent 0%, rgba(255, 255, 255, .3) 50%, transparent 100%);
animation: adamSlideGlow 3s ease-in-out infinite;
}
.adam-card p {
font-size: 13.5px; color: var(--adam-text); line-height: 1.7;
margin: 0; padding: 0 18px;
text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
/* ---------------------------------------------------------------------------
Sign in / create account
One column, held narrow. A login form spread across a 1400px shell puts the
two fields at opposite ends of the screen; capping it keeps them under each
other where the eye already is.
--------------------------------------------------------------------------- */
.adam-auth { max-width: 560px; margin: 0 auto; }
.adam-tabs { display: flex; gap: 8px; margin: 0 0 16px 0; }
.adam-tab {
flex: 1 1 0; font-family: inherit; font-size: 13px; font-weight: bold;
text-transform: uppercase; letter-spacing: 1px;
padding: 11px 14px; cursor: pointer;
background: var(--adam-sunken); color: var(--adam-link);
border: 1px solid var(--adam-border-soft); border-radius: 6px;
transition: all .3s ease;
}
.adam-tab:hover { background: var(--adam-hover-row); color: var(--adam-heading); }
.adam-tab.on {
background: var(--adam-gold); color: #000000; border-color: #7a6a32;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
/* Both panes are in the markup so a failed submission can be rendered on the
right one with no script; this is what hides the other. */
.adam-pane { display: none; }
.adam-pane.on { display: block; }
/* Same object as .adam-card, minus the link behaviour - a panel with a brass
plate across its head. Not reusing .adam-card itself because that one is an
and styles its own hover. */
.adam-card-panel {
background: var(--adam-panel);
border: 2px solid var(--adam-rule); border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.adam-card-panel h2 {
background: var(--adam-gold); color: #000000;
font-size: 16px; font-weight: bold;
text-transform: uppercase; letter-spacing: 1.5px; text-align: center;
padding: 12px 16px; margin: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.adam-pane-body { padding: 18px; }
/* The filter bar's .adam-field is a fixed-width control in a flex row. In a
form it wants the full width of the column instead. */
.adam-field.wide { display: block; margin: 0 0 14px 0; }
.adam-field.wide label { display: block; margin-bottom: 4px; }
.adam-field.wide input[type="text"],
.adam-field.wide input[type="email"],
.adam-field.wide input[type="password"] {
font-family: inherit; font-size: 14px; padding: 10px 11px;
background: rgba(10, 16, 24, .92); color: var(--adam-text);
border: 1px solid var(--adam-border-soft); border-radius: 4px;
width: 100%; max-width: none; min-width: 0;
transition: all .3s ease;
}
.adam-field.wide input:focus {
border-color: #4a7fc7; outline: none;
box-shadow: 0 0 6px rgba(74, 127, 199, .6);
}
.adam-field .req { color: var(--adam-rule-lt); }
.adam-btn.wide { width: 100%; text-align: center; margin-top: 4px; }
.adam-msg {
padding: 10px 13px; border-radius: 5px; margin: 0 0 14px 0; font-size: 13.5px;
}
.adam-msg.bad {
background: rgba(204, 51, 0, .16); border: 1px solid var(--adam-rule-lt);
color: #ffc9b8;
}
.adam-msg.good {
background: rgba(47, 107, 58, .22); border: 1px solid #4c9a5e; color: #c7f0d1;
}
.adam-aside {
font-size: 13px; color: var(--adam-muted); line-height: 1.7; margin: 12px 0 0 0;
}
.adam-aside:first-child { margin: 0 0 14px 0; }
/* ---------------------------------------------------------------------------
Ownership on a browse card
.cat-cell only exists for a signed-in visitor - see browse.php. It makes the
grid cell a column so the control can sit under the card without being
inside the anchor.
--------------------------------------------------------------------------- */
/* scroll-margin-top so an #item-N jump does not land the card underneath the
sticky masthead. Matches the value on .cat-sec. */
.cat-cell { display: flex; flex-direction: column; scroll-margin-top: 150px; }
.cat-cell .cat-item { flex: 1 1 auto; border-radius: 8px 8px 0 0; border-bottom: none; }
/* Own and Want sit side by side under the card. Two forms, so they are two
buttons rather than one control with a mode - a single button that means
different things depending on state is the kind of thing people misclick. */
.cat-acts { display: flex; }
.cat-acts form { flex: 1 1 0; min-width: 0; }
.own-btn {
display: block; width: 100%; font-family: inherit;
font-size: 11.5px; font-weight: bold; text-transform: uppercase; letter-spacing: .6px;
padding: 7px 8px; cursor: pointer;
background: var(--adam-sunken); color: var(--adam-link);
border: 2px solid var(--adam-rule); border-top: 1px solid var(--adam-border-soft);
border-radius: 0 0 0 8px;
transition: all .25s ease;
}
.cat-acts form:only-child .own-btn { border-radius: 0 0 8px 8px; }
.cat-acts form + form .own-btn { border-radius: 0 0 8px 0; border-left: none; }
.own-btn:hover { background: var(--adam-hover-row); color: var(--adam-heading); }
/* Green for have, amber for want - two states that must not be confused at a
glance when they sit next to each other. */
.own-btn.on { background: rgba(47, 107, 58, .30); color: #b9f0c6; }
.own-btn.on:hover { background: rgba(204, 51, 0, .28); color: #ffc9b8; }
.own-btn.want.on { background: rgba(184, 134, 11, .30); color: #f6e2a6; }
.own-btn.want.on:hover { background: rgba(204, 51, 0, .28); color: #ffc9b8; }
.cat-cell.is-owned .cat-item,
.cat-cell.is-owned .own-btn { border-color: #4c9a5e; }
.cat-cell.is-wanted .cat-item,
.cat-cell.is-wanted .own-btn { border-color: #b8860b; }
/* ---------------------------------------------------------------------------
My Collection rows
--------------------------------------------------------------------------- */
.own-row {
background: var(--adam-panel);
border: 2px solid var(--adam-rule); border-radius: 8px;
margin: 0 0 10px 0;
box-shadow: 0 3px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.own-head { display: flex; align-items: center; gap: 12px; padding: 11px 13px; flex-wrap: wrap; }
.own-id { flex: 1 1 260px; min-width: 0; }
.own-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.own-tag {
font-size: 10.5px; font-weight: bold; text-transform: uppercase; letter-spacing: .5px;
padding: 3px 9px; border-radius: 10px;
background: var(--adam-sunken); color: var(--adam-muted);
border: 1px solid var(--adam-border-soft);
}
.own-tag.on {
background: rgba(47, 107, 58, .28); color: #b9f0c6; border-color: #4c9a5e;
}
/* ---------------------------------------------------------------------------
Wishlist rows
Same row as My Collection, with a left edge coloured by priority so the list
can be read down without stopping at every heading, and the "Got it" button
pinned to the right of the head.
--------------------------------------------------------------------------- */
.want-row { border-left-width: 6px; }
.want-row.prio-high { border-left-color: #d9534f; }
.want-row.prio-medium { border-left-color: #b8860b; }
.want-row.prio-low { border-left-color: #55697f; }
/* The two row actions sit together on the right of the head. On a narrow
screen they drop under the title rather than squeezing it. */
.want-acts { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
/* Remove: deliberately quieter than Move to Collection, and only red on
hover. A destructive action that looks urgent while sitting still gets
clicked by accident; one that colours up under the cursor tells you what
it is at the moment you are about to press it. */
.want-drop .own-btn.drop {
width: auto; border-radius: 5px; padding: 9px 16px;
background: transparent; color: var(--adam-muted);
border: 2px solid var(--adam-border-soft);
box-shadow: none;
}
.want-drop .own-btn.drop:hover {
background: rgba(204, 51, 0, .22); color: #ffc9b8;
border-color: var(--adam-rule-lt);
}
/* The move-to-collection button.
Blue, because on this interface blue is what you press and green is what you
already have. It was green with a tick, which is the same signal the owned
tag uses - on a list of things you do not own, that read as a status. */
.want-got { flex: 0 0 auto; }
.want-got .own-btn {
width: auto; border-radius: 5px; padding: 9px 16px;
background: var(--adam-btn); color: #ffffff;
border: 2px solid var(--adam-btn-edge);
box-shadow: 0 2px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.want-got .own-btn:hover {
background: var(--adam-btn-hi); color: #000000; border-color: #ffff00;
box-shadow: 0 4px 15px rgba(255, 255, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
}
/* The edit panel opens with no script - see the note in my_collection.php. */
.own-edit { border-top: 1px solid var(--adam-border-soft); }
.own-edit > summary {
cursor: pointer; list-style: none;
font-size: 11.5px; font-weight: bold; text-transform: uppercase; letter-spacing: .6px;
color: var(--adam-link); padding: 8px 13px;
}
.own-edit > summary::-webkit-details-marker { display: none; }
.own-edit > summary::before { content: '\25B8 '; }
.own-edit[open] > summary::before { content: '\25BE '; }
.own-edit > summary:hover { color: var(--adam-heading); }
.own-form { padding: 4px 13px 12px 13px; }
.own-checks { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 14px 0; }
.own-checks label {
display: inline-flex; align-items: center; gap: 7px;
font-size: 13px; color: var(--adam-text); cursor: pointer;
}
.own-checks input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.own-grid {
display: grid; gap: 12px; margin: 0 0 12px 0;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.own-grid .adam-field.wide { margin: 0; }
.own-form textarea {
font-family: inherit; font-size: 13.5px; padding: 9px 10px; width: 100%;
background: rgba(10, 16, 24, .92); color: var(--adam-text);
border: 1px solid var(--adam-border-soft); border-radius: 4px; resize: vertical;
}
.own-form textarea:focus {
border-color: #4a7fc7; outline: none; box-shadow: 0 0 6px rgba(74, 127, 199, .6);
}
.own-form input[type="date"] {
font-family: inherit; font-size: 14px; padding: 10px 11px; width: 100%;
background: rgba(10, 16, 24, .92); color: var(--adam-text);
border: 1px solid var(--adam-border-soft); border-radius: 4px;
}
.own-actions { margin-top: 12px; }
.own-remove { padding: 0 13px 13px 13px; }
/* The filter strip doubles as a tab set on My Collection. */
.cat-jump a.on {
background: var(--adam-gold); color: #000000;
border-color: #7a6a32; font-weight: bold;
}
/* ---------------------------------------------------------------------------
Profile
Two columns on a wide screen, one on a narrow one. The collection box spans
both because its tiles want the width; the settings panels are forms and read
better narrow.
--------------------------------------------------------------------------- */
.prof-grid {
display: grid; gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
align-items: start;
}
.prof-wide { grid-column: 1 / -1; }
.prof-wide .adam-tiles { margin-bottom: 18px; }
.prof-radio {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13.5px; color: var(--adam-text); line-height: 1.6;
margin: 0 0 12px 0; cursor: pointer;
}
.prof-radio input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }
.prof-radio strong { color: var(--adam-heading); font-weight: bold; }
/* How much of the catalogue is owned. The track is the sunken blue-grey; the
fill is the same brass as a section heading, so the page has one accent
rather than a new one invented for a bar. */
.prof-bar {
height: 14px; border-radius: 7px; overflow: hidden;
background: var(--adam-sunken);
border: 1px solid var(--adam-border-soft);
margin: 0 0 10px 0;
}
.prof-bar > span {
display: block; height: 100%;
background: var(--adam-gold);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.adam-card-panel textarea {
font-family: inherit; font-size: 14px; padding: 10px 11px; width: 100%;
background: rgba(10, 16, 24, .92); color: var(--adam-text);
border: 1px solid var(--adam-border-soft); border-radius: 4px; resize: vertical;
}
.adam-card-panel textarea:focus {
border-color: #4a7fc7; outline: none; box-shadow: 0 0 6px rgba(74, 127, 199, .6);
}
/* Signed-in identity in the nav. Not a link - it is a label with a link beside
it, so "signed in as X" never looks like something to click. */
.nav-who {
display: inline-block; font-size: 12.5px; color: var(--adam-muted);
padding: 6px 4px 6px 14px;
}
.nav-who b { color: var(--adam-heading); font-weight: normal; }
.adam-foot {
margin: 36px 0 0 0; padding: 18px 0 0 0;
border-top: 2px solid var(--adam-rule);
font-size: 13px; color: var(--adam-muted); text-align: center;
}
/* ---------------------------------------------------------------------------
Phone layout for the filter bar
The controls carry min-width:150px and max-width:250px, which on a 375px
screen leaves them wrapping one per row but sized to their content rather
than to the row - a ragged column of boxes of four different widths. Below
600px each takes the full width instead. Measured at a 375px viewport:
scrollWidth equals clientWidth and no element crosses the right edge, both
before and after this block. It is a legibility change, not an overflow fix.
--------------------------------------------------------------------------- */
@media (max-width: 600px) {
.cat-wrap { width: calc(100% - 16px); padding: 16px 14px; margin-bottom: 12px; }
.cvhdr-stick { padding: 8px 8px 6px 8px; }
.adam-filters { padding: 13px 13px; }
.adam-frow { gap: 11px; }
.adam-field { flex: 1 1 100%; }
.adam-field select,
.adam-field input[type="text"] { min-width: 0; max-width: none; width: 100%; }
.adam-btn { width: 100%; text-align: center; }
.cat-grid { grid-template-columns: 1fr; }
.adam-hero h1 { font-size: 24px; letter-spacing: 1px; }
.cat-sec h2 { font-size: 16px; letter-spacing: 1px; padding: 11px 12px; }
}
/* The sliding highlight on the brass bars is decoration and it never stops.
Anyone who has asked their system for less motion gets the plate without it. */
@media (prefers-reduced-motion: reduce) {
.cat-sec h2::before,
.adam-card h2::before { animation: none; display: none; }
.cat-item, .adam-card, .adam-btn, .nav-menu a, a { transition: none; }
.cat-item:hover, .adam-card:hover, .adam-btn:hover { transform: none; }
}
/* ---------------------------------------------------------------------------
Cross-side notice
Shown to a signed-in visitor whose profile says the other side. It sits
above the sticky masthead and scrolls away with the page - it is a fact to
register once, not a warning to keep in front of someone.
--------------------------------------------------------------------------- */
.side-note {
max-width: 1430px; margin: 12px auto 0 auto;
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
justify-content: space-between;
padding: 10px 16px; border-radius: 8px;
background: var(--adam-sunken); border: 1px solid var(--adam-border-soft);
color: var(--adam-text); font-size: 13px; line-height: 1.5;
}
.side-note b { color: var(--adam-heading); font-weight: bold; }
.side-note-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.side-note-btn {
font-size: 11.5px; font-weight: bold; text-transform: uppercase;
letter-spacing: .5px; padding: 6px 13px; border-radius: 5px;
background: var(--adam-btn); color: #ffffff;
border: 1px solid var(--adam-btn-edge); white-space: nowrap;
}
.side-note-btn:hover { background: var(--adam-btn-hi); color: #000; text-shadow: none; }
.side-note-btn.ghost {
background: transparent; color: var(--adam-link);
border-color: var(--adam-border-soft);
}
.side-note-btn.ghost:hover { background: var(--adam-hover-row); color: var(--adam-heading); }
@media (max-width: 600px) { .side-note { margin: 8px 8px 0 8px; } }