/* ========================================================================= Waaagh! Paint — Streamlined Edition ("Bench Light") Bright, editorial counterpart to styles.css's 1980s grimdark theme. A search-first landing tab (default), Recipes, Paint Schemes, Paint Inventory, Equivalency, and an opt-in On the Bench tab. Not configurable/portable — hardcoded per CLAUDE.md. ========================================================================= */ :root { --bg: #fbfaf7; --panel: #ffffff; --ink: #241f1a; --ink-dim: #7a6f60; --line: #e8e0d2; --accent: #c1372a; --accent-dk: #9c2c22; --gold: #ab8330; /* Soft neutral tints/hovers used throughout for pill/badge backgrounds, row hovers, zebra striping, and the handful of rgba() shadows — kept as tokens (not raw hex sprinkled through every rule below) specifically so the dark theme block can redefine them all in one place. */ --tint: #f2ece0; --hover-bg: #f6f2e9; --accent-tint: #fbe9e6; --placeholder: #b7ac98; --shadow-rgb: 36, 31, 26; --accent-rgb: 193, 55, 42; --bg-rgb: 251, 250, 247; /* "Wee Waaagh!" wordmark palette — a classic 4-colour multi-letter treatment (see weeWordmark() in index.php), using real Vallejo paint hexes instead of Google's own blue/red/yellow/green so it echoes the idea without copying the brand: Bloody Red, Orange Fire, Escorpena Green, Electric Blue. */ --wee-red: #bf282e; --wee-orange: #f1652e; --wee-green: #48b851; --wee-blue: #008cbf; } /* Manual dark-mode toggle (js/staging.js's #st-theme-toggle) — not tied to prefers-color-scheme on purpose, matching this app's other display toggles (Photos On/Off, and classic.php's e-ink mode) being explicit, persisted, user-driven switches rather than OS-inherited. Defaults ON (see the FOUC-prevention script in index.php's ) — a coal grey, not a pure black, keeping the same warm undertone as the light theme's warm paper rather than going neutral-grey. */ :root[data-theme="dark"] { --bg: #1c1b18; --panel: #242320; --ink: #eae5d8; --ink-dim: #a39985; --line: #3a3730; --accent: #e2543f; --accent-dk: #ff7a63; --gold: #c99a3e; --tint: #322f27; --hover-bg: #2b2924; --accent-tint: #3a231e; --placeholder: #6e6656; --shadow-rgb: 0, 0, 0; --accent-rgb: 226, 84, 63; --bg-rgb: 28, 27, 24; /* Wordmark goes mono in dark mode — a light grey instead of the 4-colour treatment (see the .wee-c1..4 override below); the loud multi-colour wordmark read fine on warm paper but felt like too much next to a coal-grey page. */ --title-mono: #b9b3a3; } .wee-c1 { color: var(--wee-red); } .wee-c2 { color: var(--wee-orange); } .wee-c3 { color: var(--wee-green); } .wee-c4 { color: var(--wee-blue); } :root[data-theme="dark"] .wee-c1, :root[data-theme="dark"] .wee-c2, :root[data-theme="dark"] .wee-c3, :root[data-theme="dark"] .wee-c4 { color: var(--title-mono); } * { box-sizing: border-box; } html, body { margin: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--ink); font: 16px/1.55 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; } h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.01em; margin: 0; text-wrap: balance; } a { color: inherit; } /* "Photos: Off" (js/staging.js's #st-photos-toggle) — a lighter, image-free view for phones. Purely a CSS hide; every image element/attribute and all the photo-selection logic (header_img, schemePhotosHtml(), etc.) stays exactly as it is underneath, untouched — this is a display toggle, not a removal, so it's a one-line revert if the call changes. */ body.st-no-images .st-recipe-photo, body.st-no-images .st-scheme-photos, body.st-no-images .st-photos-empty, body.st-no-images .st-bench-photos { display: none; } /* ── Tier 1: the site band ────────────────────────────────────────────── Duplicated verbatim into / (bw) and /notes/ (Waste Book) rather than shared from one stylesheet — the three rooms have three different palettes, and one shared file would mean three sets of overrides fighting each other, which is exactly the cascade problem suite.css caused in the games suite. Only the colour values differ between copies; every measurement matches. Sits above header.st-top rather than inside it, so it scrolls away while the app bar stays sticky — the band is orientation, the app bar is a tool. It is also the one piece of chrome the landing tab keeps (see body.st-landing-active, which hides the header and footer but not this). */ .rl-band { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 22px; flex-wrap: wrap; padding: 12px 22px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; } .rl-band-name { font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; } .rl-band-name:hover { color: var(--ink-dim); } .rl-band-rooms { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .rl-band-rooms a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .15s, border-color .15s; } .rl-band-rooms a:hover { color: var(--ink); border-bottom-color: var(--ink); } .rl-band-sep { color: var(--line); letter-spacing: 0; } /* The room you're already standing in — named, never linked. */ .rl-band-here { color: var(--placeholder); } @media (max-width: 480px) { .rl-band { padding: 10px 14px; gap: 8px 14px; font-size: .62rem; letter-spacing: .12em; } } /* ── Header / nav ───────────────────────────────────────────────────── */ header.st-top { position: sticky; top: 0; z-index: 30; background: rgba(var(--bg-rgb),.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); } /* The search-landing tab is the one place the header (nav/search/photos controls) doesn't belong — the landing has its own big wordmark and search box doing that job, and hiding the bar keeps it the clean, uncluttered lander it's meant to be. body class set by activateTab(). */ body.st-landing-active header.st-top { display: none; } /* Same reasoning extends to the footer's link back to the classic site — the landing tab stays completely clean; the link only matters once someone's already browsing real content on one of the other 4 tabs. */ body.st-landing-active .st-footer { display: none; } .st-footer { text-align: center; padding: 10px 0 46px; } .st-footer-sep { color: var(--line); margin: 0 .55em; } .st-footer-link { color: var(--ink-dim); font-size: .78rem; text-decoration: none; border-bottom: 1px dotted var(--line); padding-bottom: 1px; } .st-footer-link:hover { color: var(--accent-dk); border-color: var(--accent-dk); } .st-top-inner { display: flex; align-items: center; gap: 24px; padding: 14px 28px; max-width: 1180px; margin: 0 auto; } .st-brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); cursor: pointer; } .st-brand:hover .st-brand-name { color: var(--accent-dk); } .st-brand-name { font-family: Georgia, serif; font-weight: 700; font-size: 1.1rem; transition: color .15s; } nav.st-nav { display: flex; gap: 22px; flex: 1; flex-wrap: wrap; } nav.st-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; padding-bottom: 3px; border-bottom: 2px solid transparent; white-space: nowrap; } nav.st-nav a:hover { border-color: var(--line); } nav.st-nav a.active { border-color: var(--accent); color: var(--accent-dk); } /* Hamburger toggle — hidden entirely above the mobile breakpoint (see @media block below), where the full nav row already fits on one line. */ .st-nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); cursor: pointer; } .st-nav-toggle span { display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 1px; } .st-nav-toggle:hover { border-color: var(--accent); } .st-search-btn { font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 7px 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .st-search-btn:hover { border-color: var(--accent); color: var(--accent-dk); } #st-photos-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-dk); background: var(--accent-tint); } .st-kbd { font: inherit; font-size: .7rem; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--ink-dim); } /* ── Layout / panels ────────────────────────────────────────────────── */ .st-wrap { max-width: 1180px; margin: 0 auto; padding: 34px 28px 80px; } .st-panel { display: none; } .st-panel.active { display: block; animation: st-fade-in .25s ease both; } @keyframes st-fade-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .st-panel.active { animation: none; } } .st-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 16px; } .st-panel-head h2 { font-size: 1.6rem; } .st-count { font-size: .84rem; color: var(--ink-dim); white-space: nowrap; } /* ── Search-first landing tab (default) ──────────────────────────────── The header bar is deliberately hidden while this tab is active (see the body.st-landing-active rule near the header block below) — the landing's own big wordmark does that job instead, and the header's nav/search/ photos controls have nothing to do while there's no card list on screen. */ .st-landing { max-width: 640px; margin: 0 auto; padding: 8vh 0 20px; display: flex; flex-direction: column; align-items: center; } .st-landing-mark { display: flex; align-items: center; margin-bottom: 34px; } .st-landing-title { font-size: 2.1rem; letter-spacing: -.01em; } .st-landing-search-shell { width: 100%; } .st-landing-search-box { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 30px; padding: 15px 22px; box-shadow: 0 2px 6px rgba(var(--shadow-rgb),.05), 0 10px 30px rgba(var(--shadow-rgb),.06); transition: box-shadow .18s, border-color .18s; } .st-landing-search-box:focus-within { border-color: var(--accent); box-shadow: 0 2px 6px rgba(var(--accent-rgb),.08), 0 14px 34px rgba(var(--accent-rgb),.1); } .st-landing-search-box .glyph { font-size: 1.1rem; color: var(--ink-dim); flex-shrink: 0; } .st-landing-search-box input { border: none; outline: none; background: none; flex: 1; font: inherit; font-size: 1.02rem; color: var(--ink); min-width: 0; } .st-landing-search-box input::placeholder { color: var(--placeholder); } .st-landing-results:empty { display: none; } .st-landing-results { margin-top: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 34px rgba(var(--shadow-rgb),.08); overflow: hidden; } .st-lr-group-label { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; padding: 12px 22px 6px; } .st-lr-item { display: flex; align-items: center; gap: 10px; padding: 11px 22px; cursor: pointer; font-size: .94rem; border-top: 1px solid var(--line); } .st-lr-group-label + .st-lr-item, .st-landing-results > .st-lr-item:first-child { border-top: none; } .st-lr-item:hover, .st-lr-item.active { background: var(--hover-bg); } .st-lr-type { font-size: .62rem; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; background: var(--tint); color: var(--ink-dim); flex-shrink: 0; } .st-lr-sub { color: var(--ink-dim); margin-left: auto; font-size: .82rem; flex-shrink: 0; } .st-lr-empty { padding: 14px 22px; color: var(--ink-dim); font-size: .88rem; } .st-landing-browse { margin-top: 28px; display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; } .st-landing-browse .lbl { color: var(--ink-dim); font-size: .82rem; } .st-landing-browse a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .88rem; border-bottom: 2px solid transparent; } .st-landing-browse a:hover { border-color: var(--accent); color: var(--accent-dk); } .st-landing-stats { display: flex; gap: 28px; margin-top: 40px; } .st-landing-stats div { text-align: center; color: var(--ink-dim); font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; } .st-landing-stats b { color: var(--ink); font-family: Georgia, serif; font-size: 1.15rem; display: block; letter-spacing: 0; text-transform: none; margin-bottom: 2px; } .st-toolbar { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; } .st-input, .st-select { font: inherit; font-size: .9rem; padding: 10px 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); } .st-input { flex: 1 1 240px; } .st-input:focus, .st-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .st-showall { display: block; margin: 22px auto 0; font: inherit; font-size: .86rem; font-weight: 700; color: var(--accent-dk); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 10px 22px; cursor: pointer; } .st-showall:hover { border-color: var(--accent); } .st-empty { color: var(--ink-dim); font-size: .9rem; font-style: italic; padding: 30px 0; text-align: center; } /* ── Recipe cards ───────────────────────────────────────────────────── */ .st-recipe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; } .st-recipe-shell { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; scroll-margin-top: 90px; } .st-recipe-photo { height: 210px; background-size: cover; background-position: center center; background-color: var(--tint); } .st-recipe-photo.empty { display: flex; align-items: center; justify-content: center; } .st-recipe-photo.empty .st-photo-empty-inner { color: var(--ink-dim); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .st-recipe-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; } .st-recipe-meta h3 { font-size: 1.2rem; } .st-badge-row { display: flex; gap: 8px; margin: 10px 0 0; flex-wrap: wrap; } .st-pill { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 20px; background: var(--tint); color: var(--ink-dim); } .st-pill.faction { background: var(--accent-tint); color: var(--accent-dk); } /* Ported from styles.css's .model-desc/.desc-hd/.desc-step/.desc-lbl/ .desc-val (the real gallery card's description formatting) — see formatDesc() in js/staging.js. Every source line renders on its own row; nothing gets joined together. */ .st-model-desc { font-size: .84rem; color: var(--ink-dim); margin: 6px 0 4px; line-height: 1.55; } .st-desc-hd { font-family: Georgia, serif; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dk); margin: 14px 0 5px; padding-bottom: 3px; border-bottom: 1px solid var(--line); } .st-model-desc .st-desc-hd:first-child { margin-top: 0; } .st-desc-step { display: flex; gap: 10px; line-height: 1.5; padding: 3px 0 3px 8px; border-left: 2px solid var(--line); margin-bottom: 2px; } .st-desc-lbl { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); min-width: 58px; flex-shrink: 0; padding-top: 1px; } .st-desc-val { font-size: .88rem; color: var(--ink); line-height: 1.4; } .st-desc-step.st-desc-sub { padding-left: 20px; border-left-color: var(--line); margin-bottom: 1px; } .st-desc-step.st-desc-sub .st-desc-val { font-size: .78rem; color: var(--ink-dim); } .st-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .st-step { display: flex; gap: 11px; align-items: flex-start; } /* Fixed dark neutral, not tokenized to --ink/--ink-dim on purpose — this badge/circle pairing needs a dark chip + white text in both themes, and --ink/--ink-dim flip light under dark mode (that's the whole point of the token), which would otherwise turn these unreadable. */ .st-step-num { width: 22px; height: 22px; border-radius: 50%; background: #3a352c; color: #fff; font-size: .68rem; font-weight: 700; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .st-step-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .st-step-tech { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 4px; color: #fff; background: #6b6055; } .st-step-tech.tech-basecoat, .st-step-tech.tech-layer { background: #6b6055; } .st-step-tech.tech-wash, .st-step-tech.tech-shade { background: #5a5040; } .st-step-tech.tech-special { background: #4d7a52; } .st-step-tech.tech-edge, .st-step-tech.tech-highlight { background: var(--accent); } .st-step-tech.tech-glaze, .st-step-tech.tech-drybrush, .st-step-tech.tech-stipple, .st-step-tech.tech-blend { background: var(--gold); } .st-step-paint { font-weight: 700; font-size: .88rem; } .st-swatch-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 6px; border: 1px solid rgba(0,0,0,.15); } .st-step-note { font-size: .8rem; color: var(--ink-dim); margin-top: 2px; } /* Brush name on a step, sharing the note's meta line. Set apart from the note text (which is the user's own prose) by italics, so the two read as different kinds of thing rather than one run-on sentence. */ .st-step-brush { font-style: italic; } .st-step-meta-sep { margin: 0 .45em; color: var(--line); font-style: normal; } .st-used-in { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: .78rem; color: var(--ink-dim); } .st-used-in a { color: var(--accent-dk); font-weight: 600; text-decoration: none; } .st-used-in a:hover { text-decoration: underline; } /* ── Scheme cards ───────────────────────────────────────────────────── */ .st-scheme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .st-scheme-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; scroll-margin-top: 90px; } .st-scheme-photos { display: grid; grid-template-columns: 2fr 1fr; gap: 3px; height: 210px; background: var(--line); } .st-scheme-photos.one-photo { grid-template-columns: 1fr; } .st-photo-main { background-size: cover; background-position: center center; } .st-photo-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 3px; } .st-photo-stack.single-stack { grid-template-rows: 1fr; } .st-photo-sm { background-size: cover; background-position: center center; } .st-photos-empty { height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--hover-bg); color: var(--ink-dim); gap: 6px; } .st-photos-empty .icon { width: 30px; height: 30px; border-radius: 6px; border: 2px dashed var(--line); } .st-photos-empty span { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .st-scheme-palette { display: flex; height: 8px; } .st-scheme-palette span { flex: 1; } .st-scheme-body { padding: 16px 20px 20px; } .st-card-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .st-scheme-body h3 { font-size: 1.08rem; } .st-scheme-tags { display: flex; gap: 7px; margin: 6px 0 10px; flex-wrap: wrap; } .st-scheme-body .st-model-desc { font-size: .82rem; margin: 4px 0 12px; } .st-swatch-list { display: flex; gap: 6px; flex-wrap: wrap; } .st-name-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; background: var(--tint); padding: 4px 9px 4px 5px; border-radius: 20px; } /* ── On the Bench (opt-in) — same card shape as a scheme card: a photo strip, glanceable tags/meta, then the linked-recipe step breakdown + leftover-paints fallback (schemeBreakdownHtml() in js/staging.js, reused verbatim — bench entries share the same .recipes/.colors schema). Reuses .st-scheme-tags/.st-swatch-list/.st-name-chip/.st-section* as-is rather than inventing bench-only equivalents. */ .st-bench-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .st-bench-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; } /* Escapes the card's own padding so the strip runs edge-to-edge at the top, matching how .st-scheme-photos/.st-recipe-photo sit above their card bodies elsewhere — negative margins matching .st-bench-card's own padding (18px 20px), not tokenized since nothing else reuses this exact offset. */ .st-bench-photos { display: flex; gap: 3px; height: 100px; margin: -18px -20px 14px; border-radius: 8px 8px 0 0; overflow: hidden; } .st-bench-photo { flex: 1; background-size: cover; background-position: center center; } .st-bench-card h3 { font-size: 1.08rem; } .st-bench-meta { font-size: .78rem; color: var(--ink-dim); margin: -4px 0 10px; } .st-bench-card .st-model-desc { font-size: .82rem; margin: 4px 0 12px; } .st-bench-card .st-swatch-list { margin-top: 4px; } /* ── Sectioned breakdown inside a scheme card (linked recipe steps, then any leftover paints not covered by a recipe) — mirrors the original site's Warpaint Mode / pull-sheet behavior; sections get a clear divider + small uppercase label so "Recipe: X" vs "Other Paints" reads at a glance. ────── */ .st-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .st-section-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .st-section-label { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); background: var(--tint); padding: 3px 8px; border-radius: 4px; flex-shrink: 0; } .st-section-head a { color: var(--accent-dk); font-weight: 700; font-size: .92rem; text-decoration: none; } .st-section-head a:hover { text-decoration: underline; } /* ── Copy-link icon (recipe + scheme cards) ────────────────────────── */ .st-copy-link { font: inherit; font-size: .72rem; font-weight: 700; color: var(--ink-dim); background: none; border: none; cursor: pointer; padding: 2px 4px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; } .st-copy-link:hover { color: var(--accent-dk); } .st-copy-link .glyph { font-size: .9rem; } /* ── Tables (Inventory / Equivalency) ───────────────────────────────── */ .st-table-wrap { overflow-x: auto; } table.st-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } table.st-table th { text-align: left; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); padding: 10px 16px; background: var(--hover-bg); border-bottom: 1px solid var(--line); white-space: nowrap; } table.st-table td { padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: middle; } table.st-table tr:last-child td { border-bottom: none; } /* Subtle zebra striping — just enough to help the eye track a row across several columns, not a strong banded look. */ table.st-table tbody tr:nth-child(even) { background: var(--hover-bg); } .st-sw { width: 18px; height: 18px; border-radius: 5px; display: inline-block; border: 1px solid rgba(0,0,0,.12); margin-right: 10px; vertical-align: middle; flex-shrink: 0; } .st-brand-cell { font-size: .82rem; color: var(--ink-dim); } /* Restock flag — subtle by design: a small text tag next to the paint name, not a dedicated table column. Shown regardless of the Stock filter above (harmless when a specific status is already selected, useful when browsing "All Stock" and just want flagged paints to catch the eye). */ .st-stock-flag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 10px; margin-left: 8px; vertical-align: middle; } .st-stock-low { background: #f5e6c8; color: #8a6a1a; } .st-stock-out { background: #f7dcd8; color: #a63a2e; } .st-stock-wanted { background: #dbe6f2; color: #2a4a7a; } th.st-col-citadel { background: var(--accent-tint); color: var(--accent-dk); } th.st-col-vallejo { background: #e4ede4; color: #3a5a4a; } th.st-col-proacryl { background: #e2e8f2; color: #2a4a7a; } th.st-col-ttc { background: #ece4f2; color: #5a3a7a; } .st-dash { color: var(--ink-dim); } /* ── Dark-theme overrides for the handful of fixed light-tint colour pairs above (stock flags, brand-tinted Equivalency headers) that carry their own hardcoded foreground colour — a token flip alone isn't enough for these, since the light background AND the darker text were both picked as a matched pair. Everything else in this file is already token-driven and needs no override here. ────────────────────────────────────────────── */ :root[data-theme="dark"] .st-stock-low { background: #3a2f14; color: #e0b258; } :root[data-theme="dark"] .st-stock-out { background: #3a1f1a; color: #e2867a; } :root[data-theme="dark"] .st-stock-wanted { background: #1c2a3a; color: #86b0e0; } :root[data-theme="dark"] th.st-col-vallejo { background: #223326; color: #86caa0; } :root[data-theme="dark"] th.st-col-proacryl { background: #1f2a38; color: #86aee0; } :root[data-theme="dark"] th.st-col-ttc { background: #2c2338; color: #c39ce0; } :root[data-theme="dark"] .st-swatch-dot, :root[data-theme="dark"] .st-sw { border-color: rgba(255, 255, 255, .2); } :root[data-theme="dark"] .st-modal { box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 0 1px var(--line); } /* ── Deep-link highlight pulse ──────────────────────────────────────── */ @keyframes st-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.55); } 100% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb),0); } } .st-highlight { animation: st-pulse 1.1s ease-out 2; border-color: var(--accent) !important; } @media (prefers-reduced-motion: reduce) { .st-highlight { animation: none; border-color: var(--accent) !important; } } /* ── Global search modal ────────────────────────────────────────────── */ .st-modal-overlay { position: fixed; inset: 0; background: rgba(var(--shadow-rgb),.45); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; } .st-modal { background: var(--panel); width: min(560px, 92vw); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; max-height: 70vh; display: flex; flex-direction: column; } .st-modal-input { font: inherit; font-size: 1.05rem; padding: 18px 22px; border: none; border-bottom: 1px solid var(--line); width: 100%; outline: none; } .st-modal-results { overflow-y: auto; padding: 8px 0; } .st-modal-group-label { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; padding: 10px 22px 4px; } .st-modal-item { display: flex; align-items: center; gap: 10px; padding: 10px 22px; cursor: pointer; font-size: .92rem; } .st-modal-item:hover, .st-modal-item.active { background: var(--hover-bg); } .st-modal-item .st-modal-type { font-size: .62rem; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; background: var(--tint); color: var(--ink-dim); flex-shrink: 0; } .st-modal-empty { padding: 24px 22px; color: var(--ink-dim); font-size: .88rem; text-align: center; } .st-modal-hint { padding: 10px 22px; border-top: 1px solid var(--line); font-size: .72rem; color: var(--ink-dim); } /* ── Quick View ───────────────────────────────────────────────────────── A single scheme/recipe card in a lightbox instead of jumping tabs, for a fast "what was the paint for that shoulder piece again" desk-check. Reuses schemeCardHtml()/recipeCardHtml() verbatim (js/staging.js) so it can never drift from the real card. Paints deliberately skip this and keep their existing jump-to-Inventory-and-filter behaviour instead — there's no card-shaped view for a table row to begin with. */ .st-quickview-modal { width: min(640px, 94vw); max-height: 84vh; } .st-quickview-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .st-quickview-jump-btn { font: inherit; font-size: .82rem; font-weight: 700; color: var(--accent-dk); background: none; border: none; cursor: pointer; padding: 6px 8px; } .st-quickview-jump-btn:hover { text-decoration: underline; } .st-quickview-close { font: inherit; font-size: 1.3rem; line-height: 1; color: var(--ink-dim); background: none; border: none; cursor: pointer; padding: 2px 10px; } .st-quickview-close:hover { color: var(--ink); } .st-quickview-body { overflow-y: auto; } .st-quickview-body .st-recipe-shell, .st-quickview-body .st-scheme-card { border: none; border-radius: 0; scroll-margin-top: 0; } /* ── Photo lightbox ───────────────────────────────────────────────────── Click any scheme/recipe/bench photo (js/staging.js delegates on [data-lightbox-src]) to view it full-size. A near-black backdrop regardless of the active light/dark theme — same convention as classic.php's own .lightbox-overlay, since a photo viewer's job is to disappear behind the image, not to match the surrounding page chrome. z-index sits above the Quick View modal (100) so a photo clicked from inside a Quick View card still opens on top of it. */ .st-lightbox-overlay { display: none; position: fixed; inset: 0; z-index: 150; background: rgba(10, 9, 7, .94); align-items: center; justify-content: center; } .st-lightbox-overlay.open { display: flex; } .st-lb-img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 3px; box-shadow: 0 0 60px rgba(0,0,0,.9); display: block; } .st-lb-close { position: absolute; top: 6px; right: 10px; font-size: 34px; line-height: 1; color: #d8d0c0; cursor: pointer; transition: color .15s; font: inherit; background: none; border: none; padding: 10px 12px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .st-lb-close:hover { color: #fff; } .st-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 42px; line-height: 1; font: inherit; color: #d8d0c0; cursor: pointer; padding: 8px 16px; background: rgba(0,0,0,.5); border: none; border-radius: 3px; transition: color .15s, background .15s; } .st-lb-arrow:hover { color: #fff; background: rgba(0,0,0,.8); } .st-lb-prev { left: 12px; } .st-lb-next { right: 12px; } .st-lb-arrow[hidden] { display: none !important; } .st-lb-counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: .68rem; letter-spacing: .08em; color: #d8d0c0; } .st-photo-main, .st-photo-sm, .st-bench-photo, .st-recipe-photo:not(.empty) { cursor: zoom-in; } /* ── Back-to-top ──────────────────────────────────────────────────────── Every tab except the landing tab (js/staging.js's scroll listener checks body.st-landing-active and keeps this hidden there — nothing to scroll back up to on a page with no header and no long card list). */ #st-back-to-top { position: fixed; bottom: 24px; right: 24px; z-index: 40; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 1.15rem; font-weight: 700; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(var(--shadow-rgb),.3); transition: background .15s, transform .15s; } #st-back-to-top:hover { background: var(--accent-dk); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { #st-back-to-top:hover { transform: none; } } @media (max-width: 860px) { .st-top-inner { flex-wrap: wrap; } /* Hamburger dropdown — replaces the old wrap-into-3-rows nav, which ate a chunk of the header and squeezed the Search button down to almost nothing. header.st-top is the nearest positioned ancestor (position: sticky counts), so this resolves full-bleed edge-to-edge rather than confined to .st-top-inner's centered max-width column — deliberate, reads better as a mobile menu than a narrow centered box would. */ .st-nav-toggle { display: flex; } nav.st-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; flex-wrap: nowrap; gap: 0; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(var(--shadow-rgb),.15); padding: 6px 0; } nav.st-nav.st-nav-open { display: flex; } nav.st-nav a { padding: 13px 28px; border-bottom: none; } nav.st-nav a:hover, nav.st-nav a.active { background: var(--tint); } /* Dark/Photos are real .st-search-btn pill buttons on desktop (moved inside